/* The standard layout defined in the server includes a fixed header with a
 * sticky sidebar. This causes the scroll bar for the main area to appear to the
 * right of the sidebar, which looks confusing for the chat. Thus that layout is
 * overridden with a full set of flex containers to cascade parent element
 * height to the main view to limit the vertical scroll bar only to it (same
 * thing done for the sidebar and the chat view). */
#body-user,
#body-public {
	display: flex;
	flex-direction: column;
}

#body-user #header,
#body-public #header {
	/* Override fixed position from server to include it in the flex layout */
	position: static;
	flex-shrink: 0;
}

#content {
	display: flex;
	flex-direction: row;
	overflow: hidden;

	flex-grow: 1;

	/* Override "min-height: 100%" and "padding-top: 50px" set in server, as the
	 * header is part of the flex layout and thus the whole body is not
	 * available for the content. */
	min-height: 0;
	padding-top: 0;

	/* Does not change anything in normal mode, but ensures that the element
	 * will stretch to the full width in full screen mode. */
	width: 100%;

	/* Override margin used in server, as the header is part of the flex layout
	 * and thus the content does not need to be pushed down. */
	margin-top: 0;
}

#app-content-wrapper {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	flex-grow: 1;

	@media (max-width: $breakpoint-mobile) {
		/* In narrow screens force the app content width to the full viewport
		 * width to prevent the app content from being compressed when the
		 * sidebar is shown. */
		width: 100vw;
	}
}

.contactsmenu-popover li > a > img {
	/* The app uses border-box sizing, so the size of the icon is the
	 * width/height plus the padding set by default in the server
	 * (16px + 11px*2). */
	width: 38px;
	height: 38px;
}



/**
 * Confirm icon inside input field.
 *
 * The input and the icon should be direct children of a wrapper with a relative
 * position. The input is expected to be as wide as its wrapper.
 *
 * It is assumed that the icon will have the standard width for buttons in
 * inputs of 34px. However, further adjustments may be needed for the input and
 * the padding depending on the context where they are used.
 *
 * The confirm icon can have a sibling loading icon to switch to (by hiding one
 * icon and showing the other) while the operation is in progress.
 */
input[type="text"],
input[type="password"] {
	padding-right: 34px;

	/* When the input is focused it is expected that pressing enter will confirm
	 * the input just like clicking on the icon would do. To hint this behaviour
	 * the opacity of the confirm icon is slightly increased in this case.
	 */
	&:focus + .icon-confirm:not(:disabled) {
		opacity: .6;
	}

	& + .icon-confirm {
		position: absolute;
		top: 0;
		/* Compensate for right margin of inputs set in the server. */
		right: 3px;

		/* Border and background color are removed to show only the icon inside
		* the input. */
		border: none;
		background-color: transparent;

		opacity: .3;

		&:hover:not(:disabled),
		&:focus:not(:disabled),
		&:active:not(:disabled) {
			opacity: 1;
		}

		+ .icon-loading-small {
			/* Mimic size set in server for confirm button. */
			width: 34px;
			height: 34px;
			padding: 7px 6px;
			margin-top: 3px;
			margin-bottom: 3px;

			position: absolute;
			top: 0;
			right: 3px;
		}
	}
}

.menuitem input[type="text"],
.menuitem input[type="password"] {
	& + .icon-confirm + .icon-loading-small {
		/* Mimic size set in server for inputs in menu items. */
		min-width: 44px;
		max-height: 40px;
		margin: 2px 0;

		/* Override padding set in server for icons in menu items. */
		padding: 7px 6px;
	}
}



/**
 * Sidebar styles
 */

#select2-drop {
	margin-top: -44px !important;
}
#oca-spreedme-add-room .select2-container {
	border-bottom: 1px solid var(--color-border);

	&.select2-container-active {
		border-bottom-color: var(--color-border-dark);
		border-right: 1px solid var(--color-border-dark);

		.select2-choice,
		.select2-default {
			color: var(--color-text-light) !important;
		}
	}
}
.oca-spreedme-add-person .select2-container {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);

	&.select2-container-active {
		border-color: var(--color-border-dark);

		.select2-choice,
		.select2-default {
			color: var(--color-text-light) !important;
		}
	}
}
#oca-spreedme-add-room .select2-container,
.oca-spreedme-add-person .select2-container {
	width: 100%;
	margin: 0 !important;
	padding: 9px;
}
#oca-spreedme-add-room .select2-container .select2-choice,
.oca-spreedme-add-person .select2-container .select2-choice {
	border: none;
	color: var(--color-text-maxcontrast) !important;
}
#oca-spreedme-add-room .select2-arrow,
.oca-spreedme-add-person .select2-arrow {
	display: none !important;
}
#select2-drop .select2-search input {
	padding: 13px 12px 13px 43px !important;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: none;
	background-image: none !important;
}
#select2-drop .select2-results .select2-result {
	padding: 0;
}

