.dropdown-menu {
  min-width: 13rem;
}

.badge {
  line-height: 15.75px;
  width: 22px;
}

#toast-container > .toast-success {
  background-color: #198754;
  color: #fff;
}

/*BLOCK FONT SEMUA BODY*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0) inset !important;
  background-color: transparent !important;
  color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:focus,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:active {
  /* -webkit-text-fill-color: black; */
  -webkit-text-fill-color: rgb(245, 209, 7);
}

.btn-app {
  border-radius: 20px;
  min-width: 70px;
}

.navNama {
  font-size: clamp(11px, 2vw, 16px);
  /* line-height: clamp(11px, 1vw, 16px); */
}

.navJab {
  font-size: clamp(11px, 2vw, 16px);
  /* line-height: clamp(12px, 1vw, 16px); */
}

/* .foto-users {
  border-radius: 12px;
  max-height: 160px;
  object-fit: cover;
  position: absolute;
  top: -205px;
  left: 50%;
  transform: translateX(-50%);
}
@media (min-width: 320px) {
  .foto-users {
    top: -292px;
    left: 33%;
  }
  .ngamuk {
    margin-left: 70px;
  }
}

@media (min-width: 769px) {
  .foto-users {
    top: -288px;
    left: 12%;
  }
  .ngamuk {
    margin-left: 500px;
  }
} */
/* Tambahkan gaya tambahan */
/*.form-control {*/
/*  background: transparent !important;*/
/*  color: white !important;*/
/*  border: 1px solid white;*/
/*}*/

/*.form-control::placeholder {*/
/*  color: rgba(255, 255, 255, 0.6);*/
/*}*/

/*BLOCK CONTAINER FLUID*/

@media (min-width: 1200px) {
  /* .container-fluid {
    max-width: 92%;
  } */
  .carousel-inner {
    /*border-radius: 10px;*/
    margin-bottom: 1rem;
  }
  .carousel-item a img {
    height: 300px;
  }
}

