body	{
		background-color: #fffdfa;
		overflow: hidden;
		cursor: default;
	}
	
	.relation	{
		stroke: #000;
		stroke-width: 0.3;
		opacity: 0;
		fill: transparent;
	}
	
	.relation:hover	{
		cursor: pointer;
	}
	
	
	@keyframes dash {
		to {
			stroke-dashoffset: 0;
		}
	}
	
	
	text {
		font-family: Source sans pro;
		font-size: 16px;
	}
	
	.sceneText	{
		font-size: 38px;
	}
	
	.sceneLabel {
		font-family: Source sans pro;
		font-size: 16px;
	}
	
	h1	{
		font-family: Source sans pro;
		font-size: 16px;
	}

	h2	{
		font-family: Source sans pro;
		font-size: 13px;
	}
	
	#buttoncontainer	{
		display:block;
		width:100%;
		position: fixed;
	}
	
	#dashboard	{
		display: none;
		position: fixed;
		margin-top:30px;
		font-family: Source sans pro;
		font-size: 12px;
		color: #000;
		background-color: #FAF9F699;
		border: 1px dashed #000;
	}
	
	#dashbutton button		{
		background-color: #efefef;
		color: #000;
		font-size:12px;
		border: 2px solid #000;
		float: left;
	}
	
	#dashbutton button:hover		{
		background-color: #ccc;
		color: #000;
		font-size:12px;
		border: 2px solid #000;
	}
	
	
	.visexplainer	{
		height: 100px;
		float: left;
		width: 20%;
		padding-left: 10px;
		color: white;
	}
	
	
		
	.scene rect:hover	{
		cursor: pointer;
	}
	
	.sceneRect	{
	 fill: rgba(255, 255, 255, 1);
	}


	.intro text+text {
	    fill: #000;
	}
	
	.text {
		fill: #000;
	}

	path.Link.character1, path.Relationships.character1 {
		stroke: #eb4a2b;
		fill: transparent;
	}

	circle.character1StartNode, path.character1SceneNode, rect.character1SceneNode {
		stroke: #eb4a2b;
	}
	
	path.character1SceneNode {
		stroke-width: 2px;
	}
	
	circle.character1StartNode:hover, path.character1SceneNode:hover, rect.character1SceneNode:hover {
		cursor: pointer;
	}
	
	.character1eventNodeText {
		fill: #eb4a2b;
	}

	path.Link.character2, path.Relationships.character2 {
		stroke: #01a8eb;
		fill: transparent;
	}
	
	circle.character2StartNode, path.character2SceneNode, rect.character2SceneNode  {
		stroke: #01a8eb;
	}
	
	path.character2SceneNode {
		stroke-width: 2px;
	}
	
	circle.character2StartNode:hover, path.character2SceneNode:hover {
		cursor: pointer;
	}
	
	.character2eventNodeText {
		fill: #01a8eb;
	}
	
	path.Link.character3, path.Relationships.character3 {
		stroke: #932f3c;
		fill: transparent;
	}
	
	circle.character3StartNode, path.character3SceneNode, rect.character3SceneNode  {
		stroke: #932f3c;
	}
	
	path.character3SceneNode {
		stroke-width: 2px;
	}
	
	circle.character3StartNode:hover, path.character3SceneNode:hover {
		cursor: pointer;
	}
	
	.character3eventNodeText {
		fill: #932f3c;
	}
	
	path.Link.character4, path.Relationships.character4 {
		stroke: #FF7F00;
		fill: transparent;
	}
	
	circle.character4StartNode, path.character4SceneNode, rect.character4SceneNode  {
		stroke: #FF7F00;
	}
	
	path.character4SceneNode {
		stroke-width: 2px;
	}
	
	circle.character4StartNode:hover, path.character4SceneNode:hover {
		cursor: pointer;
	}
	
	.character4eventNodeText {
		fill: #FF7F00;
	}

	path.Link.character5, path.Relationships.character5 {
		stroke: #915ce5;
		fill: transparent;
	}
	
	circle.character5StartNode, path.character5SceneNode, rect.character5SceneNode  {
		stroke: #915ce5;
	}
	
	path.character5SceneNode {
		stroke-width: 2px;
	}
	
	circle.character5StartNode:hover, path.character5SceneNode:hover {
		cursor: pointer;
	}
	
	.character5eventNodeText {
		fill: #915ce5;
	}
	
	path.Link.character6, path.Relationships.character6 {
		stroke: #be5600;
		fill: transparent;
	}
	
	circle.character6StartNode, path.character6SceneNode, rect.character6SceneNode  {
		stroke: #be5600;
	}
	
	path.character6SceneNode {
		stroke-width: 2px;
	}
	
	circle.character6StartNode:hover, path.character6SceneNode:hover {
		cursor: pointer;
	}
	
	.character6eventNodeText {
		fill: #be5600;
	}

	path.Link.character7, path.Relationships.character7 {
		stroke: #ff6fac;
		fill: transparent;
	}
	
	circle.character7StartNode, path.character7SceneNode, rect.character7SceneNode  {
		stroke: #ff6fac;
	}
	
	path.character7SceneNode {
		stroke-width: 2px;
	}
	
	circle.character7StartNode:hover, path.character7SceneNode:hover {
		cursor: pointer;
	}
	
	.character7eventNodeText {
		fill: #ff6fac;
	}
	
	path.Link.character8, path.Relationships.character8 {
		stroke: #0058c2;
		fill: transparent;
	}
	
	circle.character8StartNode, path.character8SceneNode, rect.character8SceneNode  {
		stroke: #0058c2;
	}
	
	path.character8SceneNode {
		stroke-width: 2px;
	}
	
	circle.character8StartNode:hover, path.character8SceneNode:hover {
		cursor: pointer;
	}
	
	.character8eventNodeText {
		fill: #0058c2;
	}
	
	path.Link.character9, path.Relationships.character9 {
		stroke: #b9005d;
		fill: transparent;
	}
	
	circle.character9StartNode, path.character9SceneNode, rect.character9SceneNode  {
		stroke: #b9005d;
	}
	
	path.character9SceneNode {
		stroke-width: 2px;
	}
	
	circle.character9StartNode:hover, path.character9SceneNode:hover {
		cursor: pointer;
	}
	
	.character9eventNodeText {
		fill: #b9005d;
	}
	
	path.Link.character10, path.Relationships.character10 {
		stroke: #1b4229;
		fill: transparent;
	}
	
	circle.character10StartNode, path.character10SceneNode, rect.character10SceneNode  {
		stroke: #1b4229;
	}
	
	path.character10SceneNode {
		stroke-width: 2px;
	}
	
	circle.character10StartNode:hover, path.character10SceneNode:hover {
		cursor: pointer;
	}
	
	.character10eventNodeText {
		fill: #1b4229;
	}
	
	path.Link.character11, path.Relationships.character11 {
		stroke: #d892ff;
		fill: transparent;
	}
	
	circle.character11StartNode, path.character11SceneNode, rect.character11SceneNode  {
		stroke: #d892ff;
	}
	
	path.character11SceneNode {
		stroke-width: 2px;
	}
	
	circle.character11StartNode:hover, path.character11SceneNode:hover {
		cursor: pointer;
	}
	
	.character11eventNodeText {
		fill: #d892ff;
	}
	
	path.Link.character12, path.Relationships.character12 {
		stroke: #8ce375;
		fill: transparent;
	}
	
	circle.character12StartNode, path.character12SceneNode, rect.character12SceneNode  {
		stroke: #8ce375;
	}
	
	path.character12SceneNode {
		stroke-width: 2px;
	}
	
	circle.character12StartNode:hover, path.character12SceneNode:hover {
		cursor: pointer;
	}
	
	.character12eventNodeText {
		fill: #8ce375;
	}
	
	path.Link.character13, path.Relationships.character13 {
		stroke: #62e1e7;
		fill: transparent;
	}
	
	circle.character13StartNode, path.character13SceneNode, rect.character13SceneNode  {
		stroke: #62e1e7;
	}
	
	path.character13SceneNode {
		stroke-width: 2px;
	}
	
	circle.character13StartNode:hover, path.character13SceneNode:hover {
		cursor: pointer;
	}
	
	.character13eventNodeText {
		fill: #62e1e7;
	}
	
	path.Link.character14, path.Relationships.character14 {
		stroke: #90188e;
		fill: transparent;
	}
	
	circle.character14StartNode, path.character14SceneNode, rect.character14SceneNode  {
		stroke: #90188e;
	}
	
	path.character14SceneNode {
		stroke-width: 2px;
	}
	
	circle.character14StartNode:hover, path.character14SceneNode:hover {
		cursor: pointer;
	}
	
	.character14eventNodeText {
		fill: #90188e;
	}
	
	path.Link.character15, path.Relationships.character15 {
		stroke: #26a484;
		fill: transparent;
	}
	
	circle.character15StartNode, path.character15SceneNode, rect.character15SceneNode  {
		stroke: #26a484;
	}
	
	circle.character15StartNode:hover, path.character15SceneNode:hover {
		cursor: pointer;
	}
	
	path.character15SceneNode {
		stroke-width: 2px;
	}
	
	.character15eventNodeText {
		fill: #26a484;
	}
	
	path.Link.character16, path.Relationships.character16 {
		stroke: #804300;
		fill: transparent;
	}
	
	circle.character16StartNode, path.character16SceneNode, rect.character16SceneNode  {
		stroke: #804300;
	}
	
	path.character16SceneNode {
		stroke-width: 2px;
	}
	
	circle.character16StartNode:hover, path.character16SceneNode:hover {
		cursor: pointer;
	}
	
	.character16eventNodeText {
		fill: #804300;
	}
	
	path.Link.character17, path.Relationships.character17 {
		stroke: #FF00AA;
		fill: transparent;
	}
	
	circle.character17StartNode, path.character17SceneNode, rect.character17SceneNode  {
		stroke: #FF00AA;
	}
	
	path.character17SceneNode {
		stroke-width: 2px;
	}
	
	circle.character17StartNode:hover, path.character17SceneNode:hover {
		cursor: pointer;
	}
	
	.character17eventNodeText {
		fill: #FF00AA;
	}
	
	path.Link.character18, path.Relationships.character18 {
		stroke: #ff9c84;
		fill: transparent;
	}
	
	circle.character18StartNode, path.character18SceneNode, rect.character18SceneNode  {
		stroke: #ff9c84;
	}
	
	path.character18SceneNode {
		stroke-width: 2px;
	}
	
	circle.character18StartNode:hover, path.character18SceneNode:hover {
		cursor: pointer;
	}
	
	.character18eventNodeText {
		fill: #ff9c84;
	}
	
	path.Link.character19, path.Relationships.character19 {
		stroke: #2a7900;
		fill: transparent;
	}
	
	circle.character19StartNode, path.character19SceneNode, rect.character19SceneNode  {
		stroke: #2a7900;
	}
	
	path.character19SceneNode {
		stroke-width: 2px;
	}
	
	circle.character19StartNode:hover, path.character19SceneNode:hover {
		cursor: pointer;
	}
	
	.character19eventNodeText {
		fill: #2a7900;
	}
	
	path.Link.character20, path.Relationships.character20 {
		stroke: #45617b;
		fill: transparent;
	}
	
	circle.character20StartNode, path.character20SceneNode, rect.character20SceneNode  {
		stroke: #45617b;
	}
	
	path.character20SceneNode {
		stroke-width: 2px;
	}
	
	circle.character20StartNode:hover, path.character20SceneNode:hover {
		cursor: pointer;
	}
	
	.character20eventNodeText {
		fill: #45617b;
	}
	
	path.Link.character21, path.Relationships.character21 {
		stroke: #c1886b;
		fill: transparent;
	}
	
	circle.character21StartNode, path.character21SceneNode, rect.character21SceneNode  {
		stroke: #c1886b;
	}
	
	path.character21SceneNode {
		stroke-width: 2px;
	}
	
	circle.character21StartNode:hover, path.character21SceneNode:hover {
		cursor: pointer;
	}
	
	.character21eventNodeText {
		fill: #c1886b;
	}
	
	path.Link.character22, path.Relationships.character22 {
		stroke: #793c75;
		fill: transparent;
	}
	
	circle.character22StartNode, path.character22SceneNode, rect.character22SceneNode  {
		stroke: #793c75;
	}
	
	path.character22SceneNode {
		stroke-width: 2px;
	}
	
	circle.character22StartNode:hover, path.character22SceneNode:hover {
		cursor: pointer;
	}
	
	.character22eventNodeText {
		fill: #793c75;
	}
	
	path.Link.character23, path.Relationships.character23 {
		stroke: #6de5a0;
		fill: transparent;
	}
	
	circle.character23StartNode, path.character23SceneNode, rect.character23SceneNode  {
		stroke: #6de5a0;
	}
	
	path.character23SceneNode {
		stroke-width: 2px;
	}
	
	circle.character23StartNode:hover, path.character23SceneNode:hover {
		cursor: pointer;
	}
	
	.character23eventNodeText {
		fill: #6de5a0;
	}
	
	path.Link.character24, path.Relationships.character24 {
		stroke: #71acff;
		fill: transparent;
	}
	
	circle.character24StartNode, path.character24SceneNode, rect.character24SceneNode  {
		stroke: #71acff;
	}
	
	path.character24SceneNode {
		stroke-width: 2px;
	}
	
	circle.character24StartNode:hover, path.character24SceneNode:hover {
		cursor: pointer;
	}
	
	.character24eventNodeText {
		fill: #71acff;
	}
		
	

	
	.sidenav {
		width: 0;
		height: 100%;
		position: fixed;
		z-index: 1;
		top: 0px;
		right: 0;
		background-color: #ffffff;
		border-left: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		overflow-y: scroll;
		overflow-x: hidden;
		filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.2));
	}
	
	
	.sidetextpanel {
		width: 0;
		height: 100%;
		position: fixed;
		z-index: 1;
		top: 0px;
		left: 0;
		background-color: #ffffff;
		border-right: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
		overflow-y: scroll;
		overflow-x: hidden;
		filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.2));
	}




