/* stylelint-disable */
@import 'mixins';
@import 'util';

// Icons
@import './icons/fontawesome';
@import './icons/regular';
@import './icons/solid';
@import './icons/brands';

// Donation Form
@import 'legacy-consumer';

// Receipt Styles
@import 'receipt';
@import 'recurring';
@import 'feerecovery';
@import 'ffm';
@import 'tributes';
@import 'newsletter';
@import 'square';
@import 'currencyswitcher';

// Payment gateways
@import 'paypal-commerce';
@import 'authorizenet';

// Structure
html {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    margin: 10px;
    font-family: system-ui, sans-serif;
    color: #555;
}

form {
    margin: 0 !important;
    position: relative;
}

// Typography

h2 {
    font-weight: 600;
    font-size: 26px;
    line-height: 30px;
    color: #333;
}

.give-stripe-becs-mandate-acceptance-text,
.give-stripe-sepa-mandate-acceptance-text,
p {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #6f6f6f;
}

.give-stripe-becs-mandate-acceptance-text,
.give-stripe-sepa-mandate-acceptance-text {
    margin-bottom: 16px !important;

    &::before,
    &::after {
        display: none !important;
        content: none !important;
    }

    &:empty {
        margin-bottom: 0 !important;
    }
}

// Container

.give-embed-form,
.give-embed-receipt {
    max-width: 552px;
    margin: auto;
    border-radius: 6px;
    color: #696969;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    width: 100%;
    overflow: hidden;
    position: relative;
}

// Buttons

.give-btn {
    background-color: #28c77b;
    color: #fff;
    font-weight: 500;
    text-align: center;
    border-radius: 4px;
    font-size: 30px;
    padding-top: 15px;
    padding-bottom: 15px;

    &:focus {
        outline: none;
        box-shadow: 0 0 8px #28c77b;
    }

    &:hover {
        filter: brightness(1.2);
    }
}

.advance-btn,
.give-submit,
.download-btn {
    order: 99 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 28px !important;
    border-radius: 4px;
    -webkit-appearance: none;
    border: none;
    font-size: 22px;
    line-height: 20px;
    margin-top: 48px;
    margin-bottom: 16px;
    min-width: 236px;
    filter: brightness(1);
    transition: filter 0.2s ease;

    > i {
        font-size: 15px;
        margin-left: 15px;
    }

    @media screen and (max-width: $break-phone) {
        margin-top: 26px;
    }
}

.advance-btn:disabled,
.give-submit:disabled,
.download-btn:disabled {
    filter: grayscale(0.3);
    opacity: 0.6;
}

.download-btn {
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 16px 10px !important;

    > i {
        font-size: 16px;
        margin-left: 15px;
    }
}

// Notices

.give_error,
.give_success,
.give_warning {
    @include before-after-content-none;
    position: relative;
    margin: 20px 20px 0 20px;
    padding: 10px 15px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border-width: 0 0 0 5px;

    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    word-break: break-word;
    color: #555 !important;

    > strong {
        font-weight: 500 !important;
    }
}

// Images

