/*font-face code here -----------------------------------------------------------------*/
@font-face {
    font-family : 'effra';
    font-style: normal;
    font-weight: 100;
    src : url('../fonts/Light.ttf');
}
@font-face {
    font-family: 'effra';
    font-style: normal;
    font-weight: 400;
    src : url('../fonts/Regular.ttf');
}
@font-face {
    font-family: 'effra';
    font-style: normal;
    font-weight: 600;
    src : url('../fonts/Medium.ttf');
}
@font-face {
    font-family: 'effra';
    font-style: normal;
    font-weight: bold;
    src : url('../fonts/Bold.ttf');
}
@font-face {
    font-family: 'effra';
    font-style: normal;
    font-weight: bolder;
    src : url('../fonts/Heavy.ttf');
}

@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    src:url("../fonts/fontawesome-webfont.ttf");
}





/*Keyframes code here -----------------------------------------------------------------*/
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    }
}

@-webkit-keyframes flash {
    0% { opacity: 1; } 
    50% { opacity: .1; } 
    100% { opacity: 1; }
}
@keyframes flash {
    0% { opacity: 1; } 
    50% { opacity: .1; } 
    100% { opacity: 1; }
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    @media 
    (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
    }
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  50%{ -webkit-transform: scale(1.0);opacity: 1;}
  100% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  }
   50%{
   -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 1;
   }
   100% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
}




/*box-sizing code here -----------------------------------------------------------------*/
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}




/*Scrollbar code here -----------------------------------------------------------------*/
::-webkit-scrollbar {
    display: none;
}
/* / optional: show position indicator in red / */
/* ::-webkit-scrollbar-thumb {
    background: #FF0000;
}
 */



/*Placeholder code here -----------------------------------------------------------------*/
.input_text::-webkit-input-placeholder { 
    font-style: normal; 
    opacity : 1; 
    letter-spacing:0.5px; 
    font-size: 14px; 
} 

.input_text::-moz-placeholder,
.input_text:-ms-input-placeholder,
.input_text:-moz-placeholder { 
    font-style: normal; 
    font-size: 14px; 
}



/*common css code here -----------------------------------------------------------------*/
body{
    margin: 0px;
    padding: 0px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}

.t-effect{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}

.fr{ float: right; }

.fl{ float: left; }

.clear{ clear:both; }

.blink{
    -webkit-animation: flash linear 1.3s infinite;
    animation: flash linear 1.3s infinite;    
}

.error .fa.fa-times.red_color,
.scuess .fa.fa-check.green_color {
    display: inline-block;
}

.hline{
    height: 1px;
    background: #1a1f25;
}

input[type=text],
input[type=password]{ font-family:"effra" }

input.inactive{ 
    display: block !important;
    opacity:0.5 !important;
 }  
 
 
 
 
 /*color and background color code here -----------------------------------------------------------------*/
