//! (C) Copyright 2011-2012 Hewlett-Packard Development Company, L.P.

@import "hp-piano-mixins";

// common styling for devices, cards, ports, connectors

.hp-device, .hp-logical {
  padding: 5px 15px;
  border: 2px solid #ccc;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  
  &.hp-placeholder {
    background-image: none;
    border-color: #eee;
  }
  
  .hp-status, .hp-device-name {
    display: inline-block;
    vertical-align: top;
    top: 3px;
  }
  .hp-status {
    .hp-status {
      top: 0px;
      left: 0px;
    }
  }
  .hp-device-model {
    display: block;
    margin-top: 3px;
    padding-left: 18px;
    color: $secondary-color;
  }
  
  .hp-filter-pane &, .hp-filter-pane .hp-rack & {
    background: none;
    padding: 5px;
  }
  
  a {
    color: $text-link-color;
    &.selectBox-dropdown {
      color: #333;
    }
  }
}

.hp-device {
  @include device-border();
}

.hp-card {
  padding: 5px 10px;
  background-color: #fff;
}

.hp-up-ports, .hp-down-ports {
  > li:last-of-type {
    margin-bottom: 0px;
  }
}

.hp-up-port, .hp-down-port {
  margin-bottom: 5px;
  padding: 5px 10px;
  min-width: 44px;
  @include box-sizing(border-box);
  > * {
    display: inline-block;
    vertical-align: top;
  }
  label {
    margin-right: 5px;
  }
  .hp-status {
    top: 2px;
    height: 14px;
    width: 14px;
  }
}

.hp-up-port {
  border-top: 1px solid $graphics-border;
  
  &:first-child {
    border-top: none;
  }
}

.hp-down-port {
  border-top: 1px solid $graphics-border;
  
  &:first-child {
    border-top: none;
  }
}

.hp-path-cable {
  position: relative;
  top: 12px;
  width: 20px;
  height: 13px;
  background: url($img-file);
  background-position: -200px -140px;
  background-repeat: no-repeat;
}

.hp-backplane-connect {
  width: 50px;
  height: 23px;
  background: url($img-file);
  background-position: -140px -140px;
  background-repeat: no-repeat;
}

.hp-usage {
  position: relative;
  margin: 2px 65px 0px 10px;
  height: 10px;
  width: 40px;
  label {
    position: absolute;
    top: -2px;
    left: 50px;
    color: $secondary-color;
  }
  .hp-utilization-meter-value-above, .hp-utilization-meter-value-below {
  }
}

// network paths

.hp-network-path {
  white-space: nowrap;
  
  > * {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    &:last-of-type {
      margin-right: 0px;
    }
  }
  
  .hp-path-stack > * {
    margin-bottom: 5px;
  }
  
  .hp-path-target > * {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    &:last-of-type {
      margin-right: 0px;
    }
  }
  
  .hp-switch {
    @include device-border();
    .hp-device {
      padding: 5px 15px;
      border: none;
      background-image: none;
    }
    .hp-up-ports {
      
    }
  }
}

.hp-nic, .hp-switch {
  
  > * {
    display: table-cell;
    vertical-align: top;
  }
  
  .hp-up-ports {
    margin-left: -4px;
    border-left: 1px solid $graphics-border;
    padding: 0px 5px;
  }
  
  .hp-down-ports {
    margin-right: -4px;
    border-right: 1px solid $graphics-border;
  }
  
  .hp-card {
    border: 2px solid $graphics-border;
    
    > label {
      display: block;
      margin-left: 8px;
    }
    
    > ol {
      margin: 5px 0px;
    }
    
    // flex nics
    .hp-port {
      padding-bottom: 5px;
      padding-left: 8px;
      padding: 5px 10px;
      border-bottom: 1px solid $graphics-border;
      
      &:last-child {
        border-bottom: none;
        margin-bottom: 0px;
      }
      
      > * {
        display: inline-block;
        vertical-align: top;
        margin-right: 5px;
      }
      
      .hp-status {
        display: inline-block;
      }
    }
  }
}

