:root {
  /* Background Sidebar - Blue Gradient Amazing */
  --sidebar-bg-start: #1e3a8a; /* Blue 800 - Lebih terang */
  --sidebar-bg-end: #0a0f2a; /* Deep Indigo - Base gelap dengan sentuhan biru */

  /* Text Color - Lebih terang dengan sentuhan biru */
  --text-color: #e0f2fe; /* Sky 100 - Putih kebiruan */

  /* Hover Background - Blue tint */
  --hover-bg: rgba(56, 189, 248, 0.12); /* Sky 400 dengan opacity */

  /* Active Menu State - Electric Blue to Cyan */
  --active-bg-start: #3b82f6; /* Blue 500 - Lebih cerah */
  --active-bg-end: #14c7f2; /* Cyan 600 - Gradient cyan untuk efek amazing */
  --active-box-shadow: rgba(59, 130, 246, 0.5); /* Lebih terang */

  /* Submenu - Deep Blue dengan sentuhan */
  --submenu-bg: #0f172f; /* Blue tint lebih gelap dari bg-start */

  /* User Card - Blue accent */
  --usercard-bg: rgba(59, 130, 246, 0.08); /* Blue 500 dengan opacity rendah */
  --usercard-hover-bg: rgba(56, 189, 248, 0.12); /* Sky 400 dengan opacity */

  /* Accent for Badges/Small Icons - Cyan to Sky */
  --accent-blue: #06b6d4; /* Cyan 500 - Lebih vibrant */
}

