/* Text highlight START */
::selection {
  background: #fffb00;
}
/* Text highlight END */

/* Legacy form field labels START */
.field .input:not(:placeholder-shown) + .field-label,
.field .input:not(:placeholder-shown) + ul + .field-label {
  opacity: 1;
  transform: translateY(0px);
}

.field .field-label {
  pointer-events: none;
  text-overflow: ellipsis;
  user-select: none;
  white-space: nowrap;
  z-index: 1;
}
/* Legacy form field labels END */

/* Used to style banner callouts - on data protection page etc. START */
.c-pdf {
  border-image: linear-gradient(90deg, #15d5ce, #ffa9ee) 1;
  border-width: 4px;
  border-style: solid;
}
/* Used to style banner callouts - on data protection page etc. END */

/* Phone input validation START */
#valid-msg {
  color: #11b1a7;
}
#error-msg {
  color: #f43f5e;
}
.iti__country-list {
  z-index: 11 !important;
}
.iti {
  display: block !important;
}
.msg-error,
.msg-valid {
  background: rgb(244 63 94 / 15%);
  padding: 7px 10px 3px;
  height: 32px;
  margin-top: -4px;
}
.msg-valid {
  background: rgb(17 177 167 / 15%);
}
.iti-mobile .iti--container {
  z-index: 99999 !important;
}
/* Phone input validation END */

/* Hide Webflow badge START */
.w-webflow-badge {
  display: none !important;
}
/* Hide Webflow badge END */

/* Used to add gradient animation to demo pages etc. START */
.body.home {
  background-attachment: fixed;
  background: radial-gradient(
    rgba(175, 255, 250, 1) 0%,
    rgba(255, 207, 196, 1) 20%,
    rgba(187, 149, 230, 1) 40%,
    rgba(175, 255, 250, 1) 60%,
    rgba(255, 207, 196, 1) 80%,
    rgba(187, 149, 230, 1) 100%
  );
  animation: c-animationGradientBgs 58s ease infinite;
  background-size: 6000px 6000px;
  animation-direction: alternate;
}

@keyframes c-animationGradientBgs {
  0% {
    background-position: 0;
  }

  100% {
    background-position: -6000px top;
  }
}
/* Used to add gradient animation to demo pages etc. END */

/* Animate asset sections on pages START */

@keyframes animatedBackground {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.about-hero-container {
  animation: animatedBackground 80s linear infinite;
}
/* Animate asset sections on pages END */

/* Nav background transition START */
.w-nav-overlay {
  background: rgb(0 0 0 / 20%);
  transition: background-color 0.5s ease;
  z-index: 9999;
  top: auto;
}
/* Nav background transition END */

/* Hyphenation auto for DE START */
html[lang="de"] .headline {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
/* Hyphenation auto for DE END */