.v2_pwd_input a:hover,
.v2_submit_btn a:hover { color: #fff; }

.green_color { color: #85C24F; }

.red_color { color: #D84958; }

.dialling_hold { color: #85C24F; }

.blue_bg { background: #58C7F4; }

.btnGreen{ background-color: #85c24f;  }

.btnDkBlue{ background-color: #1a1f25;}

/* .status_content.callstatus_content {  background-color: #20262F; } */

.green_bg {
    background: #78D700;
    display: none;
}



/*display block code here -----------------------------------------------------------------*/
.active,
.dialpad_text.active,
.v2_dial_screen_expand div.pointed_arrow,
.oncall_screen ul li.active figure span,
.setting_screen.moreinfo h4, 
.setting_screen ul.outbound_list li.active a i,
.status_drop ul li.active a i {
    display: block !important;
}




/*display none code here -----------------------------------------------------------------*/
.inactive,
.v2_action_btn a.inactive,
.v2_login_screen,
.v2_login_screen input[type="password"]:focus+a,
.setting_screen ul.outbound_list li a i,
.setting_screen .setting_list,
.setting_screen .myinfo_list,
.setting_screen .stats_list,
.setting_screen .outbound_list,
.setting_screen .troubleshoot_list,
.dial_container,
.hide {
    display: none;   
}




/*opacity minus code here -----------------------------------------------------------------*/
.status_drop ul li a,
.call_logs_details li label,
.myinfo_list label, 
.stats_list label,
.setting_list li, 
.troubleshoot_list li,
.setting_screen ul.outbound_list li a,
.setting_screen ul.troubleshoot_list li a,
.call_logs li span{
    opacity:0.7;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}




/*opacity plus code here -----------------------------------------------------------------*/
.setting_screen ul.outbound_list li.active a,
.setting_screen ul.outbound_list li:hover a,
.setting_screen ul.troubleshoot_list li.active a,
.v2_action_btn a:hover span,
.call_logs li:hover span,
.call_logs li:hover small,
.status_drop ul li a:hover, 
.setting_list li:hover,
.troubleshoot_list li:hover,
.oncall_screen ul li.active .end_caller,
.oncall_screen ul li.active .caller_detail input,
.oncall_screen ul li.active figure img,
.oncall_screen ul li.active .dial_caller,
.caller_detail .input_pause,
input.active{
    opacity: 1;   
}




/*v2_wrapper code here -----------------------------------------------------------------*/
.v2_wrapper {
    width: 300px;
    margin: 0px auto;
    border-radius: 0px 0px 5px 5px;
    color:#ffffff;
    font-family: 'effra';
    font-weight: lighter;
    position:relative;
}




/*v2_login_screen code here -----------------------------------------------------------------*/
.v2_logging_screen {
    padding: 35px 0px;
    text-align: center;
    background: #1a1f25;
    border-radius: 5px;
    display: none;
}

.v2_logging_screen img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin: 0px auto 0px;
    display: block;
}

.v2_logging_screen label {
    display: block;
    font-size: 15px;
    font-weight: lighter;;
    margin: 10px 0px 5px;
}

.v2_logging_screen span {
    font-size: 10px;
    display: block;
}

.v2_login_screen input {
    font-family: 'effra';
    width: 100%;
    background: transparent;
    border: 0px;
    font-size: 15px;
    padding: 17px 30px 17px 15px;
    outline: none;
    color: #ffffff;
    font-weight: lighter;
}

.v2_login_screen i {
    font-size: 10px;
    position: absolute;
    top: 21px;
    right: 15px;
    display: none;
}

.v2_pwd_input a {
    position: absolute;
    font-size: 10px;
    top: 19px;
    right: 15px;
    color:#ffffff;
    cursor: pointer;
    z-index: 1;
}

.v2_submit_btn a {
    display: block;
    padding: 16px 0px;
    text-align: center;
    font-size: 15px;
    font-weight: lighter;
    color: #4E545B;
    cursor: pointer;
    background: #1a1f25;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}




/*v2_user_status code here -----------------------------------------------------------------*/
.v2_user_status {
    display: inline-block;
    width: 100%;
    background-color: #1a1f25;
    height:63px;
}

.v2_dial_screen .v2_user_status .ready_stats {
	
position: absolute;
right: 70px;
top: 40px;
font-size: 12px
	
	
}

/* .v2_user_status figure {
    float: left;
    margin: 0px 0px 0px 15px;
    position: relative;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.v2_user_status figure img {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    cursor: pointer;
    margin:5px 10px 0px 0px;
}
.v2_user_status figure span {
    position: absolute;
    width: 7.5px;
    height: 7.5px;
    border-radius: 100%;
    top: 28px;
    left: 28px;
} */




/*status_content code here -----------------------------------------------------------------*/
  .status_content>code {
	float: left;
	background: url(/images/unmute.svg);
	width: 32px;
	height: 32px;
	margin: -4px 0px 0px 0px;
	position: absolute;
	left: 15px;
	cursor: pointer;
	display: none;
}

.status_content>code.muted {
	background: url(/images/mute.svg) !important;
} 

.status_content { 
    float: right;
    /* padding: 22px 0px 21px;
    height:63px; */
}

.status_content span.status_circle{
    padding:5px;
    margin:7px 0px 0px 15px;
    border-radius:50%;
    float: left;
 }
 
.status_content label {
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    margin: 2px 0px 0px 5px;
}

.status_content label span{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 73px;
    min-width: 10px;
    margin-right: 10px;
    height:19px;
    cursor:pointer;
}

.status_content label code{
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #888888;
    position: absolute;
    left: 50%;
    margin-left: -11px;
    top: 34px;
    display: none;
}

.status_content label i{
    font-size: 10px;
    color: #888888;
    font-weight: 100;
    right: -7px;
    top: 5px;
    position: absolute;
}

.status_loaderCircle{
    width: 8px;
    height: 8px;
    border: 1px solid #ffffff;
    margin: 0px 12px 3px -4px;
    position: relative;
    animation: rotate 0.8s infinite linear;
    border-radius: 50%;
    border-right-color: transparent;
    opacity: 0.7;
    display: none;
}

label.status_loader cite.status_loaderCircle{ display: inline-block !important; }




/*phone_loading code here -----------------------------------------------------------------*/
.phone_loading{ background-image: none !important; }

.phone_loading:after{
    right: 7px !important;
    top: 50% !important;
    font-size: 19px !important;
    margin-top: -5px !important;
    width: 11px;
    height: 11px;
}

.phone_loading:after {
    height: 8px;
    width: 8px;
    animation: rotate 0.8s infinite linear;
    border: 1px solid #ffffff;
    border-right-color: transparent;
    border-radius: 50%;
    position: absolute;
    opacity: 0.7;
    right: 14px;
    top: 3px;
    content: "";
}




/*status_timing code here -----------------------------------------------------------------*/
.status_timing {
    float: left;
    line-height: 25px;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    font-size: 16px;
}

.status_timing .time_duration {
    font-size: 16px;
    display: block;
    opacity: 0.8;
}




/*v2_action_btn code here -----------------------------------------------------------------*/
.v2_action_btn {
    display: flex;
    background: #1a1f25;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
}

.v2_action_btn a {
    width: calc(100%/5);
    height: 60px;
    cursor: pointer;
    position: relative;
    flex-grow: 1;
    border: 1px solid #1a1f25;
    border-width:1px 1px 0px 0px;
}

.v2_action_btn a.active{
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}

.v2_action_btn a.setting_btn{ border-width:1px 0px 0px !important; }

.v2_action_btn a span {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    width: 30px;
    margin: 0px auto;
}

.v2_action_btn a.conference_btn span {
    background: url(../images/conference_btn.svg) center no-repeat;
    background-size: 24px;
}
 
.v2_action_btn a.swap_btn span {
    background: url(../images/swap_btn.svg) center no-repeat;
    background-size: 28px;
}

.v2_action_btn a.conference_btn span.loading {
    background: url(../images/conference-loader.gif) center no-repeat !important;
    background-size: 29px !important;
} 

.v2_action_btn a.swap_btn span.loading {
    background: url(../images/swap-loader.gif) center no-repeat !important;
    background-size: 29px !important;
}

.v2_action_btn a.addcall_btn span { background: url(../images/add_call_btn.svg) center no-repeat; }

.v2_action_btn a.dialpad_btn span { background: url(../images/dialpad_btn.svg) center no-repeat; }

.v2_action_btn a.quick_connect_btn span { background: url(../images/single-user-search.svg) center no-repeat; }

.v2_action_btn a.setting_btn span { background: url(../images/setting_btn.svg) center no-repeat; }

.v2_action_btn a.addcall_btn:hover span { background: url(../images/add_call_wbg_btn.svg) center no-repeat; }

.v2_action_btn a.dialpad_btn:hover span { background: url(../images/dialpad_wbg_btn.svg) center no-repeat; }

.v2_action_btn a.quick_connect_btn:hover span { background: url(../images/single-user-search_1.svg) center no-repeat; }

.v2_action_btn a.conference_btn:hover span { background: url(../images/conference_wbg_btn.svg) center no-repeat; }

.v2_action_btn a.swap_btn:hover span { background: url(../images/swap_wbg_btn.svg) center no-repeat;   background-size: 26px; }

.v2_action_btn a.setting_btn:hover span { background: url(../images/setting_wbg_btn.svg) center no-repeat; }

/*.v2_action_btn a.addcall_btn.active span { background: url(../images/add_call_wbg_btn.svg) center no-repeat; }
.v2_action_btn a.dialpad_btn.active span { background: url(../images/dialpad_wbg_btn.svg) center no-repeat; }
.v2_action_btn a.conference_btn.active span { background: url(../images/conference_wbg_btn.svg) center no-repeat; }
.v2_action_btn a.setting_btn.active span { background: url(../images/setting_wbg_btn.svg) center no-repeat; }*/




/*dialpad_text code here -----------------------------------------------------------------*/
.dialpad_text {
    display: none;
    overflow: hidden;
    border: 1px solid #1a1f25;
    border-width: 1px 0px 0px;
    padding: 0px 1px;
    background-color: #1a1f25;
}

.dialpad_text a {
    width: 96px;
    float: left;
    text-align: center;
    font-size: 36px;
    padding: 18px 0px 5px;
    margin-left: 1px;
    background: #1a1f25;
    cursor: pointer;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #1d2228;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}

.dialpad_text a label {
    color:#8a8a8a;
    display: block;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.dialpad_text a:hover label,
.dialpad_text a:hover span { color:#ffffff; }

.dialpad_text a span {
    color: #8a8a8a;
    font-size: 12px;
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    line-height: 13px;
    letter-spacing: 1px;
}

.dialpad_text a:nth-child(10) label {
    /*background: url(../images/asterisk_active.png) center center no-repeat;
    opacity: 1;
    line-height: 43px;
    background-size: 20px !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;*/
    font-size:50px;
}

.dialpad_text a.activeHint{ border:1px solid #ffffff !important; }

/*.dialpad_text a:nth-child(10):hover label{ background: url(../images/asterisk_active.png) center center no-repeat; }
.dialpad_text a:nth-child(10):active label { background: url(../images/asterisk_active.png) center center no-repeat; }*/




/*status_drop code here -----------------------------------------------------------------*/
.status_drop {
    background: #1a1f25;
    display: none;
    overflow-y: auto;
    width: 220px;
    margin: -4px auto 0px;
    border-top: 1px solid #888;
    border-radius: 0px 0px 5px 5px;
}

.status_drop ul {
    margin: 0px;
    padding: 0px 20px 15px;
    list-style: none;
    font-size:15px;
}
    
.status_drop ul li a {
    display: block;
    position: relative;
    cursor: pointer;
}

.status_drop ul li a label{ cursor: pointer !important; }

.status_drop ul li a i {
    position: absolute;
    top: 4px;
    right: 0px;
    font-size: 14px;
    display: none;
}




/*oncall_screen code here -----------------------------------------------------------------*/
.oncall_screen {
    display: block;
    position: relative;
    background-color: #1a1f25;
    border: 1px solid #808896;
    border-width: 1px 0px 0px;
    margin-top: -4px;
}

.oncall_screen ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.oncall_screen ul li {
    width: 100%;
    padding: 15px 0px;
    border-bottom: 1px solid #1a1f25;
    position: relative;    
}

.oncall_screen ul li figure {
    float: left;
    margin: 2px 0px 0px 15px;
    position: relative;
}

.oncall_screen ul li figure img {
    width: 32px;
    height: 32px;
    opacity: 0.3;
}

.oncall_screen ul li figure span {
    position: absolute;
    width: 7.5px;
    height: 7.5px;
    top: 2px;
    left: 22px;
    border-radius: 100%;   
}

.join_state {
    position: absolute;
    border-right: 2px dotted #58C7F4;
    height: 15px;
    margin-left: 30px;
}

.oncall_screen ul li:nth-child(odd) .join_state {
    bottom: 0;
    margin-bottom: 2px;
    padding-left: 0px;
}

.oncall_screen ul li:nth-child(even) .join_state { top: -1px; }

.oncall_screen ul li:last-child { border-bottom-color: transparent; }




/*caller_detail code here -----------------------------------------------------------------*/
.caller_detail input {
    background: transparent;
    border: 0px;
    color: #ffffff;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 1.2px;
    outline: none;
    opacity: 1;
    padding-left:10px;
    font-weight:300;
}

.caller_detail .disable {
    background: transparent;
    border: 0px;
    color: #dddddd;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: 1.2px;
    width: 100%;
    outline: none;
    opacity: 0.7;
}

.caller_detail { display:inherit; }




/*setting_screen code here -----------------------------------------------------------------*/
.setting_screen {
    border-radius:0px 0px 5px 5px;
    overflow: hidden;
    position: relative;
    display: none;
    background-color: #1a1f25;
    margin-top:-4px;
}

.setting_screen h4 {
    text-align: center;
    font-size: 15px;
    font-weight: lighter;
    padding: 15px;
    margin: 0px;
    display: none;   
}

.setting_screen ul {
    margin: 0px;
    padding: 0px 20px 15px;
    background: #1a1f25;
    list-style: none;
    font-size: 15px;
}

.setting_screen ul li a i {
    float:right;
    font-size: 10px;
}

.setting_screen .back_btn {
    position: absolute;
    left: 15px;
    top: 15px;
    line-height: 15px;
    display: none;
    z-index: 1;
    cursor: pointer;
    display: none;
}

.setting_screen .back_btn i {
    font-size: 12px;
    margin-right: 5px;
    margin-left: 5px;
}

.setting_screen .back_btn span {
    font-size: 14px;
    opacity:0.7;
}




/*caller_pause and caller_play code here -----------------------------------------------------------------*/
.caller_pause, .caller_play{
    position: absolute;
    width: 24px;
    height: 24px;
    background: url(../images/pauseBtnHover.svg) 0px 0px no-repeat;
    background-size: 24px !important;
    top: 20px;
    right: 45px;
    cursor:pointer;
    opacity:1;
}

.caller_play{ 
    background: url(../images/playBtn.svg) 0px 0px no-repeat !important;
    background-size: 24px !important; 
}

.caller_pause i, .caller_play i{ display:none; }

.caller_pause_loading,
caller_play_loading{
    opacity:0.5;
}

/* .caller_pause_loading::before, .caller_play_loading::before,
.caller_pause_loading::after, .caller_play_loading::after{
    content: '';
    position: absolute;
    top: 27%;
    left: 34%;
    border: 2px solid transparent;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    margin-left: -8px;
    margin-top: -6px;
} 
.caller_pause::after, .caller_play::after {
    border-color: transparent ;
    border-bottom-color:#da5d56;
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
}*/




/*caller all code here -----------------------------------------------------------------*/
.end_caller, 
.dial_caller,
.incoming_caller,
.outgoing_caller,
.end_caller_conference {
    position: absolute;
    width: 24px;
    height: 28px;
    top: 17px;
    right: 15px;
    opacity: 0.2;
    cursor: pointer;
}

.end_caller{
    background: url(../images/callBtnHover.svg) 0px 0px no-repeat;
    background-size: 24px;
    height: 24px;
    top: 20px;
    right: 13px;  
}

.end_caller_conference{
    background: url(../images/callBtn.svg) 0px 0px no-repeat;
    background-size: 24px;
    height: 24px;
    top: 20px;
    right: 13px;  
}

.incoming_caller{
    background: url("../images/incoming.gif") 6px 2px no-repeat;
    opacity: 1;   
}

.outgoing_caller{
    background: url(../images/outbound.gif) 6px 2px no-repeat;  
    opacity: 1; 
}

.dial_caller{ background: url(../images/call.png) center 2px no-repeat; }




/*call_logs code here -----------------------------------------------------------------*/
.call_logs{
    overflow: auto;
	min-height: 10px;
	max-height: 213px;
	border: 1px solid #808896;
	border-width: 1px 0px 0px;
}

.call_logs ul{
    position: absolute;
	padding: 0px;
	margin: 0px;
	right: 0px;
	top: 13px;
	display: none;
}

.call_logs li:hover ul{ display:block; } 

.call_logs ul li{
    display: inline-block;
	padding: 0px !important;
}

.call_logs ul li a{ 
    color: #8994A2;
    text-decoration: none; 
    padding: 3px 7px; 
    border: 1px solid #7F8796; 
    margin: 0px 0px 0px 7px; 
    border-radius: 3px; 
    font-size: 13px;
}

.call_logs ul li a:hover{
    color: #ffffff;
    border: 1px solid #ffffff;
}

.call_logs li small{
    font-size: 13px;
	right: 0px;
	top: 15px;
	position: absolute;
}

.call_logs li:first-child span,
.call_logs li:first-child small{
    opacity: 1 !important;
}
.call_logs li.LSChat span,
.call_logs li.SBChat span,
.call_logs li.AR span,
.call_logs li.repeat span,
.call_logs li.inbound span,
.call_logs li.missed-inbound span,
.call_logs li.missed-outbound span,
.call_logs li.outbound span{ 
    padding: 0px 0px 0px 26px;
	position: relative;
	user-select: all;
}

.call_logs li.SBChat span{ background:url("../images/call_logs_sprite.png") -2px -5px no-repeat; }
.call_logs li.LSChat span{ background:url("../images/call_logs_sprite.png") -2px -5px no-repeat; }

.call_logs li.AR span{ background:url("../images/call_logs_sprite.png") -2px -171px no-repeat; }

.call_logs li.repeat span{ background:url("../images/call_logs_sprite.png") -2px -84px no-repeat; }

.call_logs li.inbound span{ background:url("../images/call_logs_sprite.png") -2px -45px no-repeat; }
.call_logs li.missed-inbound span{background:url("../images/call_logs_sprite.png") 0px -197px no-repeat; background-size: 22px;}

.call_logs li.outbound span{ background:url("../images/call_logs_sprite.png") -2px -125px no-repeat; }
.call_logs li.missed-outbound span{ background:url("../images/call_logs_sprite.png") 0px -197px no-repeat; background-size: 22px; }

.call_logs li,
.setting_screen ul li,
.status_drop ul li{ 
    padding: 13px 0px 0px;
	cursor: pointer;
	position: relative;
}

#box_score_element {
    font-size: 15px;
    padding: 15px 20px;
    background-color: #1a1f25;
    
}

#box_score_element label{
	 color: #ffffff;
    opacity: 0.7;
	
}
#box_score_element span {
    float: right;
    color: #ffffff;
    opacity: 0.7;
}

.call_logs li{
    padding:10px 0px;
}



/*dial_icon code here -----------------------------------------------------------------*/
.dial_icon{
    cursor: pointer;
    float: right;
    margin: 0px 15px 0px 0px;
}

.dial_icon code{
    background: url(../images/icon-sprite.png) -3px 17px no-repeat;
    padding: 32px 10px 31px;
    display: inherit;
    margin: 0px;
}

.dial_icon div.pointed_arrow{
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #888888;
    position: absolute;
    margin: -7px 0px 0px 4px;
    display: none;
}

/*quick connect code here -----------------------------------------------------------------*/

#quick_connect_container{
    background-color: #1a1f25 !important;
    width: 100%;
    margin: -4px auto 0px;
    display: none;
    white-space: nowrap;
}
#quick_connect_container.show{
    display: block;
}

#quick_connect_list {
    height: 300px;
    overflow: scroll;
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-size: 14px;
}
#quick_connect_list.loading {
    display: flex;
    justify-content: center;
    align-items: center;
}
#quick_connect_search_wrapper {
    margin: 0px 16px 10px 16px;
    display: flex;
    gap: 8px;
    align-items: center;
}

#quick_connect_container ul li {
    width: 100%;
    display: block;
    padding: 6px 14px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
}

#quick_connect_container ul li.quick_connect_no_result {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
}

#quick_connect_search_cross{
    width: 16px;
    height: 16px;
    cursor: pointer;
}

