:root {
  --bg: #ffffff;
  --warna: #3c4e5a;
  --warna-hover: #e8eeff;
  --warna-border-top: #dcdfeb;
  --sub-warna: #374651;
  --warna-bg-icon-nav: #1a6996;
  --warna-loding: var(--sub-warna);
  --warna-utama: #4b758b;
  --text-nav-active: #8df2ff;
  --border-nav: #667279;
  --text-nav: #e8f4ff;
  --text-sub-nav: #adc9e4;
  --warna_text: #5b5b5b;
  --border-color: #dadada;
  --invalid-border: rgb(222, 0, 56);

  --font-color-active: #3d91bf;
  --border-color-active: #3d91bf;
  --holder-color: #bbbbbb;
  --color-primary: #558eba;
  --color-primary-hover: #537d9c;
  --color-primary-disabled: #adb0b3;
  --color-secondary: #181818;
  --color-secondary-hover: #353535;
  --color-secondary-disabled: #adb0b3;
  --color-info: #7f41ac;
  --color-info-hover: #9841d7;
  --color-info-disabled: #adb0b3;
  --color-success: #4abea1;
  --color-success-hover: #40a797;
  --color-success-disabled: #adb0b3;
  --color-danger: #dd438d;
  --color-danger-hover: #b43372;
  --color-danger-disabled: #adb0b3;
  --color-warning: #ffe77a;
  --color-warning-hover: #f5db47;
  --color-warning-disabled: #adb0b3;
  --line-border-fill: #3498db;
  --line-border-empty: #e0e0e0;
  --step-color: #3878d2;
  --step-color-active: #f0f0f0;
  --step-background: #f3f9ff;
  --step-bakground-active: #3878d2;
}
.bg-card-biru {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
.bg-biru {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

.bg-kuning {
  background-color: var(--color-warning) !important;
  color: #000 !important;
}

.bg-merah {
  background-color: var(--color-danger);
  color: #fff !important;
}

.bg-biru-muda {
  background-color: #d9e6ff !important;
  color: #282d37 !important;
  border-color: #d9e6ff !important;
}
.bg-ungu {
  background-color: var(--color-info) !important;
  color: #fff !important;
}

.bg-hijau {
  background-color: var(--color-success) !important;
  color: #fff !important;
}

.bg-putih {
  background-color: #fff;
  color: #8d8d8d;
}

.text-biru {
  color: #1a5da0;
}

.text-merah {
  color: #ce0555 !important;
}

.text-hijau {
  color: #0f9d58 !important;
}

.l-space-2 {
  letter-spacing: 2px;
}

.bg-pastel-hijau {
  background-color: #d3ebd3 !important;
  color: #2f392f !important;
  border-color: #bee1be !important;
}

.bg-pastel-merah {
  background-color: #fabebe !important;
  color: #870e0e !important;
  border-color: #ebacac !important;
}

.bg-pastel-alert {
  background-color: #fff9f9 !important;
  color: #bf0000 !important;
  border-color: #ffd1d1 !important;
}

.bg-pastel-biru {
  background-color: #deefff !important;
  color: #334456 !important;
  border-color: #cce6ff !important;
}

.bg-pastel-kuning {
  background-color: rgb(250, 255, 198);
  color: #6b712c;
  border-color: #dadf9f;
}

.btn-pastel-hijau {
  background-color: #d3ebd3;
  color: #2f392f;
  border-color: #bee1be;
}

.btn-pastel-hijau:hover {
  background-color: #c1e1c1;
  color: #2f392f;
}

.btn-pastel-hijau:focus {
  background-color: #70d370;
  color: #2f392f;
}

.btn-pastel-merah {
  background-color: #fabebe;
  color: #870e0e;
  border-color: #ebacac;
}

.btn-pastel-merah:hover,
.btn-pastel-merah:focus {
  background-color: #faa0a0;

  color: #870e0e;
}

.btn-pastel-biru {
  background-color: #deefff;
  color: #334456;
  border-color: #c9dcef;
}

.btn-pastel-biru:hover,
.btn-pastel-biru:focus {
  background-color: #c5dff8;
  color: #334456;
}

.btn-pastel-ungu {
  background-color: #e6e0ff !important;
  color: #53477e !important;
  border-color: #d5cafa;
}

.btn-pastel-ungu:hover,
.btn-pastel-ungu:focus {
  background-color: #c5b8ff !important;
  color: #45396b !important;
  border-color: #b5a5f0 !important;
}

.btn-pastel-kuning {
  background-color: #ffea9e;
  color: #4a4a2a;
  border-color: #ffe27a;
}
.btn-pastel-kuning:hover,
.btn-pastel-kuning:focus {
  background-color: rgb(237, 246, 135);
  color: #6b712c;
  border-color: rgb(223, 233, 119);
}

.btn-pastel-orange {
  background-color: rgb(255, 222, 190);
  color: rgb(133, 105, 77);
  border-color: rgb(255, 222, 190);
}
.btn-pastel-orange:hover,
.btn-pastel-orange:focus {
  background-color: rgb(219, 194, 168);
  color: rgb(133, 105, 77);
}

.btn-pastel-abu {
  background-color: #e0e0e0;
  color: #333333;
  border-color: #d0d0d0;
}

.btn-pastel-abu:hover,
.btn-pastel-abu:focus {
  background-color: #d5d5d5;
  color: #222222;
}

.btn-pastel-hijau:disabled,
.btn-pastel-biru:disabled,
.btn-pastel-ungu:disabled,
.btn-pastel-kuning:disabled,
.btn-pastel-orange:disabled,
.btn-pastel-merah:disabled,
.btn-pastel-abu:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(50%);
  pointer-events: none;
  background-color: #e8e8e8;
  color: #bebebe;
  border: 0 solid #fff !important;
}

.bg-modal-default {
  background-color: #f9fbff;
  border-color: #e9f1ff !important;
  color: var(--warna_text) !important;
}

.bg-modal-default > .modal-header {
  background-color: #829acb;
  color: #fff !important;
}

.bg-modal-hijau {
  background-color: #f8fffd;
  border-color: #d2eee7 !important;
  color: var(--warna_text) !important;
}

.bg-modal-hijau > .modal-header {
  background-color: #4abea1;
  color: #fff !important;
}

.bg-modal-merah {
  background-color: #fff8f8;
  border-color: #f5d2d2 !important;
  color: var(--warna_text) !important;
}

.bg-modal-merah > .modal-header {
  background-color: #e74c3c;
  color: #fff !important;
}

.bg-modal-ungu {
  background-color: #faf5ff;
  border-color: #e2d2f5 !important;
  color: var(--warna_text) !important;
}

.bg-modal-ungu > .modal-header {
  background-color: #8e44ad;
  color: #fff !important;
}

.bg-modal-kuning {
  background-color: #fffdf5;
  border-color: #f5e6b8 !important;
  color: var(--warna_text) !important;
}

.bg-modal-kuning > .modal-header {
  background-color: #f1c40f;
  color: #fff !important;
}

.bg-word {
  background-color: #2b579a !important;
  color: #fff;
}
.bg-excel {
  background-color: #217346 !important;
  color: #fff;
}

.bg-pdf {
  background-color: #fa0f00 !important;
  color: #fff;
}

.bg-info-word {
  background-color: #f8fbff !important;
  border-color: #a1c6ff !important;
}
.bg-info-excel {
  background-color: #f6fffa !important;
  border-color: #9dcbb2 !important;
}

.bg-info-pdf {
  background-color: #fff6f6 !important;
  border-color: #ff9b9b !important;
}

.bg-biru-light {
  background-color: #f9fcff !important;
  border-color: #f9fcff !important;
  color: #f9fcff !important;
}

.btn-group-vertical-detail {
  margin: 0;
  padding: 0;
}

.btn-group-vertical-detail .btn-detail {
  display: flex;
  width: 100%;
  border-radius: 0;
}

.btn-group-vertical-detail .btn-detail:first-child {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.btn-group-vertical-detail .btn-detail:last-child {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.btn-group-vertical-detail .btn-detail:not(:last-child) {
  margin-bottom: 5px;
}

.btn-detail {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 15px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: start;
  font-style: italic;
  letter-spacing: 1.5px;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.btn-detail i {
  margin-right: 4px;
  font-size: 1rem;
}

.border-biru {
  border: solid 1px #b2cddc !important;
}

.dt-row-merah {
  background-color: rgba(255, 214, 214, 0.5) !important;
}

.dt-row-kuning {
  background-color: rgba(255, 242, 204, 0.5) !important;
}

.dt-row-hijau {
  background-color: rgba(214, 245, 214, 0.5) !important;
}

.dt-row-biru {
  background-color: rgba(214, 233, 255, 0.5) !important;
}

.dt-row-border-merah {
  position: relative;
  border-top: 3px solid #d32f2f !important;
}

.dt-row-border-merah::after {
  content: "BATAS PAGU ANGGARAN";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1px;
  color: #d32f2f;
  border: 1px solid #d32f2f;
  border-radius: 8px;
}