.popup::-webkit-scrollbar {
  width: 10px;
  border-radius: 10px;
}

/* Track */
.popup::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #459aff;
  border-radius: 10px;
}

/* Handle */
.popup::-webkit-scrollbar-thumb {
  background: #459aff;
  border-radius: 10px;
}

/* Handle on hover */
.popup::-webkit-scrollbar-thumb:hover {
  background: #459aff;
  border-radius: 10px;
}

.alm_wpb_wrapper {
  max-width: 85% !important;
  margin: auto !important;
}

.donation-main {
  text-align: center;
  max-width: 88%;
  margin: auto;
  margin-top: 10px;
}

.require-donation {
  display: flex;
  justify-content: space-between;
  align-content: center;
  background-color: aliceblue;
  width: 270px;
  margin: 0 auto;
  padding: 0px 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.donated-users {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 260px;
  margin: 0 auto !important;
}

.donation-count {
  display: flex;
  align-content: center;
  flex-direction: row;
  justify-content: center;
  width: 200px;
  margin: 0 auto;
}

.donation-title {
  font-size: 20px;
  font-weight: 500;
  color: #6f6f6f;
  padding-top: 20px;
}

.goals {
  font-size: 20px;
  font-weight: 900;
  margin: 0px !important;
}

.require-amount {
  font-size: 20px;
  font-weight: 500;
  margin: 0px !important;
  font-weight: bold;
}

.total-donation {
  font-size: 12px;
  margin: 0px !important;
  display: flex;
}

.donors {
  font-size: 12px;
  font-weight: 500;
  padding-left: 5px !important;
}

.left-days {
  font-size: 12px;
  font-weight: 500;
  padding-left: 5px !important;
}

.donated-user {
  padding: 0px 40px;
  margin: 0px !important;
}

.user-name {
  font-size: 13px;
  font-weight: 300;
  margin: 0px !important;
  line-height: 24px;
  padding: 0px !important;
  color: #6f6f6f !important;
}

.user-amount {
  font-size: 13px;
  font-weight: 700;
  margin: 0px !important;
  line-height: 24px;
  padding: 0px !important;
  color: #6f6f6f;
}

.support-button {
  text-align: center;
}

.support-Primary {
  font-size: 27px;
  font-weight: 900;
  border: 1px solid #e6bb5a;
  background-color: #e6bb5a;
  padding: 10px 30px;
  outline: none !important;
  cursor: pointer;
  box-shadow: 0px 1px 5px #00000038 !important;
  text-transform: uppercase;
}

@media only screen and (min-width: 999Px) and (max-width: 1295px) {
  .support-Primary {
    font-size: 22px;
    padding: 10px 15px;
  }
}

@media only screen and (max-width: 490px) {
  .support-Primary {
    padding: 10px 30px;
  }
}

.level-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.level-count h2 {
  font-size: 20px;
  font-weight: 700;
  color: #6f6f6f;
}

.level-count h3 {
  font-size: 20px;
  font-weight: 500;
  color: #6f6f6f;
}

.price-box {
  margin-bottom: 20px !important;
  border: 1px solid #8f8f8f;
  border-radius: 6px;
}

@media only screen and (min-width: 1000px) and (max-width: 1082px) {
  .price-box {
    width: 300px !important;
  }
}

.target-header {
  display: flex;
  background-color: #f8f8f8;
  padding: 0px 0px 10px;
  justify-content: space-between;
  align-items: center;
  padding: 0px !important;
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
}

.left-header h3 {
  font-size: 20px;
  margin: 0px !important;
  color: #000;
  font-weight: 800;
  line-height: 18px;
  padding-top: 5px;
}

@media only screen and (min-width: 999px) and (max-width: 1260px) {
  .left-header h3 {
    font-size: 18px;
    padding-right: 5px;
  }
}

.left-header p {
  font-size: 12px;
  line-height: 2px;
  color: #000;
  font-weight: 500;
  padding-top: 4px;
  line-height: 15px;
}

.left-header {
  padding-left: 15px;
}

.right-header {
  background-color: #ebebeb;
  padding: 0px !important;
  padding: 10px;
}

.target-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

span.target-curr {
  font-size: 10px;
  font-weight: 800;
  align-self: flex-start;
  padding-top: 3px;
  padding-right: 3px;
}

.right-header {
  background-color: #ebebeb;
  border-top-right-radius: 10px !important;
  padding-left: 5px !important;
}

h3.target-amount {
  display: flex;
  font-weight: 800;
  font-size: 38px;
  padding: 10px 5px 10px 0px;
  margin: 0px !important;
  position: relative;
  width: 135px;
  text-align: center;
  height: 74px;
  color: #000;
  justify-content: center;
  align-items: center;
}

h3.target-total {
  font-size: 16px;
  font-weight: 800;
  color: #000;
  margin-top: 10px;
  margin-bottom: 0px !important;
}

button.support-target {
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background-color: #dddfff;
}

p.target-para {
  font-size: 16px;
  padding-left: 15px;
  padding-top: 10px;
  line-height: 20px;
  color: #0b0b0b;
  font-weight: 500;
  padding-right: 15px;
}

p {
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.5px;
  color: #484848;
}

.target-body p {
  font-size: 16px;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 20px;
  color: #0b0b0b;
  font-weight: 500;
  padding-right: 15px;
}

/* Popup Open button */
.open-button {
  color: #fff;
  background: #0066cc;
  padding: 10px;
  text-decoration: none;
  border: 1px solid #0157ad;
  border-radius: 3px;
}

.open-button:hover {
  background: #01478e;
}

.popup {
  display: none;
  height: 100%;
  position: fixed;
  z-index: 1000000000;
  left: 0px;
  right: 0px;
  background: #000000d6;
  overflow-x: hidden;
  width: 100%;
  top: 0;
  bottom: 0;
}

/* Popup inner div */
.popup-content {
  margin-top: 0;
  box-sizing: border-box;
  margin-top: 0px;
  border-radius: 3px;
  position: relative;
  text-align: center;
  height: 100%;
  margin: 0 auto;
  width: 38%;
  top: 10%;
}

.bg-color {
  padding: 50px;
  background-color: #fff;
  border-radius: 10px;
}

/* Popup close button */
.close-button {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -10px;
  right: -10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.8);
  font-size: 20px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.close-button:hover {
  background: rgba(0, 0, 0, 1);
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.form-inline input[type="number"] {
  vertical-align: middle;
  margin: 6px 0px 5px 10px;
  padding: 10px;
  background-color: #fff;
  border: 0px solid #ddd;
  color: #000;
  width: 150px;
  font-weight: 700;
  font-size: 26px !important;
  height: 60px;
  border-top-left-radius: 5px !important;
  border-bottom-left-radius: 5px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  appearance: textfield;
  -moz-appearance: textfield;
}

.form-inline input::-webkit-outer-spin-button,
.form-inline input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.donation-custom-button {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.donation-custom-button .donation-button {
  padding: 0px 15px !important;
  background-color: #efefef;
  color: #5f5f5f;
  cursor: pointer !important;
  border: 1px solid #576aff !important;
  font-weight: 800 !important;
  font-size: 30px !important;
  margin: 0px 4px 0px 0px !important;
  text-align: center;
  width: 110px;
  height: 70px;
  border-radius: 5px !important;
  line-height: 19px;
}

.custom-donation::placeholder {
  color: #727272;
  font-size: 14px;
  text-align: left;
  font-weight: 900;
  text-align: center;
}

.donation-custom-button .donation-button span {
  font-weight: 700 !important;
  font-size: 18px !important;
}

.form-inline button {
  padding: 20px 10px;
  background-color: #ffd800 !important;
  border: 1px solid #ffd800 !important;
  /* color: #000; */
  cursor: pointer;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-left: -1px;
  height: 60px;
}

.custom-donation h3 {
  color: #2f2f2f;
  font-size: 20px;
  font-weight: 700;
}

.divider-blue {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 30px;
}

/* To show the lines on right 
and left sides of the text */
.divider-blue::after,
.divider-blue::before {
  content: "";
  border: 1px solid #2d84eb;
  flex: 1;
}

/* Space on left and right sides of text */
.divider:not(:empty)::before {
  margin-right: 0.25em;
}

.divider:not(:empty)::after {
  margin-left: 0.25em;
}

.divider-blue span {
  background-color: #2d84eb;
  color: #fff;
  padding: 10px;
  border-radius: 50px;
}

.custom-donation {
  text-align: center;
  margin: 0px auto;
}

.upper-section {
  display: flex;
  font-size: 20px;
  padding: 0px 0px 10px 0px;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
}

.upper-section .col-8 {
  margin-top: 5px;
}

.upper-section .col-4 i[class*="fa-"] {
  top: 0px;
}

.upper-section .step-two {
  display: flex !important;
  white-space: pre-line;
  flex-direction: row !important;
  align-items: baseline;
}

.upper-section .step-two span {
  text-align: left;
  margin: 0;
  color: #fff;
  font-size: 25px;
  font-weight: 200;
}

.upper-section h3 {
  text-align: left;
  margin-top: 0px;
  font-size: 18px;
  line-height: 10px;
  font-weight: 400;
}

.upper-section h2 {
  text-align: left;
  margin: 0;
  color: #e3e3e3;
  font-size: 20px;
  font-weight: 900;
}

.upper-section .nectar_icon.icon_color_custom_ffffff {
  padding-top: 0px;
}

.upper-section i {
  font-size: 30px;
  line-height: 45px;
  height: 45px;
  width: 45px;
  color: #464d55;
  background-color: #ffffff;
  border-radius: 25px;
}

.level-section:after {
  content: "";
  display: table;
  clear: both;
}

.level-box {
  background: #fff;
  margin-bottom: 15px;
  border: 1px solid #707070;
  width: 100%;
  border-radius: 10px;
}

.level-header {
  display: flex;
  align-items: center;
}

.level-box p {
  padding-left: 0px;
  font-size: 16px;
  padding-top: 0px;
  letter-spacing: 0px;
  text-align: left;
  line-height: 18px;
}

.level-box .level-amount {
  color: #5f5f5f;
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 0px !important;
}

.level-box .level-name {
  color: #000;
  font-size: 20px;
  margin-bottom: 0px !important;
}

.level-box .level-curr {
  color: #5f5f5f;
  font-size: 18px;
  margin-bottom: 0px !important;
  font-weight: 400;
}

.level-left-header {
  flex: 20%;
  padding: 15px 0px;
}

.level-right-header {
  text-align: left;
  flex: 80%;
  padding: 15px 0px;
}

.bottom-section p {
  color: #989898;
  font-size: 12px;
  padding-top: 15px;
  font-weight: normal;
  line-height: 14px;
}

#donation-step-two {
  display: none;
}

#recurring-step-two {
  display: none;
}

#donation-step-three {
  display: none;
}

