ul.optionmenu {
  position: relative;
  background: #40438d;
  float: none;
  width: 100%;
  min-height: auto;
  height: 40px;
  display: inline-block;
  text-align: center;
  margin-left: 0;
  margin-bottom: 0;
  border: 0;
  white-space: nowrap;
}

ul.optionmenu li {
  display: inline-block;
  width: auto;
  border: 0;
}

ul.optionmenu li > a {
  width: auto;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0;
  margin: 0 18px;
  border-bottom: 0 solid transparent;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 15px;
}

ul.optionmenu li.activeSub .submenu,
ul.optionmenu li:hover .submenu,
ul.optionmenu li:focus .submenu {
  opacity: 1;
  pointer-events: all;
}

ul.optionmenu li.selected > a,
ul.optionmenu li:hover > a,
ul.optionmenu li:focus > a {
  background: none;
  color: #f15d26;
}

ul.optionmenu li.selected > a {
  color: #f15d26;
}

ul.optionmenu li a:focus {
  text-decoration: none;
}

ul.optionmenu li .submenu {
  width: 100%;
  min-height: 170px;
  top: 40px;
  left: 0;
  background: #40438d url("../images/bg-nav.e92219982f7a.png") repeat center 0;
  white-space: normal;
  overflow: hidden;
  height: auto;
  z-index: 20;
}

ul.optionmenu li .submenu ul {
  border: 0;
  left: 50%;
  margin-top: 37px;
  margin-bottom: 32px;
  margin-left: -500px;
  float: none;
  width: 500px;
  min-height: 90px;
  background: none;
  overflow: hidden;
  padding-right: 12px;
}

ul.optionmenu li .submenu ul li {
  width: 50%;
  float: left;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
  border: 0;
}

ul.optionmenu li .submenu ul li:hover a {
  color: #f15d26;
  background: transparent;
  border: 0;
  text-decoration: none;
}

ul.optionmenu li .submenu ul li a {
  color: #fff;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0;
  font-weight: 500;
  text-transform: none;
  font-size: 16px;
}

ul.optionmenu li .submenu ul li a:hover,
ul.optionmenu li .submenu ul li a:focus {
  color: #f15d26;
  border: 0;
  background: transparent;
  text-decoration: none;
}

ul.optionmenu li .submenu .salesblock {
  display: block !important;
  float: none;
  position: absolute;
  overflow: hidden;
  left: 50%;
  margin-left: 12px;
  top: 24px;
  width: 500px;
  max-width: 50%;
  height: 120px;
  padding: 10px 40px;
  text-align: left;
  border: none;
  background: transparent;
}

ul.optionmenu li .submenu .salesblock img {
  width: 150px;
  height: 100px;
  float: left;
  margin-top: 0;
  margin-right: 40px;
}

ul.optionmenu li .submenu .salesblock h3 {
  display: none;
}

ul.optionmenu li .submenu .salesblock p {
  text-shadow: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  margin: 5px 0 10px;
}

ul.optionmenu li .submenu .salesblock p .button {
  width: 225px;
  height: 40px;
  background: #f15d26;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
  text-transform: none;
  letter-spacing: 0;
  border: 0;
}

ul.optionmenu li .submenu .salesblock p .button:hover,
ul.optionmenu li .submenu .salesblock p .button:focus {
  background: #2c2d7b;
}

.sku {
  width: 75px;
  display: table-cell;
}

.pl {
  width: 25px;
  display: table-cell;

}

.coo {
  width: 50px;
  display: table-cell;
}

.description {
  width: 340px;
  display: table-cell;
}

.crt-balance {
  width: 60px;
  display: table-cell;
  text-align: right;
}

.pcs-balance {
  width: 80px;
  display: table-cell;
  text-align: right;
}

.balance-description {
  width: 140px;
  display: table-cell;
  text-align: center;
}

.henxweb_scrollheader {
  display: flex;
  background: #FFFFFF;
  margin: -24px 0 0 -32px;
  justify-content: center;
  color: black;
  text-align: left;
  padding: 0;
  line-height: 20px;
}

.ts_status {
  width: 150px;
  display: table-cell;
  text-align: left;
  padding: 5px;
}

