/* FUTURE INDEXT FILE */
:root{
	--pgHeight: 100vh;
	--pgWidth: 100vw;
	--labelAdj: 1;
	--fontSize: 16px;

	--robRed: red;

	--col0: #8b7efc;
	--col1: #d4dcff;
	--col2: #dceafa;
	--col3: #8299ff;
	--col4: #8b9eb3;
	--col5: #F3F2FA;
	--col6: #FF0000;
	--col7: #FF0000;
	--col8: #FF0000;
	--col9: #FF0000;
	
  --approveDoneLt: #aeff96;
  --approveDone:  #3aff00;

	--listLt: rgb(245,240,250);
  --listMd: rgb(230,235,230);
  --listDk: rgb(200,200,200);
  
  
  color-scheme: only light;
  
  
}


@font-face{
  font-family:text_font;
  src:url(fonts/text_font.woff);
}
@font-face{
  font-family:main_font;
  src:url(fonts/main_font.woff);
}


/* ELEMENT DEFAULT STYLE */
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html{
	scroll-behavior: smooth;
}
a{
	text-decoration: none;
	color: black;
}
button{
	font: inherit;
}
body{
	width: var(--pgWidth);
	overflow-x: hidden;
	font-family: text_font, arial, sans-serif;
	background-color: white;
	color: black;
	position: relative;
	min-height: var(--pgHeight);
  display: grid;
	grid-template-rows: max-content auto;
}
img{
	display: inline-block;
	object-fit: contain;
	max-height: 100%;
	max-width: 100%;
}

#header{
	height: 125px;
	display: grid;
	place-items: center;
	grid-template-columns: 1fr max-content 1fr;
}
#header > *{
	height: 25px;
	cursor: pointer;
	
}
#header .logo_link{
	height: 110px;
	display: block;
	text-align: center;
	padding-left: 6vw;
	padding-right: 6vw;
}
#header .image_logo{
	height: 110px;
}
#header .cart_partent{
	display: none;
}
#header .cart_partent, #header .icon_search{
	display: none;
}
#header .menu_image{
	
}
#header .header_cart_alert{
	position: relative;
}
#header .cart_alert_text{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -65%);
	text-shadow: 0px 0px 2px white;
	color: red;
	pointer-events: none;
}
#header .icon_cart{
	
}

#section{
	display: grid;
}

/* END INDEX FILE */





/* HOME PAGE */
.home_html{
	background-color: var(--col2);
}

/* ACCOUNT VERIFY PAGE */
.account_verify_page{
	display: grid;
	grid-template-rows: max-content auto;
	width: 100%;
  place-items: center;
}
.account_verify_page::before{
	content: '';
	background-color: var(--col0);
	height: 25px;
	width: 100%;
}
.account_verify_page_form{
	width: min(100vw, 500px);
	display: grid;
	row-gap: 50px;
	margin-top: -10%;
}
.account_verify_page .verify_page_header{
	text-align: center;
	font-size: 110%;
}
.account_verify_page .verify_page_button{
	width: 100%;
}
.account_verify_page .verify_page_code{
	width: 60%;
	margin: auto;
}


/* ACCOUNT LOGIN PAGE */
.account_login{
	display: grid;
	grid-template-rows: max-content auto auto;
	height: 100%;
	margin: auto;
}
.account_login::before{
	content: '';
	background-color: var(--col0);
	height: 25px;
	width: 100%;
}
.account_login .login_area{
	max-width: 625px;
	width: 100%;
	margin: auto;
	padding: 0px 25px;
}
.account_login .login_form{
	display: grid;
	row-gap: 25px;
}
.account_login .login_header{
	
}
.account_login .login_button{
	background-color: var(--col3)
}
.account_login .login_checkbox{
	text-align: center;
}
.account_login .new_account{
	
}
.account_login .new_account_text{
	
}
.account_login .new_account_button{
	
}

/* ACCOUNT CREATE PAGE */
.account_create{
	display: grid;
	grid-template-rows: max-content max-content auto;
	height: 100%;
	margin: auto;
}
.account_create::before{
	content: '';
	background-color: var(--col0);
	height: 25px;
	width: 100%;
}
.account_create .create_header{
	
}
.account_create .create_message{
	
}
.account_create .create_form{
	max-width: 625px;
	width: 100%;
	margin: auto;
	padding: 0px 25px;
	display: grid;
	row-gap: 25px;
}



