/* (C) Copyright 2020 Hewlett-Packard Enterprise Company, L.P. */
/* (C) Copyright 2020 Hewlett-Packard Enterprise 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-map-page {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px; }
  #hp-map-page .hp-master-filter .hp-drop-menu label {
    display: block; }
    #hp-map-page .hp-master-filter .hp-drop-menu label:after {
      content: '';
      background: none; }
  #hp-map-page .hp-master-filter #hp-map-history {
    max-height: 200px;
    overflow-y: auto; }
  #hp-map-page .hp-pane-header {
    position: absolute;
    top: 25px;
    height: 30px;
    line-height: 30px;
    left: 15px; }
    #hp-map-page .hp-pane-header > h1 {
      display: inline-block;
      vertical-align: top; }
    #hp-map-page .hp-pane-header > .hp-spinner {
      margin-left: 20px;
      width: auto;
      display: inline-block;
      vertical-align: top; }
      #hp-map-page .hp-pane-header > .hp-spinner > * {
        display: inline-block;
        vertical-align: middle; }
      #hp-map-page .hp-pane-header > .hp-spinner .hp-spinner-image {
        margin: 0px;
        margin-right: 10px; }
  #hp-map-page .hp-single-pane {
    position: absolute;
    top: 50px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    -webkit-transition: left 0.5s;
    -moz-transition: left 0.5s;
    transition: left 0.5s; }
  #hp-map-page.hp-filterbar-open .hp-single-pane {
    left: 215px; }
  #hp-map-page #hp-map-pane {
    position: absolute;
    top: 80px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto; }

.hp-map {
  position: relative; }
  .hp-map > canvas {
    position: absolute;
    z-index: 0; }
  .hp-map .hp-map-levels {
    white-space: nowrap;
    margin-bottom: 0px; }
    .hp-map .hp-map-levels > li {
      display: inline-block;
      vertical-align: top; }
  .hp-map.hp-vertical .hp-map-levels > li {
    display: block; }
  .hp-map.hp-vertical .hp-map-items > li {
    display: inline-block;
    vertical-align: top; }
  .hp-map .hp-map-level {
    margin: 20px; }
    .hp-map .hp-map-level.hp-empty {
      margin: 0px; }
  .hp-map .hp-map-item {
    position: relative;
    margin: 20px;
    min-width: 180px;
    padding: 5px;
    z-index: 5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s; }
    .hp-map .hp-map-item:hover {
      background-color: rgba(128, 128, 128, 0.1); }
      .hp-map .hp-map-item:hover .hp-device, .hp-map .hp-map-item:hover .hp-logical, .hp-map .hp-map-item:hover .hp-rack-devices .hp-device-topUSlot {
        border-color: black; }
    .hp-map .hp-map-item.hp-selected .hp-device, .hp-map .hp-map-item.hp-selected .hp-logical {
      background-color: #E4FFEE; }
    .hp-map .hp-map-item .hp-device, .hp-map .hp-map-item .hp-logical, .hp-map .hp-map-item .hp-device-topUSlot {
      background-color: white; }
      .hp-map .hp-map-item .hp-device .hp-status, .hp-map .hp-map-item .hp-device .hp-device-name, .hp-map .hp-map-item .hp-logical .hp-status, .hp-map .hp-map-item .hp-logical .hp-device-name, .hp-map .hp-map-item .hp-device-topUSlot .hp-status, .hp-map .hp-map-item .hp-device-topUSlot .hp-device-name {
        display: inline-block;
        vertical-align: top; }
      .hp-map .hp-map-item .hp-device .hp-status, .hp-map .hp-map-item .hp-logical .hp-status, .hp-map .hp-map-item .hp-device-topUSlot .hp-status {
        position: relative;
        top: 4px; }
      .hp-map .hp-map-item .hp-device .hp-device-model, .hp-map .hp-map-item .hp-logical .hp-device-model, .hp-map .hp-map-item .hp-device-topUSlot .hp-device-model {
        display: block;
        padding-left: 24px;
        color: #737373; }

.hp-map-dialog {
  background-color: #f3f3f3;
  -webkit-box-shadow: 3px 3px 12px 0px #999999;
  -moz-box-shadow: 3px 3px 12px 0px #999999;
  box-shadow: 3px 3px 12px 0px #999999; }
  .hp-map-dialog .hp-map-header {
    position: relative;
    padding: 10px 20px;
    font-weight: bold;
    color: #333; }
    .hp-map-dialog .hp-map-header .hp-close {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 11px;
      height: 11px;
      background: transparent url("../../img/hp-piano/close.png") no-repeat; }
  .hp-map-dialog .hp-map {
    margin: 10px 20px 20px 20px; }
    .hp-map-dialog .hp-map .hp-map-resource {
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      display: -moz-box;
      -moz-box-orient: horizontal;
      display: box;
      box-orient: horizontal;
      -moz-box-lines: single; }
      .hp-map-dialog .hp-map .hp-map-resource ol {
        margin: 0px; }
      .hp-map-dialog .hp-map .hp-map-resource .hp-map-node {
        border-radius: 3px;
        border: 1px solid #d9d9d9;
        margin: 5px 10px;
        padding: 10px;
        background-color: #fff; }