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

    PERSONAL DETAILS

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

.nbuxRegistration div.personal fieldset {
    display: flex;
    flex-flow: column;
    padding: 0;
    /*margin: 0 0 40px;*/
    margin: 0;
    border: 0;
    /*border-bottom: 1px solid var(--color-grey-200);*/
}

.nbuxRegistration div.personal .form-group {
	display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: 0 0 24px;
    padding: 0;
}

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

    -- Label

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

.nbuxRegistration div.personal .control-label {
    width: 100%;
    cursor: pointer;
    padding: 0 0 calc(var(--gutter) / 2);
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-secondary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
}

.form-horizontal .dob.form-group .control-label,
.form-horizontal .phones.form-group .control-label {
   float: none!important;
}

.nbuxRegistration div.personal .selectDateWrap .control-label {
    font-family: var(--font-primary);
    font-weight: 400;
}

.nbuxRegistration div.personal .control-label small {
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-small-line-height);
    font-weight: 400;
    width: 100%;
    display: block;
}

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

    -- Bootstrap Containers

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

.nbuxRegistration .personal .col-sm-5,
.nbuxRegistration .personal .col-sm-2 {
    float: inherit;
    width: 100%;
    padding: 0;
}

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

    -- Input & Selects

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

.nbuxRegistration div.personal input,
.nbuxRegistration div.personal select {
    width: 100%;
    height: 56px!important;
    box-sizing: border-box;
    margin: 0;
    padding: 0 calc(var(--gutter) + 1px) 0 calc(var(--gutter) + 1px)!important;
    color: var(--color-black);
    font-weight: 400;
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
    border-radius: var(--shape-4);
    border: 1px solid var(--color-white);
    background-color: var(--color-white);
    box-shadow: var(--elevation-1, 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16));
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: none;
}

.nbuxRegistration div.personal select {
    width: auto;
    max-width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 49px 0 calc(var(--gutter) + 1px)!important;
    background-repeat: no-repeat;
    background-position: center right var(--gutter);
    background-size: 24px 24px;
    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 8a.999.999 0 0 0-1.707-.707L12 14.586 4.707 7.293a.999.999 0 1 0-1.414 1.414l8 8a.999.999 0 0 0 1.414 0l8-8A.997.997 0 0 0 21 8' fill='%23252525' fill-rule='evenodd'/%3e%3c/svg%3e");
    background-color: var(--color-white);
}

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

    -- Input & Selects Errors

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

.nbuxRegistration  div.personal ul.parsley-errors-list {
    margin: 0;
    padding: 0;
}

.nbuxRegistration  div.personal .customerName-firstNameError.parsley-show-errors {
    margin-top: inherit;
}

.nbuxRegistration div.personal input.parsley-error,
.nbuxRegistration div.personal select.parsley-error {
    border: 2px solid var(--color-alert);
    background-color: #ffe5e5;
}

.nbuxRegistration div.personal input.parsley-error {
    padding: 0 var(--gutter) 0 var(--gutter)!important;
}

.nbuxRegistration div.personal select.parsley-error {
    padding: 0 48px 0 var(--gutter)!important;
    background-position: center right calc(var(--gutter) - 1px);
}

.nbuxRegistration div.personal input:focus-visible,
.nbuxRegistration div.personal select:focus-visible {
    border: 2px solid var(--color-black);
}

.nbuxRegistration div.personal input:focus-visible {
    padding: 0 var(--gutter) 0 var(--gutter)!important;
}

.nbuxRegistration div.personal select:focus-visible {
    padding: 0 48px 0 var(--gutter)!important;
    background-position: center right calc(var(--gutter) - 1px);
}

.nbuxRegistration div.personal input.parsley-error:focus-visible,
.nbuxRegistration div.personal select.parsley-error:focus-visible {
    border: 2px solid var(--color-black);
    background-color: #ffe5e5;
}

.nbuxRegistration div.personal input.parsley-error:focus-visible {
    padding: 0 var(--gutter) 0 var(--gutter)!important;
}

.nbuxRegistration div.personal select.parsley-error:focus-visible {
    padding: 0 48px 0 var(--gutter)!important;
    background-position: center right calc(var(--gutter) - 1px);
}

