.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--color-primary-lighter);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--color-primary-lighter);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #0d6efd;
  --bs-pagination-active-border-color: #0d6efd;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--color-primary-lighter);
  display: flex;
  padding-left: 0;
  list-style: none;
  cursor: pointer;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
  margin-left: calc(var(--bs-border-width) * -1);
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
}

.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
}


/* From Uiverse.io by JaydipPrajapati1910 */ 
.button {
  --width: 100px;
  --height: 35px;
  --tooltip-height: 35px;
  --tooltip-width: 90px;
  --gap-between-tooltip-to-button: 18px;
  --button-color: #222;
  --tooltip-color: #fff;
  width: var(--width);
  height: var(--height);
  background: var(--button-color);
  position: relative;
  text-align: center;
  border-radius: 0.45em;
  font-family: "Arial";
  transition: background 0.3s;
  cursor: pointer;
}

.button::before {
  position: absolute;
  content: attr(data-tooltip);
  width: var(--tooltip-width);
  height: var(--tooltip-height);
  background-color: #555;
  font-size: 0.9rem;
  color: #fff;
  border-radius: .25em;
  line-height: var(--tooltip-height);
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) + 10px);
  left: calc(50% - var(--tooltip-width) / 2);
}

.button::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #555;
  left: calc(50% - 10px);
  bottom: calc(100% + var(--gap-between-tooltip-to-button) - 10px);
}

.button::after,.button::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
}

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

.button-wrapper,.text,.icon {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  color: #fff;
}

.text {
  top: 0
}

.text,.icon {
  transition: top 0.5s;
}

.icon {
  color: #fff;
  top: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon svg {
  width: 24px;
  height: 24px;
}

.button:hover {
  background: #222;
}

.button:hover .text {
  top: -100%;
}

.button:hover .icon {
  top: 0;
}

.button:hover:before,.button:hover:after {
  opacity: 1;
  visibility: visible;
}

.button:hover:after {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button) - 20px);
}

.button:hover:before {
  bottom: calc(var(--height) + var(--gap-between-tooltip-to-button));
}


.form-control {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  background-color: transparent;
  border: 1px solid #353535;
  border-radius: 5px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none;
}

.form-control:hover {
  border-color: #999;
}

.form-control::placeholder {
  color: #bbb;
}

.form-control:disabled {
  background-color: #e9ecef;
  border-color: #ced4da;
  cursor: not-allowed;
}

.form-control:read-only {
  background-color: #f8f9fa;
  border-color: #ccc;
}

.lebar-auto{
  width: max-content;
  max-width: 400px;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 20px;
}

.btn-custom {
  display: inline-block;
  padding: 7px 25px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s; /* Efek transisi transformasi dan bayangan */
}

.btn-custom:hover {
  transform: translateY(2px) translateZ(-5px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Efek bayangan */
}


/* From Uiverse.io by G4b413l */ 
.newtons-cradle {
 --uib-size: 80px;
 --uib-speed: 1.2s;
 --uib-color: var(--color-primary-light);
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: var(--uib-size);
 height: var(--uib-size);
}

.newtons-cradle__dot {
 position: relative;
 display: flex;
 align-items: center;
 height: 100%;
 width: 25%;
 transform-origin: center top;
}

.newtons-cradle__dot::after {
 content: '';
 display: block;
 width: 100%;
 height: 25%;
 border-radius: 50%;
 background-color: var(--uib-color);
}

.newtons-cradle__dot:first-child {
 animation: swing var(--uib-speed) linear infinite;
}

.newtons-cradle__dot:last-child {
 animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
 0% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 25% {
  transform: rotate(70deg);
  animation-timing-function: ease-in;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }
}

@keyframes swing2 {
 0% {
  transform: rotate(0deg);
  animation-timing-function: linear;
 }

 50% {
  transform: rotate(0deg);
  animation-timing-function: ease-out;
 }

 75% {
  transform: rotate(-70deg);
  animation-timing-function: ease-in;
 }
}


/* scroll bar datatabel */
/* General styling for dt-scroll-body container */
.dt-scroll-body {
  max-height: 400px; /* Set the maximum height for the table body */
  overflow-y: auto; /* Add vertical scrolling */
  overflow-x: hidden; /* Disable horizontal scrolling */
}

/* Styling for the scrollbar in WebKit browsers (Chrome, Safari, Edge) */
.dt-scroll-body::-webkit-scrollbar {
  width: 8px; /* Width of the vertical scrollbar */
}

.dt-scroll-body::-webkit-scrollbar-thumb {
  background-color: var(--color-primary-dark); /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}

.dt-scroll-body::-webkit-scrollbar-thumb:hover {
  background-color: #5555558a; /* Darker color when hovering */
}

.dt-scroll-body::-webkit-scrollbar-track {
  background: var(--bs-primary-dark); /* Color of the scrollbar track */
}

/* Styling for Firefox */
.dt-scroll-body {
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: var(--color-primary-darker) hsla(0, 0%, 55%, 0.253); /* Thumb color and track color */
}

/* Scrollbar behavior customization */
.dt-scroll-body {
  scroll-behavior: smooth; /* Smooth scrolling */
}

/* Optional: additional styling for dark mode */
@media (prefers-color-scheme: dark) {
  .dt-scroll-body {
    scrollbar-color: var(--color-primary-dark) hsla(0, 0%, 55%, 0.253); /* Darker thumb and track color for dark mode */
  }
}

/* scroll bar sidebar */
/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px; /* Lebar scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--dark); /* Warna scrollbar */
  border-radius: 10px; /* Membuat sudut scrollbar membulat */
  border: 2px solid transparent; /* Ruang antara scrollbar dan track */
  background-clip: padding-box; /* Menambahkan efek padding */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #5555558e; /* Warna scrollbar saat hover */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: #f1f1f18e; /* Warna background dari scrollbar track */
}

