/**
 *  Copyright (C) 2022, 2024  Double Bastion LLC
 *
 *  This file is part of Roundpin, which is licensed under the
 *  GNU Affero General Public License Version 3.0. The license terms
 *  are detailed in the "LICENSE.txt" file located in the root directory.
 *
 *  This is a modified version of the original file "cyber_mega_phone.css",
 *  first modified in 2020. The copyright notice for the original
 *  content follows:
 */
/******************************************************************************
*  Cyber Mega Phone 2K
*  Copyright (C) 2017 Digium, Inc.
*
*  This program is free software, distributed under the terms of the
*  MIT License. See the LICENSE file at the top of the source tree.
******************************************************************************/

html {
    background-color: #ebf0f7;
}

body {
//    display: flex;
    font-family: sans-serif;
    background-color: #ebf0f7;
}

body:-webkit-full-screen { 
    width: 100%;
    height: 100%;
}

#media-frame {
  display: flex;
//  position: absolute;
  justify-content: center;
  align-items: center;
}

#media-views {
    position: relative;  
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

 /* Media view and video */
.media-view {
    display: inline-block;
    position: relative;
    margin: 0.5px;
    width: 100%;
    height: auto;
    z-index: 1;
}

.video-view {
    width: 100%;
    height: 100%;
}

video {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 0px;
    background-color: #e3eaf5;
    z-index: 2;
}

.user-desc {
    position: absolute;
    float: left;
    bottom: 0px;
    padding: 2px 7px;
    height: auto;
    width: auto;
    font-size: 18px;
    font-weight: 500;
    word-break: normal !important;
    white-space: normal !important;
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    opacity: 0.7;
    z-index: 9;
}

.vidConfLabel {
    position: absolute;
    display: none;
    bottom: 0px;
    right: 0px;
    height: auto;
    width: auto;
    padding: 2px 7px;
    color: #000000;
    font-size: 18px;
    word-break: normal !important;
    white-space: normal !important;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    opacity: 0.7;
    z-index: 9;
}

.media-view:hover .vidConfLabel {
    display: inline;
}

.talkDetect {
    position: absolute;
    display: none;
    width: 98.4%;
    height: 98%;
    border: 6px solid #629ad6;
    z-index: 8;
}

.media-controls {
    position: absolute;
    display: none;
    top: 0px;
    right: 0px;
    text-align: right;
    cursor: pointer;
    z-index: 10;
}

.media-controls button:hover, .media-controls button:focus {
    opacity: 1;
}

.media-view:hover .media-controls {
    display: inline;
}

.mediaControlBtn {
    background-color: #fff;
    border: 2px solid #fff;
    font-size: 20px;
    margin: 5px 5px 0px 0px;
    cursor: pointer;
    width: 32px;
    height: 32px;
}

.mediaControlBtn .fa-camera.redcam, .mediaControlBtn .fa-microphone.redmic {
    color: #eb2020 !important;
}

.mediaControlBtn .fa-power-off {
    color: #eb2020 !important;
}

.enterConfExt {
    display: block;
    width: 212px;
    margin: 10px auto;
    padding: 6px;
    border: 1px solid #4c84c2;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-family: Inter, sans-serif;
    color: #FFFFFF;
    background-color: #4c84c2;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}

.enterConfExt:hover {
    background-color: #396da8;
    border: 1px solid #396da8;
    color: #FFFFFF;
}

.enterConfExt:active {
    background-color: #2d5787;
    border: 1px solid #2d5787;
    color: #FFFFFF;
}

#jg_popup_inner {
    z-index: 15 !important;
}

#saveVConfName {
    display: block;
    background: #ffffff;
    width: 100%;
    height: auto;
    text-align: center;
}

#jg_popup_table.jg_popup_basic {
    outline: 3px solid #ffffff !important;
    border-radius: 6px;
}

#jg_popup_table.jg_popup_basic #jg_popup_close {
    display: none !important;
}

#sendPinDialPad table tr td {
    margin: 10px;
    padding: 4px;
}

#dialText {
    display: block;
    width: 136px;
    margin: 16px auto;
    font-size: 16px;
    text-align: center;
    border-radius: 10px;
    border: 0.01em solid;
    background-color: transparent;
    outline-color: #cbe4ff;
    border-color:#989898;
}

#dialText:focus {
    outline: none;
}

.dtmfButtons {
    font-size: 20px;
    color: #222222;
    width: 40px;
    height: 40px;
    border: 1px solid #efefef;
    background-color: #ffffff;
    cursor: pointer;
}

