.cms-direct-order.theme-pearl .page-wrapper {
  overflow: unset !important;
}

.direct-order.static-page-container {
  padding: 0 1.8rem;
}

.direct-order-search {
  height       : 48px !important;
  border-color : #dfdfdf !important;
  transition   : border-color 0.1s ease-out !important;
  font-family  : "Proxima Nova", sans-serif !important;
  color        : #454545 !important;
  padding      : 12px 16px !important;
  font-size    : 16px !important;
  margin-bottom: 4.8rem;
}

.direct-order-title {
  font-family: 'Trade Gothic Condensed', 'Proxima Nova', sans-serif;
  font-weight: 700;
  text-align : center;
  font-size  : 3.6rem;
}

div.static-page-container h1.direct-order-title {
  margin-top: 4.8rem;
}

.direct-product {
  display              : grid;
  grid-template-columns: 75% auto;
}

.direct-product:first-child {
  border-top: 0.1rem solid #e8e8e8;
}

.direct-product-title-link {
  text-decoration: none !important;
}

.direct-product-title {
  font-family   : 'Proxima Nova', sans-serif;
  font-size     : 16px;
  text-transform: none;
  margin-top    : 0;
  margin-bottom : 1.2rem;
}

.direct-product-input-error-state {
  border-color: red !important;
}

.direct-product-error-message {
  margin: 1.2rem 0;
  color : red;
}

.direct-product-link {
  /* flex-basis   : 25%;
    display       : flex;
    width         : 100%;
    flex-direction: column;
    align-items   : center;
    margin-right  : 2.4rem; */
}

.direct-product-image-link {
  flex-basis: 25%;
}

.direct-product-heading {
  font-family   : 'Trade Gothic', 'Proxima Nova', sans-serif;
  font-size     : 12px;
  text-transform: none;
  margin        : 1rem 0;
}

.direct-product-main-content {
  flex-basis    : 50%;
  margin-right  : 2.4rem;
  padding-bottom: 1rem;
}

.direct-product-submit-content {
  flex-basis     : 25%;
  display        : flex;
  justify-content: flex-end;
  align-items    : flex-start;
  padding-bottom : 1rem;
}

.direct-product-button {
  margin-left: auto;
  padding    : 0.8rem 1.6rem;
}

.direct-product-image {
  max-height: 15rem;
}

.brand-container {
  width            : 100%;
  border-bottom    : solid 1px #e8e8e8;
  grid-column-start: 1;
}

.brand-container:nth-last-child(2) {
  border-bottom: 0;
}

form.direct-product input[type="number"] {
  height: 32px !important;
}

form.direct-product .rm-err {
  cursor     : pointer;
  font-weight: 700;
  color      : #2e2e2e;
}

form.direct-product button.submit-direct-order {
  grid-column-start: 2;
  grid-row-start   : 1;
  justify-self     : end;
  width            : 100%;
  max-width        : 200px;
  height           : fit-content;
  padding          : 2.4rem 2.4rem 1.8rem;
  font-family      : 'Trade Gothic Condensed', 'Proxima Nova', sans-serif;
  font-size        : 24px;
  font-weight      : 700;
  text-transform   : uppercase;
  background-color : #000000 !important;
  border           : 0 !important;
  position         : sticky;
  top              : calc(50px + 4.8rem);
  z-index          : 1;
  transition       : all ease-in-out .3s;
}

.direct-order button.add-to-cart-button.direct-product-button:hover,
.direct-product button.submit.submit-direct-order:hover {
  color  : #fff;
  opacity: .6;
}

.direct-order .res-box {
  color           : rgb(79, 79, 79);
  font-size       : 1.6rem;
  font-family     : 'Proxima Nova', sans-serif;
  background-color: #f1f1f1;
  padding         : 1.5rem;
  display         : block;
  width           : 100%;
  margin          : 1rem auto 3rem;
}

.direct-order .res-box p {
  padding-bottom: 0 !important;
  margin-bottom : 0 !important;
}

div.direct__order__wrapper {
  position        : relative;
  width           : 100%;
  background-color: #fff;
  max-height      : 0;
  overflow        : hidden;
  visibility      : hidden;
  transition      : all .3s ease-in-out;
}

