/**** Resource Topology SCSS ****/
.link {
  stroke: #999;
  stroke-width: 1.5px;
}

.node {
  cursor:pointer;

  text {
    font: 12px sans-serif;
  }
}

#resource_container {
  position:relative;
}

#stack_box {
  position: absolute;
  width: 300px;
  top: 10px;
  left: 10px;

  h3 {
    font-size: 11pt;
    line-height: 20px;
  }

  p {
    margin: 0;
    font-size: 9pt;
    line-height: 14px;
  }

  a {
    margin: 0;
    font-size: 9pt;
    line-height: 14px;
  }

  img {
    float:left;
  }

  // Note (hurgleburgler) Double IDs?!
  #stack_info {
    float:left;
    white-space:normal;
    width:200px;
  }
}

#info_box {
  position: absolute;
  width: 300px;
  top: 100px;
  left: 10px;

  h3 {
    font-size: 9pt;
    line-height: 20px;
  }

  p {
    margin: 0;
    font-size: 9pt;
    line-height: 14px;
  }

  a {
    margin: 0;
    font-size: 9pt;
    line-height: 14px;
  }

  .error {
    color: darken($brand-danger, 20%);
  }
}

/* Styling for draged firewall rule object */
#ruleListSortContainer {
  display: none;
}

.rulelist {
  padding: 6px;
  background: #eee;
  border: 1px solid $border-color;
  min-height: 2em;
  width: auto !important;
  @include box-sizing(border-box);

  li {
    width: 226px;
    list-style-type: none;
    margin: 6px auto;
    padding: 3px;
    background: $body-bg;
    border: 1px solid $border-color;
    line-height: 18px;
    border-radius: 3px;
    cursor: move;
    padding-left: 23px;
    background: $body-bg url(../img/drag.png) no-repeat 11px 50%;

    em {
      font-size: 0.5em;
      line-height: 1em;
      color:#999;
      font-style: normal;
      margin-left: 0.8em;
    }

    i {
      margin-right: 5px;
      vertical-align: middle;
    }

    a.btn {
      @include box-sizing(border-box);
      font-size: 11px;
      line-height: 12px;
      padding: 2px 5px 3px;
      margin-right: 1px;
      width: 18px;
      text-align: center;
      //position: absolute;
      right:5px;
      vertical-align: middle;
      float: right;
      &:before {
        content: "+";
      }
    }
  }

  li.ui-sortable-helper {
    background-color: #def;
  }

  li.ui-state-highlight {
    border: 1px dotted $border-color;
    background: #efefef;
    height: 0.5em;
  }

  li:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

#selected_rule {
  margin-bottom: 1.5em;
  counter-reset:v1 0;
  background: #edf9ff;
  border:1px solid $border-color;

  li {
    position: relative;
    a.btn {
      &:before {
        content: "-";
      }
    }
  }

  li:before {
    content:"rule:"counter(v1);
    counter-increment:v1;
    display: inline-block;
    margin-right: 5px;
    background: $gray;
    color:$body-bg;
    font-size: 90%;
    padding: 0px 4px;
    vertical-align: middle;
    border-radius: 2px;
    position: absolute;
    left: -2em;
  }

  &.dragging {
    li:before {
      content:"rule:";
      background-color:rgba(102,102,102,0.5);
      padding-right: 10px;
    }

    li.ui-state-highlight:before {
      content:"";
      background:transparent;
    }
  }
}

/* Styling for draged firewall router object */
#routerListSortContainer {
  display: none;
}

.routerlist {
  padding: 6px;
  background: #eee;
  border: 1px solid $border-color;
  min-height: 2em;
  width: auto !important;
  @include box-sizing(border-box);

  li {
    width: 226px;
    list-style-type: none;
    margin: 6px auto;
    padding: 3px;
    background: $body-bg;
    border: 1px solid $border-color;
    line-height: 18px;
    border-radius: 3px;
    cursor: move;
    padding-left: 23px;
    background: $body-bg url(../img/drag.png) no-repeat 11px 50%;

    em {
      font-size: 0.5em;
      line-height: 1em;
      color:#999;
      font-style: normal;
      margin-left: 0.8em;
    }

    i {
      margin-right: 5px;
      vertical-align: middle;
    }

    a.btn {
      @include box-sizing(border-box);
      font-size: 11px;
      line-height: 12px;
      padding: 2px 5px 3px;
      margin-right: 1px;
      width: 18px;
      text-align: center;
      //position: absolute;
      right:5px;
      vertical-align: middle;
      float: right;
      &:before {
        content: "+";
      }
    }
  }

  li.ui-sortable-helper {
    background-color: #def;
  }

  li.ui-state-highlight {
    border: 1px dotted $border-color;
    background: #efefef;
    height: 0.5em;
  }

  li:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

#selected_router {
  margin-bottom: 1.5em;
  counter-reset:v1 0;
  background: #edf9ff;
  border:1px solid $border-color;

  li {
    position: relative;

    a.btn {
      &:before {
        content: "-";
      }
    }
  }

  li:before {
    content:"router:"counter(v1);
    counter-increment:v1;
    display: inline-block;
    margin-right: 5px;
    background: $gray;
    color:$body-bg;
    font-size: 90%;
    padding: 0px 4px;
    vertical-align: middle;
    border-radius: 2px;
    position: absolute;
    left: -2em;
  }

  &.dragging {
    li:before {
      content:"router:";
      background-color:rgba(102,102,102,0.5);
      padding-right: 10px;
    }

    li.ui-state-highlight:before {
      content:"";
      background:transparent;
    }
  }
}