<!DOCTYPE html>
<html>

<head>
  <base href="/hpilo/">
  <meta charset=UTF-8>
  <meta http-equiv=X-UA-Compatible content="IE=edge" />
  <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
  <meta name=copyright content="© Copyright 2019-2022 Hewlett Packard Enterprise Development LP" />
  <title></title>
  <link href="/favicon.ico?v=4" rel="shortcut icon" />
  <link type=text/css href=css/jquery-ui.css rel=stylesheet media="all" />
  <link type=text/css href=css/eov.css rel=stylesheet media="all" />
  <link type=text/css href=css/application.css rel=stylesheet media="all" />
  <link type=text/css href=css/msgbox.css rel=stylesheet media="all" />
  <link type=text/css href=alt/css/style.css rel=stylesheet media="all" />
  <link type=text/css href=css/irc.css rel=stylesheet media="all" />
  <script type=text/javascript src=js/jquery.js></script>
  <script type=text/javascript src=js/jquery.eventsource.js></script>
  <script type=text/javascript src=js/jquery-ui.js></script>
  <script type=text/javascript src=js/icons.js></script>
  <script type=text/javascript src=js/iLO.js></script>
  <script type=text/javascript>
    iLOGlobal.topPage.appFrame = this, iLOGlobal.reqPathPrefix = "lang/";

    var token = iLO.getSearchValue(location.search, "token");

    $.getJSON("lang/en/strings.js", function(data) {
      jQuery.fn.localize.data.strings = data, iLOGlobal.langData.en = data, iLO.getCache({
        name: "login_session",
        callback: function(o) {
          $(document).ready(function() {
            $("#remote_console_thumbnail_wait").createWaitScreen().css({
              position: "absolute",
              paddingTop: 50,
              paddingLeft: 100,
              background: "black",
              opacity: "0.5",
              width: "256",
              height: "192"
            }), jQuery.isValidString(token) || (token = iLO.getSessionKey(), null === token && showAlertMessage({
              titleKey: "IRC.title.UnableToConnect",
              icon: myIcons.critical,
              message: iLO.translateString("IRC.error.InvalidKey"),
              closeOnClick: !1
            })), null !== token && startHtml5Irc({
              session: token,
              openCommand: 0,
              canvasId: "rc_video",
              host: iLO.Html2Text(window.location.host),
              mode: "MAXIMIZE",
              version: 4
            });
          });
        }
      });
    });
  </script>
  <script type=text/javascript src=js/hostPwr.js></script>
  <script type=text/javascript src=js/jquery.fullscreen.js></script>
  <script type=text/javascript src=js/constants.js></script>
  <script type=text/javascript src=js/cache.js></script>
  <script type=text/javascript src=js/state.js></script>
  <script type=text/javascript src=js/socket.js></script>
  <script type=text/javascript src=js/pseudo-worker.js></script>
  <script type=text/javascript src=js/ircKeyboardMouse.js></script>
  <script type=text/javascript src=js/renderer.js></script>
  <script type=text/javascript src=js/irc.js></script>
  <script type=text/javascript src=js/inputValidator.js></script>
  <script type=text/javascript src=js/VMconnection.js></script>
  <style type=text/css>
    html {
      height: 100%;
      overflow: hidden
    }

    body {
      min-height: 100%;
      align-items: center;
      justify-content: center
    }

    #appContent {
      left: 300px
    }

    #appNavigator {
      width: 300px;
      padding-right: 5px
    }

    .status-icon {
      width: 24px;
      height: 24px;
      vertical-align: middle;
      flex: 0 0 auto
    }

    .status-icon .status-icon__base {
      fill: #ccc
    }

    .status-icon-critical .status-icon__base,
    .status-icon-error .status-icon__base {
      fill: #f04953
    }

    .status-icon-warning .status-icon__base {
      fill: #ffd144
    }

    .status-icon-ok .status-icon__base {
      fill: #01a982
    }

    .status-icon.status-icon-informational .status-icon__base {
      fill: #fff
    }

    .status-icon-disabled .status-icon__base,
    .status-icon-label .status-icon__base,
    .status-icon-unknown .status-icon__base {
      fill: #ccc
    }

    .status-icon__detail {
      fill: #fff;
      stroke: #fff
    }

    .status-icon-unknown .status-icon__detail {
      fill: #ccc;
      stroke: #ccc
    }

    .toast-container-top {
      display: block !important;
      width: 100vw !important;
      z-index: 2147483647
    }

    .toast-container-bottom {
      display: block !important;
      width: 600px;
      z-index: 2147483647
    }

    * html .toast-container-top,
    .toast-container-bottom {
      position: absolute
    }

    @media screen and (max-width:44.9375em) {
      .toast-container-bottom {
        width: 100vw !important
      }
    }

    .toast-item-wrapper {
      overflow: hidden;
      position: relative
    }

    .toast-item {
      background: #eee;
      border: 0;
      opacity: .95;
      padding-bottom: 20px;
      padding-left: 0;
      padding-right: 0;
      padding-top: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center
    }

    .toast-container-top .toast-item {
      margin: 0 0 1px 0
    }

    .toast-container-bottom .toast-item {
      margin: 1px 0 0 0
    }

    .toast-item-msg {
      font-family: Metric, arial, sans-serif;
      font-size: 1.2em;
      font-weight: 400;
      color: #000;
      flex-grow: 1;
      line-height: 24px !important;
      text-align: left;
      margin-left: 10px;
      max-width: 95%
    }

    .toast-item-close {
      height: 24px;
      width: 24px;
      margin-left: 10px;
      margin-right: 10px;
      align-self: baseline;
      cursor: pointer
    }

    .toast-item-close svg {
      fill: #000 !important;
      max-width: 24px;
      max-height: 24px;
      vertical-align: middle
    }

    .toast-item-image {
      background-repeat: no-repeat;
      overflow: visible !important;
      width: 24px;
      padding-right: 20px;
      padding-left: 20px;
      margin-right: 5px;
      align-self: flex-start
    }

    .toast-item-image svg {
      overflow: visible !important;
      fill: #000 !important;
      stroke: #000 !important
    }

    .toast-position-top-right {
      position: fixed;
      right: 0;
      top: 0
    }

    .toast-position-bottom-right {
      position: fixed;
      right: 0;
      bottom: 0
    }

    .msgbox-overlay {
      z-index: 2147483647;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
      display: none
    }

    .msgbox-overlay-medium {
      opacity: .5
    }

    .msgbox-overlay-light {
      opacity: .2
    }

    .msgbox-wrapper div {
      display: block
    }

    .msgbox-wrapper {
      z-index: 2147483647;
      min-width: 100px;
      min-height: 60px;
      max-width: 100vw;
      max-height: 100vh;
      width: 525px;
      height: auto;
      border: 1px solid #000;
      background: #fff;
      position: absolute;
      display: none;
      padding: 5px 15px 5px 15px;
      box-shadow: 0 0 8px #444;
      border-radius: 4px
    }

    .msgbox-contents {
      display: block;
      padding: 10px
    }

    .msgbox-header-row {
      text-align: left;
      margin: 0 0 10px 0
    }

    .msgbox-close:hover {
      outline: 1px solid #999;
      cursor: pointer
    }

    .msgbox-close {
      float: right
    }

    .msgbox-close svg {
      margin: 6px !important;
      max-width: 24px;
      max-height: 24px
    }

    .msgbox-icon {
      display: block !important;
      float: left !important;
      height: 28px;
      width: 28px;
      overflow: visible
    }

    .msgbox-icon svg {
      overflow: visible !important
    }

    .msgbox-title {
      color: #000 !important;
      display: inline-block !important;
      line-height: inherit !important;
      vertical-align: text-top;
      margin-left: 5px;
      border: none
    }

    .msgbox-text {
      color: #000 !important;
      font-size: 1.1rem;
      line-height: 1.35em;
      text-align: left;
      margin-top: 20px;
      padding: 2px;
      display: block !important;
      overflow: auto;
      white-space: wrap
    }

    .msgbox-text svg.control-icon {
      max-height: 36px !important;
      max-width: 36px !important;
      margin-right: 10px;
      display: inline-block !important
    }

    .msgbox-text p {
      margin-top: 10px;
      margin-bottom: 10px;
      color: #000 !important;
      line-height: 1.25em
    }

    .msgbox-timer-msg {
      color: #000 !important;
      text-align: right;
      margin: 10px 0 10px 0
    }

    .msgbox-button-row {
      display: block !important;
      text-align: right;
      margin-top: 20px;
      margin-bottom: 10px
    }

    .msgbox-button-row button {
      display: inline-block !important;
      color: #000 !important;
      margin-left: 5px;
      min-width: 80px;
      min-height: 24px
    }

    .msgbox-button-row button.primary {
      color: #fff !important
    }

    .hasmenu {
      z-index: 10000000
    }

    .ui-widget.ui-widget-content {
      opacity: 1;
      min-width: 180px;
      max-width: none
    }

    video::-webkit-media-controls-panel {
      display: none !important
    }

    #thumbnail-wrapper {
      position: absolute;
      bottom: 26px;
      left: 0;
      max-height: calc(100vh - 120px);
      width: 290px;
      height: 230px;
      border: none;
      z-index: 100;
      display: none
    }

    #thumbnail-wrapper.dockedMode {
      display: flex
    }

    .videoContainer {
      position: relative;
      overflow: hidden;
      background: 0 0;
      color: #ccc;
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100%
    }

    .grommet #ircWindow.ui-dialog-content {
      margin: 0;
      padding: 0
    }

    .control {
      color: #ccc;
      position: absolute !important;
      top: 0;
      left: 0;
      z-index: 2147483647;
      overflow: visible !important;
      display: none;
      background: #1F1F1F;
      background: linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      background: -moz-linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      background: -webkit-linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      background: -o-linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      opacity: .9;
      border-bottom-left-radius: 35px;
      border-bottom-right-radius: 35px;
      padding-right: 35px;
      padding-left: 35px;
      cursor: move
    }

    .topControl {
      height: 11px;
      border-bottom: 1px solid #404040;
      padding: 1px 5px;
      background: #1F1F1F;
      background: -moz-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
      background: -webkit-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
      background: -o-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%)
    }

    .btmControl {
      clear: both;
      background: #1F1F1F;
      background: -moz-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
      background: -webkit-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%);
      background: -o-linear-gradient(top, #242424 50%, #1F1F1F 50%, #171717 100%)
    }

    .leftControl {
      margin-left: 3px
    }

    .control div.btn {
      float: left;
      width: 34px;
      padding: 0;
      cursor: pointer;
      display: none
    }

    #thumbnail-wrapper .control-icon-close,
    .control .control-icon-close {
      height: 24px;
      width: 24px
    }

    .control div.btn path,
    .control div.btn rect {
      stroke: #ccc
    }

    .control div.btn:hover path,
    .control div.btn:hover rect {
      cursor: pointer;
      stroke: #fff
    }

    #dockedButtons {
      display: flex;
      background-color: transparent
    }

    #dockedButtons button.button {
      min-width: 0;
      width: auto;
      border: none;
      flex: 0 0 auto;
      padding: 0;
      margin: 0;
      background-color: transparent
    }

    #dockedButtons button:not(.menu-vkey-button):focus,
    #dockedButtons button:not(.menu-vkey-button):hover {
      box-shadow: none;
      border: none;
      cursor: pointer
    }

    #dockedButtons div.btn {
      margin: 0 2px
    }

    #dockedButtons div.btn:hover {
      cursor: pointer
    }

    #dockedButtons div.btn path,
    #dockedButtons div.btn rect {
      stroke: #999
    }

    #dockedButtons div.btn:hover path,
    #dockedButtons div.btn:hover rect {
      stroke: #333;
      cursor: pointer
    }

    #dockedButtons button:hover path,
    #dockedButtons button:hover rect {
      stroke: #333;
      cursor: pointer
    }

    div.status-panel path {
      stroke: #ccc
    }

    .btnHotKeys svg,
    .control-icon-keyboard {
      max-width: 44px;
      max-height: 44px;
      width: 44px;
      height: 27px;
      pointer-events: none
    }

    #dockedButtons .control-icon-keyboard {
      margin-top: -5px
    }

    .btnVM .control-icon-cd {
      width: 29px;
      max-width: 30px;
      height: 30px;
      max-height: 30px;
      margin-left: 4px
    }

    #dockedButtons .btnVM .control-icon-cd {
      margin-top: -4px;
      margin-left: -4px;
      width: 34px
    }

    .btnHotKeys svg.control-icon-keyboard path {
      stroke-width: 1.25px
    }

    .btnHotKeys svg.control-icon-keyboard {
      stroke-width: 1px;
      height: 37px
    }

    div.btn:hover svg path {
      stroke: #fff
    }

    svg.control-icon {
      stroke-width: 0
    }

    .control div.text {
      font-size: 12px;
      font-weight: 700;
      line-height: 30px;
      text-align: center;
      font-family: verdana;
      width: 20px;
      border: none;
      color: #777
    }

    .control .box {
      background: 0 0
    }

    .control div.btnPin svg {
      margin-left: 3px
    }

    .control div.btnHotKeys,
    .control div.btnOptions,
    .control div.btnPin,
    .control div.btnVmMenu {
      display: flex
    }

    .control.dockedMode div.btn.dockedMode,
    .control.fullscreenMode div.btn.fullscreenMode,
    .control.windowedMode div.btn.windowedMode {
      display: flex
    }

    .control.windowedMode div.btnPin {
      display: none
    }

    div.videoContainer>div.control.dockedMode {
      display: none !important
    }

    .control div.btnPin.selected {
      border: 1px solid #000;
      border-radius: 5px;
      background-color: hsla(0, 0%, 100%, .2)
    }

    .control div.btnPin.selected svg path {
      fill: hsla(0, 0%, 100%, .7)
    }

    .control div.btnOptions {
      width: 24px;
      height: 24px;
      padding: 0;
      margin-left: 8px;
      margin-right: 3px
    }

    .control div.selected {
      font-size: 15px;
      color: #ccc
    }

    div.btnVideoContract,
    div.btnVideoDocked,
    div.btnVideoFullScreen,
    div.btnVideoMaximize,
    div.btnVideoRestore,
    div.btnVideoWindowMode {
      float: right
    }

    .control.windowedMode.maximized div.btn.restore,
    .control.windowedMode:not(.maximized) div.btn.maximize {
      display: flex
    }

    .btnVideoMaximize svg,
    .btnVideoRestore svg {
      max-width: 22px;
      max-height: 22px;
      margin-right: 1px;
      margin-left: 1px;
      margin-top: 2px
    }

    .control:not(.maximized) div.btn.restore {
      display: none
    }

    .control.maximized div.btn.maximize {
      display: none
    }

    .control div.rightControl div.btn {
      margin-top: 5px
    }

    .control div.btnVideoDocked>svg {
      vertical-align: top
    }

    .middleControl,
    .rightControl {
      overflow-x: hidden
    }

    .progress {
      width: 85%;
      height: 10px;
      position: relative;
      float: left;
      cursor: pointer;
      background: #444;
      background: -moz-linear-gradient(top, #666, #333);
      background: -webkit-linear-gradient(top, #666, #333);
      background: -o-linear-gradient(top, #666, #333);
      -moz-box-shadow: 0 2px 3px #333 inset;
      -webkit-box-shadow: 0 2px 3px #333 inset;
      box-shadow: 0 2px 3px #333 inset;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px
    }

    .progress span {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px
    }

    .timeBar {
      z-index: 10;
      width: 0;
      background: #3FB7FC;
      background: -moz-linear-gradient(top, #A0DCFF 50%, #3FB7FC 50%, #16A9FF 100%);
      background: -webkit-linear-gradient(top, #A0DCFF 50%, #3FB7FC 50%, #16A9FF 100%);
      background: -o-linear-gradient(top, #A0DCFF 50%, #3FB7FC 50%, #16A9FF 100%);
      -moz-box-shadow: 0 0 1px #fff;
      -webkit-box-shadow: 0 0 1px #fff;
      box-shadow: 0 0 1px #fff
    }

    .bufferBar {
      z-index: 5;
      width: 0;
      background: #777;
      background: -moz-linear-gradient(top, #999, #666);
      background: -webkit-linear-gradient(top, #999, #666);
      background: -o-linear-gradient(top, #999, #666);
      -moz-box-shadow: 2px 0 5px #333;
      -webkit-box-shadow: 2px 0 5px #333;
      box-shadow: 2px 0 5px #333
    }

    .time {
      width: 15%;
      float: right;
      text-align: center;
      font-size: 11px;
      line-height: 12px
    }

    .hasmenu.ui-widget-content {
      background: 0 0 !important;
      background-color: transparent !important;
      color: #000;
      border: none
    }

    .hasmenu li,
    .hasmenu ul {
      border: 0;
      padding: 0
    }

    .hasmenu .ui-state-active,
    .hasmenu .ui-widget-content .ui-state-active {
      border: none;
      background: 0 0 !important;
      background-color: #eee !important;
      color: #000;
      margin: 0
    }

    .hasmenu li {
      background-color: #999
    }

    .hasmenu li.ui-menu-divider {
      background-color: #ddd;
      margin: 0;
      padding: 1px 0
    }

    .hasmenu .ui-menu-item-wrapper,
    .hasmenu li div {
      padding: 12px 24px;
      white-space: nowrap;
      display: block;
      cursor: pointer
    }

    .hasmenu li.key-container div {
      padding: 4px 24px
    }

    .hasmenu li.key-container:first-child div {
      padding-top: 12px
    }

    .hasmenu li.key-container:last-child div {
      padding-bottom: 12px
    }

    .hasmenu.ui-menu .ui-menu-item {
      list-style-image: none;
      padding: 0;
      border: 0;
      background: 0 0 !important;
      background-color: #ddd !important;
      color: inherit;
      font-weight: 400
    }

    .hasmenu.ui-widget.ui-widget-content {
      border: 0
    }

    .hasmenu .ui-widget.ui-widget-content {
      border: 0
    }

    .hasmenu .ui-widget-header {
      font-weight: 100;
      max-width: 100%;
      font-size: 1.33em;
      line-height: 1.333
    }

    .ui-menu-item-wrapper {
      font-size: 14px
    }

    button.ui-button.ui-dialog-titlebar-close,
    button.ui-button.ui-dialog-titlebar-close:focus {
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important
    }

    button.ui-button.ui-dialog-titlebar-close svg {
      width: 14px;
      margin: 0
    }

    button.ui-button.ui-dialog-titlebar-close path {
      stroke-width: 4px
    }

    .hasmenu svg.control-icon-checkmark {
      height: 20px;
      fill: #666;
      stroke: #666
    }

    .hasmenu svg.control-icon-eject {
      fill: #666 !important;
      stroke: #666 !important
    }

    .hasmenu svg.status-icon-blank {
      height: 20px;
      width: 24px;
      margin: 0
    }

    .hasmenu svg.control-icon-checkmark polyline {
      stroke: #666
    }

    .hasmenu.irc .ui-widget-header {
      height: auto;
      font-size: 1em
    }

    .hasmenu.irc .ui-widget-header>div {
      font-size: smaller;
      padding: 6px 24px;
      opacity: .7
    }

    .ui-menu hr.ui-menu-item-wrapper {
      height: 1px;
      background: #999;
      margin: 0;
      padding: 0;
      border: 0
    }

    .key-container .ui-state-active {
      border: 0;
      background: #eee
    }

    .ui-menu button.menu-vkey-button {
      display: inline-block;
      border-radius: 10px;
      border: 2px solid #aaa;
      padding: 8px 2px;
      height: inherit;
      min-width: 38px;
      margin: 2px;
      background: 0 0;
      font-size: 12px;
      color: #000;
      text-transform: uppercase
    }

    .ui-menu button.menu-vkey-button:hover {
      display: inline-block;
      border-radius: 10px;
      border: 2px solid #666;
      padding: 8px 2px;
      height: inherit;
      min-width: 38px;
      margin: 2px;
      background: #fff;
      cursor: pointer
    }

    .ui-dialog-titlebar-close svg {
      stroke: #000 !important;
      display: block !important
    }

    #vm-url-form .form-field {
      display: block;
      border: 1px solid rgba(0, 0, 0, .15);
      padding: 20px 10px;
      text-align: left
    }

    #vm-url-form .form-field--error {
      border: 1px solid #f04953
    }

    #vm-url-form .form-field__error {
      color: #f04953;
      float: right
    }

    #vm-url-form .form-field__label {
      color: #000
    }

    #vm-url-form input {
      color: #333;
      display: inline-block;
      margin-left: 24px;
      padding-left: 0;
      width: 400px
    }

    .videoContainer .ui-dialog-titlebar {
      display: block !important
    }

    .videoContainer .ui-dialog-title {
      float: left !important;
      text-align: left !important;
      position: relative !important
    }

    .ui-dialog.hrc-dialog-window {
      border: none !important;
      outline: 0 !important;
      padding: 0;
      background: 0 0
    }

    .hrc-dialog-window,
    .ui-dialog-content {
      max-width: 100vw !important;
      max-height: calc(100% - 25px) !important
    }

    .irc-dialog {
      display: block !important
    }

    .irc-statusbar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 24px;
      line-height: 12px;
      width: 100%;
      font-size: 12px;
      font-weight: 700;
      font-family: Metric, Arial, san-serif;
      padding: 2px 10px 2px 10px;
      background: #1F1F1F;
      background: linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      background: -moz-linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      background: -webkit-linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      background: -o-linear-gradient(top, #242424 0, #1F1F1F 95%, transparent 100%);
      opacity: .9;
      color: #ccc;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      white-space: nowrap;
      box-sizing: border-box
    }

    .control-icon :not([stroke]) {
      stroke-width: 0
    }

    .status-panel circle,
    .status-panel path,
    .status-panel rect {
      stroke: #ccc
    }

    .status-panel .control-icon-power path {
      stroke: #ccc
    }

    .irc-canvas {
      width: 100%;
      background: #000
    }

    .videoContainer .irc-canvas {
      height: calc(100% - 24px);
      margin-bottom: 24px
    }

    .videoContainer.statusbar--off .irc-canvas {
      height: 100%;
      margin-bottom: 0
    }

    .videoContainer .irc-statusbar {
      display: flex;
      justify-content: space-between;
      flex-direction: row
    }

    .videoContainer.statusbar--off .irc-statusbar {
      display: none
    }

    .status-panel {
      display: inline-block;
      padding: 2px 5px 2px 5px;
      cursor: default;
      font-size: 10px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      box-sizing: border-box
    }

    .status-panel>span {
      margin: 2px 5px 2px 5px
    }

    .status-panel svg {
      cursor: default;
      vertical-align: baseline;
      stroke-width: 0
    }

    .status-panel .group1 {
      margin-right: 1px;
      margin-left: 1px
    }

    .status-panel .group1 svg {
      margin: 0
    }

    .status-panel span.vm-activity svg {
      height: 14px;
      width: 14px
    }

    .status-panel span.vm-activity.vm-active circle {
      fill: #00FF7F
    }

    .status-panel span.power-state svg {
      height: 14px;
      width: 14px
    }

    .status-panel span.health-state svg {
      height: 14px;
      width: 14px
    }

    .status-panel span.screen-capture {
      margin-right: 10px;
      padding: 0
    }

    .status-panel span.screen-capture svg {
      height: 14px;
      cursor: pointer;
      width: 16px
    }

    .status-panel span.screen-capture svg:hover path {
      stroke: #fff
    }

    .status-panel span.encryption {
      color: #ccc;
      margin-right: 24px;
      margin-left: 0
    }

    span#encryption-type {
      vertical-align: bottom
    }

    .status-panel span.encryption svg {
      width: 14px;
      height: 14px;
      margin: 0
    }

    .status-resolution {
      width: 100px;
      margin-top: auto;
      margin-bottom: auto
    }

    .status-text {
      width: auto;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text
    }

    .status-icons {
      width: auto
    }

    .pwrMenuIcon {
      width: 24px;
      height: 24px;
      border: 0;
      margin: 10px 5px 0 0;
      float: left
    }

    .pwrOff .ui-menu-item-wrapper,
    .pwrOn .ui-menu-item-wrapper {
      padding: 5px 24px
    }

    #ircWindow {
      padding: 0 !important;
      min-width: 180px
    }

    #kbd_menu {
      max-width: none
    }

    #menu_footer {
      height: 210px
    }

    button.ui-button {
      min-width: 80px;
      min-height: 24px
    }

    .videoOuter {
      align-items: stretch
    }

    .videoInner {
      width: 100vw;
      overflow: auto;
      background: #000;
      align-items: center
    }

    .videoContainer .irc-canvas {
      margin: auto;
      outline-width: 0 !important;
      width: auto;
      height: auto;
      height: max-content;
      flex-shrink: 0
    }

    .fullscreenMode .irc-canvas {
      height: 100%
    }

    .dockedButtons {
      flex-wrap: nowrap;
      align-self: flex-end;
      align-items: stretch;
      justify-content: flex-end;
      height: 27px;
      padding-top: 2px;
      width: 100%;
      background: #000
    }

    .irc-statusbar {
      padding: 0;
      border-radius: 0;
      height: 20px;
      position: relative;
      display: flex;
      justify-content: space-between
    }

    .fullscreenMode .dockedButtons {
      display: none
    }

    .fitToView .videoInner {
      width: 100%;
      height: 100%;
      align-items: stretch
    }

    .videoContainer {
      height: 100vh
    }

    .fitToView .irc-canvas {
      width: inherit;
      height: 100%;
      width: 100%;
      margin: 0;
      flex-shrink: 1;
      height: auto
    }

    .fitToView>div.windowedMode+.videoInner>.irc-canvas {
      margin-top: 35px
    }

    div.videoContainer>div.control.windowedMode {
      display: flex !important;
      top: 0;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: space-between;
      height: 35px;
      left: 0;
      z-index: 90;
      border-radius: 0;
      padding: 0;
      width: 100%
    }

    .btnVideoClose.btn svg {
      width: 24px;
      height: 24px
    }

    .btn svg {
      stroke: #999
    }

    .control.maximized:not(.fullscreenMode) {
      position: relative;
      background: #000
    }
  </style>
  <script type=text/javascript>
    function showToastMessage(options) {
      $().toastmessage('showToast', options);
    }

    function showAlertMessage(options, callback) {
      $().msgbox('alert', options, callback);
    }

    function showConfirmMessage(options, callback) {
      $().msgbox('confirm', options, callback);
    }

    windowOptions.maximized = !0;
  </script>
