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

div#body_wrapper header, div#history_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, div#history_body_wrapper nav{
position:relative;
top:0px;
right:0px;
box-sizing:border-box;
padding:10px 0px 0px 0px;
/*border:1px solid red;*/
height:50px;
}

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

div#body_wrapper header nav ul li, div#history_body_wrapper header nav ul li{
margin:0px 7px;
height:30px;
box-sizing:border-box;
width:80px;
padding:0px 5px 0px 2px;
/*border:1px solid red;*/
}

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

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

div#banner{
position:relative;
height:600px;
/*border:1px solid red;*/
display:flex;
flex-wrap:wrap;
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;
width:100%;
flex:1 12;
}

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

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

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

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

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;
margin:auto;
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){
display:none'
}

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

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

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

div#div_1 > div:nth-child(1) figure{
/*border:1px solid red;*/
width:250px;
position:absolute;
top:-100px;
left:10px;
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:500px 10px 0px 10px;
/*border:1px solid red;*/
width:100%;
}

div#div_1 > div:nth-child(2) h2{
text-align:center;
font:18px 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:14px notosans;
color:rgb(50,50,50);
line-height:1.8em;
}

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

div#div_1 > div:nth-child(2) > div figure{
height:100px;
width:25%;
/*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;
/*border:1px solid red;*/
}

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

div#div_2{
position:relative;
min-height:200px;
padding:50px 10px 50px 10px;
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;
flex-wrap:wrap;
justify-content:center;
gap:5px;
margin:20px 0px 0px 0px;
}

div#div_2 > div div{
width:90%;
height:400px;
box-sizing:border-box;
padding:10px 10px 20px 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:90%;
margin:5px auto auto auto;
height:80%;
/*border:1px solid red;*/
box-sizing:border-box;
}

div#div_2 > div div figure img{
display:block;
width:80%;
height:100%;
margin:auto;
object-fit:contain;
}

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:20px 0px 0px 0px;
margin:0px 0px 0px 0px;
/*border:1px solid red;*/
}

div#div_3 h3{
text-align:center;
font:28px 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;
flex-wrap:wrap;
justify-content:center;
gap:5px;
}

div#div_3 > div > div{
width:100%;
/*border:1px solid red;*/
}

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:50px 10px 0px 10px;
}

div#div_4 h2{
text-align:center;
font:32px 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:18px notosans;
color:rgb(100,100,100);
line-height:1.8em;
}
/*----------------------------*/
footer{
background:#1A2130;
padding:20px 5px 20px 5px;
border-top:10px solid #F7BA21;
}

footer figure{
margin:auto;
width:40%;
/*border:1px solid white;*/
margin:0px auto 10px auto;
}

footer figure img{
display:block;
margin:auto;
width:100%;
height:100%;
}

footer p{
text-align:center;
font:16px notosans;
color:white;
margin:5px 0px 0px 0px;
}


/*------------support-----------------*/
div#support_div,div#about_div{
position:relative;
padding:10px;
width:80%;
margin:auto;
}

figure#page_header{
height:250px;
margin:0px 0px 30px 0px;
}

figure#page_header img{
height:100%;
width:100%;
display:block;
}

div#support_div > h1, div#about_div h1{
font:32px poppins_semibold;
}

div#support_div > p, div#about_div p{
font:14px notosans;
color:rgb(50,50,50);
line-height:1.8em;
margin:0px 0px 10px 0px;
}

div#faq_div{
position:relative;
/*border:1px solid red;*/
min-height:600px;
box-sizing:border-box;
margin:40px 0px 0px 0px;
}

div#sideBar{
position:relative;
top:0px;
left:0px;
width:98%;
bottom:0px;
margin:auto;
}

div#sideBar div{
background:#D0FE90;
padding:20px;
}

div#sideBar div h2{
font:22px poppins_semibold;
margin:10px 0px 0px 0px;
}

div#sideBar div p{
font:14px notosans;
line-height:1.5em;
}

div#sideBar div ul{
list-style:none;
margin:10px 0px 5px 0px;
}

div#sideBar div ul li{
font:14px notosans;
line-height:1.5em;
border-bottom:1px solid rgba(50,50,50,.5);
margin:0px 0px 5px 0px;
padding:2px;
}

div#support_main{
position:relative;
min-height:500px;
margin:0px 10px 0px 10px;
padding:0px 0px 20px 0px;
box-sizing:border-box;
}

