/* This is Metcom's standard CSS for the Vox theme. */
  /* Update the brand-color to match your client's logo.  Update the brand-text-color to black if your brand-color is light.*/
  :root {
    --brand-color: #a3a7a6;
    --brand-text-color: white;
  }
  /* ============================== *
  * MAIN BACKGROUND and BODY TEXT
  * ============================== */
  body {
    color: #444;
  }
  main {
    background: #ffffff;
  }
  /* ============================== *
  * SITE HEADER
  * ============================== */
  .header--site {
    color: #555;
  }
  .header__info {
    color: #555;
  }
  .header__info .phone {
    background: var(--brand-color);
    color: var(--brand-text-color);
    font-weight: 900;
  }
  .user-nav .nav-list a {
    color: #555;
  }
  .user-nav .nav-list a:visited {
    color: #555;
  }
  .user-nav .nav-list a:hover {
    color: var(--brand-color);
  }
  .user-nav .nav-list a:active {
    color: var(--brand-color);
  }
  /* ============================== *
  * SITE FOOTER
  * ============================== */
  .footer--site {
    background: #ffffff;
    border-top: dotted;
    border-width: thin;|
  }
  .footer--site h3 {
    color: var(--brand-color);
  }
  .footer--site .nav-list li {
    background: #ffffff;
  }
  .footer--site .nav-list a {
    color: #555;
  }
  .footer--site .nav-list a:visited {
    color: #555;
  }
  .footer--site .nav-list a:hover {
    color: var(--brand-color);
  }
  .footer--site .nav-list a:active {
    color: #555;
  }
  .footer__info label {
    color: var(--brand-color);
  }
  .footer-fixer {
    background: #ffffff;
  }
  .copyright {
    color: #555;
    font-weight: 600;
  }
  /* ============================== *
* BUTTONS
* ============================== */
  .button--theme--primary {
    color: var(--brand-text-color);
    background: var(--brand-color);
    border-color: var(--brand-color);
  }
  .button--theme--primary:link {
    color: white;
  }
  .button--theme--primary:visited {
    color: white;
  }
  .button--theme--primary:hover {
    color: black;
    background: #fff;
  }
  .button--theme--primary:active {
    color: white;
    background: rgba(255, 255, 255, 0.8);
  }
  .button--theme--secondary {
    color: #555;
    background: white;
    border-color: #555;
  }
  .button--theme--secondary:link {
    color: #555;
  }
  .button--theme--secondary:visited {
    color: #555;
  }
  .button--theme--secondary:hover {
    color: #000;
    background: #aaa;
  }
  .button--theme--secondary:active {
    color: #000;
    background: #aaa;
  }
  /* ============================== *
* TABLES/PRICING GRID
* ============================== */
  .table--pricing {
    border: 1px solid var(--brand-color);
  }
  .table--pricing thead tr {
    background-color: var(--brand-color);
    color: var(--brand-text-color);
  }
  .table--pricing th::after {
    border-top-color: #555555;
  }
  .table--pricing tbody tr:nth-child(even) {
    background-color: #ddd;
  }
  /* ============================== *
* CART and CHECKOUT
* ============================== */
  .checkout .progress-bar li.complete {
    border-color: var(--brand-color);
  }
  .checkout .progress-bar li.complete::after {
    border-top-color: var(--brand-color);
  }
  .checkout .progress-bar li.active {
    border-color: var(--brand-color);
  }
  .checkout .progress-bar li.active::after {
    border-top-color: var(--brand-color);
  }
  .checkout .order-overview {
    background: #fff;
    border: 1px dashed #555;
    padding: .75em;
    border-radius: 3px;
  }
  .checkout .order-overview .button--theme--primary {
    background: var(--brand-color);
    border-color: var(--brand-color);
  }
  .checkout .order-overview .button--theme--primary:hover {
    background: var(--brand-color);
  }
  .cart dl dt {
    color: #555;
  }
  .cart__pricing {
    border-top: 2px dashed #555;
  }
  .cart .quantity select {
    border-color: #555;
  }
  /* ============================== *
* LOGIN BOX
* ============================== */
  .login__box .form-area {
    background-color: #eeeeee;
  }
  .login__box a {
    color: #555;
  }
  .login__box a:link {
    color: #555;
  }
  .login__box a:visited {
    color: #555;
  }
  .login__box a:hover {
    color: var(--brand-color);
  }
  .login__box a:active {
    color: var(--brand-color);
  }
  /* ============================== *
* ADDITIONAL CHANGES
* ============================== */
  .customer-reports .reports {
    border: 1px solid #555;
  }
  .customer-reports .report-header {
    background: #555;
  }
  .dropzone {
    border: 2px dashed #555;
  }
  .wrap--secondary {
    background: #555;
  }
  .wrap--background {
    background: #ffffff;
  }
  .content--main {
    border-top: 1px dotted #555;
  }
  .badge--primary {
    background: var(--brand-color);
    color: var(--brand-text-color);
  }
  .badge--secondary {
    background: var(--brand-color);
    color: var(--brand-text-color);
  }
  .flash--information {
    background-color: hsl(39deg 100% 80%);
    color: #555 !important;
    font-weight: 600;
  }
  .alert--info {
    background-color: hsl(39deg 100% 80%);
  }
  .product__title {
    min-height: 3em;
  }