﻿html {
  height: 100%;
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  color: #555;
  width: 970px;
  height: 100%;
  font-family: Raleway, Avenir, Times, "Times New Roman", serif;
  box-sizing: border-box;
}
.clear {
  clear: both;
}
/* Text Styles*/
h1,
h2,
h3,
h4 {
  /*margin: 0 0 10px 0;*/
  margin: 0;
  padding: 0;
  color: #555;
  text-align: left;
}
h1.center,
h2.center,
h3.center,
h4.center {
  text-align: center;
}
h1 {
  font-size: 20px;
}
h2 {
  font-size: 18px;
  color: #888;
}
h3 {
  font-size: 16px;
  /*margin-bottom: 0;*/
}
h4 {
  font-size: 14px;
}
/* Inputs */
input,
select,
textarea {
  font-size: 12pt;
}
input {
  padding: 3px;
}
input.fullWidth {
  width: 100%;
}
select {
  font-size: 12pt;
  max-width: 100%;
}
.Invalid {
  border-color: red;
}
/* Buttons and Button Look-alikes */
button,
.Button {
  border: none;
  outline: none;
  margin-bottom: 5px;
  padding: 18px 18px 18px 14px;
  color: #555;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
}
button.TileButton,
.Button.TileButton {
  padding: 4px 10px 2px 10px;
  font-size: 8px;
  margin: 2px;
}
button.Small,
.Button.Small {
  padding: 4px 10px 2px 10px;
}
button:active,
.Button:active {
  position: relative;
  top: 1px;
}
.WithRightArrow {
  text-align: left;
  padding-right: 8px;
}
.WithLeftArrow {
  text-align: right;
  padding-left: 8px;
}
.Small.WithRightArrow {
  text-align: left;
  padding-right: 2px;
}
.Small.WithLeftArrow {
  text-align: right;
  padding-left: 2px;
}
.WithRightArrow img,
.WithLeftArrow img {
  height: 1em;
  margin-top: 0.125em;
}
.WithRightArrow img {
  float: right;
  margin-left: 0.5em;
}
.WithLeftArrow img {
  float: left;
  margin-right: 0.5em;
}
button.Title {
  width: 100%;
  text-align: left;
  /*padding: 1em;*/
  margin-bottom: 8px;
}
button.Title img {
  height: 1em;
  float: right;
}
/* Basic Layouts */
div.MainContentContainer {
  background-color: #e8e8e8;
  /*border: 1px solid rgba(0, 0, 0, 0.1);*/
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  width: 970px;
  position: relative;
  height: 800px;
}
div.MainContentContainer > h1 {
  margin: 0;
}
div.HeaderContainer > div {
  display: inline-block;
  position: absolute;
  top: 40px;
}
div.HeaderBar {
  padding: 40px 35px 0 35px;
}
div.HeaderBar > h1 {
  float: left;
}
div.HeaderBar > button {
  float: right;
}
div.ColumnContainer {
  padding: 0px;
}
div.ColumnContainer > div {
  display: inline-block;
  margin: 0;
  vertical-align: top;
  bottom: 60px;
}
div.ContentFooter {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
}
div.ContentFooter .BottomLeft {
  position: absolute;
  bottom: 20px;
  left: 35px;
}
div.ContentFooter .BottomMiddle {
  position: absolute;
  bottom: 20px;
  left: 335px;
}
div.ContentFooter .BottomRight {
  position: absolute;
  bottom: 20px;
  right: 35px;
}
/* Columns and boxes */
div.StandardColumns div.Column1 {
  /*margin-right: 0;*/
  width: 290px;
  left: 35px;
}
div.StandardColumns div.Column2 {
  width: 300px;
  left: 335px;
}
div.StandardColumns div.Column3 {
  width: 290px;
  left: 645px;
}
div.WhiteBox {
  background-color: white;
  position: relative;
  padding: 0;
}
div.WhiteBox div.Footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 5px;
}
div.WhiteBox.WithPadding {
  padding: 10px;
  box-sizing: border-box;
}
div.WhiteBox.FullHeight {
  height: calc(100vh - 250px);
  min-height: 280px;
  overflow-y: auto;
}
/* Popups */
#PageMask {
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  visibility: hidden;
  display: none;
  z-index: 998;
}
#divMaskMessage {
  background-color: #222;
  color: white;
  font-family: Raleway, Avenir, Times, "Times New Roman", serif;
  font-size: 18px;
  margin: 35% auto auto auto;
  text-align: center;
  width: 400px;
  visibility: hidden;
  display: none;
}
#PopUpWindow {
  background-color: #e8e8e8;
  border: 1px solid rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0px 4px 30px 0px rgba(99, 99, 99, 0.3);
  -moz-box-shadow: 0px 4px 30px 0px rgba(99, 99, 99, 0.3);
  box-shadow: 0px 4px 30px 0px rgba(99, 99, 99, 0.3);
  width: 500px;
  position: relative;
  margin: 20vh auto 0 auto;
  text-align: left;
  visibility: hidden;
  display: none;
}
#PopUpWindow.AlertsPopup {
  justify-content: center;
  width: 800px;
}
#PopUpWindow.AlertsPopup > div {
  max-height: 500px;
  overflow: auto;
}
#PopUpWindow.AlertsPopup > div > div {
  margin-bottom: 10px;
}
#PopUpWindow a {
  color: #555;
}
#PopUpWindow.Error {
  border: 1px solid #e11;
}
#PopUpWindow.Error > img {
  right: initial;
  top: 6px;
  left: 6px;
  width: 32px;
  height: 32px;
  cursor: default;
  opacity: 1;
}
#PopUpWindow.Error > h1 {
  padding: 10px 10px 10px 45px;
  color: #fff;
  background-color: #e22;
}
#PopUpWindow > img {
  cursor: pointer;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  opacity: 0.7;
}
#PopUpWindow > img:hover {
  opacity: 1;
}
#PopUpWindow > h1 {
  margin-bottom: 0;
  padding: 10px 35px 10px 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#PopUpWindow > div {
  padding: 10px;
}
#PopUpWindow div.Buttons {
  height: 20px;
  text-align: center;
  padding: 10px;
  position: relative;
}
#PopUpWindow div.Buttons button {
  margin-right: 5px;
  margin-left: 5px;
}
#PopUpWindow button.Left {
  position: absolute;
  left: 0;
}
#PopUpWindow button.Right {
  position: absolute;
  right: 0;
}
#PopUpWindow p {
  margin-bottom: 5px;
  margin-top: 0;
}
#PopUpWindow input {
  box-sizing: border-box;
}
#errorPopupDetails p {
  overflow: auto;
  max-height: 170px;
}
.WithHover {
  cursor: pointer;
}
/* Background Color Gradients */
.StandardBackground {
  color: #FFF;
  background: #777;
}
.StandardBackground.WithHover:hover {
  background: #222;
}
.neutralButton {
  color: #555;
  background: #ddd;
}
.neutralButton.WithHover:hover {
  background: #bfbfbf;
}
.submenuOption {
  color: #FFF;
  background: #CCC;
}
.submenuOption.WithHover:hover {
  background: #b3b3b3;
}
.menuButton {
  color: #FFF;
  background: #222;
}
.Scroller {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  /* Required to prevent relatively-positioned elements randomly disappearing in Chrome */
  -webkit-transform: translateZ(0);
}
.FixedScroller {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  height: initial;
  position: absolute;
  top: 140px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  /* Required to prevent relatively-positioned elements randomly disappearing in Chrome */
  -webkit-transform: translateZ(0);
}
.hidden {
  display: none;
}
@media screen and (max-height: 525px) {
  body {
    height: 525px;
  }
}
@media screen and (max-height: 800px) {
  body {
    position: relative;
  }
  div.MainContentContainer {
    position: absolute;
    top: 100px;
    bottom: 0;
    height: initial;
  }
}
@font-face {
  font-family: Avenir;
  font-weight: bold;
  src: url("../Resources/Fonts/AvenirLTStd-Medium.otf") format("opentype");
}
@font-face {
  font-family: Avenir;
  font-weight: normal;
  src: url("../Resources/Fonts/AvenirLTStd-Book.otf") format("opentype");
}
.Disabled {
  opacity: 0.2;
  cursor: auto;
}
.Prepped {
  background-color: #222;
  color: white;
}
.Warehouse {
  background-color: #222;
  color: white;
}
.Cancel {
  background-color: #fe0000;
  color: white;
}
.Proceed {
  background-color: #222;
  color: white;
}
.Confirm {
  background-color: #8bc74b;
  color: white;
}
.Prepped.WithHover:hover {
  background-color: #9b9999;
  color: white;
}
.Warehouse.WithHover:hover,
.StoreForLater.WithHover:hover,
.Confirm.WithHover:hover {
  background-color: #9b9999;
  color: white;
}
.Cancel.WithHover:hover {
  background-color: #d70404;
  color: white;
}
.Proceed.WithHover:hover {
  background-color: #8bc74b;
  color: white;
}
.noselect {
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* non-prefixed version, currently */
}
.errorMessage {
  color: #e11;
}
.confirmMessage {
  color: #8bc74b;
}
body.JBKind {
  background-color: #FFF;
}
body.JBKind .StandardBackground {
  background: #353533;
}
body.JBKind #PopUpWindow {
  background-color: white;
}
body.JBKind #PopUpWindow h1 {
  background-color: #000000;
  color: #FFF;
}
body.JBKind div.MainContentContainer {
  background-color: #C5D2D8;
}
body.JBKind .Cancel,
body.JBKind .neutralButton,
body.JBKind .Cancel.WithHover:hover,
body.JBKind .neutralButton.WithHover:hover {
  background: #353533;
  color: #FFF;
}
body.JBKind .neutralButton.WithHover:hover {
  background: #bfbfbf;
}
body.JBKind .submenuOption {
  color: #FFF;
  background: #353533;
}
body.JBKind input[type=text],
body.JBKind input[type=password],
body.JBKind input[type=email],
body.JBKind input[type=number],
body.JBKind input[type=date],
body.JBKind input[type=submit],
body.JBKind input[type=button],
body.JBKind textarea,
body.JBKind button,
body.JBKind select,
body.JBKind .chosen-single {
  border-radius: 15px;
  border: 1px solid black;
}
body.JBKind input[type=number] {
  text-align: center;
}
body.JBKind input[type=submit],
body.JBKind input[type=button],
body.JBKind textarea,
body.JBKind button {
  padding: 10px 20px;
}
body.JBKind #PageMask input[type=submit],
body.JBKind #PageMask input[type=button],
body.JBKind #PageMask textarea,
body.JBKind #PageMask button {
  padding: 5px 10px;
}
body.JBKind input[type=text],
body.JBKind input[type=password],
body.JBKind input[type=email],
body.JBKind input[type=number],
body.JBKind input[type=date],
body.JBKind select {
  padding: 0 5px;
}
body.JBKind input[type=number] {
  padding-right: 0;
}
body.JBKind input[type=submit],
body.JBKind input[type=button],
body.JBKind button {
  text-align: center;
  font-weight: bold;
  font-size: 16px;
}
body.JBKind span.ForgotPasswordText {
  text-decoration: underline;
}
body.JBKind .themes {
  margin-top: 25px;
}
body.JBKind div.MainContentContainer {
  background-color: white;
}
body.JBKind h1 {
  font-size: 30px;
}
body.JBKind #divJBKindHeader {
  margin-top: 10px;
}