anomaly-page {
  display: block;

  .header {
    height: 40px;
    background: white;
    border-bottom: 1px solid #dddddd;
    display: flex;

    & > div {
      flex: 1;
      padding: 0 10px;
      line-height: 40px;
    }

    .title-area {
      label {
        line-height: 40px;
        font-size: 14px;
      }
    }

    .operation-area {
      text-align: right;
      padding-right: 20px;

      .o-items {
        margin: 0 10px;
        color: var(--global-theme-color-deep, #04BEB4);
      }

      time-filter {
        border: none;
      }
    }
  }

  .relation-list {
    background: white;
    padding: 10px 5px;

    .relation-items {
      display: flex;
      height: 30px;
      margin-bottom: 5px;
    }

    .items-area {
      line-height: 30px;

      &.items-label {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0 10px;

        a {
          color: #616161;

          &:hover {
            color: #4a90e2;
          }
        }
      }

      &.items-data {
        display: flex;
        flex: 1;

        .data-block {
          flex: 1;
          margin-left: 1px;
          background: #00C8C1;

          &.red-bg {
            background: #d96557;
          }
        }
      }

      &.items-operation {
        width: 70px;

        i {
          font-size: 15px;
          margin-left: 10px;
        }
      }
    }
  }

  .nil-details {
    background: white;
    padding: 45px;
    text-align: center;
    color: #CECECE;

    .fa-plus-circle:hover {
      color: #00C8C1;
    }
  }

  .create-details {
    text-align: right;
    height: 30px;
    padding: 0 30px;
    font-size: 15px;
  }

  .exception-area {
    text-align: center;
    padding: 10em 0;
    color: #8D8D8D;
  }

  .tooltip-over {
    padding: 5px 0;
    text-align: left;

    hr {
      margin: 2px 0;
    }
  }

  .tooltip-inner {
    padding: 2px 5px;
  }

  .add-widget {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: move;

    > button {
      background: transparent;
      border: none;
      color: #696969;

      > i {
        color: #00C8C1;
        font-size: 16px;
        margin-right: 12px;
      }
    }
  }
}