:root {
    --primary-color: #60072a;
    --secondary-color: #ffffff;
    --b-brown-light: #d68f83;
    --body-color: #051118;
    --background-color: rgb(219, 211, 237);
    --font-large: 33px;
    --font-regular: 16px;
    --font-small: 15px;
    --border-radius: 5px;
}

@font-face {
    font-family: "custom-fallback";
    src: local("BlinkMacSystemFont"), local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Noto Sans");
    ascent-override: 1.135%;
    descent-override: 0.439%;
    line-gap-override: 0%;
}

@font-face {
    font-display: swap;
    font-family: "Saira";
    font-style: normal;
    font-weight: 400;
    src: url("../../themes/acb-theme/assets/fonts/saira-v20-latin-regular.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Saira";
    font-style: italic;
    font-weight: 400;
    src: url("../../themes/acb-theme/assets/fonts/saira-v20-latin-italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Saira";
    font-style: normal;
    font-weight: 500;
    src: url("../../themes/acb-theme/assets/fonts/saira-v20-latin-500.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Saira";
    font-style: italic;
    font-weight: 500;
    src: url("../../themes/acb-theme/assets/fonts/saira-v20-latin-500italic.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Saira";
    font-style: normal;
    font-weight: 600;
    src: url("../../themes/acb-theme/assets/fonts/saira-v20-latin-600.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "Saira";
    font-style: italic;
    font-weight: 600;
    src: url("../../themes/acb-theme/assets/fonts/saira-v20-latin-600italic.woff2") format("woff2");
}

body {
    font-family: "Saira", custom-fallback, sans-serif;
}

.row {
    max-width: unset;
}

.donation-app-loaded {
    background: var(--background-color) url("../2024/10/wave-double-short.svg") no-repeat center center;
    background-size: cover;
}

.start.widget.widget-header {
    display: none;
}

form {
    max-width: 100%;
    margin: 0 auto;
    padding: 70px 69px 37px 93px;
}

form .row {
    width: 100%;
}

.amount-wrapper {
    margin-bottom: 39px;
}

.amount-wrapper .input-wrapper:not(.small-12) {
    padding-right: 25px;
    font-size: var(--font-large);
}

.amount-wrapper label {
    font-size: var(--font-regular);
    margin: 0px 0 4px 0;
}

.amount-wrapper .slider-input-wrapper #transtion-amount,
.amount-wrapper input[type="number"] {
    font-weight: 900;
    border: 1px solid var(--b-brown-light);
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
    box-shadow: none;
    font-size: var(--font-large);
    width: 167px;
    height: 51px;
}

.amount-wrapper .slider-input-wrapper .currency-symbol {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    font-size: var(--font-large);
    font-weight: 900;
    border-radius: 0 5px 5px 0;
    margin-left: -14px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}

.amount-wrapper .slider-input-wrapper .slider-wrapper {
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
}

.amount-wrapper .slider-wrapper .slider {
    height: 48px;
}

.amount-wrapper .slider-wrapper .slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-webkit-slider-runnable-track {
    background: var(--body-color);
    height: 2px;
}

.amount-wrapper .slider-wrapper .slider input[type="range"]::-moz-range-track {
    background: var(--body-color);
    height: 2px;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #60072a;
    background-image: url(/icon/empty/ffffff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22.5px 22.5px;
    margin-top: -15px;
    box-shadow: none;
}

.amount-wrapper .slider-wrapper .slider input[type=range]::-moz-range-thumb  {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: #60072a;
    background-image: url(/icon/empty/ffffff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22.5px 22.5px;
    margin-top: -15px;
    box-shadow: none;
}

.rythm_target-wrapper {
    max-width: 100%;
    margin-left: 0;
    padding-right: 20px;
}

.rythm_target-wrapper .medium-6:nth-of-type(1) {
    width: calc(50% - 30px);
}

.rythm_target-wrapper .medium-6:nth-of-type(2) {
    width: calc(50% + 30px);
}

.rythm_target-wrapper label {
    font-size: var(--font-regular);
    margin: 0px 0 4px 0;
}

.rythm_target-wrapper .onetime-recurring-wrapper {
    width: fit-content;
}
.rythm_target-wrapper .onetime-recurring-wrapper label {
    width: fit-content;
    padding-left: 48px;
    padding-right: 52px;
    font-size: var(--font-small);
}

.rythm_target-wrapper .onetime-recurring-wrapper .columns:first-child input[type="radio"] + label {
    border-radius: var(--border-radius);
    border: 1px solid var(--b-brown-light);
}

.rythm_target-wrapper .donation-target-wrapper select,
.rythm_target-wrapper .onetime-recurring-wrapper select {
    border: 1px solid var(--b-brown-light);
    border-radius: var(--border-radius);
}

.rythm_target-wrapper .onetime-recurring-wrapper select.inactive,
.rythm_target-wrapper .donation-target-wrapper select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path class='st0' style='fill: %2360072a' d='M31.6,7.7c-0.6-0.6-1.5-0.6-2.1,0L16,21.1L2.6,7.7C2,7.1,1,7.1,0.4,7.7s-0.6,1.5,0,2.1l14.5,14.5c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4L31.6,9.8C32.1,9.2,32.1,8.3,31.6,7.7z'/></svg>");
    background-size: 25px;
}
.rythm_target-wrapper .onetime-recurring-wrapper select.inactive,
.rythm_target-wrapper .donation-target-wrapper select,
.rythm_target-wrapper .onetime-recurring-wrapper select.inactive option,
.rythm_target-wrapper .donation-target-wrapper select option {
    color: #000;
    background-color: #fefefe;
}

.rythm_target-wrapper .onetime-recurring-wrapper .columns.small-6 {
    width: fit-content;
    margin-right: -15px;
    min-width: 200px;
}

.rythm_target-wrapper .onetime-recurring-wrapper .small-6 select {
    border: 1px solid var(--b-brown-light);
    border-radius: var(--border-radius);
    padding-left: 13px;
}

.non-touch input[type="radio"]:not(:focus) + label:hover {
  background: var(--secondary-color);
  color: var(--primary-color);
}

.non-touch input[type="radio"] + label:focus:hover,
.non-touch input[type="radio"]:focus + label:hover{
    background: var(--primary-color);
    color: var(--secondary-color);
}

button.button.arrow::after,
a.button.arrow::after {
    content: none;
}
button.button.arrow {
    width: max-content;
    border-radius: var(--border-radius);
    font-weight: bold;
    text-transform: none;
    padding-right: 25px;
    height: 44px;
    margin-top: 40px;
    font-size: 18px;
}

button.button.arrow:hover {
    background-color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

footer {
    padding: 0 70px 120px 70px;
    margin-top: -120px;
}

footer .payment-preview-wrapper {
    float: right;
}

footer .payment-preview {
    float: right;
    background-color: var(--secondary-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--b-brown-light);
    padding: 2px 16px;
    margin-right: 30px;
}

footer.footer-payment-preview span,
footer.footer-payment-preview a {
    display: none;
}

footer .payment-preview .payment-preview__icon {
    height: 35px;
}

footer .payment-preview .payment-preview__icon svg {
    height: 30px;
}

footer.footer-payment-preview .impress-wrapper {
    float: right;
    padding-right: 10px;
    padding-top: 5px;
}

footer.footer-payment-preview .impress-wrapper a {
    display: block;
    font-size: 16px;
}

footer .impress-wrapper a {
    color: var(--body-color);
    text-decoration: underline;
}

/** Step 2 **/

.widget.payment .step-navigation,
.widget.payment-select .step-navigation,
.widget.thank-you .step-navigation,
.widget.contact .step-navigation {
    position: absolute;
    bottom: 0;
}

.widget.payment .step-navigation span,
.widget.payment-select .step-navigation span,
.widget.thank-you .step-navigation span,
.widget.contact .step-navigation span{
    background: none;
    color: var(--primary-color);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: 0.1em;
    transition: color 0.15s ease-in-out;
}

.widget.payment .step-navigation:hover,
.widget.payment-select .step-navigation:hover {
    color: var(--body-color);
}

.widget.payment .step-navigation:hover span,
.widget.payment-select .step-navigation:hover span {
    background: none;
    color: var(--body-color);
}

.widget.payment .step-navigation .twingle-arrow_left_solo,
.widget.payment-select .step-navigation .twingle-arrow_left_solo {
    color: var(--primary-color);
}

.widget.payment .step-navigation:hover .twingle-arrow_left_solo,
.widget.payment-select .step-navigation:hover .twingle-arrow_left_solo {
    color: var(--body-color);
}

.payment-component-wrapper .payment-input-wrapper {
    background: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.payment-component-wrapper .payment-input-wrapper h2 {
    color: var(--body-color);
}

.payment-component-wrapper .payment-input-wrapper input[type="text"],
.payment-component-wrapper .payment-input-wrapper input[type="email"] {
    border: 1px solid var(--b-brown-light);
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
}

.payment-component-wrapper .payment-input-wrapper .input-wrapper.info > i:hover {
    background: var(--secondary-color);
}

.payment-component-wrapper .checkbox-wrapper .background {
    background: none;
    padding: 0;
}

.payment-component-wrapper .callout {
    background: none;
    color: var(--body-color);
    margin-top: 0;
}

button[type="submit"],
button.button.grey {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    font-weight: bold;
    text-transform: none;
    font-size: 18px;
}

button[type="submit"]:hover,
button.button.grey:hover,
button.button.has-hint:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

button.button.grey + .hint,
button.button.has-hint + .hint {
    background: none;
    color: var(--body-color);
}

button.button + .hint, a.button + .hint{
    background: none;
    color: var(--body-color);
}

@media (max-width: 1089px) {
    form {
        padding: 50px;
    }
}

.widget.thank-you {
    padding: 70px
}

.widget.thank-you .thankyou-media i {
    display: none;
}

.widget.thank-you button[type="submit"].hollow:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 1px solid var(--primary-color);
}

.widget.thank-you .widget.thank-you {
    background-color: none;
}
.widget.thank-you .contact-wrapper .wrapper .row .small-12 button[type="submit"] {
    margin: 0 auto;
}

.widget.thank-you .contact-wrapper input[type="text"],
.widget.thank-you .contact-wrapper input[type="tel"],
.widget.thank-you .contact-wrapper input[type="email"], 
.widget.thank-you .contact-wrapper select {
    border: 1px solid var(--b-brown-light);
    border-radius: var(--border-radius);
    background-color: var(--secondary-color);
}

@media (max-width: 991px) {
    .rythm_target-wrapper .medium-6 {
        width: 100% !important;
    }
    .small-6 {
        width: 50%;
    }
    .rythm_target-wrapper .onetime-recurring-wrapper label {
        width: unset;
    }
}

@media (max-width: 768px) {
    form {
        padding: 30px;
    }

    .amount-wrapper .slider-input-wrapper .slider-wrapper {
        display: none;
    }

    .rythm_target-wrapper .onetime-recurring-wrapper {
        width: unset;
    }

    .rythm_target-wrapper .onetime-recurring-wrapper .columns.small-6 {
        width: 50%;
    }

    button.button.arrow {
        margin-top: 0;
    }
    footer {
        margin-top: 0;
    }
    footer.footer-payment-preview {
        background: none;
    }
}

@media (max-width: 480px) {
    form {
        padding: 20px;
    }

    .amount-wrapper .slider-input-wrapper #transtion-amount,
    .amount-wrapper input[type="number"] {
        width: 120px;
    }

    .rythm_target-wrapper .onetime-recurring-wrapper .columns.small-6 {
        min-width: 150px;
    }

    button.button.arrow {
        font-size: 16px;
        padding-right: 20px;
    }
    footer .payment-preview .payment-preview__icon {
        height: 20px;
    }

    footer .payment-preview .payment-preview__icon svg {
        height: 18px;
    }
}