#chat-container {
	display: flex;
	flex-direction: column;
	width: calc(100vw - 30px);
}

#msg-view-cont {
	display: flex;
	flex-direction: column-reverse;
	height: 75vh;
}

#nm-indicator {
	position: absolute;
	padding: 10px;
	left: 0;
	right: 0;
	bottom: 17.5px;
	margin: auto;
	visibility: hidden;
	border-radius: 100px;
	background-color: #686868;
	white-space: nowrap;
	display: inline-block;
	width: min-content;
}

#message-input {
	margin-top: 0;
}

/* messages */

.user-msg {
	display: flex;
	flex-direction: column;
	word-wrap: break-word;
}

.user-msg, .join-msg, .leave-msg {
	padding: 10px;
	margin: 5px;
}

.join-msg {
	background-color: #2e2e66;
}

.leave-msg {
	background-color: #662e2e;
}

.join-msg *, .leave-msg * {
	background-color: inherit;
}

/* typing indicator */

#typing-label {
	opacity: 0;
	font-size: small;
	color: gray;
}

#typing-usernames {
	display: inline;
}

.typing-username {
	font-style: bold;
	color: lightgray;
}