:root {
  --biru: #0d6efd;
  --abu-abu: #6c757d;
  --hijau: #198754;
  --merah: #dc3545;
  --ungu: #b70095;
  --orange: #da8700;
  --dark: #212529;
  --light: #f8f9fa;
  --bg: #32323a;
  --bg-login: #37354d;
  --main-color: #1d4293;
  --dark-color: #2b3549;
  --border-sidebar: #e2e2e2;
  --text-sidebar: #ffffff;

  --bg-toggle-slide: #c7dbec;
  --color-menu-span: rgba(255, 255, 255, 0.3);
  /* --primary: #00d2ff; */
  --accent: #6a11cb;
  --bg-dark: #0f0c29;
  --glass: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --primary: #2b579a;
  --secondary: #6c757d;
  --warning: #ffc107;
  --success: #1d6f42;
  --success-light: #f5fffa;
  --danger: #d83b01;
  --dark: #212529;
  --light: #f8f9fa;
  --transparan: #ffffff00;
  --border: #52525b;
  --border-active: #72727a;
  --color: #ffffff;
  --color-title: #ffffff;
  --color-disabled: #6c757d;
  --bg-sidebar: #4a4950;
  --bg-foto-sidebar: #ffffff;
  --border-sidebar: #65656c;
  --color-sidebar: #e9e9e9;
  --bg-sidebar-hover: #5a5959;
  --bg-sidebar-active: var(--bg);
  --color-sidebar-active: var(--color-sidebar);
  --color-sidebar-title: #f5f5f5;
  --font-sidebar: "Roboto Condensed", sans-serif;

  --bg-title-content: #242428;
  --bg-content: #242428;
  --border-content: transparent;
  --shadow-content: 0px 0px 30px 4px rgba(0, 0, 0, 0);
  --shadow-title-content: 0px 0px 15px -2px rgba(0, 0, 0, 0);
  --bg-title-menu-permissions: rgba(255, 255, 255, 0.077);
  --bg-input: rgba(255, 255, 255, 0.196);
  --bg-input-focus: rgba(255, 255, 255, 0.23);
  --input-color: #ffffff;
  --input-color-focus: #000000;
  --color-placeholder: #848484;
  --color-placeholder-active: #4e4e4e;
  --bg-table-header: #242428;
  --th-bg: #323239;
  --th-color: #fff;
  --td-bg: #43434a;
  --th-color: #fff;

  --bg-list-item: #43434a;
  --color-list-item: #b1b1b1;
  --boder-list-item: var(--transparan);
  --margin-list-item: 1px;

  --color-btn-show-password: rgba(255, 255, 255, 0.7);
  --color-btn-show-password-hover: var(--color-pastel-biru);
  --bg-hover-btn-show-password: var(--pastel-biru);
  --border-btn-show-password: var(--transparan);
  --color-error: #ff0000;
  --bg-ul-multi-error: rgba(255, 255, 255, 0.86);

  --bg-dropdown-select2: rgba(255, 255, 255, 0.196);

  /* MODAL COLOR*/
  --bg-modal: var(--bg-sidebar);
  --bg-modal-header: var(--bg);
  --color-modal-header: #c3c3c3;
  --border-modal-footer: var(--border);

  /* 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, 182);
  --color-pastel-orange: rgb(229, 133, 16);
  --border-pastel-orange: rgb(233, 198, 155);

  --color-start: #19e3d5;
  --color-mid: #d33deb;
  --color-end: #f00e43;
  --bg-loading: rgba(0, 0, 0, 0.3);
  --color-spinner: #1c5e98;
  --bg-spinner: #4cdbff;
  --w-sidebar: 220px;
}

html.light {
  --bg: #ffffff;
  --color: #5e5e5e;
  --border-sidebar: #e2e2e2;
  --text-sidebar: #ffffff;
  --border: #dcdcdc;
  --border-active: #72727a;
  --bg-sidebar: #db0000;
  --bg-foto-sidebar: #ffffff;
  --border-sidebar: #535169;
  --color-sidebar: #b3c8d6;
  --bg-sidebar-hover: #696783;
  --bg-sidebar-active: var(--bg);
  --color-sidebar-active: #37354d;
  --color-sidebar-title: #e1ebf3;
  --bg-toggle-slide: #32323a;
  --bg-content: #fafdff;
  --bg-title-content: #415c82;
  --color-title: #ffffff;
  --border-content: rgb(232, 240, 245);
  --shadow-content: 0px 0px 15px 5px rgba(0, 0, 0, 0.04);
  --shadow-title-content: 0px 0px 15px -2px rgba(0, 0, 0, 0.3);
  --bg-input: transparent;
  --bg-input-focus: transparent;
  --input-color: #ffffff;
  --input-color-focus: #000000;
  --color-placeholder: #d6d6d6;
  --color-placeholder-active: #d1d1d1;
  --bg-table-header: #242428;
  --th-bg: #ebf7ff;
  --th-color: #4b5b66;
  --td-bg: transparent;
  --td-color: var(--color);
  --color-menu-span: var(--bg-sidebar);
  --bg-title-menu-permissions: rgb(217, 241, 255);
  --bg-dropdown-select2: #ffffff3f;

  /* --primary: #00d2ff; */
  --accent: #6a11cb;
  --bg-dark: #0f0c29;
  --glass: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --primary: #2b579a;
  --secondary: #6c757d;
  --warning: #ffc107;
  --success: #1d6f42;
  --success-light: #f5fffa;
  --danger: #d83b01;
  --dark: #212529;
  --light: #f8f9fa;
  --transparan: #ffffff00;

  --color-disabled: #6c757d;
  --bg-list-item: #ffffff;
  --color-list-item: var(--color);
  --border-list-item: var(--border);
  --margin-list-item: 3px;

  --color-btn-show-password: rgba(64, 64, 64, 0.7);
  --color-btn-show-password-hover: var(--color-pastel-biru);
  --bg-hover-btn-show-password: var(--pastel-biru);
  --border-btn-show-password: var(--border);
  --color-error: #c11e1e;

  --bg-ul-multi-error: rgba(255, 242, 242, 0.858);
  /* MODAL COLOR */
  --bg-modal: var(--bg);
  --bg-modal-header: var(--bg-sidebar);
  --color-modal-header: #fff;
}
/* ==========================
   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);
}

/* MERAH */
.btn-pastel-merah.active {
  background-color: var(--merah);
  border-color: var(--merah);
  color: #fff;
}

/* HIJAU */
.btn-pastel-hijau.active {
  background-color: var(--hijau);
  border-color: var(--hijau);
  color: #fff;
}

/* UNGU */
.btn-pastel-ungu.active {
  background-color: var(--ungu);
  border-color: var(--ungu);
  color: #fff;
}

/* ORANGE */
.btn-pastel-orange.active {
  background-color: var(--orange);
  border-color: var(--orange);
  color: #fff;
}