main {
	padding: 0 calc((100% - var(--max-container-width)) / 2) 1rem;
}

button {
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	margin: 0.75rem 0.25rem 1rem auto;
}

textarea,
input[type="text"] {
	width: 100%;
	min-height: 10rem;
}

input[type="text"] {
	min-height: unset;
	padding: 0.5rem 0;
}

input#search-filter-tags {
	height: 3rem;
	flex-basis: 100%;
}

div#messages-container {
	border: 1px solid var(--ez-grey);
	padding: 0 0.25rem;
	position: relative;
	max-height: 85vh;
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

div#messages-container::-webkit-scrollbar {
	display: none;
}

div.message {
	padding: 0.75rem;
	background-color: var(--ez-light-grey);
	margin: 0.25rem 0;
	border-radius: 0.25rem;
}

div.message.reply,
div.show-replies {
	width: 80%;
	margin: 0.25rem 0 0.25rem auto;
	font-size: 80%;
	padding: 0.25rem 0.5rem;
}

div.message p {
	margin: 0 0 0.5rem;
}

div.message.reply p {
	margin-bottom: 0.25rem;
}

div.message div.extra {
	display: flex;
	align-items: center;
}

div.message span,
div.message div.content a {
	font-size: 75%;
}

div.message span.reply {
	display: block;
	margin-left: auto;
	cursor: pointer;
}

div.form-field img {
	width: 100%;
}

div.show-replies {
	color: var(--ez-green);
	width: fit-content;
	cursor: pointer;
}

div#more-messages {
	color: var(--ez-green);
	cursor: pointer;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

div#more-messages svg {
	height: 5rem;
	margin: unset !important;
}

div#tags-list,
div#filter-tags-list {
	position: absolute;
	top: calc(100% - 0.75rem);
	width: 100%;
	background-color: var(--ez-white);
	border: 1px solid var(--ez-light-grey);
	border-top: 0;
	z-index: 25;
	padding: 0.25rem 1rem;
}

div#filter-tags-list {
	top: 3.75rem;
}

div#tags-list div,
div#filter-tags-list div {
	margin: 0.25rem 0;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ez-light-grey);
}

form.add-message {
	margin-top: 1rem;
	position: relative;
}

form.add-message div#message-spinner {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 40;
	background-color: var(--ez-white);
	display: none;
}

form.add-message.reply {
	position: absolute;
	width: calc(85% - 0.5rem);
	top: 0;
	border: 1px solid var(--ez-black);
	border-radius: 0.25rem;
	margin: 0 0 0 15%;
	background-color: var(--ez-white);
	z-index: 25;
}

form.add-message.reply textarea {
	margin: 0;
	padding: 0.5rem;
	min-height: unset;
}

form.add-message.reply button {
	border-radius: 0.5rem;
	padding: 0.5rem 1.25rem;
	margin: 0.25rem 0.25rem 0.25rem auto;
}

form.add-message .form-field,
div.filter-message-board {
	padding: 0.25rem 0;
	position: relative;
}

div.filter-message-board {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

div.character-count {
	text-align: right;
	font-size: 70%;
}

form.reply div.character-count {
	left: 0.25rem;
	bottom: 0.25rem;
	top: unset;
	right: unset;
}

div#selected-tags,
div#selected-filter-tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

div#selected-tags .tag,
div#selected-filter-tags .tag {
	font-size: 70%;
	border: 1px solid var(--ez-black);
	border-radius: 0.25rem;
	padding: 0.25rem;
	white-space: nowrap;
	margin: 0.25rem;
}

input[type="file"] {
	border: 0;
}

@media (min-width: 1100px) {
	form.add-message {
		width: 50%;
		margin-left: auto;
	}

	form.add-message .form-field {
		display: flex;
		justify-content: space-between;
	}

	form.add-message .form-field label {
		flex-basis: 15%;
		margin: 0.5rem 0;
		padding: 0.5rem 0;
		font-weight: 500;
	}

	form.add-message .form-field textarea {
		min-height: 7.5rem;
	}

	form.add-message .form-field textarea,
	form.add-message .form-field input {
		flex-basis: 85%;
	}

	form.add-message .form-field textarea,
	form.add-message .form-field input,
	form.add-message .form-field label {
		font-size: 1rem;
	}

	div.form-field img {
		max-width: 25rem;
		max-height: 25rem;
		width: auto;
		margin: auto;
	}

	div.message div.content {
		display: flex;
		justify-content: space-between;
	}

	div.character-count {
		position: absolute;
		top: 100%;
		right: 0;
	}

	div#messages-container {
		max-height: 70vh;
	}

	input#search-filter-tags {
		flex-basis: 40%;
		margin-left: 0;
	}

	div#selected-filter-tags {
		flex-basis: 45%;
		overflow-x: auto;
		flex-wrap: nowrap;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	div#selected-filter-tags::-webkit-scrollbar {
		display: none;
	}

	div.filter-message-board {
		flex-wrap: nowrap;
	}

	div.filter-message-board button {
		flex-basis: 10%;
	}

	div#tags-list {
		width: 85%;
		right: 0;
	}

	div#filter-tags-list {
		width: 40%;
		top: calc(100% - 0.75rem);
	}

	div#tags-list div:hover,
	div#filter-tags-list div:hover {
		border-bottom: 1px solid var(--ez-white);
		background-color: var(--ez-light-grey);
		cursor: pointer;
	}
}