html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
html, body {
	border: 0; margin: 0; height: 100%; min-height: 100%;
}
body {
	color: #1e1e1e;
	font: 14px/1.231 arial, helvetica, sans-serif;
	background: #f5f5f5;
}
.header {
	width: 99.4%;
	padding: 5px;
	//background-color: rgba(80,125,190,0.51) !important;
	background-color: #F5F5F5 !important;
	display: inline-block;
	border-bottom: 1px solid rgba(150, 150, 150, 0.5);
	position: sticky;
	  top: 0;
	  z-index: 999;
}
.logo {
	height: 50px;
	width: 50px;
	background-image: url(/img/tonic_logo_250x250_72ppi.png);
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	float: left;
}
.headerTitles {
	display: block;
	float: left;
	width: 250px;
	margin: 0px 0px 0px 5px;
	padding: 0px, 0px, 0px, 30px;
	//border: 1px solid #000;
}
.siteName {
	//padding: 0px, 0px, 20px, 10px;
	margin: 0px;
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	color: rgb(129, 128, 128);
	//border: 1px solid #000;
}
.sectionName {
	//padding: 0px, 0px, 5px, 5px;
	text-align: left;
	font-size: 26px;
	font-weight: bold;
}
.headerCenter {

	-webkit-box-sizing: border-box;
	  /* Safari/Chrome, other WebKit */
	  -moz-box-sizing: border-box;
	  /* Firefox, other Gecko */
	  box-sizing: border-box;
	  /* Opera/IE 8+ */
	  position: relative;
	  display: inline-block;
	  width: 30%;
	  height: 55px;
	  margin: 0 0 0 0px;
	 // border-style: solid;
	 //border-color: rgb(90, 16, 141);

}
.headerNav {
	position: absolute;
	bottom: 0;
	margin: 0px;
	text-align: left;
	font-size: 16px;
	//font-weight: bold;
	color: #000;
	
}

.headerRight {
	display: block;
	float: right;
	width: auto;
	margin: 0px 0px 0px 5px;
	padding: 0px, 0px, 0px, 50px;
	border: 1px solid #000;
}
.siteUser {
	display: block;
	float: right;
	text-align: right;
	border: 1px solid #000;
}
.loginBtn {
	display: block;
	float: right;
}
.tdEdit {
	width: 50px;
	padding-right: 5px;
	text-align: right;
}
table.centerTable {
  width: 700px;
  //font-family: "Helvetica";
  border-collapse: collapse;
  margin: 10px auto 10px 35%;
  border: 0px solid #282727;
}

table.centerSupplierTable {
  font-family: "Helvetica";
  border-collapse: collapse;
  margin: 10px auto 10px 35%;
  border: 0px solid #282727;
}
td.createHeader {
	background: color(display-p3 0.789 0.849 0.937);
}

td, th {
  border-left: 0px solid #dddddd;
  border-right: 0px solid #dddddd;
  border-top: 0px solid #dddddd;
  padding: 3px;
  font: 15px/1.231 arial, helvetica, sans-serif;
  text-align: left;
}
.prdStatusRow-Dev {
	//color: rgb(111, 111, 111);
	background-color: #bda;
}
th {
font-size: 13px;
font-weight: normal;
background-color: #ffffff;
border-bottom: 1px solid black;
}
``

th.width200, td.width200 {
text-align: left;
width: 200px;
}
th.tableTopLeft {
background-color: #BACBE3;
border-bottom: 0px solid black;
text-align: left;
padding-left: 8px;
font-weight: bold;
}
th.tableTopRight {
background-color: #BACBE3;
border-bottom: 0px solid black;
text-align: right;
padding-right: 8px;
}

