body {color: #969696; font-family: "Motiva Sans", Arial, Helvetica, sans-serif}
button {font-family: "Motiva Sans", Arial, Helvetica, sans-serif}
img {-webkit-user-drag: none}

.tiny {font-size: 0.75em; opacity: 0.75}

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important; height: 0 !important;
    background: transparent !important;
}

::selection {
    background: #54a5d4; text-shadow: 1px 1px 2px rgba(0,0,0,.6666666667);
    color: #fff
}

@font-face {
    font-family: "Motiva Sans"; src: url(../assets/fonts/motivasans.ttf) format("truetype");
    font-weight: 400; font-style: normal
}

@font-face {
    font-family: "Motiva Sans"; src: url(../assets/fonts/motivasansbold.ttf) format("truetype");
    font-weight: 300; font-style: normal
}

@font-face {
    font-family: "Motiva Sans"; src: url(../assets/fonts/motivasansitalic.ttf) format("truetype");
    font-weight: 200; font-style: normal
}

body.DefaultTheme {
    --gradient-right: rgba(109, 38, 44, 0.301); --gradient-left: rgba(50, 255, 193, 0.103);
    --gradient-background: rgba(34, 35, 48, 0.93); --gradient-background-right: rgba(109, 38, 44, 0);
    --gradient-background-left: rgba(50, 255, 193, 0.103); --color-showcase-header: rgba(43, 45, 68, 0.93);
    --gradient-showcase-header-left: rgba(115, 173, 184, 0.247); --btn-background: rgba(43, 52, 68);
    --btn-background-hover: rgb(53, 62, 78); --btn-outline: rgb(93, 102, 118)
}

body.profilepage.hasprofilebackground,
div.profilepage.hasprofilebackground {
    background-image: none; background-color: #000;
    background-position: center top; background-repeat: no-repeat
}

div.profilepage.hasprofilebackground.fullwidthbackground {
    background-size: 100%
}

body.profilepage.hasprofilebackground {
    background-color: #000
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    div.profilepage.hasprofilebackground {
        background-position: 49.999%0
    }
}

.profileheaderbg {
    position: relative; max-width: 1018px;
    min-height: 224px; padding-bottom: 0;
    margin: 0 auto; background-repeat: no-repeat;
    background-position: center bottom
}

.profileheaderbgtexture {
    max-width: 976px; min-height: 224px;
    margin: 0 auto; background: radial-gradient(farthest-side at bottom right, var(--gradient-right), transparent 500px), radial-gradient(farthest-corner at bottom left, var(--gradient-left), transparent 600px);
    background-color: var(--gradient-background); background-repeat: no-repeat;
    background-position: center
}

.profileheader {
    position: relative; max-width: 976px;
    padding: 24px 12px 0 24px; margin: 0 auto
}

.profileheadercontent {
    position: relative; padding-top: 10px;
    color: #c4c4c4; font-size: 13px;
    display: grid; grid-template-columns: auto 1fr auto
}

.profileheadercenteredcol {
    text-overflow: ellipsis; white-space: nowrap;
    overflow: hidden; padding: 0 18px 0 36px
}

.profileheadersummary {
    overflow: hidden; white-space: wrap
}

.playeravatar.profileheadersize {
    position: relative; width: 166px;
    height: 166px
}

.playeravatar.profileheadersize .playeravatarAutoSizeInner img {
    background: 0 0; filter: none;
    display: block; padding: 0;
    width: 100%; height: 100%
}

.playeravatar.profileheadersize .playeravatarAutoSizeInner {
    position: absolute; top: 2px;
    right: 2px; bottom: 2px;
    left: 2px
}

.profileheader .personaname {
    line-height: 40px; font-size: 24px;
    color: #fff; text-overflow: ellipsis;
    white-space: nowrap; overflow: hidden;
    font-family: "Motiva Sans", Sans-serif; font-weight: 200
}

.profileheader .profileheadercenteredpersona {
    white-space: nowrap; padding-bottom: 18px
}

.profileflag {
    vertical-align: middle; width: 16px;
}

.profileheader .profilesummary {
    line-height: 18px; height: 37px;
    overflow: hidden;
    text-wrap: wrap; overflow-wrap: break-word
}

.profileheaderbadgeinfo .personalevel {
    display: flex; align-items: center;
    gap: 10px; line-height: 1.1;
    margin-bottom: 13px
}

.profileheaderbadgeinfo .personalevel .friendPlayerLevel {
    display: inline-flex; align-items: center;
    justify-content: center; width: 30px;
    height: 30px; border: 2px solid #fecc23;
    border-radius: 50%; line-height: 1;
    vertical-align: middle; flex-shrink: 0
}

.profileheaderbadgeinfo .personalevel .friendPlayerLevel .friendPlayerLevelNum {
    color: #fff; font-size: 14px;
    font-weight: 300
}

