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

    TELEPHNE NUMBER

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

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

.nbuxForm__item_homeNumber {
    margin: var(--gutter) 0 var(--gutter);
}

.nbuxForm__item_mobileNumber .nbuxForm__input,
.nbuxForm__item_homeNumber .nbuxForm__input {
    max-width: 220px
}

a.nbuxButton_link.addContactNumber__button {
    display: flex;
    justify-content: center;
    text-decoration: underline!important;
    min-height: 56px;
}

.nbuxForm__item_mobileNumber .nbuxForm__inputWithOptionLeft .nbuxForm__input {
    padding: 0 var(--gutter);
}

.nbuxForm__item_homeNumber .nbuxForm__inputWithOptionLeft .nbuxForm__input {
    padding: 0 var(--gutter) 0 74px;
}

.nbuxForm__item_mobileNumber .inputOption,
.nbuxForm__item_homeNumber .inputOption  {
    max-width: 76px;
}

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

    PASSWORD

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

.nbuxForm__inputWithOptionRight {
    display: flex;
    flex-flow: column wrap;
}

.nbuxForm__inputWithOptionRight .nbuxList {
    margin: 0 0 6px;
}

.nbuxForm__inputWithOptionRight .nbuxList li {
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-line-height);
    margin: 0 0 8px;
}

.nbuxForm__inputWithOptionRight .nbuxList li.valid {
     font-weight: 700;
}

.password-toggler-wrapper {
    order: 1;
    position: relative;
}

.strengthIndicator {
    order: 2;
}

.password-strength {
    order: 3;
}

.nbuxForm__input.nbuxForm__input_password {
    padding: 0 106px 0 var(--gutter)!important;
}

.nbuxForm__input.nbuxForm__input_password:focus {
    outline: 2px solid #101010;
    border-color: transparent;
    box-shadow: none;
    transition: none;
}

.passwordOption {
    cursor: pointer;
    max-width: inherit;
    padding: 0 0 0 var(--gutter);
    width: auto;
}

.passwordOption:after {
    content: "";
    margin: 0 var(--gutter) 0 calc(var(--gutter) / 2);
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
}

.nbuxForm__input_password[type=password] + .passwordOption:after {
    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='M12 5c6.03 0 8.753 3.327 10.832 6.445a1 1 0 0 1 0 1.11C20.753 15.673 18.03 19 12 19c-6.03 0-8.753-3.327-10.832-6.445a1 1 0 0 1 0-1.11C3.247 8.327 5.97 5 12 5zm0 2c-4.726 0-6.929 2.304-8.792 5 1.863 2.696 4.066 5 8.792 5s6.929-2.304 8.792-5C18.929 9.304 16.726 7 12 7zm0 1c2.206 0 4 1.794 4 4s-1.794 4-4 4-4-1.794-4-4 1.794-4 4-4zm0 2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z' fill='%233F4952' fill-rule='evenodd'/%3e%3c/svg%3e");
}
.nbuxForm__input_password[type=text] + .passwordOption:after {
    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='M3.043 3.293c.391-.391 1.023-.391 1.414 0l16.5 16.5c.391.391.391 1.023 0 1.414-.195.195-.45.293-.707.293-.256 0-.512-.098-.707-.293l-16.5-16.5c-.39-.391-.39-1.023 0-1.414zm1.565 4.394l1.416 1.416c-1.124.868-2.003 1.97-2.816 3.147 1.863 2.696 4.066 5 8.792 5 .73 0 1.392-.061 2.008-.163l1.668 1.667c-1.073.312-2.283.496-3.676.496-6.03 0-8.753-3.327-10.832-6.445-.224-.336-.224-.774 0-1.11.935-1.402 2.003-2.843 3.44-4.008zM12 5.25c6.03 0 8.753 3.327 10.832 6.445.224.336.224.773 0 1.11-.935 1.401-2.003 2.843-3.44 4.008l-1.416-1.416c1.124-.868 2.002-1.97 2.816-3.147-1.863-2.697-4.066-5-8.792-5-.729 0-1.392.06-2.009.163L8.323 5.745c1.073-.31 2.283-.495 3.677-.495zM8.15 11.227l4.874 4.874c-.328.087-.667.15-1.022.15-2.206 0-4-1.796-4-4 0-.357.06-.695.148-1.024zM12 8.25c2.206 0 4 1.794 4 4 0 .355-.062.694-.149 1.023l-4.874-4.874c.33-.087.668-.149 1.023-.149z' transform='translate(-319 -180) translate(16 108) translate(303 72)' fill='%233F4952' fill-rule='evenodd'/%3e%3c/svg%3e");
}

