.mobile_transaction_container{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width: 320px;
  font-family: 'Be Vietnam', sans-serif;
  padding-bottom: 120px;
}


/*------------New  bottom menu bar------------------*/

.bottomBarInner{
  display:flex;
  flex-direction: row;
  justify-content: center;
  font-family: 'Be Vietnam', sans-serif;
}

.bx2{
  margin: 0 2vw;
  padding-bottom:5px;
}


/*-----------Middle child menu item extrude out a little bit------------------*/
.mobile-bottom-navbar-middle{
margin-top:-20px;
background: #5e5c47;
border-radius: 50px;
width: 60px;
}

.bx2 a{
  display:flex;
  flex-direction:column;
  align-items: center;
  text-decoration: none;
  color:#fff;
}

.bx2 img{
  max-width: 40px;
}

/*-----------Middle child icon bigger------------------*/
.mobile-bottom-navbar-middle-img{
  max-width: 60px !important;
  width: 60px !important;
}

.bx2 span{
  white-space: nowrap;
  text-align: center;
  flex-basis: 0;
}

/*------------New  bottom menu bar Ends------------------*/


/*-__________________________Trnsaction Enquiry page_________________________________________-*/


/*------------Header------------------*/

/* .mobile_transaction_header{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}


.header_right{
  display:flex;
  align-items: center;
  margin-right: 5px;
}

.header_right a{
  color:white;
  text-decoration: none;
  font-weight: bold;
  margin-right: 5px;
} */





/*------------User info------------------*/

.mobile_trans_user_container{
  display:flex;
  flex-direction:row;
  align-items: center;
  margin-top:5px;
  width:100%;
}

.mobile_trans_user_container>div{
  flex:3;
  text-align: right;
}

.mobile_trans_user{
  flex:1;
  display:flex;
  align-items: center;
  justify-content: center;
}

.mobile_trans_user img{
  max-width: 40px;
  margin-right: 5px;
}

/* #username{
  font-size:18px;
  font-weight: bold;
} */

.refresh{
  margin-right: 5px;
}


/*------------Main wallet amount-----------------*/

.mobile_trans_main_wallet{
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: flex-start;
  padding:5px 10px;
  margin:10px 2vw;
  background:linear-gradient(white,var(--background));
  box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 3px 3px 8px rgb(25,25,25);
  border-radius: 5px;
}

.mobile_trans_main_wallet span{
  text-align: center;
  font-size:3vw;
  font-weight: bold;
}

#main_wallet_amount{
  margin-left: 2vw;
  font-weight: normal;
}

/*------------Navigation bar------------------*/

.bank_nav{
  display:flex;
  flex-direction:row;
  align-items: flex-start;
  justify-content: center;
  background-color: #615c49;
  padding:5px 0;
  min-width: 320px;
}

.bank_nav_item{
  flex:1;
  display:flex;
  flex-direction:  column;
  align-items: center;
  text-align: center;
  text-decoration: none;
}

.bank_nav_item img{
  width:10vw;
  min-width: 30px;
  max-width: 70px;
}

.bank_nav_item span{
	font-size: 11px;
	color: white;
	font-weight: bold;
}

#bank_nav_active span{
	color: #FFB600;
}

/*___________________________Deposit page___________________________________________________*/

/*------------------------------------------*/
/*--*/
/*------Transaction Content------------------*/
/*--*/
/*------------------------------------------*/

.transaction_content{
  flex:4;
  background-color: white;
  display:flex;
  flex-direction:column;
  box-sizing: border-box;
  margin:20px 5px;
  max-width:100vw;
  min-width: 310px;
}

/*--------Deposit method selection-----*/

.method_title{
  display:flex;
  flex-direction:row;
  align-items: center;
  font-size:15px;
  font-weight: bold;
  color: white;
  background-color: var(--primary);
  padding-left: 20px;
  height:40px;
}

.method_logo {
  width:30px;
  margin-right:15px;
}

.method_logo img{
  width: 100%;
}

.method_options{
  margin: 15px;
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;
}

