@layer utilities {
	.form {
		.horizontal,
		&.horizontal {
			display: flex;
			gap: 1rem;
			flex-direction: column;
			@media (min-width: 1001px) {
				flex-direction: row;
				align-items: flex-end;
				width: fit-content;
			}
		}
		&.twocols {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 2rem;
			@media (max-width: 767px) {
				display: block;
			}
		}
		&.highlighted {
			position: relative;
			padding: 1.2rem;
			border-radius: 1rem;
			@media (max-width: 1001px) {
				max-width: 22.5rem;
			}
			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background: url('../img/highlightbox-wide.svg') no-repeat center center;
				background-size: 100% 100%;
				z-index: -1;
			}
		}
		legend {
			font-size: var(--fontsize-h3);
			font-weight: 700;
			line-height: 1;
			margin-bottom: 1rem;
		}
		fieldset {
			border: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			margin: 1rem 0;
		}
	}

	.forgot {
		font-size: var(--fontsize-small);
		line-height: 1.3333;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
		width: fit-content;
		
		&:hover, &:active {
			text-decoration-thickness: 2px;
		}
	}

	.formfield {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;

		.pseudolabel,
		label {
			font-size: var(--fontsize-smallkicker);
			text-transform: uppercase;
			font-weight: 700;
			letter-spacing: 0.04em;
			line-height: 1.3333;
		}
	}

	.textinput, .select2-selection {
		font-family: var(--noto), sans-serif;
		font-size: 1rem;
		line-height: 1.3333;
		font-weight: 600;
		border-radius: 0;
		max-width: var(--maxwidth);
		border: 2px solid black;
		padding: 0.4rem;
		&.wide {
			width: 20rem;
			width: 100%;
			max-width: 20rem;
			
		}
		
		&:has(:focus-visible),
		&:focus-visible {
			outline: 2px solid black;
			
		}
	}

	.select2-selection {
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
	}
	.select2-container--open {
		outline: 2px solid black;
	}

	.selectwrap {
		border: 2px solid black;
		height: 2.45rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		font-size: 1.125rem;
		background: white;
		min-width: fit-content;
		padding-right: 0.5rem;
		&:has(:focus-visible),
		&:focus-visible {
			outline: 3px solid #c00;
			outline-offset: 5px;
		}
		select {
			font-family: var(--noto), sans-serif;
			background: white;
			border: none;
			font-size: 1.125rem;
			line-height: 1.3333;
			font-weight: 600;
			letter-spacing: 0.02em;
			padding: 0 0.5rem;
			
		}
		.button {
			min-height: 1.8rem;
			border: none;
			margin: 0 0.3rem;
		}
	}

	.buttons {
		display: flex;
		&.edges {
			justify-content: space-between;
			align-items: center;
			gap: 1rem;
			width: 100%;
			max-width: var(--maxwidth);
			@media (max-width: 500px) {
				span:not(.icon) {
					display: none;
				}
			}
			
		}
	}

	.button,
	.FormBuilder button[type=submit] {
		background: transparent;
		border: 3px solid black;
		padding: 0 0.7em 0.25rem 0.7em;
		min-height: 2.45rem;
		font-variant: all-small-caps;
		font-weight: 700;
		font-size: 1.125rem;
		letter-spacing: 0.035em;
		cursor: pointer;
		background: white;
		justify-content: center;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		max-width: 24rem;
		line-height: 1;
		text-wrap: balance;
		@media (min-width: 1001px) {
			 max-width: none;
		}
	
		&.icononly {
			overflow: hidden;
			min-width: 3rem;
			span:not(.icon) {
				position: absolute;
				text-indent: -5000px;
			}
		} 
		
		&[name*='_submit'],
		&.large {
			position: relative;
			font-size: 1.5rem;
			display: inline-block;
			text-align: center;
			min-height: 2.45rem;
			padding: 0.4rem 1.5rem 0.67rem;
		}
		&[name*='_submit'],
		&.style-1 {
			position: relative;
			margin: 3rem 1.6rem;
			height: auto;
			line-height: .8;
			padding: 0.4rem 1rem 1rem;
		
			
			@media (min-width: 1440px) {
				margin-left: -0.2rem;
				margin-right: -0.2rem;
			}
			&::before {
				content: '';
				background: url(../img/rectangle3.svg) no-repeat center center;
				background-size: 100% 100%;
				position: absolute;
				inset: -1.5rem -1.9rem;
				z-index: -1;
			}
			
		}

		&.style-2 {
			background: var(--green);
			color: white;
			border-color: white;
			fill: white;
		}

		&.style-3 {
			background: var(--green);
			color: white;
			border: none;
			fill: white;
			
			align-self: flex-start;
			&:hover {
				text-decoration: underline;
				text-decoration-thickness: 1px;
				text-underline-offset: 0.2em;
			}
		}

		.icon {
			width: 1.5rem;
			height: 1.5rem;
			position: relative;
			top: 0.1rem;
			line-height: 1;
			.large & {
				top: 0.34rem;
			}
			svg {
				width: 1.5rem;
				height: 1.5rem;
				
			}
		}

		&:hover {
			background: black;
			color: white;
			svg {
				fill: white;
			}
		}

		
	}

	.checkboxwrap {
		font-size: var(--fontsize-h4);
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		cursor: pointer;
		user-select: none;
		
		.checkbox {
			position: absolute;
			opacity: 0;
			width: 1px;
			height: 1px;
		}
		
		.checkboxicon {
			display: inline-block;
			width: 1.4em;
			height: 1.4em;
			border: 2px solid currentColor;
			background-color: white;
			position: relative;
			flex-shrink: 0;
			color: black;
			
			&::after {
				content: '';
				position: absolute;
				display: none;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%) rotate(45deg) scale(0.7);
				width: 0.4em;
				height: 0.8em;
				border: solid currentColor;
				border-width: 0 6px 6px 0;
				
			}
		}
		
		.checkbox:checked + .checkboxicon {
			&::after {
				display: block;
				border-color: currentColor;
			}
		}
		
		.checkbox:focus-visible + .checkboxicon {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}
		
		&:hover .checkboxicon {
			border-width: 3px;
		}
	}
}