/* rainbow mentions */
@keyframes mention-color
{
    0% { color: hsl(0, 75%, 50%); }
    25% { color: hsl(90, 75%, 50%); }
    50% { color: hsl(180, 75%, 50%); }
    75% { color: hsl(270, 75%, 50%); }
    100% { color: hsl(359, 75%, 50%); }
}

.message.mentioned .mention
{
    animation: mention-color 2s infinite linear;
}

/* line stickers plugin CSS patch for Beard's Material Design theme */

#bda-qem-line {
  visibility: hidden; }
#bda-qem-line.active::after,
#bda-qem-line:hover::after {
  opacity: 1 !important; }
#bda-qem-line::after {
  position: absolute;
  display: block;
  top: 13.5px;
  left: 115px;
  content: "LINE";
  height: 44px;
  opacity: .4;
  visibility: visible;
  transition: all 50ms ease; }
#bda-qem-line-container {
  border: 1px solid #212121 !important;
  border-radius: 3px !important;
  margin-right: 14px;
  margin-bottom: -7px !important;
  padding-top: 40px; }
#bda-qem-line-container,
#bda-qem-line-container .preview-wrapper,
.popout #bda-qem-line-container .scroller-wrap .scroller::-webkit-scrollbar,
.popout #bda-qem-line-container .scroller-wrap .scroller::-webkit-scrollbar-track  {
  background-color: #212121 !important;
  border-color: #212121 !important; }
.popout #bda-qem-line-container .scroller-wrap .scroller::-webkit-scrollbar-track-piece {
  border: 4px solid rgba(255, 255, 255, 0) !important;
  background-color: rgba(0, 0, 0, 0) !important; }
#bda-qem-line-container .preview-container .preview-wrapper {
  height: calc(var(--bd-les-height) + var(--bd-les-offset) + 10px) !important;
  margin-top: -10px; }
#bda-qem-line-container .add-form {
  bottom: 41px !important; }
#bda-qem-line-container .categories-container {
  bottom: -6px !important; }
#bda-qem-line-container,
#bda-qem-line-container .line-pack-header,
#bda-qem-line-container input,
#bda-qem-line-container .box,
#bda-qem-line-container .confirm .no:hover {
  color: #b9bbbe !important; }
#bda-qem-line-container .confirm .yes:hover {
  color: #ad0000 !important; }
#bda-qem-line-container .confirm .yes,
#bda-qem-line-container .confirm .no {
  color: rgba(185, 187, 190, 0.8) !important; }
#bda-qem-line-container .confirm {
  background-color: rgba(35, 35, 35, 0.8) !important; }

#bda-qem-line-container .add-form .line-add-button {
  margin-bottom: 0;
  box-shadow: unset;
  background-color: #353535 !important;
  transform: unset; }

