@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css");

.maintenance {
    position: absolute;
    margin: auto;
    text-align: center;
    background-color: #7B2CBF;
    width: fit-content;
    height: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.begin h1 {
    color: white;
}

.begin p {
    color: white;
}

.begin {
    position: absolute;
    margin: auto;
    text-align: center;
    background-color: #7B2CBF;
    width: fit-content;
    height: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-width: 320px;
    color: #191919;
    font-family: "Source Sans Pro", "Source Sans 3", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: normal;
    background-color: #e3e3e3 !important;
}

div {
    line-height: 1.3em;
}

p {
    line-height: 1.5em;
}

.font-bold {
    font-weight: 600;
}

a.dropdown-item {
    color: black !important;
}

.user-search-item:hover {
    background-color: var(--bs-secondary-bg) !important;
}

.game-search-item,
.game-card-link {
    color: black !important;
    text-decoration: none !important;
}

.game-search-item {
    background-color: white !important;
    box-shadow: 0 1px 4px 0 rgba(25, 25, 25, 0.3);
    border-radius: 3px;
    transition: box-shadow 200ms ease;
}

.game-search-item:hover {
    box-shadow: 0 1px 6px 0 rgba(25, 25, 25, .75);
}

.game-card-thumb-container:before {
    border-radius: 8px;
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent !important;
    transition: opacity 0.3s linear;
    opacity: 0;
}

.bg-white {

}

.nav-underline .nav-link {
    color: black !important;
}

.navbar-search-option a {
    color: black !important;
}

.navbar-search-option:hover {
    background-color: var(--bs-tertiary-bg) !important;
}

.navbar {
    background-color: #7B2CBF;
}

.navbar a {
    color: white !important;
}

body {
    padding-top: 40px;
}

.site-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
}

.site-main {
    flex: 1 0 auto;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 40px;
    font-size: 16px;
    background-color: #7B2CBF;
}

.site-header-inner::after {
    content: "";
    display: table;
    clear: both;
}

.header-brand {
    float: left;
    max-width: 76px;
    margin: 0 12px;
}

.nav-toggle {
    float: left;
    position: relative;
    margin: 0 12px 0 0;
    padding: 5px 5px 0 0;
    color: #fff;
    background: none;
    border: 0;
    user-select: none;
}

button.nav-toggle {
    line-height: inherit;
    cursor: pointer;
}

.nav-toggle-count {
    position: absolute;
    top: 6px;
    left: 16px;
    min-width: 18px;
    padding: 1px 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-align: center;
    background-color: #E2231A;
    border-radius: 12px;
}

.header-logo {
    float: left;
    display: block;
    height: 30px;
    padding: 5px 0;
}

.header-logo span {
    display: block;
    width: 30px;
    height: 30px;
    background: url("/img/noneRevSmall.png") no-repeat 0 0 / 30px 30px;
}

