body { margin:0; font-family:Arial,sans-serif; background:#f0f0f0; min-height:100vh; display:flex; flex-direction:column; }
.header { width:100%; background:linear-gradient(90deg,#f17d10,#fcb825); color:#fff; padding:12px 20px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 4px 6px rgba(0,0,0,0.1); position:fixed; top:0; z-index:1000; }
.header h1 { font-size:1.2rem; margin:0; }
.sidebar { background:#1f2937;color:#fff;width:180px;height:100vh;padding:70px 10px 20px 10px;position:fixed;top:0;left:0;transition:all 0.3s;overflow-y:auto; z-index:999; }
.sidebar.collapsed { width:60px; }
.sidebar a { display:flex; align-items:center;color:#fff;text-decoration:none;padding:10px;margin:5px 0;border-radius:6px; transition:background 0.3s; }
.sidebar a i { margin-right:10px; font-size:1.2rem; }
.sidebar a:hover { background:#374151; }
.sidebar.collapsed .menu-text { display:none; }
.sidebar.collapsed a { justify-content:center; }
.sidebar.collapsed a i { margin-right:0; }
.main-content { margin-left:180px; padding:100px 20px 20px 20px; flex:1; transition:margin-left 0.3s; background:#fff8dc;}
.sidebar.collapsed ~ .main-content { margin-left:60px; }

.running-text span { display:inline-block; padding-left:100%; animation:marquee 120s linear infinite; font-weight:bold; font-size:1rem; color:#333; }
@keyframes marquee { 0%{ transform:translateX(0); } 100%{ transform:translateX(-100%); } }
.widget { background:#fff; padding:20px; border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); margin-bottom:20px; min-height:20px; }

.circle-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; }
.circle-container { display: none; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at center,transparent 0%,#007bff 100%); border-radius: 10%; overflow: hidden; }

svg { max-width:100%; height:auto; display:block; }
.layer-1 circle { fill:#ffffff; stroke:#ccc; stroke-width:2; filter:drop-shadow(0 5px 15px rgba(0,0,0,0.25)); }
.layer-2 path, .layer-3 path, .layer-4 path { stroke:#fff; stroke-width:1.5; filter:drop-shadow(0 2px 5px rgba(0,0,0,0.2)); }
text { font-family:Arial,sans-serif; font-size:16px; font-weight:bold; fill:#000; pointer-events:none; }

.carousel-control-prev, .carousel-control-next { width:50px; height:50px; top:50%; transform:translateY(-50%); border-radius:50%; background:rgba(0,0,0,0.3); }
.carousel-control-prev:hover, .carousel-control-next:hover { background:rgba(0,0,0,0.5); }

footer { background:#1f2937; color:#fff; text-align:center; padding:10px; margin-top:auto; }
@media (max-width:768px){
  .sidebar { left:-180px; }
  .sidebar.show { left:0; }
  .main-content { margin-left:0 !important; padding-top:100px; }
  .running-bar { top:60px; }
}


/* Biar lebih besar dan mudah diklik */
.custom-checkbox {
  transform: scale(1.2);
  cursor: pointer;
}

/* Saat dicentang tetap putih */
.custom-checkbox:checked {
  accent-color: #ffffff !important;
}

.spl-input {
  border: none;
  outline: none;
  /* Opsional: kasih background atau padding jika perlu */
}
#tabel_SPL1 tbody tr:nth-child(odd) {
  background-color: #eeeeee; /* abu-abu terang */
}

#tabel_SPL1 tbody tr:nth-child(even) {
  background-color: #e8f5e9; /* hijau tipis (green 50 dari material design) */
}

  .status-sd.green {
    background-color: #c8e6c9; /* hijau muda */
    color: #2e7d32;            /* teks hijau tua */
    font-weight: bold;
  }

  .status-sd.yellow {
    background-color: #fff9c4; /* kuning muda */
    color: #f57f17;            /* teks kuning tua */
    font-weight: bold;
  }

  .status-sd.red {
    background-color: #ffcdd2; /* merah muda */
    color: #b71c1c;            /* teks merah tua */
    font-weight: bold;
  }

  
  .blink { animation: blink 0.5s infinite; } 
  @keyframes blink { 0%,50%,100% { opacity:1; } 25%,75% { opacity:0.2; } }

  
  .blink { 
    animation: blink 0.5s infinite; 
  }
  @keyframes blink { 
    0%,50%,100% { opacity:1; } 
    25%,75% { opacity:0.2; } 
  }
  
  .running-bar {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: #fffae6;
    border-bottom: 1px solid #ddd;
    padding: 6px 0;
    z-index: 998;
    overflow: hidden; /* pastikan kontainer memotong isi */
    white-space: nowrap; /* supaya teks tidak wrap */
  }
  
  .running-text {
    display: inline-block;
    white-space: nowrap;
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    animation: marquee 10s linear infinite;
  }
  
  @keyframes marquee {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
  }