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

    UCLI PREFERENCES

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

.nbuxRegistration #ucli-preferences {
    display: flex;
    flex-flow: column wrap;
    padding: 0 var(--gutter) var(--gutter);
}

.nbuxRegistration #ucli-preferences h3 {
    font-family: var(--font-secondary);
    font-size: var(--font-body-large-font-size)!important;
    line-height: var(--font-body-large-line-height);
    color: var(--color-black);
    margin: 0 0 24px!important;
    padding: 0!important;
    background-image: none;
    border: none;
}

.nbuxRegistration #ucli-preferences p {
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size)!important;
    line-height: var(--font-body-line-height);
    font-weight: 400;
    color: var(--color-black);
    margin: 0 0 var(--gutter)!important;
    padding: 0!important;
    background-image: none;
    border: none;
}


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

    -- Checkbox

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

.nbuxRegistration .nbuxForm__itemCheckbox {
    margin: 0 0 calc(var(--gutter) / 2);
}

.nbuxRegistration .nbuxForm__itemCheckbox:first-of-type {
    margin: calc(var(--gutter) / 2) 0 var(--gutter);
}

.nbuxRegistration .nbuxForm__itemCheckbox .nbuxForm__label {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-auto-flow: column;
    margin: 0;
    cursor: pointer;
}

.nbuxRegistration .nbuxForm__itemCheckbox .nbuxCheckbox__input {
    display: flex;
    width: 32px;
    height: 32px;
    grid-column: 1;
    grid-row: 1;
    margin: 6px 0 0;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    -webkit-appearance: none;
    transition: none;
    border: 2px solid var(--color-grey-300);
    border-radius: 16px;
    background: var(--color-white);
    outline: none;
}

.nbuxRegistration .nbuxForm__itemCheckbox .nbuxCheckbox__input:focus,
.nbuxRegistration .nbuxForm__itemCheckbox .nbuxCheckbox__input:checked:focus {
    border-color: var(--color-black);
    box-shadow: none;
}

.nbuxRegistration .nbuxForm__itemCheckbox .nbuxCheckbox__input:checked {
    border-color: var(--color-information);
    box-shadow: none;
}

.nbuxRegistration .nbuxForm__itemCheckbox .nbuxCheckbox__input:checked:before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    margin: auto;
    background-color: var(--color-information);
}

.nbuxRegistration .nbuxForm__itemCheckbox span {
    grid-column: 2;
    grid-row: 1;
    padding: 0 0 0 var(--gutter);
}

.nbuxRegistration #ucli-preferences .nbuxForm__itemCheckbox h2 {
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size)!important;
    line-height: var(--font-body-line-height)!important;
    font-weight: 400!important;
    color: var(--color-black)!important;
    margin: 0!important;
    padding: 0;
}

.nbuxRegistration #ucli-preferences .nbuxForm__itemCheckbox .nbuxCheckbox__input:checked + span h2 {
    color: var(--color-information)!important;
    font-weight: 700!important;
}

.nbuxRegistration #ucli-preferences .nbuxForm__itemCheckbox p {
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size)!important;
    line-height: var(--font-body-small-line-height)!important;
    margin: 0 0 calc(var(--gutter) / 2)!important;
}


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

    UCLI INFORMATION

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

.nbuxRegistration .ucliInformation {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-auto-flow: column;
    margin: 0;
    padding: 0 var(--gutter);
}

.nbuxRegistration .ucliInformation:before {
	content: "";
    grid-column: 1;
    grid-row: 1;
    width: 24px;
    height: 24px;
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-small-line-height);
    border-radius: 16px;
    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%3cg fill='%23131313' fill-rule='evenodd'%3e%3cpath d='M12 4c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0 18C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10'/%3e%3cpath d='M12 17.5a1 1 0 0 1-1-1v-6a1 1 0 1 1 2 0v6a1 1 0 0 1-1 1M12 8.5a.994.994 0 0 1-.71-.29c-.09-.101-.16-.21-.21-.33A.995.995 0 0 1 11 7.5c0-.26.11-.521.29-.71.1-.09.2-.16.33-.21.36-.15.81-.07 1.09.21.18.189.29.45.29.71 0 .13-.02.26-.08.38-.05.12-.12.229-.21.33-.1.09-.2.16-.33.22-.12.049-.25.07-.38.07'/%3e%3c/g%3e%3c/svg%3e ");
    background-color: var(--color-white);
    background-size: 24p 24px;
    background-repeat: no-repeat;
    background-position: top center;
    margin: 3px 0 calc(var(--gutter) / 2);
}

