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

.fund .header2{
  background: rgb(10,10,10);
}

.fund_content{
  flex:1;
  display:flex;
  flex-direction: column;
  width:100vw;
}

.fund_nav{
  display:flex;
  align-items: center;
  justify-content: center;
  background: rgb(25,25,25);
  width:100%;
  padding-top:2vmin;
}

.fund_nav_item{
  height:14vmin;
  margin:0 2vmin;
  background: rgb(35,35,35);
  padding:2vmin;
  border-top-right-radius: 2vmin;
  border-top-left-radius: 2vmin;
}

.fund_nav_active{
  background: rgb(50,50,50);
}

.fund_nav_item img{
  height:100%;
  background: rgb(50,50,50);
  padding:1vmin 2vmin;
  border-radius: 1.5vmin;
}

.fund_nav_active img{
  background: rgb(70,70,70);
}

.sub_nav{
  display:flex;
  align-items: center;
  justify-content: flex-start;
  background: rgb(50,50,50);
  padding:2vmin 0;
}

.sub_nav_item{
  font-size: 3.5vmin;
  margin:0 1vmin;
  background: rgb(35,35,35);
  color:white;
  padding:1.5vmin 2vmin;
  border-radius: 1vmin;
  text-decoration: none;
}

.sub_nav_active{
  color:var(--color1);
  font-weight: bold;
}

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

.fund_body{
  flex:1;
  background: rgb(200,200,200);
  display:flex;
  flex-direction: column;
  padding:5vmin 4vmin;
}

.fund_header{
  text-align: left;
  font-size: 5vmin;
  padding:2vmin 0;
  color:rgb(50,50,50);
  font-family: 'Staatliches', sans-serif;
}

.fund_method{
  position:relative;
}

.selected_method{
  display:flex;
  align-items: center;
  border:solid 0.5vmin rgb(120,120,120);
  font-size: 3.5vmin;
  border-radius:1vmin;
  padding-left:3vmin;
  border-radius: 1vmin;
  overflow: hidden;
}


.selected_method_logo{
  width:5vmin;
  margin-right: 2vmin;
}

.method_dropdown_button{
  margin-left: auto;
  align-self: stretch;
  display:flex;
  align-items: center;
  padding:2vmin;
  background: rgb(120,120,120);
  color:white;
  font-size: 3vmin;
}

.method_dropdown_icon{
 width: 0;
 height: 0;
 border-left: 1.5vmin solid transparent;
 border-right: 1.5vmin solid transparent;
 border-top: 1.5vmin solid white;
 margin-left: 1vmin;
}

.method_dropdown{
  display:flex;
  flex-direction: column;
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  border-left: 0.5vmin solid rgb(120,120,120);
  border-right: 0.5vmin solid rgb(120,120,120);
  border-bottom: 0.5vmin solid rgb(120,120,120);
  border-bottom-left-radius: 1vmin;
  border-bottom-right-radius: 1vmin;
  background: rgb(200,200,200);
  display:none;
  z-index: 10;
}

.method_dropdown_header{
  background: rgb(160,160,160);
  text-align: center;
  font-size: 4vmin;
  padding:1vmin 0;
  font-weight: bold;
  letter-spacing: 0.5vmin;
}

.method_dropdown_item{
  display:flex;
  align-items: center;
  font-size: 3.5vmin;
  height:9vmin;
  padding-left:3vmin;
}

.method_dropdown_item img{
  width:7vmin;
  margin-right: 2vmin;
}

.method_dropdown_item input{
  margin-left: auto !important;
  margin-right: 2vmin !important;
  height:3.5vmin;
  width:3.5vmin;
  margin-right: 2vmin;
}

.method_open .selected_method{
  border-bottom:none;
  border-radius:0vmin;
  border-top-left-radius: 1vmin;
  border-top-right-radius: 1vmin;
}

.method_open .method_dropdown{
  display:flex;
  flex-direction: column;
}

.method_open .method_dropdown_icon{
 border-top:none;
 border-left: 1.5vmin solid transparent;
 border-right: 1.5vmin solid transparent;
 border-bottom: 1.5vmin solid white;
}


.method_body{
  display:flex;
  flex-direction: column;
  padding:5vmin 0;
}

.bank_form,.online_form,.crypto_form{
  display:flex;
  flex-direction: column;
}

.form_header_logo{
  height:12vmin;
  align-self: center;
  margin-bottom: 5vmin;
}

/*-----------Promotion dropdown selector-------------------------------*/

.promotion_input{
  position:relative;
}

