@syncfusion/ej2-react-navigations 20.1.48 → 20.1.56

package/CHANGELOG.md

@@ -6,6 +6,40 @@
 
 #### Bug Fixes
 
+- `#I373045` - An issue with "Script error occurs while using keyboard navigation in menu" has been resolved.
+
+### TreeView
+
+#### Bug Fixes
+
+- `#I371505` - The issue with "The TreeView checked node state doesn't update properly for nested levels when loadOnDemand is enabled" has been resolved.
+
+### Tab
+
+#### Bug Fixes
+
+- `#F174831` - An issue with drag not works when adding multiple tab items has been fixed.
+
+## 20.1.51 (2022-04-26)
+
+### TreeView
+
+#### Bug Fixes
+
+- `#I371505` - The issue with "The TreeView checked node state doesn't update properly for nested levels when loadOnDemand is enabled" has been resolved.
+
+### Tab
+
+#### Bug Fixes
+
+- `#F174269` - Tab throws script error while adding items with `headerTemplate` has been fixed.
+
+## 20.1.48 (2022-04-12)
+
+### Menu
+
+#### Bug Fixes
+
 - `#I371293` - Resolved the "Context menu not closed properly when the two separate context menu binded in the DOM" in menu component.
 - `#I369007` - An issue with "Script error throws when we remove items with hamburger mode in mobile view" has been resolved.
 

package/dist/ej2-react-navigations.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-navigations.umd.min.js
-*  version : 20.1.48
+*  version : 20.1.56
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-react-navigations@*",
-  "_id": "@syncfusion/ej2-react-navigations@20.1.47",
+  "_id": "@syncfusion/ej2-react-navigations@20.1.55",
   "_inBundle": false,
-  "_integrity": "sha512-7cx6l0ZvEtPSGoEDnYOFPBOCTHnghVmn8GInN2eIV3zRwsCrPwTsUXCHSWosn2gZXSgNy76bAosj7J81sgn9RA==",
+  "_integrity": "sha512-H6Oc7qMra6Q/aUPyahOGyY2UXjXDCkbdculqPj8YX+l17IrnZkGML+gB2xcXHQV3OdUGOaNXL61xd/5C+4weAA==",
   "_location": "/@syncfusion/ej2-react-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -19,8 +19,8 @@
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-navigations/-/ej2-react-navigations-20.1.47.tgz",
-  "_shasum": "ef31067e35c71bc88f1af3a559b855a9d3e14480",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-react-navigations/-/ej2-react-navigations-20.1.55.tgz",
+  "_shasum": "1e7b0913cca1d06c3c093de2b84274ae9b03c5ed",
   "_spec": "@syncfusion/ej2-react-navigations@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -31,9 +31,9 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.48",
-    "@syncfusion/ej2-navigations": "20.1.48",
-    "@syncfusion/ej2-react-base": "~20.1.47"
+    "@syncfusion/ej2-base": "~20.1.56",
+    "@syncfusion/ej2-navigations": "20.1.56",
+    "@syncfusion/ej2-react-base": "~20.1.55"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for React",
@@ -166,6 +166,6 @@
     "type": "git",
     "url": "git+https://github.com/syncfusion/ej2-react-ui-components.git"
   },
-  "version": "20.1.48",
+  "version": "20.1.56",
   "sideEffects": false
 }

package/src/accordion/items-directive.d.ts

