:global {
  @bd-page: bd-page;

  .@{bd-page} {
    &__monitor {
      background-color: rgba(242, 242, 242, 1);
      height          : 100%;
      overflow-y      : auto;

      &-back {
        cursor     : pointer;
        position   : absolute;
        top        : 2px;
        right      : 28%;
        line-height: 1;
        z-index    : 1;
      }

      &-card {
        display        : flex;
        flex-direction : column;
        justify-content: flex-start;
        align-items    : center;
        padding-left   : 8px;

        &Zone {
          width        : 100%;
          padding      : 0 4px;
          margin-bottom: 4px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    &__plant {
      text-align      : right;
      padding         : 0.4rem;
      background-color: #ffffff;

      &-wrap {
        display        : flex;
        flex-direction : row;
        justify-content: flex-start;
        align-items    : center;
        margin-top     : 0.2rem;
      }

      &-zone {
        display        : flex;
        flex-direction : column;
        justify-content: flex-start;
        align-items    : center;
        padding        : 0.2rem;
        margin-right   : 0.4rem;
        cursor         : pointer;
        transition     : all .2s ease-in-out;

        &:hover {
          background-color: rgba(0, 0, 0, 0.06);
        }

        &:hover,
        &.active,
        &.currLevel {

          .@{bd-page}__plant-level,
          .@{bd-page}__plant-title {
            color: #333333;
          }

          .@{bd-page}__plant-imgOn {
            opacity: 1;
          }
        }

        &:hover,
        &.currLevel {
          .@{bd-page}__plant-level {
            color           : #ffffff;
            font-weight     : bold;
            background-color: #6BB4F8;
          }
        }
      }

      &-level {
        width           : 1.8rem;
        height          : 0.64rem;
        line-height     : 0.64rem;
        font-size       : 0.28rem;
        color           : #d3d3d3;
        background-color: transparent;
        text-align      : center;
        border-radius   : 10px;
        transition      : all .2s ease-in-out;
      }

      &-img {
        overflow  : hidden;
        margin-top: 0.4rem;
        width     : 0.9rem;
        height    : 0.8rem;
        position  : relative;

        &Off,
        &On {
          position  : absolute;
          top       : 0;
          left      : 0;
          opacity   : 0;
          width     : auto;
          height    : 100%;
          transition: opacity 0.2s ease;
        }

        &Off {
          opacity: 1;
        }
      }

      &-title {
        font-size : 0.28rem;
        color     : #d3d3d3;
        margin-top: 0.4rem;
        transition: all .2s ease-in-out;
      }
    }
  }
}