.header-links {
    float: left;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.header-links li {
    float: left;
    text-align: center;
}

.header-links a,
.header-account-links a {
    display: inline-block;
    padding: 6px 9px;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    user-select: none;
}

.header-links a:hover,
.header-links a:focus,
.header-account-links a:hover,
.header-account-links a:focus {
    color: #fff;
    background-color: rgba(25, 25, 25, 0.1);
    border-radius: 5px;
}

.header-links-row {
    display: none;
}

.header-search {
    float: left;
    position: relative;
    width: 41.66667%;
    margin-top: 6px;
}

.header-search-group {
    display: flex;
    margin: 0;
}

.header-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    margin: 0;
    padding: 5px 12px;
    color: #191919;
    font-size: 16px;
    font-weight: 300;
    line-height: 100%;
    background-color: #fff;
    border: 1px solid #B8B8B8;
    border-right: 0;
    border-radius: 3px 0 0 3px;
    box-shadow: none;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

.header-search-input::placeholder {
    color: #B8B8B8;
    font-weight: 300;
    opacity: 1;
}

.header-search-button {
    flex: 0 0 auto;
    width: 29px;
    height: 28px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 18px;
    background-color: #fff;
    border: 1px solid #B8B8B8;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.header-search-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10000;
    width: 99%;
    min-width: 105px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 16px;
    text-align: left;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 -5px 20px rgba(25, 25, 25, 0.15);
}

.header-search-option a {
    display: block;
    padding: 12px;
    color: #191919;
    text-decoration: none;
}

.header-search-option:hover {
    background-color: #F2F2F2;
}

.header-search-option.selected {
    background-color: #F2F2F2;
    box-shadow: 4px 0 0 0 #7B2CBF inset;
}

.header-search-term {
    word-break: break-all;
}

.header-right {
    float: right;
    width: 33.33333%;
    margin-right: 12px;
}

.header-account-links {
    float: right;
    width: 100%;
    margin: 4px 0;
    padding: 0;
    list-style: none;
}

.header-account-links li {
    float: right;
    width: 40%;
    text-align: center;
}

.header-icons {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 28px;
}

.header-icons > li {
    flex: 0 0 auto;
    position: relative;
    text-align: center;
}

.header-icon-item {
    display: block;
    position: relative;
    padding: 6px 9px;
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.header-icon-item:hover,
.header-icon-item:focus {
    color: #fff;
}

.header-icon-item [class^="icon-nav-"] {
    vertical-align: middle;
    margin-top: -2px;
}

.header-amount {
    display: none;
}

.header-icon-count {
    position: absolute;
    top: 6px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
    background-color: #E2231A;
    border-radius: 9px;
}

.header-search-toggle {
    display: none;
}

.header-account-links .header-search-toggle {
    width: 20%;
}

.header-search-toggle button {
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
}

.header-account-links .header-search-toggle button {
    padding: 0 4px;
}

.header-popover {
    position: absolute;
    top: 100%;
    right: -8px;
    z-index: 1060;
    max-width: 450px;
    margin-top: 12px;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.header-popover-arrow,
.header-popover-arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.header-popover-arrow {
    top: calc(100% + 1px);
    left: 50%;
    z-index: 1061;
    margin-left: -11px;
    border-width: 0 11px 11px;
    border-bottom-color: #fff;
}

.header-popover-arrow::after {
    content: "";
    top: 1px;
    margin-left: -10px;
    border-width: 0 10px 10px;
    border-bottom-color: #fff;
}

.header-menu {
    position: relative;
    min-width: 105px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    font-size: 16px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 -5px 20px rgba(25, 25, 25, 0.15);
}

.header-menu li {
    padding: 0 6px;
    white-space: nowrap;
}

.header-menu li:hover {
    background-color: #F2F2F2;
    box-shadow: 4px 0 0 0 #7B2CBF inset;
    cursor: pointer;
}

.header-menu a,
.header-menu a:hover,
.header-menu a:focus {
    display: block;
    padding: 10px 12px;
    color: #191919;
    font-weight: 300;
    line-height: 1.25;
    text-decoration: none;
}

.icon-nav-menu,
.icon-nav-robux,
.icon-nav-tix,
.icon-nav-settings,
.icon-nav-search,
.icon-nav-home,
.icon-nav-profile,
.icon-nav-message,
.icon-nav-friends,
.icon-nav-charactercustomizer,
.icon-nav-inventory,
.icon-nav-trade,
.icon-nav-group,
.icon-nav-forum,
.icon-nav-blog,
.icon-nav-search-white,
.icon-nav-shop {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    background-image: url("/img/nav-icons.svg");
    background-repeat: no-repeat;
    background-size: 56px 476px;
}

.icon-nav-menu {
    background-position: 0 0;
}

.icon-nav-robux {
    background-image: url("/img/nonebux-green.png");
    background-position: center;
    background-size: 26px 26px;
}

.icon-nav-tix {
    background-image: url("/img/tix-gold.png");
    background-position: center;
    background-size: 26px 26px;
}

.site-header .icon-nav-robux {
    background-image: url("/img/nonebux-nav.png");
}

.site-header .icon-nav-tix {
    background-image: url("/img/tix-nav.png");
}

.icon-nav-settings {
    background-position: 0 -84px;
}

.icon-nav-search {
    background-position: 0 -112px;
}

.icon-nav-home {
    background-position: 0 -140px;
}

.icon-nav-profile {
    background-position: 0 -168px;
}

.icon-nav-message {
    background-position: 0 -196px;
}

.icon-nav-friends {
    background-position: 0 -224px;
}

.icon-nav-charactercustomizer {
    background-position: 0 -252px;
}

.icon-nav-inventory {
    background-position: 0 -280px;
}

.icon-nav-trade {
    background-position: 0 -308px;
}

.icon-nav-group {
    background-position: 0 -336px;
}

.icon-nav-forum {
    background-position: 0 -364px;
}

.icon-nav-blog {
    background-position: 0 -392px;
}

.icon-nav-search-white {
    background-position: 0 -420px;
}

.icon-nav-shop {
    background-position: 0 -448px;
}

a:hover .icon-nav-menu,
button:hover .icon-nav-menu {
    background-position: -28px 0;
}

a:hover .icon-nav-robux,
button:hover .icon-nav-robux {
    background-position: center;
}

a:hover .icon-nav-tix,
button:hover .icon-nav-tix {
    background-position: center;
}

a:hover .icon-nav-settings,
button:hover .icon-nav-settings {
    background-position: -28px -84px;
}

a:hover .icon-nav-search,
button:hover .icon-nav-search {
    background-position: -28px -112px;
}

a:hover .icon-nav-home {
    background-position: -28px -140px;
}

a:hover .icon-nav-profile {
    background-position: -28px -168px;
}

a:hover .icon-nav-message {
    background-position: -28px -196px;
}

a:hover .icon-nav-friends {
    background-position: -28px -224px;
}

a:hover .icon-nav-charactercustomizer {
    background-position: -28px -252px;
}

a:hover .icon-nav-inventory {
    background-position: -28px -280px;
}

a:hover .icon-nav-trade {
    background-position: -28px -308px;
}

a:hover .icon-nav-group {
    background-position: -28px -336px;
}

a:hover .icon-nav-forum {
    background-position: -28px -364px;
}

a:hover .icon-nav-blog {
    background-position: -28px -392px;
}

a:hover .icon-nav-search-white,
button:hover .icon-nav-search-white {
    background-position: -28px -420px;
}

a:hover .icon-nav-shop {
    background-position: -28px -448px;
}

.site-header .icon-nav-message {
    filter: brightness(0) invert(1);
}

.left-nav {
    position: fixed;
    top: 40px;
    left: 0;
    z-index: 999;
    width: 0;
    height: calc(100% - 40px);
    overflow: hidden;
    font-size: 16px;
    background-color: #fff;
    box-shadow: 0 0 3px 0 rgba(25, 25, 25, 0.3);
    transform: translate3d(0, 0, 0);
}

.left-nav.open {
    width: 175px;
}

.left-nav ul {
    margin: 0;
    padding: 5px 10px 0;
    list-style: none;
}

.left-nav li {
    position: relative;
    margin: 5px 0;
    line-height: 1.25;
}

.left-nav li a {
    display: block;
    color: #191919;
    text-decoration: none;
}

.left-nav-user {
    font-size: 18px;
    font-weight: 400;
}

.left-nav-user a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left-nav-divider {
    height: 1px;
    overflow: hidden;
    background-color: #B8B8B8;
}

.left-nav-scroll {
    width: 0;
    height: calc(100% - 50px);
    overflow: auto;
}

.left-nav-scroll::-webkit-scrollbar {
    width: 6px;
}

.left-nav-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(25, 25, 25, 0.3);
    border-radius: 3px;
}

.left-nav-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(25, 25, 25, 0.5);
}

.left-nav.open .left-nav-scroll {
    width: 175px;
}

.left-nav.open .left-nav-scroll ul,
.left-nav.open .left-nav-scroll li {
    width: 150px;
}

.left-nav-scroll a {
    font-weight: 400;
}

.left-nav-scroll [class^="icon-nav-"] {
    vertical-align: middle;
    margin: 0;
}

.left-nav-label {
    display: inline-block;
    margin: 3px;
}

.left-nav-count {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    min-width: 24px;
    margin: 3px;
    padding: 5px 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    background-color: #7B2CBF;
    border-radius: 12px;
}

.left-nav .left-nav-upgrade {
    margin: 12px 0;
}

.left-nav .left-nav-upgrade a {
    padding: 9px;
    color: #fff;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    white-space: nowrap;
    background-color: #7B2CBF;
    border: 1px solid #7B2CBF;
    border-radius: 3px;
    user-select: none;
    transition: box-shadow 0.2s ease-in-out;
}

.left-nav .left-nav-upgrade a:hover,
.left-nav .left-nav-upgrade a:focus {
    color: #fff;
    background-color: #9D4EDD;
    border-color: #9D4EDD;
    box-shadow: 0 1px 3px rgba(150, 150, 150, 0.74);
}

.left-nav .left-nav-events {
    color: #191919;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.left-nav-sponsor img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.btn-primary-md {
    display: inline-block;
    padding: 9px 9px;
    font-size: 18px;
    line-height: 100%;
    font-weight: 400;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #02b757;
    border: 1px solid #02b757;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
}

.btn-primary-md:hover,
.btn-primary-md:focus {
    background-color: #3FC679;
    border-color: #3FC679;
    box-shadow: 0 1px 3px rgba(150, 150, 150, 0.74);
}

.site-alert {
    position: relative;
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1em;
    text-align: center;
    border: 0;
}

.site-alert-info {
    padding: 12px 0;
    background-color: #F68802;
}

.site-alert-warning,
.site-alert-success {
    min-height: 48px;
    padding: 15px;
}

.site-alert-warning {
    background-color: #E27676;
}

.site-alert-success {
    background-color: #02b757;
}

.site-alert a,
.site-alert a:hover,
.site-alert a:focus,
.site-alert a:visited {
    color: #fff;
    text-decoration: none;
}

.site-alert-info a,
.site-alert-info a:hover,
.site-alert-info a:focus,
.site-alert-info a:visited {
    font-weight: 600;
}

.site-alert-dismissible {
    padding-left: 44px;
    padding-right: 44px;
}

.site-alert-close {
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 0 6px;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    background: none;
    border: 0;
    opacity: 0.75;
    cursor: pointer;
    transform: translateY(-50%);
}

.site-alert-close:hover {
    opacity: 1;
}

@media (min-width: 768px) {
    .left-nav-link {
        height: 28.85px;
    }

    .header-search {
        width: 50%;
    }

    .header-right {
        width: 25%;
    }
}

@media (min-width: 992px) {
    .header-search {
        width: 25%;
    }

    .header-account-links li {
        width: 30%;
    }

    .header-amount {
        display: inline-block;
    }

    .header-menu a,
    .header-menu a:hover,
    .header-menu a:focus {
        padding: 10px 6px;
    }
}

@media (min-width: 1200px) {
    .header-links li {
        min-width: 84px;
    }
}

@media (min-width: 1688px) {
    .nav-toggle {
        display: none;
    }

    .header-brand {
        max-width: 120px;
    }

    .header-logo span {
        width: 118px;
        background-image: url("/img/nonelogo.png");
        background-position: 0 50%;
        background-size: contain;
    }

    .left-nav {
        width: 175px;
    }

    .left-nav-scroll {
        width: 175px;
    }

    .site-shell.logged-in .site-main {
        margin-left: 175px;
    }
}

@media (max-width: 991px) {
    body {
        padding-top: 80px;
    }

    .site-shell {
        display: block;
        min-height: 0;
    }

    .site-header {
        height: 80px;
    }

    .header-links {
        display: none;
    }

    .header-links-row {
        display: block;
        width: 100%;
    }

    .header-links-row li {
        width: 20%;
    }

    .left-nav {
        top: 80px;
        height: calc(100% - 80px);
    }
}

@media (max-width: 767px) {
    body,
    div {
        font-size: 14px;
        font-weight: 400;
    }

    .nav-toggle-count {
        padding: 2px 4px;
        font-size: 10px;
        border-radius: 50%;
    }

    .left-nav {
        box-shadow: 0 0 160px 0 rgba(25, 25, 25, 0.5);
    }

    .left-nav .left-nav-upgrade a {
        padding: 7px;
        font-size: 16px;
    }
}

@media (max-width: 543px) {
    .header-search {
        display: none;
        position: absolute;
        top: 42px;
        left: 5px;
        z-index: 10000;
        float: none;
        width: 100%;
        padding: 0 12px;
    }

    .header-search.shown {
        display: block;
    }

    .header-right {
        width: 58.33333%;
    }

    .header-icons > li {
        width: 20%;
    }

    .header-icon-item {
        display: inline-block;
        vertical-align: top;
    }

    .header-search-toggle {
        display: block;
    }
}

.rbx-content {
    padding: 12px 0 40px;
}

.section {
    position: relative;
}

.section::after,
.container-header::after,
.hlist::after {
    content: " ";
    display: table;
    clear: both;
}

.section-content {
    position: relative;
    margin: 0 0 18px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 1px 4px 0 rgba(25, 25, 25, 0.3);
}

.section-content::after {
    content: " ";
    display: table;
    clear: both;
}

.section-content-off {
    margin: 0 0 18px;
    padding: 15px;
    text-align: center;
    color: #757575;
    background-color: #B8B8B8;
}

.container-header {
    margin: 3px 0 6px;
}

.container-header h3 {
    float: left;
    margin: 0;
}

.hlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hlist .list-item {
    float: left;
}

.text-label {
    color: #B8B8B8;
    font-weight: 400;
}

.text-lead {
    font-size: 18px;
    font-weight: 400;
}

.text-name,
.text-name:link,
.text-name:visited {
    color: #7B2CBF;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

.text-name:hover,
.text-name:focus {
    color: #7B2CBF;
    text-decoration: underline;
}

.text-error {
    font-size: 12px;
    font-weight: 400;
    color: #D86868;
}

.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rbx-btn-primary-sm,
.rbx-btn-control-sm,
.rbx-btn-control-xs,
.rbx-btn-secondary-xs {
    display: inline-block;
    height: auto;
    border: 1px solid transparent;
    border-radius: 3px;
    line-height: 100%;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
}

.rbx-btn-primary-sm {
    padding: 9px 24px;
    font-size: 18px;
    color: #fff;
    background-color: #02b757;
    border-color: #02b757;
}

.rbx-btn-primary-sm:hover,
.rbx-btn-primary-sm:focus {
    color: #fff;
    background-color: #3FC679;
    border-color: #3FC679;
    box-shadow: 0 1px 3px rgba(150, 150, 150, 0.74);
}

.rbx-btn-control-sm,
.rbx-btn-control-xs {
    color: #757575;
    background-color: #fff;
    border-color: #B8B8B8;
}

.rbx-btn-control-sm {
    padding: 9px 24px;
    font-size: 18px;
}

.rbx-btn-control-xs {
    padding: 7px 16px;
    font-size: 16px;
}

.rbx-btn-control-sm:hover,
.rbx-btn-control-sm:focus,
.rbx-btn-control-xs:hover,
.rbx-btn-control-xs:focus {
    color: #757575;
    background-color: #fff;
    border-color: #B8B8B8;
    box-shadow: 0 1px 3px rgba(150, 150, 150, 0.74);
}

.rbx-btn-control-sm:disabled,
.rbx-btn-control-sm.disabled,
.rbx-btn-control-xs:disabled,
.rbx-btn-control-xs.disabled {
    color: #B8B8B8;
    box-shadow: none;
    cursor: default;
}

.rbx-btn-secondary-xs {
    padding: 7px 16px;
    font-size: 16px;
    color: #fff;
    background-color: #7B2CBF;
    border-color: #7B2CBF;
}

.rbx-btn-secondary-xs:hover,
.rbx-btn-secondary-xs:focus {
    color: #fff;
    background-color: #9D4EDD;
    border-color: #9D4EDD;
    box-shadow: 0 1px 3px rgba(150, 150, 150, 0.74);
}

.rbx-tabs-horizontal .rbx-nav-tabs {
    display: flex;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rbx-tabs-horizontal .rbx-tab {
    flex: 1 1 0;
    padding: 0;
    color: #191919;
}

.rbx-tabs-horizontal .rbx-tab-heading {
    display: block;
    padding: 12px 2%;
    line-height: 100%;
    color: #191919;
    text-decoration: none;
}

.rbx-tabs-horizontal .rbx-tab-heading span {
    display: inline-block;
    margin: 0;
}

.rbx-tabs-horizontal .rbx-tab-heading:hover,
.rbx-tabs-horizontal .rbx-tab-heading:focus,
.rbx-tabs-horizontal .rbx-tab-heading.active {
    color: #191919;
    box-shadow: 0 -4px 0 0 #7B2CBF inset;
}

.rbx-tabs-horizontal .rbx-tab-subtitle {
    padding: 5px 5px 0;
    font-size: 14px;
    color: #757575;
}

.rbx-tab-content {
    margin: 6px 0;
}

.rbx-tab-content>.tab-pane {
    display: none;
}

.rbx-tab-content>.tab-pane.active {
    display: block;
}

.rbx-icon-more,
.rbx-icon-moreinfo,
.rbx-icon-grid,
.rbx-icon-slideshow,
.rbx-icon-carousel-left,
.rbx-icon-carousel-right {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("/img/generic-icons-2016.svg");
    background-repeat: no-repeat;
    background-size: 56px 1120px;
}

.rbx-icon-moreinfo {
    background-position: 0 -280px;
}

.rbx-icon-more {
    background-position: 0 -616px;
}

.rbx-icon-moreinfo:hover,
a:hover .rbx-icon-moreinfo {
    background-position: -28px -280px;
}

.rbx-icon-more:hover,
a:hover .rbx-icon-more {
    background-position: -28px -616px;
}

.rbx-icon-carousel-right {
    background-position: 0 -896px;
}

.rbx-icon-carousel-left {
    background-position: 0 -924px;
}

a:hover .rbx-icon-carousel-right {
    background-position: -28px -896px;
}

a:hover .rbx-icon-carousel-left {
    background-position: -28px -924px;
}

.rbx-icon-grid {
    background-position: 0 -1036px;
}

.rbx-icon-slideshow {
    background-position: 0 -1064px;
}

.rbx-icon-grid.selected {
    background-position: -28px -1036px;
}

.rbx-icon-slideshow.selected {
    background-position: -28px -1064px;
}

.game-sort-row {
    position: relative;
    display: flow-root;
    width: 100%;
}

.game-sort-scroller {
    margin-bottom: -50px;
    padding-bottom: 50px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    pointer-events: none;
}

.game-sort-scroller::-webkit-scrollbar {
    display: none;
}

.game-sort-list {
    width: max-content;
    white-space: nowrap;
}

.game-sort-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.game-sort-arrow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 220px;
    padding: 0;
    border: 0;
    border-radius: 0 3px 3px 0;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 3px 0 #ccc;
    cursor: pointer;
    user-select: none;
}

.game-sort-arrow.right {
    left: auto;
    right: 0;
    border-radius: 3px 0 0 3px;
}

.game-sort-arrow span {
    width: 28px;
    height: 28px;
    background-image: url("/img/games/generic.svg");
    background-repeat: no-repeat;
    background-position: 0 -980px;
    opacity: 0.5;
}

.game-sort-arrow.right span {
    background-position: 0 -952px;
}

.avatar-3d {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.avatar-3d canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.avatar-3d canvas:active {
    cursor: grabbing;
}

.avatar-3d-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.3;
    color: #757575;
    background: #fff;
    border: 1px solid #b8b8b8;
    border-radius: 2px;
    cursor: pointer;
}

.avatar-3d-toggle:hover {
    color: #191919;
    border-color: #757575;
}

.avatar-3d-note {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    padding: 0 20px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #757575;
    text-align: center;
}

.game-card {
    position: relative;
    display: inline-block;
    width: 158px;
    height: 221px;
    margin: 0 4px 12px;
    padding: 0;
    vertical-align: top;
    white-space: nowrap;
    font-family: "Source Sans Pro", "Source Sans 3", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3em;
    color: #191919;
    pointer-events: auto;
}

.game-card:hover {
    z-index: 498;
}

.game-card .game-card-inner {
    text-align: left;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(150, 150, 150, 0.74);
}

.game-card .game-card-link {
    display: flex;
    flex-direction: column;
    min-height: 221px;
    padding: 9px 9px 6px;
    color: inherit;
    text-decoration: none;
}

.game-card:hover .game-card-link {
    padding-bottom: 0;
}

.game-card .game-card-thumb {
    aspect-ratio: 1 / 1;
}

.game-card .game-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.game-card .game-card-name {
    margin: 6px 3px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
    color: #000;
}

.game-card .game-card-playing {
    margin-right: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #757575;
}

.game-card .game-card-votes {
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.game-card .vote-thumb {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-image: url("/img/games/thumbs.svg");
    background-repeat: no-repeat;
    background-size: 32px auto;
}

.game-card .vote-thumb.down {
    background-position: 0 -16px;
    opacity: 0.6;
    visibility: hidden;
}

.game-card:hover .vote-thumb.down {
    visibility: visible;
}

.game-card .vote-track {
    position: relative;
    width: 100px;
    height: 6px;
    margin: 0 auto;
}

.game-card .vote-background,
.game-card .vote-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-image: repeating-linear-gradient(to right, currentColor, currentColor 19px, transparent 19px, transparent 21px);
}

.game-card .vote-background {
    width: 100%;
    color: #b8b8b8;
}

.game-card .vote-fill {
    color: #757575;
}

.game-card:hover .voted .vote-background {
    color: #e27676;
}

.game-card:hover .vote-fill {
    color: #02b757;
}

.game-card .game-card-counts {
    display: none;
    justify-content: space-between;
    margin: -3px 0 2px;
    font-size: 12px;
    font-weight: 400;
}

.game-card:hover .game-card-counts {
    display: flex;
}

.game-card .vote-count-up {
    color: #02b757;
}

.game-card .vote-count-down {
    color: #e27676;
}

.game-card .game-card-footer {
    display: none;
    padding-bottom: 5px;
    border-radius: 3px;
    background-color: #fff;
    font-size: 12px;
    font-weight: 400;
    color: #b8b8b8;
}

.game-card:hover .game-card-footer {
    display: block;
}

.game-card .game-card-creator {
    display: block;
    width: 90%;
    margin-left: 8px;
    padding-top: 6px;
    border-top: 1px solid #e3e3e3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-card .game-card-creator a {
    color: #7b2cbf;
    text-decoration: none;
}

.game-card .game-card-creator a:hover {
    text-decoration: underline;
}

:root,
[data-bs-theme="light"],
body {
    --bs-primary: #7B2CBF;
    --bs-primary-rgb: 123, 44, 191;
    --bs-info: #7B2CBF;
    --bs-info-rgb: 123, 44, 191;
    --bs-link-color: #7B2CBF;
    --bs-link-color-rgb: 123, 44, 191;
    --bs-link-hover-color: #5A189A;
    --bs-link-hover-color-rgb: 90, 24, 154;
    --bs-primary-text-emphasis: #4C117D;
    --bs-primary-bg-subtle: #EEE3F7;
    --bs-primary-border-subtle: #D6B9ED;
    --bs-info-text-emphasis: #4C117D;
    --bs-info-bg-subtle: #EEE3F7;
    --bs-info-border-subtle: #D6B9ED;
    --bs-focus-ring-color: rgba(123, 44, 191, .25);
}

.btn-primary,
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: #7B2CBF;
    --bs-btn-border-color: #7B2CBF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6A1B9A;
    --bs-btn-hover-border-color: #5A189A;
    --bs-btn-focus-shadow-rgb: 123, 44, 191;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5A189A;
    --bs-btn-active-border-color: #4C117D;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #9D4EDD;
    --bs-btn-disabled-border-color: #9D4EDD;
}

.btn-outline-primary,
.btn-outline-info {
    --bs-btn-color: #7B2CBF;
    --bs-btn-border-color: #7B2CBF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7B2CBF;
    --bs-btn-hover-border-color: #7B2CBF;
    --bs-btn-focus-shadow-rgb: 123, 44, 191;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6A1B9A;
    --bs-btn-active-border-color: #6A1B9A;
}

.text-primary,
.text-info {
    color: #7B2CBF !important;
}

.bg-primary,
.bg-info,
.text-bg-primary,
.text-bg-info {
    background-color: #7B2CBF !important;
    color: #fff !important;
}

.border-primary,
.border-info {
    border-color: #7B2CBF !important;
}

.link-primary,
.link-info {
    color: #7B2CBF !important;
}

.link-primary:hover,
.link-info:hover {
    color: #5A189A !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #9D4EDD !important;
    box-shadow: 0 0 0 .25rem rgba(123, 44, 191, .18) !important;
}

.form-check-input:checked {
    background-color: #7B2CBF !important;
    border-color: #7B2CBF !important;
}

.form-check-input:focus {
    border-color: #9D4EDD !important;
    box-shadow: 0 0 0 .25rem rgba(123, 44, 191, .18) !important;
}

.page-link {
    color: #7B2CBF !important;
}

.page-link:hover,
.page-link:focus {
    color: #5A189A !important;
}

.active > .page-link,
.page-link.active,
.list-group-item.active,
.dropdown-item.active,
.dropdown-item:active {
    background-color: #7B2CBF !important;
    border-color: #7B2CBF !important;
    color: #fff !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #7B2CBF !important;
}

.progress-bar {
    background-color: #7B2CBF;
}

a {
    --bs-link-color-rgb: 123, 44, 191;
}

a:hover {
    --bs-link-color-rgb: 90, 24, 154;
}

.btn-link {
    --bs-btn-color: #7B2CBF;
    --bs-btn-hover-color: #5A189A;
    --bs-btn-active-color: #4C117D;
}

.nav-link {
    --bs-nav-link-color: #7B2CBF;
    --bs-nav-link-hover-color: #5A189A;
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: #5A189A;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-info,
.btn-check:active + .btn-outline-info {
    color: #fff;
    background-color: #7B2CBF;
    border-color: #7B2CBF;
}

.alert-primary,
.alert-info {
    --bs-alert-color: #4C117D;
    --bs-alert-bg: #EEE3F7;
    --bs-alert-border-color: #D6B9ED;
    --bs-alert-link-color: #4C117D;
}

.list-group-item-primary,
.list-group-item-info {
    color: #4C117D;
    background-color: #EEE3F7;
    border-color: #D6B9ED;
}

.table-primary,
.table-info {
    --bs-table-color: #24122F;
    --bs-table-bg: #EEE3F7;
    --bs-table-border-color: #D6B9ED;
    --bs-table-striped-bg: #E7D7F3;
    --bs-table-active-bg: #DECAEE;
    --bs-table-hover-bg: #E3D1F1;
}

.accordion-button:not(.collapsed) {
    color: #5A189A;
    background-color: #EEE3F7;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 #D6B9ED;
}

.form-range::-webkit-slider-thumb {
    background-color: #7B2CBF;
}

.form-range::-moz-range-thumb {
    background-color: #7B2CBF;
}

.form-range::-webkit-slider-thumb:active,
.form-range::-moz-range-thumb:active {
    background-color: #9D4EDD;
}

.spinner-border.text-primary,
.spinner-grow.text-primary,
.spinner-border.text-info,
.spinner-grow.text-info {
    color: #7B2CBF !important;
}

.chat-bar {
    position: fixed;
    right: 6px;
    bottom: 0;
    z-index: 1020;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    color: #191919;
    font-size: 14px;
    font-weight: 400;
}

.chat-window {
    width: 250px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 1px 8px 0 rgba(25, 25, 25, 0.3);
}

.chat-window.closed {
    box-shadow: none;
}

.chat-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    background-color: #7B2CBF;
    cursor: pointer;
    user-select: none;
}

.chat-tab-name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-tab-close {
    margin-right: -6px;
    padding: 0 4px;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
}

.chat-count {
    min-width: 18px;
    padding: 1px 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-align: center;
    background-color: #E2231A;
    border-radius: 12px;
}

.chat-log {
    height: 240px;
    padding: 8px 12px;
    overflow-y: auto;
}

.chat-line {
    margin-bottom: 6px;
    word-wrap: break-word;
}

.chat-who {
    margin-right: 4px;
    color: #00a2ff;
    font-weight: 600;
}

.chat-line.mine .chat-who {
    color: #7b2cbf;
}

.chat-when {
    display: block;
    color: #b8b8b8;
    font-size: 11px;
}

.chat-empty {
    padding: 10px 12px;
    color: #757575;
    font-size: 13px;
}

.chat-error {
    padding: 4px 12px;
    color: #c0392b;
    font-size: 12px;
}

.chat-compose input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font: inherit;
    border: 0;
    border-top: 1px solid #e3e3e3;
    outline: none;
}

.chat-people {
    max-height: 320px;
    overflow-y: auto;
}

.chat-people-title {
    padding: 6px 12px 2px;
    color: #757575;
    font-size: 12px;
    text-transform: uppercase;
}

.chat-person {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 7px 12px;
    color: #191919;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.chat-person:hover {
    background-color: #f2f2f2;
}

.chat-person img {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background-color: #e3e3e3;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
}

.chat-person-name {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-person-dot {
    width: 8px;
    height: 8px;
    background-color: #b8b8b8;
    border-radius: 50%;
}

.chat-person-dot.online {
    background-color: #02b757;
}

@media (max-width: 767px) {
    .chat-bar {
        display: none;
    }
}