@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/styles/accordion/_layout.scss

@@ -20,20 +20,31 @@
       .e-acrdn-panel {
         font-size: $acrdn-content-font-bgr-size;
 
-        &.e-nested > .e-acrdn-content {
-          padding: 0;
-        }
+        &.e-nested {
 
-        &.e-nested .e-acrdn-content .e-accordion {
-          border: 0;
-        }
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
+            padding: $acrdn-nest-bgr-content-padding;
+          }
 
-        &.e-nested .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
-          padding: $acrdn-nest-second-bgr-header-padding;
-        }
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            padding: $acrdn-nest-bgr-header-padding;
+          }
+
+          > .e-acrdn-content {
+            padding: 0;
+
+            > .e-accordion {
+              border: 0;
+            }
+
+            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+              padding: $acrdn-nest-second-bgr-header-padding;
+            }
 
-        &.e-nested .e-accordion .e-acrdn-item.e-select .e-acrdn-header {
-          padding: $acrdn-nest-bgr-header-padding;
+            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+              padding: $acrdn-nest-second-bgr-content-padding;
+            }
+          }
         }
 
         .e-acrdn-header .e-acrdn-header-content {
@@ -80,24 +91,6 @@
         @if $acrdn-skin == 'highcontrast' {
           font-size: 13px;
         }
-
-        .e-acrdn-panel {
-
-          .e-acrdn-content {
-            padding: $acrdn-nest-bgr-content-padding;
-          }
-
-          .e-acrdn-panel {
-
-            .e-acrdn-content {
-              padding: $acrdn-nest-second-bgr-content-padding;
-              }
-          }
-        }
-
-        .e-acrdn-header {
-          padding: $acrdn-nest-bgr-header-padding;
-        }
       }
     }
 
@@ -105,33 +98,22 @@
 
       .e-acrdn-item.e-select {
 
-        .e-acrdn-panel .e-acrdn-content {
-
-          .e-acrdn-panel.e-nested > .e-acrdn-content {
-            padding: 0;
-           }
+        .e-acrdn-panel.e-nested  {
 
-          .e-acrdn-panel .e-acrdn-content {
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
             padding: $acrdn-rtl-nest-bgr-content-padding;
-           }
-
-          .e-acrdn-panel .e-acrdn-panel.e-nested > .e-acrdn-content {
-            padding: 0;
           }
 
-          .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
-            padding: $acrdn-rtl-nest-second-bgr-content-padding;
-              }
-        }
-
-        .e-acrdn-panel {
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            padding: $acrdn-rtl-nest-bgr-header-padding;
+          }
 
-          &.e-nested .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
             padding: $acrdn-rtl-nest-second-bgr-header-padding;
           }
 
-          &.e-nested .e-accordion .e-acrdn-item.e-select .e-acrdn-header {
-            padding: $acrdn-rtl-nest-bgr-header-padding;
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+            padding: $acrdn-rtl-nest-second-bgr-content-padding;
           }
         }
       }
@@ -335,6 +317,14 @@
 
         &.e-nested {
 
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
+            padding: $acrdn-nest-nrml-content-padding;
+          }
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            padding: $acrdn-nest-nrml-header-padding;
+          }
+
           > .e-acrdn-content {
             padding: 0;
 
@@ -342,13 +332,17 @@
               padding: 0;
             }
 
-            .e-accordion {
+            > .e-accordion {
               border: 0;
             }
 
             .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
               padding: $acrdn-nest-second-nrml-header-padding;
             }
+
+            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+              padding: $acrdn-nest-second-nrml-content-padding;
+            }
           }
 
           .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
@@ -360,20 +354,6 @@
           }
         }
 
-        .e-acrdn-panel {
-
-          .e-acrdn-content {
-            padding: $acrdn-nest-nrml-content-padding;
-          }
-
-          .e-acrdn-panel {
-
-            .e-acrdn-content {
-              padding: $acrdn-nest-second-nrml-content-padding;
-            }
-          }
-        }
-
         .e-acrdn-content {
           line-height: $acrdn-content-line-height;
           overflow: hidden;
@@ -384,14 +364,10 @@
             overflow: hidden;
             text-overflow: ellipsis;
           }
+        }
 
-          .e-acrdn-header {
-            padding: $acrdn-nest-nrml-header-padding;
-          }
-
-          .e-acrdn-header-content {
-            font-size: $acrdn-nest-header-content-font-size;
-          }
+        .e-acrdn-header-content {
+          font-size: $acrdn-nest-header-content-font-size;
         }
       }
 
