@media screen and (max-width: 600px){
	.mobile-not-show {
		display: none!important;	
	}
	.mobile-small-font {
		font-size: 0.8rem!important;	
	}
}

@media screen and (min-width: 600px){
	.tablet-not-show {
		display: none!important;	
	}
}

.panel-toggle-animation {
	transition: left 2s ease, opacity 2s ease, width 2s ease;
}

#groupName {
	display: none;
}

#floating-header {
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e7e7e7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
	border-bottom: 1px none;
	color: #e6e1cf;
	border-radius: 4px;
	height: auto;
	opacity: 0.8;
	width: auto;
	padding-left: 0;
	/* Not in use for the new menu panel. 
	position: absolute;
	margin-top: 36px;
	right: 10px;
	*/
}

td.number {
	text-align:right;
}

.floating-header-title {
	font-family: "Roboto Condensed","Helvetica Neue","Helvetica","Arial",sans-serif;
	color: #f1592a;
	font-size: 16px;
	letter-spacing: 0.1em;
	clear: both;
	/*background-image: url("https://mico.env.duke.edu/wp-content/themes/mico_wp_theme/images/species_background.png");*/
	background-image: url("https://mico.env.duke.edu/mico-tools/images/species_background.jpg");
	/*background-size: 380px auto;
	padding: 15px;	
	height: 115px;*/
	background-size: 400px auto;
	padding: 15px 25px;
	height: 130px;	
	background-repeat: no-repeat;
	background-position-y: center;
	/* Not in use for the new menu panel. 
	border-radius: 4px;
	border-top: 4px solid #ffffff;
	*/
	margin-top: 3px;
}

.floating-header-logo {
	background-position: right center;
	/*background-image: url("https://mico.env.duke.edu/wp-content/themes/mico_wp_theme/images/micologo.png");*/
	background-image: url("https://mico.env.duke.edu/wp-content/themes/mico/images/logo_no_text.svg");
	background-repeat: no-repeat;
	background-size: 80px;
	height: 36px;
	line-height: 36px;
	margin: 15px;
	width: 80px;
	font-family: "Roboto Condensed","Helvetica Neue","Helvetica","Arial",sans-serif;
	cursor: pointer;
	/*
	margin: 10px 10px 0px;
	display: block;
	float: right;
	*/
	display: inline-block;
	/*margin: 5px 0 5px 5px;*/
	margin: 8px 0 0px 8px;
}

.floating-header-links {
	/*
	height: 36px;
	vertical-align: middle;
	line-height: 26px;
	margin-top: 10px;
	padding-left: 5px;
	margin-right: 10px;
	float: right;
	*/
	/* For new Main Menu panel */
	display: inline-block;
	/*padding-left: 3px;*/
	padding-left: 25px;
	margin-right: 0px;
}

.floating-header-links a {
	/*border-left: 1px solid rgba(160, 160, 160, 0.3);*/
	border-left: 1px solid #f1592a;
	/*padding-left: 0.5em;*/ /* previously 1em; */
	padding-left: 6px; 
	padding-right: 6px; 
	font-family: "Roboto Condensed","Helvetica Neue","Helvetica","Arial",sans-serif;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: #2f2f2f;
	font-size: 11px;
	font-weight: 700;
}
.floating-header-links a:hover {
	color: #f1592a;
	transition: all 0.5s ease-in-out 0s;
	text-decoration: underline;
}

.floating-header-icons img {
	height: 30px;
	margin-right: 30px;
}

.layer-header td {
	padding-bottom: 0px !important;
	padding-top: 0px !important;
}
.story-header td {
	padding-bottom: 1px !important;
	padding-top: 0px !important;
}

.filtering-options-frame {
	border: 1px solid #cccccc !important;
	border-radius: 4px;
	margin: 0 5px;
	padding: 3px 0 3px 4px !important;
}

.filtering-options-header {
	border-bottom: 3px double #ccc;
	border-radius: 4px;
	float: right;
	padding: 2px 10px !important;
	border-top: 3px double #ccc;
	margin-top: 3px;
	font-size: 0.9em;
	margin-right: 2px;
}
.group-list {
	font-size: 0.9em;
	padding: 3px 0!important;
	display: inline-block;
}
.group-list-item {
	display: inline-block;
	border-left: 1px solid #99bbe8;
	padding: 0 2px!important;
}

#coverGroupList {
	height: 95px;
	border-right: 2px solid #f1592a;
	padding: 15px 10px 0px 5px;
	margin-top: 10px;
	flex-basis: 160px;
}

#divCoverSpeciesView {
	padding: 0 10px;
	margin-top: 0px;
	flex-basis: 440px !important;
	flex-grow: 1;
	overflow: auto;
	height: 100%;
	padding-top: 0;
}

.cover-summary-per-species {
	text-align:left!important; 
	padding-left:0px!important; 
}
.cover-summary-per-species span {
	cursor: pointer;
}
.cover-group-border {
	border-top: 1px dashed #c3d6f0;
}

@media screen and (max-width: 600px){
	.group-list-item {
		padding: 0 0px!important;
	}
	.group-list-item div:nth-child(2) {
		padding: 0 1px;
		font-size: 0.7rem;
	}
	#coverGroupList {
		font-size: 0.8rem;
		height: 1.5rem;
		border-right: 0px solid #f1592a;
		border-bottom: 2px solid #f1592a;
		padding: 0px;
		margin: 7px 0px 0px;
		flex-basis: 100%;
	}
	
	#divCoverSpeciesView {
		height: 90%;
	}
}


#coverGroupList .group-list-item {
	border-left: 1px solid #ffffff!important;
}

.group-list-item-left {
	border-left: none!important;
}

.kde-shape-list {
	/*max-height: 120px!important;*/
	max-height: 120px;
	min-height: 50px!important;
	overflow: auto; 
	width: auto;
	padding: 0px!important;
	font-size: 0.9em;
	border: 1px solid #cccccc;
	border-radius: 4px;
}
.kde-shape-list div {
	margin-top: 2px;
	padding-left: 0;
}

.map-view-label {
	flex: 1 1 auto;
	text-align: center;
	margin-top: 2px !important;
	margin-bottom: 15px;
}

.list-node td {
	font-size: 1.1em !important;
}

.kde-shape-list .header {
	font-size: 1.1em;
	font-weight: bold;
	margin: 5PX 5px 2px 5px;
	border-bottom: 1px solid rgb(153, 188, 232);
}

.kde-shape-list th, .kde-shape-list td {
	padding: 0px!important;
}

