/*

IMPORTANT NOTES ABOUT THIS FILE

This stylesheet is included in the following templates:

*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ---------------------------  global  --------------------------- */

.tsValidationSummaryMessages {
	border           : none !important;
	background       : none !important;
	background-color : transparent !important;
}

* {
	box-sizing : border-box;
}

html, body {
	margin  : 0;
	padding : 0;
}

body {
	color         : #333333;
	counter-reset : section;
	/*font-family: Arial, "sans-serif";*/
	font-family   : "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size     : 14px;
	line-height   : 1.42857143;
}

h1, h2, h3, h4 {
	font-family : Montserrat, sans-serif;
	font-weight : 700;
	color       : black;
}

a {
	color : #425968;
}

a:hover, a:focus {
	color : #2a6496;
}

img {
	max-width : 100%;
}

.tsFormErrorMessages {
	color : #b5121b;
}

.tsFieldSets, .tsLegends {
	display : block;
	border  : none;
}

.tsFieldSets {
	border-bottom : 1px solid #dddddd;
	padding       : 4rem 0 0;
	position      : relative;
}

.DonationSectionContainer + .tsFieldSets {
	padding : 0;
}

.tsFieldSets:has(+ .tsFieldSets.Payment) {
	border-bottom : none;
}

.tsLegends {
	border-top  : 1px solid #dddddd;
	color       : #000000;
	font-family : Montserrat, sans-serif;
	font-size   : 24px;
	font-weight : 700;
	padding     : 20px 0;
	width       : 100%;
}

h3.tsLegends {
	position : static;
}

.tsFormLabels {
	width         : 100%;
	display       : inline-block;
	font-weight   : 700;
	font-size     : 13px;
	margin-bottom : 5px;
}

.tsTextBoxes, .tsDropDownLists {
	border    : 1px solid #cdd7dd;
	height    : 4rem;
	padding   : 10px 8px;
	font-size : 13px;
	width     : 100%;
}

.tsDropDownLists {
	background : #ffffff;
}

.tsFormRows {
	margin-bottom : 15px;
	position      : relative;
}

sup {
	/*font-size: .625em;*/
	font-size      : 85% !important;
	line-height    : 0;
	position       : relative;
	vertical-align : baseline;
}

input[type=checkbox] {
	margin-left : 0;
}

#billingDiffToggleContainer,
#BillingSection {
	margin-bottom : 24px;
}

/* --------------------------- form requirements and validations --------------------------- */


/*body.page-4 .tsPageMainFormContent {
    display: none !important;
}*/

body.page-3 .tsPageMainFormContent {
	display : none !important;
}

.tsFormLabels span {
	display : none;
}

.tsFormLabels::after,
.tsFormRows:has(input.EmailAddress)::after {
	color       : #818a91;
	float       : right;
	font-size   : 10px;
	font-weight : normal;
	position    : relative;
	right       : 3%;
	top         : 3px;
}

.last .tsFormLabels::after,
.right .tsFormLabels::after,
.tsFormRows.last:has(input.EmailAddress)::after,
.tsFormRows.right:has(input.EmailAddress)::after {
	right : 0;
}

.tsFormLabels.PhoneNumber:after,
.tsFormLabels.Address2:after {
	content : "(Not Required)";
}

.tsFormRows:has(input.EmailAddress)::after {
	content : "Your donation receipt will be sent to this address.";
}

.tsValidationSummaryMessages {
	color         : #ff0033;
	border        : 1px solid #ff0033;
	background    : #ffeaed;
	padding       : 20px;
	margin-bottom : 20px;
}

.tsVal_itemMarker {
	color     : red;
	top       : 28px;
	position  : absolute;
	right     : 16px;
	font-size : 20px;
}

/* ---------------------------  buttons  --------------------------- */
.frequencyOptionsContainer label,
.giftAmountBtn,
.Amount,
.bestGiftAmount,
.paymentTypeContainer label,
.nextButton{
	border        : 1px solid #cccccc;
	border-radius : 100px;
	box-shadow    : 0 0 6px #cccccc;
	cursor        : pointer;
	display       : inline-block;
	font-size     : 2rem;
	font-weight   : 700;
	line-height   : 4rem;
	padding       : 0;
	text-align    : center;
}

.giftAmountBtn,
.Amount,
.bestGiftAmount {
	font-size : 2.5rem;
}

.bestGiftAmount::placeholder {
	color : black;
}

.bestGiftAmount {
	border-radius : 100px;
	font-size     : 1.7rem;
	outline       : none;
	padding       : 0 0 0 7rem;
	text-align    : left;
}

