@syncfusion/ej2-navigations 21.2.8 → 22.1.34

package/styles/bootstrap4.css

@@ -123,7 +123,7 @@
 .e-bigger .e-pager.e-rtl div.e-parentmsgbar,
 .e-pager.e-bigger.e-rtl div.e-parentmsgbar {
   margin-left: 6px;
-  margin-top: 2px;
+  margin-top: 9px;
 }
 .e-bigger .e-pager .e-numericitem,
 .e-pager.e-bigger .e-numericitem {
@@ -148,33 +148,11 @@
   border-radius: 0;
   padding: 12px 14px 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: 11px 12px 10px 11px;
-}
-.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 14px 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: 12px 14px 13px 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: 12px 14px 13px 14px;
-}
-.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: 16px;
   margin-top: -5px;
 }
@@ -184,7 +162,7 @@
 }
 .e-bigger .e-pager.e-rtl .e-pagerconstant,
 .e-pager.e-bigger.e-rtl .e-pagerconstant {
-  margin: 13px 16px 13px 0;
+  margin: 20px 16px 8px 0;
 }
 .e-bigger .e-pager .e-pagercontainer .e-firstpage,
 .e-bigger .e-pager .e-pagercontainer .e-prevpage,
@@ -230,11 +208,14 @@
 .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;
   padding-right: 0;
-  padding-top: 10px;
+  padding-top: 12px;
 }
 .e-pager .e-pagesizes {
   display: inline;
@@ -287,9 +268,6 @@
   padding: 12px 11px 11px 11px;
   text-decoration: none;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 12px 11px 11px 11px;
-}
 .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,9 +445,10 @@
 .e-pager.e-rtl .e-parentmsgbar {
   float: left;
   margin-left: 6px;
+  padding-top: 10px;
 }
 .e-pager.e-rtl .e-pagerdropdown {
-  margin: -20px 16px 0 0;
+  margin: -16px 16px 0 0;
 }
 .e-pager.e-rtl .e-pagerconstant {
   margin: 8px;
@@ -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: 11px 12px 10px 11px;
 }
-.e-pager.e-rtl .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  padding: 11px 12px 10px 11px;
-}
 .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: 8px 11px 9px 11px;
@@ -605,9 +580,6 @@
   color: #1f496e;
   opacity: 1;
 }
-.e-pager .e-numericitem:hover:not(.e-np):not(.e-pp):not(.e-active) {
-  border-left: 0 solid #ddd;
-}
 .e-pager .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
   background-color: #f2f4f6;
   opacity: 1;
@@ -1175,6 +1147,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 16px;
 }
+.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: 16px;
+}
 .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: 16px;
@@ -2215,12 +2193,13 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f8f9fa;
   border: solid #dee2e6;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #6c757d;
   color: #fff;
+  border: solid #dee2e6;
+  border-width: 0 1px 0 0;
 }
 
 /*! accordion icons */
@@ -2247,6 +2226,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 30px;
 }
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
@@ -2341,6 +2321,9 @@
 .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
   border-bottom: 1px solid rgba(0, 0, 0, 0.13);
 }
+.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;
@@ -2430,6 +2413,9 @@
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 30px;
 }
+.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;
 }
@@ -2608,6 +2594,7 @@
   color: #212529;
   background: #fff;
   border-top: 1px solid rgba(0, 0, 0, 0.13);
+  border-bottom: 0;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #007bff;
@@ -2711,6 +2698,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: #000 #000 rgba(0, 0, 0, 0.13);
@@ -2785,6 +2774,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;
 }
@@ -2798,7 +2790,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;
@@ -2808,63 +2800,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-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-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-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;
@@ -2872,9 +2836,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;
@@ -2936,7 +2898,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;
@@ -2945,10 +2907,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;
@@ -2957,7 +2919,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;
@@ -2966,9 +2928,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),
@@ -2991,28 +3004,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: #007bff;
   border-color: #007bff;
 }
+.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: #007bff;
+}
+.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(0, 123, 255, 0.4);
+}
+.e-carousel .e-carousel-indicators.e-progress .e-indicator-bars .e-indicator-bar {
+  background-color: #007bff;
+}
 
 /*! component's theme wise override definitions and variables */ /*! component's theme wise override definitions and variables */
 /*! contextmenu layout */
@@ -3698,7 +3726,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 {
@@ -4829,7 +4857,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 {
@@ -4842,7 +4870,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 {
@@ -5234,6 +5262,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;
 }
@@ -5620,6 +5653,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;
 }
@@ -5922,7 +5959,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 {
@@ -6162,7 +6199,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 {
@@ -6175,7 +6212,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 {
@@ -6385,6 +6422,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(222, 226, 230, 0);
 }
@@ -6440,8 +6480,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 {
@@ -6453,6 +6493,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: #777;
 }
+.e-tab .e-tab-header .e-toolbar-item.e-active .e-close-icon {
+  color: rgba(0, 0, 0, 0.5);
+}
 .e-tab .e-tab-header .e-toolbar-item .e-close-icon {
   color: rgba(0, 0, 0, 0.5);
 }
@@ -6866,6 +6909,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: #007bff;
   border-radius: 4px;
@@ -7026,6 +7073,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: #007bff;
   border-color: unset;
@@ -9299,6 +9350,10 @@ ejs-sidebar {
   text-indent: inherit;
 }
 
+.e-menu-container .e-vscroll ul {
+  position: relative;
+}
+
 /*! menu theme */
 .e-menu-wrapper,
 .e-menu-container {
@@ -9858,15 +9913,15 @@ ejs-sidebar {
   color: #004a99;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
-  background-color: #ced4da;
+  background: #ced4da;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:focus {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
@@ -9889,17 +9944,17 @@ ejs-sidebar {
 }
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
-  background-color: #ced4da;
+  background: #ced4da;
   color: #495057;
 }
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
-  background-color: #dee2e6;
+  background: #dee2e6;
   color: #495057;
 }
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -9912,17 +9967,17 @@ ejs-sidebar {
 }
 
 .e-breadcrumb-popup {
-  background-color: #fff;
+  background: #fff;
 }
 .e-breadcrumb-popup .e-breadcrumb-text {
   color: #6c757d;
 }
 .e-breadcrumb-popup .e-breadcrumb-text:hover {
-  background-color: #f2f4f6;
+  background: #f2f4f6;
   color: #212529;
 }
 .e-breadcrumb-popup .e-breadcrumb-item .e-breadcrumb-text:focus {
-  background-color: #f2f4f6;
+  background: #f2f4f6;
   color: #212529;
 }
 
@@ -9997,12 +10052,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 {
@@ -10016,8 +10075,8 @@ ejs-sidebar {
 .e-appbar.e-light {
   background: #f8f9fa;
   color: #212529;
-  border-color: #f8f9fa;
   border: none;
+  border-color: #f8f9fa;
 }
 .e-appbar.e-light .e-appbar-separator {
   border-left: 1px solid #212529;
@@ -10041,8 +10100,8 @@ ejs-sidebar {
 .e-appbar.e-light .e-menu-container.e-inherit {
   background: #f8f9fa;
   color: #212529;
-  border-color: #f8f9fa;
   box-shadow: none;
+  border-color: #f8f9fa;
 }
 .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,