.hidden {
  display: none;
}
.ready {
  display: block;
}
.container {
  display: flex;
  align-items: stretch;
}
.container div {
  flex-grow: 1;
}
#payload #payload_signatures textarea {
  height: 100px;
}
.invalid {
  border-color: red;
  border-width: 2px;
}

/* Spinner */
.loader,
.isProcessing {
  --color-accent: #00ccbb;
  --color-link: #11facc;
  --color-bg-secondary: #99ffee;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow:
    32px 0 var(--color-accent),
    -32px 0 var(--color-accent);
  position: relative;
  animation: flash 1s ease-out infinite alternate;
  margin-left: 90px;
}
#txProcessingContainer {
  display: block;
  padding: 22px;
  border: 1px solid var(--color-bg-secondary);
  border-radius: 0 2px;
}
@keyframes flash {
  0% {
    background-color: var(--color-link);
    box-shadow:
      32px 0 var(--color-link),
      -32px 0 var(--color-accent);
  }

  50% {
    background-color: var(--color-accent);
    box-shadow:
      32px 0 var(--color-link),
      -32px 0 var(--color-link);
  }

  100% {
    background-color: var(--color-link);
    box-shadow:
      32px 0 var(--color-accent),
      -32px 0 var(--color-link);
  }
}