/*hashtag style by slashine 071320*/
.mention.hashtag{
background-color: #93AEFD36;
padding: 0px 4px;
text-align: center;
text-decoration: none;
display: inline-block;
border-style: dashed;
border-color: #93AEFD;
border-width: 0.5px;
border-radius: 2px;
margin-top: 2px;
margin-bottom: 2px;
}

/* emoji enlarge */
.reply-indicator__content .emojione,
.status__content .emojione,
.announcements__item__content .emojione {
  width: 50px !important;
  height: 50px !important;
  margin: 2px !important;
}

.emoji-mart-category .emoji-mart-emoji:hover span,
.emoji-mart-category .emoji-mart-emoji-custom:hover img {
  width: 40px !important;
  height: 40px !important;
}

.emoji-mart-category .emoji-mart-emoji:hover {
  margin: 0 -12px;
}

/*variable width*/
div.column {
    -webkit-box-flex:1;
    -ms-flex-positive:1;
    flex-grow:1
}

/*
 * Avatar cat for Mastodon
 * Mastodon 4.7.x compatibility edition
 *
 * Based on the geometry / animation of the original Avatar cat CSS.
 */

/* ============================================================
 * 1. Avatar containers
 *
 * Mastodon 4.7.x no longer gives .status__avatar a reliable
 * positioning context for absolutely-positioned pseudo elements.
 * Restore it explicitly.
 * ============================================================ */

.status__avatar,
.detailed-status__display-avatar {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  isolation: isolate;
}


/* ============================================================
 * 2. Mastodon 4.7 clips the display-name area.
 *
 * Cat ears extend a little above the avatar, so the outer
 * display-name container must allow them to escape.
 *
 * Keep the actual textual display-name clipped, so a very long
 * username still cannot overlap the timestamp.
 * ============================================================ */

.status__info .status__display-name,
.detailed-status__display-name {
  overflow: visible !important;
}

.status__info .status__display-name {
  min-width: 0;
}

.status__info .status__display-name > .display-name,
.detailed-status__display-name > .display-name {
  min-width: 0;
  overflow: hidden;
}


/* ============================================================
 * 3. Cat ears
 *
 * Keep the original geometry.
 *
 * The important difference from the old stylesheet is that every
 * positioning property is now explicit.
 * ============================================================ */

.status__avatar::before,
.status__avatar::after,
.detailed-status__display-avatar::before,
.detailed-status__display-avatar::after {
  content: "";
  display: block;

  position: absolute;
  top: 0;

  width: 50%;
  height: 50%;

  box-sizing: border-box;

  border: 4px solid;
  border-color: inherit;
  background-color: inherit;

  z-index: 0;
  pointer-events: none;

  transform-origin: 50% 50%;
}


/* Right ear */

.status__avatar::before,
.detailed-status__display-avatar::before {
  right: 0;
  left: auto;

  border-radius: 75% 0 75% 75%;

  transform:
    rotate(-37.6deg)
    skew(-30deg);
}


/* Left ear */

.status__avatar::after,
.detailed-status__display-avatar::after {
  left: 0;
  right: auto;

  border-radius: 0 75% 75%;

  transform:
    rotate(37.6deg)
    skew(30deg);
}


/* ============================================================
 * 4. Put the actual avatar above the ears
 * ============================================================ */

.status__avatar .account__avatar,
.detailed-status__display-avatar .account__avatar {
  position: relative;
  z-index: 1;
}


/* Mastodon 4.7 supports quoted posts with a smaller 32px avatar.
 * The original 4px outline is slightly too thick there.
 */

.status--is-quote .status__avatar::before,
.status--is-quote .status__avatar::after {
  border-width: 3px;
}


/* ============================================================
 * 5. Notifications
 *
 * Preserve the behaviour of the original stylesheet:
 * don't put cat ears on status previews inside notifications.
 *
 * Mastodon now has both old and redesigned notification classes.
 * ============================================================ */

.notification .status__avatar::before,
.notification .status__avatar::after,
.notification-group .status__avatar::before,
.notification-group .status__avatar::after,
.notification-ungrouped .status__avatar::before,
.notification-ungrouped .status__avatar::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
 * 6. Ear wiggle
 * ============================================================ */

.status__avatar:hover::before,
.detailed-status__display-avatar:hover::before {
  animation: earwiggleright 1s infinite;
}

.status__avatar:hover::after,
.detailed-status__display-avatar:hover::after {
  animation: earwiggleleft 1s infinite;
}


@keyframes earwiggleleft {
  from {
    transform: rotate(37.6deg) skew(30deg);
  }

  25% {
    transform: rotate(10deg) skew(30deg);
  }

  50% {
    transform: rotate(20deg) skew(30deg);
  }

  75% {
    transform: rotate(0deg) skew(30deg);
  }

  to {
    transform: rotate(37.6deg) skew(30deg);
  }
}


@keyframes earwiggleright {
  from {
    transform: rotate(-37.6deg) skew(-30deg);
  }

  30% {
    transform: rotate(-10deg) skew(-30deg);
  }

  55% {
    transform: rotate(-20deg) skew(-30deg);
  }

  75% {
    transform: rotate(0deg) skew(-30deg);
  }

  to {
    transform: rotate(-37.6deg) skew(-30deg);
  }
}


/* Respect reduced-motion preference */

@media (prefers-reduced-motion: reduce) {
  .status__avatar:hover::before,
  .status__avatar:hover::after,
  .detailed-status__display-avatar:hover::before,
  .detailed-status__display-avatar:hover::after {
    animation: none !important;
  }
}