#init_unmute{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index: 1000005;
    background: -moz-linear-gradient(-45deg,  rgba(63,76,107,0.91) 0%, rgba(70,52,89,0.87) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(63,76,107,0.91) 0%,rgba(70,52,89,0.87) 100%);
    background: linear-gradient(135deg,  rgba(63,76,107,0.91) 0%,rgba(70,52,89,0.87) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e83f4c6b', endColorstr='#de463459',GradientType=1 );
}

#init_unmute >div{
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-right: 0px;
    z-index: 10;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#init_unmute .button{
    height: 50px;
    line-height: 50px;
    padding-right: 25px;
    font-size: 14px;
    padding-left: 50px;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    z-index: 10;
    opacity: .9;
    margin: 0px 5px;
    color: rgba(255,255,255,.7);
    user-select: none;
    background: rgb(64,150,238);
    background: -moz-linear-gradient(-45deg,  rgba(64,150,238,1) 0%, rgba(48,178,100,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(64,150,238,1) 0%,rgba(48,178,100,1) 100%);
    background: linear-gradient(135deg,  rgba(64,150,238,1) 0%,rgba(48,178,100,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#30b264',GradientType=1 );

    transition: .1s all ease;
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
}
#init_unmute .button.back{
    background: rgb(169,3,41);
    background: -moz-linear-gradient(-45deg,  rgba(169,3,41,1) 0%, rgba(135,2,86,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(169,3,41,1) 0%,rgba(135,2,86,1) 100%);
    background: linear-gradient(135deg,  rgba(169,3,41,1) 0%,rgba(135,2,86,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#870256',GradientType=1 );

}
#init_unmute .button:hover{
    color:rgba(255,255,255,1);
    opacity: 1;
}
#init_unmute .button:active,#init_unmute .button.tstart{
    color:yellow;
}
#init_unmute .button i{
    position: absolute;
    top: 0px;
    left:0;
    width:50px;
    height:50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    user-select:none;
}
#div_classes .title{
    text-align: center;
}

.generic_fade_prepare{
    opacity: 0;
    transition: .1s all ease;
    pointer-events: none;
    display: none;
}
.generic_fade_prepare.prepare{
    display: block;
    opacity: 0;
    transition: .1s all ease;
    pointer-events: none;
}
.generic_fade_prepare.active{
    opacity: 1;
}

#div_lesson{
    z-index: 2;
    display: none;
    width:100%;
    height:100%;
    margin: auto;
    overflow: hidden;
    transition: .1s all ease;
    text-align: center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
    background-blend-mode: multiply,multiply;

}
#div_lesson.active{
    display: block;
}

#div_outer{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align: center;
    background-image: url(/img/tile_bg.png);
    background-repeat: repeat;
    /*background-color: #B4C6C6;*/
}
#div_inner{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align: center;
    background-image: url(/img/bg_school.png);
    background-position: bottom;
    background-repeat: no-repeat;
    /*        background-size: contain;*/
}

#div_school{
    position: absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:30px;
    line-height:30px;
    text-align: center;
    font-size: 18px;
    color:rgba(255,255,255,.8);
    background:rgba(0,0,0,.7);
    font-family: 'Ubuntu', sans-serif;
    /*z-index: 100;*/
}

#div_logo{
    position: absolute;
    top:10px;
    left:0;
    width:100%;
    height:80px;
}

#main_menu{
    position: absolute;
    top:100px;
    left:0;
    width:100%;
    height:30px;
    z-index: 1;
}

#main_menu > div{
    width:150px;
    height:30px;
    line-height:30px;
    background:rgba(255,255,255,.8);
    color: rgba(0,0,0,.5);
    border:1px solid #aaa;
    font-size: 12px;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    transition: .1s all ease;
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    user-select:none;
}

#main_menu > div:hover{
    background:rgba(155,155,155,.5);
}
#main_menu > div:active,#main_menu > div.tstart{
    background:rgba(255,255,255,.8);
}
#main_menu > div.active{
    color:#fff;
    background:rgba(255,255,255,.8);
    background: rgb(64,150,238);
    background: -moz-linear-gradient(-45deg, rgba(64,150,238,1) 0%, rgba(48,178,100,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(64,150,238,1) 0%,rgba(48,178,100,1) 100%);
    background: linear-gradient(135deg, rgba(64,150,238,1) 0%,rgba(48,178,100,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#30b264',GradientType=1 );

}

#div_classes,#div_homework{
    top:0px;
    position: absolute;
    max-width: 960px;
    width:100%;
    height:100%;
    padding-top: 150px;
    padding-bottom: 30px;
    margin: auto;
    text-align: left;
    margin: auto;
    overflow: auto;
    user-select:none;
    display: none;
}

#div_classes.active,#div_homework.active{
    display:block;
}
#div_classes .title{
    font-family: 'Ubuntu', sans-serif;
    font-size: 24px;
    margin-bottom: 10px;
}

#div_classes .item{
    pointer-events: none;
    opacity: .7;
    text-align: center;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    width:200px;
    height:150px;
    color: rgba(0,0,0,.8);
    border: 1px solid #ddd;
    margin: 5px;
    background: rgba(255,255,255,.8);
    transition: .1s all ease;
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
}
#div_classes.connected .item{
    pointer-events: auto;
    opacity: 1;
}
#div_classes .item .name{
    margin-top: 20px;
}

#div_classes .item .lesson_countdown_time{
    font-size: 12px;
    color:rgba(255,255,255,.7);
}
#div_classes .item .state{
    position: absolute;
    bottom:40px;
    width:100%;
    text-align: center;
}

#div_classes .item .state>div{
    display: inline-block;
    *display:inline;
    zoom: 1;
    padding: 5px 10px;
    font-size: 14px;
    color:#fff;
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.43);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.43);
    box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.43);
}
#div_classes .item .state>.status{
    background: rgb(170,170,170);
    background: -moz-linear-gradient(-45deg, rgba(170,170,170,1) 0%, rgba(99,99,99,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(170,170,170,1) 0%,rgba(99,99,99,1) 100%);
    background: linear-gradient(135deg, rgba(170,170,170,1) 0%,rgba(99,99,99,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#636363',GradientType=1 );
}
#div_classes .item .state>.status.started{
    background: rgb(3,153,115);
    background: -moz-linear-gradient(-45deg, rgba(3,153,115,1) 0%, rgba(104,186,98,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(3,153,115,1) 0%,rgba(104,186,98,1) 100%);
    background: linear-gradient(135deg, rgba(3,153,115,1) 0%,rgba(104,186,98,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#039973', endColorstr='#68ba62',GradientType=1 );
}
#div_classes .item .state>.status.paused{
    background: rgb(145,2,78);
    background: -moz-linear-gradient(-45deg, rgba(145,2,78,1) 0%, rgba(158,83,96,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(145,2,78,1) 0%,rgba(158,83,96,1) 100%);
    background: linear-gradient(135deg, rgba(145,2,78,1) 0%,rgba(158,83,96,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91024e', endColorstr='#9e5360',GradientType=1 );
}
#div_classes .item .state>.status.will_start{
    background: rgb(155,104,3);
    background: -moz-linear-gradient(-45deg, rgba(155,104,3,1) 0%, rgba(151,181,95,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(155,104,3,1) 0%,rgba(151,181,95,1) 100%);
    background: linear-gradient(135deg, rgba(155,104,3,1) 0%,rgba(151,181,95,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b6803', endColorstr='#97b55f',GradientType=1 );
}

#div_classes  .item .connecteds {
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:20px;
    line-height:20px;
    background: rgba(0,0,0,.5);
    color:rgba(255,255,255,.7);
}
#div_classes .connecteds .val{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: middle;
    border-radius: 5px;
    padding: 0px 7px;
    color:#fff;
    height:12px;
    line-height:12px;
}
#div_classes .item:hover{
    background: rgba(0,0,0,.6);
    color:rgba(255,255,255,.8);
}



.main_loader{
    text-align: center;
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: rgba(100,100,100,.8);
    z-index: 100000000;
    color:rgba(255,255,255,.8);
    font-size: 18px;
}

#account_panel{
    position: absolute;
    z-index: 10;
    background: rgba(0,0,0,.7);
    top:3px;
    left: 0px;
    padding:3px 10px;
    font-size: 11px;
    color:rgba(255,255,255,.8);
    padding-left: 40px;
    text-align: left;
    height: 35px;
    line-height: 10px;
    padding-top: 5px;
}
#account_panel .name,#account_panel .type{
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    height:12px;
}
#account_panel .connecting{
    position: absolute;
    top:0;
    right:0;
    height:35px;
    transform: translate(181px ,0px);
    color:rgba(255,255,255,.9);
    width:180px;
    padding-top: 5px;
    padding-left: 40px;
    line-height: 11px;
    font-size: 10px;
    background: -moz-linear-gradient(-45deg,  rgba(0,99,112,0.71) 0%, rgba(0,99,112,0.71) 1%, rgba(0,60,107,0.74) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(0,99,112,0.71) 0%,rgba(0,99,112,0.71) 1%,rgba(0,60,107,0.74) 100%);
    background: linear-gradient(135deg,  rgba(0,99,112,0.71) 0%,rgba(0,99,112,0.71) 1%,rgba(0,60,107,0.74) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5006370', endColorstr='#bd003c6b',GradientType=1 );
    pointer-events: none;
    opacity: none;
    text-align: left;
    transition: .1s all ease;
}

#account_panel .connecting.connected{
    transform: translate(41px ,0px);
    width:40px;
    background: -moz-linear-gradient(-45deg,  rgba(0,110,46,0.71) 0%, rgba(0,110,46,0.71) 1%, rgba(0,110,46,0.74) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(0,110,46,0.71) 0%,rgba(0,110,46,0.71) 1%,rgba(0,110,46,0.74) 100%);
    background: linear-gradient(135deg,  rgba(0,110,46,0.71) 0%,rgba(0,110,46,0.71) 1%,rgba(0,110,46,0.74) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5006e2e', endColorstr='#bd006e2e',GradientType=1 );
}

#account_panel .connecting i{
    position: absolute;
    left:0;
    top:0px;
    width:35px;
    height:35px;
    line-height:35px;
    font-size: 16px;
    text-align: center;
    color:rgba(255,255,255,.6);
}
#account_panel .menu{
    position: absolute;
    left:0;
    bottom:-26px;
    font-size: 12px;
}
#account_panel .menu .signout{
    color:#EFACAD;
    background: rgba(0,0,0,.8);
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    margin-right: 10px;
    padding: 0px 7px;
    text-decoration: none;
    height: 25px;
    line-height: 25px;
    transition: all ease .1s;
}

#account_panel .menu .signout:hover{
    color:#6d0019;
    background:#EFACAD;
}

#account_panel .acc_icon{
    pointer-events: none;
    top:0px;
    left:0px;
    width:40px;
    height:40px;
    line-height:40px;
    font-size: 16px;
    color:rgba(255,255,255,.5);
    text-align: center;
    position: absolute; 
}

#account_panel .mnu_icon{
    pointer-events: none;
    top:0px;
    left:0px;
    width:40px;
    height:40px;
    line-height:40px;
    font-size: 16px;
    color:rgba(255,255,255,.5);
    text-align: center;
    position: absolute; 
    display: none;
}

#account_panel .mnu_icon:hover{
    background: #006699;
}

#account_panel .mnu_icon:action{
    background: #009966;
}

#logo_square{
    width:200px;
    height:60px;
    position: absolute;
    top:0px;
    left:0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(/img/wk_logo_square_light.png);
}
#teachers_video_name{
    position: absolute;
    top:0;
    left:0;
    font-size: 2.0vw;
    color:#fff;
    background: rgba(0,0,0,.6);
    padding: 5px 10px;
}
#lesson_central_panel{
    width:100%;
    height: 100%;
    padding-top:0px;
    background: rgba(0,0,0,.1);
    margin: auto;
    z-index: 1;
    background-image: url(/img/tile_lesson_bg.png);
    background-repeat: repeat;
}
#teachers_file{
    position: absolute;
    left:50%;
    width:100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    /*transition: .1s all ease;*/
    transform: translate(-50%,0px);
}
#sketch_container{
    height:100%;
    pointer-events: none;
    opacity: 0;
    transition: .1s all ease;
    /*transform: translate(-50%,0px);*/
    padding-top: 70px;
    padding-left: 10px;
    padding-bottom: 325px;
    padding-right: 10px;
    z-index: 1;
    font-size: 0px;
    top:0;
}

#sketch_container.active{
    pointer-events: auto;
    opacity: 1;
}
#teachers_file.active{
    padding-left: 80px;
    pointer-events: auto;
    opacity: 1;
}

