/*---------------Side Navigation--------------------*/

.nav{
  position:fixed;
  left:-80vw;
  top:0;
  height: 100vh;
  z-index: 1000;
  background: var(--color11);
  overflow-y: auto;
  box-shadow: 2px 0 3px rgb(15,15,15);
}

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

.nav_item, .nav_wrapper_item{
  display:flex;
  align-items: center;
  text-decoration: none;
  padding:3vmin;
  min-width: 50vmin;
  border-top: 1px solid var(--color10);
}


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

.nav_wrapper_item::after{
  content:"+";
  margin-left: auto;
  margin-right: -1vmin;
  width: 4vmin;
  height: 4vmin;
  font-size: 4vmin;
  color:var(--color2);
  transition: 0.3s;
  text-align: center;
}

.nav_wrapper_open::after{
  content:"-";
}

.nav_item img, .nav_wrapper_item img{
  width:6vmin;
  margin-right:2vmin;
}

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

.nav_content_header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding:5vmin 3vmin;
  background-image:url('/infiniwin/mobile/img/header/user_bg.jpg');
  background-size: cover;
  background-position: center;
}


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

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

.dropdown_item:last-child{
  border:none;
  padding-bottom:3vmin;
}

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


/*---------Language-------------*/

.lang{
  position:relative;
}

.selected_lang,  .dropdown_lang_item{
  display:flex;
  align-items: center;
  position:relative;
  padding:1vmin 2vmin 2vmin 2vmin;
}

.selected_lang img, .dropdown_lang_item img{
  width:4vmin;
  margin-right: 2vmin;
}

.selected_lang span,  .dropdown_lang_item span{
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4vmin;
  font-weight: bold;
}

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

.dropdown_lang{
  background: var(--color10);
  position:absolute;
  z-index: 1;
  width:100%;
  left:0;
  top:100%;
  display:none;
}

.dropdown_lang_item{
  width:100%;
}
.dropdown_lang_item:active{
  background: var(--gradient1);
}

.dropdown_lang_item:active span{
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lang_opened{
  background: var(--color10);
  filter:drop-shadow(1px 1px 2px black);
}

.lang_opened .dropdown_lang{
  display:block;
}

.lang_opened .selected_lang::after{
  -moz-transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  transform:rotate(180deg);
}


.nav_close{
  background: var(--gradient1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4vmin;
  font-weight: bold;
}

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