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

    BACK BUTTON

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

.registrationBack {
    background: transparent;
    max-width: 486px;
    width: 100%;
    border: none;
    padding: 0 var(--gutter);
    margin: 0 auto;
}

a.nbuxButton.registrationBackButton {
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    font-weight: 700;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0;
    padding: 0;
    background-color: transparent;
    color: var(--color-information);
    text-decoration: underline!important;
}

a.nbuxButton.registrationBackButton:hover,
a.nbuxButton.registrationBackButton:active {
    background-color: transparent;
}

a.nbuxButton.registrationBackButton:before {
    content: "";
    margin: 0 calc(var(--gutter) / 2) 0 0;
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    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='M21 11H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 13H21a1 1 0 0 0 0-2' fill='%23252525' fill-rule='evenodd'/%3e%3c/svg%3e");
}


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

    REGISTRATION BUTTONS

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

.nbuxButton.continueApplication,
.nbuxButton.cancelApplication,
.nbuxButton.declineApplication,
.nbuxButton.startShopping,
.nbuxButton.gotoAccount,
.nbuxButton.gotoCheckout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    font-weight: 700;
    margin: 0;
    padding: 0 var(--gutter);
}

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

    -- Button - Continue

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

.nbuxButton.continueApplication,
a.nbuxButton_solid.startShopping {
    grid-column: 1;
    grid-row: 1;
    background-color: var(--color-success);
    color: var(--color-white);
    border: 1px solid var(--color-success);
}

a.nbuxButton_solid.startShopping.nbuxButton_declined {
    grid-column: 1 / -1;
    grid-row: 1;
    background-color: var(--color-success);
    color: var(--color-white, #fefefe);
    border: 1px solid var(--color-success);
}

.nbuxButton.continueApplication:hover,
a.nbuxButton_solid.startShopping:hover {
    background-color: var(--color-success-background-hover-color);
    border: 1px solid var(--color-success-background-hover-color);
}

.nbuxButton.continueApplication:active,
a.nbuxButton_solid.startShopping:active {
    background-color: var(--color-success);
    border: 1px solid var(--color-success);
}

@media screen and (min-width: 768px) {
    .nbuxButton.continueApplication,
    a.nbuxButton_solid.startShopping {
        grid-column: 2;
        grid-row: 1;
    }
}

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

    -- Button - Go To My Account / Checkout

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

a.nbuxButton_solid.gotoAccount,
a.nbuxButton_solid.gotoCheckout {
    grid-column: 1;
    grid-row: 2;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}

a.nbuxButton_solid.gotoAccount:hover,
a.nbuxButton_solid.gotoCheckout:hover {
    background-color: var(--color-grey-100);
    border: 1px solid var(--color-black);
}

a.nbuxButton_solid.gotoAccount:active,
a.nbuxButton_solid.gotoCheckout:active {
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
}

@media screen and (min-width: 768px) {
    a.nbuxButton_solid.gotoAccount,
    a.nbuxButton_solid.gotoCheckout {
        grid-column: 1;
        grid-row: 1;
    }
}

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

    -- Button - Cancel & Decline

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

.nbuxButton.cancelApplication,
.nbuxButton.declineApplication {
    grid-column: 1;
    grid-row: 2;
    background-color: var(--color-grey-100);
    color: var(--color-black);
    border: 1px solid var(--color-grey-100);
}

.nbuxButton.cancelApplication:hover,
.nbuxButton.declineApplication:hover {
    background-color: var(--color-grey-200);
    border: 1px solid var(--color-grey-200);
}

.nbuxButton.cancelApplication:active,
.nbuxButton.declineApplication:active {
    background-color: var(--color-grey-100);
    border: 1px solid var(--color-grey-100);
}

@media screen and (min-width: 768px) {
    .nbuxButton.cancelApplication,
    .nbuxButton.declineApplication {
        grid-column: 1;
        grid-row: 1;
    }
}

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

    -- SHEET (Continue & Cancel & Decline)

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

.nbuxButton.continueApplicationSheet,
.nbuxButton.cancelApplicationSheet,
.nbuxButton.declineApplicationSheet {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 56px;
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    font-weight: 700;
    margin: 0;
    padding: 0 var(--gutter);
}

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

    -- Button - Continue

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

.nbuxButton.continueApplicationSheet {
    grid-column: 1;
    grid-row: 1;
    background-color: var(--color-success);
    color: var(--color-white);
    border: 1px solid var(--color-success);
    margin: var(--gutter) 0 20px;
}

.nbuxButton.continueApplicationSheet:hover {
    background-color: var(--color-success-background-hover-color);
    border: 1px solid var(--color-success-background-hover-color);
}

.nbuxButton.continueApplicationSheet:active {
    background-color: var(--color-success);
    border: 1px solid var(--color-success);
}

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

    -- Button - Cancel & Decline

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

.nbuxButton.cancelApplicationSheet,
.nbuxButton.declineApplicationSheet {
    grid-column: 1;
    grid-row: 2;
    background-color: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-white);
    margin: 0 0 20px;
}

.nbuxButton.cancelApplicationSheet:hover,
.nbuxButton.declineApplicationSheet:hover {
    background-color: var(--color-grey-200);
    border: 1px solid var(--color-grey-200);
}

.nbuxButton.cancelApplicationSheet:active,
.nbuxButton.declineApplicationSheet:active {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
}

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

    -- Button - Download

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

a.nbuxButton.downloadSheet {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    min-height: 56px;
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    font-weight: 700;
    margin: var(--gutter) 0 20px;
    padding: 0 var(--gutter);
    text-decoration: none!important;
    border-radius: 56px;
    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    
}

a.nbuxButton.downloadSheet:hover {
    background-color: var(--color-black);
    border: 1px solid var(--color-black);
}

a.nbuxButton.downloadSheet:active {
    background-color: var(--color-black);
    border: 1px solid var(--color-black);
}