@indice/ng-components 0.3.9 → 0.3.12-beta.0

package/_styles.scss

@@ -1,6 +1,22 @@
 @tailwind base;
 
 @layer base {
+  html {
+    scroll-behavior: smooth !important;
+  }
+  
+  input {
+    outline: none;
+  }
+  
+  input[type=number] {
+    outline: none;
+  }
+  
+  textarea {
+    outline: none;
+  }
+  
   h1 {
     @apply text-2xl;
   }
@@ -16,42 +32,13 @@
   a {
     @apply text-gray-600;
   }
-
-  select {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
-    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-  }
-
-  input[type=text] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
-    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-  }
-
-  input[type=password] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
-    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-  }
-
-  input[type=email] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
-    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-  }
-
-  input[type=number] {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
-    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-  }
-
-  textarea {
-    @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6
-    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-  }
+   
 }
 
 
 
   .avatar-container {
-    @apply inline-flex items-center justify-center h-8 w-8 rounded-full ;
+    @apply inline-flex items-center justify-center h-8 w-8 rounded-full overflow-hidden;
   }
 
   .avatar-container-large {
@@ -279,7 +266,7 @@
     }
 
     .tab-active {
-        @apply border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm;
+        @apply border-gray-500 text-gray-900 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm;
     }
 
     .tab {
@@ -477,11 +464,11 @@
   }
 
   .header-notifications-dropdown {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
   .header-notifications-dropdown-with-username {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
   .header-notifications-dropdown-view-all-button{
@@ -505,11 +492,11 @@
 }
 
 .langs-menu-expanded {
-    @apply transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply transition ease-out duration-200 origin-top-right z-30 absolute right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
 }
 
 .langs-menu-collapsed {
-    @apply hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply hidden transition ease-in duration-75 origin-top-right z-30 right-0 mt-2 w-56 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
 }
 
   .card-deck-busy{
@@ -533,7 +520,7 @@
   }
 
   .card {
-    @apply relative h-full border border-gray-200 bg-white shadow-sm rounded-sm overflow-hidden;
+    @apply relative h-full border border-gray-200 bg-gray-50 shadow-sm rounded-lg sm:rounded-3xl overflow-hidden;;
   }
 
   .card-body {
@@ -545,11 +532,11 @@
   }
 
   .card-header {
-    @apply inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 border-b border-gray-200;
+    @apply inset-x-0 px-4 py-6 sm:py-4 sm:px-6 border-b bg-white border-gray-200;
   }
 
   .card-footer {
-    @apply absolute bottom-0 inset-x-0 bg-gray-50 px-4 py-4 sm:px-6 border-t border-gray-200;
+    @apply absolute bottom-0 inset-x-0 bg-white px-4 py-4 sm:px-6 border-t border-gray-200;
   }
 
   .kpi-tile-title-container {
@@ -572,12 +559,10 @@
     @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 sm:gap-x-6 p-4;
   }
   
-
   .gallery-deck-3 {
     @apply grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 p-4;
   }
   
-
   .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;
   }
@@ -661,71 +646,74 @@
   }
 
 
+.datepicker-container {
+    @apply relative rounded-lg inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 border border-gray-300;
+}
 
-    .datepicker-input {
-        @apply block w-full rounded-sm border-0 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6 
-        disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
-    }
-    .datepicker-button {
-        @apply relative inline-flex items-center px-1.5 py-1.5 border-t border-b border-r border-gray-300 text-sm rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-0;
-    }
+.datepicker-input {
+    @apply w-full rounded-lg text-sm text-gray-900 pt-2 pl-2 pb-2 placeholder-gray-500 outline-none border-0 focus:outline-none focus:ring-0;
+}
 
-    .datepicker-background {
-        @apply bg-gray-100 mt-10 rounded-sm shadow-md p-4 left-0 z-50 w-full;
-    }
-    .datepicker-btn-wrapper {
-        @apply flex justify-between items-center mb-2;
-    }
+.datepicker-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;
+}
 