#recurring-step-three {
  display: none;
}

input.custom-detail {
  vertical-align: middle;
  margin: 0px 0px 0px 0px;
  padding: 10px;
  background-color: #fff;
  border: 0px solid #ddd;
  color: #868282;
  width: 49%;
  font-weight: 700;
  height: 50px;
  font-size: 22px;
  text-align: center;
  margin-top: 10px;
  box-shadow: 0px 3px 6px #00000038 !important;
}

input.card-number {
  border-radius: 5px !important;
  width: 100% !important;
  vertical-align: middle;
  margin: 10px 0px 0px 0px;
  padding: 10px;
  background-color: #fff;
  border: 0px solid #ddd;
  height: 50px;
  color: #868282;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  box-shadow: 0px 3px 6px #00000038 !important;
}

input.card-sub {
  border-radius: 5px !important;
  vertical-align: middle;
  margin: 10px 0px 0px 0px;
  background-color: #fff;
  border: 0px solid #ddd;
  height: 50px;
  color: #868282;
  font-size: 22px;
  font-weight: 700;
  width: 32.3%;
  text-align: center;
  box-shadow: 0px 3px 6px #00000038 !important;
}

.card-sub::placeholder {
  color: #868282;
  font-size: 16px;
  text-align: left;
  font-weight: normal;
  padding-left: 10px;
}

.card-number::placeholder {
  color: #868282;
  font-size: 16px;
  text-align: left;
  font-weight: normal;
}

.custom-detail::placeholder {
  color: #868282;
  font-size: 16px;
  text-align: left;
  font-weight: normal;
}

.submit-button {
  margin-top: 15px;
}

.progress {
  background: #cfcfcf;
  justify-content: flex-start;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  align-items: center;
  position: relative;
  display: flex;
  height: 20px;
  width: 270px;
  margin: 0 auto !important;
}

.progressBar {
  border-top-right-radius: 8px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 8px;
  background: #ffb70a;
  height: 20px;
  transition: width 0.5s ease-in-out;
}

.progressBarGreen {
  border-top-right-radius: 8px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 8px;
  /* background: #97e268; */
  height: 20px;
  transition: width 0.5s ease-in-out;
}

@media only screen and (min-width: 1050px) and (max-width: 1295px) {

  .progress,
  .require-donation {
    width: 240px;
  }
}

@media only screen and (min-width: 999px) and (max-width: 1050px) {

  .progress,
  .require-donation {
    width: 200px;
  }
}

.progressBarFull {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  /* background: #ffb70a; */
  height: 20px;
  transition: width 0.5s ease-in-out;
}

h1.donation-amount {
  font-size: 3.8em;
  color: #52892f;
  font-weight: 800;
  margin: 0px !important;
}

@media only screen and (min-width: 1050px) and (max-width: 1295px) {
  h1.donation-amount {
    font-size: 2.9em;
  }
}

@media only screen and (min-width: 999px) and (max-width: 1050px) {
  h1.donation-amount {
    font-size: 2.6em;
  }
}

@media only screen and (max-width: 480px) {
  h1.donation-amount {
    font-size: 2.9em;
  }
}

h4.donation-curreny {
  font-size: 16px;
  color: #707070;
  margin-top: 5px;
}

.submit-button {
  border: none;
  padding: 15px 20px;
  font-size: 20px;
  color: #2f2f2f;
  width: 50%;
  background-color: #ffe200;
  font-weight: 900;
  text-transform: capitalize;
  cursor: pointer;
  box-shadow: 0px 3px 6px #00000038 !important;
}

.submit-button:disabled {
  background-color: #e6d782;
}

.donate-button:disabled {
  background-color: #e6d782 !important;
  width: 100%;
  padding: 10px;
  outline: none !important;
  border: none;
  margin-top: 10px;
  font-weight: 900;
  color: #262626;
}

.donate-button {
  background-color: #ffe034 !important;
  color: #262626;
  width: 100%;
  padding: 10px;
  outline: none !important;
  border: none;
  font-weight: 900;
  margin-top: 10px;
}

.donate-button.recurring {
  background-color: #ffd600 !important;
  font-size: 22px;
  cursor: pointer;
}

.loader::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -60px;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

.center-heading {
  display: flex;
  justify-content: center;
}

