body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background: #f9f9f9;
    }
    .ini-sudah{}
    .header {
      background: #000;
      color: #fff;
      padding: 15px;
      display: flex;
      align-items: center;
    }

    .back-icon {
      cursor: pointer;
      font-size: 20px;
      margin-right: 10px;
    }

    .header h2 {
      margin: 0;
      font-size: 18px;
    }

    .container {
      padding: 15px;
    }

    .card {
      background: #fff;
      border: 2px solid #ccc;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .card h3 {
      margin: 0;
      font-size: 18px;
      font-weight: bold;
    }

    .border-toska{
      border-color: #7ADAA5 !important;
    }
    .card p {
      margin: 5px 0 10px;
      font-size: 14px;
      color: #333;
    }

    .jumlah {
      font-size: 16px;
      font-weight: bold;
      color: #ff4d4f;
      text-align:right;
/*      float: right;*/
/*      margin-top: -38px;*/
    }
    .btn-group {
      display: flex;
      justify-content: space-between;
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 25px;
      font-weight: bold;
      cursor: pointer;
      font-size: 14px;
      color: white;
    }
    .input-tidak-cocok{width: 70px;padding: 0px 5px;border-radius: 5px;border: 1px solid #3E5F44;margin-right: 5px;}

    .btn.sudah {
      background-color: #ff6b6b;
    }

    .btn.ok {
      background-color: #3E5F44;
    }
    .btn.detail {
      background-color: #2db6f5;
    }
    .ini-sudah.card, .ini-sudah .btn.detail{background: #f9f9f9;border-color: #eee;box-shadow: 0;}
    .ini-sudah h3, .ini-sudah p, .ini-sudah .jumlah{color:#B7B7B7;}
    .ini-sudah .btn.detail{background: #eee;}
    .ini-sudah .btn.sudah{background: grey;}
  .wrap-loader{margin: 90px auto;width:70%;text-align: center;}
.custom-loader {
  width:100%;
  height:40px;
  border-radius: 40px;
  background:
    repeating-linear-gradient(135deg,#2C3338 0 20px,#2C3338bf 0 40px) left/0% 100%   no-repeat,
    repeating-linear-gradient(135deg,#2C333833    0 20px,#2C33381a    0 40px) left/100% 100%;
  animation:p3 6s infinite;
}
@keyframes p3 {
  100% {background-size:100% 100%}
}
#showMe {
  animation: cssAnimation 1s infinite;
  opacity: 0.5;
  margin-top: 15px;
}

@keyframes cssAnimation {
  0% {
  opacity: 0.5;
  }
  51% {
  opacity: 1;
  }
}
    .checkbox-container {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 24px;
    }

    input[type="checkbox"] {
      width: 32px;
      height: 32px;
      cursor: pointer;
      accent-color: gray; /* default color */
      transition: accent-color 0.3s ease;
    }

    input[type="checkbox"].checked {
      accent-color: green;
    }
    .koreksi{background: #FFEAD8;}