@font-face {
  font-family: 'Open Sans';
  src: url('../themes/vuexy/fonts/open-sans/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../themes/vuexy/fonts/open-sans/OpenSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.dropdown-toggle::after {
  margin-inline: 0.3em 0;
  margin-block-start: -0.497em;
}

.table th {
  text-transform: none;
}

.card {
  min-width: 0;
}
.card-datatable {
  width: 100%;
  overflow: hidden; /* penting */
}

/* DataTable */
table.dataTable {
  width: 100% !important;
}
div.dt-container div.dt-length,
div.dt-container div.dt-search {
  margin-block-end: 0 !important;
}
.dataTables_scrollBody {
  overflow-x: auto !important;
}

.serdik-chooser,
.mentor-chooser {
    position: relative;
}

.serdik-chooser input,
.mentor-chooser input {
    padding-right: 45px !important;
    cursor: pointer;
    background-color: #fff;
}

.serdik-chooser .chooser-icon,
.mentor-chooser .chooser-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #6b7280;
    pointer-events: none;
    font-size: 14px;
}

.readonly-field {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #dbe2ea !important;
    cursor: not-allowed !important;
}

.readonly-field:focus {
    background-color: #f1f5f9 !important;
    box-shadow: none !important;
    border-color: #dbe2ea !important;
}

/* DARK MODE */
/* [data-bs-theme=dark] .border-secondary {
  border-color: var(--bs-table-border-color) !important;
} */