/*======== Animation Left, Right, Up and Down =================//start> */

  /* Base styles */
  
  .animLoR,
  .animRoL,
  .animToD,
  .animDoT {
    opacity: 0;
    transition: opacity var(--timing-value, 0.6s) ease-out,
      transform var(--timing-value, 0.6s) ease-out;
  }

  /* Animations for Left-to-Right */
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(calc(-1 * var(--distance-value, 50px)));
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeOutLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(calc(-1 * var(--distance-value, 50px)));
    }
  }

  .animLoR.animate-in-left {
    animation: fadeInLeft var(--timing-value, 0.6s) forwards;
  }

  .animLoR.animate-out-left {
    animation: fadeOutLeft var(--timing-value, 0.6s) forwards;
  }

  /* Animations for Right-to-Left */
  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(var(--distance-value, 50px));
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeOutRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(var(--distance-value, 50px));
    }
  }

  .animRoL.animate-in-right {
    animation: fadeInRight var(--timing-value, 0.6s) forwards;
  }

  .animRoL.animate-out-right {
    animation: fadeOutRight var(--timing-value, 0.6s) forwards;
  }

  /* Animations for Top-to-Down */
  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(calc(-1 * var(--distance-value, 50px)));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeOutDown {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(calc(-1 * var(--distance-value, 50px)));
    }
  }

  .animToD.animate-in-down {
    animation: fadeInDown var(--timing-value, 0.6s) forwards;
  }

  .animToD.animate-out-down {
    animation: fadeOutDown var(--timing-value, 0.6s) forwards;
  }

  /* Animations for Down-to-Top */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(var(--distance-value, 50px));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeOutUp {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(var(--distance-value, 50px));
    }
  }

  .animDoT.animate-in-up {
    animation: fadeInUp var(--timing-value, 0.6s) forwards;
  }

  .animDoT.animate-out-up {
    animation: fadeOutUp var(--timing-value, 0.6s) forwards;
  }


    /* Zoom In Animation */
  .animate-in-zoom-in {
    transform: scale(1);
    opacity: 1;
    transition: transform var(--timing-value), opacity var(--timing-value);
  }

  .animate-out-zoom-in {
    transform: scale(0.5);
    opacity: 0;
    transition: transform var(--timing-value), opacity var(--timing-value);
  }

  /* Zoom Out Animation */
  .animate-in-zoom-out {
    transform: scale(1);
    opacity: 1;
    transition: transform var(--timing-value), opacity var(--timing-value);
  }

  .animate-out-zoom-out {
    transform: scale(1.5);
    opacity: 0;
    transition: transform var(--timing-value), opacity var(--timing-value);
  }
/*======== Animation Left, Right, Up and Down =================// End >*/



/* Number Formating --------------*/
.amtRight{
  text-align:right;
}