.share-widget {
  color: black;
}

.widget-here {
  all: initial;
  color: black;
  width: 100%;
}

.widget-here img {
  margin: initial;
}

.style-container {
  display: flex;
  width: 100%;
}

div {
  margin: initial;
}

.style-container-shortcode {
  display: flex;
  flex-direction: column;
  z-index: 100000 !important;
}

.appearance-preview {
  margin-left: 0px;
  /* margin-top: 30px; */
  /* margin-bottom: 30px; */
  width: 100%;
  /* max-width: 500px; */
  height: auto;
  background: transparent;
  flex-direction: row;
  justify-content: center;
  /* z-index: 100000 !important; */
}

.appearance-preview-card {
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 200px;
  margin: auto;
  margin-top: 50px;
  border-radius: 10px;
  /* background: rgb(248, 245, 245); */
  background: #ffffff !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 100000 !important;
}

.appearance-preview-card-shortcode {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  height: 250px;
  /* margin: auto;
    margin-top: 50px; */
  border-radius: 10px;
  /* background: rgb(248, 245, 245); */
  background: #ffffff !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.apreview-amount-raised {
  display: flex;
  margin-top: 15px;
  margin-left: 30px;
  height: 40px;
  align-items: baseline !important;
}

.apreview-collected-amount-div {
  margin-right: 10px;
  /* font-family: "Roboto", sans-serif; */
  font-size: 32px;
  color: black;
  font-weight: 700;
}

.apreview-target-amount-div {
  margin-top: 5px;
  /* font-family: "Roboto", sans-serif; */
  font-size: 22px;
  color: rgb(175, 174, 174);
  font-weight: 500;
}

.apreview-full-bar {
  margin-top: 10px;
  margin-left: 30px;
  width: 85%;
  height: 10px;
  background-color: lightgray;
  border-radius: 5px;
}

.apreview-raised-bar {
  width: 30%;
  height: 10px;
  border-radius: 5px;
  background-color: rgb(49, 209, 76);
}

.apreview-progress-info {
  margin-top: 5px;
  margin-left: 30px;
  width: 85%;
  display: flex;
  justify-content: space-between;
}

/* .apreview-achived-percent {
	float: left;
} */

.apreview-days-left {
  float: right;
}

.apreview-donate-btn-div {
  display: block;
}

.apreview-donate-btn {
  margin-top: 10px;
  margin-left: 30px;
  width: 85%;
  height: 50px;
  color: white;
  /* font-family: "Roboto", sans-serif; */
  font-size: 14px;
  background-color: rgb(40, 40, 214);
  /* background-image: linear-gradient(to right, rgb(41, 7, 167), rgb(83, 72, 236)); */
  border-radius: 25px;
  border: transparent !important;
  cursor: pointer;
}

.apreview-donate-btn:disabled {
  background-color: rgb(170, 170, 170) !important;
}

/*Till Here */
.preview {
  position: relative;
  margin: 30px;
  width: min(100%, 85vw);
  /* Takes the smaller value between 100% of the parent and 90% of the viewport width */
  max-width: 615px;
  /* min-height: 640px; */
  height: auto !important;
  z-index: 100000;
  box-sizing: border-box;
}

/* .preview-style {
	margin-top: 30px;
	margin-bottom: 30px;
	width: 500px;
	height: 620px;
	/* background: white; */

.preview-card {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  /* min-height: 530px; */
  height: auto !important;
  overflow: hidden;
  /* margin: auto !important; */
  margin-top: 25px;
  /* background: rgb(248, 245, 245); */
  background: #ffffff !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 100000 !important;
  width: 470px;
}

.preview-header {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  background-color: rgb(40, 40, 214);
  /* background-image: linear-gradient(to right, rgb(41, 7, 167), rgb(226, 225, 235)); */
}

/* Image progress bar css */
.img-prgress-bar {
  display: flex;
  margin: 14px;
}

.img-donation-form {
  width: 40%;
}