.closebtn {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 32px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  display: block;
}

.closebtn:hover {
  color: #B80448;
}


.textPanelclosebtn {
  position: absolute;
  top: 10px;
  left: 350px;
  font-size: 32px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  display: block;
}

.textPanelclosebtn:hover {
  color: #B80448;
}


	.sidenav button		{
		background-color: #efefef;
		color: #000000;
		font-size:14px;
		border-top: 2px solid #000;
		border-left: 2px solid #000;
		border-right: 2px solid #000;
		border-bottom: none;
		
	}
	
	.sidenav button:hover		{
		background-color: #ccc;
		color: #000000;
		font-size:14px;
		cursor:pointer;
	}
	
	
	.sidetextpanel button		{
		background-color: #efefef;
		color: #000000;
		font-size:14px;
		border-top: 2px solid #000;
		border-left: 2px solid #000;
		border-right: 2px solid #000;
		border-bottom: none;
		
	}
	
	.sidetextpanel button:hover		{
		background-color: #ccc;
		color: #000000;
		font-size:14px;
		cursor:pointer;
	}
	
	.tabContainer		{
		font-family: Source sans pro;
		font-size: 14px;
		width: 300px;
	}

.sidenavcontents	{
	margin-top:20px;
	margin-left: 20px;
	font-family: Source sans pro;
	font-size: 14px;
}

