/* Revised February 2025 for ARC-5216*/

/* global box, fieldset resets */
* {
	box-sizing: border-box;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/* container styles */
.revised2025Feb {
	font-family: 'Inter';
	padding: 2vh 0 0 0;
	margin: 0 auto;
	max-width: 50rem;
}

.revised2025Feb .row {
	margin: 0 0 1.5rem 0;
}

.revised2025Feb .col-30 {
	float: left;
	width: 30%;
}

.revised2025Feb .col-70 {
	float: left;
	width: 70%;
}

/* clear floats after the columns */
.revised2025Feb .row::after {
	content: "";
	display: table;
	clear: both;
}

/* form, input styles */
.revised2025Feb input[type=text],
.revised2025Feb input[type=email],
.revised2025Feb input[type=tel],
.revised2025Feb select,
.revised2025Feb textarea {
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .5rem;
	resize: vertical;
	font-size: 1rem;
	display: block;
	width: 100%;
	margin: 0;
	padding: .8rem;
}
/* validate form after user has interacted with it: https://juniordev4life.com/posts/complete-guide-to-css-form-validation/ */
.revised2025Feb input:user-invalid {
	border: 2px solid rgba(255,0,0,1);
}

.revised2025Feb ::placeholder {
	color: rgba(0,0,0,.2);
}

.revised2025Feb select {
	/* Removes the default <select> styling: Safari issues */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Positions background arrow image */
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC');
	background-repeat: no-repeat;
	background-position: 97% center;
}

.revised2025Feb label {
	display: inline-block;
	margin: 0 1rem;
}

.revised2025Feb label i {
	color: rgba(0,0,0,.5);
	font-style: normal;
}

.revised2025Feb h1 {
	font-size: 1.6rem;
	line-height: 1.2;
	margin: 2rem 0;
}
/* use <input> 'required' for in-browser validation */
.revised2025Feb p.validation, .validation {
	color: rgba(255,0,0,1);
	margin: .3rem 0;
	font-size: 90%;
}

/* Submit button */
.revised2025Feb input[type=submit] {
	width: auto;
	align-items: center;
	border-radius: 6px;
	background: rgba(0,131,121,1);
	color: rgba(255,255,255,1);
	font-size: 1rem;
	border-width: 0;
	padding: .6rem 1rem;
	cursor: pointer;
	float: left;
}

.revised2025Feb input[type=submit]:hover {
	background: rgba(0,131,121,.8);
}

/* Responsive layout: when screen is <768px wide, force columns to stack; reposition elements for best practice in mobile screens */
@media screen and (max-width: 768px) {
	.revised2025Feb {
		padding: 2vh 5vw;
	}

		.revised2025Feb .col-30, .revised2025Feb .col-70, input[type=submit] {
			width: 100%;
			margin-top: 0;
		}

		.revised2025Feb label {
			margin: 0 0 .5rem 0;
		}

		.revised2025Feb input[type=submit] {
			float: left;
		}
}

@media screen and (min-width: 768px) {
	.revised2025Feb label {
		margin: .9rem 0;
	}
}