#sketch_container.expanded{  
    left:0px!important;
    z-index: 1000000;
}
#sketch_container.expanded #sketch_actions{
    display: none!important;
}

#teachers_file_canvas canvas{
    max-height: 100%;
    max-width: 100%;
    webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
}


#teachers_video_panel,#teachers_lesson_title{
    position: absolute;
    width:100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: .1s all ease;
}

#teachers_video_panel.active,#teachers_lesson_title.active{
    opacity: 1;
    pointer-events: auto;
}

#teachers_video_panel video{
    transform: translate(-50%,0px);
    left:50%;
    width:100%;
    height: 100%;
    /*max-width: 854px;*/
    /*max-height: 480px;*/
}

#teachers_video_panel .solo_panel{
    /*transform: translate(-50%,0px);*/
    /*left:50%;*/
    width:100%;
    height: 100%;
    /*max-width: 854px;*/
    /*max-height: 480px;*/
    background: rgb(63,76,107);
    background: -moz-linear-gradient(-45deg,  rgba(63,76,107,1) 0%, rgba(99,99,99,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(63,76,107,1) 0%,rgba(99,99,99,1) 100%);
    background: linear-gradient(135deg,  rgba(63,76,107,1) 0%,rgba(99,99,99,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#636363',GradientType=1 );

    position: absolute;
    top:0;
    left:0;
}

#teachers_video_panel .solo_panel>div{
    /*transform: translate(-50%,0px);*/
    /*left:50%;*/
    transform: translate(-50%,-50%);
    left:50%;
    top:50%;
    font-size:16px;
    line-height: 18px;
    color:rgba(255,255,255,.7);
}

#lesson_central_panel .solo_panel_me{
    border-radius: 5px;
    padding: 10px;
    width:100%;
    position: absolute;
    bottom:0;
    left:0;
    color:#111;
    font-size: 14px;
    line-height: 16px;
    padding-right: 150px;
    z-index: 100;
    user-select:none;
    background: rgb(255,168,76);
    background: -moz-linear-gradient(-45deg, rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    background: linear-gradient(135deg, rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 );
}

#lesson_central_panel .solo_panel_me .cancel{
    position: absolute;
    top:3px;
    right:5px;
    width:120px;
    line-height: 14px;
    padding: 7px 5px;
    pointer-events: auto;
    color:#fff;
    border-radius: 3px;
    text-align: center;
    background: rgba(0,0,0,.3);
}
#lesson_central_panel .solo_panel_me .cancel:hover{
    background: rgba(0,0,0,.6);
}
#lesson_central_panel .solo_panel_me .cancel:active,#lesson_central_panel .solo_panel_me .cancel.tstart{
    background: rgba(0,0,0,.3);
}



#lesson_pause_label{
    display: none;
}
#lesson_pause_label .item{
    padding:10px;
    font-size: 18px;
    color:rgba(255,255,255,.8);
    z-index: 100000;
    pointer-events: auto;
    margin-top: 20px;
}
#lesson_countdown_timer{
    margin-bottom: 10px;
}

#lesson_pause_label .item.paused{
    background: rgb(173,100,101);
    background: -moz-linear-gradient(-45deg,  rgba(173,100,101,1) 0%, rgba(107,0,73,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(173,100,101,1) 0%,rgba(107,0,73,1) 100%);
    background: linear-gradient(135deg,  rgba(173,100,101,1) 0%,rgba(107,0,73,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad6465', endColorstr='#6b0049',GradientType=1 );
}

#lesson_pause_label .item.will_start{
    background: rgb(155,104,3);
    background: -moz-linear-gradient(-45deg, rgba(155,104,3,1) 0%, rgba(151,181,95,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(155,104,3,1) 0%,rgba(151,181,95,1) 100%);
    background: linear-gradient(135deg, rgba(155,104,3,1) 0%,rgba(151,181,95,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9b6803', endColorstr='#97b55f',GradientType=1 );
}
#lesson_countdown_time{
    font-size: 16px;
}

#teachers_lesson_title .name{
    font-size: 32px;
    color: rgba(255,255,255,.9);
}
#teachers_lesson_title .date{
    font-size: 16px;
    color: rgba(255,255,255,.7);
}

#teachers_lesson_title >div{
    background:url(/img/lesson_bg.jpg);
    background-size: cover;
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);

}





#teachers_lesson_title .top{
    background:url(/img/lesson_top.png);
    background-repeat: no-repeat;
    background-position: top;
    position: absolute;
    z-index: 0;
    left: 10px;
    top:10px;
    width: calc(100% - 20px);
    height:calc(100% - 20px);
}
#teachers_lesson_title .bottom{
    background:url(/img/lesson_bottom.png);
    background-repeat: no-repeat;
    background-position: bottom;
    position: absolute;
    z-index: 0;
    left: 10px;
    bottom:10px;
    width: calc(100% - 20px);
    height:calc(100% - 20px);
}

#lesson_main_panel{
    width:100%;
    height:100%;
    background: #444;
}

.max_ratio{
    max-width: 1280px;
    max-height: 720px;
    display: inline-block;
    *display:inline;
    zoom: 1;
}

.settingsCameras{
    position: absolute;
    top:1px;
    left:3px;
    font-size: 24px;
    padding:5px 10px;
    background:#111;
    color:rgba(255,255,255,.8);     
    z-index: 100;
    transition: .1s all ease;
    pointer-events: auto;
    display:none;
}



.settingsCameras:active,.settingsCameras.tstart{
    background:yellowgreen;
}
.settingsCameras:hover{
    background:rgba(255,255,255,.2);
}

.availableCameras{
    display:none;
}

.camera_options{
    width:100%;
    height:100%;
}
.camera_options .option{
    width:100%;
    padding-left:10px;
    padding-right:100px;
    height:40px;
    line-height:40px;
    font-size: 11px;
}
.camera_options .option:hover{
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
}
.camera_options .option button{
    position: absolute;
    height:30px;
    right:5px;
    top:5px;
    width:80px;
}
.camera_options .option.selected{
    background: #CEDEE2;
}

.has_stream .settingsCameras{
    display:block!important;
}

.item .hideCameras{
    position: absolute;
    top:1px;
    right:3px;
    font-size: 24px;
    padding:5px 10px;
    background:#111;
    color:rgba(255,255,255,.8);     
    z-index: 100;
    transition: .1s all ease;
    display: block;
}
.item.in_use .hideCameras{
    pointer-events: auto;
}

.item  .hideCameras:active,.item  .hideCameras.tstart{
    background:yellowgreen;
}

.item  .hideCameras:hover{
    background:rgba(255,255,255,.2);
}

.item .hideCameras .on{
    color:#BEE896;
}
.item .hideCameras .off{
    color:#ddd;
}
.item .hideCameras:hover .on{
    color:#F9FFD3;
}
.item .hideCameras:hover .off{
    color:#F9FFD3;
}

.item .hideCameras:active .on,.item .hideCameras.tstart .on{
    color:#fff;
}
.item .hideCameras:active .off,.item .hideCameras.tstart .off{
    color:yellowgreen;
}
.my_captures:hover .item .hideCameras,.my_captures:hover .item .settingsCameras{
    pointer-events: auto!important;
}


.my_captures:hover .item .hideCameras,.my_captures:hover .item .settingsCameras{
    pointer-events: auto!important;
}

.container_items{

}

#expanded_videos{
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    padding: 5px;
    z-index: 200000;
    width:100%;
    height:100%;
    pointer-events: none;
    background: rgb(211,211,211);
    background: -moz-linear-gradient(-45deg,  rgba(211,211,211,1) 0%, rgba(242,242,242,1) 99%);
    background: -webkit-linear-gradient(-45deg,  rgba(211,211,211,1) 0%,rgba(242,242,242,1) 99%);
    background: linear-gradient(135deg,  rgba(211,211,211,1) 0%,rgba(242,242,242,1) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#f2f2f2',GradientType=1 );

}

#expanded_videos .video_grid{
    padding-left:0px;
    padding-top:90px;
    padding-bottom:60px;
}

#expanded_videos.has_question .video_grid{
    padding-top: 90px;
    padding-bottom: 45px;
    padding-left: 75px;
}

#posed_question_title{
    position: absolute;
    top:50px;
    left:0px;
    height: 35px;
    width: 100%;
    z-index: 1;
    color:#111;
    font-size: 18px;
    font-weight: 600;
}

#expanded_videos .container_items{
    width:auto;
    position: absolute;
    top:0;
    left:50%;
    transform: translate(-50%,0%);
    height:40px;
}
#expanded_videos .container_items .action{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    width:100px;
    height:30px;
    line-height:30px;
}

#expanded_videos.prepared{
    pointer-events: none;
    display: block;
}
#expanded_videos.active{
    pointer-events: auto;
    opacity: 1;
}

#expanded_videos .container{
    width: 100%;
    height:100%;
}

#expanded_videos .closer{
    display: block;
    position: absolute;
    top:5px;
    right:5px;
    width:35px;
    height:35px;
    line-height:35px;
    z-index: 10000;
    text-align: center;
    color:rgba(255,255,255,.8);
    background: #932C2C;
    font-size: 24px;
}

#expanded_videos .closer:hover{
    color:rgba(255,255,255,1);
    opacity: 1;
}
#expanded_videos .closer:active,#expanded_videos .closer.tstart{
    opacity: .8;
}


#expanded_videos > .actions{
    /*display: none;*/
    position: absolute;
    top:5px;
    left:50%;
    transform: translate(-50%,0px);
    padding: 0px 10px;
    height:35px;
    line-height:35px;
    z-index: 10000;
    text-align: center;
    color:rgba(255,255,255,.8);
    background: #2C6393;
    font-size: 11px;
}
#expanded_videos > .actions i{
    text-align: center;
    position: absolute;
    top:0;
    right:0;
    width: 30px;
    font-size: 14px;
    height:35px;
    line-height:35px;
}

#expanded_videos .closer:hover{
    color:rgba(255,255,255,1);
    opacity: 1;
}
#expanded_videos .closer:active,#expanded_videos .closer.tstart{
    opacity: .8;
}


#expanded_videos .container_items .title {
    font-size: 11px;
    color:rgba(255,255,255,.6);
    margin-bottom: 5px;
    margin-top: 5px;
}