.dtmfButtons:hover {
    color: #FFFFFF;
    background-color: #222222;
}

.dtmfButtons:active {
    color: #cccccc;
    background-color: #000000;
}

.dtmfButtons div {
    font-size: 20px;
    line-height: 6px;
    padding-top: 8px;
}

.dtmfButtons span {
    display: block;
    font-size: 9px;
    padding: 8px 0px 00px 0px;
}

#saveVConfName {
    display: block;
    background: #ffffff;
    width: 100%;
    height: auto;
    text-align: center;
}

#ConfirmSaveBtn {
    display: block;
    margin: 0px auto 20px;
    padding: 5px 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    color: #ffffff;
    background: #457CC4;
    border-radius: 5px;
    cursor: pointer;
}

#banTimeSubmit {
    display: block;
    margin: 24px auto;
    padding: 5px 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    color: #ffffff;
    background: #457CC4;
    border-radius: 5px;
    cursor: pointer;
}

#ConfirmSaveBtn:hover, #banTimeSubmit:hover {
    background: #3367AB;
}

#ConfirmSaveBtn:active, #banTimeSubmit:active {
    background: #265694;
}

#enterVConfUName {
    display: block;
    position: relative;
    margin: 6px 18px 0px 18px;
}

#vcPopupTitle {
    display: block;
    margin: 20px 0px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
}

#banTimeTitle {
    display: block;
    margin: 10px 0px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #084595;
}

#vcPopupTitle .fa-camera {
    margin: 0px 4px 0px 0px;
    color: #386bad;
    font-size: 16px;
}

#vcPopupText {
    font-size: 16px;
}

#banTimeText {
    font-family: Inter, sans-serif;
    font-size: 15px;
}

#extVConfNameDesc {
    font-family: Inter, sans-serif;
    color:#333333;
}

#vConfPrefLogo {
    display: block;
    margin: 0px auto;
}

#extVConfNameDesc .fa-video-camera {
    color: #3268ad;
    margin-right: 4px;
}

#extVConfName {
    display: block;
    position: relative;
    margin: 15px auto;
    width: 95%;
    height: 24px;
    padding: 4px 8px;
    font-size: 16px;
    color: #333333;
    text-align: left;
    border: 1px solid #4c84c2;
    border-radius: 3px;
}

#banTimeBox {
    display: block;
    position: relative;
    margin: 15px auto;
    width: 95%;
    height: 24px;
    padding: 4px 8px;
    font-size: 15px;
    color: #333333;
    text-align: left;
    border: 1px solid #4c84c2;
    border-radius: 3px;
}

#extVConfName:focus, #banTimeBox:focus {
    border: 1px solid #4c84c2;
    outline: none;
}

.customInnerClass {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 23px;
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
}

#enterBanTime {
    display: none;
    position: absolute;
    width: 300px;
    height: 300px;
    padding: 20px 28px;
    background-color: #ffffff;
    border: 0px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 23px;
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
    z-index: 3400;
}

#publicTextMessages {
    display: none;
    position: absolute;
    width: 620px;
    height: 500px;
    padding: 5px 3px;
    background-color: #ffffff;
    border: 0px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 23px;
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
    z-index: 19;
}

.textMessagesPM {
    display: none;
    position: absolute;
    width: 610px;
    height: 490px;
    padding: 4px 2px;
    background-color: #ffffff;
    border: 0px;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 23px;
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.3);
    z-index: 20;
}

#minimizeImg, #maximizeImg, #restoreImg, #closeImg {
   display: inline-block;
   width: 18.4px;
   height: 18.4px;
   margin: 0px 3px 0px 3px;
   cursor: pointer;
   float: right;
}

.minimizeImgPM, .maximizeImgPM, .restoreImgPM, .closeImgPM {
   display: inline-block;
   width: 18.4px;
   height: 18.4px;
   margin: 0px 3px 0px 3px;
   cursor: pointer;
   float: right;
}

#publicMessageImg {
   display: none;
   width: 111px;
   height: 18px;
   margin: 0px 6px 0px 3px;
   float: right;
}

.privateMessageImg {
   display: none;
   width: 114px;
   height: 18px;
   margin: 0px 6px 0px 3px;
   float: right;
}

#minimizeImg:hover, #maximizeImg:hover, #closeImg:hover {
   box-shadow: 0 0 9px rgba(0, 0, 0, 0.1); 
   -webkit-box-shadow: 0 0 9px rgba(0, 0, 0, 0.1); 
   -moz-box-shadow: 0 0 9px rgba(0, 0, 0, 0.1); 
}

