.loadingOverlayDirective {
  background: rgba(255, 255, 255, 0.7);
  color: black;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center; }
  .loadingOverlayDirective.ng-hide-add {
    animation: 0.5s myChangeBack ease; }
  .loadingOverlayDirective.ng-hide-remove {
    animation: 0.5s myChange ease; }

@keyframes myChange {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes myChangeBack {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes flipInX {
  0% {
    transform: perspective(500px) rotate3d(0, 1, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0; }
  40% {
    transform: perspective(500px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(500px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(500px) rotate3d(0, 1, 0, -20deg);
    transition-timing-function: ease-in;
    transition-timing-function: ease-in; }
  60% {
    transform: perspective(500px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(500px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(500px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    transform: perspective(500px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(500px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(500px) rotate3d(0, 1, 0, -5deg); }
  100% {
    transform: perspective(500px);
    transform: perspective(500px);
    transform: perspective(500px); } }

@keyframes flipOutX {
  100% {
    transform: perspective(500px) rotate3d(0, 1, 0, -90deg);
    transition-timing-function: ease-in;
    opacity: 0; }
  0% {
    transform: perspective(500px);
    transform: perspective(500px);
    transform: perspective(500px); } }

/*# sourceMappingURL=LoadingOverlay.css.map */