.wpfnl-optin-form {

    &.clickto-expand-optin {
        display: none;
    }

    .wpfnl-optin-form-group {
        width: 100%;
        margin-bottom: 12px;

        &:last-child {
            margin-bottom: 0;
        }

        & > label {
            display: block;
            font-weight: 500;
            font-size: 15px;
            line-height: 1.33;
            color: #363B4E;
            margin-bottom: 7px;
            text-align: left;
        }

        .required-mark {
            color: #df1010;
        }

        .input-wrapper {
            display: block;
            position: relative;

            .field-icon {
                position: absolute;
                top: 50%;
                right: 16px;
                line-height: 1;
                transform: translateY(-50%);
            }
        }

        textarea,
        input[type=text],
        input[type=email] {
            width: 100%;
            background-image: none!important;
            border: 1px solid #DFE1E8;
            margin: 0;
            font-size: 15px;
            line-height: 1.33;
            color: #7A8B9A;
            padding: 11px 40px 11px 14px;
            border-radius: 5px;
            background: #FFFFFF;
        }

        .btn-optin {
            background-color: $primary-color;
            color: #fff;
            text-align: center;
            padding: 12px 20px 13px;
            line-height: 1.3!important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: none;

            &:hover {
                background-color: $secondary-color;
            }

            .wpfnl-loader {
                position: relative;
                top: 2px;
            }

            &[disabled] {
                opacity: 0.7;
                cursor: not-allowed;
            }
        }

        &.user-registration-checkbox,
        &.acceptance-checkbox {
            margin-bottom: 20px;

            input[type="checkbox"] {
                position: absolute;
                opacity: 0;
                z-index: 0;
            }

            & > label {
                font-size: 15px;
                line-height: 1.33;
                color: #7A8B9A;
                padding: 0 0 0 26px;
                margin: 0;
                position: relative;
                cursor: pointer;
                z-index: 1;

                .check-box {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 1px;
                    width: 18px;
                    height: 18px;
                    border-radius: 4px;
                    border: 2px solid #72737e;
                    background-color: transparent;
                    transition: all 0.3s ease;
                }

                p {
                    display: inline-block;
                    padding: 0!important;
                    margin: 0!important;
                    line-height: 1 !important;
                }

                .check-box::after {
                    content: "";
                    position: absolute;
                    top: calc(50% + 1px);
                    left: calc(50% - 4px);
                    width: 7px;
                    height: 11px;
                    background: transparent;
                    border-radius: 2px;
                    opacity: 0;
                    transform: rotate(45deg) skewX(10deg) translate(-50%, -50%);
                    transition: all 0.3s ease;
                    border: 3px solid #fff;
                    border-left: none;
                    border-top: none;
                }
            }

            input[type="checkbox"]:checked + label .check-box {
                background-color: $primary-color;
                border-color: $primary-color;
            }
            input[type="checkbox"]:checked + label .check-box::after  {
                opacity: 1;
            }
        }

        &.submit.align-left {
            text-align: left;
        }
        &.submit.align-center {
            text-align: center;
        }
        &.submit.align-right {
            text-align: right;
        }
        &.submit.align-justify {
            .btn-optin {
                width: 100%;

                .elementor-button-text {
                    flex-grow: inherit;
                }
            }
        }

    }

    .response {
        text-transform: capitalize;
        font-size: 13px;
        font-weight: 500;
        border-radius: 3px;
        cursor: default;
    }

}

.wpfnl-optin-clickto-expand {
    &.align-center {
        text-align: center;
    }
    &.align-right {
        text-align: right;
    }
    &.align-justify {
        .clickto-expand-btn {
            width: 100%;

            .elementor-button-text {
                flex-grow: initial;
            }
        }
    }
}

.wpfunnels-block-next-step-button:after,
.wpfnl-gutenberg-optin-form-wrapper .submit button:after {
    content: "";
    border: 2px solid #8265c5;
    border-radius: 50%;
    border-top: 2px solid #fff;
    width: 13px;
    height: 13px;
    animation: spin 0.7s linear infinite;
    display: none;
    margin-left: 5px;
    position: relative;
    top: 1px;
}
.wpfunnels-block-next-step-button.show-loader:after,
.wpfnl-gutenberg-optin-form-wrapper .submit button.show-loader:after {
    display: inline-block;
}

.et-db #et-boc .et-l .et_pb_button.wpfnl_next_step_button.show-loader:after {
    opacity: 1;
	visibility: visible;
	content: ""!important;
    border: 2px solid #8265c5;
    border-radius: 50%;
    border-top: 2px solid #fff;
    width: 13px;
    height: 13px;
    animation: spin 0.7s linear infinite;
	display: inline-block!important;
    margin-left: 8px !important;
    position: relative !important;
    top: 3px;
}


