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

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:relative;
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 25px;
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,
body#about nav#menu ul li#tab3,
body#support nav#menu ul li#tab4{
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,
body#about nav#menu ul li#tab3 a,
body#support nav#menu ul li#tab4 a,
div#body_wrapper header nav ul li a:hover{
color:#0F67B1;
}

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

div#banner{
position:relative;
min-height:550px;
/*border:1px solid red;*/
display:flex;
flex-wrap:nowrap;
padding:0px 0px 60px 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 20px;
width:100%;
/*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:7vw;
font-family:poppins_semibold;
text-align:center;
}

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

div#banner > div:nth-child(2){
display:none;
}

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 auto auto auto;
font-family:roboto_regular;
font-size:16px;
border-radius:25px;
text-align:center;
text-decoration:none;
box-sizing:border-box;
}

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:nth-child(1){
position:relative;
/*border:1px solid blue;*/
width:100%;
}

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

div#div_1 > div:nth-child(2) 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_1 > div:nth-child(2) p{
font:16px 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:80px;
padding:50px 0px 10px 0px;
/*border:1px solid red;*/
width:100%;
}

div#div_1 > div:nth-child(2) > div > figure{
height:90px;
width:90px;
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:12px 0px 0px 0px;
}

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

div#div_2{
position:relative;
min-height:200px;
padding:50px 0px 50px 0px;
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:20px;
margin:20px 30px 0px 30px;
}

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

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

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

div#div_3 h3{
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_3 > div{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

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

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 20px 0px 20px;
}

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




/*---------------BUY PAGE----------------*/
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:460px;
}

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:95%;
min-width:30%;
margin:30px auto auto auto;
min-height:100px;
overflow-y:scroll;
overflow:hidden;
box-sizing:border-box;
padding:20px 20px 10px 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:95%;
margin:auto;
/*border:1px solid red;*/
padding:30px 0px 0px 0px;
}

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;
flex-wrap:wrap;
gap:10px;
}

div#qty_amnt_div > div{
min-width:50%;
max-width:100%;
height:40px;
margin:0px 0px 20px 0px;
flex:1;
}


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);
width: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:12px roboto_regular;
line-height:1.2em;
margin:7px 0px 0px 50px;
}

div#payment_div > ul li > label > p > em{
font:10px 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:10px;
top:8px;

}

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:310px;
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:200px;
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:12px 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;
}

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;
overflow:scroll;
}

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

/*support*/
div#support_div{
position:relative;
padding:10px;
width:95%;
margin:auto;
}

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

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

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

div#support_div > p{
font:18px notosans;
color:rgb(50,50,50);
line-height:1.6em;
}

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:100%;
bottom:0px;

}

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

div#sideBar div h2{
font:16px 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 0px 0px 0px;
padding:0px 10px 20px 10px;
box-sizing:border-box;
}

div#support_main article{
position:relative;
margin:20px 0px 0px 0px;
}

div#support_main article h2{
font:18px 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:20px 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{
font:16px notosans;
line-height:1.5em;
}

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

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

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

div#dashboard_wrapper header > div:nth-child(2)/*div#user_interact*/{
display:flex;
gap:5px;
/*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%;
box-sizing:border-box;
padding:20px;
flex: 1 1 0%;
}

div#total_sales_div{
width:98%;
height:180px;
background:#FAFAF9;
border-radius:10px;
padding:10px 0px 0px 20px;
}

div#total_sales_div h3{
color:rgb(5,5,5);
font:18px poppins_semibold;
}

div#total_sales_div p{
font:bold 24px notosans;
color:rgb(5,5,5);
margin-top:30px;
}

div#total_sales_div h4{
color:rgb(5,5,5);
font:18px roboto_regular;
margin:10px 0px 0px 0px;
}

div#overviews{
position:relative;
box-shadow:0px 0px 4px rgba(200,200,200,.5);
min-width: 200px;
height:250px;
/*border:1px solid green;*/
margin:auto;
}

div#transaction_div{
height:40px;
border-radius:20px;
box-sizing:border-box;
padding:4px 0px 0px 15px;
/*background:#FAFAF9;*/
position:relative;
box-shadow:0px 0px 3px rgba(200,200,200,.5);
}

div#transaction_div h4{
position:relative;
font:18px poppins_semibold;
color:rgb(5,5,5);
}

div#transaction_div span{
display:inline-block;
box-sizing:border-box;
padding-top:7px;
position:absolute;
right:10px;
bottom:5px;
height:30px;
/*width:40px;*/
/*background:#D3D3D3;*/
border-radius:25px;
font:bold 14px roboto_regular;
text-align:center;
color:rgb(5,5,5);
}

/*background:#FCEFE7;*/

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

div#trans_stats > div{
width:49%;
/*border:1px solid red;*/
height:calc(180px - 50px);
}

div#stock_card{
background:#E1F2F7;
min-width: 200px;
border-radius:10px;
padding:2px 0px 0px 10px;
height:200px;
}

div#stock_card > div{
position:relative;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
}

div#stock_card > div div{
position:relative;
/*border:1px solid red;*/

box-sizing:border-box;
}

div#stock_card > div div:nth-child(1){
position:relative;
border-right:1px solid rgb(200,200,200);
width:40%;
}

