@charset "utf-8";
/* CSS Document */
body {
	margin:0;
}
h1 {
	font-family: "Open Sans", Verdana, "sans-serif";
	font-size: 2vw;
	text-align: center;
	margin: 0;
}
h2 {
	font-family: "Open Sans", Verdana, "sans-serif";
	font-size: 1.8vw;
	color: #0066CC;
	text-align: center;
	margin: 0;
}
p, label {
	font-family: "Open Sans", Verdana, "sans-serif";
	font-size: 1.6vw;
	margin: .3vw;
}
#calc-as table {
	border: 1px solid #bacee4;
	font-family: "Open Sans", Verdana, "sans-serif";
	font-size: .9vw;
	padding: 0;
	width:100%;
}
#calc-as td {
	text-align: right;
	padding: .45vw;
}
#calc-as .cur {
	padding-top: 0;
	padding-bottom: .15vw;
	background-color: #f7f7f7;
	font-size: .9vw;
	padding: 0 0 .15vw .1vw;
}
/* For Chrome, Safari, Edge, and Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* For Firefox */
input[type="number"] {
	-moz-appearance: textfield;
}
#calc-as input {
	font-size:1.4vw;
	text-align: right;
	border: none;
	background-color: #F9F9F9;
	padding:.1vw .2vw .1vw 0;
	color: #0066CC;
	width: 22%;
}
#calc-as input::placeholder {
	font-size: 1.4vw;
	text-align: left;
	color: #717171;
	padding-left: .2vw;
	vertical-align: middle;
}
.req-statement {
	text-align: left;
	margin: 0 .2vw;
	font-size: .75vw;
}
table.results {
	width: 100% !important;
	border: none !important;
}
table.results td {
	padding: .25vw !important;
	border: none;
}
table.results p {
	margin: .2vw;
	padding:0;
}
span#savings-hr{
	font-size: .95vw;
}
span#savings-day{
	font-size: .95vw;
}
span#savings-yr{
	font-size: .95vw;
}
span#air-saving-hr{
	font-size: .95vw;
}
span#air-saving-day{
	font-size: .95vw;
}
span#air-saving-yr{
	font-size: .95vw;
}
.notice {
	font-family: Verdana, Arial, "sans-serif";
	color: #ff0000;
	font-weight: bold;
	text-align: center;
	font-size: 2vw;
}
.hint {
	color: #0066CC;
	font-size: 1.6vw;
	text-align: right;
	margin: 0 0 .5rem 0;
	font-style: italic;
}
.req {
	font-size: .7vw;
	font-weight: bold;
	color:#D00000;
	vertical-align: super;
}
tr.payback {
	background-color: #0066CC;
}
.payback p{
	color: #fff4a1;
	font-weight: bold;
	font-size: 1.2vw;
	margin: 0;
	text-align: center;
}
	#calc-as table .buttons td {
		padding:.5vw 0;
	}
.print {
	text-align: center;
	font-size: 1.6vw;
	font-weight: bold;
	background-color: #74B436;
	color: #FFFFCC;
	border: solid 1px #74b436;
	border-radius: .3rem;
	padding: .25vw .5vw;
	white-space: nowrap;
}
.reset {
	text-align: center;
	font-size: 1.6vw;
	font-weight: bold;
	background-color: #E00000;
	color: #FFFFCC;
	border: solid 1px #E00000;
	border-radius: .3rem;
	padding: .25vw .5vw;
	white-space: nowrap;
}
/****************** Mobile View ****************************************************************************************/

@media screen and (max-width:480px) {
	body {
	width: 100%;
	margin:0 auto;
}

h1 {
	font-size:.9rem;
}
h2 {
	font-size:.8rem;
}
p, label {
	font-size:.6rem;
	margin: .2rem;
}
	#calc-as table {
	padding: 0;
	width: 100%;
}
	#calc-as input {
		font-size: .6rem;
	padding:.2rem .2rem .2rem 0;
			width: 25%;
	}
		#calc-as input::placeholder {
	font-size:.5rem;
	padding-left: .2rem;
}
.req {
	font-size: .5rem;
}
	.req-statement {
	margin: 0 .2rem;
	font-size:.65rem;
}
	.hint {
	font-size:.6rem;
		margin-right: .2rem;
}
.payback p{
	font-size: .8rem;
}	
	#calc-as table .buttons td {
		padding:.2rem 0;
	}
.print {
	font-size:.6rem;
	padding: .2rem .5rem;
}
.reset {
	font-size:.6rem;
	padding: .2rem .5rem;
}
}

/****************** Print Settings ****************************************************************************************/
@media print {
	body {
		margin:20pt;
	}

	#calc-as h1 {
		font-family: "Open Sans", Verdana, "sans-serif";
		font-size: 11pt;
		margin: 2pt 0 4pt 0;
	}
	#calc-as h2 {
		font-family: "Open Sans", Verdana, "sans-serif";
		font-size: 10pt;
		margin:2pt 0 4pt 0;
	}
	#calc-as table {
		width: 100%;
		border: none;
	}
	#calc-as td {
		padding: 0;
	}
	#calc-as p, label {
		font-family: "Open Sans", Verdana, "sans-serif";
		font-size: 9pt;
		margin: 4pt;
	}
	#calc-as input {
		font-size: 9pt;
		margin: 4pt;
	}
	span#savings-hr{
	font-size:9pt;
		margin:3pt;
}
span#savings-day{
	font-size:9pt;
		margin:3pt;
}
span#savings-yr{
		font-size:9pt;
		margin:3pt;
}
span#air-saving-hr{
		font-size:9pt;
		margin:3pt;
}
span#air-saving-day{
		font-size:9pt;
		margin:3pt;
}
span#air-saving-yr{
		font-size:9pt;
		margin:3pt;
}
	#calc-as .results p {
	font-size: 9pt;
	padding:0;
}
	tr.payback {
		background-color:unset;
	}
	tr.payback td {
		border:solid 1pt #0066CC;
	}
	#calc-as tr.payback td p {
		font-size: 14pt;
		font-weight: bold;
		color:#0066CC;
		margin:4pt 0;
	}
	#calc-as table tr.buttons {
		display: none;
		visibility: hidden;
		height: 0;
		padding: 0;
		margin:0;
	}
		#calc-as table tr.buttons td {
		display: none;
		visibility: hidden;
		height: 0;
		padding: 0;
		margin:0;
	}
	.req-statement {
	margin: 0 2pt;
	font-size: 9pt;
}
	.hint{
		display: none;
		visibility: hidden;
		height: 0;
		padding: 0;
		margin:0;		
	}
}