.strengthIndicator {
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    min-width: 100%;
}

.strengthIndicator__bars {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    margin: calc(var(--gutter) / 2) 0;
}

.password-strength[data-strength="invalid"] ~ .strengthIndicator .strengthIndicator__bar:nth-child(-n + 1) {
    background-color: #d40000;
}

.password-strength[data-strength="poor"] ~ .strengthIndicator .strengthIndicator__bar:nth-child(-n + 2) {
    background-color: #e7c000;
}

.password-strength[data-strength="ok"] ~ .strengthIndicator .strengthIndicator__bar:nth-child(-n + 3) {
    background-color: #b1bf5a;
}

.password-strength[data-strength="good"] ~ .strengthIndicator .strengthIndicator__bar {
    background-color: #208636;
}

.strengthIndicator__bar {
    flex: 1 1 20%;
    height: calc(var(--gutter) / 4);
    border-radius: 56px;
    background-color: var(--color-grey-200);
}

.strengthIndicator__bar:not(:last-child) {
    margin-right: calc(var(--gutter) / 4);
}

.password-strength {
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-small-line-height);
}

.strengthIndicator__title {
    font-weight: 700;
}

#accountPassword-parsley-box {
    order: 3;
}

#accountPassword-parsley-box .parsley-errors-list {
    margin: 0;
}

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

    MARKETING PREFERENCES

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

.contactPreferences {
    width: 100%;
    margin: 0 0 var(--gutter);
}

.contactPreferences:last-of-type {
    margin: 0;
}

.nbuxForm__item_contactPreferences {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 100%;
}

.nbuxForm__item_contactPreferences p {
    margin: 0 0 20px 0;
}

.contactPreferencesOption {
    display: grid;
    grid-template-columns: auto min-content;
    flex-flow: column nowrap;
    min-width: 100%;
    min-height: 76px;
    border: 0;
    background-color: var(--color-white);
    border-radius: var(--shape-4);
    box-shadow: var(--elevation-1, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16));
}

.contactPreferencesOption:last-child {
    margin: 0;
}

.contactPreferencesOption p {
    display: flex;
    align-items: center;
    font-weight: 700;
    margin: 0!important;
    padding: 0 var(--gutter);
    min-height: 72px;
}

.contactPreferencesOption__emailError p,
.contactPreferencesOption__socialMediaError p,
.contactPreferencesOption__phoneError p,
.contactPreferencesOption__postError p {
    padding: 0 var(--gutter) 0 calc(var(--gutter) - 2px);
}

.contactPreferencesText {
    margin: calc(var(--gutter) / 2) 0 0!important;
}

.contactPreferencesOption p:before {
    content: "";
    min-width: 40px;
    min-height: 40px;
    margin: 0 var(--gutter) 0 0;
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 56px;
    background-color: #e6d7cd;
}

