/* User agent stylesheet reset */
/* Element resets
   ========================================================================== */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
}
ul,
ol {
  list-style: none;
}
img {
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  font-weight: normal;
  text-align: left;
}
th,
td {
  vertical-align: top;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
input,
select,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}
/* Firefox select boxes */
/* stylelint-disable declaration-no-important */
select:-moz-focusring,
select::-moz-focus-inner {
  color: transparent !important;
  text-shadow: 0 0 0 #000000 !important;
  background-image: none !important;
  border: 0;
}
/* stylelint-enable */
fieldset,
legend {
  border: 0;
}
address {
  font-style: normal;
}
/* Variables */
/*
Documentation:
https://myhelix.atlassian.net/wiki/display/ENG/Responsive+breakpoints
*/
/* Responsive utilities breakpoints
   - these are used by the hidden-*-down classes in the grid framework and
     should never be used directly in feature code
   ========================================================================== */
/* stylelint-disable declaration-colon-space-after */
:root {

  /* Generic multi-use */
  --colorWhite:                        rgb(255, 255, 255);
  --colorBlue:                         rgb(50, 154, 243);
  --colorBlueActive:                   rgb(39, 122, 192);
  --colorRed:                          rgb(240, 89, 67);
  --colorRedActive:                    rgb(208, 2, 27);
  --colorGreen:                        rgb(246, 252, 240);

  /* Helix Brand Colors */
  --colorHelixPink:                    rgb(244, 91, 131);
  --colorHelixYellow:                  rgb(248, 190, 8);
  --colorHelixBlue:                    rgb(63, 76, 119);
  --colorHelixGreen:                   rgb(122, 203, 113);

  /* Typography - all around most common text colors */
  --colorBasicText:                    rgb(56, 56, 56);
  --colorBasicTextLight:               rgba(56, 56, 56, 0.5);
  --colorGreyTextOnWhiteBackground:    rgba(56, 56, 56, 0.5);

  /* Grey on Grey (general borders/backgrounds) */
  --colorTouchOfGrey:                  rgb(250, 250, 250);
  --colorVeryLightGrey:                rgb(235, 235, 235);
  --colorLightGrey:                    rgb(215, 215, 215);
  --colorMediumGrey:                   rgb(175, 175, 175);
  --colorDarkGrey:                     rgb(135, 135, 135);

  /* "Fill layout" background */
  --colorFillLayoutGreyBackground:     var(--colorTouchOfGrey);

  /* Modal overlay */
  --colorOverlayScrim:                 rgba(235, 236, 236, 0.8);

  /* Forms */
  --colorTapHighlight:                 rgba(50, 154, 242, 0.1);
  --colorFocusRing:                    var(--colorBlue);
  --colorPlaceholder:                  var(--colorDarkGrey);
  --colorFocusedInputBackground:       var(--colorTouchOfGrey);
  --colorFormError:                    var(--colorRed);
  --colorFormSuccess:                  #7ACB71;
  --colorRadioBlockSelected:           var(--colorBlueActive);
  --colorDropDownFocusColor:           var(--colorTouchOfGrey);

  /* Links - text */
  --colorLinkText:                     var(--colorBlue);
  --colorLinkHover:                    var(--colorBlueActive);

  /* Buttons - background & border */
  --colorButtonBlue:                   var(--colorBlue);
  --colorButtonBlueActive:             var(--colorBlueActive);
  --colorButtonDanger:                 var(--colorRed);
  --colorButtonDangerActive:           var(--colorRedActive);

  /* Footer - background & text */
  --colorFooterDarkGreyText:           #707170;
  --colorFooterDarkGreyBackground:     #F5F5F5;

  /* Sign in tabs */
  --colorSignInTabsBackground:         var(--colorTouchOfGrey);

  /* Order navigation */
  --colorOrderNavigationGreyText:      rgba(56, 56, 56, 0.4);

  /* OrderSummary */
  --colorOrderSummaryShadow:           rgba(56, 56, 56, 0.2);
  --colorGreyBorderOnWhiteBackground:  rgb(229, 229, 229);
  --colorQuantityControlGreyBackground:  rgba(216, 225, 229, 0.5);

  /* KitDecisionModal */
  --colorKitDecisionOrder:             var(--colorTouchOfGrey);

  /* HealthHistory */
  --colorQuestionSubText:              #717171;

  /* Breadcrumbs */
  --colorBreadcrumbsText:              rgba(56, 56, 56, 0.2);
  --colorBreadcrumbsActiveText:        rgb(56, 56, 56);
  --colorBreadcrumbsBackground:        rgba(22, 80, 130, 0.2);
  --colorBreadcrumbsActiveBackground:  rgb(22, 80, 130);

  /* Copied over from V1 for Settings pages */
  /*  - should be reviewed to see if possible to cleanup */
  --colorV1HelixBackground:            #DFE5E5;
  --colorBorderOnGray:                 rgb(227, 227, 227); /* can't have alpha channel - used for collapsed table borders */
}
/* stylelint-enable */
/* Grid System */
/* Gutter calculations
   ========================================================================== */
:root {
  --mobile-gutter-width: 16px;
  --mobile-gutter-compensation: calc((var(--mobile-gutter-width) * 0.5) * -1);
  --mobile-half-gutter-width: calc((var(--mobile-gutter-width) * 0.5));
  --gutter-width: 28px;
  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
  --half-gutter-width: calc((var(--gutter-width) * 0.5));
}
/* Mobile container: Special use for padding only on mobile
   ========================================================================== */
/* this is debatable whether this is the correct way to do this. but
until there are more use cases beyond the order flow, this'll work */
@media (max-width: 735px) {
  .mobile-container {
    max-width: calc(335px + (2 * 16px));
    max-width: calc(335px + (2 * 16px));
    max-width: calc(335px + (2 * var(--mobile-gutter-width)));
    padding-left: 16px;
    padding-left: 16px;
    padding-left: var(--mobile-gutter-width);
    padding-right: 16px;
    padding-right: 16px;
    padding-right: var(--mobile-gutter-width);
    margin-left: auto;
    margin-right: auto;
  }
}
/* Tablet container: Limit the width on tablet, makes it a bit more mobile
   ========================================================================== */
/* Tablet container idea does two things:
   1. Limiting the width of the content to 8 columns—which is 452px
   2. Primary buttons go full-width and have the larger, mobile, font size
  */
@media (max-width: 735px) {
.tablet-container {
    max-width: 508px;
    padding-left: 28px;
    padding-left: 28px;
    padding-left: var(--gutter-width);
    padding-right: 28px;
    padding-right: 28px;
    padding-right: var(--gutter-width)
}
  }
@media (min-width: 736px) {
.tablet-container {
    max-width: 452px
}
  }
@media (min-width: 1024px) {
.tablet-container {
    max-width: none
}
  }
.tablet-container {

  /* button styles in a tablet container
  - buttons are full width, (same as mobile)
  - buttons are 20px font size instead of 16px, (same as mobile)
  - only primary buttons get font size change, not secondary
  */
}
.tablet-container .button {
    width: 100%;
  }
@media (min-width: 736px) {
.tablet-container .button:not(.button-secondary) {
      font-size: 20px
  }
    }
@media (min-width: 1024px) {
.tablet-container .button:not(.button-secondary) {
      font-size: 16px
  }
    }
/* Grid Containers
   ========================================================================== */
.container {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 736px) {
  .container {
    width: 692px;
  }
}
@media (min-width: 1024px) {
  .container {
    width: 932px;
  }
}
/* Grid rows
   ========================================================================== */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: calc((16px * 0.5) * -1);
  margin-left: calc((16px * 0.5) * -1);
  margin-left: var(--mobile-gutter-compensation);
  margin-right: calc((16px * 0.5) * -1);
  margin-right: calc((16px * 0.5) * -1);
  margin-right: var(--mobile-gutter-compensation);
}
@media (min-width: 736px) {
  .row {
    margin-left: calc((28px * 0.5) * -1);
    margin-left: calc((28px * 0.5) * -1);
    margin-left: var(--gutter-compensation);
    margin-right: calc((28px * 0.5) * -1);
    margin-right: calc((28px * 0.5) * -1);
    margin-right: var(--gutter-compensation);
  }
}
.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
/* Row direction gutters
   ========================================================================== */
@media (max-width: 735px) {
  .row.direction-column-sm {
    flex-direction: column;
  }
}
@media (min-width: 736px) {
  .row.direction-column-md {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  .row.direction-column-lg {
    flex-direction: column;
  }
}
/* Column gutters
   ========================================================================== */
@media (max-width: 735px) {
  .row > [class^=col-] {
    flex-grow: 1;
    flex-shrink: 0;
    padding-right: calc((16px * 0.5));
    padding-right: calc((16px * 0.5));
    padding-right: var(--mobile-half-gutter-width);
    padding-left: calc((16px * 0.5));
    padding-left: calc((16px * 0.5));
    padding-left: var(--mobile-half-gutter-width);
  }
}
@media (min-width: 736px) {
  .row > [class^=col-] {
    flex-grow: 1;
    flex-shrink: 0;
    padding-right: calc((28px * 0.5));
    padding-right: calc((28px * 0.5));
    padding-right: var(--half-gutter-width);
    padding-left: calc((28px * 0.5));
    padding-left: calc((28px * 0.5));
    padding-left: var(--half-gutter-width);
  }
}
/* Small: 0 - 735px (the default)
   ========================================================================== */
.col-sm {
  flex-basis: 0;
  max-width: 100%;
}
.col-sm-1 {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}
.col-sm-2 {
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}
.col-sm-3 {
  flex-basis: 25%;
  max-width: 25%;
}
.col-sm-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}
.col-sm-5 {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}
.col-sm-6 {
  flex-basis: 50%;
  max-width: 50%;
}
.col-sm-7 {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}
.col-sm-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}
.col-sm-9 {
  flex-basis: 75%;
  max-width: 75%;
}
.col-sm-10 {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}
.col-sm-11 {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}
.col-sm-12 {
  flex-basis: 100%;
  max-width: 100%;
}
.col-sm-offset-0 {
  margin-left: 0;
}
.col-sm-offset-1 {
  margin-left: 8.33333333%;
}
.col-sm-offset-2 {
  margin-left: 16.66666667%;
}
.col-sm-offset-3 {
  margin-left: 25%;
}
.col-sm-offset-4 {
  margin-left: 33.33333333%;
}
.col-sm-offset-5 {
  margin-left: 41.66666667%;
}
.col-sm-offset-6 {
  margin-left: 50%;
}
.col-sm-offset-7 {
  margin-left: 58.33333333%;
}
.col-sm-offset-8 {
  margin-left: 66.66666667%;
}
.col-sm-offset-9 {
  margin-left: 75%;
}
.col-sm-offset-10 {
  margin-left: 83.33333333%;
}
.col-sm-offset-11 {
  margin-left: 91.66666667%;
}
.start-sm {
  justify-content: flex-start;
}
.center-sm {
  justify-content: center;
}
.end-sm {
  justify-content: flex-end;
}
.top-sm {
  align-items: flex-start;
}
.middle-sm {
  align-items: center;
}
.bottom-sm {
  align-items: flex-end;
}
.around-sm {
  justify-content: space-around;
}
.between-sm {
  justify-content: space-between;
}
.first-sm {
  order: -1;
}
.last-sm {
  order: 1;
}
/* Medium: 736px - 1023px
   ========================================================================== */