.center-heading h1 {
  color: #fff;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

@media only screen and (max-width: 1080px) {
  .popup {
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
    top: 0;
  }

  .custom-donation {
    text-align: center;
    width: 93%;
    margin: 0 auto;
  }

  .popup-content {
    width: 100%;
    padding: 0px !important;
  }

  .upper-section {
    width: 92%;
    margin: 0 auto;
  }

  input.custom-detail {
    width: 100%;
  }

  input.card-sub {
    width: 100%;
  }

  .submit-button {
    width: 100%;
  }

  input {
    margin-bottom: 5px !important;
  }

  .upper-section h3 {
    line-height: 20px !important;
  }

  .upper-section h2 {
    line-height: 30px !important;
  }

  .form-inline input[type="number"] {
    margin: 5px 0px 5px 0px;
    width: 215px;
  }

  .level-header {
    flex-direction: column;
  }

  .level-left-header {
    padding: 15px 0px 0px 0px;
  }

  .level-right-header {
    padding: 0px 0px 15px 0px;
    text-align: center;
  }

  #donation-step-two .level-box p {
    text-align: center;
  }

  #donation-step-two .level-box p br {
    display: none;
  }

  #recurring-step-two .level-box p {
    text-align: center;
  }

  #recurring-step-two .level-box p br {
    display: none;
  }

  .level-box p {
    text-align: center;
    padding: 0px 5px;
  }

  .level-right-header {
    text-align: center;
  }

  .column-right button i {
    font-size: 13px;
  }

  .column-right button {
    font-size: 12px;
  }

  .column-left h3 {
    font-size: 12px;
  }

  .custom-amount-form {}
}

#snackbar-err-recurring,
#snackbar-err-onetime,
#snackbar-err,
#recurring-snackbar-err {
  visibility: hidden;
  margin-left: -145px;
  background-color: #f13535;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 20px 10px;
  position: absolute;
  margin: auto;
  z-index: 1100000;
  bottom: 5px;
  font-size: 15px;
  width: 90%;
  left: 0;
  margin-left: 30px;
}

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

  #snackbar-err-recurring,
  #snackbar-err-onetime,
  #snackbar-err,
  #recurring-snackbar-err {
    width: 50%;
    left: 20%;
  }
}

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

  #snackbar-err-recurring,
  #snackbar-err-onetime,
  #snackbar-err,
  #recurring-snackbar-err {
    width: 50%;
    left: 20%;
  }
}

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

  #snackbar-err-recurring,
  #snackbar-err-onetime,
  #snackbar-err,
  #recurring-snackbar-err {
    width: 60%;
    left: 15%;
  }
}

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

  #snackbar-err-recurring,
  #snackbar-err-onetime,
  #snackbar-err,
  #recurring-snackbar-err {
    width: 100%;
    left: 0;
    margin-left: 0px;
  }
}

#snackbar-err-recurring i,
#snackbar-err-onetime i,
#snackbar-err i,
#recurring-snackbar-err i {
  font-size: 15px;
}

#snackbar-err-recurring.show,
#snackbar-err-onetime.show,
#snackbar-err.show,
#recurring-snackbar-err.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar-success,
#onetime-snackbar-success,
#recurring-snackbar-success {
  visibility: hidden;
  margin-left: -165px;
  background-color: #3bb33b;
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 16px 50px;
  position: fixed;
  z-index: 1100000;
  left: 50%;
  bottom: 30px;
  font-size: 20px;
}

#snackbar-success i,
#onetime-snackbar-success i,
#recurring-snackbar-success i {
  font-size: 30px;
}

#snackbar-success.show,
#onetime-snackbar-success.show,
#recurring-snackbar-success.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

.column-right {
  float: left;
  width: 30%;
  padding: 10px;
}

.column-right button {
  font-size: 14px;
  background: #fff;
  padding: 10px 10px 10px 10px;
  border: 1px solid #000;
  font-weight: 900;
  width: 100%;
  text-align: left;
  color: #262626;
  cursor: pointer;
}

.column-right button i {
  float: right;
  top: 2px;
  font-size: 16px;
  font-weight: 800 !important;
}

.column-left {
  float: left;
  width: 70%;
  padding: 10px;
}

.column-left h3 {
  font-size: 18px;
  text-align: left;
  line-height: 20px;
  color: #2f2f2f;
}

.row-expand {
  background-color: #f7f7f7;
  padding: 10px 20px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-top: -10px;
}

@media only screen and (max-width: 480px) {
  .column-left h3 {
    font-size: 15px;
  }

  .column-right {
    width: 40%;
  }

  .column-left {
    width: 60%;
  }
}

@media only screen and (max-width: 420px) {
  .column-right {
    width: 45%;
  }

  .column-left {
    width: 55%;
  }

  .column-left h3 {
    font-size: 13px;
  }
}

#donation-expanded .row-expand {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  background-color: #efefef;
  padding: 10px 20px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

/* Clear floats after the columns */
.row-expand:after {
  content: "";
  display: table;
  clear: both;
}

#donation-expanded .bg-color1 {
  padding: 10px 30px 30px 30px;
}

.bg-color1 {
  background-color: #efefef;
  padding: 30px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  position: relative;
}

#donation-step-two .bg-color1 {
  border-radius: 10px;
}

#recurring-step-two .bg-color1 {
  border-radius: 10px;
}

.custom-amount-form {
  width: 340px;
  margin: 0 auto;
}

@media only screen and (max-width: 450px) {
  .custom-amount-form {
    max-width: 270px;
  }
}

@media only screen and (max-width: 410px) {
  .custom-amount-form {
    max-width: 100%;
  }
}

.custom-amount-form input {
  border: 1px solid #576aff !important;
  border-radius: 5px !important;
}

.custom-amount-form p {
  color: #989898;
  font-size: 12px;
  padding-top: 15px;
  font-weight: normal;
  line-height: 14px;
}

#donation-step-two .level-box,
#recurring-step-two .level-box {
  background-color: #576aff;
  border: none;
  box-shadow: 0px 3px 6px #00000038 !important;
}

#donation-step-two .level-right-header,
#recurring-step-two .level-right-header {
  flex: 78%;
  padding: 10px 0px;
}

#donation-step-two .level-left-header,
#recurring-step-two .level-left-header {
  flex: 20%;
}

#donation-step-two .level-box .level-amount,
#recurring-step-two .level-box .level-amount {
  color: #fff;
}

#donation-step-two .level-box .level-curr,
#recurring-step-two .level-box .level-curr {
  color: #fff;
}

#donation-step-two .level-box .level-name,
#recurring-step-two .level-box .level-name {
  color: #fff;
}

#donation-step-two .level-box p,
#recurring-step-two .level-box p {
  font-size: 16px;
  line-height: 18px;
  color: #fff;
}

#donation-step-three .bg-color1,
#recurring-step-three .bg-color1 {
  border-radius: 10px;
}

#donation-step-three h4,
#recurring-step-three h4 {
  font-weight: 900;
  font-size: 16px;
  color: #000;
  margin-top: 20px;
}

#donation-step-three p,
#recurring-step-three p {
  font-size: 16px;
  color: #000;
}

#donation-step-three .bottom-section p,
#recurring-step-three .bottom-section p {
  color: #989898;
  font-size: 12px;
  padding-top: 15px;
  font-weight: normal;
  line-height: 14px;
}

.video {
  height: 32vh;
  display: flex;
  position: relative;
  overflow: hidden;
  /* cursor: pointer; */
}

.video__placeholder {
  min-width: 100%;
  display: block;
}

/* #video-player {
    width: 100%;
    height: 40vh;
    top: 0;
    left: 0;
    position: absolute;
    display: block;
} */

.video-loader {
  align-self: center;
}

.video-loader::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -5px;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@media only screen and (max-width: 690px) {
  .price-box {
    max-width: 85% !important;
    margin: auto !important;
    margin-bottom: 20px !important;
  }

  .level-count {
    max-width: 85% !important;
    margin: auto !important;
  }
}

.daily-donations h3 {
  margin: 0px !important;
}

.daily-donations h6 {
  color: black !important;
  font-weight: bolder;
  margin-bottom: 15px;
  margin-top: -4px;
}

.daily-donations .color-red {
  color: red;
}

.daily-donations .end-date {
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 0px;
  margin-top: 10px;
}

.daily-donations .end-date h6 {
  margin-bottom: 0px;
}

.daily-donations .bg-color {}

.bottom-link {
  background-color: #f1f1f1;
  padding: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: -20px;
}

.bottom-link a {
  font-size: 18px;
  color: black;
  font-weight: bolder;
  text-decoration: none;
  cursor: pointer;
}

