/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
#invite-a-friend-wrapper * {
	margin: 0;
	padding: 0;
	max-width: 900px;
}

#invite-a-friend-wrapper html {
	height: 100%;
	width: 100%;
	color: black;
	/*Image only BG fallback*/
	/*background = gradient + image pattern combo*/
	background: linear-gradient(rgba(255, 255, 255, 0.911), rgba(255, 255, 255, 0.863));
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 100 900;
	src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
}

@font-face {
	font-family: Oswald;
	font-style: normal;
	font-weight: bold;
	src: url(https://fonts.gstatic.com/s/oswald/v49/TK3iWkUHHAIjg752DjJ1QIz_.woff2) format('woff2');
}

.grecaptcha-badge {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}


#invite-a-friend-wrapper body {
	color: black;
	width: 100%;
	font-family: Inter, serif;
	position: relative;
	background-color: #00000000;
}

#invite-a-friend-wrapper .form-text,
#invite-a-friend-wrapper .fs-subtitle,
#invite-a-friend-wrapper p {
	font-size: 15px;
	line-height: 1.5em;
	font-weight: 400;
	color: #000000;
	font-family: Inter, Arial, Helvetica, sans-serif;
}

#invite-a-friend-wrapper .hint-text {
	font-size: 13px !important;
	line-height: 1em !important;
}

.form-check-label-personal-info {
	margin-top: 10px !important;
}

#invite-a-friend-wrapper .fs-subtitle {
	margin-bottom: 5px;
}

#invite-a-friend-wrapper .link-style {
	color: #000000;
	font-weight: bold !important;
}

#invite-a-friend-wrapper .link-style:hover {
	text-decoration: underline;
}

#invite-a-friend-wrapper .fs-title {
	font-family: 'Oswald', 'Arial';
}

/*form styles*/
#invite-a-friend-wrapper #msform-invite-a-friend {
	width: 100%;
	max-width: 100%;
	min-width: 270px;
	margin-left: 5px;
	margin-right: 5px;
	min-height: 350px;
	font-family: Inter, serif;
	position: relative;
}

#invite-a-friend-wrapper #msform fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
	padding: 60px;
	margin: 0px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/*stacking fieldsets above each other*/
	position: static;
}


#invite-a-friend-wrapper #msform .fieldset-form {
	padding: 60px 60px;
}

#invite-a-friend-wrapper #msform .otp-fieldset {
	padding: 20px 20px;
}



#invite-a-friend-wrapper .redirect {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.4);
	padding: 30px !important;
	margin: 0px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	/*stacking fieldsets above each other*/
	position: static;
	z-index: 999;
}

/*Hide all except first fieldset*/
#invite-a-friend-wrapper #msform fieldset:not(:first-of-type) {
	display: none;
}

/*inputs*/
#invite-a-friend-wrapper #msform input[type="text"],
#invite-a-friend-wrapper #msform textarea,
#invite-a-friend-wrapper select {
	padding: 5px;
	border: 1.5px solid #222222af;
	border-radius: 5px;
	margin-bottom: 5px;
	margin-top: 3px;
	height: 30px;
	width: 100%;
	box-sizing: border-box;
	font-family: Inter, Arial, serif;
	color: #2C3E50;
	font-size: 13px;
}


#invite-a-friend-wrapper #msform #pledge-email {
	width: calc(50% - 15px);
}


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

	#invite-a-friend-wrapper #msform input[type="text"],
	#invite-a-friend-wrapper #msform textarea,
	#invite-a-friend-wrapper select {
		width: 100% !important;
	}

	#invite-a-friend-wrapper #msform .redirect {
		padding: 10px 10px;
	}

	#invite-a-friend-wrapper #msform textarea {
		height: 100px !important;
	}

	#invite-a-friend-wrapper #msform #pledge-email {
		width: calc(100% - 15px) !important;
	}

	#invite-a-friend-wrapper #msform .redirect {
		padding: 20px !important;
	}
}

/*buttons*/
#invite-a-friend-wrapper #msform .action-button {
	width: 240px;
	max-width: 400px;
	background: #FEC832;
	/* Button color */
	color: #000000;
	/* Font color */
	border: none;
	border-radius: 1px;
	text-transform: uppercase;
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	line-height: 1em;
	font-weight: 700;
	/* Uppercase text */
	cursor: pointer;
	text-align: center;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

#invite-a-friend-wrapper #otp-resubmit-bttn {
	cursor: pointer !important;
}

#invite-a-friend-wrapper #track-campaign-button {
	font-family: 'Oswald', sans-serif !important;
	font-size: 17px !important;
	padding: 5px 10px !important;
}

