/*******************
 * Basic Styles
*******************/

.galactic-graph{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.galactic-graph *{
  box-sizing: border-box;
}

.galactic-graph .graph{
  //padding: 30px;
  width: 100%;
  height: 100%;
  position: relative;
}

.galactic-graph .nodes, .galactic-graph .edges{
  width: 100%;
  height: 100%;
  position: absolute;
}

.galactic-graph .node{
  border-radius: 50%;
  background: black;
  position: absolute;
  z-index: 2;
}

.galactic-graph .node:hover{
  cursor: pointer;
}

.galactic-graph .edge{
  height: 2px;
  margin-top: -1px;
  position: absolute;
  background: black;
  -webkit-transform-origin: 0% 50%;
  z-index: 1;
}

.galactic-graph .edge:hover{
  cursor: pointer;
}


/*******************
 * Starscape
*******************/

.galactic-graph.starscape{
  background: #101010;
}

.galactic-graph.starscape .node{
  background: white;
  box-shadow: 0px 0px 8px gray;
}

.galactic-graph.starscape .node:hover{
  box-shadow: 0px 0px 16px white;
}

.galactic-graph.starscape .edge{
  background: white;
}


/*******************
 * Circuitboard
*******************/

.galactic-graph.circuitboard{
  background: #005522;
}

.galactic-graph.circuitboard .node{
  background: #005522;
  border: 2px solid #69cd65;
}

.galactic-graph.circuitboard .node:hover{
  background: #69cd65;
}

.galactic-graph.circuitboard .edge{
  background: #69cd65;
}


/*******************
 * Futurecomputer 
*******************/

.galactic-graph.futurecomputer{
  background: #111111;
}

.galactic-graph.futurecomputer .node{
  background: #111111;
  border: 2px solid #1fc9c8;
  box-shadow: 0px 0px 0px 2px #111111;
}

.galactic-graph.futurecomputer .node:hover{
  background: #1fc9c8;
}

.galactic-graph.futurecomputer .edge{
  background: #1fc9c8;
}


/*******************
 * Sundrop
*******************/

.galactic-graph.sundrop{
  background: #4b483f;
}

.galactic-graph.sundrop .node{
  background: #FFDC00;
}

.galactic-graph.sundrop .node:hover{
  box-shadow: 0px 0px 0px 2px #FFDC00;
}

.galactic-graph.sundrop .edge{
  background: #111111;
}


/*******************
 * Reddwarf 
*******************/

.galactic-graph.reddwarf{
  background: #DDDDDD;
}

.galactic-graph.reddwarf .node{
  background: #FF4136;
}

.galactic-graph.reddwarf .node:hover{
  background: darkRed;
}

.galactic-graph.reddwarf .edge{
  background: #AAAAAA;
}


/*******************
 * Snowflake 
*******************/

.galactic-graph.snowflake{
  background: #7FDBFF;
}

.galactic-graph.snowflake .node{
  border-radius: 0%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  background: white;
  border: 2px solid #7FDBFF;
  box-shadow: 0px 0px 0px 2px white;
}

.galactic-graph.snowflake .node:hover{
  border: 2px solid white;
}

.galactic-graph.snowflake .edge{
  background: white;
}