body {
	background-color: #97d7dc;
	font-family: Lato;
	margin: 0;
}
*:focus {
	outline: 0;
}

/* Accessibility: Visually hidden but accessible to screen readers */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	position: absolute !important;
}
body p a {
	text-decoration: none;
	color: #12719e;
}
body p a:hover {
	text-decoration: underline;
	color: #000;
}

/***************************************************************************/
/***************************** MOBILE BUILDING *****************************/
/***************************************************************************/

.mobile_window {
	display: none;
}
#mobile {
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
}

/***************************************************************************/
/********************************* TABLET **********************************/
/***************************************************************************/
@media (max-width: 943px) {
	#mobile_rollover_text {
		display: block !important;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		top: 120px;
		left: 20px;
		background: #231f20;
		/*top: 0px;*/
		font-style: italic;
		font-size: 14px;
		width: calc(100% - 74px);
		color: white;
		padding: 17px;
		z-index: 999999999;
	}
	#tablet {
		display: block !important;
	}
	#mobile_spacer {
		height: 200px !important;
	}
}
#mobile_spacer {
	height: 0px;
}
#tablet {
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
}

/***************************************************************************/
/***************************** MOBILE IMAGES *******************************/
/***************************************************************************/
@media (max-width: 1315px) {
	#small_desktop {
		display: block !important;
	}
}

@media (max-width: 716px) {
	#leftHill,
	#trees,
	#crane,
	#cloud2,
	#contractor,
	#mouth_container,
	#hand,
	#credits,
	#text_credits {
		display: none !important;
	}
	#fader {
		display: none;
	}
}
@media (max-width: 484px) {
	#leftHill,
	#trees,
	#crane,
	#cloud1,
	#buildings_rightHill,
	#buildings_leftHill {
		display: none !important;
	}
}

#small_desktop {
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	position: fixed;
	display: none;
}

/***************************************************************************/
/*************************** TEMP CONTROLS ***************************/
/***************************************************************************/

#pbottom {
	margin-bottom: 100px;
}
#debt_sizing,
#sources {
	display: block;
	clear: both;
	margin-bottom: 20px;
}

#uses {
	clear: both;
	margin-bottom: 20px;
}
/***************************************************************************/
/*************************** TEXT STYLES ***********************************/
/***************************************************************************/
h1 {
	color: #1696d2;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 150px;
}

h1 span {
	color: black;
	font-weight: 500;
}

h3 {
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 0px;
	color: black;
}
h4 {
	margin-left: 60px;
	top: -39px;
	position: relative;
	font-size: 28px;
	width: 424px;
	font-weight: 300;
}
h3 span {
	font-weight: normal;
	font-style: italic;
}
h2 span.breaker {
	display: block;
}

/***************************************************************************/
/******************************** BUILDINGS ********************************/
/***************************************************************************/

.building {
	position: fixed;
	bottom: 53px;
	right: 30;
	font-family: Lato;
	color: white;
	vertical-align: middle;
	text-align: center;
	width: 176px;
	z-index: 209;
}

.shadow_gap {
	position: absolute;
	max-height: 6px;
	min-height: 6px;
	border: none;
	background-color: rgba(0, 0, 0, 0.1);
	width: 178px;
	z-index: 220;
}
.total_building,
.built_building {
	position: absolute;
	bottom: 0px;
	background-color: rgba(205, 230, 241, 0.7);
}
.total_building {
	width: 176px;
	border: 1px solid #0c94d3;
	z-index: 212;
	padding-top: 5px;
}
.built_building {
	width: 178px;
	background-color: #1696d2;
	z-index: 212;
}
.roof_img {
	position: absolute;
	bottom: 0px;
	left: -21px;
	z-index: 212;
}
#roof_100,
#roof_50 {
	position: absolute;
	z-index: 201;
	background-color: #1696d2;
	height: 0px;
	width: 220px;
	left: -19px;
}

.i_bar_top,
.i_bar_bottom {
	background-color: #000;
	height: 3px;
	width: 19px;
	position: absolute;
	z-index: 216;
}
.i_bar_container {
	margin-left: 9px;
}
.i_bar {
	position: absolute;
	width: 3px;
	margin-left: 6.5px;
	background-color: #000;
	z-index: 216;
}
.gap_container {
	position: absolute;
	width: 144px;
	height: 114px;
	left: 16px;
	color: #fff;
	background-color: rgba(35, 31, 32, 0.2);
	z-index: 309;
}
.gap_label {
	font-size: 16px;
	font-weight: normal;
	float: left;
	margin-left: 10px;
	margin-top: 8px;
	text-align: left;
}
.gap_label span {
	font-size: 12px;
	display: block;
	text-transform: uppercase;
	margin-bottom: 4px;
	color: #d1d2d4;
}
.gap_label span i {
	font-style: normal;
}
.gap_amount {
	font-size: 19px;
	font-weight: bold;
	float: left;
	clear: both;
	margin-left: 9px;
	margin-top: 5px;
}
.needed {
	float: left;
	clear: both;
	margin-left: 10px;
	margin-right: 5px;
	font-size: 12px;
	font-style: italic;
	margin-top: 4px;
}
.balcony {
	position: absolute;
	left: -17px;
}

.windows {
	position: absolute;
	z-index: 215;
}
.windows_bottom {
	bottom: -2;
}
.windows_roof {
	margin-left: -22px;
	margin-bottom: -1px;
}
#person1 {
	left: 127px;
	bottom: 3px;
}
#person2 {
	bottom: 16px;
	left: 105px;
}
#person3 {
	left: 79px;
	bottom: 32px;
}
#person4 {
	bottom: 3px;
	left: 32px;
}
#person5 {
	left: 129px;
	bottom: 32px;
}
#person6 {
	bottom: 3px;
	left: 80px;
}
#person7 {
	left: 31px;
	bottom: 2px;
}
#person8 {
	bottom: 2px;
	left: 129px;
}
#person9 {
	bottom: 2px;
	left: 79px;
}
#person10 {
	bottom: 16px;
	left: 60px;
}

