/* Common setup */
	@charset "utf-8";

	*, *:before, *:after {
	  box-sizing: border-box !important;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

	:active, :focus {	outline: none;	}
	:root {
		--body-backcolor: #d3d3d3;
		--section-backcolor: #fff;
		line-height: 1.5;
		text-size-adjust: 100%;	
	}

	body { margin: 0 200px; font: 14px Arial, sans-serif; color: #333; background-color: #e3e6e6; text-align: center; letter-spacing: 0.5px; word-spacing: 1px;	}
	ol, ul, li {	list-style: none; padding : 0; margin : 0; }
	a {	text-decoration: none; color : black;	}
	img {	object-fit: cover; 	}
	button, input, select{	width: 100%; border: 1px solid #c8c4c4; background-color: #fff; color: #000; padding: 10px;	}
	input[type='radio'] {  width: 25px;  height: 25px; margin-left: 20px;	border: 1px solid #c8c4c4;}
	input[type='checkbox'] {  width: 25px;  height: 25px;	border: 1px solid #c8c4c4;}

/* === Layout Containers === */

	.sticky-container, .header-container, .msg_body, .login-container, .form-container, .admin-container, .report-container, .report-container-heading {	display: grid;	}	

	.sticky-container, .viewcart-box {	grid-template-columns: 3fr 1fr;	}
	.form-container {	grid-template-columns: 1fr 1fr 1fr; margin: 1px auto; background-color : white; padding : 15px;	}
	.admin-container {	grid-template-columns: 300px 1fr;	}
	.report-container {	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; margin: 1px auto; background-color : white; padding : 10px;	}
	.report-container-heading {	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; margin: 1px auto; background-color : #d2c7e3; padding : 15px;	}
	.report-download {	grid-template-columns: 1fr; margin: 1px auto;  padding : 10px; background-color: beige; text-align: right;	}

/* Sticky Message */
	.sticky-container {	text-align: left; background-color: #000; color: #fff; padding: 15px;	}

	.msg_body {	text-align: center; background-color: #ffe86f; color: #000; padding: 10px;	}

	.sticky-msg a {	color: #ffd814;	}

	.header-container, .login-container 	{	grid-template-columns: 1fr 2fr 1fr;	}
	.header-container, .login-container	{	background-color: var(--section-backcolor);	}

/* Form */
	.form-left, .form-center, .form-right {  padding: 10px;}
	.form-left { text-align: right; margin-right: 20px; }
	.form-center {  font-weight: bold; text-align: left; border-left: 1px solid  #dfdfdf; padding-left: 20px;	}
	.form-right { text-align: left; color: gray; }

	.input-requirements li.invalid {	color: #e74c3c; letter-spacing: 2px; list-style:disc;	}
	.input-requirements li.valid {	color: #2ecc71;	}
	.input-requirements li.valid:after {	display: inline-block;	padding-left: 10px;	content: "\2713";	}
	.minLength, .lettersOnly { color: #b76161;	}
	.lettersOnly {}
	.product-update {	display : grid;	}
	.product-update {	grid-template-columns : 1fr 1fr 1fr 1fr 1fr;	}
	
/* Header */
	.header-container {	padding: 6px;	text-align: center;	}

/* Admin */
	.admin-left, .admin-right {  }
	.admin-left { text-align: right; }
	.admin-right { text-align: left; background-color : white; margin-left: 20px; }
	.left-item {  	}
	.pressed {background-color:#353232;color:white;}

	.selected-item {	display : flex; margin : 5px;  padding : 10px; 	}
	.selected-item label {	margin-left : 20px;}

/* Report Container */
	.report-left{  padding: 1px;}

/* Section Divider */
	.section-devider {	clear: both; height: 15px;	}

/* Section Divider */
	.report-show  {	clear: both; height: 15px;	}
	.report-data  {	clear: both; height: 15px;	}

/* Login */
	.login {	display: grid; align-items: center; }

	h1 {	font-size : 25px;	}
	form {	margin: 0px auto 1px;	}





	.footer-container {	background-color: #1E1E1E;	}
	.footer-item {	margin: 6px;	}
	.footer-col-caption {	margin: 20px; border-bottom: 1px solid #244201;	}
	.footer-copyright {  color: #a48200; background: #131313; padding: 10px; font-size : 15px;	}
	.footer-item a {	color: wheat;	}
	.footer-item li{	padding: 5px; font-size : 13px;	}

	.go-to-top {	position:fixed; bottom:20px; right:20px; font-size:30px; z-index:1000;	}



/* Responsive */

@media screen and (max-width: 768px) {
 
	body {	margin: 1px;	}


	.sticky-container, .admin-container, .form-container{	grid-template-columns: 1fr;	}
    .report-container-heading {  font-size: 10px;   }
    .report-container {  font-size: 10px;   }
	.sticky-container {	font-size : 15px;	}
	.admin-left, .admin-right { margin : 10px; }


	.sticky-container {	text-align: center;	  padding: 5px; }
	.sticky-msg {	padding: 1px; font-size:12px;}
	.company-name {	grid-column: 1 / 3; grid-row: 1;	}
	.logo {	grid-column: 1; grid-row: 2;	}
	.logo img{	width:30px; height: 30px;	}
	.login {	grid-column: 2; grid-row: 2; justify-self: end;	}
	.form-left, .form-center {  text-align: center;	 padding: 0; margin-right: 0;	}
	.form-center {  border-left: 0;}

}