div#body_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:500px;
}

div#body_wrapper header{
position:relative;
/*border:1px solid red;*/
min-height:40px;
background:rgb(255,255,255);
padding:5px;
box-shadow:0px 0px 7px rgba(150,150,150,.3);
}

div#body_wrapper header nav{
position:absolute;
top:0px;
right:0px;
box-sizing:border-box;
padding:10px 0px 0px 0px;
/*border:1px solid red;*/
height:100%;
}

div#body_wrapper header nav ul{
position:relative;
list-style:none;
height:100%;
}

div#body_wrapper header nav ul li{
float:left;
margin:0px 20px;
height:30px;
box-sizing:border-box;
width:auto;
}

div#body_wrapper header nav ul li a{
color:#0F67B1;
display:block;
height:100%;
text-decoration:none;
font:14px notosans;
padding:3px 0px 0px 0px;
text-align:center;
} 

body#index nav#menu ul li#tab1, div#body_wrapper header nav ul li:hover,
body#buy nav#menu ul li#tab2{
background:transparent;
border-radius:0px;
border-bottom:3px solid #0F67B1;
}

body#index nav#menu ul li#tab1 a,
body#buy nav#menu ul li#tab2 a,
div#body_wrapper header nav ul li a:hover{
color:#0F67B1;
}

div#content_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:500px;
}

div#banner{
position:relative;
min-height:500px;
/*border:1px solid red;*/
display:flex;
flex-wrap:nowrap;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-image: linear-gradient(to bottom, #e4e9fd, #f7eaf8, #ffedf2, #fff3ef, #fffaf3);
box-shadow:0px 4px 5px rgba(200,200,200,.2);
}

div#banner > div{
position:relative;
/*border:1px solid red;*/
box-sizing:border-box;
}

div#banner > div:nth-child(1){
padding:30px 20px 0px 10px;
width:40%;
/*border:1px solid red;*/
}

div#banner > div:nth-child(1) figure{
/*border:1px solid red;*/
width:100px;
margin:auto auto 20px 0px;
}

div#banner > div:nth-child(1) figure img{
display:block;
margin:auto;
}

div#banner > div:nth-child(1) h5{
font-size:28px;
font-family:poppins_semibold;
}

div#banner > div:nth-child(1) p{
font-size:14px;
font-family:notosans;
line-height:1.6em;
color:rgb(90,90,90);
}

div#banner > div:nth-child(1) a{
display:block;
height:50px;
width:300px;
background:linear-gradient(90deg,#DC254F,#F6B323);
padding:13px 0px 0px 0px;
color:white;
border:0px;
margin:20px 0px 0px 0px;
font-family:roboto_regular;
font-size:16px;
border-radius:25px;
text-align:center;
text-decoration:none;
box-sizing:border-box;
}

div#banner > div:nth-child(2){
width:60%;
overflow:hidden;
}

div#banner > div:nth-child(2) svg{
/*border:1px solid red;*/
margin:0px 0px 0px 10px;
position:relative;
top:10px;
height:90%;
width:99%;
display:block;
transform:scale(1.3);
}

div#div_1{
position:relative;
padding:0px 0px 20px 0px;
min-height:400px;
/*border:1px solid red;*/
display:flex;
}

div#div_1 > div{
position:relative;
/*border:1px solid red;*/
box-sizing:border-box;
}

div#div_1 > div:nth-child(1){
position:relative;
/*border:1px solid blue;*/
width:30%;
}

div#div_1 > div:nth-child(1) figure{
/*border:1px solid red;*/
width:300px;
position:absolute;
top:-30px;
left:50px;
z-index:2;
}

div#div_1 > div:nth-child(1) figure img{
display:block;
margin:auto;
drop-shadow:0px 0px 5px rgba(50,50,50,.5);
}

div#div_1 > div:nth-child(2){
padding:10px 10px 0px 150px;
/*border:1px solid red;*/
width:70%;
}

div#div_1 > div:nth-child(2) h2{
text-align:left;
font:42px poppins_semibold;
margin:0px 0px 5px 0px;
background:linear-gradient(90deg,#87D3FF,#DC8CFC);
-webkit-text-fill-color: transparent; 
            -webkit-background-clip: text; 
}

div#div_1 > div:nth-child(2) p{
font:18px notosans;
color:rgb(50,50,50);
line-height:1.8em;
}

div#div_1 > div:nth-child(2) > div{
display:flex;
gap:30px;
flex-wrap:nowrap;
justify-content:center;
min-height:100px;
padding:50px 0px 10px 0px;
}

