@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-toggle-field-list.e-field-list-icon-left {
        right: 0;
        position: absolute;
      }
  
      &.e-toggle-field-list.e-field-list-icon-right {
        left: 0;
        position: absolute;
      }

      &.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 */
      }
    }
  }
}