@@ -16,7 +16,9 @@ export interface AccordionItemDirTypecast {
  * </AccordionComponent>
  * ```
  */
-export declare class AccordionItemDirective extends ComplexBase<AccordionItemModel | AccordionItemDirTypecast, AccordionItemModel | AccordionItemDirTypecast> {
+export declare class AccordionItemDirective extends ComplexBase<AccordionItemModel | AccordionItemDirTypecast & {
+    children?: React.ReactNode;
+}, AccordionItemModel | AccordionItemDirTypecast> {
     static moduleName: string;
 }
 export declare class AccordionItemsDirective extends ComplexBase<{}, {}> {

package/src/breadcrumb/items-directive.d.ts

@@ -12,7 +12,9 @@ import { BreadcrumbItemModel } from '@syncfusion/ej2-navigations';
  * </BreadcrumbComponent>
  * ```
  */
-export declare class BreadcrumbItemDirective extends ComplexBase<BreadcrumbItemModel, BreadcrumbItemModel> {
+export declare class BreadcrumbItemDirective extends ComplexBase<BreadcrumbItemModel & {
+    children?: React.ReactNode;
+}, BreadcrumbItemModel> {
     static moduleName: string;
 }
 export declare class BreadcrumbItemsDirective extends ComplexBase<{}, {}> {

package/src/carousel/items-directive.d.ts

@@ -15,7 +15,9 @@ export interface CarouselItemDirTypecast {
  * </CarouselComponent>
  * ```
  */
-export declare class CarouselItemDirective extends ComplexBase<CarouselItemModel | CarouselItemDirTypecast, CarouselItemModel | CarouselItemDirTypecast> {
+export declare class CarouselItemDirective extends ComplexBase<CarouselItemModel | CarouselItemDirTypecast & {
+    children?: React.ReactNode;
+}, CarouselItemModel | CarouselItemDirTypecast> {
     static moduleName: string;
 }
 export declare class CarouselItemsDirective extends ComplexBase<{}, {}> {

package/src/menu/items-directive.d.ts

@@ -1,6 +1,8 @@
 import { ComplexBase } from '@syncfusion/ej2-react-base';
 import { MenuItemModel } from '@syncfusion/ej2-navigations';
-export declare class MenuItemDirective extends ComplexBase<MenuItemModel, MenuItemModel> {
+export declare class MenuItemDirective extends ComplexBase<MenuItemModel & {
+    children?: React.ReactNode;
+}, MenuItemModel> {
     static moduleName: string;
 }
 export declare class MenuItemsDirective extends ComplexBase<{}, {}> {

package/src/tab/items-directive.d.ts

@@ -17,7 +17,9 @@ export interface TabItemDirTypecast {
  * </TabComponent>
  * ```
  */
-export declare class TabItemDirective extends ComplexBase<TabItemModel | TabItemDirTypecast, TabItemModel | TabItemDirTypecast> {
+export declare class TabItemDirective extends ComplexBase<TabItemModel | TabItemDirTypecast & {
+    children?: React.ReactNode;
+}, TabItemModel | TabItemDirTypecast> {
     static moduleName: string;
     static complexTemplate: Object;
 }

package/src/toolbar/items-directive.d.ts

@@ -15,7 +15,9 @@ export interface ItemDirTypecast {
  * </ToolbarComponent>
  * ```
  */
-export declare class ItemDirective extends ComplexBase<ItemModel | ItemDirTypecast, ItemModel | ItemDirTypecast> {
+export declare class ItemDirective extends ComplexBase<ItemModel | ItemDirTypecast & {
+    children?: React.ReactNode;
+}, ItemModel | ItemDirTypecast> {
     static moduleName: string;
 }
 export declare class ItemsDirective extends ComplexBase<{}, {}> {

package/styles/accordion/bootstrap-dark.css

@@ -1,8 +1,7 @@
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
-  content: '\e916';
+  content: "\e916";
 }
-
 .e-accordion .e-tgl-collapse-icon.e-expand-icon {
   transform: rotate(-180deg);
 }
@@ -12,54 +11,44 @@
 .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-size: 16px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel {
   font-size: 14px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 15px 15px 15px 30px;
 }
-
 .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 {
   padding: 0 30px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion {
   border: 0;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
   padding: 0 30px 0 45px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
   padding: 15px 15px 15px 45px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-header .e-acrdn-header-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-header .e-acrdn-header-content {
   font-size: 14px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header {
   line-height: 48px;
   min-height: 50px;
   padding: 0 30px 0 15px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-toggle-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-toggle-icon {
   height: 50px;
@@ -67,49 +56,40 @@
   min-width: 24px;
   right: 15px;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
   display: inline-block;
   padding: 0 10px 0 0;
 }
-
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
   padding: 15px;
 }
-
 .e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content,
 .e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 15px 30px 15px 15px;
 }
-
 .e-bigger .e-accordion.e-rtl .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-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
   padding: 0 30px;
 }
-
 .e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header,
 .e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
   padding: 0 45px 0 30px;
 }
-
 .e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content,
 .e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
   padding: 15px 45px 15px 15px;
 }
-
 .e-bigger .e-accordion.e-rtl .e-acrdn-item .e-acrdn-header,
 .e-accordion.e-bigger.e-rtl .e-acrdn-item .e-acrdn-header {
   padding: 0 15px 0 30px;
 }
-
 .e-bigger .e-accordion.e-rtl .e-acrdn-item .e-acrdn-header .e-toggle-icon,
 .e-accordion.e-bigger.e-rtl .e-acrdn-item .e-acrdn-header .e-toggle-icon {
   left: 15px;
   right: auto;
 }
-
 .e-bigger .e-accordion.e-rtl .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion.e-bigger.e-rtl .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   padding: 0 0 0 10px;
@@ -119,75 +99,58 @@
   display: block;
   position: relative;
 }
-
 .e-accordion .e-acrdn-item {
   border-radius: 4px;
   margin-top: 5px;
 }
-
 .e-accordion .e-acrdn-item .nested .e-acrdn-item + .e-acrdn-item {
   margin-top: 0;
 }
-
 .e-accordion .e-acrdn-item:not(.e-select) {
   margin-top: 5px;
 }
-
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
   margin-bottom: 0;
   margin-top: 0;
 }
-
 .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item.e-select {
   margin-top: 5px;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-header {
   border: 0;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
   margin: 2px;
 }
-
 .e-accordion .e-acrdn-item > .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;
 }
-
 .e-accordion .e-acrdn-item.e-selected {
   padding-top: 0;
 }
-
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;
 }
-
 .e-accordion .e-acrdn-item.e-overlay {
   height: auto;
 }
-
 .e-accordion .e-acrdn-item {
   overflow: hidden;
   padding-top: 0;
   position: relative;
 }
-
 .e-accordion .e-acrdn-item.e-hide {
   display: none;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-size: 16px;
 }
-
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header {
   cursor: pointer;
 }
-
 .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
   text-decoration: underline;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header {
   border-radius: 4px;
   line-height: 39px;
@@ -198,11 +161,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
   display: inline-block;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
   display: none;
   font-size: 12px;
@@ -213,110 +174,86 @@
   right: 15px;
   top: 0;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon .e-tgl-collapse-icon.e-icons {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-animation {
-  transition: .5s ease 0s;
+  transition: 0.5s ease 0s;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   display: inline-block;
   padding: 0 10px 0 0;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel {
   font-size: 14px;
   overflow-y: hidden;
   text-decoration: none;
   width: 100%;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 15px 15px 15px 30px;
 }
-
 .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 {
   padding: 0;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content .e-acrdn-panel.e-nested > .e-acrdn-content {
   padding: 0;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion {
   border: 0;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
   padding: 0 30px 0 45px;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
   padding: 15px 15px 15px 45px;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
   font-weight: normal;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-weight: normal;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
   line-height: 1.5;
   overflow: hidden;
   padding: 15px;
   text-overflow: ellipsis;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content > * {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-header-content {
   font-size: 14px;
 }
-
 .e-accordion .e-acrdn-item .e-content-hide {
   display: none;
 }
-
 .e-accordion.e-rtl .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
   padding: 15px 30px 15px 15px;
 }
-
 .e-accordion.e-rtl .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-rtl .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
   padding: 0 45px 0 30px;
 }
-
 .e-accordion.e-rtl .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
   padding: 15px 45px 15px 15px;
 }
-
 .e-accordion.e-rtl .e-acrdn-item .e-acrdn-header {
   padding: 0 15px 0 30px;
 }
-
 .e-accordion.e-rtl .e-acrdn-item .e-acrdn-header .e-toggle-icon {
   left: 15px;
   right: auto;
 }
-
 .e-accordion.e-rtl .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   padding: 0 0 0 10px;
 }
@@ -327,101 +264,76 @@
   background: #1a1a1a;
   border: 1px none #505050;
 }
-
 .e-accordion .e-active {
   background: #484848;
 }
-
 .e-accordion .e-acrdn-item.e-overlay {
   background: #1a1a1a;
 }
-
 .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus {
   background: transparent;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-header .e-acrdn-header-content {
   color: #3e98ff;
 }
-
 .e-accordion .e-acrdn-item.e-select {
   background: #1a1a1a;
   border: 1px solid #505050;
 }
-
 .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
   color: #f0f0f0;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   color: #3e98ff;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
   color: #3e98ff;
 }
-
 .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
   background: transparent;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header:hover {
   background: transparent;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header:active {
   background: transparent;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-header:focus {
   background: transparent;
 }
-
-.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
-.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
+.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
   background: #484848;
 }
-
-.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon,
-.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
+.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
   color: #fff;
 }
-
 .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
-.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
-.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
+.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
 .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
   color: #f0f0f0;
 }
-
 .e-accordion .e-acrdn-item.e-selected {
   border: 1px solid #505050;
 }
-
 .e-accordion .e-acrdn-item.e-selected + .e-selected {
   border: 1px solid #505050;
   border-top: 1px none #505050;
 }
-
 .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
   background: #484848;
   border: 0;
   border-bottom: 1px solid #505050;
   border-radius: 0;
 }
-
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-content {
   color: #f0f0f0;
 }
-
 .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-header-content {
   color: #fff;
 }
-
 .e-accordion .e-acrdn-item .e-toggle-icon {
   color: #3e98ff;
 }
-
 .e-accordion .e-acrdn-item .e-acrdn-panel {
   font-size: 14px;
-}
+}