@charset "UTF-8";
.main-header-container {
  /*=======================*/
  /* ==== Alarm icone in Header ===== */
  /*=========================*/ }
  .main-header-container .main-header-item-container {
    height: 53px; }
  .main-header-container .logo-container {
    width: 253px; }
    .main-header-container .logo-container img {
      display: block;
      margin: 4px auto 0;
      width: 141px;
      height: 43px; }
    .main-header-container .logo-container .v-logo {
      color: #ffffff;
      font-size: 66px;
      display: block;
      margin: 3px auto 0px auto;
      width: 160px;
      height: 50px;
      overflow: hidden; }
      .main-header-container .logo-container .v-logo:before {
        visibility: visible; }
  .main-header-container .vms-header-navigation-button-container {
    position: relative; }
    .main-header-container .vms-header-navigation-button-container:hover {
      background-color: #204078; }
  .main-header-container .vms-header-navigation-button-container .vms-header-navigation-expander {
    display: none; }
  .main-header-container .vms-header-navigation-button-container.can-be-expanded:not(.active):hover .vms-header-navigation-expander {
    position: absolute;
    right: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    display: table-cell;
    vertical-align: middle;
    font-size: 8px;
    color: #a8adb6;
    cursor: pointer;
    z-index: 30; }
    .main-header-container .vms-header-navigation-button-container.can-be-expanded:not(.active):hover .vms-header-navigation-expander:hover {
      color: #e3e4e5; }
  .main-header-container .vms-header-navigation-button-container.can-be-expanded.active:hover .vms-header-navigation-expander {
    position: absolute;
    right: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    font-size: 8px;
    color: #a8adb6;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
    z-index: 30; }
    .main-header-container .vms-header-navigation-button-container.can-be-expanded.active:hover .vms-header-navigation-expander:hover {
      color: #e3e4e5; }
  .main-header-container .navigation-container {
    width: 550px; }
    .main-header-container .navigation-container .vms-header-navigation-button {
      border-top: 5px solid transparent;
      display: block;
      float: left;
      width: 110px;
      height: 100%;
      padding: 0 6px;
      cursor: pointer; }
      .main-header-container .navigation-container .vms-header-navigation-button a {
        display: block;
        vertical-align: middle;
        text-decoration: none;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #ffffff;
        margin: auto;
        padding-top: 14px;
        outline: none;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 35px;

      }
.alarm-counter {
    position: absolute;
    top: 6px;
    right: 40%;
    margin-left: 3px;
    display: inline-block;
    font-size: 11px;
    padding: 3px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    min-width: 20px;
    height: 20px;
    line-height: normal;
    letter-spacing: -0.44px;
    text-align: center;
    color: #ffffff;
    border-radius: 50%;
    background-color: #ba2323;
}
      .main-header-container .navigation-container .vms-header-navigation-button.active {
        border-top: 4px solid #204078;
        background-color: #1a2028 !important; }
      .main-header-container .navigation-container .vms-header-navigation-button:not(.active):hover {
        background-color: #204078; }
  .main-header-container .header-plc-container {
    height: 26px; }
  .main-header-container .warning-container {
    position: absolute;
    top: 62px;
    right: 57px;
    max-width: 300px;
    text-align: right;
    /* z-index: 230;  */
  }
    .main-header-container .warning-container a {
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #f36565;
      text-decoration: none; }
      .main-header-container .warning-container a:hover {
        text-decoration: underline; }
  .main-header-container .pushnotification-container {
    width: 265px; }
    .main-header-container .pushnotification-container .vms-tools-button-container {
      position: relative; }
    .main-header-container .pushnotification-container .vms-tools-button {
      width: 53px;
      min-width: 53px;
      max-width: 53px;
      height: 53px;
      position: relative; }
      .main-header-container .pushnotification-container .vms-tools-button:not(.disabled):hover {
        background: #204078;
        cursor: pointer; }
      .main-header-container .pushnotification-container .vms-tools-button.disabled:hover {
        cursor: default; }
      .main-header-container .pushnotification-container .vms-tools-button .jewel {
        display: block;
        position: absolute;
        right: 3px;
        bottom: 4px;
        background: #bd1820;
        font-size: 10px;
        font-weight: bold;
        font-style: normal;
        color: #fff;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
        width: 20px;
        height: 20px; }
      .main-header-container .pushnotification-container .vms-tools-button .vicon-font {
        display: block;
        margin: auto;
        width: 32px;
        height: 32px; }
        .main-header-container .pushnotification-container .vms-tools-button .vicon-font:before {
          width: 32px;
          height: 32px;
          color: #ffffff;
          font-size: 24px;
          display: block;
          text-align: center;
          margin: 4px 0px 0px 0px; }
    .main-header-container .pushnotification-container .export {
      position: relative;
      cursor: pointer; }
      .main-header-container .pushnotification-container .export .tool-list-container {
        width: 358px; }
      .main-header-container .pushnotification-container .export .tool-list-scroll {
        max-height: 350px; }
    .main-header-container .pushnotification-container .player-notification {
      position: relative;
      cursor: pointer;
      margin: 0px !important;
      height: 53px !important; }
      .main-header-container .pushnotification-container .player-notification:before {
        width: 40px !important;
        height: 40px !important;
        margin: 11px 0px 0px 8px !important;
        font-size: 30px !important; }
      .main-header-container .pushnotification-container .player-notification:after {
        display: block;
        content: '×';
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        background-color: #bd1820;
        position: absolute;
        bottom: 6px;
        left: 10px;
        width: 15px;
        height: 15px;
        line-height: 11px;
        border-radius: 14px; }
    .main-header-container .pushnotification-container .license-notification {
      position: relative;
      cursor: pointer; }
    .main-header-container .pushnotification-container .notification {
      position: relative;
      cursor: pointer; }
      .main-header-container .pushnotification-container .notification .tool-list-container {
        width: 304px; }
      .main-header-container .pushnotification-container .notification .tool-list-scroll {
        max-height: 350px; }
        .main-header-container .pushnotification-container .notification .tool-list-scroll > div:not(:nth-last-child(1)) {
          border-bottom: solid 1px rgba(255, 255, 255, 0.16); }
        .main-header-container .pushnotification-container .notification .tool-list-scroll .vms-tools-button {
          pointer-events: none; }
      .main-header-container .pushnotification-container .notification .header-notification-info-container {
        padding: 12px 0;
        color: #ffffff; }
        .main-header-container .pushnotification-container .notification .header-notification-info-container a {
          color: #d6c424; }
    .main-header-container .pushnotification-container .tool-list-container {
      background: #2b405a;
      position: absolute;
      top: 53px;
      left: 0;
      z-index: 900; }
      .main-header-container .pushnotification-container .tool-list-container .tool-list-scroll {
        overflow-x: auto;
        width: 100%;
        max-height:398px;
      }
      .main-header-container .pushnotification-container .tool-list-container iframe {
        position: absolute;
        border: none;
        width: 100%;
        height: 100%;
        z-index: -1; }
    .main-header-container .pushnotification-container .header-export-item {
      align-items: flex-start;
      padding: 12px 0; }
      .main-header-container .pushnotification-container .header-export-item:not(:nth-last-child(1)) {
        border-bottom: solid 1px rgba(255, 255, 255, 0.16); }
    .main-header-container .pushnotification-container .header-export-progress-container {
      position: relative;
      background: #2b405a;
      width: 80px;
      height: 70px; }
      .main-header-container .pushnotification-container .header-export-progress-container .header-export-progress {
        background: #2b405a;
        position: absolute;
        top: 50%;
        right: 50%;
        margin: -21px -21px 0 0;
        border-radius: 21px;
        color: #ffffff;
        text-align: center;
        line-height: 42px;
        width: 42px;
        height: 42px; }
      .main-header-container .pushnotification-container .header-export-progress-container:before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 50%;
        margin: -25px -25px 0 0;
        border-radius: 25px;
        width: 50px;
        height: 50px;
        background: #1e9a4e; }
      .main-header-container .pushnotification-container .header-export-progress-container.animated:before {
        /**************/
        background-color: #295287;
        background-image: url(/app/images/export/export-process.gif);
        background-position: center center; }
      .main-header-container .pushnotification-container .header-export-progress-container.error:before {
        background: #ee1c1a; }
      .main-header-container .pushnotification-container .header-export-progress-container.partial:before {
        background: #dd6e0c;
        background: #ddc50c; }
    .main-header-container .pushnotification-container .header-export-info-container {
      flex-grow: 1;
      padding: 8px 8px 0 0;
      color: #ffffff; }
    .main-header-container .pushnotification-container .header-export-controls-container {
      padding-top: 6px;
      width: 270px; }
    .main-header-container .pushnotification-container .header-export-control {
      max-width: 70px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: #ffffff;
      cursor: pointer; }
      .main-header-container .pushnotification-container .header-export-control:hover {
        text-decoration: underline; }
    .main-header-container .pushnotification-container .header-export-list-container {
      background: #13193a;
      padding-top: 3px;
      width: 270px;
      min-height: 44px;
      max-height: 64px;
      overflow-x: auto;
      cursor: default; }
    .main-header-container .pushnotification-container .header-export-list-item {
      padding: 0 6px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
  .main-header-container .clock-container {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    border-left: solid 1px #000;
    width: 102px;
    min-width: 102px;
    max-width: 102px; }
    .main-header-container .clock-container > div {
      margin: auto;
      height: 36px;
      width: 90px; }
    .main-header-container .clock-container .datetime-container {
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      height: 18px;
      line-height: 18px; }
  .main-header-container .user-container {
    position: relative;
    border-left: solid 1px #000;
    width: 110px; }
    .main-header-container .user-container .dropdown-toggle {
      background-color: transparent;
      color: #fff;
      border: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      text-align: right; }
      .main-header-container .user-container .dropdown-toggle > span {
        position: relative; }
      .main-header-container .user-container .dropdown-toggle:focus, .main-header-container .user-container .dropdown-toggle:active {
        outline: none;
        padding: 0;
        border: 0; }
    .main-header-container .user-container .top-menu-user-name {
      display: inline-block;
      vertical-align: middle;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: calc(100% - 36px); }
    .main-header-container .user-container .carriage {
      display: inline-block;
      vertical-align: middle;
      border-style: solid;
      border-width: 4px;
      border-color: transparent;
      border-top: 4px solid #fff;
      border-bottom-width: 0;
      margin: 0 15px 2px 2px;
      width: 0;
      height: 0; }
    .main-header-container .user-container .user-define-menu-block {
      position: absolute;
      top: 53px;
      right: 0;
      min-width: 200px;
      z-index: 9999; }
      .main-header-container .user-container .user-define-menu-block iframe {
        position: absolute;
        border: none;
        width: 100%;
        height: 100%;
        z-index: -1; }
    .main-header-container .user-container .header-user-menu-container {
      position: relative;
      background: #2b405a;
      border: none;
      z-index: 9999; }
    .main-header-container .user-container .header-user-menu-item {
      color: #cdd1d5;
      padding: 0 23px;
      height: 40px;
      width: 100%; }
      .main-header-container .user-container .header-user-menu-item:not(:nth-last-child(1)) {
        border-bottom: solid 1px #1a2028; }
      .main-header-container .user-container .header-user-menu-item .vicon-font {
        width: 26px;
        min-width: 26px; }
      .main-header-container .user-container .header-user-menu-item .text-overflow {
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        flex-grow: 1; }
      .main-header-container .user-container .header-user-menu-item:hover {
        background: #295287; }
    .main-header-container .user-container.is-open, .main-header-container .user-container:hover {
      background: #2b405a; }
  .main-header-container .fullscreen-container {
    border-left: solid 1px #000;
    width: 56px;
    /*&:hover > div {
            background-position-x: -56px;
        }

        & > .fullscreen {
            background-position-y: -112px;
        }

        &.monitoring > .fullscreen {
            background-position-y: -56px;
        }*/ }
    .main-header-container .fullscreen-container .vicon-font:before {
      color: #ffffff;
      text-align: center;
      font-size: 28px;
      display: block;
      height: 53px;
      padding-top: 14px; }
    .main-header-container .fullscreen-container .vicon-font:hover:before {
      color: #69b9ff; }
    .main-header-container .fullscreen-container > div {
      display: block;
      padding-left: 0px;
      padding-right: 0px;
      height: 100%;
      cursor: pointer; }
  .main-header-container .header-alarm-icon-container {
    position: relative;
    cursor: default; }
    .main-header-container .header-alarm-icon-container:hover .header-alarm-icon-submenu {
      display: block;
      height: 96px;
      overflow: visible;
      transition: height 0s; 
    }
    .main-header-container .header-sys-performance-container .monitor-img{
        height:32px;
        width:32px;
        margin: auto;
        padding-top:4px;
    }
    .main-header-container .header-sys-performance-container .progress-bar-body {
        width: 242px;
        height: 105px;
        border: solid 1px #295187;
        background-color: #31363f;
        position: absolute;
        top: 53px;
        z-index: 1111;
        left: 19px;
        padding: 16px;
    }
        .main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-container {
            position: relative;
            height: 24px;
        }
        .main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-child{
          width:100%;
          height:100%;
        }
		.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-container .progress-line {
			background-image: linear-gradient(to right, #4caf50, #ffeb3b 60%, #ff5722 100%);
		}

        .main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-container .shrinker {
            background-color: #31363f;
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
        }
    .main-header-container .header-sys-performance-container .progress-bar-body .progress-bar.upto-30{
        /*background-image: linear-gradient(to right, #4caf50, #c2d642);*/
    }
    /*.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar.upto-60 {
      background-image: linear-gradient(to right, #4caf50, #ffbb33);
    }
    .main-header-container .header-sys-performance-container .progress-bar-body .progress-bar.upto-100 {
        background-image: linear-gradient(to right, #4caf50, #ffeb3b 50%, #ff5722 100%);
    }*/
    .main-header-container .header-sys-performance-container .progress-bar-body .progress-bar{
        float:inherit;
        box-shadow:none;
    }
.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-mark{
    border-bottom:1px solid #fff;
    position:relative;
}
.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-mark .section-mark:nth-of-type(1):after{
    content:"0";
    position:absolute;
    left:-3px;
    top:2px;
}
.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-mark .section-mark:nth-of-type(2):after{
    content:"30";
     position:absolute;
    left:-6px;
    top:2px;
}
.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-mark .section-mark:nth-of-type(3):after{
    content:"60";
     position:absolute;
    left:-6px;
    top:2px;
}
.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-mark .section-mark:nth-of-type(4):after{
    content:"100";
     position:absolute;
    left:-10px;
    top:2px;
}
.main-header-container .header-sys-performance-container .progress-bar-body .progress-bar-mark .section-mark {
    position: absolute;
    height: 3px;
    width: 1px;
    background: #fff;
    color: #fff;
    top: 2px;
    font-size: 11px;
}
.main-header-container .header-sys-performance-container .progress-bar-body .title {
    font-size: 16px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #cfd4d8;
    margin-bottom: 16px;
    margin-top: 0;
}
.main-header-container .header-sys-performance-container .performance-notation{
    width: 18px;
    position: absolute;
    height: 18px;
    border-radius: 50%;
    left: 27px;
    top: 31px;
}
.main-header-container .header-sys-performance-container .performance-notation.upto-55{
  background-color:#4caf50;
}
.main-header-container .header-sys-performance-container .performance-notation.upto-70{
   background-color:#ffeb3b;
}
	.main-header-container .header-sys-performance-container .performance-notation.upto-100{
		background-color:#ff5722;
	}
.sys-performance-popOver .popover-body {
    width: 375px;
    height: 90px;
    border: solid 1px #295187;
    background-color: #fffde7;
    padding: 8px;
    background-color: #ffffff;
    z-index: 999999;
}

.sys-performance-popOver .popover-section .bg-tringle {
    position: absolute;
    top: 43px;
    left: 21px;
}
.progress-popover .progress-bar-body{
    display:none;
}
.progress-popover:hover .progress-bar-body {
    display: block;
}

.downloadlink-popover:hover .popover-section {
    display: block;
}

.downloadlink-popover .popover-section {
    display: none;
}

.sys-performance-popOver .popover-body {
    position: absolute;
    top: 54px;
    left: -15px;
    overflow: hidden;
}
.sys-performance-popOver .popover-body p {
    font-size: 13px;
    letter-spacing: normal;
    line-height: 1.44;
    margin:0;
    color: #3e5b95;
}
.popover-body a {
    text-decoration:underline;
    color: #3e5b95;
}


.main-header-container .header-alarm-icon span {
    background-color: #bd1820;
    animation: alertIconBackgroungAnimation 1s infinite;
    -webkit-animation: alertIconBackgroungAnimation 1s infinite;
}
  .main-header-container .header-alarm-icon .v-flasher:before {
    color: white;
    font-size: 26px;
    text-align: center;
    width: 53px;
    height: 53px;
    display: inline-block;
    padding-top: 13px;
    animation: alertIconColorAnimation 1s infinite;
    -webkit-animation: alertIconColorAnimation 1s infinite; }
  .main-header-container .header-alarm-icon:hover span {
    background-color: #841112; }

@keyframes alertIconBackgroungAnimation {
  0% {
    background-color: #bd1820; }
  50% {
    background-color: #295287; }
  100% {
    background-color: #bd1820; } }

@-webkit-keyframes alertIconBackgroungAnimation {
  0% {
    background-color: #bd1820; }
  50% {
    background-color: #295287; }
  100% {
    background-color: #bd1820; } }

@keyframes alertIconColorAnimation {
  0% {
    color: white; }
  50% {
    color: #bd1820; }
  100% {
    color: white; } }

@-webkit-keyframes alertIconColorAnimation {
  0% {
    color: white; }
  50% {
    color: #bd1820; }
  100% {
    color: white; } }
  .main-header-container .header-alarm-icon-submenu {
    position: absolute;
    z-index: 100000;
    background-color: #22446f;
    top: 53px;
    right: 0px;
    display: block;
    box-shadow: 2px 2px 5px 0px #000000;
    height: 0px;
    overflow: hidden;
    transition-delay: 2s;
    transition-duration: 0;
    transition-property: height;
    transition-timing-function: linear; }
    .main-header-container .header-alarm-icon-submenu iframe {
      position: absolute;
      border: none;
      width: 100%;
      height: 100%;
      z-index: -1; }
  .main-header-container .header-alarm-icon-menu-item {
    padding: 0px 12px; }
    .main-header-container .header-alarm-icon-menu-item.alarm-icon-switchto span {
      padding-top: 6px; }
    .main-header-container .header-alarm-icon-menu-item.alarm-icon-silence span {
      border-top: 1px solid #467cc2; }
    .main-header-container .header-alarm-icon-menu-item.alarm-icon-switchto span:before {
      margin-top: 13px; }
    .main-header-container .header-alarm-icon-menu-item.alarm-icon-silence span:after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 6px;
      left: 8px;
      height: 26px;
      width: 1px;
      background-color: #ffffff;
      box-shadow: 0 0 0px 2px #22446f;
      font-size: 0px;
      line-height: 0px;
      transform: rotate(-45deg); }
    .main-header-container .header-alarm-icon-menu-item.alarm-icon-silence:hover span:after {
      box-shadow: 0 0 0px 2px #467cc2; }
    .main-header-container .header-alarm-icon-menu-item.alarm-icon-switchto:hover + .header-alarm-icon-menu-item span {
      border-top: 1px solid #22446f; }
    .main-header-container .header-alarm-icon-menu-item span:before {
      font-family: 'vicon-font' !important;
      height: 20px;
      width: 20px;
      display: inline-block;
      /*background-color: gold;*/
      float: left;
      margin: 12px 6px 0px 0px;
      line-height: 1;
      font-size: 14px; }
  .main-header-container .header-alarm-icon-submenu-inner div:hover {
    background: #467cc2; }
  .main-header-container .header-alarm-icon-submenu-inner div span {
    font-size: 14px;
    font-weight: normal;
    color: #ffffff;
    display: block;
    white-space: nowrap;
    line-height: 40px;
    height: 48px;
    position: relative;
    padding-right: 60px;
    font-family: Arial, sans-serif !important; }