funuicss 2.5.3 → 2.5.5

package/css/fun.css

@@ -65,6 +65,15 @@
 
   --leading-none: 1;      
 
+
+  /* default colors */
+  --page-bg: #FFFFFF ; /* Page background color */
+  --text-color: #000000; /* Text color */
+  --raiseThemes:#FFFFFF; /* Raised element color */
+  --borderColor:#CCC; /* Border color */
+  --lighter: #fafafa ;
+
+
     /* Primary Colors */
     --primary: #6366f1;
     --primary50: #eef2ff;
@@ -172,33 +181,6 @@
   --info800: #075985;
   --info900: #0c4a6e;
 
-  /* Light Colors */
-  --light: #f5f5f4;
-  --light50: #fafaf9;
-  --light100: #f5f5f4;
-  --light200: #e7e5e4;
-  --light300: #d6d3d1;
-  --light400: #a8a29e;
-  --light500: #78716c;
-  --light600: #57534e;
-  --light700: #44403c;
-  --light800: #292524;
-  --light900: #1c1917;
-
-    /* Gray Colors */
-    --gray: #71717a;
-    --gray50: #fafafa;
-    --gray100: #f4f4f5;
-    --gray200: #e4e4e7;
-    --gray300: #d4d4d8;
-    --gray400: #a1a1aa;
-    --gray500: #71717a;
-    --gray600: #52525b;
-    --gray700: #3f3f46;
-    --gray800: #27272a;
-    --gray900: #18181b;
-
-
   /* Dark Colors */
   --dark: #71717a;
   --dark50: #18181b;
@@ -230,12 +212,12 @@
   --dangerLight:#fdeded;
   --info: #5fbbe2;
   --infoLight:#e5f6fd;
-  --light: #ecf5f8;
+  --light: var(--lighter);
   --deepLight: #2fa2b1;
-  --lighter:#FAFAFA;
   --gradient:linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
   --gradientColors:90deg, var(--secondary) 0%, var(--primary) 100%;
   --linkColor:rgb(124, 124, 124);
+
   /* Body and font */
   --bd-font-weight: 400;
   --bdfontSize: 1rem;
@@ -244,7 +226,6 @@
   --smallFont: .79rem ;
   --smallerFont: .7rem;
   --navHeight: fit-content ;
-  --borderColor:#ddd;
   --border: 0.1rem solid var(--borderColor);
   --inputBorder:0.12rem;
   --input_outline_size:0.127rem;
@@ -275,12 +256,12 @@
 
 /* DarkTheme */
 :root{
-  --raiseThemes:#FFFFFF;
   --inputOutline:var(--primary);
   --lightThemeDark: var(--dark)
 }
 
 
+
 /* normalise css */
 
 *,
@@ -338,6 +319,11 @@ link:hover {
 }
 
 /* Background Color */
