*{
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

html{
    background-color: black;
    background: url(../img/slayerhub.webp) no-repeat center center fixed;
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    color: white;
    overflow-x: hidden;
    scrollbar-color: rgb(0, 202, 67) rgb(45,45,45);
}



::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    background: rgb(45,45,45);
}

::-webkit-scrollbar-thumb {
    background: rgb(0, 202, 67);
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgb(45,45,45);
}

::-webkit-scrollbar-corner {
    background: rgb(40,40,40);
}

.grecaptcha-badge{
    visibility: hidden;
}

.stat-name, .stat-value, .skill-name, .skill-progress-text, .grey-text, .kill-stat{
    user-select: text !important;
}

.stat-namel{
    user-select: text !important;
}


html.no-webp{
    background-image: url(../img/slayerhub.png);
}

a.no-underline{
    text-decoration: none;
}

.tippy-tooltip{
    font-weight: 500;
    background-color: transparent;
    border-radius: 0;
    user-select: text;
}

.tippy-content .stat-name{
    color: rgba(255,255,255,0.85);
    text-transform: none;
}

.stat-namel{
    color: rgba(255,255,255,0.85);
    text-transform: none;
    margin-left: 15px;
    margin-right: 15px;
}


.tippy-content{
    border-radius: 5px;
    background-color: rgb(30,30,30);
}

.tippy-tooltip[data-placement^="top"] > .tippy-arrow{
    border-top-color: rgb(166, 20, 93);
}

.tippy-tooltip[data-placement^="bottom"] > .tippy-arrow{
    border-bottom-color: rgb(166, 20, 93);
}

*[data-tippy-content]::after{
    content: "*";
    color: rgba(255,255,255,0.6);
    transition: color .2s;
}

*[data-tippy-content]:hover::after{
    color: #db2580;
}

.tippy-content{
    padding: 15px;
}

.tippy-explanation{
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 4px;
    white-space: normal;
}

a{
    color: #F94EA3;
    transition: color .2s;
}

a:hover{
    color: #f78dc2;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background-color: #282828;
    z-index: 1000;
    line-height: 48px;
    overflow: hidden;
}

#not_supported{
    position: fixed;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #111111;
    color: white;
    text-align: center;
    z-index: 10000;
    padding-top: 50px;
    font-size: 22px;
    display: none;
}

#not_supported.show-not-supported{
    display: block;
}

#site_name{
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    color: white;
    margin-left: 5px;
    font-weight: 600;
}

.pride-flag{
    margin-top: 6px;
    margin-left: 15px;
    border-radius: 3px;
    height: 32px;
    width: 32px;
    cursor: pointer;
    user-select: none;
}

.pride-flag.rainbow{
    background: linear-gradient(180deg,
        #FF0018 0%, #FF0018 16.7%,
        #FFA52C 16.7%, #FFA52C 33.3%,
        #FFFF41 33.3%, #FFFF41 50%,
        #008018 50%, #008018 66.7%,
        #0000F9 66.7%, #0000F9 83.3%,
        #86007D 83.3%, #86007D 100%);
}

.pride-flag.trans{
    background: linear-gradient(180deg,
        #5bcffa 0%, #5bcffa 20%,
        #f5abb9 20%, #f5abb9 40%,
        white 40%, white 60%,
        #f5abb9 60%, #f5abb9 80%,
        #5bcffa 80%, #5bcffa 100%);
}

.pride-flag.lesbian{
    background: linear-gradient(180deg,
        #d62900 0%, #d62900 20%,
        #ff9b55 20%, #ff9b55 40%,
        white 40%, white 60%,
        #d362a4 60%, #d362a4 80%,
        #a30262 80%, #a30262 100%);
}

.pride-flag.bi{
    background: linear-gradient(180deg,
        #d70071 0%, #d70071 40%,
        #9c4e97 40%, #9c4e97 60%,
        #0035aa 60%, #0035aa 100%);
}

.pride-flag.pan{
    background: linear-gradient(180deg,
        #ff218c 0%, #ff218c 33.3%,
        #ffd800 33.3%, #ffd800 66.6%,
        #21b1ff 66.6%, #21b1ff 100%);
}

.pride-flag.nb{
    background: linear-gradient(180deg,
        #fcf431 0%, #fcf431 25%,
        white 25%, white 50%,
        #9d5cd5 50%, #9d5cd5 75%,
        black 75%, black 100%);
}

.pride-flag.ace{
    background: linear-gradient(180deg,
        black 0%, black 25%,
        #a3a3a3 25%, #a3a3a3 50%,
        white 50%, white 75%,
        #800080 75%, #800080 100%);
}

.pride-flag.genderfluid{
    background: linear-gradient(180deg,
        #ff76a4 0%, #ff76a4 20%,
        white 20%, white 40%,
        #bf11d7 40%, #bf11d7 60%,
        black 60%, black 80%,
        #303cbe 80%, #303cbe 100%);
}

.pride-flag::after{
    content: "";
}

.blm-logo{
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    background-image: url(../img/icons/blm.png);
    background-size: auto 24px;
    background-position: center;
    background-repeat: no-repeat;
}

.blm-logo::after{
    content: "";
}

.social-button{
    display: block;
    margin-left: 5px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    cursor: pointer;
    text-transform: uppercase;
    height: 16px;
    font-weight: 600;
    font-size: 13px;
    background-color: rgba(255,255,255,0.7);
    color: rgb(20,20,20);
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 9999px;
    line-height: normal;
    transition: background-color .1s;
}

.social-button:hover{
    background-color: rgba(255,255,255,0.8);
}

.social-button.patreon, .social-button.ko-fi{
    padding-left: 31px;
    background-color: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.9);
    background-size: 26px 26px;
    text-decoration: none;
    text-transform: none;
    font-weight: 600;
}

.social-button.patreon:hover, .social-button.ko-fi:hover{
    background-color: rgba(0,0,0,0.1);
}

.social-button .social-icon{
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    background-color: rgba(0,0,0,0.15);
    border-radius: 50%;
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.social-button.patreon .social-icon{
    background-image: url(../img/icons/patreon.png);
}

.social-button.ko-fi .social-icon{
    background-image: url(../img/icons/kofi.png);
}


#lvldumec{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: -150px;
    top: 5px;
    background-color: rgba(11, 11, 11, 0.30);
    border-radius: 18px;
}

#Strength{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: 400px;
    top: 570px;
    background-color: rgba(239, 83, 80, 0.30);
    border-radius: 18px;
    border: 0 !important;
}

#StrengthITN .lol{
    background-color: rgba(239, 83, 80, 0.30);
    border-radius: 18px;
    border: 0 !important;
}

#Damages{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: 400px;
    top: 460px;
    background-color: rgba(59, 221, 221, 0.30);
    border-radius: 18px;
}

#cd{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: 400px;
    top: 350px;
    background-color: rgba(76, 36, 129, 0.30);
    border-radius: 18px;
}

#chance{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: 400px;
    top: 240px;
    background-color: rgba(159, 168, 218, 0.30);
    border-radius: 18px;
}

#mana{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: 160px;
    top: 250px;
    background-color: rgba(79, 195, 247, 0.30);
    border-radius: 18px;
}

#satk{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: -180px;
    top: 6px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 18px;
}

#spid{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: -260px;
    top: 305px;
    background-color: rgba(255, 255, 255, 0.30);
    border-radius: 18px;
}

#life{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: -260px;
    top: 140px;
    background-color: rgba(239, 83, 80, 0.30);
    border-radius: 18px;
}

#def{
    position: absolute;
    width: 360px;
    height: 36px;
    left: 50%;
    margin-left: -260px;
    top: 195px;
    background-color: rgba(156, 204, 101, 0.30);
    border-radius: 18px;
}

.page-index #search_user{
    transform: translateY(150%);
    transition: transform .15s;
}

.page-index #search_user.show-user-search{
    transform: translateY(0%);
}



#lvldumecITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#StrengthITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    color: rgba(168, 167, 167, 0.76);
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    background-color: transparent;
    border-radius: 18px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

.mdr{

    border-radius: 18px;

}

#DamagesITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#cdITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#chanceITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#manaITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#satkITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#spidITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#lifeITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

#defITN{
    position: absolute;
    top: 0;
    left: 0;
    border: 0 !important;
    background-color: transparent;
    color: white;
    height: 36px;
    width: 360px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
}

::-webkit-input-placeholder { /* Edge */
  color: rgba(255,255,255,0.8);
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgba(255,255,255,0.8);
}

::placeholder {
  color: rgba(255,255,255,0.8);
}

#btn_search_user{
    display: block;
    position: absolute;
    top: 0;
    left: 300px;
    height: 36px;
    width: 60px;
    border-radius: 18px;
    background-color: rgba(0,0,0,0.15);
    cursor: pointer;
    background-image: url(../img/icons/magnify.png);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background-color .1s;
}

#btn_search_user:hover{
    background-color: rgba(0,0,0,0.07);
}

#top_navigation .tab.soon span::after{
    content: "SOON";
    background-color: rgba(255,255,255,0.7);
    border-radius: 999px;
    color: #A6145D;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
    margin-left: 5px;
    vertical-align: top;
}

