@syncfusion/ej2-navigations 31.2.12 → 32.1.19

package/styles/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* !componenticons */
 .e-pager .e-icon-last::before,
 .e-grid-menu .e-icon-last::before {
@@ -120,7 +190,7 @@
 .e-pager .e-spacing,
 .e-pager .e-numericitem:hover,
 .e-pager .e-currentitem {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   cursor: pointer;
   padding: 6.1px 11.85px 9.8px 11.8px;
   text-decoration: none;
@@ -182,7 +252,7 @@
   margin-left: 0;
 }
 .e-pager .e-pagercontainer {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-style: solid;
   border-width: 1px;
   display: inline-block;
@@ -190,10 +260,10 @@
   overflow: hidden;
 }
 .e-pager .e-lastpage:hover {
-  border-radius: 0 3px 3px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0);
 }
 .e-pager .e-firstpage:hover {
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.1875);
 }
 .e-pager .e-pagermessage,
 .e-pager .e-pagerexternalmsg {
@@ -414,10 +484,10 @@
   border-right: medium none;
 }
 .e-pager.e-rtl .e-firstpage:hover {
-  border-radius: 0 4px 4px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0);
 }
 .e-pager.e-rtl .e-lastpage:hover {
-  border-radius: 0 4px 4px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0);
 }
 .e-pager.e-rtl .e-numericcontainer {
   float: none;
@@ -712,7 +782,7 @@
 .e-pager.e-bigger .e-spacing,
 .e-pager.e-bigger .e-numericitem:hover,
 .e-pager.e-bigger .e-currentitem {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0)/0.75;
   padding: 10.7px 15.48px 11.5px 15.1px;
 }
 .e-bigger .e-pager.e-rtl .e-spacing,
@@ -1419,7 +1489,7 @@
 }
 
 .e-toolbar {
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   display: block;
   height: 48px;
   min-height: 48px;
@@ -1455,13 +1525,16 @@
           box-sizing: content-box;
 }
 .e-toolbar.e-corner {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-toolbar.e-hidden {
   display: none;
 }
+.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) .e-tbar-btn {
+  pointer-events: none;
+}
 .e-toolbar .e-toolbar-items {
-  border-radius: 6px 0 0 6px;
+  border-radius: calc(var(--e-radius) * 0.375) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.375);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -1576,7 +1649,7 @@
   min-height: 32px;
   min-width: 32px;
   padding: 0 4px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   line-height: 20px;
   border: none;
   cursor: pointer;
