.card-row {
  display: flex;
  flex-direction: column;
  margin: 0 -0.5rem;

  @media screen and (min-width: 800px) {
    flex: 1 0 calc(50% - 1rem);
    flex-direction: row;
  }
}

.card-col {
  flex: 1 0 100%;
  flex-direction: column;
  margin: 0 0.5rem;

  @media screen and (min-width: 800px) {
    flex: 1 0 calc(50% - 1rem);
    flex-direction: row;
  }
}

.basic-details {
  @apply com-flex md:com-flex-row com-flex-col com-items-center com-m-0 md:com-mb-0 com-mb-3;

  .logo-name {
    @apply com-flex com-items-center;
    .logo {
      @apply com-h-12 com-w-12 com-overflow-hidden;

      img {
        @apply com-bg-tWhite com-h-full com-object-contain com-rounded-lg com-w-full;
      }
    }

    h4 {
      @apply com-mx-2 com-my-0;
    }
  }

  .people-logo {
    @apply com-m-0 com-ml-2;
  }
}

.header-links {
  .buttons {
    @apply com-flex com-flex-wrap md:com-gap-0 com-gap-2 com-justify-evenly md:com-justify-start;
    a,
    button {
      @apply md:com-mr-4 com-m-0;
    }
  }
}

.menu {
  @apply com-border-0 com-border-b com-border-solid com-border-gray-200 com-w-auto com-overflow-auto com-scrollbar-hide com-pt-4 com-mx-6;
  a {
    @apply com-text-gunmetal com-text-sm com-leading-4 com-h-fit com-m-0 com-pt-0 com-px-6 com-pb-17px com-cursor-pointer com-no-underline;

    nb-icon,
    fa-icon {
      @apply com-text-gray-500;
    }

    img {
      @apply com-mb-1;
    }

    .title {
      @apply com-self-center com-ml-2;
    }
    span {
      @apply com-text-gray-500;
    }
  }

  nb-icon {
    @apply com-text-2xl;
  }
  fa-icon {
    @apply com-text-xl;
  }

  .active {
    @apply com-border-0 com-border-b-3 com-border-solid com-border-Blueberry;

    nb-icon,
    fa-icon,
    .title {
      @apply com-text-Blueberry;
    }
  }
}

.disabled {
  fa-icon,
  span {
    @apply com-text-gray-400 #{!important};
  }
}

.header {
  @apply com-bg-white md:com-p-4 com-px-3 com-py-4 com-flex md:com-flex-row com-flex-col com-items-center md:com-gap-4 com-gap-0 md:com-sticky com-relative md:com-top-[68px] com-z-10;
}

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

  a {
    @apply com-text-inherit com-no-underline;
  }
  .action-buttons {
    @apply com-flex com-flex-col com-p-4 com-pt-3 com-gap-6;
    .sidebar-expand-icon {
      .icon {
        @apply com-text-Cadet-Grey com-cursor-pointer;
      }
      .heading {
        @apply com-text-xs 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 com-mb-2;
    }

    .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-text-sm com-flex com-text-Cadet-Grey com-items-center com-justify-center com-w-5 com-h-5;
      }
      .heading {
        @apply com-text-sm com-font-normal;
      }

      &.public-event-page {
        @apply com-text-Azure;
        .icon {
          @apply com-text-Azure;
        }
      }
      &.stats {
        @apply com-text-Caribbean-Green;
        .icon {
          @apply com-text-Caribbean-Green;
        }
      }
    }
  }
}
a {
  @apply com-flex com-items-center;
}
.right-column {
  @apply com-w-full;
}

.event-dashboard-menu {
  @apply com-sticky com-top-16 com-z-10 com-my-4;
  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-w-full md:com-m-4 com-m-0 com-bg-white com-rounded-lg;
}

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

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

.header-icons-expanded {
  @apply com-justify-between com-items-center;
}

nb-badge {
  @apply md:com-top-[10px] com-top-[-8px] #{!important};
}
