@import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext');

html, body {
	font-family: 'Lato', serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Special Elite';
	letter-spacing: .02em;
}

a {
	color: #0033cc;
}

a:hover {
	text-decoration: underline;
}

label.label:not(:last-child) {
	margin: 1.5em 0 1ex;
}

.page-bar-container {
	padding-bottom: 5px;
	padding-top: 5px;
}

.page-bar-row {
	padding: 5px 0;
	letter-spacing: 0.3em;
}

.section--form {
	padding-top: 0;
	margin-bottom: 0;
}
.section.graph {
	padding-top: 0;
	margin-top: -3rem;
}

/* We want vertical Checklists always. */
.control label.checkbox {
	display: block;
}

.header {
	background-image: url('/tools/community-charts/assets/header_background.jpg');
	height: 400px;
	padding: 0;
}

@media (max-width: 749px) {
	.header {
		background-position: 50% 8%;
	}
}

@media (min-width: 999px) {
	.header {
		background-size: cover;
	}
}

@media (min-width: 750px) {
	.header {
		background-position: 50% 25%;
	}
}

.header .page-bar {
	font-family: "Lato",sans-serif;
	font-weight: 400;
	border-bottom: 1px solid #e6e6e6;
	font-size: 12px;
	line-height: 14px;
	border-color: #6e768c;
	background-color: #515767;
	color: #fff;
	background: #8e1e23;
}

.header--logo {
	width: 6.8em;
}

.header--map {
	width: 15.0em;
}

.header--headers {
	width: 85%;
}

.header--titles {
	width: 100%;
}

.header--snap-link img {
	height: 5.4em;
}

.intro-text {
	font-size: 110%;
	font-family: 'Special Elite';
	letter-spacing: .02em;
	text-align: right;
}

@media (max-width: 799px) {
	.intro-text {
		text-align: center;
	}
	.extent.section {
		padding-bottom: 0;
	}
	.extent-wrapper.mobile {
		width: 100%;
		display: block;
	}
	.extent-wrapper.desktop {
		display: none;
	}
}

@media (min-width: 800px) {
	.extent-wrapper.desktop {
		float: right;
		width: 50%;
		display: block;
	}
	.extent-wrapper.mobile {
		display: none;
	}
}

@media (max-width: 1215px) {
	.intro-text {
		max-width: 1000px;
	}
}

@media (min-width: 799px) and (max-width: 1215px) {
	.extent-map {
		margin-top: 75px;
	}
}

@media (min-width: 1700px) {
	.extent-map {
		height: 120%;
		margin-top: -60px;
	}
}

@media (min-width: 768px) {
	.extent-wrapper.desktop {
		shape-outside: ellipse(50% 80% at 50% 80%);
	}
}

@media (min-width: 768px) and (max-width: 1119px) {
	.extent-wrapper.desktop {
		height: 480px;
	}
}

@media (min-width: 1120px) {
	.extent-wrapper.desktop {
		height: 410px;
	}
}

.container.top {
	clear: both;
}

@media (max-width: 767px) {
	.container.top {
		padding: 0 20px;
	}

	.container.middle {
		padding: 0 20px;
	}
}

.container.middle label.label:not(:last-child) {
	margin-top: 0;
}

.form-input.section {
	padding-top: 0;
	padding-bottom: 0;
}

@media (min-width: 1400px) {
	.form-input.section {
		padding: 0 150px;
	}
}

.form label, .form input {
	font-size: 130%;
}

label.checkbox input, label.radio input {
	position: relative;
	bottom: .1ex;
	margin-right: .5ex;
}

.radio {
	margin: 5px 0;
	display: block;
}

.radio+.radio {
	margin-left: 0;
}

.camera-icon span {
  display: inline-block;
  position: relative;
  top: 0.25rem;
  padding: 0 3px;
}

.camera-icon span path {
  fill: #ccc;
}

.controls-wrapper, .explanations-wrapper {
	margin: 0 auto;
}

.controls-wrapper {
	max-width: 60em;
}

.dash-graph .js-plotly-plot .plotly .cursor-ns-resize {
	cursor: crosshair;
}

.explanations-wrapper {
	max-width: 50em;
}

@media (min-width: 769px) {
	.form-inputs-right {
		padding-left: 1em;
	}
}

.footer p {
	margin-bottom: 1em;
	width: 90%;
}

footer .logos.column {
	text-align: right;
}

footer .logos img {
	max-width: 90%;
	display: inline-block;
	margin-bottom: 1rem;
}

@media (max-width: 768px) {
	footer .logos.column {
		text-align: center;
	}
	footer .logos img {
		margin: 15px;
	}
	footer .logos img.nwt {
		width: 40%;
	}
	footer .logos img.uaf {
		width: 27%;
	}
	.footer p {
		width: 100%;
	}
}

footer {
  box-shadow: inset 0 7px 9px -7px rgb(0 0 0 / 40%);
}

._dash-undo-redo {
	display: none;
}

@media print {
	.header {
		max-height: 120px;
	}
	.no-print * {
		display: none;
	}
	.extent.section {
		padding-bottom: 0;
	}
	.intro-text {
		text-align: center;
		max-width: 100%;
	}
	/* Needed for Safari */
	.extent-wrapper.desktop {
		display: none;
	}
}