/* Custom variables and mixins */
:root {
  --header-height: 100px;
}

/* Bootstrap variables and mixins */
/* Bootstrap variables and mixins */
/* Custom utilities */
.clickflow-container {
  width: 100vw;
  max-width: 100%;
  background-color: #FFFFFF;
}

.clickflow-start {
  background-color: #EBF5F5;
  padding: 1.5rem;
  padding-bottom: 0;
  color: #157B7C;
}

@media (min-width: 768px) {
  .clickflow-start {
    display: flex;
    flex-direction: row;
  }
}

.clickflow-start .clickflow-illustration {
  position: relative;
  height: 0;
  padding-bottom: 70%;
  width: 100%;
  overflow: hidden;
}

.clickflow-start .clickflow-illustration .illustration-frau {
  width: 74%;
  top: 0;
  right: 10%;
}

.clickflow-start .clickflow-illustration .illustration-fragezeichen {
  width: 16%;
  top: -10%;
  left: 2%;
}

.clickflow-start .clickflow-illustration .illustration-ausrufezeichen {
  width: 5%;
  top: 0;
  left: 20%;
}

.clickflow-start-right {
  flex-grow: 0;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .clickflow-start-right {
    width: 40%;
  }
}

.clickflow-start-text {
  margin-bottom: 2rem;
}

@media screen and (min-width: 400px) {
  .clickflow-container {
    width: 100%;
  }
}

.clickflow-background {
  position: relative;
  height: 62.5rem;
  max-height: 100vh;
}

.clickflow-modal .clickflow-background {
  height: 50rem;
}

.clickflow-foreground {
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: relative;
}

.clickflow-foreground.clickflow-foreground-preloaded {
  position: absolute;
  left: 100%;
  top: 0;
}

.clickflow-foreground.clickflow-foreground-preloaded-from-right {
  left: 100%;
  top: 0;
}

.clickflow-foreground.clickflow-foreground-preloaded-from-left {
  left: -100%;
  top: 0;
}

.clickflow-foreground.clickflow-foreground-preloaded-from-bottom {
  left: 0;
  top: 100%;
}

.clickflow-foreground.clickflow-foreground-preloaded-from-top {
  left: 0;
  top: -100%;
}

.clickflow-foreground.locked::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(235, 245, 245, 0.7);
  z-index: 8;
}

