/* ------------------------------------------

    COMPLETE

------------------------------------------ */

.registrationCompleteBox {
    display: flex;
    flex-flow: column;
    background-color: var(--color-white);
    border-radius: 0;
    box-shadow: var(--elevation-1, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16));
    padding: 24px var(--gutter) 0;
    margin: 0 0 var(--gutter);
}

@media screen and (min-width: 488px) {
    .registrationCompleteBox {
        border-radius: var(--shape-4);
    }
}

/* ------------------------------------------

    -- Account Confirmation

------------------------------------------ */

.account__confirmation {
    display: flex;
    flex-flow: column;
    margin: 0 0 24px;
}

.account__confirmation h1 {
    margin: 0 0 var(--gutter);
}

.account__confirmation_success h1 {
    display: flex;
    flex-flow: column;
    align-items: center;
    font-size: var(--font-headline-font-size)!important;
    line-height: var(--font-headline-line-height);
}

.account__confirmation_success h1:before {
    content: "";
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-success);
    border-radius: 56px;
    margin: 0 0 var(--gutter);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.762 20c-.272 0-.532-.111-.72-.307l-5.763-5.997a1 1 0 1 1 1.442-1.386l5.006 5.21 11.52-13.178a1 1 0 0 1 1.506 1.316l-12.238 14a1.003 1.003 0 0 1-.73.342h-.023' fill='%23FFF' fill-rule='evenodd'/%3e%3c/svg%3e ");
    background-color: var(--color-success);
}

.account__confirmation p {
    font-size: var(--font-body-font-size)!important;
    line-height: var(--font-body-line-height);
    margin: 0 0 var(--gutter);
}

.account__confirmation p:last-of-type {
    margin: 0;
}

.account__confirmation_success p {
    text-align: center;
    margin: 0 0 var(--gutter);
}

.account__confirmation_success p:last-child {
    margin: 0;
}

.accountEmailAddress {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.nbuxAlert__information_temporaryCreditFacility {
    margin: var(--gutter) 0 0;
}

/* ------------------------------------------

   -- Account Details

------------------------------------------ */

.accountDetails {
    display: flex;
    flex-flow: column;
    margin: 0 0 var(--gutter);
}

.accountDetails p {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-flow: column;
    column-gap: 16px;
    padding: var(--gutter) 0;
    margin: 0;
    border-bottom: 1px solid var(--color-grey-200);
}

.accountDetails p:first-child {
    grid-template-columns: minmax(50%, 1fr) 1fr;
}

.accountDetails p span:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    text-align: left;

}

.accountDetails p span:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

.accountDetails p:last-of-type {
    border-bottom: 0;
}

/* ------------------------------------------

    -- Alert - What to do now

------------------------------------------ */

.mitek {
    margin: 0 var(--gutter) var(--gutter);
    padding: calc(var(--gutter) / 2) 0 0;
}

.mitek h2 {
    margin: 0 0 var(--gutter);
}

.nbuxAlert__information_mitek ol {
    counter-reset: item;
    margin: 0;
    padding: 0;
}

.nbuxAlert__information_mitek li {
    display: flex;
    flex-flow: row;
    list-style: none;
    margin: 0 0 24px;
}

.nbuxAlert__information_mitek li:last-of-type {
    margin: 0;
}

.nbuxAlert__information_mitek li:before {
    content: counter(item);
    counter-increment: item;
    display: flex;
    font-size: var(--font-body-small-font-size)!important;
    line-height: var(--font-body-small-line-height);
    font-weight: 700;
    color: var(--color-black);
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    margin: 0 12px 0 0;
    border: 2px solid var(--color-grey-400);
    border-radius: 24px;
}

/* ------------------------------------------

    -- Alert - What to do now

------------------------------------------ */

.nbuxAlert__danger_error {
    margin: calc(var(--gutter) / 2) var(--gutter) var(--gutter);
}