/**
 * Colors
 */
.newspack-registration {
  font-size: 0.8rem;
}
.newspack-registration a {
  color: inherit;
  text-decoration: underline;
}
.newspack-registration a:active, .newspack-registration a:focus, .newspack-registration a:hover {
  color: inherit;
  text-decoration: none;
}
.newspack-registration form > p {
  margin: 1em 0;
}
@media only screen and (min-width: 782px) {
  .newspack-registration.is-style-columns .newspack-registration__main {
    flex: 1 1 63.4146%;
  }
  .newspack-registration.is-style-columns .newspack-reader__lists {
    flex: 1 1 31.7073%;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .newspack-registration.is-style-columns .newspack-reader__lists h3 {
    display: block;
    margin: 0.4rem 0.4rem 0.8rem;
  }
  .newspack-registration.is-style-columns .newspack-reader__lists ul li {
    flex: 1 1 100%;
  }
}
.newspack-registration__form-content {
  width: 100%;
  display: flex;
  flex-flow: row-reverse wrap;
  gap: 0.8rem 1.6rem;
  margin: 0;
  transition: opacity 200ms ease-in-out;
}
.newspack-registration__main {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.newspack-registration__inputs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  justify-content: flex-end;
  min-width: 250px;
}
.newspack-registration__inputs input[type=email] {
  flex: 1 1 auto;
}
.newspack-registration__inputs [type=submit] {
  background-color: var(--newspack-cta-color);
  color: var(--newspack-cta-contrast-color);
  margin-top: 0.5rem;
  width: 100%;
}
@media only screen and (min-width: 782px) {
  .newspack-registration__inputs [type=submit] {
    margin-left: 0.4rem;
    margin-top: 0;
    width: auto;
  }
}
.newspack-registration__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1em;
  gap: 0.5em 2em;
}
.newspack-registration__header h2,
.newspack-registration__header p {
  margin: 0;
}
.newspack-registration__header h2 {
  font-size: 1rem;
  line-height: 1.3333;
}
@media screen and (min-width: 600px) {
  .newspack-registration__header h2 {
    font-size: 1.3125em;
    line-height: 1.5238;
  }
}
.newspack-registration__have-account {
  background-color: #111;
  padding: 4px 15px;
  margin-bottom: 15px;
  text-align: center;
  margin-top: 20px;
}
@media screen and (min-width: 600px) {
  .newspack-registration__have-account {
    margin-top: 0;
  }
}
.newspack-registration__have-account,
.newspack-registration__have-account a {
  color: #fff !important;
}
.newspack-registration__have-account a:active,
.newspack-registration__have-account a:hover {
  color: #d6d6d6 !important;
}
.newspack-registration__help-text p {
  color: #757575;
  font-size: 0.8125em !important;
  line-height: 1.2307;
  margin: 0.8rem 0 0;
}
.newspack-registration__response {
  margin-top: 0.5rem;
  font-size: 0.8em;
}
.newspack-registration__registration-success > *:last-child {
  margin-bottom: 0;
}
.newspack-registration--error .newspack-registration__response {
  color: #cc1818;
}
.newspack-registration--success .newspack-registration__logins {
  display: none;
}
.newspack-registration--in-progress {
  opacity: 0.5;
}
.newspack-registration--in-progress button,
.newspack-registration--in-progress a,
.newspack-registration--in-progress input {
  pointer-events: none;
}
.newspack-registration--in-progress button[type=submit] {
  position: relative;
}
.newspack-registration--in-progress button[type=submit] span.submit {
  visibility: hidden;
}
.newspack-registration--in-progress button[type=submit] span.spinner {
  --animation-duration: 900ms;
  --animation-timing-function: linear;
  --color-spinner-primary: transparent;
  --color-spinner-background: currentcolor;
  --size: 18px;
  --stroke-width: 1.5px;
  animation: var(--animation-timing-function) var(--animation-duration) infinite spin;
  border-color: var(--color-spinner-primary) var(--color-spinner-primary) var(--color-spinner-background) var(--color-spinner-background);
  border-radius: 50%;
  border-style: solid;
  border-width: var(--stroke-width);
  height: var(--size);
  transform: rotate(0deg);
  width: var(--size);
  position: absolute;
  left: calc(50% - var(--size) / 2);
}
.newspack-registration__icon {
  align-items: center;
  animation: fadein 125ms ease-in;
  background: #4ab866;
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  margin: 0 auto 0.8rem;
  width: 40px;
}
.newspack-registration__icon::before {
  animation: bounce 125ms ease-in;
  animation-delay: 500ms;
  animation-fill-mode: forwards;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'/%3E%3C/svg%3E");
  content: "";
  display: block;
  height: 24px;
  transform: scale(0);
  width: 24px;
}
.newspack-registration__success {
  margin: 0 auto;
  max-width: 780px;
}
.newspack-registration__success:not([class*="--hidden"]) .newspack-registration__icon {
  animation: fadein 125ms ease-in;
}
.newspack-registration__success:not([class*="--hidden"]) .newspack-registration__icon::before {
  animation: bounce 125ms ease-in;
  animation-delay: 500ms;
  animation-fill-mode: forwards;
}
.newspack-registration__success .wp-block-newspack-reader-registration > *:first-child {
  margin-top: 0 !important;
}
.newspack-registration__success .wp-block-newspack-reader-registration > *:last-child {
  margin-bottom: 0 !important;
}
.newspack-registration--hidden {
  display: none;
}
.newspack-registration + div:empty {
  display: none;
}
.newspack-registration .nphp,
.newspack-registration input[type=email].nphp {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

/* Sepcific styles to apply to Reader Registration when part of a Prompt */
.newspack-popup__content .newspack-registration__header {
  padding-right: 36px;
}
@media screen and (min-width: 600px) {
  .newspack-popup__content .newspack-registration__header {
    padding-right: 0;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}