/**
 * @name DIALOGUE.386
 * @description A late 80s to early 90s TUI-style theme based on System-Glass (system24) Theme by Deer ♡
 * @basetheme dark
 * @author jce:2492
 * @invite https://fluxer.gg/themes
 */

body {
    container-name: body;

    /* ----------------------------------------------------------------------- */
    /* Toggles
    /* ----------------------------------------------------------------------- */

    /* decide if you want square or rounded avatars. | Options: off, on | Recommended: on */
    --SquareAvatars: on;
    /* set the user online status appearance. outlines look better with square avatars, but only in the desktop client. | Options: off, on | Recommended: on */
    --OutlineOnlineStatus: on;
    /* decide if you want bubbles to highlight message groups. | Options: off, on | Currently broken
    /* see also: --ThemeMessageBubbleColor */
    --MessageBubbles: off;
    /* decide if you want panel labels. looks better without a background image | Options: off, on | Currently broken */
    --ThemePanelLabels: off;
    /* overwrites fluxer's panel rounding in most places | Options: off, on | Recommended: off
    /* see also: --ThemeRoundingMultiplier */
    --UseDefaultRounding: off;
    /* decide if you want to disable some additional animations added by the theme | Options: off, on | Recommended: off */
    --ExtraAnimations: off;
    /* set a custom app icon in the top left corner | Options: off, on */
    --CustomAppIcon: off;
    /* link to your custom icon. currently it HAS to be hosted on fluxer's servers */
    --ThemeCustomIconUrl: url('');
    /* [Experimental] Controls the server list position, only works in the desktop client for now. | Options: off | on */
    --Horizontal-Serverlist: off;
    /* Controls the server list alignment. only works with horizontal serverlist enabled | Options: left | center | right */
    --Serverlist-Alignment: left;
}

:root {
    /* ----------------------------------------------------------------------- */
    /* Colors & default theme overrides
    /* ----------------------------------------------------------------------- */

    --brand-primary: #00ff00;
    --brand-secondary: #00aa00;

    --ThemeMessageBubbleColor: #cacaca;

    --ThemeFlatPrimary: #000071;
    --ThemeFlatLighter: #5500ff;
    --ThemeFlatDarker: black;

    --ThemeDarkenLight: #000071;
    --ThemeDarkenMedium: #c0c0c088;
    --ThemeBrightenLight: rgba(255, 255, 255, .06);
    --ThemeBrightenMedium: rgba(255, 255, 255, .15);

    /* color overrides */
    --background-primary: var(--ThemeFlatDarker);
    --background-secondary: var(--ThemeFlatPrimary);
    --background-secondary-alt: var(--ThemeFlatLighter); /* mainly used in for mobile view*/
    --background-tertiary: var(--ThemeFlatLighter); /* mainly used in for mobile view*/
    --background-textarea: var(--ThemeDarkenLight); /* used in search bars */
    --status-danger: #ff0055; /* notification badges */

    /* ----------------------------------------------------------------------- */
    /* Fonts & Text
    /* ----------------------------------------------------------------------- */

    /* change to '' for Fluxer's default font */
    --font-sans: sans-serif;
    /* change to '' for fluxer's default font */
    --font-mono: monospace;
    /* 300 is light, 400 is normal. DOES NOT AFFECT BOLD TEXT */
    font-weight: 500;
    /* decreases letter spacing for better readability. recommended on monospace fonts.*/
    /* letter-spacing: -0.03ch; */

    /* ----------------------------------------------------------------------- */
    /* Background
    /* ----------------------------------------------------------------------- */

    /* Background Image | fluxer currently only allows using images hosted on their own servers.
    /* theres a list of presets further below, named --bg-1 to --bg-5. of course, you can also use your own images. */
    --background-image: var(--bg-2);
    /* fallback color behind the background image. can be used to give your bg image a tint */
    --ThemeBackgroundColor: #b8b8b8;
    /* Image position | center, left, right, bottom, top */
    --backgroundPosition: top;
    /* To cover the entire app, set to "cover". You can also set it to "100% 100%" but the image will be stretched. Set to "contain" to see the entire image */
    --backgroundSize: cover;
    /* if you want the image to repeat */
    --backgroundRepeat: no-repeat;
    /* Set to 0 to remove blur. i recommend leaving this off and tweaking --ThemePanelBlur instead */
    --backgroundBlur: 0px;
    /* 0 is fully transparent, 1 is fully opaque */
    --backgroundOpacity: 0;

    /* ----------------------------------------------------------------------- */
    /* panels
    /* ----------------------------------------------------------------------- */

    /* gap between panels */
    --ThemePanelMargin: 16px;
    /* panel */
    --ThemePanelBGColor: var(--ThemeDarkenLight);
    /* panel hovered */
    /* --ThemePanelBGColorHovered: hsl(0, 0%, 10%); */
    /* background color for tooltips, context panels etc */
    --ThemePanelContextBGColor: #5500aa;
    /* background color for media picker, notification inbox, search filters, pins etc */
    --ThemePanelModalBGColor: #aa00aa;
    /* panel border thickness */
    --ThemePanelBorderThickness: 6px;
    /* panel border rounding */
    --ThemePanelBorderRounding: 0px;
    /* panel border color (not hovered) */
    --ThemePanelBorderColor: white;
    /* panel border color (hovered) */
    /* --ThemePanelBorderColorHovered: var(--brand-primary); */
    /* panel shadows */
    --ThemePanelShadow: 10px 10px rgb(0, 0, 0, 0.8);

    /* you can ignore these */
    --ThemePanelBorder: var(--ThemePanelBorderThickness) double var(--ThemePanelBorderColor);
    --ThemePanelBorderHovered: var(--ThemePanelBorderThickness) solid var(--ThemePanelBorderColorHovered);

    /* ----------------------------------------------------------------------- */
    /* rounding
    /* ----------------------------------------------------------------------- */

    /* change this value to control the ui's overall rounding strength
    * 1 is the default, 0 removes most rounding. */
    --ThemeRoundingMultiplier: 0;

    /* leave these alone unless you know what youre doing */
    --radius-sm: calc(0.25rem * var(--ThemeRoundingMultiplier));
    --radius-md: calc(0.375rem * var(--ThemeRoundingMultiplier));
    --radius-lg: calc(0.5rem * var(--ThemeRoundingMultiplier));
    --radius-xl: calc(0.75rem * var(--ThemeRoundingMultiplier));
    --radius-2xl: calc(1rem * var(--ThemeRoundingMultiplier));
    --radius-full: calc(9999px * var(--ThemeRoundingMultiplier));
    --media-border-radius: calc(4px * var(--ThemeRoundingMultiplier));
    --message-reply-spine-radius: calc(6px * var(--ThemeRoundingMultiplier));

    /* set universal border rounding */
    /* * { border-radius: var(--ThemePanelBorderRounding) !important; } */

    /* ----------------------------------------------------------------------- */
    /* background presets (credits to ThaSilentArtist)
    /* ----------------------------------------------------------------------- */
    --bg-1: url("https://fluxerusercontent.com/attachments/1474610319297830991/1481279988511911959/41511cd77e70.png");
    --bg-2: url("https://fluxerusercontent.com/attachments/1474610319297830991/1481670714326512122/a8082672504ec71.gif");
    --bg-3: url("https://fluxerusercontent.com/attachments/1474610319297830991/1481671197485134759/rocket_thasilentartist.png");
}


/* ################################################################################################# */
/* ################################################################################################# */
/* ################################################################################################# */

/* ---------------------------------------------------------------- */
/* basic setup */
/* ---------------------------------------------------------------- */

