/*
 * BetterDiscordWeb Main Styling File
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
/*
 * BetterDiscordWeb Approval View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
@import url("../resources/fonts/inter.css");
.approval-card-container {
    display: grid;
    grid-gap: 20px;
}

.approval-card-container.grid {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.approval-card {
    border-radius: 3px;
    background: var(--bg3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    display: block;
    position: relative;
}

.approval-card:last-child {
    margin: 0;
}

.approval-card-header {
    padding: 16px;
    background: var(--bg3-alt);
}

.approval-card-header span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-normal);
}

.approval-card-header span strong {
    font-weight: 600;
    color: var(--text-light);
}

.approval-card-body {
    padding: 16px;
    display: flex;
    gap: 16px;
}

.approval-card-body .approval-details {
    flex: 1 0 50%;
}

.approval-card-body span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: normal;
    margin-bottom: 2px;
}

.approval-card-body span strong {
    font-weight: 600;
    color: var(--text-normal);
}

.approval-card-body .text-input {
    margin-bottom: 8px;
    flex: 1 1 50%;
}

.approval-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px;
    padding-top: 0;
    margin-top: auto;
}

.approval-card-footer .addon-tags {
    margin: 0;
}

/*
 * BetterDiscordWeb Developers View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#developers-content .card-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

#developers-content .card-container .developer-card {
    text-decoration: none;
    height: 100%;
}

#developers-content .card-container .developer-card .card-body {
    flex: 1 1 auto;
    justify-content: center;
}

.developer-avatar {
    -webkit-user-drag: none;
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--bg3-alt);
}

/*
 * BetterDiscordWeb Documentation View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#sidebar-btn,
#header-sidebar-btn {
    width: 48px;
    height: 36px;
    margin-right: 14px;
}

#sidebar-btn svg,
#header-sidebar-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--text-normal);
}

#docs-header {
    display: none;
    top: 0;
    height: 72px;
    width: 100%;
    background: var(--bg2-alt);
    z-index: 10;
    padding: 0 24px;
    transition: 150ms ease;
}

#docs-header.stuck {
    background: var(--bg1);
}

.docs-header-title {
    font-size: 18px;
    color: var(--text-normal);
    font-weight: 500;
    line-height: normal;
}

.docs-sidebar {
    width: 225px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 20px;
}

.docs-sidebar.hidden {
    transform: translateX(-100%);
}

.docs-sidebar.hidden .docs-sidebar-backdrop {
    display: none;
}

.docs-sidebar-header {
    display: none;
    align-items: center;
    position: relative;
    height: 72px;
    background: var(--bg2);
    padding: 0 24px;
}

.docs-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: rgba(0, 0, 0, 0.5);
}

.docs-sidebar .sidebar-group {
    margin-bottom: 20px;
}

.docs-sidebar .sidebar-group-header {
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: .75;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    padding: 0 16px;
}

.docs-sidebar .sidebar-item {
    margin: 2px 0;
    padding: 10px 16px;
    color: var(--text-normal);
    font-weight: 500;
    font-size: 13px;
    border-radius: 3px;
    user-select: none;
    cursor: pointer;
    transition: 250ms ease;
}

.docs-sidebar .sidebar-item:hover {
    color: var(--text-light);
}

.docs-sidebar .sidebar-item.selected {
    background: rgba(58, 113, 193, 0.15);
    color: var(--accent);
    cursor: default;
}

.docs-content {
    padding: 36px;
    background: var(--bg3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    max-width: 100%;
    overflow: auto;
    overflow: overlay;
    height: fit-content;
    height: -moz-fit-content;
}

@media screen and (max-width: 950px) {
    #docs-header {
        position: sticky;
        display: flex;
    }
    .docs-content {
        padding: 24px;
    }
    .docs-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        height: 100%;
        z-index: 100;
        width: 272px;
    }
    .docs-sidebar-backdrop {
        display: block;
    }
    .docs-sidebar-header {
        display: flex;
    }
    .docs-sidebar-inner {
        background: var(--bg2-alt);
        z-index: 1;
        padding: 20px 10px;
        max-height: 100%;
        overflow: auto;
        overflow: overlay;
    }
}

/*
 * BetterDiscordWeb Footer View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.footer-container {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

#section-footer {
    background: var(--bg1);
    margin-top: auto;
    position: relative;
}

#footer-top {
    margin: 0 auto;
    max-width: 1200px;
    margin-bottom: 48px;
}

.footer-column {
    flex-grow: 1;
}

.footer-column:last-child {
    flex-grow: 0;
}

.footer-column-header {
    color: var(--text-light);
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 700;
}

.footer-column-item {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    transition: 150ms ease;
    width: fit-content;
    width: -moz-fit-content;
}

.footer-column-item:hover {
    color: var(--text-normal);
}

.footer-logo-wrap {
    display: block;
    width: fit-content;
    width: -moz-fit-content;
}

.footer-logo {
    border-radius: 3px;
    height: 72px;
    width: auto;
    margin-bottom: 10px;
}

#footer-social-icons {
    gap: 12px;
}

.social-icon {
    border-radius: 3px;
    color: var(--text-normal);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 150ms ease;
}

.social-icon:hover {
    color: var(--accent);
}

.footer-privacy {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
}

.footer-privacy-item {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    transition: 150ms ease;
}

.footer-privacy-item:hover {
    color: var(--text-normal);
}

.footer-copyright {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
}

#easter-egg-input {
    display: block;
    appearance: none;
    padding: 0;
    background: transparent;
    border: none;
    width: 260px;
    cursor: default;
}

.zere {
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 250px;
    opacity: 0;
    z-index: -1;
    transform: translateY(100%);
    transition: 150ms ease;
}

.zere.shown {
    opacity: 1;
    transform: none;
}

@media screen and (max-width: 950px) {
    #footer-bottom {
        padding: 0 24px;
        flex-direction: column;
    }
    .footer-privacy {
        margin-bottom: 20px;
    }
    .footer-copyright {
        margin-bottom: 20px;
    }
}

/*
 * BetterDiscordWeb Home View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#home-hero-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: radial-gradient(circle at top center, var(--bg3), var(--bg2));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    height: calc(100vh - 112px);
    max-height: 1000px;
    min-height: 532px;
    padding-bottom: 0;
}

#home-hero-section .page-section-inner {
    display: flex;
    flex-direction: column;
    padding: 0 48px;
    flex-grow: 1;
}

#home-hero-section .btn-container {
    flex-wrap: nowrap;
}

#hero-top-container {
    flex-grow: 1;
    margin-bottom: 48px;
}

#hero-top-container .title-description {
    margin-bottom: 20px;
}

#hero-top-container .btn {
    width: 256px;
    height: 48px;
}

#hero-top-container .downloads-container {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

#hero-top-container .downloads-container strong {
    font-weight: 600;
    color: var(--text-normal);
}

#hero-bottom-container .home-img {
    border: 3px solid var(--bg4);
    width: 900px;
    height: auto;
    aspect-ratio: 900 / 250;
    max-height: 250px;
    max-width: 100%;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075), 0 2px 4px rgba(0, 0, 0, 0.125), 0 4px 8px rgba(0, 0, 0, 0.175), 0 8px 16px rgba(0, 0, 0, 0.225), 0 16px 32px rgba(0, 0, 0, 0.275), 0 32px 64px rgba(0, 0, 0, 0.325), 0 64px 128px rgba(0, 0, 0, 0.375);
    display: block;
    border-bottom: none;
    z-index: 1;
    object-fit: cover;
    object-position: top;
}

#home-features-section {
    background: var(--bg3);
    position: relative;
}

#home-features-section .page-section-inner {
    display: flex;
    align-items: center;
    justify-self: center;
}

#home-features-section::before, #home-features-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg3-alt);
    mask: url("https://betterdiscord.app/../resources/ui/section_wave.svg") center/cover no-repeat;
    -webkit-mask: url("https://betterdiscord.app/../resources/ui/section_wave.svg") center/cover no-repeat;
}

#home-features-section::before {
    background: url("https://betterdiscord.app/../resources/ui/section_wave_shadow.svg") center/cover no-repeat;
    mask: none;
    -webkit-mask: none;
}

.features-view {
    max-width: 1275px;
    display: block;
    position: relative;
    z-index: 1;
}

.features-view .feature {
    display: grid;
    grid-gap: 6%;
    flex-grow: 1;
}

.features-view .feature#feature-1 {
    grid-template-columns: 550px auto;
    margin-bottom: 72px;
}

.features-view .feature#feature-2 {
    grid-template-columns: auto 550px;
    margin: 0;
}

.features-view .feature .title {
    white-space: nowrap;
}

.features-view .feature .title-description {
    margin-bottom: 20px;
}

.features-view .feature .btn {
    width: fit-content;
    width: -moz-fit-content;
    padding: 12px 24px;
    font-size: 16px;
}

.theme-showcase,
.plugin-showcase {
    background: var(--bg4);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1), 0 32px 32px rgba(0, 0, 0, 0.1), 0 64px 64px rgba(0, 0, 0, 0.1), 0 128px 128px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    height: 350px;
    width: 550px;
    position: relative;
    overflow: hidden;
}

.theme-showcase-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url("../resources/images/thumb3.webp");
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes crossfade {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    8% {
        animation-timing-function: ease-out;
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.theme-showcase-inner .crossfade-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    animation: crossfade 54s linear infinite forwards;
    backface-visibility: hidden;
    opacity: 0;
    z-index: 1;
}

.theme-showcase-inner .crossfade-image:nth-child(1) {
    background-image: url("../resources/images/thumb1.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(2) {
    animation-delay: 6s;
    background-image: url("../resources/images/thumb2.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(3) {
    animation-delay: 12s;
    background-image: url("../resources/images/thumb3.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(4) {
    animation-delay: 18s;
    background-image: url("../resources/images/thumb4.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(5) {
    animation-delay: 24s;
    background-image: url("../resources/images/thumb5.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(6) {
    animation-delay: 30s;
    background-image: url("../resources/images/thumb6.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(7) {
    animation-delay: 36s;
    background-image: url("../resources/images/thumb7.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(8) {
    animation-delay: 42s;
    background-image: url("../resources/images/thumb8.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(9) {
    animation-delay: 48s;
    background-image: url("../resources/images/thumb9.webp");
}

.theme-showcase-inner .crossfade-image:nth-child(10) {
    animation-delay: 54s;
    background-image: url("../resources/images/thumb10.webp");
}

.theme-showcase-inner .guilds-column,
.theme-showcase-inner .sidebar-column,
.theme-showcase-inner .chat-content {
    height: 100%;
    position: relative;
    display: block;
}

.theme-showcase-inner .guilds-column {
    width: 10%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 2;
    position: relative;
}

.theme-showcase-inner .sidebar-column {
    z-index: 2;
    position: relative;
    display: block;
    width: 20%;
    background: rgba(0, 0, 0, 0.6);
}

.theme-showcase-inner .sidebar-column {
    width: 30%;
}

.theme-showcase-inner .toolbar,
.theme-showcase-inner .sidebar-header {
    height: 10%;
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.85);
}

.theme-showcase-inner .sidebar-header {
    background: rgba(0, 0, 0, 0.5);
}

.theme-showcase-inner .base {
    z-index: 2;
    position: relative;
    width: 70%;
}

.theme-showcase-inner .chat {
    display: flex;
    height: 90%;
}

.theme-showcase-inner .chat-content {
    width: 70%;
    background: rgba(0, 0, 0, 0.45);
}

.plugin-showcase {
    height: fit-content;
    height: -moz-fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.plugin-showcase pre {
    all: unset;
}

.plugin-showcase code {
    display: block;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    user-select: none;
    white-space: normal;
    opacity: 0.15;
    pointer-events: none;
}

.plugin-showcase-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
}

.plugin-showcase-logo {
    width: 128px;
    height: 128px;
    color: var(--text-normal);
}

.plugin-showcase-plus {
    width: 72px;
    height: 72px;
    margin: 0 32px;
}

#home-additional-features {
    background: var(--bg2-alt);
}

#home-additional-features .page-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#additional-features {
    max-width: 762px;
    width: 100%;
    margin: 48px 0;
}

.additional-feature {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--bg3-alt);
    margin: 2px;
    width: 250px;
}

.additional-feature h5 {
    margin-bottom: 4px;
    color: var(--text-normal);
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.additional-feature p {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
}

.additional-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    height: auto;
    width: 24px;
    margin-bottom: 10px;
}

.additional-feature-icon svg {
    fill: var(--accent);
    width: 100%;
    height: auto;
}

.wave-separator {
    width: 100%;
    height: 10%;
    max-height: 500px;
}

.wave-separator .main-path {
    fill: var(--bg2-alt);
}

.wave-separator .accent-path {
    fill: var(--accent);
    opacity: 0.25;
}

#home-download-cta {
    padding-top: 0;
    background: var(--bg2);
}

#home-download-cta .page-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#home-download-cta .title-description {
    margin-bottom: 20px;
}

#home-download-cta .btn-container {
    margin-bottom: 50px;
}

#home-download-cta .btn-container .btn {
    padding: 12px 24px;
    font-size: 16px;
    width: 224px;
}

@media screen and (max-width: 950px) {
    #home-hero-section {
        min-height: calc(100vh - 138px);
        padding-bottom: 48px;
        height: auto;
    }
    #home-features-section::before, #home-features-section::after {
        content: none;
    }
    #home-features-section .features-view .feature {
        grid-template-columns: none;
    }
    .additional-feature {
        width: 100%;
    }
    #home-download-cta {
        padding-top: 48px;
    }
}

@media screen and (max-width: 700px) {
    #home-hero-section .btn-container {
        flex-wrap: wrap;
    }
    #home-hero-section .btn-container,
#home-hero-section .btn {
        width: 100%;
    }
}

/*
 * BetterDiscordWeb Navbar View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#navbar {
    flex: 0 0 auto;
    height: 112px;
    position: relative;
    background: var(--bg1);
    padding: 0;
}

#navbar .page-section-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@keyframes floating-navbar {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: none;
    }
}

#navbar.floating {
    position: fixed;
    top: 0;
    width: 100%;
    height: 64px;
    z-index: 100;
    animation: floating-navbar 150ms ease;
}

#navbar.floating + #main-page-content {
    padding-top: 112px;
}

#navbar.floating .navbar-logo {
    display: none;
}

#navbar.floating .navbar-logo.small {
    display: block;
    height: 36px;
}

#navbar .user-container {
    display: flex;
    align-items: center;
    position: relative;
}

#navbar .user-container .dropdown-arrow {
    margin-left: 10px;
    fill: currentColor;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

#navbar .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    pointer-events: none;
    background-color: var(--bg3);
}

#navbar .btn {
    padding: 10px 12px;
    margin: 0 5px;
}

.nav-item {
    background-color: transparent;
    border: none;
    color: var(--text-normal);
    font-weight: 500;
    padding: 12px;
    margin: 0 5px;
    border-radius: 3px;
    line-height: normal;
    font-size: 15px !important;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    user-select: none;
    cursor: pointer;
    transition: 150ms ease color;
}

.nav-item:hover {
    color: var(--text-light);
}

.navbar-logo {
    border-radius: 3px;
    height: 64px;
    width: auto;
    display: block;
}

.navbar-logo.small {
    display: none;
}

@media screen and (max-width: 950px) {
    #navbar {
        height: auto;
    }
    #navbar .page-section-inner {
        padding: 18px 4px 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #navbar.floating {
        position: relative;
        animation: none;
        height: auto;
    }
    #navbar.floating + #main-page-content {
        padding: 0;
    }
    #navbar.floating .nav-item {
        font-size: 15px;
    }
    #navbar-nav-items {
        justify-content: center;
        flex-wrap: wrap;
        flex-grow: 1;
        margin-top: 20px;
    }
    .user-dropdown form {
        display: block;
    }
    .navbar-logo.small {
        height: 36px;
        display: block;
    }
}

/*
 * BetterDiscordWeb Addon Details View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#addon-details {
    position: relative;
}

#addon-details-title .title {
    margin-bottom: 10px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#addon-details-title .btn {
    flex: 0 0 auto;
    margin-left: 10px;
    max-width: 100%;
}

#addon-info-container {
    margin-bottom: 10px;
}

.addon-info-item {
    font-size: 14px;
    color: var(--text-normal);
    font-weight: 500;
}

.addon-info-divider {
    border-left: 1px solid var(--bg4);
    width: 1px;
    height: 20px;
    display: block;
    margin: 0 10px;
}

.addon-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-height: 100vh;
    height: auto;
    opacity: 0.15;
    object-fit: cover;
    object-position: top center;
    mask: radial-gradient(circle at top center, var(--bg2), transparent 75%);
    -webkit-mask: radial-gradient(circle at top center, var(--bg2), transparent 75%);
    user-select: none;
}

#addon-splitview-container {
    position: relative;
    margin-top: 24px;
}

.addon-details-segment {
    padding: 20px;
    background: var(--bg3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    height: fit-content;
    height: -moz-fit-content;
}

#addon-details-left-column {
    width: calc(100% - 350px - 20px);
}

#addon-details-left-column .addon-details-segment {
    overflow: auto;
    overflow: overlay;
}

#addon-details-right-column {
    width: 350px;
    margin-left: 20px;
}

.addon-details-segment {
    margin-top: 20px;
}

.addon-details-segment:first-child {
    margin: 0;
}

.addon-details-segment section {
    margin-bottom: 16px;
}

.addon-details-segment section:last-child {
    margin: 0;
}

.addon-details-segment .addon-tags {
    margin-bottom: 0;
}

.addon-details-segment #addon-server img {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    border-radius: 3px;
}

.addon-details-segment #addon-server h5 {
    font-size: 16px;
    color: var(--text-light);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

.addon-details-segment #addon-server p {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

.addon-details-segment #addon-server .btn {
    margin-top: 10px;
}

.addon-details-segment #addon-server > div > .flex-container {
    min-width: 1px;
}

.addon-metadata-row {
    color: var(--text-muted);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    font-weight: 500;
}

.addon-metadata-row strong {
    color: var(--text-normal);
    font-weight: 600;
}

.addon-details-section-header {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addon-author-container {
    display: flex;
    align-items: center;
    -webkit-user-drag: none;
    padding: 10px;
    transition: 150ms ease;
    border-radius: 3px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
    margin-bottom: 10px;
}

.addon-author-container:last-child {
    margin: 0;
}

.addon-author-container:hover {
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.addon-author-container:focus {
    box-shadow: 0 0 0 3px var(--accent-faded);
}

.addon-author-container img {
    user-select: none;
    -webkit-user-drag: none;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    margin-right: 10px;
}

.addon-author-container h5 {
    color: var(--text-normal);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

@media screen and (max-width: 950px) {
    #addon-splitview-container {
        flex-direction: column;
    }
    #addon-details-left-column {
        width: 100%;
    }
    #addon-details-right-column {
        margin: 0;
        margin-bottom: 20px;
        order: -1;
        width: unset;
    }
}

/*
 * BetterDiscordWeb Addons View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#addons-controls {
    padding-bottom: 0;
}

#addons-controls #sort-dropdown,
#addons-controls #tags-dropdown {
    margin-top: 5px;
    z-index: 10;
    left: 0;
    width: fit-content;
    width: -moz-fit-content;
}

#addons-controls #tags-dropdown {
    max-height: 30vh;
}

#addons-actions {
    margin-bottom: 20px;
    gap: 10px;
    max-width: 100%;
    justify-content: space-between;
    position: relative;
}

#addons-actions .btn {
    width: fit-content;
    width: -moz-fit-content;
}

#addons-content {
    padding-top: 0;
}

#addons-content .spinner {
    margin: 80px auto;
}

.addons-blankstate {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
}

.addons-blankstate img {
    height: auto;
    width: 280px;
    max-width: 100%;
    margin-bottom: 16px;
}

.addons-blankstate h2 {
    font-size: 24px;
    color: var(--text-light);
    font-weight: 700;
    line-height: normal;
    margin-bottom: 5px;
}

.addons-blankstate p {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

/*
 * BetterDiscordWeb User Profile View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#user-profile-header {
    width: 100%;
    height: fit-content;
    height: -moz-fit-content;
    margin-bottom: 20px;
    gap: 20px;
}

#profile-header-left {
    height: 100%;
    max-width: 100%;
}

#profile-header-left .user-avatar {
    width: 84px;
    height: auto;
    border-radius: 4px;
}

#profile-header-left .user-info {
    margin: 0 16px;
    max-width: 100%;
}

#profile-header-left .user-info .discord-username {
    color: var(--text-light);
    font-weight: 700;
    font-size: 28px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#profile-header-left .user-info .github-handle {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#profile-header-right {
    max-width: 100%;
}

#user-profile #addons-content {
    width: 100%;
}

@media screen and (max-width: 950px) {
    #user-profile .tab-bar .tab {
        width: calc(100% / 3);
        justify-content: center;
    }
}

@media screen and (max-width: 325px) {
    #profile-header-left .user-info {
        margin: 0;
    }
    #user-profile .user-avatar {
        display: none;
    }
}

/*
 * BetterDiscordWeb Settings View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.settings-content {
    margin-top: 24px;
}

.settings-content h5 {
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
}

.settings-group {
    padding: 20px;
    background: var(--bg3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    margin-bottom: 24px;
}

.settings-group:last-child {
    margin-bottom: 0;
}

.settings-item {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bg3-alt);
}

.settings-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: none;
}

.settings-item h3 {
    color: var(--text-light);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: normal;
}

.settings-item p {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
}

.settings-item#user-settings-discord-invite input {
    margin-top: 8px;
}

/*
 * BetterDiscordWeb Users View
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.pagination-container {
    margin-top: 16px;
}

/*
 * BetterDiscordWeb Merch Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#buttonSpreadshirt {
    display: none;
}

.notifications {
    display: flex;
    justify-content: center;
    flex-direction: row;
    color: #ddd;
}

.notifications .notifications-table {
    color: #ddd;
    display: flex;
    background: var(--bg3);
    width: fit-content;
    flex-direction: column;
    min-width: 350px;
    width: 350px;
    resize: horizontal;
    overflow: auto !important;
    max-width: 600px;
}

.notifications .notifications-table + .notifications-table {
    margin-left: 20px;
}

.notifications .notifications-table .notifications-title {
    text-align: center;
    background: var(--bg3-alt);
    padding: 10px;
    box-shadow: 1px 0px 4px #000000;
    z-index: 1;
}

.notifications .notifications-table .notification-content {
    padding: 10px;
    padding-right: 5px;
    max-height: 620px;
    overflow-y: scroll;
}

.notifications .notifications-table .notification-content::-webkit-scrollbar {
    display: block;
}

.notifications .notifications-table .notification-content .notification {
    background: var(--bg3-alt);
    padding: 10px;
    --notification-color: var(--accent);
}

.notifications .notifications-table .notification-content .notification[data-ui-hint$="approved"] .notification-icon {
    --notification-color: #1aa45b;
}

.notifications .notifications-table .notification-content .notification[data-ui-hint="notifications_nuked"] .notification-icon, .notifications .notifications-table .notification-content .notification[data-ui-hint$="rejected"] .notification-icon {
    --notification-color: var(--danger);
}

.notifications .notifications-table .notification-content .notification + .notification {
    margin-top: 5px;
}

.notifications .notifications-table .notification-content .notification .notification-head {
    align-items: center;
    display: flex;
    margin-bottom: 3px;
}

.notifications .notifications-table .notification-content .notification .notification-head .notification-icon {
    display: inline-flex;
    margin-right: 5px;
    color: var(--notification-color);
}

.notifications .notifications-table .notification-content .notification .notification-head .notification-icon svg {
    --size: 22px;
    width: var(--size);
    height: var(--size);
}

.notifications .notifications-table .notification-content .notification .notification-head .notification-name {
    font-weight: bold;
    margin-right: 5px;
    text-transform: capitalize;
    line-height: 1;
}

.notifications .notifications-table .notification-content .notification .notification-head .notification-author {
    margin-left: 5px;
}

.notifications .notifications-table .notification-content .notification .notification-head .discord-avatar {
    margin-left: auto;
    display: inline-flex;
}

.notifications .notifications-table .notification-content .notification .notification-head .discord-avatar img {
    --size: 24px;
    width: var(--size);
    height: var(--size);
    border-radius: 100px;
}

.notifications .notifications-table .notification-content .notification .notification-body {
    white-space: pre-wrap;
}

.notifications .notifications-table .notification-content .notification .notification-body h1, .notifications .notifications-table .notification-content .notification .notification-body h2, .notifications .notifications-table .notification-content .notification .notification-body h3, .notifications .notifications-table .notification-content .notification .notification-body h4, .notifications .notifications-table .notification-content .notification .notification-body h5, .notifications .notifications-table .notification-content .notification .notification-body h6 {
    line-height: 1;
}

.notifications .notifications-table .notification-content .notification .notification-footer {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    white-space: pre;
}

.notifications .notifications-table .notification-content .notification .notification-footer .notification-dismiss {
    background: transparent;
    border: none;
    color: #ddd;
    cursor: pointer;
}

.notifications .notifications-table .notification-content .notification .notification-footer .notification-dismiss svg {
    width: 16px;
    height: 16px;
}

/*
 * BetterDiscordWeb Ad Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.ad-container {
    margin: auto;
}

@media screen and (max-width: 950px) {
    .ad-container {
        width: 80%;
    }
}

.ad {
    margin: auto;
    overflow: hidden;
    text-align: center;
}

.ad.leaderboard_ros_atf {
    max-width: 1024px;
    max-height: 120px;
    margin-top: 30px;
}

@media screen and (max-width: 950px) {
    .ad.leaderboard_ros_atf {
        max-width: 300px;
        max-height: 250px;
    }
}

.ad.medium-rectangle {
    width: 300px;
    height: 250px;
}

.ad.medium-rectangle.auto {
    width: auto;
}

.ad.leaderboard {
    width: 728px;
    height: 90px;
}

.ad.leaderboard.auto {
    width: auto;
}

/*
 * BetterDiscordWeb Button Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.btn-container {
    display: flex;
    gap: 10px;
    align-self: center;
}

.btn {
    font-size: 14px;
    font-weight: 500;
    border-radius: 3px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 150ms ease background, 150ms ease box-shadow, 150ms ease color, 150ms ease border;
    cursor: pointer;
    padding: 8px 12px;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.btn:focus {
    box-shadow: 0 0 0 4px var(--accent-faded);
}

.btn.dropdown-btn span, .btn.dropdown-btn svg {
    pointer-events: none;
}

.btn span {
    pointer-events: none;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
}

.btn .spinner {
    margin: 0;
}

.btn .btn-icon {
    pointer-events: none;
    margin-right: 10px;
    fill: currentColor;
    flex-shrink: 0;
}

.btn .btn-icon.btn-icon-right {
    margin-right: 0;
    margin-left: 10px;
}

.btn.btn.btn-primary {
    background-color: var(--accent);
    color: #ffffff;
}

.btn.btn.btn-primary:hover {
    background: var(--accent-hover);
}

.btn.btn-secondary {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.05);
    color: var(--text-normal);
}

.btn.btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.btn.btn-secondary.btn-unlink-github {
    margin-top: 10px;
}

.btn.btn-danger {
    background-color: var(--danger);
    color: #ffffff;
}

.btn.btn-danger:hover {
    background-color: var(--danger-hover);
}

.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}

/*
 * BetterDiscordWeb Card Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.card-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    display: grid;
    grid-gap: 20px;
    align-items: stretch;
}

.card-container .card-wrap {
    box-shadow: none !important;
    text-decoration: none !important;
    color: inherit !important;
}

.card-container .card-wrap:focus-visible .card {
    box-shadow: 0 0 0 4px var(--accent-faded);
    transform: translateY(-5px);
}

.card-container .card {
    height: auto;
    background-color: var(--bg3);
    transition: 150ms ease;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    user-select: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.card-container .card:hover {
    transform: translateY(-5px);
}

.card-container .card .addon-tags {
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.card-image {
    width: 100%;
    display: block;
    position: relative;
    background-color: var(--bg4);
    height: 184px;
    object-fit: cover;
    -webkit-user-drag: none;
}

.card-image[src*="content_thumbnail.svg"] {
    object-fit: contain;
}

.card-body {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-light);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.card-subtext {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
}

.card-description {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-footer {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-footer object {
    max-width: 100%;
}

.card-stats {
    display: flex;
}

.card-stat {
    display: flex;
    align-items: flex-end;
    margin-left: 10px;
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

.card-stat svg {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    fill: var(--text-muted);
}

@media screen and (max-width: 650px) {
    .card-container {
        display: block;
    }
    .card-container .card {
        margin-bottom: 20px;
    }
}

/*
 * BetterDiscordWeb Containers Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 *
 * What is the purpose of this component?
 *
 * This component exists to define styles
 * for commonly used containing elemnts
 * in the site. This could be anything
 * from page sections to HTML tags.
 */