/* QR PAGE */

.qr_page{
	display: grid;
	text-align: center;
}
.qr_home_page{
	display: grid;
	row-gap: 25px;
	place-items: center;
	height: max-content;
	width: max-content;
	padding: 15px 25px;
	box-shadow: 1px 1px 1px var(--col1);
	border: 1px solid var(--col1);
	margin: 25px auto;
}
.qr_home_list{
	margin: 15px 
}
.qr_new_page{
	display: grid;
	row-gap: 15px;
	text-align: center;
}
.qr_edit_data_container{
	margin-top: 8px;
}
.qr_container_edit_icon{
	position: absolute;
	top: 0px;
	right: 10px;
	height: 100%;
}
.qr_container_header{
	background-color: var(--col3);
	color: white;
}
.qr_container_form{
	display: grid;
	row-gap: .5rem;
	place-items: center;
}
.qr_container_form_header{
	margin-bottom: -.6rem;
}
.qr_container_form_button{
	margin: .5rem 0rem;
}
.qr_chartjs{
	width: 95vw;
  max-width: 850px;
	margin: auto;
}
.qr_chartjs_period{
	background-color: var(--col5);
}
.qr_chartjs_reset{
	margin: 1rem 0rem;
}
.qr_chart_act{
	display: grid;
	row-gap: 1rem;
	padding: 1rem;
}
.qr_edit_page{
	display: grid;
	text-align: center;
	row-gap: 2rem; 
	width: min(350px, 95vw)
}

.qr_sknr_page{
	display: grid;
	row-gap: 25px;
	place-items: center;
	height: max-content;
	width: max-content;
	max-width: 400px;
	padding: 15px 25px;
	box-shadow: 1px 1px 1px var(--col1);
	border: 1px solid var(--col1);
	margin: 25px auto;
	
}
.qr_sknr_page_header{
  line-height: 3rem;
}
.qr_sknr_page_link{
	
}

