@keyframes tc4SkylineSlideX {
  from { background-position-x: 0; }
  to { background-position-x: -2000px; }
}

.tc4-block-callout.tc4-callout-style-2020::before,
.tc4-callout-style-2020::before {
  animation: tc4SkylineSlideX 90s linear infinite !important;
  animation-play-state: running !important;
}

.tc4-block-callout.tc4-callout-style-2020::before,
.tc4-callout-style-2020::before {
  -webkit-animation: animatedBackground 20000s linear infinite !important;
  animation: animatedBackground 20000s linear infinite !important;
}

.tc4-block-callout.tc4-callout-style-2020::before,
.tc4-callout-style-2020::before {
  -webkit-animation: tc4SkylineVisibleMove 140s linear infinite !important;
  animation: tc4SkylineVisibleMove 140s linear infinite !important;
  animation-play-state: running !important;
}

.tc4-block-callout.tc4-callout-style-2020::before,
.tc4-callout-style-2020::before {
  background-position-y: 100% !important;
  -webkit-animation: tc4SkylineMoveX 110s linear infinite !important;
  animation: tc4SkylineMoveX 110s linear infinite !important;
  animation-play-state: running !important;
}

.tc4-block-oidc {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.5rem 0;
  box-sizing: border-box;
}

.tc4-block-oidc,
.tc4-block-oidc * {
  box-sizing: border-box;
}

.tc4-block-oidc--center {
  text-align: center;
}

.tc4-oidc-unavailable {
  padding: .75rem 1rem;
  border-left: 4px solid var(--tc4-main-color, #00a551);
  background: rgba(0, 0, 0, .04);
}

.tc4-block-oidc > form,
.tc4-block-oidc > p,
.tc4-block-oidc > div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tc4-block-oidc--link {
  width: auto !important;
}

.tc4-block-oidc--link .tc4-oidc-text-link {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--tc4-support-color, #0066b2) !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  text-decoration: underline !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.tc4-block-oidc--link .tc4-oidc-text-link:hover,
.tc4-block-oidc--link .tc4-oidc-text-link:focus {
  color: var(--tc4-main-color, #00a551) !important;
  text-decoration: none !important;
}

/* OIDC knopvariant: alleen de echte button-shortcode krijgt de zoekknopstijl. */
.tc4-block-oidc--button > form,
.tc4-block-oidc--button > p,
.tc4-block-oidc--button > div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tc4-block-oidc--button > a,
.tc4-block-oidc--button > button,
.tc4-block-oidc--button > input[type="submit"],
.tc4-block-oidc--button > form > a,
.tc4-block-oidc--button > form > button,
.tc4-block-oidc--button > form > input[type="submit"],
.tc4-block-oidc--button > p > a,
.tc4-block-oidc--button > p > button,
.tc4-block-oidc--button > p > input[type="submit"],
.tc4-block-oidc--button > div > a,
.tc4-block-oidc--button > div > button,
.tc4-block-oidc--button > div > input[type="submit"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 48px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--tc4-main-color, #00a551) !important;
  background-color: var(--tc4-main-color, #00a551) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  box-shadow: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}

.tc4-block-oidc--button > a:hover,
.tc4-block-oidc--button > a:focus,
.tc4-block-oidc--button > button:hover,
.tc4-block-oidc--button > button:focus,
.tc4-block-oidc--button > input[type="submit"]:hover,
.tc4-block-oidc--button > input[type="submit"]:focus,
.tc4-block-oidc--button > form > a:hover,
.tc4-block-oidc--button > form > a:focus,
.tc4-block-oidc--button > form > button:hover,
.tc4-block-oidc--button > form > button:focus,
.tc4-block-oidc--button > form > input[type="submit"]:hover,
.tc4-block-oidc--button > form > input[type="submit"]:focus,
.tc4-block-oidc--button > p > a:hover,
.tc4-block-oidc--button > p > a:focus,
.tc4-block-oidc--button > p > button:hover,
.tc4-block-oidc--button > p > button:focus,
.tc4-block-oidc--button > p > input[type="submit"]:hover,
.tc4-block-oidc--button > p > input[type="submit"]:focus,
.tc4-block-oidc--button > div > a:hover,
.tc4-block-oidc--button > div > a:focus,
.tc4-block-oidc--button > div > button:hover,
.tc4-block-oidc--button > div > button:focus,
.tc4-block-oidc--button > div > input[type="submit"]:hover,
.tc4-block-oidc--button > div > input[type="submit"]:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12) !important;
}

.tc4-block-oidc--button > a img,
.tc4-block-oidc--button > a svg,
.tc4-block-oidc--button > button img,
.tc4-block-oidc--button > button svg,
.tc4-block-oidc--button > form > a img,
.tc4-block-oidc--button > form > a svg,
.tc4-block-oidc--button > form > button img,
.tc4-block-oidc--button > form > button svg,
.tc4-block-oidc--button > p > a img,
.tc4-block-oidc--button > p > a svg,
.tc4-block-oidc--button > p > button img,
.tc4-block-oidc--button > p > button svg,
.tc4-block-oidc--button > div > a img,
.tc4-block-oidc--button > div > a svg,
.tc4-block-oidc--button > div > button img,
.tc4-block-oidc--button > div > button svg {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 34px !important;
  height: 26px !important;
  max-height: 26px !important;
  margin: 0 !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

.tc4-block-oidc--button > a span,
.tc4-block-oidc--button > a strong,
.tc4-block-oidc--button > a em,
.tc4-block-oidc--button > button span,
.tc4-block-oidc--button > button strong,
.tc4-block-oidc--button > button em,
.tc4-block-oidc--button > form > a span,
.tc4-block-oidc--button > form > a strong,
.tc4-block-oidc--button > form > a em,
.tc4-block-oidc--button > form > button span,
.tc4-block-oidc--button > form > button strong,
.tc4-block-oidc--button > form > button em,
.tc4-block-oidc--button > p > a span,
.tc4-block-oidc--button > p > a strong,
.tc4-block-oidc--button > p > a em,
.tc4-block-oidc--button > p > button span,
.tc4-block-oidc--button > p > button strong,
.tc4-block-oidc--button > p > button em,
.tc4-block-oidc--button > div > a span,
.tc4-block-oidc--button > div > a strong,
.tc4-block-oidc--button > div > a em,
.tc4-block-oidc--button > div > button span,
.tc4-block-oidc--button > div > button strong,
.tc4-block-oidc--button > div > button em {
  display: inline !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: center !important;
  text-transform: inherit !important;
  white-space: normal !important;
}

.tc4-block-oidc--button > a br,
.tc4-block-oidc--button > button br,
.tc4-block-oidc--button > form > a br,
.tc4-block-oidc--button > form > button br,
.tc4-block-oidc--button > p > a br,
.tc4-block-oidc--button > p > button br,
.tc4-block-oidc--button > div > a br,
.tc4-block-oidc--button > div > button br {
  display: none !important;
}