:root,
[data-bs-theme="light"] {
  --warna_putih_transparant: #ffffff5b;
  --text-color: rgba(0, 0, 0, 0.1);
  --app-shell-bg: #ecf0f1;
  --app-surface: #ffffff;
  --app-surface-alt: #d7dde2;
  --app-text: #2c3e50;
  --app-text-muted: #5d6d7e;
  --app-border-color: #cfd8dc;
  --app-sidebar-bg: #d7dde2;
  --app-sidebar-submenu-bg: #cfd8dc;
  --app-sidebar-hover-bg: #eef3f6;
  --app-header-bg: #e74c3c;
  --app-header-accent: #c0392b;
  --app-header-fg: #ffffffd1;
  --app-accent: #e74c3c;
  --app-accent-contrast: #ffffff;
  --app-overlay: rgba(255, 255, 255, 0.65);
  --app-overlay-text: #2c3e50;
  --app-offcanvas-backdrop: rgba(236, 240, 241, 0.55);
  --app-scrollbar-track: transparent;
  --app-scrollbar-thumb: rgba(44, 62, 80, 0.38);
  --app-scrollbar-thumb-hover: rgba(31, 37, 44, 0.58);
  --bs-body-bg: #ecf0f1;
  --bs-body-color: #2c3e50;
  --bs-border-color: #bdc3c7;
  --bs-secondary-bg: #dfe6e9;
  --bs-tertiary-bg: #ffffff;
  --bs-heading-color: #2c3e50;
  --bs-link-color: #c0392b;
  --bs-link-hover-color: #ffffffd1;
  --clr-hex-ffffff5b: #ffffff5b;
  --clr-rgba-0-0-0-0-1: rgba(0, 0, 0, 0.1);
  --clr-hex-ecf0f1: #ecf0f1;
  --clr-hex-ffffff: #ffffff;
  --clr-hex-d7dde2: #d7dde2;
  --clr-hex-2c3e50: #2c3e50;
  --clr-hex-5d6d7e: #5d6d7e;
  --clr-hex-cfd8dc: #cfd8dc;
  --clr-hex-eef3f6: #eef3f6;
  --clr-hex-e74c3c: #e74c3c;
  --clr-hex-c0392b: #c0392b;
  --clr-hex-ffffffd1: #ffffffd1;
  --clr-rgba-255-255-255-0-65: rgba(255, 255, 255, 0.65);
  --clr-rgba-236-240-241-0-55: rgba(236, 240, 241, 0.55);
  --clr-rgba-44-62-80-0-38: rgba(44, 62, 80, 0.38);
  --clr-rgba-31-37-44-0-58: rgba(31, 37, 44, 0.58);
  --clr-hex-bdc3c7: #bdc3c7;
  --clr-hex-dfe6e9: #dfe6e9;
  --clr-hex-34495e: #34495e;
  --clr-hex-415b76: #415b76;
  --clr-hex-22313f: #22313f;
  --clr-rgba-44-62-80-0-72: rgba(44, 62, 80, 0.72);
  --clr-rgba-44-62-80-0-45: rgba(44, 62, 80, 0.45);
  --clr-rgba-8-10-12-0-6: rgba(8, 10, 12, 0.6);
  --clr-rgba-8-10-12-0-82: rgba(8, 10, 12, 0.82);
  --clr-hex-ff8a7f: #ff8a7f;
  --clr-rgba-0-0-0-0-5: rgba(0, 0, 0, 0.5);
  --clr-hex-1f2d3a: #1f2d3a;
  --clr-rgba-255-255-255-0-55: rgba(255, 255, 255, 0.55);
  --clr-hex-10202c: #10202c;
  --clr-hex-f4f7f9: #f4f7f9;
  --clr-rgba-255-255-255-0-08: rgba(255, 255, 255, 0.08);
  --clr-rgba-10-18-24-0-18: rgba(10, 18, 24, 0.18);
  --clr-hex-7ed6df: #7ed6df;
  --clr-hex-30485d: #30485d;
  --clr-hex-243746: #243746;
  --clr-hex-55e6c1: #55e6c1;
  --clr-hex-273746: #273746;
  --clr-hex-8fb9d6: #8fb9d6;
  --clr-hex-2f3640: #2f3640;
  --clr-hex-1f252c: #1f252c;
  --clr-hex-b2bec3: #b2bec3;
  --clr-rgba-44-62-80-0-12: rgba(44, 62, 80, 0.12);
  --clr-rgba-44-62-80-0-08: rgba(44, 62, 80, 0.08);
  --clr-hex-f4f9fb: #f4f9fb;
  --clr-hex-e8f4f8: #e8f4f8;
  --clr-hex-4bc7d8: #4bc7d8;
  --clr-hex-eefbf8: #eefbf8;
  --clr-hex-e3f7f2: #e3f7f2;
  --clr-hex-18d6bb: #18d6bb;
  --clr-hex-f1f7fb: #f1f7fb;
  --clr-hex-e6f1f8: #e6f1f8;
  --clr-hex-7eb6d6: #7eb6d6;
  --clr-hex-f6f8fa: #f6f8fa;
  --clr-hex-edf2f5: #edf2f5;
  --clr-hex-7f8c8d: #7f8c8d;
  --clr-rgba-46-204-113-0-58: rgba(46, 204, 113, 0.58);
  --clr-rgba-231-76-60-0-58: rgba(231, 76, 60, 0.58);
  --clr-rgba-241-196-15-0-58: rgba(241, 196, 15, 0.58);
  --clr-rgba-93-173-226-0-58: rgba(93, 173, 226, 0.58);
  --clr-rgba-72-219-251-0-58: rgba(72, 219, 251, 0.58);
  --clr-hex-58d68d: #58d68d;
  --clr-hex-ff7675: #ff7675;
  --clr-hex-f9ca24: #f9ca24;
  --clr-hex-74b9ff: #74b9ff;
  --clr-hex-243342: #243342;
  --clr-hex-d64535: #d64535;
  --clr-hex-fff7bf: #fff7bf;
  --clr-hex-ffe082: #ffe082;
  --clr-rgba-180-145-24-0-28: rgba(180, 145, 24, 0.28);
  --clr-rgba-180-145-24-0-12: rgba(180, 145, 24, 0.12);
  --clr-hex-5d4037: #5d4037;
  --clr-hex-4e3b12: #4e3b12;
  --clr-hex-6d5317: #6d5317;
  --clr-rgba-255-214-102-0-24: rgba(255, 214, 102, 0.24);
  --clr-rgba-0-0-0-0-24: rgba(0, 0, 0, 0.24);
  --clr-hex-ffe9a8: #ffe9a8;
  --clr-hex-7952b3: #7952b3;
  --clr-rgba-255-255-255-0-85: rgba(255, 255, 255, 0.85);
  --clr-hex-fff: #fff;
  --clr-rgba-255-255-255-0-95: rgba(255, 255, 255, 0.95);
  --clr-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
  --clr-rgba-0-0-0-0-15: rgba(0, 0, 0, 0.15);
  --clr-hex-6c757d: #6c757d;
  --clr-hex-dee2e6: #dee2e6;
  --clr-rgba-121-82-179-0-25: rgba(121, 82, 179, 0.25);
  --clr-hex-f7f5fb: #f7f5fb;
  --clr-hex-495057: #495057;
  --clr-rgba-255-255-255-0-2: rgba(255, 255, 255, 0.2);
  --clr-rgba-255-255-255-0-01: rgba(255, 255, 255, 0.01);
  --clr-rgba-0-0-0-0-125: rgba(0, 0, 0, 0.125);
  --clr-hex-343a40: #343a40;
  --clr-hex-563d7c: #563d7c;
  --clr-hex-f8f9fa: #f8f9fa;
  --clr-hex-e9ecef: #e9ecef;
  --clr-rgba-0-0-0-0-65: rgba(0, 0, 0, 0.65);
  --clr-rgba-0-0-0-0-85: rgba(0, 0, 0, 0.85);
  --clr-rgba-121-82-179-0-1: rgba(121, 82, 179, 0.1);
  --clr-rgba-121-82-179-0-7: rgba(121, 82, 179, 0.7);
  --clr-hex-0d6efd: #0d6efd;
  --clr-rgba-39-41-43-0-03: rgba(39, 41, 43, 0.03);
  --clr-rgba-39-41-43-0-1: rgba(39, 41, 43, 0.1);
  --clr-rgba-255-0-0-0-1: rgba(255, 0, 0, 0.1);
  --clr-rgba-86-61-124-0-15: rgba(86, 61, 124, 0.15);
  --clr-hex-000000de: #000000de;
  --clr-hex-ffffffde: #ffffffde;
  --clr-hex-fafafa: #fafafa;
  --clr-hex-f5f5f5: #f5f5f5;
  --clr-hex-212529: #212529;
  --clr-hex-61428f: #61428f;
  --clr-hex-ffe484: #ffe484;
  --clr-hex-2a2730: #2a2730;
  --clr-rgba-255-228-132-0-25: rgba(255, 228, 132, 0.25);
  --clr-hex-5bc0de: #5bc0de;
  --clr-hex-f0ad4e: #f0ad4e;
  --clr-hex-d9534f: #d9534f;
  --clr-hex-cbbde2: #cbbde2;
  --clr-hex-e5e1ea: #e5e1ea;
  --clr-hex-f9f9f9: #f9f9f9;
  --clr-hex-000: #000;
  --clr-hex-6610f2: #6610f2;
  --clr-hex-6f42c1: #6f42c1;
  --clr-hex-d63384: #d63384;
  --clr-hex-dc3545: #dc3545;
  --clr-hex-fd7e14: #fd7e14;
  --clr-hex-ffc107: #ffc107;
  --clr-hex-198754: #198754;
  --clr-hex-20c997: #20c997;
  --clr-hex-0dcaf0: #0dcaf0;
  --clr-hex-adb5bd: #adb5bd;
  --clr-hex-cfe2ff: #cfe2ff;
  --clr-hex-9ec5fe: #9ec5fe;
  --clr-hex-6ea8fe: #6ea8fe;
  --clr-hex-3d8bfd: #3d8bfd;
  --clr-hex-0a58ca: #0a58ca;
  --clr-hex-084298: #084298;
  --clr-hex-052c65: #052c65;
  --clr-hex-031633: #031633;
  --clr-hex-e0cffc: #e0cffc;
  --clr-hex-c29ffa: #c29ffa;
  --clr-hex-a370f7: #a370f7;
  --clr-hex-8540f5: #8540f5;
  --clr-hex-520dc2: #520dc2;
  --clr-hex-3d0a91: #3d0a91;
  --clr-hex-290661: #290661;
  --clr-hex-140330: #140330;
  --clr-hex-e2d9f3: #e2d9f3;
  --clr-hex-c5b3e6: #c5b3e6;
  --clr-hex-a98eda: #a98eda;
  --clr-hex-8c68cd: #8c68cd;
  --clr-hex-59359a: #59359a;
  --clr-hex-432874: #432874;
  --clr-hex-2c1a4d: #2c1a4d;
  --clr-hex-160d27: #160d27;
  --clr-hex-f7d6e6: #f7d6e6;
  --clr-hex-efadce: #efadce;
  --clr-hex-e685b5: #e685b5;
  --clr-hex-de5c9d: #de5c9d;
  --clr-hex-ab296a: #ab296a;
  --clr-hex-801f4f: #801f4f;
  --clr-hex-561435: #561435;
  --clr-hex-2b0a1a: #2b0a1a;
  --clr-hex-f8d7da: #f8d7da;
  --clr-hex-f1aeb5: #f1aeb5;
  --clr-hex-ea868f: #ea868f;
  --clr-hex-e35d6a: #e35d6a;
  --clr-hex-b02a37: #b02a37;
  --clr-hex-842029: #842029;
  --clr-hex-58151c: #58151c;
  --clr-hex-2c0b0e: #2c0b0e;
  --clr-hex-ffe5d0: #ffe5d0;
  --clr-hex-fecba1: #fecba1;
  --clr-hex-feb272: #feb272;
  --clr-hex-fd9843: #fd9843;
  --clr-hex-ca6510: #ca6510;
  --clr-hex-984c0c: #984c0c;
  --clr-hex-653208: #653208;
  --clr-hex-331904: #331904;
  --clr-hex-fff3cd: #fff3cd;
  --clr-hex-ffe69c: #ffe69c;
  --clr-hex-ffda6a: #ffda6a;
  --clr-hex-ffcd39: #ffcd39;
  --clr-hex-cc9a06: #cc9a06;
  --clr-hex-997404: #997404;
  --clr-hex-664d03: #664d03;
  --clr-hex-332701: #332701;
  --clr-hex-d1e7dd: #d1e7dd;
  --clr-hex-a3cfbb: #a3cfbb;
  --clr-hex-75b798: #75b798;
  --clr-hex-479f76: #479f76;
  --clr-hex-146c43: #146c43;
  --clr-hex-0f5132: #0f5132;
  --clr-hex-0a3622: #0a3622;
  --clr-hex-051b11: #051b11;
  --clr-hex-d2f4ea: #d2f4ea;
  --clr-hex-a6e9d5: #a6e9d5;
  --clr-hex-79dfc1: #79dfc1;
  --clr-hex-4dd4ac: #4dd4ac;
  --clr-hex-1aa179: #1aa179;
  --clr-hex-13795b: #13795b;
  --clr-hex-0d503c: #0d503c;
  --clr-hex-06281e: #06281e;
  --clr-hex-cff4fc: #cff4fc;
  --clr-hex-9eeaf9: #9eeaf9;
  --clr-hex-6edff6: #6edff6;
  --clr-hex-3dd5f3: #3dd5f3;
  --clr-hex-0aa2c0: #0aa2c0;
  --clr-hex-087990: #087990;
  --clr-hex-055160: #055160;
  --clr-hex-032830: #032830;
  --clr-hex-ced4da: #ced4da;
  --clr-hex-727272: #727272;
  --clr-hex-60a0b0: #60a0b0;
  --clr-hex-008085: #008085;
  --clr-hex-007020: #007020;
  --clr-hex-fcc: #fcc;
  --clr-hex-c00: #c00;
  --clr-hex-f00: #f00;
  --clr-hex-030: #030;
  --clr-hex-cfc: #cfc;
  --clr-hex-0c0: #0c0;
  --clr-hex-aaa: #aaa;
  --clr-hex-009: #009;
  --clr-hex-9c6: #9c6;
  --clr-hex-069: #069;
  --clr-hex-078: #078;
  --clr-hex-c24f19: #c24f19;
  --clr-hex-40a070: #40a070;
  --clr-hex-d73038: #d73038;
  --clr-hex-4070a0: #4070a0;
  --clr-hex-c30: #c30;
  --clr-hex-a00: #a00;
  --clr-hex-337e7e: #337e7e;
  --clr-hex-fc3: #fc3;
  --clr-hex-006ee0: #006ee0;
  --clr-hex-366: #366;
  --clr-hex-168174: #168174;
  --clr-hex-360: #360;
  --clr-hex-6b62de: #6b62de;
  --clr-hex-b715f4: #b715f4;
  --clr-hex-007ca5: #007ca5;
  --clr-hex-2f6f9f: #2f6f9f;
  --clr-hex-033: #033;
  --clr-hex-555: #555;
  --clr-hex-bbb: #bbb;
  --clr-rgba-231-76-60-0-55: rgba(231, 76, 60, 0.55);
  --clr-rgba-203-189-226-0-2: rgba(203, 189, 226, 0.2);
  --clr-rgba-111-66-193-0-1: rgba(111, 66, 193, 0.1);
  --clr-rgba-0-0-0-0-5-2: rgba(0, 0, 0, 0.5);
  --clr-hex-ddd: #ddd;
  --clr-hex-5c636a: #5c636a;
  --clr-hex-f1b0b7: #f1b0b7;
  --clr-hex-b6effb: #b6effb;
  --clr-hex-e2e3e5: #e2e3e5;
  --clr-hex-41464b: #41464b;
  --clr-hex-d3d4d6: #d3d4d6;
  --clr-hex-bcd0c7: #bcd0c7;
  --clr-hex-e5d4f7: #e5d4f7;
  --clr-hex-5e2ca5: #5e2ca5;
  --clr-hex-d0b9f0: #d0b9f0;
  --clr-hex-fcd3e1: #fcd3e1;
  --clr-hex-a83261: #a83261;
  --clr-hex-fbb7cf: #fbb7cf;
  --clr-hex-444: #444;
  --clr-rgba-0-105-92-0-25: rgba(0, 105, 92, 0.25);
  --clr-hex-44444459: #44444459;
  --clr-rgba-0-0-0-0-18: rgba(0, 0, 0, 0.18);
  --clr-hex-ffffff14: #ffffff14;
  --clr-hex-e8f2ff: #e8f2ff;
  --clr-hex-0061f2: #0061f2;
  --clr-rgba-13-110-253-0-2: rgba(13, 110, 253, 0.2);
  --clr-rgb-13-110-253: rgb(13, 110, 253);
  --clr-rgba-108-117-125-0-2: rgba(108, 117, 125, 0.2);
  --clr-rgb-108-117-125: rgb(108, 117, 125);
  --clr-rgba-25-135-84-0-2: rgba(25, 135, 84, 0.2);
  --clr-rgb-25-135-84: rgb(25, 135, 84);
  --clr-rgba-220-53-69-0-2: rgba(220, 53, 69, 0.2);
  --clr-rgb-220-53-69: rgb(220, 53, 69);
  --clr-rgba-255-193-7-0-2: rgba(255, 193, 7, 0.2);
  --clr-rgb-255-193-7: rgb(255, 193, 7);
  --clr-rgba-13-202-240-0-2: rgba(13, 202, 240, 0.2);
  --clr-rgb-13-202-240: rgb(13, 202, 240);
  --clr-rgba-248-249-250-0-2: rgba(248, 249, 250, 0.2);
  --clr-rgb-248-249-250: rgb(248, 249, 250);
  --clr-rgba-33-37-41-0-2: rgba(33, 37, 41, 0.2);
  --clr-rgb-33-37-41: rgb(33, 37, 41);
  --clr-hex-dee2e624: #dee2e624;
  --clr-rgba-248-249-250-1: rgba(248, 249, 250, 1);
}

