@font-face {
  font-family: 'Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./images/fonts/hand.woff2) format('woff2');
}

/**, *::before, *::after {
  box-sizing: border-box
}

html {
  font-family: 'Lato', sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility
}

body {
  margin: 0
}

h1, h2, h4 {
  margin-top: 0;
  margin-bottom: 0
}

p {
  margin-top: 0;
  margin-bottom: 0
}

hr {
  box-sizing: content-box;
  height: 0;
  margin: 0
}

pre, code {
  font-family: monospace, monospace;
  font-size: 1em
}

pre {
  margin-top: 0;
  margin-bottom: 0;
  overflow: auto
}

address {
  margin-bottom: 0;
  font-style: normal;
  line-height: inherit
}

b {
  font-weight: bolder
}

ul {
  margin-top: 0;
  margin-bottom: 0
}

th {
  text-align: inherit
}

form {
  margin: 0
}

label {
  display: inline-block
}

a, button {
  touch-action: manipulation
}

button, input, optgroup, select, textarea {
  font: inherit;
  margin: 0
}

input {
  overflow: visible
}

button, select {
  text-transform: none
}

select {
  word-wrap: normal;
  -webkit-appearance: none;
  appearance: none
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: none;
  appearance: none
}

button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled) {
  cursor: pointer
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

input:not([type=checkbox], [type=radio], [type=date], [type=time], [type=datetime-local], [type=month], [type=number]) {
  -webkit-appearance: none;
  appearance: none
}

input[type=date], input[type=time], input[type=month] {
  -webkit-appearance: listbox;
  appearance: listbox
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield
}

input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0
}

input::-webkit-credit-card-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0
}

input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0
}

textarea {
  resize: none;
  -webkit-appearance: none;
  appearance: none
}

progress {
  vertical-align: baseline
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}*/

:root {
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
/*
:root {
  --fixed-container-width-mobile: 390px;
  --fixed-container-width-desktop: 296px
}

* {
  min-width: 0
}

html {
  height: 100%;
  overscroll-behavior-y: none
}

html.desktop-view {
  height: auto
}

body {
  font-size:
    16px;
  line-height: 24px;
  font-weight: 400;
  min-width: 320px;
  height: 100%;
  font-family: 'Lato', var(--font-system)
  ;
  color: #222832;
  text-align: left;
  background-color: rgba(0, 0, 0, 0);
  overscroll-behavior-y: none
}

.desktop-view body {
  height: auto;
  overflow: hidden
}

hr {
  border-inline-start: 0;
  border-inline-end: 0;
  border-bottom: 0;
  border-top: 1px solid #c7cdd6
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em
}

a:hover {
  color: #49505b
}

.dark-mode a:hover {
  color: inherit
}

a:focus {
  outline: 0
}

a[data-focus-visible-added]:focus {
  border-radius: 2px
}

b, strong {
  font-weight: 600
}

button:focus, input:focus, select:focus, textarea:focus {
  outline: 0
}

select:-moz-focusring {
  color: rgba(0, 0, 0, 0);
  text-shadow: 0 0 0 #222832
}

select option:not(:checked) {
  color: #222832
}

input:not([type=checkbox]):not([type=radio]):disabled {
  opacity: 1
}

ul {
  list-style: none;
  padding: 0
}

[data-focus-visible-added]:focus, [data-focus-visible-added]:focus~.focus-next {
  outline: 0;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}*/

.maw-btn-reset {
  font-weight: 400;
  font-family: 'Lato', var(--font-system)
  ;
  color: inherit;
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  -webkit-user-select: none;
  user-select: none
}

/* RTL ignore comments removed - malformed CSS */
.show-slide {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s, visibility .2s;
  visibility: hidden
}

.show-slide.is-open {
  grid-template-rows: 1fr;
  visibility: visible
}

.show-slide-content {
  overflow: hidden
}

.rtg-next-enter {
  opacity: 0;
  transform: translate3d(180px, 0, 0)
}

.rtg-next-exit {
  opacity: 1;
  transform: translate3d(0, 0, 0)
}

.rtg-next-exit.no-animation {
  flex: 0 1 0;
  width: 0;
  overflow: hidden
}

.rtg-next-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0)
}

.rtg-next-exit-active {
  opacity: 0;
  transform: translate3d(-180px, 0, 0)
}

.rtg-previous-enter {
  opacity: 0;
  transform: translate3d(-180px, 0, 0)
}

.rtg-previous-exit {
  opacity: 1;
  transform: translate3d(0, 0, 0)
}

.rtg-previous-exit.no-animation {
  flex: 0 1 0;
  width: 0;
  overflow: hidden
}

.rtg-previous-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0)
}

.rtg-previous-exit-active {
  opacity: 0;
  transform: translate3d(180px, 0, 0)
}

.rtg-next-enter-active, .rtg-next-exit-active, .rtg-previous-enter-active, .rtg-previous-exit-active {
  transition: transform .25s cubic-bezier(0.465, 0.183, 0.153, 0.946), opacity .25s cubic-bezier(0.465, 0.183, 0.153, 0.946)
}

.rtg-next-enter, .rtg-next-enter-active, .rtg-next-enter-done, .rtg-previous-enter, .rtg-previous-enter-active, .rtg-previous-enter-done {
  z-index: 2
}

.rtg-next-exit, .rtg-next-exit-active, .rtg-next-exit-done, .rtg-previous-exit, .rtg-previous-exit-active, .rtg-previous-exit-done {
  z-index: 1
}

.rtg-next-enter, .rtg-next-exit, .rtg-previous-enter, .rtg-previous-exit {
  will-change: transform, opacity
}

.no-animation {
  transition: 0ms !important;
  transition-delay: .00001ms !important
}

.rtg-fade-enter {
  opacity: 0
}

.rtg-fade-enter-active {
  opacity: 1;
  transition: opacity .5s
}

.rtg-fade-exit {
  opacity: 1
}

.rtg-fade-exit-active {
  opacity: 0;
  transition: opacity .5s
}

.shake {
  animation: shake .4s ease-in-out
}

@keyframes shake {
  0% {
    transform: translate3d(0, 0, 0)
  }

  12.5% {
    transform: translate3d(-6px, 0, 0)
  }

  37.5% {
    transform: translate3d(5px, 0, 0)
  }

  62.5% {
    transform: translate3d(-3px, 0, 0)
  }

  87.5% {
    transform: translate3d(2px, 0, 0)
  }

  to {
    transform: translate3d(0, 0, 0)
  }
}

.maw-btn {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 500;
  display: block;
  width: 100%;
  height: 48px;
  position: relative;
  color: inherit;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  background: none;
  padding: 0px 12px;
  border: 0;
  border-radius: 99px;
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .15s ease-in-out;
  font-size: 0.9rem;
  font-weight: 600;
}

.maw-btn:hover {
  text-decoration: none
}

.maw-btn:disabled, .maw-btn.disabled {
  pointer-events: none
}

.maw-btn-primary {
  color: #fff;
  background: #3371e6
}

.maw-btn-primary:hover {
  color: #fff;
  background: #2e66cf
}

.maw-btn-primary:active {
  background: #2b54c3
}

.maw-btn-primary[data-focus-visible-added]:focus {
  border-radius: 99px
}

.btn-default {
  color: #222832;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c7cdd6
}

.btn-default:hover {
  color: #222832;
  box-shadow: inset 0 0 0 1px #8791a1
}

.btn-default:active {
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #c7cdd6
}

.btn-default[data-focus-visible-added]:focus {
  box-shadow: inset 0 0 0 1px #8791a1, 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2);
  border-radius: 99px
}

.btn-danger {
  color: #fff;
  background: #da2243
}

.btn-danger:hover {
  color: #fff;
  background: #c61333
}

.btn-danger:active {
  background: #b31d2b
}

.btn-danger[data-focus-visible-added]:focus {
  background: #c61333;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #eb5a68, 0 0 0 4px rgba(235, 90, 104, .2);
  border-radius: 99px
}

.btn-link {
  color: #222832;
  text-decoration: underline;
  text-underline-offset: .15em;
  background: none;
  padding: 0;
  border: 0;
  margin: 0;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer
}

.btn-link:hover {
  color: #49505b
}

.btn-link[data-focus-visible-added]:focus {
  border-radius: 2px
}

.btn-link:disabled {
  pointer-events: none
}

.btn-icon {
  color: inherit;
  background: none;
  padding: 0;
  border: 0;
  margin: 0
}

.btn-icon:focus {
  border-radius: 2px
}

.btn-icon:disabled {
  pointer-events: none
}

.btn-loading, .btn-loading:hover, .btn-loading:focus, .btn-loading:active {
  color: rgba(0, 0, 0, 0)
}

.btn-state {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
  z-index: 2;
  font-size: 28px;
  color: #fff;
  border-radius: 99px;
  transform: translate3d(0, -100%, 0);
  animation: state-slide-down .2s ease-out .2s forwards
}

.is-success .btn-state {
  background: #00c07b
}

.has-error .btn-state {
  background: #da2243
}

@keyframes state-slide-down {
  0% {
    transform: translate3d(0, -100%, 0)
  }

  100% {
    transform: translate3d(0, 0, 0)
  }
}

.btn-xs {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 500;
  height: 32px;
  border-radius: 99px
}

.btn-apple-pay {
  background: #000;
  color: #fff
}

.btn-apple-pay:hover {
  background: #000
}

.btn-paypal-gold {
  background: #ffc439
}

.btn-google-pay {
  color: #fff;
  background: #000
}

.btn-google-pay:hover {
  background: #000
}

.btn-venmo {
  color: #fff;
  background: #008cff
}

.btn-venmo:hover {
  background: #0082ed
}

.btn-daf {
  color: #fff;
  background: #35bbf4
}

.btn-testmode {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 500;
  height: 48px;
  color: #222832;
  background: #e7e8ed;
  box-shadow: inset 0 0 0 1px #c7cdd6;
  transition: 0s;
  pointer-events: none
}

.btn-testmode:hover, .btn-testmode:focus {
  color: #222832;
  background: #e7e8ed
}

.btn-testmode[data-focus-visible-added]:focus {
  box-shadow: inset 0 0 0 1px #c7cdd6
}

.form-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.form-label {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  max-width: 100%;
  margin-bottom: 12px;
  order: -1
}

.form-label.is-floating {
  position: absolute;
  top: 50%;
  inset-inline: 14px;
  color: #697484;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0;
  transform: translate3d(0, -50%, 0) scale3d(1, 1, 1);
  transform-origin: top left;
  transition: .15s ease;
  pointer-events: none;
  z-index: 5;
  order: initial;
  cursor: text
}

.form-label.is-floating.has-error {
  color: #c61333
}

.dark-mode .form-label.is-floating {
  color: #c7cdd6
}

.dark-mode .form-label.is-floating.has-error {
  color: #c7cdd6
}

.form-label.is-floating.has-value {
  transform: translate3d(0, calc(-50% - 7px), 0) scale3d(0.75, 0.75, 1)
}

.maw-form-control {
  display: block;
  width: 100%;
  height: 44px;
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  color: #222832;
  -webkit-text-fill-color: #222832;
  background-color: #fff;
  background-image: none;
  padding: 10px 14px;
  border: 0;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px #c7cdd6, 0 1px 3px rgba(57, 58, 63, .1)
}

.maw-form-control:focus, .maw-form-control[data-focus-visible-added]:focus, .maw-form-control.is-visually-focused {
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.maw-form-control:disabled {
  opacity: 1;
  pointer-events: none
}

.maw-form-control.has-label-floating {
  height: 52px;
  padding-top: 22px;
  padding-bottom: 6px
}

.maw-form-control.has-label-floating:-webkit-autofill~.form-label, .maw-form-control.has-label-floating:not(select):focus~.form-label {
  transform: translate3d(0, calc(-50% - 7px), 0) scale3d(0.75, 0.75, 1)
}

.maw-form-control.has-error {
  background-color: #fff2f2;
  box-shadow: inset 0 0 0 1px #eb5a68, 0 1px 3px rgba(57, 58, 63, .1)
}

.maw-form-control.has-error~.maw-form-control-placeholder {
  background-color: #fff2f2
}

.group-stacked-vertical>.group-stacked-item:not(:last-child) .maw-form-control.has-error {
  box-shadow: inset 0 0 0 1px #eb5a68
}

.maw-form-control.has-error:focus, .maw-form-control.has-error[data-focus-visible-added]:focus, .maw-form-control.has-error.is-visually-focused {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 3px rgba(235, 90, 104, .2)
}

.maw-form-control.has-error:focus~.maw-form-control-placeholder, .maw-form-control.has-error[data-focus-visible-added]:focus~.maw-form-control-placeholder, .maw-form-control.has-error.is-visually-focused~.maw-form-control-placeholder {
  background-color: #fff
}

.group-stacked-vertical>.group-stacked-item:not(:last-child) .maw-form-control.has-error:focus, .group-stacked-vertical>.group-stacked-item:not(:last-child) .maw-form-control.has-error[data-focus-visible-added]:focus {
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 3px rgba(235, 90, 104, .2)
}

.dark-mode .maw-form-control {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 1px #8791a1
}

.dark-mode .maw-form-control:-webkit-autofill, .dark-mode .maw-form-control:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important
}

.dark-mode .maw-form-control.has-error {
  box-shadow: inset 0 0 0 1px #eb5a68, 0 1px 3px rgba(57, 58, 63, .1)
}

.maw-form-control::placeholder {
  font-family: 'Lato', var(--font-system)
    /*!rtl:IBM Plex Sans Arabic, IBM Plex Sans, var(--font-system)*/
  ;
  color: #697484;
  -webkit-text-fill-color: #697484;
  opacity: 1
}

.maw-form-control-select {
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkw4IDEwTDEyIDYiIHN0cm9rZT0iIzY5NzQ4NCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  background-position: right 14px center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  padding-inline-end: 40px;
  -webkit-user-select: none;
  user-select: none
}

.maw-form-control-placeholder {
  display: block;
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  background: #fff;
  margin: 10px 40px 10px 14px
}

.maw-form-control-placeholder.has-label-floating {
  margin-top: 22px;
  margin-bottom: 6px
}

textarea.maw-form-control {
  height: auto
}

.group-stacked-vertical>.group-stacked-item:not(:first-child) {
  margin-top: -1px
}

