html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
}

h1, h2 {
	font-weight: normal;
	margin-top: 4em;
	text-align: center;
}

h1 {
	margin-top: 1em;
}

h4 {
    margin-top: 16px;
    font-weight: bold;
}

.info {
	width: 1000px;
	margin: auto;
}

.info, .infotext {
	color: #999;
	line-height: 1.3em;
    font-size: 1.2em;
}

.chart {
	font-family: sans-serif;
	font-size: 12px;
}

.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

/* color for each node */
:root {
    --node0: #1b9e77;
    --node1: #d95f02;
    --node2: #7570b3;
    --node3: #e7298a;
    --node4: #66a61e;
    --node5: #e6ab02;
    --node6: #a6761d;
    --node7: #666666;
}

.node-0 {	fill: var(--node0); }
.node-1 {	fill: var(--node1); }
.node-2 {	fill: var(--node2); }
.node-3 {	fill: var(--node3); }
.node-4 {	fill: var(--node4); }
.node-5 {	fill: var(--node5); }
.node-6 {	fill: var(--node6); }
.node-7 {	fill: var(--node7); }
th.node-0 { background-color: var(--node0); }
th.node-1 { background-color: var(--node1); }
th.node-2 { background-color: var(--node2); }
th.node-3 { background-color: var(--node3); }
th.node-4 { background-color: var(--node4); }
th.node-5 { background-color: var(--node5); }
th.node-6 { background-color: var(--node6); }
th.node-7 { background-color: var(--node7); }

/* all buttons: pure-css */
.button-secondary {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	background: rgb(66, 184, 221);
}

.disabled {
	pointer-events: none;
}

.lapse-parameters label {
    margin-left: 2em;
    margin-right: 0.2em;
}

#divProgressBar {
	width: 1000px;
	height: 30px;
	background-color: rgba(164, 121, 255, 0.28);
	margin-left: auto;
	margin-right: auto;
}

#myBarID {
	width: 1000px;
	height: 30px;
}

#pbRectangle {
	width: 5px;
	height: 30px;
	fill: #4CAF50;
	text-align: center;
	color: white;
}

/* legend between allocationReplay and intro text/picture */
#legend {
	width: 800px;
	height: 30px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.rectangle {
	width: 100px;
  	padding: 3px 10px;
  	float: left;
  	line-height: 1.6em;
  	color: #fff;
}

label {
	margin-bottom: 10px;
}

table {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
}

tbody tr:nth-child(even) {
	background-color: #dddddd;
	/*padding: 8px;*/
}

td, th {
	text-align: center;
	width: 44px;	/* make more space for parameter column in parameterAffinity*/
	border: 1px solid #dddddd;
  padding: 4px;
}

.nodelabels th {
    color: #fff;
}

span[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.morecontent span {
    display: none;
}

.introjs-tooltip {
    min-width: 500px;
    max-width: 800px;
}

.introjs-tooltiptext {
    padding-bottom: 4px;
    padding-top: 4px;
}

.introjs-bullets {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: -24px;
}

.introjs-tooltipbuttons {
    padding-top: 0px;
    border: 0px;
}

.squeeze .introjs-tooltip-header {
    display: none;
}

.squeeze .introjs-tooltiptext {
    padding-top: 20px;
}

.ui-tooltip {
    z-index: 100001000;
}