@mixin wrap-styles {
  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;
  }

  @if ($skin-name =='fluent2') {
    /* stylelint-disable */
    color: $pivotgrid-button-acitve-font-color !important;
    /* stylelint-enable */
  }
}

@include export-module('pivotview-theme') {
  .e-pivotview.e-pivotview-autofit .e-grid {
    .e-columnsheader .e-headercelldiv {
      margin-right: 4px;

      @if ($skin-name =='FluentUI') or ($skin-name =='fluent2') or ($skin-name =='tailwind') or ($skin-name =='tailwind-dark') or ($skin-name =='Material3') {
        &:has(> .e-pivotcell-container .e-value-sort-icon) {
          margin-right: $pivotgrid-value-sort-icon-font-size;
        }
      }
    }

    .e-columnsheader {
      /* stylelint-disable */
      padding-right: 0 !important;
    }

    .e-group-rows .e-pivot-button {
      display: none !important;
      /* stylelint-enable */
    }
  }

  .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%;

          @if ($skin-name == 'FluentUI') {
            padding-bottom: 2px;
          }
        }
      }

      .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 {
      opacity: $pivotview-grid-content-opacity;
      padding-right: 8px;
      text-align: right;

      @if ($skin-name == 'tailwind3') {
        padding-right: 12px;
      }
    }

    .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;

      @if($skin-name == 'tailwind3') {
        padding-left: 12px;
      }

      &.e-disable {
        display: none !important;
      }
    }

    .e-grid .e-content-virtualtable {
      overflow-x: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .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;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;

        @if ($skin-name == 'tailwind') or ($skin-name == 'tailwind3') 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 =='fluent2') {
        margin-top: 4px;
      }

      &: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,
      .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-value-sort-icon-left {
          float: left;
        }
      }
    }

    .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 {
      line-height: initial !important;
      margin: 0 !important;
      padding: 0 !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') or ($skin-name == 'bootstrap5.3') {
          color: $pivotview-grid-header-font-color !important;
        }

        @if ($skin-name =='fluent2') {
          color: $pivotgrid-button-icon-color !important;                  
        }
      }
    }

    .e-grid {
      border-color: $pivotgrid-default-border-color;
    }

    .e-grid .e-rowsheader {
      line-height: initial !important;
      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-rowcell span{
        flex-shrink: 0;
      }

      .e-pivotrow-container {
        display: flex;
        width: 100%;
        align-items: center;
      }
      
      &.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;
          }
        }
      }
    }

    .e-grid {

      @if ($skin-name == 'bootstrap5.3')
      {
        :is([class*="format"]).e-cellselectionbackground {
          background: $table-bg-color-selected;
        }
      }

      .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;
      }
    }

    &.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-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;
      padding-right: 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-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;
      padding: 0 0 0 1px !important;
    }

    .e-stackedheadertext.e-cellvalue,
    .e-stackedheadercelldiv.e-cellvalue {
      display: inline-block;
      padding-left: $pivotview-header-text-padding !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,
    .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-valuescontent .e-cellvalue {
      .e-hyperlinkcell {
        cursor: pointer;
      }
    }
    /* 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-axis-row,
      .e-axis-column,
      .e-axis-value,
      .e-axis-filter,
      .e-group-all-fields {
        background: $pivotgrid-grp-bg-color;
        display: flex;
      }

      .e-axis-row.e-axis-row-hide {
        display: none;
      }

      .e-left-axis-fields {
        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
        border-bottom-width: 0;
        border-right-width: 0;
        min-width: 250px;

        &.e-static-server-rendering {
          width: 250px;
        }
      }

      /* 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') or ($skin-name == 'fluent2'){
          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') or ($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;

        @if ($skin-name == 'tailwind3') {
          font-weight: 500;
        }

        &.e-list-selected {
          opacity: .5;
          @if ($pivotgrid-skin == 'bootstrap4') {
            opacity: .7;
          }
        }

        &:hover {
          background: $pivotgrid-hover-color;
          @if ($skin-name != 'Material3' and $skin-name != 'tailwind3') {
            border-color: $pivotgrid-hover-color;
          }
          @if ($pivotgrid-skin == 'bootstrap4') {
            background-color: $pivotgrid-bg-color;
            border-color: $pivotgrid-border-color;
          }
          @if ($skin-name =='fluent2') {
            /* stylelint-disable */
            color: $pivotgrid-icon-hover-color !important;
            /* stylelint-enable */
          }

          .e-sort,
          .e-dropdown-icon,
          .e-pv-filter,
          .e-pv-filtered,
          .e-remove,
          .e-edit {
            color: $pivotgrid-icon-hover-color;
          }
        }

        &.e-btn-focused {
          @include wrap-styles;

          .e-sort,
          .e-dropdown-icon,
          .e-pv-filter,
          .e-pv-filtered,
          .e-remove,
          .e-edit {
            color: $pivotgrid-icon-focus-color;
          }
        }

        &:focus {
          @if ($skin-name =='tailwind3') {
            border-color: $pivotgrid-primary-color;
            /* stylelint-disable */
            background-color: $content-bg-color !important;
            /* stylelint-enable */
          }
        }

        &:focus,
        &:active {
          @include wrap-styles;

          .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: auto;
      vertical-align: top;
      width: 100%;
    }

    /* stylelint-disable */
    .e-group-row {
      padding: 0 !important;

      .e-group-rows {
        display: table;
        flex: none;
        width: 100%;

        &.e-tabular-group-rows {
          padding-top: 3px !important;
          padding-left: 0px !important;
        }

        .e-pvt-btn-div {
          max-width: unset;
          width: 100%;
          &.e-tabular-pvt-btn {
            margin: 0px !important;
            padding: 0 0 0 10px !important;
          }
          .e-pivot-button {
            width: 180px;
            &.e-tabular-row-btn {
              width: auto !important;
              max-width: 250px;
            }
            @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 {
              @include wrap-styles;

              .e-sort,
              .e-dropdown-icon,
              .e-pv-filter,
              .e-pv-filtered,
              .e-remove,
              .e-edit {
                color: $pivotgrid-icon-focus-color  !important;
              }
            }
    
            &:focus,
            &:active {
              @include wrap-styles;
    
              .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 !important;
              }
    
              &.e-disable {
                display: none;
              }
            }
    
            .e-sort {
              height: $pivotgrid-button-icon-size;
              width: 18px;
    
              &.e-descend {
                transform: rotateX(180deg);
              }
            }
    
            .e-dropdown-icon {
              margin-top: 1px;
            }
          }

          .e-indent-div {
            pointer-events: none;
          }
        }
      }
    }

    /* stylelint-enable */
    .e-axis-value {
      display: inline-block;
      height: 100%;

      .e-group-values {
        height: 100%;
        padding-bottom: 0;
      }

      .e-group-chart-values {
        align-items: center;
        display: flex;
        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;
      border-bottom: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;

      .e-group-chart-values-drodown {
        margin: $pivotgrid-group-chart-values-dropdown-margin;

        .e-input-group-icon {
          min-height: initial;
        }

        input.e-input {
          align-self: center;
          height: initial;
        }
      }
    }

    .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 == 'bootstrap5.3') or ($skin-name == 'FluentUI') or ($skin-name == 'Material3') or ($skin-name == 'tailwind') or ($skin-name == 'tailwind3') or ($skin-name == 'fluent2') {
        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 {
              @if ($skin-name != 'fluent2') {
                vertical-align: top;
              }
              margin: $pivotpager-numeric-box-margin;

              .e-pivot-pager-row-dropdown,
              .e-pivot-pager-column-dropdown {
                @if ($skin-name == 'Material3') {
                  font-size: $pivotpager-numeric-font-size;
                }
              }
            }
          }

          .e-pivot-both-pager-settings {
            .e-numeric {
              @if ($skin-name == 'fluent2') {
                vertical-align: top;
              }
            }
          }
        }

        &.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;
              
              @if ($skin-name == 'Material3') {
                border: $pivotgrid-sort-select-border-color;
              }
              &.e-pivot-pager-info-container,
              &.e-pager-dropdown {
                border-style: none;
              }
            }

            .e-pivotview-row-pagerString,
            .e-pivotview-column-pagerString {
              text-align: center;
              width: 100%;
            }

            .e-pivotview-text-div-1 {
              /* stylelint-disable */
              width: auto !important;
              /* stylelint-enable */
            }

            .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;
            }
          }

          &: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,
      .e-grid .e-headercelldiv,
      .e-grid .e-columnsheader {
        padding-right: 8px !important;
      }

      .e-frozenheader>.e-table,
      .e-frozencontent>.e-table,
      .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: $pivotview-header-text-padding !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 {
      /* stylelint-disable */
      .e-grid {
        min-width: 300px !important;
      }
      
      .e-grouping-bar {
        min-width: 300px !important;

        .e-pivot-button {
          line-height: 1em !important;
        }

        .e-group-chart-rows,
        .e-group-all-fields,
        .e-group-filters,
        .e-group-values,
        .e-group-columns {
          .e-pvt-btn-div {
            .e-pivot-button {
              max-width: 130px;
            }
          }
        }
      }
      .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 {
              max-width: 130px;
            }
          }
        }
      }

      .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-content-placeholder.e-pivotview.e-placeholder-pivotview {
    background-size: 100% 200px;
  }
}