.contactPreferencesOption__email p:before {
    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' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cpath id='a' d='M0 0h20v20H0z'/%3e%3c/defs%3e%3cg transform='translate(2 2)' fill='none' fill-rule='evenodd'%3e%3cmask id='b' fill='%23fff'%3e%3cuse xlink:href='%23a'/%3e%3c/mask%3e%3cpath d='M9.535 12.829c-1.353 0-1.885-1.01-1.885-2.38 0-1.735 1.089-3.262 2.682-3.262 1.169 0 1.807.803 1.807 2.045-.053 2.07-1.143 3.597-2.604 3.597M10.678 20c1.692 0 3.732-.521 5.21-1.39.553-.324.677-1.058.305-1.572a1.147 1.147 0 0 0-1.469-.333c-1.278.7-2.68.993-4.046.993-5.021 0-7.995-3.26-7.995-7.555 0-4.658 3.347-7.788 7.782-7.788 4.144 0 7.012 2.535 7.012 6.183 0 2.51-1.301 4.373-2.603 4.373-.557 0-.85-.414-.85-.853 0-.182.027-.338.053-.466l1.089-4.997c.151-.691-.39-1.343-1.117-1.343h-1.114l-.212 1.138c-.399-1.008-1.567-1.475-2.577-1.475-2.815 0-5.233 2.432-5.233 5.823 0 2.639 1.728 4.476 4.039 4.476.787 0 1.585-.248 2.229-.72a1.193 1.193 0 0 1 1.487.055c.444.37 1.095.613 1.941.613C17.344 15.111 20 12.445 20 8.512 20 3.648 15.91 0 10.439 0 4.729 0 0 4.165 0 10.194 0 16.068 4.463 20 10.678 20' fill='%23252525' mask='url(%23b)'/%3e%3c/g%3e%3c/svg%3e ");
}

.contactPreferencesOption__socialMedia p:before {
    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='M19.951 14.326c-.375.538-.498 1.141-.343 1.7.096.343.077.83-.003 1.021a.997.997 0 0 0-.521.221c-.43.354-.429.854-.428 1.185.001.406-.017.69-.268.93-.307.295-1.213.775-3.828.658L9 19.84v-7.334c0-.156-.022-.305-.055-.45l.51-.828c.143-.206 1.117-1.53 1.816-2.484.428-.583.758-1.036.768-1.052a.942.942 0 0 0 .079-.15l1.459-3.475c.009-.019.016-.039.023-.058.259.04.367.16.438.273.178.283.645 1.51-.812 5.407a1 1 0 0 0 .183 1.008c.639.732 1.582.671 2.257.292 1.205-.348 3.076-.547 3.653-.042.067.06.271.237.153.927-.071.42-.014.832.166 1.197.409.83.352 1.201.313 1.256zM4 19.93v-7.425h3l.001 7.425H4zm17.59-4.458c.569-.814.516-1.92-.146-3.264.252-1.48-.3-2.32-.806-2.765-1.351-1.185-3.806-.8-5.04-.505.829-2.669.871-4.549.134-5.72-.442-.703-1.16-1.133-2.023-1.21a1.928 1.928 0 0 0-1.995 1.33L10.319 6.66l-.66.9c-1.401 1.91-1.774 2.417-1.897 2.607H7.76l-.254.41A2.007 2.007 0 0 0 7 10.505H4c-1.103 0-2 .897-2 2v7.425c0 1.103.897 2 2 2h3c.265 0 .518-.055.75-.149v.014l6.73.244c.288.013.566.02.832.02 2.135 0 3.599-.406 4.461-1.233.721-.692.854-1.505.878-2.05.212-.129.399-.3.55-.512.629-.874.506-2.154.339-2.7 0 0 .009-.032.05-.092z' fill='%23252525' fill-rule='evenodd'/%3e%3c/svg%3e ");
}