#app-navigation .app-navigation-entry-link > .avatar {
	position: absolute;
	left: 6px;
	top: 6px;
}

#app-navigation li > a:first-child img {
	width: 32px !important;
	height: 32px !important;
	margin: 0 !important;
}

.participantWithList .contactsmenu-popover {
	margin-left: 7px;
}

.select2-result .avatar.icon,
.atwho-view-ul .avatar.icon,
#app-navigation .app-navigation-entry-link .avatar.icon {
	border-radius: 50%;
	width: 32px;
	height: 32px;
	background-color: var(--color-background-darker);
}

.icon-file-white {
	@include icon-color('text', 'filetypes', $color-white, 1, true);
}

.icon-changelog {
	background-image: url('../img/changelog.svg');
}

#app-navigation .favorite-mark {
	position: absolute;
	/* 44px is the padding of the main entry link, and 16px the size (size, not
	 * background size) of the icon, both defined in the server. */
	left: calc(44px - 16px);
	line-height: 100%;

	.icon-favorite {
		display: inline-block;
		vertical-align: middle;

		/* Show favorite icon in yellow instead of default black. */
		@include icon-color('star-dark', 'actions', 'FC0', 1, true);
	}
}

#app-navigation .app-navigation-entry-utils-counter {
	overflow: hidden;
	text-align: right;
	font-size: 9pt;
	padding: 0 12px; /* Same padding as all li > a in the app-navigation */

	span {
		padding: 2px 5px;
		border-radius: 10px;
		font-weight: bold;
		background-color: var(--color-background-dark);
	}

	&.highlighted {
		padding-right: 0;
		text-align: center;
		width: 22px !important;

		span {
			background-color: var(--color-primary);
			color: var(--color-primary-text);
		}
	}
}

.hidden-important {
	display: none !important;
}

/**
 * Main view chat styles
 */
#app-content-wrapper {
	height: 100%;
}

#app-content-wrapper #chatView {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
}

/* The lateral padding is set for each child instead of for the chat view as a
   whole to prevent showing the scroll bar padded from the border of the chat
   view (which could be fixed by using a negative margin and a positive padding
   in the list of messages) and to ensure that the contacts menu is not clipped
   due to overflowing the chat view on its left (much harder to fix). */
#app-content-wrapper #chatView .newCommentRow {
	padding-left: 44px;
	padding-right: 44px;
}

#app-content-wrapper #chatView .comments {
	overflow-y: auto;

	/* Needed for proper calculation of comment positions in the scrolling
	   container (as otherwise the comment position is calculated with respect
	   to the closest ancestor with a relative position) */
	position: relative;

	padding-left: 44px;
	padding-right: 44px;
}


#app-content-wrapper #chatView .comments .wrapper-background,
#app-content-wrapper #chatView .comments .wrapper {
	/* Padding is not respected in the comment wrapper due to its absolute
	 * positioning, so it must be set through its position. */
	left: 44px;
	right: 44px;
}

/* Hide all siblings of the chat view when shown as the main view */
#app-content-wrapper #chatView ~ *:not(#video-fullscreen):not([id^=tooltip]) {
	display: none !important;
}

#emptycontent {
	position: absolute;
	z-index: 40;
}

#emptycontent-icon {
	width: 128px;
	margin: 0 auto;
	padding-bottom: 20px;
}


#app-content ~ #app-sidebar-wrapper .icon-menu-people,
#app-content .icon-fullscreen {
	opacity: .5;

	&:hover,
	&:focus {
		opacity: 1;
	}
}

