#modulator-control.checked {
	background: no-repeat url('images/modulator.png');
	position: relative;
}

#modulator-control {
	background: no-repeat url('images/no-modulator.png');
	position: relative;
}

#context-menu .phone {
	background-image: url('images/phone.svg');
}

#context-menu .webcam {
	background-image: url('images/webcam.svg');
}

#context-menu .groupc,
#context-menu .groupc_add {
	background-image: url('images/groupc.svg');
}

#context-menu .groupcv {
	background-image: url('images/groupcv.svg');
}

#calls-videos {
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 0; 
	position: relative;
	transition: all 1s;
	width: 100%;
}

.calls-remoteView {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	width: 100%;
	background-image: url('images/bg.svg');
	background-repeat: no-repeat;
	background-position: center center;
	/*background-attachment: fixed;*/
	-webkit-background-size: auto, cover;
	-moz-background-size: auto, cover;
	-o-background-size: auto, cover;
	background-size: auto, cover;
}

.calls-remoteView > video,
#calls-remoteDisplay {
	position: relative;
	height: 75vh;
	width: 100%;
	min-height: 250px;
	opacity: 0;
	transition: opacity 1s;
}

.calls-remoteView > video.active,
#calls-remoteDisplay.active {
	border: 1px solid #eee;
	opacity: 1;
	z-index: 1;
}

#calls-localView {
	border: 1px solid gray;
	bottom: 20px;
	right: 20px;
	max-height: 17%;
	max-width: 17%;
	opacity: 0;
	position: absolute;
	transition: opacity 1s;
}

#calls-localView.active {
	opacity: 1;
	z-index: 2;
}

#calls-info {
	top: 0.5em;
	left: 50%;
	margin: auto;
	font-size: 12px;
	text-align: center;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s;
	padding: 0.5em;
	border-radius: 5px;
	background: #dcdcdc linear-gradient(#fff, #dcdcdc);
	box-shadow: 0 0 0 1px #aaa inset, 0 1px 1px #aaa;
	z-index: 4;
}

#calls-info.active {
	opacity: 1;
}

.hidden {
	display: none;
}

#calls-icons {
	bottom: 5%;
	left: 6%;
	position: absolute;
	z-index: 3;
}

circle {
	fill: #666;
	fill-opacity: 0.6;
}

svg.on circle {
	fill-opacity: 0;
}

path.on {
	display: none;
}

path.off {
	display: block;
}

svg.on path.on {
	display: block;
}

svg.on path.off {
	display: none;
}

svg {
	box-shadow: 2px 2px 24px #444;
	border-radius: 48px;
	display: block;
	margin: 0 0 3vh 0;
	transform: translateX(calc(-6vw - 96px));
	transition: all .1s;
	transition-timing-function: ease-in-out;
	cursor: pointer;
}

svg:hover {
	box-shadow: 4px 4px 48px #666;
}

#calls-icons.active svg {
	transform: translateX(0);
}

#mute-audio {
	transition: 40ms;
}

#mute-audio:hover,
#mute-audio.on {
	background: #407cf7;
}

#mute-audio:hover circle {
	fill: #407cf7;
}

#mute-video {
	transition: 120ms;
}

#mute-video:hover,
#mute-video.on {
	background: #407cf7;
}

#mute-video:hover circle {
	fill: #407cf7;
}

#display {
	transition: 120ms;
}

#display:hover,
#display.on {
	background: #407cf7;
}

#display:hover circle {
	fill: #407cf7;
}

#hangup {
	transition: 360ms;
}

#hangup:hover {
	background: #dd2c00;
}
#hangup:hover circle {
	fill: #dd2c00;
}

.ui-dialog {
	font-size: 12px !important;
}

.ui-dialog .ui-dialog-titlebar-close {
	width: 16px !important;
	height: 16px !important;
}

.piece-417db {
	position: relative;
	pointer-events: none;
	z-index: 101 !important;
}

#chess-content {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

#context-menu .chess {
	background-image: url('images/chess.svg');
}