body {

    font-family: var(--fontFamily);

    overflow-y: hidden;

    overflow-x: hidden;

}



h1 {

    font-weight: 800;

    font-size: 45px;

}



label {

    font-size: 18px;

}



.alert {

    font-size: 18px;

    border-radius: var(--borderRadius);

}



#Other {

    width: 7rem;

}



.form-floating>label {

    font-weight: 500;

}



.form-floating>.form-control,

.form-floating>.form-select {

    font-weight: 500;

}



#amount_options .btn {

    height: 3.65rem;

    line-height: 3.65rem;

    width: 7rem;

    color: #fff;

    font-size: 18px;

    font-weight: 500;

    padding: 0;

    margin-right: 8px;

    margin-bottom: 4px;

    border-radius: var(--borderRadius);

}



#amount_options .btn:last-child {

    width: 14rem;

    margin-right: 0;

}



#stripe_options .btn {

    height: 3.65rem;

    line-height: 3.65rem;

    width: 15rem;

    color: #fff;

    font-size: 18px;

    font-weight: 500;

    padding: 0;

    margin-right: 8px;

    margin-bottom: 4px;

    border-radius: var(--borderRadius);

}



#stripe_options .btn:last-child {

    margin-right: 0;

}



.btn-check:checked+.btn,

.btn.active,

.btn.show,

.btn:first-child:active,

:not(.btn-check)+.btn:active {

    color: #fff;

    background-color: var(--formPrimaryColor);

    border-color: var(--formPrimaryColor);

}



#recurring_frequency .btn:nth-child(2) {

    margin-left: 1rem;

}



#recurring_frequency .btn {

    width: 16.4rem;

}



#gift_amount .btn {

    width: 6.5rem;

    vertical-align: top;

}



.btn-outline-secondary:not(:disabled):not(.disabled):active,

.btn-outline-secondary:not(:disabled):not(.disabled).active,

.show>.btn-outline-secondary.dropdown-toggle,

.successpage a.btn {

    color: #fff;

    background-color: var(--formPrimaryColor);

    border-color: var(--formPrimaryColor);

}



.successpage a.btn {

    height: 3.65rem;

    line-height: 3.65rem;

    width: 15rem;

    color: #fff;

    font-size: 20px;

    font-weight: 500;

    padding: 0;

    border-radius: var(--borderRadius);

}



.amount {

    font-weight: 700;

}



.flex-rectext {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: space-between;

}



#form_recaptcha {

    width: 100%;

    max-width: 303px;

}



#text_p {

    width: 70%;

}



#text_p p {

    margin-bottom: 0;

}



.btn-group-toggle input[type="radio"] {

    display: none;

}



label[for="Amount"],

label[for="Payment_For"],

h3 {

    color: var(--formPrimaryColor);

    font-weight: 700;

    font-size: 20px;

}



input.form-control,

select.form-select {

    height: 3.8rem;

}



input.form-control,

select.form-select,

textarea.form-control {

    border-width: 2px;

}



input.form-control,

textarea.form-control,

select.form-select:not(#Recurring_Frequency) {

    padding-left: 3rem;

}



textarea.form-control {

    padding-top: 0.7rem;

    padding-bottom: 0.7rem;

    border-radius: var(--borderRadius);

}



.form-control:focus,

.form-select:focus,

.form-check-input:focus {

    border-color: var(--formPrimaryColor);

}



.form-input .fa,

.form-input .fa-solid,

.form-input span {

    position: absolute;

    line-height: 3.8rem;

    height: 3.8rem;

    width: 3rem;

    text-align: center;

    font-size: 24px;

    font-weight: 800;

    color: #c7c8c9;

    z-index: 6;

}



.input-group>.input-1 {

    padding-left: 3rem !important;

    border-top-left-radius: var(--borderRadius) !important;

    border-bottom-left-radius: var(--borderRadius) !important;

}



.input-group>.input-2 {

    border-top-right-radius: var(--borderRadius) !important;

    border-bottom-right-radius: var(--borderRadius) !important;

}



.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {

    margin-left: 0;

}



#recurring_options .form-check {

    height: 3.8rem;

    line-height: 3.8rem;

}



.form-check label {

    font-size: 18px;

    cursor: pointer;

}



.form-check .form-check-input {

    width: 1.5em;

    height: 1.5em;

    border-width: 2px;

    float: unset;

    vertical-align: text-bottom;

    border-radius: var(--borderRadius);

}