.map-info-panel div.scientific-name, span.scientific-name {
	margin-left: 0;
	/*border: 1px solid #ffffff;*/
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 1px;
	font-style: italic;
}

div.story-title {
	color: #0572A0;
}
div.story-subtitle {
	color: #0572A0;
	padding-left: 15px;
}


.thumb-wrap-nonselectable .share-options {
	display: none !important;
}


.taxon-groups {
	display:none;
	margin-left:15px;
}

.taxon-group-title {
	cursor: pointer;
}
.taxon-group-selected {
	color: #3c93c5!important;
	text-decoration: underline;
}

.thumb-wrap {
	float:left;
	margin: 3px 3px 3px 10px;
	border: 1px solid #99bbe8;
	border-radius: 6px;
	color: #3c3b3b;
	cursor: pointer;
}

.thumb-wrap-medium {
	width: 94%;
}

.model-viewer select, .map-info-panel select {
	border: 1px solid #b5b8c8;
}
.map-info-panel input, .map-info-panel textarea {
	border: 1px solid #b5b8c8;
	border-radius: 2px;
	padding: 2px;
	font-size: 1em;
	margin-top: unset;
}

/* D3 object */
/* Pie charts */
path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

path.link.twofive {
  opacity: 0.25;
  stroke-width: 1.5px;
}

path.link.fivezero {
  opacity: 0.50;
  stroke-width: 2.5px;
}

path.link.sevenfive {
  opacity: 0.75;
  stroke-width: 3.5px;
}

path.link.onezerozero {
  opacity: 1.0;
  stroke-width: 4.5px;
}

circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}
.circle-legend {
	stroke: #444;
	stroke-width: 1.0px;
}
.circle-legend-segment {
	stroke: #333;
}
.circle-legend-label {
	font-size: 0.95em;
	color: #444;
}
circle.active {
	fill: #666;
}

text {
  fill: #333333;
  /*font-size: 14px;*/
  font-size: 11px;
	font-family: "Roboto Condensed","Helvetica Neue","Helvetica","Arial",sans-serif;
  pointer-events: none;
}
text.small {
	/*
	fill: #333333;
	font-family: "Roboto Condensed","Helvetica Neue","Helvetica","Arial",sans-serif;
	pointer-events: none;
	*/
	font-size: 11px;
}
text.smallest {
	font-size: 9px;
}
text.active {
	/*stroke: #8cacbb;*/
	stroke: #ff5050;
}

.activity-rect {
	fill: #fff;
}

.info-title {
	/*background-color: #bdcbf5;*/
	background-color: #e5e5e5;
	border-radius: 4px;
	padding: 3px 5px;
	font-weight: bold;
	margin: 10px 0 5px;
	height:22px !important;
	padding-left: 5px !important;
	padding-top: 2px !important;
}

div.thumb-wrap-nonselectable {
	color: #999999;
	border: 1px solid #99bbe8 !important; /* Do not highlight the node in the Model Viewer */
}

td.protected-status, div.protected-status {
	color:#dc2222; 
	text-align:left; 
	padding-left:20px; 
	padding-top:0;
}
td.protected-status-nonselectable, div.protected-status-nonselectable {
	color:#fa9191 !important; 
}
div.protected-status {
	font-size: 0.85em;
	display: inline-block;
	padding-right: 10px;
	max-width: 14rem;
}

/* For shifted map */
.place-circle, .query-circle {
	fill: none;
	stroke: #666;
	stroke-width: 4px;
}

.place-map-background, .query-map-background {
	fill: white;
}
.place-deco, .place-map, .query-deco, .query-map {
	transform-origin: center center 0;
}
.place.active, .query.active {
	display: block;
}

/* Pie */
/*
.arc path {
  stroke: #fff;
}
*/
/* Chord v2 (http://jsfiddle.net/L2d078v6/1/) */
#circle circle {
  fill: none;
  pointer-events: all;
}

.faculty-group path,
.area-group path {
  stroke: #000;
  fill-opacity: 0.7;
}
.area-group path {
  fill-opacity: 0.5;
}
path.chord {
  stroke-width: .75;
  fill-opacity: .75;
}

path.chord {
  stroke: #000;
  stroke-width: .25px;
}

/* Tabs in MapInfo Panel */
div.icon {
	cursor: pointer;
}
.map-info-panel div.icon {
	font-size: 0.85em;
	float:right;
	border-top:1px solid rgb(153, 188, 232);
	border-left:1px solid rgb(153, 188, 232);
	border-right:1px solid rgb(153, 188, 232);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	margin-top: 3px;
	/*margin-right: 2px;
	padding: 1px 8px;*/
	margin-right: 2px;
	padding: 1px 4px;
	font-weight:normal;
}

.map-info-panel div.tab-selected {
	background-color: rgb(218, 229, 243);
}

/* */
.vertical-menu-button {
	position: absolute;
	font-size: small;
	width: 155px;
	height: 24px;
	background-color: white;
	border-radius: 10px 10px 0 0;
	padding: 5px 10px;
	text-align: center;
	border-top: 1px solid rgb(153, 188, 232);
	border-left: 1px solid rgb(153, 188, 232);
	border-right: 1px solid rgb(153, 188, 232);
	z-index: 30000;
	transform: rotate(270deg);
	transform-origin: left top 0;
}

img.vertical-menu-close {
	width: 21px;
	height: 21px;
	transform: rotate(90deg);
	margin-top: -4px;
	margin-left: -1px;
}

tr.kde-popup-row {
	cursor: pointer;
}
tr.kde-popup-row-selected {
	background-color: #d6e8ec;
}

tr.kde-popup-row:hover {
	background-color: #b1d4db;
}

.activity-summary {
	padding: 0 0 0 3px;
}

.activity-summary .last-updated {
	display: inline-block;
	float: right;
	font-style: italic;
	font-size: 0.85em; 
	width: auto; 
	overflow: hidden; 
	height: 1em; 
	max-width: 40%;
}

.prod-summary {
	padding: 0 0 0 5px;
}

.toggle-chart-data {
	position: relative;
	right: 5px;
	margin-top: -22px;
	flex: 1 0 auto;
	justify-content: flex-end;
	display: flex;
}


