* {
	   font-family: verdana, arial, sans-serif;
	   font-size: 11px;
	   box-sizing: border-box;
}
body {
	   color: #000000;
	   background-color: #FFFFFF;
	   overflow-x: hidden;
}

/*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;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    position: relative;
    z-index: 10;
    height: 125px;
}
/*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: calc(100vh - 100px);
    position: relative;
    width: 100%;
}
/*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.
*/
.Left,
.Middle,
.Right {
    overflow: auto;
    height: auto;

    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}
/*Entirely optional – just wanted to remove the scrollbar on WebKit browsers as I find them ugly*/
.Left::-webkit-scrollbar,
.Middle::-webkit-scrollbar,
.Right::-webkit-scrollbar {
    width: 12px;
}

.Left::-webkit-scrollbar-track,
.Middle::-webkit-scrollbar-track,
.Right::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
.Left::-webkit-scrollbar-thumb,
.Middle::-webkit-scrollbar-thumb,
.Right::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

/*  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.*/
.Left {
    width: 22rem;

}

.Middle {
    flex: 1;
}

.Right {
    width: 12.5rem;
    background-color: violet;
}
/*End New CSS*/
a {
	   color: #0000FF;
	   font-weight: bold;
	   text-decoration:none;
}
hr {
       height: 1px;
       background-color: #999999;
       border: none;
}
.button {
       height: 21px;
       cursor: pointer;
	   font-weight: bold;
	   text-decoration:none;
       color: #FFFFFF;
	   background-color: #2169A1;
	   padding: 2px;
	   padding-left: 4px;
	   padding-right: 4px;
	   margin: 1px;
	   border-top:1px solid #ccc;
       border-left:1px solid #ccc;
       border-right:1px solid #808080;
       border-bottom:1px solid #000;
}
.button-go {
       height: 66px;
       cursor: pointer;
	   font-weight: bold;
	   text-decoration:none;
       color: #FFFFFF;
	   background-color: #2169A1;
	   padding: 2px;
	   padding-left: 4px;
	   padding-right: 4px;
	   margin: 1px;
	   border-top:1px solid #ccc;
       border-left:1px solid #ccc;
       border-right:1px solid #808080;
       border-bottom:1px solid #000;
}
.button-action {
       height: 21px;
       cursor: pointer;
	   font-weight: bold;
	   text-decoration:none;
       color: #FFFFFF;
	   background-color: #E57100;
	   padding: 2px;
	   padding-left: 4px;
	   padding-right: 4px;
	   margin: 1px;
	   border-top:1px solid #ccc;
       border-left:1px solid #ccc;
       border-right:1px solid #808080;
       border-bottom:1px solid #000; 
}
.button-use_caution {
       height: 21px;
       cursor: pointer;
	   font-weight: bold;
	   text-decoration:none;
       color: #FFFFFF;
	   background-color: #FF0000;
	   padding: 2px;
	   padding-left: 4px;
	   padding-right: 4px;
	   margin: 1px;
	   border-top:1px solid #ccc;
       border-left:1px solid #ccc;
       border-right:1px solid #808080;
       border-bottom:1px solid #000;  
}
.button-disabled {
       height: 21px;
       cursor: pointer;
	   font-weight: bold;
	   text-decoration:none;
       color: #FFFFFF;
	   background-color: #bbbbbb;
	   padding: 2px;
	   padding-left: 4px;
	   padding-right: 4px;
	   margin: 1px;
	   border-top:1px solid #ccc;
       border-left:1px solid #ccc;
       border-right:1px solid #808080;
       border-bottom:1px solid #000; 
}
.button-hidden {
       height: 0px;
       width: 0px;
	   text-decoration:none;
       color: #FFFFFF;
	   background-color: #FFFFFF;
}
a:hover {
	   color: #0000FF;
	   text-decoration: underline;

}
.button:hover{
       cursor: pointer;
	   color: #0000FF;
	   background-color: #5FBDF5;
	   text-decoration: none;
}
.button-action:hover {
       cursor: pointer;
	   color: #000000;
	   background-color: #FE8B47;
	   text-decoration: none;
}
.button-use_caution:hover {
       cursor: pointer;
	   color: #FF0000;
	   background-color: #FA8072;
	   text-decoration: none;
}

h1 {
	   font-size: 18px;
}
h2 {
	   font-size: 16px;
}
h3, h3 u {
	   font-size: 14px;
}
.size-normal{
    width: 220px;
}
.size-small {
    width: 100px;
}
.size-smaller {
    width: 40px;
}
.size-large {
    width: 350px;
}
.size-larger {
    width: 500px;
}
.size-checkbox {
    width: 25px;
}