.main-section {
  display: flex;
  align-items: center;
}

#recurring-step-two .left-section {
  flex: 50% !important;
  padding: 15px 0px;
  padding-left: 25px;
  text-align: left;
}

#recurring-step-two .right-section {
  text-align: right;
  flex: 50% !important;
  padding: 15px 0px;
  padding-right: 25px;
}

#recurring-step-two .left-section h3,
#recurring-step-two .right-section h3 {
  font-size: 14px !important;
  line-height: 25px;
}

@media only screen and (max-width: 1080px) {
  #recurring-step-two .main-section {
    flex-direction: row !important;
  }
}

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

  #recurring-step-two .left-section h3,
  #recurring-step-two .right-section h3 {
    font-size: 13px !important;
  }

  #recurring-step-two .left-section {
    padding-left: 10px;
    flex: 60% !important;
  }

  #recurring-step-two .right-section {
    padding-right: 10px;
    flex: 40% !important;
  }
}

.recurring-currency-code {
  position: absolute;
  right: 0px;
  top: 1px;
  font-size: 12px;
  color: white;
  font-weight: 800;
}

.pr30 {
  padding-right: 30px;
}

.recurring-currency-div {
  position: relative;
}

.ml-28 {
  margin-left: 28px !important;
}

.second-popup-container {
  max-width: 500px;
  margin: auto;
}

.button-one-off {
  text-align: center;
  margin-top: 20px;
}

.button-one-off a {
  color: black;
  font-size: 15px;
}

#second-popup {
  position: relative;
}

.raised-amount-div {
  margin: 0px;

}

.raised-amount-div .bg-grey-sum {
  padding: 10px;
  background-color: #f3f3f3;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.raised-amount-div .bg-grey-sum .d-flex {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.donation-type .d-flex {
  margin-top: 15px;
}

.raised-amount-div .bg-grey-sum .raise-div h3 {
  margin: 0px !important;
  color: #6d6d6d;
  font-size: 16px !important;
  font-weight: 700;
}

.raised-amount-div .bg-grey-sum .raise-div h4 span {
  margin-right: 1px !important;
}

.raised-amount-div .bg-grey-sum .raise-div h4 {
  margin: 0px !important;
  font-size: 18px;
  font-weight: 800;
  line-height: 22px;
}

.raised-amount-div .progress {
  width: 100% !important;
  /* background-color: #527A58 !important; */
  /* background: #ffb70a; */
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

.progressBarFull {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #ffb70a;
  height: 20px;
  transition: width 0.5s ease-in-out;
}

.raised-amount-div .donation-type {
  margin-top: 10px;
  text-align: left;
}

.raised-amount-div .donation-type h3 {
  margin-bottom: 0px !important;
  font-weight: 700;
}

.raised-amount-div .donation-type-btn {
  border: unset;
  padding: 18px 40px;
  cursor: pointer;
  border-radius: 10px !important;
  background-color: #F4F0EF;
  font-weight: 600;
  font-size: 18px;
  border: 2px solid #f4f0ef;
}

.raised-amount-div .donation-type .active {
  border: 2px solid #085BFF;

}

.raised-amount-div .donation-type .fa-heart {
  color: #B33DE8;
  margin-right: 10px;
}

.raised-amount-div .donation-amount {
  margin-top: 30px;
  text-align: left;
  position: relative;
}

.raised-amount-div .donation-amount h3 {
  font-weight: 700;
}

.raised-amount-div .donation-amount-btn {
  margin-bottom: 5px;
  width: 32%;
  height: 70px;
  cursor: pointer;
  border: unset;
  border-radius: 10px !important;
  background-color: #F4F0EF;
  font-size: 21px;
  line-height: 17px;
  font-weight: 700;
}


@media (max-width: 1280px) {
  .raised-amount-div .donation-amount-btn {
    width: 31%;
  }
}

@media (max-width: 800px) {
  .raised-amount-div .donation-amount-btn {
    width: 32%;
  }
}

.raised-amount-div .donation-amount .active {
  background-color: #085BFF;
  color: #fff;
  box-shadow: 0px 1px 5px #00000038 !important;

}

.raised-amount-div .donation-amount-btn span {
  font-size: 12px;
  font-weight: bolder;
}

.raised-amount-div .donation-amount-btn div {
  font-size: 10px;
  text-transform: uppercase;
}

.raised-amount-div .donation-amount-btn small {
  font-size: 16px;
  font-weight: 500;
}

.raised-amount-div input {
  background-color: #F4F0EF !important;
}

.raised-amount-div #err-message p {
  text-align: center;
  color: red;
  font-size: 14px;
  position: absolute;
  width: 100%;
}

.raised-amount-div #err-message {
  display: none;
}

.raised-amount-div #err-message i {
  text-align: center;

}


/* Button to open the popup */
#open-popup-btn {
  border-radius: 15px !important;
  font-size: 20px;
  margin-top: 30px;
  height: 50px;
  font-weight: 900;
  border: 1px solid #e6bb5a;
  background-color: #e6bb5a;
  padding: 10px 30px;
  outline: none !important;
  cursor: pointer;
  box-shadow: 0px 1px 5px #00000038 !important;
  text-transform: uppercase;
}

/* Popup container */
.alm-fund-popup-container {
  display: none;
  /* Hide initially */
  /* position: fixed; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 990000009;
}

/* Popup content */
.alm-fund-popup-content {
  background-color: #363636;
  border: 2px solid #FF1C89;
  border-radius: 10px;
  /* height: 92vh; */
  width: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease;
  position: relative;
}

.alm-fund-popup-content a {
  position: absolute;
  right: -18px;
  background-color: #ffffff !important;
  top: -15px;
  border-radius: 26px;
  padding: 1.1rem 1.1rem;
  border: 2px solid #ff1c89;
}

.alm-fund-popup-content a i {
  cursor: pointer;
  color: #ff1c89 !important;
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 25px;
}

.alm-fund-popup-thankyou,
.alm-fund-popup-contribution {
  background-color: #180076;
  border: 2px solid #180076;
  border-radius: 10px;
  /* height: 88vh; */
  width: 700px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease;
  position: absolute;
}

.alm-fund-popup-contribution {
  background-color: #d0c9c9 !important;
  width: 600px !important;
  /* height: 70vh;
  overflow-y: auto;
  overflow-x: hidden; */
}

@media (max-width: 400px) {

  .alm-fund-popup-thankyou,
  .alm-fund-popup-contribution {
    width: 100%;
  }
}

.alm-fund-popup-thankyou a {
  position: absolute;
  background-color: #ffffff !important;
  top: -17px;
  border-radius: 26px;
  padding: 1.1rem 1.1rem;
  border: 2px solid #ff1c89;
  right: -15px;
}

.alm-fund-popup-contribution a {
  position: absolute;
  background-color: #ffffff !important;
  top: 5px;
  border-radius: 26px;
  padding: 1.1rem 1.1rem;
  border: 2px solid #ff1c89;
  right: 5px;
  cursor: pointer;
}

.alm-fund-popup-thankyou a i {
  color: black;
  position: absolute;
  top: 10px;
  right: 9px;
  font-size: 20px;
  color: #ff1c89 !important;
}

.alm-fund-popup-contribution a i {
  color: black;
  position: absolute;
  top: 10px;
  right: 9px;
  font-size: 20px;
  color: #ff1c89 !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* Donation Container */
.alm-fund-donation-container {
  border-radius: 10px !important;
  font-family: 'Open Sans', Helvetica, sans-serif;
  text-align: left;
}

.contribution-breakdown-container {
  /* height: 665px; */
  /* height: auto; */
  /* padding-bottom: 25px; */
  overflow-y: hidden;
  overflow-x: hidden;
  padding-bottom: 0px;
}

.alm-fund-top-section,
.contribution-top-section {
  display: flex;
  justify-content: space-between;
  padding: 22px;
  background-color: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 95%;
}

/* Header Section */
.alm-fund-header h1 {
  font-size: 30px;
  line-height: 36px;
  margin-bottom: 0px !important;
  color: #000000;
}

.alm-fund-header p {
  color: #000000;
  font-size: 16px;
  font-weight: bolder;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 10px !important;
  /* line-height: 10px; */
}

#card-sub-heading {
  font-weight: normal !important;
  margin-top: 0px !important;
}


.alm-fund-header span {
  color: #000000;
  font-size: 14px;
  margin-bottom: 0px;
  line-height: 21px;
}

/* Contribution Options */
.alm-fund-contribution-options p {
  padding-bottom: 0px !important;
  color: #000;
}

.alm-fund-contribution-options {

}

.alm-fund-contribution-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}

