.event-details {
  @apply com-p-4 com-bg-white com-border-0 com-border-b com-border-solid com-border-Bright-Gray;
  .event-name {
    @apply com-m-0 com-text-3xl;
  }
}
.header {
  @apply com-bg-white com-h-28 com-border com-border-solid com-border-Bright-Gray com-border-t-0 com-flex;
}

.sidebar {
  @apply com-sticky com-top-16 com-h-[calc(100vh-70px)];

  a {
    @apply com-text-inherit com-no-underline;
  }
  .action-buttons {
    @apply com-p-4 com-pt-0;

    .categories {
      @apply com-flex com-flex-col com-gap-6;
    }

    .sidebar-heading {
      @apply com-text-base com-font-semibold com-flex com-items-center com-justify-between com-py-2 com-rounded-md;
    }

    .back-admin {
      @apply com-py-1 com-pr-3 com-rounded-md;
      .heading {
        @apply com-text-Cadet-Grey com-text-sm com-font-medium;
      }
    }

    .sidebar-expand-icon {
      .icon {
        @apply com-text-Cadet-Grey;
      }
    }

    .category-heading {
      @apply com-px-3 com-m-0 com-py-1 com-rounded-md com-text-Caption com-font-semibold;
    }
    .action-button {
      @apply com-p-2 com-rounded-lg com-flex com-gap-2 com-items-center com-cursor-pointer;
      &.active,
      &:hover {
        @apply com-bg-Azure-opacity-10;
        .heading {
          @apply com-font-semibold com-text-primary-500;
        }
        .icon {
          @apply com-text-primary-500;
        }
      }
      .icon {
        @apply com-h-5 com-w-5 com-text-sm com-flex com-text-Cadet-Grey com-items-center com-justify-center;
      }
      .heading {
        @apply com-text-sm com-font-normal;
      }
    }
  }
}
a {
  @apply com-flex com-gap-2 com-items-center;
}
.right-column {
  @apply com-w-full  com-max-w-screen-xl com-mx-auto;
}

.event-dashboard-menu {
  @apply com-sticky com-top-16 com-z-10;
  nb-card {
    @apply com-mx-0;
    nb-card-body {
      @apply com-p-0;

      div {
        @apply com-flex;
        .action-button {
          @apply com-p-2 com-flex com-gap-2 com-items-center  com-text-inherit com-no-underline com-w-max;
          &.active {
            @apply com-border-0 com-border-b-3 com-border-solid com-border-primary-500;
            .heading {
              @apply com-text-primary-500;
            }
          }
          .icon {
            @apply com-text-lg com-text-Cadet-Grey;
          }
          .heading {
            @apply com-text-base com-font-medium com-w-max;
          }
        }
      }
    }
  }
}

.router {
  @apply com-my-4 md:com-mx-4 com-mx-0;
}

.header-icons {
  @apply com-flex;
}

.header-icons-non-expanded {
  @apply com-mb-4 com-justify-center;
}

.header-icons-expanded {
  @apply com-justify-between com-gap-3;
}