.image {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 55.4% 0 0 0;
    margin: 0;

    img {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

// Navigator Styles

.give-form-navigator {
    display: flex;
    align-items: center;
    background: #fbfbfb;
    border-bottom: 1px solid #f2f2f2;
    height: 50px;
    width: 100%;
    position: absolute;
    z-index: 99;
    transition: transform 0.2s ease;
    transform: translate3d(0, -50px, 0);

    &.nav-visible {
        transform: translate3d(0, 0, 0);
        transition-delay: 0.15s;
    }

    > .back-btn {
        padding: 0 20px;
        height: 100%;
        background: none;
        border: none;
        color: #424242;
        font-size: 12px;
        position: absolute;
        border-radius: 6px 0 0 0;
        overflow: hidden;
        cursor: pointer;

        &:focus {
            outline: none;
            background: rgba(0, 0, 0, 0.04);
            box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.09487);
        }
    }

    > .title {
        flex: 1;
        text-align: center;
        font-size: 15px;
        font-weight: 500;
        color: #424242;
    }
}

// Footer Styles

.form-footer {
    display: flex;
    flex-direction: column;

    .navigator-tracker {
        display: flex;
        align-items: center;
        margin: 5px auto 15px auto;

        .step-tracker {
            background-color: #e4e4e4;
            border-radius: 50%;
            overflow: hidden;
            height: 12px;
            width: 12px;
            margin: 7.5px;
            padding: 0;
            cursor: pointer;
            transition: background-color 0.2s ease;
            border: none;

            &.current {
                background-color: #747474;
            }

            &:focus {
                border: 1px solid #959595;
                outline: none;
            }
        }

        @media screen and (max-width: $break-phone) {
            margin: 5px auto 5px auto;
        }
    }

    .secure-notice {
        margin-top: 15px;
        color: #989898;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        justify-content: center;
        background: #fbfbfb;
        border-top: 1px solid #f2f2f2;
        font-size: 12px;

        > i {
            padding: 8px;
            font-size: 12px;
        }
    }
}

// Section Styles

.give-section {
    display: flex;
    flex-direction: column;

    > * {
        margin-right: auto;
        margin-left: auto;
    }
}

// Introduction Styles

.introduction {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;

    .headline {
        max-width: 75%;
        margin-bottom: 16px;
        margin-top: 30px;
    }

    .seperator {
        width: 90px;
        height: 4px;
        background: #28c77b;
        border-radius: 4px;
    }

    .description {
        font-size: 16px;
        font-weight: 500;
        margin: 18px 70px 29px 70px;

        @media screen and (max-width: $break-phone) {
            margin: 14px 12px 16px 12px;
        }
    }

    .description + .advance-btn {
        margin-top: 6px !important;

        @media screen and (max-width: $break-phone) {
            margin-top: 10px !important;
        }
    }

    .income-stats {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        background-color: #fbfbfb;
        color: #767676;
        font-weight: 500;
        font-size: 14px;

        .number {
            color: #4c4c4c;
            font-size: 18px;
        }

        > div {
            display: flex;
            flex: 1 1 0%;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            border-color: #f2f2f2;
            border-style: solid;
            border-width: 1px 0 1px 0;

            &:first-of-type {
                border-right: 1px solid #f2f2f2;
            }

            &:last-of-type {
                border-left: 1px solid #f2f2f2;
            }
        }
    }

    .progress-bar {
        width: 100%;
        border-bottom: 1px solid #f2f2f2;

        > div {
            margin: 20px;
        }
    }
}

// Progress Bar Styles

.give-progress-bar {
    height: 20px;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #f1f1f1;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.09487);

    > span {
        display: block;
        height: 100%;
        border-radius: 20px;
        background: linear-gradient(180deg, #28c77b 0%, #28c77b 100%), linear-gradient(180deg, #fff 0%, #ccc 100%);
        background-blend-mode: multiply;
        position: relative;
        overflow: hidden;
    }
}

// Choose Amount Styles

.choose-amount {
    > * {
        order: 2;
    }

    > .give_error {
        order: 1;
        margin-right: 20px;
        margin-left: 20px;
    }

    .content {
        text-align: center;
        margin: 24px 30px 22px 30px;
        font-size: 15px;

        @media screen and (max-width: $break-phone) {
            margin: 20px 20px 16px 20px;
        }
    }

    // Amount Total
    .give-total-wrap {
        width: 100%;
    }

    .give-donation-amount {
        @include before-after-content-none;
        display: flex;
        width: fit-content;
        width: -moz-fit-content;
        max-width: 80%;
        position: relative;
        align-items: center;
        background-color: #fff;
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.22);
        border: 1px solid #979797;
        border-radius: 4px !important;
        overflow: hidden;
        padding: 18px 24px;
        float: none !important;
        margin: 5px auto 15px !important;

        @media screen and (max-width: $break-phone) {
            padding: 12px 16px;
            margin-top: 0;
            margin-bottom: 5px;
        }

        .give-amount-top {
            height: auto !important;
            width: 164px !important;
            text-align: center;
            font-weight: 500 !important;
            font-size: 42px !important;
            line-height: 1 !important;
            color: #333;
            border: 0 !important;
            z-index: 1;

            &:focus {
                outline: none;
            }
        }

        span.give-currency-symbol {
            background-color: transparent !important;
            border: 1px solid rgba(255, 255, 255, 0) !important;
            position: relative;
            z-index: 3;
            padding: 0 !important;
            color: #555;
            white-space: nowrap;

            &.give-currency-position-before {
                padding-right: 24px !important;
                border-right: dotted #aaa 1px !important;
            }

            &.give-currency-position-after {
                padding-left: 24px !important;
                border-left: dotted #aaa 1px !important;
            }
        }
    }

    // Amount Buttons
    .give-donation-levels-wrap {
        @include before-after-content-none;
        display: grid !important;
        grid-gap: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0;
        margin: 24px 30px 0 30px !important;

        @media screen and (max-width: $break-phone) {
            margin: 16px 20px 0 20px !important;
        }

        li {
            margin: 0 !important;
        }

        .give-donation-level-btn {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: #28c77b;
            border: 2px solid #28c77b;
            line-height: 1;
            text-align: center;
            color: #fff;
            padding-top: 24px;
            padding-bottom: 24px;

            @media screen and (max-width: $break-phone) {
                font-size: 21px;
            }

            > .currency {
                font-size: 14px;

                &.currency--before {
                    margin: 0 6px 11px -10px;
                    @media screen and (max-width: $break-phone) {
                        font-size: 11px;
                        margin: 0 3px 6px 0;
                    }
                }

                &.currency--after {
                    margin: 0 -10px 11px 6px;
                    @media screen and (max-width: $break-phone) {
                        font-size: 11px;
                        margin: 0 0 6px 3px;
                    }
                }
            }

            &.give-btn-level-custom {
                height: 100%;
                font-size: 18px;
                line-height: 1.2;
                padding: 10px;

                @media screen and (max-width: $break-phone) {
                    font-size: 14px;
                }
            }

            &.give-default-level {
                background: #fff;
                border: 2px solid #28c77b;
                color: #28c77b;
            }

            @media screen and (max-width: $break-phone) {
                padding-top: 16px;
                padding-bottom: 16px;
            }
        }
    }
}

// Set donation form type style
.give-form-type-set {
    .give-custom-amount-text {
        display: none;
    }
}

// Payment Section

.payment {
    > * {
        order: 99;
    }

    .donation-errors {
        position: relative;
        width: 100%;
    }

    #give-anonymous-donation-wrap {
        .give-label {
            display: block !important;
            font-weight: 400;
            font-size: 14px;
            line-height: 1.4;
            padding: 0 0 0 32px;
            width: calc(100% - 40px);
            margin-left: 0;
            color: #696969;
            display: inline-block;

            &::before {
                content: ' ';
                position: absolute;
                top: calc(50% - 12px);
                left: 0;
                width: 20px;
                height: 20px;
                border: 1px solid #b4b9be;
                background-color: #fff;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
            }

            &::after {
                transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
                border-radius: 11px;
                width: 20px;
                height: 20px;
                position: absolute;
                top: calc(50% - 12px);
                left: 0;
                content: ' ';
                display: block;
                background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%231E8CBE'/%3E%3C/svg%3E%0A");
                background-repeat: no-repeat;
                background-position: center;
                clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%);
                -webkit-clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%);
            }

            &.active {
                &::after {
                    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                }
            }
        }
    }

    #give_terms_agreement {
        order: 3;
        background: #fff;
        border: 1px solid rgba(255, 255, 255, 0);
        box-sizing: border-box;
        box-shadow: 0 0 16px rgba(0, 0, 0, 0.121203);
        border-radius: 5px;
        margin: 20px 0 0 0 !important;
        position: relative;
        transition: border 0.2s ease;
        width: auto !important;
        padding: 17px 20px 17px 22px !important;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        input[type='checkbox'] {
            bottom: 14px;
            left: 27px;
        }

        #give_show_terms {
            order: 3;

            @media screen and (max-width: $break-phone) {
                bottom: 20px;
                left: 60px;
                position: absolute;
                z-index: 99;
            }
        }

        #give_terms {
            margin-bottom: 17px;
            max-height: 300px;
            padding: 0 10px 0 0;
            overflow-y: scroll !important;

            > p:first-of-type {
                margin-top: 0;
            }
        }

        label {
            margin: 0;
            padding: 0 0 0 40px;
            width: calc(100% - 180px);
            display: inline-block;
            font-weight: 400;
            font-size: 16px;
            line-height: 1.4;
            position: relative;
            cursor: pointer;

            @media screen and (max-width: $break-phone) {
                width: calc(100% - 30px);
                padding: 0 0 30px 40px;
            }
        }

        &:hover {
            border: 1px solid #3398db;

            .give-mc-message-text::before {
                background-color: rgba(245, 245, 245, 0.815);
            }
        }

        &.active {
            border: 1px solid #3398db;
        }
    }

    [id*='give-checkout-login-register-'] {
        width: 100%;

        @media screen and (max-width: $break-phone) {
            display: flex !important;
            justify-content: center;
        }

        .give-login-message {
            @media screen and (max-width: $break-phone) {
                width: fit-content !important;
                margin-right: auto !important;
                margin-left: auto !important;
                text-align: center;
            }
        }
    }

    [id*='give-create-account-wrap-'] {
        @media screen and (max-width: $break-phone) {
            display: flex !important;
            justify-content: center;
            margin-bottom: 2px !important;
        }

        input {
            display: none;
        }

        label {
            padding-left: 30px;
            font-size: 14px;

            @media screen and (max-width: $break-phone) {
                width: fit-content !important;
            }

            .give-tooltip {
                padding-left: 6px;
            }

            &::before {
                content: ' ';
                position: absolute;
                top: calc(50% - 12px);
                left: 0;
                width: 20px;
                height: 20px;
                border: 1px solid #b4b9be;
                background-color: #fff;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
            }

            &::after {
                transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
                border-radius: 11px;
                width: 20px;
                height: 20px;
                position: absolute;
                top: calc(50% - 12px);
                left: 0;
                content: ' ';
                display: block;
                background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%231E8CBE'/%3E%3C/svg%3E%0A");
                background-repeat: no-repeat;
                background-position: center;
                clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%);
                -webkit-clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%);
            }

            &.checked {
                &::after {
                    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                }
            }
        }
    }

    .give-login-message {
        font-size: 14px;
    }

    [id*='give-login-fields-'] {
        display: grid;
        grid-template-columns: 1fr;

        .give-user-login-fields-container {
            grid-row: 1;
        }

        .give-new-account-link {
            grid-row: 2;
            display: none;
        }

        [id*='give-user-login-submit-'] {
            grid-row: 3;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 10px;

            > * {
                order: 99;
            }

            .give-submit {
                margin-top: 0;
                margin-bottom: 12px;
                flex-basis: 100%;
                order: 1;
                padding: 14px !important;
                line-height: 1;
                font-size: 16px;
            }

            .give-cancel-login {
                padding: 0;
                background: none !important;
                font-size: 14px;
                display: inline-block;
                width: fit-content;
                border: none !important;
                text-decoration: underline;
                color: #b8b8b8;
                margin-left: 10px;
                font-weight: 400;
            }

            [id*='give-forgot-password-wrap-'] {
                font-size: 14px;
                display: inline-block;

                a {
                    color: #b8b8b8;
                    font-weight: 400;
                }
            }
        }
    }

    #give_error_invalid_donation_maximum,
    #give_error_invalid_donation_amount {
        cursor: pointer;
    }

    > .give_error {
        margin-right: 20px;
        margin-left: 20px;
    }

    .heading {
        padding: 39px 3px 0;
        font-size: 16px;
        font-weight: 500;
        color: #6b6b6b;
        text-align: center;

        @media screen and (max-width: $break-phone) {
            padding: 20px 3px 0;
        }
    }

    .subheading {
        @media screen and (max-width: $break-phone) {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }
    }

    .give_notices {
        width: 100%;
        order: 1;
    }

    .give_notices + .heading {
        padding: 28px 3px 0;
    }

    .give_error + .heading {
        padding: 28px 3px 0;
    }

    .subheading {
        padding: 5px 0 34px 0;
        font-style: italic;
        font-size: 12px;
        color: #767676;
        text-align: center;

        @media screen and (max-width: $break-phone) {
            padding: 5px 0 20px 0;
        }
    }

    fieldset {
        padding: 0 20px;

        > fieldset {
            padding: 0;
        }
    }

    #give_checkout_user_info {
        legend {
            display: none;
        }
    }

    #give-company-radio-list-wrap {
        font-size: 14px;

        .give-company-option {
            padding-left: 23px;
            position: relative;

            &::before {
                content: ' ';
                position: absolute;
                top: calc(50% - 10px);
                left: 0;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 1px solid #b4b9be;
                background-color: #fff;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
            }
        }

        input[type='radio']:checked + .give-company-option::after {
            transform: scale3d(1, 1, 1);
        }

        input[type='radio'] + .give-company-option::after {
            transform: scale3d(0, 0, 0);
            transition: transform 0.2s ease;
            border-radius: 11px;
            width: 8px;
            height: 8px;
            position: absolute;
            top: calc(50% - 5px);
            left: 5px;
            content: ' ';
            display: block;
            background: #333;
        }
    }

    #give-payment-mode-select {
        .gateway-stripe-google_pay,
        .gateway-stripe-apple_pay {
            display: none !important;
        }

        legend {
            display: none;
        }

        #give-gateway-radio-list {
            @include before-after-content-none;
            display: grid;
            grid-gap: 10px;
            grid-template-rows: 1fr;
            margin: 0;

            > li {
                @include background-lightgray;
                margin: 0 !important;
                padding: 14px 20px !important;
                border-radius: 4px;
                border: 1px solid #f1f1f1;

                position: relative;

                display: flex;
                justify-content: flex-start;
                align-items: center;

                .give-gateway-option {
                    font-size: 14px;
                    text-align: left;
                    padding-left: 23px;
                    padding-right: 12px;
                    font-weight: 600;
                    color: #333;
                    flex-grow: 1;
                    line-height: 1.4;
                }
            }

            .give-gateway-option::before {
                content: ' ';
                position: absolute;
                top: calc(50% - 10px);
                left: 15px;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 1px solid #b4b9be;
                background-color: #fff;
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
            }

            input[type='radio']:checked + .give-gateway-option::after {
                transform: scale3d(1, 1, 1);
            }

            input[type='radio'] + .give-gateway-option::after {
                transform: scale3d(0, 0, 0);
                transition: transform 0.2s ease;
                border-radius: 11px;
                width: 8px;
                height: 8px;
                position: absolute;
                top: calc(50% - 5px);
                left: 20px;
                content: ' ';
                display: block;
                background: #333;
            }

            ul {
                input[type='radio'] {
                    opacity: 0 !important;
                    position: absolute !important;
                }

                input[type='radio'] + label:not(.give-tribute-type-button) {
                    padding: 0 10px 0 28px;
                    width: 100%;
                    color: #696969;
                    font-size: 14px !important;
                    font-weight: 400 !important;
                    display: inline-block;
                    position: relative;
                    margin: 0 0 5px;
                    line-height: 1.7;

                    &::before {
                        content: ' ';
                        position: absolute;
                        top: calc(50% - 9px);
                        left: 0;
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        border: 1px solid #b4b9be;
                        background-color: #fff;
                        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
                    }

                    &::after {
                        transform: scale3d(0, 0, 0);
                        transition: transform 0.2s ease;
                        border-radius: 8px;
                        width: 8px;
                        height: 8px;
                        position: absolute;
                        top: calc(50% - 4px);
                        left: 5px;
                        content: ' ';
                        display: block;
                        background: #333;
                    }
                }

                input[type='radio']:checked + label:not(.give-tribute-type-button)::after {
                    transform: scale3d(1, 1, 1);
                }
            }
        }
    }

    #give_offline_payment_info {
        > ol {
            padding: 0;
            margin: 0 40px;

            > li {
                line-height: 1.4;
                padding: 4px 0;
                font-size: 15px;
            }
        }
    }

    #give_purchase_form_wrap {
        background: #fbfbfb;
        padding: 20px 20px 6px 20px;

        @media screen and (max-width: $break-phone) {
            padding: 14px 14px 0 14px;
        }

        fieldset {
            padding: 0;
        }

        .cc-address {
            margin-bottom: 0;
        }

        .no-fields {
            margin-bottom: 8px;
        }

        &.give-single-gateway-wrap {
            background: none;
            padding: 0;
            margin: 0 20px;
        }
    }

    #give_purchase_submit {
        display: flex;
        flex-direction: column;
        order: 3;

        #give-final-total-wrap {
            display: none;
        }

        input[value='stripe_apple_pay'] ~ .give-stripe-payment-request-button,
        input[value='stripe_google_pay'] ~ .give-stripe-payment-request-button {
            margin: 16px auto 16px auto;
            order: 3;

            &.StripeElement {
                margin-top: 48px;
                display: flex !important;
                justify-content: center;
            }

            > *:not(.give_error) {
                width: 236px;
            }
        }
    }

    #donate-fieldset {
        display: flex;
        flex-direction: column;
    }

    .give-submit-button-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        order: 3;

        .sequoia-loader {
            height: 30px;
            width: 30px;
            bottom: 32px;
            position: absolute;
            font-size: 4px;
        }

        .give-submit:not(:disabled) + .sequoia-loader {
            display: none;
        }
    }
}