.person_50,
.person_100 {
	opacity: 0;
}

#building_container_50 {
	/*background-color: #cbeaf5;*/
	clear: both;
	right: 260px;
}
#building_container_100 {
	clear: both;
	right: 30px;
}
.empty_windows_50,
.empty_windows_100 {
	position: relative;
	/*top: -44px;*/
	overflow: hidden;
}
.full_windows_50,
.full_windows_100 {
	position: relative;
	/*bottom: 0px;*/
	overflow: hidden;
}
.full_windows_50 img,
.full_windows_100 img {
	position: absolute;
	bottom: 0;
	left: 0;
}
.full_windows_50.door img,
.full_windows_100.door img {
	position: absolute;
	bottom: 3;
	left: 26;
}
.empty_windows_50.door img,
.empty_windows_100.door img {
	margin-left: 26;
}
/***************************************************************************/
/******************************** BACKGROUND *******************************/
/***************************************************************************/

#ground_container img {
	position: fixed;
}
#leftHill {
	bottom: 0px;
	left: 0px;
	z-index: 201;
}
#rightHillDirt {
	bottom: 0px;
	right: -4px;
	z-index: 202;
}
#rightHill {
	bottom: 0px;
	right: 0px;
	z-index: 203;
	opacity: 0;
}
#road {
	bottom: -3px;
	right: 487px;
	z-index: 204;
}
#sidewalk {
	bottom: 0px;
	right: -9px;
	z-index: 204;
	opacity: 0;
}
#path50 {
	bottom: 13px;
	right: 125px;
	z-index: 204;
	opacity: 0;
}
#path100 {
	bottom: 13px;
	right: -225px;
	z-index: 204;
	opacity: 0;
}
#shrubs50 {
	bottom: 49px;
	right: 94px;
	z-index: 999;
	opacity: 0;
}
#shrubs100 {
	bottom: 49px;
	right: -225px;
	z-index: 999;
	opacity: 0;
}
#contractor {
	bottom: -13;
	right: 36%;
	z-index: 299;
}
#hand {
	bottom: 86px;
	right: calc(36% + 93px);
	z-index: 10000000;
}
#mouth {
	bottom: 156px;
	right: calc(36% + 81px);
	z-index: 300;
	width: 14px;
	height: 0px;
}
#crane {
	top: -20;
	right: -130px;
	z-index: -1;
}

#buildings_rightHill {
	bottom: 30px;
	right: 9%;
	z-index: -2;
}
#buildings_leftHill {
	bottom: -30px;
	left: calc(40% - 40px);
	z-index: -2;
}
#trees {
	bottom: 45px;
	right: 424px;
	z-index: -2;
}
#bike {
	bottom: 61px;
	right: 460px;
	z-index: 203;
	opacity: 0;
}
#dog {
	bottom: 3px;
	right: 222px;
	z-index: 213;
	opacity: 0;
}
#wheelbarrow {
	bottom: 5px;
	right: 434px;
	z-index: 213;
}
#cloud1 {
	pointer-events: none;
	z-index: -2;
	opacity: 0.54;
	top: 90px;
	-webkit-animation: backandforth_A 2000s ease 0s;
	-webkit-animation-iteration-count: infinite;
	animation: backandforth_A 2000s ease 0s;
	animation-iteration-count: infinite;
}
#cloud2 {
	pointer-events: none;
	z-index: -2;
	opacity: 0.57;
	top: 124px;
	-webkit-animation: backandforth_B 1700s ease 0s;
	-webkit-animation-iteration-count: infinite;
	animation: backandforth_B 1700s ease 0s;
	animation-iteration-count: infinite;
}
#cloud3 {
	pointer-events: none;
	z-index: -2;
	opacity: 0.54;
	top: 80px;
	-webkit-animation: backandforth_C 2100s ease 0s;
	-webkit-animation-iteration-count: infinite;
	animation: backandforth_C 2100s ease 0s;
	animation-iteration-count: infinite;
}
#cloud4 {
	pointer-events: none;
	z-index: -2;
	opacity: 0.57;
	top: 216px;
	-webkit-animation: backandforth_D 1200s ease 0s;
	-webkit-animation-iteration-count: infinite;
	animation: backandforth_D 1200s ease 0s;
	animation-iteration-count: infinite;
}
@-webkit-keyframes backandforth_A {
	0% {
		left: 20%;
	}
	50% {
		left: 100%;
	}
	100% {
		left: 20%;
	}
}
@keyframes backandforth_A {
	0% {
		left: 20%;
	}
	50% {
		left: 100%;
	}
	100% {
		left: 20%;
	}
}

@-webkit-keyframes backandforth_B {
	0% {
		left: 42%;
	}
	50% {
		left: 90%;
	}
	75% {
		left: -10%;
	}
	100% {
		left: 42%;
	}
}
@keyframes backandforth_B {
	0% {
		left: 42%;
	}
	50% {
		left: 90%;
	}
	75% {
		left: -10%;
	}
	100% {
		left: 42%;
	}
}

@-webkit-keyframes backandforth_C {
	0% {
		left: 62%;
	}
	30% {
		left: 99%;
	}
	75% {
		left: 10%;
	}
	100% {
		left: 62%;
	}
}
@keyframes backandforth_C {
	0% {
		left: 62%;
	}
	30% {
		left: 99%;
	}
	75% {
		left: 10%;
	}
	100% {
		left: 62%;
	}
}

