@syncfusion/ej2-navigations 21.2.8 → 22.1.34

package/styles/bootstrap5-dark.css

@@ -164,33 +164,11 @@
   border-radius: 0;
   padding: 12px 15px 13px 15px;
 }
-.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: 12px 15px 13px;
-}
-.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: 12px 15px 13px 15px;
-}
-.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: 7px 8px 7px 8px;
-}
-.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: 12px 15px 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: 0;
   padding: 14px 14px 13px;
@@ -247,6 +225,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;
@@ -319,9 +300,6 @@
   padding: 10px 12.5px 11.5px 12.5px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 10.4px 12.5px 11.6px 12.5px;
-}
 .e-pager .e-currentitem {
   border: 3px solid #86b7fe;
   font-style: normal;
@@ -442,7 +420,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -505,6 +482,7 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 6px;
+  padding-top: 8px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
   margin: -24px 16px 0 0;
@@ -550,7 +528,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;
@@ -567,9 +545,6 @@
   margin: 0;
   padding: 10.4px 12.5px 11px 12.5px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 10.4px 12.5px 11px 12.5px;
-}
 .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: 10px 10.5px 11px 10.5px;
@@ -639,9 +614,6 @@
   color: #0d6efd;
   opacity: 1;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #444c54;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #31373d;
   opacity: 1;
@@ -1241,6 +1213,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 12px;
 }
+.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: 12px;
+}
 .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: 12px;
@@ -2281,12 +2259,13 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #282d31;
   border: solid #444c54;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #5c636a;
   color: #adb5bd;
+  border: solid #444c54;
+  border-width: 0 0 0 0;
 }
 
 /*! Accordion's bootstrap5 theme wise override definitions and variables */
@@ -2315,6 +2294,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,
@@ -2409,6 +2389,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #444c54;
 }
+.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;
@@ -2496,7 +2479,10 @@
   padding: 16px 16px 16px 26px;
 }
 .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;
+  padding: 10px 0 10px 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: inset 0 0 0 4px rgba(13, 110, 253, 0.25);
 }
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
@@ -2676,6 +2662,7 @@
   color: #fff;
   background: none;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #fff;
@@ -2779,6 +2766,8 @@
 }
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
   box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
+  position: relative;
+  z-index: 2;
 }
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border-color: #444c54;
@@ -2853,6 +2842,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;
 }
@@ -2866,7 +2858,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;
@@ -2876,63 +2868,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;
@@ -2940,9 +2904,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;
@@ -3004,7 +2966,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;
@@ -3013,10 +2975,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;
@@ -3025,7 +2987,7 @@
       justify-content: center;
   padding: 4px;
 }
-.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(255, 255, 255, 0.4);
   border-radius: 2px;
   height: 5px;
@@ -3034,9 +2996,60 @@
   transition-timing-function: ease-in-out;
   width: 20px;
 }
-.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),
@@ -3059,28 +3072,43 @@
   background-color: rgba(255, 255, 255, 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: #fff;
+.e-carousel .e-carousel-indicators.e-default .e-indicator-bar .e-indicator div {
+  background: #fff;
   border-color: #fff;
 }
-.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: #0d6efd;
   border-color: #0d6efd;
 }
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar {
+  background-color: #fff;
+}
+.e-carousel .e-carousel-indicators.e-dynamic .e-indicator-bars .e-indicator-bar.e-active {
+  background-color: #0d6efd;
+}
+.e-carousel .e-carousel-indicators.e-fraction .e-indicator-bars {
+  color: #fff;
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars {
+  background-color: rgba(13, 110, 253, 0.4);
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
+  background-color: #0d6efd;
+}
 
 /*! component's theme wise override definitions and variables */
 @keyframes hscroll-popup-shadow {
@@ -3752,7 +3780,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 {
@@ -4883,7 +4911,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 {
@@ -4896,7 +4924,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 {
@@ -5288,6 +5316,11 @@
   height: 32px;
   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: 42px;
+  }
+}
 .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;
 }
@@ -5674,6 +5707,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;
 }
@@ -5976,7 +6013,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 {
@@ -6216,7 +6253,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 {
@@ -6229,7 +6266,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 {
@@ -6439,6 +6476,9 @@
 .e-tab .e-tab-header .e-toolbar-item:hover {
   background: inherit;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active:hover {
+  background: inherit;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-ripple-element {
   background: rgba(0, 0, 0, 0.12);
 }
@@ -6494,8 +6534,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 {
@@ -6507,6 +6547,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: #ced4da;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #adb5bd;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #adb5bd;
 }
@@ -6920,6 +6963,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: #6c757d;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #0d6efd;
   border-radius: 4px;
@@ -7080,6 +7127,10 @@
   margin: 0;
   background: inherit;
 }
+.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: #6c757d;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #212529;
   border-color: #0d6efd;
@@ -9379,6 +9430,10 @@ ejs-sidebar {
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
@@ -9904,11 +9959,11 @@ ejs-sidebar {
   color: #0262ef;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
-  background-color: #31373d;
+  background: #31373d;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
-  background-color: #495057;
+  background: #495057;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -9930,17 +9985,17 @@ ejs-sidebar {
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #31373d;
+  background: #31373d;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #495057;
+  background: #495057;
   color: #adb5bd;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: #31373d;
+  background: #31373d;
   color: #adb5bd;
 }
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -9953,17 +10008,17 @@ ejs-sidebar {
 }
 
 .e-breadcrumb-popup {
-  background-color: #343a40;
+  background: #343a40;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #7b848d;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #444c54;
+  background: #444c54;
   color: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #444c54;
+  background: #444c54;
   color: #fff;
 }
 
@@ -10038,12 +10093,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 {
@@ -10057,8 +10116,8 @@ ejs-sidebar {
 .e-appbar.e-light {
   background: #343a40;
   color: #fff;
-  border-color: #343a40;
   border: none;
+  border-color: #343a40;
 }
 .e-appbar.e-light .e-appbar-separator {
   border-left: 1px solid #fff;
@@ -10082,8 +10141,8 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-container.e-inherit {
   background: #343a40;
   color: #fff;
-  border-color: #343a40;
   box-shadow: none;
+  border-color: #343a40;
 }
 .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,