[data-bs-theme="dark"] {
  --app-shell-bg: #2c3e50;
  --app-surface: #34495e;
  --app-surface-alt: #415b76;
  --app-text: #ecf0f1;
  --app-text-muted: #bdc3c7;
  --app-border-color: #415b76;
  --app-sidebar-bg: #2c3e50;
  --app-sidebar-submenu-bg: #34495e;
  --app-sidebar-hover-bg: #22313f;
  --app-header-bg: #e74c3c;
  --app-header-accent: #c0392b;
  --app-header-fg: #ffffffd1;
  --app-accent: #e74c3c;
  --app-accent-contrast: #ffffff;
  --app-overlay: rgba(44, 62, 80, 0.72);
  --app-overlay-text: #ecf0f1;
  --app-offcanvas-backdrop: rgba(44, 62, 80, 0.45);
  --app-scrollbar-track: transparent;
  --app-scrollbar-thumb: rgba(8, 10, 12, 0.6);
  --app-scrollbar-thumb-hover: rgba(8, 10, 12, 0.82);
  --bs-body-bg: #2c3e50;
  --bs-body-color: #ecf0f1;
  --bs-border-color: #415b76;
  --bs-secondary-bg: #415b76;
  --bs-tertiary-bg: #34495e;
  --bs-heading-color: #ecf0f1;
  --bs-link-color: #ff8a7f;
  --bs-link-hover-color: #ffffffd1;
  --clr-hex-ffffff5b: #ffffff5b;
  --clr-rgba-0-0-0-0-1: rgba(0, 0, 0, 0.1);
  --clr-hex-ecf0f1: #ecf0f1;
  --clr-hex-ffffff: #ffffff;
  --clr-hex-d7dde2: #d7dde2;
  --clr-hex-2c3e50: #2c3e50;
  --clr-hex-5d6d7e: #5d6d7e;
  --clr-hex-cfd8dc: #cfd8dc;
  --clr-hex-eef3f6: #eef3f6;
  --clr-hex-e74c3c: #e74c3c;
  --clr-hex-c0392b: #c0392b;
  --clr-hex-ffffffd1: #ffffffd1;
  --clr-rgba-255-255-255-0-65: rgba(255, 255, 255, 0.65);
  --clr-rgba-236-240-241-0-55: rgba(236, 240, 241, 0.55);
  --clr-rgba-44-62-80-0-38: rgba(44, 62, 80, 0.38);
  --clr-rgba-31-37-44-0-58: rgba(31, 37, 44, 0.58);
  --clr-hex-bdc3c7: #bdc3c7;
  --clr-hex-dfe6e9: #dfe6e9;
  --clr-hex-34495e: #34495e;
  --clr-hex-415b76: #415b76;
  --clr-hex-22313f: #22313f;
  --clr-rgba-44-62-80-0-72: rgba(44, 62, 80, 0.72);
  --clr-rgba-44-62-80-0-45: rgba(44, 62, 80, 0.45);
  --clr-rgba-8-10-12-0-6: rgba(8, 10, 12, 0.6);
  --clr-rgba-8-10-12-0-82: rgba(8, 10, 12, 0.82);
  --clr-hex-ff8a7f: #ff8a7f;
  --clr-rgba-0-0-0-0-5: rgba(0, 0, 0, 0.5);
  --clr-hex-1f2d3a: #1f2d3a;
  --clr-rgba-255-255-255-0-55: rgba(255, 255, 255, 0.55);
  --clr-hex-10202c: #10202c;
  --clr-hex-f4f7f9: #f4f7f9;
  --clr-rgba-255-255-255-0-08: rgba(255, 255, 255, 0.08);
  --clr-rgba-10-18-24-0-18: rgba(10, 18, 24, 0.18);
  --clr-hex-7ed6df: #7ed6df;
  --clr-hex-30485d: #30485d;
  --clr-hex-243746: #243746;
  --clr-hex-55e6c1: #55e6c1;
  --clr-hex-273746: #273746;
  --clr-hex-8fb9d6: #8fb9d6;
  --clr-hex-2f3640: #2f3640;
  --clr-hex-1f252c: #1f252c;
  --clr-hex-b2bec3: #b2bec3;
  --clr-rgba-44-62-80-0-12: rgba(44, 62, 80, 0.12);
  --clr-rgba-44-62-80-0-08: rgba(44, 62, 80, 0.08);
  --clr-hex-f4f9fb: #f4f9fb;
  --clr-hex-e8f4f8: #e8f4f8;
  --clr-hex-4bc7d8: #4bc7d8;
  --clr-hex-eefbf8: #eefbf8;
  --clr-hex-e3f7f2: #e3f7f2;
  --clr-hex-18d6bb: #18d6bb;
  --clr-hex-f1f7fb: #f1f7fb;
  --clr-hex-e6f1f8: #e6f1f8;
  --clr-hex-7eb6d6: #7eb6d6;
  --clr-hex-f6f8fa: #f6f8fa;
  --clr-hex-edf2f5: #edf2f5;
  --clr-hex-7f8c8d: #7f8c8d;
  --clr-rgba-46-204-113-0-58: rgba(46, 204, 113, 0.58);
  --clr-rgba-231-76-60-0-58: rgba(231, 76, 60, 0.58);
  --clr-rgba-241-196-15-0-58: rgba(241, 196, 15, 0.58);
  --clr-rgba-93-173-226-0-58: rgba(93, 173, 226, 0.58);
  --clr-rgba-72-219-251-0-58: rgba(72, 219, 251, 0.58);
  --clr-hex-58d68d: #58d68d;
  --clr-hex-ff7675: #ff7675;
  --clr-hex-f9ca24: #f9ca24;
  --clr-hex-74b9ff: #74b9ff;
  --clr-hex-243342: #243342;
  --clr-hex-d64535: #d64535;
  --clr-hex-fff7bf: #fff7bf;
  --clr-hex-ffe082: #ffe082;
  --clr-rgba-180-145-24-0-28: rgba(180, 145, 24, 0.28);
  --clr-rgba-180-145-24-0-12: rgba(180, 145, 24, 0.12);
  --clr-hex-5d4037: #5d4037;
  --clr-hex-4e3b12: #4e3b12;
  --clr-hex-6d5317: #6d5317;
  --clr-rgba-255-214-102-0-24: rgba(255, 214, 102, 0.24);
  --clr-rgba-0-0-0-0-24: rgba(0, 0, 0, 0.24);
  --clr-hex-ffe9a8: #ffe9a8;
  --clr-hex-7952b3: #7952b3;
  --clr-rgba-255-255-255-0-85: rgba(255, 255, 255, 0.85);
  --clr-hex-fff: #fff;
  --clr-rgba-255-255-255-0-95: rgba(255, 255, 255, 0.95);
  --clr-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
  --clr-rgba-0-0-0-0-15: rgba(0, 0, 0, 0.15);
  --clr-hex-6c757d: #6c757d;
  --clr-hex-dee2e6: #dee2e6;
  --clr-rgba-121-82-179-0-25: rgba(121, 82, 179, 0.25);
  --clr-hex-f7f5fb: #f7f5fb;
  --clr-hex-495057: #495057;
  --clr-rgba-255-255-255-0-2: rgba(255, 255, 255, 0.2);
  --clr-rgba-255-255-255-0-01: rgba(255, 255, 255, 0.01);
  --clr-rgba-0-0-0-0-125: rgba(0, 0, 0, 0.125);
  --clr-hex-343a40: #343a40;
  --clr-hex-563d7c: #563d7c;
  --clr-hex-f8f9fa: #f8f9fa;
  --clr-hex-e9ecef: #e9ecef;
  --clr-rgba-0-0-0-0-65: rgba(0, 0, 0, 0.65);
  --clr-rgba-0-0-0-0-85: rgba(0, 0, 0, 0.85);
  --clr-rgba-121-82-179-0-1: rgba(121, 82, 179, 0.1);
  --clr-rgba-121-82-179-0-7: rgba(121, 82, 179, 0.7);
  --clr-hex-0d6efd: #0d6efd;
  --clr-rgba-39-41-43-0-03: rgba(39, 41, 43, 0.03);
  --clr-rgba-39-41-43-0-1: rgba(39, 41, 43, 0.1);
  --clr-rgba-255-0-0-0-1: rgba(255, 0, 0, 0.1);
  --clr-rgba-86-61-124-0-15: rgba(86, 61, 124, 0.15);
  --clr-hex-000000de: #000000de;
  --clr-hex-ffffffde: #ffffffde;
  --clr-hex-fafafa: #fafafa;
  --clr-hex-f5f5f5: #f5f5f5;
  --clr-hex-212529: #212529;
  --clr-hex-61428f: #61428f;
  --clr-hex-ffe484: #ffe484;
  --clr-hex-2a2730: #2a2730;
  --clr-rgba-255-228-132-0-25: rgba(255, 228, 132, 0.25);
  --clr-hex-5bc0de: #5bc0de;
  --clr-hex-f0ad4e: #f0ad4e;
  --clr-hex-d9534f: #d9534f;
  --clr-hex-cbbde2: #cbbde2;
  --clr-hex-e5e1ea: #e5e1ea;
  --clr-hex-f9f9f9: #f9f9f9;
  --clr-hex-000: #000;
  --clr-hex-6610f2: #6610f2;
  --clr-hex-6f42c1: #6f42c1;
  --clr-hex-d63384: #d63384;
  --clr-hex-dc3545: #dc3545;
  --clr-hex-fd7e14: #fd7e14;
  --clr-hex-ffc107: #ffc107;
  --clr-hex-198754: #198754;
  --clr-hex-20c997: #20c997;
  --clr-hex-0dcaf0: #0dcaf0;
  --clr-hex-adb5bd: #adb5bd;
  --clr-hex-cfe2ff: #cfe2ff;
  --clr-hex-9ec5fe: #9ec5fe;
  --clr-hex-6ea8fe: #6ea8fe;
  --clr-hex-3d8bfd: #3d8bfd;
  --clr-hex-0a58ca: #0a58ca;
  --clr-hex-084298: #084298;
  --clr-hex-052c65: #052c65;
  --clr-hex-031633: #031633;
  --clr-hex-e0cffc: #e0cffc;
  --clr-hex-c29ffa: #c29ffa;
  --clr-hex-a370f7: #a370f7;
  --clr-hex-8540f5: #8540f5;
  --clr-hex-520dc2: #520dc2;
  --clr-hex-3d0a91: #3d0a91;
  --clr-hex-290661: #290661;
  --clr-hex-140330: #140330;
  --clr-hex-e2d9f3: #e2d9f3;
  --clr-hex-c5b3e6: #c5b3e6;
  --clr-hex-a98eda: #a98eda;
  --clr-hex-8c68cd: #8c68cd;
  --clr-hex-59359a: #59359a;
  --clr-hex-432874: #432874;
  --clr-hex-2c1a4d: #2c1a4d;
  --clr-hex-160d27: #160d27;
  --clr-hex-f7d6e6: #f7d6e6;
  --clr-hex-efadce: #efadce;
  --clr-hex-e685b5: #e685b5;
  --clr-hex-de5c9d: #de5c9d;
  --clr-hex-ab296a: #ab296a;
  --clr-hex-801f4f: #801f4f;
  --clr-hex-561435: #561435;
  --clr-hex-2b0a1a: #2b0a1a;
  --clr-hex-f8d7da: #f8d7da;
  --clr-hex-f1aeb5: #f1aeb5;
  --clr-hex-ea868f: #ea868f;
  --clr-hex-e35d6a: #e35d6a;
  --clr-hex-b02a37: #b02a37;
  --clr-hex-842029: #842029;
  --clr-hex-58151c: #58151c;
  --clr-hex-2c0b0e: #2c0b0e;
  --clr-hex-ffe5d0: #ffe5d0;
  --clr-hex-fecba1: #fecba1;
  --clr-hex-feb272: #feb272;
  --clr-hex-fd9843: #fd9843;
  --clr-hex-ca6510: #ca6510;
  --clr-hex-984c0c: #984c0c;
  --clr-hex-653208: #653208;
  --clr-hex-331904: #331904;
  --clr-hex-fff3cd: #fff3cd;
  --clr-hex-ffe69c: #ffe69c;
  --clr-hex-ffda6a: #ffda6a;
  --clr-hex-ffcd39: #ffcd39;
  --clr-hex-cc9a06: #cc9a06;
  --clr-hex-997404: #997404;
  --clr-hex-664d03: #664d03;
  --clr-hex-332701: #332701;
  --clr-hex-d1e7dd: #d1e7dd;
  --clr-hex-a3cfbb: #a3cfbb;
  --clr-hex-75b798: #75b798;
  --clr-hex-479f76: #479f76;
  --clr-hex-146c43: #146c43;
  --clr-hex-0f5132: #0f5132;
  --clr-hex-0a3622: #0a3622;
  --clr-hex-051b11: #051b11;
  --clr-hex-d2f4ea: #d2f4ea;
  --clr-hex-a6e9d5: #a6e9d5;
  --clr-hex-79dfc1: #79dfc1;
  --clr-hex-4dd4ac: #4dd4ac;
  --clr-hex-1aa179: #1aa179;
  --clr-hex-13795b: #13795b;
  --clr-hex-0d503c: #0d503c;
  --clr-hex-06281e: #06281e;
  --clr-hex-cff4fc: #cff4fc;
  --clr-hex-9eeaf9: #9eeaf9;
  --clr-hex-6edff6: #6edff6;
  --clr-hex-3dd5f3: #3dd5f3;
  --clr-hex-0aa2c0: #0aa2c0;
  --clr-hex-087990: #087990;
  --clr-hex-055160: #055160;
  --clr-hex-032830: #032830;
  --clr-hex-ced4da: #ced4da;
  --clr-hex-727272: #727272;
  --clr-hex-60a0b0: #60a0b0;
  --clr-hex-008085: #008085;
  --clr-hex-007020: #007020;
  --clr-hex-fcc: #fcc;
  --clr-hex-c00: #c00;
  --clr-hex-f00: #f00;
  --clr-hex-030: #030;
  --clr-hex-cfc: #cfc;
  --clr-hex-0c0: #0c0;
  --clr-hex-aaa: #aaa;
  --clr-hex-009: #009;
  --clr-hex-9c6: #9c6;
  --clr-hex-069: #069;
  --clr-hex-078: #078;
  --clr-hex-c24f19: #c24f19;
  --clr-hex-40a070: #40a070;
  --clr-hex-d73038: #d73038;
  --clr-hex-4070a0: #4070a0;
  --clr-hex-c30: #c30;
  --clr-hex-a00: #a00;
  --clr-hex-337e7e: #337e7e;
  --clr-hex-fc3: #fc3;
  --clr-hex-006ee0: #006ee0;
  --clr-hex-366: #366;
  --clr-hex-168174: #168174;
  --clr-hex-360: #360;
  --clr-hex-6b62de: #6b62de;
  --clr-hex-b715f4: #b715f4;
  --clr-hex-007ca5: #007ca5;
  --clr-hex-2f6f9f: #2f6f9f;
  --clr-hex-033: #033;
  --clr-hex-555: #555;
  --clr-hex-bbb: #bbb;
  --clr-rgba-231-76-60-0-55: rgba(231, 76, 60, 0.55);
  --clr-rgba-203-189-226-0-2: rgba(203, 189, 226, 0.2);
  --clr-rgba-111-66-193-0-1: rgba(111, 66, 193, 0.1);
  --clr-rgba-0-0-0-0-5-2: rgba(0, 0, 0, 0.5);
  --clr-hex-ddd: #ddd;
  --clr-hex-5c636a: #5c636a;
  --clr-hex-f1b0b7: #f1b0b7;
  --clr-hex-b6effb: #b6effb;
  --clr-hex-e2e3e5: #e2e3e5;
  --clr-hex-41464b: #41464b;
  --clr-hex-d3d4d6: #d3d4d6;
  --clr-hex-bcd0c7: #bcd0c7;
  --clr-hex-e5d4f7: #e5d4f7;
  --clr-hex-5e2ca5: #5e2ca5;
  --clr-hex-d0b9f0: #d0b9f0;
  --clr-hex-fcd3e1: #fcd3e1;
  --clr-hex-a83261: #a83261;
  --clr-hex-fbb7cf: #fbb7cf;
  --clr-hex-444: #444;
  --clr-rgba-0-105-92-0-25: rgba(0, 105, 92, 0.25);
  --clr-hex-44444459: #44444459;
  --clr-rgba-0-0-0-0-18: rgba(0, 0, 0, 0.18);
  --clr-hex-ffffff14: #ffffff14;
  --clr-hex-e8f2ff: #e8f2ff;
  --clr-hex-0061f2: #0061f2;
  --clr-rgba-13-110-253-0-2: rgba(13, 110, 253, 0.2);
  --clr-rgb-13-110-253: rgb(13, 110, 253);
  --clr-rgba-108-117-125-0-2: rgba(108, 117, 125, 0.2);
  --clr-rgb-108-117-125: rgb(108, 117, 125);
  --clr-rgba-25-135-84-0-2: rgba(25, 135, 84, 0.2);
  --clr-rgb-25-135-84: rgb(25, 135, 84);
  --clr-rgba-220-53-69-0-2: rgba(220, 53, 69, 0.2);
  --clr-rgb-220-53-69: rgb(220, 53, 69);
  --clr-rgba-255-193-7-0-2: rgba(255, 193, 7, 0.2);
  --clr-rgb-255-193-7: rgb(255, 193, 7);
  --clr-rgba-13-202-240-0-2: rgba(13, 202, 240, 0.2);
  --clr-rgb-13-202-240: rgb(13, 202, 240);
  --clr-rgba-248-249-250-0-2: rgba(248, 249, 250, 0.2);
  --clr-rgb-248-249-250: rgb(248, 249, 250);
  --clr-rgba-33-37-41-0-2: rgba(33, 37, 41, 0.2);
  --clr-rgb-33-37-41: rgb(33, 37, 41);
  --clr-hex-dee2e624: #dee2e624;
  --clr-rgba-248-249-250-1: rgba(248, 249, 250, 1);
}