.nbuxRegistration div.personal .parsley-show-errors ul.parsley-errors-list li {
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-small-line-height);
    font-weight: 700;
    color: var(--color-alert);
    background-color: transparent;
    padding: 0;
    margin: calc(var(--gutter) / 2) 0 0;
    border: 0;
}

.nbuxRegistration div.personal .parsley-show-errors ul.parsley-errors-list li.parsley-required {
    display: block!important;
}

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

    -- Date of Birth

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

.nbuxRegistration__dobTitle {
    width: 100%;
    padding: 0 0 calc(var(--gutter) / 2);
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-secondary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
}

.nbuxRegistration div.personal .selectDateWrap  {
    display: grid;
    grid-template-columns: repeat(3, minmax(33.33%, 33.33%));
    grid-auto-flow: column;
    align-items: center;
    width: 100%;
}

.nbuxRegistration div.personal .form-group.day-field-outer {
    margin: 0 16px 0 0;
    width: auto;
}

.nbuxRegistration div.personal .form-group.month-field-outer {
    margin: 0 8px 0 8px;
    width: auto;
}

.nbuxRegistration div.personal .form-group.year-field-outer {
    margin: 0 0 0 16px;
    width: auto;
}

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

    -- Password

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

.nbuxRegistration div.personal fieldset.form-center.personal .col-sm-5 {
    display: flex;
    flex-flow: column wrap;
}

.nbuxRegistration div.personal .password-toggler-wrapper input {
    padding: 0 96px 0 var(--gutter)!important;
}

.nbuxRegistration div.personal .nbuxList {
    margin: 0 0 var(--gutter);
}

.nbuxRegistration div.personal .nbuxList li {
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-line-height);
    margin: 0;
}

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

.nbuxRegistration div.personal .password-strength {
    order: 3;
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-small-line-height);
}

.nbuxRegistration div.personal .password-strength:before,
.nbuxRegistration div.personal .password-strength:after {
	display: none;
}

.nbuxRegistration div.personal .strengthIndicator {
	order: 2;
    display: flex;
    flex-flow: column nowrap;
    flex: 1;
    min-width: 100%;
}

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

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

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

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

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

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

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

.nbuxRegistration div.personal .password-strength {
    font-family: var(--font-primary);
    font-size: var(--font-body-small-font-size);
    line-height: var(--font-body-small-line-height);
    margin: 0;
    padding: 0;
    color: var(--color-black)!important;
}

.nbuxRegistration div.personal .strengthIndicator__title {
    font-weight: 700;
}

.nbuxRegistration div.personal #accountPassword-parsley-box {
    order: 3;
}

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

.nbuxRegistration .password-toggler {
    cursor: pointer;
    max-width: inherit;
    padding: 0 0 0 var(--gutter)!important;
    width: auto;
    right: 0;
    position: absolute;
    display:flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    top: 1px;
    user-select: none;
    color: var(--color-information);
    font-weight: 700;
    font-family: var(--font-primary);
    font-size: var(--font-body-font-size);
    line-height: var(--font-body-line-height);
}

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

.nbuxRegistration .form-control[type=password] + .parsley-errors-list + .password-toggler: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='%230066cc' fill-rule='evenodd'/%3e%3c/svg%3e");
}
.nbuxRegistration .form-control[type=text] + .parsley-errors-list + .password-toggler: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='%230066cc' fill-rule='evenodd'/%3e%3c/svg%3e");
}

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

    -- Email Marketing

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

.nbuxRegistration .email-marketing-pcm {
	margin: calc(var(--gutter) / 2) 0!important;
}

.nbuxRegistration p.email-marketing-header {
    font-family: var(--font-secondary)!important;
    font-size: var(--font-body-large-font-size)!important;
    line-height: var(--font-body-large-line-height)!important;
    font-weight: 700!important;
    color: var(--color-black)!important;
    margin: 0 0 var(--gutter)!important;
}

.nbuxRegistration p.email-marketing-header + p {
    font-family: var(--font-primary)!important;
    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;
}