div#support_main article{
position:relative;
}

div#support_main article h2{
font:22px poppins_semibold;
}

div#support_main article > h4{
font:bold 14px notosans;
color:rgb(100,100,100);
}

div#support_main article ul{
list-style:none;
margin:10px 0px 10px 0px;
}

div#support_main article li{
padding:5px;
margin:0px 0px 20px 0px;
}

div#support_main article ul li h5{
font:18px poppins_semibold;
}

div#support_main article ul li p{
font:16px notosans;
line-height:1.5em;
}

div#support_main article div h4{
font:20px poppins_semibold;
}

div#support_main article div h4 + p{
font:14px poppins_semibold;
color:rgb(100,100,100);
margin:5px 0px 5px 0px;
}

div#support_main article div ol li,div#about_div article div ul li{
font:16px notosans;
line-height:1.5em;
}

div#about_div article div ul li{
font:16px notosans;
line-height:1.5em;
list-style:disc;
}

div#support_main article div p{
font:16px notosans;
line-height:1.6em;
margin:0px 0px 10px 0px;
}

/*floating bar*/
div#floating_bar{
position:fixed;
z-index:5;
height:100px;
width:60px;
border-radius:5px;
right:20px;
top:200px;
background:rgba(255,255,255,.5);
box-shadow:0px 0px 5px rgba(200,200,200,.3);
}

div#floating_bar span{
display:block;
/*border:1px solid red;*/
height:50px;
box-sizing:border-box;
padding:8px;
}

div#floating_bar span a{
display:block;
height:100%;

}

div#floating_bar span a img{
display:block;
margin:auto;
}

div#response_cont{
position:absolute;
width:0px;
min-height:200px;
background:white;
top:0px;
right:70px;
border-radius:5px;
box-sizing:border-box;
padding:0px;
box-shadow:0px 0px 8px rgba(100,100,100,.3);
overflow:hidden;
transition:.8s all;
}

div#response_cont form{
position:relative;
margin:20px 0px 0px 0px;
}

div.form_fields{
border:1px solid rgb(200,200,200);
box-sizing:border-box;
margin:0px 0px 10px 0px;
padding:10px;
}

div.form_fields label{
display:block;
font:16px notosans;
padding:0px 0px 5px 0px;
color:rgb(100,100,100);
}

div.form_fields input{
display:block;
font:16px notosans;
width:100%;
box-sizing:border-box;
height:50px;
border:0px;
padding:0px 0px 0px 10px;
}

div.form_fields textarea{
display:block;
font:14px notosans;
width:100%;
box-sizing:border-box;
height:180px;
border:0px;
padding:0px 0px 0px 10px;
}

input#feedback_btn{
display:block;
height:60px;
width:100%;
cursor:pointer;
background:black;
border:1px solid rgb(100,100,100);
border-radius:5px;
color:white;
font:22px roboto_regular;
}

span#feedbackMain div.showFeedBack{
width:500px;
padding:10px 20px 10px 20px;
}

span#clsBtn{
display:block;
position:absolute;
right:10px;
top:10px;
font:bold 16px roboto_regular;
cursor:pointer;
}

div#response_cont > p{
font:16px poppins_semibold;
color:rgb(50,50,50);
text-align:center;
}

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

div#cover img{
display:block;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

.return_err_msg{
font:14px notosans;
color:white;
color:#FF4B3A;
padding:10px;
border-radius:5px;
width:95%;
margin:2px auto auto 10px;
}

.addMsgSucc{
background:#D0FE90;
padding:10px;
text-align:center;
box-sizing:border-box;
width:80%;
margin:50px auto auto auto;
border-radius:5px;
font:14px notosans;
}

.addMsgSucc a{
text-decoration:none;
font:14px notosans;
color:rgb(10,10,10);
display:block;
margin:10px 0px 0px 0px;
text-align:center;
}

.retnBtn{
display:block;
text-align:center;
font:14px notosans;
color:red;
text-decoration:none;
}

/* Buy*/
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:10px 20px 80px 20px;
background:#F2F3F6;
min-height:800px;
}

h5.welcm{
text-align:center;
font: 28px notosans;
margin:0px 0px 30px 0px;
}

div#new_transaction_div > p{
font:12px notosans;
background:#EBF8A4;
padding:10px;
}