html {
    background: var(--ThemeBackgroundColor);
    opacity: 1;
    background-image:  radial-gradient(var(--ThemeFlatPrimary) 2px, var(--ThemeBackgroundColor) 2px);
    background-size: 4px 4px;
}

/* prevent background turning black in mobile view */
body {
    background: transparent!important;
}

/* this holds the background image */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--background-image);
    background-size: var(--backgroundSize);
    background-position: var(--backgroundPosition);
    background-repeat: var(--backgroundRepeat);
    filter: blur(var(--backgroundBlur));
    opacity: var(--backgroundOpacity);
    z-index: -1;
}


/* remove backgrounds. this is safer than overwriting the color variables directly */
html:not(.auth-page) [class*="App.module__appContainer_"],
[class*="App.module__appContainer_"],
[class*="GuildsLayout.module__guildsLayoutContainer_"],
[class*="GuildsLayout.module__guildListScrollContainer_"],
[class*="GuildsLayout.module__contentContainer_"],
[class*="UserArea.module__userAreaInnerWrapper_"],
[class*="OutlineFrame.module__frame_"],
[class*="GuildsLayout.module__contentInner_"],
[class*="GuildLayout.module__guildLayoutContainer_"],
[class*="ChannelListContent.module__channelListScroller_"],
[class*="GuildLayout.module__guildMainContent_"],
[class*="ChannelLayout.module__channelLayoutContainer_"],
[class*="ChannelIndexPage.module__channelGrid_"],
[class*="ChannelHeader.module__headerContainer_"],
[class*="ChannelChatLayout.module__container_"],
[class*="InputWrapper.module__box_"],
[class*="GuildHeader.module__headerContainer_"],
[class*="DMLayout.module__dmLayoutContainer_"],
[class*="DMList.module__dmListContainer_"],
[class*="DMList.module__dmListHeader_"],
[class*="DMList.module__desktopScroller_"],
[class*="DMList.module__dmChannelList_"],
[class*="DMLayout.module__contentColumn_"],
[class*="DMLayout.module__contentInner_"],
[class*="DMFriendsView.module__container_"],
[class*="UserProfileModal.module__modalContainer_"],
[class*="Divider.module__text_"],
[class*="Divider.module__dateWithUnreadText_"],
[class*="SplashScreen.module__splashOverlay_"],
[class*="MobileTextareaLayout.module__mobilePlusButton_"],
[class*="MobileTextareaLayout.module__mobileInputContainer_"],
[class*="MobileTextareaLayout.module__mobileVoiceButton_"],
[class*="ChannelHeader.module__iconButtonMobile_"],
[class*="NotificationsPage.module__container_"],
[class*="SelectBottomSheet.module__trigger_"],
[class*="NotificationsPage.module__bookmarkButton_"],
[class*="YouPage.module__profile_"],
[class*="YouPage.module__noteIconWrapper_"],
[class*="DMList.module__mobileContainer_"],
[class*="DMList.module__mobileScroller_"],
[class*="DMList.module__mobileHeaderButton_"],
[class*="DMList.module__mobileAddFriendButton_"],
[class*="MemberListContainer.module__memberListScroller_"],
[class*="ChannelSearchResults.module__container_"],
[class*="GuildNavbarSkeleton.module__skeletonHeader_"]
{
    background: transparent;
}

/* ---------------------------------------------------------------- */
/* panel scaling fixes | setup to ensure proper scaling with custom area margins
/* ---------------------------------------------------------------- */

/* server list container */
[class*="GuildsLayout.module__guildListScrollerWrapper_"],
/* server channel list */
[class*="GuildNavbar.module__guildNavbarContainer_"],
/* server channel list skeleton */
[class*="GuildNavbarSkeleton.module__skeletonContainer_"],
/* dm list container */
[class*="DMLayout.module__dmListColumn_"]
{
    width: -webkit-fill-available;
    height: calc(100% - var(--layout-user-area-reserved-height) - var(--layout-mobile-bottom-nav-reserved-height) - var(--ThemePanelMargin) - var(--ThemePanelBorderThickness) * 2);
}
/* self status */
[class*="GuildsLayout.module__userAreaWrapper_"]
{
    width: calc(var(--layout-guild-list-width) + var(--layout-sidebar-width) + var(--ThemePanelMargin));
}

/* channel header to message list */
[class*="ChannelIndexPage.module__channelGrid_"]
{
    display: flex;
    flex-direction: column;
}
/* typing users list
[class*="ChannelChatLayout.module__typingArea_"]
{
    height: fit-content;
    transition-property: height;
    transition-duration: 0.3s;
} */

/* self profile popout */
[class*="UserAreaPopout.module__container_"]
{
    width: inherit;
}


/* ---------------------------------------------------------------- */
/* panel gaps/margins
/* ---------------------------------------------------------------- */

/* whole ui app layout container */
[class*="AppLayout.module__appLayout_"]
{
    padding: var(--ThemePanelMargin);
    gap: var(--ThemePanelMargin);
}

/* whole ui layout container */
[class*="GuildsLayout.module__guildsLayoutContainer_"],
/* whole ui content container */
[class*="GuildsLayout.module__contentContainer_"],
/* dm area container */
[class*="DMLayout.module__dmLayoutContainer_"],
/*  channel header to message list */
[class*="ChannelIndexPage.module__channelGrid_"],
/*  messages to text input */
[class*="ChannelChatLayout.module__container_"],
/* server area container */
[class*="GuildLayout.module__guildLayoutContent_"],
/* friendslist to active panel */
[class*="DMFriendsView.module__container_"],
/* friendslist header & friendslist */
[class*="DMFriendsView.module__mainColumn_"],
/* mobile notifications page header to notifs */
[class*="NotificationsPage.module__container_"]
{
    gap: var(--ThemePanelMargin);
}

/*  messages to text input | correcting for the typing members section */
[class*="ChannelChatLayout.module__container_"] {
    gap: calc(var(--ThemePanelMargin) / 2);
}


/* these require a margin because using gap leaves a gap even when those panels are hidden. */
/*  message list to member list */
[class*="MemberListContainer.module__memberListContainer_"],
/*  message list to search results */
[class*="ChannelIndexPage.module__searchPanel_"]
{
    margin-left: var(--ThemePanelMargin);
    margin-right: var(--ThemePanelMargin);
    width: calc(100% - var(--ThemePanelMargin));
}

/* server list */
[class*="GuildsLayout.module__guildListScrollContainer_"] {
    padding-top: var(--spacing-2);
}


/* ordered list fix */
[class*="Markup.module__markup_"] ol {
    -webkit-margin-start: calc(1.4em + var(--totalCharacters, 1) * 0.6em);
    margin-inline-start: calc(1.4em + var(--totalCharacters, 1) * 0.6em);
}
/* unordered list fix */
[class*="Markup.module__markup_"] ul {
    -webkit-margin-start: calc(0.8em + var(--totalCharacters, 1) * 0.6em);
    margin-inline-start: calc(0.8em + var(--totalCharacters, 1) * 0.6em);
}

/* ---------------------------------------------------------------- */
/* panel borders
/* ---------------------------------------------------------------- */

/* remove default panel dividers */
[class*="UserArea.module__separator_"],
[class*="OutlineFrame.module__divider_"],
[class*="ChannelIndexPage.module__memberListDivider_"]
{
    display: none;
}
/* remove default panel borders */
[class*="ActiveNowSidebar.module__sidebar_"],
[class*="OutlineFrame.module__frame_"] {
    border: none;
}