.clickflow-content {
  height: 100%;
  overflow-y: scroll;
  position: relative;
  padding-bottom: 4rem;
  scrollbar-width: thin;
  scrollbar-color: #C7C7C7 #EFEFEF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}

.clickflow-content::-webkit-scrollbar {
  width: 5px;
}

.clickflow-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.clickflow-content::-webkit-scrollbar-thumb {
  background: #888;
}

.clickflow-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.clickflow-content .btn-light {
  border-width: 0;
  overflow: hidden;
  position: relative;
}

.clickflow-content .btn-light .btn-animation {
  content: '';
  height: 100%;
  width: 100%;
  display: block;
  background-color: #157B7C;
  position: absolute;
  top: 0;
  left: -100%;
  opacity: 0;
  transition-property: left, opacity;
  transition-duration: .5s;
  transition-delay: 0s;
}

.clickflow-content .btn-light .btn-label {
  display: block;
  position: relative;
}

.clickflow-content .btn-light .btn-label .subtitle {
  display: block;
  font-size: 0.75rem;
}

.clickflow-content .btn-light.active .btn-animation {
  left: 0;
  opacity: 1;
}

.clickflow-navigation {
  background-color: #157B7C;
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.clickflow-navigation .hamburger-inner,
.clickflow-navigation .hamburger-inner::after,
.clickflow-navigation .hamburger-inner::before {
  background-color: #FFFFFF;
}

.clickflow-navigation .hamburger.is-active .hamburger-inner,
.clickflow-navigation .hamburger.is-active .hamburger-inner::after,
.clickflow-navigation .hamburger.is-active .hamburger-inner::before {
  background-color: #FFFFFF;
}

.clickflow-navigation .hamburger-box {
  top: 2px;
}

.clickflow-navigation .hamburger-inner::before {
  top: -9px;
}

.clickflow-navigation .hamburger-inner::after {
  bottom: -9px;
}

.clickflow-navigation a {
  display: block;
}

.clickflow-navigation-left {
  padding: 0.25rem 0.5rem;
  min-width: 2.5rem;
}

.clickflow-navigation-left svg {
  width: 1.75rem;
  height: 1.75rem;
}

.clickflow-navigation-center {
  max-width: calc(390px - 80px);
}

.clickflow-navigation-center img {
  width: auto;
  height: 3rem;
}

.clickflow-navigation-right {
  padding: 0.25rem 0.5rem;
}

.clickflow-navigation-right svg {
  width: 1.5rem;
  height: 1.5rem;
}

.clickflow-navigation-right.reload svg {
  width: 1.75rem;
  height: 1.75rem;
}

.clickflow-navigation-right.relaod a {
  color: #FFFFFF;
}

.clickflow-navigation-right.reload a:visited {
  color: #FFFFFF;
}

.clickflow-navigation-right a {
  color: #FFFFFF;
}

.clickflow-navigation-right a:visited {
  color: #FFFFFF;
}

.clickflow-overlay-navigation {
  background-color: #FFFFFF;
  position: absolute;
  max-width: 90%;
  width: 20rem;
  padding-top: 1.5rem;
  top: 0;
  bottom: 0;
  left: -26.25rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  display: flex;
  z-index: 10;
  flex-direction: column;
  justify-content: space-between;
  transition: all 500ms;
}

.clickflow-overlay-navigation ul {
  padding: 1rem;
  list-style: none;
}

.clickflow-overlay-navigation li {
  border-bottom: 2px solid #EFEFEF;
}

.clickflow-overlay-navigation li a {
  display: flex;
  align-items: center;
  padding: 2rem 1rem;
  font-size: 0.9375rem;
  color: #2F2E33;
  font-weight: 500;
  text-decoration: none;
}

.clickflow-overlay-navigation li a svg {
  height: 1rem;
  width: 1rem;
  margin-right: 1.5rem;
  color: #157B7C;
}

.clickflow-overlay-navigation .clickflow-overlay-close {
  display: block;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 2px solid #157B7C;
  border-radius: 50%;
  cursor: pointer;
}

.clickflow-overlay-navigation .clickflow-overlay-close::after, .clickflow-overlay-navigation .clickflow-overlay-close::before {
  content: "";
  position: absolute;
  background-color: #157B7C;
  transform: rotate(45deg);
}

.clickflow-overlay-navigation .clickflow-overlay-close::after {
  width: 20px;
  height: 2px;
  top: 13px;
  left: 4px;
}

.clickflow-overlay-navigation .clickflow-overlay-close::before {
  width: 2px;
  height: 20px;
  top: 4px;
  left: 13px;
}

.clickflow-overlay-navigation.show {
  left: 0;
}

.clickflow-overlay-logo {
  padding: 1rem;
}

.clickflow-overlay-logo a {
  display: block;
  padding: 1rem;
}

.clickflow-title {
  font-weight: bold;
  position: relative;
  padding: 1.5rem 2.5rem 1.3125rem 2rem;
}

.clickflow-title::after {
  content: "";
  width: 6.25rem;
  height: 1px;
  background-color: #157B7C;
  border: 2px solid #157B7C;
  display: block;
  position: absolute;
  bottom: 0;
}

.clickflow-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 1.75rem;
  height: 1.75rem;
}

.clickflow-close a {
  color: #157B7C;
  display: block;
}

.clickflow-close a:visited {
  color: #157B7C;
}

.clickflow-close svg {
  width: 1.75rem;
  height: 1.75rem;
}

.clickflow-step-title {
  padding: 1.5rem 2rem 1rem;
  font-weight: bold;
  font-size: 1.625rem;
  color: #157B7C;
}

.clickflow-text-content {
  padding: 1rem 2rem 1rem;
  position: relative;
}

.clickflow-text-content .button-wrap {
  text-align: center;
}

.clickflow-text-content h3 {
  color: #157B7C;
}

.clickflow-text-content a.internal {
  color: #157B7C;
}

.clickflow-illustration {
  position: relative;
  overflow: hidden;
}

.clickflow-illustration .illustration {
  position: absolute;
}

.clickflow-illustration span {
  display: block;
}

.clickflow-illustration img {
  width: 100%;
  display: block;
  height: auto;
}

.clickflow-foreground-preloaded .illustration {
  animation-play-state: paused !important;
}

.clickflow-foreground.locked .illustration {
  animation-play-state: paused !important;
}

.clickflow-buttons a {
  margin-bottom: 1.5rem;
  text-align: left;
  margin-right: 0.625rem;
}

.clickflow-step-alert {
  position: absolute;
  top: 2rem;
  left: 2rem;
  right: 2rem;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 2rem;
  padding-bottom: 4.5rem;
  z-index: 10;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  display: none;
}

.clickflow-step-alert.show {
  display: block;
}

.clickflow-step-alert .alert-title {
  font-weight: bold;
  position: relative;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  font-size: 1.625rem;
  color: #157B7C;
}

.clickflow-step-alert .alert-title::after {
  content: "";
  width: 70px;
  height: 1px;
  background-color: #157B7C;
  border: 1px solid #157B7C;
  display: block;
  position: absolute;
  bottom: 0;
}

.clickflow-step-alert .alert-close {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  display: block;
  transform: translateX(-50%);
}

.clickflow-modal {
  width: 24.375rem;
  position: fixed;
  top: 10vh;
  height: 80vh;
  left: 50%;
  margin-left: -12.1875rem;
  z-index: 20;
}

.clickflow-modal .clickflow {
  min-height: 25rem;
  background-color: #FFFFFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

@media screen and (max-height: 1000px) {
  .clickflow-modal {
    height: calc(100vh - 16px);
    top: 16px;
  }
}

.clickflow-restart-button a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clickflow-restart-button svg {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}

/* Styles for specific screens */
@keyframes growin {
  0% {
    transform: scale(0);
    visibility: hidden;
  }
  1% {
    transform: scale(0);
    visibility: visible;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wobble {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/*
    &::after {
        content: "";
        background-image: url("../Vorlagen/welche-pille.png");
        opacity: 0.5;
        position: absolute;
        top: 0;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }
*/
@keyframes clickflow-loading-indicator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.clickflow-loading-block {
  position: absolute;
  height: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 200ms linear;
  overflow: hidden;
}

.clickflow-loading-block.active {
  z-index: 100;
  height: 100%;
  opacity: 1;
}

.clickflow-loading-indicator {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  margin: -40px auto 0 auto;
  top: 50%;
}

.clickflow-loading-indicator div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid transparent;
  border-radius: 50%;
  animation: clickflow-loading-indicator 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #157B7C transparent transparent transparent;
}

.clickflow-loading-indicator div:nth-child(1) {
  animation-delay: -0.45s;
}

.clickflow-loading-indicator div:nth-child(2) {
  animation-delay: -0.3s;
}

.clickflow-loading-indicator div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes startPillenEnter {
  0% {
    left: -65%;
  }
  100% {
    left: 0;
  }
}

@keyframes startPillenHover {
  0% {
    left: 0;
  }
  100% {
    left: 1%;
  }
}

#clickflow-start {
  position: relative;
}

#clickflow-start .clickflow-status {
  display: none;
}

#clickflow-start .clickflow-step-title {
  color: #157B7C;
  font-size: 1.625rem;
  white-space: nowrap;
  padding: 1rem 2rem 1rem 3.375rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}

#clickflow-start .clickflow-step-title span {
  font-size: 2.375rem;
  font-weight: bold;
  display: block;
  margin-left: -1.5rem;
}