div#stock_card > div div:nth-child(2){
position:relative;
padding-left:10px;
}

div#stock_card h3{
color:rgb(5,5,5);
font:18px poppins_semibold;
margin:0px 0px 5px 0px;
}

div#stock_card > div div h4{
color:rgb(50,50,50);
font:14px roboto_regular;
}

div#stock_card > div div p{
color:rgb(5,5,5);
font:bold 20px notosans;
}

div#order_card{
position:relative;
background:#EDFDF1;
padding:0px 10px 10px 10px;
min-width: 200px;
border-radius:10px;
}

div#order_card h3{
color:rgb(5,5,5);
font:18px poppins_semibold;
margin:0px 0px 5px 0px;
}

div#order_card h4{
color:rgb(50,50,50);
font:18px roboto_regular;
margin:10px 0px 0px 0px;
}

div#order_card p{
  font: bold 24px notosans;
  color: rgb(5,5,5);
  margin-top: 30px;
}

div#services_card{
position:relative;
background:#FDFFDF;
padding:0px 10px 10px 10px;
border-radius:10px;
min-width: 200px;
}

div#services_card h3{
color:rgb(5,5,5);
font:18px poppins_semibold;
margin:0px 0px 5px 0px;
}

div#services_card h4{
color:rgb(50,50,50);
font:18px roboto_regular;
margin:10px 0px 0px 0px;
}

div#services_card p{
  font: bold 24px notosans;
  color: rgb(5,5,5);
  margin-top: 30px;
}

div#trans_stats > div:nth-child(1){
 background: #FFEEE7;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  color: #333; /* dark text for readability */
}

div#trans_stats > div:nth-child(1) h4{
font:18px roboto_regular;
color:#333;
}

div#trans_stats > div:nth-child(1) p{
font:bold 28px notosans;
color:rgb(5,5,5);
margin-top:10px;
color:#333;
}

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

p#new_trans{
width:100%;
background:#C6EFCE;
border-radius:10px;
}

p#manual_trans{
width:50%;
}

p#auto_trans{
width:50%;
}

p#today_trans{
width:100%;
border:1px solid rgb(200,200,200);
border-radius:10px;
}

div#trans_stats > div:nth-child(2) p > span{
display:inline-block;
font:bold 10px roboto_regular;
}

div#dash_sum{
position:relative;
min-height:200px;
min-width:100%;
/*border:1px solid red;*/
display:flex;
flex-wrap:wrap;
gap:20px;
margin:20px 0px 0px 0px;
}

div#dash_sum > div{
position:relative;
flex:1 1 0%;
}

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

div#today_sale_card{
position:relative;
height:60px;
background:#181543;
border-radius:10px;
padding:0px 0px 0px 20px;
box-sizing:border-box;
/*border:1px solid red;*/
}

div#dash_sum div#today_sale_card h3{
color:white;
font:18px poppins_semibold;
}

 div#dash_sum div#today_sale_card p{
font:14px roboto_regular;
box-sizing:border-box;
margin:5px 0px 0px 0px;
color:white;
}

div#most_stat{
position:relative;
margin:10px 0px 0px 0px;
width:100%;
/*border:1px solid red;*/
}

div#most_stat h3{
font:18px poppins_semibold;
}

section#bece_stats{
/*border:1px solid red;*/
width:100%;

}

div#card_stats_table{
/*border-left:1px solid rgb(200,200,200);*/
width:100%;
padding:10px 0px 0px 0px;
}

div#bece_bar{
background:#FEC317;
padding:2px 5px 5px 6px;
box-sizing:border-box;
font:bold 10px roboto_regular;
margin:0px 0px 10px 0px;
color:white;
height:15px;
border-radius:10px;
}

div#wassce_bar{
background:#DB2050;
padding:2px 5px 5px 6px;
box-sizing:border-box;
font:bold 10px roboto_regular;
margin:0px 0px 10px 0px;
color:white;
height:15px;
border-radius:10px;

}

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

div#dash_sum_div_2 div{
position:relative;
box-sizing:border-box;
/*flex:1 1 0%;*/
}

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(1) table{
display:block;
padding:30px;
border-collapse:collapse;
padding:10px;
table-layout:fixed;
width:100%;
margin:auto;
}

div#dash_sum_div_2 div:nth-child(1) table th{
/*border:1px solid red;*/
padding:10px 15px 10px 5px;
font:14px poppins_semibold;
background:#3674B5;
color:white;
}

div#dash_sum_div_2 div:nth-child(1) table td{
/*border:1px solid red;*/
padding:10px;
font:bold 10px notosans;
}

div#dash_sum_div_2 div:nth-child(1) table tr:nth-child(even){
background:#A1E3F9;
}

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

div#dash_sum_div_2 div:nth-child(2) h3{
font:22px poppins_semibold;
color:white;
}

div#dash_sum_div_2 div:nth-child(2) p{
font:bold 28px notosans;
color:white;
}

/*floating bar*/
div#floating_bar{
position:fixed;
z-index:5;
height:100px;
width:60px;
border-radius:5px;
right:20px;
top:70px;
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:300px;
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;
background:#FF8080;
padding:10px;
border-radius:5px;
width:90%;
margin:10px auto auto auto;
}

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