.login_form{

	margin: 4em auto;
	max-width: 22em;
	border: 1px solid #888;
	padding: 5em;

}


.heading {

		margin-left: auto;
		margin-right: auto;

		font-size: 4rem;

}

.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
		/*
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
		*/
}

.box {

	width: 24%;
	min-width: 20em;
	max-width: 24em;
	font-size: 1.5rem;
	padding: 0;
	margin-bottom: : .4em;
	border-left: 1px solid #237906;
	border-right: 1px solid #237906;
	border-bottom: 1px solid #237906;
}

.active{

	background-color: #e5e5e5;

}

.bigbox {


	min-width: 12em;

	padding: 1em;
	margin: .5em auto;

	/* max-height: 400px; */
	overflow:auto;

}

.bigbox400 {


	min-width: 12em;

	padding: 1em;
	margin: .5em auto;

	max-height: 400px;
	overflow:auto;

}

#yellow {
	background-color: yellow;
	font-size: 1.2em;

}

.hidden {
	display: none;

}

.customers {

	width: 30em;
	margin: 0 auto;
	border-bottom: 1px solid grey;
	font-size: 1.2em;
    text-align: left;

}

.product_header {

	background-color: #237906;

	color: white;
	font-size: 2em;
	border-right: 1px solid white;

}

.product_menu a{

	border: 1px solid #e5e5e5;
	padding: .3em;
	display: inline-block;

}

.product_total {

	font-size: 4rem;

}

.product_stock {

	padding: .5em;
	margin: 0.5em auto;


	min-height: 8em;

}

.find {

	margin: auto;
	font-size: 1.2em;

}

.barcode {


	margin: auto;
	font-size: 1.2em;

}

.new {

	display: none;
	margin: 0 auto;
	max-width: 90%;
	padding: 1em;
	text-align: center;

}

.warning {

	padding: .5em;
	background-color: red;
	color: white;
	width: 50%;
	max-width: 30em;
	margin: 0 auto;

}

.logo {
	padding-top: 1em;
	width: 44%;
	max-width: 300px;
}

.logo img{


	max-width: 12em;



}

.status {
	margin-left: auto;
	margin-right: 0;
	width: 20%;
	text-align: right;
	padding: .4em;
}

.nav {

	width: 100%;
	margin: 0 auto;

}

.nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    /*align-items: center;*/
    justify-content: flex-start;


    margin: 0;
    padding: 0;
}

.nav ul li {
		color: white;
    list-style: none;
    flex-grow: 1;
    text-align: center;
    background: grey;

    border-right: 1px solid #fff;

}

.nav ul li.active {
	background: #418937;

}


.nav ul li:first-child {
    border-left: 1px solid white;

    }

.nav ul li:last-child {
    border-right: 1px solid white;

    }


.nav ul li a {

	font-size: 2rem;
	text-decoration: none;
	color: #fff;
	background-color: #000066;
	background-color: #237906;


    display: block;
		padding: .4em;

    transition: background .25s ease-in-out;
   	-moz-transition: background .25s ease-in-out;
   	-webkit-transition: background .25s ease-in-out;

}

.nav ul li a:hover {

	display: block;
	background-color: grey;


}

.footer{ padding-top: 30em; }

@media (max-width: 1100px) {

	.status { display: none;}

	.box { max-width: 30em; }

	.nav ul li a { font-size: .8em; min-width: 8em; }

	.logo { display: none; }



}