body,
main,
#root_app {
  background-color: var(--app-shell-bg);
  color: var(--app-text);
}

.swal2-container,
.swal2-center,
.swal2-backdrop-show {
  background: var(--clr-rgba-0-0-0-0-5) !important;
  backdrop-filter: blur(5px);
}

.swal2-popup {
  background: var(--app-surface) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-color) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 40px var(--clr-rgba-0-0-0-0-24) !important;
}

.swal2-title,
.swal2-html-container,
.swal2-content,
.swal2-close,
.swal2-icon-text {
  color: var(--app-text) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  background-color: var(--app-surface-alt) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-color) !important;
  box-shadow: none !important;
}

.swal2-input::placeholder,
.swal2-textarea::placeholder {
  color: var(--app-text-muted) !important;
}

[data-bs-theme="dark"] .swal2-container,
[data-bs-theme="dark"] .swal2-center,
[data-bs-theme="dark"] .swal2-backdrop-show {
  background: var(--clr-rgba-8-10-12-0-6) !important;
}

[data-bs-theme="dark"] .swal2-confirm,
[data-bs-theme="dark"] .swal2-deny,
[data-bs-theme="dark"] .swal2-cancel {
  box-shadow: none !important;
}

.card {
  border-radius: 0.5rem !important;
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border-color);
}

.card-header {
  background: var(--app-surface) !important;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 12pt !important;
  color: var(--app-text) !important;
  border-radius: 0.5rem 0.5rem 0px 0px !important;
  border-color: var(--app-border-color) !important;
}

.login-box {
  border-radius: 0.5rem !important;
}

.auth-page {
  background:
    radial-gradient(
      circle at top left,
      var(--clr-rgba-231-76-60-0-55),
      transparent 30%
    ),
    linear-gradient(160deg, var(--app-shell-bg) 0%, var(--app-surface-alt) 100%);
  color: var(--app-text);
}

.auth-login-shell {
  min-height: 100vh;
}

.auth-login-card-wrap {
  position: relative;
  width: min(100%, 380px);
}

.auth-login-card {
  width: 100%;
  position: relative;
  border: 1px solid var(--app-border-color);
  background-color: var(--app-surface);
  overflow: visible;
}

.auth-theme-toggle {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--app-text);
  z-index: 2;
}

.auth-theme-toggle:hover,
.auth-theme-toggle:focus {
  background: var(--app-sidebar-hover-bg);
  color: var(--app-text);
}