#amountCurrencyAddon {
	background                : #ffffff;
	border                    : 1px solid #cccccc;
	border-bottom-left-radius : 500px;
	border-top-left-radius    : 500px;
	box-shadow                : none;
	font-size                 : 2.1rem;
	font-weight               : 700;
	height                    : 4rem;
	line-height               : 4rem;
	padding                   : 0 20px;
	position                  : absolute;
	top                       : 4rem;
	z-index                   : 10;
}

/*.CustomAmount:has(input:hover) #amountCurrencyAddon,*/
.CustomAmount:has(input:focus) #amountCurrencyAddon,
.customAmountEntered #amountCurrencyAddon {
	color        : white;
	background   : #b5121b;
	border-color : #b5121b;
}

.giftAmountBtn:before {
	content : "$";
}

.CustomAmount {
	border-top : 1px solid #dddddd;
	margin     : 4rem 0 2rem;
	padding    : 4rem 0 0;
	position   : relative;
}

.CustomAmount:before {
	background    : white;
	border        : 1px solid #dddddd;
	border-radius : 50%;
	content       : "or";
	font-size     : 1.5rem;
	font-style    : italic;
	left          : 50%;
	line-height   : 4rem;
	position      : absolute;
	text-align    : center;
	top           : -2rem;
	transform     : translate(-50%);
	width         : 4rem;
}

.paymentTypeContainer label {
	padding    : 0 20px;
	width      : 25%;
	box-sizing : border-box;
}

.nextButton {
	background : #b5121b;
	color      : #ffffff;
	font-size  : 24px;
	height     : auto;
	padding    : 12px 44px;
}

.tsFormFooterButtons {
	text-align : center;
	/* padding    : 30px 0 100px; */
}


/* ---------------------------  active state  --------------------------- */
.giftAmountBtn.active,
.paymentTypeContainer .active,
label#phantom_frequency_recurring_btn,
body.formInOneTimeMode label#phantom_frequency_onetime_btn {
	background-color : #b5121b;
	color            : white;
}

body.formInOneTimeMode label#phantom_frequency_recurring_btn {
	background-color : white;
	color            : #333333;
}

/* ---------------------------  all things hidden  --------------------------- */
.hidden,
.frequencyOptionsContainer input,
.ThankYouGiftContainer input {
	display : none;
}

.OneTimeThankYouGiftContainer input {
    display: none;
}

.isRecurringFrequency:not(.prettyFrequencyButtons) {
	display : none !important;
}

/* ---------------------------  boxed content --------------------------- */
.boxed,
#tributeRow,
#announcementToggleRow,
#billingDiffToggleContainer {
	background : #ffffff;
	border     : 1px solid #dddddd;
	box-shadow : 0 0 5px #dddddd;
	padding    : 12px 18px;
}

.boxed:has(input:checked),
#tributeRow:has(input:checked),
#announcementToggleRow:has(input:checked),
#billingDiffToggleContainer:has(input:checked) {
	background : #ececec;
}

.TributeType {
	color          : #333333 !important;
	text-transform : Capitalize !important;
}

.TributeType.tsDropDownLists_sysTributeType {
	color          : #666666 !important;
	text-transform : uppercase !important;
}

/* ---------------------------  header --------------------------- */
#header {
	position : relative;
	padding  : 20px 20px 0 20px;
}

#new-wwp-logo-link {
	display   : block;
	margin    : 1rem 0 2rem;
	max-width : 262px;
}

#formContainer {
	/* padding  : 0 1rem; */
	padding  : 20px 20px 0 20px;
	position : relative;
}

#top-right-logos {
	margin        : 2rem 0 0;
	position      : absolute;
	right         : 0;
	top           : 0;
	padding-right : 20px;
}

#bbb-guidestar-icons li {
	display        : inline-block;
	vertical-align : middle;
}

#bbb-img {
	width        : 100px;
	margin-right : 15px
}

#guidestar-img {
	width : 60px
}

/* ---------------------------  footer --------------------------- */

#footer {
	background  : #003161;
	clear       : both;
	color       : white;
	font-size   : 1.3rem;
	margin      : 50px 0;
	padding     : 2rem 0;
	text-align  : center;
	font-weight : 700;
}

#footer a {
	color           : white;
	text-decoration : underline;
}

.mobile-donate-by-options {
	display               : grid !important;
	grid-template-columns : 1fr 1fr;
	list-style-type       : none;
	margin                : 0;
	padding               : 0 0 1.5rem;
}

#footer-top {
	border-bottom : 1px solid white;
	border-top    : 1px solid white;
	padding       : 1.5rem 0;
}