.group-stacked-vertical>.group-stacked-item:first-child:not(:last-child) .maw-form-control, .group-stacked-vertical>.group-stacked-item:first-child:not(:last-child) .StripeElement {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

.group-stacked-vertical>.group-stacked-item:not(:first-child):not(:last-child) .maw-form-control, .group-stacked-vertical>.group-stacked-item:not(:first-child):not(:last-child) .StripeElement {
  border-radius: 0
}

.group-stacked-vertical>.group-stacked-item:last-child:not(:first-child) .maw-form-control, .group-stacked-vertical>.group-stacked-item:last-child:not(:first-child) .StripeElement {
  border-top-left-radius: 0;
  border-top-right-radius: 0
}

.group-stacked-vertical .maw-form-control {
  position: relative
}

.group-stacked-vertical .maw-form-control:focus {
  z-index: 3;
  will-change: transform
}

.group-stacked-vertical .maw-form-control.has-error {
  z-index: 2
}

.group-stacked-vertical .maw-form-control.has-error:focus {
  z-index: 4
}

.group-stacked-horizontal {
  display: flex
}

.group-stacked-horizontal .group-stacked-item {
  width: 100%
}

.group-stacked-horizontal .group-stacked-item:first-child:not(:last-child) {
  margin-inline-end: -1px
}

.group-stacked-horizontal .group-stacked-item:first-child:not(:last-child) .maw-form-control, .group-stacked-horizontal .group-stacked-item:first-child:not(:last-child) .StripeElement {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.group-stacked-horizontal .group-stacked-item:not(:first-child):not(:last-child) {
  margin-inline-start: -1px;
  margin-inline-end: -1px
}

.group-stacked-horizontal .group-stacked-item:not(:first-child):not(:last-child) .maw-form-control, .group-stacked-horizontal .group-stacked-item:not(:first-child):not(:last-child) .StripeElement {
  border-radius: 0
}

.group-stacked-horizontal .group-stacked-item:last-child:not(:first-child) {
  margin-inline-start: -1px
}

.group-stacked-horizontal .group-stacked-item:last-child:not(:first-child) .maw-form-control, .group-stacked-horizontal .group-stacked-item:last-child:not(:first-child) .StripeElement {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.group-stacked-horizontal .maw-form-control {
  position: relative
}

.group-stacked-horizontal .maw-form-control:focus {
  z-index: 3;
  will-change: transform
}

.group-stacked-horizontal .maw-form-control.has-error {
  z-index: 2
}

.group-stacked-horizontal .maw-form-control.has-error:focus {
  z-index: 4
}

.StripeElement {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c7cdd6, 0 1px 3px rgba(57, 58, 63, .1)
}

.StripeElement.has-label-floating {
  height: 52px;
  padding-top: 22px;
  padding-bottom: 6px
}

.StripeElement.has-label-floating.StripeElement--webkit-autofill~.form-label {
  transform: translate3d(0, calc(-50% - 7px), 0) scale3d(0.75, 0.75, 1)
}

.StripeElement.focused {
  position: relative;
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2);
  z-index: 3
}

.StripeElement.focused.has-label-floating~.form-label {
  transform: translate3d(0, calc(-50% - 7px), 0) scale3d(0.75, 0.75, 1)
}

.StripeElement.invalid {
  position: relative;
  background-color: #fff2f2;
  box-shadow: inset 0 0 0 1px #eb5a68, 0 1px 3px rgba(57, 58, 63, .1);
  z-index: 2
}

.StripeElement.invalid.focused {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 3px rgba(235, 90, 104, .2);
  z-index: 4
}

.group-shadow {
  border-radius: 99px;
  box-shadow: 0 1px 3px rgba(57, 58, 63, .1)
}

.group-shadow .StripeElement {
  box-shadow: inset 0 0 0 1px #c7cdd6
}

.group-shadow .StripeElement.focused {
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.group-shadow .StripeElement.invalid {
  box-shadow: inset 0 0 0 1px #eb5a68
}

.group-shadow .StripeElement.invalid.focused {
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 3px rgba(235, 90, 104, .2)
}

.group-shadow-experiment .StripeElement {
  box-shadow: inset 0 0 0 1px #c7cdd6
}

.group-shadow-experiment .StripeElement.focused {
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.group-shadow-experiment .StripeElement.invalid {
  box-shadow: inset 0 0 0 1px #eb5a68
}

.group-shadow-experiment .StripeElement.invalid.focused {
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 3px rgba(235, 90, 104, .2)
}

.scroll-wrap {
  overflow: hidden;
  position: relative
}

.shadow-top, .shadow-right, .shadow-bottom, .shadow-left {
  position: absolute;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none
}

.shadow-top.is-active, .shadow-right.is-active, .shadow-bottom.is-active, .shadow-left.is-active {
  opacity: 1
}

.shadow-top, .shadow-bottom {
  inset-inline: 0;
  height: 20px
}

.shadow-top {
  top: -20px;
  box-shadow: 0 5px 14px rgba(57, 58, 63, .1)
}

.shadow-bottom {
  bottom: -20px;
  box-shadow: 0 5px 14px rgba(57, 58, 63, .1);
  transform: rotate(180deg)
}

.shadow-right, .shadow-left {
  top: 0;
  bottom: 0;
  width: 20px
}

.shadow-right {
  inset-inline-end: -20px;
  box-shadow: 0 5px 14px rgba(57, 58, 63, .1);
  transform: rotate(180deg)
}

.shadow-left {
  inset-inline-start: -20px;
  box-shadow: 0 5px 14px rgba(57, 58, 63, .1)
}

.custom-scrollbar {
  overflow: auto
}

@supports(-moz-appearance: none) {
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 145, 161, .3) rgba(0, 0, 0, 0)
  }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  appearance: none
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  min-height: 40px;
  background-color: rgba(135, 145, 161, .3);
  background-clip: padding-box;
  border: 5px solid rgba(0, 0, 0, 0);
  border-radius: 10px
}

.scroll-box {
  overflow: auto;
  border: 1px solid #c7cdd6;
  box-shadow: inset 2px 2px 3px rgba(57, 58, 63, .08);
  border-radius: 8px
}

@supports(-moz-appearance: none) {
  .scroll-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 145, 161, .3) rgba(0, 0, 0, 0)
  }
}

.scroll-box::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  appearance: none
}

.scroll-box::-webkit-scrollbar-thumb {
  min-height: 40px;
  background-color: rgba(135, 145, 161, .3);
  background-clip: padding-box;
  border: 5px solid rgba(0, 0, 0, 0);
  border-radius: 10px
}

.spinner {
  display: block;
  border: .1em solid;
  border-radius: 50%;
  animation: spinner-rotate .5s infinite linear
}

.spinner-primary {
  border-color: #e7e8ed #e7e8ed #e7e8ed #3371e6
}

.spinner-white {
  border-color: #fff #fff #fff rgba(0, 0, 0, 0)
}

.spinner-default {
  border-color: #8791a1 #8791a1 #8791a1 rgba(0, 0, 0, 0)
}

.spinner-md {
  width: 15px;
  height: 15px;
  font-size: 18px
}

.spinner-lg {
  width: 20px;
  height: 20px;
  font-size: 24px
}

.spinner-xl {
  width: 48px;
  height: 48px;
  font-size: 30px
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(359deg)
  }
}

.maw-title-1 {
  font-size: 20px;
  line-height:
    /*!rtl:34px*/
    24px;
  font-weight: 600
}

.maw-title-2 {
  font-size: 16px;
  line-height:
    /*!rtl:28px*/
    20px;
  font-weight: 500
}

.subtitle-1 {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400
}

.subtitle-2 {
  font-size:
    /*!rtl:16px*/
    20px;
  line-height: 28px;
  font-weight: 500
}

.subtitle-3 {
  font-size:
    /*!rtl:16px*/
    20px;
  line-height: 28px;
  font-weight: 400
}

.subtitle-4 {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 500
}

.subtitle-5 {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 600
}

.body-1 {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400
}

.body-2 {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height:
    /*!rtl:22px*/
    20px;
  font-weight: 400
}

.body-3 {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400
}

.body-4 {
  font-size:
    /*!rtl:11px*/
    12px;
  line-height: 18px;
  font-weight: 400
}

.label-1 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 400
}

.label-2 {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 500
}

.label-3 {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400
}

.label-4 {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 500
}

.label-5 {
  font-size:
    /*!rtl:11px*/
    12px;
  line-height: 18px;
  font-weight: 500
}

.link-1 {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400
}

.link-2 {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400
}

.link-3 {
  font-size:
    /*!rtl:10px*/
    12px;
  line-height: 16px;
  font-weight: 400;
  /*!rtl:remove*/
  letter-spacing: -0.03em
}

.caption-1 {
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
  /*!rtl:remove*/
  letter-spacing: .04em
}

.ui-checkbox-label {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  display: inline-flex;
  vertical-align: top;
  align-items: flex-start;
  max-width: 100%;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer
}

.ui-checkbox-disabled .ui-checkbox-label {
  pointer-events: none
}

.ui-checkbox-control {
  position: relative;
  width: 18px;
  flex-shrink: 0
}

.ui-checkbox-control:before {
  content: " ";
  opacity: 0
}

.ui-checkbox-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #697484;
  border-radius: 4px
}

.dark-mode .ui-checkbox-icon {
  background: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 1px #8791a1
}

.ui-checkbox-icon svg {
  display: block;
  width: 14px;
  height: 10px;
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%)
}

.ui-checkbox-input {
  opacity: .0001;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer
}

.ui-checkbox-input:checked~.ui-checkbox-icon {
  color: #fff;
  background: #3371e6;
  box-shadow: none
}

.ui-checkbox-input[data-focus-visible-added]:focus~.ui-checkbox-icon {
  box-shadow: inset 0 0 0 1px #697484, 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}

.dark-mode .ui-checkbox-input[data-focus-visible-added]:focus~.ui-checkbox-icon {
  box-shadow: inset 0 0 0 1px #8791a1, 0 0 0 1px #222832, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}

.ui-checkbox-input[data-focus-visible-added]:checked:focus~.ui-checkbox-icon {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}

.dark-mode .ui-checkbox-input[data-focus-visible-added]:checked:focus~.ui-checkbox-icon {
  box-shadow: 0 0 0 1px #222832, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}

.ui-checkbox-input:disabled {
  pointer-events: none
}

.ui-checkbox-input.has-error~.ui-checkbox-icon {
  box-shadow: inset 0 0 0 2px #eb5a68
}

.ui-checkbox-input.has-error:focus~.ui-checkbox-icon, .ui-checkbox-input.has-error[data-focus-visible-added]:focus~.ui-checkbox-icon {
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 1px #fff, 0 0 0 2px #eb5a68, 0 0 0 4px rgba(235, 90, 104, .2)
}

.ui-checkbox-text {
  margin-inline-start: 8px
}

.ui-checkbox-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis
}

.ui-checkbox-hint {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  margin-top: 8px;
  margin-inline-start: 26px
}

html .rmdp-container {
  max-width: 100%
}

html .rmdp-shadow {
  box-shadow: 0 2px 6px 0 rgba(57, 58, 63, .1)
}

html .rmdp-wrapper {
  background-color: #fff;
  direction: ltr;
  text-align: center;
  width: max-content;
  max-width: calc(100vw - 40px);
  border-radius: 8px;
  border: 1px solid #e7e8ed
}

html .rmdp-wrapper .rmdp-arrow-container, html .rmdp-wrapper .rmdp-day:not(.rmdp-range), html .rmdp-wrapper .rmdp-ym .rmdp-day:not(.rmdp-range), html .rmdp-wrapper .rmdp-day span {
  border-radius: 8px
}

html .rmdp-wrapper [data-focus-visible-added]:not(.disabled):focus {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}

html .rmdp-calendar {
  height: max-content;
  padding: 8px
}

html .rmdp-calendar :focus {
  outline: 0
}

html .rmdp-header {
  position: relative;
  margin-top: 0;
  padding: 0;
  z-index: 1
}

html .rmdp-header-values {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 500;
  display: flex;
  color: inherit;
  margin: auto;
  user-select: none
}

html .rmdp-header-values span {
  border-radius: 2px
}

html .rmdp-header-values span:hover {
  color: #3371e6
}

html .rmdp-header-values span:first-child {
  margin-inline-end: 16px
}

html .rmdp-header-values span:first-child, html .rmdp-header-values span:last-child {
  position: relative;
  padding-inline-end: 16px
}

html .rmdp-header-values span:first-child::before, html .rmdp-header-values span:last-child::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgOC43NTA2NUw3LjUgMTIuMjUwN0wxMSA4Ljc1MDY1TTExIDUuMjQ5NTFMNy41IDEuNzQ5NTFMNCA1LjI0OTUxIiBzdHJva2U9IiMyMjI4MzIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
  background-size: 14px
}

html .rmdp-header-values span:first-child:hover::before, html .rmdp-header-values span:last-child:hover::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgOC43NTA2NUw3LjUgMTIuMjUwN0wxMSA4Ljc1MDY1TTExIDUuMjQ5NTFMNy41IDEuNzQ5NTFMNCA1LjI0OTUxIiBzdHJva2U9IiMyRTY2Q0YiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==")
}

html .rmdp-day-picker {
  user-select: none
}

html .rmdp-month-picker, html .rmdp-year-picker {
  position: absolute;
  inset: 0;
  background-color: #fff
}

html .rmdp-month-picker>div, html .rmdp-year-picker {
  margin: 4px 0 0 !important
}

html .rmdp-week {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  column-gap: 4px
}

html .rmdp-week-day {
  font-size:
    /*!rtl:11px*/
    12px;
  line-height: 18px;
  font-weight: 400;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 34px;
  color: inherit
}

html .rmdp-arrow-container, html .rmdp-day {
  width: 40px;
  height: 40px
}

html .rmdp-arrow-container {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  padding: 0;
  border: 0;
  margin: 0
}

html .rmdp-arrow-container.rmdp-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjE1IDE4IDkgMTIgMTUgNiI+PC9wb2x5bGluZT48L3N2Zz4K")
}

html .rmdp-arrow-container.rmdp-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjkgMTggMTUgMTIgOSA2Ij48L3BvbHlsaW5lPjwvc3ZnPgo=")
}

html .rmdp-arrow-container:hover {
  color: inherit;
  border: 1px solid #c7cdd6;
  background-color: #f3f4fa;
  box-shadow: none
}

html .rmdp-arrow-container.disabled {
  visibility: hidden
}

html .rmdp-arrow {
  display: none
}

html .rmdp-day {
  position: relative;
  color: inherit;
  cursor: pointer
}

html .rmdp-day span {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center
}

html .rmdp-day.rmdp-disabled {
  color: #c7cdd6;
  pointer-events: none
}

html .rmdp-day.rmdp-day-hidden {
  color: rgba(0, 0, 0, 0);
  background-color: unset;
  pointer-events: none
}

html .rmdp-day:not(.rmdp-disabled, .rmdp-day-hidden) span:hover {
  color: inherit;
  border: 1px solid #c7cdd6;
  background-color: #f3f4fa;
  box-shadow: none
}

html .rmdp-day.rmdp-selected span:not(.highlight) {
  color: #fff;
  background-color: #3371e6;
  box-shadow: none
}

html .rmdp-day.rmdp-selected span:not(.highlight):hover {
  background-color: #2e66cf;
  border: none
}

html .rmdp-ym {
  display: flex;
  justify-content: space-between;
  height: 25%
}

html .rmdp-ym .rmdp-day {
  flex: 1;
  margin: auto
}

html .rmdp-ym .rmdp-day span {
  padding: 2px 0
}

html .rmdp-rtl .rmdp-arrow-container {
  transform: rotate(180deg)
}

html .rmdp-visible {
  visibility: visible
}

html .rmdp-invisible {
  visibility: hidden
}

.ui-radio-label {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  display: inline-flex;
  vertical-align: top;
  align-items: flex-start;
  max-width: 100%;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer
}

.ui-radio-disabled .ui-radio-label {
  pointer-events: none
}

.ui-radio-control {
  position: relative;
  width: 18px;
  flex-shrink: 0
}

.ui-radio-control:before {
  content: " ";
  opacity: 0
}

.ui-radio-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #697484;
  border-radius: 18px
}

.ui-radio-input {
  opacity: .0001;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer
}

.ui-radio-input:checked~.ui-radio-icon {
  background: #3371e6;
  box-shadow: none
}

.ui-radio-input:checked~.ui-radio-icon::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%)
}

.ui-radio-input[data-focus-visible-added]:focus~.ui-radio-icon {
  box-shadow: inset 0 0 0 1px #697484, 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}

.ui-radio-input[data-focus-visible-added]:checked:focus~.ui-radio-icon {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2)
}

.ui-radio-input:disabled {
  pointer-events: none
}

.ui-radio-input.has-error~.ui-radio-icon {
  box-shadow: inset 0 0 0 2px #eb5a68
}

.ui-radio-input.has-error:focus~.ui-radio-icon, .ui-radio-input.has-error[data-focus-visible-added]:focus~.ui-radio-icon {
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 1px #fff, 0 0 0 2px #eb5a68, 0 0 0 4px rgba(235, 90, 104, .2)
}

.ui-radio-text {
  margin-inline-start: 8px
}

.ui-radio-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis
}

.ui-radio-hint {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  margin-top: 8px;
  margin-inline-start: 26px
}

.ui-tooltip {
  width: max-content;
  z-index: 1020
}

.ui-tooltip-body {
  position: relative;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(57, 58, 63, .22), 0 0 1px rgba(57, 58, 63, .14)
}

.ui-tooltip-content {
  position: relative;
  overflow-y: auto;
  overflow-wrap: break-word;
  overflow: auto
}

@supports(-moz-appearance: none) {
  .ui-tooltip-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 145, 161, .3) rgba(0, 0, 0, 0)
  }
}

.ui-tooltip-content::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
  appearance: none
}

.ui-tooltip-content::-webkit-scrollbar-thumb {
  min-height: 40px;
  background-color: rgba(135, 145, 161, .3);
  background-clip: padding-box;
  border: 5px solid rgba(0, 0, 0, 0);
  border-radius: 10px
}

.ui-tooltip-size-default.ui-tooltip-mobile .ui-tooltip-content {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  padding: 12px 16px
}

.ui-tooltip-size-default.ui-tooltip-desktop .ui-tooltip-content {
  font-size:
    /*!rtl:11px*/
    12px;
  line-height: 18px;
  font-weight: 400;
  padding: 4px 8px
}

@media(min-width: 536px) {
  .ui-tooltip-size-default.ui-tooltip-desktop .ui-tooltip-content {
    font-size:
      /*!rtl:12px*/
      14px;
    line-height: 20px;
    font-weight: 400;
    padding: 12px 16px
  }
}

/*!rtl:begin:ignore*/
.ui-tooltip-arrow {
  position: absolute;
  transform: rotate(45deg)
}

.ui-tooltip-top .ui-tooltip-arrow {
  border-bottom-right-radius: 2px;
  margin-bottom: 1px
}

.ui-tooltip-bottom .ui-tooltip-arrow {
  border-top-left-radius: 2px;
  margin-top: 1px
}

.ui-tooltip-left .ui-tooltip-arrow {
  border-top-right-radius: 2px;
  margin-inline-end: 1px
}

.ui-tooltip-right .ui-tooltip-arrow {
  border-bottom-left-radius: 2px;
  margin-inline-start: 1px
}

.ui-tooltip-stripes-top {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  z-index: -1
}

.ui-tooltip-stripes-top::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 4px;
  background: repeating-linear-gradient(138deg, #222832 0px, #222832 10px, #ffcc21 10px, #ffcc21 17px)
}

/*!rtl:end:ignore*/
.ui-tooltip-variant-default .ui-tooltip-body, .ui-tooltip-variant-default .ui-tooltip-arrow {
  color: #222832;
  background: #fff
}