#invite-a-friend-wrapper #error-redirect div {
	display: flex;
	/* Enables flexbox */
	justify-content: center;
	/* Centers the content horizontally */
}

#invite-a-friend-wrapper #failed-contact-us-button {
	font-family: 'Oswald', sans-serif !important;
	font-size: 17px !important;
	width: 140px !important;
	padding: 10px 10px !important;
	display: inline-block;
}


#invite-a-friend-wrapper .not-eligible {
	width: 240px !important;
	background-color: #ffffff !important;
	border-radius: 0.2px !important;
	border: 2px solid #000 !important;
}


/* Hover state */
#invite-a-friend-wrapper #msform .action-button:hover {
	background-color: #242632;
	/* Hover background color */
	color: #FFFFFF;
	/* Hover font color */
}


#invite-a-friend-wrapper .not-eligible:hover {
	background-color: #242632 !important;
	color: rgb(255, 255, 255);
}

/* Focus (keyboard navigation) */
#invite-a-friend-wrapper #msform .action-button:focus {
	outline: 2px solid #242632;
	border-radius: 0.2px !important;

	/* Outline on focus */
	outline-offset: 2px;
}

#invite-a-friend-wrapper #msform .otp-request {
	width: 200px !important;
	max-width: 250px !important;
}


#invite-a-friend-wrapper .lname {
	float: right;
	padding-left: 5px;
	margin-bottom: 0px;
	width: 50%;
	box-sizing: border-box;
	font-family: Inter, serif;
	color: #2c3e50b0;
	font-size: 13px;
}

#invite-a-friend-wrapper .fname {
	float: left;
	padding-right: 5px;
	margin-bottom: 0px;
	width: 50%;
	box-sizing: border-box;
	font-family: Inter, serif;
	color: #2c3e50b0;
	font-size: 13px;
}

#invite-a-friend-wrapper .chkbox,
#invite-a-friend-wrapper .radio-bttn {
	float: left;
	padding-left: 16px;
	padding-right: 0px;
	margin-right: 5px;
	width: 5%;
	min-width: 5%;
	box-sizing: border-box;
	position: absolute;
}

#invite-a-friend-wrapper .checkbox-label,
#invite-a-friend-wrapper .rdio-bttn-label {
	float: left;
	padding: 5px;
	margin-bottom: 0px;
	margin-left: 5px;
	width: 95%;
	box-sizing: border-box;
	align-items: left;
	text-align: left;
	line-height: 13px;
	font-family: Inter, serif;
	color: #000000;
	font-size: 13px;
	position: sticky;
}

/*headings*/
#invite-a-friend-wrapper .fs-title {
	font-size: 24px;
	line-height: 1.2em;
	font-weight: 600;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	margin-bottom: 5px;
	text-align: center;
}

#invite-a-friend-wrapper .li-boxes {
	font-size: 13px;
	line-height: 13px;
	margin-bottom: 20px;
	margin-top: 20px;
}

#invite-a-friend-wrapper .help-tip {
	position: relative;
}

#invite-a-friend-wrapper .help-tip:before {
	width: 24px;
	height: 24px;
	font-weight: bold;
	color: #000000;
	border-radius: 50%;
}

#invite-a-friend-wrapper .help-tip span {
	display: none;
	/* Keep this hidden initially */
	text-align: left;
	background-color: #ffffff;
	padding: 10px;
	width: 200px;
	position: absolute;
	border-radius: 1px;
	border: solid #000;
	border-width: 1px 1px 1px 1px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
	left: 8px;
	bottom: 23px;
	color: #000000;
	font-size: 15px;
	line-height: 1.4;
}

/* Make the tooltip visible on hover and focus */
#invite-a-friend-wrapper .help-tip:hover span,

#invite-a-friend-wrapper .help-tip:focus-within span {
	display: block;
	transform-origin: 100% 0%;
	-webkit-animation: fadeIn 0.7s ease-in-out;
	animation: fadeIn 0.7s ease-in-out;
}

#invite-a-friend-wrapper .help-tip #info-icon:hover {
	cursor: pointer !important;
}

#invite-a-friend-wrapper #info-icon {
	pointer-events: auto;
}

#invite-a-friend-wrapper .help-tip span:before {
	position: absolute;
}

