/* === COLOR VARIABLES === */

:root {
  --darksecondary: #2d2d2d;
  --darkprimary: #222222;
  --accent: #b71414;
  --emipurple: #4a2453;
  --darkpurple: #2a094c;
  --greypurple: #543670;
}


/* === GUILD SELECTION BAR === */

.guilds-wrapper {
  width: 116px;
}

.guilds-wrapper .scroller-wrap {
  width: 130px;
}

.guilds-wrapper .guilds {
  display: flex;
  flex-flow: row wrap;
  padding-left: 0;
  align-content: flex-start;
}

.guilds-wrapper .guilds .guild {
  margin-left: 6px;
  margin-top: 8px;
}

.guilds-wrapper .guilds .guild.unread::before {
  left: - 2px;
  z-index: 9000;
}

.guilds-wrapper .guilds .guild:first-child {
  position: relative;
  left: 0;
  margin: auto;
  margin-top: 15px;
}
#bd-pub-li {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

#bd-pub-li #bd-pub-button {
  position: absolute;
  width: 100%;
  text-align: center;
}

.guilds-wrapper .guilds .guild-separator {
  position: relative;
  width: 100%;
}

.guilds-wrapper .guilds .friends-online {
  position: relative;
  width: 100%;
  margin: auto;
  margin-top: 5px;
}

.guilds-wrapper .guilds .guild.selected:before {
  display: none;
}

.guilds-wrapper .guilds .guild {
  position: relative;
}

.guilds-wrapper .guilds .dms {
  width: 100%;
  position: relative;
  text-align: center;
  flex-flow: row wrap;
}
.guilds-wrapper .guilds .dms .guild {
  display: inline-block;
  flex-flow: row wrap;
  margin-left: 7px;
  align-content: flex-start;
}







.guilds-wrapper .guild.guilds-add:after, .guilds-wrapper .guild.guilds-add:hover:after, .guilds-wrapper .guilds .guild a:hover, .guilds-wrapper .guilds .guild.selected .guild-inner, .guilds-wrapper .guilds .guild.active .guild-inner {
  background-color: transparent !important;
}

.guilds-wrapper .guilds .guild.selected {
  background: transparent;
}

.guilds-wrapper .guilds .guild.selected .guild-inner {
  background-color: transparent !important;
}

.guilds-wrapper .guilds .friends-online {
  display: none;
}

.guilds-wrapper .guild.guilds-add {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--darkprimary);
  color: var(--emipurple);
  border: 1px dashed var(--emipurple);
  padding: 0;
  font-size: 40px;
  font-weight: 200;
  text-align: center;
  -webkit-transition: border-color .25s ease, color .25s ease;
  transition: border-color .25s ease, color .25s ease;
  position: relative !important;
  left: 0px !important;
  top: 4px;
}

.guilds-wrapper .guilds .guild-separator {
  position: relative;
  width: 100%;
  padding-bottom: 0px;
  left: 0px;
}
.guilds-wrapper .guilds .guild .guild-inner {
  background: transparent !important;
}

.guilds-wrapper .guilds .guild.audio .guild-inner:after {
  top: 30px;
}

/* === NOTIFICATIONS, RED CIRCLE = UNREAD MESSAGES, PURPLE SQUARE = UNREAD MESSAGES IN SELECTED GUILD, PURPLE CIRCLE WITH NUMBER = @MENTION === */

.badge {
  background-color: #5f0faf;
  border-radius: 50%;
}

.new-messages-indicator.new-messages-indicator-mention {
  background-color: (--emipurple);
  border-radius: 0%;
}

.guilds-wrapper .guilds .guild.selected:before, .guilds-wrapper .guilds .guild.selected.unread:before, .guilds-wrapper .guilds .guild.unread:before {
  z-index: 100;
  -webkit-transform: translate(50px, -20px) scale(1.2);
  transform: translate(16px, 15px) scale(1.2);
  background: var(--accent);
  height: 12px;
  width: 12px;
  margin-top: 0px;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.guilds-wrapper .guilds .guild.selected.unread:before {
  visibility: visible !important;
  transform: translate(40px, -3px) scale(1.2);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  background: var(--greypurple);
}

.guilds-wrapper .guilds .guild.selected:before {
  content: "" !important;
  width: 4px;
  height: 64px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  visibility: hidden;
}

.dms .guild .badge, .guilds .guild.unread .badge, .guilds .guild .badge {
  -webkit-transform: translate(-4px, -34px)!important;
  transform: translate(-37px, 4px)!important;
  z-index: 100;
}