.access-error-container {
  width: 452px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

@media screen and (max-width: 500px) {
  .access-error-container {
    width: 335px;
  }
}

.session-ended-button {
  width: 280px;
  height: 56px;
  background-color: var(--colorButtonPrimary);
  border-radius: 3px
}

@media screen and (max-width: 736px) {

.session-ended-button {
    width: 335px;
    font-size: var(--fontBodyCopyTwo)
}
  }

.access-error-container a {
  color: var(--colorHyperlinkActive);
}

.error-root {
  display: flex;
  justify-content: center;
}

.error-inner-container,
.error-container {
  max-width: 612px;
  text-align: center;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px;
}

.error-inner-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
}

.error-inner-container a,
.error-container a {
  color: var(--colorHyperlinkActive);
}

.error-container img,
.error-inner-container img {
  height: 104px;
  width: 104px;
}

.error-inner-container img {
  margin-top: 80px
}

@media (max-width: 1024px) {

.error-inner-container img {
    margin-top: 40px
}
  }

.error-inner-container h1,
.error-container h1 {
  margin-top: 34px;
  font-size: 32px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.31;
}

.error-inner-container h4,
.error-container h4 {
  padding-top: 16px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.63;
}

.access-error-container p {
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  padding: 32px 32px;
}

.server-error-container, .no-apps-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 500px;
  justify-content: center;
  padding: 0 20px;
  text-align: center;
}

.server-error-container h1 {
  font-size: 34px;
  line-height: 42px;
  font-weight: bold;
}

.server-error-container h4, .no-apps-message h4{
  font-size: 20px;
  font-weight: normal;
  margin-top: 16px;
}

.errorSnackbar-root {
  display: flex;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 24px;
  padding: 16px 22px;
  background-color: var(--colorBackgroundError);
  line-height: 1.57;
}

.errorSnackbar-root img {
  width: 35px;
  height: auto;
}

.errorSnackbar-root .errorSnackbar-container {
  margin-left: 12px;
}

.errorSnackbar-root .errorSnackbar-container h5 {
  font-size: 14px;
  font-weight: bold;
}

.errorSnackbar-root .errorSnackbar-container p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
}

.error-message {
  text-align: left;
  display: flex;
  padding: 16px;
  border-radius: 3px;
  background-color: var(--colorBackgroundError);
}

.error-message img {
  width: 24px;
  height: 24px;
}

.error-message .error-message-text {
  margin-left: 8px;
}

.error-message .error-message-text h4 {
  margin-bottom: 4px;
}

.error-message .error-message-text p {
  line-height: 1.57;
  font-size: 14px;
  font-weight: 500;
}