div.activity-summary-frame {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	border-bottom: 1px solid #CACACA;
	margin: 3px 0;
	padding: 0;
	min-height: 156px;
}
div.activity-summary-frame-odd {
	background-color: #F7F7F7;
}
table.prod-summary {
	width: auto;
	font-size:0.9em;
	margin: 5px 0;
	border-collapse: collapse;
}
table.prod-summary tr:nth-child(1) {
	background-color: #ddd!important;
}
table.prod-summary tr:nth-child(2n+1) {
	background-color: #ececec;
}
table.prod-summary th, table.prod-summary td {
	padding: 2px 3px;
}
table.prod-summary-popup {
	width: 95%;
	margin-bottom: 20px;
}

table.prod-summary-popup th {
	padding: 0 2px;
	background-color: transparent;
	border: none;
	color: rgb(60, 59, 59);
	font-weight: bold;
}

div.icon-toggle-chart-data {
	border-left: 1px solid #f1592a;
	padding: 0px 5px;
	cursor: pointer;
	font-size: 0.9em;
	height: 1.3em;
	margin-top: auto;
	margin-bottom: 8px;
}

g.arc {
	cursor: pointer;
}

table.prod-summary-popup td {
	padding: 0 3px!important;
}
/*
table.prod-summary td {
	padding: 0 2px;
	border-right: none;
	border-left: none;
}
*/
table.prod-summary td.summary-label {
	font-weight:bold;
	text-transform: capitalize;
}
table.prod-summary td.activity {
	width: 9em;
	text-transform: capitalize;
}
table.prod-summary td.activity-popup {
	width: 6em;
	padding-left:5px!important;
}

table.prod-summary td.num-animals {
	width: 2.5em;
	text-align:right;
}
table.prod-summary td.date {
	width: 6em;
	text-align:center;
}

ul.references {
	padding-left: 30px;
}

.references a {
	font-family: "Roboto Condensed","Helvetica Neue","Helvetica","Arial",sans-serif;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: #2f2f2f;
	font-size: 11px;
	font-weight: 700;
}
.references a:hover {
	color: #f1592a;
	transition: all 0.5s ease-in-out 0s;
	text-decoration: underline;
}

.citation {
	padding-left: 1em;
	text-indent: -1.8em;
	list-style-position: inside;
}
.citation a {
	color: #00c;
}
/* Override EXTJS */
.x-toolbar-default {
	background-color: #f5f5f5;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e7e7e7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.x-body {
	font-size: 14px;
	color: #666666;
	font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/*
.x-form-trigger {
	height:22px !important;
}
*/

div.contentPane table {
	font-size: 0.9em;	/* Checked with my HP desktop */
}

/* activity monthly histogram */
.activity-monthly-chart .axis text {
	font-size: 11px; 
}

path.domain {
	stroke: none;
}
.histogram-axis line {
	stroke: #ccc;
}

.lat-travel path {
	stroke: #ccc !important;
}
div.pie-chart-frame {
	padding: 0;
}

.chart-title {
	position: absolute;
	margin-top: 3px;
	font-weight: bold;
	margin-left: 5px;
	font-size: 0.9em;
	/*text-transform: capitalize;*/
}


/* Override ESRI legend */
.esriPopup .contentPane {
	background-color: white;
}

table.esriLegendLayer td, table.esriLegendLayerLabel td {
	padding-bottom: 0px;
}

div.background-legend .esriLegendLayerLabel {
	display:none;
}
/* Legend at the bottom of the MapInfo Panel */
div.esriLegendService table td {
	padding-bottom:0;
}

.esriLegendServiceLabel {
	/*display:none;*/
	font-size: 0.95em;
	
}
.esriLegendLayerLabel {
	font-size: 0.95em;
}
.esriLegendLayer {
	margin-left:3px;
	font-size:0.9em;
}
.esriLegendLayer tr {
	float: left;
}

.esriLegendLayerLabel {
	padding-top:0;
}
table.esriLegendLayer td:first-child {
	width:20px;
}
table.esriLegendLayer td > table td {
	width:auto!important;
}

#map-info-symbology0-GLOBAL table, #map-info-symbology1-GLOBAL table {
	border-collapse: collapse;
}

#mapInfoSouth0-splitter, #mapInfoSouth1-splitter {
	border-bottom:3px double rgb(204, 204, 204)!important; 
}


/* Shift the ESRI logo and attribution line toward left,
   so the vertical button can sit at the bottom.
*/
.logo-med {
	margin-right: 30px;
}


/* Cover page div */
/*@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }*/
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }

#cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 31000;
	background-color: white;
	display: flex;
	flex-direction: column;
	max-height:5000px;
	/*transition: all 2s ease 0s;*/
	transition: max-height 2s ease 0s, 
		width 2s ease 2s, 
		top 2s ease 2s, 
		left 2s ease 2s, 
		opacity 2s ease 6s,
		border 1s ease 2s,
		border-radius 1s ease 2s;
}

.cover-hidden {
	/*max-height: 0!important;*/
	/*max-height: 20px!important;*/
	overflow: hidden;
	border: 2px solid gold;
	border-radius: 4px;
	opacity: 0;
}

.cover-notransition {
	transition: none !important;
}

.introduction {
	text-align: center;
	position: absolute;
	opacity: 0;
	max-width: 1000px;
	max-height: 0;
	border-radius: 6px;
	overflow: hidden;
	z-index: 30000;
	transition: max-height 4s ease 1s, 
		opacity 4s ease 1s;
}

@keyframes highlight {
	0% { background-color: #ffffff; opacity: 1;}
	20%   { background-color: rgb(232,198,153); opacity: 1;} 
	40%   { background-color: rgb(232,198,153); opacity: 1;} 
	60% { background-color: #ffffff; opacity: 1;}
	80% { background-color: #ffffff; opacity: 1;}
	100% { opacity: 0; }
}

.introduction-show {
	opacity: 1;
	max-height: 1000px !important;
	animation: highlight 20s linear 4s 1 normal forwards;
}

.introduction div {
	border: 2px solid #99bbe8;
	border-radius: 6px;
	padding: 10px 20px;
}
#coverMain {
	width: 80%;
	margin: auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	align-content: flex-start;
}

#download_prospectus {
	width: 100%;
	height: 7em;
}

#download_affiliation, #download_email {
	width: 100%;
}

#download_full_name {
	width: 70%;
}

.resize-popup-icon {
	display:inline-block; 
	float:right;
}

@media screen and (max-width: 600px){
	#coverMain {
		width: 95%;	
	}
	.citation {
		padding-left: 0.2em;
		text-indent: -0.4em;
		font-size: 0.9em;
	}	
	
	.map-info-panel .region-title, .histogram-window .title {
		font-size: 0.90em;
	}	
	
	#download_prospectus {
		height: 5em;
	}
	
	.esriPopup .contentPane {
		padding: 6px 0px!important;
	}
}

