/**
 * @name         example theme
 * @description  just an example
 * @author       Dark.Knight#7683
 * @version      1
 * @source       local
 * @website      n/A
*/


/*all variables here*/
:root {
  /*borders*/
  --border-color-1: 116, 116, 116;
  --border-color-hover: 179, 179, 179;
  --border-opacity-1: 0.5;
  --border-opacity-hover: 0.8;

  /*user buttons bottom left*/
  --back-user-buttons: rgba(255, 255, 255, 0.116);

  /*other stuff*/
  --user-buttons-spacing: 8px;
}

/*ChannelDMs*/
.ChannelDms-channelmembers-wrap .ChannelDms-channelmembers-header {
  width: 240px;
}
.ChannelDms-channelmembers-wrap {
  width: 130px;
  transition: width .5s;
}
.ChannelDms-channelmembers-wrap:hover .membersWrap-3NUR2t:not(#dv-mount),
.ChannelDms-channelmembers-wrap:hover .membersWrap-3NUR2t:not(#dv-mount) > div {
  width: 240px;
}
.ChannelDms-channelmembers-wrap:hover {
  width: 240px;
}
.ChannelDms-channelmembers-wrap .membersWrap-3NUR2t.hiddenMembers-8kpYM0{
  margin-right: -100px;
}
.ChannelDms-channelmembers-wrap[data-tab="MEMBERS"] .selected-g-kMVV {
    margin-left: -35px;
    position: relative;
    transition: 0.5s ease;
}
.ChannelDms-channelmembers-wrap[data-tab="MEMBERS"].item-3XjbnG:not(.selected-g-kMVV){
    margin-left: 185px;
    position: relative;
    transition: 0.5s ease;
}
.ChannelDms-channelmembers-wrap[data-tab="MEMBERS"]:hover .item-3XjbnG:not(.selected-g-kMVV){
    margin: 0px !important;
    transition: 0.5s ease;
}
.ChannelDms-channelmembers-wrap[data-tab="DMS"] .selected-g-kMVV {
    margin-left: -194px;
    position: relative;
    transition: 0.5s ease;
}
.ChannelDms-channelmembers-wrap[data-tab="DMS"] .item-3XjbnG:not(.selected-g-kMVV){
    transition: 0.5s ease;
    right: 20px;
    position: relative;
}
.ChannelDms-channelmembers-wrap[data-tab="MEMBERS"] .item-3XjbnG:not(.selected-g-kMVV){
    transition: 0.5s ease;
    left: 20px;
    position: relative;
}

/*Userbuttons In Side Panel*/
@media (min-width:700px) {
  .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 72px;
    z-index: 1;
    padding: 20px 0 10px 0;
    flex-direction: column;
    background: linear-gradient(transparent, var(--back-user-buttons) 15%);
  }
  .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF > .button-12Fmur {
    margin: var(--user-buttons-spacing) auto 0 auto;
  }
  .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF {
    pointer-events: none;
  }
  .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF > .button-12Fmur {
    pointer-events: auto;
    border-radius: 50%;
  }
}
@media (max-width: 700px) {
  .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF {
    column-gap: 2px;
  }
  #app-mount .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF > .button-12Fmur {
    border-radius: 0px;
    background-color: var(--back-user-buttons-700);
  }
  #app-mount .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF > .button-12Fmur:hover {
    background-color: var(--back-user-buttons-hover-700);
  }
  #app-mount .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF > .button-12Fmur:first-child {
    border-radius: 16px 0px 0px 16px;
  }
  #app-mount .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF > .button-12Fmur:last-child {
    border-radius: 0px 16px 16px 0px;
  }
}
.content-2a4AW9 {
  height: 850px !important;
}