.friendPlayerLevel.lvl30 {
    border-color: #fecc23;
}

.profileheaderbadgeinfo {
    width: 290px; max-width: 290px;
    min-width: 29px;
    justify-self: end
}

.profileheaderbadge {
    border-radius: 3px; background-color: rgba(0, 0, 0, .3);
    height: 70px; margin-bottom: 13px
}

.favoritebadge {
    position: relative; padding: 8px 8px;
    display: flex; align-items: center;
    gap: 8px
}

.favoritebadgeicon {
    display: flex
}

.favoritebadgedescription {
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-size: 12px
}

.favoritebadgedescription .name {
    color: #fff
}

.profilecontent {
    position: relative; background-repeat: no-repeat;
    padding: 12px 12px 64px 12px; width: 952px;
    margin: 0 auto; font-size: 13px;
    min-height: calc(100vh - 511px)
}

.profilecontent.hasprofilebackground {
    background: radial-gradient(farthest-side at top right, var(--gradient-right), transparent 500px), radial-gradient(farthest-corner at top left, var(--gradient-left), transparent 600px), radial-gradient(farthest-corner at bottom right, var(--gradient-background-right), transparent 500px), radial-gradient(farthest-corner at bottom left, var(--gradient-background-left), transparent 600px);
    background-color: var(--gradient-background); margin-top: 0;
    overflow: hidden; padding-top: 16px
}

.profileleftcol {
    width: 652px; float: left
}

.profilerightcol {
    background-color: rgba(0, 0, 0, .3); backdrop-filter: blur(20px);
    padding: 10px; border-radius: 3px;
    width: 268px; float: right
}

.profilecustomization {
    position: relative; background-position: top left;
    background-repeat: no-repeat; background-color: rgba(0, 0, 0, .3);
    backdrop-filter: blur(20px); border-radius: 3px;
    padding: 0; margin-bottom: 12px;
    font-size: 13px; overflow: hidden
}

.profilecustomizationblock {
    position: relative; border-radius: 5px;
    padding: 20px 10px 11px 10px; margin-bottom: 0;
    font-size: 13px; overflow: hidden
}

.profilecustomizationheader {
    font-family: "Motiva Sans", Sans-serif; font-weight: 200;
    background: linear-gradient(90deg, var(--gradient-showcase-header-left) 0, var(--color-showcase-header) 90%); padding: 5px 10px 5px 10px;
    color: #fff; font-size: 16px;
    line-height: 30px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis
}

.showcasestat {
    font-size: 34px
}

.showcasestat .value {
    font-size: 1em; font-family: "Motiva Sans", Sans-serif;
    font-weight: 200; color: #fff
}

.showcasestat .label {
    font-size: .5em; color: #9b9b9b
}

a.showcasestat:hover .label {
    color: #fff
}

.showcaseslot {
    display: block; float: left;
    position: relative
}

.itemshowcase .itemcountstat {
    float: left; padding-top: 14px;
    max-width: 30%
}

.itemshowcase .itemcountstat>div {
    padding-left: 12px
}

.itemshowcase .showcaseslotrow {
    margin-left: -5px
}

.itemshowcaseitem {
    width: 96px; height: 96px;
    line-height: 96px; margin-left: 5px;
    margin-bottom: 5px; border: 1px solid #3a3a3a
}

.itemshowcaseitem img.itemimage {
    width: 96px; height: 96px
}

.profilerecentgameheader {
    display: flex; justify-content: space-between;
    margin-bottom: 8px
}

.recentgame {
    backdrop-filter: blur(20px); background-color: rgba(0, 0, 0, .3);
    border-radius: 3px; margin-bottom: 21px
}

.recentgamecontent {
    padding: 8px 10px
}

.recentgame .gameinfo {
    position: relative; height: 69px
}

.recentgame .gameinfo .gameinfocap {
    float: left; margin-right: 8px;
    width: 184px; max-width: 33%
}

.recentgame .gameinfo .gameinfocap img {
    width: 100%
}

.recentgame .gameinfo .gameinfodetails {
    position: absolute; right: 0;
    bottom: 0; text-align: right
}

.recentgame .gameinfo .gamename {
    padding-top: 10px; font-size: 14px
}

.profilecommentarea {
    margin-top: 14px; backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, .3); border-radius: 3px
}

.profilecommentarea .authornamegroup {
    flex-direction: column; align-items: flex-start;
    gap: 1px
}

.commentthreadarea {
    border-radius: 5px; overflow: hidden
}

.commentthreadcommenttext {
    color: #fff
}

.commentthreadcommenttimestamp {
    color: rgba(255, 255, 255, .5)
}

.profilecountlink {
    font-size: 14px; margin-bottom: 4px;
    min-height: 29px
}

.profilecountlink a:hover .countlinklabel {
    text-decoration: underline
}

