#lean_overlay {
position: fixed;
z-index: 99999;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: #000;
display: none;
} .charitable-modal {
width: 80%;
max-width: 600px;
max-height: 90vh;
padding: 0;
background-color: #fff;
overflow-y: auto;
position: relative;
} .charitable-modal.charitable-modal-donation {
width: 80%;
max-width: 800px;
max-height: 90vh;
padding: calc(1em + 10px);
background-color: #fff;
overflow-y: auto;
} .charitable-modal.charitable-modal-donation.charitable-modal-from-showcase {
padding: 0;
}
.charitable-modal-from-showcase .donation-form-wrapper {
padding: calc(1em + 10px);
} .charitable-modal-campaign-name {
min-height: 240px;
padding: 15px;
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
z-index: 0;
} .charitable-modal-campaign-name.no-thumbnail {
min-height: 0;
padding: 0 0 20px 0;
align-items: flex-start;
background-image: none;
}
.charitable-modal-campaign-name span {
font-size: 24px;
line-height: 32px;
} .charitable-modal-campaign-name.has-thumbnail span {
color: #fff;
text-shadow: 0 0 2px rgba(0, 0, 0, 1),
0 0 4px rgba(0, 0, 0, 0.9),
0 1px 3px rgba(0, 0, 0, 0.8),
0 2px 6px rgba(0, 0, 0, 0.6);
}
.charitable-modal .donation-form-wrapper {
text-align: center;
}
.charitable-modal #charitable-donation-form,
.charitable-modal .charitable-visual-donation-form,
.charitable-modal [id^="charitable-visual-donation-form-"] {
text-align: left;
padding-top: 0;
}
.charitable-modal .charitable-fieldset {
padding: 0 0 1em;
border-width: 0 0 1px 0;
}
.charitable-modal .charitable-fieldset:last-of-type {
border: none;
} .charitable-modal > .modal-close {
position: absolute;
top: 15px;
right: 15px;
z-index: 1000;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
text-decoration: none;
transition: background-color 0.2s ease, opacity 0.2s ease;
opacity: 1;
}
.charitable-modal > .modal-close:hover {
background-color: rgba(255, 255, 255, 1);
opacity: 1;
}
.charitable-modal > .modal-close::before {
content: '×';
font-size: 28px;
line-height: 1;
color: #333;
font-weight: 300;
}
.charitable-modal > .modal-close:hover::before {
color: #000;
} .charitable-modal .charitable-modal-header {
background-color: black;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 30px;
}
.charitable-modal .charitable-modal-header h3 {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
line-height: 21px;
font-weight: 600;
margin: 0;
padding: 0;
}
.charitable-modal .charitable-modal-header .modal-close {
z-index: 10;
cursor: pointer;
filter: brightness(1.5);
}
.charitable-modal .charitable-modal-header .modal-close img {
filter: brightness(1.5);
} .charitable-modal.charitable-modal-standard .charitable-modal-body {
padding: 30px;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body label,
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset div label,
.charitable-modal.charitable-modal-standard .charitable-modal-body div label {
font-weight: 600;
font-size: 14px;
line-height: 21px;
letter-spacing: -0.1px;
margin-bottom: 10px;
display: block;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="text"],
.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="email"],
.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="tel"],
.charitable-modal.charitable-modal-standard .charitable-modal-body input[type="number"] {
width: 100%;
padding: 10px;
margin: 0;
border: 1px solid rgba(57, 57, 67, 0.14);
border-radius: 3px;
font-size: 14px;
line-height: 14px;
color: rgba(90, 90, 90, 1);
font-family: Inter, sans-serif;
font-weight: 500;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
box-sizing: border-box;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body textarea {
width: 100%;
padding: 10px;
margin: 0;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 14px;
line-height: 14px;
font-family: Inter, sans-serif;
font-weight: 500;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
box-sizing: border-box;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body textarea[name="donor_email_content"] {
min-height: 220px;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body select {
width: 100%;
max-width: 100%;
padding: 5px 10px;
box-sizing: border-box;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset {
border: none;
padding: 0;
margin: 0 0 30px 0;
width: 100%;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset:first-child select {
margin-bottom: 20px;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset p.help {
margin: 10px 0 0 0;
padding: 0;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div {
display: flex;
margin-top: -1px;
flex-direction: column;
justify-content: space-between;
margin-bottom: 10px;
gap: 20px;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div label {
margin-bottom: 0;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.no-flex {
display: block;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.flex-cb {
display: flex;
flex-direction: row;
align-items: center;
justify-content: start;
gap: 10px;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.flex-cb input {
margin: 0;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset > div.flex-cb p {
margin: 0;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body fieldset:last-child {
margin-bottom: 0;
}  .charitable-modal .charitable-campaign-selector-wrapper {
margin-bottom: 20px;
}
.charitable-modal .charitable-campaign-selector-wrapper select,
.charitable-modal .charitable-campaign-selector {
width: 100%;
max-width: 100%;
padding: 5px 10px;
border: 1px solid rgba(57, 57, 67, 0.14);
border-radius: 3px;
font-size: 14px;
line-height: 14px;
color: rgba(90, 90, 90, 1);
font-family: Inter, sans-serif;
font-weight: 500;
background-color: #fff;
box-sizing: border-box;
}
.charitable-modal .charitable-campaign-selector-wrapper fieldset:first-child select {
margin-bottom: 20px;
}
.charitable-modal .charitable-campaign-selector-wrapper label {
font-weight: 600;
font-size: 14px;
line-height: 21px;
letter-spacing: -0.1px;
margin-bottom: 10px;
display: block;
} .charitable-modal .charitable-campaign-selector-tooltip {
position: relative;
display: inline-flex;
cursor: help;
}
.charitable-modal .charitable-tooltip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 12px;
font-weight: 600;
color: #666;
background: #f0f0f0;
border-radius: 50%;
transition: background-color 0.2s ease, color 0.2s ease;
margin-left: 8px;
}
.charitable-modal .charitable-campaign-selector-tooltip:hover .charitable-tooltip-icon {
background: #0073aa;
color: #fff;
}
.charitable-modal .charitable-tooltip-text {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 8px;
padding: 10px 14px;
min-width: 200px;
max-width: 300px;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
color: #fff;
background: #1e1e1e;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 100001; text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
pointer-events: none;
}
.charitable-modal .charitable-tooltip-text::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: #1e1e1e;
}
.charitable-modal .charitable-campaign-selector-tooltip:hover .charitable-tooltip-text {
opacity: 1;
visibility: visible;
} .charitable-modal .charitable-form-field-donation-amount {
margin-bottom: 20px;
}
.charitable-modal .charitable-donation-amount-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.charitable-modal .donation-amount {
padding: 10px;
border: 1px solid rgba(57, 57, 67, 0.14);
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
}
.charitable-modal .donation-amount:hover {
border-color: #0073aa;
background-color: #f0f6fc;
}
.charitable-modal .donation-amount.selected {
border-color: #0073aa;
background-color: #0073aa;
color: white;
} .charitable-modal .charitable-payment-methods {
margin-bottom: 20px;
}
.charitable-modal .charitable-payment-methods ul {
list-style: none;
margin: 0;
padding: 0;
}
.charitable-modal .charitable-payment-methods li {
margin-bottom: 10px;
}
.charitable-modal .charitable-payment-methods input[type="radio"] {
margin-right: 10px;
} .charitable-modal #charitable_stripe_card_field {
padding: 10px;
border: 1px solid rgba(57, 57, 67, 0.14);
border-radius: 3px;
margin-bottom: 15px;
min-height: 40px;
} .charitable-modal .charitable-submit-field input[type="submit"],
.charitable-modal .charitable-submit-field button[type="submit"] {
background-color: #0073aa;
color: white;
border: none;
padding: 12px 24px;
border-radius: 3px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
}
.charitable-modal .charitable-submit-field input[type="submit"]:hover,
.charitable-modal .charitable-submit-field button[type="submit"]:hover {
background-color: #005a87;
} .charitable-modal .charitable-notice {
padding: 12px;
border-radius: 3px;
margin-bottom: 15px;
font-size: 14px;
line-height: 1.5;
}
.charitable-modal .charitable-notice.success {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.charitable-modal .charitable-notice.error,
.charitable-modal .charitable-notice.errors {
background: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
} .charitable-modal-loading {
text-align: center;
padding: 40px 20px;
color: #666;
}
.charitable-modal-loading img {
display: block;
margin: 0 auto 20px;
width: 32px;
height: 32px;
}
.charitable-modal-loading p {
margin: 0;
font-size: 16px;
} .charitable-modal-error {
padding: 20px;
background: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 4px;
color: #721c24;
margin: 20px 0;
}
.charitable-modal-error p {
margin: 0;
font-size: 14px;
} body.charitable-modal-open {
overflow: hidden;
} @media (max-width: 768px) {
.charitable-modal {
width: 95%;
max-width: none;
margin: 2.5vh auto;
max-height: 95vh;
}
.charitable-modal > .modal-close {
top: 10px;
right: 15px;
width: 35px;
height: 35px;
}
.charitable-modal > .modal-close::before {
font-size: 24px;
}
.charitable-modal.charitable-modal-standard .charitable-modal-body {
padding: 20px;
}
.charitable-modal .charitable-donation-amount-wrapper {
flex-direction: column;
}
}  @media (prefers-contrast: high) {
#lean_overlay {
background: rgba(0, 0, 0, 0.9);
}
.charitable-modal {
border: 2px solid #000;
}
.charitable-modal > .modal-close {
background-color: rgba(255, 255, 255, 1);
border: 2px solid #000;
}
} @media (prefers-reduced-motion: reduce) {
.charitable-modal > .modal-close {
transition: none;
}
.charitable-modal .donation-amount {
transition: none;
}
} .charitable-modal:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
} @media print {
.charitable-modal,
#lean_overlay {
display: none !important;
}
}