#top_navigation .tab.active{
    background-color: rgba(0,0,0,0.1);
    cursor: default;
}

#bg_blur{
    background: url(../img/slayerhubblur.webp?v2) no-repeat center center fixed;
    background-size: cover;
    position: fixed;
    left: 30vw;
    top: 35px;
    right: 0;
    bottom: 0;
    background-color: rgb(20,20,20);
}

html.no-webp #bg_blur{
    background-image: url(../img/slayerhubblur.png?v2)
}

#wrapper{
    position: absolute;
    left: 100px;
    top: 45px;
    right: 100px;
    padding-bottom: 30px;
    min-height: 100%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

#dragimg1{

    margin-left: 75px;
    margin-top: 75px;
}

#dragimg2{

    margin-left: 75px;
    margin-top: 0px;
}

#dragsup{

    margin-left: 50px;
    margin-top: 50px;
}

#dragprot{

    margin-left: 50px;
    margin-top: 50px;
}

#dragold{

    margin-left: 50px;
    margin-top: 50px;
}

#dragyoung{

    margin-left: 50px;
    margin-top: 50px;
}

#dragwize{

    margin-left: 50px;
    margin-top: 50px;
}

#dragunstable{

    margin-left: 50px;
    margin-top: 50px;
}

#dragstrong{

    margin-left: 50px;
    margin-top: 50px;
}

#dragbase{

    margin-left: 50px;
    margin-top: 50px;
}

#dragbasestats{

    margin-left: 50px;
    margin-top: 50px;
}

#base_stats_container{
    width: 2600px;
}

#base_stats_container, #skill_levels_container{
    display: inline-block;
}

#show_skills{
    display: none;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 1000px;
    background-color: rgba(255,255,255,0.1);
    cursor: pointer;
}

#skill_levels_container{
    width: calc(70vw - 360px);
    vertical-align: top;
    margin-top: -18px;
}

#skill_levels_container .no-access{
    width: calc(70vw - 400px);
    margin-top: 20px;
    font-weight: 500;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}

.skill{
    width: calc((70vw - 260px) / 2 - 60px);
    display: inline-block;
    position: relative;
    height: 36px;
}

#other_skills{
    display: inline;
}

#other_skills .skill:first-child{
    margin-top: 18px;
}

.skill-icon{
    width: 36px;
    height: 36px;
    background-color: #A6145D;
    border-radius: 50%;
    position: relative;
    z-index: 10;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
}

.skill.maxed-skill .skill-icon{
    background-color: #DD980E;
}

.skill-icon > .item-icon{
    position: absolute;
    top: 5px;
    left: 5px;
    transform: scale(0.2);
    transform-origin: top left;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
}

.skill-name{
    position: absolute;
    left: 40px;
    top: 0;
    font-weight: 600;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
}

.skill-level{
    color: rgba(255,255,255,0.8);
}

.skill-bar::before{
    content: "";
    position: absolute;
    top: 0;
    left: -18px;
    width: 18px;
    bottom: 0;
    background-color: #850f4a;
}

.skill.maxed-skill .skill-bar::before{
    background-color: #CE8F12;
}

.skill-bar{
    position: absolute;
    bottom: 0;
    left: 36px;
    right: 30px;
    height: 14px;
    background-color: rgba(255,255,255,0.3);
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.skill-progress-bar{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #850f4a;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}

.skill.maxed-skill .skill-progress-bar, .slayer-bar.maxed-slayer .skill-progress-bar{
    background-color: #CE8F12;
}

.skill-progress-text{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

#skin_display{
    position: fixed;
    top: 20vh;
    left: 0;
    width: 30vw;
    bottom: 5vh;
}

#player_model{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

#player_model canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

#player_model canvas:focus{
    outline: 0 !important;
}

#info_box{
    position: fixed;
    left: 20px;
    width: calc(30vw - 40px);
    top: 48px;
    z-index: 1;
    background-color: rgba(30, 30, 30, 0.95);
    padding: 30px;
    padding-top: 45px;
    box-sizing: border-box;
    transform: translateY(-100%);
    transition: transform .3s;
    z-index: 100;
    max-height: calc(100vh - 48px - 30px);
    overflow-y: auto;
}

html.no-transform #info_box{
    top: -100%;
}

#info_box.info-opened{
    transform: translateY(0%);
}

html.no-transform #info_box.opened{
    top: 45px;
}

#info_close{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-image: url(../img/icons/window-close.png);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0);
    transition: background-color .1s;
    border-radius: 5px;
}

#info_close:hover{
    background-color: rgba(255,255,255,0.2);
}

#info_box a{
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.link{
    position: relative;
    padding-left: 23px;
}

.link::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 21px;
    height: 100%;
    background-size: auto 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.link-twitter::before{
    background-image: url(../img/icons/twitter.png);
}

.link-github::before{
    background-image: url(../img/icons/github.png);
}

.link-patreon::before{
    background-image: url(../img/icons/patreon.png);
}

.link-kofi::before{
    background-image: url(../img/icons/kofi.png);
}

.link-paypal::before{
    background-image: url(../img/icons/paypal.png);
}

.link-discord::before{
    background-image: url(../img/icons/discord.png);
}

#info_box .name{
    color: rgba(255,255,255,0.7);
}

#info_box .patron{
    font-weight: 500;
}

#stats_content{
    position: absolute;
    right: calc(70vw + 20px);
    background-color: rgba(15,15,15,0.9);
    text-align: center;
    width: 360px;
    max-width: calc(30vw - 20px);
    z-index: 100;
    opacity: 0;
    transform: translateX(-25px);
    pointer-events: none;
    transition: visibility .2s, opacity .2s, transform .2s, left .1s;
    visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

#stats_content_helmet{
    position: absolute;
    right: calc(70vw + 20px);
    background-color: rgba(15,15,15,0.9);
    text-align: center;
    width: 500px;
    max-width: calc(30vw - 20px);
    z-index: 100;
    opacity: 0;
    transform: translateX(-25px);
    pointer-events: none;
    transition: visibility .2s, opacity .2s, transform .2s, left .1s;
    visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

#stats_content_chestplate{
    position: absolute;
    right: calc(70vw + 20px);
    background-color: rgba(15,15,15,0.9);
    text-align: center;
    width: 500px;
    max-width: calc(30vw - 20px);
    z-index: 100;
    opacity: 0;
    transform: translateX(-25px);
    pointer-events: none;
    transition: visibility .2s, opacity .2s, transform .2s, left .1s;
    visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

#stats_content_leggings{
    position: absolute;
    right: calc(70vw + 20px);
    background-color: rgba(15,15,15,0.9);
    text-align: center;
    width: 500px;
    max-width: calc(30vw - 20px);
    z-index: 100;
    opacity: 0;
    transform: translateX(-25px);
    pointer-events: none;
    transition: visibility .2s, opacity .2s, transform .2s, left .1s;
    visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

#stats_content_boots{
    position: absolute;
    right: calc(70vw + 20px);
    background-color: rgba(15,15,15,0.9);
    text-align: center;
    width: 500px;
    max-width: calc(30vw - 20px);
    z-index: 100;
    opacity: 0;
    transform: translateX(-25px);
    pointer-events: none;
    transition: visibility .2s, opacity .2s, transform .2s, left .1s;
    visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

#stats_content .item-lore{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    font-size: 15px;
}

#stats_content_helmet .item-lore{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    font-size: 15px;
}

#stats_content_chestplate .item-lore{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    font-size: 15px;
}

#stats_content_leggings .item-lore{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    font-size: 15px;
}

#stats_content_boots .item-lore{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    font-size: 15px;
}

#stats_content .item-lore a{
    text-decoration: none;
}

#stats_content_helmet .item-lore a{
    text-decoration: none;
}

#stats_content_chestplate .item-lore a{
    text-decoration: none;
}

#stats_content_leggings .item-lore a{
    text-decoration: none;
}

#stats_content_boots .item-lore a{
    text-decoration: none;
}

#stats_content .item-lore::-webkit-scrollbar {
    width: 10px;
}

#stats_content_helmet .item-lore::-webkit-scrollbar {
    width: 10px;
}

#stats_content_leggings .item-lore::-webkit-scrollbar {
    width: 10px;
}

#stats_content_chestplate .item-lore::-webkit-scrollbar {
    width: 10px;
}

#stats_content_boots .item-lore::-webkit-scrollbar {
    width: 10px;
}

#stats_content .item-lore::-webkit-scrollbar-thumb{
    border-radius: 5px;
}

#stats_content_helmet .item-lore::-webkit-scrollbar-thumb{
    border-radius: 5px;
}

#stats_content_chestplate .item-lore::-webkit-scrollbar-thumb{
    border-radius: 5px;
}

#stats_content_leggings .item-lore::-webkit-scrollbar-thumb{
    border-radius: 5px;
}

#stats_content_boots .item-lore::-webkit-scrollbar-thumb{
    border-radius: 5px;
}

#stats_content .item-lore::-webkit-scrollbar-track{
    background-color: transparent;
}

#stats_content_helmet .item-lore::-webkit-scrollbar-track{
    background-color: transparent;
}