*,
*::before,
*::after {
    outline: none;
    box-sizing: border-box;
}

:focus-visible:not([readonly]) {
    box-shadow: 0 0 0 4px var(--accent-faded) !important;
}

.disabled {
    opacity: .6;
    cursor: not-allowed;
}

.disabled * {
    pointer-events: none;
}

.flex-container {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.justify-end {
    justify-content: flex-end;
}

.align-end {
    align-items: flex-end;
}

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

.wrap {
    flex-wrap: wrap;
}

html,
body {
    background-color: var(--bg2);
}

.os-viewport > .os-content {
    visibility: visible;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: fit-content !important;
    height: -moz-fit-content !important;
}

#main-page-content {
    flex: 1 1 auto;
}

.page-section {
    padding: 48px 0;
}

.page-section .page-section-inner {
    max-width: 1280px;
    width: 100%;
    padding: 0 128px;
    margin: 0 auto;
}

.page-section.content-header {
    background-color: var(--bg2-alt);
}

.page-section.content-header .header-left {
    margin-right: 48px;
}

.hide-desktop {
    display: none !important;
}

@media screen and (max-width: 950px) {
    .hide-mobile {
        display: none !important;
    }
    .hide-desktop {
        display: initial !important;
    }
    .page-section .page-section-inner {
        padding: 0 24px;
    }
    .content-header .page-section-inner {
        flex-direction: column;
        align-items: center;
    }
    .content-header .page-section-inner .header-left {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 0;
    }
    .content-header .page-section-inner .title-description,
.content-header .page-section-inner .title {
        text-align: center;
    }
}