+.pop{
+  background: var(--lighter) !important;
+}
+
+
 .gradient,
 .hover-gradient:hover {
   background: var(--gradient) !important;
@@ -425,6 +411,7 @@ link:hover {
 .hover-primary:hover {
   background-color: var(--primary) !important;
   color: var(--white);
+  stroke: var(--primary);
 }
 
 /* Primary 50 */
@@ -432,6 +419,7 @@ link:hover {
 .hover-primary50:hover {
   background-color: var(--primary50) !important;
   color: var(--white);
+  stroke: var(--primary50);
 }
 
 /* Primary 100 */
@@ -439,6 +427,7 @@ link:hover {
 .hover-primary100:hover {
   background-color: var(--primary100) !important;
   color: var(--white);
+  stroke: var(--primary100);
 }
 
 /* Primary 200 */
@@ -446,6 +435,7 @@ link:hover {
 .hover-primary200:hover {
   background-color: var(--primary200) !important;
   color: var(--white);
+  stroke: var(--primary200);
 }
 
 /* Primary 300 */
@@ -453,6 +443,7 @@ link:hover {
 .hover-primary300:hover {
   background-color: var(--primary300) !important;
   color: var(--white);
+  stroke: var(--primary300);
 }
 
 /* Primary 400 */
@@ -460,6 +451,7 @@ link:hover {
 .hover-primary400:hover {
   background-color: var(--primary400) !important;
   color: var(--white);
+  stroke: var(--primary400);
 }
 
 /* Primary 500 */
@@ -467,6 +459,7 @@ link:hover {
 .hover-primary500:hover {
   background-color: var(--primary500) !important;
   color: var(--white);
+  stroke: var(--primary500);
 }
 
 /* Primary 600 */
@@ -474,6 +467,7 @@ link:hover {
 .hover-primary600:hover {
   background-color: var(--primary600) !important;
   color: var(--white);
+  stroke: var(--primary600);
 }
 
 /* Primary 700 */
@@ -481,6 +475,7 @@ link:hover {
 .hover-primary700:hover {
   background-color: var(--primary700) !important;
   color: var(--white);
+  stroke: var(--primary700);
 }
 
 /* Primary 800 */
@@ -488,6 +483,7 @@ link:hover {
 .hover-primary800:hover {
   background-color: var(--primary800) !important;
   color: var(--white);
+  stroke: var(--primary800);
 }
 
 /* Primary 900 */
@@ -495,6 +491,7 @@ link:hover {
 .hover-primary900:hover {
   background-color: var(--primary900) !important;
   color: var(--white);
+  stroke: var(--primary900);
 }
 
 
@@ -503,6 +500,7 @@ link:hover {
 .hover-secondary:hover {
   background-color: var(--secondary) !important;
   color: var(--white);
+  stroke: var(--secondary);
 }
 
 /* Secondary 50 */
@@ -510,6 +508,7 @@ link:hover {
 .hover-secondary50:hover {
   background-color: var(--secondary50) !important;
   color: var(--white);
+  stroke: var(--secondary50);
 }
 
 /* Secondary 100 */
@@ -517,6 +516,7 @@ link:hover {
 .hover-secondary100:hover {
   background-color: var(--secondary100) !important;
   color: var(--white);
+  stroke: var(--secondary100);
 }
 
 /* Secondary 200 */
@@ -524,6 +524,7 @@ link:hover {
 .hover-secondary200:hover {
   background-color: var(--secondary200) !important;
   color: var(--white);
+  stroke: var(--secondary200);
 }
 
 /* Secondary 300 */
@@ -531,6 +532,7 @@ link:hover {
 .hover-secondary300:hover {
   background-color: var(--secondary300) !important;
   color: var(--white);
+  stroke: var(--secondary300);
 }
 
 /* Secondary 400 */
@@ -538,6 +540,7 @@ link:hover {
 .hover-secondary400:hover {
   background-color: var(--secondary400) !important;
   color: var(--white);
+  stroke: var(--secondary400);
 }
 
 /* Secondary 500 */
@@ -545,6 +548,7 @@ link:hover {
 .hover-secondary500:hover {
   background-color: var(--secondary500) !important;
   color: var(--white);
+  stroke: var(--secondary500);
 }
 
 /* Secondary 600 */
@@ -552,6 +556,7 @@ link:hover {
 .hover-secondary600:hover {
   background-color: var(--secondary600) !important;
   color: var(--white);
+  stroke: var(--secondary600);
 }
 
 /* Secondary 700 */
@@ -559,6 +564,7 @@ link:hover {
 .hover-secondary700:hover {
   background-color: var(--secondary700) !important;
   color: var(--white);
+  stroke: var(--secondary700);
 }
 
 /* Secondary 800 */
@@ -566,6 +572,7 @@ link:hover {
 .hover-secondary800:hover {
   background-color: var(--secondary800) !important;
   color: var(--white);
+  stroke: var(--secondary800);
 }
 
 /* Secondary 900 */
@@ -573,72 +580,84 @@ link:hover {
 .hover-secondary900:hover {
   background-color: var(--secondary900) !important;
   color: var(--white);
+  stroke: var(--secondary900);
 }
 
 .accent,
 .hover-accent:hover {
   background-color: var(--accent) !important;
   color: var(--white);
+  stroke: var(--accent);
 }
 
 .accent50,
 .hover-accent50:hover {
   background-color: var(--accent50) !important;
   color: var(--black);
+  stroke: var(--accent50);
 }
 
 .accent100,
 .hover-accent100:hover {
   background-color: var(--accent100) !important;
   color: var(--accent900);
+  stroke: var(--accent100);
 }
 
 .accent200,
 .hover-accent200:hover {
   background-color: var(--accent200) !important;
   color: var(--accent800);
+  stroke: var(--accent200);
 }
 
 .accent300,
 .hover-accent300:hover {
   background-color: var(--accent300) !important;
   color: var(--accent700);
+  stroke: var(--accent300);
 }
 
 .accent400,
 .hover-accent400:hover {
   background-color: var(--accent400) !important;
   color: var(--white);
+  stroke: var(--accent400);
 }
 
 .accent500,
 .hover-accent500:hover {
   background-color: var(--accent500) !important;
   color: var(--white);
+  stroke: var(--accent500);
 }
 
 .accent600,
 .hover-accent600:hover {
   background-color: var(--accent600) !important;
   color: var(--white);
+  stroke: var(--accent600);
 }
 
 .accent700,
 .hover-accent700:hover {
   background-color: var(--accent700) !important;
   color: var(--white);
+  stroke: var(--accent700);
 }
 
 .accent800,
 .hover-accent800:hover {
   background-color: var(--accent800) !important;
   color: var(--white);
+  stroke: var(--accent800);
 }
 
 .accent900,
 .hover-accent900:hover {
   background-color: var(--accent900) !important;
   color: var(--white);
+  stroke: var(--accent900);
 }
 
 /* Error Color */
@@ -646,6 +665,7 @@ link:hover {
 .hover-error:hover {
   background-color: var(--error) !important;
   color: var(--white);
+  stroke: var(--error);
 }
 
 /* Error 50 */
@@ -653,6 +673,7 @@ link:hover {
 .hover-error50:hover {
   background-color: var(--error50) !important;
   color: var(--white);
+  stroke: var(--error50);
 }
 
 /* Error 100 */
@@ -660,6 +681,7 @@ link:hover {
 .hover-error100:hover {
   background-color: var(--error100) !important;
   color: var(--white);
+  stroke: var(--error100);
 }
 
 /* Error 200 */
@@ -667,6 +689,7 @@ link:hover {
 .hover-error200:hover {
   background-color: var(--error200) !important;
   color: var(--white);
+  stroke: var(--error200);
 }
 
 /* Error 300 */
@@ -674,6 +697,7 @@ link:hover {
 .hover-error300:hover {
   background-color: var(--error300) !important;
   color: var(--white);
+  stroke: var(--error300);
 }
 
 /* Error 400 */
@@ -681,6 +705,7 @@ link:hover {
 .hover-error400:hover {
   background-color: var(--error400) !important;
   color: var(--white);
+  stroke: var(--error400);
 }
 
 /* Error 500 */
@@ -688,6 +713,7 @@ link:hover {
 .hover-error500:hover {
   background-color: var(--error500) !important;
   color: var(--white);
+  stroke: var(--error500);
 }
 
 /* Error 600 */
@@ -695,6 +721,7 @@ link:hover {
 .hover-error600:hover {
   background-color: var(--error600) !important;
   color: var(--white);
+  stroke: var(--error600);
 }
 
 /* Error 700 */
@@ -702,6 +729,7 @@ link:hover {
 .hover-error700:hover {
   background-color: var(--error700) !important;
   color: var(--white);
+  stroke: var(--error700);
 }
 
 /* Error 800 */
@@ -709,6 +737,7 @@ link:hover {
 .hover-error800:hover {
   background-color: var(--error800) !important;
   color: var(--white);
+  stroke: var(--error800);
 }
 
 /* Error 900 */
@@ -716,6 +745,7 @@ link:hover {
 .hover-error900:hover {
   background-color: var(--error900) !important;
   color: var(--white);
+  stroke: var(--error900);
 }
 
 /* Success Color */
@@ -723,6 +753,7 @@ link:hover {
 .hover-success:hover {
   background-color: var(--success) !important;
   color: var(--white);
+  stroke: var(--success);
 }
 
 /* Success 50 */
@@ -730,6 +761,7 @@ link:hover {
 .hover-success50:hover {
   background-color: var(--success50) !important;
   color: var(--white);
+  stroke: var(--success50);
 }
 
 /* Success 100 */
@@ -737,6 +769,7 @@ link:hover {
 .hover-success100:hover {
   background-color: var(--success100) !important;
   color: var(--white);
+  stroke: var(--success100);
 }
 
 /* Success 200 */
@@ -744,6 +777,7 @@ link:hover {
 .hover-success200:hover {
   background-color: var(--success200) !important;
   color: var(--white);
+  stroke: var(--success200);
 }
 
 /* Success 300 */
@@ -751,6 +785,7 @@ link:hover {
 .hover-success300:hover {
   background-color: var(--success300) !important;
   color: var(--white);
+  stroke: var(--success300);
 }
 
 /* Success 400 */
@@ -758,6 +793,7 @@ link:hover {
 .hover-success400:hover {
   background-color: var(--success400) !important;
   color: var(--white);
+  stroke: var(--success400);
 }
 
 /* Success 500 */
@@ -765,6 +801,7 @@ link:hover {
 .hover-success500:hover {
   background-color: var(--success500) !important;
   color: var(--white);
+  stroke: var(--success500);
 }
 
 /* Success 600 */
@@ -772,6 +809,7 @@ link:hover {
 .hover-success600:hover {
   background-color: var(--success600) !important;
   color: var(--white);
+  stroke: var(--success600);
 }
 
 /* Success 700 */
@@ -779,6 +817,7 @@ link:hover {
 .hover-success700:hover {
   background-color: var(--success700) !important;
   color: var(--white);
+  stroke: var(--success700);
 }
 
 /* Success 800 */
@@ -786,6 +825,7 @@ link:hover {
 .hover-success800:hover {
   background-color: var(--success800) !important;
   color: var(--white);
+  stroke: var(--success800);
 }
 
 /* Success 900 */
@@ -793,6 +833,7 @@ link:hover {
 .hover-success900:hover {
   background-color: var(--success900) !important;
   color: var(--white);
+  stroke: var(--success900);
 }
 
 /* Warning Color */
@@ -800,6 +841,7 @@ link:hover {
 .hover-warning:hover {
   background-color: var(--warning) !important;
   color: var(--white);
+  stroke: var(--warning);
 }
 
 /* Warning 50 */
@@ -807,6 +849,7 @@ link:hover {
 .hover-warning50:hover {
   background-color: var(--warning50) !important;
   color: var(--white);
+  stroke: var(--warning50);
 }
 
 /* Warning 100 */
@@ -814,6 +857,7 @@ link:hover {
 .hover-warning100:hover {
   background-color: var(--warning100) !important;
   color: var(--white);
+  stroke: var(--warning100);
 }
 
 /* Warning 200 */
@@ -821,6 +865,7 @@ link:hover {
 .hover-warning200:hover {
   background-color: var(--warning200) !important;
   color: var(--white);
+  stroke: var(--warning200);
 }
 
 /* Warning 300 */
@@ -828,6 +873,7 @@ link:hover {
 .hover-warning300:hover {
   background-color: var(--warning300) !important;
   color: var(--white);
+  stroke: var(--warning300);
 }
 
 /* Warning 400 */
@@ -835,6 +881,7 @@ link:hover {
 .hover-warning400:hover {
   background-color: var(--warning400) !important;
   color: var(--white);
+  stroke: var(--warning400);
 }
 
 /* Warning 500 */
@@ -842,6 +889,7 @@ link:hover {
 .hover-warning500:hover {
   background-color: var(--warning500) !important;
   color: var(--white);
+  stroke: var(--warning500);
 }
 
 /* Warning 600 */
@@ -849,6 +897,7 @@ link:hover {
 .hover-warning600:hover {
   background-color: var(--warning600) !important;
   color: var(--white);
+  stroke: var(--warning600);
 }
 
 /* Warning 700 */
@@ -856,6 +905,7 @@ link:hover {
 .hover-warning700:hover {
   background-color: var(--warning700) !important;
   color: var(--white);
+  stroke: var(--warning700);
 }
 
 /* Warning 800 */
@@ -863,6 +913,7 @@ link:hover {
 .hover-warning800:hover {
   background-color: var(--warning800) !important;
   color: var(--white);
+  stroke: var(--warning800);
 }
 
 /* Warning 900 */
@@ -870,6 +921,7 @@ link:hover {
 .hover-warning900:hover {
   background-color: var(--warning900) !important;
   color: var(--white);
+  stroke: var(--warning900);
 }
 
 /* Muted Color */
@@ -877,6 +929,7 @@ link:hover {
 .hover-muted:hover {
   background-color: var(--muted) !important;
   color: var(--white);
+  stroke: var(--muted);
 }
 
 /* Muted 50 */
@@ -884,6 +937,7 @@ link:hover {
 .hover-muted50:hover {
   background-color: var(--muted50) !important;
   color: var(--white);
+  stroke: var(--muted50);
 }
 
 /* Muted 100 */
@@ -891,6 +945,7 @@ link:hover {
 .hover-muted100:hover {
   background-color: var(--muted100) !important;
   color: var(--white);
+  stroke: var(--muted100);
 }
 
 /* Muted 200 */
@@ -898,6 +953,7 @@ link:hover {
 .hover-muted200:hover {
   background-color: var(--muted200) !important;
   color: var(--white);
+  stroke: var(--muted200);
 }
 
 /* Muted 300 */
@@ -905,6 +961,7 @@ link:hover {
 .hover-muted300:hover {
   background-color: var(--muted300) !important;
   color: var(--white);
+  stroke: var(--muted300);
 }
 
 /* Muted 400 */
@@ -912,6 +969,7 @@ link:hover {
 .hover-muted400:hover {
   background-color: var(--muted400) !important;
   color: var(--white);
+  stroke: var(--muted400);
 }
 
 /* Muted 500 */
@@ -919,6 +977,7 @@ link:hover {
 .hover-muted500:hover {
   background-color: var(--muted500) !important;
   color: var(--white);
+  stroke: var(--muted500);
 }
 
 /* Muted 600 */
@@ -926,6 +985,7 @@ link:hover {
 .hover-muted600:hover {
   background-color: var(--muted600) !important;
   color: var(--white);
+  stroke: var(--muted600);
 }
 
 /* Muted 700 */
@@ -933,6 +993,7 @@ link:hover {
 .hover-muted700:hover {
   background-color: var(--muted700) !important;
   color: var(--white);
+  stroke: var(--muted700);
 }
 
 /* Muted 800 */
@@ -940,6 +1001,7 @@ link:hover {
 .hover-muted800:hover {
   background-color: var(--muted800) !important;
   color: var(--white);
+  stroke: var(--muted800);
 }
 
 /* Muted 900 */
@@ -947,6 +1009,7 @@ link:hover {
 .hover-muted900:hover {
   background-color: var(--muted900) !important;
   color: var(--white);
+  stroke: var(--muted900);
 }
 
 /* Info Color */
@@ -954,6 +1017,7 @@ link:hover {
 .hover-info:hover {
   background-color: var(--info) !important;
   color: var(--white);
+  stroke: var(--info);
 }
 
 /* Info 50 */
@@ -961,6 +1025,7 @@ link:hover {
 .hover-info50:hover {
   background-color: var(--info50) !important;
   color: var(--white);
+  stroke: var(--info50);
 }
 
 /* Info 100 */
@@ -968,6 +1033,7 @@ link:hover {
 .hover-info100:hover {
   background-color: var(--info100) !important;
   color: var(--white);
+  stroke: var(--info100);
 }
 
 /* Info 200 */
@@ -975,6 +1041,7 @@ link:hover {
 .hover-info200:hover {
   background-color: var(--info200) !important;
   color: var(--white);
+  stroke: var(--info200);
 }
 
 /* Info 300 */
@@ -982,6 +1049,7 @@ link:hover {
 .hover-info300:hover {
   background-color: var(--info300) !important;
   color: var(--white);
+  stroke: var(--info300);
 }
 
 /* Info 400 */
@@ -989,6 +1057,7 @@ link:hover {
 .hover-info400:hover {
   background-color: var(--info400) !important;
   color: var(--white);
+  stroke: var(--info400);
 }
 
 /* Info 500 */
@@ -996,6 +1065,7 @@ link:hover {
 .hover-info500:hover {
   background-color: var(--info500) !important;
   color: var(--white);
+  stroke: var(--info500);
 }
 
 /* Info 600 */
@@ -1003,6 +1073,7 @@ link:hover {
 .hover-info600:hover {
   background-color: var(--info600) !important;
   color: var(--white);
+  stroke: var(--info600);
 }
 
 /* Info 700 */
@@ -1010,6 +1081,7 @@ link:hover {
 .hover-info700:hover {
   background-color: var(--info700) !important;
   color: var(--white);
+  stroke: var(--info700);
 }
 
 /* Info 800 */
@@ -1017,6 +1089,7 @@ link:hover {
 .hover-info800:hover {
   background-color: var(--info800) !important;
   color: var(--white);
+  stroke: var(--info800);
 }
 
 /* Info 900 */
@@ -1024,160 +1097,90 @@ link:hover {
 .hover-info900:hover {
   background-color: var(--info900) !important;
   color: var(--white);
+  stroke: var(--info900);
 }
 
-/* Light Color */
-.light,
-.hover-light:hover {
-  background-color: var(--light) !important;
-  color: var(--white);
-}
-
-/* Light 50 */
-.light50,
-.hover-light50:hover {
-  background-color: var(--light50) !important;
-  color: var(--white);
-}
-
-/* Light 100 */
-.light100,
-.hover-light100:hover {
-  background-color: var(--light100) !important;
-  color: var(--white);
-}
-
-/* Light 200 */
-.light200,
-.hover-light200:hover {
-  background-color: var(--light200) !important;
-  color: var(--white);
-}
-
-/* Light 300 */
-.light300,
-.hover-light300:hover {
-  background-color: var(--light300) !important;
-  color: var(--white);
-}
-
-/* Light 400 */
-.light400,
-.hover-light400:hover {
-  background-color: var(--light400) !important;
-  color: var(--white);
-}
-
-/* Light 500 */
-.light500,
-.hover-light500:hover {
-  background-color: var(--light500) !important;
-  color: var(--white);
-}
-
-/* Light 600 */
-.light600,
-.hover-light600:hover {
-  background-color: var(--light600) !important;
-  color: var(--white);
-}
-
-/* Light 700 */
-.light700,
-.hover-light700:hover {
-  background-color: var(--light700) !important;
-  color: var(--white);
-}
-
-/* Light 800 */
-.light800,
-.hover-light800:hover {
-  background-color: var(--light800) !important;
-  color: var(--white);
-}
-
-/* Light 900 */
-.light900,
-.hover-light900:hover {
-  background-color: var(--light900) !important;
-  color: var(--white);
-}
-
-
 /* Dark Colors */
 .dark,
 .hover-dark:hover {
   background-color: var(--dark) !important;
   color: var(--white);
+  stroke: var(--dark);
 }
 
 .dark50,
 .hover-dark50:hover {
   background-color: var(--dark50) !important;
   color: var(--white);
+  stroke: var(--dark50);
 }
 
 .dark100,
 .hover-dark100:hover {
   background-color: var(--dark100) !important;
   color: var(--white);
+  stroke: var(--dark100);
 }
 
 .dark200,
 .hover-dark200:hover {
   background-color: var(--dark200) !important;
   color: var(--white);
+  stroke: var(--dark200);
 }
 
 .dark300,
 .hover-dark300:hover {
   background-color: var(--dark300) !important;
   color: var(--white);
+  stroke: var(--dark300);
 }
 
 .dark400,
 .hover-dark400:hover {
   background-color: var(--dark400) !important;
-  color: var(--white);
+  stroke: var(--dark400);
 }
 
 .dark500,
 .hover-dark500:hover {
   background-color: var(--dark500) !important;
-  color: var(--white);
+  stroke: var(--dark500);
 }
 
 .dark600,
 .hover-dark600:hover {
   background-color: var(--dark600) !important;
-  color: var(--white);
+  stroke: var(--dark600);
 }
 
 .dark700,
 .hover-dark700:hover {
   background-color: var(--dark700) !important;
-  color: var(--white);
+  stroke: var(--dark700);
 }
 .dark800,
 .hover-dark800:hover {
   background-color: var(--dark800) !important;
-  color: var(--white);
+  stroke: var(--dark800);
 }
 
 .dark900,
 .hover-dark900:hover {
   background-color: var(--dark900) !important;
-  color: var(--white);
+  stroke: var(--dark900);
 }
 
 .black,
 .hover-black:hover {
   background-color: var(--black) !important;
   color: var(--white);
+  stroke: var(--black);
 }
 .white,
 .hover-white:hover {
   background-color: var(--white) !important;
+  stroke: var(--white);
 }
 
 
@@ -1228,6 +1231,313 @@ link:hover {
   border: 1px solid var(--dangerLight) !important;
 }
 
+
+/* outlined */
+.outline-primary {
+  border: 1px solid var(--primary) !important;
+}
+.outline-primary50 {
+  border: 1px solid var(--primary50) !important;
+}
+.outline-primary100 {
+  border: 1px solid var(--primary100) !important;
+}
+.outline-primary200 {
+  border: 1px solid var(--primary200) !important;
+}
+.outline-primary300 {
+  border: 1px solid var(--primary300) !important;
+}
+.outline-primary400 {
+  border: 1px solid var(--primary400) !important;
+}
+.outline-primary500 {
+  border: 1px solid var(--primary500) !important;
+}
+.outline-primary600 {
+  border: 1px solid var(--primary600) !important;
+}
+.outline-primary700 {
+  border: 1px solid var(--primary700) !important;
+}
+.outline-primary800 {
+  border: 1px solid var(--primary800) !important;
+}
+.outline-primary900 {
+  border: 1px solid var(--primary900) !important;
+}
+.outline-secondary {
+  border: 1px solid var(--secondary) !important;
+}
+.outline-secondary50 {
+  border: 1px solid var(--secondary50) !important;
+}
+.outline-secondary100 {
+  border: 1px solid var(--secondary100) !important;
+}
+.outline-secondary200 {
+  border: 1px solid var(--secondary200) !important;
+}
+.outline-secondary300 {
+  border: 1px solid var(--secondary300) !important;
+}
+.outline-secondary400 {
+  border: 1px solid var(--secondary400) !important;
+}
+.outline-secondary500 {
+  border: 1px solid var(--secondary500) !important;
+}
+.outline-secondary600 {
+  border: 1px solid var(--secondary600) !important;
+}
+.outline-secondary700 {
+  border: 1px solid var(--secondary700) !important;
+}
+.outline-secondary800 {
+  border: 1px solid var(--secondary800) !important;
+}
+.outline-secondary900 {
+  border: 1px solid var(--secondary900) !important;
+}
+
+.outline-accent {
+  border: 1px solid var(--accent) !important;
+}
+.outline-accent50 {
+  border: 1px solid var(--accent50) !important;
+}
+.outline-accent100 {
+  border: 1px solid var(--accent100) !important;
+}
+.outline-accent200 {
+  border: 1px solid var(--accent200) !important;
+}
+.outline-accent300 {
+  border: 1px solid var(--accent300) !important;
+}
+.outline-accent400 {
+  border: 1px solid var(--accent400) !important;
+}
+.outline-accent500 {
+  border: 1px solid var(--accent500) !important;
+}
+.outline-accent600 {
+  border: 1px solid var(--accent600) !important;
+}
+.outline-accent700 {
+  border: 1px solid var(--accent700) !important;
+}
+.outline-accent800 {
+  border: 1px solid var(--accent800) !important;
+}
+.outline-accent900 {
+  border: 1px solid var(--accent900) !important;
+}
+.outline-dark {
+  border: 1px solid var(--dark) !important;
+}
+.outline-dark50 {
+  border: 1px solid var(--dark50) !important;
+}
+.outline-dark100 {
+  border: 1px solid var(--dark100) !important;
+}
+.outline-dark200 {
+  border: 1px solid var(--dark200) !important;
+}
+.outline-dark300 {
+  border: 1px solid var(--dark300) !important;
+}
+.outline-dark400 {
+  border: 1px solid var(--dark400) !important;
+}
+.outline-dark500 {
+  border: 1px solid var(--dark500) !important;
+}
+.outline-dark600 {
+  border: 1px solid var(--dark600) !important;
+}
+.outline-dark700 {
+  border: 1px solid var(--dark700) !important;
+}
+.outline-dark800 {
+  border: 1px solid var(--dark800) !important;
+}
+.outline-dark900 {
+  border: 1px solid var(--dark900) !important;
+}
+
+.outline-muted {
+  border: 1px solid var(--muted) !important;
+}
+.outline-muted50 {
+  border: 1px solid var(--muted50) !important;
+}
+.outline-muted100 {
+  border: 1px solid var(--muted100) !important;
+}
+.outline-muted200 {
+  border: 1px solid var(--muted200) !important;
+}
+.outline-muted300 {
+  border: 1px solid var(--muted300) !important;
+}
+.outline-muted400 {
+  border: 1px solid var(--muted400) !important;
+}
+.outline-muted500 {
+  border: 1px solid var(--muted500) !important;
+}
+.outline-muted600 {
+  border: 1px solid var(--muted600) !important;
+}
+.outline-muted700 {
+  border: 1px solid var(--muted700) !important;
+}
+.outline-muted800 {
+  border: 1px solid var(--muted800) !important;
+}
+.outline-muted900 {
+  border: 1px solid var(--muted900) !important;
+}
+
+.outline-error {
+  border: 1px solid var(--error) !important;
+}
+.outline-error50 {
+  border: 1px solid var(--error50) !important;
+}
+.outline-error100 {
+  border: 1px solid var(--error100) !important;
+}
+.outline-error200 {
+  border: 1px solid var(--error200) !important;
+}
+.outline-error300 {
+  border: 1px solid var(--error300) !important;
+}
+.outline-error400 {
+  border: 1px solid var(--error400) !important;
+}
+.outline-error500 {
+  border: 1px solid var(--error500) !important;
+}
+.outline-error600 {
+  border: 1px solid var(--error600) !important;
+}
+.outline-error700 {
+  border: 1px solid var(--error700) !important;
+}
+.outline-error800 {
+  border: 1px solid var(--error800) !important;
+}
+.outline-error900 {
+  border: 1px solid var(--error900) !important;
+}
+
+.outline-success {
+  border: 1px solid var(--success) !important;
+}
+.outline-success50 {
+  border: 1px solid var(--success50) !important;
+}
+.outline-success100 {
+  border: 1px solid var(--success100) !important;
+}
+.outline-success200 {
+  border: 1px solid var(--success200) !important;
+}
+.outline-success300 {
+  border: 1px solid var(--success300) !important;
+}
+.outline-success400 {
+  border: 1px solid var(--success400) !important;
+}
+.outline-success500 {
+  border: 1px solid var(--success500) !important;
+}
+.outline-success600 {
+  border: 1px solid var(--success600) !important;
+}
+.outline-success700 {
+  border: 1px solid var(--success700) !important;
+}
+.outline-success800 {
+  border: 1px solid var(--success800) !important;
+}
+.outline-success900 {
+  border: 1px solid var(--success900) !important;
+}
+
+.outline-warning {
+  border: 1px solid var(--warning) !important;
+}
+.outline-warning50 {
+  border: 1px solid var(--warning50) !important;
+}
+.outline-warning100 {
+  border: 1px solid var(--warning100) !important;
+}
+.outline-warning200 {
+  border: 1px solid var(--warning200) !important;
+}
+.outline-warning300 {
+  border: 1px solid var(--warning300) !important;
+}
+.outline-warning400 {
+  border: 1px solid var(--warning400) !important;
+}
+.outline-warning500 {
+  border: 1px solid var(--warning500) !important;
+}
+.outline-warning600 {
+  border: 1px solid var(--warning600) !important;
+}
+.outline-warning700 {
+  border: 1px solid var(--warning700) !important;
+}
+.outline-warning800 {
+  border: 1px solid var(--warning800) !important;
+}
+.outline-warning900 {
+  border: 1px solid var(--warning900) !important;
+}
+
+.outline-info {
+  border: 1px solid var(--info) !important;
+}
+.outline-info50 {
+  border: 1px solid var(--info50) !important;
+}
+.outline-info100 {
+  border: 1px solid var(--info100) !important;
+}
+.outline-info200 {
+  border: 1px solid var(--info200) !important;
+}
+.outline-info300 {
+  border: 1px solid var(--info300) !important;
+}
+.outline-info400 {
+  border: 1px solid var(--info400) !important;
+}
+.outline-info500 {
+  border: 1px solid var(--info500) !important;
+}
+.outline-info600 {
+  border: 1px solid var(--info600) !important;
+}
+.outline-info700 {
+  border: 1px solid var(--info700) !important;
+}
+.outline-info800 {
+  border: 1px solid var(--info800) !important;
+}
+.outline-info900 {
+  border: 1px solid var(--info900) !important;
+}
+
+
 /* text color */
 .text-primary,
 .hover-text-primary:hover {
@@ -1873,6 +2183,8 @@ body {
   font-size: var(--text-base);
   line-height: 1.5rem;
   letter-spacing: normal;
+  background-color: var(--page-bg) !important;
+  color: var(--text-color) !important;
 }
 
 /* Font utilities with matching line heights */
@@ -2442,15 +2754,16 @@ h6, .h6 {
 /*buttons*/
 .button {
   border: none;
-  padding:0.6rem 1rem;
+  padding:0.7rem 1rem;
   background-color: inherit;
   border-radius: var(--InputButtonBorderRadius);
-transition: all 0.5s linear; 
+  transition: all 0.5s linear; 
   cursor: pointer;
   font-size: var(--minifiedFontSize);
   position: relative;
   overflow: hidden;
-  font-weight: bold;
+  font-weight: 600;
+  line-height: 1 !important;
 }
 
 
@@ -2474,8 +2787,11 @@ transition: all 0.5s linear;
   transform: scale(2);
   opacity: 1;
   transition: 0s;
+
 }
 
+
+
 .button-fill {
   background-color: transparent;
   position: relative;
@@ -2599,6 +2915,7 @@ transition: all 0.5s linear;
   transition: 0.3s;
   background-color: var(--raiseThemes);
   backdrop-filter: blur(0.2rem) ;
+  color: var(--text-color);
 }
 .card.xl{
   box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px !important;
@@ -2790,6 +3107,7 @@ transition: all 0.5s linear;
   width: fit-content;
   height: fit-content;
   min-height: 2rem; 
+  font-weight: 500;
 
 }
 .alert.top-success{
@@ -2804,7 +3122,7 @@ transition: all 0.5s linear;
   border-top: 0.2rem solid var(--info);
   background-color: var(--raiseThemes);
 }
-.alert.top-danger{
+.alert.top-error{
   border-top: 0.2rem solid var(--error);
   background-color: var(--raiseThemes);
 }
@@ -3040,6 +3358,7 @@ transition: all 0.5s linear;
   border-bottom: var(--inputBorder) solid  var(--borderColor);
   color: var(--bd-color); 
   font-size: var(--minifiedFontSize);
+  background-color: transparent;
 }
 .smallInput {
   font-size: var(--smallFont);
@@ -3144,9 +3463,9 @@ input , select{height: var(--inputHeight);}
 
 .input.borderedInput:focus {
   outline: var(--input_outline_size) solid var(--primary);
-  box-shadow: 0 0 0 4px var(--primary200); /* Light glow */
-  animation: pulseOutline 1.5s infinite;
+  box-shadow: 0 0 0 3px var(--primary200); 
 }
+
 .input.borderless {
   border: none;
 }
@@ -3403,7 +3722,7 @@ thead{
   border-top: 0.1rem solid var(--borderColor);
 } */
 .table.stripped tr:nth-child(even) {
-  background-color: var(--dark800); 
+  background-color: var(--lighter); 
 }
 .table tr,
 th,
@@ -3418,13 +3737,10 @@ th {
 .table.hoverableTr  tr:hover {
   filter: var(--hoverable);
 }
-.table.light {
-  background-color: var(--light);
-  color: var(--lightThemeDark);
-}
+
 .table.dark {
-  background-color: var(--lightThemeDark);
-  color: var(--light);
+  background-color: var(--dark);
+  color: var(--white);
 }
 
 .pagination{
@@ -3720,7 +4036,6 @@ filter: brightness(90%);
 
 
 
-/* Progress bars */
 .progressBar {
   background-color: var(--light100);
   position: relative;
@@ -3738,7 +4053,7 @@ filter: brightness(90%);
   overflow: hidden;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   transition: 0.2s ease-in-out;
   background-image: linear-gradient(
     45deg,
@@ -3750,23 +4065,29 @@ filter: brightness(90%);
     transparent 75%,
     transparent
   );
-}
-.progressBar.lined {
-  background-color: transparent !important;
-  font-size: var(--smallerFont);
+  color: var(--darkText);
   font-weight: bold;
-  overflow: hidden;
+  padding-left: 0.5rem;
 }
-.linedProgress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 0.2rem;
-  text-align: right;
-  /* padding: 0 1rem; */
-  transition: 0.2s ease-in-out;
-  border-radius: 2rem;
+
+.circularProgressWrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.circularProgress {
+  transform: rotate(-90deg);
 }
+
+.circularProgressCircle {
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.4s ease-in-out;
+}
+
+
+
+
 /* affects rounded progress */
 .rounded{
   border-radius: 500rem;
@@ -3810,73 +4131,109 @@ filter: brightness(90%);
 }
 
 .tooltip .tip {
-  display: none;
-  min-width: 100px;
-  max-width: 300px;
-  background-color: var(--dark200);
+  display: block;
+  background-color: var(--dark100);
   color: var(--dark900);
   text-align: center;
   border-radius: var(--DefaultBorderRadius);
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.5rem !important;
+  font-weight: 600 !important;
   position: absolute;
-  z-index: 5;
-  transition:  0.3s;
+  z-index: 10;
+ transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   font-size: var(--smallFont) !important;
+  line-height: normal !important;
   box-shadow: var(--raised);
+  width: max-content;
+  white-space: nowrap; /* prevents line breaks */
+  opacity: 0;
+  pointer-events: none;
+}
+
+
+/* Show on hover */
+.tooltip:hover .tip {
+ opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* Arrow base */
+.tooltip .tip::after {
+  content: "";
+  position: absolute;
+  border-style: solid;
 }
+
+/* Top Tooltip */
 .tooltip .tip-top {
   bottom: 125%;
-  left: 0;
-  /* margin-left: -60px; */
+  left: 50%;
+  transform: translateX(-50%);
 }
-
-.tooltip:hover .tip-top {
-  display: inline-block;
+.tooltip .tip-top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0 6px;
+  border-color: var(--dark100) transparent transparent transparent;
 }
 
+/* Bottom Tooltip */
 .tooltip .tip-bottom {
-  top: 120%;
-  left:0;
-  /* margin-left: -60px; */
+  top: 125%;
+  left: 50%;
+  transform: translateX(-50%);
 }
-
-.tooltip:hover .tip-bottom {
-  display: inline-block;
+.tooltip .tip-bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent var(--dark100) transparent;
 }
 
+/* Right Tooltip */
 .tooltip .tip-right {
-  top: -5px;
+  top: 50%;
   left: 105%;
-  font-size: small;
+  transform: translateY(-50%);
 }
-
-.tooltip:hover .tip-right {
-  display: inline-block;
+.tooltip .tip-right::after {
+  top: 50%;
+  left: -6px;
+  transform: translateY(-50%);
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--dark100) transparent transparent;
 }
 
+/* Left Tooltip */
 .tooltip .tip-left {
-  /* Position the tooltip */
-  position: absolute;
-  z-index: 1;
-  top: -5px;
+  top: 50%;
   right: 105%;
+  transform: translateY(-50%);
 }
-.tooltip:hover .tip-left {
-  display: inline-block;
+.tooltip .tip-left::after {
+  top: 50%;
+  right: -6px;
+  transform: translateY(-50%);
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--dark100);
 }
-
 .snackbar {
   position: fixed !important;
-  background-color: var(--dark200);
+  background-color: var(--dark100);
   color: var(--dark900);
   border-radius: var(--DefaultBorderRadius);
   max-width: 90vw;
   width: fit-content;
   max-height: 2.5rem;
+  font-weight: 600;
+  line-height: normal;
   height: 100%;
   box-shadow: var(--raised);
   z-index: var(--snackBarZindex);
-  padding: 0.3rem;
+  padding: 0.3rem 0.5rem;
   font-size: var(--minifiedFontSize);
 }