Initial commit - Master Admin UI

preview/assets/scss/_variables.scss

@@ -0,0 +1,62 @@
+// :root {
+// 	--body-bg : 									240  241 247;
+// 	--primary: 										132 90  223;
+// 	--primary-rgb: 									132, 90 ,223;
+// 	--secondary :									35 183  229;
+// 	--warning :									    245 184 73;
+// 	--info :										73  182 245;
+// 	--success :										38  191 148;
+// 	--danger :										230  83  60;
+// 	--light :										243 246 248;
+// 	--dark :										35  35  35;
+// 	--orange : 										255 165   5;
+// 	--pink :                                       	231 145 188;
+// 	--teal : 										18 194 194;
+// 	--purple : 									    137  32 173;
+// 	--default-text-color:       					51   51  53;
+// 	--default-border:							    243 243 243;
+// 	--default-background: 							247 248 249;
+// 	--menu-prime-color:								83  100 133;
+// 	--menu-border-color:							243 243 243;
+// 	--header-prime-color:							83  100 133;
+// 	--header-border-color:							243 243 243;
+// 	--bootstrap-card-border:						243 243 243;
+// 	--list-hover-focus-bg:							245 246 247;
+// 	--text-muted: 								    140 144 151;
+// 	--input-border: 								233 237 246;
+// 	--red:                                          208  61  70;
+// 	--blue:											43   62 101;
+// 	--green:										29  216 113;
+// 	--cyan:											0   209 209;
+// 	--indigo:										77   93 219;
+// 	--gray:											134 153 163;
+// 	--yellow:										255 193   2;
+// 	--facebook: 									59   89 152;
+// 	--twitter: 										0   172 238;
+// 	--github:										51   51  51;
+// 	--google: 										207  78  67;
+// 	--youtube: 										255   0   0;
+
+// }
+
+// /* dark mode */
+// .dark{
+// 	--body-bg : 									26 28 30;
+// 	--dark-bg : 									37 39 41;
+// 	--light:										43 46 49;
+// 	--dark :										240 245 248;
+// 	--input-border: 									49 51 53;
+// 	--form-control-bg: 									35 38 40;
+// 	--default-text-color:                            255 255 255;
+// }
+
+
+
+
+
+
+
+
+
+
+ 

preview/assets/scss/custom/_authentication.scss

@@ -0,0 +1,130 @@
+.authentication {
+  @apply min-h-screen;
+
+  .authentication-brand {
+    &.desktop-logo {
+      @apply block;
+    }
+
+    &.desktop-dark {
+      @apply hidden;
+    }
+  }
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    @apply w-[1.563rem]! h-[1.563rem]! text-white! bg-black/30! rounded-md!;
+    &:after,&:before {
+        @apply text-white! ;
+    }
+  }
+
+  .swiper-pagination-bullet {
+    @apply w-[1.25rem]! h-[0.25rem]! rounded-md! bg-white! dark:!bg-bodybg;
+  }
+
+  .swiper-pagination-bullet-active {
+    @apply bg-white! dark:!bg-bodybg ;
+  }
+
+  .swiper-pagination-bullet {
+    @apply opacity-[0.1];
+  }
+
+  .swiper-pagination-bullet-active {
+    @apply opacity-[0.5];
+  }
+
+  .google-svg {
+    @apply w-3 h-3 me-2;
+  }
+
+  .authentication-barrier {
+    @apply relative before:absolute before:w-[45%] before:h-[0.125rem] before:bg-gradient-to-l before:from-transparent before:to-light before:rounded-full before:end-0 before:top-[0.563rem] before:z-[1] after:absolute after:w-[45%] after:h-[0.125rem] after:bg-gradient-to-l after:from-light after:to-transparent after:rounded-full after:start-0 after:top-[0.563rem] after:z-[1];
+
+    span {
+      @apply relative z-[2];
+    }
+  }
+
+  &.coming-soon,
+  &.under-maintenance {
+    .authentication-cover {
+      @apply bg-[url('../images/media/media-19.jpg')];
+
+      .aunthentication-cover-content {
+        @apply w-full h-full p-[3rem] backdrop:filter-none bg-white dark:bg-bodybg;
+
+        &:before,
+        &:after {
+          @apply hidden;
+        }
+
+        .coming-soon-time,
+        .under-maintenance-time {
+          @apply border-2 border-dashed border-black/10;
+        }
+
+        .authentication-brand {
+          @apply w-auto h-auto border-0;
+        }
+      }
+    }
+  }
+
+  .coming-soom-image-container,
+  .under-maintenance-image-container {
+    img {
+      @apply w-full h-auto;
+    }
+  }
+
+  .authentication-cover {
+    @apply bg-[url('../images/authentication/1.jpg')] bg-cover bg-center bg-no-repeat w-full h-full flex items-center justify-center relative before:absolute before:w-full before:h-full before:inset-0 before:bg-primary/10;
+
+    .aunthentication-cover-content {
+      @apply w-[70%]! h-[37.5rem]! bg-black/20! p-8! backdrop-blur-[1.875rem]! relative! ;
+
+      img {
+        @apply my-0 mx-auto w-[13.75rem] h-[13.75rem];
+      }
+    }
+  }
+
+  &.authentication-basic {
+    .desktop-dark {
+      @apply hidden;
+    }
+
+    .desktop-logo {
+      @apply block;
+    }
+  }
+}
+
+.dark {
+  .authentication {
+    &.authentication-basic {
+      .desktop-dark {
+        @apply block;
+      }
+
+      .desktop-logo {
+        @apply hidden;
+      }
+    }
+
+    .authentication-brand {
+      &.desktop-logo {
+        @apply hidden;
+      }
+
+      &.desktop-dark {
+        @apply block;
+      }
+    }
+  }
+}
+// .under-maintenance,.coming-soon {
+//     @apply p-[3rem]!;
+// }

preview/assets/scss/custom/_error.scss

@@ -0,0 +1,14 @@
+#particles-js {
+    @apply absolute w-full h-full bg-white;
+}
+.error-page {
+    @apply absolute w-full min-h-screen flex bg-center bg-cover bg-no-repeat items-center justify-center;
+}
+.error-text {
+    @apply text-[8.25rem] font-medium leading-none;
+}
+@media (max-width: 575.98px) {
+    .error-text {
+        @apply text-[3rem];
+    }
+}

preview/assets/scss/custom/_header.scss

@@ -0,0 +1,432 @@
+
+/* Start::app-header */
+.app-header {
+  @apply w-full max-w-full h-[3.75rem] z-[100] fixed top-0 start-0 border-b border-b-headerbordercolor dark:border-white/10 transition-all ease-linear duration-[0.1s] bg-white dark:bg-bodybg;
+
+  #mainHeaderProfile {
+    @apply text-headerprimecolor;
+  }
+}
+
+.app-header {
+  @apply lg:ps-60;
+}
+
+.header-icon-badge {
+  @apply absolute py-[0.15rem] px-1 top-3 bottom-[0.45rem] text-[0.625rem];
+}
+
+.related-app {
+  @apply text-center rounded-md border border-defaultborder dark:border-white/10;
+
+  &:hover {
+    @apply bg-light;
+  }
+}
+
+.header-profile-dropdown {
+  @apply min-w-[11rem] top-[15px]!;
+}
+.dark {
+  .dropdown-profile {
+    p {
+      @apply text-white/70;
+    }
+    span {
+      @apply text-white/70;
+    }
+  }
+}
+/* End::app-header */
+
+/* Start::main-header-container */
+.main-header-container {
+  @apply flex items-stretch justify-between h-full;
+
+  .header-content-left,
+  .header-content-right {
+    @apply flex items-center!;
+  }
+
+  .header-element {
+    @apply flex items-stretch;
+  }
+
+  .header-link {
+    @apply flex items-center py-4 px-[0.65rem];
+
+    &:hover,
+    &.show {
+      .header-link-icon {
+        @apply fill-headerprimecolor  text-headerprimecolor;
+      }
+    }
+  }
+
+  .header-link-icon {
+    @apply w-7 h-7 text-xl text-headerprimecolor fill-headerprimecolor transition-all ease-linear duration-[0.05s] flex items-center relative rounded-[50%] p-1;
+
+    &:hover {
+      @apply bg-light;
+    }
+  }
+
+  .dropdown-toggle {
+    @apply no-underline;
+
+    &::after {
+      @apply content-none;
+    }
+  }
+
+  .main-profile-user {
+    .dropdown-menu {
+      @apply w-52;
+    }
+
+    .dropdown-item {
+      @apply font-normal text-[0.8125rem] text-defaulttextcolor py-5 px-4 h-[2.375rem] flex items-center;
+
+      &:hover {
+        @apply text-primary;
+
+        i {
+          @apply text-primary opacity-[1];
+        }
+      }
+    }
+  }
+
+  .main-header-dropdown {
+    @apply top-[-3px] shadow-[0rem_0.25rem_0.625rem_rgba(20,20,20,0.1)];
+
+    &.header-shortcuts-dropdown {
+      @apply w-[22rem];
+    }
+
+    .dropdown-item {
+      @apply p-[0.65rem] border-b border-b-defaultborder dark:border-b-white/10;
+
+      &:last-child {
+        @apply border-b-0;
+      }
+    }
+  }
+
+  .cart-dropdown .main-header-dropdown {
+    @apply w-[22rem]!;
+  }
+
+  .notifications-dropdown .main-header-dropdown {
+    @apply w-[22rem];
+  }
+}
+
+// @keyframes slideIn {
+//   0% {
+//     @apply opacity-0 translate-y-24;
+//   }
+
+//   100% {
+//     @apply opacity-[1];
+//   }
+
+//   0% {
+//     @apply opacity-0 translate-y-24;
+//   }
+// }
+
+[dir="rtl"] {
+  .sidemenu-toggle {
+    .open-toggle {
+      @apply rotate-180;
+    }
+  }
+}
+
+/* End::main-header-container */
+
+/* Start::Header-dropdown */
+.header-product-item {
+  @apply ps-0 flex;
+
+  li {
+    @apply relative list-none text-[0.75rem] font-normal text-textmuted pe-[0.938rem];
+  }
+
+  li:nth-child(2),
+  li:nth-child(3),
+  li:nth-child(4) {
+    @apply before:absolute before:start-[-0.438rem] before:w-px before:top-1 before:h-2.5 before:bg-textmuted before:opacity-[0.1];
+  }
+}
+
+.header-cart-remove {
+  .ti {
+    @apply p-1 rounded-sm text-[0.85rem] ms-3 text-danger;
+  }
+
+  &:hover {
+    .ti {
+      @apply bg-danger/10;
+    }
+  }
+}
+
+/* End::Header-dropdown */
+
+/* Start::header-search */
+#searchModal {
+  .form-control {
+    @apply relative;
+  }
+
+  .input-group {
+    @apply border-[2px] border-primary rounded-sm;
+
+    i {
+      @apply text-textmuted;
+    }
+  }
+}
+
+.search-tags {
+  @apply text-[0.75rem] text-defaulttextcolor border border-defaultborder rounded-sm bg-light py-0.5 px-[0.55rem] leading-[1.2] inline-flex items-center cursor-default font-normal m-1;
+
+  .tag-addon:last-child {
+    @apply rounded-md;
+  }
+
+  a.tag-addon {
+    @apply no-underline cursor-pointer inline-block py-0 px-2  bg-light me-[-0.4rem] ms-2 text-center min-w-[1.5rem];
+
+    i {
+      @apply align-middle my-0 -mx-[0.25rem] leading-6 text-[var(--font-size-defaultsize)];
+    }
+  }
+
+  i {
+    @apply text-[var(--font-size-defaultsize)];
+  }
+}
+
+/* End::header-search */
+
+/* Start::header-country-selector */
+.country-selector {
+  .header-link img {
+    @apply w-5 h-5;
+  }
+
+  .dropdown-menu {
+    img {
+      @apply w-4 h-4;
+    }
+  }
+}
+
+/* End::header-country-selector */
+
+/* Start:header dropdowns scroll */
+#header-shortcut-scroll,
+#header-notification-scroll,
+#header-cart-items-scroll {
+  @apply max-h-80;
+}
+
+/* End:header dropdowns scroll */
+
+/* Start::header badge pulse */
+.pulse {
+  @apply block cursor-pointer animate-pulse;
+
+  &.pulse-secondary {
+    @apply shadow-[0rem_0rem_0rem_rgba(35,183,229,0.4)];
+  }
+}
+
+@-webkit-keyframes pulse-secondary {
+  0% {
+    @apply shadow-[0_0_0_0_secondary/40];
+  }
+
+  70% {
+    @apply shadow-[0_0_0_0_secondary/0];
+  }
+
+  100% {
+    @apply shadow-[0_0_0_0_secondary/0];
+  }
+}
+
+// @keyframes pulse-secondary {
+//   0% {
+//     @apply shadow-[0_0_0_0_secondary/40];
+//   }
+
+//   70% {
+//     @apply shadow-[0_0_0_0_secondary/0];
+//   }
+
+//   100% {
+//     @apply shadow-[0_0_0_0_secondary/0];
+//   }
+// }
+
+/* End::header badge pulse */
+
+/* Start::Header theme-mode icon style */
+[class="light"] {
+  .layout-setting .dark-layout {
+    @apply hidden;
+  }
+
+  .layout-setting .light-layout {
+    @apply block;
+    display: block;
+  }
+}
+
+.layout-setting .dark-layout {
+  @apply hidden;
+}
+
+.layout-setting .light-layout {
+  display: block;
+}
+
+.dark {
+  .layout-setting .light-layout {
+    @apply hidden;
+  }
+
+  .layout-setting .dark-layout {
+    @apply block;
+  }
+}
+
+/* End::Header theme-mode icon style */
+
+/* Start::Header fullscreen responsive */
+@media (max-width: 767.98px) {
+  .header-element.header-fullscreen {
+    @apply hidden;
+  }
+}
+
+/* End::Header fullscreen responsive */
+
+/* Start::Responsive header dropdowns */
+@media (max-width: 575.98px) {
+  .app-header {
+    .dropdown-menu {
+      @apply w-full;
+    }
+  }
+}
+
+/* End::Responsive header dropdowns */
+
+/* Start::toggle */
+.animated-arrow.hor-toggle {
+  @apply text-center w-8 text-[1.2rem] relative m-[0.3125rem] me-[0.625rem];
+}
+
+.animated-arrow {
+  @apply absolute start-0 top-0 z-[50] cursor-pointer p-[0.3125rem] mt-[0.375rem] mb-0 ms-2 me-0 transition-all ease-in-out duration-[0.05s];
+}
+
+.animated-arrow.hor-toggle span {
+  @apply align-middle;
+}
+
+.animated-arrow span {
+  @apply cursor-pointer h-0.5 w-3 bg-headerprimecolor dark:bg-white/60 absolute block content-[""] transition-all ease-in-out duration-[0.05s];
+}
+
+.animated-arrow span:before,
+.animated-arrow span:after {
+  @apply transition-all ease-in-out duration-[0.05s];
+}
+
+.animated-arrow span {
+  @apply before:top-[-0.375rem] before:w-[1.4375rem];
+}
+
+.animated-arrow span {
+  @apply after:bottom-[-0.375rem] after:w-60;
+}
+
+.animated-arrow span:before,
+.animated-arrow span:after {
+  @apply cursor-pointer h-0.5 w-[1.0625rem] bg-headerprimecolor dark:bg-white/60 absolute block content-[""];
+}
+[data-toggled="icon-overlay-close"],
+[data-toggled="close-menu-close"],
+[data-toggled="icon-text-close"],
+[data-toggled="detached-close"],
+[data-toggled="menu-click-closed"],
+[data-toggled="menu-hover-closed"],
+[data-toggled="icon-click-closed"],
+[data-toggled="icon-hover-closed"],
+[data-toggled="double-menu-close"] {
+  .animated-arrow span {
+    @apply bg-transparent! bg-none! ;
+  }
+
+  .animated-arrow span {
+    @apply before:!rotate-45 before:!bottom-0 ;
+  }
+
+  .animated-arrow span {
+    @apply before:!top-0;
+  }
+
+  .animated-arrow span {
+    @apply after:!-rotate-45;
+  }
+
+  .animated-arrow span {
+    @apply after:!w-[1.0625rem] after:!top-0;
+  }
+}
+
+/* End::toggle */
+
+/* Start::header notification dropdown */
+.header-notification-text {
+  @apply max-w-[14.5rem];
+}
+
+/* Start::header notification dropdown */
+.header-icon {
+  @apply text-[1.125rem] leading-[1.75rem] text-headerprimecolor;
+}
+
+.badge {
+  @apply py-[0.25rem] px-[0.45rem] font-[600] rounded-sm leading-none text-center;
+}
+
+.avatar.avatar-sm {
+  @apply w-[1.75rem]! h-[1.75rem]! leading-[1.75rem]! text-[0.65rem]! ;
+}
+
+.dropdown-divider {
+  @apply m-0 border-defaultborder dark:border-defaultborder/10 border-t;
+}
+.dark {
+  .app-header {
+    @apply bg-bodybg! border-b! border-b-white/10!;
+  }
+}
+@media (max-width: 575.98px) {
+  .main-header-container .header-element > button,
+  .main-header-container .header-element > a {
+    @apply py-4!;
+  }
+}
+@media (max-width: 991.98px) {
+  .app-header .horizontal-logo .header-logo img {
+    @apply h-8 leading-8;
+  }
+}

preview/assets/scss/custom/_job_landing.scss

@@ -0,0 +1,39 @@
+.bg-banner-2 {
+  @apply relative top-0 bg-[url('../images/media/backgrounds/4.png')] bg-cover bg-center bg-no-repeat z-[0] before:absolute before:w-full before:h-full before:bg-primary/80 before:inset-0 before:-z-[1] ;
+}
+.featured-jobs {
+  @apply hidden border border-solid border-defaultborder dark:border-defaultborder/10;
+}
+.feature-style .feature-style-icon {
+  @apply relative! w-[4rem]! h-[4rem]! leading-[4rem]! text-[1.25rem]! items-center! justify-center! inline-flex! rounded-full! font-medium!;
+}
+.feature-style .feature-style-icon img, .feature-style .feature-style-icon svg {
+  @apply w-[2.5rem] h-[2.5rem];
+}
+.feature-style {
+  @apply relative hidden overflow-hidden before:absolute before:w-[4rem] before:h-[4rem] before:-end-[1.5rem] before:-bottom-[1.5rem] before:bg-primary/10 before:rounded-full;
+}
+.bg-banner {
+  @apply bg-primary dark:bg-primary text-white relative overflow-hidden z-[1] before:absolute before:h-full before:w-full before:top-0 before:bg-[url('../images/media/backgrounds/7.jpg')] before:bg-no-repeat
+  before:bg-bottom before:bg-cover before:opacity-[0.1] before:transition-all before:ease-linear before:duration-[0.3sec] before:-z-[1];
+}
+.featured-card-4 svg {
+  @apply w-[1.5rem] h-[1.5rem];
+}
+// .landing-footer-list li {
+//   @apply  py-0 px-[12px];
+// }
+.landing-body .landing-main-footer .landing-footer-list li:not(:first-child) {
+  @apply relative before:absolute before:w-[0.3rem] before:h-[0.3rem] before:border before:border-solid before:border-defaultborder/10 before:rounded-full before:bg-transparent
+  before:-start-[0.2rem] before:top-2;
+}
+.custom-form-group {
+  @apply relative flex items-center;
+}
+.custom-form-group .custom-form-btn {
+  @apply absolute end-2 rounded-[0.3rem] flex items-center justify-center bg-white dark:bg-bodybg;
+}
+
+.custom-form-group .custom-form-btn .gps-location {
+  @apply text-textmuted opacity-[0.6] text-[1.0625rem] leading-[0] me-[10px];
+}

preview/assets/scss/custom/_landing.scss