#expanded_videos .container_items .action {
    margin: 1px;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    line-height: 20px;
    width: 200px;
    height: 35px;
    opacity: .8;
    transition: .1s opacity ease;
    font-size: 13px;
    color: #fff;
    text-align: left;
    user-select: none;
    background: rgb(42,69,91);
    background: -moz-linear-gradient(left, rgba(42,69,91,1) 0%, rgba(0,102,153,1) 100%);
    background: -webkit-linear-gradient(left, rgba(42,69,91,1) 0%,rgba(0,102,153,1) 100%);
    background: linear-gradient(to right, rgba(42,69,91,1) 0%,rgba(0,102,153,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a455b', endColorstr='#006699',GradientType=1 );
}


#expanded_videos .container_items .action.mute {
    color: rgba(255,255,255,1);
    background: rgb(255,48,25);
    background: -moz-linear-gradient(-45deg, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    background: linear-gradient(135deg, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 );
}

#expanded_videos .container_offlines{
    max-height:calc(100% - 100px);
    width:100%;
    position: absolute;
    z-index: 0;
    bottom:0;
    left:0;
}
#expanded_videos .container_offlines .title {
    font-size: 11px;
    color: rgba(255,255,255,.6);
    margin-bottom: 5px;
    margin-top: 5px;
    text-align: left;
}
#expanded_videos .container_offlines .item{
    text-align: left;
    margin-top: 1px;
    width:100%;
    background: rgb(125,126,125);
    height:30px;
    line-height:30px;
    font-size: 11px;
    color:rgba(255,255,255,.7);
    padding-left: 55px;
    background: -moz-linear-gradient(-45deg,  rgba(125,126,125,1) 0%, rgba(61,61,61,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(125,126,125,1) 0%,rgba(61,61,61,1) 100%);
    background: linear-gradient(135deg,  rgba(125,126,125,1) 0%,rgba(61,61,61,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#3d3d3d',GradientType=1 );
    white-space: normal;
    overflow: hidden;
}
#expanded_videos .container_offlines .item .type{
    position: absolute;
    top:2px;
    left:2px;
    width:45px;
    height:25px;
    line-height:25px;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    opacity: 0.7;
    text-align: center;
}
#expanded_videos .container_offlines .item .type.teacher{
    padding: 0px;
    background: rgb(27,45,84);
    background: -moz-linear-gradient(-45deg,  rgba(27,45,84,1) 1%, rgba(63,76,107,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(27,45,84,1) 1%,rgba(63,76,107,1) 100%);
    background: linear-gradient(135deg,  rgba(27,45,84,1) 1%,rgba(63,76,107,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b2d54', endColorstr='#3f4c6b',GradientType=1 );
}
#expanded_videos .container_offlines .item .type.student{
    padding: 0px;
    font-size: 10px;
    background: rgb(32,73,24);
    background: -moz-linear-gradient(-45deg,  rgba(32,73,24,1) 1%, rgba(60,102,89,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(32,73,24,1) 1%,rgba(60,102,89,1) 100%);
    background: linear-gradient(135deg,  rgba(32,73,24,1) 1%,rgba(60,102,89,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204918', endColorstr='#3c6659',GradientType=1 );

}
.switchable_item.item.solo .inner{
    animation-name: solo_blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes solo_blink {    
    0% {    
        border-color: #FFA84C;    
    }    
    50% {    
        border-color: #fff;    
    }  
    100% {    
        border-color: #FFA84C;
    }      
}   

.switchable_item.item_student.feedback{
    outline:3px solid rgba(206,216,17,1);
    animation-name: feedback_blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.feedback_input{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: rgba(255,255,255,.1);
    z-index: 10000;
    pointer-events: auto;
}
.feedback_input i{
    position: absolute;
    pointer-events: none;
    top:50%;
    left:50%;
    font-size: 18px;
    transform: translate(-50%, -50%);
    text-align: center;
    color:rgba(255,255,255,.8);
    background: rgba(41,154,11,.8);
    border-radius: 30px;
    padding: 5px;
}
.feedback_input:hover{
    background:rgba(41,154,11,.5);
}

@keyframes feedback_blink {    
    0% {    
        outline-color: rgb(41,154,11);
    }    
    50% {    
        outline-color: rgba(206,216,17,1);
    }  
    100% {    
        outline-color: rgb(41,154,11);
    }      
}   


.feedback_item{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background: rgba(255,255,255,.1);
    z-index: 10100;
    pointer-events: none;
    opacity: 0;
    transition: .1s all ease;
    text-align: center;
}

.feedback_item.active{

    opacity: 1;
}

.feedback_item .info{
    position: absolute;
    pointer-events: none;
    top:50%;
    width:100%;
    left:0px;
    transform: translate(0px, -50%);
    text-align: center;
}
.feedback_item i{
    font-size: 24px;
    height:36px;
    line-height:36px;
    text-align: center;
    width:100%;
    color:rgba(206,216,17,.9);
}

.feedback_item .teacher{
    display: inline-block;
    *display:inline;
    zoom: 1;
    padding: 5px;
    font-size: 11px;
    line-height: 12px;
    text-align: center;

    color:rgba(255,255,255,.8);
    background:#006e2e;

}


#expanded_videos .feedback_input i{
    font-size: 32px!important;
}

#expanded_videos .feedback_item i{
    font-size: 32px!important;
}

#expanded_videos .container_items .action.unsolo {
    color:#000;
    background: rgb(255,168,76);
    background: -moz-linear-gradient(-45deg,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    background: linear-gradient(135deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 );
}
#expanded_videos .container_items .action.unsolo i{
    color:#000!important;
}


#expanded_videos .container_items .action >div{
    width: 100%;
    height: 100%;
    padding: 3px 5px;
    padding-left: 25px;
}
#expanded_videos .container_items  .action i {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    font-size: 12px;
    color: goldenrod;
    height: 25px;
    line-height: 25px;
    text-align: center;
}


#expanded_videos .container_items .action:hover{
    opacity: .9;
}
#expanded_videos .container_items .action:active,#expanded_videos .container_items .action.tstart{
    opacity: .6;
}

#expanded_videos .container_videos{
    text-align: left;
    font-size: 0;
    width:100%;
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    /*border-bottom: 1px solid rgba(255,255,255,.3);*/
}


/*#expanded_videos .container_videos,#expanded_videos .container_items{
    text-align: left;
    font-size: 0;
    width:100%;
    overflow: auto;
}*/


#expanded_videos .container_videos .item{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    border-radius: 0px;
    opacity: 0.9;
    text-align: center;
}

#expanded_videos .container_videos .no_items{
    width:100%;
    height:100%;
    background: rgb(221,221,221);
    background: -moz-linear-gradient(-45deg,  rgba(221,221,221,1) 0%, rgba(246,246,246,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(221,221,221,1) 0%,rgba(246,246,246,1) 100%);
    background: linear-gradient(135deg,  rgba(221,221,221,1) 0%,rgba(246,246,246,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#f6f6f6',GradientType=1 );
    border:1px solid #aaa;
}


#expanded_videos .container_videos .no_items >div{
    position: absolute;
    top:50%;
    left:0px;
    width: 100%;
    height:20px;
    line-height:20px;
    text-align: center;
    transform: translate(0px,-50%);
    font-size: 11px;
    coor:#777;
    text-align: center;
}

#expanded_videos .video_grid .item .inner{
    pointer-events:none;
    background: #000;
    transition: all ease .1s;
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    border:1px solid rgba(255,255,255,.2);
}
#expanded_videos .video_grid .item .inner .stream_icon{
    pointer-events: none;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    padding:5px;
    border-radius: 100%;
    background: rgba(255,255,255,.3);
    color:rgba(0,0,0,.5);
    display: block;
    background: rgba(0,0,0,.7);
    color:rgba(255,255,255,.3);
    font-size: 2vh;
    z-index: 2;
}

#expanded_videos .video_grid .item .inner.has_stream .stream_icon{
    display: none;
}


#expanded_videos .video_grid .item .type{
    z-index: 10000;
    position: absolute;
    left:3px;
    bottom:3px;
    padding: 2px 5px;
    color:#fff;
    border-radius: 5px;
    font-size: 11px;
    opacity: 0.7;
    text-align: center;
}
#expanded_videos .video_grid .item .type i{
    font-size: 16px;
    color:#fff;
}
#expanded_videos .video_grid .item .type.teacher{
    background: rgb(27,45,84);
    background: -moz-linear-gradient(-45deg,  rgba(27,45,84,1) 1%, rgba(63,76,107,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(27,45,84,1) 1%,rgba(63,76,107,1) 100%);
    background: linear-gradient(135deg,  rgba(27,45,84,1) 1%,rgba(63,76,107,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b2d54', endColorstr='#3f4c6b',GradientType=1 );
}
#expanded_videos .video_grid .item .type.student{
    background: rgb(32,73,24);
    background: -moz-linear-gradient(-45deg,  rgba(32,73,24,1) 1%, rgba(60,102,89,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(32,73,24,1) 1%,rgba(60,102,89,1) 100%);
    background: linear-gradient(135deg,  rgba(32,73,24,1) 1%,rgba(60,102,89,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204918', endColorstr='#3c6659',GradientType=1 );
}

#expanded_videos .video_grid .item.active:hover  .inner{
    border-color: rgba(255,255,255,.6)!important;
}
#expanded_videos .video_grid .item.in_use.selected  .inner,#expanded_videos .video_grid .item.selected  .inner{
    border: 2px solid #65B200!important;
}

#expanded_videos .video_grid .item video{
    pointer-events: none;
    border-radius: 0px;
}

#expanded_videos .video_grid .item .private_info{
    opacity: .5;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    color:rgba(255,255,255,.7);
    padding:10px;
    text-align: center;
    font-size: 12px;
    line-height: 13px;
    display: none;    
    background: rgb(63,76,107);
    background: -moz-linear-gradient(-45deg,  rgba(63,76,107,1) 0%, rgba(99,99,99,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(63,76,107,1) 0%,rgba(99,99,99,1) 100%);
    background: linear-gradient(135deg,  rgba(63,76,107,1) 0%,rgba(99,99,99,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#636363',GradientType=1 );
}

#expanded_videos .video_grid .item .private_info >div{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#expanded_videos .video_grid .item.private .private_info{
    display: block;
}

#expanded_videos .video_grid .item .status{
    pointer-events: none;
    position: absolute;
    top:0px;
    left:50%;
    font-size: 12px;
    padding: 2px 10px;
    color:rgba(255,255,255,.8);    
    opacity: .8;
    z-index: 10000;
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    transform: translate(-50% , 0px);
}

#expanded_videos .video_grid .item .state{
    user-select:none;
    position: absolute;
    right:0px;
    text-align: center;
    top: 30px;
    bottom: auto!important;
    background: rgba(50,50,50,.7);
    color: rgba(255,255,255,.8);
    transform: translate(0px,0px);
    opacity: 1;
    z-index: 100;
    width: auto!important;
}

#expanded_videos .video_grid .item .state_top{
    user-select:none;
    position: absolute;
    left:0px;
    text-align: center;
    top: 30px;
    bottom: auto!important;
    background: rgba(50,50,50,.7);
    color: rgba(255,255,255,.8);
    transform: translate(0px,0px);
    pointer-events: none;
    z-index: 100;
    width: auto!important;
}

#expanded_videos .video_grid .item .state .action{
    width:auto!important;
    height: auto!important;
    font-size: 14px;
    user-select:none;
    padding: 5px 20px;
}

#expanded_videos .video_grid .item .state .action.enlarge{
    /*display: inline-block!important;*/
}

#expanded_videos .video_grid .item .state_top .action{
    width:auto!important;
}
#expanded_videos .video_grid .item.raised .state_top{
    opacity: 1;
    transform: translate(0px,0px);
    pointer-events: auto;
}

#expanded_videos .video_grid .item.raised .state_top .action{
    height: auto!important;
    font-size: 14px;
    user-select:none;
    padding: 5px 20px;
}

#expanded_videos .video_grid .item.rasied .state_top .action{
    display: block;
}

#expanded_videos .video_grid .item .muted{
    pointer-events: none;
    display: block;
    position: absolute;
    top:2px;
    right:2px;
    padding: 0px;
    color:rgba(255,255,255,.8);
    background: rgb(255,48,25);
    background: -moz-linear-gradient(-45deg,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    background: linear-gradient(135deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 );

    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    opacity: 0;
    transition: .1s all ease;
    z-index: 100000;
}

#expanded_videos .video_grid .item .muted.yes{  
    opacity: 1;
}
#expanded_videos .video_grid .item.not_soloed{
    opacity: 0.5!important;
}
#expanded_videos .video_grid .item .soloed{
    pointer-events: none;
    display: block;
    position: absolute;
    bottom:3vh!important;
    left:50%;
    transform: translate(-50%,0%);
    padding: 5px 10px;
    color:#111;
    border-radius: 3px;
    background: rgb(255,168,76);
    background: -moz-linear-gradient(-45deg,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    background: linear-gradient(135deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 );
    font-size: 1.5vh!important;
    opacity: 0;
    transition: .1s all ease;
    z-index: 100000;
}

#expanded_videos .video_grid .item .soloed.yes{  
    opacity: 1;
}



#expanded_videos .video_grid .item .hand{
    pointer-events: none;
    position: absolute;
    color: #EAD56B;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    transition: all ease .1s;
    top: 50%;
    left: 50%;
    transform: translate(-50% , 10%);
    line-height: 10vh;
    font-size: 10vh;
}
#expanded_videos .video_grid .item.raised .hand{
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 1;
}
#expanded_videos .video_grid .item .icon{
    pointer-events: none;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    /*vertical-align: middle;*/ 
    line-height: 10vh;
    color:rgba(255,255,255,.1);
    font-size: 10vh;
    display: none;
}
#expanded_videos .video_grid .item .name{
    pointer-events: none;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    padding: 3px;
    font-size: 12px;
    color: rgba(255,255,255,.8);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 1%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.0) 1%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.0) 1%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b000000', endColorstr='#a6000000',GradientType=0 );
    border-radius: 10px;
}



@keyframes shakeMe {
    2%, 18% {transform: translate3d(-3px, 0, 0);}
    4%, 16% {transform: translate3d(3px, 0, 0);}
    6%, 10%, 14% {transform: translate3d(-3px, 0, 0);}
    8%, 12% {transform: translate3d(3px, 0, 0);}
    18.1% {transform: translate3d(0px, 0, 0);}
}
#expanded_videos .my_captures{
    width: 100%;
    height: 100%;
    background: #777;
    opacity: 0.9;
    text-align: center;
    background: #000;
    transition: all ease .1s;
    border-radius: 0px;
    /*position: absolute;*/
    z-index: 1000;
}