#divOverviewMapSlideshow {
	/*position: relative;
	right: 10px;
	margin-left: auto;
	margin-top: 2rem;
	*/
	/*margin: 10px;*/
	margin: 10px 15px 0px;
	
	flex-basis: 30%;
	flex-grow: 1;
	/*max-width: 400px;*/
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
}

.div-overview-map-snapshot {
	/*display: block;*/
	position: absolute;
	transition: all 2s ease;
	overflow: hidden;
}

#summaryMapNotes {
	/*
	position: relative;
	padding: 0 25px;
	*/
	flex-basis: 100%;
	flex-grow: 0;
	flex-shrink: 0;
}

#coverMain div.choices {
	display:flex; 
	justify-content: center;
	flex: 0 0 auto;
}
#coverMain div.choices-inactive {
	justify-content: flex-end;
	min-height:1.5em!important;
}
.section-title {
	font-size: 1.5rem;
	margin-top: 20px;
	border-bottom: 2px dotted #b8c2cc;
	padding-bottom: 10px;
	padding-left: 3px;
	opacity: 0;
	
	flex-basis: 100%;
	flex: 0 1 auto;

	animation: fadeIn ease-in 1;
	animation-fill-mode:forwards;
	animation-duration:2s;
	animation-delay: 0.5s;
	transition: all 0.5s ease 0s;
	cursor: pointer;
}

.section-title-inactive {
	font-size:1.2rem;
	height: 2rem;
	margin-top: 8px;
}

#coverMain .section-content {
	opacity: 0;
	animation: fadeIn ease-in 1;
	animation-fill-mode:forwards;
	animation-duration:2s;
	animation-delay: 1.5s;
	transition: all 0.5s ease 0s;
	max-height:5000px;
	height: 55% !important;
	height: auto;

	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
}
#coverMain .section-content-inactive {
	min-height:0px!important;
	max-height:0px;
	overflow: hidden;
}

#coverMain .section-0.section-content {
	flex-basis: 100%;
	height: auto !important; /* There may be a bug in Chrome where a flexbox's height does not grow with flex: 1 1 auto; */
} 
#coverMain .species-list, #coverMain .eez-list {
	opacity: 0;
	display: flex;
	justify-content: left;
	min-height: 0;
	flex: 1 1 auto;
}
#coverMain .species-list div.icon {
	display:block;
	font-size: 1rem;
	padding: 1px 0;
}

.contri-summary-header {
	color:#3c93c5; 
	font-size:1.2em; 
	text-align:center;
}

.contri-summary-arrow {
	display: flex;
	padding: 10px;
	margin-top: 5px;
	flex-direction: column;
	justify-content: center;
}

@media screen and (max-width: 600px){
	.thumbnail td {
		padding-left: 3px;
		padding-right: 3px;
	}
	
	.section-title {
		font-size: 1.2rem;	
		max-height: 2.5rem;
	}
	.section-title-inactive {
		font-size:1.1rem;
		max-height: 2.0rem;
	}
	.section-2.section-title-inactive {
		max-height: 3.0rem;
	}
	.section-1.section-title, #coverMain .section-2.section-title {
		max-height: 3.5rem;
	}
	.section-content {
		height: auto!important;
	}
	
	.contri-summary-header {
		margin-top: 0!important;
	}
	
	.account-menu {
		font-size: 0.9em;
		margin: 10px 0 0;
	}
}

#coverMain div.round-frame {
	border: 1px solid #8bcfd4;
	border-radius: 4px;
	padding: 5px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#divCoverSpeciesView {
	padding: 0px;
	margin-top: 5px;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

#divCoverEEZView, #divCoverContributorView {
	padding: 0 10px 10px;
	margin-top: 10px;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;	
}

#divCoverEEZView .map-snapshot img { 
	width: auto;
	height: auto;
	max-width: 250px;
	max-height: 250px;
	margin-left: auto;
	margin-right: auto;
}

#coverOverview img.arrow, #coverOverview .cover-notes {
	transition: opacity 5s ease 1s;
}

.thumbnail img.overview-image {
	max-width: 100%;
	margin-left: 0px;
	width: auto;
	height: auto;
	max-height: 100%;
}


div.letters {
	height: auto;
	width: 1.2rem;
	background-color: #d0cdcd;
	display: block;
	padding: 3px;
	text-align: center;
	position: fixed;
	margin-right: 85px;
	right: 0;
	/*top: 240px;*/
	bottom: 0;
	font-size: 0.9em;
}
span.letter-inactive {
	display:block;
	color: #aaa;
}
span.letter {
	display:block;
	transition: all ease 0.2s;
}
span.letter:hover {
	font-size:1.2rem;
	cursor:pointer;
}
.main-choice {
	width: 400px;
	height: 170px;
	margin: 20px 20px 10px 20px;
	text-align: center;
	padding-top: 20px;
	border-radius: 100%;
	background-size: cover;
	
	/* transition: [property] [duration] [timing-function] [delay]; */
	transition: all 2s ease-in-out 1s;	
	/*transition: opacity 1s, height 2s;*/
}
.main-choice-inactive {
	background-image: none!important;
	height: 1em;
	/*transform: translate(100px, -100px);*/
	margin: 5px 10px;
	padding: 0;
	width: auto;
}

.cover-tip {
	margin: 10px;
	padding: 10px 20px;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-position: right;
	opacity: 0;
	transition: all 3s ease-out;
}

.cover-tip-species {
	color: #cfcfcf;
	background-color: #114155;
}
.cover-tip-country {
	color: #777373;
	background-color: #e5e1d3;
}

.thumbnail-species-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.thumbnail .contributor-logo {
	margin:0 5px 5px 0;
	flex: 0 0 120px;
}

.thumbnail .contributor-logo img {
	max-width:100px; 
	max-height:100px;
	margin: 2px 10px;
}

.contributor-name {
	font-size:1.5em;
}

.contributor-affl {
	margin-left:20px;
	margin-top:0px;	
}

div.contributing-datasets {
	flex: 0 0 11rem;
	text-align: right;
	padding-right: 15px;
}
span.contributing-datasets {
	padding-left: 15px;
}

#divCoverContributorView .detail-section > div {
	margin-left:20px; 
	margin-top:0px;
}

.profile-header {
	margin-left: 25px;
}

.profile-section-header {
	color:#3c93c5; 
	font-size:1.2em; 
	text-align:center;	
}