#stats_content_chestplate .item-lore::-webkit-scrollbar-track{
    background-color: transparent;
}

#stats_content_leggings .item-lore::-webkit-scrollbar-track{
    background-color: transparent;
}

#stats_content_boots .item-lore::-webkit-scrollbar-track{
    background-color: transparent;
}

#stats_content.show-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

#stats_content_helmet.show-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

#stats_content_chestplate.show-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

#stats_content_leggings.show-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

#stats_content_boots.show-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
}

#stats_content.sticky-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
    pointer-events: auto;
    cursor: auto;
    user-select: text;
    z-index: 8001;
}

#stats_content_helmet.sticky-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
    pointer-events: auto;
    cursor: auto;
    user-select: text;
    z-index: 8001;
}

#stats_content_chestplate.sticky-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
    pointer-events: auto;
    cursor: auto;
    user-select: text;
    z-index: 8001;
}

#stats_content_leggings.sticky-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
    pointer-events: auto;
    cursor: auto;
    user-select: text;
    z-index: 8001;
}

#stats_content_boots.sticky-stats{
    opacity: 1;
    transform: translateX(0px);
    visibility: visible;
    pointer-events: auto;
    cursor: auto;
    user-select: text;
    z-index: 8001;
}

.sticky-stats{
    z-index: 8000;
}

#stats_content .stats-piece-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    transform: scale(0.25) translateY(-50%);
    transform-origin: top left;
}

#stats_content_helmet .stats-piece-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    transform: scale(0.25) translateY(-50%);
    transform-origin: top left;
}

#stats_content_chestplate .stats-piece-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    transform: scale(0.25) translateY(-50%);
    transform-origin: top left;
}

#stats_content_leggings .stats-piece-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    transform: scale(0.25) translateY(-50%);
    transform-origin: top left;
}

#stats_content_boots .stats-piece-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    transform: scale(0.25) translateY(-50%);
    transform-origin: top left;
}

#stats_content .close-lore{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    background-image: url(../img/icons/window-close.png);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    visibility: hidden;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
    cursor: pointer;
}

#stats_content_helmet .close-lore{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    background-image: url(../img/icons/window-close.png);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    visibility: hidden;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
    cursor: pointer;
}

#stats_content_chestplate .close-lore{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    background-image: url(../img/icons/window-close.png);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    visibility: hidden;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
    cursor: pointer;
}

#stats_content_leggings .close-lore{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    background-image: url(../img/icons/window-close.png);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    visibility: hidden;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
    cursor: pointer;
}

#stats_content_boots .close-lore{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 44px;
    background-image: url(../img/icons/window-close.png);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    visibility: hidden;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
    cursor: pointer;
}

#stats_content .item-name{
    position: relative;
    text-align: center;
    padding: 20px;
    padding-left: 60px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

#stats_content_helmet .item-name{
    position: relative;
    text-align: center;
    padding: 20px;
    padding-left: 60px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

#stats_content_chestplate .item-name{
    position: relative;
    text-align: center;
    padding: 20px;
    padding-left: 60px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

#stats_content_leggings .item-name{
    position: relative;
    text-align: center;
    padding: 20px;
    padding-left: 60px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

#stats_content_boots .item-name{
    position: relative;
    text-align: center;
    padding: 20px;
    padding-left: 60px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

#stats_content .item-lore{
    padding: 25px;
    font-weight: 500;
}

#stats_content_helmet .item-lore{
    padding: 25px;
    font-weight: 500;
}

#stats_content_chestplate .item-lore{
    padding: 25px;
    font-weight: 500;
}

#stats_content_leggings .item-lore{
    padding: 25px;
    font-weight: 500;
}

#stats_content_boots .item-lore{
    padding: 25px;
    font-weight: 500;
}

#stats_content .pack-credit{
    margin-top: 25px;
    position: relative;
    display: inline-block;
    text-align: left;
    padding-left: 42px;
    font-size: 14px;
    margin-bottom: 10px;
}

#stats_content_helmet .pack-credit{
    margin-top: 25px;
    position: relative;
    display: inline-block;
    text-align: left;
    padding-left: 42px;
    font-size: 14px;
    margin-bottom: 10px;
}

#stats_content_chestplate .pack-credit{
    margin-top: 25px;
    position: relative;
    display: inline-block;
    text-align: left;
    padding-left: 42px;
    font-size: 14px;
    margin-bottom: 10px;
}

#stats_content_leggings .pack-credit{
    margin-top: 25px;
    position: relative;
    display: inline-block;
    text-align: left;
    padding-left: 42px;
    font-size: 14px;
    margin-bottom: 10px;
}

#stats_content_boots .pack-credit{
    margin-top: 25px;
    position: relative;
    display: inline-block;
    text-align: left;
    padding-left: 42px;
    font-size: 14px;
    margin-bottom: 10px;
}

#stats_content .pack-icon{
    width: 32px;
    height: 32px;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    position: absolute;
    top: 4px;
    left: 0;
}

#stats_content_helmet .pack-icon{
    width: 32px;
    height: 32px;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    position: absolute;
    top: 4px;
    left: 0;
}

#stats_content_chestplate .pack-icon{
    width: 32px;
    height: 32px;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    position: absolute;
    top: 4px;
    left: 0;
}


#stats_content_leggings .pack-icon{
    width: 32px;
    height: 32px;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    position: absolute;
    top: 4px;
    left: 0;
}


#stats_content_boots .pack-icon{
    width: 32px;
    height: 32px;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    position: absolute;
    top: 4px;
    left: 0;
}


#stats_content .pack-name{
    display: block;
    text-decoration: none;
}

#stats_content_helmet .pack-name{
    display: block;
    text-decoration: none;
}

#stats_content_chestplate .pack-name{
    display: block;
    text-decoration: none;
}

#stats_content_leggings .pack-name{
    display: block;
    text-decoration: none;
}

#stats_content_boots .pack-name{
    display: block;
    text-decoration: none;
}

#stats_content .pack-author{
    color: rgba(255, 255, 255, 0.6);
}

#stats_content_helmet .pack-author{
    color: rgba(255, 255, 255, 0.6);
}

#stats_content_chestplate .pack-author{
    color: rgba(255, 255, 255, 0.6);
}

#stats_content_leggings .pack-author{
    color: rgba(255, 255, 255, 0.6);
}

#stats_content_boots .pack-author{
    color: rgba(255, 255, 255, 0.6);
}

#stats_content .pack-author span{
    color: rgba(255, 255, 255, 0.8);
}

#stats_content_helmet .pack-author span{
    color: rgba(255, 255, 255, 0.8);
}

#stats_content_chestplate .pack-author span{
    color: rgba(255, 255, 255, 0.8);
}

#stats_content_leggings .pack-author span{
    color: rgba(255, 255, 255, 0.8);
}

#stats_content_boots .pack-author span{
    color: rgba(255, 255, 255, 0.8);
}


#player_profile{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_health{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_def{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_str{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_speed{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_chance{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_crit{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_mana{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}

#player_profile_dama{
    font-size: 36px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
}


#stats_for_player, #stats_for_profile{
    position: relative;
    display: inline-block;
    color: white;
    font-weight: 600;
    cursor: pointer;
    background-color: rgba(60,60,60,0.5);
    border-radius: 100px;
    padding: 0 15px;
    height: 54px;
    line-height: 54px;
    vertical-align: middle;
    font-size: 30px;
}

#stats_for_player .emoji{
    vertical-align: middle;
    height: 28px;
    margin-top: -4px;
}

.rank-tag{
    display: inline-block;
    font-size: 18px;
    height: 34px;
    line-height: 34px;
    margin-top: 10px;
    margin-left: -5px;
    overflow: hidden;
    border-radius: 100px;
    vertical-align: top;
    font-weight: 700;
}

.rank-tag .rank-name{
    border-radius: 100px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 0 15px;
}

.rank-tag .rank-plus{
    border-radius: 100px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-right: 8px;
    position: relative;
}

.rank-tag .rank-plus-before{
    position: absolute;
    top: 0;
    left: -7px;
    width: 999px;
    background-color: #D985BC;
    height: 100%;
    transform: skew(-20deg);
}

.rank-tag .rank-plus-text{
    position: relative;
    z-index: 2;
}

.rank-tag div{
    display: inline-block;
}

#other_players, #other_profiles{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background-color: rgba(30, 30, 30, 0.95);
    min-width: 260px;
    clip-path: ellipse(0% 0% at 0% 0%);
    transition: clip-path .3s, visibility .3s;
    visibility: hidden;
    border-radius: 17px;
    overflow: hidden;
}

html.no-clip-path #other_players, html.no-clip-path #other_profiles{
    transition: none !important;
}

#stats_for_player:hover #other_players, #stats_for_profile:hover #other_profiles{
    clip-path: ellipse(200% 200% at 0% 0%);
    visibility: visible;
}

#other_players .goto, #other_profiles .goto{
    display: block;
    color: white;
    text-decoration: none;
    padding: 20px;
    width: 100%;
    background-color: rgba(255,255,255,0);
    transition: background-color .2s;
    box-sizing: border-box;
    min-width: 200px;
}

