@import "src/assets/styles";

.device-waring-container {
  flex-grow: 1;
  width: 100%;

  .index-content {
    display: flex;
    align-items: center;
    justify-content: center;

    .index-icon {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background: url(./img/icon_waring.svg) no-repeat 50% 40%;
      background-size: 50%;
      margin-right: 14px;

      &.index-emergent {
        background-color: rgba(255, 0, 0, 1);
      }

      &.index-minor {
        background-color: rgba(255, 165, 0, 1);
      }

      &.index-warning {
        background-color: rgba(255, 165, 0, 1);
      }

      &.index-important {
        background-color: rgb(255, 78, 78);
      }
    }

    .index-info {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;

      .index-label {
        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
        color: #515a6e;
        font-size: 20px;
        margin-bottom: 10px;
      }

      .index {
        font-size: 10px;

        .index-num {
          font-size: 20px;
          margin-right: 10px;
        }
      }
    }
  }
}

