@-webkit-keyframes slideUp {
100% {transform:translateY(0%)}
90% {transform: translateY(10%)}
70% {transform: translateY(20%)}
60% {transform: translateY(30%)}
50% {transform: translateY(50%)}
30% {transform: translateY(70%)}
10% {transform: translateY(80%)}
00% {transform: translateY(90%)}
}

@keyframes slideUp {
100% {transform:translateY(0%)}
90% {transform: translateY(10%)}
70% {transform: translateY(20%)}
60% {transform: translateY(30%)}
50% {transform: translateY(50%)}
30% {transform: translateY(70%)}
10% {transform: translateY(80%)}
00% {transform: translateY(90%)}
}
@-webkit-keyframes slide {
100% {margin-left: 0px;}
90% {margin-left: -10%;}
70% {margin-left: -30%;}
60% {margin-left: -50%;}
50% {margin-left: -60%}
30% {margin-left: -70%}
10% {margin-left: -80%}
00% {margin-left: -100%}
}

@keyframes slide {
100% {margin-left: 0px;}
90% {margin-left: -10%;}
70% {margin-left: -30%;}
60% {margin-left: -50%;}
50% {margin-left: -60%}
30% {margin-left: -70%}
10% {margin-left: -80%}
00% {margin-left: -100%}
}

@keyframes scale_in {
    from{
        transform:  scale(0.5,0.5);
    }
    to{
        transform:  scale(1,1);
    }
}
@keyframes scale_in_bottom {
    from{
        transform:  scale(0.5,1);
    }
    to{
        transform:  scale(1,1);
    }
}
@-webkit-keyframes wave-sm {
    0% {
      opacity: 0.35;
      height: 5px;
    }
    100% {
      opacity: 1;
      height: 15px;
    }
}
@keyframes wave-sm {
    0% {
      opacity: 0.35;
      height: 5px;
    }
    100% {
      opacity: 1;
      height: 15px;
    }
  }
@-webkit-keyframes wave-md {
    0% {
      opacity: 0.35;
      height: 10px;
    }
    100% {
      opacity: 1;
      height: 40px;
    }
  }
  @keyframes wave-md {
    0% {
      opacity: 0.35;
      height: 10px;
    }
    100% {
      opacity: 1;
      height: 40px;
    }
  }
@-webkit-keyframes wave-lg {
    0% {
      opacity: 0.35;
      height: 10px;
    }
    100% {
      opacity: 1;
      height: 40px;
    }
  }
  @keyframes wave-lg {
    0% {
      opacity: 0.35;
      height: 10px;
    }
    100% {
      opacity: 1;
      height: 40px;
    }
  }
  
  @-webkit-keyframes rotate-zoom {
    0% {
    opacity: 0.35;
    border-radius: 50%;
    width: 30px; 
    height: 30px;
    border-radius: 5px;
    transform: rotate(360deg);
    }
    60% { 
    border-radius: 35px; 
    }
    100% {
    opacity: 1;
    width: 60px; 
    height: 30px;
    border-radius: 5px;
    transform: rotate(0deg); 
    }
}
@keyframes rotate-zoom {
    0% {
    opacity: 0.35;
    border-radius: 50%;
    width: 30px; 
    height: 30px;
    border-radius: 5px;
    transform: rotate(360deg);
    }
    60% { 
    border-radius: 35px; 
    }

    100% {
    opacity: 1;
    width: 60px; 
    height: 30px;
    border-radius: 5px;
    transform: rotate(0deg); 
    }
} 

.spinner{
  position: fixed;
  display: none;
  border-radius: 50%;
  width: 60px; 
  height: 30px;
  align-self: center;
  /* border-bottom-right-radius: 10px;  */
  animation: rotate-zoom;
  animation-duration:1.5s;
  animation-timing-function:ease-in-out;
  animation-delay:0ms;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
  animation-fill-mode:both;
  overflow: hidden;
}
.spinner.active{
  display: flex;
  z-index: 1200;
}
.spinner span{
  background-color: yellow;
  width: 20px!important;
  height: 30px!important;
  /* animation-name: rotate-zoom-span; */
} 
.spinner span:first-child{
  background-color: black; 
} 
.spinner span:last-child{
  background-color: red; 
} 
.spinner span:empty{
  display: inline;
}
[data-theme="dark"] .arrow{
    color: rgb(247, 246, 242);
}
.arrow:hover{
color: rgb(16, 143, 186);
}
.arrow.left{
transform: rotateY(-180deg);
}
.arrow.left::before{
content: '\21A9';
content: '\279F';
}
.arrow.right::before{
content: '\27A4';
content: '\279D';
content: '\279F';
}