@media (min-width: 768px) {
    :root {
        --l-margin: 5%;
        --w-full: 90%;
        --p-username: 3vh;
    }
}
@media (min-width: 1023px) {
    :root {
        --l-margin: 10%;
        --w-full: 80%;
        --p-username: 3.5vh;
    }
}
@media (min-width: 1440px) {
    :root {
        --l-margin: 10%;
        --w-full: 80%;
        --p-username: 4vh;
    }
}
@media (min-width: 1920px) {
    :root {
        --l-margin: 12.5%;
        --w-full: 75%;
        --p-username: 4.5vh;
    }
}
.pc-menu{position:absolute !important;}
.logo-left .blue {color: var(--c-white) !important;}

.spacer {height: 8vh;}
.profile-banner {
    position:relative;display:block;width:100%;height:40%;
    background-size: cover;background-position: center;z-index: 10;
}
/*.profile-banner::before {
    position:absolute;bottom:0;left:0;width:100%;height:100%;content: "";
    background: linear-gradient(to top, #0F0F0F, rgba(0,0,0,0));
}*/


.profile-wrap {
    position:relative;width: var(--w-full);margin-left: var(--l-margin);margin-top: -5%;z-index: 20;
    padding-bottom: 5%;
}
.profile-left, .profile-right {position:relative;display: inline-block;vertical-align: top;}
.profile-left {width: 20%;}.profile-right {width: 77%;margin-left: 3%;}

.profile-pfp {
    position:relative;display:block;width: calc(100% - 8px);border: solid 4px var(--c-blue);
    overflow: hidden;
}
.pfp-wrap {position:relative;display:block;width:100%;height:100%;overflow: hidden;background-color: black;}
.profile-pfp img {display:block;width:100%;height: 100%;margin: 0;object-fit: cover;}

.profile-badge {
    position:absolute;top:1vh;right:1vh;z-index:400;cursor:pointer;

}
.profile-badge img {
    height: 4vh;width:4vh;
    filter: drop-shadow(0 0 12px rgba(200,200,200,0.7));
}


.title-ribbon {
    position:absolute;bottom:calc(1vh + 15px);left:-24px;padding: 0.5vh 0;
    text-align: center;width: calc(100% + 48px);display:block;
}
.title-ribbon::before {
    left: 0px;bottom:-10px;content: "";position:absolute;
    border-width: 0 20px 10px 0;border-style: solid;
}
.title-ribbon::after {
    right: 0px;bottom:-10px;content: "";position:absolute;
    border-width: 10px 20px 0 0;border-style: solid;
}


.profile-username, .member-since, .followers {
    white-space: nowrap;text-overflow: ellipsis;margin-top: 1vh;
    overflow: hidden;width:100%;text-align: center;
}
.member-since {opacity: 0.6;padding: 0.25vh 0;}

.followers, .following {
    cursor: pointer;width:47.5%;border-radius: 4px;
    padding: 1vh 0;background-color: rgba(50,50,50,0.5);
}
.followers {margin-right: 5%;}
.f-ing {margin-right: 0 !important;}
.f-bg {
    position:fixed;top:0;left:0;width:100%;height:100%;display: none;
    z-index: 995;background-color: rgba(0, 0, 0, 0.4);
}
.followers-box, .following-box {
    position:fixed;top: 50%;left:50%;transform: translate(-50%, -50%);
    min-width: 50%;height: 70%;max-width: 80%;
    background-color: var(--c-dgray);z-index: 996;display: none;
    overflow: hidden;
}
.followers-box a, .following-box a {
    display:block;padding: 0.75vh 0;color: var(--c-white);
    text-decoration: none;
}
.fbox-top {
    padding: 1.5vh 1.5vw 1.35vh 1.5vw;background-color: var(--c-blue);
}
.f-list {
    width: calc(100% - 3vw);padding: 1vh 1.5vw;overflow: auto;display:block;height: 62vh;
}