#invite-a-friend-wrapper html,
#invite-a-friend-wrapper div,
#invite-a-friend-wrapper span,
#invite-a-friend-wrapper applet,
#invite-a-friend-wrapper object,
#invite-a-friend-wrapper iframe,
#invite-a-friend-wrapper h1,
#invite-a-friend-wrapper h2,
#invite-a-friend-wrapper h3,
#invite-a-friend-wrapper h4,
#invite-a-friend-wrapper h5,
#invite-a-friend-wrapper h6,
#invite-a-friend-wrapper blockquote,
#invite-a-friend-wrapper pre,
#invite-a-friend-wrapper a,
#invite-a-friend-wrapper abbr,
#invite-a-friend-wrapper acronym,
#invite-a-friend-wrapper address,
#invite-a-friend-wrapper big,
#invite-a-friend-wrapper cite,
#invite-a-friend-wrapper code,
#invite-a-friend-wrapper del,
#invite-a-friend-wrapper dfn,
#invite-a-friend-wrapper img,
#invite-a-friend-wrapper ins,
#invite-a-friend-wrapper kbd,
#invite-a-friend-wrapper q,
#invite-a-friend-wrapper s,
#invite-a-friend-wrapper samp,
#invite-a-friend-wrapper small,
#invite-a-friend-wrapper strike,
#invite-a-friend-wrapper strong,
#invite-a-friend-wrapper sub,
#invite-a-friend-wrapper sup,
#invite-a-friend-wrapper tt,
#invite-a-friend-wrapper var,
#invite-a-friend-wrapper b,
#invite-a-friend-wrapper u,
#invite-a-friend-wrapper i,
#invite-a-friend-wrapper center,
#invite-a-friend-wrapper dl,
#invite-a-friend-wrapper dt,
#invite-a-friend-wrapper dd,
#invite-a-friend-wrapper ol,
#invite-a-friend-wrapper ul,
#invite-a-friend-wrapper li,
#invite-a-friend-wrapper fieldset,
#invite-a-friend-wrapper form,
#invite-a-friend-wrapper label,
#invite-a-friend-wrapper legend,
#invite-a-friend-wrapper table,
#invite-a-friend-wrapper caption,
#invite-a-friend-wrapper tbody,
#invite-a-friend-wrapper tfoot,
#invite-a-friend-wrapper thead,
#invite-a-friend-wrapper tr,
#invite-a-friend-wrapper th,
#invite-a-friend-wrapper td,
#invite-a-friend-wrapper article,
#invite-a-friend-wrapper aside,
#invite-a-friend-wrapper canvas,
#invite-a-friend-wrapper details,
#invite-a-friend-wrapper embed,
#invite-a-friend-wrapper figure,
#invite-a-friend-wrapper figcaption,
#invite-a-friend-wrapper footer,
#invite-a-friend-wrapper hgroup,
#invite-a-friend-wrapper menu,
#invite-a-friend-wrapper nav,
#invite-a-friend-wrapper output,
#invite-a-friend-wrapper ruby,
#invite-a-friend-wrapper section,
#invite-a-friend-wrapper summary,
#invite-a-friend-wrapper time,
#invite-a-friend-wrapper mark,
#invite-a-friend-wrapper audio,
#invite-a-friend-wrapper video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

#invite-a-friend-wrapper fieldset {
	z-index: -99;
}

/* HTML5 display-role reset for older browsers */
#invite-a-friend-wrapper article,
#invite-a-friend-wrapper aside,
#invite-a-friend-wrapper details,
#invite-a-friend-wrapper figcaption,
#invite-a-friend-wrapper figure,
#invite-a-friend-wrapper footer,
#invite-a-friend-wrapper hgroup,
#invite-a-friend-wrapper menu,
#invite-a-friend-wrapper nav,
#invite-a-friend-wrapper section {
	display: block;
}

#invite-a-friend-wrapper body {
	line-height: 1;
}

#invite-a-friend-wrapper ol,
#invite-a-friend-wrapper ul {
	list-style: inside !important;
	list-style-type: square !important;
}

#invite-a-friend-wrapper blockquote,
#invite-a-friend-wrapper q {
	quotes: none;
}

#invite-a-friend-wrapper blockquote:before,
#invite-a-friend-wrapper blockquote:after,
#invite-a-friend-wrapper q:before,
#invite-a-friend-wrapper q:after {
	content: '';
	content: none;
}

#invite-a-friend-wrapper table {
	border-collapse: collapse;
	border-spacing: 0;
}

#invite-a-friend-wrapper div.form-check-inline {
	line-height: 1rem;
	display: inline-flex;
}

#invite-a-friend-wrapper label {
	line-height: 0.8rem;
}