.program-title {
	   font-size: 24px;
	   color: #000080;
	   text-decoration:none;
	   font-weight: normal;
}
.section-title {
	   font-size: 14px;
	   color: #444444;
	   text-decoration:none;
	   font-weight: normal;
}
.menu-area{
	   vertical-align:top;
	   font-size:14px;
}
.menu-divider {
	   background-color: #999999;
}
.menu-spacer {
	   height: 5;
}
.menu-section {
	   font-size: 13px;
}
.menu-section-description {
	   font-size: 11px;
	   font-weight: normal;
	   color: black;
}
.content-area{
	   vertical-align: top;
	   color: #000000;
}
.help-content-area{
	   vertical-align: top;
	   color: #000000;
	   font-size: 10px;
}

.content-table {
	   border-collapse: collapse;
	   border: 1px solid #666666;
	   background-color: FFFFFF;
}
.content-table th{
	   font-size: 14px;
	   font-weight: bold;
	   border: 1px solid #666666;
	   background-color: #FFEC8B;
}
.content-table td, .content-table td .content-table td, .content-table td .malcontent-table td{
	   border: 1px solid #666666;
	   padding: 5px;
}
.content-table td td{
	   border: none;
	   padding: 0px;
}
.content-table tr td .simple-table td{
	   border: none;
	   padding: 0px;
}
.content-table td.options{
   text-align: center;
   background-color: #eeeeee;
}



.malcontent-table {
	   border-collapse: collapse;
	   border: 1px solid #666666;
	   background-color: FFFFFF;
}
.malcontent-table th{
	   font-size: 14px;
	   font-weight: bold;
	   border: 1px solid #666666;
	   background-color: #88dd88;
}
.malcontent-table td, .malcontent-table td .malcontent-table td, .malcontent-table td .content-table td {
	   border: 1px solid #666666;
	   padding: 5px;
}
.malcontent-table td td{
	   border: none;
	   padding: 0px;
}
.malcontent-table tr td .simple-table td{
	   border: none;
	   padding: 0px;
}
.malcontent-table td.options{
   text-align: center;
   background-color: #eeeeee;
}

.smallcontent-table {
	   border-collapse: collapse;
	   border: 1px solid #666666;
	   background-color: #FFFFFF;
	   margin-bottom: 15px;
}
.smallcontent-table th{
	   font-size: 9px;
	   font-weight: bold;
	   border: 1px solid #666666;
	   background-color: #FFEC8B;
}
.smallcontent-table td, .smallcontent-table td .smallcontent-table td, .smallcontent-table td .content-table td {
	   border: 1px solid #666666;
	   padding: 5px;
}
.smallcontent-table td td{
	   border: none;
	   padding: 0px;
}
.smallcontent-table tr td .simple-table td{
	   border: none;
	   padding: 0px;
}
.smallcontent-table td.options{
   text-align: center;
   background-color: #eeeeee;
}


.discontent-table {
	   border-collapse: collapse;
	   border: 1px solid #666666;
	   background-color: FFFFFF;
}
.discontent-table th{
	   font-size: 14px;
	   font-weight: bold;
	   border: 1px solid #666666;
	   background-color: #ffaa66;
}
.discontent-table td, .discontent-table td .discontent-table td, .discontent-table td .content-table td {
	   border: 1px solid #666666;
	   padding: 5px;
}
.discontent-table td td{
	   border: none;
	   padding: 0px;
}
.discontent-table tr td .simple-table td{
	   border: none;
	   padding: 0px;
}
.discontent-table td.options{
   text-align: center;
   background-color: #eeeeee;
}


.odd{
   background-color: #eeeeee;
}


.content-table-shadow-right {
	   background-color: #CCCCD0;
	   width: 3;
	   vertical-align: top;
}
.content-table-shadow-bottom{
	   background-color: #CCCCD0;
	   height: 3;
	   text-align: left;
}
.content-divider {
	   background-color: #999999;
}

.smallprint {
   font-size: 9px;
   font-style: italic;
   text-align: center;
}
a.smallprint {
   color: #000000;
   font-size: 9px;
   font-style: italic;
   font-weight: normal;
}
a.smallprint:hover {
   color: #000000;
   font-size: 9px;
   font-style: italic;
   font-weight: normal;
}

.display-large-detail {
    padding-left: 20px;
}

.display-code {
    font-family : monospace;
}