.contactPreferencesOption__phone p:before {
    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='%23252525' fill-rule='evenodd'%3e%3cpath d='M15.929 19.904c-.54-.076-2.742-1.56-6.596-5.334C5.558 10.716 4.075 8.514 4 8c0-1.812.892-4 2-4 .455 0 1.389.639 2.526 2.44a1.2 1.2 0 0 1 .049 1.173l-.47.94a1 1 0 0 0 .188 1.154l5.903 5.903a1 1 0 0 0 1.154.187l.939-.47c.376-.19.827-.171 1.175.05 1.8 1.136 2.439 2.07 2.439 2.526 0 1.107-2.188 2-3.974 2m2.602-6.218a3.219 3.219 0 0 0-3.136-.146l-.295.147-4.883-4.883.148-.295c.499-1 .442-2.201-.147-3.136C8.805 3.134 7.386 2 6 2 3.272 2 2 5.58 2 8c0 1.289 1.989 3.973 5.912 7.976l.015.015c4.003 3.923 6.687 5.912 7.976 5.912 2.42 0 6-1.272 6-4 0-1.386-1.134-2.805-3.372-4.218'/%3e%3cpath d='M13.495 8.255a4.066 4.066 0 0 1 2.368 2.377 1 1 0 1 0 1.873-.7 6.067 6.067 0 0 0-3.532-3.547 1 1 0 1 0-.71 1.87M14.91 5.14A4.066 4.066 0 0 1 18.972 9.2a1 1 0 0 0 2 0A6.068 6.068 0 0 0 14.91 3.14a1 1 0 0 0 0 2'/%3e%3c/g%3e%3c/svg%3e ");
}

.contactPreferencesOption__post p:before {
    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='m19.618 18-3.4-6.803L20 7.414V18h-.382zM4 7.414l3.783 3.783L4.383 18H4V7.414zm8 5.172L5.414 6h13.172L12 12.586zm-.707 2.121a.997.997 0 0 0 1.414 0l2.02-2.019L17.381 18H6.618l2.656-5.312 2.02 2.019zm10.63-10.089A1.01 1.01 0 0 0 21 4H3a1.006 1.006 0 0 0-1 1v14a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V5c0-.13-.027-.26-.077-.382z' fill='%23252525' fill-rule='evenodd'/%3e%3c/svg%3e");
}

.contactPreferencesOption .nbuxForm__item_radioContactPreferences {
    display: grid;
    grid-template-columns: auto auto;
    flex-flow: row nowrap;
    margin: 0 var(--gutter) 0 0;
    max-width: inherit;
}

.contactPreferencesOption .nbuxForm__item_radioContactPreferences div {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}

.contactPreferencesOption .nbuxForm__item_radioContactPreferences div:first-child {
    padding: 0 var(--gutter) 0 0;
}

.nbuxForm__radio.nbuxForm__radio_contactPreference {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    pointer-events: none;
}

.contactPreferencesOption .nbuxForm__item_radioContactPreferences div:first-child .nbuxForm__radio.nbuxForm__radio_contactPreference {
    width: calc( 100% - 16px);
}

.nbuxForm__radio.nbuxForm__radio_contactPreference:checked::before {
    display: none;
}

.nbuxForm__radio.nbuxForm__radio_contactPreference:checked:focus {
    outline: 2px solid #101010;
    border-color: transparent;
    box-shadow: none;
    transition: none;
}

.nbuxForm__radio.nbuxForm__radio_contactPreference:focus {
    border: 2px solid #101010;
    outline: 0;
}

.nbuxForm__radio.nbuxForm__radio_contactPreference:focus:checked {
    border: 2px solid #101010;
    outline: 0;
}

.contactPreferencesOption .nbuxForm__item_radio .nbuxForm__label_radio {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    min-width: 56px;
    min-height: 100%;
    padding: 0;
    border-radius: 56px;
}

.contactPreferencesOption input[type=radio]:checked + label {
    position: relative;
    color: var(--color-success);
}

.contactPreferencesOption input[type=radio]:checked + label:after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    border-radius: var(--shape-4);
    background-color: var(--color-success);
    left: 0;
    bottom: 0;
    position: absolute;
}

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

    -- Error Message

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

.contactPreferencesOption__emailError,
.contactPreferencesOption__socialMediaError,
.contactPreferencesOption__phoneError,
.contactPreferencesOption__postError {
    border: 2px solid var(--color-alert);
    background-color: #ffe5e5;
    min-height: 72px;
}