#clickflow-start .clickflow-illustration {
  height: 0;
  padding-bottom: 105%;
  background-color: #DDECED;
  /* frau */
  /* pillen */
  /* ausrufezeichen */
  /* fragezeichen */
}

#clickflow-start .clickflow-illustration .illustration-frau {
  bottom: 0;
  width: 61%;
  z-index: 1;
  right: -65%;
  animation: startFrauEnter 1000ms ease 100ms 1 normal forwards, startFrauHover 2000ms linear 1100ms infinite alternate;
}

@keyframes startFrauEnter {
  0% {
    right: -65%;
  }
  100% {
    right: 2%;
  }
}

@keyframes startFrauHover {
  0% {
    right: 2%;
  }
  100% {
    right: 3%;
  }
}

#clickflow-start .clickflow-illustration .illustration-pillen {
  width: 58%;
  bottom: 16%;
  left: -65%;
  animation: startPillenEnter 1000ms ease 1100ms 1 normal forwards, startPillenHover 2000ms linear 2100ms infinite alternate;
}

@keyframes startPillenEnter {
  0% {
    left: -65%;
  }
  100% {
    left: 0;
  }
}

@keyframes startPillenHover {
  0% {
    left: 0;
  }
  100% {
    left: 1%;
  }
}

#clickflow-start .clickflow-illustration .illustration-ausrufezeichen {
  top: 57%;
  right: 8%;
  width: 5.5%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 2500ms 1 normal forwards;
}

