:root {
  --lc-dark-blue: #1e4467;
  --lc-light-blue: #369edd;
  --lc-lime-green: #a0ff45; 
  --lc-text-white: #ffffff;
  --lc-text-grey: #cccccc;
  --lc-violet: #9850ff;
  --logo-container-padding: 40px 60px; 
}

* {
  font-family: Sofia, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: comobold, serif;
  letter-spacing: -0.07rem;
  margin-top: 0px !important;
  line-height: 1.2 !important;
}

/*Header*/
.header {
  background: transparent;
  display: flex;
  padding: 40px 0px;
  justify-content: space-between;
  align-items: center;
}

/*Body main*/
.en__component.en__component.en__component--column.en__component--advcolumn.body-main {
  border-radius: 20px;
  padding: 32px;
}

.en__component.en__component--row.en__component--advrow {
  padding: 200px 0px;
}

.hide-label .en__field__label:not(.en__field__label--item) {
  display: none !important;
}

.en__field__label--item {
  line-height: 1.3 !important;
}

.en__component.en__component.en__component--column.en__component--advcolumn.body-header
{
  padding-top: 24px !important;
}

[data-engrid-theme=flex2][data-highlight-required-fields] .en__mandatory>label:after {
  color: #9850ff !important;
}


.en__field--recurrpay .en__field__label--item {
  padding: 20px !important;
  border: 1px solid #369edd !important;
  border-radius: 12px !important;
  font-size: 1.4em !important;
}

.en__field--donationAmt .en__field__label--item, input.en__field__input.en__field__input--other {
  padding: 20px !important;
  border: 1px solid #369edd !important;
  border-radius: 12px !important;
  font-size: 1.4em !important;
}

.en__field--donationAmt .en__field__element.en__field__element--radio {
  display: grid !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  justify-items: stretch !important;
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* --- Mobile Grid (2 Columns) --- */
@media (max-width: 500px) {
  .en__field--donationAmt .en__field__element.en__field__element--radio {
      grid-template-columns: 1fr 1fr !important; /* Changes to 2 columns */
  }

  /* Makes the "Other" input container span the full width of the second row */
  .en__field--donationAmt .en__field__item:last-child {
      grid-column: span 2;
  }
}


.en__field > .en__field__label, .en__field .en__field__label.en__field__label--item {
  font-size: 1.2rem;
  line-height: 1.4;
}

.en__field__element.en__field__element--select select {
  background-color: transparent;
}

.en__submit button {
  padding: 20px !important;
  margin: 12px 0px !important;
  font-family: 'SofiaBold' !important;
  font-size: 1.5rem !important;
  
}

.en__submit span {
  font-family: 'SofiaBold' !important;
}

.en__field__element input, .en__field__element select {
  background: white;
}

/*Footer*/
/* --- Base Footer Styling --- */
#lc-footer {
  background-color: var(--lc-dark-blue);
  position: relative;
  overflow: hidden; /* Contains the absolute elements */
  color: var(--lc-text-white);
}

.lc-footer-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  position: relative; /* To contain its children */
  padding: 60px 40px;
}

/* --- LCLCLC Background Pattern (Recreation) --- */
/* This is a conceptual implementation of the repeating SVG background pattern */
.lc-bg-pattern {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100%;
  /* Replace the URL below with the actual SVG file path or base64 data */
  /* Example: background-image: url('path/to/LCLCLC.svg'); */
  background-image: url('https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/2478/Footer+Pattern.svg?v=1766023794000'); 
  background-repeat: repeat-x;
  background-position: top left;
  opacity: 0.1; /* Subtly fade the pattern */
  z-index: 0;
}

/* --- Contact Section (Top Right) --- */
.lc-contact-section {
  order: 2; /* Move to the right on desktop */
  text-align: right;
  margin-bottom: 20px;
  position: relative;
  z-index: 1; /* Keep content above the background pattern */
  padding-top: 1rem;
}

.lc-toll-free {
  display: block;
  color: var(--lc-light-blue);
  font-size: 14px;
  margin-bottom: 5px;
}

.lc-phone-number {
  display: block;
  color: var(--lc-text-white);
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  margin-bottom: 15px;
}

.lc-phone-number:hover {
  color: var(--lc-lime-green);
}