.form-check-input:checked {

    background-color: var(--formPrimaryColor);

    border-color: var(--formPrimaryColor);

}



label[for="Privacy_Policy"] a {

    color: var(--formPrimaryColor);

    font-weight: 600;

    text-decoration: none;

}



button[type="submit"] {

    background-color: var(--formPrimaryColor);

    height: 4rem;

    color: #fff;

    font-size: 18px font-weight: 500;

    padding: 0 2rem;

    border-radius: var(--borderRadius);

}



#payment_gateways label {

    background-color: #fff;

    border: 2px solid #ced4da;

    border-radius: var(--borderRadius);

}



#payment_gateways label:hover {

    border: 4px solid var(--formPrimaryColor);

    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);

}



#payment_gateways .btn-check:checked+.btn {

    border: 4px solid var(--formPrimaryColor);

}



#Card_Number::placeholder {

    font-size: 40px !important;

    line-height: 2.1rem;

    height: 2.1rem;

    vertical-align: middle;

}



#stripe-payments {

    display: none;

}



#stripe-card {

    margin-bottom: 1.5rem;

    border: 1px solid #ced4da;

    padding: 8px;

    border-radius: var(--borderRadius);

}



#stripe-ach {

    display: none;

    margin-bottom: 1.5rem;

    padding: 8px;

}



.swal2-popup {

    border-radius: var(--borderRadius) !important;

}



.swal2-popup .swal2-actions button {

    border-radius: var(--borderRadius) !important;

    height: 3.65rem;

    line-height: 3.65rem;

    width: 7rem;

    font-size: 18px !important;

    font-weight: 500;

    padding: 0;

}



.swal2-popup .swal2-confirm {

    background-color: var(--formPrimaryColor) !important;

    border-color: var(--formPrimaryColor) !important;

}



.swal2-popup .swal2-title {

    font-size: 18px;

    margin-top: 1rem;

}



.swal2-popup .comp_name {

    color: var(--formPrimaryColor);

    font-weight: 500;

}



.form-control:focus, .form-check-input:focus, .form-select:focus, .btn:hover {

    box-shadow: var(--boxShadow);

}



@media only screen and (max-width:1200px) {

    #text_p {

        width: 65%;

    }

}



@media only screen and (max-width:1000px) {

    #text_p {

        width: 57%;

    }



    .svg-success {

        height: 120px;

        width: 120px;

    }

}



@media only screen and (max-width:894px) {

    #amount_options .btn, #stripe_options .btn {

        margin-right: 0;

        width: 32.5%;

    }



    #amount_options .btn:last-child {

        width: 32.5%;

    }

}



@media only screen and (max-width:817px) {

    #form_recaptcha {

        max-width: 100%;

    }



    #text_p {

        width: 100%;

        margin-top: 20px;

    }



    #recurring_frequency .btn:nth-child(2) {

        margin-left: 0;

    }

}



@media only screen and (max-width:650px) {

    #amount_options .btn, #stripe_options .btn {

        margin-right: 0;

        width: 49%;

    }



    #amount_options .btn:last-child {

        width: 49%;

    }



    #recaptcha-section {

        display: block !important;

    }



    #recaptcha-section div:last-child {

        margin-top: 1rem;

    }

}



@media only screen and (min-width:531px) and (max-width:1001px) {

    #payment_gateways label {

        width: 32%;

    }

}



@media only screen and (max-width:530px) {

    #payment_gateways label {

        width: 49%;

    }



    #stripe_options .btn {

        margin-right: 0;

        width: 100%;

    }

}



@media only screen and (max-width:455px) {

    #recurring_options {

        display: block !important;

    }



    #recurring_options .form-check {

        height: 1.5rem;

        line-height: 1.5rem;

    }



    .input-group.form-input {

        display: inline-block;

    }



    .input-group.form-input>.input-1 {

        width: 100%;

        border-bottom-left-radius: 0 !important;

        border-top-right-radius: var(--borderRadius) !important;

    }



    .input-group.form-input>.input-2 {

        width: 100%;

        padding-left: 3rem;

        border-bottom-left-radius: var(--borderRadius) !important;

        border-top-right-radius: 0 !important;

    }

}