/* ---------------------------  frequency descriptions --------------------------- */

.oneTimeGiftOptions {
	display : none;
}

.monthlyGiftOptions {
	display : block;
}

/* ---------------------------- payment buttons ---------------------------------- */

#paymentToggleRow.tsFormRows {
	border-bottom : 1px solid #dddddd;
	display       : flex;
	flex-wrap     : wrap;
	gap           : 1rem;
	margin        : 0 0 2rem;
	padding       : 0 0 2rem;
	position      : relative;
}

#paymentToggleRow::after {
	background : url("https://media2.charityengine.net/WF/_transactionServerFiles/745/2019/4/18/secured-by-geotrust2.png") no-repeat center center / 100px auto;
	bottom     : -53px;
	content    : " ";
	display    : block;
	height     : 100px;
	left       : 50%;
	position   : absolute;
	transform  : translateX(-50%);
	width      : 100px;
}

.paymentTypeContainer {
	display     : flex;
	flex        : 0 1 48%;
	/* gap         : 1rem; */
	padding     : 0;
	white-space : nowrap;
}

/* .paymentTypeContainer:first-child {
	flex-basis : 100%;
} */

.paymentTypeContainer label {
	cursor           : pointer !important;
	/* your existing properties: */
	display          : block !important;
	width            : 100% !important;
	box-sizing       : border-box !important;
	background-color : #ffffff !important;
	color            : black !important;
	/* padding          : 10px !important; */
	font-weight      : bold !important;
	text-align       : center !important;
	font-size        : 16px !important;
	box-shadow       : 0 0 6px #cccccc !important;
}

.paymentTypeContainer label.active {
	background-color : #b5121b !important;
	color            : white !important;
	border           : 1px solid #cccccc !important;
}

/* --------------------------------------------------------------------------------------- */
/* ---------------------------  other --------------------------- */

/* .DonationSectionContainer .tsLegends {
	padding : 10px 0;
} */

#anthony-label {
	font-size      : 11px;
	margin-top     : 3px;
	text-align     : right;
	text-transform : uppercase;
}

.FrequencyOptions {
	text-align : center;
}

.frequencyOptionsContainer {
	display  : inline-block;
	position : relative;
	width    : 50%;
}

#additional-options-container {
	font-size : 13px;
}

#additional-options-left-col,
#additional-options-right-col {
	width          : 48%;
	display        : inline-block;
	vertical-align : top;
}

#additional-options-left-col {
	margin-right : 2%;
}

#additional-options-left-col p {
	margin-top : 3px;
}

#optional-card-img {
	max-width : 60%;
	display   : block;
}

#number-of-cards {
	border : 1px solid #cdd7dd;
	width  : 65px;
}

fieldset.Contact {
	padding-bottom : 15px;
}

/* fieldset.Payment {
	background          : url("https://media2.charityengine.net/WF/_transactionServerFiles/745/2019/4/18/secured-by-geotrust2.png") no-repeat;
	background-position : top 0 right 0;
	background-size     : 100px;
	padding-top         : 20px;
	padding-bottom      : 10px;
} */

/* fieldset.Payment .tsLegends {
	padding-top   : 0;
	top           : 25px;
	position      : relative;
	margin-bottom : 10px;
} */

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

#googlePayButtonContainer {
	margin     : 1rem 0 10px;
	text-align : center;
}

@media (min-width : 1000px) {
	#googlePayButtonContainer {
		margin-top : 2rem;
	}
}

.announcementTypeContainer {
	margin-right : 10px;
}

.DonatingAs.tsFormLabels {
	display      : inline-block;
	width        : auto;
	margin-right : 20px;
}

.DonatingAs.tsFormLabels span {
	right : 0;
}

#paymentToggleRow .paymentTypeContainer:first-child label {
	border-top-left-radius    : 100px;
	border-bottom-left-radius : 100px;
}

#paymentToggleRow .paymentTypeContainer:last-child label {
	border-top-right-radius    : 100px;
	border-bottom-right-radius : 100px;
}

input.paymentTypes {
	display : none;
}

#monthlyGiftAmountContainer .giftAmountBtn {
	width         : 87%;
	margin-bottom : 8px;
}

.FrequencyDescription {
	padding       : 10px 10px 25px;
	border-bottom : 1px solid #dddddd;
}

#billingDiffToggleContainer {
	margin-top : 10rem;
	position   : relative;
}