.profile-header th {
	text-align:left; 
	padding-left: 10px; 
	padding-right: 10px;
}

@media screen and (min-width: 600px){
	.cover-tip {
		min-height: 100px !important;	
	}
	.cover-tip-species {
		background-image: url("https://mico.env.duke.edu/mico-tools/images/species_background.jpg");
		background-size: 35%;
		background-position-y: -15px;
		padding-right:35%; 
	}
	
	.cover-tip-country {
		background-image: url("https://mico.eco/wp-content/themes/mico/images/bg-map.png");
		background-size: 27%;
		background-position-y: -9px;
		padding-right:30%; 
	}
	
	.cover-tip-contributor {
		background-image: url("/wp-content/uploads/2018/07/home-whale-2000x1508.jpg");
		background-size: 30%;
		background-position-y: -20px;
		padding-right:30%; 
	}
}
.protected-status-frame {
	flex-grow: 2;
	text-align: right;
}

.profile-contribution {
	display:flex; 
	flex-wrap: wrap;
	justify-content: center;
	margin-left: 20px;
}

.profile-contribution .box {
	border: 1px solid #8bcfd4;
	border-radius: 4px;
	flex: 1 1 auto;
	margin: 10px 5px;
	padding: 5px;
	max-width: 45%;
}

.box table {
	font-size:14px;
}

.profile-summary {
	border: 1px solid #8bcfd4;
	border-radius: 4px;
	padding: 5px 15px;
	margin: 15px 5px 20px 35px; 
	line-height:1.2em;
}

.profile-summary-header {
	margin-top:15px; 
	padding-left: 10px; 
	background-color: #d3e0eb;
}

.profile-summary-section {
	margin-top: 10px;
	width: 98%;
}
.profile-summary-section ul {
	padding-left:30px;
}

.profile-contribution td, .profile-summary td {
	text-align:left;
}
@media screen and (max-width: 600px){
	.box table {
		font-size:12px;
	}	
	.thumbnail-species-header {
		display: block;
		position: relative;
	}
	.protected-status-frame {
		text-align: left;
	}
	#coverMain div.round-frame {
		padding: 5px 2px;
		width: 99%;
	}

	div.letters {
		margin-right: 5px;
	}
	#divCoverEEZView, #divCoverContributorView {
		padding: 0 1px 10px;
		margin-top: 0px;
	}	

	#divCoverEEZView .map-snapshot img { 
		max-width: 100px;
		max-height: 100px;
	}

	.thumb-wrap {
		margin: 3px 0px;
	}
	
	.thumbnail .contributor-logo {
		flex: 0 0 80px;
	}
	
	.thumbnail .contributor-logo img {
		max-width: 80px; 
		max-height: 80px;
		margin: 0px;
	}
	
	.contributor-name {
		font-size:1.3em;
	}	
	.contributor-affl {
		margin-left:10px;
		max-width: 200px;
	}

	#divCoverContributorView .detail-section > div {
		margin-left:0px; 
	}
	
	span.contributing-datasets {
		padding-left: 10px;
	}	
	
	#coverMain .section-2.section-title-inactive {
		height: 3.0rem;
	}
	
	.profile-header {
		margin-left: 0px;
	}
	.profile-header td {
		padding-left: 0;
		padding-right: 0;
		text-align:left;
	}
	.profile-header th {
		text-align:left; 
		padding-left: 0px; 
		padding-right: 3px;
	}	
	.profile-contribution {
		margin-left: 0px;
	}	
	
	.profile-summary {
		padding: 5px;
		margin: 5px 0; 
	}	
	
	.profile-contribution .box {
		margin: 5px 0px;
		/*max-width: 95%;*/
	}
	.profile-summary-section ul {
		padding-left:20px;
	}
}

@media screen and (max-width: 1024px){
	.profile-contribution {
		margin-left: 0px;
	}
	.profile-contribution .box {
		max-width: 95%;
	}
	.profile-summary {
		margin: 15px 5px 20px 10px;
	}
	.contri-summary-arrow {
		padding: 0;
		margin-top: 0!important;
		flex-direction: column;
		justify-content: center;
		flex-basis: 100%;
	}	
	.contri-summary-arrow img {
		transform: rotate(90deg);
	}
	
	.share-options {
		position: absolute;
		top: 3px;
		right: 3px;
	}
	#divCoverEEZView .share-options {
		position: relative;
		padding-right: 0px;
	}
	#divCoverContributorView .share-options {
		top: 0px;
	}
	div.contributing-datasets {
		text-align: left;
		padding-right: 30px;
	}	
}


.cover-tip-contributor {
	margin: 10px;
	display: block;
	background-color: #0e272e;
	color: #cfcfcf;
}

.main-choice .title {
	font-size: 1.3rem;
	color: #f1592a;
	transition: font-size 2s ease-in-out 2s;
}
.main-choice .description {
	font-size: 0.9rem;
	padding: 10px 20px;
	/*transition: all 2s ease-in-out 1s;*/
	height:auto;
	width:auto;
	max-height:500px;
	max-width:500px;
	transition: opacity 2s ease-in-out 1s, max-width 1s ease-in-out 2s, max-height 1s ease-in-out 2s;
}
.main-choice .description-inactive {
	opacity: 0;
	max-height: 0;
	max-width: 0;
}
.main-choice .title-inactive {
	font-size:1.0rem;
}

.icon.link-to-mapper {
	color: #f1592a;
	text-align: center;
	font-size: 0.5em;
	opacity: 0;
	margin-top:10px;
	transition: all ease 3s;
	padding-right: 80px!important;
	padding-bottom: 10px!important;
}


.map-spinner {
	position: absolute;
	z-index: 30;
	top: 50%;
	left: 50%;
	margin-top: -32px;	/* DIV of the spinner is 64px x 64px */
	margin-left: -32px;
	display: block;
}	

/* Animation copied from https://loading.io/css/
It is CC0 and free to use.
*/
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  /* background: #cef; original color */
  background: #18a4e4;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

tr.row-territory {
	border-top: 1px solid #cccccc;
}

.eez-map {
	margin: 3px 4px;
}

.eez-map-label {
	text-align: left;
	font-weight: bold;
	margin: 3px 3px 10px 3px !important;
}

.cover-thanks-to-contributors {
	width:290px; 
	margin:10px 0px 2px; 
	padding:10px 10px; 
	border:1px solid #99bbe8; 
	border-radius:6px;
	opacity: 0;
	transition: opacity 5s ease 1s;
}

