.ths-hwavgen-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.ths-hwavgen-main {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ths-hwavgen-main label { margin-right: 10px; }
.ths-hwavgen-main > * { margin-bottom: var(--main-spacing); }
.ths-hwavgen-main > *:last-of-type { margin-bottom: 0 !important; }
.ths-hwavgen-main, .ths-hwavgen-audio { width: 70%; }

.ths-hwavgen-audioinput {
	background-color: var(--clevel-1);
	border-radius: 10px;
	padding: 5px;
	height: 40px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ths-hwavgen-tags {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ths-hwavgen-taginput {
	background-color: var(--clevel-1);
	border-radius: 10px;
	width: 70%;
	margin-bottom: var(--main-spacing);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px;
}

.ths-hwavgen-textinput-container {
	width: 100%;
	margin-top: 10px;
	border-radius: 15px;
	display: flex;
}

.ths-hwavgen-textinput-container > .ths-hwavgen-btn {
	height: 55px;
	width: 55px;
	font-size: 2em;
}

.ths-hwavgen-tagcomponents {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-right: 10px;
}
.ths-hwavgen-tagcomponents > .ths-hwavgen-textinput:first-of-type { margin-bottom: 10px; }

.ths-hwavgen-textinput {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	background-color: var(--clevel-2);
	padding: 10px;
	border-radius: 8px;
	flex: 1;
}

.ths-hwavgen-textinput input {
	width: 100%;
	height: 35px;
	border-radius: 5px;
	background-color: var(--clevel-1);
	text-align: center;
}

.ths-hwavgen-textinput label {
	min-width: 100px;
	text-align: center;
}

.ths-hwavgen-taglist {
	background-color: var(--clevel-1);
	width: 70%;
	border-radius: 10px;
	padding: 10px;
}

.hwav-notags {
	margin: 15px 0;
	text-align: center;
}

.ths-hwavgen-submit { width: 70%; }

.ths-hwavgen-submit-inputs {
	background-color: var(--clevel-1);
	width: 100%;
	padding: 10px;
	border-radius: 10px;
	display: flex;
}
.ths-hwavgen-submit-inputs > .ths-hwavgen-textinput { margin-right: 10px; }

#hwav-generate { width: 80px; }

.ths-hwavgen-tag {
	background-color: var(--clevel-2);
	padding: 10px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

.ths-hwavgen-tag:last-of-type {margin-bottom: 0 !important; }
.ths-hwavgen-tag > button {
	align-self: flex-end;
	background-color: var(--clevel-1);
	cursor: pointer;
	border: none;
	padding: 5px;
	border-radius: 5px;
}
.ths-hwavgen-tag > h3,
.ths-hwavgen-tag > p {
	word-break: break-all;
}

.ths-hwavgen-btn {
	background-color: var(--clevel-3);
	border: 2px solid var(--green);
	border-radius: 10px;
	cursor: pointer;
}
.ths-hwavgen-btn:hover { background-color: var(--clevel-1); }

.ths-hwavgen-audioinput,
.ths-hwavgen-taginput,
.ths-hwavgen-textinput,
.ths-hwavgen-textinput input,
.ths-hwavgen-btn,
.ths-hwavgen-submit-inputs,
.ths-hwavgen-taglist,
.ths-hwavgen-tag {
	transition: var(--fade);
}

#toast-err { width: 70% !important; }

@media only screen and (max-width: 1200px) {
	.ths-hwavgen-main,
	.ths-hwavgen-audio,
	.ths-hwavgen-taginput,
	.ths-hwavgen-taglist,
	.ths-hwavgen-submit,
	.ths-hwavgen-tagcomponents,
	.ths-hwavgen-textinput {
		width: 100%;
	}

	.ths-hwavgen-textinput,
	.ths-hwavgen-textinput-container,
	.ths-hwavgen-submit-inputs {
		flex-direction: column;
	}

	.ths-hwavgen-tagcomponents {
		margin-right: 0px;
		margin-bottom: 10px;
	}

	.ths-hwavgen-textinput-container {
		align-items: center;
	}

	#tag-add {
		font-size: initial;
		width: 80px;
	}

	.ths-hwavgen-textinput > label,
	.ths-hwavgen-submit-inputs > .ths-hwavgen-textinput {
		margin-right: 0px;
		margin-bottom: 10px;
	}

	.ths-hwavgen-submit-inputs { align-items: center }

	#hwav-generate { height: 50px; width: 90px; }
	#toast-err { width: 100% !important; }
}