/* Frontend modern light styles */
.wdm-responsive-table {
  overflow-x: auto !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  padding: 20px !important;
  border-radius: 12px !important;
  position: relative !important;
}
.wdm-table-intro {
  background-color: #2e2255 !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 20px !important;
  margin: 0 0 20px 0 !important;
  width: 100% !important;
}
.wdm-table-h {
  font-weight: 700 !important;
  color: #ffffff !important;
}
.wdm-table-hl {
  margin: -10px 0 0 0 !important;
  color: #ffcf5d !important;
}
#data-manager-table {
  margin: 20px 0 20px 0 !important;
}
.wdm-table {
  width: 100% !important;
  margin: 20px 0 !important;
  background: #fff !important;
  overflow: hidden !important;
  table-layout: auto !important;
  color: #2e2255 !important;
}
.wdm-table th,
.wdm-table td {
  padding: 12px !important;
  text-align: center !important;
}
.wdm-table thead th {
  background-color: #2e2255 !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  border: none;
}
.wdm-table thead th:first-child {
  border-radius: 12px 0 0 0 !important;
  border: none !important;
  border-block-start: none !important;
}
.wdm-table thead th:last-child {
  border-radius: 0 12px 0 0;
  border: none !important;
  border-block-start: none !important;
}
.wdm-table tr:last-child td:first-child {
  border-radius: 0 0 0 12px;
  border: none !important;
  border-block-start: none !important;
}
.wdm-table tr:last-child td:last-child {
  border-radius: 0 0 12px 0;
  border: none !important;
  border-block-start: none !important;
}
.wdm-table tr:nth-child(even) {
  /* background: #fbfbfc; */
  background-color: #ffcf5d !important;
}
.wdm-table a {
  color: #1e73be !important;
  text-decoration: none !important;
}
#data-manager-table,
#data-manager-table th,
#data-manager-table td {
  border: none !important;
}
@media (max-width: 700px) {
  .wdm-table td,
  .wdm-table th {
    padding: 10px !important;
    font-size: 14px !important;
  }
}

/* DataTable styling */
.dt-search {
  position: absolute !important;
  width: 20% !important;
  right: 38% !important;
  top: 0px !important;
}
.dt-search label {
  display: none !important;
}

.dt-buttons button {
  background-color: #ffcf5d !important;
  color: #2e2255 !important;
  padding: 8px 30px !important;
  border-radius: 50px !important;
  font-weight: 500 !important;
  border: 1px solid #ffcf5d !important;
  text-transform: uppercase !important;
  position: relative !important;
  overflow: hidden !important; /* Important for pseudo-element */
  transition: color 0.5s linear !important;
}

.dt-buttons button::before {
  position: absolute !important;
  content: "" !important;
  left: 0 !important;
  top: 0 !important;
  background-color: #2e2255 !important;
  width: 0% !important;
  height: 100% !important;
  border-radius: 50px !important;
  z-index: 0 !important;
  transition: all 0.3s linear !important;
}

.dt-buttons button:hover::before {
  width: 100% !important;
}

.dt-buttons button span {
  position: relative !important;
  z-index: 1 !important;
}

.dt-buttons button:hover {
  background-color: #ffcf5d !important;
  color: #ffffff !important;
}
#data-manager-table_wrapper {
  width: 100% !important;
  overflow: auto !important;
}
.dt-paging {
  position: absolute !important;
  bottom: 0px !important;
  right: 10px !important;
}
.dt-paging-button {
  padding: 4px 8px !important;
}
.dt-length {
  width: 20% !important;
  position: absolute !important;
  top: 0 !important;
  right: 10px !important;
}
.dt-length label {
  display: none !important;
}
.dt-buttons, .dt-length, .dt-search{
  margin: 0 0 20px 0 !important;
}
table, tr, td{
  border: none !important;
}

.dt-scroll-body, .dt-scroll-head, .dt-scroll, .dt-scroll-headInner{
  border: none !important;
}

.dataTables_scroll {
  border: none !important;
  box-shadow: none !important;
}

.dataTables_scrollBody {
  overflow-x: auto !important;
  border: none !important;
}


@media only screen and (max-width: 1000px) {
  .dt-search {
    position: relative !important;
    width: calc(100% - 10px) !important;
    right: 0px;
    margin: 20px 0 20px 0 !important;
  }
}

@media only screen and (max-width: 750px) {
  .dt-length {
    position: relative !important;
    width: 100% !important;
    right: 0px !important;
    margin: 20px 0 0 0 !important;
  }
  .dt-paging{
    position: relative !important;
    bottom: 0 !important;
  }
  .dt-info{
    margin: 20px 0 20px 0 !important;
  }
}

@media only screen and (max-width:400px){
  .dt-buttons{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
  }
}