/* IOS Safari */

@keyframes ios-safari-bouncing-arrow-animation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}

@keyframes ios-ipad-safari-bouncing-arrow-animation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0) rotate(180deg);
  }

  40% {
    transform: translateY(30px) rotate(180deg);
  }

  60% {
    transform: translateY(15px) rotate(180deg);
  }
}

.ios-safari-bouncing-arrow-container img {
  height: 60px;
  position: absolute;
  top: calc(100dvh - 60px);
  left: 0;
  right: 0;
  margin: auto;
  animation: ios-safari-bouncing-arrow-animation 2s infinite;
}

.ios-ipad-safari-bouncing-arrow-container img {
  height: 60px;
  position: absolute;
  top: 0;
  right: 120px;
  animation: ios-ipad-safari-bouncing-arrow-animation 2s infinite;
}
.ios-ipad-safari-bouncing-arrow-container.rtl img {right:unset;left:120px;}

/* IOS Chrome */
@keyframes ios-chrome-bouncing-arrow-animation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(5px);
  }
}

.ios-chrome-bouncing-arrow-container img {
  height: 35px;
  position: absolute;
  top: 0;
  right: 18px;
  animation: ios-chrome-bouncing-arrow-animation 1.5s infinite;
}
.ios-chrome-bouncing-arrow-container.rtl img{right:unset;left:18px;}


/* Android Chrome */
@keyframes android-chrome-bouncing-arrow-animation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(5px);
  }
}

.android-chrome-bouncing-arrow-container img {
  height: 35px;
  position: absolute;
  top: 0;
  right: 15px;
  animation: android-chrome-bouncing-arrow-animation 1.5s infinite;
}
.android-chrome-bouncing-arrow-container.rtl img{right:unset;left:15px;}

/* In-App System Browser */

@keyframes inappbrowser-openinsystembrowser-bouncing-arrow-animation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(5px);
  }
}

.inappbrowser-openinsystembrowser-bouncing-arrow-container img {
  height: 35px;
  position: absolute;
  top: 0;
  right: 6px;
  animation: inappbrowser-openinsystembrowser-bouncing-arrow-animation 1.5s
    infinite;
}
.inappbrowser-openinsystembrowser-bouncing-arrow-container.rtl img{right:unset;left:6px;}

/* In-App Safari Browser */


@keyframes inappbrowser-openinsafari-bouncing-arrow-animation {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-5px);
  }
}

.inappbrowser-openinsafari-bouncing-arrow-container img {
  height: 35px;
  position: absolute;
  top: calc(100dvh - 35px);
  right: 15px;
  animation: inappbrowser-openinsafari-bouncing-arrow-animation 1.5s
    infinite;
}
.inappbrowser-openinsafari-bouncing-arrow-container.rtl img{right:unset;left:15px;}

.desktop-safari-bouncing-arrow-container img {
  height: 35px;
  position: absolute;
  top: 0;
  right: 88px;
  animation: ios-chrome-bouncing-arrow-animation 1.5s infinite;
}
.desktop-safari-bouncing-arrow-container.rtl img{right:unset;left:88px;}