div.email-link
{
	font-size: 3.6em;
	margin: 1em auto;
	display: grid;
	place-items: center;
}
div.email-link a
{
	display: block;
}

body.nojs form.help-form
{
	display: none;
}

a.button
{
	display: inline-block;
	width: intrinsic;
	font-size: 0.85em;
	margin: 0 auto;
	padding: 0.15em 0.5em 0.25em 0.5em;
	background-color: var(--button-bg);
	border-color: var(--button-bg);
	color: var(--text);

}

div.message-fields
{
	display: contents;
}

form.help-form,
#search-container form
{
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	text-align: left;
}

fieldset
{
	display: contents;
	border: 0;
}

input,
textarea,
select
{
	border: 0.4rem solid transparent !important;
	outline: 0;
	border-radius: 0.6rem;
	-webkit-appearance: none;
	font-size: 0.525em;
	/* opacity: 0.8;
	transition-property: opacity;
	transition-duration: 200ms;
	transition-timing-function: ease-in-out; */
}

input:focus,
textarea:focus,
select:focus
{
	border-color: var(--bright) !important;
	opacity: 1;
}

div.labeled-text,
div.labeled-search,
div.file-attachment,
div.textarea,
div.submit-button,
div.labeled-select
{
	grid-column: 1 / span 9;
	margin: 0.25em 0;
}

div.labeled-text label,
div.labeled-text input,
div.labeled-search label,
div.labeled-search input,
div.textarea label,
div.textarea textarea,
div.file-attachment label,
div.file-attachment input,
div.labeled-select label,
div.labeled-select select
{
	display: block;
	width: 100%;
}

div.labeled-text label,
div.textarea label,
div.labeled-search label,
div.labeled-search input,
div.file-attachment label,
div.labeled-select label
{
	font-size: 0.85em;
	color: var(--subtle);
	margin-bottom: .25em
}

div.labeled-text input,
div.textarea textarea,
div.labeled-select select
{
	font-size: 1em;
	padding: 0.5em;
	font: inherit;
}

div.textarea p,
div.textarea ul
{
	color: var(--subtle);
}

p.helper-text
{
	margin: 2rem 0 0 0;
	padding: 0;
	grid-column: 1 / span 4;
	align-self: center;
	text-align: left;
}

p.helptext
{
	color: var(--subtle);
	font-size: 0.85em;
	margin: 0.15em 0.5em 1em 0.5em;
}

.hidden
{
	display: none;
}

div.textarea textarea
{
	height: 20em;
	padding: 0.5em;
}

div.current_address textarea,
div.order_address textarea
{
	height: 6em;
	padding: 0.5em;
}

a.button
{
	text-decoration: none !important;
	display: inline-block;
	margin: 0 auto;
	padding: 0.15em 0.5em 0.25em 0.5em;
	background-color: var(--interactive);
	border-color: var(--interactive);
	color: var(--text);
}

.submit-button
{
	text-align: center;
	margin: 2em auto !important;
}

.submit-button input[type=submit]
{
	display: inline-block;
	justify-self: center;
	background-color: var(--button-bg);
	color: var(--button-text);
	font: inherit;
	font-weight: 600;
	padding: 0.35em 1em 0.5em 1em;
	font-size: 2.4em;
	border-radius: 1em;
	cursor: pointer;
}

