body {
	font-family: Arial, sans-serif;
	background: #eee;
}

#speciesBox{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
	padding-top:1%;
}

.speciesDiv, .speciesDivSelected {
	flex-grow: 1;
	flex-basis: auto;
	background: darkgreen;
	color: black;
	float: left;
	margin: 5px;
	cursor: pointer;
	min-width: 12%;
	max-width: 15%;
	border-radius: 10px;
}

.speciesDiv img, .speciesDivSelected img {
	width: 100%;
	height: auto;
	margin:0 0 5px 0;
}

.speciesDiv{
	border: 10px solid rgba(0,0,0,0);
	box-shadow: 0px 0px 40px #aaa;
}

.speciesDivSelected {
	border: 10px solid yellow;
	box-shadow: 0px 0px 40px yellow;
}

.speciesLabel {
	text-align: center;
	margin: 5px 0px;
	background: black;
	color: white;
	padding: 5px 0px;
}

#species1curve{
	stroke-width: 0.2;
	stroke: blue;
	fill: url(#hatch1);
	fill-opacity: 1.0;
}

#species2curve{
	stroke-width: 0.2;
	stroke: red;
	fill: url(#hatch2);
	fill-opacity: 1.0;
}

#visualization{
	width: 100%;
	height: 100%;
	background: white;
	border: 2px solid black;
}

#controls {
	float: left;
}

#widget-container {
	display: flex;
	flex-direction: row;

	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	margin: 1.25% 0 0 0;
}

.widget-item {
	flex-basis: 1;
}

#svg-container {
	flex-basis: 5;
}


#controls {
	font-size: 200%;
	text-align: center;
}

#year_span {
	font-size: 300%;
}

#years_out {
	margin-top: 10%;
	width: 95%;
}

.tickLabel{
	text-anchor: middle;
	font-size: 2.8px;
}

#week-label {
	font-size: 200%;
	text-align: center;
}

@media only screen and (min-width: 720px) {
	#svg-container {
		width: 55%;
		margin-left: 2.5%;
		margin-top: 2.5%;
	}

	#controls {
		width: 30%;
		margin: 0 2.5% 0 0;
	}
}

/** RANGE STYLE **/

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  
  border: 1px solid #000000;
  height: 40px;
  width: 40px;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  
  border: 1px solid #000000;
  height: 40px;
  width: 40px;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  
}
input[type=range]::-ms-thumb {
  
  border: 1px solid #000000;
  height: 40px;
  width: 40px;
  border-radius: 30px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: 0px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}