body {
  @apply bg-slate-50  text-slate-700 dark:bg-slate-900 dark:text-slate-200;



  #app {
    @apply min-h-screen w-full;
  }

  .wrapper {
    @apply flex flex-1 flex-col transition-margin duration-300 ease-in-out lg:ml-72;

    &.expanded {
      @apply lg:ml-20;
    }

    .header {
      @apply sticky top-0 z-50 flex h-16 w-full items-center overflow-visible bg-white drop-shadow-sm dark:bg-slate-800;
    }

    .content {
      @apply flex w-full flex-col scroll-smooth;
      min-height: calc(100vh - 4rem);
    }

    .footer {
      @apply mt-auto flex flex-wrap items-center justify-center gap-x-8 gap-y-2 bg-white px-4 py-5 text-slate-500 dark:bg-slate-800 sm:justify-between sm:px-6;
    }
  }
}
