@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto&family=Source+Code+Pro&family=Source+Sans+3:wght@300;400&display=swap");
@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%);
}

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

body {
    background-color: #e3e3e3 !important;
}

/*body {
    background: url("/img/image.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
*/

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 {
    /*background-color: #3c005a;*/
}

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

/* admin pages still use the bootstrap navbar */
.navbar {
    background-color: #7B2CBF;
}

.navbar a {
    color: white !important;
}

/* 2016 header starts here! */
/* fixed header offset */
body {
    padding-top: 40px;
}

/* inside the android app, it draws its own bar */
body.rbx-in-app {
    padding-top: 0;
}

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

.rbx-header .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0 15px;
}

.rbx-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rbx-header a,
.rbx-header a:link,
.rbx-header a:visited,
.rbx-header a:hover,
.rbx-header a:focus,
.rbx-header a:active {
    color: #fff;
    font-weight: 400;
    text-decoration: none;
}

/* logo + hamburger */
.rbx-header .rbx-navbar-header {
    flex: 0 0 auto;
    margin: 0 12px;
    white-space: nowrap;
}

.rbx-header .rbx-nav-collapse {
    float: left;
    position: relative;
    margin-right: 12px;
    padding: 5px 5px 0 0;
    cursor: pointer;
    user-select: none;
}

.rbx-header .rbx-brand {
    float: left;
    display: block;
    padding: 5px 0;
    height: 40px;
    line-height: 20px;
}

.rbx-header .logo {
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    height: 30px;
    background: url("/img/nonelogo.png") no-repeat center / contain;
}

.rbx-header .rbx-navbar {
    margin: 5px 0;
}

.rbx-header .rbx-navbar-desktop {
    display: flex;
    flex: 0 0 auto;
    width: 33.3333%;
    min-width: max-content;
}

.rbx-header ul.rbx-navbar-desktop>li {
    flex: 1 1 0;
    width: auto;
    float: none;
    white-space: nowrap;
}

.rbx-header .rbx-navbar-mobile {
    display: none;
}

.rbx-header .rbx-navbar li {
    float: left;
    width: 25%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rbx-header .rbx-navbar li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 9px;
    user-select: none;
}

.rbx-header .rbx-navbar li a:hover,
.rbx-header .rbx-navbar li a:focus {
    background-color: rgba(25, 25, 25, 0.1);
    border-radius: 5px;
}

.rbx-header .rbx-navbar-search {
    flex: 0 1 25%;
    min-width: 140px;
    margin-top: 6px;
    position: relative;
    box-sizing: border-box;
}

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

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

.rbx-header .rbx-navbar-search .input-field:focus {
    border-color: #7B2CBF;
}

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

.rbx-header .rbx-navbar-search .rbx-input-addon-btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 28px;
    width: 32px;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #B8B8B8;
    border-left-color: transparent;
    border-radius: 0 3px 3px 0;
    color: #757575;
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
    -webkit-appearance: none;
}

.rbx-header .rbx-navbar-search .rbx-input-addon-btn:hover,
.rbx-header .rbx-navbar-search .rbx-input-addon-btn:focus {
    border-left: 0;
    outline: 0 none;
}

.rbx-header .rbx-navbar-search .rbx-input-addon-btn .icon-nav-search {
    margin: -1px 0 0 1px;
}

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

.rbx-header .rbx-navbar-search .dropdown-menu a {
    color: #191919;
}

.rbx-header .rbx-navbar-right {
    flex: 0 0 25%;
    margin-left: auto;
    margin-right: 12px;
}

.rbx-header .rbx-navbar-right-nav {
    margin: 5px auto;
    width: 100%;
}

.rbx-header .rbx-navbar-right-nav li {
    float: right;
    width: 30%;
    text-align: center;
}

.rbx-header .rbx-navbar-right-nav li a {
    display: inline-block;
    padding: 6px 9px;
    user-select: none;
}

.rbx-header .rbx-navbar-right-nav li a:hover,
.rbx-header .rbx-navbar-right-nav li a:focus {
    background-color: rgba(25, 25, 25, 0.1);
    border-radius: 5px;
}

.rbx-header .rbx-navbar-icon-group {
    margin: 0;
    width: 100%;
    line-height: 28px;
}

.rbx-header .rbx-navbar-icon-group li {
    float: right;
    width: auto;
    text-align: center;
    position: relative;
}

.rbx-header .rbx-navbar-icon-group li>a {
    display: inline-block;
    padding: 6px 9px;
    white-space: nowrap;
    user-select: none;
}

.rbx-header .rbx-navbar-icon-group li span[class^="icon"] {
    vertical-align: middle;
    margin-top: -2px;
}

.rbx-header .rbx-text-navbar-right {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}