@media (min-width: 736px) {
  .col-md {
    flex-basis: 0;
    max-width: 100%;
  }

  .col-md-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-md-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-md-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-md-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-md-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-md-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-md-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-md-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-md-offset-0 {
    margin-left: 0;
  }

  .col-md-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-md-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-md-offset-3 {
    margin-left: 25%;
  }

  .col-md-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-md-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-md-offset-6 {
    margin-left: 50%;
  }

  .col-md-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-md-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-md-offset-9 {
    margin-left: 75%;
  }

  .col-md-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-md-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-md {
    justify-content: flex-start;
  }

  .center-md {
    justify-content: center;
  }

  .end-md {
    justify-content: flex-end;
  }

  .top-md {
    align-items: flex-start;
  }

  .middle-md {
    align-items: center;
  }

  .bottom-md {
    align-items: flex-end;
  }

  .around-md {
    justify-content: space-around;
  }

  .between-md {
    justify-content: space-between;
  }

  .first-md {
    order: -1;
  }

  .last-md {
    order: 1;
  }
}
/* Large: 1024px - 1239px
   ========================================================================== */
@media (min-width: 1024px) {
  .col-lg {
    flex-basis: 0;
    max-width: 100%;
  }

  .col-lg-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-lg-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-lg-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-lg-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-lg-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-lg-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-lg-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-lg-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-lg-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-offset-0 {
    margin-left: 0;
  }

  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-lg {
    justify-content: flex-start;
  }

  .center-lg {
    justify-content: center;
  }

  .end-lg {
    justify-content: flex-end;
  }

  .top-lg {
    align-items: flex-start;
  }

  .middle-lg {
    align-items: center;
  }

  .bottom-lg {
    align-items: flex-end;
  }

  .around-lg {
    justify-content: space-around;
  }

  .between-lg {
    justify-content: space-between;
  }

  .first-lg {
    order: -1;
  }

  .last-lg {
    order: 1;
  }
}
/* Responsive utilities
   - Related Bootstrap v4 docs:
     https://v4-alpha.getbootstrap.com/layout/responsive-utilities
   ========================================================================== */
/* stylelint-disable declaration-no-important */
.hidden-sm-up {
  display: none !important;
}
@media (max-width: 735px) {
  .hidden-sm-down {
    display: none !important;
  }
}
@media (min-width: 736px) {
  .hidden-md-up {
    display: none !important;
  }
}
@media (max-width: 1023px) {
  .hidden-md-down {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .hidden-lg-up {
    display: none !important;
  }
}
@media (max-width: 1239px) {
  .hidden-lg-down {
    display: none !important;
  }
}
/* stylelint-enable */
/* New CSS Grid System */
/* ---------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
hlx-grid is a new grid system based off CSS Grid instead of Flexbox
This system is composed of the following:
- hlx-container, hlx-mobile-container: left/right/center spacing around content at the section level
- hlx-grid: the parent class or "grid container"
- hlx-col-sm-*, hlx-col-md-*, hlx-col-lg-*: the child classes or "grid items"
------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------- */
/* Page Containers
   ========================================================================== */
.hlx-container {
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 736px) {
  .hlx-container {
    width: 692px;
  }
}
@media (min-width: 1024px) {
  .hlx-container {
    width: 932px;
  }
}
/* Mobile container: Special use for padding only on small screens
   ========================================================================== */
@media (max-width: 735px) {
  .hlx-mobile-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* Grid Containers
   ========================================================================== */
.hlx-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 12px
}
@media (min-width: 736px) {
.hlx-grid {
    grid-template-columns: repeat(12, 32px);
    grid-column-gap: 28px
}
  }
@media (min-width: 1024px) {
.hlx-grid {
    grid-template-columns: repeat(12, 52px)
}
  }
/* Grid Items | Small screen (0 - 735px)
   ========================================================================== */
.hlx-col-sm-1 {
  grid-column: span 1;
}
.hlx-col-sm-2 {
  grid-column: span 2;
}
.hlx-col-sm-3 {
  grid-column: span 3;
}
.hlx-col-sm-4 {
  grid-column: span 4;
}
.hlx-col-sm-5 {
  grid-column: span 5;
}
.hlx-col-sm-6 {
  grid-column: span 6;
}
.hlx-col-sm-7 {
  grid-column: span 7;
}
.hlx-col-sm-8 {
  grid-column: span 8;
}
.hlx-col-sm-9 {
  grid-column: span 9;
}
.hlx-col-sm-10 {
  grid-column: span 10;
}
.hlx-col-sm-11 {
  grid-column: span 11;
}
.hlx-col-sm-12 {
  grid-column: span 12;
}
/* Grid column ordering */
.hlx-grid-first-sm {
  order: -1;
}
.hlx-grid-last-sm {
  order: 1;
}
/* Grid Items | Medium screens (736px - 1023px)
   ========================================================================== */
@media (min-width: 736px) {
  .hlx-col-md-1 {
    grid-column: span 1;
  }

  .hlx-col-md-2 {
    grid-column: span 2;
  }

  .hlx-col-md-3 {
    grid-column: span 3;
  }

  .hlx-col-md-4 {
    grid-column: span 4;
  }

  .hlx-col-md-5 {
    grid-column: span 5;
  }

  .hlx-col-md-6 {
    grid-column: span 6;
  }

  .hlx-col-md-7 {
    grid-column: span 7;
  }

  .hlx-col-md-8 {
    grid-column: span 8;
  }

  .hlx-col-md-9 {
    grid-column: span 9;
  }

  .hlx-col-md-10 {
    grid-column: span 10;
  }

  .hlx-col-md-11 {
    grid-column: span 11;
  }

  .hlx-col-md-12 {
    grid-column: span 12;
  }

  /* Grid column ordering */
  .hlx-grid-first-md {
    order: -1;
  }

  .hlx-grid-last-md {
    order: 1;
  }
}
/* Grid Items | Large screens (1024px - ∞)
   ========================================================================== */
@media (min-width: 1024px) {
  .hlx-col-lg-1 {
    grid-column: span 1;
  }

  .hlx-col-lg-2 {
    grid-column: span 2;
  }

  .hlx-col-lg-3 {
    grid-column: span 3;
  }

  .hlx-col-lg-4 {
    grid-column: span 4;
  }

  .hlx-col-lg-5 {
    grid-column: span 5;
  }

  .hlx-col-lg-6 {
    grid-column: span 6;
  }

  .hlx-col-lg-7 {
    grid-column: span 7;
  }

  .hlx-col-lg-8 {
    grid-column: span 8;
  }

  .hlx-col-lg-9 {
    grid-column: span 9;
  }

  .hlx-col-lg-10 {
    grid-column: span 10;
  }

  .hlx-col-lg-11 {
    grid-column: span 11;
  }

  .hlx-col-lg-12 {
    grid-column: span 12;
  }

  /* Grid column ordering */
  .hlx-grid-first-lg {
    order: -1;
  }

  .hlx-grid-last-lg {
    order: 1;
  }
}
/* Grid options: a dense packed grid
   ========================================================================== */
.hlx-grid-dense {
  grid-auto-flow: dense;
  justify-content: space-around;
}
/* Header / footer */
/* Helix Header
   ========================================================================== */
.helix-header {
  position: relative;
  border-bottom: 1px solid rgb(215, 215, 215);
  border-bottom: 1px solid rgb(215, 215, 215);
  border-bottom: 1px solid var(--colorLightGrey);
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: var(--colorWhite);
}
.helix-header--header-inner-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.helix-header--logo {
  order: 2;
  background: url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDI0MiIgaGVpZ2h0PSIyNDIiIHZpZXdCb3g9IjAgMCAxMDAwIDI0MiIgd2lkdGg9IjEwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNTcuNyIgY3k9IjU3LjkiIGZpbGw9IiNmNDViODMiIHI9IjUzLjciLz48cGF0aCBkPSJtMjI4LjkgMjEwLjgtNTAgMjguOS01MC0yOC45di01Ny43bDUwLTI4LjkgNTAgMjguOXoiIGZpbGw9IiM3YWNiNzEiLz48cGF0aCBkPSJtMTc4LjkgNy45IDI4LjkgNTAgMjguOCA1MGgtNTcuNy01Ny43bDI4LjktNTB6IiBmaWxsPSIjZjhiZTA4Ii8+PHBhdGggZD0ibTE2LjkgMTQxLjJoODEuNnY4MS42aC04MS42eiIgZmlsbD0iIzNmNGM3NyIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNzEgLjcwNzEgLS43MDcxIC43MDcxIDE0NS41NzQgMTIuNDgzMSkiLz48ZyBmaWxsPSIjNzc3Ij48cGF0aCBkPSJtNDUzLjkgMjQwLjd2LTEwNC4xaC0xMzV2MTA0LjFoLTI3di0yMzYuNmgyN3YxMDYuOGgxMzV2LTEwNi44aDI3djIzNi42eiIvPjxwYXRoIGQ9Im03MTEuNSAyNDAuN3YtMjM2LjZoMjZ2MjM2LjZ6Ii8+PHBhdGggZD0ibTgxNC43IDE4LjZjMCAxMC41LTcuNCAxOC4yLTE3LjIgMTguMnMtMTcuMi03LjgtMTcuMi0xOC4yYzAtMTAuNSA3LjQtMTguMyAxNy4yLTE4LjNzMTcuMiA3LjggMTcuMiAxOC4zeiIvPjxwYXRoIGQ9Im03ODQuNSA2Mi42aDI2djE3OC4xaC0yNnoiLz48cGF0aCBkPSJtOTY2LjUgNjIuNmgyOS4xbC01OS41IDg2LjUgNjMuOSA5MS42aC0zMC44bC01MC42LTcyLjctNTIuNCA3Mi43aC0yOS43bDY0LjktOTEuNi02MC41LTg2LjVoMzAuNGw0Ny4zIDY3LjZ6Ii8+PHBhdGggZD0ibTUzOS44IDE2MmMuOSA5LjEgMy4xIDE3LjIgNi43IDI0LjNzOC4xIDEzLjEgMTMuNyAxOCAxMi4yIDguNiAxOSAxMS4yYzYuOSAyLjYgMTQuNSAzLjggMjIgMy44IDEyIDAgMjMtMi4yIDMxLjYtNi43IDguNi00LjQgMTYuNC0xMC4zIDIzLjUtMTcuN2wxNiAxNC4zYy04LjcgOS44LTE4LjYgMTcuNi0yOS43IDIzLjVzLTI1LjYgOC44LTQyLjEgOC44Yy0xMS44IDAtMjMuMy0yLjItMzMuNy02LjVzLTE5LjktMTAuNC0yNy43LTE4LjMtMTMuOS0xNy40LTE4LjUtMjguNS02LjgtMjMuMy02LjgtMzYuN2MwLTEyLjQgMi4xLTI0LjIgNi4yLTM1LjJzOS44LTIwLjYgMTcuMi0yOC43YzcuMy04LjEgMTYuNC0xNC41IDI2LjUtMTkuMnMyMS41LTcgMzMuNS03YzEyLjcgMCAyNC40IDIuNCAzNC40IDcuMnMxOC44IDExLjMgMjUuNyAxOS41IDEyLjEgMTcuOSAxNS43IDI5IDUuMyAyMyA1LjMgMzUuN3YzLjhjMCAxLjQtLjEgMy4yLS4zIDUuMmgtMTM4LjJ6bTExMi42LTIxYy0uNy03LjctMi4zLTE1LjEtNS0yMi0yLjctNy02LjMtMTMuMS0xMC44LTE4LjQtNC42LTUuMy0xMC41LTkuNS0xNy0xMi42LTYuNi0zLjEtMTQuNC00LjYtMjIuOS00LjYtNy4zIDAtMTQuNiAxLjQtMjEgNC4zcy0xMi41IDYuOS0xNy40IDEyLjEtOC45IDExLjMtMTIuMiAxOC40Yy0zLjIgNy4xLTUuMyAxNC43LTYuMiAyMi45aDExMi41eiIvPjwvZz48L3N2Zz4=) no-repeat 0 0;
  background-size: 84px 20px;
  width: 84px;
  height: 20px
}
@media (min-width: 736px) {
.helix-header--logo {
    order: 1
}
  }
