/*  */

.bg-custom {
    /* background: #EAF7FF; */
    background: #0475350e;
}

.custom-table td:first-child {
    width: 30% !important;
    white-space: nowrap !important;
    color: grey;
}
    
.custom-table td:last-child {
    width: 70% !important;
    word-break: break-word !important;
}

/* cek aduan style */
.img-cek-aduan {
  width: 30%;
  height: 40%;
}


/* timeline */
.timeline-container {
  position: relative;
  max-width: 800px;
  /* margin: 40px auto; */
  padding: 10px 20px;
  font-family: "Segoe UI", sans-serif;
}

.timeline-line {
  position: absolute;
  left: 48px; /* Sama dengan posisi dot */
  top: 24px;
  bottom: 131px;
  width: 4px;
  background: #ffffff;
  z-index: 0; /* di bawah dot dan card */
}

.timeline-entry {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 40px;
  padding-left: 60px;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  left: 22px; /* Sesuaikan agar center dengan garis 4px */
  top: 10px;
  z-index: 2;
  background-color: white;
  border: 4px solid;
  box-shadow: 0 0 0 2px #e0e0e0;
}

.timeline-dot.success {
  border-color: #1cc88a;
}

.timeline-dot.failed {
  border-color: #e74a3b;
}

.timeline-dot.pending {
  border-color: #f6c23e;
}

.timeline-card {
  background-color: #fff;
  border-left: 4px solid #4e73df;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  width: 100%;
}

.timeline-date {
  font-size: 14px;
  color: #888;
  margin-bottom: 5px;
}

.timeline-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  color: #2e2e2e;
}

.timeline-sub-title {
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 4px;
  color: #2e2e2e;
  font-style: italic;
}

.timeline-desc {
  font-size: 14px;
  color: #555;
}

.timeline-ip {
  font-size: 12px;
  color: #aaa;
  margin-top: 8px;
  border-top: 1px dashed #eee;
  padding-top: 5px;
}

/* rating */
.rating {
  direction: rtl;
  unicode-bidi: bidi-override;
  text-align: center;
}
.rating input[type="radio"] {
  display: none;
}
.rating label {
  font-size: 2rem;
  color: #ccc;
  cursor: pointer;
}
.rating input:checked ~ label,
.rating label:hover,
.rating label:hover ~ label {
  color: #ffc107;
}

.feedback-box {
  max-width: 400px;
  margin: 50px auto;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.feedback-box img {
  width: 50px;
  margin-bottom: 15px;
}

.feedback-box textarea {
  resize: none;
}