// form component as a grid
.form_grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	color: rgb(8 15 33);
	row-gap: 1.5rem;
	column-gap: 1rem;
}

// size up to 12 columns on small or bigger devices
@media (min-width: 640px) {
	.form_grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: max-content;
	}
}

.custom_component_parent {
	// CSS here
}

.group_parent {
	// CSS here
}

.form_group {
	background-color: rgba(107, 114, 128, 0.20);
	border-radius: 25px;
	padding: 20px;
}

.spacer_parent {
	// CSS here
}

.form_heading {
	text-align: center;
	font-weight: bold;
	grid-column: span 12;
	margin: 0;
}

.heading_parent {
	// CSS here
}

h1.form_heading {
	font-size: 2.5rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
h2.form_heading {
	font-size: 1.75rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
h3.form_heading {
	font-size: 1.25rem;
	padding-top: 0;
	padding-bottom: 0.125rem;
}
h4.form_heading {
	font-size: 1rem;
	padding-top: 0;
	padding-bottom: 0;
}

.form_label {
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	font-size: 1rem;
	font-weight: bold;
	margin-left: 0.5rem;
	margin-bottom: 0.25rem;
	display: inline;
}

.text_input_parent {
	// CSS here
}
.text_area_parent {
	// CSS here
}
.form_input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	background-color: #f7fafc;
	border-width: 2px;
	border-color: #e2e8f0;
	border-style: solid;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	border-radius: 0.375rem;
	line-height: 1.25;
	outline: none;
}
.form_input:focus {
	background-color: #ffffff;
	border-color: #90cdf4;
}
.form_input_invalid {
	border: 2px solid #ef4444;
	background-color: #ffd4d4;
}
.form_error {
	display: inline;
	padding-left: 0.25rem;
	color: #ef4444;
}

.button_parent {
	display: flex;
	flex-direction: column;
}
.form_button {
	display: block;
	outline: none;
	border: none;
	border-radius: 1rem;
	background-color: #0477d6;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0.55rem 1.25rem;
	font-size: 1rem;
	appearance: none;
	min-height: 40px;
}

.checkbox_parent {
	// CSS here
}
.form_checkbox {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	accent-color: rgb(14 165 233);
	font-size: 1rem;
	font-weight: bold;
	padding: 0.5rem;
	margin-left: 0.5rem;
	margin-bottom: 0.25rem;
}
.form_checkbox_checked {
	background-color: rgb(14 165 233);
}
.form_checkbox_unchecked {
	background-color: rgb(107 114 128);
}

.submit_parent {
	@extend .button_parent;
}

.form_submit {
	@extend .form_button;
	@extend .col-span-full;
	margin: 0 auto;
}

.form_submit:hover {
	background-color: #005fb3;
}

.output_parent {
	// CSS here
}

.radio_buttons_parent {
	// CSS here
}

.select_parent {
	// CSS here
}

.stepper_parent {
	// CSS here
}

.slider_parent {
	// CSS here
}

// column widths
.col-span-full {
	grid-column: 1 / -1;
} 
.col-span-12 {
	grid-column: span 12 / span 12;
}
.col-span-6 {
	grid-column: span 6 / span 6;
}
.col-span-4 {
	grid-column: span 4 / span 4;
}
.col-span-3 {
	grid-column: span 3 / span 3;
}
.col-span-2 {
	grid-column: span 2 / span 2;
}
.col-span-1 {
	grid-column: span 1 / span 1;
}