.tf-fixed-header-table {
  overflow-y: auto;
  position: relative;
}

.tf-table-icon {
  position: absolute;
  top: 10px;
  right: 0;
  margin-right: 10px;
  z-index: 100;
  cursor: pointer;
}

.tf-table {
  width: 100%;
  .sticky-column {
    position: sticky;
    left: 50px;
    z-index: 999;
    // background-color: var(--input-label-bg-color);
  }

  th,
  td {
    text-align: left;
    font-size: 12px;
    padding: 7px 8px;
  }

  thead {
    tr {
      th {
        border-bottom: 1px solid var(--slider-table-color);
      }

      th {
        .tf-label-checkbox-container {
          display: flex;
          align-items: center;

          .tf-table-checkbox {
            padding-right: 8px;
          }
        }
      }
    }
  }

  tbody {
    tr:hover,
    tr.hover {
      background-color: var(--hover-color);

      .icon-container {
        opacity: 1;
        transform: translateX(0);
      }
      .sticky-column {
        background-color: var(--hover-color);
      }

      .tf-table-drag,
      .tf-table-drag-icon {
        opacity: 1 !important;
      }
    }

    .edit-row:hover {
      background-color: transparent;
    }

    tr {
      .action-column {
        opacity: 0;
      }

      .icon-container {
        padding-left: 8px;
        opacity: 0;
        display: flex;
        justify-content: flex-end;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateX(20px);
      }

      .tf-data-checkbox-container {
        display: flex;
        align-items: center;

        .tf-table-checkbox {
          padding-right: 8px;
        }

        .tf-table-drag {
          opacity: 0;
          transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .tf-table-drag-icon {
          @extend .tf-table-drag;
          cursor: grab;
        }
      }

      td {
        position: relative;
        color: var(--table-column-text-color);

        &.clickable-cell {
          cursor: pointer;
        }
      }

      .edit_depends_on_script {
        border-radius: 8px;
        margin: 8px;
        border: 1px solid var(--tf-select-option-wrapper-box-shadow);

        &__header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 8px 8px 0 0;
          background: var(--slider-table-color);
          min-height: 32px;
          padding: 0 8px;

          &__link {
            border-bottom: 2px solid var(--nlp-color);
            cursor: pointer;
          }
        }

        &__form {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 8px;

          &__button {
            display: flex;
            justify-content: end;
            gap: 8px;
          }
        }
      }
    }
    .tf-odd-row {
      background-color: var(--tf-odd-row-bg, white);
    }

    .tf-even-row {
      background-color: var(--tf-even-row-bg, white);
    }

    .tf-hover-row:hover {
      background-color: var(--hover-color) !important;
    }
    .clickable-row{
      cursor: pointer;
    }
  }

  .primary-bg {
    background-color: var(--table-header-color-primary);
  }

  .secondary-bg {
    background-color: #e2e6ff;
  }

  .default-bg {
    background-color: transparent;
  }

  .default-color {
    color: var(--table-header-text-color);
  }

  .primary-color {
    color: var(--quiz-result-table-header-text);
  }
}

.border-borderRadius {
  border: 1px solid #c2d2fb !important;
  border-radius: 5px;
  border-collapse: none !important;
}

.tf-fixed-header {
  position: sticky !important;
  top: 0;
  z-index: 99;
  background-color: Var(--file-details-bg);
}

.no-data-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

tbody tr.disabled-row {
  opacity: 0.5;
  cursor: not-allowed;
}