/* loading splashscreen */
[class*='SplashScreen.module__splashContent_'],
/* server sidebar */
[class*="GuildsLayout.module__guildListScroller"],
/* dm list */
[class*="DMLayout.module__dmListColumn_"],
/* server channel list */
[class*="GuildNavbar.module__guildNavbarContainer_"],
/* self status */
[class*="GuildsLayout.module__userAreaWrapper_"],
/* channel header */
[class*="ChannelHeader.module__headerWrapper_"],
/* channel member list */
[class*="MemberListContainer.module__memberListContainer_"],
/* friendslist */
[class*='DMFriendsView.module__content_'],
/* friendslist active now panel */
[class*="ActiveNowSidebar.module__sidebar_"],
/* search results */
[class*="ChannelIndexPage.module__searchPanel_"],
/* settings panel */
[class*="Modal.module__root_"],
/* VC panel */
[class*="VoiceCallView.module__root_"],
/* VC panel empty */
[class*="ChannelIndexPage.module__emptyStateContent_"],
/* server member page */
[class*="GuildMembersPage.module__pageContainer_"],
/* mobile bottom nav */
[class*="MobileBottomNav.module__container_"],
/* mobile notifications page header */
[class*="NotificationsPage.module__header_"],
/* mobile notifications page content */
[class*="NotificationsPage.module__content_"],
/* mobile own profile page */
[class*="YouPage.module__container_"],
/* server discovery explore page */
[class*="DiscoveryPage.module__container_"],
/* auth page */
[class*="AuthLayout.module__card_"],
/* server unavailable */
[class*="GuildLayout.module__guildUnavailableContainer_"],
/* server unavailable channels skeleton */
[class*="GuildNavbarSkeleton.module__skeletonContainer_"]
{
    border: var(--ThemePanelBorder)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
    backdrop-filter: blur(var(--ThemePanelBlur)) !important;
    -webkit-backdrop-filter: blur(var(--ThemePanelBlur)) !important;
    background: var(--ThemePanelBGColor)!important;
    transition: var(--transition-slow);
    box-shadow: var(--ThemePanelShadow)!important;
}


/* channel message container */
[class*="ChannelChatLayout.module__messagesArea_"],
/* chat input area */
[class*='ChannelChatLayout\.module__textareaArea_'] {
    border: var(--ThemePanelBorder)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
    backdrop-filter: blur(var(--ThemePanelBlur))!important;
    -webkit-backdrop-filter: blur(var(--ThemePanelBlur))!important;
    background: var(--ThemeFlatDarker)!important;
    transition: var(--transition-slow);
    box-shadow: none !important;
}

[class*="ChannelChatLayout.module__messagesArea___"] {
    background: var(--ThemeFlatDarker);
}

[class*='ChannelChatLayout\.module__textareaArea_'],
[class*="TextareaInput.module__textarea___"],
[class*="TextareaButton.module__button___"] {
    background: #aa0000 !important;
    color: #ffff00 !important;
}



/* area borders hovered */
/* loading splashscreen */
[class*='SplashScreen.module__splashContent_']:hover,
/* server sidebar */
[class*="GuildsLayout.module__guildListScroller"]:hover,
/* dm list */
[class*="DMLayout.module__dmListColumn_"]:hover,
/* server channel list */
[class*="GuildNavbar.module__guildNavbarContainer_"]:hover,
/* self status */
[class*="GuildsLayout.module__userAreaWrapper_"]:hover,
/* channel header */
[class*="ChannelHeader.module__headerWrapper_"]:hover,
/* channel member list */
[class*="MemberListContainer.module__memberListContainer_"]:hover,
/* channel message container */
[class*="ChannelChatLayout.module__messagesArea_"]:hover,
/* chat input area */
[class*='ChannelChatLayout\.module__textareaArea_']:hover,
/* friendslist */
[class*='DMFriendsView.module__content_']:hover,
/* friendslist active now panel */
[class*="ActiveNowSidebar.module__sidebar_"]:hover,
/* search results */
[class*="ChannelIndexPage.module__searchPanel_"]:hover,
/* settings panel */
[class*="Modal.module__root_"]:hover,
/* VC panel */
[class*="VoiceCallView.module__root_"]:hover,
/* VC panel empty */
[class*="ChannelIndexPage.module__emptyStateContent_"]:hover,
/* server member page */
[class*="GuildMembersPage.module__pageContainer_"]:hover,
/* mobile bottom nav */
[class*="MobileBottomNav.module__container_"]:hover,
/* mobile notifications page header */
[class*="NotificationsPage.module__header_"]:hover,
/* mobile notifications page content */
[class*="NotificationsPage.module__content_"]:hover,
/* mobile own profile page */
[class*="YouPage.module__container_"]:hover,
/* server discovery explore page */
[class*="DiscoveryPage.module__container_"]:hover,
/* auth page */
[class*="AuthLayout.module__card_"]:hover,
/* server unavailable */
[class*="GuildLayout.module__guildUnavailableContainer_"]:hover,
/* server unavailable channels skeleton */
[class*="GuildNavbarSkeleton.module__skeletonContainer_"]:hover
{
    background: var(--ThemePanelBGColor);
    border: var(--ThemePanelBorder)!important;
    transition: var(--transition-fast);
}


/* channel message container */
[class*="ChannelChatLayout.module__messagesArea_"]:hover,
/* chat input area */
[class*='ChannelChatLayout\.module__textareaArea_']:hover {
    border: double yellow 6px !important;
}


/* hide Fluxer logo pulse */
[class*="iconPulse___"] {
    display: none !important;
}



/* ---------------------------------------------------------------- */
/* settings menu
/* ---------------------------------------------------------------- */
/* settings menu backdrop */
[class*="Modal.module__modalBackdrop_"] {
    backdrop-filter: blur(var(--ThemePanelBlur));
    opacity: 1!important;
    background: var(--ThemeDarkenMedium);
}

/* settings menu panel */
[class*="Modal.module__root_"] {
    background-color: var(--ThemeDarkenMedium);
    background-color: var(--ThemeFlatPrimary)!important;
}



/* ---------------------------------------------------------------- */
/* dm list
/* ---------------------------------------------------------------- */
/* dm list users */
[class*='DMList.module__dmItem_'] {
    background: rgba(var(--brand-secondary), 0.8)!important;
    transition: var(--transition-normal);
    margin: 0px 6px 6px -2px !important;
    width: calc(100% - 8px) !important;
}
/* dm list users hover*/
[class*='DMList.module__dmItem_']:hover {
    background: var(--brand-primary)!important;
    color: black !important;
    transition-duration: 0.0s;
}

/* dm list active user */
[class*='DMList.module__dmItemSelected_'] {
    background: var(--brand-primary)!important;
    background: #ffffff21!important;
    color: black !important;
}

[class*='DMList.module__dmItemSelected_']:hover {
    filter: brightness(1.2);
}


/* ---------------------------------------------------------------- */
/* markup
/* ---------------------------------------------------------------- */

/*block quote & markup alert panels */
[class*="Markup.module__blockquoteContainer_"],
[class*="Markup.module__alert_"]
{
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-secondary) 50%, transparent),
        transparent
    )!important;
}
/* alert divider line */
[class*="Markup.module__alert_"]::before
{
    border-radius: calc(4px * var(--ThemeRoundingMultiplier))!important;
}
/* blockquote divider line */
[class*="Markup.module__blockquoteDivider_"] {
    background-color: var(--brand-primary) !important;
}


/* ---------------------------------------------------------------- */
/* modals
/* ---------------------------------------------------------------- */