.lc-contact-button {
  display: inline-block;
  background-color: var(--lc-lime-green);
  color: var(--lc-dark-blue);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-family: 'SofiaBold';
  transition: background-color 0.3s;
}

.lc-contact-button:hover {
  background-color: var(--lc-violet); /* VIOLET HOVER APPLIED */
  color: var(--lc-lime-green); /* Change text color for better contrast on violet */
}

/* --- Main Info Section (Left side) --- */
.lc-main-info-section {
  order: 1; /* Keep on the left on desktop */
  width: 50%;
  max-width: 400px;
  position: relative;
  z-index: 1;
}

.lc-navigation-links {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  margin-top: 4rem;
}

.lc-navigation-links a {
  color: var(--lc-text-white);
  text-decoration: none;
  font-size: 16px;
  padding: 4px 0;
  transition: color 0.3s;
}

.lc-navigation-links a:hover {
  color: var(--lc-lime-green);
}

/* --- Bottom Row: Social and Legal --- */
.lc-bottom-row {
  color: var(--lc-text-white);
  font-size: 14px;
}

.lc-social-icons a {
  color: var(--lc-text-white);
  text-decoration: none;
  font-size: 18px;
  margin-right: 15px;
  transition: color 0.3s;
}

.lc-social-icons a:hover {
  color: var(--lc-lime-green);
}

.lc-copyright, .lc-charitable-number {
  margin: 10px 0 0 0;
}

/* --- Large Logo/Graphic Element (Bottom Right) --- */
.lc-large-logo-link {
  position: absolute;
  bottom: 0px; 
  right: 30px;
  width: 250px; /* Controls the size of the image container */
  height: 250px; /* Controls the size of the image container */
  z-index: 0; 
}

/* NEW STYLES for the image tag */
.lc-large-logo-img {
  width: 100%; /* Make the image fill the link container */
  height: 100%;
  object-fit: contain; /* Ensures the image scales properly */
  /* Optional: Apply opacity if the logo should be faded like the CSS shapes were */
  /* opacity: 0.8; */ 
}


/* --- Mobile Responsiveness (Screen size less than 768px) --- */
@media (max-width: 768px) {
  
  .lc-bg-pattern
       {
          top: -25px;
       }
  
  .lc-footer-content-wrapper {
      flex-direction: column;
      align-items: center; /* Center all elements vertically */
  }

  /* Reverse the order on mobile */
  .lc-contact-section {
      order: 1; 
      text-align: center;
      width: 100%;
  }
  
  .lc-main-info-section {
      order: 2;
      width: 100%;
      max-width: 100%;
      text-align: center;
  }

  .lc-navigation-links {
      align-items: center; /* Center links */
  }
  
  .lc-social-icons {
      margin-bottom: 15px;
  }

  /* Hide large logo on smaller screens or reduce its size */
  .lc-large-logo-link {
      display: block;
      position: unset;
      width: 150px;
      height: 150px;
  }
  
  .lc-footer-content-wrapper {
      padding: 20px 40px;
  }
}

@media only screen and (max-width: 500px) {
#engrid>.en__component--row.en__component--advrow {
      padding: 160px 20px 60px 20px;
  }
  
  
}

/*header*/
.tm-container {
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.tm-container--left-spacing {
  margin-left: 0px; 
}

/* =========================================
 HEADER CONTAINER
 ========================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0px;
  background-color: transparent;
  pointer-events: none;
}

.header__container {
  position: relative;
  padding-top: 40px;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* =========================================
 LOGO IMPLEMENTATION
 ========================================= */
.header__logo {
  z-index: 10;
  position: relative;
}

/* Adjusted width per user request (Standard Size) */
.header-logo__svg img {
  width: 140px;
  height: auto;
  display: block;
}

/* =========================================
 LINE ANIMATION (The "Complex Effect")
 ========================================= */
.lines {
  position: absolute;
  top: 0; /* Aligned to border */
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1;
  pointer-events: none;
}

/* Desktop Animation */
.line-animation--header {
  position: absolute;
  top: 0;
  left: 0;
  width: 480px; /* Reduced width */
  height: auto;
  z-index: -1;
  display: none; /* Hidden on mobile */
}

/* Mobile Animation */
.line-animation-header-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block; /* Shown on mobile */
}