.beating-heart {
  width: 80px;
  height: 80px;
  opacity: 0;
  animation: beating-heart-fade-in .133s linear forwards .05s
}

@keyframes beating-heart-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.beating-heart-beat {
  animation: beating-heart-beat 1.069s forwards .25s
}

@keyframes beating-heart-beat {
  0% {
    scale: 1
  }

  21.9% {
    scale: 1.12;
    animation-timing-function: cubic-bezier(0.17, 0.01, 0.2, 1)
  }

  43.8% {
    scale: .98;
    animation-timing-function: cubic-bezier(0.8, 0, 0.83, 0.99)
  }

  68.8% {
    scale: 1.12;
    animation-timing-function: cubic-bezier(0.17, -0.02, 0.2, 1)
  }

  100% {
    scale: 1
  }
}

@media(prefers-reduced-motion) {
  .beating-heart {
    opacity: 1;
    animation: none
  }

  .beating-heart-beat {
    animation: none
  }
}

.bouncing-gift {
  width: 80px;
  height: 80px;
  opacity: 0;
  animation: bouncing-gift-fade-in .133s linear forwards .05s
}

@keyframes bouncing-gift-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.bouncing-gift-bounce {
  animation: bouncing-gift-bounce .735s cubic-bezier(0.17, 0.17, 0.31, 1) forwards .25s;
  transform-origin: bottom center
}

@keyframes bouncing-gift-bounce {
  0% {
    transform: scale(1, 1)
  }

  31.84% {
    transform: scale(1.08, 0.93)
  }

  63.67% {
    transform: scale(0.94, 1.08)
  }

  100% {
    transform: scale(1, 1)
  }
}

.bouncing-gift-star {
  scale: 0
}

.bouncing-gift-star-1-bounce {
  animation: bouncing-gift-star-1-bounce .501s cubic-bezier(0.17, 0.17, 0.4, 1) forwards .25s
}

.bouncing-gift-star-2-bounce {
  animation: bouncing-gift-star-2-bounce .501s cubic-bezier(0.17, 0.17, 0.4, 1) forwards .383s
}

@keyframes bouncing-gift-star-1-bounce {
  0% {
    opacity: 1;
    scale: 0
  }

  53.3% {
    opacity: 1
  }

  100% {
    opacity: 0;
    scale: 1
  }
}

@keyframes bouncing-gift-star-2-bounce {
  0% {
    opacity: 1;
    scale: 0
  }

  53.3% {
    opacity: 1
  }

  100% {
    opacity: 0;
    scale: .73
  }
}

.confetti {
  width: 80px;
  height: 80px
}

.orange-wave-wrap, .orange-wave, .red-spiral, .purple-line, .purple-wave, .red-wave, .yellow-spiral {
  opacity: 0;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: .124s;
  animation-play-state: paused
}

.confetti-curves-bounce .orange-wave-wrap, .confetti-curves-bounce .orange-wave, .confetti-curves-bounce .red-spiral, .confetti-curves-bounce .purple-line, .confetti-curves-bounce .purple-wave, .confetti-curves-bounce .red-wave, .confetti-curves-bounce .yellow-spiral {
  animation-play-state: running
}

.orange-wave-wrap-final, .orange-wave-final, .red-spiral-final, .purple-line-final {
  opacity: 0;
  animation-duration: .15s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-delay: .424s;
  animation-play-state: paused
}

.confetti-curves-bounce .orange-wave-wrap-final, .confetti-curves-bounce .orange-wave-final, .confetti-curves-bounce .red-spiral-final, .confetti-curves-bounce .purple-line-final {
  animation-play-state: running
}

.orange-wave-wrap {
  animation-name: orange-wave-wrap
}

.orange-wave {
  animation-name: orange-wave
}

.orange-wave-wrap-final {
  animation-name: orange-wave-wrap-final
}

.orange-wave-final {
  animation-name: orange-wave-final
}

.red-spiral {
  animation-name: red-spiral
}

.red-spiral-final {
  animation-name: red-spiral-final
}

.purple-line {
  animation-name: purple-line
}

.purple-line-final {
  animation-name: purple-line-final
}

.purple-wave {
  animation-name: purple-wave
}

.red-wave {
  animation-name: red-wave
}

.yellow-spiral {
  animation-name: yellow-spiral
}

@keyframes orange-wave-wrap {
  0% {
    opacity: 1;
    transform: translate(67px, 73px) rotate(-45deg) scale(0.075)
  }

  100% {
    opacity: 1;
    transform: translate(105px, 33px) rotate(-45deg) scale(0.075)
  }
}

@keyframes orange-wave {
  0% {
    opacity: 0;
    stroke-dashoffset: 950
  }

  1% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 2860
  }
}

@keyframes orange-wave-wrap-final {
  0% {
    opacity: 1;
    transform: translate(67px, 73px) rotate(-45deg) scale(0.075)
  }

  100% {
    opacity: 1;
    transform: translate(73px, 68px) rotate(-45deg) scale(0.075)
  }
}

@keyframes orange-wave-final {
  0% {
    opacity: 0;
    stroke-dashoffset: 950
  }

  10% {
    opacity: 1
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 1560
  }
}

@keyframes red-spiral {
  0% {
    opacity: 0;
    stroke-dashoffset: 1350
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0
  }
}

@keyframes red-spiral-final {
  0% {
    opacity: 0;
    stroke-dashoffset: 1350
  }

  10% {
    opacity: 1
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 980
  }
}

@keyframes purple-line {
  0% {
    opacity: 0;
    stroke-dashoffset: 740
  }

  15% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0
  }
}

@keyframes purple-line-final {
  0% {
    opacity: 0;
    stroke-dashoffset: 740
  }

  10% {
    opacity: 1
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 355
  }
}

@keyframes purple-wave {
  0% {
    opacity: 0;
    stroke-dashoffset: 1570
  }

  1% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0
  }
}

@keyframes red-wave {
  0% {
    opacity: 0;
    stroke-dashoffset: 1570
  }

  1% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0
  }
}

@keyframes yellow-spiral {
  0% {
    opacity: 0;
    stroke-dashoffset: 1550
  }

  1% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0
  }
}

@media(prefers-reduced-motion) {
  .orange-wave-wrap, .orange-wave, .orange-wave-wrap-final, .orange-wave-final, .red-spiral, .red-spiral-final, .purple-line, .purple-line-final, .purple-wave, .red-wave, .yellow-spiral {
    animation: none
  }

  .orange-wave-wrap-final {
    opacity: 1;
    transform: translate(73px, 68px) rotate(-45deg) scale(0.075)
  }

  .orange-wave-final {
    opacity: 1;
    stroke-dashoffset: 1560
  }

  .red-spiral-final {
    opacity: 1;
    stroke-dashoffset: 980
  }

  .purple-line-final {
    opacity: 1;
    stroke-dashoffset: 355
  }
}

.party-popper {
  width: 80px;
  height: 80px;
  opacity: 0;
  animation: party-popper-fade-in .1s linear forwards .05s
}

@keyframes party-popper-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.party-popper-bounce {
  animation: party-popper-bounce .433s cubic-bezier(0.35, 0.17, 0.35, 1) forwards .05s;
  transform-origin: bottom left;
  will-change: transform
}

@keyframes party-popper-bounce {
  0% {
    transform: translate(0, 0) scale(1) skew(0deg, 0deg)
  }

  28.6% {
    transform: translate(5px, -5px) scale(1.04) skew(-3deg, -3deg)
  }

  66.7% {
    transform: translate(0, 0) scale(1) skew(2deg, 2deg)
  }

  100% {
    transform: translate(0, 0) scale(1) skew(0deg, 0deg)
  }
}

@media(prefers-reduced-motion) {
  .party-popper {
    opacity: 1;
    animation: none
  }

  .party-popper-bounce {
    animation: none
  }
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #d3e1fb;
  overflow: hidden
}

.progress-bar-fill {
  position: absolute;
  width: 0;
  height: 100%;
  background-color: #3371e6;
  transition: width .3s linear, background-color .3s linear
}

.progress-bar-success .progress-bar-fill {
  background-color: #00c07b
}

.campaign {
  background: #fff;
  display: flex;
  flex-direction: column
}

.campaign-desktop {
  height: auto;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translateZ(0)
}

@media(min-width: 1128px) {
  .campaign-desktop {
    height: 640px;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(57, 58, 63, .22), 0 0 4px rgba(57, 58, 63, .04)
  }
}

.campaign-faded-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
  background: rgba(0, 0, 0, .3)
}

.campaign-image-holder {
  position: relative
}

.campaign-image-holder-mobile {
  order: 1
}

.campaign-image-holder-desktop {
  order: 0
}

.campaign-image {
  display: block;
  width: 100%;
  object-fit: cover
}

.campaign-image-mobile {
  height: 59vw
}

.campaign-image-desktop {
  height: 202px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px
}

@media(min-width: 536px) {
  .campaign-image-desktop {
    height: 289px
  }
}

.campaign-header {
  width: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0
}

.campaign-header-mobile {
  order: 0;
  min-height: 48px;
  padding: 8px 44px
}

.campaign-header-desktop {
  order: 1;
  height: 86px;
  padding: 20px 28px 16px 28px
}

.campaign-header-name {
  font-size: 16px;
  line-height:
    /*!rtl:28px*/
    20px;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden
}

.campaign-header-name-mobile {
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  margin-inline-start: auto;
  margin-inline-end: auto
}

.campaign-header-name-desktop {
  text-align: left;
  white-space: nowrap
}

.campaign-header-logo {
  display: block;
  max-width: 100%
}

.campaign-header-logo-mobile {
  max-height: 32px;
  margin-inline-start: auto;
  margin-inline-end: auto
}

.showcase .campaign-header-logo-mobile {
  height: 32px
}

.campaign-header-logo-desktop {
  max-height: 50px
}

.campaign-body {
  order: 2;
  width: 100%;
  min-height: 0
}

.campaign-body-mobile {
  max-width: calc(var(--fixed-container-width-mobile) + 40px);
  margin-inline-start: auto;
  margin-inline-end: auto
}

.campaign-body-desktop {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 20px 28px 20px;
  max-width: 100%
}

@media(min-width: 536px) {
  .campaign-body-desktop {
    padding-inline-start: 28px;
    padding-inline-end: 28px
  }
}

/* Force all text within campaign-body sections to be black */
.campaign-body,
.campaign-body-desktop {
  color: #000000 !important;
}

.campaign-body *,
.campaign-body-desktop * {
  color: #000000 !important;
}

.campaign-body h1,
.campaign-body h2,
.campaign-body h3,
.campaign-body h4,
.campaign-body h5,
.campaign-body h6,
.campaign-body p,
.campaign-body span,
.campaign-body div,
.campaign-body strong,
.campaign-body em,
.campaign-body-desktop h1,
.campaign-body-desktop h2,
.campaign-body-desktop h3,
.campaign-body-desktop h4,
.campaign-body-desktop h5,
.campaign-body-desktop h6,
.campaign-body-desktop p,
.campaign-body-desktop span,
.campaign-body-desktop div,
.campaign-body-desktop strong,
.campaign-body-desktop em {
  color: #000000 !important;
}

/* Force title classes to be black throughout the modal */
.maw-new-donation-modal .maw-title-1,
.maw-new-donation-modal .maw-title-2 {
  color: #000000 !important;
}