/* NOTE: backdrop filter doesnt work on these panels. might reconsider re-adding backdropfilter to their parent Popout.module__popout_ */
/* media picker*/
[class*='ExpressionPickerPopout.module__container_'],
/* channel pins*/
[class*='ChannelPinsPopout.module__container_'],
/* right click side subpanel | its inconsistent whether or not backdrop-filter works on these */
[class*='ContextMenu.module__submenuPopover_'],
/* searchbar filter list */
[class*="MessageSearchBar.module__popoutContainer_"],
/* settings profile profile type dropdown */
.css-206gj2-menu,
/* notifications inbox */
[class*='InboxPopout.module__container_'],
/* profile card */
[class*='ProfileCardLayout.module__profileCard_'],
/* server options context panel */
[class*='GuildHeaderPopout.module__container_'] {
    background-color: var(--ThemePanelModalBGColor)!important;
    border: var(--ThemePanelBorder)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
    box-shadow: var(--ThemePanelShadow)!important;
}

/* ---------------------------------------------------------------- */
/* context panels
/* ---------------------------------------------------------------- */

/* emoji tooltip */
[class*="EmojiTooltipContent.module__container_"],
/* tooltip panels */
[class*="Tooltip.module__tooltip_"] {
    backdrop-filter: blur(var(--ThemePanelBlurSmall));
    background: var(--ThemePanelContextBGColor)!important;
    box-shadow: var(--ThemePanelShadow)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
}

/* emoji autocomplete */
[class*="Autocomplete.module__container_"] {
    border-left: unset!important;
    border-right: unset!important;
    border-bottom: unset!important;
    border-radius: calc(var(--ThemePanelBorderRounding) - var(--ThemePanelBorderThickness))!important;
    top: calc(0px - var(--ThemePanelMargin) - var(--ThemePanelBorderThickness)*2)!important;

    backdrop-filter: blur(var(--ThemePanelBlurSmall));
    background: var(--ThemePanelContextBGColor);
}


/* right click context menu */
[class*='module__contextMenu_'],
/* vc stats info panel */
[class*='VoiceStatsOverlay.module__overlay_'],
/* media buttons */
[class*='module__mediaHoverAction_'] > button {
    backdrop-filter: blur(var(--ThemePanelBlurSmall));
    background-color: var(--ThemePanelContextBGColor);
    box-shadow: var(--ThemePanelShadow)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
}

/* message hover reaction suggestions. blur effect doesnt seem to work correctly. */
[class*='MessageActionBar.module__actionBar_'] {
    background-color: var(--ThemePanelContextBGColor);
    box-shadow: var(--ThemePanelShadow)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
}

/* ---------------------------------------------------------------- */
/* user profile poputs
/* ---------------------------------------------------------------- */

/* full user profile */
[class*='UserProfileModal.module__modalRoot_'] {
    height: unset;
}

/* small user profile popouts */
[class*='ProfileCardLayout.module__profileCard_'],
/* big user profile popouts */
[class*='UserProfileModal.module__modalContainer_'] {
    border-width: var(--ThemePanelBorderWidth)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
}

/* pfp button */
[class*="ProfileCardBanner.module__avatarButton_"],
[class*="UserProfileModal.module__avatarContainer_"]
{
    anchor-name: --anchor-userstatus;
    background-color: var(--ThemePanelPrimary);
    border-color:  var(--ThemeFlatPrimary);
}

/* "display name, username, pronouns */
[class*="ProfileCardUserInfo.module__userInfoContainer_"],
[class*="UserProfileModal.module__userInfoContent_"]
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/* display name */
[class*="ProfileCardUserInfo.module__nameRow_"],
[class*="UserProfileModal.module__nameRow_"]
{
    width: 100%;
}
/* username */
[class*="ProfileCardUserInfo.module__usernameRow_"],
[class*="UserProfileModal.module__usernameRow_"]
{
    gap: unset;
    color: var(--text-secondary);
}
/* username pronouns separator */
[class*="ProfileCardUserInfo.module__pronouns_"]::before,
[class*="UserProfileModal.module__pronouns_"]::before
{
    content: "";
    width: 4px!important;
    height: 4px!important;
    margin: 0rem 0.5rem;
    background-color: var(--text-tertiary);
    border-radius: var(--radius-full);
}

/* pronouns */
[class*="ProfileCardUserInfo.module__pronouns_"],
[class*="UserProfileModal.module__pronouns_"]
{
    font-size: 14px;
    margin-top: unset;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
}

/* custom profile status */
[class*="UserProfilePopout.module__profileCustomStatus_"],
/* custom profile status (user area) */
[class*="UserAreaPopout.module__customStatusRow_"],
[class*="UserProfileModal.module__customStatusRow_"],
/* profile preview custom status */
[class*="ProfilePreview.module__profileCustomStatus_"]
{
    align-items: flex-start;

    position: absolute;
    position-anchor: --anchor-userstatus;
    position-area: right span-all;
    position-visibility: always;


    margin-left: 0.75rem;

    width: max-content;
    max-width: 175px;
    max-height: 3.7rem;

    overflow: hidden;

    background: var(--ThemeFlatLighter);
    /* border: 1px solid var(--background-header-secondary); */
    border-radius: calc(4px * var(--ThemeRoundingMultiplier));
    box-shadow: var(--shadow-md);

    transition: var(--transition-normal);
}

/* custom profile status */
[class*="UserProfilePopout.module__profileCustomStatus_"]:hover,
/* custom profile status (user area) */
[class*="UserAreaPopout.module__customStatusRow_"]:hover,
[class*="UserProfileModal.module__customStatusRow_"]:hover,
/* profile preview custom status */
[class*="ProfilePreview.module__profileCustomStatus_"]:hover {
    max-height: 10rem;
}

/* custom profile status inner */
[class*="CustomStatusDisplay"] > [class*="CustomStatusDisplay.module__content_"],
[class*="UserProfilePopout"] > [class*="CustomStatusDisplay.module__content_"],
[class*="UserProfileModal"] > [class*="CustomStatusDisplay.module__content_"],
[class*="ProfilePreview"] > [class*="CustomStatusDisplay.module__content_"] {
    margin: 0.25rem 0.5rem;
}

[class*="UserProfileModal.module__profileContentWrapper_"] {
    background: var(--ThemeFlatDarker);
}
/* mobile view personal page bio section */
[class*="YouPage.module__section_"],
/* mobile view personal page note section */
[class*="YouPage.module__noteButton_"],
/* mobile view personal page settings button */
    [class*="YouPage.module__settingsButton_"] {
    background: var(--ThemeDarkenLight);
}

/* bio join date notes etc container */
[class*="UserProfileModal.module__profileContent_"] {
    padding-top: 16px!important;
}


/* ---------------------------------------------------------------- */
/* server member list panel
/* ---------------------------------------------------------------- */

/* sever member list tab table */
[class*="GuildMembersPage.module__tableWrapper_"],
/* sever member list tab rows per page dropdown */
.css-185nao-control {
    background-color: var(--ThemeDarkenLight)!important;
}
.css-185nao-control:focus {
    background-color: var(--ThemeDarkenLight)!important;
}

/* sever member list tab */
[class*="GuildMembersPage.module__table_"]
{
    margin-top: 0;
}

/* ---------------------------------------------------------------- */
/* forwarded messages
/* ---------------------------------------------------------------- */

/* forwarded message link button */
[class*="MessageAttachments.module__forwardedSourceButton_"]
{
    background-color: color-mix(in srgb, var(--markup-mention-fill) 70%, transparent);
    border-color: color-mix(in srgb, var(--markup-mention-border) 65%, transparent);
    color: var(--markup-mention-text);
}
/* forwarded message link button hover */
[class*="MessageAttachments.module__forwardedSourceButton_"]:hover
{
    background-color: var(--markup-mention-fill);
    border-color: var(--markup-mention-border);
}
/* "forwarded from" label */
[class*="MessageAttachments.module__forwardedSourceLabel_"]
{
    color: var(--markup-mention-text);
}

