/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

main > .container {
  padding: 70px 10px 0;
}

main> .container-login {
  padding: 185px 10px 0;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none; /* Initially hide the button */
z-index: 1000;
cursor: pointer;
}

.btn.back-to-top {
border: 2px solid white;
border-radius: 50%;
}

#back-to-top:hover {
background-color: #007bff; /* Change the background color on hover */
}

/* Invert the image when the dark theme is active */
[data-bs-theme='dark'] .invert-on-dark {
  filter: invert(0);
}

/* Invert the image when the light theme is active */
[data-bs-theme='light'] .invert-on-dark {
  filter: invert(1); /* Revert back to the original colors */
}

/* Initially hide both images */
.logo-image {
  display: none;
  
}

/* Show light logo when light theme is active */
[data-bs-theme='auto'] .light-mode {
  display: block;
}

[data-bs-theme='light'] .light-mode {
  display: block;
}

/* Show dark logo when dark theme is active */
[data-bs-theme='dark'] .dark-mode {
  display: block;
}

/*shine-box custom*/
.box-shine {
  position: relative;
  overflow: hidden;
}

.box-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: transform 0.5s ease;
  transform: skewX(-30deg);
}

.box-shine:hover::before {
  left: 100px;
  transform: translateX(100%);
}

/*animated border for image */
.img-border {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 
  
  padding: calc(var(--b) + var(--g));
  background-image:
    conic-gradient(from  90deg at top    var(--b) left  var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 25%,var(--c) 0);
  background-position:
    var(--_p,0%) var(--_p,0%),
    calc(100% - var(--_p,0%)) calc(100% - var(--_p,0%));
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
  /* cursor: pointer; */
  transition: 
    background-position .3s var(--_i,.3s), 
    background-size .3s calc(.3s - var(--_i,.3s));
}
.img-border.alt {
  background-image:
    conic-gradient(from 180deg at top    var(--b) right var(--b),#0000 25%,var(--c) 0),
    conic-gradient(from   0deg at bottom var(--b) left  var(--b),#0000 25%,var(--c) 0);
  background-position:
    calc(100% - var(--_p,0%)) var(--_p,0%),
    var(--_p,0%) calc(100% - var(--_p,0%));
}
.img-border:hover {
  background-size: calc(100% - var(--g)) calc(100% - var(--g));
  --_p: calc(var(--g)/2);
  --_i: 0s;
}

/*card hover */
.card-hover:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

.icon-hover:hover {
  transform: scale(1.02);
  cursor: pointer;
}

#loadingIcon {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-overlay-showing .loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s linear;
}

.loading-overlay-hidden .loading-overlay {
  visibility: hidden;
  opacity: 0;
}

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

.bounce-loader > div {
  width: 18px;
  height: 18px;
  background-color: #007bff;
  border-radius: 100%;
  display: inline-block;
  animation: bounce 1.4s infinite ease-in-out both;
}

.bounce-loader .bounce1 {
  animation-delay: -0.32s;
}

.bounce-loader .bounce2 {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 100% {
      transform: scale(0);
  } 50% {
      transform: scale(1);
  }
}

.nav-tabs .nav-link.active {
  border-bottom-color: transparent !important; /* Hilangkan border bawah tab aktif */
  border-bottom-left-radius: 0 !important; /* Hilangkan radius bawah kiri */
  border-bottom-right-radius: 0 !important; /* Hilangkan radius bawah kanan */
  /*background-color: white;  Warna background untuk tab aktif */
  border-color: #28a745 #28a745 transparent; /* Sesuaikan border untuk tab aktif */
}
.nav-tabs .nav-link {
  background-color: #f8f9fa; /* Warna background untuk tab tidak aktif (kelabu terang) */
  border-color: #dee2e6; /* Warna border tab tidak aktif */
}