/* (C) Copyright 2011-2012 Hewlett-Packard Development Company, L.P. */
/* (C) Copyright 2011-2012 Hewlett-Packard Development Company, L.P. */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-ms-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-o-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-moz-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-ms-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-o-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -webkit-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -moz-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -moz-transform: translateX(0); } }

@-ms-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -ms-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -ms-transform: translateX(0); } }

@-o-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -o-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -o-transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    transform: translateX(-10px); }

  100% {
    opacity: 1;
    transform: translateX(0); } }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -webkit-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -moz-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }

@-ms-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -ms-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -ms-transform: translateY(0); } }

@-o-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -o-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -o-transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0.7;
    transform: translateY(10px); }

  100% {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -webkit-transform: translateY(5px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -moz-transform: translateY(5px); }

  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }

@-ms-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -ms-transform: translateY(5px); }

  100% {
    opacity: 1;
    -ms-transform: translateY(0); } }

@-o-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -o-transform: translateY(5px); }

  100% {
    opacity: 1;
    -o-transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0.7;
    transform: translateY(5px); }

  100% {
    opacity: 1;
    transform: translateY(0); } }

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

.hp-device {
  border: 2px solid #ccc;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  background-image: url(data:image/gif;base64,R0lGODlhBgABAIAAAObm5v///yH5BAAHAP8ALAAAAAAGAAEAAAIChF8AOw==);
  background-repeat: repeat-y;
  padding-left: 5px; }

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

.hp-up-ports > li:last-of-type, .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;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }
  .hp-up-port > *, .hp-down-port > * {
    display: inline-block;
    vertical-align: top; }
  .hp-up-port label, .hp-down-port label {
    margin-right: 5px; }
  .hp-up-port .hp-status, .hp-down-port .hp-status {
    top: 2px;
    height: 14px;
    width: 14px; }