.alm-fund-contribution-buttons .amount-fund {
  position: absolute;
  right: 10rem;
  color: #4A4949;
  font-weight: 500;
}

.alm-fund-contribution-buttons .amount-fund .currency-symbol {
  color: #4A4949;
  font-weight: 500;
}

.input-container-btn-onetime {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff;
}

.input-container-btn-onetime .currency-symbol {
  font-weight: bold;
  width: 40px;
}

#inputFieldAmount {
  width: 150px;
  padding: 0px 10px;
  font-size: 32px;
  position: relative;
  font-weight: 700;
  border: 2px solid #000;
}

.input-container-btn-onetime input#inputFieldAmount {
  border: none;
  outline: none;
  padding: 0px;
  width: 100px;
  background: white;
  text-align: center;
}

.alm-fund-contribution-buttons .alm-fund-selected {
  padding: 12px 30px;
  background-color: #d9d5d5;
  border: unset;
  font-size: 16px;
  color: #4A4949;
  font-weight: 800;
  cursor: pointer;
}

.alm-fund-selected:disabled {
  pointer-events: none;
  opacity: 0.5;
  background-color: #ccc;
  cursor: not-allowed;
}

.alm-fund-contribution-buttons .active {
  background-color: #FF0099 !important;
  color: #fff !important;
}

.alm-fund-billing-details {
  padding: 20px;
  background-color: #f4f4f4;
  text-align: left;
}

.alm-fund-billing-details p {
  margin-bottom: 0px;
  padding: 0px;
  font-weight: bold;
  line-height: 10px;
  color: #000000;
}

.alm-fund-billing-details small {
  margin-bottom: 0px;
  font-weight: 300;
  color: #000000;
  font-size: 14px;
  margin-top: 5px;
  display: block;
}

.alm-fund-billing-details #fundraisingCardForm,
.alm-fund-billing-details #fundraisingCardFormRecurring {
  width: 100%;
  margin-top: 5px;
}

.alm-fund-billing-details .col-form {
  display: flex;
  gap: 10px;
}

.alm-fund-billing-details #fundraisingCardForm input,
.alm-fund-billing-details #fundraisingCardFormRecurring input {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #fff !important;
  margin-bottom: 10px;
  border: 1px solid #000000 !important;
  border-radius: 5px;
  font-size: 16px;
}

/* Contribution Summary */
.alm-fund-contribution {
  background-color: #363636;
  padding: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.alm-fund-contribution-summary {
  color: #ffffff;
  display: flex;
  justify-content: space-between;
}

.alm-fund-onetime-contribution {
  background-color: #363636;
  padding: 20px;
  text-align: center;
}

.width-34 {
  width: 45%;
}

.alm-fund-breakdown {
  width: 66%;
  justify-content: flex-end;
  display: flex;
}

.alm-fund-breakdown-container {}

#onetimeSummary .alm-fund-summary h2 {
  margin: 5px auto;
  padding: 10px 15px 10px 0px;
  justify-content: center;

}

.alm-fund-summary h6 {
  color: #ffffff;
  font-size: 16px;
}

.alm-fund-summary h2 {
  font-size: 33px;
  color: #ffffff;
  background-color: #4D4D4D;
  padding: 10px 15px 0px 25px;
  border-radius: 8px;
  position: relative;
  width: fit-content;
  display: flex;
  align-items: baseline;
  padding-left: 19px !important;
}

.alm-fund-summary .curreny-span {
  font-size: 14px !important;
  color: #ffffff;
  font-weight: 400;
  margin-left: 6px;
}

.alm-fund-summary p {
  font-size: 14px;
  color: #ffffff;
  padding-bottom: 0px !important;
  margin-bottom: 0px !important;
  line-height: 20px !important;
  font-weight: 300;

}

.alm-fund-breakdown h6 {
  color: #ffffff;

}

.alm-fund-breakdown h6 span {
  cursor: pointer;
}

.alm-fund-breakdown-items {
  display: flex;
  gap: 10px;
}

.alm-fund-day {
  background-color: white;
  color: black;
  padding: 8px 20px;
  border-radius: 5px;
  text-align: center;
}

.alm-fund-day p {
  color: #000;
  padding-bottom: 0px;
  font-size: 28px;
  font-weight: 700;
  line-height: 15px;
}

.alm-fund-day small {
  font-size: 10px !important;
}

.fund-align {
  text-align: center !important;
}

/* Donate Button */
.alm-fund-donate-btn {
  margin-top: 20px;
  background-color: #FFA800 !important;
  padding: 10px;
  width: 50%;
  border: none;
  color: black;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 800;
}

.alm-fund-donate-btn:hover {
  background-color: #ffb300;
}

.alm-fund-donate-btn:disabled {
  opacity: 0.5;
}

.alm-fund-header-thankyou {
  background-color: #ffff;
  padding: 30px;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;


}

.alm-fund-header-thankyou h6 {
  padding-bottom: 6px !important;
  font-size: 22px;
  margin-bottom: 0px !important;
  color: #000000;
}

.alm-fund-header-thankyou p {
  font-size: 20px;
  color: #000000;
  font-weight: 300;
  padding-bottom: 0px;
}

.alm-fund-des {
  padding: 60px;
  text-align: center;
  padding-top: 35px;
  padding-bottom: 15px;
}

.alm-fund-des p {
  color: #fff;
  font-weight: 200;
  font-size: 20px;
  margin-top: 2rem;
}

.alm-fund-des h3 {
  font-size: 45px;
  color: #ffffff;
  border-radius: 8px;
  position: relative;
  margin-bottom: 20px;
}

.alm-fund-des span {
  /* top: 10px; */
  font-size: 14px !important;
  color: #ffffff;
  font-weight: 400;
  /* position: absolute;
  left: 15.5rem;
  bottom: 0; */
  margin-left: -2px;
}

.alm-fund-des button {
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  background-color: transparent;
  padding: 15px 35px;
  margin: 0.5rem;
  cursor: pointer;
}

.alm-fund-des .small-txt {
  color: #fff;
  font-weight: 300;
  font-size: 17px;
  margin: 0px;
  cursor: pointer;
}

@media only screen and (max-width: 480px) {
  .alm-fund-popup-content {
    width: 92% !important;
  }

  .alm-fund-top-section,
  .contribution-top-section {
    flex-wrap: wrap;
  }

  .alm-fund-donate-btn {
    width: 100%;
  }

  .alm-fund-contribution-summary {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.active-amount-btn {
  background-color: #576aff !important;
  color: white !important;
}

.inactive-amount-btn {
  background-color: #F4F0EF !important;
  color: #000 !important;
}


.raised-amount-div .donation-type .fa-heart {
  margin-right: 6px !important;
  padding-right: 0px !important;
  padding-top: 0px !important;
  color: #811CE5 !important;
  width: 20px !important;
  height: 17px !important;
}

#donateAnonymous {
  margin-top: 0px;
  margin-bottom: -5px;
}

#donateAnonymousRecurring {
  margin-top: 0px;
  margin-bottom: -5px;
}