// Fieldsets and Inputs

fieldset {
    legend {
        display: none;
    }

    p {
        position: relative;

        > i {
            position: absolute;
            bottom: calc(50% - 6px);
            left: 14px;
            font-size: 12px;
            color: #989898;
        }
    }

    .give_error,
    .give_success,
    .give_warning {
        margin: 20px 0;
    }
}

.give-label {
    display: none !important;
}

input[type='checkbox'],
input[type='radio'] {
    opacity: 0 !important;
    position: absolute !important;
    left: -60px;
}

input[type='checkbox'] + label {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    padding: 0 0 0 32px;
    width: calc(100% - 82px);
    margin-left: 0;
    color: #333;
    display: inline-block;

    &::before {
        content: ' ';
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
        width: 20px;
        height: 20px;
        border: 1px solid #b4b9be;
        background-color: #fff;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    &::after {
        transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
        border-radius: 11px;
        width: 20px;
        height: 20px;
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
        content: ' ';
        display: block;
        background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%231E8CBE'/%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: center;
        clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%);
        -webkit-clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%);
    }

    &.checked {
        &::after {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }
}

input[type='checkbox']:checked + label::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.give-square-cc-fields,
.give-stripe-cc-field,
.give-stripe-single-cc-field-wrap,
form[id*='give-form'] .form-row textarea,
form[id*='give-form'] .form-row input[type='text'],
form[id*='give-form'] .form-row input[type='tel'],
form[id*='give-form'] .form-row input[type='email'],
form[id*='give-form'] .form-row input[type='password'],
form[id*='give-form'] .form-row input[type='url'],
form[id*='give-form'] .form-row textarea.required,
form[id*='give-form'] .form-row input[type='text'].required,
form[id*='give-form'] .form-row input[type='tel'].required,
form[id*='give-form'] .form-row input[type='email'].required,
form[id*='give-form'] .form-row input[type='password'].required,
form[id*='give-form'] .form-row input[type='url'].required,
#give-recurring-form .form-row textarea,
#give-recurring-form .form-row input[type='text'],
#give-recurring-form .form-row input[type='tel'],
#give-recurring-form .form-row input[type='email'],
#give-recurring-form .form-row input[type='password'],
#give-recurring-form .form-row input[type='url'],
form.give-form .form-row textarea,
form.give-form .form-row input[type='text'],
form.give-form .form-row input[type='tel'],
form.give-form .form-row input[type='email'],
form.give-form .form-row input[type='password'],
form.give-form .form-row input[type='url'],
.give-input-field-wrapper {
    @include text-field;
}

