/* user profile */

#user {
   position: relative;
   background-color: #040200;
   background-image: url(../images/bg/fight_users.jpg);
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center 30px;
}

.userName, .userName input {
   font-family: "Orbitron", "Open Sans", sans-serif;
   font-weight: bold;
   background: -webkit-linear-gradient(#fff09c, #fff, #aef);
   background: linear-gradient(#fff09c, #eee, #aef);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.userName input {
   border: none;
   width: 100%;
}

#user .userName {
  
   position: absolute;
   top: 8vw; /* has to move down the wider the display*/
   left: 9.5%;
   width: 19%;
   text-align: center;
}

.btnEditUsername {
   position: absolute;
   left: 30%;
   top: 7.5vw;
   z-index: 4
}

.boxStat h2, .boxLine h2 {
   font-size: 1.2em;
   margin-top: 6px;
   color: rgba(255, 255, 255, 0.9);
}

.boxStat h3, .boxLine h3 {
   float: left;
   margin: 0;
   padding: 0;
   font-size: 0.8em;
   font-weight: normal;
   line-height: 30px;

   color: #db561b;
   text-shadow: 0 0 3px #ba3a12;
   text-transform: uppercase;
   text-align: left;
}

.boxStat h5, .boxLine h5 {
   text-transform: uppercase;
   margin: 0 0 3px 0;
}

.boxLine input, .boxStat input {
   font-family: "Orbitron", "Open Sans", sans-serif;
   font-size: 1.3em;
   background: rgba(0, 0, 0, 0.93);
   border: 1px dotted grey;
   padding: 4px 8px;
   border-radius: 3px;
   color: lime;
}



.userStats,
.boxLeft {
   position: absolute;
   left: 9.5%;
   top: 12vw;
   width: 19%;
}

.boxStat, .boxLine {
   background-color: rgba(10,10,10, .8);
   border: 1px solid rgba(222, 230, 240, 0.6);
   border-radius: 7px;
   padding: 6px;
   margin-bottom: 7px;
   min-height: 38px;
}

#tblStatsCards .boxLine {
   border-left: none;
   border-right: none;
}


.boxLine {
   padding: 12px;
   margin-bottom: 7px;
   border-radius: none;
}

.boxLineLime {
   border: 1px solid lime!important
}

.boxLine h3 {
   float: none; 
   display: block;
   margin: 0 0 3px 0;
}

.statVal {
   font-family: "Orbitron", "Open Sans", sans-serif;
   font-size: 1.1em;
   color: #c9e7f1;
   text-align: right;
   padding-top: 3px;
   xbackground: linear-gradient(180deg, #1ac4e3, #196376);
}

#user .avatar,
.boxMid {
   position: absolute;
   background-size: contain;
   left: 38.5%;
   top: 4vw;
   width: 23%;
   aspect-ratio: 1/1;
   border-radius: 8px;
   border: 1.5px solid silver;
   border-bottom: 1.5px solid grey;
   border-left: 1.5px solid grey;
}

#user .avatar .btn{
   position: absolute;
   right: 10%;
   top: -7%;
   width: 80%;
}

#user .btnChangeAvatar {
   position: absolute;
   right: -15px;
   top: -15px;
   z-index:4
}

#user .userMenu,
.boxRight {
   position: absolute;
   top: 12vw;
   left: 71%;
   width: 20%;
   xbackground: linear-gradient(180deg, #1e2224, #000510);
   xborder-radius: 8px;
   xborder: 1px solid rgba(222, 222, 222, 0.5);
   xborder-top: 1px solid rgba(255, 255, 255, 0.9);
   xborder-right: 1px solid rgba(255, 255, 255, 0.6);
   padding: 5px;
}

.boxProfileStatsContainer {
   background-color: #111;
   padding: 0 10px;
}

.userMenu div {
   line-height: 30px;
   font-size: 85%;
}



.userMenu [class^="icon-"] {
   width: 23px; 
   height: 23px; 
   margin: 2px 10px 0 0;
   float: left;
   opacity: 0.9;
}

.icon-badge {
   background-image: url(../images/icons/icon-badge.png?v=4);
}
.icon-settings {
   background-image: url(../images/icons/icon-settings.png?v=4);
}

.icon-stats {
   background-image: url(../images/icons/icon-stats.png?v=4);
}


.boxCrates, .boxFilledCrates {
   position: absolute;
   left: 37.55%;
   width: 25%;
   bottom: 52px;
   top: auto;
}

.boxFilledCrates {
   top: auto;
   bottom: 10px;
}

.boxFilledCrates div {
   box-shadow: none;
}

.headingCrates {
   font-size: 1em;
   position: absolute;
   left: 35%;
   width: 30%;
   bottom: 32%;
   text-align: center;
   margin: 0;
   text-shadow: 0 0 3px black;
}

.crate {
   aspect-ratio: 540/840;
   background-size: contain;
   background-repeat: no-repeat;
   position: relative;
   background-color: rgba(0, 0, 0, 0.8);
   border-radius: 10%;
   text-align: center;
   line-height: 100%;
}

.crate h4 {
   color: white;
   margin-top: -50px;
   text-shadow: 0 0 2px black, 0 0 5px black, 0 0 10px black;
}

.crate div {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   height: 0%;
   width: 100%;
   z-index: 2;
   background-size: 100%;
   background-position: center bottom;
}

.crate1 {
   background-image: url(../images/cardBorders/01_empty.png);
}
.crate1 div {
   background-image: url(../images/cardBorders/01.png);
}
.crate2 {
   background-image: url(../images/cardBorders/02_empty.png);
}
.crate2 div {
   background-image: url(../images/cardBorders/02.png);
}
.crate3 {
   background-image: url(../images/cardBorders/03_empty.png);
}
.crate3 div {
   background-image: url(../images/cardBorders/03.png);
}
.crate4 {
   background-image: url(../images/cardBorders/04_empty.png);
}
.crate4 div {
   background-image: url(../images/cardBorders/04.png);
}



.boxFilledCrates .btn {
   border-width: 2px;
   font-size: 0.5em;
   padding: 5px;
   text-align: center;
   text-transform: uppercase;
}

/* openFullCrate -> */
#popupNewCard {
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%);
}

