.sidebar.mini_sidebar {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}
.sidebar.mini_sidebar #sidebar_menu>li {
    width: 100px;
    text-align: center !important;
}
.sidebar.mini_sidebar #sidebar_menu>li>a .nav_icon_small {
    width: 100px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.sidebar.mini_sidebar #sidebar_menu>li.mm-active>a .nav_icon_small {
    display: flex;
}
.sidebar.mini_sidebar #sidebar_menu>li:hover>a:hover .nav_icon_small {
    display: flex;
}
.sidebar #sidebar_menu>li ul{
    opacity: 1;
}
.sidebar.mini_sidebar .logo {
    width: 100px;
}
.sidebar.mini_sidebar #sidebar_menu>li:hover>a, .sidebar.mini_sidebar #sidebar_menu>li.mm-active>a {
    width: 300px !important;
}
.sidebar.mini_sidebar #sidebar_menu>li.mm-active ul {
    left: 100px;
}
.serach_field-area .search_inner button img {
    margin: auto;
}
.header_iner .header_right .header_notification_warp li>a {
    display: flex;
    justify-content: center;
}
.table-ktt > tbody > tr:nth-of-type(odd) > * {
    background-color: #d0f8ff;
}
.main_content.full_main_content {
    padding-left: 100px;
}
.table-ktt > tbody > tr:last-child > * {
    background-color: #028ec9;
    color: #ffffff;
}
#map {
  height: 450px;
}
.asset-ico {
    margin:10px;
}
.asset-ico img {
    width:90px;
}
.asset-ket {
    margin-top:10px;
}
.label {
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

.bar {
  width: 90%;
  height: 32px;
  padding: 0;
  margin-left: 10px;
  display: flex;
  overflow: hidden;
  border-radius: 6px;
  background: #eee;
}

.seg {
  height: 100%;
}

.green {
  background: #63b746;
}

.blue {
  background: #3b5bbb;
}

.orange {
  background: #e39b2d;
}
.abo-box {
  height:1200px !important;
}
.chart-wrapper {
  position: relative;
  width: 100%;
  margin: auto;
  height: 220px;
  overflow: hidden;
}
#ch-gi-1 {
  position: relative;
  top: 0px;
}
.abo-dets {
  position: absolute;
  width: 98%;
  top: 40%; /* ⬅️ ini sweet spot semi donut */
  left: 48%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.abo-dets .val {
  font-size: 28px;
  font-weight: bold;
}
.abo-dets .label {
  font-size: 12px;
  color: #000000;
}
select#f-teg + .nice-select {
    width: 175px !important;
}
.nko-inf {
    margin-top:20px;
    padding: 8px 20px;
    border-radius: 13px;
}
.cls-center {
    margin:0 auto;
}
#ch-nko {
    overflow: visible !important;
    width: 100%;
    height: 350px;
}
.pd-7 td,.pd-7 th {
    padding: 7px;
}

.garduIcon {
  position: relative;
  width: 30px;
  height: 40px;
}

.garduIcon img {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  position: relative;
}

/* efek lingkaran denyut */
.garduIcon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: rgba(255, 0, 0, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1.5s infinite;
  z-index: 1;
}

.garduIconb {
  position: relative;
  width: 30px;
  height: 40px;
}

.garduIconb img {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  position: relative;
}

