/* CSS RESET */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

html, body, input {
	font-family: 'EYInterstate Light', 'Overpass', sans-serif;
	font-size: 13.5px;
	line-height: 1.4em;
	font-weight: 300;
	color: #2e2e38;
}

h1, h2, h3 { line-height: 1.2em; }

#head img {
	max-width: 200px;
	display: inline-block;
	margin: 20px auto;
}
#head em {
	color: #747480;
	padding-top: 8px;
	display: block;
}


/* ========== HEADER / NAV / FOOTER ========== */

header {
	background-color: #2e2e38;
	padding: 20px 0;
}

header {
	position: fixed;
	width: 100%;
	z-index: 100;
}

#logo {
	max-width: 180px;
	width: 20%;
	min-width: 130px;
}

#logo img {
	width: 100%;
}

footer {
	border-top: 1px solid #e1e1e6;
	padding: 20px;
	color: #747480;
}

footer a {
	color: #2e2e38;
}

.footerOne:after {
	content: "";
	display: block;
	clear: both;
}

.footerLinks {
	padding: 30px 0 0;
}

.footerLinks p {
	display: inline-block;
    margin-left: 23px;
}

.footerLogo {
	float: left;
	margin-right: 50px;
}

.footerTwo {
	padding-top: 15px;
}

.st0 {
    fill: #FFFFFF;
    stroke: #747480;
    stroke-miterlimit: 10;
}

.st1 { fill: #2e2e38; }

footer g:hover .st0 { fill: #2e2e38; }
footer g:hover .st1 { fill: #FFFFFF; }

.footerBoil, .footerSocial {
	display: inline-block;
	width: 49%;
}

.footerBoil {
	width: 70%;
	margin-right: 2%;
}

.footerSocial {
	width: 25%;
	text-align: right;
}




.flex {
	display: flex;
	gap: 2%;
}

.flex > div, .flex input {
	width: 15%;
	text-align: center;
}

form input, .indicator input, .score .scoreNum {
	border: 2px solid #2e2e38;
	font-size: 24px;
	padding: 20px 10px;
}

h2 { margin: 30px 0 8px 0; }

#labels, #inputs label, .inputHeader, .threshold, .weight, h6 {
	font-size: 12px;
	line-height: 15px;
}

#labels {
	padding: 20px 0 10px;
	color: #747480;
}

.inputHeader, .threshold, .weight, h6 {
	padding-top: 7px;
	color: #747480;
	margin: 0;
}

h6 { padding: 0 0 8px 0; }

#inputs label {
	display: block;
	padding: 3px 0;
	background-color: #2e2e38;
	border: 2px solid #2e2e38;
	width: 100%;
	color: #FFF;
	margin-top: 15px;
}

#inputs div input {
	display: block;
	width: 100%;
}

#indicators { padding-top: 50px; }

.indicator .inputHeader { height: 40px; }

.indicator input { width: 100%; box-sizing: border-box; }

.threshold span:first-child {
	border-right: 2px solid #e1e1e6;
	padding-right: 9px;
	margin-right: 5px;
}

#scores div, #indicators input, #indicators input:focus, #indicators input:active {
	border-color: #e1e1e6 !important;
}


#scores div.lvl1 { border-color: #f95d54 !important; }
#scores div.lvl2 { border-color: #FF9831 !important; }
#scores div.lvl3 { border-color: #2db757 !important; }

#weighted { display: none; }

#finalScore {
	color: #FFF;
	font-size: 45px;
	line-height: 50px;
	border: 2px solid #e1e1e6;
	max-width: 200px;
	margin: auto;
	padding: 20px 10px;
}

#finalScore.atrisk	{ border-color: #f95d54; background-color: #f95d54; }
#finalScore.monitor	{ border-color: #FF9831; background-color: #FF9831; }
#finalScore.stable	{ border-color: #2db757; background-color: #2db757; }

#finalScore.atrisk, 
#finalScore.monitor, 
#finalScore.stable { color: #FFF; }

#finalScore .status {
	font-size: 0.5em;
	    text-transform: uppercase;
	    line-height: 1.35em;
}

#key .keyItem.atrisk, 
#key .keyItem.monitor, 
#key .keyItem.stable {
	display: inline-block;
	padding: 20px 10px;
}

#key .keyItem.atrisk::before, 
#key .keyItem.monitor::before, 
#key .keyItem.stable::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 15px;
	background-color: #000;
	margin-right: 5px;
}

#key .keyItem.atrisk::before { background-color: #f95d54; }
#key .keyItem.monitor::before { background-color: #FF9831; }
#key .keyItem.stable::before { background-color: #2db757; }



.container {
	width:  90%;
	max-width: 800px;
	padding: 0 20px;
}

#container {
	width:  90%;
	max-width: 800px;
	margin: auto;
	text-align: center;
	padding: 130px 0 30px;
}



@media only screen and (max-width: 900px) {

	label, .inputHeader, .threshold, .weight {
		font-size: 1.65vw !important;
		height: 5.5vw !important;
		padding-top: 2vw;
		line-height: 1.8vw !important;
	}

	form input, .indicator input, .score { font-size: 4vw; line-height: 4.5vw; }

	.score { box-sizing: border-box; margin-bottom: 2%; }
	#scores .weight { height: auto !important; }

}

@media only screen and (max-width: 650px) {

	label, .inputHeader, .threshold, .weight {
		font-size: 3.3vw !important;
	    height: 10vw !important;
	    line-height: 2.7vw !important;
	}

	.weight { padding-top: 10px; }

	#inputs, #indicators, #scores { flex-wrap: wrap; }

	#inputs > div, #indicators > div, #scores> div { width: 49%; }

	#inputs label, #indicators .inputHeader {
		font-size: 3.75vw !important;
		line-height: 4vw !important;
		height: 8vw;
	}

	form input, .indicator input, .score { font-size: 8vw; line-height: 9vw; }

	.threshold span:first-child {
		padding-right: 4px;
		margin-right: 1px;
		border-right-width: 1px;
	}

}