#invite-a-friend-wrapper #cond-novote-container label,
#invite-a-friend-wrapper #uncond-novote-container label,
#invite-a-friend-wrapper #voting-age label,
#invite-a-friend-wrapper #donated label,
#invite-a-friend-wrapper #inform-mp-container label,
#invite-a-friend-wrapper #add-to-mailinglist-container label,
#invite-a-friend-wrapper #inform-outreach-container label {
	margin-left: 5px !important;
}

#invite-a-friend-wrapper #cond-novote-container {

	display: flex;
	align-items: flex-start;
	margin-top: 0px !important;
}

#invite-a-friend-wrapper .shadow {
	background-color: #FBF5E8;
	padding: 20px !important;
	box-shadow: 8px 8px #FEC832;
}


#invite-a-friend-wrapper input[type='checkbox'] {
	line-height: 1rem;
	height: 12px;
	width: 12px;
	margin: auto;
	margin-left: 1px;
	background-color: #808080;
	/* Default color */
	border: 2px solid #808080;
	border-radius: 2px;
	transition: background-color 0.3s, border-color 0.3s;
	/* Smooth transition */
}

/* Hover state */
#invite-a-friend-wrapper input[type='checkbox']:hover {
	background-color: #242632;
	/* Hover color */
	border-color: #242632;
}

/* Selected (checked) state */
#invite-a-friend-wrapper input[type='checkbox']:checked {
	background-color: #242632 !important;
	/* Selected color */
	border-color: #242632 !important;
}

#invite-a-friend-wrapper #congrats-container {
	margin-bottom: 10px;
}

#invite-a-friend-wrapper #i-pledge {
	margin-top: 3px;
	appearance: none;
	/* Remove default styling */
	-webkit-appearance: none;
	/* For Safari */
	width: 15px;
	height: 15px;
	border: 2px solid #808080;
	border-radius: 4px;
	/* Optional: Make it a square with rounded corners */
	background-color: #ffffff00;
	cursor: pointer;
	outline: none;
	display: inline-block;
	position: relative;
}

#invite-a-friend-wrapper #i-pledge:hover {
	border-color: #242632;
}

/* Add a checkmark */
#invite-a-friend-wrapper #i-pledge:after {
	color: #FBF5E8;
	content: "✓";
	font-size: 15px;
	/* White checkmark */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-52%, -52%);
	font-weight: bold;
}


#invite-a-friend-wrapper #i-pledge:checked {
	background-color: #007bff;
	border: solid #007bff;
}


#invite-a-friend-wrapper #msform input[class="donation-value"] {
	padding: 5px;
	border: 1.5px solid #222222af;
	border-radius: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
	margin-left: 0px;
	width: 40%;
	box-sizing: border-box;
	font-family: Inter, Arial, sans-serif;
	color: #2C3E50;
	font-size: 13px;
}

#invite-a-friend-wrapper hr.solid {
	border-top: 1px solid #bbb;
	margin-left: 30% !important;
	margin-right: 30% !important;
	margin-bottom: 10px !important;
}

#invite-a-friend-wrapper .bolded {
	font-weight: bold !important;
}

#invite-a-friend-wrapper .margin-top {
	margin-top: 10px;
}

#invite-a-friend-wrapper .margin-bottom {
	margin-top: 5px !important;
}

#invite-a-friend-wrapper .margin-left {
	margin-left: 5px !important;
}

#invite-a-friend-wrapper sup {
	font-size: 10px;
}

#invite-a-friend-wrapper .hidden {
	display: none;
}

#invite-a-friend-wrapper .required-field::before {
	content: "*";
	color: red;
	float: right;
}

#invite-a-friend-wrapper .button-container {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	/* Optional: adds spacing between buttons */
}

@media screen and (max-width: 768px) {
	#invite-a-friend-wrapper .button-container.first {
		flex-direction: column-reverse;
		/* Stack buttons vertically */
		align-items: center;
		/* Center buttons */
	}

	#invite-a-friend-wrapper .first .left-twin,
	#invite-a-friend-wrapper .first .single {
		margin: 2px !important;
	}

	#invite-a-friend-wrapper fieldset {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: 20px !important;
		padding-bottom: 15px !important;
	}
}


#invite-a-friend-wrapper .left-twin {
	margin: 10px;
}

#invite-a-friend-wrapper .previous {
	width: 96px !important;
	background-color: #ffffff !important;
	border-radius: 0.2px !important;
	border: 2px solid #000 !important;
}

#invite-a-friend-wrapper .previous:hover {
	background-color: #242632 !important;
	color: rgb(255, 255, 255);
}

#invite-a-friend-wrapper .right-twin {
	margin-left: 5px;
	width: 100px !important;
}

