@indice/ng-components 0.2.167-beta.9 → 0.2.168

package/{_styles.css → _styles.scss}

@@ -1,4 +1,48 @@
-@layer components {
+@tailwind base;
+
+@layer base {
+  h1 {
+    @apply text-2xl;
+  }
+
+  h2 {
+    @apply text-xl;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+
+  a {
+    @apply text-gray-600;
+  }
+
+  select {
+    @apply max-w-lg block focus:ring-gray-300 ring-opacity-25 focus:border-gray-300 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-200 rounded-sm;
+  }
+
+  input[type=text] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=password] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=email] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  input[type=number] {
+    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
+  }
+
+  textarea {
+    @apply shadow-sm focus:ring-gray-500 focus:border-gray-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm;
+  }
+}
+
+
 
   .avatar-container {
     @apply inline-flex items-center justify-center h-8 w-8 rounded-full ;
@@ -15,7 +59,7 @@
   .avatar-text-large {
     @apply text-xl font-medium leading-none text-white;
   }
-}
+
 
 .circle {
   display: flex;
@@ -36,7 +80,7 @@
   letter-spacing: 0.2625px;
 }
 
-@layer components {
+
   .toggle-button {
     @apply mt-3 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
   }
@@ -60,8 +104,7 @@
   .disabled-anim {
     @apply translate-x-0
   }
-}
-  
+
 .modal-open {
   overflow: hidden;
 }
@@ -220,7 +263,7 @@
 
 /*# sourceMappingURL=styles.css.map*/
 
-@layer components {
+
     .tab-group-select-hidden {
         @apply sm:hidden;
     }
@@ -248,9 +291,9 @@
     .tab-group-container {
         @apply border-b border-gray-200;
     }
-}
 
-@layer components {
+
+
     .shell-sidebar-container-fixed {
         @apply fixed w-0 sm:w-64 flex-col inset-y-0 bg-gray-800;
     }
@@ -278,19 +321,14 @@
     .shell-sidebar-component-container {
         @apply flex w-full flex-col h-full min-h-0 bg-gray-800;
     }
-
-    .shell-sidebar-component-container-inner {
-        @apply flex items-center h-16 flex-shrink-0 px-4 bg-gray-900;
-    }
-    
+   
     .shell-sidebar-component-links-container {
-        @apply pt-4 px-2;
+        @apply pt-4;
     }
 
-}
 @layer components {
 }
-@layer components {
+
 
   .sidebar-off-canvas-menu-container {
     @apply relative z-40 md:hidden;
@@ -331,9 +369,13 @@
     @apply absolute top-0 right-0 -mr-12 pt-2;
   }
 
+  
+
   .sidebar-off-canvas-toggle-button {
     @apply ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none;
   }
+
+  
   
   .sidebar-off-canvas-app-logo-container {
     @apply flex-shrink-0 flex items-center px-4;
@@ -343,6 +385,7 @@
     @apply flex-shrink-0 w-14;
   }
 
+  /* in mobile view the static menu container is always hidden - off-canvas container is visible */
   .sidebar-static-menu-outer-container {
     @apply hidden md:flex;
   }
@@ -356,15 +399,15 @@
   }
 
   .sidebar-static-menu-container-not-active {
-    @apply hidden;
+    @apply flex w-20;
   }
 
   .sidebar-static-menu-container-inner {
-    @apply flex-1 flex flex-col min-h-0 bg-gray-800 shadow-lg;
+    @apply flex-1 flex items-center flex-col min-h-0 bg-gray-800 shadow-lg;
   }
 
   .sidebar-static-menu-app-logo-container {
-    @apply flex items-center h-16 flex-shrink-0 px-4 bg-gray-900;
+    @apply flex items-center h-16 flex-shrink-0;
   }
 
   .sidebar-static-menu-header-app-logo-container {
@@ -373,25 +416,31 @@
 
   /* !!!! malakai onoma !!!! */
   .sidebar-static-menu-wrapper {
-    @apply flex flex-col;
+    @apply flex flex-col md:pl-20;
   }
 
-  .sidebar-static-menu-wrapper-active {
-    @apply sm:pl-64;
+  .sidebar-static-menu-wrapper-expanded {
+    @apply md:pl-64;
   }
 
   .sidebar-static-menu-sticky-header-container {
-    @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-900 shadow;
+    @apply sticky top-0 z-10 flex-shrink-0 flex h-16 bg-gray-900 shadow-2xl;
   }
 
   .sidebar-static-menu-toggle-button {
-    @apply px-4 text-white bg-gray-800 focus:outline-none;
+    @apply px-4 text-white focus:outline-none;
+  }
+
+  .sidebar-static-menu-toggle-button-md {
+    @apply px-4 text-white focus:outline-none md:hidden;
   }
 
   .sidebar-static-menu-header-container {
     @apply flex-1 px-4 flex justify-between;
   }
 
+  /* fix names  */
+
   .sidebar-static-menu-header-near-container  {
     @apply flex-1 flex;
   }
@@ -400,13 +449,10 @@
     @apply ml-4 flex items-center md:ml-6;
   }
 
-}
 
 
 
 
-@layer components {
-
   .notifications-nav-link {
     @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;
   }
@@ -435,7 +481,7 @@
   .notification-messages::-webkit-scrollbar-thumb {
     @apply bg-gray-600 hover:bg-gray-700;
   }
-}
+
 
 .notification-messages::-webkit-scrollbar {
   width: 7px;
@@ -444,57 +490,8 @@
   cursor: pointer;
   /* or add it to the track */
 }
