:root {
    --redsun-donator: #FF69B4;
    --redsun-developer: #AB73C1;
    --redsun-senior-developer: #C32EFD;
    --redsun-moderator: #88DD3B;
    --redsun-trial-moderator: #90EE90;
    --redsun-community-manager: #BC5A30;
    --redsun-administrator: #EB2B2B;

    --redsun-sidebar-administrator: #CF1919;
    --redsun-sidebar-administrator-hover: #AD1818;
    --redsun-sidebar-moderator: #35B83C;
    --redsun-sidebar-moderator-hover: #177A1D;
    --redsun-sidebar-developer: #9928c9;
    --redsun-sidebar-developer-hover: #631a82;
    --redsun-sidebar-donator: #DF4994;
    --redsun-sidebar-donator-hover: #BF2974;
    --redsun-sidebar-forum: #f78c56;
    --redsun-sidebar-forum-hover: #f25137;

    --redsun-orange: #915C00;
    --redsun-orange-light: #D28305;
    --redsun-orange-text: #F78C56;
    --redsun-orange-text-hover: #F25137;
    --redsun-lighter: #7A6E65;
    --redsun-light: #3C352D;
    --redsun-dark: #2B2724;
    --redsun-darker: #1F1D1B;
    --redsun-darkest: #191715;

    --redsun-unknown: #312020;

    --redsun-rank: #326496;
    --redsun-rank-1: #D89400;
    --redsun-rank-2: #808080;
    --redsun-rank-3: #8A5C37;

    --redsun-item-border-size: 3px;
    --redsun-item-border-radius: 10px;
    --redsun-sidebar-width: 275px;

    --items-disabled-quality-bright: #BBB;
    --items-normal-quality-dark: #41403E;
    --items-normal-quality-bright: #B2B2B2;
    --items-unique-quality-dark: #584C1A;
    --items-unique-quality-bright: #FFD700;
    --items-genuine-quality-dark: #272E26;
    --items-genuine-quality-bright: #4D7455;
    --items-haunted-quality-dark: #22553E;
    --items-haunted-quality-bright: #38F3AB;
    --items-strange-quality-dark: #4B2B20;
    --items-strange-quality-bright: #CF6A32;
    --items-selfmade-quality-dark: #2F3F23;
    --items-selfmade-quality-bright: #70B04A;
    --items-unusual-quality-dark: #34243E;
    --items-unusual-quality-bright: #8650AC;
    --items-vintage-quality-dark: #252935;
    --items-vintage-quality-bright: #476291;
    --items-collectors-quality-dark: #321D1C;
    --items-collectors-quality-bright: #AA0000;
    --items-elite-quality-dark: #892D2D;
    --items-elite-quality-bright: #EB4B4B;
    --items-assassin-quality-dark: #5B1263;
    --items-assassin-quality-bright: #D32CE6;
    --items-commando-quality-dark: #3D2F56;
    --items-commando-quality-bright: #8847FF;
    --items-mercenary-quality-dark: #232C59;
    --items-mercenary-quality-bright: #4B69FF;
    --items-freelance-quality-dark: #395472;
    --items-freelance-quality-bright: #5E98D9;
    --items-civilian-quality-dark: #748599;
    --items-civilian-quality-bright: #B0C3D9;

    --items-text-attributes-level: #756B5E;
    --items-text-attributes-positive: #99CCFF;
    --items-text-attributes-neutral: #EBE2CA;
    --items-text-attributes-negative: #FF4040;
    --items-text-attributes-limiteduse: #00A000;
    --items-text-attributes-vanity: #606060;
    --items-text-attributes-gifter: #F7D85D;
    --items-text-attributes-gifttext: #FFEC99;

    --redsun-team-red: #9f6053;
    --redsun-team-blu: #567685;
    --redsun-team-undefined: #757575;

    --redsun-profile-border-radius: 0.5rem;
    --redsun-profile-card-padding: 16px;
    --redsun-profile-inner-margin: 5px;

    /* these are just placeholders to let events override it */
    --redsun-event-text: #ffffff;
    --redsun-event-background: #666;
    --redsun-event-background-hover: #444;
}

body {
    background-color: var(--redsun-light);
    color: #cdcdcd;
}

#sidebar-container {
    background-color: var(--redsun-dark);
    min-height: 100vh;
    width: 100vw;
    z-index: 100;

    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox and Mozilla */
}

#sidebar-container::-webkit-scrollbar { /* Chrome, Safari and Opera */
    width: 0;
    background: transparent;
}

#sidebar-player,
#sidebar-player > .profile-background {
    height: 166px;
}

#main-container {
    position: relative;
    overflow: hidden;
}

.profile-card {
    background-color: rgba(31, 29, 27, 0.8); /* var(--redsun-darker) */
    backdrop-filter: blur(4px);
    margin-top: 16px;
    display: inline-block;
    width: 100%;
    border-radius: var(--redsun-profile-border-radius);
}

.profile-card.profile-extras {
    background-color: var(--redsun-darkest);
}