@-webkit-keyframes backandforth_D {
	0% {
		left: 82%;
	}
	20% {
		left: 110%;
	}
	75% {
		left: 8%;
	}
	100% {
		left: 82%;
	}
}
@keyframes backandforth_D {
	0% {
		left: 82%;
	}
	20% {
		left: 110%;
	}
	75% {
		left: 8%;
	}
	100% {
		left: 82%;
	}
}

/***************************************************************************/
/*************************** DASHBOARD CONTROLS ***************************/
/***************************************************************************/

.calculator-block {
	background: var(--white);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-bottom: 1.25rem;
	max-width: 820px;
	padding: 10px;
}

.period-indicator {
	font-size: 12px;
	color: #ffffffd1;
	font-weight: normal;
}

#noi_explainer {
	margin-top: 20px;
	font-size: 16px;
}
.explainer {
	position: relative;
	font-size: 18px;
	font-style: italic;
	padding: 16px 30px 30px;
	background-color: #deda5c;
	border-radius: 0 0 10px 10px;
}
#help_noi {
	top: 4px;
}

@media (max-width: 1024px) {
	#noi_explainer {
		width: 60%;
	}
}

@media (max-width: 900px) {
	.explainer {
		padding: 20px 12px;
	}
}

.header_wrapper {
	width: 100%;
	padding: 10px 30px;
	height: 60px;
	background-color: #005958;
	border-radius: 10px 10px 0px 0px;
	color: white;
	display: flex;
	align-items: center;
}

.header {
	margin: 0px;
	display: inline-block;
	font-family: Lato, sans-serif;
	font-size: 18px;
	font-weight: 600;
}
.header_title {
	width: 350px;
	font-size: 20px;
	margin-right: 90px;
}
.header_1 {
	width: 80px;
	margin-right: 30px;
}
.header_50 {
	width: 80px;
	margin-right: 30px;
}
.header_100 {
	width: 80px;
}

.header_values_wrapper {
	display: flex;
	flex-direction: row;
}

.control_wrapper {
	padding: 20px 30px 0;
	background: #eef2f2;
}

#sources .control_wrapper {
	padding-bottom: 10px;
}

.control_container {
	height: 100px;
	width: 100%;
	display: block;
	position: relative;
}

.control_container.median-rent-container {
	height: 80px;
}

.control_container label,
.control_container span.label {
	float: left;
	clear: right;
	display: inline-block;
	width: 350px;
	margin-right: 90px;
	font-size: 16px;
}
.control_container label span,
.control_container span.label span {
	font-size: 12px;
	margin-left: 3px;
	font-weight: 400;
}
.control_container .control.range {
	width: 240px;
}
/* ± step buttons. Absolutely positioned inside .control_container (which is
   already position:relative) so they don't participate in inline flow and
   don't shift the dollar columns. The slider itself is float:left + clear:both
   (see `input[type="range"]` rule) so it sits on its own row at x=0, below the
   floated label, with `position:relative; top:6px`. Place buttons flanking it. */
.control_container .step_btn {
	position: absolute;
	top: 23px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid #c4c4c4;
	background: #fff;
	color: #333;
	border-radius: 4px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}
.control_container .step_minus {
	left: 252px;
}
.control_container .step_plus {
	left: 280px;
}
.control_container .step_btn:hover {
	background: #f2f2f2;
	border-color: var(--primary-color);
}
.control_container .step_btn:active {
	background: #e6e6e6;
}
/* When the slider is disabled (e.g. CMHC when rent is too high), grey out and
   block the ± buttons too — otherwise they remain clickable on a frozen track. */
.control_container.disabled .step_btn {
	opacity: 0.4;
	pointer-events: none;
}
.control_container .control.text {
	width: 50px;
}
.control_container.new_source,
.control_container.new_source_button {
	margin-bottom: 40px;
	height: 0px;
}

.control_container.new_source_button {
	margin-bottom: 5px;
}

.control_container.new_source {
	height: 30px;
	overflow: visible;
}
.control_container.new_source_button {
	height: fit-content;
}

.control_container.tax_credit_equity {
	position: relative;
}

#click_to_add_sources {
	text-transform: uppercase;
	color: white;
	background-color: #f27d8a;
	font-style: normal;
	cursor: pointer;
	margin-top: 10px;

	width: fit-content;
	line-height: 26px;
	padding: 8px 20px;
	border-radius: 10px;
}
#click_to_add_sources:hover,
#report_button:hover,
.button_text:hover {
	background-color: #231f20;
}

@media (max-width: 900px) {
	/* Adjust rent input fields for mobile */
	.control_container .rent-inputs-container {
		flex-direction: column;
		gap: 10px;
		margin: 10px 0;
		width: 100%;
		max-width: 280px;
		align-items: flex-end;
	}

	.rent-sync {
		width: 100%;
		max-width: 280px;
		margin: 0;
		display: block;
	}

	/* Legacy support */
	#text_average_monthly_rent {
		width: 100%;
		max-width: 280px;
		margin: 10px 0;
		display: block;
	}

	/* Increase height for Median Monthly Rent container on mobile */
	.control_container.median-rent-container {
		height: 140px;
		display: flex;
		justify-content: space-between;
	}

	.control_container.tax_credit_equity label {
		width: fit-content;
	}

	.header_wrapper {
		padding: 5px 5px 5px 13px;
		height: auto;
		align-items: flex-start;
	}
	.header_title {
		margin: 0;
		margin-top: 5px;
		width: 100%;
	}
	.header_values_wrapper {
		flex-direction: column;
		justify-content: space-between;
		background-color: white;
		color: black;
		padding: 8px;
		border-top-right-radius: 10px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
		width: fit-content;
	}

	.header_values_wrapper > .header_1 {
		background-color: #f9ba08;
		border-radius: 4px;
		margin-right: 0;
		padding: 4px;
	}

	.header_values_wrapper > .header_50 {
		background-color: #deda5c;
		border-radius: 4px;
		margin-right: 0;
		margin-top: 8px;
		padding: 4px;
	}

	.header_values_wrapper > .header_100 {
		background-color: #005958;
		border-radius: 4px;
		color: white;
		margin-top: 8px;
		padding: 4px;
	}
	.header_values_wrapper > div > br {
		display: none;
	}

	.control_container label,
	.control_container span.label {
		max-width: 100%;
		margin-right: 0;
	}

	.control_wrapper {
		padding: 20px 13px;
	}
}