.helix-header--menu-wrapper {
  order: 1;
  width: 20px;
  height: 20px
}
@media (min-width: 736px) {
.helix-header--menu-wrapper {
    order: 2;
    flex: 1;
    width: unset;
    height: unset
}
  }
/* Shopping cart
  ========================================================================== */
.helix-header--cart {
  order: 3;
  display: flex
}
@media (min-width: 736px) {
.helix-header--cart {
    margin-left: 32px
}
  }
.helix-header--cart .cart-icon {
    margin-top: 1px;
    background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMjYgMTkiIHdpZHRoPSIyNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxwYXRoIGQ9Im01LjU5MjI5NjMgMi4wOTI4NzY4Yy0uMjM2NTYzMjQtMS4yMjc5NzMzMi0xLjI1MzM0NDM5LTIuMTA1MzIxNzQtMi40MjI5MzY1Ny0yLjA5Mjc0MzI3aC0yLjg5MzEyNDM5Yy0uMTUyODExMDQgMC0uMjc2MjM1MzQuMTMyMDczOTYtLjI3NjIzNTM0LjI5NDAyMTc4IDAgLjE2MzUyMDE0LjEyMzQyNDMuMjk1NTk0MDkuMjc2MjM1MzQuMjk1NTk0MDloMi44OTMxMjQzOWMuOTAwNzAzNTMuMDA0NzE2OTMgMS42Nzk0NTIwOS42NzkyMzc0OSAxLjg3MTkzNTIzIDEuNjIxMDUwNTdsMS43MDg4Mzg4MyA4LjI1MzA0OTgzYy4yOTgyNzUzOSAxLjQ4NTgzMiAxLjUyODExMDM5IDIuNTQwODUxNCAyLjk0NzQ4OTg1IDIuNTM2MTM0NGg5LjgzNDI3MTk2YzEuNDQyODg4OS4wMDE1NzI0IDIuNjg1OTQ3OS0xLjA4MTc0ODUgMi45NzU0MDczLTIuNTk0MzA5OGwxLjQ4Njk2ODktOC4zMTI3OTc2Yy4wMzA4NTYxLS4xNjAzNzU1Mi0uMDY2MTIwMS0uMzE0NDYxOC0uMjE0NTIzMi0uMzQ5MDUyNi0uMDEzNzEzOC0uMDAzMTQ0NjItNC40NjkyMzMxLS4wMDUyNDEwMy0xMy4zNjY1NTc5LS4wMDYyODkyNC0uMTUxMzQxNyAwLS4yNzQ3NjYuMTMyMDczOTYtLjI3NDc2Ni4yOTU1OTQwOSAwIC4xNjE5NDc4My4xMjM0MjQzLjI5NDAyMTc4LjI3NDc2Ni4yOTQwMjE3OGgxMy4wMDM2MzE3bC0xLjQzNDA3MjggNy45NjA2MDAzN2MtLjIyMzMzOTIgMS4yNDUyNjg4LTEuMjM3MTgxNyAyLjE0NjIwMTgtMi40MjI5MzY2IDIuMTUyNDkxaC05LjgzNDI3MTk2Yy0xLjE3MTA2MTUyLjAxMTAwNjItMi4xODc4NDI2Ni0uODY2MzQyMi0yLjQyNDQwNTkxLTIuMDk0MzE1NXoiIGZpbGw9IiMwMDAiIHN0cm9rZT0iIzM3MzgzNyIgc3Ryb2tlLXdpZHRoPSIuMjUiLz48ZyBmaWxsPSIjMzczODM3Ij48cGF0aCBkPSJtOC41IDE4Yy0uODI5MDg0NTkgMC0xLjUtLjY2OTU2NTItMS41LTEuNDk5MTMwNCAwLS44Mjk1NjUzLjY3MDkxNTQxLTEuNTAwODY5NiAxLjUtMS41MDA4Njk2LjgyNzM0NjQ3IDAgMS41LjY3MTMwNDMgMS41IDEuNTAwODY5NiAwIC44Mjk1NjUyLS42NzI2NTM1MyAxLjQ5OTEzMDQtMS41IDEuNDk5MTMwNHoiLz48cGF0aCBkPSJtMjIgMTYuNTAwODY5NmMwIC44Mjk1NjUyLS42NzIyNjQgMS40OTkxMzA0LTEuNDk5MTMxNCAxLjQ5OTEzMDQtLjgyODYwNDYgMC0xLjUwMDg2ODYtLjY2OTU2NTItMS41MDA4Njg2LTEuNDk5MTMwNCAwLS44Mjk1NjUzLjY3MjI2NC0xLjUwMDg2OTYgMS41MDA4Njg2LTEuNTAwODY5Ni44MjY4Njc0IDAgMS40OTkxMzE0LjY3MTMwNDMgMS40OTkxMzE0IDEuNTAwODY5NiIvPjwvZz48L2c+PC9zdmc+) no-repeat 0 0;
    background-size: 26px 19px;
    width: 26px;
    height: 19px;
  }
.helix-header--cart .cart-count {
    min-width: 12px;
    height: 12px;
    margin: 3px 0 0 3px;
    padding: 0 2px;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
    border-radius: 2px;
    color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    color: var(--colorWhite);
    background-color: rgb(50, 154, 243);
    background-color: rgb(50, 154, 243);
    background-color: var(--colorBlue);
  }
.helix-header--cart {

  /* hide the cart notification indicator if there is no number in the element */
}
.helix-header--cart .cart-count:empty {
    display: none;
  }
:root {

  /* Core Variables */
  --layerBehind: -9999;
  --layerBase: 0;
  --layerSmall: 10;
  --layerMedium: 20;
  --layerLarge: 30;
  --layerPriority: 100;

  /* Modal Overlay */
  --layerModal: var(--layerPriority);
  --layerModalClose: calc(var(--layerPriority) + 1);
}
:root {

  /* Transition durations */
  --timeEntering: 220ms;
  --timeLeaving: 190ms;
}
/* Menu toggle button */
.helix-header--menu-toggle {
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out
}
@media (min-width: 736px) {
.helix-header--menu-toggle {
    display: none
}
  }
.helix-header--menu-toggle::before,
.helix-header--menu-toggle::after {
  content: '';
}
.helix-header--menu-toggle::before,
.helix-header--menu-toggle::after,
.helix-header--menu-toggle > span {
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  opacity: 1;
  background-color: rgb(56, 56, 56);
  background-color: rgb(56, 56, 56);
  background-color: var(--colorBasicText);
  transform: rotate(0deg);
  transform-origin: left center;
  transition: 0.5s ease-in-out;
  outline: 1px solid transparent;
}
.helix-header--menu-toggle::before {
  top: 3px;
}
.helix-header--menu-toggle > span {
  top: 10px;
}
.helix-header--menu-toggle::after {
  top: 17px;
}
.helix-header--menu {
  /* Header menu - small devices */
}
@media (max-width: 735px) {
.helix-header--menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 1px;
    padding: 0 24px;
    background: rgb(255, 255, 255);
    background: rgb(255, 255, 255);
    background: var(--colorWhite);
    visibility: hidden;
    opacity: 0;
    transition: opacity 500ms ease-in-out;
    z-index: 100;
    z-index: 100;
    z-index: var(--layerModal)
}

    .helix-header--menu > li {
      opacity: 0;
      border-bottom: 1px solid rgb(235, 235, 235);
      border-bottom: 1px solid rgb(235, 235, 235);
      border-bottom: 1px solid var(--colorVeryLightGrey);
      transition: opacity 0.35s cubic-bezier(0.49, 0.06, 0.13, 0.95) 0.7s;
      transition-delay: 0ms;
    }

    .helix-header--menu > li:last-child {
      border-bottom-color: rgb(56, 56, 56);
      border-bottom-color: rgb(56, 56, 56);
      border-bottom-color: var(--colorBasicText);
    }
  }
