.entity-container {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 2px;
  background-color: white;

  &.fact {
    border: 1px solid #ced4de;

    &:hover {
      border: 1px solid #1890ff;
    }
  }

  &.dim {
    border: 1px solid #cdddfd;

    &:hover {
      border: 1px solid #1890ff;
    }
  }

  &.other {
    border: 1px solid #decfea;

    &:hover {
      border: 1px solid #1890ff;
    }
  }

  .content {
    margin: 1px 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);

    &.fact {
      background-color: #ced4de;
    }

    &.dim {
      background-color: #cdddfd;
    }

    &.other {
      background-color: #decfea;
    }

    .head {
      width: calc(100% - 12px);
      height: 38px;
      margin-left: 6px;
      font-size: 12px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .type {
        padding-right: 8px;
      }

      .more {
        cursor: pointer;
      }
    }

    .body {
      width: calc(100% - 12px);
      height: calc(100% - 36px - 6px);
      margin-left: 6px;
      margin-bottom: 6px;
      background-color: white;
      overflow: auto;
      cursor: pointer;

      .body-item {
        width: 100%;
        height: 28px;
        font-size: 12px;
        color: #595959;
        border-bottom: 1px solid rgba(206, 212, 222, 0.2);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .name {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin-left: 6px;

          .pk,
          .fk {
            width: 12px;
            font-family: HelveticaNeue-CondensedBold;
            color: #ffd666;
            margin-right: 6px;
          }
        }

        .type {
          color: #bfbfbf;
          font-size: 8px;
          margin-right: 8px;
        }
      }
    }
  }
}