#quick_connect_search_cross.hidden{
    display: none;
}

.quick_connect_name{
    padding: 4px 0px;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick_connect_pill {
    border: none;
    cursor: pointer;
    background-color: white;
    border-radius: 50px;
    font-size: 12px;
    padding: 4px 8px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.quick_connect_loader{
    border: 1px solid #ffffff;
    animation: rotate 0.8s infinite linear;
    border-radius: 50%;
    border-right-color: transparent;
}
.check_status_loader{
    min-width: 16px;
    height: 16px;
    margin-left: 8px;
}

.quick_connect_main_loader{
    width: 24px;
    height: 24px;
}

#quick_connect_container ul li:hover , #quick_connect_container ul li.selected{
    background-color: #212832;
}

#quick_connect_container ul li:hover .check_status_pill {
    display: flex;
}

#quick_connect_container ul li.selected:hover .check_status_pill {
    display: none;
}

.check_status_pill{
    display: none;
}


#quick_connect_search{
    background: transparent;
    border: 0px;
    color: #ffffff;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 1.2px;
    outline: none;
    opacity: 1;
    padding: 0px;
    font-weight: 300;
    width: 100%;
}

.quick_connect_heading {
    text-align: center;
    font-size: 15px;
    font-weight: lighter;
    padding: 15px;
    margin: 0px;
}