.tabmenu {
  color: #000;
  border-bottom: 2px solid #999999;
  margin: 12px 0px 0px 0px;
  padding: 1px;
  z-index: 1;
  padding-left: 20px;
}
.tabmenu li {
  display: inline;
  overflow: hidden;
  list-style-type: none;
  cursor: pointer;
  padding: 4px;
}
.tabmenu a, a.active {
  color: #000080;
  background: #E0E0FF;
  border: 2px solid #999999;
  border-bottom: 1px solid #E0E0FF;
  padding: 2px 5px 0px 5px;
  margin: 0;
  text-decoration: none;
  font-weight: normal;
}
.tabmenu a.active {
  background: #ffffff;
  border-bottom: 3px solid #ffffff;
}
.tabmenu a:hover {
  text-decoration: underline;
  background: #eeeeee;
}
.tabmenu a:visited {
  color: #000080;
}
.tabmenu a.active:hover {
	  text-decoration: underline;
}
		
		


.fieldWithErrors {
  border: 2px solid red;
  display: block;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

div.uploadStatus {
  margin: 5px;
}

div.progressBar {
  margin: 5px;
}

div.progressBar div.border {
  background-color: #fff;
  border: 1px solid grey;
  width: 100%;
}

div.progressBar div.background {
  background-color: #333;
  height: 18px;
  width: 0%;
}


.shop-order-status-pending {
	   background-color: #FFAAAA;
	   font-weight: bold;
}
.shop-order-status-active {
	   background-color: #AAFFFF;
	   	font-weight: bold;
}
.shop-order-status-completed, .shop-order-status-invoiced {
	   background-color: #A3EB80;
	   font-weight: bold;
}
.shop-order-status-cancelled {
	   background-color: #F3A869;
	   font-weight: bold;
}
.shop-order-status-deleted {
	   background-color: red;
	   color: white;
	   font-weight: bold;
}
.qc-status-not-usable {
	   color: red;
	   font-weight: bold;
}

.notice {
    color: green;
    font-weight: bold;
}
.simple-error-notice {
    color: red;
    font-weight: bold;
}
.total-row {
	   background-color: #dddddd;
	   font-weight: bold;
}

.inventory_allocation-met {
	   background-color: #8CDD81;
}
.inventory_allocation-unmet {
	   background-color: #ffffff;
}

.inventory-unit-status-allocated, .inventory-unit-status-partial, .inventory-unit-status-blue{
	   background-color: #AAFFFF;
	   	font-weight: bold;
}
.inventory-unit-status-available, .inventory-unit-status-new, .inventory-unit-status-approved, .inventory-unit-status-green{
	   background-color: #55FF55;
	   font-weight: bold;
}
.inventory-unit-status-expired, .inventory-unit-status-empty, .inventory-unit-status-brown{
	   background-color: #F3A869;
	   font-weight: bold;
}
.inventory-unit-status-rejected, .inventory-unit-status-red{
	   background-color: #FFAAAA;
	   font-weight: bold;
}
.inventory-unit-status-quarantined, .inventory-unit-status-purple{
	   background-color: #cc66ff;
	   font-weight: bold;
}
.inventory-unit-status-Blue{
	   background-color: #add8e6;
	   font-weight: bold;
}
.inventory-unit-status-Lavender{
	   background-color: #e6e6fa;
	   font-weight: bold;
}
.inventory-unit-status-Orange{
	   background-color: #ffa500;
	   font-weight: bold;
}
.inventory-unit-status-Pink{
	   background-color: #ff69b4;
	   font-weight: bold;
}
.inventory-unit-status-Violet{
	   background-color: #8a2be2;
	   font-weight: bold;
}
.inventory-unit-status-Yellow{
	   background-color: #ffff00;
	   font-weight: bold;
}
.inventory-unit-status-DarkRed{
	   background-color: #8b0000;
	   font-weight: bold;
}

.quote-status-open {
	   background-color: #FFAAAA;
	   font-weight: bold;
}
.quote-status-finalized {
	   background-color: #AAFFFF;
       font-weight: bold;
}
.quote-status-accepted {
	   background-color: #A3EB80;
	   font-weight: bold;
}
.quote-status-declined {
	   background-color: #F3A869;
	   font-weight: bold;
}
.quote-status-completed {
	   background-color: #00B2EE;
	   font-weight: bold;
}
.quote-status-cancelled {
	   background-color: #FBEC5D;
	   font-weight: bold;
}
.quote-status-deleted {
	   background-color: red;
	   color: white;
	   font-weight: bold;
}
.supplier-order-status-open {
	   background-color: #FFAAAA;
	   font-weight: bold;
}
.supplier-order-status-finalized {
	   background-color: #AAFFFF;
       font-weight: bold;
}
.supplier-order-status-closed {
	   background-color: #A3EB80;
	   font-weight: bold;
}
.supplier-order-status-cancelled {
	   background-color: #F3A869;
	   font-weight: bold;
}

.supplier-order-status-sample {
	   background-color: #66FF33;
	   font-weight: bold;
}

.supplier-order-status-deleted {
	   background-color: red;
	   color: white;
	   font-weight: bold;
}
.supplier-order-status-partially-accepted {
	   background-color: yellow;
	   font-weight: bold;
}
.event_receiver {
    margin:0;
    padding:0;
    position:absolute;
    z-index:1;
    border:1px solid #666666;
    height:28px;
}
.event_receiver_active {
    background-color: #F3A869;
}

.event_total {
    background-color: #FFC469;
    font-size: 13px;
    font-weight:bold;
    margin:0;
    padding:0;
    position:absolute;
    z-index:1;
    border:1px solid #666666;
    height:30px;
}

.event_total_zero {
    background-color: #FFEEAA;
    font-size: 13px;
    font-weight:bold;
    margin:0;
    padding:0;
    position:absolute;
    z-index:1;
    border:1px solid #666666;
    height:30px;
}

.event_grand_total {
    background-color: #FFFF69;
    font-size: 13px;
    font-weight:bold;
    margin:0;
    padding:0;
    position:absolute;
    z-index:1;
    border:1px solid #666666;
    height:30px;
}

.event_grand_total_zero {
    background-color: #FFFFAA;
    font-size: 13px;
    font-weight:bold;
    margin:0;
    padding:0;
    position:absolute;
    z-index:1;
    border:1px solid #666666;
    height:30px;
}

.event_mod_plus {
    position: fixed;
    cursor: pointer;
    background-color: #CCFFCC;
    font-size: 18px;
    border:1px solid #666666;
    height:25px;
    width:35px;
    z-index:4;
}

.event_mod_minus {
    position: fixed;
    cursor: pointer;
    background-color: #FFCCCC;
    font-size: 18px;
    border:1px solid #666666;
    height:25px;
    width:35px;
    z-index:4;
}

.rackvis_rack {
    border: 1px solid #333333;
    background-color: #CCCC99;
    height:35px;
    float:left;
    margin:1px;
}

.rackvis_pallet {
    border: 1px solid #666666;
    background-color: #FFFF66;
    float:left;
    text-align:center;
    margin:1px;
}

.rackvis_unit_qc_approved {
    border: 1px solid #666666;
    background-color: #99FF99;
    font-size:8px;
    height:12px;
    width:12px;
    float:left;
    text-align:center;
    margin:1px;
}

.rackvis_unit_qc_30days {
    border: 1px solid #666666;
    background-color: #33FFEE;
    font-size:8px;
    height:12px;
    width:12px;
    float:left;
    text-align:center;
    margin:1px;
}

.rackvis_unit_qc_rejected {
    border: 1px solid #666666;
    background-color: #FF3333;
    font-size:8px;
    height:12px;
    width:12px;
    float:left;
    text-align:center;
    margin:1px;
}


.rackvis_unit_qc_quarantined {
    border: 1px solid #666666;
    background-color: #FE8A34;
    font-size:8px;
    height:12px;
    width:12px;
    float:left;
    text-align:center;
    margin:1px;
}


div.link {
    cursor: pointer;
    display: inline;
}
div.link:hover, div.link:active {
    text-decoration: underline;
}

.inventory-status-good {
	   background-color: #CCFF99;
	   font-weight: bold;
}
.inventory-status-warning {
	   background-color: #ffff99;
	   font-weight: bold;
}
.inventory-status-bad {
	   background-color: #FFAAAA;
	   font-weight: bold;
}
.inventory-status-supplied {
	   background-color: #4C4CFF;
	   color: #FFFFFF;
	   font-weight: bold;
}
.cyclecount-found {
       color: #600000;
       font-weight: bold;
}
.cyclecount-adjusted {
       background-color: #e8e8e8;
}
.cyclecount-lost {
       background-color: #f4e8b0;
       color: #600000;
       font-weight: bold;
}
.cyclecount-skipped {
}
.cyclecount-normal {
       background-color: #A3EB80;
}

.so-activity-pending {
	   background-color: #ffff99;
	   font-weight: bold;
}
.so-status-pending {
	   background-color: #CCFF99;
	   font-weight: bold;
}
.so-status-setupscan {
	   background-color: #FFFF33;
	   font-weight: bold;
}
.so-status-generic {
	   background-color: #FFAAAA;
	   color: #FFFFFF;
	   font-weight: bold;
}
#outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
}
.input-borderless {
    border: 0px none;
    outline: none;   
    text-align: center;
    display: inline-block;
    font-weight: bold;
}
.scale-weight {
	   background-color: #ff6b1a;
	   font-size: 20px;
	   font-weight: bold;
	   text-align: center;
}
.scale-weight-bad {
	   background-color: #FF0000;
	   font-size: 20px;
	   font-weight: bold;
	   text-align: center;
}