/* Agora */

.agora_launcher_ctnr{padding: 50px 0; text-align: center; }

.agora_ctnr{ height: calc(95vh - 130px); min-height: 550px; position: relative; background-color: #ccc; overflow: hidden;}
.agora_ctnr .local_ctnr{position: absolute;bottom: 20px;right: 20px;width: 20%;z-index: 1;border: 1px solid #fff;}
.agora_ctnr .remote_ctnr{position: absolute;top: 0;bottom: 0;right: 0;left: 0;}
.agora_ctnr .top_ctrl_ctnr{ position: absolute;top: 20px;right: 20px;left: 20px; text-align: left; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.5); font-size: 20px; display: flex; flex-flow: row nowrap; }
.agora_ctnr .top_ctrl_ctnr>*{margin: 0 5px;}
.agora_ctnr .top_ctrl_ctnr .spacer{flex-grow: 1;}
.agora_ctnr .center_ctrl_ctnr{position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);}
.agora_ctnr .bottom_ctrl_ctnr{position: absolute;bottom: 0;right: 20%;left: 20%; margin: 20px; text-align: center;}
.agora_ctnr .player {position: absolute;top: 0;bottom: 0;right: 0;left: 0;background-color: #ccc;}
.agora_ctnr #local-player {padding-bottom: 56.25%; position: relative;}
.agora_ctnr .player>div { position: absolute !important; top: 0;left: 0; }

.agora_ctnr .settings_panel {
    position: absolute;bottom:40px; margin-bottom: 11.25%; right: 0;width: calc(20% + 20px); padding: 0 20px; background-color: rgba(240,240,240,.8); z-index: 1; 
    box-shadow: -2px 2px 5px -3px rgba(0,0,0,.5); border-radius: 5px 0 0 5px;  transition: transform .5s;
}
.agora_ctnr .settings_panel .panel_entry{border-bottom: 1px solid #fff;padding: 20px 0;}
.agora_ctnr .settings_panel .panel_entry:last-child{border-bottom: none;}
.agora_ctnr .settings_panel .panel_entry>*{display: block;}
.agora_ctnr .settings_panel .panel_entry label{font-weight: 700;}
.agora_ctnr .settings_panel .panel_entry select{width: 100%;}
.agora_ctnr .settings_panel .panel_entry .volume_ctrl{width: 100%;}
.agora_ctnr .settings_panel .panel_entry .vue_metre{height: 5px;background-color: rgba(0,0,0,0.1); overflow: hidden; position: relative;margin-top: 10px;border-radius: 10px;}
.agora_ctnr .settings_panel .panel_entry .vue_metre .innr{ position: absolute;top: 0;bottom: 0;left: 0; width: 0; background-color: #44cc33;}


.agora_ctnr:not(.inited){display: none;}
.agora_ctnr:not(.in_action) .top_ctrl_ctnr {display: none;}
.agora_ctnr:not(.in_action) .bottom_ctrl_ctnr {display: none;}
.agora_ctnr.in_action .center_ctrl_ctnr {display: none;}

.agora_ctnr:not(.settings_open) .settings_panel{transform: translateX(100%);}
.agora_ctnr:not(.remote_mic_is_muted) .agora_mic_is_muted{display: none;}
.agora_ctnr:not(.remote_cam_is_muted) .agora_cam_is_muted{display: none;}

.togglepicto{text-align: center;width: 45px;}
.togglepicto:not(.active) .on{display: none;}
.togglepicto.active .off{display: none;}