base.less

	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	width: 100%;
	padding: 12px;
	background-color: @secondary-background-color;
	border: 1px solid darken(@secondary-background-color, 10%);
	.transition(background-color .15s ease-out, border-color .15s ease-out);
	&:first-child {
		margin-top: 10px;
	}
	.avatar {
		height: 55px;
		max-height: 55px;
		min-height: 55px;
		width: 55px;
		max-width: 55px;
		min-width: 55px;
		background-size: cover;
		border: 1px solid darken(@tertiary-background-color, 10%);
		font-size: 40px;
		text-align: center;
		background-color: @tertiary-background-color;
		position: relative;
	}
	.question-mark {
		&::before {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			line-height: 55px;
			color: darken(@tertiary-background-color, 10%);
		}
	}
	.action {
		text-align: right;
		padding-left: 20px;
	}
	button {
		min-width: 120px;
	}
	input[type=file] {
		position: absolute !important;
		width: 100%;
		top: 0;
		left: 0;
		height: 100%;
		opacity: 0;
		z-index: 10000;
		* {
			cursor: pointer;
		}
	}
}

.rocket-team {
	display: block;
	li {
		display: inline-block;
	}
	a {
		display: inline-block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-size: 100%;
		background-position: 50% 50%;
		margin-right: 5px;
	}
}

@media all and(max-width: 1100px) {
	#rocket-chat {
		.flex-opened {
			.calc(width, ~'100% - ' @rooms-box-width);
		}
	}
}

@media all and(max-width: 780px) {
	#rocket-chat {
		.burger {
			visibility: visible;
			display: inline-block;
		}
		.side-nav {
			top: 0;
			.transform(translateX(-100%));
			.transition(transform .3s ease-out);
		}
		.main-content {
			margin-left: 0;
			width: 100%;
			.transition(transform .3s ease-out);
		}
		.fixed-title h2 {
			margin-left: 45px;
		}
		.flex-tab {
			top: 0;
		}
		.messages-box {
			padding: 0 10px;
		}
		&.menu-opened {
			.side-nav {
				.transform(translateX(0));
			}
			.burger {
				.transform(rotate(180deg));
				i {
					&:nth-child(1) {
						opacity: 1;
						width: 10px;
						.transform-origin(50%, 50%, 0);
						.transform(translateY(3px) translateX(10px) rotate(45deg));
					}
					&:nth-child(2) {
						//.transform(rotate(180deg));
					}
					&:nth-child(3) {
						opacity: 1;
						width: 10px;
						.transform-origin(50%, 50%, 0);
						.transform(translateX(10px) translateY(-3px) rotate(-45deg));
					}
				}
			}
			.main-content {
				.transform(translateX(@rooms-box-width));
			}
		}
	}
}

@media all and(max-width: 500px) {
	.user-view {
		.thumb {
			width: 60px;
			height: 60px;
		}
		.info {
			margin-left: 75px;
			.calc(width, ~'100% - 120px');
			h3 {
				font-size: 20px;
			}
		}
	}
}