@import "../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,.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
}

#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)
}

#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,.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,.15);
    color: var(--accent);
    cursor: default
}

.docs-content {
    padding: 36px;
    background: var(--bg3);
    box-shadow: 0 2px 10px rgba(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
    }
}

.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: 0 0;
    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
    }
}

#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,.075),0 2px 4px rgba(0,0,0,.125),0 4px 8px rgba(0,0,0,.175),0 8px 16px rgba(0,0,0,.225),0 16px 32px rgba(0,0,0,.275),0 32px 64px rgba(0,0,0,.325),0 64px 128px rgba(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("../resources/ui/section_wave.svg") center/cover no-repeat;
    -webkit-mask: url("../resources/ui/section_wave.svg") center/cover no-repeat
}

#home-features-section::before {
    background: url("../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,.1),0 4px 4px rgba(0,0,0,.1),0 8px 8px rgba(0,0,0,.1),0 16px 16px rgba(0,0,0,.1),0 32px 32px rgba(0,0,0,.1),0 64px 64px rgba(0,0,0,.1),0 128px 128px rgba(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,.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,.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,.85)
}

.theme-showcase-inner .sidebar-header {
    background: rgba(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,.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: .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: .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%
    }
}

#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
    }
}

#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: .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,.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,.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,.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
    }
}

#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
}

#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
    }
}

.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,.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
}

.pagination-container {
    margin-top: 16px
}

#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 0 4px #000;
    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: 700;
    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: 0 0;
    border: none;
    color: #ddd;
    cursor: pointer
}

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

#announcement {
    --bg: #FBBF24;
    background-color: var(--bg)!important
}

#announcement * {
    background-color: unset!important
}

.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
}

.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: #fff
}

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

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

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

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

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

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

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

.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,.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
    }
}

*,*::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
    }
}

.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,.15),0 2px 8px rgba(0,0,0,.15),0 4px 16px rgba(0,0,0,.15),0 16px 32px rgba(0,0,0,.15);
    transition: 100ms cubic-bezier(0,0,.2,1);
    flex-direction: column;
    transform-origin: top center;
    z-index: 10;
    opacity: 0;
    transform: scale(.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(.9);
        opacity: 0
    }
}

.dropdown-menu.closing {
    animation: menu-close 100ms cubic-bezier(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,.45);
    border: none
}

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

.dropdown-menu::-webkit-scrollbar-thumb:active {
    background-color: rgba(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: #fff
}

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

.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
}

.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
}

.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)
}

.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,.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,.2)
}

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,.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,.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,.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,.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,.75);
    transition: 100ms cubic-bezier(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,.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,.2)
}

@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
    }
}

.text-input,.select-input,.search {
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,.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,.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;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJz48cGF0aCBkPSdNNi4xMDIwNCA4QzUuMDI4MSA4IDQuNDU0MTIgOS4yNjQ5IDUuMTYxMzIgMTAuMDczMUwxMC42ODMxIDE2LjM4MzhDMTEuMzgwNCAxNy4xODA2IDEyLjYxOTkgMTcuMTgwNiAxMy4zMTcyIDE2LjM4MzhMMTguODM5IDEwLjA3MzFDMTkuNTQ2MiA5LjI2NDkgMTguOTcyMiA4IDE3Ljg5ODMgOEg2LjEwMjA0WicgZmlsbD0nI2JmYzRjOScvPjwvc3ZnPg==);
    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: 0 0;
    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
    }
}

.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,.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: #000;
    pointer-events: none;
    width: max-content;
    box-shadow: 0 0 0 1px #fff
}

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

.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,.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
}

.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,.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(.95);
        opacity: 0
    }
}

.modal-container.closing .modal {
    animation: modal-close 150ms cubic-bezier(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: .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,.065),0 5.6px 6.5px rgba(0,0,0,.093),0 10.5px 12.1px rgba(0,0,0,.115),0 18.8px 21.7px rgba(0,0,0,.137),0 35.1px 40.5px rgba(0,0,0,.165),0 84px 97px rgba(0,0,0,.23);
    padding: 0;
    border: none;
    transition: 150ms cubic-bezier(0,0,.2,1) transform;
    transform: scale(.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: 0 0;
    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 [id^=reason-],.modal-content #ban-reason,.modal-content #unban-reason {
    margin-top: 10px;
    height: 200px
}

.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
}

.termly-consent-banner-preference-modal-1b1f31 .termly-consent-banner-preference-container-bcd362::-webkit-scrollbar {
    display: none
}

.termly-consent-banner-preference-modal-1b1f31 .termly-consent-banner-preference-container-bcd362 {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.file-select-container {
    display: block
}

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

.spinner {
    --spinner-scale: 1;
    width: 40px;
    height: 40px;
    margin: auto;
    position: relative;
    backface-visibility: hidden;
    animation: spinner-3 1s cubic-bezier(.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(.2,0,0,.2) infinite
}

.spinner::after {
    left: 15px;
    animation: spinner-2 1s cubic-bezier(.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: .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)
    }
}

.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: .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: .875em
}

.markdown-body h6 {
    font-size: .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: .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: .2em .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,.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,.05);
    border: none
}

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

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

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

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

.markdown-body details summary {
    border-radius: 5px;
    padding: .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: .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)
}

.warning {
    background-color: rgba(251,191,36,.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
}

.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
}

.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
}

.tab-bar {
    display: flex;
    border-bottom: 3px solid var(--bg3);
    margin-bottom: 20px
}

.tab-bar .tab {
    display: flex;
    align-items: center;
    height: 48px;
    background: 0 0;
    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
}

#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: 0 0;
    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
}