.green-box {
	left: 9%;
	top: 2%;
	width: 82%;
	height: 13%;
	line-height: 1.1em;
}

.green-box p {
	letter-spacing: -0.02em;
	margin-top: 0.25em;
}

.solid-light-purple-box {
	position: fixed;
	top: 33%;
	width: 76%;
	left: 12%;
	/*
	z-index: 12;
	*/
}

#organism-container {
    position: absolute;
    left: 1.6%;
    top: 79.7%;
    width: 96.8%;
    height: 16.3%;
    background-color: var(--yellow-color);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

#organism-holder {
    position: absolute;
    top: 19.7%;
    width: 100%;
    height: 79.3%;
    background-color: var(--yellow-color);
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

#food-web {
	position: absolute;
	top: 16%;
	left: 9%;
	width: 82.2%;
	height: 61.8%;
	pointer-events: none;
}
.sticker { height: 90px; }

#correct-answer, #incorrect-answer {
	display: none;
	position: absolute;
	border-radius: 0.5em;
	width: 53%;
	min-height: 11.5%;
	left: 10.3%;
	top: 17.8%;
	font-size: 1.5em;
	color: #fff;
	padding: 0.5em;
	line-height: 1.25em;
}

#correct-answer { background-color: var(--green-color); }
#incorrect-answer {
	background-color: var(--yellow-color);
	color: #000000;
}

.source {
	font-size: 0.6em;
	color: #ffffff;
	padding-top: 0.25em;
}

.source a {
	color: #ffffff;
	text-decoration: underline;
}

.hidden {
	display: none!important;
}

#organism-holder { padding: 0 1.25em; }

#organism-container p {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 1%;
	width: 100%;
	font-weight: bolder;
	text-transform: uppercase;
	color: var(--violet-color);
	font-size: 1.4em;
}

.arrow-line {
	stroke: #FFFFFF;
	stroke-width: 6;
	pointer-events: none;
}

#arrow-head {
	fill: #FFFFFF;
	stroke-width: 5;
}

.dropzone {
	background-image: url("../images/food-web/dropzone.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 72px;
	height: 72px;
	position: absolute;
	display: block;
}

.dropzone.zone-correct { background-image: none; }

.ui-droppable-hover { background-color: #FFFFFF60; border-radius: 50%; }

#background {
	position: absolute;
	top: 16.1%;
	left: 8.9%;
	width: 82.3%;
	border-radius: 0.5em;
}

.dropzone.ui-droppable {
	/*
	z-index: 10;
	*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5em;
}

#phytoplankton-under-magnifying-glass-holder { left: 65.5%; top: 39.5%; }
#eelgrass-holder                             { left: 81.2%; top: 67.5%; }
#menhaden-holder                             { left: 51.4%; top: 40.8%; }
#oyster-holder                               { left: 72.6%; top: 55.6%; }
#blue-crab-holder                            { left: 62.8%; top: 69.5%; }
#octopus-holder                              { left: 47.3%; top: 52.6%; }
#oyster-drill-holder                         { left: 72.3%; top: 65.4%; }
#winter-flounder-holder                      { left: 31.7%; top: 67.4%; }
#seal-holder                                 { left: 31.4%; top: 44.1%; }
#mako-shark-holder                           { left: 15.6%; top: 35.4%; }

/* .dropzone.primary-consumer,
.dropzone.secondary-consumer,
.dropzone.tertiary-consumer,
.arrow-line.primary-consumer,
.arrow-line.secondary-consumer,
.arrow-line.tertiary-consumer { display: none; } */

#octopus                              { height: 146px; }
#menhaden                             { height: 103px; }
#eelgrass                             { height: 110px; }
#blue-crab                            { height: 80px;  }
#phytoplankton-under-magnifying-glass { height: 70px;  }
#mako-shark                           { height: 140px; }
#oyster-drill                         { height: 70px;  }
#seal                                 { height: 167px; }
#oyster                               { height: 50px;  }
#winter-flounder                      { height: 104px; }

/* ---- Adjust offset when in target ---- */
.dropzone > #phytoplankton-under-magnifying-glass-holder { position: absolute!important; left: 16px; }
.dropzone > #eelgrass        { position: absolute!important; top: -30px; left: -26px; }
.dropzone > #menhaden        { position: absolute!important; top: -16px; left: -15px; }
.dropzone > #oyster          { position: absolute!important; top: 11px;  left: 11px; }
.dropzone > #winter-flounder { position: absolute!important; top: -15px; left: -12px; }
.dropzone > #blue-crab       { position: absolute!important; top: -6px;  left: -7px; }
.dropzone > #octopus         { position: absolute!important; top: -30px; left: -45px; }
.dropzone > #seal            { position: absolute!important; top: -50px; left: -50px; }
.dropzone > #mako-shark      { position: absolute!important; top: -34px; left: -83px; }


#organism-holder .sticker {
	display: inline;
	margin: 0 0 0 0.25em;
}

#organism-holder > .sticker:nth-child(1) { margin-left: 22px !important; }