.event-location-tracks {
  .add-track-button {
    @apply com-text-sm com-mb-4;
  }

  .track-container {
    nb-action {
      display: flex;
      flex-wrap: wrap;

      nb-icon {
        font-size: 1.3rem;
        @apply com-text-tWhite;
      }
    }

    nb-accordion-item-header {
      @apply com-py-1 com-px-2 com-overflow-x-auto com-justify-between com-border-0 com-rounded-md com-bg-Chrome-Yellow;
      .track-name {
        @apply com-text-lg com-mr-2 com-my-0 com-ml-0;
        display: inline-block;
      }

      .actions {
        @apply com-mr-8 com-flex com-flex-row;
      }
    }

    nb-accordion-item-body {
      @apply com-p-0 com-bg-white;
      .add-session {
        @apply com-flex com-justify-center com-text-primary-500 com-cursor-pointer com-text-base;
      }
      ::ng-deep {
        div {
          .item-body {
            @apply com-px-0 md:com-px-2 md:com-pt-4 com-pb-6;
          }
        }
      }
      .group-date {
        @apply com-mt-4 com-mb-1 com-font-bold;
      }
      nb-list {
        @apply com-m-0 com-p-0;
        nb-list-item {
          display: flex;
          @apply com-border-t-0 com-py-3 com-items-stretch com-px-1 md:com-px-4;

          .session-time {
            @apply com-pr-1 md:com-pr-3 md:com-flex com-gap-2 md:com-w-28 com-border-0 com-border-r-2 com-border-solid com-border-Bright-Gray com-pt-px;

            p {
              margin: 0;
              text-align: right;
            }
            .start-time {
              @apply com-text-base md:com-text-sm;
            }
            .end-time {
              @apply com-text-xs md:com-text-sm;
            }
          }
          .session-title {
            @apply com-w-56 md:com-w-64 com-flex com-justify-between com-flex-col com-mr-2px;
            p {
              @apply com-my-0 com-text-sm md:com-text-base com-font-semibold com-ml-4;
            }
          }
          .action-buttons {
            @apply com-bg-[#6B72801A]  com-h-7 com-rounded-lg com-flex com-gap-3 com-items-center com-px-2;
            .edit,
            .attachment,
            .public {
              @apply com-text-primary-500 com-cursor-pointer;
            }

            .delete {
              @apply com-text-red-500 com-ml-2 com-cursor-pointer;
            }
          }
          .speakers {
            @apply com-flex com-flex-wrap com-gap-2 com-w-20 md:com-w-28 com-justify-end;
            .avatar {
              @apply com-h-7 com-w-7 com-overflow-hidden com-border com-border-solid com-border-Bright-Gray com-bg-tWhite;
              border-radius: 50%;

              img {
                width: 100%;
              }
            }
          }

          .session-details {
            width: 90%;
            padding-left: 0.5rem;

            .session-title {
              p:nth-of-type(1) {
                @apply com-text-base;
                @apply com-mt-1 com-mb-0;
                font-weight: normal;
              }

              .tag-badge {
                @apply com-mt-0 com-mb-0 com-p-0 com-flex com-space-x-1;
              }

              .session-speaker {
                @apply com-mt-1 com-flex com-gap-3;
              }
            }

            .links {
              @apply com-flex com-flex-row com-gap-7;

              .session-links {
                @apply com-mt-1;

                .add-session,
                .edit-session {
                  @apply com-text-xs com-flex com-items-center;

                  nb-icon {
                    @apply com-text-xs com-ml-1;
                  }
                }
              }
            }

            .public-session {
              @apply com-mt-1;
              a {
                @apply com-text-xs com-flex com-items-center;

                nb-icon {
                  @apply com-text-xs com-ml-1;
                }
              }
            }
          }
        }
      }
      .mobile-action-buttons {
        @apply com-flex com-gap-2px com-ml-1 com-mt-1 com-justify-between;
        div {
          @apply com-bg-[#6B72801A] com-w-7  com-h-7 com-rounded-lg com-flex com-gap-3 com-items-center com-justify-center;
        }
        .edit,
        .attachment,
        .public {
          @apply com-text-primary-500 com-cursor-pointer;
        }

        .delete {
          @apply com-text-red-500  com-cursor-pointer;
        }
      }
      .edit-outline {
        @apply com-mx-4 com-cursor-pointer com-text-2xl md:com-text-xl;
      }

      .close-circle-outline {
        @apply com-cursor-pointer com-text-2xl md:com-text-xl;
      }

      .no-slots-yet {
        @apply com-text-xl com-font-medium;
      }
    }
  }
}
.save-button-bottom {
  @apply com-mt-6;
}

.session-name,
.date,
.start-time,
.end-time,
.select-track,
.select-speaker {
  @apply com-mb-4;
}

.dropdown {
  @apply com-w-full com-flex com-items-center com-gap-1 com-h-10 com-p-1 com-text-sm com-rounded-md com-cursor-pointer com-bg-[#eef2f7] com-my-0 com-mb-2;
  select {
    @apply com-bg-[#eef2f7] com-cursor-pointer com-w-full;
  }
}

nb-accordion-item {
  @apply com-bg-white;
}

.embedded-dialog {
  @apply com-w-[30dvw] com-max-h-[90dvh];

  nb-card-header {
    @apply com-flex com-justify-between com-items-center com-py-2;
    h2 {
      @apply com-text-lg com-font-medium com-text-black;
    }
  }
}

.confirmation-dialog-box {
  nb-card-header {
    @apply com-flex com-items-center com-justify-between;
    .confirmation-heading {
      @apply com-text-base;
    }
  }
  .confirmation-text {
    @apply com-m-0;
  }
}

.tags {
  @apply com-flex com-flex-row com-items-center com-gap-3 com-ml-4 com-mt-2;
}

.desktop-action-buttons {
  @apply com-flex com-justify-between md:com-gap-4 com-gap-2px com-w-full md:com-w-auto com-items-center;
}
