.share-widget {
	color: black;
}

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

.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;
	/* 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)); */
}

.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 {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	text-align: center;
	flex-wrap: wrap;
	align-items: baseline;
	height: 65px;
}

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

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

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

.preview-intervals-divider {
	display: flex;
	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;
	border-radius: 5px;
	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-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: 14px;
	background-color: rgb(40, 40, 177);
	border-radius: 25px;
	border: transparent !important;
	position: relative;
	overflow: hidden !important;
	cursor: pointer;
}

.preview-short-donate-btn {
	width: 20% !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: 400px;
	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-radius: 0px;
	border: 1px solid !important;
	justify-content: center;
	/* Horizontally center */
	align-items: baseline;
	/* Vertically center */
	--darkreader-inline-bgcolor: #181a1b;
	--darkreader-inline-border-top: currentcolor;
	--darkreader-inline-border-right: currentcolor;
	--darkreader-inline-border-bottom: currentcolor;
	--darkreader-inline-border-left: currentcolor;
}

/* 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;
	width: 100%;
	height: 100%;
	font-family: '';
	font-size: 14px;
	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;
}

.whydonate-currecy-selected {
	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: black 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 {
	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;
	border: 1px solid #000 !important;
	/* 1px solid black border */
}

.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 */
}

.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;
}

/*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: 27px;
	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;
}

.hidden {
	display: none !important;
}

@media (max-width: 600px) {
	.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;
	}

	.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: 500px;
	}
}

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

/* 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;
	/* Position image inside the input field */
	top: 50%;
	transform: translateY(-50%);
	height: 20px;
	/* Adjust size as needed */
	width: 20px;
	/* Adjust size as needed */
	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 {
	/* 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: 40%;
}

.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;
}

.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;
	position: relative;
	outline: none;
	z-index: 3;
}

.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: flex;
	align-content: center;
	justify-content: center;
	gap: 10px;
}