/* Narrower slider on small phones to leave room for the ± step buttons next to it.
   Button positions are recomputed off the new 160px track width. */
@media (max-width: 484px) {
	.control_container .control.range {
		width: 160px;
	}
	.control_container .step_minus {
		left: 172px;
	}
	.control_container .step_plus {
		left: 200px;
	}
}

.enter-in-mobile {
	display: none;
}

@media (max-width: 424px) {
	.enter-in-mobile {
		display: block;
	}
}

/* Even narrower slider on tiny phones (~iPhone SE 1st gen and below). */
@media (max-width: 392px) {
	.control_container .control.range {
		width: 140px;
	}
	.control_container .step_minus {
		left: 152px;
	}
	.control_container .step_plus {
		left: 180px;
	}
}

@media (max-width: 392px) {
	#debt_label_income,
	#debt_label_value {
		width: 70% !important;
	}
}

.s1_label,
.s50_label,
.s100_label,
.s1_noi_label,
.s50_noi_label,
.s100_noi_label,
.s1_blank_label,
.s50_blank_label,
.s100_blank_label {
	display: inline-block;
	margin-left: 0px;
	width: 80px;
	text-align: left;
	font-size: 16px;
}
.s1_label,
.s50_label,
.s1_noi_label,
.s50_noi_label,
.s1_blank_label,
.s50_blank_label {
	margin-right: 25px;
}

.s1_noi_label,
.s50_noi_label,
.s100_noi_label,
.s1_blank_label,
.s50_blank_label,
.s100_blank_label {
	font-size: 16px;
}

.multiplier {
	float: left;
	background: transparent;
	color: black;
	top: 8px;
	height: 20px;
	position: relative;
	left: -3px;
	padding-left: 6px;
	padding-right: 4px;
	vertical-align: middle;
	text-align: center;
	opacity: 0 !important;
}
.control_container.invalid .multiplier {
	display: none;
}
.s50_label.replacement_reserve_rate {
	width: 120px;
	margin-left: 0px;
	font-size: 12px;
	font-style: italic;
}
.s100_blank_label {
	width: 100%;
}
.other_source.other {
	pointer-events: visible !important;
	display: inline-block;
	width: 84px !important;
}
.control_container.debt,
.control_container.noi,
.control_container.new_source {
	/* font-style: italic; */
}
#debt_label,
#noi_label,
#debt_label_income,
#debt_label_value {
	max-width: 100%;
	width: 350px;
	margin-right: 90px;
	float: left;
}

.s1_noi_label,
.s50_noi_label,
.s100_noi_label,
#noi_label,
#s1_debt_income,
#s1_debt_value,
#s50_debt_income,
#s50_debt_value,
#s100_debt_income,
#s100_debt_value,
#debt_label_income,
#debt_label_value {
	font-style: normal;
	font-weight: bolder;
}
input.new_source_label {
	text-indent: 4px;
	width: 205px;
	margin-right: 240px;
	text-align: left !important;
	font-size: 16px !important;
	background-color: transparent !important;
	border-bottom: 1px solid #a2d4ec !important;
	pointer-events: visible !important;
	font-style: italic;
}
.control_container.noi,
.control_container.debt {
	margin-bottom: 5px;
}

#debt_label {
	text-indent: 97px;
}
.debt_marker {
	height: 14px;
	position: absolute;
}
#debt_marker_50 {
	left: 273px;
	top: 13px;
}
#debt_marker_100 {
	left: -22px;
	top: 21px;
}
.loan_value {
	margin-top: 4px;
}
.larger {
	color: #9d9d9d;
}
#bracket_debt {
	position: relative;
	margin-left: 105px;
}

@media (max-width: 900px) {
	.s1_label,
	.s50_label,
	.s100_label,
	.s1_noi_label,
	.s50_noi_label,
	.s100_noi_label,
	.s1_blank_label,
	.s50_blank_label,
	.s100_blank_label {
		position: absolute;
		top: 0;
		right: 0;
		margin-right: 0;
		width: fit-content;
		background-color: #f9ba08;
		border-radius: 4px;
		padding: 2px;
		margin-bottom: 8px;
	}

	.s50_label,
	.s50_noi_label,
	.s50_blank_label {
		top: 30px;
		background-color: #deda5c;
		color: black;
		margin-bottom: 0;
	}

	.s100_label,
	.s100_noi_label,
	.s100_blank_label {
		top: 60px;
		background-color: #005958;
		color: white;
		margin-bottom: 0;
	}

	.s1_noi_label,
	.s50_noi_label,
	.s100_noi_label {
		right: 10px;
		top: 10px;
	}

	.s50_noi_label {
		top: 40px;
	}

	.s100_noi_label {
		top: 70px;
	}
}

/***************************************************************************/
/****************************** WARNINGS ***********************************/
/***************************************************************************/
.explainer.warning {
	background-color: rgba(219, 43, 39, 0.3);
	position: relative;
}

