html {
	height:100%;
}
body {
	font-family:-apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
    "Fira Sans", "Droid Sans", "Helvetica Neue", 
    sans-serif;
    /* :( */
	margin:0;
	padding:70px 0 0 0;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height:1.3em;
    overflow:auto;

}
h3 {
	margin:5px;
}
footer {
	font-size:14px;
	border-top: 1px solid #CCC;
	background-color: #DDD;
	padding:10px 10px 40px 10px;
}
*, *:before, *:after {
	box-sizing:border-box;
}
input[type=number]{
    width: 50px;
}
.header {
	z-index: 5;
	height:65px;
	position:fixed;
	width:100%;
	box-shadow:2px 0 4px rgba(0,0,0,.4);
	top:0;
	left:0;
}
.title {
	padding:0 10px;
	background-color: #3F51B5;
	color:#FFF;
	height:70px;
	font-size:30px;
	line-height:70px;
	overflow:hidden;
}
.title img {
	display:inline;
	height:70px;padding:15px 5px;float:left;
}
.header .about-small-toggle {
	position:absolute;
	right:25px;
	top:20px;
	height:30px;
	width:30px;
	text-align:center;
	line-height:30px;
	font-size:20px;
	border-radius:50%;
	background-color: rgba(255,255,255,.2);
	color:#FFF;
	font-family:monospace;
	font-weight:800;
	cursor:pointer;
	transition: background-color .5s, box-shadow .5s;
	-webkit-transition: background-color .5s, box-shadow .5s;
}
.header .about-small-toggle:hover {
	background-color: rgba(255,255,255,.4);
	box-shadow: 1px 2px 3px rgba(0,0,0,.3);
}
.header .about-small-toggle.hidden {
	visibility: hidden;
}
.header .moreinfo {
	font-size:14px;
	line-height:1.3em;
	padding:5px;
	background-color: rgba(255,255,255,.9);
	overflow:auto;
	border-bottom:1px solid #5C6BC0;
	position:relative;
}
.header .moreinfo.hidden {
	height:0;
	padding:0;
}
.header .moreinfo .close {
	position:absolute;
	top:10px;
	right:10px;
	cursor:pointer;
	font-size:30px;
}
.input {
	background-color: #ECEFF1; /*cyan 700 */
	overflow:auto;
}

.input-section-label {
	float:left;
	padding:5px;
	text-align:right;
	color:#000;
}
.input-section-content {
	float:left;
	background-color: #FFF;
	border-left:3px solid #fff;
}
/*
*	Set widths depending on if csscalc is detected
*/
html .input-section-label {
	width:30%;
}
html .input-section-content {
	width:70%;
}
html.csscalc .input-section-label {
	width:200px;
}
html.csscalc .input-section-content {
	width:CALC(100% - 200px);
}
.location_selectors {
	overflow:auto;
	clear:both;
}

.location_selectors .location-input {
	height:200px;
	float:left;
	padding:10px;
}
.location_selectors .location-map {
	height:200px;
}


.location_selectors .loc-number {
	width:100px;
	text-align:right;
}
.location_selectors .location-map #firemarker {
    background-image: url('./flame.png');
    background-size: cover;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border:2px solid #FFF;
    cursor: pointer;
}
.criteria {
	clear:both;
	overflow:auto;
	text-align:center;
}
.criteria table {
	margin:auto;
	text-align:left;
}
.criteria input[type=number] {
	width:45px;
}
.execute {
	/* the go button */
	border:none;
	background-color:#43A047;
	color:#fff;
	padding:10px 40px;
	border-radius:4px;
	font-size:15px;
}

.results {
	clear:both;
	border-top:3px solid #CCC;
	margin:20px;
}
.results table {
	width:100%;
}
.results table tr td {
	padding:5px;
	margin:0;
}
.results .bad  {
	background-color: #E8EAF6;
	color:#333;
}
.results .good  {
	background-color: #2E7D32;
	color:#FFF;
}
.results .sufficient {
	background-color: #81C784;
	color:#000;
}
.results .insufficient {
	background-color: #E57373;
	color:#000;
}

.results tr.bad td {
	background-color: inherit;
	color:inherit;
}
.results tr.good td {
	background-color: inherit;
	color:inherit;
}
a.fbp-button {
	background-color: rgba(255,255,255,.8);
	color:#000;
	border-radius: 3px;
	padding:2px 5px;
	text-decoration: none;
	font-size:12px;
}