.helix-header--menu {

  /* Header menu - medium and up */
}
@media (min-width: 736px) {
.helix-header--menu {
    display: flex;
    justify-content: flex-end
}

    .helix-header--menu > li {
      position: relative;
    }

    .helix-header--menu > li:not(:first-child) {
      margin-left: 32px;
    }
  }
/* The white dropshadow under the menu when it’s open */
@media (max-width: 735px) {
.helix-header--menu::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 320px;
    background-image: linear-gradient(rgba(255, 255, 255, 0.98) 25%, rgba(255, 255, 255, 0) 100%)
}
  }
/* Header menu links
    ========================================================================== */
.helix-header--menu-link,
.helix-header--menu-link:visited {
  color: inherit;
  text-decoration: inherit;
}
.helix-header--menu-link:hover,
.helix-header--menu-link:active {
  color: rgb(39, 122, 192);
  color: rgb(39, 122, 192);
  color: var(--colorLinkHover);
}
.helix-header--menu-link {
  display: block
}
@media (max-width: 735px) {
.helix-header--menu-link {
    line-height: 52px
}
  }
@media (min-width: 736px) {
.helix-header--menu-link {
    line-height: 60px;
    font-size: 14px
}
  }
/* Current state */
.helix-header--current-link {
  font-weight: 700;
}
.helix-header--current-link:hover,
.helix-header--current-link:active {
  color: inherit;
}
/* Open state - Header menu
  ========================================================================== */
.helix-header--menu-open .helix-header--menu {
  visibility: visible;
  opacity: 1
}
.helix-header--menu-open .helix-header--menu li {
    opacity: 1;
    transition-duration: 190ms;
    transition-duration: 190ms;
    transition-duration: var(--timeLeaving);
  }
.helix-header--menu-open .helix-header--menu li:nth-child(1) {
    transition-delay: 60ms;
  }
.helix-header--menu-open .helix-header--menu li:nth-child(2) {
    transition-delay: 120ms;
  }
.helix-header--menu-open .helix-header--menu li:nth-child(3) {
    transition-delay: 180ms;
  }
.helix-header--menu-open .helix-header--menu li:nth-child(4) {
    transition-delay: 240ms;
  }
.helix-header--menu-open .helix-header--menu li:nth-child(5) {
    transition-delay: 300ms;
  }
.helix-header--menu-open .helix-header--menu li:nth-child(6) {
    transition-delay: 360ms;
  }
.helix-header--menu-open .helix-header--menu-toggle::before {
    transform: rotate(45deg);
    top: 3px;
    left: 3px;
  }
.helix-header--menu-open .helix-header--menu-toggle > span {
    opacity: 0;
  }
.helix-header--menu-open .helix-header--menu-toggle::after {
    transform: rotate(-45deg);
    top: 17px;
    left: 3px;
  }
/* Header sub-menu
    ========================================================================== */
.helix-header--menu-item:hover .helix-header--submenu-overlay {
    display: block;
  }
@media (max-width: 735px) {
.helix-header--submenu-overlay {
    display: block;
    position: unset;
    margin: 0;
    box-shadow: none;
    padding: 0 20px 16px
}
  }
@media (min-width: 736px) {
.helix-header--submenu-overlay {
    display: none;
    position: absolute;
    top: 61px;
    left: -24px;
    width: 198px;
    padding: 8px 24px 16px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
    background-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    background-color: var(--colorWhite);
    z-index: 10;
    z-index: 10;
    z-index: var(--layerSmall)
}
  }
.helix-header--submenu-link,
.helix-header--submenu-link:visited {
  display: block;
  font-size: 14px;
  line-height: 40px;
  color: inherit;
  text-decoration: inherit
}
@media (min-width: 736px) {
.helix-header--submenu-link,
.helix-header--submenu-link:visited {
    line-height: 36px
}
  }
/* For the signout button */
button.helix-header--submenu-link {
  cursor: pointer;
}
/* The beak that sticks out from the overlay element */
.helix-header--overlay-beak {
  position: relative;
  top: -16px;
  display: block;
  width: 30px;
  height: 8px;
  overflow: hidden
}
@media (max-width: 735px) {
.helix-header--overlay-beak {
    display: none
}
  }
.helix-header--overlay-beak:after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: rgb(255, 255, 255);
    background: rgb(255, 255, 255);
    background: var(--colorWhite);
    transform: rotate(45deg);
    top: 3px;
    left: 10px;
    box-shadow: -1px -1px 3px -2px rgba(0, 0, 0, 0.5);
  }
/* The rest */
/* Set a min-width at smallest supported device width
   ========================================================================== */
body {
  min-width: 320px;
}
/* Order flow main background color
   ========================================================================== */
.fill-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: var(--colorWhite);
}
hr {
  border-color: rgb(215, 215, 215);
  border-color: rgb(215, 215, 215);
  border-color: var(--colorLightGrey);
  border-top: 1px;
}
/* Accessibility
   ========================================================================== */
.hlx-a11y {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
/* Base document font styles to be inherited throughout
   ========================================================================== */
body,
input,
textarea,
select,
button {
  font-family: TTNorms, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5; /* which computes to 24px */
}
body {
  color: rgb(56, 56, 56);
  color: rgb(56, 56, 56);
  color: var(--colorBasicText);
}
/* Use TT Norms Bold for strong with font-weight: 700
   ========================================================================== */
b,
strong {
  font-weight: 700;
}
/* Ellipsis on non-wrapping text that overflows
   ========================================================================== */
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Links
   ========================================================================== */
a,
a:visited {
  color: rgb(50, 154, 243);
  color: rgb(50, 154, 243);
  color: var(--colorLinkText);
  text-decoration: none;
  transition: color 200ms ease-in-out;
}
a:hover,
a:active {
  color: rgb(39, 122, 192);
  color: rgb(39, 122, 192);
  color: var(--colorLinkHover);
  text-decoration: none;
}
/* NOTE: <a>'s can also have button classes, so color changes here must be coordinated with button.css */
/* Global focus state
   ========================================================================== */
:focus {
  outline: rgb(50, 154, 243) auto 5px;
  outline: rgb(50, 154, 243) auto 5px;
  outline: var(--colorFocusRing) auto 5px;
}
/* Input placeholders
   ========================================================================== */
::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: rgb(135, 135, 135);
  color: rgb(135, 135, 135);
  color: var(--colorPlaceholder);
}
::-moz-placeholder { /* Firefox */
  opacity: 1;
  color: rgb(135, 135, 135);
  color: rgb(135, 135, 135);
  color: var(--colorPlaceholder);
}
:-ms-input-placeholder { /* IE10–11 */
  color: rgb(135, 135, 135);
  color: rgb(135, 135, 135);
  color: var(--colorPlaceholder);
}
::-ms-input-placeholder { /* Edge */
  color: rgb(135, 135, 135);
  color: rgb(135, 135, 135);
  color: var(--colorPlaceholder);
}
/* Common form styles
   ========================================================================== */
input,
textarea,
select,
label,
a {
  -webkit-tap-highlight-color: rgba(50, 154, 242, 0.1);
  -webkit-tap-highlight-color: rgba(50, 154, 242, 0.1);
  -webkit-tap-highlight-color: var(--colorTapHighlight);
}
textarea {
  resize: vertical;
  min-height: 80px;
}
button {
  -webkit-tap-highlight-color: transparent;
}
/* Checkboxes
   ========================================================================== */
.hlx-checkbox {
  width: 20px;
  height: 20px;
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: var(--colorWhite);
  border: 1px solid rgb(175, 175, 175);
  border: 1px solid rgb(175, 175, 175);
  border: 1px solid var(--colorMediumGrey);
  border-radius: 2px
}
.hlx-checkbox:checked {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBmaWxsPSIjMzI5QUYzIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHJ4PSIyIi8+PHBvbHlsaW5lIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBwb2ludHM9IjMgOC44MTk0ODE1NSA3LjU5MDI1OTIzIDEzLjQwOTc0MDggMTcgNCIvPjwvZz48L3N2Zz4=) no-repeat 0 0;
    background-size: 100% 100%;
    border-width: 0;
    border-radius: 0;
  }
/* Checkboxes
   ========================================================================== */
.hlx-radio {
  width: 20px;
  height: 20px;
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: var(--colorWhite);
  border: 1px solid rgb(135, 135, 135);
  border: 1px solid rgb(135, 135, 135);
  border: 1px solid var(--colorDarkGrey);
  border-radius: 100%
}
.hlx-radio:checked {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Zz48Zz48Zz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTAwLjAwMDAwMCwgLTUwMS4wMDAwMDApIHRyYW5zbGF0ZSgyOTguMDAwMDAwLCAxNDEuMDAwMDAwKSB0cmFuc2xhdGUoMjAyLjAwMDAwMCwgMzU2LjAwMDAwMCkgdHJhbnNsYXRlKDAuMDAwMDAwLCA0LjAwMDAwMCkiPjxjaXJjbGUgZmlsbD0iIzMyOUFGMiIgY3g9IjkuNSIgY3k9IjkuNSIgcj0iOS41Ii8+PGNpcmNsZSBmaWxsPSIjRkZGIiBjeD0iOS41IiBjeT0iOS41IiByPSI0Ii8+PC9nPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4=) no-repeat 0 0;
    background-size: 100% 100%;
    border-width: 0;
    border-radius: 100%;
  }
/* Error message - the text below input
   ========================================================================== */
.form-element-error-message {
  margin-top: 8px;
  font-weight: 400;
  color: rgb(240, 89, 67);
  color: rgb(240, 89, 67);
  color: var(--colorFormError);
  animation-name: drop-in;
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* easeInCubic */
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-delay: 200ms

  /* Each Error message needs to be block */
}
.form-element-error-message span {
    display: block;
  }
@keyframes drop-in {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow-y: hidden;
    margin-top: 0;
    margin-bottom: 0;
  }

  20% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    max-height: 48px;
    overflow: hidden;
    margin-top: 8px;
  }
}
/* Headings
   ========================================================================== */
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-weight: 700;
  color: rgb(56, 56, 56);
  color: rgb(56, 56, 56);
  color: var(--colorBasicText);
}
.h1 {
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -0.3px
}
@media (min-width: 1024px) {
.h1 {
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.3px
}
  }
.h2 {
  font-size: 16px;
  line-height: 24px;
}
/* Primary buttons & text-buttons
   ========================================================================== */
.button,
.text-button {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none

  /* Mobile buttons - go full width */
}
@media (max-width: 735px) {
.button,
.text-button {
    width: 100%
}
  }