-    .datepicker-selected-month {
-        @apply text-lg font-bold text-gray-800;
-    }
-    .datepicker-selected-year {
-        @apply ml-1 text-lg text-gray-600 font-normal;
-    }
-    .datepicker-nav-btn {
-        @apply transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25;
-    }
-    .datepicker-nav-btn svg {
-        @apply h-6 w-6 text-gray-500 inline-flex;
-    }
-    .datepicker-wrapper {
-        @apply flex flex-wrap mb-3 -mx-1;
-    }
-    .datepicker-day-name {
-        @apply text-gray-800 font-medium text-center text-sm uppercase;
-    }
-    .datepicker-content-wrapper {
-        @apply flex flex-wrap -mx-1 items-center;
-    }
-    .datepicker-year {
-        @apply cursor-pointer text-center hover:text-white text-sm rounded-sm leading-loose transition ease-in-out duration-100;
-    }
-    .datepicker-year.selected {
-        @apply bg-gray-700 text-white font-medium;
-    }
-    .datepicker-year.not-selected {
-        @apply text-gray-800 hover:bg-gray-800;
-    }
+.datepicker-background {
+    @apply bg-gray-100 mt-10 rounded-lg shadow-md p-4 left-0 z-50 w-full;
+}
+.datepicker-btn-wrapper {
+    @apply flex justify-between items-center mb-2;
+}
 
-    .datepicker-blank-days {
-        @apply text-center border p-1 border-transparent text-sm opacity-50;
-    }
+.datepicker-selected-month {
+    @apply text-lg font-bold text-gray-800;
+}
+.datepicker-selected-year {
+    @apply ml-1 text-lg text-gray-600 font-normal;
+}
+.datepicker-nav-btn {
+    @apply transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25;
+}
+.datepicker-nav-btn svg {
+    @apply h-6 w-6 text-gray-500 inline-flex;
+}
+.datepicker-wrapper {
+    @apply flex flex-wrap mb-3 -mx-1;
+}
+.datepicker-day-name {
+    @apply text-gray-800 font-medium text-center text-sm uppercase;
+}
+.datepicker-content-wrapper {
+    @apply flex flex-wrap -mx-1 items-center;
+}
+.datepicker-year {
+    @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
+}
+.datepicker-year.selected {
+    @apply bg-gray-700 text-white font-medium;
+}
+.datepicker-year.not-selected {
+    @apply text-gray-800 hover:bg-gray-800;
+}
 
-    .datepicker-days {
-        @apply cursor-pointer text-center hover:text-white text-sm rounded-sm leading-loose transition ease-in-out duration-100;
-    }
+.datepicker-blank-days {
+    @apply text-center border p-1 border-transparent text-sm opacity-50;
+}
 
-    .datepicker-days.selected {
-        @apply bg-gray-700 text-white font-medium;
-    }
-    .datepicker-days.not-selected {
-        @apply text-gray-800 hover:bg-gray-800;
-    }
+.datepicker-days {
+    @apply cursor-pointer text-center hover:text-white text-sm rounded-md leading-loose transition ease-in-out duration-100;
+}
 