#other_players .goto:hover, #other_profiles .goto:hover{
    background-color: rgba(255,255,255,0.2);
}

#other_players .goto-last-played, #other_profiles .goto-last-played{
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    line-height: normal;
}

#additional_player_stats{
    font-size: 15px;
    margin-top: 10px;
    position: relative;
}

.additional-player-stat{
    position: relative;
    padding: 0px 12px;
    margin-right: 7px;
    margin-top: 15px;
    height: 29px;
    line-height: 29px;
    box-sizing: border-box;
    background-color: rgba(166, 20, 93, 0.9);
    display: inline-block;
    border-radius: 99999px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: background-color .1s;
    vertical-align: top;
}

.additional-player-stat:hover::after{
    color: rgba(255,255,255,0.9);
}

#reveal_socials{
    width: 29px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    background-image: url(../img/icons/chevron-right.png);
    background-position: center center;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    user-select: none;
}

#reveal_socials.socials-shown{
    background-image: url(../img/icons/chevron-left.png);
}

#reveal_socials::after{
    content: "";
}

#additional_socials{
    display: inline-block;
    transition: max-width .2s;
}

#additional_socials .additional-player-stat:not(#reveal_socials){
    display: none;
}

#additional_socials.socials-shown .additional-player-stat{
    display: inline-block !important;
}

.addition-player-stat::after{
    pointer-events: none;
}

div.additional-player-stat{
    user-select: text !important;
    cursor: default;
}

.additional-player-stat:hover{
    background-color: rgba(166, 20, 93, 1);
}

a.additional-player-stat:hover{
    color: white;
}

.additional-player-stat.external-link{
    padding-right: 35px;
}

.additional-player-stat.external-link::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8px;
    width: 20px;
    background-image: url(../img/icons/open-in-new.png);
    background-position: 0px center;
    background-size: 18px 18px;
    background-repeat: no-repeat;
}

.additional-player-stat.external-icon:not(.external-discord){
    width: 29px;
    padding: 0;
}

.additional-player-stat.external-discord{
    padding-right: 12px;
    padding-left: 30px;
}

.additional-player-stat.external-icon::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    background-position: center center;
    background-size: 18px 18px;
    background-repeat: no-repeat;
}

.additional-player-stat.external-icon.external-discord::after{
    left: 8px;
    right: auto;
    width: 20px;
    background-position: 0px center;
}

.additional-player-stat.copy-text{
    cursor: pointer;
    user-select: none !important;
}

.additional-player-stat.external-twitter::after{
    background-image: url(../img/icons/twitter.png);
}

.additional-player-stat.external-youtube::after{
    background-image: url(../img/icons/youtube.png);
}

.additional-player-stat.external-twitch::after{
    background-image: url(../img/icons/twitch.png);
}

.additional-player-stat.external-instagram::after{
    background-image: url(../img/icons/instagram.png);
}

.additional-player-stat.external-mixer::after{
    background-image: url(../img/icons/mixer.png);
}

.additional-player-stat.external-discord::after{
    background-image: url(../img/icons/discord.png);
}

.additional-player-stat.external-hypixel::after{
    background-image: url(../img/icons/hypixel.png);
}

#basic_stats{
    width: border-box;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.56);
    border-radius: 35px;
}

#basic_stats_health{
    width: 100%;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#basic_stats_def{
    width: border-box;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#basic_stats_str{
    width: 100%;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#basic_stats_speed{
    width: 100%;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#basic_stats_chance{
    width: 100%;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#basic_stats_crit{
    width: 100%;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#basic_stats_mana{
    width: 100%;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#basic_stats_dama{
    width: 100%;
    padding: 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.56);
}

#additional_stats_container{
    margin-top: -25px;
    font-size: 12px;
    font-weight: 600;
    overflow: visible;
    margin-left: 268px;
    width: calc(70vw - 410px);
}

.additional-stat{
    display: inline-block;
    margin-right: 6px;
}

.additional-stat .statname{
    text-transform: uppercase;
}

.stat-name, .stat-value{
    line-height: 1.5;
}

.stat-namel{
    line-height: 1.5;
}

#nav_bar{
    position: absolute;
    width: 100%;
    text-align: center;
    padding-bottom: 6px;
    white-space: nowrap;
}

#nav_bar_background{
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 1;
}

#nav_bar_line{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 2px;
    background-color: #A6145D;
    z-index: 2;
}

#nav_items_container{
    position: relative;
    width: 100%;
    padding-bottom: 6px;
    z-index: 3;
}

#nav_bar.nav-bar-stickied{
    z-index: 25;
    width: auto !important;
    left: 0;
    right: 0;
}

#nav_bar.nav-bar-stickied #nav_bar_background{
    background-color: rgba(20,20,20,0.9);
}

.nav-item{
    display: inline-block;
    cursor: pointer;
    padding: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-left: 8px;
    font-weight: 600;
    transition: background-color .1s, color .1s;
    position: relative;
    color: rgba(255,255,255,0.8);
}

.nav-item:last-child{
    margin-right: 8px;
}

.nav-item.active{
    color: rgba(255,255,255,1);
}

.nav-item::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: 100%;
    background-color: #A6145D;
    border-radius: 4px;
    transition: height .1s, top .1s;
}

.nav-item.active::after{
    height: 8px;
    top: calc(100% - 3px);
}

.nav-item:hover::after{
    height: 8px;
    top: calc(100% - 3px);
}

.grey-text{
    font-weight: bold;
    color: rgba(255,255,255,0.6);
}

.golden-text{
    color: #FDBB3C !important;
}

.stat-name.golden-text, .slayer-section-header.golden-text{
    color: #DD980E !important;
}

.white-text{
    font-weight: bold;
    color: white;
}

.stat-name{
    font-weight: bold;
    color: rgba(255,255,255,0.6);
    text-transform: capitalize;
}

.stat-namel{
    font-weight: bold;
    color: rgba(255,255,255,0.6);
    text-transform: capitalize;
}

.stat-value{
    font-weight: 600;
    margin-left: 2px;
}

.basic-stat{
    background-size: 24px 24px;
    background-repeat: no-repeat;
    padding-left: 28px;
    line-height: 24px;
    margin-top: 1px;
    height: 24px;
    font-weight: 600;
    display: block;
}

.basic-stat [data-tippy-content]::after{
    content: "";
}

.stat-fairy-souls{
    background-image: url(../../head/b96923ad247310007f6ae5d326d847ad53864cf16c3565a181dc8e6b20be2387.png);
    position: absolute;
    margin-top: 25px;
}

.stat-fairy-souls .stat-name{
    color: #e35c95;
}

.stat-health{
    background-image: url(../img/icons/health.png);
}

.stat-health .stat-name, .stat-effective-health .stat-name, .stat-strength .stat-name, .color-health, .color-effective-health, .color-strength{
    color: #EF5350;
}

.stat-defense{
    background-image: url(../img/icons/defense.png);
}

.stat-defense .stat-name, .color-defense{
    color: #66BB6A;
}

.stat-effective-health{
    background-image: url(../img/icons/effective-health.png);
}

.stat-strength{
    background-image: url(../img/icons/strength.png);
}

.stat-speed{
    background-image: url(../img/icons/speed.png);
}

.stat-speed .stat-name, .color-speed{
    color: white;
}

.stat-crit-chance{
    background-image: url(../img/icons/crit-chance.png);
}

.stat-crit-damage{
    background-image: url(../img/icons/crit-damage.png);
}

.stat-crit-chance .stat-name, .stat-crit-damage .stat-name, .color-crit-chance, .color-crit-damage{
    color: #9FA8DA;
}

.stat-intelligence{
    background-image: url(../img/icons/intelligence.png);
}

.stat-intelligence .stat-name, .color-intelligence{
    color: #4FC3F7;
}

.stat-sea-creature-chance{
    background-image: url(../img/icons/sea-creature-chance.png);
}

.stat-sea-creature-chance .stat-name, .color-sea-creature-chance{
    color: #00AAAA;
}

.stat-sea-creature-chance{
    background-image: url(../img/icons/sea-creature-chance.png);
}

.stat-sea-creature-chance .stat-name, .color-sea-creature-chance{
    color: #1CD2D2;
}

.stat-magic-find{
    background-image: url(../img/icons/magic-find.png);
}

.stat-magic-find .stat-name, .color-magic-find{
    color: #1aeeea;
}

.stat-pet-luck{
    background-image: url(../img/icons/pet-luck.png);
}

.stat-pet-luck .stat-name, .color-pet-luck{
    color: #FD64DE;
}

.stat-container{
    margin-top: 35px;
    position: relative;
}

.stat-container:first-child{
    margin-top: 80px;
}

.stat-content{
    padding-left: 30px;
    box-sizing: border-box;
    padding-right: 30px;
    margin-top: 20px;
}

.stat-kills{
    margin-top: -400px;
    margin-left: 550;
}

.info-container-wrapper ~ .stat-kills {
    margin-top: 35px !important;
}

.accessory-list .stat-sub-header{
    margin-bottom: 5px;
}

.accessory-list:nth-of-type(2){
    margin-top: 25px;
}

.accessory-stats{
    margin-bottom: 10px;
}

.accessory-rarity{
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 10px;
}