#invite-a-friend-wrapper #otp-fields div::before {
	height: 2px;
	width: 12px;
	margin: 0 .25em;
	order: 1;
	border-radius: 2px;
	background: #ffffff !important;
	opacity: .4;
}

#invite-a-friend-wrapper #otp-fields label {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}


#invite-a-friend-wrapper #otp {
	width: 25%;
}

#invite-a-friend-wrapper .number {
	background-color: #5fcf80;
	color: #fff;
	height: 30px;
	width: 30px;
	display: inline-block;
	font-size: 0.8em;
	margin-right: 4px;
	line-height: 30px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
	border-radius: 100%;
}

#invite-a-friend-wrapper #otp-fields {
	border: 0;
	padding: 0;
	margin: 0;
}

#invite-a-friend-wrapper #otp-fields div {
	display: flex;
	align-items: center;
	justify-content: center;
}

#invite-a-friend-wrapper #otp-fields legend {
	margin: 0 auto 10em;
	color: #ffffff !important;
	font-weight: bold;
}

#invite-a-friend-wrapper #otp-message {
	display: block !important;
	margin-top: 5px;
	margin-bottom: -10px;
	margin-left: 25px;
}

#invite-a-friend-wrapper #otp-mssg-notif {
	text-align: center !important;
}


#invite-a-friend-wrapper input[type="number"] {
	width: .86em;
	line-height: 1;
	margin: .1em;
	padding: 8px 0 4px;
	font-size: 2.65em;
	text-align: center;
	appearance: textfield;
	-webkit-appearance: textfield;
	border: 0;
	background-color: #ffffff;
	border: 2px solid #aca77d;
	color: #000000;
	border-radius: 6px;
}

#invite-a-friend-wrapper input[type="number"]:focus {
	border: 2px solid #070707;
}


#invite-a-friend-wrapper input::-webkit-outer-spin-button,
#invite-a-friend-wrapper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* 2 groups of 3 items */
#invite-a-friend-wrapper input[type="number"]:nth-child(n+4) {
	order: 2;
}

#invite-a-friend-wrapper #error-redirect p {
	display: inherit;
	position: sticky;
}

#invite-a-friend-wrapper .share-buttons {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}

#invite-a-friend-wrapper .share-buttons button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

#invite-a-friend-wrapper .button-link {
	width: 100px;
	max-width: 200px;
	background: #FEC832;
	/* Button color */
	font-weight: 800;
	color: #000000;
	/* Font color */
	border: none;
	border-radius: 3px;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	/* Uppercase text */
	/* line-height: 1em; */
	cursor: pointer;
	text-align: center;
	padding: 5px 10px 5px 10px;
	margin-bottom: 15px !important;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

#invite-a-friend-wrapper .button-link:hover {
	background-color: #242632;
	/* Hover background color */
	color: #FFFFFF;
}

#invite-a-friend-wrapper .button-link .arrow {
	margin-left: 8px;
	transition: transform 0.3s ease;
	display: inline-block;
}

#invite-a-friend-wrapper .button-link:hover .arrow {
	transform: translateX(5px);
	color: rgb(254, 200, 50);
}

#invite-a-friend-wrapper .button-link .arrow::before {
	content: "→";
	font-size: 16px;
	display: inline-block;
}

#invite-a-friend-wrapper .cta-li-elements {
	font-size: 15px;
	line-height: 1.5em;
	font-weight: 400;
	color: #000000;
	font-family: Inter, Arial, Helvetica, sans-serif;
	list-style: none;
	background-color: #ffffff00;
	display: flex;
	align-items: center;
}

#invite-a-friend-wrapper .cta-li-elements i {
	font-size: 24px;
}


#invite-a-friend-wrapper .cta-li-elements .scnd-link-tag {
	text-decoration: none;
	color: rgba(36, 38, 50, 1);
	font-weight: normal;
	transition: color 0.3s ease;
}


#invite-a-friend-wrapper .cta-li-elements .scnd-link-tag:hover {
	color: rgba(36, 38, 50, 1);
}


#invite-a-friend-wrapper #socials-share-li {
	background-color: #ffffff00;
	padding: 13px 0px;
}


#invite-a-friend-wrapper .instagram-icon {
	background: linear-gradient(45deg, rgba(36, 38, 50, 1), rgb(254, 200, 50));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#invite-a-friend-wrapper .email-icon {
	background: linear-gradient(45deg, rgba(36, 38, 50, 1), rgb(254, 200, 50));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#invite-a-friend-wrapper .learn-more-icon {
	background: linear-gradient(45deg, rgba(36, 38, 50, 1), rgb(254, 200, 50));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Modal background */
