.dialog-wrapper {
  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;

  &.showup {
    background-color: rgba(0, 0, 0, 0.6);
  }

  &.showoff {
    @apply hidden;
  }

  > .dialog-container {
    @apply max-w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;

    > .dialog-header-container {
      @apply flex flex-row justify-between items-center w-full mb-4;

      > .title-text {
        > .icon-text {
          @apply mr-2 text-base;
        }
      }

      .btn {
        @apply flex flex-col justify-center items-center w-6 h-6 rounded hover:bg-gray-100 dark:hover:bg-zinc-700 hover:shadow;
      }
    }

    > .dialog-content-container {
      @apply flex flex-col justify-start items-start w-full;
    }

    > .dialog-footer-container {
      @apply flex flex-row justify-end items-center w-full mt-4;
    }
  }
}