#popupNewCard .card {
   position: absolute;
   zoom: 0.2;
   transform: perspective(800px) rotateY(180deg);
   transform-style: preserve-3d;
   transition: transform 1.5s;
}

#popupNewCard .flipNewCard {
   transform: rotateY(0deg);
}

#popupNewCard .boxIconDesc {
   transform: rotateX(90deg);
   transition: transform 1s;
}

#popupNewCard .boxIconDesc.flipDown {
   transform: rotateX(0deg);
}

#boxCards h3 {
   color: #777;
   text-shadow: none;
}

/* register */

.boxRegister {
   padding: 12%;
   text-align: center;
}

/* avatar selection */
.avatar {
   background-size: contain;
}

#listRanks {
   margin-top: 70px;
   padding: 50px 0 25px 0;
   gap: 45px;
   align-items: stretch; 
}

#listRanks .rank {
   flex-shrink: 0;
   display: inline-block;
   background: black;
   border: 1.5px solid rgba(200, 240, 255, 0.9);
   border-radius: 2px;
   width: 120px;
}

.rankIndex {
   margin-top: -35px;
   font-size: 2em;
   color: white;
}

#listRanks .rank .rankTitle {
   font-family: "Orbitron";
   font-size: 1.1em;
   background: white;
   color: black;
   margin: 10px -8px;
   padding: 4px 10px;
   height: 55px;
}

.rankReward {
   height: 85px;
}

.rank .crate {
   width: 30px;
   margin: auto;
}

.rank .crate div {
   height: 100%;
}

.rank .rankXp {
   margin: 10px;
   color: rgb(255, 200, 200);
}

#listRanks {
   width: 100%;
   overflow-x: scroll;
}

#listRanks .rank {
   text-align: center;
}

/* level up  */

#boxLevelUp {
   width: 70%;
   margin: 3% auto;
   max-width: 600px;
   text-align: center;
}

#boxLevelUp p {
   margin: 2em;
}

.boxLevelNumber {
   position: absolute;
   left: 0;
   right: 0;
   top: 3vw;
   font-size: 8em;
   opacity: 0.2;
   text-align: center;
}

#boxLevelUp .btn {
   min-width: 120px;
}

/* daily task*/

#boxDailyTasks {
   position: absolute;
   width: 92%;
   top: 50%; /* absolute width/height */
   left: 50%;
   transform: translate(-50%, -50%); /* elements width/height */
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.task {
   width: 100%;

   display: grid;
   grid-template-columns: 30px auto 30px; /* Three columns, 30px wide on the sides */
   grid-gap: 10px;
   width: 100%; /* Ensure the grid takes the full width */

   border-radius: 50px;
   margin: 8px 0;
   padding: 5px 10px;
   border: 1px solid rgba(50, 60, 50);
   background: rgba(20, 30, 20);
   box-shadow: 0 0 10px rgba(40, 60, 40);
   text-align: left;

   border: 1px solid rgba(170, 255, 170, 0.6);
   border-radius: 50px;
   padding: 3%;
   margin: 3% 0;
}

.task > div {
   xline-height: 30px;
}

.taskDone {
   color: white;
   background: rgba(85, 125, 85, 0.8);
   border: 1px solid rgba(170, 255, 170, 1);
   box-shadow: 0 0 2px #afa;
}

.task .checkbox {
   border: 2px solid rgba(50, 205, 50, 0.6);
}

.taskDone .checkbox {
   border: 1px solid limegreen;
   background: limegreen;
}