#quick_connect_container ul li div.status {
    color: white;
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}

#quick_connect_container ul li span.quick_connect_cta_indicator {
    width: 10px;
    height: 10px;
}

.check_status_indicator {
    background: url('../images/check_status_indicator.svg') center no-repeat;
    width: 10px;
    height: 10px;
}

.call_now_indicator{
    background: url('../images/call_now_indicator.svg') center no-repeat;
    width: 10px;
    height: 10px;
}

.quick_connect_refresh {
    cursor: pointer;
}

.quick_connect_refresh > span {
    background: url('../images/quick_connect_refresh.svg') center no-repeat;
    display: block;
    width: 16px;
    height: 16px;
}

.quick_connect_status_container {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: 8px;
}

.no_result_icon {
    background: url('../images/info.svg') center no-repeat;
    width: 16px;
    height: 16px;
}

.quick_connect_status_circle{
    padding: 5px;
    border-radius: 50%;
}

/*call_logs_header code here -----------------------------------------------------------------*/
.call_logs_header{
    background-color: #1a1f25;
    padding: 20px;
}

.call_logs_header i{
    float:left;
    margin-top:4px;
    font-size:12px;
    cursor:pointer;
}

.call_logs_header span{
    float: left;
    font-size: 14px;
    line-height: 20px;
    padding-left: 15px;
    cursor: pointer;
    opacity: 0.4;
}