.qr_create_standard{
	display: grid;
	row-gap: 2rem;
	padding: 1rem;
	width: inherit;
	min-width: 300px;
	max-width: max-content;
}
.qr_create_standard_title{
  text-align: center;
	background-color: var(--col5);
	font-size: 1.4rem;
	padding: .5rem;
	display: grid;
}
.qr_create_standard_form{
	display: grid;
	place-items: center;
}
.qr_create_standard_header{

}
.qr_create_standard_image{
	
}
.qr_create_standard_select{
	margin: .5rem 0rem;
	width: max-content;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.qr_create_standard_button{
	margin: .5rem 0rem;
}




/* PROFILE PAGE */

.profile_home_page{
	margin: 25px auto;
}
.profile_address_full{
	display: grid;
  width: 100%;
}
.profile_address_full > .address_company{
	
}
.profile_address_full > .address_contact{
	
}
.profile_address_full > .address_city{
	
}
.profile_address_full > .address_company{
	
}



.profile_account{
	padding: 2rem;
}
.profile_account > .account_info_header{
	
}
.profile_account > .account_info_body{
	
}
.account_info_body > .info_body_top{
	display: grid;
	grid-template-columns: 1fr 1fr;
	place-items: center;
	padding: 20px 0px;
}
.info_body_top > .body_top_type{
	
}
.info_body_top > .body_top_type > .top_type_key{
	
}
.info_body_top > .body_top_type > .top_type_value{
	
}
.info_body_top > .body_top_created{
	
}
.info_body_top > .body_top_created > .top_created_key{
	
}
.info_body_top > .body_top_created > .top_created_value{
	
}
.account_info_body > .info_body_form{
	
}
.info_body_form > .body_form_inputs{
	display: grid;
	row-gap: 10px;
	width: min(100%, 400px);
	margin: auto;
}
.body_form_inputs  * input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.info_body_form > .body_form_message{
	text-align: center;
	padding: 0px 20px;
	width: min(100%, 400px);
	margin: 5px auto 35px;
}
.info_body_form > .body_form_buttons{
	display: grid;
	grid-template-columns: 1fr 1fr;
}






.profile_billing{
	padding: 2rem;
}
.profile_edit_billing{
	display: grid;
	width: min(100%, 400px);
	margin: auto;
	row-gap: 10px;
	grid-template-columns: auto max-content 13ch;
	grid-template-areas: 
		"header header header"
		"company company company"
		"contact contact contact"
		"address address address"
		"address2 address2 address2"
		"city state zip"
		"phone phone phone"
		"email email email"
		"button button button";
	column-gap: 10px;
}
.profile_edit_billing > .billing_header{
	grid-area: header;
}
.profile_edit_billing > .billing_company_full{
	grid-area: company;
}
.profile_edit_billing > .billing_company_full > .billing_company_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_contact_full{
	grid-area: contact;
}
.profile_edit_billing > .billing_contact_full > .billing_contact_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_address_full{
	grid-area: address;
}
.profile_edit_billing > .billing_address_full > .billing_address_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_address2_full{
	grid-area: address2;
}
.profile_edit_billing > .billing_address2_full > .billing_address2_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_city_full{
	grid-area: city;
}
.profile_edit_billing > .billing_city_full > .billing_city_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_state_full{
	grid-area: state;
	display: grid;
}
.profile_edit_billing > .billing_state_full > .billing_state_input{
  padding-top: 15px;
}
.profile_edit_billing > .billing_zip_full{
	grid-area: zip;
}
.profile_edit_billing > .billing_zip_full > .billing_zip_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_phone_full{
	grid-area: phone;
}
.profile_edit_billing > .billing_phone_full > .billing_phone_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_email_full{
	grid-area: email;
}
.profile_edit_billing > .billing_email_full > .billing_email_input{
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}
.profile_edit_billing > .billing_button{
	grid-area: button;
	margin-top: 15px;
}



























.account_page{
	display: grid;
	grid-template-areas: 
		"header"
		"page";
	grid-template-rows: max-content auto;
}
.account_page:before{
	content: 'My Account';
	background-color: var(--col0);
	height: 40px;
	display: grid;
	place-items: center;
	font-size: 25px;
	color: var(--col1);
	letter-spacing: 1px;
	grid-area: header;
	margin-bottom: 15px;
}
.account_page .page_top_buttons_parent{
	display: flex;
	max-height: 60px;
	justify-content: space-evenly;
	padding: 5px 15px;
	position: fixed;
	width: var(--pgWidth);
	bottom: 0;
	z-index: 50;
	background-color: var(--col1);
	box-shadow: 0px 0px 2px var(--col0);
}
.page_top_buttons_parent > .page_top_button_selected{
	color: var(--col1);
	background-color: var(--col0);
}
.account_page .page_top_button_orders{
	width: max-content;
	text-align: center;
	cursor: pointer;
}
.account_page .page_top_button_profile{
	width: max-content;
	text-align: center;
}
.account_page .page_body{
	display: grid;
	grid-template-rows: max-content max-content auto;
	row-gap: 20px;
	grid-area: page;
	padding-bottom: 70px;
}
.page_body .orders_account_info{
	
}
.page_body .orders_filter{
	display: grid;
	grid-template-areas: 
		"top"
		"bot";
	place-items: center;
	row-gap: 25px;
}
.orders_filter > .filter_top {
	grid-area: bot;
	display: grid;
	row-gap: 15px;
}
.filter_top > .top_info{
	display: grid;
	row-gap: 10px;
}
.top_info > .info_from_parent{
	
}
.info_from_parent .info_from_input{
	
}
.top_info > .info_to_parent{
	
}
.info_from_parent .info_to_input{
	
}
.filter_top > .top_button{
	
}
.orders_filter > .filter_bot{
	grid-area: top;
	display: flex;
	column-gap: 25px;
}
.filter_bot > .bot_text{
	display: none;
}
.filter_bot > .bot_button{
	
}
.filter_bot > .bot_button_selected{
	
}
.page_body .orders_history{
	margin-top: 15px;
}
.orders_history .orders_header{
  display: flex;
	justify-content: start;
	column-gap: 15px;
	padding: 0px 10px;
}
.orders_history .orders_body{
	
}
.orders_body .body_info{
	display: flex;
	justify-content: space-between;
	background-color: var(--col3);
	color: white;
	padding: 5px 15px;
	align-items: center;
}
.orders_body > .body_order{
  margin-bottom: 1rem;

}
.body_order > .order_header{
	margin: auto;
	width: 95%;
	display: grid;
	row-gap: 5px;
	grid-template-areas: 
		"num name date"
		"stat bal tot";
	border: 1px solid var(--col1);
	position: relative;
  padding:5px;
	color: var(--col0);
	cursor: pointer;
}
.body_order > .order_header *{
	cursor: pointer;
}
.order_header >.toggleExpandIcn{
	top: 1rem;
}
.order_header > .header_num{
	margin-left: 1.5rem;
	grid-area: num;
}
.order_header > .header_name{
	grid-area: name;
	justify-self: center;
}
.order_header > .header_date{
	grid-area: date;
	justify-self: end;
}
.order_header > .header_stat{
	grid-area: stat;
	margin-left: 1.5rem;
}
.order_header > .header_tot{
	grid-area: tot;
	justify-self: end;
}
.order_header > .header_bal{
	grid-area: bal;
	justify-self: center;
}
.mpop_html > .order_invoice_full{
  padding-right: 10px;
	display: grid;
	grid-template-areas: 
		"orders"
		"delivery"
		"buttons";
	row-gap: 15px;
}
.order_invoice_full > .invoice_actions{
	grid-area: buttons;
	display: flex;
	justify-content: space-around;
	padding: 4px 10px;
	margin-top: 25px;
}
.invoice_actions >.actions_link{
	
}
.actions_link >.actions_image{
	height: 25px;
	
}
.invoice_actions > .actions_button{
	
}
.order_invoice_full > .invoice_orders{
	grid-area: orders;
}
.invoice_orders > .orders_header{
	
}
.invoice_orders > .orders_body{
	display: grid;
	row-gap: 10px;
}
.invoice_orders > .orders_body > .body_full_order{
	display: grid;
	grid-template-areas: 
		"image header"
		"image name"
		"image details"
		"buttons buttons";
	grid-template-columns: max-content auto;
	grid-template-rows: max-content max-content 1fr max-content;
	background-color: var(--col1);
	padding: 5px;
}
.invoice_orders > .orders_body > .body_full_order > .full_order_image{
	grid-area: image;
	height: 120px;
	max-width: 120px;
}
.invoice_orders > .orders_body > .body_full_order > .full_order_header{
	grid-area: header;
	display: grid;
	grid-template-columns: auto max-content;
	background-color: var(--col3);
	padding: 2px 8px;
}
.invoice_orders .body_full_order > .full_order_header > .header_name{
	color: white;
}
.invoice_orders .body_full_order > .full_order_header > .header_status{
	padding: 2px 8px;
	border-radius: 3px;
	font-size: .8rem;
	letter-spacing: .8px;
}
.invoice_orders > .orders_body > .body_full_order > .full_order_name{
	grid-area: name;
	padding-left: 8px;
}
.invoice_orders > .orders_body > .body_full_order > .full_order_details{
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 10px;
	grid-area: details;
	align-self: center;
	padding: 0px 8px;
}
.invoice_orders .body_full_order > .full_order_details > .details_key{
	
}
.invoice_orders .body_full_order > .full_order_details > .details_value{
	
}
.invoice_orders > .orders_body > .body_full_order > .full_order_buttons{
	grid-area: buttons;
	display: flex;
	justify-content: space-evenly;
	padding-top: 5px;
}
.order_invoice_full > .invoice_delivery{
	grid-area: delivery;
}
.invoice_delivery > .delivery_header{
	
}
.invoice_delivery > .delivery_body{
	
}
.delivery_body > .body_delivery_full{
	display: grid;
	row-gap: 5px;
}
.body_delivery_full > .delivery_method{
	
}
.body_delivery_full > .delivery_address{
	display: grid;
}
.body_delivery_full > .delivery_details{
	
}
.body_delivery_full > .delivery_details > .delivery_details_full{
	display: grid;
	grid-template-columns: max-content auto;
	column-gap: 5px;
}
.body_delivery_full > .delivery_details > .delivery_details_full > .delivery_details_key{
	
}
.body_delivery_full > .delivery_details > .delivery_details_full > .delivery_details_value{
	
}
.orders_body > .body_buttons{
	display: flex;
	justify-content: center;
	column-gap: 8px;
}
.body_buttons > .body_buttons_button{
	padding: 1px 6px;
	border: 1px solid var(--col0);
	background-color: var(--col2);
	cursor: pointer;
}
.body_buttons > .body_buttons_button:hover{
	background-color: var(--col4);
	color: black;
	box-shadow: 0px 0px 2px var(--col0);
}
.body_buttons > .body_buttons_button_selected{
	background-color: var(--col0);
	color: var(--col1);
}


.page_body > .account_info_full{
	padding: 0px 25px;
}
.account_info_full > .info_full_header{
	
}
.account_info_full > .info_full_body{
	display: grid;
	row-gap: 15px;
}
.info_full_body > .info_body_text{
	
}
.info_body_text > .info_text_owner{
	
}
.info_body_text > .info_text_company{
	
}
.info_body_text > .info_text_name{
	
}
.info_body_text > .info_text_email_key{
	margin-top: 15px;
}
.info_body_text > .info_text_email_value{
	
}
.info_body_text > .info_text_password_key{
	margin-top: 15px;
}
.info_body_text > .info_text_password_value{
	
}
.info_full_body > .info_body_button{
	
}
.page_body > .account_billing_full{
	padding: 0px 25px;
	margin: 15px 0px;
}
.account_billing_full > .billing_full_header{
	
}
.account_billing_full > .billing_full_body{
	display: grid;
	row-gap: 15px;
}

.billing_full_body > .billing_text_missing{
	text-align: center;
}
.billing_full_body > .profile_address_full{
	
}
.profile_address_full > .address_company{
	
}
.profile_address_full > .address_contact{
	
}
.profile_address_full > .address_address{
	
}
.profile_address_full > .address_city{
	
}
.billing_full_body > .billing_body_button{
	
}
.page_body > .account_shipping_full{
	padding: 0px 25px;
}
.account_shipping_full > .shipping_full_header{
	
}
.account_shipping_full > .shipping_full_body{
	display: grid;
	row-gap: 15px;
}
.shipping_full_body > .shipping_body_text_def{
	width: max-content;
}
.shipping_body_text_def > .body_text_def_header{
	color: var(--col0);
}
.shipping_full_body > .shipping_body_button{
	
}







.page_body > .profile_shipping_page{

}
.profile_shipping_page > .profile_shipping_header{
	
}
.profile_shipping_page > .profile_shipping_body{
	display: grid;
	row-gap: 25px;
	padding: 15px 20px;
}
.profile_shipping_body > .shipping_body_unit{
	display: grid;
	row-gap: 10px;
	background-color: var(--col1);
	padding: 10px;
}
.shipping_body_unit > .profile_address_full{
	
}
.shipping_body_unit > .shipping_control{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.shipping_body_unit > .shipping_default{
	font-weight: bold;
	color: var(--col0);
	text-transform: uppercase;
	font-size: .9rem;
	letter-spacing: .5px;
}
.profile_shipping_body > .shipping_body_button_new{
	margin-top: 10px;
}




.profile_address_verify_full{
	display: grid;
	padding: 10px 0px;
}
.profile_address_verify_full > .address_verify_body{

	margin: 10px 20px;
}
.address_verify_body > .address_body_header{
	margin-bottom: 25px;
	text-align: center;
}
.address_verify_body > .address_body_address{
	
}
.address_verify_body > .address_body_address2{
	
}
.address_verify_body > .address_body_city{
	
}
.profile_address_verify_full > .address_verify_buttons{
	display: flex;
	margin: 10px 0px;
}
.address_verify_buttons > .verify_button_save{
	
}
.address_verify_buttons > .verify_button_cancel{
	
}