.give-square-cc-fields {
    height: 52px;
}

form[id*='give-form'] .form-row textarea,
#give-recurring-form .form-row textarea,
form.give-form .form-row textarea {
    line-height: 1.4;
}

form[id*='give-form'] .form-row select,
#give-recurring-form .form-row select,
form.give-form .form-row select,
form[id*='give-form'] .form-row select.required,
#give-recurring-form .form-row select.required,
form.give-form .form-row select.required,
.give-select {
    @include select-field;
}

form[id*='give-form'] .form-row select.multiselect,
#give-recurring-form .form-row select.multiselect,
form.give-form .form-row select.multiselect {
    background-image: none;
}

.give-input:hover,
.give-select:hover {
    border: 1px solid rgb(54, 54, 54);
}

// Tooltip Styles

.give-tooltip {
    margin: 0 !important;

    &::after {
        display: block;
        padding: 12px 18px;
        background: #383838;
        color: #fff;
        font-size: 16px;
        border-radius: 4px;
        line-height: 1.2;
        text-align: center;
        text-shadow: 0 -1px 0 #000;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
        word-wrap: normal;
        white-space: normal;
        width: 136px;
        max-width: 136px;
    }

    &.narrow {
        &::after {
            width: fit-content;
        }
    }
}

// Loader
.sequoia-loader {
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 349 348' style='enable-background:new 0 0 349 348;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23FFFFFF;} %3C/style%3E%3Cpath class='st0' d='M25.1,204.57c-13.38,0-24.47-10.6-24.97-24.08C0.04,178.09,0,175.97,0,174C0,77.78,78.28-0.5,174.5-0.5 c13.81,0,25,11.19,25,25s-11.19,25-25,25C105.85,49.5,50,105.35,50,174c0,1.37,0.03,2.85,0.1,4.65c0.51,13.8-10.27,25.39-24.07,25.9 C25.72,204.56,25.41,204.57,25.1,204.57z'/%3E%3Cpath class='st0' d='M174.5,348.5c-13.81,0-25-11.19-25-25c0-13.81,11.19-25,25-25c68.65,0,124.5-55.85,124.5-124.5 c0-1.38-0.03-2.85-0.1-4.65c-0.51-13.8,10.26-25.4,24.06-25.91c13.83-0.53,25.4,10.26,25.91,24.06c0.09,2.39,0.13,4.51,0.13,6.49 C349,270.22,270.72,348.5,174.5,348.5z'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0;

    &.spinning {
        z-index: 1;
        opacity: 1;
        transition: opacity 0.2s ease;
        animation: load 0.6s linear infinite;
    }
}

