@import url(_rootVars.css);
@import url(_tables.css);
@import url(_global.css);
@import url(_forms.css);
@import url(_display.css);
@import url(_nav.css);
@import url(_panels.css);
@import url(_accts.css);
@import url(_wmail.css);


html {
	box-sizing: border-box;
	/* font: 13px Arial, Helvetica, sans-serif; */
	font: 14px Source Sans Pro, sans-serif;
	color: var(--dark);
	/* color: #023002;
	color: #f1dfbe; */
}
  
body {
	margin: 0;
	padding: 0;
	background: var(--bg_color)  ; 	
	font: 14px Source Sans Pro, sans-serif;
	color: #212121;
}



h1, h2, h3, h4, h5 { margin-top: 0px; }
h1 { font-size: 2.7rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.0rem; }

p, ol, ul {
	margin-bottom: 1.8em;
	line-height: 160%;
}


a {
	color: #6a6a6a;
}

a:hover {
	text-decoration: none;
	color: #336633;
}

a img {
	border: none;
}



.wrapper {
	max-width: 850px;
	margin: 1rem auto;
	overflow:hidden;
	display: grid;
	grid-template-columns: 1fr;
}


/* Header **/

.main-head {
	padding: 0;
	min-height:70px;
	background:var(--green-light);
	border-top-right-radius: 25px;
	display: grid;
	gap: 1.4rem;
	/* grid-template-columns: 3fr 5fr 1fr;
	grid-template-areas: 'branding main-nav nav-menu-btn'; */

}
  
/*impt! position after .main-head */
.console-head { 
	/* grid-template-columns: 12fr 1fr  ; */
	grid-template-columns: 18fr 3fr  ;
	grid-template-areas: 
	'branding  nav-menu-btn'
	'main-nav main-nav';
}

#logo {
	float: left;
	background: var(--logoURL) no-repeat left center;
	padding-left: 75px;
}

#branding  {
	grid-area: branding;
	padding: 1rem 0 0 1rem;
}

.nav-menu-btn {
	grid-area: nav-menu-btn;
	padding: 1.5rem 1rem 0 0 ;
}

.nav-menu-btn a {
	
	padding: 0 0 0 0.5rem ;
}

.main-nav {
	grid-area: main-nav;
}
  
#branding h1 {
	margin:0;
	font-size: 2.4rem;
	font-weight: 580;
	line-height: normal;
}

#branding .public-head {
	/* font-size: 2rem; */
}

#brandingline2-sml {
	font-size: smaller;
}


  
#branding p {
	margin:0;
	font-weight: normal;
	line-height: normal;

}
  
#branding a {
	text-decoration: none ;
}
  
  
.nav-menu-btn {
	  cursor: pointer;
	  /* width: 5.5rem; */
	  /* grid-area: nav-menu-btn; */
	  display: flex;
	  justify-content:space-around ;
}
  
/* Header */


/* Logo */



/* login */
.login_container {
	background: var(--primary);
	box-shadow: var(--shadow);
	/* display: grid; */
	/* grid-column: 1/3; */
	/* grid-template-columns: 1fr; */

}
  
.login_container .consoleTitle {
	margin: 3rem 0 0 3rem ;
}
  
.login_container .topic {
	margin: 1rem auto;
	width: 40%;
}
  


/* Page */

#page {
	margin: 0;
	padding: 1.5rem;
	min-height: 60vh;
	background: #EAE9E5;
	border-top: 0.3rem solid var(--green-dark);
	border-bottom: 0.3rem solid var(--green-dark);
	display: grid;
}






/* Content */

#content, #content-inv {
	width: 85%;
	overflow: hidden;
	justify-self: end;
}





/* article css */
.entry {
	margin: 0 0 2.1rem 0;
	/* display: grid; */
}

.entryColumn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 2rem;
}


.entry .title {
	margin: 0;
	padding: 0 0 0.35rem 0;
	border-bottom: solid 0.2rem var(--green-line);
	/* color: #232F01;
	color: var(--blue-dark); */
}

.entry .title a {
	color: #232F01;
}


.entry .meta {
	font-weight: bold;
}

.entry .byline {
	/* margin: 0px; */
	margin: 0 0 2rem 0;
	font-weight: bold;
	color:#8B0000;
}

.entry .customer_log {
	font-weight: bold;
	font-size: small;
}


.prnParams {
	display: none;
}



.pos {
	margin: 0;
	width: 95%;
	display: grid;
	/* grid-template-columns: 1fr 3fr; */
	column-gap: 1rem;
}

#posHead {
	grid-column: 1/3;
	display: grid;
	grid-template-columns: 1fr;
}

#posHead #postMast {
	grid-auto-rows: max-content;
}

#posRegister {
	height: 2.7rem;
	margin-top: -3rem;
	margin-bottom: 3rem;
	display: flex;
	justify-content: end;
}







/* helper properties */

.forceBreak {
	display:none;
}

.indentListColumn {
	padding: 1rem 0 1.5rem 2rem;
}

/* .modal {
	max-width: 700px;
	width:unset;
	padding: 15px;
} */

/* END helper properties */

.btn {
	background: var(--blue-dark);
	color: var(--light);
	padding: .45rem 1.3rem;
    margin: 0.4rem auto;
	/* text-decoration: none; */
	border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  


/* Footer */
#footer {
		padding: 2rem 0;
		font-size: 0.75rem;
		letter-spacing: 0.20rem;
		text-align: center;
		text-transform: uppercase;
		color: #ffffff;
}

#footer p {
	margin: 0px;
	padding: 1.3rem 0 0 0;
	text-align: center;
	line-height: normal;
	font-size: smaller;
}