#clickflow-start .clickflow-illustration .illustration-fragezeichen {
  top: 12%;
  right: 30%;
  width: 16%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 3000ms 1 normal forwards;
}

#clickflow-start .clickflow-text-content {
  padding: 1.5rem 2rem;
  text-align: center;
}

#clickflow-start .clickflow-text-content p {
  font-weight: bold;
  font-size: 1.125rem;
}

#clickflow-start .button-wrap {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

#clickflow-start .btn-start {
  font-size: 1.3125rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

#clickflow-start .alert-trigger {
  padding-bottom: 1rem;
}

#clickflow-start .logo img {
  max-width: 12.5rem;
}

#clickflow-question .clickflow-illustration {
  height: 0;
  padding-bottom: 94%;
}

#clickflow-question .clickflow-illustration .illustration-frau {
  right: -80%;
  bottom: 0;
  z-index: 1;
  width: 70%;
  animation: pillSelectFrauEnter 1000ms ease 100ms 1 normal forwards;
}

@keyframes pillSelectFrauEnter {
  0% {
    right: -80%;
  }
  100% {
    right: 12%;
  }
}

#clickflow-question .clickflow-illustration .illustration-fragezeichen1 {
  left: 27%;
  top: -2%;
  width: 15%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 1100ms 1 normal forwards, wobble 3000ms linear 1600ms infinite;
}

#clickflow-question .clickflow-illustration .illustration-fragezeichen2 {
  left: 76%;
  top: 39%;
  width: 15%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 1600ms 1 normal forwards, wobble 3000ms linear 3100ms infinite;
}

#clickflow-clock .clickflow-illustration {
  height: 0;
  padding-bottom: 80%;
}

#clickflow-clock .clickflow-illustration .illustration-frau {
  width: 70%;
  right: -70%;
  top: 23%;
  z-index: 1;
  animation: clockFrauEnter 500ms ease 100ms 1 normal forwards;
}

@keyframes clockFrauEnter {
  0% {
    right: -70%;
  }
  100% {
    right: -14%;
  }
}

#clickflow-clock .clickflow-illustration .illustration-uhr {
  width: 66%;
  left: -70%;
  top: 3%;
  animation: clockUhrEnter 500ms ease 600ms 1 normal forwards, wobbleUhr 3000ms linear 1100ms infinite;
}

@keyframes clockUhrEnter {
  0% {
    left: -70%;
  }
  100% {
    left: -10%;
  }
}

@keyframes wobbleUhr {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

#clickflow-thinking .clickflow-illustration {
  height: 0;
  padding-bottom: 85%;
}

#clickflow-thinking .clickflow-illustration .illustration-frau {
  left: -55%;
  bottom: -2px;
  z-index: 1;
  width: 47%;
  animation: wieoftFrauEnter 500ms ease 100ms 1 normal forwards;
}

@keyframes wieoftFrauEnter {
  0% {
    left: -55%;
  }
  100% {
    left: -4%;
  }
}

#clickflow-thinking .clickflow-illustration .illustration-blase1 {
  width: 4%;
  left: 34%;
  top: 40%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 600ms 1 normal forwards, wieoftBlase1Hover 1000ms ease-in-out 2100ms infinite alternate;
}

@keyframes wieoftBlase1Hover {
  0% {
    top: 40%;
  }
  100% {
    top: 39%;
  }
}