@font-face {
  font-family: "Telkomsel Batik Sans Bold";
  font-weight: bold;
  src:
		/* url('../fonts/TelkomselBatikSans-Bold.woff2') format('woff2'), */
    url("../../fonts/TelkomselBatikSans-Bold.woff") format("woff"),
    url("../../fonts/TelkomselBatikSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Telkomsel Batik Sans Regular";
  font-weight: normal;
  src:
		/* url('../fonts/TelkomselBatikSans-Regular.woff2') format('woff2'), */
    url("../../fonts/TelkomselBatikSans-Regular.woff") format("woff"),
    url("../../fonts/TelkomselBatikSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins Bold";
  font-weight: bold;
  src:
		/* url('../fonts/Poppins-Bold.woff2') format('woff2'), */
    url("../../fonts/Poppins-Bold.woff") format("woff"),
    url("../../fonts/Poppins-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins Regular";
  font-weight: normal;
  src:
		/* url('../fonts/Poppins-Regular.woff2') format('woff2'), */
    url("../../fonts/Poppins-Regular.woff") format("woff"),
    url("../../fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Poppins Light";
  font-weight: lighter;
  src:
		/* url('../fonts/Poppins-Light.woff2') format('woff2'), */
    url("../../fonts/Poppins-Light.woff") format("woff"),
    url("../../fonts/Poppins-Light.ttf") format("truetype");
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
  background: #ee2d35;
}

.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #ee2d35;
  background-color: rgba(250, 59, 65, 0.158) !important;
}

.note-modal-footer {
  height: 55px;
}

.note-editor.fullscreen .note-editable {
  background-color: white;
}

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

.note-editor .note-toolbar .note-dropdown-menu,
.note-popover .popover-content .note-dropdown-menu {
  min-width: 180px !important;
  width: 100%;
  right: 0;
}

.note-dropdown-menu {
  text-align: center;
}

.note-btn-group.note-align {
  padding: 5px;
}

.note-palette-title {
  font-weight: 600;
  border-bottom: 2px solid #303030 !important;
}

.note-icon-menu-check:before {
  content: none;
}

.table .img-table {
  width: 100%;
  height: 100%;
  max-height: 100px;
  max-width: 200px;
  object-fit: cover;
}

.dt-alamat {
  min-width: 250px;
}

.galery {
  background-color: #303030;
}

.galery-container {
  position: relative;
  display: inline-block;
}

.galery-container .top-right-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px;
}

.galery-container .top-right-btn .bx {
  font-size: 1rem;
}

.shimmer {
  color: grey;
  display: inline-block;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
  animation: shimmer 2.5s infinite;
  width: 100%;
  height: 100%;
  min-width: 150px;
  min-height: 100px;
  background-color: lightgray;
}

@keyframes shimmer {
  100% {
    mask-position: left;
  }
}

.slide-preview {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pastikan isi tetap di tengah */
  min-height: fit-content;
  /* Menyesuaikan dengan konten */
  max-height: calc(120vw / 4);
  /* Maksimal tinggi tetap ada */
}

.galery-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: fit-content;
  /* Pastikan mengikuti tinggi konten */
  max-height: calc(120vw / 4);
  position: relative;
}

.galery-container img {
  width: 100%;
  height: 100%;
  /* Pastikan gambar mengikuti tinggi container */
  object-fit: scale-down !important;
  max-height: calc(120vw / 4);
  background-color: rgb(221 221 221 / 18%);
  min-height: 200px;
}

.slide-content-preview {
  position: absolute;
  width: 100%;
  max-width: 90%;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px;
  border-radius: 5px;
  color: white;
}

.image-galery-preview img {
  object-fit: cover !important;
}

@media (max-width: 390px) {
  /* Atur untuk layar mobile */
  .slide-preview {
    display: flex;
    flex-direction: column;
    min-height: fit-content;
    /* Menyesuaikan dengan konten */
    max-height: none;
    /* Hilangkan batas tinggi maksimal */
  }

  .galery-container {
    min-height: fit-content;
    /* Menyesuaikan tinggi dengan konten */
    max-height: none;
    /* Hilangkan batas tinggi maksimal */
  }

  .galery-container img {
    height: auto;
    /* Biarkan tinggi mengikuti proporsi asli */
    max-height: none;
    /* Hilangkan batas tinggi maksimal */
    object-fit: contain;
    /* Pastikan gambar tidak terpotong */
  }

  .slide-content-preview {
    position: relative;
    /* Ubah dari absolute agar tetap mengikuti flow */
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 10px;
  }
}

.trumbowyg-box,
.trumbowyg-editor-box {
  padding: 0;
}

.btn-galery-show {
  cursor: pointer;
}

.dt-checkboxes {
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.165em;
  vertical-align: top;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid #d9dee3;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.dt-checkboxes:checked[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.dt-checkboxes:checked {
  background-color: #696cff;
  border-color: #696cff;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4);
}

.dt-checkboxes:checked {
  box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
}

.dt-checkboxes:checked {
  background-color: #696cff;
  border-color: #696cff;
}

.img-loader-captcha {
  max-height: 38px;
}

.layout-container.hide .layout-menu {
  position: fixed !important;
  top: 0 !important;
  height: 100% !important;
  left: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: translate3d(-100%, 0, 0);
  will-change:
    transform,
    -webkit-transform;
}

.layout-container.hide .layout-page {
  padding-left: 0px;
}

.layout-container.hide .navbar-nav,
.layout-container.show .navbar-nav {
  display: block !important;
}

.img-profile {
  width: 3rem !important;
  height: 3rem !important;
  max-height: 50px;
  max-width: 50px;
  border-radius: 50%;
  padding: 0.3rem;
  object-fit: contain;
  background-color: #d9dee3;
}

.seo-section {
  margin-bottom: 20px;
}

.seo-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.seo-issue,
.seo-improve,
.seo-good {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.seo-issue::before {
  content: "⚠️";
  margin-right: 8px;
  color: red;
}

.seo-improve::before {
  content: "🟡";
  margin-right: 8px;
  color: orange;
}

.seo-good::before {
  content: "✅";
  margin-right: 8px;
  color: green;
}

.dd-handle {
  background: none !important;
  border: none !important;
  cursor: grab;
}

/* Fade image in after load */
.lazyload,
.lazyloading {
  opacity: 0;
}

/* Efek shimmer sebelum gambar termuat */
.lazyload::before,
.lazyloading::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Transisi saat gambar selesai dimuat */
.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}

/* Hapus shimmer ketika gambar selesai dimuat */
.lazyloaded::before {
  display: none;
}

/* Animasi shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Custom CSS for fractional columns */

/* Large devices (desktops, 1200px and up) */
@media (min-width: 1200px) {
  .col-lg-0-5 {
    width: 4.16666667%;
    /* 100% / 12 * 0.5 */
    flex: 0 0 auto;
  }

  .col-lg-1-5 {
    width: 12.5%;
    /* 100% / 12 * 1.5 */
    flex: 0 0 auto;
  }

  .col-lg-2-5 {
    width: 20.83333333%;
    /* 100% / 12 * 2.5 */
    flex: 0 0 auto;
  }

  .col-lg-3-5 {
    width: 29.16666667%;
    /* 100% / 12 * 3.5 */
    flex: 0 0 auto;
  }

  .col-lg-4-5 {
    width: 37.5%;
    /* 100% / 12 * 4.5 */
    flex: 0 0 auto;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .col-md-0-5 {
    width: 4.16666667%;
    flex: 0 0 auto;
  }

  .col-md-1-5 {
    width: 12.5%;
    flex: 0 0 auto;
  }

  .col-md-2-5 {
    width: 20.83333333%;
    flex: 0 0 auto;
  }

  .col-md-3-5 {
    width: 29.16666667%;
    flex: 0 0 auto;
  }

  .col-md-4-5 {
    width: 37.5%;
    flex: 0 0 auto;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .col-sm-0-5 {
    width: 4.16666667%;
    flex: 0 0 auto;
  }

  .col-sm-1-5 {
    width: 12.5%;
    flex: 0 0 auto;
  }

  .col-sm-2-5 {
    width: 20.83333333%;
    flex: 0 0 auto;
  }

  .col-sm-3-5 {
    width: 29.16666667%;
    flex: 0 0 auto;
  }

  .col-sm-4-5 {
    width: 37.5%;
    flex: 0 0 auto;
  }
}

.table-success {
  --bs-table-bg: #449539;
  --bs-table-striped-bg: #3c8232;
  --bs-table-striped-color: #f7f9f7;
  --bs-table-active-bg: #326d29;
  --bs-table-active-color: #f7f9f7;
  --bs-table-hover-bg: #418b36;
  --bs-table-hover-color: #f7f9f7;
  color: #f7f9f7;
  border-color: #326d29;
}

.table-danger {
  --bs-table-bg: #b33d26;
  --bs-table-striped-bg: #9b3622;
  --bs-table-striped-color: #f7f9f7;
  --bs-table-active-bg: #822e1e;
  --bs-table-active-color: #f7f9f7;
  --bs-table-hover-bg: #a83a24;
  --bs-table-hover-color: #f7f9f7;
  color: #f7f9f7;
  border-color: #822e1e;
}

.object-fit-cover {
  object-fit: cover;
}

.authentication-wrapper.authentication-basic .authentication-inner {
  max-width: none !important;
}

@media (max-width: 991px) {
  .authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 400px !important;
    position: relative;
  }

  .authentication-wrapper.authentication-basic .authentication-inner:after {
    display: none;
  }
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: middle;
  content: "";
  border: 2px solid;
  block-size: 0.55em;
  border-block-start: 0;
  border-inline-start: 0;
  inline-size: 0.55em;
  margin-block-start: -0.29425em;
  margin-inline: 0.8em 0;
  transform: rotate(45deg);
}

/* Unified Grouping Styles for Dashboard and Reporting */
.table-order > tbody > tr.group-header-lembaga > td,
.table-order > tbody > tr.group-header-lembaga > *,
#MonitoringTransaksiTable.table-striped > tbody > tr.group-header-lembaga > td,
#MonitoringTransaksiTable.table-striped > tbody > tr.group-header-lembaga > *,
#AccountsTable.table-striped > tbody > tr.group-header-lembaga > td,
#AccountsTable.table-striped > tbody > tr.group-header-lembaga > * {
  background-color: #c4d5ff !important;
  --bs-table-accent-bg: transparent !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  opacity: 1 !important;
}

.table-order > tbody > tr.group-header-cabang > td,
.table-order > tbody > tr.group-header-cabang > *,
#MonitoringTransaksiTable.table-striped > tbody > tr.group-header-cabang > td,
#MonitoringTransaksiTable.table-striped > tbody > tr.group-header-cabang > *,
#AccountsTable.table-striped > tbody > tr.group-header-cabang > td,
#AccountsTable.table-striped > tbody > tr.group-header-cabang > * {
  background-color: #e6f0ff !important;
  --bs-table-accent-bg: transparent !important;
  color: #475569 !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
  opacity: 1 !important;
}

