/* sass --watch index.scss index.css */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: gray;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

#site-header {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 24px;
  color: white;
  background-color: black;
  height: 30px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

#site-body-wrapper {
  display: flex;
  flex-direction: row;
}

#graph-control-panel {
  color: white;
  height: 765px;
  width: 20%;
  background-color: #3f3f3f;
}

#graph-area {
  height: 765px;
  width: 80%;
}

.graph-area-background {
  width: 100%;
  height: 100%;
  background-color: gray;
}

/* CONTEXT MENUS */
/* GRAPH CONTEXT MENU */
#graph-area-background-context-menu {
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: #313131;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

#add-node-image {
  margin-top: 4.7px;
}

/* NODE CONTEXT MENU */
#node-context-menu {
  position: absolute;
  height: 50px;
  width: 100px;
  background-color: #313131;
  border-radius: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 3;
}

#name-node-menu {
  position: absolute;
  height: 50px;
  width: 200px;
  background-color: #444444;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  z-index: 3;
}

#rename-node-menu {
  position: absolute;
  height: 50px;
  width: 200px;
  background-color: #444444;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  z-index: 3;
}

/* EDGE CONTEXT MENU */
#edge-context-menu {
  position: absolute;
  height: 50px;
  width: 80px;
  background-color: #313131;
  border-radius: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 3;
}

#change-edge-weight-menu {
  position: absolute;
  height: 50px;
  width: 200px;
  background-color: #444444;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  z-index: 3;
}

/* NODE, EDGES */
.node {
  /* cursor: pointer; */
  font-weight: bold;
  position: absolute;
  background-color: yellow;
  height: 50px;
  width: 50px;
  border: 3.5px black solid;
  border-radius: 25px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edge {
  border-left: 6px solid black;
  position: absolute;
  transform-origin: 0 100%;
  height: 5px;
  /* Line width of 3 */
  background: #000;
  /* This actually controls the color */
  z-index: 0;
}

.edge-weight {
  cursor: pointer;
}

/* NODE INTERACTIONS */
.focused-node {
  border: 3.5px red solid;
}

.moving-node {
  border: 3.5px green solid;
}

/* EDGE INTERACTIONS */
.hovered-edge {
  background: orange;
}

/* ALGORHYTHM STYLES */
/* BFS and DFS */
.visited-node {
  border: 3.5px blue solid;
}

.discovered-node {
  border: 3.5px green solid;
}

/* DIJKSTRA'S */
/*
    when you are visiting the lowest distance node
*/
.dijkstra-visited-node {
  border: 3.5px #00ad00 solid;
}

/*
    when you are at the lowest distance node and checking its neighbors
*/
.dijkstra-checked-edge {
  background-color: #ff9d00;
}

/*
    when you are updating a distance, highlight the old shortest path with this
*/
.dijkstra-old-path-edge {
  background-color: #ff0808;
}

/*
    when you are updating a distance, highlight the new shortest path with this
*/
.dijkstra-new-path-edge {
  background-color: #5eff00;
}

/*
    when you first update a distance (change it from infinity), highlight the path with this
*/
.dijkstra-first-new-path-edge {
  background-color: #ffee00;
}

/* PRIM'S */
.mst-tree-node {
  border: 3.5px #00ad00 solid;
}

.mst-tree-edge {
  background-color: #fff9a2;
}

.mst-checked-edge {
  background: orange;
  /* Black fill */
}

table, th,
td {
  border: 1px solid white;
}

thead,
tfoot {
  background-color: #333;
  color: #fff;
}

/*# sourceMappingURL=index.css.map */

/*# sourceMappingURL=index.css.map */