@import '../../global.less';

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;

  :global {
    .logo {
      width: 64px;
      margin: 16px 0 10px;
    }

    .app-name, .app-desc {
      color: #000;
      font-size: 0.9rem;
    }

    .app-desc {
      margin-bottom: 20px;
    }
  }
}

.content {
  align-self: stretch;
  border: 1px solid @hint-color;
  margin: 0 20px;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;

  :global {
    .section {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .section:nth-child(n+2) {
      margin-top: 10px;
    }

    .desc {
      font-size: 0.8rem;
    }

    .icon-list {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }

    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 8px 10px 0;
    }

    .icon-icon {
      width: 64px;
      border-radius: 3px;
      overflow: hidden;
    }
  }
}

.dlg {
  display: flex;
  flex-direction: column;
  align-items: center;
}