#app-content.incall .force-icon-white-in-call,
#app-content.screensharing .force-icon-white-in-call,
#app-content.incall ~ #app-sidebar-wrapper .force-icon-white-in-call,
#app-content.screensharing ~ #app-sidebar-wrapper .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-menu-people {
		background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1, false));
	}
	&.icon-fullscreen {
		background-image: url(icon-color-path('fullscreen', '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));
	}
}

/* Use white icon for the app navigation toggle when in a call; this can not be
 * integrated above because the navigation toggle is created by the core and
 * does not include the Talk-specific "force-icon-white-in-call" CSS class. */
#app-content.incall .icon-menu,
#app-content.screensharing .icon-menu {
	background-image: url(icon-color-path('menu', 'actions', 'fff', 1, true));
	filter: drop-shadow(1px 1px 4px var(--color-box-shadow));
}

#video-fullscreen {
	position: absolute;
	top: 44px;
	right: 0;
	z-index: 90;
}

#video-fullscreen,
#app-sidebar-trigger {
	background-color: transparent;
	border: none;
	margin: 0 10px 0 0;
	width: 44px;
	height: 44px;
}



/* Fullscreen handling */

/* No switching between rooms in fullscreen, focus on the current call. */
#content:-webkit-full-screen #app-navigation-toggle {
	display: none !important;
}
#content:-moz-full-screen #app-navigation-toggle {
	display: none !important;
}
#content:-ms-fullscreen #app-navigation-toggle {
	display: none !important;
}
#content:fullscreen #app-navigation-toggle {
	display: none !important;
}

#content:-webkit-full-screen #app-navigation {
	display: none;
}
#content:-moz-full-screen #app-navigation {
	display: none;
}
#content:-ms-fullscreen #app-navigation {
	display: none;
}
#content:fullscreen #app-navigation {
	display: none;
}

#content:-webkit-full-screen #app-content {
	margin-left: 0;
}
#content:-moz-full-screen #app-content {
	margin-left: 0;
}
#content:-ms-fullscreen #app-content {
	margin-left: 0 !important;
}
#content:fullscreen #app-content {
	margin-left: 0;
}

#content:-ms-fullscreen #app-sidebar {
	/* The sidebar height is unset in Talk to override the "100vh-50px" set in
	 * server and force it to get the full height in fullscreen mode. However,
	 * IE11 does not support "unset", so the height needs to be explicitly set
	 * to 100%. */
	height: 100%;
	/* Remove the space added when IE is used to not overlap with the header. */
	top: 0;
}

/* Set the background of the content to the same colour as the app content and
 * the app sidebar to prevent a black background from appearing when the sidebar
 * is shown or hidden.
 * During a call the background of the app content is black, but as the
 * background of the content has the same colour of the sidebar and is a
 * placeholder on its position it looks acceptable. */
#content:-webkit-full-screen {
	background-color: var(--color-main-background);
}
#content:-moz-full-screen {
	background-color: var(--color-main-background);
}
#content:-ms-fullscreen {
	background-color: var(--color-main-background);
}
#content:fullscreen {
	background-color: var(--color-main-background);
}


.localmediaerror h2 {
	color: red;
	font-weight: bold;
}

.localmediaerror .emptycontent-additional {
	display: none;
}

#app-navigation .utils {
	padding: 0;
}
#app-navigation .utils .action {
	display: inline-block;
	padding: 22px;
	cursor: pointer;
	opacity: .3;
}

#app-navigation .app-navigation-entry-menu li {
	width: auto !important;
	float: inherit;
}

#app-navigation .app-navigation-entry-menu li.active {
	box-shadow: inset 4px 0 var(--color-primary);
	margin-left: -1px;
	padding-left: 1px;
}

.room-moderation-button .menu li div.separator,
#app-navigation .app-navigation-entry-menu li div.separator {
	border-bottom: 1px solid var(--color-border-dark);
	margin: 0 10px;
	width: 100%;
}


#app-navigation .app-navigation-entry-menu li button {
	float: inherit !important;
	margin: 0;
	padding: 0;
	width: 100% !important;
	min-height: 44px;
}

#app-navigation .app-navigation-entry-menu input {
	margin-left: 5px !important;
	margin-top: -5px;
	min-width: 150px;
	padding-right: 26px;
	text-overflow: ellipsis;
	overflow: hidden;
}

#app-navigation .app-navigation-entry-menu-caption   {
	font-weight: bold;
	line-height: 44px;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0 36px 0 36px;
	// !important to overwrite specific hover and focus
	opacity: .7;
	box-shadow: none !important;
	user-select: none;
	pointer-events: none;
}

