:root {
    --esdm-yellow: #ffcc00; /* Kuning logo ESDM - sesuaikan dengan warna yang tepat */
    --esdm-black: #000000;  /* Hitam */
  }
  .bg-esdm-yellow {
    background-color: var(--esdm-yellow) !important;
  }
  .text-esdm-yellow {
    color: var(--esdm-yellow) !important;
  }
  .border-esdm-yellow {
    border-color: var(--esdm-yellow) !important;
  }
  .btn-esdm-yellow {
    background-color: var(--esdm-yellow);
    border-color: var(--esdm-yellow);
    color: #212529; /* Teks gelap untuk kontras yang baik */
  }
  .btn-esdm-yellow:hover {
    background-color: #d9ad00; /* Slightly darker shade for hover */
    border-color: #ccaa00;
    color: #212529;
  }

  .btn-outline-esdm-yellow {
    color: var(--esdm-yellow);
    border-color: var(--esdm-yellow);
    background-color: transparent;
  }

  .btn-outline-esdm-yellow:hover {
    color: #212529;
    background-color: var(--esdm-yellow);
    border-color: var(--esdm-yellow);
  }
  .bg-esdm-black {
    background-color: var(--esdm-black) !important;
  }
  .text-esdm-black {
    color: var(--esdm-black) !important;
  }
  .border-esdm-black {
    border-color: var(--esdm-black) !important;
  }
  .btn-esdm-black {
    background-color: var(--esdm-black);
    border-color: var(--esdm-black);
    color: #ffffff; /* Teks putih untuk kontras yang baik */
  }
  .btn-esdm-black:hover {
    background-color: #333333; /* Slightly lighter shade for hover */
    border-color: #262626;
    color: #ffffff;
  }
  .btn-outline-esdm-black {
    color: var(--esdm-black);
    border-color: var(--esdm-black);
    background-color: transparent;
  }
  .btn-outline-esdm-black:hover {
    color: #ffffff;
    background-color: var(--esdm-black);
    border-color: var(--esdm-black);
  }
  .alert-esdm-yellow {
    background-color: rgba(255, 204, 0, 0.15);
    border-color: rgba(255, 204, 0, 0.4);
    color: #806600;
  }

  .alert-esdm-black {
    background-color: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.4);
    color: #333333;
  }

  .badge-esdm-yellow {
    background-color: var(--esdm-yellow);
    color: #212529;
  }

  .badge-esdm-black {
    background-color: var(--esdm-black);
    color: #ffffff;
  }

  .card-esdm-yellow {
    border-color: var(--esdm-yellow);
  }

  .card-esdm-yellow .card-header {
    background-color: var(--esdm-yellow);
    color: #212529;
  }

  .card-esdm-black {
    border-color: var(--esdm-black);
  }

  .card-esdm-black .card-header {
    background-color: var(--esdm-black);
    color: #ffffff;
  }

  .progress-bar-esdm-yellow {
    background-color: var(--esdm-yellow);
  }

  .progress-bar-esdm-black {
    background-color: var(--esdm-black);
  }
/* timpa */
  .btn-secondary {
    background-color: var(--esdm-yellow) !important;
    border-color: var(--esdm-yellow) !important;
    color: #212529 !important;
  }

  .btn-secondary:hover {
    background-color: #d9ad00 !important;
    border-color: #ccaa00 !important;
  }

  .text-secondary {
    color: var(--esdm-yellow) !important;
  }

  .bg-secondary {
    background-color: var(--esdm-yellow) !important;
  }

  .btn-primary {
    background-color: var(--esdm-black) !important;
    border-color: var(--esdm-black) !important;
  }

  .btn-primary:hover {
    background-color: #333333 !important;
    border-color: #262626 !important;
  }

  .text-primary {
    color: var(--esdm-black) !important;
  }

  .bg-primary {
    background-color: var(--esdm-black) !important;
  }