*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }

:root {
	--header-background-color: #FFFFFF;
	--header-color: #262626;

	--primary-background-color: #FFFFFF;
	--primary-color: #262626;
	--text-over-photo-color: #FFFFFF;
	--record-text-dimmed-color: #A8A8A8;

	--secondary-background-color: #F5F5F5;
	--secondary-separation-color: #cccccc;

	--primary-link-color: #5B58FF;
	--primary-link-active-color: #5150b2;

	--call-to-action-link-background-color: #5B58FF;
	--call-to-action-link-color: #FFFF;
	--call-to-action-link-active-background-color: #5150b2;

	--form-input-accent-background-color: #5B58FF;
	--form-input-accent-color: #FFFFFF;

	--field-datum-background-color:  #FFFFFF;

	--donate-background-color: #262626;
	--donate-color: #FFFFFF;

	--evacuation-button-background-color: #F94C00;
	--evacuation-button-color: #FFFF;

	--card-border-radius: 10px;
}

@font-face {
	font-family: "Urbanist";
	src: url('/fonts/Urbanist[wght].ttf') format("truetype-variations");
	font-weight: 1 999;
}

html {
	font: 16px/1.5 "Urbanist", system-ui, sans-serif;
	background-color: var(--primary-background-color);
	color: var(--primary-color);
}


/* overall layout */

html, body {
	height: 100%;
}

body > footer {
	position: sticky;
	top: 100vh;
}

footer {
	width: 100%;
	text-align: center;
	padding: 0;
}

/* general styling */

h1, h2 {
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	line-height: 25px;
	margin: 16px 12px;
}
h2 {
	font-size: 18px;
	line-height: 24px;
}

p {
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	margin: 16px 12px;
}

main > h1 {
	font-size: 30px;
	font-weight: 600;
	line-height: 32px;
	letter-spacing: 0.3px;
}


a, a:link, a:visited, a:hover, a:active {
	color: var(--primary-link-color);
}
a:hover, a:active {
	color: var(--primary-link-active-color);
}

ul {
	padding-left: 20px;
	font-size: 18px;
	line-height: 1.5;
}
li {
	margin-bottom: 8px;
}


/* basic page header-footer layout */

.site-header {
	background-color: var(--header-background-color);
	color: var(--header-color);
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1px;
	margin: 0 10px;;
	border-bottom: 1px solid var(--header-color);
}
.site-header .page-logo,
.site-header .user-nav-menu {
	width: 95px;
}
.site-header a {
	display: block;
	height: 20px;
	text-decoration: none;
	color: var(--header-color);
}
.page-logo img {
	height: 12px;
	max-height: 12px;
}
.site-header .user-nav-menu {
	line-height: 20px;
}

.visitor-landing-page .site-header,
.user-home-page .site-header {
	border-bottom-color: transparent;
}


.site-footer .donate {
	background-color: var(--donate-background-color);
	color: var(--donate-color);
	height: 50px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.site-footer .donate a {
	font-size: 16px;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--donate-color);
}
.site-footer .legal {
	font-size: 12px;
	font-weight: 400;
	padding: 16px 0;
	display: flex;
	justify-content: center;
}
.site-footer .legal a {
	color: var(--primary-color);
}
.site-footer .legal .copyright  {
	padding-right: 4px;
	border-right: 1px solid var(--primary-color);
	margin: 0;
}
.site-footer .legal a {
	padding-left: 4px;
	margin: 0;
}


.major-actions a.to-confirmation,
a.call-to-action,
a.call-to-action:link,
a.call-to-action:visited,
a.call-to-action:hover,
a.call-to-action:active {
	display: block;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: normal;
	padding: 10px 20px;
	border-radius: 20px;
	margin: 28px auto;
	background: var(--call-to-action-link-background-color);
	color: var(--call-to-action-link-color);
	user-select: none;
	max-width: 180px;
	width: 180px;
	height: 40px;
}
.major-actions a.to-confirmation:hover,
.major-actions a.to-confirmation:active,
a.call-to-action:hover,
a.call-to-action:active {
	background: var(--call-to-action-link-active-background-color);
}


.navigation.controls {
	margin: 4px 10px 8px 10px;
	max-width: 360px;
	display: flex;
	gap: 16px;
}
.navigation.controls a {
	color: var(--primary-color);
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
}

a.return-home {
	background: url("/i/go-home-icon.svg") no-repeat 0 center;
	background-size: 20px 20px;
	padding-left: 32px;
	color: #262626;
	font-size: 18px;
	font-weight: 500;
	line-height: 34px;
	text-decoration: none;
}