</head>

<body class="box grommet app-container" style=background:#000>
  <div id=videoOuter class="videoOuter box" style=flex-grow:1>

    <div id=vm-url-form class=form title="Virtual Media URL" style=display:none langkey=vm.scrMediaURL langattr=title>
      <form class=form style=display:block onsubmit="
  return !1;
">
        <div class="form-fields background-color-index-light">
          <div class="form-field form-field--text background-color-index-light">
            <span id=errorVmUrl class=form-field__error></span>
            <label class=form-field__label data-localize=vm.scrMediaURL>Virtual Media URL</label>
            <span class=form-field__contents>
              <input type=text maxlength=255 linked-error=errorVmUrl rule-list=99 validate-me=true name=disc_upload id=disc_upload custom-func=validateVmUrl msg-key=inputValidator.urlInvalid value="" />
            </span>
          </div>
        </div>
      </form>
    </div>
    <div id=videoContainer class="videoContainer fitToView box box--direction-column">
      <div class="control windowedMode maximized box" style=display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:space-between;height:35px>
        <div class=leftControl style=display:flex;align-items:stretch>
          <div class="btnPin btn fullscreenMode" title=Pin style=align-items:center></div>
          <div title=Menu class="optionsMenu box box--direction-column box--responsive box--pad-none menu menu--column menu--controlled menu__control" langkey=IRC.menu.Menu langattr=title>
            <div class="btnOptions btn windowedMode fullscreenMode" style=width:auto></div>
            <ul id=options_menu class=hasmenu style="position:absolute;font-size:16px;display:none;top:32px;background:0 0"></ul>
          </div>
          <div title="Virtual Keyboard" class="hotKeysMenu box box--direction-column box--responsive box--pad-none menu menu--column menu--controlled menu__control" langkey=IRC.label.virtualKeyboard langattr=title>
            <div class="btnHotKeys btn dockedMode windowedMode fullscreenMode" style=width:auto;margin-left:0;margin-right:-4px></div>
            <ul id=kbd_menu class=hasmenu style="position:absolute;font-size:16px;display:none;top:32px;background:0 0"></ul>
          </div>
          <div title="Virtual Media" class="vmMenu box box--direction-column box--responsive box--pad-none menu menu--column menu--controlled menu__control" langkey=IRC.label.vm langattr=title>
            <div class="btnVM btn dockedMode windowedMode fullscreenMode" style=padding:0;width:auto;margin-left:-2px;margin-top:1px>
            </div>
            <ul class=hasmenu style="position:absolute;font-size:16px;display:none;top:32px;background:0 0"></ul>
          </div>
        </div>
        <div class=middleControl style=display:flex;margin-left:25px;margin-right:25px;margin-top:5px></div>
        <div class=rightControl style=display:flex>
          <div class="btnVideoFullScreen btn dockedMode windowedMode" title="Switch to full screen" langkey=IRC.label.swFullScr langattr=title></div>
          <div class="btnVideoContract btn fullscreenMode" title="Exit full screen" langkey=IRC.label.extFullScr langattr=title></div>
          <div class="btnVideoClose btn" style=display:flex title="Close Remote Console" langkey=IRC.label.CloseFullScr langattr=title></div>
        </div>
      </div>
      <div id=videoInner class="videoInner box">
        <canvas id=rc_video class="box irc-canvas" tabindex=1 style=""></canvas>
      </div>
      <div id=remote_console_thumbnail_wait></div>
      <div id=hover-map style="position:absolute;top:0;left:0;width:100%;height:6px;background:0 0;z-index:2147483647"></div>
      <div id=irc_statusbar class=irc-statusbar>
        <div class="status-panel status-resolution" langattr=title langkey=IRC.label.ScreenResolution></div>
        <div class="status-panel status-text"></div>
        <div class="status-panel status-icons">
          <span class=screen-capture langattr=title langkey=IRC.label.ScreenCapture></span>
          <span class=encryption langattr=title langkey=IRC.status.Encryption>
            <span id=encryption-icon></span>
            <span id=encryption-type>SSL</span>
          </span>
          <span class="health-state group1" langattr=title langkey=appl.healthUnknown></span>
          <span class="vm-activity group1" langattr=title langkey=IRC.label.ActivityLED></span>
          <span class="power-state group1" langattr=title langkey=appl.pwr></span>
        </div>
      </div>
    </div>
  </div>
  <script type=text/x-jqote-template id=vm_menu_template>/*!<![CDATA[
      <li data-id="<%= this.Id %>" data-image="<%= this.Image %>" data-inserted="<%= this.Inserted %>" data-writeprotected="<%= this.WriteProtected %>">
        <div style="">
          <% if(this.Inserted){ %><%= myIcons.checkmark %><% }else{ %><%= myIcons.blank %><% } %>
          &nbsp;<span data-localize="vm.<%= this.MediaTypes[0] %>"><%= this.MediaTypes[0] %></span>
        </div>
        <ul style="position:fixed;">

          <% if(!this.Inserted){ %>
          <li data-url="<%= this.Action %>" data-cmd="insert">
            <div data-localize="vm.scrMediaURL">Virtual Media URL</div>
          </li>
          <% if(this.MediaTypes[0]==="CD"){ %>
          <li>
            <label for="upload_isofile">
              <div data-localize="vm.localIsoFile">Local *.iso file</div>
            </label>
            <input type="file" data-id="<%= this.Id %>" id="upload_isofile" style="display:none" onchange="imgFileHandler(this)" accept=".iso">
          <% }else{ %>
          <li>
            <label for="upload_imgfile">
              <div data-localize="vm.localImgFile">Local *.img file</div>
            </label>
            <input type="file" data-id="<%= this.Id %>" id="upload_imgfile" style="display:none" onchange="imgFileHandler(this)" accept=".img">
          <% } %>
          <% }else if (this.ConnectedVia==="Applet"){ %>
          <li data-id="<%= this.Id %>" onclick="ejectDevice(this)">
            <div data-localize="vm.frcEjct">Force Eject</div>
          <% }else{ %>
          <li class="ui-widget-header">
            <div><%= (this.ImageName || iLO.translateString("IRC.menu." + this.Id == 1 ? "RemovableMedia" : "FixedMedia")) %></div>
          </li>
          <li>-</li>
          <li data-url="<%= this.Action %>" data-cmd="eject">
            <div><%= myIcons.eject %>&nbsp;<span data-localize="vm.ejctMedia">Eject Media</span></div>
          <% } %>
          </li>
        </ul>
      </li>
      ]]>!*/</script>

  <script type=text/x-jqote-template id=kbd-menu-template>/*!<![CDATA[
      <% var kbd_type = iLO.getCookie("UserPref", "kbd_type"); %>
      <li data-cmd="none" class="key-container">
        <div style="display:flex;justify-content:flex-start;line-height:20px;">
          <button title="" onclick="renderer.worker.call_func('ctrl_alt_del')" onmousedown="this.style.background='#ccc'" onmouseup="this.style.background='#fff'" onmouseover="this.style.background = '#fff'" onmouseout="this.style.background='none'" class="menu-vkey-button">
            <span style="padding:0px;margin:0px;" data-localize="IRC.menu.CtrlAltDel">CTRL+ALT+DEL</span>
          </button>
        </div>
      </li>
      <% if (this.virtualkeys && this.virtualkeys.length){ %>
        <% for (var v=0; v<this.virtualkeys.length; v++){ %>
          <li data-cmd="none" class="key-container">
            <div style="display:flex;justify-content:flex-start;line-height:20px;" langKey="IRC.menu.VkTips" langAttr="title">
              <% var keygroup = this.virtualkeys[v]; %>
              <% for (var i=0; i<keygroup.length; i++){ %>
                <% var hotkey = keygroup[i]; %>
                  <button title="" onmousedown="this.style.background = '#ccc'; renderer.keyboard.send_vkey('<%= hotkey.cmd %>', 1);" onmouseup="this.style.background='#fff'; renderer.keyboard.send_vkey('<%= hotkey.cmd %>', 0);" onmouseover="this.style.background='#fff'" onmouseout="this.style.background='none'" data-cmd="<%= hotkey.cmd %>" class="menu-vkey-button">
                    <span style="padding:0px;margin:0px;" data-localize="<%= hotkey.strkey %>"><%= hotkey.label %></span>
                  </button>
              <% } %>
            </div>
          </li>
        <% } %>
      <% } %>
      <% if (this.keybds && this.keybds.length){ %>
        <li><div data-localize="IRC.menu.KbdLayout">Keyboard Layout</div>
          <ul style="z-index:10000000">
            <% for (var i=0; i<this.keybds.length; i++){ %>
              <% var kbd = this.keybds[i]; %>
              <li data-cmd="kbd_<%= kbd.type %>">
                <div style="display: flex;justify-content: space-between;">
                  <span style="width:46px;">
                    <% if(kbd_type == kbd.type){ %><%= myIcons.checkmark %><% }else{ %><%= myIcons.blank %><% } %>
                  </span>
                  <span class="kbd <%= kbd.type %>" data-localize="<%= kbd.strkey %>"><%= kbd.label %></span>
                </div>
              </li>
            <% } %>
          </ul>
        </li>
      <% } %>
      ]]>!*/</script>

  <script type=text/x-jqote-template id=hrc-ilo-menu-template>/*!<![CDATA[
      <li data-cmd="none" class="" title="">
        <div data-localize="navigation.pwr">Power</div>
        <ul>
          <li class="pwrMomentary pwrOff pwrOn" data-cmd="<%= (this.reset_priv ? 'momentary' : 'no_power_priv') %>">
            <div>
              <img src="images/pwr_press_32.png" class="pwrMenuIcon" />
              <div data-localize="IRC.menu.MomentaryPress">Momentary Press</div>
            </div>
          </li>
          <% if (this.hostpwr_state == "ON") { %>
              <li class="pwrHold pwrOn" data-cmd="<%= (this.reset_priv ? 'hold' : 'no_power_priv') %>">
                <div>
                  <img src="images/pwr_hold_32.png" class="pwrMenuIcon" />
                  <div data-localize="IRC.menu.PressHold">Press and Hold</div>
                </div>
              </li>
              <li class="pwrCold pwrOn" data-cmd="<%= (this.reset_priv ? 'cold' : 'no_power_priv') %>">
                <div>
                  <img src="images/pwr_coldboot_32.png" class="pwrMenuIcon" />
                  <div data-localize="IRC.menu.ColdBoot">Cold Boot</div>
                </div>
              </li>
              <li class="pwrReset pwrOn" data-cmd="<%= (this.reset_priv ? 'reset' : 'no_power_priv') %>">
                <div>
                  <img src="images/pwr_reset_32.png" class="pwrMenuIcon" />
                  <div data-localize="IRC.menu.Reset">Reset</div>
                </div>
              </li>
          <% } %>
        </ul>
      </li>
      <li data-cmd="none" class="" title="">
        <div data-localize="IRC.menu.Preferences">Preferences</div>
        <ul>
          <li data-cmd="statusbar">
            <div style="display: flex;justify-content: space-between;">
              <span style="width:40px;">
                <% if(show_html5_statbar){ %><%= myIcons.checkmark %><% }else{ %><%= myIcons.blank %><% } %>
              </span>
              <span data-localize="IRC.menu.ShowStatusbar">Show status bar</span>
            </div>
          </li>
        </ul>
      </li>
      ]]>!*/</script>

  <script type=text/x-jqote-template id=msgbox>/*!<![CDATA[
      <div class="msgbox-contents">
        <div class="msgbox-header-row">
          <div class="msgbox-close" onclick="msgBoxQueue.pop()"><%= myIcons.close %></div>
        </div>
        <br />
        <% if ($.isValidString(this.title) || $.isValidString(this.titleKey)){ %>
        <div class="msgbox-header-row">
          <% if (this.icon){ %>
          <div class="msgbox-icon"><%= this.icon %></div>
          <% } %>
          <h2 class="msgbox-title"><%= iLO.translateString(this.titleKey, this.title) %></h2>
        </div>
        <% } %>
        <div class="msgbox-text"><%= this.messageFormatter(this) %></div>
        <% if ($.isValidString(this.timerString) || $.isValidString(this.timerStringKey) && this.stayTime > 0){ %>
        <div class="msgbox-timer-msg"><%= this.timerStringFormatter(this) %></div>
        <% } %>
        <div class="msgbox-button-row">
          <% for (var i = 0; i < this.buttons.length; i++) { %>
          <% if (this.buttons[i].isDefault) { %>
          <button class="hpButton primary" tabindex="0" onclick="msgBoxQueue.pop(<%= this.buttons[i].value %>)">
            <%= iLO.translateString(this.buttons[i].textKey, this.buttons[i].text) %>
          </button>
          <% } else { %>
          <button class="hpButton" onclick="msgBoxQueue.pop(<%= this.buttons[i].value %>)">
            <%= iLO.translateString(this.buttons[i].textKey, this.buttons[i].text) %>
          </button>
          <% } %>
          <% } %>
        </div>
      </div>
      ]]>!*/</script>
</body>

</html>