.button {
  font-weight: 700;
  font-size: 20px;
  line-height: 52px;
  min-width: 158px;
  padding: 0 16px;
  text-align: center;
  color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  color: var(--colorWhite);
  background: rgb(50, 154, 243);
  background: rgb(50, 154, 243);
  background: var(--colorButtonBlue);
  border-radius: 3px
}
@media (min-width: 736px) {
.button {
    font-size: 16px;
    min-width: 272px
}
  }
@media (min-width: 1024px) {
.button {
    min-width: 292px
}
  }
/* Links that look like buttons
   ========================================================================== */
a.button {
  color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  color: var(--colorWhite);
}
/* Text buttons
   ========================================================================== */
.text-button {
  font-weight: 500;
  font-size: inherit;
  line-height: 52px;
  text-align: center;
  color: rgb(50, 154, 243);
  color: rgb(50, 154, 243);
  color: var(--colorLinkText);
}
.text-button:hover,
.text-button:active {
  color: rgb(39, 122, 192);
  color: rgb(39, 122, 192);
  color: var(--colorLinkHover);
}
/* Link buttons - buttons that look and act like plain inline <a> elements
   ========================================================================== */
.inline-link-button {
  display: inline;
  color: rgb(50, 154, 243);
  color: rgb(50, 154, 243);
  color: var(--colorLinkText);
  cursor: pointer;
}
.inline-link-button:hover,
.inline-link-button:active {
  color: rgb(39, 122, 192);
  color: rgb(39, 122, 192);
  color: var(--colorLinkHover);
}
/* Secondary buttons
   ========================================================================== */
.button.button-secondary {
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: var(--colorWhite);
  color: rgb(50, 154, 243);
  color: rgb(50, 154, 243);
  color: var(--colorButtonBlue);
  border: 1px solid rgb(50, 154, 243);
  border: 1px solid rgb(50, 154, 243);
  border: 1px solid var(--colorButtonBlue);
}
/* Links that look like secondary buttons */
a.button.button-secondary {
  color: rgb(50, 154, 243);
  color: rgb(50, 154, 243);
  color: var(--colorButtonBlue);
}
/* Danger buttons - red color and 40px height
   ========================================================================== */
.button.button-danger {
  background-color: rgb(240, 89, 67);
  background-color: rgb(240, 89, 67);
  background-color: var(--colorButtonDanger)
}
.button.button-danger:hover,
  .button.button-danger:active {
    background-color: rgb(208, 2, 27);
    background-color: rgb(208, 2, 27);
    background-color: var(--colorButtonDangerActive);
  }
/* Button text
   ========================================================================== */
.button span {
  opacity: 1;
  transition: opacity 250ms ease-out;

  /* When a button is disabled, its descendant (the text in the span) are still getting
  events. This is triggering the active state on parent (the button element) in some
  browsers. This causes the button color to change even tho the button is disabled :(
  So, disabling events on the button text. */
  pointer-events: none;
}
/* Active state
   ========================================================================== */
.button:active {
  background-color: rgb(39, 122, 192);
  background-color: rgb(39, 122, 192);
  background-color: var(--colorButtonBlueActive);
}
.button.button-secondary:active {
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: var(--colorWhite);
  color: rgb(39, 122, 192);
  color: rgb(39, 122, 192);
  color: var(--colorButtonBlueActive);
  border-color: rgb(39, 122, 192);
  border-color: rgb(39, 122, 192);
  border-color: var(--colorButtonBlueActive);
}
/* Loading spinner
   ========================================================================== */
.button::before {
  display: block;
  width: 23px;
  height: 23px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  content: '';
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAA/CAYAAABXXxDfAAAH4UlEQVR4Xu2bC4xV1bnHf/+1zwzDwBkGayFClBitwVfamKZpte3NUJ6DPKyhWkLVKm2aUm2vBtTe1Ng2yqOUpG3ERJtUa1CDmg4IHWGoYNLQ1NDWFmIN99rU4Gu8FOaMMK9z9vpXO4OzgRAy4wxznMwv+XLWPufkJL/9fetbO1nrMPwZYYQRRhgBcQa5eZPzaSxcFBzOQc5jVQGHkpybobI5qKr5oXlqGxby92505f7QWgcsEK63mRIACQRIvePQe71f8vZcSLaPHZ/ftebzevcjJb9oY8uMgG4RngPUIAh0czp55J5rgSgmga0KWvXA3HF/ZIDJMYBc9+TRK6KKqx2ZbhkE6kcKBCAQrrBZSOqFyza3PB8CK39xde0OBojAAPDlZ9qnLHyysKFIaY/NdAADdndgML1xPCd/YABn3hIgT8Nu+t6Www137Gw9uyzkr3m8ZUbs7HwJezG2TikpGbEPaYvg4SD9MATdGqR7hB4QPC3pZQBlnYGQqQbDgtgW9/731sLsIZ3zC54o3CazzjjRiXMZSKSixM6AG3KjKzf/el71G5yGbz3bNtlp50xJ84D5QU7CCb8ruglBa9fV1y4/o/Lf3OOKt/YX1mOWZhsXPeOAYiI/WpGrvGfDtdWv00++valwYQheEcQNtkdJnHwD0Pqfzq1ddsbk6x9veTiYpSd2bwSSGiGs+M31+X0MEN9taj/PnZ2PgOt0chWQSOtXzx73HUkeVPn6DYXbwD8LdKNMtkl0d8N1NWsYBGzrvXl+B+I+cKWyy6cgoLWr5/RtCqhvGT8yw46NshNl+5holbR481fHbWWQWf7b1qui00ZEXgIyTTEJof7+WeMaB1y+fkP7lDR2vSSoBcjIt+ZC7gubF4/9G2eIO7e1Xuk0fQ6RB5AAQwhqZnRy+cov5v9/QJe66K6V9Ii7J0BRiRafSXGA1bNqditJZgfUle03tifSVvrlgGZ+1mNHr4ike7B1/PqrOxtvqFnDEHHXc4fvANYKyE6BJNHMH02vbRqQx9vUpdU2EhmCGhu/NnTiACtn1a77flOhXniastk0dwNNH7rsZz52ZIYj08kgFCusFQwxkhxGVd4E6iSLXXdvU+GzH1q+GNNbIoDBxwIe3XpDfh9lwH3/VX1A4lEJJOCDiHd9KPlFG10JzDEQe8JSVy7J3UMZURVYE1AagCCQAGnu6t8732/5gx1H62KkBkPsCeNdjUuqX6eM+MGXal8NoiFkhexcV9e7df1veKV0AYAz64IcGihDgrzFcG33+Jh/OgPY3C/5VMzFmS4qGSWby1J+9Kim2N5JdtkDzejXOj9/k/OH/9Xamv2i0L4Xbq65nDLlxzsLL8u+GPWajfe4/LI6HelT5g8dbrvIHE+Af1LGJMF7sS9WplqPVhYmAn2TT2N6jnzSNHizrOXxO2TLHqggTABe7ZM8hDykZAn2W+UtH5qjTPZpL02Z2PeG57QixuO7gqUDlDEhoUUmCyFQ2w/5UbsjXUXsCgBQMaHyhbKWV6i1IlkQLX1+yPnD0qr/Q3xF8Kf34/3xf94rY0ScICAbAd7p1zr/4tKaBqCBjwghYQIGO9sHKk8jP0zIoU8a4wAYAKrGj2rmFASGCQ++1DbZeCpZ0Cu3TNW7wz7zSVecYQkEBhAQ1AQw7OWDPM8CgBgBQIQdAMO67B/Z03FBgAWB7Na3StW11buGf+ZVXBHkxAAGAIktSz6h1mEt/8TetnOLabzRkW4EOZuQS1YNyl6d7UnAQUldDCG29cRfj+6I9rSo3qxHs+umK/J1A7o/b3t8ZzHu7ijGN9pKbj5a8jyGkI372m8PMC0Iksw+fi5oJcCAyneW4v9E+3MRcHQt0c8c7fB8hoBnXmm7Svh+BeiW744cbFryqbHbB1zeZrIBAxEoRVek8lOFDs/mDNLw97YrlcZG7ErRg0CJ3k7Gjv3GoOzSvl/mTuNmGyJggwGhDtDVtaP1OwaZTe9l3I6NMSVv9ybChpCoftGlYxoH5UzOmJyeBVZFwD0BJsZYlTpuOXgkvct2brCaW+P+tuWC54XyIYgQ6A5BSMLavogDqD8dtrUrPu7I9QaijQ0GHCFFf8mFsPTjY/RnBoimV9vPi5FHSmmsMxANNtjGANb6ay4bs+yMHEuxnWvpiL+yWRJt4jF5Q4xGqJTin7sit+7car1BP9l5oOPC2OkVpciN4MrsjY6GFIO0fuHUjPhgymcr4FB7XJtG336cvA2GCFgq2TQ45WlCsu388WrhNOw+4Ml2x8xS1Lxo5sfUSbQBiDYxgoHUYGnt/KnVy4fs+Ok7baVFTvVQxLWO3fInNqLUJlol4VdKKXuj/I/oUHB0Wwmf5eiJ0UxMUy6xfUkKlHysknrLO1Nlb9vJ1+dOrXpuSI+fTqjOPXW43S92pOmDxnNOeQjRzhkuAy6LEUwkYohAZuUAAf7gVaIXg9CmqvzopXWTdLAszt6OH63XgPo3C8VZhp9EuNwYZ7IXDQDmFMig3mGQMRCPSUvPk4SV0y+o2lGWB48njavYBmx7raU43datgrnGSZ9moAAMFoKixFYnyapp51eW76nrLFNqK3YAO15v9cc6S+lsiFcDn0E637YwJ5WBegLpfwXbBdvOqh6189IJOjIs/mnxtj2m5WDx4tQ6OxLHOVV1Gn0oJGqGiuZipPnTk9TGgDHCCCOMMMII/wbXb8eJx9l85AAAAABJRU5ErkJggg==) no-repeat 0 0;
  background-size: 23px 23px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease-out;
}
.button.loading {
  cursor: default;
}
.button.loading span {
  opacity: 0;
}
.button.loading::before {
  opacity: 1;
  animation: button-loading-spinner 750ms infinite linear;
}
@keyframes button-loading-spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.button.button-danger::before {
  background-image: url(data:image/png;base64,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);
}
/* Arrows on buttons
   ========================================================================== */
