/** Z-Index Generator Generates a z-index value based on a given layer map. By default, it refers to the $sitewide-layers layer map. Import into stylesheets via `@import 'utilities/z-index-mapping'`  Example usage: z-index: z-value('mykey'); <- uses the $sitewide-layers map by default z-index: z-value('mykey', 'my-custom-map'); <- uses a different layer map  If needed, modules can define their own layer map and assign z-index values in the context of said map. */
.pay-early-modal .humblemodal-modal { width: 360px; }
.pay-early-modal table.pay-early-breakdown { width: 70%; margin: 0 auto 1.5em; }
.pay-early-modal table.pay-early-breakdown tr td:first-child { text-align: left; font-weight: bold; }
.pay-early-modal table.pay-early-breakdown tr td:last-child { text-align: right; }
.pay-early-modal .description { padding: 0; }
.pay-early-modal .error { background-color: #eb4747; padding: 0.5em; border-radius: 5px; color: white; }
.pay-early-modal .bottom { position: absolute; bottom: 0; left: 0; right: 0; margin-bottom: 10px; }
.pay-early-modal .buttons-container { width: 100%; text-align: center; }
.pay-early-modal .pay-early-spinner { margin: 0 auto; }

.banner { font-family: 'Sofia Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; position: relative; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.65); display: none; }
.banner .admin-tiny-link { position: absolute; bottom: 0; z-index: 1; }
.banner .headline { font-size: 24px; font-weight: 800; line-height: 1.25em; margin: 0 0 0.75em 0; }
.banner .body { font-weight: 400; margin: 0 0 1em 0; }
.banner .logo { margin: 0 0 0.75em 0; }
.banner .cta { font-size: 18px; padding: 1em 1.2em; white-space: nowrap; }
.banner.is-stuck { position: fixed; z-index: 100; }
.banner.is-stuck.top { top: 0; }
.banner.is-stuck.bottom { bottom: 0; }
.banner.alert-banner .body { font-size: 18px; margin: 10px; }
.banner.small-banner { height: 125px; }
.banner.small-banner .body { font-size: 18px; line-height: 1.2em; }
.banner.small-banner .cta { padding: .8em 1.2em; }
.banner.medium-banner { height: 310px; }
.banner.medium-banner .body { font-size: 20px; line-height: 1.75em; }
.banner.large-banner { height: 450px; }
.banner.large-banner .body { font-size: 18px; line-height: 1.5em; }
.banner.large-banner .headline, .banner.large-banner .body { width: 500px; }
.banner.large-banner .logo, .banner.large-banner .cta { max-width: 500px; }
.banner.alert-banner .headline, .banner.alert-banner .body, .banner.small-banner .headline, .banner.small-banner .body, .banner.medium-banner .headline, .banner.medium-banner .body { width: 90%; }
.banner.alert-banner .logo, .banner.small-banner .logo, .banner.medium-banner .logo { max-height: 50px; }
.banner.small-banner, .banner.medium-banner, .banner.large-banner { background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
.banner.small-banner *:last-child, .banner.medium-banner *:last-child, .banner.large-banner *:last-child { margin-bottom: 0; }
@media (max-width: 500px) { .banner .headline, .banner .body, .banner .logo, .banner .cta { max-width: 320px; } }
.banner .dismiss-button { align-items: center; color: white; cursor: pointer; display: flex; font-size: 1.2em; height: 2em; justify-content: center; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; width: 2em; background: transparent; border: none; }
.banner .page-banner-link { align-items: center; color: white; display: flex; flex-direction: column; height: 100%; justify-content: center; position: relative; text-align: center; text-decoration: none; width: 100%; }

.banner-pay-early:hover { cursor: pointer; }