#expanded_videos .my_captures .item_screen,#expanded_videos .my_captures .item_video{
    margin: 0px!important;
    position: absolute;
    left:0px;
    top:0px;
    transform: translate(-100%, 0px);
    width: 100px;
    height: 100px;
    opacity: 0!important;
    pointer-events:none;
    transition: all ease .1s;
    border-radius: 0px;
    z-index: 1000;
}
#expanded_videos .my_captures .item_screen.in_use,#expanded_videos .my_captures .item_video.in_use{
    transform: translate(0px, 0%);
    opacity: 1!important;
    pointer-events:auto;
    width: 100%;
    height: 100%;
}
.my_captures:hover .item_screen,.my_captures:hover .item_video{
    opacity: 1!important;
    pointer-events:auto;
}
#expanded_videos .my_captures .item_screen .name,#expanded_videos .my_captures .item_video .name{
    font-size: 14px;
}
#expanded_videos .video_grid .item_me.offline,#expanded_videos .video_grid .item_student.offline,#expanded_videos .video_grid .item_teacher.offline{
    display: none;
}


#expanded_videos .video_grid .item_me{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    border-radius: 0px;
    opacity: 0.9;
    text-align: center;
    position: absolute;
    top:0px;
    right:40px;
    width:85px;
    height:85px;
    pointer-events: none;
    z-index: 10;
}
#expanded_videos .video_grid .item_me .settingsCameras,#expanded_videos .video_grid .item_me .hideCameras{
    display: none!important;
}



#div_lesson .reconnecting{
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height: 100%;
    color:rgba(255,255,255,.5);
    z-index: 10000;
    background: rgba(100,100,100,.7);
}
#div_lesson .reconnecting >div{
    padding: 10px 20px;
    background: -moz-linear-gradient(-45deg, rgba(0,99,112,0.71) 0%, rgba(0,99,112,0.71) 1%, rgba(0,60,107,0.74) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(0,99,112,0.71) 0%,rgba(0,99,112,0.71) 1%,rgba(0,60,107,0.74) 100%);
    background: linear-gradient(135deg, rgba(0,99,112,0.71) 0%,rgba(0,99,112,0.71) 1%,rgba(0,60,107,0.74) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5006370', endColorstr='#bd003c6b',GradientType=1 );
}

#div_lesson .reconnecting >div b{
    font-style:italic;
}
#div_lesson .reconnecting >div .button{
    margin-top: 10px;
    background: rgba(0,0,0,.3);
    display: inline-block;
    *display:inline;
    zoom: 1;
    padding: 5px 10px;
}
#div_lesson .reconnecting >div .button:hover{
    background: rgba(0,0,0,.5);
}
#div_lesson .reconnecting >div .button:active,#div_lesson .reconnecting >div .button.tstart{

    background: rgba(0,0,0,.2);
}



.received_feedback_item{
    font-size: 14px;
    line-height: 20px;
    color:#111;
    padding: 20px 30px;
    position: absolute;
    bottom:220px;
    background: rgb(189,209,100);
    background: -moz-linear-gradient(-45deg,  rgba(189,209,100,1) 0%, rgba(153,229,137,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(189,209,100,1) 0%,rgba(153,229,137,1) 100%);
    background: linear-gradient(135deg,  rgba(189,209,100,1) 0%,rgba(153,229,137,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdd164', endColorstr='#99e589',GradientType=1 );
    z-index: 1000;
    border-radius: 10px;
    left:50%;
    transform: translate(-50%,30px);
    pointer-events: none;
    transition: .1s all ease;
    opacity: 0;
    padding-left: 60px;
    padding-right: 120px;
    text-align: left;
}
.received_feedback_item.active{
    transform: translate(-50%,0px);
    opacity: .8;
}

.received_feedback_item i{
    position: absolute;
    top:0;
    left:0;
    height:50px;
    line-height:50px;
    font-size: 32px;
    width:50px;
    text-align: center;
    color:rgba(0,0,0,.3)
}

.received_feedback_item .main{
    width:100%;
    font-weight: 600;
    font-size:18px;
}

.received_feedback_item .cancel{
    position: absolute;
    top:10px;
    right:5px;
    width:90px;
    line-height: 14px;

    padding: 10px 5px;
    pointer-events: auto;
    color:#fff;
    text-align: center;
    background: rgba(0,0,0,.3);
}

.received_feedback_item .cancel:hover{
    background: rgba(0,0,0,.6);
}

.received_feedback_item .cancel:active,.received_feedback_item .cancel.tstart{
    background: rgba(0,0,0,.3);
}

#bottom_panel #raised_my_hands{
    font-size: 14px;
    line-height: 20px;
    color:#111;
    padding: 10px 30px;
    position: absolute;
    bottom:220px;
    background: rgb(255,168,76);
    background: -moz-linear-gradient(-45deg, rgba(255,168,76,1) 0%, rgba(226,180,13,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255,168,76,1) 0%,rgba(226,180,13,1) 100%);
    background: linear-gradient(135deg, rgba(255,168,76,1) 0%,rgba(226,180,13,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#e2b40d',GradientType=1 );
    border-radius: 10px;
    left:50%;
    transform: translate(-50%,30px);
    pointer-events: none;
    transition: .1s all ease;
    opacity: 0;
    padding-left: 60px;
    padding-right: 120px;
    text-align: left;
}

#bottom_panel #raised_my_hands.active{
    transform: translate(-50%,0px);
    opacity: .8;

}
#bottom_panel #raised_my_hands .cancel{
    position: absolute;
    top:10px;
    right:5px;
    width:90px;
    line-height: 14px;

    padding: 5px 5px;
    pointer-events: auto;
    color:#fff;
    text-align: center;
    background: rgba(0,0,0,.3);
}
#bottom_panel #raised_my_hands .cancel:hover{
    background: rgba(0,0,0,.6);
}
#bottom_panel #raised_my_hands .cancel:active,#bottom_panel #raised_my_hands .cancel.tstart{
    background: rgba(0,0,0,.3);
}

#bottom_panel #raised_my_hands .main{
    width:100%;
    font-weight: 600;
    font-size:18px;
}
#bottom_panel #raised_my_hands i{
    position: absolute;
    top:0;
    left:0;
    height:50px;
    line-height:50px;
    font-size: 32px;
    width:50px;
    text-align: center;
}




/*OLD*/


#lesson_teacher_thumbs_panel .title{
    height:20px;
    line-height: 20px;
    text-align: center;
    background: rgb(91,91,91);
    background: -moz-linear-gradient(top,  rgba(91,91,91,1) 0%, rgba(48,48,48,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(91,91,91,1) 0%,rgba(48,48,48,1) 100%);
    background: linear-gradient(to bottom,  rgba(91,91,91,1) 0%,rgba(48,48,48,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#303030',GradientType=0 );
    width:100%;
    text-align: center;
    color:rgba(255,255,255,.8);
    font-size: 11px;
    position: absolute;
    top:0;
    left:0;
}
/*old*/
.context_panel{
    position: absolute;
    width:360px;
    height:300px;
    bottom:320px;
    left:10px;
    top:auto;
    overflow: hidden;
    white-space: nowrap;
    padding: 5px;
    padding-top: 40px;
    z-index: 10;
    border:1px solid #aaa;
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.33);
    box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.33);
    background: rgb(255,255,255);
    background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(211,211,211,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(211,211,211,1) 100%);
    background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(211,211,211,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3d3d3',GradientType=1 );
    opacity: 0;
    pointer-events: none;
    transform: translate(0px,-20px);
    transition: .1s all ease;
    text-align:right;
    padding-bottom: 40px;
}

.context_panel.active{
    opacity:1;
    pointer-events:auto;
    transform: translate(0px,0px);
}
.context_panel .title{
    position: absolute;
    top:5px;
    left:5px;
    line-height:30px;
    height:30px;
    font-size: 12px;
}

#lesson_file_thumbs_panel{
    height:calc(100% - 280px);
    background: rgb(192,201,237);
    background: -moz-linear-gradient(-45deg,  rgba(192,201,237,1) 0%, rgba(192,217,224,1) 99%);
    background: -webkit-linear-gradient(-45deg,  rgba(192,201,237,1) 0%,rgba(192,217,224,1) 99%);
    background: linear-gradient(135deg,  rgba(192,201,237,1) 0%,rgba(192,217,224,1) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0c9ed', endColorstr='#c0d9e0',GradientType=1 );

}

#lesson_file_questions_panel{
    bottom:275px;
    background: rgb(234,199,228);
    background: -moz-linear-gradient(-45deg,  rgba(234,199,228,1) 1%, rgba(218,196,242,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(234,199,228,1) 1%,rgba(218,196,242,1) 100%);
    background: linear-gradient(135deg,  rgba(234,199,228,1) 1%,rgba(218,196,242,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eac7e4', endColorstr='#dac4f2',GradientType=1 );

}

.context_panel .footer_buttons{
    position: absolute;
    bottom:5px;
    right:5px;
    text-align: right;
}

.context_panel .footer_buttons span{
    height:30px;
    font-size: 10.5px;
    line-height: 30px;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    margin-right: 10px;
}
.context_panel .footer_buttons .button{
    height:30px;
    font-size: 10.5px;
    line-height: 30px;
    text-align: center;
    background:rgba(0,0,0,.2);
    user-select:none;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    margin: 0px 2px;
    padding: 0px 10px;
}

.context_panel .footer_buttons .button:hover{
    background:rgba(0,50,150,.3);
}

.context_panel .footer_buttons .button:active,.context_panel .footer_buttons .button.tstart{
    background:rgba(0,50,150,.1);
}

.context_panel .header_buttons{
    position: absolute;
    top:5px;
    right:5px;
}


.context_panel .header_buttons .button{
    height:30px;
    font-size: 10.5px;
    line-height: 30px;
    text-align: center;
    background:rgba(0,0,0,.2);
    user-select:none;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    margin: 0px 2px;
    padding: 0px 10px;
}

.context_panel .header_buttons .button:hover{
    background:rgba(0,50,150,.3);
}

.context_panel .header_buttons .button:active,.context_panel .header_buttons .button.tstart{
    background:rgba(0,50,150,.1);
}


#lesson_file_thumbs_files{
    -webkit-box-shadow: inset 2px 2px 14px -5px rgba(0,0,0,0.59);
    -moz-box-shadow: inset 2px 2px 14px -5px rgba(0,0,0,0.59);
    box-shadow: inset 2px 2px 14px -5px rgba(0,0,0,0.59);
    width:100%;
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(255,255,255,.6);
    border:1px solid rgba(0,0,0,.2);
}
#lesson_file_questions_items{
    -webkit-box-shadow: inset 2px 2px 14px -5px rgba(0,0,0,0.59);
    -moz-box-shadow: inset 2px 2px 14px -5px rgba(0,0,0,0.59);
    box-shadow: inset 2px 2px 14px -5px rgba(0,0,0,0.59);
    width:100%;
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(255,255,255,.6);
    border:1px solid rgba(0,0,0,.2);
}

#lesson_file_thumbs_pages .no_item,.posed_questions .no_item{
    position: absolute;
    top:50%;
    transform: translate(0%,-50%);
    font-size: 11px;
    color:rgba(255,255,255,.8);
    padding: 0px 10px;
    left:0px;
}

.context_panel .row_item{
    width:100%;
    font-size: 11px;
    color:#111;
    background:rgba(255,255,255,.2);
    height: 40px;
    line-height: 30px;
    white-space: nowrap;
    padding: 5px 0px;
    padding-left:35px;
}

.context_panel .row_item:nth-child(odd){
    background:rgba(0,0,0,.05);
}

.context_panel .row_item.inactive{
    pointer-events: none;
}

.context_panel .row_item .loading,.context_panel .row_item .deleting{
    position: absolute;
    background: rgba(0,0,0,.1);
    width:100%;
    height:100%;
    top:0;
    right:0;
    overflow: hidden;
    color:#006699;
    font-weight: 600;
    white-space: normal;
}
.context_panel .row_item .loading i{
    color:#006699;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: middle;
}
.context_panel .row_item .deleting i{    
    color:#006699;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: middle;
    color:maroon;
}
.context_panel .row_item .options{
    position: absolute;
    z-index:1;
    top:0;
    right:0;
    width:70px;
    height:100%;
    padding:5px;
}

.context_panel .row_item .options button{
    width:100%;
    height:100%;
}

.context_panel .row_item .progress{
    width:100px;
    bottom:5px;
    height:5px;
    border:1px solid #aaa;
    left:40px;
    position: absolute;
}
.context_panel .row_item .progress .bar{
    width:0px;
    height:100%;
    background: #aaa;
}

