.textContainer__2215e {
  padding: 6px 0;
}

.buttonContainer__2215e {
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.listContainer__2215e {
  margin-top: 8px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: var(--background-secondary);
}

.listItem__2215e {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  align-items: center;
}

.divider__2215e {
  background-color: var(--background-modifier-accent);
  opacity: 0.5;
}

.whatList__2215e {
  background-color: var(--background-secondary);
  border-radius: 4px;
  margin-bottom: 8px;
}

.whatItem__2215e {
  border-top: 1px solid var(--background-modifier-accent);
}

.outerContainer__310be {
  position: relative;
}

.container__310be {
  display: flex;
  overflow: hidden;
}

.innerContainer__310be {
  display: flex;
}

.countryCode__310be {
  /* top-bottom padding should be 10, but there's 1px border from container. */
  padding: 9px 8px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: normal;
  white-space: nowrap;
}

.separator__310be {
  width: 1px;
  background-color: var(--background-modifier-accent);
  margin: 8px 4px;
}

.popout__310be {
  z-index: 1;
}

.hidden__310be {
  display: none;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .countryCode__310be {
    background-color: ButtonFace;
    border: 1px solid ButtonFace;
    border-radius: 4px;
    color: ButtonText;
  }

.enable-forced-colors .countryCode__310be:hover,
    .enable-forced-colors .countryCode__310be:focus {
      border-color: ButtonText;
    }

.enable-forced-colors .countryCode__310be[aria-expanded='true'] {
      background-color: HighlightText;
      border-color: Highlight;
      color: Highlight;
    }

.input_d64f22 {
  display: flex;
  align-items: center;
}

.visual-refresh .input_d64f22 {
    padding: 0;
  }

.visual-refresh .inputField_d64f22:hover {
    border: none;
  }

.inputWrapper_d64f22 {
  flex-grow: 1;
}

.inputField_d64f22 {
  border: none;
  background-color: transparent;
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .input_d64f22 {
    border: none;
  }

.image_f4cef4 {
  height: 100px;
  margin-bottom: 8px;
}

.title_f4cef4,
.subtitle_f4cef4 {
  margin-bottom: 8px;
}

.spacedButton_f4cef4 {
  margin-top: 24px;
}

.elevated__3f12a {
  box-shadow:
    0 2px 10px 0 hsl(var(--primary-900-hsl) / 0.2),
    0 0 0 1px var(--primary-700);
}

.button__3f12a {
  
  margin: 12px auto 20px;
  width: 85%;
}

.buttonTitle__3f12a {
  text-align: center;
  margin: 20px 20px 0;
}

.text__3f12a {
  text-align: left;
}

.buttonLogin__3f12a {
  font-weight: 600;
  font-size: 12px;
}

.card__3f12a {
  
  margin: 16px;
  background: var(--primary-700);
  border-color: var(--primary-700);
}

.cardContents__3f12a {
  max-width: 400px;
  margin: 0 auto;
}

.cardAccentLeft__3f12a {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.3;
}

.cardAccentRight__3f12a {
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.3;
}

@value smallMobileBreakpoint: 640px;

.container_d69818 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.guildBadge_d69818 {
  position: relative;
  margin-right: 6px;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
}

.appIcon_d69818 {
  display: inline-block;
}

.appIconSize_d69818 {
  width: 100px;
  height: 100px;
}

.avatar_d69818,
.appIcon_d69818,
.guildIcon_d69818 {
  margin-top: 24px;
  margin-bottom: 24px;
  border-radius: 16px;
}

.title_d69818 {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--header-primary);
  font-weight: 600;
}

@media (min-height: 640px) {

.title_d69818 {
    margin-top: 8px
}
  }

.activityCount_d69818 {
  margin-top: 4px;
}

@media (min-height: 640px) {

.activityCount_d69818 {
    margin-top: 8px
}
  }

.directInviteSubTitle_d69818 {
  margin-top: 8px;
}

.guildContainer_d69818 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.appIn_d69818 {
  margin: 4px 0;
}

.appGuildName_d69818 {
  color: var(--header-primary);
}

.inviteJoinContainer_d69818 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.inviterIconWrapper_d69818 {
  padding-right: 8px;
}

.inviteJoinText_d69818 {
  color: var(--header-secondary);
}

.header__4591d {
  padding-top: calc(var(--custom-event-detail-info-tab-base-spacing) * 3);
  padding-left: calc(var(--custom-event-detail-info-tab-base-spacing) * 2);
  /* Modal Content adds an 8px padding right we can't get rid of  */
  padding-right: var(--custom-event-detail-info-tab-base-spacing);
}

.title__4591d {
  margin-top: calc(var(--custom-event-detail-info-tab-base-spacing) * 2);
}

.description__4591d {
  margin-top: calc(var(--custom-event-detail-info-tab-base-spacing) * 2);
}

.guildBadge__4591d {
  margin-right: 4px;
}

.row__4591d {
  margin-top: var(--custom-event-detail-info-tab-base-spacing);
  margin-bottom: var(--custom-event-detail-info-tab-base-spacing);

  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--text-muted);
}

.guildIcon__4591d {
  color: var(--white-500);
  background-color: var(--brand-500);
}

.body__4591d {
  padding-top: var(--custom-event-detail-info-tab-base-spacing);
  padding-bottom: calc(var(--custom-event-detail-info-tab-base-spacing) * 3);
  padding-left: calc(var(--custom-event-detail-info-tab-base-spacing) * 2);
  /* Modal Content adds an 8px padding right we can't get rid of  */
  padding-right: var(--custom-event-detail-info-tab-base-spacing);
}

.visual-refresh .header__4591d,
  .visual-refresh .body__4591d {
    padding-left: 0;
    padding-right: 0;
  }

.visual-refresh .header__4591d {
    padding-top: var(--space-12);
  }

.visual-refresh .divider__4591d {
    margin-left: 0;
    margin-right: 0;
  }

.icon__4591d {
  margin-right: var(--custom-event-detail-info-tab-base-spacing);
}

.channelIcon__4591d {
  fill: var(--header-primary);
  margin-right: var(--custom-event-detail-info-tab-base-spacing);
}

.clickable__4591d {
  display: flex;
  cursor: pointer;
}

.clickable__4591d .linkText__4591d:hover {
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

.cursorPointer__4591d {
  cursor: pointer;
}

.channelLocation__4591d {
  display: flex;
  cursor: pointer;
}

.channelLocation__4591d:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.locationText__4591d {
  color: var(--header-secondary);
}

.externalLocation__4591d {
  display: flex;
  cursor: auto;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.interestedCount__4591d {
  cursor: pointer;
}

.interestedCount__4591d:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.creator__4591d {
  cursor: pointer;
}

.creator__4591d:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.divider__4591d {
  height: 1px;
  background-color: var(--background-modifier-accent);
  border: none;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: calc(var(--custom-event-detail-info-tab-base-spacing) * -3);
}

.guildInfoCard__50dcd {
  width: 100%;
  text-align: left;
}

.presentedBy__50dcd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--header-secondary);
}

.guildContainer__50dcd {
  padding-top: 12px;
  display: flex;
  flex-direction: row;
}

.guildDetailsContanier__50dcd {
  flex-direction: column;
  padding-left: 12px;
}

.guildName__50dcd {
  font-family: var(--font-display);
  display: flex;
}

.guildBadge__50dcd {
  margin-left: 4px;
}

.guildInfoMemberCount__50dcd {
  padding: 0;
  margin: 0;
  padding-top: 2px;
}

.guildInfoMemberCountText__50dcd {
  font-size: 12px;
}

.guildDescriptionContainer__50dcd {
  padding-top: 12px;
}

.guildEventCard__50dcd {
  width: 100%;
  text-align: left;
}

.channelInfo__50dcd {
  padding-top: 4px;
}

.acceptButton__50dcd {
  margin-top: 12px;
  width: 100%;
}

.container_fb2e73 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.acceptButton_fb2e73 {
  margin-top: 28px;
  width: 100%;
}

.redirectingText_fb2e73 {
  margin-top: 16px;
  width: 100%;
}

@value smallMobileBreakpoint: 640px;

.splashBackground__742a4 {
  --background-mobile-primary: var(--primary-700) center / cover no-repeat
    url(/assets/4d81e06416805e7d.png);
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.splashBackground__742a4 .inviteRegisterAuthBox__742a4 {
    overflow: visible;
    overflow: initial;
    position: relative;
    border-radius: 5px;
    padding: 0;
  }

.splashBackground__742a4 .inviteRegisterAuthBox__742a4:before {
      content: '';
      background: none;
    }

.downloadAppTitle__742a4 {
  margin-bottom: 8px;
}

.downloadAppImage__742a4 {
  margin: 24px 0;
}

.centerFlex__742a4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centerAuthBoxContent__742a4 {
  margin-top: -50px;
  
  flex-direction: column;
}

.inviteCard__742a4 {
  border-radius: 8px;
  background: var(--background-primary);
  width: calc(100vw - 72px);
  max-width: 480px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 8px;
}

@media (max-height: 640px) {

.inviteCard__742a4 {
    width: calc(100vw - 64px);
    padding: 16px;
    margin: 0
}
  }

.inviteChildContainer__742a4 {
  overflow: hidden;
}

.inviteCardInner__742a4 {
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100px;
}

.guildInfoInner__742a4 {
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.inviteCardInnerError__742a4 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: content-box;
  margin: 0 -4px;
  padding-bottom: 0;
  padding-top: 24px;
  min-height: 200px;
}

@media (max-height: 640px) {

.inviteCardInnerError__742a4 {
    padding: 0;
    margin: 0 -12px
}
  }

.inviteCardInnerLoading__742a4 {
  flex: 1;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.expirationNotice__742a4 {
  margin-top: 32px;
}

.wrapper_b97385 {
  width: 100%;
  height: 100%;
}

@media (min-width: 486px) and (min-height: 0) {
  .wrapper_b97385 {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 486px) and (min-height: 580px) {
  .wrapper_b97385 {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* This is no longer needed in the Refresh */

.platform-osx:not(.visual-refresh) .wrapper_b97385:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    z-index: 1;
    -webkit-app-region: drag;
  }

.logo__11f7b {
  flex: 0 0 auto;
  width: 130px;
  height: 36px;
  background: url(/assets/bbbc3d376d38e7bc.svg) no-repeat;
}

.image__5901e {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s linear 0.2s;
}

  .image__5901e.loaded__5901e {
    opacity: 1;
  }

.canvas_e99198 {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

.fallbackImage_e99198 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 85%;
  /* Limits copied from WaveConstants.tsx */
  min-width: 780px;
  min-height: 780px;
  max-width: 1000px;
  max-height: 1000px;
  background: url(/assets/ddf1876f22ba8a4b.png) top left / contain no-repeat;
  pointer-events: none;
  border: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.visible_e99198 {
  opacity: 1;
}

.embedded_e99198 {
  position: absolute;
}

.wrapper__8bf38 {
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1;
}

.rightSplit__8bf38 {
  position: fixed;
  bottom: 0;
  right: 0;
  width: auto;
  transition: opacity 0.4s ease;
  opacity: 1;
  pointer-events: none;
}

.embedded__8bf38 {
  position: absolute;
}

.leftSplit__8bf38 {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.nonEmbeddedLeftSplit__8bf38 {
  max-width: 1480px;
}

.mobileWave__8bf38 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vh;
  height: 100vh;
  background: url(/assets/95ffb3587387b7e8.png) top left / cover no-repeat fixed;
  z-index: -1;
  pointer-events: none;
}

.logo__8bf38 {
  position: relative;
  margin: 24px auto 0;
}

@media (min-width: 830px) {
  .logo__8bf38 {
    position: fixed;
    top: 24px;
    left: 24px;
    margin: 0;
  }
}

/* This is no longer needed in the Refresh */
.platform-osx:not(.visual-refresh) .splashBackground_eb4069:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    z-index: 1;
    -webkit-app-region: drag;
  }
.platform-win .splashBackground_eb4069:before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 84px; /* 28 * 3 */
    height: 22px;
    background: hsl(var(--black-500-hsl) / 0.3);
    border-bottom-left-radius: 3px;
    z-index: 1;
    transition: background 0.4s ease 0.4s;
  }
.platform-win .theme-dark .splashBackground_eb4069.loggingIn_eb4069:before, .platform-win .theme-light .splashBackground_eb4069.loggingIn_eb4069:before {
      background: transparent;
    }
.characterBackground_eb4069 {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: auto;
}
.characterBackground_eb4069 .artwork_eb4069 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
.characterBackground_eb4069 .logoWithText_eb4069 {
    position: relative;
    top: 48px;
    left: 48px;
  }
/* background: url(../../images/auth/background-auth-characters.svg); */
.characterBackground_eb4069 .logo_eb4069 {
    display: block;
    position: fixed;
    top: 24px;
    left: 50%;
    margin-left: -65px;
    margin-top: 0;
  }
.splashBackground_eb4069 .logo_eb4069 {
  position: fixed;
  top: 24px;
  left: 50%;
  margin-left: -65px;
  margin-top: 0;
}
@media (min-width: 830px) {
  .characterBackground_eb4069 .logo_eb4069 {
    top: 53px;
    left: 48px;
    margin: 0;
  }

  .splashBackground_eb4069 .logo_eb4069 {
    position: fixed;
    top: 24px;
    left: 24px;
    margin: 0;
  }
    .platform-osx .splashBackground_eb4069 .logo_eb4069 {
      top: 40px;
    }
}

.applicationIcon_c4891f {
  margin-right: 8px;
}

.seasonalIcon_c4891f {
  height: 120px;
}

.error__584e1 {
  margin-top: 8px;
  color: var(--status-danger);
}

.subTitle__584e1 {
  margin-bottom: 24px;
}

.button__584e1 {
  margin-top: 24px;
}

/* even though this component isn't themed, the code inputs are themed
   so for specificity purposes we wrap these styles in global theme classes */

.codeInput__584e1 {
  background-color: var(--deprecated-text-input-bg);
  border: 1px solid var(--deprecated-text-input-border);
}

.codeInput__584e1:focus {
    border: 1px solid var(--brand-500);
  }

.avatar__8d70a,
.guildIcon__8d70a {
  margin-bottom: 20px;
}

.container__8d70a {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.title__8d70a {
  margin-top: 2px;
  color: var(--header-primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

.subtitle__8d70a {
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.subtitle__8d70a strong {
    color: var(--header-primary);
  }

.userText__8d70a {
  word-break: break-word;
}

.templateIcon__8d70a {
  color: var(--header-secondary);
  vertical-align: middle;
}

.usagePill__8d70a {
  background-color: var(--background-secondary);
  border-radius: 16px;
  color: var(--header-secondary);
  font-size: 14px;
  padding: 8px 16px;
  margin-top: 16px;
}

.verifiedNameContainer__8d70a {
  display: inline-block;
}

.verifiedIcon__8d70a {
  display: inline-block;
  color: var(--green-360);
  /* left-right: spacing between words */
  /* top: doesn't space up content */
  margin: -8px 4px 0 2px;
  /* alignment with words */
  top: 3px;
}

.verifiedCheckContainer__8d70a {
  position: relative;
  /* checkmark alignment */
  top: 1px;
}

.verifiedCheck__8d70a {
  color: var(--white-500);
}

.image__74f72 {
  margin-bottom: 16px;
  border-radius: 8px;
  width: 100%;
}

.header__74f72 {
  margin-bottom: 8px;
}

.usagePill__74f72 {
  background-color: var(--background-primary);
  display: inline-block;
}

.header__7c901 {
  padding: 24px 16px 0;
  flex-grow: 0;
  overflow: hidden;
}

.subtitle__7c901 {
  margin-top: 8px;
}

.closeButton__7c901 {
  z-index: 1000;
  position: absolute;
  top: 12px;
  right: 12px;
}

.content__7c901 {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding-top: 0;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
}

.smsInputContainer__7c901 {
  display: flex;
  gap: 8px;
}

.smsInput__7c901 {
  flex-grow: 1;
}

.error__7c901 {
  margin-top: 8px;
}

.footer__7c901 {
  justify-content: space-between;
  padding-left: 8px;
}

.visual-refresh .content__7c901,
  .visual-refresh .footer__7c901 {
    padding: 0 var(--space-32) var(--space-32) var(--space-32);
  }

.listItemContainer__7c901 {
  border-radius: 8px;
  border: 1px solid var(--background-modifier-accent);
  background-color: var(--background-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  padding: 0;
  padding-left: 8px;
}

.listItemContainer__7c901:hover {
    background-color: var(--background-modifier-hover);
  }

.keyboard-mode .listItemContainer__7c901:focus {
    background-color: var(--background-modifier-selected);
  }

.listItemContainer__7c901:active {
    background-color: var(--background-modifier-active);
  }

.listItemIcon__7c901 {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  margin: 8px 8px 8px 16px;
}

.listItemText__7c901 {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 8px;
}

.listItemArrow__7c901 {
  margin-left: auto;
  margin-right: 16px;
  height: 50px;
  color: var(--interactive-normal);
}

.container__733ad {
  position: absolute;
  top: 0;

  width: 100%;

  padding: 16px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: var(--custom-mobile-web-handoff-link-mobile-web-handoff-height);
  background: var(--brand-500);
}

.errorContainer__733ad {
  
  background: var(--primary-800);
}

.buttonText__733ad {
  color: var(--brand-500);
}

.list__920b8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-secondary);
  border-radius: 4px;
}

.accountCard__920b8 {
  display: flex;
  align-self: stretch;
  padding: 12px 16px;
}

.separator__920b8 {
  border-bottom: 1px solid var(--background-modifier-accent);
  margin-left: 16px;
  width: calc(100% - 16px);
}

.userDetails__920b8 {
  display: flex;
  align-items: center;
  width: 100%;
}

.usernameSection__920b8 {
  margin-left: 8px;
  max-width: 76%;
}

.hasActionMaxWidth__920b8 {
  max-width: 48%;
}

.username__920b8 {
  display: flex;
  align-items: center;
}

.userActions__920b8 {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.userActionMenu__920b8 {
  margin-left: 16px;
  padding: 0;
  line-height: 0;
}

.userActionMenu__920b8:hover {
    cursor: pointer;
  }

.userActionMenu__920b8:hover .overflowMenuIcon__920b8 {
      color: var(--interactive-active);
    }

.userActionMenu__920b8 .overflowMenuIcon__920b8 {
    color: var(--interactive-normal);
  }

.textOverflow__920b8 {
  text-overflow: ellipsis;
  overflow: hidden;
}

.hintText__920b8 {
  text-align: left;
}

.chooseAccountAuthBox_df9c06 {
  padding: 24px 16px 16px;
}

.chooseAccountHelpText_df9c06 {
  margin: 8px 0 24px;
}

.actions_df9c06 {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.container__8a969 {
  position: relative;
  background-color: var(--background-secondary-alt);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: var(--radius-sm);
  padding: 12px;
}

.iconContainer__8a969 {
  position: relative;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 12px;
}

.actionable__8a969 {
  cursor: pointer;
}

.name__8a969 {
  color: var(--header-primary);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.description__8a969 {
  color: var(--header-secondary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.flair__8a969 {
  position: absolute;
  bottom: -16px;
  left: calc(50% - 24px);
}

/* Display rule */
.flex_aa3ffd {
  display: flex;
}
/* Align rules */
.alignStart_aa3ffd {
  align-items: flex-start;
}
.alignEnd_aa3ffd {
  align-items: flex-end;
}
.alignCenter_aa3ffd {
  align-items: center;
}
.alignStretch_aa3ffd {
  align-items: stretch;
}
.alignBaseline_aa3ffd {
  align-items: baseline;
}
/* Justify rules */
.justifyStart_aa3ffd {
  justify-content: flex-start;
}
.justifyEnd_aa3ffd {
  justify-content: flex-end;
}
.justifyCenter_aa3ffd {
  justify-content: center;
}
.justifyAround_aa3ffd {
  justify-content: space-around;
}
.justifyBetween_aa3ffd {
  justify-content: space-between;
}
/* Wrap rules */
.noWrap_aa3ffd {
  flex-wrap: nowrap;
}
.wrap_aa3ffd {
  flex-wrap: wrap;
}
.wrapReverse_aa3ffd {
  flex-wrap: wrap-reverse;
}
/* Direction rules */
.directionRow_aa3ffd {
  flex-direction: row;
}
.directionRowReverse_aa3ffd {
  flex-direction: row-reverse;
}
.directionColumn_aa3ffd {
  flex-direction: column;
}
/*
 * Helpers
 */
.spacer_aa3ffd {
  flex: 1;
  overflow: hidden;
}
/* Directional Helpers */
.vertical_aa3ffd {
  flex-direction: column;
  display: flex;
}
.horizontal_aa3ffd {
  flex-direction: row;
  display: flex;
}
.horizontalReverse_aa3ffd {
  flex-direction: row-reverse;
  display: flex;
}
.vertical_aa3ffd > .spacer_aa3ffd,
.horizontal_aa3ffd > .spacer_aa3ffd,
.horizontalReverse_aa3ffd > .spacer_aa3ffd {
  min-height: 1px; /* see firefoxFixScrollFlex for why */
}
/* Fully center */
.flexCenter_aa3ffd {
  align-items: center;
  justify-content: center;
  display: flex;
}
.streamerModeEnabled_aa3ffd {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  flex: 1;
}
.streamerModeEnabledImage_aa3ffd {
  width: 440px;
  height: 220px;
  background-size: 100% 100%;
}
.streamerModeEnabledBtn_aa3ffd {
  margin-top: 20px;
  font-weight: 700;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  font-size: 18px;
  color: var(--white-500);
  background-color: var(--twitch);
  padding: 10px 20px;
  border-radius: 3px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 29px;
  text-transform: uppercase;
  cursor: pointer;
}
.streamerModeEnabledBtn_aa3ffd:hover {
    /* stylelint-disable-next-line color-no-hex */
    background-color: #5a3796;
  }
.streamerModeEnabledBtn_aa3ffd.disabled_aa3ffd {
    cursor: default;
    /* stylelint-disable-next-line color-no-hex */
    background-color: #643da7;
  }
.images-light .streamerModeEnabledImage_aa3ffd {
    background-image: url(/assets/9a898919395a3f13.svg);
  }
.images-dark .streamerModeEnabledImage_aa3ffd {
    background-image: url(/assets/a105cf85c9c42968.svg);
  }

.container_de50c1 {
  position: relative;
}

.blockUserInteraction_de50c1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: default;
}

.emojiIcon_ff168a {
  width: 20px;
  height: 20px;
}

.icon__0e5a2 {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;

  /**
   * for visual centering:
   *   20px line height (for 16px font) - 16px icon height = 4px remaining space
   *   4px / 2 = 2px vertical margin
   */
  vertical-align: bottom;
  margin-bottom: 2px;
}

.hoverCard__26e8b {
  cursor: pointer;
  transition:
    box-shadow, transform ease 200ms;
}

  .hoverCard__26e8b:hover,
  .hoverCard__26e8b:focus-within {
    box-shadow: var(--shadow-high);
    transform: translateY(-4px);
  }

.container_fea832 {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--background-tertiary);
}

.visual-refresh .container_fea832 {
    background-color: var(--input-background);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
  }

.inner_fea832 {
  box-sizing: border-box;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1px;
}

.disabled_fea832 .inner_fea832 {
  opacity: 0.3;
}

.input_fea832 {
  box-sizing: border-box;
  background: transparent;
  border: none;
  resize: none;
  flex: 1;
  min-width: 48px;
  margin: 1px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: var(--text-normal);
}

.input_fea832::-webkit-input-placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.disabled_fea832 .input_fea832 {
  cursor: not-allowed;
}

.tag_fea832 {
  box-sizing: border-box;
  border-radius: 2px;
  text-align: center;
  margin: 1px;
  display: flex;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
  transition: none;
  background-color: var(--background-primary);
  color: var(--text-normal);
}

.tag_fea832:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    opacity: 0.9;
  }

.visual-refresh .tag_fea832 {
    background-color: var(--background-mod-normal);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
  }

.visual-refresh .tag_fea832:hover {
      background-color: var(--background-mod-strong);
      opacity: 1;
    }

.small_fea832 .input_fea832,
.small_fea832 .tag_fea832 {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  height: 20px;
  padding: 0 4px;
}

.medium_fea832 .input_fea832,
.medium_fea832 .tag_fea832 {
  font-size: 16px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 32px;
  height: 30px;
  padding: 0 8px;
}

.large_fea832 .input_fea832,
.large_fea832 .tag_fea832 {
  font-size: 20px;
  /* stylelint-disable-next-line declaration-property-value-allowed-list */
  line-height: 40px;
  height: 38px;
  padding: 0 16px;
}

.richTag_fea832 {
  background-color: var(--background-secondary-alt);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.medium_fea832 .richTag_fea832,
.medium_fea832 .richTagInput_fea832 {
  margin: 3px 0;
  margin-left: 3px;
  height: 26px;
  line-height: 24px;
}

.large_fea832 .richTag_fea832,
.large_fea832 .richTagInput_fea832 {
  margin: 4px 0;
  margin-left: 4px;
  height: 32px;
  line-height: 30px;
}

.tagLabel_fea832 {
  padding-left: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tagRoleColor_fea832 {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.close_fea832 {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

.iconLayout_fea832 {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  cursor: text;
}

.medium_fea832.iconLayout_fea832 {
  width: 32px;
  height: 32px;
}

.large_fea832.iconLayout_fea832 {
  width: 40px;
  height: 40px;
}

.iconContainer_fea832 {
  box-sizing: border-box;
  position: relative;
  width: 16px;
  height: 16px;
}

.medium_fea832 .iconContainer_fea832 {
  width: 20px;
  height: 20px;
}

.large_fea832 .iconContainer_fea832 {
  width: 24px;
  height: 24px;
}

.icon_fea832 {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* This is a very small UX animation where a magnifying glass turns into an x */
  /* stylelint-disable-next-line discord/respect-reduced-motion */
  transition:
    transform 0.1s ease-out, opacity 0.1s ease-out;
  transform: rotateZ(90deg);
  /* NOTE(amadeus): Should this be interactive-muted? */
  color: var(--text-muted);
}

.icon_fea832.visible_fea832 {
    transform: rotateZ(0deg);
    opacity: 1;
  }

.clear_fea832 {
  box-sizing: border-box;
  cursor: pointer;
}

.clear_fea832 .icon_fea832 {
  color: var(--interactive-normal);
}

.clear_fea832.iconLayout_fea832:hover .icon_fea832 {
  color: var(--interactive-hover);
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .input_fea832 {
    border: 1px solid CanvasText;
    border-radius: 4px;
  }

.enable-forced-colors .input_fea832::-webkit-input-placeholder {
    color: GrayText;
  }

.enable-forced-colors .icon_fea832 {
    border: 1px solid Canvas;
    background-color: Canvas;
    color: GrayText;
  }

.enable-forced-colors .clear_fea832 .icon_fea832 {
    background-color: ButtonFace;
    border-color: CanvasText;
    color: ButtonText;
  }

.enable-forced-colors .clear_fea832.iconLayout_fea832:hover .icon_fea832,
  .enable-forced-colors .clear_fea832.iconLayout_fea832:focus .icon_fea832 {
    border-color: ButtonText;
    color: ButtonText;
  }

.iconRow_a653e3 {
  display: flex;
  gap: 4px;
}

.icon_a653e3 {
  width: 24px;
  height: 24px;

  border-radius: var(--radius-md);
}

.overflow_a653e3 {
  
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--background-secondary);
}

.left_caab99 {
  transform: rotate(270deg);
}

.right_caab99 {
  transform: rotate(90deg);
}

.down_caab99 {
  transform: rotate(180deg);
}

.downRight_caab99 {
  transform: rotate(135deg);
}

.upLeft_caab99 {
  transform: rotate(315deg);
}

.lineClamp__0b48b {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.badge__436c9 {
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--white-500);
}

.badgeIcon__436c9 {
  width: 16px;
  height: 16px;
}

.productCard__8d9f6 {
  position: relative;
}

.productCardClickable__8d9f6 {
  background: var(--background-secondary);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.productThumbnail__8d9f6 {
  grid-area: 1 / 1 / 2 / 3;
  width: 100%;
  height: 190px;
  -o-object-fit: cover;
     object-fit: cover;
}

.productInfo__8d9f6 {
  align-self: start;
  display: flex;
  flex-direction: row;
  padding: 16px;
}

.productInfoContent__8d9f6 {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  align-items: flex-start;
}

.productName__8d9f6 {
  max-width: 100%;
  padding-right: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.productDetails__8d9f6 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dotSeparator__8d9f6 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--text-muted);
  flex-shrink: 0;
}

.productActionMenuButton__8d9f6 {
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 100;
  margin-right: -8px;
}

.productActionMenuButton__8d9f6 .productActionMenuIcon__8d9f6 {
    color: var(--interactive-normal);
  }

.productActionMenuButton__8d9f6:hover .productActionMenuIcon__8d9f6 {
    color: var(--interactive-hover);
  }

.menuContainer__8d9f6 {
  /* matches button padding to align menu with top of icon */
  margin-top: 6px;
}

.disabled__8d9f6 {
  opacity: 0.5;
  cursor: not-allowed;
}

.boostedGuildIconGem__97677 {
  transition: color 100ms linear;
}

.boostedGuildIconGem__97677 {
  height: 10px;
}

.theme-light .iconBackgroundTierNone__97677,
  .theme-light .iconBackgroundTierOne__97677,
  .theme-light .iconBackgroundTierTwo__97677,
  .theme-light .iconBackgroundTierThree__97677 {
    color: var(--background-accent);
  }

.theme-dark .iconBackgroundTierNone__97677,
  .theme-dark .iconBackgroundTierOne__97677,
  .theme-dark .iconBackgroundTierTwo__97677,
  .theme-dark .iconBackgroundTierThree__97677 {
    color: var(--interactive-muted);
  }

.iconTierNone__97677 {
  color: hsl(var(--white-500-hsl) / 0.2);
}

.iconTierOne__97677,
.iconTierTwo__97677 {
  color: var(--white-500);
}

.iconTierThree__97677 {
  color: var(--guild-boosting-pink);
}

.guildIconContainer__85d16 {
  margin-right: 4px;
}

.visual-refresh .guildIconContainer__85d16 {
    margin-right: var(--space-12);
  }

.guildIconV2Container__85d16 {
  margin-right: 8px;
}

.guildBadge__85d16 .boostedGuildIconGem__85d16 {
  transition: color 100ms linear;
}

.disableColor__85d16 {
  color: var(--background-accent);
}

.tierTooltipTitle__85d16 {
  font-weight: 600;
}

.boostedGuildIconGem__85d16 {
  height: 10px;
}

.boostedGuildTierMutedIconWithVisibleBanner__85d16 {
  color: var(--text-muted);
}

.iconTierNone__85d16 {
  color: hsl(var(--white-500-hsl) / 0.2);
}

.boostedGuildTierIconBackgroundWithVisibleBanner__85d16 {
  color: var(--interactive-active);
}

.visual-refresh .guildBadgeIcon__85d16 {
    width: 20px !important;
    height: 20px !important;
  }

.visual-refresh .guildBadgeIcon__85d16 {
    /* stylelint-disable-next-line declaration-no-important */
    /* stylelint-disable-next-line declaration-no-important */
  }

.container_b2d72f {
  align-items: center;
  display: flex;
  position: relative;
}

.iconContainer_b2d72f {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
  margin-right: 4px;
}

.icon_b2d72f {
  position: relative;
  color: var(--primary-300);
  opacity: 0.6;
  width: 100%;
}

.foreground_b2d72f {
  opacity: 0.6;
}

.avatar_b2d72f {
  margin-right: -4px;
}

.avatarSize_b2d72f {
  width: 20px !important;
  height: 20px !important;
}

.avatarSize_b2d72f {
  /* NOTE(amadeus): This is an ugly hack - but we have to coerce our avatars
   * into the old style until redesign re-visits this */
  /* stylelint-disable-next-line declaration-no-important */
  /* stylelint-disable-next-line declaration-no-important */
}

.emptyUser_b2d72f {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-500);
}

.avatarMasked_b2d72f {
  
}

.avatarMasked_b2d72f {
  -webkit-mask-image: url(/assets/1f9b76e0279b91a4.svg);
          mask-image: url(/assets/1f9b76e0279b91a4.svg);
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.moreUsers_b2d72f {
  position: relative;
  background-color: var(--primary-500);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-300);
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  padding: 0 8px 0 6px;
}

/* Use this on images to prevent click dragging them */
.noUserDrag_c8743f {
  -webkit-user-drag: none;
}
.userSelectText_c8743f {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.userSelectNone_c8743f {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cursorDefault_c8743f {
  cursor: default;
}
.cursorPointer_c8743f {
  cursor: pointer;
}

.premiumIcon__9671b {
  position: relative;
  top: 6px;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}

.platformIcon__9671b {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
}

.platformIcon__9671b + .platformIcon__9671b {
    margin-left: -10px;
  }

.giftIcon__9671b {
  margin-right: 4px;
  vertical-align: text-bottom;
}

.icon__9671b {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: -3px;
  position: relative;
}

.icon__9671b + .icon__9671b {
    margin-left: 6px;
  }

.iconWindows__9671b {
  
  -webkit-mask-image: url(/assets/20dd0e244b9a7065.svg);
          mask-image: url(/assets/20dd0e244b9a7065.svg);
  background-color: currentColor;
}

.iconApple__9671b {
  
  -webkit-mask-image: url(/assets/d11dc1928431aa27.svg);
          mask-image: url(/assets/d11dc1928431aa27.svg);
  background-color: currentColor;
}

.iconAndroid__9671b {
  
  -webkit-mask-image: url(/assets/f625814fc53c325e.svg);
          mask-image: url(/assets/f625814fc53c325e.svg);
  background-color: currentColor;
}

.iconUSFlag__9671b {
  
  background-image: url(/assets/423c2b95bd0fdafb.png);
  background-size: 85%;
  background-position: top;
  background-repeat: no-repeat;
  margin-right: 7px;
  margin-top: 0;
}

.icon__9671b + .btn__9671b {
  margin-left: 20px;
}

.textLink__9671b {
  color: var(--white-500);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  padding-left: 10px;
  -webkit-app-region: no-drag;
}

.textLinkSmall__9671b {
  
  font-size: 12px;
}

.testModeSKUSelector__9671b {
  margin-left: 16px;
  height: 24px;
}

.premiumLogo__9671b {
  display: inline-block;
  position: relative;
  top: 2px;
  width: 51px;
  height: 13px;
  margin-right: 20px;
  background-image: url(/assets/a3541a1173e706be.svg);
  background-size: 100%;
  background-repeat: no-repeat;
}

.premiumText__9671b {
  font-weight: 500;
}

.premiumAction__9671b {
  margin-left: 20px;
}

.ellipsis__9671b {
  margin-left: 7px;
}

.quarantineNotice__9671b {
  background-color: var(--red-430);
}

.quarantineNotice__9671b .quarantineLearnMoreLink__9671b {
    margin-left: 10px;
    color: white;
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.notice__36c3e {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.guildIcon__36c3e {
  margin-right: 8px;
}

.guildName__36c3e {
  color: inherit;
}

.guildName__36c3e:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.actionButton__36c3e {
  top: 0;
  margin-left: 12px;
}

.actionButtonInner__36c3e {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notice__30f28 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 8px;
  box-shadow: none;

  background-color: var(--brand-600);
  color: var(--white-500);
}

  .notice__30f28.error__30f28 {
    background-color: var(--status-danger);
  }

.button__30f28 {
  font-weight: 600;
  padding: 4px 8px;
  height: -moz-fit-content;
  height: fit-content;
  align-items: center;
}

.button__30f28:hover {
    background-color: var(--brand-530);
  }

.error__30f28 > .button__30f28:hover {
    background-color: var(--red-430);
  }

.header__30f28 {
  color: var(--white-500);
  display: inline;
  margin-right: 16px;
}

.backButtonInner__84419 {
  display: flex;
  gap: 8px;
  padding: 2px 0;
}

.backButton__84419:hover {
  background-color: var(--brand-530);
}

.backNotice__84419 {
  background-color: var(--brand-600);
  border-radius: 0;
  text-align: left;
  text-align: initial;
  padding: 8px;
}

.notice_c5cd6a {
  background-color: var(--brand-600);
  color: var(--white-500);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 8px;
}

.button_c5cd6a {
  font-weight: 600;
  padding: 4px 8px;
  height: -moz-fit-content;
  height: fit-content;
  align-items: center;
}

.button_c5cd6a:hover {
    background-color: var(--brand-530);
  }

.back_c5cd6a {
  position: absolute;
  left: 8px;
  margin: auto;
  top: 0;
  bottom: 0;
  height: 24px;
}

.iconButton_c5cd6a {
  display: flex;
  align-items: center;
}

.arrow_c5cd6a {
  margin-right: 8px;
}

.header_c5cd6a {
  display: inline;
  margin-right: 16px;
  color: var(--white-500);
}

.text__18089 {
  display: inline-block;
  color: currentColor;
}

  .text__18089 a {
    color: currentColor;
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

.premiumIcon__18089 {
  position: relative;
  top: 6px;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}

.container__477aa {
  display: flex;
  flex-direction: row;

  justify-content: center;
  align-items: center;
}

.acceptButton__477aa {
  margin-left: 16px;
  padding: 4px 8px;
}

.acceptText__477aa {
  color: var(--green-500);
}

.declineButton__477aa {
  margin-left: 8px;
  /* 1px less to account for the border */
  padding: 3px 7px;
}

.declineText__477aa {
  color: var(--white-500);
}

.blocked__477aa {
  display: flex;
  align-items: center;
}

.blockedIcon__477aa {
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-12);
}

.blockedText__477aa {
  font-size: 12px;
  font-weight: 400;
}

.noIcon__477aa {
  margin-left: var(--spacing-12);
}

.pill_a2c9e8 {
  border-radius: 20px;
  background-color: var(--background-secondary-alt);
  color: var(--text-normal);
  border: 1px solid transparent;
  box-sizing: border-box;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  height: 32px;
  overflow: hidden;
}

  .pill_a2c9e8.clickable_a2c9e8:not(.disabled_a2c9e8):hover {
    cursor: pointer;
    background-color: var(--background-tertiary);
  }

  .pill_a2c9e8.disabled_a2c9e8 {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .pill_a2c9e8.small_a2c9e8 {
    height: 24px;
    padding: 0 8px;
  }

.theme-light .pill_a2c9e8.selected_a2c9e8 {
    border-color: var(--brand-500);
    background-color: var(--brand-160);
  }

.theme-dark .pill_a2c9e8.selected_a2c9e8 {
    border-color: var(--brand-500);
    background-color: var(--brand-15a);
  }

.emoji_a2c9e8 {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}

.emoji_a2c9e8.small_a2c9e8 {
    width: 12px;
    height: 12px;
  }

.closeCircle_a2c9e8 {
  
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-floating);
  cursor: pointer;
  flex-shrink: 0;
}

.close_a2c9e8 {
  width: 12px;
  height: 12px;
  color: var(--header-primary);
}

.tooltipPill_a2c9e8 {
  margin: 4px 2px;
}

.visual-refresh .pill_a2c9e8 {
    background-color: var(--button-secondary-background);
    border: 1px solid var(--border-subtle);
    color: var(--button-secondary-text);
  }

.visual-refresh .pill_a2c9e8.clickable_a2c9e8:not(.disabled_a2c9e8):hover {
      cursor: pointer;
      background-color: var(--button-secondary-background-hover);
    }

.visual-refresh .pill_a2c9e8.clickable_a2c9e8:not(.disabled_a2c9e8):active {
      cursor: pointer;
      background-color: var(--button-secondary-background-active);
    }

.visual-refresh .pill_a2c9e8.selected_a2c9e8 {
      background-color: var(--message-reacted-background);
      color: var(--message-reacted-text);
    }

.visual-refresh .pill_a2c9e8.selected_a2c9e8:not(.disabled_a2c9e8):hover {
        background-color: var(--opacity-blurple-32);
      }

.visual-refresh .pill_a2c9e8.selected_a2c9e8:not(.disabled_a2c9e8):active {
        background-color: var(--opacity-blurple-12);
      }

.visual-refresh.full-motion .pill_a2c9e8 {
    transition: background-color 0.2s ease;
  }

.hoverRoll__0263c {
  display: inline-block;
  vertical-align: top;
  cursor: default;
  text-align: left;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  contain: paint;
}

  /*
   We nest here because these rules are very unlikely to be
   overriden and because the only alternative is JS events
   */

  .hoverRoll__0263c.forceHover__0263c:not(.disabled__0263c) .default__0263c, .hoverRoll__0263c:hover:not(.disabled__0263c) .default__0263c {
      transform: translate3d(0, -107%, 0);
      opacity: 0;
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
    }

  .hoverRoll__0263c.forceHover__0263c:not(.disabled__0263c) .hovered__0263c, .hoverRoll__0263c:hover:not(.disabled__0263c) .hovered__0263c {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }

.visual-refresh .hoverRoll__0263c {
    cursor: revert;
  }

.default__0263c,
.hovered__0263c {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  transform-style: preserve-3d;
  pointer-events: none;
  width: 100%;
}

.full-motion .default__0263c, .full-motion .hovered__0263c {
    transition: all 0.22s ease;
  }

.hovered__0263c {
  opacity: 0;
  transform: translate3d(0, 107%, 0);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.wrapper_e03935 {
  box-sizing: border-box;
  position: relative;
  background-color: hsl(var(--black-500-hsl) / 0.1);
  padding-bottom: 56.25%;
  border-radius: 8px;
  border: 2px solid var(--brand-500);
}

  .wrapper_e03935.disabledSelected_e03935 {
    border: 2px solid var(--red-400);
  }

.option_e03935 {
  position: absolute;
  width: 24%;
  height: 24%;
  /* StyleLint is complaining about this... */
  /* stylelint-disable-next-line property-blacklist */
  margin: 6px;
  border-radius: 3px;
  opacity: 0.6;
  background-color: var(--primary-400);
  cursor: pointer;
  overflow: hidden;
  text-indent: -999em;
  font-size: 0;
  line-height: 0;
}

.option_e03935:hover {
    background-color: var(--brand-500);
    box-shadow: 0 2px 0 hsl(var(--black-500-hsl) / 0.3);
    opacity: 0.8;
  }

.hiddenInput_e03935 {
  opacity: 0;
  position: absolute;
  top: 0;
  cursor: pointer;
}

.bottomLeft_e03935 {
  
}

.bottomRight_e03935 {
  
}

.topLeft_e03935 {
  
}

.topRight_e03935 {
  
}

.topRight_e03935 {
  top: 0;
  right: 0;
}

.topLeft_e03935 {
  top: 0;
  left: 0;
}

.bottomRight_e03935 {
  bottom: 0;
  right: 0;
}

.bottomLeft_e03935 {
  bottom: 0;
  left: 0;
}

.disabled_e03935 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  cursor: pointer;
  color: var(--primary-400);
  overflow: hidden;
  text-indent: -999em;
  font-size: 0;
  line-height: 0;
}

.disabled_e03935:hover {
    opacity: 0.8;
    color: var(--status-danger);
  }

.disabledIcon_e03935 {
  display: block;
  width: 100%;
  height: 100%;
}

.selected_e03935.option_e03935 {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
    box-shadow: 0 2px 0 hsl(var(--black-500-hsl) / 0.3);
    opacity: 1;
  }

.selected_e03935.disabled_e03935 {
    opacity: 1;
    color: var(--status-danger);
  }

.settingsItemHighlight__7cd2d {
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
}

.settingsBackgroundFlashElement__7cd2d {
  position: relative;
}

.qrCodeOverlay_c28498 {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrCodeOverlay_c28498 img {
  image-rendering: crisp-edges;
}

.size-40_c28498 {
  width: 40px;
  height: 40px;
}

.size-60_c28498 {
  width: 60px;
  height: 60px;
}

.qrCodeOverlayContainer_c28498 {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.qrCodeContainer_c28498 {
  padding: var(--spacing-8);
  border-radius: var(--radius-xs);
}

.qrLogin_e16417 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 240px;
  height: 344px;
}

.qrLoginInner_e16417 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.qrCode_e16417 {
  image-rendering: pixelated;
  position: absolute;
}

.qrCodeContainer_e16417 {
  display: flex;
  width: 176px;
  height: 176px;
  position: relative;
  margin-bottom: 32px;
}

.qrCodeOverlay_e16417 {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrCodeOverlay_e16417 img {
  width: 50px;
  height: 50px;
  display: flex;
  image-rendering: crisp-edges;
}

.qrAvatar_e16417 {
  margin-bottom: 32px;
}

.startOverButton_e16417 {
  color: var(--brand-500);
  margin-top: 16px;
}

.verticalSeparator_e16417 {
  margin: 0 32px;
}

.authCaptcha_e16417 {
  flex-shrink: 0;
  width: 480px;
  background-color: var(--primary-630);
  display: flex;
  flex-direction: column;
  border-radius: 5px 5px 0 0;
  padding: 24px 16px;
}

@media (max-width: 830px) {
  .qrLogin_e16417,
  .verticalSeparator_e16417 {
    display: none;
  }
}

/* Windows High-Contrast Mode
 * Uses user-defined color assignments instead of theme colors
 * https://www.w3.org/TR/css-color-4/#css-system-colors
 */

.enable-forced-colors .qrCodeContainer_e16417 {
    forced-color-adjust: none;
  }

.column__1e128 {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--custom-auth-box-auth-box-padding);
}

  .column__1e128:nth-child(odd) {
    background-color: var(--background-secondary);
  }

  .column__1e128:nth-child(even) {
    background-color: var(--background-primary);
  }

  .column__1e128:first-child {
    padding-left: 32px;
  }

  .column__1e128:last-child {
    padding-right: 32px;
  }

.container__1e128 {
  padding: 0;
  overflow: hidden;
}

.content__1e128 {
  display: flex;
}

.header__1d5fc {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.horizontalAuthBox__1d5fc {
  width: 960px;
}

.needAccount__1d5fc {
  font-size: 14px;
  line-height: 16px;
}

.smallRegisterLink__1d5fc {
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 0;
  vertical-align: bottom;
  padding: 0;
}

.mainLoginContainer__1d5fc {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: start;
}

.mobile__1d5fc {
  width: 100%;
}

.goBackButton__1d5fc {
  margin-bottom: 16px;
  padding-left: 0;
}

.goBackButton__1d5fc .content__1d5fc {
    display: flex;
    align-items: center;
  }

.goBackButton__1d5fc .caret__1d5fc {
    margin: 0 4px 1px 0;
  }

.title_efe2ea {
  margin-bottom: 8px;
}

.subtitle_efe2ea {
  margin-bottom: 24px;
}

.img_efe2ea {
  margin-bottom: 20px;
  width: 252px;
  height: 168px;
}

.select_d48ec6.error_d48ec6 .errorMessage_d48ec6 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
  color: var(--status-danger);
}

.container_b0f4cc {
  display: flex;
  flex-direction: column;
}

.title_b0f4cc {
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--interactive-normal);
}

.inputs_b0f4cc {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.day_b0f4cc {
  width: 30%;
}

.month_b0f4cc {
  width: 35%;
}

.year_b0f4cc {
  width: 30%;
}

.errors_b0f4cc {
  color: var(--status-danger);
}

.checkbox_e17bcd {
  margin-right: 8px;
}

.subText_e17bcd {
  color: var(--text-normal);
}

.container__56b49 {
  display: flex;
  flex-direction: column;

  text-align: left;
}

.statusContainer__56b49 {
  margin-bottom: 16px;
}

.channelInfoContainer__56b49 {
  margin-top: 16px;

  display: flex;
  flex-direction: row;
  align-items: center;

  color: var(--header-secondary);
}

.channelInfoText__56b49 {
  margin-left: 8px;
}

.checkbox_d332d2 {
  margin-right: 8px;
}

.errorMessage_d332d2 {
  color: var(--text-danger);
}

.createAccountTemplateHeader_d332d2 {
  color: var(--header-primary);
  font-size: 24px;
  font-weight: 600;
}

.horizontalAuthBox_d332d2 {
  width: 960px;
}

.flex_d332d2 {
  flex: 1 1 auto;
}

.divider_d332d2 {
  margin-top: 16px;
  margin-bottom: 16px;

  width: 100%;
  height: 1px;
  background-color: var(--background-modifier-accent);
}

.goBackButton_d332d2 {
  margin-bottom: 16px;
  padding-left: 0;
}

.goBackButton_d332d2 .content_d332d2 {
    display: flex;
    align-items: center;
  }

.goBackButton_d332d2 .caret_d332d2 {
    margin: 0 4px 1px 0;
  }

.messageNegative_d332d2 {
  color: var(--text-danger);
}

.messagePositive_d332d2 {
  color: var(--text-positive);
}

.iconContainer__98cf7 {
  filter: saturate(1);
  filter: saturate(var(--saturation-factor, 1));
  height: 80px;
  position: relative;
  width: 80px;
}

.filledIcon__98cf7 {
  background-color: var(--background-secondary-alt);
  border-radius: 80px;
  height: 80px;
  width: 80px;
}

.icon__5c799 {
  align-items: center;
  color: var(--header-secondary);
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  margin-top: 32px;
}

.guidelines__5c799 {
  margin: 8px 0;
}

.divider__5c799 {
  border: 1px solid var(--background-modifier-accent);
  margin: 24px 0;
}

.previewSection__5c799 {
  margin-bottom: 32px;
}

.channelsWrapper__5c799,
.rolesWrapper__5c799 {
  background-color: var(--background-secondary);
  border-radius: 8px;
}

.protip__5c799 {
  margin-top: 8px;
}

.protipText__5c799 {
  color: var(--text-positive);
  font-weight: 600;
  text-transform: uppercase;
}

.sectionHeader__5c799 {
  color: var(--header-primary);
  font-size: 20px;
  padding-bottom: 8px;
  text-align: left;
}

.channelsWrapper__5c799 {
  padding: 16px;
}

.channel__5c799 {
  align-items: center;
  color: var(--channels-default);
  display: flex;
  flex-direction: row;
  font-size: 16px;
  height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.category__5c799 {
  font-size: 12px;
  font-weight: 700;
  margin-left: -13px;
  text-transform: uppercase;
}

.category__5c799 .channelIcon__5c799 {
    height: 14px;
    margin-right: 1px;
    width: 14px;
  }

.channelIcon__5c799 {
  margin-right: 8px;
  width: 20px;
  flex-shrink: 0;
}

.channelText__5c799 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.rolesWrapper__5c799 {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
}

.role__5c799 {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid;
  border-radius: 11px;
  box-sizing: border-box;
  height: 22px;
  margin: 0 4px 4px 0;
  padding: 4px;
}

.roleCircle__5c799 {
  margin-left: 0;
}

.roleName__5c799 {
  color: var(--channels-default);
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 4px;
}

.authBox_fd23fc {
  width: 960px;
}

.createButton_fd23fc {
  margin-top: 12px;
}

.header_fd23fc {
  text-align: center;
  margin-bottom: 32px;
}

.formContainer_fd23fc {
  flex: 1 1 auto;
  text-align: left;
}

.container_bba364 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.buttonColumn_bba364 {
  margin: 12px;
  width: 40%;
}

@media (max-width: 485px) {
  .container_bba364 {
    flex-direction: column;
    align-items: stretch;
  }

  .buttonColumn_bba364 {
    width: auto;
    margin: 12px 0;
  }
}

.image_d92626 {
  height: 100px;
}


/*# sourceMappingURL=2c9a9ed58bc219f4.css.map*/