/* SIMULATION PAGE ----------------------- */

.preload-complete {
	display: none;
	}
/* title */
#simulation-main-title{
	margin-bottom: .25em;
	}			

/* for drop downs */
.simulation-section{
	margin-top: 1.25em;
	margin-bottom: 1.25em;
	padding-bottom: .75em;
	border-bottom: .1em dotted #ccc;
	}

/* Precautions and R icon feedback ------------------- */
.icon-feedback-wrapper{
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	text-align: center;
	margin: 1.5em 0 0 0;
	position: relative;
	}
.icon-feedback-wrapper .flex-item{
	flex-grow: 1;
	flex-basis: 0;
	padding: 0 .5em 0 .5em;
	line-height: .95em;
	}
	
.r-wrapper span {
	display: inline-block;
	padding: 0 .1em 0 .1em;
	}	
.icon-feedback-wrapper .flex-item img{
	width: 3em;
	display: block;
	margin: 0 auto .25em auto;
	}

/* R pop-up */
.rIcon{
	cursor: pointer;
	}
.rPop{
	margin-top: .5em;
	display: none;
	background-color: #eee;
	padding: 1em;
	}

/* Play Simuation button */
#play-simulation-wrapper{
	margin: 1em 0;
	}
#stop-simulation-play-wrapper{
	display: none;
	margin: 1em 0;
	}
#play-simulation-wrapper>div, #stop-simulation-play-wrapper>div{
	display: inline-block;
	vertical-align: bottom;
	}
#play-simulation-wrapper img, #stop-simulation-play-wrapper img{
	max-width: 1.5em;
	vertical-align: middle;
	}		

/* Slider ------------------- */
#week-slider-wrapper{
	margin: 1em 0 1em 0;
	}

/* wrapper for map image and canvas ------------------- */ 	
#simulation-map-feedback, #simulation-map-feedback-run-again{
	background-color: #C3EA7D;
    padding: .25em 1em;
    margin-bottom: .5em;
    display: none;
	}
#simulation-map-wrapper{
	clear: both;
	position: relative;
	line-height: 0;
	}
#simulation-map-key-wrapper{
	clear: both;
	background-color: #e8e8e8;
	overflow: auto;
	padding: .8em;
	}	

.map-key-wrapper{
	display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 2em;
    padding-top: .25em;
	}

.map-key-wrapper>div{
    line-height: 1.1em;
    display: grid;
    grid-template-columns: 2.5em .75em auto;
  	align-items: center;
	}			
.map-key-wrapper>div:first-child{
	grid-template-columns: 1.5em .75em auto;
	text-align: left;
	}
.map-key-wrapper>div:nth-child(5){
	text-align: left;
	}		
/* img */ 	
.map-key-wrapper>div img{
	max-width: 2.25em;
	}
.map-key-wrapper img.small{ /* for single person */
	max-width: 1.25em;
	}


/* canvas */
.city-canvas{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	}

/* proportions bar ------------ */ 

/* header */
#proportion-header-wrapper{
	display: grid;
	margin: 0 0 .15em 0;
	}	
#proportion-title {
	font-weight: bold;
	}

/* bar part */
#proportion-graph{
	margin-top: .25em;
	}
#proportion-graph canvas{
	width: 100%;
	height: 50px;
	} 	
/* key */
#proportions-key-values{
	margin: .75em 0;
	}
#proportions-key-values > div{
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	grid-gap: 1em;
	}	
.proportion-key-item-wrapper .proportion-key-block{
	width: .8em;
	height: .8em;
	float: left;
	}
.proportion-key-item-wrapper .proportion-key-title{
	margin-left: 1.25em;
	line-height: 1em;
	} 
#about-numbers-content{
	display: none;
	}

.sim-options>span{
	display: inline-block;
	}

/* text about saving simulation*/
#run-again-feedback-vaccinated, #run-again-feedback-herd, 
#save-city, #city-saved-feedback, 
#run-again-vaccines, #run-again-herd{
	display: none;
	}

/* table menu------------ */ 		
.table-menu{
	margin-top: 1em;	
	}	
/* tables */ 
.data-table-months{
	margin-bottom: 1em;
	display: none;
	}
.data-table-weeks{
	margin-bottom: 1em;
	}
/* key above table ------------ */ 
.table-state-key-wrapper{
	background-color: #e8e8e8;
	margin: .5em 0 0 0;
	padding: .6em .6em .4em .6em;
	}
.table-state-key-wrapper div{ 
	display: inline-block; 
	padding-right: .9em;
	}	


/* pathogen and city summary sections ------------------- */	
#city-summary-wrapper .thumbnail, #pathogen-summary-wrapper .thumbnail{
	float: right;
	width: 25%;
	padding: .75em 0 0 0;
	}

/* for pathogen stats ------------------- */
.stats-list-content{
	display: none;
	}
.stats-list-wrapper ul{
	margin: 1.25em .75em .75em 1.25em;
	padding: 0;
	}
.stats-list-wrapper li.title{
	color: #000;
	list-style-type: disc;
	}
.stats-list-wrapper li{
	padding: .2em 0 .2em 0;
	margin: 0;
	color: #777;
	list-style-type: none;
	}
	


/* Compare section ------------------- */
#no-results-message{
	padding: 1em 0 0 0;
	display: none;
	}
#compare-page-message{
	margin-top: 1.5em;
	margin-bottom: 1em;
	display: none;
	} 	
#saved-results-wrapper{
	display: none;
	}	
.compare-result{
	padding: .75em .5em .5em .5em;
	margin: .5em 0 .5em 0;
	border: solid 1px #ccc;
	}	
.compare-result img{
	width: 2.5em;
	padding-right: .25em;
	float: left;
	}	
.compare-result .title{
	display: block;
	clear: both;
	padding-top: .25em;
	}		
.compare-result .delete{
	display: inline-block;
	margin-bottom: .75em;
	}
.compare-result .delete-message{
	padding: 1em 1.5em;
	margin-bottom: 1em;
	margin-top: .25em;
	background-color: #ffdcdf;
	position: relative;
	display: none;
	}
/* little triangle */
.compare-result .delete-message > div:first-child{
	position: absolute;
    top: -1.65em;
    left: .5em;
    width: 0;
    height: 0;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
    border-bottom: 1.25em solid #ffdcdf;
    padding-top: .5em;
	}

/* print section ------------------- */
#print-wrapper{
	margin-bottom: 1em;
}
#print-wrapper p{
	margin-bottom: .25em;
	margin-top: .25em;
	}	
/* input */ 
#player-name{
	display: block;
	font-size: 1.25em;
    padding: .1em;
    width: auto;
    margin: 0 0 .5em 0;
    border: 2px solid #ccc;
	}

/* Loader ------------------- */

#preloader{
	padding: 3em 0;
	text-align: center;
	display: block;
	}
#preloader	h1{
	padding-bottom: 1em;
	}
.wheel {
	display: inline-block;
  	border: 2em solid #f3f3f3; /* Light grey */
  	border-top: 2em solid #8C1D40; /* ASU red */
  	border-radius: 50%;
  	width: 4em;
  	height: 4em;
  	animation: spin 2s linear infinite;
}

@keyframes spin {
  	0% { transform: rotate(0deg); }
  	100% { transform: rotate(360deg); }
}