.context_panel .row_item .name{
    font-size: 11px;
    text-align: left;
    overflow: hidden;
    pointer-events: none;
}
.context_panel .row_item .icon{
    position: absolute;
    left:5px;
    width:25px;
    margin: 5px auto;
    height:20px;
    line-height:20px;
    color:rgba(255,255,255,.8);
    font-size: 14px;
    pointer-events: none;
    border-radius: 3px;
    text-align: center;
}
.context_panel .row_item .icon.pdf{
    background: rgb(169,3,41);
    background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
}

.context_panel .row_item:hover{
    background:rgba(0,0,0,.1);
}

.context_panel .row_item:active,.context_panel .row_item.tstart,.context_panel .row_item.active{
    background:rgba(0,50,155,.7);
    color:#fff;
}

.feedback_options{
    position: absolute;
    z-index: 20;
    width:calc(100% - 20px);
    height:40px;
    bottom:280px;
    left:10px;
    top:auto;
    overflow: visible;
    white-space: nowrap;
    padding: 0px;
    padding-left: 80px;
    padding-right: 80px;
    background: rgb(41,154,11);
    background: -moz-linear-gradient(-45deg,  rgba(41,154,11,1) 0%, rgba(206,216,17,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(41,154,11,1) 0%,rgba(206,216,17,1) 100%);
    background: linear-gradient(135deg,  rgba(41,154,11,1) 0%,rgba(206,216,17,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299a0b', endColorstr='#ced811',GradientType=1 );
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    opacity: 0;
    pointer-events: none;
    transform: translate(0px,-30px);
    transition: .1s all ease;
}

.feedback_options.expanded{
    z-index: 300000;
    bottom:45px;
    width:calc(100% - 10px);
    left:5px;
}

.feedback_options.active{
    opacity: 1;
    pointer-events: auto;
    transform: translate(0px,0px);
}
.feedback_options .option{
    width:50px;
    height:36px;
    line-height:36px;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    margin: 2px;
    background: rgba(0,0,0,.2);
    color: rgba(255,255,255,.8);
    font-size: 18px;
    opacity: 0.8;
    border:1px solid rgba(0,0,0,.2);
}
.feedback_options .option:hover{
    opacity: 1;
}
.feedback_options .option.active,.feedback_options .option:active,.feedback_options .option.tstart{
    opacity: 1;
    background: rgb(153,44,153);
    background: -moz-linear-gradient(-45deg, rgba(153,44,153,1) 2%, rgba(140,40,105,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(153,44,153,1) 2%,rgba(140,40,105,1) 100%);
    background: linear-gradient(135deg, rgba(153,44,153,1) 2%,rgba(140,40,105,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#992c99', endColorstr='#8c2869',GradientType=1 );
    color:rgba(206,216,17,1);
}

.feedback_options .option i{
    pointer-events: none;
}
.feedback_options .option.closer{
    font-size: 12px;
    width:80px;
    background:maroon;
}


.feedback_options .select{
    position: absolute;
    width:100%;
    max-height: 300px;
    bottom:40px;
    left: 0px;
    white-space: normal;
    background: rgba(0,0,0,.8);
}

.feedback_options .select .opt{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    margin: 1px;
    width:36px;
    height:32px;
    line-height:32px;
    font-size: 22px;
    background: #fff;
    color:#BC9710;
}

.feedback_options .select .opt:hover{
    background: rgba(255,255,255,.4);
}

.feedback_options .select .opt:active,.feedback_options .select .opt.tstart{
    background: rgba(255,255,255,.2);
}
.feedback_options .select .opt.active{
    background: #7F0052;
    color:#fff;
}

.feedback_options .opt i{
    pointer-events: none;
}


#lesson_page_thumbs_panel{
    position: absolute;
    z-index: 10;
    width:calc(100% - 20px);
    height:40px;
    bottom:280px;
    left:10px;
    top:auto;
    overflow: hidden;
    white-space: nowrap;
    padding: 0px;
    padding-left: 80px;
    padding-right: 80px;
    background: rgb(57,109,214);
    background: -moz-linear-gradient(-45deg,  rgba(57,109,214,1) 1%, rgba(34,177,216,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(57,109,214,1) 1%,rgba(34,177,216,1) 100%);
    background: linear-gradient(135deg,  rgba(57,109,214,1) 1%,rgba(34,177,216,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396dd6', endColorstr='#22b1d8',GradientType=1 );
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
}

#lesson_page_thumbs_panel.teachers_only{
    bottom: 225px;
}
#lesson_page_thumbs_panel .add_image,#lesson_page_thumbs_panel .add_paper,.posed_questions .action{
    position: absolute;
    top:0;
    right:0px;
    line-height:40px;
    height:40px;
    width:40px;
    font-size: 14px;
    background:rgba(0,0,0,.3);

    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    text-align: center;
    color:rgba(255,255,255,.8);
    user-select:none;
}
#lesson_page_thumbs_panel .add_paper{
    background:rgba(0,0,0,.6);
    right:40px;
}

#lesson_page_thumbs_panel .add_image:hover,#lesson_page_thumbs_panel .add_paper:hover,.posed_questions .action:hover{
    background: rgba(0,50,150,.7);
}

#lesson_page_thumbs_panel .add_image:active,#lesson_page_thumbs_panel .add_image.tstart,
#lesson_page_thumbs_panel .add_paper:active,#lesson_page_thumbs_panel .add_paper.tstart,
.posed_questions .action:active,.posed_questions .action.tstart{
    background: rgba(0,150,50,.5);
}

#lesson_page_thumbs_panel .title{
    position: absolute;
    top:0;
    left:0px;
    line-height:40px;
    height:40px;
    width:80px;
    font-size: 10px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.17) 0%, rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.17) 0%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.17) 0%,rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b000000', endColorstr='#80000000',GradientType=0 );
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    text-align: center;
    color:rgba(255,255,255,.8);
    user-select:none;
}

#lesson_page_thumbs_panel .title:hover{
    background: rgba(0,50,150,.7);
}

#lesson_page_thumbs_panel .title:active,#lesson_page_thumbs_panel .title.tstart{
    background: rgba(0,150,50,.5);
}

#lesson_file_thumbs_pages{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    width:100%;
    height:100%;
    text-align: left;
    padding: 1px;
    overflow: auto;
}

#lesson_file_thumbs_pages .loader{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    line-height: 40px;
    font-size: 20px;
    z-index: 250;
    text-align: center;
    font-size: 12px;
    color:rgba(255,255,255,.8);
    background: rgba(0,0,0,.8);
}

#lesson_page_thumbs_panel .sketch_thumb_container{
    height: 100%;
}
#lesson_page_thumbs_panel .sketch_thumb_container canvas{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

#lesson_page_thumbs_panel .sketch_pdf_thumb{
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    height:100%;
    width:50px;
    margin: 0px;
    margin-right: 5px;
    text-align: center;
    border:1px solid rgba(255,255,255,.3);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.4+0,0.1+100;White+to+Transparent */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#1affffff',GradientType=0 ); /* IE6-9 */
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    /*transition: ease .s all;*/
    transform: translate(-30px,0px);
    user-select:none;
    transition: .1s all ease;
}

#lesson_page_thumbs_panel .sketch_pdf_thumb.uploading{
    pointer-events: none!important;
    text-align: center;
    padding: 5px 0px;
    line-height: 12px;
    color:rgba(255,255,255,.8);
    font-size: 10px;
}

#lesson_page_thumbs_panel.animated  .sketch_pdf_thumb{
    opacity: .7;
    transform: translate(0px,0px);
}

#lesson_page_thumbs_panel .sketch_thumb_container{
    height:100%;
}
#lesson_page_thumbs_panel .sketch_pdf_thumb:hover{
    opacity: 1;
}

#lesson_page_thumbs_panel .sketch_pdf_thumb.active{
    outline: 3px solid red;
    opacity: 1;
    background: red;
}

#lesson_page_thumbs_panel .sketch_pdf_label{
    color: rgba(255,255,255,.9);
    font-size: 9px;
    text-align: center;
    position: absolute;
    bottom:0px;
    left:50%;
    padding:1px 5px;
    transform: translate(-50%,0%);
    z-index: 10000;
    background: #111;
    user-select:none;
    height:18px;
    line-height:18px;
}



.sketch_page_buttons{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:600px;
}

.sketch_page_buttons .button{
    margin: 5px;
    width:190px;
    height:190px;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    border:1px solid #ddd;
    opacity: 0.7;    
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    background: #fff;
} 
.sketch_page_buttons .button:hover{
    opacity: 1;
}
.sketch_page_buttons .button:active,.sketch_page_buttons .button.tstart{
    opacity: 0.7;
}

.sketch_page_buttons .button div{
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    padding: 5px;
    background: rgba(255,255,255,.8);
    color: #111;
    text-align: center;
    font-size: 16px;
} 
.sketch_page_buttons .button.plain_light{
    background: #eee;
}
.sketch_page_buttons .button.plain_dark{
    background: #111;
}
.sketch_page_buttons .button.squared_light{
    background-color: white;
    background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .10) 25%, rgba(0, 0, 0, .10) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .10) 75%, rgba(0, 0, 0, .10) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .10) 25%, rgba(0, 0, 0, .10) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .10) 75%, rgba(0, 0, 0, .10) 76%, transparent 77%, transparent);
    background-size:50px 50px;
}
.sketch_page_buttons .button.squared_dark{
    background-color: #444;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
    background-size:50px 50px;
}
.sketch_page_buttons .button.lined_light{
    background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-size: 1px, 1px, auto, auto 20px;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}
.sketch_page_buttons .button.lined_dark{
    background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, black 0px, black 69px, rgba(0,0,0,0) 70px), -webkit-repeating-linear-gradient(black 0px, black 18px, rgba(255,255,255,.8)19px, black 20px);
    background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, black 0px, black 69px, rgba(0,0,0,0) 70px), -moz-repeating-linear-gradient(black 0px, black 18px, rgba(255,255,255,.8)19px, black 20px);
    background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, black 0px, black 69px, rgba(0,0,0,0) 70px), -ms-repeating-linear-gradient(black 0px, black 18px, rgba(255,255,255,.8)19px, black 20px);
    background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, black 0px, black 69px, rgba(0,0,0,0) 70px), -o-repeating-linear-gradient(black 0px, black 18px, rgba(255,255,255,.8)19px, black 20px);
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, black 0px, black 69px, rgba(0,0,0,0) 70px), repeating-linear-gradient(black 0px, black 18px, rgba(255,255,255,.8)19px, black 20px);
    background-size: 1px, 1px, auto, auto 20px;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}

/*new*/


.thumb_dot{
    position: absolute;
    padding-left: 17px;
    opacity:0;
    pointer-events: none;
    transform: translate(-7.5px , -7.5px);
    white-space: nowrap;
    /*transition: opacity  .1s ease;*/
}
.thumb_dot.active{
    opacity: .6;
}
.thumb_dot .dot{
    position: absolute;
    width:15px;
    height:15px;
    background: #000;
    border-radius: 15px;
    border:5px solid yellow;
    top:0px;
    left:0;
}
.thumb_dot .dot_name{
    height:15px;
    line-height:15px;
    padding: 0px 5px;
    color:#fff;
    font-size: 11px;
    background: rgb(169,3,41);
    background: -moz-linear-gradient(-45deg, rgba(169,3,41,1) 0%, rgba(109,0,25,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(169,3,41,1) 0%,rgba(109,0,25,1) 100%);
    background: linear-gradient(135deg, rgba(169,3,41,1) 0%,rgba(109,0,25,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
}



#teachers_options{
    position: absolute;
    top: 3px;
    right:3px;
    width:100%;
    text-align: right;
    /*padding:5px;*/
    z-index: 3;
    white-space: nowrap;
}
#teachers_options .button{
    width:80px;
    height:35px;
    line-height:12px;
    padding-right: 5px;
    margin-left: 5px;
    font-size: 11px;
    padding-top: 5px;
    padding-left: 30px;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    z-index: 10;
    opacity: .9;
    color:rgba(255,255,255,.7);
    user-select:none;
    white-space: normal;
    text-align:left;
}
#teachers_options .button:hover{
    color:rgba(255,255,255,1);
    opacity: 1;
}
#teachers_options .button:active,#teachers_options .button.tstart{
    color:yellow;
}
#teachers_options .button i{
    position: absolute;
    top: 0px;
    left:0;
    width:25px;
    height:35px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    user-select:none;
}
#teachers_options .class_title{
    font-size: 18px;
    color:rgba(255,255,255,.9);
    text-shadow: 1px 1px 1px #000;
    width: 100%;
    position: absolute;
    top:35px;
    left:0px;
    z-index: 0;
    height:35px;
    line-height: 35px;
    text-align: center;
}