.shipments_invoice {
  width: 200px;
  display: table-cell;
  text-align: left;
  vertical-align: top;
}

.shipments_location {
  width: 120px;
  display: table-cell;
  text-align: left;
  vertical-align: top;
}

.shipments_description {
  width: 140px;
  display: table-cell;
  text-align: center;
}

.shipments_crt {
  width: 60px;
  display: table-cell;
  text-align: right;
  vertical-align: top;
}

.shipments_pcs {
  width: 80px;
  display: table-cell;
  text-align: right;
  vertical-align: top;
}

.shipments_spacer {
  width: 20px;
  display: table-cell;
}

.address {
  width: 320px;
  display: table-cell;
  vertical-align: top;
}

.remarks {
  width: 660px;
  display: table-cell;
  vertical-align: top;
}

.detail_label {
  width: 100px;
  display: table-cell;
  vertical-align: top;
}

.detail_content {
  width: 200px;
  display: table-cell;
  vertical-align: top;
}

.detail_spacer {
  width: 60px;
  display: table-cell;
  vertical-align: top;
}

.city {
  width: 80px;
  display: table-cell;
  vertical-align: top;
}

.place {
  width: 220px;
  display: table-cell;
  vertical-align: top;
}

.venue {
  width: 200px;
  display: table-cell;
  vertical-align: top;
}

.date {
  width: 100px;
  display: table-cell;
  vertical-align: top;
  text-align: right;
}

.henxweb_table {
    align-content: center;
    display: block;
    font-size: 12px;
}

.henxweb_table .total {
    border-top: 1px solid #40438d;
}

.henxweb_title {
    border-bottom: 1px solid #40438d;
    font-weight: bold;
}

.henxweb_total {
    border-top: 1px solid #40438d;
    font-weight: bold;
}

.ghosted {
  color: grey;
}

.bold {
  font-weight: bold;
}

.tooltip {
  position: relative;
  border-bottom: 1px dotted #40438d;
  z-index: 0;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #40438d;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  font-weight: normal;

  /* Position the tooltip */
  position: absolute;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

nav {
  z-index: 1;
}

a {
  color: #40438d;
}

@media screen and (max-width: 719px) {
  .medium-priority {
    display: none;
  }

  .low-priority {
    display: none;
  }
}

@media screen and (min-width: 720px) and (max-width: 1020px) {
  .low-priority {
    display: none;
  }
}

/* T067: HenX|ICAT lockup is wider than the retired "20 years" mark — widen
   the logo boxes so it keeps today's visual weight. Negative margin stays
   half the width so the box remains centred (left: 50%). */
header .logo {
  width: 320px;
  margin-left: -160px;
}

/* Scoped to match the vendor breakpoint (CD60FA…-v3.css:3053-3058): below
   1021px the vendor sheet repositions the scroll-header logo to
   left: 15px; margin-left: 0, so an unscoped margin-left here would still
   win and push the logo off-screen. */
@media (min-width: 1021px) {
  .scrollheader .logo {
    max-width: 200px;
    margin-left: -100px;
  }
}

/* T068: active-warehouse label in the balance scroll header. .henxweb_table
   is centred by its flex parent (.henxweb_scrollheader, justify-content:
   center) at a horizontal position that depends on viewport width, so the
   label is positioned relative to the table itself (left: 0) rather than a
   fixed offset — that keeps its left edge aligned with the "SKU" column
   title below at any width, matching the design decision, without
   hardcoding where the centred table lands on screen. Scoped to the
   scroll-header's own .henxweb_table so the balance grid's identically
   classed table (.henxweb_table in #ContentDetail) is unaffected. */
.henxweb_scrollheader .henxweb_table {
  position: relative;
}

.warehouse_label {
  position: absolute;
  left: 0;
  /* Centred in the 64px bar: label top = bar top + (64 - 24) / 2 = 20px.
     .henxweb_table's own top sits at the bar's bottom edge (y=64) inside
     that bar, so top: -44px lifts the label up from there to y=20. */
  top: -44px;
  color: #f15d26;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  white-space: nowrap;
}