.arrow-button-left,
.arrow-button-right {
  display: inline-flex;
  align-items: center;
}
.arrow-button-left::before,
.arrow-button-right::after {
  display: inline-block;
  content: '';
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDcgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iIzMyOUFGMiI+PGc+PGc+PHBhdGggZD0iTTEwNywxNC45OTYxOTMzIEMxMDcsMTUuMTAwMjE0IDEwNi45NTk5MDksMTUuMTkyMjMxIDEwNi44Nzk3MjUsMTUuMjcyMjQ2OSBMMTAyLjE1MjkyMSwxOS45ODkxNjIzIEwxMDYuODc5NzI1LDI0LjcwNjA3NzcgQzEwNi45NTk5MDksMjQuNzg2MDkzNyAxMDcsMjQuODc4MTEwNiAxMDcsMjQuOTgyMTMxMyBDMTA3LDI1LjA4NjE1MiAxMDYuOTU5OTA5LDI1LjE3ODE2ODkgMTA2Ljg3OTcyNSwyNS4yNTgxODQ5IEwxMDYuMjc4MzUxLDI1Ljg1ODMwMTMgQzEwNi4xOTgxNjcsMjUuOTM4MzE3MyAxMDYuMTA1OTU3LDI1Ljk3ODMyNDYgMTA2LjAwMTcxOCwyNS45NzgzMjQ2IEMxMDUuODk3NDc5LDI1Ljk3ODMyNDYgMTA1LjgwNTI3LDI1LjkzODMxNzMgMTA1LjcyNTA4NiwyNS44NTgzMDEzIEwxMDAuMTIwMjc1LDIwLjI2NTIxNTkgQzEwMC4wNDAwOTEsMjAuMTg1MiAxMDAsMjAuMDkzMTgzIDEwMCwxOS45ODkxNjIzIEMxMDAsMTkuODg1MTQxNiAxMDAuMDQwMDkxLDE5Ljc5MzEyNDcgMTAwLjEyMDI3NSwxOS43MTMxMDg3IEwxMDUuNzI1MDg2LDE0LjEyMDAyMzMgQzEwNS44MDUyNywxNC4wNDAwMDc0IDEwNS44OTc0NzksMTQgMTA2LjAwMTcxOCwxNCBDMTA2LjEwNTk1NywxNCAxMDYuMTk4MTY3LDE0LjA0MDAwNzQgMTA2LjI3ODM1MSwxNC4xMjAwMjMzIEwxMDYuODc5NzI1LDE0LjcyMDEzOTggQzEwNi45NTk5MDksMTQuODAwMTU1NyAxMDcsMTQuODkyMTcyNiAxMDcsMTQuOTk2MTkzMyBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIwLjAwMDAwMCwgLTIzMTcuMDAwMDAwKSB0cmFuc2xhdGUoMjAuMDAwMDAwLCAyMDg1LjAwMDAwMCkgdHJhbnNsYXRlKDAuMDAwMDAwLCAyMTguMDAwMDAwKSB0cmFuc2xhdGUoMTAzLjUwMDAwMCwgMTkuOTg5MTYyKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTAzLjUwMDAwMCwgLTE5Ljk4OTE2MikiLz48L2c+PC9nPjwvZz48L2c+PC9zdmc+) no-repeat 0 0;
  background-size: 7px 11px;
  width: 7px;
  height: 11px;
  vertical-align: middle;
}
.arrow-button-left::before {
  margin-right: 8px;
  transform: rotate(180deg);
}
.arrow-button-right::after {
  margin-left: 8px;
}
/* Copy pattern - for paragraphs of text
   ========================================================================== */
/* Copy 0 - hero body copy */
.hlx-copy0 {
  font-size: 18px;
  line-height: 30px

  /* paragraphs following paragraphs */
}
.hlx-copy0 p + p {
    margin-top: 16px;
  }
/* Copy 1 - basic body copy */
.hlx-copy1 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px

  /* paragraphs following paragraphs */
}
.hlx-copy1 p + p {
    margin-top: 16px;
  }
/* Copy 2 - small body copy */
.hlx-copy2 {
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.2px

  /* paragraphs following paragraphs */
}
.hlx-copy2 p + p {
    margin-top: 16px;
  }
/* Vertical spacing above each input/error message grouping
   ========================================================================== */
.float-label-with-error-message {
  margin-top: 20px
}
@media (min-width: 736px) {
.float-label-with-error-message {
    margin-top: 28px
}
  }
@media (min-width: 1024px) {
.float-label-with-error-message {
    margin-top: 24px
}
  }
/* Float label input
   ========================================================================== */
.float-label {
  position: relative;
}
.float-label select,
.float-label input {
  width: 100%;
  padding: 13px 15px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgb(56, 56, 56);
  color: rgb(56, 56, 56);
  color: var(--colorBasicText);
  background-color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  background-color: var(--colorWhite);
  border: 1px solid rgb(215, 215, 215);
  border: 1px solid rgb(215, 215, 215);
  border: 1px solid var(--colorLightGrey);
  border-radius: 3px;
  outline: none;
  transition: all 200ms;
}
.float-label select {
  padding-right: 40px;
  height: 52px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxMiA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHBvbHlnb24gZmlsbD0iIzM3MzgzNyIgcG9pbnRzPSI2IDggMCAtMi4yNzM3MzY3NWUtMTMgMTIgLTIuMjczNzM2NzVlLTEzIj48L3BvbHlnb24+CiAgPC9nPgo8L3N2Zz4K);
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.float-label label {
  position: absolute;
  top: 14px;
  left: 10px;
  right: 10px;
  padding: 0 6px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(135, 135, 135);
  color: rgb(135, 135, 135);
  color: var(--colorDarkGrey);
  background-color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  background-color: var(--colorWhite);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: top 200ms, left 200ms, font-size 200ms, color 200ms, background 200ms;
}
.float-label input + label,
.float-label .float-label-field-component + label {
  cursor: text;
}
/* Placeholder - prevent label & placeholder from overlapping when label is in the input
/* Todo: uncouple float label elements from needing labels */
/* ========================================================================== */
.float-label.is-empty:not(.field-with-error) select:not(:focus)::-moz-placeholder, .float-label.is-empty:not(.field-with-error) input:not(:focus):not([name='dateOfBirth']):not([name='phone']):not([name='productId'])::-moz-placeholder {
  color: transparent;
}
.float-label.is-empty:not(.field-with-error) select:not(:focus)::placeholder,
.float-label.is-empty:not(.field-with-error) input:not(:focus):not([name='dateOfBirth']):not([name='phone']):not([name='productId'])::placeholder {
  color: transparent;
}
/* Focus state
   ========================================================================== */
.float-label select:focus,
.float-label input:focus {
  border-color: rgb(56, 56, 56);
  border-color: rgb(56, 56, 56);
  border-color: var(--colorBasicText);
}
.float-label select:focus + label,
.float-label input:focus + label,
.float-label .float-label-child-field-focused + label {
  color: rgb(56, 56, 56);
  color: rgb(56, 56, 56);
  color: var(--colorBasicText);
}
/* Error state
   ========================================================================== */
.float-label.field-with-error select,
.float-label.field-with-error input {
  border-color: rgb(240, 89, 67);
  border-color: rgb(240, 89, 67);
  border-color: var(--colorFormError);
}
/* Floated state (label above input) - Focused, data entered, or error
   ========================================================================== */
.float-label select:focus,
.float-label:not(.is-empty) select,
.float-label.field-with-error select,
.float-label input:focus,
.float-label:not(.is-empty) input,
.float-label.field-with-error input {
  background-color: rgb(250, 250, 250);
  background-color: rgb(250, 250, 250);
  background-color: var(--colorFocusedInputBackground);
}
.float-label select:focus + label,
.float-label input:focus + label,
.float-label .float-label-child-field-focused + label,
.float-label:not(.is-empty) label,
.float-label.field-with-error label {
  cursor: default;
  top: -11px;
  left: 9px;
  right: auto;
  right: initial;
  font-size: 14px;
  background-image: linear-gradient(to bottom, rgb(250, 250, 250) 55%, rgba(255, 255, 255, 0) 95%);
  background-image: linear-gradient(to bottom, rgb(250, 250, 250) 55%, rgba(255, 255, 255, 0) 95%);
  background-image: linear-gradient(to bottom, var(--colorFocusedInputBackground) 55%, rgba(255, 255, 255, 0) 95%);
  border-radius: 8px;
}
.float-label.field-with-error label {
  color: rgb(56, 56, 56);
  color: rgb(56, 56, 56);
  color: var(--colorBasicText);
}
/* Over white background, inputs don't have grey bg, use white bg (EG: modal)
   ========================================================================== */
.modal .float-label select:focus,
.modal .float-label:not(.is-empty) select,
.modal .float-label.field-with-error select,
.modal .float-label input:focus,
.modal .float-label:not(.is-empty) input,
.modal .float-label.field-with-error input {
  background-color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  background-color: var(--colorWhite);
}
.modal .float-label select:focus + label,
.modal .float-label input:focus + label,
.modal .float-label .float-label-child-field-focused + label,
.modal .float-label:not(.is-empty) label,
.modal .float-label.field-with-error label {
  background-color: rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  background-color: var(--colorWhite);
  background-image: none;
}
/* Browser Fix: reset firefox user agent styles
   ========================================================================== */
.float-label input:invalid {
  box-shadow: none;
}
/*
Documentation:
https://myhelix.atlassian.net/wiki/display/ENG/Responsive+breakpoints
*/

/* Responsive utilities breakpoints
   - these are used by the hidden-*-down classes in the grid framework and
     should never be used directly in feature code
   ========================================================================== */

/* stylelint-disable declaration-colon-space-after */

