:root{
	--pgHeight: 100vh;
	--pgWidth: 100vw;
	--labelAdj: 1;
	--fontSize: 16px;

	--robRed: #FF0000;
	--robLtGrey: #BEBEBE;
	--robNavy: #0A587A;
	--colCharcoal: rgb(80, 80, 80);

  --approveDoneLt: #aeff96;
  --approveDone:  #3aff00;

	--listLt: rgb(245,240,250);
  --listMd: rgb(230,235,230);
  --listDk: rgb(200,200,200);
	
	--col0: var(--robNavy);
	--col1: var(--robLtGrey);
	--col2: var(--colCharcoal);
	--col3: rgb(230, 230, 255);
}

/* ELEMENT DEFAULT STYLE */
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
a{
	text-decoration: none;
}

/*
body{
	width: var(--pgWidth);
	overflow-x: hidden;
	font-family: tahoma, arial, sans-serif;
	max-width: var(--pgWidth);
	background-color: white;
	color: black;
	padding-top: calc(var(--pgHeight) * .1);
	padding-bottom: calc(var(--pgHeight) * .14);
	min-height: var(--pgHeight);
	position: relative;
} 
*/


body{
	width: 100%;
	overflow-x: hidden;
	font-family: tahoma, arial, sans-serif;
	background-color: white;
	color: black;
	position: relative;
} 



.appCrash{
	padding: 25px;
  margin-top: 5rem;
	width: 100%;
	text-align: center;
	background: var(--robRed);
	font-size: 1.5em;
	color: white;
}

.alert{
	position: fixed;	
}
.alert_ele_on{
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	border: 2px solid black;
	z-index: 1000;
}
.alert > .alert_ele_body{
	padding: 10px 25px;
}
.alert > .alert_ele_header{
	background-color: black;
	position: relative;
	padding: 5px;
}
.alert > .alert_ele_header > .alert_ele_xBut{
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	padding: 5px 15px;
	
}



/* ALL APP SKELETOP RELATED */
#header{
	position: fixed;
	width: 100%;
	top: 0;
	height: calc(var(--pgHeight) * .1);
	background: var(--robNavy);
	display: grid;
	place-items: center;
	z-index: 150;
}
.header-logo{
  height: calc(var(--pgHeight) * .08);
}
.hdr-menu-img{
	position: absolute;
	right: .8rem;
	height: 2rem;
}
#section{
	display: block;
	padding-top: calc(var(--pgHeight) * .1);
	padding-bottom: calc(var(--pgHeight) * .07);
	min-height: var(--pgHeight);
	background-color: white;
}
.section-full{

}
.menu-off{
	width: 0px;
}
#footer{
	position: fixed;
	bottom: -2px;
	height: calc(var(--pgHeight) * .07);
	width: 100%;
	background: var(--robNavy);
	z-index: 150;
	display: none;
	grid-template-columns: 4rem auto 4rem;
	place-items: center; 
}

#footer_status{
	height: inherit;	
}


.mpop{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 250;
}
.mpop_pop{
	position: fixed;
  left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	width: max-content;
	max-width: 98vw;
	max-height: 98vh;
	border: 1px solid black;
	display: grid;
	grid-template-columns: auto 30px;
	grid-template-rows: 30px auto;
	grid-template-areas: 
		"title x_but"
		"html html";
  box-shadow: 1px 1px 6px 0px black;
}
.mpop_block:before{
	height: 9000px;
	width: 5000px;
	left: -2500px;
	top: -2500px;
	background: white;
	content: "";
	position: absolute;
	z-index: -1;
	opacity: .4;
}
.mpop_title{
  display: none;
}
.mpop_title:hover{
	opacity: .85;
}
.mpop_but_x{
	grid-area: x_but;
	background-color: black;
	color: white;
	font-weight: bold;
	cursor: pointer;
	font-size: 110%;
  display: grid;
	place-items: center;
}
.mpop_but_x:hover{
	opacity: .8;
}
.mpop_html{
	grid-area: html;
	padding: 10px 20px;
	overflow-y: auto;
  max-height: calc(98vh - 30px);
}



/* MENU */
.menu{
	display: grid;
	right: 0;
	width: var(--pgWidth);
	margin-top: calc(var(--pgHeight) * .1);
	padding: 25px 0px;
  min-height: calc(var(--pgHeight) * .9);
	position: fixed;
	background: var(--listLt);
	z-index: 1;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-property: width;
	transition-property: width;
	overflow-x: hidden;
}
.menu-off{
	width: 0px;
}
.menu-full{
	display: grid;
  place-items: center;
	height: 100%;
	
} 
.menu-x{
	position: absolute;
	top: 1%;
	right: 2%;
}


/* PAGE BLOCK DIV WITH LOADING IMG */
.block-full{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,.8);
	z-index: 50;
}
.block-img{
	max-width: 8rem;
	max-height: 16rem;
	height: 100%;
	object-fit: contain;
}


/* FOOTER */
.btn_footer{
  height: 1.8rem;
	object-fit: contain;
	padding: 3px;
}




.home-login{
	display: grid;
}
.home-login-form{
	display: grid;
	grid-row-gap: 2.5rem;
	height: max-content;
	place-self: center;

}
.home-login > a{
	display: block;
	place-self: end;
	margin: 0 1rem 1rem 0;
}