/*
 * BetterDiscordWeb Dropdown Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.menu-wrap {
    position: relative;
    max-width: 100%;
}

.dropdown-menu {
    display: flex;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
    min-width: 175px;
    margin-top: 2px;
    padding: 6px 8px;
    background: var(--bg3);
    border: 1px solid var(--bg4);
    border-radius: 4px;
    overflow: auto;
    overflow: overlay;
    cursor: default;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.15), 0 16px 32px rgba(0, 0, 0, 0.15);
    transition: 100ms cubic-bezier(0, 0, 0.2, 1);
    flex-direction: column;
    transform-origin: top center;
    z-index: 10;
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.dropdown-menu:not(.open) > * {
    display: none;
}

.dropdown-menu.open {
    opacity: 1;
    transform: none;
    pointer-events: all;
}

@keyframes menu-close {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}

.dropdown-menu.closing {
    animation: menu-close 100ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

.dropdown-menu::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    display: block;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.45);
    border: none;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.dropdown-menu::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.55);
}

.dropdown-menu#repository-dropdown, .dropdown-menu#file-dropdown {
    max-height: 270px;
    background: var(--bg2-alt);
}

.dropdown-menu#repository-dropdown:empty::before, .dropdown-menu#file-dropdown:empty::before {
    content: 'Nothing was found.';
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin: 10px 0;
    text-align: center;
}

.dropdown-menu#repository-dropdown {
    z-index: 100;
}

.dropdown-menu#user-dropdown {
    transform-origin: top right;
    z-index: 100;
    width: 175px;
}

.dropdown-menu#user-dropdown .menu-username {
    color: var(--text-muted);
    cursor: default;
}

.dropdown-menu#tags-dropdown, .dropdown-menu#sort-dropdown {
    transform-origin: top left;
}

.dropdown-menu .menu-divider {
    height: 2px;
    border-top: thin solid var(--bg4);
    display: block;
    margin: 2px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 8px;
    margin: 2px 0;
    min-height: 32px;
    border-radius: 3px;
    color: var(--text-normal);
    font-weight: 500;
    font-size: 13px;
    user-select: none;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background-color: transparent;
    text-align: left;
}

.menu-item:not(.menu-username):hover, .menu-item:not(.menu-username):active {
    color: #fff;
}

.menu-item:not(.menu-username):hover .menu-radio-circle,
.menu-item:not(.menu-username):hover .menu-checkbox-background, .menu-item:not(.menu-username):active .menu-radio-circle,
.menu-item:not(.menu-username):active .menu-checkbox-background {
    fill: #fff;
}

.menu-item:not(.menu-username):hover .menu-checkbox-check, .menu-item:not(.menu-username):active .menu-checkbox-check {
    fill: var(--accent);
}

.menu-item:not(.menu-username):hover {
    background-color: var(--accent);
}

.menu-item:not(.menu-username):active {
    background-color: var(--accent-hover);
}

.menu-item.danger {
    color: var(--danger);
}

.menu-item.danger:hover {
    background: var(--danger);
    color: #ffffff;
}

.menu-item.danger:active {
    background: var(--danger-hover);
    color: #ffffff;
}

.menu-item span {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item .menu-icon {
    flex: 0 0 auto;
    width: auto;
    height: 16px;
    display: block;
    margin-right: 8px;
    fill: currentColor;
}

.menu-item .menu-control {
    margin-left: 8px;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.menu-item .menu-radio-circle {
    display: none;
    fill: var(--accent-hover);
}

.menu-item .menu-checkbox-background,
.menu-item .menu-checkbox-check {
    display: none;
}

.menu-item .menu-checkbox-check {
    fill: #fff;
}

.menu-item .menu-checkbox-background {
    fill: var(--accent);
}

.menu-item.selected .menu-radio,
.menu-item.selected .menu-radio-circle,
.menu-item.selected .menu-checkbox-check,
.menu-item.selected .menu-checkbox-background {
    display: block;
}

.menu-item.selected .menu-checkbox-outline {
    display: none;
}

/*
 * BetterDiscordWeb highlight.js Theme Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 * 
 * Adapted from https://draculatheme.com/highlightjs
 */