#app-navigation .app-navigation-entry-menu input.first-option {
	margin-top: 5px;
}

#app-navigation .app-navigation-entry-menu li span {
	display: inline-block;
	height: 36px;
	line-height: 36px;
	padding-right: 10px;
	font-weight: 400;
	float: left;
}

#app-navigation .app-navigation-entry-menu li span[class^='icon-'],
#app-navigation .app-navigation-entry-menu li span[class*=' icon-'] {
	padding: 16px;
	box-sizing: border-box;
	width: 36px;
}

#app-navigation .app-navigation-entry-utils-menu-button {
	display: inline-block;
}

/* The sidebar wrapper contains the trigger for the sidebar and the sidebar
 * itself placed in columns. To prevent the trigger from taking up space for the
 * app content the trigger width is removed from the wrapper by pushing its left
 * margin. */
#app-sidebar-wrapper {
	display: flex;
	margin-left: -44px;
}

#app-sidebar-trigger {
	/* Higher than the z-index of the app-content */
	z-index: 1050;
	cursor: pointer;
}

/* Override server definitions to ensure that the sidebar is vertically
 * stretched, as the header is part of the flex layout and its height does not
 * need to be removed from the sidebar (specially in fullscreen mode where there
 * is no header). */
#app-sidebar {
	position: static;
	height: unset;
	top: 0;
}

/* The server sets the position of the sidebar as fixed when IE is used, so it
 * needs to be pulled down to not overlap with the header. */
.ie #app-sidebar {
	top: $header-height;
}

@include icon-black-white('menu-people', 'spreed', 1);
@include icon-black-white('no-password', 'spreed', 1);
@include icon-black-white('share-window', 'spreed', 1);
@include icon-black-white('lobby', 'spreed', 1);

#app-sidebar .close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 22px;
	opacity: .3;
	/* Higher index than the trigger to hide it when the sidebar is open */
	z-index: 20;
}

#app-sidebar .close:hover,
#app-sidebar .close:focus {
	opacity: 1;
}

/* make blue header bar transparent in shared room */
#body-public #app-content:not(.participants-1) #header.spreed-public {
	background: transparent;
}

/* As the header is hidden (except for the logo), move the fullscreen button and
 * sidebar to the top during calls */
#body-public #app-content:not(.participants-1) #app-sidebar,
#body-public #app-content:not(.participants-1) #app-sidebar-trigger,
#body-public #app-content:not(.participants-1) #video-fullscreen {
	top: 0;
	z-index: 3000;
}
#body-public #app-content:not(.participants-1) #video-fullscreen {
	top: 44px;
}

/**
 * Right sidebar
 */

#app-sidebar .detailCallInfoContainer {
	padding: 15px;
	clear: both;
}

.tabHeaders {
	display: inline-block;
}

/* START: move padding fixes and icons-for-tabs capability into core */
.tabHeaders {
	display: flex;
	margin-top: 0;
	margin-bottom: 10px;
	min-height: 44px;

	/* Prevent the chat view from vertically compressing the tab headers */
	flex-shrink: 0;
}

.tabHeaders .tabHeader {
	flex-basis: 50%;
	flex-grow: 0;
	padding: 12px;
	text-align: center;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 0;

	.icon, a {
		color: var(--color-main-text);
		opacity: .5;
	}
}

.tabHeaders .tabHeader.selected,
.tabHeaders .tabHeader:hover,
.tabHeaders .tabHeader:focus {
	.icon, a {
		opacity: 1;
	}
}
/* END: move padding fixes and icons-for-tabs capability into core */

/* In Talk clicking on the selected tab header has no effect, so the pointer
 * cursor should not be used. */
.tabHeaders .tabHeader.selected,
.tabHeaders .tabHeader.selected .icon,
.tabHeaders .tabHeader.selected a {
	cursor: default;
}

#app-sidebar.hidden {
	display: none !important;
}

.participantWithList .participant-moderator-indicator {
	color: var(--color-text-maxcontrast);
	font-weight: 300;
	padding-left: 5px;
}

.participantWithList .icon {
	width: 16px;
	display: inline-block;
	opacity: .4;
	margin-left: 5px;
	margin-bottom: -4px;

	&.hidden {
		display: none;
	}
}

