#videos {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.videoContainer,
#app-content.screensharing .videoContainer {
	position: relative;
	width: 100%;
	padding: 0 2%;
	-webkit-box-flex: auto;
	-moz-box-flex: auto;
	-webkit-flex: auto;
	-ms-flex: auto;
	flex: auto;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.videoContainer.hidden,
#app-content.screensharing .videoContainer.hidden {
	display: none;
}

#app-content.screensharing .videoContainer {
	max-height: 200px;
}

video {
	z-index: 0;
	max-height: 100%;
	/* default filter for slightly better look */
	-webkit-filter: contrast(1.1) saturate(1.1) sepia(.1);
	filter: contrast(1.1) saturate(1.1) sepia(.1);
	vertical-align: top; /* fix white line below video */
}

#app-content.screensharing .videoContainer video {
	max-height: 200px;
	background-color: transparent;
	box-shadow: none;
}

#screens video {
	width: 100%;
	-webkit-filter: none;
	filter: none;
}

#videos .videoContainer.not-connected {
	video,
	.avatar {
		opacity: 0.5;
	}
}

#videos .videoContainer:not(.promoted) video {
	max-height: 200px;
	max-width: 100%;
	background-color: transparent;
	border-radius: $border-radius $border-radius 0 0;
	box-shadow: 0 0 15px $color-box-shadow;
}

#videos .videoContainer .avatar {
	box-shadow: 0 0 15px $color-box-shadow;
}

.participants-1 #videos .videoContainer video,
.participants-2 #videos .videoContainer video {
	padding: 0;
}

.videoContainer .avatar-container {
	display: flex;
	margin-bottom: 50px;
}
.videoContainer .avatar-container.hidden {
	display: none;
}
.videoContainer .avatar-container .avatar {
	display: inline-block;
}
.videoContainer.promoted .avatar-container {
	top: 30%;
}
.videoContainer.promoted .avatar-container + .nameIndicator {
	display: none;
}

.videoContainer.promoted .mediaIndicator {
	display: none !important;
}




#shareRoomContainer {
	position: relative;
}
#shareRoomInput {
	width: 250px;
	padding-right: 32px;
	text-overflow: ellipsis;
}
#shareRoomClipboardButton {
	position: absolute;
	right: 0;
	padding: 18px;
	background-size: 16px !important;
	height: 16px !important;
	width: 16px !important;
	margin: 0 !important;
	opacity: .8 !important;
}

.participants-1:not(.screensharing) #emptycontent {
	display: block !important;
}

#screensharing-menu {
	bottom: 44px;
	left: calc(50% - 40px);
	right: initial;
	color: initial;
	text-shadow: initial;
	font-size: 13px;
}

#screensharing-menu.app-navigation-entry-menu:after {
	top: 100%;
	left: calc(50% - 5px);
	border-top-color: #fff;
	border-bottom-color: transparent;
}




/* big speaker video */
.participants-1 .videoContainer,
.participants-2 .videoContainer,
.videoContainer.promoted {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: 1;
}
.videoContainer.promoted video,
.participants-2 .videoContainer:not(.videoView) video {
	position: absolute;
	width: initial;
	height: 100%;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}

/* own video */
.participants-1 .videoView,
.participants-2 .videoView {
	position: absolute;
	width: 22%;
	min-width: 200px;
	overflow:visible;
	right: 0;
	bottom: 0;
	top: initial;
	left: initial;
	z-index: 10;
}
@media only screen and (max-width: 768px) {
	.participants-1 .videoView,
	.participants-2 .videoView {
		max-height: 35%;
	}
}
.participants-1 .videoView video,
.participants-2 .videoView video {
	position: absolute;
	max-height: 100% !important;
	bottom: 0;
	border-top-right-radius: 3px;
	right: 0;
}

.videoContainer.promoted,
#app-content.incall,
#app-content.screensharing {
	background-color: #000;
}




#app-content.screensharing #screens {
	position: absolute;
	width: 100%;
	height: calc(100% - 200px);
	top: 0;
	overflow-y: scroll;
	background-color: transparent;
}

#app-content.screensharing .screenContainer {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}