.rbx-header .rbx-maintenance-bypass {
    float: right;
    margin: 5px 6px 0 0;
}

.rbx-header .rbx-maintenance-bypass button {
    background: transparent;
    border: 0;
    color: #fff;
    padding: 6px 9px;
    font-size: 14px;
}

.rbx-header .rbx-navbar-icon-group .dropdown-menu {
    margin: 0;
    padding: 0;
    min-width: 105px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: 0 -5px 20px rgba(25, 25, 25, 0.15);
    line-height: 1.428;
}

.rbx-header .rbx-navbar-icon-group .dropdown-menu li {
    float: none;
    width: auto;
    text-align: left;
}

.rbx-header .rbx-navbar-icon-group .dropdown-menu a {
    display: block;
    padding: 10px 12px;
    color: #191919 !important;
    font-weight: 400;
}

.rbx-header .rbx-navbar-icon-group .dropdown-menu a:hover,
.rbx-header .rbx-navbar-icon-group .dropdown-menu a:focus {
    background-color: #fff;
    box-shadow: 4px 0 0 0 #7B2CBF inset;
}

.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-2016.svg");
    background-repeat: no-repeat;
    background-size: 56px 476px;
}

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

.icon-nav-robux {
    background-position: 0 -28px;
}

.icon-nav-tix {
    background-position: 0 -56px;
}

.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,
.rbx-nav-collapse:hover .icon-nav-menu {
    background-position: -28px 0;
}

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

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

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

.rbx-left-col {
    display: none;
    position: fixed;
    top: 40px;
    left: 0;
    bottom: 0;
    width: 175px;
    z-index: 999;
    overflow: hidden;
    background-color: #F2F2F2;
    box-shadow: 0 0 60px rgba(25, 25, 25, 0.5);
    font-size: 16px;
}

.rbx-left-col.nav-show {
    display: block;
}

.rbx-left-col ul {
    list-style: none;
    margin: 0;
    padding: 5px 10px 0;
    width: 150px;
}

.rbx-left-col li {
    position: relative;
    margin: 1px 0;
    line-height: 1.25;
}

.rbx-left-col li a {
    display: block;
    color: #191919;
    font-weight: 400;
    text-decoration: none;
}

.rbx-left-col li a:hover {
    text-decoration: underline;
}

.rbx-left-col li span {
    margin: 4px 3px;
}

.rbx-left-col li .rbx-text-nav {
    display: inline-block;
    vertical-align: middle;
}

/* username above the list, with the 2016 divider under it */
.rbx-left-col .rbx-nav-username a {
    padding: 6px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rbx-left-col .rbx-divider {
    height: 1px;
    margin: 5px 0;
    background-color: #B8B8B8;
    overflow: hidden;
}

.rbx-left-col .rbx-upgrade-now {
    margin: 12px 0;
}

.rbx-left-col .rbx-upgrade-now a {
    display: block;
    text-align: center;
}

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

.rbx-alert-info {
    margin: 0;
    padding: 12px 0;
    text-align: center;
    color: #fff;
    font-size: 18px;
    background-color: #F68802;
}

.rbx-alert-info a {
    color: #fff;
    text-decoration: none;
}

.rbx-alert-info a:hover {
    color: #fff;
    text-decoration: underline;
}

.rbx-alert-info .font-bold {
    font-weight: 600;
}

.rbx-alert-warning,
.rbx-alert-success {
    margin: 0;
    padding: 12px;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

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

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

.rbx-alert-warning a,
.rbx-alert-success a {
    color: #fff;
}

@media (min-width: 1200px) {
    .rbx-header .rbx-navbar-desktop {
        width: 30%;
    }
}

@media (min-width: 1320px) {
    .rbx-header .rbx-nav-collapse {
        display: none;
    }

    .rbx-left-col {
        display: block;
        box-shadow: 0 0 3px rgba(25, 25, 25, 0.3);
    }

    body.rbx-has-left-nav {
        padding-left: 175px;
    }
}

@media (max-width: 1319.98px) {
    .rbx-header .logo {
        width: 30px;
        background-image: url("/img/noneRevSmall.png");
    }
}

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

    .rbx-header {
        height: 80px;
    }

    .rbx-header .rbx-navbar-desktop {
        display: none;
    }

    .rbx-header .rbx-navbar-mobile {
        display: flex;
        flex: 0 0 100%;
        order: 10;
    }

    .rbx-header ul.rbx-navbar-mobile>li {
        flex: 1 1 0;
        width: auto;
        float: none;
        white-space: nowrap;
    }

    .rbx-header .rbx-navbar-search {
        flex-basis: 50%;
    }

    .rbx-header .rbx-navbar-right-nav li {
        width: 40%;
    }

    .rbx-header .rbx-navbar-right-nav li a {
        padding: 6px 4px;
    }

    .rbx-header .rbx-text-navbar-right {
        display: none;
    }

    .rbx-left-col {
        top: 80px;
    }
}

@media (max-width: 767.98px) {
    .rbx-header .rbx-navbar-search {
        flex-basis: 41.6667%;
    }

    .rbx-header .rbx-navbar-right {
        flex-basis: 33.3333%;
    }
}

@media (max-width: 479.98px) {
    .rbx-header .rbx-navbar-search {
        display: none;
    }

    .rbx-header .rbx-navbar-icon-group li {
        width: 25%;
    }

    .rbx-header .rbx-navbar-right {
        flex-basis: 58.3333%;
    }

    .rbx-header .rbx-navbar li a {
        padding: 6px 4px;
    }
}

/* =====================================================================
   2016 page components (sections, text styles, buttons, tabs, icons)
   Values taken from the archived roblox.com stylesheet (4 Mar 2016).
   ===================================================================== */
.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;
}