/* Force center alignment for the secure donation header */
.maw-new-donation-modal .maw-header-main .d-flex {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.maw-new-donation-modal .maw-header-main .maw-title-1 {
  margin: 0 !important;
  text-align: center !important;
}

/* Fix frequency hint text color and position */
.maw-new-donation-modal .frequency-hint-top-text {
  color: #000000 !important;
  position: relative !important;
  top: 5px !important;
  z-index: 10 !important;
}

/* Force correct amount option button styling - override Flatsome conflicts */
.maw-new-donation-modal .amount-option-label,
.maw-new-donation-modal .amount-option-label-desktop {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding: 12px 16px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 50px !important;
  background-color: #ffffff !important;
  color: #374151 !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hover state */
.maw-new-donation-modal .amount-option-label:hover,
.maw-new-donation-modal .amount-option-label-desktop:hover {
  border-color: #e5e7eb !important;
  background-color: #f8f9fa !important;
  color: #374151 !important;
  box-shadow: none !important;
}

/* Selected state */
.maw-new-donation-modal .amount-option-radio:checked + .amount-option-label,
.maw-new-donation-modal .amount-option-radio:checked + .amount-option-label-desktop {
  border-color: #3371e6 !important;
  background-color: #e6f0ff !important;
  color: #3371e6 !important;
  box-shadow: none !important;
}

/* Hide the radio button */
.maw-new-donation-modal .amount-option-radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Fix custom amount input styling */
.maw-new-donation-modal .group-price-control {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  background-color: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 50px !important;
  padding: 0 !important;
  margin-top: 12px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  overflow: hidden !important;
}

.maw-new-donation-modal .group-price-control:focus-within {
  border-color: #3371e6 !important;
  background-color: #e6f0ff !important;
  box-shadow: none !important;
}

/* Euro symbol styling */
.maw-new-donation-modal .group-price-control .text-sans-serif {
  color: #000000 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 12px 0 12px 16px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.maw-new-donation-modal .group-price-control:focus-within .text-sans-serif {
  color: #000000 !important;
}

/* Input field styling */
.maw-new-donation-modal .group-price-control .price-control-desktop {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 8px 8px 4px 14px !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.maw-new-donation-modal .group-price-control .price-control-desktop::placeholder {
  color: #9ca3af !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

.maw-new-donation-modal .group-price-control .price-control-desktop:focus {
  color: #3371e6 !important;
  outline: none !important;
}

/* When input has value, make text blue */
.maw-new-donation-modal .group-price-control .price-control-desktop:not(:placeholder-shown) {
  color: #3371e6 !important;
}

/* EUR label styling */
.maw-new-donation-modal .group-price-control .currency-select-label {
  color: #9ca3af !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 12px 16px 12px 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.maw-new-donation-modal .group-price-control:focus-within .currency-select-label {
  color: #3371e6 !important;
}

/* Ensure title classes are black in campaign-body */
.campaign-body .maw-title-1,
.campaign-body-desktop .maw-title-1,
.campaign-body .maw-title-2,
.campaign-body-desktop .maw-title-2 {
  color: #000000 !important;
}

/* Exception: campaign links should be gray and underlined */
.campaign-body .campaign-link,
.campaign-body-desktop .campaign-link,
.campaign-body .campaign-link-desktop,
.campaign-body-desktop .campaign-link-desktop {
  color: #697484 !important;
  text-decoration: underline !important;
}

/* Campaign links hover state */
.campaign-body .campaign-link:hover,
.campaign-body-desktop .campaign-link:hover,
.campaign-body .campaign-link-desktop:hover,
.campaign-body-desktop .campaign-link-desktop:hover {
  color: #49505b !important;
  text-decoration: underline !important;
}

.campaign-title {
  font-size: 20px;
  line-height:
    /*!rtl:34px*/
    24px;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  user-select: text
}

.campaign-title-mobile {
  text-align: center
}

.campaign-title-desktop {
  text-align: left
}

/*@media(min-width: 1128px) {
  .campaign-title-desktop {
    white-space: nowrap
  }
}*/

.campaign-text {
  position: relative;
  text-align: left;
  overflow: hidden
}

.campaign-text-mobile {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  margin-top: 16px;
  text-overflow: ellipsis
}

.campaign-text-desktop {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height:
    /*!rtl:22px*/
    20px;
  font-weight: 400;
  line-height: 22px;
  margin-top: 12px;
  user-select: text
}

@media(min-width: 1128px) {
  .campaign-text-desktop {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .campaign-text-desktop.campaign-text-xs {
    -webkit-line-clamp: 4;
    line-clamp: 4
  }

  .campaign-text-desktop.campaign-text-sm {
    -webkit-line-clamp: 7;
    line-clamp: 7
  }

  .campaign-text-desktop.campaign-text-md {
    -webkit-line-clamp: 9;
    line-clamp: 9
  }

  .campaign-text-desktop.campaign-text-lg {
    -webkit-line-clamp: 11;
    line-clamp: 11
  }
}

.campaign-links-wrap {
  flex-shrink: 0
}

.campaign-links-wrap-desktop {
  margin-top: 12px
}

@media(min-width: 536px) {
  .campaign-links-wrap-desktop {
    margin-top: 24px
  }
}

@media(min-width: 1128px) {
  .campaign-links-wrap-desktop {
    margin-top: auto
  }
}

.campaign-links {
  max-width: 100%;
  line-height: 16px;
  text-align: left
}

.campaign-links-mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: -4px;
  margin-bottom: -4px
}

.campaign-links-desktop {
  padding: 4px;
  margin: -4px;
  user-select: text;
  overflow-wrap: break-word;
  -webkit-hyphens: none;
  hyphens: none
}

@media(min-width: 1128px) {
  .campaign-links-desktop {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }
}

.campaign-link {
  color: #697484;
  text-decoration: underline
}

.campaign-link:hover {
  color: #49505b
}

.campaign-link-mobile {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  max-width: 100%;
  padding: 4px 0;
  text-overflow: ellipsis;
  overflow: hidden
}

.campaign-link-desktop {
  font-size:
    /*!rtl:10px*/
    12px;
  line-height: 16px;
  font-weight: 400;
  /*!rtl:remove*/
  letter-spacing: -0.03em;
  color: #697484;
  text-decoration: underline
}

.spacer-break {
    display: block;
    line-height: 8px
}

.spacer-break::before {
  content: " ";
  display: block;
  opacity: 0;
  margin-top: 10px;
}

.desktop-view .spacer-break {
  line-height:
    /*!rtl:12px*/
    10px
}

.campaign-tabs-holder {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  display: flex;
  padding-top: 4px;
  overflow: hidden;
  z-index: 1
}

.campaign-tabs-holder-mobile {
  justify-content: center;
  padding-inline-start: 16px;
  padding-inline-end: 16px
}

.campaign-tabs-holder-desktop {
  padding-inline-start: 8px;
  padding-inline-end: 8px
}

@media(min-width: 536px) {
  .campaign-tabs-holder-desktop {
    padding-inline-start: 14px;
    padding-inline-end: 14px
  }
}

.campaign-tabs {
  display: flex;
  background: #e7e8ed;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px
}

.campaign-tab {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 500;
  display: block;
  height: 40px;
  color: #49505b;
  background: rgba(0, 0, 0, 0);
  border: 0
}

.campaign-tab:hover {
  color: #222832
}

.campaign-tab.active {
  position: relative;
  color: #222832;
  background: #fff;
  box-shadow: 0 4px 8px rgba(57, 58, 63, .13);
  pointer-events: none
}

.campaign-tab.active::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  transform: translateY(50%);
  height: 8px;
  background: #3371e6;
  border-radius: 4px;
  z-index: -1
}

.campaign-tab-mobile {
  padding: 0 12px
}

.campaign-tab-desktop {
  padding: 0 14px
}

.campaign-meter {
  position: relative;
  height: 12px;
  background: #ebf1fc;
  border-radius: 2px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: -webkit-radial-gradient(white, black)
}

.campaign-meter-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  background: #3371e6;
  transition: transform .5s ease-in-out, background .3s .5s ease-in-out;
  z-index: 2
}

.campaign-meter-progress-increase {
  background: rgba(51, 113, 230, .5);
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: 100%;
  transition: transform .5s ease-in-out, background .3s .5s ease-in-out
}

.campaign-meter-hidden {
  transform: translate3d(-100%, 0 0)
}

.campaign-meter-done {
  background: #00c07b
}

.faq-links-mobile {
  text-align: start;
  margin-inline-start: -4px
}

.faq-links-desktop {
  display: flex;
  flex-direction: column
}

@media(min-width: 1128px) {
  .has-campaign .faq-links-desktop {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start
  }
}

.faq-link-item {
  display: flex;
  margin-top: 8px
}

.faq-link-item:first-child {
  margin-top: 0
}

.faq-link-item-mobile {
  text-align: left;
  text-align: start;
  flex-direction: column
}

.faq-link-item-desktop {
  justify-content: center
}

@media(min-width: 1128px) {
  .has-campaign .faq-link-item-desktop {
    margin-top: 0
  }
}

.faq-link:focus {
  border-radius: 2px
}

.faq-link-mobile {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  text-align: start;
  flex-shrink: 0
}

.faq-link-desktop {
  font-size:
    /*!rtl:11px*/
    12px;
  line-height: 18px;
  font-weight: 400;
  color: #fff;
  opacity: .8
}

.faq-link-desktop:hover, .faq-link-desktop:focus {
  opacity: 1
}

.faq-link-title {
  display: block;
  flex-grow: 1;
  text-overflow: ellipsis;
  overflow: hidden
}

.faq-link-icon {
  transition: transform .2s ease-in-out
}

.faq-link-text {
  overflow: hidden;
  text-overflow: ellipsis
}

.donation-form {
  height: 100%;
  position: relative;
  z-index: 1
}

.desktop-view .donation-form {
  height: auto
}

.modal-mobile {
  height: 100%
}

.modal-desktop {
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  inset: 0;
  z-index: 1010;
  overscroll-behavior-y: none;
  outline: 0;
  display: flex;
  align-items: flex-start
}

.maw-modal-close {
  display: block;
  top: 0;
  inset-inline-end: 0;
  color: #222832;
  padding: 0;
  border: 0;
  border-radius: 50%;
  z-index: 3050
}

.modal-close-mobile {
  position: absolute;
  width: 28px;
  height: 28px;
  font-size: 18px;
  background: #f7fafd;
  margin: 10px
}

.modal-close-desktop {
  position: fixed;
  width: 32px;
  height: 32px;
  font-size: 20px;
  background: #e7e8ed;
  margin: 12px;
  opacity: .8
}

.modal-close-desktop:hover {
  opacity: .9
}

.modal-close-desktop:active {
  opacity: .7
}

.modal-close-desktop[data-focus-visible-added]:focus {
  opacity: 1;
  background: #fff;
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px #d3e1fb
}

.rtg-modal-enter {
  opacity: 0
}

.rtg-modal-exit {
  opacity: 1
}

.rtg-modal-enter-active {
  opacity: 1;
  transition: opacity .15s linear
}

.rtg-modal-exit-active {
  opacity: 0;
  transition: opacity .1s linear
}

.widget {
  display: flex;
  flex-direction: column
}

.widget-mobile {
  background-color: #fff;
  overflow-x: hidden;
  min-height: 100%
}

.is-mobile-safari-16 .widget-mobile {
  min-height: calc(100% + 1px)
}

.widget-desktop {
  position: relative;
  min-height: 0;
  width: 100%;
  max-width: 376px;
  padding: 16px 8px;
  margin: auto
}

@media(min-width: 536px) {
  .widget-desktop {
    width: 360px;
    max-width: none;
    padding-inline-start: 0;
    padding-inline-end: 0
  }
}

@media(min-width: 536px) {
  .widget-desktop {
    width: 516px
  }
}

@media(min-width: 1128px) {
  .widget-desktop {
    width: 896px
  }
}

.widget-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  min-height: 0
}

@media(min-width: 1128px) {
  .widget-main-desktop {
    flex-direction: row
  }
}

.has-campaign .widget-main-desktop {
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(57, 58, 63, .22), 0 0 4px rgba(57, 58, 63, .04)
}

@media(min-width: 1128px) {
  .has-campaign .widget-main-desktop {
    border-radius: 0;
    box-shadow: none
  }
}

.widget-campaign {
  width: 100%;
  min-height: 0
}

.widget-campaign-desktop {
  position: relative
}

@media(min-width: 1128px) {
  .widget-campaign-desktop {
    width: 516px;
    margin-inline-end: 20px
  }
}

.widget-form {
  min-height: 0
}

.widget-form-mobile {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%
}

.widget-form-desktop {
  position: relative;
  flex-shrink: 0;
  flex-grow: 1
}

@media(min-width: 1128px) {
  .has-campaign .widget-form-desktop {
    width: 360px
  }
}

.widget-footer {
  min-height: 0;
  flex-shrink: 0
}

.widget-footer-mobile {
  position: relative;
  background-color: #fff;
  padding: 24px 20px 60px 20px;
  border-top: 1px solid #c7cdd6;
  margin-top: -20px
}

.widget-footer-desktop {
  flex-grow: 1;
  padding-top: 16px
}

.widget-footer-panel {
  display: flex;
  flex-direction: column-reverse
}

@media(min-width: 1128px) {
  .has-campaign .widget-footer-panel-desktop {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center
  }
}

.back-btn {
  width: 24px;
  height: 24px
}

.back-btn:hover {
  background-color: #e7e8ed
}

.back-btn:disabled {
  pointer-events: none
}

.back-btn.visually-disabled {
  color: #c7cdd6;
  cursor: default
}

.back-btn.visually-disabled:hover {
  background-color: rgba(0, 0, 0, 0)
}

.back-btn.visually-disabled[data-focus-visible-added]:focus {
  box-shadow: none
}

.dark-mode .back-btn:hover {
  background-color: #393a3f
}

.maw-modal-body {
  position: relative;
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 100px !important;
}

/* Ensure modal body occupies full height on dados pessoais step */
.flow-slide:nth-child(2) .maw-modal-body {
  min-height: calc(100vh - 200px) !important;
  height: calc(100vh - 200px) !important;
}

.fixed-container {
  width: 100%;
  max-width: var(--fixed-container-width-mobile);
  margin-inline-start: auto;
  margin-inline-end: auto
}

.desktop-view .fixed-container {
  max-width: var(--fixed-container-width-desktop)
}

@media(min-width: 1128px) {
  .desktop-view .fixed-container {
    max-width: 100%
  }
}

.px-body {
  padding-inline-start: 20px;
  padding-inline-end: 20px
}

@media(min-width: 536px) {
  .desktop-view .px-body {
    padding-inline-start: 32px;
    padding-inline-end: 32px
  }
}

.check-image {
  position: relative;
  width: 100%;
  max-width: 266px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(109, 141, 177, .5)
}

.check-image-numbers {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  margin-inline-start: 16px;
  margin-bottom: 16px;
  z-index: 1
}

.comment-btn {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  color: #222832;
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none;
  text-align: start
}

.comment-btn:disabled {
  pointer-events: none
}

.comment-btn-title {
  position: relative;
  flex-shrink: 0;
  transition: color .2s ease-in-out;
  padding-inline-end: 4px
}

.is-highlighted .comment-btn-title {
  color: #fff
}

.comment-btn-link {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: .15em;
  transition: color .2s ease-in-out;
  cursor: pointer
}

.comment-btn-link:hover {
  color: #49505b
}

.is-highlighted .comment-btn-link, .is-highlighted .comment-btn-link:hover, .is-highlighted .comment-btn-link:focus {
  color: #fff
}

.comment-highlight {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  transition: background .2s ease-in-out
}

.is-highlighted .comment-highlight {
  background: #3371e6
}

.price-control {
  display: block;
  width: 100%;
  font-family: 'Lato', var(--font-system);
  color: inherit;
  -webkit-text-fill-color: inherit;
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0
}

.price-control[data-focus-visible-added]:focus {
  box-shadow: none
}

.price-control::placeholder {
  font-family: 'Lato', var(--font-system)
    /*!rtl:IBM Plex Sans Arabic, IBM Plex Sans, var(--font-system)*/
  ;
  color: #697484;
  -webkit-text-fill-color: #697484;
  opacity: 1
}

.group-price-control .price-control {
  height: 52px;
  line-height: 52px
}

.group-price-control-hide-amount-presets .price-control {
  height: 56px;
  line-height: 56px
}

.group-frequency-control .price-control {
  height: 48px;
  line-height: 48px
}

.group-price-control-custom-amount .price-control-mobile {
  height: 44px;
  line-height: 44px
}

.group-price-control-custom-amount .price-control-desktop {
  height: 38px;
  line-height: 38px
}

.group-price-control {
  font-size: 24px;
  line-height: 36px;
  font-weight: 400;
  position: relative;
  display: flex;
  color: #3371e6;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c7cdd6, 0 1px 3px rgba(57, 58, 63, .1);
  border-radius: 99px;
  padding-inline-start: 16px;
  padding-inline-end: 6px
}

.group-price-control.focus {
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.group-price-control.has-error {
  color: #c61333;
  background-color: #fff2f2;
  box-shadow: inset 0 0 0 1px #eb5a68, 0 1px 3px rgba(57, 58, 63, .1)
}

.group-price-control.has-error.focus {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 3px rgba(235, 90, 104, .2)
}

.group-price-control-custom-amount {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 500;
  color: #222832;
  background: #ebf1fc;
  box-shadow: inset 0 0 0 2px #3371e6;
  padding-inline-start: 12px
}

.group-price-control-custom-amount.focus {
  background: #fff
}

.group-price-control-custom-amount.has-error {
  color: #222832;
  background: #fff2f2;
  box-shadow: inset 0 0 0 2px #eb5a68
}

.group-price-control-custom-amount.has-error.focus {
  color: #222832;
  background: #fff
}

.group-frequency-control {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  color: #3371e6;
  max-width: 100%;
  padding: 0 12px
}

.group-frequency-control.focus {
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #3371e6
}

.group-frequency-control.has-error {
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #eb5a68
}

.group-frequency-control.has-error.focus {
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #eb5a68
}

.currency-select-label {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  color: #697484
}

.group-price-control-custom-amount .currency-select-label {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400
}

.currency-select-arrow {
  color: #8791a1
}

.currency-select {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  opacity: .0001
}

.currency-select:hover~.currency-select-label {
  background: #f3f4fa;
  color: #49505b
}

.currency-select:hover~.currency-select-label .currency-select-arrow {
  color: #49505b
}

.group-price-control-custom-amount .currency-select:hover~.currency-select-label {
  background: rgba(0, 0, 0, 0)
}

.currency-select[data-focus-visible-added]:focus~.currency-select-label {
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.group-price-control-custom-amount .currency-select[data-focus-visible-added]:focus~.currency-select-label {
  background: rgba(0, 0, 0, 0)
}

.designation {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  position: relative;
  display: inline-block;
  vertical-align: top;
  max-width: 100%
}

.designation-select {
  opacity: .0001
}

.designation-select:hover~.designation-label .designation-text {
  color: #49505b
}

.designation-select[data-focus-visible-added]:focus~.designation-label {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #3371e6, 0 0 0 4px rgba(51, 113, 230, .2);
  border-radius: 2px
}

.flow {
  width: 100%;
  position: relative;
  background-color: #fff
}

.flow.dark-mode {
  background-color: #222832
}

.flow-mobile {
  display: flex;
  flex-grow: 1;
  min-height: 0
}

.flow-desktop {
  height: 640px;
  border-radius: 16px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 8px 16px rgba(57, 58, 63, .22), 0 0 4px rgba(57, 58, 63, .04);
  overflow: hidden;
  transition: 0s
}

@media(min-width: 1128px) {
  .flow-desktop {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }
}

.flow-desktop.dark-mode {
  transition: background-color .01s linear .25s
}

.has-campaign .flow-desktop {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none
}

@media(min-width: 1128px) {
  .has-campaign .flow-desktop {
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(57, 58, 63, .22), 0 0 4px rgba(57, 58, 63, .04)
  }
}

.flow-slide {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateX(0);
  opacity: 1;
}

.flow-slide.flow-slide-hidden {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.flow-slide.flow-slide-entering {
  transform: translateX(100%);
  opacity: 0;
}

.flow-slide.flow-slide-entering.flow-slide-entering-active {
  transform: translateX(0);
  opacity: 1;
}

.flow-slide-mobile {
  flex-grow: 1;
  min-height: 0
}

.has-campaign .flow-slide-mobile {
  border-top: 1px solid #c7cdd6
}

.flow-slide-desktop {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  will-change: transform
}

.has-campaign .flow-slide-desktop {
  border-top: 1px solid #c7cdd6
}

@media(min-width: 1128px) {
  .has-campaign .flow-slide-desktop {
    border-top: 0
  }
}

.flow-screen {
  width: 100%;
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column
}

.dark-mode-screen {
  color: #fff;
  background-color: #222832
}

.flow-buttons {
  display: flex;
  flex-wrap: wrap
}

.flow-buttons-mobile {
  margin-bottom: 16px
}

.flow-buttons-desktop {
  justify-content: center;
  margin-bottom: 8px
}

@media(min-width: 1128px) {
  .has-campaign .flow-buttons-desktop {
    flex-direction: row;
    align-items: start;
    margin-bottom: 0
  }
}

.flow-button {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}

.flow-button-mobile {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  color: #222832
}

.flow-button-desktop {
  font-size:
    /*!rtl:11px*/
    12px;
  line-height: 18px;
  font-weight: 500;
  max-width: 100%;
  color: #fff;
  text-decoration: none;
  opacity: .9
}

.flow-button-desktop:hover, .flow-button-desktop:focus {
  color: #fff;
  opacity: 1
}

.flow-button-divider-mobile {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  color: #222832;
  margin: 0 6px
}

.flow-button-divider-desktop {
  font-size:
    /*!rtl:11px*/
    12px;
  line-height: 18px;
  font-weight: 400;
  color: #fff;
  opacity: .8;
  margin: 0 12px
}

.maw-modal-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 3;
  min-height: 0;
  flex-shrink: 0;
}

.footer-mobile {
  padding: 24px 20px 60px 20px
}

.footer-desktop {
  padding: 0 20px 28px 20px
}

@media(min-width: 536px) {
  .footer-desktop {
    padding-inline-start: 32px;
    padding-inline-end: 32px
  }
}

.frequency-hint-side {
  position: absolute;
  bottom: 100%;
  inset-inline-start: 100%;
  width: 96px;
  padding-bottom: 35px;
  margin-inline-start: 16px;
  margin-bottom: -178px
}

.frequency-hint-side-text {
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
  font-family: "Hand", cursive, var(--font-system)
}

.frequency-hint-side-arrow {
  position: absolute;
  bottom: 0;
  inset-inline-end: 6px
}

.maw-modal-header {
  position: relative;
  min-height: 0;
  flex-shrink: 0;
  display: flex
}

.dark-mode .maw-modal-header {
  border-bottom: 1px solid #49505b
}

.header-mobile {
  flex-direction: column
}

.header-desktop {
  border-bottom: 1px solid #c7cdd6;
  transition: border .01s linear .25s
}

.header-aside {
  flex-shrink: 0;
  line-height: 20px;
  padding-top: 20px;
  padding-bottom: 20px
}

.header-aside:first-child {
  padding-inline-start: 16px
}

.header-aside:last-child {
  padding-inline-end: 16px
}

.header-company {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 7px 44px;
  background-color: #fff;
  border-bottom: 1px solid #c7cdd6
}

.dark-mode .header-company {
  display: none
}

.header-company-logo {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 32px
}

.header-company-name {
  font-size: 16px;
  line-height:
    /*!rtl:28px*/
    20px;
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden
}

.maw-header-main {
  flex-grow: 1;
  text-align: center
}

.maw-header-main-mobile {
  padding: 20px 20px
}

.maw-header-main-desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  padding: 0 4px
}

.maw-header-main-full {
  height: auto;
  padding: 16px
}

.search-select {
  position: relative
}

.search-select-double-active .search-select-input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

.search-select-input-active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

.search-select-input-offset-start {
  padding-inline-start: 46px
}

.search-select-label-offset-start.is-floating {
  inset-inline-start: 46px
}

.search-select-input-offset-end {
  padding-inline-end: 64px
}

.search-select-input-with-arrow {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkw4IDEwTDEyIDYiIHN0cm9rZT0iIzY5NzQ4NCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-inline-end: 44px
}

.search-select-input-with-arrow.search-select-input-active {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxOSAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjk3MDEgMTBMOS41MTkgNkw1LjA2Nzg3IDEwIiBzdHJva2U9IiM2OTc0ODQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K")
}

.search-select-input-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%)
}