.participantWithList .participant-offline {
	& > span {
		color: var(--color-text-maxcontrast);
	}
	.avatar {
		opacity: .4;
	}
}

.participantWithList > li {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.participantWithList > li > span {
	display: block;
	width: 100%;
	line-height: 44px;
	min-height: 44px;
	overflow: hidden;
	box-sizing: border-box;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-left: 44px;
	background-size: 16px 16px;
	background: no-repeat 14px center;
}

.participantWithList > li > span > .avatar-wrapper {
	position: absolute;
	top: 6px;
	left: 6px;

	&:focus,
	&:active {
		border: 1px solid var(--color-border-dark);
		border-radius: 50%;

		/* Separate the border slightly from the avatar to make it more
		 * noticeable. */
		padding: 3px;

		/* Compensate position for the border and the increased size. */
		top: 2px;
		left: 2px;
	}
}

body:not(#body-public) .participantWithList > li > span:not(.currentUser):not(.guestUser) {
	.avatar,
	.avatar img {
		cursor: pointer;
	}
}



/**
 * App navigation utils, buttons and counters for drop down menu
 */
.participantWithList .participant-entry-utils {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 105;
}

.participantWithList .active > .participant-entry-utils li {
	display: inline-block;
}

.participantWithList .participant-entry-utils li {
	width: 44px;
	height: 44px;
}

.participantWithList .participant-entry-utils button,
.participantWithList .participant-entry-utils button + .icon-loading-small {
	height: 100%;
	width: 100%;
	margin: 0;
	box-shadow: none;
}

.participantWithList .participant-entry-utils-menu-button button {
	border: 0;
	opacity: .5;
	background-color: transparent;
}

.participantWithList .participant-entry-utils-menu-button button:hover,
.participantWithList .participant-entry-utils-menu-button button:focus {
	opacity: 1;
}

/**
 * Sidebar details view
 */
.detailCallInfoContainer,
.authorRow {
	.editable-text-label {
		.label-wrapper {
			display: flex;
			align-items: center;
			.edit-button .icon {
				background-color: transparent;
				border: none;
				padding: 13px 22px;
				margin: 0;

				opacity: .3;

				&:hover,
				&:focus,
				&:active {
					opacity: 1;
				}
			}
		}
		.input-wrapper {
			position: relative;

			.icon-confirm {
				/* Needed to override an important rule set in the
				 * server. */
				background-color: transparent !important;
			}
		}
		.label {
			margin-left: 5px;
		}
	}

	.room-name-container {
		display: flex;

		/* Prevent the room name from overlapping the button to close the
		 * sidebar. */
		margin-right: 29px;

		a {
			opacity: .6;

			&:hover,
			&:focus,
			&:active {
				opacity: 1;
			}

			/* The container height is 42px (line height of 30px and bottom
			 * margin of 12px, both defined for h2 in the server), so clear the
			 * extra height of the link below the icon; this limits the
			 * clickable area to 44x44px, as otherwise it was too near the call
			 * button. */
			margin-bottom: 5px;

			.icon {
				display: block;

				width: 44px;
				height: 44px;

				background-size: 24px;

				/* Pull up the icon slightly to align it vertically with the
				 * label, which has a line height of 30px (defined in the
				 * server). */
				margin-top: -7px;
			}
		}
	}

	.room-name {
		display: block;

		flex-grow: 1;

		/* Limit the room name to the container width and prevent it from
		 * wrapping the full label when using a flex display; this is needed for
		 * the edit button and the ellipsis in the name to work as expected. */
		overflow: hidden;

		.label-wrapper {
			.label {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.edit-button {
				/* Use the same bottom margin as h2 (defined in the server) to
				 * align the button vertically with the label. */
				margin-bottom: 12px;
			}
		}

		.input-wrapper {
			position: relative;

			.username {
				width: 100%;
				margin: 4px 0 4px 0 !important;
				font-size: 15px;
				font-weight: 300;
				text-overflow: ellipsis;
			}

			input[type="text"] {
				padding-right: 44px;
			}

			.icon-confirm,
			.icon-loading-small {
				top: 4px;
				right: 0;

				padding: 12px 21px;
				margin: 0;
			}
		}
	}

	.guest-name p {
		display: inline-block;
		padding: 9px 0;
	}

	.call-controls-container {
		display: flex;
		align-items: center;

		.call-button {
			flex-grow: 0;
			flex-basis: 50%;

			.join-call,
			.leave-call {
				width: 100%;
				padding: 12px;
			}

			.icon-loading-small {
				/* Prevent the text from being moved when the icon is shown. */
				position: absolute;

				margin-left: 5px;
				margin-top: 1px;

				/* Unset the background image set by the server for loading
				 * icons inside buttons, as in this case the pure CSS icon can
				 * be used instead of the image. */
				background-image: unset;

				&.hidden {
					display: none;
				}
			}
		}
	}

	.room-moderation-button {
		/* Needed for proper positioning of the menu. */
		position: relative;

		/* Position the button to the right end of its flex parent. */
		margin-left: auto;
	}

	.clipboard-button button {
		display: flex;
		align-items: center;

		> span {
			cursor: pointer;

			/* Override reduced opacity set for button icons in server, as the
			* button is already dimmed. */
			opacity: 1;
		}

		/* Override appearance set for button text in server, as this button has
		 * no background. */
		padding: 0;

		> span {
			color: var(--color-main-text);
			font-weight: normal;
		}
	}

	.clipboard-button button,
	.room-moderation-button .button {
		background-color: transparent;
		border: none;
		margin: 0;
		opacity: .5;

		&:hover,
		&:focus,
		&:active {
			opacity: 1;
		}
	}

	.clipboard-button .icon,
	.room-moderation-button .button {
		width: 44px;
		height: 44px;
	}

	.room-moderation-button .menu {
		/* Values copied from apps.scss in server. */
		$popoveritem-height: 44px;
		$popovericon-size: 16px;
		$outter-margin: ($popoveritem-height - $popovericon-size) / 2;

		/* The server sets a top/bottom margin to forms and inputs of the
		 * first/last item in a menu, but that misaligns the left icon; this
		 * sets the top/bottom margin to the whole item instead of only to the
		 * forms or inputs. */
		li:first-of-type {
			> .menuitem.password-option {

				margin-top: $outter-margin - 2px; // minus the input margin

				> form, > input {
					margin-top: 0;
				}
			}
		}
		li:last-of-type {
			> .menuitem.password-option {

				margin-bottom: $outter-margin - 2px; // minus the input margin

				> form, > input {
					margin-bottom: 0;
				}
			}
		}

		li {
			> .separator {

				margin-top: $outter-margin - 2px; // minus the input margin
			}
		}

		li.item-has-details {
			flex-direction: column;

			> .menuitem-details {
				/* Show it closer to its menu item, but further away than the
				 * following menu item. */
				margin-top: -($outter-margin - 2px); // minus the input margin
				margin-bottom: $outter-margin - 2px; // minus the input margin

				/* Lower size and opacity than regular menu items. */
				font-size: small;
				opacity: 0.5;

				/* Padding based on the icon. */
				padding-left: $popoveritem-height;
			}
		}

		.menuitem.caption,
		.menuitem.caption > span {
			/* Override rule for menu items from server, as in this case the
			 * caption is not clickable. */
			cursor: default;
		}

		.menuitem.caption {
			font-weight: bold;

			&:hover,
			&:focus,
			&:active {
				opacity: 0.7 !important;
			}
		}

		.menuitem.password-option,
		.menuitem.lobby-timer-option {
			/* Override rule for menu items from server, as in this case
			 * only the button in the password field is clickable, so the
			 * pointer cursor should not be used for the whole item. */
			cursor: default;

			form {
				position: relative;

				.icon-confirm,
				.icon-loading-small {
					/* Inputs in menu items do not have a right margin, so
					 * it does not need to be compensated. */
					right: 0;
				}

				.icon-confirm {
					/* Needed to override an important rule set in the
					 * server. */
					background-color: transparent !important;
				}
			}
		}
	}

	/* The specific locator is needed to have higher priority than other
	 * important rules set in the server. */
	input.checkbox + label.checkbox-label,
	input.radio + label {
		/* If ".icon-loading-small" is set hide the checkbox and show a
		 * loading icon instead. */
		&.icon-loading-small:before {
			background-image: none !important;
			background-color: transparent !important;
			border-color: transparent !important;
		}
		&.icon-loading-small:after {
			top: 22px;
			left: 21px;
		}
	}
}

/**
 * Cascade parent element height to the chat view in the sidebar to limit the
 * vertical scroll bar only to the list of messages. Otherwise, the vertical
 * scroll bar would be shown for the whole sidebar and everything would be
 * moved when scrolling to see overflown messages.
 *
 * The list of messages should stretch to fill the available space at the bottom
 * of the right sidebar, so the height is cascaded using flex boxes.
 *
 * It is horrible, I know (but better than using JavaScript ;-) ). Please
 * improve it if you know how :-)
 */
#app-sidebar {
	display: flex;
	flex-direction: column;
}

#app-sidebar .tabs {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	flex-grow: 1;
}