/*Member List*/
@media (min-width:700px) {
  .membersWrap-3NUR2t:not(#dv-mount),
  .membersWrap-3NUR2t:not(#dv-mount) > div {
    min-width:130px!important;
    max-width:240px!important;
    width:130px;
    transition: width .5s;
  }
}


:root {
  --channel-name-no-hover-margin: 0; /*15px for hidding the name, 0px for showing the name*/
  --channel-name-no-hover-opacity: 1; /*0 for hiding the name, 1 for showing the name*/
  --siderbar-no-hover-width: 100px; /*60px for just the channelIcon, 80px for the 1st 2/3 letters of the channel names*/
}

/*small dm/channel list*/
@media (max-width: 700px) {
  #app-mount .sidebar-1tnWFu {
    width: 0;
  }
  #app-mount .sidebar-1tnWFu>.privateChannels-oVe7HL,
  #app-mount .sidebar-1tnWFu>.container-1NXEtd {
    width: 0;
    margin-top: 0;
    height: calc(100% - 25px);
    padding-bottom: 10px;
    box-sizing: border-box;
    position: fixed;
    box-shadow: var(--elevation-high);
    border-radius: 0;
    overflow: hidden;
    z-index: 3;
    transition: width .5s ease;
  }
  #app-mount .wrapper-1_HaEi:hover+.base-2jDfDU>.content-1SgpWY>.sidebar-1tnWFu>.privateChannels-oVe7HL,
  #app-mount .wrapper-1_HaEi:hover+.base-2jDfDU>.content-1SgpWY>.sidebar-1tnWFu>.container-1NXEtd {
    width: var(--siderbar-no-hover-width, 60px);
  }
  .sidebar-1tnWFu>.privateChannels-oVe7HL {
    width: var(--siderbar-no-hover-width, 60px);
    transition: width 0.5s;
  }
  #app-mount .sidebar-1tnWFu>.privateChannels-oVe7HL:hover,
  #app-mount .sidebar-1tnWFu>.container-1NXEtd:hover {
    width: 240px;
  }
  #app-mount .container-6sXIoE.withTimeline-824fT_,
  #app-mount .container-6sXIoE .bar-g2ZMIm {
    width: var(--guild-bar-width-700, 72px);
    transition: width .5s;
  }
  #app-mount .sidebar-1tnWFu .container-6sXIoE.withTimeline-824fT_:hover,
  #app-mount .sidebar-1tnWFu .container-6sXIoE:hover .bar-g2ZMIm {
    width: 240px;
  }
  .container-6sXIoE:hover .gameIconWrapper-zXQ03M {
    margin-left: 0px;
  }
}
.sidebar-1tnWFu:not(:hover) .pinnedChannelsHeaderContainer-89Gjv4 .headerAmount-_-7GrS {
  margin-left: -15px;
}
@media (min-width: 700px) {
  .sidebar-1tnWFu {
    width: var(--siderbar-no-hover-width, 60px);
    transition: width 0.5s;
  }
  #app-mount .sidebar-1tnWFu:hover {
    width: 240px;
  }
  #app-mount .container-6sXIoE.withTimeline-824fT_,
  #app-mount .container-6sXIoE .bar-g2ZMIm {
    width: 60px;
    transition: width 0.5s;
  }
  #app-mount .sidebar-1tnWFu:hover .container-6sXIoE.withTimeline-824fT_,
  #app-mount .sidebar-1tnWFu:hover .container-6sXIoE .bar-g2ZMIm {
    width: 240px;
  }
  .sidebar-1tnWFu:not(:hover) .barText-lmqc5O :first-child {
    margin-left: -5px;
  }
  .sidebar-1tnWFu:not(:hover) .barText-lmqc5O :last-child {
    margin-right: -5px;
  }
  .sidebar-1tnWFu:not(:hover) .container-6sXIoE.withTimeline-824fT_ .coverWrapper-YAplwJ {
    margin-left: 6px;
  }
  .sidebar-1tnWFu:hover .panels-3wFtMD .container-YkUktl .avatarWrapper-1B9FTW,
  .sidebar-1tnWFu:hover .gameIconWrapper-zXQ03M {
    margin-left: 0px;
  }
}
.sidebar-1tnWFu:not(:hover) .voiceUserSummary-huJ8Md > .container-1jha_j > .icon-3akWb2 ~ *,
.activityRow-2wnr1d ~ .separator-2jb_gA,
.fa-arrow-right:before,
.sidebar-1tnWFu:not(:hover) .ownerIcon-255uKo,
.sidebar-1tnWFu:not(:hover) .size24-9rrwDS .avatarContainer-gPrCzX,
.sidebar-1tnWFu:not(:hover) .total-1c5KCN:after,
.sidebar-1tnWFu:not(:hover) .role-2TIOKu,
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .usernameFont-2oJxoI,
.sidebar-1tnWFu:not(:hover) .click-to-chat-btn,
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .icons-2mwuFp,
.sidebar-1tnWFu:not(:hover) .info-88fTUI,
.sidebar-1tnWFu:not(:hover) .actions-zk2vB_,
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3.selected-2TbFuo .iconItem-1EjiK0,
.sidebar-1tnWFu:not(:hover) .RestoreDirectMessages-style-divider,
.sidebar-1tnWFu:not(:hover) .RestoreDirectMessages-style-button {
  display: none;
}
.sidebar-1tnWFu:not(:hover) .RestoreDirectMessages-style-button {
  margin-left: 10px;
}
.panels-3wFtMD .container-YkUktl .avatarWrapper-1B9FTW,
.gameIconWrapper-zXQ03M {
  margin-left: 6px;
  transition: margin-left 0.3s;
}
.containerDefault-YUSmu3 .list-2x9Cl9.collapsed-1oYzUu {
  width: calc(100% - 26px);
}
.sidebar-1tnWFu:not(:hover) .users-2JoyGL {
  margin-top: -5px;
  margin-right: -22px;
}
.sidebar-1tnWFu:not(:hover) .total-1c5KCN {
  margin-top: 5px;
}
.containerDefault-YUSmu3:not(:hover) .iconItem-1EjiK0 {
  display: none;
}
.sidebar-1tnWFu:not(:hover) .children-1MGS9G {
  margin-right: -12px;
}
.sidebar-1tnWFu:not(:hover) .users-2JoyGL,
.sidebar-1tnWFu:not(:hover) .total-1c5KCN {
  background-color: transparent;
  font-size: 9px;
  display: block;
}
.sidebar-1tnWFu:not(:hover) .ti-indicator {
  transform: rotate(-90deg);
  margin-right: -10px;
}
@media (min-width:700px) {
  .container-1zzFcN .connection-3k9QeF .button-12Fmur,
  .actionButtons-2vEOUh .button-1EGGcP {
    width: 0px;
    padding: 0px;
    height: 0px;
    min-width: 0;
    min-height: 0;
    transition: all 0.5s;
  }
  .container-1zzFcN .connection-3k9QeF .button-12Fmur svg {
    width: 100%;
    height: 100%;
  }
  .sidebar-1tnWFu:hover .actionButtons-2vEOUh .button-1EGGcP {
    width: auto;
    padding: 0px;
    height: 32px;
    min-width: 60px;
    min-height: 32px;
  }
  .sidebar-1tnWFu:hover .container-1zzFcN .connection-3k9QeF .button-12Fmur {
    width: 32px;
    height: 32px;
  }
  .actionButtons-2vEOUh .button-1EGGcP .buttonIcon-2Zsrs2 {
    width: 0px;
    height: 0px;
    transition: all 0.5s;
  }
  .sidebar-1tnWFu:hover .actionButtons-2vEOUh .button-1EGGcP .buttonIcon-2Zsrs2 {
    width: 20px;
    height: 20px;
  }
  .container-1zzFcN .connection-3k9QeF .button-12Fmur .contents-18-Yxp svg {
    width: 0px;
    height: 0px;
    transition: all 0.5s;
  }
  .sidebar-1tnWFu:hover .container-1zzFcN .connection-3k9QeF .button-12Fmur .contents-18-Yxp svg {
    width: 20px;
    height: 20px;
  }
}
@media (max-width: 700px) {
  .panels-3wFtMD .panel-2ZFCRb.activityPanel-9icbyU:not(:hover) .actions-zk2vB_,
  .panels-3wFtMD .panel-2ZFCRb.activityPanel-9icbyU:not(:hover) .info-88fTUI,
  .panels-3wFtMD .container-6sXIoE.withTimeline-824fT_:not(:hover) .flex-2S1XBF,
  .panels-3wFtMD .container-6sXIoE.withTimeline-824fT_:not(:hover) .timeline-UWmgAx .barText-lmqc5O>:nth-child(2),
  .panels-3wFtMD .nameTag-sc-gpq {
    display: none;
  }
  #app-mount .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .actionButtons-2vEOUh .button-f2h6uQ .flex-2S1XBF {
    font-size: 0px;
  }
  .panels-3wFtMD {
    pointer-events: none;
  }
  .panels-3wFtMD > * {
    pointer-events: all;
  }
  #app-mount .panels-3wFtMD .wrapper-3Hk9OB {
    width: var(--guild-bar-width-700, 72px);
    max-width: unset;
    transition: width .5s;
  }
  #app-mount .panels-3wFtMD .wrapper-3Hk9OB:hover {
    width: 240px;
  }
  .panels-3wFtMD > .container-YkUktl > .flex-2S1XBF {
    border-radius: 18px;
    padding: 2px;
  }
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .actionButtons-2vEOUh .button-1EGGcP *,
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .actionButtons-2vEOUh .button-1EGGcP {
    width: 20px;
    height: 20px;
  }
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .container-1zzFcN .connection-3k9QeF .button-12Fmur, 
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .actionButtons-2vEOUh .button-1EGGcP {
    width: 32px;
    height: 32px;
    padding: 0;
    min-width: unset;
  }
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .container-1zzFcN,
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .container-1zzFcN > .flex-2S1XBF > .flex-2S1XBF,
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .container-1zzFcN > .flex-2S1XBF {
    display: flex;
    flex-direction: column;
  }
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .actionButtons-2vEOUh {
    padding: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .panels-3wFtMD .wrapper-3Hk9OB:hover .voiceTimer {
    width: 160px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .actionButtons-2vEOUh .button-1EGGcP .buttonIcon-2Zsrs2 {
    width: 20px;
    height: 20px;
    transition: all 0.5s;
  }
  .panels-3wFtMD .wrapper-3Hk9OB:not(:hover) .actionButtons-2vEOUh .button-1EGGcP .contents-3ca1mk {
    padding: 6px;
  }
  .panels-3wFtMD>.container-YkUktl>.flex-2S1XBF {
    background-color: var(--back-activity-panels, var(--background-floating));
    border: none;
    box-shadow: var(--elevation-high);
  }
  .panels-3wFtMD .container-1zzFcN,
  .panels-3wFtMD .container-6sXIoE,
  .panels-3wFtMD .panel-2ZFCRb {
    background-color: var(--back-activity-panels, var(--background-floating));
    border-radius: 5px;
    border: none;
    box-shadow: var(--elevation-high);
  }
}
.sidebar-1tnWFu:not(:hover) .container-1zzFcN .connection-3k9QeF .flex-2S1XBF {
  margin: 0px;
}
.container-1zzFcN .connection-3k9QeF .subtext-2HDqJ7 {
  text-overflow: clip;
}
.voiceTimer {
  white-space: normal;
}
.sidebar-1tnWFu:not(:hover) .children-1MGS9G .voiceCounter {
  margin-right: 10px;
}
/*Channel list*/
.content-2a4AW9 > .wrapper-NhbLHG .name-28HaxV,
.containerDefault-YUSmu3 .name-28HaxV {
  margin-left: var(--channel-name-no-hover-margin, 15px);
  opacity: var(--channel-name-no-hover-opacity, 0);
  transition: margin-left 0.2s, opacity 0.5s;
}
.sidebar-1tnWFu:hover .content-2a4AW9 > .wrapper-NhbLHG .name-28HaxV,
.sidebar-1tnWFu:hover .containerDefault-YUSmu3 .name-28HaxV {
  margin-left: 0;
  opacity: 1;
}
.sidebar-1tnWFu:hover .container-1Bj0eq .containerDefault-YUSmu3 .name-28HaxV {
  margin-left: 27px;
}
.container-1Bj0eq .containerDefault-YUSmu3 .name-28HaxV {
  margin-left: 42px;
}
.channelNotice-tO6Tus {
  width: 200px;
}
.containerDefault-YUSmu3.selected-2TbFuo .userLimit-VbEkeM, 
.iconVisibility-vptxma:focus-within .userLimit-VbEkeM, 
.iconVisibility-vptxma:focus .userLimit-VbEkeM, 
.iconVisibility-vptxma:hover .userLimit-VbEkeM {
  display: block;
  margin-left: 5px;
}
.container-1zzFcN .actionButtons-2vEOUh .contents-18-Yxp {
  font-size: 0px;
  transition: font-size 0.5s;
}
.sidebar-1tnWFu:hover .container-1zzFcN .actionButtons-2vEOUh .contents-18-Yxp {
  font-size: initial;
}
.voiceUser-3nRK-K {
  margin-right: 4px;
}
.scroller-1ox3I2 {
  padding-right: 0 !important;
}
/*Activity in vc*/
.containerDefault-YUSmu3:hover .activityRow-2wnr1d .content-2Lhv86 {
  border-bottom: 0;
}
.containerDefault-YUSmu3 .list-2x9Cl9 {
  padding-bottom: 0;
}
.activityRow-2wnr1d .content-2Lhv86 {
  width: 20px;
}
.activityRow-2wnr1d .activity-Rs0ViZ {
  margin-left: 15px;
  opacity: 0;
  transition: margin-left 0.2s, opacity 0.5s;
}
.sidebar-1tnWFu:hover .activityRow-2wnr1d .activity-Rs0ViZ {
  margin-left: 0;
  opacity: 1;
}
.containerDefault-YUSmu3:hover .activityRow-2wnr1d:first-child .content-2Lhv86 {
  border-top: 0;
}
.containerDefault-YUSmu3:hover .activityRow-2wnr1d .separator-2jb_gA {
  display: none;
}
.listDefault-1QEzz4 {
  margin-top: -1px
}
.activityRow-2wnr1d {
  margin: 0;
  padding: 0;
}
.activityRow-2wnr1d .content-2Lhv86 {
  margin: 0 8px;
  border-radius: 0;
  border-bottom: 0;
}
/*mention and unread badges*/
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .UnreadCountBadges-badge-channelUnread {
  border-radius: 5px 0 0 0;
  padding: 0;
  bottom: 0;
}
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .mentionsBadge-2ckrKL {
  top: 0;
  padding: 0;
}
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .mentionsBadge-2ckrKL .numberBadge-37OJ3S {
  border-radius: 0 0 0 5px;
}
#app-mount .sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .numberBadge-37OJ3S {
  font-size: 10px;
  min-width: 12px;
  max-width: 20px;
  min-height: unset;
  height: 12px;
  padding: 0;
}
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .UnreadCountBadges-badge-channelUnread,
.sidebar-1tnWFu:not(:hover) .containerDefault-YUSmu3 .mentionsBadge-2ckrKL {
  position: absolute;
  right: 0;
}
.sidebar-1tnWFu:not(:hover) .containerDefault-3TQ5YN + .containerDefault-YUSmu3 .mentionsBadge-2ckrKL .numberBadge-37OJ3S {
  border-radius: 0 5px 0 5px;
}
.sidebar-1tnWFu:not(:hover) [href="/channels/@me"] .numberBadge-37OJ3S {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 10px;
  height: 12px;
  width: 12px !important;
  min-height: unset;
  min-width: unset;
}
/*Server boost progress bar*/
.sidebar-1tnWFu .progressBarContainer-2E4oR- {
  width: 45px;
  transition: width 0.5s;
}
.sidebar-1tnWFu:hover .progressBarContainer-2E4oR- {
  width: 225px;
}
/*DM-list*/
.channel-1Shao0 {
  margin-right: 4px;
}
.privateChannels-oVe7HL .scrollerBase-_bVAAt {
  padding-right: 0 !important;
}
/*Panels in sidebar on smaller window sizes*/
@media (max-width:700px) {
  #app-mount .panels-3wFtMD {
    position: fixed;
    bottom: 6px;
    left: 0;
    background: none;
    border: none;
    z-index: 100;
  }
  /* User Container */
  .container-YkUktl .noWrap-hBpHBz {
    display: none;
    opacity: 0;
    pointer-events: none;
  }
  .container-YkUktl:hover .noWrap-hBpHBz {
    display: flex;
    opacity: 1;
    pointer-events: all;
  }
}
/*Small ServerBar fixes for smaller window sizes*/
@media (max-width:700px) {
  .guilds-2JjMmN {
    margin-bottom: calc(var(--guild-bar-width-700, 72px) - 1px);
  }
}




/*Create Server And Explore Servers Buttons*/
.listItemWrapper-3d87LP,
.listItemWrapper-3ktTom {
  background-color: black;
  border: 1px solid rgb(var(--border-color-hover));
  border-radius: 30px;
}
.circleIconButton-1VxDrg.selected-2r1Hvo,
.circleIconButton-3lUBQk.selected-2tb4pB {
  color: var(--unread-pill);
  background-color: transparent;
}