#choose-water-source-wrapper { margin: 4rem 0 3rem 0; }
#choose-water-source-wrapper h4{ padding-top: 0; }
#choose-water-source-wrapper p{
	padding: .25rem 0;
	line-height: 1.25rem;
	}
#extra-points{ margin: 1.5rem 0;}




.pipes-border {
	border-image: none;
	padding: 0;
	border-width: 0;
	position: relative;
	}
.pipes-border h2, .pipes-border h3{ padding-top: 0; }


#build-facility #feedback-wrapper{ padding: 1rem 0 0 0; }
#build-facility .feedback-block{
	border-top: 2px dotted #ccc;
	padding-bottom: .5rem;
	}
#build-facility .pipes-border div:first-of-type{ border: none; }

#build-facility #feedback-wrapper .mini-icon-grid { grid-template-columns: 3.5rem auto; }
#build-facility .feedback-block + .feedback-block{ padding-top: .5rem; }


#feedback-wrapper .station-wrapper{
	display: grid;
	gap: .5rem 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
#feedback-wrapper .mini-icon-grid{ 
	gap: .5rem;
	line-height: 1.05rem;
	}
#feedback-wrapper .mini-icon-grid .points{ padding-top: .2rem; }	
#feedback-wrapper .mini-icon-grid .points.negative{ color: #d51818; }	

#unconnected-station-wrapper.mini-icon-grid {
	grid-template-columns: 2.5rem auto;
	line-height: 1.4rem;
	}
#unconnected-station-wrapper.mini-icon-grid img{ padding: .5rem; }	


#feedback-wrapper .hint{     
    padding: 1rem 1.5rem;
    margin: .5rem 0 0 0; 
	}

#tool-wrapper{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 1rem;	
	padding-top: 1rem;
	margin: 0 0 1rem 0;
	}
#tool-wrapper img {
	width: 3.25rem;
	height: 3.25rem;
	padding: .5rem;
	display: grid;
	text-align: center;
	align-items: center;
	background-color: #6cc7ff;
	border-radius: .5rem;
	cursor: pointer;
	}	
#tool-wrapper img:hover{
	background-color: #3eafed;
	}	
#tool-wrapper img.disabled, #tool-wrapper img.disabled:hover{
	pointer-events: none;
	background-color: #ccc;
	}
#tool-wrapper img#tool-add.active, #tool-wrapper img#tool-add.active:hover { background-color: #ffa124; }
#tool-wrapper img#tool-remove.active, #tool-wrapper img#tool-remove.active:hover{ background-color: #d30000; }
#tool-wrapper img#tool-about.active, #tool-wrapper img#tool-about.active:hover{ background-color: #a161e9; }
#tool-wrapper img#tool-water.active, #tool-wrapper img#tool-water.active:hover{ background-color: #e355c6; }


#map-feedback{
	padding: 1rem;
	background-color: #efefef;
	border-radius: .5rem .5rem 0 0;
	line-height: 1.35rem;
	}

#map-wrapper{
	background-image: url("../images/game/build-facility/map/bg.svg");
	background-position: center;
	background-size: cover;
	border-radius: 0 0 .5rem .5rem;
	margin-bottom: 1rem;
	overflow: hidden
	}
#map{ 
	width:340px;
 	height: 340px;
 	margin: 0 auto;
 	position: relative;
 	}
#map > .station{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	border: 5px solid transparent;
	z-index: 100;
	}	
#map > .station img{ width: 100%; }	
#map .untested-station img{ filter: grayscale(100%) contrast(50%) brightness(130%); }	
#map > .station:hover{ border-radius: .75rem; }	
#map.tool-add > .station:hover:not(.active-station){ 
	border-color: #0070e0;
	cursor: pointer;
	}	
#map.tool-remove > .untested-station:hover{ 
	border-color: #d30000; 
	cursor: pointer;
	}
#map.tool-about > .active-station:hover, #map.tool-about > .untested-station:hover{ 
	border-color: #a161e9;
	cursor: pointer;
	}
#map.tool-water > .active-station:hover{ 
	border-color: #e355c6;
	cursor: pointer;
	}

#map .number{
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	text-align: center;
	font-size: 2rem;
	font-family: var(--special-font);
	font-weight: bold;
	z-index: 101;
	pointer-events: none;
	padding-top: 1rem;
	color: #bf852c;
	}	

#map > div{
	position: absolute;
	top: 0;
	left: 0;
	}