.call_logs_header label{
    padding: 0px 0px 0px 20px;
    font-size: 15px;
}

.call_logs_header span.copied{
    float: right;
    padding-left:0px !important;
    opacity: 1 !important;
    color:#78D700;  
}

.call_logs_header span.un_copied{
    float: right;
    padding-left:0px !important;
    opacity: 1 !important;
    color:#d74957;  
}




/*call_logs_details code here -----------------------------------------------------------------*/
.call_logs_details{
    list-style: none;
    padding: 0px 20px 20px;
    margin: 0px;
    background-color: #1a1f25;
    font-size: 15px;
}

.call_logs_details li small{
    text-align: right;
    float: right;
    width: 200px;
    word-wrap: break-word;
    display:initial;
    font-size:11px;   
}

.call_logs_details li span{
	position: absolute;
    right: 0px;
    user-select: all;	
}

.call_logs_details li.last span{
    width:55%;
    font-size:12px;
    text-align:right;
    word-wrap:break-word;
}

.call_logs_details li label, .myinfo_list label, .call_logs li small {
    user-select: none;
   -webkit-user-select: none;
}



/*notifyPannel code here -----------------------------------------------------------------*/
.notifyPannel{
    background-color: #ffdfe2;
    padding: 15px 40px 15px 45px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 5px;
    letter-spacing: 0.5px;
    border: 1px solid #e2b7bb;
    position: relative;
    color: #333;
    font-family: arial;
    margin: -2px 0px 4px;
}
.notifyPannel i{
    font-size: 18px;
    position: absolute;
    right: 22px;
    top: 19px;
    line-height: 12px;
    cursor: pointer;
    color: #000000;
    font-weight: 600;
    font-style: normal;
    opacity: 0.2;
}
.notifyPannel code{
    position: absolute;
    left: 20px;
    top: 14px;
    border-radius: 50%;
    background-color: #e91521;
    width: 12px;
    height: 17px;
    color: #ffffff;
    font-size: 13px;
    line-height: 18px;
    padding: 0px 0px 0px 5px;
    font-family: arial;
    text-align: center;
    letter-spacing: 6px;
    font-weight: bolder;
}