-/*** IMPORTED FILE NOT FOUND ***/
-@import 'tailwindcss/base';/*** --- ***/
-/*** IMPORTED FILE NOT FOUND ***/
-@import 'tailwindcss/components';/*** --- ***/
-/*** IMPORTED FILE NOT FOUND ***/
-@import 'tailwindcss/utilities';/*** --- ***/
 
-@layer base {
-  h1 {
-    @apply text-2xl;
-  }
 
-  h2 {
-    @apply text-xl;
-  }
-
-  h3 {
-    @apply text-lg;
-  }
-
-  a {
-    @apply text-gray-600;
-  }
-
-  select {
-    @apply max-w-lg block focus:ring-gray-300 ring-opacity-25 focus:border-gray-300 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-200 rounded-sm;
-  }
-
-  input[type=text] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  input[type=password] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  input[type=email] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  input[type=number] {
-    @apply focus:ring-gray-500 focus:border-gray-300 ring-opacity-25 flex-1 block w-full rounded-none sm:text-sm border-gray-200;
-  }
-
-  textarea {
-    @apply shadow-sm focus:ring-gray-500 focus:border-gray-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm;
-  }
-
-}
-
-@layer components {
   .card-deck-busy{
     @apply animate-pulse;
   }
@@ -564,9 +561,8 @@
   .gallery-deck-4 {
     @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8 p-4;
   }
-}
 
-@layer components {
+
   .collapsible-panel-container {
     @apply bg-white border border-gray-200 mb-2;
   }
@@ -590,9 +586,8 @@
   .collapsible-panel-content-container {
     @apply relative overflow-hidden transition-all duration-700;
   }
-}
 