@@ -404,29 +380,23 @@
 
       .e-acrdn-item {
 
-        .e-acrdn-panel {
+        .e-acrdn-panel.e-nested {
 
-          &.e-nested > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
-            padding: $acrdn-rtl-nest-second-nrml-header-padding;
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
+            padding: $acrdn-rtl-nest-nrml-content-padding;
           }
 
-          .e-acrdn-content .e-acrdn-header {
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
             padding: $acrdn-rtl-nest-nrml-header-padding;
           }
 
-          .e-acrdn-panel {
-
-            .e-acrdn-content {
-              padding: $acrdn-rtl-nest-nrml-content-padding;
-              }
-
-            .e-acrdn-panel {
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+            padding: $acrdn-rtl-nest-second-nrml-header-padding;
+          }
 
-              .e-acrdn-content {
-                padding: $acrdn-rtl-nest-second-nrml-content-padding;
-                }
-              }
-            }
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+            padding: $acrdn-rtl-nest-second-nrml-content-padding;
+          }
         }
 
         .e-acrdn-header {

package/styles/accordion/_material-dark-definition.scss

@@ -34,14 +34,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: 0 48px 0 46px !default;
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 16px !default;
 $acrdn-bgr-content-padding: 16px !default;
-$acrdn-nest-nrml-content-padding: 16px 16px 16px 48px !default;
-$acrdn-nest-bgr-content-padding: 16px 16px 16px 48px !default;
-$acrdn-nest-second-nrml-content-padding: 16px 16px 16px 64px !default;
-$acrdn-nest-second-bgr-content-padding: 16px 16px 16px 64px !default;
-$acrdn-rtl-nest-nrml-content-padding: 16px 48px 16px 16px !default;
-$acrdn-rtl-nest-bgr-content-padding: 16px 48px 16px 16px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 16px 64px 16px 16px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 16px 64px 16px 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-bgr-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-second-nrml-content-padding: 16px 16px 16px 48px !default;
+$acrdn-nest-second-bgr-content-padding: 16px 16px 16px 48px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 16px 48px 16px 16px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 16px 48px 16px 16px !default;
 
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 14px !default;

package/styles/accordion/_material-definition.scss

@@ -30,14 +30,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: 0 48px 0 46px !default;
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 16px !default;
 $acrdn-bgr-content-padding: 16px !default;
-$acrdn-nest-nrml-content-padding: 16px 16px 16px 48px !default;
-$acrdn-nest-bgr-content-padding: 16px 16px 16px 48px !default;
-$acrdn-nest-second-nrml-content-padding: 16px 16px 16px 64px !default;
-$acrdn-nest-second-bgr-content-padding: 16px 16px 16px 64px !default;
-$acrdn-rtl-nest-nrml-content-padding: 16px 48px 16px 16px !default;
-$acrdn-rtl-nest-bgr-content-padding: 16px 48px 16px 16px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 16px 64px 16px 16px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 16px 64px 16px 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-bgr-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-second-nrml-content-padding: 16px 16px 16px 48px !default;
+$acrdn-nest-second-bgr-content-padding: 16px 16px 16px 48px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 16px 48px 16px 16px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 16px 48px 16px 16px !default;
 
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 14px !default;

package/styles/accordion/_tailwind-definition.scss

@@ -18,8 +18,8 @@ $acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
 $acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
 $acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
 $acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
-$acrdn-nrml-header-padding: 7px 12px !default;
-$acrdn-bgr-header-padding: 11px 17px !default;
+$acrdn-nrml-header-padding: 8px 12px !default;
+$acrdn-bgr-header-padding: 12px 16px !default;
 $acrdn-rtl-nrml-header-padding: 7px 12px !default;
 $acrdn-rtl-bgr-header-padding: 11px 17px !default;
 $acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
@@ -30,14 +30,14 @@ $acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
 // Content, Nested content and RTL mode Padding
 $acrdn-nrml-content-padding: 12px !default;
 $acrdn-bgr-content-padding: 16px !default;
-$acrdn-nest-nrml-content-padding: 16px !default;
-$acrdn-nest-bgr-content-padding: 20px !default;
-$acrdn-nest-second-nrml-content-padding: 20px !default;
-$acrdn-nest-second-bgr-content-padding: 24px !default;
-$acrdn-rtl-nest-nrml-content-padding: 16px !default;
-$acrdn-rtl-nest-bgr-content-padding: 20px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 20px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 24px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;
+$acrdn-nest-bgr-content-padding: 20px 20px 20px 28px !default;
+$acrdn-nest-second-nrml-content-padding: 20px 20px 20px 38px !default;
+$acrdn-nest-second-bgr-content-padding: 24px 24px 24px 40px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
 
 $acrdn-nrml-header-icon-padding: 8px !default;
 $acrdn-bgr-header-icon-padding: 12px !default;

package/styles/accordion/_theme.scss

@@ -6,7 +6,7 @@
     background: $acrdn-default-bg-color;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
 
-    @if ($acrdn-skin == 'bootstrap4' or $acrdn-skin == 'bootstrap5') {
+    @if ($acrdn-skin == 'bootstrap4' or $acrdn-skin == 'bootstrap5' or $acrdn-skin == 'FluentUI') {
       border-radius: $acrdn-border-radius;
     }
 
@@ -162,6 +162,16 @@
             background: $acrdn-header-focus-bg;
           }
         }