/* forwarded message link source & destination label*/
[class*="MessageAttachments.module__forwardedSourceName_"]
{
    color: var(--markup-mention-text);
}
/* forwarded message link channel symbol */
[class*="MessageAttachments.module__forwardedSourceButton_"] svg
{
    fill: var(--markup-mention-text);
}

/* ---------------------------------------------------------------- */
/* titlebar
 /** ---------------------------------------------------------------- */

 /* window titlebar */
 [class*="NativeTitlebar.module__titlebar_"] {
     background: var(--ThemeBackgroundColor)!important;
 }
 /* Fluxer wordmark inside titlebar */
 [class*="NativeTitlebar"][class*="module__wordmark"] {
     color: var(--ThemeFlatPrimary) !important;
 }
 /* window control buttons (min/max/close) */
 [class*="NativeTitlebar"][class*="module__controlButton"] {
     background: var(--brand-primary)!important;
     border-radius: var(--ThemePanelBorderRounding)!important;
     margin: 2px 1px !important;
     color: var(--ThemeFlatDarker) !important;
     box-shadow: 3px 3px rgb(0, 0, 0, 0.8)!important;
 }

 [class*="NativeTitlebar"][class*="module__controlButton"]:hover {
     background: var(--brand-secondary)!important;
     box-shadow: 3px 3px rgb(0, 0, 0, 0.8)!important;
     color: white !important;
 }

 [class*="NativeTitlebar"][class*="module__controlButton"]:active {
     background: var(--ThemeFlatDarker) !important;
     color: white !important;
     margin: 3px 0 2px 0 !important;
     box-shadow: none important;
 }

/* ---------------------------------------------------------------- */
/* misc panels
/* ---------------------------------------------------------------- */

/* most buttons */
[class*="Button.module__button___"],
[class="Button.module__button___Yzg1Yz Button.module__inverted___Yzg1Yz Button.module__superCompact___Yzg1Yz Button.module__fitContent___Yzg1Yz"] {
    border-radius: var(--ThemePanelBorderRounding)!important;
}

/*  member list */
[class*="MemberListContainer.module__memberListContainer_"] {
    min-width: 10rem;
    max-width: 20rem;
}
[class*="DMList.module__dmItemUserTag___"],
[class*="DMFriendsView.module__tabButton___"] {
    background: var(--brand-primary);
    color: var(--ThemeFlatDarker);
}

/* generic button primary */
[class*="Button.module__primary_"] {
    background: var(--brand-primary)!important;
    color: black !important;
}
[class*="Button.module__primary_"]:hover {
    background: var(--brand-secondary)!important;
    color: white !important;
}

/* generic button secondary */
[class*="Button.module__secondary_"] {
    background: var(--ThemeFlatLighter)!important;
    color: white !important;
}
[class*="Button.module__secondary_"]:hover {
    background: var(--ThemeFlatDarker)!important;
}

/* keyboard hints */
[class*="KeybindHint.module__key___"] {
    background: var(--brand-primary);
    color: var(--ThemeFlatDarker);
    border-radius: var(--ThemePanelRounding);
}

/* scroll indicator */
[class*="ScrollIndicatorOverlay.module__indicator___"] {
    background: var(--ThemePanelContextBGColor);
    color: yellow !important;
    border-radius: var(--ThemePanelBorderRounding);
    box-shadow: var(--ThemePanelShadow);
}

/* embed cards */
[class*="EmbedCard.module__"],
[class*="ThemeEmbed.module__iconCircleActive___"] {
    border-radius: var(--ThemePanelBorderRounding);
}
[class*="ThemeEmbed.module__iconOnBrand___"] {
    background: var(--brand-primary);
    color: var(--ThemeFlatDarker);
}

/* Plutonium-related elements */

[class*="ToggleButton.module__active___"] {
    background: var(--brand-primary)!important;
    color: black !important;
    border-radius: var(--ThemePanelBorderRounding);
}

[class*="PricingCard.module__cardPopular___"],
[class*="PricingCard.module__cardTitlePopular___YmJhOD PricingCard.module__cardTitle___YmJhOD"],
[class*="PricingCard.module__cardPricePopular___YmJhOD PricingCard.module__cardPrice___YmJhOD"],
[class*="PricingCard.module__cardPeriodPopular___YmJhOD PricingCard.module__cardPeriod___YmJhOD"],
[class*="PlutoniumUpsell.module__text___"],
[class*="PlutoniumUpsell.module__icon___"]{
    background: var(--brand-primary)!important;
    color: black;
}

[class*="PricingCard.module__card___"] {
    border-radius: var(--ThemePanelBorderRounding)!important;
}

[class*="PricingCard.module__popularBadge___"] {
    color: black !important;
    border-radius: var(--ThemePanelBorderRounding)!important;
}


/* user mentioned */
[class*="Message\.module__messageMentioned_"]
{
    background: #aa0000 !important;
}
[class*="Markup.module__mention___"] {
    background: var(--ThemeFlatLighter)!important;
    color: yellow !important;
}

/* embed backgrounds */
[class*="EmbedCard.module__wrapper_"],
[class*="Embed.module__embedFull_"],
[class*="AttachmentFile.module__attachmentContainer_"],
[class*="InlineAudioPlayer.module__container_"] {
    background: var(--ThemeDarkenLight);
}

/* Codeblocks */
[class*="ThemeAcceptModal.module__codeContainer___"] pre,
[class*="Markup.module__codeContainer___"] pre {
    background: var(--ThemeFlatDarker);
}

/* attachment uploads */
[class*="ChannelAttachmentArea.module__upload_"] {
    background: var(--ThemeDarkenLight);
}

/* video controls */
[class*="VideoPlayer.module__controlsRow_"] {
    background: var(--ThemeDarkenLight);
}

/* message preview (like in bookmarks for example) */
[class*="MessagePreview.module__previewCard_"]
{
    overflow: hidden;
    background: var(--ThemeDarkenLight);
}

/* vc header gradient */
[class*='VoiceCallView.module__voiceHeader_']::before {
    border-radius: var(--ThemePanelBorderRounding) var(--ThemePanelBorderRounding) 0 0;
}
/* vc buttons gradient */
[class*='VoiceCallView\.module__controlBarContainer_']::before {
    display: none;
}


/* user typing status user container thingy */
[class*='ChannelChatLayout.module__typingContent_'] {
    /* these were from a test, it was kinda irritating to have the messages window shift whenever someone typed.
    height: fit-content;
    position: inherit;
    left: unset;
    right: unset;
    bottom: unset;
    */
    transition-property: height;
    transition-duration: 0.3s;
}

/* user typing status user pills */
[class*='Message.module__typingPill_'] {
    backdrop-filter: blur(var(--ThemePanelBlurSmall));
    -webkit-backdrop-filter: blur(var(--ThemePanelBlurSmall))!important;
    background-color: var(--ThemePanelBGColor);
    box-shadow: var(--ThemePanelShadow);
    /* transform: none!important; */
}

/* guild panel buttons */

[class*="GuildsLayout.module__fluxerButtonIcon___"] {
    background: var(--brand-primary);
    color: var(--ThemeFlatDarker)!important;
}


/* "X new messages since Date" panel */
[class*='Messages.module__newMessagesBar_'] {
    padding-top: 0px;
    top: 0.5rem;
    border-radius: var(--ThemePanelBorderRounding)!important;
}
[class*="Messages.module__newMessagesBarText___"],
[class*="Messages.module__newMessagesBarAction___"] {
    color: black !important;
}
/* "youre viewing older messages" panel */
[aria-busy="false"][class*='Messages.module__newMessagesBar_'] {
    padding-top: 0px;
    bottom: 0.5rem!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
}


