From 885edfe8449cf96401f40afa2fb86b41c38b71ac Mon Sep 17 00:00:00 2001
From: LailaWulandarii <E41220418@student.polije.ac.id>
Date: Fri, 12 Dec 2025 19:17:31 +0700
Subject: [PATCH] add brand and status colors to CSS variables for improved
 theming, grouping variable

---
 public/css/app.css | 381 ++++++++++++++++++++-------------------------
 1 file changed, 170 insertions(+), 211 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 9d79e2d..c5ac1af 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -107,15 +107,37 @@ @media screen and (-ms-high-contrast: active),
 
 :root,
 [data-bs-theme=light] {
+
+    /* =========================================
+       1. BRAND COLORS (Warna Khas Flo.do)
+       ========================================= */
     --bs-primary: #3B8181;
+    /* Teal Utama */
     --bs-brick: #E66351;
     --bs-red: #DC464F;
+    /* Merah Bunga */
     --bs-orange: #FF975A;
-    --bs-green: #198754;
+    /* Oranye Aksen */
     --bs-teal: #20c997;
+
+    /* =========================================
+       2. BOOTSTRAP STATUS COLORS (Warna Standar)
+       ========================================= */
+    --bs-success: #198754;
+    /* Hijau Sukses */
+    --bs-info: #0dcaf0;
+    /* Biru Info */
+    --bs-warning: #ffc107;
+    /* Kuning Peringatan */
+    --bs-danger: #dc3545;
+    /* Merah Error */
+    --bs-secondary: #6c757d;
+    --bs-light: #ced4da;
+    --bs-dark: #131313;
     --bs-white: #fff;
     --bs-gray: #6c757d;
-    --bs-gray-dark: #343a40;
+
+    /* Skala Abu-abu (Grayscale) */
     --bs-gray-100: #f8f9fa;
     --bs-gray-200: #e9ecef;
     --bs-gray-300: #dee2e6;
@@ -125,23 +147,109 @@ [data-bs-theme=light] {
     --bs-gray-700: #495057;
     --bs-gray-800: #343a40;
     --bs-gray-900: #212529;
-    --bs-secondary: #6c757d;
-    --bs-success: #198754;
-    --bs-info: #0dcaf0;
-    --bs-warning: #ffc107;
-    --bs-danger: #dc3545;
-    --bs-light: #ced4da;
-    --bs-dark: #131313;
-    --bs-primary-rgb: 67, 94, 190;
-    --bs-secondary-rgb: 108, 117, 125;
+
+    /* =========================================
+       3. RGB VALUES (PENTING UNTUK TRANSPARANSI)
+       * Digunakan saat pakai class bg-opacity-xx
+       ========================================= */
+    --bs-primary-rgb: 59, 129, 129;
+    /* SUDAH DIPERBAIKI (Teal) */
     --bs-success-rgb: 25, 135, 84;
     --bs-info-rgb: 13, 202, 240;
     --bs-warning-rgb: 255, 193, 7;
     --bs-danger-rgb: 220, 53, 69;
+    --bs-secondary-rgb: 108, 117, 125;
     --bs-light-rgb: 206, 212, 218;
     --bs-dark-rgb: 19, 19, 19;
+    --bs-white-rgb: 255, 255, 255;
+    --bs-black-rgb: 0, 0, 0;
 
+    /* =========================================
+       4. TYPOGRAPHY (Pengaturan Font)
+       ========================================= */
+    --bs-body-font-family: "Nunito";
+    --bs-body-font-size: 1rem;
+    --bs-body-font-weight: 400;
+    --bs-body-line-height: 1.5;
 
+    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+    /* =========================================
+       5. BODY & BACKGROUND (Warna Dasar Web)
+       ========================================= */
+    --bs-body-bg: #f2f7ff;
+    /* Background halaman (Biru sangat muda) */
+    --bs-body-bg-rgb: 242, 247, 255;
+    --bs-body-color: #607080;
+    /* Warna Teks Paragraf */
+    --bs-body-color-rgb: 96, 112, 128;
+    --bs-heading-color: #25396f;
+    /* Warna Judul (H1-H6) - Biru Gelap */
+
+    /* =========================================
+       6. LINKS & INTERACTIONS (Klik & Hover)
+       ========================================= */
+    --bs-link-color: var(--bs-primary);
+    /* Mengikuti warna Primary (Teal) */
+    --bs-link-hover-color: #2a6161;
+    /* Warna saat kursor di atas link */
+    --bs-link-decoration: underline;
+
+    /* Focus Ring (Garis pinggir saat input diklik) */
+    --bs-focus-ring-width: .25rem;
+    --bs-focus-ring-opacity: .25;
+    --bs-focus-ring-color: rgba(59, 129, 129, .25);
+    /* DIPERBAIKI: Teal transparan (bukan biru lagi) */
+
+    /* =========================================
+       7. BORDERS & RADIUS (Garis & Lengkungan)
+       ========================================= */
+    --bs-border-width: 1px;
+    --bs-border-style: solid;
+    --bs-border-color: #dee2e6;
+    --bs-border-color-translucent: rgba(0, 0, 0, .175);
+
+    /* Radius (Seberapa bulat sudut elemen) */
+    --bs-border-radius: .25rem;
+    /* Default (4px) */
+    --bs-border-radius-sm: .2rem;
+    /* Kecil */
+    --bs-border-radius-lg: .3rem;
+    /* Besar */
+    --bs-border-radius-xl: 1rem;
+    /* Extra Besar (Kartu/Modal) */
+    --bs-border-radius-xxl: 2rem;
+    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
+    --bs-border-radius-pill: 50rem;
+    /* Bentuk Pil/Bulat penuh */
+
+    /* =========================================
+       8. COMPONENTS (Bayangan & Form)
+       ========================================= */
+    /* Box Shadows */
+    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
+    --bs-box-shadow-lg: 0 .75rem 3rem rgba(0, 0, 0, .225);
+    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);
+
+    /* Form Validation State */
+    --bs-form-valid-color: #198754;
+    --bs-form-valid-border-color: #198754;
+    --bs-form-invalid-color: #dc3545;
+    --bs-form-invalid-border-color: #dc3545;
+
+    /* Lain-lain (Highlight & Gradient) */
+    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
+    --bs-code-color: #d63384;
+    --bs-highlight-color: #607080;
+    --bs-highlight-bg: #fcf8e3;
+
+    /* =========================================
+       9. LEGACY TEMPLATE COLORS (Sisa Bawaan)
+       * Bagian ini warna biru bawaan Mazer.
+       * Sudah saya rapikan di bawah. Aman dibiarkan atau dihapus.
+       ========================================= */
     --bs-primary-text-emphasis: #1b264c;
     --bs-secondary-text-emphasis: #2b2f32;
     --bs-success-text-emphasis: #0a3622;
@@ -150,6 +258,8 @@ [data-bs-theme=light] {
     --bs-danger-text-emphasis: #58151c;
     --bs-light-text-emphasis: #495057;
     --bs-dark-text-emphasis: #495057;
+
+    /* Subtle Backgrounds (Background tipis) */
     --bs-primary-bg-subtle: #d9dff2;
     --bs-secondary-bg-subtle: #f8f9fa;
     --bs-success-bg-subtle: #d1e7dd;
@@ -158,6 +268,8 @@ [data-bs-theme=light] {
     --bs-danger-bg-subtle: #f8d7da;
     --bs-light-bg-subtle: #fcfcfd;
     --bs-dark-bg-subtle: #ced4da;
+
+    /* Subtle Borders */
     --bs-primary-border-subtle: #b4bfe5;
     --bs-secondary-border-subtle: #e9ecef;
     --bs-success-border-subtle: #a3cfbb;
@@ -166,60 +278,6 @@ [data-bs-theme=light] {
     --bs-danger-border-subtle: #f1aeb5;
     --bs-light-border-subtle: #e9ecef;
     --bs-dark-border-subtle: #adb5bd;
-    --bs-white-rgb: 255, 255, 255;
-    --bs-black-rgb: 0, 0, 0;
-    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
-    --bs-body-font-family: "Nunito";
-    --bs-body-font-size: 1rem;
-    --bs-body-font-weight: 400;
-    --bs-body-line-height: 1.5;
-    --bs-body-color: #607080;
-    --bs-body-color-rgb: 96, 112, 128;
-    --bs-body-bg: #f2f7ff;
-    --bs-body-bg-rgb: 242, 247, 255;
-    --bs-emphasis-color: #000;
-    --bs-emphasis-color-rgb: 0, 0, 0;
-    --bs-secondary-color: rgba(96, 112, 128, .75);
-    --bs-secondary-color-rgb: 96, 112, 128;
-    --bs-secondary-bg: #e9ecef;
-    --bs-secondary-bg-rgb: 233, 236, 239;
-    --bs-tertiary-color: rgba(96, 112, 128, .5);
-    --bs-tertiary-color-rgb: 96, 112, 128;
-    --bs-tertiary-bg: #f8f9fa;
-    --bs-tertiary-bg-rgb: 248, 249, 250;
-    --bs-heading-color: #25396f;
-    --bs-link-color: #435ebe;
-    --bs-link-color-rgb: 67, 94, 190;
-    --bs-link-decoration: underline;
-    --bs-link-hover-color: #364b98;
-    --bs-link-hover-color-rgb: 54, 75, 152;
-    --bs-code-color: #d63384;
-    --bs-highlight-color: #607080;
-    --bs-highlight-bg: #fcf8e3;
-    --bs-border-width: 1px;
-    --bs-border-style: solid;
-    --bs-border-color: #dee2e6;
-    --bs-border-color-translucent: rgba(0, 0, 0, .175);
-    --bs-border-radius: .25rem;
-    --bs-border-radius-sm: .2rem;
-    --bs-border-radius-lg: .3rem;
-    --bs-border-radius-xl: 1rem;
-    --bs-border-radius-xxl: 2rem;
-    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
-    --bs-border-radius-pill: 50rem;
-    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
-    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
-    --bs-box-shadow-lg: 0 .75rem 3rem rgba(0, 0, 0, .225);
-    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);
-    --bs-focus-ring-width: .25rem;
-    --bs-focus-ring-opacity: .25;
-    --bs-focus-ring-color: rgba(67, 94, 190, .25);
-    --bs-form-valid-color: #198754;
-    --bs-form-valid-border-color: #198754;
-    --bs-form-invalid-color: #dc3545;
-    --bs-form-invalid-border-color: #dc3545
 }
 
 
@@ -2752,8 +2810,8 @@ .form-check-input:focus {
 }
 
 .form-check-input:checked {
-    background-color: #435ebe;
-    border-color: #435ebe
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary)
 }
 
 .form-check-input:checked[type=checkbox] {
@@ -2765,8 +2823,8 @@ .form-check-input:checked[type=radio] {
 }
 
 .form-check-input[type=checkbox]:indeterminate {
-    background-color: #435ebe;
-    border-color: #435ebe;
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
     --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
 }
 
@@ -2871,7 +2929,7 @@ .form-range::-webkit-slider-thumb {
     margin-top: -.25rem;
     -webkit-appearance: none;
     appearance: none;
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     border: 0;
     border-radius: 1rem;
     transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
@@ -2902,7 +2960,7 @@ .form-range::-moz-range-thumb {
     height: 1rem;
     -webkit-appearance: none;
     appearance: none;
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     border: 0;
     border-radius: 1rem;
     transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
@@ -3461,8 +3519,8 @@ fieldset:disabled .btn {
 
 .btn-primary {
     --bs-btn-color: #fff;
-    --bs-btn-bg: #435ebe;
-    --bs-btn-border-color: #435ebe;
+    --bs-btn-bg: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
     --bs-btn-hover-color: #fff;
     --bs-btn-hover-bg: #3950a2;
     --bs-btn-hover-border-color: #364b98;
@@ -3472,8 +3530,8 @@ .btn-primary {
     --bs-btn-active-border-color: #32478f;
     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
     --bs-btn-disabled-color: #fff;
-    --bs-btn-disabled-bg: #435ebe;
-    --bs-btn-disabled-border-color: #435ebe
+    --bs-btn-disabled-bg: var(--bs-primary);
+    --bs-btn-disabled-border-color: var(--bs-primary)
 }
 
 .btn-secondary {
@@ -3579,19 +3637,19 @@ .btn-light {
 }
 
 .btn-outline-primary {
-    --bs-btn-color: #435ebe;
-    --bs-btn-border-color: #435ebe;
+    --bs-btn-color: var(--bs-primary);
+    --bs-btn-border-color: var(--bs-primary);
     --bs-btn-hover-color: #fff;
-    --bs-btn-hover-bg: #435ebe;
-    --bs-btn-hover-border-color: #435ebe;
+    --bs-btn-hover-bg: var(--bs-primary);
+    --bs-btn-hover-border-color: var(--bs-primary);
     --bs-btn-focus-shadow-rgb: 67, 94, 190;
     --bs-btn-active-color: #fff;
-    --bs-btn-active-bg: #435ebe;
-    --bs-btn-active-border-color: #435ebe;
+    --bs-btn-active-bg: var(--bs-primary);
+    --bs-btn-active-border-color: var(--bs-primary);
     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-    --bs-btn-disabled-color: #435ebe;
+    --bs-btn-disabled-color: var(--bs-primary);
     --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: #435ebe;
+    --bs-btn-disabled-border-color: var(--bs-primary);
     --bs-gradient: none
 }
 
@@ -3699,7 +3757,7 @@ .btn-outline-light {
 
 .btn-link {
     --bs-btn-font-weight: 400;
-    --bs-btn-color: #435ebe;
+    --bs-btn-color: var(--bs-primary);
     --bs-btn-bg: transparent;
     --bs-btn-border-color: transparent;
     --bs-btn-hover-color: #364b98;
@@ -3827,7 +3885,7 @@ .dropdown-menu {
     --bs-dropdown-link-hover-color: #1e2125;
     --bs-dropdown-link-hover-bg: #f8f9fa;
     --bs-dropdown-link-active-color: #fff;
-    --bs-dropdown-link-active-bg: #435ebe;
+    --bs-dropdown-link-active-bg: var(--bs-primary);
     --bs-dropdown-link-disabled-color: #6c757d;
     --bs-dropdown-item-padding-x: 1.5rem;
     --bs-dropdown-item-padding-y: .45rem;
@@ -4327,7 +4385,7 @@ .nav-tabs .dropdown-menu {
 .nav-pills {
     --bs-nav-pills-border-radius: .25rem;
     --bs-nav-pills-link-active-color: #fff;
-    --bs-nav-pills-link-active-bg: #435ebe
+    --bs-nav-pills-link-active-bg: var(--bs-primary)
 }
 
 .nav-pills .nav-link {
@@ -5267,7 +5325,7 @@ .pagination {
     --bs-pagination-padding-x: .75rem;
     --bs-pagination-padding-y: .375rem;
     --bs-pagination-font-size: 1rem;
-    --bs-pagination-color: #435ebe;
+    --bs-pagination-color: var(--bs-primary);
     --bs-pagination-bg: #fff;
     --bs-pagination-border-width: 1px;
     --bs-pagination-border-color: #dee2e6;
@@ -5279,8 +5337,8 @@ .pagination {
     --bs-pagination-focus-bg: #e9ecef;
     --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(67, 94, 190, .25);
     --bs-pagination-active-color: #fff;
-    --bs-pagination-active-bg: #435ebe;
-    --bs-pagination-active-border-color: #435ebe;
+    --bs-pagination-active-bg: var(--bs-primary);
+    --bs-pagination-active-border-color: var(--bs-primary);
     --bs-pagination-disabled-color: #6c757d;
     --bs-pagination-disabled-bg: #fff;
     --bs-pagination-disabled-border-color: #dee2e6;
@@ -5491,7 +5549,7 @@ .progress-stacked {
     --bs-progress-border-radius: .18rem;
     --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
     --bs-progress-bar-color: #fff;
-    --bs-progress-bar-bg: #435ebe;
+    --bs-progress-bar-bg: var(--bs-primary);
     --bs-progress-bar-transition: width .6s ease;
     display: flex;
     height: var(--bs-progress-height);
@@ -5558,8 +5616,8 @@ .list-group {
     --bs-list-group-disabled-color: #6c757d;
     --bs-list-group-disabled-bg: #fff;
     --bs-list-group-active-color: #fff;
-    --bs-list-group-active-bg: #435ebe;
-    --bs-list-group-active-border-color: #435ebe;
+    --bs-list-group-active-bg: var(--bs-primary);
+    --bs-list-group-active-border-color: var(--bs-primary);
     display: flex;
     flex-direction: column;
     padding-left: 0;
@@ -8132,9 +8190,6 @@ .focus-ring-light {
     --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity))
 }
 
-.focus-ring-dark {
-    --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity))
-}
 
 .position-static {
     position: static !important
@@ -8291,11 +8346,6 @@ .border-light {
     border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important
 }
 
-.border-dark {
-    --bs-border-opacity: 1;
-    border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important
-}
-
 .border-black {
     --bs-border-opacity: 1;
     border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important
@@ -8334,10 +8384,6 @@ .border-light-subtle {
     border-color: var(--bs-light-border-subtle) !important
 }
 
-.border-dark-subtle {
-    border-color: var(--bs-dark-border-subtle) !important
-}
-
 .border-0 {
     border-width: 0 !important
 }
@@ -9244,11 +9290,6 @@ .text-light {
     color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important
 }
 
-.text-dark {
-    --bs-text-opacity: 1;
-    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important
-}
-
 .text-black {
     --bs-text-opacity: 1;
     color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important
@@ -9343,10 +9384,6 @@ .text-light-emphasis {
     color: var(--bs-light-text-emphasis) !important
 }
 
-.text-dark-emphasis {
-    color: var(--bs-dark-text-emphasis) !important
-}
-
 .link-opacity-10,
 .link-opacity-10-hover:hover {
     --bs-link-opacity: .1
@@ -9422,11 +9459,6 @@ .link-underline-light {
     text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important
 }
 
-.link-underline-dark {
-    --bs-link-underline-opacity: 1;
-    text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important
-}
-
 .link-underline {
     --bs-link-underline-opacity: 1;
     text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important
@@ -9497,11 +9529,6 @@ .bg-light {
     background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important
 }
 
-.bg-dark {
-    --bs-bg-opacity: 1;
-    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important
-}
-
 .bg-black {
     --bs-bg-opacity: 1;
     background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important
@@ -9580,10 +9607,6 @@ .bg-light-subtle {
     background-color: var(--bs-light-bg-subtle) !important
 }
 
-.bg-dark-subtle {
-    background-color: var(--bs-dark-bg-subtle) !important
-}
-
 .bg-gradient {
     background-image: var(--bs-gradient) !important
 }
@@ -21835,7 +21858,7 @@ .alert .alert-heading+p {
 }
 
 .alert-primary {
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     color: #fff
 }
 
@@ -21884,16 +21907,6 @@ .alert-danger a {
     font-weight: 700
 }
 
-.alert-dark {
-    background-color: #454546;
-    color: #fff
-}
-
-.alert-dark a {
-    color: #fff;
-    font-weight: 700
-}
-
 .alert-light {
     background-color: #f9f9f9;
     color: #818182
@@ -21950,12 +21963,6 @@ .alert-light-info {
     border: 1px solid #d7fcff
 }
 
-.alert-light-dark {
-    background-color: #e6e0e0;
-    color: #7f3737;
-    border: 1px solid #dbdbdb
-}
-
 .avatar {
     display: inline-flex;
     border-radius: 50%;
@@ -22115,11 +22122,6 @@ .btn.btn-light-info {
     color: #00474d
 }
 
-.btn.btn-light-dark {
-    background-color: #e3e3e3;
-    color: #171717
-}
-
 .btn-block {
     width: 100%
 }
@@ -22269,14 +22271,14 @@ .pricing ul li svg {
 }
 
 .pricing .card-highlighted {
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     padding-top: 20px;
     padding-bottom: 20px
 }
 
 .pricing .card-highlighted .card-header,
 .pricing .card-highlighted .card-body {
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     color: #fff
 }
 
@@ -22290,7 +22292,7 @@ .pricing .card-highlighted ul li svg {
 }
 
 .pricing .card-highlighted .card-footer {
-    background-color: #435ebe
+    background-color: var(--bs-primary)
 }
 
 .pricing .card-highlighted .card-title {
@@ -22413,9 +22415,9 @@ .form-group.with-title dataTable-input {
 
 .form-group.with-title .form-control:focus~label,
 .form-group.with-title dataTable-input:focus~label {
-    border-left: 1px solid #435ebe;
-    border-top: 1px solid #435ebe;
-    border-right: 1px solid #435ebe
+    border-left: 1px solidvar(--bs-primary);
+    border-top: 1px solidvar(--bs-primary);
+    border-right: 1px solidvar(--bs-primary)
 }
 
 .form-group[class*=has-icon-].has-icon-left .form-control {
@@ -22509,8 +22511,8 @@ .form-check .form-check-input:focus {
 }
 
 .form-check .form-check-input.form-check-primary {
-    background-color: #435ebe;
-    border-color: #435ebe
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary)
 }
 
 .form-check .form-check-input.form-check-primary:not(:checked) {
@@ -22634,24 +22636,6 @@ .form-check .form-check-input.form-check-light.form-check-glow:not(:checked) {
     box-shadow: none
 }
 
-.form-check .form-check-input.form-check-dark {
-    background-color: #131313;
-    border-color: #131313
-}
-
-.form-check .form-check-input.form-check-dark:not(:checked) {
-    background-color: transparent;
-    border: 1px solid #ced4da
-}
-
-.form-check .form-check-input.form-check-dark.form-check-glow {
-    box-shadow: 0 0 5px #2d2d2d
-}
-
-.form-check .form-check-input.form-check-dark.form-check-glow:not(:checked) {
-    box-shadow: none
-}
-
 .form-check.form-check-sm .form-check-input {
     width: .9rem;
     height: .9rem;
@@ -22673,8 +22657,8 @@ .form-check.form-check-lg label {
 }
 
 .form-check.form-check-primary .form-check-input {
-    background-color: #435ebe;
-    border-color: #435ebe
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary)
 }
 
 .form-check.form-check-secondary .form-check-input {
@@ -22707,11 +22691,6 @@ .form-check.form-check-light .form-check-input {
     border-color: #ced4da
 }
 
-.form-check.form-check-dark .form-check-input {
-    background-color: #131313;
-    border-color: #131313
-}
-
 .dataTable-input {
     min-height: calc(1.5em + .934rem + 2px);
     padding: .467rem .6rem !important;
@@ -22924,7 +22903,7 @@ .sidebar-wrapper .menu .sidebar-item.active.has-sub .sidebar-link:after {
 }
 
 .sidebar-wrapper .menu .sidebar-item.active>.sidebar-link {
-    background-color: #435ebe
+    background-color: var(--bs-primary)
 }
 
 .sidebar-wrapper .menu .sidebar-item.active>.sidebar-link span {
@@ -22966,7 +22945,7 @@ .sidebar-wrapper .menu .submenu .submenu-item.active {
 }
 
 .sidebar-wrapper .menu .submenu .submenu-item.active>a {
-    color: #435ebe;
+    color: var(--bs-primary);
     font-weight: 700
 }
 
@@ -22982,7 +22961,7 @@ .sidebar-wrapper .menu .submenu .submenu-item a {
 
 .sidebar-wrapper .menu .submenu .submenu-item a:hover {
     margin-left: .3rem;
-    color: #435ebe
+    color: var(--bs-primary)
 }
 
 .sidebar-item.has-sub,
@@ -23067,7 +23046,7 @@ .nav-tabs .nav-link:hover {
 .nav-tabs .nav-link.active {
     border: none;
     position: relative;
-    color: #435ebe
+    color: var(--bs-primary)
 }
 
 .nav-tabs .nav-link.active:after {
@@ -23076,7 +23055,7 @@ .nav-tabs .nav-link.active:after {
     position: absolute;
     bottom: 0;
     height: 2px;
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     left: 0;
     box-shadow: 0 2px 5px rgba(67, 94, 190, .5)
 }
@@ -23223,7 +23202,7 @@ .layout-horizontal .submenu-item.active a {
 }
 
 .layout-horizontal .main-navbar {
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     padding: 1rem
 }
 
@@ -23449,8 +23428,8 @@ #topbarUserDropdown:after {
 }
 
 .pagination.pagination-primary .page-item.active .page-link {
-    background-color: #435ebe;
-    border-color: #435ebe;
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
     box-shadow: 0 2px 5px rgba(67, 94, 190, .3)
 }
 
@@ -23490,12 +23469,6 @@ .pagination.pagination-light .page-item.active .page-link {
     box-shadow: 0 2px 5px rgba(206, 212, 218, .3)
 }
 
-.pagination.pagination-dark .page-item.active .page-link {
-    background-color: #131313;
-    border-color: #131313;
-    box-shadow: 0 2px 5px rgba(19, 19, 19, .3)
-}
-
 .page-item:not(.active) .page-link:hover {
     color: #000
 }
@@ -23575,7 +23548,7 @@ .progress.progress-primary {
 }
 
 .progress.progress-primary .progress-bar {
-    background-color: #435ebe;
+    background-color: var(--bs-primary);
     border-radius: .18rem
 }
 
@@ -23633,15 +23606,6 @@ .progress.progress-light .progress-bar {
     border-radius: .18rem
 }
 
-.progress.progress-dark {
-    overflow: visible
-}
-
-.progress.progress-dark .progress-bar {
-    background-color: #131313;
-    border-radius: .18rem
-}
-
 .progress.progress-sm {
     height: .4rem
 }
@@ -23871,11 +23835,6 @@ .bg-light-info {
     color: #00474d
 }
 
-.bg-light-dark {
-    background-color: #e3e3e3;
-    color: #171717
-}
-
 .bg-light {
     color: #343a40
 }