*{padding: 0; margin: :0;}

body{font-family: "Poppins", sans-serif;}

.page-id-24183 .elementor-widget-container > h3{display:none;}


.form-container-bx01 {background: #cbcbcb24; padding:20px; max-width:900px; width:95%; margin: 0 auto;}

.form-container-bx01 h5 {font-size: 27px; border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 13px;}

.form-container-bx01 h5.last-title01 {margin-bottom: 10px;}

.form-container-bx01 select {height: 42px; width: 99.5%; border-radius: 0;padding: 0 20px;line-height: 1;
font-size: 14px;font-weight: 400;border: 1px solid #ccc; margin-bottom: 22px;}

.form-container-bx01 .form-row01 {}

.form-container-bx01 .form-row01 .radio-inputbx11 {position: relative; display: flex;flex-wrap: wrap; border-radius: 0.3rem;
  box-sizing: border-box;box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06); padding: 0.25rem;  font-size: 14px;
border: solid 1px #108447; margin-top: 10px;}

.form-container-bx01 .form-row01 .radio-inputbx11 label.radio-input01 {flex: 1 1 auto; text-align: center;}

.form-container-bx01 .form-row01 .radio-inputbx11 label.radio-input01 input {display:none;}

.form-container-bx01 .form-row01 .radio-inputbx11 label.radio-input01 span.donation-name{display: flex;cursor: pointer;
align-items: center;justify-content: center;border: none;padding: .5rem 0;color: rgba(51, 65, 85, 1); transition: all .15s ease-in-out;}

.form-container-bx01 .form-row01 .radio-inputbx11 label.radio-input01 input:checked + span.donation-name {background-color:#108447; color:#fff;}

.form-container-bx01 .form-row01 .label-row01 {justify-content: space-between;display: flex;align-items: center;margin: 30px 0;}

.form-container-bx01 .form-row01 .label-row01 select {width: auto; margin-bottom: 0;}


.form-container-bx01 .form-row01  .radio-inputbx11.radio-inputbx22 {border: 0; box-shadow: unset; padding:0; gap: 0 10px;}
.form-container-bx01 .form-row01  .radio-inputbx11.radio-inputbx22 label.radio-input01{width: 31%; margin: 0 2px 12px;}

.form-container-bx01 .form-row01  .radio-inputbx11.radio-inputbx22 label.radio-input01 span.donation-name {width: 100%; height: 42px;
 border-radius: 0;padding: 0 20px;line-height: 1;font-size: 15px;font-weight: 400;border: 1px solid #ccc;background: #fff;}

.form-container-bx01 .form-row01 .amount-inputbx1 {margin:10px 0 10px; width: 100%;}

.form-container-bx01 .form-row01 .amount-inputbx1 input{width:95.5% !important; text-align: center;}

.form-container-bx01 input {width:100% !important; height: 42px; border-radius: 0;padding: 0 20px;line-height: 1;
font-size: 14px;font-weight: 400;border: 1px solid #ccc !important; margin-bottom: 22px;}

.form-container-bx01 label {font-size: 16px; text-transform: capitalize;}

.form-container-bx01 .form-row01  .input-rowbx1 {display: flex; justify-content: space-between;}
.form-container-bx01 .form-row01  .input-rowbx1 .input-bx1{width: 49%;}
.form-container-bx01 .form-row01  .input-rowbx1 .input-bx1.input-bx2 {width: 100%;}
.form-container-bx01 .form-row01  .input-rowbx1 .input-bx1.input-bx2 input {width:95% !important;}

.form-container-bx01 .form-row01  .input-rowbx1 .input-bx1 label {margin-bottom: 6px; display: block;}


.form-container-bx01 .form-row01 input#payfast-TXNAMT {text-align: center;}



.form-container-bx01 .form-row01 .radio-inputbx22 {}

.form-container-bx01 .form-row01 .radio-inputbx22 > label{display: block; margin-bottom: 19px;}

.form-container-bx01 .form-row01 .radio-inputbx22 .radio-input01 { display: inline-flex; align-items: center; margin-right: 15px;}

.form-container-bx01 .form-row01 .radio-inputbx22 .radio-input01 input {width: 15px !important; height: 15px; margin:1px 7px 0 0;}

.form-container-bx01 .form-row01 .radio-inputbx22 .radio-input01 input[type="radio"] {appearance: none;
 border: 5px solid white; border-radius: 50%; outline: none; background-color: white; cursor: pointer; padding: 7px; box-shadow: 0 0 0 1px #ccc;}


.form-container-bx01 .form-row01 .radio-inputbx22 .radio-input01 input[type="radio"]:checked {
            background-color: #108447;}


.form-container-bx01 .form-row01 .radio-inputbx22 .radio-input01 span.donation-name {margin-left:0;}




.donation-summerybx01 {}
.donation-summerybx01 h3 {font-size: 27px; font-weight: 500;}




.donation-summerybx01 .payment-row1 {display: flex; justify-content: space-between; margin-bottom: 20px;}

.donation-summerybx01 .payment-row1.total-payment1 {border-top: solid 1px #dadada; padding-top: 20px;  margin-top: 36px;}

.donation-summerybx01 .payment-row1.total-payment1 .payment-amount1 span{font-size: 22px; font-weight: 600;}

.form-container-bx01 .submit-btn01 {margin-top: 25px;}

.form-container-bx01 .submit-btn01 input {width: 100% !important; background: #108447; color: #fff; border: solid 2px #108447; cursor: pointer; font-size: 17px; text-transform: uppercase; height: 60px;}




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


.form-container-bx01 h5 {font-size:18px;}
.donation-summerybx01 h3 {font-size:18px;}
.donation-summerybx01 .payment-row1.total-payment1 .payment-amount1 span {font-size:18px;}






}




















.checkbx01 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbx01 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbx01:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbx01 input:checked ~ .checkmark {
  background-color: #108447 !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbx01 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbx01 .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}