/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.fml-payments div.fml-payments-progress {
  width: 12px;
  height: 12px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 130px;
  place-items: center;
  margin: 20px auto;
}
.fml-payments div.fml-payments-progress::before,
.fml-payments div.fml-payments-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
}
.fml-payments div.fml-payments-progress::before {
  box-shadow: -24px 0 currentColor;
  animation: d8-1 1s infinite linear;
}
.fml-payments div.fml-payments-progress::after {
  transform: rotate(0deg) translateX(24px);
  animation: d8-2 1s infinite linear;
}

@keyframes d8-1 {
  100% {
    transform: translateX(24px);
  }
}
@keyframes d8-2 {
  100% {
    transform: rotate(-180deg) translateX(24px);
  }
}

.fml-payments button,
.fml-payments input {
  width: 100%;
}

.fml-payments div.fml-payments-control-container {
  margin: 10px auto;
}

.fml-payments div.fml-payments-progress-container {
  display: none;
}

.fml-payments p.fml-payments-status {
  text-align: center;
}