.inactive-accessory{
    opacity: 0.3;
    transition: opacity .1s;
}

.inactive-accessory:hover{
    opacity: 1;
}

.stat-header{
    height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    font-size: 24px;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
}

.stat-header span{
    border-bottom: 4px solid #A6145D;
}

.info-container{
    background-color: rgba(0,0,0,0.3);
    margin-left: 30px;
    margin-bottom: 0px;
    padding: 20px;
    padding-top: 55px;
    position: relative;
    display: inline-block;
    text-align: center;
    max-width: 500px;
    border-radius: 10px;
    overflow: hidden;
}

.info-container span{
    display: inline-block;
    margin-top: 10px;
    font-weight: 500;
}

.info-header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background-color: #A6145D;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    font-size: 19px;
}

.wardrobe-set{
    vertical-align: top;
    display: inline-block;
    max-height: 90px;
    overflow: hidden;
    transition: max-height .2s;
}

.wardrobe-set:hover, .wardrobe-set.wardrobe-opened{
    max-height: 360px;
}

.wardrobe-set .piece{
    display: block;
}

.piece{
    display: inline-block;
    position: relative;
    width: 75px;
    height: 75px;
    background-color: rgba(0,0,0,0.5);
    vertical-align: top;
    margin-right: 8px;
    margin-top: 12px;
    box-sizing: border-box;
    border-radius: 5px;
    user-select: none;
    cursor: pointer;
    transition: z-index .2s;
}

.piece::after{
    content: "";
    position: absolute;
    width: 75px;
    height: 75px;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 5px;
    transform: translateY(-15px);
    border: 4px solid rgba(255,255,255,0.9);
    opacity: 0;
    transition: transform .2s, opacity .2s;
}

.piece-hover-area{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    transition: background-color .2s;
    border-radius: 5px;
}

.piece-hover-area:hover, .sticky-stats .piece-hover-area{
    background-color: rgba(255,255,255,0.2);
}

.pieces{
    margin-top: -12px;
}

.stat-weapons{
    margin-bottom: -10px;
}

.stat-weapons .piece{
    margin-bottom: 50px;
}

.stat-fishing .piece{
    margin-bottom: 50px;
}

.piece .select-weapon, .piece .select-rod{
    top: calc(100% + 15px);
    position: absolute;
    left: 50%;
    margin-left: -11px;
    width: 22px;
    height: 22px;
    border: 3px solid white;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s;
}

.piece .select-weapon:hover, .piece .select-rod:hover{
    background-color: rgba(255,255,255,0.1);
}

.piece-selected .select-weapon, .piece-selected .select-rod{
    background-color: white !important;
}

.piece-shine{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    opacity: 0.7;
    border-radius: 5px;
}

.piece-shine::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: translateY(-100%);
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%);
    background: -moz-linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%);
    z-index: 10;
    animation: shine 3s infinite;
}

@keyframes shine {
	0% {
        transform: translateY(100%);
    }

    33% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(-100%);
    }
}

.piece:focus{
    outline: 0 !important;
}

.piece.sticky-stats::after, .piece:focus::after{
    opacity: 1;
    transform: translateY(0px);
}

.piece-icon{
    position: absolute;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    z-index: 15;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center center;
}

.enchanted-overlay{
    transform-origin: center;
    transform: translate(-50%, -50%) scale(0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
}

.custom-icon{
    background-repeat: no-repeat;
    background-position: center center !important;
}

.piece-special-bg{
    background-color: #D762D7;
}

.piece-legendary-bg{
    background-color: #DD980E;
}

.piece-legendary-bg + .item-lore::-webkit-scrollbar-thumb{
    background-color: #DD980E;
}

.piece-epic-bg{
    background-color: #AA00AA;
}

.piece-epic-bg + .item-lore::-webkit-scrollbar-thumb{
    background-color: #AA00AA;
}

.piece-rare-bg{
    background-color: #5555FF;
}

.piece-rare-bg + .item-lore::-webkit-scrollbar-thumb{
    background-color: #5555FF;
}

.piece-uncommon-bg{
    background-color: #3cbd3c;
}

.piece-uncommon-bg + .item-lore::-webkit-scrollbar-thumb{
    background-color: #3cbd3c;
}

.piece-common-bg{
    background-color: #555555;
}

.piece-common-bg + .item-lore::-webkit-scrollbar-thumb{
    background-color: #555555;
}

.piece-special-fg{
    color: #D762D7 !important;
}

.piece-legendary-fg{
    color: #F9B837 !important;
}

.piece-epic-fg{
    color: #F23EF2 !important;
}

.piece-rare-fg{
    color: #7373E6 !important;
}

.piece-uncommon-fg{
    color: #61df61 !important;
}

.piece-common-fg{
    color: white !important;
}

.stat-sub-header{
    font-weight: 500;
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}

.stat-sub-header::after{
    content: "";
}

.sub-extendable{
    max-height: 50px;
    overflow: hidden;
}

.sub-extendable .stat-sub-header{
    cursor: pointer;
    transition: color .2s;
}

.sub-extendable .stat-sub-header:hover, .sub-extended .stat-sub-header{
    color: rgba(255,255,255,1);
}

.sub-extendable .stat-sub-header::before{
    content: "";
    width: 24px;
    height: 24px;
    background-image: url(../img/icons/chevron-down.png);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
}

.sub-extendable.sub-extended .stat-sub-header::before{
    background-image: url(../img/icons/chevron-up.png);
}

.sub-extendable.sub-extended{
    max-height: none;
}

.stat-raw-values{
    margin-top: 10px;
    margin-bottom: 20px;
}

.active-pet-info{
    display: inline-block;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 500;
}

.piece.other-pet{
    margin-bottom: 25px;
}

.active-pet-info div{
    margin: 4px;
}

.pet-name{
    text-transform: capitalize;
    font-weight: 700;
}

.other-pet-level{
    position: absolute;
    top: calc(100% + 5px);
    width: 100%;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 15px;
}

.missing-pet{
    background-color: #555555;
    transition: background-color .2s;
}

.missing-pet .piece-icon{
    filter: saturate(0%);
    transition: filter .2s;
}

.missing-pet:hover, .missing-pet.sticky-stats{
    background-color: #DD980E;
}

.missing-pet:hover .piece-icon, .missing-pet.sticky-stats .piece-icon{
    filter: saturate(100%);
}

#inventory_container{
    display: inline-block;
    background-color: rgba(0,0,0,0.3);
    padding: 20px;
    position: relative;
    margin-bottom: 0px;
    overflow: hidden;
    border-radius: 10px;
}

#inventory_header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
}

.inventory-header-line{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: #A6145D;
    z-index: 2;
}

#inventory_header .inventory-tabs-container{
    position: relative;
    width: 100%;
    height: 100%;
}

#inventory_header .inventory-tab{
    position: relative;
    display: inline-block;
    height: 100%;
    padding-right: 10px;
    margin-left: 5px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .1s;
    cursor: pointer;
    vertical-align: top;
    color: rgba(255,255,255,0.8);
}

#inventory_header .inventory-tab:first-child{
    margin-left: 10px;
}

#inventory_header .inventory-tab::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: 100%;
    background-color: #A6145D;
    border-radius: 4px;
    transition: height .1s, top .1s;
}

#inventory_header .inventory-tab.active-inventory{
    cursor: default;
    color: rgba(255,255,255,1);
}

#inventory_header .inventory-tab.active-inventory::after, #inventory_header .inventory-tab:hover::after{
    height: 8px;
    top: calc(100% - 3px);
}

#inventory_header .inventory-tab-icon{
    position: absolute;
    left: 3px;
    top: 50%;
    display: inline-block;
    transform: scale(0.25) translateY(-50%);
    transform-origin: top left;
}

#inventory_header .inventory-tab .inventory-tab-name{
    display: inline-block;
    vertical-align: middle;
    margin-left: 38px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -2px;
}

.inventory-view{
    margin-top: 50px;
    white-space: nowrap;
    overflow: hidden;
}

.inventory-view.current-inventory{
    visibility: visible;
}

.inventory-slot{
    width: 70px;
    height: 70px;
    display: inline-block;
    position: relative;
    background-color: rgba(255, 255, 255, 0.04);
    margin: 1px;
    border-radius: 5px;
}

.backpack-contents{
    white-space: nowrap;
    position: relative;
    margin-bottom: 5px;
}

.backpack-contents.contains-backpack{
    min-height: 60px;
}

.view-backpack{
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: -10px;
    opacity: 0;
    background-color: rgba(0,0,0,0.4);
    color: white;
    transition: opacity .2s;
    cursor: pointer;
    z-index: 1000;
    font-size: 22px;
    font-weight: 500;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.6);
}

.backpack-contents:hover .view-backpack{
    opacity: 1;
}

.view-backpack span:nth-child(3){
    font-size: 11.5px;
}