.productTable tr:nth-child(even) {
  background-color: #e1e1e1;
}
/*
.centerSupplierTable, .centerIngTable td, th {
  border: 0px solid #dddddd;
  padding: 3px;
  text-align: left;
}
.centerSupplierTable input[type=text] {
  padding: 2px 2px 2px 5px;
  margin: 0;
  box-sizing: border-box;
  border: 0.5px solid #aaaaaa;
  background-color: none;
  font-size: 14px;
  color: black;
  text-align: left;
}
.centerIngTable input[type=text] {
  padding: 2px 2px 2px 5px;
  margin: 0;
  box-sizing: border-box;
  border: 0.5px solid #aaaaaa;
  background-color: none;
  font-size: 14px;
  color: black;
  text-align: left;
}
*/
.w75 {
	width: 75px;
}
.w100 {
	width: 100px;
}
.w150 {
	width: 150px;
}
.w200 {
	width: 200px;
}
.w300 {
	width: 300px;
}
/* FORM stuff
.form{
	background:#ededed;
	width:470px;
	margin:0 auto;
	padding-left:50px;
	padding-top:20px;
}
.form fieldset{
	border:0px;
	padding:0px;
	margin:0px;
}
.form p.contact {
	font-size: 12px;
	margin:0px 0px 10px 0;
	line-height: 14px;
	font-family:Arial, Helvetica;
}
.form input[type="text"] {
	width: 400px;
}
.form input[type="email"] {
	width: 400px;
}
.form input[type="password"] {
	width: 400px;
}
.form input.birthday {
	width:60px;
}
.form input.birthyear {
	width:120px;
}
.form label {
	color: #000;
	font-weight:bold;
	font-size: 12px;
	font-family:Arial, Helvetica;
}
.form label.month {
	width: 135px;
}
.form input, textarea {
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(150, 150, 150, 0.5);
	padding: 7px;
	font-family: Keffeesatz, Arial;
	color: #4b4b4b;
	font-size: 14px;
	-webkit-border-radius: 2px;
	margin-bottom: 15px;
	margin-top: -10px;
}
.form input:focus, textarea:focus {
	border: 1px solid #ff5400;
	background-color: rgba(255, 255, 255, 1);
}
.form .select-style {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-position: center right;
  background-repeat: no-repeat;
  border:1px solid rgba(150, 150, 150, 0.5);
  color: #4b4b4b;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .form textarea {
	 width: 400px;
 }
.form .gender {
  	width:410px;
  }
.form input.buttom{
	margin-top: 10px;
	margin-right: 10px;
	background-color: #a2bfe6;
	border-radius: 5px;
}
.form input.buttom:disabled {
	background-color: #d9d9db;
}
.form input.buttom:hover:enabled {
	background-color: #9cb0d2;
}
*/
/*
	img,form {
    border: 0px;
    margin: 0px;
    padding: 0px;
}
*/
textarea {
	width: 668px;
	height: 120px;
	padding: 5px;
	border: 1px solid #000000;
	resize: none;
	margin: 0px;
	display: block;
}

input.searchField
{
	width: 150px;
	//height: 18px;
	//min-height: 14px;
	//max-height: 18px;
	background-color: #FFFFFF;
	border: 1px solid #B6B6B6;
	border-radius: 5px;
	-moz-border-radius: 5px;
	padding-left: 26px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 10px;
	font-size: 14px !important;
    background-image: url(/img/searchIcon.png);
	background-repeat: no-repeat;
	background-position: -6px center;
}

.searchItem:hover {
	background-color: rgba(80,125,190,0.25);
}
/*
.searchForm {
	width: 250px;
	display: inline-block;
	float: right;
	text-align: right;
	margin-right: 10px;
	vertical-align: baseline;
}
*/
/* UNUSED
.refineSearchOptions {
	width: 925px;
    margin: 10px auto 10px auto;
}
.IngSearchOptions {
	width: 600px;
    margin: 10px auto 10px auto;
}
.InsSearchOptions {
	width: 1010px;
    margin: 10px auto 10px auto;
}
.VenSearchOptions {
	width: 725px;
    margin: 10px auto 10px auto;
}
.ImgSearchOptions {
	width: 1010px;
    margin: 10px auto 10px auto;
}
.MnfrSearchOptions {
	width: 700px;
    margin: 10px auto 10px auto;
}
.homeTable {
	display: grid;
	grid-template-columns: 100px 100px 100px 100px 100px 100px;
	margin: 50px auto 50px auto;
	width: 600px;
}
.homeTable > div {
	text-align: center;
	padding: 15px;
}
.ProdTable {
	display: grid;
	grid-template-columns: 250px 75px 75px 75px 75px 75px 75px 75px 75px 75px;
    width: 925px;
    margin: 10px auto 10px auto;
}
.IngTable {
	display: grid;
	grid-template-columns: 60px 300px 75px 150px;
    width: 600px;
    margin: 10px auto 10px auto;
}
.InsTable {
	display: grid;
	grid-template-columns: 60px 300px 100px 100px 150px 75px 75px 150px;
    width: 1010px;
    margin: 10px auto 10px auto;
}
.VendorTable {
	display: grid;
	grid-template-columns: 100px 200px 200px;
    width: 500px;
    margin: 10px auto 10px auto;
	border: 1px solid #B6B6B6;
}
.ImgTable {
	display: grid;
	grid-template-columns: 75px 60px 300px 200px 75px 300px;
    width: 1010px;
    margin: 10px auto 10px auto;
}
.MnfrTable {
	display: grid;
	grid-template-columns: 200px 100px 125px 250px;
    width: 700px;
    margin: 10px auto 10px auto;
}
.ProdTable > span, .IngTable > span, .InsTable > span, .VendorTable > span, .MnfrTable > span, .ImgTable > span {
	padding: 8px 10px;
}
.ProdTable > span.main, .IngTable > span.main, .InsTable > span.main, .VendorTable > span.main, .MnfrTable > span.main, .ImgTable > span.main {
	padding: 8px 4px;
	border-bottom: 1px solid #B6B6B6;
	border-right: 1px solid #B6B6B6;
}
.ProdTable > span.mainInactive {
	padding: 8px 4px;
	border-bottom: 1px solid #B6B6B6;
	border-right: 1px solid #B6B6B6;
	background-color: #e2e2e2;
	color: #717171;
}
.ProdTable > span.mainDev {
	padding: 8px 4px;
	border-bottom: 1px solid #B6B6B6;
	border-right: 1px solid #B6B6B6;
	background-color: #dbeedd;
}
.ProdTable > span.main:hover, span.mainDev:hover, span.mainInactive:hover, .IngTable > span.main:hover, .InsTable > span.main:hover, .VendorTable > span.main:hover, .MnfrTable > span.main:hover, .ImgTable > span.main:hover {
	background-color: rgba(80,125,190,0.25);
}
.tableHeader {
	font-weight: bold;
	background-color: rgba(80,125,190,0.51);
	border-bottom: 2px solid black;
}
.searchTableHeader {
	float: left;
	padding: 10px;
	font-weight: bold;
}
*/
.searchItem {
  padding: 5px;
	  float: left;
}
.leftBorder {
	border-left: 1px solid #B6B6B6;
}
.col-1 {
	width: 200px;
}
.col-75 {
	width: 75px;
}
.center {
	text-align: center;
}
/*
.row {
	width: auto;
border: 1px solid blue;
}
*/

