.vip{
  display:flex;
  align-items: center;
  flex-direction: column;
  padding-top:15vmin;
  min-height: 100vh;
}

.vip iframe{
  width:100%;
  flex:1;
  border:none;
}

.status{
  display:flex;
  align-items: center;
  flex-direction: column;
  /*padding-top:15vmin;*/
  background-image:url('../Images/status/bg.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

.status .header2{
  background: rgba(0,0,0,0.9);
}

.status_bar_container{
  display:flex;
  justify-content: space-between;
  align-items: center;
  height:3vmin;
  width:94vw;
  background: rgba(255,255,255,0.1);
  border-radius: 5vmin;
  margin-top:10vmin;
  position:relative;
}

.status_bar{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  /*width:30%;*/
  height:1vmin;
  background: grey;
}

.status_ball{
  width:5vmin;
  height:5vmin;
  border-radius:100%;
  z-index: 1;
}

.normal{
  background:radial-gradient(ellipse farthest-corner at right bottom, rgb(161,161,161) 0%, rgb(140,140,140) 8%, rgb(83,83,83) 30%, rgb(61,61,61) 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, rgb(205,205,205) 0%, rgb(196,196,196) 8%, rgb(130,130,130) 25%, rgb(25,25,25) 62.5%, rgb(25,25,25) 100%);

}
.bronze{
  background:radial-gradient(ellipse farthest-corner at right bottom, #fe5837 0%, #fd5631 8%, #9f3e28 30%, #8a3d2f 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffb8ac 8%, #d17464 25%, #5d2a1f 62.5%, #5d2a1f 100%);

}
.silver{
  background:radial-gradient(ellipse farthest-corner at right bottom, rgb(211,211,211) 0%, rgb(190,190,190) 8%, rgb(123,123,123) 30%, rgb(111,111,111) 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, rgb(246,246,246) 8%, rgb(180,180,180) 25%, rgb(75,75,75) 62.5%, rgb(75,75,75) 100%);

}
.gold{
  background:radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
.platinum{
  background:radial-gradient(ellipse farthest-corner at right bottom, #37edfe 0%, #31f6fd 8%, #289b9f 30%, #2f8a85 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #acfffc 8%, #64d1cc 25%, #1f5d58 62.5%, #1f5d58 100%);
}
.diamond{
  background:radial-gradient(ellipse farthest-corner at right bottom, #375bfe 0%, #315dfd 8%, #28469f 30%, #2f3d8a 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #acb8ff 8%, #647ad1 25%, #1f2a5d 62.5%, #1f2a5d 100%);
}

/*-----------------------------------------------------------------------*/

.current_status{
  display:flex;
  flex-direction: column;
  align-items: center;
  width:100%;
  padding:8vmin;
}

.current_status_card{
  display:flex;
  flex-direction: column;
}

.current_status_label{
  align-self: flex-start;
  margin-left: 2vmin;
  display:flex;
  align-items: baseline;
}

.current_status_label span{
  color:white;
  font-size: 4vmin;
}

.current_status_label h1{
  -webkit-background-clip: text;
  -webkit-text-fill-color: #a99966;
  font-size: 7vmin;
  margin:0;
  margin-left: 2vmin;
}


.current_status_card img{
  width: 60vmin;
  margin:1vmin 0;
}

.current_status_content{
    display:flex;
    flex-direction: column;
}


.status_info{
  display:flex;
  align-items: center;
  margin-bottom: 3vmin;
  padding:0 2vmin;
}

.info_label{
  font-size: 3.5vmin;
  color:white;
  width:30vmin;
}

.info_amount{
  font-size: 5vmin;
  color:var(--color2);
}


.next_level{
  display:flex;
  align-items: center;
  height:3vmin;
  background: rgba(255,255,255,0.1);
  margin:3vmin 0;
}

.next_level_bar{
  width:30%;
  height:1vmin;  
}

.next_level_ball{
  margin-left: auto;
}


.status_btn{
  display:flex;
  align-items: center;
  justify-content: center;
  margin-top: 3vmin;
}

.status_btn a{
  text-decoration: none;
  color:var(--color2);
  background: radial-gradient(var(--color11),black);
  padding:2vmin 3vmin;
  font-size: 4vmin;
  border-radius: 1vmin;
  border: 1px solid;
}

/*------------Card List---------------------*/

.card_list{
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width:100vw;
  margin-top: 3vmin;
}

.card_item{
  display:flex;
  flex-direction: column;
  margin:0 3vmin;
  margin-bottom: 5vmin;
  position:relative;
}

.color_tag{
  position:absolute;
  right:0vmin;
  top:0.5vmin;
  width:5vmin;
  height:3vmin;
  border-top-right-radius: 1vmin;
}

.card_item img{
  width:35vmin;
}

.card_item span{
  color:white;
  text-align: center;
  font-size: 3vmin;
}


/*--------------------Status info popup--------------------------------------*/

.status_popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  padding:10vmin 0;
}


.status_window{
  width:90vmin;
  margin:auto;
  padding:1vmin;
  display:flex;
  flex-direction: column;
}

.status_window_header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding:0 1vmin;
}

.status_window_header span{
  font-size: 5vmin;
  font-weight: bold;
}


.status_window_info{
  background: rgb(20,20,20);
  color:white;
  padding:2vmin;
}

.status_window h3 {
  margin:0;
  font-size: 5vmin;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.status_window_info li{
  font-size: 4vmin;
}






/*------------------------------------*/


@media screen and (orientation:landscape) {
  .current_status{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .current_status_card{
    margin-right: 3vmin;
  }

  .current_status_card img{
    width: 55vmin;
  }



  .status_popup{
    padding:0;
    display:flex;
    align-items: center;
  }
 }