form.help-form
{
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

input[disabled]
{
	opacity: 0.35;
}

@media screen and (min-width: 240px)
{
	div.category
	{
		grid-column: 1 / span 10;
	}

	div.subject
	{
		grid-column: 1 / span 10;
	}

	div.order_number,
	div.serial_number
	{
		grid-column: 1 / span 10;
	}

	.labeled-text.name,
	.labeled-text.email
	{
		grid-column: 1 / span 10;
	}
}

@media screen and (min-width: 620px)
{
	div.category
	{
		grid-row: 1;
		grid-column: 1 / span 3;
	}

	div.subject
	{
		grid-row: 1;
		grid-column: 4 / span 7;
	}

	div.order_number,
	div.serial_number
	{
		grid-column: 1 / span 10;
	}

	.labeled-text.name
	{
		grid-column: 1 / span 5;
		margin-right: 0.25em;
	}

	.labeled-text.email
	{
		grid-column: 6 / span 5;
		margin-left: 0.25em;
	}
}

#category
{
	border-radius: 0.6rem;
	background-color: var(--button-bg);
	color: var(--button-text);
	font-weight: 700;
	position: relative;
	left: -0.1rem;
	line-height: inherit;
	cursor: pointer;
}

@media screen and (min-width: 620px)
{
	#category
	{
		border-radius: 0.6rem 0 0 0.6rem;
	}
}

.labeled-select.category
{
	position: relative;
}

.labeled-select.category::before
{
	content: "";
	width: 1em;
	height: calc(2.2em + 0.9rem);
	display: inline-block;
	background-color: var(--button-text);
	-webkit-mask-image: url("/images/disclosure-arrow.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	position: absolute;
	right: 1em;
	bottom: 0.1rem;
	z-index: 10;
	outline: 1px solid red;
	pointer-events: none;
}

#subject,
#order_number,
#serial_number
{
	border-radius: 0.6rem;
}

@media screen and (min-width: 620px)
{
	#subject
	{
		border-radius: 0 0.6rem 0.6rem 0;
	}
}

div.textarea,
div.submit-button,
div.instructions,
div.more,
div.file-attachment,
div.labeled-text.serial,
div.labeled-text.ext
{
	grid-column: 1 / span 10;
}

div.instructions
{
	text-align: center;
	font-size: 1.25em;
}

div.instructions ul
{
	margin: 0;
	display: inline-block;
}

div.instructions li
{
	margin: 0;
}

div.instructions a
{
	text-decoration: underline;
}

div.file-attachment
{
	display: grid;
}

div.file-attachment label[for="files"]
{
	display: inline-block;
	position: relative;
	border-radius: 6rem;
	padding: 0.35em 1em 0.5em 1em;
	background: var(--button-bg);
	color: var(--button-text);
	cursor: pointer;
	width: auto;
	justify-self: flex-start;

}

div.file-attachment input
{
	opacity: 0;
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

#attachedFiles
{
	color: var(--text);
	font-size: 0.85em;
}

#attachedFiles li
{
	color: var(--muted-green);
}

div.order_number,
div.serial_number,
div.current_address,
div.order_address,
div.body,
div.file-attachment,
div.triaged,
body[data-triage="press"] div.message-fields
{
	visibility: hidden;
	z-index: -10;
	position: absolute;
	left: -100vw;
}

body[data-triage="other"] div.body,
body[data-triage="other"] div.file-attachment,
body[data-triage="other"] div.order_number,
body[data-triage="other"] div.serial_number,
body[data-triage="warranty"] div.serial_number,
body[data-triage="warranty"] div.current_address,
body[data-triage="warranty"] div.body,
body[data-triage="warranty"] div.file-attachment,
body[data-triage="orders"] div.order_number,
body[data-triage="orders"] div.body,
body[data-triage="orders"] div.order_address,
body[data-triage="press"] div.triaged
{
	visibility: visible;
	z-index: unset;
	position: relative;
	left: 0;
}

body[data-triage="press"] div.category
{
	grid-row: 1;
	grid-column: 1 / span 10;
}

body[data-triage="press"] div.triaged
{
	grid-row: 2;
	grid-column: 1 / span 10;
}

body[data-triage="press"] #category
{
	border-radius: 0.6rem;
}

body[data-triage="orders"] div.body { order: 1; }
body[data-triage="orders"] div.order_number { order: 2; }
body[data-triage="orders"] div.order_address { order: 3; }
body[data-triage="orders"] div.name { order: 4; }
body[data-triage="orders"] div.email { order: 4; }

body[data-triage="other"] div.body { order: 1; }
body[data-triage="other"] div.serial_number { order: 2; }
body[data-triage="other"] div.order_number { order: 3; }
body[data-triage="other"] div.file-attachment { order: 4; }
body[data-triage="other"] div.name { order: 5; }
body[data-triage="other"] div.email { order: 5; }

body[data-triage="warranty"] div.body { order: 1; }
body[data-triage="warranty"] div.serial_number { order: 2; }
body[data-triage="warranty"] div.current_address { order: 3; }
body[data-triage="warranty"] div.file-attachment { order: 4; }
body[data-triage="warranty"] div.name { order: 5; }
body[data-triage="warranty"] div.email { order: 5; }

body div.name { order: 10; }
body div.email { order: 10; }
body div.submit-button { order: 10; }