.search-select-input-icon svg, .search-select-input-icon img {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.search-select-dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #c7cdd6;
  border-top: 0;
  box-shadow: 0 4px 8px rgba(57, 58, 63, .13);
  border-radius: 0 0 8px 8px;
  max-height: 286px;
  z-index: 1000
}

.search-select-crypto .search-select-dropdown {
  max-height: 385px
}

.search-select-double .search-select-dropdown {
  max-height: 130px
}

.search-select-option {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height:
    /*!rtl:22px*/
    20px;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  padding: 10px 13px;
  min-height: 40px;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none
}

.search-select-option:hover, .search-select-option:focus, .search-select-option.search-select-option-highlighted {
  background: #f3f4fa
}

.rtg-clear-button-enter {
  opacity: 0;
  width: 0
}

.rtg-clear-button-enter-active {
  opacity: 1;
  width: 16px;
  transition: all .1s ease-in
}

.rtg-clear-button-exit {
  opacity: 1;
  width: 16px
}

.rtg-clear-button-exit-active {
  opacity: 0;
  width: 0;
  transition: all .1s ease-in
}

.thank-you-badge-mobile {
  padding-top: 13px;
  padding-bottom: 13px
}

.thank-you-badge-mobile.thank-you-badge-legacy {
  border-top: 1px solid #88d7ba;
  border-bottom: 1px solid #88d7ba;
  margin-top: -1px
}

.thank-you-badge-desktop {
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: inset 0px -8px 17px -8px #ace3d0
}

.has-campaign .thank-you-badge-desktop {
  padding-top: 9px;
  padding-bottom: 9px;
  box-shadow: none
}

.has-campaign .thank-you-badge-desktop.thank-you-badge-legacy {
  border-top: 1px solid #88d7ba;
  border-bottom: 1px solid #88d7ba;
  margin-top: -1px
}

@media(min-width: 1128px) {
  .has-campaign .thank-you-badge-desktop {
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: inset 0px -8px 17px -8px #ace3d0
  }

  .has-campaign .thank-you-badge-desktop.thank-you-badge-legacy {
    border: 0;
    margin-top: 0
  }
}

.thank-you-badge-animated {
  opacity: 0;
  animation: thank-you-badge-fade-in .3s linear .2s forwards
}

@keyframes thank-you-badge-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.fake-progress {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: #00c07b
}

.fake-progress-mobile {
  animation: fake-progress-slide-down .5s linear forwards
}

@keyframes fake-progress-slide-down {
  0% {
    height: 4px;
    opacity: 1
  }

  40% {
    height: 48px;
    opacity: 1
  }

  100% {
    height: 48px;
    opacity: 0
  }
}

.fake-progress-desktop {
  transform: translate3d(0, 60px, 0);
  animation: fake-progress-slide-up .5s linear forwards
}

.fake-progress-desktop.has-tribute {
  transform: translate3d(0, 100px, 0);
  animation: fake-progress-tribute-slide-up .5s linear forwards
}

@keyframes fake-progress-slide-up {
  0% {
    height: 4px;
    transform: translate3d(0, 60px, 0);
    opacity: 1
  }

  40% {
    height: 40px;
    transform: translate3d(0, 0, 0);
    opacity: 1
  }

  100% {
    height: 40px;
    transform: translate3d(0, 0, 0);
    opacity: 0
  }
}

@keyframes fake-progress-tribute-slide-up {
  0% {
    height: 4px;
    transform: translate3d(0, 100px, 0);
    opacity: 1
  }

  40% {
    height: 40px;
    transform: translate3d(0, 0, 0);
    opacity: 1
  }

  100% {
    height: 40px;
    transform: translate3d(0, 0, 0);
    opacity: 0
  }
}

.star {
  position: absolute;
  color: #0c9c5e;
  transform: scale(0);
  transform-origin: center
}

.star-1 {
  inset-inline-start: 15px;
  top: 7px
}

.star-2 {
  inset-inline-start: 39px;
  bottom: 6px
}

.star-3 {
  inset-inline-end: 32px;
  bottom: 4px
}

.star-4 {
  inset-inline-end: 16px;
  top: 7px
}

.star-v1, .star-v2 {
  width: 14px;
  height: 14px
}

.star-sm-v1, .star-sm-v2 {
  width: 10px;
  height: 10px
}

.star-v1 {
  animation: star-v1-bounce 4.3s linear forwards;
  animation-delay: .4s
}

.star-v2 {
  animation: star-v2-bounce 3.9s linear forwards;
  animation-delay: .6s
}

.star-sm-v1 {
  animation: star-sm-v1-bounce 4s linear forwards;
  animation-delay: .8s
}

.star-sm-v2 {
  animation: star-sm-v2-bounce 3.4s linear forwards;
  animation-delay: 1s
}