#app-sidebar .tabsContainer {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	flex-grow: 1;
}

#app-sidebar .tab {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	flex-grow: 1;
}

#app-sidebar #chatView {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	flex-grow: 1;
}

#app-sidebar .comments {
	overflow-y: auto;

	/* Needed for proper calculation of comment positions in the scrolling
	   container (as otherwise the comment position is calculated with respect
	   to the closest ancestor with a relative position) */
	position: relative;
}

/**
 * Place the scroll bar of the message list on the right edge of the sidebar,
 * but keeping the padding of the tab view.
 *
 * The padding must be set on the left too to ensure that the contacts menu
 * shown when clicking on an author name does not overflow the tab (as it would
 * be hidden).
 *
 * The bottom padding is removed to extend the chat view to the bottom edge of
 * the sidebar.
 */
#app-sidebar .tab-chat {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
}

#app-sidebar #chatView .newCommentRow,
#app-sidebar #chatView .comments {
	padding-left: 15px;
	padding-right: 15px;
}

#app-sidebar #chatView .comments .wrapper-background,
#app-sidebar #chatView .comments .wrapper {
	/* Padding is not respected in the comment wrapper due to its absolute
	 * positioning, so it must be set through its position. */
	left: 15px;
	right: 15px;
}

#app-sidebar #chatView .newCommentForm.with-add-button {
	/* Make room to show the "Add" button if needed when chat is shown in the
	 * sidebar. */
	margin-right: 44px;
}