.preview-header-label-div {
  margin-top: 25px;
  margin-left: 20px;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

/* .preview-header-close-btn {
	margin-top: 20px;
	margin-right: 20px;
}

.preview-header-close-btn button {
	border-radius: 50px;
	cursor: pointer;
} */

.preview-period-intervals div {
  border: solid 1px #72796f;
  height: 50px;
}

.preview-period-intervals {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0px 30px;
  border: 0;
}

.preview-period-intervals label {
  font-size: 20px !important;
  align-content: center;
}

.preview-intervals-onetime {
  display: flex;
  flex-grow: 1;
  /* background-color: #49708f; */
  text-align: center;
  justify-content: center;
}

.preview-intervals-monthly {
  display: flex;
  flex-grow: 1;
  /* background-color: #092236; */
  text-align: center;
  justify-content: center;
}

.preview-intervals-yearly {
  display: flex;
  flex-grow: 1;
  /* background-color: #e3e9ee; */
  text-align: center;
  justify-content: center;
}

.preview-intervals-divider {
  /*display: flex;*/
  display: none;
  width: 100%;
  height: 2px;
  background-color: #e8e8e8;
  justify-content: space-evenly;
}

.preview-intervals-onetime-bar {
  display: flex;
  flex-grow: 1;
  /* margin-left: 30px; */
  height: 2px;
  background-color: #e8e8e8;
}

.preview-intervals-monthly-bar {
  display: flex;
  flex-grow: 1;
  margin-left: 30px;
  height: 2px;
  background-color: #e8e8e8;
}

.preview-intervals-yearly-bar {
  display: flex;
  flex-grow: 1;
  margin-left: 10px;
  height: 2px;
  background-color: #e8e8e8;
}

.preview-select-amount {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: auto;
  margin-top: 0px;
}

.preview-select-amount-s {
  display: flex;
  flex-direction: column;
  width: 90%;
  /* height: 80%; */
  margin: auto !important;
  padding-bottom: 10px !important;
  /* min-height: 418px; */
  height: auto;
}

.preview-select-amount-options {
  display: flex;
  /* justify-content: space-between; */
  /* text-align: center; */
  /* height: 50px; */
  height: auto;
  gap: 16px;
  flex-wrap: wrap;
}

.amount-boundary-box-1,
.amount-boundary-box-2,
.amount-boundary-box-3,
.amount-boundary-box-4,
.amount-boundary-box-other {
  display: flex !important;
  width: 50px !important;
  height: 25px !important;
  border: 1px solid !important;
  border-color: gray !important;
  border-radius: 5px;
  justify-content: center !important;
  padding-bottom: 15px !important;
}

.amount-boundary-box-1-s,
.amount-boundary-box-2-s,
.amount-boundary-box-3-s,
.amount-boundary-box-4-s,
.amount-boundary-box-other-s {
  display: flex !important;
  height: 40px !important;
  border: 1px solid !important;
  border-color: gray !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 6px !important;
}

.preview-user-info-div {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.preview-user-info-div button {
  width: 100% !important;
}

.preview-user-info-input-div {
  border: 1px solid !important;
}

.preview-user-info-firstname,
.preview-user-info-lastname,
.preview-user-info-email {
  display: flex;
  border: 1px solid;
  width: 95%;
  height: 20px;
  border-color: gray;
  margin-bottom: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  border-radius: 5px;
  text-align: center;
}

.checkbox-if-anonymous-s {
  display: flex;
  margin-left: 3px;
  margin-top: 10px;
  justify-content: start;
}

/* .preview-user-decalration-term {
	width: 100%;
	height: 10px;
} */

.preview-donate-btn {
  margin-top: 20px !important;
  width: 100%;
  height: 50px;
  color: white;
  font-size: 20px;
  background-color: rgb(40, 40, 177);
  border-radius: 25px;
  border: transparent !important;
  position: relative;
  overflow: hidden !important;
  cursor: pointer;
  text-align: center;
}

.preview-short-donate-btn {
  width: auto !important;
  margin-bottom: 20px;
}

.preview-donate-btn span {
  opacity: 1;
  /* Show text */
}

.preview-donate-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  opacity: 0;
  /* Initially hidden */
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.preview-donate-btn.loading::after {
  opacity: 1;
  /* Show loader */
}

.preview-donate-btn.loading span {
  opacity: 0;
  /* Hide text */
}

button.preview-donate-btn:hover {
  opacity: 0.9;
}

/* tfoot tr:last-child td {
    border-bottom: 0;
  } */

/* Donate window Styles  */

.donate-window-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 50000;
  /* Sit on top */
  padding-top: 0px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  z-index: 1000001 !important;
}

/* Donate window Content */
.donate-window-content {
  /* background-color: #fefefe; */
  margin: auto !important;
  padding: 10px;
  /* border: 1px solid #888; */
  min-width: 300px;
  margin-bottom: 20%;
  z-index: 1000000 !important;
}

/* The Close Button */
/* Container for the circular button */
.close-button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Make it a circle */
  border: 2px solid #000000;
  /* Gray border */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* "X" icon inside the circle */
.close-icon {
  font-size: 26px;
  color: #000000;
  font-weight: bold;
  line-height: 1;
}

/* Hover effect for the button */
.close-button:hover {
  background-color: rgba(160, 160, 160, 0.2);
}

.close-button-container {
  display: flex;
  justify-content: flex-end;
  padding: 16px 16px 16px;
}

/* ul {
      list-style: none;
      padding-left: 0;
      width: 100%;
  }
  
  li {
      display: inline-block;
      margin-right: 15px;
  } */

.preview-intervals-onetime input,
.preview-intervals-monthly input,
.preview-intervals-yearly input,
.amount-boundary-box-1-s input,
.amount-boundary-box-2-s input,
.amount-boundary-box-3-s input,
.amount-boundary-box-4-s input,
.amount-boundary-box-other-s input {
  visibility: hidden !important;
}

.preview-intervals-onetime label,
.preview-intervals-monthly label,
.preview-intervals-yearly label,
.amount-boundary-box-1-s label,
.amount-boundary-box-2-s label,
.amount-boundary-box-3-s label,
.amount-boundary-box-4-s label,
.amount-boundary-box-other-s label {
  cursor: pointer !important;
}

.other-amount-div {
  display: none;
  border: 1px solid;
  width: 100%;
  /* max-width: 358px; */
  height: 50px;
  /* border-color: gray; */
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  border: 1px solid #72796f !important;
  justify-content: center;
  /* Horizontally center */
  align-items: baseline;
  /* Vertically center */
  --darkreader-inline-bgcolor: #72796f;
  --darkreader-inline-border-top: currentcolor;
  --darkreader-inline-border-right: currentcolor;
  --darkreader-inline-border-bottom: currentcolor;
  --darkreader-inline-border-left: currentcolor;
}

.other-amount-div span {
  font-size: 24px;
  font-weight: 700;
}

/* Chrome, Safari, Edge, Opera */
other-amount-input-number input::-webkit-outer-spin-button,
other-amount-input-number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
other-amount-input-number input[type="number"] {
  -moz-appearance: textfield;
}

.other-amount-input-number {
  background-color: white !important;
  width: 100%;
  height: 100% !important;
  font-family: "";
  font-size: 24px;
  font-weight: 700;
  border: transparent !important;
  text-align: end;
  min-height: auto !important;
  padding-right: 10px !important;
  margin-bottom: 0px !important;
  margin-right: 10px !important;
}

.preview-user-info-firstname-s,
.preview-user-info-lastname-s,
.preview-user-info-email-s {
  display: flex;
  /* border: 1px solid; */
  width: 100%;
  height: 50px;
  /* border-color: gray; */
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  text-align: center;
  flex-direction: column;
  margin-bottom: 21px;
}

.preview-user-info-message-s {
  display: flex;
  /* border: 1px solid; */
  width: 100%;
  height: 100px;
  /* border-color: gray; */
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 20px;
}

.preview-user-info-message-s textarea {
  resize: none;
  outline: transparent !important;
  padding-top: 10px;
}

.open-amount-div {
  display: flex !important;
  border: 1px solid !important;
  width: 100% !important;
  /* max-width: 358px !important; */
  height: 50px !important;
  /* border-color: gray; */
  border-radius: 0px !important;
  text-align: center;
}

/* .preview-intervals-onetime label {
      cursor: pointer;
  }
  
  .preview-intervals-monthly input {
      visibility: hidden;
  }
  
  .preview-intervals-monthly label {
      cursor: pointer;
  }
  
  .preview-intervals-yearly input {
      visibility: hidden;
  }
  
  .preview-intervals-yearly label {
      cursor: pointer;
  }
  
  .amount-boundary-box-1-s input {
      visibility: hidden;
  }
  
  .amount-boundary-box-1-s label {
      cursor: pointer;
  } */

.amount-boundary-box-1-s input:checked + label,
.amount-boundary-box-2-s input:checked + label,
.amount-boundary-box-3-s input:checked + label,
.amount-boundary-box-4-s input:checked + label,
.amount-boundary-box-other-s input:checked + label {
  color: white !important;
}

.amount-boundary-box-1-s input:not(:checked) + label,
.amount-boundary-box-2-s input:not(:checked) + label,
.amount-boundary-box-3-s input:not(:checked) + label,
.amount-boundary-box-4-s input:not(:checked) + label,
.amount-boundary-box-other-s input:not(:checked) + label {
  color: black !important;
}

/* input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  } */

/* .preview-user-info-firstname-s input, */
.preview-user-info-lastname-s input,
.preview-user-info-email-s input,
.preview-user-info-message-s input,
.other-amount-number input {
  border-radius: 2px !important;
}

.preview-user-info-firstname-s input[type="text"]:focus,
.preview-user-info-firstname-s input[type="text"]:focus,
.preview-user-info-email-s input[type="text"]:focus,
.other-amount-input-number input[type="number"]:focus {
  outline: transparent !important;
}

.preview-intervals-onetime input[type="radio"],
.preview-intervals-monthly input[type="radio"],
.preview-intervals-yearly input[type="radio"] {
  width: 0% !important;
}

.amount-boundary-box-1-s input[type="radio"],
.amount-boundary-box-2-s input[type="radio"],
.amount-boundary-box-3-s input[type="radio"],
.amount-boundary-box-4-s input[type="radio"],
.amount-boundary-box-other-s input[type="radio"] {
  -webkit-appearance: radio !important;
}

/* For tipbox styles */
.select-amount-div-boxes {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-around !important;
}

/*the container must be positioned relative:*/
.whydonate--custom-select {
  position: relative !important;
  font-family: Arial !important;
  margin-left: 10px !important;
}

.whydonate--custom-select select {
  display: none !important;
  /*hide original SELECT element:*/
}

.whydonate--select-selected {
  background-color: white !important;
}

/*style the arrow inside the select element:*/
.whydonate--select-selected:after {
  position: absolute !important;
  content: "";
  top: 14px !important;
  right: 10px !important;
  width: 0 !important;
  height: 0 !important;
  border: 6px solid transparent !important;
  border-color: black transparent transparent transparent !important;
}

/*point the arrow upwards when the select box is open (active):*/
.whydonate--select-selected.select-arrow-active:after {
  border-color: transparent transparent black transparent !important;
  top: 7px !important;
}

/*style the items (options), including the selected item:*/
.whydonate--select-items div,
.whydonate--select-selected {
  border-radius: 3px !important;
  color: black !important;
  padding: 8px 16px !important;
  border: 1px solid transparent !important;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent !important;
  cursor: pointer !important;
  user-select: none !important;
}

.whydonate-currecy-selected {
  background-color: white !important;
  width: 100%;
  height: 50px;
  min-width: 130px !important;
}

/*style the arrow inside the select element:*/
.whydonate-currecy-selected:after {
  position: absolute !important;
  content: "";
  top: 14px !important;
  right: 10px !important;
  width: 0 !important;
  height: 0 !important;
  border: 6px solid transparent !important;
  border-color: #72796f transparent transparent transparent !important;
}

/*point the arrow upwards when the select box is open (active):*/
.whydonate-currecy-selected.select-arrow-active:after {
  border-color: transparent transparent black transparent !important;
  top: 7px !important;
}

/*style the items (options), including the selected item:*/
.whydonate-currecy-items div,
.whydonate-currecy-selected {
  color: black !important;
  padding: 8px 16px !important;
  border: 1px solid transparent !important;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 1px solid #72796f !important;
  width: 100% !important;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 500;
  /* 1px solid black border */
}

#donation-option-amount div {
  width: 83.9px;
}