#billingDiffToggleContainer::before {
	border-bottom : 1px solid #dddddd;
	border-top    : 1px solid #dddddd;
	color         : #000000;
	content       : "Billing Information";
	display       : block;
	font-family   : Montserrat, sans-serif;
	font-size     : 24px;
	font-weight   : bold;
	margin        : 0 0 0 -2rem;
	padding       : 2rem 0 1rem;
	position      : absolute;
	text-align    : center;
	top           : -8rem;
	width         : 100%;
}

.ach-help-tip {
	width     : 25%;
	display   : block;
	max-width : 68.95px;
}

.ThankYouGiftContainer img {
	cursor : pointer;
	border : 2px solid #cccccc;
}

.OneTimeThankYouGiftContainer img {
	cursor : pointer;
	border : 2px solid #cccccc;
}

label:has(.gift-title) {
	text-align : center;
}

.gift-title {
	color       : black;
	display     : block;
	font-size   : 2rem;
	font-weight : bold;
	margin      : 1rem 0 0;
	text-align  : center;
}

.gift-subtext {
	display     : block;
	text-align  : center;
	font-size   : 2rem;
	font-style  : italic;
	font-weight : normal;
}

.TributeType {
	font-weight    : 700;
	text-transform : uppercase;
	color          : #656565;
}

.no-label.tsFormRows.paypal-row,
.payPalButtonsRow {
	margin-top : 1rem;
}

@media (min-width : 1000px) {
	.no-label.tsFormRows.paypal-row,
	.payPalButtonsRow {
		margin-top : 2rem;
	}
}

.isEmailOptIn label {
	width          : 90%;
	display        : inline-block;
	vertical-align : top;
	margin-left    : 5px;
}

/*.formInOneTimeMode .ThankYouGiftContainer {
    display: none;
}*/

/*.premiumSelected {
    border: 4px solid #b5121b;
    boxSizing: border-box;
}*/

.ThankYouGiftContainer span span input[type="radio"]:checked + label img {
	border     : 4px solid #b5121b !important;
	box-sizing : border-box;
}

.OneTimeThankYouGiftContainer span span input[type="radio"]:checked + label img {
	border     : 4px solid #b5121b !important;
	box-sizing : border-box;
}


.achCheckOverlayContainers {
	display       : none;
	position      : fixed;
	top           : 50%;
	left          : 50%;
	transform     : translate(-50%, -50%);
	width         : 400px;
	background    : rgba(0, 0, 0, 0.8);
	padding       : 10px;
	border-radius : 8px;
	text-align    : center;
}

.achCheckOverlayContainers img {
	width         : 100%;
	max-width     : 400px;
	border-radius : 5px;
}

.adjustPlaceholder::placeholder {
	font-size : 12px !important; /* Ensure placeholder text is always 12px */
	color     : #cccccc !important; /* Set placeholder color */
	opacity   : 1; /* Ensure it is fully visible */
}

#payProcessingFeeSystemSectionContainer {
	clear      : both;
	margin-top : 4rem;
}

@media (min-width : 800px) {
	#payProcessingFeeSystemSectionContainer {
		margin-top : 1rem;
	}
}

/*#oneClickGivingButtonContainer div:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

    #oneClickGivingButtonContainer div:first-child > button, #oneClickGivingButtonContainer div:first-child > a {
        margin-top: 0px;
        font-size: 14px;
    }

    #oneClickGivingButtonContainer div:first-child > a {
        align-content: space-around;
        text-decoration: underline;
        margin-top: 0px !important;
    }

#oneClickGivingYesButton {
    padding: 5px;
}

#oneClickGivingNoButton {
    border: 0px;
    background-color: white;
    text-decoration: underline;
    color: #425968;
}*/

#oneClickGivingButtonContainer button {
	margin-right     : 1em;
	margin-bottom    : 2px;
	padding          : .5em 1em;
	font-size        : 1em;
	border           : 2px solid #c7c7c7 !important;
	background-color : #ffffff;
	box-sizing       : border-box;
	transition       : all 0.2s ease-in-out;
	float            : left;
	cursor           : pointer;
}

#oneClickGivingButtonContainer button:hover {
	-webkit-box-shadow : 1px 1px 1px #dadada;
	box-shadow         : 1px 1px 1px #dadada;
	background-color   : #f9f9fb;
}

#oneClickGivingYesButton {
	border-color     : #037bc0 !important;
	color            : #ffffff !important;
	background-color : #b5121b !important;
}

/* .tsPageCustomFooters {
	margin-top : -11rem;
} */

