servnest/less/form.less

form {
	margin-left: 50px;
	margin-right: 50px;
	text-align: center;
	@media (max-width: 500px) {
		margin-left: 0px;
		margin-right: 0px;
	}
}

input, select {
	border-radius: 12px;
	font-size: @fontSize;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-width: 2px;

	&:hover {
		border-width: 3px;
		padding: 9px;
	}
	&:focus {
		border-width: 4px;
		padding: 8px;
	}

	@media @light {
		background-color: @lightColor;
		color: @darkColor;
		border-color: @darkColor;
	}

	@media @dark {
		background-color: @darkColor;
		color: @lightColor;
		border-color: @lightColor;
	}

}

input[type=text] {
	font-family: monospace;
}

input[type=submit] {
	margin: 22px;
}

input#subdomain, input#ttl-value {
	text-align: right;
}

#password {
	width: 32ch;
	text-align: center;
}

#username {
	width: 16ch;
}

#keytag {
	width: 7ch;
}

input:invalid+span::after {
	content: '✖';
}

input:valid+span::after {
	content: ''; // ✓
}

input+span::after {
	display: inline-block;
	width: 20px;
	font-size: 30px;
	padding-left: 20px;
	font-family: monospace;
}

label.aboutInputCondition {
	display: block;
	font-size: @fontSize - 10%;
}

fieldset {
	border-radius: 20px;
	border-width: 2px;
	border-style: solid;
	display: flex;
	flex-direction: row;
	justify-content: center;

	@media @light {
		border-color: @darkColor;
	}

	@media @dark {
		border-color: @lightColor;
	}
}