.group-header-lembaga td {
  font-size: 1rem !important;
  border-top: 2px solid #b8c5f0 !important; /* Darker blue border */
  border-bottom: 1px solid #b8c5f0 !important;
}

.group-header-cabang td {
  font-size: 0.9rem !important;
  padding-left: 2.5rem !important;
  border-bottom: 1px solid #b8c5f0 !important;
}

.group-header-lembaga i,
.group-header-cabang i {
  color: #435ebe !important; /* Primary blue icon */
  width: 20px;
}

/* 1. Background Sidebar - Hijau Gradasi */
aside#layout-menu {
  background: linear-gradient(
    180deg,
    var(--sidebar-bg-start) 0%,
    var(--sidebar-bg-end) 100%
  ) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* 2. Warna Teks & Icon - Terang */
aside#layout-menu .menu-link,
aside#layout-menu .menu-icon,
aside#layout-menu .menu-title,
aside#layout-menu .text-break {
  color: var(--text-color) !important;
}

/* 3. Teks muted (footer & arrow) */
aside#layout-menu .text-muted,
aside#layout-menu .sidebar-footer-text,
aside#layout-menu .dropdown-arrow {
  color: #ffffff !important;
}

/* 4. Nama User */
aside#layout-menu .user-card-sequence .text-dark {
  color: #ffffff !important;
}