.control_container.warning {
	color: #db2b27;
	font-weight: bold;
}
.control_container.warning .multiplier {
	color: #db2b27;
}
.control_container.warning .switch {
	background-color: #db2b27 !important;
}
.control_container.warning .switch:hover {
	background-color: #a82020 !important;
}
.control_container.warning input[type="text"] {
	color: #db2b27;
	font-weight: bold;
}
.control_container.warning input[type="range"]::-webkit-slider-thumb {
	background: #db2b27;
}
.control_container.warning input[type="range"]::-moz-range-thumb {
	background: #db2b27;
}
.control_container.warning input[type="range"]::-ms-thumb {
	background: #db2b27;
}
.control_container.warning input[type="range"]::-moz-range-track {
	background: #d7927a;
}
.control_container.warning input[type="range"]::-ms-fill-lower {
	background: #d7927a;
}
.control_container.warning input[type="range"]::-ms-fill-upper {
	background: #d7927a;
}
.control_container.warning input[type="range"]:focus::-ms-fill-lower {
	background: #d7927a;
}
.control_container.warning input[type="range"]:focus::-ms-fill-upper {
	background: #d7927a;
}
.control_container.warning input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #d7927a;
}
.control_container.warning input[type="range"]::-webkit-slider-runnable-track {
	background: #d7927a;
}

.warning_icon {
	display: inline;
	position: relative;
	top: -2px;
	margin-left: 5px;
	cursor: pointer;
}
.noi.explainer .warning_icon {
	right: -30px;
	top: 31px;
	position: absolute;
}
.warning_icon.tax_credit_equity,
.warning_icon.tax_credit_50,
.warning_icon.tax_credit_high {
	float: right;
	margin-left: 6px;
	top: 0;
	left: 0;
	display: inline-block;
	position: initial;
}

#warning_sign {
	position: fixed;
	bottom: 137px;
	right: calc(36% - 325px);
	width: 275px;
	padding: 25px;
	margin: 10px 10px;
	z-index: 100000;
	opacity: 0;
	background: white;
	-webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
	cursor: pointer;
}
#warning_text {
	border-left: 5px solid #db2b27;
	padding-left: 10px;
}

.control_container.disabled {
	color: #9d9d9d;
}
.control_container.disabled input[type="text"] {
	color: #9d9d9d;
}
.control_container.disabled input {
	pointer-events: none;
}
.control_container.disabled input[type="range"]::-webkit-slider-thumb {
	background: #9d9d9d;
}
.control_container.disabled input[type="range"]::-moz-range-thumb {
	background: #9d9d9d;
}
.control_container.disabled input[type="range"]::-ms-thumb {
	background: #9d9d9d;
}

@media (max-width: 900px) {
	.warning_icon {
		right: 70px;
	}

	.warning_icon.tax_credit_high {
		float: none;
	}
}

/***************************************************************************/
/****************************** HELP TEXT **********************************/
/***************************************************************************/

.help-button {
	background: url("../images/help-button.svg");
	width: 16px;
	height: 16px;
	top: 6px;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	cursor: pointer;
	z-index: 99;
	display: inline-block;
	margin-left: 4px;
	margin-right: 2px;
}
/* .help-button:hover {
    background: url('../images/help-button_hover.png');
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
} */
.help-text {
	position: relative;
	display: table;
	background: #231f20;
	/*top: 0px;*/
	font-style: italic;
	font-size: 14px;
	left: 30px;
	width: 190px;
	color: white;
	padding: 17px;
}
.help-text:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(35, 31, 32, 0);
	border-right-color: #231f20;
	border-width: 14px;
	margin-top: -14px;
}
/* #help_debt{
    left: 45px;
    float: right;
    top: -3px;
} */
/***************************************************************************/
/************************** ROLLOVER TEXT **********************************/
/***************************************************************************/
.rollover {
	display: inline;
	text-decoration: none;
	height: 20px;
	padding-left: 2px;
	padding-right: 2px;
	border-bottom: 3px solid #e7d18f;
	/*    box-shadow: inset 0 -5px 0 #e7d18f;
*/
	cursor: pointer;
}
.rollover:hover {
	background-color: #e7d18f;
}
#rollover_text {
	position: fixed;
	top: 200px;
	left: 200px;
	background: #231f20;
	/*top: 0px;*/
	font-style: italic;
	font-size: 14px;
	left: 30px;
	width: 190px;
	color: white;
	padding: 17px;
	display: none;
}
#mobile_rollover_text {
	display: none;
}

#rollover_text:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(35, 31, 32, 0);
	border-right-color: #231f20;
	border-width: 14px;
	margin-top: -14px;
}
/***************************************************************************/
/***************************** TWO LINE INPUT ******************************/
/***************************************************************************/

/***************************************************************************/
/************************ CROSS BROWSER RANGE INPUT ************************/
/***************************************************************************/
/*modified from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html*/

input[type="range"] {
	float: left;
	clear: both;
	position: relative;
	top: 6px;
	/*removes default webkit styles*/
	-webkit-appearance: none;

	/*fix for FF unable to apply focus style bug */
	border: none;
	height: 18px;
	background-color: transparent;

	/*required for proper track sizing in FF*/
	/*width: 300px;*/
}
input[type="range"]::-webkit-slider-runnable-track {
	/*width: 300px;*/
	height: 8px;
	background: #d0d0d0;
	border: none;
	border-radius: 6px;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 2px solid #fff;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #f27d8a;
	margin-top: -4px;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
input[type="range"]:focus {
	outline: 0;
}
input::-moz-focus-inner {
	outline: 0;
}
input[type="range"]::-moz-focus-outer {
	border: 0;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
	background: #353535;
	outline: none;
}

input[type="range"]::-moz-range-track {
	/*width: 300px;*/
	height: 5px;
	background: #9d9d9d;
	border: none;
	border-radius: 3px;
}
input[type="range"]::-moz-range-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #1696d2;
	cursor: pointer;
}

