@solidstarters/solid-core-ui 1.1.17 → 1.1.19

package/dist/stylesheets/globals.css

@@ -0,0 +1,2476 @@
+/* Loader Main */
+
+.center-loader {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 150px 0;
+}
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #197EF7;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+
+/* User Setting Loader */
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+.load {
+  width: 80px;
+  height: 80px;
+  margin: 110px auto 0;
+  border: solid 6px #197EF7;
+  border-radius: 50%;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  -webkit-transition: all 0.5s ease-in;
+  -webkit-animation-name: rotate;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+
+  transition: all 0.5s ease-in;
+  animation-name: rotate;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+/* Button Loader */
+.lds-dual-ring {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 3px solid #fff;
+  border-color: #fff transparent #fff transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Login & Register */
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* margin-top: 4rem; */
+
+  font-weight: 700;
+}
+
+.user-dashboard .wrapper {
+  margin-top: 3rem;
+}
+
+.wrapper form {
+  padding: 2.5rem 3rem;
+}
+
+.wrapper form a {
+  font-size: 0.9rem;
+  color: grey;
+}
+
+.form-btn {
+  background-color: #197EF7;
+  border-color: #197EF7;
+  color: white;
+  margin-top: 2.5rem;
+  font-weight: bold;
+  --bs-btn-active-bg: #b02a37;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #dc3545;
+  --bs-btn-disabled-border-color: #dc3545;
+}
+
+.form-btn:hover {
+  background-color: #bb2d3b;
+  border-color: #bb2d3b;
+  color: white;
+}
+
+.react-datepicker {
+  width: 100%;
+}
+
+.react-datepicker__month-container {
+  float: left;
+  width: 100%;
+}
+
+/* Avatar */
+.avatar {
+  display: inline-block;
+  margin-bottom: 0;
+  height: 3rem;
+  width: 3rem;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+/* Navbar - left sidebar */
+.navbar-brand {
+  display: inline-block;
+  margin-bottom: 30px;
+  width: 100%;
+  text-align: center;
+}
+
+.navbar-brand .img {
+  width: 50px;
+}
+
+.navBar {
+  position: relative;
+}
+
+
+.userProfile {
+  display: inline-block;
+  margin-bottom: 20px;
+  align-items: center;
+  text-align: center;
+  /* position: fixed !important; 
+  bottom: 20px !important; */
+}
+
+.user-profile-menu {
+  padding: 20px;
+}
+
+.navBarTwo {
+  position: relative;
+  display: block;
+  border-right: 1px solid var(--border-color);
+  /* overflow-y: scroll; */
+  width: 250px;
+  margin-left: 70px;
+  /* height: 100vh; */
+}
+
+
+.active-solid-menu {
+  background-color: #f3fcfe;
+  border-inline-end: 2px solid #0dcaf0;
+}
+
+.active-solid-menu a {
+  color: #0baccc !important;
+  font-weight: 700 !important;
+}
+
+.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+  background-color: transparent;
+}
+
+.p-panelmenu .p-panelmenu-header:hover {
+  /* background-color: #eff1f4; */
+}
+
+.navBarTwo .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+  /* background-color: #eff1f4; */
+  border: none;
+  border-radius: 4px;
+}
+
+
+.navBarTwo .p-panelmenu .p-panelmenu-content {
+  border: none;
+  border-radius: 0;
+}
+
+.navBarTwo .menuHead a {
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 16px;
+  color: #4b4d52;
+  padding: 0.75rem 0.75rem 0.75rem 0rem;
+}
+
+/* .navBarTwo .subMenuHead {
+  padding: 0.75rem;
+} */
+
+.navBarTwo .subMenuHead a {
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9rem;
+  line-height: 16px;
+  color: #4b4d52;
+  padding: 0.75rem;
+}
+
+.navBarTwo .accordion-button {
+  background-color: transparent;
+  padding: 10px 5px;
+  font-weight: 500;
+}
+
+.navBarTwo .accordion-button:focus {
+  background-color: transparent;
+}
+
+.navbarTwoSubMenu .accordion-button {
+  background-color: transparent;
+}
+
+.navbarTwoSubMenu .accordion-button:focus {
+  background-color: var(--background-color);
+}
+
+.navbarTwoSubMenu .accordion-button.collapsed {
+  background-color: transparent;
+}
+
+.navBarTwo .accordion-button::after {
+  display: none;
+}
+
+.navBarTwo .accordion-button:not(.collapsed) {
+  box-shadow: 0 0 0 0;
+}
+
+
+.navtwo-header {
+  margin: 10px;
+  align-items: center;
+}
+
+.navtwo-searchbox {
+  margin: 10px;
+  border: 1px solid #D8E2EA;
+  border-radius: 5px;
+  padding: 10px;
+  width: 100%;
+}
+
+.navBarTwo .accordion-item:first-of-type>.accordion-header .accordion-button {
+  background-color: var(--active-menu-background);
+}
+
+.navBarTwo .accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
+  background-color: transparent;
+}
+
+.navBarTwo .accordion-item:first-of-type>.accordion-header .accordion-button .menu-icon {
+  transform: rotate(90deg);
+  transition: transform 0.5s ease-in-out;
+  margin: 0px 10px;
+}
+
+.navBarTwo .accordion-item:first-of-type>.accordion-header .accordion-button.collapsed .menu-icon {
+  transform: rotate(0);
+  transition: transform 0.5s ease-in-out;
+  margin: 0px 10px;
+}
+
+/* Wrappers */
+/* .p-component {
+  border-radius: 4px !important;
+} */
+
+.p-column-filter.p-inputtext {
+  max-height: 2rem !important;
+  border-radius: 4px;
+}
+
+.page-parent-wrapper {
+  height: 100%;
+  /* max-height: calc(100vh - 154px); */
+  overflow-y: auto !important;
+  /* border-radius: 4px;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05),
+    0px 1px 4px rgba(0, 0, 0, 0.08) !important; */
+  background-color: var(--surface-a) !important;
+  /* padding: 1rem; */
+}
+
+.page-secondary-parent-wrapper {
+  height: 100%;
+  /* max-height: calc(100vh - 118px); */
+  overflow-y: auto !important;
+  border-radius: 4px;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05),
+    0px 1px 4px rgba(0, 0, 0, 0.08) !important;
+  background-color: #fff !important;
+  padding: 1.5rem;
+}
+
+.form-wrapper-title {
+  color: var(--solid-form-title) !important;
+  font-weight: 600;
+}
+
+.table-header-fs {}
+
+.table-header-fs .p-column-title {
+  /* font-size: 14px !important; */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 15ch;
+}
+
+.solid-table-row {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 30ch !important;
+}
+
+.form-field-label {
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.88) !important;
+}
+
+.form-wrapper-subtitle {
+  font-size: 0.75rem !important;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: #000 !important;
+}
+
+.form-wrapper {
+  padding: 1.5rem 1rem 1rem 1rem;
+  background: #f6f6f9;
+  border-radius: 4px;
+  position: relative;
+}
+
+.form-subheading {
+  font-size: 0.8em;
+  font-weight: 700;
+}
+
+.form-wrapper-heading {
+  font-size: 1rem !important;
+  font-weight: 600;
+  color: var(--solid-form-title) !important;
+}
+
+.boolean-switch .p-button {
+  max-height: 2rem;
+  min-width: 7rem !important;
+  border-radius: 4px;
+}
+
+.boolean-switch .p-button-label {
+  font-size: 0.75rem !important;
+}
+
+/* Home page */
+
+.stays-heading {
+  font-weight: 700;
+}
+
+.back-to-search {
+  font-size: 1.1rem;
+  color: #197EF7;
+  font-weight: 600;
+}
+
+.back-to-search:hover {
+  color: #197EF7;
+}
+
+.card {
+  height: 100%;
+  border: 0px;
+}
+
+.card-title a {
+  color: #2e2e2e;
+  text-decoration: none;
+  font-size: 1.2rem;
+}
+
+.card-title a:hover {
+  color: #197EF7;
+  text-decoration: none;
+}
+
+.card-body {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.card-text {
+  font-size: 1.2rem;
+  color: black;
+}
+
+.card-body .view-btn {
+  background-color: #197EF7;
+  color: white;
+  text-decoration: none;
+}
+
+.card-body .view-btn:hover {
+  background-color: #197EF7;
+  color: white;
+}
+
+.card-img-top {
+  border-radius: 0.8rem;
+}
+
+.ratings {
+  font-size: 1.2rem;
+  color: #197EF7;
+}
+
+.no-of-reviews {
+  font-size: 0.85rem;
+  color: grey;
+  margin-left: 0.5rem;
+  padding-top: 0.3rem;
+}
+
+/* Room Details Page */
+
+.booking-card .booking-btn:hover {
+  color: white;
+  background-color: #197EF7;
+}
+
+.price-per-night {
+  font-size: 1.3rem;
+}
+
+.booking-card {
+  border: 1px solid #e3e3e3;
+  border-radius: 20px;
+  padding: 5px 10px;
+}
+
+.room-feature {
+  font-size: 1.1rem;
+  color: #404040;
+}
+
+.room-feature p {
+  margin-left: 0.4rem;
+  display: inline-block;
+}
+
+/* Reviews */
+.review_user {
+  font-size: 0.8rem;
+  color: grey;
+}
+
+/* Footer */
+footer {
+  margin-top: auto;
+  color: grey;
+  bottom: 0;
+  width: 100%;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Pagination */
+.page-item.active .page-link {
+  background-color: #197EF7;
+  border-color: #197EF7;
+  color: #fff;
+}
+
+.page-item.active .page-link:hover {
+  color: #fff;
+  cursor: pointer;
+}
+
+.pagination .page-link {
+  color: #197EF7;
+}
+
+.pagination .page-link:hover {
+  color: #197EF7;
+}
+
+/* Booking Details */
+.booking-details p {
+  margin-left: 1.5rem;
+}
+
+.redColor {
+  color: red;
+}
+
+.greenColor {
+  color: green;
+}
+
+/* Sidebar */
+
+.list-group-item:first-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.list-group-item {
+  border: none;
+}
+
+.list-group-item.active {
+  background-color: #f3f4f6;
+  border-color: #f3f4f6;
+  border-radius: 0.3rem;
+  color: #197EF7;
+}
+
+/* Main Layout Styling */
+.mainLayout {
+  display: flex;
+}
+
+.layoutPage {
+  width: 100%;
+  /* margin: 10px 40px 10px 20px; */
+}
+
+.dashboardHeader {
+  padding: 10px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.dashboardViews {
+  display: flex;
+  margin-right: 20px;
+}
+
+.dashBoardHeaderSections {
+  display: flex;
+  align-items: center;
+}
+
+.dashboardHeading img {
+  padding: 0px 5px;
+}
+
+/*------ dashboard ------*/
+.dealsStatusTable .p-datatable .p-datatable-tbody>tr>td {
+  border: none !important;
+}
+
+.dealsStatusTable .p-datatable.p-datatable-sm .p-datatable-thead>tr>th,
+.dealsStatusTable .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
+  font-size: 0.625rem !important;
+  line-height: 16px !important;
+  color: #4b4d52 !important;
+}
+
+.dealsStatusTable .p-datatable.p-datatable-sm .p-datatable-thead>tr>th {
+  font-weight: 600;
+  background-color: rgba(25, 126, 247, 0.1);
+}
+
+.dealsStatusTable .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
+  font-weight: 400;
+}
+
+.bgCircle {
+  width: 32px;
+  height: 32px;
+  background-color: #eff1f4;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.topbar-badge {
+  position: absolute;
+  display: block;
+  right: 0;
+  top: 0;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #197ef7;
+}
+
+.topbar-profile {
+  border-radius: var(--border-radius);
+  margin-left: 0.5rem;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.topbar-profile .topbar-profile-button {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  cursor: pointer;
+}
+
+.topbar-profile .topbar-profile-button .profile-details {
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.5rem;
+}
+
+.topbar-profile .topbar-profile-button .profile-details .profile-name {
+  font-weight: 600;
+  font-size: 0.725rem;
+  line-height: 16px;
+  color: #4b4d52;
+}
+
+.topbar-profile .topbar-profile-button .profile-details .profile-email {
+  font-weight: 400;
+  font-size: 0.625rem;
+  line-height: 16px;
+  color: #4b4d52;
+}
+
+.topbar-profile .topbar-profile-button i {
+  margin-left: 0.5rem;
+  color: var(--v-menuitem-text-color-secondary);
+  transition: transform var(--transition-duration);
+}
+
+.listHead {
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 16px;
+  color: #4b4d52;
+}
+
+.seachInput .p-icon-field-left>.p-inputtext {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-color: #197ef7;
+}
+
+/* Make the button transparent and remove borders */
+.transparent-background {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  /* Adjust padding if needed */
+}
+
+/* Ensure icon color is visible */
+.transparent-background .p-button-icon {
+  color: #4b4d52;
+  /* Or specify a color */
+}
+
+/* Optional: Add hover effect */
+.transparent-background:hover {
+  background: none;
+  /* Adjust hover background if needed */
+}
+
+.custom-select-button .p-button {
+  padding: 0.3rem 0.75rem;
+}
+
+.custom-row-height {
+  height: 41px;
+}
+
+.custom-row-height .p-button.p-button-icon-only.p-button-rounded {
+  height: 2.5rem !important;
+}
+
+.custom-row-height td {
+  padding: 0px;
+}
+
+.custom-table .p-datatable-thead th {
+  padding-left: 0px;
+}
+
+.custom-tooltip.p-tooltip .p-tooltip-text {
+  padding: 0.5rem !important;
+  font-weight: 400;
+  font-size: 0.875rem !important;
+  line-height: 16px !important;
+}
+
+/* Custom style for the small SplitButton */
+.small-splitbutton .p-button {
+  font-size: 0.75rem;
+  /* Adjust the font size */
+  padding: 0.25rem 0.5rem;
+  /* Adjust the padding */
+  /* height: 34px; Adjust the height */
+}
+
+.small-splitbutton .p-button-icon {
+  font-size: 1rem;
+  /* Adjust the icon size */
+}
+
+.small-splitbutton .p-splitbutton-menubutton {
+  font-size: 0.75rem;
+  /* Adjust the font size */
+  padding: 0.25rem 0.5rem;
+  /* Adjust the padding */
+  height: 2rem;
+  /* Adjust the height */
+}
+
+/* .p-tieredmenu .p-menuitem>.p-menuitem-content .p-menuitem-link {
+  padding: 0.5rem 1rem;
+  color: #4b4d52;
+}
+
+.p-tieredmenu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
+  font-weight: 400;
+  font-size: 0.725px;
+  line-height: 16px;
+  color: #4b4d52;
+} */
+
+/* Form Input */
+.submit-Button {
+  padding-left: 1.25rem;
+}
+
+.creat-field-form {
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.field {
+  margin-bottom: 0 !important;
+}
+
+.form-demo .p-inline-message {
+  padding-left: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.form-demo .p-inline-message.p-inline-message-error {
+  background-color: transparent;
+  justify-content: start;
+}
+
+.form-demo .p-inline-message .p-inline-message-text {
+  font-size: 0.8rem;
+}
+
+.form-demo .form-label {
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+
+/* Form */
+
+.inputDiv {
+  margin-bottom: 10px;
+}
+
+.inputDiv select {
+  width: 100%;
+  border: 0;
+  padding: 5px;
+  /* background-color: var(--background-color) !important; */
+  /* -webkit-box-shadow: 0 0 0px 1000px var(--box-shadow-color) inset !important; */
+}
+
+input:-webkit-autofill {
+  background-color: var(--background-color) !important;
+  -webkit-box-shadow: 0 0 0px 1000px var(--box-shadow-color) inset !important;
+}
+
+.input-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* input:focus-visible {
+  outline: 0px !important;
+  border: 0;
+} */
+
+select:focus-visible {
+  outline: 0px !important;
+  border: 0;
+}
+
+.input-icon input {
+  padding-left: 10px;
+  border: 0;
+  width: 100%;
+}
+
+.input-icon svg {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  fill: #aaa;
+}
+
+input::placeholder {
+  font-size: 0.9rem;
+  /* Change this value to your desired font size */
+  color: var(--input-placeholder);
+}
+
+.contactInput {
+  display: flex;
+}
+
+.contactInput .countryCode {
+  width: 80px;
+}
+
+.contactInput .inputDiv {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border: 1px solid var(--primary-color);
+  width: 100%;
+}
+
+.inputDiv {
+  /* border: 1px solid var(--primary-color); */
+  border-radius: 5px;
+  padding: 8px;
+}
+
+.wrapper form {
+  padding: 0;
+}
+
+.signup-heading {
+  color: var(--heading-color);
+}
+
+.signup-desc {
+  color: var(--heading-color);
+  font-weight: 300;
+}
+
+.submitBtn {
+  width: 100%;
+  background-color: var(--heading-color);
+  padding: 10px;
+  color: #fff;
+  border-radius: 5px;
+  border: 0;
+}
+
+
+/* Search Filter*/
+.custom-list {
+  list-style: none;
+  padding: 0;
+}
+
+.custom-list li {
+  padding: 5px 0;
+  cursor: pointer;
+}
+
+.custom-list li:hover {
+  color: #007ad9;
+}
+
+/* filterDropdown */
+.filterDropdown {
+  left: 32% !important;
+  min-width: 600px;
+}
+
+.filterComponent {
+  background-color: #fff;
+  /* padding: 10px; */
+}
+
+
+.filter-builder select {
+  /* border: 0px; */
+  /* background-color: red; */
+  /* border-bottom: 1px solid #000; */
+  margin-right: 10px;
+
+}
+
+.filter-builder input {
+  /* border: 0px; */
+  /* background-color: red; */
+  /* border-bottom: 1px solid #000; */
+  margin-right: 10px;
+
+}
+
+.filter-group {
+  margin-top: 5px;
+
+}
+
+.filter-rule {
+  margin-top: 5px;
+}
+
+.filter-rule button {
+  border: 0px;
+}
+
+.filter-individual-rule {
+  /* display: flex; */
+  /* justify-content: space-between; */
+
+}
+
+.filter-individual-rule-form {
+  /* display: flex; */
+  /* justify-content: space-around; */
+  /* width: -webkit-fill-available; */
+}
+
+.filter-individual-rule-form select {
+  width: 100%;
+}
+
+.filter-individual-rule-form input {
+  width: 100%;
+}
+
+
+.filterDropdown .p-overlaypanel::before {
+  left: 100% !important;
+
+}
+
+.custom-header {
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+.header-margin-top {
+  margin-top: 70px;
+}
+
+.custom-header-logo img {
+  width: calc(70px + (95 - 70) * (100vw - 320px) / (1920 - 320)) !important;
+  height: 100%;
+}
+
+.header-ul li {
+  list-style-type: none;
+}
+
+/* Header Dropdown */
+.custom-dropdown {
+
+  --drop-primary-color: #12415D;
+  --drop-secondary-color: #32A7B1;
+  /* width: 376px; */
+  height: calc(100vh - 69px);
+  top: 70px;
+  border: 1px solid #E9E9E9;
+}
+
+.header-li-btn {
+  height: 70px;
+  display: flex;
+  align-items: center;
+}
+
+.p-button:focus {
+  outline: none;
+  box-shadow: none;
+  /* border-radius: 0; */
+}
+
+.header-li-btn .p-button,
+.header-li-btn .p-button:hover,
+.header-li-btn .p-button:focus,
+.header-li-btn .p-button:active {
+  background-color: transparent !important;
+  outline: none;
+  box-shadow: none;
+  border-radius: 0;
+  background: none !important;
+  /* padding-left: 10px;
+  padding-right: 10px; */
+}
+
+li.header-li-px {
+  padding: 0 16px;
+}
+
+.active-nav-item {
+  background: linear-gradient(92.35deg, #12415D 1.97%, #2688C3 159.88%);
+}
+
+.active-nav-item .p-button {
+  color: #fff !important;
+}
+
+.active-nav-item .p-button svg path {
+  fill: #fff;
+}
+
+.deactive-nav-item {
+  background-color: #fff;
+}
+
+.deactive-nav-item .p-button {
+  color: var(--drop-primary-dark) !important;
+}
+
+.main-megamenu-animation {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+@-webkit-keyframes slideDownIn {
+  0% {
+    -webkit-transform: translateY(-20px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0);
+  }
+
+  0% {
+    -webkit-transform: translateY(-20);
+  }
+}
+
+@keyframes slideDownIn {
+  0% {
+    transform: translateY(-20px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+
+  0% {
+    transform: translateY(-20px);
+  }
+}
+
+.main-megamenu-slide-down-in {
+  -webkit-animation-name: slideDownIn;
+  animation-name: slideDownIn;
+}
+
+.primary-custom-megamenu {
+  max-width: 376px;
+  direction: rtl;
+  height: 100% !important;
+  overflow-y: auto;
+}
+
+.primary-custom-megamenu:not(:first-child)>div {
+  border-left: 2px solid #DDD !important;
+}
+
+.primary-custom-megamenu::-webkit-scrollbar {
+  width: 5px;
+}
+
+.primary-custom-megamenu::-webkit-scrollbar-thumb {
+  background-color: var(--drop-primary-color);
+  border-radius: 10px;
+  width: 5px;
+}
+
+.primary-custom-megamenu::-webkit-scrollbar-thumb:hover {
+  background-color: #407796;
+}
+
+.primary-custom-megamenu::-webkit-scrollbar-track {
+  background: #E5E5E5;
+}
+
+.primary-custom-megamenu .btn {
+  padding: 16px 12px;
+  border-bottom: 1px solid #DFDFDF;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.btn.open-dropdown-item {
+  border-inline-start: 3px solid var(--drop-secondary-color) !important;
+}
+
+.open-dropdown-item {
+  background-image: linear-gradient(92.35deg, #12415D 1.97%, #2688C3 159.88%) !important;
+  color: #fff !important;
+}
+
+.open-dropdown-item img {
+  filter: invert(1) !important;
+}
+
+.open-dropdown-item svg path {
+  stroke: #fff;
+  transition: all 0.25s ease-in;
+}
+
+.active-dropdown-item {
+  -webkit-transition: ease-out 0.4s;
+  -moz-transition: ease-out 0.4s;
+  background-image: linear-gradient(to left,
+      transparent,
+      transparent 50%,
+      #2688C3 50%,
+      #12415D) !important;
+  background-position: 100% 0 !important;
+  background-size: 200% 100%;
+  transition: all 0.25s ease-in !important;
+  border-inline-start: 3px solid #fff !important;
+  color: var(--drop-primary-color);
+}
+
+.active-dropdown-item:hover,
+.open-dropdown-item:hover {
+  background-position: 0 0 !important;
+  color: #fff !important;
+  border-inline-start: 3px solid var(--drop-secondary-color) !important;
+}
+
+.active-dropdown-item:hover img,
+.open-dropdown-item:hover img {
+  filter: invert(1) !important;
+}
+
+.active-dropdown-item:hover svg path,
+.open-dropdown-item:hover svg path {
+  stroke: #fff;
+  transition: all 0.25s ease-in;
+}
+
+
+/* Footer */
+.custom-footer {
+  background-image: url(/images/Footerbg.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: top;
+}
+
+
+.custom-footer-logo {
+  width: calc(70px + (170 - 70) * (100vw - 320px) / (1920 - 320)) !important;
+}
+
+.footer-input-border {
+  border-radius: 40px;
+}
+
+
+
+
+@media only screen and (min-device-width: 1500px) and (max-device-width: 1699px) {
+  li.header-li-px {
+    padding: 0 12px !important;
+  }
+
+  .header-li-btn .p-button,
+  .header-li-btn .p-button:hover,
+  .header-li-btn .p-button:focus,
+  .header-li-btn .p-button:active {
+    padding-left: 12px;
+    padding-right: 10px;
+  }
+}
+
+@media only screen and (min-device-width: 1200px) and (max-device-width: 1499px) {
+  li.header-li-px {
+    padding: 0 8px !important;
+  }
+
+  .header-li-btn .p-button,
+  .header-li-btn .p-button:hover,
+  .header-li-btn .p-button:focus,
+  .header-li-btn .p-button:active {
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+  }
+}
+
+.small-button {
+  max-height: 2rem !important;
+  font-size: 0.75rem !important;
+  border-radius: 4px !important;
+}
+
+.small-button .p-button-icon {
+  font-size: 0.75rem !important;
+}
+
+.small-input {
+  max-height: 2rem;
+  border-radius: 4px !important;
+}
+
+.small-input .p-password-input {
+  max-height: 2rem;
+  border-radius: 4px !important;
+}
+
+.form-dropdown-select .p-dropdown-label {
+  height: 2rem;
+  padding: 6.5px 10.5px !important;
+}
+
+.type-field-card {
+  border: 1px solid rgb(220, 220, 228);
+  text-align: left;
+  padding: 16px;
+  border-radius: 4px;
+  align-items: center;
+}
+
+.type-text {
+  padding-left: 16px;
+
+}
+
+.type-icon {
+  width: 30px;
+  font-size: 1.1em !important;
+  margin-bottom: 0px !important;
+}
+
+.type-field-card .type-heading {
+  font-weight: 600;
+  color: rgb(50, 50, 77);
+  font-size: 0.875rem;
+  line-height: 1.43;
+  padding: 0;
+  margin: 0;
+}
+
+.type-field-card .type-description {
+  color: rgb(102, 102, 135);
+  font-size: 0.75rem;
+  line-height: 1.33;
+  padding: 0;
+  margin: 0;
+}
+
+.type-field-card:hover {
+  background-color: rgb(240, 240, 255);
+  cursor: pointer;
+}
+
+.section-sub-heading {
+  font-size: 1.2em;
+}
+
+
+.field-popup .p-tabview-nav {
+  justify-content: end;
+  font-size: 0.8em;
+}
+
+.field-popup-heading {
+  position: absolute;
+  left: 0;
+  z-index: 999;
+  font-size: 1em;
+  font-weight: 700;
+  color: rgb(50, 50, 77);
+  top: -5px;
+}
+
+.fieldSubTitle {
+  font-size: 0.6em;
+  margin-top: 5px;
+}
+
+.tab-error-heading .p-tabview-title {
+  color: #ff5757;
+}
+
+.tab-error-heading .p-tabview-nav-link:focus {
+  border-color: #ff5757 !important;
+}
+
+.field-selection-form {
+  padding: 15px;
+  padding-top: 0;
+  margin: 0 !important;
+}
+
+.field-poopup-container .p-dialog-content {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.field-popup-form {
+  padding: 15px;
+}
+
+.field-table .p-datatable .p-datatable-tbody>tr>td {
+  padding: 0;
+  padding-left: 10px;
+}
+
+.markdown-view {
+  max-width: 100%;
+  /* Ensures the content doesn't exceed the container's width */
+  height: auto;
+  /* Set a specific height if needed */
+  padding: 16px;
+  overflow: auto;
+  /* Adds scroll if the content exceeds the container */
+  word-wrap: break-word;
+  /* Ensures long words break and don't overflow */
+  background-color: #f5f5f5;
+  /* Optional: background color for better readability */
+  border: 1px solid #ddd;
+  /* Optional: border for styling */
+  border-radius: 4px;
+}
+
+.cursor-pointer {
+  cursor: pointer !important;
+}
+
+.mini-tab {
+  padding-bottom: 3px;
+}
+
+.active-mini-tab {
+  border-bottom: 1px solid #000;
+}
+
+.deactive-mini-tab {
+  border-bottom: 1px solid #e3e3e3;
+}
+
+.ormTypeflex {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+}
+
+.cursor-not-allowed {
+  pointer-events: none;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.p-datepicker {
+  max-width: 350px !important;
+  min-width: 350px !important
+}
+
+.p-datepicker .p-timepicker span {
+  font-size: 0.9rem !important;
+
+}
+
+.p-datepicker table td>span {
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  font-size: 0.9rem !important;
+  padding: 5px !important;
+  margin: 5px !important;
+}
+
+/* Input Error message css */
+.p-inline-message.p-inline-message-error {
+  padding: 3px;
+  text-align: left;
+  background: transparent;
+  justify-content: flex-start;
+}
+
+.p-inline-message .p-inline-message-icon {
+  display: none;
+}
+
+.p-inline-message .p-inline-message-text {
+  font-size: 0.8rem;
+}
+
+.small-input .p-multiselect-label .p-multiselect-token {
+  padding: 3px;
+}
+
+.small-input .p-multiselect-label .p-multiselect-token .p-multiselect-token-label {
+  font-size: 0.8rem;
+}
+
+.kanban-options-panel .p-overlaypanel-content {
+  padding: 0 !important;
+}
+
+.kanban-options-panel .p-overlaypanel-content span {
+  padding: 0 !important;
+  font-size: 1rem;
+}
+
+.kanban-column {
+  flex: 1;
+  max-width: 350px;
+  background: #f0f0f5;
+  border: 8px;
+  padding: 0.2rem;
+}
+
+.kanban-card {
+  border: 1px solid #000;
+  padding: 10px;
+  background-color: #fff;
+}
+
+.kanban-card-heading {
+  font-size: 0.9rem;
+  line-height: 16px;
+  color: #4b4d52;
+  font-weight: 600;
+}
+
+.kanban-card-content {
+  font-size: 0.7rem;
+  line-height: 16px;
+  color: #4b4d52;
+}
+
+.kanban-group-heading {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 2px;
+}
+
+.kanban-column-folded {
+  flex-grow: 0;
+  background: #f0f0f5;
+  border: 8px;
+  padding: 5px;
+  height: 100%;
+  font-size: 1rem;
+}
+
+.kaban-heading-area {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #4b4d52;
+}
+
+.kaban-heading-area .count {
+  background-color: #bbbbbb;
+  color: #000;
+  margin-left: 10px;
+  border-radius: 20px;
+  padding: 5px 10px 5px 10px;
+  font-size: 0.8rem
+}
+
+.kanban-column-folded .kaban-heading-area:hover {
+  color: #4b4d52;
+  cursor: pointer;
+}
+
+.kanban-column-folded .kaban-heading-area .count {
+  margin-top: 10px;
+
+}
+
+.kanban-column-folded .kaban-heading-area {
+  /* transform-origin: left bottom 0; */
+  /* transform: rotate(90deg); */
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+  overflow: visible;
+  min-height: 250px;
+  color: #a0a0a0;
+  writing-mode: vertical-rl;
+  /* Make text vertical */
+  text-align: center;
+  /* Center the text vertically */
+
+}
+
+
+.kanban-arrow-icon-container {
+  transform: rotate(90deg);
+  transition: transform 0.2s ease;
+  margin-bottom: 20px;
+}
+
+.kanban-arrow-icon-container .pi {
+  font-size: 0.7rem;
+}
+
+.kanban-arrow-icon-container:hover .pi-sort-up-fill {
+  transform: translatey(-3px);
+}
+
+.kanban-arrow-icon-container:hover .pi-sort-down-fill {
+  transform: translateY(3px);
+}
+
+.autocomplete-small-input .p-autocomplete-dropdown {
+  max-height: 48px;
+}
+
+.load-more-button {
+  color: #000;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+/* Solid Custom Css */
+.page-header {
+  padding: 15px 14px 15px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.solid-form-wrapper {
+  overflow: hidden;
+}
+
+.solid-form-wrapper .solid-form-content {
+  height: calc(100vh - 118px);
+  overflow-y: auto;
+}
+
+.solid-form-header {
+  padding: 15px 14px 15px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--solid-light-grey);
+}
+
+.solid-form-stepper {
+  padding: 7.5px 14px 7.5px 24px;
+  background-color: var(--solid-light-100);
+  border-top: 1px solid var(--primary-light-color);
+  border-bottom: 1px solid var(--primary-light-color);
+}
+
+.solid-dropzone {
+  border-radius: 0.5rem;
+  border: 1px dashed var(--solid-primary-border);
+  background: rgba(255, 255, 255, 0.60);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.solid-dropzone p {
+  color: var(--solid-grey-500) !important;
+  font-size: 10px !important;
+}
+
+.solid-file-upload-wrapper {
+  border-radius: 8px;
+  border: 1px solid #E0E0E0;
+  padding: 10px;
+  margin-top: 10px;
+}
+
+.solid-step-button.p-button {
+  position: relative;
+  min-width: 130px;
+  display: flex;
+  justify-content: center;
+}
+
+
+.solid-step-button.p-button:not(.btn-step-first) {
+  padding-left: 40px;
+  min-width: 150px;
+}
+
+.solid-step-button.btn-step-first {
+  /* border: 1px solid var(--solid-stepper-border) !important; */
+  background-color: #EAEDF1;
+  color: #0D0B26;
+}
+
+.solid-step-button.btn-step-last {
+  background-color: transparent;
+  color: #0D0B26;
+}
+
+.solid-step-button.btn-step {
+  border-radius: 0;
+  border-left: none !important;
+  border-top: 1px solid var(--solid-stepper-border) !important;
+  border-bottom: 1px solid var(--solid-stepper-border) !important;
+  border-right: none !important;
+}
+
+.solid-step-button.btn-step-first {
+  border-radius: 6px 0 0 6px !important;
+  border-right: none !important;
+  border-left: 1px solid var(--solid-stepper-border) !important;
+  border-top: 1px solid var(--solid-stepper-border) !important;
+  border-bottom: 1px solid var(--solid-stepper-border) !important;
+}
+
+
+.solid-step-button.btn-step-last {
+  border-radius: 0 6px 6px 0 !important;
+  border-left: none !important;
+  border-top: 1px solid var(--solid-stepper-border) !important;
+  border-bottom: 1px solid var(--solid-stepper-border) !important;
+  border-right: 1px solid var(--solid-stepper-border) !important;
+}
+
+.solid-step-button.btn-step::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0px;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid var(--solid-stepper-border);
+}
+
+.solid-step-button.btn-step::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 18.5px solid transparent;
+  border-bottom: 18.5px solid transparent;
+  border-left: 18.5px solid #EAEDF1;
+  z-index: 1;
+}
+
+
+.solid-step-button.btn-step-last::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0px;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid var(--solid-stepper-border);
+}
+
+.solid-step-button.btn-step-last::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-top: 18.5px solid transparent;
+  border-bottom: 18.5px solid transparent;
+  border-left: 18.5px solid var(--primary-color);
+  z-index: 1;
+}
+
+.cancel-upload-button {
+  display: flex;
+  width: 18px;
+  height: 18px;
+  justify-content: center;
+  align-items: center;
+  background: #F0F0F0;
+  border-radius: 50%;
+}
+
+.solid-datatable-wrapper {
+  position: relative;
+  height: calc(100% - 66px);
+}
+
+.solid-datatable-wrapper .p-datatable-wrapper {
+  min-height: calc(100% - 70px);
+}
+
+.solid-datatable-wrapper .p-datatable {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between !important;
+}
+
+.solid-datatable-wrapper .solid-list-view-count {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  color: #8D9199;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+/* .solid-paginator .p-paginator .p-dropdown {
+  height: 2rem !important;
+} */
+.solid-paginator {
+  display: flex !important;
+  align-items: center;
+}
+
+.solid-paginator div.p-dropdown {
+  margin-left: 100px;
+}
+
+
+.solid-paginator .p-inputtext {
+  padding: 0;
+  color: #000000E0 !important;
+}
+
+.solid-paginator.p-paginator .p-dropdown {
+  height: auto !important;
+  padding: 4px 8px !important;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.solid-paginator div.p-dropdown::before {
+  content: "Items per page:";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: -100px;
+  color: var(--icon-color);
+  font-weight: 400;
+  display: inline-block;
+}
+
+.solid-paginator .p-dropdown .p-dropdown-label {
+  color: var(--icon-color) !important;
+}
+
+.solid-paginator .p-dropdown .p-dropdown-trigger {
+  width: auto;
+}
+
+.solid-paginator span {
+  margin-left: auto;
+}
+
+
+.solid-paginator .p-inputtext {
+  font-size: 14px;
+  color: #4B4D52;
+  line-height: 1.4;
+}
+
+.solid-paginator .p-link {
+  font-size: 14px;
+}
+
+.solid-paginator .p-dropdown-trigger svg.p-dropdown-trigger-icon.p-clickable {
+  height: 14px;
+  width: 14px;
+}
+
+.layout-config-button {
+  display: block;
+  position: fixed;
+  width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+  background: var(--primary-color);
+  color: var(--primary-color-text);
+  text-align: center;
+  top: 50%;
+  right: 0;
+  margin-top: -1.5rem;
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  transition: background-color var(--transition-duration);
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 999;
+  box-shadow: -.25rem 0 1rem rgba(0, 0, 0, .15);
+
+
+  &.config-link {
+    font-size: 1rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    border: none;
+  }
+
+  .config-link:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px var(--focus-ring);
+  }
+
+  i {
+    font-size: 2rem;
+    line-height: inherit;
+    transform: rotate(0deg);
+    transition: transform 1s;
+  }
+
+  &:hover {
+    background: var(--primary-400);
+  }
+}
+
+.solid-panel-menu .menuHead a {
+  text-decoration: none;
+  color: var(--secondary-dark-color);
+  padding: 0.75rem 0rem 0.75rem 0rem;
+}
+
+.solid-panel-menu .menuHead a .sidebar-chevrons {
+  color: var(--secondary-dark-color);
+}
+
+/* .navBarTwo .subMenuHead {
+  padding: 0.75rem;
+} */
+
+
+.solid-panel-menu .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+  background-color: var(--surface-a);
+  border: none;
+  border-radius: 4px;
+}
+
+.solid-panel-menu .p-panelmenu .p-panelmenu-content {
+  border: none;
+  border-radius: 0;
+}
+
+.solid-panel-menu .subMenuHead a {
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9rem;
+  line-height: 16px;
+  color: var(--text-color);
+  padding: 0.75rem;
+}
+
+.solid-panel-menu .accordion-button {
+  background-color: transparent;
+  padding: 10px 5px;
+  font-weight: 500;
+}
+
+.solid-panel-menu .accordion-button:focus {
+  background-color: transparent;
+}
+
+.solid-panel-menu .accordion-button {
+  background-color: transparent;
+}
+
+.solid-panel-menu .accordion-button:focus {
+  background-color: var(--background-color);
+}
+
+.solid-panel-menu .accordion-button.collapsed {
+  background-color: transparent;
+}
+
+.solid-panel-menu .accordion-button::after {
+  display: none;
+}
+
+.solid-panel-menu .accordion-button:not(.collapsed) {
+  box-shadow: 0 0 0 0;
+}
+
+
+/* User Profile */
+.profile-icon {
+  width: 2.4375rem;
+  height: 2.4375rem;
+}
+
+.user-profile-panel .p-overlaypanel-content {
+  padding: 0 !important;
+  min-width: 300px;
+  border: 1px solid #D8E2EA;
+  border-radius: 0.25rem;
+  box-shadow: 0px 4px 4px 0px rgba(200, 199, 199, 0.25);
+}
+
+.user-profile-title {
+  border-bottom: 2px solid #D8E2EA;
+}
+
+.user-profile-panel.p-overlaypanel:after,
+.user-profile-panel.p-overlaypanel:before {
+  display: none !important;
+}
+
+.primary-border-bottom {
+  border-bottom: 2px solid #D8E2EA;
+}
+
+.secondary-border-bottom {
+  border-bottom: 1px solid #D8E2EA;
+}
+
+.solid-header-dropdown-panel.p-overlaypanel {
+  min-width: 250px !important;
+}
+
+.solid-header-dropdown-panel .p-overlaypanel-content {
+  padding: 0;
+}
+
+.solid-view {
+  padding: 12px;
+}
+
+.p-password .p-icon-field {
+  width: 100%;
+}
+
+/* Auth */
+.solid-auth-theme-wrapper {
+  position: relative;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 100vh;
+  overflow: hidden;
+  /* padding: 100px 0; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100% !important;
+}
+
+/* .solid-center-layout {
+  max-width: 80%;
+  margin: 0 auto;
+} */
+
+/* .solid-auth-theme-wrapper.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+} */
+
+.auth-container {
+  min-width: 525px;
+}
+
+.auth-container.side {
+  max-width: 65%;
+  margin: 0 auto;
+}
+
+.solid-logo img {
+  width: 2.375rem !important;
+  height: 2.375rem !important;
+}
+
+.solid-logo-title {
+  line-height: 1.3;
+  font-weight: 700;
+}
+
+.solid-auth-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.875rem;
+}
+
+.solid-auth-input-label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+
+.theme-toggle {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.theme-toggle .small-button.p-togglebutton {
+  aspect-ratio: 1/1;
+}
+
+.solid-auth-subtitle a {
+  font-weight: 600;
+  text-decoration: underline;
+  font-size: 12px;
+}
+
+/* 
+.solid-custom-overlay.p-overlaypanel {
+  position: absolute;
+  top: 140px !important;
+  z-index: 1004 !important;
+  position: absolute;
+  left: 1656.25px !important;
+  transform-origin: center top !important;
+  --overlayArrowLeft: 93px;
+} */
+
+.solid-custom-overlay .p-overlaypanel-content {
+  padding: 0;
+  border-radius: 0.5rem;
+  border: 1px solid #D8E2EA;
+  box-shadow: 0px 4px 4px 0px rgba(200, 199, 199, 0.25);
+}
+
+.solid-custom-overlay.p-overlaypanel:after,
+.solid-custom-overlay.p-overlaypanel:before {
+  display: none;
+}
+
+
+.solid-login-dark-bg {
+  background-color: var(--solid-login-bg-color);
+}
+
+.solid-left-layout {
+  background-image: url(../public/images/auth/solid-left-layout-bg.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.solid-left-layout .solid-logo {
+  position: absolute;
+  right: 5rem;
+  top: 5rem;
+  z-index: 1;
+}
+
+.solid-right-layout {
+  background-image: url(../public/images/auth/solid-right-layout-bg.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.solid-right-layout .solid-logo {
+  position: absolute;
+  left: 5rem;
+  top: 5rem;
+  z-index: 1;
+}
+
+.solid-left-layout .solid-logo .solid-logo-title,
+.solid-right-layout .solid-logo .solid-logo-title {
+  color: #fff !important;
+}
+
+.customize-layout-panel.p-overlaypanel {
+  left: 1400px !important;
+  top: 21% !important;
+}
+
+.solid-auth-footer {
+  bottom: 2%;
+  width: 80%;
+  z-index: 999;
+}
+
+.auth-submit-button {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  gap: 10px;
+  transition: 0.2s linear;
+}
+
+.auth-submit-button .p-button-label {
+  flex: none;
+  font-weight: 400;
+}
+
+.auth-back-button .p-button-label {
+  font-weight: 400;
+  color: #AEAEAE;
+}
+
+.p-button.p-button-icon-only.custom-add-button {
+  padding: 4px !important;
+  width: 2rem;
+  height: 2rem;
+}
+
+.p-button.p-button-icon-only.custom-add-button .p-button-icon {
+  font-size: 10px;
+}
+
+.solid-field-metadata-form-header {
+  padding: 10px 14px 10px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--solid-light-grey);
+}
+
+.solid-auth-tabview .p-tabview-panels {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.solid-auth-tabview .p-tabview-nav {
+  border-radius: 0.5rem;
+  background: rgba(205, 205, 205, 0.20);
+  border: 1px solid #d7d7d7;
+  padding: 4px;
+  margin: 5px 0;
+}
+
+.solid-auth-tabview .p-tabview-nav a {
+  font-weight: 400;
+}
+
+.solid-auth-tabview .p-tabview-nav li {
+  flex: 1;
+  border-radius: 0.3rem;
+}
+
+.solid-auth-tabview .p-tabview-nav-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: var(--solid-grey-500) !important;
+}
+
+.solid-auth-tabview .p-tabview-selected.p-highlight {
+  background-color: var(--primary-color);
+}
+
+.solid-auth-tabview .p-tabview-selected.p-highlight .p-tabview-nav-link {
+  color: #fff !important;
+}
+
+.solid-auth-tabview .p-tabview-nav-link {
+  border: none !important;
+}
+
+.solid-global-search-filter .p-dialog-content {
+  padding: 0;
+  border-radius: 0.25rem;
+}
+
+.solid-global-search-filter .p-dialog-content h5 {
+  font-size: 1.25rem !important;
+}
+
+.solid-global-search-filter .p-fieldset .p-fieldset-legend {
+  padding: 0 !important;
+  border: none !important;
+  font-weight: 700;
+}
+
+.solid-global-search-filter .p-fieldset .p-fieldset-content {
+  padding: 0 1.25rem;
+}
+
+.custom-filter-condition-btn {
+  padding: 0.25rem 0.5rem !important;
+  font-size: 0.625rem !important;
+}
+
+.primary-filter-fieldset {
+  background-color: #F8F7FC;
+}
+
+.nested-custom-filter .primary-filter-fieldset {
+  background-color: #FFF;
+}
+
+.custom-filter-chip .p-chips-token {
+  padding: 0.25rem 0.5rem !important;
+  color: var(--primary-color) !important;
+  font-size: 0.875rem !important;
+  border-radius: 0.375rem !important;
+  background: #FBF5FF !important;
+}
+
+.solid-filter-action-btn .p-button-icon {
+  font-weight: 600;
+  color: var(--solid-form-title);
+  font-size: 1rem;
+}
+
+
+.custom-filter-chip .p-chips-token-icon.pi {
+  font-size: 12px !important;
+  color: #000000E0;
+}
+
+.custom-chip-column {
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.custom-chip-value {
+  color: #000000;
+}
+
+.custom-chip-or {
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 700;
+}
+
+.custom-filter-search-options button:first-child {
+  background-color: #64748b0a;
+}
+
+.custom-filter-search-options button:first-child:hover {
+  background-color: transparent;
+}
+
+.solid-layout-accordion {}
+
+.solid-layout-accordion .p-accordion .p-accordion-tab {
+  margin-bottom: 0;
+}
+
+.solid-layout-accordion a {
+  color: var(--solid-title);
+}
+
+.solid-layout-accordion .p-accordion .p-accordion-header .p-accordion-header-link {
+  border: none;
+  background-color: transparent;
+}
+
+.solid-layout-accordion .p-accordion-tab:first-child {
+  border-bottom: 1px solid var(--primary-light-color);
+}
+
+.solid-layout-accordion .p-accordion-content {
+  border: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+.solid-layout-accordion .p-accordion-header a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+}
+
+.solid-standard-autocomplete .p-inputtext {
+  border-right: none;
+}
+
+.solid-standard-autocomplete .p-autocomplete-dropdown.p-button {
+  background-color: #fff;
+  border-left: none;
+  border-color: #d1d5db;
+  color: rgba(0, 0, 0, 0.60);
+}
+
+.solid-standard-autocomplete:hover .p-autocomplete-dropdown.p-button,
+.solid-standard-autocomplete:hover .p-inputtext {
+  border-color: var(--primary-color);
+}
+
+/* Hide right shadow of input and left shadow of button to make them merge */
+.solid-standard-autocomplete .p-inputtext:focus {
+  box-shadow: 0 0 0 0.2rem #d3b5f5, inset -2px 0 0 #fff, inset 2px 0 0 transparent;
+}
+
+.solid-standard-autocomplete .p-inputtext:focus+.p-button {
+  box-shadow: 0 0 0 0.2rem #d3b5f5, inset -2px 0 0 transparent, inset 2px 0 0 #fff;
+  border-color: #d1d5db !important;
+}
+
+.solid-dialog .p-dialog-content {
+  padding: 0 !important;
+}
+
+.google-auth-button {
+  font-weight: 400 !important;
+  color: var(--solid-grey-500);
+  font-size: 14px;
+}
+
+.custom-input-group.p-inputgroup-addon:first-child,
+.custom-input-group.p-inputgroup button:first-child,
+.custom-input-group.p-inputgroup input:first-child,
+.custom-input-group.p-inputgroup>.p-inputwrapper:first-child,
+.custom-input-group.p-inputgroup>.p-inputwrapper:first-child>.p-inputtext {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+
+.custom-input-group.p-inputgroup-addon:last-child,
+.custom-input-group.p-inputgroup button:last-child,
+.custom-input-group.p-inputgroup input:last-child,
+.custom-input-group.p-inputgroup>.p-inputwrapper:last-child,
+.custom-input-group.p-inputgroup>.p-inputwrapper:last-child>.p-inputtext {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.solid-form-stepper-overlay .p-button {
+  min-width: 150px;
+}
+
+.solid-form-stepper-overlay .p-button .p-button-label {
+  color: var(--solid-title);
+  font-weight: 400 !important;
+  flex: none;
+  font-size: 14px;
+}
+
+.solid-form-stepper-overlay .p-button:hover .p-button-label {
+  color: #fff;
+}
+
+.solid-form-stepper-overlay .p-button.p-button-text:not(:disabled):hover {
+  background-color: var(--primary-color);
+}