@keyframes star-v1-bounce {
  0% {
    transform: scale(0)
  }

  13.95% {
    transform: scale(1)
  }

  25.58% {
    transform: scale(1)
  }

  41.86% {
    transform: scale(0.6)
  }

  53.49% {
    transform: scale(0.6)
  }

  67.44% {
    transform: scale(1)
  }

  72.09% {
    transform: scale(1)
  }

  81.39% {
    transform: scale(0.6)
  }

  86.04% {
    transform: scale(0.6)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes star-v2-bounce {
  0% {
    transform: scale(0)
  }

  15.38% {
    transform: scale(1)
  }

  20.51% {
    transform: scale(1)
  }

  33.33% {
    transform: scale(0.6)
  }

  46.15% {
    transform: scale(0.6)
  }

  61.54% {
    transform: scale(1)
  }

  69.23% {
    transform: scale(1)
  }

  79.49% {
    transform: scale(0.6)
  }

  84.62% {
    transform: scale(0.6)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes star-sm-v1-bounce {
  0% {
    transform: scale(0)
  }

  10% {
    transform: scale(1)
  }

  20% {
    transform: scale(1)
  }

  30% {
    transform: scale(0.6)
  }

  42.5% {
    transform: scale(0.6)
  }

  52.5% {
    transform: scale(1)
  }

  65% {
    transform: scale(1)
  }

  80% {
    transform: scale(0.6)
  }

  90% {
    transform: scale(0.6)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes star-sm-v2-bounce {
  0% {
    transform: scale(0)
  }

  11.76% {
    transform: scale(1)
  }

  32.35% {
    transform: scale(0.6)
  }

  50% {
    transform: scale(1)
  }

  61.76% {
    transform: scale(0.6)
  }

  76.47% {
    transform: scale(1)
  }

  100% {
    transform: scale(1)
  }
}

@media(prefers-reduced-motion) {
  .star-v1, .star-v2, .star-sm-v1, .star-sm-v2 {
    transform: scale(1);
    animation: none
  }

  .thank-you-badge-animated {
    opacity: 1;
    animation: none
  }

  .fake-progress {
    display: none
  }
}

.tribute-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #fff4cd;
  text-align: center;
  cursor: default
}

.tribute-badge-mobile {
  min-height: 48px;
  padding: 11px 8px;
  border-top: 1px solid #edcfac;
  border-bottom: 1px solid #edcfac;
  margin-top: -1px
}

.tribute-badge-desktop {
  flex-shrink: 0;
  width: 100%;
  min-height: 40px;
  padding: 7px 8px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: inset 0 -8px 17px -8px #edcfac
}

.has-campaign .tribute-badge-desktop {
  border-radius: 0;
  border-top: 1px solid #edcfac;
  border-bottom: 1px solid #edcfac;
  box-shadow: none;
  margin-top: -1px
}

@media(min-width: 1128px) {
  .has-campaign .tribute-badge-desktop {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-top: 0;
    border-bottom: 0;
    box-shadow: inset 0 -8px 17px -8px #edcfac;
    margin-top: 0
  }
}

.payment-loader {
  z-index: 2000
}

.payment-loader-mobile::before {
  content: "";
  position: absolute;
  bottom: 20px;
  inset-inline-start: 0;
  width: 100%;
  height: 0;
  border-bottom: 1px solid #c7cdd6
}

.tel-input {
  /*!rtl:remove*/
  padding-inline-start: 60px;
  /*!rtl:raw:padding-inline-end: 60px;*/
}

.tel-input-label.is-floating {
  inset-inline-start: 60px
}

.country-select-field {
  position: absolute;
  inset-inline-start: 6px;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  width: 48px;
  font-size: 16px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0);
  color: inherit;
  padding: 4px 0 4px 8px;
  border: 0;
  margin: 0;
  z-index: 5
}

.country-select-field:hover {
  background-color: #f3f4fa
}

.country-select-field:disabled {
  pointer-events: none
}

.country-select-dropdown {
  position: absolute;
  inset-inline: 6px;
  bottom: 100%;
  max-height: 182px;
  margin-bottom: -8px;
  box-shadow: 0 4px 8px rgba(57, 58, 63, .13);
  z-index: 5;
  text-align: left;
  border-radius: 8px;
  border: 1px solid #c7cdd6;
  background-color: #fff
}

.country-select-option {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height:
    /*!rtl:22px*/
    20px;
  font-weight: 400;
  display: flex;
  padding: 8px 14px;
  cursor: pointer
}

.country-select-option:hover {
  background: #f3f4fa
}

.country-select-option-selected {
  background: #f3f4fa
}

.bell-wrap {
  position: relative;
  width: 80px;
  margin-inline-start: auto;
  margin-inline-end: auto
}

.bell {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  margin-inline-start: 19px;
  margin-top: 6px;
  animation: bell-bounce 1.3s ease-in 3;
  animation-delay: .7s;
  transform-origin: 50% 50%
}

.bell-shadow {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  margin-inline-start: 10px;
  margin-top: 6px;
  animation: bell-bounce 1.3s ease-in 3;
  animation-delay: .7s;
  transform-origin: 50% 50%
}

.bell-tongue {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  margin-inline-start: 33px;
  margin-top: 42px;
  animation: bell-tongue-bounce 1.3s ease-in 3;
  animation-delay: .7s;
  transform-origin: 50% 50%
}

.bell-heart {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  margin-inline-end: 12px;
  margin-top: 4px;
  animation: bell-heart-bounce 1.3s ease-in 3;
  animation-delay: .7s;
  transform-origin: 50% 50%
}

@media(prefers-reduced-motion) {
  .bell, .bell-shadow, .bell-tongue, .bell-heart {
    animation: none
  }
}

@keyframes bell-bounce {
  0% {
    transform: rotate(0)
  }

  20% {
    transform: rotate(15deg)
  }

  28% {
    transform: rotate(-15deg)
  }

  36% {
    transform: rotate(8deg)
  }

  44% {
    transform: rotate(-3deg)
  }

  52% {
    transform: rotate(2deg)
  }

  60% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(0deg)
  }
}

@keyframes bell-tongue-bounce {
  0% {
    transform: translate3d(0, 0, 0)
  }

  20% {
    transform: translate3d(-3px, 0, 0)
  }

  28% {
    transform: translate3d(3px, 0, 0)
  }

  36% {
    transform: translate3d(-2px, 0, 0)
  }

  44% {
    transform: translate3d(1px, 0, 0)
  }

  52% {
    transform: translate3d(-1px, 0, 0)
  }

  55% {
    transform: translate3d(0, 0, 0)
  }

  100% {
    transform: translate3d(0, 0, 0)
  }
}

@keyframes bell-heart-bounce {
  0% {
    transform: translate3d(0, 0, 0)
  }

  20% {
    transform: translate3d(0, 3px, 0)
  }

  28% {
    transform: translate3d(0, -6px, 0)
  }

  36% {
    transform: translate3d(0, 1px, 0)
  }

  44% {
    transform: translate3d(0, -1px, 0)
  }

  52% {
    transform: translate3d(0, 0, 0)
  }

  100% {
    transform: translate3d(0, 0, 0)
  }
}

.thank-you-screen-fade-in {
  opacity: 0;
  animation: thank-you-screen-fade-in .3s linear .2s forwards
}

@keyframes thank-you-screen-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@media(prefers-reduced-motion) {
  .thank-you-screen-fade-in {
    opacity: 1;
    animation: none
  }
}

.rtg-thank-you-description-enter {
  opacity: 0;
  translate: 0 -10px
}

.rtg-thank-you-description-enter-active {
  opacity: 1;
  translate: 0 0;
  transition: opacity .1s ease-out, translate .2s ease-out
}

.rtg-thank-you-description-exit {
  opacity: 1;
  translate: 0 0
}

.rtg-thank-you-description-exit-active {
  opacity: 0;
  translate: 0 -10px;
  transition: opacity .1s ease-out, translate .2s ease-out
}

.rtg-pdu-display-default-enter {
  opacity: 0;
  max-height: 140px
}

.rtg-pdu-display-default-enter-active {
  opacity: 1;
  max-height: 348px;
  transition: max-height .25s cubic-bezier(0.47, 0, 0.23, 1.38), opacity .25s cubic-bezier(0.47, 0, 0.23, 1.38)
}

.rtg-pdu-display-default-exit {
  opacity: 1;
  max-height: 348px
}

.rtg-pdu-display-default-exit-active {
  opacity: 0;
  max-height: 140px;
  transition: max-height .25s cubic-bezier(0.47, 0, 0.23, 1.38), opacity .25s cubic-bezier(0.47, 0, 0.23, 1.38)
}

.rtg-pdu-display-sharing-enter {
  opacity: 0;
  max-height: 276px
}

.rtg-pdu-display-sharing-enter-active {
  opacity: 1;
  max-height: 348px;
  transition: max-height .25s cubic-bezier(0.47, 0, 0.23, 1.38), opacity .25s cubic-bezier(0.47, 0, 0.23, 1.38)
}

.rtg-pdu-display-sharing-exit {
  opacity: 1;
  max-height: 348px
}

.rtg-pdu-display-sharing-exit-active {
  opacity: 0;
  max-height: 276px;
  transition: max-height .25s cubic-bezier(0.47, 0, 0.23, 1.38), opacity .25s cubic-bezier(0.47, 0, 0.23, 1.38)
}

.rtg-amount-suggestions-enter {
  opacity: 0;
  transform: translate3d(0, -12px, 0)
}

.rtg-amount-suggestions-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: all .15s ease-in
}

.rtg-amount-suggestions-exit {
  opacity: 1;
  transform: translate3d(0, 0, 0)
}

.rtg-amount-suggestions-exit-active {
  opacity: 0;
  transform: translate3d(0, -12px, 0);
  transition: all .15s ease-out
}

.rtg-amount-hints-enter {
  opacity: 0;
  max-height: 152px;
  transform: translate3d(0, -12px, 0)
}

.rtg-amount-hints-enter-active {
  opacity: 1;
  max-height: 218px;
  transform: translate3d(0, 0, 0);
  transition: max-height .15s ease-in, transform .15s ease-in, opacity .25s ease-in
}

.rtg-amount-hints-exit {
  opacity: 1;
  max-height: 218px;
  transform: translate3d(0, 0, 0)
}

.rtg-amount-hints-exit-active {
  opacity: 0;
  max-height: 152px;
  transform: translate3d(0, -12px, 0);
  transition: max-height .15s ease-out, transform .15s ease-out, opacity .1s ease-out
}

.rtg-amount-hints-hide-amount-presets-enter {
  opacity: 0;
  max-height: 66px;
  transform: translate3d(0, -12px, 0)
}

.rtg-amount-hints-hide-amount-presets-enter-active {
  opacity: 1;
  max-height: 218px;
  transform: translate3d(0, 0, 0);
  transition: max-height .15s ease-in, transform .15s ease-in, opacity .25s ease-in
}

.rtg-amount-hints-hide-amount-presets-exit {
  opacity: 1;
  max-height: 218px;
  transform: translate3d(0, 0, 0)
}

.rtg-amount-hints-hide-amount-presets-exit-active {
  opacity: 0;
  max-height: 66px;
  transform: translate3d(0, -12px, 0);
  transition: max-height .15s ease-out, transform .15s ease-out, opacity .1s ease-out
}

.amount-hint {
  position: relative;
  border-top: 1px solid #c7cdd6
}

.amount-hint:first-child {
  border-top: 0;
  border-radius: 8px 8px 0 0
}

.amount-hint:hover {
  background: #f3f4fa
}

.amount-hint-checked {
  border-top-color: rgba(0, 0, 0, 0);
  z-index: 2
}

.amount-hint-checked+.amount-hint, .amount-hint-checked+.custom-amount-btn {
  border-top-color: rgba(0, 0, 0, 0)
}

.amount-hint-label {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  display: block;
  position: relative;
  color: #222832;
  -webkit-user-select: none;
  user-select: none
}

.amount-hint-label-mobile {
  height: 65px;
  padding: 10px 11px
}

.amount-hint-label-desktop {
  height: 59px;
  padding: 5px 11px 9px 11px
}

.amount-hint-radio {
  opacity: .0001;
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer
}

.amount-hint-radio:checked {
  z-index: 2;
  cursor: default
}

.amount-hint-radio~.amount-hint-label::before {
  content: none;
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  z-index: 1
}

.amount-hint-radio[data-focus-visible-added]:focus~.amount-hint-label::before {
  content: "";
  box-shadow: inset 0 0 0 1px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.amount-hint-radio:checked~.amount-hint-label::before {
  content: "";
  background: #ebf1fc;
  box-shadow: inset 0 0 0 2px #3371e6
}

.amount-hint-radio[data-focus-visible-added]:checked:focus~.amount-hint-label::before {
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.amount-hint-radio.has-error:checked~.amount-hint-label::before {
  background: #fff2f2;
  box-shadow: inset 0 0 0 2px #eb5a68
}

.amount-hint-radio.has-error[data-focus-visible-added]:checked:focus~.amount-hint-label::before {
  box-shadow: inset 0 0 0 2px #eb5a68, 0 0 0 3px rgba(235, 90, 104, .2)
}

.custom-amount-btn {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #222832;
  background: #fff;
  padding: 0 11px;
  border: 0;
  border-top: 1px solid #c7cdd6;
  border-radius: 0 0 8px 8px;
  margin: 0;
  -webkit-user-select: none;
  user-select: none
}

.custom-amount-btn:hover {
  background: #f3f4fa
}

.custom-amount-btn[data-focus-visible-added]:focus {
  border-top-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 1px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2);
  z-index: 1
}

.custom-amount-btn:disabled {
  pointer-events: none
}

.custom-amount-btn-mobile {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  height: 43px
}

.custom-amount-btn-desktop {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 400;
  height: 37px
}

.amount-options {
  display: flex;
  flex-wrap: wrap;
  margin: -5px
}

.amount-option {
  flex-shrink: 0;
  position: relative;
  width: 33.3333333333%;
  padding: 5px
}

.amount-option-label {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222832;
  font-family: 'Lato', var(--font-system);
  text-align: center;
  background: #fff;
  padding: 0 2px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px #c7cdd6;
  -webkit-user-select: none;
  user-select: none
}

.amount-option-label-mobile {
  height: 44px
}

.amount-option-label-desktop {
  height: 40px
}

.amount-option-radio {
  opacity: .0001;
  position: absolute;
  inset: 2px;
  cursor: pointer
}

.amount-option-radio:checked {
  pointer-events: none
}

.amount-option-radio:hover~.amount-option-label {
  background: #f3f4fa
}

.amount-option-radio[data-focus-visible-added]:focus~.amount-option-label {
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.amount-option-radio:checked~.amount-option-label {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 500;
  background: #ebf1fc;
  box-shadow: inset 0 0 0 2px #3371e6;
  pointer-events: none
}

.amount-option-radio[data-focus-visible-added]:checked:focus~.amount-option-label {
  background: #ebf1fc;
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.donor-rating-banner-wrapper {
  top: 16px;
  inset-inline-start: 0;
  opacity: 1;
  z-index: 3051
}

.donor-rating-banner-wrapper-mobile {
  position: fixed
}

.donor-rating-banner-wrapper-desktop {
  position: absolute
}

.donor-rating-banner {
  box-shadow: 0 2px 6px 0 rgba(57, 58, 63, .1);
  height: 38px
}

.donor-rating-label strong {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap
}

.rtg-donor-rating-mobile-enter {
  opacity: 0;
  top: 0
}

.rtg-donor-rating-mobile-enter-active {
  opacity: 1;
  top: 16px;
  transition: opacity .1s ease-out, top .1s ease-out
}

.rtg-donor-rating-mobile-enter-done {
  opacity: 1;
  top: 16px
}

.rtg-donor-rating-mobile-exit {
  opacity: 1;
  top: 16px
}

.rtg-donor-rating-mobile-exit-active {
  opacity: 0;
  top: 0;
  transition: opacity .1s ease-in, top .1s ease-in
}

.rtg-donor-rating-desktop-enter {
  opacity: 0;
  top: 0
}

.rtg-donor-rating-desktop-enter-active {
  opacity: 1;
  top: 24px;
  transition: opacity .1s ease-out, top .1s ease-out
}

.rtg-donor-rating-desktop-enter-done {
  opacity: 1;
  top: 24px
}

.rtg-donor-rating-desktop-exit {
  opacity: 1;
  top: 24px
}

.rtg-donor-rating-desktop-exit-active {
  opacity: 0;
  top: 0;
  transition: opacity .1s ease-in, top .1s ease-in
}

.donor-rating-upsell-wrapper {
  opacity: 0;
  margin-top: -54px;
  visibility: hidden;
  transition: margin-top .15s ease-out, visibility .15s, opacity .15s ease-out
}

.donor-rating-upsell-wrapper.is-visible {
  opacity: 1;
  margin-top: 0;
  visibility: visible
}

.frequency {
  position: relative
}

.frequency-frame {
  box-shadow: inset 0 0 0 1px #c7cdd6;
  border-radius: 99px
}

.frequency-btn {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  max-width: 100%;
  color: #222832;
  text-align: center;
  background: rgba(0, 0, 0, 0);
  padding: 0 5px;
  border: 0;
  border-radius: 99px;
  margin: 0;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none
}

.frequency-btn:not(.frequency-btn-selected):hover~.frequency-frame {
  background: #f3f4fa
}

.frequency-btn[data-focus-visible-added]:focus {
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.frequency-btn.frequency-btn-selected {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 500;
  background: #fcebf1;
  box-shadow: inset 0 0 0 2px #e6337d;
  z-index: 2;
  cursor: default
}

.frequency-btn[data-focus-visible-added].frequency-btn-selected:focus {
  background: #fcebf1;
  box-shadow: inset 0 0 0 2px #e6337d, 0 0 0 3px rgba(230, 51, 125, .2)
}

.frequency-btn[data-focus-visible-added]:focus {
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #e6337d, 0 0 0 3px rgba(230, 51, 125, .2)
}

.frequency-btn-mobile {
  height: 44px
}

.frequency-btn-desktop {
  height: 40px
}

.flying-heart {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 14px;
  height: 14px;
  visibility: hidden
}

.rtg-flying-heart-enter {
  visibility: visible
}

.rtg-flying-heart-enter-active {
  visibility: visible;
  animation: flying-heart-move 2.5s forwards linear;
  animation-delay: .05s
}

@keyframes flying-heart-move {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
    opacity: 1
  }

  5% {
    transform: translate3d(0, 0, 0) scale(1.7)
  }

  60% {
    transform: translate3d(0, -65px, 0) rotate(25deg) scale(1.7)
  }

  80% {
    transform: translate3d(0, -80px, 0) rotate(0) scale(1.7);
    opacity: 1
  }

  100% {
    transform: translate3d(0, -95px, 0) rotate(0) scale(2);
    opacity: 0
  }
}

.frequency-hint-top {
  height: 32px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAABACAMAAABySgJPAAAAk1BMVEVHcEzz6JD57pP775T88JT775T675P78JT775P675P575T88ZX875b87pX68JT78JT675L78ZT78ZX36I7//6L77pP575P675T67pP67JH38Jb67Jb/85b88JT/85b875P98JT68ZH/54v47pP57ZP78ZP67pP36Jb78JL57ZL775X67pX47JH575H58JL68ZP68ZVocbFcAAAAMXRSTlMAFy1DWZCykIVwhm9kb3qbp5uFIgtOZKecOCI4FnosZJA4C3uRhW8ikFmFe3BkWW9vZKS2jQAAA+9JREFUeAHt3edi4joQBeDRSBmbKtlYFBOW7b29/9NdF3ACePfibMPy+f6lB3HGVgVqp1hrcydQieJ4NJ5MprPZPLZWDlySpMUnjda8UBldI1OKWWtvlrNZHFvr5OecXa3Xrvw+sFEcz5bGa2aV0e9lBC65JCoCbrzesFJXpTvnrdbGVHXye0OL8M/K6OeKfoN7OYWcT4zRBa7lqpLRCaWYg0l3chSlD3aTK+zSR5Kakz/GxnPjt3lGv8DK1cDZkty6JruT0tQUvC5tuLRQhfxZrio5P9jqDviBOnrcmytwSRe8MWZa/C9p4ddrIpp7VvQk+0eNVNT0tL6DVxZc03o0Hj9P5EaAq+O8O2T5EOTNs8KLJrSmNKvEFVv7a1eFuDQrHMuNC82dMqvytan+z+o+0bUIXLz0nFFHi7K5douFtLmhaxm4uyrg5pjlQ5CjPj5J1kZVLSzL9G2Z80MRqEXdSyzyHyXy/1b0FEzKyT8FUN4Q5o/mZKr0b3yVfSftFHX0kl5ZuTUAzsaPJmWyMvnTXerkxAvqSNFrmcsNA6iSrznPqtz7aZP6JXWVWdEC0Acumhu91Rnds99FIjF15lb3AtAjLl5ucyIjK+rqpbwhgf5B5t8+YayqZElWAPpIU0f3d55eCUAfLamjd++Z9gLQRzF1xOOMvAD00Yo64rWijQD0ElM3+g1jHzAMpTfjd1siAegnT51o/yFXaeIEoIdWGXXysdpqs5dGkhyPruXPXmgz+ZTeWSc3CeAzdfJaVsYbK2Lvxq/2xuPMZYgwWlXHE8Xb5VoAemq9pVZZc1w+slYO1jlrKwD99YHavBWAEH3O2gelACFaK8R9OGC9RdyHDB14JwChWe9/0IEXgOCsybV24N8JQHgy0ySf6QELQHhcewdeC0DgvmR4MfcBwgz8KwEI3poHN+0OmIG3MgQAX6kgQwCwXuB9mIYCIjWUaXeAZUaljQAE7+tQpt0BHNPBXgDCtlbY7T4UkGbUeC2DAXj1awEImadHXgpA0GtLj7EABL229NhGAEL1LaNTXgAC9ZXO7QUgSE7ThVcCocMgdVCrTIBB6oETgJDXlgY67Q54a6Z3AhAax9SOBcKFDZADmnYHbIA8YwQgHEmSGGpg2h36IHkkShu7ScPUvK4ws1KK2oU67Z5cJUp/m8mptJAkiZPb436xJSY/MjVtvL7AZxbqFP0NVnrIVc9U3dZa601d2jclU0pxQWvtjTHTJxWDS5LHWTMHurH5YXwyghZamzaTdrv0p5LurrjS7KpY+2OsM+o/pdSCmTe6bv5Dy0ZJ8tzORzVjjH/BfZCrAgH8jmKY3kgv6fL69F3ninrlPyRpQZHVx4+hAAAAAElFTkSuQmCC");
  background-size: 100% 32px;
  background-repeat: no-repeat;
  background-position: center
}

.frequency-hint-top-text {
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  font-family: "Hand", cursive, var(--font-system);
  letter-spacing: -0.01em
}

.double-img {
  position: relative;
  width: 197px;
  height: 80px
}

.double-img-user {
  position: absolute;
  z-index: 2;
  top: 0;
  inset-inline-start: 0;
  border-radius: 100%;
  transition: transform .3s ease-in-out
}

.enabled .double-img-user {
  transform: translate3d(30px, 0, 0);
  box-shadow: 4px 1px 5px 0 rgba(57, 58, 63, .13)
}

.double-img-plus {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .1126903553s ease-in-out;
  transition-delay: .1873096447s
}

.enabled .double-img-plus {
  opacity: 0;
  transition: opacity .1126903553s ease-in-out;
  transition-delay: 0s
}

.double-img-company {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  border-radius: 100%;
  transition: all .3s ease-in-out
}

.enabled .double-img-company {
  transform: translate3d(-30px, 0, 0)
}

.rtg-dtd-description-enter {
  opacity: 0;
  max-height: 0
}

.rtg-dtd-description-enter-active {
  transition: all .3s ease-in-out;
  opacity: 1;
  max-height: 200px;
  overflow: hidden
}

.rtg-dtd-description-exit {
  opacity: 1;
  max-height: 200px;
  overflow: hidden
}

.rtg-dtd-description-exit-active {
  transition: all .3s ease-in-out;
  opacity: 0;
  max-height: 0
}

.rtg-dtd-description-mobile-enter-active {
  opacity: 1;
  height: auto
}

.rtg-dtd-description-mobile-exit-active {
  opacity: 0;
  height: 0
}

.ideal-img-logo, .ideal-img-bank {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 1px solid #c7cdd6;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 44px;
  line-height: 44px
}

.ideal-img-logo {
  z-index: 2;
  transform: translateX(15px);
  box-shadow: 2px 0 4px rgba(0, 0, 0, .25)
}

.ideal-img-bank {
  z-index: 1;
  transform: translateX(-15px);
  color: #8791a1
}

.payment-option-list {
  box-shadow: 0px 3px 12px 0px rgba(57, 58, 63, .22), 0px 0px 1px 0px rgba(57, 58, 63, .14);
  z-index: 1000
}

.payment-option-list-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 43px;
  width: 100%;
  padding: 0 14px;
  border-top: 1px solid #e7e8ed
}

.payment-option-list-item::before {
  content: none;
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  z-index: 1
}

.payment-option-list-item:first-child {
  border-top: rgba(0, 0, 0, 0);
  border-radius: 7px 7px 0 0
}

.payment-option-list-item:last-child {
  border-radius: 0 0 7px 7px
}

.payment-option-list-item:hover {
  background-color: #f3f4fa
}

.payment-option-list-item[data-focus-visible-added]:focus {
  box-shadow: none;
  z-index: 1
}

.payment-option-list-item[data-focus-visible-added]:focus::before {
  content: "";
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #3371e6, 0 0 0 3px rgba(51, 113, 230, .25)
}

.payment-option-list-item:disabled {
  pointer-events: none
}

.payment-option-list-item-active {
  pointer-events: none;
  z-index: 2
}

.payment-option-list-item-active::before {
  content: "";
  background: #ebf1fc;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #3371e6
}

.payment-option-list-item-active[data-focus-visible-added]:focus::before {
  background: #ebf1fc;
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .25)
}

.payment-option-list-item-active {
  border-top-color: rgba(0, 0, 0, 0)
}

.payment-option-list-item-active+.payment-option-list-item {
  border-top-color: rgba(0, 0, 0, 0)
}

.payment-option-list-item-icon {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  width: 20px
}

.payment-option-list-item-icon svg {
  flex-shrink: 0
}

.rtg-fee-accordion-mobile-enter {
  max-height: 0;
  overflow: hidden
}

.rtg-fee-accordion-mobile-enter-active {
  max-height: 48px;
  transition: max-height .1s ease-out
}

.rtg-fee-accordion-mobile-exit {
  max-height: 48px
}

.rtg-fee-accordion-mobile-exit-active {
  max-height: 0;
  overflow: hidden;
  transition: max-height .1s ease-out
}

.pdu-panel {
  display: flex;
  flex-direction: column;
  min-height: 364px;
  color: #fff;
  background: #3371e6;
  border-radius: 12px
}

.pdu-panel-mobile {
  padding: 20px;
  margin-inline-start: -8px;
  margin-inline-end: -8px
}

.pdu-panel-desktop {
  padding: 16px;
  margin-inline-start: -16px;
  margin-inline-end: -16px
}

@media(min-width: 536px) {
  .pdu-panel-desktop {
    margin-inline-start: -28px;
    margin-inline-end: -28px
  }
}

.pdu-screen-fade-in {
  opacity: 0;
  animation: pdu-screen-fade-in .3s linear .2s forwards
}

@keyframes pdu-screen-fade-in {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@media(prefers-reduced-motion) {
  .pdu-screen-fade-in {
    opacity: 1;
    animation: none
  }
}

.pdu-confirm-btn {
  color: #fff;
  background: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 1px #fff
}

.pdu-confirm-btn:hover {
  background: rgba(255, 255, 255, .15)
}

.pdu-confirm-btn[data-focus-visible-added]:focus {
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #3371e6, 0 0 0 2px #fff
}

.pdu-skip-btn {
  color: #fff;
  background: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3)
}

.pdu-skip-btn:hover {
  background: rgba(255, 255, 255, .15)
}

.pdu-skip-btn[data-focus-visible-added]:focus {
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #3371e6, 0 0 0 2px #fff
}

.us-bank-account-receipt {
  -webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 97.3684210526% calc(100% - 7px), 94.7368421053% 100%, 92.1052631579% calc(100% - 7px), 89.4736842105% 100%, 86.8421052632% calc(100% - 7px), 84.2105263158% 100%, 81.5789473684% calc(100% - 7px), 78.9473684211% 100%, 76.3157894737% calc(100% - 7px), 73.6842105263% 100%, 71.0526315789% calc(100% - 7px), 68.4210526316% 100%, 65.7894736842% calc(100% - 7px), 63.1578947368% 100%, 60.5263157895% calc(100% - 7px), 57.8947368421% 100%, 55.2631578947% calc(100% - 7px), 52.6315789474% 100%, 50% calc(100% - 7px), 47.3684210526% 100%, 44.7368421053% calc(100% - 7px), 42.1052631579% 100%, 39.4736842105% calc(100% - 7px), 36.8421052632% 100%, 34.2105263158% calc(100% - 7px), 31.5789473684% 100%, 28.9473684211% calc(100% - 7px), 26.3157894737% 100%, 23.6842105263% calc(100% - 7px), 21.0526315789% 100%, 18.4210526316% calc(100% - 7px), 15.7894736842% 100%, 13.1578947368% calc(100% - 7px), 10.5263157895% 100%, 7.8947368421% calc(100% - 7px), 5.2631578947% 100%, 2.6315789474% calc(100% - 7px), 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 100% 100%, 97.3684210526% calc(100% - 7px), 94.7368421053% 100%, 92.1052631579% calc(100% - 7px), 89.4736842105% 100%, 86.8421052632% calc(100% - 7px), 84.2105263158% 100%, 81.5789473684% calc(100% - 7px), 78.9473684211% 100%, 76.3157894737% calc(100% - 7px), 73.6842105263% 100%, 71.0526315789% calc(100% - 7px), 68.4210526316% 100%, 65.7894736842% calc(100% - 7px), 63.1578947368% 100%, 60.5263157895% calc(100% - 7px), 57.8947368421% 100%, 55.2631578947% calc(100% - 7px), 52.6315789474% 100%, 50% calc(100% - 7px), 47.3684210526% 100%, 44.7368421053% calc(100% - 7px), 42.1052631579% 100%, 39.4736842105% calc(100% - 7px), 36.8421052632% 100%, 34.2105263158% calc(100% - 7px), 31.5789473684% 100%, 28.9473684211% calc(100% - 7px), 26.3157894737% 100%, 23.6842105263% calc(100% - 7px), 21.0526315789% 100%, 18.4210526316% calc(100% - 7px), 15.7894736842% 100%, 13.1578947368% calc(100% - 7px), 10.5263157895% 100%, 7.8947368421% calc(100% - 7px), 5.2631578947% 100%, 2.6315789474% calc(100% - 7px), 0 100%, 0 0);
  width: 100%;
  max-width: 266px;
  padding-bottom: 15px;
  margin-inline-start: auto;
  margin-inline-end: auto
}

.qr-code-icon {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex-shrink: 0
}

.btn-copy-address {
  scrollbar-width: none
}

.btn-copy-address::-webkit-scrollbar {
  display: none
}

.btn-copy-text::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  inset-inline-end: 1px;
  top: 0;
  bottom: 0;
  background: linear-gradient(270deg, #ffffff 85%, rgba(255, 255, 255, 0) 100%)
}

.crypto-timer-holder {
  position: relative;
  width: 100%
}

.crypto-timer-holder-desktop {
  padding-inline-start: 28px;
  padding-inline-end: 28px
}

.crypto-timer-holder-mobile {
  min-height: 20px;
  padding-inline-start: 56px;
  padding-inline-end: 56px
}

.crypto-timer {
  font-size:
    /*!rtl:12px*/
    14px;
  line-height: 20px;
  font-weight: 600;
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 55px;
  height: 24px;
  font-family: 'Lato', var(--font-system);
  text-align: center;
  color: #fff;
  background: #3371e6;
  padding: 0 2px;
  border: 0;
  border-radius: 12px;
  margin-top:
    /*!rtl:2px*/
    -2px;
  z-index: 1
}

.crypto-timer.crypto-timer-danger {
  background: #eb5a68
}

.crypto-timer-desktop {
  margin-inline-end: -28px
}

.text-center {
  text-align: center
}

.text-left {
  text-align: left
}

.text-start {
  text-align: start
}

.text-end {
  text-align: end
}

.bg-gray-10 {
  background-color: #f3f4fa
}

.bg-blue-5 {
  background-color: #f7fafd
}

.bg-blue-10 {
  background-color: #ebf1fc
}

.bg-red-10 {
  background-color: #fff2f2
}

.bg-orange-30 {
  background-color: #fff4cd
}

.bg-green-10 {
  background-color: #daf4eb
}

.bg-primary {
  background-color: #3371e6
}

.bg-white {
  background-color: #fff
}

.border-top-radius-0 {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px
}

.border-radius-2 {
  border-radius: 2px
}

.border-radius-4 {
  border-radius: 4px
}

.border-top-radius-4 {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px
}

.border-radius-5 {
  border-radius: 5px
}

.border-radius-6 {
  border-radius: 6px
}

.border-radius-8 {
  border-radius: 8px
}

.border-bottom-radius-8 {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px
}

.border-radius-10 {
  border-radius: 10px
}

.border-radius-12 {
  border-radius: 12px
}

.border-radius-base {
  border-radius: 8px
}

.border {
  border-width: 1px;
  border-style: solid;
  border-color: #c7cdd6
}

.border-top {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #c7cdd6
}

.border-gray-15 {
  border-color: #e7e8ed
}

.border-gray-20 {
  border-color: #c7cdd6
}

.border-red-20 {
  border-color: #ffc9cf
}

.border-orange-40 {
  border-color: #edcfac
}

.border-0 {
  border: 0
}

.border-top-0 {
  border-top: 0
}

.border-bottom-0 {
  border-bottom: 0
}

.cursor-pointer {
  cursor: pointer
}

.d-none {
  display: none
}

.d-inline-block {
  display: inline-block
}

.d-block {
  display: block
}

.d-flex {
  display: flex
}

.emoji-symbol {
  font-size: 1.13334em
}

.emoji-img {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  font-size: 1.13334em
}

.flex-column {
  flex-direction: column
}

.flex-wrap {
  flex-wrap: wrap
}

.justify-center {
  justify-content: center
}

.justify-between {
  justify-content: space-between
}

.items-start {
  align-items: flex-start
}

.items-center {
  align-items: center
}

.items-baseline {
  align-items: baseline
}

.self-start {
  align-self: flex-start
}

.self-center {
  align-self: center
}

.grow-1 {
  flex-grow: 1
}

.shrink-0 {
  flex-shrink: 0
}

.focus-outline-minus-2[data-focus-visible-added]:focus, .focus-outline-minus-2[data-focus-visible-added]:focus~.focus-next {
  outline-offset: -2px
}

.focus-outline-minus-1[data-focus-visible-added]:focus, .focus-outline-minus-1[data-focus-visible-added]:focus~.focus-next {
  outline-offset: -1px
}

.focus-outline-0[data-focus-visible-added]:focus, .focus-outline-0[data-focus-visible-added]:focus~.focus-next {
  outline-offset: 0px
}

.focus-outline-1[data-focus-visible-added]:focus, .focus-outline-1[data-focus-visible-added]:focus~.focus-next {
  outline-offset: 1px
}

.focus-outline-2[data-focus-visible-added]:focus, .focus-outline-2[data-focus-visible-added]:focus~.focus-next {
  outline-offset: 2px
}

.focus-not-visible:focus, .focus-not-visible[data-focus-visible-added]:focus {
  outline: 0;
  box-shadow: none
}

.icon-slot {
  position: relative
}

.icon-slot:before {
  content: " ";
  opacity: 0
}

.icon-slot-12 {
  width: 12px
}

.icon-slot-14 {
  width: 14px
}

.icon-slot-18 {
  width: 18px
}

.icon-slot-24 {
  width: 24px
}

.icon-slot-28 {
  width: 28px
}

.icon-slot-32 {
  width: 32px
}

.icon {
  vertical-align: -0.1625em;
  width: 1em;
  height: 1em
}

.icon-fill {
  vertical-align: -0.1625em;
  width: 1em;
  height: 1em;
  fill: currentColor
}

.icon-stroke {
  vertical-align: -0.1625em;
  width: 1em;
  height: 1em;
  stroke: currentColor
}

.icon-stroke-2 {
  stroke-width: 2px
}

@keyframes icon-spin {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(359deg)
  }
}

.icon-rotate-90 {
  transform: rotate(90deg)
}

.icon-rotate-180 {
  transform: rotate(180deg)
}

.icon-rotate-270 {
  transform: rotate(270deg)
}

.icon-flip-horizontal {
  transform: scale(-1, 1)
}

.opacity-0 {
  opacity: 0
}

.opacity-20 {
  opacity: .2
}

.opacity-75 {
  opacity: .75
}

.opacity-80 {
  opacity: .8
}

.overflow-hidden {
  overflow: hidden
}

.overflow-x-auto {
  overflow-x: auto
}

.pointer-events-none {
  pointer-events: none
}

.p-rel {
  position: relative
}

.p-abs {
  position: absolute
}

.p-abs.inset-0 {
  inset: 0
}

.p-abs.inset-top-start {
  top: 0;
  inset-inline-start: 0
}

.p-abs.inset-top-end {
  top: 0;
  inset-inline-end: 0
}

.p-abs.inset-bottom-start {
  bottom: 0;
  inset-inline-start: 0
}

.p-abs.inset-bottom-end {
  bottom: 0;
  inset-inline-end: 0
}

.p-abs.inset-centered {
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.p-abs.inset-centered-end {
  top: 50%;
  inset-inline-end: 0;
  transform: translate(0, -50%)
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.w-50 {
  width: 50%
}

.w-100 {
  width: 100%
}

.w-auto {
  width: auto
}

.h-100 {
  height: 100%
}

.h-auto {
  height: auto
}

.min-w-100 {
  min-width: 100%
}

.min-h-0 {
  min-height: 0%
}

.max-w-50 {
  max-width: 50%
}

.max-w-70 {
  max-width: 70%
}

.max-w-100 {
  max-width: 100%
}

.m-0 {
  margin: 0
}

.mt-0 {
  margin-top: 0
}

.mt-0-5 {
  margin-top: 2px
}

.me-0-5, .mx-0-5 {
  margin-inline-end: 2px
}

.ms-0-5, .mx-0-5 {
  margin-inline-start: 2px
}

.mt-1 {
  margin-top: 4px
}

.me-1, .mx-1 {
  margin-inline-end: 4px
}

.mb-1 {
  margin-bottom: 4px
}

.ms-1, .mx-1 {
  margin-inline-start: 4px
}

.mt-1-5 {
  margin-top: 6px
}

.me-1-5 {
  margin-inline-end: 6px
}

.ms-1-5 {
  margin-inline-start: 6px
}

.mt-2 {
  margin-top: 8px
}

.me-2, .mx-2 {
  margin-inline-end: 8px
}

.mb-2 {
  margin-bottom: 8px
}

.ms-2, .mx-2 {
  margin-inline-start: 8px
}

.mt-2-5 {
  margin-top: 10px
}

.me-2-5 {
  margin-inline-end: 10px
}

.mb-2-5 {
  margin-bottom: 10px
}

.mt-3, .my-3 {
  margin-top: 12px
}

.me-3, .mx-3 {
  margin-inline-end: 12px
}

.mb-3, .my-3 {
  margin-bottom: 12px
}

.ms-3, .mx-3 {
  margin-inline-start: 12px
}

.mt-4 {
  margin-top: 16px
}

.me-4 {
  margin-inline-end: 16px
}

.mb-4 {
  margin-bottom: 16px
}

.ms-4 {
  margin-inline-start: 16px
}

.mt-4-5 {
  margin-top: 18px
}

.mt-5 {
  margin-top: 20px
}

.me-5 {
  margin-inline-end: 20px
}

.mb-5 {
  margin-bottom: 20px
}

.mt-6 {
  margin-top: 24px
}

.mb-6 {
  margin-bottom: 24px
}

.mt-7 {
  margin-top: 28px
}

.mt-8 {
  margin-top: 32px
}

.me-10 {
  margin-inline-end: 40px
}

.mt-12 {
  margin-top: 48px
}

.mt-13 {
  margin-top: 52px
}

.mb-13 {
  margin-bottom: 52px
}

.mt-15 {
  margin-top: 60px
}

.mt-auto, .my-auto {
  margin-top: auto
}

.mx-auto {
  margin-inline-end: auto
}

.my-auto {
  margin-bottom: auto
}

.ms-auto, .mx-auto {
  margin-inline-start: auto
}

.p-0 {
  padding: 0
}

.py-0 {
  padding-top: 0
}

.px-0 {
  padding-inline-end: 0
}

.py-0 {
  padding-bottom: 0
}

.px-0 {
  padding-inline-start: 0
}

.mt-minus-0-5 {
  margin-top: -2px
}

.mb-minus-0-5 {
  margin-bottom: -2px
}

.py-0-5 {
  padding-top: 2px
}

.py-0-5 {
  padding-bottom: 2px
}

.m-minus-1 {
  margin: -4px
}

.p-1 {
  padding: 4px
}

.pt-1, .py-1 {
  padding-top: 4px
}

.px-1 {
  padding-inline-end: 4px
}

.pb-1, .py-1 {
  padding-bottom: 4px
}

.px-1 {
  padding-inline-start: 4px
}

.gap-y-1 {
  row-gap: 4px
}

.pe-1-5, .px-1-5 {
  padding-inline-end: 6px
}

.px-1-5 {
  padding-inline-start: 6px
}

.pt-2, .py-2 {
  padding-top: 8px
}

.pe-2, .px-2 {
  padding-inline-end: 8px
}

.pb-2, .py-2 {
  padding-bottom: 8px
}

.ps-2, .px-2 {
  padding-inline-start: 8px
}

.py-2-5 {
  padding-top: 10px
}

.px-2-5 {
  padding-inline-end: 10px
}

.py-2-5 {
  padding-bottom: 10px
}

.px-2-5 {
  padding-inline-start: 10px
}

.mt-minus-3, .my-minus-3 {
  margin-top: -12px
}

.mx-minus-3 {
  margin-inline-end: -12px
}

.my-minus-3 {
  margin-bottom: -12px
}

.mx-minus-3 {
  margin-inline-start: -12px
}

.p-3 {
  padding: 12px
}

.pt-3, .py-3 {
  padding-top: 12px
}

.pe-3, .px-3 {
  padding-inline-end: 12px
}

.pb-3, .py-3 {
  padding-bottom: 12px
}

.ps-3, .px-3 {
  padding-inline-start: 12px
}

.p-4 {
  padding: 16px
}

.pt-4, .py-4 {
  padding-top: 16px
}

.px-4 {
  padding-inline-end: 16px
}

.pb-4, .py-4 {
  padding-bottom: 16px
}

.ps-4, .px-4 {
  padding-inline-start: 16px
}

.gap-x-4 {
  column-gap: 16px
}

.pt-4-5 {
  padding-top: 18px
}

.pt-5, .py-5 {
  padding-top: 20px
}

.px-5 {
  padding-inline-end: 20px
}

.pb-5, .py-5 {
  padding-bottom: 20px
}

.px-5 {
  padding-inline-start: 20px
}

.pt-6, .py-6 {
  padding-top: 24px
}

.pe-6, .px-6 {
  padding-inline-end: 24px
}

.pb-6, .py-6 {
  padding-bottom: 24px
}

.px-6 {
  padding-inline-start: 24px
}

.pt-7 {
  padding-top: 28px
}

.pb-7 {
  padding-bottom: 28px
}

.mx-minus-8 {
  margin-inline-end: -32px
}

.mx-minus-8 {
  margin-inline-start: -32px
}

.p-8 {
  padding: 32px
}

.pt-8, .py-8 {
  padding-top: 32px
}

.px-8 {
  padding-inline-end: 32px
}

.pb-8, .py-8 {
  padding-bottom: 32px
}

.px-8 {
  padding-inline-start: 32px
}

.pb-9 {
  padding-bottom: 36px
}

.pt-10 {
  padding-top: 40px
}

.pe-10 {
  padding-inline-end: 40px
}

.pb-10 {
  padding-bottom: 40px
}

.ps-10 {
  padding-inline-start: 40px
}

.ps-11 {
  padding-inline-start: 44px
}

.pt-12 {
  padding-top: 48px
}

.pe-12 {
  padding-inline-end: 48px
}

.pb-14 {
  padding-bottom: 56px
}

.pt-16 {
  padding-top: 64px
}

.pe-16 {
  padding-inline-end: 64px
}

.pb-16 {
  padding-bottom: 64px
}

.ps-16 {
  padding-inline-start: 64px
}

.font-size-14 {
  font-size: 14px
}

.font-size-16 {
  font-size: 16px
}

.font-size-18 {
  font-size: 18px
}

.font-size-20 {
  font-size: 20px
}

.font-size-24 {
  font-size: 24px
}

.font-size-28 {
  font-size: 28px
}

.line-height-0 {
  line-height: 0
}

.line-height-18 {
  line-height: 18px
}

.line-height-20 {
  line-height: 20px
}

.font-weight-400 {
  font-weight: 400
}

.font-weight-500 {
  font-weight: 500
}

.font-weight-600 {
  font-weight: 600
}

.text-gray-40 {
  color: #8791a1
}

.text-gray-60 {
  color: #697484
}

.text-gray-80 {
  color: #49505b
}

.text-fuchsia-80 {
  color: #ff447c
}

.text-red-60 {
  color: #eb5a68
}

.text-red-80 {
  color: #da2243
}

.text-green-80 {
  color: #00c07b
}

.text-green-90 {
  color: #0c9c5e
}

.text-primary {
  color: #3371e6
}

.text-black {
  color: #000
}

.text-white {
  color: #fff
}

.text-white-hover-white {
  color: #fff
}

.text-white-hover-white:hover {
  color: #fff
}

.text-color {
  color: #222832
}

.text-transparent {
  color: rgba(0, 0, 0, 0)
}

.text-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.text-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.text-line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.text-line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.text-line-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.text-line-clamp-7 {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.text-line-clamp-8 {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.text-sans-serif {
  font-family: 'Lato', var(--font-system)
}

.text-nowrap {
  white-space: nowrap
}

.text-with-nowrap strong {
  font-weight: inherit;
  white-space: nowrap
}

.text-wrap-normal {
  white-space: normal
}

.text-break-word {
  overflow-wrap: break-word;
  -webkit-hyphens: none;
  hyphens: none
}

.text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden
}

.text-decor {
  text-decoration: underline;
  text-underline-offset: .15em
}

.text-noselect {
  -webkit-user-select: none;
  user-select: none
}

.text-select-all {
  -webkit-user-select: all;
  user-select: all
}

.visible {
  visibility: visible
}

.invisible {
  visibility: hidden
}

.z-index-1 {
  z-index: 1
}

.z-index-2 {
  z-index: 2
}

.z-index-3 {
  z-index: 3
}

.z-index-4 {
  z-index: 4
}

.z-index-5 {
  z-index: 5
}

/* Modal Styles */
.maw-new-donation-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    overflow-y: auto;
}

.maw-new-donation-modal.active {
    display: block;
}

.maw-modal-content {
    position: relative;
    margin: 2rem auto;
    padding: 1rem;
    width: 100%;
}

.maw-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    z-index: 1;
}

.maw-modal-close:hover {
    color: #000;
}

.modal-trigger {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s;
}

.modal-trigger:hover {
    background-color: #0056b3;
}

.frequency-hint-top {
    position: relative;
    z-index: 10;
}

.frequency-hint-top-text {
    position: relative;
    z-index: 10;
}

.frequency-hint-top .icon-slot {
    position: relative;
    z-index: 10;
}

.frequency-btn.frequency-btn-selected {
  font-size:
    /*!rtl:14px*/
    16px;
  line-height: 24px;
  font-weight: 500;
  background: #ebf1fc;
  box-shadow: inset 0 0 0 2px #3371e6;
  z-index: 2;
  cursor: default
}

.frequency-btn[data-focus-visible-added].frequency-btn-selected:focus {
  background: #ebf1fc;
  box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

.frequency-btn[data-focus-visible-added]:focus {
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2)
}

/* Mensal specific styles */
.frequency-btn:has(.text-fuchsia-80).frequency-btn-selected {
  background: #fcebf1;
  box-shadow: inset 0 0 0 2px #e6337d;
}

.frequency-btn:has(.text-fuchsia-80)[data-focus-visible-added].frequency-btn-selected:focus {
  background: #fcebf1;
  box-shadow: inset 0 0 0 2px #e6337d, 0 0 0 3px rgba(230, 51, 125, .2)
}

.frequency-btn:has(.text-fuchsia-80)[data-focus-visible-added]:focus {
  background: #f3f4fa;
  box-shadow: inset 0 0 0 1px #e6337d, 0 0 0 3px rgba(230, 51, 125, .2)
}

/* Reminder Panel Styles */
.reminder-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 32, 44, 0.98);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 15px;
    display: flex;
    transform: scale(0.95);
}