:root {

  /* Generic multi-use */
  --colorWhite:                        rgb(255, 255, 255);
  --colorBlue:                         rgb(50, 154, 243);
  --colorBlueActive:                   rgb(39, 122, 192);
  --colorRed:                          rgb(240, 89, 67);
  --colorRedActive:                    rgb(208, 2, 27);
  --colorGreen:                        rgb(246, 252, 240);

  /* Helix Brand Colors */
  --colorHelixPink:                    rgb(244, 91, 131);
  --colorHelixYellow:                  rgb(248, 190, 8);
  --colorHelixBlue:                    rgb(63, 76, 119);
  --colorHelixGreen:                   rgb(122, 203, 113);

  /* Typography - all around most common text colors */
  --colorBasicText:                    rgb(56, 56, 56);
  --colorBasicTextLight:               rgba(56, 56, 56, 0.5);
  --colorGreyTextOnWhiteBackground:    rgba(56, 56, 56, 0.5);

  /* Grey on Grey (general borders/backgrounds) */
  --colorTouchOfGrey:                  rgb(250, 250, 250);
  --colorVeryLightGrey:                rgb(235, 235, 235);
  --colorLightGrey:                    rgb(215, 215, 215);
  --colorMediumGrey:                   rgb(175, 175, 175);
  --colorDarkGrey:                     rgb(135, 135, 135);

  /* "Fill layout" background */
  --colorFillLayoutGreyBackground:     var(--colorTouchOfGrey);

  /* Modal overlay */
  --colorOverlayScrim:                 rgba(235, 236, 236, 0.8);

  /* Forms */
  --colorTapHighlight:                 rgba(50, 154, 242, 0.1);
  --colorFocusRing:                    var(--colorBlue);
  --colorPlaceholder:                  var(--colorDarkGrey);
  --colorFocusedInputBackground:       var(--colorTouchOfGrey);
  --colorFormError:                    var(--colorRed);
  --colorFormSuccess:                  #7ACB71;
  --colorRadioBlockSelected:           var(--colorBlueActive);
  --colorDropDownFocusColor:           var(--colorTouchOfGrey);

  /* Links - text */
  --colorLinkText:                     var(--colorBlue);
  --colorLinkHover:                    var(--colorBlueActive);

  /* Buttons - background & border */
  --colorButtonBlue:                   var(--colorBlue);
  --colorButtonBlueActive:             var(--colorBlueActive);
  --colorButtonDanger:                 var(--colorRed);
  --colorButtonDangerActive:           var(--colorRedActive);

  /* Footer - background & text */
  --colorFooterDarkGreyText:           #707170;
  --colorFooterDarkGreyBackground:     #F5F5F5;

  /* Sign in tabs */
  --colorSignInTabsBackground:         var(--colorTouchOfGrey);

  /* Order navigation */
  --colorOrderNavigationGreyText:      rgba(56, 56, 56, 0.4);

  /* OrderSummary */
  --colorOrderSummaryShadow:           rgba(56, 56, 56, 0.2);
  --colorGreyBorderOnWhiteBackground:  rgb(229, 229, 229);
  --colorQuantityControlGreyBackground:  rgba(216, 225, 229, 0.5);

  /* KitDecisionModal */
  --colorKitDecisionOrder:             var(--colorTouchOfGrey);

  /* HealthHistory */
  --colorQuestionSubText:              #717171;

  /* Breadcrumbs */
  --colorBreadcrumbsText:              rgba(56, 56, 56, 0.2);
  --colorBreadcrumbsActiveText:        rgb(56, 56, 56);
  --colorBreadcrumbsBackground:        rgba(22, 80, 130, 0.2);
  --colorBreadcrumbsActiveBackground:  rgb(22, 80, 130);

  /* Copied over from V1 for Settings pages */
  /*  - should be reviewed to see if possible to cleanup */
  --colorV1HelixBackground:            #DFE5E5;
  --colorBorderOnGray:                 rgb(227, 227, 227); /* can't have alpha channel - used for collapsed table borders */
}

/* stylelint-enable */

._11PEY6rvC4zVhNQ8G4e6ki {
  padding-top: 20px;
  padding-bottom: 28px
}

@media (min-width: 736px) {

._11PEY6rvC4zVhNQ8G4e6ki {
    padding-top: 32px;
    padding-bottom: 40px
}
  }

._3WjnGxmRm5q1ZS58vg0ah7 {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: rgb(56, 56, 56);
  color: rgb(56, 56, 56);
  color: var(--colorBreadcrumbsActiveText);
  margin-bottom: 10px;
}

._uDtGOmPsDooGFbPCgTPw {
  list-style: none;
  display: flex
}

@media (min-width: 1024px) {

._uDtGOmPsDooGFbPCgTPw {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap
}
  }

/* Round left corners of first step */

@media (min-width: 736px) {

._uDtGOmPsDooGFbPCgTPw :first-child ._3YwVYwitqZmLhFeTr_u4L- :first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    overflow: hidden
}
  }

/* Round right corners of first step */

@media (min-width: 736px) {

._uDtGOmPsDooGFbPCgTPw :last-child ._3YwVYwitqZmLhFeTr_u4L- :last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    overflow: hidden
}
  }

._19XWaKpiwBbTJ3XO8iWAxe {
  color: rgb(56, 56, 56);
  color: rgb(56, 56, 56);
  color: var(--colorBasicText);
  flex-grow: 1
}

._19XWaKpiwBbTJ3XO8iWAxe ._374QN7w5qjQ78CgIIrc6kd {
    font-size: 14px;
    line-height: 20px;
    color: rgba(56, 56, 56, 0.2);
    color: rgba(56, 56, 56, 0.2);
    color: var(--colorBreadcrumbsText);
    margin-bottom: 10px;
  }

._19XWaKpiwBbTJ3XO8iWAxe ._3YwVYwitqZmLhFeTr_u4L- {
    display: flex;
    height: 4px
  }

._19XWaKpiwBbTJ3XO8iWAxe ._3YwVYwitqZmLhFeTr_u4L-:not(last-of-type) {
      margin-right: 2px
    }

@media (min-width: 736px) {

._19XWaKpiwBbTJ3XO8iWAxe ._3YwVYwitqZmLhFeTr_u4L-:not(last-of-type) {
        margin-right: 4px
    }
      }

._19XWaKpiwBbTJ3XO8iWAxe ._3YwVYwitqZmLhFeTr_u4L- ._12qB1lu7dH_isVkli8mQPI {
      flex-grow: 1;
      background: rgba(22, 80, 130, 0.2);
      background: rgba(22, 80, 130, 0.2);
      background: var(--colorBreadcrumbsBackground);
    }

._19XWaKpiwBbTJ3XO8iWAxe ._3YwVYwitqZmLhFeTr_u4L- ._2EGDakicwMEAZwoSPB69Sw {
      font-weight: 700;
      background: rgb(22, 80, 130);
      background: rgb(22, 80, 130);
      background: var(--colorBreadcrumbsActiveBackground);
    }

._19XWaKpiwBbTJ3XO8iWAxe ._3YwVYwitqZmLhFeTr_u4L- ._231qDaCiu9Ld4IvXexSdzV {
      font-weight: 700
    }

@media (max-width: 735px) {

._19XWaKpiwBbTJ3XO8iWAxe ._3YwVYwitqZmLhFeTr_u4L- ._231qDaCiu9Ld4IvXexSdzV {
        background: rgb(22, 80, 130);
        background: rgb(22, 80, 130);
        background: var(--colorBreadcrumbsActiveBackground)
    }
      }

._1mY97Y4wSHIEXGlsL9F_OK ._374QN7w5qjQ78CgIIrc6kd {
    color: rgb(56, 56, 56);
    color: rgb(56, 56, 56);
    color: var(--colorBreadcrumbsActiveText);
    margin-bottom: 10px;
    font-weight: 700;
  }

/*
Documentation:
https://myhelix.atlassian.net/wiki/display/ENG/Responsive+breakpoints
*/

/* Responsive utilities breakpoints
   - these are used by the hidden-*-down classes in the grid framework and
     should never be used directly in feature code
   ========================================================================== */

/* stylelint-disable declaration-colon-space-after */

:root {

  /* Generic multi-use */
  --colorWhite:                        rgb(255, 255, 255);
  --colorBlue:                         rgb(50, 154, 243);
  --colorBlueActive:                   rgb(39, 122, 192);
  --colorRed:                          rgb(240, 89, 67);
  --colorRedActive:                    rgb(208, 2, 27);
  --colorGreen:                        rgb(246, 252, 240);

  /* Helix Brand Colors */
  --colorHelixPink:                    rgb(244, 91, 131);
  --colorHelixYellow:                  rgb(248, 190, 8);
  --colorHelixBlue:                    rgb(63, 76, 119);
  --colorHelixGreen:                   rgb(122, 203, 113);

  /* Typography - all around most common text colors */
  --colorBasicText:                    rgb(56, 56, 56);
  --colorBasicTextLight:               rgba(56, 56, 56, 0.5);
  --colorGreyTextOnWhiteBackground:    rgba(56, 56, 56, 0.5);

  /* Grey on Grey (general borders/backgrounds) */
  --colorTouchOfGrey:                  rgb(250, 250, 250);
  --colorVeryLightGrey:                rgb(235, 235, 235);
  --colorLightGrey:                    rgb(215, 215, 215);
  --colorMediumGrey:                   rgb(175, 175, 175);
  --colorDarkGrey:                     rgb(135, 135, 135);

  /* "Fill layout" background */
  --colorFillLayoutGreyBackground:     var(--colorTouchOfGrey);

  /* Modal overlay */
  --colorOverlayScrim:                 rgba(235, 236, 236, 0.8);

  /* Forms */
  --colorTapHighlight:                 rgba(50, 154, 242, 0.1);
  --colorFocusRing:                    var(--colorBlue);
  --colorPlaceholder:                  var(--colorDarkGrey);
  --colorFocusedInputBackground:       var(--colorTouchOfGrey);
  --colorFormError:                    var(--colorRed);
  --colorFormSuccess:                  #7ACB71;
  --colorRadioBlockSelected:           var(--colorBlueActive);
  --colorDropDownFocusColor:           var(--colorTouchOfGrey);

  /* Links - text */
  --colorLinkText:                     var(--colorBlue);
  --colorLinkHover:                    var(--colorBlueActive);

  /* Buttons - background & border */
  --colorButtonBlue:                   var(--colorBlue);
  --colorButtonBlueActive:             var(--colorBlueActive);
  --colorButtonDanger:                 var(--colorRed);
  --colorButtonDangerActive:           var(--colorRedActive);

  /* Footer - background & text */
  --colorFooterDarkGreyText:           #707170;
  --colorFooterDarkGreyBackground:     #F5F5F5;

  /* Sign in tabs */
  --colorSignInTabsBackground:         var(--colorTouchOfGrey);

  /* Order navigation */
  --colorOrderNavigationGreyText:      rgba(56, 56, 56, 0.4);

  /* OrderSummary */
  --colorOrderSummaryShadow:           rgba(56, 56, 56, 0.2);
  --colorGreyBorderOnWhiteBackground:  rgb(229, 229, 229);
  --colorQuantityControlGreyBackground:  rgba(216, 225, 229, 0.5);

  /* KitDecisionModal */
  --colorKitDecisionOrder:             var(--colorTouchOfGrey);

  /* HealthHistory */
  --colorQuestionSubText:              #717171;

  /* Breadcrumbs */
  --colorBreadcrumbsText:              rgba(56, 56, 56, 0.2);
  --colorBreadcrumbsActiveText:        rgb(56, 56, 56);
  --colorBreadcrumbsBackground:        rgba(22, 80, 130, 0.2);
  --colorBreadcrumbsActiveBackground:  rgb(22, 80, 130);

  /* Copied over from V1 for Settings pages */
  /*  - should be reviewed to see if possible to cleanup */
  --colorV1HelixBackground:            #DFE5E5;
  --colorBorderOnGray:                 rgb(227, 227, 227); /* can't have alpha channel - used for collapsed table borders */
}