@@ -1622,7 +1695,7 @@
   pointer-events: none;
 }
 .e-toolbar .e-toolbar-item.e-separator {
-  margin: 12px 4px;
+  margin: 0 4px;
   min-height: 24px;
   min-width: 1px;
   height: 24px;
@@ -1715,7 +1788,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-radius: 0 6px 6px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.375) calc(var(--e-radius) * 0.375) calc(var(--e-radius) * 0);
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1755,7 +1828,7 @@
   display: none;
 }
 .e-toolbar .e-toolbar-pop {
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   overflow: hidden;
   padding: 0;
   position: absolute;
@@ -1778,7 +1851,7 @@
   min-width: 100%;
   padding: 6px 14px;
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
@@ -1819,13 +1892,13 @@
 }
 .e-toolbar.e-extended-toolbar.e-tbar-extended {
   border-bottom: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended {
   border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
   min-height: 48px;
   padding-bottom: 0;
   padding-left: 8px;
@@ -1996,7 +2069,7 @@
 .e-toolbar.e-rtl .e-hor-nav {
   left: 0;
   right: auto;
-  border-radius: 6px 0 0 6px;
+  border-radius: calc(var(--e-radius) * 0.375) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.375);
 }
 .e-toolbar.e-toolpop.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-center .e-toolbar-item,
 .e-toolbar.e-toolpop.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-right .e-toolbar-item {
@@ -2056,7 +2129,7 @@
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
   background: var(--color-sf-secondary-bg-color-focus);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   color: var(--color-sf-icon-color);
   border-color: var(--color-sf-icon-color);
   border-style: solid;
@@ -2077,7 +2150,7 @@
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   color: var(--color-sf-icon-color);
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
@@ -2097,7 +2170,7 @@
   border-color: var(--color-sf-border-light);
   border-style: solid;
   border-width: 0;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: var(--color-sf-content-text-color-alt2);
@@ -2143,7 +2216,7 @@
   content: "";
 }
 .e-toolbar .e-hor-nav.e-nav-active:active, .e-toolbar .e-hor-nav.e-nav-active:focus, .e-toolbar .e-hor-nav.e-nav-active:hover {
-  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: calc(var(--e-radius) * 0.5);
 }
 .e-toolbar .e-hor-nav:active {
   border: 0;
@@ -2263,7 +2336,7 @@
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: var(--color-sf-secondary-bg-color-focus);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
@@ -2278,14 +2351,14 @@
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: var(--color-sf-secondary-bg-color-hover);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-color: var(--color-sf-icon-color);
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: var(--color-sf-secondary-bg-color-pressed);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   border-color: var(--color-sf-border-light);
@@ -2360,6 +2433,10 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
   padding: 0 8px;
 }
+.e-bigger .e-toolbar.e-spacer-toolbar.e-pop-mode .e-toolbar-items,
+.e-toolbar.e-bigger.e-spacer-toolbar.e-pop-mode .e-toolbar-items {
+  width: calc(100% - 36px);
+}
 .e-bigger .e-toolbar .e-toolbar-item,
 .e-toolbar.e-bigger .e-toolbar-item {
   min-height: 56px;
@@ -2546,14 +2623,14 @@
 .e-bigger .e-toolbar.e-extended-toolbar.e-tbar-extended,
 .e-toolbar.e-bigger.e-extended-toolbar.e-tbar-extended {
   border-bottom: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
 }
 .e-bigger .e-toolbar.e-extended-toolbar.e-tbar-extended .e-toolbar-extended,
 .e-toolbar.e-bigger.e-extended-toolbar.e-tbar-extended .e-toolbar-extended {
   border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
 }
 .e-bigger .e-toolbar.e-rtl .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-toolbar.e-bigger.e-rtl .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
@@ -2606,7 +2683,7 @@
   position: relative;
 }
 .e-accordion .e-acrdn-item {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   margin-top: 0;
 }
 .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
@@ -2655,7 +2732,7 @@
   text-decoration: none;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   line-height: 22px;
   min-height: 40px;
   overflow: hidden;
@@ -2776,32 +2853,32 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: var(--color-sf-content-bg-color);
   border: 1px solid var(--color-sf-border-light);
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
 }
 .e-accordion .e-acrdn-item {
   border-color: var(--color-sf-border-light);
   border-style: solid;
   border-width: 0 0 1px 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-accordion .e-acrdn-item.e-active {
   background: var(--color-sf-content-bg-color);
 }
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-accordion .e-acrdn-item:first-child .e-acrdn-header:focus {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
 }
 .e-accordion .e-acrdn-item:last-child {
   border-bottom: 0;
 }
 .e-accordion .e-acrdn-item:last-child:not(.e-expand-state) .e-acrdn-header:focus {
-  border-radius: 0 0 4px 4px;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25);
 }
 .e-accordion .e-acrdn-item:last-child.e-selected .e-acrdn-header:focus {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-accordion .e-acrdn-item.e-item-focus {
   border-color: var(--color-sf-border-light);
@@ -2897,11 +2974,11 @@
   color: var(--color-sf-icon-color);
 }
 .e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header:focus {
-  border: 0;
+  border: 1px;
 }
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: var(--color-sf-content-bg-color-focus);
-  border: 0;
+  border: 1px;
   border-color: initial;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header:hover {
@@ -3021,7 +3098,7 @@
 }
 .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
   background: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-color: var(--color-sf-border-light);
   border-style: solid;
   border-width: 0;
@@ -3564,7 +3641,7 @@
   font-size: 14px;
   padding: 4px 0;
   border: 1px solid var(--color-sf-border-light);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
           box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
   display: none;
@@ -3595,7 +3672,7 @@
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
 }
 .e-contextmenu-wrapper ul .e-menu-item,
 .e-contextmenu-container ul .e-menu-item {
@@ -4095,7 +4172,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-items.e-hscroll .e-scroll-nav {
   width: 32px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-tab .e-tab-header .e-toolbar-items.e-hscroll:not(.e-tbar-pos) .e-toolbar-item:last-child {
   margin: 0 2px 0 0;
@@ -4123,7 +4200,7 @@
   height: 2px;
   left: 0;
   right: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
@@ -4172,7 +4249,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
   display: inherit;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -4256,7 +4333,7 @@
   height: 20px;
   min-width: 20px;
   width: 20px;
-  line-height: 1;
+  line-height: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-icons.e-tab-icon {
@@ -4960,7 +5037,7 @@
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::before {
   float: left;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   line-height: 36px;
@@ -5648,7 +5725,7 @@
 }
 .e-tab-clone-element .e-tab-text {
   display: inherit;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -5683,7 +5760,7 @@
   height: 20px;
   min-width: 20px;
   width: 20px;
-  line-height: 1;
+  line-height: 16px;
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element .e-icons.e-tab-icon {
@@ -5828,7 +5905,7 @@
 .e-tab .e-tab-header {
   background: inherit;
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: none;
           box-shadow: none;
   font-weight: 400;
@@ -5865,7 +5942,7 @@
   background: rgba(var(--color-sf-transparent), 0.12);
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-content-text-color-alt3);
   border: 0;
 }
@@ -5875,7 +5952,7 @@
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
   background: inherit;
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
@@ -5888,7 +5965,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active {
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   border: 0;
@@ -5906,7 +5983,7 @@
   display: block;
   position: absolute;
   width: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   bottom: 0;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
@@ -5946,7 +6023,7 @@
 .e-tab .e-tab-header .e-toolbar-pop {
   background: var(--color-sf-flyout-bg-color);
   border: 1px solid var(--color-sf-flyout-border);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   overflow-y: auto;
@@ -5967,7 +6044,7 @@
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover {
   background: var(--color-sf-flyout-bg-color-hover);
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover .e-tab-icon,
@@ -6068,7 +6145,7 @@
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon:hover {
   background: var(--color-sf-secondary-bg-color-hover);
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-hor-nav .e-popup-down-icon:hover,
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon:hover {
@@ -6084,7 +6161,7 @@
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-down-icon {
   background: var(--color-sf-secondary-bg-color-focus);
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-secondary-text-color-focus);
 }
 .e-tab .e-tab-header .e-hor-nav:focus .e-popup-up-icon:hover,
@@ -6093,7 +6170,7 @@
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-down-icon:hover {
   background: var(--color-sf-secondary-bg-color-hover);
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-hor-nav:focus .e-popup-up-icon:active,
 .e-tab .e-tab-header .e-hor-nav:focus .e-popup-down-icon:active,
@@ -6102,7 +6179,7 @@
   background: var(--color-sf-secondary-bg-color-hover);
   color: var(--color-sf-secondary-text-color-focus);
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: inset 0 1px 2px 0 rgba(var(--color-sf-black), 0.05);
           box-shadow: inset 0 1px 2px 0 rgba(var(--color-sf-black), 0.05);
 }
@@ -6127,7 +6204,7 @@
   border: none;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-hor-nav.e-nav-active .e-icons,
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav).e-nav-active .e-icons {
@@ -6153,14 +6230,14 @@
   border-width: 1px 0 0;
 }
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item .e-tab-wrap:hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active {
   border-color: var(--color-sf-content-bg-color) var(--color-sf-border-light) var(--color-sf-border-light);
   border-style: solid;
   border-width: 1px;
   margin-top: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical {
   border-bottom: 0;
@@ -6173,18 +6250,18 @@
   border-top: 1px solid var(--color-sf-border-light);
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-left .e-toolbar-item .e-tab-wrap:hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-left .e-toolbar-item.e-active {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-right: initial;
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-right .e-toolbar-item .e-tab-wrap:hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-right .e-toolbar-item.e-active {
   border-left: initial;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical .e-toolbar-pop {
   -webkit-box-shadow: none;
@@ -6346,7 +6423,7 @@
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: var(--color-sf-primary);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-color: unset;
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text, .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon {
@@ -6511,7 +6588,7 @@
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: var(--color-sf-primary-bg-color-focus);
   border-color: var(--color-sf-primary);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-style: solid;
   border-width: 0;
 }
@@ -6715,7 +6792,7 @@
 }
 .e-tab.e-background .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-tab-wrap {
   border-color: var(--color-sf-primary);
-  border-radius: 0 0 4px 4px;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25);
   border-style: solid;
   border-width: 0 2px 2px;
 }
@@ -6727,7 +6804,7 @@
 }
 .e-tab.e-background .e-tab-header.e-vertical.e-vertical-left .e-toolbar-item.e-active .e-tab-wrap {
   border-color: var(--color-sf-primary);
-  border-radius: 4px 0 0 4px;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25);
   border-style: solid;
   border-width: 0;
 }
@@ -6739,7 +6816,7 @@
 }
 .e-tab.e-background .e-tab-header.e-vertical.e-vertical-right .e-toolbar-item.e-active .e-tab-wrap {
   border-color: var(--color-sf-primary);
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-style: solid;
   border-width: 0;
 }
@@ -6824,7 +6901,7 @@
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover {
   background: var(--color-sf-primary-bg-color-focus);
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: var(--color-sf-content-text-color-alt2);
@@ -6880,7 +6957,7 @@
   color: var(--color-sf-content-text-color-alt1);
 }
 .e-tab-clone-element .e-tab-wrap {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: var(--color-sf-content-text-color-alt1);
   border: 1px solid var(--color-sf-transparent);
 }
@@ -8102,6 +8179,54 @@
   color: var(--color-sf-danger) !important;
 }
 
+.e-underline.e-input-group.e-control-wrapper,
+.e-underline.e-input-group,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-float-input,
+.e-underline.e-float-input.e-control-wrapper,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid var(--color-sf-border);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  padding: 0 10px 0 12px;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  border-width: 1px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid;
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 /*! TreeView icons */
@@ -8156,7 +8281,7 @@
   white-space: nowrap;
   border: 1px solid;
   border-color: var(--color-sf-border-light);
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   background: var(--color-sf-content-bg-color);
 }
 .e-treeview.e-virtualization {
@@ -8226,7 +8351,7 @@
 }
 .e-treeview .e-list-item div.e-icons.interaction {
   -webkit-transition: -webkit-transform 0.3s ease-in-out;
-  border-radius: 15px;
+  border-radius: calc(var(--e-radius) * 0.9375);
   transition: -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
@@ -8363,7 +8488,7 @@
 .e-treeview .e-icon-collapsible::before,
 .e-treeview .e-icon-expandable::before {
   display: inline-block;
-  padding: 0px;
+  padding: 0;
 }
 .e-treeview .e-load {
   -webkit-animation: rotation 0.5s infinite linear;
@@ -8395,7 +8520,7 @@
   z-index: 99999;
 }
 .e-treeview .e-popup .e-content {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-style: solid;
   border-width: 1px;
   font-size: 14px;
@@ -8475,11 +8600,11 @@
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
   font-size: 16px;
-  padding: 0px 8px;
+  padding: 0 8px;
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;
-  border-radius: 15px;
+  border-radius: calc(var(--e-radius) * 0.9375);
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   font-size: 12px;
@@ -8727,7 +8852,7 @@
 }
 .e-treeview.e-drag-item {
   background-color: var(--color-sf-content-bg-color-alt4);
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
 }
 .e-treeview.e-drag-item .e-icon-collapsible::before,
 .e-treeview.e-drag-item .e-icon-expandable::before {
@@ -8751,7 +8876,7 @@
 
 .e-bigger .e-treeview,
 .e-treeview.e-bigger {
-  border-radius: 8px;
+  border-radius: calc(var(--e-radius) * 0.5);
 }
 .e-bigger .e-treeview .e-navigable .e-list-text,
 .e-treeview.e-bigger .e-navigable .e-list-text {
@@ -8912,6 +9037,11 @@
 .e-treeview.e-bigger .e-icon-expandable::before {
   font-size: 24px;
 }
+.e-bigger .e-treeview .e-list-item.e-editing .e-list-text .e-input-group.e-input-focus .e-input,
+.e-treeview.e-bigger .e-list-item.e-editing .e-list-text .e-input-group.e-input-focus .e-input {
+  padding-bottom: 8px;
+}
+
 /* stylelint-disable-line no-empty-source */
 /* stylelint-disable-line no-empty-source */
 ejs-sidebar {
@@ -9202,7 +9332,7 @@ ejs-sidebar {
 .e-menu-wrapper,
 .e-menu-container {
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: inline-block;
   line-height: 0;
 }
@@ -9329,7 +9459,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper ul .e-menu-item.e-menu-caret-icon,
 .e-menu-container ul .e-menu-item.e-menu-caret-icon {
-  padding-right: 26px;
+  padding-right: 32px;
 }
 .e-menu-wrapper ul .e-menu-item.e-disabled,
 .e-menu-container ul .e-menu-item.e-disabled {
@@ -9400,9 +9530,8 @@ ejs-sidebar {
 .e-menu-wrapper .e-menu-header,
 .e-menu-container .e-menu-header {
   display: none;
-  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
   font-size: 16px;
-  font-weight: 400;
   height: 38px;
   line-height: 38px;
   text-align: left;
@@ -9556,7 +9685,7 @@ ejs-sidebar {
 }
 .e-rtl.e-menu-wrapper ul .e-menu-item.e-menu-caret-icon,
 .e-rtl.e-menu-container ul .e-menu-item.e-menu-caret-icon {
-  padding-left: 26px;
+  padding-left: 32px;
   padding-right: 12px;
 }
 .e-rtl.e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon,
@@ -9599,7 +9728,7 @@ ejs-sidebar {
 .e-menu-wrapper.e-hamburger .e-popup.e-menu-popup,
 .e-menu-container.e-hamburger .e-popup.e-menu-popup {
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: none;
           box-shadow: none;
   display: block;
@@ -9823,7 +9952,7 @@ ejs-sidebar {
   -webkit-box-shadow: inset 0 0 0 2px var(--color-sf-primary);
           box-shadow: inset 0 0 0 2px var(--color-sf-primary);
   background: transparent;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-menu-wrapper .e-menu .e-disabled,
 .e-menu-container .e-menu .e-disabled {
@@ -10525,7 +10654,7 @@ ejs-sidebar {
 
 .e-breadcrumb-popup {
   border: 1px solid var(--color-sf-border-light);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
           box-shadow: 0 0 4px 0 rgba(var(--color-sf-black), 0.1), 0 4px 6px -4px rgba(var(--color-sf-black), 0.1), 0 10px 15px -3px rgba(var(--color-sf-black), 0.1);
   position: absolute;
@@ -10818,7 +10947,7 @@ ejs-sidebar {
   padding: 8px;
   overflow: hidden;
   font-size: 14px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-appbar > div:first-child {
   display: -webkit-box;
@@ -11108,7 +11237,7 @@ ejs-sidebar {
 }
 .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator {
   font-size: 32px;
-  border-radius: 9999px;
+  border-radius: 999px;
 }
 .e-stepper.e-step-type-indicator .e-step-content, .e-stepper.e-step-type-label .e-step-content {
   padding: 0 8px;
@@ -11239,7 +11368,7 @@ ejs-sidebar {
 }
 .e-stepper .e-step-container .e-step,
 .e-stepper .e-step-container .e-indicator {
-  border-radius: 9999px;
+  border-radius: 999px;
   min-width: 32px;
   min-height: 32px;
 }