/* The styles in this file need to be researched and/or removed when possible */

#usage {
  margin-bottom: 25px;
  height: 125px;
}

ul {
  list-style: none;
  margin: 0;
}

// should be removed and replaced by row + col-sm-6 in template
.left, .right {
  @extend .col-sm-6;
}

.dynamic-error {
  background: $body-bg;
  border: 1px solid $border-color;
  color: $brand-danger;
  margin-bottom: 0.5em;
}

/* Styling for draged network object */
#networkListSortContainer {
  display: none;
}
.networklist {
  padding: 6px;
  background: #eee;
  border: 1px solid $border-color;
  min-height: 2em;
  width: auto !important;
  @include box-sizing(border-box);
  li {
    width: 80%;
    list-style-type: none;
    margin: 6px auto;
    padding: 3px;
    background: $body-bg;
    border: 1px solid #aaa;
    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;
      right:5px;
      vertical-align: middle;
      float: right;
      &:before {
        content: "+";
      }
    }
  }
  li.ui-sortable-helper {
    background-color: #def;
  }
  li.ui-state-highlight {
    border: 1px dotted $gray-light;
    background: #efefef;
    height: 0.5em;
  }
  li:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
#selected_network {
  margin-bottom: 1.5em;
  counter-reset:v1 0;
  background: #edf9ff;
  border:1px solid #c0d9e4;
  li {
    position: relative;
    a.btn:before {
      content: "-";
    }
  }
  li:before {
    content:"NIC:"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:"NIC:";
      background-color:rgba(102,102,102,0.5);
      padding-right: 10px;
    }
    li.ui-state-highlight:before {
      content:"";
      background:transparent;
    }
  }
}

iframe {
  border: none;
}

.progress_bar {
  height: 100%;
  width: 100%;
  border: 1px solid $gray-light;
  background-color: $gray-light;
}

.progress_bar_fill,
.progress_bar_selected {
  height: 100%;
  float: left;
}

.progress_bar_fill {
  background-color: $gray;
}

.progress_bar_selected {
  background-color: $brand-primary;
  width: 0;
}

.progress_bar_over {
  background-color: $brand-danger;
}

/* ============ */
/* Known issues */
/* ============ */

/* Tables */
/* This works around a known bug in Bootstrap, the
   wrapping of button groups within the cell of a table:
       https://github.com/twbs/bootstrap/issues/3130
*/
td .btn-group {
  white-space: nowrap;

  // We want the actions column to be a small button, but
  // we can't get to the class attribute yet to customize
  // that outside of every action, including table header
  .btn {
    @extend .btn-sm;
  }

  & > .btn-group,
  & > .btn {
    float: none;
  }
}

/* Note: (hurgleburgler) this issue is closed. This might be fixed.
/* Fix tooltip z-index to show above modals. Bootstrap bug 582*/
.tooltip {
  z-index: 12000;
  word-wrap: break-word;
}

/*
Hack to allow a <div> to be wrapped around a disabled element that
needs to have a tooltip. The disabled element won't allow a JS tooltip
to receive events, so we wrap it in another tag. For some reason a
<span> also doesn't receive the events, but a <div> does. We set
display to inline-block so that existing formatting is unaffected.
*/
div.tooltip-hack {
  display: inline-block;
}

/*
Rickshaw graphs don't grow their detail box appropriately
*/
.rickshaw_graph .detail .item {
  width: auto;
}