@import '../../base/bootstrap5-lite.scss';
@import '../../navigations/accordion/bootstrap5.scss';
@import '../../dropdowns/drop-down-list/bootstrap5.scss';
@import '../../inputs/input/bootstrap5.scss';
@import '../../popups/popup/bootstrap5.scss';
@import '../../popups/spinner/bootstrap5.scss';
@import '../../dropdowns/drop-down-base/bootstrap5.scss';
@import '../../dropdowns/auto-complete/bootstrap5.scss';
@import '../../buttons/button/bootstrap5.scss';
@import '../../buttons/floating-action-button/bootstrap5.scss';
@import '../../buttons/speed-dial/bootstrap5.scss';
@import '../../calendars/calendar/bootstrap5.scss';
@import '../../buttons/check-box/bootstrap5.scss';
@import '../../buttons/chips/bootstrap5.scss';
@import '../../splitbuttons/drop-down-button/bootstrap5.scss';
@import '../../splitbuttons/split-button/bootstrap5.scss';
@import '../../inputs/numerictextbox/bootstrap5.scss';
@import '../../popups/tooltip/bootstrap5.scss';
@import '../../inputs/slider/bootstrap5.scss';
@import '../../inputs/color-picker/bootstrap5.scss';
@import '../../dropdowns/combo-box/bootstrap5.scss';
@import '../../navigations/context-menu/bootstrap5.scss';
@import '../../calendars/datepicker/bootstrap5.scss';
@import '../../buttons/radio-button/bootstrap5.scss';
@import '../../buttons/switch/bootstrap5.scss';
@import '../../lists/list-view/bootstrap5.scss';
@import '../../lists/sortable/bootstrap5.scss';
@import '../../calendars/daterangepicker/bootstrap5.scss';
@import '../../calendars/datetimepicker/bootstrap5.scss';
@import '../../inputs/maskedtextbox/bootstrap5.scss';
@import '../../inputs/textbox/bootstrap5.scss';
@import '../../inputs/uploader/bootstrap5.scss';
@import '../../popups/dialog/bootstrap5.scss';
@import '../../navigations/h-scroll/bootstrap5.scss';
@import '../../navigations/v-scroll/bootstrap5.scss';
@import '../../navigations/toolbar/bootstrap5.scss';
@import '../../navigations/tab/bootstrap5.scss';
@import '../../navigations/treeview/bootstrap5.scss';
@import '../../navigations/sidebar/bootstrap5.scss';
@import '../../navigations/menu/bootstrap5.scss';
@import '../../dropdowns/drop-down-tree/bootstrap5.scss';
@import '../../dropdowns/multi-select/bootstrap5.scss';
@import '../../dropdowns/list-box/bootstrap5.scss';
@import '../../dropdowns/mention/bootstrap5.scss';
@import '../../splitbuttons/button-group/bootstrap5.scss';
@import '../../splitbuttons/progress-button/bootstrap5.scss';
@import '../../calendars/timepicker/bootstrap5.scss';
@import '../../navigations/appbar/bootstrap5.scss';
$field-list-skin: 'bootstrap5' !default;
$field-list-border-type: solid !default;
$field-list-border-size: 1px !default;
$field-list-default-padding-size: 8px !default;
$field-list-title-padding-size: 18px !default;
$field-list-title-font-size: $text-base !default;
$field-list-title-line-height: 1.5em !default;
$field-list-content-font-size: $text-sm !default;
$field-list-button-font-weight: $font-weight-normal !default;
$field-list-font-family:  $font-family !default;
$field-list-default-border-radius: 4px !default;
$field-list-drag-clone-border-radius: 0 !default;
$field-list-drag-clone-font-size: $text-base !default;
$field-list-drag-clone-line-height: 1.15em !default;
$field-list-drag-clone-height: 32px !default;
$field-list-button-font-size: $text-sm !default;
$field-list-toggle-icon-bigger-size: 20px !default;
$field-list-toggle-padding-size: 8px !default;
$field-list-editor-dialog-footer-padding: 10px !default;
$field-list-toggle-size: 31px !default;
$field-list-toggle-bigger-size: 36px !default;
$field-list-member-filter-list-bigger-height: 135px !default;
$pivot-calculated-formula-font-family: $font-family !default;
$pivot-calculated-formula-font-padding: 5px 8px !default;
$pivot-calculated-header-opacity: .87 !default;
$pivot-calculated-font-weight: $font-weight-normal !default;
$pivot-dialog-content-opacity: .54 !default;
$pivot-dialog-content-padding: 18px !default;
$pivot-dialog-footer-padding: 8px !default;
$pivot-dialog-footer-paddingright: 8px !default;
$field-list-header-height: 28px !default;
$field-list-tree-outer-div-height: 310px !default;
$field-list-bigger-header-height: 30px !default;
$field-list-icon-container-size: 20px !default;
$field-list-bigger-icon-container-size: 20px !default;
$field-list-bigger-icon-size: 20px !default;
$field-list-icon-to-text-padding: 8px !default;
$field-list-bigger-icon-to-text-padding: 10px !default;
$field-list-icon-to-icon-padding: 4px !default;
$field-list-bigger-icon-to-icon-padding: 4px !default;
$field-list-default-bigger-padding-size: 12px !default;
$field-list-bigger-button-font-size: $text-sm !default;
$pivot-calculated-header-padding: 4px !default;
$pivot-calculated-bigger-header-padding: 6px !default;
$field-list-header-content-line-height: 1.125em !default;
$field-list-bigger-header-content-line-height: 1.6em !default;
$field-list-header-icon-wrapper-padding: 2px !default;
$field-list-bigger-header-icon-wrapper-padding: 7px !default;
$field-list-static-header-icon-wrapper-padding: $field-list-header-icon-wrapper-padding !default;
$field-list-static-bigger-header-icon-wrapper-padding: $field-list-bigger-header-icon-wrapper-padding !default;
$pivot-calculated-icon-opacity: .87 !default;
$field-list-bigger-button-line-height: 1.1em !default;
$field-list-excel-member-filter-height: 168px !default;
$field-list-excel-member-filter-node-limit-height: 165px !default;
$field-list-excel-filter-height: 248px !default;
$field-list-excel-member-filter-bigger-height: 128px !default;
$field-list-excel-filter-bigger-height: 227px !default;
$format-label-font-opacity: .87 !default;
$format-label-font-weight: $font-weight-medium !default;
$format-preview-bigger-height: 30px !default;
$format-outer-border-radius: 4px !default;
$format-dialog-width: 628px !default;
$field-list-editor-label-padding-size: 14px 10px 16px 20px !default;
$field-list-editor-label-font: 500 13px Inter !default;
$field-list-editor-label-opacity: .87 !default;
$field-list-editor-label-excel-width: 280px !default;
$field-list-editor-label-excel-padding-size: 14px 10px 9px 20px !default;
$field-list-editor-label-excel-opacity: 56%;
$field-list-back-margin: 5px !default;
$field-list-sort-wrapper-padding-size: 10px !default;
$field-list-border: $content-bg-color-alt3 !default;
$field-list-calc-expand-icon-padding: 8px !default;
$field-list-search-padding-size: 10px $field-list-title-padding-size !default;
$field-list-member-prompt-padding-size: 25px 12px !default;
$field-list-static-field-table-height: 210px !default;
$field-list-static-field-table-outer-div-height: 180px !default;
$field-list-search-popup-min-height: 540px !default;
$field-list-search-popup-table-height: 392px !default;
$field-list-search-popup-axis-content-height: 162px !default;
$field-list-search-popup-container-bigger-height: 580px !default;
$field-list-search-popup-table-bigger-height: 400px !default;
$field-list-search-popup-axis-table-bigger-height: 404px !default;
$field-list-search-popup-axis-content-bigger-height: 165px !default;
$field-list-axis-content-height: 133px !default;
$field-list-popup-axis-content-bigger-height: $field-list-axis-content-height !default;
$field-list-search-static-field-table-height: 261px !default;
$field-list-filter-toolbar-items-margin: 20px !default;
$field-list-treeview-ul-padding: 3px !default;
$field-list-treeview-li-padding: 0 !default;
$field-list-treeview-bigger-ul-padding: 0 !default;
$field-list-treeview-bigger-li-padding: 0 !default;
$field-list-treeview-mobile-ul-padding: 24px !default;
$field-list-treeview-mobile-li-padding: 0 !default;
$field-list-calc-list-icon: 8px !default;
$field-list-calc-list-icon-rtl: 5px !default;
$field-list-header-font-size: $text-sm !default;
$pivot-formatting-format-table-data-padding-right: 8px !default;
$field-list-header-padding: 18px !default;
$field-list-tree-header-padding: 6px !default;
$field-list-default-header-font-size: $field-list-header-font-size !default;
$field-list-value-field-caption-font-size: 13px !default;
$field-list-value-field-option-text-font-size: $field-list-value-field-caption-font-size !default;
$field-list-dialog-radius: $field-list-default-border-radius !default;
$field-list-table-header-padding: 0 0 0 $field-list-header-padding !default;
$field-list-table-header-font-weight: normal !default;
$field-list-calc-dialog-iconspace-margin-right: 12px !default;
$field-list-editor-search-padding-size: 12px !default;
$field-list-member-editor-search-padding: 0 $field-list-editor-search-padding-size 10px !default;
$field-list-member-editor-node-limit-outer-div-bigger-height: 115px !default;
$field-list-member-editor-bigger-height: 400px !default;
$field-list-member-editor-node-limit-bigger-height: 440px !default;
$field-list-active-color: $primary !default;
$field-list-default-font-color: $content-text-color !default;
$field-list-default-formula-font-color: $field-list-default-font-color !default;
$field-list-default-border-color: $content-bg-color-alt3 !default;
$field-list-drag-default-border-color: $field-list-default-border-color !default;
$field-list-default-prompt-color: $content-text-color-alt2 !default;
$field-list-toggle-border-color: $field-list-default-border-color !default;
$field-list-table-background-color: $content-bg-color !default;
$field-list-default-bg-color: $content-bg-color !default;
$field-list-header-background-color: $content-bg-color-alt1 !default;
$field-list-axis-header-color: $field-list-header-background-color !default;
$field-list-toggle-bg-color: $content-bg-color-alt2 !default;
$field-list-default-fill-color: $content-bg-color !default;
$field-list-drop-hover-color: $primary !default;
$field-list-button-font-color: $content-text-color !default;
$field-list-button-border-color: rgba($content-text-color, .12) !default;
$field-list-button-hover-color: $table-bg-color-hover !default;
$field-list-button-focus-color: $table-bg-color-selected !default;
$field-list-button-active-color: $content-text-color-alt1 !default;
$field-list-drag-clone-text-color: $content-text-color-alt1 !default;
$field-list-drag-clone-bg-color: $content-bg-color-alt3 !default;
$field-list-toggle-hover-color: $field-list-default-border-color !default;
$pivot-formula-background: $content-bg-color !default;
$pivot-formula-border: $border-light !default;
$pivot-text-area-background: $content-text-color !default;
$field-list-drag-icon-color: $icon-color-disabled !default;
$field-list-default-header-font-color: $content-text-color-alt2 !default;
$field-list-tree-icon-color: $icon-color !default;
$field-list-default-header-icon-font-color: $field-list-default-header-font-color !default;
$field-list-button-icon-color: $icon-color !default;
$field-list-icon-hover-color: $icon-color !default;
$field-list-toggle-font-color: $icon-color !default;
$error-font-color: $danger !default;
$format-label-font-color: $content-text-color-alt2 !default;
$format-preview-border-color: $border-light !default;
$format-outer-border-color: $border-light !default;
$format-outer-fill-color: $content-bg-color !default;
$field-list-editor-label-color: $content-text-color !default;
$field-list-editor-label-fill: $content-bg-color-alt1 !default;
$field-list-back-font-color: $icon-color !default;
$field-list-mobile-header-color: $content-bg-color-alt2 !default;
$field-list-mobile-header-font-color: $content-text-color-alt2 !default;
$field-list-sort-select-background-color: $icon-color !default;
$field-list-sort-select-border-color: transparent !default;
$field-list-sort-select-color: rgba($content-text-color-alt2, .87) !default;
$field-list-cal-button-text-color: $secondary-text-color !default;
$field-list-static-padding-size: 10px !default;
$field-list-treeview-padding-size: -30px !default;
$field-list-header-padding-size: 18px !default;
$field-list-axis-header-padding-size: 5px !default;
$field-list-selected-color: rgba($content-bg-color-hover, .87) !default;
$field-list-button-color: $content-bg-color !default;
$field-list-button-back-color: $icon-color !default;
$field-list-header-text-transform: none !default;
$field-list-icon-size: 14px !default;
$field-list-toggle-icon-size: 17px !default;
$field-list-member-filter-list-padding-size: -22px !default;
$field-list-member-filter-list-height: 166px !default;
$field-list-member-field-list-height: 200px !default;
$field-list-treeview-drag-padding: 6px !default;
$field-list-treeview-drag-margin: 4px !default;
$field-list-treeview-drag-bigger-padding: 3px !default;
$field-list-button-height: 32px !default;
$field-list-bigger-button-height: 36px !default;
$field-list-bigger-header-padding: 20px !default;
$field-list-bigger-header-font-size: $text-sm !default;
$field-list-button-padding: 9px 12px !default;
$field-list-bigger-button-padding: 9px 16px !default;
$field-list-header-icon-size: 14px !default;
$field-list-bigger-header-icon-size: 16px !default;
$field-list-bigger-tree-header-padding: 8px !default;
$field-list-bigger-excel-dialog-min-width: 350px !default;
$field-list-adaptive-content-padding-size: 20px !default;
$field-list-adaptive-footer-padding-size: 15px !default;
$field-list-adaptive-btn-icon-size: 18px !default;
$field-list-adaptive-btn-size: 52px !default;
$field-list-adaptive-icon-height: 50px !default;
$field-list-adaptive-drag-prompt-height: 22px !default;
$field-list-adaptive-pivot-button-height: 36px !default;
$field-list-adaptive-pivot-button-padding: 0 16px !default;
$pivot-dialog-font-weight: $font-weight-normal !default;
$field-list-toggle-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
$field-list-toggle-left-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
$field-list-drag-clone-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
$field-list-treeview-font-weight: $font-weight-medium !default;
$field-list-calc-formula-font-size: $text-sm !default;
$field-list-calc-bigger-formula-font-size: $text-sm !default;
$format-label-font-size: $text-sm !default;
$format-label-bigger-font-size: $text-sm !default;
$format-preview-height: 28px !default;
$format-device-preview-height: 26px !default;
$format-bigger-preview-height: 39px !default;
$olap-tree-wrapper-height: 495px;
$olap-tree-outer-div-height: 460px;
$olap-bigger-tree-wrapper-height: 570px;
$olap-bigger-tree-outer-div-height: 520px;
$field-list-text-transform: none !default;
$olap-bigger-tree-width: 283px !default;
$olap-bigger-tree-outer-div-width: 325px !default;
$field-list-adaptive-outerdiv-height: 187px !default;