/* efek lingkaran denyut */
.garduIconb::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: rgba(0, 17, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1.5s infinite;
  z-index: 1;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.line1 {
  stroke: rgb(255, 128, 128);
  stroke-width: 3;
  stroke-dasharray: 10,10;
  animation: dashMove 1s linear infinite;
  filter: drop-shadow(0 0 1px #ff7777);
  animation: dashMove 1s linear infinite;
}
.line5 {
  stroke: rgb(0, 210, 210);
  stroke-width: 3;
  stroke-dasharray: 10,10;
  animation: dashMove 1s linear infinite;
  filter: drop-shadow(0 0 1px #0026ff);
  animation: dashMove 1s linear infinite;
}

@keyframes dashMove {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -20;
  }
}

.chart-slide {
  position: absolute;
  width: 95%;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.5s ease;
  pointer-events: none;
}

.chart-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.chart-slide.prev {
  opacity: 0;
  transform: translateX(-30px);
  z-index: 1;
}

/* penting: parent harus relative */
.card_graph {
  position: relative;
  height: 400px;
}

.auto-height {
  height:auto;
}

.fau-slide {
  position: absolute;
  width: 95%;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.5s ease;
  pointer-events: none;
}

.fau-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.fau-slide.prev {
  opacity: 0;
  transform: translateX(-30px);
  z-index: 1;
}

.nko-slide {
  position: absolute;
  width: 95%;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.5s ease;
  pointer-events: none;
}

.nko-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.nko-slide.prev {
  opacity: 0;
  transform: translateX(-30px);
  z-index: 1;
}

/* .slider-tv {
  position: relative;
  overflow: hidden;
  height: 400px;
}

.chart-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  transform: translateX(100%);
  opacity: 0;

  transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1),
              opacity 0.7s ease;

  will-change: transform;
}

.chart-slide.active {
  transform: translateX(0);
  opacity: 1;
  z-index: 3;
}

.chart-slide.exit-left {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 2;
}

.chart-slide.enter-right {
  transform: translateX(100%);
  opacity: 0;
  z-index: 4;
} */

/* ==========================================
   CSS UNTUK LEGENDA (COLOR INDICATOR)
   ========================================== */

/* Wadah Legenda (Parent) */
.legend-container {
    display: flex;                 /* flex */
    gap: 1rem;                     /* gap-4 */
    font-size: 0.75rem;            /* text-xs */
    font-weight: 600;              /* font-semibold */
    color: #475569;                /* warna teks abu-abu medium */

     /* Tambahan Baru untuk Align Right */
    justify-content: flex-end;     /* Merapatkan isi legenda ke kanan di dalam wadahnya */
    margin-left: auto;             /* Mendorong wadah legenda ini ke ujung kanan parent */
}

/* Item Legenda (Wadah Dot + Teks) */
.legend-item {
    display: flex;                 /* flex */
    align-items: center;           /* items-center */
    gap: 0.375rem;                 /* gap-1.5 (6px) */
}

/* Lingkaran Kecil (Indicator Dot) */
.legend-dot {
    width: 0.625rem;               /* w-2.5 (10px) */
    height: 0.625rem;              /* h-2.5 (10px) */
    border-radius: 9999px;         /* rounded-full */
    display: inline-block;
}

/* Warna Dot Realisasi (Hijau) */
.legend-dot-realisasi {
    background-color: #10b981;     /* bg-emerald-500 */
}

/* Warna Dot On Progress (Biru) */
.legend-dot-onprogress {
    background-color: #818996;     /* bg-blue-500 */
}

/* ==========================================
   CSS KHUSUS UNTUK GRAFIK UTAMA (PROGRESS LIST)
   ========================================== */

/* 1. Container Kartu per Baris Data */
.progress-card {
    padding: 1rem;                         /* p-4 */
    border-radius: 1rem;                   /* rounded-2xl */
    border: 1px solid transparent;         /* border-transparent */
    background-color: transparent;
    transition: all 0.2s ease-in-out;      /* transition-all duration-200 */
}

/* Efek Hover yang Halus */
.progress-card:hover {
    background-color: #d4f1ff;             /* hover:bg-slate-50 */
    border-color: #f1f5f9;                 /* hover:border-slate-100 */
}

/* 2. Tata Letak Area Atas (Judul & Statistik) */
.progress-header {
    display: flex;                         /* flex */
    justify-content: space-between;        /* justify-between */
    align-items: flex-start;               /* items-start */
    gap: 1rem;                             /* gap-4 */
    margin-bottom: 0.5rem;                 /* mb-2 */
}

/* Judul Parameter */
.progress-title {
    font-size: 0.875rem;                   /* text-sm */
    font-weight: 600;                      /* font-semibold */
    color: #334155;                        /* text-slate-700 */
    line-height: 1.25;                     /* leading-tight */
}

/* Wadah Angka Rasio & Persen */
.progress-stats-container {
    display: flex;                         /* flex */
    align-items: center;                   /* items-center */
    gap: 0.5rem;                           /* gap-2 */
    flex-shrink: 0;                        /* shrink-0 */
}

/* Format Angka Rasio (misal: 3 / 1) */
.progress-numeric-badge {
    font-family: monospace;                /* font-mono */
    font-size: 0.75rem;                    /* text-xs */
    font-weight: 700;                      /* font-bold */
    color: #94a3b8;                        /* text-slate-400 */
}

/* 3. Badge Persentase Dasar */
.progress-percentage-badge {
    font-size: 0.75rem;                    /* text-xs */
    font-weight: 700;                      /* font-bold */
    padding: 0.125rem 0.5rem;              /* py-0.5 px-2 */
    border-radius: 9999px;                 /* rounded-full */
}

/* Variasi Warna Badge Berdasarkan Progres */
.badge-default {
    background-color: #f1f5f9;             /* bg-slate-100 */
    color: #334155;                        /* text-slate-700 */
}
.badge-success {
    background-color: #ecfdf5;             /* bg-emerald-50 */
    color: #047857;                        /* text-emerald-700 */
    border: 1px solid #d1fae5;             /* border-emerald-100 */
}
.badge-info {
    background-color: #eef2ff;             /* bg-indigo-50 */
    color: #4338ca;                        /* text-indigo-700 */
    border: 1px solid #e0e7ff;             /* border-indigo-100 */
}
.badge-warning {
    background-color: #fffbeb;             /* bg-amber-50 */
    color: #b45309;                        /* text-amber-700 */
    border: 1px solid #fef3c7;             /* border-amber-100 */
}
.badge-danger {
    background-color: #fff1f2;             /* bg-rose-50 */
    color: #be123c;                        /* text-rose-700 */
    border: 1px solid #ffe4e6;             /* border-rose-100 */
}

/* 4. Struktur Progress Bar (Track & Fill) */
.progress-track {
    width: 100%;                           /* w-full */
    height: 0.75rem;                       /* h-3 */
    background-color: #f1f5f9;             /* bg-slate-100 */
    border-radius: 9999px;                 /* rounded-full */
    overflow: hidden;                      /* overflow-hidden */
    display: flex;                         /* flex */
}

/* Bagian Realisasi (Hijau Gradien) */
.progress-bar-realisasi {
    background: linear-gradient(to right, #34d399, #10b981); /* gradien hijau */
    height: 100%;                          /* h-full */
    transition: all 0.5s ease-in-out;      /* transisi halus saat dimuat */
    border-top-left-radius: 9999px;        /* melengkung di sisi kiri */
    border-bottom-left-radius: 9999px;
}

/* Bagian On Progress (Biru Gradien) */
.progress-bar-onprogress {
    background: #b5c9e8;
    /* background: linear-gradient(to right, #60a5fa, #3b82f6); */
    height: 100%;                          /* h-full */
    transition: all 0.5s ease-in-out;      /* transisi halus saat dimuat */
}
.progress-bar-over0 {
    background: #8f9cb1;
    /* background: linear-gradient(to right, #60a5fa, #3b82f6); */
    height: 100%;                          /* h-full */
    transition: all 0.5s ease-in-out;      /* transisi halus saat dimuat */
}
.progress-bar-over1 {
    background: #ffb554;
    /* background: linear-gradient(to right, #60a5fa, #3b82f6); */
    height: 100%;                          /* h-full */
    transition: all 0.5s ease-in-out;      /* transisi halus saat dimuat */
}