.tableFixHead {
    overflow-y: auto;
    height: 500px
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
}

.textMiddle {
    vertical-align: middle !important;
    text-align: center;
}

.textProgram {
    width: 1700px !important;
}

.tableFixHead thead tr th {
    vertical-align: middle;
    text-align: center;
}


.tableScroll thead {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 8;
}

.tableScroll #tb-evaluasi tr th:nth-child(1),
.tableScroll #tb-evaluasi tr td:nth-child(1),

.tableScroll #tb-realisasi tr th:nth-child(1),
.tableScroll #tb-realisasi tr td:nth-child(1),

.tableScroll #tb-target tr th:nth-child(1),
.tableScroll #tb-target tr td:nth-child(1) {
    position: sticky;
    left: 0;

}

.noFreze th {

    z-index: 0 !important;
}

.tableScroll #tb-evaluasi tr th:nth-child(2),
.tableScroll #tb-realisasi tr th:nth-child(2),

.tableScroll #tb-evaluasi tr td:nth-child(2),
.tableScroll #tb-realisasi tr td:nth-child(2),

.tableScroll #tb-target tr td:nth-child(2),
.tableScroll #tb-target tr td:nth-child(2) {
    position: sticky;

    /* left: 1px; */

}

.tableScroll #tb-evaluasi tr th:nth-child(3),
.tableScroll #tb-evaluasi tr td:nth-child(3),

.tableScroll #tb-realisasi tr th:nth-child(3),
.tableScroll #tb-realisasi tr td:nth-child(3),

.tableScroll #tb-target tr th:nth-child(3),
.tableScroll #tb-target tr td:nth-child(3) {
    position: sticky;

    left: 1px;

}

.tableScroll #tb-evaluasi tr th:nth-child(4),
.tableScroll #tb-evaluasi tr td:nth-child(4) {
    position: sticky;

    left: 1px;

}


.tableScroll #tb-evaluasi td:nth-child(1),
.tableScroll #tb-evaluasi td:nth-child(2),
.tableScroll #tb-evaluasi td:nth-child(3),

.tableScroll #tb-realisasi td:nth-child(1),
.tableScroll #tb-realisasi td:nth-child(2),
.tableScroll #tb-realisasi td:nth-child(3),

.tableScroll #tb-target td:nth-child(1),
.tableScroll #tb-target td:nth-child(2),
.tableScroll #tb-target td:nth-child(3),

.tableScroll #tb-evaluasi td:nth-child(4) {
    background: #F3F6F9;
}

.tableScroll #tb-evaluasi thead tr th:nth-child(1),
.tableScroll #tb-realisasi thead tr th:nth-child(1),
.tableScroll #tb-target thead tr th:nth-child(1),

.tableScroll #tb-evaluasi thead tr th:nth-child(2),
.tableScroll #tb-realisasi thead tr th:nth-child(2),
.tableScroll #tb-target thead tr th:nth-child(2),

.tableScroll #tb-evaluasi thead tr th:nth-child(3),
.tableScroll #tb-realisasi thead tr th:nth-child(3),
.tableScroll #tb-target thead tr th:nth-child(3),

.tableScroll #tb-evaluasi thead tr th:nth-child(4) {
    z-index: 99999;
}


.tableScroll thead tr th {
    vertical-align: middle;
    text-align: center;

}

.tableScroll {
    overflow: auto;
    height: 600px
}

.rotated {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    vertical-align: middle !important;

}

/* 
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #ccc;
}

th {
    background: #eee;
} */
#timer {
    position: absolute;
    width: 20%;
    text-align: center;
    color: white;
    height: 70px;
    left: 33%;
    /* right: 0; */
    margin: 0 auto;
    z-index: 1;
    padding: 10px;
    background-color: #002500;
    border-bottom-left-radius: 0.6em;
    border-bottom-right-radius: 0.6em;

}

#timer #titles {
    display: block;
    font-size: 12px;
    color: yellow;
    padding: 2px;
    margin: 0;
    text-align: center;
    line-height: 1;
}

#jadwal {
    font-family: 'Chakra Petch', sans-serif;
}

#jadwal small {
    color: goldenrod;
    font-size: 10px;
}

/* 
#kt_header {
    background-color: #02275D;
} */

/* #kt_brand {
    background-color: #babcbe;
} */

/* 
#kt_footer {
    background-color: #FCEC27 !important;
    color: black !important;
    font-weight: bold;
} */
/* 
.modal-header {
    background-color: #05723f !important;

} */


/* .modal-header .modal-title {
    color: white !important;
    font-weight: bold;

} */

.select2 {
    width: 100% !important;
}

.datatable-costume table tr,
td {
    padding: 3px !important;
}


/* .table.table-head-custom thead tr, .table.table-head-custom thead th {
  
    padding: 10px !important;
} */
.busy {
    cursor: wait !important;
}

.skeleton {
    background: linear-gradient(90deg, #eee 0%, #eee 40%, #ddd 50%, #ddd 55%, #eee 65%, #eee 100%);
    background-size: 300%;
    animation: skeleton 1.5s infinite;
}

@keyframes skeleton {
    from {
        background-position: 100%;
    }

    to {
        background-position: 0%;
    }
}