.provider-info a {
	text-decoration: none;
	color: #3c93c5;
	font-weight: bold;
}

.provider-info a:hover {
	color: #f1592a;
	transition: all 0.5s ease-in-out 0s;
	text-decoration: underline;
}

.map-view, .species-eez-table {
	margin-top:10px;
	margin-right:5px;
	flex-basis: 30%;
	flex-grow: 1;
}

.cover-kdes-frame {
	display:flex; 
	flex-wrap: wrap; 
	justify-content: center; 
	border: 1px solid #8bcfd4;
	border-radius: 4px;
	padding: 5px;
	margin-top: 10px;
}

.cover-kdes-frame .label {
	width:100%; 
	font-size:1.2em; 
	color:#3c93c5; 
	text-align:center;
}

.cover-kdes-frame .contributor-map-label {
	/*text-decoration:underline;*/ 
	margin-bottom:10px;
	font-size:0.9em;
}

.detail-section {
	cursor:default;
}
.detail-section div {
	margin-left: 0px; 
	margin-top: 10px;
}

.cover-num-orange-l {
	color: #d04519;
	font-size:1.5em;
	text-align: right !important;
}
.cover-num-orange-s {
	color: #d04519;
	font-size:1.2em;
	text-align: right !important;
}

.cover-num-blue-l {
	color: #3c93c5;
	font-size:1.5em;
	text-align: right !important;
}

.cover-num-blue-s {
	color:#3c93c5; 
	font-size:1.2em;
	text-align: right !important;
}
.cover-notes {
	font-size: 0.85em;
	font-style: italic;
	color:#666;
}

.thumbnail-title {
	font-size: 1.5rem;
}

.eez-maps {
	margin-left:40px; 
	margin-top:10px; 
	display:flex; 
	flex-direction:row;
	flex-wrap: wrap; 
	width:100%;
}

.profile-dataset-summary td {
	min-width:3.2em; 
	text-align:right; 
	padding: 0.20em 0.20em !important;
}

@media screen and (max-width: 600px){
	.cover-num-orange-l {
		font-size:1.3em;
	}
	.cover-num-blue-l {
		font-size:1.3em;
	}
	.thumbnail-title {
		font-size: 1.3rem;
	}	
	.detail-section div {
		margin-left:0px; 
	}	
	.profile-dataset-summary td {
		min-width: 2.5em; 
		padding: 0.10em 0.2em !important;
		font-size: 0.85em;
	}
	.profile-dataset-summary th {
		min-width: 2.5em; 
		padding: 0.10em 0.2em !important;
		font-size: 0.85em;
	}
}

.table-inside-popup {
	border-collapse:collapse; 
	border-bottom:1px solid #8CACBB;
}

.table-inside-popup th {
	background-color: #DAE8F0 !important;
	color: #444444 !important;
}

#divExportForm input, #divExportForm textarea {
	padding: 3px 4px;
}

#divExportForm div.button:hover, #divOverviewFrame div.button:hover {
	background-color: #dae5f3;
}

#divHoverTipWindow {
	position: absolute;
	background-color: #f8f8f8;
	z-index: 30000;
	padding: 10px;
	border: 1px solid #8cacbb;
	border-radius: 4px;
	font-size: small;
	width: 260px;
}

div.overview-main-content {
	padding: 10px 10px 5px 10px;
}

.termsofuse-content {
	padding:15px 25px!important;
}

.termsofuse-content ol {
	padding-left: 30px!important;
}
.termsofuse-content li {
	padding: 4px 1px !important;
}
.termsofuse-content p {
	margin-top: 4px;
	margin-bottom: 5px;
}
.termsofuse-content p:nth-last-child(1) {
	text-indent: -1em;
	padding-left: 1em;
	padding-top: 0.5em;
}
.termsofuse-content p:nth-last-child(2) {
	text-indent: -1em;
	padding-left: 1em;
	padding-top: 0.5em;
}

@media screen and (max-width: 600px){
	#divOverviewFrame, #divExportForm {
		font-size: 0.9em;
	}
	.termsofuse-content {
		padding:10px;
	}
	
	.export-form-termsofuse ol {
		padding-inline-start: 25px;
	}
}

.icon_mapper {
	width: 27px;
	border-radius: 100%;
	height: 18px;
	border: 1px solid #bbbbdd;
}

#exportWindow input {
	font-size:1em;
}

.img-overview-map-snapshot {
	border-radius:15px; 
	border:1px solid #cccccc; 
	/*margin-top:10px; */
	margin-right:10px;
	visibility: hidden;
}
.overview-map-snapshot-slide-label {
	cursor: pointer;
}
.slide-label-inactive:hover {
	color: #f1592a;
	transition: all 0.5s ease-in-out 0s;
	text-decoration: underline;
}	

.tr-antarctica {
	border-top: 3px double #aaa;
}

.table-corridors span {
	padding: 0 3px;
}

.button-download {
	height: 26px !important;
	border: 2px solid rgb(153, 188, 232);
	border-radius: 4px;
	width: 200px;
	text-align: center;
	line-height: 23px;
	/*margin: 2px auto;*/
	margin: 8px auto;
	background-color: #F5F5F5;
	font-size:1.1em;
	cursor:pointer;
}
.button-download-disabled {
	opacity: 0.5;
	cursor: default !important;
	pointer-events: none;
}

/* TEST for Network */
#networkPoints_0_layer circle {
	/*stroke: unset !important;
	stroke-width: unset !important;
	fill: #f00;
	*/
}

.network-legend-node {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin: 1px !important;
}

/*
 * Path animation
 * https://css-tricks.com/svg-line-animation-works/
 */
.wifi {
	animation: dash 5s linear infinite;
	stroke-dasharray: 10;
	stroke-dashoffset: 10;
}