/*hide the outline behind the border*/
input[type="range"]:-moz-focusring {
	outline: none;
	outline-offset: -1px;
}

input[type="range"]::-ms-track {
	/*width: 300px;*/
	height: 5px;

	/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	background: transparent;

	/*leave room for the larger thumb to overflow with a transparent border */
	border-color: transparent;
	border-width: 6px 0;

	/*remove default tick marks*/
	color: transparent;
}
input[type="range"]::-ms-fill-lower {
	background: #9d9d9d;
	border-radius: 10px;
}
input[type="range"]::-ms-fill-upper {
	background: #9d9d9d;
	border-radius: 10px;
}
input[type="range"]::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: #1696d2;
	cursor: pointer;
}
input[type="range"]:focus::-ms-fill-lower {
	background: #353535;
}
input[type="range"]:focus::-ms-fill-upper {
	background: #353535;
}

/***************************************************************************/
/********************************* TEXT INPUT ******************************/
/***************************************************************************/
input[type="text"] {
	opacity: 0;
	pointer-events: none;
	float: left;
	clear: right;
	font-family: Lato;
	border: none;
	height: 20px;
	vertical-align: middle;
	font-size: 13px;
	background-color: transparent;
	text-align: left;
}

/* Make the average monthly rent inputs visible and functional */
.rent-inputs-container {
	display: flex;
	align-items: center;
	gap: 25px;
	margin-right: 20px;
}

.rent-sync {
	opacity: 1 !important;
	pointer-events: all !important;
	width: 80px !important;
	height: 30px !important;
	text-align: center;
	background-color: white !important;
	color: black;
	font-family: Lato;
	font-size: 16px !important;
	font-weight: normal;
	padding: 8px;
	border: 1px solid #a2d4ec !important;
	border-radius: 4px;
	height: auto;
	float: none;
	clear: none;
}

/* Legacy support for any remaining references */
#text_average_monthly_rent {
	opacity: 1 !important;
	pointer-events: all !important;
	width: 260px;
	text-align: center;
	background-color: white;
	color: black;
	font-size: 16px;
	font-weight: normal;
	padding: 5px;
	border: 1px solid #a2d4ec;
	border-radius: 4px;
	margin-right: 20px;
	height: auto;
}

/* Rent limit hint message */
#rent_limit_hint {
	position: absolute;
	top: -25px;
	left: 0;
	right: 0;
	color: #db2b27;
	font-size: 12px;
	font-style: italic;
	display: none;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 3px 5px;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	font-weight: normal;
}

/* Title input styling - make it look like a proper input field */
/* Note: div.new_source_label (button) uses #click_to_add_sources selector */
input.new_source_label {
	opacity: 1 !important;
	pointer-events: all !important;
	width: 205px;
	height: 30px;
	text-align: left;
	background-color: white !important;
	color: black;
	font-family: Lato;
	font-size: 16px;
	font-weight: normal;
	padding: 5px;
	border: 1px solid #a2d4ec;
	border-bottom: 1px solid #a2d4ec !important;
	border-radius: 5px;
	margin-right: 230px;
	font-style: italic;
	text-indent: 4px;
}

.control.sources.other_source {
	opacity: 1 !important;
	pointer-events: all !important;
	width: 80px !important;
	height: 30px !important;
	text-align: left;
	background-color: white;
	color: black;
	font-family: Lato;
	font-size: 16px;
	font-weight: normal;
	padding: 5px;
	padding-left: 8px;
	border: 1px solid #a2d4ec;
	border-radius: 4px;
	margin-right: 27px;
	font-style: normal;
	display: inline-block;
}

.control.sources.other_source:last-child {
	margin-right: 0;
}

.control_container.new_source .remove_source_btn {
	display: inline-block;
	background: transparent;
	border: none;
	color: #888;
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
	margin-left: 8px;
	cursor: pointer;
	vertical-align: middle;
	font-family: inherit;
	transition: color 0.15s ease;
}

.control_container.new_source .remove_source_btn:hover,
.control_container.new_source .remove_source_btn:focus {
	color: #db2b27;
	outline: none;
}

/* ----------------- NEW RESPONSIVE ------------------------- */

input.text.invalid {
	border: 2px solid #db2b27;
	/*border-left: none;*/
	width: 68px !important;
	text-align: center !important;
	background: #e3e3e3;
}

@media (max-width: 900px) {
	#sources .s50_label {
		top: 30px;
	}

	#sources .s100_label {
		top: 60px;
	}

	/*
	 * Rows with toggle switches (tax_credit_equity, provincial_funding,
	 * municipal_funding, capital_funding): slider sits in normal flow at
	 * ~26–44px from the container top (after the label). The abs-positioned
	 * switch+label stack must start BELOW the slider so they don't overlap.
	 * other_grant_funding has no switches and is not affected.
	 */
	#sources .control_container.tax_credit_equity,
	#sources .control_container.provincial_funding,
	#sources .control_container.municipal_funding,
	#sources .control_container.capital_funding {
		height: 140px;
	}

	/* Push toggle switches below slider (label ≈20px + slider top:6px + height:18px ≈ 44px) */
	#sources .urban-switch.switch-1unit {
		top: 50px;
	}
	#sources .urban-switch.switch-10units {
		top: 80px;
	}
	#sources .urban-switch.switch-40units {
		top: 110px;
	}

	/* Align dollar labels with their respective toggle row */
	#sources .control_container.tax_credit_equity .s1_label,
	#sources .control_container.provincial_funding .s1_label,
	#sources .control_container.municipal_funding .s1_label,
	#sources .control_container.capital_funding .s1_label {
		top: 50px;
	}
	#sources .control_container.tax_credit_equity .s50_label,
	#sources .control_container.provincial_funding .s50_label,
	#sources .control_container.municipal_funding .s50_label,
	#sources .control_container.capital_funding .s50_label {
		top: 80px;
	}
	#sources .control_container.tax_credit_equity .s100_label,
	#sources .control_container.provincial_funding .s100_label,
	#sources .control_container.municipal_funding .s100_label,
	#sources .control_container.capital_funding .s100_label {
		top: 110px;
	}

	.control.sources.other_source {
		position: absolute;
		right: 0px;
		top: 0px;
		margin-right: 0;
		width: 100%;
		max-width: 280px;
		background-color: white !important;
		color: black !important;
		padding: 5px;
		border: 1px solid #a2d4ec;
		border-radius: 4px;
		text-align: center;
		font-family: Lato;
		font-size: 16px;
		font-weight: normal;
		font-style: normal;
	}

	.control.sources.other_source:nth-child(3) {
		top: 40px;
		background-color: white !important;
		color: black !important;
	}

	.control.sources.other_source:last-child {
		top: 80px;
		background-color: white !important;
		color: black !important;
	}

	.control_container.new_source {
		height: 140px;
		margin-bottom: 10px;
	}
}

