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

    FORM ELEMENTS

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

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

    -- Fieldset

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

fieldset {
    display: flex;
    flex-flow: column;
    padding: 0 var(--gutter) var(--gutter);
    
    /* Temp styling while we have a load of other CSS impacting it */
    margin: 0 0 40px;
    border: 0;
    border-bottom: 1px solid var(--color-grey-200);
}

fieldset:last-of-type {
    padding: 0 var(--gutter) 0;
    
    /* Temp styling while we have a load of other CSS impacting it */
    margin: 0;
    border-bottom: none;
}

fieldset.noStyle {
    margin: 0;
    padding: 0 var(--gutter) 0;
}

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

    -- Item

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

input.nbuxForm__input:-webkit-autofill,
input.nbuxForm__input:-webkit-autofill:focus,
input.nbuxForm__input:-webkit-autofill:hover,
select.nbuxForm__select:-webkit-autofill,
select.nbuxForm__select:-webkit-autofill:focus,
select.nbuxForm__select:-webkit-autofill:hover {
    background-color: var(--color-white)!important;
}

input.nbuxForm__input:autofill,
input.nbuxForm__input:autofill:focus,
input.nbuxForm__input:autofill:hover,
select.nbuxForm__select:autofill,
select.nbuxForm__select:autofill:focus,
select.nbuxForm__select:autofill:hover {
    background-color: var(--color-white)!important;
}

.nbuxForm__item:last-child {
    margin-bottom: 24px;
}

.nbuxForm__input, .nbuxForm__select {
    height: 56px!important;
}

.nbuxForm__item p {
    width: 100%;
}

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

    -- Label

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

.nbuxForm__label {
    font-weight: 700;
    
    /* Temp styling while we have a load of other CSS impacting it */
    padding: 0 0 calc(var(--gutter) / 2)!important;
}

.nbuxForm__itemCheckbox .nbuxForm__label {
    padding: 0 0 0 calc(var(--gutter) * 3)!important
}

.nbuxForm__label_optional {
    color: var(--color-grey-400);
    font-weight: 400;
}

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

    -- Radio

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

.nbuxForm__radio {
    position: relative;
    display: flex;
    margin: 0;
    vertical-align: initial;
    clip: unset;
    padding: 0;
    background-color: var(--color-white);
}

.nbuxForm__label_radio {
    /* Temp styling while we have a load of other CSS impacting it */
    margin: 0!important;
}

.nbuxForm__radio[type="radio"]:focus {
    /* Temp styling because of the bootstrap outline css */
    outline: none;
}

.radioCombined {
    max-width: 100%;
}

.radioCombined label {
    display: flex;
    align-items: center;
    min-width: 65px;
    min-height: 32px;
    padding: 0 0 0 var(--gutter);
    margin-right: 20px!important;
}

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

    -- ERRORS

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

.parsley-show-errors {
    width: 100%;
}

ul.parsley-errors-list {
    list-style: none;
    margin: calc(var(--gutter) / 2) 0 0;
    padding: 0;
}

.customerName-firstNameError.parsley-show-errors,
body.registration.gdpr-irish .firstname.parsley-show-errors {
    margin: 0;
}

.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: 0;
    border: 0;
}

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

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

    OVERRIDES FOR THE RADIO BUTTON CSS THAT COMES IN VIA MOBILE BUTTON-UI
    header.action will need removing and relevant code added to the main Irish Credit page
    once it's in and the trash is removed, remove this css below:

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

input[type="radio"] + label::before,
input[type="radio"]:checked + label::before {
    display: none!important;
}