figure#logo{
/*border:1px solid red;*/
width:160px;
margin:30px auto auto auto;
}

figure#logo img{
display:block;
margin:auto;
}

div#buy_page_wrapper{
position:relative;
padding:20px;
background-image: linear-gradient(to bottom, #e4e9fd, #f7eaf8, #ffedf2, #fff3ef, #fffaf3);
/*background:#f1f1f1;*/
min-height:950px;
}

div#placeholder{
position:absolute;
top:0px;
right:0px;
left:0px;
bottom:0px;
background:rgba(255,255,255,.9);
z-index:5;
display:none;
}

div#placeholder figure{
/*border:1px solid red;*/
width:80px;
height:80px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

div#placeholder figure img{
display:block;
margin:auto;
}

div#form_wrapper{
position:relative;
max-width:30%;
margin:20px auto auto auto;
min-height:100px;
overflow-y:scroll;
box-sizing:border-box;
padding:50px 20px 50px 20px;
/*border:1px solid rgb(230,230,230);*/
background:white;
border-radius:5px;
/*box-shadow:0px 0px 7px rgba(100,100,100,.3);*/
/*background:rgb(245,245,245);*/
}

figure#loading_gif{
/*border:1px solid red;*/
width:20%;
margin:30px auto auto auto;
display:none;
}

figure#loading_gif img{
display:block;
margin:auto;
}

div#form_wrapper form{
display:block;
width:90%;
margin:auto;
/*border:1px solid red;*/
}

div#form_wrapper form#check_transact_form div.form_struct{
position:relative;
/*border:1px solid green;*/
margin:0px 0px 10px 0px;
box-sizing:border-box;
}

div#form_wrapper form#check_transact_form div#email_div{
display:flex;
border:1px solid rgb(230,230,230);
border-radius:15px;
padding:2px;
}

div#form_wrapper form#check_transact_form div#email_div input{
display:block;
position:relative;
width:95%;
margin:auto;
height:45px;
box-sizing:border-box;
padding:5px 0px 5px 10px;
border:0px;
font:14px roboto_regular;
color:rgb(100,100,100);
/*border:1px solid red;*/
}

div#form_wrapper form div#email_div label{
display:block;
position:absolute;
z-index:1;
left:10px;
top:10px;
user-select:none;
transition:.5s all;
font:18px notosans;
color:rgb(50,50,50);
}

div#form_wrapper form div#email_div input:focus + label.form_label,
div#form_wrapper form div#email_div input:valid + label.form_label{
transform:translateY(-40px);
}

div#check_trans_sub_div{
height:50px;
}

/*div#form_wrapper form#check_transact_form div#email_div input:read-only{
background:rgb(200,200,200);
}
*/

form#check_transact_form input[type='submit']{
display:block;
background:#0D0C22;
/*background:linear-gradient(90deg,#DC254F,#F6B323);*/
width:100%;
height:100%;
border:0px;
color:/*#153137*/ white;
cursor:pointer;
font:18px roboto_regular;
border-radius:25px;
/*border:1px solid rgb(200,200,200);*/
margin:20px auto 0px auto;
}

figure#loader{
width:90%;
height:300px;
margin:20px auto auto auto;
/*border:1px solid red;*/
display:none;
}

figure#loader img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}

div#new_transaction_div{
padding:10px 0px 10px 0px;
box-sizing:border-box;
}

div#new_transaction_div > h5{
text-align:center;
font:18px poppins_semibold;
margin-bottom:5px;
color:rgb(50,50,50);
}

div#new_transaction_div > form{
position:relative;
}

div.checkout_form_struct{
position:relative;
margin:0px 0px 10px 0px;
}

div#userEmail_div{
border:1px solid rgb(200,200,200);
height:50px;
border-radius:15px;
box-sizing:border-box;

}

div#userEmail_div input{
border:0px;
display:block;
box-sizing:border-box;
width:90%;
margin:auto;
padding:0px 0px 0px 20px;
height:100%;
width:100%;
color:rgb(100,100,100);
/*border:1px solid red;*/
cursor:not-allowed;
border-radius:15px;
background:rgb(250,250,250);
}

div.checkout_form_struct input,div.checkout_form_struct select{
display:block;
}

div#card_select{
height:50px;
border:1px solid rgb(200,200,200);
border-radius:15px;
}

div#card_select > select{
height:100%;
width:100%;
background:transparent;
box-sizing:border-box;
padding:10px 10px 10px 16px;
font:14px roboto_regular;
color:rgb(100,100,100);
border:0px;
}