.method_options .radio_btn_img{
  min-height: 35px;
  max-height:80px;
  height:10vmin;
}
/*.fund_method .radio_btn_img{
  min-height: 35px;
  max-height:80px;
  height:10vmin;
}*/


/* --------All radio button selection setting, use image instead of default radio button------- */
/* HIDE RADIO */
[type=radio] {
  opacity: 0;
  width: 0;
  height: 0;
  display:none;
}

/* IMAGE STYLES */
[type=radio] + .radio_btn_img {
  cursor: pointer;
  filter:grayscale(100%);
  transition:filter .5s;
  box-sizing: border-box;
}

[type=radio]:hover + .radio_btn_img:hover{
    filter:none;
}

/* CHECKED STYLES */
[type=radio]:checked + .radio_btn_img {
  filter:none;
}

/* ____Image that need lower brightness________ */
.img_dark{
  filter:grayscale(100%) brightness(40%) !important;
}

[type=radio]:checked + .img_dark {
  filter:none !important;
}
/* ___________*/



.method_options_label, .bank_options_label, .promotion_options_label{
position:relative;
}

.method_options_label{
  display:flex;
  align-items: center;
}



.method_options >div{  /* ----Method option container-------- */
  margin-right: 25px;
  display:flex;
  flex-direction:row;
  align-items: center;
}
/* -------------------------------------------- */

/* '+' Expand icon for deposit method selection */
/* '-' Collapse icon when deposit method is expanded */
.plus_icon, .minus_icon{
  width: 5vw;
  height:auto;
  min-height: auto;
  min-width: 20px;
  max-height:auto;
  max-width:40px;
  margin-left: 10px;
  cursor: pointer;
}

.minus_icon{
display:none;
}


/* Green tick for all radio button selection */
.green_tick_icon{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  height:20px;
  display:none;
}

/*----------------------------------------------------------------
*
*    Deposit form fill in details
*
--------------------------------------------------------------*/


/*-----Deposit content general setting-----------------*/
.deposit_bank_title{
  font-size: 13px;
  font-weight: bold;
}

.deposit_info{
  margin:0 10px 20px 10px;
  display:none;
}

.deposit_info fieldset{
  padding:0 10px;
  margin:20px 0px;
  border:solid black 1px;
  max-width:100%;
  min-width: 260px;
}

.deposit_info legend{
  font-size:12px;
  font-weight: bold;
}

.bank_options_label{
  display:flex;
  justify-content: center;
}

/*---Mobile site----------------*/

.deposit_bank_container{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.deposit_bank_container .bank_options_label{
  margin:10px 10px 10px 0;
}

.deposit_bank_container .bank_options_label .radio_btn_img{
  border:solid 2px black;
  max-width: 120px;
}

/*---Deposit bank details, display when bank is selected----------------*/


#deposit_bank_details{
  padding:10px;
  border:solid 1px black;
  margin:5px auto;
  position: relative;
  display:none;
}

#deposit_bank_name{
  position:absolute;
  top:0px;
  font-size:12px;
  font-weight: bold;
}

.bank_details {
  display:none;
}

.bank_accountNumber_container, .bank_accountName_container{
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  margin:10px 0;
}

.bank_accountNumber_container span, .bank_accountName_container span{
  border:solid 1px black;
  border-radius: 2px;
  width:100%;
  padding:5px 10px;
  white-space: nowrap;
  overflow: auto;
}

.copy_icon{
  max-width: 20px;
  margin-left: 10px;
}



/*---Desktop site---------

.deposit_bank{
  margin:0 auto;
  width:100%;
  min-width: 225px;
  text-align: center;
  border-collapse: collapse;
  font-size: 10px;
}

.deposit_bank td, .deposit_bank th{
  vertical-align: middle;
  border:solid 1px black;
}


.deposit_bank th{
  padding:5px 2px;
  background-color:var(--primary);
  color:white;
}

.deposit_bank img{
  max-width: 40px;
  padding:3px;
}

/*---QR code link----
.deposit_bank a{
  font-weight: bold;
  text-decoration: underline;
}

.deposit_bank a:hover{
  color:red;
}

-----*/


