/* Global Styles */

@font-face {
  font-family: 'BebasNeue';
  src: url('/fonts/BEBASNEUE-BOLD.OTF');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'BebasNeue';
  src: url('/fonts/BEBASNEUE-BOOK.OTF');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'BebasNeue';
  src: url('/fonts/BEBASNEUE-LIGHT.OTF');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'BebasNeue';
  src: url('/fonts/BEBASNEUE-REGULAR.OTF');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'BebasNeue';
  src: url('/fonts/BEBASNEUE-THIN.OTF');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/fonts/OpenSans-Light.ttf');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Incopins Clusters';
  src: url('/fonts/Incopins Clusters.ttf');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Incopins Clusters';
  src: url('/fonts/Incopins Clusters Bi.ttf');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Incopins Clusters';
  src: url('/fonts/Incopins Clusters b.ttf');
  font-weight: 700;
  font-style: normal;
}

/* d3-save-svg doesn't support any CSS styles that occur outside the svg, for instance the body element, which then cascades, or font-face. So, fonts, and any rules that occur higher in the CSS hierarchy than svg have to be redefined if you want them to be exported to the downloadable svg file

I tried really hard to get this working, but I couldn't get the fonts downloading with the SVG. Suspect it is something to do with the path that assets are served at under Laravel*/

svg text, svg textPath {
  font-family: 'BebasNeue';
  font-style: normal;
  text-anchor: middle;
}
svg text.labelsPillar {
  font-size: 170%;
  font-weight: 700;
}
svg text.labelsOrg {
  font-size: 110%;
  font-weight: 500;
}
.labelsPillar, .labelsOrg {
  pointer-events: none;
}
.nodes circle {
    cursor: move;
}
.links line {
  stroke: #111;
  stroke-width: 0.5pt;
  stroke-dasharray: 2;
}
.tooltip {
	display: block;
	font-family: 'OpenSans';
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 20px;
	color: #CFBBA9;
	width: auto;
  max-width: 300px;
	height: auto;
	padding: 10px;
	left: 0px;
	top: 0px;
	font-size: 80%;
	color: black;
	position: absolute;
  border
	z-index: 100;
}

.tooltip p {
  font-size: 105%;
  font-weight: 500;
  line-height: 110%;
  padding: 0 0 0 0;
}

body {
  color: #000;
}

#download {

  opacity: 0.1;

  color: #000;
  font-size: 24px;
  font-family: 'BebasNeue';

  padding: 5px;
  font-size: 120%;
  font-weight: 400;
  margin: 3%;
  border: 1px solid black;

  position: absolute;
  right: 1%;
  bottom: 1%;
}

#download:hover {
  background-color: #000;
  color: #fff;
}

.visualisation-link {
  margin: 60px 20px 0px 20px;
  display: flex;
}