.profilecountlinktotal {
    font-family: "Motiva Sans", Sans-serif; font-weight: 200;
    color: #9b9b9b; font-size: 24px
}

.profilecommentarea .commentthreadheader {
    border-bottom: none; padding: 6px 10px
}

.profilecommentarea .commentthreadheader {
    display: flex; justify-content: space-between;
    align-items: flex-end; flex-wrap: wrap;
    flex-direction: column; background: linear-gradient(90deg, var(--gradient-showcase-header-left) 0, var(--color-showcase-header) 90%);
    font-family: "Motiva Sans", Sans-serif; font-weight: 200;
    color: #fff; font-size: 16px;
    line-height: 30px; overflow: hidden;
    white-space: nowrap
}

.profilecommentarea .commentthreadheaderandcount {
    width: 100%; background-image: none;
    padding-left: 0
}

.profilecommentarea .commentthreadcommentcontainer {
    margin-top: 9px; border-radius: 5px
}

.headerlocation {
    display: inline
}

.headerlocation::before {
    content: " "
}

body {
    background: #1b2838; text-align: left;
    font-size: 14px; margin: 0;
    padding: 0; overflow-x: hidden
}

.whiteLink,
a {
    color: #ebebeb; text-decoration: none;
    cursor: pointer
}

a.hoverunderline:hover {
    text-decoration: underline
}

.whiteLink:hover,
a.whiteLink:hover {
    color: #66c0f4; text-decoration: none;
    cursor: pointer
}

.commentthreadheader {
    font-size: 14px; line-height: 24px;
    margin-bottom: 1px; padding-bottom: 15px;
    padding-top: 10px
}

.commentthreadheaderandcount {
    background-repeat: no-repeat; background-position: 0 4px;
    overflow: hidden; display: flex;
    justify-content: space-between
}

.commentthreadcountlabel {
    margin-right: 8px
}

.commentthreadcommentcontainer {
    padding: 10px 10px 10px 0
}

.commentthreadcomment {
    position: relative; padding-bottom: 8px;
    padding-top: 8px; padding-left: 11px;
    margin-bottom: 8px; min-height: 40px;
    overflow: hidden
}

.profilecommentarea .commentthreadcomment:not(.hiddenpost):hover {
    background: rgba(255, 255, 255, .05)
}

.commentthreadcommentcontent {
    display: flex; flex-direction: column;
    width: 100%
}

.commentthreadcommentauthor {
    line-height: 16px; display: flex;
    flex-direction: row; gap: 16px
}

.authornamegroup {
    display: flex
}

.commentthreadcommentauthor .flexrow {
    display: flex; flex-direction: row;
    align-items: center; gap: 6px;
    flex-wrap: wrap
}

.commentthreadcommentauthor a {
    font-size: 14px
}

.commentthreadcommenttimestamp {
    font-size: 13px; flex-grow: 1
}

.commentthreadcommenttext {
    font-size: 13px; word-wrap: break-word;
    overflow-y: auto; max-height: 400px;
    line-height: 18px; padding-left: 52px
}

.commentthreadcommenttext a:hover {
    color: #ebebeb; text-decoration: underline
}

img.badgeicon.small {
    width: 54px; height: 54px
}

.playeravatar {
    width: 34px; height: 34px;
    position: relative; border-radius: 0;
    padding: 1px
}

.playeravatar.offline {
    background: linear-gradient(to bottom, rgba(106, 106, 106, 1) 5%, rgba(85, 85, 85, 1) 95%);
    filter: none
}

.playeravatar.offline img {
    background: linear-gradient(to bottom, #515151 5%, #474747 95%)
}

.playeravatar img {
    width: 32px; height: 32px;
    padding: 1px; border-radius: 0;
    border: none
}

.friendPlayerLevel .friendPlayerLevelNum {
    color: #e5e5e5
}

div#globalheader {
    padding-left: 16px; padding-right: 16px;
    background: #171d25; background-position: center top;
    font-family: "Motiva Sans", Sans-serif;
    font-weight: 400; font-size: 14px
}

div#globalheader .content {
    background: #171d25; position: relative;
    box-sizing: border-box; width: 100%;
    max-width: 940px; height: 104px;
    margin: 0 auto; z-index: 402
}

div#globalheader div.logo {
    float: inline-start; padding-top: 30px;
    margin-inline-end: 40px; width: 176px;
    height: 44px
}

@media (max-width: 980px) {
    .profilecontent {
        width: auto;
        max-width: 952px;
    }

    .profileleftcol,
    .profilerightcol {
        float: none;
        width: 100%;
    }

    .profilerightcol {
        margin-bottom: 12px;
        width: calc(99.99% - 19.5px)
    }

    .profileheaderbadgeinfo {
        max-width: 150px;
        transform-origin: top right;
    }
}