/* stylelint-enable */

/* Slim Header (sign in / create account pages)
   ========================================================================== */

._2z2ThF3xFc2W5IYsllp0rY {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid rgb(215, 215, 215);
  border-bottom: 1px solid rgb(215, 215, 215);
  border-bottom: 1px solid var(--colorLightGrey);
  background: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  background: var(--colorWhite);
}

._2z2ThF3xFc2W5IYsllp0rY ._3il660IcLKdFu_Xm3PgeNb {
  display: block;
  background: url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDI0MiIgaGVpZ2h0PSIyNDIiIHZpZXdCb3g9IjAgMCAxMDAwIDI0MiIgd2lkdGg9IjEwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNTcuNyIgY3k9IjU3LjkiIGZpbGw9IiNmNDViODMiIHI9IjUzLjciLz48cGF0aCBkPSJtMjI4LjkgMjEwLjgtNTAgMjguOS01MC0yOC45di01Ny43bDUwLTI4LjkgNTAgMjguOXoiIGZpbGw9IiM3YWNiNzEiLz48cGF0aCBkPSJtMTc4LjkgNy45IDI4LjkgNTAgMjguOCA1MGgtNTcuNy01Ny43bDI4LjktNTB6IiBmaWxsPSIjZjhiZTA4Ii8+PHBhdGggZD0ibTE2LjkgMTQxLjJoODEuNnY4MS42aC04MS42eiIgZmlsbD0iIzNmNGM3NyIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNzEgLjcwNzEgLS43MDcxIC43MDcxIDE0NS41NzQgMTIuNDgzMSkiLz48ZyBmaWxsPSIjNzc3Ij48cGF0aCBkPSJtNDUzLjkgMjQwLjd2LTEwNC4xaC0xMzV2MTA0LjFoLTI3di0yMzYuNmgyN3YxMDYuOGgxMzV2LTEwNi44aDI3djIzNi42eiIvPjxwYXRoIGQ9Im03MTEuNSAyNDAuN3YtMjM2LjZoMjZ2MjM2LjZ6Ii8+PHBhdGggZD0ibTgxNC43IDE4LjZjMCAxMC41LTcuNCAxOC4yLTE3LjIgMTguMnMtMTcuMi03LjgtMTcuMi0xOC4yYzAtMTAuNSA3LjQtMTguMyAxNy4yLTE4LjNzMTcuMiA3LjggMTcuMiAxOC4zeiIvPjxwYXRoIGQ9Im03ODQuNSA2Mi42aDI2djE3OC4xaC0yNnoiLz48cGF0aCBkPSJtOTY2LjUgNjIuNmgyOS4xbC01OS41IDg2LjUgNjMuOSA5MS42aC0zMC44bC01MC42LTcyLjctNTIuNCA3Mi43aC0yOS43bDY0LjktOTEuNi02MC41LTg2LjVoMzAuNGw0Ny4zIDY3LjZ6Ii8+PHBhdGggZD0ibTUzOS44IDE2MmMuOSA5LjEgMy4xIDE3LjIgNi43IDI0LjNzOC4xIDEzLjEgMTMuNyAxOCAxMi4yIDguNiAxOSAxMS4yYzYuOSAyLjYgMTQuNSAzLjggMjIgMy44IDEyIDAgMjMtMi4yIDMxLjYtNi43IDguNi00LjQgMTYuNC0xMC4zIDIzLjUtMTcuN2wxNiAxNC4zYy04LjcgOS44LTE4LjYgMTcuNi0yOS43IDIzLjVzLTI1LjYgOC44LTQyLjEgOC44Yy0xMS44IDAtMjMuMy0yLjItMzMuNy02LjVzLTE5LjktMTAuNC0yNy43LTE4LjMtMTMuOS0xNy40LTE4LjUtMjguNS02LjgtMjMuMy02LjgtMzYuN2MwLTEyLjQgMi4xLTI0LjIgNi4yLTM1LjJzOS44LTIwLjYgMTcuMi0yOC43YzcuMy04LjEgMTYuNC0xNC41IDI2LjUtMTkuMnMyMS41LTcgMzMuNS03YzEyLjcgMCAyNC40IDIuNCAzNC40IDcuMnMxOC44IDExLjMgMjUuNyAxOS41IDEyLjEgMTcuOSAxNS43IDI5IDUuMyAyMyA1LjMgMzUuN3YzLjhjMCAxLjQtLjEgMy4yLS4zIDUuMmgtMTM4LjJ6bTExMi42LTIxYy0uNy03LjctMi4zLTE1LjEtNS0yMi0yLjctNy02LjMtMTMuMS0xMC44LTE4LjQtNC42LTUuMy0xMC41LTkuNS0xNy0xMi42LTYuNi0zLjEtMTQuNC00LjYtMjIuOS00LjYtNy4zIDAtMTQuNiAxLjQtMjEgNC4zcy0xMi41IDYuOS0xNy40IDEyLjEtOC45IDExLjMtMTIuMiAxOC40Yy0zLjIgNy4xLTUuMyAxNC43LTYuMiAyMi45aDExMi41eiIvPjwvZz48L3N2Zz4=) no-repeat 0 0;
  background-size: 84px 20px;
  width: 84px;
  height: 20px;
}

/*
Documentation:
https://myhelix.atlassian.net/wiki/display/ENG/Responsive+breakpoints
*/

/* Responsive utilities breakpoints
   - these are used by the hidden-*-down classes in the grid framework and
     should never be used directly in feature code
   ========================================================================== */

/* stylelint-disable declaration-colon-space-after */

:root {

  /* Generic multi-use */
  --colorWhite:                        rgb(255, 255, 255);
  --colorBlue:                         rgb(50, 154, 243);
  --colorBlueActive:                   rgb(39, 122, 192);
  --colorRed:                          rgb(240, 89, 67);
  --colorRedActive:                    rgb(208, 2, 27);
  --colorGreen:                        rgb(246, 252, 240);

  /* Helix Brand Colors */
  --colorHelixPink:                    rgb(244, 91, 131);
  --colorHelixYellow:                  rgb(248, 190, 8);
  --colorHelixBlue:                    rgb(63, 76, 119);
  --colorHelixGreen:                   rgb(122, 203, 113);

  /* Typography - all around most common text colors */
  --colorBasicText:                    rgb(56, 56, 56);
  --colorBasicTextLight:               rgba(56, 56, 56, 0.5);
  --colorGreyTextOnWhiteBackground:    rgba(56, 56, 56, 0.5);

  /* Grey on Grey (general borders/backgrounds) */
  --colorTouchOfGrey:                  rgb(250, 250, 250);
  --colorVeryLightGrey:                rgb(235, 235, 235);
  --colorLightGrey:                    rgb(215, 215, 215);
  --colorMediumGrey:                   rgb(175, 175, 175);
  --colorDarkGrey:                     rgb(135, 135, 135);

  /* "Fill layout" background */
  --colorFillLayoutGreyBackground:     var(--colorTouchOfGrey);

  /* Modal overlay */
  --colorOverlayScrim:                 rgba(235, 236, 236, 0.8);

  /* Forms */
  --colorTapHighlight:                 rgba(50, 154, 242, 0.1);
  --colorFocusRing:                    var(--colorBlue);
  --colorPlaceholder:                  var(--colorDarkGrey);
  --colorFocusedInputBackground:       var(--colorTouchOfGrey);
  --colorFormError:                    var(--colorRed);
  --colorFormSuccess:                  #7ACB71;
  --colorRadioBlockSelected:           var(--colorBlueActive);
  --colorDropDownFocusColor:           var(--colorTouchOfGrey);

  /* Links - text */
  --colorLinkText:                     var(--colorBlue);
  --colorLinkHover:                    var(--colorBlueActive);

  /* Buttons - background & border */
  --colorButtonBlue:                   var(--colorBlue);
  --colorButtonBlueActive:             var(--colorBlueActive);
  --colorButtonDanger:                 var(--colorRed);
  --colorButtonDangerActive:           var(--colorRedActive);

  /* Footer - background & text */
  --colorFooterDarkGreyText:           #707170;
  --colorFooterDarkGreyBackground:     #F5F5F5;

  /* Sign in tabs */
  --colorSignInTabsBackground:         var(--colorTouchOfGrey);

  /* Order navigation */
  --colorOrderNavigationGreyText:      rgba(56, 56, 56, 0.4);

  /* OrderSummary */
  --colorOrderSummaryShadow:           rgba(56, 56, 56, 0.2);
  --colorGreyBorderOnWhiteBackground:  rgb(229, 229, 229);
  --colorQuantityControlGreyBackground:  rgba(216, 225, 229, 0.5);

  /* KitDecisionModal */
  --colorKitDecisionOrder:             var(--colorTouchOfGrey);

  /* HealthHistory */
  --colorQuestionSubText:              #717171;

  /* Breadcrumbs */
  --colorBreadcrumbsText:              rgba(56, 56, 56, 0.2);
  --colorBreadcrumbsActiveText:        rgb(56, 56, 56);
  --colorBreadcrumbsBackground:        rgba(22, 80, 130, 0.2);
  --colorBreadcrumbsActiveBackground:  rgb(22, 80, 130);

  /* Copied over from V1 for Settings pages */
  /*  - should be reviewed to see if possible to cleanup */
  --colorV1HelixBackground:            #DFE5E5;
  --colorBorderOnGray:                 rgb(227, 227, 227); /* can't have alpha channel - used for collapsed table borders */
}

/* stylelint-enable */

/* Slim Footer
   ========================================================================== */

._2SPRfJ4rS6n1phTpbeT86C {
  margin-top: 24px;
  padding: 28px 28px 31px;
  text-align: center;
  color: #707170;
  color: #707170;
  color: var(--colorFooterDarkGreyText);
  background: #F5F5F5;
  background: #F5F5F5;
  background: var(--colorFooterDarkGreyBackground)
}

@media (min-width: 736px) {

._2SPRfJ4rS6n1phTpbeT86C {
    margin-top: 48px
}
  }

._2l60Bf48L2kxte4PifTtJp {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.HoUMvCFv85oNJG0FECXr_ {
  margin-top: 4px;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
}