.tsPageCustomFooters div {
	text-align    : center;
	box-sizing    : border-box;

	max-width     : 65%;
	margin        : 0 auto;
	overflow-wrap : default; /* Allow long words to wrap */
	word-wrap     : break-word; /* Older browser support */
	word-break    : break-word; /* Aggressive break if needed */
	white-space   : normal; /* Ensure wrapping happens */
	padding       : 8px; /* Optional: gives breathing room */
	font-size     : 13px; /* Adjust if needed */
	line-height   : 1.4; /* Readability */
}

/* ---------------------------  clearfix  --------------------------- */
.clearfix::after {
	content : "";
	clear   : both;
	display : table;
}

.visible-xs-mobile-donate-by-options {
	display : none;
}

/* ---------------------------  mobile  ---------------------------------------------------------------------------------------------------------------------------------------------- */

@media (min-width : 768px) and (max-width : 858px) {
	#paymentToggleRow {
		display        : flex;
		flex-direction : column;
	}

	#paymentToggleRow .paymentTypeContainer label {
		display       : block;
		border-radius : 100px;
		margin-bottom : 2px;
		width         : 100%;
		box-sizing    : border-box;
	}

	#paymentToggleRow .paymentTypeContainer:last-child {
		margin-bottom : 0;
	}

	/* Inputs inside paymentTypeContainer get rounded corners */
	#paymentToggleRow .paymentTypeContainer input.paymentTypes {
		border-radius : 100px;
	}
}

@media (min-width : 768px) {

	#aspnetForm {
		display               : grid;
		gap                   : 0 3rem;
		grid-template         : "alert alert" "second-alert second-alert" "form hero" "foot hero";
		grid-template-columns : 57% auto;
	}

	body.page-3 #aspnetForm,
	body.page-4 #aspnetForm {
		display : block;
	}

	div.tsValidationSummaryMessages {
		grid-area : alert;
	}

	#billingDiffToggleContainer {
		margin-top : 8rem;
	}

	#billingDiffToggleContainer::before {
		border-bottom : none;
		text-align    : left;
	}

	.paymentTypeContainer:first-child {
		flex-basis : unset;
	}

	#paymentToggleRow.tsFormRows {
		border-bottom : none;
		flex-wrap     : nowrap;
		gap           : 0;
		margin        : 0 0 1rem;
		padding       : 0;
	}

	#paymentToggleRow::after {
		display : none
	}

	.Payment legend {
		background : url("https://media2.charityengine.net/WF/_transactionServerFiles/745/2019/4/18/secured-by-geotrust2.png") no-repeat right center / 100px auto;
	}

	.mobile-donate-by-options {
		display : none !important;
	}

	#footer-top {
		border : none;
		margin : 0;
	}

	.tsVal_itemMarker {
		right : 3rem;
	}

	.tsFieldSets {
		padding : 0 0 1rem;
	}

	.tsLegends {
		margin : 0;
	}

	.DonationSectionContainer .tsLegends {
		border  : none;
		padding : 0 0 1rem;
	}

	#tsLandingPageHeader {
		grid-area : hero;
		/*! top      : 1rem; */
	}

	#header,
	#formContainer {
		max-width : 1029px;
		margin    : 0 auto;
	}

	#formContainer {
		padding : 0;
	}

	#new-wwp-logo-link {
		/*display: none;*/
	}

	#mobile-new-wwp-logo-no-chat-link {
		display : none;
	}

	#mobile-new-wwp-logo-no-chat {
		max-width : 85%;
	}

	#top-right-logos {
		/*display: none;*/
	}

body.page-4 #blue-header-container .half.left h1 {
  color: transparent;     /* hide original text */
  position: relative;
}