.auth-login-alert {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: calc(100% - 1rem);
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.auth-login-alert .alert {
  width: 100%;
  margin-bottom: 0;
  border-radius: 0.85rem;
  min-height: 4.25rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 12px 24px var(--clr-rgba-0-0-0-0-15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.auth-login-alert .alert-success,
.auth-login-alert .alert-warning {
  background: var(--clr-rgba-241-196-15-0-58);
  border: 1px solid var(--app-border-color);
  color: var(--app-text);
  backdrop-filter: blur(15px);
}

.auth-login-alert .btn-close {
  padding: 0.75rem;
}

.auth-login-logo-wrap {
  padding-top: 3.75rem;
  padding-bottom: 1rem;
}

.auth-login-card .bg-white {
  background-color: transparent !important;
}

[data-bs-theme="light"] .auth-login-card {
  box-shadow: 0 20px 40px var(--clr-rgba-44-62-80-0-12);
}

[data-bs-theme="dark"] .auth-page {
  background:
    radial-gradient(
      circle at top left,
      var(--clr-rgba-231-76-60-0-58),
      transparent 28%
    ),
    linear-gradient(160deg, var(--app-shell-bg) 0%, var(--app-surface) 100%);
}

[data-bs-theme="dark"] .auth-login-card {
  box-shadow: 0 24px 48px var(--clr-rgba-0-0-0-0-24);
}

[data-bs-theme="dark"] .auth-theme-toggle {
  color: var(--clr-hex-ffe9a8);
}

[data-bs-theme="dark"] .auth-login-alert .alert-success,
[data-bs-theme="dark"] .auth-login-alert .alert-warning {
  background: var(--clr-rgba-44-62-80-0-72);
  border-color: var(--app-border-color);
  color: var(--app-text);
}

a {
  color: var(--app-text) !important;
}

a:hover,
a:focus {
  color: var(--bs-link-hover-color) !important;
}

.app-header {
  background: var(--app-header-bg) !important;
}

.app-sidebar__toggle {
  background: var(--app-accent) !important;
  color: var(--app-header-fg) !important;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.app-header__logo {
  background: var(--app-header-accent) !important;
  color: var(--app-header-fg) !important;
}

.app-header__logo:hover,
.app-header__logo:focus {
  color: var(--app-header-fg) !important;
}

.app-nav__item {
  color: var(--app-header-fg) !important;
}

.app-nav__item:hover,
.app-nav__item:focus {
  color: var(--app-header-fg) !important;
}

.app-sidebar__toggle:hover,
.app-sidebar__toggle:focus {
  color: var(--app-header-fg) !important;
}

.app-header__logo[href],
.app-header__logo[href]:hover,
.app-header__logo[href]:focus,
.app-nav__item[href],
.app-nav__item[href]:hover,
.app-nav__item[href]:focus,
.app-sidebar__toggle[href],
.app-sidebar__toggle[href]:hover,
.app-sidebar__toggle[href]:focus {
  color: var(--app-header-fg) !important;
}

.app-menu__item.active {
  border-left-color: var(--app-accent) !important;
}

.app-menu__item:hover {
  border-left-color: var(--app-accent) !important;
}

.app-menu__item,
.treeview-item {
  color: var(--app-text);
}

.app-menu__item.active,
.app-menu__item:hover,
.app-menu__item:focus,
.treeview.is-expanded [data-toggle="treeview"],
.treeview-item.active,
.treeview-item:hover,
.treeview-item:focus {
  background: var(--app-sidebar-hover-bg);
  color: var(--app-text);
}

.treeview.is-expanded [data-toggle="treeview"] {
  border-left-color: var(--app-accent);
}

.app-menu__icon,
.treeview-item .icon,
.treeview-indicator {
  color: inherit;
}

[data-bs-theme="light"] .sidebar_list,
[data-bs-theme="light"] .offcanvas-header {
  background-color: var(--app-sidebar-bg);
  color: var(--app-text);
}

[data-bs-theme="light"] .offcanvas-body {
  background-color: var(--app-sidebar-bg);
  color: var(--app-text);
}

[data-bs-theme="light"] .app-menu__item,
[data-bs-theme="light"] .app-menu__item .app-menu__label,
[data-bs-theme="light"] .treeview > .app-menu__item .treeview-indicator {
  color: var(--clr-hex-1f2d3a);
}

[data-bs-theme="light"] .treeview-menu {
  background-color: var(--app-sidebar-submenu-bg);
}

[data-bs-theme="light"] .treeview-item,
[data-bs-theme="light"] .treeview-item .icon {
  color: var(--clr-hex-1f2d3a);
}

[data-bs-theme="light"] .treeview-item.active,
[data-bs-theme="light"] .treeview-item:hover,
[data-bs-theme="light"] .treeview-item:focus {
  background: var(--clr-rgba-255-255-255-0-55);
  color: var(--clr-hex-10202c) !important;
}

[data-bs-theme="light"] .treeview.is-expanded [data-toggle="treeview"] {
  background: var(--clr-hex-f4f7f9);
  color: var(--clr-hex-1f2d3a);
}

.app-nav__item.theme-toggle {
  border: 0;
  background: transparent;
  color: var(--app-header-fg) !important;
}

.app-nav__item.theme-toggle:hover,
.app-nav__item.theme-toggle:focus {
  color: var(--app-header-fg) !important;
}

.modal-content,
.dropdown-menu,
.list-group-item,
.form-control,
.form-select,
.select2-dropdown,
.select2-container--default .select2-selection--single,
.table,
.table > :not(caption) > * > * {
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border-color);
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--app-text-muted);
}

.text-muted {
  color: var(--app-text-muted) !important;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

body,
main,
#root_app,
.offcanvas-body,
.sidebar_list,
.treeview-menu,
.table-responsive,
.modal-body,
.dropdown-menu,
.select2-results__options,
textarea,
pre {
  scrollbar-width: thin;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
main::-webkit-scrollbar,
#root_app::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar,
.sidebar_list::-webkit-scrollbar,
.treeview-menu::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar,
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
#root_app::-webkit-scrollbar-track,
.offcanvas-body::-webkit-scrollbar-track,
.sidebar_list::-webkit-scrollbar-track,
.treeview-menu::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
#root_app::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb,
.sidebar_list::-webkit-scrollbar-thumb,
.treeview-menu::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover,
#root_app::-webkit-scrollbar-thumb:hover,
.offcanvas-body::-webkit-scrollbar-thumb:hover,
.sidebar_list::-webkit-scrollbar-thumb:hover,
.treeview-menu::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.select2-results__options::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
  background: var(--app-scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.dashboard-stat {
  border: 1px solid var(--clr-rgba-255-255-255-0-08);
  border-radius: 0.75rem;
  box-shadow: 0 16px 32px var(--clr-rgba-10-18-24-0-18) !important;
  overflow: hidden;
}

.dashboard-stat .card-body {
  color: inherit;
}

.dashboard-stat .stat-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 1.25rem 0.75rem;
}

.dashboard-stat .stat-icon {
  opacity: 0.9;
}

.dashboard-stat .stat-date,
.dashboard-stat .stat-label {
  color: inherit;
  opacity: 0.78;
}

.dashboard-stat .stat-value {
  color: inherit;
  font-weight: 700;
}

.dashboard-stat-sales {
  background: linear-gradient(
    135deg,
    var(--clr-hex-34495e) 0%,
    var(--clr-hex-2c3e50) 100%
  );
  color: var(--clr-hex-ecf0f1);
}

.dashboard-stat-sales .stat-icon {
  color: var(--clr-hex-7ed6df);
}

.dashboard-stat-items {
  background: linear-gradient(
    135deg,
    var(--clr-hex-30485d) 0%,
    var(--clr-hex-243746) 100%
  );
  color: var(--clr-hex-ecf0f1);
}

.dashboard-stat-items .stat-icon {
  color: var(--clr-hex-55e6c1);
}

.dashboard-stat-stock {
  background: linear-gradient(
    135deg,
    var(--clr-hex-34495e) 0%,
    var(--clr-hex-273746) 100%
  );
  color: var(--clr-hex-ecf0f1);
}

.dashboard-stat-stock .stat-icon {
  color: var(--clr-hex-8fb9d6);
}

.dashboard-stat-users {
  background: linear-gradient(
    135deg,
    var(--clr-hex-2f3640) 0%,
    var(--clr-hex-1f252c) 100%
  );
  color: var(--clr-hex-ecf0f1);
}

.dashboard-stat-users .stat-icon {
  color: var(--clr-hex-b2bec3);
}

.dashboard-stat-accent {
  position: relative;
}

.dashboard-stat-accent::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--clr-hex-e74c3c) 0%,
    var(--clr-hex-c0392b) 100%
  );
}

[data-bs-theme="light"] .dashboard-stat {
  border-color: var(--clr-rgba-44-62-80-0-12);
  box-shadow: 0 14px 28px var(--clr-rgba-44-62-80-0-08) !important;
}

[data-bs-theme="light"] .dashboard-stat-sales {
  background: linear-gradient(
    135deg,
    var(--clr-hex-f4f9fb) 0%,
    var(--clr-hex-e8f4f8) 100%
  );
  color: var(--clr-hex-2c3e50);
}

[data-bs-theme="light"] .dashboard-stat-sales .stat-icon {
  color: var(--clr-hex-4bc7d8);
}

[data-bs-theme="light"] .dashboard-stat-items {
  background: linear-gradient(
    135deg,
    var(--clr-hex-eefbf8) 0%,
    var(--clr-hex-e3f7f2) 100%
  );
  color: var(--clr-hex-2c3e50);
}

[data-bs-theme="light"] .dashboard-stat-items .stat-icon {
  color: var(--clr-hex-18d6bb);
}

[data-bs-theme="light"] .dashboard-stat-stock {
  background: linear-gradient(
    135deg,
    var(--clr-hex-f1f7fb) 0%,
    var(--clr-hex-e6f1f8) 100%
  );
  color: var(--clr-hex-2c3e50);
}

[data-bs-theme="light"] .dashboard-stat-stock .stat-icon {
  color: var(--clr-hex-7eb6d6);
}

[data-bs-theme="light"] .dashboard-stat-users {
  background: linear-gradient(
    135deg,
    var(--clr-hex-f6f8fa) 0%,
    var(--clr-hex-edf2f5) 100%
  );
  color: var(--clr-hex-2c3e50);
}

[data-bs-theme="light"] .dashboard-stat-users .stat-icon {
  color: var(--clr-hex-7f8c8d);
}

[data-bs-theme="light"] .dashboard-stat .stat-date,
[data-bs-theme="light"] .dashboard-stat .stat-label {
  color: var(--clr-hex-5d6d7e);
  opacity: 1;
}

[data-bs-theme="light"] .dashboard-stat .stat-value {
  color: var(--clr-hex-2c3e50);
}

[data-bs-theme="dark"] .border-success {
  border-color: var(--clr-rgba-46-204-113-0-58) !important;
}

[data-bs-theme="dark"] .border-danger {
  border-color: var(--clr-rgba-231-76-60-0-58) !important;
}

[data-bs-theme="dark"] .border-warning {
  border-color: var(--clr-rgba-241-196-15-0-58) !important;
}

[data-bs-theme="dark"] .border-primary {
  border-color: var(--clr-rgba-93-173-226-0-58) !important;
}

[data-bs-theme="dark"] .border-info {
  border-color: var(--clr-rgba-72-219-251-0-58) !important;
}

[data-bs-theme="dark"] .text-success {
  color: var(--clr-hex-58d68d) !important;
}

[data-bs-theme="dark"] .text-danger {
  color: var(--clr-hex-ff7675) !important;
}

[data-bs-theme="dark"] .text-warning {
  color: var(--clr-hex-f9ca24) !important;
}

[data-bs-theme="dark"] .text-primary {
  color: var(--clr-hex-74b9ff) !important;
}

[data-bs-theme="dark"] .text-info {
  color: var(--clr-hex-7ed6df) !important;
}

[data-bs-theme="light"] .btn-primary {
  --bs-btn-color: var(--clr-hex-ffffff);
  --bs-btn-bg: var(--clr-hex-2c3e50);
  --bs-btn-border-color: var(--clr-hex-2c3e50);
  --bs-btn-hover-color: var(--clr-hex-ffffff);
  --bs-btn-hover-bg: var(--clr-hex-243342);
  --bs-btn-hover-border-color: var(--clr-hex-243342);
  --bs-btn-focus-shadow-rgb: 44, 62, 80;
  --bs-btn-active-color: var(--clr-hex-ffffff);
  --bs-btn-active-bg: var(--clr-hex-22313f);
  --bs-btn-active-border-color: var(--clr-hex-22313f);
  --bs-btn-disabled-color: var(--clr-hex-ffffff);
  --bs-btn-disabled-bg: var(--clr-hex-5d6d7e);
  --bs-btn-disabled-border-color: var(--clr-hex-5d6d7e);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--clr-hex-ffffff);
  --bs-btn-bg: var(--clr-hex-e74c3c);
  --bs-btn-border-color: var(--clr-hex-e74c3c);
  --bs-btn-hover-color: var(--clr-hex-ffffff);
  --bs-btn-hover-bg: var(--clr-hex-d64535);
  --bs-btn-hover-border-color: var(--clr-hex-d64535);
  --bs-btn-focus-shadow-rgb: 231, 76, 60;
  --bs-btn-active-color: var(--clr-hex-ffffff);
  --bs-btn-active-bg: var(--clr-hex-c0392b);
  --bs-btn-active-border-color: var(--clr-hex-c0392b);
  --bs-btn-disabled-color: var(--clr-hex-ffffff);
  --bs-btn-disabled-bg: var(--clr-hex-7f8c8d);
  --bs-btn-disabled-border-color: var(--clr-hex-7f8c8d);
}

.btn-primary,
.btn-primary i {
  color: var(--bs-btn-color) !important;
}

.sales-grand-total-card {
  border: 1px solid transparent;
  font-weight: 700;
}

.sales-grand-total-value {
  margin-bottom: 0;
  text-align: right !important;
}

[data-bs-theme="light"] .sales-grand-total-card {
  background: linear-gradient(
    135deg,
    var(--clr-hex-fff7bf) 0%,
    var(--clr-hex-ffe082) 100%
  );
  border-color: var(--clr-rgba-180-145-24-0-28);
  box-shadow: 0 10px 24px var(--clr-rgba-180-145-24-0-12);
}

[data-bs-theme="light"] .sales-grand-total-value {
  color: var(--clr-hex-5d4037);
}

[data-bs-theme="dark"] .sales-grand-total-card {
  background: linear-gradient(
    135deg,
    var(--clr-hex-4e3b12) 0%,
    var(--clr-hex-6d5317) 100%
  );
  border-color: var(--clr-rgba-255-214-102-0-24);
  box-shadow: 0 12px 24px var(--clr-rgba-0-0-0-0-24);
}

[data-bs-theme="dark"] .sales-grand-total-value {
  color: var(--clr-hex-ffe9a8);
}

/* documentation styles */
.bd-navbar {
  padding: 0.75rem 0;
  background-color: var(--clr-hex-7952b3);
}

.bd-navbar .navbar-toggler {
  padding: 0;
  border: 0;
}

.bd-navbar .navbar-nav .nav-link {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  color: var(--clr-rgba-255-255-255-0-85);
}

.bd-navbar .navbar-nav .nav-link:hover,
.bd-navbar .navbar-nav .nav-link:focus {
  color: var(--clr-hex-fff);
}

.bd-navbar .navbar-nav .nav-link.active {
  font-weight: 600;
  color: var(--clr-hex-fff);
}

.bd-navbar .navbar-nav-svg {
  width: 1rem;
  height: 1rem;
}

.bd-subnavbar {
  position: relative;
  z-index: 1020;
  background-color: var(--clr-rgba-255-255-255-0-95);
  box-shadow:
    0 0.5rem 1rem var(--clr-rgba-0-0-0-0-05),
    inset 0 -1px 0 var(--clr-rgba-0-0-0-0-15);
}

.bd-subnavbar .dropdown-menu {
  font-size: 0.875rem;
  box-shadow: 0 0.5rem 1rem var(--clr-rgba-0-0-0-0-05);
}

.bd-subnavbar .dropdown-item.current {
  font-weight: 600;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem top 0.6rem;
  background-size: 0.75rem 0.75rem;
}