/* Responsive Logic */
@media (min-width: 768px) {
  .line-animation--header {
      display: block;
  }
  .line-animation-header-mobile {
      display: none;
  }
}

/* Keyframes & Path Styles */
#Path_2573 { /* Desktop Line */
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  stroke: #a0ff45; /* Neon Green */
  stroke-miterlimit: 10;
  stroke-width: 15px;
  fill: none; /* Start empty */
  stroke-linecap: round;
  animation: drawDesktop 2.5s ease-out forwards;
}

@keyframes drawDesktop {
  to { 
      stroke-dashoffset: 0; 
      fill: #ffffff; /* Fills with white at the end */
  }
}

@keyframes drawMobile {
  to { 
      stroke-dashoffset: -850; 
  }
}

/* =========================================
 NAVIGATION & "FRANCOIS" (Language Switcher)
 ========================================= */
.header__main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
}

.header__extra-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Donate Button */
.button--dark-bg {
  background-color: rgb(160, 255, 69);
  color: rgb(30, 68, 103);
  border: none;
  padding: 10px 30px;
  border-radius: 25px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  text-decoration: none;
  display: inline-block;
}

.button--dark-bg:hover {
  transform: translateY(-2px);
  background-color: rgb(175, 255, 100);
}

/* Language Switcher ("Francois") */
.lang-switcher {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
}

.lang-switcher__item a {
  color: #333;
  text-decoration: none;
  opacity: 0.6;
}

.lang-switcher__item--is-active a {
  opacity: 1;
  color: #000;
}

.lang-switcher__item a:hover {
  opacity: 1;
}

/* Icons (Search & Burger) - CSS Only Shapes for Demo */
.icon--search {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  display: inline-block;
}
.icon--search::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 6px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
}

.burger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  padding: 0;
}

.burger__line {
  width: 100%;
  height: 2px;
  background-color: #333;
}

.burger__line--shorter {
  width: 70%;
  align-self: flex-end;
}

/*Payment Type*/
/* --- Variables for Branding Colors --- */
:root {
  --lc-lime-green: #9acd32; /* Used for active state */
  --lc-blue: #4a90e2;       /* Used for secondary details or border */
  --lc-light-grey: #ccc;    /* Border color */
  --lc-dark-text: #333;     /* Text color */
}

/* --- 1. Hide Default Radio Buttons --- */
.payment div .en__field__input--radio {
  /* Hides the actual radio button input element */
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* --- 2. Enable Flexible Layout for the Field Element --- */
.en__field--payment div .en__field__element {
  /* Use flexbox for horizontal arrangement */
  display: flex;
  /* Allow items to wrap to the next line if space is too tight (for responsiveness) */
  flex-wrap: wrap; 
  padding: 0;
  margin: 10px 0 0; /* Add margin above the boxes */
  
  /* Overall Border to create the 'connected' look */
  border: 2px solid var(--lc-light-grey);
  border-radius: 8px; 
  overflow: hidden; /* Important to contain inner borders and rounding */
}

/* --- 3. Styling for Each Payment Option Item --- */
.en__field--payment div .en__field__item {
  margin: 0;
  padding: 0;
  position: relative;
  /* Allow width to be determined by content, but grow equally */
  flex-grow: 1; 
  flex-shrink: 1;
  flex-basis: 0; /* Ensures equal distribution of remaining space */
  min-width: 80px; /* Minimum width for small options like DAF */
}

/* --- 4. Styling the Label (The Visible Box) --- */
.en__field--payment div .en__field__label--item {
  display: block;
  text-align: center;
  padding: 15px 10px; /* Generous vertical padding */
  margin: 0;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.05em;
  height: 100%;
  box-sizing: border-box;
  background-color: #fff;
  color: var(--lc-dark-text);
  
  /* Vertical line separator */
  border-right: 2px solid var(--lc-light-grey); 
  
  transition: all 0.2s ease;
  border-radius: 0; 
}

/* --- 5. Hover State for Interaction --- */
.en__field--payment div .en__field__label--item:hover {
  background-color: #f0f0f0; /* Slight gray background on hover */
}

/* --- 6. Remove the border on the last visible item --- */
.en__field--payment div .en__field__item:last-child .en__field__label--item {
  border-right: none;
}

/* --- 7. Active (Checked) State Styling (Using Lime Green) --- */
.en__field--payment div .en__field__input--radio:checked + .en__field__label--item {
  background-color: var(--lc-light-blue); 
  color: #fff;
  /* Match border color to active color for seamless look */
  border-right-color: var(--lc-light-blue); 
  z-index: 2; /* Ensures the active box overlaps any shared borders */
  border-radius: 20px !important;
}

/* --- 8. Fix Border Color for the item *before* the checked item --- */
/* This ensures the entire border segment looks uniform */
.en__field--payment div .en__field__item:has(> .en__field__input--radio:checked) + .en__field__item .en__field__label--item {
  /* Change the left border of the item *after* the checked one */
  border-left-color: var(--lc-lime-green);
}
/* Note: The ':has' selector may not be supported in older browsers, 
 but it is the only pure CSS way to target a previous sibling's effect. */
 
.en__field--payment div .en__field__label--item::before {
  display: none !important;
}

input, input.en__field__input, .radio-to-buttons_donationAmt .en__field--donationAmt.en__field--radio.en__field--withOther--active .en__field__item .en__field__input--other {
  background-color: transparent !important;
}

.en__field__item.en__field__item--other input {
  background-color: transparent !important;
  border-color: #369edd !important;
}

.lang-switcher { 
font-size: 1.2rem;
}

/*Other Amount Button Styles*/
/* 1. The Container: Anchor for the absolute dollar sign */
.en__field__item--other {
  position: relative; 
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--lc-dark-blue);
}