// appliance

.hp-form-section {
  position: relative;

  > * {
    vertical-align: top;
    margin-right: 40px;
  }
  .hp-graphic-aside {
    margin-right: 0px;
  }
}

.hp-graphic-aside {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #fff;
  @include box-shadow(3px, 3px, 8px, 0px, #666);
  @include transition(all, 1s);
  background-image: url('../../img/hp-piano/close.png');
  background-position: 98% 4%;
  background-repeat: no-repeat;
  
  &.hp-thumbnail {
    @include transform(scale(0.4));
    @include transform-origin(top, right);
  }
}

.hp-appliance-faces {
  position: relative;
  display: inline-block;
  border: 1px solid $primary-divider;
  padding: 20px 40px 40px 40px;
  border-radius: 3px;
  
  > canvas {
    position: absolute;
    top: 69px;
    z-index: 100;
  }
  
  > label {
    display: block;
    text-align: center;
    margin-top: -10px;
    font-size: 16px;
    color: $secondary-color;
  }
  
  .hp-appliance-node {
    position: relative;
    margin: 30px 0px 20px 0px;
    
    > label {
      position: relative;
      top: -5px;
      color: $secondary-color;
    }
  }
  
  .hp-appliance-ports {
    background-color: $secondary-background;
    padding: 20px;
    border: 1px solid $graphics-border;
    border-radius: 3px;
    background-image: url('../../img/hp-piano/card-pin.png'), url('../../img/hp-piano/card-pin.png');
    background-position: top left, top right;
    background-repeat: repeat-y, repeat-y;
    
    .hp-appliance-port-spacer {
      display: inline-block;
      width: 20px;
    }
    
    .hp-appliance-port {
      position: relative;
      display: inline-block;
      border: 3px solid #999;
      background-color: #fff;
      margin: 15px 2px;
      width: 40px;
      height: 26px;
      border-bottom: 6px dashed #999;
      
      &.hp-appliance-port-status-warning {
        border-color: $warning;
      }
      &.hp-appliance-port-status-error {
        border-color: $error;
      }
      &.hp-appliance-port-status-ok {
        border-color: $normal;
      }
      
      > label {
        display: block;
        position: absolute;
        top: -20px;
        width: 40px;
        text-align: center;
        font-weight: bold;
      }
      
      > .hp-appliance-port-use {
        display: block;
        position: absolute;
        bottom: -24px;
        color: $secondary-color;
        font-size: 12px;
        width: 40px;
        text-align: center;
      }
    }
  }
}

// virtual appliance

.hp-virtual-appliance {
  display: inline-block;
  @include device-border();
  
  label {
    text-align: center;
    display: block;
    color: $secondary-color;
    padding: 5px 0px 0px 0px;
    font-family: 'HPRegular', Arial, Helvetica, sans-serif;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  .hp-aspects {
    margin: 30px 0px 0px 30px;
    //margin: 0px;
    text-align: left;

    .hp-aspect {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      margin-right: 30px;
      margin-bottom: 30px;
      width: 130px;
      font-size: 16px;

      h2 {
        font-size: 18px;
        color: $secondary-color;
        margin: 0px 0px 20px 0px;
        font-family: 'HPRegular', Arial, Helvetica, sans-serif;

        html.hp-high-contrast & {
          color: $projection-secondary-color;
        }
      }

      .hp-status, .hp-value {
        display: inline-block;
        //vertical-align: top;
        line-height: 20px;
      }
      
      .hp-status {
        top: 3px;
      }

      .hp-value {
        margin-left: 8px;
      }

      .hp-error {
        display: inline-block;
        margin-top: 10px;
        padding: 10px;
        background-color: $attention-background;
      }
    }

    &.hp-summary .hp-aspect {
      .hp-value {
        font-size: 20px;
      }
    }
  }
  
  &.hp-small {
    > label {
      display: none;
    }
    .hp-aspects {
      margin: 10px 0px 0px 10px;
      .hp-aspect {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 100px;
        font-size: inherit;
        h2 {
          font-size: 13px;
          margin: 0px 0px 5px 0px;
        }
        .hp-status {
          top: 4px;
        }
        .hp-value {
          margin-left: -2px;
        }
      }
    }
  }
}

// hp-rack2D

.hp-rack2D{
  border: 1px solid gray;
  background-color: rgb(211, 211, 211);
  position: relative;
  width: 226px;
  height: 380px;
  box-shadow: 10px 10px 20px rgb(0, 0, 0);
  display: block;
}
.hp-rack-available-space{
  position: absolute;
  width: 224px;
  display: table;
}
.hp-rack-available-space-text{
  color: gray;
  position: relative;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.hp-rackmount{
  border: 1px solid gray;
  background-color: white;
  position: absolute;
  width: 224px;
}
.hp-rackmount-model-name{
  color: gray;
  position : absolute;
  right: 4px;
}
.hp-rackmount-name{
  color: gray;
  position : absolute;
  left: 20px;
}
.hp-rackmount-healthStatus{
  color: gray;
  position : absolute;
  left: 0px;
}

// hp-rack

.hp-rack {
  display: inline-block;
  @include box-sizing(border-box);
  @include device-border();
  min-width: 190px;

  &.hp-device {
    @include box-sizing(border-box);
    width: 200px;
    
    > header {
      padding: 0px 15px;
    }
  }
  
  > label {
    display: block;
    //font-size: 16px;
    padding: 5px 15px;
  }
  
  &:not(.hp-device) > header {
    padding: 10px 15px;
    
    .hp-status, .hp-device-name {
      display: inline-block;
      vertical-align: top;
      top: 3px;
    }
    
    .hp-status {
      top: 1px;
    }
  }
  
  &.hp-selected > header {
    background-color: $selected-background;
  }
  
  &.hp-collapsed {
    header {
      border-bottom: none;
    }
    > ol {
      display: none;
    }
  }
  
  .hp-rack-devices {
    > li {
      border-top: 1px solid $graphics-border;
    }
  }
  
  .hp-device {
    @include box-sizing(border-box);
    padding: 5px 15px;
    width: 200px;
    border: none;
    border-radius: 0px;
    background-image: none;
    
    &.hp-rack-2u {
      padding: 2px 15px;
    }
    &.hp-rack-1u {
      padding: 0px 15px;
    }
    
    .hp-filter-pane & {
      width: 160px;
    }
  }

  .hp-device-topUSlot~.hp-device {
    display: inline-block;
  }

  .hp-rack-devices .hp-device-topUSlot {
    @include box-sizing(border-box);
    border: none;
    border-top: 1px solid $graphics-border;
    display: inline-block;
    text-align: right;
    width: 20px;
    color: $primary-color;
    padding: 0px 8px 0px 5px;
    vertical-align: top;
  }
  
  .hp-enclosure {
    border: none;
    background-image: none;
  }
  
  .hp-rack-empty {
    @include box-sizing(border-box);
    padding: 10px 15px;
    min-width: 190px;
    vertical-align: middle;
    background-color: #f2f2f2;
    border-top: 1px solid $graphics-border;
    
    .hp-filter-pane & {
      min-width: 160px;
    }
    
    label {
      color: #999;
    }
  }
  
  @for $u from 1 through 50 {
    .hp-rack-#{$u * 1}u {height: #{$u * 15}px;}
  }
  
  .hp-rack-divider {
    height: 1px;
    background-color: $graphics-border;
  }
}

// hp-datacenter
.hp-datacenter-device {
  position: relative;
  height: 26px;
  margin-bottom: 5px;
  padding: 1px 1px 1px 1px;
  white-space: nowrap;
  cursor: pointer;

  &:last-of-type {
    margin-bottom: 0px;
  }

  &.hp-active {
    background-color: #ffd;
  }
  .hp-status, .hp-device-name, .hp-usage {
    display: inline-block;
    vertical-align: top;
  }

  .hp-full {
    position: absolute;
    display: none;
  }

  &:hover {
    .hp-full {
      display: block;
      top: -8px;
      left: 15px;//40px;
      width: 200px;
      background: #fff;
      z-index: 2;
      border-radius: 3px;
      @include box-shadow(3px, 3px, 8px, 0px, #666);
      padding: 10px;
      text-align: left;
      @include animation(0.5s, ease);
      @include animation-fill-mode(both);
      @include animation-name(fadeInLeft);

      &:after {
        content: "";
        position: absolute;
        top: 10px;
        left: -14px;
        bottom: auto;
        border-width: 7px 7px 7px 7px;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
        display: block;
        width: 0;
      }

      .hp-usage {
        position: absolute;
        top: 10px;
        right: 0px;
        label {
          left: -60px;
          color: $primary-color;
        }
      }

      .hp-device-metric {
        margin-top: 5px;
        margin-left: 5px;
      }
    }
  }

}

// hp-datacenter-metric
.hp-datacenter-metric-PopUp {
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;

  .vis-legend {
    position: absolute;
    padding: 5px;
    width: auto;
    height: auto;
    background-color: $primary-background;
    border: 1px solid $primary-divider;
    text-align: center;
    @include transition(bottom, 0.3s);

    label {
      white-space: pre-line;
      color: $secondary-color;
    }
  }
}

.hp-datacenter-metric-thermalDataLegend {
  //border: 1px solid $graphics-border;
  position: relative;
  width: 25px;
  height: 75px;
}

// hp-enclosure

.hp-enclosure {
  display: inline-block;
  @include device-border();
  @include transition-full(-webkit-transform, 1.5s, ease-in-out, 0s);
  @include transition-full(-moz-transform, 1.5s, ease-in-out, 0s);
  
  a {
    cursor: pointer;
  }
  
  > label {
    display: inline-block;
    padding: 7px 10px;
  }
  
  > .hp-status {
    display: inline-block;
    margin-left: 10px;
    top: 5px;
  }
  
  .hp-device-views {
    float: right;
    margin: 5px 14px 0px 5px;
    > li {
      display: inline-block;
      padding: 0px 5px;
      border-left: 1px solid $primary-divider;
      
      &:first-of-type {
        border-left: none;
      }
      
      a {
        cursor: pointer;
      }
    }
  }
  
  &.hp-vertical {
    .hp-bays-set {
      margin: 5px 10px;
      white-space: nowrap;
      > li {
        position: relative;
        left: 0px;
        display: inline-block;
        margin-right: 10px;
        @include transition-full(left, 1s, ease-in-out, 1.5s);
        &:first-child {
          //margin-left: 0px;
        }
      }
    }
    .hp-bay {
      display: block;
      white-space: nowrap;
      > * {
        display: inline-block;
      }
      .hp-device {
        background-image: none;
      }
      
      &.hp-full-height {
        &:after {
          content: '';
          position: absolute;
          right: -14px;
          top: -1px;
          height: 37px;
          width: 14px;
          border-top: 3px solid $graphics-border;
          border-bottom: 3px solid $graphics-border;
        }
        .hp-device {
          width: 561px;
          margin-right: -321px;
        }
      }
    }
  }
  
  &.hp-horizontal {
    .hp-bays-set {
      > * {
        display: block;
        margin-bottom: 8px;
      }
    }
    .hp-bays {
      white-space: nowrap;
      font-size: 0px;
    }
    .hp-bay {
      display: inline-block;
      font-size: $body-font-size;
      > * {
        display: block;
      }
      .hp-status {
        left: 5px;
        
        &.hp-changing {
          height: 30px;
          width: 14px;
          
          > * {
            display: block;
          }
          .hp-status-changing {
            top: 0px;
            left: -3px;
          }
        }
      }
      
      &.hp-full-height {
        &:after {
          content: '';
          position: absolute;
          bottom: -14px;
          left: -1px;
          height: 14px;
          width: 41px;
          border-left: 3px solid $graphics-border;
          border-right: 3px solid $graphics-border;
          @include box-sizing(border-box);
        }
        .hp-device {
          width: 20px;
          margin-right: 0px;
        }
      }
    }
  }
  
  &.hp-physical {
    @include transform(rotate(-90deg));
    width: 630px;
    height: 630px;
    .hp-bays-set {
      position: relative;
      > li {
        &:first-of-type {
          position: relative;
          left: 315px;
        }
        &:last-of-type {
          position: relative;
          left: -315px;
        }
      }
    }
    .hp-bay {
      &.hp-full-height {
        &:after {
          content: '';
          display: none;
        }
        .hp-device {
          width: 240px;
          margin-right: 0px;
        }
      }
    }
  }
  
  .hp-bays {
    //border: 1px solid $graphics-border;
  }
  
  .hp-bay {
    position: relative;
    height: 42px;
    border-top: 1px solid $graphics-border;
    @include box-sizing(border-box);
    
    &:first-of-type {
      border-top: none;
    }
    
    > label {
      text-align: right;
      width: 20px;
      color: $secondary-color;
      padding: 5px 8px 5px 5px;
      margin-bottom: 3px;
    }
    
    &.hp-eclipsed {
      > label {
        color: $primary-background; //$tertiary-color;
      }
    }
  }
  
  .hp-device {
    position: relative;
    padding: 10px 15px;
    width: 240px;
    border: none;
    
    .hp-device-model {
      position: absolute;
      top: 10px;
      right: 15px;
      color: $secondary-color;
      margin-top: 0px;
      max-width: 120px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  
  .hp-empty {
    padding: 10px 15px 10px 38px;
    width: 217px;
    height: 22px;
    //background-color: #f8f8f8;
    color: $secondary-color;
    font-style: italic;
  }
  
  &.hp-small {
    
    &.hp-vertical {
      .hp-bays {
        //border-left: 1px solid $graphics-border;
        //border-top: 1px solid $graphics-border;
      }
      .hp-bay {
        width: 80px;
        height: 28px;
        border-top: 1px solid $graphics-border;
        border-left: none;
        
        &:first-of-type {
          border-top: none;
        }
      
        > * {
          display: inline-block;
          vertical-align: top;
        }
        
        &:hover, &.hp-hover, &.hp-full-height:hover, &.hp-full-height.hp-hover {
          .hp-device {
            left: 32px;
            top: -6px;
            @include animation-name(fadeInLeft);
          }
        }
        
        .hp-device {
          width: 30px;
          height: 17px;
        }
        
        &.hp-full-height {
          &:after {
            content: '';
            right: -14px;
            height: 23px;
            width: 14px;
          }
          .hp-device {
            width: 124px;
            margin-right: -70px;
          }
        }
      }
    }
    
    &.hp-horizontal {
      .hp-bays {
        //border-top: 1px solid $graphics-border;
        //border-left: 1px solid $graphics-border;
        height: 70px;
      }
      .hp-bay {
        width: 31px;
        height: 70px;
        
        &:first-of-type {
          border-left: none;
        }
      
        &:last-of-type {
          margin-right: 0px;
        }
        
        &:hover, &.hp-hover, &.hp-full-height:hover, &.hp-full-height.hp-hover {
          .hp-device {
            left: -6px;
            top: 22px;
            @include animation-name(fadeInDown);
            
            .hp-status.hp-changing {
              height: 14px;
              width: 30px;

              > * {
                display: inline-block;
              }
              .hp-status-value {
                margin-left: 0px;
                margin-bottom: 0px;
              }
            }
          }
        }
        
        &.hp-full-height {
          &:after {
            content: '';
            bottom: -8px;
            height: 8px;
            width: 32px;
          }
          .hp-device {
            width: 20px;
            margin-right: 0px;
          }
        }
      }
    }
    
    .hp-rack & {
      >label {
        padding: 7px 11px;
      }
      .hp-bays-set {
        padding: 0px 4px;
      }
      .hp-bays {
        border: none;
      }
      .hp-bay {
        width: 22px;
        &:first-of-type {
          border-left: none;
        }
        label {
          padding: 4px 0px;
        }
        .hp-device {
          padding: 0px;
        }
        .hp-empty {
          width: 20px;
        }
      }
    }
    
    .hp-bay {
      position: relative;
      @include box-sizing(border-box);
      border-top: none;
      border-left: 1px solid $graphics-border;
      vertical-align: top;
      
      > * {
        text-align: center;
      }
      
      &:hover, &.hp-hover, &.hp-full-height:hover, &.hp-full-height.hp-hover {
        
        background-color: #eee;
        
        .hp-device {
          position: absolute;
          width: auto; ///200px;
          height: 40px;
          background: #fff;
          z-index: 2;
          border: 1px solid $graphics-border;
          //@include box-shadow(0px, 0px, 5px, 0px, #666);
          padding: 10px;
          text-align: left;
          @include animation(0.3s, ease);
          @include animation-fill-mode(both);
          
          &:after {
            content: "";
            position: absolute;
            top: -15px;
            left: 10px;
            right: auto;
            border-width: 0 7px 7px;
            border-color: #fff transparent;
            border-style: solid;
            display: block;
            width: 0;
          }
          
          .hp-status, .hp-device-name {
            display: inline-block;
          }
          .hp-device-name {
            padding-left: 2px;
          }
          .hp-device-model {
            display: block;
            float: none;
            position: static;
            padding-left: 20px;
            margin-top: 5px;
            max-width: none;
          }
        }
      }
    }
    
    .hp-device {
      width: 20px;
      height: 50px;
      padding: 5px;
      background: none;
      overflow: hidden;
      
      > * {
        display: block;
      }
      
      .hp-device-name, .hp-device-model {
        display: none;
      }
    }
    
    .hp-empty {
      @include box-sizing(border-box);
      padding: 0px;
      width: 32px;
      height: 32px;
      
      .hp-unset {
        display: none;
      }
    }
  }
}

// hp-switch

.hp-switch-context {
  white-space: nowrap;
  
  a {
    cursor: pointer;
  }
  
  > * {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
  }
  
  ol {
    margin-bottom: 0px;
  }
  
  .hp-switch-endpoints {
    
    .hp-switch-endpoint {
      position: relative;
      white-space: nowrap;
      width: 100%;
      height: 26px;
      margin-bottom: 5px;
      
      &:last-of-type {
        margin-bottom: 0px;
      }
      
      > * {
        display: inline-block;
        vertical-align: top;
        margin-right: -4px;
        &:last-of-type {
          margin-right: 0px;
        }
      }
    }
  }
  
  .hp-switch-uplink-groups {
    display: table-cell;
  }
  
  .hp-backplane-connect {
    margin-top: 20px;
  }
  
  .hp-switch-servers {
    border: 1px solid $graphics-border;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    max-width: 200px;
    @include box-sizing(border-box);
    
    .hp-switch-server {
      display: block;
      border-bottom: 1px solid $graphics-border;
      
      &:last-of-type {
        border-bottom: none;
      }
      
      &:hover {
        .hp-device {
          background-color: #ffd;
        }
      }
      
      .hp-device {
        border: none;
        background-image: none;
        padding: 5px 15px 5px 5px;
        overflow: hidden;
        
        .hp-status, .hp-device-name {
          display: inline-block;
          vertical-align: top;
          white-space: nowrap;
        }
        .hp-device-model {
          display: none; //block;
          padding-left: 24px;
          color: $secondary-color;
        }
      }
    }
  }
}

.hp-switch.hp-device.hp-small {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 7px 10px 7px 15px;
  margin-right: 20px;
  margin-bottom: 10px;
  text-align: left;
  
  .hp-status, label {
    display: inline-block;
  }
  .hp-up-ports {
    position: relative;
    top: 0px;
    left: 0px;
    width: auto; //100%;
    display: table;
    margin: 5px -7px 0px -7px;
    .hp-up-port {
      display: table-cell;
      width: auto;
      height: auto;
      text-align: center;
      padding: 3px 5px;
      .hp-device-name, .hp-status {
        display: block;
        padding: 0px 3px;
      }
      .hp-status {
        top: 2px;
        left: 6px;
        margin-bottom: 3px;
      }
    }
  }
}

// deprecated 
.hp-switch {    
  .hp-device {
    padding: 10px 15px;
    .hp-usage {
      display: block;
      margin: 10px 5px;
    }
  }
  
  .hp-up-ports {
    
    .hp-up-port {
      position: relative;
      height: 26px;
      margin-bottom: 0px;
      @include box-sizing(border-box);
      padding: 5px 5px 5px 7px;
      border-top: 1px solid $graphics-border;
      white-space: nowrap;
      cursor: pointer;
      
      &:first-child {
        border-top: none;
      }
      
      &:last-of-type {
        margin-bottom: 0px;
      }
      
      &.hp-active {
        background-color: #ffd;
      }
      
      
      .hp-status, .hp-device-name, .hp-usage {
        display: inline-block;
        vertical-align: top;
      }
    
      .hp-full {
        position: absolute;
        display: none;
      }
      
      &:hover {
        background-color: #eee;
        
        .hp-condensed {
          opacity: 0.2;
        }
        
        .hp-full {
          display: block;
          bottom: 28px;
          left: -8px;
          width: 200px;
          background: #fff;
          z-index: 2;
          border-radius: 3px;
          @include box-shadow(3px, 3px, 8px, 0px, #666);
          padding: 10px;
          text-align: left;
          @include animation(0.5s, ease);
          @include animation-fill-mode(both);
          @include animation-name(fadeInUp);
          
          &:after {
            content: "";
            position: absolute;
            bottom: -14px;
            left: 10px;
            top: auto;
            border-width: 7px 7px 7px 7px;
            border-color: #fff transparent transparent transparent;
            border-style: solid;
            display: block;
            width: 0;
          }
          
          .hp-usage {
            position: absolute;
            top: 10px;
            right: 0px;
            label {
              left: -60px;
              color: $primary-color;
            }
          }
          
          .hp-device-address, .hp-uplink-group, .hp-uplink-networks {
            margin-top: 5px;
            margin-left: 5px;
          }
        }
      }
    }
  }
  
  &.hp-small {
    position: relative;
    .hp-device {
      min-width: 190px;
      padding-bottom: 65px;
      .hp-filter-pane & {
        min-width: 140px;
      }
    }
    .hp-usage {
      display: none;
    }
    .hp-up-ports {
      position: absolute;
      top: 40px;
      left: 13px;
      width: 100%;
      padding: 0px;
      border: none;
      white-space: nowrap;
      
      .hp-filter-pane & {
        left: 10px;
      }
    }
    .hp-up-port {
      display: inline-block;
      margin-right: -4px;
      border: none;
      border-right: 1px solid #ccc;
      border-radius: 0px;
      min-width: 0px;
      height: 40px;
      width: 22px;
      padding: 0px 2px;
      
      .hp-filter-pane & {
        width: 20px;
        padding: 0px;
      }
      
      &:last-of-type {
        border-right: none;
      }
      .hp-condensed {
        > * {
          display: block;
        }
        .hp-status {
          left: 3px;
          top: 6px;
          
          &.hp-changing {
            width: 14px;
            height: 30px;
            > * {
              display: block;
            }
          }
          .hp-status-value {
            position: relative;
            left: 2px;
          }
        }
        .hp-device-name, .hp-usage {
          display: none;
        }
      } 
    }
  }
}

// hp-logical-switch
.hp-logical-switch {
  position: relative;
  padding: 10px 40px;
  @include box-sizing(border-box);
  
  > canvas {
    position: absolute;
    margin: -10px -40px;
    //z-index: 10;
    //pointer-events: none;
  }
  
  .hp-logical-uplinks {
    margin-bottom: 20px;
    
    .hp-logical-uplink {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 50px;
      background-color: $primary-background;
      //z-index: 5;
      @include box-sizing(border-box);
      cursor: pointer;
      @include transition(opacity, $appearance-duration);
      
      &.hp-highlight {
        border-color: $highlight-border;
      }
      
      &.hp-selected {
        border-color: #7fbfda;
      }
      
      > h3.hp-name, > label {
        display: block;
        margin: 0px 0px 10px 0px;
        padding-right: 30px;
        font-size: inherit;
        white-space: nowrap;
      }
      
      div {
        color: $secondary-color;
      }
      
      .hp-controls {
        position: absolute;
        top: 5px;
        right: 0px;
        > * {
          display: inline-block;
          vertical-align: top;
          cursor: pointer;
        }
        .hp-close {
          position: relative;
          top: 2px;
        }
      }
    }
  }
  
  .hp-physical-switch-row {
    display: block;
    margin: 60px 0px 20px 0px;
    white-space: nowrap;
  }
  
  .hp-physical-switches .hp-switch {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 20px;
    background-color: $primary-background;
    @include box-sizing(border-box);
    //z-index: 5;
    @include transition(opacity, $appearance-duration);
    
    &.hp-highlight {
      border-color: $highlight-border;
    }
    
    .hp-device > .hp-name, .hp-device > label {
      position: relative;
      top: 30px;
    }
    
    .hp-up-ports {
      top: 10px;
    }
    
    &.hp-device {
      margin-bottom: 0px;
      background-color: transparent;
      //border: 1px solid rgba(0, 0, 0, 0.5);
      
      &.hp-placeholder {
        @include box-sizing(border-box);
        padding: 20px;
        min-width: 278px;
        text-align: center;
      }
      
      > button, > input {
        display: inline-block;
      }
      
      > h3.hp-name, > label, > header {
        display: block;
        position: relative;
        margin: 0px;
        font-size: inherit;
        &:first-child {
          top: 42px;          
        }
        > input, > .hp-search-combo, > .selectBox-dropdown {
          display: block !important;
          margin: 5px 0px;
          > input {
            width: 100%;
          }
        }
      }
    
      .hp-up-ports {
        position: relative;
        top: -22px;
        
        &:first-child {
          top: -7px;
        }
        
        .hp-up-port {
          @include transition(opacity, $appearance-duration);
        }
      }
    }
    
  }
  
  &.hp-has-highlight {
    .hp-up-port, .hp-logical-uplink, .hp-device {
      opacity: 0.4;
      &.hp-highlight {
        opacity: 1.0;
        color: #000;
      }
    }
  }
}

// hp-server

.hp-server-context {
  position: relative;
  
  a {
    cursor: pointer;
  }
  
  > * {
    display: table-cell;
    //display: inline-block;
    vertical-align: top;
  }
  
  ol {
    margin: 0px;
  }
  
  .hp-server {
    display: table-cell;
    @include box-sizing(border-box);
    padding: 20px;
    border-right: 1px solid $graphics-border;
    border-top-right-radius: 0;
    
    > * {
      vertical-align: top;
    }
  }
  
  .hp-card {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 0px;
  }
  
  .hp-server-path {
    margin-bottom: -2px;
    &:last-of-type {
      margin-bottom: 0px;
    }
    
    .hp-card {
      border-left: none;
    }
  }
  
  .hp-server-storages {
    position: absolute;
    top: 70px;
    left: 20px;
  }
  .hp-server-storage {
    @include device-border();
    margin-bottom: 5px;
    border-width: 1px;
    .hp-device {
      border-radius: 3px;
    }
    .hp-device-size {
      color: $secondary-color;
    }
  }
  
  &.hp-small {
    .hp-server {
      padding: 10px 20px;
    }
    .hp-path-stack {
      display: none;
    }
    .hp-network-path .hp-nic .hp-card {
      padding: 0px 5px;
      > label {
        display: none;
      }
      > ol {
        margin-top: 0px;
      }
    }
    .hp-port a, .hp-up-port a {
      display: none;
    }
    .hp-server-storages {
      top: 40px;
      .hp-device-name {
        display: none;
      }
    }
  }
}