/* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
.room-block {

	&, .room-container {
		width: 100%;
		height: 100%;
	}
	.room-container {
		.user-video {
			display: inline-block !important;
			max-width: 95vw;
			max-height: 95vh;

			.ui-resizable-se {
				position: absolute;
				display: inline-block;
				width: 16px;
				height: 16px;
				right: 0px;
				bottom: 0px;
				overflow: hidden;
				background: none;

				&:before {
					content: ' ';
					width: 32px;
					height: 32px;
					transform: rotate(-45deg);
					position: absolute;
					top: 0;
					right: 0;
					right: -21px;
					bottom: -16px;
					background: repeating-linear-gradient(
						var(--bs-dark), var(--bs-dark) 3px, transparent 3px, transparent 5px
					);
				}
			}
			.header {
				height: 20px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;

				.ui-dialog-title {
					padding-inline-start: 5px;
				}
			}
			.video {
				min-width: 40px;
				min-height: 30px;
				overflow: hidden;
				position: relative;

				&.audio-only {
					background-repeat: no-repeat;
					background-size: auto 100%;
					background-position: center;
				}
			}
		}
		.btn.shared {
			display: none;
		}
	}
	.event-details.modal {
		position: absolute;
		width: 300px;
		height: 300px;
		top: 30px;
		z-index: 3050;

		.modal-dialog {
			padding: 0;
			margin: 0;
		}
	}
	.sb-wb {
		height: calc(100% - var(--room-menu-height));
		width: calc(100% - var(--chat-width) - var(--buffer-size));
		display: inline-block;
		position: relative;
	}
	.sidebar {
		min-width: 155px;
		width: var(--sidebar-width);
		position: absolute;
		height: 100%;
		top: 0;

		.tab {
			padding: 5px 0 0 0;
			width: 100%;
			overflow: hidden;

			i {
				font-size: 2.0em;
				vertical-align: top;
			}
			.label {
				width: calc((var(--sidebar-width) - 50px) / 2 - 42px);
				display: inline-block;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&.user {
				padding-inline-end: 15px;

				.label {
					width: calc((var(--sidebar-width) - 50px) / 2 - 80px);
				}
			}
			&.om-icon.big {
				line-height: 30px;
				padding-inline-start: 10px;
				position: relative;
			}
			.badge {
				position: absolute;
				bottom: 0;
				margin-inline-end: 2px;
			}
		}
		#busy-indicator {
			margin: 8px;
		}
		.icon-undock, .icon-dock {
			font-size: 1.2em;
			padding-top: 3px;
		}
		.icon-dock:before {
			content: "\f101";
		}
		.icon-undock::before {
			content: "\f100";
		}
		&.closed .tab-content .tab-pane {
			display: none;
		}
	}
	.wait-moder {
		position: fixed;
		bottom: 30px;
		right: 30px;

		strong {
			display: block;
			padding-bottom: 20px;
		}
	}
	&.narrow .sidebar {
		.user-list .user.name {
			display: none;
		}
		.tab.om-icon.big {
			padding-inline-start: 6px;
			padding-inline-end: 0;
		}
	}
}
.room-block .sidebar .ui-resizable-handle, #chatPanel.room .ui-resizable-handle {
	width: 4px;
	background-color: #f3f3f4;
	border: 1px solid #dedee0;

	&:hover {
		background-color: #b6bdca;
		border-color: #bebec3;
	}
}
#room-sidebar-tabs {
	height: calc(100% - var(--activities-height));

	.nav.nav-tabs {
		flex-wrap: nowrap;
		padding-inline-end: 40px;
		gap: 5px;

		.nav-item {
			flex-direction: column;
			flex-grow: 1;
		}
	}
	&.tabs .btn-dock {
		display: inline-block;
		list-style: none;
		list-style-type: none;
		padding: 0 .3em;
		border-bottom-width: inherit;
		height: 25px;
		position: absolute;
		top: 5px;
		margin-inline-end: 5px;
	}
	.tab-content {
		height: calc(100% - 44px);

		.tab-pane {
			height: 100%;
		}
	}
}
#room-sidebar-tab-users .header {
	padding-inline-start: 5px;
	height: var(--room-sidebar-header-height);

	.om-icon {
		width: 34px;
		height: 34px;

		&::before {
			font-size: 2.0em;
			line-height: 1.2em;
		}
		i {
			font-size: 1.2em;
		}
	}
}
.user-list {
	overflow-y: auto;
	height: calc(100% - var(--room-sidebar-header-height) - var(--buffer-size));

	.user.name {
		line-height: 18px;
		height: 18px;
		padding: 0;
		padding-inline-start: 64px;
		margin-inline-end: 20px;
		overflow: hidden;
	}
	.user.entry {
		min-height: 90px;
		padding-inline-start: 5px;
		padding-top: 5px;
		background-size: 80px;
		background-repeat: no-repeat;
		background-position: var(--background-start) 2px;
		position: relative;

		.video-container {
			&, video.audio-only {
				width: 80px;
				height: 80px;
			}
			.footer {
				display: none !important;
			}
		}
		&:hover {
			background-size: 55px;

			.user.actions {
				display: block;
				padding: 0;
				margin-top: 45px;
			}
			.video-container {
				position: absolute;
				top: 0;
				left: 0;

				&, .video.audio-only {
					width: 50px;
					height: 50px;
				}
			}
		}
		.user.actions {
			display: none;
		}
		.kick i {
			font-size: 1.5em;
		}
		&.current {
			font-weight: bold;
			background-color: var(--bs-light);
		}
		.om-icon {
			&.user-status {
				border-radius: 50%;

				&.user {
					background-color: var(--bs-success);
				}
				&.wb {
					background-color: var(--bs-warning);
				}
				&.mod {
					background-color: var(--bs-danger);
				}
			}
			&.audio-activity {
				position: absolute;
				bottom: 2px;
				right: 2px;
			}
		}
	}
}
.typing-activity {
	display: none;
	width: 20px;
	position: relative;

	i {
		position: absolute;
		left: 0;
		animation: typing-ani 2s infinite;
		color: var(--bs-primary);
	}
	&.typing {
		display: inline-block;
	}
}
@keyframes typing-ani {
	0% {
		left: 0;
	}
	50% {
		left: 10px;
	}
	100% {
		left: 0;
	}
}
.om-icon {
	&.disabled {
		filter: grayscale(100%);
		pointer-events: none;
		opacity: .2;
	}
	&.ulist-small {
		width: 14px;
		height: 14px;
		min-height: 14px;
		margin-inline-end: 2px;
		margin-left: unset;
	}
	&.audio-activity {
		opacity: 0.2;
		border-radius: 50%;
		background-color: var(--bs-success);
		border: 1px solid var(--bs-gray-dark);

		&.speaking {
			opacity: 1;
		}
	}
	&.volume-control {
		a {
			&:hover {
				text-decoration: none;
			}
			&.volume-on::before {
				content: "\f027";
				font-size: 1.2em;
				color: var(--bs-secondary);
			}
			&.volume-off::before {
				content: "\f6a9";
				font-size: 1.2em;
				color: var(--bs-danger);
			}
		}
		.dropdown-menu {
			width: 20px;
			min-width: 20px;
			border-radius: 0;
			border: 0;
			box-shadow: initial;
			background-color: transparent;

			.slider {
				border-radius: 0;
				background-color: white;
				border-color: var(--bs-secondary);

				.ui-slider-range {
					border-radius: 0;
					background-color: var(--bs-light);
				}
				.handle {
					border-radius: 0;
					background-color: var(--bs-light);
					border-color: var(--bs-secondary);
					color: var(--bs-secondary);
				}
			}
		}
	}
	&.right {
		i {
			position: absolute;
			bottom: 1px;
			right: 1px;
			font-size: .6em;

			&::before {
				color: var(--bs-success);
				content: "\f055";
			}
		}
		&.granted i::before {
			color: var(--bs-danger);
			content: "\f056";
		}
		&.moderator::before {
			content: "\f007";
		}
		&.presenter::before {
			content: "\f0d0";
		}
		&.wb::before {
			content: "\f303";
		}
		&.screen-share::before {
			content: "\f108";
		}
		&.remote-control::before {
			content: "\f8cc";
		}
		&.audio::before {
			content: "\f130";
		}
		&.camera::before {
			content: '\f03d';
		}
		&.mute-others::before {
			content: '\f6a9';
		}
	}
	&.settings::before {
		content: '\f013';
	}
	&.activity {
		&.cam, &.mic {
			display: none;
		}
		&.cam {
			&.enabled::before {
				content: '\f03d';
				color: var(--bs-success);
			}
			&::before {
				content: '\f4e2';
				color: var(--bs-warning);
			}
		}
		&.mic {
			&.enabled::before {
				content: '\f130';
				color: var(--bs-success);
			}
			&::before {
				content: '\f131';
				color: var(--bs-warning);
			}
			&.push-to-talk::before {
				color: var(--bs-info);
			}
		}
	}
}
.user-video .ui-dialog-titlebar
, .sharer .ui-dialog-titlebar
, .wb-tool-settings .ui-dialog-titlebar
{
	background-color: var(--bs-white);
}
.user-video {
	.om-icon.volume-control, .btn.btn-refresh, .btn.btn-toggle, .btn.btn-wclose {
		width: 20px;
		height: 20px;
	}
	.om-icon.volume-control {
		border-radius: 0.2rem;
		border: 1px solid var(--bs-secondary);
		margin-top: 3px;
		padding: 1px;
	}
	.btn.btn-refresh, .btn.btn-toggle, .btn.btn-wclose {
		padding: 0;
	}
	.btn.btn-toggle {
		i::before {
			content: '\f2d1';
		}
		&.minimized i::before {
			content: '\f2d2';
		}
	}
	.buttonpane {
		background-color: var(--bs-white);
	}
	&.ui-dialog {
		&.video.user-speaks {
			box-shadow: 3px 3px 4px green;
		}
		.ui-dialog-content {
			height: calc(100% - var(--vdialog-titlebar-height)) !important;
			width: 100% !important;

			.video {
				height: calc(100% - var(--vdialog-footer-height)) !important;
				width: 100%  !important;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 100%;

				video, audio {
					height: 100% !important;
					width: 100% !important;
				}
			}
			.footer {
				height: var(--vdialog-footer-height) !important;
			}
		}
	}
}
.dropdown-menu.video.volume {
	&, li {
		width: 20px;
		min-width: 20px;
		border-radius: 0;
		border: 0;
		box-shadow: initial;
		left: 70px;
		top: -50px;
		background-color: transparent;
	}
}
.input .select2-container {
	max-height: 100px;
	overflow-y: auto;
}
.sip .button-row {
	text-align: center;
	margin: 5px;
}
.sip .button-row input.sip-number {
	width: 130px;
}
.sip .button-row #sip-dialer-btn-erase {
	margin-inline-start: 5px;
}

/************ VIDEO **************/
.mic-on {
	background-color: var(--bs-warning);
}
.ui-dialog {
	&.video, &.sharer, &.video .ui-dialog-titlebar, &.video .ui-dialog-content {
		padding: 0;
	}
	&.video {
		.ui-dialog-content {
			overflow: hidden;
		}
		.ui-dialog-titlebar {
			padding-inline-start: 10px;
			border: none;
		}
	}
}
.sharer .ui-dialog-titlebar-close {
	position: absolute;
	top: 20px
}
.video-container {
	.level-meter {
		display: inline-block;
		position: absolute;
		bottom: 5px;
		left: 5px;
		width: 10px;
	}
	.video .level-meter {
		height: calc(100% - 10px) !important;
	}
}
#video-settings {
	padding: 5px 10px;

	.modal-dialog {
		max-width: 640px;
	}
	.title {
		font-weight: bold;
	}
	.sett-container {
		position: relative;
		min-height: 250px;

		.opt-block {
			width: 300px;
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
		}
		.vid-block {
			min-width: 300px;
			padding-inline-start: 305px;

			.video-conainer {
				overflow: auto;
				max-height: 300px;
				position: relative;
			}
			.timer {
				float: inline-start;
				padding: 2px 4px;
			}
		}
		.sett-row {
			padding-top: 10px;

			.warn {
				float: inline-end;
				margin-inline-end: .3em;
			}
			&.right {
				text-align: var(--text-align-end);
			}
		}
	}
}
.video {
	&:hover .mute-others.enabled {
		display: block;
	}
	.mute-others {
		position: absolute;
		top: calc(50% - 32px);
		left: calc(50% - 32px);
		width: 64px;
		height: 64px;
		background-size: 64px;
		z-index: 2;
		display: none;

		&::before {
			content: '\f3c9';
			color: var(--bs-warning);
			line-height: 1em;
			font-size: 2.5em;
		}
	}
	&.audio-only .mute-others {
		top: calc(50% - 16px);
		left: calc(50% - 10px);
		width: 32px;
		height: 32px;
	}
}
@import "interview";
@import "polls";

#sharer .alert {
	display: none;
}
.sharer {
	.share-start-stop i::before {
		content: '\f03e';
	}
	.record-start-stop i::before {
		content: '\f111';
	}
	.stop i::before {
		content: '\f28d';
	}
}
@media screen and (max-width: 1280px) {
	.room-block .sb-wb .sidebar .tab.om-icon.big {
		padding-inline-end: 0;
	}
	.room-block .sb-wb .sidebar .user-list .user.name {
		display: none;
	}
	.room-block.big .sb-wb .sidebar .user-list .user.name {
		display: block;
	}
}

html[dir="rtl"] .main.room #chatPanel {
	right: initial;
	left: 0px;
}