@@ -0,0 +1,513 @@
+/* Start Landing Styles */
+.landing-body .landing-main-image img {
+  @apply z-[11] relative w-[26.063rem] h-[26.063rem] bg-black/[0.05] rounded-full before:absolute before:w-[24.5rem] before:h-[24.5rem] before:bg-black/10 before:opacity-[0.3] before:start-[5rem] before:top-[0rem] before:rounded-full
+  after:absolute after:w-[12.5rem] after:h-[12.5rem] after:bg-transparent after:border-primary/50 after:opacity-[0.3] after:start-[5.1rem] after:bottom-[4.4rem];
+}
+
+[data-nav-layout="horizontal"] {
+  @media (min-width: 992px) {
+    &[class="dark"] {
+      .landing-body {
+        .app-sidebar .slide.has-sub.open .slide-menu.child1::before {
+          @apply bg-bodybg!;
+        }
+        .app-sidebar.sticky.sticky-pin {
+          .landing-logo-container {
+            .responsive-logo-dark img {
+              @apply block;
+            }
+            .responsive-logo-light img {
+              @apply hidden;
+            }
+          }
+        }
+      }
+      .landing-body {
+        .app-sidebar.sticky {
+          @apply bg-primary/10!;
+        }
+        .app-sidebar.sticky.sticky-pin {
+          @apply bg-bodybg! shadow-[0_0.25rem_1rem_rgba(255,255,255,0.1)]!;
+        }
+      }
+    }
+    &[class="light"] {
+      .landing-body {
+        .app-sidebar.sticky.sticky-pin {
+          @apply shadow-[0_0.25rem_1rem_rgba(0,0,0,0.1)]!;
+        }
+        .app-sidebar.sticky.sticky-pin {
+          .responsive-logo-dark img {
+            @apply hidden!;
+          }
+          .responsive-logo-light img {
+            @apply block!;
+          }
+        }
+      }
+    }
+    .landing-body {
+      .app-sidebar {
+        @apply bg-primary/10 dark:bg-primary/10 py-4;
+        .side-menu__item .side-menu__angle {
+          @apply text-white! dark:!text-defaulttextcolor/10;
+        }
+        .slide.has-sub.open {
+          .slide-menu {
+            &.child1,
+            &.child2,
+            &.child3 {
+              @apply bg-white dark:bg-bodybg;
+              .slide .side-menu__item {
+                .side-menu__angle {
+                  @apply text-[#536485]! dark:!text-defaulttextcolor/10;
+                }
+                &:hover,
+                &.active {
+                  @apply text-primary!;
+                  .side-menu__angle {
+                    @apply text-primary!;
+                  }
+                  &::before {
+                    @apply border-primary!;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .side-menu__item {
+          @apply rounded-sm p-[0.3rem];
+        }
+
+        .slide-menu.child1 {
+          @apply rounded-sm py-[0.55rem] px-[0.3rem];
+          .side-menu__item {
+            @apply px-[1.6rem]! py-2!;
+          }
+        }
+
+        .slide.has-sub.open .slide-menu.child1 {
+          @apply overflow-visible! text-defaulttextcolor! dark:!text-defaulttextcolor/70 start-auto! hover:!text-primary active:!text-primary before:!absolute before:!-top-[7px] before:!start-[10%] before:!w-[13px] before:!h-[13px] before:!z-[99999] before:!border
+          before:!border-solid before:!border-transparent before:!rotate-45 before:!bg-white;
+        }
+        .slide.has-sub .slide-menu {
+          @apply start-auto!;
+        }
+        .side-menu__item {
+          @apply pe-[1.3rem] ps-[1.3rem] text-[#536485];
+        }
+
+        .side-menu__item.active,
+        .side-menu__item:hover {
+          @apply bg-transparent! text-primary!;
+          .side-menu__label,
+          .side-menu__angle {
+            @apply text-white! opacity-100!;
+          }
+        }
+
+        .slide-menu.child1 .slide .side-menu__item:before {
+          @apply top-[1.2rem]! start-[0.65rem]!;
+        }
+
+        .landing-logo-container {
+          .responsive-logo-dark img {
+            @apply block;
+          }
+          .responsive-logo-light img {
+            @apply hidden;
+          }
+        }
+      }
+      .app-sidebar.sticky.sticky-pin {
+        .side-menu__label {
+          @apply text-defaulttextcolor! dark:!text-white;
+        }
+        .side-menu__angle {
+          @apply text-defaulttextcolor! dark:!text-white;
+        }
+        .side-menu__item {
+          &.active,
+          &:hover {
+            @apply text-primary!;
+
+            .side-menu__label,
+            .side-menu__angle {
+              @apply text-primary!;
+            }
+          }
+        }
+        .landing-logo-container {
+          .responsive-logo-dark img {
+            @apply hidden;
+          }
+          .responsive-logo-light img {
+            @apply block;
+          }
+        }
+      }
+    }
+
+    .landing-body .app-sidebar .sticky {
+      @apply top-0!  px-0! h-auto! bg-primary/10! dark:!bg-primary/10 shadow-none! border-e-0!;
+    }
+    .landing-body .app-sidebar .main-sidebar {
+      @apply h-auto!;
+    }
+    .landing-body .app-sidebar.sticky.sticky-pin {
+      @apply bg-white dark:bg-bodybg;
+    }
+  }
+
+  .landing-body {
+    .app-sidebar {
+      .slide .side-menu__item {
+        @apply py-[0.8rem]! px-4!;
+
+        &.active,
+        &:hover {
+          @apply text-white dark:text-defaulttextcolor/10;
+        }
+      }
+    }
+    .app-sidebar .sticky.sticky-pin .side-menu__item.active {
+      @apply font-normal;
+
+      .side-menu__label {
+        @apply text-defaulttextcolor!;
+      }
+    }
+    .accordion.accordion-primary .accordion-button.collapsed:after {
+      @apply bg-white! dark:!bg-bodybg text-primary! ;
+    }
+    .landing-banner {
+      @apply relative w-full h-[37rem] top-0 bg-[url('../images/media/landing/banner.jpg')] bg-cover bg-center bg-no-repeat
+        before:absolute before:w-full before:h-full before:bg-primary before:opacity-70;
+
+      .main-banner-container {
+        @apply py-[4rem] px-[3rem];
+      }
+
+      .landing-banner-heading {
+        @apply leading-[1.25]  text-[3rem] font-[600] text-white dark:text-defaulttextcolor/10;
+      }
+    }
+    .main-menu-container .main-menu {
+      @apply ps-0;
+    }
+    .content {
+      @apply mt-[4rem];
+    }
+    .section {
+      @apply py-[3.375rem] px-0 bg-cover relative;
+    }
+    .featur-icon {
+      @apply w-[75px] h-[75px] p-[14px] rounded-full bg-white/[0.05] my-0 mx-auto;
+    }
+
+    .feature-logos {
+      @apply flex justify-center;
+    }
+
+    .landing-Features {
+      @apply relative w-full h-full top-0 bg-[url('../images/media/landing/2.jpg')] bg-cover bg-center bg-no-repeat z-[9]
+        before:absolute before:w-full before:h-full before:top-0 before:-z-[1] before:bg-primary/95;
+    }
+    .landing-testimonials .swiper-pagination-bullet {
+      @apply bg-primary!;
+
+      &:active {
+        @apply bg-primary!;
+      }
+    }
+    .landing-section-heading {
+      @apply relative text-[0.813rem] font-[600] before:absolute before:w-[60%] before:h-[0.25rem] before:bg-gradient-to-r before:from-success before:to-success/10 before:opacity-[0.5] before:-top-[0.625rem] before:rounded-[3.125rem] before:end-0;
+    }
+    .customize-image img {
+      @apply w-[30.5rem] h-[20rem] mt-[20px] p-[15px] relative;
+    }
+    h3 {
+      @apply text-[1.75rem];
+    }
+    .team-card .team-avatar {
+      @apply shadow-[0_0_0_0.5rem_rgba(0,0,0,0.05)]! ;
+    }
+    .landing-footer {
+      @apply bg-black! border-b! border-solid! border-white/10! ;
+    }
+    .landing-main-footer {
+      @apply bg-black;
+    }
+    .landing-footer-list li {
+      @apply mb-2;
+    }
+    .brand-img-white {
+      @apply block;
+    }
+    .swiper-pagination-bullet {
+      @apply w-[1.25rem]! h-[0.25rem]! rounded-md! bg-white! dark:!bg-bodybg;
+    }
+
+    .brand-img-light {
+      @apply block;
+    }
+    @media (min-width: 992px) {
+      .app-sidebar {
+        @apply top-0! px-0! h-auto! shadow-none! border-0!;
+        .side-menu__label {
+          @apply text-white dark:text-defaulttextcolor/10 opacity-[0.8];
+        }
+
+        .main-sidebar {
+          @apply h-auto!;
+        }
+
+        .side-menu__item {
+          .side-menu__angle {
+            @apply text-[#536485];
+          }
+          &:hover {
+            .side-menu__angle {
+              @apply text-white dark:text-defaulttextcolor/10;
+            }
+          }
+        }
+        &.app-sidebar .side-menu__label {
+          @apply text-white dark:text-defaulttextcolor/10;
+        }
+
+        .landing-logo-container .horizontal-logo {
+          .desktop-white {
+            @apply hidden;
+          }
+
+          .desktop-logo {
+            @apply block;
+          }
+        }
+        &.app-sidebar .side-menu__item:hover {
+          .side-menu__label {
+            @apply text-white dark:text-defaulttextcolor/10;
+          }
+        }
+      }
+
+      .app-header {
+        @apply hidden;
+      }
+
+      .main-sidebar-header {
+        @apply block!;
+      }
+
+      .main-menu-container {
+        @apply flex items-center justify-between;
+
+        .slide-left,
+        .slide-right {
+          @apply hidden;
+        }
+      }
+
+      .main-content {
+        @apply p-0;
+      }
+
+      .landing-logo-container {
+        .horizontal-logo .header-logo {
+          .desktop-logo {
+            @apply hidden;
+          }
+        }
+      }
+    }
+    iframe {
+      @apply w-full;
+    }
+    @media (max-width: 991.98px) {
+      .app-sidebar .side-menu__item.active,
+      .app-sidebar .side-menu__item:hover {
+        @apply bg-transparent;
+      }
+      .main-menu-container .main-menu {
+        @apply ps-[20px]!;
+      }
+
+      .app-sidebar {
+        .slide {
+          @apply p-0;
+        }
+      }
+
+      .landing-logo-container {
+        .horizontal-logo .header-logo {
+          .desktop-logo {
+            @apply hidden!;
+          }
+
+          .desktop-white {
+            @apply hidden!;
+          }
+        }
+      }
+    }
+    @media (max-width: 1115.98px) {
+      .landing-body .landing-main-image img {
+        @apply bg-transparent! before:!hidden after:!hidden;
+      }
+    }
+
+    @media (max-width: 767.98px) {
+      .landing-banner {
+        @apply h-[34rem];
+
+        .main-banner-container {
+          @apply p-4;
+        }
+      }
+    }
+
+    @media (max-width: 400px) {
+      .landing-body .landing-banner {
+        @apply h-[45rem];
+      }
+    }
+
+    @media (max-width: 480px) {
+      .landing-banner {
+        .section {
+          @apply py-[4.375rem] px-0;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 420px) {
+    .landing-body .landing-banner {
+      @apply h-[37.5rem];
+
+      .main-banner-container {
+        @apply p-4;
+      }
+
+      .landing-banner-heading {
+        @apply text-[2rem];
+      }
+    }
+  }
+  @media (max-width: 992px) {
+    .landing-body {
+      .app-sidebar .side-menu__item {
+        @apply py-[0.8rem] pr-[5rem] ps-4;
+      }
+      .app-sidebar .slide-menu.child1 li,
+      .app-sidebar .slide-menu.child2 li,
+      .app-sidebar .slide-menu.child3 li {
+        @apply p-0 ps-0 relative;
+      }
+    }
+  }
+
+  &.dark {
+    @media (min-width: 992px) {
+      .landing-body {
+        .main-menu-container {
+          .landing-logo-container {
+            .horizontal-logo .header-logo {
+              .desktop-logo {
+                @apply hidden!;
+              }
+            }
+          }
+        }
+        .app-sidebar .side-menu__item {
+          @apply text-defaulttextcolor/70;
+        }
+      }
+    }
+    .landing-body {
+      @media (max-width: 991.98px) {
+        .app-header {
+          .main-header-container {
+            .horizontal-logo .header-logo {
+              .toggle-logo {
+                @apply hidden;
+              }
+
+              .toggle-dark {
+                @apply block;
+              }
+            }
+          }
+        }
+      }
+
+      .landing-trusted-companies {
+        img {
+          @apply invert-[1];
+        }
+      }
+      .app-sidebar.sticky-pin {
+        .landing-logo-container .horizontal-logo {
+          .desktop-white {
+            @apply block;
+          }
+        }
+      }
+    }
+
+    .brand-img-light {
+      @apply block;
+    }
+
+    .brand-img-white {
+      @apply hidden;
+    }
+
+    .section-bg {
+      @apply bg-black/10;
+    }
+  }
+  .landing-body {
+    @media (min-width: 992px) {
+      .app-sidebar {
+        .main-menu {
+          @apply pe-6;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 991.98px) {
+    .landing-body {
+      .main-content {
+        @apply pt-[3.75rem]!;
+      }
+    }
+    .landing-main-image {
+      @apply hidden;
+    }
+  }
+}
+.landing-body {
+  .pickr-container-primary :last-child button {
+    @apply block;
+  }
+  .pickr-container-background :last-child button {
+    @apply block;
+  }
+}
+@media (max-width: 991.98px) {
+  .landing-body {
+    .app-sidebar .slide-menu {
+      @apply ps-4;
+    }
+    .app-sidebar .slide-menu.child1 .side-menu__item,
+    .app-sidebar .slide-menu.child2 .side-menu__item {
+      @apply py-[0.45rem] px-[1.6rem]!;
+    }
+  }
+}
+/* End Landing Styles */

preview/assets/scss/global/_custom.scss

@@ -0,0 +1,724 @@
+
+
+// grid js
+.no-border-gridjs {
+  .gridjs.gridjs-container{
+    .gridjs-wrapper{
+      @apply border-0
+    }
+  }
+}
+.custom-gridjs{
+  .gridjs-table{
+    .gridjs-thead{
+    .gridjs-tr {
+    .gridjs-th:hover {
+         @apply bg-bodybg
+      }
+    }
+  }
+  }
+  th.gridjs-th-sort:focus, th.gridjs-th-sort:hover{
+     @apply  bg-bodybg;
+  }
+}
+#grid-header-fixed{
+  .custom-gridjs{
+  .gridjs.gridjs-container{
+    .gridjs-wrapper {
+      @apply border-0
+    }
+
+  }
+  }
+}
+.gridjs-pagination .gridjs-pages button:last-child {
+  @apply dark:border-defaultborder/10
+}
+
+
+
+
+
+input{
+ @apply focus-visible:outline-none!;
+}
+
+ input[type="radio"] {
+   @apply w-4 h-4 cursor-pointer relative bg-white dark:bg-transparent border border-inputborder p-0.5 rounded-[50%] checked:bg-primary checked:after:content-[""] checked:after:absolute checked:after:w-[6px] checked:after:h-[6px] checked:after:bg-white checked:after:-translate-x-2/4 checked:after:-translate-y-2/4 checked:after:rounded-[50%] checked:after:left-2/4 checked:after:top-2/4 disabled:opacity-50 disabled:cursor-not-allowed;
+ }
+
+input[type="checkbox"].form-check-input {
+  @apply w-4 h-4 cursor-pointer relative bg-white dark:bg-transparent dark:border dark:border-defaultborder/10 p-0.5 rounded-sm
+  checked:bg-primary checked:after:content-['\EB7B'] checked:after:font-[remixicon] checked:after:absolute checked:after:text-white checked:after:text-[0.65rem]
+  checked:after:font-bold checked:after:-translate-x-2/4 checked:after:-translate-y-2/4 checked:after:left-2/4 checked:after:top-2/4
+  disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+.dark {
+  input[type="date"].calenderColor::-webkit-calendar-picker-indicator ,
+  input[type="week"].calenderColor::-webkit-calendar-picker-indicator ,
+  input[type="month"].calenderColor::-webkit-calendar-picker-indicator,
+  input[type="time"].calenderColor::-webkit-calendar-picker-indicator ,
+  input[type="datetime-local"].calenderColor::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    /* flips dark icon to light */
+    /* optional: adds white background */
+    color: white;
+    /* sets icon color to white */
+    opacity: 1;
+    /* ensures it's visible */
+  }
+}
+
+
+.custom-select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23808080' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+    background-size: 1.25rem 0.8rem !important;
+    @apply bg-no-repeat bg-[calc(100%_-_0.35rem)_center] pr-10 appearance-none;
+  }
+[dir=rtl] .custom-select {
+    background-position: .35rem center;
+}
+
+
+.apexcharts-svg,
+.apexcharts-canvas {
+  @apply w-full! focus:!outline-none;
+
+}
+
+.ng-select .ng-select-container {
+    @apply min-h-[40px]!;
+}
+.form-control.angualr-search {
+    @apply w-[250px]!
+}
+
+ .mat-mdc-header-row {
+    @apply z-[10] relative;
+  }
+
+
+
+
+.swiper {
+
+  &::part(button-prev),
+  &::part(button-next) {
+    @apply h-[1.2rem] w-[1.2rem]! p-[5px]! rounded-[0.5rem] bg-[#0000004d] text-[#fffafa];
+
+  }
+
+  &::part(bullet-active){
+    @apply bg-white w-5 h-1 rounded-md  text-black;
+  }
+  &::part(bullet){
+     @apply bg-[rgba(255,_255,_255,_0.6)] text-black  opacity-[0.5] w-5 h-1 rounded-md ;
+  }
+
+}
+
+.landing-body{
+.swiper.pagination-dynamic {
+
+
+  &::part(bullet-active){
+    @apply bg-primary w-5 h-1 rounded-md  text-black;
+  }
+  &::part(bullet){
+     @apply bg-[rgba(0,_0,_0,_0.3)] dark:bg-[rgba(255,_255,_255,_0.6)] text-black  opacity-[0.5] w-5 h-1 rounded-md ;
+  }
+
+}
+}
+
+.swiper.custom-pagination{
+  &::part(bullet-active){
+    @apply bg-white w-5 h-5 rounded-md  text-black;
+  }
+   &::part(bullet){
+      @apply bg-[rgba(255,_255,_255,_0.6)] text-black  opacity-[0.5] w-5 h-5 rounded-md ;
+  }
+}
+
+
+// .hs-overlay-backdrop{
+//  @apply hs-overlay-backdrop-open:bg-[#32325180] dark:hs-overlay-backdrop-open:!bg-[#323251cc];
+// }
+// .iconclick {
+//   @apply  z-[-1] relative ;
+// }
+.iconclick {
+    position: relative;
+    color: inherit;
+    display: inline-flex;
+    pointer-events: none;
+}
+
+.pickr {
+  .color-picker {
+    @apply visible;
+    visibility: visible !important;
+    left: 0px !important;
+  }
+}
+
+.color-picker.open {
+    .hex-text,
+    .hsla-text,
+    .rgba-text{
+      .box{
+        @apply   border border-defaultborder dark:border-defaultborder/10 dark:!text-white mb-[2px] p-[2px];
+        input{
+          @apply border-0 dark:!text-white;
+        }
+         div{
+          @apply dark:!text-white;
+        }
+      }
+    }
+
+}
+#stocks-marketcap{
+ @apply w-full!
+}
+
+
+@media (max-width:440px) {
+    #stepline-chart,
+    #crm-revenue-analytics,
+    #treemap-colorranges,
+    #treemap-multi,
+    #treemap-basic,
+    #treemap-distributed,
+    #boxplot-basic,
+    #boxplot-scatter,
+    #boxplot-horizontal,
+    #candlestick-basic,
+    #candlestick-line,
+    #candlestick-categoryx,
+    #column-rotated-labels,
+    #area-stacked,
+    #zoom-chart,
+    #annotation-chart,
+    #bar-negative,
+    #timeline-advanced,
+    #timeline-multi,
+    #bubble-simple,
+    #bubble-3d,
+    #rangearea-basic,
+    #rangearea-combo,
+    #mixed-linecolumn,
+    #mixed-multiple-y,
+    #area-negative,
+    #candlestick-categoryx,
+    #heatmap-multiseries,
+    #chart-months {
+        .apexcharts-toolbar {
+            display: none !important;
+        }
+    }
+}
+ #bar-categories {
+  .apexcharts-datalabels {
+    @apply translate-x-[20px];
+  }
+}
+
+
+.apexcharts-legend-marker {
+    stroke: none;
+}
+
+.mat-mdc-paginator-range-actions {
+  @apply flex-wrap;
+
+}
+@media (max-width:360px) {
+  .mat-mdc-paginator-range-label{
+    @apply hidden!;
+  }
+}
+
+
+ #project-descriptioin-editor .ql-container {
+   @apply h-[200px] overflow-auto;
+ }
+
+
+
+[data-nav-layout="horizontal"][data-menu-styles="light"][data-page-style="modern"]{
+   &[data-header-styles="light"],
+   &[data-header-styles="dark"]{
+     .app-sidebar{
+       @apply border-b border-b-[var(--color-defaultborder)]! ;
+      }
+  }
+}
+
+
+
+
+@media (min-width: 622px) {
+  .companies-search-input{
+    .ng-select-container{
+      border-radius: 0px !important;
+    }
+  }
+}
+
+@media (max-width: 622px) {
+  .companies-search-input{
+    input.form-control{
+      @apply border border-defaultborder! dark:!border-defaultborder/10 rounded-e-sm!;
+    }
+  }
+}
+
+@media (min-width: 992px) {
+    [data-vertical-style=doublemenu] .app-sidebar .main-sidebar-header {
+
+       @apply border-e-0!;
+    }
+}
+
+.ng-select.custom-invoice-currency{
+  .ng-select-container{
+    @apply bg-[var(--color-light)]!;
+  }
+}
+
+.search-company-cart-star .br-units .br-unit{
+  @apply text-[1.25rem]!;
+}
+
+.custom-close-ngselect.ng-select .ng-select-container .ng-value-container .ng-value .ng-value-icon{
+  @apply hidden!;
+}
+
+
+
+.ti-pagination li:not(:first-child) {
+  .page-link {
+  @apply border-s-[0px]!;
+
+}
+}
+
+
+
+select{
+  @apply focus-visible:outline-none;
+}
+
+
+//range sliders
+.ngx-slider .ngx-slider-pointer {
+  @apply focus-visible:outline-none;
+}
+
+.ngx-slider .ngx-slider-bar {
+    @apply dark:bg-[var(--color-bodybg2)];
+}
+
+.ngx-slider .ngx-slider-bar:not(.ngx-slider-selection) {
+    @apply dark:bg-[var(--color-gray)]!;
+}
+
+.ngx-slider {
+  .ngx-slider-pointer.ngx-slider-active:after {
+    @apply bg-[#fff]!;
+  }
+}
+.cusotm-ngx-slider {
+  .ngx-slider {
+    @apply z-0
+  }
+  .ngx-slider .ngx-slider-pointer {
+    @apply bg-[var(--color-primary)];
+  }
+}
+
+#secondary-colored-slider{
+  .ngx-slider .ngx-slider-pointer {
+    @apply bg-[var(--color-secondary)];
+  }
+}
+#warning-colored-slider{
+  .ngx-slider .ngx-slider-pointer {
+    @apply bg-[var(--color-warning)];
+  }
+}
+#info-colored-slider{
+  .ngx-slider .ngx-slider-pointer {
+    @apply bg-[var(--color-info)];
+  }
+}
+#success-colored-slider{
+  .ngx-slider .ngx-slider-pointer {
+    @apply bg-[var(--color-success)];
+  }
+}
+#danger-colored-slider{
+  .ngx-slider .ngx-slider-pointer {
+    @apply bg-[var(--color-danger)];
+  }
+}
+#slider-toggle{
+ .ngx-slider.vertical .ngx-slider-pointer {
+    @apply rtl:!left-[-3px];
+  }
+}
+#merging-tooltips-slider{
+  .noUi-tooltip{
+    @apply dark:bg-[var(--color-bodybg)/10] dark:border-[var(--color-defaultborder)/10] dark:text-white;
+  }
+}
+
+ #red {
+  @apply accent-[#ff383c] dark:accent-[#ff4a4e];
+}
+#green {
+  @apply accent-[#189777] dark:accent-[#32ffcb];
+}
+#blue {
+  @apply accent-[#757cd9] dark:accent-[#979eff];
+}
+
+ #result {
+   @apply  border-[1px] border-defaultborder dark:!border-defaultborder/10;
+ }
+
+:host ::ng-deep #red {
+   @apply accent-[#ff383c] dark:accent-[#ff4a4e];
+
+}
+:host ::ng-deep #green {
+  @apply accent-[#189777] dark:accent-[#32ffcb];
+}
+:host ::ng-deep #blue {
+   @apply accent-[#757cd9] dark:accent-[#979eff];
+}
+
+
+
+
+#choices-text-email-filter{
+  .ng-trigger{
+    @apply bg-[var(--color-primary)]
+  }
+  .ng2-tag-input{
+    @apply border-0 p-0! ;
+  }
+}
+
+
+
+.pickr-container{
+  .example-form2{
+    .mat-mdc-form-field-flex{
+      @apply border border-defaultborder dark:border-defaultborder/10 px-[15px] rounded-[6px];
+    }
+    .mdc-line-ripple::before,
+      .mdc-line-ripple.mdc-line-ripple--active:after{
+      @apply border-0;
+    }
+
+
+  }
+}
+
+
+
+
+
+.AjaxloaderSweetalertInputClass {
+  @apply shadow-none;
+}
+
+#chart-line,
+#chart-line2,
+#chart-area,
+#sessionsByDevice {
+  .apexcharts-marker {
+    @apply stroke-none;
+  }
+}
+
+[data-menu-styles=gradient][data-vertical-style="doublemenu"][data-nav-layout="vertical"] {
+  .app-sidebar {
+    .main-sidebar-header {
+      @apply border-gray-500!
+    }
+
+    .main-menu .slide.has-sub .slide-menu.child1 .slide {
+      @apply my-0!;
+    }
+  }
+}
+
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mat-mdc-notch-piece {
+  border-width: 1px !important;
+}
+
+// .hs-overlay-backdrop {
+//   @apply z-[102];
+// }
+
+
+/* Start:: Create NFT Item Styles */
+.create-nft-item {
+  .filepond--root {
+    @apply w-full h-[15.08rem] mx-auto text-center rounded-sm;
+
+    @media screen and (min-width: 1660px) {
+      @apply h-[14.75rem] w-[20.25rem] m-0;
+    }
+
+    // 1. Center the file item container itself
+    .filepond--file {
+      @apply m-0!; // Removes default margins that cause shifting
+    }
+    .filepond--list{
+      .filepond--item{
+        @apply me-[0.8rem]
+      }
+    }
+    // 2. Fix the preview wrapper alignment
+    .filepond--image-preview-wrapper {
+      @apply h-full! !w-full rounded-[0.3rem] !m-0;
+    }
+
+    .filepond--image-preview {
+      @apply h-full! !bg-transparent; // Transparent bg prevents weird color blocks
+
+      canvas {
+        /* Object-contain is better here if you want to see the whole image without cropping */
+        @apply max-h-full! !w-full object-cover !left-0 !right-0 mx-auto;
+      }
+    }
+
+    // 3. Keep the label centered behind/below
+    .filepond--drop-label {
+      @apply flex justify-center items-center h-auto min-h-full bottom-0 cursor-pointer;
+
+      label {
+        @apply p-[2em] text-xs text-primary font-semibold;
+      }
+    }
+  }
+
+  // Dashed border panel
+  .filepond--panel-root {
+    @apply border-defaultborder dark:border-defaultborder/10 border-2 border-dashed bg-light dark:bg-bodybg;
+  }
+
+  .filepond--list-scroller[data-state="overflow"] {
+    @apply overflow-y-hidden!;
+  }
+}
+
+
+
+
+
+/* Start:: Create NFT Item Styles */
+// .create-nft-item {
+//   .filepond--root {
+//     @apply w-full h-[15.08rem] mx-auto text-center rounded-sm;
+
+//     @media screen and (min-width: 1660px) {
+//       @apply h-[14.75rem] w-[20.25rem] m-0;
+//     }
+
+//     // This ensures the actual input is always clickable
+//     .filepond--browser {
+//       @apply z-[10]! cursor-pointer! ;
+//     }
+
+//     .filepond--list-scroller {
+//       @apply flex items-center justify-center h-full;
+//       /* Disable pointer events on the preview so clicks "pass through" to the input */
+//       pointer-events: none;
+
+//       &[data-state="overflow"] {
+//         @apply overflow-y-hidden!;
+//       }
+//     }
+
+//     // Re-enable pointer events for the "Remove" button specifically
+//     .filepond--item {
+//       @apply me-[0.8rem]! h-full! ;
+//       pointer-events: all;
+//     }
+
+//     .filepond--list {
+//       @apply  w-full! h-full! ;
+//     }
+
+//     .filepond--file {
+//       @apply m-0! h-full! ;
+//     }
+
+//     .filepond--image-preview-wrapper {
+//       @apply h-full! w-full! rounded-[0.3rem]! m-0! ;
+//     }
+
+//     .filepond--image-preview {
+//       @apply h-full! bg-transparent! ;
+
+//       canvas {
+//         @apply h-full! w-full! object-cover! left-0! right-0! mx-auto! ;
+//       }
+//     }
+
+//     .filepond--drop-label {
+//       @apply flex justify-center items-center h-auto min-h-full bottom-0 cursor-pointer;
+//       /* Ensure label is clickable */
+//       z-index: 1;
+
+//       label {
+//         @apply p-[2em] text-xs text-primary font-semibold;
+//       }
+//     }
+//   }
+
+//   .filepond--panel-root {
+//     @apply border-defaultborder dark:border-defaultborder/10 border-2 border-dashed bg-light dark:bg-bodybg;
+//     /* Ensure the panel doesn't block clicks */
+//     pointer-events: none;
+//   }
+// }
+
+
+
+
+
+
+
+
+
+
+
+
+/* End:: Create NFT Item Styles */
+.filepond--root .filepond--drop-label {
+    min-height: 4.75em;
+}
+
+
+[data-nav-layout=vertical][data-vertical-style="doublemenu"] .main-menu .slide.has-sub .slide-menu.child1 .slide.side-menu__label1 {
+    @apply my-0!;
+}
+
+
+#stars-hover{
+  .br.br-default{
+    @apply flex items-center;
+  }
+  .br-text {
+  @apply bg-[#26bf941a] text-[#26bf94] align-middle text-[0.75em] font-semibold rounded px-[0.45rem] py-[0.25rem] ms-4;
+  }
+
+}
+
+[dir="rtl"] .br.br-default .br-units .br-unit .br-unit-inner.br-fraction::after {
+  --tw-content: "\2605"; /* star symbol */
+  @apply left-[11px];    /* Tailwind utility for positioning */
+  content: var(--tw-content); /* raw CSS for content */
+}
+
+@media (max-width: 991.98px) {
+  [data-toggled="open"] #responsive-overlay {
+    @apply visible;
+  }
+}
+
+#slider-toggle{
+ .ngx-slider.vertical .ngx-slider-pointer {
+    @apply rtl:!left-[-3px];
+  }
+}
+
+[dir="rtl"]{
+  .ql-editor li > .ql-ui:before{
+  @apply mr-[-0.7em]!;
+}
+}
+
+
+
+#blog-category-select{
+  .ng-placeholder{
+    @apply text-[0.775rem]!;
+  }
+}
+
+
+
+.ngx-colors-overlay{
+  ngx-colors-panel{
+    .opened {
+      @apply bg-bodybg rtl:left-[10px];
+      .g-input{
+        @apply border-defaultborder dark:!border-defaultborder/10;
+
+      }
+
+     .manual-input-wrapper{
+       .g-input {
+        input{
+          @apply dark:text-white!;
+        }
+       }
+     }
+    }
+  }
+}
+
+
+[data-nav-layout="horizontal"] .app-sidebar .side-menu__item{
+  @apply my-0;
+}
+
+
+
+@media (min-width: 992px) {
+
+ [data-nav-style="icon-click"] .iconclick .side-menu__item {
+    @apply z-[1];
+  }
+  [data-vertical-style="doublemenu"] {
+    .iconclick {
+      @apply mx-auto! inline-block! relative!;
+    }
+  }
+}
+
+
+@media (min-width: 992px) {
+[data-menu-position="scrollable"][data-nav-layout="horizontal"] .app-sidebar {
+  @apply relative! !z-[49];
+}
+}
+
+.fslightbox-source{
+  @apply rounded-md;
+}
+
+.highlight.clip-widget {
+  markdown {
+    pre {
+      @apply bg-transparent m-[1rem]!  rounded-[10px]!  max-h-[400px]! p-0
+      border-defaultborder dark:!border-defaultborder/10;
+    }
+
+    pre>code {
+      @apply bg-[var(--color-light)] rounded-[10px]! border-defaultborder dark:!border-defaultborder/10;
+    }
+
+  }
+}

preview/assets/scss/icons.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+@forward "../icon-fonts/RemixIcons/fonts/remixicon.css";
+@forward "../icon-fonts/tabler-icons//iconfont/tabler-icons.css";
+@forward "../icon-fonts/feather/feather.css";
+@forward "../icon-fonts/bootstrap-icons/icons/font/bootstrap-icons.css";
+@forward "../icon-fonts/line-awesome/1.3.0/css/line-awesome.css";
+@forward "../icon-fonts/boxicons/css/boxicons.css";

preview/assets/scss/layout/_closed_menu.scss

@@ -0,0 +1,33 @@
+[data-vertical-style="closed"] {
+    &[data-toggled="close-menu-close"] {
+        .app-sidebar {
+          @apply hidden;
+        }
+        @media (min-width: 992px) {
+            .content  {
+                @apply ms-0;
+
+            }
+            .app-header {
+                @apply ps-0! ;
+
+            }
+        }
+    }
+    &[data-toggled="close-menu-open"] {
+        .app-sidebar {
+            @apply block;
+
+        }
+        @media (min-width: 992px) {
+            .content  {
+                @apply ms-60;
+
+            }
+            .app-header {
+                @apply ps-60;
+
+            }
+        }
+    }
+}

preview/assets/scss/layout/_double_menu.scss

@@ -0,0 +1,213 @@
+[data-vertical-style="doublemenu"] {
+    @media (min-width: 992px) {
+
+        .app-sidebar {
+            @apply w-20 border-e-0;
+
+            .main-sidebar {
+                @apply overflow-visible h-full shadow-none mt-0;
+            }
+            .main-sidebar-header {
+                @apply w-20 border-e;
+                .header-logo {
+                    .toggle-logo {
+                        @apply block!;
+
+                    }
+                    .desktop-dark,
+                    .desktop-logo,.toggle-white,
+                    .toggle-dark {
+                        @apply hidden!;
+                    }
+                }
+            }
+            .main-menu-container {
+                @apply mt-[3.75rem];
+            }
+            .main-menu >.slide {
+                @apply py-0 px-[1.2rem];
+            }
+            .category-name,
+            .side-menu__label,
+            .side-menu__angle {
+                @apply hidden;
+            }
+            .side-menu__icon {
+                @apply me-0;
+
+            }
+            .slide__category {
+                @apply hidden;
+
+            }
+            .simplebar-content-wrapper {
+                position: initial;
+            }
+            .simplebar-mask {
+                position: inherit;
+
+            }
+            .simplebar-placeholder {
+                @apply h-auto! ;
+            }
+        }
+        .app-header {
+            @apply ps-[17rem];
+        }
+        .content  {
+            @apply ms-[17rem];
+        }
+        .slide.has-sub .slide-menu {
+            @apply  bg-white dark:bg-bodybg absolute start-2 shadow-none transition-none h-full end-0 rounded-md border-e border-e-white/10  ;
+            &.child2,
+            &.child3 {
+                @apply start-0! relative! h-auto! top-0!;
+                .slide {
+                    &:nth-child(2) {
+                        @apply pt-[0rem];
+                    }
+                }
+            }
+        }
+        .slide-menu {
+            &.child1,
+            &.child2,
+            &.child3 {
+                .slide {
+                    @apply ps-0;
+                    .side-menu__item {
+                        @apply text-start;
+                        &:before {
+                            @apply top-[0.938rem] start-[0.75rem];
+                        }
+                    }
+                }
+                .side-menu__angle {
+                    @apply block end-4 top-[0.65rem];
+
+                }
+            }
+            &.child2,&.child3 {
+                @apply min-w-[10rem];
+            }
+            &.child1 {
+                @apply min-w-[12rem];
+                .slide {
+                    &:nth-child(2) {
+                        @apply pt-3;
+                    }
+                }
+            }
+        }
+        .side-menu__label1 {
+            @apply block! text-[0.938rem]! font-medium! text-white! py-5! px-3! w-48! h-[3.75rem]! border-b! border-b-white/10!;
+        }
+        .slide-menu {
+            @apply hidden ;
+
+            &.double-menu-active {
+                @apply visible! block! h-full! absolute! top-0! rounded-none! border-t-0! overflow-y-hidden! overflow-x-scroll!;
+
+            }
+        }
+        &[class="light"] {
+            &[data-menu-styles="dark"],&[data-menu-styles="color"],&[data-menu-styles="gradient"] {
+                .app-sidebar .main-sidebar-header {
+                    .header-logo {
+                        .desktop-logo,.desktop-dark,.toggle-logo,.toggle-dark {
+                            @apply hidden!;
+                        }
+                        .toggle-white {
+                            @apply block!;
+                        }
+                    }
+                }
+            }
+            &[data-menu-styles="transparent"] {
+                .app-sidebar .main-sidebar-header {
+                    .header-logo {
+                        .desktop-logo,.desktop-dark,.toggle-logo,.toggle-white {
+                            @apply hidden!;
+                        }
+                        .toggle-logo {
+                            @apply block!;
+                        }
+                    }
+                }
+            }
+        }
+        &.dark {
+            .app-sidebar .main-sidebar-header {
+                .header-logo {
+                    .desktop-logo,.desktop-dark,.toggle-logo,.toggle-white {
+                        @apply hidden!;
+
+                    }
+                    .toggle-dark {
+                        @apply block!;
+
+                    }
+                }
+            }
+            &[data-menu-styles="light"] {
+                .app-sidebar .main-sidebar-header {
+                    .header-logo {
+                        .desktop-logo,.desktop-dark,.toggle-dark,.toggle-white {
+                            @apply hidden!;
+
+                        }
+                        .toggle-logo {
+                            @apply block!;
+
+                        }
+                    }
+                }
+            }
+            &[data-menu-styles="dark"],&[data-menu-styles="color"],&[data-menu-styles="gradient"],&[data-menu-styles="transparent"]  {
+                .app-sidebar .main-sidebar-header {
+                    .header-logo {
+                        .desktop-logo,.desktop-dark,.toggle-dark,.toggle-logo {
+                            @apply hidden!;
+
+                        }
+                        .toggle-white {
+                            @apply block!;
+
+                        }
+                    }
+                }
+            }
+            &[data-page-style="classic"] {
+                .slide.has-sub .slide-menu {
+                    @apply border-e border-e-white/10;
+                }
+            }
+        }
+        &[data-toggled="double-menu-close"] {
+            .app-header{
+                @apply ps-20;
+
+            }
+            .content  {
+                @apply ms-20;
+
+            }
+            .app-sidebar {
+                .slide.has-sub .slide-menu {
+                    @apply hidden!;
+
+                }
+                .main-sidebar {
+                    @apply shadow-defaultshadow;
+                }
+            }
+        }
+        &[data-toggled="double-menu-open"] {
+            .app-sidebar .main-sidebar {
+                .slide.side-menu__label1 {
+                    @apply border-e border-e-white/10;
+                }
+            }
+        }
+    }
+}

preview/assets/scss/layout/_horizontal.scss

@@ -0,0 +1,256 @@
+[data-nav-layout="horizontal"] {
+  @media (min-width: 992px) {
+    .simplebar-track.simplebar-horizontal {
+      @apply hidden;
+    }
+    .app-sidebar {
+      @apply h-[3rem];
+    }
+    .sidemenu-layout-styles {
+      @apply hidden!;
+    }
+    .main-menu {
+      @apply flex! transition-all ease-linear duration-[0.5s] flex-nowrap;
+      &-container {
+        @apply inline-flex;
+      }
+
+    }
+    .side-menu__label .badge {
+      @apply hidden!;
+    }
+    .mega-menu {
+      @apply columns-3;
+    }
+    .app-header {
+      @apply ps-0! z-[50]! shadow-none! ;
+    }
+    .content {
+      @apply mx-auto! mt-28! start-0! min-h-[calc(100vh-10.5rem)]! w-full! ;
+      > .container-fluid {
+        @apply w-[94%] ms-auto me-auto;
+      }
+      .main-content {
+        @apply w-[94%] mx-auto;
+      }
+    }
+    .app-sidebar {
+      .main-sidebar,
+      .simplebar-mask {
+        @apply overflow-visible;
+      }
+      .main-menu > .slide {
+        @apply my-0 mx-[0.1875rem];
+      }
+      .main-sidebar {
+        @apply shadow-none;
+      }
+    }
+
+    .main-sidebar .simplebar-vertical {
+      @apply invisible! overflow-hidden! ;
+    }
+    .main-sidebar,
+    .main-header-container {
+      @apply w-[94%] my-0 mx-auto;
+    }
+    .horizontal-logo {
+      @apply py-[0.85rem] px-0 block;
+      .header-logo {
+        img {
+          @apply h-8 leading-8;
+        }
+        .desktop-logo {
+          @apply block;
+        }
+        .desktop-dark,
+        .toggle-logo,
+        .toggle-dark,
+        .desktop-white,.toggle-white {
+          @apply hidden;
+        }
+      }
+    }
+    [data-header-styles="dark"] {
+      .horizontal-logo {
+        @apply py-[0.85rem] px-0 block;
+        .header-logo {
+          img {
+            @apply h-8 leading-8;
+          }
+          .desktop-dark {
+            @apply block!;
+          }
+          .desktop-logo,
+          .toggle-logo,
+          .toggle-dark,
+          .desktop-white,.toggle-white {
+            @apply hidden!;
+          }
+        }
+      }
+    }
+
+    .main-header-container .sidemenu-toggle {
+      @apply hidden;
+    }
+    .app-sidebar {
+      @apply w-full! h-12! top-[3.75rem]! ;
+
+      .slide-menu.child1,
+      .slide-menu.child2,
+      .slide-menu.child3 {
+        li {
+          @apply ps-2;
+        }
+        .side-menu__item:before {
+          @apply top-[0.938rem]! start-3! ;
+        }
+      }
+      .app-sidebar .slide-menu.child1 .side-menu__item,
+      .app-sidebar .slide-menu.child2 .side-menu__item {
+        @apply py-[0.45rem]! px-[1.6rem]! ;
+      }
+      .simplebar-content {
+        @apply p-0! overflow-hidden! ;
+      }
+      .simplebar-content-wrapper {
+        @apply overflow-hidden! h-auto! ;
+      }
+      .main-sidebar {
+        @apply h-12! p-0! ;
+      }
+      .slide.has-sub .slide-menu {
+        &.child1 {
+          @apply start-6 p-0 rounded-b-sm shadow-[.063rem_.188rem_.5rem_rgba(0,0,0,0.1)]  dark:shadow-[.063rem_.188rem_.5rem_rgba(255,255,255,0.1)]  ;
+        }
+        &.child2,
+        &.child3 {
+          @apply end-[100%]! px-0! rounded-sm! ;
+        }
+        &.active {
+          @apply start-auto! end-auto!;
+        }
+      }
+      .slide-menu.child1 {
+        @apply absolute!;
+      }
+      .side-menu__item {
+        @apply w-full flex rounded-none p-[0.92rem];
+      }
+      .side-menu__angle {
+        @apply end-[0.45rem] block;
+      }
+      .side-menu__icon {
+        @apply me-1 mb-0;
+      }
+      .slide.has-sub .slide-menu.child1 {
+        @apply bg-white dark:bg-bodybg top-[100%] min-w-[12rem];
+      }
+      .slide {
+        @apply p-0;
+      }
+      .slide-menu {
+        &.child1 {
+          .slide.has-sub,
+          .slide {
+            @apply w-full flex py-0 px-[0.1875rem];
+          }
+        }
+        &.child2,
+        &.child3 {
+          @apply rounded-sm;
+        }
+      }
+      .slide,
+      .slide.has-sub {
+        @apply static;
+      }
+      .main-menu {
+        @apply mb-0;
+      }
+    }
+    .main-sidebar-header {
+      @apply hidden!;
+    }
+    .main-sidebar {
+      @apply mt-0 pb-12;
+    }
+    .slide__category {
+      @apply hidden;
+    }
+    /* horizontal arrows */
+    .main-menu-container .slide-left {
+      @apply start-[1.438rem];
+    }
+    .main-menu-container .slide-left,
+    .main-menu-container .slide-right {
+      @apply absolute top-[0.563rem] p-[0.375rem] flex items-center justify-center z-[1] cursor-pointer border border-solid border-defaultborder rounded-[3.125rem] text-white dark:text-bodybg;
+    }
+
+    .main-menu-container .slide-left,
+    .main-menu-container .slide-right {
+      @apply absolute top-[0.313rem] p-[0.375rem] flex items-center justify-center z-[1] cursor-pointer border border-solid border-defaultborder rounded-[3.125rem] text-white dark:text-bodybg bg-white dark:bg-bodybg;
+      svg {
+        @apply fill-black;
+      }
+    }
+
+    .main-menu-container {
+      .slide-right {
+        @apply end-[-3%];
+      }
+      .slide-left {
+        @apply start-[-3%];
+      }
+    }
+    &[page-style="classic"] {
+      .app-sidebar {
+        @apply border-b border-b-defaultborder;
+      }
+    }
+    &[dir="rtl"] {
+      .main-menu-container {
+        .slide-right,
+        .slide-left {
+          @apply rotate-180;
+        }
+      }
+    }
+    &.dark {
+      .header-logo {
+        .desktop-dark {
+          @apply block;
+        }
+        .toggle-logo,
+        .desktop-logo,
+        .toggle-logo,
+        .desktop-white,.toggle-white {
+          @apply hidden;
+        }
+      }
+      .app-sidebar {
+        @apply border-white/10!;
+        .slide.has-sub .slide-menu {
+          &.child1,
+          &.child2,
+          &.child3 {
+            @apply bg-bodybg! border-white/10!;
+          }
+        }
+        .slide.side-menu__label1 {
+          @apply border-white/10! text-white! ;
+        }
+        .main-menu-container {
+          .slide-left,
+          .slide-right {
+            @apply bg-black/20 text-white border-white/10;
+            svg {
+              @apply fill-white;
+            }
+          }
+        }
+      }
+    }
+  }
+}

preview/assets/scss/layout/_icon_click.scss