/* usual forms */

form {
	padding-bottom: 16px;
}
form > h1 {
	margin: 28px 10px 16px 10px;
}
form > h1:nth-child(n+2) {
	margin-top: 32px;
}
form h1 .instruct {
	margin-left: 12px;
}
form h1 .instruct::before {
	content: "(";
}
form h1 .instruct::after {
	content: ")";
}
form h2.checkboxes-instruction {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.14px;
	margin-top: 28px;
}
form input,
form textarea {
	font-family: system-ui, sans-serif;
}
form .f {
	margin: 24px 10px;
}
form .f.check {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 12px;
	margin-bottom: 12px;
}
form .f.check.lone {
	justify-content: center;
}
form .f.radio {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 12px;
	margin-bottom: 12px;
}
form .f label {
	display: block;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 700;
	margin-left: 1px;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
form .f.radio label {
	font-size: 18px;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	padding-top: 6px;
}
form .f.check label {
	font-size: 18px;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	padding-top: 6px;
}
form .f.check.legal label {
	font-size: 14px;
}
form .f.required label::after {
	content: " * ";
	color: var(--primary-color);
}
form .f input,
form .f select {
	display: block;
	width: 100%;
}
form input[type=text],
form input[type=email],
form input[type=tel] {
	font-size: 18px;
	padding: 8px;
	border-radius: 5px;
	border: 1px solid var(--primary-color);
}
form input[type=checkbox] {
	width: 25px;
	height: 25px;
	min-width: 25px;
	accent-color: var(--form-input-accent-background-color);
}
form input[type=radio] {
	width: 25px;
	height: 25px;
	min-width: 25px;
	accent-color: var(--form-input-accent-background-color);
}
form input[type=submit] {
	display: block;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: normal;
	padding: 10px 24px;
	border-radius: 20px;
	border: none;
	margin: 28px auto;
	background: var(--call-to-action-link-background-color);
	color: var(--call-to-action-link-color);
	user-select: none;
	height: 40px;
}
form .f input[type=checkbox] + label {
	color: var(--primary-color);
	font-size: 18px;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}
form .f select {
	appearance: none;
	border: 1px solid var(--primary-color);
	padding: 8px;
	color: var(--primary-color);
	font-size: 18px;
	border-radius: 5px;
	background: white url("/i/select-arrow.svg") right 6px center no-repeat;
}
form .f textarea {
	width: 100%;
	font-size: 18px;
	padding: 8px;
	border-radius: 5px;
	border: 1px solid var(--primary-color);
	resize: none;
}
form .f.gang input:not(:first-of-type) {
	margin-top: 11px;
}
form .small-fields-group {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 10px;
}
form .small-fields-group .f {
	margin: 0;
	flex-grow: 1;
	flex-basis: 0;
}
form .small-fields-group .f.bigger-data {
	flex-grow: 2;
}
form .f.small-value input {
	width: 65%;
}
form .checkbox-bypassed-field-group {
	display: grid;
	grid-template-areas:
			"check lab"
			"governed governed";
	column-gap: 12px;
	align-items: center;
	margin-top: 36px;
}
form .checkbox-bypassed-field-group > label:first-of-type {
	grid-area: lab;
	display: block;
	color: var(--primary-color);
	margin: 0 10px 8px 1px;
	font-size: 18px;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	padding-top: 6px;
}
form .checkbox-bypassed-field-group > input:first-of-type {
	grid-area: check;
	margin-left: 10px;
}
form .checkbox-bypassed-field-group input.governor[type=checkbox] ~ .bypassed-fields {
	grid-area: governed;
}
form .checkbox-bypassed-field-group input.governor[type=checkbox]:checked ~ .bypassed-fields {
	display: none;
}
form .actions {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
form .actions input[type="submit"] {
	padding: 10px 16px 12px 16px;
	margin: 40px 0;
}
form .actions a {
	font-size: 16px;
	font-weight: bold;
	/*text-decoration: none;*/
	/*color: var(--primary-link-color);*/
	/*margin: 12px 0;*/
}
.f.conditional {
	display: none;
}
.f.conditional.available {
	display: block;
}

.f .explainer {
	color: var(--primary-color);
	margin: 8px 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0.14px;
}
.f.legal a {
	color: var(--primary-color);
}

form.action-button {
	padding: 0;
}
form.action-button input {
	padding: 4px 8px;
	margin: 8px 0 8px 8px
}
form.additional-action {
	margin-top: -20px;
}
form.additional-action input[type=submit] {
	background: transparent;
	font-size: 16px;
	color: var(--primary-link-color);
}

form p.guidance {
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.12px;
}

form.simple-action {
	text-align: center;
}
form.simple-action .f input {
	margin-left: auto;
	margin-right: auto;
}
form.simple-action .actions input,
form.simple-action .actions a {
	margin-top: 16px;
	margin-bottom: 40px;
}


/* form-like, field-wise presentation of a record */

.record {
	background-color: var(--secondary-background-color);
	border-radius: var(--card-border-radius);
	margin: 12px 8px 24px 8px;
	padding: 8px;
}
.record > h2 {
	font-size: 18px;
	margin: 16px 0 12px 0;
}
.record .actions {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	margin: 28px 0 24px 0;
	gap: 12px;
}
.record .actions form {
	padding: 0;
}
.record .actions input[type="submit"] {
	padding: 12px 16px;
	margin: 0;
}
.record table {
	border-spacing: 0 8px;
}
.record .field + table {
	margin-top: -12px;
}

.record .field h1,
.individually-managed-field h1 {
	margin: 16px 0 8px 1px;
	text-transform: uppercase;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;

}
.record .datum,
.field .datum,
.individually-managed-field .datum {
	font-size: 18px;
	margin: 8px 0 18px 0;
	min-height: 40px;
	display: block;
	padding: 0 3px;
}
.field.small-value .datum {
	width: 65%;
}

.record .small-fields-group {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.record .small-fields-group .field {
	margin: 0;
	flex-grow: 1;
	flex-basis: 0;
}
.record .small-fields-group .field.bigger-data {
	flex-grow: 2;
}

.individually-managed-field {
	display: grid;
	grid-template-areas:
			"label label"
			"datum actions";
	margin-bottom: 10px;
}
.individually-managed-field h1 {
	grid-area: label;
}
.individually-managed-field .datum {
	grid-area: datum;
	margin: 0;
}
.individually-managed-field a {
	grid-area: actions;
	justify-self: end;
}
.individually-managed-field a.edit-item {
	height: 40px;
	min-height: 40px;
	padding-top: 9px;
}

.record.titled {
	margin-top: 12px;
}
.record > h1 {
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.2px;
	margin: 12px 0;
}
.record .field {
	margin: 12px 0;
}
.record .record-section {
	margin: 22px 0;
}
.record-section > *:not(h1) {
	margin: 12px 0;
}
.record-section h1 {
	margin: 16px 0;
}

.very-concise {
	display: flex;
	justify-content: space-between;
	padding: 0;
	align-items: center;
}
ul.very-concise {
	list-style: none;
}

.concise-twos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 0;
}
ul.concise-twos {
	list-style: none;
}
.concise-twos li {
	margin: 8px 0;
}

.record table.fields td {
	font-size: 18px;
}

.yesno {
	min-width: 32px;
	background: transparent url("/i/checklist-false-icon-gray.svg") top 4px left no-repeat;
	text-indent: -99999em;
}
.yesno[data-value=true] {
	background-image: url("/i/checklist-true-icon.svg");
}
.yesno[data-value=false] + td {
	color: var(--record-text-dimmed-color);
	text-decoration: line-through;
}
.true-false {
	display: inline-block;
	background: transparent url("/i/checklist-false-icon-gray.svg") left center no-repeat;
	padding-left: 32px;
}
.true-false[data-value=true] {
	background-image: url("/i/checklist-true-icon.svg");
}

p.instruct {
	font-style: italic;
}


.record .controls {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 16px 0 16px 0;
}
.record .controls a,
.individually-managed-field a {
	color: var(--primary-link-color);
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
.record .controls a {
	font-size: 16px;
	text-decoration: none;
	margin: 16px 0 6px 0;
}
a.edit-item {
	background-repeat: no-repeat;
	background-image: url("/i/link-icon-edit-5B58FF.svg");
	background-position: 2px center;
	background-size: 20px 20px;
	padding-left: 28px;
	height: 20px;
}
a.cancel-item {
	background-repeat: no-repeat;
	background-image: url("/i/link-icon-cancel-5B58FF.svg");
	background-position: 2px center;
	background-size: 20px 20px;
	padding-left: 28px;
	height: 23px;
}
a.mark-complete {
	background-repeat: no-repeat;
	background-image: url("/i/link-icon-complete-5B58FF.svg");
	background-position: 2px center;
	background-size: 20px;
	padding-left: 28px;
	height: 23px;
}
a.delete-item {
	background-repeat: no-repeat;
	background-image: url("/i/link-icon-trash-bin-5B58FF.svg");
	background-position: 5px center;
	background-size: 13px 16px;
	padding-left: 28px;
}
a.add-item {
	color: var(--primary-link-color);
	background-repeat: no-repeat;
	background-image: url("/i/link-icon-add-item-5B58FF.svg");
	background-position: 2px center;
	background-size: 17px;
	padding-left: 28px;
}
a.exit-navigation {
	color: var(--primary-link-color);
	background-repeat: no-repeat;
	background-image: url("/i/go-back-icon-5B58FF.svg");
	background-position: 2px center;
	background-size: 17px;
	padding-left: 28px;
}

h2.records-note {
	margin-left: 18px;
}

.records ~ .controls {
	display: flex;
	padding: 0 14px;
	margin: 12px 0 12px 4px;
	justify-content: space-around;
}
.records ~ .controls a {
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
.records ~ .controls:last-child,
.records ~ a:last-child {
	margin-bottom: 48px;
}
.records ~ .controls.verbose a {
	margin: 12px 0;
}
.records ~ .controls.verbose {
	flex-direction: column;
	margin: 0 32px 48px 32px;
}
ul.low-links {
	list-style: none;
	padding-left: 0;
}
.low-links li {
	margin: 32px auto;
	text-align: center;
}
.low-links a {
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.workflow-navigation {
	display: flex;
	padding: 0 14px;
	margin: 12px 0 36px 4px;
	justify-content: space-around;
}
.workflow-navigation a {
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.major-actions {
	display: flex;
	margin-bottom: 28px;
}


/* user menu */

.user-nav-menu {
	display: flex;
	justify-content: flex-end;
	line-height: 30px;
	position: relative;
}
label[for=user-menu-toggle] {
	background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0NCcgaGVpZ2h0PSczMCcgdmlld0JveD0nMCAwIDQ0IDMwJz48Y2lyY2xlIGN4PScxNScgY3k9JzE1JyByPScxNC40JyBzdHJva2U9JyMyNjI2MjYnIGZpbGw9J25vbmUnIC8+PHBhdGggZD0nTTM0LDE1IGw0LjUsNS4yNSBsNC41LC01LjI1JyBzdHJva2U9JyMyNjI2MjYnIGZpbGw9J25vbmUnLz48L3N2Zz4K") no-repeat left center;
	color: var(--primary-color);
	width: 44px;
	display: block;
	text-align: center;
	text-indent: -15px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	height: 30px;
	padding-top: 5px;
}
input#user-menu-toggle {
	opacity: 0;
}
input#user-menu-toggle:checked ~ label { /* closer */
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI3IDI0Jz48cGF0aCBzdHJva2U9JyMyNjI2MjYnIHN0cm9rZS13aWR0aD0nMScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJwpkPSdNIDQsMi41IEwgMjMsMjEuNSBNIDQsMjEuNSBMIDIzLDIuNScvPjwvc3ZnPgo=");
	text-indent: 100%;
}
input#user-menu-toggle:checked ~ .menu {
	visibility: visible;
	z-index: 51;
}
input#user-menu-toggle:not(:checked) ~ .menu {
	visibility: hidden;
}
.user-nav-menu .menu {
	background-color: var(--primary-background-color);
	color: var(--primary-color);
	position: absolute;
	right: 8px;
	top: 41px;
	list-style: none;
	width: 165px;
	padding: 8px 18px;
	border: 1px solid var(--primary-color);
	border-radius: var(--card-border-radius);
}
.user-nav-menu a {
	text-decoration: none;
	color: var(--header-color);
}
.user-nav-menu .menu a {
	font-size: 18px;
	letter-spacing: 2px;
}
.menu li {
	list-style: none;
	text-align: left;
	margin: 18px 0;
}

.leading-hero label[for=user-menu-toggle] {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0NCcgaGVpZ2h0PSczMCcgdmlld0JveD0nMCAwIDQ0IDMwJz48Y2lyY2xlIGN4PScxNScgY3k9JzE1JyByPScxNC40JyBzdHJva2U9JyNGRkZGRkYnIGZpbGw9J25vbmUnIC8+PHBhdGggZD0nTTM0LDE1IGw0LjUsNS4yNSBsNC41LC01LjI1JyBzdHJva2U9JyNGRkZGRkYnIGZpbGw9J25vbmUnLz48L3N2Zz4K");
	color: var(--text-over-photo-color);
}
.leading-hero input#user-menu-toggle:checked ~ label { /* closer */
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI3IDI0Jz48cGF0aCBzdHJva2U9JyNGRkZGRkYnIHN0cm9rZS13aWR0aD0nMScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJwpkPSdNIDQsMi41IEwgMjMsMjEuNSBNIDQsMjEuNSBMIDIzLDIuNScvPjwvc3ZnPgo=");
}
.leading-hero .user-nav-menu.sign-in a {
	color: var(--text-over-photo-color);
}

.user-notifications {
	padding: 8px;
	list-style: none;
	max-width: 360px;
	margin: 6px auto;
}
.hero + .user-notifications {
	margin-top: -32px;
}
.user-notifications li {
	border-left-width: 4px;
	border-left-style: solid;
	margin: 8px 0;
}
.user-notifications .msg {
	position: relative;
	padding: 8px 56px;
}
.user-notifications .msg::before {
	content: "";
	position: absolute;
	left: 14px;
	display: block;
	width: 24px;
	height: 24px;
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center;
}
.user-notifications .alert-success {
	background-color: #ecf3ec;
	border-left-color: #00a91c;
}
.user-notifications .alert-success .msg::before {
	background-image: url("/i/alert-success.svg");
}
.user-notifications .alert-info {
	background-color: #e7f6f8;
	border-left-color: #00bde3;
}
.user-notifications .alert-info .msg::before {
	background: url("/i/alert-info.svg") center center no-repeat;
}
.user-notifications .alert-warning {
	background-color: #faf3d1;
	border-left-color: #ffbe2e;
}
.user-notifications .alert-warning .msg::before {
	background: url("/i/alert-warning.svg") center center no-repeat;
}
.user-notifications .alert-error {
	background-color: #f4e3db;
	border-left-color: #d54309;
}
.user-notifications .alert-error .msg::before {
	background: url("/i/alert-error.svg") center center no-repeat;
}


a.request-evacuation {
	display: block;
	background-color: var(--evacuation-button-background-color);
	color: var(--evacuation-button-color);
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	height: 30px;
	border-radius: 30px;
	padding: 9px 12px;
	user-select: none;
}
a.request-evacuation:not([href]) {
	padding-top: 3px;
}
a.request-evacuation .coming-soon {
	text-transform: uppercase;
	display: block;
	font-size: 10px;
	margin-top: 2px;
}


.site-explainer {
	font-weight: 400;
	padding: 0;
	margin: 50px 32px;
	text-align: center;
}
.site-explainer h1 {
	font-size: 30px;
	font-weight: 600;
	line-height: 32px;
	letter-spacing: 0.3px;
	margin-bottom: 20px;
}
.site-explainer p {
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
}

.calling,
.notice {
	border-radius: 10px;
	border: 1px solid var(--primary-color);
	text-align: center;
	margin: 15px;
}
.calling > h1,
.growing > h1,
.notice > h1 {
	font-size: 25px;
	font-style: normal;
	font-weight: 700;
	line-height: 35px;
	letter-spacing: 0.25px;
	margin: 20px 15px;
}
.calling p,
.notice p {
	margin: 20px 15px;
}


.multisectional {
	overflow: hidden;
}
.multisectional input[name="sections"] {
	display: none;
}
.multisectional input[name="sections"] + label {
	font-size: 18px;
	font-weight: bold;
	text-align: left;
	border: 1px solid var(--primary-color);
	border-radius: 2px;
	display: block;
	padding: 11px 16px;
	margin: 20px 12px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: 22px;
	background-position: right 16px center;
	background-color: var(--primary-color); /* TODO */
	color: var(--primary-background-color);
	background-image: url("/i/chevron-circle-down-white.svg");
}
.multisectional input[name="sections"]:checked + label {
	background-color: var(--primary-background-color);
	color: var(--primary-color);
	background-image: url("/i/chevron-circle-right-23295D.svg");
}
.multisectional input[name="sections"] ~ .content {
	max-height: 100%;
	transition: all 150ms;
}
.multisectional input[name="sections"]:checked ~ .content {
	transition: all 150ms;
	max-height: 0;
	overflow: hidden;
}


.vcard {
	line-height: 1.75;
	margin: 16px 12px;
}
.vcard > div { margin: 16px 0; }
.vcard .fn { margin: 16px 0 0 0; }
.vcard .adr { margin: 0 0 16px 0; }
.vcard .postal-code, .vcard .email, .vcard .tel { margin-left: 8px; }


.hero  {
	color: var(--text-over-photo-color);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	padding-top: 5px;
}
.hero h1 {
	color: var(--text-over-photo-color);
	font-size: 30px;
	line-height: 36px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-align: center;
	margin-top: 100px;
}
.hero p {
	color: var(--text-over-photo-color);
	line-height: 1.5;
	text-align: center;
}



div.location-details {
	margin: 12px 0;
	padding-left: 32px;
	background: transparent url("/i/location-icon-262626.svg") left top 3px no-repeat;
	font-size: 18px;
}
div.location-details > div {
	line-height: 1.75;
}
div.location-details .city {
	display: inline-block;
}
div.location-details .state {
	display: inline-block;
}
div.location-details .postal-code {
	display: inline-block;
	margin-left: 14px;
}

.small-fields-group .f.city { flex-grow: 5; }
.small-fields-group .f.postal-code { flex-grow: 3; }



.page-heading {
	margin: 18px 18px 32px;
}
.page-heading h1 {
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.2px;
	margin: 0;
	padding: 0;
}
.page-heading .guidance {
	margin: 8px 0 4px 0;
}
.page-heading .guidance a {
	margin: 0 8px;
}


/* specifics */


.privacy-policy-page main > section,
.terms-and-conditions {
	color: black;
	background: white;
	margin: 18px 8px 32px 8px;
}
.terms-and-conditions h2 span.heading {
	text-decoration: underline;
}
.privacy-policy-page p,
.privacy-policy-page ul,
.terms-and-conditions-page p,
.terms-and-conditions-page ul {
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
}

.growing {
	background-color: #404040;
	color: var(--text-over-photo-color);
	margin: 24px 0 0;
	padding: 32px 1px;
}
.growing > h1 {
	color: var(--text-over-photo-color);
	text-align: center;
	margin: 0 auto 12px auto;
}
.growing .stat {
	text-align: center;
	font-size: 22px;
	font-weight: 500;
}

.learn-more {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 5px;
	background-image: url("/i/landing-page-hero-horse.jpeg");
	height: 377px;
	background-color: transparent;
	color: var(--text-over-photo-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
}
.learn-more h1 {
	text-align: center;
	color: var(--text-over-photo-color);
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	margin: 0 48px;
}
.learn-more a.call-to-action {
	background: transparent;
	color: var(--call-to-action-link-color);
	border: 1px solid var(--call-to-action-link-color);
	width: 140px;
}


.sign-in-flow form,
.sign-in-flow .alternative {
	margin: 0 8px;
}
.sign-in-flow .alternative {
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.18px;
}
.sign-in-flow .alternative a {
	color: var(--primary-color);
}


.evacuations-dashboard > h1 {
	margin: 16px 8px 8px 8px;
}
.evacuation-requests-list {
	list-style: none;
	padding: 0;
	margin-bottom: 40px;
}
.evacuation-requests-list li .detail-link {
	border: 1px solid var(--secondary-separation-color);
	border-radius: 4px;
	margin: 12px 4px;
	display: grid;
	padding: 12px 32px;
	text-decoration: none;
	color: var(--primary-color);
	background:
			url("/i/evacuation-alert-icon-F94C00.svg") left 4px top 15px / 22px 22px no-repeat,
			url("/i/go-somewhere-chevron-5B58FF.svg") right 4px top 16px / 14px 18px no-repeat;
}
.evacuation-requests-list li.fully-supported .detail-link {
	background:
			url("/i/evacuation-alert-nonurgent-icon-F94C00.svg") left 6px top 16px / 18px 18px no-repeat,
			url("/i/go-somewhere-chevron-5B58FF.svg") right 4px top 16px / 14px 18px no-repeat;
}
.evacuation-requests-list.own-requests li .detail-link {
	background:
			url("/i/evacuation-request-icon-F94C00.svg") left 4px top 17px / 18px 18px no-repeat,
			url("/i/go-somewhere-chevron-5B58FF.svg") right 4px top 16px / 14px 18px no-repeat;
}

.evacuation-requests-list.driver-alerts li .detail-link {
	grid-template-areas:
			"details time"
			"notes notes";
}
.evacuation-requests-list .initiated-at {
	grid-area: time;
	text-align: center;
	text-transform: lowercase;
}
.evacuation-requests-list .driving-details {
	grid-area: details;
}
.evacuation-requests-list .driving-details div {
	margin-bottom: 4px;
}
.evacuation-requests-list .additional-driver-notes {
	grid-area: notes;
}

.evacuation-requests-list.own-requests li .detail-link {
	grid-template-areas:
			"time time"
			"notes notes";
}
.evacuation-requests-list .summary-notes {
	grid-area: notes;
}
.evacuation-requests-list .summary-notes div {
	margin-top: 4px;
}

.registration-form.titled {
	margin-top: 36px;
}
.registration-form > h1 {
	margin-top: -28px;
	background-color: var(--primary-background-color);
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: var(--card-border-radius);
	padding: 6px 12px;
}

.verification {
	display: grid;
	grid-template-areas:
		"status actions"
		"explainer explainer";
	align-items: center;
	justify-content: space-between;
	margin: 12px 0;
}
.verification .status {
	background: url("/i/unverified-icon.svg") left 2px center no-repeat;
	padding-left: 30px;
	grid-area: status;
}
.verification .status[data-status=verified] {
	background-image: url("/i/verified-icon-009922.svg");
}
.verification .action-button {
	grid-area: actions;
	justify-self: end;
}
.verification p {
	grid-area: explainer;
	margin: 8px 4px 0 4px;
}



.sign-in-page .site-header a.request-evacuation,
.join-page .site-header a.request-evacuation,
.sign-in-verification-page .site-header a.request-evacuation {
	display: none;
}

.user-nav-menu.sign-in a[href="/join"] {
	margin-right: 16px;
}
body.sign-in-page .user-nav-menu a[href="/sign-in"],
body.join-page .user-nav-menu a[href="/join"] {
	display: none;
}

body.sign-in-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.faq-page .site-header {
	border-bottom-color: transparent;
	background-color: transparent;
}
.faq-page .hero {
	background: linear-gradient(to top, rgba(49, 49, 49, 0.40), rgba(49, 49, 49, 0.40)),
		var(--primary-background-color) url("/i/MOR09574.jpeg") no-repeat top;
	height: 250px;
	margin-top: -50px;
}
.faq-page main {
	margin-bottom: 64px;
}

.faq-page section > h1 {
	margin: 36px 12px 8px 12px;
	text-align: center;
}
.faq-page article {
	margin: 36px 12px 0 12px;
}
.faq-page p {
	line-height: 1.5;
}



.about-us-page .site-header,
.feedback-page .site-header {
	border-bottom-color: transparent;
}
.about-us-page .hero {
	background: linear-gradient(to top, rgba(49, 49, 49, 0.40), rgba(49, 49, 49, 0.40)),
		var(--primary-background-color) url("/i/ragnar.jpeg") no-repeat top;
	height: 250px;
	margin-top: -50px;
}
.about-us-page article {
	margin: 32px 0 64px 0;
}

.feedback-page .hero {
	background: linear-gradient(to top, rgba(49, 49, 49, 0.40), rgba(49, 49, 49, 0.40)),
	var(--primary-background-color) url("/i/feedback.jpeg") no-repeat top;
	height: 265px;
	margin-top: -50px;
}
.feedback-page .hero h1 {
	margin-top: 70px;
}
.feedback-page article {
	margin: 32px 0 24px 0;
}


.user-home-page .hero {
	background-image: url("/i/MOR02108.jpg");
	height: 199px;
}


.horse-trailers,
.horse-locations {
	list-style: none;
	padding: 0;
}


.horse-locations .special-horse-considerations td,
.horse-locations .special-site-considerations td {
	/*height: 54px;*/
	vertical-align: top;
}


.dashboard a.call-to-action {
	max-width: 240px;
	width: 240px;
}
.requesting-evacuation-workflow a.call-to-action,
.user-home-page .dashboard a.call-to-action {
	max-width: 270px;
	width: 270px;
}


.donate-page .site-header {
	border-bottom-color: transparent;
}
.donate-page .hero {
	background: linear-gradient(to top, rgba(49, 49, 49, 0.40), rgba(49, 49, 49, 0.40)),
		var(--primary-background-color) url("/i/bristol.jpeg") no-repeat top;
	height: 396px;
	margin-top: -50px;
}
.donate-page .site-footer .donate {
	display: none;
}
.donate-page main > .blackbaud-container {
	max-width: 599px;
	padding: 10px 0;
	margin: 18px 0;
}


.horse-alert-is-free-page {
	display: flex;
}
.horse-alert-is-free-page h1 {
	color: var(--text-over-photo-color);
	text-align: center;
	font-size: 30px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: 0.3px;
	margin: 80px 32px 50px;
}
.horse-alert-is-free-page .explainer {
	color: var(--text-over-photo-color);
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.18px;
}
.horse-alert-is-free-page a.continue {
	color: var(--text-over-photo-color);
	display: block;
	text-align: center;
	margin: 90px auto 30px auto;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.18px;
	text-decoration-line: underline;
}


h1.activity {
	font-size: 24px;
	margin-bottom: 18px;
}

.drop-off-locations .radio label {
	padding-left: 4px;
}
label.location-details {
	display: flex;
	font-size: 18px;
}
label.location-details .street-addr,
label.location-details .city-etc {
	display: block;
	line-height: 1.75;
}

.record.evacuation-alert > p,
.record.evacuation-request > p,
.record.driver-acceptance > p {
	margin: 12px 0;
}
.record.evacuation-alert h1,
.record.evacuation-request h1 {
	margin: 16px 12px 16px 0;
}
.record.evacuation-alert .summary-notes,
.record.evacuation-request .summary-notes {
	margin: 16px 12px 16px 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
}
.record.evacuation-alert .summary-notes > div,
.record.evacuation-request .summary-notes > div {
	margin-bottom: 6px;
}

.record.evacuation-alert .location,
.record.evacuation-request .location {
	margin-left: 9px;
	margin-bottom: 18px;
	border-left: 1px solid var(--secondary-background-color);
}
.record.evacuation-alert .location.pickup,
.record.evacuation-request .location.pickup {
	margin-bottom: 0;
	padding-bottom: 18px;
	border-left: 1px dashed var(--primary-color);
}
.record.evacuation-alert .location h1,
.record.evacuation-request .location h1 {
	margin: 0 0 8px -12.5px;
	padding: 0 0 0 32px;
	display: flex;
	background: var(--secondary-background-color) url("/i/location-icon-262626.svg") left center no-repeat;
}
.record.evacuation-alert .location-details,
.record.evacuation-request .location-details {
	margin: 0;
	padding-left: 20px;
	background: none;
}

.location.with-directions {
	display: grid;
	grid-template-areas:
		"label directions"
		"details details";
}
a.directions-link {
	padding-right: 38px;
	background: url("/i/map-directions-icon.svg") no-repeat right top;
	background-size: 32px;
	grid-area: directions;
	text-align: right;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}
.location.with-directions > h1 {
	grid-area: label;
}
.location.with-directions > .location-details {
	grid-area: details;
}

.person-detail {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 18px;
}
.person-detail .name {
}
.person-detail .telephone {
	text-align: right;
	letter-spacing: 2px;
}
.record .major-actions {
	margin-bottom: 0;
}

.evacuation-alert-page a.to-confirmation {
	max-width: 46%;
}

.notes {
	border: 1px solid var(--secondary-separation-color);
	padding: 4px 8px;
}

.legal-waiver {
	margin-top: 28px;
}

@media screen and (min-width: 391px) {
	.site-header,
	.hero,
	.user-notifications,
	.navigation.controls,
	main,
	.site-footer {
		max-width: 390px;
		margin: 0 auto;
	}
	.navigation.controls,
	.site-header {
		padding-left: 10px;
		padding-right: 10px;
	}
	main > * {
		/*max-width: 390px;*/
	}
	form {
		/*margin: 32px auto;*/
	}
	main > section {
		/*margin: 0 auto 32px auto;*/
	}
}

@media screen and (max-width: 360px) {
	.site-header {
		display: grid;
		grid-template-areas:
			"home-logo hamburger"
			"out-front out-front";
		height: 85px;
	}
	.site-header .page-logo {
		grid-area: home-logo;
	}
	.site-header .user-nav-menu {
		grid-area: hamburger;
	}
	.site-header .request-evacuation {
		grid-area: out-front;
		margin: 0 auto 4px auto;
	}
	.donate-page .hero,
	.about-us-page .hero,
	.faq-page .hero {
		margin-top: -85px;
	}
}


/* placeholder links can be shown in a demonstration, but upon pressing indicate they are not yet connected */
:root {
	--placeholder-links-background-color: #ece3e3;
	--placeholder-links-color: #c7baba;
}
a.call:not([href]):hover,
a.call:not([href]):active,
a:not([href]):hover,
a:not([href]):active {
	background-color: var(--placeholder-links-background-color);
	color: var(--placeholder-links-color);
	border-color: var(--placeholder-links-color);
}
input[type="submit"][disabled] {
	background-color: var(--placeholder-links-background-color);
}