-@layer components {
+
 
   .md-visible {
     @apply hidden md:block;
@@ -608,12 +603,12 @@
 
 
   .btn-view-header {
-    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-900;
+    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-white transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800;
   }
 
 
   .sidebar .btn-view-header {
-    @apply text-base focus:outline-none inline-flex items-center justify-center w-10 h-10 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-900 hover:text-white;
+    @apply text-base focus:outline-none inline-flex items-center justify-center h-8 text-gray-900 transition-colors duration-150 rounded-md hover:shadow-sm hover:bg-gray-800 hover:text-white;
   }
 
   .btn-form-view-header {
@@ -628,10 +623,8 @@
     @apply absolute top-0 right-0 block ml-2 h-1.5 w-1.5 rounded-full ring-1 ring-white bg-blue-300;
   }
 
-}
 
 
-@layer components {
     .datepicker-input {
         @apply w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300 focus:border-transparent;
     }
@@ -695,9 +688,8 @@
     .datepicker-days.out-of-range{
         @apply cursor-not-allowed opacity-25;
     }
-}
 
-@layer components {
+
   .dropdown-container {
     @apply relative w-auto;
   }
@@ -708,11 +700,11 @@
   }
 
   .dropdown-selected-text {
-    @apply block truncate;
+    @apply truncate inline-flex items-center;
   }
 
   .dropdown-button-icon {
-    @apply absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none;
+    @apply absolute inset-y-0 right-0 flex items-center pointer-events-none;
   }
 
   .dropdown-arrow {
@@ -732,11 +724,11 @@
   }
 
   .dropdown-li-text {
-    @apply font-normal block truncate;
+    @apply font-normal truncate inline-flex items-center ;
   }
 
   .dropdown-li-selected-text {
-    @apply font-semibold block truncate;
+    @apply font-semibold truncate inline-flex items-center ;
   }
 
   .dropdown-li-selected-indicator-container {
@@ -746,9 +738,8 @@
   .dropdown-li-selected-indicator {
     @apply h-5 w-5;
   }
-}
 
-@layer components {
+
   .form-layout-container {
     @apply bg-white shadow-sm border border-gray-200 rounded-sm;
   }
@@ -796,7 +787,6 @@
   .form-actions {
     @apply px-4 py-3 bg-gray-100 text-gray-700 text-right sm:px-6 flex justify-end;
   }
-}
 
 /*
   Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
@@ -3085,7 +3075,7 @@
 .ms-Icon--ZoomOut:before { content: "\E71F"; }
 .ms-Icon--ZoomToFit:before { content: "\F649"; }
 
-@layer components {
+
   .list-view-container {
     @apply flex flex-col border border-gray-200;
   }
@@ -3148,167 +3138,8 @@
 
   .expand-collapse-button {
     @apply inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-100;  }
-}
-
-.modal-open {
-  overflow: hidden;
-}
-.modal-open .modal {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1050;
-  display: none;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  outline: 0;
-}
-.modal-dialog {
-  position: relative;
-  width: auto;
-  margin: 0.5rem;
-  pointer-events: none;
-}
-.modal.fade .modal-dialog {
-  transition: transform 0.3s ease-out;
-  transform: translate(0, -50px);
-}
-
-.fade {
-  transition: opacity 0.15s linear;
-}
-.fade:not(.show) {
-  opacity: 0;
-}
-@media (prefers-reduced-motion: reduce) {
-  .modal.fade .modal-dialog {
-    transition: none;
-  }
-}
-.modal.show .modal-dialog {
-  transform: none;
-}
-.modal.modal-static .modal-dialog {
-  transform: scale(1.02);
-}
-.modal-dialog-scrollable {
-  display: flex;
-  max-height: subtract(100%, 1rem);
-}
-.modal-dialog-scrollable .modal-content {
-  max-height: subtract(100vh, 1rem);
-  overflow: hidden;
-}
-.modal-dialog-scrollable .modal-header,
-.modal-dialog-scrollable .modal-footer {
-  flex-shrink: 0;
-}
-.modal-dialog-scrollable .modal-body {
-  overflow-y: auto;
-}
-.modal-dialog-centered {
-  display: flex;
-  align-items: center;
-  min-height: subtract(100%, 1rem);
-}
-.modal-dialog-centered::before {
-  display: block;
-  height: subtract(100vh, 1rem);
-  height: -webkit-min-content;
-  height: min-content;
-  content: "";
-}
-.modal-dialog-centered.modal-dialog-scrollable {
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-}
-.modal-dialog-centered.modal-dialog-scrollable .modal-content {
-  max-height: none;
-}
-.modal-dialog-centered.modal-dialog-scrollable::before {
-  content: none;
-}
-.modal-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  pointer-events: auto;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.3rem;
-  outline: 0;
-}
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1040;
-  width: 100vw;
-  height: 100vh;
-  background-color: #000;
-}
-.modal-backdrop.fade {
-  opacity: 0;
-}
-.modal-backdrop.show {
-  opacity: 0.5;
-}
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-@media (min-width: 576px) {
-  .modal-dialog {
-    max-width: 500px;
-    margin: 1.75rem auto;
-  }
-
-  .modal-dialog-scrollable {
-    max-height: subtract(100%, 3.5rem);
-  }
-  .modal-dialog-scrollable .modal-content {
-    max-height: subtract(100vh, 3.5rem);
-  }
 
-  .modal-dialog-centered {
-    min-height: subtract(100%, 3.5rem);
-  }
-  .modal-dialog-centered::before {
-    height: subtract(100vh, 3.5rem);
-    height: -webkit-min-content;
-    height: min-content;
-  }
 
-  .modal-sm {
-    max-width: 300px;
-  }
-}
-@media (min-width: 992px) {
-  .modal-lg,
-  .modal-xl {
-    max-width: 800px;
-  }
-}
-@media (min-width: 1200px) {
-  .modal-xl {
-    max-width: 1140px;
-  }
-}
-
-/*# sourceMappingURL=styles.css.map*/
-
-@layer components {
   .model-view-container {
     @apply mt-5 min-w-full min-h-screen;
   }
@@ -3318,7 +3149,7 @@
   }
 
   .model-view-aside {
-    @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-4 md:col-span-3;
+    @apply py-6 px-2 sm:px-6 lg:py-0 lg:px-0 md:col-span-3;
   }
 
   .model-view-aside-header-section {
@@ -3352,9 +3183,8 @@
   .model-view-details-container {
     @apply sm:px-6 lg:px-2 lg:col-span-8 md:col-span-9;
   }
-}
 
-@layer components {
+
 
   .nav-link {
     @apply cursor-pointer text-white hover:bg-gray-700 hover:text-white hover:shadow-sm px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
@@ -3377,7 +3207,11 @@
   }
 
   .sidebar .nav-link-list-container-inner {
-    @apply flex-1 px-2 py-4 space-y-1;
+    @apply flex-1 px-2 py-4 space-y-2;
+  }
+
+  .sidebar .nav-link-list-container-inner .icons-only {
+    @apply flex-1 px-2 py-4 space-y-4;
   }
 
   .nav-link-active {
@@ -3388,6 +3222,14 @@
     @apply cursor-default bg-gray-900 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
   }
 
+  .sidebar .nav-link-active-b {
+    @apply cursor-default bg-gray-900 border-b border-blue-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+  }
+
+  .sidebar .nav-link-active-l {
+    @apply cursor-default bg-gray-900 border-l border-blue-400 text-white flex items-center px-2 py-2 text-sm font-medium rounded-md;
+  }
+
   .nav-link-profile-active {
     @apply cursor-default block px-4 py-2 text-xs text-blue-300 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
@@ -3404,9 +3246,11 @@
     @apply cursor-default bg-gray-50 border-gray-600 text-gray-900 border-l-4 py-2 px-3 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
-}
+  .min-nav-link-text-width {
+    width: 220px;
+  }
+
 
-@layer components {
 
   .notifications-nav-link {
     @apply block py-3 pl-3 pr-2 text-xs text-gray-700 hover:bg-gray-50;
@@ -3436,7 +3280,7 @@
   .notification-messages::-webkit-scrollbar-thumb {
     @apply bg-gray-600 hover:bg-gray-700;
   }
-}
+
 
 .notification-messages::-webkit-scrollbar {
   width: 7px;
@@ -3445,37 +3289,40 @@
   cursor: pointer;
   /* or add it to the track */
 }
-@layer components {
+
   .pager-container {
-    @apply flex items-center justify-between mb-2;
+    @apply flex flex-col sm:flex-row mb-1 justify-start;
   }
 
-  .pager-container-inner {
-    @apply sm:flex-1 sm:flex sm:items-center sm:justify-between;
+  .pager-container-near {
+    @apply sm:flex-1 justify-start items-center mb-1 sm:mb-0;
+  }
+
+  .pager-container-far {
+    @apply justify-start flex-nowrap items-center;
   }
 
   .pager-icon-button {
-    @apply inline-flex relative ml-2 items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
+    @apply inline-flex relative ml-1 mr-2 items-center px-2 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50;
   }
 
   .pager-pages-container {
-    @apply relative z-30 inline-flex rounded-sm;
+    @apply relative inline-flex rounded-sm;
   }
 
   .pager-button {
-    @apply relative ml-2 inline-flex items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
+    @apply relative ml-1 inline-flex items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 hover:bg-gray-50;
   }
 
   .pager-arrow-button-left {
-    @apply hidden sm:inline-flex relative ml-2 items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
+    @apply inline-flex relative ml-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50;
   }
 
   .pager-arrow-button-right {
-    @apply hidden sm:inline-flex relative mr-2 items-center px-2 py-2 rounded-l-sm border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
+    @apply inline-flex relative mr-1 items-center px-1 py-2 rounded-l-sm text-sm font-medium text-gray-500 disabled:text-gray-300 disabled:hover:bg-none hover:bg-gray-50;
   }
-}
 
-@layer components {
+
 
   .advanced-search-container {
 
@@ -3521,9 +3368,8 @@
     @apply flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none focus:bg-gray-500 focus:text-white;
   }
 
-}
 
-@layer components {
+
 
   .app-logo {
     @apply h-8 w-8;
@@ -3554,7 +3400,7 @@
   }
 
   .shell-content-container {
-    @apply mx-auto -mt-28;
+    @apply mx-auto -mt-24;
   }
 
   .sidebar .shell-content-container {
@@ -3567,11 +3413,11 @@
   }
 
   .sidebar .shell-content-container-inner {
-    @apply max-w-full px-4 min-h-screen;
+    @apply max-w-full px-4 pb-2 min-h-screen;
   }
 
   .shell-content-container-inner {
-    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen;
+    @apply max-w-7xl mx-auto px-4 pb-2 sm:px-6 lg:px-8 min-h-screen;
   }
 
   .shell-content-container-inner-fluid {
@@ -3775,12 +3621,9 @@
   .shell-footer-copyright {
     @apply max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-8 lg:mt-12 border-t-2 border-gray-700 py-5;
   }
-}
 
 
 
-@layer components {
-
   .side-pane-outer-container {
     @apply fixed inset-0 overflow-hidden z-40;
   }
@@ -3824,9 +3667,8 @@
   .side-pane {
     @apply flex flex-col bg-white shadow-xl overflow-y-hidden;
   }
-}
 
-@layer components {
+
   .side-view-layout-size-box {
     @apply h-screen;
   }
@@ -3883,9 +3725,8 @@
     @apply ml-4 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-gray-500 cursor-not-allowed;
   }
 
-}
 
-@layer components {
+
     /* Bullets */
     .stepper-bullets-container {
         @apply flex items-center justify-center;
@@ -4055,8 +3896,7 @@
     .panels-with-border-upcoming-step-level222 {
         @apply text-sm font-medium text-gray-500;
     }
-}
-@layer components {
+
     .tab-group-select-hidden {
         @apply sm:hidden;
     }
@@ -4084,8 +3924,7 @@
     .tab-group-container {
         @apply border-b border-gray-200;
     }
-}
-@layer components {
+
   .toast {
     @apply fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start z-50;
     animation: move 400ms ease-in;
@@ -4156,9 +3995,8 @@
       opacity: 0;
     }
   }
-}
 
-@layer components {
+
   .toggle-button {
     @apply mt-3 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
   }
@@ -4182,12 +4020,11 @@
   .disabled-anim {
     @apply translate-x-0
   }
-}
-  
-@layer components {
+
+
 
   .view-container {
-    @apply mt-8 sm:mt-5 flex flex-col;
+    @apply mt-4 sm:mt-5 flex flex-col;
   }
 
   .view-container-fluid {
@@ -4195,17 +4032,25 @@
   }
 
   .view-layout-paddings {
-    @apply pt-6 pb-4 sm:py-6;
+    @apply py-4 sm:py-6;
+  }
+
+  .sidebar .view-layout-paddings {
+    @apply py-2 sm:py-4;
   }
 
   .view-layout-title-container {
-    @apply flex text-white flex-row justify-start ;
+    @apply flex text-white flex-col md:flex-row justify-start;
   }
 
   .view-layout-title-container-inner {
     @apply flex-1 min-w-0;
   }
 
+  .view-layout-title-container-far {
+    @apply flex items-center justify-start sm:justify-end;
+  }
+
   .title-icon {
     @apply text-2xl md:text-xl text-white font-thin mr-1;
   }
@@ -4231,15 +4076,15 @@
   }
 
   .meta-container {
-    @apply ml-1 mt-2 flex flex-row sm:flex-row sm:flex-wrap space-x-2 sm:space-x-4;
+    @apply mt-1 ml-1 hidden h-0 w-0 md:w-full md:flex md:flex-wrap opacity-75;
   }
-
+  
   .sidebar .meta-container {
     @apply text-gray-900;
   }
 
   .meta-item-container {
-    @apply flex items-center;
+    @apply flex items-center mr-2;
   }
 
   .meta-icon {
@@ -4251,15 +4096,22 @@
   }
 
   .search-container {
-    @apply relative text-gray-400 focus-within:text-gray-600 ml-2 hover:shadow-sm hover:bg-gray-900;
+    @apply relative inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 hover:shadow-sm border border-gray-200;
   }
 
+  /* .search-input {
+    @apply pl-10 pr-20 w-60 bg-gray-50 rounded-sm text-sm text-gray-900 border-gray-400 placeholder-gray-500 outline-none focus:shadow focus:outline-none z-0;
+  } */
+
   .search-input {
-    @apply block w-60 bg-gray-50 rounded-sm text-sm text-gray-900 placeholder-gray-500 outline-none;
+    @apply w-60 rounded-sm text-sm text-gray-900 pt-2 pl-2 pb-2 placeholder-gray-500 outline-none border-0 focus:outline-none focus:ring-0;
   }
-}
 
-@layer components {
+  .search-button {
+    @apply mr-1 text-xs focus:outline-none inline-flex items-center justify-center w-6 h-6 text-gray-800 hover:text-gray-900;
+  }
+
+
     .combobox-wrapper {
         @apply relative mt-1;
     }
@@ -4287,7 +4139,102 @@
     .combobox-selected-item-remove-btn {
         @apply cursor-pointer bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500;
     }
-}
+
+
+    .toggle-button-button {
+        @apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1;
+    }
+
+    .toggle-button-button-disabled {
+        @apply opacity-75;
+    }
+
+    .toggle-button-bg-false {
+        @apply bg-gray-200;
+    }
+
+    .toggle-button-bg-true {
+        @apply bg-gray-600;
+    }
+
+    .toggle-button-icon-container {
+        @apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
+    }
+
+    .toggle-button-icon-container-true {
+        @apply translate-x-5;
+    }
+
+    .toggle-button-icon-container-false {
+        @apply translate-x-0;
+    }
+
+    .toggle-button-icon-container-inner {
+        @apply opacity-100 ease-in duration-200 absolute inset-0 flex h-full w-full items-center justify-center transition-opacity;
+    }
+
+    .toggle-button-container-inner-true {
+        @apply opacity-0 ease-out duration-100;
+    }
+
+    .toggle-button-container-inner-false {
+        @apply opacity-100 ease-in duration-200;
+    }
+
+    .toggle-button-icon {
+        @apply h-3 w-3 text-gray-600;
+    }
+
+    .toggle-button-text {
+        @apply text-sm font-medium text-gray-900;
+    }
+
+    .toggle-button-description {
+        @apply text-xs mt-1 text-gray-500;
+    }
+
+
+    .toggle-buttons-list-container {
+        @apply relative items-center inline-flex;
+    }
+
+    .toggle-buttons-list-icon-container {
+        @apply flex-none mr-2;
+    }
+
+    .toggle-buttons-list-drop-down-contaner {
+        @apply block lg:hidden z-10;
+    }
+
+    /* mw-40 not supported*/
+    .toggle-buttons-list-drop-down {
+        @apply w-full;
+    }
+
+    .toggle-buttons-list {
+        @apply hidden lg:block;
+    }
+
+    .toggle-buttons-list-button {
+        @apply relative inline-flex items-center p-2 first:border-l first:rounded-l-sm last:rounded-r-sm border-t border-b border-r border-gray-300 bg-white text-xs text-gray-700 hover:text-gray-900 focus:z-10 focus:outline-none;
+    }
+
+    .toggle-buttons-list-button-selected {
+        @apply bg-gray-100;
+    }
+
+    .toggle-buttons-list-button-icon-container {
+        @apply flex-none mr-2;
+    }
+
+    .toggle-buttons-list-button-button-text {
+        @apply mr-2 block overflow-ellipsis overflow-hidden;
+    }
+
+    .toggle-buttons-list-button-button-count {
+       @apply ml-1.5 rounded py-0.5 px-1.5 bg-gray-200 text-xs text-gray-700 tabular-nums; 
+    }
+
 
 .modal-active {
   overflow: hidden;