.project {
  background-image: url('images/hexagon-globe.svg');
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 50px;
  height: 95px;

  H4, H6 {
    padding-left: 90px;
  }

  .right {
    float: right;
    padding-right: 20px;
    padding-top: 32px;
  }

  .resource-actions BUTTON,
  .collapser {
    padding: 5px;
  }
}

.environment-graph {
  SECTION.header {
    position: relative;
    z-index: 4;
  }
}

#environment-svg {
  position: absolute;
  top: 115px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  overflow: hidden;

  .node {
    &.crosslink {
      stroke-dasharray: 5,5;
    }

    &.green rect {
      stroke: #41c77d;
    }

    &.yellow rect {
      stroke: #f3bd24;
    }

    &.red rect {
      stroke: #ff0000;
    }

    g {
      foreignobject {
        overflow: visible;
      }

      div {
        width: 110px;
        height: 70px;
        padding: 2px 5px 0 5px;

        $dark: #f8f9fa;
        $light: #ffffff;

        background: #dddddd; /* Old browsers */
        background: -moz-linear-gradient(top, $dark 0%, $dark 50%, $light 51%, $light 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$dark), color-stop(50%,$dark), color-stop(51%,$light), color-stop(100%,$light)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, $dark 0%,$dark 50%,$light 51%,$light 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, $dark 0%,$dark 50%,$light 51%,$light 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, $dark 0%,$dark 50%,$light 51%,$light 100%); /* IE10+ */
        background: linear-gradient(to bottom, $dark 0%,$dark 50%,$light 51%,$light 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$dark', endColorstr='$light',GradientType=0 ); /* IE6-9 */
      }
    }

    .label {
      color: black;
      display: initial;
      padding: initial;
      font-size: initial;
      font-weight: initial;
      line-height: initial;
      color: initial;
      text-align: center;
      white-space: initial;
      vertical-align: initial;
      border-radius: initial;

      I.icon {
        display: block;
        line-height: 0;
        font-size: 12px;
        padding: 8px 0 4px 0;
      }

      H4 {
        font-size: 13px;
      }

      .count {
        padding: 7px 0 4px 0;
        font-size: 12px;
      }

      .state {
        color: white;
        padding: 0 5px;
        font-size: 11px;
        font-weight: $bold-weight;
        text-transform: uppercase;

        &.green {
          background-color: #41c77d;
        }

        &.yellow {
          background-color: #f3bd24;
        }

        &.red {
          background-color: #ff0000;
        }
      }
    }

    rect {
      fill: #fff;
      stroke-width: 2pt;
      color: black;
    }
  }

  .edgePath {
    path.path {
      stroke: #333;
      fill: none;
      stroke-width: 1pt;
    }

    &.green path.path {
      stroke: #41c77d;
    }

    &.yellow path.path {
      stroke: #f3bd24;
    }

    &.red path.path {
      stroke: #ff0000;
    }
  }
}