/* hover and popout like RadialStatus */
.channel-members .member .status {
    transition: all 150ms ease;
    will-change: border-color, width, background, height, padding;
}
.channel-members .member:hover .status, .channel-members .member.popout-open .status {
    width:100% !important;
    background: transparent;
    border-radius: inherit;
    height: 100%;
    right: -4px !important;
    bottom: -4px;
    padding: 2px;
    transition: all 150ms ease;
    border-width: 2px;
    margin: 0;
}
.channel-members .member:hover .status.status-online,
.channel-members .member.popout-open .status.status-online {border-color: #43b581 !important}
.channel-members .member:hover .status.status-idle,
.channel-members .member.popout-open .status.status-idle {border-color: #faa61a !important}
.channel-members .member:hover .status.status-dnd,
.channel-members .member.popout-open .status.status-dnd {border-color: #f04747 !important}
.channel-members .member:hover .status.status-offline,
.channel-members .member.popout-open .status.status-offline {border-color: #636b75 !important}
.channel-members .member:hover .status-streaming.status,
.channel-members .member.popout-open .status-streaming.status {border-color: #593695 !important}
.channel-members .member.popout-open .status.status-typing,
.channel-members .member:hover .status.status-typing {background-color: rgba(0, 0, 0, 0.4) !important;}
.channel-members .member.popout-open .status.status-typing .spinner .spinner-inner,
.channel-members .member:hover .status.status-typing .spinner .spinner-inner {left: 1px !important;top: 1px !important;}

/* colored game status */
.channel-members .member.member-status-online .member-inner .member-activity-text strong {color: #43b581}
.channel-members .member.member-status-idle .member-inner .member-activity-text strong {color: #faa61a}
.channel-members .member.member-status-dnd .member-inner .member-activity-text strong {color: #f04747}
.channel-members .member.member-status-offline .member-inner .member-activity-text strong {color: #636b75}

/* blur account email */
.user-settings-account .ui-form-item:last-of-type .view-body.selectable-prgIYK:last-of-type {
    filter: blur(5px);
    transition: 200ms cubic-bezier(.2, .11, 0, 1);
}
.user-settings-account .ui-form-item:last-of-type .view-body.selectable-prgIYK:last-of-type:hover {
    filter: none;
    transition: 200ms cubic-bezier(.2, .11, 0, 1);
}
/* line roles in memberlist & DMs */
.channel-members h2, .private-channels header {
    text-align: center;
}
.channel-members h2::after, .private-channels header::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    border-bottom: 2px solid white;
    padding-bottom: 10px;
}
/* underline labels in channellist */
.channels-3g2vYe .wrapperDefault-1Dl4SS, .channels-3g2vYe .wrapperHovered-1KDCyZ {
    padding-top: 28px;
    padding-right: 8px;
    padding-left: 18px;
    padding: 0 0 8px 0;
    height: auto;
    margin: 28px 8px 4px 18px;
    border-bottom: 2px solid white;
}
.channels-3g2vYe .nameDefault-Lnjrwm, .channels-3g2vYe .nameHovered-1YFSWq {text-align: center;}
.channels-3g2vYe .wrapperDefault-1Dl4SS .flex-lFgbSz, .channels-3g2vYe .wrapperHovered-1KDCyZ .flex-lFgbSz {margin-right:0;}

/* line roles in memberlist & DMs */
.channel-members h2, .private-channels header {
    text-align: center;
}
.channel-members h2::after, .private-channels header::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    border-bottom: 2px solid white;
    padding-bottom: 10px;
}
/* underline labels in channellist */
.channels-3g2vYe .wrapperDefault-1Dl4SS, .channels-3g2vYe .wrapperHovered-1KDCyZ {
    padding-top: 28px;
    padding-right: 8px;
    padding-left: 18px;
    padding: 0 0 8px 0;
    height: auto;
    margin: 28px 8px 4px 18px;
    border-bottom: 2px solid white;
}
.channels-3g2vYe .nameDefault-Lnjrwm, .channels-3g2vYe .nameHovered-1YFSWq {text-align: center;}
.channels-3g2vYe .wrapperDefault-1Dl4SS .flex-lFgbSz, .channels-3g2vYe .wrapperHovered-1KDCyZ .flex-lFgbSz {margin-right:0;}
/* formatting redux hotfix for beard theme */
.margin-top-8 {
    margin-top: 20px;
}
.upload-modal .inner .channel-text-area-upload {
    margin-bottom: -10px;
}
/* alternate speaking notification */
.avatarSpeaking-3teDH6, .avatarDefault-3jtQoc, .avatarContainer-303pFz {
	border-color: transparent !important;
	box-shadow: none !important;
	z-index: 10;
}

.avatarSpeaking-3teDH6::before {
	content: "";
	position: absolute;
	left: -5px;
	width: 4px;
	height: 20px;
	background: #43b581;
}

.avatarSpeaking-3teDH6::after {
	content: "";
	position: absolute;
	height: 20px;
	left: -5px;
	width: 100%;
	background: linear-gradient(to right, #43b581 0%, transparent 35%);
	opacity: 0.5;
	z-index: -1;
}
/* owner tag w/ bot aesthetic for beard theme */
.kawaii-tag {
    background-color: rgb(58,113,193) !important;
    font-weight: 600;
    line-height: 15px;
}
.kawaii-tag-bright {
    background-color: rgb(58,113,193) !important;
}
.kawaii-tag-invert {
    color: #FFF !important;
    font-weight: 500;
}