/*-----Mob version-------*/

.deposit_amount_container{
  flex:1;
  display:flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.deposit_amount_input::placeholder{
  opacity: .6;
  font-style: italic;
}

/*-----Deposit amount shortcut button-----------------*/

.deposit_button_container{
  margin:10px 0;
}

.deposit_amount_button{
  background: var(--primary);
  color:white;
  font-weight: bold;
  box-shadow: 2px 2px 2px black;
  margin-right: 2px;
  padding:5px 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor:pointer;
}

.deposit_amount_button:hover{
  background: black;
  color:var(--primary);
}


.deposit_details_mob{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  margin:10px 0 20px 0;
}

.deposit_details_input{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top:20px;
}

.deposit_details_input >span:nth-child(1){
  width:180px;
}

.deposit_details_input>span{
  font-style: italic;
  font-size: 11px;
  margin-bottom:2px;
  margin-right: 15px;
}

.deposit_details_mob input, .deposit_details_mob select{
  background: transparent;
  box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2);
  width: 100%;
  height:18px;
  min-width: 250px;
  max-width: 300px;
  font-size: 12px;
  margin-right: 10px;
}

.deposit_details_mob select{
  height:25px;
}

.deposit_details_mob input[type='file']{
  height:25px;
}

.date_time_input input{
  min-width: 95px;
  max-width: 105px;
}

.date_time_input{
  white-space: wrap;
  display: flex;
}

.date_time_input select{
	min-width: 40px;
	max-width: 50px;
}


/*-----------------------------------------------------------
*
*   Bank selection for Online Banking method
*
--------------------------------------------------------------*/

.online_bank_container{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin:15px 0;
}

.online_bank_container .bank_options{
  margin:5px 5px;
  border:solid 2px black;
}

/*----Bank image------*/
.online_bank_container .bank_options_label img:nth-child(2){
  max-width: 120px;
}


/*---------------------------------------------------
*
*    Promotion radio button
*
----------------------------------------------------*/

.deposit_promotion{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  align-items:flex-start;
  margin-top: 20px;
  /* max-width: 100%;
  min-width: 275px; */
}

/*.promotion_options_label{
  margin-right: 20px;
}*/

.do_not_want_promo{
	width:100%;
	max-width: 250px;
	display: flex;
	align-items: center;
	margin:10px 0 20px 0;
}

.promo_text{
  font-size:14px;
  font-weight: bold;
  text-decoration: underline;
}

.promo_img{
  /*max-width: 250px;
  min-width: 200px;*/
  max-width: 100%;
  min-width: 100%;
  padding:10px;
}

.no_promo {
  opacity:1;
  width: 10px;
  height: 10px;
  margin:10px 5px 0px 1px;
  display:inline-block;
}

.no_promo_text{
  font-size:11px;
  font-weight: bold;
}

.required_fieldset{
  box-sizing: border-box;
  width:100%;
  max-width: 300px;
}

.promo_agreement{
  width:100%;
  max-width: 250px;
  display: flex;
  align-items: center;
  margin:10px 0 20px 0;
}

.promo_checkbox{
  margin-right: 5px;
}

.promo_checkbox_text{
  font-size:10px;
}

/*---------------------------------------------------
*
*    Submit button
*
----------------------------------------------------*/

.deposit_submit{
  padding:10px 20px;
  margin: 50px 0 50px 0;
  background-color: var(--primary);
  color:white;
  font-size:16px;
  font-weight: bold;
  border:none;
  filter:drop-shadow(2px 2px 2px black);
  cursor: pointer;
  transition:.3s;
  text-decoration: none;
}

.deposit_submit:hover{
  filter:none;
  filter:brightness(150%);
}

/*----------------------------------------------------------
*
*    Pop up box
*
*---------------------------------------------------------*/