.hljs {
    color: #f8f8f2;
}

.hljs-built_in, .hljs-selector-tag, .hljs-section, .hljs-link {
    color: #8be9fd;
}

.hljs-keyword {
    color: #ff79c6;
}

.hljs-subst {
    color: #f8f8f2;
}

.hljs-title {
    color: #50fa7b;
}

.hljs-string, .hljs-meta, .hljs-name, .hljs-type, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-variable, .hljs-template-tag, .hljs-template-variable {
    color: #f1fa8c;
}

.hljs-comment, .hljs-quote, .hljs-deletion {
    color: #6272a4;
}

.hljs-literal, .hljs-number {
    color: #bd93f9;
}

.hljs-emphasis {
    font-style: italic;
}

/*
 * BetterDiscordWeb Scrollbar Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.os-scrollbar-handle {
    background-color: var(--bg3) !important;
    border: 1px solid var(--bg4);
}

body::-webkit-scrollbar,
.docs-sidebar-inner::-webkit-scrollbar {
    display: none !important;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: none;
}

:hover::-webkit-scrollbar {
    display: block;
}

::-webkit-scrollbar-thumb {
    background-color: var(--bg3-alt);
    border: 1px solid var(--bg4);
    border-radius: 50px;
}

* {
    scrollbar-color: var(--bg3-alt) var(--bg2);
}

/*
 * BetterDiscordWeb Tag Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.addon-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
    gap: 5px;
}

.addon-tags .addon-tag {
    font-size: 12px;
    color: var(--text-normal);
    font-weight: 500;
    padding: 2px 6px;
    background: var(--bg2);
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: 150ms ease;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.addon-tags .addon-tag:hover {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/*
 * BetterDiscordWeb Tagify Theme
 * https://github.com/BetterDiscord/BetterDiscordWeb
 * https://yaireo.github.io/tagify/
 * 
 * Most of this file will be left undocumented. There
 * is proper documentation linked above on tagify's
 * github page. Use of !important is due to inline
 * styling from the library.
 */