@media only screen and (max-width:410px) {

    #amount_options .btn {

        margin-right: 0;

        width: 100%;

    }



    #amount_options .btn:last-child {

        width: 100%;

    }



    button[type="submit"] {

        width: 100%;

    }

}



@media only screen and (max-width: 365px) {

    #form_recaptcha>div {

        width: 150px !important;

        transform: scale(0.77);

        transform-origin: 0 0;

        transform: scale(0.77);

        -webkit-transform: scale(0.77);

        transform-origin: 0 0;

        -webkit-transform-origin: 0 0;

    }

}



@media only screen and (max-width:360px) {

    #payment_gateways label {

        width: 100%;

    }

}



@media only screen and (max-width: 320px) {

    #form_recaptcha {

        padding-left: 5px !important;

    }



    #paymentform .donation-class {

        padding-right: 27px !important;

        padding-left: 0px !important;

    }

}



/* ---------------------------------------------

    OLD CSS

--------------------------------------------- */

.payment-gateway label {

    padding: 2px;

}



#creditcard, #btn-row {

    display: none;

}



.jp-card-container {

    margin: 0 !important;

    transform-origin: left;

}



#coverpage {

    position: fixed;

    height: 100%;

    width: 100%;

    z-index: 999999;

    background: white;

    margin-left: -7px;

    margin-right: -7px;

}



.spinner-box {

    margin-top: -36px;

    position: relative;

    top: 50%;

}



.spinner-box p {

    margin-bottom: 0;

    text-align: center;

    font-weight: bold;

}



.spinner {

    margin: 0 auto;

    width: 60px;

    height: 50px;

    text-align: center;

    font-size: 13px;

}



.spinner>div {

    background-color: #333;

    height: 100%;

    width: 6px;

    display: inline-block;



    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;

    animation: sk-stretchdelay 1.2s infinite ease-in-out;

}



.spinner .rect2 {

    -webkit-animation-delay: -1.1s;

    animation-delay: -1.1s;

}



.spinner .rect3 {

    -webkit-animation-delay: -1.0s;

    animation-delay: -1.0s;

}



.spinner .rect4 {

    -webkit-animation-delay: -0.9s;

    animation-delay: -0.9s;

}



.spinner .rect5 {

    -webkit-animation-delay: -0.8s;

    animation-delay: -0.8s;

}



select optgroup option {

    font-weight: normal !important;

}



@-webkit-keyframes sk-stretchdelay {

    0%, 40%, 100% {

        -webkit-transform: scaleY(0.4)

    }



    20% {

        -webkit-transform: scaleY(1.0)

    }

}



@keyframes sk-stretchdelay {

    0%, 40%, 100% {

        transform: scaleY(0.4);

        -webkit-transform: scaleY(0.4);

    }



    20% {

        transform: scaleY(1.0);

        -webkit-transform: scaleY(1.0);

    }

}



.sq-card-iframe-container {

    height: 50px !important;

}



/* For Circle Check */

.svg-success {

    display: inline-block;

    vertical-align: top;

    height: 150px;

    width: 150px;

    opacity: 1;

    overflow: visible;

}



@keyframes success-tick {

    0% {

        stroke-dashoffset: 16px;

        opacity: 1;

    }



    100% {

        stroke-dashoffset: 31px;

        opacity: 1;

    }

}



@keyframes success-circle-outline {

    0% {

        stroke-dashoffset: 72px;

        opacity: 1;

    }



    100% {

        stroke-dashoffset: 0px;

        opacity: 1;

    }

}



@keyframes success-circle-fill {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



.svg-success .success-tick {

    fill: none;

    stroke-width: 1px;

    stroke: #ffffff;

    stroke-dasharray: 15px, 15px;

    stroke-dashoffset: -14px;

    animation: success-tick 450ms ease 1400ms forwards;

    opacity: 0;

}



.svg-success .success-circle-outline {

    fill: none;

    stroke-width: 1px;

    stroke: #81c038;

    stroke-dasharray: 72px, 72px;

    stroke-dashoffset: 72px;

    animation: success-circle-outline 300ms ease-in-out 800ms forwards;

    opacity: 0;

}



.svg-success .success-circle-fill {

    fill: #81c038;

    stroke: none;

    opacity: 0;

    animation: success-circle-fill 300ms ease-out 1100ms forwards;

}



.input-group-lg>.btn, .input-group-lg>.form-control, .input-group-lg>.form-select, .input-group-lg>.input-group-text, .form-control-lg, .form-select-lg {

    font-size: 18px;

    border-radius: var(--borderRadius);

}



/* File Upload Additional CSS */

#fileUpload{

    margin-top: 1rem;   /* adjust as needed */

    margin-bottom: 1rem; 

}