.info-img-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  /* Align the image vertically with the text */
  margin-left: 5px;
  /* Add some space between the image and text */
}

.non-form-display-button {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.info-img-container img {
  max-width: 14px;
  /* Set the maximum width for the image */
  height: auto;
  /* Maintain the aspect ratio */
  display: block;
  /* Remove extra space beneath the image */
}

.info-img-hover-box {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(32, 27, 27, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1;
  font-size: smaller;
  width: 205px;
  text-align: justify;
  border: 1px solid #ccc;
  color: white;
}

.info-img-container:hover .info-img-hover-box {
  display: block;
}

.info-next-hover-box {
  display: none;
  position: absolute;
  top: 97%;
  left: 12%;
  transform: translateX(-50%);
  background-color: rgba(32, 27, 27, 0.8);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1;
  font-size: smaller;
  width: 205px;
  text-align: justify;
  border: 1px solid #ccc;
  color: white;
}

.info-next-container:hover .info-next-hover-box {
  display: block;
}

.info-next-container button {
  width: 100% !important;
}

#donation-option-open-amount .open-amount-div span {
  font-size: 24px;
  font-weight: 700;
}

/*style items (options):*/
.whydonate--select-items {
  position: absolute !important;
  background-color: white !important;
  /* top: 100%; */
  left: 0 !important;
  right: 0 !important;
  z-index: 99 !important;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.whydonate--select-items div:hover,
.whydonate--same-as-selected {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* RESET CSS */
.donate-window-content ::before,
.donate-window-content ::before {
  display: none !important;
}

.donate-window-content input + label,
.donate-window-content input {
  padding: 0 !important;
}

/* .donate-window-content input[type='checkbox'] {
	display: block !important;
} */

.disabled-overlay {
  /* width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.5); */
  pointer-events: none;
  /* Allows clicks to go through the overlay to the underlying elements */
}

input:focus {
  outline: none !important;
}

.tip-box-span-curr-symbol {
  padding-left: 4px;
}

.tip-box-span {
  border-radius: 4px;
  border: 1px solid !important;
  height: 30px;
  padding-right: 4px;
  background-color: white;
  width: auto;
}

.tip-box-span input {
  border: 0;
}

/* Stepper Form - Start */
.steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  padding: 0 30px;
}

.step {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-direction: row;
  cursor: pointer;
}

.step.disabled {
  pointer-events: none;
  /* Disable interaction */
  /* opacity: 0.5; Dimmed appearance */
}

.step-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: lightgray;
  color: black;
  font-weight: bold;
  margin-right: 1px;
  font-weight: normal;
}

.step-label {
  font-weight: bold;
  background-color: white;
  padding: 0 5px;
  z-index: 2;
}

.steps .step.active .step-number {
  background-color: var(--step-active-color);
  color: white;
}

.step-line {
  position: absolute;
  top: 50%;
  left: 15%;
  width: 70%;
  height: 2px;
  background-color: lightgray;
  z-index: 0;
}

.widget-here .hidden {
  display: none !important;
}
.donate-window-content .hidden {
  display: none !important;
}

@container (max-width: 430px) {
  .steps {
    flex-direction: row;
    align-items: center;
    padding: 0 7px;
  }

  .step {
    flex-direction: column;
    margin-bottom: 10px;
  }

  .step-label {
    margin-top: 5px;
    text-align: center;
  }

  .step-line {
    top: 19%;
    left: 11%;
    width: 80%;
  }

  .donate-window-content {
    padding: 0px !important;
  }

  .step-number-2-container-div {
    flex-direction: column !important;
    gap: 5px;
  }

  .step-number-2-container {
    display: flex;
    margin-top: 0px !important;
    flex-direction: column;
  }

  .step-number-2-number {
    margin-left: 19px;
  }

  .step-number-2-error {
    margin-left: 53px;
    width: fit-content;
  }

  .step-2-label-error-container {
    margin-top: 2px;
  }

  .step-number-2-error-logo-label-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .step-number-logo-label-container {
    margin-left: 21px;
  }
}

/* Large tablets and smaller desktops */
@media (max-width: 1024px) {
  .preview-card {
    width: auto;
  }
}

/* Tablets */
@media (max-width: 768px) {
  .preview-card {
    width: 450px;
  }

  .apreview-amount-raised {
    margin-top: 0;
    margin-left: 0;
  }

  .apreview-full-bar {
    margin-top: 0px;
    margin-left: 0;
  }

  .preview-period-intervals {
    margin: 0 15px;
  }

  .img-prgress-bar {
    margin: 14px 6px;
  }

  .apreview-progress-info {
    margin-left: 0;
  }

  #donation-option-amount div {
    width: 72px;
  }

  .img-prgress-bar
    .apreview-amount-raised
    label
    #donated-amount-non-form-135_rEUhs-1 {
    font-size: 16px;
  }

  .img-prgress-bar
    .apreview-amount-raised
    .apreview-target-amount-div-label-2
    label {
    font-size: 16px !important;
  }

  .img-prgress-bar .apreview-collected-amount-div label .currency-symbol {
    font-size: 16px;
  }

  .img-prgress-bar
    .apreview-target-amount-div
    .apreview-target-amount-div-label-1
    label {
    font-size: 16px !important;
  }
}