body.page-4 #blue-header-container .half.left h1::after {
  content: "Thank You";
  color: #fff;            /* or the color you prefer */
  position: absolute;
  top: 0;
  left: 0;
}

	#blue-header-container {
		background    : #003161;
		padding       : 10px 18px;
		margin-bottom : 25px;
		color         : white;
	}

	#blue-header-container h1 {
		color     : white;
		font-size : 3rem;
		margin    : 0.4rem;
	}

	#blue-header-container a {
		color           : white;
		text-decoration : underline;
	}

	#blue-header-container .right {
		float      : right;
		text-align : right;
	}

	#donate-by-options {
		list-style-type : none;
		margin          : 0;
		font-size       : 12px;
		line-height     : 1.75em;
	}

	#right-column {
		/*! width        : 30%; */
		/* float: right; */
		padding-right : 19px;		
                top           : 1rem;
		/*! width: 100%; */
	}

	#right-column p {
		margin    : 30px 0px 20px;
		font-size : 10pt;
      	vertical-align:baseline;
	}
  
  
    /*#sidebar-img-container p {
        margin: 0px 0px 0px;
        font-size: 8pt;
	}*/
  
  
    #sidebar-media-container p {
      margin: 0px 0px 0px;
      font-size: 8pt;
    } 

	.sticky {
		position : sticky;
	}

	#anthony-label {
		text-align : center;
	}

	.half {
		display : inline-block;
		width   : 50%;
	}

	select.tsDropDownLists.BillingCountry,
	input.tsTextBoxes.BillingCity {
		width : calc(100% - 1rem);
	}

	.half.first input.tsTextBoxes.BillingPostalCode,
	.half.first select.tsDropDownLists.BillingState,
	.half.last.first input.AcknowledgeePostalCode,
	.half.last.first select.AcknowledgeeState {
		width : 100%;
	}

	.quarter {
		width : 25%;
		float : right;
	}

	.bestGiftAmount {
		font-size : 1.4rem;
		height    : 4rem;
		width     : 98%;
	}

	.gift-title {
		font-size : 1.6rem;
	}

	.gift-subtext {
		font-size : 1rem;
	}

	div.CardNumber, div.ExpirationMonth {
		float   : left;
		padding : 0 1rem 0 0;
	}

	select.ExpirationYear {
		/*margin-top: 25px;*/
		margin-bottom : 12px;
	}

	label.ExpirationMonth {
		display     : flex;
		align-items : center;
	}

	label.ExpirationMonth::before {
		content     : "Expiration Date";
		white-space : nowrap;
	}

	label.ExpirationYear:before {
		content : "";
	}

	.half.first .tsTextBoxes,
	.half.first .tsDropDownLists,
	.half.left .tsTextBoxes,
	.half.left .tsDropDownLists,
	.CardNumber input {
		width : calc(100% - 1rem);
	}

	.tsPageMainFormContent, .tsPageCustomFooters {
		padding   : 15px !important;
		grid-area : foot;
	}

	.tsPageMainFormContent {
		border      : 1px solid #dddddd;
		box-shadow  : 0 0 5px #dddddd;
		grid-area   : form;
		margin-left : 20px;
	}

	.FrequencyOptionsRow {
		border-bottom : 0px solid #dddddd;
		margin        : 0 0 1rem;
		padding       : 0 0 1rem;
	}

	#phantom_frequency_onetime_btn {
		border-top-right-radius    : 0;
		border-bottom-right-radius : 0;
	}

	#phantom_frequency_recurring_btn {
		border-top-left-radius    : 0;
		border-bottom-left-radius : 0;
	}

	.frequencyOptionsContainer label {
		font-size : 1.6rem;
		width     : 100%;
	}

	#monthlyGiftAmountContainer .giftAmountBtn {
		width        : 49%;
		margin-right : 1%;
	}

	#oneTimeGiftAmountContainer[style="display: block;"] {
		display               : grid !important;
		gap                   : 1rem;
		grid-template-columns : repeat(3, 1fr);
		margin                : 0 0 1rem;
	}

	#oneTimeGiftAmountContainer .giftAmountBtn {
		height : 4.5rem;
	}

	.CustomAmount {
		border  : none;
		float   : right;
		margin  : -5.3rem 0 0;
		padding : 0;
		width   : 50%;
	}

	.CustomAmount::before {
		display : none;
	}

	#amountCurrencyAddon {
		background-color : #ffffff;
		border-color     : #cccccc;
		color            : #000000;
		height           : 4.5rem;
		top              : 0;
	}

	.bestGiftAmount {
		height : 4.5rem;
	}

	.customAmountEntered #amountCurrencyAddon {
		background-color : #b5121b;
		border-color     : #b5121b;
		color            : #ffffff;
	}

	body.formInOneTimeMode .CustomAmount {
		width  : 33%;
		margin : -5.5rem -0.5rem 0 0;
	}

	body.formInOneTimeMode .tsTextBoxes.ce-input.bestGiftAmount {
		padding-left : 6rem;
	}

	fieldset:has(.ThankYouGiftContainer) {
		border-bottom  : 1px solid #dddddd;
		margin-bottom  : 2rem;
		padding-bottom : 2rem;
	}

       fieldset:has(.OneTimeThankYouGiftContainer) {
		border-bottom  : 1px solid #dddddd;
		margin-bottom  : 2rem;
		padding-bottom : 2rem;
	}

	span.thankYouGiftImage.thankYouGiftOptions {
		display               : grid;
		gap                   : 1rem;
		grid-template-columns : repeat(2, 1fr);
	}

        span.onetimethankYouGiftImage.onetimethankYouGiftOptions {
               display: grid;
               gap: 1rem;
               grid-template-columns: repeat(2, 1fr);
        }

	.ThankYouGiftContainer span > span {
		cursor  : pointer;
		display : inline-block;
	}

        .OneTimeThankYouGiftContainer span > span {
		cursor  : pointer;
		display : inline-block;
	}

	.paymentTypeContainer label {
		border-radius : 0;
	}

	#paymentToggleRow:has(#applePayToggleContainer) .paymentTypeContainer:last-child label {
		border-radius: 0;
	}

	#applePayToggleContainer.paymentTypeContainer label {
		border-top-right-radius    : 100px;
		border-bottom-right-radius : 100px;
	}

	.tsFormRows:has(.isEmailOptIn) {
		margin-top : 4rem;
		position   : relative;
	}

	.tsFormRows:has(.isEmailOptIn)::before {
		display    : block;
		content    : " ";
		border-top : 1px solid #dddddd;
		position   : absolute;
		top        : -3rem;
		width      : 100%;
		left       : 0;
	}
}