@media (min-width: 768px) {
  .bd-subnavbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

.bd-search {
  position: relative;
}

.bd-search::after {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  padding-right: 0.25rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  color: var(--clr-hex-6c757d);
  content: "Ctrl + /";
  border: 1px solid var(--clr-hex-dee2e6);
  border-radius: 0.125rem;
}

@media (max-width: 767.98px) {
  .bd-search {
    width: 100%;
  }
}

.bd-search .form-control {
  padding-right: 3.75rem;
}

.bd-search .form-control:focus {
  border-color: var(--clr-hex-7952b3);
  box-shadow: 0 0 0 3px var(--clr-rgba-121-82-179-0-25);
}

.bd-sidebar-toggle {
  color: var(--clr-hex-6c757d);
}

.bd-sidebar-toggle:hover,
.bd-sidebar-toggle:focus {
  color: var(--clr-hex-7952b3);
}

.bd-sidebar-toggle:focus {
  box-shadow: 0 0 0 3px var(--clr-rgba-121-82-179-0-25);
}

.bd-sidebar-toggle .bi-collapse {
  display: none;
}

.bd-sidebar-toggle:not(.collapsed) .bi-expand {
  display: none;
}

.bd-sidebar-toggle:not(.collapsed) .bi-collapse {
  display: inline-block;
}

.bd-masthead {
  padding: 3rem 0;
  background: linear-gradient(
    165deg,
    var(--clr-hex-f7f5fb) 50%,
    var(--clr-hex-fff) 50%
  );
}

.bd-masthead h1 {
  font-size: calc(1.525rem + 3.3vw);
  line-height: 1;
}

@media (min-width: 1200px) {
  .bd-masthead h1 {
    font-size: 4rem;
  }
}

.bd-masthead p:not(.lead) {
  color: var(--clr-hex-495057);
}

.bd-masthead .btn {
  padding: 0.8rem 2rem;
  font-weight: 600;
}

.bd-masthead .lead {
  font-size: calc(1.275rem + 0.3vw);
  font-weight: 400;
  color: var(--clr-hex-495057);
}

@media (min-width: 1200px) {
  .bd-masthead .lead {
    font-size: 1.5rem;
  }
}

@media (min-width: 768px) {
  .mw-md-75 {
    max-width: 75%;
  }
}

.masthead-followup-icon {
  padding: 0.75rem;
  background-image: linear-gradient(
    to bottom right,
    var(--clr-rgba-255-255-255-0-2),
    var(--clr-rgba-255-255-255-0-01)
  );
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.25rem var(--clr-rgba-0-0-0-0-1);
}

.masthead-followup-svg {
  filter: drop-shadow(0 1px 0 var(--clr-rgba-0-0-0-0-125));
}

#carbonads {
  position: static;
  display: block;
  max-width: 400px;
  padding: 15px 15px 15px 160px;
  margin: 2rem 0;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  background-color: var(--clr-rgba-0-0-0-0-05);
}

#carbonads a {
  color: var(--clr-hex-343a40);
  text-decoration: none;
}

@media (min-width: 576px) {
  #carbonads {
    max-width: 330px;
    border-radius: 4px;
  }
}

.carbon-img {
  float: left;
  margin-left: -145px;
}

.carbon-poweredby {
  display: block;
  margin-top: 0.75rem;
  color: var(--clr-hex-495057) !important;
}

@media (min-width: 768px) {
  :root {
    scroll-padding-top: 4rem;
  }
}

.bd-content > h2:not(:first-child) {
  margin-top: 3rem;
}

.bd-content > h3 {
  margin-top: 2rem;
}

.bd-content > ul li,
.bd-content > ol li {
  margin-bottom: 0.25rem;
}

.bd-content > ul li > p ~ ul,
.bd-content > ol li > p ~ ul {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

.bd-content > .table {
  max-width: 100%;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

@media (max-width: 991.98px) {
  .bd-content > .table {
    display: block;
    overflow-x: auto;
  }

  .bd-content > .table.table-bordered {
    border: 0;
  }
}

.bd-content > .table th:first-child,
.bd-content > .table td:first-child {
  padding-left: 0;
}

.bd-content > .table th:not(:last-child),
.bd-content > .table td:not(:last-child) {
  padding-right: 1.5rem;
}

.bd-content > .table td:first-child > code {
  white-space: nowrap;
}

.bd-title {
  font-size: calc(1.425rem + 2.1vw);
}

@media (min-width: 1200px) {
  .bd-title {
    font-size: 3rem;
  }
}

.bd-lead {
  font-size: calc(1.275rem + 0.3vw);
  font-weight: 300;
}

@media (min-width: 1200px) {
  .bd-lead {
    font-size: 1.5rem;
  }
}

.bd-text-purple-bright {
  color: var(--clr-hex-7952b3);
}

.bd-bg-purple-bright {
  background-color: var(--clr-hex-7952b3);
}

.skippy {
  background-color: var(--clr-hex-563d7c);
}

.skippy a {
  color: var(--clr-hex-fff);
}

@media (max-width: 767.98px) {
  .bd-sidebar {
    margin: 0 -0.75rem 1rem;
  }
}

.bd-links {
  overflow: auto;
  font-weight: 600;
}

@media (min-width: 768px) {
  .bd-links {
    position: -webkit-sticky;
    position: sticky;
    top: 5rem;
    display: block !important;
    height: calc(100vh - 7rem);
    padding-left: 0.25rem;
    margin-left: -0.25rem;
    overflow-y: auto;
  }
}

@media (max-width: 767.98px) {
  .bd-links > ul {
    padding: 1.5rem 0.75rem;
    background-color: var(--clr-hex-f8f9fa);
    border-bottom: 1px solid var(--clr-hex-e9ecef);
  }
}

.bd-links a {
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  margin-left: 1.25rem;
  color: var(--clr-rgba-0-0-0-0-65);
  text-decoration: none;
}

.bd-links a:hover,
.bd-links a:focus {
  color: var(--clr-rgba-0-0-0-0-85);
  background-color: var(--clr-rgba-121-82-179-0-1);
}

.bd-links .btn {
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: var(--clr-rgba-0-0-0-0-65);
  background-color: transparent;
  border: 0;
}

.bd-links .btn:hover,
.bd-links .btn:focus {
  color: var(--clr-rgba-0-0-0-0-85);
  background-color: var(--clr-rgba-121-82-179-0-1);
}

.bd-links .btn:focus {
  box-shadow: 0 0 0 1px var(--clr-rgba-121-82-179-0-7);
}

.bd-links .btn::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: 0.5em 50%;
}

@media (prefers-reduced-motion: reduce) {
  .bd-links .btn::before {
    transition: none;
  }
}

.bd-links .btn[aria-expanded="true"] {
  color: var(--clr-rgba-0-0-0-0-85);
}

.bd-links .btn[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.bd-links .active {
  font-weight: 600;
  color: var(--clr-rgba-0-0-0-0-85);
}

@media (min-width: 768px) {
  .bd-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-areas: "sidebar main";
    grid-template-columns: 1fr 3fr;
  }
}

@media (min-width: 992px) {
  .bd-layout {
    grid-template-columns: 1fr 5fr;
  }
}

.bd-sidebar {
  grid-area: sidebar;
}

.bd-main {
  grid-area: main;
}

@media (min-width: 768px) {
  .bd-main {
    display: grid;
    gap: inherit;
    grid-template-areas: "intro" "toc" "content";
    grid-template-rows: auto auto 1fr;
  }
}

@media (min-width: 992px) {
  .bd-main {
    grid-template-areas: "intro   toc" "content toc";
    grid-template-columns: 4fr 1fr;
    grid-template-rows: auto 1fr;
  }
}

.bd-intro {
  grid-area: intro;
}

.bd-toc {
  grid-area: toc;
}

.bd-content {
  grid-area: content;
  min-width: 1px;
}

@media (min-width: 992px) {
  .bd-toc {
    position: -webkit-sticky;
    position: sticky;
    top: 5rem;
    right: 0;
    z-index: 2;
    height: calc(100vh - 7rem);
    overflow-y: auto;
  }
}

.bd-toc nav {
  font-size: 0.875rem;
}

.bd-toc nav ul {
  padding-left: 0;
  list-style: none;
}

.bd-toc nav ul ul {
  padding-left: 1rem;
  margin-top: 0.25rem;
}

.bd-toc nav li {
  margin-bottom: 0.25rem;
}

.bd-toc nav a {
  color: inherit;
}

.bd-toc nav a:not(:hover) {
  text-decoration: none;
}

.bd-toc nav a code {
  font: inherit;
}

.bd-footer a {
  color: var(--clr-hex-495057);
  text-decoration: none;
}

.bd-footer a:hover,
.bd-footer a:focus {
  color: var(--clr-hex-0d6efd);
  text-decoration: underline;
}

.bd-example-row .row > .col,
.bd-example-row .row > [class^="col-"] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: var(--clr-rgba-39-41-43-0-03);
  border: 1px solid var(--clr-rgba-39-41-43-0-1);
}

.bd-example-row .row + .row {
  margin-top: 1rem;
}

.bd-example-row-flex-cols .row {
  min-height: 10rem;
  background-color: var(--clr-rgba-255-0-0-0-1);
}

.bd-highlight {
  background-color: var(--clr-rgba-86-61-124-0-15);
  border: 1px solid var(--clr-rgba-86-61-124-0-15);
}

.example-container {
  width: 800px;
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

.example-row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.example-content-main {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

@media (min-width: 576px) {
  .example-content-main {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (min-width: 992px) {
  .example-content-main {
    flex: 0 0 auto;
    width: 66.666667%;
  }
}

.example-content-secondary {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

@media (min-width: 576px) {
  .example-content-secondary {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media (min-width: 992px) {
  .example-content-secondary {
    flex: 0 0 auto;
    width: 33.333333%;
  }
}

.bd-example {
  position: relative;
  padding: 1rem;
  margin: 1rem -0.75rem 0;
  border: solid var(--clr-hex-dee2e6);
  border-width: 1px 0 0;
}

.bd-example::after {
  display: block;
  clear: both;
  content: "";
}

@media (min-width: 576px) {
  .bd-example {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: 1px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  .bd-example + .bd-clipboard + .highlight {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }
}

.bd-example + p {
  margin-top: 2rem;
}

.bd-example > .form-control + .form-control {
  margin-top: 0.5rem;
}

.bd-example > .nav + .nav,
.bd-example > .alert + .alert,
.bd-example > .navbar + .navbar,
.bd-example > .progress + .progress {
  margin-top: 1rem;
}

.bd-example > .dropdown-menu {
  position: static;
  display: block;
}

.bd-example > :last-child {
  margin-bottom: 0;
}

.bd-example > svg + svg,
.bd-example > img + img {
  margin-left: 0.5rem;
}

.btn-circle {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-action-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}

.dashboard-action-btn i {
  margin-right: 0 !important;
  line-height: 1;
}

[data-bs-theme="light"] a.dashboard-action-btn {
  color: var(--clr-hex-000000de) !important;
  text-decoration: none;
}

[data-bs-theme="dark"] a.dashboard-action-btn {
  color: var(--clr-hex-ffffffde) !important;
  text-decoration: none;
}

.bd-example > .btn,
.bd-example > .btn-group {
  margin: 0.25rem 0.125rem;
}

.bd-example > .btn-toolbar + .btn-toolbar {
  margin-top: 0.5rem;
}

.bd-example > .list-group {
  max-width: 400px;
}

.bd-example > [class*="list-group-horizontal"] {
  max-width: 100%;
}

.bd-example .fixed-top,
.bd-example .sticky-top {
  position: static;
  margin: -1rem -1rem 1rem;
}

.bd-example .fixed-bottom {
  position: static;
  margin: 1rem -1rem -1rem;
}

@media (min-width: 576px) {
  .bd-example .fixed-top,
  .bd-example .sticky-top {
    margin: -1.5rem -1.5rem 1rem;
  }

  .bd-example .fixed-bottom {
    margin: 1rem -1.5rem -1.5rem;
  }
}

.bd-example .pagination {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.bd-example-ratios .ratio {
  display: inline-block;
  width: 10rem;
  color: var(--clr-hex-6c757d);
  background-color: var(--clr-hex-f8f9fa);
  border: 1px solid var(--clr-hex-dee2e6);
}

.bd-example-ratios .ratio > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-example-ratios-breakpoint .ratio-4x3 {
  width: 16rem;
}

@media (min-width: 768px) {
  .bd-example-ratios-breakpoint .ratio-4x3 {
    --bs-aspect-ratio: 50%;
  }
}

.bd-example-modal {
  background-color: var(--clr-hex-fafafa);
}

.bd-example-modal .modal {
  position: static;
  display: block;
}

.bd-example-offcanvas {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.bd-example-offcanvas .offcanvas {
  position: static;
  display: block;
  height: 200px;
  visibility: visible;
  transform: translate(0);
}

.tooltip-demo a {
  white-space: nowrap;
}

.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: 0.5rem;
  overflow: auto;
}

.scrollspy-example-2 {
  position: relative;
  height: 350px;
  overflow: auto;
}

.bd-example-border-utils [class^="border"] {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: var(--clr-hex-f5f5f5);
}

.bd-example-border-utils-0 [class^="border"] {
  border: 1px solid var(--clr-hex-dee2e6);
}

.bd-example-rounded-utils [class*="rounded"] {
  margin: 0.25rem;
}

.bd-example-position-utils {
  position: relative;
  padding: 3em;
}

.bd-example-position-utils .position-relative {
  height: 200px;
  background-color: var(--clr-hex-f5f5f5);
}

.bd-example-position-utils .position-absolute {
  width: 2em;
  height: 2em;
  background-color: var(--clr-hex-212529);
  border-radius: 0.25rem;
}

.bd-example-position-examples::after {
  content: none;
}

.bd-example-toasts {
  min-height: 240px;
}

.highlight {
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: var(--clr-hex-f8f9fa);
}

@media (min-width: 576px) {
  .highlight {
    padding: 1rem 1.5rem;
  }
}

.highlight pre {
  padding: 0;
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
  white-space: pre;
  background-color: transparent;
  border: 0;
}

.highlight pre code {
  font-size: inherit;
  color: var(--clr-hex-212529);
  word-wrap: normal;
}

.bd-content .highlight {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

@media (min-width: 576px) {
  .bd-content .highlight {
    margin-right: 0;
    margin-left: 0;
  }
}

.btn-bd-primary {
  font-weight: 600;
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-7952b3);
  border-color: var(--clr-hex-7952b3);
}

.btn-bd-primary:hover,
.btn-bd-primary:active {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-61428f);
  border-color: var(--clr-hex-61428f);
}

.btn-bd-primary:focus {
  box-shadow: 0 0 0 3px var(--clr-rgba-121-82-179-0-25);
}

.btn-bd-download {
  font-weight: 600;
  color: var(--clr-hex-ffe484);
  border-color: var(--clr-hex-ffe484);
}

.btn-bd-download:hover,
.btn-bd-download:active {
  color: var(--clr-hex-2a2730);
  background-color: var(--clr-hex-ffe484);
  border-color: var(--clr-hex-ffe484);
}

.btn-bd-download:focus {
  box-shadow: 0 0 0 3px var(--clr-rgba-255-228-132-0-25);
}

.btn-bd-light {
  color: var(--clr-hex-6c757d);
  border-color: var(--clr-hex-dee2e6);
}

.show > .btn-bd-light,
.btn-bd-light:hover,
.btn-bd-light:active {
  color: var(--clr-hex-7952b3);
  background-color: var(--clr-hex-fff);
  border-color: var(--clr-hex-7952b3);
}

.btn-bd-light:focus {
  box-shadow: 0 0 0 3px var(--clr-rgba-121-82-179-0-25);
}

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--clr-hex-e9ecef);
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}

.bd-callout h4 {
  margin-bottom: 0.25rem;
}

.bd-callout p:last-child {
  margin-bottom: 0;
}

.bd-callout code {
  border-radius: 0.25rem;
}

.bd-callout + .bd-callout {
  margin-top: -0.25rem;
}

.bd-callout-info {
  border-left-color: var(--clr-hex-5bc0de);
}

.bd-callout-warning {
  border-left-color: var(--clr-hex-f0ad4e);
}

.bd-callout-danger {
  border-left-color: var(--clr-hex-d9534f);
}

.bd-brand-logos {
  color: var(--clr-hex-7952b3);
}

.bd-brand-logos .inverse {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-7952b3);
}

.bd-brand-item + .bd-brand-item {
  border-top: 1px solid var(--clr-hex-fff);
}

@media (min-width: 768px) {
  .bd-brand-item + .bd-brand-item {
    border-top: 0;
    border-left: 1px solid var(--clr-hex-fff);
  }
}

.color-swatches {
  margin: 0 -5px;
}

.color-swatches .bd-purple {
  background-color: var(--clr-hex-563d7c);
}

.color-swatches .bd-purple-light {
  background-color: var(--clr-hex-cbbde2);
}

.color-swatches .bd-purple-lighter {
  background-color: var(--clr-hex-e5e1ea);
}

.color-swatches .bd-gray {
  background-color: var(--clr-hex-f9f9f9);
}

.color-swatch {
  width: 4rem;
  height: 4rem;
}

@media (min-width: 768px) {
  .color-swatch {
    width: 6rem;
    height: 6rem;
  }
}

.swatch-blue {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-0d6efd);
}

.swatch-blue::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "4.50" "\a" "4.50" "\a" "4.66";
  background-color: var(--clr-hex-0d6efd);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-indigo {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-6610f2);
}

.swatch-indigo::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "7.18" "\a" "7.18" "\a" "2.92";
  background-color: var(--clr-hex-6610f2);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-purple {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-6f42c1);
}

.swatch-purple::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "6.51" "\a" "6.51" "\a" "3.22";
  background-color: var(--clr-hex-6f42c1);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-pink {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-d63384);
}

.swatch-pink::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "4.50" "\a" "4.50" "\a" "4.66";
  background-color: var(--clr-hex-d63384);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-red {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-dc3545);
}

