/* =====================================================
   GLOBAL
===================================================== */

body{
    background:#f5f6fa;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#333;
}

/* =====================================================
   NAVBAR
===================================================== */

.navbar-brand{
    font-weight:bold;
}

/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{
    min-height:calc(100vh - 56px);
    padding:15px 0;
}

.sidebar .list-group-item{
    border:0;
    border-radius:0;
    padding:12px 20px;
    transition:.2s;
}

.sidebar .list-group-item:hover{
    background:#0d6efd;
    color:#fff;
}

.sidebar .list-group-item.active{
    background:#0d6efd;
    color:#fff;
}

/* =====================================================
   CONTENT
===================================================== */

.content{
    padding:20px;
}

/* =====================================================
   CARD
===================================================== */

.card{
    border:none;
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.card-header{
    font-weight:bold;
}

/* =====================================================
   TABLE
===================================================== */

.table th{
    vertical-align:middle;
    text-align:center;
}

.table td{
    vertical-align:middle;
}

/* =====================================================
   BUTTON
===================================================== */

.btn{
    border-radius:4px;
}

/* =====================================================
   MODAL
===================================================== */

.modal-header{
    background:#0d6efd;
    color:#fff;
}

.modal-title{
    font-size:18px;
}

/* =====================================================
   FORM
===================================================== */

.form-label{
    font-weight:600;
}

.form-control,
.form-select{
    border-radius:4px;
}

/* =====================================================
   FOOTER
===================================================== */

.footer{
    margin-top:20px;
    padding:15px;
    text-align:center;
    color:#666;
    font-size:13px;
}

.table-purple{
    background-color:#c084fc !important;
    color:#3b0764 !important;
}

.table-purple td{
    background-color:#c084fc !important;
    color:#3b0764 !important;
}


/* ===========================
   Monitoring Siswa
=========================== */

.bg-purple{
    background-color:#6f42c1 !important;
    color:#fff !important;
}


.nama-siswa{

    display:block;

    margin-bottom:4px;

    padding:4px 6px;

    border-radius:4px;

    font-size:12px;

    font-weight:500;

}

.legenda-monitoring{

    display:inline-block;

    padding:4px 10px;

    border-radius:4px;

    margin-right:10px;

    font-size:13px;

}

.monitoring-siswa td{

    height:180px;
    vertical-align:top;

}






.table-responsive{
    overflow-x:auto;
}

.table thead th{
    white-space:nowrap;
}

.sticky-no{
    position:sticky;
    left:0;
    z-index:3;
    background:#ffffff;
}

.sticky-nama{
    position:sticky;
    left:60px;
    z-index:3;
    background:#ffffff;
}

thead .sticky-no,
thead .sticky-nama{
    background:#0d6efd;
    color:#fff;
    z-index:5;
}

tbody .sticky-no,
tbody .sticky-nama{
    background:#ffffff;
}





/* Zebra */
.table tbody > tr:nth-of-type(odd) > td{
    background:#ffffff !important;
}

.table tbody > tr:nth-of-type(even) > td{
    background:#f3f6fa !important;
}

/* Sticky mengikuti zebra */
.table tbody > tr:nth-of-type(odd) > td.sticky-no,
.table tbody > tr:nth-of-type(odd) > td.sticky-nama{
    background:#ffffff !important;
}

.table tbody > tr:nth-of-type(even) > td.sticky-no,
.table tbody > tr:nth-of-type(even) > td.sticky-nama{
    background:#f3f6fa !important;
}

/* Zebra */
tr.zebra td{
    background:#f3f6fa !important;
}

/* Sticky mengikuti zebra */
tr.zebra td.sticky-no,
tr.zebra td.sticky-nama{
    background:#f3f6fa !important;
}


.table-striped > tbody > tr:nth-of-type(even) > td.sticky-no,
.table-striped > tbody > tr:nth-of-type(even) > td.sticky-nama{
    background-color: var(--bs-table-striped-bg) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td.sticky-no,
.table-striped > tbody > tr:nth-of-type(odd) > td.sticky-nama{
    background-color: var(--bs-table-bg) !important;
}