.nbuxRegistration .ucliInformation p {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-small-line-height);
    margin: 0 0 var(--gutter) var(--gutter);
}

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

    MODAL

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

.nbuxRegistration #modal_overlay {
    background: rgba(37, 37, 37, 0.8)!important;
    opacity: 1!important;
    position: fixed!important;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw!important;
    height: 100vh!important;
}

.nbuxRegistration #modal_outer {
	display: flex;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    padding: 24px 24px calc(env(safe-area-inset-bottom) + 24px);
    box-sizing: border-box;
    justify-content: center;
    position: fixed!important;
    top: 0!important;
    left: 0;
    overflow-y: auto;
    z-index: 20;
}

.nbuxRegistration #modal_container {
    background: var(--color-white)!important;
    padding: 36px 24px!important;
    display: flex;
    flex-flow: column;
    align-items: center;
    max-Width: 448px;
    border-radius: 8px;
    margin: auto;
    position: relative;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.16);
    z-index: 30;
    transition: top .35s cubic-bezier(0.08, 0.71, 0.04, 1.13);
}

.nbuxRegistration #modal_container h2 {
    font-family: var(--font-secondary);
    font-size: var(--font-body-large-font-size);
    line-height: var(--font-body-large-line-height);
    color: var(--color-black);
    margin: 0 0 24px!important;
    text-align: center;
}

.nbuxRegistration #modal_container p,
.nbuxRegistration #modal_container ul,
.nbuxRegistration #modal_container li {
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    color: var(--color-black);
}

.nbuxRegistration #modal_container p {
    margin: 0 0 var(--gutter)!important;
    text-align: center;
}

.nbuxRegistration #modal_container p:last-of-type {
    margin: 0 0 24px!important;
}

.nbuxRegistration #modal_container .modal_footer_links {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
}

.nbuxRegistration #modal_container .modal_footer_links a {
    margin: var(--gutter) 0 calc(var(--gutter) * 2)!important;
    flex: 1 1 100%;
    text-align: center;
}

.nbuxRegistration #modal_container .modal_footer_links .continue-button,
.nbuxRegistration #modal_container .modal_footer_links .cancel-button {
    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!important;
    max-width: 300px;
    margin: 0!important;
    padding: 0 var(--gutter)!important;
    border-radius: 56px;
    cursor: pointer;
    max-width: 200px;
    width: 100%;
    box-shadow: none;
}

.nbuxRegistration #modal_container .modal_footer_links .continue-button {
    order: 1;
}

.nbuxRegistration #modal_container .modal_footer_links .cancel-button {
    order: 2;
    margin: var(--gutter) 0 0!important;
}

.nbuxRegistration #modal_container .modal_footer_links .continue-button {
    background-color: var(--color-success)!important;
    color: var(--color-white);
    border: 1px solid var(--color-success)!important;
}

.nbuxRegistration #modal_container .modal_footer_links .continue-button:hover {
    background-color: var(--color-success-background-hover-color)!important;
    border: 1px solid var(--color-success-background-hover-color)!important;
}

.nbuxRegistration #modal_container .modal_footer_links .continue-button:active {
    background-color: var(--color-success);
    border: 1px solid var(--color-success)!important;
}

.nbuxRegistration #modal_container .modal_footer_links .cancel-button {
    color: var(--color-black)!important;
    border: none!important;
    text-decoration: none!important;
}

.nbuxRegistration #modal_container .modal_footer_links .cancel-button:hover,
.nbuxRegistration #modal_container .modal_footer_links .cancel-button:active {
    background-color: var(--color-grey-200)!important;
    color: var(--color-black)!important;
    border: none!important;
    text-decoration: none!important;
}