.swatch-red::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "4.52" "\a" "4.52" "\a" "4.63";
  background-color: var(--clr-hex-dc3545);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-orange {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-fd7e14);
}

.swatch-orange::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "8.17" "\a" "2.57" "\a" "8.17";
  background-color: var(--clr-hex-fd7e14);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-000) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-yellow {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ffc107);
}

.swatch-yellow::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "12.8" "\a" "1.63" "\a" "12.8";
  background-color: var(--clr-hex-ffc107);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-000) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-green {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-198754);
}

.swatch-green::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "4.53" "\a" "4.53" "\a" "4.63";
  background-color: var(--clr-hex-198754);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-teal {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-20c997);
}

.swatch-teal::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "9.86" "\a" "2.12" "\a" "9.86";
  background-color: var(--clr-hex-20c997);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-000) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-cyan {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-0dcaf0);
}

.swatch-cyan::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "10.7" "\a" "1.95" "\a" "10.7";
  background-color: var(--clr-hex-0dcaf0);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-000) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-white {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-fff);
}

.swatch-white::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "21" "\a" "1" "\a" "21";
  background-color: var(--clr-hex-fff);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-000) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-gray {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-6c757d);
}

.swatch-gray::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "4.68" "\a" "4.68" "\a" "4.47";
  background-color: var(--clr-hex-6c757d);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-gray-dark {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-343a40);
}

.swatch-gray-dark::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "11.5" "\a" "11.5" "\a" "1.82";
  background-color: var(--clr-hex-343a40);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-fff) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.swatch-gray-500 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-adb5bd);
}

.swatch-gray-500::after {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding-left: 1rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: pre;
  content: "10.1" "\a" "2.07" "\a" "10.1";
  background-color: var(--clr-hex-adb5bd);
  background-image: linear-gradient(
    to bottom,
    transparent 0.25rem,
    var(--clr-hex-000) 0.25rem 0.75rem,
    transparent 0.75rem 1.25rem,
    var(--clr-hex-fff) 1.25rem 1.75rem,
    transparent 1.75rem 2.25rem,
    var(--clr-hex-000) 2.25rem 2.75rem,
    transparent 2.75rem
  );
  background-repeat: no-repeat;
  background-size: 0.5rem 100%;
}

.bd-blue-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-cfe2ff);
}

.bd-blue-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-9ec5fe);
}

.bd-blue-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-6ea8fe);
}

.bd-blue-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-3d8bfd);
}

.bd-blue-500 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-0d6efd);
}

.bd-blue-600 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-0a58ca);
}

.bd-blue-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-084298);
}

.bd-blue-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-052c65);
}

.bd-blue-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-031633);
}

.bd-indigo-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-e0cffc);
}

.bd-indigo-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-c29ffa);
}

.bd-indigo-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-a370f7);
}

.bd-indigo-400 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-8540f5);
}

.bd-indigo-500 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-6610f2);
}

.bd-indigo-600 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-520dc2);
}

.bd-indigo-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-3d0a91);
}

.bd-indigo-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-290661);
}

.bd-indigo-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-140330);
}

.bd-purple-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-e2d9f3);
}

.bd-purple-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-c5b3e6);
}

.bd-purple-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-a98eda);
}

.bd-purple-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-8c68cd);
}

.bd-purple-500 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-6f42c1);
}

.bd-purple-600 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-59359a);
}

.bd-purple-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-432874);
}

.bd-purple-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-2c1a4d);
}

.bd-purple-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-160d27);
}

.bd-pink-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-f7d6e6);
}

.bd-pink-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-efadce);
}

.bd-pink-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-e685b5);
}

.bd-pink-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-de5c9d);
}

.bd-pink-500 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-d63384);
}

.bd-pink-600 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-ab296a);
}

.bd-pink-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-801f4f);
}

.bd-pink-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-561435);
}

.bd-pink-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-2b0a1a);
}

.bd-red-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-f8d7da);
}

.bd-red-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-f1aeb5);
}

.bd-red-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ea868f);
}

.bd-red-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-e35d6a);
}

.bd-red-500 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-dc3545);
}

.bd-red-600 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-b02a37);
}

.bd-red-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-842029);
}

.bd-red-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-58151c);
}

.bd-red-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-2c0b0e);
}

.bd-orange-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ffe5d0);
}

.bd-orange-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-fecba1);
}

.bd-orange-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-feb272);
}

.bd-orange-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-fd9843);
}

.bd-orange-500 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-fd7e14);
}

.bd-orange-600 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ca6510);
}

.bd-orange-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-984c0c);
}

.bd-orange-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-653208);
}

.bd-orange-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-331904);
}

.bd-yellow-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-fff3cd);
}

.bd-yellow-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ffe69c);
}

.bd-yellow-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ffda6a);
}

.bd-yellow-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ffcd39);
}

.bd-yellow-500 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ffc107);
}

.bd-yellow-600 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-cc9a06);
}

.bd-yellow-700 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-997404);
}

.bd-yellow-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-664d03);
}

.bd-yellow-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-332701);
}

.bd-green-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-d1e7dd);
}

.bd-green-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-a3cfbb);
}

.bd-green-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-75b798);
}

.bd-green-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-479f76);
}

.bd-green-500 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-198754);
}

.bd-green-600 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-146c43);
}

.bd-green-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-0f5132);
}

.bd-green-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-0a3622);
}

.bd-green-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-051b11);
}

.bd-teal-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-d2f4ea);
}

.bd-teal-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-a6e9d5);
}

.bd-teal-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-79dfc1);
}

.bd-teal-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-4dd4ac);
}

.bd-teal-500 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-20c997);
}

.bd-teal-600 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-1aa179);
}

.bd-teal-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-13795b);
}

.bd-teal-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-0d503c);
}

.bd-teal-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-06281e);
}

.bd-cyan-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-cff4fc);
}

.bd-cyan-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-9eeaf9);
}

.bd-cyan-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-6edff6);
}

.bd-cyan-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-3dd5f3);
}

.bd-cyan-500 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-0dcaf0);
}

.bd-cyan-600 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-0aa2c0);
}

.bd-cyan-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-087990);
}

.bd-cyan-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-055160);
}

.bd-cyan-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-032830);
}

.bd-gray-100 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-f8f9fa);
}

.bd-gray-200 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-e9ecef);
}

.bd-gray-300 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-dee2e6);
}

.bd-gray-400 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-ced4da);
}

.bd-gray-500 {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-adb5bd);
}

.bd-gray-600 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-6c757d);
}

.bd-gray-700 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-495057);
}

.bd-gray-800 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-343a40);
}

.bd-gray-900 {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-212529);
}

.bd-white {
  color: var(--clr-hex-000);
  background-color: var(--clr-hex-fff);
}

.bd-black {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-000);
}

.bd-clipboard {
  position: relative;
  display: none;
  float: right;
}

.bd-clipboard + .highlight {
  margin-top: 0;
}

@media (min-width: 768px) {
  .bd-clipboard {
    display: block;
  }
}

.btn-clipboard {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 10;
  display: block;
  padding: 0.25rem 0.5rem;
  font-size: 0.65em;
  color: var(--clr-hex-0d6efd);
  background-color: var(--clr-hex-fff);
  border: 1px solid;
  border-radius: 0.25rem;
}