+
+        @if $acrdn-skin == 'FluentUI' {
+          &:hover {
+            background: $acrdn-header-hover-bg;
+          }
+
+          &:active {
+            background: $acrdn-header-active-bg;
+          }
+        }
       }
 
       .e-acrdn-panel.e-nested {
@@ -276,6 +286,9 @@
           }
           @else {
             background: $acrdn-header-focus-bg;
+            @if $acrdn-skin == 'FluentUI' {
+              border: 1px solid $acrdn-selected-header-font-color;
+            }
           }
           @if $acrdn-skin == 'highcontrast' {
             background: $acrdn-item-header-focus-bg-color;

package/styles/accordion/bootstrap-dark.css

@@ -18,24 +18,34 @@
   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 {
+.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-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-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+.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-accordion .e-acrdn-item.e-select .e-acrdn-header,
-.e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel.e-nested .e-accordion .e-acrdn-item.e-select .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-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,
@@ -69,49 +79,24 @@
   padding: 15px;
 }
 
-.e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-content,
-.e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .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-content .e-acrdn-panel .e-acrdn-panel .e-acrdn-content,
-.e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
-  padding: 15px 15px 15px 60px;
+.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-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-header,
-.e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-header {
+.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-acrdn-content .e-acrdn-panel.e-nested > .e-acrdn-content,
-.e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel.e-nested > .e-acrdn-content {
-  padding: 0;
-}
-
-.e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-content,
-.e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
-  padding: 15px 45px 15px 15px;
-}
-
-.e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-panel.e-nested > .e-acrdn-content,
-.e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-panel.e-nested > .e-acrdn-content {
-  padding: 0;
-}
-
-.e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-panel .e-acrdn-content,
-.e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
-  padding: 15px 60px 15px 15px;
-}
-
-.e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested .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-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+.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-accordion .e-acrdn-item.e-select .e-acrdn-header,
-.e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested .e-accordion .e-acrdn-item.e-select .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-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,
@@ -251,6 +236,14 @@
   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;
 }
@@ -259,7 +252,7 @@
   padding: 0;
 }
 
-.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content .e-accordion {
+.e-accordion .e-acrdn-item .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion {
   border: 0;
 }
 
@@ -267,6 +260,10 @@
   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;
 }
@@ -275,14 +272,6 @@
   font-weight: normal;
 }
 
-.e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
-  padding: 15px 15px 15px 45px;
-}
-
-.e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
-  padding: 15px 15px 15px 60px;
-}
-
 .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
   line-height: 1.5;
   overflow: hidden;
@@ -295,11 +284,7 @@
   text-overflow: ellipsis;
 }
 
-.e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content .e-acrdn-header {
-  padding: 0 30px;
-}
-
-.e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content .e-acrdn-header-content {
+.e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-header-content {
   font-size: 14px;
 }
 
@@ -307,20 +292,20 @@
   display: none;
 }
 
-.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-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-acrdn-content .e-acrdn-header {
+.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-acrdn-panel .e-acrdn-content {
-  padding: 15px 45px 15px 15px;
+.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-acrdn-panel .e-acrdn-panel .e-acrdn-content {
-  padding: 15px 60px 15px 15px;
+.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 {