@import "vars.css";
@import "fonts.css";
* {
  box-sizing: border-box;
}

*,
*:focus,
*:hover {
  outline: none;
}

html,
body,
.layout-container {
  margin: 0;
}

body {
    font-family: Inter;
    box-sizing: border-box;
    font-style: normal;
    font-size: 16px;
    color: var(--text-text-primary);
    background: url('https://prgb2chtmltemplates.blob.core.windows.net/customlayoutvirgin/nexusblue/images/backgroundlines.svg') right 40px center repeat-y,#FAFAFA;
}

.viewport {
  background-color: #fff;
	color: var(--text-text-primary);
  min-height: 300px;
  max-width: 480px;
  position: relative;
  width: 100%;
}

.layout-container {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 185px);
}

.layout-container_watermark {
  top: -45rem;
  right: -39rem;
  z-index: -1;
  opacity: 0.2;
  height: 1108px;
  width: 100%;
  position: absolute;
}

.layout-container__header {
  width: 96%;
  width: 100%;
  display: inline-block;
  margin-bottom: 0.5em;
}

.layout-container__header-logo_container,
layout-container--side-banner__header-logo_container {
  width: 1300px;
}

.layout-container__header-logo_container {
  margin: 60px auto 0;
}

.logo {
    background: url(https://prgb2chtmltemplates.blob.core.windows.net/customlayoutvirgin/nexusblue/images/logo.svg) top center no-repeat;
    background-size: contain;
    display: block;
    width: 206px;
    height: 72px;
}

.layout-container__main-content.viewport {
  box-shadow: 0px 16px 40px 0px rgba(29, 58, 83, 0.05);
}

.layout-container__main-content {
  margin: 0 auto;
  padding: 32px;
}

.intro {
  max-width: 900px;
}

.h1,
h1 {
    font-family: "Virgin Money Sans";
    color: #E10A0A;
    font-size: 24px;
    font-weight: 700;
}

.h4,
h4 {
  font-size: 20px;
  font-weight: 700;
}

#attributeList ul {
  margin-left: 0;
  padding-left: 0;
}

#attributeList ul li {
  list-style: none;
}
/**/

    #attributeList ul li .helpLink, button#cancel,
    .error.itemLevel {
        display: none;
    }

#attributeList ul li .helpLink,
.error.itemLevel {
  display: none;
}

.entry {
  margin-top: 24px;
}
.entry-item,
.localAccount button#next {
  margin-top: 1em;
}

.attrEntry ul,
#attributeList ul ul {
  max-width: 325px;
  margin-top: 10px;
}

.attrEntry,
.code,
.number {
  margin: 0 0 35px 0;
}

.attrEntry > div {
  /*margin-bottom: 3em;*/
}

input {
  font-weight: 400;
  font-size: 14px;
  font-family:inter;
}

::placeholder {
  color: #a5b0ba;
}

input[type="text"],
input[type="numeric"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
    line-height: 2em;
    padding-left: 1em;
    border: #DFE3E6 2px solid;
    height: 48px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select {
  width: 100%;
}

input:focus-visible {
    border: 2px solid #6D7173;
    box-shadow: 0 2px 4px #DFE3E6;
}

.localAccount button#next {
  margin-top: 24px;
  margin-bottom: 48px;
}

.buttons {
    width: 0;
}

    .buttons button {
        font-family: Inter;
        background-color: var(--colour-brand-red);
        color: var(--colour-brand-white);
        font-weight: 700;
        margin-left: 0;
        height: auto;
        min-height: 56px;
        display: flex;
        min-width: 200px;
        padding: 16px 32px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .buttons button:hover {
        background-color: #E10A0A;
        box-shadow: 0px 4px 16px 0px rgba(0, 194, 162, 0.1);
    }

.buttons button[id="continue"]:disabled,
.buttons button[id="cancel"] {
  border: 2px solid #1E2332;
  background-color: #fff;
  color: #1E2332;
  /*margin-top: 10px;*/
}

.buttons #continue:disabled,
.buttons .disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

button[class*="Button"],
button[class*="Code"] {
  margin: 2em 0.5em 0 0;
}

.abuttons {
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  min-width: 240px;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  width: auto;
  min-width: 15em;
  background-color: #e5007e;
}

/* Add space between email address and the verification code fields */
.buttons.verify {
  margin-top: 3.5em;
}

#email_ver_but_resend,
#emailVerificationControl_but_send_new_code {
  background-color: #fff;
  border: solid 2px #000;
  color: #000;
}

.verifying-modal {
  background-color: #fff;
  border: solid 2px #000;
}

/* Add some space between the 'Send code' and 'Call me' buttons */
#verifyCode {
  margin-top: 30px;
  margin-right: 30px;
}

#verifyPhone {
  border: 2px solid #1E2332;
  background-color: #fff;
  color: #1E2332;
}

.phoneNumber > .number {
  margin-top: 5px;
  font-weight: bold;
}

/* Hide the country code selector */
/*#phoneEntry > .input > .code {
    display: none;
}*/

input[type="submit"],
button,
input[type="button"],
a.button {
  border: 0;
  -webkit-appearance: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -moz-user-select: none;
  display: inline-block;
  padding: 0.75em 1.15em;
  font-size: 1em;
}