.hero .task {
   border: 1px solid rgba(150, 90, 30, 0.6);
   background: rgba(30, 20, 5);
   box-shadow: 0 0 10px rgba(150, 90, 30, 0.5);
}

.hero .taskDone {
   background: rgba(250, 165, 30, 0.7);
   border: 1px solid rgba(250, 165, 30, 1);
   box-shadow: 0 0 3px orange;
}

.hero .task .checkbox {
   border: 2px solid rgba(255, 180, 0, 0.6);
}

.hero .taskDone .checkbox {
   border: 2px solid rgba(255, 180, 0, 1);
   background: rgba(255, 180, 0, 1);
}

#boxDailyTasks .btn {
   width: 60%;
   margin: 30px auto !important;
}

.btn.highlight {
   color: white;
   border: none;
   padding: 10px;
   xbackground: linear-gradient(180deg, #6c6, #afa, #afa, #afa, #6c6);
   animation: glowingGreenBorder 2s linear infinite;
}

@keyframes glowingGreenBorder {
   0% {
      border: 1px solid rgba(150, 255, 120, 0.5);
      box-shadow: inset 0 0 5px rgba(150, 255, 120, 1);
      text-shadow: 0 0 2px rgba(150, 255, 120, 1);
   }
   50% {
      border: 1px solid rgba(150, 255, 120, 1);
      box-shadow: inset 0 0 5px rgba(150, 255, 120, 1), inset 0 0 10px rgba(150, 255, 120, 1), inset 0 0 20px rgba(150, 255, 120, 0.5),
         inset 0 0 50px rgba(150, 255, 120, 0.2), 0 0 5px rgba(150, 255, 120, 1), 0 0 10px rgba(150, 255, 120, 1), 0 0 20px rgba(150, 255, 120, 0.5);
      text-shadow: 0 0 4px rgba(150, 255, 120, 1), 0 0 8px rgba(150, 255, 120, 1);
   }
   100% {
      border: 1px solid rgba(150, 255, 120, 0.5);
      box-shadow: inset 0 0 5px rgba(150, 255, 120, 1);
      text-shadow: 0 0 2px rgba(150, 255, 120, 1);
   }
}

#boxTaskMessage {
   position: absolute;
   top: 3%;
   left: 5%;
   right: 5%;
   background-color: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(5px);
   border-radius: 50px;
   z-index: 7;
}

#boxTaskMessage .task {
   margin: 0;
   padding: 10px;
}

/* open rewards box*/

#boxRewards {
   width: 75%;
   margin: 5% auto;
   padding: 3% 5%;
}

#boxRewards.boxOutline > h3 {
   margin-top: -40px;
}

#boxRewards > div {
   margin: auto;
}

#boxRewardBP {
   xaspect-ratio: 1/1;
   width: 100%;
   background-size: cover;
   background-position: center;
   padding: 20px;
}

#rewardBpText {
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   color: white;
   padding: 15px;
}

.rewardBlueprints {
   margin: 10px;
   font-size: 200%;
   color: white;
   text-align: center;
   padding: 6px 20px;
   background-image: url(../images/icons/bp.png);
   background-repeat: no-repeat;
   background-size: cover;
}

#boxRewardCredits {
   margin: 0;
}

#btnCollectReward {
   position: absolute;
   bottom: 2.5%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 9;
}


#userDebugText {
   font-family: 'Courier New', Courier, monospace;
   position: absolute;
   font-size: 80%;
   color: rgba(155,155,155, .8);
   bottom: 1px;
   right: 10px;
   text-align: right;
   z-index: 1;
}


input[type=range]:focus {
   outline: none;
 }
 
 input[type=range] {
    appearance: none;
    width: 95%;
    margin: 10px auto;
    xborder-radius: 6px;
    height: 12px;
    border: none;
    background-color: rgba(255,255,255,.1); 
 }

 input[type="range"]::-webkit-slider-runnable-track {
   /* -webkit-appearance: none;
    background: linear-gradient(to right, lime 50%, silver  50%);
    background-size: 200% 100%;
    background-position: right bottom; */
}

 input[type='range']::-webkit-slider-thumb {
	appearance: none;
	background-color: lime;
   box-shadow: 0 0 10px rgba(150,255,200, 0.8);
	width: 25px;
	height: 25px;
	border-radius: 2px;
	cursor: pointer;
   opacity: 0.9
}


#popRateMe {
   width: 100vw;
   height: 100vh;
   background-image: url(../images/bg/popRate.jpg);
   background-size: cover;
   background-position: center top;
}

.boxRateInner {
   position: absolute;
   left: 50%;
   transform: translate(-50%);

   top: 27vh;
   width: 30vw;
   text-align: center;

}
.star {
   display: inline-block;
   width: 95%;
   text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(250, 165, 30, 0.7)
}
#popRateMe .star:before {
   content: "\2B50";
   font-size: 36px;
}

#popRateMe .grid5 {
   grid-gap: 0px;
}

.btnLogin {
   margin-bottom: 15px
}