.sketch_show_tools{
    display:none;
}
.sketch_show_tools_clear{
    display:none;
}
#bottom_select_menu{
    display: none;
}


#expanded_videos .ex_1{width:100%;height:100%}
#expanded_videos .ex_2{width:50%;height:100%}
#expanded_videos .ex_3{width:33.33%;height:100%}
#expanded_videos .ex_4{width:50%;height:50%}
#expanded_videos .ex_6{width:50%;height:33.33%}
#expanded_videos .ex_8{width:50%;height:25%}
#expanded_videos .ex_9{width:33.33%;height:33.33%}
#expanded_videos .ex_12{width:33.33%;height:25%}
#expanded_videos .ex_15{width:33.33%;height:20%}
#expanded_videos .ex_16{width:25%;height:25%}
#expanded_videos .ex_20{width:25%;height:20%}
#expanded_videos .ex_25{width:20%;height:20%}
#expanded_videos .ex_36{width:16%;height:16.66%}

#expanded_videos .ex_1 .action.enlarge{
    display:none!important;
}
.hw_class{
    color: rgba(255,255,255,.8);
    color:#777;
    font-size: 11px;
    width:60px;
    height:40px;
    text-align: center;
    border:1px solid #aaa;
    display: inline-block;
    *display:inline;
    zoom: 1;
    vertical-align: top;
    user-select: none;
    margin: 5px;
    background: rgba(255,255,255,.9);
}
.hw_class:hover{
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
    box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
}
.hw_class.active{
    color:#fff;
    background: rgba(255,255,255,.8);
    background: rgb(64,150,238);
    background: -moz-linear-gradient(-45deg, rgba(64,150,238,1) 0%, rgba(48,178,100,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(64,150,238,1) 0%,rgba(48,178,100,1) 100%);
    background: linear-gradient(135deg, rgba(64,150,238,1) 0%,rgba(48,178,100,1) 100%);
}


.hw_file{
    width:100%;
    padding-left:30px;
    padding-right:80px;
    height:25px;
    line-height:25px;
    color:#006699;
}
.hw_file i{
    position: absolute;
    top:0;
    left:0;
    height:25px;
    line-height:25px;
    width:25px;
    text-align: center;
    color:#999;
    font-size: 12px;
}

.content_padding.answer_question{
    width:30%!important;
    left:15%!important;
    transform:translate(-50%,0px)!important;
    padding-right: 5px!important;
}


.options_overlay {
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    background: rgba(0,0,0,.6);
    z-index: 1000000;

}
.options_overlay  .option_items{
    position: absolute;
    top:0px;
    left:50%;
    z-index: 3000000;
    width:200px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,0px);
    transition: .1s all ease;
    padding:5px;
    background: rgba(255,255,255,.8);
    transition:.1s all ease;
}

.options_overlay  .option_items.active{
    transform: translate(-50%,45px);
    opacity: 1;
    pointer-events: auto;
}

.options_overlay  .option_items .action{
    width:100%;
    height:30px;
    line-height:30px;
    font-size: 11px;
    color:#111;
}

.options_overlay  .option_items .action >div{
    padding-left: 40px;
    width:100%;
    height:30px;
    line-height:30px;
    text-align: left;
    opacity: 0.8;
}
.options_overlay  .option_items .action >div:hover{
    background: rgba(0,0,0,.2);
    opacity: 1;
}
.options_overlay  .option_items .action i{
    position: absolute;
    top:0;
    left:0;
    width:40px;
    text-align: center;
    height:30px;
    line-height:30px;
    font-size: 12px;
}

#student_raised_hands{
    z-index: 100;
    font-size: 12px;
    line-height: 20px;
    color:#111;
    padding: 5px;
    position: absolute;
    background: rgb(255,168,76);
    background: -moz-linear-gradient(-45deg, rgba(255,168,76,1) 0%, rgba(226,180,13,1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255,168,76,1) 0%,rgba(226,180,13,1) 100%);
    background: linear-gradient(135deg, rgba(255,168,76,1) 0%,rgba(226,180,13,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#e2b40d',GradientType=1 );
    border-radius: 5px;
    right:5px;
    top:50px;
    transform: translate(-100%,0px);
    pointer-events: none;
    transition: .1s all ease;
    opacity: 0;
    padding-left: 35px;
    padding-right: 75px;
    text-align: left;
    width: 220px;
    height: 40px;
}

#student_raised_hands.active{
    transform: translate(0%,0px);
    opacity: .9;
    pointer-events: auto;

}
#student_raised_hands .cancel{
    position: absolute;
    top:5px;
    right:5px;
    width:65px;
    height:30px;
    font-size: 11px;
    line-height: 30px;
    white-space: nowrap;
    pointer-events: auto;
    color:#fff;
    text-align: center;
    background: rgba(0,0,0,.3);
}
#student_raised_hands .cancel:hover{
    background: rgba(0,0,0,.6);
}
#student_raised_hands .cancel:active,#student_raised_hands .cancel.tstart{
    background: rgba(0,0,0,.3);
}

#student_raised_hands .text{
    width:100%;
    font-weight: 600;
    font-size:12px;
    line-height: 13px;
}
#student_raised_hands i{
    position: absolute;
    top:0;
    left:0;
    height:30px;
    line-height:30px;
    font-size: 18px;
    width:30px;
    text-align: center;
}

.capture_photo .item{
    width:100%!important;
    height:100%!important;
}

.capture_photo canvas{
    max-width: 100%;
    max-height: 100%;
    left:50%;
    top:50%;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7) translate(-50%,-50%);
    z-index: 100;
    background:#111;
    transition: .1s all ease;
}
.capture_photo canvas.active{
    transform: translate(-50%,-50%);
    opacity: 1;
    pointer-events: auto;
}


.capture_buttons{
    width:100%;
    padding: 10px;
    max-width: 300px;
    margin: auto;
}

.capture_buttons .button{
    width:100%;
    height:40px;
    line-height:40px;
    text-align: center;
    color:#fff;
    opacity: 0.7;
    font-size: 18px;
    margin: 10px 0px;
}


.capture_buttons .button:hover{
    opacity: 1;
}
#account_panel .menu .logged_in_as{
    display: none;
}


.single_overlay{
    position: absolute;
    top:0;
    left:0;
    z-index: 300000000;
    width:100%;
    height:100%;
    background: rgba(255,255,255,.8);
}