#invite-a-friend-wrapper .modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
	/* Black with opacity */
}

/* Modal content box */
#invite-a-friend-wrapper .modal-content {
	background-color: #ffffff;
	margin: 15% auto;
	/* Center vertically */
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 400px;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Close button */
#invite-a-friend-wrapper .close {
	color: rgba(36, 38, 50, 1);
	float: right;
	font-size: 28px;
	font-weight: bold;
}

#invite-a-friend-wrapper .close:hover,
#invite-a-friend-wrapper .close:focus {
	color: rgb(254, 199, 50);
	text-decoration: none;
	cursor: pointer;
}

/* Modal header */
#invite-a-friend-wrapper h2 {
	margin: 0;
	font-size: 24px;
}

/* Input field */
#invite-a-friend-wrapper input[type="email"] {
	width: 100%;
	padding: 12px;
	margin-top: 10px;
	border: 1px solid rgba(36, 38, 50, 1);
	border-radius: 5px;
	font-size: 16px;
	font-family: Inter, Arial, sans-serif;
	box-sizing: border-box;
}

/* Submit button */
#invite-a-friend-wrapper .mai-list-submit-button {
	background-color: rgba(36, 38, 50, 1);
	color: white;
	padding: 10px 20px;
	margin-top: 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}

#invite-a-friend-wrapper .mai-list-submit-button:hover {
	background-color: rgb(254, 200, 50);
	color: black;
}

#invite-a-friend-wrapper .field-error {
	border-color: red;
	margin-bottom: 5px !important;
}

#invite-a-friend-wrapper .li-box-error {
	color: red;
}

#invite-a-friend-wrapper .ttip-heading {
	color: #000000;
	font-weight: bold !important;
	font-family: Inter, Arial, Helvetica, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.5em !important;
	margin-bottom: -10px !important;
}

#invite-a-friend-wrapper .ttip-text {
	color: #000000;
	font-weight: 400 !important;
	font-family: Inter, Arial, Helvetica, sans-serif !important;
	font-size: 15px !important;
	line-height: 1.2em !important;
}

#invite-a-friend-wrapper #msform #pledge-add {
	position: absolute !important;
	left: -9999px !important;
	z-index: -1 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}


#invite-a-friend-wrapper .margin-top {
	margin-top: 5px;
}

#invite-a-friend-wrapper .grey-text-highlight {
	background-color: rgba(128, 128, 128, 0.558);
}

#invite-a-friend-wrapper .underline {
	text-decoration: underline;
}

#invite-a-friend-wrapper .italics {
	font-style: italic;
}

#invite-a-friend-wrapper .bold {
	font-weight: bold;
}

#invite-a-friend-wrapper .center {
	text-align: center;
}

#invite-a-friend-wrapper .left {
	text-align: left;
}

#invite-a-friend-wrapper .center-content {
	display: grid;
	place-items: center;
}

#invite-a-friend-wrapper .center-self {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
}

@media (max-width: 768px) {
	#invite-a-friend-wrapper .center-self {
		position: absolute;
		left: 25%;
		transform: translate(-12.5%);
	}
}

@media (max-width: 550px) {
	#invite-a-friend-wrapper .center-self {
		position: absolute;
		left: 0;
		transform: translate(0%);
	}
}

#invite-a-friend-wrapper .link-copy-container {
	position: relative;
	width: 100%;
	max-width: 500px !important;
	font-family: Inter, Arial, sans-serif;
	cursor: pointer;
}

/* Textarea styling */
#invite-a-friend-wrapper .link-display {
	width: 100%;
	padding: 5px 10px 10px 10px !important;
	/* Adjust padding for better spacing */
	font-size: 15px !important;
	border: 1px solid rgba(36, 38, 50, 1);
	border-radius: 5px;
	color: rgba(36, 38, 50, 1);
	background-color: #f9f9f9;
	overflow: hidden;
	/* Hide scrollbar */
	white-space: normal;
	/* Allow text to wrap */
	word-wrap: break-word;
	/* Break long words if needed */
	height: auto;
	/* Allow height to expand with content */
	min-height: 60px;
	/* Ensure a minimum height */
	line-height: 1.5;
	/* Control line spacing */
	resize: none;
	/* Prevent resizing */
}

@media (max-width: 550px) {
	#invite-a-friend-wrapper .link-display {
		height: 120px;
	}
}


#invite-a-friend-wrapper .link-display:focus {
	outline: none;
}

/* Copy icon styling */
#invite-a-friend-wrapper .bi-clipboard {
	font-weight: bold;
	position: absolute;
	right: 10px;
	bottom: 20px;
	font-size: 18px;
	cursor: pointer;
	color: rgba(36, 38, 50, 0.7);
	transition: color 0.1s ease;
}