.selected_promotion{
  display:flex;
  align-items: center;
  border:solid 0.5vmin rgb(120,120,120);
  font-size: 3.5vmin;
  border-radius:1vmin;
  padding-left:3vmin;
  border-radius: 1vmin;
  overflow: hidden;
}

.selected_promotion::after{
  content:"+";
  margin-left: auto;
  padding:0 4vmin;
  background: rgb(120,120,120);
  color:white;
  font-size: 6vmin;
}

.dropdown_promotion{
  display:flex;
  flex-direction: column;
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  border-left: 0.5vmin solid rgb(120,120,120);
  border-right: 0.5vmin solid rgb(120,120,120);
  border-bottom: 0.5vmin solid rgb(120,120,120);
  border-bottom-left-radius: 1vmin;
  border-bottom-right-radius: 1vmin;
  background: rgb(200,200,200);
  display:none;
}

.promotion_open .selected_promotion{
  border-bottom:none;
  border-radius:0vmin;
  border-top-left-radius: 1vmin;
  border-top-right-radius: 1vmin;
}

.promotion_open .dropdown_promotion{
  display:flex;
  flex-direction: column;
}

.promotion_header{
  background: rgb(160,160,160);
  text-align: center;
  font-size: 4vmin;
  padding:1vmin 0;
  font-weight: bold;
  letter-spacing: 0.5vmin;
}

.promotion_item{
  display:flex;
  align-items: center;
  font-size: 4vmin;
}

.promotion_item img{
  width:50vmin;
  padding:2vmin;
}

.promotion_item span{
  height:100%;
}

.promotion_item input{
  display:none;
}

.conversion_table{
  width:100%;
  border:solid 1px var(--color9);
  border-collapse: collapse;
  margin-bottom: 3vmin;
}

.conversion_table th{
  background: var(--color9);
  color:white;
  font-size: 3.5vmin;
}

.conversion_table td{
  font-size: 3vmin;
  padding:1vmin;
}

.conversion_input{
  background: rgb(180,180,180);
  padding:4vmin 3vmin;
}

.crypto_table{
  background: rgb(180,180,180);
  border-collapse: collapse;
  margin-bottom: 3vmin;
}

.crypto_table th{
  background: var(--color9);
  color:white;
  font-size: 3.5vmin;
}

.crypto_table td{
  font-size: 3vmin;
  padding:1vmin;
}

/*---------------------Transfer section-------------------------*/
/*-----All in All out section---------*/

.allin_section{
  display:flex;
  flex-direction: column;
  margin-bottom:3vmin;
}


.main_wallet_info{
  display:flex;
  align-items: center;
  justify-content: center;
  background: rgb(185,185,185);
  border-radius: 1vmin;
  padding:2vmin 3vmin;
  margin-bottom: 3vmin;
}

.wallet_balance{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:25vmin;
  width:25vmin;
  border-radius: 1vmin;
  background: rgb(165,165,165);
  font-size: 3.5vmin;
  border-radius: 100%;
}

.wallet_balance img{
  height:10vmin;
  filter:brightness(0.4) grayscale(1);
}

.convert_icon{
  height:10vmin;
  margin:0 5vmin;
}

.wallet_transfer{
  align-self:flex-start;
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  height:25vmin;
}

.transfer_main{
  border:none;
  padding:0 2vmin;
  height:8vmin;
  border-radius: 1vmin;
  background: var(--gradient2);
  font-weight: bold;
  font-size: 3vmin;
  color:var(--color2);
}




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


.allin_category{
  border-bottom:solid 1px rgba(50,50,50,0.5);
}

.category_btn{
  color:var(--color9);
  display:flex;
  align-items: center;
  font-size: 5vmin;
  padding:1vmin;
}


.category_btn img{
  height:6vmin;
  margin-right: 1vmin;
}

.category_btn .category_amount{
  margin-left: auto;
  font-size: 4vmin;
}

.category_btn::after{
  content:"+";
  margin:0 2vmin;
}


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

.category_content{
  display:flex;
  flex-direction: column;
  padding:2vmin;
}


.allin_item{
  width:100%;
  display:flex;
  flex-direction: column;
  margin-bottom: 3vmin;
}

.allin_info{
  width:100%;
  display:flex;
  align-items: center;
  background: linear-gradient(rgb(50,50,50),rgb(30,30,30));
  border-radius: 1vmin;
  color:white;
  padding:2vmin;
  border-radius: 1vmin;
}

.allin_name{
  font-size: 4vmin;
}

