.vibebp_content_preview_wrapper {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  background: var(--highlight); }
  .vibebp_content_preview_wrapper .vibebp_content_preview {
    max-width: 60vw;
    min-width: 480px;
    display: block; }
    .vibebp_content_preview_wrapper .vibebp_content_preview new_article_header {
      text-align: center;
      font-size: 3rem; }

.vibebp_articles_wrapper .vibebp_articles_header,
.vibebp_full_article_wrapper .vibebp_articles_header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem; }
  .vibebp_articles_wrapper .vibebp_articles_header img,
  .vibebp_full_article_wrapper .vibebp_articles_header img {
    width: 24px;
    border-radius: 50%; }
  .vibebp_articles_wrapper .vibebp_articles_header .vibebp_form_field,
  .vibebp_full_article_wrapper .vibebp_articles_header .vibebp_form_field {
    display: flex;
    align-items: center; }
    .vibebp_articles_wrapper .vibebp_articles_header .vibebp_form_field select,
    .vibebp_full_article_wrapper .vibebp_articles_header .vibebp_form_field select {
      margin: 0 0.5rem; }

.vibebp_articles_wrapper .vibebp_articles,
.vibebp_full_article_wrapper .vibebp_articles {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 1rem; }
  .vibebp_articles_wrapper .vibebp_articles .vibebp_article,
  .vibebp_full_article_wrapper .vibebp_articles .vibebp_article {
    background: var(--highlight);
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .vibebp_articles_wrapper .vibebp_articles .vibebp_article .vibebp_article_members,
    .vibebp_full_article_wrapper .vibebp_articles .vibebp_article .vibebp_article_members {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
      grid-gap: 0.5rem; }
      .vibebp_articles_wrapper .vibebp_articles .vibebp_article .vibebp_article_members .vibebp_avatar,
      .vibebp_full_article_wrapper .vibebp_articles .vibebp_article .vibebp_article_members .vibebp_avatar {
        border-radius: 50%; }

.vibebp_articles_wrapper .article_participants,
.vibebp_full_article_wrapper .article_participants {
  margin: 1rem 0;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  grid-gap: 0.5rem; }
  .vibebp_articles_wrapper .article_participants img,
  .vibebp_full_article_wrapper .article_participants img {
    border-radius: 50%; }
  .vibebp_articles_wrapper .article_participants > span,
  .vibebp_full_article_wrapper .article_participants > span {
    background: var(--border);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center; }

.vibebp_articles_wrapper .article_meta,
.vibebp_full_article_wrapper .article_meta {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column; }
  .vibebp_articles_wrapper .article_meta > span,
  .vibebp_full_article_wrapper .article_meta > span {
    border-radius: 5px;
    padding: 2px 5px;
    margin-right: 0.5rem;
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 1rem; }
    .vibebp_articles_wrapper .article_meta > span.article_type,
    .vibebp_full_article_wrapper .article_meta > span.article_type {
      background: var(--primary);
      color: var(--primarycolor); }

.vibebp_articles_wrapper .search_results,
.vibebp_full_article_wrapper .search_results {
  margin: 1rem 0;
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .vibebp_articles_wrapper .search_results .search_result.user,
  .vibebp_full_article_wrapper .search_results .search_result.user {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    line-height: 0; }
    .vibebp_articles_wrapper .search_results .search_result.user:hover:after,
    .vibebp_full_article_wrapper .search_results .search_result.user:hover:after {
      content: "\e61a";
      font-family: 'vicon';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      color: var(--white);
      display: flex;
      align-items: center;
      background: var(--darkborder);
      justify-content: center;
      font-size: 2rem; }