@media (max-width : 767px) {

	#right-column p {
		/*margin: 20px 0px 0px;*/
		font-size : 17px;
	}
       

	/*#sidebar-img-container p {
		margin    : 0 auto !important;
		font-size : 11px;
	}*/
  
    #sidebar-media-container p {
        margin: 0 auto !important;
        font-size: 11px;
    }

	/* .tsPageCustomFooters {
		margin-top : -100px;
	} */

	.visible-xs-mobile-donate-by-options {
		display : block;
	}

	.tsFormRows.last:has(input.EmailAddress),
	.tsFormRows.right:has(input.EmailAddress) {
		border-bottom  : 1px solid #dddddd;
		padding-bottom : 4rem;
		margin-bottom  : 2rem;
	}

	#header {
		/*background: #003161;*/
		height        : auto;
		margin-bottom : 0;
		padding       : 0;
	}

	#new-wwp-logo-link {
		display : none;
	}

	#mobile-new-wwp-logo-no-chat-link {
		background-color : #003161;
		display          : block;
		padding          : 1rem 0;
		text-align       : center;
	}

	#mobile-new-wwp-logo-no-chat {
		max-width : 85%;
	}

	#top-right-logos {
		display : none;
	}


	#blue-header-container h1 {
		border-bottom : 1px solid #dddddd;
		margin        : 1rem 1rem 0rem;
		padding       : 0 0 1rem;
	}

body.page-4 #blue-header-container .half.left h1 {
    color: transparent; /* hide original text */
    position: relative;
}

    body.page-4 #blue-header-container .half.left h1::after {
        content: "Thank You";
        color: black; /* or the color you prefer */
        position: absolute;
        top: 0;
        left: 0;
    }


	/* use CSS grid to reorder elements */
	#right-column {
		display : block;
	}

	#right-column > p {
		order : 3;
		/* margin: 0;*/
	}

        #right-column > h3 {
		order : 2;
		/* margin: 0;*/
	} 

       

	.tsLegends {
		text-align    : center;
		border-bottom : 1px solid #dddddd;
		border-top    : 1px solid #dddddd;
		margin        : 0 0 2rem;
		padding       : 2rem 0 1rem;
		position      : relative;
		top           : 4rem;
	}

	legend.tsLegends.ce-legend::before,
	#billingDiffToggleContainer::after {
		background        : black;
		border-radius     : 50%;
		color             : white;
		content           : counter(section);
		counter-increment : section;
		display           : block;
		font-size         : 1.6rem;
		left              : 50%;
		line-height       : 4rem;
		position          : absolute;
		text-align        : center;
		top               : -2.2rem;
		transform         : translateX(-50%);
		width             : 4rem;
	}

	#billingDiffToggleContainer::after {
		top : -10rem;
	}

	#oneTimeGiftAmountContainer[style="display: block;"] {
		display               : grid !important;
		gap                   : 1rem;
		grid-template-columns : repeat(6, 1fr);
		margin                : 0 0 1rem;
	}

	#oneTimeGiftAmountContainer .giftAmountBtn:nth-child(-n+3) {
		grid-column : span 3;
	}

	#oneTimeGiftAmountContainer .giftAmountBtn:nth-child(n+3) {
		grid-column : span 2;
	}

	#donate-by-options {
		display : none;
	}

	.paymentTypeContainer label {
		margin-bottom : 8px;
		display       : block;
	}

	.ach-help-tip-container {
		display : none;
	}

	label.ExpirationMonth:before {
		content : "Expiration Month";
	}

	label.ExpirationYear:before {
		content : "Expiration Year";
	}

	#monthlyGiftAmountContainer .giftAmountBtn,
	#oneTimeGiftAmountContainer .giftAmountBtn,
	.bestGiftAmount {
		width : 100%;
	}

	div.tsFormRows.FrequencyOptionsRow {
		border-bottom         : 0px solid #dddddd;
		display               : grid;
		gap                   : 1rem;
		grid-template-columns : 1fr 1fr;
		margin                : 1rem 0 3rem;
		padding               : 0 0 2rem;
	}

	span.frequencyOptionsContainer {
		display : block;
		width   : 100%
	}

	/* span.frequencyOptionsContainer:first-of-type {
		text-align : right;
	} */
	span.frequencyOptionsContainer label {
		height      : unset;
		line-height : 5rem;
		padding     : 0 1rem;
		width       : 100%;
	}

	/* 	span.frequencyOptionsContainer label:first-of-type {
			margin : 0 5px 0 0;
		}

		span.frequencyOptionsContainer label:last-of-type {
			margin : 0 0 0 5px;
		} */
}