.showerror{
font:10px notosans;
background:#FFEEEE url('../images/alert.png') no-repeat 5px center;
color:#CD3333;
margin:5px 0px 10px 2px;
padding:10px 10px 10px 28px;
box-sizing:border-box;
}

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:98%;
margin:20px auto auto auto;
min-height:50px;
padding:0px 0px 20px 0px;

overflow-y:scroll;
box-sizing:border-box;
padding:20px 5px 50px 5px;
/*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);*/

}

div#form_wrapper{
max-height:800px;
transition:.5s height;
}

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

figure#loading_gif img{
display:block;
margin:auto;
width:99%;
object-fit:contain;
}

div#form_wrapper form{
display:block;
width:90%;
margin:40px auto auto 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;
display:none;
}

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

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

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

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

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:22px poppins_semibold;
margin-bottom:5px;
color:rgb(50,50,50);
}

div#new_transaction_div > form{
position:relative;
}

div.checkout_form_struct{
position:relative;
}

div#userEmail_div{
border:1px solid rgb(230,230,230);
height:60px;
border-radius:5px;
box-sizing:border-box;
margin:0px 0px 10px 0px;
}

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);
font:14px notosans;
}

div#service_select_div{
/*border:1px solid red;*/
position:relative;
margin:0px 0px 10px 0px;
}

div#service_select_div > label{
display:block;
font:bold 18px notosans;
margin:0px 0px 10px 0px;
}

div#service_select_div > div{
display:flex;
gap:20px;
}

div#service_select_div > div label{
width:50%;
display:block;
margin:0px 0px 5px 0px;
padding:20px;
font:rgb(50,50,50);
position:relative;
box-shadow:0px 0px 4px rgba(100,100,100,.2);
display:flex;
flex-wrap:wrap;
gap:20px;
position:relative;
color:rgb(100,100,100);
border-radius:5px;
background:rgb(254,254,254);
transition:.5s all;
box-sizing:border-box;
height:120px;
}

div#service_select_div > div label:has(input[type="radio"]:checked),
div#service_select_div > div label:has(input[type="radio"]:not(checked)):hover{
border:1px solid #407BFF;
box-shadow:0px;
color:rgb(10,10,10);
}

div#service_select_div > div label input{
display:block;
position:absolute;
left:0px;
top:0px;
border:0px;
height:0px;
width:0px;
}

div#service_select_div > div label p{
font:14px notosans;
text-align:center;
margin:0px 0px 0px 0px;
}

div#service_select_div > div label span{
display:block;
position:relative;
left:auto;
top:auto;
transform:none;
height:15px;
width:15px;
margin:auto;
border: 1px solid rgb(200,200,200);
border-radius:50%;
background:white;
}

div#display_qty_error{
position:relative;
}

.custom_service_button:after{
content:'';
display:block;
height:10px;
width:10px;
border-radius:50%;
position:absolute;
z-index:1;
left:50%;
top:50%;
transform:translate(-50%,-50%);
transition:.3s all;
}

div#service_select_div > div label input:checked ~ .custom_service_button:after{
border:8px solid #407BFF;
}

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

div#service_select_rpt{
position:relative;
display:none;
}

div#service_select_rpt > div{
height:50px;
border:1px solid rgb(200,200,200);
border-radius:5px;
}

div#service_select_rpt label{
display:block;
font:bold 18px notosans;
margin:0px 0px 10px 0px;
}

div#service_select_rpt > div 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:20px;
margin:10px 0px 10px 0px;
}

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


div#qty_amnt_div div input{
height:100%;
width:100%;
background:transparent;
border:1px solid rgb(200,200,200);
border-radius:5px;
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:bold 14px notosans;
display:block;
margin:0px 0px 5px 0px;
padding:0px 0px 0px 10px;
font:rgb(50,50,50);
}

div#payment_div{
margin:10px 0px 0px 0px;
}

div#payment_div > label{
display:block;
margin:10px 0px 5px 0px;
font:bold 16px notosans;
}

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

div#payment_div > ul > li{
display:block;
border:1px solid rgb(200,200,200);
height:70px;
margin:10px 0px 20px 0px;
padding:0px 10px 10px 0px;
border-radius:5px;
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;
text-align:center;
}

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;
margin:auto;
position:absolute;
right:5px;
top:20px;
}

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

.rptSucss{
margin:auto;
background:#E6F1E8;
padding:10px;
color:#257739;
font:14px notosans;
}