div#qty_amnt_div{
display:flex;
gap:10px;
}

div#qty_amnt_div > div{
width:50%;
height:40px;
margin:0px 0px 20px 0px;
}


div#qty_amnt_div div input{
height:100%;
background:transparent;
border:1px solid rgb(200,200,200);
border-radius:15px;
box-sizing:border-box;
padding:10px;
font:14px roboto_regular;
color:rgb(100,100,100);
}

div#qty_amnt_div div input[readonly]{
background:rgb(250,250,250);
cursor:no-drop;
}

div#qty_amnt_div div label{
font:14px roboto_regular;
display:block;
margin:0px 0px 5px 0px;
padding:0px 0px 0px 10px;
font:rgb(50,50,50);
}

div#payment_div > ul{
position:relative;
/*border:1px solid red;*/
list-style:none;
}

div#payment_div > ul > li{
display:block;
border:1px solid rgb(200,200,200);
height:50px;
margin:0px 0px 10px 0px;
padding:0px 10px 10px 0px;
border-radius:15px;
box-sizing:border-box;
position:relative;
}

div#payment_div > ul li > label{
display:flex;
flex-wrap:nowrap;
position:relative;
}

div#payment_div > ul li > label > input{
display:block;
position:absolute;
left:0px;
top:0px;
border:0px;
opacity:0;
}

div#payment_div > ul li > label > p{
font:14px roboto_regular;
line-height:1.2em;
margin:7px 0px 0px 50px;
}

div#payment_div > ul li > label > p > em{
font:12px roboto_regular;
line-height:1.2em;
color:rgb(100,100,100);
}

div#payment_div > ul li > label > span{
position:absolute;
top:20%;
left:10px;
display:block;
height:20px;
width:20px;
border-radius:50%;
padding:3px;
border:1px solid rgb(100,100,100);
}

div#payment_div > ul li > img{
display:block;
position:absolute;
right:20px;
top:10px;
}

div#payment_div > ul li > label > input:checked + span:after{
content:'';
display:block;
height:20px;
width:20px;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:black;
}

div#momo_auto_pay_div{
height:0px;
transition:.6s height;
box-sizing:border-box;
}

div#payment_div > ul > div.momoDrop{
height:270px;
padding:0px 0px 20px 0px;
margin:10px 0px 30px 0px;
}

div#momo_auto_pay_div > span{
display:block;
background:#FEC317;
padding:10px;
margin:20px 0px 10px 0px;
}

div#momo_manual_pay_div{
height:0px;
transition:.6s height;
box-sizing:border-box;
}

div#payment_div > ul > div.manualDrop{
height:180px;
padding:0px 0px 20px 0px;
margin:10px 0px 20px 0px;
}


div#pay_network{
height:50px;
border:1px solid rgb(200,200,200);
border-radius:15px;
}

div#pay_network > select{
height:100%;
width:100%;
background:transparent;
box-sizing:border-box;
padding:10px 10px 10px 16px;
font:14px roboto_regular;
color:rgb(100,100,100);
border:0px;
}

div#pay_number > label{
display:block;
user-select:none;
font:14px roboto_regular;
margin:0px 0px 10px 10px;
}

div#pay_number > input{
height: 50px;
width:100%;
background: transparent;
border: 1px solid rgb(200,200,200);
border-radius: 15px;
box-sizing: border-box;
padding: 10px;
font: 14px roboto_regular;
color: rgb(100,100,100);
display:block;
}

div#momo_manual_pay_div > h5{
font:14px poppins_semibold;
}

div#momo_manual_pay_div > ul{
list-style:none;
}

div#momo_manual_pay_div > ul li{
font:14px notosans;
margin:0px 0px 10px 0px;
display:flex;
gap:5px;
}

div#momo_manual_pay_div > ul > li > span.span_num{
border-radius:50%;
height:20px;
width:20px;
display:block;
background:rgb(200,200,200);
text-align:center;
box-sizing:border-box;
}

div#momo_verify_div{
height:40px;
}

div#otp_number{
margin-bottom:10px;
}

div#otp_number > label{
display:block;
user-select:none;
font:14px roboto_regular;
margin:0px 0px 10px 10px;
}

span#otp_span{
font-weight:bold;
}

