@keyframes rotate90Anim {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(22.5deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes rotate0Anim {
  0% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes rotate180Anim {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes slide-from-right {
  100% {
    margin-right: 0;
  }
}
@keyframes slide-right-absolute {
  0% {
    right: -300px;
  }
  100% {
    right: 34px;
  }
}
.rotate-90 {
  animation-name: rotate90Anim;
  animation-duration: 1s;
}
.rotate-180 {
  /* transition: all 0.5s ease;
    transform: rotate(180deg); */
  animation-name: rotate180Anim;
  animation-duration: 0.5s;
}
.add-effect-all {
  transition: all 0.5s ease;
  transform-origin: center;
}
.turn-down {
  transform: rotate(180deg);
  /* animation-name: rotate180Anim; */
  /* animation-duration: 0.5s; */
}
.turn-back {
  transform: rotate(0deg);
  /* animation-name: rotate0Anim; */
  /* animation-duration: 0.5s; */
}
/* #content-wrap {
  animation-name: page-slide;
  animation-duration: 1s;
  background: #eaf0f9;
} */

@keyframes page-slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.scale-animation {
  animation-name: sacle-anim;
  animation-duration: 0.5s;
}
@keyframes sacle-anim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
.upos-animation-opacity {
  animation-name: page-slide;
  animation-duration: 1.5s;
}
/* @keyframes page-slide {
  from {
    margin-left: 480px;
  }
  to {
    margin-left: 240px;
  }
} */

@keyframes warning-row {
  0% {
    background: #fff;
  }
  17% {
    background: red;
  }
  33% {
    background: #fff;
  }
  56% {
    background: red;
  }
  77% {
    background: red;
  }
  95% {
    background: #fff;
  }
  100% {
    background: red;
  }
}