.hp-up-port {
  border-top: 1px solid #cccccc; }
  .hp-up-port:first-child {
    border-top: none; }

.hp-down-port {
  border-top: 1px solid #cccccc; }
  .hp-down-port:first-child {
    border-top: none; }

.hp-path-cable {
  position: relative;
  top: 12px;
  width: 20px;
  height: 13px;
  background: url("../../img/hp-piano/hp-piano-icons.png");
  background-position: -200px -140px;
  background-repeat: no-repeat; }

.hp-backplane-connect {
  width: 50px;
  height: 23px;
  background: url("../../img/hp-piano/hp-piano-icons.png");
  background-position: -140px -140px;
  background-repeat: no-repeat; }

.hp-usage {
  position: relative;
  margin: 2px 65px 0px 10px;
  height: 10px;
  width: 40px; }
  .hp-usage label {
    position: absolute;
    top: -2px;
    left: 50px;
    color: #737373; }

.hp-network-path {
  white-space: nowrap; }
  .hp-network-path > * {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px; }
    .hp-network-path > *:last-of-type {
      margin-right: 0px; }
  .hp-network-path .hp-path-stack > * {
    margin-bottom: 5px; }
  .hp-network-path .hp-path-target > * {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px; }
    .hp-network-path .hp-path-target > *:last-of-type {
      margin-right: 0px; }
  .hp-network-path .hp-switch {
    border: 2px solid #ccc;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 7px;
    background-image: url(data:image/gif;base64,R0lGODlhBgABAIAAAObm5v///yH5BAAHAP8ALAAAAAAGAAEAAAIChF8AOw==);
    background-repeat: repeat-y;
    padding-left: 5px; }
    .hp-network-path .hp-switch .hp-device {
      padding: 5px 15px;
      border: none;
      background-image: none; }

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

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

.hp-graphic-aside {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #fff;
  -webkit-box-shadow: 3px 3px 8px 0px #666666;
  -moz-box-shadow: 3px 3px 8px 0px #666666;
  box-shadow: 3px 3px 8px 0px #666666;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  background-image: url("../../img/hp-piano/close.png");
  background-position: 98% 4%;
  background-repeat: no-repeat; }
  .hp-graphic-aside.hp-thumbnail {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -o-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right; }

.hp-appliance-faces {
  position: relative;
  display: inline-block;
  border: 1px solid #d9d9d9;
  padding: 20px 40px 40px 40px;
  border-radius: 3px; }
  .hp-appliance-faces > canvas {
    position: absolute;
    top: 69px;
    z-index: 100; }
  .hp-appliance-faces > label {
    display: block;
    text-align: center;
    margin-top: -10px;
    font-size: 16px;
    color: #737373; }
  .hp-appliance-faces .hp-appliance-node {
    position: relative;
    margin: 30px 0px 20px 0px; }
    .hp-appliance-faces .hp-appliance-node > label {
      position: relative;
      top: -5px;
      color: #737373; }
  .hp-appliance-faces .hp-appliance-ports {
    background-color: #f3f3f3;
    padding: 20px;
    border: 1px solid #cccccc;
    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-faces .hp-appliance-ports .hp-appliance-port-spacer {
      display: inline-block;
      width: 20px; }
    .hp-appliance-faces .hp-appliance-ports .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-faces .hp-appliance-ports .hp-appliance-port.hp-appliance-port-status-warning {
        border-color: #f4b51e; }
      .hp-appliance-faces .hp-appliance-ports .hp-appliance-port.hp-appliance-port-status-error {
        border-color: #dc442f; }
      .hp-appliance-faces .hp-appliance-ports .hp-appliance-port.hp-appliance-port-status-ok {
        border-color: #42a425; }
      .hp-appliance-faces .hp-appliance-ports .hp-appliance-port > label {
        display: block;
        position: absolute;
        top: -20px;
        width: 40px;
        text-align: center;
        font-weight: bold; }
      .hp-appliance-faces .hp-appliance-ports .hp-appliance-port > .hp-appliance-port-use {
        display: block;
        position: absolute;
        bottom: -24px;
        color: #737373;
        font-size: 12px;
        width: 40px;
        text-align: center; }

.hp-virtual-appliance {
  display: inline-block;
  border: 2px solid #ccc;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  background-image: url(data:image/gif;base64,R0lGODlhBgABAIAAAObm5v///yH5BAAHAP8ALAAAAAAGAAEAAAIChF8AOw==);
  background-repeat: repeat-y;
  padding-left: 5px; }
  .hp-virtual-appliance label {
    text-align: center;
    display: block;
    color: #737373;
    padding: 5px 0px 0px 0px;
    font-family: 'HPRegular', Arial, Helvetica, sans-serif; }
    html.hp-high-contrast .hp-virtual-appliance label {
      color: #333333; }
  .hp-virtual-appliance .hp-aspects {
    margin: 30px 0px 0px 30px;
    text-align: left; }
    .hp-virtual-appliance .hp-aspects .hp-aspect {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      margin-right: 30px;
      margin-bottom: 30px;
      width: 130px;
      font-size: 16px; }
      .hp-virtual-appliance .hp-aspects .hp-aspect h2 {
        font-size: 18px;
        color: #737373;
        margin: 0px 0px 20px 0px;
        font-family: 'HPRegular', Arial, Helvetica, sans-serif; }
        html.hp-high-contrast .hp-virtual-appliance .hp-aspects .hp-aspect h2 {
          color: #333333; }
      .hp-virtual-appliance .hp-aspects .hp-aspect .hp-status, .hp-virtual-appliance .hp-aspects .hp-aspect .hp-value {
        display: inline-block;
        line-height: 20px; }
      .hp-virtual-appliance .hp-aspects .hp-aspect .hp-status {
        top: 3px; }
      .hp-virtual-appliance .hp-aspects .hp-aspect .hp-value {
        margin-left: 8px; }
      .hp-virtual-appliance .hp-aspects .hp-aspect .hp-error {
        display: inline-block;
        margin-top: 10px;
        padding: 10px;
        background-color: #fffdd7; }
    .hp-virtual-appliance .hp-aspects.hp-summary .hp-aspect .hp-value {
      font-size: 20px; }
  .hp-virtual-appliance.hp-small > label {
    display: none; }
  .hp-virtual-appliance.hp-small .hp-aspects {
    margin: 10px 0px 0px 10px; }
    .hp-virtual-appliance.hp-small .hp-aspects .hp-aspect {
      margin-right: 10px;
      margin-bottom: 10px;
      width: 100px;
      font-size: inherit; }
      .hp-virtual-appliance.hp-small .hp-aspects .hp-aspect h2 {
        font-size: 13px;
        margin: 0px 0px 5px 0px; }
      .hp-virtual-appliance.hp-small .hp-aspects .hp-aspect .hp-status {
        top: 4px; }
      .hp-virtual-appliance.hp-small .hp-aspects .hp-aspect .hp-value {
        margin-left: -2px; }

.hp-rack2D {
  border: 1px solid gray;
  background-color: #d3d3d3;
  position: relative;
  width: 226px;
  height: 380px;
  box-shadow: 10px 10px 20px black;
  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 {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  background-image: url(data:image/gif;base64,R0lGODlhBgABAIAAAObm5v///yH5BAAHAP8ALAAAAAAGAAEAAAIChF8AOw==);
  background-repeat: repeat-y;
  padding-left: 5px;
  min-width: 190px; }
  .hp-rack.hp-device {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px; }
    .hp-rack.hp-device > header {
      padding: 0px 15px; }
  .hp-rack > label {
    display: block;
    padding: 5px 15px; }
  .hp-rack:not(.hp-device) > header {
    padding: 10px 15px; }
    .hp-rack:not(.hp-device) > header .hp-status, .hp-rack:not(.hp-device) > header .hp-device-name {
      display: inline-block;
      vertical-align: top;
      top: 3px; }
    .hp-rack:not(.hp-device) > header .hp-status {
      top: 1px; }
  .hp-rack.hp-selected > header {
    background-color: #d6eef8; }
  .hp-rack.hp-collapsed header {
    border-bottom: none; }
  .hp-rack.hp-collapsed > ol {
    display: none; }
  .hp-rack .hp-rack-devices > li {
    border-top: 1px solid #cccccc; }
  .hp-rack .hp-device {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 15px;
    width: 200px;
    border: none;
    border-radius: 0px;
    background-image: none; }
    .hp-rack .hp-device.hp-rack-2u {
      padding: 2px 15px; }
    .hp-rack .hp-device.hp-rack-1u {
      padding: 0px 15px; }
    .hp-filter-pane .hp-rack .hp-device {
      width: 160px; }
  .hp-rack .hp-device-topUSlot ~ .hp-device {
    display: inline-block; }
  .hp-rack .hp-rack-devices .hp-device-topUSlot {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    border-top: 1px solid #cccccc;
    display: inline-block;
    text-align: right;
    width: 20px;
    color: #333333;
    padding: 0px 8px 0px 5px;
    vertical-align: top; }
  .hp-rack .hp-enclosure {
    border: none;
    background-image: none; }
  .hp-rack .hp-rack-empty {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 15px;
    min-width: 190px;
    vertical-align: middle;
    background-color: #f2f2f2;
    border-top: 1px solid #cccccc; }
    .hp-filter-pane .hp-rack .hp-rack-empty {
      min-width: 160px; }
    .hp-rack .hp-rack-empty label {
      color: #999; }
  .hp-rack .hp-rack-1u {
    height: 15px; }
  .hp-rack .hp-rack-2u {
    height: 30px; }
  .hp-rack .hp-rack-3u {
    height: 45px; }
  .hp-rack .hp-rack-4u {
    height: 60px; }
  .hp-rack .hp-rack-5u {
    height: 75px; }
  .hp-rack .hp-rack-6u {
    height: 90px; }
  .hp-rack .hp-rack-7u {
    height: 105px; }
  .hp-rack .hp-rack-8u {
    height: 120px; }
  .hp-rack .hp-rack-9u {
    height: 135px; }
  .hp-rack .hp-rack-10u {
    height: 150px; }
  .hp-rack .hp-rack-11u {
    height: 165px; }
  .hp-rack .hp-rack-12u {
    height: 180px; }
  .hp-rack .hp-rack-13u {
    height: 195px; }
  .hp-rack .hp-rack-14u {
    height: 210px; }
  .hp-rack .hp-rack-15u {
    height: 225px; }
  .hp-rack .hp-rack-16u {
    height: 240px; }
  .hp-rack .hp-rack-17u {
    height: 255px; }
  .hp-rack .hp-rack-18u {
    height: 270px; }
  .hp-rack .hp-rack-19u {
    height: 285px; }
  .hp-rack .hp-rack-20u {
    height: 300px; }
  .hp-rack .hp-rack-21u {
    height: 315px; }
  .hp-rack .hp-rack-22u {
    height: 330px; }
  .hp-rack .hp-rack-23u {
    height: 345px; }
  .hp-rack .hp-rack-24u {
    height: 360px; }
  .hp-rack .hp-rack-25u {
    height: 375px; }
  .hp-rack .hp-rack-26u {
    height: 390px; }
  .hp-rack .hp-rack-27u {
    height: 405px; }
  .hp-rack .hp-rack-28u {
    height: 420px; }
  .hp-rack .hp-rack-29u {
    height: 435px; }
  .hp-rack .hp-rack-30u {
    height: 450px; }
  .hp-rack .hp-rack-31u {
    height: 465px; }
  .hp-rack .hp-rack-32u {
    height: 480px; }
  .hp-rack .hp-rack-33u {
    height: 495px; }
  .hp-rack .hp-rack-34u {
    height: 510px; }
  .hp-rack .hp-rack-35u {
    height: 525px; }
  .hp-rack .hp-rack-36u {
    height: 540px; }
  .hp-rack .hp-rack-37u {
    height: 555px; }
  .hp-rack .hp-rack-38u {
    height: 570px; }
  .hp-rack .hp-rack-39u {
    height: 585px; }
  .hp-rack .hp-rack-40u {
    height: 600px; }
  .hp-rack .hp-rack-41u {
    height: 615px; }
  .hp-rack .hp-rack-42u {
    height: 630px; }
  .hp-rack .hp-rack-43u {
    height: 645px; }
  .hp-rack .hp-rack-44u {
    height: 660px; }
  .hp-rack .hp-rack-45u {
    height: 675px; }
  .hp-rack .hp-rack-46u {
    height: 690px; }
  .hp-rack .hp-rack-47u {
    height: 705px; }
  .hp-rack .hp-rack-48u {
    height: 720px; }
  .hp-rack .hp-rack-49u {
    height: 735px; }
  .hp-rack .hp-rack-50u {
    height: 750px; }
  .hp-rack .hp-rack-divider {
    height: 1px;
    background-color: #cccccc; }

.hp-datacenter-device {
  position: relative;
  height: 26px;
  margin-bottom: 5px;
  padding: 1px 1px 1px 1px;
  white-space: nowrap;
  cursor: pointer; }
  .hp-datacenter-device:last-of-type {
    margin-bottom: 0px; }
  .hp-datacenter-device.hp-active {
    background-color: #ffd; }
  .hp-datacenter-device .hp-status, .hp-datacenter-device .hp-device-name, .hp-datacenter-device .hp-usage {
    display: inline-block;
    vertical-align: top; }
  .hp-datacenter-device .hp-full {
    position: absolute;
    display: none; }
  .hp-datacenter-device:hover .hp-full {
    display: block;
    top: -8px;
    left: 15px;
    width: 200px;
    background: #fff;
    z-index: 2;
    border-radius: 3px;
    -webkit-box-shadow: 3px 3px 8px 0px #666666;
    -moz-box-shadow: 3px 3px 8px 0px #666666;
    box-shadow: 3px 3px 8px 0px #666666;
    padding: 10px;
    text-align: left;
    -webkit-animation: 0.5s ease;
    -moz-animation: 0.5s ease;
    -ms-animation: 0.5s ease;
    -o-animation: 0.5s ease;
    animation: 0.5s ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -ms-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft; }
    .hp-datacenter-device:hover .hp-full: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-datacenter-device:hover .hp-full .hp-usage {
      position: absolute;
      top: 10px;
      right: 0px; }
      .hp-datacenter-device:hover .hp-full .hp-usage label {
        left: -60px;
        color: #333333; }
    .hp-datacenter-device:hover .hp-full .hp-device-metric {
      margin-top: 5px;
      margin-left: 5px; }

.hp-datacenter-metric-PopUp {
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px; }
  .hp-datacenter-metric-PopUp .vis-legend {
    position: absolute;
    padding: 5px;
    width: auto;
    height: auto;
    background-color: white;
    border: 1px solid #d9d9d9;
    text-align: center;
    -webkit-transition: bottom 0.3s;
    -moz-transition: bottom 0.3s;
    transition: bottom 0.3s; }
    .hp-datacenter-metric-PopUp .vis-legend label {
      white-space: pre-line;
      color: #737373; }

.hp-datacenter-metric-thermalDataLegend {
  position: relative;
  width: 25px;
  height: 75px; }

.hp-enclosure {
  display: inline-block;
  border: 2px solid #ccc;
  border-top-right-radius: 7px;
  border-bottom-left-radius: 7px;
  background-image: url(data:image/gif;base64,R0lGODlhBgABAIAAAObm5v///yH5BAAHAP8ALAAAAAAGAAEAAAIChF8AOw==);
  background-repeat: repeat-y;
  padding-left: 5px;
  -webkit-transition: -webkit-transform 1.5s ease-in-out 0s;
  -moz-transition: -webkit-transform 1.5s ease-in-out 0s;
  transition: -webkit-transform 1.5s ease-in-out 0s;
  -webkit-transition: -moz-transform 1.5s ease-in-out 0s;
  -moz-transition: -moz-transform 1.5s ease-in-out 0s;
  transition: -moz-transform 1.5s ease-in-out 0s; }
  .hp-enclosure a {
    cursor: pointer; }
  .hp-enclosure > label {
    display: inline-block;
    padding: 7px 10px; }
  .hp-enclosure > .hp-status {
    display: inline-block;
    margin-left: 10px;
    top: 5px; }
  .hp-enclosure .hp-device-views {
    float: right;
    margin: 5px 14px 0px 5px; }
    .hp-enclosure .hp-device-views > li {
      display: inline-block;
      padding: 0px 5px;
      border-left: 1px solid #d9d9d9; }
      .hp-enclosure .hp-device-views > li:first-of-type {
        border-left: none; }
      .hp-enclosure .hp-device-views > li a {
        cursor: pointer; }
  .hp-enclosure.hp-vertical .hp-bays-set {
    margin: 5px 10px;
    white-space: nowrap; }
    .hp-enclosure.hp-vertical .hp-bays-set > li {
      position: relative;
      left: 0px;
      display: inline-block;
      margin-right: 10px;
      -webkit-transition: left 1s ease-in-out 1.5s;
      -moz-transition: left 1s ease-in-out 1.5s;
      transition: left 1s ease-in-out 1.5s; }
  .hp-enclosure.hp-vertical .hp-bay {
    display: block;
    white-space: nowrap; }
    .hp-enclosure.hp-vertical .hp-bay > * {
      display: inline-block; }
    .hp-enclosure.hp-vertical .hp-bay .hp-device {
      background-image: none; }
    .hp-enclosure.hp-vertical .hp-bay.hp-full-height:after {
      content: '';
      position: absolute;
      right: -14px;
      top: -1px;
      height: 37px;
      width: 14px;
      border-top: 3px solid #cccccc;
      border-bottom: 3px solid #cccccc; }
    .hp-enclosure.hp-vertical .hp-bay.hp-full-height .hp-device {
      width: 561px;
      margin-right: -321px; }
  .hp-enclosure.hp-horizontal .hp-bays-set > * {
    display: block;
    margin-bottom: 8px; }
  .hp-enclosure.hp-horizontal .hp-bays {
    white-space: nowrap;
    font-size: 0px; }
  .hp-enclosure.hp-horizontal .hp-bay {
    display: inline-block;
    font-size: 13px; }
    .hp-enclosure.hp-horizontal .hp-bay > * {
      display: block; }
    .hp-enclosure.hp-horizontal .hp-bay .hp-status {
      left: 5px; }
      .hp-enclosure.hp-horizontal .hp-bay .hp-status.hp-changing {
        height: 30px;
        width: 14px; }
        .hp-enclosure.hp-horizontal .hp-bay .hp-status.hp-changing > * {
          display: block; }
        .hp-enclosure.hp-horizontal .hp-bay .hp-status.hp-changing .hp-status-changing {
          top: 0px;
          left: -3px; }
    .hp-enclosure.hp-horizontal .hp-bay.hp-full-height:after {
      content: '';
      position: absolute;
      bottom: -14px;
      left: -1px;
      height: 14px;
      width: 41px;
      border-left: 3px solid #cccccc;
      border-right: 3px solid #cccccc;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box; }
    .hp-enclosure.hp-horizontal .hp-bay.hp-full-height .hp-device {
      width: 20px;
      margin-right: 0px; }
  .hp-enclosure.hp-physical {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 630px;
    height: 630px; }
    .hp-enclosure.hp-physical .hp-bays-set {
      position: relative; }
      .hp-enclosure.hp-physical .hp-bays-set > li:first-of-type {
        position: relative;
        left: 315px; }
      .hp-enclosure.hp-physical .hp-bays-set > li:last-of-type {
        position: relative;
        left: -315px; }
    .hp-enclosure.hp-physical .hp-bay.hp-full-height:after {
      content: '';
      display: none; }
    .hp-enclosure.hp-physical .hp-bay.hp-full-height .hp-device {
      width: 240px;
      margin-right: 0px; }
  .hp-enclosure .hp-bay {
    position: relative;
    height: 42px;
    border-top: 1px solid #cccccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box; }
    .hp-enclosure .hp-bay:first-of-type {
      border-top: none; }
    .hp-enclosure .hp-bay > label {
      text-align: right;
      width: 20px;
      color: #737373;
      padding: 5px 8px 5px 5px;
      margin-bottom: 3px; }
    .hp-enclosure .hp-bay.hp-eclipsed > label {
      color: white; }
  .hp-enclosure .hp-device {
    position: relative;
    padding: 10px 15px;
    width: 240px;
    border: none; }
    .hp-enclosure .hp-device .hp-device-model {
      position: absolute;
      top: 10px;
      right: 15px;
      color: #737373;
      margin-top: 0px;
      max-width: 120px;
      text-overflow: ellipsis;
      overflow: hidden; }
  .hp-enclosure .hp-empty {
    padding: 10px 15px 10px 38px;
    width: 217px;
    height: 22px;
    color: #737373;
    font-style: italic; }
  .hp-enclosure.hp-small.hp-vertical .hp-bay {
    width: 80px;
    height: 28px;
    border-top: 1px solid #cccccc;
    border-left: none; }
    .hp-enclosure.hp-small.hp-vertical .hp-bay:first-of-type {
      border-top: none; }
    .hp-enclosure.hp-small.hp-vertical .hp-bay > * {
      display: inline-block;
      vertical-align: top; }
    .hp-enclosure.hp-small.hp-vertical .hp-bay:hover .hp-device, .hp-enclosure.hp-small.hp-vertical .hp-bay.hp-hover .hp-device, .hp-enclosure.hp-small.hp-vertical .hp-bay.hp-full-height:hover .hp-device, .hp-enclosure.hp-small.hp-vertical .hp-bay.hp-full-height.hp-hover .hp-device {
      left: 32px;
      top: -6px;
      -webkit-animation-name: fadeInLeft;
      -moz-animation-name: fadeInLeft;
      -ms-animation-name: fadeInLeft;
      -o-animation-name: fadeInLeft;
      animation-name: fadeInLeft; }
    .hp-enclosure.hp-small.hp-vertical .hp-bay .hp-device {
      width: 30px;
      height: 17px; }
    .hp-enclosure.hp-small.hp-vertical .hp-bay.hp-full-height:after {
      content: '';
      right: -14px;
      height: 23px;
      width: 14px; }
    .hp-enclosure.hp-small.hp-vertical .hp-bay.hp-full-height .hp-device {
      width: 124px;
      margin-right: -70px; }
  .hp-enclosure.hp-small.hp-horizontal .hp-bays {
    height: 70px; }
  .hp-enclosure.hp-small.hp-horizontal .hp-bay {
    width: 31px;
    height: 70px; }
    .hp-enclosure.hp-small.hp-horizontal .hp-bay:first-of-type {
      border-left: none; }
    .hp-enclosure.hp-small.hp-horizontal .hp-bay:last-of-type {
      margin-right: 0px; }
    .hp-enclosure.hp-small.hp-horizontal .hp-bay:hover .hp-device, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-hover .hp-device, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height:hover .hp-device, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height.hp-hover .hp-device {
      left: -6px;
      top: 22px;
      -webkit-animation-name: fadeInDown;
      -moz-animation-name: fadeInDown;
      -ms-animation-name: fadeInDown;
      -o-animation-name: fadeInDown;
      animation-name: fadeInDown; }
      .hp-enclosure.hp-small.hp-horizontal .hp-bay:hover .hp-device .hp-status.hp-changing, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-hover .hp-device .hp-status.hp-changing, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height:hover .hp-device .hp-status.hp-changing, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height.hp-hover .hp-device .hp-status.hp-changing {
        height: 14px;
        width: 30px; }
        .hp-enclosure.hp-small.hp-horizontal .hp-bay:hover .hp-device .hp-status.hp-changing > *, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-hover .hp-device .hp-status.hp-changing > *, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height:hover .hp-device .hp-status.hp-changing > *, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height.hp-hover .hp-device .hp-status.hp-changing > * {
          display: inline-block; }
        .hp-enclosure.hp-small.hp-horizontal .hp-bay:hover .hp-device .hp-status.hp-changing .hp-status-value, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-hover .hp-device .hp-status.hp-changing .hp-status-value, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height:hover .hp-device .hp-status.hp-changing .hp-status-value, .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height.hp-hover .hp-device .hp-status.hp-changing .hp-status-value {
          margin-left: 0px;
          margin-bottom: 0px; }
    .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height:after {
      content: '';
      bottom: -8px;
      height: 8px;
      width: 32px; }
    .hp-enclosure.hp-small.hp-horizontal .hp-bay.hp-full-height .hp-device {
      width: 20px;
      margin-right: 0px; }
  .hp-rack .hp-enclosure.hp-small > label {
    padding: 7px 11px; }
  .hp-rack .hp-enclosure.hp-small .hp-bays-set {
    padding: 0px 4px; }
  .hp-rack .hp-enclosure.hp-small .hp-bays {
    border: none; }
  .hp-rack .hp-enclosure.hp-small .hp-bay {
    width: 22px; }
    .hp-rack .hp-enclosure.hp-small .hp-bay:first-of-type {
      border-left: none; }
    .hp-rack .hp-enclosure.hp-small .hp-bay label {
      padding: 4px 0px; }
    .hp-rack .hp-enclosure.hp-small .hp-bay .hp-device {
      padding: 0px; }
    .hp-rack .hp-enclosure.hp-small .hp-bay .hp-empty {
      width: 20px; }
  .hp-enclosure.hp-small .hp-bay {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-top: none;
    border-left: 1px solid #cccccc;
    vertical-align: top; }
    .hp-enclosure.hp-small .hp-bay > * {
      text-align: center; }
    .hp-enclosure.hp-small .hp-bay:hover, .hp-enclosure.hp-small .hp-bay.hp-hover, .hp-enclosure.hp-small .hp-bay.hp-full-height:hover, .hp-enclosure.hp-small .hp-bay.hp-full-height.hp-hover {
      background-color: #eee; }
      .hp-enclosure.hp-small .hp-bay:hover .hp-device, .hp-enclosure.hp-small .hp-bay.hp-hover .hp-device, .hp-enclosure.hp-small .hp-bay.hp-full-height:hover .hp-device, .hp-enclosure.hp-small .hp-bay.hp-full-height.hp-hover .hp-device {
        position: absolute;
        width: auto;
        height: 40px;
        background: #fff;
        z-index: 2;
        border: 1px solid #cccccc;
        padding: 10px;
        text-align: left;
        -webkit-animation: 0.3s ease;
        -moz-animation: 0.3s ease;
        -ms-animation: 0.3s ease;
        -o-animation: 0.3s ease;
        animation: 0.3s ease;
        -webkit-animation-fill-mode: both;
        -moz-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        -o-animation-fill-mode: both;
        animation-fill-mode: both; }
        .hp-enclosure.hp-small .hp-bay:hover .hp-device:after, .hp-enclosure.hp-small .hp-bay.hp-hover .hp-device:after, .hp-enclosure.hp-small .hp-bay.hp-full-height:hover .hp-device:after, .hp-enclosure.hp-small .hp-bay.hp-full-height.hp-hover .hp-device: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-enclosure.hp-small .hp-bay:hover .hp-device .hp-status, .hp-enclosure.hp-small .hp-bay:hover .hp-device .hp-device-name, .hp-enclosure.hp-small .hp-bay.hp-hover .hp-device .hp-status, .hp-enclosure.hp-small .hp-bay.hp-hover .hp-device .hp-device-name, .hp-enclosure.hp-small .hp-bay.hp-full-height:hover .hp-device .hp-status, .hp-enclosure.hp-small .hp-bay.hp-full-height:hover .hp-device .hp-device-name, .hp-enclosure.hp-small .hp-bay.hp-full-height.hp-hover .hp-device .hp-status, .hp-enclosure.hp-small .hp-bay.hp-full-height.hp-hover .hp-device .hp-device-name {
          display: inline-block; }
        .hp-enclosure.hp-small .hp-bay:hover .hp-device .hp-device-name, .hp-enclosure.hp-small .hp-bay.hp-hover .hp-device .hp-device-name, .hp-enclosure.hp-small .hp-bay.hp-full-height:hover .hp-device .hp-device-name, .hp-enclosure.hp-small .hp-bay.hp-full-height.hp-hover .hp-device .hp-device-name {
          padding-left: 2px; }
        .hp-enclosure.hp-small .hp-bay:hover .hp-device .hp-device-model, .hp-enclosure.hp-small .hp-bay.hp-hover .hp-device .hp-device-model, .hp-enclosure.hp-small .hp-bay.hp-full-height:hover .hp-device .hp-device-model, .hp-enclosure.hp-small .hp-bay.hp-full-height.hp-hover .hp-device .hp-device-model {
          display: block;
          float: none;
          position: static;
          padding-left: 20px;
          margin-top: 5px;
          max-width: none; }
  .hp-enclosure.hp-small .hp-device {
    width: 20px;
    height: 50px;
    padding: 5px;
    background: none;
    overflow: hidden; }
    .hp-enclosure.hp-small .hp-device > * {
      display: block; }
    .hp-enclosure.hp-small .hp-device .hp-device-name, .hp-enclosure.hp-small .hp-device .hp-device-model {
      display: none; }
  .hp-enclosure.hp-small .hp-empty {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
    width: 32px;
    height: 32px; }
    .hp-enclosure.hp-small .hp-empty .hp-unset {
      display: none; }

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

.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-switch.hp-device.hp-small .hp-status, .hp-switch.hp-device.hp-small label {
    display: inline-block; }
  .hp-switch.hp-device.hp-small .hp-up-ports {
    position: relative;
    top: 0px;
    left: 0px;
    width: auto;
    display: table;
    margin: 5px -7px 0px -7px; }
    .hp-switch.hp-device.hp-small .hp-up-ports .hp-up-port {
      display: table-cell;
      width: auto;
      height: auto;
      text-align: center;
      padding: 3px 5px; }
      .hp-switch.hp-device.hp-small .hp-up-ports .hp-up-port .hp-device-name, .hp-switch.hp-device.hp-small .hp-up-ports .hp-up-port .hp-status {
        display: block;
        padding: 0px 3px; }
      .hp-switch.hp-device.hp-small .hp-up-ports .hp-up-port .hp-status {
        top: 2px;
        left: 6px;
        margin-bottom: 3px; }

.hp-switch .hp-device {
  padding: 10px 15px; }
  .hp-switch .hp-device .hp-usage {
    display: block;
    margin: 10px 5px; }
.hp-switch .hp-up-ports .hp-up-port {
  position: relative;
  height: 26px;
  margin-bottom: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 5px 5px 7px;
  border-top: 1px solid #cccccc;
  white-space: nowrap;
  cursor: pointer; }
  .hp-switch .hp-up-ports .hp-up-port:first-child {
    border-top: none; }
  .hp-switch .hp-up-ports .hp-up-port:last-of-type {
    margin-bottom: 0px; }
  .hp-switch .hp-up-ports .hp-up-port.hp-active {
    background-color: #ffd; }
  .hp-switch .hp-up-ports .hp-up-port .hp-status, .hp-switch .hp-up-ports .hp-up-port .hp-device-name, .hp-switch .hp-up-ports .hp-up-port .hp-usage {
    display: inline-block;
    vertical-align: top; }
  .hp-switch .hp-up-ports .hp-up-port .hp-full {
    position: absolute;
    display: none; }
  .hp-switch .hp-up-ports .hp-up-port:hover {
    background-color: #eee; }
    .hp-switch .hp-up-ports .hp-up-port:hover .hp-condensed {
      opacity: 0.2; }
    .hp-switch .hp-up-ports .hp-up-port:hover .hp-full {
      display: block;
      bottom: 28px;
      left: -8px;
      width: 200px;
      background: #fff;
      z-index: 2;
      border-radius: 3px;
      -webkit-box-shadow: 3px 3px 8px 0px #666666;
      -moz-box-shadow: 3px 3px 8px 0px #666666;
      box-shadow: 3px 3px 8px 0px #666666;
      padding: 10px;
      text-align: left;
      -webkit-animation: 0.5s ease;
      -moz-animation: 0.5s ease;
      -ms-animation: 0.5s ease;
      -o-animation: 0.5s ease;
      animation: 0.5s ease;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      -o-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: fadeInUp;
      -moz-animation-name: fadeInUp;
      -ms-animation-name: fadeInUp;
      -o-animation-name: fadeInUp;
      animation-name: fadeInUp; }
      .hp-switch .hp-up-ports .hp-up-port:hover .hp-full: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-switch .hp-up-ports .hp-up-port:hover .hp-full .hp-usage {
        position: absolute;
        top: 10px;
        right: 0px; }
        .hp-switch .hp-up-ports .hp-up-port:hover .hp-full .hp-usage label {
          left: -60px;
          color: #333333; }
      .hp-switch .hp-up-ports .hp-up-port:hover .hp-full .hp-device-address, .hp-switch .hp-up-ports .hp-up-port:hover .hp-full .hp-uplink-group, .hp-switch .hp-up-ports .hp-up-port:hover .hp-full .hp-uplink-networks {
        margin-top: 5px;
        margin-left: 5px; }
.hp-switch.hp-small {
  position: relative; }
  .hp-switch.hp-small .hp-device {
    min-width: 190px;
    padding-bottom: 65px; }
    .hp-filter-pane .hp-switch.hp-small .hp-device {
      min-width: 140px; }
  .hp-switch.hp-small .hp-usage {
    display: none; }
  .hp-switch.hp-small .hp-up-ports {
    position: absolute;
    top: 40px;
    left: 13px;
    width: 100%;
    padding: 0px;
    border: none;
    white-space: nowrap; }
    .hp-filter-pane .hp-switch.hp-small .hp-up-ports {
      left: 10px; }
  .hp-switch.hp-small .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 .hp-switch.hp-small .hp-up-port {
      width: 20px;
      padding: 0px; }
    .hp-switch.hp-small .hp-up-port:last-of-type {
      border-right: none; }
    .hp-switch.hp-small .hp-up-port .hp-condensed > * {
      display: block; }
    .hp-switch.hp-small .hp-up-port .hp-condensed .hp-status {
      left: 3px;
      top: 6px; }
      .hp-switch.hp-small .hp-up-port .hp-condensed .hp-status.hp-changing {
        width: 14px;
        height: 30px; }
        .hp-switch.hp-small .hp-up-port .hp-condensed .hp-status.hp-changing > * {
          display: block; }
      .hp-switch.hp-small .hp-up-port .hp-condensed .hp-status .hp-status-value {
        position: relative;
        left: 2px; }
    .hp-switch.hp-small .hp-up-port .hp-condensed .hp-device-name, .hp-switch.hp-small .hp-up-port .hp-condensed .hp-usage {
      display: none; }

.hp-logical-switch {
  position: relative;
  padding: 10px 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }
  .hp-logical-switch > canvas {
    position: absolute;
    margin: -10px -40px; }
  .hp-logical-switch .hp-logical-uplinks {
    margin-bottom: 20px; }
    .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 50px;
      background-color: white;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      -webkit-transition: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      transition: opacity 0.2s; }
      .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink.hp-highlight {
        border-color: #666666; }
      .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink.hp-selected {
        border-color: #7fbfda; }
      .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink > h3.hp-name, .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink > label {
        display: block;
        margin: 0px 0px 10px 0px;
        padding-right: 30px;
        font-size: inherit;
        white-space: nowrap; }
      .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink div {
        color: #737373; }
      .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink .hp-controls {
        position: absolute;
        top: 5px;
        right: 0px; }
        .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink .hp-controls > * {
          display: inline-block;
          vertical-align: top;
          cursor: pointer; }
        .hp-logical-switch .hp-logical-uplinks .hp-logical-uplink .hp-controls .hp-close {
          position: relative;
          top: 2px; }
  .hp-logical-switch .hp-physical-switch-row {
    display: block;
    margin: 60px 0px 20px 0px;
    white-space: nowrap; }
  .hp-logical-switch .hp-physical-switches .hp-switch {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 20px;
    background-color: white;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s; }
    .hp-logical-switch .hp-physical-switches .hp-switch.hp-highlight {
      border-color: #666666; }
    .hp-logical-switch .hp-physical-switches .hp-switch .hp-device > .hp-name, .hp-logical-switch .hp-physical-switches .hp-switch .hp-device > label {
      position: relative;
      top: 30px; }
    .hp-logical-switch .hp-physical-switches .hp-switch .hp-up-ports {
      top: 10px; }
    .hp-logical-switch .hp-physical-switches .hp-switch.hp-device {
      margin-bottom: 0px;
      background-color: transparent; }
      .hp-logical-switch .hp-physical-switches .hp-switch.hp-device.hp-placeholder {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        padding: 20px;
        min-width: 278px;
        text-align: center; }
      .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > button, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > input {
        display: inline-block; }
      .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header {
        display: block;
        position: relative;
        margin: 0px;
        font-size: inherit; }
        .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name:first-child, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label:first-child, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header:first-child {
          top: 42px; }
        .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name > .hp-search-combo, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name > .selectBox-dropdown, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label > .hp-search-combo, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label > .selectBox-dropdown, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header > .hp-search-combo, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header > .selectBox-dropdown {
          display: block !important;
          margin: 5px 0px; }
          .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name > input > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name > .hp-search-combo > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > h3.hp-name > .selectBox-dropdown > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label > input > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label > .hp-search-combo > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > label > .selectBox-dropdown > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header > input > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header > .hp-search-combo > input, .hp-logical-switch .hp-physical-switches .hp-switch.hp-device > header > .selectBox-dropdown > input {
            width: 100%; }
      .hp-logical-switch .hp-physical-switches .hp-switch.hp-device .hp-up-ports {
        position: relative;
        top: -22px; }
        .hp-logical-switch .hp-physical-switches .hp-switch.hp-device .hp-up-ports:first-child {
          top: -7px; }
        .hp-logical-switch .hp-physical-switches .hp-switch.hp-device .hp-up-ports .hp-up-port {
          -webkit-transition: opacity 0.2s;
          -moz-transition: opacity 0.2s;
          transition: opacity 0.2s; }
  .hp-logical-switch.hp-has-highlight .hp-up-port, .hp-logical-switch.hp-has-highlight .hp-logical-uplink, .hp-logical-switch.hp-has-highlight .hp-device {
    opacity: 0.4; }
    .hp-logical-switch.hp-has-highlight .hp-up-port.hp-highlight, .hp-logical-switch.hp-has-highlight .hp-logical-uplink.hp-highlight, .hp-logical-switch.hp-has-highlight .hp-device.hp-highlight {
      opacity: 1.0;
      color: #000; }

.hp-server-context {
  position: relative; }
  .hp-server-context a {
    cursor: pointer; }
  .hp-server-context > * {
    display: table-cell;
    vertical-align: top; }
  .hp-server-context ol {
    margin: 0px; }
  .hp-server-context .hp-server {
    display: table-cell;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    border-right: 1px solid #cccccc;
    border-top-right-radius: 0; }
    .hp-server-context .hp-server > * {
      vertical-align: top; }
  .hp-server-context .hp-card {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 0px; }
  .hp-server-context .hp-server-path {
    margin-bottom: -2px; }
    .hp-server-context .hp-server-path:last-of-type {
      margin-bottom: 0px; }
    .hp-server-context .hp-server-path .hp-card {
      border-left: none; }
  .hp-server-context .hp-server-storages {
    position: absolute;
    top: 70px;
    left: 20px; }
  .hp-server-context .hp-server-storage {
    border: 2px solid #ccc;
    border-top-right-radius: 7px;
    border-bottom-left-radius: 7px;
    background-image: url(data:image/gif;base64,R0lGODlhBgABAIAAAObm5v///yH5BAAHAP8ALAAAAAAGAAEAAAIChF8AOw==);
    background-repeat: repeat-y;
    padding-left: 5px;
    margin-bottom: 5px;
    border-width: 1px; }
    .hp-server-context .hp-server-storage .hp-device {
      border-radius: 3px; }
    .hp-server-context .hp-server-storage .hp-device-size {
      color: #737373; }
  .hp-server-context.hp-small .hp-server {
    padding: 10px 20px; }
  .hp-server-context.hp-small .hp-path-stack {
    display: none; }
  .hp-server-context.hp-small .hp-network-path .hp-nic .hp-card {
    padding: 0px 5px; }
    .hp-server-context.hp-small .hp-network-path .hp-nic .hp-card > label {
      display: none; }
    .hp-server-context.hp-small .hp-network-path .hp-nic .hp-card > ol {
      margin-top: 0px; }
  .hp-server-context.hp-small .hp-port a, .hp-server-context.hp-small .hp-up-port a {
    display: none; }
  .hp-server-context.hp-small .hp-server-storages {
    top: 40px; }
    .hp-server-context.hp-small .hp-server-storages .hp-device-name {
      display: none; }