#processingFeesForm label,
#giftAidForm label,
#giftAidForm-onetime label,
#donateAnonymous label,
#donateAnonymousRecurring label {
  font-size: 17px;
}

.recurring-button {
  cursor: pointer;
}

.contribution-calendar {
  letter-spacing: 1px;
  border: 2px solid black;
  font-size: 18px;
  font-weight: 400;
  background-color: transparent;
  padding: 15px 35px;
  margin: 0.5rem;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}

.alm-fund-des h4 {
  color: white;
  font-size: 21px;
}

.thankyou-container {
  max-width: 80%;
  margin: auto;
}

.width-54 {
  width: 54%;
  margin: auto;
}

.m-t-10 {
  margin-top: 10px;

}

.cl-p {
  color: #FFA800 !important;
  cursor: pointer;
}

.contribution-amount {
  padding: 10px;
  background-color: #d0c9c9 !important;
}

.contribution-top-section {
  background-color: #d0c9c9 !important;
}

.contribution-amount-calendar {
  padding: 10px 20px;
  font-size: 20px;
  color: black;
  border: 3px solid black;
  border-radius: 15px;
  text-align: center;
  font-weight: bolder;
}

.contribution-amount-calendar span {
  font-size: 22px;
}

.contribution-top-section .alm-fund-header p {
  line-height: 23px !important;
  font-family: 'Open Sans', Helvetica, sans-serif !important;
}

.contribution-columns {
  display: flex;
  justify-content: space-between;
  padding: 29px;
  padding-top: 10px;
  padding-bottom: 30px;
  background-color: #d0c9c9 !important;
}

.contribution-columns .column {
  margin: 0 21px;
  flex: 1;
}

.contribution-columns .column .row {
  padding: 1px 0;
  color: black;
  font-size: 15px;
}

.contribution-top-section h1 {
  font-size: 23px;
  line-height: 27px;
}

.contribution-bottom-section {
  background-color: black;
  color: white;
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
  padding-right: 50px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: sticky;
  bottom: 0;
  width: 100%;
}

.contribution-bottom-section h1 {
  font-size: 20px;
  color: white;
}

.contribution-bottom-section .column h1 span {
  font-size: 15px;
  margin-left: 5px;
}

.text-center {
  text-align: center;
}


#see-more-btn {
  display: block;
  margin: 10px auto;
  background: none;
  border: none;
  cursor: pointer;
}

#see-less-btn {
  display: none;
  margin: 10px auto;
  background: none;
  border: none;
  cursor: pointer;
}

.column-2 {
  display: block;
}

@media (max-width: 770px) {

  .contribution-bottom-section h1 {
    font-size: 20px !important;
    color: white;
  }

  .contribution-bottom-section .column h1 span {
    font-size: 15px;
    margin-left: 5px;
  }

  .contribution-breakdown-container {
    /* overflow-y: scroll;
    scrollbar-width: thin;
    overflow-x: hidden;
    padding-bottom: 90px;
    scrollbar-width: thin; */
  }

  .contribution-bottom-section {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .contribution-columns {
    flex-direction: column;
  }

  /* .column-2 {
    display: none;
  } */

  #see-more-btn {
    display: block;
    margin: 10px auto;
    background: none;
    border: none;
    cursor: pointer;
  }

  #see-less-btn {
    display: none;
    margin: 10px auto;
    background: none;
    border: none;
    cursor: pointer;
  }

}

#pagination-container {
  width: 100%;
  position: absolute;
  bottom: 7px;
  text-align: center;
  display: flex;
  justify-content: center;
}

#pagination-container button {
  cursor: pointer;
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

#pagination-container button.active {
  background-color: #FFA800;
  color: white;
  border: 1px solid #FFA800;
  font-weight: bolder;
}

#pagination-container button:hover:not(.active) {
  background-color: #ddd;
}

.blurred {
  filter: blur(2px);
  /* Adjust the blur intensity */
  pointer-events: none;
  /* Prevent clicking on background elements */
}

.contribution-top-section {
  padding: 48px;
  padding-top: 48px;
  padding-bottom: 0px;
}

.support-btn {
  border-radius: 15px !important;
  font-size: 20px;
  margin-top: 30px;
  height: 50px;
}

@media only screen and (max-width: 400px) {
  .alm-fund-contribution-buttons .amount-fund {
    right: 4rem;
  }
}

.raised-amount-div .donation-amount h3,
.raised-amount-div .donation-type h3 {
  font-size: 16px !important;
}

/* Responsive Design */

@media only screen and (max-width: 600px) {
  .donation-main {
    max-width: 100%;
  }

  .raised-amount-div .donation-type-btn {
    padding: 10px 12px;
    font-size: 12px;
  }

  .raised-amount-div .donation-amount h3,
  .raised-amount-div .donation-type h3 {
    font-size: 16px !important;
  }

  .support-btn {
    font-size: 13px;
    margin-top: 24px;
    height: 43px;
  }

  .raised-amount-div .donation-type .fa-heart {
    margin-right: 1px !important;
    padding-right: 0px !important;
    padding-top: 1px !important;
    height: 12px !important;
  }

  .raised-amount-div .bg-grey-sum .raise-div h4 {
    font-size: 14px;
  }

  .raised-amount-div .donation-amount-btn {
    font-size: 15px;
  }

  .raised-amount-div .donation-amount-btn span {
    font-size: 10px;
  }

  .alm-fund-top-section,
  .contribution-top-section {
    display: block;
    text-align: center;
    width: 100%;
  }

  .alm-fund-contribution-buttons {
    justify-content: center;
  }

  /* .alm-fund-billing-details {
    text-align: center;
  } */

  .mobile-block {
    display: block !important;
  }
}

@media only screen and (max-width: 600px) {
  .alm-fund-day {
    padding: 0px;
    width: 33%;
  }

  .alm-fund-contribution-summary {
    gap: 10px;
  }

  .alm-fund-contribution-summary {
    display: block;
  }

  .alm-fund-popup-contribution {
    background-color: #d0c9c9 !important;
    width: 82%;
    /* height: 68%; */
  }

  .contribution-breakdown-container {
    height: auto;
  }

  .alm-fund-summary {
    width: 100%;
    text-align: center;
  }

  .alm-fund-summary h2 {
    padding: 0px 15px 0px 25px;
    justify-content: center;
  }

  .alm-fund-breakdown {
    width: 100%;
    justify-content: flex-start;
    display: flex;
  }

  .alm-fund-popup-contribution {
    width: 85% !important;
  }

  .contribution-top-section {
    padding: 50px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .contribution-columns {
    text-align: center;
  }

  .contribution-bottom-section h1 {
    font-size: 13px !important;
  }

  .contribution-bottom-section .column h1 span {
    font-size: 11px;
  }

  .contribution-bottom-section {
    padding-left: 25px;
    padding-right: 25px;
  }

  .alm-fund-day p {
    font-size: 16px;
  }

  .contribution-amount-calendar {
    padding: 2px 4px;
    font-size: 15px;
    /* margin-right: 27px; */
  }

  .contribution-bottom-section {
    width: 100%;
  }

  .alm-fund-contribution-options {
    width: 100%;
    margin: auto;
    margin-top: 14px;
  }

  .s-m-width-50 {
    width: 50%;
  }

  .alm-fund-breakdown {
    justify-content: center;
    margin-top: 20px;
    text-align: center;
  }

  .alm-fund-popup-content a {
    right: 2px;
    top: 0px;
  }

  .alm-fund-donation-container {
    border-radius: 10px !important;
    /* height: 90vh; */
  }

  .over-flow-scroll {
    /* overflow-y: scroll;
    scrollbar-width: thin; */
  }

  /* For WebKit-based browsers (Chrome, Safari) */
  .over-flow-scroll::-webkit-scrollbar {
    width: 5px;
    /* Adjust scrollbar width */
  }

  .over-flow-scroll::-webkit-scrollbar-track {
    background: transparent;
    /* Makes the track invisible */
  }

  .over-flow-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    /* Custom scrollbar thumb */
    border-radius: 10px;
    /* Makes it rounded */
  }

  .contribution-top-section h1 {
    font-size: 16px;
  }

  .alm-fund-contribution-buttons .amount-fund {
    right: 16rem;
  }

  .input-container-btn-onetime input#inputFieldAmount {
    width: 120px !important;
  }
}