.single_overlay .item{
    vertical-align: top;
    border-radius: 0px;
    opacity: 0.9;
    text-align: center;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.single_overlay .item .inner{
    background: #000;
    transition: all ease .1s;
    -webkit-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    -moz-box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    box-shadow: 0px -5px 9px 0px rgba(0,0,0,0.26);
    border:1px solid rgba(255,255,255,.2);
}
.single_overlay .item .inner .stream_icon{
    pointer-events: none;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    padding:5px;
    border-radius: 100%;
    background: rgba(255,255,255,.3);
    color:rgba(0,0,0,.5);
    display: block;
    background: rgba(0,0,0,.7);
    color:rgba(255,255,255,.3);
    font-size: 2vh;
    z-index: 2;
}

.single_overlay .item .inner.has_stream .stream_icon{
    display: none;
}


.single_overlay .item .type{
    z-index: 10000;
    position: absolute;
    left:3px;
    bottom:3px;
    padding: 2px 5px;
    color:#fff;
    border-radius: 5px;
    font-size: 11px;
    opacity: 0.7;
    text-align: center;
}
.single_overlay .item .type i{
    font-size: 16px;
    color:#fff;
}
.single_overlay .item .type.teacher{
    background: rgb(27,45,84);
    background: -moz-linear-gradient(-45deg,  rgba(27,45,84,1) 1%, rgba(63,76,107,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(27,45,84,1) 1%,rgba(63,76,107,1) 100%);
    background: linear-gradient(135deg,  rgba(27,45,84,1) 1%,rgba(63,76,107,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b2d54', endColorstr='#3f4c6b',GradientType=1 );
}
.single_overlay .item .type.student{
    background: rgb(32,73,24);
    background: -moz-linear-gradient(-45deg,  rgba(32,73,24,1) 1%, rgba(60,102,89,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(32,73,24,1) 1%,rgba(60,102,89,1) 100%);
    background: linear-gradient(135deg,  rgba(32,73,24,1) 1%,rgba(60,102,89,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#204918', endColorstr='#3c6659',GradientType=1 );

}

.single_overlay .item.active:hover  .inner{
    border-color: rgba(255,255,255,.6)!important;
}
.single_overlay .item.in_use.selected  .inner,.single_overlay .item.selected  .inner{
    border: 2px solid #65B200!important;
}

.single_overlay .item video{
    pointer-events: none;
    border-radius: 0px;
}

.single_overlay .item .private_info{
    opacity: .5;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    color:rgba(255,255,255,.7);
    padding:10px;
    text-align: center;
    font-size: 12px;
    line-height: 13px;
    display: none;    
    background: rgb(63,76,107);
    background: -moz-linear-gradient(-45deg,  rgba(63,76,107,1) 0%, rgba(99,99,99,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(63,76,107,1) 0%,rgba(99,99,99,1) 100%);
    background: linear-gradient(135deg,  rgba(63,76,107,1) 0%,rgba(99,99,99,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#636363',GradientType=1 );
}

.single_overlay .item .private_info >div{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.single_overlay .item.private .private_info{
    display: block;
}

.single_overlay .item .status{
    pointer-events: none;
    position: absolute;
    top:0px;
    left:50%;
    font-size: 12px;
    padding: 2px 10px;
    color:rgba(255,255,255,.8);    
    opacity: .8;
    z-index: 10000;
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    transform: translate(-50% , 0px);
}

.single_overlay .item .state{
    user-select:none;
    position: absolute;
    right:0px;
    text-align: center;
    top: 30px!important;
    bottom: auto!important;
    background: rgba(50,50,50,.7);
    color: rgba(255,255,255,.8);
    z-index: 100;
    opacity: .8;
    width: auto!important;
    opacity: 1;
    transform: translate(0px,0px);
    pointer-events: auto;
}

.single_overlay .item .state_top{
    user-select:none;
    position: absolute;
    left:0px;
    text-align: center;
    top: 30px!important;
    bottom: auto!important;
    background: rgba(50,50,50,.7);
    color: rgba(255,255,255,.8);
    transform: translate(0px,0px);
    z-index: 100;
    width: auto!important;
}

.single_overlay .item .state .action{
    width:auto!important;
    height: auto!important;
    font-size: 14px;
    user-select:none;
    padding: 5px 20px;
}


.single_overlay .item .state_top .action{
    width:auto!important;
}
.single_overlay .item.raised .state_top{
    opacity: 1;
    transform: translate(0px,0px);
    pointer-events: auto;
}

.single_overlay .item.raised .state_top .action{
    height: auto!important;
    font-size: 14px;
    user-select:none;
    padding: 5px 20px;
}

.single_overlay .item.rasied .state_top .action{
    display: block;
}

.single_overlay .item .muted{
    pointer-events: none;
    display: block;
    position: absolute;
    top:2px;
    right:2px;
    padding: 0px;
    color:rgba(255,255,255,.8);
    background: rgb(255,48,25);
    background: -moz-linear-gradient(-45deg,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    background: linear-gradient(135deg,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 );
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    opacity: 0;
    transition: .1s all ease;
    z-index: 100000;
}

.single_overlay .item .muted.yes{  
    opacity: 1;
}
.single_overlay .item.not_soloed{
    opacity: 0.5!important;
}
.single_overlay .item .soloed{
    pointer-events: none;
    display: block;
    position: absolute;
    bottom:3vh!important;
    left:50%;
    transform: translate(-50%,0%);
    padding: 5px 10px;
    color:#111;
    border-radius: 3px;
    background: rgb(255,168,76);
    background: -moz-linear-gradient(-45deg,  rgba(255,168,76,1) 0%, rgba(255,123,13,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    background: linear-gradient(135deg,  rgba(255,168,76,1) 0%,rgba(255,123,13,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 );
    font-size: 1.5vh!important;
    opacity: 0;
    transition: .1s all ease;
    z-index: 100000;
}

.single_overlay .item .soloed.yes{  
    opacity: 1;
}



.single_overlay .item .hand{
    pointer-events: none;
    position: absolute;
    color: #EAD56B;
    opacity: 0;
    z-index: 100;
    pointer-events: none;
    transition: all ease .1s;
    top: 50%;
    left: 50%;
    transform: translate(-50% , 10%);
    line-height: 10vh;
    font-size: 10vh;
}
.single_overlay .item.raised .hand{
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 1;
}
.single_overlay .item .icon{
    pointer-events: none;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50% , -50%);
    /*vertical-align: middle;*/ 
    line-height: 10vh;
    color:rgba(255,255,255,.1);
    font-size: 10vh;
    display: none;
}
.single_overlay .item .name{
    pointer-events: none;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    padding: 3px;
    font-size: 1.2vw;
    color: rgba(255,255,255,.8);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 1%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.0) 1%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.0) 1%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b000000', endColorstr='#a6000000',GradientType=0 );
    border-radius: 10px;
}

.single_overlay .closer{
    display: block;
    position: absolute;
    top:5px;
    right:5px;
    width:35px;
    height:35px;
    line-height:35px;
    z-index: 10000;
    text-align: center;
    color:rgba(255,255,255,.8);
    background: #932C2C;
    font-size: 24px;
}

.single_overlay .closer:hover{
    color:rgba(255,255,255,1);
    opacity: 1;
}

.single_overlay .closer:active,.single_overlay .closer.tstart{
    opacity: .8;
}


@media only screen and (max-width: 640px) {

    #teachers_video_name{
        font-size: 12px;
    }

    #div_school{
        height:30px;
        line-height:30px;
        font-size: 14px;
        color:#fff;
        background: rgb(42,69,91);
        background: -moz-linear-gradient(left,  rgba(42,69,91,1) 0%, rgba(0,102,153,1) 100%);
        background: -webkit-linear-gradient(left,  rgba(42,69,91,1) 0%,rgba(0,102,153,1) 100%);
        background: linear-gradient(to right,  rgba(42,69,91,1) 0%,rgba(0,102,153,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a455b', endColorstr='#006699',GradientType=1 );

    }
    #div_logo{
        position: absolute;
        top:10px;
        left:0;
        width:100%;
        height:80px;
    }
    #div_classes{
        text-align: left;
        padding-top: 150px;
        padding-bottom: 30px;
    }
    #div_classes .item{
        width:calc(50% - 4px);
        margin: 2px;
    }

    #div_classes .title{
        font-family: 'Ubuntu', sans-serif;
        font-size: 14px;
        margin-bottom: 10px;
    }
    #account_panel{
        padding-top: 10px;
        /*width:180px;*/
        height:40px;
        padding-left: 40px;
    }
    #account_panel .name,#account_panel .type,#account_panel .acc_icon,#account_panel .menu{
        white-space: nowrap;
        display: none;
    }
    #account_panel .acc_icon{
        display:none;
    }
    #account_panel:hover{
        background: #069;
    }
    #account_panel .connecting{
        width:15px;
        height:15px;
        line-height:15px;
        text-align: center;
        font-size: 10px;
        right:-2px;
        top:-2px;
        padding: 0px;
        transform: none;
    }
    #account_panel .connecting.connected{
        transform: none;
        width:15px;
    }
    #account_panel .connecting i{
        width:15px;
        height:15px;
        line-height:15px;
        font-size: 10px;
    }

    #account_panel .mnu_icon{
        display: block;
    }

    #account_panel .menu{
        display: none;
        width:200px;
        top:45px;
    }

    #account_panel.active .menu{
        display: block;
    }

    #account_panel .menu .signout{
        width:100%;
        height:40px;
        line-height:40px;
    }
    #account_panel .menu .logged_in_as{
        color: rgba(255,255,255,.8);
        background: rgba(0,0,0,.8);
        display: inline-block;
    *display:inline;
    zoom: 1;
        vertical-align: top;
        margin-right: 10px;
        text-decoration: none;
        line-height: 25px;
        transition: all ease .1s;
        width:100%;
        height:auto;
        font-size:12px;
        line-height:14px;
        padding: 7px;
    }

    #teachers_file.active{
        padding-left: 5px;
    }

    .sketch_show_tools{
        display: none;
        font-size: 11px;
        color:rgba(255,255,255,.9);
        background:rgba(0,0,0,.6);        
        text-shadow: 1px 1px 1px #000;
        width: 80px;
        position: absolute;
        top:45px;
        left:0px;
        z-index: 1000000;
        height:35px;
        line-height: 35px;
        text-align: center;
        padding: 0px 0px;
    }
    #sketch_show_tools_clear{
        top:82px;
    }
    .sketch_show_tools.answer_question{
        display: block;
    }

    #sketch_controls{
        top:0px;

        transform: translate(-10%,0%);
        padding: 5px;
        background: rgba(0,0,0,.6);
        -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        width:85px;
    }

    #sketch_container{
        padding-right: 5px;
        padding-left: 5px;
        padding-top:120px;
        padding-bottom: 335px;
        left:0px!important;
        opacity: 0;
        pointer-events: none;
        transform: translate(-100%,0px);
    }
    #sketch_container.showing{
        opacity: 1;
        pointer-events: auto;
        transform: translate(0%,0px);
    }

    #sketch_container.answer_question{
        opacity: 1!important;
        pointer-events: auto!important;
        left:0%!important;
    }

    /*    .content_padding answer_question{
    
        }*/


    #pose_answer{
        left: 0%!important;
        width: 100%!important;
        padding-top: 200px!important;
    }
    .posed_questions{
        width: calc(100% - 10px);
        margin-left: 5px;
        bottom:210px;
    }
    .content_padding{
        padding-right: 5px;
        padding-left: 5px;
        padding-top:65px;
        padding-bottom: 300px;
    }
    .content_padding.teachers_only{
        padding-bottom: 225px;
    }
    #teachers_options{
        height:80px;
    }
    #teachers_options{
        height:60px;
        white-space: nowrap;
    }
    #teachers_options .class_title{
        font-size: 16px;
        top:30px;
    }

    #teachers_options .button{
        width:50px;
        padding:5px;
        line-height: 12px;
        padding-right: 5px;
        white-space: normal;
        font-size: 10px;
        line-height: 10px;
        height:30px;
        text-align: center;
        margin-left: 1px;
    }

    #teachers_options .button i{
        display: none;
        width:25px;
        font-size: 12px;
        height:30px;
        line-height:30px;
    }

    #bottom_panel{
        height:150px;
        bottom:35px;
    }
    #bottom_panel.teachers_only{
        bottom:0px;
    }
    #lesson_page_thumbs_panel.teachers_only{
        bottom:180px;
    }
    #my_thumbs_panel{
        width:150px;
        height:150px;
    }

    .context_panel{
        bottom:295px;
        width:310px;
        left:5px;
        background: rgb(239,239,239);
        background: -moz-linear-gradient(left,  rgba(239,239,239,1) 0%, rgba(201,201,201,1) 100%);
        background: -webkit-linear-gradient(left,  rgba(239,239,239,1) 0%,rgba(201,201,201,1) 100%);
        background: linear-gradient(to right,  rgba(239,239,239,1) 0%,rgba(201,201,201,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#c9c9c9',GradientType=1 );

    }


    .feedback_options{
        bottom:255px;
        width:calc(100% - 10px);
        left: 5px;  
    }
    #lesson_page_thumbs_panel{
        bottom:255px;
        width:calc(100% - 10px);
        left: 5px;
    }

    #teacher_thumbs_panel{
        width: 100%;
        padding-left: 145px;
    }

    #teacher_thumbs_panel .item,#student_thumbs_panel .item{
        height:70px;
        width:70px;
        margin-right: 40px;
        margin-top: 2px;
        margin-left: 2px;
        margin-bottom: 2px;
    }
    #teacher_thumbs_panel .item .state,#student_thumbs_panel .item .state{
        top:0;
        right:0;
        transform: translate(100%,0px);
        width:35px;
    }
    #teacher_thumbs_panel .item .state .action,#student_thumbs_panel .item .state .action {
        width:100%;
        height:25px;
        margin-bottom: 2px;
    }
    #my_thumbs_panel,#teacher_thumbs_panel,#student_thumbs_panel{
        display: none;
    }
    #my_thumbs_panel.active,#teacher_thumbs_panel.active,#student_thumbs_panel.active{
        display: block;
    }

    #action_thumbs_panel{
        bottom:170px;
        width:100%;
        height:45px;
        padding: 0px;
        font-size: 0px;
    }
    #action_thumbs_panel .contents{
        padding:0px!important;
    }
    #action_thumbs_panel .title{
        display: none!important;
    }
    #action_thumbs_panel .action{
        display: inline-block;
    *display:inline;
    zoom: 1;
        vertical-align: top;
        height:35px;
        line-height:35px;
        padding-left:5px;
        width:calc(25% - 6px);
        margin: 5px 3px;
        text-align: center;
        white-space: nowrap;
    }
    #action_thumbs_panel .action i{
        display: none;
        width:25px;
        height:35px;
        line-height:35px;
    }
    #student_thumbs_panel{
        width:100%;
        padding-left: 0px;
    }

    #bottom_select_menu{

        -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        user-select:none;
        z-index: 10;
        width:100%;
        display: block;
        position: absolute;
        bottom:0px;
        height:30px;
        font-size: 0px;
        background: rgb(63,63,63);
        background: -moz-linear-gradient(top,  rgba(63,63,63,1) 0%, rgba(48,48,48,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(48,48,48,1) 100%);
        background: linear-gradient(to bottom,  rgba(63,63,63,1) 0%,rgba(48,48,48,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#303030',GradientType=0 );
    }

    #bottom_select_menu .item{
        display: inline-block;
    *display:inline;
    zoom: 1;
        vertical-align: top;
        height:30px;
        font-size: 12px;
        line-height: 30px;
        color:rgba(255,255,255,.6);
        background: -moz-linear-gradient(left,  rgba(255,255,255,0.1) 1%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(left,  rgba(255,255,255,0.1) 1%,rgba(255,255,255,0) 100%);
        background: linear-gradient(to right,  rgba(255,255,255,0.1) 1%,rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=1 );
    }

    #bottom_select_menu .item:hover{
        color:#fff;
    }

    #bottom_select_menu .item:active,#bottom_select_menu .item.tstart{
        background:#069;
    }

    #bottom_select_menu .item.active{
        background: -moz-linear-gradient(left,  rgba(53,106,160,0.7) 0%, rgba(50,147,112,0.7) 100%);
        background: -webkit-linear-gradient(left,  rgba(53,106,160,0.7) 0%,rgba(50,147,112,0.7) 100%);
        background: linear-gradient(to right,  rgba(53,106,160,0.7) 0%,rgba(50,147,112,0.7) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3356aa0', endColorstr='#b3329370',GradientType=1 );
    }

    #bottom_panel #raised_my_hands{
        padding-right: 30px;
        line-height: 18px;
        font-size: 14px;
        z-index: 10;
        width:90%;
        max-width: 300px;
    }

    #bottom_panel #raised_my_hands .main {
        font-size: 16px;
    }

    #bottom_panel #raised_my_hands .cancel{
        position: relative;
        top:0;
        left:0;
        padding: 10px 5px;
        margin: 5px 0px;
        width:auto;
    }

    #lesson_file_questions_panel{
        bottom:250px;
    }

    .control_group header{
        display: none!important;
    }

    #expanded_videos .video_grid .item .state .action{
        padding: 5px 10px;
        font-size: 12px;
    }

    #expanded_videos .video_grid{
        padding-left:0px;
    }
    #expanded_videos .ex_1{width:100%;height:100%}
    #expanded_videos .ex_2{width:100%;height:50%}
    #expanded_videos .ex_3{width:100%;height:33.33%}
    #expanded_videos .ex_4{width:100%;height:25%}
    #expanded_videos .ex_6{width:50%;height:33.33%}
    #expanded_videos .ex_8{width:50%;height:25%}
    #expanded_videos .ex_9{width:33.33%;height:33.33%}
    #expanded_videos .ex_12{width:33.33%;height:25%}
    #expanded_videos .ex_15{width:33.33%;height:20%}
    #expanded_videos .ex_16{width:33.33%;height:16.66%}
    #expanded_videos .ex_20{width:33.33%;height:16.66%}
    #expanded_videos .ex_25{width:33.33%;height:16.66%}
    #expanded_videos .ex_36{width:33.33%;height:16.66%}


    #teachers_file.answer_question,#teachers_lesson_title.answer_question,#teachers_video_panel.answer_question{
        height:198px!important;
        max-width:300px!important;
        width:100%!important;
        padding-bottom: 0px!important;
        left:50%!important;
    }


    .sketch_page_buttons{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:300px;
    }

    .sketch_page_buttons .button{
        width:140px;
        height:140px;
    }
    .sketch_page_buttons .button div{
        font-size: 12px;
    }
}