.profile-card > * {
    padding: var(--redsun-profile-card-padding);
}

.profile-statistics {
    padding-top: 6px;
    padding-bottom: 6px;
}

.profile-statistics > .profile-text:nth-of-type(1) {
    margin-top: 4px;
}


/* Don't allow any profile items override font */
[class*="profile-"] * i:not(.fa-duotone) {
    font-family: FontAwesome !important;
}

[class*="profile-"] * i.fad {
    font-family: "Font Awesome 6 Duotone" !important;
}

.profile-button {
    padding: 1px;
    text-align: center;
    font-size: 20px;

    border-radius: var(--redsun-profile-border-radius);
    background-color: transparent;
    color: var(--redsun-orange-text);
}

.profile-button:hover {
    color: var(--redsun-orange-text-hover);
    background-color: var(--redsun-dark);
}

/* For small buttons, not for classified buttons. If only :has(i) is supported in mozilla... */
.profile-title .profile-button {
    margin: 0 0 0 4px;
    position: relative;
    height: 30px;
    aspect-ratio: 1 / 1;
    float: right;

    border-width: 2px;
    border-style: solid;
    border-color: currentColor; /* Make border color same as whatever text color applied */
    border-image: initial;

    font-family: sans-serif !important; /* Prevent pofile items overriding font-family on fa */
}

.profile-button.profile-title i {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}

.profile-inner {
    background-color: rgba(60, 53, 45, 0.8); /* var(--redsun-light) */
    margin: var(--redsun-profile-inner-margin);
    border-radius: var(--redsun-profile-border-radius);
}

#profile-about-me .profile-text p {
    max-height: 1984px;
    overflow-y: auto;
}

.profile-text {
    word-break: break-word;
}

/* Animated background and profile item type */
.profile-background {
    position: absolute;
    left: 0;
    width: 100%;
    object-fit: cover;
    object-position: top left;
    pointer-events: none;
    display: none; /* Hide by default, let profile items enable it when needed */
}

/* Have background in profile page go all the way to bottom */
#main-container * div.profile-background {
    height: 100%;
}

@media (min-width: 1024px) {
    #sidebar-container {
        width: var(--redsun-sidebar-width);
        display: block !important;

        position: fixed;
        overflow-y: scroll;
        max-height: 100vh;
    }

    #mobile-navbar {
        display: none !important;
    }

    #main-container {
        padding-left: var(--redsun-sidebar-width);
    }

    #main-container > .profile-background {
        padding-right: var(--redsun-sidebar-width);
    }
}

.color-redsun-lighter {
    color: var(--redsun-lighter);
}

.color-redsun-donator {
    color: var(--redsun-donator);
}

.color-redsun-developer {
    color: var(--redsun-developer) !important;
}

.color-redsun-senior-developer {
    color: var(--redsun-senior-developer) !important;
}

.color-redsun-moderator {
    color: var(--redsun-moderator) !important;
}

.color-redsun-trial-moderator {
    color: var(--redsun-trial-moderator) !important;
}

.color-redsun-community-manager {
    color: var(--redsun-community-manager) !important;
}

.color-redsun-administrator {
    color: var(--redsun-administrator) !important;
}

.bg-unknown {
    background-color: var(--redsun-unknown) !important;
}

.bg-redsun-donator {
    background-color: var(--redsun-donator) !important;
}

.bg-redsun-developer {
    background-color: var(--redsun-developer) !important;
}

.bg-redsun-senior-developer {
    background-color: var(--redsun-senior-developer) !important;
}

.bg-redsun-moderator {
    background-color: var(--redsun-moderator) !important;
}

.bg-redsun-trial-moderator {
    background-color: var(--redsun-trial-moderator) !important;
}

.bg-redsun-community-manager {
    background-color: var(--redsun-community-manager) !important;
}

.bg-redsun-administrator {
    background-color: var(--redsun-administrator) !important;
}

.bg-redsun-lighter {
    background-color: var(--redsun-lighter) !important;
}

.bg-redsun-light {
    background-color: var(--redsun-light) !important;
}

.bg-redsun-dark {
    background-color: var(--redsun-dark) !important;
}

.bg-redsun-darker, footer {
    background-color: var(--redsun-darker) !important;
}

.bg-redsun-darkest, .swal2-popup, .swal2-range {
    background-color: var(--redsun-darkest) !important;
}

.bg-redsun-orange {
    background-color: var(--redsun-orange) !important;
}

.bg-redsun-orange-light {
    background-color: var(--redsun-orange-light) !important;
}

.text-redsun-orange-light {
    color: var(--redsun-orange-light) !important;
}

.border-redsun {
    border-width: 6px;
    border-style: solid;
    border-color: var(--redsun-darkest) !important;
    margin-top: -6px;
    margin-bottom: -6px;
}

.border-redsun-darkest {
    border-color: var(--redsun-darkest) !important;
}

table > tbody {
    border-color: var(--redsun-darkest) !important;
}

.table-striped-redsun > tbody > tr:nth-child(odd) {
    background-color: var(--redsun-darker) !important;
}