div.direct__order__wrapper.open {
  max-height: 50000000px;
  visibility: visible;
}

table.direct__order th.brand {
  background: white;
}

table.direct__order tbody.wrap {
  position  : absolute;
  background: #606060;
  z-index   : 10;
  overflow  : scroll;
  max-height: 500px;
  width     : 100%;
}

table.direct__order .wrap .direct-product-title {
  color: #FFFFFF;
}

h2.brand-toggle,
.product-name.sub {
  font-family: 'Proxima Nova', sans-serif;
  margin     : 0;
  position   : relative;
  cursor     : pointer;
}

h2.brand-toggle {
  font-size: 2vw;
  font-size: clamp(1.5em, 2vw, 2em);
  padding  : 1.2rem 0;
}

h2.brand-toggle .fa,
.product-name.sub .fa {
  position  : absolute;
  top       : 50%;
  right     : 0;
  cursor    : pointer;
  transform : translateY(-50%);
  transition: all .3s ease-in-out;
}

h2.brand-toggle.open .fa,
.product-name.sub.open .fa {
  transform: translateY(-50%) rotate(-90deg);
}

h2.brand-toggle .fa {
  font-size: .5em;
}

.product-name.sub .fa {
  right: 1.2rem;
}


table.direct__order tr.legend .sub {
  background-color: #e8e8e8;
  color           : #2e2e2e;
  transition      : all .3s ease-in-out;
}

table.direct__order tr.legend .sub:hover,
table.direct__order tr.legend .sub.open {
  background-color: #2e2e2e;
  color           : #fff;
}

/*=======================
PAUL MITCHELL
=======================*/
table.direct__order tr.Blonde.legend .sub:hover,
table.direct__order tr.Blonde.legend .sub.open {
  background-color: #5b5498;
}

table.direct__order tr.Clarifying.legend .sub:hover,
table.direct__order tr.Clarifying.legend .sub.open {
  background-color: #00a1df;
}

table.direct__order tr.Clean.Beauty.legend .sub:hover,
table.direct__order tr.Clean.Beauty.legend .sub.open {
  background-color: #746762;
}

table.direct__order tr.Color.Protect.legend .sub:hover,
table.direct__order tr.Color.Protect.legend .sub.open {
  background-color: #ff5000;
}

table.direct__order tr.Curls.legend .sub:hover,
table.direct__order tr.Curls.legend .sub.open {
  background-color: #455cc7;
}

table.direct__order tr.Extra-Body.legend .sub:hover,
table.direct__order tr.Extra-Body.legend .sub.open {
  background-color: #752f8a;
}

table.direct__order tr.Firm.Style.legend .sub:hover,
table.direct__order tr.Firm.Style.legend .sub.open {
  background-color: #2e2a25;
}

table.direct__order tr.Flexible.Style.legend .sub:hover,
table.direct__order tr.Flexible.Style.legend .sub.open {
  background-color: #c41230;
}

table.direct__order tr.Kids.legend .sub:hover,
table.direct__order tr.Kids.legend .sub.open {
  background-color: #ffb819;
}

table.direct__order tr.Instant.Moisture.legend .sub:hover,
table.direct__order tr.Instant.Moisture.legend .sub.open {
  background-color: #00afaa;
}

table.direct__order tr.Invisiblewear.legend .sub:hover,
table.direct__order tr.Invisiblewear.legend .sub.open {
  background-color: #b2b3b5;
}

table.direct__order tr.Original.legend .sub:hover,
table.direct__order tr.Original.legend .sub.open {
  background-color: #50748a;
}

table.direct__order tr.Smoothing.legend .sub:hover,
table.direct__order tr.Smoothing.legend .sub.open {
  background-color: #95d600;
}

table.direct__order tr.Soft.Style.legend .sub:hover,
table.direct__order tr.Soft.Style.legend .sub.open {
  background-color: #717271;
}

table.direct__order tr.Super.Strong.legend .sub:hover,
table.direct__order tr.Super.Strong.legend .sub.open {
  background-color: #cb2b99;
}