/* emoji reactions */
[class*='MessageReactions.module__reactionButton_'] {
    background: var(--ThemeDarkenLight);
    border: 1px solid var(--background-modifier-accent);
}

/* profile role badge */
[class*='RoleManagement.module__roleBadge_'] {
    background: var(--ThemeDarkenLight);
}


/* discovery explore page top banner */
[class*="DiscoveryPage.module__hero_"]
{
    border-radius: calc(var(--ThemePanelBorderRounding) - var(--spacing-5) / 2);
    margin: var(--spacing-5);
    margin-bottom: unset;
}


/* discovery explore page search bar */
[class*="DiscoveryPage.module__searchInput_"]
{
    background-color: var(--ThemeDarkenMedium);
}
/* search/input bars */
[class*="Input.module__input_"] {
    background-color: var(--ThemeDarkenLight);
}

/* search results container inner */
[class*="ChannelSearchResults.module__container_"] {
    border: unset;
    border-radius: var(--ThemePanelBorderRounding);
    overflow: hidden;
}
/* search results */
[class*="ChannelSearchResults.module__messageItem_"] {
    border-radius: calc(var(--ThemePanelBorderRounding) - 0.5rem);
    background-color: var(--ThemeDarkenLight);
}

/* toasts */
[class*="Toast.module__toast_"]
{
    border-radius: var(--radius-full)!important;
    background-color: var(--ThemeFlatPrimary)!important;
}

/* unread divider with date */
[class*="Divider.module__dateWithUnreadText_"] {
    position: static;
    transform: none;
}

/* server folder expanded */
[class*="GuildFolderItem.module__expandedFolderBackground_"] {
    border-radius: calc(var(--guild-icon-size)/100*30 + var(--guild-list-item-inset)); /* focused server icon border-radius (30%) + padding */
}
/* server folder items container */
[class*="GuildFolderItem.module__expandedGuilds_"] {
    padding-bottom: 0px;
    overflow: visible!important;
}

/* make theme input field resizable */
textarea.FormSurface\.module__surface___XzQ4ZT.Input\.module__input___ZGQ3MT.Scroller\.module__scroller___ZTgyZD {
    resize: vertical !important;
    max-height: 900px !important;
}


/* ---------------------------------------------------------------- */
/* splashscreen
/* ---------------------------------------------------------------- */
[class*='SplashScreen.module__splashContent_'] {
    padding: 10px;
    background: var(--ThemePanelBGColor);
    aspect-ratio: 1 / 1;
    justify-content: center;
}

@media (min-width: 1024px) {
    [class*='SplashScreen.module__splashContent_'] {
        width: 30rem;
        height: 30rem;
    }
}
@media (min-width: 768px) {
    [class*='SplashScreen.module__splashContent_'] {
        width: 30rem;
        height: 30rem;
    }
}
/* Loading screen message
[class*='ChannelHeader.module__headerWrapper_']::after,
[class*='SplashScreen.module__connectionStatus_']::after */
[class*='SplashScreen.module__splashContent_']::after {

    border: var(--ThemePanelBorder)!important;
    border-radius: var(--ThemePanelBorderRounding)!important;
    backdrop-filter: blur(var(--ThemePanelBlur))!important;
    -webkit-backdrop-filter: blur(var(--ThemePanelBlur))!important;

    transition: var(--transition-slow);


    position: absolute;
    bottom: calc(-64px - var(--ThemePanelMargin));

    /* margin-top: calc(120px + var(--ThemePanelMargin)); */
    height: 40px;
    width: fit-content;
    padding: 0.3rem 0.5rem;
    line-height: 18px;


    content: "░▒▓ DIALOGUE.386 ▓▒░";
    background: var(--ThemePanelBGColor);
    color: var(--brand-primary);
    box-shadow: var(--ThemePanelShadow);

    font-weight: bold;
    z-index: 100;
}

/* ---------------------------------------------------------------- */
/* fluxer ui fixes | things that should be fixed on fluxer's end
/* ---------------------------------------------------------------- */

[class*='ScreenShareSettingsModal.module__audioToggleRow_'] {
    padding: 12px;
}

/* unread messages "NEW" divider */
[class*='Divider.module__unreadBadge_'] {
    height: unset;
}

/* profile role badge name */
[class*='RoleManagement.module__roleName_'] {
    line-height: inherit;
}

/* ################################################################################################# */
/* ################################################################################################# */
/* ################################################################################################# */

/* ---------------------------------------------------------------- */
/* Customization: Panel labels */
/* ---------------------------------------------------------------- */
@property --ThemePanelLabels {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--ThemePanelLabels: on) {

    /* prevent clipping off panel labels */

    [class*="GuildNavbar.module__guildNavbarContainer_"],
    [class*="ChannelChatLayout.module__messagesArea_"],
    [class*="ChannelChatLayout.module__container_"],
    [class*="ChannelIndexPage.module__channelGrid_"],
    [class*="GuildLayout.module__guildMainContent_"],
    [class*="ChannelLayout.module__channelLayoutContainer_"],
    [class*="ChannelHeader.module__headerWrapper_"],
    [class*="ChannelIndexPage.module__contentGrid_"],
    [class*="OutlineFrame.module__frame_"],
    [class*="OutlineFrame.module__body_"],
    [class*="MemberListContainer.module__memberListContainer_"],
    [class*='ChannelChatLayout.module__textareaArea_'],
    [class*="NotificationsPage.module__content_"],
    [class*="GuildNavbarSkeleton.module__skeletonContainer_"] {
        overflow: visible!important;
    }

    [class*="OutlineFrame.module__frame_"] {
        min-height: 0; /* magic memberlist overflow fix */
    }

    /* server sidebar */
    [class*="GuildsLayout.module__guildListScroller"],
    /* dm list */
    [class*="DMLayout.module__dmListColumn_"],
    /* server channel list */
    [class*="GuildNavbar.module__guildNavbarContainer_"],
    /* self status */
    [class*="GuildsLayout.module__userAreaWrapper_"],
    /* channel header */
    [class*="ChannelHeader.module__headerWrapper_"],
    /* channel member list */
    [class*="MemberListContainer.module__memberListContainer_"],
    /* channel message container */
    [class*="ChannelChatLayout.module__messagesArea_"],
    /* chat input area */
    [class*='ChannelChatLayout\.module__textareaArea_'],
    /* friendslist */
    [class*='DMFriendsView.module__content_'],
    /* friendslist active now panel */
    [class*="ActiveNowSidebar.module__sidebar_"],
    /* search results */
    [class*="ChannelIndexPage.module__searchPanel_"],
    [class*="ChannelChatLayout.module__messagesArea_"],
    [class*="ChannelHeader.module__headerWrapper_"],
    [class*="MemberListContainer.module__memberListContainer_"],
    [class*='ChannelChatLayout.module__textareaArea_'],
    /* vc panel */
    [class*="VoiceCallView.module__root_"],
    /* vc panel empty */
    [class*="ChannelIndexPage.module__emptyStateContent_"],
    /* server member page */
    [class*="GuildMembersPage.module__pageContainer_"],
    /* mobile nav bar */
    [class*="MobileBottomNav.module__container_"],
    /* mobile notifications page list */
    [class*="NotificationsPage.module__content_"],
    /* server discovery explore page */
    [class*="DiscoveryPage.module__container_"],
    /* server unavailable channels skeleton */
    [class*="GuildNavbarSkeleton.module__skeletonContainer_"],
    /* server unavailable server area */
    [class*="GuildLayout.module__guildUnavailableContainer_"] {
        &::after {
            display: block;
            position: absolute;
            top: -11px;
            left: 8px;
            line-height: 14px;
            padding: 2px 4px;
            z-index: 100;
            font-size: 16px;
            font-weight: bold;
            background: var(--ThemePanelBGColor);
            color: var(--ThemePanelBorderColor);

            transition: var(--transition-slow);
        }

        &:hover::after {
            color: var(--brand-primary);
            transition: var(--transition-fast);
        }
    }


    /* chat input area */
    [class*='ChannelChatLayout.module__textareaArea_']::after {
        content: "input";
    }
    /* server member page */
    [class*="GuildMembersPage.module__pageContainer_"]::after,
    /* server member list */
    [class*="MemberListContainer.module__memberListContainer_"]::after {
        content: "members";
    }
    /* server channel list */
    [class*="ChannelHeader.module__headerWrapper_"]::after {
        content: "channel";
    }
    /* dm list */
    [class*="DMLayout.module__dmListColumn_"]::after {
        content: "users";
    }
    /* server channel list */
    [class*="GuildNavbar.module__guildNavbarContainer_"]::after,
    /* server unavailable channels skeleton */
    [class*="GuildNavbarSkeleton.module__skeletonContainer_"]::after {
        content: "channels";
    }
    /* search results */
    [class*="ChannelIndexPage.module__searchPanel_"]::after {
        content: "search";
    }
    /* server sidebar */
    [class*="GuildsLayout.module__guildListScroller"]::after,
    [class*="MobileBottomNav.module__container_"]::after {
        content: "nav";
    }
    /* self status */
    [class*="GuildsLayout.module__userAreaWrapper_"]::after {
        content: "user";
    }
    /* friendslist */
    [class*='DMFriendsView.module__content_']::after {
        content: "friends";
    }
    /* friendslist active now panel */
    [class*="ActiveNowSidebar.module__sidebar_"]::after {
        content: "activity";
    }
    /* vc panel */
    [class*="VoiceCallView.module__root_"]::after,
    [class*="ChannelIndexPage.module__emptyStateContent_"]::after {
        content: "voice";
    }

    /* mobile notifications page list */
    [class*="NotificationsPage.module__content_"]::after {
        content: "messages";
    }

    /* server discovery explore page */
    [class*="DiscoveryPage.module__container_"]::after {
        content: "servers";
    }

    /* server unavailable server area */
    [class*="GuildLayout.module__guildUnavailableContainer_"]::after {
        content: "server";
    }
    /* cant get this one to work without clipping.
    [class*="ChannelChatLayout.module__messagesArea_"]::after {
        content: "chat";
    }
    */
}

