#donation-confirmation-wrapper { margin-bottom: 1.25em; background: #fafbfc; border: 0.0625em solid #e4e6e8; } #donation-confirmation-wrapper #donation-confirmation { display: -ms-grid; display: grid; -ms-grid-columns: auto; grid-template-columns: auto; -ms-grid-rows: 33% 34% 33%; grid-template-rows: 33% 34% 33%; box-sizing: border-box; border-radius: 0.1875em; padding: 0.625em 1.25em; } #donation-confirmation-wrapper #donation-confirmation.two-cols { -ms-grid-columns: 80% 20%; grid-template-columns: 80% 20%; } #donation-confirmation-wrapper #donation-confirmation .donation-check { -ms-grid-row: 2; grid-row-start: 2; -ms-grid-row-span: 1; grid-row-end: span 1; padding: 0.313em 0.313em 0.313em 0; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } #donation-confirmation-wrapper #donation-confirmation .donation-check #donation-checkbox { display: block; border: 0.0625em solid #8693a3; border-radius: 0.1875em; height: 1.5em; width: 1.5em; } #donation-confirmation-wrapper #donation-confirmation .donation-check #donation-checkbox.checked { background-color: #8693a3; } #donation-confirmation-wrapper #donation-confirmation .donation-check #donation-checkbox.checked::after { content: url("../images/checkmark.svg"); display: block; width: 1.25em; height: 1.25em; } #donation-confirmation-wrapper #donation-confirmation .charity-image { -ms-grid-column: 2; grid-column-start: 2; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 3; grid-row-end: span 3; padding: 5px; display: -ms-grid; display: grid; } #donation-confirmation-wrapper #donation-confirmation .charity-image img { width: 4.688em; height: 4.688em; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } #donation-confirmation-wrapper #donation-confirmation .donation-messages { line-height: 1.1; -ms-grid-column: 3; grid-column-start: 3; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 3; grid-row-end: span 3; padding: 0.313em; } #donation-confirmation-wrapper #donation-confirmation .donation-messages .donation-msg { font-size: 1em; font-weight: bold; margin-bottom: 0.3125em; } #donation-confirmation-wrapper #donation-confirmation .donation-messages .donation-sub-msg, #donation-confirmation-wrapper #donation-confirmation .donation-messages .donation-to-date { font-size: 0.8em; color: #8693a3; } #donation-confirmation-wrapper #donation-confirmation .donation-messages .donation-sub-msg { margin-bottom: 0.3125em; } #donation-confirmation-wrapper #donation-confirmation .donation-totals { -ms-grid-column: 4; grid-column-start: 4; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 1; grid-row-end: span 1; padding: 0.313em 0 0.313em 0.313em; text-align: right; } #donation-confirmation-wrapper #donation-confirmation .donation-totals #donation-total { font-size: 1em; font-weight: bold; text-align: right; } #donation-confirmation-wrapper #donation-featured-charities { padding: 0 1.25em 0.625em; } #donation-confirmation-wrapper #donation-featured-charities #charity-tiles { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: space-evenly; justify-content: space-evenly; list-style-type: none; padding: 0; margin: 0; text-align: center; } #donation-confirmation-wrapper #donation-featured-charities #charity-tiles .tile { width: 4.688em; padding: 0.313em; } #donation-confirmation-wrapper #donation-featured-charities #charity-tiles .tile img, #donation-confirmation-wrapper #donation-featured-charities #charity-tiles .tile .image-placeholder { height: 4.063em; width: 4.063em; background: white; margin-bottom: 0.3125em; } #donation-confirmation-wrapper #donation-featured-charities #charity-tiles .tile .charity-name { font-size: 0.7em; font-weight: normal; }
@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon.ttf?vjj21k") format("truetype"), url("../fonts/icomoon.woff?vjj21k") format("woff"), url("../fonts/icomoon.svg?vjj21k#icomoon") format("svg"); font-weight: normal; font-style: normal; font-display: block; }
[class^="icon-"],
[class*=" icon-"] { font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-search::before { content: "\E901"; }
.icon-check::before { content: "\E900"; }
.icon-clock2::before { content: "\E94F"; }
#changeup-charity-selection-wrapper { background-color: #eff5f8; padding: 1.25em 6.25em; margin: 3.125em 0; font-size: 0.9em; } #changeup-charity-selection-wrapper .hidden { display: none; } #changeup-charity-selection-wrapper #header-wrapper { display: -ms-flexbox; display: flex; border-bottom: 0.0625em solid #d5dde3; padding-bottom: 0.625em; } #changeup-charity-selection-wrapper #header-wrapper > div { -ms-flex-preferred-size: 50%; flex-basis: 50%; } #changeup-charity-selection-wrapper .header { font-size: 1.4em; font-weight: bold; margin-bottom: 0.625em; } #changeup-charity-selection-wrapper .header > * { display: inline-block; } #changeup-charity-selection-wrapper #timer-wrapper { text-align: right; } #changeup-charity-selection-wrapper #timer-wrapper .timer-text { display: inline-block; text-transform: uppercase; color: #c7c7c7; margin-right: 0.3125em; } #changeup-charity-selection-wrapper #timer-wrapper #timer { font-size: 1.3em; } #changeup-charity-selection-wrapper #timer-wrapper #timer, #changeup-charity-selection-wrapper #timer-wrapper i { color: #657181; } #changeup-charity-selection-wrapper .fav-text { font-size: 0.95em; } #changeup-charity-selection-wrapper .fav-text span { font-weight: bold; } #changeup-charity-selection-wrapper #charity-tiles-wrapper { display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } #changeup-charity-selection-wrapper #charity-tiles-wrapper button { background-color: #81c24b; border-radius: 0.3125em; width: 100%; color: #fff; padding: 0.625em 0.3125em; opacity: 0; transition: opacity 0.5s; font-size: 1.2em; cursor: default; } #changeup-charity-selection-wrapper #charity-tiles-wrapper button:disabled { background-color: #b8b8b8; } #changeup-charity-selection-wrapper #charity-tiles-wrapper > div { margin-bottom: 0.3125em; } #changeup-charity-selection-wrapper #charity-tiles-wrapper .tile { width: 8.125em; margin-right: 0.625em; margin-bottom: 0.3125em; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } #changeup-charity-selection-wrapper #charity-tiles-wrapper .tile .tile-content, #changeup-charity-selection-wrapper #charity-tiles-wrapper .tile #search-box { border: 0.25em solid transparent; } #changeup-charity-selection-wrapper #charity-tiles-wrapper .tile.selected .tile-content, #changeup-charity-selection-wrapper #charity-tiles-wrapper .tile.selected #search-box { border: 0.25em solid #81c24b; } #changeup-charity-selection-wrapper #charity-tiles-wrapper .tile.selected button { opacity: 1; cursor: pointer; } #changeup-charity-selection-wrapper #charity-tiles { display: -ms-flexbox; display: flex; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0; text-align: center; min-width: 14.313em; } #changeup-charity-selection-wrapper #charity-tiles .tile-content { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; background-color: #fff; border-radius: 0.3125em; margin-bottom: 0.625em; padding: 1.25em 0.9375em; font-size: 0.7em; font-weight: bold; } #changeup-charity-selection-wrapper #charity-tiles .tile-content img, #changeup-charity-selection-wrapper #charity-tiles .tile-content .image-placeholder { height: 7.5em; width: 7.5em; margin-bottom: 0.3125em; } #changeup-charity-selection-wrapper #charity-tiles .tile-content .charity-name { min-height: 3em; } #changeup-charity-selection-wrapper #search-tile-wrapper { -ms-flex: 1 1 40%; flex: 1 1 40%; } #changeup-charity-selection-wrapper #search-tile.tile { width: 100%; margin-right: 0; } #changeup-charity-selection-wrapper #search-box { position: relative; padding: 1.25em; background-color: #fff; border-radius: 0.3125em; height: 10.775em; margin-bottom: 0.625em; } #changeup-charity-selection-wrapper #search-box input#search { padding: 0.625em 0.3125em 0.625em 1.875em; border-radius: 0.3125em; border: 0.0625em solid #c7c7c7; width: 100%; font-size: 1.2em; box-shadow: none; } #changeup-charity-selection-wrapper #search-box i { position: absolute; top: 32.125em; left: 1.75em; font-size: 1.25em; } #changeup-charity-selection-wrapper .timer-explanation, #changeup-charity-selection-wrapper .merchant-statement { font-size: 0.9em; color: #02263d; margin-bottom: 0.625em; } #changeup-charity-selection-wrapper .donation-amount { font-size: 1.3em; color: #90be5c; } #changeup-charity-selection-wrapper #merchant-statement-wrapper { padding: 1.875em 0 0.625em; max-width: 60%; font-size: 0.9em; }
@media screen and (max-width: 26.5625em) { #changeup-charity-selection-wrapper { padding: 1.25em; margin: 0 auto 1.25em; text-align: center; } #changeup-charity-selection-wrapper #header-wrapper { display: block; } #changeup-charity-selection-wrapper #merchant-statement-wrapper { max-width: 100%; } #changeup-charity-selection-wrapper #charity-tiles { -ms-flex-pack: space-evenly; justify-content: space-evenly; } #changeup-charity-selection-wrapper #charity-tiles-wrapper .tile { margin-bottom: 0.625em; } }
.changeup-divider { border-top: 1px solid #ddd; padding-top: 1.25em; display: inline-block;
}
.algolia-autocomplete { width: 100%; } .algolia-autocomplete .aa-input, .algolia-autocomplete .algolia-autocomplete .aa-hint { width: 100%; } .algolia-autocomplete .aa-hint { color: #999; } .algolia-autocomplete .aa-dropdown-menu { width: 100%; background-color: #fff; border: 0.0625em solid #999; border-top: none; } .algolia-autocomplete .aa-dropdown-menu .aa-suggestion { cursor: pointer; padding: 0.3125em 0.25em; } .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor { background-color: #b2d7ff; } .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em { font-weight: bold; font-style: normal; }
@media screen and (max-width: 26.5625em) { .algolia-autocomplete { text-align: left; } }