@import "vars.css";
@import "fonts.css";

a#forgotPassword {
    position: absolute;
    color: var(--colour-brand-red);
    font-family: 500;
    bottom: 40px;
    left: 40px;
    cursor: pointer;
}

#loginTrouble {
  position: absolute;
  bottom: 20px;
  left: 14em;
  cursor: pointer;
  border-left: 1px solid #1e193e;
  padding-left: 1em;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
}

.modal-content {
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  width: 94%;
  max-width: 650px;
  transform: translate(-50%, -50%);
  max-height: 100%;
}

.modal-close {
  float: right;
  cursor: pointer;
}

    .modal-close::before {
        content: "_";
        color: #fff;
        margin-top: 3px;
        font-weight: bold;
        display: inline-block;
        width: 15px;
        height: 20px;
        background: url(https://prgb2chtmltemplates.blob.core.windows.net/customlayoutvirgin/nexusblue/images/times-solid.svg) 0 center no-repeat;
    }

.modal ol {
  max-width: 700px;
  counter-reset: num-counter;
  list-style: none;
  padding-left: 40px;
}

.modal ol li {
  margin: 0 15px 1.5rem 0;
  counter-increment: num-counter;
  position: relative;
  padding-left: 5px;
}

.modal ol li::before {
  content: counter(num-counter);
  color: #fff;
  font-size: 1.3rem;
  font-weight: bold;
  position: absolute;
  --size: 36px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: #0e7196;
   text-align: center;
}

.modal ol a {
  color: #e5007e;
}

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

#next {
    width:100%
}

#bodyfooter {
    margin: 24px auto;
    max-width: 480px;
    background-color: #EEEEEE;
}

.loginfoot {
    display: flex;
    max-width: 480px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: rgba(29, 58, 83, 0.05);
}

    .loginfoot p {
        color: var(--text-text-primary);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px; /* 155.556% */
        margin: 0;
    }

    .loginfoot div {
        color: var(--text-text-primary);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
    }

    .loginfoot a {
        color: var(--colour-brand-red);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        text-decoration-line: underline;
    }

@media (max-width: 640px) {
    #bodyfooter {
        margin: 15px;
        max-width: 480px;
    }
}