/* Large mobile phones */
@media (max-width: 600px) {
  .preview-card {
    width: 90%;
    /* Use a percentage for better flexibility on smaller screens */
  }
}

@media (max-width: 450px) {
  .first-name-info-label-div {
    min-height: 91px !important;
  }
}

/* Small mobile phones */
@media (max-width: 400px) {
  .step-number-2-error {
    margin-left: 30px;
    width: fit-content;
  }

  .step-label-error {
    font-size: 10.2px;
    color: #ff5656;
    margin-left: 12px;
  }

  .preview-card {
    width: 100%;
  }

  .step-line {
    width: 77%;
  }
}

.white-image {
  filter: brightness(0) invert(1);
  width: 19px;
  height: 19px;
}

/* Stepper Form - End */

.first-name-info-label {
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.user-info-form-input {
  background-color: white;
  width: 100%;
  padding-left: 16px !important;
  padding-right: 16px !important;
  height: 91%;
  font-size: 14px;
  border: none;
  margin-top: 3px;
  margin-left: 10px;
}

.user-info-form-textarea {
  background-color: white;
  width: 100%;
  /* padding-left: 16px !important; */
  padding-right: 16px !important;
  height: 91%;
  font-size: 14px;
  border: none;
  margin-top: 3px;
  margin-left: 8px;
  height: 80%;
}

.stripe-partner-image {
  float: left;
  margin-top: 10;
  width: 160px !important;
  max-width: 160px !important;
  height: auto;
  margin-top: 10px;
}

/* Animated Placeholder Label  - Start*/
div.input-block {
  position: relative;
  display: inline-block;
  width: 100%;
  border: 1px solid !important;
  border-radius: 5px;
}

div.input-block input {
  width: 90%;
  height: 50px;
  padding-left: 10px !important;
  border-radius: 5px !important;
  border: none;
  outline: none;
}

div.input-block input:focus {
  outline: none;
  box-shadow: none;
}

.input-option-block {
  width: 95% !important;
}

.input-block-div {
  margin-top: 21.5px;
}

.input-message {
  height: 100px;
}

div.input-block .placeholder {
  position: absolute;
  margin: 17px 0;
  padding: 0 4px;
  font-size: 14px;
  top: 0;
  left: 6px;
  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}

div.input-block input:valid + .placeholder,
div.input-block input:focus + .placeholder {
  transform: scale(0.8) translateY(-30px);
  background: #fff;
}

div.input-block img.visibility-image {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px !important;
  cursor: pointer;
  pointer-events: auto;
  /* Ensures the image is clickable */
}

div.input-block textarea {
  width: 100%;
  height: 100px;
  /* max-width: 358px; */
  padding-top: 5px !important;
  resize: none;
  /* Disable resizing */
  overflow: auto;
  padding-left: 10px !important;
  border: none;
  outline: none;
  box-sizing: border-box;
}

div.input-block .textarea-placeholder {
  position: absolute;
  margin: 17px 0;
  padding: 0 4px;
  font-size: 14px;
  top: 0;
  left: 6px;
  transition: all 0.2s;
  transform-origin: 0% 0%;
  background: none;
  pointer-events: none;
}

div.input-block textarea:valid + .textarea-placeholder,
div.input-block textarea:focus + .textarea-placeholder {
  transform: scale(0.8) translateY(-30px);
  background: #fff;
}

/* Animated Placeholder Label  - End*/

/* Slider - Start*/

.custom-checkbox {
  display: none !important;
  /* Use display:none to hide the checkbox */
}

.custom-checkbox-label {
  position: relative;
  display: inline-block !important;
  width: 36px;
  height: 14px;
  border: 1px solid #eeeeee;
  background-color: #d7d8da;
  border-radius: 15px;
  transition: background 0.3s linear;
  cursor: pointer;
  margin-top: 6px;
}

.toggle-circle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #616161;
  left: -4px;
  top: -2px;
  transition: left 0.3s ease-out, background-color 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

/* Move the circle and change color when checked */
.custom-checkbox:checked + .custom-checkbox-label .toggle-circle {
  left: 26px;
  /* Move circle to the right when checked */
  background-color: var(--circle-color);
  /* Change circle color when checked */
}

/* Show OFF or ON text based on checkbox state */
.toggle-circle::before {
  transition: content 0.3s ease;
  /* Smooth transition for text */
}

.toggle-circle-checked {
  margin-top: -0.5px;
}

.toggle-circle-unchecked {
  margin-top: 1.5px;
}

/* Slider - End*/

.button-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
}