.view-backpack div{
    left: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.inventory-slot.backpack-slot{
    width: 34px;
    height: 34px;
    margin: 0;
}

.backpack-slot .piece-icon{
    transform: translate(-50%, -50%) scale(0.25);
}

.backpack-slot .inventory-item .item-count{
    font-size: 15px;
}

.inventory-view .inventory-slot .inventory-item{
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
}

.inventory-item .item-count{
    position: absolute;
    z-index: 15;
    bottom: 2px;
    right: 2px;
    font-size: 24px;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
    font-weight: 600;
}

.external-app{
    display: block;
    text-decoration: none;
    padding: 15px;
    padding-left: 70px;
    position: relative;
    max-width: 380px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 15px;
    opacity: 0.9;
    transition: opacity .1s;
}

.external-app:hover{
    opacity: 1;
}

.external-app-name{
    font-weight: 600;
    color: #F94EA3;
}

.external-app-name .grey-text{
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

.external-app-description{
    margin-top: 5px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}

.external-app-icon{
    width: 70px;
    height: 100%;
    background-size: 48px auto;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.icon-google-sheets{
    background-image: url(../img/icons/google-sheets.png);
}

.narrow-info-container{
    position: relative;
    min-width: 330px;
    padding: 20px;
    padding-top: 50px;
    display: inline-block;
    background-color: rgba(0,0,0,0.3);
    vertical-align: top;
    border-radius: 10px;
    overflow: hidden;
}

.narrow-info-container:not(:first-of-type){
    margin-left: 20px;
}

.stat-slayer .narrow-info-container{
    min-width: 270px;
    padding-bottom: 30px;
}

.slayer-containers{
    white-space: nowrap;
}

.slayer-header{
    text-align: center;
    vertical-align: middle;
    position: relative;
    height: 32px;
    font-weight: 600;
    margin-bottom: 15px;
}

.slayer-icon{
    width: 32px;
    height: 32px;
    margin-right: 10px;
    display: inline-block;
    background-size: 32px auto;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

.slayer-section-header:not(:nth-child(2)){
    margin-top: 25px;
}

.slayer-section-header{
    text-align: center;
    font-weight: 600;
    text-transform: capitalize;
    color: rgba(255,255,255,0.8);
}

.slayer-kills{
    display: flex;
}

.slayer-kill{
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;
}

.slayer-unclaimed{
    color: #F03C96;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 5px;
    height: 20px;
    line-height: 20px;
}

.tier-name{
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    font-weight: 700;
    font-size: 15px;
}

.tier-kills{
    font-weight: 600;
}

.slayer-drops{
    margin-top: 10px;
    height: 160px;
    display: flex;
    flex-direction: column;
}

.slayer-drop{
    position: relative;
    padding-left: 36px;
    box-sizing: border-box;
    line-height: 2.5;
    height: 40px;
}

.slayer-drop .stat-value{
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.slayer-drop-icon{
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
    transform: scale(0.25) translateY(-50%);
    transform-origin: top left;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
}

.slayer-bar{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 14px;
    background-color: rgba(255,255,255,0.3);
}

.slayer-progress-bar{
    border-radius: 0 !important;
}

.sea-creatures{

    border-radius: 0 !important;
}

.sea-creature{
    display: inline-block;
    width: 140px;
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    height: 230px;
}

.sea-creature-name{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    line-height: 1.2;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom: 2px solid #951354;
    background-color: rgba(0,0,0,0.2);
}

.sea-creature-name span{
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
}

.sea-creature-image{
    position: absolute;
    top: 70px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.sea-creature-kills{
    position: absolute;
    top: 195px;
    height: 40px;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 4px;
}

.minion-category-header{
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 15px;
    margin-top: 15px;
    height: 32px;
    line-height: 32px;
}

.category-header-maxed{
    font-size: 15px;
    color: #FDBB3C;
}

.category-header-detail{
    font-size: 17px;
    color: rgba(255,255,255,0.8);
}

.minion-category-icon{
    width: 32px;
    height: 32px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.minion-category-icon .item-icon{
    transform: scale(0.25);
    transform-origin: top left;
}

.minion{
    position: relative;
    display: inline-block;
    height: 40px;
    padding: 10px;
    padding-left: 60px;
    margin-left: 5px;
    margin-bottom: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    line-height: 40px;
}

.minion:not(.skipped-minion)::after{
    content: "";
}

.minion-icon{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.max-minion .stat-name{
    color: #DD980E;
}

.max-minion .stat-value{
    color: #FDBB3C;
}

.minion-variant{
    display: inline-block;
    color: rgba(255,255,255,0.7);
}

.minion-variant:not(:first-child){
    margin-left: 4px;
}

.minion-variant.minion-crafted{
    color: #f5429b;
}

.collection{
    display: inline-block;
    padding: 7px;
    padding-right: 15px;
    margin-left: 5px;
    margin-bottom: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.collection::after{
    content: "";
}

.collection-icon{
    width: 42px;
    height: 42px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.collection-stats{
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

.collection-name{
    font-size: 18px;
}

.collection-amount{
    font-size: 14px;
}

.collection-icon .item-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.328125);
    transform-origin: center center;
}

.narrow-info-header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    line-height: 35px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.3);
    border-bottom: 2px solid #951354;
    background-color: rgba(0,0,0,0.2);
}

.kill-stat{
    position: relative;
    margin-top: 5px;
}

.kill-stat div{
    display: inline-block;
    font-weight: 600;
}

.kill-rank{
    width: 36px;
    font-weight: 600;
    text-align: right;
    color: rgba(255,255,255,0.7);
}

.all-shown .kill-rank{
    width: 46px;
}

.stat-separator{
    color: rgba(255,255,255,0.7);
}

.kill-amount{
    color: rgba(255,255,255,0.7);
}

.kills-deaths-container .show-all{
    text-align: center;
    padding: 5px 0px;
    font-weight: 600;
    text-transform: capitalize;
    color: #F03C96;
    margin-top: 12px;
    opacity: 0;
}

.kills-deaths-container .show-all.enabled{
    opacity: 1;
    cursor: pointer;
}

.narrow-info-content{
    padding: 20px;
    margin-top: 37px;
    box-sizing: border-box;
    scrollbar-color: #951354 transparent;
}

.narrow-info-content.all-shown{
    overflow-y: scroll;
}

.narrow-info-content.all-shown{
    padding-bottom: 0;
}

.narrow-info-content.all-shown .kill-stat:last-child{
    margin-bottom: 35px;
}

.narrow-info-content::-webkit-scrollbar{
    width: 10px;
}

.narrow-info-content::-webkit-scrollbar-thumb{
    background-color: #951354;
    border-radius: 5px;
}

.narrow-info-content::-webkit-scrollbar-track{
    background-color: transparent;
}

.stat-kills .narrow-info-container{
    padding: 0;
    padding-top: 0;
}

#enter_player_box_wrapper{
    position: relative;
    margin: 0 auto;
    margin-top: calc(50vh - 130px);
    width: 700px;
    height: 300px;
    background: url(../img/slayerhubblur.webp?v2) no-repeat center center fixed;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgb(10,10,10);
}

#enter_player_box_wrapper p:last-child{
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}

html.no-webp #enter_player_box_wrapper{
    background-image: url(../img/slayerhubblur.png?v2);
}

#enter_player_box{
    text-align: center;
}

#enter_player_box p{
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
}

#enter_player_box input{
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    box-sizing: border-box;
    padding: 15px;
    background-color: rgba(255,255,255,0.1);
    border: 0;
    color: white;
    font-weight: normal;
}

#enter_player_box{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#myChart4{
    top: 650;
    left: 160; 
}

#goto_target_username{
    position: absolute;
    top: 700;
    left: 75;
    border: 0 !important;
    background-color: #a23300b8;
    color: white;
    height: 36px;
    width: 300px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    border-radius: 25px;
}

#goto_target_username2{
    position: absolute;
    top: 700;
    left: 700;
    border: 0 !important;
    background-color: #00a200b8;
    color: white;
    height: 36px;
    width: 300px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    border-radius: 25px;
}

#goto_target_username3{
    position: absolute;
    top: 700;
    left: 1300;
    border: 0 !important;
    background-color: #002ca5b8;
    color: white;
    height: 36px;
    width: 300px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    border-radius: 25px;
}

#goto_target_username4{
    position: absolute;
    top: 3780;
    left: 160;
    border: 0 !important;
    background-color: #ff0000b8;
    color: white;
    height: 36px;
    width: 300px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    border-radius: 25px;
}

#goto_target_username5{
    position: absolute;
    top: 2965;
    left: 160;
    border: 0 !important;
    background-color: #a2009fb8;
    color: white;
    height: 36px;
    width: 300px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    border-radius: 25px;
}

#goto_target_username6{
    position: absolute;
    top: 2965;
    left: 160;
    border: 0 !important;
    background-color: #a2009fb8;
    color: white;
    height: 36px;
    width: 300px;
    padding: 4px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    border-radius: 25px;
}

#Sup{

    color: rgb(255, 198, 13);
}

#prot{

    color: rgb(173, 169, 145);
}

#old{

    color: rgb(180, 143, 74);
}

#wize{

    color: rgb(11, 224, 207);
}

#young{

    color: rgb(115, 245, 115);
}

#unstable{

    color: rgb(155, 0, 202);
}

#strong{

    color: rgb(201, 97, 56);
}

#epic{

    color: rgb(106, 50, 158);
}