#invite-a-friend-wrapper .link-copy-container:hover .link-display,
#invite-a-friend-wrapper .link-copy-container:hover .bi-clipboard {
	color: black!important;
	font-weight: bold;
	background-color: rgb(254, 200, 50);
	border-color: rgb(254, 200, 50) !important;
	cursor:pointer;
}

@keyframes copied-animation {
	0% {
		transform: scale(1);
		color: rgba(36, 38, 50, 0.7);
	}

	50% {
		transform: scale(1.2);
		color: rgb(254, 200, 50);
	}

	100% {
		transform: scale(1);
		color: rgba(36, 38, 50, 0.7);
	}
}

#invite-a-friend-wrapper .copied {
	animation: copied-animation 0.3s ease;
	transform-origin: center;
	/* Keeps the scale animation centered */
}

/* Social Media Icons Container */
#invite-a-friend-wrapper .social-media-icons {
	display: flex;
	gap: 25px;
	/* justify-content: center; */
	width: 50%;
	margin-left: 37.5%;
	align-items: center;
	padding-top: 10px;
}

#invite-a-friend-wrapper .social-media-share-icons {
	display: flex;
	gap: 25px;
	/* justify-content: center; */
	width: 50%;
	margin-left: 40%;
	align-items: center;
	padding-top: 10px;
}


/* Icon Styling */
#invite-a-friend-wrapper .social-icon {
	font-size: 24px;
	color: black;
	transition: transform 0.3s ease, color 0.3s ease;
	text-decoration: none;
}

/* Hover Effect */
#invite-a-friend-wrapper .social-icon:hover {
	color: rgb(254, 200, 50);
	transform: scale(1.2);
}

#invite-a-friend-wrapper .disabled {
	font-size: 20px;
	pointer-events: none;
	/* Prevents clicking */
	cursor: default;
	/* Changes the cursor to indicate it's unclickable */
}

/* Responsive Design */
@media (max-width: 600px) {
	#invite-a-friend-wrapper .social-media-icons {
		gap: 10px;
	}

	#invite-a-friend-wrapper .social-media-icons {
		margin-left: 25%;
	}

	#invite-a-friend-wrapper .social-media-share-icons {
		gap: 15px;
	}

	#invite-a-friend-wrapper .social-media-share-icons {
		margin-left: 27.5%;
	}


	#invite-a-friend-wrapper .social-icon {
		font-size: 20px;
	}
}

/* General styles for popup */
#invite-a-friend-wrapper .popup {
	position: fixed;
	top: 0;
	left: 0;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* Semi-transparent background */
	display: flex;
	flex-direction: column;
	/* Stack children vertically */
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

/* Hidden popup */
#invite-a-friend-wrapper .popup.hidden {
	display: none;
}

/* Toggle container styling */
#invite-a-friend-wrapper .popup .toggle-container {
	width: 100%;
	/* Take full width */
	display: flex;
	justify-content: center;
	/* Center horizontally */
	align-items: center;
	/* Center vertically */
	margin-bottom: 20px;
	position: relative;
}

/* Pop-up content styles */
#invite-a-friend-wrapper .popup-content {
	background: #fff !important;
	border-radius: 4px !important;
	padding: 20px !important;
	width: 90% !important;
	/* Responsive width */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
	/* Subtle shadow */
	line-height: 1em !important;
	position: relative !important;
	overflow: hidden !important;
}

/* Close button styles */
#invite-a-friend-wrapper .close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 30px;
	cursor: pointer;
}


#invite-a-friend-wrapper .close-btn:hover {
	color: red;
}

/* Responsive design */
@media (max-width: 768px) {
	#invite-a-friend-wrapper .popup-content {
		width: 80%;
		height: 80%;
		/* Make it almost full width on small screens */
		max-width: 300px;
		/* Further reduce the max width */
	}

	#invite-a-friend-wrapper #letter-body {
		overflow-y: auto;
		/* Enable vertical scrolling */
		height: calc(60% - 30px);
		/* Adjust to fit within the pop-up */
		padding-right: 10px;
		/* Optional: Add padding for better spacing */
		margin-top: 10px;
		scrollbar-width: thin;
		/* For modern browsers: thinner scrollbar */
		scrollbar-color: #ccc #f5f5f5;
		border: 1.5px solid #222222af;

	}

	/* For modern browsers: custom colors */
	/* For Webkit-based browsers (Chrome, Safari) */
	#invite-a-friend-wrapper #letter-body::-webkit-scrollbar {
		width: 8px;
		/* Width of the scrollbar */
	}

	#invite-a-friend-wrapper #letter-body::-webkit-scrollbar-thumb {
		background-color: #ccc;
		/* Color of the scrollbar thumb */
		border-radius: 4px;
		/* Rounded corners for the scrollbar thumb */
	}

	#invite-a-friend-wrapper #letter-body::-webkit-scrollbar-track {
		background: #f5f5f5;
		/* Color of the scrollbar track */
	}
}