.card {
    background-color: #1F1D1BE6;
}

.redsun-list-group-item-dark {
    color: var(--redsun-orange-text);
    background-color: var(--redsun-darker);
}

.redsun-list-group-item-dark.list-group-item-action:hover, .redsun-list-group-item-dark.list-group-item-action:focus {
    color: var(--redsun-orange-text);
    background-color: var(--redsun-dark);
}

.redsun-list-group-item-dark.list-group-item-action.active {
    color: var(--redsun-orange-text);
    background-color: var(--redsun-dark);
    border-color: var(--redsun-dark);
}

.no-white-space {
    width: 0px;
    white-space: nowrap;
}

#sidebar-container .btn {
    border-radius: 0;
    text-align: start;
    padding-left: 10%;
}

#sidebar-container .btn i {
    margin-right: 5%;
}

.search-input, .search-option, select {
    background-color: var(--redsun-light) !important;
    border: 3px solid var(--redsun-darkest);
    color: var(--redsun-orange-text);
    border-radius: 10px;
    transition: 0.3s;
    margin-bottom: 10px;
    padding: 5px 10px 5px 10px;
}

.search-option, select {
    cursor: pointer;
}

select {
    color: #cdcdcd !important;
}

.search-input:focus, select:focus {
    outline: none;
}

input[name="search-option"] {
    display: none;
}