.reminder-panel.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.reminder-panel-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 2rem;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s,
                opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.reminder-panel.active .reminder-panel-content {
    transform: translateY(0);
    opacity: 1;
}

.back-button {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
}

.back-button:hover {
    opacity: 0.8;
}

.reminder-icon {
    margin: 0.5rem auto;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(10px) scale(0.8);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s,
                opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s;
}

.reminder-panel.active .reminder-icon {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.reminder-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.reminder-panel h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.reminder-panel.active h2 {
    transform: translateY(0);
    opacity: 1;
}

.reminder-panel p {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 280px;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s,
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.reminder-panel.active p {
    transform: translateY(0);
    opacity: 1;
}

.reminder-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    transform: translateY(15px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s,
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.reminder-panel.active .reminder-form {
    transform: translateY(0);
    opacity: 1;
}

#reminder-email {
    padding: 1rem 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.9rem;
    height: 48px;
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
}

#reminder-email::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.remind-button {
    padding: 1rem 1.25rem;
    background: #4169E1;
    border: none;
    border-radius: 99px;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.remind-button:hover {
    background: #3154b4;
}

.no-thanks-button {
    padding: 1rem 1.25rem;
    background: white;
    border: none;
    border-radius: 99px;
    color: #1a202c;
    font-size: 0.9rem;
    font-weight: 600;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin: 0;
}

.no-thanks-button:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Focus styles for accessibility */
.reminder-panel button:focus,
#reminder-email:focus {
    outline: 2px solid #4169E1;
    outline-offset: 2px;
}

/* Dark overlay for main form when reminder is active */
.modal.reminder-active .flow-screen {
    opacity: 0.1;
    pointer-events: none;
}

/* Donation Summary Styles */
.donation-summary {
    margin: 1rem 0;
}

.donation-summary .bg-gray-5 {
    background-color: #ebf1fc;
}

.donation-summary .rounded {
    border-radius: 8px;
}

.donation-summary p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.donation-summary strong {
    font-weight: 600;
    color: #000;
}

.btn-edit-donation {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}

.btn-edit-donation:hover {
    color: #000;
}

.btn-edit-donation svg {
    width: 20px;
    height: 20px;
}

/* Utility Classes */
.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-0 {
    margin-bottom: 0;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.p-3 {
    padding: 1rem;
}

.text-gray-80 {
    color: #333;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
}

/* Personal Details Form - Match Amount Options Styling */
#personal-details-form .maw-form-control {
    display: block;
    width: 100%;
    height: 44px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #222832;
    -webkit-text-fill-color: #222832;
    background-color: #fff;
    background-image: none;
    padding: 10px 16px;
    border: 0;
    border-radius: 99px;
    box-shadow: inset 0 0 0 1px #c7cdd6, 0 1px 3px rgba(57, 58, 63, .1);
    font-family: 'Lato', var(--font-system);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

/* Personal Details Form Body - Enable Scrolling */
.flow-slide:nth-child(2) .maw-modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 180px);
}