.nameIndicator {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 12px;
	color: #fff;
	text-shadow: 3px 3px 10px rgba(0, 0, 0, .5), 3px -3px 10px rgba(0, 0, 0, .5), -3px 3px 10px rgba(0, 0, 0, .5), -3px -3px 10px rgba(0, 0, 0, .5);
	width: 100%;
	text-align: center;
	font-size: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.videoView .nameIndicator {
	padding: 0;
	overflow: visible;
}

.participants-1 .videoView .nameIndicator,
.participants-2 .videoView .nameIndicator {
	left: initial;
	right: 0;
}

.participants-1 .videoView .avatar-container,
.participants-2 .videoView .avatar-container {
	left: initial;
	right: 0;
}

/* ellipsize name in 1on1 calls */
.participants-2 .videoContainer.promoted + .videoContainer-dummy .nameIndicator {
	padding: 12px 35%;
}




.nameIndicator button {
	background-color: transparent;
	border: none;
	margin: 0;
	width: 44px;
	height: 44px;
}

.nameIndicator button {
	background-size: 24px;
}

.nameIndicator button.audio-disabled,
.nameIndicator button.video-disabled,
.nameIndicator button.screensharing-disabled {
	opacity: .7;
}

.nameIndicator button.audio-disabled:not(.no-audio-available),
.nameIndicator button.video-disabled:not(.no-video-available),
.nameIndicator button.screensharing-disabled {
	&:hover,
	&:focus {
		opacity: 1;
	}
}

.nameIndicator button.no-audio-available,
.nameIndicator button.no-video-available {
	opacity: .7;
	cursor: not-allowed;
}

.nameIndicator button.no-audio-available:active,
.nameIndicator button.no-video-available:active {
	background-color: transparent;
}

.mediaIndicator {
	position: absolute;
	width: 100%;
	bottom: 44px;
	left: 0;
	background-size: 22px;
	text-align: center;
}

.muteIndicator,
.hideRemoteVideo,
.screensharingIndicator,
.iceFailedIndicator {
	position: relative;
	display: inline-block;
	background-color: transparent !important;
	border: none;
	width: 32px;
	height: 32px;
	background-size: 22px;

	&.hidden {
		display: none;
	}
}

.muteIndicator.audio-on,
.screensharingIndicator.screen-off,
.iceFailedIndicator.not-failed {
	display: none;
}

.muteIndicator.audio-off,
.hideRemoteVideo.icon-video-off {
	opacity: .7;
}

.hideRemoteVideo.icon-video-off {
	&:hover,
	&:focus {
		opacity: 1;
	}
}

.iceFailedIndicator {
	opacity: .8 !important;
}





#app-content:not(.incall):not(.screensharing) .force-icon-white-in-call,
#call-container:not(.incall):not(.screensharing) .force-icon-white-in-call {
	/*
	 * Also force the white icons, when the video of the local participant is shown,
	 * because the black icons are not visible on videos, especially when your camera is covered.
	 */
	&#hideVideo:not(.local-video-disabled) {
		&.icon-video {
			background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
		}
		&.icon-video-off {
			background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
		}
	}
	&#mute:not(.local-video-disabled) {
		&.icon-audio {
			background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
		}
		&.icon-audio-off {
			background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
			filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
		}
	}
	&#screensharing-button:not(.local-video-disabled) {
		background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
		filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
	}
}

.incall .force-icon-white-in-call,
.screensharing .force-icon-white-in-call {
	/*
	 * Force the white icon, independent from white/dark mode selection,
	 * because those icons are presented on our black calling-screen.
	 */
	&.icon-audio {
		background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
	}
	&.icon-audio-off {
		background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
	}
	&.icon-video {
		background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
	}
	&.icon-video-off {
		background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
	}
	&.icon-screen {
		background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true));
	}
	&.icon-screen-off {
		background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
	}
	&.icon-error {
		background-image: url(icon-color-path('error', 'actions', 'fff', 1, true));
	}

	/* ".force-icon-white-in-call" can be combined with ".icon-shadow" just like
	 * ".icon-white". */
	&.icon-shadow {
		filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
	}
}





#videos .videoContainer.speaking:not(.videoView) .nameIndicator,
#videos .videoContainer.videoView.speaking .nameIndicator .icon-audio {
	animation: pulse 1s;
	animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: .3;
	}
	100% {
		opacity: 1;
	}
}



#muteWrapper {
	display: inline-block;

	/* Make the wrapper the positioning context of the volume indicator. */
	position: relative;
}

#muteWrapper .volume-indicator {
	position: absolute;

	width: 3px;
	right: 0px;

	/* The button height is 44px; the volume indicator button is 36px at
	 * maximum, but its value will be changed based on the current volume; the
	 * height change will reveal more or less of the gradient, which has
	 * absolute dimensions and thus does not change when the height changes. */
	height: 36px;
	bottom: 4px;

	background: linear-gradient(0deg, green, yellow, red 36px);

	opacity: 0.7;
}

#muteWrapper .icon-audio-off + .volume-indicator {
	background: linear-gradient(0deg, gray, white 36px);
}
