@syncfusion/ej2-navigations 21.2.8 → 22.1.34

package/styles/fluent-dark.css

@@ -148,43 +148,21 @@
   border-radius: 0;
   padding: 13px 13px 11px 13px;
 }
-.e-bigger .e-pager.e-rtl .e-spacing, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl .e-spacing,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 7px 13px 9px 12px;
-}
-.e-bigger .e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 13px 13px 11px 13px;
-}
-.e-bigger .e-pager.e-rtl, .e-bigger .e-pager.e-rtl .e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-currentitem,
-.e-pager.e-bigger.e-rtl,
-.e-pager.e-bigger.e-rtl .e-numericitem:hover,
-.e-pager.e-bigger.e-rtl .e-currentitem {
-  margin: 0;
-  padding: 13px 13px 11px 13px;
-}
-.e-bigger .e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active),
-.e-pager.e-bigger.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 13px 13px 11px 13px;
-}
-.e-bigger .e-pager.e-rtl .e-pp, .e-bigger .e-pager.e-rtl .e-np, .e-bigger .e-pager.e-rtl .e-pp:hover, .e-bigger .e-pager.e-rtl .e-np:hover,
-.e-pager.e-bigger.e-rtl .e-pp,
-.e-pager.e-bigger.e-rtl .e-np,
-.e-pager.e-bigger.e-rtl .e-pp:hover,
-.e-pager.e-bigger.e-rtl .e-np:hover {
+.e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem, .e-bigger .e-pager.e-rtl .e-pp.e-spacing.e-numericitem:hover, .e-bigger .e-pager.e-rtl .e-np.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem,
+.e-pager.e-bigger.e-rtl .e-pp.e-spacing.e-numericitem:hover,
+.e-pager.e-bigger.e-rtl .e-np.e-spacing.e-numericitem:hover {
   font-size: 14px;
   margin-top: -5px;
 }
 .e-bigger .e-pager.e-rtl .e-pagerdropdown,
 .e-pager.e-bigger.e-rtl .e-pagerdropdown {
-  margin: -44px 16px 0 0;
+  margin: -40px 16px 0 0;
 }
 .e-bigger .e-pager.e-rtl .e-pagerconstant,
 .e-pager.e-bigger.e-rtl .e-pagerconstant {
-  margin: 10px 16px 13px 0;
+  margin: 14px 16px 9px 0;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
 .e-bigger .e-pager .e-pagercontainer .e-prevpage,
@@ -230,6 +208,9 @@
 .e-pager [class^=e-] {
   box-sizing: border-box;
 }
+.e-pager .e-pager-default.e-hide {
+  display: none;
+}
 .e-pager div.e-parentmsgbar {
   float: right;
   padding-bottom: 0;
@@ -252,7 +233,7 @@
 .e-pager .e-pagerconstant {
   font-weight: 600;
   display: inline-block;
-  margin: 0 0 8px 8px;
+  margin: 0 0 5px 8px;
   overflow: hidden;
   width: auto;
 }
@@ -288,9 +269,6 @@
   padding: 8px 13px 10px 12px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 8px 13px 10px 12px;
-}
 .e-pager .e-currentitem {
   border-bottom: 2px solid #0078d4;
   font-style: normal;
@@ -411,7 +389,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -470,9 +447,10 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 6px;
+  padding-top: 6px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
-  margin: -28px 16px 0 0;
+  margin: -26px 16px 0 0;
 }
 .e-pager.e-rtl .e-pagerconstant {
   margin: 8px 8px 6px 8px;
@@ -515,7 +493,7 @@
   border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-lastpage:hover {
-  border-radius: 4px 0 0 4px;
+  border-radius: 0 4px 4px 0;
 }
 .e-pager.e-rtl .e-numericcontainer {
   float: none;
@@ -535,9 +513,6 @@
   margin: 0;
   padding: 7px 13px 9px 12px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 13px 9px 12px;
-}
 .e-pager.e-rtl .e-pp, .e-pager.e-rtl .e-np, .e-pager.e-rtl .e-pp:hover, .e-pager.e-rtl .e-np:hover {
   margin-top: 0;
   padding: 8px 12px 10px 11px;
@@ -607,9 +582,6 @@
   color: #a19f9d;
   opacity: 1;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #292827;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #252423;
   opacity: 1;
@@ -1207,6 +1179,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 10px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 10px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 10px;
@@ -2247,12 +2225,13 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #252423;
   border: solid #292827;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #292827;
   color: #f3f2f1;
+  border: solid #292827;
+  border-width: 0 0 0 0;
 }
 
 /*! component's theme wise override fluent-definitions and variables */
@@ -2280,6 +2259,7 @@
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+  box-shadow: none;
   padding: 12px 0 12px 28px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -2374,6 +2354,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px none #292827;
 }
+.e-accordion .e-acrdn-item:first-child {
+  margin-top: 0;
+}
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
@@ -2463,6 +2446,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 8px 0 8px 26px;
 }
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header:focus {
+  box-shadow: none;
+}
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
@@ -2641,6 +2627,7 @@
   color: #f3f2f1;
   background: none;
   border-top: 0;
+  border-bottom: 1px solid #292827;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #f3f2f1;
@@ -2744,6 +2731,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: none;
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #292827;
@@ -2818,6 +2807,9 @@
   position: relative;
   width: 100%;
 }