#receiveTextMessage {
    display: block;
    position: relative;
    margin: 8px auto;
    width: 93%;
    height: 54%;
    padding: 0px;
    font-size: 16px;
    color: #333333;
    text-align: left;
    border: 1px solid #4c84c2;
    border-radius: 3px;
    overflow-y: auto;
    overflow-x: auto;
}

.receiveTextMessagePM {
    display: block;
    position: relative;
    margin: 8px auto;
    width: 93%;
    height: 54%;
    padding: 0px;
    font-size: 16px;
    color: #333333;
    text-align: left;
    border: 1px solid #4c84c2;
    border-radius: 3px;
    overflow-y: auto;
    overflow-x: auto;
}

#sendTMessage {
    display: block;
    position: relative;
    margin: 13px auto;
    width: 93%;
    height: 112px;
    padding: 1px;
    font-size: 16px;
    color: #333333;
    text-align: left;
    border: 1px solid #4c84c2;
    border-radius: 3px;
}

.sendTMessagePM {
    display: block;
    position: relative;
    margin: 13px auto;
    width: 93%;
    height: 112px;
    padding: 1px;
    font-size: 16px;
    color: #333333;
    text-align: left;
    border: 1px solid #4c84c2;
    border-radius: 3px;
}

#sendMessageTbl {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.chatMessage, .chatMessagePM {
    box-sizing: border-box;
    width: 100%;
    height: 112px;
    padding: 2px 6px;
    border: none;
    outline: none;
    resize: none;
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #282828;
    background-color: transparent;
    overflow-y: auto;
}

.textMessageSent, .textMessageSentPM {
    display: block;
    width: 93.5%;
    height: auto;
    padding: 6px 10px;
    margin: 8px auto;
    background-color: #e9f4ff;
    border: 1px solid #e9f4ff;
    border-radius: 5px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #282828;
    user-select: text;
    cursor: text;
    word-break: keep-all;
}

.textMessageReceived, .textMessageReceivedPM {
    display: block;
    width: 93.5%;
    height: auto;
    padding: 6px 10px;
    margin: 8px auto;
    background-color: #e4f7ee;
    border: 1px solid #e4f7ee;
    border-radius: 5px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #282828;
    user-select: text;
    cursor: text;
    word-break: keep-all;
}

.messageDate {
    display: block;
    margin: 5px 0px 2px 0px;
    font-size: 12px;
    color: #666666;
}

.sentMsTick {
    color: #0099c7;
    font-size: 13px;
    margin-left: 7px;
}

.recMessageBtn {
    border: 0px;
    border-radius: 6px;
    padding: 2px 0px 2px 6px;
    margin: 0px 4px 0px 0px;
    color: #21448F;
    background-color: #ffffff;
    font-size: 15px;
    cursor: pointer;
}

.recMessageBtn:hover {
    background-color: #c9e9da;
}

.recMessageBtn:active {
    background-color: #b6e0cd;
}

.recMessageBtnPM {
    border: 0px;
    border-radius: 6px;
    padding: 2px 6px;
    margin: 0px 4px 0px 0px;
    color: #282828;
    background-color: #ffffff;
    font-size: 15px;
}

.sentMessageBtn, .sentMessageBtnPM {
    border: 0px;
    border-radius: 6px;
    padding: 2px 5px 2px 6px;
    margin: 0px 4px 0px 0px;
    color: #414141;
    background-color: #ffffff;
    font-size: 15px;
}

#emojiMenu {
    position: absolute;
    width: 300px;
    height: auto;
    bottom: 134px;
    right: 4px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.1);
    z-index: 25;
}

.emojiMenuPM {
    position: absolute;
    display: none;
    width: 340px;
    height: auto;
    bottom: 124px;
    right: 0px;
    background-color: #ffffff;
    border-radius: 4px;
    z-index: 25;
}

.emojiButton button {
    font-size: 23px;
    padding-left: 0px;
    padding-right: 0px;
    min-width: 30px;
    min-height: 30px;
    line-height: 28px;
    text-align: center;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
}

#recPubMessage {
    display: inline-block;
    position: absolute;
    bottom: 4px;
    right: 44px;
    cursor: pointer;
    font-size: 30px;
    z-index: 17;
}

.recPrivMessage {
    display: inline-block;
    position: absolute;
    bottom: 4px;
    right: 4px;
    cursor: pointer;
    font-size: 30px;
    z-index: 17;
}

