:root {
  --primary: #2b579a;
  --secondary: #6c757d;
  --warning: #ffc107;
  --success: #1d6f42;
  --success-light: #f5fffa;
  --danger: #d83b01;
  --dark: #212529;
  --light: #f8f9fa;
  --text-color: #bcbcc2;
  --transparan: #ffffff00;
  --border: #52525b;
  --border-active: #dedede;
  --color: #bcbcc2;
  --color-disabled: #6c757d;
  --bg: #4a4950;
  --bg-content: #32323a;
  --border-sidebar: #e2e2e2;
  --text-sidebar: #e9e9e9;
  --bg-sidebar-hover: #5a5959;
  --bg-sidebar-active: #32323a;
  --font-sidebar: "Roboto Condensed", sans-serif;
  --bg-title-content: #242428;
  --bg-input: rgba(255, 255, 255, 0.196);
  --bg-input-focus: rgba(255, 255, 255, 0.4);
  --input-color: #f4f4f4;
  --input-color-focus: #000000;
  --bg-table-header: #242428;

  /* MODAL COLOR */
  --bg-modal-header: #525252;

  /* Pastel Biru */
  --pastel-biru: #deefff;
  --color-pastel-biru: #334456;
  --border-pastel-biru: #c9dcef;

  /* Pastel Hijau */
  --pastel-hijau: #d3ebd3;
  --pastel-hijau-light: #fafffa;
  --color-pastel-hijau: #2f392f;
  --border-pastel-hijau: #bee1be;

  /* Pastel Merah */
  --pastel-merah: #fabebe;
  --color-pastel-merah: #870e0e;
  --border-pastel-merah: #ebacac;

  /* Pastel Kuning */
  --pastel-kuning: #ffea9e;
  --color-pastel-kuning: #4a4a2a;
  --border-pastel-kuning: #ffe27a;

  /* Pastel Ungu */
  --pastel-ungu: #e6e0ff;
  --color-pastel-ungu: #53477e;
  --border-pastel-ungu: #d5cafa;

  /* Pastel Orange */
  --pastel-orange: rgb(255, 222, 190);
  --color-pastel-orange: rgb(133, 105, 77);
  --border-pastel-orange: rgb(255, 222, 190);

  --color-start: #19e3d5;
  --color-mid: #d33deb;
  --color-end: #f00e43;
  --bg-loading: rgba(0, 0, 0, 0.3);
  --color-spinner: #1c5e98;
  --bg-spinner: #4cdbff;
}
/* ==========================
   PASTEL BUTTON BASE
========================== */
[class^="btn-pastel-"] {
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  --bs-btn-active-color: inherit;

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-btn-bg) 88%, #000);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--bs-btn-border-color) 88%,
    #000
  );

  --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-bg) 80%, #000);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--bs-btn-border-color) 80%,
    #000
  );
}

/* ==========================
   PRIMARY
========================== */
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
}

/* ==========================
   SECONDARY
========================== */
.btn-secondary {
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
}

/* ==========================
   SUCCESS
========================== */
.btn-success {
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
}

/* ==========================
   DANGER
========================== */
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
}

/* ==========================
   WARNING
========================== */
.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--warning);
  --bs-btn-border-color: var(--warning);
}

/* ==========================
   INFO
========================== */
.btn-info {
  --bs-btn-bg: var(--info);
  --bs-btn-border-color: var(--info);
}

/* ==========================
   LIGHT
========================== */
.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--light);
  --bs-btn-border-color: var(--border);
}

/* ==========================
   DARK
========================== */
.btn-dark {
  --bs-btn-bg: var(--dark);
  --bs-btn-border-color: var(--dark);
}

/* ==========================
   OUTLINE BUTTONS
========================== */
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-color: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-color: #fff;
}

.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-color: #fff;
}

.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-color: #fff;
}

.btn-outline-warning {
  --bs-btn-color: var(--warning);
  --bs-btn-border-color: var(--warning);
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-hover-color: #000;
}

.btn-outline-info {
  --bs-btn-color: var(--info);
  --bs-btn-border-color: var(--info);
  --bs-btn-hover-bg: var(--info);
  --bs-btn-hover-color: #fff;
}

/* ==========================
   PASTEL BUTTONS (BONUS)
========================== */
.btn-pastel-biru {
  --bs-btn-color: var(--color-pastel-biru);
  --bs-btn-bg: var(--pastel-biru);
  --bs-btn-border-color: var(--border-pastel-biru);
}

.btn-pastel-hijau {
  --bs-btn-color: var(--color-pastel-hijau);
  --bs-btn-bg: var(--pastel-hijau);
  --bs-btn-border-color: var(--border-pastel-hijau);
}

.btn-pastel-merah {
  --bs-btn-color: var(--color-pastel-merah);
  --bs-btn-bg: var(--pastel-merah);
  --bs-btn-border-color: var(--border-pastel-merah);
}
.btn-pastel-kuning {
  --bs-btn-color: var(--color-pastel-kuning);
  --bs-btn-bg: var(--pastel-kuning);
  --bs-btn-border-color: var(--border-pastel-kuning);
}
.btn-pastel-ungu {
  --bs-btn-color: var(--color-pastel-ungu);
  --bs-btn-bg: var(--pastel-ungu);
  --bs-btn-border-color: var(--border-pastel-ungu);
}
.btn-pastel-orange {
  --bs-btn-color: var(--color-pastel-orange);
  --bs-btn-bg: var(--pastel-orange);
  --bs-btn-border-color: var(--border-pastel-orange);
}

.btn-pastel-biru:hover {
  background-color: color-mix(in srgb, var(--pastel-biru) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-biru) 80%, #fff);
  color: var(--color-pastel-biru);
}

.btn-pastel-hijau:hover {
  background-color: color-mix(in srgb, var(--pastel-hijau) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-hijau) 80%, #fff);
  color: var(--color-pastel-hijau);
}

.btn-pastel-merah:hover {
  background-color: color-mix(in srgb, var(--pastel-merah) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-merah) 80%, #fff);
  color: var(--color-pastel-merah);
}

.btn-pastel-kuning:hover {
  background-color: color-mix(in srgb, var(--pastel-kuning) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-kuning) 80%, #fff);
  color: var(--color-pastel-kuning);
}

.btn-pastel-ungu:hover {
  background-color: color-mix(in srgb, var(--pastel-ungu) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-ungu) 80%, #fff);
  color: var(--color-pastel-ungu);
}

.btn-pastel-orange:hover {
  background-color: color-mix(in srgb, var(--pastel-orange) 80%, #fff);
  border-color: color-mix(in srgb, var(--border-pastel-orange) 80%, #fff);
  color: var(--color-pastel-orange);
}