form {
	
	fieldset {
		border: none;
		display: flex;
		gap: var(--gap);
		
		> * {
			flex: 1;
		}
		
		legend {
			margin-block: var(--gap);
		}

		section:has(:required) label:after {
			content: ' *';
		}

		label {
			font-size: inherit;
			font-weight: 500;
			color: rgb(var(--fontcolor));
			display: block;
			
			&:empty {
				height: 1.5rem;
			}
		}

		input, textarea, select {
			box-sizing: border-box;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			font-size: inherit;
			color: var(--fontcolor);
			border: 2px solid var(--fontcolor);
			display: block;
			padding: calc(var(--gap) / 2) !important;
			margin-bottom: var(--gap);
			width: 100%;
			line-height: calc(var(--fontsize) * 1.75);
			height: calc(var(--fontsize) * 3.75);
		}
		[type=file],
		[type=date] {
			line-height: calc(var(--fontsize) - 2px);
		}
		input:focus,
		textarea:active,
		select:active {
			border: 2px solid var(--fontcolor);
			outline: none;
		}
		textarea {
			min-height: 10vh;
		}
		select {
			background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cf2d4a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
			background-repeat: no-repeat, repeat;
			background-position: right .7em top 50%, 0 0;
			background-size: .65em auto, 100%;
			z-index: 1 !important;
			border-radius: 0;
		}
		input[type=radio],
		input[type=checkbox] {
			width: auto;
			display: inline;
		}

		input[type=checkbox] {
			-webkit-appearance: checkbox;
			-moz-appearance: checkbox;
			appearance: checkbox;
			border: 1px solid rgb(var(--fontcolor));
			padding: 0;
			display: inline-block;
			width: var(--font);
			height: var(--font);
			margin-right: .5em;
		}
		
		@media(max-width:1200px) {
			&:has(> *:nth-child(n+4)) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 0 var(--gap);
			}
		}
		@media(max-width:800px) {
			&:has(> *:nth-child(n+2)) {
				display: grid;
				grid-template-columns: 1fr;
				gap: 0 var(--gap);
				
				label:empty {
					display: none;
				}
			}
		}
	}
	
	> span {
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: flex-start;
		gap: var(--gap);
		
		input {
			display: inline-flex;
			flex: 0;
		}
	}
	
	div:has(.grecaptcha-badge) {
		background: rgb(var(--lightgrey));
		padding: 0;
	}
	
	
	
	small {
		color: rgba(var(--fontcolor), .5);
		display: block;
		margin-block: var(--gap);
	}
	
	[type=range] {
		appearance: none;
		-webkit-appearance: none;
		width: 100%;
		height: 2.5rem;
		display: block;
		padding: calc(var(--gap) / 1) 0;
		background: transparent;
	}

	[type=range]::-webkit-slider-container {
		background: transparent;
	}

	[type=range]::-webkit-slider-runnable-track {
		box-sizing: border-box;
		border: none;
		width: 100%;
		height: 0.25em;
		background: var(--fontcolor);
	}
	[type=range]::-moz-range-track {
		box-sizing: border-box;
		border: none;
		width: 100%;
		height: 0.25em;
		background: var(--fontcolor);
	}
	[type=range]::-ms-track {
		box-sizing: border-box;
		border: none;
		width: 100%;
		height: 0.25em;
		background: var(--fontcolor);
		padding: 0;
	}
	[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
		margin-top: calc(var(--gap) * -.625);
		box-sizing: border-box;
		border: none;
		width: calc(var(--gap) * 1.5);
		height: calc(var(--gap) * 1.5);
		border-radius: 50%;
		background: var(--btn-color);
	}
	[type=range]::-moz-range-thumb {
		box-sizing: border-box;
		border: none;
		width: calc(var(--gap) * 1.5);
		height: calc(var(--gap) * 1.5);
		border-radius: 50%;
		background: var(--btn-color);
	}
	[type=range]::-ms-thumb {
		margin-top: 0;
		box-sizing: border-box;
		border: none;
		width: calc(var(--gap) * 1.5);
		height: calc(var(--gap) * 1.5);
		border-radius: 50%;
		background: var(--fontcolor);
	}
	[type=range]::-ms-tooltip {
		display: none;
	}
	
}

.notify {
	margin-block: var(--gap);
	padding: var(--gap);
	background: var(--red-light);
	border: 2px solid var(--red);
	
	&.success {
		background: var(--green-light);
		border-color: var(--green);
	}
	&.warning {
		background: var(--yellow-light);
		border-color: var(--yellow);
	}
}