/**
 * Limiting the scroll bar in the sidebar to the list of chat messages causes
 * the scroll bar to be removed from the whole sidebar in other tabs too.
 * Therefore, the scroll bars must be explicitly enabled in the other tab
 * contents that need them.
 */
#app-sidebar #participantsTabView {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#app-sidebar .participantWithList {
	overflow-y: auto;
	padding-top: 8px;
}

#app-sidebar .participantWithList .participant:last-child {
	/* Add room for the popovermenu on last user */
	padding-bottom: 94px;
}

/**
 * Place the scroll bar of the participants list on the right edge of the
 * sidebar, but keeping the padding of the tab view.
 *
 * The bottom padding is removed to extend the participant view to the bottom
 * edge of the sidebar.
 */
#app-sidebar .tab-participants {
	padding-right: 0;
	padding-bottom: 0;
}

/* Form needs margin, participant list needs padding
 * So the form has margin from the right side, but the scroll bar of the
 * participant list is directly on the right.
 */
#app-sidebar #participantsTabView form {
	margin-right: 15px;
}
#app-sidebar #participantsTabView .participantWithList {
	padding-right: 15px;
}

/**
 * Add a little margin to the last participant so the list is nicely framed with
 * the sides when fully scrolled to the bottom.
 */
#app-sidebar #participantsTabView .participant:last-child {
	margin-bottom: 15px;
}

/**
 * Dark-Theme fixes
 */
// We always want to use the white icons, this is why we don't use var(--color-white) here.
.avatar.icon {
	&.icon-public {
		background-image: url(icon-color-path('public', 'actions', 'fff', 1, true));
	}
	&.icon-contacts {
		background-image: url(icon-color-path('contacts', 'places', 'fff', 1, true));
	}
	&.icon-password {
		background-image: url(icon-color-path('password', 'actions', 'fff', 1, true));
	}
	&.icon-file {
		background-image: url(icon-color-path('text', 'filetypes', 'fff', 1, true));
	}
	&.icon-mail {
		background-image: url(icon-color-path('mail', 'actions', 'fff', 1, true));
	}
}

#app-navigation > ul > li > a:first-child {
	img {
		filter: none !important;
	}
}