.custom-scrollbar {
  scrollbar-width: thin; /* Untuk Firefox, membuat scrollbar lebih tipis */
  scrollbar-color: var(--color-primary-dark) hsla(0, 0%, 55%, 0.253); /* Warna background dari scrollbar track */
; /* Warna scrollbar dan track */
}

/* scrollbar khusus media mobile */
/* General styling for dt-scrollbar-mobile container */
@media (max-width: 1075px) { /* Adjust max-width as needed for mobile breakpoints */
/* General styling for dt-scroll-body container */
.dt-scroll-mobile {
  max-height: 400px; /* Set the maximum height for the table body */
  overflow-y: hidden; /* Add vertical scrolling */
  overflow-x: hidden; /* Disable horizontal scrolling */
}
.profil{
  padding-right: 40px;
}
/* Styling for the scrollbar in WebKit browsers (Chrome, Safari, Edge) */
.dt-scroll-mobile::-webkit-scrollbar {
  width: 8px; /* Width of the vertical scrollbar */
}

.dt-scroll-mobile::-webkit-scrollbar-thumb {
  background-color: #888888a6; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}

.dt-scroll-mobile::-webkit-scrollbar-thumb:hover {
  background-color: #5555558a; /* Darker color when hovering */
}

.dt-scroll-mobile::-webkit-scrollbar-track {
  background: #f1f1f181; /* Color of the scrollbar track */
}

/* Styling for Firefox */
.dt-scroll-mobile {
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #88888898 #f1f1f194; /* Thumb color and track color */
}

/* Scrollbar behavior customization */
.dt-scroll-mobile {
  scroll-behavior: smooth; /* Smooth scrolling */
}

/* Optional: additional styling for dark mode */
@media (prefers-color-scheme: dark) {
  .dt-scroll-mobile {
    scrollbar-color: #5555557e #4e4e4e52; /* Darker thumb and track color for dark mode */
  }
}

}

.loading {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
}

.dots::after {
  content: '.....';
  display: inline-block;
  animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80% {
    content: '...';
  }
  100% {
    content: '.....';
  }
}


/* Loader di bagian atas halaman */
#loaderBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  z-index: 9999;
  transition: width 0.4s ease-in-out; /* Smooth transition */
}

       /* Style untuk label agar terlihat seperti checkbox */
        .custom-radio {
            display: inline-block;
            cursor: pointer;
            font-size: 18px;
            padding-left: 30px;
            position: relative;
        }

        /* Kotak custom sebagai checkbox */
        .custom-radio::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border: 2px solid #333;
            background-color: white;
            border-radius: 4px;
        }

        /* Centang jika radio dipilih */
        input[type="radio"]:checked + .custom-radio::after {
            content: "✔";
            position: absolute;
            left: 5px;
            top: 0px;
            font-size: 18px;
            color: green;
            font-weight: bold;
        }