*{border:0;margin:0;padding:0;box-sizing:border-box}
@font-face {
	font-family: 'icons';
	src: url('/fonts/icons/icomoon.eot');
	src: url('/fonts/icons/icomoon.eot#iefix') format('embedded-opentype'),
		url('/fonts/icons/icomoon.ttf') format('truetype'),
		url('/fonts/icons/icomoon.woff') format('woff'),
		url('/fonts/icons/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'biomaton';
	src: url('/fonts/letters/icomoon.eot');
	src: url('/fonts/letters/icomoon.eot#iefix') format('embedded-opentype'),
		url('/fonts/letters/icomoon.ttf') format('truetype'),
		url('/fonts/letters/icomoon.woff') format('woff'),
		url('/fonts/letters/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhp.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[data-icon]:before {
	display: inline-block;
	font-family: icons;
	content: attr(data-icon);
}
body, input, select, textarea {
	font-family: Open Sans, sans-serif;
	font-size: 16px;
	line-height: 145%;
}
a {
	text-decoration: none;
	color: #00949c;
	cursor: pointer;
}
a:visited {
/*	color: #3f368c; */
}
h1, h2, h3, h4 {
	font-weight: 300;
	margin-bottom: 0.6em;
	line-height: 1.3;
}
h4 {
	margin-bottom: 0.4em;
}
p {
	margin-bottom: 15px;
}
ol, ul {
	padding-left: 30px;
	margin-bottom: 15px;
}
.wrap {
	max-width: 1184px;
	padding: 0 32px;
	margin: 0 auto;
}
.fleft {
	float: left !important;
	margin-right: 5px;
}
.fright {
	float: right !important;
	margin-left: 5px;
}
.space {
	margin-top: 5px;
}
.clear {
	clear: both;
}
.show {
	display: block !important;
}
.intro {
	font-size: 18px;
	line-height: 1.55;
	margin-bottom: 35px;
}
.intro p {
	margin: 0;
}
header {
	background: #111;
	padding: 8px 0;
	height: 48px;
	line-height: 32px;
}
header nav {
	position: relative;
}
header nav>a, header nav>span>a {
	position: relative;
	color: #fff;
	margin-left: 12px;
	font-size: 27px;
	float: left;
}
header a[data-notify]:after {
	content: attr(data-notify);
	color: #fff;
	position: absolute;
	font-size: 9px;
	top: 0;
	right: -6px;
	background: rgb(0, 180, 0);
	padding: 0px 4px 0;
	border-radius: 10px;
	line-height: 14px;
}
header a[data-notify="0"]:after {
	display: none;
}
a.logo {
	font-family: 'biomaton';
	font-size: 12px;
	color: #fff;
	text-decoration: none;
	float: left;
}
.logo:before {
	float: left;
	font-size: 27px;
	margin-right: 3px;
}
.crumbs {
	float: left;
}
.menu {
	display: none;
	position: absolute;
	z-index: 200;
	font-size: 14px;
	line-height: 24px;
	background: #fff;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
	width: 275px;
	right: 0;
	top: 36px;
	padding: 0;
}
.menu.show {
	display: block;
}
.resources-icon.connected {
	color: #74ea36;
}
.user-menu .item {
	display: block;
	padding: 7px 10px 5px;
}
.user-menu .disabled {
	background: #eee;
}
.user-menu .tabs {
	background: #eee;
}
.user-menu .tabs a {
	padding: 3px 10px;
	color: #555;
	display: inline-block;
}
.user-menu .tabs a.selected {
	background: #fff;
}
.user-menu .name:before {
	font-family: 'icons';
	font-size: 18px;
	float: left;
	margin-right: 7px;
}
.user-menu [data-tab-content] {
	display: none;
}
.user-menu [data-tab-content].show {
	display: block;
}
.user-menu [data-type="node"] .name:before, .user-menu [data-type="local"] .name:before {
	content: '1';
}
.user-menu [data-type="api"] .name:before {
	content: 'r';
}
.user-menu [data-empty]:empty::before {
	padding: 30px 0;
	font-size: 16px;
}
.user-menu .jobs .details {
	float: left;
	width: 30%;
	color: #333;
	line-height: 22px;
}
[data-job] .progress {
	float: left;
	width: 70%;
	position: relative;
	color: #333;
	border: 1px solid #eee;
	background: #f7f7f7;
	line-height: 22px;
	height: 24px;
}
[data-job] .progress>div {
	height: 22px;
	position: absolute;
}
[data-job] .progress [data-progress] {
	background: rgba(74, 137, 191, 1);
}
[data-job] .progress [data-progress]:before {
	content: attr(data-progress);
	text-align: center;
	position: absolute;
	width: 100%;
	color: #fff;
	font-size: 14px;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.user-menu .resources .details {
	float: left;
	width: 80%;
	color: #333;
	line-height: 22px;
}
.user-menu .resources .cost[data-cost="0"] {
	display: none;
}
.user-menu .resources .threads {
	float: right;
	width: 20%;
	text-align: center;
	background: #eee;
	font-size: 15px;
	padding: 4px;
}
.user-menu .connect {
	padding: 3px 10px;
	background: #eee;
	font-size: 15px;
}
.user-menu .connect a:before {
	margin-right: 6px;
	font-size: 18px;
	float: left;
}
.user-menu .connect a {
	color: #333;
}
.user-menu .connect a:hover {
	color: #666;
}
.user-menu .connect a[data-status="connected"] {
	color: #497930;
}
.main {
	min-height: 600px;
	margin: 25px 0;
	display: inline-block;
	width: 100%;
}
.filters {
	margin-bottom: 20px;
	display: inline-block;
	width: 100%;
}
.filters input, .filters select {
	border: 1px solid #aad;
	padding: 3px 5px;
	font-size: 14px;
	background: #fff;
	height: 30px;
	margin-left: 5px;
	border-radius: 2px;
}
.model-list {
	display: inline-block;
	width: 100%;
}
.model-list>div {
	position: relative;
	overflow: hidden;
	float: left;
	width: 256px;
	margin: 0 32px 32px 0;
	background: #fff;
}
.model-list>div:nth-child(4n) {
	margin-right: 0;
}
.model-list>div .preview svg, .model-list>div .preview canvas {
	display: block;
	cursor: pointer;
}
.model-list>div .details {
	height: 256px;
	font-family: Open Sans, sans-serif;
	font-size: 13px;
	background: #f5f5f5;
	color: #333;
	padding: 7px 12px;
}
.model-list>div .details h3 {
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
}
.model-list>div .details h4 {
	font-size: 13px;
	color: #666;
}
.model-list>div .details p {
	margin-bottom: 5px;
}
a[data-tag] {
	display: inline-block;
	margin-right: 5px;
}
/*
a[data-tag]:before {
	display: inline-block;
	font-family: icons;
	border: 2px solid #555;
	padding: 2px;
	font-size: 24px;
	border-radius: 24px;
}
a[data-tag="type:ibm"]:before {
	content: '7';
}
a[data-tag="spatial:discrete"]:before {
	content: '5';
}
a[data-tag="spatial:continuous"]:before {
	content: '6';
}
a[data-tag="individuals:discrete"]:before {
	content: '3';
}
a[data-tag="type:popgen"]:before {
	content: '4';
}
*/
canvas.grid {
	position: absolute;
	z-index: 1;
}
canvas.dynamic {
	position: absolute;
	z-index: 2;
	background transparent;
}
.container {
	position: relative;
}
[data-empty]:empty:before {
	content: attr(data-empty);
	display: block;
	padding: 100px 0;
	text-align: center;
	font-size: 20px;
	color: #888;
}
.narrate {
	font-size: 18px;
	line-height: 1.55;
	margin-bottom: 35px;
	background: #f7f7f7;
	padding: 7px 12px;
}
.narrate:empty {
	display: none;
}
.narrate p {
	margin: 0;
}
.graphs:not(.preview) {
	margin: 25px -16px 0;
}
.graphs:not(.preview)>div {
	position: relative;
	float: left;
	width: 257px;
	margin: 0 15px 32px 16px;
}
.graphs:not(.preview)>div svg, .graphs:not(.preview)>div canvas {
	display: block;
}
polygon.proportion:hover {
	stroke: #f90;
	stroke-width: 2px;
}
[data-graph] .title {
	font-size: 15px;
	text-align: center;
	margin: 0 0 7px;
}
.preview [data-graph] .title {
	display: none;
}
[data-graph] .graph-container {
	position: relative;
}
.graphs:not(.preview) .graph-container {
	border: 1px solid #000;
	border-width: 0 0 1px 1px;
}
[data-graph] .overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.1);
}
[data-graph] .overlay .progress {
	float: none;
	top: 46%;
	margin: 0 auto;
}
[data-graph] .menu-overlay {
	position: absolute;
	display: none;
	top: 5px;
	right: 5px;
}
[data-graph]:hover .menu-overlay {
	display: block;
}
.preview [data-graph]:hover .menu-overlay {
	display: none;
}
[data-graph] .menu-overlay a {
	color: #555;
	cursor: pointer;
	background: #eee;
	padding: 2px 5px;
	border-radius: 5px;
}
[data-graph] .data-menu {
	display: none;
	position: absolute;
	z-index: 100;
	font-size: 14px;
	background: #fff;
	width: 130px;
	right: 30px;
	padding: 0;
}
[data-graph] .data-menu.show {
	display: block;
}
[data-graph] .data-menu a {
	display: block;
	cursor: pointer;
	padding: 3px 10px;
}
[data-graph] .data-menu a:hover {
	background: #f5f5f5;
}
[data-graph] .legend {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 12px;
	background: rgba(255,255,255,0.8);
	padding: 5px 7px;
}
[data-graph] .legend:empty {
	display: none;
}
[data-graph] .legend [data-color]:before {
	content: '';
	height: 10px;
	width: 10px;
	background: #ccc;
	display: inline-block;
	margin-right: 5px;
}
[data-graph] .legend [data-color]:nth-child(1):before {
	background-color: rgb(31, 119, 180);
}
[data-graph] .legend [data-color]:nth-child(2):before {
	background-color: rgb(255, 127, 14);
}
[data-graph] .legend [data-color]:nth-child(3):before {
	background-color: rgb(44, 160, 44);
}
[data-graph] .legend [data-color]:nth-child(4):before {
	background-color: rgb(214, 39, 40);
}
[data-graph] .legend [data-color]:nth-child(5):before {
	background-color: rgb(148, 103, 189);
}
.axis-label {
	position: absolute;
	width: 100%;
	font-size: 13px;
	text-align: center;
}
.axis-label.label-x {
	bottom: -25px;
}
.preview .axis-label.label-x {
	bottom: 0;
}
.axis-label.label-y {
	transform: rotate(-90deg);
	transform-origin: 0 100%;
	right: 4px;
	bottom: 0;
}
.preview .axis-label.label-y {
	transform: rotate(90deg);
	transform-origin: 0 0;
	left: 23px;
	top: 0;
}
[data-graph] .axis-tick {
	position: absolute;
	font-size: 14px;
}
.axis-tick.ymax, .axis-tick.ymin, .axis-tick.min {
	right: 102%;
}
.axis-tick.ymax {
	top: 18px;
}
.axis-tick.ymin, .axis-tick.xmin, .axis-tick.xmax, .axis-tick.min {
	bottom: -23px;
}
.axis-tick.xmax {
	right: 0;
}
.infobox {
	position: absolute;
	font-size: 12px;
	width: 200px;
	font-family: Open Sans;
	background: #f6f6f6;
	padding: 2px 7px;
}
[data-module="model"] {
	position: relative;
}
.actions {
	float: right;
	font-size: 14px;
}
.actions a {
	margin-left: 8px;
	float: left;
	padding: 3px 7px;
	line-height: 20px;
	background: #f5f5f5;
	color: #555;
	text-shadow: 1px 1px rgb(230 230 230);
	border: 1px solid #f0f0f0;
}
.actions a:before {
	float: left;
	margin-right: 4px;
	font-size: 14px;
}
aside {
	position: absolute;
	right: -315px;
	top: 0;
	z-index: 100;
	font-size: 14px;
	width: 300px;
	box-shadow: 0 1px 4px 1px #00000022;
	background: #fff;
	padding: 10px 12px;
}
aside:before {
	content: '';
	position: absolute;
	left: -20px;
	top: 6px;
	border: 10px solid transparent;
	border-right: 10px solid #eee;
}
aside.hidden {
	display: none;
}
aside .form h4 {
	background: #f7f7f7;
	margin: -10px -12px 10px -12px;
	padding: 7px 12px;
}
aside label {
	clear: both;
	width: 60%;
	float: left;
}
aside .option {
	display: inline-block;
	width: 100%;
}
aside .option label {
	cursor: pointer;
}
aside .option .values {
	float: left;
	width: 40%;
	display: flex;
}
aside input, aside select {
	background: #eee;
	border: 1px solid #eee;
	font-size: 14px;
	padding: 2px 5px;
}
aside input.range {
	display: none;
	border: 1px solid #ccc;
}
aside .values input, aside .values select {
	transition: 0.5s ease flex;
	width: 100%;
	flex: 1;
}
aside .values input:focus {
	flex: 5;
}
aside label input {
	width: 20px;
	margin-right: 8px;
}
aside .option.selected input.value {
	display: none;
}
aside .option.selected input.range {
	display: inline;
}
.center {
	width: 550px;
	margin: 0 auto;
	line-height: 30px;
}
.wide-form p {
	display: inline-block;
	width: 100%;
	position: relative;
}
.wide-form input, .wide-form select, .wide-form textarea {
	border: 1px solid #000;
	padding: 2px 7px;
	width: 50%;
	float: left;
}
.wide-form label {
	clear: left;
	float: left;
	width: 25%;
}
.wide-form .info {
	float: left;
	width: 25%;
	padding-left: 5%;
}
.entry {
	display: flex;
	padding: 5px 7px;
	background: #fafafa;
	position: relative;
}
.entry.error {
	background: #fadada;
}
.entry>input, .entry>select, .entry>span {
	width: auto;
	float: none;
	flex: 1;
}
.entry>span {
	position: relative;
}
.entry>span>input {
	width: 100%;
}
.entry input, .entry select {
	font-size: 14px;
	border: 1px solid #eee;
}
.entry span [data-range] {
	display: none;
}
.entry .values {
	position: absolute;
	z-index: 100;
	width: 100%;
	right: 0;
	top: 29px;
	display: flex;
	flex-direction: column;
}
.entry .values .entry {
	background: #f0f0f0;
}
.entry .values.hidden {
	display: none;
}
.entry .toggle-values {
	display: block;
	padding: 3px 8px;
	font-size: 14px;
	background: #f0f0f0;
}
.entry a {
	color: #666;
	font-size: 14px;
	padding: 2px;
	margin-left: 5px;
	line-height: 20px;
}
.entry .values .entry input, .entry .values .entry input {
	width: 100%;
}
.section {
	margin-bottom: 15px;
}
.section.hidden .content {
	display: none;
}
.section h3 {
	cursor: pointer;
}
.section h3:before {
	content: '\25BC';
	margin-right: 5px;
}
.section.hidden h3:before {
	content: '\25BA';
}
.login-form p {
	display: inline-block;
	width: 100%;
}
.login-form input, .login-form select, .login-form textarea {
	border: 2px solid #000;
	padding: 2px 7px;
	width: 40%;
	float: left;
}
.login-form label {
	clear: left;
	float: left;
	width: 25%;
}
.login-form .info {
	float: left;
	width: 35%;
	padding-left: 5%;
}
.center .login-form input, .center .login-form label, .center .login-form select, .center .login-form textarea {
	width: 50%;
}
.search-results {
	position: absolute;
	z-index: 100;
	top: 30px;
	width: 500px;
	background: #f8f8f8;
	border: 1px solid #f0f0f0;
}
.search-results .result {
	padding: 3px 10px;
	font-size: 14px;
}
.search-results .journal {
	font-style: italic;
}
.search-results .meta {
	font-size: 13px;
}
.search-results .authors {
	color: #777;
	font-size: 13px;
}
.button {
	cursor: pointer;
	background: #ddd;
	padding: 0px 7px;
	border: 5px solid #555;
	line-height: 28px;
	font-size: 14px;
	border-top-color: #999;
	border-left-color: #999;
}
.boring-button {
	display: inline-block;
	cursor: pointer;
	background: #eee;
	padding: 3px 8px;
	margin-right: 5px;
	border: 1px solid #ddd;
	color: #2d2d35;
	font-size: 14px;
}
.boring-button.orange {
	background: #f90;
	color: #fff;
}
.boring-button.disabled {
	color: #999;
	cursor: not-allowed;
}
.center h2 {
	margin-bottom: 20px;
}
h2 a.tag {
	background: #eee;
	color: #555;
	border-radius: 5px;
	padding: 2px 5px;
	font-size: 16px;
}
.editor {
	position: relative;
}
.editor .error {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 10px 15px;
	background: #ffcccc;
}
.editor .error.green {
	background: #bbd7bb;
}
.editor .error.show {
	display: block;
}
.editor .error.show:empty {
	display: none;
}
.wide-form .editor textarea {
	width: 100%;
	height: 500px;
	float: none;
	font-size: 15px;
	font-family: monospace;
	background: #eee;
	padding: 5px;
}
footer {
	clear: both;
	padding-top: 40px;
}
footer p {
	margin: 0;
}
footer .col {
	font-size: 12px;
	float: left;
	width: 33.33%;
	padding-right: 3.33%;
	min-height: 1px;
}
footer .col>a {
	display: block;
}
@media (max-width: 1784px) {
	[data-module="model"] aside {
		right: 0;
		top: 45px;
	}
	[data-module="model"] aside:before {
		left: auto;
		right: 2px;
		top: -20px;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #f7f7f7;
	}
}