#invite-a-friend-wrapper #letter-footer {
	padding-top: 5px;
}

/* Toggle container styles */
#invite-a-friend-wrapper .toggle-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	position: relative;
	top: 10px;
}

/* Toggle switch */
#invite-a-friend-wrapper .toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin: 0 10px;
}

#invite-a-friend-wrapper .toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

#invite-a-friend-wrapper .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 4px;
}

#invite-a-friend-wrapper .slider:before {
	border-radius: 4px !important;
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

#invite-a-friend-wrapper input:checked+.slider {
	background-color: #007bff;
}

#invite-a-friend-wrapper input:checked+.slider:before {
	transform: translateX(26px);
}

/* Labels for toggle */
#invite-a-friend-wrapper .toggle-label {
	font-size: 20px;
	color: #ffffff;
}

#invite-a-friend-wrapper .toggle-label:first-of-type {
	margin-right: 5px;
}

#invite-a-friend-wrapper .toggle-label:last-of-type {
	margin-left: 5px;
}

#invite-a-friend-wrapper #confirm-and-submit-bttn-cont {
	display: flex;
	justify-content: center;
	align-items: center;
}

#invite-a-friend-wrapper #confirm-otp-bttn {
	margin: 20px !important;
	width: 100px !important;

}

@media (max-width: 480px) {
	#invite-a-friend-wrapper .popup-content {
		padding: 15px;
		/* Reduce padding for very small screens */
	}

	#invite-a-friend-wrapper .close-btn {
		font-size: 30px;
		/* Adjust close button size */
	}
}

#invite-a-friend-wrapper .navyblue-text {
	color: rgb(41, 45, 75)
}

#invite-a-friend-wrapper .x-custom-icon::before,
#invite-a-friend-wrapper .x-custom-icon::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background: black;
	/* Adjust color to match X branding */
	top: 50%;
	left: 0;
	transform: rotate(45deg);
	transform-origin: center;
}

#invite-a-friend-wrapper .x-custom-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	position: relative;
	background: transparent;
}

#invite-a-friend-wrapper .x-custom-icon::after {
	transform: rotate(-45deg);
}

#invite-a-friend-wrapper .x-custom-icon:hover::before,
#invite-a-friend-wrapper .x-custom-icon:hover::after {
	background: #1DA1F2;
	/* Optional hover effect */
}



#invite-a-friend-wrapper .flex-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0px;
}

#invite-a-friend-wrapper #success-txt {
	width: 60%;
	margin: 0px 20px 0px 40px;
}

#invite-a-friend-wrapper #to-see-how {
	width: 90%;
	text-align: left;
}

#invite-a-friend-wrapper #ballot-drop {
	flex: 1;
	text-align: center;
}

#invite-a-friend-wrapper #ballot-drop img {
	display: block;
	height: 150px;
	width: 200px;
	/* Adjust this value as needed */
}

#invite-a-friend-wrapper #bring-a-friend {
	flex: 1;
	text-align: center;
}

#invite-a-friend-wrapper #bring-a-friend img {
	display: block;
	height: 180px;
	width: 180px;
	/* Adjust this value as needed */
}
@media (max-width: 768px) {
	#invite-a-friend-wrapper .flex-container {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		align-items: center;
		margin: 30px 0px;

	}
	#invite-a-friend-wrapper #success-txt {
		width: 60%;
		margin: 0px 10px 0px 10px;
	}
	

	#invite-a-friend-wrapper #to-see-how {
		text-align: center !important;
	}

	#invite-a-friend-wrapper #ballot-drop {
		margin-bottom: 20px;
	}

	#invite-a-friend-wrapper #ballot-drop img {
		display: block;
		height: 100px;
		width: 160px;
		margin-top: 20px;
		/* Adjust this value as needed */
	}

	#invite-a-friend-wrapper #bring-a-friend {
		margin-bottom: 20px;
	}

	#invite-a-friend-wrapper #bring-a-friend img {
		display: block;
		height: 120px;
		width: 120px;
		margin-top: 20px;
		/* Adjust this value as needed */
	}
}