/***************************************************************************/
/********************************* CREDITS *********************************/
/***************************************************************************/
#credits,
#text_credits {
	position: fixed;
	bottom: 56px;
	right: calc(36% + 34px);
	width: 72px;
	height: 53px;
	background-color: white;
	z-index: 1000000;
	transform: rotate(77deg);
}
#text_credits {
	opacity: 0;
}
#credits_title {
	margin-left: 35px;
	margin-top: -10px;
	margin-bottom: 20px;
	font-size: 22px;
}
.credits_h2 {
	margin-left: 10px;
	font-weight: bold;
}
.credits_h3 {
	margin-left: 10px;
	font-size: 12px;
	margin-top: 15px;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-weight: bold;
	color: #1696d2;
}

.credits_name {
	margin-left: 10px;
	margin-bottom: 5px;
}
.credits_name a {
	cursor: pointer;
	text-decoration: none;
	color: #000;
}
.credits_name a:hover {
	color: #1696d2;
}
.credits_name span {
	display: block;
	font-style: italic;
	font-size: 13px;
}
#credits_left_col,
#credits_right_col {
	float: left;
}
#credits_left_col,
#credits_right_col {
	width: 44%;
	margin-left: 25px;
}
#report_button {
	text-transform: uppercase;
	color: white;
	background-color: #1696d2;
	font-style: normal;
	cursor: pointer;
	padding: 13px;
	width: 150px;
	text-align: center;
	margin-top: 15px;
	margin-left: 10px;
	font-size: 14px;
}
#report_button a {
	text-decoration: none !important;
	color: white !important;
}
#git {
	font-size: 11.5px;
	text-transform: uppercase;
	position: relative;
	left: 35px;
	top: 20px;
}
#git a {
	color: #1696d2;
	text-decoration: none;
}
#git a:hover {
	color: #12719e;
}
#git_mobile {
	font-size: 11px;
	text-transform: uppercase;
	position: relative;
	left: 15px;
	top: 20px;
}
#git_mobile a {
	color: #1696d2;
	text-decoration: none;
}
#git_mobile a:hover {
	color: #12719e;
}
.button_text {
	text-transform: uppercase;
	color: white;
	background-color: #1696d2;
	font-style: normal;
	cursor: pointer;
	width: 200px;
	padding: 13px;
	margin-top: -16px;
	margin-bottom: 22px;
	margin-left: 60px;
}
#reset-button {
	text-transform: uppercase;
	color: white;
	background-color: #f27d8a;
	font-style: normal;
	cursor: pointer;

	width: fit-content;
	line-height: 26px;
	padding: 8px 20px;
	border-radius: 10px;

	position: fixed;
	bottom: 20px;
	left: 4rem;
	z-index: 1000;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 3px 0px #414042;
	-moz-box-shadow: 0px 3px 0px #414042;
	box-shadow: 0px 3px 0px #414042;

	/* Hidden by default */
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
	transition: all 0.3s ease;
}

#reset-button.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

#reset-button:hover {
	background-color: #231f20;
}
#disclaimer {
	display: inline-block;
	padding-left: 35px;
	margin-top: 8px;
	font-size: 13px;
	font-style: italic;
	padding-right: 9px;
}

/********* Close button **********/
.close_button.credits {
	position: relative;
	top: -9px;
	right: -461px;
	cursor: pointer;
	height: 34px;
	width: 34px;
}
.close_button.warning {
	position: absolute;
	top: -9px;
	right: -20px;
	cursor: pointer;
	height: 34px;
	width: 34px;
}
.close_button.rollover_button {
	float: right;
	width: 24px;
	height: 24px;
	margin-top: -26px;
	margin-right: -26px;
}
.close_button > circle {
	stroke: #231f20;
	fill: #231f20;
}
.close_button > path {
	stroke: #d1d2d4;
}
.close_button.rollover_button > circle {
	stroke: #e7d18f;
	fill: #e7d18f;
}
.close_button.rollover_button > path {
	stroke: #231f20;
}

.close_button:hover > circle {
	stroke: #1696d2;
	fill: #1696d2;
}
.close_button:hover > path {
	stroke: white;
}