/* ---------------------------  desktop  --------------------------- */

input[type="checkbox"] + label,
label[for="send-me-a-card-checkbox"] {
	font-weight    : normal;
	max-width      : calc(100% - 2rem);
	padding        : 0 0 0 1rem;
	vertical-align : top;
}

.checkbox-row {
	border     : 1px solid #dddddd;
	box-shadow : 0 0 5px #dddddd;
	padding    : 12px 18px;
}

.checked-checkbox-row {
	background : #ececec;
}

.tsFormRows.payPalButtonsRow:has(.paypal-button-container[style="display: none;"]) {
	display : none;
}

ul.tsCustomValidationSummaryMessages.errormessage > li {
	color           : #b5121b !important;
	list-style-type : none;
	padding-left    : 0; /* Optional: remove indent */
	margin-left     : 0; /* Optional: remove left margin */
	/* margin-bottom   : 24px;
	margin-top      : -24px; */
}

div.tsValidationSummaryMessages {
	color : #b5121b !important;
}

div.tsValidationSummaryMessages:has(+ .tsCustomValidationSummaryMessages.errormessage) {
	margin-bottom : 0;
}

.tsCustomValidationSummaryMessages.errormessage {
	grid-area : second-alert;
	margin    : 0;
	padding   : 0 20px;
}

#applePayToggleContainer {
	order: 10; /* make apple last */
}

#applePayButtonContainer {
	margin-top : 1rem;
	text-align : center;
}

@media (min-width : 1000px) {
	#applePayButtonContainer {
		margin-top : 2rem;
	}
}

/* modify ACH explanation image */
.tsFormRows:has(.RoutingNumber) {
	position : relative;
}

.ach-help-tip-container {
	/* border        : 1px solid red;
	border-radius : 50%;
	color         : red; */
	background : transparent url("https://support.woundedwarriorproject.org/_transactionServerFiles/745/2015/4/1/tooltip-icon.jpg") no-repeat center center;
	cursor     : pointer;
	display    : none;
	height     : 2rem;
	overflow   : clip;
	left       : 11rem;
	position   : absolute;
	text-align : center;
	top        : 0;
	width      : 2rem;
	z-index    : 10;
}

@media (min-width : 760px) {
	.ach-help-tip-container {
		display : block;
	}
}

.ach-help-tip-container::after {
	content     : "?";
	display     : block;
	font-size   : 1.4rem;
	left        : 50%;
	line-height : 1.7rem;
	position    : absolute;
	top         : 50%;
	transform   : translate(-50%, -50%);
	z-index     : 1;
}

/* .AccountNumber ~ .ach-help-tip-container {
	!* display : none; *!
	!* right : 0; *!
} */

.ach-help-tip-container img {
	left       : 0;
	max-height : 100%;
	max-width  : unset;
	opacity    : 0;
	position   : absolute;
	top        : 0;
	z-index    : 10;
}

.ach-help-tip {
	width      : unset;
	max-width  : unset;
	max-height : 100%;
}

.tsFormRows .tsValidationSummaryMessages {
	padding  : 0;
	margin   : 0;
	position : absolute;
}

.tsFieldSets.ce-fieldset.Payment.InfoSectionContainer > br {
	display : none;
}

@media (min-width : 760px) {
	.tsFormFooterButtons {
		margin : 2rem;
	}

	#tsLandingPageFooter {
		margin  : 0;
		padding : 0 !important;
	}

	#tsLandingPageFooter > p#below-donate-btn-text {
		padding : 0 !important;
	}
}