div#otp_number input{
border:1px solid rgb(200,200,200);
border-radius:15px;
height:50px;
width:100%;
background: transparent;
border-radius: 15px;
box-sizing: border-box;
padding: 10px;
font: 14px roboto_regular;
color: rgb(100,100,100);
display:block;
}

div#momo_verify_div input{
height: 100%;
width:100%;
background: transparent;
border: 1px solid rgb(200,200,200);
border-radius: 15px;
box-sizing: border-box;
padding: 10px;
font: 14px roboto_regular;
color: rgb(100,100,100);
display:block;
}

#otpBtn{
font:bold 16px roboto_regular;
color:#A81616;
}


div#submit_div{
position:relative;
height:50px;
margin:10px 0px 0px 0px;
display:none;
}

#PayBtn,#verifyPayBtn{
display:block;
background:#0D0C22;
/*background:linear-gradient(90deg,#DC254F,#F6B323);*/
width:100%;
height:100%;
border:0px;
color:/*#153137*/ white;
cursor:pointer;
font:18px roboto_regular;
border-radius:25px;
/*border:1px solid rgb(200,200,200);*/
margin:20px auto 0px auto;
}

div#toggleQtyAmnt{
display:none;
}

div#togglePayments{
display:none;
}

#showQty{
color:#FF4B3A;
font:14px roboto_regular;
margin:0px 0px 0px 10px;
}

/*---------------confirmation page---------------*/
div#confirmation_progress_div{
position:relative;
top:50px;
width:400px;
height:500px;
margin:auto;
border-radius:5px;
background:white;
/*box-shadow:0px 0px 7px rgba(150,150,150,.3);*/
box-sizing:border-box;
padding:40px 10px 10px 10px;
}

div#confirmation_progress_div > figure#loading{
position:relative;
width:90%;
height:200px;
margin:auto;
/*border:1px solid red;*/
}

div#confirmation_progress_div > figure#loading img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}

p#transact_rep{
position:relative;
display:none;
}

p#pay_status{
text-align:center;
font:18px notosans;
color:rgb(100,100,100);
}

p#payRtry{
text-align:center;
font:18px notosans;
}

p#payRtry a{
text-decoration:none;
color:red;
}

figure#payApprv{
width:80%;
margin:auto;
}

figure#payApprv img{
display:block;
width:90%;
height:90%;
margin:auto;
}

div#cards_wrapper{
position:relative;
border:1px solid rgb(240,240,240);
min-height:100px;
box-sizing:border-box;
padding:20px;
border-radius:5px;
}

div#cards_wrapper h5{
font:22px notosans;
color:rgb(100,100,100);
text-align:center;
margin:30px 0px 20px 0px;
}

div#cards_wrapper div{
/*border:1px solid red;*/
margin:0px 0px 20px 0px;
box-shadow:0px 0px 7px rgba(150,150,150,.3);
padding:10px;
border-radius:5px;
}

div#cards_wrapper div ul{
list-style:none;
}

div#cards_wrapper div ul li{
margin:0px 0px 10px 0px;
padding:5px;
font:14px notosans;
}

div#cards_wrapper div ul li:first-child{
border-bottom:1px solid rgb(200,200,200);
padding:0px 0px 10px 0px;
}

figure#disp_logo{
width:130px;
margin:auto;
/*border:1px solid red;*/
}

figure#disp_logo img{
display:block;
margin:auto;
}

div#prev_hist{
position:relative;
/*border:1px solid red;*/
}

div#prev_hist h2{
text-align:center;
font:18px poppins_semibold;
margin:0px 0px 10px 0px;
}

div#prev_hist table{
display:block;
/*border:1px solid red;*/
width:100%;
border-collapse:collapse;
table-layout:fixed;
}

div#prev_hist table tr th{
text-align:center;
background:rgb(240,240,240);
padding:5px;
font:bold 16px notosans;
width:100%;
}

div#prev_hist table tr td{
font:14px notosans;
color:rgb(100,100,100);
padding:5px 0px 5px 0px;
width:auto;
text-align:left;      
vertical-align: middle; 
width:100%;
}

div#prev_hist table tr td a.status_btns{
display:block;
text-align:center;
height:30px;
width:100px;
margin:auto;
box-sizing:border-box;
padding:5px 0px 0px 0px;
text-decoration:none;
color:white;
border-radius:5px;
}

a#view_oders_btn{
background:#3E6DD6;
}

a#resum_trans_btn{
background:#38B691;
}

p#new_trans_btn{
height:40px;
width:100%;
background:#F7BA21;
box-sizing:border-box;
border-radius:5px;
margin:10px 0px 0px 0px;
}