/***************************************************************************/
/********************************* SWITCH **********************************/
/***************************************************************************/
.urban-switch.small {
	position: absolute;
	top: 22px;
	left: 435px;
	font-size: 13px;
	font-family: Lato, sans-serif;
	height: 26px;
	border: none;
	color: #ffffff;
	display: inline-block;
	line-height: 12px;
	text-align: left;
	border-radius: 10px;
	padding-right: 10px;
}
/* Simple universal switch positioning */
.urban-switch.switch-1unit {
	left: 435px;
}
.urban-switch.switch-10units {
	left: 540px;
}
.urban-switch.switch-40units {
	left: 650px;
}
.top_switch {
	margin-bottom: 50px !important;
}
.control_container.disabled .switch {
	background-color: #9d9d9d !important;
	pointer-events: none;
}
.switch.off:hover {
	background-color: #333 !important;
}
.switch.on:hover {
	background-color: #12719e !important;
}
.switch.small {
	background-image: url(../images/off-on.png);
	background-color: #696969;
	background-repeat: no-repeat;
	width: 55px;
	height: 18px;
	display: inline-block;
	background-size: cover;
	cursor: pointer;
	margin-right: 9px;
	top: 4px;
	left: 4px;
	position: relative;
	border-radius: 10px;

	-webkit-transition: background-position 0.1s ease-in;
	-moz-transition: background-position 0.1s ease-in;
	-o-transition: background-position 0.1s ease-in;
	transition: background-position 0.1s ease-in;
}
.switch.small.s100 {
	background-color: #1696d2;
}

.switch.small.off {
	background-position: -47.2px 0px;
}

.switch.small.on {
	background-position: -10px 0px;
}

.urban-switch.large {
	/*position: absolute;*/
	/*top: 22px;*/
	/*left: 212px;*/
	font-size: 13px;
	font-family: Lato, sans-serif;
	height: 26px;
	border: none;
	color: #ffffff;
	display: inline-block;
	line-height: 12px;
	text-align: left;
	border-radius: 10px;
	padding-right: 10px;

	margin-bottom: 18px;
}

@media (max-width: 900px) {
	/* Simple mobile positioning */
	.urban-switch.switch-1unit {
		left: unset;
		top: 0px;
		right: 90px;
	}
	.urban-switch.switch-10units {
		left: unset;
		top: 30px;
		right: 90px;
	}
	.urban-switch.switch-40units {
		left: unset;
		top: 60px;
		right: 90px;
	}
}

/* @media (max-width: 480px) {
	.urban-switch.small {
		left: unset;
		top: 0px;
		right: 70px;
	}
	.urban-switch.small.s100 {
		left: unset;
		top: 30px;
	}
} */

#vacancy {
	background-image: url(../images/off-on_vacancy.png);
}
#interest {
	background-image: url(../images/off-on_interest.png);
}
.switch.large {
	background-image: url(../images/off-on.png);
	background-color: #696969;
	background-repeat: no-repeat;
	/*width: 55px;*/
	/*height: 18px;*/
	/*border-radius: 10px;*/

	width: 83px;
	height: 26px;
	border-radius: 20px;
	margin-left: 60px;

	display: inline-block;
	background-size: cover;
	cursor: pointer;
	margin-right: 9px;
	/*    top: 4px;
    left: 4px;
*/
	position: relative;

	-webkit-transition: background-position 0.1s ease-in;
	-moz-transition: background-position 0.1s ease-in;
	-o-transition: background-position 0.1s ease-in;
	transition: background-position 0.1s ease-in;
}

.switch.large.off {
	background-position: -68px 0px;
	background-color: #696969;
}

.switch.large.on {
	background-position: -10px 0px;
	background-color: #1696d2;
}

.toggle_text {
	font-weight: 900;
	margin-left: 60px;
	margin-top: -14px;
	margin-bottom: 9px;
	font-size: 18px;
}

/***************************************************************************/
/********************************* PRINT ***********************************/
/***************************************************************************/
#print_output {
	display: none;
}
#print_output_label {
	display: none;
}

/***************************************************************************/
/********************************** FADER **********************************/
/***************************************************************************/
#fader {
	position: fixed;
	bottom: -130px;
	left: 0px;
	z-index: 200;
	pointer-events: none;
}

/* Summary Section */
#mobile_summary_section > .header_wrapper {
	background-color: #deda5c;
	color: #000;
}

#mobile_summary_section .header_1,
#mobile_summary_section .header_50,
#mobile_summary_section .header_100 {
	color: #005958;
	font-size: 18px;
	font-weight: 600;
}

#mobile_summary_section .control_wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

#mobile_summary_section .control_container {
	color: #5d5d5d;
	padding-top: 20px;
	padding-bottom: 20px;
	height: auto;
	border-bottom: 0.8px dashed rgba(0, 0, 0, 0.2);
}

#mobile_summary_section .control_container:last-child {
	border-bottom: none;
}

#mobile_summary_section .control_container:first-child {
	color: #000;
	font-weight: 600;
}

@media (max-width: 900px) {
	#mobile_summary_section .header_1,
	#mobile_summary_section .header_50,
	#mobile_summary_section .header_100 {
		color: black;
		font-size: 16px;
	}

	#mobile_summary_section .header_100 {
		color: white;
	}

	#mobile_summary_section .control_container {
		height: 100px;
	}

	#mobile_summary_section .s1_label {
		top: 10px;
	}

	#mobile_summary_section .s50_label,
	#mobile_summary_section .s100_label {
		top: 40px;
	}

	#mobile_summary_section .s100_label {
		top: 70px;
	}
}

/* Hide building on right side when viewport width is less than 1440px */
@media (max-width: 1440px) {
	#ground_container,
	#building_container_50,
	#building_container_100,
	#fader {
		display: none;
	}
}

/* Responsive design for reset button */
@media (max-width: 900px) {
	#reset-button {
		bottom: 15px;
		left: 15px;
		padding: 8px 20px;
		line-height: 26px;
	}

	#reset-button.visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
}

@media (max-width: 480px) {
	#reset-button {
		bottom: 10px;
		left: 10px;
		padding: 8px 20px;
		line-height: 26px;
	}

	#reset-button.visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
}