* {
	box-sizing : border-box;
}

#panel-text, #panel-timeline {
	font-family: Garamond, serif;
	color: #4d4e53
}
#panel-header header {
	font-size: xx-large;
	font-family: 'Noto Sans', sans-serif;
	color: #2ea149;
}

span.uncertainty {
	font-weight: 400;
	opacity: 0.75;
}
span.percentage {
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	font-size: 1.2em;
}



.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  text-align: center;
	background: #fff;
	border: 1px solid #93000f;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}


/*header and buttons*/
[id^='panel-button-'] {flex: 0 0%; display: flex}
button {
	border: none;
	color: #fff;
	background: #93000f;
	font-size: x-large;
	padding: 0px 10px;
	cursor: pointer;
	transition-property: background;
	transition-duration: 0.2s;
	align-self: center;
	height: 100%
}
button:hover {background: #a3202f;}

#panel-header {flex: 6 75%;}

#panel-text {
  display: flex;
  align-items: center;
}
#panel-text .inner {
	display: flex;
	align-items: center;
	padding: 10px;
	width: 100%;
	height: 100%;
	border: 1px solid #93000f;
	background: #ececec;
}

#panel-timeline {
  display: flex;
  flex-flow: column;
	padding-bottom: 0px;
}
#panel-timeline div {flex: 1 1;}
#panel-tree {
	padding: 0px;
	overflow: hidden;
}
#tree {
	padding: 0px 10px;
	overflow: visible;
	width: 100%;
}


/*Timeline interactivity*/
[id^='timeline-'] {
	cursor: pointer;
	transition-property: background, color, transform;
	transition-duration: 0.2s;
	border: 1px solid #93000f;
	background: #ececec;
	font-size: small;
	display: flex;
	align-items: center;
	justify-content: center;
}
[id^='timeline-']:hover {background: #fff;}
[id^='timeline-'].active {
	background: #93000f;
	color: #ececec;
	transform: scale(1.1, 1.1);
	z-index: 1;
}
[id^='timeline-']:first-child .percentage{ display: none; }


/*Timetree interactivity*/
[id^='tree-branch-'] path {
	transition-property: fill;
	transition-duration: 0.2s;
	fill: #ececec;
}
[id^='tree-branch-'].active path {fill: #93000f;}




/*mobile-first overriding*/
@media all and (min-width: 600px) {
  /*put image and text side-by-side*/
  #panel-image {flex: 2 67%;}
  #panel-text {flex: 1 33%;}
  /*make timeline horizontal*/
  #panel-timeline {flex-flow: row;}
  #panel-timeline > * {flex: 1 auto;}
}