.sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  /* <-- this is the fix */
}

.spinner {
  /* Spinner size and color */
  width: 1.5rem;
  height: 1.5rem;
  border-top-color: #444;
  border-left-color: #444;

  /* Additional spinner styles */
  animation: spinner 400ms linear infinite;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
}

/* Animation styles */
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* Optional — create your own variations! */
.spinner-large {
  width: 5rem;
  height: 5rem;
  border-width: 6px;
}

.spinner-slow {
  animation: spinner 1s linear infinite;
}

.spinner-blue {
  border-top-color: #09d;
  border-left-color: #09d;
}

p.capitaliseFirstLetterOnly {
  text-transform: lowercase;
}

p.capitaliseFirstLetterOnly::first-letter {
  text-transform: uppercase;
}

/*Tambahan untuk pinsarum*/
/*Navbar*/
/* CSS for sticky navbar */
.sticky-top .navbar-brand img {
  width: 320px;
  /* Adjust the desired width */
  height: auto;
  /* Automatically adjust the height */
  transition: all 0.3s ease;
  /* Add transition for smooth resizing */
}

/* Media query for smaller image on mobile */
@media (max-width: 576px) {
  .sticky-top .navbar-brand img {
    width: 200px;
    /* Adjust the smaller width for mobile */
  }
}

.sticky-top.navbar-expand .navbar-collapse {
  margin-top: 1.5rem;
  /* Add some spacing for the collapsed navbar */
}

/* Set some spacing for the content below the navbar */
.content {
  padding-top: 70px;
}

/* Style the full-width image */
.full-width-image {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Style the container to create overlap with the content */
.content-container {
  position: relative;
  z-index: 2;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
  padding-top: 20px;
  padding-bottom: 60px;
  margin-bottom: -10px;
  width: 100%;
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: #ebd181;
}

.dropdown-toggle::after {
  content: none;
}

.navbar-dark .navbar-nav .active .nav-link {
  position: relative;
  color: #ebd181;
}

.active .no-scroll::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #ebd181;
}

.active .yes-scroll::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #ebd181;
}

.yes-scroll:hover::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #ebd181;
}

.no-scroll:hover::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #ebd181;
}

.yes-scroll.additional-active::after {
  background-color: transparent;
}

.no-scroll.additional-active::after {
  background-color: transparent;
}

.navbar-dark .navbar-nav .dropdown-menu {
  top: 113%;
  left: 0;
  margin-top: 0;
}

/*Halaman pencarian*/
.input-with-icon {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input-with-icon input {
  padding-left: 60px;
  height: 60px;
  width: 100%;
  color: #6c757d;
  font-size: 20px;
}

.input-with-icon::before {
  content: "\f002";
  font-family: "FontAwesome";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  /* Ukuran ikon yang lebih besar */
  color: #6c757d;
  pointer-events: none;
  left: 20px;
  /* Menyesuaikan posisi ikon */
}

.input-group-ico {
  display: inline-flex;
  align-items: center;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;

}

.input-group-ico input {
  padding-left: 60px;
  border: none;
  border-radius: 40px;
  background: transparent;
  outline: none;
  font-size: 20px;
  color: #6c757d;
  flex: 1;
  height: 60px;
}

.input-group-ico .separator {
  width: 2px;
  height: 50%;
  background-color: #ccc;
  margin: auto;
}

.input-group-ico .input-with-cal {
  position: relative;
  flex: 1;
}

.input-group-ico .input-with-cal::before {
  content: "\f073";
  font-family: "FontAwesome";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  /* Ukuran ikon yang lebih besar */
  color: #6c757d;
  pointer-events: none;
  left: 20px;
  /* Menyesuaikan posisi ikon */
}

/* Gaya elemen yang tumpang tindih */
.overlap-element {
  position: relative;
  z-index: 2;
  margin-top: -180px;
}

/* Media queries untuk tampilan mobile */
@media (max-width: 767px) {
  .overlap-element {
    margin-top: -30px;
    /* Tetapkan nilai margin-top yang sama seperti di desktop */
  }
}

/* tombil cari overlap*/
.btn-cari {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  height: 20px;
}

/* Gaya elemen tombol */
.btn-cari button {
  width: 100%;
  /* Atur lebar tombol sebesar 70% */
  max-width: 600px;
  /* Batasi lebar maksimum tombol */
  height: 50px;
  /* Atur tinggi tombol sesuai kebutuhan */
  font-size: 20px;
  /* Atur ukuran font tombol sesuai kebutuhan */
  position: relative;
  bottom: -15px;
  /* Atur nilai negatif untuk tumpang tindih ke bawah */
}

/* Tambahan Gambar Detail Aset Peminjaman */
.image-container {
  width: 100%;
  height: 450px;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.center-cropped {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .image-container {
    height: auto;
  }

  .center-cropped {
    position: static;
    transform: none;
  }
}

/* Focus on textbox */
[contenteditable]:focus {
  background-color: white;
}

[contenteditable] {
  background-color: white;
}