/* 2. The Dollar Sign: Pinned to the left inside the box */
.en__field__item--other::before {
  content: "$";
  position: absolute;
  left: 28px; 
  font-weight: bold;
  color: var(--lc-dark-blue);
  font-size: 1.2em;
  pointer-events: none; 
  z-index: 5;
  transition: color 0.2s ease;
}

/* 3. The Input */
.en__field__input.en__field__input--other {
  position: relative;
  display: flex;
  align-items: center !important;
  background-color: white !important;
  box-shadow: none;
  border: 1px solid #369edd !important;
  text-align: center;
  color: var(--lc-dark-blue) !important;
  padding: 20px !important;
  width: 100%;
  background-color: white !important;
  box-sizing: border-box;
  z-index: 1;
  transition: border-color 0.2s ease, color 0.2s ease; 
}

/* 4. HOVER STATE: Blue highlight */
.en__field__input.en__field__input--other:hover {
  border-color: var(--lc-dark-blue) !important; /* Ensuring the border is blue */
  color: var(--lc-dark-blue) !important; /* Makes the typed text blue on hover */
  cursor: pointer;
}

input.en__field__input.en__field__input--other {
  background-color: transparent !important;
  border-color: #369edd !important;
}

input.en__field__input.en__field__input--other {
  background-color: transparent !important;
  color:  #369edd !important;
  border-color:  #369edd !important;
}

/*Checkbox*/
.en__field__input--checkbox:checked+.en__field__label:before {
  background-color: #a0ff45 !important;
}

.en__field__input--checkbox:hover+.en__field__label:before {
  background-color: #a0ff45 !important;
}

div:not(.pboFB__sgEnable)>input[type=checkbox]+label:before {
  background-color: #fff !important;
  border-radius: 4px !important;
  align-self: center!important;
  align-items: self-start!important;
  /*-webkit-align-items: center!important;*/
}

.radio-to-buttons_donationAmt .en__field--donationAmt.en__field--radio input[type=radio]+label {
  word-break: normal !important;
}

.en__field__input--vgs {
      box-shadow: inset 0 2px 2px -1px #4a4a681a;
}

div#en__field_transaction_ccnumber {
flex-basis: 100%;
}

div#en__field_transaction_ccnumber:hover, div#en__field_transaction_ccexpire:hover, div#en__field_transaction_ccvv:hover {
  border-color: #767677 !important;
}
div#en__field_transaction_ccnumber:focus, div#en__field_transaction_ccexpire:focus, div#en__field_transaction_ccvv:focus {
  border-color: #767677 !important;
}
div#en__field_transaction_ccnumber:focus-within, div#en__field_transaction_ccexpire:focus-within, div#en__field_transaction_ccvv:focus-within {
  border-color: #767677 !important;
}