@keyframes load {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(180deg);
    }
}

// Slide Animation Styles

.slide-in-right,
.slide-in-left,
.slide-out-right,
.slide-out-left {
    position: absolute;
    width: 100%;
}

.slide-in-right {
    animation-name: slideInRight;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.slide-out-right {
    animation-name: slideOutRight;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.slide-in-left {
    animation-name: slideInLeft;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.slide-out-left {
    animation-name: slideOutLeft;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

[id*='give_secure_site_wrapper'] {
    font-size: 12px;
    color: #8d8e8e;
    padding-top: 0;
    line-height: 1.2;

    span.padlock {
        font-size: 12px;
        margin-right: 4px;
        line-height: 1;

        &::before {
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            content: '\f023';
        }
    }
}

/* Hide everything which is not output by Give core or addon */
// exclude PayPal payment contingency handler.
// This is popup used by PayPal to verify 3ds card.
// Exclude Give Aid add-on popup too by adding give-modal to the selector
body
> *:not([class^='give']):not([id^='give']):not([class*='payments-sdk-contingency-handler']):not([class*='give-modal']) {
    display: none;
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

/*---------------------------------
RTL styles
-----------------------------------*/

html[dir='rtl'] {
    .payment {
        fieldset {
            p {
                > i {
                    right: 14px !important;
                }
            }
        }

        ul {
            > li {
                .give-gateway-option {
                    text-align: right !important;
                    padding-right: 23px !important;
                    padding-left: 12px !important;
                }
            }

            .give-gateway-option::before {
                right: 15px !important;
            }

            input[type='radio'] + .give-gateway-option::after {
                right: 20px !important;
            }
        }

        #give-anonymous-donation-wrap {
            .give-label {
                padding: 0 32px 0 0 !important;
                margin-right: 0 !important;

                &::before {
                    right: 0 !important;
                }

                &::after {
                    right: 0 !important;
                }
            }

            .give-label::after {
                top: calc(50% - 10px);
                margin-right: 1px;
            }
        }
    }

    #give_terms_agreement {
        input[type='checkbox'] {
            left: 0 !important;
            right: 27px;
        }

        #give_show_terms {
            @media screen and (max-width: $break-phone) {
                left: 20px;
            }
        }

        label {
            padding: 0 40px 0 0 !important;
        }

        input[type='checkbox'] + label {
            padding: 0 32px 0 0 !important;

            &::before {
                right: 0;
            }

            &::after {
                right: 0;
                top: calc(50% - 11px);
                margin-right: 1px;
            }
        }

        .give_terms_links {
            float: left !important;
        }
    }

    .choose-amount {
        .give-donation-amount {
            span.give-currency-symbol {
                &.give-currency-position-before {
                    padding-right: 0 !important;
                    padding-left: 24px !important;
                    border-right: none !important;
                    border-left: dotted #aaa 1px !important;
                }
            }
        }
    }

    form[id*='give-form'] .form-row select,
    #give-recurring-form .form-row select,
    form.give-form .form-row select,
    form[id*='give-form'] .form-row select.required,
    #give-recurring-form .form-row select.required,
    form.give-form .form-row select.required,
    .give-select {
        background-position: left 0.7em top 50%, 0 0 !important;
    }

    .advance-btn,
    .give-submit,
    .download-btn {
        > i {
            margin-left: 0 !important;
            margin-right: 15px;
        }
    }
}

// Taken from WordPress common css
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}