#vue--mkbh-donate-page--member-subscribe-checkout-flow {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;

    .pre-text {
        margin: 0;
        padding: 40px 15px;

        background-color: #f6f5f5;

        font-size: 15px;
        line-height: 21px;

        color: #5f5f5f;

        p {
            margin: 10px;
        }
    }

    .step-heading {
        position: relative;

        margin: 0;
        padding: 15px;

        background-color: #d2d1d1;

        font-family: inherit;
        font-weight: 400;
        font-size: 18px;

        line-height: 26px;
        letter-spacing: 0.01em;

        text-transform: uppercase;
        text-align: center;
        color: #555555;

        span {
            display: block;
        }

        .heading-notch {
            width: 0;
            height: 0;

            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 15px solid #d2d1d1;

            position: absolute;
            bottom: -15px;

            left: 50%;
            transform: translateX(-50%);
        }
    }

    .step-content {
        margin: 0;
        padding: 40px 15px;

        background-color: #f6f5f5;

        font-size: 15px;
        line-height: 21px;

        color: #5f5f5f;

        .step-content-inner {
            width: 300px;
            margin: 0 auto;
        }

        p {
            margin: 15px 0;

            &.strike-through {
                position: relative;
                text-align: center;

                margin: 15px auto;

                height: 40px;
                line-height: 40px;

                font-size: 13px;

                &::before {
                    content: "";
                    display: block;

                    width: 100%;
                    height: 0;

                    border-top: 1px solid #D1D0D0;

                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                }

                span {
                    position: relative;
                    background: #f6f5f5;

                    display: inline-block;
                    padding: 0 15px;
                }
            }

            &.text-smaller {
                font-size: 14px;
                line-height: 17px;
            }
        }

        a {
            color: #5f5f5f;
            text-decoration: underline;

            &:focus, &:active {
                outline: none;
            }
        }

        .btn-social-auth {
            position: relative;

            display: block;
            width: ~"calc(100% - 70px)";

            margin: 0 35px;
            padding: 9px 15px;

            &:first-of-type {
                margin-top: 35px;
            }

            &:not(:last-of-type) {
                margin-bottom: 15px;
            }

            svg {
                width: auto;
                height: 20px;

                position: absolute;
                left: 10px;

                top: 50%;
                transform: translateY(-50%);
            }

            &.facebook {
                border: 1px solid #8CA0BF;
                background-color: #1F4888;
                color: #fff;

                svg path {
                    fill: #fff
                }
            }

            &.google {
                border: 1px solid #C0C0C0;
                background-color: #fff;
                color: #5f5f5f;
            }
        }

        .form-group {
            margin-bottom: 22px;
        }

        .form-control {
            font-family: 'Montserrat', sans-serif;
            font-size: 15px;

            color: #5f5f5f;

            &::-webkit-input-placeholder {
                color: #dcdbdb;
            }

            &::-moz-placeholder {
                color: #dcdbdb;
            }

            &:-ms-input-placeholder {
                color: #dcdbdb;
            }
        }

        .form-submit {
            position: relative;

            width: ~"calc(100% - 70px)";
            margin: 0 35px;
            padding: 10px 12px;

            border: none;
            background-color: #c1041f;
            color: white;

            span, .preloader {
                transition: opacity 250ms ease-in-out;
            }

            .preloader {
                opacity: 0;

                position: absolute;
                width: 20px;

                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);
            }

            &.busy {
                cursor: not-allowed;
                opacity: 0.75;

                span {
                    opacity: 0;
                }

                .preloader {
                    opacity: 1;
                }
            }

            &:active, &:focus {
                outline: none;
            }
        }
    }

    .step-1-4 {
    }

    .step-2-4 {
        label.plans-switch {
            display: block;
            width: 150px;

            margin: 0 auto;
            padding: 0 10px;

            text-align: center;

            .plan-labels {
                display: flex;
                line-height: 40px;

                span {
                    flex: 1;

                    font-family: 'Montserrat', sans-serif;
                    font-size: 15px;
                    font-weight: 600;

                    text-transform: uppercase;
                    color: #d2d1d1;

                    cursor: pointer;

                    transition: color 250ms ease-in-out;
                }
            }

            .toggle {
                display: block;
                margin: 0 auto;

                width: 50%;
                height: 40px;
                line-height: 40px;

                position: relative;
                overflow: hidden;

                cursor: pointer;

                .toggle-bar {
                    background: #c8c7c7;

                    width: 100%;
                    height: 15px;

                    display: block;
                    position: absolute;

                    top: 50%;
                    transform: translateY(-50%);

                    border-radius: 10px;
                }

                .toggle-notch {
                    display: block;

                    width: 30px;
                    height: 30px;
                    border-radius: 50%;

                    background-color: #c1041f;

                    position: absolute;
                    z-index: 10;

                    top: 50%;
                    transform: translateY(-50%);

                    transition: left 250ms ease-in-out, right 250ms ease-in-out;
                }
            }

            &[data-selected="basis"] {
                .toggle .toggle-notch {
                    left: 0;
                }

                .plan-labels span:nth-child(1) {
                    color: #555
                }
            }

            &[data-selected="plus"] {
                .toggle .toggle-notch {
                    left: ~"calc(100% - 30px)";
                }

                .plan-labels span:nth-child(2) {
                    color: #555
                }
            }
        }

        .switcher-description {
            padding-bottom: 30px;
            margin-bottom: 30px;

            border-bottom: 1px solid #d6d6d6;
        }

        .plan {
            padding: 0;

            color: #555;
            text-align: center;

            .billing {
                &:not(:last-of-type) {
                    margin-bottom: 35px;
                    padding-bottom: 35px;
                    border-bottom: 1px solid #d6d6d6;
                }

                .billing-label {
                    margin: 0;
                }

                .billing-pricing {
                    font-size: 24px;
                    line-height: 40px;
                }

                .billing-description {
                    color: #868686;

                    font-size: 13px;
                    line-height: 16px;
                }

                .billing-select {
                    position: relative;

                    width: ~"calc(100% - 70px)";
                    margin: 15px 35px 0 35px;
                    padding: 10px 12px;

                    border: none;
                    background-color: #c1041f;
                    color: white;

                    &:active, &:focus {
                        outline: none;
                    }

                    svg {
                        width: 25px;
                        height: auto;

                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        right: 15px;

                        path {
                            fill: #fff;
                        }
                    }
                }
            }
        }
    }

    .step-3-4 {
        .step-content-inner {
            text-align: center;
        }

        button.pay {
            position: relative;
            border: 0;

            &.mobile-pay {
                width: 230px;
                height: 40px;
                background-image: url(data:image/png;base64,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);

                &.busy {
                    background-image: none;
                    background-color: #5A78FF;
                }
            }

            &.credit-card {
                width: 230px;
                height: 40px;
                background-image: url(data:image/png;base64,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);

                &.busy {
                    background-image: none;
                    background-color: #000000;
                }
            }

            &, .preloader {
                transition: opacity 250ms ease-in-out;
            }

            .preloader {
                opacity: 0;

                position: absolute;
                width: 20px;

                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);
            }

            &.busy {
                cursor: not-allowed;
                opacity: 0.75;

                .preloader {
                    opacity: 1;
                }
            }

            &:active, &:focus {
                outline: none;
            }
        }
    }

    .step-4-4 {
        .step-content-inner {
            text-align: center;

            button {
                position: relative;

                width: ~"calc(100% - 70px)";
                margin: 15px 35px 0 35px;
                padding: 10px 12px;

                border: none;
                background-color: #c1041f;
                color: white;

                &:active, &:focus {
                    outline: none;
                }
            }
        }
    }
}