//---------form style--------
.wpfnl-optin-form {
    //-----form style-1-------
    .wpfnl-optin-form-wrapper.form-style1 {
        display: flex;
        flex-flow: row wrap;

        .wpfnl-optin-form-group:nth-child(1) {
            width: 50%;
            padding-right: 10px;
        }
        .wpfnl-optin-form-group:nth-child(2) {
            width: 50%;
            padding-left: 10px;
        }
        .wpfnl-optin-form-group:nth-child(3) {
            width: 50%;
            padding-right: 10px;
        }
        .wpfnl-optin-form-group:nth-child(4) {
            width: 50%;
            padding-left: 10px;
        }
        .wpfnl-optin-form-group.message {
            width: 100%;
            padding: 0;
        }
        .wpfnl-optin-form-group.user-registration-checkbox,
        .wpfnl-optin-form-group.acceptance-checkbox {
            width: 100%;
            padding: 0;
        }

        .btn-optin {
            background-color: #EE8134;

            &:hover {
                background-color: #d76515;
            }
        }

    }
    //-----end form style-1-------

    //-----form style-2-------
    .wpfnl-optin-form-wrapper.form-style2 {
        .wpfnl-optin-form-group.submit {
            text-align: right;

            &.align-left {
                text-align: left;
            }
            &.align-center {
                text-align: center;
            }
            &.align-right {
                text-align: right;
            }
            &.align-justify {
                .btn-optin {
                    width: 100%;

                    .elementor-button-text {
                        flex-grow: inherit;
                    }
                }
            }
        }

        .btn-optin {
            background-color: #EE8134;
            width: auto;

            &:hover {
                background-color: #d76515;
            }
        }

    }
    //-----end form style-2-------

    //-----form style-3-------
    .wpfnl-optin-form-wrapper.form-style3 {
        .wpfnl-optin-form-group.user-registration-checkbox input[type=checkbox]:checked + label .check-box,
        .wpfnl-optin-form-group.acceptance-checkbox input[type=checkbox]:checked + label .check-box {
            background-color: #00D057;
            border-color: #00D057;
        }

        .wpfnl-optin-form-group.user-registration-checkbox label a,
        .wpfnl-optin-form-group.acceptance-checkbox label a {
            color: #EE8134;
        }

        .btn-optin {
            background-color: #EE8134;
            width: 100%;

            &:hover {
                background-color: #d76515;
            }
        }

    }
    //-----end form style-3-------

    //-----form style-4-------
    .wpfnl-optin-form-wrapper.form-style4 {
        .btn-optin {
            border-radius: 50px;
            width: 100%;
        }
    }
    //-----end form style-4-------

}
//-----end form style-------


//------responsive style-------
@media only screen and (max-width: 767px) {
    .wpfnl-optin-form .wpfnl-optin-form-wrapper.form-style1 .wpfnl-optin-form-group {
        padding: 0!important;
        width: 100%!important;
    }

}



//--------for bricks builder-----------
.wpfnl-bricks-optin-form-wrapper {
    width: 100%;
}
.submit-button-wrapper .clickto-expand-btn {
    color: #fff;
}

.theme-bricks {
    .brxe-wpfnl_checkout {
        width: 100%;
    }

    .wpfnl-checkout #ship-to-different-address label input[type=checkbox] {
        display: none!important;
    }
    .wpfnl-checkout .woocommerce #payment #place_order {
        transition: all 0.3s ease;
    }
    .woocommerce-checkout #customer_details {
        float: none;
        margin-right: 0;
        width: 50%;
    }

    .woocommerce-checkout #order_review {
        border: none;
        float: none;
        width: 50%;
    }

    // ------one column style---
    .wpfnl-checkout .wpfnl-checkout-form-one-column .woocommerce #customer_details,
    .wpfnl-checkout.wpfnl-col-1 .woocommerce #customer_details,
    .woocommerce-page .wpfnl-checkout.wpfnl-col-1 #customer_details {
        width: 100%;
        margin: 0;
        max-width: 100%;
        padding: 0;
        flex: inherit;
    }

    .wpfnl-checkout.wpfnl-col-1 .woocommerce #order_review {
        width: 100%;
        padding-left: 0;
    }

    .wpfnl-checkout .woocommerce-checkout #payment div.payment_box:before {
        background: transparent;
    }

}