.error-button-container {
  padding: 0 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* TT Norms Regular */
@font-face {
  font-display: swap;
  font-family: 'TTNorms';
  font-weight: 400;
  src: url('https://fonts.hlxcdn.com/fonts/tt-norms/TTNorms-Regular.woff');
}
/* TT Norms Medium */
@font-face {
  font-display: swap;
  font-weight: 500;
  font-family: 'TTNorms';
  src: url('https://fonts.hlxcdn.com/fonts/tt-norms/TTNorms-Medium.woff');
}
/* TT Norms Bold */
@font-face {
  font-display: swap;
  font-family: 'TTNorms';
  font-weight: 700;
  src: url('https://fonts.hlxcdn.com/fonts/tt-norms/TTNorms-Bold.woff');
}


 .sub-items{
    max-width: 90px;
  }
.helix-header-logo {
  display: flex;
  background: url(data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDI0MiIgaGVpZ2h0PSIyNDIiIHZpZXdCb3g9IjAgMCAxMDAwIDI0MiIgd2lkdGg9IjEwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNTcuNyIgY3k9IjU3LjkiIGZpbGw9IiNmNDViODMiIHI9IjUzLjciLz48cGF0aCBkPSJtMjI4LjkgMjEwLjgtNTAgMjguOS01MC0yOC45di01Ny43bDUwLTI4LjkgNTAgMjguOXoiIGZpbGw9IiM3YWNiNzEiLz48cGF0aCBkPSJtMTc4LjkgNy45IDI4LjkgNTAgMjguOCA1MGgtNTcuNy01Ny43bDI4LjktNTB6IiBmaWxsPSIjZjhiZTA4Ii8+PHBhdGggZD0ibTE2LjkgMTQxLjJoODEuNnY4MS42aC04MS42eiIgZmlsbD0iIzNmNGM3NyIgdHJhbnNmb3JtPSJtYXRyaXgoLjcwNzEgLjcwNzEgLS43MDcxIC43MDcxIDE0NS41NzQgMTIuNDgzMSkiLz48ZyBmaWxsPSIjNzc3Ij48cGF0aCBkPSJtNDUzLjkgMjQwLjd2LTEwNC4xaC0xMzV2MTA0LjFoLTI3di0yMzYuNmgyN3YxMDYuOGgxMzV2LTEwNi44aDI3djIzNi42eiIvPjxwYXRoIGQ9Im03MTEuNSAyNDAuN3YtMjM2LjZoMjZ2MjM2LjZ6Ii8+PHBhdGggZD0ibTgxNC43IDE4LjZjMCAxMC41LTcuNCAxOC4yLTE3LjIgMTguMnMtMTcuMi03LjgtMTcuMi0xOC4yYzAtMTAuNSA3LjQtMTguMyAxNy4yLTE4LjNzMTcuMiA3LjggMTcuMiAxOC4zeiIvPjxwYXRoIGQ9Im03ODQuNSA2Mi42aDI2djE3OC4xaC0yNnoiLz48cGF0aCBkPSJtOTY2LjUgNjIuNmgyOS4xbC01OS41IDg2LjUgNjMuOSA5MS42aC0zMC44bC01MC42LTcyLjctNTIuNCA3Mi43aC0yOS43bDY0LjktOTEuNi02MC41LTg2LjVoMzAuNGw0Ny4zIDY3LjZ6Ii8+PHBhdGggZD0ibTUzOS44IDE2MmMuOSA5LjEgMy4xIDE3LjIgNi43IDI0LjNzOC4xIDEzLjEgMTMuNyAxOCAxMi4yIDguNiAxOSAxMS4yYzYuOSAyLjYgMTQuNSAzLjggMjIgMy44IDEyIDAgMjMtMi4yIDMxLjYtNi43IDguNi00LjQgMTYuNC0xMC4zIDIzLjUtMTcuN2wxNiAxNC4zYy04LjcgOS44LTE4LjYgMTcuNi0yOS43IDIzLjVzLTI1LjYgOC44LTQyLjEgOC44Yy0xMS44IDAtMjMuMy0yLjItMzMuNy02LjVzLTE5LjktMTAuNC0yNy43LTE4LjMtMTMuOS0xNy40LTE4LjUtMjguNS02LjgtMjMuMy02LjgtMzYuN2MwLTEyLjQgMi4xLTI0LjIgNi4yLTM1LjJzOS44LTIwLjYgMTcuMi0yOC43YzcuMy04LjEgMTYuNC0xNC41IDI2LjUtMTkuMnMyMS41LTcgMzMuNS03YzEyLjcgMCAyNC40IDIuNCAzNC40IDcuMnMxOC44IDExLjMgMjUuNyAxOS41IDEyLjEgMTcuOSAxNS43IDI5IDUuMyAyMyA1LjMgMzUuN3YzLjhjMCAxLjQtLjEgMy4yLS4zIDUuMmgtMTM4LjJ6bTExMi42LTIxYy0uNy03LjctMi4zLTE1LjEtNS0yMi0yLjctNy02LjMtMTMuMS0xMC44LTE4LjQtNC42LTUuMy0xMC41LTkuNS0xNy0xMi42LTYuNi0zLjEtMTQuNC00LjYtMjIuOS00LjYtNy4zIDAtMTQuNiAxLjQtMjEgNC4zcy0xMi41IDYuOS0xNy40IDEyLjEtOC45IDExLjMtMTIuMiAxOC40Yy0zLjIgNy4xLTUuMyAxNC43LTYuMiAyMi45aDExMi41eiIvPjwvZz48L3N2Zz4=) no-repeat 0 0;
  background-size: 84px 20px;
  width: 84px;
  height: 20px;
}

/* stylelint-disable declaration-colon-space-after */
:root {
  /* Generic multi-use */
  --colorWhite:                        rgb(255, 255, 255);

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

  /* Grey on Grey (general borders/backgrounds) */
  --colorBorderGrey:                   rgb(194, 194, 194);
  --colorTouchOfGrey:                  rgb(250, 250, 250);
  --colorSubtleGrey:                   rgb(247, 247, 247);
  --colorMask:                         rgb(218, 218, 218);
  --colorGrey:                         rgb(119, 119, 119);
  --colorDarkGrey:                     rgb(95, 96, 95);

  /* Box Shadow */
  --colorBoxShadow:                    rgba(64, 77, 120, 0.35);
  --colorHyperlink:                    rgb(50, 154, 243);
  --colorHyperlinkActive:              rgb(10, 111, 194);

  /* Buttons */
  --colorButtonPrimary:             rgb(63, 76, 119);
  --colorButtonPrimaryLight:        rgb(231, 241, 249);
  --colorButyiwtonPrimaryDisabled:  rgb(159, 166, 187);
  --colorButtonPrimaryText:         rgb(232, 234, 239);
  --colorButtonPrimaryHover:        rgb(50, 61, 95);
  --colorButtonPrimaryHoverText:    rgb(249, 250, 251);
  --colorButtonPrimaryPressed:      rgb(38, 46, 71);
  --colorButtonPrimaryPressedText:  rgb(231, 232, 236);
  --colorButtonPrimaryDisabled:     rgb(204, 204, 204);
  --colorButtonPrimaryDisabledText: rgb(138, 138, 138);
  --colorButtonSecondary:             white;
  --colorButtonSecondaryText:         rgb(28, 53, 101);
  --colorButtonSecondaryHover:        white;
  --colorButtonSecondaryHoverText:    rgb(141, 154, 178);
  --colorButtonSecondaryPressed:      white;
  --colorButtonSecondaryPressedText:  rgb(21, 38, 71);
  --colorButtonSecondaryDisabled:     white;
  --colorButtonSecondaryDisabledText: rgb(197, 197, 197);

  /* Backgrounds */
  --colorBackgroundTitle:              rgb(231, 241, 249);
  --colorBackgroundLine:               rgb(108, 169, 218);
  --colorBackgroundError:                rgb(250, 233, 231);

  /* Separators */
  --colorSeparatorsDividers:                rgb(218, 218, 218);

  /* Notifications */
  --colorSuccess:                rgba(122, 188, 113, 1);
  --colorWarning:                rgba(248, 190, 8, 1);
  --colorError:                rgba(244, 91, 131, 1);

  --colorSuccessText:                rgba(73, 113, 68, 1);
  --colorWarningText:                rgba(149, 114, 5, 1);
  --colorErrorText:                rgba(195, 73, 105, 1);
}
h1,
h2,
h3,
h4,
h5 {
  font-weight: revert;
}
:global .basic-layout {
  display: flex;
  background-color: rgb(255, 255, 255);
  background-color: var(--colorWhite);
}
.container {
  width: 100%;
  justify-content: center;
}
.hlx-container {
  width: 100%;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
.hlx-col-md-12 {
    justify-self: center
}
  }
.content-alignment {
  display: flex;
  justify-content: center;
}
.content {
  min-height: 56.8vh;
  margin-left: auto;
  margin-right: auto;
}
.hlx-radio-root .hlx-radio-header-label{
  align-self: baseline;
}
.container-with-background {
  display: inline-grid;
  min-height: 82vh;
  grid-template-columns: 16% 39% 45%;
  justify-content: center
}
@media screen and (max-width: 1200px) {
.container-with-background {
    grid-template-columns: 16% 39% 45%
}
  }
@media screen and (max-width: 1024px) {
.container-with-background {
    display: flex;
    margin-bottom: 32px
}
  }
.container-with-background .content {
  margin: 0;
  grid-column-start: 2
}
@media (max-width: 1024px) {
.container-with-background .content {
    justify-content: center;
    margin-right: 0;
    margin-left: 0
}
  }
@media screen and (max-width: 736px) {
.container-with-background .content {
    margin: 0
}
  }
.container-with-background .background-image {
  grid-column-start: 3
}
@media (max-width: 1024px) {
.container-with-background .background-image {
    display: none
}
  }
.container-with-background .background-image {
  width: 100%;
  height: auto;
  min-height: 60vh;
  background-image: url(/assets/background.a2b67f12.png);
}
.card {
  position: relative;
  padding: 26px 24px;
  backdrop-filter: blur(10px);
  box-shadow: 1px 8px 24px 3px rgba(0,0,0,0.16078);
  border-radius: 3px
}
@media screen and (max-width: 1024px) {
.card {
    margin: 0 20px
}
  }
.my-results-card {
  position: relative;
  backdrop-filter: blur(10px);
  box-shadow: 5px 15px 46px -10px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
.button {
  width: 260px;
  height: 52px;

  /* margin: 40px 161px 40px 159px; */
  background-color: rgb(63, 76, 119);
  background-color: var(--colorButtonPrimary);
  border-radius: 3px
}
@media screen and (max-width: 736px) {
.button {
    width: 100%;
    font-size: var(--fontBodyCopyTwo)
}
  }
@media screen and (max-width: 425px) {
.button {
    margin: 0
}
  }
.displayNone {
  display: none;
}
a {
  color: rgb(10, 111, 194);
  color: var(--colorHyperlinkActive);
  font-weight: var(--fontSubtleWeight);
  cursor: pointer;
}
a.link {
  color: rgb(10, 111, 194);
  color: var(--colorHyperlinkActive);
}
a.link-disabled {
  color: rgb(10, 111, 194);
  color: var(--colorHyperlinkActive);
  opacity: 0.4;
  cursor: default !important;
}
/* Override default footer margin */
div.basic-layout footer {
  margin-top: 0;
}
.button-wrap {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.button-wrap button {
  max-width: 280px;
}
.button.disabled {
  background-color: rgb(159, 166, 187);
  background-color: var(--colorButyiwtonPrimaryDisabled);
  color: rgb(249, 250, 251);
  color: var(--colorButtonPrimaryHoverText);
  cursor: auto;
}
.button.disabled:hover {
  background-color: grey;
  color: rgb(249, 250, 251);
  color: var(--colorButtonPrimaryHoverText);
}
.button.disabled:focus {
  background-color: grey;
  color: rgb(249, 250, 251);
  color: var(--colorButtonPrimaryHoverText);
}
.button:hover {
  background-color: rgb(50, 61, 95);
  background-color: var(--colorButtonPrimaryHover);
  color: rgb(249, 250, 251);
  color: var(--colorButtonPrimaryHoverText);
  border: 2px solid rgb(249, 250, 251);
  border: 2px solid var(--colorButtonPrimaryHoverText);
}
.button:focus {
  background-color: rgb(38, 46, 71);
  background-color: var(--colorButtonPrimaryPressed);
  color: rgb(231, 232, 236);
  color: var(--colorButtonPrimaryPressedText);
  border: 2px solid rgb(231, 232, 236);
  border: 2px solid var(--colorButtonPrimaryPressedText);
}
.outlined-button {
  background-color: white;
  background-color: var(--colorButtonSecondary);
  color: rgb(28, 53, 101);
  color: var(--colorButtonSecondaryText);
  border: 2px solid rgb(28, 53, 101);
  border: 2px solid var(--colorButtonSecondaryText);
  transition: all 0.2s ease-out;
}
.outlined-button:hover {
  background-color: white;
  background-color: var(--colorButtonSecondaryHover);
  color: rgb(141, 154, 178);
  color: var(--colorButtonSecondaryHoverText);
  border: 2px solid rgb(141, 154, 178);
  border: 2px solid var(--colorButtonSecondaryHoverText);
}
.outlined-button:focus {
  background-color: white;
  background-color: var(--colorButtonSecondaryPressed);
  color: rgb(21, 38, 71);
  color: var(--colorButtonSecondaryPressedText);
  border: 2px solid rgb(21, 38, 71);
  border: 2px solid var(--colorButtonSecondaryPressedText);
}
.outlined-button[focus-within] {
  background-color: white;
  background-color: var(--colorButtonSecondaryPressed);
  color: rgb(21, 38, 71);
  color: var(--colorButtonSecondaryPressedText);
  border: 2px solid rgb(21, 38, 71);
  border: 2px solid var(--colorButtonSecondaryPressedText);
}
.outlined-button:focus-within {
  background-color: white;
  background-color: var(--colorButtonSecondaryPressed);
  color: rgb(21, 38, 71);
  color: var(--colorButtonSecondaryPressedText);
  border: 2px solid rgb(21, 38, 71);
  border: 2px solid var(--colorButtonSecondaryPressedText);
}
.marginTop {
  margin-top: 20px;
}
.marginBottom {
  margin-bottom: 40px;
}

.nav-root {
  height: 64px;
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: solid 1px var(--colorBorderGrey);
}

@media (max-width: 1024px) {

.nav-desktop {
    display: none
}
  }

@media (min-width: 1025px) {

.nav-mobile {
    display: none
}
  }

.nav-desktop {
  height: 64px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/* The media queries must be written in ascending order */

@media (min-width: 576px) {
  .nav-desktop {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .nav-desktop {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .nav-desktop {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .nav-desktop {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .nav-desktop {
    max-width: 1320px;
  }
}

.nav-container {
  display: flex;
}

.nav-flex {
  width: 100%;
  display: inline-grid;
  align-items: center;
  grid-template-columns: 16% 63% 21%;
}

.nav-logo {
  grid-column-start: 2;
  display: flex;
  align-items: center
}

@media (max-width: 1024px) {

.nav-logo {
    margin-left: 20px
}
  }

.nav-container {
  grid-column-start: 3;
}

.nav-flex--mobile {
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-link {
  margin-left: 32px;
  z-index: 3;
  display: flex;
}

.cart-item {
  margin-top: 3px;
  background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMjYgMTkiIHdpZHRoPSIyNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxwYXRoIGQ9Im01LjU5MjI5NjMgMi4wOTI4NzY4Yy0uMjM2NTYzMjQtMS4yMjc5NzMzMi0xLjI1MzM0NDM5LTIuMTA1MzIxNzQtMi40MjI5MzY1Ny0yLjA5Mjc0MzI3aC0yLjg5MzEyNDM5Yy0uMTUyODExMDQgMC0uMjc2MjM1MzQuMTMyMDczOTYtLjI3NjIzNTM0LjI5NDAyMTc4IDAgLjE2MzUyMDE0LjEyMzQyNDMuMjk1NTk0MDkuMjc2MjM1MzQuMjk1NTk0MDloMi44OTMxMjQzOWMuOTAwNzAzNTMuMDA0NzE2OTMgMS42Nzk0NTIwOS42NzkyMzc0OSAxLjg3MTkzNTIzIDEuNjIxMDUwNTdsMS43MDg4Mzg4MyA4LjI1MzA0OTgzYy4yOTgyNzUzOSAxLjQ4NTgzMiAxLjUyODExMDM5IDIuNTQwODUxNCAyLjk0NzQ4OTg1IDIuNTM2MTM0NGg5LjgzNDI3MTk2YzEuNDQyODg4OS4wMDE1NzI0IDIuNjg1OTQ3OS0xLjA4MTc0ODUgMi45NzU0MDczLTIuNTk0MzA5OGwxLjQ4Njk2ODktOC4zMTI3OTc2Yy4wMzA4NTYxLS4xNjAzNzU1Mi0uMDY2MTIwMS0uMzE0NDYxOC0uMjE0NTIzMi0uMzQ5MDUyNi0uMDEzNzEzOC0uMDAzMTQ0NjItNC40NjkyMzMxLS4wMDUyNDEwMy0xMy4zNjY1NTc5LS4wMDYyODkyNC0uMTUxMzQxNyAwLS4yNzQ3NjYuMTMyMDczOTYtLjI3NDc2Ni4yOTU1OTQwOSAwIC4xNjE5NDc4My4xMjM0MjQzLjI5NDAyMTc4LjI3NDc2Ni4yOTQwMjE3OGgxMy4wMDM2MzE3bC0xLjQzNDA3MjggNy45NjA2MDAzN2MtLjIyMzMzOTIgMS4yNDUyNjg4LTEuMjM3MTgxNyAyLjE0NjIwMTgtMi40MjI5MzY2IDIuMTUyNDkxaC05LjgzNDI3MTk2Yy0xLjE3MTA2MTUyLjAxMTAwNjItMi4xODc4NDI2Ni0uODY2MzQyMi0yLjQyNDQwNTkxLTIuMDk0MzE1NXoiIGZpbGw9IiMwMDAiIHN0cm9rZT0iIzM3MzgzNyIgc3Ryb2tlLXdpZHRoPSIuMjUiLz48ZyBmaWxsPSIjMzczODM3Ij48cGF0aCBkPSJtOC41IDE4Yy0uODI5MDg0NTkgMC0xLjUtLjY2OTU2NTItMS41LTEuNDk5MTMwNCAwLS44Mjk1NjUzLjY3MDkxNTQxLTEuNTAwODY5NiAxLjUtMS41MDA4Njk2LjgyNzM0NjQ3IDAgMS41LjY3MTMwNDMgMS41IDEuNTAwODY5NiAwIC44Mjk1NjUyLS42NzI2NTM1MyAxLjQ5OTEzMDQtMS41IDEuNDk5MTMwNHoiLz48cGF0aCBkPSJtMjIgMTYuNTAwODY5NmMwIC44Mjk1NjUyLS42NzIyNjQgMS40OTkxMzA0LTEuNDk5MTMxNCAxLjQ5OTEzMDQtLjgyODYwNDYgMC0xLjUwMDg2ODYtLjY2OTU2NTItMS41MDA4Njg2LTEuNDk5MTMwNCAwLS44Mjk1NjUzLjY3MjI2NC0xLjUwMDg2OTYgMS41MDA4Njg2LTEuNTAwODY5Ni44MjY4Njc0IDAgMS40OTkxMzE0LjY3MTMwNDMgMS40OTkxMzE0IDEuNTAwODY5NiIvPjwvZz48L2c+PC9zdmc+) no-repeat 0 0;
  background-size: 26px 19px;
  width: 26px;
  height: 19px;
}

.menu-mobile {

}

.items {
  z-index: 1;
}

.items ul {
  display: flex;
}

.items ul li {
  position: relative;
}

.items ul li:first-child {
  margin-left: 0;
}

.items ul li a {
  color: var(--colorBasicText);
  font-size: var(--fontBreadcrumb);
  font-weight: var(--fontSubtleWeight);
  opacity: 1;
  line-height: 2;
  cursor: pointer;
}

.items ul li a.bold {
  font-weight: var(--fontNormalWeight);
}

.items ul li a.selected {
  color: var(--colorHyperlinkActive);
}

.sub-items {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  z-index: 3;
  background-color: white;
  box-shadow: 5px 15px 46px 0 rgba(0, 0, 0, 0.15);
}

.sub-items ul {
  display: block;
}

.sub-items ul li a {
  padding: 8px 16px;
  display: block;
}

.sub-items ul li a:hover {
  background-color: #eee;
}

.sub-items ul li a:first-child {
  padding: 8px;
  padding-left: 16px;
  padding-top: 10px;
}

.items-collection {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
}

.items-collection:focus {
  outline: 0;
  background-color: #eee;
}

.items-collection svg {
  fill: currentColor;
  pointer-events: none;
  font-size: 1.5rem;
  width: 1em;
  height: 1em;
  color: rgba(0, 0, 0, 0.54);
}

.items-collection svg.expand-more-icon-open {
  transform: rotate(180deg);
}

.container {
  min-height: 64px;
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  padding-top: 12px;
  margin-right: 0;
  align-items: center;
  justify-content: space-between;
}

/* The media queries must be written in ascending order */

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

@media (max-width: 1024px) {

.nav-desktop {
    display: none
}
  }

@media (min-width: 1025px) {

.nav-mobile {
    display: none
}
  }

.nav-logo {
  grid-column-start: 2;
  display: flex;
  align-items: center
}

@media (max-width: 1024px) {

.nav-logo {
    margin-left: 20px
}
  }

.nav-container {
  grid-column-start: 3;
}

.nav-item-group {
  display: flex;
  align-items: center;
  grid-gap: 2rem;
  gap: 2rem;
}

.nav-flex--mobile {
  width: 90vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-link {
  margin-left: 32px;
  z-index: 3;
  display: flex;
}

.cart-item {
  margin-top: 3px;
  background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMjYgMTkiIHdpZHRoPSIyNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxwYXRoIGQ9Im01LjU5MjI5NjMgMi4wOTI4NzY4Yy0uMjM2NTYzMjQtMS4yMjc5NzMzMi0xLjI1MzM0NDM5LTIuMTA1MzIxNzQtMi40MjI5MzY1Ny0yLjA5Mjc0MzI3aC0yLjg5MzEyNDM5Yy0uMTUyODExMDQgMC0uMjc2MjM1MzQuMTMyMDczOTYtLjI3NjIzNTM0LjI5NDAyMTc4IDAgLjE2MzUyMDE0LjEyMzQyNDMuMjk1NTk0MDkuMjc2MjM1MzQuMjk1NTk0MDloMi44OTMxMjQzOWMuOTAwNzAzNTMuMDA0NzE2OTMgMS42Nzk0NTIwOS42NzkyMzc0OSAxLjg3MTkzNTIzIDEuNjIxMDUwNTdsMS43MDg4Mzg4MyA4LjI1MzA0OTgzYy4yOTgyNzUzOSAxLjQ4NTgzMiAxLjUyODExMDM5IDIuNTQwODUxNCAyLjk0NzQ4OTg1IDIuNTM2MTM0NGg5LjgzNDI3MTk2YzEuNDQyODg4OS4wMDE1NzI0IDIuNjg1OTQ3OS0xLjA4MTc0ODUgMi45NzU0MDczLTIuNTk0MzA5OGwxLjQ4Njk2ODktOC4zMTI3OTc2Yy4wMzA4NTYxLS4xNjAzNzU1Mi0uMDY2MTIwMS0uMzE0NDYxOC0uMjE0NTIzMi0uMzQ5MDUyNi0uMDEzNzEzOC0uMDAzMTQ0NjItNC40NjkyMzMxLS4wMDUyNDEwMy0xMy4zNjY1NTc5LS4wMDYyODkyNC0uMTUxMzQxNyAwLS4yNzQ3NjYuMTMyMDczOTYtLjI3NDc2Ni4yOTU1OTQwOSAwIC4xNjE5NDc4My4xMjM0MjQzLjI5NDAyMTc4LjI3NDc2Ni4yOTQwMjE3OGgxMy4wMDM2MzE3bC0xLjQzNDA3MjggNy45NjA2MDAzN2MtLjIyMzMzOTIgMS4yNDUyNjg4LTEuMjM3MTgxNyAyLjE0NjIwMTgtMi40MjI5MzY2IDIuMTUyNDkxaC05LjgzNDI3MTk2Yy0xLjE3MTA2MTUyLjAxMTAwNjItMi4xODc4NDI2Ni0uODY2MzQyMi0yLjQyNDQwNTkxLTIuMDk0MzE1NXoiIGZpbGw9IiMwMDAiIHN0cm9rZT0iIzM3MzgzNyIgc3Ryb2tlLXdpZHRoPSIuMjUiLz48ZyBmaWxsPSIjMzczODM3Ij48cGF0aCBkPSJtOC41IDE4Yy0uODI5MDg0NTkgMC0xLjUtLjY2OTU2NTItMS41LTEuNDk5MTMwNCAwLS44Mjk1NjUzLjY3MDkxNTQxLTEuNTAwODY5NiAxLjUtMS41MDA4Njk2LjgyNzM0NjQ3IDAgMS41LjY3MTMwNDMgMS41IDEuNTAwODY5NiAwIC44Mjk1NjUyLS42NzI2NTM1MyAxLjQ5OTEzMDQtMS41IDEuNDk5MTMwNHoiLz48cGF0aCBkPSJtMjIgMTYuNTAwODY5NmMwIC44Mjk1NjUyLS42NzIyNjQgMS40OTkxMzA0LTEuNDk5MTMxNCAxLjQ5OTEzMDQtLjgyODYwNDYgMC0xLjUwMDg2ODYtLjY2OTU2NTItMS41MDA4Njg2LTEuNDk5MTMwNCAwLS44Mjk1NjUzLjY3MjI2NC0xLjUwMDg2OTYgMS41MDA4Njg2LTEuNTAwODY5Ni44MjY4Njc0IDAgMS40OTkxMzE0LjY3MTMwNDMgMS40OTkxMzE0IDEuNTAwODY5NiIvPjwvZz48L2c+PC9zdmc+) no-repeat 0 0;
  background-size: 26px 19px;
  width: 26px;
  height: 19px;
}

.menu-mobile {

}

#nav-icon {
  width: 20px;
  height: 20px;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--colorBasicText);
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 9px;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 18px;
  transform-origin: left center;
}

#nav-icon.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 2px;
  left: 2px;
}

#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 16px;
  left: 2px;
}

.mobile-items {
  height: 100vh;
}

.mobile-items ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  color: var(--colorBasicText);
}

.mobile-items .bold {
  font-weight: var(--fontNormalWeight);
}

.arrow-dropdown {
  display: inline-block;
  margin-left: 10px;
  box-sizing: border-box;
  height: 9px;
  width: 9px;
  border-style: solid;
  border-color: var(--colorBasicText);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.arrow-dropdown.up {
  transform: rotate(-135deg);
}

.mobile-sub-items ul a li {
  color: var(--colorBasicText);
  border: none;
  min-height: 42px;
}

.mobile-link-wrapper {
  margin: 0 20px;
  border-bottom: 1px solid var(--colorBorderGrey);
}


.lds-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lds-content h4 {
  margin-top: 12px;
  font-weight: var(--fontSubtleWeight);
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid var(--colorButtonPrimary);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--colorButtonPrimary) transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.access-code-container{
  display: flex;
  padding:24px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


  .help-tooltip {
    display: flex;
    padding: 8px;
  }


  .kit-icon {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
  }


  .kit-icon img {
    margin-right: 6px;
  }


  .kit-icon p {
    color: #d42300;
  }


  .kit-icon-tube {
    display: flex;
    justify-content: center;
  }


  .kit-icon-tube img {
    margin-top: 26px;
    width: 396px;
    height: 92px
  }


  @media (max-width: 735px) {


  .kit-icon-tube img {
      width: 295px;
      height: 68px
  }
    }


  .page-container {
    display: flex;
    justify-content: center;
    flex:1;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }


  .page-container .hlx-notification.hlx-error{
    margin-bottom: 16px;
    max-width: 420px;
}


  .form-container {
    max-width: 420px;
    width: 100%;
  }


  .form-group {
    margin-bottom: 16px;
  }


  .h2 {
    margin-top: 16px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
  }


  .sub-headline {
    margin-bottom: 24px;
    max-width: 452px;
    text-align: center;
  }


  .access-code-prompt{
    margin-bottom: 16px;
    text-align: center;
  }


  .access-resend-wrapper{
    position: relative;
  }


  .form {
    grid-gap: 32px;
    gap: 32px;
    display: flex;
    flex-direction: column;
  }


  .phone-number-main {
    margin-top: 70px;
    max-width: 532px;
    padding: 0 20px;
    justify-self: right;
    margin-bottom: 50px
  }


  @media screen and (max-width: 1024px) {


  .phone-number-main {
      justify-self: center;
      margin-bottom: 20px
  }
    }


  .phone-number-main-centered {
    justify-self: center;
  }


  .phone-number-main .header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  .phone-number-main h1 {
    text-align: center;
  }


  .phone-number-main .header p {
    text-align: center;
    max-width: 532px;
  }


  .phone-number-main .banner {
    margin: 24px 0;
  }


  .phone-number-main .error-message {
    margin-bottom: 24px;
  }


  .phone-number-card {
    margin: 32px 0;
    padding: 40px 32px
  }


  @media screen and (max-width: 736px) {


  .phone-number-card {
      padding: 40px 20px
  }
    }


  .phone-number-card .header {
    text-align: center;
  }


  .sub-header {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 32px;
    max-width: 358px
  }


  @media screen and (max-width: 736px) {


  .sub-header {
      padding: 0;
      padding-bottom: 32px
  }
    }


  .phone-number-card form .input {
    margin-bottom: 32px;
  }


  .phone-number-card .button {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }


  .profile-security-update-password-modal .modal-container form .button button {
    max-width: 280px;
  }


  .phone-number-card .button {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }


  .phone-number-card .button button {
    max-width: 280px;
  }


  .radio-button-label {
    font-family: TTNorms, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
  }


  .resend-code {
    display: flex;
    justify-content: center;
    color: var(--colorHyperlinkActive);
  }


  button.hlx-button.button-lg.access-resend-link{
    width: -moz-fit-content;
    width: fit-content;
  }


  .auth-tooltip-container {
    position: relative;
    display: inline;
  }


  .button-access-container{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
  }


  .margin-top-1{
    margin-top: 16px;
  }


  .button-access-container .hlx-button {
    max-width: 280px;
  }


  .button-access-container .hlx-button {
    max-width: 280px;
  }


  .access-code{
    max-width: 452px;
    width: 100%;
    margin-top: 32px;
    margin-bottom: 32px;
  }


  .access-code-container .hlx-notification.hlx-error{
  margin-bottom: -16px;
  max-width: 452px;
}
.register-container {
  width: 452px;
  margin-top: 70px;
}

@media screen and (max-width: 500px) {
  .register-container {
    width: 335px;
  }
}

.register-container .header {
  text-align: center;
}

.register-container .btn {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.register-container .header h1 {
  margin-bottom: 16px;
}

.register-container .header p {
  margin-bottom: 24px;
}

.register-container .card {
  margin: 0;
  padding: 40px 32px;
  margin-bottom: 32px
}

@media screen and (max-width: 736px) {

.register-container .card {
    padding: 40px 20px
}
  }

.register-container .card .message {
  margin-top: 16px;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
}

.register-container .card .separator {
  text-align: center;
  position: relative;
  margin-bottom: 25px;
}

.register-container .card .separator::before {
  content: "";
  display: block;
  width: 145px;
  height: 2px;
  background: var(--colorMask);
  left: 0;
  top: 50%;
  position: absolute;
}

.register-container .card .separator::after {
  content: "";
  display: block;
  width: 145px;
  height: 2px;
  background: var(--colorMask);
  right: 0;
  top: 50%;
  position: absolute;
}

.register-container .card .buttons-container {
  display: flex;
  margin-bottom: 24px;
  border-radius: 2px;
  border: 1px solid var(--colorMask);
  height: 34px;
  background-color: var(--colorSubtleGrey);
}

.register-container .card .buttons-container div {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.register-container .card .buttons-container div.selected {
  background-color: white;
}

.register-container .card .buttons-container div:hover {
  background-color: var(--colorTouchOfGrey);
}

.register-container .card .buttons-container div p {
  color: var(--colorBasicTextGrey);
}

.register-container .card .buttons-container div.selected p {
  color: var(--colorBasicText);
}

.register-container .card .buttons-container div.selected {
  background-color: var(--colorSubtleGrey);
  border: 1px solid var(--colorGrey);
  border-radius: 2px;
}

.register-container .card button {
  max-width: 285px;
  padding: 0;
}

.register-container .card .kit-id {
  margin-bottom: 32px;
}

.register-container .card .dob {
  margin-bottom: 32px;
}

.register-container .card p.description {
  margin-top: 16px;
  color: var(--colorBasicTextGrey);
}

.register-container .signin-redirect {
  text-align: center;
}

.register-container .dob-hidden {
  display: none;
}

.select-another {
  display: flex;
  justify-content: center;
  color: var(--colorHyperlinkActive);
}

.sso-or-nonsso-container {
  width: 452px;
  margin-top: 72px;
}

@media screen and (max-width: 500px) {
  .sso-or-nonsso-container {
    width: 335px;
  }
}

.sso-or-nonsso-container .header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.sso-or-nonsso-container .btn {
  display: flex;
  justify-content: center;
}

.sso-or-nonsso-container .header h1 {
  margin-bottom: 0.5rem;
}

.sso-or-nonsso-container .header p {
  margin-bottom: 24px;
}

.sso-or-nonsso-container .card {
  margin: 0;
  padding: 40px 32px;
  margin-bottom: 32px
}

@media screen and (max-width: 736px) {

.sso-or-nonsso-container .card {
    padding: 40px 20px
}
  }

.sso-or-nonsso-container .card .message {
  margin-bottom: 24px;
}

.sso-or-nonsso-container .card .separator {
  text-align: center;
  position: relative;
  margin-bottom: 25px;
  margin-top: 25px;
}

.sso-or-nonsso-container .card .separator::before {
  content: "";
  display: block;
  width: 44%;
  height: 1px;
  background: var(--colorMask);
  left: 0;
  top: 50%;
  position: absolute;
}

.sso-or-nonsso-container .card .separator::after {
  content: "";
  display: block;
  width: 44%;
  height: 1px;
  background: var(--colorMask);
  right: 0;
  top: 50%;
  position: absolute;
}

.sso-or-nonsso-container .card .buttons-container {
  display: flex;
  margin-bottom: 24px;
  border-radius: 2px;
  border: 1px solid var(--colorMask);
  height: 34px;
  background-color: var(--colorSubtleGrey);
}

.sso-or-nonsso-container .card .buttons-container div {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sso-or-nonsso-container .card .buttons-container div.selected {
  background-color: white;
}

.sso-or-nonsso-container .card button {
  max-width: 285px;
  padding: 0;
}

.sso-or-nonsso-container .card .kit-id {
  margin-bottom: 32px;
}

.sso-or-nonsso-container .card .dob {
  margin-bottom: 32px;
}

.sso-or-nonsso-container .signin-redirect {
  text-align: center;
}

.select-another {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.non-sso-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120px;
  margin-top: 72px;
}
.non-sso-root h1{
  text-align: center;
}
.non-sso-root .card {
  margin-top: 32px;
  width: 100%;
  max-width: 443px;
  padding: 40px 32px;
  align-items: center;
}
@media screen and (max-width: 500px) {
  .non-sso-root .card {
    width: 335px;
  }
}
.non-sso-root .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.small-error-icon {
  margin-bottom: 16px;
}
.sub-header {
  text-align: center;
  margin-top: 16px;
  padding: 0 34px 32px
}
@media screen and (max-width: 736px) {
.sub-header {
    padding: 0;
    padding-bottom: 32px
}
  }
.non-sso-root form .input {
  margin-top: 16px;
  padding-bottom: 16px;
}
.non-sso-root .checkbox-container {
  margin-top: 12px;
  margin-bottom: 42px;
}
.non-sso-root .login-error-message {
  margin-bottom: 20px;
}
.non-sso-root button {
  max-width: 310px;
}
.non-sso-root .card .goToSSO-btn {
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.non-sso-root .card .separator {
  text-align: center;
  position: relative;
  margin-bottom: 25px;
}
.non-sso-root .card .separator::before {
  content: "";
  display: block;
  width: 44%;
  height: 1px;
  background: var(--colorMask);
  left: 0;
  top: 50%;
  position: absolute;
}
.non-sso-root .card .separator::after {
  content: "";
  display: block;
  width: 44%;
  height: 1px;
  background: var(--colorMask);
  right: 0;
  top: 50%;
  position: absolute;
}
.non-sso-root .password {
  position: relative;
  margin-top: 32px;
}
.non-sso-root .password #forgot {
  position: absolute;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  right: 0;
  top: -12px;
  font-size: 14px;
  padding: 0;
  font-weight: 500;
  cursor: pointer;
  z-index: 10;
}
.non-sso-root .error {
  margin-bottom: 25px;
}
.non-sso-root #remember-chkbox {
  margin-top: 16px;
  margin-bottom: 8px;
}
.non-sso-root .submit-button {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.non-sso-root .sign-up-redirect {
  text-align: center;
  margin-top: 32px;
}
.return-to-sign-in {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  color: var(--colorHyperlinkActive);
  padding-bottom: 12px;
}

.hlx-checkbox-non-click-label {
  z-index: 1;
}

.hlx-checkbox-input {
  top: 0;
  left: 0;
  width: 100%;
  cursor: inherit;
  height: 100%;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
}

.hlx-checkbox-svg{

}

.hlx-checkbox-span {
  margin-left: 8px;
}

.hlx-checkbox-container {
  display: inline;
  position: relative;
}

.hlx-checkbox-container > * {
  vertical-align: middle;
}

button.hlx-button.link {
  z-index: 2;
  position: relative;
}
.auth-container-module--auth-container {
  text-align: center;
  padding: 0 20px;
}

.auth-container-module--auth-container-centered {
  max-width: 60%;
}

.auth-container-module--header {
  margin: 22px auto 16px;
  font-size: var(--fontPageHeadline);
  font-weight: var(--fontNormalWeight);
  line-height: 1.31;
  letter-spacing: normal;
  text-align: center;
  padding: 0 20px;
  color: var(--colorBasicText)
}

@media (max-width: 736px) {

.auth-container-module--header {
    margin: 0 auto 16px;
    padding: 0 16px
}
  }

.auth-container-module--auth-error-message {
  margin-bottom: 32px;
}

.auth-container-module--auth-info-message {
  margin-bottom: 17px;
}

.auth-container-module--copy {
  padding: 0 20px;
  font-size: 16px;
  line-height: 26px;
  font-weight: normal;
  color: var(--colorBasicText);
}

.auth-container-module--re-signin-container * {
  display: inline-block;
  padding: 5px;
  margin: 16px 0;
}

.auth-container-module--confirm-button {
  background: var(--colorButtonPrimary);
  width: 280px;
  height: 56px
}

@media screen and (max-width: 435px) {

.auth-container-module--confirm-button {
    width: 295px
}
  }

.auth-container-module--name-container-all {
  display: flex;
  justify-content: space-between;
}

.auth-container-module--name-container {
  padding: 40px 32px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  justify-content: center;
  margin: 40px auto;
  border-radius: 3px;
  backdrop-filter: blur(10px);
  box-shadow: 5px 15px 46px 0 rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
}

.auth-container-module--name-container h4 {
  text-align: left;
  font-weight: var(--fontNormalWeight);
  font-size: 24px;
  line-height: 32px;
}

.auth-container-module--name-container-all {
  word-break: break-word;
}

.auth-container-module--name-container-col {
  padding: 40px 32px;
  display: flex;
  align-items: center;
  flex-direction: column
}

@media screen and (max-width: 736px) {

.auth-container-module--name-container-col {
    padding: 40px 20px
}
  }

.auth-container-module--name-container-col .auth-container-module--label {
  white-space: nowrap;
  vertical-align: middle
}

@media screen and (max-width: 480px) {

.auth-container-module--name-container-col .auth-container-module--label {
    white-space: inherit;
    width: 60px;
    height: 50px
}
  }

.auth-container-module--name-container-col:last-child {
  padding-right: 0;
}

.auth-container-module--name-container-col:first-child {
  padding-left: 0;
}

.auth-container-module--name-container-col .auth-container-module--data {
  font-size: 16px;
  line-height: 26px;
  font-weight: normal;
}

.auth-container-module--error-confirm-container {
  margin-bottom: 24px;
}

.auth-container-module--auth-container .auth-container-module--auth-icon {
  display: flex;
  margin-top: -30px;
  margin-bottom: 30px;
}

.auth-container-module--auth-container .auth-container-module--auth-icon img {
  margin-right: 6px;
}

.auth-container-module--auth-container .auth-container-module--auth-icon p {
  color: #d42300;
}

.auth-container-module--form-control {
  align-items: flex-start !important;
}

.auth-container-module--checkbox {
  transform: translate(0, -10px);
}

.tracker-container {
  padding: 70px 12px;
  padding-right: 25px;
  height: 100%;
  border-right: 1px solid var(--colorLightGrey)
}

@media screen and (max-width: 1024px) {

.tracker-container {
    margin: 0;
    width: 100vw;
    padding: 16px 24px;
    border-bottom: solid 1px var(--colorLightGrey);
    border-right: none
}
  }

.tracker-horizontal-container {
  margin: 0;
  position: relative;
  width: 100%;
  padding: 24px;
  border-right: none
}

@media screen and (max-width: 736px) {

.tracker-horizontal-container {
    border-bottom: none
}
  }

.p {
  font-weight: 300;
  line-height: 1.5;
  font-size: 14px;
}

.timeline {
  position: relative;
  padding-left: 12px;
}

.timeline-horizontal {
  margin: auto;
  padding-left: 0;
  display: flex;
}

/* @media screen and (max-width: 1024px) {
  .timeline {
    margin: auto;
    padding-left: 0;
    display: flex;
  }
} */

@media screen and (max-width: 1024px) {
  .timeline-horizontal,
  .timeline {
    display: none;
  }
}

.timeline-horizontal::before,
.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  background: grey;
  top: 22px;
  height: 81%;
  width: 1px;
}

.timeline-horizontal::before {
  top: 46px;
  height: 2px;
  left: 100px;
  width: 70%;
}

.timeline-horizontal .timeline-container,
.timeline .timeline-container {
  position: relative;
  margin-bottom: 0.5rem;
}

.timeline-horizontal .timeline-container {
  padding-top: 52px;
  text-align: center;
}

.timeline-horizontal .timeline-container.timeline-container-length-4{
  width: 212px;
}

.timeline-horizontal .timeline-container.timeline-container-length-5{
  width: 165px;
}

.timeline-horizontal .timeline-container:first-of-type {
  margin-left: 0;
}

.timeline-horizontal .timeline-container .timeline-icon,
.timeline .timeline-container .timeline-icon {
  font-weight: bold;
  position: absolute;
  left: -26px;
  padding-top: 5px;
  top: 9px;
  border-radius: 50%;
  text-align: center;
  font-size: 14px;
  background: white;
  width: 28px;
  height: 28px;
  background-image: url('https://images.hlxcdn.com/registration/assets/check.svg');
  background-size: 28px;
}

.timeline-horizontal .timeline-container .timeline-icon {
  left: 65px;
}

.timeline .timeline-container .timeline-body {
  padding: 14px 0 7px 22px;
  letter-spacing: 0.5px;
}

.timeline-horizontal .timeline-container .timeline-body .timeline-title,
.timeline .timeline-container .timeline-body .timeline-title {
  /* white-space: nowrap; */
  margin-bottom: 1.4rem;
}

.timeline-horizontal .timeline-container .timeline-body .timeline-title {
  white-space: normal;
}

.timeline-body .timeline-title .badge {
  background: #4f537b;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 14px;
}

.timeline-container .selected {
  font-weight: 500;
  color: var(--colorBasicText);
}

.timeline-container.primary .badge,
.timeline-container.primary .timeline-icon {
  background: var(--colorButtonPrimary) !important;
  box-shadow: 0 0 0 3px #f3f5f6 inset;
  box-sizing: border-box;
  color: white;
  left: -30px;
  top: 3px;
  padding-top: 7px;
  width: 36px;
  height: 36px;
  border: 2px solid  var(--colorButtonPrimary);
}

.timeline-horizontal .timeline-container.primary .badge,
.timeline-horizontal .timeline-container.primary .timeline-icon {
  left: 68px;
  padding-left: 1px;
  top: 6px;
}

.timeline .timeline-container.primary .timeline-body {
  padding: 11px 0 7px 21px;
}

@media screen and (max-width: 1024px) {
  .timeline .timeline-container .timeline-body {
    padding: 0;
  }
}

.timeline-container.primary .timeline-body .subpages {
  margin-top: 20px;
}

.timeline-container.primary .timeline-body .subpages p {
  margin-top: 5px;
  letter-spacing: 0;
}

.timeline-horizontal .timeline-container.incomplete .timeline-body {
  padding: 0;
}

.timeline-container.incomplete .timeline-body {
  padding: 8px 0 7px 21px;
  color: var(--colorBasicTextGrey);
}

.timeline-container.incomplete .timeline-icon {
  left: -25px;
  top: 3px;
  padding-top: 3px;
  padding-left: 0.5px;
  border: 1px solid var(--colorBasicTextGrey);
  color: grey;
  background-image: none;
}

.timeline-horizontal .timeline-container.incomplete .timeline-icon {
  left: 68px;
  top: 9px;
}

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.step {
  margin-left: 20px;
  text-transform: uppercase;
}

.step p {
  font-weight: bold;
}

.step p.secondary-step {
  font-weight: normal;
  color: var(--colorBasicTextGrey);
}

.single-chart {
  display: flex;
  align-items: center;
  color: black;
}

@media screen and (min-width: 1024px) {
  .single-chart {
    display: none;
  }
}

.circular-chart {
  display: block;
  margin: 10px 0;
  max-width: 80%;
  max-height: 60px;
  min-width: 50px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart .circle {
  stroke: var(--colorButtonPrimary);
}

.percentage {
  fill: #666;
  font-size: var(--fontSmall);
  line-height: 1.43;
  letter-spacing: 0.5px;
  text-anchor: middle;
  font-weight: var(--fontNormalWeight);
}

.uppercase {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 16px;
}

.uppercase-selected {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
}

.timeline-subpage {
  font-weight: normal;
  color: var(--colorBasicText);
}

.auth-legacy-container-module--login-legacy-main {
  margin-top: 70px;
  max-width: 532px;
  padding: 0 20px;
  justify-self: right
}

@media screen and (max-width: 1024px) {

.auth-legacy-container-module--login-legacy-main {
    justify-self: center
}
  }

.auth-legacy-container-module--login-legacy-main .auth-legacy-container-module--header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-legacy-container-module--login-legacy-main h1 {
  text-align: center;
}

.auth-legacy-container-module--login-legacy-main .auth-legacy-container-module--header p {
  text-align: center;
  max-width: 532px;
  margin-top: 16px;
}

.auth-legacy-container-module--login-legacy-main .auth-legacy-container-module--banner {
  margin: 24px 0;
}

.auth-legacy-container-module--login-legacy-main .auth-legacy-container-module--error-message {
  margin-bottom: 24px;
}

.auth-legacy-container-module--auth-legacy-card {
  margin: 32px 0;
  padding: 40px 32px
}

@media screen and (max-width: 736px) {

.auth-legacy-container-module--auth-legacy-card {
    padding: 40px 20px
}
  }

.auth-legacy-container-module--auth-legacy-card form .auth-legacy-container-module--input {
  display: flex;
  flex-direction: column;
  grid-row-gap: 20px;
  row-gap: 20px;
  margin-bottom: 32px;
}

.auth-legacy-container-module--auth-legacy-card .auth-legacy-container-module--button {
  width: 100%;
  display: flex;
  justify-content: center;
}

.auth-legacy-container-module--auth-legacy-card .auth-legacy-container-module--button button {
  max-width: 280px;
}

.auth-legacy-container-module--modal-body{
  padding: 1rem 2rem;
  padding-top: 0;
}

.auth-legacy-container-module--modal-body-header{
  text-align: center;
  padding-bottom: 2.5rem;
}

.auth-legacy-container-module--modal-header{
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.auth-legacy-container-module--modal-inputs-grid{
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  margin-bottom: 2rem;
}

.auth-legacy-container-module--modal-button{
  padding: 1.5rem 3rem !important;
  justify-content: center;
}

.auth-legacy-container-module--buttons-wrapper{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.auth-legacy-container-module--button-wrapper{
  width: 15.5rem;
}
.password-widget-root{
 text-align: right;   
}

.password-line-container{
    display: flex;
}

.password-line{
    background-color: #ccc;
    height: 6px;
    width: 33%;
    margin-left: 5px;
    margin-top: 8px;
    margin-bottom: 4px;
    border-radius: 4px;
}

.password-line:first-child{
    margin-left: 0;
}

.password-widget-root p{
    text-transform: capitalize;
    color: var(--colorSuccessText);
}

.password-widget-root.good p{
    color: var(--colorWarningText); 
}

.password-widget-root.weak p{
    color: var(--colorErrorText);
}

.password-widget-root.weak .password-line.first{
    background-color: var(--colorError);
}

.password-widget-root.good .password-line.first,
.password-widget-root.good .password-line.second{
    background-color: var(--colorWarning);
}

.password-widget-root.strong .password-line{
    background-color: var(--colorSuccess);
}


.select-provider-container {
  width: 452px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: normal;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 735px) {
  .select-provider-container {
    width: 400px;
  }
}

@media screen and (max-width: 500px) {
  .select-provider-container {
    width: 335px;
  }
}

.select-provider-container .hlx-error {
  margin: 8px 16px;
  margin-bottom: 25px;
}

.select-provider-container h1 {
  margin-top: 70px;
}

.select-provider-container .body1 {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 32px
}

@media (max-width: 735px) {

.select-provider-container .body1 {
    padding: 0 20px
}
  }

.select-provider-container .select-container {
  width: 100%;
  padding: 0 32px
}

@media (max-width: 735px) {

.select-provider-container .select-container {
    padding: 0 20px
}
  }

.select-provider-container button.hlx-button {
  margin-top: 32px;
  margin-bottom: 40px;
  max-width: 295px;
}

.selector-module--helix-select {
  position: relative;
}

.selector-module--helix-select:focus {
  outline: none;
}

.selector-module--helix-input-select {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px var(--colorGrey) solid;
}

.selector-module--helix-input-select p {
  height: auto;
  min-height: 1.4375em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 0;
  font: inherit;
  letter-spacing: inherit;
  color: currentColor;
  padding: 4px 0 5px;
  border: 0;
  box-sizing: content-box;
  background: none;
  height: 1.4375em;
  margin: 0;
  display: block;
  min-width: 0;
  width: 100%;
  animation-name: selector-module--mui-auto-fill-cancel;
  animation-duration: 10ms;
  opacity: 0.7;
  font-style: italic;
}

.selector-module--helix-input-select p.selector-module--has-property {
  font-style: normal;
  opacity: 1;
}

.selector-module--helix-input-select img {
  transform: rotate(360deg);
  transition-duration: 0.3s;
  transition-property: transform;
}

.selector-module--helix-input-select.selector-module--toggled img {
  transform: rotate(180deg);
  transition-duration: 0.3s;
  transition-property: transform;
}

.selector-module--helix-input-select input {
  background-color: antiquewhite;
  bottom: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  box-sizing: border-box;
}

.selector-module--helix-input-options {
  position: absolute;
  width: 100%;
  z-index: 999;
  top: 38px;
  left: 0;
  opacity: 1;
  transform: none;
  transition: opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transform-origin: 168px 0;
  background: #fff;
  box-shadow: 5px 15px 46px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  max-height: 440px;
  overflow: scroll
}

@media screen and (max-width: 500px) {

.selector-module--helix-input-options {
    max-height: 310px
}
  }

.selector-module--helix-input-options ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  padding-top: 8px;
  padding-bottom: 8px;
  outline: 0;
}

.selector-module--helix-input-options li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  background-color: transparent;
  outline: 0;
  border: 0;
  margin: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  text-decoration: none;
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-sizing: border-box;
  white-space: nowrap;
  padding-left: 16px;
  padding-right: 16px;
}

.selector-module--helix-input-options li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.selector-module--helix-input-options li p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector-module--helix-input-options li:hover {
  background-color: #ddd;
}

.selector-module--helix-input-options.selector-module--toggled {
  display: none;
}

input {
  background-color: aqua;
}

.myresults-root {
  margin-left: auto;
  margin-right: auto;
  max-width: 932px
}

@media screen and (max-width: 736px) {

.myresults-root {
    margin: 40px 20px
}
  }

@media screen and (max-width: 1024px) {

.myresults-root {
    max-width: 692px
}
  }

.myresults-root h1 {
  font-size: var(--fontPageHeadline);
  font-weight: var(--fontNormalWeight);
  margin-bottom: 24px;
  margin-top: 40px
}

@media (max-width: 736px) {

.myresults-root h1 {
    margin-left: 20px;
    margin-right: 20px
}
  }

.myresults-root h2 {
  font-size: var(--fontSubheadline);
  font-weight: var(--fontNormalWeight);
  padding-top: 40px;
  padding-left: 32px
}

@media (max-width: 736px) {

.myresults-root h2 {
    padding-left: 20px;
    padding-top: 32px
}
  }

.myresults-container {
  margin-top: 32px;
}

.myresults-cards {
  display: flex;
  flex-wrap: wrap;
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 24px;
  padding-bottom: 40px;
  margin-bottom: 24px;
  grid-gap: 24px;
  gap: 24px
}

@media (max-width: 736px) {

.myresults-cards {
    margin-left: 20px;
    margin-right: 20px
}
  }

/* CARDS */

.myresults-card {
  width: 420px;
  height: 140px;
  border: solid 1px var(--colorBorderGrey);
  display: flex;
  align-items: center;
  border-radius: 3px
}

@media (max-width: 736px) {

.myresults-card {
    width: 295px;
    height: 100px
}
  }

.myresults-card img.icon {
  border-radius: 3px;
  margin-left: 24px;
  width: 75px;
  height: 75px
}

@media (max-width: 736px) {

.myresults-card img.icon {
    width: 52px;
    height: 52px;
    margin-left: 16px
}
  }

.myresults-card .text {
  margin-left: 24px;
  border-right: solid 1px var(--colorBorderGrey);
  height: 75px;
  width: 212px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

@media (max-width: 736px) {

.myresults-card .text {
    margin-left: 16px;
    border-right: none;
    width: 152px
}
  }

.myresults-card .text h3 {
  font-weight: var(--fontSubtleWeight);
  color: var(--colorBasicText);
}

.myresults-card .text p {
  font-weight: var(--fontSubtleWeight);
  color: var(--colorHyperlinkActive);
}

.myresults-card img.arrow {
  height: 35px;
  width: 35px;
  margin-left: 24px
}

@media (max-width: 736px) {

.myresults-card img.arrow {
    height: 30px;
    width: 30px;
    margin-left: 8px
}
  }

.myresults-sample-time-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.myresults-sample-time-container button.hlx-button {
  padding: 0;
  max-width: 250px;
  margin-top: 40px;
  max-height: 24px;
  font-weight: 500;
  font-size: 16px;
}

@media (max-width: 736px) {

.statusTimelineButton {
    display: none
}
  }

.statusTimelineButton-mobile {
  display: none
}

@media (max-width: 736px) {

.statusTimelineButton-mobile {
    display: inline;
    text-align: left
}
  }

.dna-container {
  text-align: center;
  margin-top: 40px;
  width: 100%;
  margin-left: 80px
}

@media (max-width: 1024px) {

.dna-container {
    margin-left: 0
}
  }

@media screen and (max-width: 500px) {
  .dna-container {
    width: 335px;
  }
}

.dna-container .auth-container-module--copy {
  margin-bottom: 40px;
  margin-top: 16px;
}

.dna-container .dna-row {
  line-height: 1.63;
  text-align: left;
  display: flex;
  padding-top: 24px;
  padding-bottom: 24px;
  margin-left: 20px;
  margin-right: 20px;
  border-bottom: solid 1px var(--colorBorderGrey)
}

@media (max-width: 735px) {

.dna-container .dna-row {
    flex-direction: column
}
  }

.dna-container .dna-row:first-child {
  padding-top: 8px;
}

.dna-container .dna-row:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}

.dna-container .dna-row img {
  border-radius: 10px;
  height: 75px;
  width: 75px;
}

.dna-container .dna-row .dna-row-text {
  margin-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

@media (max-width: 735px) {

.dna-container .dna-row .dna-row-text {
    margin-left: 0;
    margin-top: 24px
}
  }

.dna-container .dna-row .dna-row-text h4 {
  font-size: var(--fontBodyCopyOne);
  font-weight: 500;
}

.dna-container .dna-row .dna-row-text p {
  font-size: var(--fontBodyCopyTwo);
  line-height: var(--lineHeightBodyCopyTwo);
}

.dna-container .consent-container {
  position: relative;
  text-align: left;
  display: flex;
  align-items: center;
  margin: 32px 12px 24px 12px;
}

.dna-container .consent-container p {
  margin-left: 25px;
}

.dna-container input {
  top: 3px;
  left: 0;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  position: absolute;
  -webkit-appearance: revert;
}

@media (max-width: 375px) {

.dna-container .error-confirm-container {
    margin: 20px
}
  }

.dna-container .error-confirm-container a {
  color: var(--colorLinkText);
}

.consent-title {
  background-color: var(--colorBackgroundTitle);
}

.consent-main {
  margin-top: 70px
}

@media screen and (max-width: 735px) {

.consent-main {
    margin-top: 40px
}
  }

.consent-root {
  max-width: 560px;
  display: inline;
}

@media screen and (max-width: 550px) {
  .consent-root {
    max-width: 475px;
  }
}

.consent-root .consent-container {
}

.constent-title-line {
  background-color: var(--colorBackgroundLine);
  height: 8px;
  width: 100%;
}

.consent-title h2 {
  font-weight: bold;
  padding: 24px 0 0 32px
}

@media screen and (max-width: 1024px) {

.consent-title h2 {
    line-height: 1.33;
    padding: 20px 0 0 20px
}
  }

@media screen and (max-width: 550px) {

.consent-title h2 {
    width: 100%;
    line-height: 1.33;
    padding: 20px 0 0 20px
}
  }

.consent-title h3 {
  font-weight: 500;
  padding: 24px 0 15px 32px
}

@media screen and (max-width: 1024px) {

.consent-title h3 {
    padding: 20px 0 15px 20px
}
  }

.consent-title h4 {
  font-weight: 500;
  font-size: var(--fontBodyCopyTwo);
  padding: 24px 0;
  margin: 0 32px;
  border-bottom: 1px solid var(--colorBorderGrey)
}

@media (max-width: 1024px) {

.consent-title h4 {
    margin: 0 20px
}
  }

.consent-title ul {
  list-style-position: inside;
  padding-bottom: 32px;
  position: relative;
}

.consent-root ul li::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--colorBasicText);
}

.consent-title ul li {
  position: relative;
  font-weight: 500;
  font-size: var(--fontBodyCopyTwo);
  border: none;
  margin: 16px 92px 0 52px
}

@media (max-width: 1024px) {

.consent-title ul li {
    margin: 16px 12px 0 40px
}
  }

.consent-title ul li:first-child {
  margin: 24px 10px 0 52px
}

@media (max-width: 1024px) {

.consent-title ul li:first-child {
    margin: 16px 12px 0 40px
}
  }

.consent-title ul li p {
  padding: 0;
}

.consent-title p {
  padding: 0 32px 32px 32px;
  font-size: var(--fontBodyCopyTwo);
  line-height: var(--lineHeightBodyCopyTwo)
}

@media (max-width: 735px) {

.consent-title p {
    padding: 0 20px 32px 20px
}
  }

.consent-disclaimer {
  margin: 40px 20px 24px 20px;
  font-size: 14px;
}

.consent-auth {
  padding: 32px;
  border-bottom: 1px solid var(--colorBorderGrey)
}

@media (max-width: 1024px) {

.consent-auth {
    padding: 20px
}
  }

.consent-auth p:last-child {
  padding-bottom: 0;
}

.consent-accordion {
  padding: 15px 32px;
  border-bottom: 1px solid var(--colorBorderGrey)
}

@media (max-width: 735px) {

.consent-accordion {
    padding: 15px 20px
}
  }

.consent-accordion div:last-child {
  border: none;
}

.consent-auth p {
  font-size: var(--fontBodyCopyTwo);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.63;
  padding-bottom: 16px;
}

ul.consent-disclaimer {
  list-style-position: inside;
  padding: 32px 32px 24px;
  margin: 0;
  font-size: var(--fontBreadcrumb)
}

@media (max-width: 1024px) {

ul.consent-disclaimer {
    padding: 32px 20px 24px
}
  }

ul.consent-disclaimer li {
  margin-bottom: 16px;
  margin-left: 20px;
  line-height: 24px;
  position: relative;
}

ul.consent-disclaimer li:last-child {
  margin-bottom: 0;
}

.platform-button {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (max-width: 400px) {

.platform-button .button {
    width: 100%;
    margin: 0 20px
}
  }

.platform-btn {
  width: 280px;
  height: 56px
}

@media (max-width: 400px) {

.platform-btn {
    width: 295px;
    margin: 0 20px
}
  }

.outlined-button {
  width: 220px;
  height: 56px
}

@media (max-width: 550px) {

.outlined-button {
    width: 150px
}
  }

.auth-button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly
}

@media (max-width: 1024px) {

.auth-button-container {
    align-items: center
}
  }

.auth-button-container .button {
  min-width: 260px
}

@media (max-width: 1024px) {

.auth-button-container .button {
    width: 85%;
    margin-bottom: 12px
}
  }


.accordion-container {
  border-bottom: 1px solid var(--colorBorderGrey);
}

.accordion-text {
  overflow: hidden;
  transition: height 0.2s ease-out;
  font-size: var(--fontBodyCopyTwo);
  line-height: var(--lineHeightBodyCopyTwo);
}

.accordion-content {
  display: flex;
}

.accordion-content .accordion-title {
  position: relative;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 25px 60px 16px 0;
  font-weight: 500;
  font-size: 17px;
  font-family: inherit;
  transition: color 0.2s linear;
  cursor: pointer;
  display: flex;
  align-items: center
}

@media (max-width: 1024px) {

.accordion-content .accordion-title {
    padding-right: 20px
}
  }

@media (max-width: 735px) {

.accordion-content .accordion-title {
    padding-right: 30px
}
  }

.accordion-content .accordion-title h4 {
  font-weight: 500;
  font-size: var(--fontBodyCopyOne);
  line-height: 30px;
}

.accordion-content .accordion-title:focus {
  outline: none;
}

.accordion-content .accordion-icon img {
  width: 34px;
  height: 70px;
  padding-top: 20px;
  padding-bottom: 15px;
}

.accordion-content .accordion-title::after,
.accordion-content .accordion-title::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 3px;
  margin-top: -2px;
  background-color: var(--colorBasicTextGrey);
}

.accordion-content .accordion-title::before {
  transform: rotate(-90deg);
  transition: transform 0.35s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.accordion-content[aria-expanded='true'] .accordion-title::before {
  transform: rotate(0deg);
}

.accordion-content__inner {
  overflow: hidden;
  will-change: height;
  transition: height 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.accordion-content__content {
  margin: 5px 25px 25px;
  font-size: 14px;
  color: var(--colorBorderGrey);
  opacity: 0;
  transition: opacity 0.3s linear 0.18s;
}

.accordion-content:not(:last-child) {
  margin-bottom: 3px;
}

.button-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-bottom: 40px;
}

.container-view {
  width: 932px;
  display: flex
}
@media screen and (max-width: 1024px) {
  .container-view {
    margin-top: 0;
    flex-wrap: wrap;
    width: 692px;
    justify-content: center
}
  }
@media screen and (max-width: 735px) {
  .container-view {
    width: 100%
}
  }

.kit-main {
  text-align: center;
  margin-top: 40px;
  width: 452px;
  margin-left: 80px
}

@media (max-width: 1024px) {

.kit-main {
    margin-left: 0
}
  }

@media screen and (max-width: 500px) {
  .kit-main {
    width: 335px;
  }
}

.kit-main h1 {
  font-weight: var(--fontNormalWeight);
}

.kit-main .kitSubHeadline {
  display: flex;
  justify-content: center;
}

.kit-main .kitSubHeadline h4 {
  margin-top: 16px;
  max-width: 452px;
  line-height: 26px
}

@media (max-width: 1024px) {

.kit-main .kitSubHeadline h4 {
    margin-left: 10px;
    margin-right: 10px
}
  }

.kit-main .card {
  padding: 40px 20px;
}

.kit-main .kit-error-message {
  margin-bottom: 24px;
}

.kit-main h2 {
  font-weight: var(--fontNormalWeight);
}

.kit-main h5 {
  font-weight: var(--fontSubtleWeight);
  margin-top: 32px;
}

.kit-main input {
  margin-top: 8px;
}

.kit-main .kit-button {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.kit-main .kit-button .btn {
  max-width: 280px;
}

.help-tooltip {
  display: flex;
  padding: 8px;
}

.kit-icon {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
}

.kit-icon img {
  margin-right: 6px;
}

.kit-icon p {
  color: #d42300;
}

.kit-icon-tube {
  display: flex;
  justify-content: center;
}

.kit-icon-tube img {
  margin-top: 26px;
  width: 396px;
  height: 92px
}

@media (max-width: 735px) {

.kit-icon-tube img {
    width: 295px;
    height: 68px
}
  }

.account-created-main {
  margin-top: 72px;
  margin-left: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

@media (max-width: 1024px) {

.account-created-main {
    margin-left: 0
}
  }

.sample-collection-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.account-created-main h1 {
  max-width: 400px;
  font-weight: var(--fontNormalWeight);
  margin-top: 40px;
}

.account-created-main h4 {
  margin-top: 16px;
  max-width: 532px
}

@media (max-width: 1024px) {

.account-created-main h4 {
    margin-left: 10px;
    margin-right: 10px
}
  }

.account-created-main button {
  margin-top: 38px;
  margin-bottom: 76px;
}


.introduction {
  text-align: center;
  padding-top: 70px;
  padding-left: 108px
}

@media (max-width: 1024px) {

.introduction {
    padding-top: 40px;
    padding-left: 0
}
  }

.introduction h1 {
  font-weight: var(--fontMiddleWeight);
}

.introduction-container p {
  max-width: 500px;
  font-size: 16px;
}

.icon-all {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}

.icon-container {
  display: flex;
  justify-content: center;
  max-width: 350px;
}

.icon-container img {
  margin: 15px;
  width: 85px;
  height: auto;
}

.skip-button {
  margin-top: 8px
}

@media (--media-medium) {

.skip-button {
    margin-top: 124px;
    margin-left: auto;
    margin-right: auto
}
  }

.action-bar {
  margin-top: 25px;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center
}

@media (max-width: 1024px) {

.action-bar {
    margin-left: 20px;
    margin-right: 20px
}
  }

.action-bar a {
  margin-top: 15px;
}

.icon-container {
  display: flex;
  flex-wrap: wrap
}

@media (--media-large) {

.icon-container {
    width: 328px;
    justify-content: center;
    margin-left: auto
}
  }

.icon {
  width: 75px;
  height: 75px
}

@media (--media-small) {

.icon {
    margin-top: 18px
}
  }

@media (--media-medium) {

.icon {
    margin-bottom: 40px;
    width: 70px;
    height: 70px
}
  }

@media (--media-large) {

.icon {
    width: 88px;
    height: 88px
}
  }

/* icons are left-aligned for small and medium screens */

@media (--media-medium-down) {

.icon:not(:last-child) {
    margin-right: 28px
}
  }

/* icons are center-aligned for large screens */

@media (--media-large) {

.icon:nth-of-type(2) {
    margin-left: 32px;
    margin-right: 32px
}
  }

@media (--media-large) {

.icon:nth-of-type(5) {
    margin-left: 32px
}
  }

.sample-collection-container {
  max-width: 560px;
  padding-left: 108px;
  padding-top: 70px;
  text-align: center
}

@media (max-width: 1024px) {

.sample-collection-container {
    padding-top: 40px;
    padding-left: 0
}
  }

.activation-container {
  margin: 0 20px;
}

h1.slide-header {
  font-weight: var(--fontMiddleWeight);
}

p.slide-copy {
  margin-top: 16px;
  font-size: var(--fontBodyCopyTwo);
}

.animation-container {
  display: flex;
  justify-content: center;
  position: relative;
}

.animation-container img {
  max-width: 350px;
  height: auto
}

@media (max-width: 1024px) {

.animation-container img {
    max-width: 300px
}
  }

.animation-container button {
  position: absolute;
  width: 36px;
  height: 36px;
  top: 50%;
}

.skip-button {
  margin-top: 20px;
}

button.button-previous {
  background-image: url('https://images.hlxcdn.com/registration/assets/arrow--left.svg');
  background-size: 100%;
  left: 0;
}

button.button-next {
  background-image: url('https://images.hlxcdn.com/registration/assets/arrow--right.svg');
  background-size: 100%;
  right: 0;
}

:root {
  --fontPageHeadline: 32px;
  --fontSectionHeadline: 28px;
  --fontSubheadline: 24px;
  --fontBodyCopyOne: 20px;
  --fontBodyCopyTwo: 16px;
  --fontBreadcrumb: 14px;
  --fontSmall: 8px;
  --fontNormalWeight: 700;
  --fontMiddleWeight: 600;
  --fontSubtleWeight: 500;
  --lineHeightBodyCopyTwo: 26px;
}

.inputField {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
}

span.link {
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  cursor: pointer;
}

@media screen and (min-width: 1024px) {

.login-container {
    display: flex
}
  }

.login-main {
  margin: 70px auto;
  text-align: center
}

@media screen and (max-width: 425px) {

.login-main {
    margin: 40px 0
}
  }

.login-main h1 {
  margin-bottom: 24px;
}

.headline {
  display: flex;
  justify-content: center;
  width: 90%;
}

.headline h2 {
  padding-bottom: 16px
}

@media (max-width: 735px) {

.headline h2 {
    width: 90%
}
  }

.login-button {
  width: 292px;
  height: 52px;
  border-radius: 3px;
  background: var(--colorButtonPrimary)
}

@media screen and (max-width: 425px) {

.login-button {
    margin: 0;
    width: 100%
}
  }

.copy {
  /* white-space: pre; */
  padding: 0 20px;
  font-size: 16px;
  font-size: var(--fontBodyCopyTwo);
  line-height: 26px;
  color: var(--colorBasicText);
}

.image-container {
  display: flex;
  height: 110px;
}

.image-container .image {
  margin: auto auto;
  max-height: 80px;
  width: 100%;
}

@media screen and (min-width: 1024px) {

.login-side {
    max-width: 300px
}
  }

.mychart-content {
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.mychart-content .header {
  margin: 0 auto 0 auto;
  width: 452px
}

@media (max-width: 735px) {

.mychart-content .header {
    width: 400px
}
  }

@media (max-width: 425px) {

.mychart-content .header {
    width: 330px
}
  }

.mychart-content .header h1 {
  margin-bottom: 16px;
}

.sign-in-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 452px;
  text-align: center;
  margin: 30px 32px
}

@media (max-width: 735px) {

.sign-in-card {
    width: 400px
}
  }

@media (max-width: 425px) {

.sign-in-card {
    width: 330px;
    margin: 40px 20px
}
  }

.sign-in-card .hlx-error {
  text-align: left;
  margin: 0 16px;
  margin-bottom: 25px;
}

.sign-in-card form {
  width: 100%;
}

.sign-in-card .headline-redirect {
  padding-top: 40px;
  display: flex;
  justify-content: center;
}

.sign-in-card .headline-redirect h2 {
  max-width: 380px;
}

.sign-in-card .copy-wrapper {
  display: flex;
  justify-content: center;
}

.sign-in-card .copy-wrapper .copy {
  max-width: 446px;
}

.select-another {
  color: var(--colorHyperlinkActive);
}

.sign-up-with-email {
  padding: 0;
}

.kit-input {
  width: 100%;
  padding: 0 32px;
  margin-bottom: 20px
}

@media (max-width: 735px) {

.kit-input {
    padding: 0 20px
}
  }

h5 {
  font-weight: 500;
  font-weight: var(--fontSubtleWeight);
  margin-top: 32px;
  text-align: left;
}

.error-wrap {
  padding: 32px 20px 0 20px;
}

.link {
  color: var(--colorHyperlinkActive);
}

.continue {
  padding-bottom: 16px;
}

.phone-number-container-module--phone-number-main {
  margin-top: 70px;
  max-width: 532px;
  padding: 0 20px;
  justify-self: right;
  margin-bottom: 50px
}

@media screen and (max-width: 1024px) {

.phone-number-container-module--phone-number-main {
    justify-self: center;
    margin-bottom: 20px
}
  }

.phone-number-container-module--phone-number-main-centered {
  justify-self: center;
}

.phone-number-container-module--phone-number-main .phone-number-container-module--header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone-number-container-module--phone-number-main h1 {
  text-align: center;
}

.phone-number-container-module--phone-number-main .phone-number-container-module--header p {
  text-align: center;
  max-width: 532px;
}

.phone-number-container-module--phone-number-main .phone-number-container-module--banner {
  margin: 24px 0;
}

.phone-number-container-module--phone-number-main .phone-number-container-module--error-message {
  margin-bottom: 24px;
}

.phone-number-container-module--phone-number-card {
  margin: 32px 0;
  padding: 40px 32px
}

@media screen and (max-width: 736px) {

.phone-number-container-module--phone-number-card {
    padding: 40px 20px
}
  }

.phone-number-container-module--phone-number-card .phone-number-container-module--header {
  text-align: center;
}

.phone-number-container-module--sub-header {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 32px;
  max-width: 358px
}

@media screen and (max-width: 736px) {

.phone-number-container-module--sub-header {
    padding: 0;
    padding-bottom: 32px
}
  }

.phone-number-container-module--phone-number-card form .phone-number-container-module--input {
  margin-bottom: 32px;
}

.phone-number-container-module--phone-number-card .phone-number-container-module--button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.phone-number-container-module--profile-security-update-password-modal .phone-number-container-module--modal-container form .phone-number-container-module--button button {
  max-width: 280px;
}

.phone-number-container-module--phone-number-card .phone-number-container-module--button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.phone-number-container-module--phone-number-card .phone-number-container-module--button button {
  max-width: 280px;
}

.phone-number-container-module--radio-button-label {
  font-family: TTNorms, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.phone-number-container-module--resend-code {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  color: var(--colorHyperlinkActive);
}

.phone-number-container-module--auth-tooltip-container {
  position: relative;
  display: inline;
}


.mfa-pick-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: auto;
}

@media screen and (max-width: 500px) {
  .mfa-pick-container {
    width: 335px;
  }
}

.mfa-pick-main {
  width: 100%;
  max-width: 452px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 16px;
}

.mfa-pick-main h1 {
  text-align: center;
  margin-top: 72px;
  margin-bottom: 32px;
}

@media (max-width: 735px) {

.mfa-pick-main h2 {
    width: 90%
}
  }

.mfa-pick-main form {
  width: 90%;
}

.mfa-pick-main .body5 .radio-label {
  padding-bottom: 16px;
}

.radio-label {
  text-align: left;
}

.mfa-pick-main .submit-button {
  margin-top: 32px;
  margin-bottom: 24px;
}

.auth-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 452px;
  text-align: center;

  /* The margin below overrides the global card margin */
  margin: 0 4px
}

@media (max-width: 735px) {

.auth-method-card {
    width: 400px
}
  }

@media (max-width: 425px) {

.auth-method-card {
    width: 330px
}
  }

.auth-method-card .mfa-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-method-card .copy {
  /* white-space: pre; */
  padding: 16px 0;
  font-size: var(--fontBodyCopyTwo);
  line-height: 26px;
  color: var(--colorBasicText);
}

.auth-method-card .back-button {
  justify-content: center;
}

.mfa-pick-modal{

}

.mfa-pick-modal h2{
  margin-bottom: 16px;
}

.mfa-pick-modal p{
  margin-bottom: 16px;
}

.mfa-pick-modal .button-wrapper{
  display: flex;
  justify-content: center;
}

.mfa-pick-modal button{
  max-width: 280px;
  align-items: center;
}

.mfa-pick-modal .resend-code {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  color: var(--colorHyperlinkActive);
}

.tooltip-container {
  position: relative;
  
}