.view {
  margin: auto;
  width: relative;
}

.wrapper {
  position: relative;
  overflow: auto;
  /*border: 0px solid white;*/
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  /*background-color: white; */
}

.first-col {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  left: 0px;
}

.second-col {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  left: 80px;
}

.third-col {
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  left: 150px;
}

#float {
  position: fixed;
  top: 7em;
  right: 2em;
  z-index: 100;
}

.table-sticky th {
  /*background: #fff; */
  position: sticky;
  top: 0;
}

thead {
  position: sticky;
  top: 0;
  /*background-color: #020202ef; */ /*Set a background color for the sticky header*/
}

/*added by sam to test the fixed table column not change color in dark theme*/

/* tambahan */
/* Main table styling */
#example {
  background-color: #fff6e6 !important;
  border: 1px solid #ffd8a8 !important;
}

/* Fixed column styling */
.dtfc-fixed-left {
  background-color: var(--bs-body-bg) !important; /* #060606 !important;*/
  border-right: 0px solid #c3e6cb !important;
}

/* Header styling */
.dtfc-fixed-left .dtfh-floatingheader {
  background-color: #28a745 !important;
  color: white !important;
}

/* Cell styling in fixed columns */
.dtfc-fixed-left td {
  background-color: inherit !important;
  border-right: 1px solid #c3e6cb !important;
}

/* Hover effect for fixed columns */
.dtfc-fixed-left tbody tr:hover td {
  background-color: #c1e1cc !important;
}

/* Main header styling */
#example thead th {
  background-color: #3498db !important;
  color: white !important;
}

/* Main table row hover */
#example tbody tr:hover td {
  background-color: #ffeccb !important;
}