/*I love me some border-box*/
* {
    box-sizing: border-box;
}
/*This just stops me getting horizontal scrolling if anything overflows the width*/
body {
    overflow-x: hidden;
}
/*Just removing default browser padding/margin*/
html,
body {
    padding: 0;
    margin: 0;
    color: #ebebeb;
	background-color: #333;
	color: #FFFFFF;
	font-size: 12px;font-family: Arial, Helvetica, sans-serif;
	/*
	*/
}
/*Flexbox gives us the flexiness we need. The top just stays put as there is no scrolling on the body due to the page never exceeding viewport height*/
.Top {
    display: flex;
    position: relative;
    z-index: 10;
    height: 170px;
	background-color: #999999;
}
/*This is our main wrapping element, it's made 100vh high to ensure it is always the correct size and then moved into place and padded with negative margin and padding*/
.Container {
    display: flex;
    overflow: hidden;
    height: 100vh;
    margin-top: -170px;
    padding-top: 170px;
    position: relative;
    width: 100%;
    backface-visibility: hidden;
    will-change: overflow;
}
/*All the scrollable sections should overflow and be whatever height they need to be. As they are flex-items (due to being inside a flex container) they could be made to stretch full height at all times if needed.
WebKit inertia scrolling is being added here for any present/future devices that are able to make use of it.
*/
.MenuPanel,
.ContentPanel,
.CartPanel {
    overflow: auto;
    height: auto;
    padding: .5rem;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}
/*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/
.MenuPanel::-webkit-scrollbar,
.ContentPanel::-webkit-scrollbar,
.CartPanel::-webkit-scrollbar {
    display: auto;
}
/*  Left and Right are set sizes while the Middle is set to flex one so it occupies all remaining space. This could be set as a width too if prefereable, perhaps using calc.*/
.MenuPanel {
    width: 250px;
	background-color: #666;
}

.ContentPanel {
    flex: 1;
}

.CartPanel {
    width: 250px;
    background-color: #666;
}



/*
MAIN CSS
*/




.labels tr td {
	font-weight: bold;
	color: #fff;
}

.label tr td label {
	display: block;
}

[data-toggle="toggle"] {
	display: none;
}
.CartFinish{background-color:#0C9; width:auto; height:22px; border:solid 1px white; color:#ffffff}



.btnGreen{background-color:#0C9; width:auto; height:22px; border:solid 1px white; color:#ffffff}

.btnSearch{background-color:#0C9; width:auto; height:22px; border:solid 1px white; color:#ffffff}

.inputSearch{background-color:#0C9; width:auto; height:22px; border:solid 1px white; color:#ffffff}

.AddButton{
	background-color: #699;
	min-width:60px;
	margin:2px;
	width: auto;
	height: 22px;
	border: solid 1px white;
	color: #FFFFFF
}



a:link { color: #cccccc }
a:visited { color: #cccccc }
a:hover { color: #CC9900 }
a:active { color: #cccccc }

.sortArrows:visited {color:cccccc; text-decoration:none}
.sortArrows:active {color:cccccc; text-decoration:none}
.sortArrows:link {color:cccccc; text-decoration:none}
.sortArrows:hover {color:CC9900; text-decoration:none}

h1 {
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	display:inline;
}
h2 {
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
}

	.greyform {border-width:0px 0px 1px 0px; border-color:#aaa; background: #444; padding:2px; color:#fff; }

.headerBG {
	background-image: url(/images/body_bg.jpg);
	background-repeat: repeat-x;
}
h3 {
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
}
h4 {
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
}
.deleted {
	color: #FF0000;
	font-weight: bold;
	font-size: 14px;
}

h5 {
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	display:block;
	padding-top:30px;
	padding-bottom:30px;
}