.form-control-lg::file-selector-button{

    margin: 0 !important;

    margin-inline: 1rem !important;

    border-radius: 1em;

}

#fileSizeMSG {

    margin-top: unset !important;

}



/* Can't animate stroke-dashoffset on IE 10 and 11, just show svg instead */

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {

    .svg-success .success-tick {

        stroke-dasharray: 0;

        stroke-dashoffset: 0;

        animation: none;

        opacity: 1;

    }



    .svg-success .success-circle-outline {

        stroke-dasharray: 0;

        stroke-dashoffset: 0;

        animation: none;

        opacity: 1;

    }



    .svg-success .success-circle-fill {

        animation: none;

        opacity: 1;

    }

}



/* Primary Attendee line */

#Last_Name {

    /* margin-left: rem !important; */

}
@media (min-width: 700px) {
    #paymentFormFrame {
        width: 700px !important;
    }
}

/* Base Layout Component Styles */
.form-container {
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  
  /* Row containing Form and Right Side Panel side-by-side */
  .form-main-row {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    width: 100%;
  }
  
  /* Form Styles */
  #paymentform {
    flex: 1.3;
    min-width: 300px;
    background: #ffffff;
    padding: 25px;
    border: 1px solid #e0e0e0;
    border-radius: var(--borderRadius);
  }
  
  /* Right Side Panel Wrapper */
  .right-side-panel {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  /* Common Panels Content Styling */
  .panel {
    padding: 25px;
    border-radius: var(--borderRadius);
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .panel h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .panel p {
    margin: 0 0 12px 0;
    color: #4a4a4a;
  }
  
  .panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  /* Panel 1 Theme colors */
  .panel-impact {
    background-color: #fffaf5; 
    border: 1px solid #ffe6d5;
  }
  
  .panel-impact h3 {
    color: var(--formPrimaryColor);
  }
  
  .panel-impact li {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #333;
  }
  
  .panel-impact .check {
    color: var(--formPrimaryColor);
    font-weight: bold;
  }
  
  /* Panel 2 Theme colors */
  .panel-ways {
    background-color: #f7f9fc; 
    border: 1px solid #e2e9f3;
  }
  
  .panel-ways h3 {
    color: var(--formSecondaryColor);
  }
  
  .panel-ways ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
  }
  
  .panel-ways li {
    margin-bottom: 6px;
    color: #333;
  }
  
  /* Panel 2 Button styling */
  .btn-explore {
    display: block;
    text-align: center;
    background-color: var(--formSecondaryColor);
    color: #ffffff;
    text-decoration: none;
    padding: 12px;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s;
  }
  
  .btn-explore:hover {
    filter: brightness(0.9);
  }
  
  /* Panel 3 Contact Details panel colors */
  .panel-questions {
    background-color: #fffaf5;
    border: 1px solid #ffe6d5;
  }
  
  .panel-questions h3 {
    color: var(--formPrimaryColor);
  }
  
  .panel-questions .contact-info p {
    margin-bottom: 6px;
  }
  
  .panel-questions a {
    color: var(--formPrimaryColor);
    text-decoration: none;
    font-weight: 500;
  }
  
  /* --- Bottom Banner Box Section Styles --- */
  .bottom-banner {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background-color: #fbf6f0; 
    border: 1px solid #ebdcd0;
    padding: 25px;
    border-radius: var(--borderRadius);
  }
  
  .heart-icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
  }
  
  .heart-icon {
    width: 38px;
    height: 38px;
    color: #614f43; 
  }
  
  .banner-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.15rem;
    color: #333333;
    font-weight: 700;
  }
  
  .banner-content p {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #4f4f4f;
    line-height: 1.55;
  }
  
  .banner-content p:last-child {
    margin-bottom: 0;
  }
  
  /* UI Breakpoints Optimization */
  @media (max-width: 768px) {
    .form-main-row {
      flex-direction: column;
    }
    #paymentform, 
    .right-side-panel {
      width: 100%;
    }
    .bottom-banner {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }
  }