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

    REGISTRATION STEPS

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

.registrationSteps {

    max-width: 486px;
    width: 100%;
    border: none;
    padding: 0;
    margin: 0 auto calc(var(--gutter) * 2);
}

.registrationSteps__list {
    display: grid;
    grid-template-columns: 31% 38% 31%;
    grid-auto-flow: column;
    align-items: center;
    width: 100%;
    padding: 0 var(--gutter);
    margin: 0;
}

@media screen and (min-width: 360px) {
    .registrationSteps__list {
        grid-template-columns: 30% 40% 30%;
    }
}

@media screen and (min-width: 400px) {
    .registrationSteps__list {
        grid-template-columns: 28.5% 43% 28.5%;
    }
}

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

    -- List Items

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

.registrationSteps__list li {
    position: relative;
    flex-flow: column nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.registrationStep__one {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
}

.registrationStep__two {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.registrationStep__three {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
}

.registrationStep__one:after {
    position: absolute;
    bottom: 15px;
    left: 56px;
    height: 1px;
    width: calc(100% - 56px);
}

.registrationStep__two:before {
    position: absolute;
    bottom: 15px;
    left: 0;
    height: 1px;
    width: calc(50% - 24px);
}

.registrationStep__two:after {
    position: absolute;
    bottom: 15px;
    right: 0;
    height: 1px;
    width: calc(50% - 24px);
}

.registrationStep__three:before {
    position: absolute;
    bottom: 15px;
    right: 56px;
    height: 1px;
    width: calc(100% - 56px);
}


.registrationStep__one:after,
.registrationStep__two:before,
.registrationStep__two:after,
.registrationStep__three:before {
    content: "";
    border-top: 2px solid var(--color-grey-200);
}

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

    -- List Text

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

.registrationStep__text {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    color: var(--color-grey-400);
}

.registrationStep__text:after {
    content: "";
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    font-weight: 600;
    color: var(--color-grey-400);
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-grey-200);
    border-radius: 56px;
    background-color: var(--color-white);
    margin: calc(var(--gutter, 16px) / 2) 0 0;
}

.registrationStep__one .registrationStep__text {
    min-width: 64px;
    grid-column: 1;
    grid-row: 1;
}

.registrationStep__two .registrationStep__text {
    grid-column: 2;
    grid-row: 1;
}

.registrationStep__three .registrationStep__text {
    min-width: 64px;
    grid-column: 2;
    grid-row: 1;
}

.registrationStep__one .registrationStep__text:after {
    content: "1";
}

.registrationStep__two .registrationStep__text:after {
    content: "2";
}

.registrationStep__three .registrationStep__text:after {
    content: "3";
}

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

    -- Step Changes - 1 A

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

.registrationSteps__list_oneA .registrationStep__one .registrationStep__text {
    font-weight: 600;
}

.registrationSteps__list_oneA .registrationStep__one .registrationStep__text:after {
    color: var(--color-success);
    border: 2px solid var(--color-success);
}

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

    -- Step Changes - 1 B

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

.registrationSteps__list_oneB .registrationStep__one:after {
    border-top: 2px solid var(--color-success);
}

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

    -- Step Changes - 2

------------------------------------------ */
.registrationSteps__list_two .registrationStep__two:before {
    border-top: 2px solid var(--color-success);
}

.registrationSteps__list_two .registrationStep__two .registrationStep__text {
    font-weight: 600;
}

.registrationSteps__list_two .registrationStep__one .registrationStep__text {
    font-weight: 400;
}

.registrationSteps__list_two .registrationStep__one .registrationStep__text:after {
    content: "";
    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, #208636);
}

.registrationSteps__list_two .registrationStep__two .registrationStep__text:after {
    color: var(--color-success);
    border: 2px solid var(--color-success);
}

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

    -- Step Changes - 3

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

.registrationSteps__list_three .registrationStep__three .registrationStep__text {
    font-weight: 600;
}

.registrationSteps__list_three .registrationStep__one .registrationStep__text,
.registrationSteps__list_three .registrationStep__two .registrationStep__text {
    font-weight: 400;
}

.registrationSteps__list_three .registrationStep__two .registrationStep__text:after {
    content: "";
    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);
}

.registrationSteps__list_three .registrationStep__three .registrationStep__text:after {
    color: var(--color-success, #208636);
    border: 2px solid var(--color-success);
}

.registrationSteps__list_three .registrationStep__two:after,
.registrationSteps__list_three .registrationStep__three:before {
    border-top: 2px solid var(--color-success);
}