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

    BODY

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

body {
    background: var(--color-grey-100, #f8f8f8);
}

.hidden {
    display: none;
}

*:before,
*:after {
    box-sizing: border-box;
}


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

    HEADER

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

header {
    height: auto;
    background: var(--color-white, #fefefe);
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    padding: var(--gutter, 16px);
}

.registrationHeader__logo {
    display: flex;
}

.registrationHeader__logoImage {
    width: auto;
    height: 25px;
}

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

    CONTENT

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

.registrationError {
	max-width: 486px;
    width: 100%;
    border: none;
    margin: 0 auto;
	padding: 0 var(--gutter, 16px);
}

.validationErrors,
.serviceProblem__nbuxAlert {
	margin: 0 0 24px;
}

.outer_pod {
    background: transparent;
    padding-top: 24px;
}

.outer_pod * {
    box-sizing: border-box;
}

.pod {
    background: transparent;
    max-width: 486px;
    width: 100%;
    border: none;
    padding: 0;
    margin: 0 auto;
}

.registrationDetails {
    background: transparent;
    max-width: 486px;
    width: 100%;
    border: none;
    padding: 0;
    margin: 0 auto;
}

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

    HEADING

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

h1 {
    font-family: var(--font-primary, "poppins");
    font-size: var(--font-body-large-font-size, 20px);
    line-height: var(--font-body-large-line-height, 28px);
    font-weight: 700;
    color: var(--color-black, #252525);
    margin-bottom: 24px;
    padding: 0;
}

h2 {
    font-family: var(--font-primary, "poppins");
    font-size: var(--font-body-large-font-size, 20px);
    line-height: var(--font-body-large-line-height, 28px);
    font-weight: 700;
    color: var(--color-black, #252525);
    margin-bottom: 24px;
    padding: 0;
}

h2.registrationHeading {
    color: var(--color-grey-400, #3f4952);
    margin-bottom: 24px;
    padding: 0 var(--gutter, 16px);
}

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

    TEXT

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

p, ul li {
    font-family: var(--font-primary, "poppins");
    font-size: var(--font-body-font-size, 16px);
    line-height: var(--font-body-line-height, 24px);
    color: var(--color-black, #252525);
    margin: 0 0 calc(var(--gutter, 16px) / 2);
}

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

    -- SHEET (Continue & Cancel & Decline)

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

.cancelSheetContent,
.declineSheetContent,
.secciTempate,
.creditAgreementTempate {
    display: flex;
    flex-flow: column;
}

.cancelSheetContent p,
.declineSheetContent p,
.secciTempate p,
.secciTempate ul li,
.creditAgreementTempate p {
    font-size: var(--font-body-font-size, 16px);
    font-family: var(--font-primary, "poppins");
    line-height: var(--font-body-line-height, 24px);
    margin: 0 0 var(--gutter, 16px);
}

.cancelSheetContent p:last-of-type,
.declineSheetContent p:last-of-type,
.secciTempate p:last-of-type,
.creditAgreementTempate p:last-of-type{
    margin: 0 0 20px;
}

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

    REGISTRATION BUTTONS

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

.registrationButtons {
    display: grid!important;
    grid-template-columns: 1fr;
    grid-column-gap: 0;
    grid-row-gap: var(--gutter, 16px);
    grid-auto-flow: column;
    align-items: center;
    max-width: 486px;
    width: 100%;
    padding: var(--gutter, 16px);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .registrationButtons {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--gutter, 16px);
        grid-row-gap: 0;
        flex-flow: row nowrap!important;
    }
}

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

    FOOTER

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

.footerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 66px 0 0;
}

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

    -- Footer - Help Centre

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

.footerHelpCentre {
    display: flex;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    padding: var(--gutter, 16px) 0;
    background-color: var(--color-grey-200, #e3e5e6);
}

.footerHelpCentre:after {
    content: "";
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8'?%3e%3csvg width='40px' height='40px' viewBox='0 0 40 40' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eGroup 6%3c/title%3e%3cg id='Registration' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Group-6'%3e%3crect id='Rectangle' x='0' y='0' width='40' height='40'%3e%3c/rect%3e%3cpolygon id='Fill-1' points='14 14.9763 14 21.9763 9.111 25.6783 9.111 20.6113 4 20.6113 4 3.9993 27 3.9993 27 14.9763'%3e%3c/polygon%3e%3cpolygon id='Stroke-2' stroke='%233F4952' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' points='14 14.9763 14 21.9763 9.111 25.6783 9.111 20.6113 4 20.6113 4 3.9993 27 3.9993 27 14.9763'%3e%3c/polygon%3e%3cpolygon id='Fill-4' points='13.9998 14.9765 13.9998 31.6115 19.1108 31.6115 19.1108 36.6785 25.4998 31.5675 36.9998 31.6115 36.9998 14.9765'%3e%3c/polygon%3e%3cpolygon id='Stroke-5' stroke='%233F4952' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' points='25.5 31.5672 19.111 36.6782 19.111 31.6112 14 31.6112 14 14.9762 37 14.9762 37 31.6112'%3e%3c/polygon%3e%3cpath d='M19.1113,23.9002 C19.1113,24.6062 19.6833,25.1782 20.3883,25.1782 C21.0943,25.1782 21.6673,24.6062 21.6673,23.9002 C21.6673,23.1952 21.0943,22.6232 20.3883,22.6232 C19.6833,22.6232 19.1113,23.1952 19.1113,23.9002' id='Fill-7' fill='%233F4952'%3e%3c/path%3e%3cpath d='M24.2227,23.9002 C24.2227,24.6062 24.7937,25.1782 25.4997,25.1782 C26.2057,25.1782 26.7777,24.6062 26.7777,23.9002 C26.7777,23.1952 26.2057,22.6232 25.4997,22.6232 C24.7937,22.6232 24.2227,23.1952 24.2227,23.9002' id='Fill-9' fill='%233F4952'%3e%3c/path%3e%3cpath d='M29.333,23.9002 C29.333,24.6062 29.905,25.1782 30.611,25.1782 C31.316,25.1782 31.889,24.6062 31.889,23.9002 C31.889,23.1952 31.316,22.6232 30.611,22.6232 C29.905,22.6232 29.333,23.1952 29.333,23.9002' id='Fill-11' fill='%233F4952'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}

.footerHelpCentre p {
    font-family: var(--font-primary, "poppins");
    font-size: var(--font-body-small-font-size, 12px);
    line-height: var(--font-body-small-line-height, 20px);
    color: var(--color-black, #252525);
    margin: 0 var(--gutter, 16px) 0 0;
}

.footerHelpCentre a {
    color: var(--color-black, #252525);
    text-decoration: underline!important;
}

.footerHelpCentre a:hover,
.footerHelpCentre a:focus,
.footerHelpCentre a:active {
    color: var(--color-black, #252525);
}

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

    -- Footer - Copy & Links

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

.footerCopy {
    display: flex;
    min-width: 100%;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding: 42px 0;
}

.footerCopy p {
    font-family: var(--font-primary, "poppins");
    font-size: var(--font-body-small-font-size, 12px);
    line-height: var(--font-body-small-line-height, 20px);
    color: var(--color-black, #252525);
    margin: 0;
}

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

    SHEET

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

.nbuxSheet__header{
    min-width: 0;
}

.nbuxSheet__header div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nbuxSheet__content p {
    margin-bottom: 20px;
}

.nbuxSheet__content a {
    font-weight: 700;
    color: var(--color-information, #0066cc);
    text-decoration: underline!important;
    cursor: pointer;
}

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

    IRISH CASH TO CREDIT LAYOUT

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

.mainRegistrationDetails {
    background: transparent;
    max-width: 486px;
    width: 100%;
    border: none;
    padding: 0;
    margin: 0 auto;
}

.sectionRegistrationDetails {
	display: flex;
    flex-flow: column;
    padding: calc(var(--gutter) * 2) var(--gutter) 0;
    margin: 0;
}

.sectionRegistrationDetails h1 {
    font-family: var(--font-primary);
    font-size: var(--font-body-large-font-size)!important;
    line-height: var(--font-body-large-line-height);
    font-weight: 700!important;
    color: var(--color-black);
    margin-bottom: 24px!important;
    padding: 0!important;
}

.sectionRegistrationDetails p {
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    color: var(--color-black);
    margin: 0 0 var(--gutter);
}

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

    -- Button - Log Out

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

.sectionRegistrationButtons {
    display: flex;
    align-items: center;
    max-width: 486px;
    padding: var(--gutter);
    margin: 0 auto;
}

.sectionRegistrationButtons p {
        display: block;
        width: 100%;
    }

@media screen and (min-width: 768px) {
    .sectionRegistrationButtons p {
        display: flex;
    }
}

a.nbuxButton.logOut {
    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 calc(var(--gutter) * 2);
}

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

a.nbuxButton_solid.logOut:hover {
    background-color: var(--color-success-background-hover-color);
    border: 1px solid var(--color-success-background-hover-color);
    text-decoration: none!important;
}

a.nbuxButton_solid.logOut:active {
    background-color: var(--color-success);
    border: 1px solid var(--color-success);
    text-decoration: none!important;
}