#bleu{

    color: rgb(44, 93, 184);
}


#alert{
    text-align: right;
    display: inline-block;
    padding: px;
    padding-left: px;
    padding-right: px;
    background-color: #ec0000;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    margin-top: 62px;
    transition: background-color .2s;
    border-radius: 999px;
    position: absolute;
    left: 50%;
    margin-left: 255px;
    top: -50px;
    border: 0 !important;
}



#goto_target_username:hover{
    background-color: #a2330056;
}

#goto_target_username2:hover{
    background-color: #00a20056;
}

#goto_target_username3:hover{
    background-color: #002ca556;
}

#goto_target_username4:hover{
    background-color: #ff000056;
}

#alert:hover{
    background-color: #ff0000d7;
}

#goto_target_username5:hover{
    background-color: hsla(81, 100%, 50%, 0.678);
}

#goto_target_username6:hover{
    background-color: hsla(81, 100%, 50%, 0.678);
}

#error_box_wrapper{
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    width: 700px;
    background: url(../img/slayerhubblur.webp?v2) no-repeat center center fixed;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    display: none;
}

#top_profiles_box_wrapper{
    position: relative;
    margin-left: 50px;
    margin-top: 20px;
    width: 700px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
}

.top-profile{
    position: relative;
    display: inline-block;
    background: url(../img/slayerhubblur.webp?v2) no-repeat center center fixed;
    background-size: cover;
    width: calc(100% / 2 - 10px);
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity .2s;
}

.top-profile2{
    position: relative;
    display: inline-block;
    background: url(../img/slayerhubblur.webp?v2) no-repeat center center fixed;
    background-size: cover;
    width: calc(70% / 2 - 10px);
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity .2s;
}

.top-profile3{
    position: relative;
    display: inline-block;
    background: url(../img/slayerhubblur.webp?v2) no-repeat center center fixed;
    background-size: cover;
    width: calc(70% / 2 - 10px);
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity .2s;
}

html.no-webp .top-profile{
    background-image: url(../img/slayerhubblur.png?v2);
}

.top-profile:hover{
    opacity: 1;
}

.profile-avatar{
    width: 64px;
    height: 64px;
    border-radius: 5px;
}

.profile-name{
    position: absolute;
    left: 100px;
    top: 32px;
    color: white;
    font-weight: 600;
    font-size: 18px;
}

.profile-name .emoji{
    vertical-align: middle;
    height: 22px;
    margin-left: 5px;
    margin-top: -4px;
}

.profile-views{
    position: absolute;
    left: 100px;
    top: 58px;
    font-weight: 500;
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}

.profile-last-online{
    position: absolute;
    left: 100px;
    top: 58px;
    font-weight: 500;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

.profile-rank{
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}

#error_box_wrapper{
    height: 70px;
}

html.no-webp #error_box_wrapper{
    background-image: url(../img/slayerhubblur.png?v2);
}

#error_box, #top_profiles_box{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#error_box_wrapper.show-error{
    display: block;
}

#error_title{
    font-weight: 600;
    background-color: #A6145D;
    color: white;
    text-transform: uppercase;
    height: 100%;
    line-height: 70px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

#error_text{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 100px);
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 18px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

#dimmer{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 7500;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

#dimmer.show-dimmer{
    visibility: visible;
    opacity: 1;
}

#enable_api{
    position: fixed;
    width: 66vw;
    height: calc(66vw * 9/16);
    left: 50vw;
    margin-left: -33vw;
    top: 50vh;
    margin-top: calc(-1 * ((66vw * 9/16) / 2));
    border-radius: 1%;
    cursor: default;
    z-index: 8500;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

#enable_api.show{
    visibility: visible;
    opacity: 1;
}

#enable_api:focus{
    outline: 0 !important;
}

@media (max-width: 1590px){
    header{
        width: 100%;
    }

    #info_box{
        width: 440px;
    }

    #info_box_content{
        max-height: calc(1120px - 100px);
        overflow-y: auto;
    }

    #additional_stats_container{
        white-space: normal;
        width: calc(1120px -  60px - 268px - 150px);
    }

    #base_stats_container{
        position: relative;
        padding-left: 150px;
    }

    #skill_levels_container{
        width: calc(1120px - 510px);
    }

    #skill_levels_container .no-access{
        width: calc(1120px - 510px);
        font-size: 14px;
    }

    #wrapper, #bg_blur{
        left: 50%;
        width: 1120px;
        margin-left: -560px;
        overflow-x: hidden;
    }

    .skill {
        width: calc((1120px - 410px) / 2 - 60px);
    }

    .external-app{
        margin-left: -10px;
        margin-right: -10px;
    }

    #nav_bar.nav-bar-stickied{
        left: auto;
        right: auto;
        width: 1120px !important;
    }

    #skin_display{
        visibility: hidden;
    }

    #skin_display_mobile{
        position: absolute;
        top: 30px;
        left: 0;
        bottom: 30px;
        width: 110px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
}

@media (max-width: 1200px){
    #info_button{
        vertical-align: top;
        display: inline-block;
        width: 35px;
        height: 48px;
        background-image: url(../img/icons/information.png);
        background-size: 20px 20px;
        position: relative;
        opacity: 0.8;
        cursor: pointer;
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
        padding: 0;
        color: transparent;
        background-color: transparent;
        margin: 0;
        margin-left: -5px;
    }

    #info_box{
        left: 0;
        width: 100vw;
        right: 0;
        max-height: calc(100vh - 45px);
    }

    #wrapper, #bg_blur{
        left: 1000;
        right: 0;
        margin-left: 100px;
        width: 100vw;
        overflow-x: hidden;
    }

    #skill_levels_container .skill{
        width: calc((100vw - 410px) / 2 - 60px);
    }

    #nav_bar.nav-bar-stickied{
        width: 100vw !important;
    }

    .stat-fairy-souls{
        position: relative;
        margin-top: 1px;
    }

    #additional_stats_container{
        margin-top: 25px;
        margin-left: 0;
    }

    #info_button:hover{
        opacity: 1;
        background-color: transparent;
    }

    #player_profile{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_health{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_def{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_str{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_speed{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_chance{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_crit{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_mana{
        font-size: 25px;
        margin: 25px;
    }

    #player_profile_dama{
        font-size: 25px;
        margin: 25px;
    }

    #skin_display_mobile{
        left: 20px;
    }

    #search_user{
        right: 50px;
        left: auto;
    }

    #player_profile .text-stats-for{
        display: none;
    }

    #player_profile_health .text-stats-for{
        display: none;
    }

    #player_profile_def .text-stats-for{
        display: none;
    }

    #player_profile_str .text-stats-for{
        display: none;
    }

    #player_profile_speed .text-stats-for{
        display: none;
    }

    #player_profile_chance .text-stats-for{
        display: none;
    }

    #player_profile_crit .text-stats-for{
        display: none;
    }

    #player_profile_mana .text-stats-for{
        display: none;
    }

    #player_profile_dama .text-stats-for{
        display: none;
    }

    #other_players, #other_profiles{
        font-size: 17px;
    }

    #other_players .goto-last-played, #other_profiles .goto-last-played{
        font-size: 12px;
    }

    #other_players{
        min-width: 190px;
    }

    #enter_player{
        font-size: 13px;
    }

    #other_profiles, stats_for_profile{
        min-width: 130px;
    }

    .stat-inventory .stat-content{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #stats_for_player:focus #other_players, #stats_for_profile:focus #other_profiles {
        clip-path: ellipse(200% 200% at 0% 0%);
    }

    #stats_for_player .goto, #stats_for_profile .goto{
        padding: 10px;
        padding-left: 20px;
    }

    #basic_stats{
        text-align: center;
        padding: 0;
        background-color: transparent;
        margin-left: 100px;
    }

    #basic_stats_health{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }

    #basic_stats_def{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }

    #basic_stats_str{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }

    #basic_stats_speed{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }

    #basic_stats_chance{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }

    #basic_stats_crit{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }

    #basic_stats_mana{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }

    #basic_stats_dama{
        text-align: center;
        padding: 0;
        background-color: transparent;
    }



    #base_stats_container{
        width: 100%;
        text-align: left;
        background-color: rgba(0,0,0,0.3);
        padding: 30px;
        box-sizing: border-box;
        position: relative;
        padding-left: 150px;
    }

    #skill_levels_container{
        margin-top: 0;
    }

    #skill_levels_container .skill{
        width: calc(50vw - 60px);
        margin-left: 12px;
        margin-right: 12px;
    }

    #skill_levels_container .skill-bar{
        right: 0;
    }

    #skill_levels_container{
        width: 100%;
        margin-top: 30px;
        background-color: rgba(0,0,0,0.3);
        padding: 30px;
        box-sizing: border-box;
        padding-bottom: 15px;
    }

    #skill_levels_container .no-access{
        width: 100%;
        text-align: left;
        white-space: normal;
    }

    .info-container-wrapper{
        text-align: center;
    }

    .stat-header{
        width: 100vw;
    }

    .stat-header::before, .stat-header::after{
        display: none;
    }

    .additional-stat{
        display: block;
    }

    .additional-stat:not(:first-child){
        margin-left: 0;
        margin-top: 4px;
    }

    #stats_content{
        left: 50% !important;
        width: 360px;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100% !important;
        transition: opacity .2s, visibility .2s !important;
    }

    #stats_content_helmet{
        left: 50% !important;
        width: 360px;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100% !important;
        transition: opacity .2s, visibility .2s !important;
    }

    #stats_content_chestplate{
        left: 50% !important;
        width: 360px;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100% !important;
        transition: opacity .2s, visibility .2s !important;
    }

    #stats_content_leggings{
        left: 50% !important;
        width: 360px;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100% !important;
        transition: opacity .2s, visibility .2s !important;
    }

    #stats_content_boots{
        left: 50% !important;
        width: 360px;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100% !important;
        transition: opacity .2s, visibility .2s !important;
    }

    #stats_content.show-stats:not(.sticky-stats){
        visibility: hidden;
        opacity: 0;
    }

    #stats_content_helmet.show-stats:not(.sticky-stats){
        visibility: hidden;
        opacity: 0;
    }

    #stats_content_chestplate.show-stats:not(.sticky-stats){
        visibility: hidden;
        opacity: 0;
    }

    #stats_content_leggings.show-stats:not(.sticky-stats){
        visibility: hidden;
        opacity: 0;
    }

    #stats_content_boots.show-stats:not(.sticky-stats){
        visibility: hidden;
        opacity: 0;
    }

    #enable_api{
        width: 100vw;
        left: 0;
        margin-left: 0;
        height: calc(100vw * 9/16);
        margin-top: calc(-1 * ((100vw * 9/16) / 2));
    }

    #inventory_header{
        height: 50px;
        padding-top: 5px;
    }

    #inventory_header .inventory-tab{
        border-radius: 1000px;
        height: 38px;
        margin-left: 10px;
    }

    #inventory_container{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        box-sizing: border-box;
        padding: 0;
        padding-top: 10px;
        border-radius: 0;
    }

    #inventory_header{
        text-align: center;
    }

    #inventory_header .inventory-header-line{
        bottom: 10px;
    }

    .inventory-view{
        text-align: center;
        margin-top: 45px;
    }

    .stat-kills .narrow-info-container{
        min-width: 0;
        width: calc(100vw / 2 - 85px);
    }

    .stat-slayer .narrow-info-container{
        width: calc(100vw / 3 - 85px);
    }

    .slayer-containers{
        overflow-x: auto;
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 40px;
        padding-bottom: 20px;
    }

    .slayer-containers .narrow-info-container:last-child{
        margin-right: 40px;
    }
}

