/* Styles for customized form elements, other than checkboxes and radios */

/* View/hide password */
.shwpd {
    position: absolute;
    right: 0.9rem;
    top: 2.25rem;
    transform: translateY(-50%);
}

.eye-open {
    background: url(../../images/pw-eye.svg) no-repeat center center;
    width: 23px;
    height: 17px;
}
.eye-close {
    background: url(../../images/pw-eye-strike.svg) no-repeat center center;
    width: 22px;
    height: 19px;
}

.password-confirm-message {
    margin-top: 0.5rem;
}

/* icons on valid/invalid inputs */
.crm-section .content {
    position: relative;
}

.form-item.has-error .input--wrapper:after,
.form-item.error .input--wrapper:after,
.user-register-form input[type="email"][value=""]:valid + .form--marker,
.user-register-form input[type="password"]:valid ~ .form--marker {
    position: absolute;
    display: block;
    width: 20px;
    height: 21px;
    top: 2.25rem;
    transform: translateY(-50%);
    right: 1.44rem;
    z-index: 2;
}

.form-item.has-error .input--wrapper:after,
.form-item.error .input--wrapper:after {
    content: '';
}

.user-register-form input[type="email"][value=""]:valid + .form--marker,
.user-register-form input[type="password"]:valid ~ .form--marker {
    background: url(../../images/success.svg) no-repeat center center;
}

.form-item.has-error .input--wrapper:after,
.form-item.error .input--wrapper:after {
    background: url(../../images/error.svg) no-repeat center center;
}

.user-register-form input[type="email"][value=""]:valid,
.form-item.has-error input,
.form-item.error input {
    padding-right: calc(1.4rem + 17px);
}

/* accommodate show/hide password icon as well */
.form-item.has-error.form-type-password .input--wrapper:after,
.form-item.error.form-type-password .input--wrapper:after,
.user-register-form input[type="password"]:valid ~ .form--marker {
    right: calc(1.4rem + 23px);
}

.form-item.has-error.form-type-password input,
.form-item.error.form-type-password input,
input[type="password"][value=""]:valid {
    padding-right: calc(1.9rem + 40px);
}

/* Flex layout for personal info fields */
@media all and (min-width: 990px) {
    .user-register-form fieldset,
    fieldset.crm-profile-name-name_and_address_1,
    .honoree-name-email-section,
    .billing_name_address-section,
    .credit_card_info-section,
    fieldset .panel-body,
    fieldset .panel-body .form-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-right: -16px;
    }

    fieldset .panel-body .form-wrapper,
    fieldset .panel-body .help-block {
        width: 100%;
        flex: 0 0 100%;
    }

    .user-register-form fieldset .form-item,
    fieldset.crm-profile-name-name_and_address_1 .form-item,
    .crm-container .honoree-name-email-section div.form-item,
    .billing_name_address-section > *,
    fieldset .panel-body > *,
    fieldset .panel-body .form-wrapper > * {
        flex: 0 1 calc(50% - 16px);
        margin-right: 16px;
    }

    .user-register-form fieldset input,
    fieldset.crm-profile-name-name_and_address_1 input,
    .crm-container .honoree-name-email-section input,
    .billing_name_address-section input,
    fieldset .panel-body input,
    .user-register-form fieldset select,
    fieldset.crm-profile-name-name_and_address_1 select,
    .crm-container .honoree-name-email-section select,
    .billing_name_address-section select,
    fieldset .panel-body select {
        width: 100%;
    }

    .credit_card_info-section > * {
        flex: 1 1 calc(33% - 16px);
        margin-right: 16px;
    }

    .credit_card_info-section .cvv2-section {
        max-width: 14ch;
    }

    .credit_card_info-section .credit_card_exp_date-section {
        max-width: 30ch;
    }
}

/* Range slider inputs */
input[type="range"] {
    padding: 0;
    margin: 0;
    accent-color: #D85849;
    background: transparent;
 }

 input[type="range"]::-moz-range-track,
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #fff;
    border-radius: 50%;
 }