.table {
  // text-wrap: nowrap;
  border-collapse: collapse;
}
.form-control{
  box-shadow: none !important;
}
.entries-value{
  width: 5rem;
}


table.dynamicScroll thead {
  position: sticky;
  top: 0;
  z-index: 10;
}


.table-responsive {
  border-radius: 0.6rem;
  height: 58vh;
  overflow: auto;
  &::-webkit-scrollbar{
    width: 3px;
    height: 3px;
  }
  &::-webkit-scrollbar-thumb{
    border-radius: 5px;
    background-color: #7e7e7e;
  }
  &::-webkit-scrollbar-track{
    border-radius: 5px;
    background-color: #e4e4e4;
  }
  thead {
    --bs-table-color: #ffffff;
    background: var(--gradient-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --bs-table-bg: none !important;
    user-select: none;
    th {
      font-weight: 500;
    }
  }
  
  // td , th{
  //   max-width: 300px;
  // }

  .table > tbody > tr:hover {
    box-shadow: 0 4px 0.8rem rgba(0, 0, 0, 0.233);
    transition: 0.3s all ease;
    cursor: pointer;
    transform: scaleY(1.01);
  }

  .table > :not(caption) > * > * {
    padding: 0.4rem 0.8rem;
    font-size: 14px;
  }
  .dropdown-menu {
    transform: translate(-50px, 0px) !important;
  }
  .dropdown-overflow{
    overflow: visible !important;
  }
}

.table-bottom {
  span {
    font-size: 14px;
  }

  ::ng-deep .ngx-pagination {
    margin-bottom: 0rem !important;
    .pagination-previous.disabled:before{
        margin-right: 0rem;
    }
    .pagination-next.disabled:after{
        margin-left: 0rem;
    }

    .current {
      background: var(--table-sec-color) !important;
      border-radius: 10px;
      font-size: 14px;
    }

    a {
      font-size: 14px;
      &:hover{
        border-radius: 8px;
      }
      &:after{
        margin-left: 0rem;
      }
      &::before{
        margin-right: 0rem;
      }
      .disabled:before{
        margin-right: 0rem;
      }
    }
  }
}

::ng-deep {
  .p-tooltip{
    max-width: 25rem !important;
    .p-tooltip-text{
      font-size: 12px !important;
      letter-spacing: 0.5px;
      padding: 0.55rem 0.55rem !important;
      background-color: #ffffff !important;
      color: #000000 !important;
      line-height: 25px;
    }
    &.p-tooltip-top .p-tooltip-arrow {
      border-top-color: #ffffff !important;
    }
    &.p-tooltip-bottom .p-tooltip-arrow {
      border-bottom-color: #ffffff !important;
    }
    &.p-tooltip-left .p-tooltip-arrow {
      border-left-color: #ffffff !important;
    }
    &.p-tooltip-right .p-tooltip-arrow {
      border-right-color: #ffffff !important;
    }
  }
}

:root{
  --table-pri-color: #009c97;
  // --table-pri-color: #ad5389;
  // --table-sec-color: #3c1053;
  --table-sec-color: #00076f;
  --gradient-color: linear-gradient(
      to right,
      var(--table-pri-color) 0%,
      var(--table-sec-color) 100%
    );
  // --gradient-color:radial-gradient(circle ,  var(--table-pri-color) 0%,
  //      var(--table-sec-color) 100%);
}

how to make the table header fixed