@media only screen and (max-width: 350px) {
  .alm-fund-contribution-buttons .amount-fund {
    right: 9rem;
  }
}

@media only screen and (max-width: 440px) {
  .alm-fund-contribution-buttons .amount-fund {
    right: 11rem;
  }

  #oneTimeThankyouSuccess {
    position: absolute !important;
    width: 250px;
    border-radius: 10px;
    padding: 20px
  }
}

@media only screen and (max-width: 520px) {
  .alm-fund-contribution-buttons .amount-fund {
    right: 0px;
  }

  /* For WebKit-based browsers (Chrome, Safari) */
  .alm-fund-contribution-buttons::-webkit-scrollbar {
    width: 5px;
    /* Adjust scrollbar width */
  }

  .alm-fund-contribution-buttons::-webkit-scrollbar-track {
    background: transparent;
    /* Makes the track invisible */
  }

  .alm-fund-contribution-buttons::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    /* Custom scrollbar thumb */
    border-radius: 10px;
    /* Makes it rounded */
  }

}

@media only screen and (max-width: 700px) {
  .alm-fund-summary h2 {
    font-size: 25px;
  }
}

@media only screen and (max-width: 790px) {
  .alm-fund-summary h2 {
    width: 95%;
  }
}

@media only screen and (max-width: 999px) {
  .alm-fund-popup-content {
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .container-wrap .full-width-content .vc_row-fluid[data-column-margin*=px]>.span_12>.wpb_column {
    margin-bottom: 30px;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .alm-fund-popup-content {
    width: 95%;
    margin-top: 50px;
  }

  .alm-fund-day p {
    font-size: 18px;
  }

  .alm-fund-summary h2 {
    font-size: 26px;
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1100px) {
  .raised-amount-div .donation-type-btn {
      padding: 13px 5px; 
      font-size: 13px;
  }
}

@media only screen and (min-width: 1100px) and (max-width: 1320px) {
  .raised-amount-div .donation-type-btn {
    padding: 14px 17px;
    font-size: 13px;
  }

  .raised-amount-div .bg-grey-sum .raise-div h4 {
    font-size: 15px;
  }

  .raised-amount-div .donation-type .fa-heart {
    padding-top: 3px !important;
  }
} 

@media only screen and (min-width: 1300px) and (max-width: 2200px) {
  .raised-amount-div .donation-type-btn {
    padding: 14px 19px;
  }
}

.alm-fund-popup-contribution .close-contribution-popup {
  background-color: #d0c9c9 !important;
  border: none;
}

.alm-fund-popup-contribution .close-contribution-popup i {
  color: black !important;
}

.btn-p-l {
  padding-left: 1px;
}

.font-19 {
  display: block !important;
  font-size: 23px !important;
}

.contribution-amount-calendar .amount-cycle {
  display: block !important;
  text-transform: capitalize;
}

.small-font-currency {
  font-size: 12px !important;
}

@media only screen and (max-width: 600px) {
  .alm-fund-popup-content a {
    border: none
  }

  .alm-fund-popup-content a i {
    top: 8px;
    right: 5px;
  }

  .alm-fund-billing-details p {
    font-size: 15px !important;
  }

  .alm-fund-billing-details small {
    font-size: 13px;
  }

  #processingFeesForm label,
  #donateAnonymous label,
  #giftAidForm label,
  #giftAidForm-onetime label,
  #donateAnonymousRecurring label {
    font-size: 15px !important;
  }

  #inputFieldAmount {
    font-size: 24px;
  }

  .alm-fund-contribution-buttons .alm-fund-selected {
    padding: 9px 15px;
  }

  .btn-p-l {
    padding-left: 0px;
  }

  .alm-fund-billing-details .col-form {
    display: block;
  }

  .font-19 {
    font-size: 20px !important;
    display: inline !important;
  }

  .contribution-amount-calendar .amount-cycle {
    display: inline !important;
    font-size: 15px;
  }

  .contribution-amount-calendar {
    border-radius: 10px;
  }

  .small-font-currency {
    font-size: 12px !important;
  }

  #snackbar-err-recurring,
  #snackbar-err-onetime,
  #snackbar-err,
  #recurring-snackbar-err {
    padding: 10px 10px;
    font-size: 12px;
  }
}


.alm-fund-popup-thankyou {
  width: 450px;
  height: auto;
  padding-bottom: 15px;
}

.alm-fund-des {
  padding-top: 10px;
}

.w-700 {
  width: 700px;
}

@media only screen and (max-width: 700px) {
  .alm-fund-popup-thankyou {
    width: 90%;
  }

  .w-700 {
    width: 90%;
  }

  .width-54 {
    width: 80%;
  }

  .thankyou-container {
    max-width: 100%;
    margin: auto;
  }

  .alm-fund-des {
    padding: 45px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .alm-fund-des p {
    color: #fff;
    font-weight: 200;
    font-size: 13px;
    margin-top: 10px;
  }

  .contribution-calendar {
    font-size: 14px;
    padding: 12px 35px;
    margin: 0.5rem;
    padding-left: 10px;
    padding-right: 10px;
  }

  .alm-fund-header-thankyou p {
    font-size: 13px;
  }

  .alm-fund-des button {
    font-size: 14px;
  }

  .alm-fund-header-thankyou {
    padding-bottom: 10px;
  }

  #oneTimeThankyouSuccess {
    position: absolute !important;
    width: 80%;
    border-radius: 10px;
    padding: 16px
  }

  .alm-fund-header h1 {
    font-size: 20px;
  }

  .alm-fund-header p {
    font-size: 15px;
    margin-top: 0px !important;
  }

  .alm-fund-contribution-options p {
    font-size: 16px;
  }

  .alm-fund-des h4 {
    font-size: 16px;
  }

  .alm-fund-des .small-txt {
    font-size: 13px;
  }
}

#oneTimeThankyouSuccess {
  position: absolute !important;
  border-radius: 10px;
  width: 380px;
  padding: 20px;
  text-align: center;
}

#closeButton {
  font-size: 12px;
}

#success-message {
  font-size: 14px;
}


@media only screen and (max-width: 400px) {
  .alm-fund-des {
    padding: 20px;
  }

  .width-54 {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .raised-amount-div .donation-amount-btn {
    width: 31%;
  }
}

.summary-sec-main-heading {
  font-size: 30px;
  color: #000000;
  line-height: 36px;
  text-align: left;
  font-family: Noto Sans;
  font-weight: 700;
  font-style: normal;
}

.res-update-btn-mobile {
  display: none;
  font-size: 24px;
}

.res-update-btn-desktop {
  display: block;
}

@media only screen and (max-width: 700px) {
  #oneTimeThankyouSuccess {
    position: absolute !important;
    width: 80%;
    border-radius: 10px;
    padding: 20px;
  }

  .alm-fund-contribution-buttons .right-arrow.alm-fund-selected {
    background-color: white;
    padding: 0px;
    height: 30px;
  }

  .alm-fund-contribution-buttons .right-arrow.active {
    background-color: white !important;
    color: #fff !important;
  }

  .raised-amount-div #err-message p {
    font-size: 11px;
  }

  .summary-sec-main-heading {
    font-size: 22px;
  }

  .res-update-btn-mobile {
    display: block;
    width: 30px;
  }

  .res-update-btn-mobile img {
    width: 30px !important;
  }


  .res-update-btn-desktop {
    display: none;
  }
}

@media only screen and (min-width: 1030px) and (max-width: 1200px) {
  .donation-main {
    max-width: 100%;

  }

  .raised-amount-div #err-message p {
    font-size: 11px;
  }
}