/* ---------------------------------------------------------------- */
/* Customization: Avatar Shape */
/* ---------------------------------------------------------------- */

@property --SquareAvatars {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--SquareAvatars: off) {
    [class*="BaseAvatar"] {
        border-radius: 0px!important;
    }
}

@container body style(--SquareAvatars: on) {
    [class*="BaseAvatar"] {
        border-radius: 0px!important;
    }

    [class*="BaseAvatar"] > image {
        mask: none;
    }
}


/* ---------------------------------------------------------------- */
/* Customization: border online status */
/* ---------------------------------------------------------------- */

@property --OutlineOnlineStatus {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}


@container body style(--OutlineOnlineStatus: on) {
    /* hide original status indicator */
    [class*="BaseAvatar.module__statusContainer_"] {
        display: none!important;
    }

    [class*="BaseAvatar"] > image {
        mask: none;
        border-radius: var(--radius-full)!important;
    }

    [class*="BaseAvatar.module__container_"] {
        border-radius: var(--radius-full)!important;
        overflow: hidden;
    }


    [class*="BaseAvatar.module__container_"][aria-label*="Offline"],
    [class*="BaseAvatar.module__container_"][aria-label*="Do Not Disturb"],
    [class*="BaseAvatar.module__container_"][aria-label*="Idle"],
    [class*="BaseAvatar.module__container_"][aria-label*="Online"] {
        border-width: 0.15rem;
        border-style: solid;
    }

    [class*="BaseAvatar.module__container_"][aria-label*="Offline"] {
        border-color: var(--status-offline);
    }
    [class*="BaseAvatar.module__container_"][aria-label*="Do Not Disturb"] {
        border-color: var(--status-dnd);
    }
    [class*="BaseAvatar.module__container_"][aria-label*="Idle"] {
        border-color: var(--status-idle);
    }
    [class*="BaseAvatar.module__container_"][aria-label*="Online"] {
        border-color: var(--status-online);
    }

    /* pfp view outline medium */
    [class*="UserProfileModal"] [class*="BaseAvatar.module__container_"],
    [class*="ProfileCardBanner"] [class*="BaseAvatar.module__container_"],
    [class*="YouPage"] [class*="BaseAvatar.module__container_"]{
        border-width: 4px;
    }
}


/* ---------------------------------------------------------------- */
/* Customization: App Icon */
/* ---------------------------------------------------------------- */

@property --CustomAppIcon {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--CustomAppIcon: on) {
    /* replace appicon with custom image */
    [class*="GuildsLayout.module__fluxerSymbolIcon_"]
    {
        background: var(--ThemeCustomIconUrl) no-repeat;
        background-size: contain;
    }
    /* hide original svg path */
    [class*="GuildsLayout.module__fluxerSymbolIcon_"] > path {
        display: none;
    }
}


/* ---------------------------------------------------------------- */
/* Customization: Rounding */
/* ---------------------------------------------------------------- */

@property --UseDefaultRounding {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--UseDefaultRounding: off) {
    /* get rid of all panel rounding */
    * {
        border-radius: 0px!important;
    }

    [class*="Markup.module__markup_"] ul {
        list-style-type: square;
    }

    /* user popout banner pfp mask */
    [class*="ProfileCardBanner.module__bannerMask_"] > mask > circle,
    [class*="UserProfileModal.module__bannerMask_"] > mask > circle{
        display: none;
    }
}
/* ---------------------------------------------------------------- */
/* Customization: Message Bubbles */
/* ---------------------------------------------------------------- */

@property --MessageBubbles {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--MessageBubbles: on) {

    /*
    [aria-label="Message group"] {
        background: var(--ThemeMessageBubbleColor);
        border-radius: calc(var(--ThemePanelBorderRounding) - var(--chat-horizontal-padding)/2);
        border-radius: calc(var(--ThemePanelBorderRounding) * var(--ThemeRoundingMultiplier));
        padding-left: 0.3rem;
    } */

    [class*="messageContent"] {
        /* display: block !important;   restore proper layout */
        width: fit-content;          /* shrink to content */
        margin-top: 4px;
        padding: 8px 14px;
        background: var(--ThemeMessageBubbleColor)!important;
        border-radius: 12px !important;
    }
}



/* ---------------------------------------------------------------- */
/* Customization: Animations */
/* ---------------------------------------------------------------- */

@property --ExtraAnimations {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--ExtraAnimations: on) {

    /* channel select flash */
    [class*="ChannelItemSurface\.module__channelItemSurfaceSelected_"] {
        background-color: var(--background-modifier-selected);
        animation-name: ChannelSelectAnim;
        animation-duration: 1s;
    }

    @keyframes ChannelSelectAnim {
        from {background-color: var(--brand-primary);}
        to {background-color: var(--background-modifier-selected);}
    }

    /* server list favorites icon */
    [class*="GuildsLayout.module__favoritesIcon_"] {
        transition: transform 0.5s;
    }
    [class*="GuildsLayout.module__guildListItem_"]:hover [class*="GuildsLayout.module__favoritesIcon_"] {
        transform: rotate(216deg);
    }

    [class*="ChannelSearchResults.module__messageItem_"] {
        transition: var(--transition-fast);
    }

    [class*="ChannelSearchResults.module__messageItem_"]:hover {
        border-color: var(--ThemePanelBorderColorHovered);
        background-color: var(--background-modifier-hover);
    }
}