.wifi-no-animation {
	animation: none !important;
}
.wifi-highlight {
	/*
	animation: dash 5s linear infinite, blinkingStroke 1s infinite;
	stroke-dasharray: 10;
	stroke-dashoffset: 10;
	*/
	stroke: #66c6ff!important;		
}
.circle-highlight {
	/*animation: blinkingStroke 1s infinite;*/
}
.circle-highlight path {
	stroke: #66c6ff!important;	
}
@keyframes blinkingStroke {
    0% {stroke: #ccc;}
    40% {stroke: yellow;}
    60% {stroke: yellow;}
    100% {stroke: #ccc;}
}

@keyframes dash {
  100% {
    stroke-dashoffset: 0;
  }
  0% {
    stroke-dashoffset: 100;
  }  
}

.links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: absolute;
	top: 5px;
	width: 100%;
	z-index: 20;	/* The zoom slider of the map has z-index: 30. Links must be below that. Otherwise, you couldn't click zoom up/down */
	text-align: center;
	/*margin-left: -8.35em;*/
	color: #444;
	font-size: 0.9em;
	pointer-events: none;
	margin-left: 0em;
	transition: all 2s ease;
}

.link-species-name {
	pointer-events: none!important;
	margin-left: 1px!important;
	max-width: 85%!important;
	height: auto!important;
	min-width: 30%;
}

.link-species-name div {
	border-radius: 4px;
	padding: 0px 10px;
	height: 12px!important;
	margin-top: 2px!important;
}

.link-species-name-inner {
	display: flex;
	flex-wrap: wrap;
	height: auto!important;
	justify-content: space-around
}

.links div.legend {
	display: block;
	height: 20px;
	text-align: left;
	min-width: 300px;
}

#bgLayer0-bathy-legend, #bgLayer1-bathy-legend {
	font-size: 0.95em;
}
.link-legend {
	flex: 1 1 100%;
	pointer-events: none !important;
	font-size: 0.95em;
	margin-top: 0px !important;
	transition: opacity 2s ease;
	max-width: 80%;
}

.link-legend .link-group {
	position:relative; 
	height: auto;
	padding-left: 10px;
	padding-right: 10px;
}

.legend-td-onoff {
	width: 4.2em;
}
.legend-td-info {
	width: 22px;
}

.legend-th-title {
	text-align:left; 
	width: 8em;
}
.link-legend table {
	border-collapse: collapse;
}
.legend tr {
	height: 16px;
}
.legend img {
	width: 16px;
	height: 14px;
	display: inline;
}
.legend td, .legend th {
	padding: 0 3px;
}

.legend table div {
	margin: 0;
}

.layouts {
	transition: all 1s ease;
	overflow: hidden;
}

.link-group {
	border: 1px solid rgb(153, 188, 232);
	background: rgba(250,250,250,0.7);
	border-radius: 4px;
	height: 26px;
}
.links div {
	display: inline-block;
	margin: 3px 0px;
	pointer-events: all;
}

. layout-link {
	transition: all 2s ease 1s;
}

/* Loading Text Animation by brunjo at https://codepen.io/brunjo/pen/ByjRPy */
.link-network-loading:before {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    max-width: 7em;
    white-space: nowrap;
    color: #ccc;
    animation: loading 3s linear infinite;	
}
.link-network-loading {
	font-weight: bold;
}
.link-network-selected {
	font-weight: 600;
	text-decoration: underline;
}
@keyframes loading {
    0% {
        max-width: 0;
    }
}

.network-diagram-links {
	display:flex;
	bottom: 50px; 
	right: 40px;
	position: absolute;
	cursor: pointer;
	transition: all 2s ease;
	color: #444;
	font-size: 0.95em;
}

.network-diagram-links div {
	padding: 1px 6px;
}
.network-diagram-reset {
	visibility: hidden;
}

.metasite-title {
	font-weight: bold;
	text-align: center;
	background-color: #dce5f7;
	padding: 2px 0px;
	margin-bottom: 4px;
	text-transform: uppercase;
}

table.network-diagram-popup-node {
	/*margin-left: 10px;*/
	margin-bottom: 5px; 
	font-size: 0.95em;
	border-collapse: collapse;
	width: 99%;
}

.active-legend td {
	padding: 2px;
}
.active-legend tr.odd {
	background-color: #e4e4e4;
}
table.network-diagram-popup-node div.symbol, .network-diagram-frame div.symbol, .active-legend div.symbol {
	width: 18px; 
	border-radius: 50%; 
	height: 18px; 
	/*border-color: #aaa;*/ 
	border-width: 2px;
}


table.network-diagram-popup-node th {
	text-align: left;
}

.node-highlighted {
	stroke-width: 2px;
}


table.network-diagram-popup-node td.references {
	width:200px;
	font-size: 0.95em;
	padding-left: 10px;
}
/*
table.network-diagram-popup-node td.references div {
	max-height: 150px;
	overflow: hidden;
}
*/
select.story {
	color: rgb(60, 59, 59);
}

.filtering-outputs .header {
	font-weight: bold;
	margin: 5px 0 3px 0;
}

.network-diagram-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background: rgba(250, 250, 250, 0.7);
	transition: width 2s ease, height 2s ease;
}

.network-diagram {
	height: auto!important;
	max-height: 160px;
	padding: 3px 3px 3px 0px!important;
}

.network-diagram-enlarge-button {
	position: absolute;
	padding-top: 0px;
	background-repeat: no-repeat;
	background-position-x: right;
	display: inline-block;
	margin-right: 0;
	margin-top: 3px;
	margin-left: 3px;	
	right: 16px;
	height: 20px!important;
	width: 20px;
	cursor: pointer;
	background-image:url(../icons/icon_fullscreen_v2.png); 
	background-size: 16px;
}

.network-diagram-enlarge-button-enlarged {
	position: fixed!important;
	top: 5px;
	right: 5px;
	z-index: 20000;
	background-image:url(../icons/icon_fullscreen_exit_v2.png)!important; 
}

.network-diagram-enlarged {
	position: fixed;
	top: 0;
	left: 0;
	witdh: 100%;
	height: 100%;
	max-height: 3000px!important;
	height: 100% !important;
	z-index: 10000;
	/*background: rgba(20, 20, 20, 0.8);*/
	background: rgba(220, 220, 220, 0.8);
}

.network-diagram-tooltip {
	position: relative;
	width: 300px;
	margin-top: 5px;
	margin-left: 5px;
	font-size: 0.90em;
	padding: 8px 5px 8px 10px;
}


/* Overwrite Wordpress main.css */
.nav-toggle {
	/*margin-left: 0px!important;*/
}
.nav-toggle i, .nav-toggle i::after, .nav-toggle i::before {
	width: 1.2rem!important;
}
.nav-toggle i, .nav-toggle i::after, .nav-toggle i::before {
	width: 1.2rem!important;
}
.nav-toggle i::before {
	top: -.3rem!important;
}
.nav-toggle i::after {
	top: .3rem!important;
}
button:focus {
	outline: 0px dotted!important;
}