.flow-slide:nth-child(2) .fixed-container {
    max-height: none;
    overflow-y: auto;
    /*padding-right: 8px;*/
}

/* Custom scrollbar for personal details form */
.flow-slide:nth-child(2) .fixed-container::-webkit-scrollbar {
    width: 6px;
}

.flow-slide:nth-child(2) .fixed-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.flow-slide:nth-child(2) .fixed-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.flow-slide:nth-child(2) .fixed-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

#personal-details-form .maw-form-control:focus {
    box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2);
    outline: none;
}

#personal-details-form .maw-form-control:hover {
    background: #f3f4fa;
}

#personal-details-form .maw-form-control::placeholder {
    font-family: 'Lato', var(--font-system);
    color: #697484;
    -webkit-text-fill-color: #697484;
    opacity: 1;
}

#personal-details-form .maw-form-control.error,
#payment-method-form .maw-form-control.error {
    background-color: #fff2f2;
    box-shadow: inset 0 0 0 2px #dc2626, 0 1px 3px rgba(57, 58, 63, .1);
}

#personal-details-form .maw-form-control.error:focus,
#payment-method-form .maw-form-control.error:focus {
    box-shadow: inset 0 0 0 2px #dc2626, 0 0 0 3px rgba(220, 38, 38, .2);
}

/* Phone input group specific styling */
#personal-details-form .phone-input-group {
    margin-bottom: 12px;
}

#personal-details-form .phone-input-group .maw-form-control {
    margin-bottom: 0;
}

/* Checkbox styling */
.checkbox-group {
    margin-bottom: 16px;
    margin-top: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: 'Lato', var(--font-system);
    font-size: 14px;
    line-height: 20px;
    color: #222832;
}

.checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #c7cdd6;
    margin-right: 12px;
    position: relative;
    transition: all 0.2s ease;
    background: #fff;
    flex-shrink: 0;
}

.checkbox-input:checked + .checkbox-custom {
    background: #3371e6;
    border-color: #3371e6;
}

.checkbox-input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-input:focus + .checkbox-custom,
.checkbox-label:hover .checkbox-custom {
    border-color: #3371e6;
    box-shadow: 0 0 0 3px rgba(51, 113, 230, .1);
}

.checkbox-text {
    font-weight: 500;
    user-select: none;
}

/* Additional fields styling */
.additional-fields {
    margin-bottom: 12px;
    animation: slideDown 0.3s ease-out;
}

.additional-fields .maw-form-control {
    margin-bottom: 12px;
}

.additional-fields .maw-form-control:last-child {
    margin-bottom: 0;
}

/* NIF field styling */
.nif-field {
    margin-bottom: 12px;
    animation: slideDown 0.3s ease-out;
}

.nif-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nif-country-select {
    flex: 0 0 auto;
    width: 70px!important;
    margin-bottom: 0 !important;
    font-size: 14px;
    padding: 10px 8px;
    text-align: center;
}

/* Payment Method Styling */
.payment-method-group {
    margin-bottom: 24px;
}

.payment-method-option {
    margin-bottom: 12px;
}

.payment-method-label {
    display: block;
    cursor: pointer;
    margin: 0;
}

.payment-method-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.payment-method-card {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #fff;
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.payment-method-card:hover {
    border-color: #3371e6;
    background: #f8faff;
}

.payment-method-radio:checked + .payment-method-card {
    border-color: #3371e6;
    background: #f0f6ff;
    box-shadow: 0 0 0 3px rgba(51, 113, 230, .1);
}

.payment-method-icon {
    font-size: 24px;
    margin-right: 16px;
    flex-shrink: 0;
}

.payment-method-text {
    flex: 1;
}

.payment-method-title {
    font-family: 'Lato', var(--font-system);
    font-size: 16px;
    font-weight: 600;
    color: #222832;
    margin-bottom: 4px;
}

.payment-method-subtitle {
    font-family: 'Lato', var(--font-system);
    font-size: 14px;
    color: #697484;
}

/* MB Way Phone Input */
.mbway-phone-input {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-left: 56px;
    animation: slideDown 0.3s ease-out;
}

/* Direct Debit Fields */
.direct-debit-fields {
    margin-top: 16px;
    padding-left: 20px;
}

.direct-debit-fields .maw-form-control {
    margin-bottom: 12px;
}

.direct-debit-fields .date-input-group {
    margin-bottom: 12px;
}

/* Policy Checkbox */
.policy-checkbox {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.policy-checkbox .checkbox-text {
    font-size: 14px;
}

.policy-checkbox .checkbox-text a {
    color: #3371e6;
    text-decoration: none;
}

.policy-checkbox .checkbox-text a:hover {
    text-decoration: underline;
}

.nif-input {
    flex: 1;
    margin-bottom: 0 !important;
}

.nif-error {
    background-color: #fff2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 16px;
    font-family: 'Lato', var(--font-system);
}

/* Select styling to match form controls */
.nif-country-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 12px;
    padding-right: 24px;
}

/* Animation for showing/hiding fields */
@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 300px;
        transform: translateY(0);
    }
}

/* Date input styling */
.date-input-group {
    margin-bottom: 12px;
}

.date-label {
    display: block;
    font-family: 'Lato', var(--font-system);
    font-size: 14px;
    font-weight: 500;
    color: #222832;
    margin-bottom: 6px;
    margin-left: 16px;
}

#birth-date {
    position: relative;
    margin-bottom: 0 !important;
}

#birth-date::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.phone-input-group {
    position: relative;
    margin-bottom: 12px;
}

.country-select {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f9fafb;
    border-right: 1px solid #ccc;
}

.country-select img {
    margin-right: 0.5rem;
}

.country-select span {
    font-size: 0.875rem;
    color: #333;
}

.phone-input-group .maw-form-control {
    border: none;
    border-radius: 0;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.checkbox-input {
    margin-top: 0.25rem;
}

.checkbox-label {
    font-size: 0.875rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-button {
    background: none;
    border: none;
    padding: 0;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
}

.info-button:hover {
    color: #000;
}

.back-button {
    background: none;
    border: none;
    padding: 0.5rem;
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
}

.back-button:hover {
    color: #333;
}

/* Reminder panel back button - lighter hover */
.reminder-panel .back-button:hover {
    opacity: 0.6;
    color: inherit;
}

/* Donation Amount Warning */
.donation-warning {
    background-color: #fff2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 99px;
    padding: 12px 20px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Lato', var(--font-system);
    text-align: center;
    display: none;
    animation: fadeIn 0.3s ease-in-out;
    cursor: pointer;
    user-select: none;
}

.donation-warning.show {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gap-4 {
    gap: 1rem;
}

/* Utility Classes */
.pt-4 {
    padding-top: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

/* International Telephone Input Styles */
.iti {
    width: 100%;
    position: relative;
    display: block;
}

.iti input[type=tel] {
    width: 100%;
    height: 44px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #222832;
    -webkit-text-fill-color: #222832;
    background-color: #fff;
    background-image: none;
    padding: 10px 16px 10px 70px;
    border: 0;
    border-radius: 99px;
    box-shadow: inset 0 0 0 1px #c7cdd6, 0 1px 3px rgba(57, 58, 63, .1);
    font-family: 'Lato', var(--font-system);
    transition: all 0.2s ease;
}

.iti input[type=tel]:focus {
    box-shadow: inset 0 0 0 2px #3371e6, 0 0 0 3px rgba(51, 113, 230, .2);
    outline: none;
}

.iti input[type=tel]:hover {
    background: #f3f4fa;
}

.iti input[type=tel]::placeholder {
    font-family: 'Lato', var(--font-system);
    color: #697484;
    -webkit-text-fill-color: #697484;
    opacity: 1;
}

/* Flag container styling */
.iti__flag-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    border-right: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px 0 0 99px;
    background: transparent;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05)!important;
  border-radius: 99px 0 0 99px!important;
}

.iti__selected-flag {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Dropdown positioning and styling */
.iti__country-list {
    position: absolute;
    z-index: 1020 !important;
    background: #fff;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
    width: 250px !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100%;
}

.iti__country {
    padding: 8px 12px;
    font-family: 'Lato', var(--font-system);
    font-size: 14px;
    line-height: 20px;
    color: #222832;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: #f3f4fa;
}

.iti__country:last-child {
    border-bottom: none;
}

.iti__flag {
    margin-right: 8px;
}

.iti__dial-code {
    color: #697484;
}

/* Hide the original phone input group styles since we're using the library's UI */
.phone-input-group .country-select {
    display: none;
}

/* Remove bottom padding for success, error, loading, and credit card processing screens since they don't have fixed footers */
.flow-slide-success .maw-modal-body,
.flow-slide-error .maw-modal-body,
.flow-slide-loading .maw-modal-body,
.flow-slide-cc-processing .maw-modal-body {
    padding-bottom: 20px !important;
}

/* Special fade animations for success/error/loading screens */
.flow-slide-success,
.flow-slide-error,
.flow-slide-loading,
.flow-slide-cc-processing {
    animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal opening animation */
.maw-new-donation-modal {
    animation: modalFadeIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.maw-new-donation-modal.active .maw-modal-content {
    animation: modalSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}