/* ---------------------------------------------------------------- */
/* Customization: horizontal server list */
/* ---------------------------------------------------------------- */

/* setting property setup */
@property --Horizontal-Serverlist {
    syntax: 'off | on';
    inherits: false;
    initial-value: left;
}

@property --Serverlist-Alignment {
    syntax: 'left | center | right';
    inherits: false;
    initial-value: left;
}


@container body style(--Horizontal-Serverlist: on) {

    /* doesnt have any effect placed here. need to find a workaround. */
    :root {
        --layout-guild-list-width: 4.4rem; /* more compact */
        --layout-sidebar-width: calc(16.875rem + var(--layout-guild-list-width))!important; /* make sidebar wider to compensate for extra space */
    }

    /* only show on desktop */
    @media (min-width: 650px) {


        /* container for server list & rest */
        [class*="GuildsLayout.module__guildsLayoutContainer_"] {
            display: flex;
            flex-direction: column;
        }

        /* make channel list etc wider to match user area */
        [class*="GuildsLayout.module__userAreaWrapper_"] {
            width: var(--layout-sidebar-width);
        }

        /* scroller wrapper */
        [class*="GuildsLayout.module__guildListScrollerWrapper_"] {
            height: var(--layout-guild-list-width);
            width: 100%;
        }
        /* scroller wrap | changed to fix hover region while allowing panel labels */
        [class*="GuildsLayout.module__guildListScrollerWrapper_"] [class*="Scroller.module__scrollerWrap_"] {
            overflow: hidden;
        }

        /* rotate scroller */
        [class*="GuildsLayout.module__guildListScrollContainer_"] {
            padding: var(--spacing-2) 0px;
            width: var(--layout-guild-list-width);
            height: calc(100vw - var(--ThemePanelMargin)*2 - var(--ThemePanelBorderThickness) * 2);

            transform: rotateZ(-90deg);
        }

        /* scroller child container*/
        [class*="GuildsLayout.module__guildListScrollContainer_"] [class*="Scroller.module__scrollerChildren_"] {
            align-items: flex-end;
        }

        /* serverlist section container */
        [class*="GuildsLayout.module__guildListContent_"] {
            align-items: flex-end;
            width: var(--layout-guild-list-width);
        }

        /* serverlist top & lower section */
        [class*="GuildsLayout.module__guildListTopSection_"],
        [class*="GuildsLayout.module__guildListGuildsSection_"] {
            width: unset;
        }

        /* unrotate server button & misc buttons */
        [class*="GuildsLayout.module__guildListItem_"],
        [class*="GuildFolderItem.module__folderHeader_"] {
            width: 3.7rem;
            transform: rotateZ(-180deg);
        }
        /* unrotate server image & extra buttons */
        [class*="GuildListDMItem.module__relative_"],
        [class*="GuildsLayout.module__relative_"],
        [class*="GuildFolderItem.module__relative_"],
        [class*="GuildsLayout.module__addGuildButtonIcon_"]
        {
            transform: rotateZ(-90deg);
        }


        @container body style(--Serverlist-Alignment: left) {
            [class*="GuildsLayout.module__guildListScrollContainer_"] [class*="Scroller.module__scrollerChildren_"] {
                justify-content: start;
            }
        }

        @container body style(--Serverlist-Alignment: center) {
            [class*="GuildsLayout.module__guildListScrollContainer_"] [class*="Scroller.module__scrollerChildren_"] {
                justify-content: center;
            }
        }

        @container body style(--Serverlist-Alignment: right) {

            /* reverse server list */
            [class*="GuildsLayout.module__guildListContent_"],
            [class*="GuildsLayout.module__guildListTopSection_"],
            [class*="GuildsLayout.module__guildListGuildsSection_"] {
                flex-direction: column-reverse;
            }

            [class*="GuildsLayout.module__guildListScrollContainer_"] [class*="Scroller.module__scrollerChildren_"] {
                justify-content: end;
            }
        }
    }
}



/* ################################################################################################# */
/* ################################################################################################# */
/* ################################################################################################# */


/* ---------------------------------------------------------------- */
/* mobile tweaks
/* ---------------------------------------------------------------- */

@media (max-width: 840px) {

    /* mobile bottom nav */
    [class*="MobileBottomNav.module__container_"] {
        margin: var(--ThemePanelMargin);
        margin-top: 0px;
    }


    /* mobile sheets */
    [class*="Sheet.module__root_"]
    /* mobile user profile popout
    [class*="UserProfileMobileSheet.module__profileContent_"]*/
    {
        background: var(--ThemeFlatDarker);
    }
    /* mobile sheets */
    [class*="Sheet.module__container_"]
    {
        border-radius: unset!important;
    }


    /* settings modal backdrop */
    [class*="Modal.module__modalBackdrop_"] {
        backdrop-filter: unset;
    }

    /* add friend button */
    [class*="DMList.module__mobileAddFriendButton_"] {
        width: 2rem;
        height: 2rem;
        padding: unset;
        align-items: center;
        justify-content: center;
    }
    [class*="DMList.module__mobileAddFriendButton_"] > svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    [class*="DMList.module__mobileAddFriendButton_"] > span {
        display: none;
    }


    /* notifications page content alignment */
    [class*="NotificationsPage.module__content_"] {
        justify-content: center;
    }

    /* notifications page content alignment */
    [class*="DMList.module__dmItemMobile_"] {
        height: 2.7rem;
    }

    /* notifications page X button */
    [class*="InboxMessageHeader\.module__headerIconButton_"] {
        background: var(--ThemeDarkenLight);
        background: transparent;
    }

    /* server list container */
    [class*="GuildsLayout.module__guildListScrollerWrapper_"],
    /* server channel list */
    [class*="GuildNavbar.module__guildNavbarContainer_"],
    /* dm list container */
    [class*="DMLayout.module__dmListColumn_"]
    {
        width: -webkit-fill-available;
        /* idk why it doesnt need to multiply the themepanelborderthickness on mobile*/
        height: calc(100% - var(--layout-user-area-reserved-height) - var(--layout-mobile-bottom-nav-reserved-height) - var(--ThemePanelMargin) - var(--ThemePanelBorderThickness));
    }


    /* mobile notifications page */
    [class*="NotificationsPage.module__container_"],
    /* mobile notifications page */
    [class*="NotificationsPage.module__content_"],
    /* mobile self profile */
    [class*="YouPage.module__container_"] {
        height: calc(100% - var(--layout-user-area-reserved-height) - var(--layout-mobile-bottom-nav-reserved-height) - var(--ThemePanelMargin) - var(--ThemePanelBorderThickness) * 2);
        /* NOTE: currently need to hardcode var(--layout-mobile-bottom-nav-reserved-height) here since its wrongly set to 0 on the you page. */
        height: calc(100% - var(--layout-user-area-reserved-height) - 60px - var(--ThemePanelMargin) - var(--ThemePanelBorderThickness));
        overflow: hidden auto;
    }

    /* mobile user profile banner */
    [class*="UserProfileMobileSheet.module__bannerContainer_"] {
        border-radius: unset;
    }
}


/* ################################################################################################# */
/* ################################################################################################# */
/* ################################################################################################# */