#raportFillContainer{
    margin:8px;
    border:2px #bcbcbc dashed !important;
    padding:10px;
    /* padding:4px; */
}

/* ===== TABLE RAPORT ===== */
.tblRaport,
.tblRaport table,
.tblRaport thead,
.tblRaport tbody,
.tblRaport tr,
.tblRaport th,
.tblRaport td {
    border: none !important;
    border-collapse: collapse !important;
}

/* garis horizontal tiap baris */
.tblRaport tr {
    border-bottom: 1px #444444 solid !important;
}

/* optional: hilangkan border terakhir */
.tblRaport tr:last-child {
    border-bottom: none !important;
}

/* padding biar lebih enak dibaca */
.tblRaport th,
.tblRaport td {
    padding: 6px 8px;
}

/* header */
.tblRaport thead tr {
    border-bottom: 1px #666666 solid !important;
}

/* hover */
.tblRaport tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

.keterangan{
    /* font-family:'Courier New', Courier, monospace;     */    
    font-size: 8pt;
    font-family: Arial, Helvetica, sans-serif;
}
.raportSection{
    display:block;
    margin-top:10px;
    width:99%;
    border-bottom:2px #0077ff solid;
    color:#0077ff;
    font-weight:bold;
    letter-spacing: 2px;
}



/* =======================================================
   RAPORT STEP TAB STYLE
======================================================= */

#raportSteps{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    align-items:flex-end;

    margin-top:10px;
    margin-bottom:-1px;

    position:relative;
    z-index:2;
}

/* TAB NORMAL */
#raportSteps .badge{
    border-radius:14px 14px 0 0 !important;

    padding:10px 16px;

    font-size:14px;
    font-weight:600;

    border:1px solid #cfcfcf;

    background:#e7e7e7 !important;
    color:#666 !important;

    transition:all .2s ease;

    position:relative;
    top:1px;

    user-select:none;
}

/* HOVER */
#raportSteps .badge:hover{
    background:#f4f4f4 !important;
    color:#222 !important;
}

/* TAB AKTIF */
#raportSteps .tab-active{
    background:#ffffff !important;
    color:#111 !important;

    border:1px solid #bbbbbb;

    border-bottom:1px solid #ffffff !important;

    box-shadow:
        0 -2px 8px rgba(0,0,0,.06);

    z-index:5;
}

/* TAB SUDAH LENGKAP */
#raportSteps .tab-done{
    background:#198754 !important;
    color:#ffffff !important;
    border-color:#198754 !important;
}

/* TAB AKTIF + DONE */
#raportSteps .tab-done.tab-active{
    background:#ffffff !important;
    color:#198754 !important;
    border-color:#198754 !important;
    border-bottom:1px solid #ffffff !important;
}

/* CONTAINER ISI TAB */
#raportFillContainer{
    background:#ffffff;

    border:1px solid #bbbbbb;

    border-radius:0 18px 18px 18px;

    padding:14px;

    min-height:240px;

    position:relative;
    z-index:1;

    box-shadow:
        0 2px 10px rgba(0,0,0,.04);
}

/* DARK MODE */
body.dark #raportFillContainer{
    background:#1f1f1f;
    border-color:#444;
    box-shadow:none;
}

body.dark #raportSteps .badge{
    background:#2a2a2a !important;
    color:#aaaaaa !important;
    border-color:#444 !important;
}

body.dark #raportSteps .badge:hover{
    background:#333 !important;
    color:#fff !important;
}

body.dark #raportSteps .tab-active{
    background:#1f1f1f !important;
    color:#ffffff !important;

    border-color:#555 !important;
    border-bottom:1px solid #1f1f1f !important;
}

body.dark #raportSteps .tab-done{
    background:#1f7a4f !important;
    color:#ffffff !important;
    border-color:#1f7a4f !important;
}

body.dark #raportSteps .tab-done.tab-active{
    background:#1f1f1f !important;
    color:#59d18c !important;
    border-color:#1f7a4f !important;
    border-bottom:1px solid #1f1f1f !important;
}

.preNilaiWrapper{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}