:root {
  --ka-primary: #5C0931;
  --ka-primary-light: #7A274F;
  --ka-secondary: #9B6B84;
  --ka-bg: #FAF8FA;
  --ka-text: #2E2E2E;
  --ka-text-muted: #7A7A7A;
}

body {
  background-color: var(--ka-bg);
  color: var(--ka-text);
}

/* Navbar & Sidebar */

.navbar {
  background: linear-gradient(90deg, #5C0931 0%, #7A274F 100%);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle {
  color: #fff !important;
}
.navbar .nav-link:hover {
  background-color: var(--ka-primary-light);
}

.navbar-brand img {
  height: 36px;
  background-color: rgba(255,255,255,0.85);
  border-radius: 8px;
  padding: 3px 6px;
}

.sidebar {
  background-color: #fff;
  border-right: 1px solid #eee;
}
.sidebar .nav-link.active {
  background-color: var(--ka-primary);
  color: #fff !important;
}
.sidebar .nav-link:hover {
  background-color: var(--ka-primary-light);
  color: #fff !important;
}

/* Tombol */
.btn-primary {
  background-color: var(--ka-primary);
  border-color: var(--ka-primary);
}
.btn-primary:hover {
  background-color: var(--ka-primary-light);
  border-color: var(--ka-primary-light);
}

/* Badge */
.badge.bg-primary-subtle {
  background-color: #f1e0e8;
  color: var(--ka-primary);
  border: 1px solid var(--ka-primary-light);
}

/* Tabel */
.table thead {
  background-color: #f6f1f4;
  color: var(--ka-primary);
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fdf9fb;
}

/* Modal Header */
.modal-header {
  background-color: #f6f1f4;
  color: var(--ka-primary);
}

/* Link & Highlight */
a { color: var(--ka-primary); }
a:hover { color: var(--ka-primary-light); }

/* DataTables Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--ka-primary) !important;
  color: #fff !important;
  border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--ka-primary-light) !important;
  color: #fff !important;
}
#tblPenilaian {
  table-layout: fixed;
}

#tblPenilaian th:last-child,
#tblPenilaian td:last-child {
  width: 90px;
  white-space: nowrap;
}

.hover-lift{
  transition:all .2s ease;
}
.hover-lift:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}