.anim-fade-in {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim-fade-out {
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.anim-bounce-negative {
  animation-name: bounce-negative;
  animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-name: bounce-negative;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;
}
@keyframes bounce-negative {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(24px);
  }
  25% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-24px);
  }
  55% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(-12px);
  }
  75% {
    transform: translateX(0);
  }
  82% {
    transform: translateX(-6px);
  }
  87% {
    transform: translateX(0);
  }
  93% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}
.anim-scale-down-center {
  animation-name: scale-down-center;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes scale-down-center {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.2);
    opacity: 0;
  }
}
.anim-scale-up-center {
  animation-name: scale-up-center;
  animation-duration: 0.4s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes scale-up-center {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.anim-scale-down-center-bottom {
  animation-name: scale-down-center-bottom;
  animation-duration: 0.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes scale-down-center-bottom {
  0% {
    transform: scale(1);
    transform-origin: bottom;
    opacity: 1;
  }
  50% {
    transform: scale(0.2);
    opacity: 0;
    transform-origin: bottom;
    max-height: 200px;
  }
  100% {
    max-height: 0;
    padding: 0;
    opacity: 0;
  }
}
.anim-float-right {
  animation-name: float-right;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.anim-float-right-back {
  animation-name: float-right-back;
  animation-duration: 0.75s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
@keyframes float-right {
  0% {
    transform: translateX(-640px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes float-right-back {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-640px);
  }
}
.anim-pop {
  animation-name: anim-pop-center;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes anim-pop-center {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(0.7);
    opacity: 1;
  }
  75% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.anim-rotation {
  animation: rotating 2s linear infinite;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.anim-appear-from-down {
  animation-name: appear-from-down;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes appear-from-down {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  25% {
    opacity: 1;
    transform: translateY(-2.5px) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px) scale(1.03);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.anim-appear-from-top {
  animation-name: appear-from-top;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
  transform-origin: center top;
}
@keyframes appear-from-top {
  0% {
    opacity: 0;
    transform: translateY(-15px) scaleY(0);
  }
  25% {
    opacity: 1;
    transform: translateY(2.5px) scaleY(1);
  }
  50% {
    opacity: 1;
    transform: translateY(5px) scaleY(1.03);
  }
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}
.anim-disappear-to-top {
  animation-name: disappear-to-top;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
  transform-origin: center top;
}
@keyframes disappear-to-top {
  0% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: translateY(2.5px) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-15px) scaleY(0);
  }
}
.anim-spin {
  animation-name: spin;
  animation-duration: 2500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
  overflow: visible;
}
.anim-spin.material-icons {
  padding: 0 !important;
  margin: 0;
  line-height: 3rem;
  margin-top: -0.35rem;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.anim-loadtext {
  animation-name: placholdershimmer;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center center;
  overflow: visible;
  background-color: var(--gray-lighter-2);
  background: linear-gradient(
    to right,
    rgba(var(--rgb-gray-lighter), 0.25) 8%,
    rgba(var(--rgb-gray), 0.5) 20%,
    rgba(var(--rgb-gray-lighter), 0.25) 33%
  );
  background-size: 1200px 104px;
  position: relative;
  border-radius: 0.5em;
  max-height: 1em;
  min-width: 100px;
}
@keyframes placholdershimmer {
  0% {
    background-position: -500px 0;
  }
  100% {
    background-position: 500px 0;
  }
}