@media only screen and (min-width: 1000px) and (max-width: 1180px) {
  .support-Primary {
    padding: 10px 30px;
  }
}

#giftaid-popup,
#giftaid-popup-onetime {
  display: none;
}

.alm-fund-popup-content #giftaid-form a,
.alm-fund-popup-content #giftaid-form-onetime a,
.alm-fund-popup-content #giftaid-popup a,
.alm-fund-popup-content #giftaid-popup-onetime a {
  color: #4E4747;
  position: unset;
  padding: 0px;
  border: none;
  font-size: 17px
}

/* Popup Background */
.giftaid-popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Popup Content */
.giftaid-popup-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  text-align: center;
  overflow-y: scroll;
  max-height: 97vh;
}

/* Close Button */
.giftaid-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

/* Gift Aid Logo */
.giftaid-popup-logo {
  max-width: 100px;
  margin-bottom: 10px;
}

/* Popup Title */
.giftaid-popup-title {
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 3px !important;
  margin-top: 20px;
  line-height: 20px !important;
}

/* Highlighted Text */
.giftaid-highlight-text {
  color: #00A46E;
  font-weight: bold;
}

/* Popup Text */
#giftaid-popup .giftaid-popup-content .giftaid-popup-text,
#giftaid-popup-onetime .giftaid-popup-content .giftaid-popup-text {
  font-size: 14px !important;
  color: #4E4747 !important;
  line-height: 1.5 !important;
  margin-bottom: auto !important;
  padding: auto !important;
  font-weight: normal !important;
  line-height: auto !important;
  text-align: left;
}

/* Toggle Switch */
.giftaid-toggle-container {
  display: block;
  align-items: center;
  padding: 10px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.giftaid-toggle-container input {
  display: none;
}

.giftaid-slider {
  position: relative;
  display: inline-block;
  width: 50px;
  /* Increased width */
  height: 26px;
  /* Increased height */
  background: #ccc;
  border-radius: 26px;
  transition: 0.4s;
  cursor: pointer;
}

.giftaid-slider:before {
  content: "";
  position: absolute;
  width: 20px;
  /* Increased size */
  height: 20px;
  /* Increased size */
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: 0.4s;
}

input:checked+.giftaid-slider {
  background: #00A46E;
}

input:checked+.giftaid-slider:before {
  transform: translateX(24px);
}

/* Read More Link */
.giftaid-popup-link {
  color: #00A46E;
  text-decoration: underline;
}

.checkbox-disable-icon {
  color: white;
  font-size: 12px;
  margin-right: 8px;
  border: 1px solid #958585;
  margin-left: 4px;
  margin-top: 6px;
}

/* Default unchecked state */
.giftaid-inactive {
  font-size: 12px !important;
  color: white;
  background-color: gray;
  padding-right: 1px;
  border-radius: 3px;
  margin-right: 8px;
  margin-left: 4px;
  margin-top: 6px;
}

/* Active (checked) state */
.giftaid-active {
  font-size: 16px !important;
  color: green;
  background-color: white;
  outline: none;
  border: none;
}

#giftaid-label .gift-link,
#giftaid-label-onetime .gift-link {
  background-color: #f4f4f4 !important;
  font-size: 18px;
  /* text-decoration: underline; */
  color: #4E4747;
  display: flex;
  align-items: center;
}


.giftaid-center-align {
  text-align: center;
  display: block;
  margin-top: 15px;
}

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

  .alm-fund-popup-content #giftaid-form a,
  .alm-fund-popup-content #giftaid-form-onetime a {
    font-size: 15px
  }

  #giftaid-label .gift-link,
  #giftaid-label-onetime .gift-link {
    font-size: 15px;
  }


  .contribution-columns .column .row {
    line-height: 19px;
  }

  .giftaid-toggle-container {
    font-size: 13px;
  }

  #giftaid-popup .giftaid-popup-content .giftaid-popup-text,
  #giftaid-popup-onetime .giftaid-popup-content .giftaid-popup-text {
    font-size: 12px !important;
  }
}



button.fancybox-button {
  background-color: white !important;
}

.fancybox-slide--html .fancybox-close-small {
  color: black !important;
}

.fancybox-content {
  padding: 0px !important;
  border-radius: 11px !important;
}


#calenderBreakdownPopup button.fancybox-button {
  background-color: #d0c9c9 !important;
}

.fancybox-content {
  max-width: 90% !important;
}


.thankyou-popup-container-main {
  background-color: #180076;
  /* border: 2px solid #180076; */
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3sease;
  max-width: 570px;
  width: 100%;
}

#thankyouPopup .fancybox-slide--html .fancybox-close-small {
  right: 3px;
  top: 4px;
}

.giftaid-logo {
  max-width: 65px;
  margin-bottom: 10px;
  margin-left: 15px;
  padding-top: 16px;
}


.add-ons-header {
  text-align: left;
  font-size: 17px;
}

.giftaid-checkbox-container {
  /* display: flex; */
}

.add-ons-header button {
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  background-color: #180076;
  padding: 15px 30px;
  margin: 0.5rem;
  cursor: pointer;
  margin-left: 0px;
  margin-top: 25px;
}

.giftaid-logo-thankyoupage {
  max-width: 70px;
  margin-bottom: 0px;
  margin-left: 15px;
  padding-top: 0px;
  margin-top: 0px;
}


.fancybox-is-open .fancybox-bg {
  opacity: 0.9;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.hide-html-scroll {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

.fancybox-bg {
  background-color: #000000b3 !important;
}

#recurring_giftaid-icon {
  top: -6px !important;
}

#recurring_giftaid-label .giftaid-logo-thankyoupage {
  padding-top: 20px;
}

#giftaid-form #giftaid-icon,
#giftaid-icon-onetime {
  top: -3px;
}


@media only screen and (min-width: 1000px) and (max-width: 1600px) {
  .support-Primary {
    font-size: 16px;
    padding: 10px 15px;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1050px) {
  .support-Primary {
    font-size: 13px;
    padding: 10px;
  }
}

@media only screen and (min-width: 1290px) and (max-width: 1420px) {
  .raised-amount-div #err-message p {
    font-size: 12px;
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1290px) {
  .raised-amount-div #err-message p {
    font-size: 11px;
  }
}

@media only screen and (max-width: 1000px) {
  .raised-amount-div #err-message p {
    font-size: 13px;
  }
}

@media only screen and (max-width: 700px) {
  .raised-amount-div #err-message p {
    font-size: 11px;
  }
}

@media only screen and (min-width: 1320px) and (max-width: 1500px) {
  .raised-amount-div .bg-grey-sum .raise-div h4 { 
    font-size: 15px; 
  }
}

@media only screen and (min-width: 1000px) and (max-width: 1320px) {
  .raised-amount-div .bg-grey-sum .raise-div h4 {
      font-size: 13px;
  }
}

@media only screen and (max-width: 1200px) {
  #ajax-content-wrap .col[data-padding-pos="top-bottom"]> .vc_column-inner { 
    padding: calc(100vw* 0.03) !important;
  }
}


.width-top-100 {
  width: 100%;
}

.currencies-block {
  display: flex;
  align-items: baseline;
  width: 100%;
}

.currencies-block h3 {
  width: 60%;
}

.currencies-block #currencyDropdown {
  width: 100%;
}

#donation-levels-modal {
  padding: 20px !important;
  width: 600px;
}

#donation-levels-modal .fancybox-content {
  max-width: 600px !important;
}

.alm-expand-level-link { 
  margin-top: 20px !important;
}

.alm-expand-level-link a {
  color: white !important; 
  font-weight: 900;
  font-size: 16px;
}

.alm-expand-level-link a:hover {
  text-decoration: underline;
}

#donation-levels-modal .target-body {
  padding: 15px !important;
}

.donation-levels-content {
  margin-top: 20px;
}