div.woocommerce form .form-row .woocommerce-input-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

body div.woocommerce .form-row.fc-loading .woocommerce-input-wrapper:after {
  display: inline-block;
  font-family: "fluid-checkout-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  content: "\e816";
  width: 24px;
  height: 24px;
  font-size: 24px;
  z-index: 10;
  content: "\e816" !important;
  position: absolute;
  top: calc(var(--fluidcheckout--field--height, 45.625px) / 2 - 24px / 2);
  right: 5px;
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  line-height: 24px !important;
  border-radius: 100%;
  background-color: transparent !important;
  animation: loader-spin 0.75s linear infinite;
  color: var(--fluidcheckout--color--grey, #7b7575) !important;
  pointer-events: none;
}

body div.woocommerce button.fc-loading,
body div.woocommerce .button.fc-loading,
body div.woocommerce .fc-place-order .fc-place-order-button.fc-loading {
  position: relative !important;
  color: transparent !important;
}

body div.woocommerce button.fc-loading:after,
body div.woocommerce .button.fc-loading:after,
body div.woocommerce .fc-place-order .fc-place-order-button.fc-loading:after {
  display: inline-block;
  font-family: "fluid-checkout-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  content: "\e816";
  width: 24px;
  height: 24px;
  font-size: 24px;
  z-index: 10 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%);
  margin: 0 !important;
  right: 10px !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  border-radius: 100% !important;
  border: 0 !important;
  background-color: transparent !important;
  animation: loader-spin-centered 0.75s linear infinite !important;
  color: var(--fluidcheckout--color--white, #fff) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.has-loading-indicator-verbose div.woocommerce .blockUI.blockOverlay:after {
  display: inline-block;
  font-family: "fluid-checkout-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
  content: "\e816";
  width: 24px;
  height: 24px;
  font-size: 24px;
  z-index: 10;
  content: "\e816" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 24px !important;
  height: 24px !important;
  font-size: 24px !important;
  line-height: 24px !important;
  border-radius: 100%;
  background-color: transparent !important;
  animation: loader-spin 0.75s linear infinite;
  color: var(--fluidcheckout--color--grey, #7b7575) !important;
  pointer-events: none;
}

body.has-loading-indicator-verbose div.woocommerce form.checkout > .blockUI.blockOverlay:after {
  width: 50px;
  height: 50px;
  font-size: 50px;
  width: 50px !important;
  height: 50px !important;
  font-size: 50px !important;
  line-height: 50px !important;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loader-spin-centered {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}
.shake {
  animation: shake 0.75s;
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-5px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(5px, 0, 0);
  }
}
.background-highlight-success {
  animation: background-highlight-success 2.5s;
}

@keyframes background-highlight-success {
  from {
    background-color: var(--fluidcheckout--color--success-highlight, #e0f5eb);
  }
}