/* Landing page */
.tissue_group_0 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	text-align: left;
}
.tissue_group_1 {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 200px;
	text-align: right;
}
.tissue_group {
	display: inline-block;
	margin: 10px;
	background-repeat: no-repeat;
	background-size: 40px;
	min-height: 40px;
	position: relative;
	padding-bottom: 10px;
}
.tissue_group_0 .tissue_group {
	background-position: 135px 50%;
	padding-right: 60px;
}
.tissue_group_1 .tissue_group {
	background-position: 5px 50%;
	padding-left: 60px;
}
.tissue_group_0 .group_color_bar, .tissue_group_1 .group_color_bar {
	position: absolute;
	top: 0px;
	height: 100%;
	border-style: solid;
	left: 125px;
	border-width: 0px 3px 0px 0px;
}
.tissue_group_1 .group_color_bar {
	left: auto;
	right: 123px;
	border-width: 0px 0px 0px 3px;
}
.tissue_link {
	width: 120px;
	position: relative;
}
.tissue_group_0 .tissue_link {
	height: 22px;
}
.tissue_group_1 .tissue_link {
	height: 25px;
}
.tissue_link a {
    display: block;
}
.tissue_link div.tissue_elevated_bar {
    display: block;
    position: absolute;
    width: 120px;
    white-space: nowrap;
    line-height: 0px;
}
.tissue_link div.tissue_elevated_bar a {
    display: inline-block;
}
.tissue_link div.tissue_elevated_bar a div {
    display: inline-block;
    height: 6px;
    position: relative;
    white-space: nowrap;
    width: 100%;
}
.tissue_group_0 div.tissue_elevated_bar a div {
    float: left;
}
.tissue_group_1 div.tissue_elevated_bar a div {
    float: right;
}
.woman_center, .man_center {
	padding: 100px 0px 70px 0px;
	height: 510px;
	width: 250px;
	display: inline-block;
	overflow: hidden;
	margin: 0px 5px;
	position: relative;
}
.woman_center.small, .man_center.small {
	padding-top: 50px;
	width: 200px;
	height: 360px;
}
.woman_center svg, .man_center svg {
	position: relative;
	left: 50%;
}
.woman_center svg {
	left: -50%;
}
.woman_center div, .man_center div {
	position: absolute;
	top: 100px;
	border-right: 2px solid #a0a1a2;
	right: 0px;
	height: 235px;
}
.woman_center.small div, .man_center.small div {
	top: 50px;
	height: 187px;
}
.woman_center div {
	right: auto;
	left: 0px;
	height: 235px;
}
.woman_bg {
	background-color: #fff;
	border-radius: 7px;
	width: 300px;
	height: 520px;
	position: absolute;
	top: 97px;
	margin-left: 50%;
	left: -150px;
}

.patientImages {
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 1em;
}

.patientImages > :first-child {
	margin-left: 0;
}
.patientImages > * {
	margin-left: 1rem;
}

.mtChannel {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 1em;
    margin-left: 5px;
}
.mtChannel div, .mtChannel div table, .mtChannel div table td.mt_value  {
    width: 100%;
}


.multiplexSelectedImage {
	max-width: 200px;
	display: inline-block;
	margin: 0px 20px 20px 20px;
	vertical-align: top;
}
.multiplexContainer {
	text-align: center;
}

.mx_info_box {
	background-color: #d2d2d2;
	border-radius: 3px;
	padding: 5px;
	width: 120px;
	position: absolute;
	top: 20px;
	text-align: left;
}
/* Evolutionary tissue menu: organs (left), tissues of the selected organ (right) */
.evo_tissue_menu .evo_organs > span {
	border-left: 6px solid transparent;
	box-sizing: border-box;
}
.evo_tissue_menu .evo_organs a.evo_organ {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
}
.evo_tissue_menu .evo_organs a.evo_organ > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.evo_tissue_menu .evo_organ_count {
	flex-shrink: 0;
	padding: 0 6px 0 4px;
	font-weight: normal;
}
.evo_tissue_menu .evo_organs > span.active {
	outline: 2px solid #FFFFFF;
}
/* tissue text leaves room for the species markers, which sit at the right end of the same line */
.evo_tissue_menu .evo_organ_tissues a > span {
	max-width: calc(100% - 62px) !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
.evo_tissue_menu svg.evo_species {
	fill: #000;
}
/* legend at the bottom of the menu, on one line */
.evo_tissue_menu .evo_species_legend {
	margin: -4px 10px 8px 4px;
	font-size: 10px;
	color: #000;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	white-space: nowrap;
}
.evo_tissue_menu .evo_species_legend i {
	font-style: normal;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}
.evo_tissue_menu .evo_organ_tissues > div {
	display: inline-block;
	vertical-align: top;
}
.evo_tissue_menu .evo_organ_hint {
	color: #FFFFFF;
	font-style: italic;
	padding: 4px 10px;
	width: 181px;
}

/* Brain regions per species, two charts per row (brain_species_charts() in evolutionary_functions.php) */
.evo-brain { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding-top:15px;}
.evo-brain-hd { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 10px; }
.evo-brain-hd img { height: 36px; }
.evo-brain-cat { font-size: 12px; color: #555; }
.evo-brain-chart { text-align: center; }
.evo-brain-intro .brainsvg { text-align: center; }
.evo-brain-intro .brainsvg svg { height: 220px; width: auto; max-width: 100%; display: inline-block; }   /* = human chart height (dimension h in brain_species_charts) */

/* organ chart + species body maps; the maps spread over the full chart height */
.evo-organs { display: grid; grid-template-columns: 600px 225px; column-gap: 10px; align-items: stretch; }
.evo-species { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-bottom: 110px; }
.evo-species .slideToggle > div, .evo-brain-intro .slideToggle > div { padding: 0 8px; }
.evo-species-svg > svg { width: 225px; height: auto; display: block; }   /* > : not the nested half-figures inside human.svg */
.evo-species .evo-species-svg { cursor: zoom-in; }
.evo-species-pop { background: #fff; padding: 10px; display: flex; flex-direction: column; align-items: center; }
.evo-species-pop > br { display: none; }
.evo-species-pop .slideToggle { align-self: flex-end; white-space: nowrap; }   /* toggle at the top right of the box */
.evo-species-pop .evo-species-svg > svg { width: 600px; }
/* grey summary box over both columns: human/brain conservation left, species overlap right (same column widths as .evo-brain) */
.evo-brain-sum { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0 6px; padding: 10px 14px; background: #eee; border-radius: 10px; font-size: 13px; line-height: 1.5; white-space: normal; }
.evo-sum-l { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; align-content: start; }
.evo-sum-k { font-weight: bold; }
.evo-ov-head { margin-bottom: 3px; }
.evo-ov { display: grid; grid-template-columns: max-content 1fr; gap: 0 12px; background: #fff; border-radius: 7px; padding: 4px 10px; }
.evo-ov > div { padding: 3px 0; border-top: 1px solid #e5e5e5; }
.evo-ov > div:nth-child(-n+2) { border-top: 0; }
.evo-ov-sp { display: flex; align-items: center; gap: 6px; }
.evo-ov-sp img { height: 14px; }
[id^=RNAChart_] svg { cursor: zoom-in; }
[id^=RNAChart_] .bar_g, [id^=RNAChart_] text { cursor: pointer; }
.evo-chart-pop { background: #fff; padding: 10px; }
.evo-species-svg[data-species="human"] > svg { width: auto; height: 230px; margin: 0 auto; }   /* tall figure: limit height, keep proportions */

.evo-species-pop .evo-species-svg[data-species="human"] > svg { width: auto; height: 75vh; }