@syncfusion/ej2-navigations 21.2.9 → 22.1.34

package/styles/highcontrast-light.css

@@ -148,33 +148,11 @@
   border-radius: 0;
   padding: 8px 11px;
 }
-.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: 9px 3px 8px 2px;
-}
-.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: 6px 9px;
-}
-.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: 10px 14px;
-}
-.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: 8px 12px;
-}
-.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: 20px;
   margin-top: -10px;
 }
@@ -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: 9px;
@@ -287,9 +268,6 @@
   padding: 9px 3px 8px 2px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 1px 6px 0;
-}
 .e-pager .e-currentitem {
   font-style: normal;
   font-variant: normal;
@@ -409,7 +387,6 @@
     padding-right: 0;
     padding-top: 0;
     text-align: center;
-    vertical-align: top;
     width: calc(60% - 48px);
   }
   .e-pager .e-pagesizes {
@@ -468,6 +445,7 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 8px;
+  padding-top: 8px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
   margin: -20px 25px 0 0;
@@ -513,7 +491,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;
@@ -533,9 +511,6 @@
   margin: 0;
   padding: 9px 3px 8px 2px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 7px 1px 6px 0;
-}
 .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: 2px;
   padding: 0 11px 9px;
@@ -605,9 +580,6 @@
   color: #000;
   opacity: 1;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #000;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #ecf;
   opacity: 1;
@@ -1172,6 +1144,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.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: 3px;
+}
 .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: 3px;
@@ -2087,7 +2065,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #ecf;
-  border-left: 0;
+  border-left: 1px solid #000;
   color: #000;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -2212,12 +2190,13 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #fff;
   border: solid #000;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #ecf;
   color: #000;
+  border: solid #000;
+  border-width: 0 1px 0 0;
 }
 
 /*! accordion icons */
@@ -2244,6 +2223,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: 0 42px 0 24px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -2338,6 +2318,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid #757575;
 }
+.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;
@@ -2427,6 +2410,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 42px 0 24px;
 }
+.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;
 }
@@ -2605,6 +2591,7 @@
   color: #000;
   background: #fff;
   border-top: 0;
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #000;
@@ -2708,6 +2695,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: #757575;
@@ -2782,6 +2771,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;
 }
@@ -2795,7 +2787,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;
@@ -2805,63 +2797,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-carousel-items {
+  transform: translateX(calc(-100% / var(--carousel-items-count) * var(--carousel-items-current)));
+  transition: transform;
 }
-.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-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 {
-  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-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-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-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: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;
@@ -2869,9 +2833,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;
@@ -2933,7 +2895,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;
@@ -2942,10 +2904,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;
@@ -2954,7 +2916,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(255, 255, 255, 0.4);
   border-radius: 50%;
   height: 12px;
@@ -2963,9 +2925,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),
@@ -2988,28 +3001,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: #400074;
   border-color: #400074;
 }
+.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: #400074;
+}
+.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(64, 0, 116, 0.4);
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
+  background-color: #400074;
+}
 
 /*! contextmenu layout */
 .e-contextmenu-wrapper ul .e-menu-item .e-previous::before,
@@ -3685,7 +3713,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 {
@@ -4816,7 +4844,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 {
@@ -4829,7 +4857,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 {
@@ -5221,6 +5249,11 @@
   height: 36px;
   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: 46px;
+  }
+}
 .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: 0;
 }
@@ -5607,6 +5640,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;
 }
@@ -5909,7 +5946,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-tab.e-background .e-tab-header .e-toolbar-item .e-tab-wrap {
-    padding: 0 12px;
+    padding: 0 10px;
   }
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active {
@@ -6149,7 +6186,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 {
@@ -6162,7 +6199,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 {
@@ -6372,6 +6409,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(255, 255, 255, 0);
 }
@@ -6427,8 +6467,8 @@
   content: "";
   display: block;
   position: absolute;
-  top: 95%;
   width: 100%;
+  top: 95%;
 }
 .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 {
@@ -6440,6 +6480,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: #000;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: #000;
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: #000;
 }
@@ -6853,6 +6896,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: #757575;
+}
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #400074;
   border-radius: 0;
@@ -7013,6 +7060,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: #757575;
+}
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: #400074;
   border-color: #400074;
@@ -9192,6 +9243,10 @@ ejs-sidebar {
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
@@ -9721,10 +9776,10 @@ ejs-sidebar {
   color: #fff;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):hover {
-  background-color: #ecf;
+  background: #ecf;
 }
 .e-breadcrumb .e-breadcrumb-item:not([data-active-item]):not(.e-breadcrumb-separator):active {
-  background-color: #400074;
+  background: #400074;
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
   border: 1px solid #400074;
@@ -9752,12 +9807,12 @@ ejs-sidebar {
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #ecf;
+  background: #ecf;
   color: #000;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #400074;
+  background: #400074;
   color: #000;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
@@ -9775,17 +9830,17 @@ ejs-sidebar {
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #000;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #ecf;
+  background: #ecf;
   color: #000;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #ecf;
+  background: #ecf;
   color: #000;
 }
 
@@ -9860,12 +9915,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 {
@@ -9879,8 +9938,8 @@ ejs-sidebar {
 .e-appbar.e-light {
   background: #fff;
   color: #000;
-  border-color: #000;
   border: 1px solid;
+  border-color: #000;
 }
 .e-appbar.e-light .e-appbar-separator {
   border-left: 1px solid #000;
@@ -9904,8 +9963,8 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-container.e-inherit {
   background: #fff;
   color: #000;
-  border-color: #000;
   box-shadow: none;
+  border-color: #000;
 }
 .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,