label {
  width: 100%;
  font-weight: 600;
  margin-bottom: 0.25em;
  display: inline-block;
}

.error.itemLevel p {
    display: flex;
    padding: 6px 16px;
    	background-color: var(--color-back-error);
    z-index: 1;
    word-break: break-word;
    white-space: normal;
    margin: 8px 0 4px 0;
    color: #E10A0A;
    font-size: 14px;
}

.error.pageLevel{
    display: flex;
    font-family: Inter;
    font-size: 14px;
	background-color: var(--color-back-error);
    display: flex;
    padding: 6px 16px;
    font-weight: 400;
	color: var(--colour-text-error);
}
#emailVerificationControl_error_message {
    font-family: Inter;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 16px;
    font-weight: 400;
	background-color: var(--color-back-error);
	color: var(--colour-text-error);
}

#emailVerificationControl_error_message[aria-hidden="false"] {
  display: inline-block !important;
}

.error.pageLevel p {
  margin: 0;
}

a:not([class]) {
  color: inherit;
  text-decoration: underline;
}

/* Hide the modal because it doesn't work properly */
.verifying-modal {
  display: none;
}

.verificationInfoText[aria-hidden="false"],
.verificationSuccessText[aria-hidden="false"],
.verificationErrorText[aria-hidden="false"] {
  display: block !important;
  min-width: 30vw;
}

/* Format the 'send a new code' link like the label it sits alongside */
a#retryCode {
  cursor: pointer;
  font-size: 15px;
  padding-left: 6px;
}

#codeVerification > .actionLabel > label {
  width: auto;
}

.process-container {
  margin: 3rem 0;
}

.process-container {
    display: flex;
    background: transparent url("https://prgb2chtmltemplates.blob.core.windows.net/customlayoutvirgin/nexusblue/images/login-steps-background.svg") no-repeat center 55px;
    background-size: 100% auto;
    max-width: 1000px;
}

@media (max-width: 640px) {
  .process-container {
    margin: 2.5rem 0;
  }
}

.process-step {
  width: 25%;
  font-size: 13px;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: bold;
  margin: 0 auto;
  text-align: center;
  padding: 0 1.5rem;
}

.process-step img {
  max-width: 100%;
}

.alternate-background {
  margin: 0 -20px -50px;
  padding: 20px;
  background: #e7f7fb;
}

.grid {
    color: #1E2332;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding-left:18px
}

@media (max-width: 1350px) and (min-width: 641px) {
  .layout-container__header-logo_container-logo_header {
    margin-left: 30px;
  }

  .layout-container__main-content {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 792px) {
  .layout-container_watermark {
    top: -14rem;
    right: -12rem;
  }

  h1 {
    font-size: 24px;
  }

  .layout-container__main-content {
    padding: 30px;
  }
}

@media (max-width: 640px) {
  .layout-container__main-content {
    padding: 30px 15px;
  }

  .verificationInfoText[aria-hidden="false"],
  .verificationErrorText[aria-hidden="false"] {
    min-width: 85vw;
  }
}

@media (max-width: 640px) {
  .layout-container__header-logo_container-logo_header {
    width: 190px;
  }

  .layout-container__header-logo_container-logo_header {
    margin-left: 15px;
  }

  .layout-container__main-content {
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
  }
}

@media (max-width: 640px) {
  #attributeList,
  #phoneEntry,
  #codeVerification,
  .entry-item {
    width: 100%;
  }

  .verificationInfoText[aria-hidden="false"],
  .verificationErrorText[aria-hidden="false"] {
    min-width: 90vw;
  }

  a#forgotPassword,
  a#retryCode {
    left: 15px;
  }
}

@media (min-width: 992px) {
  .process-container {
    margin: 2.5rem 0;
  }
}

@media (max-width: 640px) {
  .layout-container__header-logo_container-logo_header {
    width: 190px;
  }

  .process-container {
    display: inline-block;
    background: transparent
      url("https://www.onefamily.com/assets/consumer/images/bg-images/icon-down-pink.svg")
      no-repeat center;
  }

  .process-step {
    width: 50%;
    float: left;
  }

  .process-step p {
    min-height: 4rem;
    margin: 0.5rem auto 1rem;
  }

  .layout-container__header-logo_container-logo_header {
    margin-left: 15px;
  }

  .layout-container__main-content {
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
  }
}


.CaptchaControl.entry-item {
    margin-bottom: 20px;
}

.captcha-control-buttons button {
    cursor: pointer
}

.captcha-switch-icon.captcha-visual-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" /> <path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z" clip-rule="evenodd" /> </svg> ') no-repeat center;
}

.captcha-switch-icon.captcha-audio-small {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z" /> <path d="M15.932 7.757a.75.75 0 0 1 1.061 0 6 6 0 0 1 0 8.486.75.75 0 0 1-1.06-1.061 4.5 4.5 0 0 0 0-6.364.75.75 0 0 1 0-1.06Z" /> </svg> ') no-repeat center;
}

#captchaControlChallengeCode-audio-playbtn {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" /> </svg>') no-repeat center;
    cursor: pointer;
}

.captcha-refresh-icon {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path fill-rule="evenodd" d="M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z" clip-rule="evenodd" /> </svg> ') no-repeat center;
}