.hackathon-details {
  @apply com-p-2 com-bg-white com-border-0 com-border-b com-border-solid com-border-Bright-Gray com-flex com-gap-3 com-items-center;
  h1 {
    @apply com-text-3xl com-m-0;
  }
  .badge {
    @apply com-py-1 com-px-2 com-rounded-[32px] com-border com-border-solid com-border-purple-700 com-bg-purple-50;
    p {
      @apply com-m-0 com-text-purple-700 com-text-sm;
    }
  }
  .public-page-button {
    @apply com-no-underline;
  }
}

.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 com-overflow-x-hidden;

    .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;
      }
    }

    .status-buttons {
      @apply com-flex com-flex-col com-justify-center com-mb-6 com-mt-5;
      .border {
        @apply com-border com-border-Bright-Gray com-border-solid com-rounded-md;
      }
      section {
        @apply com-flex com-justify-center com-font-medium;
        .select-status {
          @apply com-w-full com-p-2 com-rounded com-text-sm com-font-medium com-text-tWhite com-bg-primary-500;
          option {
            @apply com-bg-white com-text-black com-font-medium;
          }
        }
      }
    }

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

    .category-heading {
      @apply com-text-Caption com-font-semibold com-mb-2 com-flex com-items-center com-px-3 com-py-1;
    }

    .action-button {
      @apply com-p-2 com-pr-3 com-rounded-lg com-flex com-gap-2 com-items-center com-cursor-pointer;
      &.active,
      &:hover {
        @apply com-bg-Azure-opacity-10 com-text-tYankees-Blue;
        .action-button-name {
          @apply com-font-semibold com-text-primary-500;
        }
        .icon {
          fa-icon {
            @apply com-text-primary-500;
          }
        }
      }

      .icon {
        @apply com-text-sm com-flex com-text-Cadet-Grey com-items-center com-justify-center com-w-5 com-h-5;
      }

      .action-button-name {
        @apply com-text-sm com-font-normal;
      }
    }
  }
}

a {
  @apply com-flex com-gap-2 com-items-center;
}

.router {
  @apply com-w-full com-my-2 com-mx-4;
}

.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;
}
