sccoreui 2.2.8 → 2.3.0

package/dist/assets/sccoreui.css

@@ -22,6 +22,7 @@
   --surface-700: #616161;
   --surface-800: #424242;
   --surface-900: #212121;
+  --gray-25:#fcfcfd;
   --gray-50: #f9fafb;
   --gray-100: #f2f4f7;
   --gray-200: #eaecf0;
@@ -139,6 +140,7 @@ a {
 }
 
 :root {
+  --blue-25:#f1efff;
   --blue-50: #e3dfff;
   --blue-100: #d5cfff;
   --blue-200: #c7bfff;
@@ -149,6 +151,7 @@ a {
   --blue-700: #3b1eff;
   --blue-800: #2504ff;
   --blue-900: #1f00ea;
+  --green-25:#f6fef9;
   --green-50: #ecfdf3;
   --green-100: #d1fadf;
   --green-200: #a6f4c5;
@@ -159,6 +162,7 @@ a {
   --green-700: #027a48;
   --green-800: #05603a;
   --green-900: #054f31;
+  --yellow-25:#fff4ef;
   --yellow-50: #fefbf3;
   --yellow-100: #faedc4;
   --yellow-200: #f6de95;
@@ -169,6 +173,7 @@ a {
   --yellow-700: #a47d06;
   --yellow-800: #816204;
   --yellow-900: #5e4803;
+  --cyan-25:#e5f3ff;
   --cyan-50: #d5ebff;
   --cyan-100: #bfe1ff;
   --cyan-200: #aad8ff;
@@ -189,6 +194,7 @@ a {
   --pink-700: #a5326b;
   --pink-800: #822854;
   --pink-900: #5e1d3d;
+  --indigo-25:#f1efff;
   --indigo-50: #e3dfff;
   --indigo-100: #d5cfff;
   --indigo-200: #c7bfff;
@@ -209,6 +215,7 @@ a {
   --teal-700: #0e8174;
   --teal-800: #0b655b;
   --teal-900: #084a42;
+  --orange-25:#fffcf5;
   --orange-50: #fffaeb;
   --orange-100: #fef0c7;
   --orange-200: #fedf89;
@@ -239,6 +246,7 @@ a {
   --purple-700: #763cad;
   --purple-800: #5c2f88;
   --purple-900: #432263;
+  --red-25:#fffbfa;
   --red-50: #fef3f2;
   --red-100: #fee4e2;
   --red-200: #fecdca;
@@ -249,6 +257,7 @@ a {
   --red-700: #b42318;
   --red-800: #912018;
   --red-900: #7a271a;
+  --primary-25:#f5f6fd;
   --primary-50: #e2e5fa;
   --primary-100: #ced4f6;
   --primary-200: #a8b2ef;
@@ -766,7 +775,8 @@ a {
   line-height: 20px;
   user-select: none;
   -webkit-user-select: none;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+    box-shadow 0.2s;
 }
 
 .p-checkbox-group:not(.p-group-disabled) .p-header-highlight {
@@ -776,7 +786,9 @@ a {
   color: var(--primary-800) !important;
 }
 
-.p-checkbox-group:not(.p-group-disabled):not(.p-group-highlight):has(.p-header-highlight) {
+.p-checkbox-group:not(.p-group-disabled):not(.p-group-highlight):has(
+    .p-header-highlight
+  ) {
   border: 1px solid var(--primary-600);
 }
 
@@ -806,7 +818,10 @@ a {
   background: var(--primary-600);
 }
 
-.p-checkbox-group:not(.p-group-disabled):not(.p-group-highlight):has(.p-header-highlight) #separator {
+.p-checkbox-group:not(.p-group-disabled):not(.p-group-highlight):has(
+    .p-header-highlight
+  )
+  #separator {
   background: var(--primary-600);
 }
 
@@ -826,10 +841,14 @@ a {
   color: var(--primary-700);
 }
 
-.p-checkbox-group:not(.p-group-disabled).p-group-highlight .group-text span:first-child {
+.p-checkbox-group:not(.p-group-disabled).p-group-highlight
+  .group-text
+  span:first-child {
   color: var(--primary-800) !important;
 }
-.p-checkbox-group:not(.p-group-disabled).p-group-highlight .group-text span:last-child {
+.p-checkbox-group:not(.p-group-disabled).p-group-highlight
+  .group-text
+  span:last-child {
   color: var(--primary-700) !important;
 }
 
@@ -1356,16 +1375,13 @@ a {
 }
 /* #################################################### Toggle Switch CSS changes START ################################################# */
 .p-inputswitch {
-  width: 2.25rem;
-  height: 1.25rem;
-}
-
-.p-inputswitch-dark {
   --default-unchecked-bg: var(--gray-100);
   --default-checked-bg: var(--primary-600);
   --hover-unchecked-bg: var(--gray-200);
   --hover-checked-bg: var(--primary-700);
   --focus-unchecked-bg: var(--gray-50);
+  width: 2.25rem;
+  height: 1.25rem;
 }
 
 .p-inputswitch-light {
@@ -1389,7 +1405,8 @@ a {
   left: 1px;
   top: 1px;
   border-radius: 50%;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
+  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1),
+    0px 1px 2px rgba(16, 24, 40, 0.06);
   transition-duration: 0.2s;
 }
 .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
@@ -2080,7 +2097,7 @@ a {
   height: 0.286rem;
 }
 .p-slider.p-slider-horizontal .p-slider-handle {
-  margin-top: -0.5715rem;
+  margin-top: -0.75rem;
   margin-left: -0.5715rem;
 }
 .p-slider.p-slider-vertical {
@@ -2091,10 +2108,10 @@ a {
   margin-bottom: -0.5715rem;
 }
 .p-slider .p-slider-handle {
-  height: 1.143rem;
-  width: 1.143rem;
+  height: 1.5rem;
+  width: 1.5rem;
   background: #ffffff;
-  border: 2px solid #6366f1;
+  border: 1.5px solid var(--primary-500);
   border-radius: 50%;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s,
     box-shadow 0.2s;
@@ -2105,11 +2122,11 @@ a {
   box-shadow: 0 0 0 0.2rem #c7d2fe;
 }
 .p-slider .p-slider-range {
-  background: #6366f1;
+  background: var(--primary-500);
 }
 .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background: #6366f1;
-  border-color: #6366f1;
+  background: var(--primary-500);
+  border-color: var(--primary-500);
 }
 
 .p-treeselect {
@@ -2283,47 +2300,47 @@ a {
 .p-togglebutton.p-button.p-invalid > .p-button {
   border-color: var(--red-300);
 }
+/* ##################################### Basic Button CSS changes Start #################################################### */
 
+/* Default Button Classes */
 .p-button {
   color: #ffffff;
   background: var(--primary-500);
-  line-height: 0px !important;
-  height: 44px !important;
-  padding: 10px 18px;
-  font-size: 14px;
+  line-height: 20px;
+  height: 36px;
+  width: auto;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s,
     box-shadow 0.2s;
   border-radius: 8px;
-  border: none;
-  width: auto;
-}
-
-.p-primary-50 {
-  background-color: #e2e5fa;
-  color: #162578;
+  border: 1px solid var(--primary-500);
 }
 .p-button:enabled:hover,
 .p-button:not(button):not(a):not(.p-disabled):hover {
   background: var(--primary-700);
   color: #ffffff;
-  border-color: var(--gray-900);
 }
 .p-button:enabled:active,
 .p-button:not(button):not(a):not(.p-disabled):active {
-  /* background: #4338CA; */
+  background: var(--primary-700);
   color: #ffffff;
-  /* border-color: var(--gray-900); */
 }
+.p-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--primary-100);
+  border: 1px solid var(--primary-600);
+}
+
+/* Outlined Button Classes */
 .p-button.p-button-outlined {
-  background-color: transparent;
-  color: var(--gray-900);
-  border: 1px solid var(--gray-900);
+  background: #ffffff;
+  color: var(--gray-700);
+  border: 1px solid var(--gray-300);
 }
 .p-button.p-button-outlined:enabled:hover,
 .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
-  background: #fff;
-  color: var(--gray-900);
-  /* border: 1px solid var(--gray-900); */
+  background: var(--gray-50);
+  color: var(--gray-800);
 }
 .p-button.p-button-outlined:enabled:active,
 .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active {
@@ -2331,63 +2348,41 @@ a {
   color: var(--gray-900);
   border: 1px solid var(--gray-900);
 }
-.p-button.p-button-outlined.p-button-plain {
-  color: #6c757d;
-  border-color: #6c757d;
-}
-.p-button.p-button-outlined.p-button-plain:enabled:hover,
-.p-button.p-button-outlined.p-button-plain:not(button):not(a):not(
-    .p-disabled
-  ):hover {
-  background: #e9ecef;
-  color: #6c757d;
-}
-.p-button.p-button-outlined.p-button-plain:enabled:active,
-.p-button.p-button-outlined.p-button-plain:not(button):not(a):not(
-    .p-disabled
-  ):active {
-  background: #dee2e6;
-  color: #6c757d;
+
+.p-button.p-button-outlined:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  background: #FFFFFF;
+border: 1px solid var(--gray-300);
+box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 }
+
+/* Button with No Background and No Outline */
 .p-button.p-button-text {
   background-color: transparent;
-  color: #6366f1;
+  color: var(--gray-600);
   border-color: transparent;
 }
 .p-button.p-button-text:enabled:hover,
 .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(99, 102, 241, 0.04);
-  color: #6366f1;
+  background: var(--gray-50);
+  color: var(--gray-700);
   border-color: transparent;
 }
 .p-button.p-button-text:enabled:active,
 .p-button.p-button-text:not(button):not(a):not(.p-disabled):active {
-  background: rgba(99, 102, 241, 0.16);
-  color: #6366f1;
+  background: var(--gray-50);
+  color: var(--gray-700);
   border-color: transparent;
 }
-.p-button.p-button-text.p-button-plain {
-  color: #6c757d;
-}
-.p-button.p-button-text.p-button-plain:enabled:hover,
-.p-button.p-button-text.p-button-plain:not(button):not(a):not(
-    .p-disabled
-  ):hover {
-  background: #e9ecef;
-  color: #6c757d;
-}
-.p-button.p-button-text.p-button-plain:enabled:active,
-.p-button.p-button-text.p-button-plain:not(button):not(a):not(
-    .p-disabled
-  ):active {
-  background: #dee2e6;
-  color: #6c757d;
-}
-.p-button:focus {
+
+.p-button.p-button-text:focus {
   outline: 0 none;
   outline-offset: 0;
-  /* box-shadow: 0 0 0 0.2rem #C7D2FE; */
+  background: transparent;
+  border-color: transparent;
 }
+
 .p-button .p-button-label {
   transition-duration: 0.2s;
 }
@@ -2419,8 +2414,8 @@ a {
   border-radius: 2rem;
 }
 .p-button.p-button-icon-only {
-  width: 3rem;
-  padding: 0.75rem 0;
+  width: 2.25rem;
+  padding: 8px;
 }
 .p-button.p-button-icon-only .p-button-icon-left,
 .p-button.p-button-icon-only .p-button-icon-right {
@@ -2509,39 +2504,39 @@ a {
 .p-buttonset.p-button-secondary > .p-button,
 .p-splitbutton.p-button-secondary > .p-button,
 .p-fileupload-choose.p-button-secondary {
-  color: #ffffff;
-  background: #64748b;
-  border: 1px solid #64748b;
+  color: var(--primary-500);
+  background: var(--primary-50);
+  border: 1px solid var(--primary-50);
 }
 .p-button.p-button-secondary:enabled:hover,
 .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover,
 .p-buttonset.p-button-secondary > .p-button:enabled:hover,
 .p-buttonset.p-button-secondary
-  > .p-button:not(button):not(a):not(.p-disabled):hover,
+> .p-button:not(button):not(a):not(.p-disabled):hover,
 .p-splitbutton.p-button-secondary > .p-button:enabled:hover,
 .p-splitbutton.p-button-secondary
-  > .p-button:not(button):not(a):not(.p-disabled):hover,
+> .p-button:not(button):not(a):not(.p-disabled):hover,
 .p-fileupload-choose.p-button-secondary:enabled:hover,
 .p-fileupload-choose.p-button-secondary:not(button):not(a):not(
-    .p-disabled
+  .p-disabled
   ):hover {
-  background: #475569;
-  color: #ffffff;
-  border-color: #475569;
-}
+    background: var(--primary-100);
+    color: var(--primary-800);
+    border-color: var(--primary-100);
+  }
 .p-button.p-button-secondary:enabled:focus,
 .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus,
 .p-buttonset.p-button-secondary > .p-button:enabled:focus,
 .p-buttonset.p-button-secondary
-  > .p-button:not(button):not(a):not(.p-disabled):focus,
+> .p-button:not(button):not(a):not(.p-disabled):focus,
 .p-splitbutton.p-button-secondary > .p-button:enabled:focus,
 .p-splitbutton.p-button-secondary
-  > .p-button:not(button):not(a):not(.p-disabled):focus,
+> .p-button:not(button):not(a):not(.p-disabled):focus,
 .p-fileupload-choose.p-button-secondary:enabled:focus,
 .p-fileupload-choose.p-button-secondary:not(button):not(a):not(
-    .p-disabled
+  .p-disabled
   ):focus {
-  box-shadow: 0 0 0 0.2rem #e2e8f0;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--primary-100);
 }
 .p-button.p-button-secondary:enabled:active,
 .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active,
@@ -2550,124 +2545,125 @@ a {
   > .p-button:not(button):not(a):not(.p-disabled):active,
 .p-splitbutton.p-button-secondary > .p-button:enabled:active,
 .p-splitbutton.p-button-secondary
-  > .p-button:not(button):not(a):not(.p-disabled):active,
+> .p-button:not(button):not(a):not(.p-disabled):active,
 .p-fileupload-choose.p-button-secondary:enabled:active,
 .p-fileupload-choose.p-button-secondary:not(button):not(a):not(
-    .p-disabled
+  .p-disabled
   ):active {
-  background: #334155;
-  color: #ffffff;
-  border-color: #334155;
-}
-.p-button.p-button-secondary.p-button-outlined,
-.p-buttonset.p-button-secondary > .p-button.p-button-outlined,
-.p-splitbutton.p-button-secondary > .p-button.p-button-outlined,
-.p-fileupload-choose.p-button-secondary.p-button-outlined {
-  background-color: transparent;
-  color: #344054;
-  border: 1px solid #d0d5dd;
-  height: 44px !important;
-}
-.p-button.p-button-secondary.p-button-outlined:enabled:hover,
-.p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
-    .p-disabled
-  ):hover,
-.p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
-.p-buttonset.p-button-secondary
-  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
-.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
-.p-splitbutton.p-button-secondary
-  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
-.p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover,
-.p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
-    a
-  ):not(.p-disabled):hover {
-  background: rgba(100, 116, 139, 0.04);
-  color: #344054;
-  border: 1px solid #d0d5dd;
-}
-.p-button.p-button-secondary.p-button-outlined:enabled:active,
-.p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
+    background: var(--primary-100);
+    color: var(--primary-800);
+    border-color: var(--primary-100);
+  }
+  .p-button.p-button-secondary.p-button-outlined,
+  .p-buttonset.p-button-secondary > .p-button.p-button-outlined,
+  .p-splitbutton.p-button-secondary > .p-button.p-button-outlined,
+  .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #344054;
+    border: 1px solid #d0d5dd;
+    height: 44px !important;
+  }
+  .p-button.p-button-secondary.p-button-outlined:enabled:hover,
+  .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
     .p-disabled
-  ):active,
-.p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active,
-.p-buttonset.p-button-secondary
-  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
-.p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active,
-.p-splitbutton.p-button-secondary
-  > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
-.p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active,
-.p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
-    a
+    ):hover,
+    .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
+    .p-buttonset.p-button-secondary
+    > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
+    .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover,
+    .p-splitbutton.p-button-secondary
+    > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover,
+    .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover,
+    .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
+      a
+      ):not(.p-disabled):hover {
+        background: rgba(100, 116, 139, 0.04);
+        color: #344054;
+        border: 1px solid #d0d5dd;
+      }
+      .p-button.p-button-secondary.p-button-outlined:enabled:active,
+      .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(
+        .p-disabled
+        ):active,
+        .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active,
+        .p-buttonset.p-button-secondary
+        > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
+        .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active,
+        .p-splitbutton.p-button-secondary
+        > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active,
+        .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active,
+        .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(
+          a
   ):not(.p-disabled):active {
-  background: rgba(100, 116, 139, 0.16);
-  color: #64748b;
-  border: 1px solid;
-}
-.p-button.p-button-secondary.p-button-text,
-.p-buttonset.p-button-secondary > .p-button.p-button-text,
-.p-splitbutton.p-button-secondary > .p-button.p-button-text,
-.p-fileupload-choose.p-button-secondary.p-button-text {
-  background-color: transparent;
-  color: #64748b;
-  border-color: transparent;
-}
-.p-button.p-button-secondary.p-button-text:enabled:hover,
-.p-button.p-button-secondary.p-button-text:not(button):not(a):not(
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text,
+  .p-buttonset.p-button-secondary > .p-button.p-button-text,
+  .p-splitbutton.p-button-secondary > .p-button.p-button-text,
+  .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:enabled:hover,
+  .p-button.p-button-secondary.p-button-text:not(button):not(a):not(
     .p-disabled
-  ):hover,
-.p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover,
-.p-buttonset.p-button-secondary
-  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
-.p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover,
+    ):hover,
+    .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover,
+    .p-buttonset.p-button-secondary
+    > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
+    .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover,
 .p-splitbutton.p-button-secondary
   > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover,
-.p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover,
-.p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(
+  .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover,
+  .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(
     .p-disabled
-  ):hover {
-  background: rgba(100, 116, 139, 0.04);
-  border-color: transparent;
-  color: #64748b;
-}
-.p-button.p-button-secondary.p-button-text:enabled:active,
-.p-button.p-button-secondary.p-button-text:not(button):not(a):not(
+    ):hover {
+      background: rgba(100, 116, 139, 0.04);
+      border-color: transparent;
+      color: #64748b;
+    }
+    .p-button.p-button-secondary.p-button-text:enabled:active,
+    .p-button.p-button-secondary.p-button-text:not(button):not(a):not(
     .p-disabled
   ):active,
 .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active,
 .p-buttonset.p-button-secondary
-  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
+> .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
 .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active,
 .p-splitbutton.p-button-secondary
-  > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
+> .p-button.p-button-text:not(button):not(a):not(.p-disabled):active,
 .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active,
 .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(
-    .p-disabled
+  .p-disabled
   ):active {
-  background: rgba(100, 116, 139, 0.16);
-  border-color: transparent;
-  color: #64748b;
-}
-
-.p-button.p-button-info,
-.p-buttonset.p-button-info > .p-button,
-.p-splitbutton.p-button-info > .p-button,
-.p-fileupload-choose.p-button-info {
-  color: #ffffff;
-  background: #3b82f6;
-  border: 1px solid #3b82f6;
-}
-.p-button.p-button-info:enabled:hover,
-.p-button.p-button-info:not(button):not(a):not(.p-disabled):hover,
-.p-buttonset.p-button-info > .p-button:enabled:hover,
-.p-buttonset.p-button-info
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  /* ##################################### Basic Button CSS changes END #################################################### */
+  
+  .p-button.p-button-info,
+  .p-buttonset.p-button-info > .p-button,
+  .p-splitbutton.p-button-info > .p-button,
+  .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #3b82f6;
+    border: 1px solid #3b82f6;
+  }
+  .p-button.p-button-info:enabled:hover,
+  .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover,
+  .p-buttonset.p-button-info > .p-button:enabled:hover,
+  .p-buttonset.p-button-info
   > .p-button:not(button):not(a):not(.p-disabled):hover,
-.p-splitbutton.p-button-info > .p-button:enabled:hover,
-.p-splitbutton.p-button-info
+  .p-splitbutton.p-button-info > .p-button:enabled:hover,
+  .p-splitbutton.p-button-info
   > .p-button:not(button):not(a):not(.p-disabled):hover,
-.p-fileupload-choose.p-button-info:enabled:hover,
-.p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
-  background: #2563eb;
+  .p-fileupload-choose.p-button-info:enabled:hover,
+  .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
+    background: #2563eb;
   color: #ffffff;
   border-color: #2563eb;
 }
@@ -3204,14 +3200,14 @@ a {
   border-color: transparent;
   color: #a855f7;
 }
-
+ /* Button Changes Done Here For Danger Button */
 .p-button.p-button-danger,
 .p-buttonset.p-button-danger > .p-button,
 .p-splitbutton.p-button-danger > .p-button,
 .p-fileupload-choose.p-button-danger {
   color: #ffffff;
-  background: #ef4444;
-  border: 1px solid #ef4444;
+  background: var(--red-600);
+  border: 1px solid var(--red-600);
 }
 .p-button.p-button-danger:enabled:hover,
 .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover,
@@ -3223,9 +3219,9 @@ a {
   > .p-button:not(button):not(a):not(.p-disabled):hover,
 .p-fileupload-choose.p-button-danger:enabled:hover,
 .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover {
-  background: #dc2626;
   color: #ffffff;
-  border-color: #dc2626;
+  background: var(--red-700);
+  border: 1px solid var(--red-700);
 }
 .p-button.p-button-danger:enabled:focus,
 .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus,
@@ -3237,7 +3233,7 @@ a {
   > .p-button:not(button):not(a):not(.p-disabled):focus,
 .p-fileupload-choose.p-button-danger:enabled:focus,
 .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus {
-  box-shadow: 0 0 0 0.2rem #fecaca;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
 }
 .p-button.p-button-danger:enabled:active,
 .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active,
@@ -3251,17 +3247,72 @@ a {
 .p-fileupload-choose.p-button-danger:not(button):not(a):not(
     .p-disabled
   ):active {
-  background: #b91c1c;
-  color: #ffffff;
-  border-color: #b91c1c;
+    color: #ffffff;
+    background: var(--red-700);
+    border: 1px solid var(--red-700);
+}
+/* Error Secondary color CSS changes Start */
+.p-button.p-button-danger-secondary,
+.p-buttonset.p-button-danger-secondary > .p-button,
+.p-splitbutton.p-button-danger-secondary > .p-button,
+.p-fileupload-choose.p-button-danger-secondary {
+  background: var(--red-50);
+  border: 1px solid var(--red-50);
+  color: var(--red-700);
+}
+
+.p-button.p-button-danger-secondary:enabled:hover,
+.p-button.p-button-danger-secondary:not(button):not(a):not(.p-disabled):hover,
+.p-buttonset.p-button-danger-secondary > .p-button:enabled:hover,
+.p-buttonset.p-button-danger-secondary
+  > .p-button:not(button):not(a):not(.p-disabled):hover,
+.p-splitbutton.p-button-danger-secondary > .p-button:enabled:hover,
+.p-splitbutton.p-button-danger-secondary
+  > .p-button:not(button):not(a):not(.p-disabled):hover,
+.p-fileupload-choose.p-button-danger-secondary:enabled:hover,
+.p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(.p-disabled):hover {
+  background: var(--red-100);
+  border: 1px solid var(--red-100);
+  color: var(--red-800);
+}
+
+.p-button.p-button-danger-secondary:enabled:active,
+.p-button.p-button-danger-secondary:not(button):not(a):not(.p-disabled):active,
+.p-buttonset.p-button-danger-secondary > .p-button:enabled:active,
+.p-buttonset.p-button-danger-secondary
+  > .p-button:not(button):not(a):not(.p-disabled):active,
+.p-splitbutton.p-button-danger-secondary > .p-button:enabled:active,
+.p-splitbutton.p-button-danger-secondary
+  > .p-button:not(button):not(a):not(.p-disabled):active,
+.p-fileupload-choose.p-button-danger-secondary:enabled:active,
+.p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(
+    .p-disabled
+  ):active {
+    background: var(--red-100);
+  border: 1px solid var(--red-100);
+  color: var(--red-800);
+  }
+
+  .p-button.p-button-danger-secondary:enabled:focus,
+.p-button.p-button-danger-secondary:not(button):not(a):not(.p-disabled):focus,
+.p-buttonset.p-button-danger-secondary > .p-button:enabled:focus,
+.p-buttonset.p-button-danger-secondary
+  > .p-button:not(button):not(a):not(.p-disabled):focus,
+.p-splitbutton.p-button-danger-secondary > .p-button:enabled:focus,
+.p-splitbutton.p-button-danger-secondary
+  > .p-button:not(button):not(a):not(.p-disabled):focus,
+.p-fileupload-choose.p-button-danger-secondary:enabled:focus,
+.p-fileupload-choose.p-button-danger-secondary:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
 }
+
 .p-button.p-button-danger.p-button-outlined,
 .p-buttonset.p-button-danger > .p-button.p-button-outlined,
 .p-splitbutton.p-button-danger > .p-button.p-button-outlined,
 .p-fileupload-choose.p-button-danger.p-button-outlined {
   background-color: transparent;
-  color: #ef4444;
-  border: 1px solid;
+  color: var(--red-700);
+  border: 1px solid var(--red-300);
 }
 .p-button.p-button-danger.p-button-outlined:enabled:hover,
 .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(
@@ -3277,9 +3328,9 @@ a {
 .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(
     .p-disabled
   ):hover {
-  background: rgba(239, 68, 68, 0.04);
-  color: #ef4444;
-  border: 1px solid;
+  background: var(--red-50);
+  color: var(--red-800);
+  border: 1px solid var(--red-300);
 }
 .p-button.p-button-danger.p-button-outlined:enabled:active,
 .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(
@@ -3295,16 +3346,16 @@ a {
 .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(
     .p-disabled
   ):active {
-  background: rgba(239, 68, 68, 0.16);
-  color: #ef4444;
-  border: 1px solid;
+    background: var(--red-50);
+    color: var(--red-800);
+    border: 1px solid var(--red-300);
 }
 .p-button.p-button-danger.p-button-text,
 .p-buttonset.p-button-danger > .p-button.p-button-text,
 .p-splitbutton.p-button-danger > .p-button.p-button-text,
 .p-fileupload-choose.p-button-danger.p-button-text {
   background-color: transparent;
-  color: #ef4444;
+  color: var(--red-700);
   border-color: transparent;
 }
 .p-button.p-button-danger.p-button-text:enabled:hover,
@@ -3321,9 +3372,9 @@ a {
 .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(
     .p-disabled
   ):hover {
-  background: rgba(239, 68, 68, 0.04);
+  background: var(--red-50);
   border-color: transparent;
-  color: #ef4444;
+  color: var(--red-700);
 }
 .p-button.p-button-danger.p-button-text:enabled:active,
 .p-button.p-button-danger.p-button-text:not(button):not(a):not(
@@ -3339,11 +3390,17 @@ a {
 .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(
     .p-disabled
   ):active {
-  background: rgba(239, 68, 68, 0.16);
+  background: var(--red-50);
   border-color: transparent;
-  color: #ef4444;
+  color: var(--red-700);
 }
 
+.p-button.p-button-danger.p-button-text:focus {
+  box-shadow: none !important;
+  background: transparent;
+  border-color: transparent;
+}
+/* Error Secondary color CSS changes END */
 .p-button.p-button-link {
   color: var(--gray-900);
   background: transparent;
@@ -4917,7 +4974,7 @@ a {
 }
 .p-paginator .p-dropdown {
   margin-left: 0.5rem;
-  height: auto;
+
   border: none;
 }
 .p-paginator .p-dropdown .p-dropdown-label {
@@ -4952,11 +5009,13 @@ a {
   border-radius: 50%;
 }
 .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  /* background: #EEF2FF;
-  border-color: var(--gray-900); */
-  font-weight: 600;
-  color: var(--gray-900);
-  font-size: 12px;
+ background: var(--gray-50);
+  /* border-color: var(--gray-50); */
+  font-weight: 500;
+  color: var(--gray-800);
+  line-height: 20px;
+
+  font-size: 14px;
 }
 .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
   background: #e9ecef;
@@ -5634,7 +5693,7 @@ a {
   border-width: 0 0 2px 0;
   border-color: transparent transparent #dee2e6 transparent;
   background: #ffffff;
-  color: #6b7094;
+  color: var(--gray-500);
   padding: 10px;
   font-weight: 500; /* changed to 500 */
   /* font-weight: 700; */
@@ -5670,7 +5729,7 @@ a {
 
 .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
   background: #ffffff;
-  color: var(--gray-900); /* color changed */
+  color: var(--primary-700); /* color changed */
   position: relative;
   transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
 }
@@ -5910,10 +5969,11 @@ a {
 /* ############################# Tooltip changes From HERE  ############################# */
 
 /* Added theme switching classes that switch the background color and text color of tooltip */
-.p-tooltip.p-dark-tooltip {
+.p-tooltip {
   --background-color: var(--gray-900);
   --tooltip-text-color: #ffffff;
 }
+
 .p-tooltip.p-light-tooltip {
   --background-color: #ffffff;
   --tooltip-text-color: var(--gray-700);
@@ -5979,9 +6039,9 @@ a {
 
 .p-breadcrumb {
   background: #ffffff;
-  border: 1px solid #dee2e6;
-  border-radius: 6px;
-  padding: 1rem;
+  /* border: 1px solid #dee2e6;
+  border-radius: 6px; */
+  padding: 4px;
 }
 .p-breadcrumb ul li .p-menuitem-link {
   transition: box-shadow 0.2s;
@@ -5993,7 +6053,7 @@ a {
   box-shadow: 0 0 0 0.2rem #c7d2fe;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
-  color: #495057;
+  color: var(--gray-600);
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
   color: #6c757d;
@@ -6003,7 +6063,7 @@ a {
   color: #495057;
 }
 .p-breadcrumb ul li:last-child .p-menuitem-text {
-  color: #495057;
+  color: var(--primary-700);
 }
 .p-breadcrumb ul li:last-child .p-menuitem-icon {
   color: #6c757d;
@@ -7146,7 +7206,7 @@ a {
 }
 .p-steps .p-steps-item:before {
   content: " ";
-  border-top: 1px solid #dee2e6;
+  border-top: 2px solid var(--primary-600);
   width: 100%;
   top: 50%;
   left: 0;
@@ -7923,11 +7983,10 @@ a {
   z-index: 1;
   display: block;
   position: absolute;
-  background: var(--gray-900);
-  height: 4px;
+  background: var(--primary-700);
+  height: 2px;
   bottom: 0;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  
   transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 
@@ -7943,7 +8002,8 @@ a {
   box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 black;
 } */
 .p-button.p-button-secondary:enabled:focus {
-  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 black;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--primary-100);
+  /* Changed the box shadow for Secondary Button */
 }
 .p-button.p-button-success:enabled:focus {
   box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 black;
@@ -7959,7 +8019,7 @@ a {
   box-shadow: none;
 }
 .p-button.p-button-danger:enabled:focus {
-  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
 }
 
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
@@ -7999,11 +8059,11 @@ a {
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
 .p-paginator .p-dropdown .p-dropdown-trigger {
-  min-width: 18px;
-  max-width: 18px;
-  height: 18px;
-  font-size: 12px;
-  color: #444b74;
+  min-width: 44px;
+  max-width: 44px;
+  height: 44px;
+  font-size: 14px;
+  color: var(--gray-800);
 }
 
 .p-paginator .p-paginator-prev .pi.pi-angle-left {
@@ -8016,7 +8076,7 @@ a {
 
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-left: 6px;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .p-paginator span.p-dropdown-trigger-icon.p-clickable.pi.pi-chevron-down {
@@ -8176,3 +8236,167 @@ input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+/* New button classes added for different Size Variations ++++++++++++++++++++++++++++ */
+
+.p-button.p-button-dual-icon {
+  width: 157px !important;
+  padding: 10px 18px;
+  font-size: 14px;
+}
+
+.p-button.p-button-xs {
+  height: 32px !important;
+  line-height: 20px !important;
+  font-size: 14px !important;
+}
+.p-button.p-button-dual-icon.p-button-xs {
+  width: 157px !important;
+  padding: 6px 14px !important;
+}
+.p-button.p-button-icon-only.p-button-xs {
+  padding: 8px !important;
+}
+
+.p-button.p-button-sm {
+  height: 40px !important;
+  line-height: 20px !important;
+  font-size: 14px !important;
+}
+.p-button.p-button-dual-icon.p-button-sm {
+  width: 161px !important;
+  padding: 10px 16px !important;
+}
+.p-button.p-button-icon-only.p-button-sm {
+  padding: 10px !important;
+}
+
+.p-button.p-button-md {
+  height: 44px !important;
+  line-height: 24px !important;
+  font-size: 16px !important;
+}
+.p-button.p-button-dual-icon.p-button-md {
+  width: 175px !important;
+  padding: 10px 14px !important;
+}
+.p-button.p-button-icon-only.p-button-md {
+  padding: 12px !important;
+}
+
+.p-button.p-button-lg {
+  height: 48px !important;
+  line-height: 24px !important;
+  font-size: 16px !important;
+}
+.p-button.p-button-dual-icon.p-button-lg{
+  width: 179px !important;
+  padding: 12px 20px !important;
+}
+.p-button.p-button-icon-only.p-button-lg {
+  padding: 14px !important;
+}
+
+.p-button.p-button-xl {
+  height: 60px !important;
+  line-height: 28px !important;
+  font-size: 18px !important;
+}
+.p-button.p-button-dual-icon.p-button-xl {
+  width: 221px !important;
+  padding: 16px 28px !important;
+}
+.p-button.p-button-icon-only.p-button-xl {
+  padding: 16px !important;
+}
+
+/* Social Button classes */
+/* Google */
+.p-button.p-button-google {
+  background: #ffffff;
+  border: 1px solid var(--gray-300);
+  color: var(--gray-700);
+}
+.p-button.p-button-google:enabled:hover {
+  background: var(--gray-50);
+  color: var(--gray-700); 
+}
+.p-button.p-button-google:focus {
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
+}
+/* Facebook */
+.p-button.p-button-facebook {
+  background: #1877F2;
+  border: none;
+  color: #ffffff;
+}
+.p-button.p-button-facebook:enabled:hover {
+  background: #0C63D4;
+  color: #ffffff; 
+}
+.p-button.p-button-facebook:focus {
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
+}
+/* Apple */
+.p-button.p-button-apple {
+  background: #000000;
+  border: none;
+  color: #ffffff;
+}
+.p-button.p-button-apple:enabled:hover {
+  background: #000000;
+  color: #ffffff; 
+}
+.p-button.p-button-apple:focus {
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
+}
+/* Twitter */
+.p-button.p-button-twitter {
+  background: #1DA1F2;
+  border: none;
+  color: #ffffff;
+}
+.p-button.p-button-twitter:enabled:hover {
+  background: #0C8BD9;
+  color: #ffffff; 
+}
+.p-button.p-button-twitter:focus {
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
+}
+
+/* pagination classes */
+@media screen and (min-width: 768px) {
+  .p-paginator-pages {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .p-paginator-pages {
+    display: none;
+  }
+  .paginator-boxes > .p-paginator-pages {
+    display: flex;
+  }
+}
+.bg-square .p-paginator-pages .p-paginator-page.p-highlight {
+  border-radius: 8px;
+}
+
+.paginator-boxes > .p-paginator-pages .p-paginator-page {
+  margin: 0px !important;
+  border-radius: 0px !important;
+  border-style: solid !important;
+}
+.paginator-boxes > .p-paginator-pages {
+  position: relative;
+  top: 0px !important;
+}
+.last-item-bg-color ul li:last-child {
+  background-color: var(--primary-50);
+  border-radius: 6px;
+}
+.last-item-bg-color-gray-50 ul li:last-child {
+  background-color: var(--gray-50);
+  border-radius: 6px;
+}