Experience Cloud Page CSS
- Angela Jann
.cASDisclaimerComponent .block {
margin-top: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
justify-content: flex-start;
align-items: center;
}body {
color: #333!important;
-webkit-font-smoothing: antialised;
}
/** Checkout Page CSS Start **/
.checkoutpage header h2 span{
font-size: 25px;
line-height: 1.30;
font-weight: bold;
}
.checkoutpage header h2{
text-align: center;
}
.checkoutpage .slds-checkbox .slds-checkbox__label .slds-form-element__label{
font-size: 18px;
}
.checkoutpage label.slds-form-element__label.slds-no-flex{
font-size: 18px;
}
.checkoutpage label.slds-form-element__label span{
font-size: 18px;
}
.checkoutpage .cASCreditCardNumber .credit-card{
top: 44px;
}
.checkoutpage .cAS_Dollar_Handle .gauStyle{
width: 100% !important;
}
.checkoutpage .slds-select
{
font-size: 18px;
height: 42px;
}
.slds-input
{
height: 42px;
}
.WITFAAS_Dollar_Handle .zoom {
transition: transform .2s;
margin: 0 auto;
}
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer, .SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer, .SinglepageDonationForm .flowruntimeBody .body
.PaymentMethodOptionContainer, .checkoutpage .flowruntimeBody .body .donationOptionContainer, .checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer {
padding: 10px;
font-size: 18px;
}.cASDisclaimerComponent .block {
margin-top: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
justify-content: flex-start;
align-items: center;
}
.cASDisclaimerComponent .block {
margin-top: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
justify-content: flex-start;
align-items: center;
font-size: 14px;
}
/** Checkout Page CSS End **/
/** Build Your Own Fundraising Campaign CSS (start)**/
.cAS_BuildYourOwnFundraisingCampaign .bannerContainer, .cAS_BuildYourOwnFundraisingCampaign .bannerContainer img{
height: 410px;
text-align: center;
}
.cAS_BuildYourOwnFundraisingCampaign .campaignDetailsContainer{
padding-bottom: 20px;
}
.cAS_BuildYourOwnFundraisingCampaign .campaignName{
font-size: 40px;
font-weight: 900;
margin-left: auto;
margin-right: auto;
width: 50%;
line-height: 1;
}
.cAS_BuildYourOwnFundraisingCampaign .campaignBlurb{
font-size: 16px;
font-weight: bold;
margin-top: 12px;
margin-left: auto;
margin-right: auto;
width: 74%;
}
.cAS_BuildYourOwnFundraisingCampaign .signupButton{
border-radius: 0px;
font-weight: bold;
margin-top: 20px;
}
.cAS_BuildYourOwnFundraisingCampaign .leaderboardTitle{
font-weight: lighter;
margin-top: 0px;
}
.cAS_BuildYourOwnFundraisingCampaign .topFundraisersText .topTeamsText{
font-size: 14px;
}
.cAS_BuildYourOwnFundraisingCampaign p {
font-size: 14px;
}
.cAS_BuildYourOwnFundraisingCampaign footer button{
border-radius: 0px;
transition: 0.2s;
font-size: 14px;
}
.cAS_BuildYourOwnFundraisingCampaign .slds-form-element__label span, .cAS_BuildYourOwnFundraisingCampaign .slds-form-element__label div {
font-size: 14px;
font-weight: bold;
}
/** Build Your Own Fundraising Campaign CSS (end)**/
.CardholderNameContainer.cAS_DonorDetails .slds-form-element__control.slds-grow {
margin: 0 auto;
width: 65%;
}
.siteforceCptBody,
.siteforceCptBody .siteforceContentArea.siteforceSldsOneColLayout .contentRegion, .siteforceCptBody .siteforceContentArea.siteforceSldsTwoCol84Layout>div.slds-grid.slds-wrap {
background-color: #fff!important;
}
.CardholderNameContainer.cAS_DonorDetails label.slds-form-element__label.slds-no-flex {
padding-left: 17%;
}
.SinglepageDonationForm button.gpay-button.black.donate.en,
.paypal-button.paypal-button-shape-rect {
margin: 0;
}
.cAS_Dollar_Handle .zoom:hover,
.cAS_Dollar_Handle .zoom {
transform: none!important;
transition: none!important;
}
.cAS_Dollar_Handle button.amountStyle {
/*background-color: rgb(1,148,161)!important;*/
background-color: rgba(223, 31, 81, 0.33)!important;
border: none!important;
}
.cAS_Dollar_Handle button:hover {
/*background-color: #e7e7e7!important;*/
background-color: rgba(223, 31, 81, 0.33)!important;
}
.cAS_Dollar_Handle button:focus,
.cAS_Dollar_Handle button:active {
background-color: indianred!important;
border: none!important;
}
.slds-button_brand:focus {
background-color: rgba(1, 148, 161, 1)!important;
}
.cAS_Dollar_Handle .zoom {
padding: 0 5px!important;
}
.MultipageDonationForm-P2 .DonorDetailsContainer > div.CardholderNameContainer:nth-child(1),
.MultipageDonationForm-P2 .DonorDetailsContainer > div.CardholderNameContainer:nth-child(n+6),
.SinglepageDonationForm .DonorDetailsContainer > div.CardholderNameContainer:nth-child(1),
.SinglepageDonationForm .DonorDetailsContainer > div.CardholderNameContainer:nth-child(n+6) {
visibility: visible;
/* display:none !important; */
}
.slds-form-element__control.slds-grow {
margin: 1rem 0;
}
.SinglepageDonationForm .amount-box.costumAmountStyle p {
padding-top: 1rem;
}
.SinglepageDonationForm .container .block .slds-form-element__control.slds-grow,
.SinglepageDonationForm .container .block label {
margin: 0;
padding: 0;
}
textarea#longInput712\:0 {
border-radius: 0;
}
.SinglepageDonationForm .DonorDetailsContainer.cAS_DonorDetails {
margin-bottom: 1rem;
}
label.slds-checkbox__label {
display: block;
font-weight: 400;
}
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label {
margin: 0 auto;
display: block;
}
.SinglepageDonationForm .cAS_Dollar_Handle .zoom {
padding: 5px!important;
}
.checkoutpage .cAS_Dollar_Handle .zoom {
padding: 5px!important;
}
.SinglepageDonationForm .anonymousCheck.cAS_DonorDetails {
margin: 0;
padding-left: 12px;
}
.MultipageDonationForm-P4 label.slds-checkbox__label {
padding: 0;
}
.MultipageDonationForm-P3 .slds-grid.slds-wrap.cAS_Dollar_Handle div img,
.checkoutpage .slds-grid.slds-wrap.cAS_Dollar_Handle div img,
.SinglepageDonationForm .slds-grid.slds-wrap.cAS_Dollar_Handle div img {
width: 100%;
overflow: hidden;
}
.MultipageDonationForm-P3 button[id^=Amount],
.SinglepageDonationForm button[id^=Amount] {
margin: 0 auto!important;
height: 10em;
transition: background 0.4s linear;
}
.MultipageDonationForm-P3 button[id^=Amount]:hover,
.SinglepageDonationForm button[id^=Amount]:hover {
/*background: #e7e7e7;*/
background-color: rgba(223, 31, 81, 0.33);
}
b.cAS_Dollar_Handle,
.MultipageDonationForm-P4 .flowruntimeRichTextWrapper.flowruntimeDisplayText p {
font-size: 30px!important;
text-align: center!important;
margin: 2rem auto 0 auto!important;
display: block;
}
.SinglepageDonationForm .DonorDetailsContainer,
.MultipageDonationForm-P2 .DonorDetailsContainer,
.MultipageDonationForm-P2 .CardholderNameContainer.cAS_DonorDetails,
.MultipageDonationForm-P4 .cASDisclaimerComponent,
.MultipageDonationForm-P4 .CreditCardFieldsContainer,
.MultipageDonationForm-P3 .slds-m-bottom_x-small,
.bBody,
.DonorDetailsContainer.cAS_DonorDetails,
.CardholderNameContainer.cAS_DonorDetails,
.CreditCardFieldsContainer,
.DirectDebitFieldsContainer {
width: 65%!important;
margin: 0 auto!important;
}
.SinglepageDonationForm .DirectDebitFieldsContainer > div {
padding: 0!important;
width: 100%!important;
}
.MultipageDonationForm-P4 .OtherPaymentMethodContainer > div {
display: block;
margin: 1.5rem 0;
}
button.slds-button.slds-button_neutral,
button.slds-button.slds-button_brand {
margin: 16px 5px;
padding: 10px 30px;
border-radius: 0;
}
.slds-button_neutral,
.slds-button--neutral {
transition: none
}
.anonymousCheck.cAS_DonorDetails {
width: 65%;
margin: 0 auto;
margin-top: 1rem;
}
.slds-checkbox .slds-checkbox__label .slds-form-element__label {
font-size: 19px;
}
div#CustomerPortalTemplate {
position: relative;
min-height: 100vh;
}
.cFooterPanel {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
}
.siteforceCptBody .cCenterPanel {
max-width: 960px!important;
}
.slds-card {
border: none;
}
.slds-button {
border-radius: none;
}
/*p {
text-align: left!important;
}*/
.MultipageDonationForm-P1,
.MultipageDonationForm-P2,
.MultipageDonationForm-P3,
.MultipageDonationForm-P4,
.MultipageDonationForm-Thankyou,
.UpdateContactDetails,
.SinglepageDonationForm,
.SinglepageDonationForm-Thankyou,
.UpdateCreditCard-P1,
.UpdateCreditCard-Thankyou {
padding: 20px 30px;
}
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(6) > div.flowruntimeDisplayText{
border-top: black solid;
}
.MultipageDonationForm-P3 .flowruntimeRichTextWrapper .uiOutputRichText {
word-wrap: break-word;
display: inline;
width: 100%;
font-size: 16px;
}
.MultipageDonationForm-P3 .slds-rich-text-editor__textarea, .slds-rich-text-editor__output{
font-size: 16px !important;
}
.MultipageDonationForm-P2 .slds-card__body div.body > div:nth-child(11){
display: inline-grid;
width: 50%;
}
.UpdateContactDetails .slds-card__body div.body > lightning-input-name > fieldset > div > div > div > lightning-input > label,
.UpdateContactDetails .slds-card__body div.body > lightning-input-address > fieldset > div > div > div > lightning-textarea > label,
.UpdateContactDetails .slds-card__body div.body > lightning-input-address > fieldset > div > div > div > lightning-input > label{
font-size: 18px;
}
.UpdateContactDetails .slds-card__body div.body > lightning-input-name > fieldset > legend,
.UpdateContactDetails .slds-card__body div.body > lightning-input-address > fieldset > legend{
content-visibility: hidden;
}
.UpdateContactDetails .flowruntime-input[flowruntime-inputWrapper2_inputWrapper2]{
max-width: 100% !important;
padding-left: 0px;
padding-right: 0px;
}
.grecaptcha-badge {
z-index: 999;
}
.MultipageDonationForm-P1 .slds-card__header span,
.MultipageDonationForm-P2 .slds-card__header span,
.MultipageDonationForm-P3 .slds-card__header span,
.MultipageDonationForm-P4 .slds-card__header span,
.MultipageDonationForm-Thankyou .slds-card__header span,
.UpdateContactDetails .slds-card__header span,
.SinglepageDonationForm .slds-card__header span,
.UpdateCreditCard-Thankyou .slds-card__header span {
font-size: 24px;
}
.MultipageDonationForm-P2 .flowruntimeInputWrapper .uiBlock,
.MultipageDonationForm-P2 .flowruntime-input[flowruntime-inputWrapper2_inputWrapper2],
.MultipageDonationForm-P4 .flowruntimeInputWrapper .uiBlock,
.MultipageDonationForm-P4 .flowruntime-input[flowruntime-inputWrapper2_inputWrapper2] {
max-width: 100%;
padding: 0;
}
.MultipageDonationForm-P4 .cASCreditCardNumber .slds-input,
.SinglepageDonationForm .cASCreditCardNumber .slds-input,
.UpdateCreditCard-P1 .cASCreditCardNumber .slds-input {
padding-left: 50px !important;
}
.cAS_Dollar_Handle .imageStyle {
display: block!important;
margin-left: auto!important;
margin-right: auto!important;
border-radius: 0!important;
}
.SinglepageDonationForm span > img,
.MultipageDonationForm-P1 span > img,
.MultipageDonationForm-P2 span > img,
.MultipageDonationForm-P3 span > img,
.MultipageDonationForm-P4 span > img,
.UpdateCreditCard-P1 span > img {
height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
}
.SinglepageDonationForm input[type="text"],
.SinglepageDonationForm select,
.SinglepageDonationForm input[type="tel"],
.SinglepageDonationForm textarea,
.UpdateContactDetails input[type="text"],
.UpdateContactDetails textarea,
.UpdateContactDetails select,
.MultipageDonationForm-P2 input[type="text"],
.MultipageDonationForm-P2 input[type="tel"],
.MultipageDonationForm-P2 select,
.MultipageDonationForm-P3 input[type="text"],
.MultipageDonationForm-P3 select,
.MultipageDonationForm-P3 textarea,
.MultipageDonationForm-P4 input[type="text"],
.MultipageDonationForm-P4 select,
.UpdateCreditCard-P1 input[type="text"],
.UpdateCreditCard-P1 textarea,
.UpdateCreditCard-P1 select {
color: #a7173d!important;
font-size: 16px!important;
padding: 5px 10px!important;
margin-bottom: 0px !important;
transition: .3s!important;
height: 45px !important;
border-radius: 0;
border-color: rgba(223, 31, 81, 0.5);
}
.MultipageDonationForm-P3 button,
.MultipageDonationForm-P4 button,
.MultipageDonationForm-Thankyou button,
.MultipageDonationForm-P3 button:hover,
.MultipageDonationForm-P4 button:hover,
.MultipageDonationForm-Thankyou button:hover {
font-size: 19px;
color: #FFFFFF;
background-color: rgba(1, 148, 161, 1);
border-radius: 0;
}
.UpdateContactDetails button,
.UpdateContactDetails button:hover,
.UpdateContactDetails button:active,
.MultipageDonationForm-P1 button,
.MultipageDonationForm-P1 button:hover,
.MultipageDonationForm-P1 button:active,
.MultipageDonationForm-P2 button,
.MultipageDonationForm-P2 button:hover,
.MultipageDonationForm-P2 button:active,
.MultipageDonationForm-P3 button:nth-child(2),
.MultipageDonationForm-P4 button:nth-child(2),
.SinglepageDonationForm button,
.SinglepageDonationForm button:hover,
.SinglepageDonationForm button:active,
.UpdateCreditCard-P1 button,
.UpdateCreditCard-P1 button:hover,
.UpdateCreditCard-P1 button:active,
.UpdateCreditCard-Thankyou button,
.UpdateCreditCard-Thankyou button:hover,
.UpdateCreditCard-Thankyou button:active {
/*border-color: rgba(1, 148, 161, 1);
background-color: rgba(1, 148, 161, 1);*/
background-image: linear-gradient(40deg, #df1f31, #c91c9f);
border-radius: 0;
color: #FFFFFF;
font-size: 19px;
padding: 10px 30px;
margin: 1rem 5px;
border-color: #df1f31;
}
.MultipageDonationForm-P2 .notMeBtn button, .SinglepageDonationForm .notMeBtn button{
border: none;
background-color: unset;
color: rgba(1, 148, 161, 1);
font-size: 19px;
font-weight: bold;
}
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small > lightning-input-address > fieldset > legend,
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small > lightning-input-name > fieldset > legend{
font-size: 19px;
}
.UpdateContactDetails .slds-card__body p,
.UpdateContactDetails .flowruntimeRichTextWrapper .uiOutputRichText,
.UpdateContactDetails .slds-rich-text-editor__output,
.MultipageDonationForm-P1 .slds-card__body p,
.MultipageDonationForm-P2 .flowruntimeRichTextWrapper .uiOutputRichText,
.MultipageDonationForm-P2 .slds-rich-text-editor__output,
.MultipageDonationForm-P2 label,
.MultipageDonationForm-P3 label,
.MultipageDonationForm-P4 label,
.MultipageDonationForm-P4 .flowruntimeRichTextWrapper .uiOutputRichText,
.MultipageDonationForm-P4 .slds-rich-text-editor__output,
.MultipageDonationForm-Thankyou .slds-card__body p,
.SinglepageDonationForm .slds-rich-text-editor__output,
.SinglepageDonationForm label,
.SinglepageDonationForm .slds-rich-text-editor__output,
.UpdateCreditCard-P1 .slds-card__body p,
.UpdateCreditCard-Thankyou .slds-card__body p,
.UpdateCreditCard-P1 .flowruntimeRichTextWrapper .uiOutputRichText,
.UpdateCreditCard-P1 .slds-rich-text-editor__output,
.UpdateCreditCard-P1 label {
font-size: 19px;
padding: 0.75rem 0 0 0;
color: #a7173d;
font-weight: 400;
}
.SinglepageDonationForm .flowruntimeRichTextWrapper .uiOutputRichText{
font-size: 19px;
padding: 0.75rem 0 0 0;
font-weight: 400;
}
.SinglepageDonationForm .slds-text-color_error, .slds-text-color--error{
width: 65%!important;
margin: 0 auto!important;
}
.SinglepageDonationForm .flowruntimeRichTextWrapper .uiOutputRichText>p{
width: 65%!important;
margin: 0 auto!important;
}
.UpdateCreditCard-P1 .slds-card__body p {
text-align: justify;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
.MultipageDonationForm-P3 .slds-card__body div.body > div.slds-m-bottom_x-small > span > img{
max-width: 100% !important;
height: auto!important;
}
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P1 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P3 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P4 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm-Thankyou .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p{
font-size: 21px;
padding-bottom: 20px;
margin-bottom: 20px;
color: #333;
}
.MultipageDonationForm-P4 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(4) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm-Thankyou .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(4) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p{
font-size: 22px;
font-weight: bold;
padding-bottom: 20px;
}
.MultipageDonationForm-P1 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P3 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P4 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm-Thankyou .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p{
font-size: 35px;
font-weight: 700;
text-align: center!important;
}
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p {
margin: 1.5rem 0;
}
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(n+16) {
width: 50%;
display: inline-grid;
}
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(16),
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(18){
padding-left: 0px;
}
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(17),
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(19){
padding-right: 0px;
padding-left: 10px;
}
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(n+3):nth-child(-n+6),
.MultipageDonationForm-P2 lightning-input[data-aura-class="flowruntimeEmail"],
.MultipageDonationForm-P2 .slds-card__body div.body > flowruntime-flow-screen-input:nth-child(n+3):nth-child(-n+6),
.MultipageDonationForm-P2 lightning-input[data-aura-class="flowruntimeEmail"],
.MultipageDonationForm-P2 .slds-card__body div.body > flowruntime-flow-screen-input:nth-child(n+8),
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(n+8) {
width: 50%;
display: inline-grid;
padding: 0 10px;
}
.MultipageDonationForm-P2 .slds-card__body div.body > div > label.flowruntimeInputWrapper{
padding-left: 10px;
padding-right: 10px;
}
.MultipageDonationForm-P2 lightning-input[data-aura-class="flowruntimeEmail"]{
width: 100%;
top: 5px;
padding: 0px;
}
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div > label.flowruntimeInputWrapper,
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(11) > div > label.flowruntimeInputWrapper,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(11) > div > label.flowruntimeInputWrapper,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(18) > div > label.flowruntimeInputWrapper,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(23) > div > label.flowruntimeInputWrapper{
top: 6px;
}
.MultipageDonationForm-P2 .slds-card__body div.body > flowruntime-flow-screen-input::nth-child(5) > div > label.flowruntimeInputWrapper,
.MultipageDonationForm-P2 .slds-card__body div.body > flowruntime-flow-screen-input::nth-child(13) > div > label.flowruntimeInputWrapper,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(11) > div > label.flowruntimeInputWrapper,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(18) > div > label.flowruntimeInputWrapper,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(23) > div > label.flowruntimeInputWrapper{
top: 7px;
}
.MultipageDonationForm-P2 lightning-input[data-aura-class="flowruntimePhone"] {
padding: 0 10px;
}
.MultipageDonationForm-P3 .amount-container .after {
display: table;
border-style: solid;
border-width: 8px 7px 0;
border-color: #1088c7 transparent transparent;
background-color: transparent;
z-index: 34;
padding: 0;
margin: 12px auto 0;
position: absolute;
top: 14px;
right: 148px;
}
.MultipageDonationForm-P3 .amount-container .amountStyle .amount-val {
position: absolute;
top: -28px;
background-color: #1088c7;
color: #fff;
padding: 10px 22px;
font-size: 23px;
letter-spacing: 0;
font-weight: 700;
right: 105px;
left: auto;
width: 100px;
}
.MultipageDonationForm-P3 .slds-form-element__label:empty {
display: none;
}
.MultipageDonationForm-P3 .amount-container img {
max-width: 100%;
height: 250px;
margin-top: 0px;
margin-bottom: 0;
width: 100%;
position: relative;
top: -30px;
}
.MultipageDonationForm-P3 .image-container {
height: 180px;
}
.MultipageDonationForm-P3 .flowruntimeInputWrapper {
max-width: 100% !important;
}
.MultipageDonationForm-P3 .flowruntimeInputWrapper .slds-form-element__control label {
display: inline-block;
padding: 10px;
background-color: #E6E7E8;
width: 250px;
text-align: center;
cursor: pointer;
}
.MultipageDonationForm-P3 .flowruntimeInputWrapper .slds-form-element__control label .uiOutputRichText {
color: #1088c7;
font-weight: 600;
}
.MultipageDonationForm-P3 .flowruntimeInputWrapper .slds-form-element__control input:checked + label {
background-color: #1088c7;
}
.MultipageDonationForm-P3 .flowruntimeInputWrapper .slds-form-element__control input:checked + label .uiOutputRichText {
color: #FFFFFF;
}
.MultipageDonationForm-P3 .flowruntimeInputWrapper .slds-form-element__control label .slds-radio--faux {
display: none;
}
.MultipageDonationForm-P3 .flowruntimeInputWrapper .slds-radio {
display: inline-block !important;
margin: 0 10px;
}
.MultipageDonationForm-P3 .flowruntimeRichTextWrapper .uiOutputRichText {
word-wrap: break-word;
display: inline;
width: 100%;
font-size: 16px;
}
.MultipageDonationForm-P4 .cASCreditCardNumber .credit-card{
top: 64px;
}
.SinglepageDonationForm .cASCreditCardNumber .credit-card{
top: 64px;
}
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer,
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer,
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer,
.checkoutpage .flowruntimeBody .body .donationOptionContainer,
.checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer{
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer {
margin: 1.5rem 0;
}
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer {
align-items: center;
}
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label,
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label,
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label,
.checkoutpage .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label,
.checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label{
display: block;
margin: 0 10px;
padding: 10px;
background-color: #fff;
width: 230px !important;
text-align: center;
border: 1px solid rgba(223, 31, 81, 0.5);
}
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label,
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label {
/*border: 1px solid rgba(0,0,0,0.2);*/
text-transform: uppercase;
font-size: medium;
color: white;
border: 1px solid rgba(223, 31, 81, 0.5);
}
.MultipageDonationForm-P3 label.uiLabel-left.form-element__label.uiLabel {
margin: 0 auto;
}
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label,
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label,
.checkoutpage .flowruntimeBody .body .donationOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label,
.checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label{
/*background-color: rgba(1, 148, 161, 1);*/
background-image: linear-gradient(40deg, #df1f31, #c91c9f);
}
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label span,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label span,
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label span,
.checkoutpage .flowruntimeBody .body .donationOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label span,
.checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label span{
color: #FFFFFF;
}
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label span,
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label span,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label span,
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label span,
.checkoutpage .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label span,
.checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label span{
color: #df1f51;
}
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio input[type='radio'],
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio input[type='radio'],
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer .uiInputRadio input[type='radio'],
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .uiInputRadio input[type='radio'],
.checkoutpage .flowruntimeBody .body .donationOptionContainer .uiInputRadio input[type='radio'],
.checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio input[type='radio']{
position: absolute;
visibility: hidden;
}
.SinglepageDonationForm .flowruntimeBody .body .OtherPaymentMethodContainer{
display: flex;
justify-content: center;
}
.SinglepageDonationForm .flowruntimeBody .body .OtherPaymentMethodContainer > div{
display: flex;
}
.MultipageDonationForm-P4 .flowruntimeBody .body .OtherPaymentMethodContainer .ASGooglePayContainer,
.SinglepageDonationForm .flowruntimeBody .body .OtherPaymentMethodContainer .ASGooglePayContainer{
margin-right: 10px;
}
.MultipageDonationForm-P4 .flowruntimeBody .body .OtherPaymentMethodContainer > div > div:not(:last-of-type),
.SinglepageDonationForm .flowruntimeBody .body .OtherPaymentMethodContainer > div > div:not(:last-of-type){
margin-bottom: 1.1rem;
}
.CardholderNameContainer,
.CardNumberContainer,
.CCVContainer {
width: 100%;
display: table;
padding: 0;
}
.CardExpiryMonthContainer,
.CardExpiryYearContainer {
width: 33%!important;
display: inline-grid;
padding-right: 10px;
}
.CCVContainer {
width: 34%!important;
display: inline-grid;
}
.CardExpiryMonthContainer select {
margin-bottom: 0!important;
}
.DirectDebitFieldsContainer .AccountNameContainer {
width: 100%;
display: inline-grid;
padding: 0 10px;
}
.DirectDebitFieldsContainer .CardholderNameContainer,
.DirectDebitFieldsContainer .BSBContainer {
width: 50%;
display: inline-grid;
padding: 0 10px;
}
.errorText {
text-align: center;
}
.UpdateCreditCard-P1 .PaymentMethodOptionContainer{
visibility: hidden;
display:none !important;
}
.UpdateCreditCard-P1 .cASCreditCardNumber .credit-card .card>svg {
width: 50px;
height: 57px;
transform: scale(0.7);
}
.MultipageDonationForm-P2 .CardholderNameContainer.cAS_DonorDetails {
width: 65%!important;
margin: 0 auto;
}
.WITFAAS_Dollar_Handle,
.SinglepageDonationForm h2.WITFAASPaymentMethod {
width: 65%!important;
margin: 0 auto!important;
font-size: 17px;
color: #cb003d;
}
.SinglepageDonationForm h1.WITFAAS_DonorDetails,
.SinglepageDonationForm h1.WITFAASPaymentMethod,
.SinglepageDonationForm h1.WITFAAS_Dollar_Handle{
font-size:32px!important;
color: #a7173d;
font-weight: 700;
}
.SinglepageDonationForm h1.WITFAASPaymentMethod{
margin-top: 50px;
}
.SinglepageDonationForm .slds-checkbox .slds-checkbox__label .slds-form-element__label{
color: #cb003d;
}
.DirectDebitFieldsContainer{
display:table;
}
.DirectDebitFieldsContainer .CardholderNameContainer{
display:table-footer-group;
}
/********** MEDIA QUERIES **********
************************************/
@media screen and (max-width: 600px) {
.MultipageDonationForm-P3 .slds-grid.slds-wrap.cAS_Dollar_Handle div,
.MultipageDonationForm-P3 .slds-grid.slds-wrap.cAS_Dollar_Handle div img,
.MultipageDonationForm-P3 .slds-grid.slds-wrap.cAS_Dollar_Handle div button[id^=Amount],
.checkoutpage .slds-grid.slds-wrap.cAS_Dollar_Handle div,
.checkoutpage .slds-grid.slds-wrap.cAS_Dollar_Handle div img,
.checkoutpage .slds-grid.slds-wrap.cAS_Dollar_Handle div button[id^=Amount],
.SinglepageDonationForm .slds-grid.slds-wrap.cAS_Dollar_Handle div button[id^=Amount],
.SinglepageDonationForm .slds-grid.slds-wrap.cAS_Dollar_Handle div,
.SinglepageDonationForm .slds-grid.slds-wrap.cAS_Dollar_Handle div img {
width: 100%!important;
}
}
@media screen and (max-width: 800px) {
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer,
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer,
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer,
.checkoutpage .flowruntimeBody .body .donationOptionContainer,
.checkoutpage .flowruntimeBody .body .PaymentMethodOptionContainer {
display: grid;
justify-content: center !important;
margin-bottom: 20px;
}
.SinglepageDonationForm .DonorDetailsContainer,
.MultipageDonationForm-P2 .DonorDetailsContainer,
.MultipageDonationForm-P2 .CardholderNameContainer.cAS_DonorDetails,
.MultipageDonationForm-P4 .cASDisclaimerComponent,
.MultipageDonationForm-P4 .CreditCardFieldsContainer,
.MultipageDonationForm-P3 .slds-m-bottom_x-small,
.bBody,
.DonorDetailsContainer.cAS_DonorDetails,
.CardholderNameContainer.cAS_DonorDetails,
.CreditCardFieldsContainer,
.DirectDebitFieldsContainer,
.anonymousCheck.cAS_DonorDetails,
.CardholderNameContainer.cAS_DonorDetails .slds-form-element__control.slds-grow {
width: 100%!important;
}
.SinglepageDonationForm .slds-grid.slds-grid_align-center.slds-wrap.cAS_Dollar_Handle div.slds-col.slds-size_1-of-3 {
width: 100%!important;
max-width: 100%!important;
}
.checkoutpage .slds-grid.slds-grid_align-center.slds-wrap.cAS_Dollar_Handle div.slds-col.slds-size_1-of-3 {
width: 100%!important;
max-width: 100%!important;
}
.CardholderNameContainer.cAS_DonorDetails label.slds-form-element__label.slds-no-flex {
padding-left: 0;
}
.DirectDebitFieldsContainer .AccountNameContainer,
.DirectDebitFieldsContainer .BSBContainer {
padding: 0;
width: 100%;
}
.MultipageDonationForm-P3 button[id^=Amount],
.SinglepageDonationForm button[id^=Amount] {
height: 7em;
}
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .as-radio-button-checked .uiInputRadio .form-element__label {
margin-top: 1rem;
}
.SinglepageDonationForm .flowruntimeBody .body .OtherPaymentMethodContainer > div {
display: flex;
flex-flow: row wrap;
}
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer {
flex-flow: column;
}
.SinglepageDonationForm .uiOutputRichText h3 {
text-align: left!important;
}
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label,
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label {
margin-left: 0!important;
}
.MultipageDonationForm-P3 .slds-grid.slds-wrap.cAS_Dollar_Handle div,
.checkoutpage .slds-grid.slds-wrap.cAS_Dollar_Handle div,
.SinglepageDonationForm .slds-grid.slds-wrap.cAS_Dollar_Handle div {
width: 80%;
margin: 0 auto;
}
.SinglepageDonationForm .DirectDebitFieldsContainer .AccountNameContainer,
.SinglepageDonationForm .DirectDebitFieldsContainer .BSBContainer{
padding-left: 0;
}
.slds-grid.slds-wrap.cAS_Dollar_Handle div img {
width: 65%!important;
height: auto!important;
}
.WITFAAS_Dollar_Handle .zoom {
/*padding: 0;*/
padding: 10px !important;
transition: transform .2s;
margin: 0 auto;
width: 100% !important;
}
.WITFAAS_Dollar_Handle{
display: grid !important;
}
.SinglepageDonationForm .anonymousCheck.cAS_DonorDetails {
margin: 0;
padding-left: 10px;
}
.slds-grid.slds-wrap.cAS_Dollar_Handle div button[id^=Amount] {
width: 65%!important;
margin: 0 auto!important;
text-align: center!important;
display: block!important;
}
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(11) label,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(15) > flowruntime-flow-screen-input > flowruntime-input-wrapper2 > div.flowruntime-input,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(16) > flowruntime-flow-screen-input > flowruntime-input-wrapper2 > div.flowruntime-input,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(17) > flowruntime-flow-screen-input > flowruntime-input-wrapper2 > div.flowruntime-input,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(18) label,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(19) > flowruntime-flow-screen-input > flowruntime-input-wrapper2 > div.flowruntime-input,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(20) > flowruntime-flow-screen-input > flowruntime-input-wrapper2 > div.flowruntime-input{
content-visibility: hidden !important;
visibility: hidden;
display:none !important;
}
.SinglepageDonationForm .donationOptionContainer.cAS_DonorDetails {
display: block!important;
}
.SinglepageDonationForm .donationOptionContainer.cAS_DonorDetails .as-radio-button {
margin-top: 1.2rem;
}
.MultipageDonationForm-P2 .slds-card__body div.body > flowruntime-flow-screen-input:nth-child(n+8) {
content-visibility: hidden;
}
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(n+3):nth-child(-n+6),
.MultipageDonationForm-P2 lightning-input[data-aura-class="flowruntimeEmail"] {
display: contents !important;
}
.MultipageDonationForm-P2 .slds-card__body div.body > flowruntime-flow-screen-input:nth-child(n+3):nth-child(-n+6),
.MultipageDonationForm-P2 lightning-input[data-aura-class="flowruntimeEmail"] {
display: contents !important;
}
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(n+11) {
display: contents !important;
}
.MultipageDonationForm-P2 lightning-input[data-aura-class="flowruntimePhone"] {
padding-left: 0px !important;
padding-right: 0px !important;
}
.SinglepageDonationForm span > img,
.MultipageDonationForm-P1 span > img,
.MultipageDonationForm-P2 span > img,
.MultipageDonationForm-P3 span > img,
.MultipageDonationForm-P4 span > img{
max-width: 100% !important;
height: auto !important;
}
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer,
.SinglepageDonationForm-Thankyou .flowruntimeBody .body .PaymentMethodOptionContainer,
.MultipageDonationForm-P4 .OtherPaymentMethodContainer {
flex-direction: column;
align-items: flex-start;
}
.CardholderNameContainer,
.CardNumberContainer,
.CCVContainer {
display: contents !important;
}
.CardExpiryMonthContainer,
.CardExpiryYearContainer {
display: contents !important;
}
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label,
.SinglepageDonationForm-Thankyou .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label{
margin-left: 1px !important;
margin-bottom: 8px !important;
margin-top: 1.2rem!important;
}
.MultipageDonationForm-P1, .MultipageDonationForm-P2, .MultipageDonationForm-P3, .MultipageDonationForm-P4, .MultipageDonationForm-Thankyou, .UpdateContactDetails, .SinglepageDonationForm, .SinglepageDonationForm-Thankyou {
padding: 0;
}
.MultipageDonationForm-P4 .flowruntimeBody .body .OtherPaymentMethodContainer > div {
display: block;
}
.MultipageDonationForm-P3 .cAS_Dollar_Handle .amntStyle,
.SinglepageDonationForm .cAS_Dollar_Handle .amntStyle,
.MultipageDonationForm-P3 .cAS_Dollar_Handle .gauStyle,
.checkoutpage .cAS_Dollar_Handle .gauStyle,
.SinglepageDonationForm .cAS_Dollar_Handle .gauStyle {
width: 100% !important;
}
}
@media screen and (max-width: 890px) {
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer {
justify-content: flex-start;
}
.SinglepageDonationForm .flowruntimeBody .body .PaymentMethodOptionContainer .uiInputRadio .form-element__label,
.SinglepageDonationForm .flowruntimeBody .body .donationOptionContainer .uiInputRadio .form-element__label{
margin-top: 1.2rem!important;
}
}
.MultipageDonationForm-P3 p img
{
max-width: 75%;
}
.MultipageDonationForm-P1 p img, .MultipageDonationForm-P2 p img, .MultipageDonationForm-P4 p img
{
max-width: 50%;
}
.MultipageDonationForm-P1 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P3 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P4 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm-Thankyou .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p
{
font-size: 30px;
}
.UpdateContactDetails .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(2) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P1 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P2 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P3 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.MultipageDonationForm-P4 .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p,
.SinglepageDonationForm-Thankyou .slds-card__body div.body > div.slds-m-bottom_x-small:nth-child(3) > div.flowruntimeRichTextWrapper > div.uiOutputRichText > p
{
font-size: 18px;
color: #cb003d;
}
@media screen and (max-width: 800px) {
.WITFAAS_Dollar_Handle .zoom {
padding: 10px !important;
transition: transform .2s;
margin: 0 auto;
width: 100% !important;
}
.WITFAAS_Dollar_Handle{
display: grid !important;
}
.MultipageDonationForm-P2 .flowruntimeBody .body .donationOptionContainer,
.MultipageDonationForm-P4 .flowruntimeBody .body .PaymentMethodOptionContainer,
.SinglepageDonationForm-Thankyou .flowruntimeBody .body .PaymentMethodOptionContainer,
.MultipageDonationForm-P4 .OtherPaymentMethodContainer {
flex-direction: column;
align-items: flex-start;
display: grid;
}
}