p#new_trans_btn a{
text-align:center;
display:block;
height:100%;
padding-top:11px;
text-decoration:none;
font:14px roboto_regular;
color:white;
}

a#cancel_btn{
text-align:center;
display:block;
height:40px;
margin:0px 20px 0px 20px;
padding-top:11px;
text-decoration:none;
font:14px roboto_regular;
color:white;
background:red;
box-sizing:border-box;
border-radius:5px;
}

a.returnBtn{
display:block;
width:95%;
margin:auto;
text-align:center;
height:40px;
border-radius:15px;
background:#29d49f;
box-sizing:border-box;
padding:10px 0px 0px 0px;
font:16px roboto_regular;
color:white;
text-decoration:none;
}

a#printBtn{
position:absolute;
right:10px;
top:20px;
}


/*-------------------welcome Page -----------------------*/
.btns{
display:block;
background:#0D0C22;
/*background:linear-gradient(90deg,#DC254F,#F6B323);*/
width:250px;
height:50px;
border:0px;
color:/*#153137*/ white;
cursor:pointer;
font:14px roboto_regular;
border-radius:25px;
/*border:1px solid rgb(200,200,200);*/
box-sizing:border-box;
padding:15px 0px 0px 0px;
text-decoration:none;
text-align:center;
margin:auto;
}
.btns   :hover {
box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%), inset 0px -3px 0px #3c4fe0;
transform: translateY(-2px);
}
.btns  :active{
box-shadow: inset 0px 3px 7px #3c4fe0;
transform: translateY(2px);
}
                
#orr{
text-align:center;
margin:10px 0px 10px 0px;
font:14px notosans;
}

#welHead{
text-align:center;
margin:0px 0px 20px 0px;
font:22px poppins_semibold;
margin:0px 0px 10px 0px;
}

ul#display_previous{
list-style:none;
}

ul#display_previous li{
padding:10px;
}

ul#display_previous li:not(ul#display_previous li:last-of-type){
border-bottom:1px solid rgb(200,200,200);
}

div.head_show{
display:flex;
}

div.head_show h1{
font:14px poppins_semibold;
}

div.head_show p{
font:14px notosans;
position:absolute;
right:20px;
color:rgb(100,100,100);
}

ul#display_previous li h5{
font:14px notosans;
margin:0px 0px 5px 0px;
}

#prev_head{
font:16px poppins_semibold;
text-align:center;
text-transform:uppercase;
margin:0px 0px 10px 0px;
}

em.date_add{
display:block;
font:12px notosans;
color:rgb(100,100,100);
}

a.view_cards{
 background-color: initial;
  background: linear-gradient(0deg, rgba(20,167,62,1) 0%, rgba(102,247,113,1) 100%);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: Inter,-apple-system,system-ui,roboto_regular,"Helvetica Neue",Arial,sans-serif;
  height: 40px;
  line-height: 40px;
  outline: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 200px;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
  text-decoration:none;
margin:10px 0px 0px 0px;
}

a.view_cards:hover {
  box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
}


.confirm_cards {
  background-color: initial;
  background: #332cf2;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: Inter,-apple-system,system-ui,roboto_regular,"Helvetica Neue",Arial,sans-serif;
  height: 40px;
  line-height: 40px;
  outline: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 200px;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
  text-decoration:none;
margin:10px 0px 0px 0px;
}

.confirm_to_view{
  background-color: initial;
  background-image: linear-gradient(-180deg, #FF7E31, #E62C03);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: Inter,-apple-system,system-ui,roboto_regular,"Helvetica Neue",Arial,sans-serif;
  height: 40px;
  line-height: 40px;
  outline: 0;
  overflow: hidden;
  padding: 0 20px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  width: 200px;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
  text-decoration:none;
margin:10px 0px 0px 0px;
}

.unsuccess{
color:red;
font:14px notosans;
}

div#prevNewDiv{
display:flex;
gap:10px;
justify-content:center;
margin:0px 0px 20px 0px;
}


.reprev{
 align-items: center;
  background-color: initial;
  background-image: linear-gradient(#464d55, #25292e);
  border-radius: 8px;
  border-width: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font-family: expo-brand-demi,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 18px;
  height: 52px;
  justify-content: center;
  line-height: 1;
  margin: 0px 0px 10px 0px;
  outline: none;
  overflow: hidden;
  padding: 0 32px;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all 150ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
justify-content:center;
}