$blue: #428BCA;
$vitrage_red: #FA3C3C;
$vitrage_orange: #fc9100;
$vitrage_yellow: #FCD20E;
$vitrage_green: #87CE53;
$vitrage_olive: #97A560;
$vitrage_gray: #AEAEAE;
$dark_gray: darkgray;

.entities-graph {
  .empty-note {
    position: absolute;
    left: 0;
    top: 48%;
    right: 0;
    text-align: center;
  }
  
  .graph-spinner {
    position: absolute;
    left: 0;
    top: 47%;
    right: 0;
    text-align: center;
    color: $blue;

  }

  .link {
    stroke-opacity: 0.8;

    &.selected {
      stroke: $blue;
      stroke-width: 2 !important;
    }
  }

  .node {

    &.selected {
      circle {
        stroke: $blue;
        stroke-width: 2px;
      }
    }

    circle {
      fill: #fff;
      stroke: $dark_gray;
      stroke-width: 1px;
    }

    .text-bg {
      fill: #ececec;
      fill-opacity: 0.8;
    }

    .pin {
      display: none;
      fill: none;
      stroke: $dark_gray;
      font: 12px FontAwesome;
    }

    &.pinned .pin{
      display: block;
    }

    .icon {
      fill: none;
      stroke: $blue;
      font: 20px FontAwesome;

      &.fill-only {
        fill: $blue;
        stroke: none;
      }

      &.red {
        stroke: $vitrage_red;
      }

      &.orange  {
        stroke: $vitrage_orange;
      }

      &.yellow  {
        stroke: $vitrage_yellow;
      }

      &.green {
        stroke: $vitrage_green;
      }

      &.olive {
        stroke: $vitrage_olive;
      }

      &.gray {
        stroke: $vitrage_gray;
      }
    }
  }
}