*,
*::before,
*::after {
  box-sizing: border-box;
}

a {
	text-decoration: none;
	font-style: italic;}
a:active {
	color: #00507f;
}

a:hover	{
	color: #00507f;
}

a:link {
	color: #00507f;
}

a:visited {
	color: #00507f;
}

body {
	background-color: #e7f0ff;
	font-family: Hobo Std, Helvetica, Arial, sans-serif;
	font-size: 15pt;
	font-weight: normal;
	color: #00707f;
	cursor: default;
	margin-top: 30pt;
	-webkit-text-size-adjust: 200%;
	text-size-adjust: 200%;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h2, h3, h4, h5, h6 {
	margin-left: 5px;
}

h1 {
	font-size: 20pt;
	text-align: center;
	margin: 0;
}

h2 {
	font-size: 16pt;
	text-align: center;
	margin: 0;
}

h3 {
	font-size: 13pt;
}

h4 {
	font-size: 12pt;
}

h5 {
	font-size: 11pt;
}

h6 {
	font-size: 10pt;
}

hr {
	height: 5px;
	background-color: #00707f;
	border: none;
}

button,
input {
	font-family: inherit;
	font-size: 15pt;
	text-align: left;
	margin: 0;
}

input[type=text],
input[type=email] {
	width: 954px;
	min-width: 954px;
	padding-left: 5px;
	padding-right: 1px;
}

button,
input[type=submit] {
	background-color: #00707f;
	color: #ffffff;
	border: none;
	padding: 8px 16px;
	text-decoration: none;
	margin: 2px 10px 2px 0px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
}

.inquiry-title {
	font-weight: bold;
}

li {
	text-align: left;
}

ol {
	margin-left: 32px;
	padding: 0;
}

p {
	margin-top: 10pt;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 0;
	text-align: justify;
}

pre {
	margin-left: 5px;
}

table {
	max-width: 900pt;
}

textarea.message-area {
	font-family: inherit;
	font-size: 15pt;
	text-align: left;
	width: 954px;
	min-height: initial;
	margin: 0;
}

th {
	text-align: left;
	padding-top: 10px;
}

ul {
	margin-left: 32px;
	padding: 0;
}

:root {
	--input-border: #00507f;
	--input-focus-h: 202;
	--input-focus-s: 100%;
	--input-focus-l: 42%;
}

.grow-wrap {
	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
	display: grid;
}

.grow-wrap::after {
	/* Note the weird space! Needed to preventy jumpy behavior */
	content: attr(data-replicated-value) " ";

	/* This is how textarea text behaves */
	white-space: pre-wrap;

	/* Hidden from view, clicks, and screen readers */
	visibility: hidden;
}

.grow-wrap > textarea {
	/* You could leave this, but after a user resizes, then it ruins the auto sizing */
	resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
	overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
	/* Identical styling required!! */
	border: 2px solid var(--input-border);
	border-radius: inherit;
	padding-left: 5px;
	padding-right: 1px;

	font-family: inherit;
	font-size: 15pt;
	text-align: left;
	width: 954px;
	min-height: initial;
	margin: 0;

	/* Place on top of each other */
	grid-area: 1 / 1 / 1 / 1;
}

.text-input,
.grow-wrap > textarea {
	border: 2px solid var(--input-border);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	transition: 250ms box-shadow ease-in-out;
}

.text-input:focus,
textarea:focus {
	border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
	box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8);
	outline: 3px solid transparent;
}