input.slider[type=range] {
  height: 28px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 200px;
}
input.slider[type=range]:focus {
  outline: none;
}
input.slider[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 1px 1px 1px #000000;*/
  background: #2C3440;
  border-radius: 3px;
  border: 0px solid #010101;
}
input.slider[type=range]::-webkit-slider-thumb {
  /*box-shadow: 1px 1px 1px #000031;*/
  border: 1px solid #212A36;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: #2C3440;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}
input.slider[type=range]:focus::-webkit-slider-runnable-track {
  background: #5784b5;
}
input.slider[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  /*box-shadow: 1px 1px 1px #000000;*/
  background: #5784b5;
  border-radius: 3px;
  border: 0px solid #010101;
}
input.slider[type=range]::-moz-range-thumb {
  /*box-shadow: 1px 1px 1px #000031;*/
  border: 1px solid #212A36;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: #2C3440;
  cursor: pointer;
}
input.slider[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input.slider[type=range]::-ms-fill-lower {
  background: #5784b5;
  border: 0px solid #010101;
  border-radius: 6px;
  /*box-shadow: 1px 1px 1px #000000;*/
}
input.slider[type=range]::-ms-fill-upper {
  background: #5784b5;
  border: 0px solid #010101;
  border-radius: 6px;
  /*box-shadow: 1px 1px 1px #000000;*/
}
input.slider[type=range]::-ms-thumb {
  margin-top: 1px;
  /*box-shadow: 1px 1px 1px #000031;*/
  border: 1px solid #212A36;
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: #2C3440;
  cursor: pointer;
}
input.slider[type=range]:focus::-ms-fill-lower {
  background: #5784b5;
}
input.slider[type=range]:focus::-ms-fill-upper {
  background: #5784b5;
}

.graph-toolbar {
  position: absolute;
  height: 45px;
  /* background-color: #1d242d; */
  padding: 0 20px;
}

.graph-toolbar .zoom-slider {
  display: inline;
  width: 200px;
  background-color: transparent;
  margin-left: 30px;
  box-shadow: none;
}

.graph-toolbar .graph-tool-btn {
  position: relative;
  display: inline;
  top: -5px;
  color: rgba(255, 255, 255, 0.2);
  margin-left: 20px;
  font-size: 19px;
}

.graph-toolbar .search {
  float: left;
  width: 200px;
  margin: 7px 20px;
}

.graph-toolbar input,
.graph-toolbar .input-group-addon {
    background-color: #2b3341;
    color: white;
    border: none;
}

.graph-toolbar .input-group-addon {
  color: gray;
}

.graph-toolbar .info {
  position: relative;
  display: inline-block;
  top: -10px;
  margin-left: 20px;
  margin-right: 30px;
  color: white;
}

.graph-toolbar .info .nodes-number {
  margin-right: 10px;
}

.graph-toolbar .badge {
    background-color: #4b535b;
}

.node > .node-shape {
  transition: stroke 0.5s ease-in;
}

.node.highlight > .node-shape {
  stroke: greenyellow;
  transition: stroke 0.5s ease-in;
}

.node.selected > .node-shape, path.line.selected {
  stroke: greenyellow;
  stroke-width: 2px;
  /* stroke-dasharray: 5; */
  /* fill-opacity: 0.5; */
  /* animation: dash 1s linear infinite; */
}

.ring {
  opacity: 0;
}

.node.selected > .ring {
  animation: showring 0.25s linear;
  animation-fill-mode: forwards;
}

path.line:hover {
  stroke: greenyellow;
}

path.link {
  fill: none;
  stroke: #fff;
  stroke-width: 4px;
  cursor: default;
}

svg:not(.active):not(.ctrl) path.link {
  cursor: pointer;
}

path.link.selected {
  stroke-dasharray: 10,2;
}

path.link.dragline {
  pointer-events: none;
}

path.link.hidden {
  stroke-width: 0;
} 

/*    Options Menu    */
.options-btn {
  float: right;
  color: white;
  font-weight: normal;
  line-height: 45px;
  margin-left: 30px;
  opacity: 0.75;
  cursor: pointer;
}

.options-btn:hover {
  opacity: 1;
}

.options-btn > span {
  position: relative;
  top: 2px;
  margin-left: 10px;
}

.options-menu {
  position: absolute;
  display: inline-block;
  right: 50px;
  top: -160px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  list-style: none;
  width: 200px;
  background-color: #2b3341;
  color: white;
}

.options-menu > li {
  padding: 4px 0;
}

.options-menu.hidden {
  display: none;
}

.options-menu input {
  box-shadow: none;
}

.options-menu input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.options-menu input[type="range"] {
  margin-bottom: 5px;
}

.options-menu label {
  font-weight: normal;
}

.options-menu label.ckeckbox-label {
  position: relative;
  top: -4px;
  left: 5px;
  font-weight: normal;
}

.label.hovered textPath {
  fill: greenyellow!important;
}

.node .node-shape.hovered {
  stroke-width: 3px;
}

.no-link-labels .label {
  display: none;
}

@keyframes dash {
  to {
    stroke-dashoffset: 10;
  }
}

@keyframes showring {
  0%   {opacity: 0;}
  100%  {opacity: 0.5;}
}