.requestLoad{
margin:10px 0px 10px 0px;
font:bold 16px notosans;
color:#177265;
text-align:center;
}

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

/*div#payment_div > ul > div.momoDrop{
height:280px;
padding:0px 0px 30px 0px;
margin:10px 0px 30px 0px;
}*/

div#momo_auto_pay_div > span{
display:block;
background:/*#FEC317*/#F7F794;
padding:10px;
margin:5px 0px 10px 0px;
font:14px notosans;
}

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:5px;
}

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,div#payment_form_div label{
display:block;
user-select:none;
font:bold 16px notosans;
margin:5px 0px 5px 10px;
}

div#pay_number > input{
height: 50px;
width:100%;
background: transparent;
border: 1px solid rgb(200,200,200);
border-radius: 5px;
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;
padding:0px 0px 20px 0px;
}

div#otp_number{
margin:10px 0px 10px 0px;
display:none;
}

div#otp_number > label{
display:block;
user-select:none;
font:bold 16px notosans;
margin:0px 0px 5px 10px;
}

span#otp_span{
font-weight:bold;
}

div#otp_rpt{
position:relative;
margin:0px 0px 10px 0px;
}

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

#otpBtn{
display:inline-block;
font:bold 12px roboto_regular;
color:white;
background:red;
height:50px;
padding:5px;
box-sizing:border-box;
text-align:center;
text-decoration:none;
width:100%;
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: inline-block;
  font-family: roboto_regular,"Helvetica Neue",Arial,sans-serif;
  line-height: 40px;
  outline: 0;
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
  white-space: nowrap;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
}

.button-42 {
  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: inline-block;
  font-family: Inter,-apple-system,system-ui,Roboto,"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: 100%;
  z-index: 9;
  border: 0;
  transition: box-shadow .2s;
}

#otpBtn:hover {
  box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
}


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;
margin:10px 0px 50px 0px;
padding:0px 0px 60px 0px;
}

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

/*---------------confirmation page---------------*/
div#confirmation_progress_div{
position:relative;
top:50px;
width:80%;
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 h4{
font:18px notosans;
color:rgb(10,10,10);
text-align:center;
margin:20px 0px 20px 0px;
}

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#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.payAprvDiv{
width:30%;
margin:auto;
height:300px;
box-shadow:0px 0px 3px rgb(200,200,200);
}

div.payAprvDiv figure{
height:150px;
background:green;
box-sizing:border-box;
padding:20px 0px 0px 0px;
}

div.payAprvDiv figure img{
display:block;
margin:auto;
width:30%;
}

div.payAprvDiv p{
margin:20px;
font:14px notosans;
text-align:center;
}

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

/*-------------------welcome Page -----------------------*/
.btns{
display:block;
background:#0D0C22;
/*background:linear-gradient(90deg,#DC254F,#F6B323);*/
width:90%;
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;
}

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

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

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

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

div#cards_wrapper > div{
position:relative;
/*border:1px solid blue;*/
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
}

div#cards_wrapper > div > div{
margin:0px 0px 20px 0px;
/*box-shadow:0px 0px 7px rgba(150,150,150,.3);*/
border-radius:5px;
width:99%;
height:400px;
background:#F7F7F7;
position:relative;
box-sizing:border-box;
position:relative;
}

div#cards_wrapper > div > div div:nth-child(1){
background:#0A1243;
padding:20px;
position:relative;
}

div#cards_wrapper > div > div div:nth-child(1) h5{
text-align:center;
color:white;
font:bold 14px notosans;
margin:20px 0px 0px 0px;
}

div#cards_wrapper > div > div div:nth-child(2){
padding:20px;
position:relative;
}

div#cards_wrapper > div > div div:nth-child(2) ul{
list-style:none;
margin:0px 0px 10px 0px;
}

div#cards_wrapper > div > div div:nth-child(2) ul li{
display:block;
font:18px notosans;
padding:5px 0px 5px 0px;
}

div#cards_wrapper > div > div div:nth-child(2) ul li{
border-bottom:1px solid rgb(20,20,20);
}

div#cards_wrapper > div > div div:nth-child(2) ul li span{
display:block;
font:bold 18px notosans;
}

div#cards_wrapper > div > div div:nth-child(2) h6{
font:bold 14px notosans;
margin:0px 0px 10px 0px;
}

