/* CELL VIEWER ---------------------- */
#cell-viewer {
	position: relative;
	margin: 4em 0 0 0;
	}	
#cell-viewer img {
	width: 100%;
	}	

#cell-content{
	margin-bottom: 5em;
	}

#no-results-text{
	text-align: center;
	background-color: var(--highlight-yellow);
	padding: 1em;
	border-radius: .5em;
	}

/* HOTSPOTS ----------------------- */ 
#hotspot-wrapper {
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	}

/* stroke needed to extend white fill slightly beyond boundaries */	
#hotspot-wrapper path{
	fill: rgba(255, 255, 255, .6);
	stroke: rgba(255, 255, 255, .6);
	stroke-width: 3;
	cursor: pointer;
	}
#hotspot-wrapper path.active{
	fill: transparent;
	}	

/* MENU ------------------------- */
#view-compare-menu {
	display: grid;
    grid-gap: .5em;
    grid-template-columns: repeat(2, 1fr);
    margin:  1em 0 2em 0;
	}
#view-compare-menu button{
	width:  100%;
	margin: 0;
	}

#view-compare-menu button.active{
	background-color: #ed8546;
	color: #fff;
	}

#cells-selected-feedback{
	display: none;
	}

/* RESULTS ------------------------- */
#view-compare #results-content {
	display: grid;
	grid-gap: 2em;
	grid-template-columns: 1fr;
	}

/* CARDS OF INFO ---------------*/	
#view-compare .close-card-icon{
	width: 2.5em;
	position: absolute;
	right: 1em;
	top: 1em;
	cursor: pointer;
	}
#view-compare .card-wrapper {
	padding-top: 1.5em;
    padding-bottom: 2.5em;
    position: relative;
	}	
#view-compare .card-wrapper h3{
	padding-top: 0;
	margin-bottom: .5em;
	}	
#view-compare .card-wrapper .title{
	font-weight: bold;
	}
#view-compare .item-content{
	margin-bottom: 1em;
	}

#view-compare .card-wrapper img.thumbnail {
	float: right;
	width:  40%;
	margin: 0 0 1em 1em;
	}	
.microscopy img{
	width: 100%;
	}
.microscopy .credit{
	font-size: .9em;
	color: #999;
	}		
.location img{
	margin: 0 auto 1.5em auto;
	text-align: center;
	display: block;
	width: 50%;
	}

#total-inspected-feedback{
	display: grid;
    grid-gap: 2em;
    grid-template-columns: 2fr 1.25fr;
    align-items: center;
    border-radius: 0.5rem;
    margin: 0.5em 0 1rem 0;
    font-weight: bold;
	}	
#total-inspected-feedback img{
	width: 100%;
	}