/* The Modal (background) */
.qr_popup {
  display:none;
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100vw; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.qr_popup_content {
  margin: auto;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width: 200px;
  min-width: 100px;
}

/* Pop up close icon */
.qr_popup_close{
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.qr_popup_close:hover,.qr_popup_close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}


/* Caption of Modal Image */
#qr_popup_caption {
  margin: auto;
  display: block;
  max-width: 100px;
  max-width: 100px;
  font-size: 20px;
  text-align: center;
  color: white;
}


/*----------------------------------------------------------
*
*    Bitcoin and tether  amount conversion section
*
*---------------------------------------------------------*/


/*------Bitcoin & tether deposit section-------------------*/

.crypto_deposit_container{
  display:flex;
  flex-direction:column;
  align-items: stretch;
  justify-content: flex-start;
  font-size: 12px;
}

.crypto_icon{
  max-width: 20px;
  margin:0 2px 0 15px;
}

.crypto_deposit_container span{
    white-space: nowrap;
}

.market_price_container, .last_update_container, .deposit_address_container{
  display:flex;
  align-items: center;
  margin:10px 25px 10px 0;
}

.deposit_address_container{
  align-items: flex-start;
  margin-top:15px;
}

#bitcoin_market_price, #usdt_market_price{
  border:solid white;
  box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2);
  padding:5px 8px;
  margin-left: 5px;
}

#bitcoin_update_date, #bitcoin_update_time, #usdt_update_date, #usdt_update_time, #usdt_deposit_address{
  margin-left:5px;
}

#usdt_deposit_address{
  margin-left:10px;
  white-space: normal;
  display:block;
  width:160px;
  word-wrap:break-word;
}


.guarantee_timer{
  font-style: italic;
  color:grey;
  margin-left: 10px;
}

/*---------- Crypto currency conversion------------------------*/

.conversion_container{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  margin:10px 0 20px 0;
}

.conversion_container input{
  background: transparent;
  box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.2);
  height:20px;
  width:80%;
  max-width: 300px;
  margin-bottom:5px;
}

.conversion_container_right{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  flex:3;
  margin-top: 15px;
  font-size: 12px;
}

.conversion_button{
  cursor:pointer;
  background-color: var(--primary);
  padding:5px 10px;
  margin-top:10px;
  color:white;
  box-shadow: 1px 1px 5px black;
}

.conversion_button:hover{
  box-shadow: none;
}

.conversion_container_left{
  flex:2;
}

.conversion_table{
width: 100%;
max-width: 500px;
margin:10px 0;
border:solid 1px black;
}

.conversion_table td, .conversion_table th{
  vertical-align: middle;
  text-align: left;
  padding:5px 5px;
  font-size: 10px;
  font-weight: bold;
}

.conversion_table th{
  background-color: var(--primary);
  text-align: center;
  color:white;
  font-size:12px;
}


/*___________________________Transaction Enquiry page___________________________________________________*/

/*------------------------------------------*/
/*--*/
/*------Enquiry Content------------------*/
/*--*/
/*------------------------------------------*/


.mobile_trans_transfer{
  display:flex;
  flex-direction:column;
  align-items: stretch;
  margin:8px;
}

.enquiry_item{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  align-items: center;
  padding:5px 8px;
  border-bottom:solid 1px var(--primary);
  box-shadow: 2px 2px 5px rgb(30,30,30);
  border-radius: 5px;
  margin-top:10px;
  background:linear-gradient(white,var(--background));
  font-size:13px;
  height:20px;
  font-weight: bold;
}

#transfer_main_btn{
  margin:10px 15px;
  align-self: stretch;
  padding:5px 0;
  background-color: var(--primary);
  color:white;
  border:none;
  box-shadow: 2px 2px 5px rgb(30,30,30);
}

/* Copied Popup container */
.copiedTooltipPopup {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

/* The actual popup (appears on top) */
.copiedTooltipPopup .copiedTooltipPopupSpan {
	visibility: hidden;
	font-size: 10px;
	width: 60px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 8px 0;
	position: absolute;
	z-index: 1;
	border: none;
}

/* Popup arrow */
/* .copiedTooltipPopup .copiedTooltipPopupSpan::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
} */

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.copiedTooltipPopup .show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity:1 ;}
}