-    .datepicker-days.out-of-range{
-        @apply cursor-not-allowed opacity-25;
-    }
+.datepicker-days.selected {
+    @apply bg-gray-700 text-white font-medium;
+}
+.datepicker-days.not-selected {
+    @apply text-gray-800 hover:bg-gray-800;
+}
+
+.datepicker-days.out-of-range{
+    @apply cursor-not-allowed opacity-25;
+}
 
 
   .dropdown-container {
@@ -733,8 +721,8 @@
   }
 
   .dropdown-button {
-    @apply bg-white block w-full rounded-sm border-0 pl-3 py-1.5 pr-10 ring-1 ring-inset ring-gray-200 placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-gray-500 
-    text-xs leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200;
+    @apply bg-white block w-full rounded-lg border pl-3 py-1.5 pr-10 ring-0 placeholder:text-gray-300 focus:border-gray-500 hover:border-gray-400
+    text-sm leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:border-gray-300;
   }
 
   .dropdown-selected-text {
@@ -742,7 +730,7 @@
   }
 
   .dropdown-button-icon {
-    @apply absolute inset-y-0 right-0 flex items-center pointer-events-none;
+    @apply absolute inset-y-0 right-1 flex items-center pointer-events-none;
   }
 
   .dropdown-arrow {
@@ -750,7 +738,7 @@
   }
 
   .dropdown-ul {
-    @apply absolute z-50 mt-1 w-auto bg-white shadow-lg max-h-60 rounded-sm py-1 text-xs ring-1 ring-gray-300 ring-opacity-5 focus:outline-none overflow-x-hidden;
+    @apply absolute z-50 mt-1 w-auto bg-white shadow max-h-60 rounded-lg py-1 text-xs ring-1 ring-gray-300 ring-opacity-5 focus:outline-none overflow-x-hidden;
   }
 
   .dropdown-li {
@@ -779,11 +767,11 @@
 
 
   .form-layout-container {
-    @apply bg-white shadow-sm border border-gray-200 rounded-sm;
+    @apply bg-white shadow-sm border border-gray-200 rounded-xl;
   }
 
   .form-header {
-    @apply px-4 py-5 sm:px-6 bg-gray-50 sm:flex sm:items-center sm:justify-between;
+    @apply px-4 py-4 bg-gray-50 rounded-t-xl h-24 sm:flex sm:items-center sm:justify-between;
   }
 
   .form-header-inner {
@@ -807,7 +795,7 @@
   }
 
   .form-content-container {
-    @apply border-t border-gray-200 px-4 py-5 sm:p-0;
+    @apply px-4 py-4;
   }
 
   .form-content-container-inner {
@@ -815,7 +803,7 @@
   }
 
   .form-header-search-input {
-    @apply block w-60 bg-gray-50 rounded-sm text-sm text-gray-900 placeholder-gray-500 outline-none;
+    @apply block w-60 bg-gray-50 rounded-md text-sm text-gray-900 placeholder-gray-500 outline-none;
   }
 
   .field-label {
@@ -827,7 +815,7 @@
   }
 
   .form-actions {
-    @apply px-4 py-3 bg-gray-100 text-gray-700 text-right sm:px-6 flex justify-end;
+    @apply -mx-4 -mb-4 mt-4 px-4 sm:px-6 py-3 bg-gray-100 text-gray-700 text-right flex justify-end rounded-b-xl;
   }
 
 /*
@@ -3119,11 +3107,11 @@
 
 
   .list-view-container {
-    @apply flex flex-col border border-gray-200;
+    @apply flex flex-col border border-gray-200 rounded-lg;
   }
 
   .list-view-container-inner {
-    @apply overflow-hidden;
+    @apply overflow-y-hidden overflow-x-auto rounded-lg;
   }
 
   .list-view-table {
@@ -3199,15 +3187,15 @@
   }
 
   .model-view-aside-header-container {
-    @apply bg-white shadow rounded-sm;
+    @apply bg-white shadow-sm border border-gray-200 rounded-xl;
   }
 
   .model-view-aside-header-container-inner {
-    @apply flex flex-col justify-self-stretch bg-gray-50 border-b;
+    @apply flex flex-col bg-gray-50 justify-self-stretch rounded-t-xl h-24;
   }
 
   .model-view-menu-container {
-    @apply mt-2 px-4 py-4 flow-root hidden sm:block;
+    @apply bg-white px-4 py-4 flow-root hidden sm:block rounded-b-xl;
   }
 
   .model-view-menu-container-mobile {
@@ -3233,7 +3221,7 @@
 
 
   .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;
+    @apply cursor-pointer text-white hover:bg-gray-700 hover:text-white hover:shadow-sm px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .sidebar .nav-link {
@@ -3241,11 +3229,11 @@
   }
 
   .nav-link-profile {
-    @apply flex items-center cursor-pointer px-4 py-2 text-xs text-gray-700 hover:bg-gray-100 whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply flex items-center cursor-pointer px-4 py-2 rounded-md text-xs text-gray-700 hover:bg-gray-100 whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .nav-link-mobile {
-    @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-pointer text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .sidebar .nav-link-list-container {
@@ -3261,7 +3249,7 @@
   }
 
   .nav-link-active {
-    @apply cursor-default text-blue-300 bg-gray-900 hover:bg-gray-900 px-3 py-2 rounded-sm text-xs shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-default text-sky-600 bg-gray-900 hover:bg-gray-900 px-3 py-2 rounded-lg text-xs shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .sidebar .nav-link-active {
@@ -3269,28 +3257,29 @@
   }
 
   .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;
+    @apply cursor-default bg-gray-900 border-b border-sky-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;
+    @apply cursor-default  bg-gray-900 border-l border-sky-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;
+    @apply cursor-default rounded-md block px-4 py-2 text-xs text-sky-900 shadow-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
 
   .nav-link-mobile-active {
-    @apply cursor-default bg-gray-900 text-blue-300 block px-3 py-2 rounded-sm text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-default bg-gray-900 text-sky-300 block px-3 py-2 rounded-lg text-xs whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
-
+  
   .view-nav-link {
-    @apply cursor-pointer text-gray-600 hover:bg-gray-50 hover:text-gray-900 rounded-none py-2 px-4 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
+    @apply cursor-pointer rounded-md text-gray-600 hover:border-gray-50 border-transparent border-l-2 hover:bg-gray-50 hover:text-gray-900 py-2 px-4 flex items-center text-sm whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
-
+  
   .view-nav-link-active {
-    @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;
+    @apply cursor-default bg-gray-100 border-gray-600 hover:border-gray-600 text-gray-900;
   }
+  
 
   .min-nav-link-text-width {
     width: 220px;
@@ -3312,11 +3301,11 @@
   }
 
   .header-notifications-dropdown {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-2 mt-2 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
   .header-notifications-dropdown-with-username {
-    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 pt-3 pl-1.5 mt-1 w-80 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
   .header-notifications-dropdown-view-all-button{
@@ -3545,11 +3534,11 @@
   }
 
   .shell-header-profile-dropdown {
-    @apply z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
   .shell-header-profile-dropdown-with-username {
-    @apply z-50 origin-top-right absolute right-0 mt-24 w-48 rounded-sm shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
+    @apply z-50 origin-top-right absolute right-0 mt-24 w-48 rounded-lg shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none;
   }
 
 
@@ -3558,7 +3547,7 @@
   }
 
   .mobile-menu-button {
-    @apply inline-flex items-center justify-center p-2 rounded-sm outline-none text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-800 focus:ring-white;
+    @apply inline-flex items-center justify-center p-2 rounded-lg outline-none text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-gray-800 focus:ring-white;
   }
 
   .mobile-menu-container {
@@ -3698,7 +3687,7 @@
   }
 
   .side-pane-container {
-    @apply fixed inset-y-0 right-0 sm:pl-10 max-w-full flex transition-all duration-200 ease-in-out;
+    @apply fixed inset-y-0 right-0 max-w-full flex transition-all duration-200 ease-in-out;
   }
 
   .side-pane-container-inner {
@@ -3710,7 +3699,7 @@
   }
 
   .side-pane-box-size-25 {
-    @apply w-screen max-w-xl;
+    @apply w-screen max-w-2xl;
   }
 
   .side-pane-box-size-50 {
@@ -3721,6 +3710,11 @@
     @apply w-screen max-w-4xl;
   }
 
+  
+  .side-pane-box-size-100 {
+    @apply w-screen max-w-full;
+  }
+
   .side-pane {
     @apply flex flex-col bg-white shadow-xl overflow-y-hidden;
   }
@@ -3963,7 +3957,7 @@
     }
 
     .tab-active {
-        @apply border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm;
+        @apply border-gray-500 text-gray-900 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm;
     }
 
     .tab {
@@ -3997,7 +3991,7 @@
   }
 
   .toast-pill {
-    @apply max-w-sm w-full bg-white shadow-lg rounded-sm pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
+    @apply max-w-sm w-full bg-white shadow-lg rounded-xl pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
   }
 
   .toast-context-padding {
@@ -4153,7 +4147,7 @@
   }
 
   .search-container {
-    @apply relative inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 hover:shadow-sm border border-gray-200;
+    @apply relative rounded-lg inline-flex items-center bg-white text-gray-400 focus-within:text-gray-600 focus:shadow hover:shadow border border-gray-300;
   }
 /* 
   .search-input {
@@ -4161,7 +4155,7 @@
   }  */
 
   .search-input {
-    @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;
+    @apply w-64 rounded-lg text-sm text-gray-900 pt-2 pl-2 pb-2 placeholder-gray-500 outline-none border-0 focus:outline-none focus:ring-0;
   }
 
   .search-button {
@@ -4277,7 +4271,7 @@
     }
 
     .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;
+        @apply relative inline-flex items-center p-2 first:border-l first:rounded-l-lg last:rounded-r-lg 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 {