body .tagify {
    display: flex;
    align-items: center;
    height: auto;
    width: 100%;
    overflow: hidden;
    gap: 5px;
    position: relative;
    padding: 6px;
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: var(--bg2);
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 500;
    transition: 250ms ease;
}

body .tagify + input,
body .tagify + textarea {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

body .tagify .tagify__input {
    margin: 0;
    padding: 0 6px;
    color: unset;
    height: 25px;
    line-height: 25px;
    box-shadow: none !important;
}

body .tagify:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

body .tagify.tagify--focus {
    border-color: var(--accent);
}

body .tagify .tagify__tag {
    margin: 0;
    font-size: 12px;
    color: var(--text-normal);
    font-weight: 500;
    padding: 2px 6px;
    line-height: normal;
    background: var(--bg2);
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: 150ms ease border;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

body .tagify .tagify__tag[style*="width"] {
    display: none !important;
}

body .tagify .tagify__tag .tagify__tag__removeBtn {
    transition: 150ms ease;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath fill-rule='evenodd' fill='%23bfc4c9' d='M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z'%3E%3C/path%3E%3C/svg%3E") center/12px no-repeat;
}

body .tagify .tagify__tag .tagify__tag__removeBtn:hover {
    opacity: 1;
}

body .tagify .tagify__tag .tagify__tag__removeBtn:hover + div > span {
    opacity: 0;
}

body .tagify .tagify__tag .tagify__tag__removeBtn::after {
    content: none;
}

body .tagify .tagify__tag:hover {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

body .tagify .tagify__tag > div {
    margin: 0;
    padding: 0;
    color: inherit;
    transition: 150ms ease;
}

body .tagify .tagify__tag > div span {
    transition: 150ms ease;
    user-select: none;
}

body .tagify .tagify__tag > div::before {
    content: none;
}

body .tagify .tagify__tag > div > * {
    transition: none;
}

body .tagify__dropdown {
    overflow: visible;
}

body .tagify__dropdown .tagify__dropdown__wrapper {
    height: auto !important;
    border-radius: 0 0 4px 4px;
    border: 2px solid var(--accent);
    border-top: none;
    margin-top: -4px;
    background: var(--bg3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
    transition: 100ms cubic-bezier(0, 0, 0.2, 1), 250ms ease border;
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
    padding: 12px;
}

body .tagify__dropdown .tagify__dropdown__wrapper .tagify__dropdown__item {
    margin: 0;
    font-size: 12px;
    color: var(--text-normal);
    font-weight: 500;
    padding: 2px 6px;
    line-height: normal;
    background: var(--bg2);
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: 150ms ease border;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

body .tagify__dropdown .tagify__dropdown__wrapper .tagify__dropdown__item:hover {
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/*
 * BetterDiscordWeb Spinner Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
@font-face {
    font-family: 'Fira Code';
    src: url("fonts/FiraCode-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Inter', sans-serif;
    word-break: break-word;
}

pre {
    font-family: 'Fira Code', monospace;
}

h1, h2, h3, h4, h5, p {
    margin: 0;
}

.text-center {
    text-align: center;
}

.title {
    color: var(--text-light);
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
}

.title-description {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.75;
    margin-top: 5px;
}

.anchor {
    color: var(--text-link) !important;
    font-weight: 500 !important;
    text-decoration: none;
}

.anchor:hover {
    text-decoration: underline;
}

@media screen and (max-width: 950px) {
    .title {
        font-size: 38px;
    }
}

/*
 * BetterDiscordWeb Input Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 *
 * This file covers several components, including
 * text inputs, select inputs and search bars, which
 * all share similar or identical styling.
 */
.text-input,
.select-input,
.search {
    border-radius: 4px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: var(--bg2);
    color: var(--text-normal);
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px;
    transition: 250ms ease;
    height: 42px;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.text-input::-webkit-input-placeholder,
.select-input::-webkit-input-placeholder,
.search::-webkit-input-placeholder {
    color: var(--text-muted);
    opacity: .75;
}

.text-input::placeholder,
.select-input::placeholder,
.search::placeholder {
    color: var(--text-muted);
    opacity: .75;
}

.text-input::-moz-placeholder,
.select-input::-moz-placeholder,
.search::-moz-placeholder {
    color: var(--text-muted);
    opacity: .75;
}

.text-input:hover,
.select-input:hover,
.search:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.text-input:focus:not([readonly]), .text-input.open,
.select-input:focus:not([readonly]),
.select-input.open,
.search:focus:not([readonly]),
.search.open {
    border-color: var(--accent);
}

textarea.text-input {
    overflow: overlay;
    overflow: auto;
    height: auto;
    resize: none;
    padding: 9px 12px;
}

.select-input {
    appearance: none;
    padding: 0 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.10204 8C5.0281 8 4.45412 9.2649 5.16132 10.0731L10.6831 16.3838C11.3804 17.1806 12.6199 17.1806 13.3172 16.3838L18.839 10.0731C19.5462 9.2649 18.9722 8 17.8983 8H6.10204Z' fill='%23bfc4c9'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center right 10px;
    background-repeat: no-repeat;
}

.search-container {
    display: flex;
    position: relative;
}

.search-container .search {
    padding-left: 50px;
    padding-right: 58px;
    min-width: 350px;
    height: 50px;
}

.search-container .search-icon {
    pointer-events: none;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 17px;
    margin: 0 18px;
    fill: var(--text-muted);
}

.search-clear-btn {
    display: none;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 4px 4px 0;
    padding: 0;
}

.search-clear-btn svg {
    pointer-events: none;
}

.search-clear-btn:hover {
    color: var(--text-normal);
}

.search-clear-btn:active {
    background: var(--accent-hover);
    color: #fff;
}

.search-clear-btn.visible {
    display: flex;
}

@media screen and (max-width: 950px) {
    .search-container {
        margin-top: 10px;
    }
}

@media screen and (max-width: 400px) {
    .search-container .search {
        min-width: unset;
    }
}

/*
 * BetterDiscordWeb Tippy Theme
 * https://github.com/BetterDiscord/BetterDiscordWeb
 * https://atomiks.github.io/tippyjs/
 *
 * Use of !important is due to inline styles.
 */
.tippy-box[data-theme~='default'] {
    background-color: #f6f6f7;
    color: var(--bg1);
    border-radius: 2px;
    transition-duration: 150ms !important;
    line-height: normal;
}

.tippy-box[data-theme~='default'] .tippy-content {
    padding: 4px 8px;
    font-size: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.tippy-box[data-theme~='default'] .tippy-arrow {
    z-index: 1;
    color: #f6f6f7;
}

.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
    border-width: 6px 6px 0;
    bottom: -5px;
}

.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
    border-width: 0 6px 6px;
    top: -5px;
}

.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
    border-width: 6px 0 6px 6px;
    right: -5px;
}

.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
    border-width: 6px 6px 6px 0;
    left: -5px;
}

.copy-toast {
    position: absolute;
    padding: 1px 3px;
    border-radius: 2px;
    left: 50%;
    top: -3px;
    transform: translate(-50%, -100%);
    color: #eee;
    background: black;
    pointer-events: none;
    width: max-content;
    box-shadow: 0 0 0 1px white;
}

.copy-toast::before {
    background: black;
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%) rotateZ(45deg);
}

/*
 * BetterDiscordWeb Table Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.table-scroller {
    overflow: overlay;
    overflow: auto;
    max-width: 100%;
}

.styled-table {
    border-collapse: collapse;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.styled-table td,
.styled-table th {
    white-space: nowrap;
    padding: 12px 16px;
}

.styled-table thead {
    background: var(--bg4);
}

.styled-table thead th {
    font-weight: 600;
    color: var(--text-light);
    text-align: left;
    font-size: 15px;
}

.styled-table tbody tr:nth-child(odd) {
    background: var(--bg3-alt);
}

.styled-table .table-item {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-normal);
}

.styled-table .button-container {
    flex-wrap: nowrap;
}

.styled-table .select-input {
    width: 150px;
}

/*
 * BetterDiscordWeb Modal Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 150ms cubic-bezier(0, 0, 0.2, 1) opacity;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
}

.modal-container:not(.open) .modal > * {
    display: none;
}

.modal-container.open {
    opacity: 1;
    pointer-events: all;
}

.modal-container.open .modal {
    transform: none;
}

@keyframes modal-close {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.95);
        opacity: 0;
    }
}

.modal-container.closing .modal {
    animation: modal-close 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

.modal-container#addon-submission-modal .modal-header {
    padding-bottom: 12px;
    box-shadow: 0 0 3px var(--bg1);
}

.modal-container#addon-submission-modal .modal-header h3 {
    font-size: 16px;
}

.modal-container#addon-submission-modal .modal-content {
    padding-top: 16px;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg1);
    opacity: 0.5;
    z-index: -1;
}

.modal {
    display: flex;
    flex-direction: column;
    width: 450px;
    max-height: 100%;
    margin: 0 auto;
    border-radius: 4px;
    background: var(--bg3);
    overflow: hidden;
    box-shadow: 0 2.3px 2.7px rgba(0, 0, 0, 0.065), 0 5.6px 6.5px rgba(0, 0, 0, 0.093), 0 10.5px 12.1px rgba(0, 0, 0, 0.115), 0 18.8px 21.7px rgba(0, 0, 0, 0.137), 0 35.1px 40.5px rgba(0, 0, 0, 0.165), 0 84px 97px rgba(0, 0, 0, 0.23);
    padding: 0;
    border: none;
    transition: 150ms cubic-bezier(0, 0, 0.2, 1) transform;
    transform: scale(0.95);
}

.modal form:not(.modal-footer) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal-content,
.modal-header,
.modal-footer {
    padding: 20px;
    height: auto;
}

.modal-header {
    position: relative;
    padding: 16px 20px;
    flex: 0 0 auto;
    z-index: 1;
}

.modal-header h3 {
    line-height: normal;
    color: var(--text-light);
    font-size: 18px;
    font-weight: 600;
}

.modal-header span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    border-radius: 3px;
    transition: 150ms ease;
    cursor: pointer;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
}

.modal-close-btn:hover {
    color: var(--text-normal);
}

.modal-close-btn:active {
    color: var(--text-light);
}

.modal-close-btn:focus {
    box-shadow: 0 0 0 4px var(--accent-faded);
}

.modal-close-btn svg {
    width: 16px;
    height: auto;
}

.modal-content {
    display: block;
    flex: 1 1 auto;
    max-height: 420px;
    overflow: auto;
    overflow: overlay;
    padding-top: 4px;
}

.modal-content#connect-github .title-description {
    margin-top: 0;
    margin-bottom: 10px;
}

.modal-content #deny-reason,
.modal-content #ban-reason,
.modal-content #unban-reason {
    margin-top: 10px;
}

.modal-footer {
    padding: 16px;
    background: var(--bg2-alt);
    justify-content: center;
    flex: 0 0 auto;
    width: 100%;
}

.modal-footer .btn {
    height: 36px;
    min-width: 100px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.termly-consent-banner-preference-modal-1b1f31 .termly-consent-banner-preference-container-bcd362::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.termly-consent-banner-preference-modal-1b1f31 .termly-consent-banner-preference-container-bcd362 {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/*
 * BetterDiscordWeb File Selection Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.file-select-container {
    display: block;
}

.file-select-button {
    width: fit-content;
    width: -moz-fit-content;
    max-width: 250px;
}

/*
 * BetterDiscordWeb Spinner Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.spinner {
    --spinner-scale: 1;
    width: 40px;
    height: 40px;
    margin: auto;
    position: relative;
    backface-visibility: hidden;
    animation: spinner-3 1s cubic-bezier(0.4, 0, 0, 1) infinite;
}

.spinner::before, .spinner::after {
    content: '';
    background: var(--text-light);
    height: 8px;
    width: 8px;
    position: absolute;
    border-radius: 50px;
    top: 16px;
    backface-visibility: hidden;
}

.spinner::before {
    left: 0;
    animation: spinner-1 1s cubic-bezier(0.2, 0, 0, 0.2) infinite;
}

.spinner::after {
    left: 15px;
    animation: spinner-2 1s cubic-bezier(0.4, 0, 0, 1) infinite;
    box-shadow: 15px 0 0 0 var(--text-light);
}

@keyframes spinner-1 {
    0% {
        transform: scale(1) rotate(0.01deg);
    }
    30% {
        transform: scale(1.4) rotate(0.01deg);
    }
    100% {
        transform: scale(1) rotate(0.01deg);
    }
}

@keyframes spinner-2 {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0.01deg);
    }
    40% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: translate(-45px, 0) rotate(0.01deg);
    }
}

@keyframes spinner-3 {
    0% {
        transform: translate(0, 0) rotate(0.01deg);
    }
    100% {
        transform: translate(30px, 0) rotate(0.01deg);
    }
}

/*
 * BetterDiscordWeb Markdown Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.markdown-body {
    font-size: 14px;
    color: var(--text-normal);
}

.markdown-body > *:first-child {
    margin-top: 0 !important;
}

.markdown-body > *:last-child {
    margin-bottom: 0 !important;
}

.markdown-body > *:only-child {
    margin: 0 !important;
}

.markdown-body blockquote,
.markdown-body details,
.markdown-body dl,
.markdown-body ol,
.markdown-body p,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
    margin-top: 0;
    margin-bottom: 16px;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.markdown-body h1,
.markdown-body h2 {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--bg4);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-light);
}

.markdown-body h1 {
    font-size: 2em;
}

.markdown-body h2 {
    font-size: 1.5em;
}

.markdown-body h3 {
    font-size: 1.25em;
}

.markdown-body h4 {
    font-size: 1em;
}

.markdown-body h5 {
    font-size: 0.875em;
}

.markdown-body h6 {
    font-size: 0.85em;
    color: var(--text-normal);
}

.markdown-body ol ol,
.markdown-body ol ul,
.markdown-body ul ol,
.markdown-body ul ul {
    margin-top: 0;
    margin-bottom: 0;
}

.markdown-body ol, .markdown-body ul {
    padding-left: 2em;
}

.markdown-body li {
    word-wrap: break-all;
}

.markdown-body li + li {
    margin-top: 0.25em;
}

.markdown-body ol ol, .markdown-body ul ol {
    list-style-type: lower-roman;
}

.markdown-body ol, .markdown-body ul {
    padding-left: 2em;
}

.markdown-body code {
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    background-color: var(--bg4);
    border-radius: 3px;
}

.markdown-body pre {
    padding: 10px;
    overflow: auto;
    overflow: overlay;
    font-size: 85%;
    line-height: 1.45;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: var(--bg4);
    border-radius: 3px;
}

.markdown-body pre::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.markdown-body pre::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
}

.markdown-body pre::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.markdown-body pre::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.15);
}

.markdown-body blockquote {
    margin: 0;
    padding: 0 1em;
    color: var(--text-muted);
    border-left: 0.25em solid var(--bg4);
}

.markdown-body details {
    border: 1px solid var(--bg4);
    border-radius: 5px;
}

.markdown-body details summary {
    border-radius: 5px;
    padding: 0.5em 1em;
    cursor: pointer;
}

.markdown-body details > *:not(summary) {
    margin-left: 16px;
    margin-right: 16px;
}

.markdown-body details > *:not(summary):nth-child(2) {
    margin-top: 16px;
}

.markdown-body details > *:not(summary):last-child {
    margin-bottom: 16px;
}

.markdown-body details[open] summary {
    border-radius: 5px 5px 0 0;
    background-color: var(--bg3-alt);
}

.markdown-body kbd {
    user-select: none;
    position: relative;
    background-color: var(--bg4);
    box-shadow: inset 0 -4px 0 var(--bg3-alt);
    border: thin solid var(--bg1);
    padding: 3px 6px 4px;
    border-radius: 2px;
    min-width: 14px;
    min-height: 14px;
    text-align: center;
    font-size: 12px;
}

.markdown-body kbd:active {
    box-shadow: none;
    padding-bottom: 2px;
    top: 2px;
}

.markdown-body a {
    color: var(--text-link) !important;
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body hr {
    height: 0.15em;
    padding: 0;
    margin: 24px 0;
    background-color: var(--bg4);
    border: 0;
}

.markdown-body table {
    display: block;
    width: 100%;
    overflow: auto;
    overflow: overlay;
    border-collapse: collapse;
}

.markdown-body table th,
.markdown-body table td {
    padding: 6px 13px;
    border: 1px solid var(--bg4);
}

.markdown-body table th {
    font-weight: 600;
    background-color: var(--bg3-alt);
}

.markdown-body table tr {
    background-color: var(--bg3);
    border-top: 1px solid var(--bg4);
}

.markdown-body table tr:nth-child(2n) {
    background-color: var(--bg2-alt);
}

/*
 * BetterDiscordWeb Warning Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.warning {
    background-color: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 16px;
}

.warning svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.warning span {
    margin-left: 8px;
}

/*
 * BetterDiscordWeb Form Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.form-label {
    font-size: 14px;
    color: var(--text-normal);
    font-weight: 500;
    display: block;
    margin-bottom: 5px;
}

.form-group {
    margin-bottom: 16px;
    position: relative;
}

.form-group:last-child {
    margin: 0;
}

.requirement-indicator {
    color: var(--danger);
}

#addon-submission-contributors {
    margin: 0;
}

#addon-submission-contributors .contributor {
    margin-bottom: 10px;
}

#addon-submission-contributors .contributor .btn-secondary {
    flex-shrink: 0;
    margin-left: 10px;
}

/*
 * BetterDiscordWeb Form Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.checkbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-item .checkbox {
    margin-right: 8px;
}

.checkbox-item span {
    display: inline-block;
    color: var(--text-normal);
    font-size: 13px;
    line-height: normal;
    font-weight: 400;
}

.checkbox-item:active .checkbox {
    background-color: var(--bg3-alt);
}

.checkbox-item:active .checkbox:checked {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.checkbox {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--bg4);
}

.checkbox:active {
    background-color: var(--bg3-alt);
}

.checkbox:focus {
    box-shadow: 0 0 0 4px var(--accent-faded);
}

.checkbox:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.checkbox:checked:active {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.checkbox:checked::after {
    content: "";
    width: 14px;
    height: 14px;
    background-color: #fff;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M40.1389 12.8711C40.6243 13.362 40.6198 14.1535 40.1289 14.6389L17.8789 36.6389C17.3947 37.1176 16.6163 37.1208 16.1283 36.6459L6.87831 27.6459C6.38351 27.1645 6.37267 26.3731 6.85409 25.8783C7.33552 25.3835 8.1269 25.3727 8.62169 25.8541L16.993 33.9991L38.3711 12.8611C38.862 12.3757 39.6535 12.3802 40.1389 12.8711Z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'%3E%3Cpath d='M40.1389 12.8711C40.6243 13.362 40.6198 14.1535 40.1289 14.6389L17.8789 36.6389C17.3947 37.1176 16.6163 37.1208 16.1283 36.6459L6.87831 27.6459C6.38351 27.1645 6.37267 26.3731 6.85409 25.8783C7.33552 25.3835 8.1269 25.3727 8.62169 25.8541L16.993 33.9991L38.3711 12.8611C38.862 12.3757 39.6535 12.3802 40.1389 12.8711Z' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
}

/*
 * BetterDiscordWeb Tab Bar Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
.tab-bar {
    display: flex;
    border-bottom: 3px solid var(--bg3);
    margin-bottom: 20px;
}

.tab-bar .tab {
    display: flex;
    align-items: center;
    height: 48px;
    background: transparent;
    color: var(--text-normal);
    border: none;
    border-bottom: 3px solid transparent;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    bottom: -3px;
    padding: 0 24px;
    cursor: pointer;
    max-width: 50%;
}

.tab-bar .tab:hover {
    border-bottom: 3px solid var(--bg4);
}

.tab-bar .tab.selected {
    border-bottom: 3px solid var(--accent);
    color: var(--text-light);
    cursor: default;
}

.tab-bar .tab span {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * BetterDiscordWeb Quick Select Component
 * https://github.com/BetterDiscord/BetterDiscordWeb
 */
#quickselect-modal .modal {
    position: fixed;
    top: 150px;
    width: 550px;
    max-width: calc(100% - 96px);
}

#quickselect-modal .search-container {
    margin: 0;
    background: var(--bg2-alt);
    border-radius: 4px 4px 0 0;
}

#quickselect-modal .search-container .quickselect-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 7px;
    width: 42px;
    color: var(--text-muted);
    cursor: pointer;
    transition: 100ms ease;
}