div#cards_wrapper > div > div div:nth-child(2) p,div#cards_wrapper > div > div div:nth-child(2) a{
font:bold 12px notosans;
text-align:center;
}

div#cards_wrapper > div > div div:nth-child(2) a{
display:block;
text-decoration:none;
}

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

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

div#return_print{
display:flex;
gap:10px;
justify-content:center;
}

div#return_print a{
display:block;
width:150px;
height:40px;
text-align:center;
text-decoration:none;
background:blue;
color:white;
box-sizing:border-box;
padding:10px 0px 0px 0px;
font:14px notosans;
}

div#return_print a:nth-child(1){
background:#A81616 url('../images/printer.png') no-repeat 20px center;
}

div#return_print a:nth-child(2){
background:#9BCF53;
}


/*****dashboard*********/
a#display_menu{
display:block;
position:absolute;
right:30px;
top:10px;
z-index:2;
}

div#dashboard_wrapper header > div:nth-child(3){
/*border:1px solid red;*/
margin:0px 0px 0px 1px;
}

div#dash_menu_div{
position:fixed;
z-index:1;
left:-200px;
height:100%;
top:0px;
width:200px;
background:white;
padding:10px 10px 10px 10px;
box-sizing:border-box;
box-shadow:0px 2px 3px rgba(200,200,200,.3);
transition:all .8s;
}

div#dashboard_body_wrapper div.slideLeft{
transform:translateX(200px);
}

div#dashboard_wrapper header{
position:relative;
background:rgb(255,255,255);
box-sizing:border-box;
display:flex;
gap:10px;
border-radius:5px;
padding:5px;
/*border:1px solid red;*/
}

div#dashboard_wrapper header > div{
position:relative;
box-sizing:border-box;
}

div#dashboard_wrapper header > div h5{
font:bold 16px notosans;
text-align:left;
}

div#dashboard_wrapper header > div:nth-child(1){
width:40%;
padding:5px 0px 5px 2px;
margin:0px 0px 0px 5px;
}

div#dashboard_wrapper header > div:nth-child(2)/*div#user_interact*/{
display:flex;
gap:4px;
/*border:1px solid red;*/
}

div#transactions_body,div#stock_body,div#dash_main_content{
position:relative;
/*border:1px solid green;*/
margin:0px 0px 0px 5px;
min-height:500px;
padding:30px 5px 5px 5px;
box-sizing:border-box;
}

div#dash_stats{
position:relative;
min-height:150px;
box-sizing:border-box;
padding:10px;
/*border:1px solid red;*/
display:flex;
flex-wrap:wrap;
gap:20px;
}

div#dash_stats > div{
position:relative;
width:98%;
min-height:40px;
border-radius:5px;
box-sizing:border-box;
padding:20px;
box-shadow:0px 0px 3px rgba(200,200,200,.5);
}

div#transaction_div{
height:40px;
border-radius:20px;
box-sizing:border-box;
padding:4px 0px 10px 15px;
/*background:#FAFAF9;*/
position:relative;
box-shadow:none;
}

div#trans_stats{
min-height:50px;
/*border:1px solid red;*/
margin:10px 0px 0px 0px;
display:flex;
flex-wrap:nowrap;
gap:10px;
}

div#overviews{
height:200px;
}

div#trans_stats > div:nth-child(2){
display:flex;
flex-wrap:wrap;
/*border:1px solid rgb(200,200,200);*/
}

div#trans_stats > div:nth-child(2) p{
font:14px roboto_regular;
box-sizing:border-box;
padding:12px 0px 0px 5px;
}

p#today_trans{
width:100%;
border:0px;
border-radius:10px;
}

p#new_trans{
background:transparent;
}

div#dash_sum_div_1{
width:98%;
/*border:1px solid red;*/
}

div#dash_sum_div_2{
position:relative;
display:flex;
flex-wrap:wrap;
width:98%;
/*border:1px solid red;*/
gap:20px;
}

div#dash_sum_div_2 div:nth-child(1){
/*border:1px solid red;*/
width:100%;
overflow:scroll;
/*background:#FBFBFB;*/
box-shadow:0px 0px 5px rgba(100,100,100,.2);
}

div#dash_sum_div_2 div:nth-child(2){
/*border:1px solid blue;*/
width:100%;
border-radius:10px;
background:#4A102A;
padding:20px 0px 0px 40px;
}