.setup_new_app{
	place-self: center;
	width: 90%;
	padding: 1rem;
	display: grid;
	place-items: center;
	min-height: 50%;
	height: max-content;
	border: 1px solid var(--robNavy);
	border-top: 1.5rem solid var(--robNavy);
	border-radius: 0 0 7px 7px;
}


.pageHTML{
	display: grid;
	grid-template-rows: max-content max-content auto;
	height: 100%;
}
.pageHTML-nav{
	display: flex;
	padding: 0 .5rem .5rem;
	flex-wrap: wrap;
}
.pageHTML-nav >a{
	display: inline-block;
	margin:  .5rem;
	text-decoration: underline;
	text-transform: uppercase; 
	width: max-content;
	color: var(--robRed);
	box-shadow: 0px 2px 1px 1px var(--listDk);
	padding: 1px;
}
.pageHTML-top{
	display: flex;
	justify-content: space-evenly;
	padding: .5rem 0rem;
	border-bottom: 3px solid var(--robLtGrey);
	background-color: var(--listLt);
	max-width: var(--pgWidth);
}
.pageHTML-top > *{
	width: min-content;
	flex: 1 1 0px;
}
.pageHTML-bot {

}

.categoryHTML_manage > div{
	display: grid;
	grid-template-columns: auto 25px 25px 25px;
	column-gap: 25px;
	align-items: center;
	letter-spacing: 1px;
	font-size: var(--font-l);
	padding: 2px .5rem;
	cursor: pointer;
	color: black;
	margin: auto;
	width: 100%;
	max-width: 900px;
}
.categoryHTML_manage >div:hover{
	background-color: var(--listDk);
}
.categoryHTML_manage:nth-child(even){
  background-color: var(--listLt);
}
.categoryHTML_manage:nth-child(odd){
  background-color: var(--listMd);
}
.categoryHTML_manage label{
	
}
.categoryHTML_manage .categoryHTML_manage_display{
	display: grid;
	grid-template-areas: 
		"img name"
		"img desc";
	grid-template-columns: max-content auto;
	column-gap: 20px;
	align-items: center;
	color: black;
}
.categoryHTML_manage .categoryHTML_manage_display >img{
	grid-area: img;
	max-width: 140px;
	max-height: 130px;
	width: 100%;
}
.categoryHTML_manage .categoryHTML_manage_display >div{
	grid-area: name;
}
.categoryHTML_manage .categoryHTML_manage_display >p{
	grid-area: desc;
}

.categoryHTML_items-item{
	display: grid;
	grid-template-columns: 3rem auto;
	border-bottom: 3px solid var(--robNavy);
	padding: .2rem 0;
}
.categoryHTML_items-item >a{
  display: grid;
	grid-template-areas: 
		"img title"
    "img desc";
	grid-template-columns: max-content auto;
	grid-template-rows: auto max-content;
	margin-top: .8rem;
}
.categoryHTML_items-item > input{
	display: block;
	place-self: center;
	height: 1.5rem;
	width: 1.5rem;
	border-radius: 5px;
	border: 2px solid var(--robNavy);
}
.categoryHTML_items-item > a > img{
	grid-area: img;
	max-width: 130px;
}
.categoryHTML_items-item > a > label{
	grid-area: title;
}
.categoryHTML_items-item > a > p{
	grid-area: desc;
	color: black;
}
.categoryHTML_items-item a *{
	pointer-events: none;
}



.accountHistory-bar{
	display: grid;
	grid-template-columns: max-content auto min-content;
	grid-template-areas: 
		"num name name"
		"date stat tot";
	background-color: var(--listLt);
	padding: .2rem .5rem;
	margin: .2rem 0rem;
	cursor: pointer;
	position: relative;
}
.accountHistory-bar:hover{
	background-color: var(--listMd);
}
.accountHistory-bar *{
	pointer-events: none;
}
.accountHistory-bar-name{
	background-color: black;
  color: white;
	text-align: center;
	padding: 3px;
	letter-spacing: 1.5px;
	grid-area: name;
}
.accountHistory-bar-num{
	grid-area: num;
	background-color: black;
	color: white;
	margin-left: 40px;
}
.accountHistory-bar-date{
	grid-area: date;
	font-size: .9rem;
	margin-left: 40px;
}
.accountHistory-bar-stat{
	grid-area: stat;
	text-align: center;
	font-size: .9rem;
	letter-spacing: 1.5px;
	font-weight: bold;
}
.accountHistory-bar-tot{
	grid-area: tot;
	font-size: .9rem;
}



.display_invoice{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	padding: 1rem;
}


.settingsHTML{
	height: 100%;
	display: grid;
	grid-template-rows: max-content auto;
	grid-gap: .5rem;
}


.calculator_item_discount_quantity{
	
}
.calculator_item_discount_quantity_single{
	
}
.calculator_item_discount_quantity_multi{
	display: grid;
	grid-template-columns: 1fr 1fr 5ch max-content;
}



.order_manage_gallery_calculator_item{
	display: grid;
	grid-template-columns: max-content auto;
	
}
.order_manage_gallery_calculator_item >img{
	max-width: 175px;
	max-height: 175px;
}






.settings_communication{
	
}
.settings_communication .communication_container{
	display: grid;
	grid-template-columns: auto max-content max-content;
	column-gap: 1rem;
	min-width: 300px;
	margin: 1rem 0rem;
  cursor: default;
}
.settings_communication .communication_container_form{
	display: grid;
	column-gap: 1rem;
	min-width: 300px;
	margin: 1rem 0rem;
  cursor: default;
}