:root {
  --bg: #ffffff;
  --warna: #232328;
  --warna-hover: #e8eeff;
  --warna-border-top: #ffffff;
  --sub-warna: #555659;
  --warna-loding: var(--sub-warna);
  --warna-utama: #5b5b5b;
  --text-nav-active: #fd8589;
  --text-nav: #e8f4ff;
  --text-sub-nav: #adc9e4;
  --warna_text: #5b5b5b;
  --border-color: #c9c9c9;
  --invalid-border: rgb(222, 0, 56);
  --border-nav: #5f6371;
  --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: #38b697;
  --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-biru {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}

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

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

.bg-biru-muda {
  background-color: #d9e6ff;
  color: #282d37 !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;
}

.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-biru {
  background-color: #deefff !important;
  color: #334456 !important;
  border-color: #c9dcef !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;
  color: #53477e;
  border-color: #d5cafa;
}
.btn-pastel-ungu:hover,
.btn-pastel-ungu:focus {
  background-color: #d2c6ff;
  color: #53477e;
}

.btn-pastel-kuning {
  background-color: rgb(250, 255, 198);
  color: #6b712c;
  border-color: #dadf9f;
}
.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);
}

.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;
}