#quickselect-modal .search-container .quickselect-mode-toggle:focus-visible {
    box-shadow: inset 0 0 0 3px var(--accent-faded) !important;
}

#quickselect-modal .search-container .quickselect-mode-toggle svg {
    pointer-events: none;
}

#quickselect-modal .search-container .quickselect-mode-toggle:hover {
    color: var(--text-normal);
}

#quickselect-modal .search-container .quickselect-mode-toggle:active {
    color: var(--text-light);
}

#quickselect-modal .text-input {
    padding-left: 42px;
    font-size: 15px;
    border: none;
    font-weight: 400;
    background-color: transparent;
    box-shadow: none !important;
}

#quickselect-modal .search-icon {
    top: 13px;
    margin: 0 13px;
}

#quickselect-modal .modal-content {
    overflow: auto;
    overflow: overlay;
    max-height: 288px;
    padding: 0;
    margin: 0;
}

#quickselect-modal .modal-content::-webkit-scrollbar {
    display: block;
}

#quickselect-modal .modal-content.empty {
    display: none;
}

#quickselect-modal li {
    display: flex;
    list-style-type: none;
    user-select: none;
    height: 36px;
    align-items: center;
    padding: 0 12px;
    box-shadow: none !important;
    color: var(--text-normal);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

#quickselect-modal li svg {
    width: 18px;
    height: 18px;
    margin-right: 12px;
}

#quickselect-modal li:hover {
    background-color: var(--bg3-alt);
}

#quickselect-modal li:active {
    background-color: var(--bg4);
}

#quickselect-modal li.hidden {
    display: none;
}

#quickselect-modal li.selected {
    color: #fff;
    background-color: var(--accent);
}

#quickselect-modal li.selected:active {
    background-color: var(--accent-hover);
}

:root {
    --bg1: #040405;
    --bg3: #14151b;
    --bg4: #20212b;
    --bg2: #0c0d10;
    --bg2-alt:#101116;
    --bg3-alt:#191a21;
    --accent: #3a71c1;
    --accent-hover: #2f5b9d;
    --accent-faded: rgba(58, 113, 193, 0.4);
    --danger: #c13a3a;
    --danger-hover: #992e2e;
    --danger-faded: rgb(193, 58, 58, 0.4);
    --text-light: #f1f1f1;
    --text-normal: #bfc4c9;
    --text-muted: #95989d;
    --text-link: #5a88ce;
}

/*# sourceMappingURL=site.css.map */