@media screen and (orientation:landscape)
and (max-device-height: 480px) {
    #teachers_video_name{
        font-size: 12px;
    }

    #div_school{
        z-index: 1;
        height:30px;
        line-height:30px;
        font-size: 14px;
        color:#fff;
        background: rgb(42,69,91);
        background: -moz-linear-gradient(left,  rgba(42,69,91,1) 0%, rgba(0,102,153,1) 100%);
        background: -webkit-linear-gradient(left,  rgba(42,69,91,1) 0%,rgba(0,102,153,1) 100%);
        background: linear-gradient(to right,  rgba(42,69,91,1) 0%,rgba(0,102,153,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a455b', endColorstr='#006699',GradientType=1 );

    }
    #div_logo{
        z-index: 1;
        position: absolute;
        top:60px;
        left:0;
        width:65px;
        height:65px;
        padding: 5px;
        background:rgba(255,255,255,.8);
    }
    #div_classes,#div_homework{
        text-align: left;
        padding-top: 0px;
        padding-bottom: 30px;
        padding-left: 70px;
        background: rgba(255,255,255,.8);
    }
    #div_classes .item{
        width:calc(33% - 4px);
        margin: 2px;
    }

    #div_classes .title{
        font-family: 'Ubuntu', sans-serif;
        font-size: 14px;
        margin-bottom: 10px;
    }

    #main_menu{
        position: absolute;
        top:140px;
        left:0px;
        width:65px;
    }

    #main_menu > div{
        display: block;
        width:65px;
        height:50px;
        line-height:50px;
        margin: 5px 0px;
    }

    #account_panel{
        padding-top: 10px;
        /*width:180px;*/
        height:30px;
        padding-left: 40px;
    }
    #account_panel .name,#account_panel .type,#account_panel .acc_icon,#account_panel .menu{
        white-space: nowrap;
        display: none;
    }
    #account_panel .acc_icon{
        display:none;
    }
    #account_panel:hover{
        background: #069;
    }
    #account_panel .connecting{
        width:15px;
        height:15px;
        line-height:15px;
        text-align: center;
        font-size: 10px;
        right:-2px;
        top:-2px;
        padding: 0px;
        transform: none;
    }
    #account_panel .connecting.connected{
        transform: none;
        width:15px;
    }
    #account_panel .connecting i{
        width:15px;
        height:15px;
        line-height:15px;
        font-size: 10px;
    }

    #account_panel .mnu_icon{
        line-height:30px;
        display: block;
    }

    #account_panel .menu{
        display: none;
        width:200px;
        top:45px;
    }

    #account_panel.active .menu{
        display: block;
    }

    #account_panel .menu .signout{
        width:100%;
        height:40px;
        line-height:40px;
    }
    #account_panel .menu .logged_in_as{
        color: rgba(255,255,255,.8);
        background: rgba(0,0,0,.8);
        display: inline-block;
    *display:inline;
    zoom: 1;
        vertical-align: top;
        margin-right: 10px;
        text-decoration: none;
        line-height: 25px;
        transition: all ease .1s;
        width:100%;
        height:auto;
        font-size:12px;
        line-height:14px;
        padding: 7px;
    }

    #teachers_file.active{
        padding-left: 70px;
    }

    .sketch_show_tools{
        display: none!important;
    }
    #sketch_show_tools_clear{
        display: none!important;
    }

    #sketch_controls{
        top:0px;

        transform: translate(-10%,0%);
        padding: 5px;
        background: rgba(0,0,0,.6);
        -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        width:85px;
    }

    #sketch_container{
        padding-right: 5px;
        padding-left: 5px;
        padding-top:40px;
        padding-bottom: 90px;
        left:0px!important;
        opacity: 0;
        pointer-events: none;
        transform: translate(-100%,0px);
    }
    #sketch_container.active{
        opacity: 1;
        pointer-events: auto;
        transform: translate(0%,0px);
    }

    #sketch_container.answer_question{
        opacity: 1!important;
        pointer-events: auto!important;
        left:0%!important;
    }

    #sketch_container.expanded{  
        padding-bottom: 0px!important;
        padding-top: 135px;
        left:15px!important;
    }

    .content_padding answer_question{

    }

    #pose_answer{
        left: 0%!important;
        width: 100%!important;
        padding-top: 200px!important;
    }
    .posed_questions{
        width: calc(100% - 160px);
        margin-left: 5px;
        bottom:5px;
        left:0px;
    }
    #expanded_videos .posed_questions{
        bottom:0px!important;
    }
    .content_padding{
        padding-right: 155px;
        padding-left: 5px;
        padding-top:40px;
        padding-bottom: 95px;
    }
    #teachers_options{
        height:80px;
    }
    #teachers_options{
        height:40px;
        white-space: nowrap;
    }
    #teachers_options .class_title{
        font-size: 14px;
        top:0px;
        padding-left: 60px;
        padding-right: 320px;
    }

    #teachers_options .button{
        width:60px;
        padding:5px;
        line-height: 12px;
        padding-right: 5px;
        white-space: normal;
        font-size: 10px;
        line-height: 10px;
        height:30px;
        text-align: center;
        margin-left: 2px;
    }

    #teachers_options .button i{
        display: none;
        width:25px;
        font-size: 12px;
        height:30px;
        line-height:30px;
    }

    #bottom_panel{
        height:calc(100% - 75px);
        width:150px;
        right:0px;
        bottom:35px;
        border-left:1px solid #111;
    }
    #bottom_panel .title{
        display: none;
    }

    #my_thumbs_panel{
        width:140px;
        height:130px;
        top:0px;
    }
    .item .hideCameras,.settingsCameras{
        padding:5px;
        font-size: 18px;
    }

    .context_panel{
        bottom:90px;
        width:310px;
        height:230px;
        left:5px;
        background: rgb(239,239,239);
        background: -moz-linear-gradient(left,  rgba(239,239,239,1) 0%, rgba(201,201,201,1) 100%);
        background: -webkit-linear-gradient(left,  rgba(239,239,239,1) 0%,rgba(201,201,201,1) 100%);
        background: linear-gradient(to right,  rgba(239,239,239,1) 0%,rgba(201,201,201,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#c9c9c9',GradientType=1 );

    }


    .feedback_options{
        bottom:45px;
        width:calc(100% - 190px);
        left: 5px;  
    }
    #lesson_page_thumbs_panel{
        bottom:50px;
        width:calc(100% - 160px);
        left: 5px;
    }

    #teacher_thumbs_panel{
        width: 100%;
        padding-top: 130px;
        padding-left: 0px;
    }

    #teacher_thumbs_panel .item,#student_thumbs_panel .item{
        height:70px;
        width:70px;
        margin-right: 40px;
        margin-top: 2px;
        margin-left: 2px;
        margin-bottom: 2px;
    }
    #teacher_thumbs_panel .item .state,#student_thumbs_panel .item .state{
        top:0;
        right:0;
        transform: translate(100%,0px);
        width:35px;
    }
    #teacher_thumbs_panel .item .state .action,#student_thumbs_panel .item .state .action {
        width:100%;
        height:25px;
        margin-bottom: 2px;
    }
    #my_thumbs_panel,#teacher_thumbs_panel,#student_thumbs_panel{
        display: none;
    }
    #my_thumbs_panel.active,#teacher_thumbs_panel.active,#student_thumbs_panel.active{
        display: block;
    }

    #action_thumbs_panel{
        bottom:170px;
        width:100%;
        height:45px;
        padding: 0px;
        font-size: 0px;
    }
    #action_thumbs_panel .contents{
        padding:0px!important;
    }
    #action_thumbs_panel .title{
        display: none!important;
    }
    #action_thumbs_panel .action{
        display: inline-block;
    *display:inline;
    zoom: 1;
        vertical-align: top;
        height:35px;
        line-height:35px;
        padding-left:5px;
        width:calc(25% - 6px);
        margin: 5px 3px;
        text-align: center;
        white-space: nowrap;
    }
    #action_thumbs_panel .action i{
        display: none;
        width:25px;
        height:35px;
        line-height:35px;
    }
    #student_thumbs_panel{
        width:100%;
        padding-left: 0px;
    }

    #bottom_select_menu{
        -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.23);
        user-select:none;
        z-index: 10;
        width:150px;
        display: block;
        position: absolute;
        right:0px;
        bottom:5px;
        height:30px;
        font-size: 0px;
        background: rgb(63,63,63);
        background: -moz-linear-gradient(top,  rgba(63,63,63,1) 0%, rgba(48,48,48,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(63,63,63,1) 0%,rgba(48,48,48,1) 100%);
        background: linear-gradient(to bottom,  rgba(63,63,63,1) 0%,rgba(48,48,48,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#303030',GradientType=0 );
    }

    #bottom_select_menu .item{
        display: inline-block;
    *display:inline;
    zoom: 1;
        vertical-align: top;
        height:30px;
        font-size: 12px;
        line-height: 30px;
        color:rgba(255,255,255,.6);
        background: -moz-linear-gradient(left,  rgba(255,255,255,0.1) 1%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(left,  rgba(255,255,255,0.1) 1%,rgba(255,255,255,0) 100%);
        background: linear-gradient(to right,  rgba(255,255,255,0.1) 1%,rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=1 );
    }

    #bottom_select_menu .item:hover{
        color:#fff;
    }

    #bottom_select_menu .item:active,#bottom_select_menu .item.tstart{
        background:#069;
    }

    #bottom_select_menu .item.active{
        background: -moz-linear-gradient(left,  rgba(53,106,160,0.7) 0%, rgba(50,147,112,0.7) 100%);
        background: -webkit-linear-gradient(left,  rgba(53,106,160,0.7) 0%,rgba(50,147,112,0.7) 100%);
        background: linear-gradient(to right,  rgba(53,106,160,0.7) 0%,rgba(50,147,112,0.7) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3356aa0', endColorstr='#b3329370',GradientType=1 );
    }

    #bottom_panel #raised_my_hands{
        padding-right: 30px;
        line-height: 18px;
        font-size: 14px;
        z-index: 10;
        width:90%;
        max-width: 300px;
    }

    #bottom_panel #raised_my_hands .main {
        font-size: 16px;
    }

    #bottom_panel #raised_my_hands .cancel{
        position: relative;
        top:0;
        left:0;
        padding: 10px 5px;
        margin: 5px 0px;
        width:auto;
    }

    #lesson_file_questions_panel{
        bottom:45px;
    }

    .control_group header{
        display: none!important;
    }

    #expanded_videos .video_grid .item .state .action{
        padding: 5px 10px;
        font-size: 12px;
    }

    #expanded_videos .video_grid{
        padding-left:90px!important;
        padding-top: 40px!important;
        padding-bottom: 45px!important;
    }

    #expanded_videos .video_grid .item_me{
        left:0px;
        top:40px;
    }

    #expanded_videos .ex_1{width:100%;height:100%}
    #expanded_videos .ex_2{width:100%;height:50%}
    #expanded_videos .ex_3{width:100%;height:33.33%}
    #expanded_videos .ex_4{width:100%;height:25%}
    #expanded_videos .ex_6{width:50%;height:33.33%}
    #expanded_videos .ex_8{width:50%;height:25%}
    #expanded_videos .ex_9{width:33.33%;height:33.33%}
    #expanded_videos .ex_12{width:33.33%;height:25%}
    #expanded_videos .ex_15{width:33.33%;height:20%}
    #expanded_videos .ex_16{width:33.33%;height:16.66%}
    #expanded_videos .ex_20{width:33.33%;height:16.66%}
    #expanded_videos .ex_25{width:33.33%;height:16.66%}
    #expanded_videos .ex_36{width:33.33%;height:16.66%}


    #teachers_file.answer_question,#teachers_lesson_title.answer_question,#teachers_video_panel.answer_question{
        height:198px!important;
        max-width:300px!important;
        width:100%!important;
        padding-bottom: 0px!important;
        left:50%!important;
    }


    .sketch_page_buttons{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:300px;
    }

    .sketch_page_buttons .button{
        width:140px;
        height:140px;
    }
    .sketch_page_buttons .button div{
        font-size: 12px;
    }
}

.touch_pointer_events_none{
    pointer-events: none!important;
}

#student_thumbs_panel.teachers_only,#bottom_select_menu.teachers_only,.posed_questions.teachers_only{
    display: none!important;
}

#teacher_thumbs_panel{
    /*width:100%!important;*/
}

.video_grid.teachers_only{
    padding-bottom: 0px;
    padding-left: 0px;
}

#expanded_videos .video_grid.teachers_only{
    padding-left:0px!important;
    padding-bottom: 0px!important;
}