#map > div.horizontal-path{
	width: 100px;
	height: 30px;
	pointer-events: none;
	background-repeat: repeat-x;
	}
#map > div.vertical-path{
	width: 30px;
	height: 100px;
	pointer-events: none;
	background-repeat: repeat-y;
	}
#map > div.vertical-path.dirt{ background-image: url("../images/game/build-facility/map/dirt-path-vertical.svg"); }
#map > div.horizontal-path.dirt{ background-image: url("../images/game/build-facility/map/dirt-path-horizontal.svg"); }	

#map > div.vertical-path.water{ background-image: url("../images/game/build-facility/map/water-path-vertical.svg"); }
#map > div.horizontal-path.water{ background-image: url("../images/game/build-facility/map/water-path-horizontal.svg"); }


#side-map-wrapper{
	background-color: #efefef;
	max-width: 100%;
	overflow-x: auto;
	border-radius: .5rem;
	margin: 1rem 0;
	display: inline-block;
	}
#side-map {
	grid-gap: 14px;
	display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 15px;
    background-image: url(../images/game/build-facility/map/side-view-bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    float: left; /* hack for right padding with overflow */
	}
#side-map > img.station{
	width: 60px;
	height: 60px;
	flex: 0 0 auto;
	}

#test-facility-button.large{ margin: .25rem auto; }
#test-facility-counter{ 
	color: #999; 
	text-align: center;
	}


#facility-summary-wrapper #water-source-feedback-wrapper{ padding-top: 1rem;}
#facility-summary-wrapper #water-source-feedback-wrapper.mini-icon-grid { grid-template-columns: 3.5rem auto; }
#facility-summary-wrapper #station-wrapper .mini-icon-grid { grid-template-columns: 3.5rem auto; }
#facility-summary-wrapper .mini-icon-grid img { min-height: 3.5rem;}

#build-facility #feedback-wrapper .mini-icon-grid.bonus-points{
	line-height: 1.5rem;
	gap: 1.5rem;
	}


#water-quality-summary-wrapper #water-uses { padding-bottom: 1rem; }

#water-quality-summary-wrapper .mini-icon-grid img { 
	border-radius: 50%; 
	min-height: 3.5rem;
	}

#panel-intro-text{ 
	color: var(--asu-maroon);
	font-size: 1.4rem;
	line-height: 1.6rem;
	font-weight: bold;
	}

#water-source-info-panel #water-sources{ margin: 2rem 0 0 0; }

#water-use-info-panel img{ border-radius:50%; }


#additional-content-wrapper{ padding-top: .5rem; }
#additional-content-wrapper .toggle-box{ padding-top: .5rem; }
#additional-content-wrapper #poop .toggle-title.icon img {
	width: 2.5rem;
    left: .8rem;
    top: .75rem;
	}

#add-station-panel #station-wrapper > div.station-block { 
	border-top: 2px dotted #aaa;
	margin-top: 2rem;
	padding-top: 1rem; 
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	}
#add-station-panel #station-wrapper > div.station-block .icon { text-align: right; }	
#add-station-panel #station-wrapper > div.station-block img{
	width: 6rem;
	height: 6rem;
	}	
#add-station-panel #station-wrapper > div.station-block div.about{ grid-column: 1/3;} 
#add-station-panel #station-wrapper > div.station-block:last-child { border-bottom: none; }

#add-station-panel .learn-more{ padding-top: 1rem; }

#water-quality-info-panel .station-img-block {
	display: grid;
	grid-template-columns: auto auto;
    gap: 2rem;
    align-items: center;
	}
#water-quality-info-panel .station-img-block img{
	height: 5rem;
	width: 5rem;
	}
#water-quality-info-panel #water-quality-wrapper{ margin: 0 0 3rem 0; }
#water-quality-info-panel .water-border{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	}
#water-quality-info-panel .water-border img{ 
	width: 4rem;
    height: 4rem;
    background-color: #fff;
    border-radius: 50%;
    padding: .5rem;
	}	
#water-quality-info-panel #water-quality-value{ font-size: 1.5rem; }
#water-quality-info-panel .mini-icon-grid.disabled, 
#water-quality-info-panel .mini-icon-grid.disabled .link, 
#water-quality-info-panel .mini-icon-grid.disabled .link:hover { color: #999; }
#water-quality-info-panel .mini-icon-grid img { border-radius: 50%; }

#water-pollutant-table{ margin-top: 1rem; }
#water-pollutant-table .status-wrapper{
	display: grid;
	gap: .5rem;
	align-items: center;
	grid-template-columns: min-content auto;
	}