.p-actions {
    position:relative;display:block;text-align: left;margin-top: 10%;
}
.p-social, .p-follow, .p-social-icon, .p-social-text {position:relative;display: inline-block;vertical-align: middle;}
.phone-follow {display: none;}
.premium-get {margin-right: 1vh;background-color: #DBAD6A;}
.under-name-social {
    margin-bottom: 2vh;display:block;padding: 1vh;width: calc(100% - 2vh);
    background-color: rgba(50,50,50,0.5);border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.under-name-social:hover {background-color: var(--c-blue);}
.platforms-title {margin: 4vh 0 2vh 0;}
.p-social {width: 50%;}.p-follow {width: 50%;text-align: right;}
.p-social-link {
    position:relative;padding: 1vh 1vh;margin-right: 1.5vw;text-decoration: none;
    transition: all 0.2s ease-in-out;border-bottom: solid 3px transparent;
    white-space: nowrap;overflow: hidden;font-family: Minecraft Ten;
}
.p-social-icon {height: 3.5vh;}
.p-youtube img {height: 4vh;}
.p-social-text {opacity:0;width: 0;transition: all 0.2s ease-in-out;font-size: 2.5vh;}
.un-social-text {cursor:pointer;font-size: 2vh;position:relative;display: inline-block;vertical-align: middle;margin-left: 2vh;}
.un-minecraft img {border-radius: 2px;}
.mc-pfp {
    height: 3.5vh;width: 3.5vh;
}


.p-social-icon:hover ~ .p-social-text {width: auto;margin-left: 1vh;opacity: 1;}

.p-youtube:hover, .p-youtube .p-social-text {color: #FF0000 !important;}
.p-instagram:hover, .p-instagram .p-social-text {color: #bc2a8d !important;}
.p-twitter:hover, .p-twitter .p-social-text {color: #1DA1F2 !important;}
.p-tiktok:hover, .p-tiktok .p-social-text {color: #FF004F !important;}
.p-twitch:hover, .p-twitch .p-social-text {color: #6441a5 !important;}

.button font {margin-top: -0.25vh;}
.profile-feed {
    margin: 5% 0 10vh 0;width:100%;display:block;
}
.profile-feed h3 {margin-bottom: 4vh;}
.side-links {
    display:inline-block;vertical-align: middle;margin-right: 4vh;
    cursor:pointer;transition: all 0.2s ease-in-out;position:relative;
}
.side-links:hover {color: var(--c-blue);}

.feed-section, .packs-section, .user-settings {width:100%;}
.feed-section {display: none;}
.pack-file.banner-file {height: 13.5vh;}
.pack-gallery.pack-b-gallery {height: 13.5vh;}
input[type="file"] {opacity: 0;}
input[type="submit"] {width:100%;}


.user-settings {display: none;}
.hiddensettings {display: none;}

.social-img {
    display: inline-block;width: 4vh;margin-right: 2vh;vertical-align: middle;
}
.input-field .social-input {
    width: calc(100% - 14vh);vertical-align: middle;display: inline-block;
}
.social-radio {
    width: 6vh;margin-left: 2vh;vertical-align: middle;display: inline-block;
    position:relative;height: 6vh;cursor: pointer;
}
.social-radio input {cursor: pointer;width:6vh !important;margin:0 !important;padding:0 !important;height:6vh !important;}
.selected-radio-social::before {
    top: 16%;left:16%;position:absolute;content:"";
    width: 70%;height:70%;background-image: url(../assets/icons/checkmark.png);
    background-size: 100% 100%;z-index: 10;
}




.box-ov {
    position:fixed;top:0;left:0;width:100%;height:100%;z-index:995;display: none;
}
.box-ov-bg {
    position:absolute;top:0;left:0;width:100%;height:100%;background-color: var(--c-bg);
    opacity: 0.5;z-index: 1;
}
.box-ov-mid {
    position:absolute;top:50%;left:50%;min-width:50%;max-width:80%;
    transform: translate(-50%, -50%);padding: 2vw;background-color: var(--c-switch2);
    text-align: left;z-index: 2;max-height: 80%;
}
.box-ov-mid .h-pad {line-height: 1.5;}

.pc-profile {}
.phone-profile, .phone-followers {display: none;}


.level-display {
    position:absolute;top:50%;left: 35%;width: 30%;
    text-align: center;transform: translateY(-50%);
}
.level-display:hover .tooltip {bottom: 100% !important;}
.level-box {
    position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
}
.xp-bar {
    height:10vw;width:10vw;display:block;
    border-radius:100%;
}
.progress-circle {
    transform: rotate(-90deg);
}
.progress-circle-back {
	fill: none; 
	stroke: var(--c-white);
	stroke-width:8px;
}
.progress-circle-prog {
	fill: none; 
	stroke: var(--c-blue);
	stroke-width: 9px;
	stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s ease-in-out 0.25s;
    filter: drop-shadow( 0 0 3px var(--c-blue));
}
.progress-circle-prog {
    transition: all 0.7s ease-in-out;
}



.switch-order, .grid-switch {
    display: inline-block;vertical-align: middle;position:relative;
    margin-right: 1vw;cursor: pointer;transition: color 0.2s ease-in-out;
}
.grid-switch {margin-right: 0 !important;margin-left: 1vw;line-height:0.8;}
.switch-order:hover, .grid-switch:hover {color: var(--c-blue);}
.pending-order, .pending-grid-order {position:relative;display:inline-block;vertical-align: middle;width:50%;}
.pending-grid-order {text-align: right;}
.pend-pack-grid .grid-text {text-shadow: 0 0 1px black;}

.close-settings {margin-bottom: 2vh !important;}
.form-sep-or {margin: 2vh 0 !important;text-align: center !important;}
.close-settings-b {display:block;}
.close-settings-a {}

@media (max-width: 980px) and (orientation: portrait) {
    .form-sep-or {margin: 4vw 0 !important;}
    .close-settings {margin-bottom: 4vw !important;}
    .feed-section, .packs-section, .user-settings {width:90%;margin-left: 5%;}
    .profile-banner {display: none;}
    .profile-wrap {width: 100%;margin-left: 0%;margin-top: 0%;}
    .profile-left, .profile-right {position:relative;display: block;width: 100%;margin: 0 !important;}
    .profile-pfp {width: 100%;margin-left: 0%;border: none;}
    .profile-pic-p {background-color: var(--c-bg);}
    .profile-pic-p::before {
        position:absolute;bottom:-2px;left:0;width:100%;height:calc(60% + 2px);z-index: 1;content:"";
        background: linear-gradient(to top, var(--c-switch2), rgba(0,0,0,0));
    }
    .p-actions {margin-top: 5%;}
    .p-social {display:block;width:90%;margin-top: 10vw;margin-left: 5%;}
    .pc-follow {display: none;}
    .phone-follow {display:block;text-align: right;width: 100% !important;margin-top: 5%;}
    .phone-follow .button {width: 70%;}
    .settings, .premium-get {background-color: transparent !important;width: auto !important;}
    .settings img, .premium-get img {margin: 0 !important;padding: 1vh !important;}
    .premium-get {margin-right: 0 !important;}
    .phone-follow .button font {margin-top: -0.25vh;}
    .p-social-link {margin: 0 2vw !important;padding: 1.5vw 3vw;}.p-social-text {display: none;}
    .p-social-link:first-child {margin-left: 0 !important;padding-left: 0;}

    .profile-feed {margin-top: 8vh;}
    .follow {padding: 1.15vh 2.5vh 1vh 2.5vh;}
    .side-links {
        padding: 1vh 1vh 1vh 0.15vh;background-color: transparent;margin-left: 5%;text-align:left;
    }
    .side-links.blue {color: var(--c-switch);background-color: transparent;}
    .profile-feed h3 {margin-bottom: 0;}


    .pc-profile {display: none;}
    .phone-profile {display:block;}
    .phone-followers {
        display:inline-block;width: auto !important;margin-left: 5%;
        margin-top: 5vh;padding: 1vh 2vh;
    }
    .phone-over {
        position:absolute;top: 92.5%;left: 5%;width: 90%;
        z-index: 3;
    }
    .phone-left, .phone-right {
        display: inline-block;vertical-align: middle;position:relative;
    }
    .phone-left {text-align: left;width:60%;}
    .phone-right {text-align: right;width:40%;}
    .profile-pic-p img {width:100%;display:block;}
    .pending-order {width: 40%;}
    .pending-grid-order {width: 60%;}
    .pending-order h4, .pending-grid-order h4 {padding: 2vh 0;}
}
@media (max-width: 1920px) {

    .title-ribbon {
        bottom:15px;left:-24px;padding: 0.35vh 0;
        width: calc(100% + 48px);
    }
    .title-ribbon::before {bottom:-8px;border-width: 0 20px 8px 0;}
    .title-ribbon::after {bottom:-8px;border-width: 8px 20px 0 0;}
    
}












.premium-profile {background-color: #ffe136;}
.premium-profile::before {border-color: transparent #c7b030 transparent transparent;}
.premium-profile::after {border-color: #9c8a2a transparent transparent transparent;}
.premium-profile .f-mc {color: var(--c-dgray);}

.creator-profile {background-color: #AF6AE9;}
.creator-profile::before {border-color: transparent #6b418e transparent transparent;}
.creator-profile::after {border-color: #6b418e transparent transparent transparent;}

.moderator-profile {background-color: #FF7979;}
.moderator-profile::before {border-color: transparent #8e4545 transparent transparent;}
.moderator-profile::after {border-color: #8e4545 transparent transparent transparent;}

.manager-profile {background-color: #D23F3F;}
.manager-profile::before {border-color: transparent #8a2a2a transparent transparent;}
.manager-profile::after {border-color: #8a2a2a transparent transparent transparent;}

.developer-profile {background-color: #FEA060;}
.developer-profile::before {border-color: transparent #9c6036 transparent transparent;}
.developer-profile::after {border-color: #9c6036 transparent transparent transparent;}

.admin-profile {background-color: #EB1819;}
.admin-profile::before {border-color: transparent #6b0d0d transparent transparent;}
.admin-profile::after {border-color: #6b0d0d transparent transparent transparent;}


.pvprp-profile {background-color: var(--c-blue);}
.pvprp-profile::before {border-color: transparent #1b3562 transparent transparent;}
.pvprp-profile::after {border-color: #1b3562 transparent transparent transparent;}