.c-w-icon-video-call {
background: url('icons/video_call.svg');
background-size: 16px 16px;
filter: var(--plugin-p-i-c);
}
.c-w-icon-audio-call {
background: url('icons/audio_call.svg');
background-size: 16px 16px;
filter: var(--plugin-p-i-c);
}
#video-call {
position: fixed;
z-index: 1001;
top: 50%;
left: 50%;
margin: -75px 0 0 -150px;
width: 300px;
height: 150px;
display: none;
border-radius:3px;
-webkit-border-radius:3px;
-o-border-radius:3px;
}
#video-call .modal-container {
	display: inline-block;
	width: 100%;
	background-color: #ffffff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
	border: 1px solid #BFBFBF;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
#video-call .modal-container .modal-inner {
	display: inline-block;
	width: 100%; 
}

#video-call-type {
	text-transform: capitalize;
	display: inline-block;
	width: 100%;
	padding: 10px;
	background-color: #fafafa;
	border-bottom: 1px solid #efefef;
}
#video-call-content {
	padding: 10px;
	display: inline-block;
	width: 100%;
}
.call_u_details {
-webkit-flex-direction: column; 
-ms-flex-direction: column; 
flex-direction: row;
}
.caller_box_avatar {
	position: relative;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
}
.video-call-modal-image {
width: 65px;
float: left;
}
.video-call-modal-image img {
width: 65px;
}
.video-call-modal-name {
	padding-left: 15px;
	box-sizing: border-box;
	font-weight: 600;
	font-size: 16px;
	line-height: 65px;
	color: #444444;
}
#m-v-c-buttons {
	display: inline-block;
	width: 100%;
	padding: 10px;
	background-color: #fafafa;
	border-top: 1px solid #efefef;
}
.modal-btn.button-active a {
	color: #ffffff;
}
#video-call-decline-btn {
	float: right;
}
.call-error-chat {
font-size: 12px;
width: 100%;
float: left;
box-sizing: border-box;
padding-bottom: 5px;
color: #ff4e4e;
}
.call-error {
color: #ff7779;
}
#video-call-modal-background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.15);
position: fixed;
overflow: auto;
left: 0;
top: 0;
display: none;
z-index: 1000;
}
/* Call Window */
#local-container video {
width: 100%;
transform: rotateY(180deg);
background: #000;
}
#camera-button, #local-container {
display: none;	
}
#partner-container {
display: table-cell;
vertical-align: middle;
}
#partner-content {
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    color: #FFF;
    width: 100%;
    max-width: 300px;
}
#partner-image {
    margin-bottom: 5px;
    width: 100%;
    max-width: 200px;
    margin: 0px auto;
    border-radius: 50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	overflow:hidden;
}
#partner-image img { 
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}
#partner-name {
font-weight: bold;
margin-bottom: 10px;
margin-top: 10px;
}
#call-time {

}
.video-call-container {
width: 100%;
display: inline-block;
bottom: 0;
right: 0;
left: 0;
top: 0;
position: absolute;
background: #000;
}
#remote-container {
background: #000;
z-index: 1;
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#remote-container video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
z-index: 2;
background: #000;
}
#local-container {
width: 200px;
min-height: 100px;
z-index: 3;
right: 10px;
position: absolute;
bottom: 11px;
border: #FFF 3px solid;
background: #000;
}
#local-container video {
width: 100%;
z-index: 3;
}
.video-call-buttons-container {
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -200px; 
width:100%;
height: 80px;
z-index: 4;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.audio-buttons-container {
width: 100%;
margin-left: -141px;
}
.video-call-button {
border-radius: 10px;
width: 50px;
height: 50px;
background: #FFF;
margin: 0 10px;
float: left;
cursor: pointer;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}
.video-call-button-end {
background: #d23333 url('icons/call_end.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-end:hover {
background: #ff5757 url('icons/call_end.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-max {
background: #666  url('icons/volume3.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-max:hover {
background: #999 url('icons/volume3.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-mute {
background: #666  url('icons/volume4.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-mute:hover {
background: #999 url('icons/volume4.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-low {
background: #666  url('icons/volume1.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-low:hover {
background: #999 url('icons/volume1.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-med {
background: #666  url('icons/volume2.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-volume-med:hover {
background: #999 url('icons/volume2.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-microphone {
background: #666  url('icons/microphone.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-microphone:hover {
background: #999  url('icons/microphone.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-microphone-muted {
background: #666 url('icons/microphone_mute.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-microphone-muted:hover {
background: #999 url('icons/microphone_mute.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-camera {
background: #666 url('icons/camera.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-camera:hover {
background: #999 url('icons/camera.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-camera-off {
background: #666 url('icons/camera_off.png') no-repeat center center;
background-size: 50%;
}
.video-call-button-camera-off:hover {
background: #999 url('icons/camera_off.png') no-repeat center center;
background-size: 50%;
}
@media only screen and (max-device-width: 600px), only screen and (device-width: 600px) and (device-height: 600px), only screen and (width: 600px) and (orientation: landscape), only screen and (device-width: 600px), only screen and (max-width: 600px) {
	.chat-video-call-btn {
	display: none;
	}
	#local-container {
	display: none !important;	
	}
	.video-call-buttons-container {
	margin-left: -140px;
	}
}