@mixin active-wrap-styles {
  @if ($field-list-skin =='bootstrap4') {
    background-color: $field-list-sort-select-background-color;
    border-color: $field-list-sort-select-border-color;
    color: $field-list-sort-select-color;
    outline: none;
  }
}

@mixin wrap-styles {
  @if ($field-list-skin =='bootstrap4') {
    /* stylelint-disable */
    background-color: $gray-600 !important;
    border-color: $gray-600 !important;
    color: $white !important;
    /* stylelint-enable */
  }
}

@include export-module('field-list-layout') {
  .e-pivotfieldlist {
    .e-disable {
      display: none;
    }

    .e-hide {
      visibility: hidden;
    }
  }

  .e-pivot-formatting-dialog {
    /* stylelint-disable */
    max-height: 480px !important;
    max-width: 627px !important;
    width: 100%;
    min-width: 375px !important;
    /* stylelint-enable */

    .e-format-table {
      width: 100%;
  
      tr:nth-child(odd) {
        td {
          padding-bottom: 4px;
        }
      }
    }

    .e-format-delete-icon {
      font-size: 10px;
      font-weight: normal;
      @if ($field-list-skin == 'bootstrap4') {
        /* stylelint-disable */
        color: $black;
        /* stylelint-enable */
        opacity: .5;
      }

      &:hover {
        font-weight: 600;
        @if ($field-list-skin == 'bootstrap4') {
          opacity: 1;
        }
      }
    }

    .e-format-table tr:nth-child(even) {
      td {
        padding-bottom: 16px;
        padding-right: $pivot-formatting-format-table-data-padding-right;
        white-space: nowrap;
      }
      td.e-format-input-value {
        padding-right: 0;
        margin-right: 8px;
      }
    }

    .e-format-table.e-grandtotal-checkbox-table tr:nth-child(1) {
      td {
        padding-bottom: 20px;
      }
    }

    .e-visible-hide {
      visibility: hidden;
    }

    .e-format-value-span {
      display: table-cell;
      padding-right: 10px;
      vertical-align: bottom;
    }

    .e-format-value1,
    .e-format-value2 {
      display: inline-block;
      margin-right: 10px;
      margin-bottom: 0;
      width: 45%;
    }

    .e-format-font-color-picker {
      margin-left: 0;
      margin-right: 16px;
    }

    .e-format-inner-div {
      padding-left: 14px;
      padding-top: 14px;
      max-width: 579px;

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

    .e-format-outer-div {
      background-color: $format-outer-fill-color;
      border: 1px solid $format-outer-border-color;
      border-radius: $format-outer-border-radius;
      margin-bottom: 14px;
      @if ($skin-name == 'tailwind') {
        min-width: 460px;
      }

      @if ($skin-name == 'FluentUI') {
        min-width: 440px;
      }
    }

    .e-format-condition-button {
      float: left;
      @if ($skin-name == 'fluent2') {
        border-color: $format-condition-button-color;
      }
    }

    .e-split-colorpicker {
      @if ($field-list-skin == 'bootstrap4') {
        /* stylelint-disable */
        background-color: $format-label-font-color !important;
        color: $field-list-default-bg-color !important;
        /* stylelint-enable */
      }
    }

    .e-format-delete-button {
      background-color: transparent;
      border-color: transparent;
      float: right;
      padding-right: 12px;
      padding-top: 12px;

      @if ($skin-name == 'bootstrap5') {
        /* stylelint-disable */
        color: $field-list-default-font-color !important;
        /* stylelint-enable */
      }
    }

    .e-format-delete-button:hover,
    .e-format-delete-button:focus,
    .e-format-delete-button:active {
      background-color: transparent;
      border-color: transparent;
      box-shadow: 0 0 0 transparent;

      @if ($skin-name =='fluent2' or $skin-name == 'bootstrap5.3'){
        color: $field-list-button-back-color;
      }

      .e-format-delete-icon {
        font-weight: 600;
        @if ($field-list-skin == 'bootstrap4') {
          opacity: 1;
        }
      }
    }

    .e-format-label,
    .e-format-value-label {
      color: $format-label-font-color;
      font-size: $format-label-font-size;
      font-weight: $format-label-font-weight;
      opacity: $format-label-font-opacity;

      @if ($field-list-skin == 'bootstrap5') or ($field-list-skin == 'FluentUI') or ($field-list-skin == 'tailwind') {
        opacity: 1;
      }
    }

    .e-format-value-preview {
      border: 1px solid $format-preview-border-color;
      border-radius: $field-list-default-border-radius;
      pointer-events: none;
      margin: 0;
      @if ($skin-name =='bootstrap4') or ($skin-name =='bootstrap5') or ($skin-name =='bootstrap') or ($skin-name =='FluentUI') or ($skin-name =='tailwind') {
        padding: 0;
      }
      /* stylelint-disable */
      width: 80px;
      /* stylelint-enable */
      text-align: center;
    }

    .e-format-color-picker {
      @if ($skin-name == 'Material3') {
        border: 1px solid $info-outline-border;
        border-radius: 20px;
        min-width: 64px;
      }

      .e-split-btn-wrapper .e-split-btn {
        pointer-events: none;

        @if ($skin-name == 'bootstrap5.3') {
          &:focus {
            color: $field-list-tree-icon-color;
          }
        }
        .e-selected-color {
          background: none;
          margin: 0 2px;
          width: 14px;
          @if ($skin-name == 'bootstrap5') {
            /* stylelint-disable */
            color: $field-list-default-font-color !important;
            &:hover {
              color: $field-list-active-color !important;
            }
            /* stylelint-enable */
          }
        }
      }
    }

    .e-format-color-picker .e-split-btn-wrapper .e-btn.e-icon-btn {
      @if ($field-list-skin == 'bootstrap4') {
        padding: 4px 5px;
      }
    }

    .e-split-preview,
    .e-tip-transparent {
      border: 1px solid $format-preview-border-color;
      /* stylelint-disable */
      border-radius: 0 !important;
      /* stylelint-enable */
      height: 40%;
      left: -3px;
      position: absolute;
      top: 16px;
      width: 150%;
      @if ($skin-name == 'Material3') {
        max-height: 4px;
      }
    }

    &.e-device {
      /* stylelint-disable */
      min-width: 320px !important;
      width: 100%  !important;
      .e-format-inner-div {
        width: 100% !important;
      }
      .e-format-condition-button {
        .e-add-icon {
          margin-left: 0 !important;
        }
      }
      /* stylelint-enable */

      .e-format-delete-button {
        font-size: 12px;
        padding-right: 16px;
        padding-top: 16px;
      }

      .e-format-apply-button,
      .e-format-cancel-button {
        max-width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-format-font-color-picker {
        @if ($skin-name == 'tailwind') {
          margin-right: 30px;
        }
      }

      .e-format-outer-div {
        @if ($skin-name == 'tailwind') {
          min-width: 0;
        }
  
        @if ($skin-name == 'FluentUI') {
          min-width: 0;
        }
      }

      .e-visible-hide {
        display: none;
      }

      .e-format-value-preview {
        min-height: $format-device-preview-height;
        width: 100%;
      }
    }

    &.e-rtl {
      .e-format-font-color-picker {
        margin-left: 16px;
        margin-right: 0;
      }

      .e-format-condition-button {
        float: right;

        .e-add-icon {
          margin-left: auto;
        }
      }

      .e-format-inner-div {
        padding-left: 0;
        padding-right: 14px;
      }

      .e-format-delete-button {
        float: left;
        padding-left: 12px;
      }

      .e-format-table tr:nth-child(even) {
        td {
          padding-right: 0;
          padding-left: 10px;
        }
      }

      &.e-device {
        .e-format-font-color-picker {
          margin-right: 0;
        }
      }
    }
  }

  .e-pivotfieldlist-container,
  .e-pivot-formatting-dialog {
    &.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
      @if ($skin-name == 'FluentUI') {
        margin-right: 6px;
      }
      @if ($skin-name == 'Material3') {
        padding: 0;
      }
    }
  }

  .e-pivot-calc-dialog-div {
    /* stylelint-disable */
    max-height: 600px !important;
    /* stylelint-enable */
    min-width: 290px;

    .e-dlg-header-content,
    .e-footer-content {
      border: 0;
    }

    .e-dlg-content {
      @if ($skin-name != 'tailwind3') {
        padding-bottom: $pivot-dialog-content-padding;
      }
      @if ($skin-name == 'FluentUI') {
        /* stylelint-disable */
        padding-top: 1px !important;
        /* stylelint-enable */
      }

      .e-pivot-calc-custom-format-div {
        margin-top: 15px;
      }
    }

    .e-pivot-all-field-title,
    .e-pivot-field-name-title,
    .e-pivot-formula-title,
    .e-olap-hierarchy-title,
    .e-pivot-format-title,
    .e-olap-member-title {
      color: $field-list-default-header-font-color;
      font-size: $field-list-default-header-font-size;
      margin-bottom: 4px;
      margin-top: 12px;
      overflow: hidden;
      padding: $pivot-calculated-header-padding 0;
      padding-bottom: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
      @if ($skin-name == 'bootstrap5') {
        padding-bottom: 4px;
      }
      @if ($skin-name == 'tailwind') {
        padding: 0;
      }

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

    .e-treeview {
      .e-sibling {
        display: none;
      }

      .e-list-selected {
        opacity: .5;
      }
    }

    .e-treeview ul {
      overflow: hidden;

      li {
        padding: 0;

        .e-list-text {
          font-family: $field-list-font-family;
        }

        &:not(.e-active) {
          .e-list-icon {
            color: $field-list-tree-icon-color;

            @if ($skin-name == 'fluent2') {
              &:hover {
                color: $field-list-icon-hover-color;
              }
            }
          }
        }

        .e-list-icon {
          @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3') {
            color: $field-list-tree-icon-color;
          }
          /* stylelint-disable */
          float: right !important;
          margin: 0 12px 0 0;
          /* stylelint-enable */

          @if ($skin-name == 'fluent2') {
            &:hover {
              color: $field-list-icon-hover-color;
            }
            &:active {
              color: $field-list-icon-hover-color;
            }
          }
        }
      }

      .e-fullrow {
        cursor: default;
      }

      .e-list-item .e-text-content {
        align-items: center;
        display: flex;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        vertical-align: middle;
      }
    }

    .e-treeview .e-list-item div.e-icons {
      cursor: pointer;
      font-size: $field-list-icon-size;
      height: auto;
      opacity: $pivot-calculated-icon-opacity;
      padding: 0 4px;
      pointer-events: auto;
      width: auto;
    }

    .e-treeview .e-list-item div.e-icons.e-format {
      float: right;
      font-size: 20px;
      height: auto;
      margin-right: 12px;
      padding: 0;
    }

    .e-treeview .e-list-item div.e-iconspace {
      cursor: pointer;
      display: inline-block;
      font-size: 12px;
      height: 24px;
      margin-right: $field-list-calc-dialog-iconspace-margin-right;
      opacity: $pivot-calculated-icon-opacity;
      padding: 0 4px;
      pointer-events: auto;
      width: 24px;
    }

    .e-treeview .e-list-item {
      &:not(.e-active) {
        span.e-icons {
          color: $field-list-drag-icon-color;
        }
      }

      span.e-icons {
        @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3') {
          color: $field-list-drag-icon-color;
        }
        cursor: move;
        display: inline-block;
        font-size: $field-list-icon-size;
        margin-right: 4px;
        pointer-events: auto;
        width: 20px;

        @if ($skin-name == 'fluent2') {
          font-size: 16px;
          margin-top: 3px;
        }
      }
      @if ($skin-name == 'tailwind') {
        &.e-active {
          span.e-icons {
            color: $field-list-tree-icon-color;
          }
        }
      }
    }

    .e-dlg-header {
      font-size: 18px;
      font-weight: 500;
      opacity: $pivot-calculated-header-opacity;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 74%;
    }

    .e-contextmenu {
      background-color: $pivot-formula-background;
      border-radius: $field-list-default-border-radius;
    }

    .e-contextmenu .e-menu-item {
      color: $pivot-text-area-background;
      font-size: 14px;
      height: 48px;
      opacity: .87;
    }

    &.e-rtl {
      .e-treeview .e-list-item div.e-edit.e-icons,
      .e-treeview .e-list-item div.e-edited.e-icons,
      .e-treeview .e-list-item div.e-remove-report.e-icons {
        transform: rotate(0deg);
        margin: $field-list-calc-list-icon-rtl 0 0 0;
      }

      .e-treeview ul {
        margin-right: 0;

        li {
          margin-left: 0;
          margin-right: $field-list-treeview-padding-size;

          .e-text-content {
            padding: 0 24px 0 0;
            display: flex;
          }
        }
      }
    }

    /* stylelint-disable */
    .e-pivot-calc-input.e-empty-field::-webkit-input-placeholder,
    .e-pivot-calc-input.e-empty-field:-moz-placeholder,
    .e-pivot-calc-input.e-empty-field::-moz-placeholder,
    .e-pivot-calc-input.e-empty-field:-ms-input-placeholder{
      color: $error-font-color !important;
      font-weight: 600 !important;
    }
    /* stylelint-enable */

    .e-pivot-formula {
      background-color: $pivot-formula-background;
      border: 1px solid $pivot-formula-border;
      border-radius: $field-list-default-border-radius;
      color: $field-list-default-formula-font-color;
      font-size: $field-list-calc-formula-font-size;
      height: 70px;
      // opacity: .38;
      padding: $pivot-calculated-formula-font-padding;
      resize: none;
      width: 100%;

      &.e-copy-drop {
        cursor: copy;
      }
    }

    .e-list-parent .e-list-text {
      min-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    .e-pivot-treeview-outer {
      background-color: $pivot-formula-background;
      border: 1px solid $pivot-formula-border;
      border-radius: $field-list-default-border-radius;
      height: 120px;
      overflow: auto;
      
      @if ($skin-name == 'fluent2' or $skin-name =='tailwind3') {
        .e-pivot-treeview-outer-div{
          .e-pivot-treeview{
            border: none;
          }
        }
      }
    }

    /* stylelint-disable */
    &.e-olap-calc-dialog-div {
      min-width: 575px;

      .e-pivot-calc-outer-div {
        display: flex;

        .e-olap-field-tree-div {
          height: $olap-tree-wrapper-height;
          width: 50%;

          .e-pivot-treeview-outer {
            height: 100%;
            margin-top: 0;
            overflow: hidden;

            .e-pivot-treeview-outer-div {
              display: inline-block;
              height: $olap-tree-outer-div-height;
              overflow: auto;
              width: 100% !important;
            }

            .e-treeview {
              display: inline-table;
              height: 100%;
              width: 100%;
              min-width: 265px;

              @if ($skin-name == 'fluent2' or $skin-name =='tailwind3') {
                border: none;
              }

              ul {
                .e-list-text {
                  margin-bottom: 0; 
                  overflow: unset;
                  width: 100%;
                }

                .e-calcfieldmember .e-list-text{
                  width: 150px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .e-list-item .e-text-content {
                  margin: 0;
                  padding: 0 0 0 24px;
                }

                .e-remove-report.e-list-icon {
                  cursor: pointer;
                  font-size: 13px;
                  margin-top: 3px;
                  padding-left: 0px;
                  padding-right: 0px;
                  @if($skin-name == 'tailwind') {
                    margin-top: 10px;
                  }
                }

                .e-list-icon {
                  cursor: auto;
                  font-size: $field-list-icon-size;
                  width: auto;

                  &.e-edit,
                  &.e-edited {
                    cursor: pointer;
                    padding: 7px !important;
                  }
                }

                .e-list-item div.e-icons {
                  padding: 0;
                  height: auto;
                  float: none !important;
                }

                li {
                  &.e-draggable{
                    .e-fullrow {
                      cursor: move;
                    }
                  }
                  
                  margin-left: 0;
                  margin-right: 0;
                }
              }

              &.e-rtl {
                ul {
                  .e-list-icon {
                    transform: rotateX(0deg) rotateY(180deg);
                  }

                  .e-list-item .e-text-content {
                    padding: 0 24px 0 0;
                  }

                  li {
                    margin-left: 0;
                    margin-right: 0;
                  }
                }
              }
            }

            .e-treeview ul:first-child {
              padding-left: 10px;
              padding-right: 10px;
            }

            .e-pivot-all-field-title {
              color: $field-list-default-header-font-color;
              flex: auto;
              margin-top: 0;
              padding-bottom: $pivot-calculated-header-padding;
              padding-left: $field-list-header-padding;
              padding-right: $field-list-header-padding;
              @if ($skin-name == 'Material3') {
                font-size: $field-list-header-font-size !important;
              }
            }

            .e-pivot-all-field-title-container {
              background: $field-list-header-background-color;
              color: $field-list-default-header-font-color;
              display: flex;
              font-size: $field-list-header-font-size;
              @if ($skin-name == 'tailwind') {
                height: 30px;
              }

              .e-info {
                padding: 7px !important;

                &:hover {
                  color: $field-list-active-color;
                }
              }
            }
          }
        }

        .e-pivot-calculated-div {
          flex: auto;
          margin-left: 18px;

          .e-pivot-formula {
            height: 100px;
          }

          .e-pivot-calc-custom-format-div {
            margin-top: 15px;
          }

          .e-pivot-formula-title,
          .e-pivot-field-name-title,
          .e-olap-hierarchy-title,
          .e-pivot-format-title,
          .e-olap-member-title {
            padding-left: 0;
            padding-right: 0;
          }

          .e-pivot-field-name-title {
            margin-top: 0;
            padding-top: 0;
          }
        }
      }

      &.e-dialog {
        max-height: 700px !important;

        .e-calc-clear-btn {
          float: left;
          margin: 0;
        }
      }

      &.e-rtl {
        .e-pivot-calc-outer-div {
           .e-pivot-calculated-div {
            margin-left: 0;
            margin-right: 18px;
          }
        }

        &.e-dialog {
          .e-calc-clear-btn {
            float: right;
          }
        }
      }
    }
    /* stylelint-enable */
  }

  .e-pivotfieldlist-container {
    .e-adaptive-field-list-dialog,
    .e-member-editor-dialog {
      /* stylelint-disable */
      max-width: 400px !important;
      min-width: 320px !important;
      &.e-node-limit {
        max-height: 450px !important;
      }
      /* stylelint-enable */

      .e-member-prompt {
        padding: 25px $field-list-editor-search-padding-size;
        text-align: center;
        width: 100%;
      }

      .e-editor-search-container {
        display: flex;
        padding: $field-list-member-editor-search-padding;

        .e-clear-icon-hide {
          visibility: hidden;
        }
      }

      @if ($field-list-skin == 'bootstrap4') {
        &:not(.e-excel-filter) {
          .e-editor-search-container {
            padding: 5px $field-list-editor-search-padding-size 10px;
          }
        }
      }

      .e-select-all-container {
        ul li .e-text-content > .e-icon-expandable {
          display: none;
        }

        @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
          .e-select-all {
            border: none;
          }
        }
      }

      .e-member-editor-container-outer-div {
        display: inline-block;
        height: $field-list-member-filter-list-height;
        max-width: 400px;
        overflow: auto;
        width: 100%;
      }

      .e-member-editor-container {
        display: inline-table;
        width: 100%;

        @if ($skin-name == 'fluent2' or $skin-name =='tailwind3'){
          border: none;
        }

        &.e-rtl {
          ul {
            .e-list-icon {
              transform: rotateX(0deg) rotateY(180deg);
            }
          }
        }
      }

      &:not(.e-member-editor-dialog):not(.e-olap-field-list-tree) {
        ul {
          padding-left: $field-list-treeview-mobile-ul-padding;

          li.e-pivot-parent {
            @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
              padding-left: 13px;
            }
            @if ($skin-name == 'tailwind') {
              padding-left: 5px;
            }
          }

          li:not(.e-pivot-parent):not(.e-pivot-child) {
            .e-text-content {
              padding-left: $field-list-treeview-mobile-li-padding;
              margin-left: $field-list-adaptive-footer-padding-size;
            }
          }
        }
      }

      .e-member-editor-container ul {
        /* stylelint-disable */
        margin-left: $field-list-member-filter-list-padding-size;
        overflow: auto !important;
        /* stylelint-enable */

        li {
          .e-list-text {
            font-family: $field-list-font-family;
          }

          .e-list-icon {
            margin: 0;
          }
        }
      }

      /* stylelint-disable */
      .e-disable {
        display: none !important;
      }
      /* stylelint-enable */

      &.e-rtl {
        &:not(.e-member-editor-dialog):not(.e-olap-field-list-tree) {
          ul {
            padding-right: $field-list-treeview-mobile-ul-padding;

            li.e-pivot-parent {
              @if ($skin-name == 'bootstrap5') {
                padding-right: 7px;
              }
              @if ($skin-name == 'FluentUI') {
                padding-right: 13px;
              }
              @if ($skin-name == 'tailwind') {
                padding-right: 5px;
              }
            }

            li:not(.e-pivot-parent):not(.e-pivot-child) {
              .e-text-content {
                padding-right: $field-list-treeview-mobile-li-padding;
              }
            }
          }
        }
        .e-member-editor-outer-container {
          ul {
            margin-left: 0;
            margin-right: $field-list-member-filter-list-padding-size;
          }
        }
      }

      &.e-olap-editor-dialog {
        .e-member-editor-outer-container {
          .e-member-editor-container ul {
            margin-left: 0;
          }

          .e-treeview ul:first-child {
            padding-left: 10px;
            padding-right: 10px;
          }

          .e-editor-search-container {
            display: flex;
          }

          @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
            .e-select-all-container {
              .e-select-all {
                border: none;
              }
            }
          }
        }

        &.e-rtl {
          .e-member-editor-outer-container {
            ul {
              margin-right: 0;
            }
          }
        }
      }
    }

    .e-member-editor-dialog {
      .e-toolbar .e-toolbar-items {
        margin-left: $field-list-filter-toolbar-items-margin;
      }

      .e-clear-filter-button {
        float: left;
        /* stylelint-disable */
        margin: 0 !important;
        /* stylelint-enable */
        @if ($skin-name == 'FluentUI') {
          margin-left: 0;
          margin-right: 0;
        }

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

      .e-editor-label-container {
        align-items: center;
        background: $field-list-editor-label-fill;
        /* stylelint-disable */
        display: flex !important;
        /* stylelint-enable */
        height: 40px;
        justify-content: center;
        opacity: $field-list-editor-label-excel-opacity;
        @if ($skin-name == 'Material3') {
          border-top: $field-list-separator-border;
        }

        .e-editor-label {
          color: $field-list-editor-label-color;
          font: $field-list-editor-label-font;
          margin-bottom: 0;
          opacity: $field-list-editor-label-opacity;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .e-filter-sort {
        box-shadow: none;
        margin-left: $field-list-sort-wrapper-padding-size;

        .e-member-sort {
          @if ($field-list-skin == 'bootstrap4') {
            background-color: $content-bg;
            border-color: $gray-400;
            color: $gray-700;
          }

          @if ($skin-name == 'Material3') {
            border: 1px solid $format-outer-border-color;
            border-radius: $field-list-member-sort-border-radius;
            min-width: 40px;
          }

          &:hover {
            @include wrap-styles;
          }

          &.e-active {
            @include active-wrap-styles;
          }

          .e-sort-ascend-icon,
          .e-sort-descend-icon {
            font-size: 16px;
          }

          &:focus {
            @include wrap-styles;

            &.e-active {
              @include active-wrap-styles;
            }
          }
        }
      }

      .e-select-all-container ul {
        margin-left: $field-list-member-filter-list-padding-size;
        overflow: hidden;

        li {
          .e-list-text {
            font-family: $field-list-font-family;
          }

          .e-list-icon {
            margin: 0;
          }
        }
      }

      .e-filter-tab-container {
        border: 0;

        .e-tab-header {
          .e-toolbar-item .e-icon-left + .e-tab-text {
            margin: 0 0 0 6px;
          }

          .e-text-wrap {
            .e-tab-icon {
              height: fit-content;

              &::before {
                font-size: 14px;
                /* stylelint-disable */
                top: 0 !important;
                /* stylelint-enable */
              }
            }
          }
        }

        &.e-rtl {
          .e-tab-header {
            .e-toolbar-item .e-icon-left + .e-tab-text {
              margin: 0 6px 0 0;
            }
          }
        }
      }

      .e-excelfilter {
        padding-top: 20px;

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

        @if ($skin-name == 'tailwind3') {
          padding-top: 16px;
        }
        /* stylelint-disable */
        .e-member-editor-container-outer-div {
          height: $field-list-excel-member-filter-height !important;
        }
      }

      &.e-node-limit .e-excelfilter .e-member-editor-container-outer-div {
        height: $field-list-excel-member-filter-node-limit-height !important;
        /* stylelint-enable */
      }

      .e-label-filter,
      .e-value-filter {
        height: $field-list-excel-filter-height;
        overflow: auto;
        padding: 20px;
        padding-bottom: 0;

        .e-filter-text-div {
          /* stylelint-disable */
          color: $field-list-button-icon-color !important;
          /* stylelint-enable */
          font-size: 13px;
          font-weight: 500;
          @if ($skin-name == 'tailwind') {
            padding: 4px;
          }
        }

        .e-filter-option-container-1,
        .e-filter-option-container-2,
        .e-separator-div {
          padding-top: 20px;
        }

        .e-between-text-div {
          padding: 8px 0;
        }

        .e-disable {
          display: none;
        }

        @if ($skin-name == 'tailwind') {
          padding-top: 0;
        }
      }

      &.e-rtl {
        .e-toolbar .e-toolbar-items {
          margin-left: 0;
          margin-right: $field-list-filter-toolbar-items-margin;
        }

        .e-member-editor-outer-container {
          .e-editor-search-container {
            .e-filter-sort {
              margin-left: 0;
              margin-right: $field-list-sort-wrapper-padding-size;

              .e-member-sort {
                &:first-of-type {
                  @if ($skin-name == 'Material3') {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                  }
                }
                &:last-of-type {
                  @if ($skin-name == 'Material3') {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                  }
                }
              }
            }
          }
        }

        .e-footer-content {
          .e-clear-filter-button {
            float: right;
          }
        }
      }

      &.e-olap-editor-dialog {
        .e-member-editor-outer-container {
          .e-select-all-container ul {
            margin-left: 0;
          }

          .e-editor-search-container {
            .e-level-drop {
              margin: 0 5px;

              .e-caret {
                font-size: $field-list-icon-size;
              }

              li .e-disabled {
                opacity: .5;
                pointer-events: none;
              }
            }
          }
        }

        /* stylelint-disable */
        &.e-rtl {
          .e-member-editor-outer-container {
            .e-editor-search-container {
              .e-filter-sort {
                margin-left: 0;
                margin-right: $field-list-sort-wrapper-padding-size;
              }
            }
          }
        }
      }

      .e-member-editor-outer-container:not(.e-excelfilter) {
        .e-editor-search-container {
          padding-top: 4px !important;
        }

        @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
          .e-select-all-container {
            .e-select-all {
              border: none;
            }   
          }
        }
      }
    }

    .e-adaptive-field-list-dialog {
      ul:first-child {
        min-height: 170px;
        overflow: auto;
      }

      .e-member-editor-container ul {
        li {
          .e-calc-measure-icon,
          .e-calc-dimension-icon,
          .e-attributeCDB-icon,
          .e-hierarchyCDB-icon,
          .e-level-members,
          .e-namedSetCDB-icon,
          .e-measure-icon,
          .e-kpiGoal-icon,
          .e-kpiStatus-icon,
          .e-kpiTrend-icon,
          .e-kpiValue-icon {
            margin-left: 10px;
          }
        }
      }

      &.e-olap-editor-dialog {
        &.e-rtl {
          .e-member-editor-outer-container {
            ul li {
              .e-calc-measure-icon,
              .e-calc-dimension-icon,
              .e-attributeCDB-icon,
              .e-hierarchyCDB-icon,
              .e-level-members,
              .e-namedSetCDB-icon,
              .e-measure-icon,
              .e-kpiGoal-icon,
              .e-kpiStatus-icon,
              .e-kpiTrend-icon,
              .e-kpiValue-icon {
                margin-left: 0;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }

    .e-value-field-settings {
      max-width: 400px !important;
      min-width: 300px !important;

      .e-dlg-content {
        overflow: auto !important;
      }

      .e-value-field-div-content {
        padding: 0 $field-list-editor-search-padding-size 10px;          

        .e-field-option-container {
          .e-field-name-text-container {
            display: flex;

            .e-field-name-title,
            .e-field-name-content {
              font-size: 13px;
              font-weight: 500;
            }

            .e-field-name-title {
              flex: none;
              white-space: pre;
            }

            .e-field-name-content {
              flex: auto;
              width: 100%;
            }
          }

          .e-caption-input-container,
          .e-type-option-container,
          .e-base-field-option-container,
          .e-base-item-option-container {
            padding-top: $field-list-editor-search-padding-size;

            .e-base-field-option-text,
            .e-base-item-option-text,
            .e-type-option-text {
              font-size: $field-list-value-field-option-text-font-size;
              font-weight: 500;
              width: 100%;

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

            .e-caption-input-text {
              font-size: $field-list-value-field-caption-font-size;
            }
          }
        }
      }
    }

    .e-adaptive-field-list-dialog,
    .e-member-editor-dialog,
    .e-value-field-settings {
      border-radius: $field-list-dialog-radius;

      .e-dlg-header-content,
      .e-footer-content {
        border-radius: $field-list-default-border-radius;
      }

      .e-dlg-header-content {
        border: 0;
        font-weight: normal;
      }

      .e-footer-content {
        border-top: $field-list-border-size $field-list-border-type $field-list-default-border-color;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        @if ($skin-name != 'FluentUI') and ($skin-name != 'tailwind3') {
          padding-top: $field-list-editor-dialog-footer-padding;
          padding-bottom: $field-list-editor-dialog-footer-padding;
        }
        @if ($skin-name == 'FluentUI') {
          border-top: 0;
        }
        @if ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
          padding: $field-list-editor-dialog-footer-padding;
        }
        @if ($skin-name =='Material3') {
          white-space: nowrap;
        }
      }

      .e-dlg-content {
        overflow: hidden;
        padding: 0 !important;
        @if ($skin-name == 'Material3') {
          border-radius: 0;
        }

        .e-member-editor-outer-container ul li .e-text-content .e-checkbox-wrapper {
          @if ($skin-name == 'Material3') {
            margin: 0 !important;
          }
        }

        .e-empty-field::-webkit-input-placeholder {
          color: $error-font-color !important;
          font-weight: 600 !important;
        }

        .e-empty-field:-moz-placeholder {
          color: $error-font-color !important;
          font-weight: 600 !important;
        }

        .e-empty-field::-moz-placeholder {
          color: $error-font-color !important;
          font-weight: 600 !important;
        }

        .e-empty-field:-ms-input-placeholder {
          color: $error-font-color !important;
          font-weight: 600 !important;
        }
        /* stylelint-enable */
      }
    }

    .e-adaptive-field-list-dialog {
      .e-dlg-content {
        .e-member-editor-outer-container {
          .e-member-editor-container-outer-div {
            height: $field-list-member-field-list-height;
          }
        }
      }
    }
  }

  .e-field-list-tree.e-drag-item.e-treeview,
  .e-pivot-calc.e-drag-item.e-treeview {
    background: $field-list-drag-clone-bg-color;
    border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
    border-radius: $field-list-drag-clone-border-radius;
    box-shadow: $field-list-drag-clone-shadow-color;
    height: $field-list-drag-clone-height;
    line-height: $field-list-drag-clone-line-height;
    min-width: 100px;
    padding: 5px 10px;
    @if ($field-list-skin == 'bootstrap4') {
      border: 0;
      padding: 6px 10px;
    }
    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
      line-height: normal;
      padding: 0 10px;
    }

    .e-text-content {
      align-items: center;
      display: flex;
      height: 100%;
      padding: 0;
      text-align: center;
      width: 100%;
      @if ($field-list-skin == 'bootstrap4') {
        box-shadow: none;
      }

      .e-list-text {
        color: $field-list-drag-clone-text-color;
        font-size: $field-list-drag-clone-font-size;
        padding: 0;
        width: 100%;
        @if ($skin-name == 'Material3') {
          min-height: auto;
        }
        @if ($skin-name == 'fluent2') {
          padding: 7px 0;
        }
      }
    }

    .e-text-content > .e-icons,
    .e-checkbox-wrapper,
    .e-list-icon {
      display: none;
    }

    &.e-rtl {
      .e-text-content {
        padding-right: 0;
      }
    }

    &.e-drag-restrict {
      .e-text-content {
        padding-left: 24px;

        .e-list-text {
          padding: 0;
        }
      }

      /* stylelint-disable */
      .e-no-drop {
        display: inline-block !important;
        line-height: 0em;
        @if ($field-list-skin == 'bootstrap4') {
          color: $field-list-drag-clone-text-color;
          opacity: 0.7;
        }

        &::before {
          float: left;
          font-size: $field-list-drag-clone-font-size;
          padding: 5px 0;
        }
      }
      /* stylelint-enable */

      &.e-rtl {
        .e-text-content {
          padding-left: 0;
          padding-right: 24px;

          .e-icons {
            transform: rotateY(180deg);
          }
        }
      }
    }
  }

  /* stylelint-disable */
  .e-button-drag-clone {
    background: $field-list-drag-clone-bg-color !important;
    border: $field-list-border-size $field-list-border-type $field-list-drag-default-border-color;
    border-radius: $field-list-drag-clone-border-radius;
    box-shadow: $field-list-drag-clone-shadow-color;
    color: $field-list-drag-clone-text-color;
    font-size: $field-list-drag-clone-font-size;
    font-family: $field-list-font-family;
    height: $field-list-drag-clone-height;
    line-height: $field-list-drag-clone-line-height;
    min-width: 100px;
    overflow: hidden;
    padding: 5px 10px;
    text-align: center;
    width: auto;
    z-index: 100000;
    @if ($field-list-skin == 'bootstrap4') {
      border: 0;
      padding: 6px 10px;
    }
    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
      line-height: normal;
      padding: 0 10px;
    }

    .e-text-content {
      width: 100%;
      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
        display: inline;
        vertical-align: sub;
      }
    }
  }

  .e-pivot-error-dialog {
    max-width: 400px !important;
    width: auto !important;
  }
}


@mixin wrap-styles {
  float: right;
  height: $field-list-adaptive-btn-size;
  pointer-events: all;
  width: $field-list-adaptive-btn-size;
  z-index: 1000;

  .e-add-icon {
    font-size: $field-list-adaptive-btn-icon-size;
    line-height: $field-list-adaptive-icon-height;
  }
}

@include export-module('field-list-theme') {
  .e-pivotfieldlist {

    .e-member-editor-dialog,
    .e-olap-editor-dialog {
      visibility: hidden;
    }

    .e-select-table {
      background: $field-list-toggle-bg-color;
      border: .5px $field-list-border-type $field-list-toggle-border-color;
      box-shadow: $field-list-toggle-shadow-color;
      color: $field-list-toggle-font-color;
      font-size: $field-list-toggle-icon-size;
      height: $field-list-toggle-size;
      max-height: $field-list-toggle-size;
      max-width: $field-list-toggle-size;
      min-height: $field-list-toggle-size;
      min-width: $field-list-toggle-size;
      padding: $field-list-toggle-padding-size;
      position: relative;
      width: $field-list-toggle-size;
      z-index: 1000;

      @if ($skin-name =='Material3') {
        border: none;
        border-radius: 4px;
        top: 1px;
      }

      @if ($theme-name =='Material3-dark') {
        /* stylelint-disable */
        background: $field-list-toggle-bg-color-dark !important;
      }

      &.e-fieldlist-left {
        @if ($skin-name =='Material3') {
          left: 2px !important;
          /* stylelint-enable */
        }
        box-shadow: $field-list-toggle-left-shadow-color;
      }

      &:focus,
      &:active,
      &:hover {
        background-color: $field-list-toggle-hover-color;
        
        @if ($skin-name =='fluent2'){
          color: $field-list-icon-hover-color;
        }
      }
    }
  }

  /* stylelint-disable */
  #{if(&, "&", "*")}.e-rtl {

    .e-select-table {
      padding: 8px 5px;
    }
  }

  .e-pivotfieldlist-container {
    font-family: $field-list-font-family;
    font-size: $field-list-content-font-size;
    max-width: 700px;
    min-width: 300px;

    &.sf-pivotfieldlist-container {
      .e-field-list-container .e-field-table .e-field-list {
        display: block;
        overflow-y: auto;

        &.e-olap-field-list-tree.e-treeview {
          ul:first-child {
            padding-right: 0;
          }

          li {

            &.e-no-checkbox>.e-text-content>.e-checkbox-wrapper,
            .e-measure-icon {
              display: none;
            }

            &.e-rtl {
              ul:first-child {
                padding-left: 0;
                padding-right: 10px;
              }
            }
          }
        }

        li {
          .e-drag {
            padding: revert !important;
            margin: revert !important;
            width: auto !important;
            height: auto !important;
          }

          .e-draggable {
            display: contents;
          }

          .e-text-content {
            display: flex;
            align-items: center;

            @if ($skin-name =='FluentUI') {
              padding-right: revert;
            }
          }

          .e-list-text {
            text-overflow: ellipsis;
            overflow-x: hidden;
            width: 100%;
            white-space: nowrap;
          }
        }
      }

      .e-field-list-container .e-field-table .e-field-list.e-treeview:not(.e-rtl) {
        .e-list-text {
          padding-right: revert;
        }
      }

      .e-field-list-container .e-field-table .e-field-list.e-treeview.e-rtl {
        .e-list-text {
          padding-left: revert;
        }
      }

      .e-adaptive-field-list-dialog .e-member-editor-container {
        li {

          &.e-no-checkbox>.e-text-content>.e-checkbox-wrapper,
          .e-measure-icon {
            display: none;
          }
        }
      }
    }

    .e-layout-footer {
      display: flex;
      padding: 10px 2px 2px;

      .e-button-layout {
        flex: auto;
        text-align: end;

        .e-defer-apply-button {
          margin-right: 10px;
        }

        .e-cancel-btn,
        .e-defer-apply-button {
          min-width: fit-content;
        }
      }

      .e-cancel-btn,
      .e-defer-apply-button,
      .e-checkbox-layout {
        max-width: 25%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-checkbox-layout .e-label {
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis !important;
        white-space: unset;
      }

      .e-checkbox-layout {
        max-width: 45%;
        overflow: visible;
      }
    }

    .e-checkbox-layout {
      float: left;
      margin-top: 6px;

      @if ($skin-name =='tailwind') or ($skin-name =='FluentUI') {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }

    &.e-rtl {
      .e-layout-footer {
        .e-defer-apply-button {
          margin-left: 10px;
        }
      }

      .e-checkbox-layout {
        float: right;
      }
    }

    &.e-dialog {
      max-height: 550px !important;

      .e-layout-footer {
        padding: 0;
      }

      .e-checkbox-layout {
        margin-left: 10px;
      }

      .e-button-layout {
        @if ($skin-name !='tailwind3') {
          margin-right: 10px;
        }
      }

      .e-dlg-content ul li .e-text-content .e-checkbox-wrapper {
        @if ($skin-name =='Material3') {
          margin: 0 !important;
          /* stylelint-enable */
        }

        .e-ripple-container {
          @if ($skin-name =='Material3') {
            background: transparent;
          }
        }
      }
    }

    .e-dlg-header-content,
    .e-footer-content {
      border: 0;
    }

    .e-dlg-header-content {
      @if ($skin-name =='bootstrap5') {
        border-bottom: 1px solid $field-list-border;
      }

      .e-dlg-header {
        overflow: visible;
      }
    }

    .e-value-field-settings .e-dlg-header,
    .e-member-editor-dialog .e-dlg-header {
      overflow: hidden;
    }

    .e-footer-content {
      @if ($skin-name =='bootstrap5') {
        border-top: 1px solid $field-list-border;
      }
    }

    .e-field-list-title {
      display: flex;
      font-size: $field-list-title-font-size;
      min-height: 25px;
      padding: 0 2px $field-list-title-padding-size;
      width: 100%;

      .e-title-content {
        flex: auto;
      }
    }

    .e-title-header {
      display: flex;
      padding: 2px;
      width: 100%;

      @if ($skin-name =='bootstrap5' or $skin-name =='bootstrap5.3' or $skin-name == 'tailwind3')
      {
        align-items: center;
      }

      .e-title-content {
        flex: auto;

        @if ($skin-name =='Material3') {
          font-size: 22px;
          font-weight: $field-list-button-font-weight;
        }
      }
    }

    .e-field-list-container {
      display: flex;
      height: 342px;
      padding: 1px;
      position: relative;

      .e-field-table {
        border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
        border-radius: $field-list-default-border-radius;
        display: inline-block;
        overflow: hidden;
        width: 30%;

        .e-field-list-tree {
          .e-sibling {
            display: none;
          }
        }

        .e-field-header,
        .e-field-list {
          width: 100%;
        }

        .e-field-header {
          background: $field-list-header-background-color;
          color: $field-list-default-header-font-color;
          font-size: $field-list-header-font-size;
          font-weight: $field-list-table-header-font-weight;
          overflow: hidden;
          padding: $field-list-table-header-padding;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;

          @if ($field-list-skin =='tailwind') {
            text-transform: uppercase;
          }
        }

        .e-field-header-container {
          align-items: center;
          background: $field-list-header-background-color;
          color: $field-list-default-header-font-color;
          display: flex;
          height: $field-list-header-height;
          padding-right: $field-list-header-padding;

          .e-field-header {
            flex: auto;
          }

          .e-sort-none,
          .e-sort-ascend,
          .e-sort-descend {
            color: $field-list-default-header-icon-font-color;
            cursor: pointer;
            font-size: $field-list-header-icon-size;
            padding: 0 0 0 $field-list-icon-to-icon-padding;
            width: 20px;

            &.e-selected::before {
              color: $field-list-active-color;
            }

            &:hover,
            &:focus {
              font-weight: bold;
            }
          }

          /* stylelint-disable */
          @if ($skin-name =='FluentUI') or ($skin-name =='fluent2') {
            .e-sort-none {
              padding-right: 2px !important;
            }
          }
          /* stylelint-enable */
        }

        .e-field-list-tree-outer-div {
          display: inline-block;
          height: $field-list-tree-outer-div-height;
          overflow: auto;
          width: 100%;
        }

        .e-field-list {
          display: inline-table;
          height: 100%;
          padding-left: 2px;
          width: 100%;

          @if ($skin-name == 'fluent2' or $skin-name =='tailwind3'){
            border: none;
          }

          &:not(.e-olap-field-list-tree) {
            ul {
              padding-left: $field-list-treeview-ul-padding;

              li.e-pivot-parent {
                @if ($skin-name =='bootstrap5') {
                  padding-left: 10px;
                }

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

              li:not(.e-pivot-parent):not(.e-pivot-child) {
                .e-text-content {
                  padding-left: $field-list-treeview-li-padding;
                }
              }
            }
          }

          ul {
            overflow: hidden;

            li {
              .e-fullrow {
                cursor: default;
              }

              .e-drag {
                color: $field-list-drag-icon-color;
                cursor: move;
                display: inline-block;
                font-size: $field-list-icon-size;
                height: 20px;
                margin-bottom: $field-list-treeview-drag-margin;
                margin-right: 6px;
                pointer-events: all;
                text-align: center;
                vertical-align: bottom;
                width: 20px;

                @if ($skin-name =='fluent2') {
                  font-size: 16px;
                  margin-right: 0;
                }

                @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                  margin-right: 4px;
                  padding-left: 8px;
                }

                @if ($skin-name =='tailwind3') {
                  margin-right: 0;
                }

                &.e-disable-drag {
                  cursor: not-allowed;
                  opacity: .4;
                  visibility: hidden;
                }
              }

              .e-list-icon {
                @if ($skin-name !='fluent2'){
                  color: $field-list-tree-icon-color;
                }
                margin: 0;
              }

              /* stylelint-disable */
              .e-calc-measure-icon,
              .e-calc-dimension-icon,
              .e-attributeCDB-icon,
              .e-hierarchyCDB-icon,
              .e-level-members,
              .e-namedSetCDB-icon,
              .e-measure-icon,
              .e-kpiGoal-icon,
              .e-kpiStatus-icon,
              .e-kpiTrend-icon,
              .e-kpiValue-icon {
                margin-left: 10px;
              }

              /* stylelint-enable */
              .e-list-selected {
                opacity: .5;
              }

              .e-selected-node {
                font-weight: $field-list-treeview-font-weight;
              }

              .e-list-text {
                font-family: $field-list-font-family;
              }
            }

            /* stylelint-disable */
            li.e-disable {
              display: none !important;
            }

            /* stylelint-enable */
          }

          &.e-olap-field-list-tree {
            ul {
              .e-list-icon {
                font-size: $field-list-icon-size;
                height: auto;
                width: auto;

                @if ($skin-name =='fluent2'){
                  &:hover {
                    color: $field-list-icon-hover-color;
                  }
                }
              }
            }

            &.e-treeview ul:first-child {
              padding-left: 10px;
              padding-right: 10px;
            }

            &.e-rtl {
              ul {
                .e-list-icon {
                  transform: rotateX(0deg) rotateY(180deg);
                }
              }
            }
          }
        }

        &.e-olap-field-table {
          width: 40%;
        }
      }

      .e-axis-table {
        display: flex;
        overflow: hidden;
        width: 70%;

        .e-left-axis-fields,
        .e-right-axis-fields {
          padding-left: $field-list-default-padding-size;
          width: 50%;
        }

        .e-left-axis-fields .e-field-list-filters,
        .e-left-axis-fields .e-field-list-rows,
        .e-right-axis-fields .e-field-list-columns,
        .e-right-axis-fields .e-field-list-values {
          background-color: $field-list-table-background-color;
          border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
          border-radius: $field-list-default-border-radius;
          fill: $field-list-default-fill-color;
          font-weight: normal;
          min-height: 165px;
          position: relative;
          width: 100%;

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

          .e-axis-container {
            align-items: center;
            background: $field-list-header-background-color;
            border-bottom: $field-list-border-size $field-list-border-type $field-list-default-border-color;
            color: $field-list-default-header-font-color;
            display: flex;
            height: $field-list-header-height;
            padding: 0 $field-list-header-padding 0;

            @if ($skin-name =='Material3') {
              border-bottom: none;
            }

            .e-axis-icon-container {
              display: flex;
              height: $field-list-header-icon-size;
              width: 20px;

              .e-axis-rows,
              .e-axis-columns,
              .e-axis-values,
              .e-axis-filters {
                color: $field-list-default-header-icon-font-color;
                font-size: $field-list-header-icon-size;
              }
            }
          }

          .e-axis-header {
            flex: auto;
            font-size: $field-list-header-font-size;
            line-height: $field-list-header-content-line-height;
            overflow: hidden;
            padding: 0 8px;
            text-overflow: ellipsis;
            text-transform: $field-list-text-transform;
            white-space: nowrap;
            width: 100%;

            @if ($skin-name =='Material3') {
              font-weight: $field-list-table-header-font-weight;
            }
          }

          .e-axis-content {
            cursor: default;
            height: $field-list-axis-content-height;
            overflow: auto;
            scroll-behavior: smooth;
            width: 100%;

            &.e-drag-restrict {
              cursor: no-drop;
            }

            .e-pvt-btn-div {

              .e-drop-indicator-last,
              .e-drop-indicator {
                display: block;
                pointer-events: none;
                width: 100%;

                &.e-drop-hover {
                  border-top: 2px dashed $field-list-drop-hover-color;
                  margin-top: -2px;

                  @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') {
                    border-top: 2px solid $field-list-drop-hover-color;
                  }
                }
              }

              &.e-first-btn {
                .e-drop-indicator {
                  &.e-drop-hover {
                    position: absolute;
                  }
                }
              }

              .e-pivot-button {
                background: $field-list-button-color;
                border-bottom: $field-list-border-size $field-list-border-type $field-list-button-border-color;
                border-left: 0;
                border-radius: 0;
                border-right: 0;
                border-top: 0;
                box-shadow: none;
                cursor: default;
                display: flex;
                font-weight: normal;
                height: $field-list-button-height;
                line-height: 1em;
                padding: $field-list-button-padding;
                text-transform: none;
                width: 100%;

                @if ($field-list-skin =='bootstrap4') or ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') {
                  color: $field-list-button-font-color;
                }

                &.e-list-selected {
                  color: $field-list-button-font-color;
                  opacity: .5;
                }

                &:hover {
                  background-color: $field-list-button-hover-color;

                  .e-pvt-btn-content {
                    background-color: transparent;
                  }

                  @if ($skin-name =='fluent2'){
                    .e-sort,
                    .e-pv-filter,
                    .e-pv-filtered,
                    .e-dropdown-icon,
                    .e-edit {
                      color: $field-list-button-active-color;
                    }
                  }
                }

                &:focus {
                  @if ($skin-name =='tailwind3') {
                    /* stylelint-disable */
                    background-color: $field-list-default-fill-color !important;
                    /* stylelint-enable */
                    border: 1px Solid $field-list-active-color;
                  }
                }
                
                &:focus,
                &:active {
                  background-color: $field-list-button-focus-color;
                  color: $field-list-button-active-color;

                  .e-pvt-btn-content {
                    background-color: transparent;
                  }

                  .e-sort,
                  .e-pv-filter,
                  .e-pv-filtered,
                  .e-dropdown-icon,
                  .e-edit {
                    color: $field-list-button-active-color;
                  }

                  .e-drag {
                    @if ($skin-name =='tailwind') {
                      color: $field-list-button-active-color;
                    }
                  }
                }

                .e-pvt-btn-content {
                  background: transparent;
                  flex: auto;
                  font-size: $field-list-button-font-size;
                  height: 16px;
                  line-height: 1em;
                  overflow: hidden;
                  padding: 0 8px;
                  text-align: left;
                  text-overflow: ellipsis;
                  width: 70%;

                  @if ($skin-name =='tailwind') {
                    line-height: 1.2em;
                  }
                }

                .e-draggable {
                  height: 20px;
                  width: 20px;
                }

                .e-drag {
                  color: $field-list-drag-icon-color;
                  cursor: move;
                  font-size: $field-list-icon-size;
                  height: 20px;
                  width: 20px;

                  @if ($skin-name =='fluent2') {
                    font-size: 16px;
                  }

                  &.e-disable-drag {
                    cursor: not-allowed;
                    opacity: .4;
                    visibility: hidden;
                  }
                }

                .e-sort,
                .e-pv-filter,
                .e-pv-filtered,
                .e-dropdown-icon,
                .e-edit {
                  color: $field-list-button-icon-color;
                  cursor: pointer;
                  display: inline-block;
                  font-size: $field-list-icon-size;
                  height: 20px;
                  padding-left: $field-list-icon-to-icon-padding;
                  width: 20px;

                  &:hover {
                    color: $field-list-icon-hover-color;
                  }

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

                .e-sort {
                  height: $field-list-icon-size;
                }

                .e-remove {
                  display: none;
                }

                &.e-rtl {
                  .e-pvt-btn-content {
                    text-align: right;
                  }

                  .e-sort,
                  .e-pv-filter,
                  .e-pv-filtered,
                  .e-remove,
                  .e-dropdown-icon,
                  .e-edit {
                    padding-left: 0;
                    padding-right: $field-list-icon-to-icon-padding;
                  }
                }
              }
            }
          }

          .e-sort {
            height: fit-content;
            transform: rotateX(0deg);
            transition: transform 200ms ease-in-out;

            &.e-descend {
              transform: rotateX(180deg);
            }
          }

          .e-draggable-prompt {
            bottom: 32%;
            color: $field-list-default-prompt-color;
            font-size: $field-list-content-font-size;
            height: 25px;
            pointer-events: none;
            position: absolute;
            text-align: center;
            width: 100%;

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

        .e-left-axis-fields .e-field-list-rows,
        .e-right-axis-fields .e-field-list-values {
          margin-top: $field-list-default-padding-size;
        }

        &.e-olap-axis-table {
          width: 60%;
        }
      }
    }

    &.e-search-mode {
      &.e-static {
        max-height: 750px;

        .e-field-list-container .e-field-table {
          height: $field-list-search-static-field-table-height;
        }
      }

      &.e-popup {
        min-height: $field-list-search-popup-min-height;

        .e-field-list-container {
          height: 369px;

          @if ($skin-name =='FluentUI') {
            height: 394px;
          }

          @if ($skin-name =='fluent2') {
            height: 383px;
          }

          /* stylelint-disable */
          .e-field-table {
            height: $field-list-search-popup-table-height !important;

            .e-field-list-tree-outer-div {
              @if ($skin-name =='Material3' or $skin-name =='fluent2' or $skin-name =='tailwind') {
                height: $field-list-search-popup-table-outer-div-height !important;
              }
            }
          }

          .e-axis-table {
            height: 392px;

            .e-axis-content {
              height: $field-list-search-popup-axis-content-height !important;
            }
          }
          /* stylelint-enable */
        }
      }

      .e-member-prompt {
        color: $field-list-drag-icon-color;
        padding: $field-list-member-prompt-padding-size;
        text-align: center;
        width: 100%;

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

      .e-field-table {
        .e-field-list-search {
          display: flex;
          padding: $field-list-search-padding-size;

          .e-field-list-search-input .e-field-list-search-icon {
            float: right;
            font-size: $field-list-header-icon-size;
          }

          /* stylelint-disable */
          .e-input-group .e-input-group-icon,
          .e-input-group.e-control-wrapper .e-input-group-icon {
            border-width: 0 !important;
            cursor: text !important;
          }

          .e-input-group-icon:hover {
            background-color: transparent !important;
            border: transparent !important;
            color: currentColor !important;
          }
        }

        .e-field-list-tree-outer-div .e-disable,
        .e-disable {
          display: none !important;
        }
      }
    }

    .e-calculated-field {
      color: $field-list-cal-button-text-color;
      font-size: $field-list-button-font-size;
      font-weight: $field-list-button-font-weight;
      max-width: 160px;
      min-width: 145px;

      @if ($skin-name =='Material3') {
        border: $field-list-calculated-field-border;
        box-shadow: none;
      }

      &.e-disable {
        display: none;
      }

      @if ($skin-name =='fluent2') {
        &:hover {
          color: $field-list-cal-button-text-color-hover;
        }
      }
    }

    /* stylelint-enable */
    &.e-rtl {
      .e-field-table {
        .e-field-list {
          padding-left: 0;
          padding-right: 2px;

          &:not(.e-olap-field-list-tree) {
            ul {
              padding-right: $field-list-treeview-ul-padding;

              li.e-pivot-parent {
                @if ($skin-name =='bootstrap5') {
                  padding-right: 5px;
                }

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

              li:not(.e-pivot-parent):not(.e-pivot-child) {
                .e-text-content {
                  padding-right: $field-list-treeview-li-padding;
                }
              }
            }
          }

          ul li {

            /* stylelint-disable */
            .e-list-text {
              font-family: $field-list-font-family;
            }

            .e-drag {
              margin-left: 6px !important;
              margin-right: 0 !important;

              @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
                padding-right: 8px;
              }
            }

            .e-calc-measure-icon,
            .e-calc-dimension-icon,
            .e-attributeCDB-icon,
            .e-hierarchyCDB-icon,
            .e-level-members,
            .e-namedSetCDB-icon,
            .e-measure-icon,
            .e-kpiGoal-icon,
            .e-kpiStatus-icon,
            .e-kpiTrend-icon,
            .e-kpiValue-icon {
              margin-left: 0;
              margin-right: 10px;
            }

            /* stylelint-enable */
          }
        }

        .e-field-header {
          padding-left: 0;
          padding-right: $field-list-header-padding;
          text-align: right;

          @if ($field-list-skin =='bootstrap4') {
            padding-right: 12px;
          }
        }

        .e-field-header-container {
          padding-left: $field-list-header-padding;
          padding-right: 0;

          .e-sort-none,
          .e-sort-ascend,
          .e-sort-descend {
            padding: 0 $field-list-icon-to-icon-padding 0 0;
          }
        }
      }

      .e-axis-table {

        .e-left-axis-fields,
        .e-right-axis-fields {
          padding-left: 0;
          padding-right: $field-list-default-padding-size;
        }

        .e-left-axis-fields .e-field-list-filters,
        .e-left-axis-fields .e-field-list-rows,
        .e-right-axis-fields .e-field-list-columns,
        .e-right-axis-fields .e-field-list-values {
          .e-axis-header {
            float: right;
          }
        }
      }
    }

    &.e-static {
      background-color: $field-list-default-bg-color;
      border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
      max-height: 700px;
      padding: $field-list-static-padding-size;
      position: relative;

      .e-title-content {
        color: $field-list-default-font-color;
      }

      .e-field-list-container {
        display: inline-block;
        height: 100%;
        width: 100%;

        .e-field-table {
          height: $field-list-static-field-table-height;
          width: 100%;

          .e-field-list-tree-outer-div {
            height: $field-list-static-field-table-outer-div-height;
          }
        }

        .e-center-div {
          display: none;
        }

        .e-center-title {
          color: $field-list-default-header-font-color;
          font-size: $field-list-header-font-size;
          height: 25px;
          margin-top: 5px;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
        }

        .e-axis-table {
          width: 100%;

          .e-left-axis-fields {
            padding: 0;
          }

          .e-right-axis-fields {
            padding-left: $field-list-default-padding-size;
          }

          .e-left-axis-fields .e-field-list-rows,
          .e-right-axis-fields .e-field-list-values {
            margin-top: $field-list-default-padding-size;
          }
        }
      }

      &.e-rtl {
        .e-center-title {
          text-align: right;
        }

        .e-axis-table {
          .e-left-axis-fields {
            padding-left: $field-list-static-padding-size;
          }

          .e-right-axis-fields {
            padding: 0;
          }
        }
      }

      .e-layout-footer {
        .e-checkbox-layout {
          align-items: center;
          display: flex;
          margin-top: 0;
          overflow: hidden;
          width: 100%;

          .e-checkbox-wrapper {
            width: 100%;

            label {
              width: 100%;

              .e-label {
                overflow: hidden;
                /* stylelint-disable */
                text-overflow: ellipsis !important;
                /* stylelint-enable */
                white-space: unset;
                width: calc(100% - 20px);
              }
            }
          }
        }

        .e-button-layout {
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    &.e-device {
      height: 100%;
      /* stylelint-disable */
      max-height: 100% !important;
      max-width: 100% !important;
      /* stylelint-enable */
      min-height: 500px;
      width: 100%;

      .e-dlg-header-content {
        background-color: $field-list-mobile-header-color;
        color: $field-list-mobile-header-font-color;
        font-size: 14px;

        @if ($skin-name =='tailwind') {
          padding-left: 16px;
          padding-right: 16px;
        }
      }

      .e-adaptive-field-list-dialog,
      .e-member-editor-dialog,
      .e-value-field-settings {
        .e-dlg-header-content {
          background-color: transparent;
          color: $field-list-mobile-header-font-color;
        }

        .e-dlg-content .e-field-list-tree-outer-div {
          height: 210px;
          overflow: auto;

          @if ($skin-name == 'fluent2') {
            height: 170px;
          }
        }
      }

      .e-title-mobile-header {
        display: flex;
        align-items: center;
      }

      .e-field-list-back-icon {
        color: $field-list-back-font-color;
        font-size: 16px;
        height: auto;
        margin-left: 0;
        margin-right: 12px;
        text-align: center;
        width: 24px;
      }

      .e-disable {
        display: none;
      }

      .e-adaptive-container {
        height: 100%;
        position: relative;

        .e-tab-header {
          background: $field-list-header-background-color;
        }

        .e-content {
          display: initial;

          .e-field-list-filters,
          .e-field-list-rows,
          .e-field-list-columns,
          .e-field-list-values {
            display: inline-block;
            height: 100%;
            min-height: 250px;
            padding-top: $field-list-adaptive-content-padding-size;
            position: relative;
            width: 100%;

            .e-axis-content {
              overflow: auto;
            }

            .e-pvt-btn-div {
              display: grid;

              .e-drop-indicator {
                display: none;
              }

              .e-pivot-button {
                align-items: center;
                border: $field-list-border-size $field-list-border-type $field-list-button-border-color;
                border-left: 0;
                border-radius: 0;
                border-right: 0;
                border-top: 0;
                border-width: 1px 0;
                box-shadow: none;
                display: flex;
                font-size: $field-list-bigger-button-font-size;
                font-weight: normal;
                height: $field-list-adaptive-pivot-button-height;
                line-height: normal;
                padding: $field-list-adaptive-pivot-button-padding;
                text-transform: none;
                width: 100%;

                @if ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') {
                  background-color: $field-list-default-bg-color;
                  color: $field-list-default-font-color;
                }

                &.e-list-selected {
                  opacity: .5;
                }

                .e-pvt-btn-content {
                  flex: auto;
                  font-size: $field-list-bigger-button-font-size;
                  overflow: hidden;
                  text-align: left;
                  text-overflow: ellipsis;
                  width: 70%;
                }

                .e-drag {
                  display: none;
                }

                /* stylelint-disable */
                .e-sort,
                .e-pv-filter,
                .e-pv-filtered,
                .e-remove,
                .e-dropdown-icon,
                .e-edit {
                  color: $field-list-button-icon-color;
                  cursor: pointer;
                  display: inline-block;
                  font-size: $field-list-bigger-icon-size;
                  padding-left: 10px;
                  width: 24px;
                  font-size: 14px !important;

                  @if ($field-list-skin =='bootstrap4') {
                    color: $white;
                  }

                  @if ($skin-name =='bootstrap5') {
                    color: $field-list-button-icon-color;
                    padding-left: 8px;
                  }

                  &:hover {
                    color: $field-list-icon-hover-color;
                  }

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

                /* stylelint-enable */
                .e-sort {
                  height: fit-content;
                  transform: rotateX(0deg);
                  transition: transform 200ms ease-in-out;

                  &.e-descend {
                    transform: rotateX(180deg);
                  }
                }

                .e-remove {
                  display: inline-block;
                }

                &.e-rtl {
                  .e-pvt-btn-content {
                    text-align: right;
                  }

                  .e-sort,
                  .e-pv-filter,
                  .e-pv-filtered,
                  .e-remove,
                  .e-dropdown-icon,
                  .e-edit {
                    padding-left: 0;
                    padding-right: 10px;

                    @if ($skin-name =='tailwind') {
                      margin-right: 8px;
                      padding-right: 0;
                    }

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

            .e-axis-content {
              height: 100%;
              width: 100%;
            }

            .e-draggable-prompt {
              border: 1px dashed $field-list-header-background-color;
              color: $field-list-header-background-color;
              font-size: $field-list-drag-clone-font-size;
              height: $field-list-adaptive-drag-prompt-height;
              left: 15%;
              line-height: $field-list-adaptive-drag-prompt-height;
              pointer-events: none;
              position: absolute;
              text-align: center;
              top: 25%;
              vertical-align: middle;
              width: 70%;

              @if ($skin-name =='bootstrap5') or ($skin-name =='fluent2') or ($skin-name =='fluent') or ($skin-name =='bootstrap5.3') or ($skin-name =='tailwind') or ($skin-name =='tailwind3') {
                color: $field-list-default-font-color;
              }
            }
          }

          .e-pivot-calc-outer-div {
            .e-pivot-formula {
              background-color: $pivot-formula-background;
              border: 1px solid $pivot-formula-border;
              border-radius: $field-list-default-border-radius;
              color: $field-list-default-font-color;
              height: 200px;
              margin-left: 20px;
              margin-right: 20px;
              margin-top: 25px;
              padding: 2px 3px;
              resize: none;
              width: 90%;
            }

            /* stylelint-disable */
            .e-pivot-calc-input-div,
            .e-member-options,
            .e-pivot-calc-custom-format-div {
              margin-left: 20px;
              margin-right: 20px;
              margin-top: 20px;
              width: 90% !important;
            }

            /* stylelint-enable */
            .e-accordion {
              margin-top: 20px;
              overflow: auto;

              .e-acrdn-header {
                align-items: center;
                display: flex;

                .e-acrdn-header-icon {
                  display: table;
                  font-size: 12px;
                  min-width: 28px;
                  padding: 0;
                  position: absolute;
                  right: 16px;

                  .e-list-icon {
                    cursor: pointer;
                    display: table-cell;
                    padding-right: 6px;
                    text-align: center;
                    vertical-align: middle;

                    &.e-remove-report.e-icons {
                      padding-left: 10px;
                    }
                  }
                }
              }

              .e-icons.e-frame {
                margin-right: 12px;
              }

              .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-icons {
                @if (($skin-name =='bootstrap5') or ($skin-name =='fluent2') or ($skin-name =='fluent') or ($skin-name =='bootstrap5.3') or ($skin-name =='tailwind') or ($skin-name =='tailwind3') or ($skin-name =='material3')) {
                  color: $primary-text-color;
                }
              }

              &.e-rtl {
                .e-acrdn-header-icon {
                  left: 16px;
                  right: auto;
                }

                /* stylelint-disable */
                .e-icons.e-frame {
                  margin-left: 12px !important;
                  margin-right: 0 !important;
                }
                /* stylelint-enable */
              }
            }

            .e-radio-wrapper {
              margin-bottom: 24px;
              margin-right: 20px;

              .e-label {
                color: $field-list-default-font-color;
                font-family: $field-list-font-family;
                opacity: .87;
              }
            }

            .e-pivot-ok-button,
            .e-pivot-add-button,
            .e-pivot-cancel-button {
              float: right;
              margin-right: calc(10% - 20px);
              margin-top: 32px;
            }

            .e-pivot-ok-button {
              bottom: 0;
              position: sticky;
            }

            .e-pivot-accord {
              max-height: 290px;
              overflow: auto;

              ul {

                .e-list-icon {
                  color: $field-list-tree-icon-color;
                }

                .e-calcfieldmember .e-list-text {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 53%;
                }

                .e-list-header-icon {
                  display: table;
                  height: 30px;
                  min-height: 30px;
                  min-width: 24px;
                  padding: 0;
                  position: absolute;
                  right: 16px;
                  top: 0;

                  .e-list-edit-icon,
                  .e-remove-report.e-icons {
                    color: $field-list-tree-icon-color;
                    display: table-cell;
                    padding: 5px;
                    pointer-events: all;
                    text-align: center;
                    vertical-align: middle;
                  }
                }
              }

              &.e-rtl {
                ul {
                  .e-list-header-icon {
                    left: 16px;
                    right: auto;
                  }

                  .e-list-icon {
                    transform: rotateX(0deg) rotateY(180deg);
                  }
                }
              }
            }

            &.e-olap-calc-outer-div {
              max-height: 575px;
              overflow: hidden;
              overflow-y: auto;
            }
          }
        }

        .e-field-list-footer {
          bottom: 20px;
          display: inline-block;
          position: absolute;
          vertical-align: bottom;
          width: 100%;

          .e-field-list-footer-content {
            display: inline-block;
            padding: $field-list-adaptive-footer-padding-size;
            width: 100%;

            .e-field-list-btn,
            .e-calculated-field-btn {
              @include wrap-styles;
            }
          }
        }
      }

      .e-footer-content.e-field-list-footer {
        background-color: transparent;
        bottom: 0;
        display: inline-block;
        padding: $field-list-adaptive-footer-padding-size;
        pointer-events: none;
        position: absolute;
        vertical-align: bottom;
        width: 100%;

        .e-field-list-btn,
        .e-calculated-field-btn,
        .e-cancel-btn,
        .e-defer-apply-button {
          @include wrap-styles;

          @if ($skin-name =='Material3') {
            border-radius: $field-list-device-footer-button-border-radius;
            box-shadow: $field-list-device-footer-button-box-shadow;
          }
        }

        .e-cancel-btn,
        .e-defer-apply-button {
          float: left;
        }

        .e-cancel-btn,
        .e-defer-apply-button,
        .e-checkbox-layout {
          max-width: 20%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .e-checkbox-layout {
          max-width: 45%;
        }
      }

      &.e-static {
        border: 0;
        padding: 0;

        .e-field-list-filters,
        .e-field-list-rows,
        .e-field-list-columns,
        .e-field-list-values {
          .e-axis-content {
            max-height: 600px;
          }
        }
      }

      &.e-rtl {
        .e-field-list-back-icon {
          margin-left: 12px;
          margin-right: 0;
          transform: rotateY(180deg);
        }

        .e-field-list-footer {

          .e-field-list-btn,
          .e-calculated-field-btn {
            float: left;
          }

          .e-cancel-btn,
          .e-defer-apply-button {
            float: right;
          }
        }

        /* stylelint-disable */
        .e-pivot-calc-outer-div {

          .e-pivot-ok-button,
          .e-pivot-add-button,
          .e-pivot-cancel-button {
            float: left !important;
            margin-left: 20px;
          }
        }
        /* stylelint-enable */
      }
    }
  }
}


@include export-module('field-list-icons') {
  .e-pivotfieldlist {
    .e-select-table::before {
      content: '\e751';
    }
  }

  .e-pivot-formatting-dialog {
    .e-format-delete-icon::before {
      content: '\e7e7';
    }

    .e-add-icon::before {
      content: '\e805';
    }

    .e-colorpicker-wrapper .e-format-back-color + .e-split-btn-wrapper .e-split-btn .e-selected-color::before,
    .e-colorpicker-container .e-format-back-color + .e-split-btn-wrapper .e-split-btn .e-selected-color::before {
      content: '\e783';
    }

    .e-colorpicker-wrapper .e-format-font-color + .e-split-btn-wrapper .e-split-btn .e-selected-color::before,
    .e-colorpicker-container .e-format-font-color + .e-split-btn-wrapper .e-split-btn .e-selected-color::before {
      content: '\e76f';
    }
  }

  .e-level-options {
    .e-selected-level-icon::before {
      content: '\e774';
    }
  }

  .e-pivot-calc-dialog-div {
    .e-drag::before {
      content: '\e726';
    }

    .e-pivot-all-field-title-wrapper .e-info.e-icons::before,
    .e-pivot-all-field-title-container .e-info.e-icons::before {
      content: '\e800';
    }

    .e-list-item .e-text-content .e-edited.e-icons::before {
      content: '\e740';
    }

    .e-list-item .e-text-content .e-edit.e-icons::before {
      content: '\e730';
    }

    .e-list-item .e-text-content .e-remove-report.e-icons::before {
      content: '\e820';
    }

    .e-remove-report.e-icons::before {
      content: '\e820';
    }

    .e-list-item .e-text-content .e-format.e-icons::before {
      content: '\e748';
    }

    /* stylelint-disable */
    .e-measureGroupCDB-icon::before {
      content: '\e7d2' !important;
    }

    .e-measure-icon::before {
        content: '\e7d2' !important;
    }

    .e-folderCDB-icon::before {
        content: '\e83c' !important;
    }

    .e-folderCDB-open-icon::before {
        content: '\e760' !important;
    }

    .e-dimensionCDB-icon::before {
        content: '\e81d' !important;
    }

    .e-kpiCDB-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiGoal-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiStatus-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiTrend-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiValue-icon::before {
        content: '\e73f' !important;
    }

    .e-namedSetCDB-icon::before {
        content: '\e829' !important;
    }

    .e-hierarchyCDB-icon::before {
        content: '\e709' !important;
    }

    .e-attributeCDB-icon::before {
        content: '\e73e' !important;
    }

    .e-hierarchy-level-0-icon::before {
        content: '\e76a' !important;
    }

    .e-hierarchy-level-1-icon::before {
        content: '\e76a' !important;
    }

    .e-hierarchy-level-2-icon::before {
        content: '\e807' !important;
    }

    .e-hierarchy-level-3-icon::before {
        content: '\e780' !important;
    }

    .e-hierarchy-level-4-icon::before {
        content: '\e711' !important;
    }

    .e-hierarchy-level-5-icon::before {
        content: '\e837' !important;
    }

    .e-calcMemberGroupCDB::before {
      content: '\e798' !important;
    }

    .e-calc-measure-icon::before {
      content: '\e7d2' !important;
    }

    .e-calc-dimension-icon::before {
      content: '\e81d' !important;
    }

    .e-sort-none::before {
        content: '\e824' !important;
    }

    .e-sort-ascend::before {
        content: '\e7df' !important;
    }

    .e-sort-descend::before {
        content: '\e7d8' !important;
    }
    /* stylelint-enable */
  }

  .e-pivotfieldlist-wrapper,
  .e-pivotfieldlist-container {
    .e-field-list-back-icon::before {
      content: '\e773';
    }

    .e-sort::before {
      content: '\e7df';
    }

    .e-pv-filter::before {
      content: '\e7f7';
    }

    .e-pv-filtered::before {
      content: '\e735';
    }

    .e-drag::before {
      content: '\e726';
    }

    .e-add-icon::before {
      content: '\e805';
    }

    .e-remove::before {
      content: '\e7e7';
    }

    .e-axis-rows::before {
      content: '\e7e6';
    }

    .e-axis-columns::before {
      content: '\e76b';
    }

    .e-axis-values::before {
      content: '\e7d2';
    }

    .e-axis-filters::before {
      content: '\e7f7';
    }

    .e-selected-option-icon::before {
      content: '\e72b';
    }

    .e-clear-filter-icon::before {
      content: '\e72c';
    }

    .e-dropdown-icon::before {
      content: '\e729';
    }

    /* stylelint-disable */
    .e-measureGroupCDB-icon::before {
      content: '\e7d2' !important;
    }

    .e-measure-icon::before {
        content: '\e7d2' !important;
    }

    .e-folderCDB-icon::before {
        content: '\e83c' !important;
    }

    .e-folderCDB-open-icon::before {
        content: '\e760' !important;
    }

    .e-dimensionCDB-icon::before {
        content: '\e81d' !important;
    }

    .e-kpiCDB-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiGoal-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiStatus-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiTrend-icon::before {
        content: '\e73f' !important;
    }

    .e-kpiValue-icon::before {
        content: '\e73f' !important;
    }

    .e-namedSetCDB-icon::before {
        content: '\e829' !important;
    }

    .e-hierarchyCDB-icon::before {
        content: '\e709' !important;
    }

    .e-attributeCDB-icon::before {
        content: '\e73e' !important;
    }

    .e-hierarchy-level-0-icon::before {
        content: '\e76a' !important;
    }

    .e-hierarchy-level-1-icon::before {
        content: '\e76a' !important;
    }

    .e-hierarchy-level-2-icon::before {
        content: '\e807' !important;
    }

    .e-hierarchy-level-3-icon::before {
        content: '\e780' !important;
    }

    .e-hierarchy-level-4-icon::before {
        content: '\e711' !important;
    }

    .e-hierarchy-level-5-icon::before {
        content: '\e837' !important;
    }

    .e-calcMemberGroupCDB::before {
      content: '\e798' !important;
    }

    .e-calc-measure-icon::before {
      content: '\e7d2' !important;
    }

    .e-calc-dimension-icon::before {
      content: '\e81d' !important;
    }

    .e-sort-none::before {
        content: '\e824' !important;
    }

    .e-sort-ascend::before {
        content: '\e7df' !important;
    }

    .e-sort-descend::before {
        content: '\e7d8' !important;
    }

    .e-field-list-search-icon::before {
      content: '\e754' !important;
    }

    /* stylelint-enable */
    .e-pivot-calc-outer-div .e-pivot-accord .e-edited.e-icons::before {
      content: '\e740';
    }

    .e-pivot-calc-outer-div .e-pivot-accord .e-edit.e-icons::before {
      content: '\e730';
    }

    .e-pivot-calc-outer-div .e-pivot-accord .e-remove-report.e-icons::before {
      content: '\e820';
    }

    .e-pivot-button .e-edit::before {
      content: '\e730';
    }

    .e-sort-ascend-icon::before {
      content: '\e7a3';
    }

    .e-sort-descend-icon::before {
      content: '\e7b6';
    }
  }
}