html, body {
	height: 100%;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.text-shadow {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.mirrored {
	transform: scale(-1, 1);
	transform-origin: 50% 50%;
}

.modal-open .modal {
	overflow: hidden;
}

/* main areas */

#usked-main-panel {
	position: absolute;
	left: 0;
	right: calc(256px + 3rem);
	top: 0;
	bottom: 3rem;
}

#usked-main-panel.usked-expanded {
	right: 3rem;
}

#usked-main-panel.usked-no-chat-bar {
	bottom: 0;
}

#usked-chat-bar {
	position: absolute;
	left: 0;
	right: calc(256px + 3rem);
	bottom: 0;
	height: 3rem;
}

#usked-chat-bar.usked-expanded {
	right: 3rem;
}

#usked-sidebar {
	position: absolute;
	right: -256px;
	top: 0;
	bottom: 0;
	width: calc(256px + 3rem);
}

#usked-sidebar.usked-expanded {
	right: 0;
}

/* sidebar buttons */

.btn:focus {
	box-shadow: none !important;
}

#usked-sidebar-buttons {
	width: 3rem;
}

#usked-sidebar-main {
	width: 256px;
}

#usked-sidebar-buttons .btn {
	border-radius: 0 !important;
	border: none !important;
}

#usked-sidebar-buttons .btn-primary {
	background-color: transparent;
}

#usked-sidebar-buttons.usked-is-editing-layout .usked-hide-when-editing-layout {
	display: none !important;
}

/* chat bar */

#usked-chat-bar-input {
	border: none;
}

/* edit layout */

#usked-edit-layout {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}

#usked-edit-layout .usked-edit-layout-grid-point {
	position: absolute;
	width: 16px;
	height: 16px;
}

.usked-edit-layout-box {
	position: absolute;
	border: 1px solid #000;
	background-color: rgba(128, 128, 128, 1);
	color: #fff;
	font-size: 1.5rem;
	padding: 0.5rem 1rem;
}

.usked-edit-layout-box-selected {
	border: 2px solid #f00;
}

.usked-edit-layout-box-grip {
	position: absolute;
	left: 33%;
	top: 33%;
	width: 33%;
	height: 33%;
	cursor: move;
}

.usked-edit-layout-box-grip-nw {
	position: absolute;
	left: 0;
	top: 0;
	width: 33%;
	height: 33%;
	cursor: nw-resize;
}

.usked-edit-layout-box-grip-n {
	position: absolute;
	left: 33%;
	top: 0;
	width: 33%;
	height: 33%;
	cursor: n-resize;
}

.usked-edit-layout-box-grip-ne {
	position: absolute;
	right: 0;
	top: 0;
	width: 33%;
	height: 33%;
	cursor: ne-resize;
}

.usked-edit-layout-box-grip-e {
	position: absolute;
	right: 0;
	top: 33%;
	width: 33%;
	height: 33%;
	cursor: e-resize;
}

.usked-edit-layout-box-grip-se {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 33%;
	height: 33%;
	cursor: se-resize;
}

.usked-edit-layout-box-grip-s {
	position: absolute;
	left: 33%;
	bottom: 0;
	width: 33%;
	height: 33%;
	cursor: s-resize;
}

.usked-edit-layout-box-grip-sw {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 33%;
	height: 33%;
	cursor: sw-resize;
}

.usked-edit-layout-box-grip-w {
	position: absolute;
	left: 0;
	top: 33%;
	width: 33%;
	height: 33%;
	cursor: w-resize;
}

#usked-edit-layout-toast {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

/* */

.usked-expanded #usked-subscribed-video-stream-list {
	right: 0;
}

#usked-subscribed-video-stream-list .usked-logo {
	opacity: 20%;
}

#usked-subscribed-video-stream-list.usked-object-fit-cover .usked-subscribed-video-stream .usked-subscribed-video-track video {
	object-fit: cover;
}

#usked-subscribed-video-stream-list.usked-object-fit-contain .usked-subscribed-video-stream .usked-subscribed-video-track video {
	object-fit: contain;
}

.usked-subscribed-video-stream.usked-screen-share video {
	object-fit: contain !important;
}

#usked-subscribed-video-stream-list.usked-object-fit-contain .usked-subscribed-video-stream {
	border: 1px solid #555;
}

.usked-subscribed-video-stream.usked-screen-share {
	border: none !important;
}

.usked-subscribed-video-stream .usked-subscribed-video-track video {
	width: 100%;
	height: 100%;
}

#usked-subscribed-video-stream-list.usked-view-hero .usked-subscribed-video-stream:not(:first-child) .usked-label-parent {
	display: none !important;
}

#usked-subscribed-video-stream-list.usked-view-hero .usked-subscribed-video-stream:not(:first-child) .usked-signal-parent {
	display: none !important;
}

#usked-subscribed-chat-stream {
	overflow-y: scroll;
	border: none !important;
}

#usked-subscribed-video-stream-list.usked-view-hero #usked-subscribed-chat-stream:not(:first-child) {
	font-size: 0.75rem;
}

#usked-self-view {
	position: relative;
	height: 144px;
	box-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
}

#usked-self-view-screen-track video {
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	height: 100%;
	object-fit: contain;
}

#usked-self-view-webcam-track video {
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	height: 100%;
	object-fit: cover;
}

#usked-self-view.usked-screen-shared #usked-self-view-webcam-track video {
	width: 40%;
	height: 40%;
	left: 0.5rem;
	top: 0.5rem;
	border: 1px solid #222;
	border-radius: 0.5rem;
}

.usked-signal-parent {
	position: absolute;
	left: 1rem;
	top: 1rem;
}

.usked-label-parent {
	position: absolute;
	bottom: 0;
}

#usked-sidebar-participant-list {
	overflow-y: auto;
}

.usked-silhouette-parent img {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
	height: 90%;
	object-fit: contain;
}

#usked-self-view.usked-screen-shared .usked-silhouette-parent {
	position: relative;
	width: 40% !important;
	height: 40% !important;
	left: 0.5rem;
	top: 0.5rem;
	border: 1px solid #222;
	border-radius: 0.5rem;
	box-shadow: 0 0 9px rgba(0, 0, 0, 1);
}

.usked-subscribed-video-stream .usked-speech-to-text {
	overflow: hidden;
	position: absolute;
	bottom: 1rem;
	height: 6rem;
	line-height: 3rem;
	font-size: 2rem;
}

#usked-self-view-speech-to-text {
	overflow: hidden;
	position: absolute;
	bottom: 1rem;
	height: 3rem;
	line-height: 1.5rem;
	font-size: 1rem;
}

@media only screen and (max-height: 500px) {
	.usked-hide-on-small-screens {
		display: none !important;
	}

	#usked-self-view {
		height: 160px;
	}

	#usked-main-panel {
		right: calc(160px + 3rem);
	}

	#usked-chat-bar {
		right: calc(160px + 3rem);
	}

	#usked-sidebar {
		right: -160px;
		width: calc(160px + 3rem);
	}
}

body.usked-hide-labels .usked-label-parent {
	display: none !important;
}