@syncfusion/ej2-angular-pivotview 24.1.43 → 24.1.44-ngcc

package/styles/pivotview/_theme.scss

@@ -1,2049 +0,0 @@
-@include export-module('pivotview-theme') {
-
-  /*! PivotView theme */
-  .e-pivotview {
-    .e-pivotcell-container {
-      align-items: center;
-      display: flex;
-      max-height: inherit;
-
-      .e-stackedheadertext,
-      .e-headertext {
-        &.e-cellvalue {
-          align-self: stretch;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          width: 100%;
-        }
-      }
-
-      .e-sortfilterdiv.e-value-sort-icon {
-        align-items: center;
-        display: flex;
-      }
-    }
-
-    .e-gridclip .e-pivotcell-container {
-      .e-stackedheadertext,
-      .e-headertext {
-        &.e-cellvalue {
-          text-overflow: clip;
-        }
-      }
-    }
-
-    .e-nextspan {
-      display: inline-block;
-      width: $pivotview-indent-space-size;
-    }
-
-    .e-lastspan {
-      display: inline-block;
-      padding-top: 10px;
-      width: 12px;
-    }
-
-    .e-grid.e-gridhover tr[role = 'row']:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
-      background-color: $pivotgrid-cell-hover-color;
-    }
-
-    .e-rowsheader .e-cellvalue {
-      margin-left: 10px;
-    }
-
-    .e-valuescontent {
-      padding-right: 8px;
-      text-align: right;
-    }
-
-    .e-grid .e-rowcell {
-      /* stylelint-disable */
-      font-size: $pivotgrid-content-font-size !important;
-      padding-left: 8px;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-    }
-
-    .e-grid .e-content-virtualtable {
-      overflow-x: auto;
-      scrollbar-width: none; /* firefox */
-
-      &::-webkit-scrollbar {
-        display: none; /* safari, chrome and edge */
-      }
-    }
-
-    .e-gtot,
-    .e-gtot.e-rowsheader,
-    .e-gtot.e-columnsheader,
-    .e-grid .e-content,
-    .e-grid .e-gridheader {
-      background: $pivotgrid-gtot-background-color;
-    }
-
-    .e-headercell:not(.e-columnsheader) {
-      background: $pivotgrid-gtot-background-color !important;
-    }
-
-    .e-grid .e-gridheader {
-      border-bottom-width: 1px;
-      @if($skin-name == 'bootstrap5') {
-        border-bottom-color: $border-light;
-      }
-
-      table th[rowspan = '1'],
-      table th:not([rowspan]) {
-        padding-bottom: 0 !important;
-        padding-top: 0 !important;
-        vertical-align: middle;
-      }
-    }
-
-    .e-gtot {
-      font-weight: $pivotgrid-summary-font-weight;
-    }
-
-    .e-gtot
-    .e-cellvalue {
-      color: $pivotgrid-gtot-font-color;
-    }
-
-    .e-rowsheader,
-    .e-columnsheader {
-      background: $pivotgrid-header-background-color;
-    }
-
-    .e-rowsheader {
-      .e-cellvalue {
-        margin-left: $pivotgrid-rowsheader-cellvalue-margin-left;
-        margin-top: $pivotgrid-rowsheader-cellvalue-margin-top;
-
-        @if ($skin-name == 'tailwind') or ($skin-name == 'Material3') {
-          vertical-align: middle;
-        }
-      }
-    }
-
-    .e-pivot-conditional-empty-format {
-      margin: 10px;
-    }
-
-    .e-member-editor-dialog,
-    .e-olap-editor-dialog {
-      // sass-lint:disable-all
-      min-height: 350px !important;
-      min-width: 320px !important;
-      visibility: hidden;
-      &.e-node-limit {
-        max-height: 450px !important;
-      }
-      // sass-lint:enable-all
-    }
-
-    .e-member-editor-dialog .e-toolbar .e-toolbar-items {
-      margin-left: $pivotview-filter-toolbar-items-margin-left;
-    }
-
-    .e-member-editor-dialog .e-rtl.e-toolbar .e-toolbar-items {
-      margin-left: 0;
-      margin-right: $pivotview-filter-toolbar-items-margin-right;
-    }
-
-    .e-pivot-format-dialog {
-      .e-pivot-format-table {
-        width: 100%;
-      }
-    }
-
-    .e-toolbar .e-tbar-btn {
-      background-color: transparent;
-
-      @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
-        border: none !important;
-      }
-
-      &:hover {
-        @if ($skin-name == 'tailwind') {
-          background-color: $pivot-toolbar-icon-hover-color;
-        }
-      }
-    }
-
-    .e-grid .e-rowsheader.e-active,
-    .e-grid .e-rowsheader.e-cellselectionbackground,
-    .e-grid .e-columnsheader.e-active,
-    .e-grid .e-columnsheader.e-cellselectionbackground,
-    .e-grid .e-rowsheader.e-active,
-    .e-grid .e-rowsheader.e-selectionbackground,
-    .e-grid .e-columnsheader.e-active,
-    .e-grid .e-columnsheader.e-selectionbackground {
-      background: $pivotgrid-header-selection-bg-color !important;
-      color: $pivotgrid-header-selection-color !important;
-
-      .e-stackedheadercelldiv,.e-cellvalue,
-      .e-icons {
-        color: $pivotgrid-header-selection-color !important;
-      }
-
-      .e-headertext {
-        color: $pivotgrid-header-selection-color !important;
-      }
-    }
-
-    .e-drop-indicator {
-      display: block;
-    }
-
-    div {
-      div span.e-value-sort-icon {
-        @if ($skin-name == 'Material3') {
-          padding: 0 !important;
-        }
-      }
-    }
-
-    .e-sortfilterdiv {
-      .e-value-sort-icon {
-        float: right;
-        @if ($pivotgrid-skin == 'bootstrap4') {
-          font-size: 10px !important;
-        }
-        @if ($skin-name == 'bootstrap5') {
-          font-size: 12px !important;
-        }
-        @if ($skin-name == 'FluentUI') {
-          font-size: 14px !important;
-        }
-
-        &.e-value-sort-icon {
-          font-size: $pivotgrid-value-sort-icon-font-size !important;
-        }
-      }
-
-      &:not(.e-value-sort-icon) {
-        display: none;
-      }
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-column-margin !important;
-    }
-
-    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-column-parent-margin !important;
-    }
-
-    .e-stackedheadercelldiv, .e-headercelldiv {
-      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
-        margin: $pivotgrid-cell-value-margin !important;
-        margin-left: auto !important;
-        padding-bottom: $pivotgrid-cell-value-margin !important;
-        padding-top: $pivotgrid-cell-value-margin !important;
-      }
-    }
-
-    .e-rowsheader .e-sortfilterdiv {
-      margin: $pivotgrid-vsort-row-margin !important;
-    }
-
-    .e-rowsheader .e-sortfilterdiv.e-value-sort-align {
-      margin: $pivotgrid-vsort-row-parent-margin !important;
-    }
-
-    .e-pivotchart > svg, .e-pivotchart-inner > svg {
-      border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
-    }
-
-    .e-grid .e-icons {
-      color: $pivotgrid-button-icon-color !important;
-      @if ($pivotgrid-skin == 'bootstrap4') {
-        color: $gray-700 !important;
-      }
-
-      @if ($skin-name == 'bootstrap5') {
-        color: $pivotview-grid-header-font-color !important;
-      }
-
-      &:hover {
-        color: $pivotgrid-icon-hover-color !important;
-        @if ($pivotgrid-skin == 'bootstrap4') {
-          color: $gray-700 !important;
-        }
-
-        @if ($skin-name == 'bootstrap5') {
-          color: $pivotview-grid-header-font-color !important;
-        }
-      }
-    }
-
-    .e-grid {
-      border-color: $pivotgrid-default-border-color;
-    }
-
-    .e-grid .e-rowsheader {
-      padding-left: 8px;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      -webkit-touch-callout: none;
-
-      @if ($skin-name == 'tailwind') {
-        padding-left: 12px;
-      }
-      
-      &.e-active {
-        .e-icons {
-          color: $pivotgrid-button-active-icon-color !important;
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            color: $gray-700 !important;
-          }
-
-          @if ($skin-name == 'bootstrap5') {
-            color: $pivotview-grid-header-font-color !important;
-          }
-        }
-      }
-    }
-
-    &.sf-pivotview {
-      .e-spinner-pane.e-pivot-outer-spinner {
-        z-index: 1 !important;
-      }
-
-      .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
-        visibility: hidden !important;
-        /* stylelint-enable */
-      }
-  
-      .e-grid {
-        .e-pivot-content-loader {
-          position: absolute;
-          z-index: 10;
-          color: $pivotgrid-primary-color;
-          font-size: 20px;
-          text-align: center;
-          padding: 10%;
-          pointer-events: none;
-          
-          &.e-hide-loader {
-            display: none;
-          }
-        }
-        .e-virtual-pivot-content {
-          visibility: hidden;
-        }
-      }
-
-      &.e-device .e-pivotcell-container .e-stackedheadertext.e-cellvalue {
-        align-self: center;
-      }
-
-      th.e-columnsheader .e-rhandler.e-rcursor {
-        /* stylelint-disable */
-        height: 100% !important;
-        /* stylelint-enable */
-      }
-    }
-
-    .e-grid .e-headercelldiv,
-    .e-grid .e-columnsheader {
-      /* stylelint-disable */
-      padding-left: 8px !important;
-
-      @if($skin-name == 'tailwind') or ($skin-name == 'tailwind-dark') {
-        text-transform: none;
-      }
-    }
-
-    .sf-grid .e-spinner-pane {
-    z-index: 1 !important;
-    }
-
-    .e-grid .e-headercelldiv,
-    .e-grid .e-columnsheader {
-      padding-right: 8px !important;
-    }
-
-    .e-grid .e-headercelldiv,
-    .e-grid .e-stackedheadercelldiv {
-      line-height: normal;
-    }
-
-    .e-frozenheader>.e-table,
-    .e-frozencontent>.e-table {
-      border-left-color: $pivotgrid-default-border-color !important;
-      border-right-color: $pivotgrid-default-border-color !important;
-      border-left: 0;
-      border-right-width: 1px;
-    }
-
-    .e-leftfreeze.e-freezeleftborder {
-      border-left-color: $pivotgrid-default-border-color !important;
-      border-right-color: $pivotgrid-default-border-color !important;
-      border-right-width: 1px !important;
-
-      &:not(.e-gtot) {
-        background: $pivotgrid-header-background-color;
-      }
-    }
-
-    .e-stackedheadercelldiv {
-      display: block;
-    }
-
-    .e-stackedheadertext.e-cellvalue,
-    .e-stackedheadercelldiv.e-cellvalue {
-      display: inline-block;
-      padding-left: 12px !important;
-    }
-
-    .e-headercelldiv.e-cellvalue {
-      @if($pivotgrid-skin == 'bootstrap4') or ($pivotgrid-skin == 'bootstrap') or ($pivotgrid-skin == 'bootstrap-dark') or ($pivotgrid-skin == 'material-dark') or ($pivotgrid-skin == 'material') {
-        margin-left: 0px;
-      }
-    }
-
-    .e-stackedheadercelldiv {
-      padding: 0 0 0 1px !important;
-    }
-
-    .e-stackedheadercelldiv,
-    .e-stackedheadertext,
-    .e-headertext,
-    .e-rowsheader .e-cellvalue {
-      color: $pivotview-grid-header-font-color;
-      font-size: $pivotview-grid-header-font-size;
-      font-weight: $pivotview-grid-header-font-weight;
-
-        .e-hyperlinkcell {
-          //   color: $pivotview-grid-header-font-color;
-          cursor: pointer;
-
-          //   &:hover {
-          //     color: $pivotgrid-active-color;
-          //   }    
-        }
-    }
-
-    .e-valuescontent .e-cellvalue {
-      .e-hyperlinkcell {
-        //     color: $pivotgrid-default-font-color;
-        cursor: pointer;
-
-        //     &:hover {
-        //       color: $pivotgrid-active-color;
-        //     }
-      }
-    }
-
-    .e-valuescontent {
-      opacity: $pivotview-grid-content-opacity !important;
-    }
-
-    /* stylelint-enable */
-
-    .e-rowcell {
-      opacity: 1;
-
-      /* stylelint-disable */
-      .e-cellvalue {
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-      }
-
-      /* stylelint-enable */
-    }
-
-    .e-grouping-bar {
-      .e-right-axis-fields {
-        flex: auto;
-      }
-
-      .e-left-axis-fields,
-      .e-right-axis-fields {
-        height: auto;
-      }
-
-      .e-left-axis-fields {
-        min-width: 250px;
-      }
-
-      .e-axis-row,
-      .e-axis-column,
-      .e-axis-value,
-      .e-axis-filter,
-      .e-group-all-fields {
-        background: $pivotgrid-grp-bg-color;
-        display: flex;
-      }
-
-      .e-left-axis-fields {
-        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
-        border-bottom-width: 0;
-        border-right-width: 0;
-      }
-
-      /* stylelint-disable */
-      .e-all-fields-axis {
-        background: $pivotgrid-grp-bg-color;
-        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
-        border-bottom-width: 0;
-        height: $pivotgrid-grouping-height !important;
-        min-height: $pivotgrid-grouping-height !important;
-
-        @if($skin-name == 'FluentUI') {
-          box-shadow: none;
-        }
-
-        .e-hscroll .e-scroll-nav {
-          background: $pivotgrid-grp-bg-color;
-          min-height: $pivotgrid-grouping-height !important;
-
-          &:hover {
-            background-color: $pivotgrid-hover-color;
-            @if ($pivotgrid-skin == 'bootstrap4') {
-              background-color: $pivotgrid-bg-color;
-            }
-  
-            .e-nav-arrow {
-              color: $pivotgrid-icon-hover-color !important;
-            }
-          }
-        }
-
-        .e-toolbar-items {
-          background: $pivotgrid-grp-bg-color;
-          min-height: $pivotgrid-grouping-height !important;
-
-          .e-toolbar-item {
-            margin: 0 !important;
-            min-height: $pivotgrid-grouping-height !important;
-            padding: 0 !important;
-          }
-        }
-      }
-      /* stylelint-enable */
-
-      .e-right-axis-fields {
-        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
-        border-bottom-width: 0;
-
-        .e-axis-filter {
-          border-bottom: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
-        }
-      }
-    }
-
-    .e-group-values,
-    .e-group-columns,
-    .e-group-filters,
-    .e-group-rows,
-    .e-group-all-fields {
-      background: $pivotgrid-grp-bg-color;
-      display: inline-table;
-      flex: auto;
-      height: $pivotgrid-grouping-height;
-      min-height: $pivotgrid-grouping-height;
-      overflow: hidden;
-      padding-left: $pivotview-axis-indent-padding;
-      scroll-behavior: smooth;
-      vertical-align: top;
-
-      &.e-drag-restrict {
-        cursor: no-drop;
-      }
-
-      .e-draggable-prompt {
-        color: $pivotgrid-prompt-default-font-color;
-        display: inline-block;
-        line-height: $pivotgrid-prompt-line-height;
-        margin-top: 4px;
-        padding-left: $pivotgrid-horizontal-button-padding;
-        pointer-events: none;
-        position: relative;
-        text-align: center;
-        vertical-align: middle;
-        @if ($pivotgrid-skin == 'bootstrap4') {
-          font-size: 12px;
-        }
-
-        @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
-          font-size: $pivotgrid-content-font-size;
-          font-weight: normal;
-        }
-      }
-    }
-
-    .e-grouping-bar,
-    .e-group-rows {
-
-      .e-pvt-btn-div {
-        display: inline-flex;
-        height: 24px;
-        padding: $pivotgrid-vertical-button-padding;
-        padding-bottom: 0;
-        padding-left: 0;
-        padding-right: $pivotgrid-horizontal-button-padding;
-
-        .e-indent-div {
-          pointer-events: none;
-        }
-
-        .e-drop-indicator {
-          pointer-events: none;
-          width: 2px;
-
-          &.e-drop-hover {
-            border-left: 1px dashed $pivotgrid-drop-hover-color;
-            @if ($skin-name == 'tailwind') {
-              border-left: 1px solid $pivotgrid-drop-hover-color;
-            }
-
-            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
-              border-left: 1px solid $pivotgrid-drop-hover-color;
-            }
-          }
-        }
-      }
-
-      .e-pivot-button {
-        align-items: center;
-        background: $pivotgrid-button-background-color;
-        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-button-border-color;
-        border-radius: $pivotgrid-button-border-radius;
-        box-shadow: none;
-        /* stylelint-disable */
-        color: $pivotgrid-button-font-color !important;
-        /* stylelint-enable */
-        cursor: default;
-        display: flex;
-        font-weight: normal;
-        height: 24px;
-        padding: 0 8px;
-        text-transform: none;
-        vertical-align: bottom;
-        z-index: 1;
-
-        &.e-list-selected {
-          opacity: .5;
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            opacity: .7;
-          }
-        }
-
-        &:hover {
-          background: $pivotgrid-hover-color;
-          @if ($skin-name != 'Material3') {
-            border-color: $pivotgrid-hover-color;
-          }
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: $pivotgrid-bg-color;
-            border-color: $pivotgrid-border-color;
-          }
-
-          .e-sort,
-          .e-dropdown-icon,
-          .e-pv-filter,
-          .e-pv-filtered,
-          .e-remove,
-          .e-edit {
-            color: $pivotgrid-icon-hover-color;
-          }
-        }
-
-        &.e-btn-focused {
-          background-color: $pivotgrid-focus-color;
-          color: $pivotgrid-button-acitve-font-color;
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: $pivotgrid-border-color;
-            border-color: $pivotgrid-active-border-color;
-            box-shadow: 0 0 0 .2rem $pivotgrid-box-shadow-color;
-          }
-
-          .e-sort,
-          .e-dropdown-icon,
-          .e-pv-filter,
-          .e-pv-filtered,
-          .e-remove,
-          .e-edit {
-            color: $pivotgrid-icon-focus-color;
-          }
-        }
-
-        &:focus,
-        &:active {
-          background-color: $pivotgrid-focus-color;
-          color: $pivotgrid-button-acitve-font-color;
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            background-color: $pivotgrid-border-color;
-            border-color: $pivotgrid-active-border-color;
-            box-shadow: 0 0 0 .2rem $pivotgrid-box-shadow-color;
-          }
-
-          .e-sort,
-          .e-dropdown-icon,
-          .e-pv-filter,
-          .e-pv-filtered,
-          .e-remove,
-          .e-edit {
-            color: $pivotgrid-icon-focus-color;
-          }
-        }
-
-        .e-pvt-btn-content {
-          background: transparent;
-          cursor: move;
-          flex: auto;
-          font-size: $pivotgrid-button-font-size;
-          margin-right: 4px;
-          overflow: hidden;
-          text-align: left;
-          text-overflow: ellipsis;
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            margin-right: 4px;
-          }
-
-          @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
-            color: $pivotgrid-button-icon-color;
-          }
-
-          &.e-disable-drag {
-            cursor: auto;
-          }
-        }
-
-        /* stylelint-disable */
-        .e-drag {
-          display: none;
-        }
-
-        .e-sort,
-        .e-dropdown-icon,
-        .e-pv-filter,
-        .e-pv-filtered,
-        .e-remove,
-        .e-edit {
-          color: $pivotgrid-button-icon-color;
-          cursor: pointer;
-          display: inline-block;
-          font-size: $pivotgrid-button-icon-size;
-          margin-left: 4px;
-          width: $pivotgrid-button-icon-wrapper-size;
-
-          &:hover {
-            color: $pivotgrid-icon-hover-color;
-          }
-
-          &.e-disable {
-            display: none;
-          }
-        }
-        /* stylelint-enable */
-
-        .e-sort {
-          height: $pivotgrid-button-icon-size;
-          transform: rotateX(0deg);
-          transition: transform 200ms ease-in-out;
-
-          &.e-descend {
-            transform: rotateX(180deg);
-          }
-        }
-
-        .e-dropdown-icon {
-          margin-top: 1px;
-        }
-      }
-    }
-
-    .e-group-values {
-      .e-pvt-btn-div {
-        .e-pivot-button {
-          max-width: 230px;
-        }
-      }
-    }
-
-    .e-group-filters,
-    .e-group-columns {
-      width: 100%;
-    }
-
-    th.e-group-row .e-axis-row {
-      display: inline-block;
-      height: 100%;
-      vertical-align: top;
-      width: 100%;
-    }
-
-    /* stylelint-disable */
-    .e-group-row {
-      padding: 0 !important;
-
-      .e-group-rows {
-        display: table;
-        flex: none;
-        width: 100%;
-
-        .e-pvt-btn-div {
-          max-width: unset;
-          width: 100%;
-
-          .e-indent-div {
-            pointer-events: none;
-          }
-        }
-      }
-    }
-
-    .e-group-row {
-      .e-group-rows {
-        .e-pvt-btn-div {
-          .e-pivot-button {
-            width: 180px;
-            @if ($pivotgrid-skin == 'bootstrap4') {
-              font-weight: 400;
-            }
-
-            &:hover {
-              background-color: $pivotgrid-hover-color;
-              @if ($pivotgrid-skin == 'bootstrap4') {
-                background-color: $pivotgrid-bg-color;
-                border-color: $pivotgrid-border-color;
-              }
-    
-              .e-sort,
-              .e-dropdown-icon,
-              .e-pv-filter,
-              .e-pv-filtered,
-              .e-remove,
-              .e-edit {
-                color: $pivotgrid-icon-hover-color  !important;
-              }
-            }
-
-            &.e-btn-focused {
-              background-color: $pivotgrid-focus-color;
-              color: $pivotgrid-button-acitve-font-color;
-
-              @if ($pivotgrid-skin =='bootstrap4') {
-                background-color: $pivotgrid-border-color;
-                border-color: $pivotgrid-active-border-color;
-                box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
-              }
-
-              .e-sort,
-              .e-dropdown-icon,
-              .e-pv-filter,
-              .e-pv-filtered,
-              .e-remove,
-              .e-edit {
-                color: $pivotgrid-icon-focus-color  !important;
-              }
-            }
-    
-            &:focus,
-            &:active {
-              background-color: $pivotgrid-focus-color;
-              color: $pivotgrid-button-acitve-font-color;
-              @if ($pivotgrid-skin == 'bootstrap4') {
-                background-color: $pivotgrid-border-color;
-                border-color: $pivotgrid-active-border-color;
-                box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
-              }
-    
-              .e-sort,
-              .e-dropdown-icon,
-              .e-pv-filter,
-              .e-pv-filtered,
-              .e-remove,
-              .e-edit {
-                color: $pivotgrid-icon-focus-color !important;
-              }
-            }
-    
-            .e-sort,
-            .e-dropdown-icon,
-            .e-pv-filter,
-            .e-pv-filtered,
-            .e-remove,
-            .e-edit {
-              color: $pivotgrid-button-icon-color !important;
-              font-size: $pivotgrid-button-icon-size;
-              margin-left: 4px !important;
-              width: $pivotgrid-button-icon-wrapper-size;
-    
-              &:hover {
-                color: $pivotgrid-icon-hover-color;
-              }
-    
-              &.e-disable {
-                display: none;
-              }
-            }
-    
-            .e-sort {
-              height: $pivotgrid-button-icon-size;
-              width: 18px;
-    
-              &.e-descend {
-                transform: rotateX(180deg);
-              }
-            }
-    
-            .e-dropdown-icon {
-              margin-top: 1px;
-            }
-          }
-        }
-      }
-    }
-
-    /* stylelint-enable */
-
-    .e-axis-value {
-      display: inline-block;
-      height: 100%;
-
-      .e-group-values {
-        height: 100%;
-        padding-bottom: 0;
-      }
-
-      .e-group-chart-values {
-        display: inline-block;
-        height: 28px;
-      }
-
-      .e-group-chart-values-drodown {
-        font-size: 13px;
-        height: 25px;
-      }
-    }
-
-    .e-axis-column .e-group-chart-columns-dropdown {
-      font-size: 13px;
-      height: 25px;
-      margin: $pivotgrid-group-chart-values-dropdown-margin;
-
-      .e-input-group-icon {
-        min-height: initial;
-      }
-
-      input.e-input {
-        padding-bottom: 7px;
-      }
-    }
-
-    /* stylelint-disable */
-    .e-chart-grouping-bar .e-axis-value {
-      height: auto !important;
-      padding-left: 6px;
-      border-bottom: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
-
-      .e-group-chart-multi-values {
-        padding-left: 2px;
-      }
-
-      .e-group-chart-values-drodown {
-        margin: $pivotgrid-group-chart-values-dropdown-margin;
-
-        .e-input-group-icon {
-          min-height: initial;
-        }
-
-        input.e-input {
-          padding-bottom: 7px;
-        }
-      }
-    }
-
-    .e-icons:not(.e-frame):not(.e-btn-icon):not(.e-sort):not(.e-dropdown-icon):not(.e-pv-filter):not(.e-pv-filtered):not(.e-remove):not(.e-edit):not(.e-drag):not(.e-selected-option-icon):not(.e-nav-arrow) {
-      height: auto;
-      width: auto;
-    }
-
-    .e-expand::before,
-    .e-expand {
-      font-size: $pivotgrid-expand-icon-fontsize !important;
-    }
-
-    .e-collapse::before,
-    .e-collapse {
-      font-size: $pivotgrid-collapse-icon-fonsize !important;
-    }
-    /* stylelint-enable */
-
-    .e-expand,
-    .e-collapse {
-      cursor: pointer;
-      display: inline-block;
-      height: 18px;
-      text-align: center;
-      width: 18px;
-      @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') or ($skin-name == 'Material3') or ($skin-name == 'tailwind') {
-        vertical-align: middle;
-      }
-    }
-
-    /* stylelint-disable */
-    th .e-expand,
-    th .e-collapse {
-      font-size: $pivotgrid-expcoldiv-fontsize !important;
-      margin-left: 0;
-      @if ($skin-name == 'bootstrap4') {
-        display: flex;
-      }
-    }
-    /* stylelint-enable */
-
-    .e-pivot-pager {
-      padding: $pivotpager-padding;
-
-      &.sf-pager {
-        .e-pivot-pager-info-container{
-          &.e-pagercontainer {
-            font-size: unset;
-          }
-        }
-      }
-
-      &.e-pivot-pager-bottom {
-        border-top: 0;
-      }
-  
-      &.e-pivot-pager-top {
-        border-bottom: 0;
-      }
-
-      .e-pivotview-vseparator {
-        height: auto;
-        border-left: $pivotpager-separator-border;
-        margin: $pivotpager-v-separator-margin;
-      }
-
-      .e-pivot-pager-maindiv {
-        display: flex;
-        flex-direction: row;
-
-        .e-pivot-pager-row-maindiv,
-        .e-pivot-pager-column-maindiv {
-          display: flex;
-          flex-direction: column;
-          width: 50%;
-
-          .e-icon-first,
-          .e-icon-prev,
-          .e-icon-next,
-          .e-icon-last {
-            font-size: $pivotpager-page-icon-size;
-            padding: $pivotpager-page-icon-padding;
-
-            /* stylelint-disable */
-            @if ($pivotgrid-skin =='material-dark') or ($pivotgrid-skin =='material') {
-              margin: 0 !important;
-            }
-
-            @if ($skin-name == 'Material3') {
-              border: $pivotgrid-sort-select-border-color;
-            }
-          }
-
-        /* stylelint-enable */
-
-          .e-pivotview-text-div {
-            display: flex;
-            flex-direction: row;
-          }
-          
-          .e-pivotview-row-pagerString,
-          .e-pivotview-column-pagerString {
-            color: $pivotpager-axis-title-font-color;
-            font-size: $pivotpager-title-font-size;
-            overflow: hidden;
-            text-align: initial;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            width: 50%;
-          }
-
-          .e-pivotview-row-size,
-          .e-pivotview-column-size {
-            color: $pivotpager-size-title-font-color;
-            font-size: $pivotpager-title-font-size;
-            overflow: hidden;
-            text-align: end;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            width: 50%;
-          }
-
-          .e-pivotview-text-div-1 {
-            flex: none;
-
-            .e-pagercontainer {
-              margin-top: $pivotpager-page-container-marging-top;
-              @if ($pivotgrid-skin == 'material-dark') or ($pivotgrid-skin == 'material') {
-                margin: $pivotpager-page-container-marging-top 0 0 0;
-              }
-
-              @if ($skin-name == 'Material3') {
-                border: $pivotgrid-sort-select-border-color;
-              }
-
-              &.e-pivot-pager-info-container,
-              &.e-pager-dropdown {
-                border-style: none;
-                vertical-align: top;
-              }
-              &.e-pager-dropdown .e-input-group .e-input-group-icon {
-                @if ($skin-name == 'Material3') {
-                  margin-top: 0;
-                  margin-bottom: 0;
-                }
-              }
-            }
-            
-            .e-pager-dropdown {
-              float: right;
-            }
-          }
-          
-          .e-pivot-row-of-string-maindiv,
-          .e-pivot-column-of-string-maindiv {
-            line-height: $pivotpager-single-title-line-height;
-            @if ($skin-name == 'Material3') {
-              /* stylelint-disable */
-              color: $pivotpager-string-maindiv-font-color !important;
-              /* stylelint-enable */
-            }
-
-            .e-pivotview-row-pagerNumber,
-            .e-pivotview-column-pagerNumber {
-              font-weight: $pivotpager-pager-number-font-weight;
-            }
-          }
-          
-          .e-pivot-row-pager-settings,
-          .e-pivot-column-pager-settings {
-            flex: none;
-
-            &.e-pivot-pager-axis-container {
-              display: inline-table;
-            }
-
-            .e-numeric {
-              margin: $pivotpager-numeric-box-margin;
-              vertical-align: top;
-
-              .e-pivot-pager-row-dropdown,
-              .e-pivot-pager-column-dropdown {
-                @if ($skin-name == 'Material3') {
-                  font-size: $pivotpager-numeric-font-size;
-                }
-              }
-            }
-          }
-        }
-
-        &.e-pivot-pager-single-maindiv {
-          .e-pivot-pager-row-maindiv,
-          .e-pivot-pager-column-maindiv {
-            flex-direction: row;
-            width: 100%;
-
-            .e-pagercontainer {
-              margin-top: 0;
-
-              &.e-pivot-pager-info-container,
-              &.e-pager-dropdown {
-                border-style: none;
-              }
-            }
-
-            .e-pivot-pager-nav-container {
-              @if ($skin-name == 'Material3') {
-                border: $pivotgrid-sort-select-border-color;
-              }
-            }
-
-            .e-pivotview-row-pagerString,
-            .e-pivotview-column-pagerString {
-              flex: auto;
-              font-size: $pivotpager-single-title-font-size;
-              line-height: $pivotpager-single-title-line-height;
-              text-align: center;
-            }
-
-            .e-pivotview-text-div-1 {
-              .e-pivotview-row-size,
-              .e-pivotview-column-size {
-                font-size: $pivotpager-single-title-font-size;
-                line-height: $pivotpager-single-title-line-height;
-                padding: 0 $pivotpager-single-size-title-padding 0 0;
-                width: inherit;
-              }
-            }
-          }
-        }
-      }
-
-      &.e-compact-view {
-        .e-pivotview-vseparator {
-          margin-top: $pivotpager-v-separator-margin-top;
-        }
-
-        .e-pivot-pager-maindiv {
-          .e-pivot-pager-row-maindiv,
-          .e-pivot-pager-column-maindiv {
-            align-items: center;
-            flex-direction: row;
-
-            .e-pivotview-text-div,
-            .e-pivotview-text-div-1 {
-              align-items: center;
-              display: flex;
-              flex-direction: row;
-              width: 50%;
-
-              .e-pagercontainer {
-                margin-top: 0;
-
-                @if ($pivotgrid-skin =='material-dark') or ($pivotgrid-skin =='material') {
-                  margin-top: $pivotpager-touch-page-container-marging-top;
-                }
-
-                @if ($skin-name == 'Material3') {
-                  border: $pivotgrid-sort-select-border-color;
-                }
-              }
-
-              .e-pivotview-row-size,
-              .e-pivotview-column-size {
-                flex: auto;
-                font-size: $pivotpager-single-title-font-size;
-                line-height: $pivotpager-single-title-line-height;
-                padding: 0 $pivotpager-single-size-title-padding 0 0;
-                text-align: end;
-                width: inherit;
-              }
-
-              .e-pivotview-row-pagerString,
-              .e-pivotview-column-pagerString {
-                font-size: $pivotpager-single-title-font-size;
-                line-height: $pivotpager-single-title-line-height;
-                min-width: 50px;
-                text-align: initial;
-                width: inherit;
-              }
-
-              .e-pivot-row-pager-settings,
-              .e-pivot-column-pager-settings {
-                align-items: center;
-                display: flex;
-              }
-            }
-
-            .e-pivotview-text-div-1 .e-pagercontainer{
-              margin-bottom: 0;
-            }
-          }
-
-          &.e-pivot-pager-single-maindiv {
-            .e-pivot-pager-row-maindiv,
-            .e-pivot-pager-column-maindiv {
-              width: 100%;
-
-              .e-pagercontainer {
-                margin-top: 0;
-
-                @if ($skin-name == 'Material3') {
-                  border: $pivotgrid-sort-select-border-color;
-                }
-              }
-
-              .e-pivotview-row-pagerString,
-              .e-pivotview-column-pagerString {
-                text-align: center;
-                width: 100%;
-              }
-
-              .e-pivotview-text-div-1 {
-                width: auto;
-              }
-            }
-          }
-
-          &:not(.e-pivot-pager-single-maindiv) {
-            .e-pivot-pager-row-maindiv,
-            .e-pivot-pager-column-maindiv {
-              &.e-page-size-disable {
-                .e-pivotview-text-div {
-                  width: 50%;
-                }
-              }
-            }
-          }
-        }
-
-        &.e-rtl {
-          .e-pivot-pager-maindiv {
-            .e-pivot-pager-row-maindiv,
-            .e-pivot-pager-column-maindiv {
-              .e-pivotview-text-div,
-              .e-pivotview-text-div-1 {
-                .e-pivot-row-pager-settings,
-                .e-pivot-column-pager-settings {
-                  padding: 0 $pivotpager-single-size-title-padding 0 0;
-                }
-  
-                .e-pivotview-row-size,
-                .e-pivotview-column-size {
-                  padding: 0 0 0 $pivotpager-single-size-title-padding;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &.e-device {
-        .e-pivotview-hseparator {
-          border-top: $pivotpager-separator-border;
-          margin: $pivotpager-h-separator-margin;
-          width: auto;
-        }
-
-        .e-pivot-pager-maindiv {
-          flex-direction: column;
-
-          .e-pagercontainer {
-            display: inline-block;
-          }
-
-          .e-pivot-pager-row-maindiv,
-          .e-pivot-pager-column-maindiv {
-            width: 100%;
-          }
-
-          &:not(.e-pivot-pager-single-maindiv) {
-            .e-pagercontainer {
-              margin-top: $pivotpager-adaptive-page-container-marging-top;
-
-              @if ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') or ($skin-name == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast')  {
-                margin-left: 0;
-              }
-            }
-          }
-        }
-
-        /* stylelint-disable */
-        @media (max-width: 400px) {
-          .e-pivotview-row-size,
-          .e-pivotview-column-size,
-          .e-pivotview-row-pagerString,
-          .e-pivotview-column-pagerString {
-            min-width: 10px !important;
-          }
-        }
-        /* stylelint-enable */
-      }
-
-      &.e-rtl {
-        .e-pivot-pager-maindiv {
-          .e-pivot-pager-row-maindiv,
-          .e-pivot-pager-column-maindiv {
-            .e-pivot-row-pager-settings,
-            .e-pivot-column-pager-settings {
-              .e-numeric {
-                margin: $pivotpager-adaptive-numeric-box-margin;
-              }
-            }
-
-            .e-pager-dropdown {
-              float: left;
-            }
-          }
-
-          &.e-pivot-pager-single-maindiv {
-            .e-pivot-pager-row-maindiv,
-            .e-pivot-pager-column-maindiv {
-              .e-pivotview-text-div-1 {
-                .e-pivotview-row-size,
-                .e-pivotview-column-size {
-                  padding: 0 0 0 $pivotpager-single-size-title-padding;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      @media (max-width: 769px) {
-        .e-pivot-pager-maindiv {
-          .e-pagercontainer {
-            display: inline-block;
-          }
-        }
-      }
-    }
-
-    &.e-rtl {
-
-      .e-expand::before,
-      .e-collapse::before {
-        margin-left: 0;
-      }
-
-      /* stylelint-disable */
-      .e-grid .e-rowsheader {
-        padding-right: 8px !important;
-      }
-
-      .e-grid .e-columnsheader {
-        padding-right: 8px !important;
-      }
-
-      .e-grid .e-headercelldiv,
-      .e-grid .e-columnsheader {
-        padding-right: 8px !important;
-      }
-
-      .e-frozenheader>.e-table,
-      .e-frozencontent>.e-table {
-        border-left-width: 1px;
-        border-right: 0;
-      }
-
-      .e-leftfreeze.e-freezeleftborder {
-        border-left-width: 1px;
-        border-right: 0;
-      }
-
-      /* stylelint-enable */
-
-      .e-rowsheader .e-cellvalue {
-        margin-left: 0;
-        margin-right: 7px;
-      }
-
-      .e-valuescontent {
-        text-align: left;
-      }
-
-      .e-group-values,
-      .e-group-columns,
-      .e-group-filters,
-      .e-group-all-fields {
-        padding-left: 0;
-        padding-right: $pivotview-axis-indent-padding;
-      }
-
-      .e-group-rows,
-      .e-grouping-bar {
-
-        .e-pvt-btn-div {
-          padding-left: $pivotgrid-horizontal-button-padding;
-          padding-right: 0;
-
-          .e-pivot-button {
-            .e-pvt-btn-content {
-              margin-left: 4px;
-              text-align: right;
-            }
-
-            .e-sort,
-            .e-dropdown-icon,
-            .e-pv-filter,
-            .e-pv-filtered,
-            .e-remove,
-            .e-edit {
-              padding-left: 0;
-              padding-right: 4px;
-            }
-          }
-        }
-      }
-
-      .e-grouping-bar {
-        .e-left-axis-fields {
-          border-left-width: 0;
-          border-right-width: $pivotgrid-border-size;
-        }
-
-        .e-right-axis-fields {
-          border-left-width: $pivotgrid-border-size;
-        }
-      }
-
-      .e-group-row {
-        .e-group-rows {
-          padding-left: 0;
-          padding-right: $pivotview-axis-indent-padding;
-
-          .e-pvt-btn-div {
-            /* stylelint-disable */
-            padding-left: $pivotgrid-horizontal-button-padding;
-            padding-right: 0;
-
-            .e-pivot-button {
-              .e-pvt-btn-content {
-                margin-left: 4px;
-                margin-right: 0;
-                text-align: right;
-              }
-
-              .e-sort,
-              .e-dropdown-icon,
-              .e-pv-filter,
-              .e-pv-filtered,
-              .e-remove,
-              .e-edit {
-                padding-left: 0;
-                padding-right: 7px;
-              }
-            }
-
-            /* stylelint-enable */
-          }
-        }
-      }
-
-      /* stylelint-disable */
-      .e-stackedheadertext.e-cellvalue,
-      .e-stackedheadercelldiv.e-cellvalue {
-        padding-right: 12px !important;
-      }
-
-      .e-sortfilterdiv {
-        float: left;
-      }
-
-      th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border) {
-        border-left-width: 1px !important;
-      }
-      /* stylelint-enable */
-    }
-
-    &.e-device {
-      .e-grouping-bar {
-
-        /* stylelint-disable */
-        .e-pivot-button {
-          line-height: 1em !important;
-        }
-
-        .e-group-all-fields {
-          .e-pvt-btn-div {
-            .e-pivot-button {
-              max-width: 155px;
-            }
-          }
-        }
-
-        .e-group-filters,
-        .e-group-values {
-          .e-pvt-btn-div {
-            .e-pivot-button {
-              max-width: 155px;
-            }
-          }
-        }
-
-        .e-group-columns {
-          .e-pvt-btn-div {
-            .e-pivot-button {
-              max-width: 200px;
-            }
-          }
-        }
-      }
-
-      .e-drillthrough-dialog {
-        width: 100% !important;
-      }
-
-      .e-group-row {
-        .e-group-rows {
-          .e-pvt-btn-div {
-            .e-indent-div {
-              width: 0 !important;
-            }
-
-            .e-pivot-button {
-              width: 155px;
-            }
-          }
-        }
-      }
-
-      .e-scrollbar .e-movablescrollbar {
-        min-height: 1px !important;
-        visibility: hidden;
-      }
-    }
-
-    .e-component-disable {
-      display: none !important;
-    }
-
-    .e-pivotchart.e-chart {
-      overflow: visible !important;
-    }
-
-    /* stylelint-enable */
-  }
-
-  .e-pivottooltipwrap,
-  .e-pivottooltip-container {
-    opacity: 1;
-  }
-
-  .e-drillthrough-dialog {
-    visibility: hidden;
-  }
-
-  .e-pivottooltip {
-    border-radius: $pivotgrid-default-border-radius;
-    padding: $pivotgrid-tooltip-padding;
-    text-align: initial;
-  }
-
-  .e-pivottooltip p {
-    color: $pivotgrid-tooltip-fontcolor;
-    display: inline-block;
-    font-family: $pivotgrid-tooltip-fontfamily;
-    font-size: $pivotgrid-tooltip-fontsize;
-    line-height: 21px;
-    margin: 0;
-  }
-
-  .e-pivottooltip p.e-tooltipcontent {
-    margin-left: 5px;
-  }
-
-  .e-pivottooltiptemplate.e-tooltip-wrap {
-    border: medium none transparent;
-    max-width: none;
-    min-width: 0;
-    opacity: 1;
-  }
-
-  .e-pivottooltiptemplate .e-tip-content {
-    overflow-x: visible;
-    padding: unset;
-    word-break: normal;
-  }
-
-  .e-rtl .e-pivottooltip p.e-tooltipcontent {
-    margin-left: 0;
-    margin-right: 5px;
-  }
-
-  .e-bigger .e-pivotview,
-  .e-bigger.e-pivotview {
-
-    .e-chart-grouping-bar .e-axis-value {
-      .e-group-chart-values-drodown {
-        margin: $pivotgrid-group-chart-values-dropdown-margin-bigger;
-
-        .e-input-group-icon {
-          min-height: initial;
-        }
-
-        input.e-input {
-          padding-bottom: 10px;
-          padding-top: 0;
-        }
-      }
-    }
-
-    .e-chart-grouping-bar .e-axis-column {
-      .e-group-chart-columns-dropdown {
-        margin: $pivotgrid-group-chart-values-dropdown-margin-bigger;
-
-        .e-input-group-icon {
-          min-height: initial;
-        }
-
-        input.e-input {
-          padding-bottom: 10px;
-          padding-top: 0;
-        }
-      }
-    }
-
-    /* stylelint-disable */
-    .e-grid .e-rowsheader {
-      padding-left: 8px !important;
-      @if ($skin-name == 'tailwind') {
-        padding-left: 16px !important;
-        padding-right: 12px !important;
-      }
-    }
-
-    .e-grid .e-headercelldiv {
-      padding-left: 8px !important;
-    }
-
-    .e-grid .e-columnsheader {
-      padding-left: 8px !important;
-    }
-
-    .e-grid .e-gridheader .e-headercell .e-rhandler {
-      height: 100% !important;
-    }
-
-    &.e-device {
-      .e-grid.e-grid-min-height {
-        .e-rowcell,
-        .e-rowcell:first-child,
-        .e-rowcell:last-child {
-          padding-top: 0px !important;
-          padding-bottom: 0px !important;
-        }
-      }
-    }
-
-    .e-stackedheadercelldiv,
-    .e-stackedheadertext,
-    .e-headertext,
-    .e-rowsheader .e-cellvalue {
-      font-size: $pivotview-bigger-grid-header-font-size !important;
-      @if ($pivotgrid-skin == 'bootstrap4') {
-        font-size: $pivotview-bigger-grid-header-font-size !important;
-      }
-    }
-    .e-bigger .e-stackedheadercelldiv {
-      padding-left: 16px !important;
-    }
-
-    .e-grouping-bar {
-      .e-all-fields-axis {
-        height: 36px !important;
-        min-height: 36px !important;
-
-        .e-hscroll .e-scroll-nav, 
-        .e-toolbar-items,
-        .e-toolbar-item {
-          min-height: 36px !important;
-        }
-      }
-      /* stylelint-enable */
-
-      .e-pvt-btn-div {
-        height: 30px;
-
-        .e-pivot-button {
-          height: 30px;
-          padding: 0 12px;
-
-          .e-pvt-btn-content {
-            font-size: $pivotgrid-bigger-button-font-size;
-            margin-right: 8px;
-            @if ($pivotgrid-skin == 'bootstrap4') {
-              margin-right: 0;
-            }
-          }
-
-          .e-sort,
-          .e-dropdown-icon,
-          .e-pv-filter,
-          .e-pv-filtered,
-          .e-remove,
-          .e-edit {
-            /* stylelint-disable */
-            font-size: $pivotgrid-bigger-button-icon-size !important;
-            height: $pivotgrid-bigger-button-icon-size !important;
-            /* stylelint-enable */
-            width: $pivotgrid-bigger-button-icon-wrapper-size;
-            @if ($pivotgrid-skin == 'bootstrap4') {
-              padding-left: 12px;
-            }
-          }
-
-          .e-sort {
-            height: $pivotgrid-bigger-button-icon-size;
-          }
-
-          .e-dropdown-icon {
-            margin-top: 1px;
-          }
-        }
-      }
-
-      .e-group-filters,
-      .e-group-values,
-      .e-group-columns,
-      .e-group-rows,
-      .e-group-all-fields {
-        height: 36px;
-        min-height: 36px;
-        padding-left: $pivotview-axis-bigger-indent-padding;
-
-        .e-draggable-prompt {
-          @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
-            font-size: $pivotgrid-bigger-content-font-size;
-          }
-
-          @if ($pivotgrid-skin == 'bootstrap4') {
-            font-size: 16px;
-          }
-        }
-      }
-
-      .e-group-values {
-        height: 100%;
-      }
-
-      .e-left-axis-fields,
-      .e-right-axis-fields {
-        .e-axis-nav-div {
-
-          .e-left-nav-container,
-          .e-right-nav-container {
-            width: 24px;
-          }
-        }
-      }
-    }
-
-    .e-group-rows {
-      padding-left: $pivotview-axis-bigger-indent-padding;
-
-      .e-pvt-btn-div {
-        height: 30px;
-
-        .e-pivot-button {
-          height: 30px;
-          line-height: $pivotgrid-bigger-button-line-height;
-          padding: $pivotgrid-group-bigger-pivot-button-padding;
-
-          .e-pvt-btn-content {
-            font-size: $pivotgrid-bigger-button-font-size;
-            margin-right: 8px;
-            @if ($pivotgrid-skin == 'bootstrap4') {
-              margin-right: 0;
-            }
-          }
-
-          .e-sort,
-          .e-dropdown-icon,
-          .e-pv-filter,
-          .e-pv-filtered,
-          .e-remove,
-          .e-edit {
-            /* stylelint-disable */
-            font-size: $pivotgrid-bigger-button-icon-size !important;
-            height: $pivotgrid-bigger-button-icon-size !important;
-            /* stylelint-enable */
-            width: $pivotgrid-bigger-button-icon-wrapper-size;
-            @if ($pivotgrid-skin == 'bootstrap4') {
-              padding-left: 12px;
-            }
-          }
-
-          .e-sort {
-            height: $pivotgrid-bigger-button-icon-size;
-          }
-
-          .e-dropdown-icon {
-            margin-top: 1px;
-          }
-        }
-      }
-    }
-
-    /* stylelint-disable */
-    .e-sortfilterdiv {
-      @if ($pivotgrid-skin == 'bootstrap4') or ($skin-name == 'bootstrap5') {
-        font-size: 12px !important;
-      }
-      @if ($pivotgrid-skin == 'tailwind') {
-        font-size: 16px !important;
-      }
-      @if ($skin-name == 'Material3') {
-        font-size: 14px !important;
-      }
-    }
-    
-    .e-stackedheadercelldiv,
-    .e-stackedheadertext,
-    .e-headertext,
-    .e-rowsheader .e-cellvalue {
-      color: $pivotview-grid-header-font-color !important;
-      font-size: $pivotview-bigger-grid-header-font-size;
-      font-weight: $pivotview-grid-header-font-weight !important;
-    }
-    
-    .e-grid .e-columnsheader {
-      padding-right: 16px !important;
-    }
-
-    .e-rowcell {
-      font-size: $pivotgrid-bigger-content-font-size !important;
-      @if($skin-name == 'tailwind') {
-        padding: 0 12px;
-      }
-    }
-
-    &.e-rtl {
-      .e-grid .e-rowsheader {
-        padding-right: 10px !important;
-      }
-
-      .e-grid .e-columnsheader {
-        padding-right: 16px !important;
-      }
-
-      .e-grid .e-headercelldiv,
-      .e-grid .e-columnsheader {
-        padding-right: 8px !important;
-      }
-
-      .e-grouping-bar {
-
-        .e-group-rows,
-        .e-group-columns,
-        .e-group-values,
-        .e-group-filters,
-        .e-group-all-fields {
-          padding-left: 0;
-          padding-right: $pivotview-axis-bigger-indent-padding;
-        }
-      }
-
-      .e-group-row {
-        .e-group-rows {
-          padding-left: 0;
-          padding-right: $pivotview-axis-bigger-indent-padding;
-        }
-      }
-
-      .e-stackedheadertext.e-cellvalue,
-      .e-stackedheadercelldiv.e-cellvalue {
-        padding-right: 16px !important;
-      }
-      /* stylelint-enable */
-    }
-
-    @if ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') or ($skin-name == 'bootstrap5') {
-      .e-expand::before {
-        font-size: $pivotgrid-expand-bigger-icon-fontsize;
-      }
-
-      .e-collapse::before {
-        font-size: $pivotgrid-collapse-bigger-icon-fontsize;
-      }
-    }
-
-    .e-pivot-pager,
-    #{&}.e-pivot-pager.e-bigger {
-      padding: $pivotpage-touch-padding;
-
-      .e-pivotview-vseparator {
-        margin: $pivotpager-touch-v-separator-margin;
-      }
-
-      .e-pivot-pager-maindiv {
-        .e-pivot-pager-row-maindiv,
-        .e-pivot-pager-column-maindiv {
-
-          .e-icon-first,
-          .e-icon-prev,
-          .e-icon-next,
-          .e-icon-last {
-            font-size: $pivotpager-touch-page-icon-size;
-            padding: $pivotpager-touch-page-icon-padding;
-          }
-
-          .e-pivot-row-of-string-maindiv,
-          .e-pivot-column-of-string-maindiv {
-            line-height: $pivotpager-touch-single-title-line-height;
-          }
-
-          .e-pivotview-row-pagerString,
-          .e-pivotview-column-pagerString,
-          .e-pivotview-row-size,
-          .e-pivotview-column-size {
-            font-size: $pivotpager-string-font-touch-size;
-          }
-
-          .e-pivotview-text-div-1 {
-            .e-pagercontainer {
-              margin-top: $pivotpager-touch-page-container-marging-top;
-            }
-          }
-          
-          .e-pivot-row-pager-settings,
-          .e-pivot-column-pager-settings {
-            .e-numeric {
-              margin: $pivotpager-touch-numeric-boc-margin;
-            }
-          }
-        }
-
-        &.e-pivot-pager-single-maindiv {
-          .e-pivot-pager-row-maindiv,
-          .e-pivot-pager-column-maindiv {
-            .e-pagercontainer {
-              margin-top: 0;
-            }
-
-            .e-pivotview-row-pagerString,
-            .e-pivotview-column-pagerString,
-            .e-pivotview-row-size,
-            .e-pivotview-column-size {
-              font-size: $pivotpager-touch-single-title-font-size;
-            }
-          }
-        }
-      }
-
-      &.e-compact-view {
-        .e-pivot-pager-maindiv {
-          .e-pivot-pager-row-maindiv,
-          .e-pivot-pager-column-maindiv {
-            .e-pagercontainer {
-              margin-top: 0;
-
-              @if ($pivotgrid-skin =='material-dark') or ($pivotgrid-skin =='material') {
-                margin-top: $pivotpager-touch-page-container-marging-top;
-              }
-            }
-
-            .e-pivotview-row-pagerString,
-            .e-pivotview-column-pagerString,
-            .e-pivotview-row-size,
-            .e-pivotview-column-size {
-              font-size: $pivotpager-touch-single-title-font-size;
-            }
-          }
-        }
-      }
-
-      &.e-rtl {
-        .e-pivot-pager-maindiv {
-          .e-pivot-pager-row-maindiv,
-          .e-pivot-pager-column-maindiv {
-            .e-pivot-row-pager-settings,
-            .e-pivot-column-pager-settings {
-              .e-numeric {
-                margin: $pivotpager-touch-numeric-boc-margin;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .e-content-placeholder.e-pivotview.e-placeholder-pivotview {
-    background-size: 100% 200px;
-  }
-}