.sidetextpanelcontents	{
	margin-top:20px;
	margin-left: 20px;
	font-family: Source sans pro;
	font-size: 14px;
}

#topbar		{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		padding-left: 5px;
		padding-top: 2px;
		height: 40px;
}

#vistitle	{
font-family: Source sans pro;
font-size:16px;
float:left;
margin-left: 20px;
margin-top: 0px;
}

#infobtn	{
		float:right;
		cursor:pointer;
		margin-top: 0px;
		margin-right: 20px;
}

#textPanelbtn	{
		float:left;
		cursor:pointer;
		margin-top: 0px;
		margin-right: 20px;
}

#vistitle	{
		font-size:14px;
		padding-top:12px;
		font-family: Source sans pro;
		font-weight: bold;
		text-align: center;
		margin-top: 0px;
}


div.tooltip {	
    position: absolute;											
    padding: 3px;
    background-color: #ffffff;
	border: 1px solid #666;		
	border-radius: 1px;
    pointer-events: none;
	font-family: Source sans pro;
	font-size: 16px;
	color: #000000;
	max-width: 300px;
	filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.2));
}

div.characterinfo {	
    position: absolute;											
    padding: 3px;
    background-color: #ffffff;
	border: 2px solid #666;
    border-radius: 1px;	
    pointer-events: none;
	font-family: Source sans pro;
	font-size: 16px;
	color: #000000;
	max-width: 300px;
}