.search-option:hover, input[name="search-option"]:checked + label {
    background-color: var(--redsun-lighter) !important;
    border: 3px solid var(--redsun-light);
    color: var(--redsun-orange-text-hover);
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

a, .text-redsun-orange {
    text-decoration: None;
    color: var(--redsun-orange-text);
}

a:hover {
    color: var(--redsun-orange-text-hover);
}

.h1, h1, .h1-text, .loadout-item-text {
    color: var(--redsun-orange-text);
    font-family: 'tf2build', sans-serif;
}

.h2, h2, .title-text {
    color: var(--redsun-orange-text);
    font-family: 'tf2secondary', sans-serif;
}

.tf2-msg-text, .tf2-msg-text * {
    font-family: 'Verdana-Bold', 'Verdana' !important;
    font-weight: bold !important;
    text-shadow: 1px 1px black !important;
    max-width: 100%;
}

.tf2-msg-text .html_name_display_icon {
    font-family: system-ui !important;
}

.tf2-tooltip {
    background: linear-gradient(#38332D, #221E1A);
    box-shadow:
        0 0 6px -3px black,
        inset 0 -3px 3px -3px black,
        inset 0 3px 3px -3px #ACA093,
        inset 1px 0 1px -1px #ACA093,
        inset -1px 0 1px -1px #ACA093;
}

.text-shadow-dark {
    text-shadow: 2px 2px 3px var(--redsun-dark), 2px -2px 3px var(--redsun-dark), -2px 2px 3px var(--redsun-dark), -2px -2px 3px var(--redsun-dark);
}

.btn-redsun-administrator {
    background-color: var(--redsun-sidebar-administrator);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-administrator:hover, .btn-redsun.btn-active {
    background-color: var(--redsun-sidebar-administrator-hover);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-moderator {
    background-color: var(--redsun-sidebar-moderator);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-moderator:hover, .btn-redsun-moderator.btn-active {
    background-color: var(--redsun-sidebar-moderator-hover);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-developer {
    background-color: var(--redsun-sidebar-developer);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-developer:hover, .btn-redsun-developer.btn-active {
    background-color: var(--redsun-sidebar-developer-hover);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-donator {
    background-color: var(--redsun-sidebar-donator);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-donator:hover, .btn-redsun-donator.btn-active {
    background-color: var(--redsun-sidebar-donator-hover);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-forum {
    background-color: var(--redsun-sidebar-forum);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-forum:hover, .btn-redsun-donator.btn-active {
    background-color: var(--redsun-sidebar-forum-hover);
    color: #FFF;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
}

.btn-redsun-light {
    background-color: var(--redsun-light);
    border: 3px solid var(--redsun-darker);
    color: var(--redsun-orange-text);
    border-radius: 10px;
}

.btn-redsun-light:hover, .btn-redsun-light.btn-active {
    background-color: var(--redsun-lighter);
    border: 3px solid var(--redsun-light);
    color: var(--redsun-orange-text-hover);
    border-radius: 10px;
}

.btn-redsun-dark {
    background-color: var(--redsun-dark);
    color: var(--redsun-orange-text);
}

.btn-redsun-dark:hover, .btn-redsun-dark.btn-active {
    background-color: var(--redsun-darker);
    color: var(--redsun-orange-text-hover);
}

.btn-redsun-darker {
    background-color: var(--redsun-darker);
    color: var(--redsun-orange-text);
}

.btn-redsun-darker:hover, .btn-redsun-darker.btn-active {
    background-color: var(--redsun-darkest);
    color: var(--redsun-orange-text-hover);
}

.btn-redsun-dark:focus {
    box-shadow: 0 0 0 2px var(--redsun-light) inset;
}

.btn-redsun-event {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .5), 0px 0px 1px rgba(0, 0, 0, .5);
    background-color: var(--redsun-event-background);
    color: var(--redsun-event-text);
}

.btn-redsun-event:hover, .btn-redsun-event.btn-active {
    background-color: var(--redsun-event-background-hover);
    color: var(--redsun-event-text);
}

.btn-outline-strange {
    border-color: var(--items-strange-quality-bright);
    color: var(--items-strange-quality-bright);
}

.btn-outline-strange:hover:not(:disabled) {
    background-color: var(--items-strange-quality-bright);
    border-color: var(--items-strange-quality-bright);
    color: white;
}

.event-card {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 4px solid black;

    background-size: cover;
    background-position: center;
}

.event-card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    transition: background 0.1s linear;
}

.event-card:hover:before {
    background: #0003;
}

/* Prevent showing default tooltip while page loads for bootstrap tooltip */
[data-bs-toggle="tooltip"]:not([title=""]) {
    pointer-events: none;
}

/* Tooltip to make background fit */
.bs-tooltip-top > .tooltip-extras * .profile-background,
.bs-tooltip-bottom > .tooltip-extras * .profile-background {
    height: calc(100% - 0.8rem) !important;
}

.bs-tooltip-start > .tooltip-extras * .profile-background,
.bs-tooltip-end > .tooltip-extras * .profile-background {
    width: calc(100% - 0.8rem) !important;
}

.tooltip-extras * .profile-background {
    border-radius: 0.25rem !important; /* rounded class */
    height: 100%;
}

.tooltip.show.no-opacity {
    opacity: 1;
}

.tooltip-player-text {
    text-align: left;
    text-overflow: ellipsis;
    padding-left: 6px;
}

.list-of-links > a {
    display: block;
    width: max-content;
}

.category-block {
    display: inline-block;
    padding: 10px 30px 10px 30px;
    margin: 8px 0px 8px 0px;
    border-radius: 6px;
}

@media (max-width: 1024px) {
    .category-block {
        width: 100%;
        padding: 10px 10px 10px 10px;
    }
}

.flex-wrap-start, .flex-wrap-center {
    display: flex;
    flex-wrap: wrap;
}

.flex-wrap-start {
    justify-content: start;
}

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

.display-item:hover {
    background-color: var(--redsun-lighter);
}

.display-item {
    background-color: var(--redsun-light);
    border: var(--redsun-item-border-size) solid var(--redsun-dark);
    width: 115px;
    height: 85px;
    margin: 7px;
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.3s;
    cursor: pointer;
}

.display-item > img,
.display-item * img {
    vertical-align: middle;
    padding-top: 7px;
    width: auto;
    height: 75px;
}

@media (max-width: 1024px) {
    .display-item {
        width: 78px;
        height: 78px;
        margin: 3px;
    }
}

.loadout-item, .loadout-item-text {
    width: 70px;
    height: 70px;
    margin: 3px;
    position: relative;
    display: inline-block;
}

.loadout-item-text {
    background-color: var(--redsun-light);
}

.loadout-item-text > span {
    text-align: center;
    font-size: 20px;

    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hidden-item.loadout-item img,
.hidden-item.display-item {
    background-image: repeating-linear-gradient(-60deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 20px, transparent 20px, transparent 40px);
}

.server-background {
    position: absolute;
    width: 200px;
    min-width: 45%;
    max-width: 100%;
    height: 100%;
    top: 0;
    right: 0;
}

.gamemode-background, .map-background, .server-background, .welcome-background, .welcome-background > div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gamemode-background, .map-background {
    box-shadow: inset 0px 0px 50px black;
}

.gamemode-background {
    aspect-ratio: 16 / 9;
    filter: blur(1.5px);
}

.gamemode-banner {
    filter: drop-shadow(0px 0px 6px black);
}

.gamemode-title {
    color: var(--redsun-orange-light);
    text-shadow: 5px 5px 2px black;
}

.map-background {
    aspect-ratio: 2 / 1;
}

.server-background > div {
    width: 100%;
    height: 100%;

    background: linear-gradient(to right, var(--redsun-dark) 0px, transparent 40px, transparent 100%),
                linear-gradient(to right, var(--redsun-dark) 0px, transparent 60px, transparent 100%);
}

.welcome-background {
    position: relative;
    filter: blur(1.5px);
}

.welcome-background div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}

.welcome-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.welcome-image::after {
    box-shadow:
        inset 0px 0px 10px 10px var(--redsun-darkest),
        inset 60px 0px 30px -15px var(--redsun-darkest),
        inset -60px 0px 30px -15px var(--redsun-darkest);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

.unusual-img {
    aspect-ratio: 1 / 1;
}

.unusual-img > div {
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 50px 5px black;
    position: absolute;
    top: 0;
}

.unusual-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-nextmap {
    opacity: 0;
    transition: opacity 0.3s linear;
}

.server-info:hover .server-nextmap {
    opacity: 1;
}

.donations-description {
    width: calc(100% - 70px);
}

.players-avatar-border {
    border-width: 3px;
    border-style: solid;
}

.players-avatar-in-server {
    border: 3px solid #329b32 !important;
}

.players-avatar-online {
    border: 3px solid #3296ff !important;
}

.players-avatar-lighter {
    border: 3px solid var(--redsun-lighter);
}

.players-avatar-small, .players-avatar-medium, .players-avatar-large {
    margin: 2px;
    border-radius: 3px;
    position: relative;
    display: inline-block;
}

.players-avatar-small {
    max-width: 30px;
    max-height: 30px;
}

.players-avatar-medium {
    max-width: 60px;
    max-height: 60px;
}

.players-avatar-large {
    max-width: 120px;
    max-height: 120px;
}

.badge-topleft, .badge-topright, .badge-bottomright, .badge-newcount, .badge-rank, .badge-mapcycle {
    z-index: 10;
    position: absolute;
    text-align: center;
    pointer-events: none;
}

.badge-topleft {
    left: -5px;
    top: -2px;
}

.badge-topright {
    right: -5px;
    top: -2px;
}

.loadout-item .badge-topleft {
    left: -2px;
}

.loadout-item .badge-topright {
    right: -2px;
}

.badge-bottomright {
    right: -5px;
    bottom: -2px;
}

.badge-newcount {
    float: right;
    right: 15%;
    margin-top: 3px;
}

.badge-rank {
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0px 3px 0px 0px;
    text-align: center;
    padding: 2px 1px 0px 1px;
    height: 20px;
    min-width: 20px;
    font-size: 16px;
}

.badge-mapcycle {
    right: 0px;
    top: 0px;
    pointer-events: auto;
}

img[data-quality] {
    border-radius: var(--redsun-item-border-radius);
}

img[data-quality='normal'] {
    background-color: var(--items-normal-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-normal-quality-bright);
}

img[data-quality='normal']:hover {
    background-color: var(--items-normal-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-normal-quality-dark);
}


img[data-quality='unique'] {
    background-color: var(--items-unique-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-unique-quality-bright);
}

img[data-quality='unique']:hover {
    background-color: var(--items-unique-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-unique-quality-dark);
}


img[data-quality='genuine'] {
    background-color: var(--items-genuine-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-genuine-quality-bright);
}

img[data-quality='genuine']:hover {
    background-color: var(--items-genuine-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-genuine-quality-dark);
}


img[data-quality='haunted'] {
    background-color: var(--items-haunted-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-haunted-quality-bright);
}

img[data-quality='haunted']:hover {
    background-color: var(--items-haunted-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-haunted-quality-dark);
}


img[data-quality='strange'] {
    background-color: var(--items-strange-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-strange-quality-bright);
}

img[data-quality='strange']:hover {
    background-color: var(--items-strange-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-strange-quality-dark);
}


img[data-quality='selfmade'],
img[data-quality='community'] {
    background-color: var(--items-selfmade-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-selfmade-quality-bright);
}

img[data-quality='selfmade']:hover,
img[data-quality='community']:hover {
    background-color: var(--items-selfmade-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-selfmade-quality-dark);
}


img[data-quality='unusual'],
img[data-quality='strange-unusual'] {
    background-color: var(--items-unusual-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-unusual-quality-bright);
}

img[data-quality='unusual']:hover,
img[data-quality='strange-unusual']:hover {
    background-color: var(--items-unusual-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-unusual-quality-dark);
}


img[data-quality='vintage'] {
    background-color: var(--items-vintage-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-vintage-quality-bright);
}

img[data-quality='vintage']:hover {
    background-color: var(--items-vintage-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-vintage-quality-dark);
}


img[data-quality='collectors'] {
    background-color: var(--items-collectors-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-collectors-quality-bright);
}

img[data-quality='collectors']:hover {
    background-color: var(--items-collectors-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-collectors-quality-dark);
}


img[data-quality='elite'] {
    background-color: var(--items-elite-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-elite-quality-bright);
}

img[data-quality='elite']:hover {
    background-color: var(--items-elite-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-elite-quality-dark);
}


img[data-quality='assassin'] {
    background-color: var(--items-assassin-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-assassin-quality-bright);
}

img[data-quality='assassin']:hover {
    background-color: var(--items-assassin-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-assassin-quality-dark);
}


img[data-quality='commando'] {
    background-color: var(--items-commando-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-commando-quality-bright);
}

img[data-quality='commando']:hover {
    background-color: var(--items-commando-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-commando-quality-dark);
}


img[data-quality='mercenary'] {
    background-color: var(--items-mercenary-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-mercenary-quality-bright);
}

img[data-quality='mercenary']:hover {
    background-color: var(--items-mercenary-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-mercenary-quality-dark);
}


img[data-quality='freelance'] {
    background-color: var(--items-freelance-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-freelance-quality-bright);
}

img[data-quality='freelance']:hover {
    background-color: var(--items-freelance-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-freelance-quality-dark);
}

img[data-quality='civilian'] {
    background-color: var(--items-civilian-quality-dark);
    border: var(--redsun-item-border-size) solid var(--items-civilian-quality-bright);
}

img[data-quality='civilian']:hover {
    background-color: var(--items-civilian-quality-bright);
    border: var(--redsun-item-border-size) solid var(--items-civilian-quality-dark);
}


/* Shop: Description of items in tf2-style */
.att_level {
    color: var(--items-text-attributes-level) !important;
}

.att_positive {
    color: var(--items-text-attributes-positive) !important;
}

.att_neutral, .att_footer {
    color: var(--items-text-attributes-neutral) !important;
}

.att_negative {
    color: var(--items-text-attributes-negative) !important;
}

.att_limiteduse {
    color: var(--items-text-attributes-limiteduse) !important;
}

.att_vanity {
    color: var(--items-text-attributes-vanity) !important;
}

.att_gifter {
    color: var(--items-text-attributes-gifter) !important;
}

.att_gifttext {
    color: var(--items-text-attributes-gifttext) !important;
}

.att_normal {
    color: var(--items-normal-quality-bright) !important;
}


/* All: Team Fortress 2 item quality in text using HTML 5 data sets */
.att_unique,
.item-tf2-title[data-quality='unique'] {
    color: var(--items-unique-quality-bright) !important;
}

.att_genuine,
.item-tf2-title[data-quality='genuine'] {
    color: var(--items-genuine-quality-bright) !important;
}

.att_haunted,
.item-tf2-title[data-quality='haunted'] {
    color: var(--items-haunted-quality-bright) !important;
}

.att_strange,
.item-tf2-title[data-quality='strange'] {
    color: var(--items-strange-quality-bright) !important;
}

.att_selfmade,
.att_community,
.item-tf2-title[data-quality='selfmade'],
.item-tf2-title[data-quality='community'] {
    color: var(--items-selfmade-quality-bright) !important;
}

.att_unusual,
.att_strange-unusual,
.item-tf2-title[data-quality='unusual'],
.item-tf2-title[data-quality='strange-unusual'] {
    color: var(--items-unusual-quality-bright) !important;
}

.att_vintage,
.item-tf2-title[data-quality='vintage'] {
    color: var(--items-vintage-quality-bright) !important;
}

.att_collectors,
.item-tf2-title[data-quality='collectors'] {
    color: var(--items-collectors-quality-bright) !important;
}

.att_civilian,
.item-tf2-title[data-quality='civilian'] {
    color: var(--items-civilian-quality-bright) !important;
}

.att_freelance,
.item-tf2-title[data-quality='freelance'] {
    color: var(--items-freelance-quality-bright) !important;
}

.att_mercenary,
.item-tf2-title[data-quality='mercenary'] {
    color: var(--items-mercenary-quality-bright) !important;
}

.att_commando,
.item-tf2-title[data-quality='commando'] {
    color: var(--items-commando-quality-bright) !important;
}

.att_assassin,
.item-tf2-title[data-quality='assassin'] {
    color: var(--items-assassin-quality-bright) !important;
}

.att_elite,
.item-tf2-title[data-quality='elite'] {
    color: var(--items-elite-quality-bright) !important;
}

[class*="att_"] {
    /* Just to prevent profile items changing it */
    text-shadow: none;
}

.list-group-item-darker {
    color: #cdcdcd;
    background-color: #383838;
}

input, textarea {
    color: #cdcdcd !important;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: #cdcdcd !important;
}

.page-link {
    position: relative;
    display: block;
    color: var(--redsun-orange-text);
    text-decoration: none;
    background-color: var(--redsun-dark);
    border: 1px solid var(--redsun-orange-light);
}

.page-link:hover,
.page-item.active .page-link {
    z-index: 2;
    color: var(--redsun-dark);
    background-color: var(--redsun-orange-light);
    border-color: var(--redsun-orange);
}

.page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: var(--redsun-dark);
    border-color: var(--redsun-orange-light);
}

/**
 Badges
*/

.badge-title {
    font-size: 20px;
    color: var(--redsun-orange-text);
}

.badge-description {
    font-size: 12px;
}

.badge-checkbox-incomplete {
    filter: contrast(0) brightness(50%) !important;
}

.badge-highlight {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    color: #111;
    padding: 3px;
    font-size: 12px;
    font-weight: bold;
}

.badge-item {
    width: 40px;
    height: 40px;
    margin: 5px;
    position: relative;
    display: inline-block;
}

.badge-img {
    transition: filter 0.3s ease 100ms;
}

.badge-img.undiscovered {
    filter: contrast(0) brightness(65%) !important;
}

.badge-background.badge-limited {
    box-shadow: 0 0 4px 1px rgba(212, 175, 55, 0.33);
    background-color: rgba(212, 175, 55, 0.33);
    border-radius: 2px;
}

.badge-background.badge-special {
    box-shadow: 0 0 4px 1px rgba(255, 60, 60, 0.33);
    background-color: rgba(255, 60, 60, 0.33);
    border-radius: 2px;
}

.badge-highlight.common {
    background-color: RGB(160, 160, 160);
}

.badge-highlight.uncommon {
    background-color: RGB(107, 255, 107);
    animation: pulse-uncommon 0.7s infinite alternate;
}

.badge-highlight.rare {
    background-color: RGB(181, 107, 255);
    animation: pulse-rare 0.5s infinite alternate;
}

.badge-highlight.superrare {
    background-color: RGB(255, 107, 181);
    animation: pulse-superrare 0.5s infinite alternate;
}

.badge-highlight.limited {
    background-color: RGB(212, 175, 55);
    animation: pulse-limited 0.4s infinite alternate;
}

.badge-highlight.special {
    background-color: RGB(255, 60, 60);
    animation: pulse-special 0.4s infinite alternate;
}


.bg-badge-highlight.common {
    background-color: RGBA(160, 160, 160, 0.3);
}

.bg-badge-highlight.uncommon {
    background-color: RGBA(107, 255, 107, 0.3);
    animation: pulse-uncommon 0.7s infinite alternate;
}

.bg-badge-highlight.rare {
    background-color: RGBA(181, 107, 255, 0.3);
    animation: pulse-rare 0.5s infinite alternate;
}

.bg-badge-highlight.superrare {
    background-color: RGBA(255, 107, 181, 0.3);
    animation: pulse-superrare 0.5s infinite alternate;
}

.bg-badge-highlight.limited {
    background-color: RGBA(212, 175, 55, 0.3);
    animation: pulse-limited 0.4s infinite alternate;
}

.bg-badge-highlight.special {
    background-color: RGB(255, 60, 60);
    animation: pulse-special 0.4s infinite alternate;
}


@keyframes pulse-uncommon {
    from {
        box-shadow: 0 0 10px 3px RGB(107, 255, 107);
    }
    to {
        box-shadow: 0 0 20px 5px RGB(107, 255, 107);
    }
}

@keyframes pulse-rare {
    from {
        box-shadow: 0 0 10px 3px RGB(181, 107, 255);
    }
    to {
        box-shadow: 0 0 20px 5px RGB(181, 107, 255);
    }
}

@keyframes pulse-superrare {
    from {
        box-shadow: 0 0 10px 3px RGB(255, 107, 181);
    }
    to {
        box-shadow: 0 0 20px 5px RGB(255, 107, 181);
    }
}

@keyframes pulse-limited {
    from {
        box-shadow: 0 0 10px 3px RGB(212, 175, 55);
    }
    to {
        box-shadow: 0 0 20px 5px RGB(212, 175, 55);
    }
}

@keyframes pulse-special {
    from {
        box-shadow: 0 0 10px 3px RGB(255, 60, 60);
    }
    to {
        box-shadow: 0 0 20px 5px RGB(255, 60, 60);
    }
}

/**
 Leaderboard
*/

.leaderboard-img {
    border: 3px solid var(--redsun-rank) !important;
    border-radius: 3px;
}

[data-rank="1"] > .leaderboard-img {
    border: 3px solid var(--redsun-rank-1) !important;
}

[data-rank="2"] > .leaderboard-img {
    border: 3px solid var(--redsun-rank-2) !important;
}

[data-rank="3"] > .leaderboard-img {
    border: 3px solid var(--redsun-rank-3) !important;
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .leaderboard-info {
        width: calc(100% - 720px);
    }
}

@media (min-width: 1600px) {
    .leaderboard-info {
        width: 550px;
    }
}

.leaderboard-item {
    height: 100px;
}

@media (min-width: 1200px) {
    .leaderboard-item {
        width: 100%;
        min-width: 70px;
    }
}

@media (min-width: 1200px) {
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(odd),
    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(even) {
        background-color: var(--redsun-dark);
    }

    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(even),
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(odd) {
        background-color: var(--redsun-darker);
    }
}

@media screen and (min-width: 576px) and (max-width: 1199px) {
    .leaderboard-category > .leaderboard-section > .leaderboard-item:nth-child(even) {
        background-color: var(--redsun-dark);
    }

    .leaderboard-category > .leaderboard-section > .leaderboard-item:nth-child(odd) {
        background-color: var(--redsun-darker);
    }

    .leaderboard-category > .leaderboard-section > .leaderboard-item:nth-child(3),
    .leaderboard-category > .leaderboard-section > .leaderboard-item:nth-child(5) {
        background-color: var(--redsun-dark);
    }

    .leaderboard-category > .leaderboard-section > .leaderboard-item:nth-child(2),
    .leaderboard-category > .leaderboard-section > .leaderboard-item:nth-child(4) {
        background-color: var(--redsun-darker);
    }
}

@media (max-width: 575px) {
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(odd),
    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(even) {
        background-color: var(--redsun-dark);
    }

    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(even),
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(odd) {
        background-color: var(--redsun-darker);
    }

    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(4),
    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(6),
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(5),
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(7) {
        background-color: var(--redsun-dark);
    }

    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(5),
    .leaderboard-category > .leaderboard-section:nth-child(odd) > .leaderboard-item:nth-child(7),
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(4),
    .leaderboard-category > .leaderboard-section:nth-child(even) > .leaderboard-item:nth-child(6) {
        background-color: var(--redsun-darker);
    }
}

.leaderboard-title {
    font-size: 1.5vw;
    line-height: 1;
}

@media (max-width: 1199px) {
    .leaderboard-title {
        font-size: 22px;
    }
}

.leaderboard-counter {
    width: 280px;
}

@media (max-width: 575px) {
    .leaderboard-counter {
        width: 100%;
    }
}

.leaderboard-text {
    font-size: 14px;
    line-height: 1;
}

.leaderboard-detail > td {
    height: 70px;
}

.leaderboard-detail-rank {
    color: var(--redsun-rank);
}

.leaderboard-detail-rank[data-rank="1"] {
    color: var(--redsun-rank-1) !important;
}

.leaderboard-detail-rank[data-rank="2"] {
    color: var(--redsun-rank-2) !important;
}

.leaderboard-detail-rank[data-rank="3"] {
    color: var(--redsun-rank-3) !important;
}

/**
 Item catalog
*/

.img-tf2class {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    position: relative;
    display: inline-block;
}

.img-player-selfmade {
    border: 3px solid var(--items-selfmade-quality-bright) !important;
}

/**
 Map list
*/

.mapcycle-latest, .mapcycle-list {
    column-rule-style: solid;
    column-rule-width: 10px;
    column-rule-color: var(--redsun-dark);
    list-style-type: none;
    padding-left: 2px;
    padding-right: 2px;
}

.mapcycle-latest > li, .mapcycle-list > li {
    padding-left: 16px;
    padding-right: 32px; /* From extra notice badge */

    /* https://stackoverflow.com/a/7785711/3738545 */
    page-break-inside: avoid; /* Theoretically FF 20+ */
    break-inside: avoid-column; /* Chrome, Safari, IE 11 */
}

.mapcycle-latest > li::first-letter, .mapcycle-list > li::first-letter {
    margin-left: -16px;
}

.mapcycle-latest > li:hover, .mapcycle-list > li:hover {
    background-color: var(--redsun-lighter) !important;
    transition: 0.3s;
}

.mapcycle-latest {
    column-count: 2;
}

.mapcycle-list {
    column-count: 4;
}

@media (max-width: 1800px) {
    .mapcycle-list {
        column-count: 3;
    }
}

@media (max-width: 1200px) {
    .latest-maps {
        column-count: 1;
    }

    .mapcycle-list {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .mapcycle-latest {
        column-count: 1;
    }

    .mapcycle-list {
        column-count: 1;
    }
}

/*
 MOTD
*/

.motd-redsun-logo {
    position: absolute;
    bottom: 0px;
    right: 32px;
    width: 64px;
    height: 64px;
}

.select2 .select2-container .select2-container--default,
.select2-container--default .select2-selection--single,
.select2-search--dropdown,
.select2-search__field,
.select2-results,
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.form-control {
    height: inherit !important;
    /* width: 100% !important; */
    color: var(--redsun-orange-text) !important;
    background-color: var(--redsun-dark) !important;
}

.select2-selection__choice,
.select2-selection__choice__remove {
    vertical-align: top !important;
    background-color: var(--redsun-light) !important;
    border-color: var(--redsun-darker) !important;
}

.select2-selection__choice__remove {
    height: 100%;
    top: -2px;
}

.swal2-range {
    width: 100%;
}

.swal2-styled.swal2-deny {
    font-size: 1.0625em; /* Same size as confirm and cancel */
}

.colored-toast.swal2-icon-success {
    background-color: #408b16 !important;
}

.colored-toast.swal2-icon-error {
    background-color: #8c1616 !important;
}

.colored-toast.swal2-icon-warning {
    background-color: #8c4d16 !important;
}

.colored-toast.swal2-icon-info {
    background-color: #166d8c !important;
}

.colored-toast.swal2-icon-question {
    background-color: #168c7a !important;
}

.colored-toast .swal2-title {
    color: white;
}

.colored-toast .swal2-close {
    color: white;
}

.colored-toast .swal2-html-container {
    color: white;
}

.spoiler {
    background-color: gray;
    color: transparent;
    user-select: none;
}

.spoiler:hover {
    background-color: inherit;
    color: inherit;
}

.team-Red {
    color: var(--redsun-team-red);
}

.team-Blue {
    color: var(--redsun-team-blu);
}

.team-Undefined {
    color: var(--redsun-team-undefined);
}

.lg1 {
    background-color: var(--redsun-dark);
}

.lg2 {
    background-color: var(--redsun-darker);
}

.lg1:hover, .lg1:active, .lg1:focus, .lg2:hover, .lg2:active, .lg2:focus {
    background-color: var(--redsun-darkest);
}

.tooltip-item-container {
    position: relative;
}

.paint-icon-tooltip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}

.tooltip-title {
    text-align: center;
    overflow-wrap: break-word;
    margin: 0 auto;
    box-sizing: border-box;
}

.tooltip-icon {
    padding: 0 48px;
}