/*Radio to Buttons*/
/* Apply "radio-to-buttons" class to the form block level */

/* 1. The Container: Handles full width and wrapping */
/*.radio-to-buttons .en__field__element--radio {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*}*/

/* 2. The Item Wrapper: Grows to fill the row */
.radio-to-buttons .en__field__item {
display: flex;
flex-grow: 1;   /* Forces buttons to expand and fill the full row width */
flex-shrink: 0;
/* Basis set to 'auto' or a minimum width ensures they fit 
multiple in a row before wrapping */
flex-basis: calc(18% - 12px); 
min-width: 120px; /* Prevents buttons from getting too squashed */
margin: 0 !important;
}

/* 3. Hide Native Radio Circles */
.radio-to-buttons .en__field__input--radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

/* 4. The Button (Label) - Default State */
.radio-to-buttons .en__field__label--item {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
min-height: 60px;
padding: 12px 15px;
cursor: pointer;

/* Branding */
background-color: #ffffff; 
border: 2px solid var(--lc-blue); 
border-radius: 10px;

/* Text Styles */
color: var(--lc-blue);
font-size: 1.1rem;
font-weight: 600;
text-align: center;
/*transition: all 0.2s ease-in-out;*/
}

/* 5. Hover and Selected States (Same Style) */
.radio-to-buttons .en__field__input--radio:checked + .en__field__label--item,
.radio-to-buttons .en__field__label--item:hover {
background-color: #369edd !important;
border-color: #369edd; !important
font-size: 1.2rem;
color: #ffffff !important; /* White text when background is blue */
}

/* 6. Special handling for the 'Other' container in EN */
.radio-to-buttons .en__field__item--other {
flex-basis: 100%; /* Usually looks better if 'Other' input is full width */
margin-top: 5px !important;
}

.radio-to-buttons .en__field--radio input[type=radio]+label {
background-color: #fff !important;
border-color: var(--lc-light-grey) !important;
color: var(--lc-dark-blue) !important;
font-size: 1.2rem !important;
border-radius: 0px!important;
}

.en__field__element.en__field__element--radio.paymentinfo > div > .radio-to-buttons .en__field--radio input[type=radio]+label {
font-size: 1rem !important;
border-radius: 0px!important;
}

.radio-to-buttons .en__field--radio input[type=radio]+label:hover {
background-color: var(--lc-light-blue) !important;
color: white !important;
}

.radio-to-buttons .paymentinfo .en__field--radio input[type=radio]+label:hover {
background-color: #264464 !important;
color: white !important;
}

.radio-to-buttons_donationtype .en__field__element.en__field__element--radio .en__field__item:hover {
background-color: var(--lc-light-blue);
color: white;
}

.en__field__element.en__field__element--radio.paymentinfo > div > .radio-to-buttons .en__field--radio input[type=radio]+label {
padding: 20px !important;
min-height: 50px!important;
}


/*Payment Types*/
.en__field__element.en__field__element--radio.paymentinfo {
display: grid !important;
grid-template-columns: 1fr 1fr;
margin-left: 0px !important;
margin-right: 0px !important;
min-width: unset!important;
white-space: nowrap!important;
justify-content: flex-start!important;
}

.en__field__element.en__field__element--radio.paymentinfo > div {
min-width: unset;
padding: 0px !important;
border-radius: 0px !important;
}

.pseudo-en-field > label
{
margin-bottom: 5px!important;
}

.radio-to-buttons .en__field--radio input[type=radio]+label[for=en__field_transaction_giveBySelect1] {
border-top-left-radius: 8px !important;
}

.radio-to-buttons .en__field--radio input[type=radio]+label[for=en__field_transaction_giveBySelect2] {
border-bottom-right-radius: 8px !important;
border-top-right-radius: 8px !important;
}

.radio-to-buttons .en__field--radio input[type=radio]+label[for=en__field_transaction_giveBySelect3] {
border-top-right-radius: 8px !important;
padding: 20px !important;
}

