@font-face {
    font-family: 'Exo2-Regular';
    src: url('../../../../fonts/Exo2-Regular.ttf');
}

@font-face {
    font-family: 'Exo2-Bold';
    src: url('../../../fonts/Exo2-Bold.ttf');
}

@font-face {
    font-family: 'Exo2-Medium';
    src: url('../../../fonts/Exo2-Medium.ttf');
}

@font-face {
    font-family: 'Exo2-SemiBold';
    src: url('../../../fonts/Exo2-SemiBold.ttf');
}

:root {
    --default-font: "Exo2-Regular";
}

* {
    font-family: var(--default-font) !important;
}


.table-fit{
    width: 1%;
    white-space: nowrap;
}

.datatables-header-left{
    display: flex;
    justify-content: flex-start;
}

th, td {
    white-space: nowrap;
}

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

.select2-container--default
.select2-selection--multiple{
    border: 1px solid #dce7f1 !important;
    border-radius: .25rem !important;
    padding: .100rem .50rem .50rem .100rem !important;
}

.select2-container--default
.select2-selection--multiple
.select2-selection__choice{
    background-color: #435EBE !important;
    color: white !important;
    border: none !important;
}

.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove{
    color: white !important;
}

.select2-container--default .select2-selection--multiple
.select2-selection__choice__remove:hover,
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove:focus {
    background-color: #5e7ce9 !important;
    color: white !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #435EBE !important;
}

html[data-bs-theme=dark] .select2-container--default .select2-selection--multiple {
    background-color: #121212 !important;
    border: 1px solid #35354f !important;
}

html[data-bs-theme=dark] .select2-container--open .select2-dropdown--below {
    background-color: #121212 !important;
    border: 1px solid #35354f !important;

}

html[data-bs-theme=dark] ul .select2-results__options{
    padding-left: 0 !important;
}

html[data-bs-theme=dark] .note-editing-area .note-editable {
    background-color: #121212 !important;
    color: white !important;
}

html[data-bs-theme=dark] .note-toolbar {
    border-bottom: 1px solid #35354f !important;
}

.btn-edit-article{
    width: 100%;
    background-color: #778cd649;
    color: #435EBE;
    border-radius: 5px;
    padding: 10px 30px;
    margin: 3px
}

.btn-publish:hover{
    background-color: #5e7ce9;
    color: white;
}

.btn-publish{
    width: 120px;
    height: 38px;
    background-color: #435EBE;
    color: white;
    border-radius: 5px;
    border: none;
    margin: 3px
}

.btn-publish:hover{
    background-color: #5e7ce9;
    color: white;
}

.header{
    /* background-color: white; */
}

.is-invalid {
    border-color: red;
}

.is-valid {
border-color: green;
}

.criteria-column {
    min-width: 250px;
    max-width: 250px;
}

.evaluator-column {
    min-width: 180px;
    max-width: 180px;
}

.score-column {
    min-width: 110px;
    max-width: 110px;
}

.total-column{
    min-width: 70px;
    max-width: 70px;
}

.overflow-container {
    overflow-x: auto;
    overflow-y: hidden;
}

.form-select {
    padding-right: 40px !important;
}

/* Pastikan tabel dapat di-scroll secara horizontal */
.table-responsive {
    position: relative;
    overflow-x: auto;
}

/* Header tetap */
.scrollable-table thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 2;
}

/* Kolom tetap */
.fixed-column {
    position: sticky;
    left: 0;
    background-color: #ffffff !important;
    z-index: 1;
    min-width: 150px;
    box-shadow: 2px 0px 5px rgba(0,0,0,0.1);
}

/* Kolom evaluator yang dapat di-scroll */
.scrollable-table th, .scrollable-table td {
    min-width: 120px;
    text-align: center;
    border: 1px solid #dee2e6;
}

/* Input dan dropdown untuk kolom evaluator */
.scrollable-table select, .scrollable-table input {
    width: 100%;
    max-width: 120px;
}

#evaluationTable th:first-child,
#evaluationTable td:first-child {
    max-width: 180px;
    white-space: normal;
    word-wrap: break-word;
}

table.dataTable thead th.ui-state-default:first-child, table.dataTable tfoot th.ui-state-default:first-child{
    border-left-width: 0px !important;
}

html[data-bs-theme=dark] table.dataTable thead>tr>*.ui-state-default{
    background: #1F1F1F !important;
}

div.dt-container select.dt-input{
    margin-right: 20px !important;
}

div.dt-container .dt-input{
    margin-left: 20px !important;
}

html[data-bs-theme=dark] table.dataTable tbody tr>.dtfc-fixed-start,
html[data-bs-theme=dark] table.dataTable tbody tr>.dtfc-fixed-end {
    background-color: #1F1F1F !important;
}