#standalone-logo {
	position: absolute;
	right: 10px;
	width: 100px;
	height: 30px;
	background-size: 92px;
	z-index: 30;
	opacity: 1;
	pointer-events: all;
	transition: all 2s ease 2s;
}
@media screen and (max-width: 600px){
	.esriSimpleSliderTL {	/* Shift the ESRI Zoom icons to the left. */
		top: 5px;
		left: 5px;
	}
	
	#standalone-logo {
		width: 70px;
		background-size: 50px;
	}
	
	.link-group {
		max-width: 292px;
	}
	
	.link-legend {
		font-size: 0.9em;
	}
	
	.link-legend .link-group {
		padding-left: 2px;
		padding-right: 2px;
		font-size: 0.9em;
	}

	.links div.legend {
		min-width:250px;
	}

}

#standalone-logo.hide {
	opacity: 0!important;
	pointer-events: none;
}

.icon-tray {
	position:absolute; 
	width:133px; 
	right: 5px; 
	left: auto; 
	top: 44px;
	z-index: 29500;	/* MainMenu z-index = 29000 / MapInfoPanel => z-index = 19000 */
	color: #444444;
	pointer-events: none;
	transition: all 2s ease;
}

.icon-tray div {
	height: 30px;
}

.icon-tray-icon {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: 24px;
	width: 34px;
	margin: 0;
	background-position: 4px 4px;
	border: 1px solid rgb(153, 188, 232);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 1);
	height: 34px !important;
	float: right;
	margin-top: -2px;
	cursor: pointer;
	pointer-events: all;
}

.icon-tray-menu {
	border-radius: 4px;
	margin-bottom: 6px;
}

.icon-tray-label {
	display: inline-block;
	width: 100px;
	overflow: hidden;
	vertical-align: bottom;
	margin: 0;
	text-align: center;
	line-height: 26px;
	cursor: pointer;
	transition: all 2s ease;
	border: 1px solid rgb(153, 188, 232);
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.8);
	float: right;
	margin-left: -12px;
	pointer-events: all;
}

.icon-tray-icon-toolbar {
	/*background-image: url(/mico-tools/icons/icon_menu_three_dots_gray.png); 
	background-size:24px; 
	background-position:5px 5px; 
	transform: rotate(90deg);
	*/
	background-image: url(/mico-tools/icons/icon_toolbar_gray.png); 
	background-size:20px; 
	background-position:6px 6px; 
}

.icon-tray-icon-species {
	/*
	background-image: url(/mico-tools/icons/eubalaenajaponica.jpg); 
	background-size:40px; 
	background-position:0px 5px;
	background-color:#D1E2F2;
	*/
}

.icon-tray-icon-mammals {
	/*
	background-image: url(/mico-tools/images/icon_whale.png);
	background-size: 75px;
	background-position: -44px -1px;
	transform: rotate(15deg);
	*/	
	background-image: url(/mico-tools/images/icon_whale.png);
	background-size: 165px;
	background-position: 1px -21px;
	transform: rotate(35deg);
}
.icon-tray-icon-whale {
	background-image: url(/mico-tools/images/icon_whale.png);
	background-size: 32px;
	background-position: 0px 8px;
	transform: rotate(-15deg);
}

.icon-tray-icon-seaturtles {
	background-image: url(/mico-tools/images/icon_seaturtle.png);
	background-size: 26px;
	background-position: 4px 6px;
	transform: rotate(-15deg);
}
.icon-tray-icon-seabirds {
	background-image: url(/mico-tools/images/icon_seabird.png);
	/*
	background-size: 21px;
	background-position: 8px 0px;
	*/
	background-size: 52px;
	background-position: -1px -27px;
	transform: rotate(15deg);
}

.icon-tray-icon-fish {
	background-image: url(/mico-tools/images/icon_fish.png);
	/*
	background-size: 33px;
	background-position: 1px 8px;
	*/
	background-size: 48px;
	background-position: 1px 4px;
	transform: rotate(15deg);
}
.icon-tray-icon-filtering {
	/*background-image: url(/mico-tools/icons/icon_options_gear.png);*/ 
	background-image: url(/mico-tools/icons/icon_checkboxes_gray.png); 
	background-size:22px; 
	background-position: 5px 5px;
}

.icon-tray-icon-results {
	background-image: url(/mico-tools/icons/icon_histogram_v2_1_thick.png); 
	background-size: 20px;
	background-position: 6px 6px;
}

.icon-tray-icon-contributors {
	background-image: url(/mico-tools/icons/icon_information.png);
}

.icon-tray-icon-symbol {
	background-image: url(/mico-tools/icons/icon_thumbnail.png); 
	background-size:18px; 
	background-position: 7px 7px;
}
.icon-tray-icon-options {
	background-image: url(/mico-tools/icons/icon_options_gear_gray.png); 
	background-size:25px; 
	background-position: 4px 4px;
}

.icon-tray-icon-export {
	background-image: url(/mico-tools/icons/icon_download_blue_filled.png); 
	background-size:24px; 
	background-position: 4px 4px;
}

.legend-edge-one-way {
	width: 12px;
	display: inline-block;
	border-top: 2px dashed rgb(230, 0, 0);
}
.legend-edge-two-way {
	border-top: 2px dashed rgb(0, 0, 230);
	width: 12px;
	display: inline-block;
	border-bottom: 2px dashed rgb(230, 0, 0);
	height: 8px;
	margin-bottom: 3px;
	margin-top: 4px;
}

.network-corridor-one-way-frame, .network-corridor-return-frame {
	display:none!important;
	padding-right: 8px;
}

.network-corridor-one-way, .network-corridor-return {
	display: inline-block;
	width: 20px;
	border-top-width: 2px;
	border-top-style: dashed;
	vertical-align: bottom;
}
.network-corridor-one-way {
	border-top-color: rgb(230, 0, 0);
}
.network-corridor-return {
	border-top-color: blue;
}

.network-corridor-symbol-solid {
	border-top-style: solid!important;
}
.network-corridor-symbol-show {
	display: inline-block!important;
}
.path-hidden {
	visibility: hidden;
}

#activeLegend0Corridors td {
	padding: 0px 2px;
	line-height: 0.9em;
}

#ColorPicker {
	position: absolute;
	z-index: 20000;
	padding: 2px;
	width: 150px !important;
	height: 98px;
	border: 1px solid #ccc;
	border-radius: 4px;	
}

.link-legend-other-layers {
	width: 100%;
	text-align: left;
	font-weight: bold;
	margin-left: 5px;
	padding-bottom: 2px;
	text-decoration: underline;
	cursor: pointer;
}

.stroke-highlighted {
	stroke: yellow!important;
}

.lat-travel-bar {
	cursor: pointer;
}