div.sceneNodeDiv {	
    position: absolute;											
    padding: 3px;
    background-color: #ffffff;
	border: 2px solid #666;
    border-radius: 1px;	
    pointer-events: none;
	font-family: Source sans pro;
	font-size: 16px;
	color: #000000;
	max-width: 300px;
}


div.chapterText  {
	font-family: Source sans pro;
	font-size: 12px;
	position: absolute;
    padding-right: 15px;
	color: #000000;
}


div.sceneDiv	{
	border: 2px solid #666;
	border-radius: 1px;
	font-family: Source sans pro;
	font-size: 16px;
	position: absolute;
    padding: 3px;
    background-color: #ffffff;
	color: #000;
	z-index: 4;
	width: 300px;
}

.axis text {
  font: 11px Source sans pro;
  font-weight: bold;
}

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




#filterlist {
 column-count: 2;
 -webkit-column-count: 2;
 -moz-column-count: 2;
 font-size: 14px;
 background-color: #ffffff;
 margin-top: 8px;
 font-weight: bold;
 width: 90%;
 text-shadow: 1px 1px 1px #666666;
} 
ul {
display: inline-block;
width: 100%;
padding: 0px;
}


.sliderMods		{
	width:84%;
	margin:auto;
	font-size: 20px;
	margin-top:5px;
}

.sliderContainer {
  width: 80%; /* Width of the outside container */
  margin: auto;
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #0075ff; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #0075ff; /* Green background */
  cursor: pointer; /* Cursor on hover */
}




/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.toggleSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggleSlider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggleSlider {
  background-color: #0075ff;
}

input:focus + .toggleSlider {
  box-shadow: 0 0 1px #0075ff;
}

input:checked + .toggleSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.sectionSpacer	{
	margin-top: 10px;
	margin-bottom: 30px;
}

.sectionSpacer	img{
	float: left;
	padding-right: 20px;
}

.tablink	{
		font-family: Source sans pro;
		font-size: 14px;
}

.tablink.tabActive	{
	background-color: #0075ff;
	color: #ffffff;
}

text {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#narrative-chart {
}