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

    REGISTRATION STEPS

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

.nbuxRegistration .three-stage-bar,
.nbuxRegistration .four-stage-bar {
    max-width: 486px;
    width: 100%;
    border: none;
    padding: 0;
    margin: 24px auto calc(var(--gutter) * 2);
}

.nbuxRegistration .ui-tabs-nav {
    padding: 0;
    min-height: 66px;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
}

.nbuxRegistration .three-stage-bar .ui-tabs-nav {
    display: grid;
    grid-template-columns: 28.5% 43% 28.5%;
    grid-auto-flow: column;
    align-items: center;
    width: 100%;
    min-height: inherit;
    padding: 0 var(--gutter);
    margin: 0;
}

.nbuxRegistration .four-stage-bar .ui-tabs-nav {
    display: grid;
    grid-template-columns: 22.5% 27.5% 27.5% 22.5%;
    grid-auto-flow: column;
    align-items: center;
    width: 100%;
    min-height: inherit;
    padding: 0 var(--gutter);
    margin: 0;
}

@media screen and (min-width: 360px) {
    .nbuxRegistration .four-stage-bar .ui-tabs-nav {
        grid-template-columns: 22.5% 27.5% 27.5% 22.5%;
    }
}

@media screen and (min-width: 400px) {
    .nbuxRegistration .four-stage-bar .ui-tabs-nav {
        grid-template-columns: 21.25% 28.75% 28.75% 21.25%;
    }
}

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

    -- Override Old Stylings Not Needed

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

.nbuxRegistration .ui-state-default.ui-tabs-active.visited span {
    background: none;
}

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

    -- Old Line Divider & <a> link

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

.nbuxRegistration .ui-tabs-nav #sectionLine,
.nbuxRegistration .ui-tabs-nav .ui-state-default a {
    display: none;
}

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

    -- Line Divider | Cash | 3 Steps

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

.nbuxRegistration .three-stage-bar #ui-breadcrumb-1:after,
.nbuxRegistration .three-stage-bar #ui-breadcrumb-2:before,
.nbuxRegistration .three-stage-bar #ui-breadcrumb-2:after,
.nbuxRegistration .three-stage-bar #ui-breadcrumb-3:before {
    content: "";
    position: absolute;
    height: 1px;
    bottom: 15px;
    border-top: 2px solid var(--color-grey-200);
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-1:after {
    left: 56px;
    width: calc(100% - 56px);
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-2:before {
    left: 0;
    width: calc(50% - 24px);
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-2:after {
    right: 0;
    width: calc(50% - 24px);
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-3:before {
    right: 56px;
    width: calc(100% - 56px);
}

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

    -- Line Divider | Cash Breadcrumb 1 Visited

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

.nbuxRegistration .three-stage-bar #ui-breadcrumb-1.visited:after,
.nbuxRegistration .three-stage-bar #ui-breadcrumb-2.ui-tabs-active:before {
    border-top: 2px solid var(--color-success);
}

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

    -- Line Divider | Cash Breadcrumb 2 Visited

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

.nbuxRegistration .three-stage-bar #ui-breadcrumb-2.visited:after,
.nbuxRegistration .three-stage-bar #ui-breadcrumb-3.ui-tabs-active:before {
    border-top: 2px solid var(--color-success);
}

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

    -- Line Divider | Credit Breadcrumb 1 Visited

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

.nbuxRegistration .four-stage-bar #ui-breadcrumb-1.visited:after,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-2.ui-tabs-active:before {
    border-top: 2px solid var(--color-success);
}

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

    -- Line Divider | Credit Breadcrumb 2 Visited

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

.nbuxRegistration .four-stage-bar #ui-breadcrumb-2.visited:after,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-3.ui-tabs-active:before {
    border-top: 2px solid var(--color-success);
}

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

    -- Line Divider | Credit Breadcrumb 3 Visited

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

.nbuxRegistration .four-stage-bar #ui-breadcrumb-3.visited:after,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-4.ui-tabs-active:before {
    border-top: 2px solid var(--color-success);
}

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

    -- Line Divider | Credit | 4 Steps

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

.nbuxRegistration .four-stage-bar #ui-breadcrumb-1:after,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-2:before,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-2:after,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-3:before,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-3:after,
.nbuxRegistration .four-stage-bar #ui-breadcrumb-4:before {
    content: "";
    position: absolute;
    height: 1px;
    bottom: 15px;
    border-top: 2px solid var(--color-grey-200);
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-1:after {
    left: 56px;
    width: calc(100% - 56px);
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-2:before {
    left: 0;
    width: calc(50% - 24px);
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-2:after {
    right: 0;
    width: calc(50% - 24px);
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-3:before {
    left: 0;
    width: calc(50% - 24px);
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-3:after {
    right: 0;
    width: calc(50% - 24px);
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-4:before {
    right: 56px;
    width: calc(100% - 56px);
}

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

    -- List Content

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

.nbuxRegistration .ui-tabs-nav .ui-state-default span,
.nbuxRegistration .ui-tabs-nav .ui-tabs-active span {
    height: inherit;
    width: inherit;
    background-color: transparent;
    border: none!important;
}

.nbuxRegistration .ui-tabs-nav .ui-state-default span {
    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);
}

.nbuxRegistration .ui-tabs-nav .ui-state-default span:after {
    content: "";
    position: relative;
    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;
}

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

    -- List 3 Column Numbers

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

.nbuxRegistration .three-stage-bar .ui-tabs-nav li {
    position: relative;
    flex-flow: column nowrap;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-1 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-3 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-1 span {
    min-width: 64px;
    grid-column: 1;
    grid-row: 1;
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-2 span {
    grid-column: 2;
    grid-row: 1;
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-3 span {
    min-width: 64px;
    grid-column: 2;
    grid-row: 1;
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-1 span:after {
    content: "1";
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-2 span:after {
    content: "2";
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-3 span:after {
    content: "3";
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-1 span:before {
    content: "Details";
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-2 span:before {
    content: "Account";
}

.nbuxRegistration .three-stage-bar #ui-breadcrumb-3 span:before {
    content: "Address";
}

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

    -- List 4 Column Numbers

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

.nbuxRegistration .four-stage-bar .ui-tabs-nav li {
    position: relative;
    flex-flow: column nowrap;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-1 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-3 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-4 {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-1 span {
    min-width: 64px;
    grid-column: 1;
    grid-row: 1;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-2 span {
    grid-column: 2;
    grid-row: 1;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-3 span {
    grid-column: 2;
    grid-row: 1;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-4 span {
    min-width: 64px;
    grid-column: 2;
    grid-row: 1;
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-1 span:after {
    content: "1";
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-2 span:after {
    content: "2";
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-3 span:after {
    content: "3";
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-4 span:after {
    content: "4";
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-1 span:before {
    content: "Details";
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-2 span:before {
    content: "Account";
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-3 span:before {
    content: "Address";
}

.nbuxRegistration .four-stage-bar #ui-breadcrumb-4 span:before {
    content: "Apply";
}

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

    -- List Active | Visited

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

.nbuxRegistration .ui-tabs-active span:before {
    font-weight: 600;
}

.nbuxRegistration .ui-tabs-nav .ui-tabs-active span:after {
    color: var(--color-success);
    border: 2px solid var(--color-success);
}

.nbuxRegistration .ui-tabs-active.visited span:before {
    font-weight: 400;
}

.nbuxRegistration .ui-tabs-active.visited span:after {
    content: ""!important;
    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);
}