/* ceylon main colors */
/* Dot Pulse Animation */
@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px #9a0039;
  }
  30% {
    box-shadow: 9984px 0 0 2px #9a0039;
  }
  60%, 100% {
    box-shadow: 9984px 0 0 -5px #9a0039;
  }
}
@keyframes dotPulse-left {
  0% {
    box-shadow: 9999px 0 0 -5px #fb0;
  }
  30% {
    box-shadow: 9999px 0 0 2px #fb0;
  }
  60%, 100% {
    box-shadow: 9999px 0 0 -5px #fb0;
  }
}
@keyframes dotPulse-right {
  0% {
    box-shadow: 10014px 0 0 -5px #00554e;
  }
  30% {
    box-shadow: 10014px 0 0 2px #00554e;
  }
  60%, 100% {
    box-shadow: 10014px 0 0 -5px #00554e;
  }
}
@keyframes dotPulseAfter {
  0% {
    box-shadow: 10029px 0 0 -5px #fc6c00;
  }
  30% {
    box-shadow: 10029px 0 0 2px #fc6c00;
  }
  60%, 100% {
    box-shadow: 10029px 0 0 -5px #fc6c00;
  }
}
/*   Dot Pulse Animation Ends */
/* Dot Stretch Animation */
@keyframes dotstretchBefore {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1.5);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dotstretch-left {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1.5);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dotstretch-right {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dotstretchAfter {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(1, 0.67);
  }
  100% {
    transform: scale(1, 1.5);
  }
}
/* Dot stretch Animation Ends */
/* Dot Flashing Animation */
@keyframes dotFlashing-maroon {
  0% {
    background-color: #9a0039;
  }
  50%, 100% {
    background-color: #eee;
  }
}
@keyframes dotFlashing-yellow {
  0% {
    background-color: #fb0;
  }
  50%, 100% {
    background-color: #eee;
  }
}
@keyframes dotFlashing-green {
  0% {
    background-color: #00554e;
  }
  50%, 100% {
    background-color: #eee;
  }
}
@keyframes dotFlashing-orange {
  0% {
    background-color: #fc6c00;
  }
  50%, 100% {
    background-color: #eee;
  }
}
/* Dot Flashing Animation Ends */
/* Dot Bouncing Animation */
@keyframes dotbouncing {
  0% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
  10% {
    box-shadow: 9984px -10px 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
  25% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
  35% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px -10px 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
  50% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
  65% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px -10px 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
  75% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
  85% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px -10px 0 0 #fc6c00;
  }
  100% {
    box-shadow: 9984px 0 0 0 #9a0039, 9999px 0 0 0 #fb0, 10014px 0 0 0 #00554e, 10029px 0 0 0 #fc6c00;
  }
}
/* Dot Bouncing Animation Ends */
/* Dot Default Animation */
@keyframes dotDefault-left {
  0% {
    left: calc(-50% - 5px);
  }
  75% {
    left: calc(50% - 50px);
  }
  100% {
    left: calc(100% - 50px);
  }
}
@keyframes dotDefault-right {
  0% {
    left: calc(-50% - 10px);
  }
  75% {
    left: calc(50% - 45px);
  }
  100% {
    left: calc(100% - 45px);
  }
}
@keyframes dotDefaultBefore {
  0% {
    left: -50px;
  }
  50% {
    left: -12px;
  }
  75% {
    left: -15px;
  }
  100% {
    left: -15px;
  }
}
@keyframes dotDefaultAfter {
  0% {
    left: 50px;
  }
  50% {
    left: 12px;
  }
  75% {
    left: 15px;
  }
  100% {
    left: 15px;
  }
}
/* Dot Default Animation Ends */
.dot-pulse__right:after, .dot-pulse__left:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.dot-default__right:after, .dot-default__left:before, .dot-flashing__right:after, .dot-flashing__left:before, .dot-stretch__right:after, .dot-stretch__left:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

/* Dot Pulse */
.dot-pulse {
  display: flex;
  flex-direction: row;
}
.dot-pulse__left {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #fb0;
  color: #fb0;
  box-shadow: 9999px 0 0 -5px #fb0;
  animation: dotPulse-left 1.5s infinite linear;
  animation-delay: 0.25s;
}
.dot-pulse__left:before {
  background-color: #9a0039;
  color: #9a0039;
  box-shadow: 9984px 0 0 -5px #9a0039;
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}
.dot-pulse__right {
  position: relative;
  left: -10009px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #00554e;
  color: #00554e;
  box-shadow: 9999px 0 0 -5px #00554e;
  animation: dotPulse-right 1.5s infinite linear;
  animation-delay: 0.5s;
}
.dot-pulse__right:after {
  background-color: #fc6c00;
  color: #fc6c00;
  box-shadow: 10014px 0 0 -5px #fc6c00;
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: 0.75s;
}

/* Dot stretch */
.dot-stretch {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.dot-stretch__left {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #fb0;
  color: #fb0;
  animation: dotstretch-left 1s infinite linear;
}
.dot-stretch__left:before {
  left: -15px;
  background-color: #9a0039;
  color: #9a0039;
  animation: dotstretchBefore 1s infinite linear;
}
.dot-stretch__right {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #00554e;
  color: #00554e;
  animation: dotstretch-right 1s infinite linear;
}
.dot-stretch__right:after {
  left: 15px;
  background-color: #fc6c00;
  color: #fc6c00;
  animation: dotstretchAfter 1s infinite linear;
}

/* Dot Flashing */
.dot-flashing {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.dot-flashing__left {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #fb0;
  color: #fb0;
  animation: dotFlashing-yellow 1s infinite linear alternate;
  animation-delay: 0.5s;
}
.dot-flashing__left:before {
  left: -15px;
  background-color: #9a0039;
  color: #9a0039;
  animation: dotFlashing-maroon 1s infinite alternate;
  animation-delay: 0s;
}
.dot-flashing__right {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #00554e;
  color: #00554e;
  animation: dotFlashing-green 1s infinite linear alternate;
  animation-delay: 1s;
}
.dot-flashing__right:after {
  left: 15px;
  background-color: #fc6c00;
  color: #fc6c00;
  animation: dotFlashing-orange 1s infinite alternate;
  animation-delay: 1.5s;
}

/* Dot Bouncing */
.dot-bouncing {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #eee;
  color: #eee;
  box-shadow: 9984px 0 0 0 #eee, 9999px 0 0 0 #eee, 10014px 0 0 0 #eee;
  animation: dotbouncing 1.5s infinite linear;
}

/* Dot Default */
.dot-default {
  display: flex;
  flex-direction: row;
  /* gap: 5px; */
}
.dot-default__left {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #fb0;
  color: #fb0;
  animation: dotDefault-left 3s infinite cubic-bezier(0.1, 0.3, 0.4, 1);
}
.dot-default__left:before {
  left: -12px;
  background-color: #9a0039;
  color: #9a0039;
  animation: dotDefaultBefore 3s infinite ease-in-out;
}
.dot-default__right {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #00554e;
  color: #00554e;
  animation: dotDefault-right 3s infinite cubic-bezier(0.1, 0.3, 0.4, 1);
}
.dot-default__right:after {
  left: -24px;
  background-color: #fc6c00;
  color: #fc6c00;
  animation: dotDefaultAfter 3s infinite cubic-bezier(0.1, 0.3, 0.4, 1);
}