/* buttons */
.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);
}

/* horizontal tabs */
.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;
}

/* generic icon sprite (28x28 cells, hover column at -28px) */
.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;
}
/* =====================================================================
   2016 game cards and horizontal game rows (games page, home)
   Values taken from the archived roblox.com games page (archive.today).
   ===================================================================== */
.game-sort-row {
    position: relative;
    width: 100%;
    margin: 5px 0 0;
    padding-bottom: 5px;
}

.game-sort-row::after {
    content: " ";
    display: table;
    clear: both;
}

.game-sort-scroller {
    overflow-x: auto;
    overflow-y: hidden;
}

.game-sort-list {
    position: relative;
    float: left;
    left: 0;
    white-space: nowrap;
}

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

.game-card {
    display: inline-block;
    float: none;
    width: 161px;
    height: 223px;
    margin: 0 0 12px;
    padding: 0 11px 0 0;
    vertical-align: top;
    white-space: normal;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.3em;
    color: #191919;
}

.game-card .game-card-inner {
    position: relative;
    float: left;
    width: 100%;
    height: 223px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(25, 25, 25, 0.3);
}

.game-card .game-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.game-card .game-card-thumb {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 3px 3px 0 0;
}

.game-card .game-card-thumb img {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: auto;
    border: 0;
    border-radius: 3px 3px 0 0;
    vertical-align: middle;
    overflow: hidden;
}

.game-card .game-card-name {
    width: 100%;
    margin: 6px 0 3px;
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card .game-card-playing {
    width: 100%;
    margin: 3px 0;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 400;
    color: #757575;
}

.game-card .game-card-votes {
    width: 100%;
    margin: 3px 0;
    padding: 0 6px;
}

.game-card .vote-bar {
    position: relative;
    height: 20px;
}

.game-card .vote-bar::after {
    content: " ";
    display: table;
    clear: both;
}

.game-card .vote-thumb {
    float: left;
    width: 16px;
    height: 16px;
    font-size: 15px;
    line-height: 16px;
    color: #757575;
}

.game-card .vote-thumb.down {
    visibility: hidden;
    opacity: 0.6;
}

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

.game-card .vote-track {
    position: relative;
    float: left;
    width: 70%;
    height: 6px;
    margin: 9px auto 0 1%;
}

.game-card .vote-track .vote-background,
.game-card .vote-track .vote-fill,
.game-card .vote-track .vote-mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
}

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

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

.game-card .vote-track .vote-mark {
    width: 2px;
    background-color: #fff;
}

/* pending friend request / unread message count in the left nav */
.rbx-left-col li a.rbx-nav-badged {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* Keep the 28px sprite at its real size. Without this, flex can shrink the
   icon when a badge is present and visually crop the sprite. */
.rbx-left-col li a.rbx-nav-badged > [class^="icon-nav-"] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

.rbx-left-col li a.rbx-nav-badged .rbx-text-nav {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.rbx-left-col li a.rbx-nav-badged .rbx-nav-badge {
    margin: 4px 0 4px 8px;
    flex: 0 0 auto;
}

.rbx-nav-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #9D4EDD;
    border-radius: 9px;
}

/* banners color come from rbx-alert-*, just make room for close button and keep text centered */
.rbx-site-banner {
    position: relative;
    padding-left: 44px;
    padding-right: 44px;
}

.rbx-site-banner .rbx-site-banner-link {
    margin-left: 6px;
    text-decoration: underline;
}

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

.rbx-site-banner-close:hover {
    opacity: 1;
}


/* NONE purple Bootstrap/UI overrides. Bootstrap is loaded before this file. */
: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;
}


/* Catch every remaining Bootstrap blue state site-wide. */
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;
}