@keyframes modal-bg-fade-in {
  from {
    opacity: 0;
  }
  to {
    display: block !important;
    opacity: 0.75;
  }
}

.modal-bg-fade-in {
  animation: modal-bg-fade-in 200ms ease-out forwards;
}

@keyframes modal-bg-fade-out {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 0;
  }
}

.modal-bg-fade-out {
  animation: modal-bg-fade-out 200ms ease-out forwards;
}

@media (min-width: 1024px) {
  @keyframes modal-slide-in {
    from {
      transform: translateX(-50%) translateY(500%);
    }
    to {
      transform: translateX(-50%) translateY(0);
    }
  }
}

@media (max-width: 1024px) {
  @keyframes modal-slide-in {
    from {
      transform: translateY(100%);
    }
    to {
      opacity: translateY(0);
    }
  }
}

.modal-slide-in {
  animation: modal-slide-in 200ms ease-out forwards;
}

@media (min-width: 1024px) {
  @keyframes modal-slide-out {
    from {
      transform: translateX(-50%) translateY(0);
    }
    to {
      transform: translateX(-50%) translateY(500%);
    }
  }
}

@media (max-width: 1024px) {
  @keyframes modal-slide-out {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }
}

.modal-slide-out {
  animation: modal-slide-out 200ms ease-out forwards;
}

@keyframes checkbox-slide-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(150%);
  }
}

.checkbox-slide-right {
  animation: checkbox-slide-right 200ms ease-out forwards;
}

@keyframes checkbox-slide-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-150%);
  }
}

.checkbox-slide-left {
  animation: checkbox-slide-left 200ms ease-out forwards;
}

@media (max-width: 1024px) {
  @keyframes notification-tray-slide-in {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .notification-tray-slide-in {
    animation: notification-tray-slide-in 200ms ease-out forwards;
  }
}

@media (max-width: 1024px) {
  @keyframes notification-tray-slide-out {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100%);
    }
  }

  .notification-tray-slide-out {
    animation: notification-tray-slide-out 200ms ease-out forwards;
  }
}