@media (max-width: 1199.9px) {
  .carousel-inner {
    border-radius: 10px;
    margin-bottom: 1rem;
  }
  .carousel-item a img {
    height: 300px;
  }
}
@media (max-width: 991.9px) {
  .carousel-inner {
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .carousel-item a img {
    height: 300px;
  }
}

@media (max-width: 767.9px) {
  .carousel-inner {
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .carousel-item a img {
    height: 300px;
  }
}

@media (max-width: 575.9px) {
  .carousel-inner {
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .container-fluid {
    width: 100%;
    padding: 0px;
  }
  .carousel-item a img {
    height: 200px;
  }
}

/* Pengaturan card */
.cardkpl {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.nav-pills .nav-link.active {
  background-color: #26303a;
}

/*BLOCK BACK-TO-TOP*/
.back-to-top {
  visibility: hidden;
  opacity: 0;
  background-color: var(--primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.4s;
}

.back-to-top:hover {
  background-color: rgba(var(--primary), 0.8);
  color: #ffffff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

.table td {
  vertical-align: middle;
  padding-top: 2px;
  padding-bottom: 2px;
}

.table thead tr th {
  vertical-align: middle;
  /*  padding-top: 2px;*/
  /*  padding-bottom: 2px;*/
}

.dark-mode .page-item .page-link {
  color: whitesmoke;
}

/*=============================================*/
.kotak img {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.zoom-effect:hover .kotok {
  transform: translateY(-50px);
}

.kotok {
  transition: 0.5s ease;
}

.zoom-effect:hover .kotak img {
  filter: opacity(75%);
  /*  max-width: none;*/
  /*  width: calc(100% + 40px);*/
  -webkit-transform: scale(1.2);
  transform: perspective(500px);
  transform: scale(1.2);
  /*  transform: translate(40px,0);*/
}

.zoom-effect {
  overflow: hidden;
}

.efek-judul:hover {
  transform: translate(-20px, 0px);
}

.efek-judul {
  overflow: hidden;
}

.glowing-text {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #f0f,
    0 0 20px #f0f,
    0 0 40px #f0f,
    0 0 80px #f0f;
  font-size: 2rem;
  font-weight: bold;
}

/* Default Shadow untuk Light Mode */
:root {
  --shadow-color: rgba(0, 0, 0, 0.595);
}

.dark-mode {
  --shadow-color: rgba(
    255,
    255,
    255,
    0.5
  ); /* Shadow keputihan untuk mode dark */
}

.shadow-box {
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.125),
    0 1px 3px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.ajeg {
  position: sticky;
  top: 60px;
  width: 100%;
}
/*================================*/
.snippet {
  font-family: Arial, sans-serif;
  text-align: justify;
}

.snippet img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
}

.snippet a.read-more {
  display: inline-block;
  margin-top: 10px;
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.snippet a.read-more:hover {
  text-decoration: underline;
}

/*================================*/
.fs-9 {
  font-size: 9px;
}
.fs-10 {
  font-size: 10px;
}

.fs-12 {
  font-size: 12px;
}
.fs-14 {
  font-size: 14px;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.grad2c {
  background-image: linear-gradient(
    140deg,
    #eadedb 0%,
    #bc70a4 50%,
    #bfd641 75%
  );
}

.grad2b {
  background-image: linear-gradient(
    140deg,
    #312e2d 0%,
    #cb0a8e 50%,
    #41d6b4 75%
  );
}

.text-netral {
  color: #fff !important;
  /* color: #5b5050 !important; */
  /* text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); */
  /* background: rgba(0, 0, 0, 0.2); */
  text-shadow:
    0 0 5px #fff,
    0 0 10px #f0f,
    0 0 20px #f0f,
    0 0 40px #f0f,
    0 0 80px #f0f;
  /* font-weight: bold; */
}
/*  */
body:not(.dark-mode) .text-auto {
  color: #000 !important;
}

body.dark-mode .text-auto {
  color: #fff !important;
}

#navbarContainer nav {
  background-color: aqua;
}

.dark-mode .form-select {
  color: white;
}

.row-editing {
  background-color: #d8bc5e !important; /* kuning muda seperti alert-warning */
  transition: background-color 0.3s ease;
  color: #131618 !important;
}

.garis-tebal {
  border: none;
  height: 3px;
  background-color: #ccc;
  margin: 5px 0;
}

/* .info-box,
.card {
  box-shadow:
    0px 0px 0px rgba(0, 0, 0, 0.125),
    0px 0px 3px 1px rgba(0, 0, 0, 0.6);
} */

.dark-mode .info-box,
.dark-mode .card,
.dark-mode .card-header {
  box-shadow:
    0 0 1px rgba(0, 0, 0, 0.125),
    0 1px 3px rgba(255, 255, 255, 0.2);
}

.text-ungu-tua {
  color: #f59dff !important;
}

.bg-ungu-tua {
  background-color: #220730 !important;
}

.text-biru-tua {
  color: #2037eb !important;
}

.dark-mode .text-biru-tua {
  color: #007bff !important;
}

.bg-biru-tua {
  background-color: hsl(236, 56%, 19%) !important;
}

.text-cyan-tua {
  color: #2390a1 !important;
}

.bg-cyan-tua {
  background-color: #1c4950 !important;
}

.table {
  font-size: 0.8rem !important;
  /*font-size: calc(12px + 0.3vw) !important;*/
}

.table thead th {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
}

.dark-mode .table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #0e1b27;
}

.table tbody td {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
  border-bottom: 1px solid #79838f;
  border-top: 1px solid #79838f;
  font-weight: 300;
}

.table tfoot td,
.table thead th {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
  border-top: 1px solid #1f4264;
  border-bottom: 1px solid #1f4264;
}

.dark-mode .table tfoot td,
.dark-mode .table thead th {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
  border-top: 1px solid #bfc5ca;
  border-bottom: 1px solid #bfc5ca;
}

/* .table tfoot th {
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
} */

button.cari {
  height: 29px;
  font-size: 0.75rem !important;
}

.page-link {
  padding-top: 2px;
  padding-bottom: 2px;
}

input[type="file"].form-control,
input[type="file"] {
  padding-left: 0px;
}

input.form-control,
.form-select {
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 14px;
  height: 29px;
}

/* Pastikan addon input-group (mis. '%') sejajar dengan input (tinggi 27px) */
.input-group .input-group-text {
  height: 29px;
  line-height: 29px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.input-group .form-control,
.input-group .form-control-sm {
  height: 29px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.col-form-label {
  padding-top: 0px;
  padding-bottom: 0px;
}

.file-input {
  display: none;
}

.camera-label {
  display: inline-block;
  padding: 14px;
  /*background: #007bff;*/
  color: black;
  /*border-radius: 240%;*/
  cursor: pointer;
  font-size: 27px;
}

.dark-mode .camera-label {
  color: white;
}

.preview {
  display: block;
  /* margin-top: -66px;*/
  /* margin-left: 153px;*/
  max-width: 80px;
  max-height: 80px;
  border-radius: 50%;
}

@keyframes gantiWarna {
  0% {
    color: yellow;
  }
  33% {
    color: green;
  }
  66% {
    color: red;
  }
  100% {
    color: yellow;
  }
}

.warna-berubah {
  animation: gantiWarna 4s infinite;
  font-weight: bold;
}

/*UNTUK 2 KOLOM*/
.div1a thead#tabelHeader th:nth-child(2),
.div1a td:nth-child(2) {
  position: sticky;
  left: -8.5px;
  background-color: #ffffff;
}
.dark-mode .div1a thead#tabelHeader th:nth-child(2) {
  position: sticky;
  left: -8.5px;
  background-color: #3f474e;
}

.dark-mode .div1a td:nth-child(2) {
  position: sticky;
  left: -8.5px;
  background-color: #454d55;
}

.div1a thead#tabelHeader th:nth-child(2) {
  z-index: 11;
}

.dark-mode .div1a tr:nth-child(odd) thead#tabelHeader th:nth-child(1),
.dark-mode .div1a tr:nth-child(odd) thead#tabelHeader th:nth-child(2) {
  background-color: #272a2c;
}

.dark-mode .div1a tr:nth-child(odd) td:nth-child(1),
.dark-mode .div1a tr:nth-child(odd) td:nth-child(2) {
  background-color: #2d3134;
}

/* .div1a tr:nth-child(odd) th:nth-child(1), */
.div1a tr:nth-child(odd) td:nth-child(1),
/* .div1a tr:nth-child(odd) th:nth-child(2), */
.div1a tr:nth-child(odd) td:nth-child(2) {
  background-color: #d5d5d5;
}

/* UNTUK DIV1=LEMPITAN 1 KOLOM */
.div1 th:nth-child(2),
.div1 td:nth-child(2) {
  position: sticky;
  left: -8.5px;
  background-color: #ffffff;
}

.dark-mode .div1 th:nth-child(2),
.dark-mode .div1 td:nth-child(2) {
  position: sticky;
  left: -8.5px;
  background-color: #454d55;
}

.dark-mode .div1 tr:nth-child(odd) th:nth-child(1),
.dark-mode .div1 tr:nth-child(odd) td:nth-child(1),
.dark-mode .div1 tr:nth-child(odd) th:nth-child(2),
.dark-mode .div1 tr:nth-child(odd) td:nth-child(2) {
  background-color: #2d3134;
}

.div1 tr:nth-child(odd) th:nth-child(1),
.div1 tr:nth-child(odd) td:nth-child(1),
.div1 tr:nth-child(odd) th:nth-child(2),
.div1 tr:nth-child(odd) td:nth-child(2) {
  background-color: #d5d5d5;
}

/* UNTUK DIV4=LEMPITAN 4 KOLOM AKUN========================= */
.div4 th:nth-child(1),
.div4 td:nth-child(1),
.div4 th:nth-child(2),
.div4 td:nth-child(2),
.div4 th:nth-child(3),
.div4 td:nth-child(3),
.div4 th:nth-child(4),
.div4 td:nth-child(4),
.div4 th:nth-child(5),
.div4 td:nth-child(5) {
  position: sticky;
  left: -8.5px;
  background-color: #ffffff;
}

.div4 tr:nth-child(odd) th:nth-child(1),
.div4 tr:nth-child(odd) td:nth-child(1),
.div4 tr:nth-child(odd) th:nth-child(2),
.div4 tr:nth-child(odd) td:nth-child(2),
.div4 tr:nth-child(odd) th:nth-child(3),
.div4 tr:nth-child(odd) td:nth-child(3),
.div4 tr:nth-child(odd) th:nth-child(4),
.div4 tr:nth-child(odd) td:nth-child(4),
.div4 tr:nth-child(odd) th:nth-child(5),
.div4 tr:nth-child(odd) td:nth-child(5) {
  background-color: #d7d7d7;
}

.div4 tr:nth-child(even) th:nth-child(1),
.div4 tr:nth-child(even) td:nth-child(1),
.div4 tr:nth-child(even) th:nth-child(2),
.div4 tr:nth-child(even) td:nth-child(2),
.div4 tr:nth-child(even) th:nth-child(3),
.div4 tr:nth-child(even) td:nth-child(3),
.div4 tr:nth-child(even) th:nth-child(4),
.div4 tr:nth-child(even) td:nth-child(4),
.div4 tr:nth-child(even) th:nth-child(5),
.div4 tr:nth-child(even) td:nth-child(5) {
  background-color: #f7f7f7;
}

.dark-mode .div4 th:nth-child(1),
.dark-mode .div4 td:nth-child(1),
.dark-mode .div4 th:nth-child(2),
.dark-mode .div4 td:nth-child(2),
.dark-mode .div4 th:nth-child(3),
.dark-mode .div4 td:nth-child(3),
.dark-mode .div4 th:nth-child(4),
.dark-mode .div4 td:nth-child(4),
.dark-mode .div4 th:nth-child(5),
.dark-mode .div4 td:nth-child(5) {
  position: sticky;
  left: -8.5px;
  background-color: #454d55;
}

.dark-mode .div4 tr:nth-child(odd) th:nth-child(1),
.dark-mode .div4 tr:nth-child(odd) td:nth-child(1),
.dark-mode .div4 tr:nth-child(odd) th:nth-child(2),
.dark-mode .div4 tr:nth-child(odd) td:nth-child(2),
.dark-mode .div4 tr:nth-child(odd) th:nth-child(3),
.dark-mode .div4 tr:nth-child(odd) td:nth-child(3),
.dark-mode .div4 tr:nth-child(odd) th:nth-child(4),
.dark-mode .div4 tr:nth-child(odd) td:nth-child(4),
.dark-mode .div4 tr:nth-child(odd) th:nth-child(5),
.dark-mode .div4 tr:nth-child(odd) td:nth-child(5) {
  background-color: #15191c;
}

.dark-mode .div4 tr:nth-child(even) th:nth-child(1),
.dark-mode .div4 tr:nth-child(even) td:nth-child(1),
.dark-mode .div4 tr:nth-child(even) th:nth-child(2),
.dark-mode .div4 tr:nth-child(even) td:nth-child(2),
.dark-mode .div4 tr:nth-child(even) th:nth-child(3),
.dark-mode .div4 tr:nth-child(even) td:nth-child(3),
.dark-mode .div4 tr:nth-child(even) th:nth-child(4),
.dark-mode .div4 tr:nth-child(even) td:nth-child(4),
.dark-mode .div4 tr:nth-child(even) th:nth-child(5),
.dark-mode .div4 tr:nth-child(even) td:nth-child(5) {
  background-color: #202327;
}

.div4 thead#tabelHeader th:nth-child(5) {
  z-index: 100;
}
/* UNTUK DIV4=LEMPITAN 4 KOLOM AKUN========================= */

/* UNTUK DIV6=LEMPITAN 6 KOLOM JURNAL========================= */
.div6 th:nth-child(1),
.div6 td:nth-child(1),
.div6 th:nth-child(2),
.div6 td:nth-child(2),
.div6 th:nth-child(3),
.div6 td:nth-child(3),
.div6 th:nth-child(4),
.div6 td:nth-child(4),
.div6 th:nth-child(5),
.div6 td:nth-child(5),
.div6 th:nth-child(6),
.div6 td:nth-child(6),
.div6 th:nth-child(7),
.div6 td:nth-child(7) {
  position: sticky;
  left: -8.5px;
  background-color: #ffffff;
}

.div6 tr:nth-child(odd) th:nth-child(1),
.div6 tr:nth-child(odd) td:nth-child(1),
.div6 tr:nth-child(odd) th:nth-child(2),
.div6 tr:nth-child(odd) td:nth-child(2),
.div6 tr:nth-child(odd) th:nth-child(3),
.div6 tr:nth-child(odd) td:nth-child(3),
.div6 tr:nth-child(odd) th:nth-child(4),
.div6 tr:nth-child(odd) td:nth-child(4),
.div6 tr:nth-child(odd) th:nth-child(5),
.div6 tr:nth-child(odd) td:nth-child(5),
.div6 tr:nth-child(odd) th:nth-child(6),
.div6 tr:nth-child(odd) td:nth-child(6),
.div6 tr:nth-child(odd) th:nth-child(7),
.div6 tr:nth-child(odd) td:nth-child(7) {
  background-color: #d7d7d7;
}

.div6 tr:nth-child(even) th:nth-child(1),
.div6 tr:nth-child(even) td:nth-child(1),
.div6 tr:nth-child(even) th:nth-child(2),
.div6 tr:nth-child(even) td:nth-child(2),
.div6 tr:nth-child(even) th:nth-child(3),
.div6 tr:nth-child(even) td:nth-child(3),
.div6 tr:nth-child(even) th:nth-child(4),
.div6 tr:nth-child(even) td:nth-child(4),
.div6 tr:nth-child(even) th:nth-child(5),
.div6 tr:nth-child(even) td:nth-child(5),
.div6 tr:nth-child(even) th:nth-child(6),
.div6 tr:nth-child(even) td:nth-child(6),
.div6 tr:nth-child(even) th:nth-child(7),
.div6 tr:nth-child(even) td:nth-child(7) {
  background-color: #f7f7f7;
}

.dark-mode .div6 th:nth-child(1),
.dark-mode .div6 td:nth-child(1),
.dark-mode .div6 th:nth-child(2),
.dark-mode .div6 td:nth-child(2),
.dark-mode .div6 th:nth-child(3),
.dark-mode .div6 td:nth-child(3),
.dark-mode .div6 th:nth-child(4),
.dark-mode .div6 td:nth-child(4),
.dark-mode .div6 th:nth-child(5),
.dark-mode .div6 td:nth-child(5),
.dark-mode .div6 th:nth-child(6),
.dark-mode .div6 td:nth-child(6),
.dark-mode .div6 th:nth-child(7),
.dark-mode .div6 td:nth-child(7) {
  position: sticky;
  left: -8.5px;
  background-color: #454d55;
}

.dark-mode .div6 tr:nth-child(odd) th:nth-child(1),
.dark-mode .div6 tr:nth-child(odd) td:nth-child(1),
.dark-mode .div6 tr:nth-child(odd) th:nth-child(2),
.dark-mode .div6 tr:nth-child(odd) td:nth-child(2),
.dark-mode .div6 tr:nth-child(odd) th:nth-child(3),
.dark-mode .div6 tr:nth-child(odd) td:nth-child(3),
.dark-mode .div6 tr:nth-child(odd) th:nth-child(4),
.dark-mode .div6 tr:nth-child(odd) td:nth-child(4),
.dark-mode .div6 tr:nth-child(odd) th:nth-child(5),
.dark-mode .div6 tr:nth-child(odd) td:nth-child(5),
.dark-mode .div6 tr:nth-child(odd) th:nth-child(6),
.dark-mode .div6 tr:nth-child(odd) td:nth-child(6),
.dark-mode .div6 tr:nth-child(odd) th:nth-child(7),
.dark-mode .div6 tr:nth-child(odd) td:nth-child(7) {
  background-color: #15191c;
}

.dark-mode .div6 tr:nth-child(even) th:nth-child(1),
.dark-mode .div6 tr:nth-child(even) td:nth-child(1),
.dark-mode .div6 tr:nth-child(even) th:nth-child(2),
.dark-mode .div6 tr:nth-child(even) td:nth-child(2),
.dark-mode .div6 tr:nth-child(even) th:nth-child(3),
.dark-mode .div6 tr:nth-child(even) td:nth-child(3),
.dark-mode .div6 tr:nth-child(even) th:nth-child(4),
.dark-mode .div6 tr:nth-child(even) td:nth-child(4),
.dark-mode .div6 tr:nth-child(even) th:nth-child(5),
.dark-mode .div6 tr:nth-child(even) td:nth-child(5),
.dark-mode .div6 tr:nth-child(even) th:nth-child(6),
.dark-mode .div6 tr:nth-child(even) td:nth-child(6),
.dark-mode .div6 tr:nth-child(even) th:nth-child(7),
.dark-mode .div6 tr:nth-child(even) td:nth-child(7) {
  background-color: #202327;
}

.div6 thead#tabelHeader th:nth-child(7) {
  z-index: 100;
}

/* UNTUK DIV5=LEMPITAN 5 KOLOM ANGGOTA===================================== */
.div5 th:nth-child(1),
.div5 td:nth-child(1),
.div5 th:nth-child(2),
.div5 td:nth-child(2),
.div5 th:nth-child(3),
.div5 td:nth-child(3),
.div5 th:nth-child(4),
.div5 td:nth-child(4),
.div5 th:nth-child(5),
.div5 td:nth-child(5),
.div5 th:nth-child(6),
.div5 td:nth-child(6) {
  position: sticky;
  left: -8.5px;
  background-color: #ffffff;
}

.div5 tr:nth-child(odd) th:nth-child(1),
.div5 tr:nth-child(odd) td:nth-child(1),
.div5 tr:nth-child(odd) th:nth-child(2),
.div5 tr:nth-child(odd) td:nth-child(2),
.div5 tr:nth-child(odd) th:nth-child(3),
.div5 tr:nth-child(odd) td:nth-child(3),
.div5 tr:nth-child(odd) th:nth-child(4),
.div5 tr:nth-child(odd) td:nth-child(4),
.div5 tr:nth-child(odd) th:nth-child(5),
.div5 tr:nth-child(odd) td:nth-child(5),
.div5 tr:nth-child(odd) th:nth-child(6),
.div5 tr:nth-child(odd) td:nth-child(6) {
  background-color: #d7d7d7d7;
}

.div5 tr:nth-child(even) th:nth-child(1),
.div5 tr:nth-child(even) td:nth-child(1),
.div5 tr:nth-child(even) th:nth-child(2),
.div5 tr:nth-child(even) td:nth-child(2),
.div5 tr:nth-child(even) th:nth-child(3),
.div5 tr:nth-child(even) td:nth-child(3),
.div5 tr:nth-child(even) th:nth-child(4),
.div5 tr:nth-child(even) td:nth-child(4),
.div5 tr:nth-child(even) th:nth-child(5),
.div5 tr:nth-child(even) td:nth-child(5),
.div5 tr:nth-child(even) th:nth-child(6),
.div5 tr:nth-child(even) td:nth-child(6) {
  background-color: #f7f7f7f7;
}

.dark-mode .div5 th:nth-child(1),
.dark-mode .div5 td:nth-child(1),
.dark-mode .div5 th:nth-child(2),
.dark-mode .div5 td:nth-child(2),
.dark-mode .div5 th:nth-child(3),
.dark-mode .div5 td:nth-child(3),
.dark-mode .div5 th:nth-child(4),
.dark-mode .div5 td:nth-child(4),
.dark-mode .div5 th:nth-child(5),
.dark-mode .div5 td:nth-child(5),
.dark-mode .div5 th:nth-child(6),
.dark-mode .div5 td:nth-child(6) {
  position: sticky;
  left: -8.5px;
  background-color: #454d55;
}

.dark-mode .div5 tr:nth-child(odd) th:nth-child(1),
.dark-mode .div5 tr:nth-child(odd) td:nth-child(1),
.dark-mode .div5 tr:nth-child(odd) th:nth-child(2),
.dark-mode .div5 tr:nth-child(odd) td:nth-child(2),
.dark-mode .div5 tr:nth-child(odd) th:nth-child(3),
.dark-mode .div5 tr:nth-child(odd) td:nth-child(3),
.dark-mode .div5 tr:nth-child(odd) th:nth-child(4),
.dark-mode .div5 tr:nth-child(odd) td:nth-child(4),
.dark-mode .div5 tr:nth-child(odd) th:nth-child(5),
.dark-mode .div5 tr:nth-child(odd) td:nth-child(5),
.dark-mode .div5 tr:nth-child(odd) th:nth-child(6),
.dark-mode .div5 tr:nth-child(odd) td:nth-child(6) {
  background-color: #15191c;
  /* background-color: rgba(0, 0, 0, 0.35); */
}

.dark-mode .div5 tr:nth-child(even) th:nth-child(1),
.dark-mode .div5 tr:nth-child(even) td:nth-child(1),
.dark-mode .div5 tr:nth-child(even) th:nth-child(2),
.dark-mode .div5 tr:nth-child(even) td:nth-child(2),
.dark-mode .div5 tr:nth-child(even) th:nth-child(3),
.dark-mode .div5 tr:nth-child(even) td:nth-child(3),
.dark-mode .div5 tr:nth-child(even) th:nth-child(4),
.dark-mode .div5 tr:nth-child(even) td:nth-child(4),
.dark-mode .div5 tr:nth-child(even) th:nth-child(5),
.dark-mode .div5 tr:nth-child(even) td:nth-child(5),
.dark-mode .div5 tr:nth-child(even) th:nth-child(6),
.dark-mode .div5 tr:nth-child(even) td:nth-child(6) {
  background-color: #202327;
}

.div5 thead#tabelHeader th:nth-child(6) {
  z-index: 100;
}
/*===========================================*/
.checkbox-scroll {
  border: 1px solid #ccc;
  width: 100%;
  height: auto;
  padding: 8px;
  overflow-y: scroll;
}

/* Default satu kolom */
.cekboxkudewe {
  width: 50%;
}

/* Ukuran medium (sm) menjadi satu kolom */
@media (min-width: 576px) {
  .cekboxkudewe {
    width: 100%;
  }
}

/* Ukuran large (lg) menjadi dua kolom */
@media (min-width: 768px) {
  .cekboxkudewe {
    width: 50%;
  }
}

/* Ukuran extra-large (xl) menjadi tiga kolom */
@media (min-width: 992px) {
  .cekboxkudewe {
    width: 33.33%;
  }
}

/* Ukuran extra-large (xl) menjadi 4 kolom */
@media (min-width: 1200px) {
  .cekboxkudewe {
    width: 25%;
  }
}

.cekboxkudewe {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cekboxkudewe .id-modul {
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

.cekboxkudewe .pemisah {
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}

.cekboxkudewe .nama-modul {
  flex: 1;
  margin: 0;
}

.garisan {
  display: flex;
  align-items: center;
  text-align: center;
}

.garisan::before,
.garisan::after {
  content: "";
  flex: 1;
  border-top: 1px solid currentColor;
  opacity: 0.4;
}

.garisan::before {
  margin-right: 10px;
}

.garisan::after {
  margin-left: 10px;
}

table .tabel-siswa {
  table-layout: fixed;
}

.label-field {
  width: auto !important;
  min-width: 110px;

  white-space: nowrap;
  padding-right: 2px !important;
  padding-left: 0px !important;
  font-size: 12px;
  position: relative;
}

.titik-dua {
  padding: 0 8px;
  font-weight: bold;
}

.value-field {
  flex: 1;
}

.text-sm .main-header .nav-link,
.main-header.text-sm .nav-link {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.container-kecil {
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
}