+.e-carousel .e-carousel-items.e-swipe-start {
+  cursor: pointer;
+}
 .e-carousel.e-partial .e-carousel-slide-container {
   padding: 0 100px;
 }
@@ -2831,7 +2823,7 @@
     padding: 0 50px;
   }
 }
-.e-carousel.e-partial .e-carousel-items {
+.e-carousel .e-carousel-items {
   width: calc(var(--carousel-items-count) * 100%);
   display: -ms-flexbox;
   display: flex;
@@ -2841,63 +2833,35 @@
   transition-duration: 0.6s;
   transition-timing-function: ease-in-out;
 }
-.e-carousel.e-partial .e-carousel-item {
+.e-carousel .e-carousel-items .e-carousel-item {
   height: 100%;
   overflow: hidden;
   padding: 0;
   position: relative;
   width: calc(100% / var(--carousel-items-count));
 }
-.e-carousel.e-blazor-carousel.e-partial .e-carousel-items {
-  transform: translateX(calc(-100% / var(--carousel-items-count) * (var(--carousel-items-current))));
-  transition: transform 0.6s ease-in-out;
-}
-.e-carousel.e-blazor-carousel.e-partial.e-rtl .e-carousel-items {
-  transform: translateX(calc(100% / var(--carousel-items-count) * (var(--carousel-items-current))));
-  transition: transform 0.6s ease-in-out;
-}
-.e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item {
-  backface-visibility: hidden;
-  display: none;
-  float: left;
-  height: 100%;
-  margin-right: -100%;
-  position: relative;
-  transition: transform 0.6s ease-in-out;
-  width: 100%;
-}
-.e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item.e-prev, .e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item.e-next, .e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item.e-active {
-  display: block;
+.e-carousel.e-blazor-carousel .e-carousel-items {
+  transform: translateX(calc(-100% / var(--carousel-items-count) * var(--carousel-items-current)));
+  transition: transform;
 }
-.e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item.e-next:not(.e-transition-start), .e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item.e-active.e-transition-end {
-  transform: translateX(100%);
+.e-carousel.e-blazor-carousel.e-rtl .e-carousel-items {
+  transform: translateX(calc(100% / var(--carousel-items-count) * var(--carousel-items-current)));
+  transition: transform;
 }
-.e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel.e-carousel-slide-animation:not(.e-partial) .e-carousel-item.e-active.e-transition-start {
-  transform: translateX(-100%);
+.e-carousel.e-carousel-fade-animation .e-carousel-items.e-fade-in-out {
+  transition-property: none;
+  animation: fade-in-out 0.6s ease-in-out;
 }
-.e-carousel.e-carousel-fade-animation:not(.e-partial) .e-carousel-item {
-  backface-visibility: hidden;
-  display: block;
-  float: left;
-  height: 100%;
-  margin-right: -100%;
-  opacity: 0;
-  position: relative;
-  transition: opacity 0.6s ease-in-out;
-  width: 100%;
-  z-index: 0;
-}
-.e-carousel.e-carousel-fade-animation:not(.e-partial) .e-carousel-item.e-active {
-  opacity: 1;
-  z-index: 1;
-}
-.e-carousel.e-carousel-animation-none:not(.e-partial) .e-carousel-item {
-  display: none;
-  height: 100%;
-  width: 100%;
+@keyframes fade-in-out {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
-.e-carousel.e-carousel-animation-none:not(.e-partial) .e-carousel-item.e-active {
-  display: block;
+.e-carousel.e-carousel-slide-animation .e-carousel-items.e-slide {
+  transition-duration: 0.6s;
 }
 .e-carousel.e-carousel-custom-animation:not(.e-partial) .e-carousel-item {
   display: block;
@@ -2905,9 +2869,7 @@
   left: 0;
   opacity: 0;
   pointer-events: none;
-  position: absolute;
   top: 0;
-  width: 100%;
 }
 .e-carousel.e-carousel-custom-animation:not(.e-partial) .e-carousel-item.e-active {
   opacity: 1;
@@ -2969,7 +2931,7 @@
   width: 100%;
   z-index: 1;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bars {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bars {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
@@ -2978,10 +2940,10 @@
       justify-content: center;
   pointer-events: auto;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar {
   padding: 0;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar .e-indicator {
   -ms-flex-align: center;
       align-items: center;
   display: -ms-flexbox;
@@ -2990,7 +2952,7 @@
       justify-content: center;
   padding: 6px;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar .e-indicator div {
   border: 1px solid rgba(27, 26, 25, 0.4);
   border-radius: 50%;
   height: 12px;
@@ -2999,9 +2961,60 @@
   transition-timing-function: ease-in-out;
   width: 12px;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
   display: none;
 }
+.e-carousel .e-carousel-indicators.e-dynamic {
+  min-height: 36px;
+}
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars {
+  display: block;
+  overflow: hidden;
+  transition: opacity 0.6s ease-in-out;
+  white-space: nowrap;
+  width: 80px;
+}
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar {
+  border-radius: 50%;
+  display: inline-block;
+  height: 8px;
+  left: calc(32px - 16px * var(--carousel-items-current));
+  margin: 0 4px;
+  opacity: 1;
+  position: relative;
+  transform: scale(0.33);
+  transition-duration: 0.6s;
+  transition-property: transform, left;
+  transition-timing-function: ease-in-out;
+  white-space: nowrap;
+  width: 8px;
+}
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar.e-active {
+  transform: scale(1);
+}
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar.e-prev, .e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar.e-next {
+  transform: scale(0.66);
+}
+.e-carousel .e-carousel-indicators.e-fraction {
+  min-height: 36px;
+}
+.e-carousel .e-carousel-indicators.e-progress {
+  min-height: 4px;
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars {
+  height: 4px;
+  width: 100%;
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translate3d(0, 0, 0) scaleX(calc(var(--carousel-items-current) / var(--carousel-items-count))) scaleY(1);
+  transition-duration: 0.6s;
+  transform-origin: left top;
+  width: 100%;
+}
 
 /*! carousel component theme */
 .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled),
@@ -3024,28 +3037,43 @@
   background-color: rgba(27, 26, 25, 0.4);
   outline: none;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
-  background-color: #1b1a19;
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
+  background: #1b1a19;
   border-color: #1b1a19;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
-  background-color: transparent;
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:hover {
+  background: transparent;
   border-color: transparent;
   box-shadow: none;
   outline: none;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator:focus-visible {
   border-color: #000;
 }
-.e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bar.e-active .e-indicator div {
   background-color: #0078d4;
   border-color: #0078d4;
 }
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar {
+  background-color: #1b1a19;
+}
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar.e-active {
+  background-color: #0078d4;
+}
+.e-carousel .e-carousel-indicators.e-fraction .e-indicator-bars {
+  color: #1b1a19;
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars {
+  background-color: rgba(0, 120, 212, 0.4);
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
+  background-color: #0078d4;
+}
 
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
@@ -3727,7 +3755,7 @@
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon {
-  margin: 0;
+  margin: 0 0 0 8px;
 }
 .e-bigger .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before,
 .e-tab.e-bigger .e-tab-header .e-toolbar-pop .e-toolbar-item .e-close-icon::before {
@@ -4858,7 +4886,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop, .e-tab .e-tab-header .e-toolbar-item.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
@@ -4871,7 +4899,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab .e-tab-header .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab .e-tab-header .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -5263,6 +5291,11 @@
   height: 44px;
   padding: 0;
 }
+@media screen and (max-width: 480px) {
+  .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap {
+    height: 48px;
+  }
+}
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-text-wrap::before, .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active:not(.e-separator):last-child .e-text-wrap::before {
   top: unset;
 }
@@ -5649,6 +5682,10 @@
 .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-itop.e-active .e-tab-wrap:focus .e-text-wrap, .e-tab.e-focused .e-tab-header .e-horizontal-bottom .e-toolbar-item.e-ibottom.e-active .e-tab-wrap:focus .e-text-wrap {
   height: auto;
 }
+.e-tab.e-template .e-tab-header .e-toolbar-items .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div,
+.e-tab.e-template .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div {
+  display: inherit;
+}
 .e-tab.e-template .e-content > .e-item {
   display: none;
 }
@@ -5951,7 +5988,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 0 20px;
+    padding: 0 15px;
   }
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
@@ -6191,7 +6228,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop, .e-tab-clone-element.e-ibottom {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
@@ -6204,7 +6241,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab-clone-element.e-itop .e-tab-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap {
-    height: 72px;
+    height: 62px;
   }
 }
 .e-tab-clone-element.e-itop .e-tab-wrap:focus .e-text-wrap, .e-tab-clone-element.e-ibottom .e-tab-wrap:focus .e-text-wrap {
@@ -6414,6 +6451,9 @@
 .e-tab .e-tab-header .e-toolbar-item:hover {
   background: #292827;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
+  background: #292827;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
   background: none;
 }
@@ -6469,8 +6509,8 @@
   content: unset;
   display: unset;
   position: unset;
-  top: unset;
   width: unset;
+  top: unset;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
@@ -6482,6 +6522,9 @@
 .e-tab .e-tab-header .e-toolbar-item.e-active.e-ileft .e-tab-text, .e-tab .e-tab-header .e-toolbar-item.e-active.e-iright .e-tab-text {
   color: #f3f2f1;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #a19f9d;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #a19f9d;
 }
@@ -6895,6 +6938,10 @@
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active {
   border: 0;
 }
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #484644;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0078d4;
   border-radius: 0;
@@ -7055,6 +7102,10 @@
   margin: 0;
   background: #1b1a19;
 }
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-text,
+.e-tab.e-background .e-tab-header .e-toolbar-item.e-active.e-disable.e-overlay .e-tab-icon {
+  color: #484644;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: none;
   border-color: unset;
@@ -9358,6 +9409,10 @@ ejs-sidebar {
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
@@ -9895,12 +9950,12 @@ ejs-sidebar {
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #252423;
+  background: #252423;
   color: #a19f9d;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #323130;
+  background: #323130;
   color: #c8c6c4;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
@@ -9918,17 +9973,17 @@ ejs-sidebar {
 }
 
 .e-breadcrumb-popup {
-  background-color: #252423;
+  background: #252423;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #a19f9d;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #323130;
+  background: #323130;
   color: #f3f2f1;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #323130;
+  background: #323130;
   color: #f3f2f1;
 }
 
@@ -10003,12 +10058,16 @@ ejs-sidebar {
   right: auto;
 }
 .e-appbar .e-appbar-separator {
-  height: 32px;
+  height: 24px;
 }
 .e-appbar .e-appbar-spacer {
   -ms-flex-positive: 1;
       flex-grow: 1;
 }
+.e-appbar .e-btn,
+.e-appbar .e-css.e-btn {
+  border-image: unset;
+}
 
 .e-inherit.e-menu-wrapper.e-scrollable .e-menu,
 .e-inherit.e-menu-container.e-scrollable .e-menu {
@@ -10022,8 +10081,8 @@ ejs-sidebar {
 .e-appbar.e-light {
   background: #292827;
   color: #faf9f8;
-  border-color: #292827;
   border: none;
+  border-color: #292827;
 }
 .e-appbar.e-light .e-appbar-separator {
   border-left: 1px solid #faf9f8;
@@ -10047,8 +10106,8 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-container.e-inherit {
   background: #292827;
   color: #faf9f8;
-  border-color: #292827;
   box-shadow: none;
+  border-color: #292827;
 }
 .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-selected, .e-appbar.e-light .e-menu-wrapper.e-inherit .e-menu .e-menu-item.e-focused,
 .e-appbar.e-light .e-menu-container.e-inherit .e-menu .e-menu-item.e-selected,