.button-container button {
  padding: 10px 20px;
  cursor: pointer;
  width: 40%;
}

.optional-form-button {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.optional-form-button.optional-form-skip-button {
  background-color: #ffffff;
  color: #3f3f9a;
  border: 1px solid #3f3f9a;
}

.optional-form-button.optional-form-save-button {
  background-color: #3f3f9a;
  color: #ffffff;
}

.optional-form-button.optional-form-skip-button:hover {
  background-color: #f0f0f0;
}

/*  Donation Success Screen - Start */

.donation-received {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.donation-received-tick {
  margin-top: 3px;
}

.status-donation-received-text {
  display: flex;
  gap: 2px;
}

.status {
  font-size: 20px !important;
  /* font-weight: bold; */
}

.receipt-info {
  margin: 10px 0;
  font-size: 12px;
  color: #333;
  display: flex;
  text-align: justify;
}

.download-receipt {
  background-color: #3b3bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.share-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 20px;
}

.share-fundraiser {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.share-fundraiser p {
  margin: 5px 0;
  font-size: 14px;
}

.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: space-between;
}

.social-icons img {
  width: 32px;
  height: 32px;
}

.fundraiser-details-base {
  background-color: white;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 12px;
}

.back-to-fundraiser {
  background-color: #3b3bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

.fundraiser-title {
  font-size: 20px !important;
  text-align: left;
  margin-left: 8px !important;
}

.fundraiser-details-image {
  width: 100%;
  height: auto;
  background-color: black;
}

.fundraiser-details-secondary {
  padding: 10px !important;
  /* background-color: #f4f4f4; */
}

.fundraiser-details {
  background-color: #f4f4f4;
}

.fundraiser-details-whydonate-logo {
  width: 75px;
  display: flex;
  padding: 10px;
}

/*  Donation Success Screen - End */

.share-icon {
  outline: none;
}

.share-icon:focus {
  outline: none;
}

.show-other-amount-error-msg {
  margin-top: 5px;
  font-size: 10px;
  color: red;
}

.error-message {
  font-size: 10px;
  color: red !important;
  text-align: left;
  margin-bottom: -15px;
  /* position: absolute; */
}

.success-message {
  font-size: 10px;
  color: green !important;
  text-align: left;
}

.error-message-margin-left {
  margin-left: 1px;
}

.status-loader {
  position: relative;
  display: inline-block;
}

.status-loader > * {
  visibility: hidden;
}

.status-loader::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  /* To center the spinner */
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #000;
  border-radius: 50%;
  animation: status-spin 1s linear infinite;
}

.fundraiser-image-form {
  height: fit-content;
  max-width: 615px;
  width: -moz-available;
  /* For Firefox */
  width: -webkit-fill-available;
  /* For Safari and Chrome */
  width: fill-available;
  /* For other modern browsers */
  width: 100%;
  /* Fallback for iPhone/other browsers */
}

@keyframes status-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Slide section styles */
.slide {
  display: none;
}

.slide.active {
  display: block;
  animation: slide-left 0.35s ease;
}

@keyframes slide-left {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.slide.active-right {
  display: block;
  animation: slide-right 0.35s ease;
}

@keyframes slide-right {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.amount-text {
  margin-left: -5px;
  z-index: 10;
  position: absolute;
}

.first-name-info-label-div {
  display: flex;
  align-items: flex-start;
  background-color: #fffceb;
  border-radius: 5px;
  padding: 10px 5px;
  margin-bottom: 21.5px;
  min-height: 50px;
}

.first-name-visibilty-img-div {
  margin-right: 10px;
  padding: 5px;
  background-color: #fff3b0;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
}

.first-name-info-label {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.first-name-visibility-image {
  cursor: pointer;
  width: 15px;
  height: auto;
}

.icon-warning {
  width: 24px;
  height: 24px;
  fill: #ff5656;
  /* Set the icon color to red */
  vertical-align: middle;
}

.step-number-2-error {
  background: white;
}

.step-label-error {
  font-size: 10.2px;
  color: #ff5656;
  margin-top: -3px;
}

.step-number-2-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.preview-card-container {
  container-type: inline-size;
  /* min-height: 635px; */
}

.step-number-2-container {
  display: flex;
  /* margin-top: 3px !important; */
}

.step-number-2-container-div {
  display: flex;
  flex-direction: row;
}

.step-number-2-error-container-div {
  display: flex;
  flex-direction: column;
  margin-bottom: -20px;
  /* height: 30px; */
}

.step-number-2-error-logo-label-container {
  display: flex;
  flex-direction: row;
}

.step-2-label-error-container {
  margin-top: 2px;
}

.donation-stripe-element {
  height: 381px;
  display: contents;
  align-items: center;
  width: 100%;
}

.preview-donate-btn-div {
  min-height: 540px;
}

.preview-select-amount-s-optional-invoice {
  min-height: 49px;
}

.optional-receipt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: start;
  margin-top: 20px;
  gap: 10px;
}

.optional-receipt-container button {
  padding: 10px 20px;
  cursor: pointer;
  width: auto;
}

.checkbox-if-anonymous-container {
  display: flex;
  flex-direction: column;
}

.checkbox-if-anonymous-s-div-label {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.tip-range-slider-container {
  position: relative;
  width: auto;
  padding-right: 10px;
  margin-top: 26px;
}

.tip-range-slider-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--track-bg, #e5f8e5);
  border-radius: 5px;
  transform: translateY(-50%);
  z-index: 1;
}

.tip-range-slider-filled {
  position: absolute;
  top: 50%;
  left: 0;
  height: 8px;
  background: var(--filled-color, #4caf50);
  border-radius: 5px;
  transform: translateY(-50%);
  z-index: 2;
}

.tip-range-slider-tooltip {
  position: absolute;
  top: -35px;
  left: 0;
  transform: translateX(-50%);
  background-color: #666;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  display: flex;
  justify-content: space-around;
  gap: 2px;
}

.tip-range-slider-tooltip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #666 transparent transparent transparent;
}

.tip-range-slider-dots {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 2;
}

.tip-range-slider-dots div {
  position: relative;
  width: 3px;
  border-radius: 2px;
}

.tip-range-slider-dots div.large {
  height: 6px;
}

.tip-range-slider-dots div.small {
  height: 5px;
  opacity: 0.6;
}

.tip-range-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  position: relative;
  outline: none !important;
  z-index: 3;
  border: none !important;
  overflow: unset;
}

.tip-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--thumb-color, #4caf50);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 5;
  bottom: 3px;
}

.tip-range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--thumb-color, #4caf50);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 5;
  bottom: 3px;
}

.tip-range-other-button {
  /* font-family: Arial, sans-serif; */
  font-size: 14px;
  color: #363396;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
}

.tip-range-default-button {
  /* font-family: Arial, sans-serif; */
  font-size: 14px;
  color: #363396;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}

.tip-amount-input {
  display: flex;
  flex-direction: column;
}

.tip-amount-input-container {
  display: flex;
  gap: 15px;
}

.tip-amount-default-button-container {
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-bottom: 3px;
}

.tip-box-para {
  display: block;
  align-content: center;
  justify-content: center;
  gap: 10px;
}

.tip-box-para img {
  display: none;
}

.donation-loader-next {
  margin-left: 5px;
  margin-right: 5px;
}

.apreview-donation-received-label {
  font-weight: lighter;
}