/*floating bar*/
div#floating_bar{
position:fixed;
z-index:5;
height:100px;
width:60px;
border-radius:5px;
right:10px;
top:50px;
background:rgba(255,255,255,.5);
box-shadow:0px 0px 5px rgba(200,200,200,.3);
}

div#floating_bar span{
display:block;
/*border:1px solid red;*/
height:50px;
box-sizing:border-box;
padding:8px;
}

div#floating_bar span a{
display:block;
height:100%;

}

div#floating_bar span a img{
display:block;
margin:auto;
}

div#response_cont{
position:absolute;
width:0px;
min-height:200px;
background:white;
top:0px;
right:70px;
border-radius:5px;
box-sizing:border-box;
padding:0px;
box-shadow:0px 0px 8px rgba(100,100,100,.3);
overflow:hidden;
transition:.8s all;
z-index:5;
}

div#response_cont form{
position:relative;
margin:20px 0px 0px 0px;
}

div.form_fields{
border:1px solid rgb(200,200,200);
box-sizing:border-box;
margin:0px 0px 10px 0px;
padding:10px;
}

div.form_fields label{
display:block;
font:16px notosans;
padding:0px 0px 5px 0px;
color:rgb(100,100,100);
}

div.form_fields input{
display:block;
font:16px notosans;
width:100%;
box-sizing:border-box;
height:50px;
border:0px;
padding:0px 0px 0px 10px;
}

div.form_fields textarea{
display:block;
font:14px notosans;
width:100%;
box-sizing:border-box;
height:180px;
border:0px;
padding:0px 0px 0px 10px;
}

input#feedback_btn{
display:block;
height:60px;
width:100%;
cursor:pointer;
background:black;
border:1px solid rgb(100,100,100);
border-radius:5px;
color:white;
font:22px roboto_regular;
}

span#feedbackMain div.showFeedBack{
width:200px;
padding:10px 20px 10px 20px;
}

span#clsBtn{
display:block;
position:absolute;
right:10px;
top:10px;
font:bold 16px roboto_regular;
cursor:pointer;
}

div#response_cont > p{
font:16px poppins_semibold;
color:rgb(50,50,50);
text-align:center;
}

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

div#cover img{
display:block;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

div#new_card_wrapper{
position:relative;
top:50px;
max-width:90%;
margin:auto;
min-height:100px;
background:white;
box-sizing:border-box;
padding:20px;
border-radius:5px;
}

div#unit_selling_price{
position:relative;
display:flex;
flex-wrap:wrap;
gap:10px;
}

div#unit_selling_price > div{
width:100%;
}

div#unit_selling_price > div > input{
height:100%;
width:100%;
display:block;
border:1px solid rgb(200,200,200);
border-radius:10px;
box-sizing:border-box;
padding:5px;
}

div#admission_opts{
position:relative;
display:flex;
flex-wrap:wrap;
gap:10px;
}

div#admission_opts > div{
width:100%;
height:80px;
}

div#admission_opts > div > div{
width:100%;
height:80px;
}

div#voucher_stock h2{
font: 1rem notosans,poppins_semibold;
}

div#voucher_stock > div table {
    font-family: notosans, sans-serif;
    font-size: 0.8rem;
    text-align: left;
}

div#voucher_stock > div tbody td {
    padding: 0.6rem 1rem;
	font:0.8rem notosans;
}

.stock_summary_title {
font: 1rem notosans,poppins_semibold;
}

.stock_summary_table td{
font:0.7rem notosans;
}

.topuser_right {
  text-align: left;
  margin-left: 5px;
  flex-shrink: 0;
}

.user_name {
  font-size: 0.8rem;
}

/*history container*/
div#first_part {
  padding: 0px;
   width:100%;
   margin-bottom:5px;
}

div#first_part > div {
  width:100%;
  /*border:1px solid red;*/
  padding:0px;
}

div#first_part > div:nth-child(1)  {
   font-size: 1rem;
  margin-bottom: 5px;
  align-content:center;
  justify-content:center;
}

div#first_part > div:nth-child(1) figure {
  position:relative;
left:10px;
  
}

div#first_part > div:nth-child(1) h2 {
  font-size: 1rem;
  margin-bottom: 5px;
}

div#first_part > div:nth-child(2) a {
font-weight: 300;
}

div#history_body {
  background: #f1f5f9;
  padding: 2px;
}