@@ -0,0 +1,215 @@
+[data-nav-style="icon-click"][data-nav-layout="horizontal"],
+[data-nav-style="icon-click"][data-toggled="icon-click-closed"] {
+  @extend .icon-click;
+}
+.icon-click {
+  @media (min-width: 992px) {
+    .content {
+      @apply ms-[5rem];
+    }
+    .app-sidebar {
+      @apply w-20;
+
+      .main-sidebar {
+        @apply overflow-visible ;
+      }
+
+      .main-sidebar-header {
+        @apply w-20;
+
+        .header-logo {
+          .toggle-logo {
+            @apply block;
+          }
+
+          .desktop-dark,
+          .desktop-logo,
+          .toggle-dark,
+          .desktop-white,
+          .toggle-white {
+            @apply hidden;
+          }
+        }
+      }
+
+      .category-name,
+      .side-menu__label,
+      .side-menu__angle {
+        @apply hidden;
+      }
+
+      .side-menu__icon {
+        @apply me-0;
+      }
+
+      .slide__category {
+        @apply py-[1.2rem] px-[1.65rem] relative;
+        &:before {
+          @apply content-[""] absolute start-9 end-0 top-5 bottom-0 w-[0.35rem] rounded-[3.125rem] h-[0.35rem] border border-[#536485] opacity-[1];
+        }
+      }
+
+      .simplebar-content-wrapper {
+        position: initial;
+      }
+
+      .simplebar-mask {
+        position: inherit;
+      }
+
+      .simplebar-placeholder {
+        @apply h-auto! ;
+      }
+    }
+
+    .app-header {
+      @apply ps-20;
+    }
+
+    .content {
+      @apply ms-20;
+    }
+
+    .slide {
+      &.side-menu__label1 {
+        @apply block! py-2! px-4! border-b! border-b-defaultborder! ;
+      }
+    }
+
+    .slide.has-sub .slide-menu {
+      @apply absolute! start-20!  rounded-e-md! top-auto! transition-none! shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)]! dark:!shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)];
+
+      &.child2,
+      &.child3 {
+        @apply start-48!;
+      }
+    }
+
+    .slide-menu {
+      &.child1,
+      &.child2,
+      &.child3 {
+        @apply min-w-[12rem];
+
+        .slide {
+          .side-menu__item {
+            @apply text-start;
+
+            &:before {
+              @apply top-[0.938rem] start-3;
+            }
+          }
+        }
+
+        .side-menu__angle {
+          @apply block end-4 top-[0.65rem];
+        }
+      }
+    }
+  }
+}
+[data-nav-style="icon-click"][data-nav-layout="horizontal"] {
+  @media(min-width:992px){
+
+    .slide.has-sub .slide-menu {
+      @apply absolute! start-20! transition-none! shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)]! dark:!shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)];
+    }
+    .slide.has-sub .slide-menu {
+      &.child1 {
+        @apply top-full!;
+      }
+      &.child2,
+      &.child3 {
+        @apply start-48!;
+      }
+    }
+    .mega-menu {
+      @apply columns-1;
+    }
+  }
+}
+[data-nav-layout="vertical"][data-nav-style="icon-click"] {
+  @media (min-width: 992px) {
+    &[data-toggled="icon-click-closed"] {
+      .app-sidebar .main-menu {
+        > .slide {
+          @apply py-0 px-[1.2rem];
+        }
+      }
+      .app-sidebar {
+        .slide .slide-menu {
+          &.child1,
+          &.child2,
+          &.child3 {
+            @apply rounded-e-md rounded-s-none;
+          }
+        }
+      }
+      &.dark {
+        .app-sidebar {
+          .main-sidebar-header {
+            .header-logo {
+              .toggle-white {
+                @apply block;
+              }
+              .desktop-dark,
+              .desktop-logo,
+              .toggle-logo,
+              .desktop-white,
+              .toggle-dark {
+                @apply hidden;
+              }
+            }
+          }
+        }
+        &[data-menu-styles="light"]{
+          .app-sidebar {
+            .main-sidebar-header {
+              .header-logo {
+                .toggle-white {
+                  @apply hidden;
+                }
+              }
+            }
+          }
+        }
+        &[data-menu-styles="transparent"] {
+          .app-sidebar {
+            .main-sidebar-header {
+              .header-logo {
+                .toggle-white {
+                  @apply block! ;
+                }
+              }
+            }
+          }
+        }
+      }
+      .app-sidebar {
+        @apply absolute! ;
+
+        .slide-menu {
+          &.child1,
+          &.child2,
+          &.child3 {
+            li.slide {
+              @apply ps-0;
+
+              a {
+                @apply rounded-none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 992px) {
+  [data-nav-style="icon-click"][data-toggled="icon-click-closed"]:not([data-nav-layout="horizontal"]) {
+    .content {
+      @apply min-h-[85rem];
+    }
+  }
+}

preview/assets/scss/layout/_icon_hover.scss

@@ -0,0 +1,236 @@
+[data-nav-layout="horizontal"][data-nav-style="icon-hover"],
+[data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
+    @extend .icon-hover;
+}
+.icon-hover {
+    @media (min-width: 992px) {
+        .content{
+            @apply ms-[5rem];
+        }
+        .app-sidebar {
+            @apply w-20;
+
+
+            .main-sidebar {
+              @apply overflow-visible ;
+            }
+
+            .main-sidebar-header {
+                @apply w-20;
+
+                .header-logo {
+                    .toggle-logo {
+                        @apply block;
+
+                    }
+
+                    .desktop-dark,
+                    .desktop-logo,
+                    .toggle-dark,.toggle-white,.desktop-white {
+                        @apply hidden;
+
+                    }
+                }
+            }
+
+            .category-name,
+            .side-menu__label,
+            .side-menu__angle {
+                @apply hidden;
+
+            }
+
+            .side-menu__icon {
+                @apply me-0;
+
+            }
+
+            .slide__category {
+                @apply py-[1.2rem] px-[1.65rem] relative;
+                &:before {
+                    @apply content-[""] absolute start-[2.4rem] end-0 top-5 bottom-0 w-[0.35rem] rounded-[3.125rem] h-[0.35rem] border border-[#536485] opacity-[1];
+                }
+            }
+
+            .simplebar-content-wrapper {
+                position: initial;
+            }
+
+            .simplebar-mask {
+
+                position: inherit;
+            }
+
+            .simplebar-placeholder {
+                @apply h-auto!;
+
+            }
+        }
+        .app-header {
+            @apply ps-20;
+
+        }
+        .content  {
+            @apply ms-20;
+
+        }
+        .slide.side-menu__label1 {
+            @apply block! py-2! px-4! border-b! border-b-defaultborder!;
+
+        }
+        .slide.has-sub .slide-menu {
+            @apply absolute start-20  rounded-e-md dark:bg-bodybg top-auto transition-none shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)] ;
+
+            &.child2,
+            &.child3 {
+                @apply start-[11.8rem]!;
+
+            }
+        }
+        .slide-menu {
+            &.child1,
+            &.child2,
+            &.child3 {
+                @apply min-w-[12rem]! hidden!;
+
+                .slide {
+                    .side-menu__item {
+                        @apply text-start! pe-0!;
+
+                        &:before {
+                            @apply top-[0.938rem] start-3;
+                        }
+                    }
+                }
+                .side-menu__angle {
+                    @apply block end-4 top-[0.65rem];
+
+                }
+            }
+        }
+        .slide.has-sub:hover {
+            .slide-menu.child1 {
+                @apply block!;
+
+                .slide.has-sub:hover {
+                    .slide-menu.child2 {
+                        @apply block!;
+
+                        .slide.has-sub:hover {
+                            .slide-menu.child3 {
+                                @apply block!;
+
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+[data-nav-style="icon-hover"][data-nav-layout="horizontal"] {
+  @media(min-width:992px){
+    .slide.has-sub .slide-menu {
+      @apply absolute start-20 transition-none shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)] ;
+    }
+    .slide.has-sub .slide-menu {
+      &.child1 {
+        @apply top-full!;
+      }
+      &.child2,
+      &.child3 {
+        @apply start-48!;
+      }
+    }
+  }
+  .mega-menu {
+    @apply columns-1;
+  }
+}
+[data-nav-layout="vertical"][data-nav-style="icon-hover"] {
+    @media (min-width: 992px) {
+        &[data-toggled="icon-hover-closed"] {
+            .app-sidebar .main-menu{
+                >.slide {
+                    @apply py-0 px-[1.2rem];
+
+                }
+            }
+            .app-sidebar {
+                .slide .slide-menu {
+                    &.child1,&.child2,&.child3 {
+                        @apply rounded-e-md rounded-s-none;
+                    }
+                }
+            }
+            &.dark {
+              .app-sidebar {
+                .main-sidebar-header {
+                  .header-logo {
+                    .toggle-white {
+                      @apply block;
+                    }
+                    .desktop-dark,
+                    .desktop-logo,
+                    .toggle-logo,
+                    .desktop-white,
+                    .toggle-dark {
+                      @apply hidden;
+                    }
+                  }
+                }
+              }
+              &[data-menu-styles="light"]{
+                .app-sidebar {
+                  .main-sidebar-header {
+                    .header-logo {
+                      .toggle-white {
+                        @apply hidden;
+                      }
+                    }
+                  }
+                }
+              }
+              &[data-menu-styles="transparent"] {
+                .app-sidebar {
+                  .main-sidebar-header {
+                    .header-logo {
+                      .toggle-white {
+                        @apply block!;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            .app-sidebar {
+                @apply absolute!;
+
+                .slide-menu {
+                    &.child1,
+                    &.child2,
+                    &.child3 {
+                        @apply p-[0.1875rem];
+
+                        li.slide {
+                            @apply ps-0;
+
+                            a {
+                                @apply rounded-none;
+
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    [data-nav-style="icon-hover"][data-toggled="icon-hover-closed"]:not([data-nav-layout="horizontal"]) {
+      .content {
+        @apply min-h-[85rem];
+      }
+    }
+  }

preview/assets/scss/layout/_menu_click.scss

@@ -0,0 +1,148 @@
+[data-nav-style="menu-click"][data-nav-layout="horizontal"] {
+  @extend .menu-click;
+  @media (min-width: 992px) {
+    .app-sidebar {
+      
+      .side-menu__item {
+        @apply flex! items-center! px-[1.6rem]!;
+      }
+      .side-menu__icon {
+        @apply mb-0! me-[0.35rem]! ;
+      }
+      .side-menu__angle {
+        @apply block!;
+      }
+      .slide.has-sub .slide-menu {
+        @apply start-auto!;
+
+        &.active {
+          @apply start-auto! end-auto!;
+        }
+        &.child1 {
+          @apply top-[100%]!;
+        }
+      }
+    }
+    .app-header {
+      @apply ps-[9.5rem];
+    }
+  }
+}
+[data-nav-style="menu-click"][data-toggled="menu-click-closed"] {
+  @extend .menu-click;
+  .app-header {
+    @apply ps-[9.5rem];
+  }
+}
+[data-nav-style="menu-click"][data-nav-layout="vertical"][data-toggled="menu-click-closed"] {
+  @media (min-width: 992px) {
+    .app-sidebar {
+      @apply absolute! ;
+
+      .side-menu__item {
+        @apply rounded-md! mt-1! mx-1! mb-0! ;
+        &:last-child {
+          @apply m-1! ;
+        }
+      }
+    }
+    .app-sidebar {
+      .slide .slide-menu {
+        &.child1,
+        &.child2,
+        &.child3 {
+          @apply rounded-e-md! ;
+        }
+      }
+    }
+  }
+}
+.menu-click {
+  @media (min-width: 992px) {
+    .content {
+      @apply ms-[9.5rem];
+    }
+    .app-sidebar {
+      @apply w-[9.5rem];
+
+      .main-sidebar {
+        @apply overflow-visible ;
+      }
+      .main-sidebar-header {
+        @apply w-[9.5rem];
+      }
+      .side-menu__icon {
+        @apply me-0 mb-2;
+      }
+      .slide {
+        @apply p-0;
+      }
+      .slide-menu {
+        &.child1,
+        &.child2,
+        &.child3 {
+          @apply min-w-[12rem];
+
+          .slide {
+            .side-menu__item {
+              @apply text-start;
+
+              &:before {
+                @apply top-[0.938rem] start-3;
+              }
+            }
+          }
+          .side-menu__angle {
+            @apply block end-4 top-[0.65rem];
+          }
+          .slide.has-sub,
+          .slide {
+            &.side-menu__label1 {
+              @apply hidden;
+            }
+          }
+        }
+      }
+      .slide__category,
+      .side-menu__angle {
+        @apply hidden;
+      }
+      .side-menu__item,
+      .side-menu__label {
+        @apply block text-center;
+      }
+      .slide.has-sub .slide-menu {
+        @apply absolute start-[9.5rem]  top-auto  transition-none shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)];
+
+        &.child2,
+        &.child3 {
+          @apply start-48!;
+        }
+      }
+      .simplebar-content-wrapper {
+        position: initial;
+      }
+      .simplebar-mask {
+        position: inherit;
+      }
+      .simplebar-placeholder {
+        @apply h-auto!;
+      }
+    }
+    .content {
+      @apply ms-[9.5rem];
+    }
+  }
+  @media (max-width: 991.98px) {
+    .app-sidebar {
+      @apply w-60;
+    }
+  }
+}
+@media (min-width: 992px) {
+  [data-nav-style="menu-click"][data-toggled="menu-click-closed"]:not([data-nav-layout="horizontal"]) {
+    .content {
+      @apply min-h-[100rem];
+    }
+  }
+}

preview/assets/scss/layout/_menu_hover.scss

@@ -0,0 +1,176 @@
+[data-nav-style="menu-hover"][data-nav-layout="horizontal"] {
+    @extend .menu-hover;
+    @media (min-width: 992px) {
+        .app-sidebar {
+            .side-menu__item {
+                @apply flex! items-center! px-[1.6rem]!;
+
+            }
+            .side-menu__icon {
+                @apply mb-0! me-[0.35rem]!;
+            }
+            .side-menu__angle {
+                @apply block! ;
+
+            }
+            .slide.has-sub .slide-menu {
+                &.active {
+                    @apply start-auto! end-auto! rounded-none! ;
+
+                }
+                &.child1 {
+                    @apply top-[100%]! ;
+
+                }
+            }
+        }
+    }
+}
+[data-nav-style="menu-hover"][data-toggled="menu-hover-closed"] {
+    @extend .menu-hover;
+}
+[data-nav-style="menu-hover"][data-nav-layout="vertical"][data-toggled="menu-hover-closed"] {
+    @media (min-width: 992px) {
+        .app-sidebar {
+            @apply absolute!  ;
+
+            .side-menu__item {
+                @apply rounded-md! mt-1! mb-0! mx-1! ;
+                &:last-child {
+                    @apply m-1! ;
+
+                }
+            }
+        }
+        .app-sidebar {
+            .slide .slide-menu {
+                &.child1,&.child2,&.child3 {
+                    @apply rounded-e-md rounded-s-none;
+                }
+            }
+        }
+    }
+}
+.menu-hover {
+    @media (min-width: 992px) {
+        .content{
+            @apply ms-[9.5rem];
+        }
+        .app-sidebar {
+            @apply w-[9.5rem];
+
+            .main-sidebar {
+                @apply overflow-visible ;
+
+            }
+            .main-sidebar-header {
+                @apply w-[9.5rem];
+
+            }
+            .side-menu__icon {
+                @apply me-0 mb-2;
+
+            }
+            .slide {
+                @apply p-0;
+
+            }
+            .slide-menu {
+                &.child1,
+                &.child2,
+                &.child3 {
+                    @apply min-w-[12rem]! hidden!;
+                    .slide {
+                        .side-menu__item {
+                            @apply text-start;
+
+                            &:before {
+                                @apply top-[0.938rem] start-3;
+
+                            }
+                        }
+                    }
+                    .slide.has-sub,.slide {
+                        &.side-menu__label1 {
+                            @apply hidden;
+
+                        }
+                    }
+                }
+            }
+            .slide.has-sub:hover {
+                .slide-menu.child1 {
+                    @apply block!;
+
+                    .slide.has-sub:hover {
+                        .slide-menu.child2 {
+                            @apply block!;
+
+                            .slide.has-sub:hover {
+                                .slide-menu.child3 {
+                                    @apply block!;
+
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .slide__category,
+            .side-menu__angle {
+                @apply hidden;
+
+            }
+            .slide-menu {
+                &.child1,
+                &.child2,
+                &.child3 {
+                    .side-menu__angle {
+                        @apply block end-4 top-[0.65rem];
+
+                    }
+                }
+            }
+            .side-menu__item,
+            .side-menu__label {
+                @apply block text-center;
+
+            }
+            .slide.has-sub .slide-menu {
+                @apply absolute start-[9.5rem]   top-auto transition-none rounded-e-md shadow-[0.125rem_0.063rem_0.5rem_rgba(0,0,0,0.1)] dark:shadow-[0.125rem_0.063rem_0.5rem_rgba(255,255,255,0.1)] ;
+
+                &.child2,
+                &.child3 {
+                        @apply start-48!;
+
+                }
+            }
+            .simplebar-content-wrapper {
+                position: initial;
+            }
+            .simplebar-mask {
+                position: inherit;
+            }
+            .simplebar-placeholder {
+                @apply h-auto!;
+
+            }
+        }
+        .app-header {
+            @apply ps-[9.5rem];
+
+        }
+        .content  {
+            @apply ms-[9.5rem];
+
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    [data-nav-style="menu-hover"][data-toggled="menu-hover-closed"]:not([data-nav-layout="horizontal"]) {
+      .content {
+        @apply min-h-[100rem];
+      }
+    }
+  }

preview/assets/scss/layout/_vertical.scss

@@ -0,0 +1,364 @@
+.main-sidebar {
+  @apply mt-[3.72rem] pt-2 pb-20 h-screen relative overflow-auto focus-visible:outline-none;
+  .main-menu-container,
+  .simplebar-content-wrapper,
+  .simplebar-content{
+      @apply focus-visible:outline-none;
+  }
+}
+
+.app-sidebar {
+  .side-menu__angle {
+    @apply rtl:rotate-180;
+  }
+}
+
+.sidemenu-toggle .header-link {
+  .header-link-icon {
+
+    @apply rtl:rotate-180;
+  }
+}
+
+.app-sidebar {
+  @apply w-[15rem] h-full bg-[#111c43] dark:bg-bodybg border-e border-e-white/10 fixed top-0 start-0 font-montserrat z-[103] transition-all ease-linear duration-[0.05s];
+
+
+  .main-sidebar-header {
+    @apply h-[3.75rem] w-[15rem] fixed flex  dark:bg-bodybg z-[9] items-center justify-center py-[0.813rem] px-5 border-b border-b-white/10 border-e border-e-white/10 transition-all ease-linear duration-[0.05s];
+
+    .header-logo {
+      img {
+        @apply h-8 leading-8;
+      }
+
+      .desktop-dark{
+      @apply block;
+
+    }
+
+    .desktop-logo,
+    .toggle-logo,
+    .toggle-dark,.toggle-white {
+      @apply hidden;
+
+    }
+  }
+}
+
+.slide__category {
+
+  @apply text-[0.6rem] font-semibold tracking-[0.065rem] uppercase py-3 px-[1.65rem] whitespace-nowrap opacity-50 relative text-[#a3aed1] dark:text-[#8f9bb3];
+
+}
+
+.slide {
+  @apply m-0 py-[0rem] px-3;
+
+}
+
+.side-menu__item {
+  @apply p-3 relative flex items-center no-underline text-[0.78rem] text-[#a3aed1] dark:text-[#8f9bb3] font-medium rounded-md cursor-pointer my-[0.25rem];
+
+  &.active,
+  &:hover {
+    @apply text-white bg-white/[0.05] before:border-white;
+
+    .side-menu__label,
+    .side-menu__angle {
+      @apply text-white;
+    }
+
+    .side-menu__icon {
+      @apply fill-white text-white;
+
+    }
+  }
+
+  &.active {
+    @apply font-semibold;
+
+  }
+}
+
+.slide-menu {
+
+  &.child1,
+  &.child2,
+  &.child3 {
+    .side-menu__item.active {
+      @apply bg-transparent;
+
+    }
+  }
+}
+
+.slide-menu {
+  @apply p-[0rem];
+
+}
+
+.slide-menu {
+
+  &.child1,
+  &.child2 {
+    .side-menu__item {
+      @apply py-[0.45rem] px-[1.6rem];
+
+    }
+  }
+}
+
+.slide-menu {
+
+  &.child1,
+  &.child2,
+  &.child3 {
+    .side-menu__item {
+      &:before {
+        @apply absolute content-[""] w-[0.3rem] h-[0.3rem] border border-[#536485] dark:border-[#8f9bb3] rounded-full bg-transparent start-2 opacity-50;
+
+      }
+
+      &:hover {
+        @apply text-white;
+
+        &:before {
+          @apply content-[""]! border! border-white! rounded-full! bg-transparent! opacity-100! ;
+
+
+        }
+      }
+
+      &.active {
+        &:before {
+          @apply absolute content-[""] w-[0.3rem] h-[0.3rem] border border-white rounded-full bg-transparent opacity-100;
+
+        }
+      }
+    }
+
+    li {
+      @apply p-0 ps-6 relative;
+
+    }
+  }
+}
+
+.side-menu__label {
+  @apply whitespace-nowrap text-[#a3aed1] dark:text-[#8f9bb3] relative text-[0.85rem] leading-none align-middle;
+
+  .badge {
+    @apply p-2 rounded-sm;
+  }
+
+}
+
+.side-menu__icon {
+  @apply me-2.5 w-[1.15rem] h-[1.15rem] text-[1.15rem] text-center text-[#a3aed1] fill-[#a3aed1] dark:text-[#8f9bb3] rounded-md;
+
+}
+
+.side-menu__angle {
+  @apply origin-center absolute end-3 text-[0.85rem] text-[#a3aed1] dark:text-[#8f9bb3] transition-all ease-linear duration-[0.05s];
+
+
+}
+
+.slide.side-menu__label1 {
+  @apply hidden;
+
+
+}
+}
+
+.horizontal-logo {
+  @apply py-[0.85rem] px-[0rem];
+
+
+}
+
+.slide.has-sub .slide-menu {
+  @apply visible! translate-x-0! translate-y-0!;
+
+
+}
+
+.nav ul li {
+  @apply list-none;
+
+
+}
+
+.nav>ul {
+  @apply ps-0;
+
+
+}
+
+.slide-menu {
+  @apply hidden;
+
+
+}
+
+.slide.has-sub {
+  @apply grid;
+
+
+  &.open {
+    >.side-menu__item .side-menu__angle {
+      @apply rotate-90;
+
+
+    }
+  }
+}
+
+/* Start Responsive Styles */
+[data-toggled="open"] {
+  .app-sidebar {
+    @apply translate-x-0 transition-all duration-300;
+
+    .main-sidebar-header {
+      @apply hidden;
+    }
+
+    #sidebar-scroll {
+      @apply mt-0;
+    }
+
+    @apply lg:!translate-x-0 ;
+  }
+}
+
+[data-toggled="close"] {
+  .app-sidebar {
+    @apply transition-all duration-300 -translate-x-full;
+
+    .main-sidebar-header {
+      @apply hidden;
+    }
+
+    #sidebar-scroll {
+      @apply mt-0;
+    }
+
+    @apply lg:!translate-x-0 ;
+  }
+
+  &[dir="ltr"] {
+    .app-sidebar {
+      @apply -translate-x-full;
+    }
+  }
+
+  &[dir="rtl"] {
+    .app-sidebar {
+      @apply translate-x-full;
+    }
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .main-sidebar-header {
+    @apply hidden;
+  }
+
+  #sidebar-scroll {
+    @apply mt-0!;
+  }
+}
+
+/* End Responsive Styles */
+
+
+/* Responsive Styles Start */
+
+@media (max-width: 991.98px) {
+  .horizontal-logo {
+    .header-logo {
+
+      .desktop-logo,
+      .desktop-dark,
+      .toggle-dark,
+      .desktop-white,.toggle-white {
+        @apply hidden;
+
+
+      }
+
+      .toggle-logo {
+        @apply block;
+
+
+      }
+    }
+  }
+  .main-sidebar-header {
+    @apply hidden! ;
+
+
+  }
+
+  .main-sidebar {
+    @apply mt-0;
+
+
+  }
+
+  .app-sidebar {
+    @apply top-0;
+
+
+  }
+}
+
+.slide-left,
+.slide-right {
+  @apply hidden;
+
+
+}
+
+[data-nav-layout="vertical"] {
+  .slide.has-sub {
+    &.active {
+      >.side-menu__item {
+        @apply mb-[0.25rem];
+
+
+      }
+    }
+  }
+}
+
+@media (min-width:992px) {
+  .horizontal-logo {
+    @apply hidden;
+
+
+  }
+}
+
+/* Responsive Styles End */
+
+/* Responsive Overlay Start */
+#responsive-overlay {
+  @apply invisible fixed inset-0 z-[101] transition-all ease-in-out duration-100 bg-[#878b94];
+
+  &.active {
+    @apply visible;
+  }
+}
+/* Responsive Overlay End */
+
+
+@media (max-width: 991.98px) {
+  .main-menu {
+   @apply m-0! ;
+  }
+  .app-sidebar {
+    @apply z-[105]!;
+  }
+}

preview/assets/scss/pages/_chat.scss

@@ -0,0 +1,292 @@
+.main-chart-wrapper {
+  @apply relative overflow-hidden my-0 -mx-[1.25rem];
+  .chat-info,
+  .main-chat-area,
+  .chat-user-details {
+    @apply bg-white dark:bg-bodybg h-[calc(100vh-8rem)] rounded-md;
+  }
+  .chat-users-tab,
+  .chat-groups-tab,
+  .chat-calls-tab {
+    @apply max-h-[calc(100vh-21rem)];
+  }
+  .chat-content {
+    @apply max-h-[calc(100vh-17rem)];
+    .simplebar-content-wrapper .simplebar-content {
+      @apply mt-auto;
+    }
+    ul li {
+      @apply mb-4;
+
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+  }
+  .responsive-chat-close,button.responsive-userinfo-open {
+    @apply hidden;
+  }
+  .chat-info {
+    @apply relative;
+    .chat-add-icon {
+      @apply absolute bottom-3 end-[0.8rem] z-[1];
+    }
+    .nav-link {
+      @apply rounded-none text-[#8c9097];
+      &.active{
+        @apply bg-primary/10;
+      }
+    }
+    .tab-pane {
+      @apply p-0;
+    }
+    .chat-groups-tab {
+      li {
+        @apply py-[0.625rem] px-[1.25rem];
+      }
+
+      .group-indivudial {
+        @apply text-primary font-semibold;
+      }
+    }
+    .chat-calls-tab {
+      li {
+        @apply py-[0.625rem] px-[1.25rem];
+      }
+
+      .incoming-call-success,
+      .outgoing-call-success {
+        i {
+          @apply text-success text-[0.875rem];
+        }
+      }
+
+      .incoming-call-failed,
+      .outgoing-call-failed {
+        i {
+          @apply text-danger text-[0.875rem];
+        }
+      }
+    }
+    .chat-users-tab,
+    .chat-groups-tab {
+      li {
+        @apply py-[0.625rem] px-[1.25rem];
+        .chat-msg {
+          @apply text-[#8c9097] dark:text-defaulttextcolor/70 max-w-[11.25rem] inline-block;
+        }
+        .chat-msg-typing {
+          .chat-msg {
+            @apply text-success;
+          }
+          .chat-read-icon {
+            @apply hidden;
+          }
+        }
+        .chat-read-icon {
+          @apply leading-none;
+
+          i {
+            @apply text-[1rem] text-success;
+          }
+        }
+        &.chat-msg-unread {
+          @apply bg-defaultbackground text-defaulttextcolor dark:text-defaulttextcolor/70 dark:bg-light;
+
+          .chat-msg {
+            @apply text-defaulttextcolor dark:text-defaulttextcolor/70;
+          }
+          .chat-read-icon {
+            i {
+              @apply text-[#8c9097] dark:text-defaulttextcolor/70;
+            }
+          }
+        }
+        &.chat-inactive {
+          .chat-read-icon {
+            @apply hidden;
+          }
+        }
+      }
+    }
+  }
+  .chat-user-details {
+    @apply p-[1.5rem];
+    .avatar {
+      @apply outline-1! outline-primary/20! border-solid! ;
+    }
+    .shared-files {
+      li {
+        @apply mb-1 ;
+        &:last-child {
+          @apply mb-0 ;
+        }
+      }
+      .shared-file-icon i {
+        @apply w-4 h-4 leading-none rounded-[0.3rem] border border-solid border-defaultborder dark:border-defaultborder/10 dark:text-defaulttextcolor/70 flex items-center p-[1.125rem] justify-center text-[1.125rem] text-[#8c9097];
+      }
+    }
+    .chat-media {
+      img {
+        @apply w-[5.5rem] h-[5.5rem] rounded-md mb-[1.125rem];
+      }
+    }
+  }
+  .main-chat-area {
+    @apply relative;
+    .chat-content {
+      @apply bg-cover bg-center bg-no-repeat bg-fixed p-[2.5rem];
+      .chatting-user-info {
+        @apply text-defaulttextcolor dark:text-defaulttextcolor/70 font-semibold text-[var(--font-size-defaultsize)];
+        .msg-sent-time {
+          @apply text-[#8c9097] text-[0.75rem] font-medium;
+          .chat-read-mark {
+            i {
+              @apply text-success me-[0.3rem];
+            }
+          }
+        }
+      }
+      .main-chat-msg div {
+        @apply mt-[0.4rem] p-3 w-fit;
+        p {
+          @apply text-[0.813rem];
+        }
+        .chat-media-image {
+          @apply w-[6.25rem] h-[6.25rem] rounded-md;
+        }
+      }
+      .chat-item-start {
+        .main-chat-msg div {
+          @apply bg-light text-defaulttextcolor dark:text-defaulttextcolor/70 rounded-[0.3rem];
+        }
+        .msg-sent-time {
+          @apply ms-1 inline-flex;
+        }
+      }
+      .chat-item-end {
+        @apply justify-end text-end;
+        .main-chat-msg div {
+          @apply bg-primary text-white rounded-[0.3rem];
+        }
+        .msg-sent-time {
+          @apply me-1;
+        }
+      }
+      .chat-item-start,
+      .chat-item-end {
+        @apply flex;
+        .chat-list-inner {
+          @apply flex items-start max-w-[75%];
+        }
+      }
+    }
+    .chat-footer {
+      @apply w-full;
+    }
+    .chat-footer {
+      @apply flex-shrink-0 flex items-center h-[4.75rem] py-0 px-[1.5rem] border-t border-solid dark:text-defaulttextcolor/70 border-defaultborder dark:border-defaultborder/10 bg-white dark:bg-bodybg absolute start-auto end-auto bottom-0;
+    }
+    .chat-day-label {
+      @apply text-center mb-8 opacity-[0.6] relative text-[#8c9097];
+      span {
+        @apply py-[0.188rem] px-2 text-[0.7rem] bg-primary/20 rounded-[0.3rem] text-primary;
+      }
+    }
+  }
+  @media (min-width: 992px) {
+    .chat-info {
+      @apply min-w-[21.875rem] max-w-[21.875rem];
+    }
+  }
+  .main-chat-area {
+    @apply w-full max-w-full overflow-hidden;
+  }
+  .chat-user-details {
+    @apply sm:min-w-[21.875rem] sm:max-w-[21.875rem] min-w-[20rem] max-w-[20rem];
+  }
+  @media (max-width: 1275.98px) and (min-width: 992px) {
+    .chat-info {
+      @apply min-w-[21.875rem] max-w-[21.875rem];
+    }
+    .main-chat-area {
+      @apply w-full max-w-full overflow-hidden;
+    }
+    .chat-user-details {
+      @apply hidden;
+    }
+  }
+  @media (max-width: 991.98px) {
+    .chat-info {
+      @apply w-full;
+    }
+    .main-chat-area {
+      @apply hidden min-h-full max-w-full;
+    }
+    .responsive-chat-close {
+      @apply block;
+    }
+  }
+  @media (max-width:1400px) {
+    .chat-user-details {
+      @apply hidden absolute;
+      &.open {
+        @apply block end-0 top-2 shadow-sm border border-solid border-defaultborder dark:border-defaultborder/10;
+      }
+    }
+    button.responsive-userinfo-open {
+      @apply block;
+    }
+  }
+}
+@media (max-width:991.98px) {
+  .main-chart-wrapper {
+    &.responsive-chat-open {
+      .chat-info {
+        @apply hidden;
+      }
+      .main-chat-area {
+        @apply block;
+      }
+    }
+  }
+}
+@media (max-width: 767.98px) {
+  .main-chart-wrapper .main-chat-area .chat-content .main-chat-msg div .chat-media-image {
+    @apply w-[2.5rem] h-[2.5rem];
+  }
+}
+@media (max-width: 354px) {
+  .main-chart-wrapper .chat-calls-tab, .main-chart-wrapper .chat-groups-tab, .main-chart-wrapper .chat-users-tab {
+    @apply max-h-[calc(100vh-22rem)];
+  }
+}
+[dir="rtl"] {
+  .chat-footer .btn-send {
+    @apply rotate-180;
+  }
+}
+.tab-style-2 {
+  @apply border-b-0;
+  .nav-item {
+    @apply me-2;
+    &:last-child {
+      @apply me-0;
+    }
+    .nav-link {
+      @apply border-0;
+      i {
+        @apply w-[1.875rem] h-[1.875rem] p-[0.4rem] rounded-[50px] bg-light text-defaulttextcolor dark:text-defaulttextcolor/70 inline-flex;
+      }
+      &:hover {
+        @apply border-0;
+      }
+      &.active {
+        @apply bg-primary/10 relative border-0 text-primary;
+        i {
+          @apply bg-primary/10 text-primary before:absolute before:start-[45%] before:end-0 before:bottom-0 before:w-[20%] before:h-[0.175rem] before:bg-primary before:rounded-[50px];
+        }
+      }
+    }
+  }
+}

preview/assets/scss/pages/_task.scss

@@ -0,0 +1,89 @@
+/* Start::task-kanboard-board */
+.ynex-kanban-board {
+    @apply flex overflow-x-auto items-stretch mb-3 pb-4;
+    .kanban-tasks-type {
+        @apply min-w-[20rem] me-6 w-full;
+        &:last-child {
+            @apply me-0;
+        }
+        .kanban-tasks{
+           @apply touch-none overflow-x-hidden overflow-y-scroll;
+        }
+    }
+    .task-image {
+        .kanban-image {
+            @apply h-[150px] w-full rounded-md;
+        }
+    }
+    .kanban-content {
+        @apply mt-3;
+    }
+    .kanban-task-description {
+        @apply text-textmuted text-[0.82rem];
+    }
+    .kanban-tasks-type {
+        &.new {
+            .kanban-tasks.box {
+                @apply border-t-[3px] border-solid border-primary/30;
+            }
+        }
+        &.todo {
+            .kanban-tasks.box {
+                @apply border-t-[3px] border-solid border-warning/30;
+            }
+        }
+        &.in-progress {
+            .kanban-tasks.box {
+                @apply border-t-[3px] border-solid border-info/30;
+            }
+        }
+        &.inreview {
+            .kanban-tasks.box {
+                @apply border-t-[3px] border-solid border-danger/30;
+            }
+        }
+        &.completed {
+            .kanban-tasks.box {
+                @apply border-t-[3px] border-solid border-success/30;
+            }
+        }
+    }
+    #new-tasks,#todo-tasks,#inprogress-tasks,#inreview-tasks,#completed-tasks {
+        .box:last-child {
+            @apply mb-0;
+        }
+    }
+    #new-tasks,#todo-tasks,#inprogress-tasks,#inreview-tasks,#completed-tasks {
+        @apply relative max-h-[35rem];
+        .simplebar-content {
+            @apply pt-0 pb-4 px-0;
+        }
+    }
+    .task-Null {
+        @apply relative min-h-[12.5rem] before:absolute before:inset-0 before:bg-white dark:before:bg-bodybg before:rounded-md before:bg-[url('../images/media/media-83.svg')] before:bg-cover before:bg-center before:h-[12.5rem]
+        before:w-full before:my-0 before:mx-auto;
+    }
+}
+/* end::task-kanboard-board */
+
+/* Start::task-details */
+.task-title {
+    @apply relative start-4 before:absolute before:w-2 before:h-2 before:-start-4 before:top-2 before:rounded-full before:bg-secondary;
+}
+.task-details-key-tasks {
+    @apply list-decimal;
+    li {
+        @apply mb-2 text-[0.875rem] text-[#8c9097];
+        &:last-child {
+            @apply mb-0;
+        }
+    }
+}
+.task-description {
+    @apply text-[0.875rem];
+}
+.task-details-progress {
+    @apply w-[6.25rem];
+}
+
+/* End::task-details */

preview/assets/scss/plugins/_calendar.scss

@@ -0,0 +1,133 @@
+/* Start Calendar  Styles */
+#external-events .fc-event {
+  @apply rounded-sm my-1 py-2 px-3;
+}
+.fc-theme-standard td,
+.fc-theme-standard th {
+  @apply border-gray-200! dark:!border-white/10;
+}
+
+.fc .fc-button:focus {
+  @apply shadow-md!;
+}
+
+.fc .fc-button-primary:focus,
+.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
+.fc .fc-button-primary:not(:disabled):active:focus {
+  @apply shadow-md!
+}
+
+.fc-h-event {
+  @apply text-white bg-primary border-primary;
+}
+
+.fc .fc-button-primary {
+  @apply text-white! bg-primary! border-primary!;
+}
+
+.fc .fc-button-primary:hover {
+  @apply text-white! bg-primary/80! border-primary/80!;
+}
+
+.fc .fc-button-primary:disabled {
+  @apply text-white! bg-primary/80! border-primary/80!;
+}
+
+.fc .fc-button-primary:not(:disabled).fc-button-active,
+.fc .fc-button-primary:not(:disabled):active {
+  @apply text-white! bg-primary/80! border-primary/80!;
+}
+
+.fc-theme-standard .fc-scrollgrid {
+  @apply border-gray-200! dark:!border-white/10;
+}
+
+.fc .fc-scrollgrid-section-sticky > * {
+  @apply bg-gray-200! dark:!bg-black/20;
+}
+
+.fc-theme-standard .fc-list {
+  @apply border-gray-200! dark:!border-white/10;
+}
+
+.fc .fc-non-business {
+  @apply bg-gray-50! dark:!bg-black/20;
+}
+
+.fc .fc-scrollgrid {
+  @apply rounded-sm overflow-hidden;
+}
+
+.fc .fc-bg-event,
+.fc .fc-highlight,
+.fc .fc-non-business,
+.fc .fc-view-harness-active > .fc-view {
+  @apply rounded-sm overflow-hidden;
+}
+
+.fc .fc-cell-shaded,
+.fc .fc-day-disabled {
+  @apply bg-gray-50! dark:!bg-black/20 ;
+}
+
+.fc .fc-daygrid-day.fc-day-today {
+  @apply bg-primary/20! ;
+}
+
+.fc .fc-timegrid-col.fc-day-today {
+  @apply bg-primary/20! ;
+}
+
+.fc-theme-standard .fc-list-day-cushion {
+  @apply bg-gray-50! dark:!bg-black/20 ;
+}
+
+.fc .fc-list-event:hover td {
+  @apply bg-primary/20! ;
+}
+.fc-timegrid-event-harness-inset .fc-timegrid-event,
+.fc-timegrid-event.fc-event-mirror,
+.fc-timegrid-more-link {
+  @apply shadow-md! shadow-gray-200! dark:!shadow-gray-800 ;
+}
+
+.fullcalendar-events-activity li {
+  @apply mb-3 text-sm py-1 ps-8 relative before:absolute before:w-3 before:h-3 before:border before:border-primary before:rounded-sm before:bg-transparent before:start-1 before:top-[0.563rem]
+        after:absolute after:h-full after:bg-transparent after:border-s-2 after:border-dashed after:border-primary/10 after:start-[0.563rem] after:top-5;
+}
+.fullcalendar-events-activity li:last-child {
+  @apply mb-0;
+}
+.fullcalendar-events-activity li:last-child::after {
+  @apply border-0;
+}
+
+#full-calendar-activity {
+  @apply max-h-44;
+}
+.fc-col-header-cell .fc-scrollgrid-sync-inner {
+  @apply p-2 flex justify-center;
+}
+.fc-direction-ltr .fc-daygrid-event.fc-event-start,
+.fc-direction-rtl .fc-daygrid-event.fc-event-end {
+  @apply px-2;
+}
+.fc .fc-day-other .fc-daygrid-day-top {
+  @apply opacity-100! text-gray-500! dark:!text-white/70;
+}
+.fc-theme-standard .fc-popover {
+  @apply border-gray-200 dark:border-white/10 bg-white dark:bg-bodybg;
+}
+.fc-header-toolbar {
+  @apply md:!flex block md:!space-y-0 space-y-2!;
+}
+.fc .fc-list-sticky .fc-list-day > * {
+  @apply bg-gray-100 dark:bg-black/20;
+}
+.fc-event-dragging {
+  @apply px-2 py-2;
+}
+.fc .fc-daygrid-day-bottom{
+  @apply text-[0.44em]! pt-0! ;
+}
+/* End Calendar  Styles */

preview/assets/scss/plugins/_datatable.scss

@@ -0,0 +1,163 @@
+/* Start Datatable  Styles */
+.tabulator .tabulator-header .tabulator-col {
+  @apply bg-white! border-gray-200! dark:!bg-bodybg dark:!border-white/10;
+}
+
+.tabulator
+  .tabulator-header
+  .tabulator-headers
+  .tabulator-col
+  .tabulator-col-content {
+  @apply px-6! py-3!;
+}
+
+.tabulator .tabulator-row .tabulator-cell {
+  @apply px-6! py-3!;
+}
+
+.tabulator .tabulator-row.tabulator-row-even {
+  @apply bg-gray-100! dark:!bg-black/20;
+}
+
+.tabulator-row.tabulator-selectable:hover {
+  @apply bg-gray-100! dark:!bg-black/20;
+}
+
+.tabulator .tabulator-row {
+  @apply border-t! border-gray-200! dark:!border-white/10 ;
+}
+
+.tabulator .tabulator-header {
+  @apply border-0!  bg-white! dark:!text-white dark:!bg-bodybg ;
+}
+
+.tabulator {
+  @apply border-0! bg-transparent! ;
+}
+
+.tabulator-row .tabulator-cell {
+  @apply border-gray-200! dark:!border-white/10 ;
+}
+
+.tabulator .tabulator-row .tabulator-cell:nth-child(9) {
+  @apply border-e-0!;
+}
+
+.tabulator .tabulator-header .tabulator-col:nth-child(9) {
+  @apply border-e-0!;
+}
+
+.tabulator .tabulator-footer {
+  @apply border-gray-200! dark:!text-defaulttextcolor/70 dark:!border-white/10;
+}
+
+.tabulator .tabulator-footer {
+  @apply bg-transparent! font-medium!;
+}
+
+.tabulator .tabulator-tableholder .tabulator-table {
+  @apply text-defaulttextcolor! dark:!text-defaulttextcolor/70  bg-transparent!;
+}
+
+.tabulator-row {
+  @apply bg-transparent!;
+}
+
+.tabulator .tabulator-footer .tabulator-paginator {
+  @apply dark:!text-white;
+}
+
+select.tabulator-page-size {
+  @apply bg-[length:1rem_1rem]!;
+}
+
+.tabulator .tabulator-footer .tabulator-page-size {
+  @apply py-1! ps-3! pe-8! leading-[1.6]! text-xs! border-gray-200! dark:!border-white/10 bg-transparent! rounded-md! ;
+}
+
+.tabulator .tabulator-footer .tabulator-page {
+  @apply py-1! px-3! rounded-md! border-gray-200! dark:!border-white/10 text-defaulttextcolor!  dark:!text-defaulttextcolor/70 bg-transparent!;
+}
+
+.tabulator .tabulator-footer .tabulator-page.active {
+  @apply text-primary!;
+}
+.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
+  @apply text-primary! bg-primary/30!;
+}
+select.tabulator-page-size {
+  @apply filter!;
+  option {
+    @apply dark:!bg-bodybg border-gray-200! dark:!border-white/10;
+  }
+}
+.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle {
+  @apply px-0!;
+}
+.sortable-data {
+  select {
+    @apply border-inherit! rounded-md! bg-[length:1rem_1rem]!;
+  }
+  .choices {
+    @apply mb-0!;
+  }
+}
+.tabulator .tabulator-col-resize-handle:last-child {
+  @apply hidden! ;
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing {
+  @apply border-0! border-gray-200! dark:!border-white/10;
+}
+.tabulator .tabulator-footer .tabulator-footer-contents {
+  @apply sm:!flex-row flex-col! space-y-2! sm:!space-y-0 p-4!;
+}
+.tabulator .tabulator-footer .tabulator-page-size {
+  @apply sm:!ps-3 ps-1! sm:!pe-8 !pe-4 ;
+}
+.tabulator .tabulator-footer .tabulator-page {
+  @apply sm:!px-3 px-1!;
+}
+.tabulator .tabulator-footer .tabulator-paginator {
+  label {
+    @apply hidden!;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .tabulator-col,
+  .tabulator-cell {
+    @apply w-60!;
+  }
+}
+.tabulator
+  .tabulator-header
+  .tabulator-col.tabulator-sortable[aria-sort="ascending"]
+  .tabulator-col-content
+  .tabulator-col-sorter {
+  @apply text-defaulttextcolor dark:text-defaulttextcolor/70;
+}
+.tabulator
+  .tabulator-header
+  .tabulator-col.tabulator-sortable[aria-sort="ascending"]
+  .tabulator-col-content
+  .tabulator-col-sorter
+  .tabulator-arrow {
+  @apply border-b-gray-200 dark:border-b-white/10;
+}
+.tabulator
+  .tabulator-header
+  .tabulator-col.tabulator-sortable[aria-sort="descending"]
+  .tabulator-col-content
+  .tabulator-col-sorter
+  .tabulator-arrow {
+  @apply border-t-gray-200 dark:border-t-white/10;
+}
+.tabulator .tabulator-footer .tabulator-page-size {
+  @apply block! mb-2! w-full! sm:!inline-block sm:!mb-0 sm:!w-auto;
+}
+.sortable-data{
+ .choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable {
+  @apply px-3!;
+ }
+}
+/* End Datatable  Styles */

preview/assets/scss/plugins/_sweetalert.scss

@@ -0,0 +1,126 @@
+/* Start Sweetalert  Styles */
+
+.swal2-popup {
+  @apply dark:bg-bodybg dark:text-white p-6 rounded-sm;
+}
+.swal2-title {
+  @apply p-0 text-xl mb-2;
+}
+.swal2-icon {
+  @apply mt-0;
+}
+.swal2-image {
+  @apply mt-0;
+}
+
+.swal2-styled.swal2-confirm {
+  @apply bg-primary rounded-sm;
+}
+div:where(.swal2-container) div:where(.swal2-validation-message) {
+  @apply bg-light text-defaulttextcolor dark:text-defaulttextcolor/70;
+}
+.swal2-styled.swal2-confirm:focus {
+  @apply shadow shadow-primary;
+}
+
+div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=right],
+div:where(.swal2-icon).swal2-success [class^=swal2-success-circular-line][class$=left] {
+  @apply hidden;
+}
+.swal2-footer {
+  @apply border-gray-200 dark:border-white/10;
+}
+
+.swal2-styled.swal2-deny {
+  @apply bg-danger;
+}
+
+.swal2-styled.swal2-cancel {
+  @apply bg-secondary;
+}
+
+.swal2-loader {
+  @apply border-t-primary border-b-primary;
+}
+
+.swal2-file,
+.swal2-input,
+.swal2-textarea {
+  @apply border-gray-200 bg-white dark:bg-bodybg shadow-none! dark:border-white/10;
+}
+
+.swal2-file:focus,
+.swal2-input:focus,
+.swal2-textarea:focus {
+  @apply border-primary ring-primary shadow shadow-none;
+}
+
+.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
+  @apply bg-danger;
+}
+
+.swal2-icon.swal2-error {
+  @apply border-danger text-danger;
+}
+ .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="left"] {
+     @apply start-[1em];
+   }
+
+   .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
+     @apply w-[2em] h-[0.3em] bg-danger top-[1.9em];
+   }
+
+   .swal2-icon.swal2-error [class^="swal2-x-mark-line"][class$="right"] {
+     @apply end-[1em] top-[1.875rem];
+   }
+.swal2-icon.swal2-info {
+  @apply border-info text-info;
+}
+
+.swal2-icon.swal2-success .swal2-success-ring {
+  @apply border-success/50;
+}
+.swal2-icon.swal2-success [class^="swal2-success-line"][class$="long"] {
+  @apply top-[2.05em]! w-8! right-[0.45em]!;
+}
+.swal2-icon.swal2-success [class^="swal2-success-line"][class$="tip"] {
+  @apply top-[2.375em]!  left-[0.9125em]! w-[1.2625em]!;
+}
+.swal2-icon.swal2-success {
+  @apply border-success text-success;
+}
+
+.swal2-icon.swal2-question {
+  @apply border-secondary text-secondary;
+}
+
+.swal2-icon.swal2-warning {
+  @apply border-warning text-warning;
+}
+.swal2-icon {
+  @apply w-[60px] h-[60px];
+}
+// .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
+//   @apply top-[30px] w-[30px] h-1;
+// }
+
+.swal2-actions,
+.swal2-html-container {
+  @apply m-0;
+}
+.swal2-icon.swal2-success [class^="swal2-success-line"][class$="long"] {
+  @apply top-10 w-8 right-[15px];
+}
+.swal2-icon.swal2-success [class^="swal2-success-line"][class$="tip"] {
+  @apply top-[47px]  left-[22px] w-[20px];
+}
+.swal2-image{
+  @apply dark:brightness-50;
+}
+.swal2-icon.swal2-success .swal2-success-fix {
+  @apply bg-transparent !bg-transparent;
+}
+.swal2-footer {
+  @apply border-defaultborder dark:border-defaultborder/10 text-defaulttextcolor dark:text-defaulttextcolor/70;
+}
+/* End  Sweetalert  Styles */

preview/assets/scss/plugins/_swiper.scss

@@ -0,0 +1,68 @@
+/* Start Swiper Carousel  Styles */
+ 
+.swiper {
+  @apply w-full h-full;
+
+}
+[dir="rtl"] {
+  .swiper {
+    direction: ltr;
+  }
+}
+.swiper-cube .swiper-cube-shadow:before {
+  @apply bg-transparent;
+}
+
+.swiper-slide img {
+  @apply block w-full h-full object-cover rounded-sm;
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+  @apply dark:text-white bg-black/20 py-2 px-4 rounded-full h-auto;
+}
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  @apply text-base text-white;
+}
+
+.swiper-pagination-bullet-active {
+  @apply bg-white;
+}
+
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+  @apply bg-primary;
+}
+
+.mySwiper7.swiper-free-mode {
+
+  &.swiper-horizontal>.swiper-pagination-bullets,
+  .swiper-pagination-bullets.swiper-pagination-horizontal,
+  .swiper-pagination-custom,
+  .swiper-pagination-fraction {
+    @apply -bottom-4 pt-1 sticky;
+  }
+}
+
+[dir="rtl"] {
+  .swiper {
+    direction:ltr;
+  }
+}
+.swiper-slide{
+  img {
+   @apply block h-full w-full object-cover;
+  }
+}
+
+/* End Swiper Carousel  Styles */
+
+
+ .swiper-view .swiper-slide {
+   @apply  opacity-40!;
+ }
+
+ .swiper-view .swiper-slide-thumb-active {
+   @apply opacity-100!;
+ }

preview/assets/scss/style.scss

@@ -0,0 +1,174 @@
+/*------------------------------------------------------------------
+[Master Stylesheet]
+Project                        :    Ynex - Angular Tailwind Admin Template
+Created Date                   :   12/02/2024
+Updated Date                   :   23/05/2024
+Author & Copyright Ownership   :   Spruko Technologies Private Limited
+Author URL                     :   https://sprukomarket.com/user/spruko/portfolio
+Support	                       :   https://support.spruko.com/
+License Details                :   https://spruko.com/licenses-details
+
+-------------------------------------------------------------------*/
+/*------------------- Start Table of Content
+
+FontFamily
+Tailwind
+Variables
+Icons
+Dashboard-1
+Dashboard-2
+Dashboard-3
+Dashboard-4
+Dashboard-5
+Dashboard-6
+Dashboard-7
+Dashboard-8
+Dashboard-9
+Dashboard-11
+Custom
+Button
+Box
+Alert
+Avatar
+Badge
+List-Group
+Progress
+Spinner
+Toast
+Form
+Dropzone
+Filepond
+Color Picker
+Dropdown
+Modal
+Offcanvas
+Tooltip
+Table
+Chart
+Pagination
+Flat-pickr
+Choices
+Tom-select
+Quil Editor
+Rangeslider
+Map
+Swiper Carousel
+Sweetalert
+TreeView
+Datatable
+Calendar
+Gallery
+Header
+Vertical
+Responsive
+Horizontal
+Menu-Click
+Menu-Hover
+Icon-Click
+Icon-Hover
+switcher
+Mail
+Chat
+Ecommerce
+Invoice
+Team
+Profile
+About
+Timeline
+Todo
+Landing
+Authentication
+Widgets
+blog
+notifications
+Classic-Page Styles
+Boxed
+Menu-Scrollable
+Header-Scrollable
+Closed-Menu
+Icon-Overlay
+IconText-Menu
+Detached-Menu
+Double-Menu
+Menu Styles
+Header Styles
+Background Image
+
+-------------------*/
+
+/* Start FontFamily Styles */
+/* inter */
+
+
+/* End Tailwind Styles Styles */
+
+
+@use "./tailwind.css";
+@forward "./icons";
+
+
+@forward "custom/header";
+@forward "custom/dashboard_styles";
+@forward "custom/landing";
+@forward "custom/job_landing.scss";
+@forward "custom/authentication";
+@forward "custom/error";
+
+@forward "pages/pages_styles";
+@forward "pages/chat";
+@forward "pages/task";
+
+@forward "layout/vertical";
+@forward "layout/closed_menu";
+@forward "layout/double_menu";
+@forward "layout/horizontal";
+@forward "layout/icon_click";
+@forward "layout/icon_hover";
+@forward "layout/menu_click";
+@forward "layout/menu_hover";
+
+@forward "switcher/bg-img-styles";
+@forward "switcher/boxed";
+@forward "switcher/classic-page-style";
+@forward "switcher/closed_menu";
+@forward "switcher/detached_menu";
+@forward "switcher/double_menu";
+@forward "switcher/header-scrollable";
+@forward "switcher/header-styles";
+@forward "switcher/icon-overlay";
+@forward "switcher/icontext";
+@forward "switcher/menu-scrollable";
+@forward "switcher/menu-styles";
+@forward "switcher/loader";
+
+@forward "plugins/datatable";
+@forward "plugins/calendar";
+@forward "plugins/plugins.scss";
+@forward "plugins/sweetalert";
+@forward "plugins/swiper";
+
+@forward "tailwind/buttons";
+@forward "tailwind/forms";
+@forward "tailwind/components";
+@forward "tailwind/custom";
+@forward "tailwind/dropdown";
+@forward "tailwind/progress";
+@forward "tailwind/modal";
+@forward "tailwind/toast.scss";
+@forward "tailwind/alerts";
+@forward "tailwind/breadcrumb";
+@forward "tailwind/avatars.scss";
+@forward "tailwind/accordion";
+@forward "tailwind/carousels.scss";
+@forward "tailwind/cards";
+@forward "tailwind/offcanvas";
+@forward "tailwind/pagination";
+@forward "tailwind/tables";
+@forward "tailwind/tooltip";
+@forward "tailwind/progress";
+@forward "tailwind/charts";
+
+
+
+@forward "global/global";
+@forward "global/custom";

preview/assets/scss/switcher/_bg-img-styles.scss

@@ -0,0 +1,178 @@
+/* Start Background Image Styles */
+[bg-img="bgimg1"] {
+  .app-sidebar {
+    @apply bg-[url('../images/menu-bg-images/bg-img1.jpg')]! bg-cover! bg-center!;
+  }
+
+  &[data-menu-styles=gradient] {
+    .app-sidebar {
+      @apply bg-[url('../images/menu-bg-images/bg-img1.jpg')]! bg-cover! bg-center!;
+    }
+  }
+}
+
+[bg-img="bgimg2"] {
+  .app-sidebar {
+    @apply bg-[url('../images/menu-bg-images/bg-img2.jpg')]! bg-cover! bg-center!;
+  }
+
+  &[data-menu-styles=gradient] {
+    .app-sidebar {
+      @apply bg-[url('../images/menu-bg-images/bg-img2.jpg')]! bg-cover! bg-center!;
+    }
+  }
+}
+
+[bg-img="bgimg3"] {
+  .app-sidebar {
+    @apply bg-[url('../images/menu-bg-images/bg-img3.jpg')]! bg-cover! bg-center!;
+  }
+
+  &[data-menu-styles=gradient] {
+    .app-sidebar {
+      @apply bg-[url('../images/menu-bg-images/bg-img3.jpg')]! bg-cover! bg-center!;
+    }
+  }
+}
+
+[bg-img="bgimg4"] {
+  .app-sidebar {
+    @apply bg-[url('../images/menu-bg-images/bg-img4.jpg')]! bg-cover! bg-center!;
+  }
+
+  &[data-menu-styles=gradient] {
+    .app-sidebar {
+      @apply bg-[url('../images/menu-bg-images/bg-img4.jpg')]! bg-cover! bg-center!;
+    }
+  }
+}
+
+[bg-img="bgimg5"] {
+  .app-sidebar {
+    @apply bg-[url('../images/menu-bg-images/bg-img5.jpg')]! bg-cover! bg-center!;
+  }
+
+  &[data-menu-styles=gradient] {
+    .app-sidebar {
+      @apply bg-[url('../images/menu-bg-images/bg-img5.jpg')]! bg-cover! bg-center!;
+    }
+  }
+}
+
+[bg-img="bgimg5"],
+[bg-img="bgimg4"],
+[bg-img="bgimg3"],
+[bg-img="bgimg2"],
+[bg-img="bgimg1"] {
+  .app-sidebar {
+    @apply bg-cover bg-center bg-no-repeat before:absolute before:inset-x-0 before:top-0 before:w-full before:h-full before:-z-[1];
+  }
+
+  &[data-nav-layout="vertical"][data-nav-style="menu-click"][data-toggled="menu-click-closed"],
+  &[data-nav-layout="vertical"][data-nav-style="menu-hover"][data-toggled="menu-hover-closed"],
+  &[data-nav-layout="vertical"][data-nav-style="icon-click"][data-toggled="icon-click-closed"],
+  &[data-nav-layout="vertical"][data-nav-style="icon-hover"][data-toggled="icon-hover-closed"] {
+
+    .app-sidebar {
+      position: fixed;
+    }
+  }
+
+  &[data-menu-styles="light"] {
+    .app-sidebar {
+      @apply before:bg-white/80;
+
+      .main-sidebar-header {
+        @apply bg-transparent!;
+      }
+
+    }
+  }
+
+
+  &.light {
+    &[data-menu-styles="dark"] {
+      .app-sidebar {
+        @apply before:bg-[#111c43]/80;
+
+        .main-sidebar-header {
+          @apply bg-transparent!;
+        }
+      }
+    }
+  }
+
+  &[data-menu-styles="dark"] {
+    &.dark {
+
+      .app-sidebar {
+        @apply before:bg-bodybg/80;
+
+        .main-sidebar-header {
+          @apply bg-transparent!;
+        }
+      }
+    }
+
+
+    .app-sidebar {
+      @apply before:bg-[#111c43]/80;
+
+
+      .main-sidebar-header {
+        @apply bg-transparent!;
+      }
+    }
+  }
+
+  &[data-menu-styles="color"] {
+    .app-sidebar {
+      @apply before:bg-primary/80 before:bg-gradient-to-t before:from-black/30 before:to-black/30;
+
+      .main-sidebar-header {
+        @apply bg-transparent!;
+      }
+    }
+  }
+
+  &[data-menu-styles="gradient"] {
+    .app-sidebar {
+      @apply before:bg-gradient-to-b before:from-primary/80 before:to-secondary/80 after:absolute after:h-full after:w-full after:inset-0 after:bg-gradient-to-t after:from-black/30 after:to-black/30 after:-z-[1];
+
+      .main-sidebar-header {
+        @apply bg-transparent!;
+      }
+    }
+  }
+
+  &[data-menu-styles="transparent"] {
+    .app-sidebar {
+      @apply before:bg-bodybg/80;
+
+      .main-sidebar-header {
+        @apply bg-transparent!;
+      }
+    }
+
+    &.dark {
+      .app-sidebar {
+        @apply before:bg-bodybg2/80;
+
+        .main-sidebar-header {
+          @apply bg-transparent!;
+        }
+      }
+    }
+  }
+
+  @media (min-width: 992px) {
+    &[data-vertical-style=doublemenu] {
+      .app-sidebar .main-sidebar-header {
+        backdrop-filter: blur(30px);
+      }
+    }
+  }
+
+}
+
+/* End Background Image Styles */

preview/assets/scss/switcher/_boxed.scss

@@ -0,0 +1,137 @@
+/* Start Boxed Styles */
+
+[data-width="boxed"] {
+  @media (min-width: 1400px) {
+    body {
+      @apply bg-bodybg! dark:!bg-bodybg2;
+    }
+
+    .page {
+      @apply w-[1400px]! my-0! mx-auto!  relative! shadow-[0rem_0rem_1rem_rgba(0,0,0,0.1)]! dark:!shadow-[0rem_0rem_1rem_rgba(255,255,255,0.1)];
+      .app-header {
+        @apply w-[1400px] my-0 mx-auto;
+      }
+    }
+
+    &[data-nav-layout="horizontal"] {
+      .app-sidebar {
+        @apply w-[1400px]! mx-auto! my-0!;
+      }
+    }
+
+      .page {
+        .app-sidebar {
+          @apply start-auto;
+        }
+        .app-header {
+          @apply start-auto;
+
+        }
+      }
+
+      .main-chart-wrapper .chat-user-details.open {
+        @apply end-0;
+      }
+
+    &.dark {
+      .page {
+        @apply shadow-[-1px_0px_13px_15px_rgba(255,255,255,0.04)]!;
+      }
+    }
+
+    &[data-vertical-style="detached"] {
+        .page {
+          @apply w-[1400px]! mx-auto!;
+          .app-sidebar{
+            @apply mx-4;
+          }
+        }
+      // &[data-menu-position="scrollable"] {
+      //   .page {
+      //     .app-sidebar {
+      //       @apply start-8;
+      //     }
+
+      //   }
+      // }
+    }
+
+    #sales-donut {
+      @apply w-full!;
+    }
+
+    .chat-info {
+      @apply min-w-[21.875rem] max-w-[21.875rem];
+    }
+
+    .main-chat-area {
+      @apply w-full max-w-full overflow-hidden;
+    }
+
+    .chat-user-details {
+      @apply hidden;
+    }
+
+    .main-chart-wrapper .main-chat-right-icons .responsive-userinfo-open {
+      @apply flex;
+    }
+
+    .main-chart-wrapper .chat-user-details.open {
+      @apply block bottom-2;
+    }
+
+    .main-chart-wrapper .chat-user-details {
+      @apply absolute;
+    }
+
+    .mail-info-body {
+      @apply max-h-[calc(100vh-19.3rem)];
+    }
+
+    #product-quantity {
+      @apply w-8;
+    }
+
+    // .nft-img {
+    //   @apply hidden;
+    // }
+    .jobs-cards {
+
+    }
+
+    .xxxl\:col-span-2 {
+      @apply col-span-4;
+    }
+
+    .xxxl\:col-span-3,.xxxl\:col-span-4,.xxxl\:col-span-6,.xxxl\:col-span-8 {
+      @apply col-span-12;
+    }
+
+    .xxxl\:col-span-9 {
+      @apply col-span-12;
+    }
+
+    .xxxl\:flex {
+     @apply block;
+    }
+
+    .xxxl\:space-y-0 {
+     @apply space-y-2;
+    }
+
+    .xxl\:max-w-\[250px\] {
+      @apply max-w-[160px];
+    }
+    .xxxl\:\!col-span-3 {
+      @apply col-span-6!;
+    }
+    .swiper-text {
+      @apply hidden;
+    }
+    .xxxl\:grid-cols-4 {
+      @apply grid-cols-1!;
+    }
+
+  }
+}
+/* End Boxed Styles */

preview/assets/scss/switcher/_classic-page-style.scss

@@ -0,0 +1,90 @@
+/* Start Classic-Page Styles */
+[data-page-style="classic"] {
+  body {
+    @apply bg-white dark:bg-bodybg;
+  }
+
+  .box {
+    @apply shadow-none shadow-transparent border border-defaultborder;
+  }
+
+  &.dark {
+    body {
+      @apply bg-bodybg;
+    }
+    .box {
+      @apply shadow-none shadow-transparent border border-defaultborder/10;
+    }
+    &[data-width="boxed"] {
+      .page {
+        @apply bg-bodybg!;
+      }
+    }
+  }
+  &[data-width="boxed"] {
+    .page {
+      @apply bg-white! bg-bodybg!;
+    }
+  }
+}
+
+/* End Classic-Page Styles */
+
+// page styles modern start
+[data-page-style="modern"] {
+  --color-light: rgb(255,255,255);
+  --color-customwhite: rgb(243, 246, 248);
+  --color-defaultborder: rgb(230,235,241);
+  // --input-border: 0 0 0;
+  .dropdown-menu {
+    @apply bg-white;
+  }
+  body {
+    @apply bg-white;
+  }
+  .box {
+    @apply shadow-none bg-[#f3f6f8];
+  }
+  &[class="dark"] {
+    --color-light: rgb(20,20,20);
+    --color-customwhite: rgb(var(--color-bodybg));
+    .box {
+      @apply shadow-none bg-bodybg ;
+    }
+    .dropdown-menu {
+      @apply bg-light;
+    }
+    body {
+      @apply bg-bodybg;
+    }
+    .ti-btn-light {
+      @apply bg-black/10! border-black/10!;
+      &:hover,
+      &:focus,
+      &:active {
+        @apply bg-black/10! border-black/10!;
+      }
+    }
+  }
+  .footer {
+    @apply bg-[#f3f6f8];
+  }
+  .app-sidebar,
+  .footer,
+  .app-header,
+  .app-sidebar .main-sidebar {
+    @apply shadow-none;
+  }
+  @media (min-width: 992px) {
+    // &[data-menu-styles][data-nav-layout="horizontal"] .app-sidebar {
+    //   @apply border-b! border-[rgba(255,255,255,0.1)]! ;
+    // }
+    &.dark {
+
+      &[data-menu-styles][data-nav-layout="horizontal"] .app-sidebar {
+        @apply border-white/10!;
+      }
+    }
+  }
+}
+// page styles modern end

preview/assets/scss/switcher/_closed_menu.scss

@@ -0,0 +1,28 @@
+/* Start Closed-Menu Styles */
+[data-vertical-style="closed"] {
+  @media screen and (min-width: 992px) {
+    &[data-toggled="close-menu-close"] {
+      .app-sidebar {
+        @apply hidden;
+      }
+      .content {
+        @apply ms-0!;
+      }
+      .app-header {
+        @apply ps-0!;
+      }
+    }
+    &[data-toggled="close-menu-open"] {
+      .app-sidebar {
+        @apply block;
+      }
+      .content {
+        @apply ms-64;
+      }
+      .app-header {
+        @apply ps-64;
+      }
+    }
+  }
+}
+/* End Closed-Menu Styles */

preview/assets/scss/switcher/_detached_menu.scss

@@ -0,0 +1,198 @@
+/* Start Detached-Menu Styles */
+[data-vertical-style="detached"] {
+  @media screen and (min-width: 992px) {
+    .app-header {
+      @apply z-[50]! px-0! shadow-none! ;
+    }
+
+    .main-header {
+      @apply my-0! basis-auto! p-0! ;
+    }
+
+    .main-header-container {
+      @apply  mx-auto w-[94%];
+    }
+
+    .page {
+      @apply w-[94%]! mx-auto! my-0! ;
+    }
+
+    .horizontal-logo {
+      @apply block -order-1;
+      img {
+        @apply h-8 leading-8 ;
+      }
+    }
+
+    footer {
+      @apply bg-transparent! shadow-none! dark:!bg-transparent ;
+    }
+
+    .app-sidebar {
+      @apply top-[calc(64px-(-1.5rem))] rounded-md bottom-6 h-auto overflow-hidden border border-white/10;
+
+      .main-sidebar-header {
+        @apply hidden;
+      }
+
+      .main-sidebar {
+        @apply mt-0! pb-40! ;
+      }
+    }
+
+    .content {
+      @apply ms-64;
+    }
+
+    .horizontal-logo {
+      .header-logo {
+
+        .desktop-dark,
+        .toggle-logo,
+        .toggle-dark,
+        .desktop-white,.toggle-white {
+          @apply hidden;
+
+        }
+
+        .desktop-logo {
+          @apply block;
+        }
+      }
+    }
+
+    [data-header-styles="dark"] {
+      .horizontal-logo {
+        .header-logo {
+
+          .desktop-logo,
+          .toggle-logo,
+          .toggle-dark,
+          .desktop-white ,.toggle-white{
+            @apply hidden!;
+
+          }
+
+          .desktop-dark {
+            @apply block!;
+          }
+        }
+      }
+    }
+
+    &.dark {
+      .horizontal-logo {
+        .header-logo {
+
+          .desktop-logo,
+          .toggle-logo,
+          .toggle-dark,.toggle-white {
+            @apply hidden!;
+
+          }
+
+          .desktop-dark {
+            @apply block!;
+          }
+        }
+      }
+    }
+
+    &[data-toggled="detached-close"] {
+      &:not([icon-overlay="open"]) {
+        .app-sidebar {
+          @apply w-[5rem];
+
+          // .slide__category,
+          .side-menu__angle {
+            @apply hidden;
+          }
+
+          .side-menu__label {
+            @apply hidden;
+          }
+
+          .side-menu__item {
+            @apply block text-center text-xs;
+
+            .side-menu__icon {
+              @apply mx-auto w-full block;
+            }
+          }
+
+          .slide__category {
+            @apply py-[1.2rem]! px-[1.65rem]! relative! before:!absolute before:!start-[2.25rem] before:!end-0 before:!top-[1.25rem] before:!w-[0.35rem] before:!rounded-[3.125rem] before:!h-[0.35rem] before:!border before:!border-solid before:!opacity-[1] ;
+
+            .category-name {
+              @apply hidden;
+            }
+          }
+
+          .slide.has-sub {
+            .slide-menu {
+              @apply hidden!;
+            }
+          }
+
+          .main-menu {
+            @apply px-0;
+          }
+        }
+
+        [data-header-styles="dark"] {
+          .horizontal-logo {
+            .header-logo {
+
+              .desktop-logo,
+              .toggle-logo,
+              .toggle-dark,
+              .desktop-white,.toggle-white {
+                @apply hidden!;
+
+              }
+
+              .desktop-dark {
+                @apply block!;
+              }
+            }
+          }
+        }
+
+        &.dark {
+          .app-sidebar {
+            .main-header {
+              .header-logo {
+
+                .toggle-logo,
+                .desktop-logo,
+                .toggle-dark,.toggle-white {
+                  @apply hidden;
+                }
+
+                .desktop-dark {
+                  @apply block;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .content {
+        @apply ms-24;
+      }
+    }
+
+    &.dark {
+      .app-sidebar {
+        @apply border-white/10;
+      }
+    }
+
+    .app-sidebar {
+      @apply start-[inherit];
+    }
+  }
+}
+
+/* End Detached-Menu Styles */

preview/assets/scss/switcher/_double_menu.scss

@@ -0,0 +1,207 @@
+/* Start Double-Menu Styles */
+[data-vertical-style="doublemenu"] {
+  @media screen and (min-width: 992px) {
+    .app-sidebar {
+      .slide {
+        &.has-sub {
+          @apply grid;
+        }
+      }
+      .main-sidebar {
+        @apply overflow-visible h-[90%];
+      }
+
+      .main-sidebar-header {
+        @apply w-[4.95rem] backdrop-blur-3xl;
+      }
+      .main-sidebar {
+        @apply w-[4.95rem];
+      }
+      .side-menu__icon {
+        @apply mx-auto;
+      }
+
+      .slide {
+        @apply p-0;
+      }
+
+      .slide-menu {
+        &.child1 {
+          @apply w-[12rem];
+        }
+        &.child2,
+        &.child3 {
+          @apply w-full;
+        }
+        &.child1,
+        &.child2,
+        &.child3 {
+          @apply mt-0!;
+          .slide {
+            .side-menu__item {
+              @apply text-start flex;
+
+              &:before {
+                @apply top-[0.938rem];
+              }
+            }
+          }
+
+          .side-menu__angle {
+            @apply block  top-[0.65rem];
+          }
+        }
+      }
+
+      .slide__category,
+      .side-menu__angle {
+        @apply hidden;
+      }
+
+      .side-menu__label {
+        @apply hidden;
+      }
+
+      .slide.has-sub .slide-menu.child1 {
+        @apply absolute!  transition-none! h-screen! top-0! overflow-y-auto! overflow-x-hidden!;
+        .slide {
+          @apply px-0;
+        }
+      }
+
+      .simplebar-content-wrapper {
+        position: initial;
+        @apply overflow-auto! h-screen!;
+      }
+
+      .simplebar-mask {
+        position: inherit;
+      }
+    }
+    .main-menu {
+      @apply px-0;
+    }
+    #sidebar-scroll {
+      @apply overflow-y-visible  mt-0;
+      .main-menu-container {
+        @apply mt-[4.45rem];
+      }
+      @apply h-full!;
+    }
+    .app-sidebar {
+      @apply w-20!;
+      .main-sidebar {
+        @apply w-20!;
+      }
+      .slide.has-sub .slide-menu {
+        @apply py-0;
+      }
+      .main-sidebar-header {
+        .header-logo {
+          .desktop-logo,
+          .desktop-dark,
+          .desktop-white {
+            @apply hidden! ;
+          }
+          .toggle-logo {
+            @apply block;
+          }
+          .toggle-dark,.toggle-white {
+            @apply hidden;
+          }
+        }
+      }
+    }
+    .side-menu__label1 {
+      @apply block! text-base! font-semibold! text-white! border-b! border-b-white/10!  py-5! px-3! ;
+    }
+    &.dark {
+      .slide-menu.child1 {
+        @apply border-white/10!;
+      }
+      .side-menu__label1 {
+        @apply border-white/10! text-white!;
+      }
+      .app-sidebar {
+        .slide.has-sub .slide-menu {
+          @apply bg-bodybg! rounded-none!;
+        }
+        .main-sidebar-header {
+          .header-logo {
+            .toggle-logo,.toggle-white {
+              @apply hidden;
+            }
+            .toggle-dark {
+              @apply block;
+            }
+          }
+        }
+      }
+    }
+    .double-menu-active {
+      @apply block!;
+    }
+    &[data-toggled="double-menu-close"] {
+      .slide.has-sub .slide-menu.child1 {
+        @apply hidden!;
+      }
+      .double-menu-active {
+        @apply block!;
+      }
+    }
+    .app-sidebar {
+      .slide-menu {
+        &.child1 {
+          @apply border-s! border-s-white/10!;
+          .slide {
+            @apply start-0;
+
+            .side-menu__item {
+              @apply ps-8 pe-4;
+
+              &:before {
+                @apply start-3;
+              }
+            }
+          }
+
+          .side-menu__angle {
+            @apply end-4;
+          }
+        }
+      }
+
+      .slide.has-sub .slide-menu {
+        @apply start-[5rem]!  rounded-none!;
+
+        &.child2,
+        &.child3 {
+          @apply -ms-[5rem]! px-0!;
+        }
+      }
+    }
+    .content {
+      @apply ms-20;
+    }
+    .app-header {
+      @apply ps-20;
+    }
+    &[data-toggled="double-menu-open"] {
+      .content {
+        @apply ms-[17rem];
+      }
+      .app-header {
+        @apply ps-[17rem];
+      }
+    }
+    &[data-toggled="double-menu-close"] {
+      .content {
+        @apply ms-20;
+      }
+      .header {
+        @apply ps-20;
+      }
+    }
+  }
+}
+/* End Double-Menu Styles */

preview/assets/scss/switcher/_header-scrollable.scss

@@ -0,0 +1,25 @@
+/* Start Header-Scrollable Styles */
+[data-header-position="scrollable"] {
+  .app-header {
+    @apply absolute;
+  }
+  &:not([data-menu-position="scrollable"]) {
+    @media screen and (min-width:992px) {
+      .app-sidebar {
+        // @apply relative! top-0!;
+        &.sticky-pin {
+          @apply fixed! top-0!;
+        }
+      }
+    }
+    &[data-toggled="open"] {
+      .app-sidebar {
+        &.sticky-pin {
+          @apply mt-0;
+        }
+      }
+    }
+  }
+}
+
+/* End Header-Scrollable Styles */

preview/assets/scss/switcher/_header-styles.scss

@@ -0,0 +1,542 @@
+/* Start Header Styles */
+[data-header-styles="dark"] {
+  .app-header {
+    --color-headerprimecolor: rgb(255,255,255);
+    @apply bg-[#111c43] border-white/10;
+
+    .main-header-container .header-link-icon {
+      @apply hover:!bg-white/10 text-white/60! fill-black/60! ;
+    }
+
+    .animated-arrow span {
+      @apply bg-white/60;
+    }
+
+    .animated-arrow span:before,
+    .animated-arrow span:after {
+      @apply bg-white/60;
+    }
+
+    .sidebar-toggle {
+      @apply bg-transparent! hover:!bg-black/10 text-black/60! hover:!text-black/60 focus:!ring-white/10 focus:!ring-offset-white/10;
+
+      svg {
+        @apply text-black/60;
+      }
+    }
+
+    .ti-dropdown-toggle {
+      @apply bg-transparent! hover:!bg-black/10 border-white/10! text-black/60! hover:!text-black/60 focus:!ring-offset-white/10;
+
+      svg {
+        @apply text-black/60! ;
+      }
+    }
+
+    .dropdown-profile {
+      @apply focus:ring-gray-400;
+
+      img {
+        @apply ring-white;
+      }
+
+      p {
+        @apply text-white/60!;
+      }
+
+      span {
+        @apply text-white/60!;
+      }
+    }
+
+    #dropdown-flag {
+      @apply focus:ring-white/10;
+    }
+
+    .header-search,
+    .switcher-icon {
+      button {
+        @apply bg-transparent hover:bg-black/20 text-black/60 hover:text-white focus:ring-white/10 focus:ring-offset-white/10;
+
+        svg {
+          @apply text-black/60;
+        }
+      }
+    }
+
+    .header-theme-mode,
+    .header-fullscreen {
+      a {
+        @apply bg-transparent hover:bg-black/20 text-black/60 hover:text-white focus:ring-white/10 focus:ring-offset-white/10;
+
+        svg {
+          @apply text-black/60;
+        }
+      }
+    }
+    @media (min-width: 992px) {
+      .horizontal-logo {
+        .header-logo {
+          .desktop-logo,
+          .desktop-dark {
+            @apply hidden!;
+          }
+
+          .desktop-white {
+            @apply block!;
+          }
+        }
+      }
+    }
+  }
+}
+
+[data-header-styles="color"] {
+  .app-header {
+    --color-headerprimecolor: rgba(255,255,255,0.1);
+    @apply bg-primary! border-white/20!;
+
+    .main-header-container .header-link-icon {
+      @apply hover:!bg-white/20 text-white/60! fill-black/60!;
+    }
+
+    .animated-arrow span {
+      @apply bg-white/60;
+    }
+
+    .animated-arrow span:before,
+    .animated-arrow span:after {
+      @apply bg-white/60;
+    }
+
+    .sidebar-toggle {
+      @apply bg-transparent! hover:!bg-white/20 text-white/60! hover:!text-white/10 focus:!ring-transparent focus:!ring-offset-transparent;
+
+      svg {
+        @apply fill-white/60;
+      }
+    }
+
+    .ti-dropdown-toggle {
+      @apply bg-transparent hover:bg-white/20 border-white/20 text-white/60 hover:text-white/20 focus:ring-transparent focus:ring-offset-transparent;
+
+      svg {
+        @apply fill-white/60!;
+      }
+    }
+
+    .dropdown-profile {
+      @apply focus:ring-gray-400;
+
+      img {
+        @apply ring-white;
+      }
+
+      p {
+        @apply text-white/60!;
+      }
+
+      span {
+        @apply text-white/60!;
+      }
+    }
+
+    #dropdown-flag {
+      @apply focus:ring-white/20;
+    }
+
+    .header-search,
+    .switcher-icon {
+      button {
+        @apply bg-transparent! hover:!bg-white/20 text-white/60! hover:!text-white/10 focus:!ring-white/20 focus:!ring-offset-white/20 ;
+      }
+
+      svg {
+        @apply fill-white/60!;
+      }
+    }
+
+    .header-theme-mode,
+    .header-fullscreen {
+      a {
+        @apply bg-transparent hover:bg-white/20 text-white/60 hover:text-white/10 focus:ring-white/20 focus:ring-offset-white/20;
+      }
+
+      svg {
+        @apply fill-white/60!;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .horizontal-logo {
+        .header-logo {
+          .desktop-logo,
+          .desktop-dark {
+            @apply hidden!;
+          }
+
+          .desktop-white {
+            @apply block!;
+          }
+        }
+      }
+    }
+    @media (max-width: 991.98px) {
+      .horizontal-logo {
+        .header-logo {
+          .toggle-logo,
+          .desktop-white {
+            @apply hidden;
+          }
+          .toggle-white {
+            @apply block;
+          }
+        }
+      }
+    }
+  }
+}
+
+[data-header-styles="gradient"] {
+  .app-header {
+     --color-headerprimecolor: rgb(255,255,255);
+    @apply bg-gradient-to-r from-primary to-secondary border-white/20! before:!absolute before:!h-full before:!w-full before:!inset-0 before:!-z-[1];
+
+    .main-header-container .header-link-icon {
+      @apply hover:!bg-white/20 text-white/60! fill-black/60! ;
+    }
+
+    .animated-arrow span {
+      @apply bg-white/60;
+    }
+
+    .animated-arrow span:before,
+    .animated-arrow span:after {
+      @apply bg-white/60;
+    }
+
+    .sidebar-toggle {
+      @apply bg-transparent hover:bg-black/20 text-white/60 hover:text-white/20 focus:ring-transparent focus:ring-offset-transparent;
+
+      svg {
+        @apply fill-white/60;
+      }
+    }
+
+    .ti-dropdown-toggle {
+      @apply bg-transparent hover:bg-black/20 border-white/20 text-white/60 hover:text-white/20 focus:ring-transparent focus:ring-offset-transparent;
+
+      svg {
+        @apply fill-white/60;
+      }
+    }
+
+    .dropdown-profile {
+      @apply focus:ring-gray-400;
+
+      img {
+        @apply ring-white;
+      }
+
+      p {
+        @apply text-white/60;
+      }
+
+      span {
+        @apply text-white/60;
+      }
+    }
+
+    #dropdown-flag {
+      @apply focus:ring-white/20;
+    }
+
+    .header-search,
+    .switcher-icon {
+      button {
+        @apply bg-transparent hover:bg-white/20 text-white/60 hover:text-white/60 focus:ring-black/20 focus:ring-offset-black/20;
+      }
+
+      svg {
+        @apply fill-white/60;
+      }
+    }
+
+    .header-theme-mode,
+    .header-fullscreen {
+      a {
+        @apply bg-transparent hover:bg-white/20 text-white/60 hover:text-white/60 focus:ring-black/20 focus:ring-offset-black/20;
+      }
+
+      svg {
+        @apply fill-white/60;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .horizontal-logo {
+        .header-logo {
+          .desktop-logo,
+          .desktop-dark {
+            @apply hidden!;
+          }
+
+          .desktop-white {
+            @apply block!;
+          }
+        }
+      }
+    }
+    @media (max-width: 991.98px) {
+      .horizontal-logo {
+        .header-logo {
+          .toggle-logo,
+          .desktop-white {
+            @apply hidden;
+          }
+          .toggle-white {
+            @apply block;
+          }
+        }
+      }
+    }
+  }
+}
+
+[data-header-styles="light"] {
+  .app-header {
+    @apply bg-white! border-[#f3f3f3]!;
+    .main-header-container .header-link-icon {
+      @apply hover:!bg-white/20 text-[#536485]! fill-black/60!;
+    }
+
+    .animated-arrow span {
+      @apply bg-[#536485];
+    }
+
+    .animated-arrow span:before,
+    .animated-arrow span:after {
+      @apply bg-[#536485]!;
+    }
+
+    .sidebar-toggle {
+      @apply bg-transparent! text-[#536485]! hover:!bg-gray-50 focus:!ring-0 focus:!ring-gray-400 focus:!ring-offset-0 focus:!ring-offset-white ;
+    }
+
+    .ti-dropdown-toggle {
+      @apply bg-transparent! text-[#536485]! hover:!bg-gray-50 border-gray-200! focus:!ring-offset-white focus:!ring-primary ;
+    }
+
+    .dropdown-profile {
+      @apply focus:ring-gray-400;
+
+      img {
+        @apply ring-white;
+      }
+
+      p {
+        @apply text-[#536485]!;
+      }
+
+      span {
+        @apply text-[#536485]!;
+      }
+    }
+
+    #dropdown-flag {
+      @apply focus:ring-gray-400;
+    }
+
+    .header-search,
+    .switcher-icon {
+      button {
+        @apply bg-transparent! text-[#536485]! hover:!bg-gray-50 focus:!ring-gray-400 focus:!ring-offset-0 focus:!ring-offset-white;
+      }
+    }
+
+    .header-theme-mode,
+    .header-fullscreen {
+      a {
+        @apply bg-transparent! text-[#536485]! hover:!bg-gray-50 focus:!ring-gray-400 focus:!ring-offset-0 focus:!ring-offset-white;
+      }
+    }
+    @media screen and (min-width: 992px) {
+      .horizontal-logo {
+        .header-logo {
+          .desktop-white,
+          .desktop-dark {
+            @apply hidden!;
+          }
+
+          .desktop-logo {
+            @apply block!;
+          }
+        }
+      }
+    }
+  }
+}
+
+[data-header-styles="transparent"] {
+  .app-header {
+    @apply bg-bodybg! border-b! border-black/[0.07]!;
+
+    .sidebar-toggle {
+      @apply bg-transparent text-[#536485] focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white;
+    }
+
+    .ti-dropdown-toggle {
+      @apply bg-transparent text-[#536485] border-gray-200 focus:ring-offset-white focus:ring-primary;
+    }
+
+    .dropdown-profile {
+      @apply focus:ring-gray-400;
+
+      img {
+        @apply ring-white;
+      }
+    }
+
+    #dropdown-flag {
+      @apply focus:ring-gray-400;
+    }
+
+    .header-search,
+    .switcher-icon {
+      button {
+        @apply bg-transparent text-[#536485] focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white;
+      }
+    }
+
+    .header-theme-mode,
+    .header-fullscreen {
+      a {
+        @apply bg-transparent text-[#536485] focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .horizontal-logo {
+        .header-logo {
+          .desktop-dark,
+          .desktop-white {
+            @apply hidden;
+          }
+
+          .desktop-logo {
+            @apply block;
+          }
+        }
+      }
+    }
+    @media (max-width: 991.98px) {
+      .horizontal-logo {
+        .header-logo {
+          .toggle-dark,
+          .desktop-white {
+            @apply hidden;
+          }
+          .toggle-logo {
+            @apply block;
+          }
+        }
+      }
+    }
+  }
+
+  &.dark {
+    .app-header {
+       --color-headerprimecolor: rgba(255,255,255,0.6);
+      @apply bg-bodybg2! border-b! border-b-white/10!;
+
+      .sidebar-toggle {
+        @apply hover:!bg-black/20 !text-white/60 hover:!text-white focus:!ring-white/10 focus:!ring-offset-white/10;
+
+        svg {
+          @apply fill-white;
+        }
+      }
+
+      .ti-dropdown-toggle {
+        @apply hover:!bg-black/20 border-white/10! text-white/60! hover:!text-white focus:!ring-offset-white/10;
+
+        svg {
+          @apply fill-white;
+        }
+      }
+
+      .dropdown-profile {
+        @apply focus:ring-gray-400;
+
+        img {
+          @apply ring-white;
+        }
+
+        p {
+          @apply text-white/60;
+        }
+
+        span {
+          @apply text-white/60;
+        }
+      }
+
+      #dropdown-flag {
+        @apply focus:ring-white/10;
+      }
+
+      .header-search,
+      .switcher-icon {
+        button {
+          @apply hover:!bg-black/20 !text-white/60 hover:!text-white focus:!ring-white/10 focus:!ring-offset-white/10;
+
+          svg {
+            @apply fill-white;
+          }
+        }
+      }
+
+      .header-theme-mode,
+      .header-fullscreen {
+        a {
+          @apply hover:!bg-black/20 !text-white/60 hover:!text-white focus:!ring-white/10 focus:!ring-offset-white/10;
+
+          svg {
+            @apply fill-white;
+          }
+        }
+      }
+
+      @media (min-width: 992px) {
+        .horizontal-logo {
+          .header-logo {
+            .desktop-logo,
+            .desktop-white {
+              @apply hidden;
+            }
+
+            .desktop-dark {
+              @apply block;
+            }
+          }
+        }
+      }
+      @media (min-width: 992px) {
+        .horizontal-logo {
+          .header-logo {
+            .toggle-logo,
+            .toggle-dark {
+              @apply hidden;
+            }
+
+            .toggle-white {
+              @apply block;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* End Header Styles */

preview/assets/scss/switcher/_icon-overlay.scss

@@ -0,0 +1,82 @@
+/* Start Icon-Overlay Styles */
+
+[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
+  @media screen and (min-width: 992px) {
+    &:not([icon-overlay="open"]) {
+      .app-sidebar {
+        @apply w-[5rem];
+        .main-sidebar-header{
+          @apply w-[5rem]!;
+        }
+      }
+      .app-sidebar {
+        @apply w-[5rem];
+        .main-sidebar-header{
+          @apply w-[5rem]!;
+        }
+        .app-header{
+          @apply ps-[5rem]!;
+        }
+        .side-menu__item {
+          @apply justify-center px-0;
+        }
+
+        .side-menu__label,
+        .side-menu__angle {
+          @apply hidden;
+        }
+        .side-menu__icon{
+          @apply me-0!;
+        }
+        .slide__category {
+          @apply py-[1.2rem]! px-[1.65rem]! relative!  before:!absolute before:!start-[2.25rem] before:!end-0 before:!top-[1.25rem]  before:!w-[0.35rem] before:!rounded-[3.125rem] before:!h-[0.35rem] before:!border before:!border-solid before:!opacity-[1];
+          .category-name{
+            @apply hidden;
+          }
+        }
+
+        .side-menu__item {
+          @apply p-3!;
+        }
+
+
+        .header-logo {
+          .desktop-logo,
+          .desktop-dark,.desktop-white {
+            @apply hidden;
+          }
+          .toggle-logo {
+            @apply block;
+          }
+          .toggle-dark ,.toggle-white{
+            @apply hidden;
+          }
+        }
+
+        .slide-menu {
+          @apply hidden!;
+        }
+      }
+      &.dark {
+        .app-sidebar {
+          .main-logo {
+            &.toggle-logo,.toggle-white {
+              @apply hidden!;
+            }
+
+            &.toggle-dark {
+              @apply block!;
+            }
+          }
+        }
+      }
+    }
+    .content {
+      @apply ms-[5rem]!;
+    }
+    .app-header {
+      @apply ps-[5rem]!;
+    }
+  }
+}
+/* End Icon-Overlay Styles */

preview/assets/scss/switcher/_icontext.scss

@@ -0,0 +1,70 @@
+/* Start IconText-Menu Styles */
+[data-vertical-style="icontext"][data-toggled="icon-text-close"] {
+  @media screen and (min-width: 992px) {
+    &:not([data-icon-text="open"]) {
+      .app-sidebar {
+        @apply w-[9.5rem]!;
+        
+        .slide__category,
+        .side-menu__angle {
+          @apply hidden;
+        }
+        .side-menu__item {
+          @apply block! text-center! text-xs! px-0!;
+          .side-menu__icon {
+            @apply mx-auto mb-2 w-full block;
+          }
+        }
+        .slide.has-sub {
+          .slide-menu {
+            @apply hidden! px-0!;
+          }
+        }
+        .app-sidebar .slide {
+          @apply px-[0.25rem]!;
+        }
+        .main-sidebar-header {
+          @apply w-[9.5rem]!;
+          .header-logo {
+            .desktop-logo,
+            .toggle-logo,.toggle-white,
+            .desktop-white {
+              @apply hidden;
+            }
+            .desktop-dark {
+              @apply block;
+            }
+            .toggle-dark {
+              @apply hidden;
+            }
+          }
+        }
+        .main-menu {
+          @apply px-0;
+        }
+      }
+      &.dark {
+        .app-sidebar {
+          .main-sidebar-header {
+            .header-logo {
+              .toggle-logo,
+              .toggle-dark ,.toggle-white{
+                @apply hidden;
+              }
+              .desktop-dark {
+                @apply block;
+              }
+            }
+          }
+        }
+      }
+    }
+    .content {
+      @apply ms-[9.5rem];
+    }
+    .app-header {
+      @apply ps-[9.5rem];
+    }
+  }
+}
+/* End IconText-Menu Styles */

preview/assets/scss/switcher/_loader.scss

@@ -0,0 +1,13 @@
+
+/* Loader Styles */
+[loader="disable"] {
+    #loader {
+      @apply hidden;
+    }
+  }
+  /* Loader Styles */
+/* Start:: Loader */
+#loader {
+    @apply fixed top-0 start-0 w-full h-full bg-white dark:bg-bodybg2 flex justify-center items-center z-[9999];
+  }
+  /* End:: Loader */

preview/assets/scss/switcher/_menu-scrollable.scss

@@ -0,0 +1,19 @@
+/* Start Menu-Scrollable Styles */
+[data-menu-position="scrollable"] {
+  .app-sidebar {
+    @apply absolute;
+    .main-sidebar-header {
+      position: absolute;
+    }
+
+    #sidebar-scroll {
+      @apply pb-0;
+    }
+  }
+  &:not([data-nav-layout="horizontal"]) {
+    .content {
+      @apply min-h-[1300px];
+    }
+  }
+}
+/* End Menu-Scrollable Styles */

preview/assets/scss/tailwind.css

@@ -0,0 +1,309 @@
+@import "tailwindcss";
+@import "preline/variants.css";
+@source "../../../node_modules/preline/dist/*.js";
+
+
+@custom-variant dark (&:is(.dark, .dark *));
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+
+
+  --color-bodybg: rgb(240, 241, 247);
+  --color-bodybg2: rgb(var(--color-darkbg));
+  --color-primary: rgb(132, 90, 223);
+  --color-primaryrgb: rgb(132, 90, 223);
+  --color-secondary: rgb(35, 183, 229);
+  --color-warning: rgb(245, 184, 73);
+  --color-info: rgb(73, 182, 245);
+  --color-success: rgb(38, 191, 148);
+  --color-danger: rgb(230, 83, 60);
+  --color-light: rgb(243, 246, 248);
+  --color-dark: rgb(35, 35, 35);
+  --color-orange: rgb(255, 165, 5);
+  --color-pink: rgb(231, 145, 188);
+  --color-teal: rgb(18, 194, 194);
+  --color-tealmain: rgb(18, 194, 194);
+  --color-purple: rgb(137, 32, 173);
+  --color-defaulttextcolor: rgb(51, 51, 53);
+  --color-defaultborder: rgb(243, 243, 243);
+  --color-defaultbackground: rgb(247, 248, 249);
+  --color-menuprimecolor: rgb(83, 100, 133);
+  --color-menubordercolor: rgb(243, 243, 243);
+  --color-headerprimecolor: rgb(83, 100, 133);
+  --color-headerbordercolor: rgb(243, 243, 243);
+  --color-bootstrapcardborder: rgb(243, 243, 243);
+  --color-list-hover-focus-bg: rgb(245, 246, 247);
+  --color-textmuted: rgb(140, 144, 151);
+  --color-inputborder: rgb(233, 237, 246);
+  --color-red: rgb(208, 61, 70);
+  --color-blue: rgb(43, 62, 101);
+  --color-green: rgb(29, 216, 113);
+  --color-cyan: rgb(0, 209, 209);
+  --color-indigo: rgb(77, 93, 219);
+  --color-gray: rgb(134, 153, 163);
+  --color-yellow: rgb(255, 193, 2);
+  --color-facebook: rgb(59, 89, 152);
+  --color-twitter: rgb(0, 172, 238);
+  --color-github: rgb(51, 51, 51);
+  --color-google: rgb(207, 78, 67);
+  --color-youtube: rgb(255, 0, 0);
+
+
+  --font-size-defaultsize: 0.813rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-size-7xl: 4.5rem;
+  --font-size-8xl: 6rem;
+  --font-size-9xl: 8rem;
+
+
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  --animate-projects: particles 2s linear infinite;
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+  --animate-bell: ring 2s ease-in-out infinite;
+  --animate-wase: wase 4s linear infinite;
+  --animate-spin-slow: spin 3s linear infinite;
+  --animate-slow-ping: ping 2s linear infinite;
+
+
+  --color-gray-100: rgb(249,250,251);
+  --color-gray-200: rgb(242,244,245);
+  --color-gray-300: rgb(230,234,235);
+  --color-gray-400: rgb(219,223,225);
+  --color-gray-500: rgb(148,158,183);;
+  --color-gray-600: rgb(121,135,161);
+  --color-gray-700: rgb(77,88,117);
+  --color-gray-800: rgb(56,56,83);
+  --color-gray-900: rgb(50,50,81);
+  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-montserrat: "Montserrat", ui-sans-serif, system-ui, sans-serif;
+
+
+  --shadow-defaultshadow: 0 0.125rem 0 rgba(10, 10, 10, 0.04);
+  /* --breakpoint-*: initial; */
+  /* --breakpoint-sm: 30rem;     */
+  /* --breakpoint-md: 48rem;     */
+  /* --breakpoint-lg: 62rem;     */
+  /* --breakpoint-xl: 75rem;     */
+  /* --breakpoint-2xl: 87.5rem;  */
+  /* --breakpoint-3xl: 112.5rem; */
+  --breakpoint-xs: 30rem;
+  --breakpoint-2xl: 100rem;
+  --breakpoint-3xl: 120rem;
+
+
+
+}
+
+[class="dark"],
+html.dark,
+.dark {
+  /* color-scheme: dark; */
+  --color-bodybg: rgb(26 28 30);
+  --color-bodybg2: rgb(37, 39, 41);
+  --color-darkbg: rgb(37 39 41);
+  --color-light: rgb(43 46 49);
+  --color-dark: rgb(240 245 248);
+  --color-inputborder: rgb(49 51 53);
+  --color-formcontrolbg: rgb(35 38 40);
+  --color-defaulttextcolor: rgb(255 255 255);
+  --color-gray-100: rgb(249,250,251);
+  --color-gray-200: rgb(242,244,245);
+  --color-gray-300: rgb(230,234,235);
+  --color-gray-400: rgb(219,223,225);
+  --color-gray-500: rgb(148,158,183);
+  --color-gray-600: rgb(121,135,161);
+  --color-gray-700: rgb(77,88,117);
+  --color-gray-800: rgb(56,56,83);
+  --color-gray-900: rgb(50,50,81);
+}
+
+
+
+@keyframes particles {
+  0% {
+    transform: translateY(0) rotate(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(-90px) rotate(180deg);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes bounce {
+
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes ring {
+  0% {
+    transform: rotateZ(0)
+  }
+
+  1% {
+    transform: rotateZ(30deg)
+  }
+
+  3% {
+    transform: rotateZ(-28deg)
+  }
+
+  5% {
+    transform: rotateZ(34deg)
+  }
+
+  7% {
+    transform: rotateZ(-32deg)
+  }
+
+  9% {
+    transform: rotateZ(30deg)
+  }
+
+  11% {
+    transform: rotateZ(-28deg)
+  }
+
+  13% {
+    transform: rotateZ(26deg)
+  }
+
+  15% {
+    transform: rotateZ(-24deg)
+  }
+
+  17% {
+    transform: rotateZ(22deg)
+  }
+
+  19% {
+    transform: rotateZ(-20deg)
+  }
+
+  21% {
+    transform: rotateZ(18deg)
+  }
+
+  23% {
+    transform: rotateZ(-16deg)
+  }
+
+  25% {
+    transform: rotateZ(14deg)
+  }
+
+  27% {
+    transform: rotateZ(-12deg)
+  }
+
+  29% {
+    transform: rotateZ(10deg)
+  }
+
+  31% {
+    transform: rotateZ(-8deg)
+  }
+
+  33% {
+    transform: rotateZ(6deg)
+  }
+
+  35% {
+    transform: rotateZ(-4deg)
+  }
+
+  37% {
+    transform: rotateZ(2deg)
+  }
+
+  39% {
+    transform: rotateZ(-1deg)
+  }
+
+  41% {
+    transform: rotateZ(1deg)
+  }
+
+  43% {
+    transform: rotateZ(0)
+  }
+
+  100% {
+    transform: rotateZ(0)
+  }
+}
+
+@keyframes wase {
+
+  0%,
+  100% {
+    transform: rotate(-3deg);
+  }
+
+  50% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

preview/assets/scss/tailwind/_accordion.scss

@@ -0,0 +1,343 @@
+.accordion-button {
+    @apply bg-white dark:bg-bodybg text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
+    &:not(.collapsed) {
+        @apply text-defaulttextcolor  shadow-none;
+    }
+    &:focus {
+        @apply bg-defaultbackground dark:bg-light text-defaulttextcolor shadow-none;
+    }
+
+}
+.accordion-body {
+    @apply py-3 px-4 text-[0.8125rem] text-textmuted;
+}
+.accordion-item {
+    @apply text-defaulttextcolor bg-white dark:bg-bodybg border border-solid border-defaultborder dark:border-defaultborder/10 dark:text-defaulttextcolor/70;
+}
+.accordions-items-seperate {
+    .accordion-item:not(:first-of-type) {
+        @apply mt-2;
+    }
+    .accordion-item {
+        @apply border-t border-solid border-defaultborder dark:border-defaultborder/10 rounded-md overflow-hidden;
+    }
+}
+.accordion-item:last-of-type {
+    @apply rounded-b-[0.35rem];
+}
+.accordion-item:first-of-type {
+    @apply rounded-t-[0.35rem];
+}
+.accordion {
+    &.accordion-flush {
+        .accordion-button {
+            @apply pe-[2.5rem];
+            &:after {
+                @apply start-[98.5rem]!;
+            }
+        }
+    }
+}
+/* Start:: light colored accordions */
+.accordion {
+    &.accordion-primary {
+        .accordion-button {
+            @apply bg-white dark:bg-bodybg text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
+            &:focus {
+            @apply bg-primary/10 text-primary;
+            }
+            &:after,&:not(.collapsed)::after {
+              @apply bg-none;
+            }
+            &:after {
+                @apply bg-primary text-white;
+            }
+            &.collapsed {
+                @apply bg-white dark:bg-bodybg text-defaulttextcolor dark:text-defaulttextcolor/70;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor dark:text-defaulttextcolor/70;
+                }
+            }
+        }
+    }
+    &.accordion-secondary {
+        .accordion-button {
+            @apply bg-white dark:bg-bodybg text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
+            &:focus {
+            @apply bg-secondary/10 text-secondary;
+            }
+            &:after,&:not(.collapsed)::after {
+              @apply bg-none;
+            }
+            &:after {
+                @apply bg-secondary text-white;
+            }
+            &.collapsed {
+                @apply bg-white dark:bg-bodybg text-defaulttextcolor;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor;
+                }
+            }
+        }
+    }
+    &.accordion-success {
+        .accordion-button {
+            @apply bg-success/10 text-success;
+            &:after {
+                @apply bg-success text-white;
+            }
+            &.collapsed {
+                @apply bg-white dark:bg-bodybg text-defaulttextcolor;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor;
+                }
+            }
+        }
+    }
+    &.accordion-danger {
+        .accordion-button {
+            @apply bg-danger/10 text-danger;
+            &:after {
+                @apply bg-danger text-white;
+            }
+            &.collapsed {
+                @apply bg-white text-defaulttextcolor;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor;
+                }
+            }
+        }
+    }
+    &.accordion-warning {
+        .accordion-button {
+            @apply bg-warning/10 text-warning;
+            &:after {
+                @apply bg-warning text-white;
+            }
+            &.collapsed {
+                @apply bg-white text-defaulttextcolor;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor;
+                }
+            }
+        }
+    }
+    &.accordion-info {
+        .accordion-button {
+            @apply bg-info/10 text-info;
+            &:after {
+                @apply bg-info text-white;
+            }
+            &.collapsed {
+                @apply bg-white text-defaulttextcolor;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor;
+                }
+            }
+        }
+    }
+}
+/* End:: light colored accordions */
+
+/* Start:: solid colored accordions */
+.accordion {
+    &.accordion-solid-primary {
+        .accordion-button {
+            @apply bg-white text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
+            &:focus {
+            @apply bg-primary text-white;
+            }
+            &:after {
+                @apply bg-white text-primary;
+            }
+            &.collapsed {
+                @apply bg-white text-defaulttextcolor;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor;
+                }
+            }
+        }
+    }
+    &.accordion-solid-secondary{
+        .accordion-button {
+            @apply bg-white text-defaulttextcolor py-3 px-4 text-[0.85rem] font-medium;
+            &:focus {
+            @apply bg-secondary text-white;
+            }
+            &:after {
+                @apply bg-white text-secondary;
+            }
+            &.collapsed {
+                @apply bg-white text-defaulttextcolor;
+                &:after {
+                    @apply bg-defaultbackground text-defaulttextcolor;
+                }
+            }
+        }
+    }
+
+    &.accordion-solid-success {
+        @apply bg-success text-white;
+        &:after {
+            @apply bg-white text-success;
+        }
+        &.collapsed {
+            @apply bg-white text-defaulttextcolor;
+            &:after {
+                @apply bg-defaultbackground text-defaulttextcolor;
+            }
+        }
+    }
+
+    &.accordion-solid-danger {
+        @apply bg-danger text-white;
+        &:after {
+            @apply bg-white text-danger;
+        }
+        &.collapsed {
+            @apply bg-white text-defaulttextcolor;
+            &:after {
+                @apply bg-defaultbackground text-defaulttextcolor;
+            }
+        }
+    }
+
+    &.accordion-solid-warning {
+        @apply bg-danger text-white;
+        &:after {
+            @apply bg-white text-danger;
+        }
+        &.collapsed {
+            @apply bg-white text-defaulttextcolor;
+            &:after {
+                @apply bg-defaultbackground text-defaulttextcolor;
+            }
+        }
+    }
+
+    &.accordion-solid-info {
+        @apply bg-info text-white;
+        &:after {
+            @apply bg-white text-info;
+        }
+        &.collapsed {
+            @apply bg-white text-defaulttextcolor;
+            &:after {
+                @apply bg-defaultbackground text-defaulttextcolor;
+            }
+        }
+    }
+}
+
+/* End:: solid colored accordions */
+
+/* Start:: border colors */
+.accordion {
+    &.accordion-border-primary {
+        .accordion-item {
+            @apply border border-solid border-primary;
+        }
+        .accordion-button {
+            @apply bg-white dark:bg-bodybg text-primary border-b-0;
+            &:after {
+                @apply bg-white text-primary border border-solid border-primary;
+            }
+            &:not(.collapsed) {
+                @apply  border-solid border-primary;
+            }
+        }
+    }
+    &.accordion-border-success {
+        .accordion-item {
+            @apply border border-solid border-success;
+        }
+        .accordion-button {
+            @apply bg-white dark:bg-bodybg text-success border-b-0;
+            &:after {
+                @apply bg-white dark:bg-bodybg text-success border border-solid border-success;
+            }
+            &:not(.collapsed) {
+                @apply  border-solid border-success;
+            }
+        }
+    }
+}
+/* End:: border colors */
+
+/* Start:: no icon */
+.accordion {
+    &.accordionicon-none {
+        .accordion-button:after {
+            @apply hidden;
+        }
+    }
+}
+/* Start:: no icon */
+
+/* Start:: left aligned icon */
+.accordion {
+    &.accordionicon-left {
+        .accordion-button {
+
+            &:after {
+                @apply absolute start-[1.935rem];
+            }
+        }
+    }
+}
+/* End:: left aligned icon */
+
+/* Start:: custom icons */
+.accordion {
+    &.accordion-customicon1 {
+        .accordion-button {
+            &:after {
+                @apply content-["\EA13"]!;
+            }
+            &:not(.collapsed)::after {
+                @apply content-["\F1AF"]!;
+            }
+        }
+    }
+}
+/* End:: custom icons */
+
+/* Start:: customized accordion */
+.customized-accordion {
+    .accordion-item{
+        &.custom-accordion-primary {
+            .accordion-button {
+                @apply bg-primary/10 border-s-[0.25rem] border-solid border-primary/60;
+                &:after {
+                    @apply bg-primary/60 text-white;
+                }
+            }
+            .accordion-body {
+                @apply bg-primary/10 pt-0 border-s-[0.25rem] border-solid border-primary/60;
+            }
+        }
+        &.custom-accordion-secondary {
+            .accordion-button {
+                @apply bg-secondary/10 border-s-[0.25rem] border-solid border-secondary/60;
+                &:after {
+                    @apply bg-secondary/60 text-white;
+                }
+            }
+            .accordion-body {
+                @apply bg-secondary/10 pt-0 border-s-[0.25rem] border-solid border-secondary/60;
+            }
+        }
+        &.custom-accordion-danger {
+            .accordion-button {
+                @apply bg-danger/10 border-s-[0.25rem] border-solid border-danger/60;
+                &:after {
+                    @apply bg-danger/60 text-white;
+                }
+            }
+            .accordion-body {
+                @apply bg-danger/10 pt-0 border-s-[0.25rem] border-solid border-danger/60;
+            }
+        }
+    }
+}
+/* End:: customized accordion */

preview/assets/scss/tailwind/_alerts.scss

@@ -0,0 +1,326 @@
+.alert {
+  @apply py-[0.625rem] px-[0.85rem]  border rounded-md text-[0.8125rem] items-center;
+  &.alert-dismissible {
+    @apply py-[0.625rem] px-[0.85rem];
+  }
+  .btn-close {
+    @apply bg-none p-[0.95rem] flex items-center justify-center;
+    i {
+      @apply text-[1.5rem] leading-[1.5];
+    }
+  }
+  &:last-child {
+    @apply mb-0;
+  }
+  .alert-link {
+    @apply font-semibold;
+  }
+}
+
+/* Basic Alerts */
+.alert-warning {
+  @apply bg-warning/10 text-warning border-warning/10;
+  .alert-link {
+    @apply text-warning;
+  }
+  .btn-close {
+    @apply text-warning;
+    &.custom-close {
+      @apply text-warning opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+.alert-primary {
+  @apply bg-primary/10 text-primary border-primary/10;
+  .alert-link {
+    @apply text-primary;
+  }
+  .btn-close {
+    @apply text-primary;
+    &.custom-close {
+      @apply text-primary opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+.alert-secondary {
+  @apply bg-secondary/10 text-secondary border-secondary/10;
+  .alert-link {
+    @apply text-secondary;
+  }
+  .btn-close {
+    @apply text-secondary;
+    &.custom-close {
+      @apply text-secondary opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+.alert-success {
+  @apply bg-success/10 text-success border-success/10;
+  .alert-link {
+    @apply text-success;
+  }
+  .btn-close {
+    @apply text-success;
+    &.custom-close {
+      @apply text-success opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+.alert-info {
+  @apply bg-info/10 text-info border-info/10;
+  .alert-link {
+    @apply text-info;
+  }
+  .btn-close {
+    @apply text-info;
+    &.custom-close {
+      @apply text-info opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+.alert-danger {
+  @apply bg-danger/10 text-danger border-danger/10;
+  .alert-link {
+    @apply text-danger;
+  }
+  .btn-close {
+    @apply text-danger;
+    &.custom-close {
+      @apply text-danger opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+.alert-light {
+  @apply bg-light text-[var(--font-size-defaultsize)] border-light;
+  .alert-link {
+    @apply text-[var(--font-size-defaultsize)];
+  }
+  .btn-close {
+    @apply text-[var(--font-size-defaultsize)];
+    &.custom-close {
+      @apply text-defaulttextcolor opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+.alert-dark {
+  @apply bg-black/10 text-black dark:text-defaulttextcolor/70 border-black/10;
+  .alert-link {
+    @apply text-black dark:text-defaulttextcolor/70;
+  }
+  .btn-close {
+    @apply text-black dark:text-defaulttextcolor/70;
+    &.custom-close {
+      @apply text-black dark:text-defaulttextcolor/70 opacity-[1] rounded-[50px] shadow p-[0.85rem];
+    }
+  }
+}
+/* Basic Alerts */
+
+/* Solid Colored Alerts */
+
+.alert-solid-primary {
+  @apply bg-primary text-white border-primary;
+  .btn-close {
+    @apply text-white;
+  }
+}
+.alert-solid-secondary {
+  @apply bg-secondary text-white border-secondary;
+  .btn-close {
+    @apply text-white;
+  }
+}
+.alert-solid-warning {
+  @apply bg-warning text-white border-warning;
+  .btn-close {
+    @apply text-white;
+  }
+}
+.alert-solid-info {
+  @apply bg-info text-white border-info;
+  .btn-close {
+    @apply text-white;
+  }
+}
+.alert-solid-success {
+  @apply bg-success text-white border-success;
+  .btn-close {
+    @apply text-white;
+  }
+}
+.alert-solid-danger {
+  @apply bg-danger text-white border-danger;
+  .btn-close {
+    @apply text-white;
+  }
+}
+.alert-solid-light {
+  @apply bg-light text-defaulttextcolor border-light;
+  .btn-close {
+    @apply text-defaulttextcolor;
+  }
+}
+.alert-solid-dark {
+  @apply bg-black text-white border-black;
+  .btn-close {
+    @apply text-white;
+  }
+}
+/* Solid Colored Alerts */
+
+/* Outline Alerts */
+.alert-outline-primary {
+  @apply text-primary border-primary;
+  .btn-close {
+    @apply text-primary;
+  }
+}
+.alert-outline-secondary {
+  @apply text-secondary border-secondary;
+  .btn-close {
+    @apply text-secondary;
+  }
+}
+.alert-outline-info {
+  @apply text-info border-info;
+  .btn-close {
+    @apply text-info;
+  }
+}
+.alert-outline-warning {
+  @apply text-warning border-warning;
+  .btn-close {
+    @apply text-warning;
+  }
+}
+.alert-outline-success {
+  @apply text-success border-success;
+  .btn-close {
+    @apply text-success;
+  }
+}
+.alert-outline-danger {
+  @apply text-danger border-danger;
+  .btn-close {
+    @apply text-danger;
+  }
+}
+.alert-outline-light {
+  @apply text-defaulttextcolor border-light;
+  .btn-close {
+    @apply text-light;
+  }
+}
+.alert-outline-dark {
+  @apply text-black dark:text-defaulttextcolor/70 border-black;
+  .btn-close {
+    @apply text-light;
+  }
+}
+/* Outline Alerts */
+
+/* Customized Alerts */
+.alert-primary.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-primary border-solid text-[#8c9097] bg-white dark:bg-bodybg border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+.alert-secondary.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-secondary border-solid text-[#8c9097] bg-white  dark:bg-bodybg dark:border-defaultborder/10 border border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+.alert-warning.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-warning border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+.alert-danger.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-danger border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+.alert-success.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-success border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+.alert-info.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-info border-solid bg-white dark:bg-bodybg text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+.alert-light.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-light border-solid text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+.alert-dark.custom-alert-icon {
+  @apply border-s-[0.313rem] border-s-black border-solid text-[#8c9097] border dark:border-defaultborder/10 border-defaultborder text-[0.813rem];
+  .btn-close {
+    @apply text-[#8c9097];
+  }
+}
+/* Customized Alerts */
+
+/* Customized Alerts1 */
+.custom-alert1 {
+  @apply me-0 bg-white dark:bg-bodybg border-0 p-[1.25rem] text-defaulttextcolor;
+  p {
+    @apply mb-[2.5rem] text-[#8c9097] text-[0.8rem];
+  }
+  .custom-alert-icon {
+    @apply w-[3.125rem] h-[3.125rem] mb-[0.85rem];
+  }
+  .btn-close {
+    @apply p-0 mb-4;
+  }
+  &.alert-primary {
+    @apply border-t-[0.313rem] border-solid border-primary;
+  }
+  &.alert-secondary {
+    @apply border-t-[0.313rem] border-solid border-secondary;
+  }
+  &.alert-warning {
+    @apply border-t-[0.313rem] border-solid border-warning;
+  }
+  &.alert-danger {
+    @apply border-t-[0.313rem] border-solid border-danger;
+  }
+  &.alert-success {
+    @apply border-t-[0.313rem] border-solid border-success;
+  }
+}
+/* Customized Alerts1 */
+
+/* Image alerts */
+.alert-img {
+  @apply flex items-center;
+  .avatar {
+    @apply border border-solid border-black/10;
+  }
+}
+/* Image alerts */
+
+// .alert-primary {
+//   @apply bg-primary/10  border-primary/10;
+// }
+// .alert {
+//   @apply py-[0.625rem] px-[0.85rem] text-[0.8125rem];
+// }
+// .alert-light {
+//   @apply bg-light border-light;
+//   .alert-link {
+//     @apply text-defaulttextcolor;
+//   }
+//   .btn-close {
+//     @apply text-defaulttextcolor;
+//   }
+// }

preview/assets/scss/tailwind/_avatars.scss

@@ -0,0 +1,135 @@
+/* Start Avatar Styles */
+.avatar {
+    @apply relative h-[2.625rem] w-[2.625rem] inline-flex items-center justify-center rounded-md text-white font-medium mb-1;
+
+    a.badge:hover {
+        @apply text-white;
+    }
+
+    img {
+        @apply w-full h-full rounded-md;
+    }
+
+    .avatar-rounded{
+        @apply rounded-full!;
+
+        img {
+            @apply rounded-full!;
+        }
+    }
+
+    &.avatar-radius-0 {
+        @apply rounded-none;
+
+        img {
+            @apply rounded-none;
+        }
+    }
+
+    .avatar-badge {
+        @apply absolute! -top-[4%]! -end-[0.375rem]! w-[1.4rem]! h-[1.4rem]! text-[0.625rem]! border-2! border-solid! border-white! rounded-full! flex! items-center! justify-center!;
+    }
+    &.online,
+    &.offline {
+        @apply relative before:absolute before:w-[0.75rem] before:h-[0.75rem] before:rounded-full before:end-0 before:bottom-0 before:border-[2px] before:border-solid before:border-white before:dark:border-black;
+    }
+
+    &.online:before {
+        @apply bg-success;
+    }
+
+    &.offline:before {
+        @apply bg-gray-500;
+    }
+
+    &.avatar-xs {
+        @apply w-[1.25rem] h-[1.25rem] leading-[1.25rem] text-[0.65rem];
+
+        .avatar-badge {
+            @apply p-[0.25rem]! w-[1rem]! h-[1rem]! leading-[1rem]! text-[0.5rem]! -top-[25%]! -end-[0.5rem]!;
+        }
+        &.online,&.offline {
+            @apply before:w-[0.5rem] before:h-[0.5rem];
+        }
+    }
+
+    &.avatar-sm {
+        @apply w-[1.75rem] h-[1.75rem] leading-[1.75rem] text-[0.65rem];
+
+        .avatar-badge {
+            @apply p-[0.3rem]! w-[1.1rem]! h-[1.1rem]! leading-[1.1rem]! text-[0.5rem]! -top-[38%]! -end-[0.5rem]!;
+        }
+
+        &.online,
+        &.offline {
+            @apply before:w-[0.5rem] before:h-[0.5rem];
+        }
+    }
+
+    &.avatar-md {
+        @apply w-[2.5rem] h-[2.5rem] leading-[2.5rem] text-[0.8rem];
+
+        .avatar-badge {
+            @apply p-[0.4rem]! w-[1.2rem]! h-[1.2rem]! leading-[1.2rem]! text-[0.65rem]! -top-[6%]! -end-[13%]!;
+        }
+
+        &.online,
+        &.offline {
+            @apply before:w-[0.75rem] before:h-[0.75rem];
+        }
+
+        svg {
+            @apply w-[1.5rem] h-[1.5rem];
+        }
+    }
+
+    &.avatar-lg {
+        @apply w-[3rem] h-[3rem] leading-[3rem] text-[1rem];
+
+        .avatar-badge {
+            @apply -top-[15%] -end-[0.25%];
+        }
+
+        &.online,
+        &.offline {
+            @apply before:w-[0.8rem] before:h-[0.8rem];
+        }
+
+        svg {
+            @apply w-[1.8rem] h-[1.8rem];
+        }
+    }
+
+    &.avatar-xl {
+        @apply w-[4rem] h-[4rem] leading-[4rem] text-[1.25rem];
+
+        .avatar-badge {
+            @apply -top-[8%] -end-[0.2%];
+        }
+
+        &.online,
+        &.offline {
+            @apply before:w-[0.95rem] before:h-[0.95rem];
+        }
+    }
+
+    &.avatar-xxl {
+        @apply w-[5rem] h-[5rem] leading-[5rem] text-[1.5rem];
+
+        .avatar-badge {
+            @apply -top-[4%] -end-[0%];
+        }
+
+        &.online,
+        &.offline {
+            @apply before:w-[1.05rem] before:h-[1.05rem] bottom-1;
+        }
+    }
+}
+.avatar-rounded{
+    @apply rounded-full!;
+
+    img {
+        @apply rounded-full!;
+    }
+}

preview/assets/scss/tailwind/_breadcrumb.scss

@@ -0,0 +1,55 @@
+/* Start:: Breadcrumb Styles */
+
+
+.breadcrumb {
+  @apply mb-2;
+  .breadcrumb-item {
+    a {
+      @apply text-primary! ;
+    }
+
+    &.active {
+      @apply text-defaulttextcolor font-semibold;
+    }
+  }
+}
+.breadcrumb-item+.breadcrumb-item {
+  @apply ps-2;
+}
+.breadcrumb-item+.breadcrumb-item{
+  @apply before:content-["/"] before:text-textmuted before:me-2;
+}
+.breadcrumb-example1 {
+  .breadcrumb-item+.breadcrumb-item{
+    @apply before:!content-[''] before:!text-textmuted before:!me-0 ;
+  }
+}
+.breadcrumb-example2 {
+  .breadcrumb-item+.breadcrumb-item{
+    @apply before:content-["~"] before:text-textmuted;
+  }
+}
+.breadcrumb-style1 {
+  .breadcrumb-item+.breadcrumb-item::before {
+    @apply text-textmuted content-["->"];
+  }
+}
+.breadcrumb-style2 {
+  .breadcrumb-item+.breadcrumb-item::before {
+    @apply text-textmuted content-[''];
+  }
+}
+.breadcrumb-style3{
+  .breadcrumb-item+.breadcrumb-item::before {
+    @apply text-textmuted content-[''];
+  }
+}
+.embedded-breadcrumb:before {
+  @apply opacity-[0.7] before:content-[''];
+}
+.dark {
+  .embedded-breadcrumb:before {
+    @apply invert-[1];
+  }
+}
+/* End:: Breadcrumb Styles */

preview/assets/scss/tailwind/_buttons.scss

@@ -0,0 +1,411 @@
+/* Start Buttons Styles */
+.ti-btn {
+  @apply py-2 px-3 inline-flex justify-center items-center gap-2 mb-1 rounded-sm border border-transparent font-medium focus:ring-0 focus:outline-none focus:ring-offset-0 transition-all text-sm  ms-0;
+
+  &.ti-btn-outline {
+    @apply border;
+  }
+
+  &.ti-btn-disabled {
+    @apply cursor-not-allowed opacity-[0.65];
+  }
+}
+.ti-btn.ti-btn-sm {
+  @apply w-[1.75rem] h-[1.75rem] text-[0.8rem];
+}
+.ti-btn.ti-btn-lg {
+  @apply py-[0.65rem] px-4 text-[0.95rem] rounded-md;
+}
+.ti-btn {
+  &.ti-btn-w-xs {
+    @apply min-w-[5.625rem];
+  }
+  &.ti-btn-w-sm {
+    @apply min-w-[6.975rem];
+  }
+  &.ti-btn-w-md {
+    @apply min-w-[8.125rem];
+  }
+  &.ti-btn-w-lg {
+    @apply min-w-[9.375rem];
+  }
+}
+
+.ti-btn-group {
+  @apply inline-flex justify-center items-center gap-2 -ms-px first:rounded-s-sm first:ms-0 last:rounded-e-sm font-medium align-middle focus:z-10  transition-all text-sm;
+}
+.ti-btn-primary-full {
+  @apply bg-primary text-white;
+}
+.ti-btn-secondary-full {
+  @apply bg-secondary text-white;
+}
+.ti-btn-success-full {
+  @apply bg-success text-white;
+}
+.ti-btn-danger-full {
+  @apply bg-danger text-white;
+}
+.ti-btn-warning-full {
+  @apply bg-warning text-white;
+}
+.ti-btn-info-full {
+  @apply bg-info text-white;
+}
+.ti-btn-purple-full {
+  @apply bg-purple text-white;
+}
+.ti-btn-orange-full {
+  @apply bg-orange text-white;
+}
+.ti-btn-teal-full {
+  @apply bg-[#12c2c2] text-white;
+}
+.ti-btn-link {
+  @apply text-[#0d6efd]! underline! ;
+}
+
+.ti-btn-primary {
+  @apply bg-primary/10 text-primary hover:bg-primary focus:bg-primary hover:text-white focus:text-white;
+  &.active {
+    @apply text-white;
+  }
+}
+.ti-btn-group:first-child {
+  @apply ms-0 rounded-s-sm ;
+}
+
+.ti-btn-group:last-child {
+  @apply rounded-e-sm;
+}
+
+.ti-btn-secondary {
+  @apply bg-secondary/10 text-secondary hover:bg-secondary hover:text-white;
+}
+
+.ti-btn-warning {
+  @apply bg-warning/10 text-warning hover:bg-warning hover:text-white;
+}
+
+.ti-btn-success {
+  @apply bg-success/10 text-success hover:bg-success hover:text-white;
+}
+
+.ti-btn-light {
+  @apply bg-light text-defaulttextcolor dark:text-defaulttextcolor/80 hover:bg-light hover:text-defaulttextcolor focus:bg-light/80;
+}
+
+.ti-btn-dark {
+  @apply bg-gray-900! text-gray-100! dark:!text-black hover:!bg-gray-900 hover:!text-white dark:!bg-white;
+}
+
+.ti-btn-info {
+  @apply bg-info/10 text-info hover:text-white hover:bg-info;
+}
+
+.ti-btn-danger {
+  @apply bg-danger/10 text-danger hover:text-white hover:bg-danger focus:ring-danger dark:focus:ring-offset-white/10;
+}
+.ti-btn-purple {
+  @apply bg-purple/10 text-purple hover:text-white hover:bg-purple focus:ring-purple dark:focus:ring-offset-white/10;
+}
+.ti-btn-teal {
+  @apply bg-[#12c2c2]/10 text-[#12c2c2] hover:text-white hover:bg-[#12c2c2] focus:ring-[#12c2c2] dark:focus:ring-offset-white/10;
+}
+.ti-btn-orange {
+  @apply bg-orange/10 text-orange hover:text-white hover:bg-orange focus:ring-orange dark:focus:ring-offset-white/10;
+}
+
+.ti-btn-outline-primary {
+  @apply border-primary! text-primary! hover:!text-white hover:!bg-primary hover:!border-primary focus:!ring-primary dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-outline-secondary {
+  @apply border-secondary! text-secondary! hover:!text-white hover:!bg-secondary hover:!border-secondary focus:!ring-secondary dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-outline-danger {
+  @apply border-danger! text-danger! hover:!text-white hover:!bg-danger hover:!border-danger focus:!ring-danger dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-outline-warning {
+  @apply border-warning! text-warning! hover:!text-white hover:!bg-warning hover:!border-warning focus:!ring-warning dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-outline-info {
+  @apply border-info! text-info! hover:!text-white hover:!bg-info hover:!border-info focus:!ring-info dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-outline-success {
+  @apply border-success! text-success! hover:!text-white hover:!bg-success hover:!border-success focus:!ring-success dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-outline-light {
+  @apply border-light! text-black! dark:!text-defaulttextcolor/70 dark:hover:!bg-bodybg2 hover:!text-defaulttextcolor hover:!bg-gray-200 hover:!border-gray-200  dark:hover:!border-white/10 focus:!ring-gray-100 dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-outline-dark {
+  @apply border-gray-900! text-gray-900! hover:!text-white hover:!bg-gray-900 hover:!border-gray-900 dark:!border-white/10 dark:!text-white/70 focus:!ring-white/10 dark:focus:!ring-offset-white/10;
+}
+.ti-btn-outline-teal {
+  @apply border-[#12c2c2]! text-[#12c2c2]! hover:!text-white hover:!bg-[#12c2c2] hover:!border-[#12c2c2] dark:!border-white/10 dark:!text-white/70 focus:!ring-white/10 dark:focus:!ring-offset-white/10;
+}
+
+.ti-btn-ghost-primary {
+  @apply text-primary hover:bg-primary/10;
+}
+.ti-btn-ghost-secondary {
+  @apply text-secondary hover:bg-secondary/10;
+}
+.ti-btn-ghost-warning {
+  @apply text-warning hover:bg-warning/10;
+}
+.ti-btn-ghost-info {
+  @apply text-info hover:bg-info/10;
+}
+.ti-btn-ghost-danger {
+  @apply text-danger hover:bg-danger/10;
+}
+.ti-btn-ghost-success {
+  @apply text-success hover:bg-success/10;
+}
+.ti-btn-ghost-light {
+  @apply text-defaulttextcolor hover:bg-light/10;
+}
+.ti-btn-ghost-dark {
+  @apply text-black hover:bg-black/10;
+}
+.ti-btn-ghost-orange {
+  @apply text-orange hover:bg-orange/10;
+}
+.ti-btn-ghost-purple {
+  @apply text-purple hover:bg-purple/10;
+}
+.ti-btn-ghost-teal {
+  @apply text-[#12c2c2]  hover:bg-[#12c2c2]/10;
+}
+
+.btn-loader {
+  @apply pointer-events-none;
+}
+
+.ti-btn-primary-gradient {
+  @apply bg-gradient-to-r from-primary to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-secondary-gradient {
+  @apply bg-gradient-to-r from-secondary to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-success-gradient {
+  @apply bg-gradient-to-r from-success to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-danger-gradient {
+  @apply bg-gradient-to-r from-danger to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-warning-gradient {
+  @apply bg-gradient-to-r from-warning to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-info-gradient {
+  @apply bg-gradient-to-r from-info to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-orange-gradient {
+  @apply bg-gradient-to-r from-orange to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-purple-gradient {
+  @apply bg-gradient-to-r from-purple to-[#0086ed] text-white border-0 hover:border-0;
+}
+.ti-btn-teal-gradient {
+  @apply bg-gradient-to-r from-[#12c2c2] to-[#0086ed] text-white border-0 hover:border-0;
+}
+.btn-border-down {
+  &.btn-primary-light {
+    @apply border-b-[0.1875rem] border-solid border-primary;
+  }
+}
+/* End Buttons Styles */
+/* Start:: Social Buttons */
+.ti-btn-facebook {
+  @apply bg-facebook text-white border border-solid border-facebook;
+  &:hover,
+  &:focus,
+  &:active {
+    @apply bg-facebook! text-white! border! border-solid! border-facebook!;
+  }
+}
+.ti-btn-google {
+  @apply bg-google text-white border border-solid border-google;
+  &:hover,
+  &:focus,
+  &:active {
+    @apply bg-google! text-white! border! border-solid! border-google!;
+  }
+}
+.ti-btn-twitter {
+  @apply bg-twitter text-white border border-solid border-twitter;
+  &:hover,
+  &:focus,
+  &:active {
+    @apply bg-twitter! text-white! border! border-solid! border-twitter!;
+  }
+}
+.ti-btn-github {
+  @apply bg-github text-white border border-solid border-github;
+  &:hover,
+  &:focus,
+  &:active {
+    @apply bg-github! text-white! border! border-solid! border-github!;
+  }
+}
+.ti-btn-youtube {
+  @apply bg-youtube text-white border border-solid border-youtube;
+  &:hover,
+  &:focus,
+  &:active {
+    @apply bg-youtube! text-white! border! border-solid! border-youtube!;
+  }
+}
+.ti-btn-instagram {
+  @apply bg-[#f09433] text-white border border-solid border-transparent;
+  background: -moz-linear-gradient(
+    45deg,
+    #f09433 0%,
+    #e6683c 25%,
+    #dc2743 50%,
+    #cc2366 75%,
+    #bc1888 100%
+  );
+  background: -webkit-linear-gradient(
+    45deg,
+    #f09433 0%,
+    #e6683c 25%,
+    #dc2743 50%,
+    #cc2366 75%,
+    #bc1888 100%
+  );
+  background: linear-gradient(
+    45deg,
+    #f09433 0%,
+    #e6683c 25%,
+    #dc2743 50%,
+    #cc2366 75%,
+    #bc1888 100%
+  );
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
+  &:hover,
+  &:focus,
+  &:active {
+    @apply text-white border border-solid border-transparent;
+  }
+}
+/* End:: Social Buttons */
+
+.ti-btn-group > .ti-btn-group:not(:first-child) > .ti-btn,
+.ti-btn-group > .ti-btn:nth-child(n + 3),
+.ti-btn-group > :not(.ti-btn-check) + .ti-btn {
+  @apply rounded-s-none;
+}
+.ti-btn-group-vertical {
+  @apply flex-col items-start justify-center relative inline-block align-middle;
+}
+.ti-btn-group-vertical > .ti-btn-group:not(:last-child) > .ti-btn,
+.ti-btn-group-vertical > .ti-btn:not(:last-child):not(.ti-dropdown-toggle) {
+  @apply rounded-b-none border-b-0;
+}
+
+.ti-btn-group-vertical > .ti-btn-group:not(:first-child) > .ti-btn,
+.ti-btn-group-vertical > .ti-btn ~ .ti-btn {
+  @apply rounded-t-none;
+}
+.ti-btn-group-vertical {
+  .ti-btn-info-full {
+    @apply hover:bg-info/90;
+  }
+  .ti-btn-primary-full {
+    @apply hover:bg-primary/90;
+  }
+}
+.ti-btn-check {
+  @apply absolute pointer-events-none sr-only;
+}
+.ti-btn-group {
+  .ti-btn {
+    @apply py-[0.45rem] px-3;
+  }
+}
+.ti-btn-group-lg {
+  .ti-btn {
+    @apply py-[0.65rem] px-4;
+  }
+}
+.ti-btn-group-sm {
+  .ti-btn {
+    @apply py-1 px-2;
+  }
+}
+
+.ti-btn-group-vertical {
+  @apply flex-col items-start justify-center relative inline-flex align-middle;
+}
+
+/* Start:: Label Buttons */
+.label-ti-btn {
+  @apply relative ps-[2.6rem];
+}
+.label-ti-btn-icon {
+  @apply absolute w-[2.25rem] text-[1rem] flex items-center justify-center -start-0 -top-0 -bottom-0 bg-white/20;
+}
+.label-ti-btn.label-end {
+  @apply ps-4 pe-[2.6rem];
+  .label-ti-btn-icon {
+    @apply -end-0 start-auto;
+  }
+}
+.custom-button {
+  @apply relative ps-[2.75rem];
+  .custom-ti-btn-icons {
+    @apply shadow-[0_0_1px_0.25rem_rgba(0_0_0_0.1)] absolute -start-[0.125rem] top-0 bg-white flex items-center justify-center overflow-hidden p-[0.375rem] rounded-[3.125rem]
+        text-[1rem] w-[2.25rem] h-[2.25rem];
+    i {
+      @apply absolute;
+    }
+  }
+}
+.ti-btn-border-down.ti-btn-teal {
+  @apply border-b-[0.1875rem]! border-t-0! border-x-0! border-solid! border-[#12c2c2]!;
+}
+.ti-btn-border-start.ti-btn-secondary {
+  @apply border-s-[0.1875rem]! border-t-0! border-b-0! border-e-0! border-solid! border-secondary!;
+}
+.ti-btn-border-end.ti-btn-purple {
+  @apply border-e-[0.1875rem]! border-t-0! border-s-0! border-b-0! border-solid! border-purple!;
+}
+.ti-btn-border-top.ti-btn-warning {
+  @apply border-t-[0.1875rem]! border-b-0! border-x-0! border-solid! border-warning!;
+}
+.ti-btn-hover {
+  @apply relative;
+  &.ti-btn-hover-animate {
+    @apply transition-all duration-[0.2s] ease-linear delay-[0s] before:content-["\F417"] before:text-[0.8125rem] before:absolute
+        before:flex before:items-center before:justify-center before:end-0 before:top-0 before:opacity-0 before:h-full before:w-[2rem] before:transition-all
+        before:duration-[0.2s] before:ease-linear before:delay-[0s];
+    &:hover {
+      @apply pe-8 before:opacity-[1] before:indent-0;
+    }
+  }
+}
+.ti-btn-darken-hover {
+  @apply relative;
+  &:hover {
+    @apply before:absolute before:w-full before:h-full before:bg-black/[0.25] before:top-0 before:start-0;
+  }
+}
+.ti-btn-loader i {
+  @apply animate-spin!;
+}
+.ti-btn-group-vertical > .ti-btn,
+.ti-btn-group > .ti-btn {
+  @apply relative flex-grow;
+}
+.btn-check {
+  @apply absolute! pointer-events-none! sr-only! w-[1px]! h-[1px]! p-0!;
+}
+/* End:: Label Buttons */

preview/assets/scss/tailwind/_cards.scss

@@ -0,0 +1,6 @@
+.box.box-bg-primary {
+    @apply bg-primary! text-white! ;
+}
+.box.box-bg-success {
+    @apply bg-secondary! text-white! ;
+}

preview/assets/scss/tailwind/_carousels.scss

@@ -0,0 +1,9 @@
+.mySwiper1{
+.swiper-button-next:after,
+.swiper-button-prev:after{
+    @apply text-[1.5rem]! font-[300]! text-white!;
+}
+.swiper-pagination-bullet {
+    @apply bg-white text-white w-[30px] h-[3px] rounded-none;
+}
+}

preview/assets/scss/tailwind/_charts.scss

@@ -0,0 +1,133 @@
+/* Start Chart Styles */
+#pie-basic,
+#polararea-basic {
+  .apexcharts-canvas {
+    @apply my-0 mx-auto;
+  }
+}
+
+.chartjs-chart {
+  @apply max-h-[18.75rem]!;
+}
+
+.echart-charts {
+  @apply h-80;
+}
+
+.apexcharts-legend-marker {
+  @apply me-1;
+}
+
+.apexcharts-tooltip.apexcharts-theme-light,
+.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
+  @apply bg-white dark:bg-bodybg border-gray-200 dark:border-white/10 z-0;
+}
+
+.apexcharts-treemap-rect,
+.apexcharts-heatmap-rect,
+.apexcharts-marker,
+#apexcharts-radialbarTrack-0 {
+  @apply dark:stroke-black/20;
+}
+
+.apexcharts-pie-series {
+  path {
+    @apply dark:stroke-black/20;
+  }
+}
+
+.apexcharts-legend-text {
+  @apply dark:text-white;
+}
+
+.apexcharts-legend-text,
+.apexcharts-datalabel-value {
+  @apply dark:fill-white dark:text-white;
+}
+
+.apexcharts-radar-series.apexcharts-plot-series {
+
+  polygon,
+  line {
+    @apply dark:stroke-black/20;
+  }
+}
+
+.apexcharts-pie {
+
+  line,
+  circle {
+    @apply dark:stroke-black/20;
+  }
+}
+
+.apexcharts-toolbar {
+  @apply hidden! sm:!flex ;
+}
+
+.apexcharts-text,
+.apexcharts-zoom-icon svg,
+.apexcharts-zoomin-icon svg,
+.apexcharts-zoomout-icon svg,
+.apexcharts-reset-icon svg,
+.apexcharts-menu-icon svg {
+  @apply dark:!fill-white/80 ;
+}
+
+.apexcharts-toolbar {
+  @apply z-0;
+}
+
+.apexcharts-text {
+
+  title,
+  tspan {
+    @apply text-gray-500 fill-gray-500;
+  }
+}
+
+#area-chart,
+#line-chart,
+#candlestick-basic,
+#boxplot-basic,
+#bubble-3d,
+#heatmap-basic,
+#treemap-basic {
+
+  .apexcharts-title-text,
+  .apexcharts-subtitle-text {
+    @apply rtl:translate-x-56;
+  }
+}
+
+#bar-chart {
+  .apexcharts-yaxis-label {
+    @apply rtl:-translate-x-20;
+  }
+}
+
+#timeline-basic,
+#candlestick-basic,
+#heatmap-basic {
+  .apexcharts-yaxis-label {
+    @apply rtl:-translate-x-12;
+  }
+}
+
+.apexcharts-menu {
+  @apply dark:dark:bg-bodybg dark:border-white/10;
+}
+
+.apexcharts-theme-light .apexcharts-menu-item:hover {
+  @apply dark:bg-black/20;
+}
+
+#boxplot-basic {
+
+  .apexcharts-series {
+    path {
+      @apply dark:stroke-white/10;
+    }
+  }
+}
+/* End Chart Styles */

preview/assets/scss/tailwind/_components.scss

@@ -0,0 +1,400 @@
+/* Start Box Styles */
+body {
+  @apply dark:!bg-bodybg2 ;
+}
+.box {
+  @apply flex flex-col shadow-sm rounded-md text-defaulttextcolor dark:text-defaulttextcolor/70 bg-white  text-[0.813rem]  mb-6 relative dark:bg-bodybg;
+}
+
+.box-header {
+  @apply font-medium border-b border-b-defaultborder md:flex items-center gap-[0.25rem] rounded-t-sm px-[1.25rem] py-4 dark:border-white/10 flex-wrap;
+}
+.box-title {
+  @apply relative font-[700] text-defaulttextcolor text-[.9375rem] me-auto dark:text-defaulttextcolor/70 before:absolute;
+}
+
+.box {
+  .box-header {
+    .box-title {
+      @apply before:absolute before:h-4 before:w-[0.2rem] before:top-[0.15rem] before:-start-[0.65rem] before:bg-gradient-to-b before:from-primary/50 before:to-secondary/50 before:rounded-md;
+    }
+  }
+}
+
+.box-body {
+  @apply p-5 text-defaulttextcolor dark:text-defaulttextcolor/70;
+}
+
+.box-footer {
+  @apply border-t border-t-defaultborder rounded-b-sm py-4 px-[1.25rem] text-[var(--font-size-defaultsize)] text-defaulttextcolor md:py-4 md:px-5 dark:border-white/10;
+}
+.display-1 {
+  @apply text-[5rem];
+}
+.display-2 {
+  @apply text-[4.5rem];
+}
+.display-3 {
+  @apply text-[4rem];
+}
+.display-4 {
+  @apply text-[3.5rem];
+}
+.display-5 {
+  @apply text-[3rem];
+}
+.display-6 {
+  @apply text-[2.5rem];
+}
+.overlay-box {
+  @apply relative overflow-hidden text-white/90 before:absolute before:bg-black/20 before:inset-0;
+  .box-header {
+    @apply border-white/10;
+  }
+
+  .box-footer {
+    @apply border-white/10;
+  }
+}
+
+.over-content-bottom {
+  @apply top-auto;
+}
+
+.box-anchor {
+  @apply content-[""] absolute inset-0 z-[1] pointer-events-none;
+}
+
+.box.box-fullscreen {
+  @apply fixed inset-0 z-[9999] m-0 rounded-none;
+}
+
+.box-img-overlay {
+  @apply absolute inset-0 rounded-sm overflow-auto;
+}
+.card-img-top {
+  @apply rounded-t-md! ;
+}
+/* End Box Styles */
+.lead {
+  @apply text-[1.25rem] font-[300];
+}
+/* Start Alert Styles */
+.alert {
+  @apply text-sm rounded-sm px-4 py-3 mb-5 last:mb-0;
+}
+.text-badge .badge {
+  @apply absolute -end-4 -top-4;
+}
+/* End Alert Styles */
+
+.review-quote {
+  @apply absolute end-[0.8rem] text-[1.875rem] leading-[0] text-primary/70 bg-transparent p-[0.625rem];
+}
+/* Start Badge Styles */
+.badge {
+  @apply inline-flex items-center text-[0.75em] py-1 px-[0.45rem] font-semibold;
+
+  &:last-child {
+    @apply mb-0;
+  }
+}
+
+/* End Badge Styles */
+
+/* Start List-Group Styles */
+.ti-list-group {
+  @apply items-center font-normal text-[0.8125rem] border border-solid border-defaultborder rounded-md  text-start dark:border-defaultborder/10;
+  .ti-list-group-item {
+    @apply py-3 px-[1.25rem] border-b border-solid border-defaultborder dark:border-defaultborder/10 last:border-b-0;
+    &.active {
+      @apply text-white! bg-primary! border-primary! rounded-t-md!;
+    }
+    &.disabled,
+    &:disabled {
+      @apply text-textmuted! bg-light! opacity-[0.5]!;
+    }
+    &.ti-list-group-item-action {
+      @apply w-full;
+      &:hover,&:focus {
+        @apply bg-light;
+      }
+    }
+    &.ti-icon-link {
+      @apply focus:z-10 focus:outline-none py-[0.375rem] px-3 focus:ring-0;
+    }
+  }
+}
+.ti-list-group-flush {
+  @apply border-0;
+}
+/* End List-Group Styles */
+
+/* Start Progress Styles */
+.ti-main-progress {
+  @apply flex w-full h-1.5 rounded-full overflow-hidden;
+
+  .ti-main-progress-bar {
+    @apply flex flex-col justify-center overflow-hidden;
+  }
+}
+
+/* End Progress Styles */
+
+/* Start Spinner Styles */
+.ti-spinner {
+  @apply animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent rounded-full;
+}
+
+/* End Spinner Styles */
+
+/* Start Toast Styles */
+.ti-toast {
+  @apply max-w-xs border rounded-sm shadow-lg dark:border-white/10;
+}
+
+/* End Toast Styles */
+
+.ti-border {
+  @apply border-[#e5e7eb];
+}
+/* Start:: Nav-tabs */
+.nav-link {
+  &:focus,
+  &:hover {
+    @apply text-primary cursor-pointer;
+  }
+}
+.nav-tabs {
+  @apply border-defaultborder;
+  .nav-item.show .nav-link,
+  .nav-link.active {
+    @apply text-defaulttextcolor bg-light border-defaultborder;
+  }
+}
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link:hover {
+  @apply border-defaultborder;
+}
+
+.nav-tabs-header {
+  @apply border-0;
+
+  .nav-item {
+    @apply me-2;
+
+    &:last-child {
+      @apply me-0;
+    }
+
+    .nav-link {
+      @apply border border-solid rounded-md border-transparent text-[0.8rem] p-2 font-medium;
+
+      &.active {
+        @apply bg-primary/10 text-primary border border-solid border-transparent;
+      }
+
+      &:hover,
+      &:focus {
+        @apply border border-solid border-transparent text-primary;
+      }
+    }
+  }
+}
+.nav-justified .nav-item,
+.nav-justified > .nav-link {
+  @apply basis-0 flex-grow text-center;
+}
+.nav-fill .nav-item .nav-link,
+.nav-justified .nav-item .nav-link {
+  @apply w-full;
+}
+.nav.nav-style-1 {
+  @apply border-0;
+}
+
+.nav.nav-style-3 {
+  .nav-link {
+    @apply rounded-none!;
+  }
+  .nav-link {
+    @apply border-b-[3px] border-solid border-transparent;
+  }
+  .nav-link.active {
+    @apply bg-transparent! border-b-[3px]! border-solid! border-primary! text-primary! rounded-none!;
+  }
+}
+/* End:: Nav-tabs */
+/* Start:: Tab-style-6 */
+.tab-style-6 {
+  @apply border-0 bg-primary/10 rounded-md text-primary p-2;
+  .nav-item {
+    @apply border-0 me-2;
+    &:last-child {
+      @apply me-0;
+    }
+    .nav-link {
+      @apply text-primary py-2 px-4 text-[var(--font-size-defaultsize)] border-0 font-medium;
+      &.active {
+        @apply border-0 bg-primary text-white shadow-sm;
+      }
+      &:hover,
+      &:focus {
+        @apply border-0;
+      }
+    }
+  }
+}
+.navbar {
+  @apply rounded-md;
+  .navbar-nav {
+    .nav-link {
+      @apply leading-none py-[0.4rem] px-4 font-medium;
+    }
+  }
+  .navbar-toggler {
+    @apply p-[0.4rem] text-[1rem] leading-none text-black border border-solid border-defaultborder rounded-md;
+    .navbar-toggler-icon {
+      @apply w-[1rem] h-[1rem] relative bg-none before:content-['\F479'] before:absolute before:text-[1rem] before:text-defaulttextcolor before:start-0;
+    }
+  }
+  .navbar-toggler:focus {
+    @apply shadow-none;
+  }
+}
+// .nav-pills .nav-link.active,
+// .nav-pills .show > .nav-link {
+//   @apply text-white bg-primary py-2 px-4 rounded-md ;
+// }
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  @apply text-white bg-primary;
+}
+.navitem {
+  @apply me-4;
+}
+/* End:: Tab-style-6 */
+
+/* start::background */
+.bg-primary-gradient {
+  @apply bg-gradient-to-r from-primary to-[#0086ed]! text-white! ;
+}
+.bg-secondary-gradient {
+  @apply bg-gradient-to-r from-secondary to-[#0086ed]! text-white!;
+}
+.bg-warning-gradient {
+  @apply bg-gradient-to-r from-warning to-[#0086ed]! text-white!;
+}
+.bg-info-gradient {
+  @apply bg-gradient-to-r from-info to-[#0086ed]! text-white!;
+}
+.bg-success-gradient {
+  @apply bg-gradient-to-r from-success to-[#0086ed]! text-white!;
+}
+.bg-danger-gradient {
+  @apply bg-gradient-to-r from-danger to-[#0086ed]! text-white!;
+}
+.bg-orange-gradient {
+  @apply bg-gradient-to-r from-orange to-[#0086ed]! text-white!;
+}
+.bg-purple-gradient {
+  @apply bg-gradient-to-r from-purple to-[#0086ed]! text-white!;
+}
+.bg-teal-gradient {
+  @apply bg-gradient-to-r from-teal to-[#0086ed]! text-white!;
+}
+.bg-light-gradient {
+  @apply bg-gradient-to-r from-light to-[#0086ed]! text-white!;
+}
+.bg-dark-gradient {
+  @apply bg-gradient-to-r from-black to-[#0086ed]! text-white!;
+}
+/* End:: backgrounds */
+
+code {
+  @apply text-[0.675rem]! text-red! break-words!;
+}
+
+.color-container {
+  @apply w-[3rem] h-[3rem] rounded-full flex items-center justify-center leading-[3rem];
+}
+
+.bd-example-row [class^="col"],
+.bd-example-cssgrid .grid > * {
+  @apply pt-3 pb-3 bg-light/75 border border-solid border-defaultborder;
+}
+.bd-example-cssgrid .grid > * {
+  @apply rounded-sm;
+}
+.bd-example-row-flex-cols .grid {
+  @apply min-h-[10rem] bg-light/50;
+  .col {
+    @apply p-3;
+  }
+}
+.flex-container div {
+  @apply bg-transparent border-0;
+  > div {
+    @apply bg-light border border-solid border-white dark:border-bodybg;
+  }
+}
+.ratio {
+  @apply relative w-full before:block;
+}
+.bd-example-ratios .ratio {
+  @apply inline-block w-[10rem] text-textmuted bg-primary/10 border-defaultborder rounded-md;
+}
+.bd-example-position-utils .position-absolute {
+  @apply w-8 h-8 bg-primary/10 rounded-[0.375rem] absolute;
+}
+.bd-example-position-utils .position-relative {
+  @apply h-[12.5rem] bg-light relative;
+}
+.border-container {
+  @apply inline-block w-[5rem] h-[5rem] m-1 bg-light/30;
+}
+
+.upcoming-events-list li {
+  @apply mb-[1.5rem] ps-[1.5rem] relative before:absolute before:h-full before:w-[0.25rem] before:start-0 before:rounded-md;
+}
+
+.upcoming-events-list li:nth-child(1) {
+  @apply before:bg-primary/30;
+}
+
+.upcoming-events-list li:nth-child(2) {
+  @apply before:bg-secondary/30;
+}
+
+.upcoming-events-list li:nth-child(3) {
+  @apply before:bg-success/30;
+}
+
+.upcoming-events-list li:nth-child(4) {
+  @apply before:bg-danger/30;
+}
+
+.upcoming-events-list li:nth-child(5) {
+  @apply before:bg-info/30;
+}
+
+.upcoming-events-list li:nth-child(5) {
+  @apply before:bg-warning/30;
+}
+
+.upcoming-events-list li:last-child {
+  @apply mb-0;
+}
+
+#external-events .fc-event {
+  @apply cursor-move mb-[0.4rem] py-[0.375rem] px-3 text-[0.75rem] rounded-[0.35rem];
+}
+
+.glightbox {
+  @apply overflow-hidden;
+}
+
+/* start:: project-list */
+.project-list-title {
+  @apply max-w-[13.375rem];
+}

preview/assets/scss/tailwind/_custom.scss

@@ -0,0 +1,236 @@
+/* Start Custom Styles */
+.page-header {
+  @apply py-5;
+}
+
+.main-content {
+  @apply px-6;
+}
+
+.content {
+  @apply lg:ms-60 mt-[60px] transition-all ms-0;
+}
+
+pre {
+  @apply border-gray-200 border bg-slate-200 text-[0.75rem] p-5;
+}
+
+html {
+  @apply font-inter scroll-smooth text-start;
+}
+html {
+  &[dir="rtl"] {
+     direction:rtl !important;
+  }
+}
+body {
+  @apply scroll-smooth bg-bodybg h-full text-defaulttextcolor dark:text-white m-0 font-inter font-normal text-[0.813rem] relative text-start ;
+}
+
+[dir=rtl]{
+  body {
+     direction:rtl;
+  }
+}
+
+.page {
+  @apply flex flex-col h-full min-h-screen;
+}
+
+::-webkit-scrollbar {
+  @apply w-[0px] h-[5px] bg-gray-100;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply w-[0px] h-[2px] bg-gray-300;
+}
+.dark {
+  ::-webkit-scrollbar {
+    @apply bg-black/20;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-black/20;
+  }
+}
+
+code {
+  @apply text-danger text-sm;
+}
+
+.icons-list {
+  @apply list-none mt-0 -me-[1px] -mb-[1px] ms-0 p-0 flex flex-wrap;
+}
+
+.icons-list .icons-list-item {
+  @apply flex flex-col text-center p-2 no-underline relative items-center justify-center border border-gray-200 dark:border-white/10 rounded-md;
+
+  &:hover {
+    i {
+      @apply scale-150;
+    }
+  }
+}
+
+.icons-list .icons-list-item i {
+  @apply text-2xl text-primary;
+}
+
+.icon-label {
+  @apply text-gray-500 dark:text-white/70 text-xs mt-4;
+}
+
+.simplebar-scrollbar:before {
+  @apply bg-gray-200!;
+}
+
+.simplebar-track.simplebar-vertical {
+  @apply w-[10px]!;
+}
+
+[data-toggled="icon-overlay-close"] {
+  .content {
+    @apply lg:ms-24;
+  }
+}
+
+/* Start:: Back to Top */
+.scrollToTop {
+  @apply fixed bottom-5 end-5 hidden bg-primary text-white flex items-center justify-center text-center z-10 h-10 w-10 bg-no-repeat bg-center transition duration-100 rounded-md shadow-lg;
+}
+
+/* Start:: Back to Top */
+select option:active,
+select option:hover,
+select option:focus {
+  background-color: green !important;
+}
+
+/* End Custom Styles */
+select {
+  @apply bg-[start_0.5rem_center] pe-9 ps-2;
+}
+
+#drag-right,
+#drag-center,
+#drag-left {
+  .box {
+    @apply touch-none;
+  }
+}
+
+.ti-img-thumbnail{
+  @apply p-1 rounded-md border border-defaultborder dark:border-defaultborder/10 max-w-full h-auto dark:bg-bodybg2 mx-auto;
+}
+.ti-img-thumbnail-rounded{
+  @apply p-1 rounded-full border border-defaultborder dark:border-defaultborder/10 max-w-full h-auto dark:bg-bodybg2 mx-auto;
+}
+
+#responsive-overlay {
+  @apply transition-all duration-100 fixed inset-0 z-[101] bg-[#32325180] dark:bg-[#323251cc] invisible opacity-100;
+
+  &.active {
+    @apply opacity-50 dark:opacity-80 visible;
+  }
+}
+
+
+
+.container,
+.container-fluid {
+  @apply w-full px-[calc(1.5rem*0.5)] mx-auto;
+}
+.container {
+  @apply sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px] 2xl:max-w-[1320px];
+}
+
+@media (min-width: 576px) {
+  .container,
+  .container-sm {
+    @apply max-w-[540px] mx-auto;
+  }
+}
+
+@media (min-width: 768px) {
+  .container,
+  .container-md,
+  .container-sm {
+    @apply max-w-[720px] mx-auto;
+  }
+}
+
+@media (min-width: 992px) {
+  .container,
+  .container-lg,
+  .container-md,
+  .container-sm {
+    @apply max-w-[960px] mx-auto;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container-xl {
+    @apply max-w-[1140px] mx-auto;
+  }
+}
+
+@media (min-width: 1400px) {
+  .container,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container-xl,
+  .container-xxl {
+    @apply max-w-[1320px] mx-auto;
+  }
+}
+[class^="ri-"],
+[class*=" ri-"] {
+  @apply inline-flex;
+}
+
+@layer utilities {
+  .aspect-w-16 {
+    position: relative;
+    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+    --tw-aspect-w: 16;
+  }
+
+  .aspect-w-16 > * {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .aspect-h-9 {
+    --tw-aspect-h: 9;
+  }
+
+  .aspect-w-1 {
+    position: relative;
+    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
+    --tw-aspect-w: 1;
+  }
+
+  .aspect-w-1 > * {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .aspect-h-1 {
+    --tw-aspect-h: 1;
+  }
+}

preview/assets/scss/tailwind/_dropdown.scss

@@ -0,0 +1,134 @@
+/* Start Dropdown Styles */
+.ti-dropdown {
+    @apply relative inline-flex;
+}
+
+.ti-dropdown-toggle {
+    @apply py-3 px-4 inline-flex justify-center items-center gap-2 rounded-sm border dark:border-defaultborder/10 font-medium  shadow-sm align-middle;
+}
+
+.ti-dropdown-caret {
+    @apply w-2.5 h-2.5 text-gray-600 dark:text-white/70;
+}
+
+.ti-dropdown-menu {
+    @apply transition-[opacity,margin] hs-dropdown-open:opacity-100  opacity-0 z-[13] mt-2 min-w-[10rem] bg-white shadow-md border border-gray-200 rounded-sm dark:bg-bodybg dark:border-white/10 dark:divide-white/10;
+}
+
+.ti-dropdown-item {
+    @apply py-2 px-[0.9375rem] text-[0.8125rem] font-medium block   text-gray-800 hover:bg-primary/[0.05] hover:text-primary focus:ring-0 focus:ring-primary dark:text-white/70 dark:hover:bg-primary/5 dark:hover:text-primary;
+    &.active{
+        @apply bg-primary! text-white!;
+    }
+    &.disabled{
+        @apply text-textmuted bg-transparent pointer-events-none;
+    }
+}
+
+.ti-dropdown-menu-hover {
+    @apply after:h-4 after:absolute after:-bottom-4 after:start-0 after:w-full before:h-4 before:absolute before:-top-4 before:start-0 before:w-full;
+}
+
+.ti-dropdown-divider {
+    @apply py-2 first:pt-0 last:pb-0 dark:border-defaultborder/10;
+}
+hr{
+  @apply dark:!border-defaultborder/10;
+}
+.ti-dropdown-title {
+    @apply block py-2 px-3 text-xs font-medium uppercase text-gray-400 dark:text-white/70;
+}
+
+.ti-dropdown-header {
+    @apply py-3 px-5 -m-2 bg-gray-100 rounded-t-sm dark:bg-black/20;
+
+    .ti-dropdown-header-title {
+        @apply text-sm text-gray-500 dark:text-white;
+    }
+
+    .ti-dropdown-header-content {
+        @apply text-sm font-medium text-gray-800 dark:text-white;
+    }
+}
+
+.ti-dropdowm-profileimg {
+    @apply w-8 h-auto rounded-full;
+}
+
+.ti-dropdowm-profileimg-content {
+    @apply text-gray-600 font-medium truncate max-w-[7.5rem] dark:text-white/70;
+}
+
+.ti-dropdown-icon {
+    @apply w-4 h-4 text-gray-600 dark:text-white/70;
+}
+.ti-dropdown-toggle{
+    @apply relative;
+.ti-dropdown-toggle{
+    @apply after:inline-block after:ms-1 after:align-[0] after:content-["\f282"] after:border-0 after:text-[0.6rem] after:font-semibold;
+}
+  .ti-dropup .ti-dropdown-toggle{
+    @apply after:inline-block after:ms-1 after:align-[0] after:content-["\F286"] after:border-0 after:text-[0.6rem] after:font-semibold;
+  }
+  .dropend .ti-dropdown-toggle{
+    @apply after:inline-block after:ms-1 after:align-[0] after:content-["\F285"] after:border-0 after:text-[0.6rem] after:font-semibold;
+  }
+  .dropstart .ti-dropdown-toggle{
+    @apply before:inline-block before:ms-1 before:align-[0] before:content-["\F284"] before:border-0 before:text-[0.6rem] before:font-semibold;
+  }
+  .dropdown-toggle-split {
+    @apply opacity-[0.85];
+  }
+}
+.dropmenu-item-warning {
+    .ti-dropdown-item {
+      &:hover,
+      &:focus,
+      &:active,
+      &.active {
+        @apply bg-warning/10! text-warning!;
+      }
+    }
+  }
+  .dropmenu-item-info {
+    .ti-dropdown-item {
+      &:hover,
+      &:focus,
+      &:active,
+      &.active {
+        @apply bg-info/10! text-info!;
+      }
+    }
+  }
+  .dropmenu-light-success{
+    @apply bg-success/10 backdrop-blur-3xl;
+    .ti-dropdown-item {
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            @apply text-white! bg-success!;
+        }
+      }
+  }
+  .dropmenu-light-danger{
+    @apply bg-danger/10 backdrop-blur-3xl;
+    .ti-dropdown-item {
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            @apply text-white! bg-danger!;
+        }
+      }
+  }
+  .ti-btn-list a{
+    @apply me-0;
+  }
+  .bd-example>.dropdown-menu {
+    @apply static block;
+}
+.dropdown-header {
+    @apply block py-2 px-4 mb-0 text-[0.875rem];
+}
+/* End Dropdown Styles */

preview/assets/scss/tailwind/_forms.scss

@@ -0,0 +1,500 @@
+/* Start Form Styles */
+.ti-form-input {
+  @apply border border-inputborder block w-full text-sm focus:border-gray-200 py-[0.75rem] px-[0.5rem]   focus:shadow-sm dark:shadow-white/10 dark:bg-bodybg dark:border-white/10 dark:focus:border-white/10 dark:text-white/70  focus-visible:outline-none;
+}
+
+.ti-switch {
+  @apply relative w-[3.25rem] h-7 bg-gray-200 checked:bg-none checked:bg-primary border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-0 ring-transparent focus:border-primary focus:shadow-none focus:ring-transparent focus:ring-offset-0 ring-offset-white focus:outline-0 appearance-none dark:bg-black/20 dark:checked:bg-primary dark:focus:ring-offset-white/10 before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-white before:translate-x-0 ltr:checked:before:translate-x-full rtl:checked:before:-translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-black/20 dark:checked:before:bg-black/20;
+}
+
+.ti-form-select {
+  @apply py-3 px-4 pe-9 block w-full border-gray-200 rounded-sm text-sm focus:border-primary focus:ring-primary dark:dark:bg-bodybg dark:border-white/10 dark:text-white/70;
+}
+
+.ti-form-select-label {
+  @apply block text-sm font-medium mb-2 dark:text-white;
+}
+
+.ti-form-label {
+  @apply block text-sm font-medium mb-2 dark:text-white;
+}
+
+.ti-form-control {
+  @apply border border-inputborder text-defaulttextcolor bg-white dark:bg-bodybg2 dark:border-white/10 text-[0.875rem] font-normal leading-[1.6] rounded-[0.35rem] py-2 px-[0.85rem] placeholder:text-defaulttextcolor dark:placeholder:text-defaulttextcolor/70;
+
+  &:focus {
+    @apply shadow-none border-inputborder bg-white dark:bg-bodybg text-defaulttextcolor dark:text-defaulttextcolor/70;
+  }
+  &:focus-visible  {
+    @apply outline-none!
+  }
+}
+.form-select {
+  @apply block w-full py-[0.375rem] pe-[2.25rem] ps-[0.75rem] text-[1rem] font-normal leading-[1.5];
+}
+.form-select {
+  @apply bg-white dark:bg-bodybg border border-solid border-inputborder dark:border-white/10 text-defaulttextcolor text-[var(--font-size-defaultsize)] rounded-md focus:border focus:border-primary;
+  option {
+    @apply bg-white dark:bg-bodybg py-[0.35rem] px-3 rounded-sm border border-primary/10;
+  }
+
+  option:checked {
+    @apply bg-primary/20 text-primary;
+  }
+}
+
+.form-check-input {
+  @apply h-[0.9rem] w-[0.9rem] bg-white dark:bg-bodybg dark:border-white/10 border border-solid border-inputborder rounded-sm;
+  &:focus {
+    @apply border! border-defaultborder! dark:!border-defaultborder/10 outline-none!;
+  }
+
+  &:checked {
+    @apply bg-primary border-primary;
+  }
+
+  &.form-checked-outline {
+    &:checked {
+      @apply bg-transparent border-primary;
+    }
+  }
+
+  &.form-checked-secondary {
+    &:checked {
+      @apply bg-secondary border-secondary hover:bg-secondary;
+    }
+  }
+
+  &.form-checked-warning {
+    &:checked {
+      @apply bg-warning border-warning hover:bg-warning;
+    }
+  }
+
+  &.form-checked-info {
+    &:checked {
+      @apply bg-info border-info hover:bg-info;
+    }
+  }
+
+  &.form-checked-success {
+    &:checked {
+      @apply bg-success! border-success focus:bg-success! focus:border-success focus:shadow-success focus:ring-0;
+    }
+  }
+
+  &.form-checked-danger {
+    &:checked {
+      @apply bg-danger border-danger hover:bg-danger;
+    }
+  }
+
+  &.form-checked-light {
+    &:checked {
+      @apply bg-light border-light hover:bg-light;
+    }
+  }
+
+  &.form-checked-dark {
+    &:checked {
+      @apply bg-[#232323] border-[#232323] hover:bg-black;
+    }
+  }
+}
+[type="radio"] {
+  @apply dark:bg-bodybg dark:border-defaultborder/10 ring-primary;
+}
+.form-check-input {
+  @apply align-top appearance-none;
+}
+
+.form-check-input[type="checkbox"] {
+  @apply rounded-[0.25rem];
+}
+
+.form-check-input[type="radio"] {
+  @apply rounded-[50%] ring-primary;
+}
+
+.form-check-input:active {
+  @apply brightness-[90%];
+}
+
+.form-check-input:focus {
+  @apply  outline-none! ;
+}
+
+.form-check-input:checked {
+  @apply bg-primary border-primary ring-primary;
+}
+.input-group-text {
+  @apply border-inputborder text-[0.875rem] rounded-[0.3125rem] bg-light text-defaulttextcolor;
+  .form-control {
+    @apply border-0! rounded-s-none! ;
+  }
+}
+.input-group-text {
+  @apply flex items-center py-[0.375rem] px-3 text-[0.875rem] font-normal leading-[1.5] text-center whitespace-nowrap border border-solid border-defaultborder dark:border-defaultborder/10;
+}
+.input-group {
+  @apply relative flex flex-wrap items-stretch w-full;
+}
+
+.input-group > .form-control,
+.input-group > .form-floating,
+.input-group > .form-select {
+  @apply relative w-[1%] min-w-0 flex-grow flex-shrink basis-auto;
+}
+.form-control {
+  @apply border border-solid border-inputborder text-defaulttextcolor bg-white dark:border-white/10 dark:!bg-bodybg text-[0.875rem] font-normal leading-[1] rounded-none  py-2 px-[0.85rem] placeholder:text-defaulttextcolor dark:placeholder:text-defaulttextcolor/70 placeholder:opacity-40 placeholder:font-medium placeholder:text-[0.8rem] ;
+  &:focus {
+    @apply shadow-none border-inputborder bg-white dark:bg-bodybg text-defaulttextcolor dark:text-defaulttextcolor/70 outline-none;
+  }
+ &:focus-visible{
+    @apply outline-none
+  }
+}
+.form-checked-outline:checked[type="checkbox"] {
+  @apply bg-none relative bg-transparent hover:bg-transparent before:absolute  before:text-primary before:w-[0.625rem] before:h-[0.625rem] before:-top-4 before:start-0 before:text-[0.688rem];
+  &.form-checked-success {
+    @apply before:text-success;
+  }
+}
+.form-control-lg {
+  @apply text-[.75rem] py-2 px-4;
+}
+.form-check-md .form-check-input {
+  @apply w-[1.15rem] h-[1.15rem];
+}
+.form-check-lg .form-check-input {
+  @apply w-[1.35rem] h-[1.35rem];
+}
+.form-check-reverse {
+  @apply pr-[1.5rem] rtl:pl-[1.5rem] ps-0 text-end;
+}
+.form-check-reverse .form-check-input {
+  @apply ltr:float-right rtl:float-left -me-[1.5em] ms-0;
+}
+[type="text"]:focus,
+input:where(:not([type])):focus,
+[type="email"]:focus,
+[type="url"]:focus,
+[type="password"]:focus,
+[type="number"]:focus,
+[type="date"]:focus,
+[type="datetime-local"]:focus,
+[type="month"]:focus,
+[type="search"]:focus,
+[type="tel"]:focus,
+[type="time"]:focus,
+[type="week"]:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
+  @apply border-defaultborder! dark:!border-defaultborder/10 ring-0!;
+}
+[type="checkbox"]:checked:hover,
+[type="checkbox"]:checked:focus,
+[type="radio"]:checked:hover,
+[type="radio"]:checked:focus {
+  @apply bg-primary ring-primary;
+}
+/* Start:: toggle switches-1 */
+.toggle {
+  @apply w-[3.75rem] h-[1.563rem] bg-light ms-[0.625rem] mb-[0.313rem] p-[0.125rem] rounded-[0.188rem] relative overflow-hidden transition-all duration-[0.2s] ease-linear;
+
+  span {
+    @apply absolute top-[0.188rem] bottom-1 start-[0.188rem] block w-[1.25rem] rounded-[0.125rem] bg-white shadow-sm cursor-pointer transition-all duration-[0.2s] ease-linear
+    before:-start-[1.563rem] before:content-["on"] after:content-["off"] after:-end-[1.813rem] after:text-textmuted;
+    &::before,
+    &::after {
+      @apply absolute text-[0.625rem] font-medium space-x-2 rtl:space-x-reverse uppercase top-[0.188rem] leading-[1.38] transition-all duration-[0.2s] ease-linear;
+    }
+  }
+
+  &.on {
+    @apply bg-primary/30;
+
+    span {
+      @apply bg-primary before:text-primary start-[2.313rem];
+    }
+
+    &.toggle-secondary {
+      @apply bg-secondary/40;
+      span {
+        @apply bg-secondary before:text-secondary;
+      }
+    }
+
+    &.toggle-warning {
+      @apply bg-warning/40;
+      span {
+        @apply bg-warning before:text-warning;
+      }
+    }
+
+    &.toggle-info {
+      @apply bg-info/40;
+      span {
+        @apply bg-info before:text-info;
+      }
+    }
+
+    &.toggle-success {
+      @apply bg-success/40;
+      span {
+        @apply bg-success before:text-success;
+      }
+    }
+
+    &.toggle-danger {
+      @apply bg-danger/40;
+      span {
+        @apply bg-danger before:text-danger;
+      }
+    }
+
+    &.toggle-light {
+      @apply bg-light/40;
+      span {
+        @apply bg-light before:text-textmuted;
+      }
+    }
+
+    &.toggle-dark {
+      @apply bg-black/40;
+      span {
+        @apply bg-black before:text-white;
+      }
+    }
+
+    span {
+      @apply start-[2.313rem];
+    }
+
+    &.toggle-sm span {
+      @apply start-[2.313rem] before:-top-[1px] before:-start-[1.563rem];
+    }
+
+    &.toggle-lg span {
+      @apply start-[2.563rem] before:top-2 before:-start-[1.75rem];
+    }
+  }
+
+  &.toggle-sm {
+    @apply h-[1.063rem] w-[3.125rem];
+
+    span {
+      @apply w-[0.625rem] h-[0.625rem] after:-end-[1.875rem] after:-top-[1px];
+    }
+  }
+
+  &.toggle-lg {
+    @apply h-[2.125rem] w-[4.5rem];
+
+    span {
+      @apply w-[1.75rem] after:top-2 after:-end-[1.938rem];
+    }
+  }
+}
+/* Start:: toggle switches-2 */
+.custom-toggle-switch > input[type="checkbox"] {
+  @apply hidden;
+}
+
+.custom-toggle-switch > label {
+  @apply cursor-pointer h-0 relative w-[2.5rem];
+}
+
+.label-primary {
+  @apply bg-primary text-white;
+}
+
+.label-secondary {
+  @apply bg-secondary text-white;
+}
+
+.label-warning {
+  @apply bg-warning text-white;
+}
+
+.label-info {
+  @apply bg-info text-white;
+}
+
+.label-success {
+  @apply bg-success text-white;
+}
+
+.label-danger {
+  @apply bg-danger text-white;
+}
+
+.label-light {
+  @apply bg-light text-white;
+}
+
+.label-dark {
+  @apply bg-black text-white;
+}
+
+.custom-toggle-switch > input[type="checkbox"]:checked + label::before {
+  @apply bg-inherit opacity-[0.5];
+}
+
+.custom-toggle-switch > label {
+  @apply before:bg-textmuted before:rounded-md before:h-4 before:-mt-2 before:absolute before:opacity-[0.3] before:transition-all before:duration-[0.4s] before:ease-in-out before:w-[2.5rem]
+  after:bg-white after:rounded-[1rem] after:h-[1.5rem]  after:shadow-[0_0_0.313rem_rgba(228,229,237,0.8)] after:-start-1 after:-mt-2 after:absolute after:-top-1 after:transition-all after:duration-[0.3s] after:ease-in-out after:w-[1.5rem];
+}
+
+.custom-toggle-switch > input[type="checkbox"]:checked + label::after {
+  @apply bg-inherit start-[50%];
+}
+
+.custom-toggle-switch.toggle-sm > label::before {
+  @apply h-[10px] w-[27px] rounded-[10px];
+}
+
+.custom-toggle-switch.toggle-sm input[type="checkbox"]:checked + label::after {
+  @apply start-[13px];
+}
+
+.custom-toggle-switch.toggle-sm > label::after {
+  @apply h-[17px] w-[17px] rounded-full;
+}
+
+.custom-toggle-switch.toggle-lg > label::before {
+  @apply h-[27px] w-[55px] rounded-[20px];
+}
+
+.custom-toggle-switch.toggle-lg input[type="checkbox"]:checked + label::after {
+  @apply start-[77%];
+}
+
+.custom-toggle-switch.toggle-lg > label::after {
+  @apply h-[35px] w-[35px] -mt-[8px] rounded-full;
+}
+
+/* End:: toggle switches-2 */
+
+/* End:: toggle switches-1 */
+
+/* End Form Styles */
+
+.form-control-sm {
+  @apply text-[0.8rem]! py-1! px-[0.8rem]! border-inputborder!  dark:!border-white/10;
+}
+
+.form-control {
+  @apply text-defaulttextcolor bg-white text-[0.875rem] font-normal leading-[1.6] rounded-[0.35rem] py-2 px-[0.85rem] w-full;
+  &:focus {
+    @apply shadow-none border-inputborder bg-white dark:bg-bodybg text-defaulttextcolor;
+  }
+}
+.form-control:disabled,
+.form-select:disabled {
+  @apply bg-light text-defaulttextcolor;
+}
+.form-control-plaintext {
+  @apply block w-full p-[0.375rem] mb-0 leading-6 bg-transparent border-transparent border-0;
+}
+.form-input-color {
+  @apply h-[2.25rem] w-[2.25rem] rounded-md overflow-hidden p-0;
+}
+.form-text {
+  @apply mt-1! text-[0.875em]!;
+}
+.form-check {
+  // @apply block min-h-[1.5rem] ps-0 mb-[0.125rem];
+  @apply block ps-0 mb-[0.125rem];
+  .form-check-label {
+    @apply ps-2;
+  }
+}
+.form-check-input:disabled ~ .form-check-label,
+.form-check-input[disabled] ~ .form-check-label {
+  @apply cursor-default opacity-50;
+}
+.input-group
+  > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(
+    .valid-feedback
+  ):not(.invalid-tooltip):not(.invalid-feedback) {
+  @apply rounded-s-none!;
+}
+
+.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
+.input-group:not(.has-validation)
+  > .form-floating:not(:last-child)
+  > .form-control,
+.input-group:not(.has-validation)
+  > .form-floating:not(:last-child)
+  > .form-select,
+.input-group:not(.has-validation)
+  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(
+    .form-floating
+  ) {
+  @apply rounded-e-none!;
+}
+.input-group-lg > .btn,
+.input-group-lg > .form-control,
+.input-group-lg > .form-select,
+.input-group-lg > .input-group-text {
+  @apply py-2! px-4! text-[1.25rem]! rounded-md!;
+}
+
+.input-group-sm > .btn,
+.input-group-sm > .form-control,
+.input-group-sm > .form-select,
+.input-group-sm > .input-group-text {
+  @apply py-1! px-2! text-[0.875rem]!;
+}
+
+.form-range {
+  @apply w-full h-[0.5rem] p-0 bg-light rounded-md appearance-none;
+}
+
+.form-range:focus {
+  @apply outline-none;
+}
+.form-range:disabled {
+  @apply pointer-events-none;
+}
+.form-control-color {
+  @apply w-[1.75rem]! h-[1.75rem]! overflow-hidden! p-0! rounded-md! ;
+}
+
+input {
+  &[type="week"],
+  &[type="month"],
+  &[type="date"],
+  &[type="datetime-local"],
+  &[type="time"] {
+    &::-webkit-calendar-picker-indicator {
+      @apply dark:!invert ;
+    }
+  }
+}
+[dir=rtl]{
+input {
+  &[type="week"],
+  &[type="month"],
+  &[type="date"],
+  &[type="datetime-local"],
+  &[type="time"] {
+    @apply text-end! ;
+      &{
+      direction:rtl !important;
+      }
+    &::-webkit-calendar-picker-indicator {
+      @apply text-end!;
+      &{
+      direction:rtl !important;
+      }
+    }
+
+
+  }
+}
+}
+
+

preview/assets/scss/tailwind/_modal.scss

@@ -0,0 +1,29 @@
+
+
+    /* Start Modal Styles */
+    .ti-modal {
+        @apply w-full h-full fixed top-0 start-0 z-[105] overflow-x-hidden overflow-y-auto;
+        .ti-modal-header {
+            @apply flex justify-between items-center py-3 px-4 border-b  border-defaultborder dark:border-white/10;
+        }
+        .ti-modal-box {
+            @apply hs-overlay-open:opacity-100 hs-overlay-open:duration-500 opacity-0 transition-all sm:max-w-md md:max-w-lg sm:w-full m-3 sm:mx-auto;
+        }
+        .ti-modal-content {
+            @apply flex flex-col bg-white border border-defaultborder shadow-sm rounded-sm dark:dark:bg-bodybg dark:border-white/10 dark:shadow-black/[0.05];
+        }
+        .ti-modal-title {
+            @apply font-bold text-gray-800 dark:text-white;
+        }
+        .ti-modal-close-btn {
+            @apply inline-flex flex-shrink-0 justify-center items-center h-8 w-8 rounded-md text-gray-500 dark:text-white dark:hover:text-white/70 hover:text-gray-400 focus:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-sm dark:focus:ring-white/10 dark:focus:ring-offset-white/10;
+        }
+        .ti-modal-body {
+            @apply p-4;
+        }
+        .ti-modal-footer {
+            @apply flex justify-end items-center gap-x-2 py-3 px-4 border-t border-defaultborder dark:border-white/10;
+        }
+    }
+
+    /* End Modal Styles */

preview/assets/scss/tailwind/_offcanvas.scss

@@ -0,0 +1,163 @@
+/* Start Offcanvas Styles */
+.ti-offcanvas {
+  @apply fixed transition-all duration-300 transform h-full bg-white dark:dark:bg-bodybg dark:border-white/10 z-[150] shadow-md;
+
+  &.ti-offcanvas-left {
+    @apply ltr:-translate-x-full rtl:translate-x-full top-0 start-0 max-w-[27.5rem] w-full border-e;
+  }
+  &.ti-offcanvas-top {
+    @apply -translate-y-full top-0 inset-x-0 max-h-40 w-full border-b;
+  }
+  &.ti-offcanvas-right {
+    @apply ltr:translate-x-full rtl:-translate-x-full top-0 end-0 max-w-[27.5rem] w-full border-s;
+  }
+  &.ti-offcanvas-bottom {
+    @apply translate-y-full bottom-0 inset-x-0 max-h-40 w-full border-b;
+  }
+  &.open {
+    @apply translate-x-0!  translate-y-0!;
+  }
+  .ti-offcanvas-header {
+    @apply flex justify-between items-center py-3 px-4 border-b border-defaultborder dark:border-white/10;
+  }
+  .ti-offcanvas-title {
+    @apply font-medium text-gray-800 dark:text-white;
+  }
+  .ti-offcanvas-body {
+    @apply overflow-y-auto h-screen px-0 pb-80;
+  }
+  .ti-offcanvas-footer {
+    @apply py-3! px-[1.563rem]! absolute! bottom-0!  w-full! bg-white! dark:!bg-bodybg  border-t! border-dashed! border-defaultborder! dark:!border-defaultborder/10 shadow-md!;
+  }
+}
+/* End Offcanvas Styles */
+
+.switcher-style-head {
+  @apply text-[0.8rem] font-semibold mb-0 bg-light py-[0.313rem] px-[0.625rem] text-defaulttextcolor;
+}
+.switcher-style {
+  @apply py-[0.875rem] px-[1.563rem];
+}
+[type="radio"] {
+  @apply text-primary! ;
+}
+
+.theme-colors {
+  &.switcher-style {
+    @apply py-[0.938rem] px-[1.563rem];
+  }
+  [type="radio"]:checked {
+     @apply bg-none checked:before:content-["\eb7b"] checked:before:font-['remixicon'] checked:before:text-[20px] checked:before:text-success checked:before:relative checked:before:start-[0px] checked:before:top-[0px] checked:before:font-medium checked:ring-transparent focus:border-transparent ring-transparent focus:ring-transparent;
+  }
+  .switch-select {
+    .color-input {
+      @apply w-8 h-8 rounded-full;
+
+      &.form-check-input:checked {
+        @apply border border-inputborder relative border-solid after:!content-none;
+
+        &:before {
+          @apply absolute content-["\ea5e"] text-success w-full h-full flex items-center justify-center text-[1.35rem] font-normal font-['tabler-icons'];
+        }
+      }
+
+
+      &.color-white {
+        @apply bg-white;
+      }
+      &.color-dark {
+        @apply bg-black;
+      }
+      &.color-primary {
+        @apply bg-primary;
+      }
+      &.color-primary-1 {
+        @apply bg-[#3a5892];
+      }
+      &.color-primary-2 {
+        @apply bg-[#5c90a3];
+      }
+      &.color-primary-3 {
+        @apply bg-[#a15adf];
+      }
+      &.color-primary-4 {
+        @apply bg-[#4eac4c];
+      }
+      &.color-primary-5 {
+        @apply bg-[#df5a5a];
+      }
+      &.color-gradient {
+        @apply bg-gradient-to-tr from-primary to-[#6e72a8];
+      }
+      &.color-transparent {
+        @apply bg-[url('../images/menu-bg-images/transparent.png')]! bg-cover! bg-center!;
+      }
+      &.color-bg-1 {
+        @apply bg-[#141e60];
+      }
+      &.color-bg-2 {
+        @apply bg-[#084e73];
+      }
+      &.color-bg-3 {
+        @apply bg-[#5a2587];
+      }
+      &.color-bg-4 {
+        @apply bg-[#186533];
+      }
+      &.color-bg-5 {
+        @apply bg-[#784214];
+      }
+    }
+  }
+}
+.menu-image {
+  .bgimage-input {
+
+    @apply w-[3.5rem] h-[5.625rem] rounded-md border-0;
+    &.form-check-input{
+      @apply checked:before:!content-none checked:after:!content-none focus:border-transparent focus:shadow-sm
+    }
+    &.bg-img1 {
+      @apply bg-[url('../images/menu-bg-images/bg-img1.jpg')]! bg-center! bg-cover! bg-no-repeat!;
+
+    }
+    &.bg-img2 {
+      @apply bg-[url('../images/menu-bg-images/bg-img2.jpg')]! bg-center! bg-cover! bg-no-repeat!;
+
+    }
+    &.bg-img3 {
+      @apply bg-[url('../images/menu-bg-images/bg-img3.jpg')]! bg-center! bg-cover! bg-no-repeat!;
+
+    }
+    &.bg-img4 {
+      @apply bg-[url('../images/menu-bg-images/bg-img4.jpg')]! bg-center! bg-cover! bg-no-repeat!;
+
+    }
+    &.bg-img5 {
+      @apply bg-[url('../images/menu-bg-images/bg-img5.jpg')]! bg-center! bg-cover! bg-no-repeat!;
+
+    }
+  }
+}
+.pickr-container-primary,
+.pickr-container-background {
+  .pickr .pcr-button {
+    @apply h-8! w-8! overflow-hidden! rounded-full! border! border-solid! bg-primary! border-inputborder! -top-[4px]!  after:!text-white/70 after:!text-[1.25rem];
+    &:focus {
+      @apply shadow-none;
+    }
+  }
+}
+#hs-overlay-switcher .theme-colors .theme-container-primary button,
+#hs-overlay-switcher .theme-colors .theme-container-background button {
+  @apply hidden!;
+}
+
+.pickr-container-primary .pickr .pcr-button,
+.pickr-container-background .pickr .pcr-button {
+  @apply -top-[4px]! h-8! w-8! overflow-hidden! rounded-full! border! border-solid! bg-primary!;
+}
+.pickr-container-primary .pickr .pcr-button::after,
+.pickr-container-background .pickr .pcr-button::after {
+  @apply content-["\efc3"]! font-['remixicon']! text-white/70!;
+}

preview/assets/scss/tailwind/_pagination.scss

@@ -0,0 +1,121 @@
+
+    /* Start Pagination Styles */
+    .ti-pagination {
+        @apply flex items-center px-3 py-[0.375rem];
+
+        li {
+            .page-link {
+                @apply border text-defaulttextcolor text-[1rem] border-defaultborder dark:bg-transparent dark:border-defaultborder/10  dark:text-defaulttextcolor/70 dark:hover:border-defaultborder/10;
+                &.active {
+                    @apply bg-primary! text-white! dark:!text-defaulttextcolor/70 dark:!bg-primary ;
+                }
+                &.disabled {
+                    @apply  pointer-events-none text-gray-500 dark:bg-bodybg;
+                }
+                &:focus {
+                    @apply shadow-none bg-light;
+                }
+                &:hover {
+                    @apply text-primary bg-light border-defaultborder;
+                }
+            }
+
+            // &:not(:first-child) .page-link {
+            //     @apply ms-[calc(1px_*_-1)];
+            // }
+
+            &:first-child .page-link {
+                @apply rounded-s-md;
+            }
+
+            &:last-child .page-link {
+                @apply rounded-e-md;
+            }
+        }
+
+        &.pagination-sm {
+            li {
+                .page-link {
+                    @apply py-2 px-2 text-xs;
+                }
+
+                &:first-child .page-link {
+                    @apply rounded-s-md;
+                }
+
+                &:last-child .page-link {
+                    @apply rounded-e-md;
+                }
+            }
+        }
+
+        &.pagination-lg {
+            li {
+                .page-link {
+                    @apply py-3 sm:px-6 px-3 text-lg;
+                }
+
+                &:first-child .page-link {
+                    @apply rounded-s-md;
+                }
+
+                &:last-child .page-link {
+                    @apply rounded-e-md;
+                }
+            }
+        }
+    }
+    .pagination-style-1 {
+        .ti-pagination {
+            li {
+                @apply space-x-2 rtl:space-x-reverse;
+                .page-link {
+                    @apply border-0 rounded-md leading-none sm:px-3 px-3 py-[0.375rem] dark:bg-bodybg;
+                }
+            }
+        }
+    }
+    .pagination-style-2 {
+        .ti-pagination {
+            li {
+                @apply space-x-2 rtl:space-x-reverse border-0;
+                &.active {
+                .page-link {
+                  @apply border-0! bg-white!  rounded-md! leading-none! sm:!px-3 py-[0.375rem]! dark:!bg-bodybg
+                         text-primary! relative! font-bold!  before:!absolute before:!h-[0.1rem] before:!w-full before:!inset-x-0 before:!bottom-[-7px] before:!bg-primary;
+                    }
+                }
+            }
+        }
+    }
+    .pagination-style-3 {
+        .ti-pagination {
+            li {
+                @apply space-x-2 rtl:space-x-reverse;
+                .page-link {
+                    @apply border-0! rounded-full! leading-none! px-3! py-[0.375rem]!;
+                }
+            }
+        }
+    }
+    .pagination-style-4{
+        .ti-pagination {
+            li {
+                @apply space-x-2! rtl:!space-x-reverse text-[.8125rem]! ;
+                .page-link {
+                    @apply border-0 rounded-md leading-none px-3 py-[0.375rem] ;
+                    &.active {
+                    @apply  bg-primary! text-white!;
+                    .page-link{
+                        @apply hover:!bg-primary hover:!text-white;
+                    }
+
+                    }
+                }
+
+            }
+
+        }
+
+    }
+    /* End Pagination Styles */

preview/assets/scss/tailwind/_progress.scss

@@ -0,0 +1,177 @@
+.progress {
+  @apply bg-light h-[0.75rem] rounded-sm flex w-full;
+}
+/* Start:: progressbar-height */
+.progress,
+.progress-stacked {
+  &.progress-xs {
+    @apply h-[0.3125rem];
+  }
+  &.progress-sm {
+    @apply h-[0.5rem];
+  }
+  &.progress-lg {
+    @apply h-[1rem];
+  }
+  &.progress-xl {
+    @apply h-[1.25rem];
+  }
+}
+/* End:: progressbar-height */
+.progress-stacked {
+  @apply bg-light;
+}
+.progress-bar {
+  @apply text-white bg-primary flex justify-center items-center rounded-s-full;
+}
+
+// @keyframes progress-animate {
+//   0% {
+//     @apply w-0;
+//   }
+// }
+.progress-animate {
+  @apply relative rounded-[0.625rem];
+  .progress-bar {
+    @apply relative rounded-[0.625rem];
+  }
+}
+
+/* Start:: custom-progress */
+.progress-custom {
+  @apply overflow-visible relative;
+  .progress-bar {
+    @apply relative overflow-visible after:w-[1.15rem] after:h-[1.15rem] after:rounded-[50%] after:bg-white after:absolute after:-end-[0.375rem]
+        after:-top-[0.375rem] after:border-[0.25rem] after:border-solid after:border-primary;
+    &.progress-secondary {
+      @apply bg-secondary! after:!border-secondary;
+      .progress-bar-value {
+        @apply after:border-t-secondary;
+      }
+    }
+    &.progress-warning {
+      @apply bg-warning! after:!border-warning;
+      .progress-bar-value {
+        @apply after:border-t-warning;
+      }
+    }
+    &.progress-info {
+      @apply bg-info! after:!border-info;
+      .progress-bar-value {
+        @apply after:border-t-info;
+      }
+    }
+    &.progress-success {
+      @apply bg-success! after:!border-success;
+      .progress-bar-value {
+        @apply after:border-t-success;
+      }
+    }
+    &.progress-danger {
+      @apply bg-danger! after:!border-danger;
+      .progress-bar-value {
+        @apply after:border-t-danger;
+      }
+    }
+  }
+  .progress-bar-value {
+    @apply w-[1.875rem] h-[1.25rem] leading-[1.25rem] rounded-[.188rem] bg-primary shadow-[0_0.313rem_0.313rem_rgba(0,0,0,.4)] dark:shadow-[rgba(255,255,255,.4)] text-[.625rem] font-semibold text-white text-center absolute bottom-6 end-[-0.688rem]
+    after:absolute after:border-x-[0.438rem] after:border-x-transparent after:border-t-[0.438rem] after:border-primary after:bottom-[-0.375rem] after:start-[28%];
+  }
+}
+.progress-bar-title {
+  @apply py-[0.313rem] px-[0.625rem] m-0 bg-primary rounded-s-sm text-[0.625rem] font-semibold text-white uppercase absolute -top-[0.438rem] start-0 z-[1]
+    after:absolute  after:top-0 after:-end-[1.063rem] after:border-t-[.8rem] after:border-b-[.85rem] after:border-transparent after:border-s-[1.063rem] after:border-solid after:border-s-primary;
+
+}
+/* Start:: custom-progress-2 */
+.progress-item-1,
+.progress-item-2,
+.progress-item-3 {
+  @apply absolute -mt-1 z-[1] h-[0.938rem] w-[0.98rem] rounded-[1.563rem] bg-light;
+}
+.progress-item-1 {
+  @apply start-[25%];
+}
+.progress-item-2 {
+  @apply start-[50%];
+}
+.progress-item-3 {
+  @apply start-[75%];
+}
+/* End:: custom-progress-2 */
+/* Start:: custom-progress-3 */
+.custom-progress-3 {
+  @apply visible rounded-[0.625rem];
+  .progress-bar {
+    @apply relative visible m-[0.313rem] rounded-sm
+        before:absolute before:w-1 before:h-1 before:start-[0.125rem] before:bg-white before:rounded-md;
+    .progress-bar-value {
+      @apply border-[0.125rem] border-solid border-primary w-[2.5rem] h-[1.563rem] leading-[1.563rem] rounded-[3.125rem] bg-white dark:bg-bodybg text-[0.625rem] font-semibold
+            text-primary text-center absolute -end-[0.625rem];
+      &.primary {
+        @apply border-[0.125rem] border-solid border-primary text-primary;
+      }
+      &.secondary {
+        @apply border-[0.125rem] border-solid border-secondary text-secondary;
+      }
+      &.warning {
+        @apply border-[0.125rem] border-solid border-warning text-warning;
+      }
+      &.info {
+        @apply border-[0.125rem] border-solid border-info text-info;
+      }
+      &.success {
+        @apply border-[0.125rem] border-solid border-success text-success;
+      }
+      &.danger {
+        @apply border-[0.125rem] border-solid border-danger text-danger;
+      }
+    }
+  }
+}
+/* End:: custom-progress-3 */
+
+/* Start:: custom-progress-4 */
+.custom-progress-4 {
+  &.progress {
+    @apply bg-primary/10 rounded-sm;
+    &.secondary {
+      @apply bg-secondary/10;
+      .progress-bar-label {
+        @apply text-secondary;
+      }
+    }
+    &.warning {
+      @apply bg-warning/10;
+      .progress-bar-label {
+        @apply text-warning;
+      }
+    }
+    &.info {
+      @apply bg-info/10;
+      .progress-bar-label {
+        @apply text-info;
+      }
+    }
+    &.success {
+      @apply bg-success/10;
+      .progress-bar-label {
+        @apply text-success;
+      }
+    }
+    &.danger {
+      @apply bg-danger/10;
+      .progress-bar-label {
+        @apply text-danger;
+      }
+    }
+    .progress-bar {
+      @apply rounded-sm;
+    }
+    .progress-bar-label {
+      @apply absolute end-[0.313rem] font-semibold text-[0.813rem] text-primary;
+    }
+  }
+}
+/* End:: custom-progress-4 */

preview/assets/scss/tailwind/_tables.scss

@@ -0,0 +1,513 @@
+/* Start Table Styles */
+// .table {
+//   @apply dark:!text-defaulttextcolor/70 ;
+// }
+.table {
+  @apply text-defaulttextcolor rounded-md mb-0 text-start;
+
+  tr {
+    @apply dark:border-defaultborder/10;
+  }
+
+  tbody {
+    tr {
+      th {
+        @apply font-medium;
+      }
+    }
+  }
+
+  th,
+  td {
+    @apply p-[0.75rem] align-middle leading-[1.462] text-[0.813rem] font-medium text-start;
+  }
+
+  thead tr th {
+    @apply font-semibold text-[0.85rem];
+  }
+
+  &.table-sm> :not(caption)>*>* {
+    @apply p-[0.3rem];
+  }
+
+  &.table-dark {
+    @apply text-white/70 border-white/10 dark:border-black/[0.025];
+  }
+
+  &.table-primary {
+    @apply text-primary/70 border-primary/10;
+  }
+
+  &.table-bordered {
+    &.table-bordered-primary {
+
+      tbody,
+      td,
+      tfoot,
+      th,
+      thead,
+      tr {
+        @apply border-primary/30!;
+      }
+    }
+
+    &.table-bordered-info {
+
+      tbody,
+      td,
+      tfoot,
+      th,
+      thead,
+      tr {
+        @apply border-info/30;
+      }
+    }
+
+    &.table-bordered-secondary {
+
+      tbody,
+      td,
+      tfoot,
+      th,
+      thead,
+      tr {
+        @apply border-secondary/30;
+      }
+    }
+
+    &.table-bordered-warning {
+
+      tbody,
+      td,
+      tfoot,
+      th,
+      thead,
+      tr {
+        @apply border-warning/30;
+      }
+    }
+
+    &.table-bordered-success {
+
+      tbody,
+      td,
+      tfoot,
+      th,
+      thead,
+      tr {
+        @apply border-success/30;
+      }
+    }
+
+    &.table-bordered-danger {
+
+      tbody,
+      td,
+      tfoot,
+      th,
+      thead,
+      tr {
+        @apply border-danger/30;
+      }
+    }
+  }
+
+  &.table-striped>tbody>tr:nth-of-type(odd)>* {
+    @apply text-defaulttextcolor;
+  }
+
+  &.table-striped-columns> :not(caption)>tr> :nth-child(2n) {
+    @apply text-defaulttextcolor;
+  }
+
+  tbody.table-group-divider {
+    @apply border-t border-solid rounded-md;
+  }
+
+  &.table-hover>tbody>tr:hover>* {
+    @apply text-defaulttextcolor;
+  }
+
+  .table-active {
+    @apply text-defaulttextcolor;
+  }
+}
+
+.ti-custom-table-head {
+  @apply divide-y divide-gray-200 dark:divide-white/10;
+}
+
+.table-responsive,
+.table {
+  @apply overflow-y-visible!;
+}
+
+.table-responsive {
+  @apply block w-full overflow-x-auto;
+}
+
+.table-responsive {
+  @apply overflow-x-auto;
+}
+
+.ti-custom-table {
+  @apply min-w-full;
+
+  th {
+    @apply px-6 py-2 text-start leading-[1.462] font-semibold text-xs uppercase bg-gray-50 dark:bg-black/20 dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-gray-200 dark:divide-white/10;
+  }
+
+  td {
+    @apply px-6 py-4 whitespace-nowrap text-sm dark:text-gray-200 font-medium;
+  }
+}
+
+.ti-striped-table {
+  tbody {
+    tr {
+      @apply odd:bg-white even:bg-gray-100 dark:odd:dark:bg-bodybg dark:even:bg-black/20;
+    }
+  }
+}
+
+.ti-custom-table-hover {
+  tbody {
+    tr {
+      @apply hover:bg-gray-100 dark:hover:bg-light;
+    }
+  }
+}
+
+.table-bordered {
+  @apply border  border-defaultborder dark:border-defaultborder/10;
+
+  tr {
+    @apply divide-x  divide-gray-200 dark:divide-white/10;
+  }
+}
+
+.table-bordered-primary {
+  @apply border border-primary/30 dark:border-primary/30;
+
+  .ti-custom-table-head {
+    @apply divide-y divide-primary/30 dark:divide-primary/30;
+  }
+
+  tbody {
+    @apply divide-y divide-primary/30 dark:divide-primary/30;
+  }
+
+  tr {
+    @apply divide-x  divide-primary/30 dark:divide-primary/30;
+  }
+}
+
+.table-bordered-secondary {
+  @apply border border-secondary/30 dark:border-secondary/30;
+
+  .ti-custom-table-head {
+    @apply divide-y divide-secondary/30 dark:divide-secondary/30;
+  }
+
+  tbody {
+    @apply divide-y divide-secondary/30 dark:divide-secondary/30;
+  }
+
+  tr {
+    @apply divide-x  divide-secondary/30 dark:divide-secondary/30;
+  }
+}
+
+.table-bordered-warning {
+  @apply border border-warning/30 dark:border-warning/30;
+
+  .ti-custom-table-head {
+    @apply divide-y divide-warning/30 dark:divide-warning/30;
+  }
+
+  tbody {
+    @apply divide-y divide-warning/30 dark:divide-warning/30;
+  }
+
+  tr {
+    @apply divide-x  divide-warning/30 dark:divide-warning/30;
+  }
+}
+
+.table-bordered-danger {
+  @apply border border-danger/30 dark:border-danger/30;
+
+  .ti-custom-table-head {
+    @apply divide-y divide-danger/30 dark:divide-danger/30;
+  }
+
+  tbody {
+    @apply divide-y divide-danger/30 dark:divide-danger/30;
+  }
+
+  tr {
+    @apply divide-x  divide-danger/30 dark:divide-danger/30;
+  }
+}
+
+.table-bordered-info {
+  @apply border border-info/30 dark:border-info/30;
+
+  .ti-custom-table-head {
+    @apply divide-y divide-info/30 dark:divide-info/30;
+  }
+
+  tbody {
+    @apply divide-y divide-info/30 dark:divide-info/30;
+  }
+
+  tr {
+    @apply divide-x  divide-info/30 dark:divide-info/30;
+  }
+}
+
+.table-bordered-success {
+  @apply border border-success/30 dark:border-success/30;
+
+  .ti-custom-table-head {
+    @apply divide-y divide-success/30 dark:divide-success/30;
+  }
+
+  tbody {
+    @apply divide-y divide-success/30 dark:divide-success/30;
+  }
+
+  tr {
+    @apply divide-x  divide-success/30 dark:divide-success/30;
+  }
+}
+
+.table-primary {
+  @apply bg-primary/10;
+
+  th {
+    @apply text-black dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-primary/10 dark:divide-primary/10;
+  }
+
+  td {
+    @apply text-gray-800 dark:text-gray-200;
+  }
+
+  tr {
+    @apply divide-x  divide-primary/10 dark:divide-primary/10;
+  }
+
+  .ti-custom-table-head {
+    @apply divide-y divide-primary/10 dark:divide-primary/10;
+  }
+}
+
+.table-dark {
+  @apply bg-black/10 dark:bg-bodybg2;
+
+  th {
+    @apply text-black dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-black/10 dark:divide-black/[0.025];
+  }
+
+  td {
+    @apply text-black dark:text-white;
+  }
+
+  tr {
+    @apply divide-x  divide-black/10 dark:divide-black/[0.025];
+  }
+
+  .ti-custom-table-head {
+    @apply divide-y divide-black/10 dark:divide-black/[0.025];
+  }
+}
+
+.table-secondary {
+  @apply bg-secondary/10;
+
+  th {
+    @apply text-black dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-secondary/10 dark:divide-secondary/10;
+  }
+
+  td {
+    @apply text-gray-800 dark:text-gray-200;
+  }
+
+  tr {
+    @apply divide-x  divide-secondary/10 dark:divide-secondary/10;
+  }
+
+  .ti-custom-table-head {
+    @apply divide-y divide-secondary/10 dark:divide-secondary/10;
+  }
+}
+
+.table-warning {
+  @apply bg-warning/10;
+
+  th {
+    @apply text-black dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-warning/10 dark:divide-warning/10;
+  }
+
+  td {
+    @apply text-gray-800 dark:text-gray-200;
+  }
+
+  tr {
+    @apply divide-x  divide-warning/10 dark:divide-warning/10;
+  }
+
+  .ti-custom-table-head {
+    @apply divide-y divide-warning/10 dark:divide-warning/10;
+  }
+}
+
+.table-info {
+  @apply bg-info/10;
+
+  th {
+    @apply text-black dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-info/10 dark:divide-info/10;
+  }
+
+  td {
+    @apply text-gray-800 dark:text-gray-200;
+  }
+
+  tr {
+    @apply divide-x  divide-info/10 dark:divide-info/10;
+  }
+
+  .ti-custom-table-head {
+    @apply divide-y divide-info/10 dark:divide-info/10;
+  }
+}
+
+.table-danger {
+  @apply bg-danger/10;
+
+  th {
+    @apply text-black dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-danger/10 dark:divide-danger/10;
+  }
+
+  td {
+    @apply text-gray-800 dark:text-gray-200;
+  }
+
+  tr {
+    @apply divide-x  divide-danger/10 dark:divide-danger/10;
+  }
+
+  .ti-custom-table-head {
+    @apply divide-y divide-danger/10 dark:divide-danger/10;
+  }
+}
+
+.table-success {
+  @apply bg-success/10;
+
+  th {
+    @apply text-black dark:text-white;
+  }
+
+  tbody {
+    @apply divide-y divide-success/10 dark:divide-success/10;
+  }
+
+  td {
+    @apply text-gray-800 dark:text-gray-200;
+  }
+
+  tr {
+    @apply divide-x  divide-success/10 dark:divide-success/10;
+  }
+
+  .ti-custom-table-head {
+    @apply divide-y divide-success/10 dark:divide-success/10;
+  }
+}
+
+.ti-head-primary {
+  th {
+    @apply bg-primary/20 dark:bg-primary/20;
+  }
+}
+
+.ti-head-secondary {
+  th {
+    @apply bg-secondary/20 dark:bg-secondary/20;
+  }
+}
+
+.ti-head-warning {
+  th {
+    @apply bg-warning/20 dark:bg-warning/20;
+  }
+}
+
+.ti-head-success {
+  th {
+    @apply bg-success/20 dark:bg-success/20;
+  }
+}
+
+.ti-head-info {
+  th {
+    @apply bg-info/20 dark:bg-info/20;
+  }
+}
+
+.ti-head-danger {
+  th {
+    @apply bg-danger/20 dark:bg-danger/20;
+  }
+}
+
+.table-striped>tbody>tr:nth-of-type(odd)>* {
+  @apply bg-black/[0.0125] text-defaulttextcolor;
+}
+
+.table-striped-columns> :not(caption)>tr> :nth-child(2n) {
+  @apply text-defaulttextcolor bg-[var(--color-light)];
+}
+
+.table.table-success.table-striped>tbody>tr:nth-of-type(odd)>* {
+  @apply bg-success/20;
+}
+
+caption {
+  @apply text-textmuted pt-2 pb-2 text-start;
+}
+
+.table-active {
+  @apply bg-light;
+}
+
+/* End Table Styles */

preview/assets/scss/tailwind/_toast.scss

@@ -0,0 +1,36 @@
+.toast-container {
+  @apply z-[1090]  max-w-full pointer-events-none;
+}
+.toast {
+  @apply bg-white border border-solid border-defaultborder shadow-sm rounded-md;
+  .toast-header {
+    @apply bg-light py-[0.375rem] px-3 flex items-center;
+    img {
+      @apply w-[1.25rem] h-[1.25rem];
+    }
+  }
+  .toast-header {
+    @apply border-b border-solid border-defaultborder;
+    .btn-close {
+      @apply me-[0.125rem] p-3;
+    }
+  }
+  .toast-body {
+    @apply text-[0.8rem] p-3;
+  }
+  .btn-close {
+    @apply text-[0.563rem];
+  }
+  &.colored-toast {
+    @apply border-0! backdrop-blur-[20px]!;
+    .btn-close {
+      @apply invert-[1];
+    }
+    .toast-header {
+      @apply border-b border-solid border-black/10;
+    }
+  }
+}
+.bd-example-toasts {
+  @apply min-h-[15rem];
+}

preview/assets/scss/tailwind/_tooltip.scss

@@ -0,0 +1,12 @@
+
+    /* Start Tooltip Styles */
+    .ti-main-tooltip {
+        @apply inline-block relative;
+        .ti-main-tooltip-toggle {
+            @apply block text-center;
+        }
+    }
+    .ti-main-tooltip-content {
+        @apply leading-4 hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-50 py-2 px-4 bg-white  text-sm text-gray-600 rounded-md shadow-md dark:bg-gray-900  dark:text-white/70;
+    }
+    /* End Tooltip Styles */