.slideout-menu {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	@media only screen and (min-width: @screen-sm-min) {
		& {
			display: none !important;
		}
	}
}

@media (max-width: @screen-sm-max) {
	.chat-modal {
		width: 100%;
		height: 100%;
		top: 0px !important;
		left: 0px !important;

		.modal-dialog {
			margin: 0;
			height: 100%;
			width: 100%;

			.modal-content {
				height: 100%;
				border: none;
			}
		}
	}
}

@media (max-width: @screen-md-max) {
	body {
		padding-top: 0;
		padding-bottom: 0;
	}

	#panel {
		background-color: inherit;
		min-height: 100%;
		padding-top: 70px;
	}

	body,
	#panel,
	.slideout-menu {
		-webkit-overflow-scrolling: touch;
	}

	.navbar-toggle {
		padding: 10px 17px;
		margin: 0;
		line-height: 30px;
		border: none;

		html[data-dir="rtl"] button& {
			margin-left: 0;
		}

		.header & .notification-icon {
			left: auto;
			right: 30px;
			top: 0;
		}
	}

	.slideout-menu {
		z-index: 10000 !important;
		background-color: @gray-darker;

		a,
		button {
			color: #fff;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}

		.chat-list {
			max-height: 100%;

			li {
				height: 60px;
				width: auto;
				padding: 10px 10px 10px 60px;
				border: none;
				color: #fff;
				position: relative;
				background: rgba(255, 255, 255, 0.05);

				&:not(:last-child) {
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);
				}

				.main-avatar {
					position: relative;
					float: left;
					margin-left: -50px;
					margin-top: -20px;

					a {
						padding: 0 !important;
					}

					.avatar {
						.user-icon-style(40px, 20px, 50%);
					}

					.status {
						position: absolute;
						top: 0;
						right: 0;
					}
				}

				.members {
					display: none;
				}

				.room-name {
					display: block;
					.text-ellipsis;
				}

				.teaser-content {
					display: block;
					font-size: @font-size-small;
					.opacity(0.8);
					.text-ellipsis;
				}
			}
		}

		.menu-section {
			.chat-list,
			.notification-list-mobile {
				.user-link {
					display: inline;
				}

				.unread {
					.room-name,
					.teaser-content {
						padding-right: 45px;
						font-weight: bold;
					}
				}
			}

			.chat-list .unread .room-name::after,
			.notification-list-mobile .unread a::after {
				content: "new";
				text-transform: uppercase;
				color: #fff;
				font-size: 10px;
				font-weight: 400;
				background: @brand-danger;
				padding: 2px 3px;
				.border-radius(@border-radius-base);
				top: 50%;
				right: 20px;
				.transform(translateY(-50%));
				position: absolute;
			}
		}

		.counter {
			font-style: normal;

			&:after {
				left: 5px;
				top: -1px;
				padding: 3px 7px;
				background: #333;
				border: 1px solid #222;
			}

			&:before {
				display: none;
			}
		}
	}

	.slideout-open,
	.slideout-open body,
	.slideout-open .slideout-panel {
		overflow: hidden;
		overflow-y: hidden !important;
	}

	@keyframes fade {
		from {
			.opacity(0);
		}
		to {
			.opacity(0.3);
		}
	}
	.subnav-is-opened .main-nav__secondary-nav {
		display: block;
		animation: fade 250ms ease-in-out both;
	}

	.slideout-open .slideout-panel {
		&::after {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1040;
			content: "";
			.opacity(0);
		}
	}

	.menu-profile {
		position: relative;
		height: 100px;
		width: 100%;
		top: 0px;
		z-index: 1;

		img,
		.user-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			.user-icon-style(70px, 25px);
			.border-radius(50%);
			.transform(translate(-50%, -50%));
		}

		i {
			position: absolute;
			left: 146px;
			top: 18px;
		}
	}

	.menu-header-title {
		font-weight: 400;
		letter-spacing: 0.5px;
		margin: 0;
	}

	.menu-section {
		margin: 0 0 15px;
	}

	.menu-section-title {
		text-transform: uppercase;
		color: #85888d;
		background: rgba(0, 0, 0, 0.2);
		font-weight: 200;
		font-size: 13px;
		letter-spacing: 1px;
		padding: 10px 20px;
		margin: 0;
	}

	.menu-section-list {
		padding: 0;
		margin: 0;
		list-style: none;

		a,
		button {
			display: block;
			padding: 10px 20px;
			text-align: left;
			width: 100%;

			&:hover {
				background-color: rgba(255, 255, 255, 0.1);
				text-decoration: none;
			}
		}
	}

	[data-section="notifications"] ul li a:first-child {
		display: none;
	}
}