#clickflow-thinking .clickflow-illustration .illustration-blase2 {
  width: 5%;
  left: 40%;
  top: 34%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 1100ms 1 normal forwards, wieoftBlase2Hover 1000ms ease-in-out 2100ms infinite alternate;
}

@keyframes wieoftBlase2Hover {
  0% {
    top: 34%;
  }
  100% {
    top: 33%;
  }
}

#clickflow-thinking .clickflow-illustration .illustration-sprechblase {
  top: 2%;
  right: 5%;
  width: 55%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 1600ms 1 normal forwards, wieoftSprechblaseHover 1000ms ease-in-out 2100ms infinite alternate;
}

@keyframes wieoftSprechblaseHover {
  0% {
    top: 2%;
  }
  100% {
    top: 1%;
  }
}

#clickflow-result-ok .clickflow-text-content {
  padding-bottom: 0;
}

#clickflow-result-ok .clickflow-illustration {
  height: 0;
  padding-bottom: 70%;
}

#clickflow-result-ok .clickflow-illustration .illustration-frau {
  width: 73%;
  bottom: 0;
  left: -75%;
  animation: okFrauEnter 500ms ease 100ms 1 normal forwards;
}

@keyframes okFrauEnter {
  0% {
    left: -75%;
  }
  100% {
    left: 3%;
  }
}

#clickflow-result-ok .clickflow-illustration .illustration-check {
  width: 53%;
  bottom: 10%;
  right: 11%;
  transform: scale(0);
  animation: growin 500ms cubic-bezier(0.68, 0.2, 0.265, 1.55) 600ms 1 normal forwards;
}

#clickflow-small-calendar .clickflow-illustration {
  height: 0;
  padding-bottom: 35%;
}

#clickflow-small-calendar .clickflow-illustration .illustration-frau {
  top: 25%;
  width: 40%;
  transform: rotate(10deg);
  left: -60%;
  animation: smallCalendarFrauEnter 1000ms ease 100ms 1 normal forwards;
}

@keyframes smallCalendarFrauEnter {
  0% {
    left: -50%;
  }
  100% {
    left: 10%;
  }
}

#clickflow-small-calendar .clickflow-illustration .illustration-kalender {
  top: 15%;
  width: 40%;
  right: -50%;
  transform: rotate(-24deg);
  animation: smallCalendarCalEnter 1000ms ease 1100ms 1 normal forwards;
}

@keyframes smallCalendarCalEnter {
  0% {
    right: -50%;
  }
  100% {
    right: 14%;
  }
}

#clickflow-large-calendar .clickflow-illustration {
  height: 0;
  padding-bottom: 75%;
}

#clickflow-large-calendar .clickflow-illustration .illustration-kalender {
  top: 3%;
  width: 70%;
  right: -80%;
  animation: largeCalendarCalEnter 500ms ease 100ms 1 normal forwards;
}

@keyframes largeCalendarCalEnter {
  0% {
    right: -80%;
  }
  100% {
    right: -12%;
  }
}

#clickflow-large-calendar .clickflow-illustration .illustration-frau {
  top: 27%;
  width: 77%;
  left: -80%;
  animation: largeCalendarFrauEnter 500ms ease 600ms 1 normal forwards;
}

@keyframes largeCalendarFrauEnter {
  0% {
    left: -80%;
  }
  100% {
    left: -9%;
  }
}

#clickflow-blister .clickflow-illustration {
  height: 0;
  padding-bottom: 72%;
}

#clickflow-blister .clickflow-illustration .illustration-frau {
  top: 10%;
  width: 60%;
  right: -80%;
  animation: blisterFrauEnter 1000ms ease 100ms 1 normal forwards;
}

@keyframes blisterFrauEnter {
  0% {
    right: -80%;
  }
  100% {
    right: 2%;
  }
}

#clickflow-blister .clickflow-illustration .illustration-pillen {
  top: -7%;
  width: 60%;
  transform: rotate(45deg);
  left: -80%;
  animation: blisterPillenEnter 1000ms ease 1100ms 1 normal forwards;
}

@keyframes blisterPillenEnter {
  0% {
    left: -80%;
  }
  100% {
    left: 5%;
  }
}

#clickflow-calendar-heart .clickflow-illustration {
  height: 0;
  padding-bottom: 82%;
}