/*dialoutPopup code here -----------------------------------------------------------------*/
.dialoutPopup{
    margin: -4px 0px 0px;
    padding: 20px;
    font-size: 14px;
    font-family:"effra";
    border: 1px solid #808896;
    border-width: 1px 0px 0px;
    background-color: #1a1f25;
    border-radius: 5px;
    display: none;
}

.dialoutPopup p{
    margin: 0px;
    padding: 0px;
    color:#ffffff;
    letter-spacing: 0.5px;
}




/*callingDetails code here -----------------------------------------------------------------*/
.callingDetails{
    float: right;
    display: none;
}

.callingDetails span{
    background-size: 24px !important;
    padding: 13px 24px 13px 0px;
    float: left;
    cursor: pointer;
    margin: 0px 8px;
}

.callingDetails span.callBtn{ 
    background: url(../images/callBtnHover.svg) 0px 1px no-repeat;
    margin: 0px;
}

.callingDetails span.callBtn:hover{ background:url("../images/callBtnHover.svg") 0px 1px no-repeat; }

.callingDetails span.pauseBtn{
    background:url("../images/pauseBtnHover.svg") 0px 1px no-repeat;
}

.callingDetails span.playBtn{
    background:url("../images/playBtn.svg") 0px 1px no-repeat;
}