.allin_amount{
  font-size: 4vmin;
  margin-left: auto;
}

.allin_info::after{
  content:"+";
  margin:0 1vmin 0 3vmin;
}

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

.allin_btns{
  display:flex;
  justify-content: space-between;
  padding:1vmin 0;
}

.allin_btns button{
  border:none;
  padding:1.5vmin 0;
  text-align: center;
  font-size: 3.5vmin;
  width:48%;
  border-radius: 1vmin;
}

.allin_btn{
  background: linear-gradient(var(--color5),var(--color6));
  color:black;
}

.allout_btn{
  background: linear-gradient(var(--color3),var(--color4));
  color:white;
}

.allin_btns button:active{
  box-shadow: inset 2px 2px 0px rgba(50,50,50,0.5);
}



.transfer{
  display:flex;
  flex-direction: column;
  background: rgb(185,185,185);
  padding:4vmin 3vmin;
  margin:3vmin 0;
}



/*---------------Transaction Enquiry section-----------------*/

.transaction_record{
  overflow: auto;
  margin-top: 4vmin;
  border-top: 1px solid rgb(150,150,150);
}

#trans_history_pending, #trans_history, .transaction_table{
  width:100%;
  border-collapse: collapse;
  margin:4vmin 0;
  background: white;
}

#trans_history_pending th, #trans_history th, .transaction_table th{
  text-align: center;
  font-size: 3.5vmin;
  font-weight: lighter;
  background: var(--gradient2);
  color:var(--color1);
  padding:2vmin 1vmin;
}

#trans_history_pending td, #trans_history td, .transaction_table td{
  text-align: center;
  font-size: 3vmin;
  min-width: 22vmin;
  padding:1vmin;
  border:solid 1px rgb(200,200,200);
}


/*---------------------Profile section-------------------------*/

.profile_item{
  display:flex;
  padding:1vmin 2vmin;
  border-radius: 1vmin;
  display:flex;
  flex-direction: column;
  margin-bottom: 1vmin;
}

.profile_label{
  font-size: 3vmin;
  background: linear-gradient(rgb(50,50,50),rgb(30,30,30));
  align-self: flex-start;
  color:white;
  padding:1vmin 3vmin 0 2vmin;
  border-top-left-radius: 1vmin;
  border-top-right-radius: 1vmin;
  margin-left: 1vmin;
  min-width: 30vmin;
  display:flex;
  align-items:center;
}

.profile_icon{
  height:3vmin;
  margin-right: 1vmin;
}

.profile_value{
  font-size: 4vmin;
  color:rgb(20,20,20);
  background: rgb(170,170,170);
  font-weight: bold;
  padding:2vmin;
  border-radius: 1vmin;
}

.auto_transfer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 4vmin;
  color: black;
  margin-bottom: 4vmin;
  padding: 0 1vmin;
}

.auto_transfer img {
  height: 4vmin;
  margin-right: 1vmin;
  filter:drop-shadow(1px 0px 0 black);
}

.auto_checkbox {
  width: 0;
  height: 0;
  opacity: 0;
  display: none;
}

.custom_checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 8vmin;
  background: rgba(0,0,0, 0.5);
  border-radius: 3vmin;
  padding: 0.5vmin;
  margin-left: 3vmin;
}

.checkbox_value {
  height: 3vmin;
  width: 3vmin;
  border-radius: 3vmin;
  background: white;
}

.auto_checkbox:checked~.custom_checkbox {
  justify-content: flex-end;
  background: var(--color7);
}

.auto_transfer_item{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  width:100%;
  background:  rgb(185,185,185);
  padding:3vmin;
  border-radius: 1vmin;
  position:relative;
  overflow: hidden;
  margin-bottom: 5vmin;
}

.auto_transfer_item >*{
  z-index: 2;
}

.at_name{
  font-size: 5vmin;
  margin-bottom: 2vmin;
}

.at_btns button{
  border:none;
  font-size: 3.5vmin;
  padding:2vmin;
  color:black;
  font-weight: bold;
  min-width: 22vmin;
  border-radius: 2px;
}
.at_allin{
  background: var(--gradient1_180);
}
.at_allout{
  background: linear-gradient(rgb(200,200,200),grey);
}

.at_logo{
  position:absolute;
  left:2%;
  top:50%;
  transform:translateY(-50%);
  height:100%;
}

.auto_bg{
  z-index: 1;
  position:absolute;
  left:0;
  top:0;
  width:80%;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(to right, black, transparent);
  mask-image: linear-gradient(to right, black, transparent);
}