#clickflow-calendar-heart .clickflow-illustration .illustration-frau {
  top: 1%;
  width: 60%;
  right: -80%;
  animation: calendarHeartFrauEnter 500ms ease 500ms 1 normal forwards;
}

@keyframes calendarHeartFrauEnter {
  0% {
    right: -80%;
  }
  100% {
    right: -10%;
  }
}

#clickflow-calendar-heart .clickflow-illustration .illustration-kalender {
  top: 16%;
  width: 60%;
  left: -80%;
  animation: calendarHeartCalendarEnter 500ms ease 1100ms 1 normal forwards;
}

@keyframes calendarHeartCalendarEnter {
  0% {
    left: -80%;
  }
  100% {
    left: 5%;
  }
}

#clickflow-manyhearts .clickflow-illustration {
  height: 0;
  padding-bottom: 72%;
}

#clickflow-manyhearts .clickflow-illustration .illustration-frau {
  top: 10%;
  width: 60%;
  left: -80%;
  animation: maynheartsFrauEnter 500ms ease 100ms 1 normal forwards;
}

@keyframes maynheartsFrauEnter {
  0% {
    left: -80%;
  }
  100% {
    left: -14%;
  }
}

#clickflow-manyhearts .clickflow-illustration .illustration-herzen {
  top: 1%;
  width: 60%;
  right: -80%;
  animation: manyheartsHerzenEnter 500ms ease 600ms 1 normal forwards;
}

@keyframes manyheartsHerzenEnter {
  0% {
    right: -80%;
  }
  100% {
    right: 3%;
  }
}

.calendar-wrapper {
  position: absolute;
  top: 0;
  left: -1rem;
  right: -1rem;
  min-height: calc(100% - 2rem);
  padding: 1rem 3rem 3rem 3rem;
  background-color: #FFFFFF;
  z-index: 1;
  display: none;
}

.calendar-wrapper.show {
  display: block;
}

.calendar-wrapper .calendar {
  padding-bottom: 1rem;
  border-bottom: 1px solid #EBF5F5;
  margin-bottom: 1rem;
}

.calendar-wrapper .calendar-month ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #EBF5F5;
  margin-bottom: 0.5rem;
}

.calendar-wrapper .calendar-month li {
  display: inline-block;
  opacity: 0.6;
}

.calendar-wrapper .calendar-month li.current {
  opacity: 1;
}

.calendar-wrapper .calendar-month a {
  text-transform: uppercase;
  font-size: 0.9375rem;
  color: #157B7C;
  text-decoration: none;
  font-weight: bold;
  padding: 4px 8px;
}

.calendar-wrapper .calendar-labels {
  margin-bottom: 0.5rem;
}

.calendar-wrapper .calendar-labels .label {
  text-align: center;
  font-weight: bold;
  color: #157B7C;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 0.9375rem;
}

.calendar-wrapper .calendar-days .row {
  padding-top: 4px;
  padding-bottom: 4px;
}

.calendar-wrapper .calendar-days .day {
  text-align: center;
  font-weight: bold;
  color: #157B7C;
  font-size: 0.9375rem;
  opacity: 0.6;
  position: relative;
}

.calendar-wrapper .calendar-days a {
  color: #157B7C;
  text-decoration: none;
  border-radius: 4px;
}

.calendar-wrapper .calendar-days a:hover {
  background-color: rgba(255, 206, 0, 0.3);
}

.calendar-wrapper .calendar-days span {
  opacity: 0.2;
}

.calendar-wrapper .calendar-days .current {
  opacity: 1;
}

.calendar-wrapper .calendar-days .now a {
  color: #2F2E33;
}

.calendar-wrapper .calendar-days .selected a {
  background-color: #FFCE00;
  color: #FFFFFF;
}

.calendar-wrapper .calendar-days .hilight::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #EBF5F5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.calendar-wrapper .calendar-days .hilight-first::before {
  left: 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.calendar-wrapper .calendar-days .hilight-last::before {
  right: 6px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.calendar-wrapper .calendar-days a, .calendar-wrapper .calendar-days span {
  display: inline-block;
  padding: 4px;
  min-width: 2rem;
}

/*# sourceMappingURL=styles.css.map */