.pmTopBar {
    display: block;
    position: relative;
    width: 100%;
    margin: 0px;
    text-align: center;
    padding-bottom: 2px;
    cursor: grab;
    z-index: 16;
}

#windowCtrls {
    position: relative;
    user-select: none;
    z-index: 21;
}

.windowCtrlsPM {
    position: relative;
    user-select: none;
    z-index: 21;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    color: #3a6ba1;
    padding: 0px;
    line-height: 22px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input[type=checkbox] + label:before {
    font-family: FontAwesome;
    content: "\f096";
    width: 20px;
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
    line-height: 22px;
}

input[type=checkbox]:checked + label:before {
    font-family: FontAwesome;
    content: "\f046";
    width: 20px;
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
    line-height: 22px;
}

#showVCPNchckbx {
    margin: 10px 5px 14px 0px !important;
}

#showVCPNchckbx label {
    font-family: Inter, sans-serif;
    word-break: normal !important;
    white-space: normal !important;
    font-size: 15px !important;
}

input[type="checkbox"] + label::before {
    margin-right: 3px;
}

#stopConfRec {
    display: block;
    position: absolute;
    float: left;
    top: 6px;
    left: 150px;
    background-color: #ffffff;
    padding: 0px 4px;
    border: 2px solid #ffffff;
    border-radius: 4px;
    z-index: 12;
}

#stopConfBtn {
    display: inline;
    position: relative;
    font-size: 16px;
    color: #c91010;
    background-color: #ffffff;
    padding: 1px;
    border: 2px solid #ffffff;
    cursor: pointer !important;
    z-index: 13;
}

#stopConfBtn:hover {
    color: #000000;
}

.roundButtonsSpec {
    border-radius: 100px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #B3B3B3;
    background-color: transparent;
    padding: 0px;
    font-size: 16px;
    box-shadow: none;
    color: #5f5f5f;
    min-width: 0px;
    margin: 2px 0px 4px 2px;
}

.roundButtonsSpec:hover {
    background-color: #333333;
    color: #ffffff !important;
}

.roundButtonsSpec:active {
    border: 1px solid #405ebc;
    background-color: #222222;
    color: #ffffff !important;
}

.fa-paper-plane-o {
    margin: 0px 2px 1px 0px;
    padding: 0px;
}

#jg_popup_overlay {
    z-index: 14 !important;
}

#sendFileFormChatVC, .fileSendVCPM {
   display: none;
   position: absolute;
   width: auto;
   height: auto;
   text-align: left;
   bottom: 0px;
   left: 0px;
   border-radius: 5px;
   overflow: auto;
   z-index: 23;
}

input[type="file"] {
   display: none;
}

.customBrowseButtonVC, .customBrowseButtonVCpm {
   display: inline-block;
   position: relative;
   width: auto;
   height: auto;
   padding: 2.5px 8px 1.8px 8px;
   font-size: 16px;
   font-weight: 500;
   color: #ffffff;
   cursor: pointer;
   background-color: #65c98d;
   border-radius: 4px;
}

.customBrowseButtonVC:hover, .customBrowseButtonVCpm:hover {
   background-color: #60b582;
}

.customBrowseButtonVC:active, .customBrowseButtonVCpm:active {
   background-color: #569c72;
}

#upFileVC, .uploadedFlVCpm {
   display: none;
   position: relative;
   min-width: 80px;
   height: 20px;
   vertical-align: bottom;
   color: #393939;
   font-size: 16px;
   padding: 2.5px 8px 1.8px 8px;
   margin-left: 3px;
   background-color: rgba(219, 234, 255, 0.75);
   border-radius: 4px;
}

#sendFileLoaderVC, #sendFileLoaderVCPM {
   display: block;
   position: absolute;
   width: 66px;
   height: 66px;
   left: 46%;
   bottom: 40%;
   background-image: url('../../images/loader.gif');
   background-repeat: no-repeat;
   z-index: 24;
}

.textMessageSent a, .textMessageReceived a {
   text-decoration: none;
   color: #1157a0 !important;
}

#downloadVConfHst, .downloadVConfHstPM {
   display: none;
   position: absolute;
   top: 3px;
   right: 12px;
   font-size: 18px;
   color: #9d9d9d;
   cursor: pointer;
}

#downloadVConfHst:hover, .downloadVConfHstPM:hover {
   color: #4b4b4b;
}

.srMsgVConfcont {
   display: inline;
   margin-left: 4px;
   line-height: 1.4;
}
.srMsgVConfcont a {
   text-decoration: none;
   color: #1157a0 !important;
}