table.direct__order tr.Ultimate.Color.Repair.legend .sub:hover,
table.direct__order tr.Ultimate.Color.Repair.legend .sub.open {
  background-color: #c9522a;
}

/*=======================
TEA TREE
=======================*/
table.direct__order tr.Lavender.Mint.legend .sub:hover,
table.direct__order tr.Lavender.Mint.legend .sub.open {
  background-color: #a6a6c6;
}

table.direct__order tr.Lemon.Sage.legend .sub:hover,
table.direct__order tr.Lemon.Sage.legend .sub.open {
  background-color: #cadd5b;
}

table.direct__order tr.Scalp.Care.legend .sub:hover,
table.direct__order tr.Scalp.Care.legend .sub.open {
  background-color: #99ab87;
}

table.direct__order tr.Special.legend .sub:hover,
table.direct__order tr.Special.legend .sub.open {
  background-color: #1d5632;
}

table.direct__order tr.Special.Color.legend .sub:hover,
table.direct__order tr.Special.Color.legend .sub.open {
  background-color: #e76626;
}

/*=======================
MARULAOIL
=======================*/
.MarulaOil table.direct__order tr.legend .sub:hover,
.MarulaOil table.direct__order tr.legend .sub.open {
  background: rgb(179, 139, 48);
  background: -moz-linear-gradient(90deg, rgba(179, 139, 48, 1) 0%, rgba(240, 214, 124, 1) 50%, rgba(159, 128, 62, 1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(179, 139, 48, 1) 0%, rgba(240, 214, 124, 1) 50%, rgba(159, 128, 62, 1) 100%);
  background: linear-gradient(90deg, rgba(179, 139, 48, 1) 0%, rgba(240, 214, 124, 1) 50%, rgba(159, 128, 62, 1) 100%);
  filter    : progid:DXImageTransform.Microsoft.gradient(startColorstr="#b38b30", endColorstr="#9f803e", GradientType=1);
}

/*=======================
NEURO
=======================*/
.Neuro table.direct__order tr.legend .sub:hover,
.Neuro table.direct__order tr.legend .sub.open {
  background-color: #00b3e3;
}

/*=======================
PRO TOOLS
=======================*/
table.direct__order tr.Curling.Irons.legend .sub:hover,
table.direct__order tr.Curling.Irons.legend .sub.open {
  background-color: #7861a9;
}

table.direct__order tr.Flat.Irons.legend .sub:hover,
table.direct__order tr.Flat.Irons.legend .sub.open {
  background-color: #70dc4a;
}

table.direct__order tr.Hair.Brushes.legend .sub:hover,
table.direct__order tr.Hair.Brushes.legend .sub.open {
  background-color: #de559d;
}

table.direct__order tr.Hair.Dryers.legend .sub:hover,
table.direct__order tr.Hair.Dryers.legend .sub.open {
  color           : #2e2e2e;
  background-color: #e7d601;
}

table.direct__order tr.Styling.Essentials.legend .sub:hover,
table.direct__order tr.Styling.Essentials.legend .sub.open {
  background-color: #62cefd;
}

/*=======================
AWG
=======================*/
.Awapuhi.Wild.Ginger table.direct__order tr.legend .sub:hover,
.Awapuhi.Wild.Ginger table.direct__order tr.legend .sub.open {
  background-color: #81ada8;
}

/*=======================
MITCH
=======================*/
.MITCH table.direct__order tr.legend .sub:hover,
.MITCH table.direct__order tr.legend .sub.open {
  background-color: #cf0a2c;
}


table.direct__order tr.single-product {
  border-bottom: 1px solid #e8e8e8;
}

table.direct__order td.product-name,
table.direct__order th.product-name {
  width: calc(67% - 144px);
}

table.direct__order td.product-qty,
table.direct__order th.product-qty {
  width: 144px;
}

table.direct__order td.product-qty {
  padding       : 0;
  text-align    : right;
  vertical-align: top;
}

table.direct__order td.product-ex,
table.direct__order th.product-ex {
  width: 11%;
}

table.direct__order button.direct-product-button {
  width       : 70px;
  height      : 55px;
  line-height : 100%;
  padding     : 0;
  position    : relative;
  display     : inline-block;
  border      : 0;
  border-right: solid 1px #e8e8e8;
  background  : transparent;
  color       : #2e2e2e;
}

table.direct__order button.direct-product-button:hover {
  border      : 0;
  border-right: solid 1px #e8e8e8;
}

table.direct__order button.direct-product-button:last-child,
table.direct__order button.direct-product-button:last-child:hover {
  border-right: 0;
}

.direct-order-title {
  font-family: 'Trade Gothic Condensed', 'Proxima Nova', sans-serif;
  font-weight: 700;
  text-align : center;
  font-size  : 3.6rem;
}

div.static-page-container h1.direct-order-title {
  margin-top: 4.8rem;
}

.direct-product-title-link {
  text-decoration: none !important;
}

.direct-product-title {
  font-family   : 'Proxima Nova', sans-serif;
  font-size     : 16px;
  text-transform: none;
  margin-top    : 0;
  margin-bottom : 1.2rem;
}

.direct-product-input-error-state {
  border-color: red !important;
}

.direct-product-error-message {
  color         : #c41230;
  line-height   : 1.25;
  margin        : 1.2rem 0 0;
  padding-bottom: 0 !important;
}

.direct-product-heading {
  font-family   : 'Trade Gothic', 'Proxima Nova', sans-serif;
  font-size     : 12px;
  text-transform: none;
  margin        : 1rem 0;
}

tr.single-product {
  display: none;
}

tr.single-product.open.match {
  display : table-row;
  /* color: #FFFFFF; */
}

.filter_box {
  background-color: #fff;
  padding         : 2.4rem 0;
  position        : sticky;
  top             : 0;
  z-index         : 5;
}

.filter_box label {
  font-family   : 'Trade Gothic Condensed', sans-serif;
  font-size     : 22px;
  text-transform: uppercase;
  font-weight   : 700;
}

.filter_box .field {
  display : block;
  position: relative;
}

.filter_box .field .control {
  display: inline-block;
  width  : 100%;
  height : 50px;
}

.filter_box button.clear,
.filter_box button.clear:hover,
.filter_box button.clear:focus {
  background-color: transparent !important;
  color           : #2e2e2e !important;
  border          : 0 !important;
}

.filter_box button.clear {
  height  : 100% !important;
  padding : 1.2rem !important;
  position: absolute;
  top     : 0;
  right   : 0;
}

.filter_box button.clear:hover,
.filter_box button.clear:focus {
  opacity: .6 !important;
}

.theme-pearl.store-view-default .filter_box .field button.clear .fa {
  color      : #2e2e2e;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 700 !important;
}

@media only screen and (max-width: 767px) {
  .direct-product {
    grid-template-columns: 100%;
  }

  .direct-product-image-link {
    flex-basis: 50%;
  }

  .direct-product-image-link img {
    display: block;
    margin : 0 auto;
  }

  .direct-product-main-content,
  .direct-product-submit-content {
    padding-bottom: 0;
  }

  .direct-product-main-content {
    flex-basis   : 50%;
    margin-right : 0;
    margin-bottom: 1.5rem;
  }

  .direct-product-submit-content {
    flex-basis: 100%;
  }

  .direct-product-button {
    flex-basis: 50% !important;
    padding   : 16px 26px !important;
  }

  .direct-product-title {
    font-size: 14px;
  }

  form.direct-product button.submit-direct-order {
    display  : none;
    max-width: none !important;
    position : fixed !important;
    top      : auto !important;
    bottom   : 0;
    left     : 0;
    z-index  : 10 !important;
  }

  .filter_box {
    padding: 1.2em 0;
  }

  table.direct__order td.product-ex {
    padding: 11px 0;
  }

  table.direct__order td.product-ex .item-quantity {
    text-align: center;
    padding   : 1.2rem .6rem;
  }
}

/*@media only screen and (max-width: 659px) {*/
/*  table.direct__order .direct-product {*/
/*    flex-wrap: wrap;*/
/*    border-right: 0;*/
/*    border-left: 0;*/
/*  }*/
/*}*/
@media only screen and (max-width: 425px) {

  table.direct__order .product-qty,
  table.direct__order .product-ex.price {
    display: none;
  }
}