.user{
  position:fixed;
  right:0;
  top:0;
  height: 100vh;
  width:55vmin;
  z-index: 1000;
  background: var(--color11);
  overflow-y: auto;
  box-shadow: -2px 0 3px rgb(15,15,15);
}

.user_content{
  min-height: 100vh;
  display:flex;
  flex-direction: column;
}

.user_header{
  display:flex;
  flex-direction: column;
  position:relative;
  padding: 12vmin 0vmin 2vmin 0vmin;
  background-image:url('../Images/header/user_bg.jpg');
  background-size: cover;
  background-position: center;
}

.user_close{
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4vmin;
  font-weight: bold;
  position:absolute;
  left:1vmin;
  top:2vmin;
}

.inbox{
  display:flex;
  align-items: center;
  position:absolute;
  top:2vmin;
  right:1vmin;
  text-decoration: none;
}
.inbox_number{
  color:white;
  margin-left: -0.5vmin;
  margin-top: -2.5vmin;
  font-size: 2.5vmin;
  background: red;
  width:3.5vmin;
  height:3.5vmin;
  text-align: center;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
   font-family: Arial, Helvetica, sans-serif;
}

.inbox img{
  height:4vmin;
}

.username, .balance, .balance_label{
  align-self: flex-start;
  background:linear-gradient(45deg, var(--color7),var(--color8), var(--color7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4vmin;
  font-weight: bold;
  margin-bottom: 2vmin;
  padding-left: 3vmin;
}

.deposit_btn{
  position:absolute;
  bottom:4vmin;
  right:1vmin;
  display:flex;
  align-items: center;
  text-decoration: none;
  padding:1vmin;
  border-radius: 1vmin;
  background:linear-gradient(var(--color7),var(--color8), var(--color7));
}

.deposit_btn img{
  height:5vmin;
  margin-right: 1vmin;
  filter:brightness(0.2);
}

.deposit_btn span{
  color:var(--color9);
  font-weight: bold;
  font-size: 4vmin;
}



.user_item{
  display:flex;
  align-items: center;
  text-decoration: none;
  padding:3vmin;
  min-width: 50vmin;
  width:100%;
  border-top: 1px solid var(--color10);
  color:var(--color2);
}

.user_item span{
  color:var(--color2);
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4vmin;
}

.user_item:after{
  content:"";
  width: 0;
  height: 0;
  border-left: 1vmin solid transparent;
  border-right: 1vmin solid transparent;
  border-top: 1.5vmin solid var(--color2);
  transition: 0.3s;
  margin-left:auto;
}

.user_active:after{
  border-left: 1vmin solid transparent;
  border-right: 1vmin solid transparent;
  border-top: 0vmin solid transparent;
  border-bottom:1.5vmin solid var(--color2);
}

.user_drop{
  background: var(--color10);
  box-shadow: inset 0 2px 3px rgb(15,15,15);
  padding:3vmin 0;
  display:flex;
  flex-direction: column;
}

.balance_table{
  border-collapse: collapse;
  width:100%;
}

.balance_table th{
  text-align: left;
  color:var(--color1);
  font-size: 3.5vmin;
  padding:1vmin 2vmin;
}

.balance_table td{
  text-align: left;
  font-size: 3vmin;
  padding:1vmin 2vmin;
  color:var(--color2);
}

.balance_value{
  color:red !important;
  border-top:1px solid var(--color4) ;
  border-bottom:1px solid var(--color4) ;
}

.user_drop_item{
  color:var(--color2);
  text-decoration: none;
  font-size: 3.5vmin;
  padding:2vmin 3vmin;
  border-bottom: solid 1px var(--color11);
}

.user_drop_item:last-child{
  border:none;
}

.logout_btn{
  align-self: flex-end;
  margin:3vmin;
  margin-top: auto;
  background: rgb(15,15,15);
  padding:1vmin 4vmin;
  border-radius: 1vmin;
  text-decoration: none;
  color:var(--color2);
  font-size: 4vmin;
}