/* Sliders and button ----------------- */
#simulation-controls-wrapper{
	padding: .25em 0 1em 0;
	margin: 1em 0 0 0;
	background-color: #fff;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 15%);
	}
#reset{ margin: 1rem 0 0 1em; }

/* Top NC ratio feedback */
#simulation-feedback-NCratio{
	top: .25em;
	left: .25em;
 	position: absolute;
	padding: .75rem 1.25rem;
	font-size: 1.15em;
	font-weight: bold;
	border-radius: .5rem;
	background-color: var(--highlight-yellow);
	color: #ad6600;
	}

/* Canvas ----------------- */
#simulation-canvas-wrapper{
	width: 100%;
	position: relative;
	margin: 1em auto;
	}
#simulation-canvas-wrapper canvas{
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	display: block;
	}	
#canvas-wrapper img{
	width: 100%;
	}	

/* Cell stats below ----------------- */
#cell-info-wrapper{
	margin-top: 1em;
	display: grid;
	grid-gap: .25em;
	}

#cell-info-wrapper .stats{
	display: grid;
	grid-gap: .25em;
	grid-template-columns: 1fr 1fr;
	text-align: center;
	}	

#cell-info-wrapper .stats > div{
	padding: .75em;
	color: #9b3700;
	background-color: #ffc98c;
	}	

#cell-info-wrapper .value{
	font-weight: bold;
	font-size: 1.15em;
	}	

#cell-info-wrapper .stats > div:first-child{	
	border-radius: .5em 0 0 .5em;
	}
#cell-info-wrapper .stats > div:last-child{	
	border-radius: 0 .5em .5em 0;
	}

#cell-info-wrapper .stats.nucleus > div{
	background-color: #ffd8ee;
	}