.callingDetails code{
    border: 1px solid #333a44;
    border-width: 0px 1px 0px 0px;
    padding: 13px 0px;
    float: left;
    margin: 0px 8px 0px 0px;
}




/*popupBtnHolder code here -----------------------------------------------------------------*/
.popupBtnHolder{
    margin: 20px 0px 0px;
    text-align: right;
}

.popupBtnHolder button{
    margin: 0px 5px;
    padding: 5px;
    width: 60px;
    font-size: 14px;
    color: #ffffff;
    border: 0px;
    border-radius: 3px;
    cursor:pointer;
}




/*myinfo_list code here -----------------------------------------------------------------*/
.myinfo_list div.skils_hold span{
    float:none !important;
    display: block !important;;
    text-align: right !important;;
}

.myinfo_list li span, .stats_list span{
    float:right;
    cursor:default;
}




/*contry_type code here -----------------------------------------------------------------*/
.contry_type,dialling_hold {
    position: absolute;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.2);
    right: 45px;
    top: 7px;
}




/*arStatus code here -----------------------------------------------------------------*/
.arStatus{
    float: left;
    margin: 2px 0px 0px 10px;
    background: url(../images/ARgreen.png) no-repeat;
    border: 1px solid #888888;
    border-width: 0px 1px 0px 0px;
    padding: 8px 17px 8px 10px;
    display: none;
}




