:host {
  .data-table-responses {
    overflow: hidden;

    nb-card-body {
      padding: 0;
    }
  }

  nb-card-header {
    @apply com-m-0 com-flex com-items-center;

    p {
      @apply com-m-0;
    }
  }

  .change-bulk-btn {
    @apply com-m-0 com-flex com-items-center;
  }

  .data-table-container {
    @media screen and (max-width: 800px) {
      .desktop-hidden {
        display: initial;
      }
      .mobile-hidden {
        display: none;
      }

      .view-mobile-response {
        display: block;
        margin-top: 0.5rem;
      }
    }

    @media screen and (min-width: 800px) {
      .desktop-hidden {
        display: none;
      }
      .mobile-hidden {
        display: initial;
      }
    }

    .ngx-datatable {
      @apply com-bg-white;
      height: 70vh;

      .header-column-template {
        p {
          margin: 0;
        }

        > .name-filter {
          margin-top: 5px;
        }

        > .registration-status-filter {
          display: flex;
          flex-wrap: nowrap;

          div {
            border: 0.5px solid lightgrey;
            cursor: pointer;
            padding: 5px;
          }

          p {
            font-size: 12px;
            margin: 0;
          }
        }
      }

      .row-header {
        white-space: normal;
      }

      .row-header.question {
        overflow-y: visible;

        white-space: normal;
        @apply com-flex com-gap-1 com-items-baseline com-cursor-pointer;

        .small-text {
          font-size: 10px;
        }
      }

      .row-cell.question {
        white-space: normal;

        p {
          font-size: 14px;
        }
      }
    }
  }
}

.name-filter {
  @apply com-w-full com-flex com-gap-1 com-items-center;
  input {
    @apply com-w-full;
  }
  .clear-search-filter {
    @apply com-cursor-pointer;
    fa-icon {
      @apply com-text-red-500 com-text-base;
    }
  }
}

.group-actions {
  display: flex;
  flex-wrap: wrap;

  button,
  nb-select,
  a {
    margin: 0.5rem;
  }
}

.question-responses {
  @apply com-mb-0;
  white-space: pre-wrap;
}

.dropdown {
  @apply com-flex com-items-center com-gap-1 com-h-8 com-p-1 com-text-sm com-rounded-md com-cursor-pointer com-bg-[#F6F9FC]  com-my-2   com-w-1/2 com-border com-border-solid com-border-primary-200 hover:com-bg-white;

  select {
    @apply com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-w-full;
  }
}

.user-detail-dropdown {
  @apply com-flex com-items-center com-gap-1 com-h-6 com-p-0 com-text-sm com-rounded-[4px] com-cursor-pointer com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-border com-border-solid com-border-[#E4E9F2] com-w-full;
  select {
    @apply com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-w-full;
  }
}

.track-slot-filter-dropdown {
  @apply com-flex com-items-center com-gap-1 com-h-8 com-p-1 com-text-sm com-cursor-pointer com-bg-transparent com-my-2  com-w-max com-border-0;
  select {
    @apply com-bg-transparent  com-cursor-pointer com-w-full com-text-black;
  }
}

.clear-track-filter {
  @apply com-cursor-pointer;
  fa-icon {
    @apply com-text-red-500 com-text-base;
  }
}

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

.change-status-dialog {
  @apply md:com-w-500px;

  nb-card-header {
    @apply com-flex com-items-center com-justify-between;
    .title {
      @apply com-flex;
      p {
        @apply com-m-0 com-text-base com-text-black com-font-medium;
      }
    }
  }
}

.filter {
  @apply com-cursor-pointer;
}
.user-engagement-filter {
  @apply com-w-full md:com-w-[50dvw] com-h-full md:com-max-h-[90dvh];
  nb-card-header,
  nb-card-footer {
    @apply com-flex com-justify-between com-items-center;
  }
  nb-card-body {
    form {
      @apply com-flex com-flex-col com-gap-2;
      .form-group {
        @apply com-flex com-items-center com-gap-4 com-justify-between;
        > label {
          @apply com-flex com-gap-3;
        }
        label {
          @apply com-text-xs;
        }
      }
      .attended-dropdown {
        @apply com-grid com-grid-cols-2 com-w-3/5 com-gap-3;
      }

      .select {
        @apply com-flex com-items-center com-gap-1 com-h-6 com-p-1 com-text-sm com-rounded-[4px] com-cursor-pointer com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50  com-border com-border-solid com-border-[#E4E9F2]  com-w-full;
        select {
          @apply com-bg-[#F6F9FC] hover:com-bg-[#eef2f7]/50 com-cursor-pointer com-border-0 com-w-full;
        }
      }
    }
  }
}