#footer a {
	color: #FFFFFF;
}

/* ######################################### */
/*invoice pop-up*/

#page-popup{
	margin: 0;
	padding: 1.5rem;
	min-height: 60vh;
	display: grid;
	
}

#content-popup {
	width: 100%;
	overflow: hidden;
	/* justify-self: end; */

}


/* ######################################### */
/* spinner icon  Mar 2021*/
#loader {
	position: fixed; 
	top: 0%; left: 0%;  
	z-index: 5000; 
	width: 100%; height: 100%; 
	text-align: center;
	background: rgba(255, 255, 255, 0.295);
}
#txtLoading {
	margin: auto;
	padding-top: 5rem;
  	padding-bottom: 3rem;
	display:block;
	width: 100%;
  	font-family: 'Times New Roman', Times, serif;
	font-size: 1.5rem;
	color: var(--spinner);

}

#spinner{
	color: var(--spinner);
}
/* ######################################### */



/* pagination widget */
.PageCtrl {
	margin-bottom:1.2rem;
	padding: .55rem .95rem ;
	/* width: 40%; */
	background-color: var(--green-pagectrl);
	font-size: 0.9rem;
	color: #fff;
	border-radius: 0.8rem;
	float:right;
}

.PageCtrl a {
	text-decoration:none;
}

.PageCtrl a:hover {
	font-size:1em;
	color: #cc0066;
	text-decoration:underline;
}

.PageCtrl .curpage, .PageCtrl .move  {
	color:#FFF;
	font-weight:bold;
}
.PageCtrl .interval {
	margin: 0;
	padding-bottom:0.3em;
	text-align:right ;
	font-size:1.1em;
}


/* BOXES */
.boxes {
    margin: 1.6rem 0;
    display: grid;
	gap: 0.1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.box {
    /* background: #D2B48C; */
    text-align: center;
    padding: 1.5rem 2rem;
    /* box-shadow: var(--shadow); */
	
	
}

.box a {
	text-decoration: none;
}

.box .thumb-pix {
	width: 100px; 
	height: 100px;
	object-fit: scale-down;
}

.box p {
	line-height: 80%;
}


.box .item_name {
	font-weight: 600;
	font-size: .75rem
}

.box .item_price, .box .item_cart {
	font-weight:bold ;
	font-size: .75rem ;
	display:block;
	background-color:#f1d600;
	padding: .3rem .2rem .2rem .2rem;
}


/* ######################################### */


/* Media Queries */



@media (max-width: 1109px) {
	.wrapper {
	  width: 80%;
	  
	}
  
  
  }
  
  
  @media (max-width: 800px) {
  

	.wrapper {
		width: 90%;
		/* margin: 0.1rem auto; */
	}

	#header{
		width: 96%;
	}

	
	#content_pos {
		width: 100%
	}

	.PageCtrl {
		width: unset;
	}
	.pos {
		grid-template-columns: 1fr;
	}
	
	#posHead {
		grid-column: 1/2;
	}

	#posDetails {
		justify-self: start; 
		width: max-content;
	}

	#posItems {
		/* justify-self: end;  */
		/* width: max-content; */
	}

  
  
  
	.forceBreak {
	  display:inline-block;
	}
  
	
	  
  }
  

  
  @media (max-width: 500px) {
	html {
	  font: 12px;
	}
  
	h1 { font-size: 2.0rem; }
	h2 { font-size: 1.6rem; }
	h3 { font-size: 1.4rem; }
	/* h3 { font-size: 1.9rem; } */
	h4 { font-size: 1.0rem; }
	

	#branding h1 {
		font-size: 1.3rem;
		line-height: .9;
	}

	
	
	#page {
		min-height: 40vh;
		/* grid-template-columns: 1fr; */
	}
	
	.entryColumn {
		/* display: grid; */
		grid-template-columns: 1fr;
		/* column-gap: 2rem; */
	}
	
	  
	#content, #content_pos {
		width: 100%;
	}

	.indentProdList {
		padding: 1rem 0 1rem 1rem;
	}
	
	.login_container .consoleTitle {
		margin: 3rem 0;
		padding-left: 3rem;
	}
	  
	.login_container .topic {
		margin: 1rem auto;
		width: 100%;
	}


	
	#footer {
		padding: unset;
	}


	.boxes {
		/* margin: 1.6rem 0;
		display: grid;
		gap: 1.6rem;
		grid-template-columns: 1fr 1fr 1fr 1fr; */
		/* margin:0;
		gap:0; */
		gap: 0.8rem;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}

	.box {
		padding: 0;
	}
	
  
  }
  
  @media (max-width: 370px) {
	.wrapper {
		width: 94%;
	}
	#header{
		width: 94%;
	}

  
  }
  
  
  
  /*START: sliding sideNav*/
  #sideMenu {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #b3cde0 ;
	overflow: auto;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 45px;
	opacity: 95%;
  }
  
  #sideMenu ul {
	list-style: none ;
	text-transform: uppercase;
	font-size: 1.5rem;
	padding: 1rem 0 0 0 ;
  }
  
  #sideMenu li {
	border-bottom: #fff groove;
  }
  
  #sideMenu .subfolder {
	margin:0 ;
	padding: 2px 2px 2px 52px;
  
  }
  
  #sideMenu a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 1.2rem;
	color: var(--dark) ;
	display: block;
	transition: 0.3s;
  }
  
  #sideMenu a:hover {
	color: #f1d600;
  }
  
  #sideMenu .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
  }
  
  .openbtn {
	cursor: pointer;
	border: none;
  }
  
  /*END: sliding sideNav*/