.footer {
	padding: 10px;
	background-color: rgba(166, 188, 219, 1) !important;
	display: block;
	position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 99%;
		z-index: 999;
}
a {
	color: #000;
    text-decoration: none;
}
a:hover {
	color: blue;
	text-decoration: none;
}
a.button {
    display: inline-block;
    width: 75px;
    height: 18px;
    background: #a9bfe7;
    padding: 3px;
    text-align: center;
    border-radius: 5px;
    color: black;
    font-weight: bold;
}
a.button:hover {
    display: inline-block;
    width: 75px;
    height: 18px;
    background: #d2d5dc;
    padding: 3px;
    text-align: center;
    border-radius: 5px;
    color: blue;
    font-weight: bold;
}
.catList {
	width: 400px;
	margin: 10px auto 10px auto;
	padding: 10px;
	border: 1px solid grey;
}
/*
fieldset input, textarea {
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(150, 150, 150, 0.5);
	padding: 5px;
	font-family: Arial;
	color: #000;
	font-size: 12px;
	-webkit-border-radius: 2px;
	margin-bottom: 5px;
	margin-top: 0px;
	width: 380px;
}
*/
.width470 {
	width: 500px;
	margin: 10px auto;
}
.imgListRow {
	width: 500px;
}
.imgListImg {
	width: 100px;
	min-height: 100px;
	float: left;
	margin-right: 5px;
}

.imgListNotes {
	
}

/* FILE UPLOAD */
.container {
	width: 500px;
	margin: 10px auto;
}

.upload-area{
    width:500px;
    height: 200px;
    border: 2px solid lightgray;
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    overflow: auto;
}

.upload-area:hover{
    cursor: pointer;
}

.upload-area h1{
    text-align: center;
    font-weight: normal;
    font-family: sans-serif;
    line-height: 50px;
    color: darkslategray;
}

#file{
    display: none;
}
.imgmsg{
    width:500px;
    margin: 0 auto;
    padding: 5px;
   }

/* Thumbnail */
.thumbnail-area{
    width:500px;
    margin: 0 auto;
   }
.thumbnail{
    width: 80px;
    height: 80px;
    padding: 2px;
    border: 2px solid lightgray;
    background-color: #efefef
    border-radius: 3px;
}

.size{
    font-size:12px;
}
.auth {
	margin: 10px 10px 10px 15px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-style: normal;
}
li {
  display: inline;
}
li a {
  display: inline;
  color: black;
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
}
li a:hover {
	color: rgb(153, 153, 155);
	text-decoration: none;
}
.bottomDiv {
	height: 50px;
	clear: both;
}
.required {
	font-weight: bold;
	font-size: 16px;
	color: rgb(255, 0, 0);
}