.radio-to-buttons .en__field--radio input[type=radio]+label[for=en__field_transaction_giveBySelect4] {
border-bottom-left-radius: 8px !important;
margin-top: -1px;
}

.en__field__element.en__field__element--radio.paymentinfo > div > input.en__field__input:focus, input.en__field__input:hover, input:focus, input:hover {
  /*border: 0px!important;*/
  outline: none!important;
}

/*.en__field--give-by-select .en__field .en__field__element {*/
/*    display: grid !important;*/
/*    grid-template-columns: repeat(4, 1fr) !important;*/
/*}*/
.en__field--give-by-select .en__field .en__field__element.en__field__element--radio .en__field__item {
padding: 0px !important;
}

.en__field--give-by-select.en__field--radio .en__field__item input[type=radio]:checked+label{
background-color: #369edd !important;
}

img.digitalwallet {
width: 96px!important;
height: auto;
}

img.paypal {
width: 54px!important;
height: auto;
}

.en__component.en__component--formblock.radio-to-buttons.inmem-Y .en__field--gftrsn .en__field__element--radio .en__field__item input[type=radio]+label {
border-radius: 8px!important;
font-size: 1.2rem !important;
}

/*.en__field__element.en__field__element--radio.paymentinfo > div > .en__field__input--radio:focus+.en__field__label {*/
/*    outline: none !important;*/
/*}*/

/* Donation Type */
.en__component.radio-to-buttons_donationtype input[type=radio]:not(:checked)+label:before {
display: none;
}
.en__component.radio-to-buttons_donationtype input[type=radio]:checked+label:before {
display: none;
}

.radio-to-buttons_donationtype .en__field__element.en__field__element--radio
{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
justify-items: center!important;
column-gap: 15px;
}

.radio-to-buttons_donationtype .en__field__element.en__field__element--radio .en__field__item
{
width: 100%;
display: flex;
border: 1px solid #369edd;
justify-content: center;
border-radius: 8px;
padding: 0px!important;
}

.en__component.en__component--formblock.radio-to-buttons_donationtype input[type=radio]+label
{
width: 100%;
justify-content: center;
margin: 0px !important;
padding-top: 1.2ch;
padding-bottom: 1.2ch;
}


.en__component.en__component--formblock.radio-to-buttons_donationtype .en__field__input--radio:focus+.en__field__label,
.en__component.en__component--formblock.radio-to-buttons_donationtype .en__field__input--radio:active+.en__field__label {
/*outline: none !important;*/
background-color: var(--recurring-payment__button_background-color_checked);
border-color: var(--recurring-payment__button_border-color_checked);
color: var(--recurring-payment__button_color_checked);
border-radius: 6px!important;
}

.en__component.en__component--formblock.radio-to-buttons_donationtype .en__field--radio .en__field__item input[type=radio]:checked+label {
/*outline: none !important;*/
background-color: var(--recurring-payment__button_background-color_checked);
border-color: var(--recurring-payment__button_border-color_checked);
color: var(--recurring-payment__button_color_checked);
border-radius: 6px!important;
}

.en__field--give-by-select.en__field--radio .en__field__item input[type=radio]:hover+label[for=en__field_transaction_giveBySelect4] img {
filter: brightness(0) invert(1);
}

.en__field--give-by-select.en__field--radio .en__field__item input[type=radio]:checked+label[for=en__field_transaction_giveBySelect4] img {
filter: brightness(0) invert(1);
}

.en__field--give-by-select.en__field--radio .en__field__item input[type=radio]:hover+label[for=en__field_transaction_giveBySelect2] img
{
filter: brightness(0) invert(1);
}

.en__field--give-by-select.en__field--radio .en__field__item input[type=radio]:checked+label[for=en__field_transaction_giveBySelect2] img
{
filter: brightness(0) invert(1);
}

/*.en__field--give-by-select.en__field--radio .en__field__item input[type=radio]:checked+label[for=en__field_transaction_giveBySelect2] img {*/
/*    filter: brightness(280%) !important;*/
/*}*/

.paymentinfo input[type=radio]+label {
outline: none !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

/*input[type=checkbox]+label {*/
/*    display: -webkit-inline-box !important;*/
/*}*/
input[type=checkbox]+label > span
{
display: contents !important;
}