/* 5. Hover Effect */
aside#layout-menu .menu-item:not(.active) .menu-link:hover {
  background-color: var(--hover-bg) !important;
  color: var(--text-color) !important;
  transition: all 0.2s ease;
}

/* 6. Status Aktif - Hijau Gradasi */
aside#layout-menu .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(
    72.47deg,
    var(--active-bg-start) 22.16%,
    var(--active-bg-end) 76.47%
  ) !important;
  box-shadow: 0px 4px 8px var(--active-box-shadow) !important;
  color: #fff !important;
}

/* Icon menu aktif */
aside#layout-menu .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: #fff !important;
}

/* 7. Menu open (dropdown aktif) */
aside#layout-menu .menu-item.active.open > .menu-link.menu-toggle {
  background-color: var(--hover-bg) !important;
  color: #fff !important;
}

/* 8. Sub-menu */
aside#layout-menu .menu-sub {
  background-color: var(--submenu-bg) !important;
}

/* 9. User Card */
aside#layout-menu .user-card-sequence {
  background: var(--usercard-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-top: 10px;
}

aside#layout-menu .user-card-sequence:hover {
  background: var(--usercard-hover-bg);
}

/* 10. Sembunyikan shadow bawaan */
aside#layout-menu .menu-inner-shadow {
  display: none !important;
}

aside#layout-menu .menu-link > div:first-child {
  position: relative !important;
  /* INI KUNCINYA */
  display: inline-flex;
  /* Pastikan lebar ngikutin konten */
  justify-content: center;
  /* Tengahin icon */
}

.bg-menu-theme .menu-inner > .menu-item.active:before {
  background: var(--active-bg-start);
}