.btn-clipboard:hover,
.btn-clipboard:focus {
  color: var(--clr-hex-fff);
  background-color: var(--clr-hex-0d6efd);
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.bd-placeholder-img-lg {
  font-size: calc(1.475rem + 2.7vw);
}

@media (min-width: 1200px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.chroma .c {
  color: var(--clr-hex-727272);
}

.chroma .ch {
  font-style: italic;
  color: var(--clr-hex-60a0b0);
}

.chroma .cm {
  color: var(--clr-hex-727272);
}

.chroma .cp {
  color: var(--clr-hex-008085);
}

.chroma .cpf {
  color: var(--clr-hex-007020);
}

.chroma .c1 {
  color: var(--clr-hex-727272);
}

.chroma .cs {
  color: var(--clr-hex-727272);
}

.chroma .gd {
  background-color: var(--clr-hex-fcc);
  border: 1px solid var(--clr-hex-c00);
}

.chroma .ge {
  font-style: italic;
}

.chroma .gr {
  color: var(--clr-hex-f00);
}

.chroma .gh {
  color: var(--clr-hex-030);
}

.chroma .gi {
  background-color: var(--clr-hex-cfc);
  border: 1px solid var(--clr-hex-0c0);
}

.chroma .go {
  color: var(--clr-hex-aaa);
}

.chroma .gp {
  color: var(--clr-hex-009);
}

.chroma .gs {
  font-weight: 700;
}

.chroma .gu {
  color: var(--clr-hex-030);
}

.chroma .gt {
  color: var(--clr-hex-9c6);
}

.chroma .gl {
  text-decoration: underline;
}

.chroma .k {
  color: var(--clr-hex-069);
}

.chroma .kc {
  color: var(--clr-hex-069);
}

.chroma .kd {
  color: var(--clr-hex-069);
}

.chroma .kn {
  color: var(--clr-hex-069);
}

.chroma .kp {
  color: var(--clr-hex-069);
}

.chroma .kr {
  color: var(--clr-hex-069);
}

.chroma .kt {
  color: var(--clr-hex-078);
}

.chroma .m {
  color: var(--clr-hex-c24f19);
}

.chroma .mb {
  color: var(--clr-hex-40a070);
}

.chroma .mf {
  color: var(--clr-hex-c24f19);
}

.chroma .mh {
  color: var(--clr-hex-c24f19);
}

.chroma .mi {
  color: var(--clr-hex-c24f19);
}

.chroma .il {
  color: var(--clr-hex-c24f19);
}

.chroma .mo {
  color: var(--clr-hex-c24f19);
}

.chroma .s {
  color: var(--clr-hex-d73038);
}

.chroma .sa {
  color: var(--clr-hex-4070a0);
}

.chroma .sb {
  color: var(--clr-hex-c30);
}

.chroma .sc {
  color: var(--clr-hex-c30);
}

.chroma .dl {
  color: var(--clr-hex-4070a0);
}

.chroma .sd {
  font-style: italic;
  color: var(--clr-hex-c30);
}

.chroma .s2 {
  color: var(--clr-hex-c30);
}

.chroma .se {
  color: var(--clr-hex-c30);
}

.chroma .sh {
  color: var(--clr-hex-c30);
}

.chroma .si {
  color: var(--clr-hex-a00);
}

.chroma .sx {
  color: var(--clr-hex-c30);
}

.chroma .sr {
  color: var(--clr-hex-337e7e);
}

.chroma .s1 {
  color: var(--clr-hex-c30);
}

.chroma .ss {
  color: var(--clr-hex-fc3);
}

.chroma .na {
  color: var(--clr-hex-006ee0);
}

.chroma .nb {
  color: var(--clr-hex-366);
}

.chroma .nc {
  color: var(--clr-hex-168174);
}

.chroma .no {
  color: var(--clr-hex-360);
}

.chroma .nd {
  color: var(--clr-hex-6b62de);
}

.chroma .ni {
  color: var(--clr-hex-727272);
}

.chroma .ne {
  color: var(--clr-hex-c00);
}

.chroma .nf {
  color: var(--clr-hex-b715f4);
}

.chroma .nl {
  color: var(--clr-hex-6b62de);
}

.chroma .nn {
  color: var(--clr-hex-007ca5);
}

.chroma .nt {
  color: var(--clr-hex-2f6f9f);
}

.chroma .nv {
  color: var(--clr-hex-033);
}

.chroma .o {
  color: var(--clr-hex-555);
}

.chroma .ow {
  color: var(--clr-hex-000);
}

.chroma .w {
  color: var(--clr-hex-bbb);
}

.chroma .language-bash::before,
.chroma .language-sh::before {
  color: var(--clr-hex-009);
  content: "$ ";
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.chroma .language-powershell::before {
  color: var(--clr-hex-009);
  content: "PM> ";
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.anchorjs-link {
  font-weight: 400;
  color: var(--clr-rgba-231-76-60-0-55);
  transition: color 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .anchorjs-link {
    transition: none;
  }
}

.anchorjs-link:focus,
.anchorjs-link:hover {
  color: var(--app-accent);
  text-decoration: none;
}

.algolia-autocomplete {
  width: 100%;
}

.ds-dropdown-menu {
  width: 100%;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  background-color: var(--clr-hex-fff);
  border: 1px solid var(--clr-rgba-0-0-0-0-15);
  border-radius: 0.25rem;
}

@media (min-width: 768px) {
  .ds-dropdown-menu {
    width: 400px;
  }
}

.algolia-docsearch-suggestion--category-header {
  padding: 0.125rem 1rem;
  font-weight: 600;
  color: var(--clr-hex-7952b3);
}

:not(.algolia-docsearch-suggestion__main)
  > .algolia-docsearch-suggestion--category-header {
  display: none;
}

.ds-suggestion:not(:first-child)
  .algolia-docsearch-suggestion--category-header {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--clr-rgba-0-0-0-0-1);
}

.algolia-docsearch-suggestion--content {
  padding: 0.25rem 1rem;
}

.ds-cursor .algolia-docsearch-suggestion--content {
  background-color: var(--clr-rgba-203-189-226-0-2);
}

.algolia-docsearch-suggestion {
  display: block;
  text-decoration: none;
}

.algolia-docsearch-suggestion--subcategory-column {
  display: none;
}

.algolia-docsearch-suggestion--subcategory-inline {
  display: inline;
  color: var(--clr-hex-495057);
}

.algolia-docsearch-suggestion--subcategory-inline::after {
  padding: 0 0.25rem;
  content: "/";
}

.algolia-docsearch-suggestion--title {
  display: inline;
  font-weight: 500;
  color: var(--clr-hex-343a40);
}

.algolia-docsearch-suggestion--text {
  color: var(--clr-hex-343a40);
  font-size: 0.75rem;
}

.algolia-docsearch-suggestion--highlight {
  color: var(--clr-hex-6f42c1);
  background-color: var(--clr-rgba-111-66-193-0-1);
}

.algolia-docsearch-footer {
  padding: 0.5rem 1rem 0;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--clr-hex-6c757d);
  border-top: 1px solid var(--clr-rgba-0-0-0-0-1);
}

.algolia-docsearch-footer--logo {
  color: inherit;
}

/* new-shadow */
.newshadow {
  position: relative;
}

.newshadow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='5' viewBox='0 0 5 5' stroke-width='0.5' stroke='rgba(0,0,0,0.5)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-1 5L5 -1M3 6L6 3'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.3;
  box-shadow: 0 0 0 1px var(--clr-rgba-0-0-0-0-5) !important;
  transform: translate(7px, 8px);
  z-index: -50;
}

/* Bottom Mod */
.btn-outline-soft {
  --bs-btn-color: var(--clr-hex-6c757d);
  --bs-btn-border-color: var(--clr-hex-ddd);
  --bs-btn-hover-color: var(--clr-hex-fff);
  --bs-btn-hover-bg: var(--clr-hex-6c757d);
  --bs-btn-hover-border-color: var(--clr-hex-6c757d);
  --bs-btn-focus-shadow-rgb: 221, 221, 221;
  --bs-btn-active-color: var(--clr-hex-fff);
  --bs-btn-active-bg: var(--clr-hex-5c636a);
  --bs-btn-active-border-color: var(--clr-hex-5c636a);
  --bs-btn-active-shadow: inset 0 3px 5px var(--clr-rgba-0-0-0-0-125);
  --bs-btn-disabled-color: var(--clr-hex-6c757d);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--clr-hex-ddd);
  --bs-gradient: none;
  border: 1px solid var(--bs-btn-border-color);
  color: var(--bs-btn-color);
  background-color: transparent;
}

.btn-danger-soft {
  background-color: var(--clr-hex-f8d7da);
  color: var(--clr-hex-842029);
  border: none;
}

.btn-danger-soft:hover,
.btn-danger-soft:focus {
  background-color: var(--clr-hex-f1b0b7);
  color: var(--clr-hex-842029);
}

.btn-warning-soft {
  background-color: var(--clr-hex-fff3cd);
  color: var(--clr-hex-664d03);
  border: none;
}

.btn-warning-soft:hover,
.btn-warning-soft:focus {
  background-color: var(--clr-hex-ffe69c);
  color: var(--clr-hex-664d03);
}

.btn-info-soft {
  background-color: var(--clr-hex-cff4fc);
  color: var(--clr-hex-055160);
  border: none;
}

.btn-info-soft:hover,
.btn-info-soft:focus {
  background-color: var(--clr-hex-b6effb);
  color: var(--clr-hex-055160);
}

.btn-primary-soft {
  background-color: var(--clr-hex-cfe2ff);
  color: var(--clr-hex-084298);
  border: none;
}

.btn-primary-soft:hover,
.btn-primary-soft:focus {
  background-color: var(--clr-hex-9ec5fe);
  color: var(--clr-hex-084298);
}

.btn-secondary-soft {
  background-color: var(--clr-hex-e2e3e5);
  color: var(--clr-hex-41464b);
  border: none;
}

.btn-secondary-soft:hover,
.btn-secondary-soft:focus {
  background-color: var(--clr-hex-d3d4d6);
  color: var(--clr-hex-41464b);
}

.btn-success-soft {
  background-color: var(--clr-hex-d1e7dd);
  color: var(--clr-hex-0f5132);
  border: none;
}

.btn-success-soft:hover,
.btn-success-soft:focus {
  background-color: var(--clr-hex-bcd0c7);
  color: var(--clr-hex-0f5132);
}

.btn-purple-soft {
  background-color: var(--clr-hex-e5d4f7);
  color: var(--clr-hex-5e2ca5);
  border: none;
}

.btn-purple-soft:hover,
.btn-purple-soft:focus {
  background-color: var(--clr-hex-d0b9f0);
  color: var(--clr-hex-5e2ca5);
}

.btn-pink-soft {
  background-color: var(--clr-hex-fcd3e1);
  color: var(--clr-hex-a83261);
  border: none;
}

.btn-pink-soft:hover,
.btn-pink-soft:focus {
  background-color: var(--clr-hex-fbb7cf);
  color: var(--clr-hex-a83261);
}

/* OUTLINE SOFT BUTTONS */

.btn-outline-danger-soft {
  background-color: transparent;
  color: var(--clr-hex-dc3545);
  border: 1px solid var(--clr-hex-f8d7da);
}

.btn-outline-danger-soft:hover,
.btn-outline-danger-soft:focus {
  background-color: var(--clr-hex-f8d7da);
  color: var(--clr-hex-842029);
}

.btn-outline-warning-soft {
  background-color: transparent;
  color: var(--clr-hex-ffc107);
  border: 1px solid var(--clr-hex-fff3cd);
}

.btn-outline-warning-soft:hover,
.btn-outline-warning-soft:focus {
  background-color: var(--clr-hex-fff3cd);
  color: var(--clr-hex-664d03);
}

.btn-outline-info-soft {
  background-color: transparent;
  color: var(--clr-hex-0dcaf0);
  border: 1px solid var(--clr-hex-cff4fc);
}

.btn-outline-info-soft:hover,
.btn-outline-info-soft:focus {
  background-color: var(--clr-hex-cff4fc);
  color: var(--clr-hex-055160);
}

.btn-outline-primary-soft {
  background-color: transparent;
  color: var(--clr-hex-0d6efd);
  border: 1px solid var(--clr-hex-cfe2ff);
}

.btn-outline-primary-soft:hover,
.btn-outline-primary-soft:focus {
  background-color: var(--clr-hex-cfe2ff);
  color: var(--clr-hex-084298);
}

.btn-outline-secondary-soft {
  background-color: transparent;
  color: var(--clr-hex-6c757d);
  border: 1px solid var(--clr-hex-ddd);
}

.btn-outline-secondary-soft:hover,
.btn-outline-secondary-soft:focus {
  background-color: var(--clr-hex-e2e3e5);
  color: var(--clr-hex-41464b);
}

.btn-outline-success-soft {
  background-color: transparent;
  color: var(--clr-hex-198754);
  border: 1px solid var(--clr-hex-d1e7dd);
}

.btn-outline-success-soft:hover,
.btn-outline-success-soft:focus {
  background-color: var(--clr-hex-d1e7dd);
  color: var(--clr-hex-0f5132);
}

.btn-outline-purple-soft {
  background-color: transparent;
  color: var(--clr-hex-6f42c1);
  border: 1px solid var(--clr-hex-e5d4f7);
}

.btn-outline-purple-soft:hover,
.btn-outline-purple-soft:focus {
  background-color: var(--clr-hex-e5d4f7);
  color: var(--clr-hex-5e2ca5);
}

.btn-outline-pink-soft {
  background-color: transparent;
  color: var(--clr-hex-d63384);
  border: 1px solid var(--clr-hex-fcd3e1);
}

.btn-outline-pink-soft:hover,
.btn-outline-pink-soft:focus {
  background-color: var(--clr-hex-fcd3e1);
  color: var(--clr-hex-a83261);
}

/* Scrolling */
.scrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.scrolling-wrapper .btn-group {
  display: inline-flex;
}

/* Header */
.top-header {
  margin-top: 3rem;
}

/* Menu */
.sidebar_list {
  background-color: var(--app-sidebar-bg);
}

.offcanvas .btn-close {
  --bs-btn-close-color: var(--clr-hex-444);
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23444444'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--clr-rgba-0-105-92-0-25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 1rem;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}

[data-bs-theme="dark"].offcanvas .btn-close {
  --bs-btn-close-color: var(--clr-hex-fff);
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-clip: padding-box;
  outline: 0;
  background-color: var(--app-sidebar-bg);
  color: var(--app-text);
  transition: var(--bs-offcanvas-transition);
  border-radius: 1rem;
}

.offcanvas-header,
.offcanvas-body,
.treeview-menu {
  color: var(--app-text);
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: var(--app-offcanvas-backdrop);
  backdrop-filter: blur(10px);
}

.offcanvas-backdrop.show {
  opacity: 1;
}

.offcanvas.offcanvas-right {
  right: 0;
  left: 0;
  width: auto;
  max-height: 100%;
  border: none !important;
  transform: translateY(100%);
}

@media (min-width: 992px) {
  #showNavbar.offcanvas.offcanvas-start {
    top: 1rem;
    bottom: 1rem;
    left: 1rem;
    height: auto;
    max-height: calc(100vh - 2rem);
    width: min(360px, calc(100vw - 2rem));
    border: 0;
    border-radius: 1rem;
    border: 5px solid var(--clr-hex-44444459);
    overflow: hidden;
    box-shadow: 0 20px 40px var(--clr-rgba-0-0-0-0-18);
  }
  [data-bs-theme="dark"] #showNavbar.offcanvas.offcanvas-start {
    border: 5px solid var(--clr-hex-ffffff14);
  }
}

.preloader-2 {
  display: -ms-flexbox;
  display: flex;
  background-color: var(--app-overlay);
  color: var(--app-overlay-text);
  backdrop-filter: blur(5px);
  height: 100vh;
  width: 100%;
  transition: height 15ms linear;
  position: fixed;
  padding-right: 10%;
  left: 0;
  top: 0;
  text-align: center;
}

/* MODIFIKASI 18/07/2025 */
.avatar {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.avatar.avatar-xl {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.75rem;
}

.avatar.avatar-xs {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
}

.dashboard-user-avatar-wrap {
  display: flex;
  justify-content: center;
}

.dashboard-user-avatar-image,
.dashboard-user-avatar-fallback {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 4px solid var(--clr-rgba-255-255-255-0-2);
  box-shadow: 0 0 0 3px var(--app-surface-alt);
}

.dashboard-user-avatar-image {
  object-fit: cover;
  display: block;
  background-color: var(--app-surface-alt);
}

.dashboard-user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--clr-hex-fd7e14), var(--clr-hex-f39c12));
  color: var(--clr-hex-ffffff);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bg-primary-soft {
  background-color: var(--clr-hex-e8f2ff);
  color: var(--clr-hex-0061f2);
}

