.crowi.main-container {
  .main.user-page { // {{{ .main of layout related

    .header-wrap {

      h1 {
        margin: 0;
        font-size: 1.1em;
      }

      .user-page-header {
        margin-bottom: 32px;

        .bookmark-link {
          float: right;
          color: #e6b422;
          font-size: 2em;
          &.bookmarked {
            //color: #fff;
          }
        }

        .user-page-picture {
          img {
            height: 64px;
            width: 64px;
          }
        }
        .user-page-meta {
          padding-left: 88px;
          color: #999;

          h2 {
            font-size: 2.5em;
            color: #666;
          }

          ul {
            padding-left: 0;
            li {
              list-style: none;
            }
          }
          .user-page-username {
            font-weight: bold;
          }
          .user-page-email {
          }
          .user-page-introduction {
          }
        }
      }

      .user-page-content-tab {
        padding: 16px 0 8px;
      }

    }
  } // }}}
}

.user-component {
  img.picture {
    margin-right: 4px;
  }
  span {
    margin-right: 4px;
  }
}

.user-card {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;

  .user-card-image {
    position: relative;
    margin-right: 10px;
  }

  .user-card-content {
    display: flex;
    flex-direction: column;
  }
}