#water-pollutant-table .status-wrapper div:first-child{
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	display: block;
	}
#water-pollutant-table .status-wrapper.present { color: #db4325; }	
#water-pollutant-table .status-wrapper.present div:first-child{ background-color: #db4325; }
#water-pollutant-table .status-wrapper.removed div:first-child{ border: 2px solid #ccc; }


#testedOnce img, #testedThree img {
	animation: pulse-scale 1s infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	}
#build-facility #feedback-wrapper #testedOnce .mini-icon-grid, 
#build-facility #feedback-wrapper #testedThree .mini-icon-grid { 
	gap: 1rem;
    line-height: 1.4rem;
    }

#build-facility #feedback-wrappe #testedOnce, #build-facility #feedback-wrappe #testedThree { line-height: 1.25rem; }



@media print, (min-width:580px) {


	.pipes-border {
		border-image-source: url('../images/borders/pipes-border.png');
	    border-image-repeat: stretch;
	    border-width: 70px;
	    border-style: solid;
	    border-image-slice: 70;
	    padding: .5rem 0;
		}
	.pipes-border:after{
		content: url('../images/borders/guages.svg');
		position: absolute;
	    top: -80px;
	    left: 50%;
	    width: 10rem;
		margin-left: -5rem;
		}	

	#build-facility #feedback-wrapper{ padding: 1rem 0 1rem 0; }

	#build-facility #feedback-wrapper .mini-icon-grid { grid-template-columns: 4.5rem auto; }
	
	#water-use-info-panel .img-right-wrapper.small img{ width: 8rem; }

	#add-station-panel #add-station-intro-text {padding-top: 0; }
	#add-station-panel #station-wrapper {
		margin-top: 2rem;
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		}
	#add-station-panel #station-wrapper > div.station-block { 
		border: none;
		border-radius: .75rem;
		background-color: #fff;
		margin: 0;
		padding: 1rem 1.5rem 1.5rem 1.5rem; 
		grid-template-columns: min-content auto;
		align-content: flex-start;
		}
	#add-station-panel #station-wrapper > div.station-block img{
		width: 6rem;
		height: 6rem;
		}

	#map-feedback { padding: 1.5rem 1.5rem 1rem 1.5rem; }
	
	#water-quality-info-panel #water-quality-wrapper{ margin: 2rem 0 6rem 0; }

	#facility-summary-wrapper #water-source-feedback-wrapper.mini-icon-grid { grid-template-columns: 4.5rem auto; }
	#facility-summary-wrapper #station-wrapper .mini-icon-grid { grid-template-columns: 4.5rem auto; }
	#facility-summary-wrapper .mini-icon-grid img { min-height: 4.5rem;}

	#water-pollutant-table .status-wrapper{ grid-template-columns: 1.5rem max-content; }
}   


@media print {

	.pipes-border {
		border-image-source: none;
	   	border-width: 0;
	    padding: 0;
		}
	.pipes-border:after{ content: none; }	

	#tool-wrapper { display: none; }
	#map-feedback{ display: none;  }
	#map-wrapper{ 
		border-radius: 0; 
		transform: scale(.5);
	    transform-origin: top center;
	    margin: 0 0 -10rem 0;
		}
	#water-quality-info-panel #water-quality-wrapper{ margin: 0; }

	.panel .toggle-box {
	    border-top: solid 1px #ccc;
	    border-bottom: solid 1px #ccc;
	    padding: .75rem 0;
		}

	#add-station-panel #station-wrapper { 
		margin-top: 1rem; 
		display: block;
		}
	#add-station-panel #station-wrapper > div.station-block .title { display: none; } 
	#add-station-panel #station-wrapper > div.station-block { 
		grid-template-columns: min-content auto;
		gap: .75rem;
		padding: .5rem 0;
		}	
	#add-station-panel #station-wrapper > div.station-block img{
		order: 0;
		width: 3.5rem;
		height: 3.5rem;
		}	
	#add-station-panel #station-wrapper > div.station-block div.about{ grid-column: auto;}
	#add-station-panel .learn-more{ display: none; }

	#facility-summary-wrapper #water-source-feedback-wrapper.mini-icon-grid { grid-template-columns: 3.5rem auto; }
	#facility-summary-wrapper #station-wrapper .mini-icon-grid { grid-template-columns: 3.5rem auto; }
	#facility-summary-wrapper .mini-icon-grid img { min-height: 3.5rem;}

}