.text-pre-line {
  white-space: pre-line;
}

/* Background Soft */
.bg-primary-soft {
  background-color: var(--clr-rgba-13-110-253-0-2) !important;
  color: var(--clr-rgb-13-110-253) !important;
}

.bg-secondary-soft {
  background-color: var(--clr-rgba-108-117-125-0-2) !important;
  color: var(--clr-rgb-108-117-125) !important;
}

.bg-success-soft {
  background-color: var(--clr-rgba-25-135-84-0-2) !important;
  color: var(--clr-rgb-25-135-84) !important;
}

.bg-danger-soft {
  background-color: var(--clr-rgba-220-53-69-0-2) !important;
  color: var(--clr-rgb-220-53-69) !important;
}

.bg-warning-soft {
  background-color: var(--clr-rgba-255-193-7-0-2) !important;
  color: var(--clr-rgb-255-193-7) !important;
}

.bg-info-soft {
  background-color: var(--clr-rgba-13-202-240-0-2) !important;
  color: var(--clr-rgb-13-202-240) !important;
}

.bg-light-soft {
  background-color: var(--clr-rgba-248-249-250-0-2) !important;
  color: var(--clr-rgb-248-249-250) !important;
}

.bg-dark-soft {
  background-color: var(--clr-rgba-33-37-41-0-2) !important;
  color: var(--clr-rgb-33-37-41) !important;
}

/* Ukuran Nomor Tabel */
.noTable {
  width: 1% !important;
  white-space: nowrap;
}

/* Btn Animasi */
.btn {
  text-align: center;
  display: inline-block;
  cursor: pointer;
  /* letter-spacing: 1px; */
  position: relative;
  border: 1px solid var(--clr-hex-dee2e624) !important;
  border-radius: 0.3rem;
  overflow: hidden;
  border: none;
}

.btn:before {
  content: "";
  position: absolute;
  height: 100px;
  width: 15px;
  background: var(--warna_putih_transparant);
  left: -40px;
  top: -30px;
  transform: rotate(37deg);
  transition: all 0.5s;
  opacity: 0.5;
}

.btn:hover:before {
  left: 95%;
  opacity: 0.8;
}

/* Bubble bg-light */
.bg-light {
  --bs-bg-opacity: 1;
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.bg-light::before {
  content: "";
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(
      circle at 20% 35%,
      transparent 0,
      transparent 2px,
      var(--text-color) 3px,
      var(--text-color) 4px,
      transparent 4px
    ),
    radial-gradient(
      circle at 75% 44%,
      transparent 0,
      transparent 2px,
      var(--text-color) 3px,
      var(--text-color) 4px,
      transparent 4px
    ),
    radial-gradient(
      circle at 46% 52%,
      transparent 0,
      transparent 4px,
      var(--text-color) 5px,
      var(--text-color) 6px,
      transparent 6px
    ),
    radial-gradient(
      circle at 60% 70%,
      transparent 0,
      transparent 2px,
      var(--text-color) 3px,
      var(--text-color) 4px,
      transparent 4px
    ),
    radial-gradient(
      circle at 30% 90%,
      transparent 0,
      transparent 2px,
      var(--text-color) 3px,
      var(--text-color) 4px,
      transparent 4px
    );
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  animation: bubbles 3s linear infinite both;
}

@keyframes bubbles {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(0, -66.666%);
  }
}

[data-bs-theme="light"] .bg-dark {
  background-color: var(--clr-hex-34495e) !important;
  color: var(--clr-hex-ecf0f1) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--app-surface-alt) !important;
  color: var(--app-text) !important;
}

[data-bs-theme="dark"] .bg-dark {
  background-color: var(--clr-hex-1f252c) !important;
  color: var(--clr-hex-ecf0f1) !important;
}

[data-bs-theme="light"] .text-light {
  color: var(--app-text) !important;
}

[data-bs-theme="dark"] .text-light {
  color: var(--clr-hex-ecf0f1) !important;
}

[data-bs-theme="light"] .text-dark {
  color: var(--clr-hex-212529) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--clr-hex-ecf0f1) !important;
}

[data-bs-theme="light"] .btn.btn-secondary,
[data-bs-theme="light"] .btn.btn-success,
[data-bs-theme="light"] .btn.btn-danger {
  color: var(--clr-hex-ffffff) !important;
}

[data-bs-theme="light"] .btn.btn-secondary i,
[data-bs-theme="light"] .btn.btn-success i,
[data-bs-theme="light"] .btn.btn-danger i,
[data-bs-theme="light"] .btn.btn-secondary svg,
[data-bs-theme="light"] .btn.btn-success svg,
[data-bs-theme="light"] .btn.btn-danger svg {
  color: inherit !important;
  fill: currentColor;
}

[data-bs-theme="light"] .bg-primary-soft,
[data-bs-theme="light"] .btn-primary-soft {
  background-color: var(--clr-hex-cfe2ff) !important;
  color: var(--clr-hex-084298) !important;
}

[data-bs-theme="light"] .bg-secondary-soft,
[data-bs-theme="light"] .btn-secondary-soft {
  background-color: var(--clr-hex-e2e3e5) !important;
  color: var(--clr-hex-41464b) !important;
}

[data-bs-theme="light"] .bg-success-soft,
[data-bs-theme="light"] .btn-success-soft {
  background-color: var(--clr-hex-d1e7dd) !important;
  color: var(--clr-hex-0f5132) !important;
}

[data-bs-theme="light"] .bg-danger-soft,
[data-bs-theme="light"] .btn-danger-soft {
  background-color: var(--clr-hex-f8d7da) !important;
  color: var(--clr-hex-842029) !important;
}

[data-bs-theme="light"] .bg-warning-soft,
[data-bs-theme="light"] .btn-warning-soft {
  background-color: var(--clr-hex-fff3cd) !important;
  color: var(--clr-hex-664d03) !important;
}

[data-bs-theme="light"] .bg-info-soft,
[data-bs-theme="light"] .btn-info-soft {
  background-color: var(--clr-hex-cff4fc) !important;
  color: var(--clr-hex-055160) !important;
}

[data-bs-theme="light"] .bg-light-soft,
[data-bs-theme="light"] .btn-light-soft {
  background-color: var(--clr-hex-f8f9fa) !important;
  color: var(--clr-hex-495057) !important;
}

[data-bs-theme="light"] .bg-dark-soft,
[data-bs-theme="light"] .btn-dark-soft {
  background-color: var(--clr-hex-dee2e6) !important;
  color: var(--clr-hex-343a40) !important;
}

[data-bs-theme="light"] .btn-primary-soft:hover,
[data-bs-theme="light"] .btn-primary-soft:focus {
  background-color: var(--clr-hex-9ec5fe) !important;
  color: var(--clr-hex-084298) !important;
}

[data-bs-theme="light"] .btn-secondary-soft:hover,
[data-bs-theme="light"] .btn-secondary-soft:focus {
  background-color: var(--clr-hex-d3d4d6) !important;
  color: var(--clr-hex-41464b) !important;
}

[data-bs-theme="light"] .btn-success-soft:hover,
[data-bs-theme="light"] .btn-success-soft:focus {
  background-color: var(--clr-hex-bcd0c7) !important;
  color: var(--clr-hex-0f5132) !important;
}

[data-bs-theme="light"] .btn-danger-soft:hover,
[data-bs-theme="light"] .btn-danger-soft:focus {
  background-color: var(--clr-hex-f1aeb5) !important;
  color: var(--clr-hex-842029) !important;
}

[data-bs-theme="light"] .btn-warning-soft:hover,
[data-bs-theme="light"] .btn-warning-soft:focus {
  background-color: var(--clr-hex-ffe69c) !important;
  color: var(--clr-hex-664d03) !important;
}

[data-bs-theme="light"] .btn-info-soft:hover,
[data-bs-theme="light"] .btn-info-soft:focus {
  background-color: var(--clr-hex-b6effb) !important;
  color: var(--clr-hex-055160) !important;
}

[data-bs-theme="light"] .btn-light-soft:hover,
[data-bs-theme="light"] .btn-light-soft:focus {
  background-color: var(--clr-hex-e9ecef) !important;
  color: var(--clr-hex-495057) !important;
}

[data-bs-theme="light"] .btn-dark-soft:hover,
[data-bs-theme="light"] .btn-dark-soft:focus {
  background-color: var(--clr-hex-ced4da) !important;
  color: var(--clr-hex-212529) !important;
}

[data-bs-theme="dark"] .bg-primary-soft,
[data-bs-theme="dark"] .btn-primary-soft {
  background-color: var(--clr-rgba-13-110-253-0-2) !important;
  color: var(--clr-hex-9ec5fe) !important;
}

[data-bs-theme="dark"] .bg-secondary-soft,
[data-bs-theme="dark"] .btn-secondary-soft {
  background-color: var(--clr-rgba-108-117-125-0-2) !important;
  color: var(--clr-hex-dee2e6) !important;
}

[data-bs-theme="dark"] .bg-success-soft,
[data-bs-theme="dark"] .btn-success-soft {
  background-color: var(--clr-rgba-25-135-84-0-2) !important;
  color: var(--clr-hex-a3cfbb) !important;
}

[data-bs-theme="dark"] .bg-danger-soft,
[data-bs-theme="dark"] .btn-danger-soft {
  background-color: var(--clr-rgba-220-53-69-0-2) !important;
  color: var(--clr-hex-f1aeb5) !important;
}

[data-bs-theme="dark"] .bg-warning-soft,
[data-bs-theme="dark"] .btn-warning-soft {
  background-color: var(--clr-rgba-255-193-7-0-2) !important;
  color: var(--clr-hex-ffe69c) !important;
}

[data-bs-theme="dark"] .bg-info-soft,
[data-bs-theme="dark"] .btn-info-soft {
  background-color: var(--clr-rgba-13-202-240-0-2) !important;
  color: var(--clr-hex-b6effb) !important;
}

[data-bs-theme="dark"] .bg-light-soft,
[data-bs-theme="dark"] .btn-light-soft {
  background-color: var(--clr-rgba-248-249-250-0-2) !important;
  color: var(--clr-hex-f8f9fa) !important;
}

[data-bs-theme="dark"] .bg-dark-soft,
[data-bs-theme="dark"] .btn-dark-soft {
  background-color: var(--clr-rgba-33-37-41-0-2) !important;
  color: var(--clr-hex-dee2e6) !important;
}

[data-bs-theme="dark"] .btn-primary-soft:hover,
[data-bs-theme="dark"] .btn-primary-soft:focus,
[data-bs-theme="dark"] .btn-secondary-soft:hover,
[data-bs-theme="dark"] .btn-secondary-soft:focus,
[data-bs-theme="dark"] .btn-success-soft:hover,
[data-bs-theme="dark"] .btn-success-soft:focus,
[data-bs-theme="dark"] .btn-danger-soft:hover,
[data-bs-theme="dark"] .btn-danger-soft:focus,
[data-bs-theme="dark"] .btn-warning-soft:hover,
[data-bs-theme="dark"] .btn-warning-soft:focus,
[data-bs-theme="dark"] .btn-info-soft:hover,
[data-bs-theme="dark"] .btn-info-soft:focus,
[data-bs-theme="dark"] .btn-light-soft:hover,
[data-bs-theme="dark"] .btn-light-soft:focus,
[data-bs-theme="dark"] .btn-dark-soft:hover,
[data-bs-theme="dark"] .btn-dark-soft:focus {
  filter: brightness(1.08);
}

.btn-primary-soft,
.btn-secondary-soft,
.btn-success-soft,
.btn-danger-soft,
.btn-warning-soft,
.btn-info-soft,
.btn-light-soft,
.btn-dark-soft {
  border: 1px solid transparent !important;
}

.btn-primary-soft i,
.btn-secondary-soft i,
.btn-success-soft i,
.btn-danger-soft i,
.btn-warning-soft i,
.btn-info-soft i,
.btn-light-soft i,
.btn-dark-soft i,
.btn-primary-soft svg,
.btn-secondary-soft svg,
.btn-success-soft svg,
.btn-danger-soft svg,
.btn-warning-soft svg,
.btn-info-soft svg,
.btn-light-soft svg,
.btn-dark-soft svg {
  color: inherit !important;
  fill: currentColor;
}

[data-bs-theme="light"] .btn-outline-secondary-soft {
  background-color: transparent !important;
  color: var(--clr-hex-6c757d) !important;
  border-color: var(--clr-hex-dee2e6) !important;
}

[data-bs-theme="light"] .btn-outline-secondary-soft:hover,
[data-bs-theme="light"] .btn-outline-secondary-soft:focus,
[data-bs-theme="light"] .btn-outline-secondary-soft.active,
[data-bs-theme="light"] .btn-outline-secondary-soft:active,
[data-bs-theme="light"] .show > .btn-outline-secondary-soft.dropdown-toggle {
  background-color: var(--clr-hex-e2e3e5) !important;
  color: var(--clr-hex-41464b) !important;
  border-color: var(--clr-hex-d3d4d6) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary-soft {
  background-color: transparent !important;
  color: var(--clr-hex-dee2e6) !important;
  border-color: var(--clr-rgba-248-249-250-0-2) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary-soft:hover,
[data-bs-theme="dark"] .btn-outline-secondary-soft:focus,
[data-bs-theme="dark"] .btn-outline-secondary-soft.active,
[data-bs-theme="dark"] .btn-outline-secondary-soft:active,
[data-bs-theme="dark"] .show > .btn-outline-secondary-soft.dropdown-toggle {
  background-color: var(--clr-rgba-248-249-250-0-2) !important;
  color: var(--clr-hex-f8f9fa) !important;
  border-color: var(--clr-rgba-255-255-255-0-2) !important;
}

.btn-outline-secondary-soft i,
.btn-outline-secondary-soft svg {
  color: inherit !important;
  fill: currentColor;
}