@media (max-width: 900px){
    #nav_items_container{
        overflow-x: scroll;
    }
}

@media (max-width: 800px){
    header > .social-button{
        display: none;
    }

    .slayer-drop .stat-name{
        max-width: calc(100% - 95px);
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        text-overflow: ellipsis;
    }

    .stat-header{
        padding-left: 30px;
    }

    .collections{
        white-space: nowrap;
        overflow-x: auto;
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 30px;
    }

    .collection:last-child{
        margin-right: 30px;
    }

    .nav-item:not(.active):hover::after{
        height: 2px;
        top: 100%;
    }

    .info-container{
        margin-left: 0;
    }

    .inventory-slot{
        width: calc(100vw / 9 - 15px);
        height: calc(100vw / 9 - 15px);
        display: inline-block;
        position: relative;
        margin: 0;
        background-color: rgba(255, 255, 255, 0.04);
    }

    .inventory-slot .piece-icon{
        transform: translate(-50%, -50%) scale(0.25);
    }

    .inventory-slot .enchanted-overlay{
        transform: translate(-50%, -50%) scale(0.25);
    }

    .inventory-item .item-count{
        font-size: 4vw;
    }

    #inventory_header{
        white-space: nowrap;
    }

    #inventory_header .inventory-tabs-container{
        overflow-x: scroll;
    }

    #inventory_header .inventory-tab:last-child{
        margin-right: 20px;
    }

    .sea-creatures{
        white-space: nowrap;
        overflow-x: auto;
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 40px;
    }

    .sea-creature-name{
        white-space: break-spaces;
    }

    .sea-creature:last-child{
        margin-right: 40px;
    }

    .top-deaths{
        margin-left: 0;
        margin-top: 25px;
    }

    .stat-kills .narrow-info-container{
        width: calc(100vw - 60px);
        margin-left: 0 !important;
        margin-top: 20px;
    }
}

@media (max-width: 735px){
    #enter_player_box_wrapper, #error_box_wrapper, #top_profiles_box_wrapper{
        width: calc(100vw - 30px);
    }

    #enter_player_box_wrapper, #error_box_wrapper{
        backdrop-filter: blur(15px);
    }

    #enter_player_box_wrapper{
        height: 235px;
        font-size: 12px;
    }

    #enter_player_box p{
        font-size: 20px;
    }

    #enter_player_box p:last-child{
        font-size: 14px;
    }

    #enter_player_box input{
        font-size: 20px;
    }

    .top-profile{
        width: 100%;
        backdrop-filter: blur(15px);
    }
}

@media (max-width: 580px){
    .blm-logo{
        display: none;
    }

    #search_user{
        width: calc(100% - 210px);
        margin-left: auto;
        right: 10px;
    }

    #inp_search_user{
        width: calc(100% - 60px);
    }

    #btn_search_user{
        left: calc(100% - 60px);
    }
}
@media (max-width: 520px){
    #stats_for_player, #stats_for_profile{
        font-size: 20px;
        height: 46px;
        line-height: 46px;
    }

    #stats_for_player .emoji{
        vertical-align: middle;
        height: 22px;
        margin-top: -3px;
    }

    #stats_for_profile{
        margin-top: 10px;
    }

    .text-on::after{
        content: "\A";
        white-space: pre;
    }

    #error_text{
        font-size: 15px;
    }

    .rank-tag{
        font-size: 14px;
        height: 28px;
        line-height: 28px;
        overflow: hidden;
    }

    .rank-tag .rank-name{
        padding: 0 10px;
    }

    .rank-tag .rank-plus{
        padding-right: 5px;
    }
}

@media (max-width: 480px){
    #show_skills{
        display: block;
    }

    #other_skills{
        max-height: 0;
        overflow: hidden;
        display: block;
    }

    #other_skills.show-skills{
        max-height: 500px;
    }

    #skill_levels_container .skill{
        width: 100%;
        margin: 0;
    }

    #skill_levels_container .skill-bar{
        right: 0;
    }

    .wardrobe-set{
        max-height: calc((100vw - 50px) / 4);
    }

    .wardrobe-set:hover, .wardrobe-set.wardrobe-opened{
        max-height: calc(100vw - 50px);
    }

    .piece{
        width: calc((100vw - 50px) / 4 - 14px);
        height: calc((100vw - 50px) / 4 - 14px);
    }

    .piece::after{
        width: calc((100vw - 50px) / 4 - 14px);
        height: calc((100vw - 50px) / 4 - 14px);
    }

    #stats_content{
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    #stats_content_helmet{
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    #stats_content_chestplate{
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    #stats_content_leggings{
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    #stats_content_boots{
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    #stats_content .close-lore{
        visibility: visible;
    }

    #stats_content_helmet .close-lore{
        visibility: visible;
    }

    #stats_content_chestplate .close-lore{
        visibility: visible;
    }

    #stats_content_leggings .close-lore{
        visibility: visible;
    }

    #stats_content_boots .close-lore{
        visibility: visible;
    }

    #stats_content .item-name{
        padding-right: 60px;
    }

    #stats_content_helmet .item-name{
        padding-right: 60px;
    }

    #stats_content_chestplate .item-name{
        padding-right: 60px;
    }

    #stats_content_leggings .item-name{
        padding-right: 60px;
    }

    #stats_content_boots .item-name{
        padding-right: 60px;
    }

    .inventory-slot{
        width: calc(100vw / 9 - 5px);
        height: calc(100vw / 9 - 5px);
        display: inline-block;
        position: relative;
        background-color: rgba(255, 255, 255, 0.04);
        margin: 0;
    }

    html{
        min-width: 100vw;
        min-height: 100vh;
    }
}

@media (max-width: 400px){
    .inventory-slot.backpack-slot{
        width: calc((100vw - 40px) / 9 - 5px);
        height: calc((100vw - 40px) / 9 - 5px);
    }

    .piece-icon{
        transform: translate(-50%, -50%) scale(0.4);
    }
}

@media (max-width: 380px){
    #search_user{
        width: calc(100% - 180px);
        margin-left: auto;
    }

    .pride-flag{
        width: 20px;
        border-radius: 50%;
        margin-left: 10px;
    }

    .basic-stat{
        font-size: 13.5px;
        line-height: 22px;
        height: 22px;
    }
}

@media (max-width: 350px){
    .piece-icon{
        transform: translate(-50%, -50%) scale(0.35);
    }

    #skin_display_mobile{
        left: 10px;
        height: 190px;
    }

    #base_stats_container{
        padding-left: 30px;
    }

    .basic-stat{
        margin-left: 95px;
        white-space: nowrap;
    }

    #wrapper{
        background-color: rgb(20,20,20);
    }
}