/*voiceCallType code here -----------------------------------------------------------------*/
.voiceCallType{
    position: absolute;
    top: 10px;
    opacity: 0.5;
    left: 55px;
    font-size:12px;
}
 
 
 
 /*converstationHoldTimer code here -----------------------------------------------------------------*/
.converstationHoldTimer{
    position: absolute;
    opacity: 0.5;
    right: 55px;
    top: 26px;
    font-size: 12px;
}



/*conference_endcall code here -----------------------------------------------------------------*/
.conference_endcall {
    top: 50%;
    margin-top: -17px;
    right: 15px;
    background: url(../images/endcall.png) center center no-repeat;
    opacity: 1;
    border-radius: 100%;
    background-color: #1a1f25;
    z-index: 1;
    border: 1px solid #1a1f25;
    width: 34px;
    height: 34px;
    position: absolute !important;
    cursor: pointer;
    display: none;    
}



/*call_logs_dwnbtn code here -----------------------------------------------------------------*/
.call_logs_dwnbtn{
    display: block;
    font-size: 13px;
    opacity: 0.2;
    cursor: pointer;
}



/*oncallHold code here -----------------------------------------------------------------*/
.oncallHold{
    background-color: #20262F;
    float: right;
    padding: 5px 10px 4px;
    border-radius: 4px;
    margin: 15px 15px 14px 0px;
}

/*offfcallHold code here -----------------------------------------------------------------*/
.offcallHold{
    background-color: #1a1f25 !important;
}


/*mute button disable here -----------------------------------------------------------------*/
.disableMute{
    opacity: 0.5;
    pointer-events: none;
}