div#div_1 > div:nth-child(2) > div figure{
height:100px;
width:100px;
border-radius:50%;
box-shadow:0px 0px 5px rgba(90,90,90,.2),inset 0px 0px 5px rgba(100,100,100,.2);
border:5px solid rgba,(100,100,100,.2);
box-sizing:border-box;
padding:18px 0px 0px 0px;
}

div#div_1 > div:nth-child(2) > div figure img{
display:block;
margin:auto;
}

div#div_2{
position:relative;
min-height:200px;
padding:50px 50px 50px 50px;
background:#F3F3FB;
margin:50px 0px 0px 0px;

}

div#div_2 h2{
text-align:center;
font:28px poppins_semibold;
}

div#div_2 > div{
position:relative;
display:flex;
justify-content:center;
gap:10px;
margin:20px 0px 0px 0px;
}

div#div_2 > div div{
width:25%;
height:400px;
box-sizing:border-box;
padding:10px;
background:rgb(254,254,254);
border-radius:5px;
box-shadow:0px 0px 10px rgba(150,150,150,.5);
}

div#div_2 > div div figure{
width:100%;
height:60%;
box-sizing:border-box;
}

div#div_2 > div div figure img{
display:block;
width:100%;
height:100%;
}

div#div_2 > div div h5{
text-align:center;
font:18px poppins_semibold;
}

div#div_2 > div div p{
font:14px notosans;
text-align:center;
color:rgb(100,100,100);
}

div#div_3{
position:relative;
padding:50px 0px 0px 0px;
margin:0px 0px 0px 0px;
/*border:1px solid red;*/
}

div#div_3 h3{
text-align:center;
font:48px poppins_semibold;
margin:0px 0px 15px 0px;
background:linear-gradient(90deg,#87D3FF,#DC8CFC);
-webkit-text-fill-color: transparent; 
            -webkit-background-clip: text; 
}

div#div_3 > div{
display:flex;
justify-content:center;
gap:20px;
}

div#div_3 > div > div{
width:30%;
}

div#div_3 > div > div h5{
text-align:center;
font:18px poppins_semibold;
}

div#div_3 > div > div p{
text-align:center;
font:14px notosans;
color:rgb(100,100,100);
}

div#div_3 a{
display:block;
height:50px;
width:300px;
background:linear-gradient(90deg,#DC254F,#F6B323);
padding:13px 0px 0px 0px;
color:white;
border:0px;
margin:50px auto 0px auto;
font-family:roboto_regular;
font-size:16px;
border-radius:25px;
text-align:center;
text-decoration:none;
box-sizing:border-box;
}

div#div_3 > div > div figure{
/*border:1px solid red;*/
width:250px;
margin:auto;
}

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

div#div_3 > div > div:nth-child(1) figure, div#div_3 > div > div:nth-child(3) figure{
margin:20px auto 0px auto;
}

div#div_4{
position:relative;
min-height:100px;
padding:150px 100px 0px 100px;
}

div#div_4 h2{
text-align:center;
font:48px poppins_semibold;
margin:0px 0px 15px 0px;
background:linear-gradient(90deg,#87D3FF,#DC8CFC);
-webkit-text-fill-color: transparent; 
            -webkit-background-clip: text; 
}

div#div_4 p{
text-align:center;
font:22px notosans;
color:rgb(100,100,100);
line-height:1.8em;
}




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

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:70%;
margin:30px 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:40px;
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:40px;
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 20px 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:40px;
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: 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;
}

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{

}

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

div#otp_number input{
border:1px solid rgb(200,200,200);
border-radius:15px;
height:40px;
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: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:cover;
}

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;
}

/*confirmation page*/
div#confirmation_progress_div{
position:relative;
top:50px;
width:90%;
height:500px;
margin:auto;
border-radius:5px;
background:white;
/*box-shadow:0px 0px 7px rgba(150,150,150,.3);*/
box-sizing:border-box;
padding: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:cover;
}

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(200,200,200);*/
min-height:100px;
box-sizing:border-box;
padding:10px;
}

div#cards_wrapper h5{
font:14px notosans;
color:rgb(100,100,100);
text-align:center;
margin:0px 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(150,150,150);
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:separate;
}

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

div#prev_hist table tr td{
text-align:left;
font:14px notosans;
color:rgb(100,100,100);
padding:5px 0px 5px 0px;
margin:2px;
}

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;
}

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