@use 'sass:color';
@use 'sass:meta';
@use 'sass:list';
@use 'sass:math';

$brand-primary: #0070f0 !default;
$brand-primary-darken-10: color.adjust($brand-primary, $lightness: -10%) !default;
$brand-primary-darken-15: color.adjust($brand-primary, $lightness: -20%) !default;
$brand-primary-darken-25: color.adjust($brand-primary, $lightness: -30%) !default;
$brand-primary-darken-35: color.adjust($brand-primary, $lightness: -40%) !default;
$brand-primary-lighten-10: color.adjust($brand-primary, $lightness: 10%) !default;
$brand-primary-lighten-15: color.adjust($brand-primary, $lightness: 15%) !default;
$brand-primary-lighten-20: color.adjust($brand-primary, $lightness: 20%) !default;
$brand-primary-lighten-30: color.adjust($brand-primary, $lightness: 30%) !default;
$brand-primary-lighten-40: color.adjust($brand-primary, $lightness: 40%) !default;
$brand-primary-font: #fff !default;
$gray-base: #1a1a1a !default;
$gray-darker: #131313 !default;
$gray-dark: #2a2a2a !default;
$gray: #313131 !default;
$gray-light: #393939 !default;
$grey-44: #414141 !default;
$grey-88: #484848 !default;
$grey-99: #505050 !default;
$grey-8c: #585858 !default;
$grey-ad: #676767 !default;
$grey-dark-font: #f0f0f0 !default;
$grey-white: #6e6e6e !default;
$grey-lighter: #767676 !default;
$grey-f9: #7e7e7e !default;
$grey-f8: #858585 !default;
$grey-f5: #8d8d8d !default;
$grey-e6: #959595 !default;
$grey-dd: #9c9c9c !default;
$grey-d4: #a4a4a4 !default;
$grey-cc: #acacac !default;
$grey-light-font: #fff !default;
$brand-success: #48b14c !default;
$brand-success-dark: #358238 !default;
$brand-info: #2aaac0 !default;
$brand-info-dark: #208090 !default;
$brand-warning: #fac168 !default;
$brand-warning-dark: #f9ad37 !default;
$brand-danger: #d44f4f !default;
$brand-danger-dark: #c12f2f !default;
$brand-success-light: #dff0d8 !default;
$brand-info-light: #d9edf7 !default;
$brand-warning-light: #fcf8e3 !default;
$brand-danger-light: #f2dede !default;
$input-border-focus: #104888 !default;
$brand-success-font: #2f7432 !default;
$brand-info-font: #1a6c7a !default;
$brand-warning-font: #9d6106 !default;
$brand-danger-font: #ac2a2a !default;
$base-font: #000 !default;
$shadow: #000 !default;
$skin-name: 'bootstrap-dark' !default;
$theme-name: 'bootstrap-dark' !default;

$font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, '-apple-system', 'BlinkMacSystemFont' !default;

$grey-base: $gray-base !default;
$grey-darker: $gray-darker !default;
$grey-dark: $gray-dark !default;
$grey: $gray !default;
$grey-light: $gray-light !default;
$grey-lighter: $gray-lighter !default;

$msg-color: $grey-light-font !default;
$msg-bg-color: $gray-dark !default;
$msg-border-color: $gray !default;
$msg-color-alt1: $grey-light-font !default;
$msg-bg-color-alt1: transparent !default;
$msg-border-color-alt1: $gray-light !default;
$msg-color-alt2: $brand-primary-font !default;
$msg-bg-color-alt2: $grey-ad !default;
$msg-border-color-alt2: $grey-ad !default;

$msg-icon-color: $grey-light-font !default;
$msg-icon-color-alt1: $grey-light-font !default;
$msg-icon-color-alt2: $brand-primary-font !default;

$msg-close-icon-color: $grey-cc !default;
$msg-close-icon-color-alt1: $grey-cc !default;
$msg-close-icon-color-alt2: $brand-primary-font !default;

$msg-danger-color: color.adjust($brand-danger, $lightness: 30%) !default;
$msg-danger-bg-color: color.adjust($brand-danger, $lightness: -25%) !default;
$msg-danger-border-color: color.adjust($brand-danger, $lightness: -22%) !default;
$msg-danger-color-alt1: color.adjust($brand-danger, $lightness: 20%) !default;
$msg-danger-bg-color-alt1: transparent !default;
$msg-danger-border-color-alt1: $brand-danger !default;
$msg-danger-color-alt2: $gray-base !default;
$msg-danger-bg-color-alt2: $brand-danger !default;
$msg-danger-border-color-alt2: $brand-danger !default;

$msg-danger-icon-color: color.adjust($brand-danger, $lightness: 30%) !default;
$msg-danger-icon-color-alt1: $brand-danger !default;
$msg-danger-icon-color-alt2: $gray-base !default;

$msg-danger-close-icon-color: $grey-cc !default;
$msg-danger-close-icon-color-alt1: $grey-cc !default;
$msg-danger-close-icon-color-alt2: $gray-base !default;

$msg-success-color: color.adjust($brand-success, $lightness: 20%) !default;
$msg-success-bg-color: color.adjust($brand-success, $lightness: -25%) !default;
$msg-success-border-color: color.adjust($brand-success, $lightness: -20%) !default;
$msg-success-color-alt1: $brand-success !default;
$msg-success-bg-color-alt1: transparent !default;
$msg-success-border-color-alt1: $brand-success !default;
$msg-success-color-alt2: $gray-base !default;
$msg-success-bg-color-alt2: $brand-success !default;
$msg-success-border-color-alt2: $brand-success !default;

$msg-success-icon-color: color.adjust($brand-success, $lightness: 20%) !default;
$msg-success-icon-color-alt1: $brand-success !default;
$msg-success-icon-color-alt2: $gray-base !default;

$msg-success-close-icon-color: $grey-cc !default;
$msg-success-close-icon-color-alt1: $grey-cc !default;
$msg-success-close-icon-color-alt2: $gray-base !default;

$msg-warning-color: color.adjust($brand-warning, $lightness: 20%) !default;
$msg-warning-bg-color: color.adjust($brand-warning, $lightness: -50%) !default;
$msg-warning-border-color: color.adjust($brand-warning, $lightness: -45%) !default;
$msg-warning-color-alt1: $brand-warning !default;
$msg-warning-bg-color-alt1: transparent !default;
$msg-warning-border-color-alt1: $brand-warning !default;
$msg-warning-color-alt2: $gray-base !default;
$msg-warning-bg-color-alt2: $brand-warning !default;
$msg-warning-border-color-alt2: $brand-warning !default;

$msg-warning-icon-color: $brand-warning !default;
$msg-warning-icon-color-alt1: $brand-warning !default;
$msg-warning-icon-color-alt2: $gray-base !default;

$msg-warning-close-icon-color: $grey-cc !default;
$msg-warning-close-icon-color-alt1: $grey-cc !default;
$msg-warning-close-icon-color-alt2: $gray-base !default;

$msg-info-color: color.adjust($brand-info, $lightness: 35%) !default;
$msg-info-bg-color: color.adjust($brand-info, $lightness: -25%) !default;
$msg-info-border-color: color.adjust($brand-info, $lightness: -22%) !default;
$msg-info-color-alt1: $brand-info !default;
$msg-info-bg-color-alt1: transparent !default;
$msg-info-border-color-alt1: $brand-info !default;
$msg-info-color-alt2: $gray-base !default;
$msg-info-bg-color-alt2: $brand-info !default;
$msg-info-border-color-alt2: $brand-info !default;

$msg-info-icon-color: $brand-info !default;
$msg-info-icon-color-alt1: $brand-info !default;
$msg-info-icon-color-alt2: $gray-base !default;

$msg-info-close-icon-color: $grey-cc !default;
$msg-info-close-icon-color-alt1: $grey-cc !default;
$msg-info-close-icon-color-alt2: $gray-base !default;

$appbar-bg-color-alt1: $gray-dark !default;
$appbar-color-alt1: $grey-dark-font !default;
$appbar-border-color-alt1: $gray-dark !default;
$appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;

$appbar-bg-color-alt2: $grey-d4 !default;
$appbar-color-alt2: $gray-darker !default;
$appbar-border-color-alt2: $grey-d4 !default;
$appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;

$appbar-bottom-shadow: none !default;
$appbar-top-shadow: none !default;

$font-size: 12px !default;
$font-weight: normal !default;
$font-path: 'common-images' !default;
$header-bg-color: $grey-white !default;
$header-gradient-color: none !default;
$header-border-color: $grey-base !default;
$header-font-color: $grey-light-font !default;
$header-icon-color: $grey-light-font !default;
$content-bg-color: $grey-white !default;
$content-border-color: $grey-base !default;
$content-font-color: $grey-light-font !default;
$default-bg-color: $grey-white !default;
$default-gradient-color: none !default;
$default-border-color: $grey-base !default;
$default-font-color: $grey-light-font !default;
$default-icon-color: $grey-light-font !default;
$hover-bg-color: $grey-ad !default;
$hover-gradient-color: none !default;
$hover-border-color: $grey-base !default;
$hover-font-color: $grey-light-font !default;
$hover-icon-color: $grey-light-font !default;
$active-bg-color: $grey-44 !default;
$active-gradient-color: none !default;
$active-border-color: $grey-base !default;
$active-font-color: $grey-light-font !default;
$active-icon-color: $grey-light-font !default;
$error-font-color: $brand-danger-font !default;
$warning-font-color: $grey-dark-font !default;
$success-font-color: $brand-success-font !default;
$information-font-color: $brand-info-font !default;
$overlay-bg-color: #383838 !default;
$shadow-color: rgba(0, 0, 0, .4) !default;
$border-size: 1px !default;
$border-type: solid !default;
$border-radius: 0 !default;
$border-left-radius: 0 !default;
$border-right-radius: 0 !default;
$border-top-radius: 0 !default;
$border-bottom-radius: 0 !default;

$frozen-shadow: rgba(0, 0, 0, .25) !default;
$frozen-shadow-2: rgba(0, 0, 0, .25) !default;

$font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, '-apple-system', 'BlinkMacSystemFont' !default;
$font-size: 12px !default;
$font-weight: normal !default;
$font-path: 'common-images' !default;
$header-bg-color: $grey-white !default;
$header-gradient-color: none !default;
$header-border-color: $grey-base !default;
$header-font-color: $grey-light-font !default;
$header-icon-color: $grey-light-font !default;
$content-bg-color: $grey-white !default;
$content-border-color: $grey-base !default;
$content-font-color: $grey-light-font !default;
$default-bg-color: $grey-white !default;
$default-gradient-color: none !default;
$default-border-color: $grey-base !default;
$default-font-color: $grey-light-font !default;
$default-icon-color: $grey-light-font !default;
$hover-bg-color: $grey-ad !default;
$hover-gradient-color: none !default;
$hover-border-color: $grey-base !default;
$hover-font-color: $grey-light-font !default;
$hover-icon-color: $grey-light-font !default;
$active-bg-color: $grey-44 !default;
$active-gradient-color: none !default;
$active-border-color: $grey-base !default;
$active-font-color: $grey-light-font !default;
$active-icon-color: $grey-light-font !default;
$error-font-color: $brand-danger-font !default;
$warning-font-color: $grey-dark-font !default;
$success-font-color: $brand-success-font !default;
$information-font-color: $brand-info-font !default;
$overlay-bg-color: #383838 !default;
$shadow-color: rgba(0, 0, 0, .4) !default;
$border-size: 1px !default;
$border-type: solid !default;
$border-radius: 0 !default;
$border-left-radius: 0 !default;
$border-right-radius: 0 !default;
$border-top-radius: 0 !default;
$border-bottom-radius: 0 !default;

$css: '' !default;
$imported-modules: () !default;

@mixin export-module($module) {
  @if (list.index($imported-modules, $module) == null) {
    $imported-modules: list.append($imported-modules, $module) !global;
    @content;
  }
}

@include export-module('base-core') {

  .e-control,
  .e-css,
  .e-error {
    font-family: $font-family;
    font-size: $font-size;
    font-weight: $font-weight;
  }

  $white: #fff;
  $background: #e82824;
  $warning: #ffd800;
  $yellow: #ff0;
  .e-error {
    @if $skin-name == 'Material3' {
      color: rgba($error-font-color);
    }
    @else {
      color: $error-font-color;
    }
  }

  .e-control,
  .e-control [class ^= 'e-'],
  .e-control [class *= ' e-'] {
    box-sizing: border-box;
  }

  .e-control:focus,
  .e-control *:focus {
    outline: none;
  }

  .e-rtl {
    direction: rtl;
    text-align: right;
  }

  .e-overlay {
    background-color: $overlay-bg-color;
    height: 100%;
    opacity: .5;
    pointer-events: none;
    touch-action: none;
    width: 100%;
  }

  .e-hidden {
    display: none;
  }

  .e-blazor-hidden {
    visibility: hidden;
  }

  .e-disabled {
    background-image: none;
    cursor: default;
    opacity: .35;
  }

  .e-ul {
    list-style-type: none;
  }

  .e-prevent-select {
    user-select: none;
  }

  .e-warning {
    @if $skin-name == 'Material3' {
      color: rgba($warning-font-color);
    }
    @else {
      color: $warning-font-color;
    }
  }

  .e-success {
    @if $skin-name == 'Material3' {
      color: rgba($success-font-color);
    }
    @else {
      color: $success-font-color;
    }
  }

  .e-information {
    @if $skin-name == 'Material3' {
      color: rgba($information-font-color);
    }
    @else {
      color: $information-font-color;
    }
  }

  .e-block-touch {
    touch-action: pinch-zoom;
  }
  .e-license {
    color: $yellow;
    text-decoration: none;
  }
  .e-license-banner {
    position: absolute;
    right: 10px;
    top: 27%;
    cursor: pointer;
  }
}

@include export-module('base-animation') {

  @keyframes SlideLeftOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(-100%, 0);
    }
  }

  @keyframes SlideLeftIn {
    from {
      transform: translate(-100%, 0);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideRightIn {
    from {
      transform: translate(100%, 0);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideRightOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(100%, 0);
    }
  }

  @keyframes SlideBottomIn {
    from {
      transform: translate(0, 100%);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideBottomOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(0, 100%);
    }
  }

  @keyframes SlideTopIn {
    from {
      transform: translate(0, -100%);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes SlideTopOut {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(0, -100%);
    }
  }

  @keyframes SlideRight {
    from {
      width: 0;
    }

    to {
      width: 100%;
    }
  }

  @keyframes SlideLeft {
    from {
      width: 100%;
    }

    to {
      width: 0;
    }
  }

  @keyframes SlideDown {
    from {
      height: 0;
    }

    to {
      height: 100%;
    }
  }

  @keyframes SlideUp {
    from {
      height: 100%;
    }

    to {
      height: 0;
    }
  }

  @keyframes FadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes FadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes ZoomIn {
    from {
      transform: translate(0, 0) scale(0);
    }

    to {
      transform: translate(0, 0) scale(1);
    }
  }

  @keyframes ZoomOut {
    from {
      transform: translate(0, 0) scale(1);
    }

    to {
      transform: translate(0, 0) scale(0);
    }
  }

  @keyframes FadeZoomIn {
    from {
      opacity: 0;
      transform: scale(0);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes FadeZoomOut {
    from {
      opacity: 1;
      transform: scale(1);
    }

    to {
      opacity: 0;
      transform: scale(0);
    }
  }

  @keyframes FlipRightDownIn {
    from {
      transform: perspective(400px) rotateY(-180deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipRightDownOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(-180deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipRightUpIn {
    from {
      transform: perspective(400px) rotateY(135deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipRightUpOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(135deg);
      transform-origin: right center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftDownIn {
    from {
      transform: perspective(400px) rotateY(-180deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftDownOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(135deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftUpIn {
    from {
      transform: perspective(400px) rotateY(-135deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipLeftUpOut {
    from {
      transform: perspective(400px) rotateY(0deg);
      transform-origin: left center;
      transform-style: preserve-3d;
    }

    to {
      transform: rotateY(135deg) perspective(200px);
      transform-origin: left center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYLeftIn {
    from {
      opacity: 0;
      transform: perspective(400px) rotateY(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(90deg);
    }

    to {
      opacity: 1;
      transform: rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYLeftOut {
    from {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(90deg);
    }

    75% {
      transform: perspective(850px) rotateY(125deg);
    }

    to {
      opacity: 0;
      transform: rotateY(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYRightIn {
    from {
      opacity: 0;
      transform: perspective(400px) rotateY(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(-90deg);
    }

    to {
      opacity: 1;
      transform: rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipYRightOut {
    from {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateY(-90deg);
    }

    to {
      opacity: 0;
      transform: rotateY(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXDownIn {
    from {
      opacity: 0;
      transform: perspective(400px) rotateX(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(90deg);
    }

    to {
      opacity: 1;
      transform: rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXDownOut {
    from {
      opacity: 1;
      transform: perspective(400px) rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(90deg);
    }

    75% {
      transform: perspective(850px) rotateX(125deg);
    }

    to {
      opacity: 0;
      transform: rotateX(180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXUpIn {
    from {
      opacity: 0;
      transform: perspective(400px) rotateX(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(-90deg);
    }

    to {
      opacity: 1;
      transform: rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  @keyframes FlipXUpOut {
    from {
      opacity: 1;
      transform: perspective(400px) rotateX(0deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }

    50% {
      transform: perspective(700px) rotateX(-90deg);
    }

    to {
      opacity: 0;
      transform: rotateX(-180deg);
      transform-origin: center center;
      transform-style: preserve-3d;
    }
  }

  #{&} .e-ripple,
  #{&} .e-ripple-style {
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  $ripple-background: rgba(0, 0, 0, .1);
  $ripple-background-m3: linear-gradient(90deg, rgba(28, 27, 31, .08) 0%, rgba(28, 27, 31, .1) 5%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 50%, rgba(28, 27, 31, .1) 95%, rgba(28, 27, 31, .08) 100%);

  #{&} .e-ripple-element,
  #{&} .e-ripple-style::after {
    @if $skin-name =='Material3' {
      background: $ripple-background-m3;
    }

    @else {
      background-color: $ripple-background;
    }
    border-radius: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transform: scale(0);

    @if $skin-name =='Material3' {
      transition: opacity .3s transform 50ms cubic-bezier(.2, 0, 0, 1);
    }

    @else {
      transition: opacity, transform 0ms cubic-bezier(0, .1, .2, 1);
    }
  }

  #{&} .e-ripple-style {
    $ripple-style-background: rgba(0, 0, 0, .3);
    $ripple-style-background-m3: rgba(28, 27, 31, .12);

    &::after {
      @if $skin-name =='Material3' {
        background: $ripple-style-background-m3;
      }

      @else {
        background: $ripple-style-background;
      }
      content: '';
      display: block;
      height: 50%;
      left: 25%;
      opacity: 0;
      top: 25%;
      transform: scale(3);
      @if $skin-name =='Material3' {
        transition: transform .3s, opacity .3s;
      }
      @else {
        transition: transform .5s, opacity .5s;
      }
      width: 50%;
    }

    &:active::after {
      opacity: 1;
      transform: scale(0);
      transition: 0s;
    }
  }
}

@include export-module('base-icons') {
@at-root {
  @font-face {
    font-family: "e-icons";
    font-style: normal;
    font-weight: normal;
    src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMjeJT0EAAAEoAAAAVmNtYXBfdVloAAAPHAAADBBnbHlm8WbYAgAAKMwAAuL4aGVhZC6rC+wAAADQAAAANmhoZWEIXgcoAAAArAAAACRobXR4nAb+rAAAAYAAAA2cbG9jYQTtBMAAABssAAANoG1heHAEkgLMAAABCAAAACBuYW1lc0cOBgADC8QAAAIlcG9zdMAADNgAAw3sAAA10AABAAAEAAAAAFwEAP/A/8AEQAABAAAAAAAAAAAAAAAAAAADZwABAAAAAQAAdReOiF8PPPUACwQAAAAAAOXF43cAAAAA5cXjd//A/+QEQAQcAAAACAACAAEAAAAAAAEAAANnAsAAIQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA4QDsMwQAAAAAXAQcABwAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAP/kBAD/5AQAAAAEAP/kBAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAP/ABAAAAAQAAAAEAAAABAAAAAQAAAAEAP/ABAAAAAQA/8AEAAAABAAAAAQAAAAEAAAABAAAAAQA/8AEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAA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AwwDDQMOAw8DEAMRAxIDEwMUAxUDFgMXAxgDGQMaAxsDHAMdAx4DHwMgAyEDIgMjAyQDJQMmAycDKAMpAyoDKwMsAy0DLgMvAzADMQMyAzMDNAM1AzYDNwM4AzkDOgM7AzwDPQM+Az8DQANBA0IDQwHLAcwBzQHOAc8B0AHRAdIB0wHUAdUDRANFA0YDRwNIA0kDSgNLA0wDTQNOA08DUANRA1IDUwNUA1UDVgNXA1gDWQNaA1sDXANdA14DXwNgA2EDYgNjA2QDZQNmAGYB1gHXAdgB2QBnAdoB2wBoAGkAagBrAGwAbQBuAG8AcABxAHIAcwB0AHUAdgABAAIAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwFQAHoAewB8AH0AfgB/AIAAgQCCAIMAhACFAIYAhwCIAIkAigCLAIwAjQCOAI8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AeAB5ANIAogCjAKQApQCmAKcAqACpAKoAqwCsAK0ArgCvALAAsQCyALMAtAC1ALYAtwC4ALkAugC7ALwAvQC+AL8AwADBAMIAwwDEAMUAxgDHAMgAyQDKAMsAzADNAM4AzwDQANEB3AHdAd4B3wHgAeEB4gHjAeQB5QHmAecB6AHpAeoB6wHsAe0B7gHvAB8AIAHwAHcA0wHxAfIB8wH0AfUB9gH3AfgB+QH6AfsB/AH9Af4B/wIAAgECAgIDAgQCBQIGAgcCCAIJAgoCCwIMAg0CDgIPAhACEQITAhQCFQIWAhcBegCQAJEAkgCTAJQAlQCWAJcAmACZAJoAmwCcAJ0AngCfAKAAoQEaARsBHAEdAR4BHwEgASEBIwEkASUBdAF1AXYBdwF4AXkBKgErASwBLQEuAS8BMAExATIBMwE0ATUBNgE3ATgBOQE6ATsBPAE9AT4BPwF7AXwBfQF+AX8BgAGBAYIBgwGkAaMBogGhAaYBpwGoAaUBqQGqAasBrAGtAYQBhQGGAYcBiAGJAYoBiwGMAY0BjgGPAZABkQGSAZMBwwHEAcUBxgHHAcIBQAFBAUIBQwFEACUBRgFHAUgAJgFKAUsBTAFNAU4BTwFFAUkBlAAnAZUBlgGYAZkBmgGbAZwBnwGXAZ0BngGgAa4BrwGwAbEAKAG3Ab8BuQG6AbsBvAG9Ab4BwAHBACkBtgHKACoAKwAsAC0ALgAv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AAGoGAABqOwAAalwAAGqDAABqnQAAargAAGrNAABrCAAAaxYAAGstAABrPgAAa1oAAGt3AABrlAAAa8EAAGvqAABsBwAAbDUAAGxYAABseAAAbL4AAGzoAABtDwAAbTAAAG3hAABuFQAAbjYAAG5hAABunQAAbsAAAG8tAABvVgAAb4wAAG+/AABv3wAAb/oAAHAkAABwUwAAcHwAAHCmAABwxgAAcOMAAHEMAABxLAAAcVUAAHGaAABxwQAAceEAAHIMAAByLQAAclYAAHJ/AABylQAAct4AAHMbAABzigAAc64AAHPjAAB0DAAAdDwAAHRnAAB1XwAAdXYAAHWNAAB2BQAAdjgAAHZIAAB2YAAAdyEAAHdMAAB3WwAAd84AAHgTAAB4KwAAeDgAAHhaAAB4fgAAeKEAAHkBAAB5VAAAeZwAAHm3AAB59QAAeh4AAHpGAAB6aQAAepYAAHraAAB6+QAAew4AAHtCAAB7WAAAe3cAAHuTAAB7qAAAe+cAAHzDAAB81gAAfPcAAH0KAAB9PAAAfU8AAH14AAB9iAAAfgkAAH5RAAB+dgAAfvgAAH8mAAB/OgAAf1YAAH9zAAB/mwAAgAQAAIAcAACAagAAgOQAAIEdAACBcQAAgbkAAIICAACCGgAAgjkAAIJXAACCdwAAgowAAIKlAACDggAAg7UAAIQCAACEEAAAhCQAAITSAACE4gAAhSwAAIV2AACFxwAAhg8AAIZcAACGhwAAhpMAAIahAACGugAAhtMAAIbhAACG7gAAhwcAAIdRAACHmwAAiD4AAIjZAACJdQAAihEAAIpuAACKewAAiq0AAIq7AACLfgAAi/gAAIwVAACMhwAAjJIAAIyvAACNFwAAjYsAAI43AACOxAAAj0EAAI9OAACPXAAAj+AAAJBmAACQeQAAkfoAAJIgAACSKwAAkjYAAJJBAACSTAAAklcAAJJiAACShQAAko8AAJLNAACTIQAAk0IAAJNeAACTgQAAlIoAAJWTAACWJgAAlzQAAJimAACY5wAAmRoAAJkqAACZdQAAmdgAAJoBAACaKgAAmlcAAJrOAACa7QAAmwEAAJsVAACcBAAAnE8AAJ2TAACdrgAAnoQAAJ70AACfRwAAn9cAAJ/4AACgCgAAoEYAAKBSAACgZAAAoIYAAKCRAACgvwAAoMoAAKDgAACg8QAAoRg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AAEAAAAAA/QD9AALAAAJAQcJARcJATcJAScCAP68sAFD/r2xAUMBRLD+vQFDsQKxAUOy/r7+vbEBQ/69sgFCAUOxAAAABgAAAAADMwP0AD8AfwC/AP8BPwF/AAAlFR8OPw8vDw8OBR8PPw49AS8ODw4BFR8NOwE/Di8OKwEPDQUfDjsBPw09AS8NKwEPDQEVHw4/Dy8PDw4FHw8/Dj0BLw4PDgJNAgMEBQYGCAgJCQoLCwwLDAwLCgoKCQgHBwYFBAICAQECAgQFBgcHCAkKCgoLDAwLDAsLCgkJCAgGBgUEAwL+fwECAgQFBgcHCAkKCgoLDAwMCwsLCgkJCAgGBgUEAwICAwQFBgYICAkJCgsLCwwMDAsKCgoJCAcHBgUEAgIBgAIDBAUGBggICQkKCwsMCwwMCwoKCgkIBwcGBQQCAgEBAgIEBQYHBwgJCgoKCwwMCwwLCwoJCQgIBgYFBAMC/n8BAgIEBQYHBwgJCgoKCwwMDAsLCwoJCQgIBgYFBAMCAgMEBQYGCAgJCQoLCwsMDAwLCgoKCQgHBwYFBAICAYACAwQFBgYICAkJCgsLDAsMDAsKCgoJCAcHBgUEAgIBAQICBAUGBwcICQoKCgsMDAsMCwsKCQkICAYGBQQDAv5/AQICBAUGBwcICQoKCgsMDAwLCwsKCQkICAYGBQQDAgIDBAUGBggICQkKCwsLDAwMCwoKCgkIBwcGBQQCAn8LDAsLCgkJCAgGBgUEAwEBAQEDBAUGBggICQkKCwsMCwwMCwoKCgkIBwcGBQQCAgEBAgIEBQYHBwgJCgoKCwwMCwwLCwoJCQgIBgYFBAMBAQEBAwQFBgYICAkJCgsLDAsMDAsKCgoJCAcHBgUEAgIBAQICBAUGBwcICQoKCgsMAXUMCwsLCgoICQcHBQUEAwICAwQFBQcHCQgKCgsLCwwMCwsLCgoICQcHBQUEAwICAwQFBQcHCQgKCgsLCwwMCwsLCgoICQcHBQUEAwICAwQFBQcHCQgKCgsLCwwMCwsLCgoICQcHBQUEAwICAwQFBQcHCQgKCgsLCwF1DAwLCgoKCQgHBwYFBAICAQECAgQFBgcHCAkKCgoLDAwLDAsLCgkJCAgGBgUEAwEBAQEDBAUGBggICQkKCwsMCwwMCwoKCgkIBwcGBQQCAgEBAgIEBQYHBwgJCgoKCwwMCwwLCwoJCQgI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IzU/BDUvByM1LwchDwYBogEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEb/oY/ngYGBQUEAwEBAgQFsp4GBgUFBAMBAQIEBbKeBgYFBQQDAQECBAWyAQEDBAUFBgcBuAcGBQUEAwEBrwYCBAIBAQMEBQUGBp6vBgIEAgEBAwQFBQYGnq8GAgQCAQEDBAUFBgaeAQEDBAUFBgf+SAcGBQUEAwEBBAoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJ8goJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJ8goJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJCgoJCQkICAcHBgUFBAMDAQEDAwQFBQYHBwgICQkJsx/8rQNyHx8BAQMEBQUGBkMIBwV3TgEBAwQFBQYHQggHBXdOAQEDBAUFBgZDCAcFdy4HBgUFBAMBAQEBAwQFBQYHLnQFAwcIQwYGBQUEAwEBTnQFAwcIQgcGBQUEAwEBTnQFAwcIQwYGBQUEAwEBHwcGBQUEAwEBAQEDBAUFBgAAAAABAAAAAAN5A/gAVgAAAREvBg8LHwUBHwIzPwQBPwUvCw8GETUvCSsBDwkBwdAEBgUGCwwMDAYFBQUEBAMCBAEBBAIEAwUBOwcTDAwMBgYFBQE/BQMEAgQBAQQCAwQEBQUFBgwMDAsGBQYE0AECAgYHCgoGBgcGBgcGBQsJCAYCAgEDuf0lzQQEAwMDAQEDAwMEBAUFBgUMDAwMBQYFBP7JBwkDAwICAwQBOwUFBgUMDAwMBQYFBQQEAwIEAQEDAwMEBM0C2wYHBgYKCgcGAgIBAQICBgcKCgYGBwAAAgAAAAAD+AP4AEUAiQAACQEPBR8LPwYRFR8JOwE/CTURLwoPBRcRHwozPwMBPwUvCw8G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AAUAFgCnAAMAAQQJAAYADgC9AAMAAQQJAAoAWADLAAMAAQQJAAsAJAEjIGUtaWNvbnNSZWd1bGFyZS1pY29uc2UtaWNvbnNWZXJzaW9uIDEuMGUtaWNvbnNGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGUALQBpAGMAbwBuAHMAUgBlAGcAdQBsAGEAcgBlAC0AaQBjAG8AbgBzAGUALQBpAGMAbwBuAHMAVgBlAHIAcwBpAG8AbgAgADEALgAwAGUALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAADZwECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4BHwEgASEBIgEjASQBJQEmAScBKAEpASoBKwEsAS0BLgEvATABMQEyATMBNAE1ATYBNwE4ATkBOgE7ATwBPQE+AT8BQAFBAUIBQwFEAUUBRgFHAUgBSQFKAUsBTAFNAU4BTwFQAVEBUgFTAVQBVQFWAVcBWAFZAVoBWwFcAV0BXgFfAWABYQFiAWMBZAFlAWYBZwFoAWkBagFrAWwBbQFuAW8BcAFxAXIBcwF0AXUBdgF3AXgBeQF6AXsBfAF9AX4BfwGAAYEBggGDAYQBhQGGAYcBiAGJAYoBiwGMAY0BjgGPAZABkQGSAZMBlAGVAZYBlwGYAZkBmgGbAZwBnQGeAZ8BoAGhAaIBowGkAaUBpgGnAagBqQGqAasBrAGtAa4BrwGwAbEBsgGzAbQBtQG2AbcBuAG5AboBuwG8Ab0BvgG/AcABwQHCAcMBxAHFAcYBxwHIAckBygHLAcwBzQHOAc8B0AHRAdIB0wHUAdUB1gHXAdgB2QHaAdsB3AHdAd4B3wHgAeEB4gHjAeQB5QHmAecB6AHpAeoB6wHsAe0B7gHvAfAB8QHyAfMB9AH1AfYB9wH4AfkB+gH7AfwB/QH+Af8CAAIBAgICAwIEAgUCBgIHAggCCQIKAgsCDAINAg4CDwIQAhECEgITAhQCFQIWAhcCGAIZAhoCGwIcAh0CHgIfAiACIQIiAiMCJAIlAiYCJwIoAikCKgIrAiwCLQIuAi8CMAIxAjICMwI0AjUCNgI3AjgCOQI6AjsCPAI9Aj4CPwJAAkECQgJDAkQCRQJGAkcCSAJJAkoCSwJMAk0CTgJPAlACUQJSAlMCVAJVAlYCVwJYAlkCWgJbAlwCXQJeAl8CYAJhAmICYwJkAmUCZgJnAmgCaQJqAmsCbAJtAm4CbwJwAnECcgJzAnQCdQJ2AncCeAJ5AnoCewJ8An0CfgJ/AoACgQKCAoMChAKFAoYChwKIAokCigKLAowCjQKOAo8CkAKRApICkwKUApUClgKXApgCmQKaApsCnAKdAp4CnwKgAqECogKjAqQCpQKmAqcCqAKpAqoCqwKsAq0CrgKvArACsQKyArMCtAK1ArYCtwK4ArkCugK7ArwCvQK+Ar8CwALBAsICwwLEAsUCxgLHAsgCyQLKAssCzALNAs4CzwLQAtEC0gLTAtQC1QLWAtcC2ALZAtoC2wLcAt0C3gLfAuAC4QLiAuMC5ALlAuYC5wLoAukC6gLrAuwC7QLuAu8C8ALxAvIC8wL0AvUC9gL3AvgC+QL6AvsC/AL9Av4C/wMAAwEDAgMDAwQDBQMGAwcDCAMJAwoDCwMMAw0DDgMPAxADEQMSAxMDFAMVAxYDFwMYAxkDGgMbAxwDHQMeAx8DIAMhAyIDIwMkAyUDJgMnAygDKQMqAysDLAMtAy4DLwMwAzEDMgMzAzQDNQM2AzcDOAM5AzoDOwM8Az0DPgM/A0ADQQNCA0MDRANFA0YDRwNIA0kDSgNLA0wDTQNOA08DUANRA1IDUwNUA1UDVgNXA1gDWQNaA1sDXANdA14DXwNgA2EDYgNjA2QDZQNmA2cDaANpA2oDawNsA20DbgNvA3ADcQNyA3MDdAN1A3YDdwN4A3kDegN7A3wDfQN+A38DgAOBA4IDgwOEA4UDhgOHA4gDiQOKA4sDjAONA44DjwOQA5EDkgOTA5QDlQOWA5cDmAOZA5oDmwOcA50DngOfA6ADoQOiA6MDpAOlA6YDpwOoA6kDqgOrA6wDrQOuA68DsAOxA7IDswO0A7UDtgO3A7gDuQO6A7sDvAO9A74DvwPAA8EDwgPDA8QDxQPGA8cDyAPJA8oDywPMA80DzgPPA9AD0QPSA9MD1APVA9YD1wPYA9kD2gPbA9wD3QPeA98D4APhA+ID4wPkA+UD5gPnA+gD6QPqA+sD7APtA+4D7wPwA/ED8gPzA/QD9QP2A/cD+AP5A/oD+wP8A/0D/gP/BAAEAQQCBAMEBAQFBAYEBwQIBAkECgQLBAwEDQQOBA8EEAQRBBIEEwQUBBUEFgQXBBgEGQQaBBsEHAQdBB4EHwQgBCEEIgQjBCQEJQQmBCcEKAQpBCoEKwQsBC0ELgQvBDAEMQQyBDMENAQ1BDYENwQ4BDkEOgQ7BDwEPQQ+BD8EQARBBEIEQwREBEUERgRHBEgESQRKBEsETARNBE4ETwRQBFEEUgRTBFQEVQRWBFcEWARZBFoEWwRcBF0EXgRfBGAEYQRiBGMEZARlBGYEZwRoAApleHBvcnQtcGRmCmV4cG9ydC1jc3YMZXhwb3J0LWV4Y2VsCmRhdGUtcmFuZ2UMZmlsdGVyLWNsZWFyBmZpbHRlcghidWxsZXQtNghidWxsZXQtMQRub25lCGJ1bGxldC01EWJvcmRlci1kaWFnb25hbC0yEWJvcmRlci1kaWFnb25hbC0xCGJ1bGxldC00CGJ1bGxldC0yCGJ1bGxldC0zFGNoZXZyb24tcmlnaHQtZG91YmxlE2NoZXZyb24tbGVmdC1kb3VibGUTY2hldnJvbi1kb3duLWRvdWJsZRFjaGV2cm9uLXVwLWRvdWJsZQpyZWN1cnJlbmNlD3JlY3VycmVuY2UtZWRpdAhsb2NhdGlvbgtkZXNjcmlwdGlvbgl0aW1lLXpvbmUOdGltZWxpbmUtdG9kYXkDZGF5BHdlZWsRYWdlbmRhLWRhdGUtcmFuZ2UPdGltZWxpbmUtYWdlbmRhCGNhbGVuZGFyCWRhdGUtdGltZQZwZW9wbGUMdGltZWxpbmUtZGF5DXRpbWVsaW5lLXdlZWsSdGltZWxpbmUtd29yay13ZWVrDnRpbWVsaW5lLW1vbnRoBXRhYmxlBGNvcHkIdGgtc21hbGwGc2F2ZS0yC3BhcmFncmFwaC0yBGVkaXQLY2xvc2UtbGFyZ2ULZXhwb3J0LXdvcmQHcHJpbnQtMgxjaXJjbGUtY2xvc2UKcGx1cy1zbWFsbAVjbG9zZQVjaGVjawZlZGl0LTIEcGx1cw1jbG9zZS1sYXJnZS0xD2NoZXZyb24tcmlnaHQtMgphcnJvdy1sZWZ0EWNoZXZyb24tZG93bi1maWxsD2NoZXZyb24tdXAtZmlsbBNjaGV2cm9uLWRvd24tZmlsbC0yB2Nsb3NlLTIUY2hldnJvbi1yaWdodC1maWxsLTIRY2hldnJvbi1sZWZ0LWZpbGwQYXJyb3ctcmlnaHQtZmlsbAhkZWxldGUtMhFjaGV2cm9uLWRvd24tdGhpbg5jaGV2cm9uLWRvd24tMgxhcnJvdy1sZWZ0LTISY2hldnJvbi1yaWdodC10aGluC2Fycm93LXJpZ2h0CXNvcnRpbmctMQxjaGV2cm9uLWxlZnQKY2hldnJvbi11cA1jaGV2cm9uLXJpZ2h0DGNoZXZyb24tZG93bhFjaGV2cm9uLXVwLWZpbGwtMhNjaGV2cm9uLWRvd24tZmlsbC0zCmdyb3VwLWljb24Jc2VsZWN0aW9uBm1lbnUtMg5jaGV2cm9uLWxlZnQtMwRtZW51EmNoZXZyb24tcmlnaHQtZmlsbAZlZGl0LTMIZmlsdGVyLTIFbW9udGgGc2VhcmNoBnNhdmUtMxNjaGV2cm9uLWRvd24tZmlsbC00E2NoZXZyb24tZG93bi1maWxsLTUHcmVmcmVzaA9tb3JlLXZlcnRpY2FsLTERY2hldnJvbi11cC1maWxsLTMOY2hldnJvbi1sZWZ0LTQNY2lyY2xlLXJlbW92ZQhzZWFyY2gtMgVjbG9jawhkZWxldGUtMwphcnJvdy1iYWNrBnBsdXMtMg5jaGV2cm9uLWRvd24tNAdjbG9zZS0zEWNoZXZyb24tbGVmdC10aGluEmludGVybWVkaWF0ZS1zdGF0ZQV0cmFzaA9jaGV2cm9uLXJpZ2h0LTQUY2hldnJvbi1yaWdodC10aGluLTILY2hlY2stbGFyZ2UNZnJlZXplLWNvbHVtbg5lcnJvci10cmVldmlldw9jaXJjbGUtcmVtb3ZlLTIKY2lyY2xlLWFkZBdkcmFnLWFuZC1kcm9wLWluZGljYXRvcg9jaGV2cm9uLXJpZ2h0LTMUY2hldnJvbi1yaWdodC1maWxsLTMIYXJyb3ctdXAWY2hldnJvbi1yaWdodC1kb3VibGUtMgZuZXh0LTIKcHJldmlvdXMtMhVjaGV2cm9uLWxlZnQtZG91YmxlLTIKYXJyb3ctZG93bg9jaGV2cm9uLXJpZ2h0LTUEcGxheQVwYXVzZRBwYXJhLW9wdGlvbi1kb3duCHNlYXJjaC0zDWJvcmRlci1jZW50ZXIMcmVzdGFydC1hdC0xDmh5cGVybGluay1vcGVuBWN1dC0yBmNvcHktMgpib3JkZXItdG9wDWRlbGV0ZS1jb2x1bW4KZGVsZXRlLXJvdwxpbnNlcnQtcmlnaHQLaW5zZXJ0LWxlZnQQaHlwZXJsaW5rLXJlbW92ZQ1ib3JkZXItbWlkZGxlDGJvcmRlci1yaWdodA5oeXBlcmxpbmstZWRpdAZsaW5rLTILYm9yZGVyLWxlZnQMdGFibGUtZGVsZXRlEHRhYmxlLXByb3BlcnRpZXMOaHlwZXJsaW5rLWNvcHkNYm9yZGVyLWJvdHRvbQdwYXN0ZS0yEmNvbnRpbnVlLW51bWJlcmluZwxpbnNlcnQtYmVsb3cMaW5zZXJ0LWFib3ZlD3RhYmxlLWNlbGwtbm9uZQNib3gDYWxsEXRhYmxlLWFsaWduLXJpZ2h0E3RhYmxlLWJvcmRlci1jdXN0b20QdGFibGUtYWxpZ24tbGVmdBJ0YWJsZS1hbGlnbi1jZW50ZXIPbGluZS12ZXJ5LXNtYWxsC2xpbmUtbm9ybWFsCmxpbmUtc21hbGwOcGFyYS1vcHRpb24tdXAVdmVydGljYWwtYWxpZ24tYm90dG9tFXZlcnRpY2FsLWFsaWduLWNlbnRlchJ2ZXJ0aWNhbC1hbGlnbi10b3AMY2xlYXItZm9ybWF0DXN0cmlrZXRocm91Z2gKdXBwZXItY2FzZQdqdXN0aWZ5BWltYWdlBnJlc2l6ZRBleGl0LWZ1bGwtc2NyZWVuBmVkaXQtNAZib2xkLTIKYWxpZ24tbGVmdANjdXQQdGV4dC1hbHRlcm5hdGl2ZQZjb3B5LTEIZGVsZXRlLTQPaW5jcmVhc2UtaW5kZW50BWVyYXNlBHVuZG8LZnVsbC1zY3JlZW4JdW5kZXJsaW5lDmxpc3QtdW5vcmRlcmVkA2V5ZQxsaXN0LW9yZGVyZWQKbG93ZXItY2FzZQtsaW5rLXJlbW92ZQd6b29tLWluCW9wZW4tbGluawVwcmludApmb250LWNvbG9yC2FsaWduLXJpZ2h0BGxpbmsJdmlldy1zaWRlCWNvZGUtdmlldwh6b29tLW91dAtzdXBlcnNjcmlwdAlwYXJhZ3JhcGgEcmVkbwVwYXN0ZQtpbnNlcnQtY29kZQlzdWJzY3JpcHQHZGlzcGxheQdyZXBsYWNlBml0YWxpYwdjYXB0aW9uDHBhaW50LWJ1Y2tldA9kZWNyZWFzZS1pbmRlbnQMYWxpZ24tY2VudGVyCWZvbnQtbmFtZQdjbG9zZS00D2RyYWctYW5kLWRyb3AtMw5maWVsZC1zZXR0aW5ncwp0d28tY29sdW1uB3R3by1yb3cDc3VtCGZpbHRlci0zDmZpbHRlci1jbGVhci0yCXNvcnQtdXAtMgdjbG9zZS01DWNsb3NlLWxhcmdlLTMOZmlsdGVyLWNsZWFyLTMMY2lyY2xlLWNoZWNrDGFsaWduLWJvdHRvbQ5pbnNlcnQtYWJvdmUtMg5pbnNlcnQtYmVsb3ctMgxhbGlnbi1taWRkbGUPZGVsZXRlLWNvbHVtbi0yDGRlbGV0ZS1yb3ctMg1pbnNlcnQtbGVmdC0yCWFsaWduLXRvcA5pbnNlcnQtcmlnaHQtMgZlZGl0LTUOYWxpZ24tbWlkZGxlLTIPZnJlZXplLWNvbHVtbi0yBXN0eWxlCGRlbGV0ZS01CmZyZWV6ZS1yb3cLdGV4dC1oZWFkZXIPY2hldnJvbi11cC10aGluE2NoZXZyb24tZG93bi10aGluLTITY2hldnJvbi1kb3duLWZpbGwtNhFtb3JlLWhvcml6b250YWwtMgdyZXNpemVyC2ZvbGRlci1vcGVuCmZpcnN0LXBhZ2UIcHJldmlvdXMEbmV4dAlsYXN0LXBhZ2UKem9vbS1vdXQtMgl6b29tLWluLTIIZG93bmxvYWQIYm9va21hcmsIc2VhcmNoLTQPdGV4dC1hbm5vdGF0aW9uB2Nsb3NlLTYIY29tbWVudHMGc2F2ZS00DGFsaWduLWxlZnQtMgdzdHlsZS0yBnVuZG8tMg9oaWdobGlnaHQtY29sb3IPbW9yZS12ZXJ0aWNhbC0zC3VuZGVybGluZS0yD3N0cmlrZXRocm91Z2gtMg5wYWludC1idWNrZXQtMgNwYW4Hb3BhY2l0eQhkZWxldGUtNg1tb3VzZS1wb2ludGVyE2NoZXZyb24tcmlnaHQtc21hbGwMc3Ryb2tlLWNvbG9yB3ByaW50LTMGcmVkby0yDGZvbnQtY29sb3ItMgZzaGFwZXMSY2hldnJvbi1sZWZ0LXNtYWxsDHN0cm9rZS13aWR0aA9hbm5vdGF0aW9uLWVkaXQJdGh1bWJuYWlsBXN0YW1wCmJyZWFrLXBhZ2UEZmlsZQpjb2xsYXBzZS0yBmV4cGFuZA9kb3VibGUtcmVzaXplLTIPZG91YmxlLXJlc2l6ZS0xD3NpbmdsZS1yZXNpemUtMQ9zaW5nbGUtcmVzaXplLTIPc2luZ2xlLXJlc2l6ZS0zD3NpbmdsZS1yZXNpemUtNA1kcmFnLWFuZC1kcm9wDGNoZXZyb24tdXAtMg5jaGV2cm9uLWRvd24tMw9tb3JlLXZlcnRpY2FsLTQOZmlsdGVyLWNsZWFyLTQIZmlsdGVyLTQNZmlsdGVyLWFjdGl2ZQtjb2RlLXZpZXctMglncmlkLXZpZXcHcGFzdGUtMwd0cmFzaC0yCmRvd25sb2FkLTIFY3V0LTMQbGlzdC11bm9yZGVyZWQtMgZyZXBlYXQLY2lyY2xlLWluZm8PY2hldnJvbi1yaWdodC02DWZvbGRlci1vcGVuLTIHY2xvc2UtNwZmb2xkZXIGcmVuYW1lBmNvcHktMwhzZWFyY2gtNQh1cGxvYWQtMQRiYWNrCnNlbGVjdC1hbGwJc29ydGluZy0yD21vcmUtdmVydGljYWwtNQdjaGVjay0zEW1vcmUtaG9yaXpvbnRhbC0xDWZ1bGwtc2NyZWVuLTIEc2F2ZQZleHBvcnQHc2F2ZS1hcwhyZW5hbWUtMhFudW1iZXItZm9ybWF0dGluZwxleHBvcnQtcGRmLTILZ3JhbmQtdG90YWwIZmlsZS1uZXcMZXhwb3J0LWNzdi0yDmV4cG9ydC1leGNlbC0yCGRlbGV0ZS03BWNoYXJ0CHVwbG9hZC0yB3RhYmxlLTIJc3ViLXRvdGFsCWZvbnQtdHlwZQxsaW5lLXNwYWNpbmcEbG9jawhpdGFsaWMtMgZsaW5rLTMMYm9yZGVyLWFsbC0yEHRhYmxlLW9mLWNvbnRlbnQOcGFnZS1udW1iZXJpbmcGcGx1cy0zBGJvbGQMZm9udC1jb2xvci0zCnBhZ2Utc2V0dXAMc3Ryb2tlLXN0eWxlB2ltYWdlLTINYm9va21hcmstZmlsbAZoZWFkZXINZm9sZGVyLW9wZW4tMxBsaXN0LXVub3JkZXJlZC0zD3Nob3ctaGlkZS1wYW5lbAZmb290ZXIHZXJhc2UtMgxib3JkZXItb3V0ZXIKYm9yZGVyLWFsbAxib3JkZXItaW5uZXIEY2VsbAthbGlnbi10b3AtMg5hbGlnbi1ib3R0b20tMg5hbGlnbi1taWRkbGUtMwdjaGVjay00BWJyZWFrDGJyZWFrLXBhZ2UtMg1icmVhay1zZWN0aW9uCHVwbG9hZC0zEGF1dG8tZml0LWNvbnRlbnQSZml4ZWQtY29sdW1uLXdpZHRoD2F1dG8tZml0LXdpbmRvdw1icmluZy1mb3J3YXJkDmJyaW5nLXRvLWZyb250DHNlbmQtdG8tYmFjaw1zZW5kLWJhY2t3YXJkCXVuZ3JvdXAtMQdncm91cC0xBW9yZGVyEmNoZXZyb24tdXAtc21hbGwtMhRjaGV2cm9uLWRvd24tc21hbGwtMhVjaGV2cm9uLXJpZ2h0LXNtYWxsLTIUY2hldnJvbi1sZWZ0LXNtYWxsLTIWY2hldnJvbi1yaWdodC1kb3VibGUtMxVjaGV2cm9uLWxlZnQtZG91YmxlLTMLem9vbS10by1maXQJYWRkLWFib3ZlCWFkZC1iZWxvdwRsaW5lDmFycm93LXJpZ2h0LXVwCXJlY3RhbmdsZQZjaXJjbGUIcGVudGFnYW4GbGVuZ3RoBGFyZWEJcGVyaW1ldGVyBnJhZGl1cwZ2b2x1bWUSY2hhbmdlLXNjYWxlLXJhdGlvCHNldHRpbmdzCWNvbW1lbnQtMg10aHVtYnMtZG93bi0xCXRodW1icy11cA10aHVtYnMtZG93bi0yCmV4cG9ydC1qcGcKZXhwb3J0LXBuZwpleHBvcnQtc3ZnFmNvbmRpdGlvbmFsLWZvcm1hdHRpbmcQaGlkZS1mb3JtdWxhLWJhcg1oaWRlLWhlYWRpbmdzDmhpZGUtZ3JpZGxpbmVzCWV5ZS1zbGFzaAlkdXBsaWNhdGUKZXhwb3J0LXhscwxleHBvcnQtY3N2LTMDbWR4CHJlbmFtZS0zCW5hbWVkLXNldA1ncmlwLXZlcnRpY2FsCWRpbWVuc2lvbgdsZXZlbC0xB2xldmVsLTIHbGV2ZWwtMwdsZXZlbC00B2xldmVsLTUMdXNlci1kZWZpbmVkA2twaQlzb3J0LWRvd24Jc29ydGluZy0zB3NvcnQtdXARY2FsY3VsYXRlZC1tZW1iZXILY3VzdG9tLXNvcnQPc29ydC1kZXNjZW5kaW5nDnNvcnQtYXNjZW5kaW5nC2NvbW1lbnQtYWRkBXJlcGx5BnNlbmQtMQxjb21tZW50LXNob3cJc2lnbmF0dXJlC2ZpbHRlci1tYWluCXRleHQtd3JhcAp1bmZpbHRlcmVkGGZpbHRlcmVkLXNvcnQtZGVzY2VuZGluZxFzb3J0LWRlc2NlbmRpbmctMhBzb3J0LWFzY2VuZGluZy0yF2ZpbHRlcmVkLXNvcnQtYXNjZW5kaW5nCGZpbHRlcmVkB3JlYXBwbHkHZ3JvdXAtMgl1bmdyb3VwLTIHcGFzdGUtNA9wYXN0ZS10ZXh0LW9ubHkNcGFzdGUtc3BlY2lhbAtwYXN0ZS1zdHlsZRdwYXN0ZS1tYXRjaC1kZXN0aW5hdGlvbgtzcGVsbC1jaGVjaw5jb21tZW50LXJlb3BlbgxwcmludC1sYXlvdXQKd2ViLWxheW91dAtib3JkZXItbm9uZQ9kYXRhLXZhbGlkYXRpb24NcHJvdGVjdC1zaGVldAl0ZXh0LWZvcm0McHJvcGVydGllcy0yCmNsZWFyLWZvcm0JZHJvcC1kb3duCmZvcm0tZmllbGQJY2hlY2stYm94DHRhYmxlLXVwZGF0ZQ5jaGFuZ2VzLWFjY2VwdBJkaXNwbGF5LWZvci1yZXZpZXcOY2hhbmdlcy1yZWplY3QQY2hhbmdlcy1wcmV2aW91cwtzaG93LW1hcmt1cAxjaGFuZ2VzLW5leHQNY2hhbmdlcy10cmFjaxxjb25kaXRpb25hbC1mb3JtYXR0aW5nLWxhcmdlCWhpZ2hsaWdodBB0b3AtYm90dG9tLXJ1bGVzCWRhdGEtYmFycwxjb2xvci1zY2FsZXMIaWNvbnNldHMLY2xlYXItcnVsZXMJbmV3LXJ1bGVzDGdyZWF0ZXItdGhhbglsZXNzLXRoYW4HYmV0d2VlbgdlcXVhbHRvEnRleHQtdGhhdC1jb250YWlucw5kYXRlLW9jY3VycmluZwZ0b3AtMTAPYm90dG9tLTEwLWl0ZW1zCWJvdHRvbS0xMA1hYm92ZS1hdmVyYWdlDWJlbG93LWF2ZXJhZ2UOZHVwbGljYXRlLWNlbGwNZm9sZGVyLW9wZW4tNAhmb290bm90ZQxlbmQtZm9vdG5vdGUTY2hhcnQtaW5zZXJ0LWNvbHVtbhBjaGFydC1kYXRhLXRhYmxlDGNoYXJ0LWxlZ2VuZBhjaGFydC1pbnNlcnQteC15LXNjYXR0ZXIWY2hhcnQtaW5zZXJ0LXdhdGVyZmFsbBFjaGFydC11cGRvd24tYmFycxFhZGQtY2hhcnQtZWxlbWVudA9jaGFydC1ncmlkbGluZXMXaW5zZXJ0LWhpZXJhcmNoeS1jaGFydHMRY2hhcnQtaW5zZXJ0LWxpbmUXY2hhcnQtc3dpdGNoLXJvdy1jb2x1bW4QY2hhcnQtZXJyb3ItYmFycw9jaGFydC10cmVuZGxpbmUKY2hhcnQtYXhlcxFjaGFydC1zZWxlY3QtZGF0YQtjaGFydC1saW5lcxFjaGFydC1heGlzLXRpdGxlcwtjaGFydC10aXRsZRBjaGFydC1pbnNlcnQtcGllEWNoYW5nZS1jaGFydC10eXBlFmluc2VydC1zdGF0aXN0aWMtY2hhcnQRY2hhcnQtZGF0YS1sYWJlbHMSY2hhcnQtaW5zZXJ0LWNvbWJvJGNoYXJ0LWF4aXMtdGl0bGVzLXByaW1hcnktaG9yaXpvbnRhbBVjaGFydC1saW5lYXItZm9yZWNhc3QRY2hhcnQtbGVnZW5kLW5vbmUSY2hhcnQtbGVnZW5kLXJpZ2h0EmNoYXJ0LWRhdGEtY2FsbG91dBxjaGFydC1wcmltYXJ5LW1pbm9yLXZlcnRpY2FsG2NoYXJ0LWF4ZXMtcHJpbWFyeS12ZXJ0aWNhbBhjaGFydC1kYXRhLWxhYmVscy1jZW50ZXIVY2hhcnQtZGF0YS10YWJsZS1ub25lFmNoYXJ0LWRhdGEtbGFiZWxzLW5vbmUcY2hhcnQtcHJpbWFyeS1tYWpvci12ZXJ0aWNhbBNjaGFydC1sZWdlbmQtbGluZWFyG2NoYXJ0LWVycm9yLWJhcnMtcGVyY2VudGFnZRRjaGFydC1uby1sZWdlbmQta2V5cxdjaGFydC10aXRsZS1hYm92ZS1jaGFydBRjaGFydC10cmVuZGxpbmUtbm9uZRZjaGFydC13aXRoLWxlZ2VuZC1rZXlzHWNoYXJ0LWF4ZXMtcHJpbWFyeS1ob3Jpem9udGFsI2NoYXJ0LWVycm9yLWJhcnMtc3RhbmRhcmQtZGV2aWF0aW9uEGNoYXJ0LWxlZ2VuZC10b3AeY2hhcnQtcHJpbWFyeS1taW5vci1ob3Jpem9udGFsFWNoYXJ0LWVycm9yLWJhcnMtbm9uZRRjaGFydC11cC1kb3duLWJhcnMtMhBjaGFydC1kcm9wLWxpbmVzEGNoYXJ0LWxpbmVzLW5vbmUeY2hhcnQtcHJpbWFyeS1tYWpvci1ob3Jpem9udGFsE2NoYXJ0LWxlZ2VuZC1ib3R0b20SY2hhcnQtdXAtZG93bi1ub25lHWNoYXJ0LWRhdGEtbGFiZWxzLW91dHNpZGUtZW5kImNoYXJ0LWF4aXMtdGl0bGVzLXByaW1hcnktdmVydGljYWwRY2hhcnQtbGVnZW5kLWxlZnQdY2hhcnQtZGF0YS1sYWJlbHMtaW5zaWRlLWJhc2UUY2hhcnQtaGlnaC1sb3ctbGluZXMbY2hhcnQtdHJlbmRsaW5lLWV4cG9uZW50aWFsHmNoYXJ0LXRyZW5kbGluZS1tb3ZpbmctYXZlcmFnZRxjaGFydC1kYXRhLWxhYmVscy1pbnNpZGUtZW5kEGNoYXJ0LXRpdGxlLW5vbmUcY2hhcnQtdGl0bGUtY2VudGVyZWQtb3ZlcmxheR9jaGFydC1lcnJvci1iYXJzLXN0YW5kYXJkLWVycm9yD2NoYXJ0LTNkLWFyZWEtMRRjaGFydC0yZC1zdGFja2VkLWJhchJjaGFydC0zZC1zdXJmYWNlLTEWY2hhcnQtaGlzdG9ncmFtLXBhcmV0byZjaGFydC1zdG9jay12b2x1bW4tb3Blbi1oaWdoLWxvdy1jbG9zZRpjaGFydC1zdG9jay1oaWdoLWxvdy1jbG9zZR9jaGFydC1zdG9jay1vcGVuLWhpZ2gtbG93LWNsb3NlK2NoYXJ0LTJkLWxpbmUtMTAwLXN0YWNrZWQtbGluZS13aXRoLW1hcmtlcnMSY2hhcnQtZmlsbGVkLXJhZGFyGWNoYXJ0LTNkLWNsdXN0ZXJlZC1jb2x1bW4OY2hhcnQtc3VuYnVyc3QNY2hhcnQtdHJlZW1hcCFjaGFydC0zZC0xMDAtcGVyY2VudC1zdGFja2VkLWFyZWEMY2hhcnQtM2QtcGllEWNoYXJ0LTNkLWNvbHVtbi00Em1vcmUtY29sdW1uLWNoYXJ0cxVjaGFydC0yZC1zdGFja2VkLWxpbmULY2hhcnQtZG9udXQWY2hhcnQtM2QtY2x1c3RlcmVkLWJhcgxjaGFydC1mdW5uZWwOY2hhcnQtMmQtcGllLTINY2hhcnQtM2QtbGluZRljaGFydC0yZC1jbHVzdGVyZWQtY29sdW1uIWNoYXJ0LTJkLTEwMC1wZXJjZW50LXN0YWNrZWQtYXJlYRBtb3JlLWxpbmUtY2hhcnRzIGNoYXJ0LTNkLTEwMC1wZXJjZW50LXN0YWNrZWQtYmFyEW1vcmUtc3RvY2stY2hhcnRzIWNoYXJ0LXN0b2NrLXZvbHVtbi1oaWdoLWxvdy1jbG9zZRBjaGFydC1iYXItb2YtcGllLWNoYXJ0LWNsdXN0ZXJlZC1jb2x1bW4tbGluZS1vbi1zZWNvbmRhcnktYXhpcxZjaGFydC0yZC1jbHVzdGVyZWQtYmFyC2NoYXJ0LXJhZGFyI2NoYXJ0LTNkLTEwMC1wZXJjZW50LXN0YWNrZWQtY29sdW1uH2NoYXJ0LXN0YWNrZWRsaW5lcy13aXRoLW1hcmtlcnMaY2hhcnQtd2lyZWZyYW1lLTNkLXN1cmZhY2UaY2hhcnQtMmQtbGluZS13aXRoLW1hcmtlcnMVY2hhcnQtYm94LWFuZC13aGlza2VyGWNyZWF0ZS1jdXN0b20tY29tYm8tY2hhcnQgY2hhcnQtMmQtMTAwLXBlcmNlbnQtc3RhY2tlZC1iYXIhY2hhcnQtc2NhdHRlci13aXRoLXN0cmFpZ2h0LWxpbmVzF21vcmUtc3RhdGlzdGljYWwtY2hhcnRzFWNoYXJ0LTNkLXN0YWNrZWQtYXJlYQ1jaGFydC0yZC1saW5lI2NoYXJ0LTJkLTEwMC1wZXJjZW50LXN0YWNrZWQtY29sdW1uD21vcmUtcGllLWNoYXJ0cw5jaGFydC1idWJibGUtMSFjaGFydC0yZC0xMDAtcGVyY2VudC1zdGFja2VkLWxpbmUPY2hhcnQtaGlzdG9ncmFtFW1vcmUtaGllcmFyY2h5LWNoYXJ0cyFjaGFydC1jb21iby1jbHVzdGVyZWQtY29sdW1uLWxpbmUVY2hhcnQtMmQtc3RhY2tlZC1hcmVhF2NoYXJ0LTNkLXN0YWNrZWQtY29sdW1uEGNoYXJ0LWluc2VydC1iYXIfY2hhcnQtc2NhdHRlci13aXRoLXNtb290aC1saW5lcx9jaGFydC1zdXJmYWNlLXdpcmVmcmFtZS1jb250b3VyFGNoYXJ0LTNkLXN0YWNrZWQtYmFyE2NoYXJ0LTJkLXBpZS1vZi1waWUSY2hhcnQtM2Qtc3VyZmFjZS0yDWNoYXJ0LTJkLWFyZWEpY2hhcnQtY29tYm8tc3RhY2tlZC1hcmVhLWNsdXN0ZXJlZC1jb2x1bW4PY2hhcnQtd2F0ZXJmYWxsFWNoYXJ0LXN1cmZhY2UtY29udG91chNtb3JlLXNjYXR0ZXItY2hhcnRzF2NoYXJ0LTJkLXN0YWNrZWQtY29sdW1uEHByb3RlY3Qtd29ya2Jvb2sLY2hhbmdlLWNhc2UMZXhwb3J0LXBkZi0zC2ZyZWV6ZS1wYW5lE2ZyZWV6ZS1maXJzdC1jb2x1bW4OZnJlZXplLXRvcC1yb3cLbWVyZ2UtY2VsbHMOc3BsaXQtdmVydGljYWwKdGFibGUtY2VsbBBzcGxpdC1ob3Jpem9udGFsCGxpc3QtYm94C3RleHQtZm9ybS0yBWxhYmVsC2NoZWNrLWJveC0yE2FkZC1lZGl0LWZvcm0tZmllbGQGYnV0dG9uC2Ryb3AtZG93bi0yDHJhZGlvLWJ1dHRvbghwYXNzd29yZBN0YWJsZS1pbnNlcnQtY29sdW1uEHRhYmxlLWluc2VydC1yb3cVdGFibGUtb3ZlcndyaXRlLWNlbGxzDHRhYmxlLW5lc3RlZAt0YWJsZS1tZXJnZQlkcmFnLWZpbGwEaG9tZQ1nYW50dC1ncmlwcGVyDWJyaW5nLXRvLXZpZXcPYnJpbmctdG8tY2VudGVyB3dhcm5pbmcNY3JpdGljYWwtcGF0aA9ib3JkZXItc2hhZG93LTISYm9yZGVyLWRpYWdvbmFsLXVwFGJvcmRlci1kaWFnb25hbC1kb3duDWJvcmRlci1jdXN0b20NYm9yZGVyLW5vbmUtMQpib3JkZXItYm94D2JvcmRlci1zaGFkb3ctMQVhdWRpbwV2aWRlbwRjcm9wC3N0YXItZmlsbGVkB2ZpbHRlcnMKYWRqdXN0bWVudAlwYWdlLXNpemUFcmVzZXQIdHJpYW5nbGUMcGFnZS1jb2x1bW5zBHRpbnQKYnJpZ2h0bmVzcwhjb250cmFzdApzYXR1cmF0aW9uBGZhZGUNZmxpcC12ZXJ0aWNhbA9mbGlwLWhvcml6b250YWwOdHJhbnNmb3JtLWxlZnQPdHJhbnNmb3JtLXJpZ2h0CXNoYXJwbmVzcwVncmFpbgxmcmFtZS1jdXN0b20HZnJhbWUtMQdmcmFtZS0yB2ZyYW1lLTMHZnJhbWUtNAdmcmFtZS01B2ZyYW1lLTYJdHJhbnNmb3JtCmNoZWNrLXRpY2sPZXZlbi1wYWdlLWJyZWFrDm9kZC1wYWdlLWJyZWFrC3BhZ2UtY29sdW1uFWNvbnRpbnVvdXMtcGFnZS1icmVhaw5wYWdlLXRleHQtd3JhcBFwYWdlLWNvbHVtbi1yaWdodBBwYWdlLWNvbHVtbi1sZWZ0D3BhZ2UtY29sdW1uLW9uZQ9wYWdlLWNvbHVtbi10d28RcGFnZS1jb2x1bW4tdGhyZWUQbXVsdGlwbGUtY29tbWVudA5mb3JtYXQtcGFpbnRlcghsYXVuY2hlcg9jaGFyYWN0ZXItc3R5bGUMbGlua2VkLXN0eWxlHGNoYXJ0LTJkLXN0YWNrZWQtbGluZS1tYXJrZWQoY2hhcnQtMmQtMTAwLXBlcmNlbnQtc3RhY2tlZC1saW5lLW1hcmtlZBRjaGFydC0yZC1saW5lLW1hcmtlZBJsaXN0LXVub3JkZXJlZC1ydGwQbGlzdC1vcmRlcmVkLXJ0bBNpbmNyZWFzZS1pbmRlbnQtcnRsE2RlY3JlYXNlLWluZGVudC1ydGwFZW1vamkRdHJhdmVsLWFuZC1wbGFjZXMGbmF0dXJlD2Zvb2QtYW5kLWRyaW5rcwdhbmltYWxzB29iamVjdHMKYWN0aXZpdGllcw1oYW5kLWdlc3R1cmVzB3N5bWJvbHMFZmxhZ3MGdW5sb2NrDG1vcmUtY2hldnJvbgxib3JkZXItZnJhbWUKZnJhbWUtbm9uZQlmcmFtZS1tYXQLZnJhbWUtYmV2ZWwKZnJhbWUtbGluZQpmcmFtZS1ob29rC2ZyYW1lLWluc2V0CGJ1bGxldC03DG9yZ2FuaXplLXBkZgdmcmFtZS03B2ZyYW1lLTgHZnJhbWUtOQhmcmFtZS0xMAhmcmFtZS0xMQljYXB0aW9uLTEKYXJyb3ctaGVhZA9hcnJvdy1oZWFkLWZpbGwIYmFyLWhlYWQLY2lyY2xlLWhlYWQQY2lyY2xlLWhlYWQtZmlsbAtzcXVhcmUtaGVhZBBzcXVhcmUtaGVhZC1maWxsCmFycm93LXRhaWwPYXJyb3ctdGFpbC1maWxsCGJhci10YWlsC2NpcmNsZS10YWlsEGNpcmNsZS10YWlsLWZpbGwLc3F1YXJlLXRhaWwQc3F1YXJlLXRhaWwtZmlsbA1maWxlLWRvY3VtZW50D2NvbW1lbnQtcmVzb2x2ZRhtdWx0aXBsZS1jb21tZW50LXJlc29sdmUMdGFibGUtaGVhZGVyCmJsb2NrcXVvdGUJYWRkLW5vdGVzCmVkaXQtbm90ZXMMZGVsZXRlLW5vdGVzBmxheWVycwlmb250LXNpemUMZXhwb3J0LXBkZi0xC2ltcG9ydC13b3JkDWV4cG9ydC13b3JkLTENZHJvcGRvd24tbGlzdAljb21iby1ib3gRcmVwZWF0aW5nLXNlY3Rpb24OYnVpbGRpbmctYmxvY2sPY29udGVudC1jb250cm9sB2FpLWNoYXQLeG1sLW1hcHBpbmcLdGh1bWJzLXVwLTELdGh1bWJzLWRvd24LY2FsY3VsYXRpb24MdGV4dC1vdXRsaW5lBHVzZXIPY2FsY3VsYXRlLXNoZWV0CXRyYW5zbGF0ZQdzaG9ydGVuCWVsYWJvcmF0ZQhyZXBocmFzZQ1ncmFtbWFyLWNoZWNrDnByZWZvcm1hdC1jb2RlBmltcG9ydAhpbXBvcnQtMQZyZWRhY3QLc21hcnQtcGFzdGUPYXV0by1maXQtY29sdW1uE2F1dG8tZml0LWFsbC1jb2x1bW4HY29sdW1ucw50aHVtYnMtdXAtZmlsbBB0aHVtYnMtZG93bi1maWxsDnN0b3AtcmVjdGFuZ2xlDGRvdWJsZS1jaGVjawhzcXVpZ2dseQptaWNyb3Bob25lDGJ1dHRvbi1maWVsZAxpbnNlcnQtc2hlZXQLZHVwbGljYXRlLTEPaG9yaXpvbnRhbC1saW5lC3JlcGx5LWFycm93DWZvcndhcmQtYXJyb3cDcGluBXVucGluDGFkZC1ib29rbWFyaw1hbGwtYm9va21hcmtzCWxhbmRzY2FwZRBwYWdlLW9yaWVudGF0aW9uBm1hcmdpbhBwcmV2aW91cy1jb21tZW50DG5leHQtY29tbWVudA1jbG9zZS1jb21tZW50EWluY3JlYXNlLWZvbnRzaXplEWRlY3JlYXNlLWZvbnRzaXplE2RlbGV0ZS1hbGwtY29tbWVudHMMcmVhZGluZy12aWV3DW11bHRpcGxlLXBhZ2UHZml0LTEwMA1tYXJnaW4tbmFycm93DW1hcmdpbi1ub3JtYWwPbWFyZ2luLW1vZGVyYXRlC21hcmdpbi13aWRlDm1hcmdpbi1kZWZhdWx0DW1hcmdpbi1jdXN0b20Lc2l6ZS1sZXR0ZXIKc2l6ZS1sZWdhbA5zaXplLWV4ZWN1dGl2ZQdzaXplLWE0B3NpemUtYTULc2l6ZS1jdXN0b20LbW9yZS1jb2x1bW4KYXR0YWNobWVudAtmaWxlLWZvcm1hdAlyZWRhY3Rpb24McHJvcGVydGllcy0xB2NhbGxvdXQJaGVhZGluZy0xCWhlYWRpbmctMgloZWFkaW5nLTMJaGVhZGluZy00FWNvbGxhcHNpYmxlLWhlYWRpbmctMRVjb2xsYXBzaWJsZS1oZWFkaW5nLTIVY29sbGFwc2libGUtaGVhZGluZy0zFWNvbGxhcHNpYmxlLWhlYWRpbmctNAtleHBvcnQtanBlZw1jaGFydC1zY2F0dGVyD3Nob3ctc2lkZS1wYW5lbAljb3B5LWNvZGULdGV4dC1yZWRhY3QKbWFnaWMtd2FuZApzd2FwLWFycm93CWNoZWNrbGlzdApzbWFydC1lZGl0CnRhYmxlLWVkaXQHaGlzdG9yeQlhbGwtbm90ZXMJbmV4dC1ub3RlDXByZXZpb3VzLW5vdGUQY29udmVydC1hbGwtbm90ZQxleHRyYWN0LXBhZ2UJbGVmdC13cmFwCnJpZ2h0LXdyYXAFbm90ZXMEbW92ZQ1jZWxsLXByb3BlcnR5CXRleHQtZWRpdAAA) format('truetype');
  }
}

#{&} .e-icons {
  font-family: "e-icons";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;

  &.e-small {
    font-size: 8px;
  }

  &.e-medium {
    font-size: 16px;
  }

  &.e-large {
    font-size: 24px;
  }

  &.e-export-pdf:before { content: "\e240"; }
  &.e-export-csv:before { content: "\e241"; }
  &.e-export-excel:before { content: "\e242"; }
  &.e-date-range:before { content: "\e243"; }
  &.e-filter-clear:before { content: "\e246"; }
  &.e-filter:before { content: "\e249"; }
  &.e-bullet-6:before { content: "\e253"; }
  &.e-bullet-1:before { content: "\e254"; }
  &.e-none:before { content: "\e256"; }
  &.e-bullet-5:before { content: "\e259"; }
  &.e-border-diagonal-2:before { content: "\e262"; }
  &.e-border-diagonal-1:before { content: "\e265"; }
  &.e-bullet-4:before { content: "\e267"; }
  &.e-bullet-2:before { content: "\e270"; }
  &.e-bullet-3:before { content: "\e271"; }
  &.e-chevron-right-double:before { content: "\e300"; }
  &.e-chevron-left-double:before { content: "\e302"; }
  &.e-chevron-down-double:before { content: "\e304"; }
  &.e-chevron-up-double:before { content: "\e306"; }
  &.e-recurrence:before { content: "\e308"; }
  &.e-recurrence-edit:before { content: "\e30a"; }
  &.e-location:before { content: "\e30c"; }
  &.e-description:before { content: "\e30d"; }
  &.e-time-zone:before { content: "\e30e"; }
  &.e-timeline-today:before { content: "\e312"; }
  &.e-day:before { content: "\e318"; }
  &.e-week:before { content: "\e319"; }
  &.e-agenda-date-range:before { content: "\e31a"; }
  &.e-timeline-agenda:before { content: "\e31c"; }
  &.e-calendar:before { content: "\e320"; }
  &.e-date-time:before { content: "\e423"; }
  &.e-people:before { content: "\e426"; }
  &.e-timeline-day:before { content: "\ea87"; }
  &.e-timeline-week:before { content: "\ea8a"; }
  &.e-timeline-work-week:before { content: "\ea8d"; }
  &.e-timeline-month:before { content: "\ea8f"; }
  &.e-table:before { content: "\e705"; }
  &.e-copy:before { content: "\e70a"; }
  &.e-th-small:before { content: "\e714"; }
  &.e-save-2:before { content: "\e735"; }
  &.e-paragraph-2:before { content: "\e75e"; }
  &.e-edit:before { content: "\e7a3"; }
  &.e-close-large:before { content: "\e7a7"; }
  &.e-export-word:before { content: "\e7b0"; }
  &.e-print-2:before { content: "\e7df"; }
  &.e-circle-close:before { content: "\e7e9"; }
  &.e-plus-small:before { content: "\e7f9"; }
  &.e-close:before { content: "\e7fc"; }
  &.e-check:before { content: "\e7ff"; }
  &.e-edit-2:before { content: "\e81e"; }
  &.e-plus:before { content: "\e823"; }
  &.e-close-large-1:before { content: "\e825"; }
  &.e-chevron-right-2:before { content: "\e826"; }
  &.e-arrow-left:before { content: "\e828"; }
  &.e-chevron-down-fill:before { content: "\e82e"; }
  &.e-chevron-up-fill:before { content: "\e834"; }
  &.e-chevron-down-fill-2:before { content: "\e83d"; }
  &.e-close-2:before { content: "\e842"; }
  &.e-chevron-right-fill-2:before { content: "\e848"; }
  &.e-chevron-left-fill:before { content: "\e84b"; }
  &.e-arrow-right-fill:before { content: "\e84d"; }
  &.e-delete-2:before { content: "\e84e"; }
  &.e-chevron-down-thin:before { content: "\e84f"; }
  &.e-chevron-down-2:before { content: "\e853"; }
  &.e-arrow-left-2:before { content: "\e85b"; }
  &.e-chevron-right-thin:before { content: "\e85c"; }
  &.e-arrow-right:before { content: "\e85f"; }
  &.e-sorting-1:before { content: "\e890"; }
  &.e-chevron-left:before { content: "\e904"; }
  &.e-chevron-up:before { content: "\e910"; }
  &.e-chevron-right:before { content: "\e913"; }
  &.e-chevron-down:before { content: "\e916"; }
  &.e-chevron-up-fill-2:before { content: "\e918"; }
  &.e-chevron-down-fill-3:before { content: "\e919"; }
  &.e-group-icon:before { content: "\e926"; }
  &.e-selection:before { content: "\e930"; }
  &.e-menu-2:before { content: "\e936"; }
  &.e-chevron-left-3:before { content: "\e937"; }
  &.e-menu:before { content: "\e941"; }
  &.e-chevron-right-fill:before { content: "\e943"; }
  &.e-edit-3:before { content: "\e944"; }
  &.e-filter-2:before { content: "\e946"; }
  &.e-month:before { content: "\e960"; }
  &.e-search:before { content: "\e961"; }
  &.e-save-3:before { content: "\e964"; }
  &.e-chevron-down-fill-4:before { content: "\e968"; }
  &.e-chevron-down-fill-5:before { content: "\e969"; }
  &.e-refresh:before { content: "\e975"; }
  &.e-more-vertical-1:before { content: "\e984"; }
  &.e-chevron-up-fill-3:before { content: "\e988"; }
  &.e-chevron-left-4:before { content: "\e990"; }
  &.e-circle-remove:before { content: "\e991"; }
  &.e-search-2:before { content: "\e993"; }
  &.e-clock:before { content: "\e93e"; }
  &.e-delete-3:before { content: "\e94a"; }
  &.e-arrow-back:before { content: "\e94b"; }
  &.e-plus-2:before { content: "\e95c"; }
  &.e-chevron-down-4:before { content: "\e95d"; }
  &.e-close-3:before { content: "\e96c"; }
  &.e-chevron-left-thin:before { content: "\e98f"; }
  &.e-intermediate-state:before { content: "\e99f"; }
  &.e-trash:before { content: "\e201"; }
  &.e-chevron-right-4:before { content: "\e207"; }
  &.e-chevron-right-thin-2:before { content: "\e219"; }
  &.e-check-large:before { content: "\e21d"; }
  &.e-freeze-column:before { content: "\e21e"; }
  &.e-error-treeview:before { content: "\e22a"; }
  &.e-circle-remove-2:before { content: "\e22b"; }
  &.e-circle-add:before { content: "\e22c"; }
  &.e-drag-and-drop-indicator:before { content: "\e22d"; }
  &.e-chevron-right-3:before { content: "\e22f"; }
  &.e-chevron-right-fill-3:before { content: "\e230"; }
  &.e-arrow-up:before { content: "\e234"; }
  &.e-chevron-right-double-2:before { content: "\e235"; }
  &.e-next-2:before { content: "\e236"; }
  &.e-previous-2:before { content: "\e237"; }
  &.e-chevron-left-double-2:before { content: "\e238"; }
  &.e-arrow-down:before { content: "\e239"; }
  &.e-chevron-right-5:before { content: "\e431"; }
  &.e-play:before { content: "\e328"; }
  &.e-pause:before { content: "\e329"; }
  &.e-para-option-down:before { content: "\e274"; }
  &.e-search-3:before { content: "\e275"; }
  &.e-border-center:before { content: "\e276"; }
  &.e-restart-at-1:before { content: "\e277"; }
  &.e-hyperlink-open:before { content: "\e278"; }
  &.e-cut-2:before { content: "\e279"; }
  &.e-copy-2:before { content: "\e280"; }
  &.e-border-top:before { content: "\e281"; }
  &.e-delete-column:before { content: "\e282"; }
  &.e-delete-row:before { content: "\e283"; }
  &.e-insert-right:before { content: "\e284"; }
  &.e-insert-left:before { content: "\e285"; }
  &.e-hyperlink-remove:before { content: "\e286"; }
  &.e-border-middle:before { content: "\e287"; }
  &.e-border-right:before { content: "\e288"; }
  &.e-hyperlink-edit:before { content: "\e289"; }
  &.e-link-2:before { content: "\e290"; }
  &.e-border-left:before { content: "\e291"; }
  &.e-table-delete:before { content: "\e292"; }
  &.e-table-properties:before { content: "\e294"; }
  &.e-hyperlink-copy:before { content: "\e295"; }
  &.e-border-bottom:before { content: "\e298"; }
  &.e-paste-2:before { content: "\e501"; }
  &.e-continue-numbering:before { content: "\e503"; }
  &.e-insert-below:before { content: "\e505"; }
  &.e-insert-above:before { content: "\e506"; }
  &.e-table-cell-none:before { content: "\e507"; }
  &.e-box:before { content: "\e509"; }
  &.e-all:before { content: "\e511"; }
  &.e-table-align-right:before { content: "\e515"; }
  &.e-table-border-custom:before { content: "\e516"; }
  &.e-table-align-left:before { content: "\e517"; }
  &.e-table-align-center:before { content: "\e518"; }
  &.e-line-very-small:before { content: "\e520"; }
  &.e-line-normal:before { content: "\e521"; }
  &.e-line-small:before { content: "\e522"; }
  &.e-para-option-up:before { content: "\e523"; }
  &.e-vertical-align-bottom:before { content: "\e525"; }
  &.e-vertical-align-center:before { content: "\e526"; }
  &.e-vertical-align-top:before { content: "\e527"; }
  &.e-clear-format:before { content: "\e331"; }
  &.e-strikethrough:before { content: "\e332"; }
  &.e-upper-case:before { content: "\e333"; }
  &.e-justify:before { content: "\e334"; }
  &.e-image:before { content: "\e335"; }
  &.e-resize:before { content: "\e336"; }
  &.e-exit-full-screen:before { content: "\e337"; }
  &.e-edit-4:before { content: "\e338"; }
  &.e-bold-2:before { content: "\e339"; }
  &.e-align-left:before { content: "\e33a"; }
  &.e-cut:before { content: "\e33b"; }
  &.e-text-alternative:before { content: "\e33c"; }
  &.e-copy-1:before { content: "\e33d"; }
  &.e-delete-4:before { content: "\e33e"; }
  &.e-increase-indent:before { content: "\e33f"; }
  &.e-erase:before { content: "\e340"; }
  &.e-undo:before { content: "\e341"; }
  &.e-full-screen:before { content: "\e342"; }
  &.e-underline:before { content: "\e343"; }
  &.e-list-unordered:before { content: "\e344"; }
  &.e-eye:before { content: "\e345"; }
  &.e-list-ordered:before { content: "\e346"; }
  &.e-lower-case:before { content: "\e347"; }
  &.e-link-remove:before { content: "\e348"; }
  &.e-zoom-in:before { content: "\e349"; }
  &.e-open-link:before { content: "\e34a"; }
  &.e-print:before { content: "\e34b"; }
  &.e-font-color:before { content: "\e34c"; }
  &.e-align-right:before { content: "\e34d"; }
  &.e-link:before { content: "\e34e"; }
  &.e-view-side:before { content: "\e34f"; }
  &.e-code-view:before { content: "\e350"; }
  &.e-zoom-out:before { content: "\e351"; }
  &.e-superscript:before { content: "\e352"; }
  &.e-paragraph:before { content: "\e353"; }
  &.e-redo:before { content: "\e354"; }
  &.e-paste:before { content: "\e355"; }
  &.e-insert-code:before { content: "\e356"; }
  &.e-subscript:before { content: "\e357"; }
  &.e-display:before { content: "\e358"; }
  &.e-replace:before { content: "\e359"; }
  &.e-italic:before { content: "\e35a"; }
  &.e-caption:before { content: "\e35b"; }
  &.e-paint-bucket:before { content: "\e35c"; }
  &.e-decrease-indent:before { content: "\e35d"; }
  &.e-align-center:before { content: "\e35e"; }
  &.e-font-name:before { content: "\e35f"; }
  &.e-close-4:before { content: "\e361"; }
  &.e-drag-and-drop-3:before { content: "\e330"; }
  &.e-field-settings:before { content: "\e434"; }
  &.e-two-column:before { content: "\ea74"; }
  &.e-two-row:before { content: "\ea75"; }
  &.e-sum:before { content: "\ea76"; }
  &.e-filter-3:before { content: "\ea77"; }
  &.e-filter-clear-2:before { content: "\ea78"; }
  &.e-sort-up-2:before { content: "\ea79"; }
  &.e-close-5:before { content: "\ea7b"; }
  &.e-close-large-3:before { content: "\ea7f"; }
  &.e-filter-clear-3:before { content: "\ea81"; }
  &.e-circle-check:before { content: "\ea84"; }
  &.e-align-bottom:before { content: "\ea91"; }
  &.e-insert-above-2:before { content: "\ea92"; }
  &.e-insert-below-2:before { content: "\ea93"; }
  &.e-align-middle:before { content: "\ea94"; }
  &.e-delete-column-2:before { content: "\ea95"; }
  &.e-delete-row-2:before { content: "\ea96"; }
  &.e-insert-left-2:before { content: "\ea97"; }
  &.e-align-top:before { content: "\ea98"; }
  &.e-insert-right-2:before { content: "\ea99"; }
  &.e-edit-5:before { content: "\ea9a"; }
  &.e-align-middle-2:before { content: "\ea9b"; }
  &.e-freeze-column-2:before { content: "\ea9e"; }
  &.e-style:before { content: "\ea9f"; }
  &.e-delete-5:before { content: "\eb00"; }
  &.e-freeze-row:before { content: "\eb02"; }
  &.e-text-header:before { content: "\eb03"; }
  &.e-chevron-up-thin:before { content: "\eb04"; }
  &.e-chevron-down-thin-2:before { content: "\eb05"; }
  &.e-chevron-down-fill-6:before { content: "\eb06"; }
  &.e-more-horizontal-2:before { content: "\eb07"; }
  &.e-resizer:before { content: "\eb08"; }
  &.e-folder-open:before { content: "\ec2b"; }
  &.e-first-page:before { content: "\ec2c"; }
  &.e-previous:before { content: "\ec2d"; }
  &.e-next:before { content: "\ec2e"; }
  &.e-last-page:before { content: "\ec2f"; }
  &.e-zoom-out-2:before { content: "\ec30"; }
  &.e-zoom-in-2:before { content: "\ec31"; }
  &.e-download:before { content: "\ec32"; }
  &.e-bookmark:before { content: "\ec33"; }
  &.e-search-4:before { content: "\ebbe"; }
  &.e-text-annotation:before { content: "\ebbf"; }
  &.e-close-6:before { content: "\ebc0"; }
  &.e-comments:before { content: "\ebc1"; }
  &.e-save-4:before { content: "\ebc2"; }
  &.e-align-left-2:before { content: "\ebc3"; }
  &.e-style-2:before { content: "\ebc4"; }
  &.e-undo-2:before { content: "\ebc5"; }
  &.e-highlight-color:before { content: "\ebc6"; }
  &.e-more-vertical-3:before { content: "\ebc7"; }
  &.e-underline-2:before { content: "\ebc8"; }
  &.e-strikethrough-2:before { content: "\ebc9"; }
  &.e-paint-bucket-2:before { content: "\ebca"; }
  &.e-pan:before { content: "\ebcb"; }
  &.e-opacity:before { content: "\ebcc"; }
  &.e-delete-6:before { content: "\ebcd"; }
  &.e-mouse-pointer:before { content: "\ebce"; }
  &.e-chevron-right-small:before { content: "\ebd0"; }
  &.e-stroke-color:before { content: "\ebd1"; }
  &.e-print-3:before { content: "\ebd2"; }
  &.e-redo-2:before { content: "\ebd3"; }
  &.e-font-color-2:before { content: "\ebd4"; }
  &.e-shapes:before { content: "\ebd5"; }
  &.e-chevron-left-small:before { content: "\ebd6"; }
  &.e-stroke-width:before { content: "\ebd7"; }
  &.e-annotation-edit:before { content: "\ebd8"; }
  &.e-thumbnail:before { content: "\ebd9"; }
  &.e-stamp:before { content: "\ebda"; }
  &.e-break-page:before { content: "\ebdb"; }
  &.e-file:before { content: "\ebdc"; }
  &.e-collapse-2:before { content: "\e557"; }
  &.e-expand:before { content: "\e558"; }
  &.e-double-resize-2:before { content: "\e559"; }
  &.e-double-resize-1:before { content: "\e56a"; }
  &.e-single-resize-1:before { content: "\e56b"; }
  &.e-single-resize-2:before { content: "\e56c"; }
  &.e-single-resize-3:before { content: "\e56d"; }
  &.e-single-resize-4:before { content: "\e56e"; }
  &.e-drag-and-drop:before { content: "\e903"; }
  &.e-chevron-up-2:before { content: "\e56f"; }
  &.e-chevron-down-3:before { content: "\e570"; }
  &.e-more-vertical-4:before { content: "\e573"; }
  &.e-filter-clear-4:before { content: "\ebab"; }
  &.e-filter-4:before { content: "\ebb0"; }
  &.e-filter-active:before { content: "\ebb2"; }
  &.e-code-view-2:before { content: "\e908"; }
  &.e-grid-view:before { content: "\e600"; }
  &.e-paste-3:before { content: "\e601"; }
  &.e-trash-2:before { content: "\e602"; }
  &.e-download-2:before { content: "\e603"; }
  &.e-cut-3:before { content: "\e604"; }
  &.e-list-unordered-2:before { content: "\e605"; }
  &.e-repeat:before { content: "\e606"; }
  &.e-circle-info:before { content: "\e607"; }
  &.e-chevron-right-6:before { content: "\e608"; }
  &.e-folder-open-2:before { content: "\e609"; }
  &.e-close-7:before { content: "\e60a"; }
  &.e-folder:before { content: "\e60b"; }
  &.e-rename:before { content: "\e60c"; }
  &.e-copy-3:before { content: "\e60d"; }
  &.e-search-5:before { content: "\e60e"; }
  &.e-upload-1:before { content: "\e60f"; }
  &.e-back:before { content: "\e610"; }
  &.e-select-all:before { content: "\e611"; }
  &.e-sorting-2:before { content: "\e612"; }
  &.e-more-vertical-5:before { content: "\e613"; }
  &.e-check-3:before { content: "\e614"; }
  &.e-more-horizontal-1:before { content: "\e615"; }
  &.e-full-screen-2:before { content: "\e700"; }
  &.e-save:before { content: "\e701"; }
  &.e-export:before { content: "\e702"; }
  &.e-save-as:before { content: "\e703"; }
  &.e-rename-2:before { content: "\e704"; }
  &.e-number-formatting:before { content: "\e711"; }
  &.e-export-pdf-2:before { content: "\e707"; }
  &.e-grand-total:before { content: "\e708"; }
  &.e-file-new:before { content: "\e709"; }
  &.e-export-csv-2:before { content: "\e712"; }
  &.e-export-excel-2:before { content: "\e70b"; }
  &.e-delete-7:before { content: "\e70c"; }
  &.e-chart:before { content: "\e70d"; }
  &.e-upload-2:before { content: "\e70e"; }
  &.e-table-2:before { content: "\e70f"; }
  &.e-sub-total:before { content: "\e710"; }
  &.e-font-type:before { content: "\e273"; }
  &.e-line-spacing:before { content: "\eb30"; }
  &.e-lock:before { content: "\eb20"; }
  &.e-italic-2:before { content: "\eb1d"; }
  &.e-link-3:before { content: "\eb27"; }
  &.e-border-all-2:before { content: "\eb2b"; }
  &.e-table-of-content:before { content: "\eb10"; }
  &.e-page-numbering:before { content: "\eb1b"; }
  &.e-plus-3:before { content: "\eb0c"; }
  &.e-bold:before { content: "\eb2f"; }
  &.e-font-color-3:before { content: "\eb1f"; }
  &.e-page-setup:before { content: "\eb33"; }
  &.e-stroke-style:before { content: "\eb1a"; }
  &.e-image-2:before { content: "\eb1c"; }
  &.e-bookmark-fill:before { content: "\eb11"; }
  &.e-header:before { content: "\eb0b"; }
  &.e-folder-open-3:before { content: "\eb28"; }
  &.e-list-unordered-3:before { content: "\eb25"; }
  &.e-show-hide-panel:before { content: "\eb23"; }
  &.e-footer:before { content: "\eb0a"; }
  &.e-erase-2:before { content: "\eb26"; }
  &.e-border-outer:before { content: "\eb66"; }
  &.e-border-all:before { content: "\eb95"; }
  &.e-border-inner:before { content: "\eb88"; }
  &.e-cell:before { content: "\eb93"; }
  &.e-align-top-2:before { content: "\eb35"; }
  &.e-align-bottom-2:before { content: "\eb0e"; }
  &.e-align-middle-3:before { content: "\eb0d"; }
  &.e-check-4:before { content: "\e935"; }
  &.e-break:before { content: "\eba1"; }
  &.e-break-page-2:before { content: "\eba5"; }
  &.e-break-section:before { content: "\eba7"; }
  &.e-upload-3:before { content: "\eba4"; }
  &.e-auto-fit-content:before { content: "\eba8"; }
  &.e-fixed-column-width:before { content: "\eba9"; }
  &.e-auto-fit-window:before { content: "\ebaa"; }
  &.e-bring-forward:before { content: "\e5a1"; }
  &.e-bring-to-front:before { content: "\e5a2"; }
  &.e-send-to-back:before { content: "\e5a3"; }
  &.e-send-backward:before { content: "\e5a4"; }
  &.e-ungroup-1:before { content: "\e5a6"; }
  &.e-group-1:before { content: "\e5a7"; }
  &.e-order:before { content: "\e4a4"; }
  &.e-chevron-up-small-2:before { content: "\e651"; }
  &.e-chevron-down-small-2:before { content: "\e652"; }
  &.e-chevron-right-small-2:before { content: "\e653"; }
  &.e-chevron-left-small-2:before { content: "\e654"; }
  &.e-chevron-right-double-3:before { content: "\e655"; }
  &.e-chevron-left-double-3:before { content: "\e656"; }
  &.e-zoom-to-fit:before { content: "\e657"; }
  &.e-add-above:before { content: "\e658"; }
  &.e-add-below:before { content: "\e659"; }
  &.e-line:before { content: "\e668"; }
  &.e-arrow-right-up:before { content: "\e669"; }
  &.e-rectangle:before { content: "\e670"; }
  &.e-circle:before { content: "\e671"; }
  &.e-pentagan:before { content: "\e672"; }
  &.e-length:before { content: "\e673"; }
  &.e-area:before { content: "\e674"; }
  &.e-perimeter:before { content: "\e675"; }
  &.e-radius:before { content: "\e676"; }
  &.e-volume:before { content: "\e677"; }
  &.e-change-scale-ratio:before { content: "\e678"; }
  &.e-settings:before { content: "\e679"; }
  &.e-comment-2:before { content: "\e680"; }
  &.e-thumbs-down-1:before { content: "\e681"; }
  &.e-thumbs-up:before { content: "\e682"; }
  &.e-thumbs-down-2:before { content: "\e683"; }
  &.e-export-jpg:before { content: "\e713"; }
  &.e-export-png:before { content: "\e715"; }
  &.e-export-svg:before { content: "\e716"; }
  &.e-conditional-formatting:before { content: "\e725"; }
  &.e-hide-formula-bar:before { content: "\e717"; }
  &.e-hide-headings:before { content: "\e718"; }
  &.e-hide-gridlines:before { content: "\e719"; }
  &.e-eye-slash:before { content: "\e721"; }
  &.e-duplicate:before { content: "\e722"; }
  &.e-export-xls:before { content: "\e726"; }
  &.e-export-csv-3:before { content: "\e727"; }
  &.e-mdx:before { content: "\e724"; }
  &.e-rename-3:before { content: "\e728"; }
  &.e-named-set:before { content: "\e65d"; }
  &.e-grip-vertical:before { content: "\e65c"; }
  &.e-dimension:before { content: "\e65b"; }
  &.e-level-1:before { content: "\e65a"; }
  &.e-level-2:before { content: "\e662"; }
  &.e-level-3:before { content: "\e65e"; }
  &.e-level-4:before { content: "\e660"; }
  &.e-level-5:before { content: "\e661"; }
  &.e-user-defined:before { content: "\e663"; }
  &.e-kpi:before { content: "\e664"; }
  &.e-sort-down:before { content: "\e665"; }
  &.e-sorting-3:before { content: "\e666"; }
  &.e-sort-up:before { content: "\e667"; }
  &.e-calculated-member:before { content: "\e729"; }
  &.e-custom-sort:before { content: "\e732"; }
  &.e-sort-descending:before { content: "\e733"; }
  &.e-sort-ascending:before { content: "\e734"; }
  &.e-comment-add:before { content: "\e814"; }
  &.e-reply:before { content: "\e815"; }
  &.e-send-1:before { content: "\e816"; }
  &.e-comment-show:before { content: "\e817"; }
  &.e-signature:before { content: "\e767"; }
  &.e-filter-main:before { content: "\e736"; }
  &.e-text-wrap:before { content: "\e824"; }
  &.e-unfiltered:before { content: "\e73a"; }
  &.e-filtered-sort-descending:before { content: "\e73b"; }
  &.e-sort-descending-2:before { content: "\e73c"; }
  &.e-sort-ascending-2:before { content: "\e73d"; }
  &.e-filtered-sort-ascending:before { content: "\e73e"; }
  &.e-filtered:before { content: "\e73f"; }
  &.e-reapply:before { content: "\e737"; }
  &.e-group-2:before { content: "\e740"; }
  &.e-ungroup-2:before { content: "\e741"; }
  &.e-paste-4:before { content: "\e68a"; }
  &.e-paste-text-only:before { content: "\e685"; }
  &.e-paste-special:before { content: "\e686"; }
  &.e-paste-style:before { content: "\e687"; }
  &.e-paste-match-destination:before { content: "\e688"; }
  &.e-spell-check:before { content: "\e689"; }
  &.e-comment-reopen:before { content: "\e818"; }
  &.e-print-layout:before { content: "\e897"; }
  &.e-web-layout:before { content: "\e798"; }
  &.e-border-none:before { content: "\e195"; }
  &.e-data-validation:before { content: "\e196"; }
  &.e-protect-sheet:before { content: "\e197"; }
  &.e-text-form:before { content: "\e198"; }
  &.e-properties-2:before { content: "\e199"; }
  &.e-clear-form:before { content: "\e19a"; }
  &.e-drop-down:before { content: "\e19b"; }
  &.e-form-field:before { content: "\e19c"; }
  &.e-check-box:before { content: "\e19d"; }
  &.e-table-update:before { content: "\e19e"; }
  &.e-changes-accept:before { content: "\e19f"; }
  &.e-display-for-review:before { content: "\e203"; }
  &.e-changes-reject:before { content: "\e204"; }
  &.e-changes-previous:before { content: "\e205"; }
  &.e-show-markup:before { content: "\e206"; }
  &.e-changes-next:before { content: "\e209"; }
  &.e-changes-track:before { content: "\e20a"; }
  &.e-conditional-formatting-large:before { content: "\e401"; }
  &.e-highlight:before { content: "\e402"; }
  &.e-top-bottom-rules:before { content: "\e403"; }
  &.e-data-bars:before { content: "\e404"; }
  &.e-color-scales:before { content: "\e405"; }
  &.e-iconsets:before { content: "\e406"; }
  &.e-clear-rules:before { content: "\e407"; }
  &.e-new-rules:before { content: "\e408"; }
  &.e-greater-than:before { content: "\e409"; }
  &.e-less-than:before { content: "\e410"; }
  &.e-between:before { content: "\e411"; }
  &.e-equalto:before { content: "\e412"; }
  &.e-text-that-contains:before { content: "\e413"; }
  &.e-date-occurring:before { content: "\e414"; }
  &.e-top-10:before { content: "\e415"; }
  &.e-bottom-10-items:before { content: "\e416"; }
  &.e-bottom-10:before { content: "\e417"; }
  &.e-above-average:before { content: "\e418"; }
  &.e-below-average:before { content: "\e419"; }
  &.e-duplicate-cell:before { content: "\e420"; }
  &.e-folder-open-4:before { content: "\e42b"; }
  &.e-footnote:before { content: "\e435"; }
  &.e-end-footnote:before { content: "\e436"; }
  &.e-chart-insert-column:before { content: "\e440"; }
  &.e-chart-data-table:before { content: "\e441"; }
  &.e-chart-legend:before { content: "\e442"; }
  &.e-chart-insert-x-y-scatter:before { content: "\e443"; }
  &.e-chart-insert-waterfall:before { content: "\e444"; }
  &.e-chart-updown-bars:before { content: "\e445"; }
  &.e-add-chart-element:before { content: "\e446"; }
  &.e-chart-gridlines:before { content: "\e447"; }
  &.e-insert-hierarchy-charts:before { content: "\e448"; }
  &.e-chart-insert-line:before { content: "\e449"; }
  &.e-chart-switch-row-column:before { content: "\e450"; }
  &.e-chart-error-bars:before { content: "\e451"; }
  &.e-chart-trendline:before { content: "\e452"; }
  &.e-chart-axes:before { content: "\e453"; }
  &.e-chart-select-data:before { content: "\e454"; }
  &.e-chart-lines:before { content: "\e455"; }
  &.e-chart-axis-titles:before { content: "\e456"; }
  &.e-chart-title:before { content: "\e457"; }
  &.e-chart-insert-pie:before { content: "\e458"; }
  &.e-change-chart-type:before { content: "\e459"; }
  &.e-insert-statistic-chart:before { content: "\e460"; }
  &.e-chart-data-labels:before { content: "\e461"; }
  &.e-chart-insert-combo:before { content: "\e462"; }
  &.e-chart-axis-titles-primary-horizontal:before { content: "\e486"; }
  &.e-chart-linear-forecast:before { content: "\e487"; }
  &.e-chart-legend-none:before { content: "\e488"; }
  &.e-chart-legend-right:before { content: "\e489"; }
  &.e-chart-data-callout:before { content: "\e490"; }
  &.e-chart-primary-minor-vertical:before { content: "\e491"; }
  &.e-chart-axes-primary-vertical:before { content: "\e492"; }
  &.e-chart-data-labels-center:before { content: "\e493"; }
  &.e-chart-data-table-none:before { content: "\e115"; }
  &.e-chart-data-labels-none:before { content: "\e495"; }
  &.e-chart-primary-major-vertical:before { content: "\e496"; }
  &.e-chart-legend-linear:before { content: "\e497"; }
  &.e-chart-error-bars-percentage:before { content: "\e498"; }
  &.e-chart-no-legend-keys:before { content: "\e499"; }
  &.e-chart-title-above-chart:before { content: "\e121"; }
  &.e-chart-trendline-none:before { content: "\e122"; }
  &.e-chart-with-legend-keys:before { content: "\e123"; }
  &.e-chart-axes-primary-horizontal:before { content: "\e124"; }
  &.e-chart-error-bars-standard-deviation:before { content: "\e125"; }
  &.e-chart-legend-top:before { content: "\e126"; }
  &.e-chart-primary-minor-horizontal:before { content: "\e145"; }
  &.e-chart-error-bars-none:before { content: "\e127"; }
  &.e-chart-up-down-bars-2:before { content: "\e128"; }
  &.e-chart-drop-lines:before { content: "\e129"; }
  &.e-chart-lines-none:before { content: "\e130"; }
  &.e-chart-primary-major-horizontal:before { content: "\e131"; }
  &.e-chart-legend-bottom:before { content: "\e132"; }
  &.e-chart-up-down-none:before { content: "\e111"; }
  &.e-chart-data-labels-outside-end:before { content: "\e905"; }
  &.e-chart-axis-titles-primary-vertical:before { content: "\e143"; }
  &.e-chart-legend-left:before { content: "\e892"; }
  &.e-chart-data-labels-inside-base:before { content: "\e893"; }
  &.e-chart-high-low-lines:before { content: "\e894"; }
  &.e-chart-trendline-exponential:before { content: "\e133"; }
  &.e-chart-trendline-moving-average:before { content: "\e134"; }
  &.e-chart-data-labels-inside-end:before { content: "\e135"; }
  &.e-chart-title-none:before { content: "\e136"; }
  &.e-chart-title-centered-overlay:before { content: "\e895"; }
  &.e-chart-error-bars-standard-error:before { content: "\e911"; }
  &.e-chart-3d-area-1:before { content: "\e144"; }
  &.e-chart-2d-stacked-bar:before { content: "\e889"; }
  &.e-chart-3d-surface-1:before { content: "\e827"; }
  &.e-chart-histogram-pareto:before { content: "\e114"; }
  &.e-chart-stock-volumn-open-high-low-close:before { content: "\e137"; }
  &.e-chart-stock-high-low-close:before { content: "\e138"; }
  &.e-chart-stock-open-high-low-close:before { content: "\e831"; }
  &.e-chart-2d-line-100-stacked-line-with-markers:before { content: "\e832"; }
  &.e-chart-filled-radar:before { content: "\e833"; }
  &.e-chart-3d-clustered-column:before { content: "\e142"; }
  &.e-chart-sunburst:before { content: "\e835"; }
  &.e-chart-treemap:before { content: "\e836"; }
  &.e-chart-3d-100-percent-stacked-area:before { content: "\e139"; }
  &.e-chart-3d-pie:before { content: "\e838"; }
  &.e-chart-3d-column-4:before { content: "\e839"; }
  &.e-more-column-charts:before { content: "\e899"; }
  &.e-chart-2d-stacked-line:before { content: "\e841"; }
  &.e-chart-donut:before { content: "\e112"; }
  &.e-chart-3d-clustered-bar:before { content: "\e843"; }
  &.e-chart-funnel:before { content: "\e140"; }
  &.e-chart-2d-pie-2:before { content: "\e141"; }
  &.e-chart-3d-line:before { content: "\e846"; }
  &.e-chart-2d-clustered-column:before { content: "\e847"; }
  &.e-chart-2d-100-percent-stacked-area:before { content: "\e900"; }
  &.e-more-line-charts:before { content: "\e849"; }
  &.e-chart-3d-100-percent-stacked-bar:before { content: "\e850"; }
  &.e-more-stock-charts:before { content: "\e851"; }
  &.e-chart-stock-volumn-high-low-close:before { content: "\e852"; }
  &.e-chart-bar-of-pie:before { content: "\e113"; }
  &.e-chart-clustered-column-line-on-secondary-axis:before { content: "\e912"; }
  &.e-chart-2d-clustered-bar:before { content: "\e855"; }
  &.e-chart-radar:before { content: "\e856"; }
  &.e-chart-3d-100-percent-stacked-column:before { content: "\e857"; }
  &.e-chart-stackedlines-with-markers:before { content: "\e858"; }
  &.e-chart-wireframe-3d-surface:before { content: "\e902"; }
  &.e-chart-2d-line-with-markers:before { content: "\e860"; }
  &.e-chart-box-and-whisker:before { content: "\e861"; }
  &.e-create-custom-combo-chart:before { content: "\e862"; }
  &.e-chart-2d-100-percent-stacked-bar:before { content: "\e863"; }
  &.e-chart-scatter-with-straight-lines:before { content: "\e864"; }
  &.e-more-statistical-charts:before { content: "\e865"; }
  &.e-chart-3d-stacked-area:before { content: "\e866"; }
  &.e-chart-2d-line:before { content: "\e867"; }
  &.e-chart-2d-100-percent-stacked-column:before { content: "\e868"; }
  &.e-more-pie-charts:before { content: "\e869"; }
  &.e-chart-bubble-1:before { content: "\e870"; }
  &.e-chart-2d-100-percent-stacked-line:before { content: "\e871"; }
  &.e-chart-histogram:before { content: "\e872"; }
  &.e-more-hierarchy-charts:before { content: "\e873"; }
  &.e-chart-combo-clustered-column-line:before { content: "\e874"; }
  &.e-chart-2d-stacked-area:before { content: "\e875"; }
  &.e-chart-3d-stacked-column:before { content: "\e876"; }
  &.e-chart-insert-bar:before { content: "\e877"; }
  &.e-chart-scatter-with-smooth-lines:before { content: "\e878"; }
  &.e-chart-surface-wireframe-contour:before { content: "\e879"; }
  &.e-chart-3d-stacked-bar:before { content: "\e880"; }
  &.e-chart-2d-pie-of-pie:before { content: "\e881"; }
  &.e-chart-3d-surface-2:before { content: "\e882"; }
  &.e-chart-2d-area:before { content: "\e883"; }
  &.e-chart-combo-stacked-area-clustered-column:before { content: "\e884"; }
  &.e-chart-waterfall:before { content: "\e885"; }
  &.e-chart-surface-contour:before { content: "\e886"; }
  &.e-more-scatter-charts:before { content: "\e887"; }
  &.e-chart-2d-stacked-column:before { content: "\e888"; }
  &.e-protect-workbook:before { content: "\e88a"; }
  &.e-change-case:before { content: "\e88c"; }
  &.e-export-pdf-3:before { content: "\e88b"; }
  &.e-freeze-pane:before { content: "\e88d"; }
  &.e-freeze-first-column:before { content: "\e88e"; }
  &.e-freeze-top-row:before { content: "\e88f"; }
  &.e-merge-cells:before { content: "\e89a"; }
  &.e-split-vertical:before { content: "\e89b"; }
  &.e-table-cell:before { content: "\e89c"; }
  &.e-split-horizontal:before { content: "\e89d"; }
  &.e-list-box:before { content: "\e89e"; }
  &.e-text-form-2:before { content: "\e89f"; }
  &.e-label:before { content: "\e90a"; }
  &.e-check-box-2:before { content: "\e90b"; }
  &.e-add-edit-form-field:before { content: "\e90c"; }
  &.e-button:before { content: "\e90d"; }
  &.e-drop-down-2:before { content: "\e90e"; }
  &.e-radio-button:before { content: "\e90f"; }
  &.e-password:before { content: "\e91a"; }
  &.e-table-insert-column:before { content: "\e91b"; }
  &.e-table-insert-row:before { content: "\e91c"; }
  &.e-table-overwrite-cells:before { content: "\e91d"; }
  &.e-table-nested:before { content: "\e91e"; }
  &.e-table-merge:before { content: "\e91f"; }
  &.e-drag-fill:before { content: "\e92a"; }
  &.e-home:before { content: "\e92b"; }
  &.e-gantt-gripper:before { content: "\e92c"; }
  &.e-bring-to-view:before { content: "\e92d"; }
  &.e-bring-to-center:before { content: "\e92e"; }
  &.e-warning:before { content: "\e92f"; }
  &.e-critical-path:before { content: "\e93a"; }
  &.e-border-shadow-2:before { content: "\e93b"; }
  &.e-border-diagonal-up:before { content: "\e93c"; }
  &.e-border-diagonal-down:before { content: "\e93d"; }
  &.e-border-custom:before { content: "\e945"; }
  &.e-border-none-1:before { content: "\e93f"; }
  &.e-border-box:before { content: "\e940"; }
  &.e-border-shadow-1:before { content: "\e942"; }
  &.e-audio:before { content: "\e947"; }
  &.e-video:before { content: "\e948"; }
  &.e-crop:before { content: "\e949"; }
  &.e-star-filled:before { content: "\e94c"; }
  &.e-filters:before { content: "\e950"; }
  &.e-adjustment:before { content: "\e951"; }
  &.e-page-size:before { content: "\e952"; }
  &.e-reset:before { content: "\e953"; }
  &.e-triangle:before { content: "\e954"; }
  &.e-page-columns:before { content: "\e955"; }
  &.e-tint:before { content: "\e956"; }
  &.e-brightness:before { content: "\e957"; }
  &.e-contrast:before { content: "\e958"; }
  &.e-saturation:before { content: "\e959"; }
  &.e-fade:before { content: "\e95a"; }
  &.e-flip-vertical:before { content: "\e95b"; }
  &.e-flip-horizontal:before { content: "\e96f"; }
  &.e-transform-left:before { content: "\e970"; }
  &.e-transform-right:before { content: "\e971"; }
  &.e-sharpness:before { content: "\e972"; }
  &.e-grain:before { content: "\e973"; }
  &.e-frame-custom:before { content: "\e974"; }
  &.e-frame-1:before { content: "\e976"; }
  &.e-frame-2:before { content: "\e977"; }
  &.e-frame-3:before { content: "\e978"; }
  &.e-frame-4:before { content: "\e979"; }
  &.e-frame-5:before { content: "\e97a"; }
  &.e-frame-6:before { content: "\e97b"; }
  &.e-transform:before { content: "\e97c"; }
  &.e-check-tick:before { content: "\e97d"; }
  &.e-even-page-break:before { content: "\e97e"; }
  &.e-odd-page-break:before { content: "\e97f"; }
  &.e-page-column:before { content: "\e980"; }
  &.e-continuous-page-break:before { content: "\e981"; }
  &.e-page-text-wrap:before { content: "\e982"; }
  &.e-page-column-right:before { content: "\e983"; }
  &.e-page-column-left:before { content: "\e985"; }
  &.e-page-column-one:before { content: "\e986"; }
  &.e-page-column-two:before { content: "\e987"; }
  &.e-page-column-three:before { content: "\e989"; }
  &.e-multiple-comment:before { content: "\e98a"; }
  &.e-format-painter:before { content: "\e98b"; }
  &.e-launcher:before { content: "\e98c"; }
  &.e-character-style:before { content: "\e98e"; }
  &.e-linked-style:before { content: "\e992"; }
  &.e-chart-2d-stacked-line-marked:before { content: "\e994"; }
  &.e-chart-2d-100-percent-stacked-line-marked:before { content: "\e995"; }
  &.e-chart-2d-line-marked:before { content: "\e996"; }
  &.e-list-unordered-rtl:before { content: "\e997"; }
  &.e-list-ordered-rtl:before { content: "\e998"; }
  &.e-increase-indent-rtl:before { content: "\e999"; }
  &.e-decrease-indent-rtl:before { content: "\e99a"; }
  &.e-emoji:before { content: "\e99b"; }
  &.e-travel-and-places:before { content: "\e99c"; }
  &.e-nature:before { content: "\e99d"; }
  &.e-food-and-drinks:before { content: "\e100"; }
  &.e-animals:before { content: "\e101"; }
  &.e-objects:before { content: "\e102"; }
  &.e-activities:before { content: "\e103"; }
  &.e-hand-gestures:before { content: "\e104"; }
  &.e-symbols:before { content: "\e105"; }
  &.e-flags:before { content: "\e106"; }
  &.e-unlock:before { content: "\e107"; }
  &.e-more-chevron:before { content: "\e108"; }
  &.e-border-frame:before { content: "\e109"; }
  &.e-frame-none:before { content: "\e10a"; }
  &.e-frame-mat:before { content: "\e10b"; }
  &.e-frame-bevel:before { content: "\e10c"; }
  &.e-frame-line:before { content: "\e10d"; }
  &.e-frame-hook:before { content: "\e10e"; }
  &.e-frame-inset:before { content: "\e10f"; }
  &.e-bullet-7:before { content: "\e110"; }
  &.e-organize-pdf:before { content: "\e117"; }
  &.e-frame-7:before { content: "\e118"; }
  &.e-frame-8:before { content: "\e119"; }
  &.e-frame-9:before { content: "\e11a"; }
  &.e-frame-10:before { content: "\e11b"; }
  &.e-frame-11:before { content: "\e11c"; }
  &.e-caption-1:before { content: "\e11d"; }
  &.e-arrow-head:before { content: "\e11e"; }
  &.e-arrow-head-fill:before { content: "\e11f"; }
  &.e-bar-head:before { content: "\e120"; }
  &.e-circle-head:before { content: "\e12a"; }
  &.e-circle-head-fill:before { content: "\e12b"; }
  &.e-square-head:before { content: "\e12c"; }
  &.e-square-head-fill:before { content: "\e12d"; }
  &.e-arrow-tail:before { content: "\e12e"; }
  &.e-arrow-tail-fill:before { content: "\e12f"; }
  &.e-bar-tail:before { content: "\e13a"; }
  &.e-circle-tail:before { content: "\e13b"; }
  &.e-circle-tail-fill:before { content: "\e13c"; }
  &.e-square-tail:before { content: "\e13d"; }
  &.e-square-tail-fill:before { content: "\e13e"; }
  &.e-file-document:before { content: "\e13f"; }
  &.e-comment-resolve:before { content: "\e146"; }
  &.e-multiple-comment-resolve:before { content: "\e147"; }
  &.e-table-header:before { content: "\e148"; }
  &.e-blockquote:before { content: "\e149"; }
  &.e-add-notes:before { content: "\e14a"; }
  &.e-edit-notes:before { content: "\e14b"; }
  &.e-delete-notes:before { content: "\e14c"; }
  &.e-layers:before { content: "\e14d"; }
  &.e-font-size:before { content: "\e14e"; }
  &.e-export-pdf-1:before { content: "\e14f"; }
  &.e-import-word:before { content: "\e150"; }
  &.e-export-word-1:before { content: "\e151"; }
  &.e-dropdown-list:before { content: "\e152"; }
  &.e-combo-box:before { content: "\e153"; }
  &.e-repeating-section:before { content: "\e154"; }
  &.e-building-block:before { content: "\e155"; }
  &.e-content-control:before { content: "\e156"; }
  &.e-ai-chat:before { content: "\e157"; }
  &.e-xml-mapping:before { content: "\e158"; }
  &.e-thumbs-up-1:before { content: "\e159"; }
  &.e-thumbs-down:before { content: "\e15a"; }
  &.e-calculation:before { content: "\e15b"; }
  &.e-text-outline:before { content: "\e15c"; }
  &.e-user:before { content: "\e15d"; }
  &.e-calculate-sheet:before { content: "\e15e"; }
  &.e-translate:before { content: "\e15f"; }
  &.e-shorten:before { content: "\e160"; }
  &.e-elaborate:before { content: "\e161"; }
  &.e-rephrase:before { content: "\e162"; }
  &.e-grammar-check:before { content: "\e163"; }
  &.e-preformat-code:before { content: "\e164"; }
  &.e-import:before { content: "\e165"; }
  &.e-import-1:before { content: "\e166"; }
  &.e-redact:before { content: "\e167"; }
  &.e-smart-paste:before { content: "\e168"; }
  &.e-auto-fit-column:before { content: "\e169"; }
  &.e-auto-fit-all-column:before { content: "\e16a"; }
  &.e-columns:before { content: "\e16b"; }
  &.e-thumbs-up-fill:before { content: "\e16c"; }
  &.e-thumbs-down-fill:before { content: "\e16d"; }
  &.e-stop-rectangle:before { content: "\e16e"; }
  &.e-double-check:before { content: "\e16f"; }
  &.e-squiggly:before { content: "\e170"; }
  &.e-microphone:before { content: "\e171"; }
  &.e-button-field:before { content: "\e172"; }
  &.e-insert-sheet:before { content: "\e173"; }
  &.e-duplicate-1:before { content: "\e174"; }
  &.e-horizontal-line:before { content: "\e175"; }
  &.e-reply-arrow:before { content: "\e176"; }
  &.e-forward-arrow:before { content: "\e177"; }
  &.e-pin:before { content: "\e178"; }
  &.e-unpin:before { content: "\e179"; }
  &.e-add-bookmark:before { content: "\e17a"; }
  &.e-all-bookmarks:before { content: "\e17b"; }
  &.e-landscape:before { content: "\e17c"; }
  &.e-page-orientation:before { content: "\e17d"; }
  &.e-margin:before { content: "\e17e"; }
  &.e-previous-comment:before { content: "\e17f"; }
  &.e-next-comment:before { content: "\e180"; }
  &.e-close-comment:before { content: "\e181"; }
  &.e-increase-fontsize:before { content: "\e182"; }
  &.e-decrease-fontsize:before { content: "\e183"; }
  &.e-delete-all-comments:before { content: "\e184"; }
  &.e-reading-view:before { content: "\e185"; }
  &.e-multiple-page:before { content: "\e186"; }
  &.e-fit-100:before { content: "\e187"; }
  &.e-margin-narrow:before { content: "\e188"; }
  &.e-margin-normal:before { content: "\e189"; }
  &.e-margin-moderate:before { content: "\e18a"; }
  &.e-margin-wide:before { content: "\e18b"; }
  &.e-margin-default:before { content: "\e18c"; }
  &.e-margin-custom:before { content: "\e18d"; }
  &.e-size-letter:before { content: "\e18e"; }
  &.e-size-legal:before { content: "\e18f"; }
  &.e-size-executive:before { content: "\e190"; }
  &.e-size-a4:before { content: "\e191"; }
  &.e-size-a5:before { content: "\e192"; }
  &.e-size-custom:before { content: "\e193"; }
  &.e-more-column:before { content: "\e194"; }
  &.e-attachment:before { content: "\e1a0"; }
  &.e-file-format:before { content: "\e1a1"; }
  &.e-redaction:before { content: "\e1a2"; }
  &.e-properties-1:before { content: "\e1a3"; }
  &.e-callout:before { content: "\e1a4"; }
  &.e-heading-1:before { content: "\e1a5"; }
  &.e-heading-2:before { content: "\e1a6"; }
  &.e-heading-3:before { content: "\e1a7"; }
  &.e-heading-4:before { content: "\e1a8"; }
  &.e-collapsible-heading-1:before { content: "\e1a9"; }
  &.e-collapsible-heading-2:before { content: "\e1aa"; }
  &.e-collapsible-heading-3:before { content: "\e1ab"; }
  &.e-collapsible-heading-4:before { content: "\e1ac"; }
  &.e-export-jpeg:before { content: "\e1ad"; }
  &.e-chart-scatter:before { content: "\e1ae"; }
  &.e-show-side-panel:before { content: "\e1af"; }
  &.e-copy-code:before { content: "\e1b0"; }
  &.e-text-redact:before { content: "\e1b1"; }
  &.e-magic-wand:before { content: "\e1b2"; }
  &.e-swap-arrow:before { content: "\e1b3"; }
  &.e-checklist:before { content: "\e1b4"; }
  &.e-smart-edit:before { content: "\e1b5"; }
  &.e-table-edit:before { content: "\e1b6"; }
  &.e-history:before { content: "\e1b7"; }
  &.e-all-notes:before { content: "\e1b8"; }
  &.e-next-note:before { content: "\e1b9"; }
  &.e-previous-note:before { content: "\e1c0"; }
  &.e-convert-all-note:before { content: "\e1c1"; }
  &.e-extract-page:before { content: "\e1c2"; }
  &.e-left-wrap:before { content: "\e1c3"; }
  &.e-right-wrap:before { content: "\e1c4"; }
  &.e-notes:before { content: "\e1c5"; }
  &.e-move:before { content: "\e1c6"; }
  &.e-cell-property:before { content: "\e1c7"; }
  &.e-text-edit:before { content: "\e1c8"; }
}

}

$acrdn-skin: 'bootstrap' !default;
$acrdn-header-font-weight: normal !default;
$acrdn-icon-font-size: $font-size !default;
$acrdn-bgr-arrow-icon-font-size: 12px !default;
$acrdn-bgr-item-header-content-font-size: 14px !default;
$acrdn-content-line-height: 1.5 !default;
$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
$acrdn-border-size: $border-size !default;
$acrdn-border-radius: 0 !default;
$acrdn-active-bg: $grey-88 !default;
$acrdn-active-bg-color: $acrdn-active-bg !default;
$acrdn-item-select-bg: $grey-base !default;
$acrdn-header-hover-bg: transparent !default;
$acrdn-header-active-bg: transparent !default;
$acrdn-selected-border-size: $border-size !default;
$acrdn-selected-border-color: $grey-99 !default;
$acrdn-nested-header-font: $header-font-color !default;
$acrdn-nrml-header-minheight: 40px !default;
$acrdn-nrml-header-height: 40px !default;
$acrdn-bgr-header-minheight: 50px !default;
$acrdn-bgr-header-height: 50px !default;
$acrdn-nrml-header-lineheight: 39px !default;
$acrdn-bgr-header-lineheight: 48px !default;
$acrdn-nrml-header-paddingpix: 15px !default;
$acrdn-bgr-header-paddingpix: 15px !default;
$acrdn-item-hdr-con-lineheight: 39px !default;
$acrdn-item-selected-first-child-border-top: 1px solid $grey-99 !default;
$acrdn-item-selected-last-child-border-bottom: 1px solid $grey-99 !default;
$acrdn-item-border-radius: 4px !default;
$acrdn-item-margin-top: 5px !default;
$acrdn-item-nested-panel-item-select-margin: 2px !default;
$acrdn-item-overflow: hidden !default;
$acrdn-item-hover-focus-hdr-con-text-decoration: underline !default;
$acrdn-item-hdr-border-radius: 4px !default;
$acrdn-item-tgl-icon-display: table !default;
$acrdn-item-arrow-icon-font-size: 12px !default;
$acrdn-opacity: .5 !default;
$acrdn-nrml-header-padding: 0 30px 0 15px !default;
$acrdn-bgr-header-padding: 0 30px 0 15px !default;
$acrdn-nest-nrml-header-padding: 0 30px !default;
$acrdn-nested-item-header-focus-box-shadow: none !default;
$acrdn-nest-bgr-header-padding: 0 30px !default;
$acrdn-nest-second-nrml-header-padding: 0 30px 0 45px !default;
$acrdn-nest-second-bgr-header-padding: 0 30px 0 45px !default;
$acrdn-rtl-nrml-header-padding: 0 15px 0 30px !default;
$acrdn-rtl-bgr-header-padding: $acrdn-rtl-nrml-header-padding !default;
$acrdn-rtl-nest-nrml-header-padding: 0 30px !default;
$acrdn-rtl-nest-bgr-header-padding: $acrdn-rtl-nest-nrml-header-padding !default;
$acrdn-rtl-nest-second-nrml-header-padding: 0  45px 0 30px !default;
$acrdn-rtl-nest-second-bgr-header-padding: $acrdn-rtl-nest-second-nrml-header-padding !default;
$acrdn-nrml-content-padding: 15px !default;
$acrdn-bgr-content-padding: 15px !default;
$acrdn-nest-nrml-content-padding: 15px 15px 15px 30px !default;
$acrdn-nest-bgr-content-padding: $acrdn-nest-nrml-content-padding !default;
$acrdn-nest-second-nrml-content-padding: 15px 15px 15px 45px !default;
$acrdn-nest-second-bgr-content-padding: $acrdn-nest-second-nrml-content-padding !default;
$acrdn-rtl-nest-nrml-content-padding: 15px 30px 15px 15px !default;
$acrdn-rtl-nest-bgr-content-padding: $acrdn-rtl-nest-nrml-content-padding !default;
$acrdn-rtl-nest-second-nrml-content-padding: 15px 45px 15px 15px !default;
$acrdn-rtl-nest-second-bgr-content-padding: $acrdn-rtl-nest-second-nrml-content-padding !default;
$acrdn-nrml-icn-minwidth: 24px !default;
$acrdn-bgr-icn-minwidth: 24px !default;
$acrdn-header-font-size: 16px !default;
$acrdn-nest-header-font-size: 14px !default;
$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
$acrdn-nest-header-content-font-weight: normal !default;
$acrdn-content-font-size: 14px !default;
$acrdn-header-font-bgr-size: 16px !default;
$acrdn-content-font-bgr-size: 14px !default;
$acrdn-nrml-header-icon-padding: 10px !default;
$acrdn-bgr-header-icon-padding: 10px !default;
$acrdn-item-padding-size: 0 !default;
$acrdn-border-type: none !default;
$acrdn-selected-border-type: none !default;
$acrdn-slct-header-font-weight: normal !default;
$acrdn-font-family: 'Helvetica Neue' , 'Helvetica' , 'Arial' , 'sans-serif' !default;
$acrdn-selected-header-color: $grey-88 !default;
$acrdn-default-border: $grey-99 !default;
$acrdn-bg-color: $grey-base !default;
$acrdn-default-bg-color: $acrdn-bg-color !default;
$acrdn-content-color: $grey-dark-font !default;
$acrdn-header-focus-bg: transparent !default;
$acrdn-header-font: color.adjust($brand-primary, $lightness: 15%) !default;
$acrdn-icon-color: color.adjust($brand-primary, $lightness: 15%) !default;
$acrdn-selected-header-font-color: $grey-dark-font !default;
$acrdn-selected-icon-color: $grey-light-font !default;
$acrdn-item-border-color: $grey-99 !default;
$acrdn-item-border-nav-type: solid !default;
$acrdn-item-border-size: 0 !default;
$acrdn-item-select-last-child-border-bottom: 1px solid $grey-99 !default;
$acrdn-item-select-last-child-border-radius: 4px !default;
$acrdn-item-first-child-hdr-focus-border-radius: 4px !default;
$acrdn-item-last-child-border-bottom: 0 !default;
$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 4px !default;
$acrdn-item-focus-border-color: $grey-99 !default;
$acrdn-item-focus-border-size: 0 !default;
$acrdn-item-focus-selected-exp-border-top: 1px solid $grey-99 !default;
$acrdn-item-focus-selected-exp-hdr-focus-border-color: $grey-99 !default;
$acrdn-item-focus-selected-exp-hdr-focus-border-type: solid !default;
$acrdn-item-focus-selected-exp-hdr-focus-border-size: 0 0 1px 0 !default;
$acrdn-item-focus-exp-hdr-hover-focus-bg-color: transparent !default;
$acrdn-item-focus-exp-hdr-hover-focus-color: $acrdn-selected-header-font-color !default;
$acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-icon-color !default;
$acrdn-item-focus-exp-hdricon-hover-font: $acrdn-selected-header-font-color !default;
$acrdn-item-focus-selected-exp-border-color: $grey-99 !default;
$acrdn-item-exp-select-border-color: $grey-99 !default;
$acrdn-item-exp-select-border-size: 1px !default;
$acrdn-item-header-border: 0 !default;
$acrdn-item-select-exp-hdr-con-disable-font: $acrdn-selected-header-font-color !default;
$acrdn-item-header-content-disable-color: $acrdn-header-font !default;
$acrdn-item-hdr-con-text-disabled-font: $grey-dark-font !default;
$acrdn-item-icon-disable-color: $grey-dark-font !default;
$acrdn-item-selected-exp-hdr-focus-border-color: $grey-99 !default;
$acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
$acrdn-item-selected-exp-hdr-focus-border-size: 0 0 1px 0 !default;
$acrdn-item-selected-exp-hdr-focus-bg: transparent !default;
$acrdn-item-selected-exp-hdr-hover-bg: $grey-88 !default;
$acrdn-item-selected-exp-hdr-active-bg: $grey-88 !default;
$acrdn-item-nes-pan-con-last-child-border-bottom: 1px solid $grey-99 !default;
$acrdn-item-select-bg: $gray-base !default;
$acrdn-item-select-border-color: $grey-99 !default;
$acrdn-item-select-border-size: 1px !default;
$acrdn-item-panel-content-select-bg: none !default;
$acrdn-item-panel-content-select-border-top: 0 !default;
$acrdn-item-panel-content-select-border-bottom: 0 !default;
$acrdn-item-header-hover-border: 0 !default;
$acrdn-item-header-hover-bg: transparent !default;
$acrdn-item-header-hover-border-color: initial !default;
$acrdn-item-header-active-border: 0 !default;
$acrdn-item-header-active-border-color: initial !default;
$acrdn-item-header-focus-border: 0 !default;
$acrdn-item-header-focus-box-shadow: none !default;
$acrdn-item-header-focus-bg: transparent !default;
$acrdn-item-header-focus-active-color: $acrdn-header-font !default;
$acrdn-item-select-exp-hdr-hover-color: $acrdn-header-font !default;
$acrdn-item-selected-exp-hdr-border-color: $grey-99 !default;
$acrdn-item-selected-exp-hdr-border-size: 0 0 1px 0 !default;
$acrdn-item-selected-exp-hdr-bg: $grey-88 !default;
$acrdn-item-selected-exp-hdr-hover-color: $grey-light-font !default;
$acrdn-item-selected-exp-hdr-hover-focus-color: $grey-dark-font !default;
$acrdn-item-selected-exp-hdr-icon-color: $grey-dark-font !default;
$acrdn-item-selected-exp-hdr-hover-border-color: $grey-99 !default;
$acrdn-item-selected-tgl-icon-color: $grey-light-font !default;
$acrdn-item-selected-hdr-font: $grey-dark-font !default;
$acrdn-item-select-hdr-focus-border-color: $grey-99 !default;
$acrdn-item-selected-border-color: $grey-99 !default;
$acrdn-item-selected-border-size: 1px !default;
$acrdn-item-selected-select-last-border-bottom: 1px solid $grey-99 !default;
$acrdn-item-selected-selected-border-color: $grey-99 !default;
$acrdn-item-selected-selected-border-size: 0 1px 1px 1px !default;
$acrdn-item-selected-header-background: $grey-88 !default;
$acrdn-item-selected-hdr-border-color: $grey-99 !default;
$acrdn-item-selected-hdr-border-size: 0 0 1px 0 !default;
$acrdn-item-selected-header-border-radius: 0 !default;
$acrdn-item-selected-hdr-con-font: $acrdn-header-font !default;
$acrdn-item-selected-select-border-color: $grey-99 !default;
$acrdn-item-selected-select-border-size: 1px !default;
$acrdn-item-selected-hdr-icon-font: $acrdn-header-font !default;
$acrdn-item-selected-exp-hdr-con-hover-color: $grey-dark-font !default;
$acrdn-item-selected-exp-hdr-icon-hover-color: $grey-dark-font !default;
$acrdn-item-selected-select-active-bg: $gray-base !default;
$acrdn-item-nes-pan-exp-hdr-color: $grey-dark-font !default;
$acrdn-item-selected-hdr-hover-border-color: $grey-99 !default;
$acrdn-item-selected-hdr-tgl-icon-hover-font: $acrdn-header-font !default;
$acrdn-item-nes-selected-exp-hover-hdr-icons-font: $grey-light-font !default;
$acrdn-item-nes-selected-exp-hover-hdr-con-font: $grey-dark-font !default;
$acrdn-item-exp-not-selected-hdr-focus-bg: transparent !default;
$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
$acrdn-border-none: 0 !default;
$acrdn-auto-height: auto !default;
$acrdn-nested-header-content-font-weight: normal !default;
$acrdn-padding-none: 0 !default;
$acrdn-margin-none: 0 !default;

@include export-module('accordion-layout') {
  .e-accordion {
    display: block;
    position: relative;

    .e-acrdn-item {

      &.e-select.e-selected:first-child {
        border-top: $acrdn-item-selected-first-child-border-top;
      }

      &.e-select.e-selected:last-child {
        border-bottom: $acrdn-item-selected-last-child-border-bottom;
      }
      border-radius: $acrdn-item-border-radius;
      margin-top: $acrdn-item-margin-top;

      &:first-child {
        margin-top: $acrdn-margin-none;
      }

      &:not(.e-select) + .e-acrdn-item:not(.e-select) {
        margin-bottom: $acrdn-margin-none;
        margin-top: $acrdn-margin-none;
      }

      .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
        margin: $acrdn-item-nested-panel-item-select-margin;
      }

      > .e-acrdn-header .e-acrdn-header-content {
        font-weight: $acrdn-header-font-weight;
      }

      &.e-selected {
        padding-top: $acrdn-padding-none;

        > .e-acrdn-header .e-acrdn-header-content {
          font-weight: $acrdn-slct-header-font-weight;
        }
      }

      &.e-overlay {
        height: $acrdn-auto-height;
      }
    }

    .e-acrdn-item {
      overflow: $acrdn-item-overflow;
      padding-top: $acrdn-item-padding-size;
      position: relative;

      &.e-hide {
        display: none;
      }

      .e-acrdn-header {

        .e-acrdn-header-content {
          font-size: $acrdn-header-font-size;
        }
      }

      &.e-select {

        > .e-acrdn-header {
          cursor: pointer;

          &:hover,
          &:focus {
            .e-acrdn-header-content {
              text-decoration: $acrdn-item-hover-focus-hdr-con-text-decoration;
            }
          }
        }
      }

      .e-acrdn-header {
        border-radius: $acrdn-item-hdr-border-radius;
        line-height: $acrdn-nrml-header-lineheight;
        min-height: $acrdn-nrml-header-minheight;
        overflow: hidden;
        padding: $acrdn-nrml-header-padding;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;

        > * {
          display: inline-block;
        }

        .e-acrdn-header-content {
          line-height: $acrdn-item-hdr-con-lineheight;
        }

        .e-toggle-icon {
          display: $acrdn-item-tgl-icon-display;
          font-size: $acrdn-icon-font-size;
          height: $acrdn-nrml-header-height;
          min-height: $acrdn-nrml-header-minheight;
          min-width: $acrdn-nrml-icn-minwidth;
          position: absolute;
          right: $acrdn-nrml-header-paddingpix;
          top: 0;

          .e-tgl-collapse-icon.e-icons {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
          }
        }

        .e-toggle-animation {
          transition: .5s ease 0s;
        }

        .e-acrdn-header-icon {
          display: inline-block;
          padding: $acrdn-padding-none $acrdn-nrml-header-icon-padding $acrdn-padding-none $acrdn-padding-none;

          .e-acrdn-icons.e-icons {
            font-size: $acrdn-item-arrow-icon-font-size;
          }
        }
      }

      .e-acrdn-panel {
        font-size: $acrdn-content-font-size;
        overflow-y: hidden;
        text-decoration: none;
        width: 100%;

        &.e-nested {

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
            padding: $acrdn-nest-nrml-content-padding;
          }

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
            padding: $acrdn-nest-nrml-header-padding;

            &:focus {
              box-shadow: $acrdn-nested-item-header-focus-box-shadow;
            }
          }

          > .e-acrdn-content {
            padding: $acrdn-padding-none;

            .e-acrdn-panel.e-nested > .e-acrdn-content {
              padding: $acrdn-padding-none;
            }

            > .e-accordion {
              border: $acrdn-border-none;
            }

            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
              padding: $acrdn-nest-second-nrml-header-padding;
            }

            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
              padding: $acrdn-nest-second-nrml-content-padding;
            }
          }

          .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
            font-weight: $acrdn-nest-header-content-font-weight;
          }

          .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
            font-weight: $acrdn-nested-header-content-font-weight;
          }
        }

        .e-acrdn-content {
          line-height: $acrdn-content-line-height;
          overflow: hidden;
          padding: $acrdn-nrml-content-padding;
          text-overflow: ellipsis;

          > * {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .e-acrdn-header-content {
          font-size: $acrdn-nest-header-content-font-size;
        }
      }

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

    &.e-rtl {

      .e-acrdn-item {

        .e-acrdn-panel.e-nested {

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
            padding: $acrdn-rtl-nest-nrml-content-padding;
          }

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
            padding: $acrdn-rtl-nest-nrml-header-padding;
          }

          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
            padding: $acrdn-rtl-nest-second-nrml-header-padding;
          }

          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
            padding: $acrdn-rtl-nest-second-nrml-content-padding;
          }
        }

        .e-acrdn-header {
          padding: $acrdn-rtl-nrml-header-padding;

          .e-toggle-icon {
            left: $acrdn-nrml-header-paddingpix;
            right: auto;
          }

          .e-acrdn-header-icon {
            padding: $acrdn-padding-none $acrdn-padding-none $acrdn-padding-none $acrdn-nrml-header-icon-padding;
          }
        }
      }
    }
  }
}

@mixin acrdn-item-header-focus-box-shadow {
  @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
    box-shadow: none;
  }
  @else {
    box-shadow: $acrdn-item-header-focus-box-shadow;
  }
}

@mixin acrdn-item-header-focus-visible-box-shadow {
  @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
    &:focus-visible {
      box-shadow: $acrdn-item-header-focus-box-shadow;
    }
  }
}

@include export-module('accordion-theme') {
  .e-accordion {
    -webkit-tap-highlight-color: $acrdn-tab-highlight-color;
    background: $acrdn-default-bg-color;
    border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
    border-radius: $acrdn-border-radius;

    .e-acrdn-item {
      border-color: $acrdn-item-border-color;
      border-style: $acrdn-item-border-nav-type;
      border-width: $acrdn-item-border-size;
      border-radius: $acrdn-item-border-radius;

      &.e-active {
        background: $acrdn-active-bg-color;
      }

      &.e-select:last-child {
        border-bottom: $acrdn-item-select-last-child-border-bottom;
        border-radius: $acrdn-item-select-last-child-border-radius;
      }

      &:first-child .e-acrdn-header:focus {
        border-radius: $acrdn-item-first-child-hdr-focus-border-radius;
      }

      @if ($skin-name == 'Material3') {
        &:first-child.e-selected.e-select > .e-acrdn-header:focus {
          border-radius: $acrdn-item-first-child-hdr-focus-border-radius;
        }
      }

      &:last-child {
        border-bottom: $acrdn-item-last-child-border-bottom;

        &:not(.e-expand-state) .e-acrdn-header:focus {
          border-radius: $acrdn-item-last-child-not-exp-hdr-focus-border-radius;
        }

        &.e-selected .e-acrdn-header:focus {
          border-radius: $acrdn-item-hdr-border-radius;
        }
      }

      &.e-item-focus {
        border-color: $acrdn-item-focus-border-color;
        border-style: $acrdn-item-border-nav-type;
        border-width: $acrdn-item-focus-border-size;
      }

      &.e-item-focus.e-select.e-selected.e-expand-state {
        border-top: $acrdn-item-focus-selected-exp-border-top;

        .e-acrdn-header:focus {
          border-color: $acrdn-item-focus-selected-exp-hdr-focus-border-color;
          border-style: $acrdn-item-focus-selected-exp-hdr-focus-border-type;
          border-width: $acrdn-item-focus-selected-exp-hdr-focus-border-size;
        }

        .e-acrdn-header:hover:focus {
          background: $acrdn-item-focus-exp-hdr-hover-focus-bg-color;

          .e-acrdn-header-content {
            color: $acrdn-item-focus-exp-hdr-hover-focus-color;
          }

          .e-icons {
            color: $acrdn-item-focus-selected-hdr-icons-font;
          }

          .e-acrdn-header-icon .e-icons {
            color: $acrdn-item-focus-exp-hdricon-hover-font;
          }
        }
      }

      &.e-item-focus.e-expand-state.e-select,
      &.e-item-focus.e-select.e-selected.e-expand-state  {
        border-color: $acrdn-item-focus-selected-exp-border-color;
      }

      &.e-expand-state.e-select {
        border-color: $acrdn-item-exp-select-border-color;
        border-style: $acrdn-item-border-nav-type;
        border-width: $acrdn-item-exp-select-border-size;
      }

      .e-acrdn-header {
        border: $acrdn-item-header-border;
      }

      &.e-overlay.e-select.e-expand-state {
        .e-acrdn-header {
          .e-icons,
          .e-acrdn-header-content {
            color: $acrdn-item-select-exp-hdr-con-disable-font;
          }
        }
      }

      &.e-overlay {
        background: $acrdn-bg-color;
        opacity: $acrdn-opacity;

        .e-acrdn-header {

          .e-icons,
          .e-acrdn-header-content {
            color: $acrdn-item-header-content-disable-color;
          }
        }

        &.e-overlay.e-select.e-expand-state {
          .e-acrdn-header {

            .e-icons {
              color: $acrdn-item-icon-disable-color;
            }

            .e-acrdn-header-content {
              color: $acrdn-item-hdr-con-text-disabled-font;
            }
          }
        }
      }

      &.e-selected.e-select.e-expand-state > .e-acrdn-header {

        &:focus {
          border-color: $acrdn-item-selected-exp-hdr-focus-border-color;
          border-style: $acrdn-item-selected-exp-hdr-focus-border-type;
          border-width: $acrdn-item-selected-exp-hdr-focus-border-size;
          background: $acrdn-item-selected-exp-hdr-focus-bg;
        }

        &:hover {
          background: $acrdn-item-selected-exp-hdr-hover-bg;
        }

        &:active {
          background: $acrdn-item-selected-exp-hdr-active-bg;
        }
      }

      .e-acrdn-panel.e-nested {

        .e-acrdn-item.e-select {
          &.e-selected.e-expand-state > .e-acrdn-header,
          &.e-expand-state > .e-acrdn-header {
            .e-acrdn-header-content {
              color: $acrdn-item-nes-pan-exp-hdr-color;
            }
          }
        }

        .e-acrdn-content .e-acrdn-item:last-child {
          border-bottom: $acrdn-item-nes-pan-con-last-child-border-bottom;
        }

        .e-acrdn-header .e-acrdn-header-content {
          color: $acrdn-header-font;
        }
      }

      &.e-select {
        background: $acrdn-item-select-bg;
        border-color: $acrdn-item-select-border-color;
        border-style: $acrdn-item-border-nav-type;
        border-width: $acrdn-item-select-border-size;

        .e-acrdn-panel .e-acrdn-content {
          color: $acrdn-content-color;
          background: $acrdn-item-panel-content-select-bg;
          border-top: $acrdn-item-panel-content-select-border-top;
          border-bottom: $acrdn-item-panel-content-select-border-bottom;
        }
      }

      .e-acrdn-header {

        .e-acrdn-header-content {
          color: $acrdn-header-font;
        }

        .e-acrdn-header-icon {
          color: $acrdn-icon-color;
        }
      }
      &.e-select.e-selected > .e-acrdn-header {
        &:focus {
          border: $acrdn-item-exp-not-selected-hdr-focus-border;
        }
      }

      &.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header {

        &:focus {
          background: $acrdn-item-exp-not-selected-hdr-focus-bg;
          border: $acrdn-item-exp-not-selected-hdr-focus-border;
          border-color: $acrdn-item-exp-not-selected-hdr-focus-border-color;
        }
      }

      .e-acrdn-header {

        &:hover {
          border: $acrdn-item-header-hover-border;
          background: $acrdn-item-header-hover-bg;
          border-color: $acrdn-item-header-hover-border-color;
        }

        &:active {
          border: $acrdn-item-header-active-border;
          border-color: $acrdn-item-header-active-border-color;
          background: $acrdn-header-active-bg;
        }

        &:focus {
          border: $acrdn-item-header-focus-border;
          background: $acrdn-item-header-focus-bg;
          @include acrdn-item-header-focus-box-shadow;

          &:active {

            .e-icons,
            .e-acrdn-header-content,
            .e-toggle-icon {
              color: $acrdn-item-header-focus-active-color;
            }
          }
        }
        @include acrdn-item-header-focus-visible-box-shadow;
      }

      &.e-select {

        &.e-acrdn-item > .e-acrdn-header {
          &:hover {
            .e-acrdn-header-content {
              color: $acrdn-item-select-exp-hdr-hover-color;
            }

            .e-icons {
              color: $acrdn-item-selected-hdr-icon-font;
            }

            .e-toggle-icon .e-icons.e-tgl-collapse-icon {
              color: $acrdn-item-selected-hdr-tgl-icon-hover-font;
            }

            &:focus .e-icons,
            &:focus .e-acrdn-header-content {
              color: $acrdn-item-header-focus-active-color;
            }
          }
        }

        &.e-selected.e-expand-state > .e-acrdn-header,
        &.e-expand-state > .e-acrdn-header {
          border-color: $acrdn-item-selected-exp-hdr-border-color;
          border-style: $acrdn-item-border-nav-type;
          border-width: $acrdn-item-selected-exp-hdr-border-size;
          background: $acrdn-item-selected-exp-hdr-bg;

          &:hover {
            .e-icons {
              color: $acrdn-item-selected-exp-hdr-hover-color;
            }

            .e-acrdn-header-icon .e-icons {
              color: $acrdn-item-selected-exp-hdr-icon-hover-color;
            }

            .e-acrdn-header-content {
              color: $acrdn-item-selected-exp-hdr-con-hover-color;
            }

            &:focus .e-icons,
            &:focus .e-acrdn-header-content {
              color: $acrdn-item-selected-exp-hdr-hover-focus-color;
            }
          }

          .e-acrdn-header-icon {
            color: $acrdn-item-selected-exp-hdr-icon-color;
          }

          &:hover {
            border-color: $acrdn-item-selected-exp-hdr-hover-border-color;
          }

          > .e-toggle-icon {
            color: $acrdn-item-selected-tgl-icon-color;
          }

          .e-acrdn-header-icon,
          .e-acrdn-header-content {
            color: $acrdn-item-selected-hdr-font;
          }
        }
      }

      &.e-select {
        &.e-item-focus {
          border-color: $acrdn-item-select-hdr-focus-border-color;
        }
      }

      &.e-selected {
        border-color: $acrdn-item-selected-border-color;
        border-style: $acrdn-item-border-nav-type;
        border-width: $acrdn-item-selected-border-size;

        &.e-select {
          border-color: $acrdn-item-selected-select-border-color;
          border-style: $acrdn-item-border-nav-type;
          border-width: $acrdn-item-selected-select-border-size;

          &.e-active {
            background: $acrdn-item-selected-select-active-bg;
          }

          &.e-select:last-child {
            border-bottom: $acrdn-item-selected-select-last-border-bottom;
          }
        }

        > .e-acrdn-header {

          > .e-acrdn-header-content {
            color: $acrdn-item-selected-hdr-con-font;
          }

          > .e-toggle-icon {
            color: $acrdn-item-selected-hdr-icon-font;
          }

          &:focus {
            position: relative;
            z-index: 2;
            @include acrdn-item-header-focus-box-shadow;
          }
          @include acrdn-item-header-focus-visible-box-shadow;
        }

        + .e-selected {
          border-color: $acrdn-item-selected-selected-border-color;
          border-style: $acrdn-item-border-nav-type;
          border-width: $acrdn-item-selected-selected-border-size;
        }

        .e-acrdn-item.e-selected.e-expand-state {
          &:hover {
            > .e-acrdn-header .e-icons {
              color: $acrdn-item-nes-selected-exp-hover-hdr-icons-font;
            }

            > .e-acrdn-header .e-acrdn-header-content {
              color: $acrdn-item-nes-selected-exp-hover-hdr-con-font;
            }
          }
        }

        &.e-select > .e-acrdn-header {
          background: $acrdn-item-selected-header-background;
          border-radius: $acrdn-item-selected-header-border-radius;
          border-color: $acrdn-item-selected-hdr-border-color;
          border-style: $acrdn-item-border-nav-type;
          border-width: $acrdn-item-selected-hdr-border-size;

          &:focus {
            background: $acrdn-item-header-focus-bg;
          }

          &:hover {
            border-color: $acrdn-item-selected-hdr-hover-border-color;
          }
        }

        > .e-acrdn-panel {

          .e-acrdn-content {
            color: $acrdn-content-color;
          }

          .e-acrdn-header-content {
            color: $acrdn-nested-header-font;
          }
        }
      }

      .e-toggle-icon {
        color: $acrdn-icon-color;
      }

      .e-acrdn-panel {
        font-size: $acrdn-content-font-size;
      }
    }
  }
}

@include export-module('accordion-bootstrap-dark-icons') {
  #{&}.e-accordion {

    .e-tgl-collapse-icon {

      &::before {
        content: '\e916';
      }

      &.e-expand-icon {
        transform: rotate(-180deg);
      }
    }
  }
}

@include export-module('accordion-bigger') {
  .e-bigger .e-accordion,
  .e-accordion.e-bigger {

    .e-acrdn-item {

      .e-acrdn-header .e-acrdn-header-content {
        font-size: $acrdn-header-font-bgr-size;
        vertical-align: middle;
      }
    }

    .e-acrdn-item.e-select {

      .e-acrdn-panel {
        font-size: $acrdn-content-font-bgr-size;

        &.e-nested {

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
            padding: $acrdn-nest-bgr-content-padding;
          }

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
            box-shadow: none;
            padding: $acrdn-nest-bgr-header-padding;
          }

          > .e-acrdn-content {
            padding: $acrdn-padding-none;

            > .e-accordion {
              border: $acrdn-border-none;
            }

            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
              padding: $acrdn-nest-second-bgr-header-padding;
            }

            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
              padding: $acrdn-nest-second-bgr-content-padding;
            }
          }
        }

        .e-acrdn-header .e-acrdn-header-content {
          font-size: $acrdn-nest-header-font-size;
        }
      }

      .e-acrdn-header {
        line-height: $acrdn-bgr-header-lineheight;
        min-height: $acrdn-bgr-header-minheight;
        padding: $acrdn-bgr-header-padding;

        .e-toggle-icon {
          height: $acrdn-bgr-header-height;
          min-height: $acrdn-bgr-header-minheight;
          min-width: $acrdn-bgr-icn-minwidth;
          right: $acrdn-bgr-header-paddingpix;
          font-size: $acrdn-bgr-arrow-icon-font-size;
        }

        .e-acrdn-header-icon {
          display: inline-block;
          padding: $acrdn-padding-none $acrdn-bgr-header-icon-padding $acrdn-padding-none $acrdn-padding-none;

          .e-acrdn-icons.e-icons {
            font-size: $acrdn-bgr-arrow-icon-font-size;
          }
        }
      }

      .e-acrdn-panel .e-acrdn-content {
        padding: $acrdn-bgr-content-padding;
        font-size: $acrdn-bgr-item-header-content-font-size;
      }
    }

    &.e-rtl {

      .e-acrdn-item.e-select {

        .e-acrdn-panel.e-nested  {

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
            padding: $acrdn-rtl-nest-bgr-content-padding;
          }

          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
            padding: $acrdn-rtl-nest-bgr-header-padding;
          }

          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
            padding: $acrdn-rtl-nest-second-bgr-header-padding;
          }

          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
            padding: $acrdn-rtl-nest-second-bgr-content-padding;
          }
        }
      }

      .e-acrdn-item {

        .e-acrdn-header {
          padding: $acrdn-rtl-bgr-header-padding;

          .e-toggle-icon {
            left: $acrdn-bgr-header-paddingpix;
            right: auto;
          }

          .e-acrdn-header-icon {
            padding: $acrdn-padding-none $acrdn-padding-none $acrdn-padding-none $acrdn-bgr-header-icon-padding;
          }
        }
      }
    }
  }
}

//default
$ddl-input-font-size: 14px !default;
$ddl-input-border: $border-size $border-type !default;
$ddl-input-font-family: inherit !default;
$ddl-zero-value: 0 !default;
$ddl-input-margin-bottom: $ddl-zero-value !default;
$ddl-input-padding: 8px !default;
$ddl-input-group-border-width: 1px !default;
$ddl-clear-icon-margin-right: 0 !default;
$ddl-active-font-color: $active-font-color !default;

$ddl-input-bgr-small-clear-margin: 0 4px !default;
$ddl-input-popup-padding: 4px 0 !default;
$ddl-input-zero-padding: 0 !default;
$ddl-bigger-filter-parent-padding: 8px 16px 8px 0 !default;
$ddl-bigger-small-filtr-parent: 8px 16px !default;
$ddl-bigger-filter-input-parent-padding: 4px 16px 4px 0 !default;

$ddl-list-search-icon-padding: 8px !default;
$ddl-list-filter-text-indent: 0 12px !default;
$ddl-list-icon-color: $grey-dark-font !default;
$ddl-list-box-shadow-color: rgba($base-font, .5) !default;
$ddl-bigger-list-font-size: 15px !default;
$ddl-popup-background-color: $grey !default;
$ddl-filter-border: $grey-44 !default;
$ddl-filter-top-border: 0 !default;
$ddl-filter-padding: 5px 8px !default;
$ddl-filter-box-shadow: none !default;
$ddl-filter-background-color: $grey-white !default;
$ddl-default-border-color: $grey-44 !default;
$ddl-back-icon-margin: -2px 10px 0 -54px !default;
$ddl-back-icon-padding: 0 !default;
$ddl-filter-margin: 0 !default;
$ddl-box-border-color: $grey-lighter !default;

$ddl-bgr-input-filter-margin-left: -20px !default;
$ddl-bgr-content-min-height: 40px !default;
$ddl-border-width: 1px !default;
$ddl-zero-margin-padding: 0 !default;
$ddl-content-nim-height: 33px !default;
$ddl-popup-resize-height: 15px !default;
$ddl-bgr-popup-clear-min-width: 16px !default;
$ddl-bgr-popup-clear-min-height: 16px !default;
$ddl-bgr-small-popup-clear-min-height: 18px !default;
$ddl-bgr-small-popup-clear-min-width: 18px !default;
$ddl-zero-height: 0 !default;
$ddl-popup-resize-width: 15px !default;
$input-border: $ddl-zero-value $border-type !default;
$ddl-full-width: 100%;

// small size
$ddl-small-list-font-size: 13px !default;

// touch size
$ddl-bigger-small-list-font-size: 14px !default;

@include export-module('dropdownlist-bootstrap-dark') {
  #{&}.e-popup.e-ddl {
    border-radius: 4px;
    box-shadow: 0 6px 12px $ddl-list-box-shadow-color;
    margin-top: 3px;
    @at-root {
      #{if(&, '&', '*')} .e-input-group {
        width: auto;

        #{if(&, '&', '*')} input {
          line-height: 15px;
        }
      }
    }
  }

  #{&}.e-popup.e-ddl .e-dropdownbase {
    min-height: 26px;
  }

  #{&}.e-popup.e-ddl .e-filter-parent .e-input-group {
    display: flex;
    width: auto;
    @at-root {
      #{if(&, '&', '*')} .e-back-icon {
        border: 0;
      }
    }
  }

  .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:active,
  .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon:hover,
  .e-control#{&}.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
  .e-control#{&}.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover,
  .e-ddl#{&}.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active,
  .e-ddl#{&}.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover,
  .e-ddl#{&}.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
  .e-ddl#{&}.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover {
    background: transparent;
    color: $ddl-list-icon-color;
  }

  .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-ddl-icon,
  .e-input-group.e-disabled.e-ddl .e-control#{&}.e-dropdownlist ~ .e-input-group-icon,
  .e-control#{&}.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
  .e-control#{&}.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon {
    border: 0;
  }

  .e-input-group:not(.e-disabled) .e-control#{&}.e-dropdownlist ~ .e-input-group-icon:active,
  .e-control#{&}.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
  .e-ddl#{&}.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
  .e-ddl#{&}.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
    box-shadow: none;
  }

  .e-ddl#{&}.e-popup .e-filter-parent {
    border-bottom: 1px solid $grey-88;
  }
}

@include export-module('dropdownlist-layout') {

  .e-ddl#{&}.e-popup {
    #{if(&, '&', '*')} .e-input-group {
      @if ($skin-name == 'Material3') {
        padding-top: $ddl-popup-input-group-mat-margin-top;
      }
    }
  }

  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
    width: $ddl-full-width;
    border: $input-border;
  }

  .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
    display: block;
    visibility: hidden;
  }

  .e-popup-full-page {
    bottom: $ddl-zero-margin-padding;
    left: $ddl-zero-margin-padding;
    margin: $ddl-input-zero-padding;
    overflow: hidden;
    padding: $ddl-input-zero-padding;
    right: $ddl-zero-margin-padding;
    top: $ddl-zero-margin-padding;

    #{&}.e-ddl.e-popup.e-ddl-device-filter {
      margin: $ddl-filter-margin;
    }
  }

  .e-ddl.e-control-wrapper .e-ddl-disable-icon {
    position: relative;
  }

  .e-ddl.e-control-wrapper .e-ddl-disable-icon::before {
    content: '';
  }

  .e-ddl.e-control-wrapper.e-input-group .e-ddl-icon.e-ddl-disable-icon {
    position: relative;
  }

  .e-ddl.e-control-wrapper.e-input-group .e-ddl-icon.e-ddl-disable-icon::before {
    content: '';
  }

  .e-ddl-device-filter .e-filter-parent {
    background-color: $ddl-filter-background-color;
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-ddl input.e-input::-webkit-contacts-auto-fill-button {
    display: none;
    pointer-events: none;
    position: absolute;
    right: $ddl-zero-margin-padding;
    visibility: hidden;
  }
  /* stylelint-enable property-no-vendor-prefix */

  .e-filter-parent {
    border: $ddl-filter-border;
    border-top-width: $ddl-filter-top-border;
    box-shadow: $ddl-filter-box-shadow;
    display: block;
    padding: $ddl-filter-padding;
    @if ($skin-name == 'FluentUI') {
      border-bottom: $ddl-filter-parent-border;
    }
  }

  .e-ddl.e-input-group:not(.e-disabled) {
    cursor: pointer;
  }

  .e-ddl#{&}.e-popup.e-ddl-device-filter {
    @at-root {
      #{if(&, '&', '*')} .e-input-group.e-input-focus::before,
      #{if(&, '&', '*')} .e-input-group.e-input-focus::after {
        width: $ddl-zero-margin-padding;
      }
    }
  }

  .e-ddl#{&}.e-popup {
    background: $ddl-popup-background-color;
    @if $skin-name != 'material' and $skin-name != 'Material3' {
      border: $ddl-border-width solid $ddl-default-border-color;
    }
    @if $skin-name == 'Material3' {
      border-radius: $ddl-nrml-popup-border-radius;
    }
    position: absolute;
    @at-root {
      #{if(&, '&', '*')} .e-search-icon {
        margin: $ddl-input-zero-padding;
        opacity: .57;
        padding: $ddl-list-search-icon-padding;
      }

      #{if(&, '&', '*')} .e-filter-parent .e-back-icon {
        padding: $ddl-back-icon-padding;
      }

      #{if(&, '&', '*')}.e-rtl .e-filter-parent .e-input-group.e-control-wrapper .e-input-filter,
      #{if(&, '&', '*')} .e-filter-parent .e-input-filter,
      #{if(&, '&', '*')} .e-filter-parent .e-input-filter:focus,
      #{if(&, '&', '*')} .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
      #{if(&, '&', '*')} .e-filter-parent .e-input-group.e-control-wrapper.e-input-focus .e-input-filter {
        @if ($skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind' and $skin-name != 'tailwind3') {
          padding: $ddl-list-filter-text-indent;
        }
      }

      #{if(&, '&', '*')} .e-input-group {
        margin-bottom: $ddl-zero-margin-padding;
      }

      #{if(&, '&', '*')} .e-ddl-footer,
      #{if(&, '&', '*')} .e-ddl-header {
        cursor: default;
      }
    }
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-ddl.e-input-group .e-ddl-hidden,
  .e-ddl.e-float-input .e-ddl-hidden {
    -webkit-appearance: initial;
    border: 0;
    height: $ddl-zero-height;
    padding: $ddl-input-zero-padding;
    visibility: hidden;
    width: $ddl-zero-margin-padding;
  }

  .e-ddl.e-input-group,
  .e-ddl.e-input-group.e-input-focus:focus {
    outline: none;
  }

  .e-dropdownbase .e-list-item .e-highlight {
    display: inline;
    font-weight: bold;
    vertical-align: baseline;
  }

  .e-ddl.e-input-group input[readonly] ~ .e-clear-icon:not(.e-clear-icon-hide),
  .e-float-input input[readonly] ~ .e-clear-icon:not(.e-clear-icon-hide),
  .e-float-input.e-input-group input[readonly] ~ .e-clear-icon:not(.e-clear-icon-hide) {
    opacity: 1;
  }

  .e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon {
    display: flex;
  }

  .e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-input-group input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
    display: none;
  }

  .e-input-group.e-static-clear input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-static-clear.e-control-wrapper input.e-dropdownlist.e-input:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear.e-input-group input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-static-clear.e-input-group.e-control-wrapper input.e-dropdownlist:not(:valid):first-child ~ .e-clear-icon.e-clear-icon-hide {
    cursor: pointer;
    display: flex;
  }

  .e-disabled.e-ddl.e-static-clear .e-clear-icon {
    pointer-events: none;
  }

  .e-ddl.e-input-group {
    .e-input-value,
    .e-input-value:focus {
      font-family: $ddl-input-font-family;
      font-size: $ddl-input-font-size;
      height: auto;
      margin: $ddl-zero-value;
      outline: none;
      width: $ddl-full-width;
      overflow: hidden;
    }

    input[readonly].e-input,
    input[readonly],
    .e-dropdownlist {
      pointer-events: none;
    }
  }

  .e-data-form .e-ddl.e-input-group.e-control-container input[readonly].e-input.e-dropdownlist {
    cursor: pointer;
    pointer-events: auto;
  }

  .e-ddl.e-popup.e-popup-open .e-list-item.e-disabled {
    opacity: .7;
    pointer-events: none;
    @if $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      color: $ddl-list-disable-item-color;
    }
  }

  ejs-autocomplete,
  ejs-combobox,
  ejs-dropdownlist {
    display: block;
  }

  .e-small .e-ddl#{&}.e-popup,
  .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-small-list-font-size;
      }
    }
  }

  .e-small.e-ddl#{&}.e-popup,
  .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-small-list-font-size;
      }
    }
  }

  .e-content-placeholder.e-ddl.e-placeholder-ddl,
  .e-content-placeholder.e-autocomplete.e-placeholder-autocomplete,
  .e-content-placeholder.e-combobox.e-placeholder-combobox {
    background-size: 300px 33px;
    min-height: $ddl-content-nim-height;
  }

  .e-ddl.e-popup.e-resize .e-resizer-right {
    bottom: $ddl-zero-margin-padding;
    right: $ddl-zero-margin-padding;
    cursor: nwse-resize;
    height: $ddl-popup-resize-height;
    position: absolute;
    width: $ddl-popup-resize-width;
  }

  .e-ddl.e-popup.e-resize .e-resizer-right {
    @if $skin-name == 'bootstrap-dark' or $skin-name == 'material-dark' or $skin-name == 'tailwind-dark' or $skin-name == 'material3-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'fluent-dark'  or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast'  {
      background: transparent;
      color: rgb(221, 218, 218);
    }
  }
  .e-ddl.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
  .e-ddl.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    @if $skin-name =='fabric' or $skin-name =='bootstrap' or $skin-name =='bootstrap4' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5.3' or $skin-name =='highcontrast' {
      border-color: $ddl-box-border-color;
    }

    @if $skin-name =='bootstrap' or $skin-name =='bootstrap4' {
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    @if $skin-name =='bootstrap5' or $skin-name =='bootstrap5.3' {
      box-shadow: none;
    }
  }
}

@include export-module('dropdownlist-theme') {
  #{&}.e-popup {
    border-color: $ddl-default-border-color;
  }

  .e-float-input.e-input-group.e-ddl.e-control.e-icon-anim > .e-float-text,
  .e-float-input.e-input-focus.e-input-group.e-ddl.e-control.e-keyboard > .e-float-text {
    color: $ddl-active-font-color;
  }

  .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
    border-color: transparent;
    @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'highcontrast' {
      background: none;
    }
  }
}

@include export-module('dropdownlist-bootstrap-icons') {
  .e-ddl .e-search-icon::before {
    content: '\e993';
  }

  .e-ddl .e-back-icon::before {
    content: '\e94b';
  }

  .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
    content: '\e969';
    font-family: 'e-icons';
  }

  .e-ddl.e-popup.e-resize .e-icons.e-resizer-right::before {
    content: '\eb08';
  }
}

@include export-module('dropdownlist-bigger') {

  .e-bigger .e-input-group.e-ddl {
    #{if(&, '&', '*')} .e-input-filter,
    #{if(&, '&', '*')} .e-input-filter:focus {
      margin-left: $ddl-bgr-input-filter-margin-left;
    }
  }

  .e-bigger .e-ddl#{&}.e-popup {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-list-font-size;
      }
    }

    #{if(&, '&', '*')} .e-input-group {
      @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark' and $skin-name != 'Material3') {
        padding: $ddl-input-popup-padding;
      }
      @if ($skin-name == 'Material3') {
        margin-top: $ddl-input-popup-mat3-padding;
      }
    }
  }

  .e-bigger.e-ddl#{&}.e-popup {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-list-font-size;
      }
    }

    #{if(&, '&', '*')} .e-input-group {
      @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind' and $skin-name != 'FluentUI' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap4-dark') {
        padding: $ddl-input-popup-padding;
      }
    }
  }

  .e-bigger.e-small .e-ddl#{&}.e-popup,
  .e-bigger .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-small-list-font-size;
      }
    }
  }

  .e-bigger.e-small.e-ddl#{&}.e-popup,
  .e-bigger .e-input-group.e-ddl.e-small {
    #{if(&, '&', '*')} .e-list-item {
      font-size: $ddl-bigger-small-list-font-size;
    }

    #{if(&, '&', '*')} .e-list-group-item {
      @if $skin-name != 'tailwind' {
        font-size: $ddl-bigger-small-list-font-size;
      }
    }
  }

  .e-bigger .e-content-placeholder.e-ddl.e-placeholder-ddl,
  .e-bigger.e-content-placeholder.e-ddl.e-placeholder-ddl,
  .e-bigger .e-content-placeholder.e-autocomplete.e-placeholder-autocomplete,
  .e-bigger.e-content-placeholder.e-autocomplete.e-placeholder-autocomplete,
  .e-bigger .e-content-placeholder.e-combobox.e-placeholder-combobox,
  .e-bigger.e-content-placeholder.e-combobox.e-placeholder-combobox {
    background-size: 300px 40px;
    min-height: $ddl-bgr-content-min-height;
  }

  .e-bigger .e-ddl#{&}.e-popup,
  .e-bigger.e-ddl#{&}.e-popup {
    @if $skin-name == 'tailwind' {
      border-radius: 8px;
      margin-top: 8px;
    }
  }

  .e-bigger.e-small .e-ddl#{&}.e-popup,
  .e-small.e-bigger.e-ddl#{&}.e-popup {
    @if $skin-name == 'tailwind' {
      border-radius: 8px;
      margin-top: 6px;
    }
  }

  .e-bigger #{&}.e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $skin-name == 'tailwind' {
      border-color: $ddl-default-border-color;
    }
  }

  .e-bigger #{&}.e-popup.e-ddl-device-filter {
    @if $skin-name == 'tailwind' {
      margin-top: 0;
    }
  }

  .e-bigger .e-ddl-device .e-input-group,
  .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $skin-name == 'tailwind' {
      background: $flyout-bg-color;
      border-width: 0;
      box-shadow: none;
      margin-bottom: 0;
    }
  }

  .e-bigger .e-ddl-device .e-input-group .e-back-icon,
  .e-bigger .e-ddl-device .e-input-group input.e-input,
  .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
    @if $skin-name == 'tailwind' {
      background-color: $flyout-bg-color;
    }
  }

  @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' {
    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: 0;
    }

    .e-bigger #{&}.e-popup.e-ddl {
      @at-root {
        #{if(&, '&', '*')} .e-list-item,
        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: 15px;
          line-height: 40px;
          padding-left: 0;
          text-indent: 24px;
        }

        #{if(&, '&', '*')} .e-dd-group .e-list-item {
          padding-left: 4px;
        }

        #{if(&, '&', '*')} .e-input-group {
          padding: $ddl-input-popup-padding;
        }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          height: 38px;
        }
      }
    }
  }

  @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
    .e-bigger #{&}.e-popup.e-ddl .e-dropdownbase {
      min-height: 40px;
    }

    .e-bigger.e-small .e-ddl#{&}.e-popup {
      @at-root {
        #{if(&, '&', '*')} .e-list-item,
        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: 14px;
          line-height: 34px;
          padding-left: 0;
          text-indent: 16px;
        }

        #{if(&, '&', '*')} .e-dd-group .e-list-item {
          padding-left: 4px;
        }

        #{if(&, '&', '*')} .e-input-group {
          padding: $ddl-input-popup-padding;
        }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          height: 30px;
        }
      }
    }

    .e-bigger.e-small #{&}.e-popup.e-ddl .e-dropdownbase {
      min-height: 34px;
    }
  }

  .e-small.e-bigger .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon,
  .e-small.e-bigger.e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
    @if $skin-name == 'bootstrap4' {
      font-size: 12px;
    }
  }

  .e-bigger .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon,
  .e-bigger.e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
    @if $skin-name == 'bootstrap4' {
      font-size: 14px;
    }
  }

  @if $skin-name == 'bootstrap4' {
    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: 0;
    }

    .e-bigger #{&}.e-popup.e-ddl {
      @at-root {
        #{if(&, '&', '*')} .e-list-item {
          font-size: 16px;
          line-height: 32px;
          padding-left: 0;
          text-indent: 24px;
        }

        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: 14px;
          line-height: 32px;
          padding-left: 0;
          text-indent: 24px;
        }

        #{if(&, '&', '*')} .e-dd-group .e-list-item {
          padding-left: 4px;
        }

        #{if(&, '&', '*')} .e-input-group {
          padding: $ddl-input-popup-padding;
        }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          font-size: 16px;
          height: 36px;
        }
      }
    }

    .e-bigger #{&}.e-popup.e-ddl .e-dropdownbase {
      min-height: 40px;
    }
  }

  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    .e-bigger .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
      font-size: $text-base;
    }

    .e-bigger.e-small .e-ddl#{&}.e-popup {
      @at-root {
        #{if(&, '&', '*')} .e-list-item,
        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: $text-sm;
          line-height: $ddl-bgr-small-popup-line-height;
          padding-left: $ddl-zero-margin-padding;
          text-indent: $ddl-bgr-small-popup-text-indent;
        }

        #{if(&, '&', '*')} .e-dd-group .e-list-item {
          padding-left: $ddl-bgr-group-list-item-padding-left;
        }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          height: $ddl-input-group-height;
        }
      }
    }

    .e-bigger.e-small #{&}.e-popup.e-ddl .e-dropdownbase {
      min-height: 34px;
    }

    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: $ddl-zero-margin-padding;
    }

    .e-bigger #{&}.e-popup.e-ddl {
      @at-root {
        #{if(&, '&', '*')} .e-list-item {
          font-size: $text-base;
          line-height: $ddl-bigger-popup-ddl-line-height;
          padding-left: $ddl-zero-margin-padding;
          text-indent: $ddl-bgr-small-popup-text-indent;
        }

        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: $text-sm;
          line-height: $ddl-bigger-popup-ddl-line-height;
          padding-left: $ddl-zero-margin-padding;
          text-indent: $ddl-bgr-small-popup-text-indent;
        }

        #{if(&, '&', '*')} .e-dd-group .e-list-item {
          padding-left: $ddl-zero-margin-padding;
        }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          font-size: $text-base;
          height: $ddl-bigger-popup-ddl-boot-height;
        }
      }
    }

    .e-bigger #{&}.e-popup.e-ddl .e-dropdownbase {
      min-height: 40px;
    }
  }

  @if $skin-name == 'fabric-dark' or $skin-name == 'fabric' {
    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: 0;
    }
    .e-bigger .e-ddl#{&}.e-popup {
      @at-root {
        #{if(&, '&', '*')} .e-list-item,
        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: 15px;
          line-height: 45px;
          padding-left: 0;
          text-indent: 16px;
        }

        #{if(&, '&', '*')} .e-dd-group .e-list-item {
          padding-left: 4px;
        }

        #{if(&, '&', '*')} .e-input-group {
          padding: $ddl-input-popup-padding;
        }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          height: 38px;
        }
      }
    }
    .e-bigger.e-small .e-ddl#{&}.e-popup,
    .e-ddl#{&}.e-popup .e-bigger.e-small {
      @at-root {
        #{if(&, '&', '*')} .e-list-item,
        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: 14px;
          line-height: 40px;
          padding-left: 0;
          text-indent: 16px;
        }

        #{if(&, '&', '*')} .e-dd-group .e-list-item {
          padding-left: 4px;
        }

        #{if(&, '&', '*')} .e-input-group {
          padding: $ddl-input-zero-padding;
        }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          height: 34px;
        }
      }
    }
  }
  @if $skin-name == 'FluentUI' {
    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: 0;
    }

    .e-bigger #{&}.e-popup.e-ddl {
      @at-root {
        #{if(&, '&', '*')} .e-list-item {
          font-size: $text-base;
          line-height: 32px;
          padding-left: 0;
          text-indent: 16px;
        }

        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: $text-sm;
          line-height: 32px;
          padding-left: 0;
          text-indent: 16px;
        }
      }
    }

    .e-bigger #{&}.e-popup.e-ddl .e-dropdownbase {
      min-height: 40px;
    }
    .e-bigger .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
      font-size: $text-base;
    }

    .e-bigger.e-small .e-ddl#{&}.e-popup {
      @at-root {
        #{if(&, '&', '*')} .e-list-item,
        #{if(&, '&', '*')} .e-list-group-item,
        #{if(&, '&', '*')} .e-fixed-head {
          font-size: $text-sm;
          line-height: 34px;
          padding-left: 0;
          text-indent: 16px;
        }

        // #{if(&, '&', '*')} .e-dd-group .e-list-item {
        //   padding-left: 4px;
        // }

        #{if(&, '&', '*')} .e-input-group input,
        #{if(&, '&', '*')} .e-input-group input.e-input {
          height: 30px;
        }
      }
    }

    .e-bigger.e-small #{&}.e-popup.e-ddl .e-dropdownbase {
      min-height: 34px;
    }
  }
  @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
    .e-bigger .e-ddl.e-popup .e-input-group .e-clear-icon {
      height: 36px;
    }
    .e-ddl#{&} {
      #{if(&, '&', '*')}.e-popup {
        .e-bigger #{if(&, '&', '*')} {
          #{if(&, '&', '*')}.e-ddl-device.e-ddl-device-filter {
            margin-top: 0;
          }
          #{if(&, '&', '*')} .e-list-item,
          #{if(&, '&', '*')} .e-list-group-item,
          #{if(&, '&', '*')} .e-fixed-head {
            font-size: 15px;
            line-height: 45px;
            padding-left: 0;
            text-indent: 16px;
          }

          #{if(&, '&', '*')} .e-dd-group {
            #{if(&, '&', '*')} .e-list-item {
              padding-left: 4px;
            }
          }

          #{if(&, '&', '*')} .e-input-group {
            padding: $ddl-input-popup-padding;
          }

          #{if(&, '&', '*')} .e-input-group {
            #{if(&, '&', '*')} input {
              height: 46px;
            }
          }
        }

        .e-bigger.e-small #{if(&, '&', '*')} {
          #{if(&, '&', '*')} .e-list-item,
          #{if(&, '&', '*')} .e-list-group-item,
          #{if(&, '&', '*')} .e-fixed-head {
            font-size: 14px;
            line-height: 40px;
            padding-left: 0;
            text-indent: 16px;
          }

          #{if(&, '&', '*')} .e-dd-group {
            #{if(&, '&', '*')} .e-list-item {
              padding-left: 4px;
            }
          }

          #{if(&, '&', '*')} .e-input-group {
            padding: $ddl-input-zero-padding;
          }

          #{if(&, '&', '*')} .e-input-group {
            #{if(&, '&', '*')} input {
              height: 34px;
            }
          }
        }
      }
    }
  }
  @if $skin-name == 'material-dark' {
    .e-bigger #{&}.e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
      border-color: $ddl-default-border-color;
    }

    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: 0;
    }

    .e-bigger .e-ddl-device .e-input-group,
    .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
      background: $grey-100;
      border-width: 0;
      box-shadow: none;
      margin-bottom: 0;
    }

    .e-bigger .e-ddl-device .e-input-group .e-back-icon,
    .e-bigger .e-ddl-device .e-input-group input.e-input,
    .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
      background-color: $grey-100;
    }
    .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
    .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
      min-height: $ddl-bgr-popup-clear-min-height;
      min-width: $ddl-bgr-popup-clear-min-width;
    }

    .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
    .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
      padding: $ddl-bigger-filter-parent-padding;
    }
  }
  @if $skin-name == 'material' {
    .e-bigger #{&}.e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
      border-color: $ddl-default-border-color;
    }

    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: 0;
    }

    .e-bigger .e-ddl-device .e-input-group,
    .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
      background: $grey-100;
      border-width: 0;
      box-shadow: none;
      margin-bottom: 0;
    }

    .e-bigger .e-ddl-device .e-input-group .e-back-icon,
    .e-bigger .e-ddl-device .e-input-group input.e-input,
    .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
      background-color: $grey-100;
    }
    .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
    .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
      min-height: $ddl-bgr-popup-clear-min-height;
      min-width: $ddl-bgr-popup-clear-min-width;
    }

    .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
    .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
      padding: $ddl-bigger-filter-parent-padding;
    }
    .e-bigger.e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
    .e-bigger.e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
    .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
    .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
    .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
    .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
    #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
      min-height: $ddl-bgr-small-popup-clear-min-height;
      min-width: $ddl-bgr-small-popup-clear-min-width;
    }

    .e-bigger.e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
    .e-bigger.e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
    .e-bigger #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
    .e-bigger#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
    .e-small #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
    .e-small#{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
    #{&}.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
      padding: $ddl-bigger-small-filtr-parent;
    }
  }
  @if $skin-name == 'tailwind' {
    .e-bigger .e-ddl#{&}.e-popup,
    .e-bigger.e-ddl#{&}.e-popup {
      border-radius: 6px;
      margin-top: 8px;
    }

    .e-bigger.e-small .e-ddl#{&}.e-popup,
    .e-small.e-bigger.e-ddl#{&}.e-popup {
      border-radius: 4px;
      margin-top: 6px;
    }
    .e-bigger #{&}.e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
      border-color: $ddl-default-border-color;
    }

    .e-bigger #{&}.e-popup.e-ddl-device-filter {
      margin-top: 0;
    }

    .e-bigger .e-ddl-device .e-input-group,
    .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
      background: $flyout-bg-color;
      border-width: 0;
      box-shadow: none;
      margin-bottom: 0;
    }

    .e-bigger .e-ddl-device .e-input-group .e-back-icon,
    .e-bigger .e-ddl-device .e-input-group input.e-input,
    .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
      background-color: $flyout-bg-color;
    }
  }
}

$zero-value: 0 !default;
$one-value: 1px !default;
$input-child-padding-bottom: $zero-value !default;
$input-child-small-bigger-padding-bottom: $zero-value !default;
$input-child-small-padding-bottom: $zero-value !default;
$input-child-bigger-padding-bottom: $zero-value !default;
$input-group-full-border: $border-size $border-type !default;
$input-child-small-bigger-padding-top: $zero-value !default;
$input-child-small-padding-top: $zero-value !default;
$input-child-padding-top: $zero-value !default;
$input-child-bigger-padding-top: $zero-value !default;

//input
$input-bg-color: $grey-base !default;
$input-box-border-focus: $brand-primary !default;
$input-success-color: $brand-success-dark !default;
$input-warning-color: $brand-warning-dark !default;
$input-error-color: $brand-danger-dark !default;
$input-disable-bg-color: $grey-light !default;
$input-disable-font-color: $grey-dd !default;
$input-box-border-color: $grey-lighter !default;
$input-font-color: $grey-dark-font !default;
$input-icon-font-color: $grey-dark-font !default;
$input-clear-icon-color: $grey-dark-font !default;
$input-clear-icon-hover-color: $grey-light-font !default;
$input-error-color: $brand-danger-dark !default;
$input-accent: $brand-primary !default;
$input-placeholder: $grey-lighter !default;
$input-active-border-color: $input-box-border-focus !default;
$input-group-active-border-color: transparent !default;
$input-disable-border-color: $grey-99 !default;
$input-disabled-group-bg-color: $grey-light !default;
$input-group-pressed-bg: $grey-dark !default;
$input-hover-bg-color:  $grey !default;
$input-active-accent-color: $grey-dark !default;
$input-group-disabled-color: $grey-8c !default;
$input-group-hovered-color: $grey-dark-font !default;
$input-header-font-color: $grey-99 !default;
$float-label-font-color: $grey-dark-font !default;
$float-label-disbale-font-color: $input-disable-font-color !default;
$input-group-full-border-color: $input-box-border-color !default;
$input-group-success-color: $input-success-color !default;
$input-group-warning-color: $input-warning-color !default;
$input-group-error-color: $input-error-color !default;
$input-icon-shadow: inset 0 4px 5px rgba($grey-base, .35) !default;
$input-border-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-box-border-focus, 10%) !default;
$input-error-border-shadow:  inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-error-color, .6) !default;
$input-success-border-shadow:   inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-success-color, .6) !default;
$input-warning-border-shadow:   inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-warning-color, .6) !default;

//endinput
//default
$textarea-padding: 4px 12px 4px 12px !default;
$textarea-bigger-padding: 6px 14px 6px 14px !default;
$textarea-small-padding: 4px 10px 4px 10px !default;
$textarea-bigger-small-padding: 4px 12px 4px 12px !default;
$textarea-min-height: 32px !default;
$textarea-bigger-min-height: 36px !default;
$textarea-bigger-small-min-height: 32px !default;
$textarea-small-min-height: 26px !default;
$input-group-child-border-width: $zero-value !default;
$input-float-font-weight: bold !default;
$input-padding: $zero-value !default;
$float-input-padding: $zero-value !default;
$float-input-wrap-padding-top: $zero-value !default;
$input-padding-bottom: $zero-value !default;
$input-focus-padding-bottom: $zero-value !default;
$input-clear-icon-padding: $zero-value !default;
$input-clear-icon-position: center !default;
$input-bigger-padding: $zero-value !default;
$float-input-bigger-padding: $zero-value !default;
$float-input-bigger-wrap-padding-top: $zero-value !default;
$input-bigger-padding-bottom: $zero-value !default;
$input-focus-bigger-padding-bottom: $zero-value !default;
$input-child-padding: $zero-value !default;
$input-bigger-child-padding: $zero-value !default;
$input-margin-bottom: $zero-value !default;
$input-bigger-margin-bottom: $zero-value !default;
$input-small-margin-bottom: $zero-value !default;
$input-small-bigger-margin-bottom: $zero-value !default;
$input-small-padding: $zero-value !default;
$float-input-small-padding: $zero-value !default;
$float-input-small-wrap-padding-top: $zero-value !default;
$input-small-padding-bottom: $zero-value !default;
$input-focus-small-padding-bottom: $zero-value !default;
$input-bigger-small-padding: $zero-value !default;
$float-input-bigger-small-padding: $zero-value !default;
$float-input-bigger-small-wrap-padding-top: $zero-value !default;
$input-bigger-small-padding-bottom: $zero-value !default;
$input-focus-bigger-small-padding-bottom: $zero-value !default;
$input-bigger-small-child-padding: $zero-value !default;
$input-small-child-padding: $zero-value !default;
$input-border: $zero-value $border-type !default;
$float-input-border: $zero-value $border-type !default;
$input-disable-border-type: solid !default;
$input-border-left-width: 1px !default;
$input-group-active-border: transparent !default;
$input-group-border: 1px $border-type !default;
$input-group-border-width: $zero-value !default;
$input-group-border-radius: $zero-value !default;
$input-valid-group-border-width: 2px !default;
$input-child-margin-bottom: $zero-value !default;
$input-child-margin-top: $zero-value !default;
$float-input-child-margin-top: $zero-value !default;
$input-child-margin-right: $zero-value !default;
$input-child-small-bigger-margin-bottom: $zero-value !default;
$input-child-small-bigger-margin-top: $zero-value !default;
$float-input-child-small-bigger-margin-top: $zero-value !default;
$input-child-small-bigger-margin-right: $zero-value !default;
$input-child-small-margin-bottom: $zero-value !default;
$input-child-small-margin-top: $zero-value !default;
$float-input-child-small-margin-top: $zero-value !default;
$input-child-small-margin-right: $zero-value !default;
$input-child-bigger-margin-bottom: $zero-value !default;
$input-child-bigger-margin-top: $zero-value !default;
$float-input-child-bigger-margin-top: $zero-value !default;
$input-child-bigger-margin-right:  $zero-value !default;
$input-disable-group-border-width: $one-value !default;
$input-opacity: 1 !default;
$input-opacity-filter: 100 !default;
$input-group-border-width-focus: $one-value !default;
$input-group-border-type-focus: $border-type !default;
$input-group-border-color-focus: $input-box-border-focus !default;
$input-group-border-color-hover: $grey-cc !default;
$input-group-border-width-hover: 1px !default;
$input-group-border-right-focus: transparent !default;
$input-group-border-left-focus: transparent !default;
$input-group-full-border-width: $one-value !default;
$input-valid-border-bottom-width: 2px !default;
$input-group-pressed-color: $grey-light-font !default;
$input-select-font-color: $active-font-color !default;
$input-right-border-width: $zero-value !default;
$float-label-font-size: 12px !default;
$float-label-bigger-font-size: 13px !default;
$float-label-small-font-size: 11px !default;
$float-label-bigger-small-font-size: 12px !default;
$float-placeholder-font-size: 14px !default;
$float-placeholder-bigger-font-size: 15px !default;
$float-placeholder-small-font-size: 13px !default;
$float-placeholder-bigger-small-font-size: 14px !default;
$input-border-size: 2px !default;
$input-normal-height: 34px - $input-border-size !default;
$input-bigger-height: 40px - $input-border-size !default;
$input-small-height: 28px - $input-border-size !default;
$input-bigger-small-height: 36px - $input-border-size !default;
$float-input-normal-height: 34px !default;
$float-input-bigger-height: 40px !default;
$float-input-small-height: 28px !default;
$float-input-bigger-small-height: 36px !default;
$input-full-height: 100% !default;
$textarea-normal-height: auto !default;
$textarea-bigger-height: auto !default;
$textarea-small-height: auto !default;
$textarea-bigger-small-height: auto !default;
$textarea-full-height: 100% !default;
$input-icon-font-size: 12px !default;
$input-bigger-icon-font-size: 14px !default;
$input-small-icon-font-size: 10px !default;
$input-bigger-small-icon-font-size: 12px !default;
$input-inner-wrap-margin-left: $zero-value !default;
$input-clear-icon-padding-bottom: $zero-value !default;
$input-clear-icon-padding-right: $zero-value !default;
$input-clear-icon-padding-left: $input-clear-icon-padding-right !default;
$input-clear-icon-padding-top: $zero-value !default;
$float-input-clear-icon-padding-top: $zero-value !default;
$input-clear-icon-small-bigger-padding-bottom: $zero-value !default;
$input-clear-icon-small-bigger-padding-right: $zero-value !default;
$input-clear-icon-small-bigger-padding-top: $zero-value !default;
$float-input-clear-icon-small-bigger-padding-top: $zero-value !default;
$input-clear-icon-small-padding-bottom: $zero-value !default;
$input-clear-icon-small-padding-right: $zero-value !default;
$input-clear-icon-small-padding-top: $zero-value !default;
$float-input-clear-icon-small-padding-top: $zero-value !default;
$input-clear-icon-bigger-padding-bottom: $zero-value !default;
$input-clear-icon-bigger-padding-right: $zero-value !default;
$input-clear-icon-bigger-padding-top: $zero-value !default;
$float-input-clear-icon-bigger-padding-top: $zero-value !default;
$input-clear-icon-min-height: $zero-value !default;
$input-clear-icon-min-width: 32px !default;
$input-bigger-clear-icon-min-height: $zero-value !default;
$input-bigger-clear-icon-min-width: 38px !default;
$input-bigger-small-clear-icon-min-height: $zero-value !default;
$input-bigger-small-clear-icon-min-width: 34px !default;
$input-small-clear-icon-min-width: 26px !default;
$input-small-clear-icon-min-height: $zero-value !default;
$input-left-icon-font-size: $zero-value !default;
$input-bigger-left-icon-font-size: $zero-value !default;
$input-small-left-icon-font-size: $zero-value !default;
$input-bigger-small-left-icon-font-size: $zero-value !default;
$input-left-child-min-height: $zero-value !default;
$input-left-child-min-width: $zero-value !default;
$input-bigger-left-child-min-height: $zero-value !default;
$input-bigger-left-child-min-width: $zero-value !default;
$input-small-left-child-min-height: $zero-value !default;
$input-small-left-child-min-width: $zero-value !default;
$input-bigger-small-left-child-min-height: $zero-value !default;
$input-bigger-small-left-child-min-width: $zero-value !default;
$input-icon-inner-width: $zero-value !default;
$input-icon-inner-height: $zero-value !default;
$input-clear-icon-font: '\e96c' !default;

//enddefault
//dimensions
$input-skin-name: 'bootstrap' !default;
$input-text-indent: 12px !default;
$input-bigger-text-indent: 14px !default;
$input-small-text-indent: 10px !default;
$input-small-bigger-text-indent: 12px !default;
$input-font-size: 14px !default;
$input-bigger-font-size: 15px !default;
$input-small-font-size: 13px !default;
$input-bigger-small-font-size: 14px !default;
$input-box-border-radius: 4px !default;
$input-group-icon-border-radius: 3px !default;
$float-label-padding: 10px !default;
$input-clear-icon: 12px !default;
$input-bigger-clear-icon: 12px !default;
$input-small-clear-icon: 10px !default;
$input-bigger-small-clear-icon: 12px !default;
$input-child-min-height: 32px !default;
$input-child-min-width: 32px !default;
$input-bigger-child-min-height: 38px !default;
$input-bigger-child-min-width: 38px !default;
$input-margin-top: 24px !default;
$input-bigger-margin-top: 24px !default;
$input-small-margin-top: 20px !default;
$input-small-bigger-margin-top: 21px !default;
$input-bigger-small-child-min-height: 34px !default;
$input-bigger-small-child-min-width: 34px !default;
$input-small-child-min-height: 26px !default;
$input-small-child-min-width: 26px !default;
$input-font-family: $font-family !default;
$input-font-style: normal !default;
$input-font-normal: normal !default;
$input-box-border-width: 1px !default;
$float-input-border-width: 1px !default;
$input-focus-border-width: 1px !default;
$input-readonly-bg-color: none !default;
$float-label-rtl-value: -7px !default;

$input-bgr-float-control-line-height: 1.5 !default;
$input-zero-padding-margin: 0 !default;
$input-bgr-filled-control-icon-padding: 0 8px 0 0 !default;
$input-bgr-filled-group-icon-padding: 0 0 0 8px !default;
$input-bgr-small-filled-float-group-icon-padding: 0 !default;
$input-bgr-small-filled-float-group-icon-margin: 9px 12px 9px 0 !default;
$input-bgr-filled-grp-icon-padding: 0 0 0 8px !default;
$input-bgr-small-filled-wrap-margin-left: 8px !default;
$input-bgr-small-rtl-wrap-margin-right: 8px !default;
$input-grp-font-weight: normal !default;
$input-grup-icon-line-height: 1 !default;
$input-textarea-line-height: 1.5 !default;
$input-filled-float-text-line-height: 1.15 !default;
$input-small-filled-group-icon-padding: 0 0 0 4px !default;
$input-rtl-small-filled-group-icon-padding: 0 4px 0 0 !default;
$input-filled-small-float-group-icon-padding: 0 !default;
$input-filled-small-float-group-icon-margin: 9px 12px 9px 0 !default;
$small-filled-input-padding: 0 0 0 4px !default;
$filled-float-input-clear-icon-margin: 2px !default;
$filled-float-input-wrap-margin-left: 8px !default;
$filled-float-input-wrap-margin-right: 8px !default;
$small-filled-float-input-wrap-margin-left: 4px !default;
$small-filled-float-input-wrap-margin-right: 4px !default;
$input-letter-spacing: 0 !default;

$input-bgr-float-line-height: 1.4 !default;
$input-group-line-height: 1.4 !default;
$input-group-float-small-line-height: 1.35 !default;
$input-bigger-textarea-line-height: 1.2 !default;
$float-input-before-height: 2px !default;
$input-bgr-float-min-height: 28px !default;
$input-bgr-small-float-min-height: 26px !default;
$filled-input-clear-icon-height: 32px !default;
$input-auto-width: auto !default;
$input-zero-width: 0 !default;
$input-half-position: 50% !default;
$input-full-position-width: 100% !default;
$input-float-label-top: -11px !default;
$float-input-focus-text-top: 17px !default;
$float-input-small-text-top: -7px !default;
$float-placeholder-small-font-top: 15px !default;
$float-input-group-line-bottom: -1px !default;
$float-bigger-input-text-top: -8px !default;
$float-bigger-label-font-top: -9px !default;
$float-label-bgr-top: 14px !default;
$float-bgr-small-input-top: 16px !default;
$bigger-input-float-label-top: 14px !default;
$bigger-small-textarea-text-top: 16px !default;
$float-input-bgr-text-top: 18px !default;
$float-label-bgr-input-top: 14px !default;
$bgr-small-float-label-autofill-top: 16px !default;
$input-group-control-border-radius: 4px !default;
$rtl-input-border-left-width: 1px !default;
$float-textarea-small-text-top: 16px !default;
$float-input-wrapper-top: 15px !default;
$small-float-input-label-top: 17px !default;
$float-inherit-line-height: inherit;
$float-auto-height: auto;
$input-border-width: 1px !default;

@mixin input-sizing {
  box-sizing: border-box;
}

@mixin input-height ($height) {
  height: $height;
}

@mixin input-state-color ($color) {
  border-color: $color;
}

@mixin input-selection {
  background: $brand-primary;
  color: $brand-primary-font;
}
/* stylelint-disable property-no-vendor-prefix */
@mixin float-label-alignment {
  -moz-transform: translate(-0%, -50%);
  -ms-transform: translate(-0%, -50%);
  -o-transform: translate(-0%, -50%);
  -webkit-transform: translate(-0%, -50%);
  box-sizing: border-box;
  left: 0%;
  top: 50%;
  transform: translate(-0%, -50%);
  user-select: none;
  width: 100%;
}

@mixin textarea-float-label-alignment {
  -moz-transform: translate(-0%, -50%);
  -ms-transform: translate(-0%, -50%);
  -o-transform: translate(-0%, -50%);
  -webkit-transform: translate(-0%, -50%);
  box-sizing: border-box;
  left: 0%;
  top: 15px;
  transform: translate(-0%, -50%);
  width: 100%;
}

@mixin input-group-animation {
  content: '';
}

@mixin input-group-animation-left {
  content: '';
}

@mixin input-group-animation-width {
  content: '';
}

@mixin input-group-animation-right {
  content: '';
}

@mixin input-group-animation-bg {
  content: '';
}

@mixin input-group-hover-bg {
  content: '';
}

@mixin input-group-success-animation-bg {
  content: '';
}

@mixin input-group-warning-animation-bg {
  content: '';
}

@mixin input-group-error-animation-bg {
  content: '';
}

@mixin input-ripple-parent {
  content: '';
}

@mixin input-ripple-style {
  content: '';
}

@mixin input-ripple-animation {
  content: '';
}

@include export-module('input-layout') {

  /*! input layout */
  .e-input-group,
  .e-input-group.e-control-wrapper {
    display: table;
    line-height: $input-group-line-height;
    margin-bottom: $input-margin-bottom;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  textarea.e-input#{$css},
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input {
    border: $input-border;
    border-width: $input-box-border-width;
    height: $float-auto-height;
    line-height: $float-inherit-line-height;
    margin: $input-zero-padding-margin;
    margin-bottom: $input-margin-bottom;
    outline: none;
    padding: $input-padding;
    text-indent: $input-text-indent;
    width: $input-full-position-width;
    letter-spacing: $input-letter-spacing;
  }

  input.e-input#{$css},
  textarea.e-input#{$css},
  .e-input-group,
  .e-input-group.e-control-wrapper,
  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled {
    font-family: $input-font-family;
    font-size: $input-font-size;
    font-weight: $input-grp-font-weight;
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
      font-feature-settings: 'calt' 0;
    }
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-small .e-input,
  .e-input-group.e-small.e-control-wrapper .e-input,
  .e-small .e-input-group .e-input,
  .e-small .e-input-group.e-control-wrapper .e-input {
    font: inherit;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper input,
  .e-float-input input,
  .e-float-input.e-input-group input,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group input,
  input.e-input#{$css}:focus,
  .e-input-group input.e-input:focus,
  .e-input-group input:focus,
  .e-input-group.e-control-wrapper input.e-input:focus,
  .e-input-group.e-control-wrapper input:focus,
  .e-float-input input:focus,
  .e-float-input.e-input-group input:focus,
  .e-float-input.e-control-wrapper input:focus,
  .e-float-input.e-control-wrapper.e-input-group input:focus,
  .e-input-group.e-input-focus input.e-input,
  .e-input-group.e-input-focus input,
  .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-input-focus input,
  .e-float-input.e-input-focus input,
  .e-float-input.e-input-group.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper input,
  .e-float-input input,
  .e-float-input.e-input-group input,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group input,
  .e-input-group,
  .e-input-group.e-control-wrapper,
  .e-float-input,
  .e-float-input.e-control-wrapper,
  .e-input#{$css}.e-corner,
  .e-input-group.e-corner.e-rtl input.e-input:only-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl input.e-input:only-child,
  .e-input-group.e-input-focus.e-corner,
  .e-input-group.e-control-wrapper.e-input-focus.e-corner,
  textarea.e-input#{$css},
  .e-input-group textarea.e-input,
  .e-input-group textarea,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper textarea,
  .e-float-input textarea,
  .e-float-input.e-input-group textarea,
  .e-float-input.e-control-wrapper textarea,
  .e-float-input.e-control-wrapper.e-input-group textarea {
    border-radius: $input-group-control-border-radius;
  }

  .e-input.e-small,
  .e-input-group.e-small,
  .e-input-group.e-control-wrapper.e-small,
  .e-input-group.e-small .e-input,
  .e-input-group.e-small input,
  .e-input-group.e-control-wrapper.e-small .e-input,
  .e-input-group.e-control-wrapper.e-small input,
  .e-float-input.e-small input,
  .e-float-input.e-input-group.e-small input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-float-input.e-small,
  .e-float-input.e-control-wrapper.e-small,
  .e-small .e-input-group,
  .e-small .e-input-group.e-control-wrapper,
  .e-small .e-input-group .e-input,
  .e-small .e-input-group input,
  .e-small .e-input-group.e-control-wrapper .e-input,
  .e-small .e-input-group.e-control-wrapper input,
  .e-small .e-float-input input,
  .e-small .e-float-input.e-input-group input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-small .e-float-input.e-control-wrapper.e-input-group input,
  .e-small .e-float-input,
  .e-small .e-float-input.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-radius: $input-small-border-radius;
    }
  }

  .e-input#{$css}:focus {
    border-width: $input-focus-border-width;
    padding-bottom: $input-padding-bottom;
  }

  .e-input.e-small#{$css}:focus {
    border-width: $input-focus-border-width;
    padding-bottom: $input-small-padding-bottom;
  }

  .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      padding-bottom: $input-focus-padding-bottom;
    }
  }

  .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      padding-bottom: $input-focus-small-padding-bottom;
    }
  }

  .e-input-group input.e-input:focus,
  .e-input-group.e-control-wrapper input.e-input:focus,
  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-input-group.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-input-focus input.e-input {
    padding: $input-padding;
  }

  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper textarea.e-input:focus {
    padding: $textarea-padding;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    align-items: center;
    border: $input-border;
    border-width: $input-group-child-border-width;
    box-sizing: content-box;
    cursor: pointer;
    flex-direction: column;
    font-size: $input-icon-font-size;
    justify-content: center;
    line-height: $input-grup-icon-line-height;
    min-height: $input-child-min-height;
    min-width: $input-child-min-width;
    padding: $input-child-padding;
    text-align: center;
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border: 1px solid;
      border-bottom: $zero-value;
      border-collapse: collapse;
      border-top: $zero-value;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border-radius: $input-child-icon-border-radius;
    }
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-collapse: collapse;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-right-width: $zero-value;
    }
  }

  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover,
  .e-input-group:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-input-group.e-small:not(:disabled) .e-input-group-icon:first-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small:not(:disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-bigger):not(.e-float-icon-left) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-bigger):not(.e-float-icon-left) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-float-input.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group .e-input-group-icon + .e-input-group-icon .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon,
  .e-rtl .e-input-group .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon,
  .e-input-group.e-rtl .e-input-group-icon + .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-left-width: $rtl-input-border-left-width;
      border-right-width: $zero-value;
    }
  }

  .e-input-group.e-rtl input ~ .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl input ~ .e-input-group-icon,
  .e-rtl .e-input-group input ~ .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-left-width: $zero-value;
      border-right: $input-border-width solid $input-box-border-color;
    }
  }

  .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group input ~ .e-input-group-icon + .e-input-group-icon,
  .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-left-width: $zero-value;
      border-right-width: $input-border-width;
    }
  }

  .e-input-group .e-input-group-icon + .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
      border-bottom-right-radius: $input-group-icon-border-radius;
      border-top-right-radius: $input-group-icon-border-radius;
    }
  }

  .e-input-group .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
      border-bottom-left-radius: $input-group-icon-border-radius;
      border-top-left-radius: $input-group-icon-border-radius;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-rtl .e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
      border-bottom-left-radius: $input-group-icon-border-radius;
      border-bottom-right-radius: $input-group-border-radius;
      border-top-left-radius: $input-group-icon-border-radius;
      border-top-right-radius: $input-group-border-radius;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child,
  .e-rtl .e-input-group .e-input-group-icon:first-child,
  .e-rtl .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-bottom-left-radius: $input-group-border-radius;
      border-bottom-right-radius: $input-group-icon-border-radius;
      border-top-left-radius: $input-group-border-radius;
      border-top-right-radius: $input-group-icon-border-radius;
    }
  }

  .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      font-size: $input-left-icon-font-size;
      margin: $input-zero-padding-margin;
      min-height: $input-left-child-min-height;
      min-width: $input-left-child-min-width;
      padding: $input-zero-padding-margin;
    }
  }

  .e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-small .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      font-size: $input-small-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-small-left-child-min-height;
      min-width: $input-small-left-child-min-width;
      padding: $zero-value;
    }
  }

  .e-input-group.e-float-icon-left:not(.e-disabled) > .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) > .e-input-group-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      background: transparent;
    }
  }

  .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      cursor: auto;
    }
  }

  .e-input#{$css}[disabled],
  .e-input-group .e-input[disabled],
  .e-input-group.e-control-wrapper .e-input#{$css}[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-disabled input,
  .e-input-group.e-disabled input.e-input,
  .e-input-group.e-disabled textarea,
  .e-input-group.e-disabled textarea.e-input,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled input,
  .e-input-group.e-control-wrapper.e-disabled input.e-input,
  .e-input-group.e-control-wrapper.e-disabled textarea,
  .e-input-group.e-control-wrapper.e-disabled textarea.e-input,
  .e-float-input.e-disabled input,
  .e-float-input.e-disabled textarea,
  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled input,
  .e-float-input.e-control-wrapper.e-disabled textarea,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled,
  .e-input-group.e-disabled span,
  .e-input-group.e-control-wrapper.e-disabled span,
  .e-input-group.e-disabled input.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper.e-disabled input.e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-disabled input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-disabled .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper.e-disabled .e-clear-icon.e-clear-icon-hide {
    cursor: not-allowed;
  }

  .e-input#{$css}[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled  {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-color: $input-disable-border-color;
      border-style: $input-disable-border-type;
    }
  }

  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom-style: $input-disable-border-type;
      border-width: $input-disable-group-border-width;
    }
  }

  .e-input#{$css}[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-float-input.e-disabled,
  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input.e-disabled input,
  .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled input,
  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-disabled textarea,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled textarea {
    filter: alpha(opacity=$input-opacity-filter);
    opacity: $input-opacity;
  }

  .e-input#{$css}.e-rtl,
  .e-input-group.e-rtl,
  .e-input-group.e-control-wrapper.e-rtl,
  .e-float-input.e-rtl,
  .e-float-input.e-control-wrapper.e-rtl {
    direction: rtl;
  }

  .e-input-group,
  .e-input-group.e-control-wrapper,
  .e-float-custom-tag.e-input-group,
  .e-float-custom-tag.e-input-group.e-control-wrapper,
  .e-input-custom-tag,
  .e-input-custom-tag.e-input-group,
  .e-input-custom-tag.e-input-group.e-control-wrapper {
    display: inline-flex;
    vertical-align: middle;
  }

  .e-float-input:not(.e-input-group),
  .e-float-input.e-control-wrapper:not(.e-input-group),
  .e-float-custom-tag,
  .e-float-custom-tag.e-control-wrapper {
    display: inline-block;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    display: flex;
  }

  .e-input-group .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:first-child {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind3' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
      border-left-width: $input-border-left-width;
    }
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    white-space: nowrap;
  }

  .e-input-group .e-input-group-icon:not(:last-child),
  .e-input-group.e-control-wrapper .e-input-group-icon:not(:last-child) {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'FluentUI') {
      border-right-width: $zero-value;
    }
  }

  .e-input + .e-input-group-icon,
  .e-input-group .e-input + .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input + .e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'FluentUI') {
      border-left-width: $zero-value;
    }
  }

  .e-input-group.e-corner .e-input:first-child,
  .e-input-group.e-corner .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-corner .e-input:first-child,
  .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:first-child {
    border-bottom-left-radius: $input-box-border-radius;
    border-top-left-radius: $input-box-border-radius;
  }

  .e-input-group.e-corner .e-input:last-child,
  .e-input-group.e-corner .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-corner .e-input:last-child,
  .e-input-group.e-control-wrapper.e-corner .e-input-group-icon:last-child {
    border-bottom-right-radius: $input-box-border-radius;
    border-top-right-radius: $input-box-border-radius;
  }

  .e-input-group.e-rtl .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:first-child  {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'FluentUI') {
      border-left-width: $zero-value;
      border-right-width: $input-border-left-width;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'tailwind3' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind') or $input-skin-name == 'highcontrast' {
      border-left-width: $input-border-left-width;
      border-right-width: $zero-value;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon:not(:last-child),
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:not(:last-child) {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind3' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI') {
      border-left-width: $input-border-left-width;
    }
  }

  .e-input-group.e-rtl:not(.e-disabled) .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:not(:last-child):hover {
    @if $input-skin-name == 'highcontrast' {
      border-width: $zero-value + px 1px $zero-value + px 1px;
    }
  }

  .e-input-group.e-rtl .e-input-group-icon + .e-input,
  .e-input-group.e-control-wrapper.e-rtl .e-input-group-icon + .e-input {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'FluentUI') {
      border-right-width: $zero-value;
    }
  }

  input.e-input.e-small#{$css},
  textarea.e-input.e-small#{$css},
  .e-small input.e-input#{$css},
  .e-small textarea.e-input#{$css},
  .e-input-group.e-small,
  .e-small .e-input-group,
  .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group.e-control-wrapper,
  .e-input-group.e-small.e-disabled,
  .e-small .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-input-group.e-control-wrapper.e-disabled {
    font-size: $input-small-font-size;
  }

  .e-input#{$css}.e-small,
  .e-input-group.e-small .e-input,
  .e-input-group.e-control-wrapper.e-small .e-input {
    line-height: inherit;
    padding: $input-small-padding;
  }

  .e-input-group.e-small .e-input:focus,
  .e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-input-group.e-small.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
    padding: $input-small-padding;
  }

  .e-input-group.e-small .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-input-group .e-input-group-icon,
  .e-small .e-input-group.e-control-wrapper .e-input-group-icon {
    font-size: $input-small-icon-font-size;
    min-height: $input-small-child-min-height;
    min-width: $input-small-child-min-width;
    padding: $input-small-child-padding;
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border-radius: $input-small-child-border-radius;
    }
  }

  .e-input-group.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px  1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-font-size;
    font-style: $input-font-style;
    font-weight: $input-grp-font-weight;
    left: $input-zero-padding-margin;
    overflow: hidden;
    padding-left: $float-label-padding;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: $input-float-label-top;
    transform: translate3d(0, 16px, 0) scale(1);
    transform-origin: left top;
    transition: .25s cubic-bezier(.25, .8, .25, 1);
    user-select: none;
    white-space: nowrap;
    width: $input-full-position-width;
    letter-spacing: $input-letter-spacing;
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    top: $input-float-label-top;
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @include float-label-alignment;
    font-style: $input-font-style;
  }

  .e-float-input.e-small label.e-float-text,
  .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $input-float-label-top;
    }
  }

  .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $input-float-label-top;
    }
  }

  .e-float-input input:focus ~ label.e-float-text,
  .e-float-input input:valid ~ label.e-float-text,
  .e-float-input input ~ label.e-label-top.e-float-text,
  .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $float-label-text-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fluent2' {
      padding: $input-zero-padding-margin;
      top: $float-label-text-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: $input-float-top-label-transform;
      @if $input-skin-name == 'tailwind3' {
        padding-left: $input-zero-padding-margin;
        left: $input-float-focus-label-left;
        top: $input-float-top-label-top;
      }
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input input ~ label.e-label-top.e-float-text,
  .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input label.e-float-text.e-label-top {
    @if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      transform: translate3d(-10px, -36px, 0) scale(1) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input input:focus ~ label.e-float-text,
  .e-small .e-float-input input:valid ~ label.e-float-text,
  .e-small .e-float-input input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input label.e-float-text.e-label-top {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $small-float-input-text-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -34px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -38px, 0) scale(1);
    }
  }

  .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input label.e-float-text.e-label-top {
    @if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      transform: translate3d(-10px, -36px, 0) scale(1) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input .e-input-in-wrap input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $small-float-input-text-top;
    }
  }

  .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-input-focus input-group-animation ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-input-small-label-top;
    }
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
      padding-right: $input-zero-padding-margin;
      top: $float-input-focus-text-top;
    }
    @if $input-skin-name == 'tailwind3' {
      padding-left: $input-zero-padding-margin;
      left: $input-float-focus-label-left;
    }
  }

  .e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $float-input-small-text-top;
    }
  }

  .e-float-input,
  .e-float-input.e-control-wrapper {
    line-height: $input-group-line-height;
    margin-bottom: $input-margin-bottom;
    margin-top: $input-margin-top;
    padding-top: $float-input-wrap-padding-top;
    position: relative;
    width: $input-full-position-width;
  }

  .e-float-input.e-small,
  .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper {
    line-height: $input-group-float-small-line-height;
    margin-bottom: $input-small-margin-bottom;
    margin-top: $input-small-margin-top;
    padding-top: $float-input-small-wrap-padding-top;
  }

  .e-input-group.e-small,
  .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group,
  .e-small .e-input-group.e-control-wrapper {
    line-height: normal;
  }

  .e-float-input.e-no-float-label,
  .e-float-input.e-small.e-no-float-label,
  .e-small .e-float-input.e-no-float-label,
  .e-float-input.e-control-wrapper.e-no-float-label,
  .e-float-input.e-control-wrapper.e-small.e-no-float-label,
  .e-small .e-float-input.e-control-wrapper.e-no-float-label {
    margin-top: $input-zero-padding-margin;
  }

  .e-float-input,
  .e-float-input.e-control-wrapper,
  .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-input-group.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-disabled {
    font-family: $input-font-family;
    font-size: $input-font-size;
    font-weight: $input-grp-font-weight;
  }

  .e-float-input input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper textarea {
    border: $float-input-border;
    border-width: $float-input-border-width;
    display: block;
    font: inherit;
    width: $input-full-position-width;
    letter-spacing: $input-letter-spacing;
  }

  .e-float-input input,
  .e-float-input.e-control-wrapper input {
    min-width: 0;
    padding: $float-input-padding;
  }

  .e-float-input input,
  .e-input-group input,
  .e-float-input.e-control-wrapper input,
  .e-input-group.e-control-wrapper input,
  .e-float-input textarea,
  .e-input-group textarea,
  .e-float-input.e-control-wrapper textarea,
  .e-input-group.e-control-wrapper textarea {
    text-indent: $input-text-indent;
  }

  .e-float-input.e-small.e-disabled,
  .e-small .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-control-wrapper.e-disabled,
  .e-float-input.e-small,
  .e-small .e-float-input,
  .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper {
    font-size: $input-small-font-size;
  }

  .e-float-input.e-small input,
  .e-float-input.e-control-wrapper.e-small input {
    font: inherit;
    line-height: $float-inherit-line-height;
    padding: $float-input-small-padding;
  }

  .e-float-input input:focus,
  .e-float-input.e-control-wrapper input:focus,
  .e-float-input textarea:focus,
  .e-float-input.e-control-wrapper textarea:focus,
  .e-float-input.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-focus input,
  .e-input-group.e-control-container.valid.modified,
  .e-input-group.e-control-container.invalid,
  .e-float-input.e-control-container.valid.modified,
  .e-float-input.e-control-container.invalid {
    outline: none;
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text {
    font-family: inherit;
  }

  .e-float-input input:valid ~ label.e-float-text,
  .e-float-input input:focus ~ label.e-float-text,
  .e-float-input input:valid ~ label.e-float-text.e-label-top,
  .e-float-input input ~ label.e-float-text.e-label-top,
  .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text.e-label-top,
  .e-float-input .e-input-in-wrap input ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper input:valid ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper input ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-float-text.e-label-top,
  .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
  .e-float-input textarea:valid ~ label.e-float-text,
  .e-float-input textarea:focus ~ label.e-float-text,
  .e-float-input textarea:valid ~ label.e-float-text.e-label-top,
  .e-float-input textarea ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-label-top {
    @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: $input-float-font-weight;
    }
    user-select: text;
  }

  .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $float-outline-icon-mat-left;
      width: $input-auto-width;
    }
  }

  .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $float-outline-icon-mat-left;
      width: $input-auto-width;
    }
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-weight: $input-grp-font-weight;
  }

  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    bottom: $input-zero-padding-margin;
    content: '';
    height: $float-input-before-height;
    position: absolute;
    transition: .2s ease;
    width: $input-zero-width;
  }

  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before {
    left: $input-half-position;
  }

  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    right: $input-half-position;
  }

  .e-float-input:not(.e-input-group) input:focus ~ .e-float-line::before,
  .e-float-input:not(.e-input-group) textarea:focus ~ .e-float-line::before,
  .e-float-input:not(.e-input-group) input:focus ~ .e-float-line::after,
  .e-float-input:not(.e-input-group) textarea:focus ~ .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) input:focus ~ .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) textarea:focus ~ .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) input:focus ~ .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) textarea:focus ~ .e-float-line::after,
  .e-float-input:not(.e-input-group).e-input-focus input ~ .e-float-line::before,
  .e-float-input:not(.e-input-group).e-input-focus input ~ .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group).e-input-focus input ~ .e-float-line::after {
    width: $input-half-position;
  }

  .e-float-input .e-float-line,
  .e-float-input.e-control-wrapper .e-float-line {
    display: block;
    position: relative;
    width: $input-full-position-width;
  }

  .e-float-input.e-rtl label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-rtl .e-float-input label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper label.e-float-text,
  .e-rtl label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper label.e-float-text,
  .e-rtl.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    right: $input-zero-padding-margin;
    transform-origin: right top;
    @if $input-skin-name == 'fluent2' {
      padding-right: $rtl-float-input-flu2-padding-right;
    }
  }

  .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom {
    padding-right: $float-label-padding;
  }

  .e-input-group.e-corner.e-rtl .e-input:first-child,
  .e-input-group.e-corner.e-rtl .e-input-group-icon:first-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:first-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:first-child {
    border-bottom-left-radius: $input-group-border-radius;
    border-bottom-right-radius: $input-box-border-radius;
    border-top-left-radius: $input-group-border-radius;
    border-top-right-radius: $input-box-border-radius;
  }

  .e-input-group.e-corner.e-rtl .e-input:last-child,
  .e-input-group.e-corner.e-rtl .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input:last-child,
  .e-input-group.e-control-wrapper.e-corner.e-rtl .e-input-group-icon:last-child  {
    border-bottom-left-radius: $input-box-border-radius;
    border-bottom-right-radius: $input-group-border-radius;
    border-top-left-radius: $input-box-border-radius;
    border-top-right-radius: $input-group-border-radius;
  }

  .e-input-group.e-warning::before,
  .e-input-group.e-control-wrapper.e-warning::before {
    content: '';
  }

  .e-float-input input[disabled],
  .e-float-input input.e-disabled,
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input.e-control-wrapper input.e-disabled {
    background: transparent;
    background-image: none;
    cursor: not-allowed;
    @if $input-skin-name == 'highcontrast' {
      color: $disable;
    }
  }

  .e-input-group.e-rtl .e-input:not(:first-child):focus,
  .e-input-group.e-control-wrapper.e-rtl .e-input:not(:first-child):focus {
    border-right-width: $input-right-border-width;
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input {
    min-width: 0;
    width: $input-full-position-width;
  }

  .e-input-group input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  .e-input-group textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]),
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper input.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  .e-input-group.e-control-wrapper textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]) {
    border: $input-border;
    border-width: $input-group-border-width;
  }

  .e-input-group input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input input.e-input,
  .e-float-input.e-control-wrapper input.e-input {
    margin-bottom: $input-zero-padding-margin;
  }

  .e-input-group.e-input-focus::before,
  .e-input-group.e-control-wrapper.e-input-focus::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before {
    @if $input-skin-name == 'fluent2' {
      border-bottom-right-radius: $input-group-focus-border-radius;
    }
  }

  .e-input-group.e-input-focus::after,
  .e-input-group.e-control-wrapper.e-input-focus::after,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'fluent2' {
      border-bottom-left-radius: $input-group-focus-border-radius;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-group-animation;
    }
  }

  .e-input-group::before,
  .e-input-group::after,
  .e-input-group.e-control-wrapper::before,
  .e-input-group.e-control-wrapper::after  {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-float-icon-left .e-input-in-wrap:not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap:not(.e-float-input)::before,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-filled.e-input-group.e-float-icon-left::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-group-animation-left;
    }
  }

  .e-input-group::before,
  .e-input-group.e-control-wrapper::before {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-left;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after,
  .e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-group-animation-width;
    }
  }

  .e-input-group.e-input-focus::before,
  .e-input-group.e-input-focus::after,
  .e-input-group.e-control-wrapper.e-input-focus::before,
  .e-input-group.e-control-wrapper.e-input-focus::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-width;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-group-animation-right;
    }
  }

  .e-input-group::after,
  .e-input-group.e-control-wrapper::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-right;
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    position: relative;
    width: $input-full-position-width;
  }

  .e-input-group .e-input-group-icon:hover,
  .e-input-group.e-rtl.e-corner .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-rtl.e-corner .e-input-group-icon:hover {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'Material3') {
      border-radius: $input-group-border-radius;
    }
  }

  .e-input#{$css}.e-small,
  .e-input-group.e-small,
  .e-input-group.e-control-wrapper.e-small {
    margin-bottom: $input-small-margin-bottom;
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    margin-bottom: $input-child-margin-bottom;
    margin-right: $input-child-margin-right;
    margin-top: $input-child-margin-top;
  }

  .e-float-input.e-input-group .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name != 'Material3' {
      margin-top: $float-input-child-margin-top;
    }
  }

  .e-input-group.e-small .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-input-group .e-input-group-icon,
  .e-small .e-input-group.e-control-wrapper .e-input-group-icon {
    @if ($input-skin-name != 'Material3') {
      margin-bottom: $input-child-small-margin-bottom;
      margin-right: $input-child-small-margin-right;
      margin-top: $input-child-small-margin-top;
    }
    @else {
      margin: $input-child-small-margin;
    }
  }

  .e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-float-input.e-input-group .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      margin-top: $float-input-child-small-margin-top;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if $skin-name == 'fluent2' {
      margin-right: $input-grp-icon-margin-right;
    }
  }

  .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-input-group.e-small .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon:last-child {
    @if $input-skin-name != 'fluent' {
      margin-right: $input-zero-padding-margin;
    }
    @if $input-skin-name == 'fluent2' {
      margin: $zero-value;
    }
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-style: $input-group-border-type-focus;
      border-width: $input-group-border-width-focus;
    }
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-style: $input-group-border-type-focus;
      border-width: $input-group-border-width-focus;
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom: $input-group-border;
    }
  }

  .e-input-group:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:not(.e-float-icon-left),
  .e-filled.e-input-group.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-bottom: $input-group-border;
    }
  }

  .e-input-group:not(.e-float-icon-left),
  .e-input-group.e-success:not(.e-float-icon-left),
  .e-input-group.e-warning:not(.e-float-icon-left),
  .e-input-group.e-error:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
    }
    @if $input-skin-name == 'Material3' {
      padding-top: $input-grp-msg-padding-top;
    }
  }

  .e-input-group,
  .e-input-group.e-success,
  .e-input-group.e-warning,
  .e-input-group.e-error,
  .e-input-group.e-control-wrapper,
  .e-input-group.e-control-wrapper.e-success,
  .e-input-group.e-control-wrapper.e-warning,
  .e-input-group.e-control-wrapper.e-error {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
    }
  }

  .e-input-group.e-rtl.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:not(:first-child):focus,
  .e-input-group.e-control-wrapper.e-rtl.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:not(:first-child):focus {
    border-right-width: $zero-value;
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
    @if ($input-skin-name == 'tailwind3')
    {
      background: $input-readonly-bg-color;
    }
    @if $input-skin-name != 'tailwind3'
    {
      background: $input-disable-bg-color;
    }
    color: $input-disable-font-color;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
      background-position: bottom -1px left 0;
      background-repeat: repeat-x;
      background-size: 4px 1px;
      border-bottom-color: transparent;
      color: $input-disable-font-color;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-color: $input-disable-border-color;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-disabled,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error).e-disabled {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-style: $input-disable-border-type;
    }
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name != 'fluent2' {
      @include input-ripple-parent;
    }
  }

  .e-input-group:not(.e-filled) .e-input-group-icon::after,
  .e-input-group.e-control-wrapper:not(.e-filled) .e-input-group-icon::after {
    @if $input-skin-name != 'fluent2' {
      @include input-ripple-style;
    }
  }

  .e-input-group .e-input-group-icon.e-input-btn-ripple::after,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-input-btn-ripple::after {
    @if $input-skin-name != 'fluent2' {
      @include input-ripple-animation;
    }
  }

  input.e-input#{$css}::-ms-clear,
  .e-float-input input::-ms-clear,
  .e-float-input.e-control-wrapper input::-ms-clear,
  .e-input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-input-group input:not(.e-control).e-input:not(:valid):first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper input.e-input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group input:not(:valid):not(.e-control):first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper input:not(:valid):not(.e-control):first-child ~ .e-clear-icon {
    display: none;
  }

  .e-input-group .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-control-wrapper.e-hidden,
  .e-input-group.e-control-wrapper.e-hidden {
    display: none;
  }

  input.e-input[type = 'search']::-webkit-search-decoration,
  input.e-input[type = 'search']::-webkit-search-cancel-button,
  input.e-input[type = 'search']::-webkit-search-results-button,
  input.e-input[type = 'search']::-webkit-search-results-decoration,
  .e-float-input input[type = 'search']::-webkit-search-decoration,
  .e-float-input input[type = 'search']::-webkit-search-cancel-button,
  .e-float-input input[type = 'search']::-webkit-search-results-button,
  .e-float-input input[type = 'search']::-webkit-search-results-decoration,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-decoration,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-cancel-button,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-results-button,
  .e-float-input.e-control-wrapper input[type = 'search']::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  .e-float-input.e-input-group .e-float-line,
  .e-float-input.e-input-group.e-control-wrapper .e-float-line,
  .e-float-input.e-control-wrapper.e-input-group .e-float-line,
  .e-float-input.e-control-wrapper.e-input-group.e-control-wrapper .e-float-line {
    bottom: $float-input-group-line-bottom;
    position: absolute;
  }

  .e-float-input.e-input-group input,
  .e-float-input.e-input-group textarea,
  .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input.e-input-group.e-control-wrapper textarea {
    border: $zero-value;
  }

  .e-float-input.e-input-group input:focus,
  .e-input-group input:focus,
  .e-float-input.e-input-group textarea:focus,
  .e-float-input.e-input-group.e-control-wrapper input:focus,
  .e-float-input.e-input-group.e-control-wrapper textarea {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
      box-shadow: none;
    }
  }

  .e-float-input.e-input-group .e-float-line,
  .e-float-input.e-input-group .e-float-text,
  .e-float-input.e-input-group.e-control-wrapper .e-float-line,
  .e-float-input.e-input-group.e-control-wrapper .e-float-text  {
    right: $input-zero-padding-margin;
  }

  input.e-input#{$css}::-webkit-input-placeholder,
  input.e-input#{$css}:-moz-placeholder,
  input.e-input#{$css}:-ms-input-placeholder,
  input.e-input#{$css}::-moz-placeholder,
  textarea.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-input#{$css}::-webkit-textarea-placeholder,
  textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-input#{$css}:-ms-textarea-placeholder,
  textarea.e-input#{$css}::-moz-placeholder {
    font-size: $input-font-size;
    font-style: $input-font-style;
  }

  .e-small input.e-input#{$css}::-webkit-input-placeholder,
  input.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small input.e-input#{$css}:-moz-placeholder,
  input.e-small.e-input#{$css}:-moz-placeholder,
  .e-small input.e-input#{$css}:-ms-input-placeholder,
  input.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small input.e-input#{$css}::-moz-placeholder,
  input.e-small.e-input#{$css}::-moz-placeholder,
  .e-small textarea.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-small.e-input#{$css}::-moz-placeholder,
  .e-small textarea.e-input#{$css}::-webkit-textarea-placeholder,
  textarea.e-small.e-input#{$css}::-webkit-textarea-placeholder,
  .e-small textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-small.e-input#{$css}::-moz-placeholder {
    font-size: $input-small-font-size;
    font-style: $input-font-style;
  }

  input.e-input#{$css}:-moz-placeholder,
  textarea.e-input#{$css}:-moz-placeholder,
  .e-input-group input.e-input:-moz-placeholder,
  .e-input-group textarea.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder,
  input.e-input#{$css}:-moz-placeholder,
  .e-input-group input.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder,
  textarea.e-input#{$css}:-moz-placeholder,
  input.e-input#{$css}::-moz-placeholder,
  textarea.e-input#{$css}::-moz-placeholder,
  input.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-input#{$css}::-webkit-input-placeholder {
    font-style: $input-font-style;
    user-select: none;
  }

  input.e-input#{$css}:-ms-input-placeholder,
  textarea.e-input#{$css}:-ms-input-placeholder {
    font-style: $input-font-style;
  }

  input.e-input#{$css},
  .e-input-group input,
  .e-input-group.e-control-wrapper input,
  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-normal-height);
  }

  .e-float-input:not(.e-input-group) input,
  .e-float-input.e-control-wrapper:not(.e-input-group) input {
    @include input-sizing;
    @include input-height ($float-input-normal-height);
  }

  .e-control input.e-input,
  .e-control .e-input-group input,
  .e-control .e-input-group input.e-input,
  .e-control .e-input-group.e-control-wrapper input,
  .e-control .e-input-group.e-control-wrapper input.e-input,
  .e-control .e-float-input input,
  .e-control .e-float-input.e-control-wrapper input,
  .e-control.e-input-group input,
  .e-control.e-input-group input.e-input,
  .e-control.e-input-group.e-control-wrapper input,
  .e-control.e-input-group.e-control-wrapper input.e-input,
  .e-control.e-float-input input,
  .e-control.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-sizing;
    }
  }

  input.e-input.e-small#{$css},
  .e-input-group.e-small input,
  .e-input-group.e-small input.e-input,
  .e-small .e-input-group input,
  .e-small .e-input-group input.e-input,
  .e-input-group.e-control-wrapper.e-small input,
  .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-small .e-input-group.e-control-wrapper input,
  .e-small .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-small input,
  .e-float-input.e-small input.e-input,
  .e-small .e-float-input input,
  .e-small .e-float-input input.e-input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-float-input.e-control-wrapper.e-small input.e-input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-small .e-float-input.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-small-height);
  }

  .e-float-input.e-small:not(.e-input-group) input,
  .e-float-input.e-small:not(.e-input-group) input.e-input,
  .e-small .e-float-input:not(.e-input-group) input,
  .e-small .e-float-input:not(.e-input-group) input.e-input .e-float-input.e-control-wrapper.e-small:not(.e-input-group) input,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-group) input.e-input,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-group) input.e-input  {
    @include input-sizing;
    @include input-height ($float-input-small-height);
  }

  textarea.e-input#{$css},
  .e-input-group textarea,
  .e-input-group.e-control-wrapper textarea,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea {
    @include input-sizing;
    @include input-height ($textarea-normal-height);
  }

  textarea.e-input.e-small#{$css},
  .e-input-group.e-small textarea,
  .e-input-group.e-small textarea.e-input,
  .e-small .e-input-group textarea,
  .e-small .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper.e-small textarea,
  .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-input-group.e-control-wrapper textarea,
  .e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-small textarea,
  .e-float-input.e-small textarea.e-input,
  .e-small .e-float-input textarea,
  .e-small .e-float-input textarea.e-input,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-float-input.e-control-wrapper textarea,
  .e-small .e-float-input.e-control-wrapper textarea.e-input {
    @include input-sizing;
    @include input-height ($textarea-small-height);
  }

  input.e-input#{$css}.e-small,
  .e-input-group input.e-input.e-small,
  .e-input-group.e-control-wrapper input.e-input.e-small,
  .e-input-group.e-small .e-input,
  .e-input-group.e-control-wrapper.e-small .e-input,
  .e-small input.e-input#{$css},
  .e-small .e-input-group .e-input,
  .e-small .e-input-group.e-control-wrapper .e-input,
  .e-float-input.e-small input,
  .e-float-input input.e-small,
  .e-small .e-float-input input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-float-input.e-control-wrapper input.e-small,
  .e-small .e-float-input.e-control-wrapper input,
  textarea.e-input#{$css}.e-small,
  .e-input-group textarea.e-input.e-small,
  .e-input-group.e-control-wrapper input.e-input-group textarea.e-input.e-small,
  .e-small input.e-input#{$css},
  .e-float-input.e-small textarea,
  .e-float-input textarea.e-small,
  .e-small .e-float-input textarea,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper textarea.e-small,
  .e-small .e-float-input.e-control-wrapper textarea {
    text-indent: $input-small-text-indent;
  }

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-control-wrapper input,
  .e-float-input input.e-input,
  .e-float-input input,
  .e-float-input.e-control-wrapper input.e-input,
  .e-float-input.e-control-wrapper input,
  .e-input-group input.e-input:focus,
  .e-input-group.e-control-wrapper input.e-input:focus,
  .e-float-input.e-control-wrapper input:focus,
  .e-float-input input:focus,
  .e-input-group.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-float-input.e-control-wrapper.e-input-focus input,
  .e-float-input.e-input-focus input {
    padding-left: $input-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  textarea.e-input#{$css},
  .e-input-group textarea.e-input,
  .e-input-group textarea,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper textarea,
  .e-float-input textarea.e-input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea.e-input,
  .e-float-input.e-control-wrapper textarea,
  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-float-input.e-control-wrapper textarea:focus,
  .e-float-input textarea:focus {
    @if $input-skin-name == 'fluent2' {
      padding-left: $textarea-input-padding-left;
    }
    @else {
      padding-left: $input-text-indent;
    }
    text-indent: $input-zero-padding-margin;
  }

  input.e-input.e-rtl#{$css},
  .e-input-group.e-rtl input.e-input,
  .e-input-group.e-control-container.e-rtl input.e-control,
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-float-input.e-rtl input,
  .e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-input-group input.e-input,
  .e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-rtl .e-float-input input,
  .e-rtl .e-float-input.e-control-wrapper input,
  .e-input-group.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-float-input.e-rtl input,
  .e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-input-group input.e-input,
  .e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-rtl .e-float-input input,
  .e-rtl .e-float-input.e-control-wrapper input,
  .e-input-group.e-rtl input.e-input:focus,
  .e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-float-input.e-rtl input:focus,
  .e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-rtl .e-input-group input.e-input:focus,
  .e-rtl .e-input-group.e-control-wrapper input.e-input:focus,
  .e-rtl .e-float-input input:focus,
  .e-rtl .e-float-input.e-control-wrapper input:focus,
  .e-input-group.e-rtl.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-float-input.e-rtl.e-input-focus input,
  .e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-rtl .e-float-input.e-input-focus input,
  .e-rtl .e-float-input.e-control-wrapper.e-input-focus input {
    padding-left: $input-zero-padding-margin;
    padding-right: $input-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  textarea.e-input.e-rtl#{$css},
  .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-float-input:not(.e-outline).e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline) textarea,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-float-input:not(.e-outline).e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline) textarea,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input:focus,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-float-input:not(.e-outline).e-rtl textarea:focus,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea:focus,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input:focus,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input:focus,
  .e-rtl .e-float-input:not(.e-outline) textarea:focus,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea:focus {
    padding-right: $input-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  input.e-input.e-small#{$css},
  .e-small input.e-input#{$css},
  .e-input-group.e-small input.e-input,
  .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-float-input.e-small input,
  .e-float-input.e-control-wrapper input.e-small,
  .e-float-input.e-small input,
  .e-float-input.e-control-wrapper input.e-small,
  .e-input-group input.e-input.e-small,
  .e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-float-input input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-small .e-input-group input.e-input,
  .e-small .e-input-group.e-control-wrapper input.e-input,
  .e-input-group.e-small input.e-input:focus,
  .e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-float-input.e-small input:focus,
  .e-float-input.e-control-wrapper.e-small input:focus,
  .e-small .e-input-group.e-control-wrapper input.e-input:focus,
  .e-small .e-input-group input.e-input:focus,
  .e-small .e-float-input input:focus,
  .e-small .e-float-input.e-control-wrapper input:focus,
  .e-input-group.e-small.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small .e-input-group.e-input-focus input.e-input,
  .e-float-input.e-small.e-input-focus input,
  .e-float-input.e-control-wrapper.e-input-focus.e-small input,
  .e-small .e-float-input.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-input-focus input,
  textarea.e-input.e-small#{$css},
  .e-small textarea.e-input#{$css},
  .e-input-group.e-small textarea.e-input,
  .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper textarea.e-small,
  .e-float-input.e-small textarea,
  .e-float-input textarea.e-small,
  .e-input-group textarea.e-input.e-small,
  .e-input-group.e-control-wrapper textarea.e-input.e-small,
  .e-small .e-float-input.e-control-wrapper textarea,
  .e-small .e-float-input textarea,
  .e-small .e-input-group textarea.e-input,
  .e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-small textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-float-input.e-small textarea:focus,
  .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-small .e-input-group textarea.e-input:focus,
  .e-small .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-small .e-float-input.e-control-wrapper textarea:focus,
  .e-small .e-float-input textarea:focus {
    padding-left: $input-small-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  .e-rtl input.e-input.e-small#{$css},
  input.e-input#{$css}.e-small.e-rtl,
  .e-small.e-rtl input.e-input#{$css},
  .e-small input.e-input.e-rtl#{$css},
  .e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-float-input.e-small.e-rtl input,
  .e-input-group.e-small.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-rtl .e-float-input.e-small input,
  .e-rtl .e-float-input.e-control-wrapper.e-small input,
  .e-rtl .e-input-group.e-small input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-float-input.e-rtl input.e-small,
  .e-float-input.e-control-wrapper.e-rtl input.e-small,
  .e-input-group.e-rtl input.e-input.e-small,
  .e-input-group.e-control-wrapper.e-rtl input.e-input.e-small,
  .e-rtl .e-float-input input.e-small,
  .e-rtl .e-float-input.e-control-wrapper input.e-small,
  .e-rtl .e-input-group input.e-input.e-small,
  .e-rtl .e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-float-input.e-rtl input,
  .e-small .e-float-input.e-control-wrapper.e-rtl input,
  .e-small .e-input-group.e-rtl input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-small.e-rtl .e-float-input.e-control-wrapper input,
  .e-small.e-rtl .e-float-input input,
  .e-small.e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-small.e-rtl .e-input-group input.e-input,
  .e-small.e-rtl .e-input-group.e-control-wrapper input.e-input:focus,
  .e-small.e-rtl .e-input-group input.e-input:focus,
  .e-small.e-rtl .e-float-input.e-control-wrapper input:focus,
  .e-small.e-rtl .e-float-input input:focus,
  .e-small .e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-small .e-input-group.e-rtl input.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-small .e-float-input.e-rtl input:focus,
  .e-small.e-rtl .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small.e-rtl .e-input-group.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-small .e-input-group.e-rtl.e-input-focus input.e-input,
  .e-small.e-rtl .e-float-input.e-control-wrapper.e-input-focus input,
  .e-small.e-rtl .e-float-input.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-small .e-float-input.e-rtl.e-input-focus input {
    padding-left: $input-zero-padding-margin;
    padding-right: $input-small-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  .e-rtl textarea.e-input.e-small#{$css},
  textarea.e-input.e-small.e-rtl#{$css},
  .e-small.e-rtl textarea.e-input#{$css},
  .e-small textarea.e-input.e-rtl#{$css},
  .e-float-input:not(.e-outline).e-small.e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea,
  .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small textarea,
  .e-rtl .e-float-input:not(.e-outline).e-small textarea,
  .e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea.e-small,
  .e-float-input:not(.e-outline).e-rtl textarea.e-small,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input.e-small,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input.e-small,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea.e-small,
  .e-rtl .e-float-input:not(.e-outline) textarea.e-small,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input.e-small,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input.e-small,
  .e-small .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-small .e-float-input:not(.e-outline).e-rtl textarea,
  .e-small .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-small .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-small.e-rtl .e-float-input:not(.e-outline) textarea,
  .e-small.e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-small.e-rtl .e-input-group:not(.e-outline) textarea.e-input:focus,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline) textarea:focus,
  .e-small .e-input-group:not(.e-outline).e-rtl textarea.e-input:focus,
  .e-small .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-small .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea:focus,
  .e-small .e-float-input:not(.e-outline).e-rtl textarea:focus {
    padding-right: $input-small-text-indent;
    text-indent: $input-zero-padding-margin;
  }
  // Clear-icon support
  .e-float-input .e-clear-icon,
  .e-float-input.e-control-wrapper .e-clear-icon,
  .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon {
    background: transparent;
    border: $zero-value;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: $input-clear-icon-position;
    line-height: $input-grup-icon-line-height;
    min-width: 24px;
    outline: none;
    padding: $input-clear-icon-padding;
    text-align: center;
  }

  .e-float-input .e-clear-icon::before,
  .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-input-group .e-clear-icon::before,
  .e-input-group.e-control-wrapper .e-clear-icon::before {
    font-size: $input-clear-icon;
    padding: $input-zero-padding-margin;
    text-align: center;
    vertical-align: middle;
  }

  .e-float-input.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-control-wrapper.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper.e-static-clear .e-clear-icon.e-clear-icon-hide {
    cursor: pointer;
    display: flex;
  }

  .e-float-input.e-small .e-clear-icon::before,
  .e-float-input.e-control-wrapper.e-small .e-clear-icon::before,
  .e-input-group.e-small .e-clear-icon::before,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon::before,
  .e-float-input.e-control-wrapper input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-float-input input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input .e-clear-icon::before,
  .e-small .e-input-group .e-clear-icon::before,
  .e-small .e-input-group.e-control-wrapper .e-clear-icon::before {
    font-size: $input-small-clear-icon;
  }

  .e-input-group.e-static-clear .e-clear-icon.e-clear-icon-hide,
  .e-input-group.e-control-wrapper.e-static-clear .e-clear-icon.e-clear-icon-hide {
    cursor: pointer;
  }

  .e-float-input.e-control-wrapper input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-input-group input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input.e-input-group input[readonly]:first-child ~ .e-clear-icon,
  .e-input-group input[readonly]:first-child ~ .e-clear-icon.e-clear-icon-hide,
  .e-float-input.e-control-wrapper.e-input-group input[readonly]:first-child ~ .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper input[readonly]:first-child ~ .e-clear-icon,
  .e-input-group.e-control-wrapper input[readonly]:first-child .e-clear-icon.e-clear-icon-hide  {
    cursor: auto;
  }

  .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon {
    min-height: $input-clear-icon-min-height;
    min-width: $input-clear-icon-min-width;
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      padding-bottom: $input-clear-icon-padding-bottom;
      padding-left: $input-clear-icon-padding-left;
      padding-right: $input-clear-icon-padding-right;
      padding-top: $input-clear-icon-padding-top;
    }
    @else {
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-clear-icon-hover-border-radius;
    }
  }

  .e-float-input.e-input-group .e-clear-icon,
  .e-float-input.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
      padding-right: $input-clear-icon-padding-right;
      padding-top: $float-input-clear-icon-padding-top;
    }
  }

  .e-input-group.e-small .e-clear-icon,
  .e-input-group .e-clear-icon.e-small,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon.e-small {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      min-height: $input-bigger-clear-icon-min-height;
      min-width: $input-bigger-clear-icon-min-width;
      padding-bottom: $input-clear-icon-bigger-padding-bottom;
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $input-clear-icon-bigger-padding-top;
    }
    @else {
      min-height: $input-bigger-small-clear-icon-min-height;
      min-width: $input-bigger-small-clear-icon-min-width;
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-bigger-clear-icon-border-radius;
    }
  }

  .e-input-group.e-small .e-clear-icon,
  .e-input-group .e-clear-icon.e-small,
  .e-small .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-input-group.e-control-wrapper .e-clear-icon {
    min-height: $input-small-clear-icon-min-height;
    min-width: $input-small-clear-icon-min-width;
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      padding-bottom: $input-clear-icon-small-padding-bottom;
      padding-right: $input-clear-icon-small-padding-right;
      padding-top: $input-clear-icon-small-padding-top;
    }
    @else {
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-small-clear-icon-border-radius;
    }
  }

  .e-input-group.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-float-input .e-clear-icon.e-small,
  .e-small .e-input-group.e-float-input .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-input-group.e-control-wrapper.e-float-input .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-input-group.e-float-input.e-control-wrapper .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
      padding-right: $input-clear-icon-small-padding-right;
      padding-top: $float-input-clear-icon-small-padding-top;
    }
  }

  .e-input#{$css}:not(:valid),
  .e-input#{$css}:valid,
  .e-float-input.e-control-wrapper input:not(:valid),
  .e-float-input.e-control-wrapper input:valid,
  .e-float-input input:not(:valid),
  .e-float-input input:valid,
  .e-input-group input:not(:valid),
  .e-input-group input:valid,
  .e-input-group.e-control-wrapper input:not(:valid),
  .e-input-group.e-control-wrapper input:valid,
  .e-float-input.e-control-wrapper textarea:not(:valid),
  .e-float-input.e-control-wrapper textarea:valid,
  .e-float-input textarea:not(:valid),
  .e-float-input textarea:valid,
  .e-input-group.e-control-wrapper textarea:not(:valid),
  .e-input-group.e-control-wrapper textarea:valid,
  .e-input-group textarea:not(:valid),
  .e-input-group textarea:valid {
    box-shadow: none;
  }

  .e-input#{$css}:not(:valid),
  .e-input#{$css}:valid,
  .e-float-input input:valid,
  .e-input-group input:valid {
    @if $input-skin-name == 'fluent2' {
      border-bottom-color: $input-box-border-color;
      border-top-color: $border;
      border-left-color: $border;
      border-right-color: $border;
      border-radius: $input-float-border-radius;
      height: $input-float-height;
    }
  }

  .e-input-group .e-input-in-wrap,
  .e-input-group.e-control-wrapper .e-input-in-wrap,
  .e-float-input .e-input-in-wrap,
  .e-float-input.e-control-wrapper .e-input-in-wrap {
    width: $input-full-position-width;
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
      display: flex;
      position: relative;
    }
  }

  .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text {
    right: $input-zero-padding-margin;
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
    }
  }

  .e-input-group .e-input-in-wrap,
  .e-input-group.e-control-wrapper .e-input-in-wrap,
  .e-float-input .e-input-in-wrap,
  .e-float-input.e-control-wrapper .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      display: flex;
      position: relative;
      width: $input-full-position-width;
    }
  }

  .e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
      margin-left: $input-inner-wrap-margin-left;
    }
    @if $input-skin-name == 'fluent2' {
      border-width: $input-group-full-border-width;
      margin-left: $input-inner-wrap-margin-left;
    }
  }

  .e-rtl .e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap .e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      margin-left: $input-zero-padding-margin;
      margin-right: $input-inner-wrap-margin-left;
    }
  }

  .e-float-input label.e-float-text.e-label-bottom,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transform: translate3d(0, 16px, 0) scale(1);
    }
    @if $input-skin-name == 'fluent2' {
      transform: translate3d(0, 16px, 0) scale(1);
      padding-left: $float-input-label-padding-left;
    }
  }

  .e-float-input textarea:focus ~ label.e-float-text,
  .e-float-input textarea:valid ~ label.e-float-text,
  .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $textarea-float-top;
      transform: translate3d(0, 6px, 0) scale(.92);
      @if $input-skin-name == 'tailwind3' {
        left: 2px;
      }
    }
    @else if $input-skin-name == 'fabric' or  $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      top: 15px;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if $input-skin-name == 'tailwind' {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -33px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-textarea-small-text-top;
    }
    @if $input-skin-name == 'tailwind3' {
      top: -21px;
      left: 2px;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      top: $float-textarea-small-text-top;
    }
  }

  .e-float-input textarea ~ .e-float-text,
  .e-float-input.e-control-wrapper textarea ~ .e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-input-wrapper-top;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' {
      top: $float-input-wrapper-top;
    }
    @else if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
      top: $float-input-wrapper-top;
    }
  }

  .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-input-wrapper-top;
    }
  }

  .e-float-input.e-small textarea ~ label.e-float-text,
  .e-float-input textarea ~ label.e-float-text.e-small,
  .e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-float-input textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    font-size: $float-placeholder-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-input-wrapper-top;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
      top: $float-placeholder-small-font-top;
    }
  }

  .e-input-group.e-small:not(.e-float-input) .e-input,
  .e-small .e-input-group:not(.e-float-input) .e-input,
  .e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-float-input.e-small input,
  .e-small .e-float-input input,
  .e-float-input.e-input-group.e-small input,
  .e-small .e-float-input.e-input-group input,
  .e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-input-group input,
  .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' {
      min-height: 16px;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      min-height: 14px;
    }
  }

  .e-input-group input.e-input,
  .e-float-input.e-input-group input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input input,
  .e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      min-height: 22px;
    }
  }

  .e-input-group:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-float-input:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea:not([disabled]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-bottom-width: $input-group-border-width-hover;
    }
    @else if $input-skin-name == 'fluent2' {
      border-bottom-width: $input-group-border-width-hover;
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group:hover:not(.e-disabled),
  .e-input-group.e-control-wrapper:hover:not(.e-disabled),
  .e-float-input:hover:not(.e-disabled),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-disabled),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom-width: $input-group-border-width-hover;
    }
  }

  .e-input-group.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-float-input.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border-bottom-width: $input-group-border-width-hover;
    }
  }

  .e-input-group:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-input-group:not(.e-disabled):not(.e-float-icon-left)::after,
  .e-input-group.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled) .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      bottom: $input-group-bottom;
    }
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-style: $input-group-border-type-focus;
      border-width: $zero-value $zero-value $input-border-width;
    }
  }

  .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3'  {
      top: $float-label-text-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      font-weight: bold;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: $font-weight-medium;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-small .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-label-bgr-input-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      top: $small-float-input-label-top;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      font-weight: bold;
      padding-right: $input-zero-padding-margin;
      top: $small-float-input-label-top;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: $font-weight-medium;
      padding-right: $input-zero-padding-margin;
      top: $small-float-input-label-top;
      transform: translate3d(-10px, -38px, 0) scale(1);
    }
    user-select: text;
  }

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'highcontrast' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      @include textarea-float-label-alignment;
      font-style: $input-font-style;
    }
  }

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      transform: translate3d(0, 16px, 0) scale(1);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or  $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      transform: translate3d(0, 16px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      padding-right: 0;
      transform: translate3d(0, 16px, 0) scale(1);
    }
  }

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-font-size;
    font-style: $input-font-style;
    font-weight: $input-grup-icon-line-height;
    left: $input-zero-padding-margin;
    overflow: hidden;
    padding-left: $float-label-padding;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: $input-float-label-top;
    transform: translate3d(0, 16px, 0) scale(1);
    transform-origin: left top;
    transition: .25s cubic-bezier(.25, .8, .25, 1);
    user-select: none;
    white-space: nowrap;
    width: $input-full-position-width;
    letter-spacing: $input-letter-spacing;
  }

  .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-bigger-label-font-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: 0;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: 0;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3'  or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-small .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-label-bgr-input-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      top: $small-float-input-label-top;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: $input-zero-padding-margin;
      top: $small-float-input-label-top;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: $font-weight-medium;
      padding-right: $input-zero-padding-margin;
      top: $small-float-input-label-top;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    user-select: text;
  }

  .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input textarea:focus ~ label.e-float-text,
  .e-small .e-float-input textarea:valid ~ label.e-float-text,
  .e-small .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      transform: translate3d(0, 6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -31px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
  }

  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled  {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-color: $input-disable-border-color;
      border-style: $input-disable-border-type;
    }
  }

  .e-float-input textarea[disabled],
  .e-float-input textarea.e-disabled,
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-control-wrapper textarea.e-disabled {
    background: transparent;
    background-image: none;
    cursor: not-allowed;
    @if $input-skin-name == 'highcontrast' {
      color: $disable;
    }
  }

  textarea.e-input#{$css},
  .e-input-group textarea,
  .e-input-group textarea.e-input,
  .e-input-group.e-input-focus textarea,
  .e-input-group.e-input-focus textarea.e-input,
  .e-input-group.e-control-wrapper textarea,
  .e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea {
    line-height: $input-textarea-line-height;
    min-height: $textarea-min-height;
    min-width: 0;
    padding: $textarea-padding;
    resize: vertical;
  }

  .e-input-group.e-small textarea,
  .e-input-group.e-small textarea.e-input,
  .e-input-group textarea.e-small,
  .e-input-group textarea.e-input.e-small,
  .e-input-group.e-control-wrapper.e-small textarea,
  .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-input-group textarea,
  .e-small .e-input-group textarea.e-input,
  .e-float-input.e-small textarea,
  .e-float-input textarea.e-small,
  .e-float-input.e-control-wrapper.e-small textarea,
  .e-float-input.e-control-wrapper textarea.e-small,
  .e-small .e-float-input textarea,
  .e-small .e-float-input.e-control-wrapper textarea {
    font: inherit;
    min-height: $textarea-small-min-height;
    padding: $textarea-small-padding;
  }

  .e-input-group.e-input-focus.e-small textarea,
  .e-input-group.e-input-focus.e-small textarea.e-input,
  .e-input-group.e-input-focus textarea.e-small,
  .e-input-group.e-input-focus textarea.e-input.e-small,
  .e-input-group.e-input-focus textarea.e-input.e-small,
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-small .e-input-group.e-input-focus textarea,
  .e-small .e-input-group.e-input-focus textarea.e-input {
    font: inherit;
    min-height: $textarea-small-min-height;
    padding: $textarea-small-padding;
  }

  .e-input-group.e-small textarea:focus,
  .e-input-group.e-small textarea.e-input:focus,
  .e-input-group textarea.e-small:focus,
  .e-input-group textarea.e-input.e-small:focus,
  .e-input-group.e-control-wrapper.e-small textarea:focus,
  .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-small .e-input-group textarea:focus,
  .e-small .e-input-group textarea.e-input:focus,
  .e-float-input.e-small textarea:focus,
  .e-float-input textarea.e-small:focus,
  .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-float-input.e-control-wrapper textarea.e-small:focus,
  .e-small .e-float-input textarea:focus,
  .e-small .e-float-input.e-control-wrapper textarea:focus {
    padding: $textarea-small-padding;
  }

  input.e-input.e-small#{$css},
  textarea.e-input.e-small#{$css},
  .e-small input.e-input#{$css},
  .e-small textarea.e-input #{$css} {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      min-height: $input-smaller-min-height;
    }
  }

  input.e-input#{$css},
  textarea.e-input#{$css} {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      min-height: $input-min-height;
    }
  }

  // Outline textbox

  textarea.e-outline.e-input,
  .e-outline.e-input-group textarea.e-input,
  .e-outline.e-input-group textarea,
  .e-outline.e-input-group.e-control-wrapper textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper textarea,
  .e-outline.e-float-input textarea.e-input,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 1px);
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 80px);
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      overflow: hidden;
      text-overflow: ellipsis;
      width: $input-full-position-width;
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 45px);
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 75px);
    }
  }

  .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: calc(100% - 110px);
    }
  }

  .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after,
  .e-outline.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
  .e-outline.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      width: 0%;
    }
  }

  .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-input-group,
  .e-outline.e-input-group:not(.e-float-icon-left),
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper,
  .e-outline.e-input-group:not(.e-float-icon-left),
  .e-outline.e-input-group.e-success:not(.e-float-icon-left),
  .e-outline.e-input-group.e-warning:not(.e-float-icon-left),
  .e-outline.e-input-group.e-error:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-border-width solid $outline-border-color;
      border-radius: $outline-input-border-radius;
      border-width: $input-border-width;
      fill: transparent;
      transition: border .2s, box-shadow .2s;
    }
  }

  .e-input-group.e-control-wrapper,
  .e-input-group,
  .e-input-group:not(.e-float-icon-left),
  .e-float-input,
  .e-float-input.e-control-wrapper,
  .e-input-group:not(.e-float-icon-left),
  .e-input-group.e-success:not(.e-float-icon-left),
  .e-input-group.e-warning:not(.e-float-icon-left),
  .e-input-group.e-error:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    @if $input-skin-name == 'fluent2' {
      border: $input-border-width solid $outline-border-color;
      border-radius: $input-float-border-radius;
      border-width: $input-border-width;
      fill: transparent;
      transition: border .2s, box-shadow .2s;
    }
  }

  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $input-zero-padding-margin;
    }
  }

  .e-outline.e-float-input.e-valid-input:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left):not(.e-disabled),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left):not(.e-disabled),
  .e-outline.e-float-input.e-input-group.e-valid-input:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-valid-input:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-success):not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-success:hover:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-success:hover:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:hover:not(.e-error):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-error:hover:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-error:hover:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:hover:not(.e-success):not(.e-warning):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:hover:not(.e-success):not(.e-error):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
    }
  }

  .e-outline.e-input-group,
  .e-outline .e-input-group,
  .e-outline .e-input-group.e-control-wrapper,
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-font-size;
    }
  }

  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error),
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error,
  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-outline.e-input-group.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error),
  .e-outline.e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-width: $outline-active-input-border;
    }
  }

  input.e-outline.e-input,
  .e-outline.e-input-group input.e-input,
  .e-outline.e-input-group input,
  .e-outline.e-input-group.e-control-wrapper input.e-input,
  .e-outline.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input input.e-input,
  .e-outline.e-float-input input,
  .e-outline.e-float-input.e-control-wrapper input.e-input,
  .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-input-group:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-input-group:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      padding: $outline-input-padding-top $outline-input-padding-left $outline-input-padding-bottom;
    }
  }

  textarea.e-outline.e-input,
  .e-outline.e-input-group textarea.e-input,
  .e-outline.e-input-group textarea,
  .e-outline.e-input-group.e-control-wrapper textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper textarea,
  .e-outline.e-float-input textarea.e-input,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper textarea,
  .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
      box-sizing: border-box;
      margin: $outline-textarea-margin-top;
      padding: $input-zero-padding-margin $outline-input-padding-left $outline-input-padding-left;
    }
  }

  .e-outline.e-input-group input.e-input,
  .e-outline.e-float-input.e-input-group input,
  .e-outline.e-input-group.e-control-wrapper input.e-input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input input,
  .e-outline.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-input-min-height;
    }
  }

  .e-outline.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-outline.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-outline.e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-outline.e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-outline.e-float-input:not(.e-input-group) .e-float-line::before,
  .e-outline.e-float-input:not(.e-input-group) .e-float-line::after,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      content: none;
    }
  }

  .e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-active-border-color;
      box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
    }
  }

  .e-outline.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $input-group-border-width;
      border-width: $input-group-border-width;
      margin-left: $input-zero-padding-margin;
    }
  }

  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $input-mat-margin;
      margin-right: $input-zero-padding-margin;
    }
  }

  .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $input-mat-margin;
      margin-left: $input-zero-padding-margin;
    }
  }

  .e-outline.e-float-input .e-clear-icon,
  .e-outline.e-float-input.e-control-wrapper .e-clear-icon,
  .e-outline.e-input-group .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $outline-input-clear-icon-font-size;
      padding: 9px $outline-input-icon-margin-right 9px $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $outline-input-clear-icon-font-size;
      padding: $zero-value;
      height: $float-input-normal-height;
      margin: $input-mat-margin;
    }
  }

  .e-outline.e-input-group.e-float-icon-left .e-input,
  .e-outline.e-float-input.e-input-group.e-float-icon-left .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left .e-input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $zero-value;
    }
  }

  .e-outline.e-input-group .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-icon-font-size;
      margin: $outline-input-grp-icon-margin;
    }
  }

  .e-outline.e-input-group.e-prepend .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-icon-font-size;
      margin: $outline-input-grp-prepend-icon-margin;
    }
  }

  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-outline.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $zero-value;
    }
  }

  .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
    }
  }

  .e-outline.e-input-group.e-small:not(.e-float-input) .e-input,
  .e-small .e-outline.e-input-group:not(.e-float-input) .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-outline.e-float-input.e-small input,
  .e-small .e-outline.e-float-input input,
  .e-outline.e-float-input.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-input-group input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-small-input-min-height;
    }
  }

  .e-outline.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
      font-size: $outline-small-label-font-size;
    }
  }

  .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-valid-input-font-size;
    }
  }

  .e-outline.e-input-group.e-small,
  .e-small .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper.e-small,
  .e-small .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input.e-small,
  .e-small .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper.e-small,
  .e-small .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-input-font-size;
    }
  }

  input.e-input.e-small.e-outline,
  .e-small input.e-input.e-outline,
  .e-input-group.e-small.e-outline input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-outline.e-float-input.e-small input,
  .e-outline.e-float-input.e-control-wrapper input.e-small,
  .e-outline.e-float-input.e-small input,
  .e-outline.e-float-input.e-control-wrapper input.e-small,
  .e-outline.e-input-group input.e-input.e-small,
  .e-outline.e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-outline.e-float-input input,
  .e-small .e-outline.e-float-input.e-control-wrapper input,
  .e-small .e-outline.e-input-group input.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper input.e-input,
  .e-outline.e-input-group.e-small input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-outline.e-float-input.e-small input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-small input:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper input.e-input:focus,
  .e-small .e-outline.e-input-group input.e-input:focus,
  .e-small .e-outline.e-float-input input:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper input:focus,
  .e-outline.e-float-input.e-small.e-input-focus input,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-small .e-outline.e-float-input.e-input-focus input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-focus input,
  .e-outline.e-input-group.e-small.e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $outline-small-input-padding-top $outline-small-input-padding-left;
    }
  }

  textarea.e-input.e-small.e-outline,
  .e-small textarea.e-input.e-outline,
  .e-input-group.e-small.e-outline textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper textarea.e-small,
  .e-outline.e-float-input.e-small textarea,
  .e-outline.e-input-group textarea.e-input.e-small,
  .e-outline.e-input-group.e-control-wrapper textarea.e-input.e-small,
  .e-small .e-outline.e-float-input textarea,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea,
  .e-small .e-outline.e-input-group textarea.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper textarea.e-input,
  .e-outline.e-input-group.e-small textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-outline.e-float-input.e-small textarea:focus,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-small .e-outline.e-input-group textarea.e-input:focus,
  .e-small .e-outline.e-float-input textarea:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      margin: $outline-small-textarea-margin-top;
      padding: $zero-value $outline-small-input-padding-left $outline-small-input-padding-left;
    }
  }

  .e-outline.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-small-input-icon-margin-right;
    }
  }

  .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-outline.e-input-group .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-small-input-icon-margin-left;
    }
  }

  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-prepend .e-input-group-icon,
  .e-small .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-rtl.e-outline.e-input-group .e-input-group-icon,
  .e-rtl.e-small .e-outline.e-input-group .e-input-group-icon,
  .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-input-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-input-group.e-small .e-clear-icon,
  .e-outline.e-input-group .e-clear-icon.e-small,
  .e-small .e-outline.e-input-group .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $outline-small-clear-icon-font-size;
      padding: 7px $outline-small-input-icon-margin-left 7px $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $outline-small-clear-icon-font-size;
    }
  }

  .e-outline.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-outline.e-float-input.e-input-group .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-top: $outline-bigger-small-group-icon-top;
    }
  }

  .e-outline.e-float-input input,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border: $outline-input-border;
      border-width: $outline-input-group-border-width;
    }
  }

  .e-outline label.e-float-text,
  .e-outline.e-float-input label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text,
  .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      display: flex;
      left: $input-zero-padding-margin;
      line-height: $outline-label-default-line-height;
      position: absolute;
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
      transition: color .2s, font-size .2s, line-height .2s;
    }
  }

  .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-small-label-line-height;
    }
  }

  .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-label-line-height;
    }
  }

  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:valid ~ label.e-float-text.e-label-bottom,
  .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-label-line-height;
    }
  }

  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-label-line-height;
    }
  }

  .e-outline label.e-float-text::before,
  .e-outline label.e-float-text::after,
  .e-outline.e-float-input label.e-float-text::before,
  .e-outline.e-float-input label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top: solid $outline-wrapper-border-infocused;
      border-top-color: transparent;
      box-shadow: inset $zero-value 1px transparent;
      box-sizing: border-box;
      content: ' ';
      display: block;
      height: $outline-label-height;
      margin-top: $outline-label-before-element-margin-top;
      min-width: $outline-label-min-width;
      pointer-events: none;
      position: relative;
      transition: border-color .1s, box-shadow .2s;
    }
  }

  .e-outline.e-float-icon-left label.e-float-text::before,
  .e-outline.e-float-icon-left label.e-float-text::after,
  .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
  .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      transition: none;
    }
  }

  .e-small.e-outline label.e-float-text::before,
  .e-small.e-outline label.e-float-text::after,
  .e-small.e-outline.e-float-input label.e-float-text::before,
  .e-small.e-outline.e-float-input label.e-float-text::after,
  .e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::after,
  .e-small .e-outline label.e-float-text::before,
  .e-small .e-outline label.e-float-text::after,
  .e-small .e-outline.e-float-input label.e-float-text::before,
  .e-small .e-outline.e-float-input label.e-float-text::after,
  .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-width: $outline-small-label-min-width;
    }
  }

  .e-outline.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $outline-border-color;
      border-width: $input-border-width;
    }
  }

  .e-outline.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-error):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-success-color;
    }
  }

  .e-outline.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
  .e-outline.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus:not(.e-error):not(.e-warning) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-success-color;
    }
  }

  .e-outline.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-success):not(.e-warning):not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-error-color;
    }
  }

  .e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
  .e-outline.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus:not(.e-success):not(.e-warning) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-error-color;
    }
  }

  .e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-success):not(.e-error):not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-warning-color;
    }
  }

  .e-outline.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
  .e-outline.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after,
  .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
  .e-outline.e-float-input.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus:not(.e-success):not(.e-error) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-warning-color;
    }
  }

  .e-outline label.e-float-text::before,
  .e-outline.e-float-input label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-left: solid $input-border-width transparent;
      border-radius: $outline-label-margin $zero-value;
      left: $outline-label-before-left;
      margin-right: $outline-label-margin;
    }
  }

  .e-rtl.e-outline label.e-float-text::before,
  .e-rtl.e-outline.e-float-input label.e-float-text::before,
  .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-left: $zero-value;
      border-radius: $zero-value $outline-label-margin;
      left: $outline-label-before-left-rtl;
    }
  }

  .e-rtl.e-outline label.e-float-text::after,
  .e-rtl.e-outline.e-float-input label.e-float-text::after,
  .e-rtl.e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-radius: $outline-label-border-radius $zero-value;
      border-right: $zero-value;
      left: $outline-label-after-left-rtl;
    }
  }

  .e-outline label.e-float-text::after,
  .e-outline.e-float-input label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-radius: $zero-value $outline-label-border-radius;
      border-right: solid $input-border-width transparent;
      flex-grow: 1;
      left: $outline-label-after-left;
      margin-left: $outline-label-margin;
    }
  }

  .e-outline.e-input-focus label.e-float-text::before,
  .e-outline.e-input-focus label.e-float-text::after,
  .e-outline.e-float-input.e-input-focus label.e-float-text::before,
  .e-outline.e-float-input.e-input-focus label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: $input-active-border-color;
    }
  }

  .e-outline.e-float-input.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled),
  .e-outline.e-float-input.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-error):not(.e-success):not(.e-warning):not(.e-disabled):not(.e-float-icon-left) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
      box-shadow: inset 1px $zero-value $input-active-border-color, inset -1px $zero-value $input-active-border-color, inset $zero-value -1px $input-active-border-color;
    }
  }

  .e-outline.e-float-input input:focus ~ label.e-float-text,
  .e-outline.e-float-input input:valid ~ label.e-float-text,
  .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-outline.e-float-input textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-floating-label-font-size;
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
    }
  }

  .e-outline.e-float-input.e-rtl .e-clear-icon,
  .e-rtl .e-outline.e-float-input .e-clear-icon,
  .e-outline.e-float-input.e-control-wrapper.e-rtl .e-clear-icon,
  e-rtl .e-outline.e-float-input.e-control-wrapper .e-clear-icon,
  .e-outline.e-input-group.e-rtl .e-clear-icon,
  .e-rtl .e-outline.e-input-group .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-rtl .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-input-icon-margin-right;
      padding-right: $outline-input-icon-margin-left;
    }
  }

  .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-input-icon-margin-right;
    }
  }

  .e-rtl.e-outline.e-input-group .e-input-group-icon,
  .e-rtl .e-outline.e-input-group .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-input-icon-margin-right;
      margin-right: $outline-input-icon-margin-left;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-outline.e-input-group .e-clear-icon.e-small,
  .e-rtl .e-outline.e-input-group .e-clear-icon.e-small,
  .e-rtl.e-small .e-outline.e-input-group .e-clear-icon,
  .e-small .e-rtl.e-outline.e-input-group .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon .e-rtl.e-small .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-small-input-icon-margin-left;
      padding-right: $zero-value;
    }
  }

  .e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-input-icon-margin-right;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-float-input textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'tailwind3' {
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
    }
    @if $input-skin-name == 'tailwind3' {
      left: 2px;
    }
  }

  .e-outline textarea,
  textarea.e-outline,
  .e-outline.e-float-input textarea,
  .e-outline.e-float-input.e-control-wrapper textarea,
  .e-outline.e-float-input.e-input-group textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
    }
  }

  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-valid-input:not(.e-input-focus) textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) textarea:focus ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-label-font-color-with-value;
    }
  }

  .e-rtl.e-outline.e-float-input.e-small textarea ~ label.e-float-text,
  .e-rtl.e-outline.e-float-input textarea ~ label.e-float-text.e-small,
  .e-rtl.e-outline.e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-rtl.e-outline.e-float-input textarea ~ label.e-float-text,
  .e-rtl.e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-rtl.e-outline.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-rtl.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $outline-float-label-top;
    }
  }

  .e-outline.e-float-input.e-small .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper.e-small .e-clear-icon::before,
  .e-outline.e-input-group.e-small .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper input.e-small:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-outline.e-float-input input.e-small:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input .e-clear-icon::before,
  .e-outline.e-small .e-input-group .e-clear-icon::before,
  .e-outline.e-small .e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-small-clear-icon;
    }
  }

  .e-outline.e-float-input .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-outline.e-input-group .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-clear-icon;
    }
  }

  .e-float-text-content,
  .e-float-text-content.e-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-float-label-font-size;
      color: $input-header-font-color;
      background: $input-bg-color;
    }
  }

  .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline label.e-float-text,
  .e-outline.e-float-input label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text,
  .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small label.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small textarea ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-float-text.e-small,
  .e-outline.e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-outline.e-float-input textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-outline.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $small-outline-float-label-font-size;
    }
  }

  .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-small .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper,
  .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper {
    line-height: $input-grup-icon-line-height;
  }

  .e-filled input.e-input#{$css},
  .e-filled.e-input-group input,
  .e-filled.e-input-group.e-control-wrapper input,
  .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-float-input:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-control .e-filled input.e-input,
  .e-control .e-filled.e-input-group input,
  .e-control .e-filled.e-input-group input.e-input,
  .e-control .e-filled.e-input-group.e-control-wrapper input,
  .e-control .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-control .e-filled.e-float-input input,
  .e-control .e-filled.e-float-input.e-control-wrapper input,
  .e-control.e-filled.e-input-group input,
  .e-control.e-filled.e-input-group input.e-input,
  .e-control.e-filled.e-input-group.e-control-wrapper input,
  .e-control.e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-control.e-filled.e-float-input input,
  .e-control.e-filled.e-float-input.e-control-wrapper input,
  .e-filled input.e-input.e-small#{$css},
  .e-filled.e-input-group.e-small input,
  .e-filled.e-input-group.e-small input.e-input,
  .e-small .e-filled.e-input-group input,
  .e-small .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small input,
  .e-filled.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper input,
  .e-small .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-small input,
  .e-filled.e-float-input.e-small input.e-input,
  .e-small .e-filled.e-float-input input,
  .e-small .e-filled.e-float-input input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-small input.e-input,
  .e-small .e-filled.e-float-input.e-control-wrapper input,
  .e-small .e-filled.e-float-input.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-small:not(.e-input-group) input.e-input,
  .e-small .e-filled.e-float-input:not(.e-input-group) input,
  .e-small .e-filled.e-float-input:not(.e-input-group) input.e-input .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-group) input.e-input,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input,
  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group textarea,
  .e-filled.e-input-group.e-control-wrapper textarea,
  .e-filled.e-float-input textarea,
  .e-filled.e-float-input.e-control-wrapper textarea,
  .e-filled textarea.e-input.e-small#{$css},
  .e-filled.e-input-group.e-small textarea,
  .e-filled.e-input-group.e-small textarea.e-input,
  .e-small .e-filled.e-input-group textarea,
  .e-small .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper textarea,
  .e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-float-input.e-small textarea,
  .e-filled.e-float-input.e-small textarea.e-input,
  .e-small .e-filled.e-float-input textarea,
  .e-small .e-filled.e-float-input textarea.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      box-sizing: border-box;
    }
  }

  .e-filled.e-float-input input,
  .e-filled.e-float-input textarea,
  .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border: $float-input-border;
      border-width: $zero-value;
    }
  }

  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-filled.e-input-group.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-filled.e-float-input.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-disabled):not(.e-input-focus) .e-input-in-wrap:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-bottom-width: $zero-value;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error) input,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-width: $zero-value;
    }
  }

  .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border-radius: $filled-input-grp-border-radius;
      padding: $filled-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-top: $filled-wrapper-margin;
      padding: $small-filled-wrapper-padding;
    }
  }

  .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border: $input-group-full-border;
      border-radius: $filled-input-grp-border-radius;
      border-width: $input-group-full-border-width;
      margin-top: $filled-wrapper-margin;
      padding: $filled-float-input-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small,
  .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-top: $filled-wrapper-margin;
      padding: $small-filled-float-input-wrapper-padding;
    }
  }

  .e-rtl.e-filled.e-input-group,
  .e-rtl.e-filled.e-input-group.e-control-wrapper,
  .e-rtl .e-filled.e-input-group,
  .e-rtl .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper,
  .e-rtl .e-filled.e-input-group.e-small,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $small-filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input,
  .e-rtl.e-filled.e-float-input.e-control-wrapper,
  .e-rtl .e-filled.e-float-input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-float-input-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input.e-small,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper,
  .e-rtl .e-filled.e-float-input.e-small,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $small-filled-float-input-wrapper-rtl-padding;
    }
  }

  .e-filled input.e-input#{$css},
  .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group input.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-filled.e-input-group textarea.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-filled.e-input-group.e-input-focus input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-input-padding;
    }
  }

  .e-filled .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $filled-input-padding-bottom;
    }
  }

  .e-filled .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $filled-small-input-padding-bottom;
    }
  }

  .e-filled .e-input#{$css}.e-small,
  .e-filled.e-input-group.e-small .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input,
  .e-filled.e-input-group.e-small .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-filled.e-input-group.e-small.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-input-padding;
    }
  }

  .e-filled.e-float-input input,
  .e-filled.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-float-input-padding;
    }
  }

  .e-filled.e-float-input.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-small input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-float-input-padding;
    }
  }

  .e-filled input.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-rtl .e-filled.e-input-group input.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-filled.e-input-group.e-rtl.e-input-focus input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-filled.e-float-input input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-rtl .e-filled.e-float-input input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-rtl input:focus,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-rtl .e-filled.e-float-input input:focus,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input:focus,
  .e-filled.e-float-input.e-rtl.e-input-focus input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-float-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-rtl .e-filled input.e-input.e-small#{$css},
  .e-filled input.e-input#{$css}.e-small.e-rtl,
  .e-small.e-rtl .e-filled input.e-input#{$css},
  .e-small .e-filled input.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-small.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group.e-small input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input.e-small,
  .e-rtl .e-filled.e-input-group input.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input.e-small,
  .e-small .e-filled.e-input-group.e-rtl input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-small.e-rtl .e-filled.e-input-group input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group input.e-input:focus,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-small .e-filled.e-input-group.e-rtl input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-rtl.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-filled.e-float-input.e-small.e-rtl input,
  .e-rtl .e-filled.e-float-input.e-small input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-filled.e-float-input.e-rtl input.e-small,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input.e-small,
  .e-rtl .e-filled.e-float-input input.e-small,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input.e-small,
  .e-small .e-filled.e-float-input.e-rtl input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-small.e-rtl .e-filled.e-float-input input,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper input:focus,
  .e-small.e-rtl .e-filled.e-float-input input:focus,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-small .e-filled.e-float-input.e-rtl input:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input,
  .e-small.e-rtl .e-filled.e-float-input.e-input-focus input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl.e-input-focus input,
  .e-small .e-filled.e-float-input.e-rtl.e-input-focus input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-float-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper,
  .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-filled.e-float-input.e-input-group.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-small,
  .e-small .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper,
  .e-filled.e-float-input.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-filled.e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-input-font-size;
    }
  }

  .e-filled.e-input-group.e-small:not(.e-float-input) .e-input,
  .e-small .e-filled.e-input-group:not(.e-float-input) .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $small-filled-default-input-min-height;
    }
  }

  .e-filled.e-float-input.e-small input,
  .e-small .e-filled.e-float-input input,
  .e-filled.e-float-input.e-input-group.e-small input,
  .e-small .e-filled.e-float-input.e-input-group input,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-small .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $small-filled-input-min-height;
    }
  }

  .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-input-group:not(.e-float-input) input.e-input,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $filled-default-input-min-height;
    }
  }

  .e-float-input.e-filled.e-input-group.e-control-wrapper input,
  .e-float-input.e-filled input,
  .e-float-input.e-filled.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $filled-input-min-height;
    }
  }

  .e-filled label.e-float-text,
  .e-filled.e-float-input label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-float-label-font-size;
      left: $filled-input-label-left;
      letter-spacing: $filled-float-letter-spacing;
      line-height: $input-filled-float-text-line-height;
      padding-left: $float-label-padding;
      pointer-events: none;
      right: $input-auto-width;
      top: $filled-input-label-top;
      transform: none;
      transition: transform 150ms cubic-bezier(.4, $zero-value, .2, 1), color 150ms cubic-bezier(.4, $zero-value, .2, 1);
      width: $input-full-position-width;
    }
  }

  .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-float-label-font-size;
      padding-left: $float-label-padding;
      top: $filled-input-label-top;
      transform: none;
      width: $input-full-position-width;
    }
  }

  .e-filled.e-float-input input:focus ~ label.e-float-text,
  .e-filled.e-float-input input:valid ~ label.e-float-text,
  .e-filled.e-float-input input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $filled-float-input-text-left;
    }
  }

  .e-filled.e-float-input textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
    }
  }

  .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-float-label-font-size;
      top: $filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top-after-floating;
    }
  }

  .e-small .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-small label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small textarea ~ label.e-float-text,
  .e-filled.e-float-input textarea ~ label.e-float-text.e-small,
  .e-filled.e-float-input textarea.e-small ~ label.e-float-text,
  .e-small .e-filled.e-float-input textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-small,
  .e-filled.e-float-input.e-control-wrapper textarea.e-small ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-float-label-font-size;
      top: $small-filled-input-label-top;
    }
  }

  .e-filled.e-float-input label.e-float-text,
  .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      right: $filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small label.e-float-text,
  .e-filled.e-float-input.e-small label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input label.e-float-text .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      right: $small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input .e-float-line,
  .e-float-input.e-filled.e-control-wrapper .e-float-line {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      bottom: $float-input-group-line-bottom;
      position: absolute;
    }
  }

  .e-float-input.e-filled .e-float-line,
  .e-float-input.e-filled .e-float-text,
  .e-float-input.e-filled.e-control-wrapper .e-float-line,
  .e-float-input.e-filled.e-control-wrapper .e-float-text,
  .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      right: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-filled.e-filled.e-input-group:not(.e-disabled):not(.e-float-icon-left)::after,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::before,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      bottom: $filled-input-icon-before-bottom;
    }
  }

  .e-filled.e-input-group .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-filled.e-input-group .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-icon-size;
      margin-bottom: $input-zero-padding-margin;
      margin-top: $input-zero-padding-margin;
      min-height: $filled-input-icon-min-height;
      min-width: $filled-input-icon-min-height;
      padding: $input-filled-icon-padding;
    }
  }

  .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $input-bgr-filled-control-icon-padding;
    }
  }

  .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-filled.e-input-group .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-input-icon-size;
      min-height: $small-filled-input-icon-min-height;
      min-width: $small-filled-input-icon-min-height;
      padding: $input-small-filled-group-icon-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $input-rtl-small-filled-group-icon-padding;
    }
  }

  .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-icon-size;
      @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
        padding: $input-filled-small-float-group-icon-padding;
        margin: $input-filled-small-float-group-icon-margin;
      }
      @else {
        margin-bottom: $zero-value;
        margin-top: $zero-value;
        padding: 8px;
      }
    }
  }

  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-input-icon-size;
      padding: $small-filled-input-padding;
    }
  }

  .e-filled.e-float-input .e-clear-icon,
  .e-filled.e-float-input.e-control-wrapper .e-clear-icon,
  .e-filled.e-input-group .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $filled-input-clear-icon-size;
      padding: $input-bgr-filled-grp-icon-padding;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-clear-icon-size;
      padding: $input-clear-icon-padding;
    }
  }

  .e-filled.e-input-group .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-height: $filled-input-icon-min-height;
      min-width: $filled-input-icon-min-height;
      padding: $input-bgr-filled-grp-icon-padding;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $filled-input-icon-min-height;
      min-width: $filled-input-icon-min-height;
      padding: $input-clear-icon-padding;
    }
  }

  .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $input-zero-padding-margin;
      margin: $filled-float-input-clear-icon-margin;
      height: $filled-input-clear-icon-height;
    }
  }

  .e-filled.e-input-group.e-small .e-clear-icon,
  .e-filled.e-input-group .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $small-filled-input-clear-icon-size;
      min-height: $small-filled-input-icon-min-height;
      min-width: $small-filled-input-icon-min-height;
      padding: $small-filled-input-padding;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-input-clear-icon-size;
      min-height: $small-filled-input-icon-min-height;
      min-width: $small-filled-input-icon-min-height;
      padding: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-float-input .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-float-input .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-float-input.e-control-wrapper .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $small-filled-input-padding;
    }
  }

  .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-rtl-input-small-bgr-clear-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $input-rtl-small-filled-group-icon-padding;
    }
  }

  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $input-rtl-small-filled-group-icon-padding;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-filled.e-input-group .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-clear-icon-size;
    }
  }

  .e-filled.e-float-input.e-small .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-clear-icon::before,
  .e-filled.e-input-group.e-small .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-filled.e-float-input input.e-small:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input .e-clear-icon::before,
  .e-small .e-filled.e-input-group .e-clear-icon::before,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-input-clear-icon-size;
    }
  }

  .e-filled.e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $small-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-style: none;
      border-width: $zero-value;
    }
  }

  .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $small-filled-input-label-top;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-icon-size;
      margin: $input-zero-padding-margin;
      min-height: $filled-input-left-icon-min-height;
      min-width: $filled-input-left-icon-min-width;
      padding: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon.e-small,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
  .e-small .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $small-filled-input-icon-size;
      margin: $input-zero-padding-margin;
      min-height: $small-filled-input-left-icon-min-height;
      min-width: $small-filled-input-left-icon-min-width;
      padding: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin: $input-zero-padding-margin;
      min-height: $filled-input-left-icon-min-height;
      min-width: $filled-input-left-icon-min-width;
      padding: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin: $input-zero-padding-margin;
      min-height: $small-filled-input-left-icon-min-height;
      min-width: $small-filled-input-left-icon-min-width;
      padding: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-filled.e-input-group .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-small .e-filled.e-input-group .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-right: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $input-zero-padding-margin;
    }
  }

  .e-filled.e-rtl.e-input-group .e-input-group-icon,
  .e-filled.e-rtl.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-input-group.e-small.e-rtl .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-rtl .e-input-group-icon,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl.e-small .e-filled.e-input-group .e-input-group-icon,
  .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $input-zero-padding-margin;
      margin-right: $input-zero-padding-margin;
    }
  }

  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group.e-multi-line-input textarea,
  .e-filled.e-input-group.e-control-wrapper.e-multi-line-input textarea,
  .e-filled.e-float-input.e-multi-line-input textarea,
  .e-filled.e-float-input.e-control-wrapper.e-multi-line-input textarea {
    box-sizing: border-box;
  }

  .e-filled textarea.e-input#{$css},
  .e-filled.e-input-group textarea,
  .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-input-focus textarea,
  .e-filled.e-input-group.e-input-focus textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper textarea,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-textarea-padding;
    }
  }

  .e-filled.e-float-input textarea,
  .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-small textarea,
  .e-filled.e-input-group.e-small textarea.e-input,
  .e-filled.e-input-group textarea.e-small,
  .e-filled.e-input-group textarea.e-input.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-small .e-filled.e-input-group textarea,
  .e-small .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-input-focus.e-small textarea,
  .e-filled.e-input-group.e-input-focus.e-small textarea.e-input,
  .e-filled.e-input-group.e-input-focus textarea.e-small,
  .e-filled.e-input-group.e-input-focus textarea.e-input.e-small,
  .e-filled.e-input-group.e-input-focus textarea.e-input.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-small .e-filled.e-input-group.e-input-focus textarea,
  .e-small .e-filled.e-input-group.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-textarea-padding;
    }
  }

  .e-filled.e-float-input.e-small textarea,
  .e-filled.e-float-input textarea.e-small,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea,
  .e-filled.e-float-input.e-control-wrapper textarea.e-small,
  .e-small .e-filled.e-float-input textarea,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $small-filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-float-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $small-filled-float-textarea-wrapper-padding;
    }
  }

  .e-filled textarea.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-float-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-rtl .e-filled textarea.e-input.e-small#{$css},
  .e-filled textarea.e-input#{$css}.e-small.e-rtl,
  .e-small.e-rtl .e-filled textarea.e-input#{$css},
  .e-small .e-filled textarea.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input.e-small,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input.e-small,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea.e-small,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-small,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea.e-small,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea.e-small,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-small-float-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border: $input-group-full-border;
      border-width: $zero-value;
      margin-left: $filled-float-input-wrap-margin-left;
    }
  }

  .e-rtl .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $input-zero-padding-margin;
      margin-right: $filled-float-input-wrap-margin-right;
    }
  }

  .e-filled.e-float-input.e-float-icon-left.e-small .e-input-in-wrap,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-small .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $small-filled-float-input-wrap-margin-left;
    }
  }

  .e-rtl.e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small.e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small.e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $input-zero-padding-margin;
      margin-right: $small-filled-float-input-wrap-margin-right;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-group-animation;
      bottom: $float-input-group-line-bottom;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-group-animation-width;
      bottom: $float-input-group-line-bottom;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      width: $input-zero-width;
    }
  }

  .e-filled.e-input-group.e-float-icon-left,
  .e-filled.e-input-group.e-success.e-float-icon-left,
  .e-filled.e-input-group.e-warning.e-float-icon-left,
  .e-filled.e-input-group.e-error.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-success.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-warning.e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-error.e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border: $input-group-full-border;
      border-width: $input-group-full-border-width;
    }
  }

  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append:not(.e-outline) .e-input-in-wrap,
  .e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend:not(.e-outline) .e-input-in-wrap {
    @if $input-skin-name == 'material' {
      border-bottom: 1px solid;
      border-bottom-color: $input-box-border-color;
    }
  }

  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
  .e-error.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
    @if $input-skin-name == 'material' {
      border-bottom: 1px solid;
      border-bottom-color: $error-font-color;
    }
  }

  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend.e-append .e-input-in-wrap,
  .e-success.e-input-group.e-control-container.e-control-wrapper.e-float-input.e-prepend .e-input-in-wrap {
    @if $input-skin-name == 'material' {
      border-bottom: 1px solid;
      border-bottom-color: $success-font-color;
    }
  }

  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input:not(.e-outline).e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success).e-warning:not(.e-error),
  .e-float-input:not(.e-outline).e-control-wrapper.e-input-group.e-prepend.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning).e-error,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error input,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled).e-success:not(.e-warning):not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success).e-warning:not(.e-error) textarea,
  .e-float-input:not(.e-outline).e-prepend.e-input-focus:not(.e-input-group):not(.e-float-icon-left):not(.e-disabled):not(.e-success):not(.e-warning).e-error textarea,
  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-success:not(.e-warning):not(.e-error),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-input-focus:not(.e-float-icon-left).e-warning:not(.e-success):not(.e-error),
  .e-input-group:not(.e-outline).e-prepend.e-input-focus:not(.e-float-icon-left).e-error:not(.e-success):not(.e-warning),
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-success:not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-warning:not(.e-success):not(.e-error) .e-input-in-wrap,
  .e-input-group:not(.e-outline).e-float-icon-left.e-prepend.e-input-focus.e-error:not(.e-success):not(.e-warning) .e-input-in-wrap,
  .e-input-group:not(.e-outline).e-prepend:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-prepend.e-success:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-prepend.e-warning:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-prepend.e-error:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-success:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-warning:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend.e-error:not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-input-group:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) input:not([disabled]),
  .e-float-input:not(.e-outline).e-control-wrapper.e-prepend:hover:not(.e-input-group):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' {
      border-bottom: transparent;
    }
  }

  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
    .e-filled.e-float-input.e-control-container.e-append:not(.e-prepend) {
      padding: $input-zero-padding-margin;

      input {
        padding: $filled-float-append-padding;
      }

      label.e-float-text {
        padding-left: $filled-float-append-padding-left;
      }

      .e-input-in-wrap .e-input-group-icon {
        @if $input-skin-name == 'material' {
          padding-right: 17px;
        }
        @else {
          margin-right: 10px;
        }
      }
    }
  }
}

/* stylelint-disable-line no-empty-source */

@include export-module('input-theme') {

  /*! input theme */

  input.e-input#{$css},
  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  textarea.e-input#{$css},
  .e-float-input input,
  .e-float-input.e-control-wrapper input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea {
    background: $input-bg-color;
    border-color: $input-box-border-color;
    color: $input-font-color;
  }

  .e-input-group,
  .e-input-group.e-control-wrapper,
  .e-float-input,
  .e-float-input.e-input-group,
  .e-float-input.e-control-wrapper,
  .e-float-input.e-input-group.e-control-wrapper {
    background: $input-bg-color;
    color: $input-font-color;
    @if $input-skin-name == 'fluent2' {
      border-bottom-color: $input-border-bottom-color;
    }
  }

  .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    background: transparent;
    border-color: $input-box-border-color;
    color: $input-icon-font-color;
    @if ($input-skin-name == 'FluentUI') {
      border-color: $input-group-icon-border-color;
    }
    @if ($input-skin-name == 'Material3' or $input-skin-name == 'fluent2') {
      margin: $input-zero-padding-margin;
    }
  }

  .e-input-group.e-disabled .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon,
  .e-float-input.e-disabled .e-clear-icon,
  .e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
  .e-input-group.e-disabled .e-clear-icon,
  .e-input-group.e-control-wrapper.e-disabled .e-clear-icon {
    color: $input-group-disabled-color;
  }

  /* stylelint-disable property-no-vendor-prefix */
  /* stylelint-disable selector-no-vendor-prefix */
  .e-input#{$css}[disabled],
  .e-input-group .e-input[disabled],
  .e-input-group.e-control-wrapper .e-input[disabled],
  .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-disabled,
  .e-float-input input[disabled],
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input textarea[disabled],
  .e-float-input.e-control-wrapper textarea[disabled],
  .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-disabled  {
    @if ($input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind3') {
      -webkit-text-fill-color: $input-disable-font-color;
    }
    @if $input-skin-name == 'tailwind3'
    {
      -webkit-text-fill-color: $content-text-color-disabled;
    }
    background: $input-disable-bg-color;
    color: $input-disable-font-color;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      background-image: linear-gradient(90deg, $input-disable-border-color 0, $input-disable-border-color 33%, transparent 0);
      background-position: bottom -1px left 0;
      background-repeat: repeat-x;
      background-size: 4px 1px;
      border-bottom-color: transparent;
    }

    @else {
      border-color: $input-disable-border-color;
    }
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-float-input input,
  .e-float-input.e-control-wrapper input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper textarea,
  .e-input-group .e-input[disabled],
  .e-input-group.e-control-wrapper .e-input[disabled],
  .e-input-group.e-disabled input.e-input,
  .e-input-group.e-control-wrapper.e-disabled input.e-input,
  .e-input-group.e-disabled textarea.e-input,
  .e-input-group.e-control-wrapper.e-disabled textarea.e-input {
    background: none;
    color: inherit;
  }

  .e-input-group .e-input[readonly],
  .e-input-group.e-control-wrapper .e-input[readonly],
  .e-float-input input[readonly],
  .e-float-input.e-control-wrapper input[readonly],
  .e-float-input textarea[readonly],
  .e-float-input.e-control-wrapper textarea[readonly] {
    background: $input-readonly-bg-color;
    @if $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3'  {
      color: $input-readonly-color;
    }
    @if $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' {
      color: inherit;
    }
  }

  .e-input-group .e-input[readonly] ~ span.e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon,
  .e-float-input input[readonly] ~ span.e-input-group-icon,
  .e-float-input.e-control-wrapper input[readonly] ~ span.e-input-group-icon,
  .e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      background: $input-readonly-bg-color;
      color: $input-icon-font-color;
    }
  }

  .e-float-input.e-disabled input,
  .e-float-input.e-control-wrapper.e-disabled input,
  .e-float-input.e-disabled textarea,
  .e-float-input.e-control-wrapper.e-disabled textarea,
  .e-float-input input[disabled],
  .e-float-input.e-control-wrapper input[disabled],
  .e-float-input textarea[disabled],
  .e-float-input.e-control-wrapper textarea[disabled] {
    color: inherit;
  }

  /*! Added color to textbox for disbaled state */
  .e-float-input:not(.e-disabled) input[disabled],
  .e-float-input.e-control-wrapper:not(.e-disabled) input[disabled],
  .e-float-input:not(.e-disabled) textarea[disabled],
  .e-float-input.e-control-wrapper:not(.e-disabled) textarea[disabled] {
    -webkit-text-fill-color: $input-disable-font-color;
    color: $input-disable-font-color;
  }

  .e-input-group.e-disabled .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    background: $input-disabled-group-bg-color;
    border-color: $input-disable-border-color;
  }

  .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
      background: $input-hover-bg-color;
    }
    @if $input-skin-name == 'bootstrap4' {
      border-color: $input-group-border-color-hover;
    }
    @if $input-skin-name == 'highcontrast' {
      border-color: $input-group-border-color-hover;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border: $input-icon-hover-border;
      background: $input-icon-hover-bg-color;
    }
    color: $input-group-hovered-color;
  }

  .e-input-group.e-disabled .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-disabled .e-input-group-icon:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      background: transparent;
    }
  }

  .e-input#{$css}.e-success,
  .e-input#{$css}.e-success:focus,
  .e-input-group.e-success input.e-input,
  .e-input-group.e-control-wrapper.e-success input.e-input,
  .e-input-group.e-success .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-success .e-input-group-icon,
  .e-input-group.e-success textarea.e-input,
  .e-input-group.e-control-wrapper.e-success textarea.e-input {
    border-color: $input-success-color;
  }

  .e-input#{$css}.e-warning,
  .e-input#{$css}.e-warning:focus,
  .e-input-group.e-warning input.e-input,
  .e-input-group.e-control-wrapper.e-warning input.e-input,
  .e-input-group.e-warning .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
  .e-input-group.e-warning textarea.e-input,
  .e-input-group.e-control-wrapper.e-warning textarea.e-input {
    border-color: $input-warning-color;
  }

  .e-input + .e-input-group-icon:not(.e-input-group):not(.e-float-icon-left):last-child:hover,
  .e-input-group.e-success .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group.e-success.e-control-wrapper .e-input + .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-color: $input-success-color;
    }
  }

  .e-input#{$css}.e-error,
  .e-input#{$css}.e-error:focus,
  .e-input-group.e-error input.e-input,
  .e-input-group.e-control-wrapper.e-error input.e-input,
  .e-input-group.e-control-wrapper.e-error .e-input-group-icon,
  .e-input-group.e-error .e-input-group-icon,
  .e-input-group.e-error textarea.e-input,
  .e-input-group.e-control-wrapper.e-error textarea.e-input {
    border-color: $input-error-color;
  }

  label.e-float-text,
  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    color: $input-header-font-color;
    @if $input-skin-name == 'highcontrast' {
      color: $input-placeholder;
    }
  }

  .e-float-input.e-error label.e-float-text,
  .e-float-input.e-control-wrapper.e-error label.e-float-text,
  .e-float-input.e-error input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text {
    color: $input-error-color;
    @if $input-skin-name == 'highcontrast' {
      color: $content-font;
    }
    @if ($input-skin-name == 'FluentUI') {
      color: $float-label-font-color;
    }
  }

  .e-float-input input,
  .e-float-input textarea,
  .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper textarea,
  .e-input-group,
  .e-input-group.e-control-wrapper {
    border-bottom-color: $input-box-border-color;
  }

  .e-float-input.e-success input,
  .e-float-input.e-success textarea,
  .e-float-input.e-control-wrapper.e-success input,
  .e-float-input.e-control-wrapper.e-success textarea {
    @include input-state-color ($input-success-color);
  }

  .e-float-input.e-warning input,
  .e-float-input.e-control-wrapper.e-warning input,
  .e-float-input.e-warning textarea,
  .e-float-input.e-control-wrapper.e-warning textarea {
    @include input-state-color ($input-warning-color);
  }

  .e-float-input.e-error input,
  .e-float-input.e-control-wrapper.e-error input,
  .e-float-input.e-error textarea,
  .e-float-input.e-control-wrapper.e-error textarea {
    @include input-state-color ($input-error-color);
  }

  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  label.e-float-text,
  .e-float-input label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'highcontrast' {
      color: $content-font-alt;
    }
  }

  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input:not(.e-input-group) .e-float-line::before,
  .e-float-input:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      background: $input-active-accent-color;
    }
  }

  .e-float-input.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-success:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-success:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-success:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      background: $input-success-color;
    }
  }

  .e-float-input.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-warning:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-warning:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-warning:not(.e-input-group) .e-float-line::after  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      background: $input-warning-color;
    }
  }

  input.e-input#{$css}:-moz-placeholder,
  input.e-input#{$css}:-moz-placeholder,
  textarea.e-input#{$css}:-moz-placeholder,
  input.e-input#{$css}::-moz-placeholder,
  textarea.e-input#{$css}::-moz-placeholder,
  .e-input-group input.e-input:-moz-placeholder,
  .e-input-group input.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder,
  .e-input-group input.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper input.e-input:-moz-placeholder,
  .e-input-group textarea.e-input:-moz-placeholder,
  .e-input-group.e-control-wrapper textarea.e-input:-moz-placeholder,
  .e-input-group input.e-input::-moz-placeholder,
  .e-input-group.e-control-wrapper input.e-input::-moz-placeholder,
  .e-input-group textarea.e-input::-moz-placeholder,
  .e-input-group.e-control-wrapper textarea.e-input::-moz-placeholder {
    color: $input-placeholder;
  }

  input.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-input#{$css}::-webkit-input-placeholder,
  .e-input-group input.e-input::-webkit-input-placeholder,
  .e-input-group textarea.e-input::-webkit-input-placeholder,
  .e-input-group.e-control-wrapper input.e-input::-webkit-input-placeholder,
  .e-input-group.e-control-wrapper textarea.e-input::-webkit-input-placeholder {
    color: $input-placeholder;
  }

  input.e-input#{$css}:-ms-input-placeholder,
  textarea.e-input#{$css}:-ms-input-placeholder,
  .e-input-group input.e-input:-ms-input-placeholder,
  .e-input-group.e-control-wrapper input.e-input:-ms-input-placeholder,
  .e-input-group.e-control-wrapper textarea.e-input:-ms-input-placeholder,
  .e-input-group textarea.e-input:-ms-input-placeholder {
    color: $input-placeholder;
  }

  .e-float-input:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input:not(.e-error):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus):not(.e-disabled) input:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input:not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top) {
    color: $input-placeholder;
  }

  .e-float-input.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-error:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-error:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-error:not(.e-input-group) .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      background: $input-error-color;
    }
  }

  .e-input-group:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:active {
    @if $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
      background: $input-group-pressed-bg;
    }
    color: $input-group-pressed-color;
    @if $input-skin-name == 'bootstrap' {
      -webkit-box-shadow: $input-icon-shadow;
      box-shadow: $input-icon-shadow;
    }
    @if $input-skin-name == 'bootstrap4' {
      -webkit-box-shadow: $input-icon-shadow;
      border-color: $pressed-border-color;
      box-shadow: $input-icon-shadow;
    }
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
      border-right-color: transparent;
    }
  }

  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-float-input.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small:not(.e-float-icon-left):not(.e-input-group):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled):not(.e-float-input):not(.e-rtl) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:last-child:hover,
  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input + .e-input-group-icon:last-child:hover,
  .e-input-group:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:not(:last-child):hover + .e-input-group-icon:not(:last-child):hover,
  .e-input-group:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper:not(.e-rtl):not(.e-disabled) .e-input-group-icon:last-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-right-color: transparent;
      background-color: $input-hover-bg-color;
    }
  }

  .e-float-input.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-group-icon:not(:last-child):hover,
  .e-input-group.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-float-icon-left .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-small:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left .e-input-group-icon:first-child:hover,
  .e-input-group.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group.e-control-wrapper.e-rtl:not(.e-disabled) .e-input-group-icon:last-child:hover,
  .e-input-group:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      border-left-color: transparent;
    }
  }

  input.e-input#{$css}::selection,
  textarea.e-input#{$css}::selection,
  .e-input-group input.e-input::selection,
  .e-input-group.e-control-wrapper input.e-input::selection,
  .e-float-input input::selection,
  .e-float-input.e-control-wrapper input::selection,
  .e-input-group textarea.e-input::selection,
  .e-input-group.e-control-wrapper textarea.e-input::selection,
  .e-float-input textarea::selection,
  .e-float-input.e-control-wrapper textarea::selection,
  .e-float-input.e-small textarea::selection,
  .e-float-input textarea::selection {
    @include input-selection;
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-input-in-wrap .e-float-line::after,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input)::after,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-group-animation-bg;
    }
  }

  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
    @if $input-skin-name == 'fluent2' {
      border-top: $input-active-border-color;
    }
  }

  .e-input-group::before,
  .e-input-group::after,
  .e-input-group.e-control-wrapper::before,
  .e-input-group.e-control-wrapper::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-animation-bg;
    }
  }

  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-success::before,
  .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-success::after,
  .e-input-group.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-success::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input).e-success::after,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input) .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-success .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-success .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-success .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left).e-success .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-success .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-success .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap .e-float-line::after,
  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left.e-success:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-success:not(.e-float-input)::after,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-success .e-float-line::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-success .e-float-line::after,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-float-line::after  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-group-success-animation-bg;
    }
  }

  .e-input-group.e-success::before,
  .e-input-group.e-success::after,
  .e-input-group.e-control-wrapper.e-success::before,
  .e-input-group.e-control-wrapper.e-success::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-success-animation-bg;
    }
  }

  .e-input-group:not(.e-float-icon-left).e-warning:not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left).e-warning:not(.e-float-input)::after,
  .e-input-group.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-warning:not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-warning:not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input) .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-warning .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-warning .e-float-line::after,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-input-in-wrap .e-float-line::after,
  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left.e-warning:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-warning:not(.e-float-input)::after,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::before,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-float-icon-left.e-warning .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-group-warning-animation-bg;
    }
  }

  .e-input-group.e-warning::before,
  .e-input-group.e-warning::after,
  .e-input-group.e-control-wrapper.e-warning::before,
  .e-input-group.e-control-wrapper.e-warning::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-warning-animation-bg;
    }
  }

  .e-input-group:not(.e-float-icon-left).e-error:not(.e-float-input)::before,
  .e-input-group:not(.e-float-icon-left).e-error:not(.e-float-input)::after,
  .e-input-group.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::before,
  .e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error:not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::before,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input) .e-input-in-wrap::after,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-error .e-float-line::before,
  .e-float-input.e-input-group:not(.e-float-icon-left).e-error .e-float-line::after,
  .e-float-input.e-input-group.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper:not(.e-float-icon-left).e-error .e-float-line::after,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::before,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap .e-float-line::after,
  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::before,
  .e-filled.e-input-group.e-float-icon-left.e-error:not(.e-float-input)::after,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::before,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-error:not(.e-float-input)::after,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-float-icon-left.e-error .e-float-line::after,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::before,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-float-line::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-group-error-animation-bg;
    }
  }

  .e-input-group.e-error::before,
  .e-input-group.e-error::after,
  .e-input-group.e-control-wrapper.e-error::before,
  .e-input-group.e-control-wrapper.e-error::after {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      @include input-group-error-animation-bg;
    }
  }

  .e-input-group.e-success .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-success .e-input-group-icon,
  .e-input-group.e-warning .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
  .e-input-group.e-error .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-error .e-input-group-icon {
    color: $input-icon-font-color;
  }

  .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
  .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
    color: $input-icon-font-color;
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'FluentUI' {
      color: $input-group-hovered-color;
    }
  }

  .e-input-group.e-success:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-success:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-warning:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-warning:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-error:not(.e-disabled) .e-input-group-icon:active,
  .e-input-group.e-control-wrapper.e-error:not(.e-disabled) .e-input-group-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-icon-font-color;
    }
  }

  .e-input-group input.e-input,
  .e-input-group.e-control-wrapper input.e-input,
  .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
    border-color: $input-box-border-color;
  }

  .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
    @if $input-skin-name != 'fluent2' {
      border-color: $input-active-border-color;
    }
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      -webkit-box-shadow: $input-border-shadow;
      box-shadow: $input-border-shadow;
    }
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI'  {
      border-radius: $input-groupo-focus-border-radius;
      box-shadow: $input-group-focus-box-shadow;
    }
    @if $input-skin-name == 'bootstrap4'  {
      transition: $input-transition-shadow;
    }
    @if $input-skin-name == 'fluent2' {
      border-bottom-color: $input-active-border-color;
      padding-bottom: $e-float-input-flu-padding-bottom;
      border-bottom-width: $border-2;
    }
  }

  textarea.e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'fluent2' {
      border-bottom-color: $input-active-border-color;
      padding-bottom: $text-area-focus-padding-bottom;
      border-bottom-width: $border-0;
    }
  }

  .e-input-group .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) input:focus,
  .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
  .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
  .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
      box-shadow: none;
    }
  }

  .e-input#{$css}:focus:not(.e-success):not(.e-warning).e-error,
  .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
  .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error,
  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-error-border-shadow;
      box-shadow: $input-error-border-shadow;
    }
  }

  .e-input#{$css}:focus:not(.e-error):not(.e-warning).e-success,
  .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
  .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI'  {
      -webkit-box-shadow: $input-success-border-shadow;
      box-shadow: $input-success-border-shadow;
    }
  }

  .e-input#{$css}:focus:not(.e-success):not(.e-error).e-warning,
  .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
  .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
  .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
  .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
  .e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning,
  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-warning-border-shadow;
      box-shadow: $input-warning-border-shadow;
    }
  }

  .e-input-group:not(.e-float-input):not(.e-float-icon-left) .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-float-input):not(.e-float-icon-left) .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group:not(.e-float-input):not(.e-float-icon-left).e-input-focus .e-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap .e-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-float-input):not(.e-float-icon-left).e-input-focus .e-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input).e-input-focus .e-input-in-wrap .e-input:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      box-shadow: none;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error) input.e-input:focus,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) input.e-input:focus,
  .e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-input-focus input.e-input,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error).e-input-focus input.e-input,
  .e-input-group:not(.e-success):not(.e-warning):not(.e-error) textarea.e-input:focus,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) textarea.e-input:focus {
    border-color: $input-group-active-border-color;
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-focus;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
      border-color: $input-group-border-color-focus;
    }
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      -webkit-box-shadow: $input-border-shadow;
      box-shadow: $input-border-shadow;
    }
    @if $input-skin-name == 'bootstrap4'  {
      transition: $input-transition-shadow;
    }
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
      border-color: $input-group-border-color-focus;
      border-radius: $input-groupo-focus-border-radius;
      box-shadow: $input-group-focus-box-shadow;
    }
  }

  .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success,
  .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'FluentUI' {
      -webkit-box-shadow: $input-success-border-shadow;
      box-shadow: $input-success-border-shadow;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3') {
      border-color: $input-group-border-right-focus;
    }
  }

  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon,
  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-focus.e-control-wrapper.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
  .e-input-focus.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5.3') {
      border-color: $input-group-border-left-focus;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
  .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon {
    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3') {
      border-color: transparent;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-input-focus,
  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-input-focus,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus,
  .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus,
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap.e-input-focus {
    @if $input-skin-name == 'fluent2' {
      border-bottom-color: $input-group-focus-border-bottom-color;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-full-border-color;
    }
    @else if $input-skin-name == 'fluent2' {
      border-bottom-color: $input-group-full-border-bottom-color;
    }
  }

  .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      border-color: $input-group-full-border-color;
    }
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' {
      box-shadow: $input-group-border-shadow;
    }
    @if $input-skin-name == 'FluentUI' {
      box-shadow: none;
    }
  }

  .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' {
      border-color: $input-active-border-color;
    }
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      -webkit-box-shadow: $input-border-shadow;
      box-shadow: $input-border-shadow;
    }
    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      box-shadow: $input-group-focus-box-shadow;
    }
  }

  .e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
      border-color: $input-disable-border-color;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input:focus,
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input:focus,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input,
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-input,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border-bottom-color: transparent;
      border-top-color: transparent;
    }
  }

  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
  .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input,
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' {
      border-bottom-color: transparent;
      border-top-color: transparent;
    }
  }

  .e-input-group.e-success,
  .e-input-group.e-control-wrapper.e-success,
  .e-float-icon-left.e-input-group.e-success,
  .e-float-icon-left.e-control-wrapper.e-input-group.e-success,
  .e-input-group.e-warning,
  .e-input-group.e-control-wrapper.e-warning,
  .e-float-icon-left.e-input-group.e-warning,
  .e-float-icon-left.e-input-group.e-control-wrapper.e-warning,
  .e-input-group.e-error,
  .e-input-group.e-control-wrapper.e-error,
  .e-float-icon-left.e-input-group.e-error,
  .e-float-icon-left.e-input-group.e-control-wrapper.e-error,
  .e-input-group.e-float-icon-left,
  .e-input-group.e-control-wrapper.e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: transparent;
    }
  }

  .e-input-group.e-success,
  .e-input-group.e-control-wrapper.e-success,
  .e-input-group.e-success:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left) {
    @include input-state-color ($input-group-success-color);
  }

  .e-input-group.e-success.e-input-focus,
  .e-input-group.e-control-wrapper.e-success.e-input-focus,
  .e-input-group.e-success:not(.e-float-icon-left).e-input-focus,
  .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left).e-input-focus {
    @if $skin-name == 'tailwind3' {
      box-shadow: $input-success-focus-box-shadow;
    }
  }

  .e-input-group.e-float-icon-left.e-success .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-success .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-state-color ($input-group-success-color);
    }
  }

  .e-input-group.e-warning,
  .e-input-group.e-control-wrapper.e-warning,
  .e-input-group.e-warning:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left) {
    @include input-state-color ($input-group-warning-color);
  }

  .e-input-group.e-warning.e-input-focus,
  .e-input-group.e-control-wrapper.e-warning.e-input-focus,
  .e-input-group.e-warning:not(.e-float-icon-left).e-input-focus,
  .e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left).e-input-focus {
    @if $skin-name == 'tailwind3'  {
      box-shadow: $input-warning-focus-box-shadow;
    }
  }

  .e-input-group.e-float-icon-left.e-warning .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-warning .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-state-color ($input-group-warning-color);
    }
  }

  .e-input-group.e-error,
  .e-input-group.e-control-wrapper.e-error,
  .e-input-group.e-error:not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
    @include input-state-color ($input-group-error-color);
  }

  .e-input-group.e-error.e-input-focus,
  .e-input-group.e-control-wrapper.e-error.e-input-focus,
  .e-input-group.e-error:not(.e-float-icon-left).e-input-focus,
  .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left).e-input-focus {
    @if $skin-name == 'tailwind3' {
      box-shadow: $input-error-focus-box-shadow;
    }
  }

  .e-input-group.e-float-icon-left.e-error .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-error .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      @include input-state-color ($input-group-error-color);
    }
  }

  .e-float-input .e-clear-icon,
  .e-float-input.e-control-wrapper .e-clear-icon,
  .e-input-group .e-clear-icon,
  .e-input-group.e-control-wrapper .e-clear-icon {
    color: $input-clear-icon-color;
  }

  .e-float-input .e-clear-icon:active,
  .e-float-input.e-control-wrapper .e-clear-icon:active,
  .e-input-group .e-clear-icon:active,
  .e-input-group.e-control-wrapper .e-clear-icon:active {
    @if ($input-skin-name == 'FluentUI') {
      color: $input-group-pressed-color;
    }
  }

  .e-float-input .e-clear-icon:hover,
  .e-float-input.e-control-wrapper .e-clear-icon:hover,
  .e-input-group .e-clear-icon:hover,
  .e-input-group.e-control-wrapper .e-clear-icon:hover {
    color: $input-clear-icon-hover-color;
    @if ($input-skin-name == 'FluentUI') {
      background: $input-clear-icon-hover-bg-color;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border: $input-clear-icon-hover-border;
      background: $input-clear-icon-hover-bg-color;
    }
  }

  .e-float-input:not(.e-disabled) .e-clear-icon:hover,
  .e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
  .e-input-group:not(.e-disabled) .e-clear-icon:hover,
  .e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
      color: $input-clear-icon-hover-color;
    }
    @if ($input-skin-name == 'FluentUI') {
      background: $input-clear-icon-hover-bg-color;
    }
  }

  .e-float-input.e-input-focus .e-input:focus,
  .e-float-input.e-control-wrapper.e-input-focus .e-input:focus {
    border-bottom-color: transparent;
    border-top-color: transparent;
  }

  .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) input label.e-float-text.e-label-top,
  .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea label.e-float-text.e-label-top,
  .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea label.e-float-text.e-label-top {
    @if $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
      color: $float-label-font-color;
    }
    @else {
      color: $float-label-top-font-color;
    }
  }

  .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,

  .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    color: $input-header-font-color;
    @if $input-skin-name == 'highcontrast' {
      color: $input-placeholder;
    }
  }

  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    color: $float-label-font-color;
  }

  .e-float-input.e-input-group.e-disabled .e-float-text,
  .e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-float-input input[disabled] ~ label.e-float-text,
  .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-disabled label.e-float-text,
  .e-float-input.e-disabled label.e-float-text.e-label-top,
  .e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input textarea[disabled] ~ label.e-float-text,
  .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
  .e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    color: $float-label-disbale-font-color;
  }

  .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-active-accent-color;
    }
  }

  input.e-input#{$css}:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]):not(:focus),
  textarea.e-input#{$css}:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabled]) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-hover;
    }
    @else if $input-skin-name == 'fluent2' {
      border-bottom-color: $input-group-full-border-bottom-color;
    }
  }

  .e-underline.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-underline.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-underline.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-underline.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-underline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-underline.e-float-input.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-underline.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-underline.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover {
    @if $input-skin-name == 'fluent' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'bootstrap5.3' and $input-skin-name != 'tailwind3' and $input-skin-name != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'FluentUI' and $input-skin-name != 'fluent2' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]):not(:focus),
  .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]):not(:focus),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]):not(:focus),
  .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]):not(:focus) {
    @if $input-skin-name == 'highcontrast' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name != 'material' and $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      border-color: $input-group-border-color-focus;
    }
  }

  .e-input-group:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-input-group.e-control-wrapper:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input.e-control-wrapper:active:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-float-input:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper:active:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' or $input-skin-name == 'FluentUI' {
      border-color: $input-active-border-color;
    }
  }

  .e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-float-input.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input-in-wrap,
  .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-input-group.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) .e-input-in-wrap:hover,
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
  .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-group-border-color-hover;
    }
  }

  .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input,
  .e-outline.e-float-input.e-input-group,
  .e-outline.e-float-input.e-control-wrapper,
  .e-outline.e-float-input.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-font-color;
    }
  }

  .e-outline.e-input-group.e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-disabled,
  .e-outline.e-float-input.e-disabled,
  .e-outline.e-float-input.e-input-group.e-disabled,
  .e-outline.e-float-input.e-control-wrapper.e-disabled,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-disabled-input-font-color;
    }
  }

  .e-outline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-outline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-hover-border-color;
      color: $outline-hover-font-color;
    }
  }

  .e-underline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-input-group.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-input-group.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-input-group.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-color: $outline-hover-border-color;
      color: $outline-hover-font-color;
    }
  }

  .e-underline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-input-group.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input.e-control-wrapper:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-input-group.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-input-group.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-underline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-bottom-color: $underline-hover-border-color;
      color: $outline-hover-font-color;
    }
  }

  .e-outline.e-input-group.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-input-group.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-valid-input:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input.e-float-icon-left:hover.e-valid-input:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input.e-float-icon-left:hover.e-valid-input:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left.e-valid-input:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input.e-control-wrapper.e-float-icon-left.e-valid-input:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
  .e-outline.e-float-input:hover.e-valid-input:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
  .e-outline.e-float-input:hover.e-valid-input:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-hover-border-color;
    }
  }

  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-active-border-color;
      box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
    }
  }

  .e-outline.e-input-group:not(.e-input-focus),
  .e-outline.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-float-icon-left:not(.e-input-focus),
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-input-focus) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-border-color;
    }
  }

  .e-outline.e-input-group.e-error,
  .e-outline.e-input-group.e-control-wrapper.e-error,
  .e-outline.e-input-group.e-error:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left),
  .e-outline.e-float-input.e-error,
  .e-outline.e-float-input.e-input-group.e-error,
  .e-outline.e-float-input.e-control-wrapper.e-error,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-error-color;
    }
  }

  .e-outline.e-float-input.e-success.e-input-focus,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-success.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-success.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-success.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-success.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-warning.e-input-focus,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-warning.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-warning.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-warning.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-warning.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-error.e-input-focus,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-error.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus,
  .e-outline.e-float-input.e-input-group.e-error.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus:not(.e-float-icon-left),
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus),
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-top-color: transparent;
    }
  }

  .e-outline.e-input-group.e-success,
  .e-outline.e-input-group.e-control-wrapper.e-success,
  .e-outline.e-input-group.e-success:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
  .e-outline.e-float-input.e-success,
  .e-outline.e-float-input.e-input-group.e-success,
  .e-outline.e-float-input.e-control-wrapper.e-success,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-success {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-success-color;
    }
  }

  .e-outline.e-input-group.e-warning,
  .e-outline.e-input-group.e-control-wrapper.e-warning,
  .e-outline.e-input-group.e-warning:not(.e-float-icon-left),
  .e-outline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
  .e-outline.e-float-input.e-warning,
  .e-outline.e-float-input.e-input-group.e-warning,
  .e-outline.e-float-input.e-control-wrapper.e-warning,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-warning {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $input-warning-color;
    }
  }

  .e-outline.e-input-group.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px 1px $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
    }
  }

  .e-outline.e-input-group.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px 1px $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
    }
  }

  .e-outline.e-input-group.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px 1px $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
    }
  }

  .e-outline.e-float-input.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-input-focus.e-error:not(.e-success):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px $zero-value $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
    }
  }

  .e-outline.e-float-input.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-input-focus.e-success:not(.e-error):not(.e-warning),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px $zero-value $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
    }
  }

  .e-outline.e-float-input.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-float-input.e-input-group.e-input-focus.e-warning:not(.e-error):not(.e-success),
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-shadow: inset 1px $zero-value $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
    }
  }

  .e-outline.e-input-group.e-disabled:not(.e-input-focus),
  .e-outline.e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
  .e-outline.e-input-group.e-disabled.e-float-icon-left:not(.e-input-focus),
  .e-outline.e-input-group.e-disabled.e-control-wrapper.e-float-icon-left:not(.e-input-focus),
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-disabled.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
  .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      border-color: $outline-disabled-border-color;
    }
  }

  .e-outline.e-float-input.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-input-group.e-success.e-valid-input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-small.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-success label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-group.e-success label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-success label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-success:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-success:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-input-group.e-error.e-valid-input label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-error label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-group.e-error label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-error label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-error.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-error.e-valid-input.e-input-focus label.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-error-color;
    }
  }

  .e-outline.e-float-input.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-input-group.e-warning.e-valid-input label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-warning label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-group.e-warning label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-warning label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-valid-input.e-warning:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-warning:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-outline.e-float-input.e-input-group.e-valid-input.e-input-focus label.e-label-top,
  .e-outline.e-float-input.e-input-group.e-input-focus label.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-valid-input.e-input-focus label.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus label.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-active-border-color;
    }
  }

  .e-outline.e-input[disabled],
  .e-outline.e-input-group .e-input[disabled],
  .e-outline.e-input-group.e-control-wrapper .e-input[disabled],
  .e-outline.e-input-group.e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-disabled,
  .e-outline.e-float-input input[disabled],
  .e-outline.e-float-input.e-control-wrapper input[disabled],
  .e-outline.e-float-input textarea[disabled],
  .e-outline.e-float-input.e-control-wrapper textarea[disabled],
  .e-outline.e-float-input.e-disabled,
  .e-outline.e-float-input.e-control-wrapper.e-disabled,
  .e-outline.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-outline.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
  .e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      background-image: none;
      border-bottom-color: $outline-disabled-border-color;
      border-color: $outline-disabled-border-color;
    }
  }

  .e-outline.e-float-input.e-input-group.e-disabled .e-float-text,
  .e-outline.e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-outline.e-float-input input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-disabled label.e-float-text,
  .e-outline.e-float-input.e-disabled label.e-float-text.e-label-top,
  .e-outline.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .e-outline.e-input-group.e-disabled .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-group-disabled-color;
    }
  }

  .e-outline.e-float-input:not(.e-disabled) .e-clear-icon:hover,
  .e-outline.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
  .e-outline.e-input-group:not(.e-disabled) .e-clear-icon:hover,
  .e-outline.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-clear-icon-hover-color;
    }
  }

  .e-outline.e-float-input:not(.e-disabled) .e-clear-icon:active,
  .e-outline.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:active,
  .e-outline.e-input-group:not(.e-disabled) .e-clear-icon:active,
  .e-outline.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-input-clear-icon-active-color;
    }
  }

  .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper,
  .e-filled.e-float-input,
  .e-filled.e-float-input.e-input-group,
  .e-filled.e-float-input.e-control-wrapper,
  .e-filled.e-float-input.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      background: $filled-input-bg-color;
      transition: $background-color-transition;
    }
  }

  .e-filled.e-input-group:hover,
  .e-filled.e-input-group.e-control-wrapper:hover,
  .e-filled.e-float-input:hover,
  .e-filled.e-float-input.e-input-group:hover,
  .e-filled.e-float-input.e-control-wrapper:hover,
  .e-filled.e-float-input.e-input-group.e-control-wrapper:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      background: $filled-input-overlay-focused-bg-color;
      transition: $background-color-transition;
    }
  }

  .e-filled.e-input-group.e-input-focus,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input.e-input-focus,
  .e-filled.e-float-input.e-input-group.e-input-focus,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-input-focus,
  .e-filled.e-input-group:hover.e-input-focus,
  .e-filled.e-input-group:hover.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input:hover.e-input-focus,
  .e-filled.e-float-input:hover.e-input-group.e-input-focus,
  .e-filled.e-float-input:hover.e-control-wrapper.e-input-focus,
  .e-filled.e-float-input:hover.e-input-group.e-control-wrapper.e-input-focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      background: $filled-input-overlay-activated-bg-color;
      transition: $background-color-transition;
    }
  }

  .e-filled.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
  .e-filled.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
  .e-filled.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left,
  .e-filled.e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled).e-float-icon-left {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-color: $filled-input-hover-border-color;
    }
  }

  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error),
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error),
  .e-filled.e-float-input:not(.e-success):not(.e-warning):not(.e-error),
  .e-filled.e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-color: $input-group-full-border-color;
    }
  }

  .e-filled.e-float-input.e-success,
  .e-filled.e-float-input.e-control-wrapper.e-success,
  .e-filled.e-input-group.e-float-icon-left.e-success,
  .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-success {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-state-color ($input-success-color);
    }
  }

  .e-filled.e-float-input.e-warning,
  .e-filled.e-float-input.e-control-wrapper.e-warning,
  .e-filled.e-input-group.e-float-icon-left.e-warning,
  .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-warning {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-state-color ($input-warning-color);
    }
  }

  .e-filled.e-float-input.e-error,
  .e-filled.e-float-input.e-control-wrapper.e-error,
  .e-filled.e-input-group.e-float-icon-left.e-error,
  .e-filled.e-input-group.e-float-icon-left.e-control-wrapper.e-error {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      @include input-state-color ($input-error-color);
    }
  }

  .e-filled label.e-float-text,
  .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-input-group.e-filled textarea.e-input:-ms-input-placeholder,
  input.e-filled.e-input#{$css}::-webkit-input-placeholder,
  .e-input-group.e-filled.e-control-wrapper input.e-input::-webkit-input-placeholder,
  .e-input-group.e-filled input.e-input::-webkit-input-placeholder,
  textarea.e-filled.e-input#{$css}::-webkit-input-placeholder,
  .e-input-group.e-filled textarea.e-input::-webkit-input-placeholder,
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-webkit-input-placeholder,
  .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  input.e-filled.e-input#{$css}:-moz-placeholder,
  .e-input-group.e-filled input.e-input:-moz-placeholder,
  .e-input-group.e-filled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder,
  input.e-filled.e-input#{$css}:-moz-placeholder,
  .e-input-group.e-filled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-control-wrapper input.e-input:-moz-placeholder,
  textarea.e-filled.e-input#{$css}:-moz-placeholder,
  .e-input-group.e-filled textarea.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-moz-placeholder,
  input.e-filled.e-input#{$css}::-moz-placeholder,
  .e-input-group.e-filled input.e-input::-moz-placeholder,
  .e-input-group.e-filled.e-control-wrapper input.e-input::-moz-placeholder,
  textarea.e-filled.e-input#{$css}::-moz-placeholder,
  .e-input-group.e-filled textarea.e-input::-moz-placeholder,
  .e-input-group.e-filled.e-control-wrapper textarea.e-input::-moz-placeholder,
  input.e-filled.e-input#{$css}:-ms-input-placeholder,
  .e-input-group.e-filled input.e-input:-ms-input-placeholder,
  .e-input-group.e-filled.e-control-wrapper input.e-input:-ms-input-placeholder,
  textarea.e-filled.e-input#{$css}:-ms-input-placeholder,
  .e-input-group.e-filled.e-control-wrapper textarea.e-input:-ms-input-placeholder {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-error label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error label.e-float-text,
  .e-filled.e-float-input.e-error input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-error-color;
    }
  }

  .e-filled.e-float-input.e-success label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success label.e-float-text,
  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-control-wrapper.e-success input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-success input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-success input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-warning label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning label.e-float-text,
  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-control-wrapper.e-warning input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-warning input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) input label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input .e-control-wrapper:not(.e-error) input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus):not(.e-disabled) textarea:not(:focus):not(:valid) ~ label.e-float-text:not(.e-label-top),
  .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-active-accent-color;
    }
  }

  .e-input-group textarea.e-input:-ms-input-placeholder,
  .e-input-group textarea.e-input:-moz-placeholder,
  .e-input-group .e-input:-ms-input-placeholder,
  input.e-input#{$css}::-webkit-input-placeholder {
    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind3' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      color: $input-placeholder-color;
    }
  }

  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:hover,
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:hover,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-clear-icon-hover-color;
    }
  }

  .e-filled.e-float-input:not(.e-disabled) .e-clear-icon:active,
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:active,
  .e-filled.e-input-group:not(.e-disabled) .e-clear-icon:active,
  .e-filled.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:active {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-clear-icon-active-color;
    }
  }

  .e-filled.e-input#{$css}[disabled],
  .e-input-group.e-filled .e-input[disabled],
  .e-input-group.e-filled.e-control-wrapper .e-input[disabled],
  .e-input-group.e-filled.e-disabled,
  .e-input-group.e-filled.e-control-wrapper.e-disabled,
  .e-filled.e-float-input input[disabled],
  .e-filled.e-float-input.e-control-wrapper input[disabled],
  .e-filled.e-float-input textarea[disabled],
  .e-filled.e-float-input.e-control-wrapper textarea[disabled],
  .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' {
      background: $filled-input-disabled-bg-color;
      background-image: none;
      background-position: initial;
      background-repeat: no-repeat;
      background-size: $zero-value;
      border-color: $filled-input-disabled-border-color;
      color: $filled-input-disabled-font-color;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      //background: $filled-input-disabled-bg-color;
      background-image: none;
      background-position: initial;
      background-repeat: no-repeat;
      background-size: $zero-value;
      border-color: $filled-input-disabled-border-color;
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-color: $filled-input-disabled-border-color;
    }
  }

  .e-filled.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-filled.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      background: $filled-input-disabled-bg-color;
      background-image: none;
      background-position: initial;
      background-repeat: no-repeat;
      background-size: $zero-value;
      border-color: $filled-input-disabled-border-color;
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text,
  .e-filled.e-float-input.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-filled.e-float-input input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-disabled label.e-float-text,
  .e-filled.e-float-input.e-disabled label.e-float-text.e-label-top,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-disabled .e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder,
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder,
  input.e-filled.e-disabled.e-input#{$css}:-moz-placeholder,
  .e-input-group.e-filled.e-disabled input.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-moz-placeholder,
  textarea.e-filled.e-disabled.e-input#{$css}:-moz-placeholder,
  .e-input-group.e-filled.e-disabled textarea.e-input:-moz-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-moz-placeholder,
  input.e-filled.e-disabled.e-input#{$css}::-moz-placeholder,
  .e-input-group.e-filled.e-disabled input.e-input::-moz-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-moz-placeholder,
  textarea.e-filled.e-disabled.e-input#{$css}::-moz-placeholder,
  .e-input-group.e-filled.e-disabled textarea.e-input::-moz-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-moz-placeholder,
  input.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder,
  .e-input-group.e-filled.e-disabled input.e-input:-ms-input-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input:-ms-input-placeholder,
  textarea.e-filled.e-disabled.e-input#{$css}:-ms-input-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input:-ms-input-placeholder,
  .e-input-group.e-filled.e-disabled textarea.e-input:-ms-input-placeholder,
  input.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper input.e-input::-webkit-input-placeholder,
  .e-input-group.e-filled.e-disabled input.e-input::-webkit-input-placeholder,
  textarea.e-filled.e-disabled.e-input#{$css}::-webkit-input-placeholder,
  .e-input-group.e-filled.e-disabled textarea.e-input::-webkit-input-placeholder,
  .e-input-group.e-filled.e-disabled.e-control-wrapper textarea.e-input::-webkit-input-placeholder,
  .e-filled.e-float-input.e-disabled .e-clear-icon,
  .e-filled.e-float-input.e-control-wrapper.e-disabled .e-clear-icon,
  .e-input-group.e-filled.e-disabled .e-clear-icon,
  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-clear-icon,
  .e-input-group.e-filled.e-disabled .e-input-group-icon,
  .e-input-group.e-filled.e-control-wrapper.e-disabled .e-input-group-icon,
  .e-filled.e-float-input:not(.e-disabled) input[disabled],
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) input[disabled],
  .e-filled.e-float-input:not(.e-disabled) textarea[disabled],
  .e-filled.e-float-input.e-control-wrapper:not(.e-disabled) textarea[disabled] {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-success textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-warning textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[disabled] ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea[readonly] ~ label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus inputs ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-warning-color;
    }
  }
}

@include export-module('input-bootstrap-icons') {
  .e-float-input,
  .e-float-input.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e96c';
      font-family: 'e-icons';
    }
  }

  .e-input-group,
  .e-input-group.e-control-wrapper {
    .e-clear-icon::before {
      content: '\e96c';
      font-family: 'e-icons';
    }
  }
}

@include export-module('input-bigger') {

  .e-input-group.e-bigger .e-input,
  .e-input-group.e-bigger.e-control-wrapper .e-input,
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input {
    font: inherit;
  }

  .e-input.e-bigger#{$css}:focus,
  .e-bigger .e-input#{$css}:focus {
    padding-bottom: $input-bigger-padding-bottom;
  }

  .e-input.e-bigger#{$css}:focus,
  .e-bigger .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $input-focus-bigger-padding-bottom;
    }
  }

  input.e-input.e-bigger#{$css},
  textarea.e-input.e-bigger#{$css},
  .e-bigger input.e-input#{$css},
  .e-bigger textarea.e-input#{$css},
  .e-input-group.e-bigger,
  .e-bigger .e-input-group,
  .e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-radius: $input-bigger-border-radius;
    }
    font-size: $input-bigger-font-size;
  }

  .e-input-group.e-bigger .e-input,
  .e-input-group.e-bigger input,
  .e-input-group.e-control-wrapper.e-bigger .e-input,
  .e-input-group.e-control-wrapper.e-bigger input,
  .e-float-input.e-bigger input,
  .e-float-input.e-input-group.e-bigger input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-float-input.e-bigger,
  .e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group input,
  .e-bigger .e-input-group.e-control-wrapper .e-input,
  .e-bigger .e-input-group.e-control-wrapper input,
  .e-bigger .e-float-input input,
  .e-bigger .e-float-input.e-input-group input,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group input,
  .e-bigger .e-float-input,
  .e-bigger .e-float-input.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-radius: $input-bigger-border-radius;
    }
  }

  input.e-input.e-bigger#{$css},
  textarea.e-input.e-bigger#{$css},
  .e-input-group.e-bigger .e-input,
  .e-input-group.e-bigger.e-control-wrapper .e-input,
  .e-bigger input.e-input#{$css},
  .e-bigger textarea.e-input#{$css},
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input {
    line-height: inherit;
    margin-bottom: $input-bigger-margin-bottom;
    padding: $input-bigger-padding;
  }

  .e-input-group.e-bigger .e-input:focus,
  .e-bigger .e-input-group .e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger .e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper .e-input:focus,
  .e-input-group.e-bigger.e-input-focus .e-input,
  .e-bigger .e-input-group.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-input-focus .e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus .e-input {
    padding: $input-bigger-padding;
  }
  /* stylelint-disable property-no-vendor-prefix */
  .e-input-group.e-bigger.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover,
  .e-input-group.e-control-wrapper.e-bigger.e-float-icon-left:not(.e-disabled) .e-input-group-icon:first-child:hover {
    @if $input-skin-name == 'highcontrast' {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-width: $zero-value + px 1px $zero-value + px 1px;
      box-sizing: border-box;
    }
  }

  .e-input-group.e-bigger .e-input-group-icon,
  .e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
    @if $skin-name != 'fluent2' {
      min-height: $input-bigger-child-min-height;
      min-width: $input-bigger-child-min-width;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      border-radius: $input-bigger-icon-border-radius;
    }
  }

  .e-input-group.e-bigger .e-input-group-icon,
  .e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
    font-size: $input-bigger-icon-font-size;
    padding: $input-bigger-child-padding;
  }

  .e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $input-bigger-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-bigger-left-child-min-height;
      min-width: $input-bigger-left-child-min-width;
      padding: $zero-value;
    }
  }

  .e-input.e-small.e-bigger#{$css}:focus,
  .e-bigger .e-input.e-small#{$css}:focus {
    padding-bottom: $input-bigger-small-padding-bottom;
  }

  .e-input.e-small.e-bigger#{$css}:focus,
  .e-bigger .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $input-focus-bigger-small-padding-bottom;
    }
  }

  input.e-input.e-bigger.e-small#{$css},
  textarea.e-input.e-bigger.e-small#{$css},
  .e-bigger.e-small input.e-input#{$css},
  .e-bigger.e-small textarea.e-input#{$css},
  .e-input-group.e-bigger.e-small,
  .e-bigger.e-small .e-input-group,
  .e-bigger.e-small .e-input-group.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-radius: $input-bigger-small-border-radius;
    }
  }

  .e-input-group.e-bigger.e-small .e-input,
  .e-input-group.e-bigger.e-small input,
  .e-input-group.e-control-wrapper.e-bigger.e-small .e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-float-input.e-bigger.e-small input,
  .e-float-input.e-input-group.e-bigger.e-small input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
  .e-float-input.e-bigger.e-small,
  .e-float-input.e-control-wrapper.e-bigger.e-small,
  .e-bigger.e-small .e-input-group .e-input,
  .e-bigger.e-small .e-input-group input,
  .e-bigger.e-small .e-input-group.e-control-wrapper .e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper input,
  .e-bigger.e-small .e-float-input input,
  .e-bigger.e-small .e-float-input.e-input-group input,
  .e-bigger.e-small .e-float-input.e-control-wrapper input,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-input-group input,
  .e-bigger.e-small .e-float-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      border-radius: $input-bigger-small-border-radius;
    }
  }

  .e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input.e-small.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $input-bigger-small-left-icon-font-size;
      margin: $zero-value;
      min-height: $input-bigger-small-left-child-min-height;
      min-width: $input-bigger-small-left-child-min-width;
      padding: $zero-value;
    }
  }

  .e-input.e-small.e-bigger#{$css},
  .e-input-group.e-small.e-bigger,
  .e-small.e-bigger .e-input-group,
  .e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-small.e-bigger .e-input-group.e-control-wrapper,
  .e-bigger .e-input#{$css}.e-small,
  .e-small .e-input#{$css}.e-bigger,
  .e-bigger .e-input-group.e-small,
  .e-bigger .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group.e-bigger,
  .e-small .e-input-group.e-control-wrapper.e-bigger,
  .e-input-group.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-input-group.e-disabled,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-input-group.e-control-wrapper.e-disabled,
  .e-bigger .e-input#{$css}.e-small.e-disabled,
  .e-small .e-input#{$css}.e-bigger.e-disabled,
  .e-bigger .e-input-group.e-small.e-disabled,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-input-group.e-bigger.e-disabled,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-disabled {
    font-size: $input-bigger-small-font-size;
  }

  .e-input-group.e-small.e-bigger .e-input,
  .e-input-group.e-small .e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input,
  .e-input-group.e-control-wrapper.e-small .e-input.e-bigger,
  .e-bigger .e-input-group.e-small .e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input {
    font: inherit;
    padding: $input-bigger-small-padding;
  }

  .e-input-group.e-small.e-bigger .e-input:focus,
  .e-input-group.e-small .e-input.e-bigger:focus,
  .e-bigger .e-input-group.e-small .e-input:focus,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input:focus,
  .e-input-group.e-control-wrapper.e-small .e-input.e-bigger:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-input-group.e-small.e-bigger.e-input-focus .e-input,
  .e-input-group.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-input-group.e-small.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-input-focus .e-input,
  .e-input-group.e-control-wrapper.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-input-focus .e-input,
  .e-input.e-small.e-bigger#{$css},
  .e-bigger .e-input#{$css}.e-small,
  .e-small .e-input#{$css}.e-bigger {
    padding: $input-bigger-small-padding;
  }

  .e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-small.e-bigger .e-input-group .e-input-group-icon,
  .e-small.e-bigger .e-input-group.e-control-wrapper .e-input-group-icon,
  .e-bigger .e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    font-size: $input-bigger-small-icon-font-size;
    min-height: $input-bigger-small-child-min-height;
    min-width: $input-bigger-small-child-min-width;
    padding: $input-bigger-small-child-padding;
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border-radius: $input-bigger-small-child-border-radius;
      margin: $input-bigger-small-child-margin;
    }
  }

  .e-float-input.e-bigger label.e-float-text,
  .e-float-input label.e-float-text.e-bigger,
  .e-float-input input.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input label.e-float-text,
  .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-float-input.e-control-wrapper label.e-float-text.e-bigger,
  .e-float-input.e-control-wrapper input.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-bgr-label-top;
    }
  }

  .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @include float-label-alignment;
    font-style: $input-font-style;
  }

  .e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-float-input.e-small label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-bgr-small-label-top;
    }
    font-style: $input-font-style;
  }

  .e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-float-input .e-input-in-wrap label.e-float-text.e-bigger,
  .e-float-input .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-bigger,
  .e-float-input.e-control-wrapper .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $float-bigger-input-text-top;
    }
  }

  .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $float-bigger-label-font-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4') {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -34px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -38px, 0) scale(1);
    }
  }

  .e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-bigger .e-float-input input:focus ~ label.e-float-text,
  .e-bigger .e-float-input input:valid ~ label.e-float-text,
  .e-bigger .e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      transform: translate3d(0, -6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap4') {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -42px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
  }

  .e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-bigger .e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input label.e-float-text.e-label-top {
    @if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      transform: translate3d(-10px, -39px, 0) scale(1) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-float-input.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-input-focus input-group-animation ~ label.e-float-text,
  .e-small .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -34px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input:focus ~ label.e-float-text,
  .e-bigger .e-float-input input:valid ~ label.e-float-text,
  .e-bigger .e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-label-bgr-top;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: $input-zero-padding-margin;
      top: $float-label-bgr-top;
    }
    @else if $input-skin-name == 'tailwind3' {
      top: $float-label-bgr-top;
      left: 2px;
    }
  }

  .e-float-input.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-float-input-focus-top;
    }
  }

  .e-float-input.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small input[disabled] ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input[readonly] ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $float-bgr-small-input-top;
    }
    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-float-input-focus-label-top;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or  $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
      padding-right: $input-zero-padding-margin;
      top: $float-bgr-small-input-top;
    }
  }

  .e-float-input.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-float-input .e-input-in-wrap label.e-float-text,
  .e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-small .e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-float-input-focus-label-top;
    }
  }

  .e-float-input.e-bigger,
  .e-bigger .e-float-input,
  .e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper {
    line-height: $input-bgr-float-control-line-height;
    margin-bottom: $input-bigger-margin-bottom;
    margin-top: $input-bigger-margin-top;
    padding-top: $float-input-bigger-wrap-padding-top;
    position: relative;
    width: $input-full-position-width;
  }

  .e-float-input.e-small.e-bigger,
  .e-bigger.e-small .e-float-input.e-small,
  .e-bigger .e-float-input.e-small,
  .e-small .e-float-input.e-bigger,
  .e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-small,
  .e-bigger .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper.e-bigger {
    line-height: $input-bgr-float-line-height;
    margin-bottom: $input-small-bigger-margin-bottom;
    margin-top: $input-small-bigger-margin-top;
    padding-top: $float-input-bigger-small-wrap-padding-top;
  }

  .e-input-group.e-bigger,
  .e-bigger .e-input-group,
  .e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper {
    line-height: $input-bgr-float-control-line-height;
  }

  .e-input-group.e-small.e-bigger,
  .e-bigger.e-small .e-input-group.e-small,
  .e-bigger .e-input-group.e-small,
  .e-small .e-input-group.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-input-group.e-control-wrapper.e-small,
  .e-bigger .e-input-group.e-control-wrapper.e-small,
  .e-small .e-input-group.e-control-wrapper.e-bigger {
    line-height: normal;
  }

  .e-float-input.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-no-float-label,
  .e-float-input.e-small.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-small.e-no-float-label,
  .e-small .e-float-input.e-bigger.e-no-float-label,
  .e-float-input.e-control-wrapper.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-control-wrapper.e-no-float-label,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-no-float-label,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-no-float-label,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-no-float-label {
    margin-top: $input-zero-padding-margin;
  }

  .e-float-input.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-disabled,
  .e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-control-wrapper.e-disabled,
  .e-float-input.e-input-group.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-disabled,
  .e-float-input.e-bigger,
  .e-bigger .e-float-input,
  .e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper {
    font-size: $input-bigger-font-size;
  }

  .e-float-input.e-bigger input,
  .e-float-input input.e-bigger,
  .e-bigger .e-float-input input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper input {
    font: inherit;
    line-height: inherit;
    padding: $float-input-bigger-padding;
  }

  .e-float-input.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-disabled,
  .e-bigger .e-float-input.e-small.e-disabled,
  .e-small .e-float-input.e-bigger.e-disabled,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-control-wrapper.e-disabled,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-float-input.e-input-group.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-input-group.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-bigger.e-disabled,
  .e-float-input.e-input-group.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-float-input.e-input-group.e-control-wrapper.e-disabled,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled,
  .e-float-input.e-small.e-bigger,
  .e-small.e-bigger .e-float-input,
  .e-bigger .e-float-input.e-small,
  .e-small .e-float-input.e-bigger,
  .e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-small.e-bigger .e-float-input.e-control-wrapper,
  .e-bigger .e-float-input.e-control-wrapper.e-small,
  .e-small .e-float-input.e-control-wrapper.e-bigger {
    font-size: $input-bigger-small-font-size;
  }

  .e-float-input.e-small.e-bigger input,
  .e-float-input.e-small input.e-bigger,
  .e-bigger .e-float-input.e-small input,
  .e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small input {
    font: inherit;
    line-height: $float-inherit-line-height;
    padding: $float-input-bigger-small-padding;
  }

  .e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      left: $float-ip-bgr-outline-rtl-left-right;
      width: $input-auto-width;
    }
  }

  .e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      right: $float-ip-bgr-outline-rtl-left-right;
      width: $input-auto-width;
    }
  }

  .e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-weight: normal;
  }

  .e-float-input.e-rtl.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-rtl.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-rtl:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-rtl.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input.e-control-wrapper:not(.e-input-focus) label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-rtl.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small .e-float-input.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small.e-rtl .e-float-input input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-float-input.e-control-wrapper.e-rtl.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-rtl input:not(:focus):not(:valid) label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text,
  .e-bigger.e-small.e-rtl .e-float-input.e-control-wrapper input:not(:focus):not(:valid) label.e-float-text.e-label-bottom {
    padding-right: $float-label-padding;
  }

  .e-input-group.e-bigger .e-input,
  .e-input-group.e-control-wrapper.e-bigger .e-input,
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input,
  .e-float-input.e-bigger .e-input,
  .e-bigger .e-float-input .e-input,
  .e-float-input.e-control-wrapper.e-bigger .e-input,
  .e-bigger .e-float-input.e-control-wrapper .e-input {
    margin-bottom: $input-zero-padding-margin;
  }

  .e-input#{$css}.e-small.e-bigger,
  .e-input-group.e-small.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger .e-input#{$css}.e-small,
  .e-bigger .e-input-group.e-small,
  .e-bigger .e-input-group.e-control-wrapper.e-small {
    line-height: $float-inherit-line-height;
    margin-bottom: $input-small-bigger-margin-bottom;
  }

  .e-input-group.e-bigger .e-input-group-icon,
  .e-input-group .e-input-group-icon.e-bigger,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-input-group .e-input-group-icon,
  .e-bigger .e-input-group.e-control-wrapper .e-input-group-icon {
    @if ($input-skin-name != 'Material3' and $input-skin-name != 'fluent2') {
      margin-bottom: $input-child-bigger-margin-bottom;
      margin-right: $input-child-bigger-margin-right;
      margin-top: $input-child-bigger-margin-top;
    }
    @else {
      margin: $input-child-bigger-margin;
    }
  }

  .e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      margin-top: $float-input-child-bigger-margin-top;
    }
  }

  .e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-small .e-bigger.e-input-group .e-input-group-icon,
  .e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-bigger .e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name != 'fluent2' {
      margin-bottom: $input-child-small-bigger-margin-bottom;
      margin-right: $input-child-small-bigger-margin-right;
      margin-top: $input-child-small-bigger-margin-top;
    }
  }

  .e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      margin-top: $float-input-child-small-bigger-margin-top;
    }
  }

  .e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-input-group .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-input-group .e-input-group-icon:last-child,
  .e-input-group.e-small.e-bigger .e-input-group-icon:last-child,
  .e-input-group.e-small .e-input-group-icon.e-bigger:last-child,
  .e-input-group.e-control-wrapper.e-bigger .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper .e-input-group-icon.e-bigger:last-child,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon:last-child,
  .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon:last-child,
  .e-bigger .e-input-group.e-small .e-input-group-icon:last-child {
    @if $input-skin-name != 'fluent' {
      margin-right: $input-zero-padding-margin;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin: $input-zero-padding-margin;
    }
  }

  .e-bigger input.e-input#{$css}::-webkit-input-placeholder,
  input.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger input.e-input#{$css}:-moz-placeholder,
  input.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger input.e-input#{$css}:-ms-input-placeholder,
  input.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger input.e-input#{$css}::-moz-placeholder,
  input.e-bigger.e-input#{$css}::-moz-placeholder,
  .e-bigger textarea.e-input#{$css}::-webkit-input-placeholder,
  textarea.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger textarea.e-input#{$css}:-ms-input-placeholder,
  textarea.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-bigger.e-input#{$css}::-moz-placeholder,
  .e-bigger textarea.e-input#{$css}::-webkit-textarea-placeholder,
  textarea.e-bigger.e-input#{$css}::-webkit-textarea-placeholder,
  .e-bigger textarea.e-input#{$css}:-moz-placeholder,
  textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger textarea.e-input#{$css}:-ms-textarea-placeholder,
  textarea.e-bigger.e-input#{$css}:-ms-textarea-placeholder,
  .e-bigger textarea.e-input#{$css}::-moz-placeholder,
  textarea.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-font-size;
    font-style: $input-font-style;
  }

  .e-bigger input.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small input.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger input.e-small.e-input#{$css}:-moz-placeholder,
  .e-small input.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger input.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small input.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger input.e-small.e-input#{$css}::-moz-placeholder,
  .e-small input.e-bigger.e-input#{$css}::-moz-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}::-webkit-input-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-webkit-input-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger intextareaput.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}::-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-moz-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}::-webkit-textarea-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-webkit-textarea-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}:-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-moz-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}:-ms-input-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}:-ms-input-placeholder,
  .e-bigger textarea.e-small.e-input#{$css}::-moz-placeholder,
  .e-small textarea.e-bigger.e-input#{$css}::-moz-placeholder {
    font-size: $input-bigger-small-font-size;
    font-style: $input-font-style;
  }

  input.e-input.e-bigger#{$css},
  .e-bigger input.e-input#{$css},
  .e-input-group.e-bigger input,
  .e-input-group.e-bigger input.e-input,
  .e-input-group.e-control-wrapper.e-bigger input,
  .e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-input-group input,
  .e-bigger .e-input-group input.e-input,
  .e-bigger .e-input-group.e-control-wrapper input,
  .e-bigger .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-bigger input,
  .e-float-input.e-bigger input.e-input,
  .e-bigger .e-float-input input,
  .e-bigger .e-float-input input.e-input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-bigger .e-float-input.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-bigger-height);
  }

  .e-float-input.e-bigger:not(.e-input-group) input,
  .e-float-input.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-float-input:not(.e-input-group) input,
  .e-bigger .e-float-input:not(.e-input-group) input.e-input,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
    @include input-sizing;
    @include input-height ($float-input-bigger-height);
  }

  input.e-input.e-small.e-bigger#{$css},
  .e-input-group.e-bigger.e-small input,
  .e-input-group.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-input-group input,
  .e-bigger.e-small .e-input-group input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-input-group.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper input,
  .e-bigger.e-small .e-input-group.e-control-wrapper input.e-input,
  .e-float-input.e-bigger.e-small input,
  .e-float-input.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-float-input input,
  .e-bigger.e-small .e-float-input input.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper input,
  .e-bigger.e-small .e-float-input.e-control-wrapper input.e-input {
    @include input-sizing;
    @include input-height ($input-bigger-small-height);
  }

  .e-float-input.e-bigger.e-small:not(.e-input-group) input,
  .e-float-input.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-float-input:not(.e-input-group) input,
  .e-bigger.e-small .e-float-input:not(.e-input-group) input.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-group) input.e-input {
    @include input-sizing;
    @include input-height ($float-input-bigger-small-height);
  }

  .e-input-group textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  textarea.e-input.e-bigger#{$css},
  .e-input-group.e-bigger textarea,
  .e-input-group.e-bigger textarea.e-input,
  .e-bigger .e-input-group textarea,
  .e-bigger .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper.e-bigger textarea,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper textarea,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-bigger textarea,
  .e-float-input.e-bigger textarea.e-input,
  .e-bigger .e-float-input textarea,
  .e-bigger .e-float-input textarea.e-input,
  .e-float-input.e-control-wrapper.e-bigger textarea,
  .e-float-input.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-float-input.e-control-wrapper textarea,
  .e-bigger .e-float-input.e-control-wrapper textarea.e-input  {
    @include input-sizing;
    @include input-height ($textarea-bigger-height);
  }

  textarea.e-input.e-small.e-bigger#{$css},
  .e-input-group.e-bigger.e-small textarea,
  .e-input-group.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-input-group textarea,
  .e-bigger.e-small .e-input-group textarea.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper textarea,
  .e-bigger.e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-bigger.e-small textarea,
  .e-float-input.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-float-input textarea,
  .e-bigger.e-small .e-float-input textarea.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea.e-input {
    @include input-sizing;
    @include input-height ($textarea-bigger-small-height);
  }

  input.e-input.e-bigger#{$css},
  .e-input-group input.e-input.e-bigger,
  .e-input-group input.e-input.e-bigger,
  .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-input-group.e-bigger .e-input,
  .e-input-group.e-control-wrapper.e-bigger .e-input,
  .e-bigger input.e-input#{$css},
  .e-bigger .e-input-group .e-input,
  .e-bigger .e-input-group.e-control-wrapper .e-input,
  .e-float-input.e-bigger input,
  .e-float-input input.e-bigger,
  .e-bigger .e-float-input input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper input {
    text-indent: $input-bigger-text-indent;
  }

  input.e-input.e-bigger#{$css},
  .e-bigger input.e-input#{$css},
  .e-input-group.e-bigger input.e-input,
  .e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper input.e-bigger,
  .e-float-input.e-bigger input,
  .e-float-input input.e-bigger,
  .e-input-group input.e-input.e-bigger,
  .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-bigger .e-float-input input,
  .e-bigger .e-input-group.e-control-wrapper input.e-input,
  .e-bigger .e-input-group input.e-input,
  .e-input-group.e-bigger input.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-float-input.e-bigger input:focus,
  .e-bigger .e-input-group input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper input.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper input:focus,
  .e-bigger .e-float-input input:focus,
  .e-input-group.e-bigger.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-float-input.e-bigger.e-input-focus input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-focus input,
  .e-bigger .e-float-input.e-input-focus input {
    @if $input-skin-name == 'fluent2' {
      padding: $input-bgr-flu2-input-padding;
    }
    @else {
      padding-left: $input-bigger-text-indent;
    }
    text-indent: $input-zero-padding-margin;
  }

  .e-rtl input.e-input.e-bigger#{$css},
  input.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl input.e-input#{$css},
  .e-bigger input.e-input.e-rtl#{$css},
  .e-float-input.e-control-wrapper.e-bigger.e-rtl input,
  .e-float-input.e-bigger.e-rtl input,
  .e-input-group.e-bigger.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger input,
  .e-rtl .e-float-input.e-bigger input,
  .e-rtl .e-input-group.e-bigger input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-float-input.e-control-wrapper.e-rtl input.e-bigger,
  .e-float-input.e-rtl input.e-bigger,
  .e-input-group.e-rtl input.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-rtl input.e-input.e-bigger,
  .e-rtl .e-float-input.e-control-wrapper input.e-bigger,
  .e-rtl .e-float-input input.e-bigger,
  .e-rtl .e-input-group input.e-input.e-bigger,
  .e-rtl .e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input,
  .e-bigger .e-float-input.e-rtl input,
  .e-bigger .e-input-group.e-rtl input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input,
  .e-bigger.e-rtl .e-float-input input,
  .e-bigger.e-rtl .e-input-group input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper input.e-input,
  .e-bigger.e-rtl .e-input-group input.e-input:focus,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper input.e-input:focus,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper input:focus,
  .e-bigger.e-rtl .e-float-input input:focus,
  .e-bigger .e-input-group.e-rtl input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-bigger .e-float-input.e-rtl input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-bigger.e-rtl .e-input-group.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-input-focus input,
  .e-bigger.e-rtl .e-float-input.e-input-focus input,
  .e-bigger .e-float-input.e-rtl.e-input-focus input,
  .e-bigger .e-float-input.e-control-wrapper.e-rtl.e-input-focus input {
    padding-left: $input-zero-padding-margin;
    padding-right: $input-bigger-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  textarea.e-input.e-bigger#{$css},
  .e-bigger textarea.e-input#{$css},
  .e-input-group.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-float-input.e-control-wrapper.e-bigger textarea,
  .e-float-input.e-control-wrapper textarea.e-bigger,
  .e-float-input.e-bigger textarea,
  .e-float-input textarea.e-bigger,
  .e-input-group textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper textarea,
  .e-bigger .e-float-input textarea,
  .e-bigger .e-input-group textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input,
  .e-input-group.e-bigger textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger textarea:focus,
  .e-float-input.e-bigger textarea:focus,
  .e-bigger .e-input-group textarea.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper textarea:focus,
  .e-bigger .e-float-input textarea:focus {
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $textarea-bigger-padding;
    }
    @else {
      padding-left: $input-bigger-text-indent;
    }
    text-indent: $input-zero-padding-margin;
  }

  .e-rtl textarea.e-input.e-bigger#{$css},
  textarea.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl textarea.e-input#{$css},
  .e-bigger textarea.e-input.e-rtl#{$css},
  .e-float-input.e-control-wrapper:not(.e-outline).e-bigger.e-rtl textarea,
  .e-float-input:not(.e-outline).e-bigger.e-rtl textarea,
  .e-input-group:not(.e-outline).e-bigger.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-rtl textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-bigger textarea,
  .e-rtl .e-float-input:not(.e-outline).e-bigger textarea,
  .e-rtl .e-input-group:not(.e-outline).e-bigger textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-bigger textarea.e-input,
  .e-float-input:not(.e-outline).e-rtl textarea.e-bigger,
  .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea.e-bigger,
  .e-input-group:not(.e-outline).e-rtl textarea.e-input.e-bigger,
  .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input.e-bigger,
  .e-rtl .e-float-input:not(.e-outline) textarea.e-bigger,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea.e-bigger,
  .e-rtl .e-input-group:not(.e-outline) textarea.e-input.e-bigger,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-float-input:not(.e-outline).e-rtl textarea,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea,
  .e-bigger .e-input-group:not(.e-outline).e-rtl textarea.e-input,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input,
  .e-bigger.e-rtl .e-float-input:not(.e-outline) textarea,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea,
  .e-bigger.e-rtl .e-input-group:not(.e-outline) textarea.e-input,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input,
  .e-bigger.e-rtl .e-input-group:not(.e-outline) textarea.e-input:focus,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper textarea.e-input:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline) textarea:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper textarea:focus,
  .e-bigger .e-input-group:not(.e-outline).e-rtl textarea.e-input:focus,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-rtl textarea.e-input:focus,
  .e-bigger .e-float-input:not(.e-outline).e-rtl textarea:focus,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-rtl textarea:focus {
    padding-right: $input-bigger-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  input.e-input.e-bigger.e-small#{$css},
  .e-bigger input.e-input.e-small#{$css},
  .e-input-group.e-small.e-bigger input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger input.e-input,
  .e-input-group.e-small input.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small input.e-input.e-bigger,
  .e-bigger .e-input-group.e-small input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-float-input.e-small.e-bigger input,
  .e-float-input.e-small input.e-bigger,
  .e-bigger .e-float-input.e-small input,
  .e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small input,
  .e-bigger .e-input-group.e-small input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:focus,
  .e-bigger .e-float-input.e-small input:focus,
  .e-small .e-input-group.e-bigger input.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-small .e-float-input.e-bigger input:focus,
  .e-input-group.e-bigger.e-small input.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small input.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small input:focus,
  .e-float-input.e-bigger.e-small input:focus,
  .e-bigger .e-input-group.e-small.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small .e-input-group.e-bigger.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-input-group.e-bigger.e-small.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-bigger .e-float-input.e-small.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-small .e-float-input.e-bigger.e-input-focus input,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
  .e-float-input.e-bigger.e-small.e-input-focus input,
  textarea.e-input.e-bigger.e-small#{$css},
  .e-bigger textarea.e-input.e-small#{$css},
  .e-input-group.e-small.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-input-group.e-small textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger .e-input-group.e-small textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-float-input.e-small.e-bigger textarea,
  .e-float-input.e-small textarea.e-bigger,
  .e-bigger .e-float-input.e-small textarea,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-float-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea,
  .e-bigger .e-input-group.e-small textarea.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-bigger .e-float-input.e-small textarea:focus,
  .e-small .e-input-group.e-bigger textarea.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:focus,
  .e-small .e-float-input.e-bigger textarea:focus,
  .e-input-group.e-bigger.e-small textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-float-input.e-bigger.e-small textarea:focus {
    padding-left: $input-small-bigger-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  .e-bigger input.e-input.e-small.e-rtl#{$css},
  .e-input-group.e-small.e-bigger.e-rtl input.e-input,
  .e-input-group.e-control-wrapper.e-small.e-bigger.e-rtl input.e-input,
  .e-input-group.e-small.e-rtl input.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input.e-bigger,
  .e-bigger .e-input-group.e-small.e-rtl input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-float-input.e-small.e-bigger.e-rtl input,
  .e-float-input.e-small.e-rtl input.e-bigger,
  .e-bigger .e-float-input.e-small.e-rtl input,
  .e-float-input.e-control-wrapper.e-small.e-bigger.e-rtl input,
  .e-float-input.e-control-wrapper.e-small.e-rtl input.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-bigger.e-rtl input.e-input.e-small,
  .e-rtl .e-input-group.e-small.e-bigger input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-small.e-bigger input.e-input,
  .e-rtl .e-input-group.e-small input.e-input.e-bigger,
  .e-rtl .e-input-group.e-control-wrapper.e-small input.e-input.e-bigger,
  .e-bigger.e-rtl .e-input-group.e-small input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-small input.e-input,
  .e-rtl .e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-rtl .e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-small input,
  .e-rtl .e-float-input.e-small.e-bigger input,
  .e-rtl .e-float-input.e-small input.e-bigger,
  .e-bigger.e-rtl .e-float-input.e-small input,
  .e-bigger .e-input-group.e-small.e-rtl input.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-rtl input.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-rtl input:focus,
  .e-bigger .e-float-input.e-small.e-rtl input:focus,
  .e-small .e-input-group.e-bigger.e-rtl input.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-rtl input:focus,
  .e-small .e-float-input.e-bigger.e-rtl input:focus,
  .e-input-group.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl input:focus,
  .e-float-input.e-bigger.e-small.e-rtl input:focus,
  .e-bigger.e-rtl .e-input-group.e-small input.e-input:focus,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-small input:focus,
  .e-bigger.e-rtl .e-float-input.e-small input:focus,
  .e-small.e-rtl .e-input-group.e-bigger input.e-input:focus,
  .e-small.e-rtl .e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-small.e-rtl .e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-small.e-rtl .e-float-input.e-bigger input:focus,
  .e-rtl .e-input-group.e-bigger.e-small input.e-input:focus,
  .e-rtl .e-input-group.e-control-wrapper.e-bigger.e-small input.e-input:focus,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small input:focus,
  .e-rtl .e-float-input.e-bigger.e-small input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small.e-rtl.e-input-focus input,
  .e-bigger .e-float-input.e-small.e-rtl.e-input-focus input,
  .e-small .e-float-input.e-control-wrapper.e-bigger.e-rtl.e-input-focus input,
  .e-small .e-float-input.e-bigger.e-rtl.e-input-focus input,
  .e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-float-input.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-bigger.e-rtl .e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-bigger.e-rtl .e-float-input.e-small.e-input-focus input,
  .e-small.e-rtl .e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-small.e-rtl .e-float-input.e-bigger.e-input-focus input,
  .e-rtl .e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
  .e-rtl .e-float-input.e-bigger.e-small.e-input-focus input,
  .e-bigger .e-input-group.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small.e-rtl.e-input-focus input.e-input,
  .e-small .e-input-group.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-small .e-input-group.e-control-wrapper.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-input-group.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-input-group.e-small.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small.e-rtl .e-input-group.e-bigger.e-input-focus input.e-input,
  .e-small.e-rtl .e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-bigger.e-small.e-input-focus input.e-input,
  .e-rtl .e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input {
    padding-left: $input-zero-padding-margin;
    padding-right: $input-small-bigger-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  .e-bigger .e-input-group.e-small textarea.e-input:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input:focus,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus,
  .e-bigger .e-float-input.e-small textarea:focus,
  .e-small .e-input-group.e-bigger textarea.e-input:focus,
  .e-small .e-input-group.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:focus,
  .e-small .e-float-input.e-bigger textarea:focus,
  .e-input-group.e-bigger.e-small textarea.e-input:focus,
  .e-input-group.e-bigger textarea.e-input:focus,
  .e-input-group.e-small textarea.e-input:focus,
  .e-input-group textarea.e-input:focus,
  .e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input:focus,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-float-input.e-bigger.e-small textarea:focus {
    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      box-shadow: $input-group-focus-box-shadow;
    }
  }

  .e-bigger textarea.e-input.e-small.e-rtl#{$css},
  .e-input-group:not(.e-outline).e-small.e-bigger.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-bigger.e-rtl textarea.e-input,
  .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input.e-bigger,
  .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input.e-bigger,
  .e-bigger .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-float-input:not(.e-outline).e-small.e-bigger.e-rtl textarea,
  .e-float-input:not(.e-outline).e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-float-input:not(.e-outline).e-small.e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-bigger.e-rtl textarea,
  .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea,
  .e-bigger.e-rtl textarea.e-input.e-small#{$css},
  .e-rtl .e-input-group:not(.e-outline).e-small.e-bigger textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input.e-bigger,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-bigger textarea,
  .e-rtl .e-float-input:not(.e-outline).e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small textarea,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-bigger textarea,
  .e-rtl .e-float-input:not(.e-outline).e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-small textarea,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-small.e-control-wrapper textarea,
  .e-bigger .e-input-group:not(.e-outline).e-small.e-rtl textarea.e-input:focus,
  .e-bigger .e-input-group:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea.e-input:focus,
  .e-bigger .e-float-input:not(.e-outline).e-control-wrapper.e-small.e-rtl textarea:focus,
  .e-bigger .e-float-input:not(.e-outline).e-small.e-rtl textarea:focus,
  .e-small .e-input-group:not(.e-outline).e-bigger.e-rtl textarea.e-input:focus,
  .e-small .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-rtl textarea.e-input:focus,
  .e-small .e-float-input:not(.e-outline).e-control-wrapper.e-bigger.e-rtl textarea:focus,
  .e-small .e-float-input:not(.e-outline).e-bigger.e-rtl textarea:focus,
  .e-input-group:not(.e-outline).e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-float-input:not(.e-outline).e-control-wrapper.e-bigger.e-small.e-rtl textarea:focus,
  .e-float-input:not(.e-outline).e-bigger.e-small.e-rtl textarea:focus,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-small textarea.e-input:focus,
  .e-bigger.e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-small textarea.e-input:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-small textarea:focus,
  .e-bigger.e-rtl .e-float-input:not(.e-outline).e-small textarea:focus,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-bigger textarea.e-input:focus,
  .e-small.e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-bigger textarea:focus,
  .e-small.e-rtl .e-float-input:not(.e-outline).e-bigger textarea:focus,
  .e-rtl .e-input-group:not(.e-outline).e-bigger.e-small textarea.e-input:focus,
  .e-rtl .e-input-group:not(.e-outline).e-control-wrapper.e-bigger.e-small textarea.e-input:focus,
  .e-rtl .e-float-input:not(.e-outline).e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-rtl .e-float-input:not(.e-outline).e-bigger.e-small textarea:focus {
    padding-right: $input-small-bigger-text-indent;
    text-indent: $input-zero-padding-margin;
  }

  .e-float-input.e-small.e-bigger .e-clear-icon,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon,
  .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon,
  .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon,
  .e-bigger .e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon,
  .e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon,
  .e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon {
    padding-bottom: $input-zero-padding-margin;
  }

  .e-float-input.e-bigger .e-clear-icon::before,
  .e-float-input.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-input-group.e-bigger .e-clear-icon::before,
  .e-input-group.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-float-input.e-control-wrapper input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-float-input input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input .e-clear-icon::before,
  .e-bigger .e-input-group .e-clear-icon::before,
  .e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
    font-size: $input-bigger-clear-icon;
  }

  .e-float-input.e-small.e-bigger .e-clear-icon::before,
  .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-input-group.e-small.e-bigger .e-clear-icon::before,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-small.e-bigger .e-float-input .e-clear-icon::before,
  .e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-small.e-bigger .e-input-group .e-clear-icon::before,
  .e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
  .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon::before {
    font-size: $input-bigger-small-clear-icon;
  }

  .e-input-group.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-input-group .e-clear-icon.e-bigger,
  .e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-input-group .e-clear-icon,
  .e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
    min-width: $input-bigger-clear-icon-min-width;
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      min-height: $input-bigger-clear-icon-min-height;
      padding-bottom: $input-clear-icon-bigger-padding-bottom;
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $input-clear-icon-bigger-padding-top;
    }
    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $input-bigger-clear-icon-padding;
    }
    @else {
      min-height: $input-bigger-clear-icon-min-height;
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-bigger-clear-icon-border-radius;
    }
  }

  .e-input-group.e-float-input.e-bigger .e-clear-icon,
  .e-input-group.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $float-input-clear-icon-bigger-padding-top;
    }
  }

  .e-small.e-bigger .e-input-group .e-clear-icon,
  .e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      min-height: $input-bigger-clear-icon-min-height;
      min-width: $input-bigger-clear-icon-min-width;
      padding-bottom: $input-clear-icon-bigger-padding-bottom;
      padding-right: $input-clear-icon-bigger-padding-right;
      padding-top: $input-clear-icon-bigger-padding-top;
    }
    @else {
      min-height: $input-bigger-small-clear-icon-min-height;
      min-width: $input-bigger-small-clear-icon-min-width;
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
      border-radius: $input-bigger-clear-icon-border-radius;
    }
  }

  .e-input-group.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-small .e-clear-icon {
    min-height: $input-bigger-small-clear-icon-min-height;
    min-width: $input-bigger-small-clear-icon-min-width;
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' {
      padding-bottom: $input-clear-icon-small-bigger-padding-bottom;
      padding-right: $input-clear-icon-small-bigger-padding-right;
      padding-top: $input-clear-icon-small-bigger-padding-top;
    }
  }

  .e-input-group.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon {
    @if $input-skin-name != 'Material3' and $input-skin-name != 'fluent2' and $input-skin-name != 'tailwind3' {
      padding-right: $input-clear-icon-small-bigger-padding-right;
      padding-top: $float-input-clear-icon-small-bigger-padding-top;
    }
  }

  .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $bigger-input-float-label-top;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' {
      top: $bigger-input-float-label-top;
    }
    @else if $input-skin-name == 'tailwind' {
      top: $bigger-input-float-label-top;
    }
    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-input-float-label-top;
    }
  }

  .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-small-textarea-text-top;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' {
      top: $bigger-small-textarea-text-top;
    }
    @else if $input-skin-name == 'tailwind' {
      top: $bigger-small-textarea-text-top;
    }
  }

  .e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input textarea ~ label.e-float-text,
  .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $float-input-bgr-text-top;
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' or $input-skin-name == 'highcontrast' {
      top: $float-input-bgr-text-top;
    }
    @else if $input-skin-name == 'tailwind' {
      top: $float-input-bgr-text-top;
    }
  }

  .e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-input-group:not(.e-float-input) .e-input,
  .e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-float-input.e-bigger input,
  .e-bigger .e-float-input input,
  .e-float-input.e-input-group.e-bigger input,
  .e-bigger .e-float-input.e-input-group input,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-bigger input,
  .e-bigger .e-float-input.e-control-wrapper input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' {
      min-height: 27px;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $input-bgr-float-min-height;
    }
  }

  .e-input-group.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input .e-small .e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-float-input.e-bigger.e-small input,
  .e-bigger .e-float-input.e-small input,
  .e-small .e-float-input.e-bigger input,
  .e-float-input.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-input-group.e-small input,
  .e-small .e-float-input.e-input-group.e-bigger input,
  .e-float-input.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-input-group.e-bigger input  {
    @if $input-skin-name == 'material' {
      min-height: 28px;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $input-bgr-small-float-min-height;
    }
  }

  .e-bigger .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $float-label-bgr-input-top;
      transform: translate3d(0, -6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-float-input-focus-top;
      transform: translate3d(0, -6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      top: $float-label-bgr-input-top;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      font-weight: bold;
      padding-right: $input-zero-padding-margin;
      top: $float-label-bgr-input-top;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -40px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
    user-select: text;
  }

  .e-bigger .e-float-input.e-small:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-outline) input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus):not(.e-outline) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-float-input-focus-label-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      top: 16px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      font-weight: bold;
      padding-right: $input-zero-padding-margin;
      top: $bgr-small-float-label-autofill-top;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      top: 16px;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'highcontrast' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      @include textarea-float-label-alignment;
      font-style: $input-font-style;
    }
  }

  .e-bigger .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    font-size: $float-placeholder-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' {
      top: $bigger-float-input-focus-label-top;
    }
    font-style: $input-font-style;
  }

  .e-float-input.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      transform: translate3d(0, 6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3' {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -37px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-bigger .e-float-input.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-small-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-float-input-focus-label-top;
      transform: translate3d(0, -6px, 0) scale(.92);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      top: 16px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }

    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: $input-zero-padding-margin;
      top: 16px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      top: 16px;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
    user-select: text;
  }

  .e-bigger .e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    font-size: $float-label-bigger-font-size;
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-float-autofill-top;
      transform: translate3d(0, -6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      top: 14px;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' {
      font-weight: $input-float-font-weight;
      padding-right: $input-zero-padding-margin;
      top: 14px;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if $input-skin-name == 'FluentUI' {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      top: 14px;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
    user-select: text;
  }

  .e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      transform: translate3d(0, 6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -35px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -45px, 0) scale(1);
    }
  }

  .e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger.e-small .e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger.e-small .e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger.e-small .e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger.e-small .e-float-input textarea label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-bigger .e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      transform: translate3d(0, 6px, 0) scale(.86);
    }
    @else if $input-skin-name == 'fabric' or $input-skin-name == 'highcontrast' {
      font-style: $input-font-normal;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -43px, 0) scale(1);
    }
    @else if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' {
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -39px, 0) scale(1);
    }
    @else if ($input-skin-name == 'tailwind') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -33px, 0) scale(1);
    }
    @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {
      font-weight: 500;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -36px, 0) scale(1);
    }
    @else if ($input-skin-name == 'FluentUI') {
      font-style: $input-font-normal;
      font-weight: 600;
      padding-right: $input-zero-padding-margin;
      transform: translate3d(-10px, -41px, 0) scale(1);
    }
  }

  .e-input-group.e-bigger textarea,
  .e-input-group.e-bigger textarea.e-input,
  .e-input-group textarea.e-bigger,
  .e-input-group textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-bigger textarea,
  .e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-bigger,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-input-group textarea,
  .e-bigger .e-input-group textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper textarea,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input,
  .e-float-input.e-bigger textarea,
  .e-float-input textarea.e-bigger,
  .e-float-input.e-control-wrapper.e-bigger textarea,
  .e-float-input.e-control-wrapper textarea.e-bigger,
  .e-bigger .e-float-input textarea,
  .e-bigger .e-float-input.e-control-wrapper textarea {
    font: inherit;
    line-height: $input-bigger-textarea-line-height;
    min-height: $textarea-bigger-min-height;
    padding: $textarea-bigger-padding;
  }

  .e-input-group.e-input-focus.e-bigger textarea,
  .e-input-group.e-input-focus.e-bigger textarea.e-input,
  .e-input-group.e-input-focus textarea.e-bigger,
  .e-input-group.e-input-focus textarea.e-input.e-bigger,
  .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea,
  .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
  .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
  .e-bigger .e-input-group.e-input-focus textarea,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-input-group.e-control-wrapper textarea.e-bigger:focus,
  .e-input-group.e-control-wrapper textarea.e-input.e-bigger:focus,
  .e-bigger .e-input-group.e-control-wrapper textarea:focus,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus textarea:focus,
  .e-bigger .e-input-group.e-control-wrapper textarea.e-input:focus {
    font: inherit;
    line-height: $input-bigger-textarea-line-height;
    min-height: $textarea-bigger-min-height;
    padding: $textarea-bigger-padding;
  }

  .e-input-group.e-small.e-bigger textarea.e-input,
  .e-input-group.e-small textarea.e-input.e-bigger,
  .e-input-group textarea.e-input.e-bigger.e-small,
  .e-input-group.e-bigger textarea.e-small,
  .e-input-group.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-input-group textarea.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper textarea.e-input,
  .e-bigger .input-group textarea.e-small,
  .e-bigger .e-input-group.e-small textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-bigger .e-small.e-input-group.e-control-wrapper textarea.e-input,
  .e-small .input-group textarea.e-bigger,
  .e-small .e-input-group.e-bigger textarea.e-input,
  .e-small .e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
  .e-float-input textarea.e-bigger.e-small,
  .e-float-input.e-small.e-bigger textarea,
  .e-float-input.e-small textarea.e-bigger,
  .e-float-input.e-bigger textarea.e-small,
  .e-bigger .e-float-input.e-small textarea,
  .e-bigger.e-small .e-float-input textarea,
  .e-bigger .float-input textarea.e-small,
  .e-small .e-float-input.e-bigger textarea,
  .e-small .float-input textarea.e-bigger,
  .e-small .e-float-input.e-control-wrapper textarea.e-bigger,
  .e-float-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-float-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea,
  .e-bigger .e-small.e-float-input.e-control-wrapper textarea {
    font: inherit;
    line-height: $input-bigger-textarea-line-height;
    min-height: $textarea-bigger-small-min-height;
    padding: $textarea-bigger-small-padding;
  }

  .e-input-group.e-input-focus textarea.e-input.e-bigger.e-small,
  .e-input-group.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-input-group.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-input-group.e-input-focus.e-bigger textarea.e-small,
  .e-input-group.e-control-wrapper.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-input-group.e-input-focus textarea.e-input,
  .e-bigger .e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-bigger.e-small .e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-bigger .e-small.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-small .e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input {
    font: inherit;
    line-height: $input-bigger-textarea-line-height;
    min-height: $textarea-bigger-small-min-height;
    padding: $textarea-bigger-small-padding;
  }

  .e-bigger input.e-input,
  .e-bigger textarea.e-input,
  input.e-input.e-bigger,
  textarea.e-input.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $input-bigger-min-height;
    }
  }

  .e-bigger input.e-input.e-small,
  .e-bigger .e-small input.e-input,
  .e-bigger.e-small input.e-input,
  .e-small input.e-input.e-bigger,
  input.e-input.e-bigger.e-small,
  .e-small .e-bigger input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $input-bigger-smaller-min-height;
    }
  }

  input.e-input.e-bigger.e-outline,
  textarea.e-input.e-bigger.e-outline,
  .e-outline.e-bigger input.e-input,
  .e-outline.e-bigger textarea.e-input,
  .e-outline.e-input-group.e-bigger,
  .e-bigger .e-input-group.e-outline,
  .e-outline.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-input-group.e-bigger.e-disabled,
  .e-bigger .e-outline.e-input-group.e-disabled,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled,
  .e-outline.e-input-group.e-bigger,
  .e-bigger .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input.e-bigger,
  .e-bigger .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-bigger-input-font-size;
    }
  }

  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-outline.e-input-group.e-bigger.e-disabled .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-disabled .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-disabled .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-disabled .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-bigger-input-icon-font-size;
    }
  }

  .e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
    }
  }

  .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-bigger-label-font-size;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger,
  .e-small .e-outline.e-input-group.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small,
  .e-bigger.e-small .e-outline.e-input-group,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small,
  .e-bigger.e-small .e-outline.e-input-group.e-control-wrapper,
  .e-outline.e-float-input.e-small.e-bigger,
  .e-small .e-outline.e-float-input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-small,
  .e-bigger.e-small .e-outline.e-float-input,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-input-font-size;
    }
  }

  .e-small.e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small.e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-small.e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger textarea[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea[readonly] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea[disabled] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-label-font-size;
    }
  }

  .e-outline.e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group:not(.e-float-input) .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper:not(.e-float-input) .e-input,
  .e-outline.e-float-input.e-bigger input,
  .e-bigger .e-outline.e-float-input input,
  .e-outline.e-float-input.e-input-group.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-input-group input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-bigger-input-min-height;
    }
  }

  .e-outline.e-input-group.e-bigger .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-outline.e-input-group .e-clear-icon.e-bigger,
  .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-outline.e-input-group .e-clear-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $outline-bigger-clear-icon-font-size;
      padding: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left $outline-bigger-input-icon-padding $zero-value;
    }
    @if $input-skin-name == 'Material3' {
      font-size: $outline-bigger-clear-icon-font-size;
      margin: $outline-input-clear-icon-margin;
      padding: $zero-value;
    }
  }

  .e-outline.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-bigger-input-icon-margin-right;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-bigger-input-icon-margin-right;
    }
  }

  .e-outline.e-input-group.e-bigger .e-input-group-icon,
  .e-outline.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left  $outline-bigger-input-icon-padding $zero-value;
    }
  }

  .e-outline.e-input-group.e-prepend.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-prepend .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-input-icon-padding $zero-value $outline-bigger-input-icon-padding $outline-bigger-input-icon-margin-left;
    }
  }

  input.e-input.e-bigger.e-outline,
  .e-bigger input.e-input.e-outline,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) input.e-bigger,
  .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input:not(.e-float-icon-left) input.e-bigger,
  .e-outline.e-input-group:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) input,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) input.e-input,
  .e-bigger .e-outline.e-input-group:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-bigger.e-float-input:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input.e-bigger.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left).e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $outline-bigger-input-padding-top $outline-bigger-input-padding-left;
    }
  }

  textarea.e-input.e-bigger.e-outline,
  .e-bigger textarea.e-input.e-outline,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) textarea.e-bigger,
  .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input:not(.e-float-icon-left) textarea.e-bigger,
  .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-float-icon-left) textarea,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) textarea,
  .e-bigger .e-outline.e-input-group.e-control-wrapper:not(.e-float-icon-left) textarea.e-input,
  .e-bigger .e-outline.e-input-group:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea:focus,
  .e-outline.e-float-input.e-bigger.e-float-input:not(.e-float-icon-left) textarea:focus,
  .e-bigger .e-outline.e-input-group.e-float-input:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-float-input:not(.e-float-icon-left) textarea:focus,
  .e-bigger .e-outline.e-float-input:not(.e-float-icon-left) textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-textarea-maring-top;
      padding: $zero-value $outline-bigger-input-padding-left $outline-bigger-input-padding-left;
    }
  }

  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-outline.e-float-input.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-small input,
  .e-small .e-outline.e-float-input.e-bigger input,
  .e-outline.e-float-input.e-input-group.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-input-group.e-bigger input,
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-input-group.e-bigger input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      min-height: $outline-small-bigger-input-min-height;
    }
  }

  input.e-input.e-bigger.e-small.e-outline,
  .e-bigger input.e-input.e-small.e-outline,
  .e-outline.e-input-group.e-small.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) input.e-input,
  .e-outline.e-input-group.e-small:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-input.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) input.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-input,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-small:not(.e-float-icon-left) input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) input,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) input,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) input:focus,
  .e-small .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) input.e-input:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) input:focus,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) input:focus,
  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) input.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) input:focus,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left) input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left).e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $outline-small-bigger-input-margin-top $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-bottom;
    }
  }

  textarea.e-input.e-bigger.e-small.e-outline,
  .e-bigger textarea.e-input.e-small.e-outline,
  .e-outline.e-input-group.e-small.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-input-group.e-small:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-input.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) textarea.e-input,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-input,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-small:not(.e-float-icon-left) textarea.e-bigger,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-float-icon-left) textarea,
  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-bigger,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) textarea,
  .e-bigger .e-outline.e-input-group.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-float-icon-left) textarea:focus,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-float-icon-left) textarea:focus,
  .e-small .e-outline.e-input-group.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-small .e-outline.e-input-group.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea.e-input:focus,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-float-icon-left) textarea:focus,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-float-icon-left) textarea:focus,
  .e-outline.e-input-group.e-bigger.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea.e-input:focus,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-float-icon-left) textarea:focus,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-float-icon-left) textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      margin: $outline-bigger-textarea-maring-top;
      padding: $zero-value $outline-small-bigger-input-margin-left $outline-small-bigger-input-margin-left;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-outline.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-small-bigger-clear-icon-font-size;
      padding: $outline-input-bgr-small-clear-padding;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-float-input.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-outline.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $zero-value;
      margin-right: $outline-small-bigger-icon-margin-right;
    }
  }

  .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-small-group-icon-top $outline-small-bigger-icon-margin-left $outline-bigger-small-group-icon-bottom $zero-value;
    }
  }

  .e-outline.e-input-group.e-prepend.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon.e-bigger,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-outline.e-input-group.e-prepend.e-small .e-input-group-icon,
  .e-bigger .e-outline.e-input-group.e-prepend.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin: $outline-bigger-small-group-icon-top $zero-value $outline-bigger-small-group-icon-bottom $outline-small-bigger-icon-margin-left;
    }
  }

  .e-outline.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      box-sizing: border-box;
      display: flex;
      left: $input-zero-padding-margin;
      line-height: $outline-label-default-line-height;
      position: absolute;
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
      transition: color .2s, font-size .2s, line-height .2s;
    }
  }

  .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-bigger-label-line-height;
    }
  }

  .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-bigger-label-line-height;
    }
  }

  .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) input:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-small-bigger-label-line-height;
    }
  }

  .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      line-height: $outline-textarea-small-bigger-label-line-height;
    }
  }

  .e-bigger.e-outline label.e-float-text::before,
  .e-bigger.e-outline label.e-float-text::after,
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
  .e-bigger.e-outline.e-float-input label.e-float-text::after,
  .e-bigger.e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger.e-outline.e-float-input.e-control-wrapper label.e-float-text::after,
  .e-bigger .e-outline label.e-float-text::before,
  .e-bigger .e-outline label.e-float-text::after,
  .e-bigger .e-outline.e-float-input label.e-float-text::before,
  .e-bigger .e-outline.e-float-input label.e-float-text::after,
  .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-width: $outline-bigger-label-min-width;
    }
  }

  .e-bigger.e-small.e-outline label.e-float-text::before,
  .e-bigger.e-small.e-outline label.e-float-text::after,
  .e-bigger.e-small.e-outline.e-float-input label.e-float-text::before,
  .e-bigger.e-small.e-outline.e-float-input label.e-float-text::after,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper label.e-float-text::after,
  .e-bigger.e-small .e-outline label.e-float-text::before,
  .e-bigger.e-small .e-outline label.e-float-text::after,
  .e-bigger.e-small .e-outline.e-float-input label.e-float-text::before,
  .e-bigger.e-small .e-outline.e-float-input label.e-float-text::after,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::before,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper label.e-float-text::after {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      min-width: $outline-bigger-small-label-min-width;
    }
  }

  .e-rtl .e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger.e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group .e-clear-icon.e-bigger,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-outline.e-input-group .e-clear-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper .e-clear-icon .e-rtl .e-outline.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group .e-clear-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group .e-clear-icon,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-bigger-input-icon-margin-left;
      padding-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-outline.e-input-group .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger.e-rtl .e-outline.e-input-group .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-bigger-input-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group.e-small .e-clear-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-clear-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding-left: $outline-small-bigger-icon-margin-left;
      padding-right: $zero-value;
    }
  }

  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger + .e-input-group-icon.e-bigger:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon + .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-outline.e-input-group.e-small .e-input-group-icon + .e-input-group-icon:last-child .e-bigger,
  .e-rtl.e-outline.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-outline.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-rtl.e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-bigger.e-rtl .e-outline.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      margin-left: $outline-small-bigger-icon-margin-left;
      margin-right: $zero-value;
    }
  }

  .e-outline.e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-small .e-outline.e-float-input label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $outline-float-label-top;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  .e-outline.e-float-input.e-bigger .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-outline.e-float-input input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-bigger-clear-icon;
    }
  }

  .e-outline.e-float-input.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-outline.e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-small .e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-outline.e-bigger .e-float-input.e-small input:first-child ~ .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $outline-input-bigger-small-clear-icon;
    }
  }

  .e-outline.e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger label.e-float-text,
  .e-outline.e-float-input label.e-float-text.e-bigger,
  .e-outline.e-float-input input.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input label.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-bigger,
  .e-outline.e-float-input.e-control-wrapper input.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-outline.e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-outline-float-label-font-size;
    }
  }

  .e-bigger .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-outline-float-label-font-size;
    }
  }

  .e-bigger .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-bigger .e-outline.e-float-input.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      animation-name: slideTopUp;/* stylelint-disable-line no-unknown-animations */
    }
  }

  .e-filled input.e-input.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger input,
  .e-filled.e-input-group.e-bigger input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-filled.e-input-group input,
  .e-bigger .e-filled.e-input-group input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-bigger input,
  .e-filled.e-float-input.e-bigger input.e-input,
  .e-bigger .e-filled.e-float-input input,
  .e-bigger .e-filled.e-float-input input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input.e-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-bigger:not(.e-input-group) input,
  .e-filled.e-float-input.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-filled.e-float-input:not(.e-input-group) input,
  .e-bigger .e-filled.e-float-input:not(.e-input-group) input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-group) input.e-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input,
  .e-filled input.e-input.e-small.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger.e-small input,
  .e-filled.e-input-group.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-input-group input,
  .e-bigger.e-small .e-filled.e-input-group input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-bigger.e-small input,
  .e-filled.e-float-input.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-float-input input,
  .e-bigger.e-small .e-filled.e-float-input input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input.e-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper input.e-input,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-group) input,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-group) input.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-group) input.e-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-group) input.e-input,
  .e-filled.e-input-group textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-filled textarea.e-input.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger textarea,
  .e-filled.e-input-group.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-input-group textarea,
  .e-bigger .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-float-input.e-bigger textarea,
  .e-filled.e-float-input.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-float-input textarea,
  .e-bigger .e-filled.e-float-input textarea.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea.e-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea.e-input,
  .e-filled textarea.e-input.e-small.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger.e-small textarea,
  .e-filled.e-input-group.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group textarea,
  .e-bigger.e-small .e-filled.e-input-group textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small textarea,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper textarea,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-float-input.e-bigger.e-small textarea,
  .e-filled.e-float-input.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-float-input textarea,
  .e-bigger.e-small .e-filled.e-float-input textarea.e-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      box-sizing: border-box;
    }
  }

  .e-filled.e-input-group.e-bigger,
  .e-bigger .e-filled.e-input-group,
  .e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-filled-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group.e-small,
  .e-bigger .e-filled.e-input-group.e-small,
  .e-small .e-filled.e-input-group.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-small-filled-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-bigger,
  .e-bigger .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-filled-float-input-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-float-input.e-small,
  .e-bigger .e-filled.e-float-input.e-small,
  .e-small .e-filled.e-float-input.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-top: $filled-wrapper-margin;
      padding: $bigger-small-filled-float-input-wrapper-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper,
  .e-rtl .e-filled.e-input-group.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-input-group.e-small,
  .e-bigger .e-rtl.e-filled.e-input-group.e-small,
  .e-small .e-rtl.e-filled.e-input-group.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-input-group.e-small,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small,
  .e-small.e-rtl .e-filled.e-input-group.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-small-filled-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper,
  .e-rtl .e-filled.e-float-input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-filled-float-input-wrapper-rtl-padding;
    }
  }

  .e-rtl.e-filled.e-float-input.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-float-input.e-small,
  .e-bigger .e-rtl.e-filled.e-float-input.e-small,
  .e-small .e-rtl.e-filled.e-float-input.e-bigger,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-rtl.e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-float-input.e-small,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small,
  .e-small.e-rtl .e-filled.e-float-input.e-bigger,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-bigger.e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-small-filled-float-input-wrapper-rtl-padding;
    }
  }

  .e-filled input.e-input.e-bigger#{$css},
  .e-filled textarea.e-input.e-bigger#{$css},
  .e-filled.e-input-group.e-bigger .e-input,
  .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input,
  .e-bigger .e-filled input.e-input#{$css},
  .e-bigger .e-filled textarea.e-input#{$css},
  .e-bigger .e-filled.e-input-group .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input,
  .e-filled.e-input-group.e-bigger .e-input:focus,
  .e-bigger .e-filled.e-input-group .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input:focus,
  .e-filled.e-input-group.e-bigger.e-input-focus .e-input,
  .e-bigger .e-filled.e-input-group.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-input-padding;
    }
  }

  .e-filled .e-input.e-bigger#{$css}:focus,
  .e-bigger .e-filled .e-input#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $filled-bigger-input-padding-bottom;
    }
  }

  .e-filled .e-input.e-small.e-bigger#{$css}:focus,
  .e-bigger .e-filled .e-input.e-small#{$css}:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $filled-bigger-small-input-padding-bottom;
    }
  }

  .e-filled .e-input.e-small.e-bigger#{$css},
  .e-bigger .e-filled .e-input#{$css}.e-small,
  .e-small .e-filled .e-input#{$css}.e-bigger,
  .e-filled.e-input-group.e-small.e-bigger .e-input,
  .e-filled.e-input-group.e-small .e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input,
  .e-filled.e-input-group.e-small.e-bigger .e-input:focus,
  .e-filled.e-input-group.e-small .e-input.e-bigger:focus,
  .e-bigger .e-filled.e-input-group.e-small .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input.e-bigger:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input:focus,
  .e-filled.e-input-group.e-small.e-bigger.e-input-focus .e-input,
  .e-filled.e-input-group.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-input-focus .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-input-padding;
    }
  }

  .e-filled.e-float-input.e-bigger input,
  .e-filled.e-float-input input.e-bigger,
  .e-bigger .e-filled.e-float-input input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-float-input-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger input,
  .e-filled.e-float-input.e-small input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-small input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-float-input-padding;
    }
  }

  .e-rtl .e-filled input.e-input.e-bigger#{$css},
  .e-filled input.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl .e-filled input.e-input#{$css},
  .e-bigger .e-filled input.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-bigger.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input,
  .e-rtl .e-filled.e-input-group.e-bigger input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger input.e-input,
  .e-filled.e-input-group.e-rtl input.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group input.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-rtl input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-rtl input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-input-focus input.e-input,
  .e-bigger .e-filled.e-input-group.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-rtl input,
  .e-filled.e-float-input.e-bigger.e-rtl input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-rtl .e-filled.e-float-input.e-bigger input,
  .e-filled.e-float-input.e-control-wrapper.e-rtl input.e-bigger,
  .e-filled.e-float-input.e-rtl input.e-bigger,
  .e-rtl .e-filled.e-float-input.e-control-wrapper input.e-bigger,
  .e-rtl .e-filled.e-float-input input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input,
  .e-bigger .e-filled.e-float-input.e-rtl input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper input,
  .e-bigger.e-rtl .e-filled.e-float-input input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input input:focus,
  .e-bigger .e-filled.e-float-input.e-rtl input:focus,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-focus input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-focus input,
  .e-bigger .e-filled.e-float-input.e-rtl.e-input-focus input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-float-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-bigger .e-filled input.e-input.e-small.e-rtl#{$css},
  .e-filled.e-input-group.e-small.e-bigger.e-rtl input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-rtl input.e-input,
  .e-filled.e-input-group.e-small.e-rtl input.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input,
  .e-bigger.e-rtl input.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger input.e-input,
  .e-rtl .e-filled.e-input-group.e-small input.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl input.e-input:focus,
  .e-small .e-filled.e-input-group.e-bigger.e-rtl input.e-input:focus,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-rtl input.e-input:focus,
  .e-filled.e-input-group.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small input.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-bigger input.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger input.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-bigger.e-small input.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-rtl.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-rtl.e-input-focus input.e-input,
  .e-filled.e-input-group.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small.e-input-focus input.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-input-focus input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-bigger.e-input-focus input.e-input,
  .e-small.e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-bigger.e-small.e-input-focus input.e-input,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small.e-input-focus input.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-rtl input,
  .e-filled.e-float-input.e-small.e-rtl input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-small.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-rtl input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger input,
  .e-rtl .e-filled.e-float-input.e-small input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl input:focus,
  .e-bigger .e-filled.e-float-input.e-small.e-rtl input:focus,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-rtl input:focus,
  .e-small .e-filled.e-float-input.e-bigger.e-rtl input:focus,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl input:focus,
  .e-filled.e-float-input.e-bigger.e-small.e-rtl input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small input:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small input:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger input:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-bigger input:focus,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input:focus,
  .e-rtl .e-filled.e-float-input.e-bigger.e-small input:focus,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-rtl.e-input-focus input,
  .e-bigger .e-filled.e-float-input.e-small.e-rtl.e-input-focus input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-rtl.e-input-focus input,
  .e-small .e-filled.e-float-input.e-bigger.e-rtl.e-input-focus input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-filled.e-float-input.e-bigger.e-small.e-rtl.e-input-focus input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input,
  .e-bigger.e-rtl .e-filled.e-float-input.e-small.e-input-focus input,
  .e-small.e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input,
  .e-small.e-rtl .e-filled.e-float-input.e-bigger.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input,
  .e-rtl .e-filled.e-float-input.e-bigger.e-small.e-input-focus input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-float-input-rtl-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-bigger,
  .e-bigger .e-filled.e-float-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper,
  .e-filled.e-float-input.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-filled.e-float-input.e-input-group.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-input-font-size;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger,
  .e-small.e-bigger .e-filled.e-float-input,
  .e-bigger .e-filled.e-float-input.e-small,
  .e-small .e-filled.e-float-input.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger,
  .e-filled.e-float-input.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-disabled,
  .e-bigger .e-filled.e-float-input.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-bigger.e-disabled,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-disabled,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-disabled,
  .e-filled.e-float-input.e-input-group.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-input-group.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-bigger.e-disabled,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-bigger.e-disabled,
  .e-small.e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-disabled,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-small.e-disabled,
  .e-small .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-disabled {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-input-font-size;
    }
  }

  .e-filled.e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group:not(.e-float-input) .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $bigger-filled-default-input-min-height;
    }
  }

  .e-filled.e-float-input.e-bigger input,
  .e-bigger .e-filled.e-float-input input,
  .e-filled.e-float-input.e-input-group.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-input-group input,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $bigger-filled-input-min-height;
    }
  }

  .e-filled.e-input-group.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-bigger:not(.e-float-input) .e-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-small:not(.e-float-input) .e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small:not(.e-float-input) .e-input .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger:not(.e-float-input) .e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $bigger-small-filled-default-input-min-height;
    }
  }

  .e-float-input.e-bigger.e-small.e-filled input,
  .e-bigger .e-float-input.e-filled.e-small input,
  .e-small .e-float-input.e-filled.e-bigger input,
  .e-float-input.e-filled.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-filled.e-input-group.e-small input,
  .e-small .e-float-input.e-filled.e-input-group.e-bigger input,
  .e-float-input.e-filled.e-input-group.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-filled.e-input-group.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-filled.e-input-group.e-control-wrapper.e-bigger input,
  .e-float-input.e-filled.e-control-wrapper.e-bigger.e-small input,
  .e-bigger .e-float-input.e-filled.e-control-wrapper.e-small input,
  .e-small .e-float-input.e-filled.e-control-wrapper.e-bigger input,
  .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger.e-small input,
  .e-bigger .e-float-input.e-control-wrapper.e-filled.e-input-group.e-small input,
  .e-small .e-float-input.e-control-wrapper.e-filled.e-input-group.e-bigger input  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      min-height: $bigger-small-filled-input-min-height;
    }
  }

  .e-filled.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $input-bigger-float-text-left;
    }
  }

  .e-bigger .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top-after-floating;
    }
  }

  .e-bigger .e-filled.e-float-input.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill input:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-input-focus) input:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill textarea:-webkit-autofill ~ label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill textarea:not(:focus):valid:-webkit-autofill ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top-after-floating;
      transform: translateY(-50%) scale(.75);
      user-select: text;
    }
  }

  .e-filled.e-float-input.e-bigger label.e-float-text,
  .e-filled.e-float-input label.e-float-text.e-bigger,
  .e-filled.e-float-input input.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-bigger,
  .e-filled.e-float-input.e-control-wrapper input.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger textarea ~ label.e-float-text,
  .e-filled.e-float-input textarea ~ label.e-float-text.e-bigger,
  .e-filled.e-float-input textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text.e-bigger,
  .e-filled.e-float-input.e-control-wrapper textarea.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-float-label-font-size;
      top: $bigger-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top;
      transform: none;
    }
  }

  .e-filled.e-float-input.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small input label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small input label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-input-focus input ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-input-focus input ~ label.e-float-text,
  .e-float-input.e-filled.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea label.e-float-text.e-label-top,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea label.e-float-text.e-label-top,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      transform: translateY(-50%) scale(.75);
    }
  }

  .e-bigger .e-filled.e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-float-label-font-size;
      top: $bigger-small-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input label.e-float-text,
  .e-bigger .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $bigger-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-bigger.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-bigger label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input label.e-float-text .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      right: $bigger-filled-input-label-left;
    }
  }

  .e-small .e-filled.e-float-input.e-bigger label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $bigger-small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-rtl label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small.e-bigger label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small.e-bigger label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input label.e-float-text .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper label.e-float-text,
  .e-small.e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      right: $bigger-small-filled-input-label-left;
    }
  }

  .e-filled.e-float-input.e-bigger.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger.e-rtl .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text .e-filled.e-float-input.e-control-wrapper.e-rtl.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-rtl.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper.e-rtl .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-rtl.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl .e-small.e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-bigger.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper.e-rtl:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-rtl.e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      right: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-icon-size;
      margin-bottom: $input-zero-padding-margin;
      margin-top: $input-zero-padding-margin;
      min-height: $filled-input-icon-min-height;
      min-width: $filled-input-icon-min-height;
      padding: $input-filled-icon-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group .e-input-group-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $input-bgr-filled-control-icon-padding;
    }
  }

  .e-filled.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-input-group .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' {
      font-size: $bigger-filled-input-icon-size;
      min-height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-input-icon-size;
      height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-input-icon-size;
      min-height: $bigger-small-filled-input-icon-min-height;
      min-width: $bigger-small-filled-input-icon-min-height;
      padding: $input-bgr-filled-group-icon-padding;
    }
  }

  .e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $filled-input-icon-size;
      @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
        padding: $input-bgr-small-filled-float-group-icon-padding;
        margin: $input-bgr-small-filled-float-group-icon-margin;
      }
      @else {
        margin-bottom: $input-zero-padding-margin;
        margin-top: $input-zero-padding-margin;
        padding: 8px;
      }
    }
  }

  .e-filled.e-float-input.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-input-icon-size;
      padding: $input-bgr-filled-grp-icon-padding;
    }
  }

  .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-small .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-input-icon-size;
      padding: $input-bgr-filled-grp-icon-padding;
    }
  }

  .e-filled.e-input-group.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-filled.e-input-group .e-clear-icon.e-bigger,
  .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group .e-clear-icon,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-clear-icon {
    @if $input-skin-name == 'material' {
      font-size: $bigger-filled-input-clear-icon-size;
      min-height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-input-clear-icon-size;
      height: $bigger-filled-input-icon-min-height;
      min-width: $bigger-filled-input-icon-min-height;
    }
  }

  .e-filled.e-input-group.e-float-input.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input .e-clear-icon {
    @if $input-skin-name == 'material' {
      padding: $zero-value $zero-value $zero-value 8px;
    }
    @if $input-skin-name == 'Material3' {
      padding: $zero-value;
      margin: $outline-input-clear-icon-margin;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $input-clear-icon-padding;
      margin: $input-clear-icon-margin;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      font-size: $bigger-small-filled-input-clear-icon-size;
      min-height: $bigger-small-filled-input-icon-min-height;
      min-width: $bigger-small-filled-input-icon-min-height;
      padding: $filled-input-small-bgr-clear-padding;
    }
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-input-clear-icon-size;
      min-height: $bigger-small-filled-input-icon-min-height;
      min-width: $bigger-small-filled-input-icon-min-height;
      padding: $input-clear-icon-padding;
    }
  }

  .e-filled.e-input-group.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input.e-control-wrapper.e-small .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-bigger .e-clear-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-input-small-bgr-clear-padding;
    }
  }

  .e-rtl.e-filled.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group .e-clear-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group .e-clear-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-input-group.e-small .e-clear-icon,
  .e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl.e-filled.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group .e-clear-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group .e-clear-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-small .e-clear-icon,
  .e-bigger.e-rtl .e-filled.e-input-group.e-control-wrapper.e-small .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger .e-rtl.e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-input-group.e-small .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger .e-clear-icon,
  .e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small .e-clear-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      padding: $filled-rtl-input-small-bgr-clear-padding;
    }
  }

  .e-filled.e-float-input.e-bigger .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper.e-bigger .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-clear-icon::before,
  .e-filled.e-float-input input.e-bigger:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-input-clear-icon-size;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger .e-clear-icon::before,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-small.e-bigger .e-clear-icon::before,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
  .e-small .e-filled.e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-small .e-filled.e-float-input.e-bigger input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small input:first-child ~ .e-clear-icon::before,
  .e-bigger .e-filled.e-float-input.e-small input:first-child ~ .e-clear-icon::before {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-input-clear-icon-size;
    }
  }

  .e-filled.e-float-input.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap input[disabled] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[readonly] ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap input[disabled] ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-small-filled-input-label-top-after-floating;
    }
  }

  .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-bigger,
  .e-filled.e-float-input .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-bigger,
  .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap input.e-bigger ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom  {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-filled-input-label-top;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      top: $bigger-small-filled-input-label-top;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group:not(.e-float-input).e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group:not(.e-float-input).e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-filled-input-icon-size;
      margin: $zero-value;
      min-height: $bigger-filled-input-left-icon-min-height;
      min-width: $bigger-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group:not(.e-float-input).e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper:not(.e-float-input).e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      font-size: $bigger-small-filled-input-icon-size;
      margin: $zero-value;
      min-height: $bigger-small-filled-input-left-icon-min-height;
      min-width: $bigger-small-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin: $zero-value;
      min-height: $bigger-filled-input-left-icon-min-height;
      min-width: $bigger-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-float-input.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-bigger.e-float-icon-left > .e-input-group-icon,
  .e-filled.e-float-input.e-control-wrapper.e-input-group.e-small.e-float-icon-left > .e-input-group-icon.e-bigger,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-float-input.e-small.e-float-icon-left > .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin: $zero-value;
      min-height: $bigger-small-filled-input-left-icon-min-height;
      min-width: $bigger-small-filled-input-left-icon-min-width;
      padding: $zero-value;
    }
  }

  .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom .e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom .e-small.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom .e-small .e-filled.e-float-input.e-bigger .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper .e-input-in-wrap label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small.e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-input-focus) .e-input-in-wrap input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      left: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-right: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-bigger.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger.e-rtl .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-bigger.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-filled.e-input-group.e-small.e-bigger.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-small.e-bigger .e-filled.e-input-group.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-bigger .e-filled.e-input-group.e-small.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-small .e-filled.e-input-group.e-bigger.e-control-wrapper.e-rtl .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon:last-child,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group.e-small .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group.e-bigger .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-bigger .e-filled.e-input-group.e-small.e-control-wrapper .e-input-group-icon:last-child,
  .e-rtl.e-small .e-filled.e-input-group.e-bigger.e-control-wrapper .e-input-group-icon:last-child {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $input-zero-padding-margin;
    }
  }

  .e-filled.e-rtl.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-filled.e-rtl.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-small.e-bigger .e-rtl.e-filled.e-input-group .e-input-group-icon,
  .e-small.e-bigger .e-rtl.e-filled.e-input-group.e-control-wrapper .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-small.e-bigger .e-input-group-icon,
  .e-rtl .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group .e-input-group-icon,
  .e-rtl.e-small.e-bigger .e-filled.e-input-group.e-control-wrapper .e-input-group-icon {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $input-zero-padding-margin;
      margin-right: $input-zero-padding-margin;
    }
  }

  .e-filled.e-input-group.e-bigger textarea,
  .e-filled.e-input-group.e-bigger textarea.e-input,
  .e-filled.e-input-group textarea.e-bigger,
  .e-filled.e-input-group textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea,
  .e-filled.e-input-group.e-control-wrapper.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper textarea.e-bigger,
  .e-filled.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group textarea,
  .e-bigger .e-filled.e-input-group textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-filled.e-input-group.e-input-focus.e-bigger textarea,
  .e-filled.e-input-group.e-input-focus.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-input-focus textarea.e-bigger,
  .e-filled.e-input-group.e-input-focus textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-bigger,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-input-focus textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-textarea-padding;
    }
  }

  .e-filled.e-float-input.e-bigger textarea,
  .e-filled.e-float-input textarea.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-bigger textarea,
  .e-filled.e-float-input.e-control-wrapper textarea.e-bigger,
  .e-bigger .e-filled.e-float-input textarea,
  .e-bigger .e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-small textarea.e-input.e-bigger,
  .e-filled.e-input-group textarea.e-input.e-bigger.e-small,
  .e-filled.e-input-group.e-bigger textarea.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-bigger .input-group textarea.e-small,
  .e-bigger .e-filled.e-input-group.e-small textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small textarea.e-input,
  .e-bigger .e-small.e-filled.e-input-group.e-control-wrapper textarea.e-input,
  .e-small .input-group textarea.e-bigger,
  .e-small .e-filled.e-input-group.e-bigger textarea.e-input,
  .e-small .e-filled.e-input-group.e-control-wrapper textarea.e-input.e-bigger,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-input-focus textarea.e-input.e-bigger.e-small,
  .e-filled.e-input-group.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-input-focus.e-bigger textarea.e-small,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input.e-bigger,
  .e-bigger.e-small .e-filled.e-input-group.e-input-focus textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-input-focus.e-small textarea.e-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input,
  .e-bigger .e-small.e-filled.e-input-group.e-control-wrapper.e-input-focus textarea.e-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-textarea-padding;
    }
  }

  .e-filled.e-float-input textarea.e-bigger.e-small,
  .e-filled.e-float-input.e-small.e-bigger textarea,
  .e-filled.e-float-input.e-small textarea.e-bigger,
  .e-filled.e-float-input.e-bigger textarea.e-small,
  .e-bigger .e-filled.e-float-input.e-small textarea,
  .e-bigger.e-small .e-filled.e-float-input textarea,
  .e-bigger .e-float-input textarea.e-small,
  .e-small .e-filled.e-float-input.e-bigger textarea,
  .e-small .float-input textarea.e-bigger,
  .e-small .e-filled.e-float-input.e-control-wrapper textarea.e-bigger,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-filled.e-float-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small textarea,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper textarea,
  .e-bigger .e-small.e-filled.e-float-input.e-control-wrapper textarea {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-float-textarea-padding;
    }
  }

  .e-filled.e-input-group.e-multi-line-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-input-group.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-input-group.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-input-group.e-small.e-multi-line-input,
  .e-small .e-filled.e-input-group.e-bigger.e-multi-line-input,
  .e-filled.e-input-group.e-control-wrapper.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-input-group.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-input-group.e-control-wrapper.e-bigger.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-small-filled-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-bigger.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-filled-float-textarea-wrapper-padding;
    }
  }

  .e-filled.e-float-input.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-float-input.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-small.e-multi-line-input,
  .e-small .e-filled.e-float-input.e-bigger.e-multi-line-input,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-multi-line-input,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-multi-line-input,
  .e-small .e-filled.e-float-input.e-control-wrapper.e-bigger.e-multi-line-input {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $bigger-small-filled-float-textarea-wrapper-padding;
    }
  }

  .e-rtl .e-filled textarea.e-input.e-bigger#{$css},
  .e-filled textarea.e-input.e-bigger.e-rtl#{$css},
  .e-bigger.e-rtl .e-filled textarea.e-input#{$css},
  .e-bigger .e-filled textarea.e-input.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-bigger.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input textarea.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper textarea.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-rtl textarea.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-bigger.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea.e-bigger,
  .e-filled.e-float-input.e-multi-line-input.e-rtl textarea.e-bigger,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea.e-bigger,
  .e-rtl .e-filled.e-float-input.e-multi-line-input textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-rtl textarea,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input textarea,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper textarea:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input textarea:focus,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-rtl textarea:focus,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-rtl textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-float-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-bigger .e-filled textarea.e-input.e-small.e-rtl#{$css},
  .e-filled.e-input-group.e-multi-line-input.e-small.e-bigger.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-bigger.e-rtl textarea.e-input,
  .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input.e-bigger,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input.e-bigger,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input,
  .e-bigger.e-rtl textarea.e-input.e-small,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-small.e-bigger textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-bigger textarea.e-input,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input.e-bigger,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input.e-bigger,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-small.e-rtl textarea.e-input:focus,
  .e-bigger .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-bigger.e-rtl textarea.e-input:focus,
  .e-small .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea.e-input:focus,
  .e-filled.e-input-group.e-multi-line-input.e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-small.e-rtl textarea.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-small textarea.e-input:focus,
  .e-bigger.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-small textarea.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger textarea.e-input:focus,
  .e-small.e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-bigger.e-small textarea.e-input:focus,
  .e-rtl .e-filled.e-input-group.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea.e-input:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-multi-line-input.e-small.e-bigger.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-bigger.e-rtl textarea,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea.e-bigger,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-bigger textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-small.e-bigger textarea,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea.e-bigger,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small.e-rtl textarea:focus,
  .e-bigger .e-filled.e-float-input.e-multi-line-input.e-small.e-rtl textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-rtl textarea:focus,
  .e-small .e-filled.e-float-input.e-multi-line-input.e-bigger.e-rtl textarea:focus,
  .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-small.e-rtl textarea:focus,
  .e-filled.e-float-input.e-multi-line-input.e-bigger.e-small.e-rtl textarea:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-small textarea:focus,
  .e-bigger.e-rtl .e-filled.e-float-input.e-multi-line-input.e-small textarea:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger textarea:focus,
  .e-small.e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-control-wrapper.e-bigger.e-small textarea:focus,
  .e-rtl .e-filled.e-float-input.e-multi-line-input.e-bigger.e-small textarea:focus {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding: $filled-bigger-small-float-textarea-padding;
      text-indent: $input-zero-padding-margin;
    }
  }

  .e-filled.e-float-input.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-bigger.e-small .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      border: $input-group-full-border;
      border-width: $zero-value;
      margin-left: $input-bgr-small-filled-wrap-margin-left;
    }
  }

  .e-rtl.e-bigger.e-small .e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-bigger.e-small .e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl.e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-float-input.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-input-group.e-float-icon-left .e-input-in-wrap,
  .e-rtl .e-bigger.e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small.e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-float-input.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-float-icon-left.e-rtl .e-input-in-wrap,
  .e-bigger.e-small .e-filled.e-input-group.e-control-wrapper.e-float-icon-left.e-rtl .e-input-in-wrap {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      margin-left: $input-zero-padding-margin;
      margin-right: $input-bgr-small-rtl-wrap-margin-right;
    }
  }

  .e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    color: $input-header-font-color;
    @if $input-skin-name == 'highcontrast' {
      color: $input-placeholder;
    }
  }

  .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-small .e-float-input.e-control-wrapper.e-bigger textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger.e-small .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    @if $input-skin-name == 'highcontrast' {
      color: $content-font-alt;
    }
  }

  .e-bigger .e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-textarea) {
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $input-zero-padding-margin;
    }
  }

  .e-bigger textarea.e-input#{$css}:focus:not(.e-success):not(.e-warning):not(.e-error) {
    @if $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      padding-bottom: $text-area-bgr-focus-padding-bottom;
    }
  }

  .e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name != 'fluent2' {
      color: $float-label-font-color;
    }
    @else {
      color: $float-label-top-font-color;
    }
  }

  .e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
    color: $input-header-font-color;
    @if $input-skin-name == 'highcontrast' {
      color: $input-placeholder;
    }
  }

  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    color: $float-label-font-color;
  }

  .e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    color: $float-label-disbale-font-color;
  }

  .e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-active-accent-color;
    }
  }

  .e-outline.e-float-input.e-bigger.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-success.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-success) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-success).e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-success-color;
    }
  }

  .e-outline.e-float-input.e-bigger.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-error-color;
    }
  }

  .e-outline.e-float-input.e-bigger.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-warning.e-input-focus input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-warning) input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-small:not(.e-warning).e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $input-warning-color;
    }
  }

  .e-outline.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      color: $outline-float-label-disbale-font-color;
    }
  }

  .e-filled.e-float-input.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error):not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill:not(.e-error) textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-warning-color;
    }
  }

  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[disabled] ~ label.e-label-top.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-float-label-color;
    }
  }

  .e-filled.e-float-input.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea[readonly]:focus ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error) textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error).e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-active-accent-color;
    }
  }

  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $filled-input-disabled-font-color;
    }
  }

  .e-filled.e-float-input.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-success:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-success textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-success-color;
    }
  }

  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
  .e-filled.e-float-input.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:valid ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:valid ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning input:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning input:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning textarea:focus ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning textarea:focus ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
  .e-filled.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning:not(.e-input-focus) input:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-float-input.e-bigger.e-small.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger .e-filled.e-float-input.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-bigger.e-small .e-filled.e-float-input.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text,
  .e-filled.e-bigger.e-small.e-control-wrapper.e-autofill.e-warning textarea:not(:focus):-webkit-autofill ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' or $input-skin-name == 'fluent2' or $input-skin-name == 'tailwind3' {
      color: $input-warning-color;
    }
  }

  .e-outline.e-float-input.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger input label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input input label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger input[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrappe.e-bigger input label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:focus ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea:valid ~ label.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-outline.e-float-input.e-control-wrapper.e-bigger textarea label.e-float-text.e-label-top,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:focus ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea:valid ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea[readonly] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea[disabled] ~ label.e-label-top.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper textarea label.e-float-text.e-label-top,
  .e-outline.e-float-input.e-input-focus.e-bigger input ~ label.e-float-text,
  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text {
    @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
      top: $outline-float-label-top;
      transform: translate3d($zero-value, $zero-value, $zero-value) scale(1);
    }
  }
}

$signature-border: 1px solid !default;
$signature-border-color: $grey-99 !default;
$signature-background-color: $grey-light-font !default;

@include export-module('signature-layout') {
  .e-signature.e-control {
    border: $signature-border;
    @if $skin-name == 'tailwind3' {
      box-shadow: $shadow-xl;
    }
  }
}

@include export-module('signature-theme') {
  .e-signature.e-control {
    background-color: $signature-background-color;
    border: $signature-border;
    border-color: $signature-border-color;
  }
}

//default
//undefined
//enddefault
$popup-width: auto !default;
$popup-height: auto !default;

@include export-module('popup-layout') {

  /*! popup layout */
  .e-popup {
    height: $popup-height;
    position: absolute;
    width: $popup-width;
    z-index: 1000;
  }

  .e-popup.e-popup-open {
    display: block;
  }

  .e-popup.e-popup-close {
    display: none;
  }
}

//default
$theme: 'Bootstrap';
$spin-overlay-background: rgba($grey-white, .2);
$spin-overlay-stroke-color: $grey-base;
$spin-overlay-font-color: $grey-light-font;
$spin-material-stroke-color: $grey-base;
$spin-boot4-stroke-color: $grey-base;
$spin-boot4-stroke-width: 4;
$spin-fabric-stroke-color: $grey-light-font;
$spin-fabric-stroke-width: 1.5;
$spin-fabric-arc-color: $grey-base;
$spin-label-font-family: 'Helvetica Neue', 'Segoe UI';
$spin-bootstrap-stroke-color: $grey-light-font;
$spin-label-font-size: 14px;
$spin-label-margin-top: 10px;
$spin-label-color: $grey-light-font;
$spin-padding: 10px;
$spin-boot5-stroke-width: 4;
$spin-tailwind-stroke-width: 4.5;
$spin-boot5-stroke-color: $grey-light-font;
$spin-tailwind-arc-color: $grey-base;
$spin-tailwind-stroke-color: $grey-light-font;
$spin-tail-margin: 0 auto !default;
$spin-bootstrap-border-radius: 50% !default;
$spinner-zero-space: 0 !default;
$spinner-full-width: 100% !default;
$spinner-half-width: 50% !default;
$spinner-full-height: 100% !default;

@mixin boot5-spinner-rotate {
  animation: material-spinner-rotate .75s linear infinite;
}

@mixin tw-spinner-rotate {
  animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.21, .21, .21, .21);
}

@mixin mat-spinner-rotate {
  animation: material-spinner-rotate 1568.63ms linear infinite;
}

@mixin fb-spinner-rotate {
  animation: fabric-spinner-rotate 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}

@mixin boot4-spinner-rotate {
  animation: material-spinner-rotate .75s linear infinite;
}

/* stylelint-disable property-no-vendor-prefix */
@keyframes material-spinner-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes fabric-spinner-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

//enddefault

// 

@include export-module('spinner-layout') {
  .e-spinner-pane {
    align-items: center;
    display: inline-flex;
    height: $spinner-full-height;
    justify-content: center;
    left: $spinner-zero-space;
    position: absolute;
    text-align: center;
    top: $spinner-zero-space;
    user-select: none;
    vertical-align: middle;
    width: $spinner-full-width;
    z-index: 1000;

    &::after {
      content: $theme;
      display: none;
    }

    &.e-spin-left {
      /* stylelint-disable property-no-vendor-prefix */
      .e-spinner-inner {
        -webkit-transform: translateX(0%) translateY(-50%);
        left: $spinner-zero-space;
        padding-left: $spin-padding;
        transform: translateX(0%) translateY(-50%);
      }
    }

    &.e-spin-right {
      .e-spinner-inner {
        -webkit-transform: translateX(-100%) translateY(-50%);
        left: $spinner-full-width;
        padding-right: $spin-padding;
        transform: translateX(-100%) translateY(-50%);
      }
    }

    &.e-spin-center {
      .e-spinner-inner {
        -webkit-transform: translateX(-50%) translateY(-50%);
        left: $spinner-half-width;
        transform: translateX(-50%) translateY(-50%);
      }
    }

    &.e-spin-hide {
      display: none;
    }

    &.e-spin-show {
      display: inline-flex;
    }

    .e-spinner-inner {
      -webkit-transform: translateX(-50%) translateY(-50%);
      left: $spinner-half-width;
      margin: $spinner-zero-space;
      position: absolute;
      text-align: center;
      top: $spinner-half-width;
      transform: translateX(-50%) translateY(-50%);
      z-index: 1000;

      .e-spin-label {
        font-family: $spin-label-font-family;
        font-size: $spin-label-font-size;
        margin-top: $spin-label-margin-top;
        text-align: center;
      }

      .e-spin-material,
      .e-spin-material3,
      .e-spin-tailwind3 {
        @include mat-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
        }
      }

      .e-spin-bootstrap4 {
        @include boot4-spinner-rotate;
        border-radius: $spin-bootstrap-border-radius;
        display: block;
        margin: $spin-tail-margin;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot4-stroke-width;
        }
      }

      .e-spin-fluent,
      .e-spin-fluent2,
      .e-spin-fabric {
        @include fb-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-fabric-stroke-width;
        }
      }

      .e-spin-tailwind {
        @include tw-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-tailwind-stroke-width;
        }
      }

      .e-spin-bootstrap5,
      .e-spin-bootstrap5v3 {
        @include boot5-spinner-rotate;
        border-radius: $spin-bootstrap-border-radius;
        display: block;
        margin: $spin-tail-margin;

        .e-path-circle {
          fill: none;
          stroke-linecap: square;
          stroke-width: $spin-boot5-stroke-width;
        }
      }

      .e-spin-bootstrap {
        display: block;
        margin: $spin-tail-margin;
      }

      .e-spin-high-contrast {
        @include fb-spinner-rotate;
        display: block;
        margin: $spin-tail-margin;
        overflow: visible;

        .e-path-arc,
        .e-path-circle {
          fill: none;
          stroke-width: $spin-fabric-stroke-width;
        }
      }
    }
  }
}

@include export-module('spinner-theme') {
  .e-spinner-pane {
    background-color: transparent;

    &.e-spin-overlay {
      background-color: $spin-overlay-background;

      .e-spinner-inner {

        .e-spin-label {
          color: $spin-overlay-font-color;
        }

        .e-spin-bootstrap {
          fill: $spin-overlay-stroke-color;
          stroke: $spin-overlay-stroke-color;
        }
      }
    }

    .e-spinner-inner {
      .e-spin-label {
        color: $spin-label-color;
      }

      .e-spin-fluent,
      .e-spin-fluent2,
      .e-spin-fabric {

        .e-path-circle {
          stroke: $spin-fabric-stroke-color;
        }

        .e-path-arc {
          stroke: $spin-fabric-arc-color;
        }
      }

      .e-spin-tailwind {
        .e-path-circle {
          stroke: $spin-tailwind-stroke-color;
        }

        .e-path-arc {
          stroke: $spin-tailwind-arc-color;
        }
      }

      .e-spin-bootstrap5,
      .e-spin-bootstrap5v3 {
        stroke: $spin-boot5-stroke-color;
      }

      .e-spin-high-contrast {
        .e-path-circle {
          stroke: $spin-fabric-stroke-color;
        }

        .e-path-arc {
          stroke: $spin-fabric-arc-color;
        }
      }

      .e-spin-material,
      .e-spin-material3,
      .e-spin-tailwind3 {
        stroke: $spin-material-stroke-color;
      }

      .e-spin-bootstrap4 {
        stroke: $spin-boot4-stroke-color;
      }

      .e-spin-bootstrap {
        fill: $spin-bootstrap-stroke-color;
        stroke: $spin-bootstrap-stroke-color;
      }
    }
  }
}

//default
$ddl-last-child-bottom-border: 0 !default;
$ddl-default-font-family: inherit !default;
$ddl-list-border-size: 1px !default;
$ddl-default-header-font-color: $default-font-color !default;
$ddl-line-height: 48px !default;
$ddl-list-bottom-border: $ddl-list-border-size !default;
$ddl-list-zero-padding: 0 !default;
$ddl-list-nodata-padding: 14px 16px !default;
$ddl-list-nodata-font-size: 14px !default;

$ddl-list-border-color: $grey-44 !default;
$ddl-list-font-family: inherit !default;
$ddl-list-gradient-color: $grey-white !default;
$mention-gradient-color: $brand-primary-font !default;
$mention-list-box-shadow-color: 0 6px 12px rgba($base-font, .5) !default;
$mention-chip-bg-color: $gray-dark !default;
$mention-chip-border-radius: 2px !default;
$mention-chip-border: none !default;
$ddl-list-bg-color: $grey-dark !default;
$ddl-list-header-bg-color: $grey-white !default;
$ddl-list-tap-color: transparent !default;
$ddl-list-header-border-color: 1px $grey-base !default;
$ddl-list-default-font-color: $grey-dark-font !default;
$ddl-list-active-border-color: $grey-white !default;
$mention-popup-bg-color: $grey-white !default;
$ddl-list-active-font-color: $brand-primary-font !default;
$mention-active-font-color: $brand-primary !default;
$ddl-list-active-bg-color: $brand-primary !default;
$ddl-list-hover-bg-color: $grey-44 !default;
$ddl-list-hover-border-color: $grey-white !default;
$ddl-list-hover-font-color: $grey-dark-font !default;
$ddl-nodata-font-color: $grey-d4 !default;
$ddl-group-list-padding-left: 30px !default;
$ddl-group-list-small-padding-left: $ddl-group-list-padding-left !default;
$ddl-group-list-bigger-padding-left: $ddl-group-list-padding-left !default;
$ddl-group-list-bigger-small-padding-left: $ddl-group-list-padding-left !default;
$ddl-header-font-weight: normal !default;
$ddl-list-header-padding-left: 20px !default;
$ddl-list-header-small-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-header-bigger-small-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-header-bigger-padding-left: $ddl-list-header-padding-left !default;
$ddl-list-font-size: 14px !default;
$ddl-group-list-font-size: 12px !default;
$ddl-list-header-font-color: color.adjust($brand-primary, $lightness: 15%) !default;
$ddl-list-text-indent: 20px !default;
$ddl-bigger-text-indent: $ddl-list-text-indent !default;
$ddl-list-rtl-padding-right: 0 !default;
$ddl-list-line-height: 26px !default;
$ddl-list-padding-right: 20px !default;
$ddl-list-rtl-padding-left: 20px !default;
$ddl-bigger-list-header-font-size: $ddl-list-font-size !default;
$ddl-multi-column-border-width: 0 0 1px 0 !default;
$ddl-multi-column-border-color: $grey-88 !default;
$ddl-list-header-font-size: $ddl-group-list-font-size !default;
$ddl-small-list-header-font-size: $ddl-group-list-font-size !default;
$ddl-group-list-item-text-intent: 0 !default;

// small size
$ddl-small-icon-font-size: 14px !default;
$ddl-small-line-height: 22px !default;
$ddl-small-list-font-color: $grey-dark-font !default;
$ddl-small-list-text-indent: 12px !default;

// Touch Small

$ddl-bigger-small-icon-font-size: 18px !default;
$ddl-bigger-small-line-height: 34px !default;
$ddl-bigger-small-list-font-color: $grey-dark-font !default;
$ddl-bigger-small-list-text-indent: 16px !default;
$ddl-bigger-small-list-header-font-size: 14px !default;
$ddl-bgr-list-item-icon-font-size: 20px !default;
$ddl-nrml-list-item-icon-font-size: 16px !default;
$bgr-drop-base-height: 45px !default;
$ddl-base-min-height: 36px !default;
$mention-popup-margin-top: 2px !default;
$ddl-two-width: 2px !default;
$ddl-mention-editable-min-height: 120px !default;
$ddl-multi-column-popup-padding-right: 16px !default;
$ddl-multi-column-popup-line-height: 36px !default;
$ddl-multi-popup-scroll-head-pad-right: 16px !default;
$ddl-zero-spacing: 0 !default;
$ddl-auto-height: auto !default;
$ddl-full-height: 100% !default;
$ddl-full-width: 100% !default;
$ddl-bgr-dropbase-list-icon-item-padding: 12px !default;

@include export-module('dropdownbase-bootstrap-dark') {
  .e-dropdownbase .e-list-item .e-list-icon {
    padding-inline-end: 10px;
  }

  .e-small .e-dropdownbase .e-list-item .e-list-icon {
    padding-inline-end: 8px;
  }
}

@include export-module('dropdownbase-layout') {
  .e-dropdownbase {
    display: block;
    height: $ddl-full-height;
    min-height: $ddl-base-min-height;
    position: relative;
    width: $ddl-full-width;
    @at-root {
      #{if(&, '&', '*')} .e-list-parent {
        margin: $ddl-list-zero-padding;
        padding: $ddl-list-zero-padding;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        cursor: default;
      }

      #{if(&, '&', '*')} .e-list-item {
        cursor: pointer;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: $ddl-full-width;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-nrml-list-item-icon-font-size;
        vertical-align: middle;
      }

      #{if(&, '&', '*')} .e-fixed-head {
        position: absolute;
        top: $ddl-zero-spacing;
      }
    }
  }

  .e-dropdownbase.e-content {
    overflow: auto;
    position: relative;
    @if $skin-name == 'tailwind3' {
      border-radius: $dropdownbase-content-border-radius;
    }
  }

  #{&}.e-popup.e-ddl .e-dropdownbase.e-nodata,
  #{&}.e-popup.e-mention .e-dropdownbase.e-nodata {
    color: $ddl-nodata-font-color;
    cursor: default;
    font-family: $ddl-list-font-family;
    font-size: $ddl-list-nodata-font-size;
    padding: $ddl-list-nodata-padding;
    text-align: center;
  }

  .e-mention.e-popup {
    background: $mention-popup-bg-color;
    box-shadow: 0 2px 3px 1px $mention-list-box-shadow-color;
    margin-top: $mention-popup-margin-top;
    position: absolute;
    @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3' {
      border: $mention-popup-border;
      border-radius: $mention-popup-border-radius;
      padding: $mention-popup-padding;
    }
    @else {
      border: 0;
    }
    @if $skin-name == 'Material3' {
      border-radius: $mention-popup-border-radius;
      padding: $mention-popup-padding;
    }
  }

  .e-mention.e-popup .e-dropdownbase {
    min-height: $ddl-list-line-height;
  }

  .e-mention .e-dropdownbase .e-list-item .e-highlight {
    display: inline;
    font-weight: bold;
    vertical-align: baseline;
  }

  .e-mention .e-mention-chip,
  .e-mention .e-mention-chip:hover {
    @if $skin-name != 'Material3' {
      background: $mention-chip-bg-color;
    }
    border-radius: $mention-chip-border-radius;
    border: $mention-chip-border;
    color: $mention-active-font-color;
    cursor: default;
    @if $skin-name == 'tailwind3' {
      font-weight: $font-weight-medium;
    }
  }

  .e-mention.e-editable-element {
    border: $ddl-two-width solid $ddl-list-border-color;
    height: $ddl-auto-height;
    min-height: $ddl-mention-editable-min-height;
    width: $ddl-full-width;
  }

  .e-form-mirror-div {
    white-space: pre-wrap;
  }

  .e-small.e-ddl .e-dropdownbase.e-nodata,
  .e-small .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-small-list-nodata-font-size;
    }
  }

  .e-rtl .e-dropdownbase.e-dd-group .e-list-item {
    padding-right: $ddl-group-list-padding-left;
  }

  .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-padding-left;
    text-indent: $ddl-zero-spacing;
  }

  .e-small .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-small-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: $ddl-zero-spacing;
    }
  }

  .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
    text-indent: $ddl-group-list-item-text-intent;
  }

  .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
    cursor: pointer;
    font-weight: normal;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
    width: $ddl-full-width;
    @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' {
      font-weight: $popup-multi-select-font-size;
    }
  }

  .e-rtl.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-item {
    padding-right: $ddl-group-list-padding-left;
  }
}

@include export-module('dropdownbase-theme') {
  .e-rtl {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-padding-left;
        }
      }
    }
  }

  .e-small.e-rtl,
  .e-small .e-rtl,
  .e-rtl .e-small {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-small-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-small-padding-left;
        }
      }
    }
  }

  .e-dropdownbase {
    border-color: $ddl-list-border-color;
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        /* stylelint-disable property-no-vendor-prefix */
        -webkit-tap-highlight-color: $ddl-list-tap-color;
        border-bottom: $ddl-list-bottom-border;
        border-color: $ddl-list-gradient-color;
        color: $ddl-list-default-font-color;
        font-family: $ddl-list-font-family;
        font-size: $ddl-list-font-size;
        line-height: $ddl-list-line-height;
        min-height: $ddl-list-line-height;
        padding-right: $ddl-list-padding-right;
        text-indent: $ddl-list-text-indent;
        @if $skin-name == 'Material3' {
          background: $ddl-list-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-bg-color;
        }
        @if $skin-name == 'fluent2' {
          margin-bottom: 2px;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      .e-fixed-head {
        border-color: $ddl-list-gradient-color;
        color: $ddl-list-header-font-color;
        font-family: $ddl-list-font-family;
        font-size: $ddl-list-header-font-size;
        font-weight: $ddl-header-font-weight;
        line-height: $ddl-list-line-height;
        min-height: $ddl-list-line-height;
        padding-left: $ddl-list-header-padding-left;
        padding-right: $ddl-list-padding-right;
        overflow: hidden;
        text-overflow: ellipsis;
        @if $skin-name == 'Material3' {
          background: $ddl-list-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active,
      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
          background: $ddl-list-active-bg-color;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $ddl-list-active-bg-color;
        }
        border-color: $ddl-list-active-border-color;
        color: $ddl-list-active-font-color;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        @if $skin-name == 'Material3' {
          background: $ddl-list-hover-bg-color;
        }
        @if $skin-name != 'Material3' {
          background-color: $ddl-list-hover-bg-color;
        }
        border-color: $ddl-list-hover-border-color;
        color: $ddl-list-hover-font-color;
      }

      #{if(&, '&', '*')} .e-list-item:active {
        @if $skin-name == 'Material3' {
          background: $ddl-list-pressed-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item:last-child {
        border-bottom: $ddl-last-child-bottom-border;
      }

      #{if(&, '&', '*')} .e-list-item.e-item-focus {
        @if $skin-name == 'Material3' {
          background: $ddl-list-focus-bg-color;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $ddl-list-hover-bg-color;
        }
        @if $skin-name == 'fluent2' {
          color: $ddl-list-hover-font-color;
          background: $ddl-list-focus-bg-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active:last-child {
        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          border-radius: 2px;
        }
      }
    }
  }

  .e-mention .e-dropdownbase .e-list-item {
    @if $skin-name == 'fluent2' {
      margin-bottom: 0;
    }
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open th,
  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open td {
    display: table-cell;
    overflow: hidden;
    padding-right: $ddl-multi-column-popup-padding-right;
    text-indent: 10px;
    text-overflow: ellipsis;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open th {
    line-height: $ddl-multi-column-popup-line-height;
    text-align: left;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-ddl-header {
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-bg-color;
    }
    border-color: $ddl-multi-column-border-color;
    border-style: solid;
    border-width: $ddl-multi-column-border-width;
    color: $ddl-list-header-font-color;
    font-family: $ddl-list-font-family;
    font-size: $ddl-group-list-font-size;
    font-weight: $ddl-header-font-weight;
    text-indent: 10px;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-dropdownbase .e-list-item {
    padding-right: $ddl-list-zero-padding;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open#{&}.e-scroller .e-ddl-header {
    padding-right: $ddl-multi-popup-scroll-head-pad-right;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-ddl-header,
  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open#{&}.e-ddl-device .e-ddl-header {
    padding-right: $ddl-list-zero-padding;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-center {
    text-align: center;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-right {
    text-align: right;
  }

  .e-multi-column#{&}.e-ddl#{&}.e-popup#{&}.e-popup-open .e-text-left {
    text-align: left;
  }

  .e-small .e-dropdownbase,
  .e-dropdownbase.e-small {
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        color: $ddl-small-list-font-color;
        line-height: $ddl-small-line-height;
        min-height: $ddl-small-line-height;
        text-indent: $ddl-small-list-text-indent;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-small-list-header-font-size;
        line-height: $ddl-small-line-height;
        min-height: $ddl-small-line-height;
        padding-left: $ddl-list-header-small-padding-left;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-small-icon-font-size;
      }
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item {
    @if $skin-name == 'Material3' {
      background: $ddl-list-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-bg-color;
    }
    border-bottom: $ddl-list-bottom-border;
    border-color: $ddl-list-gradient-color;
    color: $ddl-list-default-font-color;
    font-family: $ddl-list-font-family;
    text-indent: $ddl-list-text-indent;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $ddl-list-header-font-color;
    }
    @if $skin-name != 'tailwind' and $skin-name != 'FluentUI' {
      font-size: $ddl-list-font-size;
      padding-right: $ddl-list-padding-right;
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-item-focus {
    @if $skin-name == 'Material3' {
      background: $ddl-list-hover-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-hover-bg-color;
    }
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active,
  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-active.e-hover {
    @if $skin-name == 'Material3' {
      background: $ddl-list-active-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-active-bg-color;
    }
    border-color: $ddl-list-active-border-color;
    color: $ddl-list-active-font-color;
  }

  .e-ddl.e-popup.e-multiselect-group .e-list-group-item.e-hover {
    @if $skin-name == 'Material3' {
      background: $ddl-list-hover-bg-color;
    }
    @if $skin-name != 'Material3' {
      background-color: $ddl-list-hover-bg-color;
    }
    border-color: $ddl-list-hover-border-color;
    color: $ddl-list-hover-font-color;
    @if $skin-name == 'FluentUI' {
      color: $ddl-list-header-font-color;
    }
  }

  .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      color: $ddl-list-icon-color;
    }
  }

  .e-selectall-parent.e-item-focus{
    background-color: $ddl-list-hover-bg-color;
  }
}

@include export-module('dropdownbase-bigger') {

  .e-bigger .e-dropdownbase,
  .e-dropdownbase.e-bigger {
    min-height: $bgr-drop-base-height;
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        line-height: $ddl-line-height;
        text-indent: $ddl-bigger-text-indent;
        @if $skin-name == 'tailwind3' {
          min-height: $ddl-line-height;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        line-height: $ddl-line-height;
        @if $skin-name != 'tailwind' {
          text-indent: $ddl-bigger-text-indent;
        }
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-bgr-list-item-icon-font-size;
      }
    }
  }

  .e-bigger.e-ddl .e-dropdownbase.e-nodata,
  .e-bigger .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-bigger-list-nodata-font-size;
    }
  }

  .e-bigger.e-small.e-ddl .e-dropdownbase.e-nodata,
  .e-bigger.e-small .e-ddl .e-dropdownbase.e-nodata {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      font-size: $ddl-bigger-small-list-nodata-font-size;
    }
  }

  .e-bigger .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-bigger-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: $ddl-zero-spacing;
    }
  }

  .e-small.e-bigger .e-dropdownbase.e-dd-group .e-list-item {
    padding-left: $ddl-group-list-bigger-small-padding-left;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      text-indent: $ddl-zero-spacing;
    }
  }

  .e-bigger.e-rtl,
  .e-bigger .e-rtl,
  .e-rtl .e-bigger {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-bigger-padding-left;
        }
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-bigger-padding-left;
        }
      }
    }
  }

  .e-small.e-bigger.e-rtl,
  .e-small.e-bigger .e-rtl,
  .e-rtl .e-small.e-bigger,
  .e-small .e-rtl.e-bigger,
  .e-bigger .e-rtl.e-small {
    #{if(&, '&', '*')} .e-dropdownbase {
      #{if(&, '&', '*')} .e-list-item {
        padding-left: $ddl-list-rtl-padding-left;
        padding-right: $ddl-list-rtl-padding-right;
      }

      #{if(&, '&', '*')}.e-dd-group .e-list-item {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-group-list-bigger-small-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        @if $skin-name == 'tailwind' {
          padding-right: $ddl-list-header-bigger-small-padding-left;
        }
      }
    }
  }

  .e-bigger .e-dropdownbase {
    @at-root {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-bigger-list-header-font-size;
        padding-left: $ddl-list-header-bigger-padding-left;
      }
    }
  }

  .e-bigger.e-small .e-dropdownbase,
  .e-dropdownbase.e-bigger.e-small  {
    @at-root {
      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        font-size: $ddl-bigger-small-list-header-font-size;
      }
    }
  }

  .e-bigger.e-small .e-dropdownbase,
  .e-dropdownbase.e-small.e-bigger {
    @at-root {
      #{if(&, '&', '*')} .e-list-item {
        color: $ddl-bigger-small-list-font-color;
        line-height: $ddl-bigger-small-line-height;
        min-height: $ddl-bigger-small-line-height;
        text-indent: $ddl-bigger-small-list-text-indent;
      }

      #{if(&, '&', '*')} .e-list-group-item,
      #{if(&, '&', '*')} .e-fixed-head {
        line-height: $ddl-bigger-small-line-height;
        min-height: $ddl-bigger-small-line-height;
        padding-left: $ddl-list-header-bigger-small-padding-left;
      }

      #{if(&, '&', '*')} .e-list-item .e-list-icon {
        font-size: $ddl-bigger-small-icon-font-size;
      }
    }
  }

  .e-bigger .e-dropdownbase .e-list-group-item,
  .e-bigger .e-fixed-head,
  .e-bigger.e-dropdownbase .e-list-group-item,
  .e-bigger.e-fixed-head {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
      font-size: $text-sm;
    }
  }

  .e-bigger.e-small .e-dropdownbase .e-list-group-item,
  .e-bigger.e-small .e-fixed-head,
  .e-bigger.e-small.e-dropdownbase .e-list-group-item,
  .e-bigger.e-small.e-fixed-head {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
      font-size: $text-xs;
    }
  }

  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'fluent2' {
      padding-inline-end: $ddl-bgr-dropbase-list-icon-padding;
    }
  }

  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'fluent2' {
      padding-inline-end: $ddl-bgr-small-dropbase-list-icon-padding;
    }
  }

  .e-bigger .e-dropdownbase .e-list-item .e-list-icon,
  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
      padding-inline-end: $ddl-bgr-dropbase-list-icon-item-padding;
    }
  }

  .e-bigger .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'bootstrap4' {
      font-size: 16px;
    }
  }

  .e-bigger.e-small .e-dropdownbase .e-list-item .e-list-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' or $skin-name == 'Material3' {
      padding: $bigger-dropdown-base-list-item-icon-padding;
    }
  }
}

//default
//undefined
//enddefault

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

// Avatar Base
$avatar-base-border-radius: 5px !default;
$avatar-base-font-size: 1em !default;
$avatar-base-width: 3em !default;
$avatar-base-height: 3em !default;
$avatar-base-background-color: #bcbcbc !default;
$avatar-base-text-color: #fff !default;
$avatar-base-font-weight: 400 !default;
$avatar-base-img-height: 100% !default;
$avatar-font-family: $font-family !default;

// Circle Avatar
$avatar-circle-border-radius: 50% !default;

// Avatar size
$avatar-xsmall-font-size: .6em !default;
$avatar-small-font-size: .8em !default;
$avatar-large-font-size: 1.2em !default;
$avatar-xlarge-font-size: 1.4em !default;

@mixin avatar-size($height, $width, $line-height) {
  height: $height;
  width: $width;
  line-height: $line-height;
}

@include export-module('avatar-layout') {
  .e-avatar {
    align-content: center;
    align-items: center;
    background-color: $avatar-base-background-color;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: $avatar-base-border-radius;
    color: $avatar-base-text-color;
    display: inline-flex;
    font-family: $avatar-font-family;
    font-size: $avatar-base-font-size;
    font-weight: $avatar-base-font-weight;
    height: $avatar-base-height;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: $avatar-base-width;
    @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
      line-height: $avatar-base-line-height;
    }

    @if ($skin-name == 'fluent2') {
      &:has(:not(img)) {
        border: $avatar-border-width solid $avatar-border;
      }
    }

    img {
      height: $avatar-base-img-height;
      width: auto;
    }

    &.e-avatar-circle {
      border-radius: $avatar-circle-border-radius;
      &.e-avatar-large,
      &.e-avatar-xlarge  {
        border-radius: $avatar-circle-border-radius;
      }
    }

    &.e-avatar-xsmall {
      font-size: $avatar-xsmall-font-size;
      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        @include avatar-size($avatar-base-xsmall-height, $avatar-base-xsmall-width, $avatar-base-xsmall-line-height);
      }
    }

    &.e-avatar-small {
      font-size: $avatar-small-font-size;
      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        @include avatar-size($avatar-base-small-height, $avatar-base-small-width, $avatar-base-small-line-height);
      }
    }

    &.e-avatar-large {
      font-size: $avatar-large-font-size;
      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        @include avatar-size($avatar-base-large-height, $avatar-base-large-width, $avatar-base-large-line-height);
      }
      @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        border-radius: $avatar-large-border-radius;
      }
    }

    &.e-avatar-xlarge {
      font-size: $avatar-xlarge-font-size;
      @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        @include avatar-size($avatar-base-xlarge-height, $avatar-base-xlarge-width, $avatar-base-xlarge-line-height);
      }
      @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        border-radius: $avatar-large-border-radius;
      }
    }
  }
}

/* stylelint-disable-line no-empty-source */

//default
$badge-theme : $skin-name !default;
$badge-padding: .25em .4em .25em .4em !default;
$badge-notification-line-height: 18px !default;
$badge-notification-ghost-line-height: 16px !default;
$badge-notification-padding: 0 8px 0 8px !default;
$badge-circle-line-height: 1.834em !default;

$badge-primary-bg-color: $brand-primary !default;
$badge-secondary-bg-color: $grey-dark-font !default;
$badge-success-bg-color: $brand-success-dark !default;
$badge-danger-bg-color: $brand-danger-dark !default;
$badge-warning-bg-color: $brand-warning-dark !default;
$badge-info-bg-color: $brand-info-dark !default;
$badge-light-bg-color: $grey-44 !default;
$badge-dark-bg-color: $grey-cc !default;

$badge-primary-font-color: $brand-primary-font !default;
$badge-secondary-font-color: $grey-dark !default;
$badge-light-font-color: $grey-light-font !default;
$badge-dark-font-color: $grey-darker !default;

// Base Badge
$badge-base-border-radius: .25em !default;
$badge-base-font-size: .75em !default;
$badge-base-line-height: 1 !default;
$badge-base-font-weight: 500 !default;
$badge-base-text-indent: 0 !default;
$badge-base-text-color: rgba(0, 0, 0, .87) !default;
$badge-base-background-color: #fafafa !default;

// Pill Badge
$badge-pill-border-radius: 5em !default;

// Notification Badge
$badge-notification-top: -10px !default;
$badge-notification-left: 100% !default;
$badge-notification-font-size: 12px !default;
$badge-notification-border-radius: 1em !default;
$badge-notification-min-width: 24px !default;
$badge-notification-height: 18px !default;

// Circle Badge
$badge-circle-width: 1.834em !default;
$badge-circle-height: 1.834em !default;

$badge-circle-border-radius: 50% !default;
$badge-circle-padding: 0 !default;
$badge-circle-min-width: 0 !default;
$badge-circle-ghost-line-height: 1.8em !default;

// Overlap Badge
$badge-overlap-top: -10px !default;
$badge-overlap-transform-left: translateX(-50%) !default;

// Button Badge
$badge-button-line-height: .9 !default;
$badge-button-circle-width: 2em !default;
$badge-button-circle-height: 2em !default;
$badge-button-circle-line-height: 2em !default;
$badge-ghost-circle-line-height: 1.9em !default;
$badge-button-top: -2px !default;

// Dot Badge
$badge-dot-top: -3px !default;
$badge-dot-width: 6px !default;
$badge-dot-height: 6px !default;
$badge-dot-line-height: 1 !default;
$badge-dot-border-radius: 100% !default;
$badge-dot-padding: 0 !default;
$badge-dot-min-width: 0 !default;
$badge-dot-left: 100% !default;
$badge-dot-box-shadow: 0 0 0 1px #fff !default;

$badge-padding: .25em .4em .25em .4em !default;
$badge-notification-line-height: 18px !default;
$badge-notification-ghost-line-height: 16px !default;
$badge-notification-padding: 0 8px 0 8px !default;
$badge-circle-line-height: 1.834em !default;

$badge-primary-bg-color: $brand-primary !default;
$badge-secondary-bg-color: $grey-light !default;
$badge-success-bg-color: #218739 !default;
$badge-danger-bg-color: #dc3243 !default;
$badge-warning-bg-color: #aa6708 !default;
$badge-info-bg-color: #1b809e !default;
$badge-light-bg-color: $grey-white !default;
$badge-dark-bg-color: $grey-dark !default;

$badge-primary-font-color: $brand-primary-font !default;
$badge-secondary-font-color: $grey-dark-font !default;
$badge-light-font-color: $grey-light-font !default;
$badge-dark-font-color: $grey-dark-font !default;
$badge-warning-font-color: $grey-dark-font !default;
$badge-zero-padding-margin: 0 !default;
$badge-notification-width: auto !default;
$badge-button-nrml-line-height: .9 !default;

//enddefault

@mixin badge-size($border-radius, $height, $line-height, $min-width, $padding, $width) {
  border-radius: $border-radius;
  height: $height;
  line-height: $line-height;
  min-width: $min-width;
  padding: $padding;
  width: $width;
}

@mixin position($pos, $top, $left, $bottom) {
  position: $pos;
  top: $top;
  left: $left;
  bottom: $bottom;
}

@include export-module('badge-layout') {
  .e-badge {
    background: $badge-base-background-color;
    border-color: transparent;
    border-radius: $badge-base-border-radius;
    box-shadow: 0 0 0 2px transparent;
    box-sizing: border-box;
    color: $badge-base-text-color;
    display: inline-block;
    font-family: $font-family;
    font-size: $badge-base-font-size;
    font-weight: $badge-base-font-weight;
    @if ($badge-theme == 'bootstrap5.3') {
      line-height: $badge-boot-line-height;
      padding: $badge-normal-padding;
    }
    @else {
      line-height: $badge-base-line-height;
      padding: $badge-padding;
    }
    @if ($badge-theme == 'tailwind' or $badge-theme == 'FluentUI' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'bootstrap5.3') {
      height: $badge-base-height;
    }
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-indent: $badge-base-text-indent;
    vertical-align: middle;

    &:hover {
      text-decoration: none;
    }

    &.e-badge-pill {
      border-radius: $badge-pill-border-radius;
      @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'FluentUI') {
        padding: $badge-pill-padding;
      }
    }

    &.e-badge-ghost {
      @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'FluentUI') {
        line-height: $badge-ghost-line-height;
        padding: $badge-ghost-padding;
      }
    }

    &.e-badge-notification {
      @include badge-size($badge-notification-border-radius, $badge-notification-height, $badge-notification-line-height, $badge-notification-min-width, $badge-notification-padding, $badge-notification-width);
      font-size: $badge-notification-font-size;
      @include position(absolute, $badge-notification-top, $badge-notification-left, null);

      &.e-badge-ghost {
        line-height: $badge-notification-ghost-line-height;
      }
    }

    &.e-badge-circle {
      @include badge-size($badge-circle-border-radius, $badge-circle-height, $badge-circle-line-height, $badge-circle-min-width, $badge-circle-padding, $badge-circle-width);

      &.e-badge-ghost {
        line-height: $badge-circle-ghost-line-height;
        @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'FluentUI' or $badge-theme == 'Material3') {
          padding: $badge-circle-ghost-padding;
        }
      }
    }

    &.e-badge-overlap {
      @include position(absolute, $badge-overlap-top, null, null);
      transform: $badge-overlap-transform-left;
    }

    &.e-badge-dot {
      @include badge-size($badge-dot-border-radius, $badge-dot-height, $badge-dot-line-height, $badge-dot-min-width, $badge-dot-padding, $badge-dot-width);
      box-shadow: $badge-dot-box-shadow;
      margin: $badge-zero-padding-margin;
      overflow: visible;
      @include position(absolute, $badge-dot-top, $badge-dot-left, null);
    }

    &.e-badge-bottom {
      &.e-badge-dot {
        @include position(absolute, auto, null, 3px);
      }

      &.e-badge-notification {
        @include position(absolute, auto, null, -3px);
      }
    }

    @at-root {
      button#{''} .e-badge {
        @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'FluentUI') {
          line-height: $leading-none;
        }
        @else {
          line-height: $badge-button-nrml-line-height;
        }
        @include position(relative, $badge-button-top, null, null);

        &.e-badge-circle {
          height: $badge-button-circle-height;
          line-height: $badge-button-circle-line-height;
          width: $badge-button-circle-width;

          &.e-badge-ghost {
            line-height: $badge-ghost-circle-line-height;
          }
        }
      }
    }
  }
}

@include export-module('badge-theme') {
  //sass-lint:disable no-color-literals
  .e-badge {
    &.e-badge-primary:not(.e-badge-ghost):not([href]),
    &.e-badge-primary[href]:not(.e-badge-ghost) {
      background-color: $badge-primary-bg-color;
      color: $badge-primary-font-color;
    }

    &.e-badge-secondary:not(.e-badge-ghost):not([href]),
    &.e-badge-secondary[href]:not(.e-badge-ghost) {
      background-color: $badge-secondary-bg-color;
      color: $badge-secondary-font-color;

      @if $badge-theme == 'fluent2' {
        border: $badge-secondary-border-color;
      }
      @if ($badge-theme == 'tailwind3') {
        background-color: $badge-secondary-bg-color;
        border: 1px solid $badge-secondary-border-color;
        color: $badge-secondary-font-color;
      }
    }

    &.e-badge-success:not(.e-badge-ghost):not([href]),
    &.e-badge-success[href]:not(.e-badge-ghost) {
      background-color: $badge-success-bg-color;
      @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind3' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'bootstrap5.3' or $badge-theme == 'Material3' or $badge-theme == 'fluent2') {
        color: $badge-success-font-color;
      }
      @else {
        color: $badge-dark-font-color;
      }
    }

    &.e-badge-danger:not(.e-badge-ghost):not([href]),
    &.e-badge-danger[href]:not(.e-badge-ghost) {
      background-color: $badge-danger-bg-color;
      @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind3' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'bootstrap5.3' or $badge-theme == 'Material3' or $badge-theme == 'fluent2') {
        color: $badge-danger-font-color;
      }
      @else {
        color: $badge-dark-font-color;
      }
    }

    &.e-badge-warning:not(.e-badge-ghost):not([href]),
    &.e-badge-warning[href]:not(.e-badge-ghost) {
      background-color: $badge-warning-bg-color;
      color: $badge-warning-font-color;
    }

    &.e-badge-info:not(.e-badge-ghost):not([href]),
    &.e-badge-info[href]:not(.e-badge-ghost) {
      background-color: $badge-info-bg-color;
      @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind3' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'bootstrap5.3' or $badge-theme == 'Material3' or $badge-theme == 'fluent2') {
        color: $badge-info-font-color;
      }
      @else {
        color: $badge-dark-font-color;
      }
    }

    &.e-badge-light:not(.e-badge-ghost):not([href]),
    &.e-badge-light[href]:not(.e-badge-ghost) {
      @if $badge-theme == 'Material3' or $badge-theme == 'Material3-dark' {
        background: $badge-light-bg-color;
      }
      @else {
        background-color: $badge-light-bg-color;
      }
      color: $badge-light-font-color;
    }

    &.e-badge-dark:not(.e-badge-ghost):not([href]),
    &.e-badge-dark[href]:not(.e-badge-ghost) {
      background-color: $badge-dark-bg-color;
      color: $badge-dark-font-color;
      @if ($badge-theme == 'tailwind3') {
        background-color: $content-text-color-alt3;
        color: $content-bg-color-alt1;
      }
    }

    $badge-types: (
      'primary': $badge-primary-bg-color,
      'secondary': $badge-secondary-bg-color,
      'success': $badge-success-bg-color,
      'danger': $badge-danger-bg-color,
      'warning': $badge-warning-bg-color,
      'info': $badge-info-bg-color,
      'light': $badge-light-bg-color,
      'dark': $badge-dark-bg-color
    );

    @each $type, $color in $badge-types {
      &.e-badge-#{$type}[href]:not(.e-badge-ghost) {
        &:hover {
          @if $badge-theme == 'Material3' or $badge-theme == 'fluent2' {
            text-decoration: underline;
          }
          @else if $badge-theme == 'bootstrap5' or $badge-theme == 'bootstrap5.3' or $badge-theme == 'tailwind3' {
            background-color: $badge-primary-bg-color-darken;
          }
          @else {
            background-color: color.adjust($color: $color, $lightness: -10%);
          }
        }
      }
    }

    @each $type, $color in $badge-types {
      &.e-badge-#{$type}[href].e-badge-ghost {
        &:hover {
          @if $badge-theme != 'Material3' and $badge-theme != 'fluent2' and $badge-theme != 'bootstrap5' and $badge-theme != 'bootstrap5.3' and $badge-theme != 'bds' and $badge-theme != 'tailwind3' {
            border-color: color.adjust($color: $color, $lightness: -15%);
            color: color.adjust($color: $color, $lightness: -15%);
          }
        }
      }
    }

    &.e-badge-ghost {
      &.e-badge-primary {
        background-color: transparent;
        border: 1px solid $badge-primary-bg-color;
        color: $badge-primary-bg-color;
      }

      &.e-badge-secondary {
        background-color: transparent;
        @if ($badge-theme == 'tailwind' or $badge-theme == 'FluentUI' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'Material3' or $badge-theme == 'Material3-dark' or $badge-theme == 'fluent2') {
          border: 1px solid $badge-secondary-font-color;
          color: $badge-secondary-font-color;
        }
        @if ($badge-theme == 'tailwind3') {
          border: 1px solid $secondary-border-color;
          color: $secondary-text-color;
        }
        @else {
          border: 1px solid $badge-secondary-bg-color;
          color: $badge-secondary-bg-color;
        }
      }

      &.e-badge-success {
        background-color: transparent;
        @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5') {
          border: 1px solid $badge-success-font-color;
          color: $badge-success-font-color;
        }
        @if ($badge-theme == 'tailwind3') {
          border: 1px solid $badge-ghost-success-font-color;
          color: $badge-ghost-success-font-color;
        }
        @else {
          border: 1px solid $badge-success-bg-color;
          color: $badge-success-bg-color;
        }
      }

      &.e-badge-danger {
        background-color: transparent;
        @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5') {
          border: 1px solid $badge-danger-font-color;
          color: $badge-danger-font-color;
        }
        @if ($badge-theme == 'tailwind3') {
          border: 1px solid $badge-ghost-danger-font-color;
          color: $badge-ghost-danger-font-color;
        }
        @else {
          border: 1px solid $badge-danger-bg-color;
          color: $badge-danger-bg-color;
        }
      }

      &.e-badge-warning {
        background-color: transparent;
        @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5') {
          border: 1px solid $badge-warning-font-color;
          color: $badge-warning-font-color;
        }
        @else if $badge-theme == 'fluent2' {
          border: 1px solid $badge-warning-bg-color;
          color: $badge-warning-ghost-color;
        }
        @else {
          border: 1px solid $badge-warning-bg-color;
          color: $badge-warning-bg-color;
        }
      }

      &.e-badge-info {
        background-color: transparent;
        @if ($badge-theme == 'tailwind' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5') {
          border: 1px solid $badge-info-font-color;
          color: $badge-info-font-color;
        }
        @else if $badge-theme == 'fluent2' {
          border: 1px solid $badge-info-ghost-border;
          color: $badge-info-ghost-color;
        }
        @else {
          border: 1px solid $badge-info-bg-color;
          color: $badge-info-bg-color;
        }
      }

      &.e-badge-light {
        background-color: transparent;
        @if ($badge-theme == 'tailwind' or $badge-theme == 'FluentUI' or$badge-theme == 'tailwind-dark' or$badge-theme == 'bootstrap5' or $badge-theme == 'Material3' or $badge-theme == 'Material3-dark') {
          border: 1px solid $badge-light-font-color;
          color: $badge-light-font-color;
        }
        @if ($badge-theme == 'tailwind3') {
          border: 1px solid $secondary-border-color;
          color: $secondary-text-color;
        }
        @else if $badge-theme == 'fluent2' {
          border: 1px solid $badge-light-bg-color;
          color: $badge-light-font-color;
        }
        @else {
          border: 1px solid $badge-light-bg-color;
          color: $badge-light-bg-color;
        }
      }

      &.e-badge-dark {
        background-color: transparent;
        border: 1px solid $badge-dark-bg-color;
        color: $badge-dark-bg-color;
        @if ($badge-theme == 'tailwind3') {
          border: 1px solid $content-text-color-alt3;
          color: $content-text-color-alt3;
        }
      }
    }
  }
}

@mixin badge-size($border-radius, $height, $line-height, $min-width, $padding, $width) {
  border-radius: $border-radius;
  height: $height;
  line-height: $line-height;
  min-width: $min-width;
  padding: $padding;
  width: $width;
}

@include export-module('badge-bigger') {
  .e-bigger .e-badge,
  .e-badge.e-bigger {
    @if ($badge-theme == 'tailwind' or $badge-theme == 'FluentUI' or $badge-theme == 'tailwind-dark' or $badge-theme == 'bootstrap5' or $badge-theme == 'Material3' or $badge-theme == 'fluent2' or $badge-theme == 'tailwind3') {
      font-size: $badge-touch-base-font-size;
      font-weight: $badge-touch-base-font-weight;
      @include badge-size($badge-touch-base-border-radius, $badge-touch-base-height, $badge-touch-base-line-height, null, $badge-touch-padding, null);

      &.e-badge-pill {
        border-radius: $badge-pill-border-radius;
        padding: $badge-touch-pill-padding;
      }

      &.e-badge-ghost {
        padding: $badge-touch-ghost-padding;

        &.e-badge-circle {
          padding: $badge-touch-ghost-circle-padding;
        }

        &.e-badge-notification {
          padding: $badge-touch-ghost-notification-padding;
        }
      }

      &.e-badge-notification {
        @include badge-size($badge-pill-border-radius, null, null, $badge-touch-notification-min-width, $badge-touch-pill-padding, null);
      }

      &.e-badge-circle {
        @include badge-size($badge-circle-border-radius, null, null, $badge-circle-min-width, $badge-touch-circle-padding, $badge-touch-circle-width);
        @if ($badge-theme == 'tailwind3') {
          height: $badge-touch-circle-height;
          font-size: 12px;
          padding: 4px 3px;
        }
      }

      &.e-badge-dot {
        @include badge-size($badge-dot-border-radius, $badge-touch-dot-height, null, null, null, $badge-touch-dot-width);
      }
    }
  }
}

// Size variables
$breadcrumb-skin: 'bootstrap' !default;
$breadcrumb-last-item-font-weight: normal !default;
$breadcrumb-font-size: 14px !default;
$breadcrumb-bigger-font-size: 16px !default;
$breadcrumb-icon-font-size: 14px !default;
$breadcrumb-icon-bigger-font-size: 16px !default;
$breadcrumb-padding: 10px 0 !default;
$breadcrumb-padding-left: 16px !default;
$breadcrumb-padding-right: 16px !default;
$breadcrumb-bigger-padding: 9px 0 !default;
$breadcrumb-separator-padding: 10px 6px !default;
$breadcrumb-separator-bigger-padding: 9px 6px !default;
$breadcrumb-icon-right-padding: 4px !default;
$breadcrumb-icon-bigger-right-padding: 6px !default;
$breadcrumb-collapsed-icon-padding: 8px 8px !default;
$breadcrumb-collapsed-icon-bigger-padding: 8px 8px !default;
$breadcrumb-collapsed-icon-font-size: 16px !default;
$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
$breadcrumb-sibling-separator-padding: 0 !default;
$breadcrumb-sibling-separator-margin-left: -5px !default;
$breadcrumb-icon-item-padding: 3px 0 !default;
$breadcrumb-icon-only-item-padding: 10px 11px !default;
$breadcrumb-icon-only-item-bigger-padding: 10px 11px !default;
$breadcrumb-scroll-mode-lineheight: normal !default;
$breadcrumb-popup-item-padding: 0 14px !default;
$breadcrumb-popup-border-radius: 4px !default;
$breadcrumb-popup-item-height: 26px !default;
$breadcrumb-popup-item-line-height: 26px !default;
$cmenu-li-hover-outline-offset: 0 !default;
$breadcrumb-popup-item-bigger-height: 40px !default;
$breadcrumb-popup-item-bigger-line-height: 40px !default;
$breadcrumb-normal-line-height: normal !default;
$breadcrumb-menuitem-height: 1px !default;
$breadcrumb-border-none: 0 !default;
$breadcrumb-padding-none: 0 !default;
$breadcrumb-margin-none: 0 !default;
$breadcrumb-menu-item-margin: -1px !default;
$breadcrumb-border-radius: 4px !default;

// Color variables
$breadcrumb-item-color: $brand-primary !default;
$breadcrumb-icon-color: $grey-cc !default;
$breadcrumb-separator-color: $grey-cc !default;
$breadcrumb-item-hover-color: $brand-primary-lighten-15 !default;
$breadcrumb-item-focus-color: $brand-primary-lighten-15 !default;
$breadcrumb-item-active-color: $brand-primary-lighten-20 !default;
$breadcrumb-last-item-font-color: $grey-dark-font !default;
$breadcrumb-collapsed-icon-hover-bgcolor: $grey-88 !default;
$breadcrumb-collapsed-icon-active-bgcolor: $grey-8c !default;
$breadcrumb-collapsed-icon-focus-bgcolor: $grey-ad !default;
$breadcrumb-collapsed-icon-color: $grey-cc !default;
$breadcrumb-collapsed-icon-hover-color: $grey-cc !default;
$breadcrumb-disabled-item-color: $grey-lighter !default;
$breadcrumb-bgcolor: $gray-dark !default;
$breadcrumb-icon-interaction-color: $brand-primary !default;
$breadcrumb-popup-item-color: $grey-dark-font !default;
$breadcrumb-popup-border: 1px solid $grey-99 !default;
$breadcrumb-popup-bgcolor: $grey !default;
$breadcrumb-popup-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
$breadcrumb-popup-item-hover-bgcolor: $grey-88 !default;
$breadcrumb-popup-item-hover-color: $grey-dark-font !default;
$breadcrumb-popup-item-hover-outline: 0 solid $grey-99 !default;

@include export-module('breadcrumb-layout') {
  .e-breadcrumb {
    display: block;

    &.e-breadcrumb-wrap-mode {
      display: flex;
    }

    .e-breadcrumb-first-ol {
      align-items: flex-start;
      flex-shrink: 0;
      padding-right: $breadcrumb-padding-none;
    }

    .e-breadcrumb-wrapped-ol {
      flex-wrap: wrap;
      overflow: hidden;
      padding-left: $breadcrumb-padding-none;
    }

    &.e-breadcrumb-scroll-mode {
      line-height: $breadcrumb-scroll-mode-lineheight;
      overflow: auto;
    }

    ol {
      align-items: center;
      display: inline-flex;
      line-height: $breadcrumb-normal-line-height;
      margin: $breadcrumb-margin-none;
      padding: $breadcrumb-padding-none;
      padding-left: $breadcrumb-padding-left;
      padding-right: $breadcrumb-padding-right;
      @if $breadcrumb-skin == 'tailwind3' {
        font-weight: $breadcrumb-ol-font-weight;
      }
    }

    @if $breadcrumb-skin == 'bootstrap' or $breadcrumb-skin == 'Material3' {
      background-color: $breadcrumb-bgcolor;
      border-radius: $breadcrumb-border-radius;
    }

    li {
      list-style-type: none;
      white-space: nowrap;
    }

    .e-breadcrumb-item {
      align-items: center;
      display: flex;
      flex-shrink: 0;

      .e-breadcrumb-text {
        @if $skin-name == 'FluentUI' {
          padding: 4px;
        }
        @else {
          padding: $breadcrumb-padding;
        }

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' {
          &:focus {
            padding: $breadcrumb-item-focus-padding;
          }
        }
      }

      &.e-icon-item .e-breadcrumb-text {
        @if $skin-name == 'fluent2' {
          padding: $breadcrumb-item-text-padding;
        }
        @if $skin-name == 'tailwind3' {
          padding: $breadcrumb-item-text-padding;
        }
      }

      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' {
        &.e-icon-item .e-breadcrumb-text:focus {
          padding: $breadcrumb-icon-only-item-focus-padding;
        }
      }

      .e-breadcrumb-text {
        align-items: center;
        display: flex;
        font-size: $breadcrumb-font-size;

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
          font-weight: $breadcrumb-last-item-font-weight;
        }

        .e-anchor-wrap {
          align-items: inherit;
          display: inherit;
          @if $breadcrumb-skin == 'fluent2' {
            line-height: $breadcrumb-nrml-anchor-wrap-line-height;
          }
        }
      }

      a.e-breadcrumb-text {
        cursor: pointer;
        text-decoration: none;
        @if $skin-name == 'FluentUI' {
          border: 1px solid transparent;
        }

        @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' {
          text-decoration: underline;
        }

        &:hover {
          @if $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
            background-color: $content-bg-color-hover;
            color: $breadcrumb-item-hover-color;
          }
          @else {
            text-decoration: underline;
          }

          & .e-breadcrumb-icon.e-home,
          & .e-breadcrumb-icon {
            @if $skin-name == 'fluent2' {
              color: $toolbar-icon-color;
            }
          }
        }

        &:focus {
          @if $skin-name == 'FluentUI' {
            border: 1px solid $border-alt;
            color: $breadcrumb-item-active-color;
          }
          @else if $skin-name != 'fluent2' {
            text-decoration: underline;
          }

          &:not(:focus-visible) {
            @if $skin-name == 'fluent2' {
              background-color: $content-bg-color-hover;
              color: $breadcrumb-item-active-color;
            }

            & .e-breadcrumb-icon.e-home {
              @if $skin-name == 'fluent2' {
                color: $primary;
              }
            }
          }
        }

        &:active {
          @if $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
            background-color: $breadcrumb-item-active-bg-color;
            color: $breadcrumb-item-active-color;
          }
          @else {
            text-decoration: underline;
          }
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
          }

          & .e-breadcrumb-icon.e-home {
            @if $skin-name == 'fluent2' {
              color: $primary;
            }
          }
        }

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'Material3' {
          &:hover,
          &:focus,
          &:active {
            text-decoration: none;
          }
        }

        &:focus-visible {
          @if $skin-name == 'fluent2' {
            box-shadow: $secondary-shadow-focus;
            color: $breadcrumb-item-color !important; /* stylelint-disable-line declaration-no-important */
            background-color: transparent;

            & .e-breadcrumb-icon,
            &.e-breadcrumb-url .e-breadcrumb-icon {
              color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }
      }

      span.e-breadcrumb-text {
        cursor: default;
      }

      .e-breadcrumb-icon {
        font-size: $breadcrumb-icon-font-size;
        padding-right: $breadcrumb-icon-right-padding;

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
          padding-left: $breadcrumb-icon-right-padding;
        }
        &:hover {
          text-decoration: none;
        }

        &::before {
          display: inline-block;
          text-decoration: none;
        }

        @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' {
          &::before {
            vertical-align: middle;
          }

          &.e-home::before {
            vertical-align: sub;
          }
        }

        &.e-icons.e-home {
          @if $breadcrumb-skin == 'bootstrap' {
            font-size: 12px;
            margin-top: -1px;
          }
        }
      }

      &.e-icon-item .e-breadcrumb-icon {
        padding: $breadcrumb-icon-item-padding;
      }

      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'bootstrap' {
        &.e-icon-item {
          .e-breadcrumb-text {
            padding: $breadcrumb-icon-only-item-padding;
          }

          @if $breadcrumb-skin == 'bootstrap' {
            margin-left: -16px;
            margin-right: -6px;
          }
        }
      }

      &.e-disabled {
        @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' {
          opacity: $breadcrumb-disabled-item-opacity;
        }
        @else{
          opacity: 1;
        }
        pointer-events: none;
      }
    }

    .e-breadcrumb-separator {
      display: flex;
      font-size: $breadcrumb-font-size;
      padding: $breadcrumb-separator-padding;
      @if $breadcrumb-skin == 'fluent2' {
        line-height: $breadcrumb-nrml-separator-line-height;
      }
      @if $breadcrumb-skin == 'tailwind3' {
        font-size: $breadcrumb-separator-font-size;
      }

      + .e-breadcrumb-separator {
        margin-left: $breadcrumb-sibling-separator-margin-left;
        padding-left: $breadcrumb-sibling-separator-padding;
      }
    }

    &.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
      margin-left: $breadcrumb-margin-none;
      margin-right: $breadcrumb-sibling-separator-margin-left;
      padding-left: list.nth($breadcrumb-separator-padding, 2);
      padding-right: $breadcrumb-sibling-separator-padding;
    }

    @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' {
      .e-icon-item + .e-breadcrumb-separator {
        padding-left: $breadcrumb-icon-only-item-next-separator-padding-left;
      }
    }

    .e-breadcrumb-collapsed,
    .e-breadcrumb-menu {
      cursor: pointer;
      font-size: $breadcrumb-collapsed-icon-font-size;
      padding: $breadcrumb-collapsed-icon-padding;
      vertical-align: bottom;

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
        &:focus {
          padding: $breadcrumb-collapsed-icon-focus-padding;
        }
      }

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'FluentUI' {
        margin-top: $breadcrumb-menu-margin-top;
      }
      @if $breadcrumb-skin == 'bootstrap5.3' {
        border-radius: $breadcrumb-menu-border-radius;
      }
    }

    .e-breadcrumb-menu {
      display: inline-block;
    }

    .e-breadcrumb-item-wrapper {
      display: flex;
    }

    &.e-icon-right,
    .e-icon-right,
    &.e-rtl {
      .e-breadcrumb-icon {
        padding-left: $breadcrumb-icon-right-padding;
        padding-right: $breadcrumb-padding-none;

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
          padding-right: $breadcrumb-icon-right-padding;
        }
      }
    }

    &.e-rtl.e-icon-right .e-breadcrumb-icon,
    &.e-rtl .e-icon-right .e-breadcrumb-icon {
      padding-left: $breadcrumb-padding-none;
      padding-right: $breadcrumb-icon-right-padding;

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
        padding-left: $breadcrumb-icon-right-padding;
      }
    }

    &.e-disabled {
      opacity: 1;

      .e-breadcrumb-item,
      .e-breadcrumb-separator,
      .e-breadcrumb-collapsed,
      .e-breadcrumb-menu {
        pointer-events: none;
      }
    }
  }

  .e-breadcrumb-popup {
    border: $breadcrumb-popup-border;
    border-radius: $breadcrumb-popup-border-radius;
    box-shadow: $breadcrumb-popup-box-shadow;
    position: absolute;

    ul {
      margin: $breadcrumb-margin-none;
      padding: $breadcrumb-padding-none;
    }

    .e-breadcrumb-item {
      list-style-type: none;
      white-space: nowrap;
      @if $breadcrumb-skin == 'fluent2' {
        margin: 4px;
      }

      .e-breadcrumb-text {
        align-items: center;
        display: flex;
        font-size: $breadcrumb-font-size;
        height: $breadcrumb-popup-item-height;
        line-height: $breadcrumb-popup-item-line-height;
        padding: $breadcrumb-popup-item-padding;
        width: 100%;
        @if $breadcrumb-skin == 'fluent2' {
          border-radius: $breadcrumb-popup-item-margin;
        }

        .e-anchor-wrap {
          align-items: inherit;
          display: inherit;
          width: inherit;
        }
      }

      .e-breadcrumb-icon {
        font-size: $breadcrumb-icon-font-size;
        padding-right: $breadcrumb-icon-right-padding;
      }

      &.e-icon-item .e-breadcrumb-icon {
        padding: $breadcrumb-padding-none;
      }

      a.e-breadcrumb-text {
        text-decoration: none;
      }
    }

    &.e-icon-right,
    .e-icon-right,
    &.e-rtl {
      .e-breadcrumb-icon {
        padding-left: $breadcrumb-icon-right-padding;
        padding-right: $breadcrumb-padding-none;
      }
    }

    &.e-icon-right,
    .e-icon-right {
      .e-breadcrumb-icon {
        display: flex;
        flex-grow: 1;
        justify-content: flex-end;
      }
    }

    &.e-rtl.e-icon-right .e-breadcrumb-icon,
    &.e-rtl .e-icon-right .e-breadcrumb-icon {
      padding-left: $breadcrumb-padding-none;
      padding-right: $breadcrumb-icon-right-padding;
    }
  }

  @if $breadcrumb-skin == 'fluent2' {
    .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text {
      border-radius: $breadcrumb-item-text-border-radius;
    }

    .e-breadcrumb .e-breadcrumb-item.e-icon-item a.e-breadcrumb-text:active .e-breadcrumb-icon {
      background-color: $content-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  @if $skin-name == 'tailwind3' {
    .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text {
      text-decoration: none;
      &:hover,
      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }
  .e-breadcrumb-menu-item {
    position: absolute;
    width: 1px;
    height: $breadcrumb-menuitem-height;
    margin: $breadcrumb-menu-item-margin;
    padding: $breadcrumb-padding-none;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: $breadcrumb-border-none;
  }

  .e-hidden-popup {
    visibility: hidden;
  }
}

@include export-module('breadcrumb-theme') {
  .e-breadcrumb {
    .e-breadcrumb-item {
      .e-breadcrumb-text {
        color: $breadcrumb-item-color;

        &:hover,
        &:focus {
          @if $skin-name == 'Material3' {
            background: $breadcrumb-item-hover-color;
            border-radius: $breadcrumb-item-text-hover-border-radius;
          }
          @else if $skin-name != 'bootstrap5.3' {
            color: $breadcrumb-item-hover-color;
          }
          @if $skin-name == 'fluent2' {
            background-color: $content-bg-color-hover;
            color: $breadcrumb-item-hover-color !important; /* stylelint-disable-line declaration-no-important */
            border-radius: $breadcrumb-item-text-hover-border-radius;

            & .e-breadcrumb-icon {
              color: $toolbar-icon-color;
            }
          }
        }

        &:focus {
          @if $skin-name == 'Material3' {
            background: $breadcrumb-item-focus-color;
          }
        }

        &:active {
          @if $skin-name == 'Material3' {
            background: $breadcrumb-item-active-color;
            border-radius: $breadcrumb-item-text-active-border-radius;
          }
          @else if $skin-name != 'bootstrap5.3' {
            color: $breadcrumb-item-active-color;
          }
          @else if $skin-name == 'tailwind3' {
            color: $breadcrumb-item-hover-color;
          }
        }
      }

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
        &:not([data-active-item]):not(.e-breadcrumb-separator) {
          &:hover {
            background: $breadcrumb-item-hover-bgcolor;
          }

          &:active {
            background: $breadcrumb-item-active-bgcolor;
          }
        }
      }

      @if $breadcrumb-skin == 'material' or $breadcrumb-skin == 'bootstrap' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' {
        &.e-icon-item {
          &:hover {
            background: $breadcrumb-collapsed-icon-hover-bgcolor;
            color: $breadcrumb-collapsed-icon-hover-color;
          }

          &:active {
            background: $breadcrumb-collapsed-icon-active-bgcolor;
            color: $breadcrumb-collapsed-icon-hover-color;
          }

          @if $breadcrumb-skin == 'material' or $breadcrumb-skin == 'bootstrap' {
            .e-breadcrumb-text:focus {
              background: $breadcrumb-collapsed-icon-focus-bgcolor;
              color: $breadcrumb-collapsed-icon-hover-color;
            }
          }
        }
      }

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
        .e-breadcrumb-text:focus {
          border: $breadcrumb-item-focus-border;
        }
      }

      @if $breadcrumb-skin == 'bootstrap5.3' {
        .e-breadcrumb-text:focus {
          box-shadow: $keyboard-focus-shadow;
          border-radius: $breadcrumb-item-text-focus-border-radius;
        }
      }

      @if $skin-name == 'tailwind3' {
        .e-breadcrumb-text {
          &:focus {
            box-shadow: none;
          }
          &:focus-visible {
            box-shadow: $shadow-focus-ring2;
          }
        }
        &.e-disabled {
          .e-breadcrumb-text {
            &:focus,
            &:focus-visible {
              box-shadow: none;
              background: none;
            }
          }
        }
      }

      &[data-active-item] {
        .e-breadcrumb-text {
          color: $breadcrumb-last-item-font-color;
          font-weight: $breadcrumb-last-item-font-weight;
        }
      }

      .e-breadcrumb-icon {
        color: $breadcrumb-icon-color;
      }

      @if $breadcrumb-skin == 'highcontrast' {
        &:hover,
        .e-breadcrumb-text:focus {
          .e-breadcrumb-icon {
            color: $breadcrumb-icon-hover-color;
          }
        }

        &:active:not([data-active-item]) {
          .e-breadcrumb-icon {
            color: $breadcrumb-icon-active-color;
          }
        }
      }

      @if $breadcrumb-skin == 'bootstrap' {
        &.e-icon-item {
          &:hover,
          &:active,
          .e-breadcrumb-text:focus {
            .e-breadcrumb-icon {
              color: $breadcrumb-icon-interaction-color;
            }
          }
        }
      }
    }

    .e-breadcrumb-separator {
      color: $breadcrumb-separator-color;
    }

    .e-breadcrumb-collapsed,
    .e-breadcrumb-menu {
      color: $breadcrumb-collapsed-icon-color;

      &:hover {
        background: $breadcrumb-collapsed-icon-hover-bgcolor;
        @if $breadcrumb-skin != 'fluent2' {
          color: $breadcrumb-collapsed-icon-hover-color;
        }
      }

      &:active {
        background: $breadcrumb-collapsed-icon-active-bgcolor;
        @if $skin-name == 'FluentUI' {
          color: $breadcrumb-collapsed-icon-active-color;
        }
        @else if $breadcrumb-skin != 'fluent2' {
          color: $breadcrumb-collapsed-icon-hover-color;
        }
      }

      &:focus {
        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $skin-name == 'FluentUI' {
          border: $breadcrumb-collapsed-icon-focus-border;
          color: $breadcrumb-collapsed-icon-focus-color;
        }
        @else {
          background: $breadcrumb-collapsed-icon-focus-bgcolor;
          @if $breadcrumb-skin != 'fluent2' {
            color: $breadcrumb-collapsed-icon-hover-color;
          }
        }
      }
      &:focus-visible {
        @if $skin-name == 'tailwind3' {
          box-shadow: $shadow-focus-ring2;
        }
      }
    }

    &.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
    & .e-disabled.e-breadcrumb-item .e-breadcrumb-text,
    &.e-disabled .e-breadcrumb-separator {
      color: $breadcrumb-disabled-item-color;
      @if $breadcrumb-skin == 'fluent2' {
        background-color: $content-bg-color-disabled;
      }
      @if $skin-name == 'tailwind3' {
        color: $content-text-color-disabled;
      }

      .e-breadcrumb-icon {
        color: $breadcrumb-disabled-item-color;
        @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' {
          color: $breadcrumb-disabled-icon-color;
        }
        @if $skin-name == 'tailwind3' {
          color: $icon-color-disabled;
        }
      }
    }
  }

  .e-breadcrumb-popup {
    background: $breadcrumb-popup-bgcolor;

    .e-breadcrumb-text {
      color: $breadcrumb-popup-item-color;

      &:hover {
        background: $breadcrumb-popup-item-hover-bgcolor;
        color: $breadcrumb-popup-item-hover-color;
      }

      &:active {
        @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'bootstrap5.3' {
          background: $breadcrumb-popup-item-active-color;
          color: $breadcrumb-popup-item-text-active-color;
        }
        @if $skin-name == 'tailwind3' {
          background: $flyout-bg-color-pressed;
        }
      }

      &:focus-visible {
        @if $skin-name == 'tailwind3' {
          box-shadow: $shadow-focus-ring2;
        }
      }
    }

    .e-breadcrumb-item .e-breadcrumb-text:focus {
      background: $breadcrumb-popup-item-hover-bgcolor;
      color: $breadcrumb-popup-item-hover-color;
    }

    @if $breadcrumb-skin == 'fluent2' {
      .e-breadcrumb-item .e-breadcrumb-text:active {
        background: $flyout-bg-color-selected;
        color: $flyout-text-color-selected;
      }

      .e-breadcrumb-item.e-disabled .e-breadcrumb-text {
        color: $flyout-text-color-disabled;
      }

      .e-breadcrumb-item.e-disabled {
        opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  @if $breadcrumb-skin == 'fluent2' {
    .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:focus .e-breadcrumb-icon,
    .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:active .e-breadcrumb-icon,
    .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:hover .e-breadcrumb-icon {
      color: $toolbar-icon-color !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-breadcrumb .e-disabled.e-breadcrumb-item.e-icon-item .e-breadcrumb-text {
      background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  @if $skin-name == 'tailwind3' {
    .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover,
    .e-breadcrumb .e-breadcrumb-item.e-icon-item:active,
    .e-breadcrumb .e-breadcrumb-item.e-icon-item:focus {
      background: transparent;
    }

    .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:focus .e-breadcrumb-icon,
    .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:hover .e-breadcrumb-icon {
      color: $content-text-color-alt3;
    }

    .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text:active .e-breadcrumb-icon {
      color: $primary;
    }
  }
}

@include export-module('breadcrumb-bootstrap-dark-icons') {
  .e-breadcrumb {
    .e-breadcrumb-collapsed::before,
    .e-breadcrumb-menu::before {
      content: '\e615';
    }

    .e-home::before {
      content: '\e92b';
    }
  }
}

@include export-module('breadcrumb-bigger') {
  .e-bigger.e-breadcrumb,
  .e-bigger .e-breadcrumb {
    .e-breadcrumb-item {
      .e-breadcrumb-text {
        @if $skin-name == 'FluentUI' {
          padding: 8px;
        }
        @else {
          padding: $breadcrumb-bigger-padding;
        }

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' {
          &:focus {
            padding: $breadcrumb-item-focus-bigger-padding;
          }
        }
      }

      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' {
        &.e-icon-item .e-breadcrumb-text:focus {
          padding: $breadcrumb-icon-only-item-focus-bigger-padding;
        }
      }

      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'bootstrap5.3' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'bootstrap' {
        &.e-icon-item .e-breadcrumb-text {
          padding: $breadcrumb-icon-only-item-bigger-padding;
        }
      }

      @if $breadcrumb-skin == 'tailwind3' {
        &.e-icon-item .e-breadcrumb-text {
          padding: $breadcrumb-text-padding !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-breadcrumb-text {
        font-size: $breadcrumb-bigger-font-size;

        .e-breadcrumb-icon {
          font-size: $breadcrumb-icon-bigger-font-size;
          padding-right: $breadcrumb-icon-bigger-right-padding;

          @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
            padding-left: $breadcrumb-icon-bigger-right-padding;
          }
        }

        .e-breadcrumb-icon.e-icons.e-home {
          @if $breadcrumb-skin == 'bootstrap' {
            font-size: 13px;
          }
        }
      }

      &.e-icon-item .e-breadcrumb-text .e-breadcrumb-icon {
        padding: $breadcrumb-icon-item-padding;
      }
    }

    .e-breadcrumb-separator {
      font-size: $breadcrumb-bigger-font-size;
      padding: $breadcrumb-separator-bigger-padding;

      + .e-breadcrumb-separator {
        padding-left: $breadcrumb-sibling-separator-padding;
      }
    }

    &.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
      padding-left: list.nth($breadcrumb-separator-bigger-padding, 2);
    }

    .e-breadcrumb-collapsed,
    .e-breadcrumb-menu {
      font-size: $breadcrumb-collapsed-icon-bigger-font-size;
      padding: $breadcrumb-collapsed-icon-bigger-padding;
      @if $breadcrumb-skin == 'fluent2' {
        line-height: $breadcrumb-bigger-collapsed-menu-line-height;
      }

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
        &:focus {
          padding: $breadcrumb-collapsed-icon-focus-bigger-padding;
        }
      }
    }

    &.e-icon-right,
    .e-icon-right,
    &.e-rtl {
      .e-breadcrumb-text .e-breadcrumb-icon {
        padding-left: $breadcrumb-icon-bigger-right-padding;
        padding-right: $breadcrumb-padding-none;

        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
          padding-right: $breadcrumb-icon-bigger-right-padding;
        }
      }
    }

    &.e-rtl .e-icon-right .e-breadcrumb-text .e-breadcrumb-icon {
      padding-left: $breadcrumb-padding-none;
      padding-right: $breadcrumb-icon-bigger-right-padding;

      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
        padding-left: $breadcrumb-icon-bigger-right-padding;
      }
    }
  }

  .e-bigger.e-breadcrumb-popup,
  .e-bigger .e-breadcrumb-popup {
    .e-breadcrumb-text {
      font-size: $breadcrumb-bigger-font-size;
      height: $breadcrumb-popup-item-bigger-height;
      line-height: $breadcrumb-popup-item-bigger-line-height;
      @if $skin-name == 'fluent2' {
        padding: $breadcrumb-bigger-popup-text-padding !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-breadcrumb-icon {
        font-size: $breadcrumb-icon-bigger-font-size;
        padding-right: $breadcrumb-icon-bigger-right-padding;
      }
    }

    .e-icon-item .e-breadcrumb-text .e-breadcrumb-icon {
      padding: $breadcrumb-padding-none;
    }

    &.e-icon-right,
    .e-icon-right,
    &.e-rtl {
      .e-breadcrumb-icon {
        padding-left: $breadcrumb-icon-bigger-right-padding;
        padding-right: $breadcrumb-padding-none;
      }
    }

    &.e-rtl.e-icon-right .e-breadcrumb-icon,
    &.e-rtl .e-icon-right .e-breadcrumb-icon {
      padding-left: $breadcrumb-padding-none;
      padding-right: $breadcrumb-icon-bigger-right-padding;
    }
  }

  @if $breadcrumb-skin == 'fluent2' {
    .e-bigger .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text .e-anchor-wrap {
      line-height: $breadcrumb-bigger-anchor-wrap-line-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-bigger .e-breadcrumb .e-breadcrumb-separator {
      line-height: $breadcrumb-bigger-separator-line-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-bigger .e-breadcrumb .e-breadcrumb-item.e-icon-item .e-breadcrumb-text {
      padding: $breadcrumb-bigger-icon-text-padding !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-bigger .e-breadcrumb-popup .e-breadcrumb-item {
      margin: $breadcrumb-bigger-popup-item-margin !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

//normal
$btn-color: $grey-dark-font !default;
$btn-font-size: 14px !default;
$btn-border: 1px solid !default;
$btn-bgcolor: $grey-light !default;
$btn-border-color: $grey-8c !default;
$btn-hover-bgcolor: $grey !default;
$btn-hover-border-color: $grey-99 !default;
$btn-hover-color: $grey-dark-font !default;
$btn-focus-bgcolor: $grey-dark !default;
$btn-focus-border-color: $grey-8c !default;
$btn-focus-color: $grey-light-font !default;
$btn-active-border-color: $grey-8c !default;
$btn-active-bgcolor: $grey-dark !default;
$btn-active-color: $grey-light-font !default;
$btn-disabled-color: rgba($btn-color, .3) !default;
$btn-disabled-bgcolor: rgba($btn-bgcolor, .4) !default;
$btn-disabled-border-color: rgba($grey-8c, .4) !default;
$btn-active-box-shadow: inset 0 4px 5px rgba($grey-base, .4) !default;
$btn-icon-margin-top: -3px !default;
$btn-icon-btn-width: 1em !default;
$btn-icon-top-bottom-padding: 6px !default;
$btn-icon-small-width: 1em !default;
$btn-icon-bigger-small-width: 1em !default;
$btn-top-icon-padding: 12px 12px !default;
$btn-top-icon-bigger-padding: 16px 16px !default;
$btn-small-icon-top-bottom-padding: 6px !default;
$btn-icon-bigger-width: 1em !default;
$btn-bigger-icon-top-bottom-padding: 8px !default;
$btn-focus-outline: $btn-bgcolor 0 solid !default;
$btn-focus-outline-round: $btn-bgcolor 0 solid !default;
$btn-focus-outline-offset: 0 !default;
$btn-active-outline: $btn-bgcolor 0 solid !default;
$btn-active-outline-offset: 0 !default;
$btn-ripple-bgcolor: transparent !default;
$btn-link-bgcolor: transparent !default;
$btn-link-border-color: transparent !default;
$btn-link-color: #0d47a1 !default;
$btn-link-hover-color: #0a3576 !default;
$btn-link-disabled-bgcolor: transparent !default;

//primary
$btn-ripple-primary-bgcolor: transparent !default;
$btn-primary-outline: $btn-bgcolor 0 solid !default;
$btn-primary-color: $brand-primary-font !default;
$btn-primary-hover-color: $brand-primary-font !default;
$btn-primary-focus-color:  $brand-primary-font !default;
$btn-primary-active-color:  $brand-primary-font !default;
$btn-primary-bgcolor: $brand-primary !default;
$btn-primary-hover-bgcolor: color.adjust($brand-primary, $lightness: -6%) !default;
$btn-primary-active-bgcolor: color.adjust($brand-primary, $lightness: -10%) !default;
$btn-primary-border-color:  color.adjust($brand-primary, $lightness: 10%) !default;
$btn-primary-hover-border-color: $brand-primary !default;
$btn-primary-focus-border-color: color.adjust($brand-primary, $lightness: -10%) !default;
$btn-primary-active-border-color: color.adjust($brand-primary, $lightness: -10%) !default;
$btn-primary-focus-bgcolor: color.adjust($brand-primary, $lightness: -10%) !default;
$btn-primary-disabled-bgcolor: rgba($brand-primary, .4) !default;
$btn-primary-disabled-color: rgba($brand-primary-font, .4) !default;
$btn-primary-disabled-border-color: rgba($brand-primary, .4) !default;

//outline
$btn-outline-color: $btn-color !default;
$btn-outline-bgcolor: transparent !default;
$btn-outline-hover-bgcolor: $btn-hover-bgcolor !default;
$btn-outline-hover-color: $btn-hover-color !default;
$btn-outline-focus-bgcolor: $btn-focus-bgcolor !default;
$btn-outline-focus-color: $btn-focus-color !default;
$btn-outline-active-color: $btn-active-color !default;
$btn-outline-active-bgcolor: $btn-active-bgcolor !default;
$btn-outline-border-color: $btn-border-color !default;
$btn-outline-hover-border-color: $btn-hover-border-color !default;
$btn-outline-focus-border-color: $btn-focus-border-color !default;
$btn-outline-default-focus-border-color: $btn-focus-border-color !default;
$btn-outline-active-border-color: $btn-active-border-color !default;
$btn-outline-active-box-shadow: $btn-active-box-shadow !default;
$btn-outline-disabled-bgcolor: $btn-disabled-bgcolor !default;
$btn-outline-disabled-border-color: $btn-disabled-border-color !default;
$btn-outline-disabled-color: $btn-disabled-color !default;
$btn-outline-primary-color: color.adjust($brand-primary, $lightness: 15%) !default;
$btn-outline-primary-focus-bgcolor: $btn-primary-focus-bgcolor !default;
$btn-outline-primary-focus-color: $btn-primary-focus-color !default;

//flat
$btn-flat-color: $btn-color !default;
$btn-flat-border: $btn-border !default;
$btn-flat-border-color: $btn-border-color !default;
$btn-flat-hover-color: $btn-hover-color !default;
$btn-flat-focus-color: $btn-focus-color !default;
$btn-flat-active-color: $btn-active-color !default;
$btn-flat-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5) !default;
$btn-flat-active-bgcolor: $btn-active-bgcolor !default;
$btn-flat-bgcolor: $btn-bgcolor !default;
$btn-flat-hover-bgcolor: $btn-hover-bgcolor !default;
$btn-flat-focus-bgcolor: $btn-flat-hover-bgcolor !default;
$btn-flat-hover-border-color: $btn-hover-border-color !default;
$btn-flat-active-border-color: $btn-active-border-color !default;
$btn-flat-focus-border-color: $btn-focus-border-color !default;
$btn-flat-active-box-shadow: $btn-active-box-shadow !default;
$btn-flat-disabled-border-color: $btn-disabled-border-color !default;
$btn-flat-disabled-bgcolor: $btn-disabled-bgcolor !default;
$btn-flat-disabled-color: $btn-disabled-color !default;
$btn-ripple-flat-bgcolor: transparent !default;
$btn-ripple-flat-primary-bgcolor: transparent !default;
$btn-ripple-flat-success-bgcolor: transparent !default;
$btn-ripple-flat-info-bgcolor: transparent !default;
$btn-ripple-flat-warning-bgcolor: transparent !default;
$btn-ripple-flat-danger-bgcolor: transparent !default;

//success
$btn-success-color: #fff !default;
$btn-success-bgcolor: $brand-success-dark !default;
$btn-success-hover-bgcolor: color.adjust($btn-success-bgcolor, $lightness: -5%) !default;
$btn-success-focus-bgcolor: color.adjust($btn-success-bgcolor, $lightness: -10%) !default;
$btn-success-active-bgcolor: color.adjust($btn-success-bgcolor, $lightness: -15%) !default;
$btn-success-border-color: color.adjust($btn-success-bgcolor, $lightness: -10%) !default;
$btn-success-hover-border-color: color.adjust($btn-success-bgcolor, $lightness: -0%) !default;
$btn-success-focus-border-color: color.adjust($btn-success-bgcolor, $lightness: -10%) !default;
$btn-success-active-border-color: color.adjust($btn-success-bgcolor, $lightness: -10%) !default;
$btn-success-disabled-bgcolor: rgba($brand-success, .4) !default;
$btn-success-disabled-color: rgba($grey-dark-font, .4) !default;
$btn-success-disabled-border-color: $btn-disabled-border-color !default;
$btn-success-hover-color: #fff !default;
$btn-success-focus-color: $btn-success-hover-color !default;
$btn-ripple-success-bgcolor: transparent !default;
$btn-success-active-color: $btn-success-color !default;

//warning
$btn-warning-bgcolor: $brand-warning-dark !default;
$btn-warning-color: $base-font !default;
$btn-warning-hover-color: $base-font !default;
$btn-warning-hover-bgcolor: color.adjust($btn-warning-bgcolor, $lightness: -15%) !default;
$btn-warning-focus-bgcolor: color.adjust($btn-warning-bgcolor, $lightness: -10%) !default;
$btn-warning-active-bgcolor: color.adjust($btn-warning-bgcolor, $lightness: -15%) !default;
$btn-warning-border-color: color.adjust($btn-warning-bgcolor, $lightness: -10%) !default;
$btn-warning-hover-border-color: color.adjust($btn-warning-bgcolor, $lightness: -25%) !default;
$btn-warning-focus-border-color: color.adjust($btn-warning-bgcolor, $lightness: -35%) !default;
$btn-warning-focus-color: $base-font !default;
$btn-warning-active-color: $base-font !default;
$btn-warning-active-border-color: color.adjust($btn-warning-bgcolor, $lightness: -25%) !default;
$btn-warning-disabled-bgcolor: rgba($brand-warning, .4) !default;
$btn-warning-disabled-color: rgba($grey-dark-font, .4) !default;
$btn-warning-disabled-border-color: $btn-disabled-border-color !default;
$btn-ripple-warning-bgcolor: transparent !default;

//danger
$btn-danger-color: #fff !default;
$btn-danger-bgcolor: $brand-danger-dark !default;
$btn-danger-hover-bgcolor: color.adjust($brand-danger-dark, $lightness: -5%) !default;
$btn-danger-focus-bgcolor: color.adjust($brand-danger-dark, $lightness: -10%) !default;
$btn-danger-active-bgcolor: color.adjust($brand-danger-dark, $lightness: -15%) !default;
$btn-danger-active-color: $btn-danger-color !default;
$btn-danger-border-color: color.adjust($btn-danger-bgcolor, $lightness: -10%) !default;
$btn-danger-hover-border-color: $btn-danger-bgcolor !default;
$btn-danger-focus-border-color: color.adjust($btn-danger-bgcolor, $lightness: -10%) !default;
$btn-danger-active-border-color: color.adjust($btn-danger-bgcolor, $lightness: -10%) !default;
$btn-danger-disabled-bgcolor: rgba($brand-danger, .4) !default;
$btn-danger-disabled-color: rgba($grey-dark-font, .4) !default;
$btn-danger-disabled-border-color: $btn-disabled-border-color !default;
$btn-danger-hover-color: #fff !default;
$btn-ripple-danger-bgcolor: transparent !default;

//info
$btn-info-bgcolor: $brand-info-dark !default;
$btn-info-color: $grey-light-font !default;
$btn-info-hover-bgcolor: color.adjust($brand-info-dark, $lightness: -5%) !default;
$btn-info-focus-bgcolor: color.adjust($btn-info-bgcolor, $lightness: -10%) !default;
$btn-info-active-bgcolor: color.adjust($btn-info-bgcolor, $lightness: -15%) !default;
$btn-info-border-color: $brand-info !default;
$btn-info-hover-border-color: $brand-info-dark !default;
$btn-info-focus-border-color: color.adjust($brand-info-dark, $lightness: -10%) !default;
$btn-info-active-border-color: color.adjust($brand-info-dark, $lightness: -10%) !default;
$btn-info-disabled-bgcolor: rgba($brand-info, .4) !default;
$btn-info-disabled-color: rgba($grey-dark-font, .4) !default;
$btn-info-disabled-border-color: $btn-disabled-border-color !default;
$btn-info-active-color: $btn-info-color !default;
$btn-info-hover-color: #fff !default;
$btn-ripple-info-bgcolor: transparent !default;

//round
$btn-round-focus-color: $grey-light-font !default;
$btn-round-active-color: $grey-light-font !default;
$btn-round-bgcolor: $btn-bgcolor !default;
$btn-round-border-color: $btn-border-color !default;
$btn-round-color: $btn-color !default;
$btn-round-hover-bgcolor: $btn-hover-bgcolor !default;
$btn-round-hover-border-color: $btn-hover-border-color !default;
$btn-round-hover-color: $btn-hover-color !default;

//flatprimary
$btn-flat-primary-hover-bgcolor: $btn-primary-hover-bgcolor !default;
$btn-flat-primary-border-color: $btn-primary-border-color !default;
$btn-flat-primary-hover-border-color: $btn-primary-hover-border-color !default;
$btn-flat-primary-active-border-color: $btn-primary-active-border-color !default;
$btn-flat-primary-focus-border-color: $btn-primary-focus-border-color !default;
$btn-flat-primary-disabled-border-color: $btn-disabled-border-color !default;
$btn-flat-primary-focus-bgcolor: $btn-flat-primary-hover-bgcolor !default;
$btn-flat-disabled-color: rgba($btn-flat-color, .4) !default;
$btn-flat-primary-disabled-color: rgba($btn-flat-color, .4) !default;
$btn-flat-primary-bgcolor: $btn-primary-bgcolor !default;
$btn-flat-primary-color: $btn-primary-color !default;
$btn-flat-primary-hover-color: $brand-primary-font !default;
$btn-flat-primary-focus-color: $btn-primary-focus-color !default;
$btn-flat-primary-active-color: $btn-primary-color !default;
$btn-flat-primary-active-bgcolor: $btn-primary-active-bgcolor !default;

//flatsuccess
$btn-flat-success-color: $btn-success-color !default;
$btn-flat-success-hover-color: $btn-success-color !default;
$btn-flat-success-focus-color: $btn-success-color !default;
$btn-flat-success-active-color: $btn-success-color !default;
$btn-flat-success-active-bgcolor: $btn-success-active-bgcolor !default;
$btn-flat-success-disabled-color: rgba($btn-flat-success-color, .4) !default;
$btn-flat-success-bgcolor: $btn-success-bgcolor !default;
$btn-flat-success-hover-bgcolor: $btn-success-hover-bgcolor !default;
$btn-flat-success-border-color: $btn-success-border-color !default;
$btn-flat-success-hover-border-color: $btn-success-hover-border-color !default;
$btn-flat-success-active-border-color: $btn-success-active-border-color !default;
$btn-flat-success-focus-border-color: $btn-success-focus-border-color !default;
$btn-flat-success-disabled-border-color: $btn-success-disabled-border-color !default;
$btn-flat-success-focus-bgcolor: $btn-success-hover-bgcolor !default;

//flatinfo
$btn-flat-info-bgcolor: $btn-info-bgcolor !default;
$btn-flat-info-hover-bgcolor: $btn-info-hover-bgcolor !default;
$btn-flat-info-border-color: $btn-info-border-color !default;
$btn-flat-info-hover-border-color: $btn-info-hover-border-color !default;
$btn-flat-info-active-border-color: $btn-info-active-border-color !default;
$btn-flat-info-focus-border-color: $btn-info-focus-border-color !default;
$btn-flat-info-disabled-border-color: $btn-info-disabled-border-color !default;
$btn-flat-info-focus-bgcolor: $btn-info-hover-bgcolor !default;
$btn-flat-info-color: $btn-info-color !default;
$btn-flat-info-disabled-color: rgba($btn-flat-info-color, .4) !default;
$btn-flat-info-hover-color: $btn-info-color !default;
$btn-flat-info-focus-color: $btn-info-color !default;
$btn-flat-info-active-color: $btn-info-color !default;
$btn-flat-info-active-bgcolor: $btn-info-active-bgcolor !default;

//flatwarning
$btn-flat-warning-bgcolor: $btn-warning-bgcolor !default;
$btn-flat-warning-hover-bgcolor: $btn-warning-hover-bgcolor !default;
$btn-flat-warning-border-color: $btn-warning-border-color !default;
$btn-flat-warning-hover-border-color: $btn-warning-hover-border-color !default;
$btn-flat-warning-active-border-color: $btn-warning-active-border-color !default;
$btn-flat-warning-focus-border-color: $btn-warning-focus-border-color !default;
$btn-flat-warning-disabled-border-color: $btn-warning-disabled-border-color !default;
$btn-flat-warning-focus-bgcolor: $btn-warning-hover-bgcolor !default;
$btn-flat-warning-color: $base-font !default;
$btn-flat-warning-disabled-color: rgba($btn-flat-warning-color, .4) !default;
$btn-flat-warning-hover-color: $btn-warning-color !default;
$btn-flat-warning-focus-color: $btn-warning-color !default;
$btn-flat-warning-active-color: $btn-warning-color !default;
$btn-flat-warning-active-bgcolor: $btn-warning-active-bgcolor !default;

//flatdanger
$btn-flat-danger-bgcolor: $btn-danger-bgcolor !default;
$btn-flat-danger-hover-bgcolor: $btn-danger-hover-bgcolor !default;
$btn-flat-danger-border-color: $btn-danger-border-color !default;
$btn-flat-danger-hover-border-color: $btn-danger-hover-border-color !default;
$btn-flat-danger-active-border-color: $btn-danger-active-border-color !default;
$btn-flat-danger-focus-border-color: $btn-danger-focus-border-color !default;
$btn-flat-danger-disabled-border-color: $btn-danger-disabled-border-color !default;
$btn-flat-danger-focus-bgcolor: $btn-danger-hover-bgcolor !default;
$btn-flat-danger-color: $btn-danger-color !default;
$btn-flat-danger-hover-color: $btn-danger-color !default;
$btn-flat-danger-focus-color: $btn-danger-color !default;
$btn-flat-danger-active-color: $btn-danger-color !default;
$btn-flat-danger-active-bgcolor: $btn-danger-active-bgcolor !default;
$btn-flat-danger-disabled-color: rgba($btn-flat-danger-color, .4) !default;

//outlineprimary
$btn-outline-primary-disabled-color: rgba($btn-outline-color, .4) !default;
$btn-outline-primary-disabled-border-color: rgba($btn-outline-border-color, .4) !default;
$btn-outline-primary-hover-border-color: $brand-primary !default;
$btn-outline-primary-focus-border-color: color.adjust($brand-primary, $lightness: -10%) !default;
$btn-outline-primary-active-border-color: color.adjust($brand-primary, $lightness: -10%) !default;

//outlinesuccess
$btn-outline-success-disabled-color: rgba($btn-success-bgcolor, .4) !default;
$btn-outline-success-disabled-border-color: rgba($btn-success-bgcolor, .4) !default;

//outlineinfo
$btn-outline-info-disabled-color: rgba($btn-info-bgcolor, .4) !default;
$btn-outline-info-disabled-border-color: rgba($btn-info-bgcolor, .4) !default;

//outlinewarning
$btn-outline-warning-disabled-color: rgba($btn-warning-bgcolor, .4) !default;
$btn-outline-warning-disabled-border-color: rgba($btn-warning-bgcolor, .4) !default;

//outlinedanger
$btn-outline-danger-disabled-color: rgba($btn-danger-bgcolor, .4) !default;
$btn-outline-danger-disabled-border-color: rgba($btn-danger-bgcolor, .4) !default;

//size
$btn-font-weight: 400 !default;
$btn-font-size: 14px !default;
$btn-small-font-size: 12px !default;
$btn-bigger-font-size: 16px !default;
$btn-bigger-small-font-size: 15px !default;
$btn-border-radius: 4px !default;
$btn-text-transform: none !default;
$btn-box-shadow: none !default;
$btn-hover-focus-box-shadow: none !default;
$btn-icon-font-size: 12px !default;
$btn-small-icon-font-size: 10px !default;
$btn-bigger-icon-font-size: 14px !default;
$btn-bigger-small-icon-font-size: 12px !default;
$btn-round-small-height: 2.334em !default;
$btn-round-small-width: 2.334em !default;
$btn-round-height: 2.429em !default;
$btn-round-width: 2.429em !default;
$btn-round-bigger-small-height: 2.4em !default;
$btn-round-bigger-small-width: 2.4em !default;
$btn-round-bigger-height: 2.5em !default;
$btn-round-bigger-width: 2.5em !default;
$btn-round-font-size: 16px !default;
$btn-small-round-font-size: 14px !default;
$btn-bigger-round-font-size: 18px !default;
$btn-bigger-small-round-font-size: 16px !default;
$btn-icon-margin: -.5em !default;
$btn-small-icon-margin: -.57143em !default;
$btn-bigger-icon-margin: -.6111em !default;
$btn-bigger-small-icon-margin: -.5em !default;
$btn-icon-width: 1.688em !default;
$btn-small-icon-width: 1.7143em !default;
$btn-bigger-icon-width: 2em !default;
$btn-bigger-small-icon-width: 2em !default;
$btn-round-icon-line-height: 2em !default;
$btn-small-round-icon-line-height: 1.8572em !default;
$btn-bigger-round-icon-line-height: 2.1111em !default;
$btn-bigger-small-round-icon-line-height: 2.125em !default;
$btn-text-line-height: 2.286em !default;
$btn-bigger-text-line-height: 2.375em !default;
$btn-small-text-line-height: 2.167em !default;
$btn-bigger-small-text-line-height: 2.2667em !default;
$btn-padding: 0 12px !default;
$btn-small-padding: 0 10px !default;
$btn-bigger-padding: 0 16px !default;
$btn-bigger-small-padding: 0 14px !default;
$btn-icon-padding: 0 8px !default;
$btn-small-icon-padding: 0 6px !default;
$btn-bigger-icon-padding: 0 10px !default;
$btn-bigger-small-icon-padding: 0 9px !default;
$btn-flat-primary-disabled-bgcolor: $btn-primary-disabled-bgcolor !default;
$btn-flat-success-disabled-bgcolor: $btn-success-disabled-bgcolor !default;
$btn-flat-info-disabled-bgcolor: $btn-info-disabled-bgcolor !default;
$btn-flat-warning-disabled-bgcolor: $btn-warning-disabled-bgcolor !default;
$btn-flat-danger-disabled-bgcolor: $btn-danger-disabled-bgcolor !default;
$btn-focus-box-shadow: none !default;
$btn-zero-padding: 0 !default;
$btn-top-bottom-icon-line-height: 1 !default;
$btn-round-line-height: 1 !default;
$btn-round-border-radius: 50% !default;
$btn-auto-width: auto !default;
$btn-width-full: 100% !default;
$btn-zero-border: 0 !default;
$btn-zero-line-height: 0 !default;

@mixin icon-left-right {
  @if $skin-name == 'bootstrap4' {
    padding: $btn-zero-padding $btn-bigger-icon-top-bottom-padding;
  }
  @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
    line-height: $btn-zero-line-height;
  }
}

@mixin icon-top-bottom {
  display: block;
  margin-top: $btn-zero-padding;
  width: $btn-auto-width;
}

@mixin top-bottom-icon-btn {
  line-height: $btn-top-bottom-icon-line-height;
}

@mixin mat3-border-radius {
  @if $skin-name == 'Material3' {
    border-radius: $btn-bgr-mat3-border-radius;
  }
}

@mixin fluent-focus-visible {
  @if $skin-name == 'FluentUI' {
    outline: none !important; /* stylelint-disable-line declaration-no-important */
  }
}

@include export-module('button-layout') {
  .e-btn,
  .e-css.e-btn {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-font-smoothing: antialiased;
    border: $btn-border;
    border-radius: $btn-border-radius;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: $font-family;
    font-size: $btn-font-size;
    font-weight: $btn-font-weight;
    justify-content: center;
    line-height: $btn-text-line-height;
    outline: none;
    padding: $btn-padding;
    text-align: center;
    text-decoration: none;
    text-transform: $btn-text-transform;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    @if $skin-name == 'Material3' {
      letter-spacing: $btn-css-letter-spacing;
    }
    @at-root {
      &:disabled {
        cursor: default;
      }

      &:hover,
      &:focus {
        text-decoration: none;
      }

      &::-moz-focus-inner {
        border: $btn-zero-border;
        padding: $btn-zero-padding;
      }

      & .e-btn-icon {
        display: inline-block;
        font-size: $btn-icon-font-size;
        margin-top: $btn-icon-margin-top;
        vertical-align: middle;
        width: $btn-icon-btn-width;

        &.e-icon-left {
          margin-left: $btn-icon-margin;
          width: $btn-icon-width;
          @include icon-left-right;
        }

        &.e-icon-right {
          width: $btn-icon-width;
          margin-right: $btn-icon-margin;
          @include icon-left-right;
        }

        &.e-icon-top {
          padding-bottom: $btn-icon-top-bottom-padding;
          @include icon-top-bottom;
        }

        &.e-icon-bottom {
          padding-top: $btn-icon-top-bottom-padding;
          @include icon-top-bottom;
        }
      }

      &.e-icon-btn {
        @if $skin-name != 'tailwind3' {
          padding: $btn-icon-padding;
        }
        @if $skin-name == 'fluent2' {
          line-height: $btn-icon-btn-line-height;
        }
        @include mat3-border-radius;
      }

      &.e-top-icon-btn,
      &.e-bottom-icon-btn {
        @include top-bottom-icon-btn;
        padding: $btn-top-icon-padding;
      }

      &.e-round {
        border-radius: $btn-round-border-radius;
        height: $btn-round-height;
        line-height: $btn-round-line-height;
        padding: $btn-zero-padding;
        width: $btn-round-width;

        & .e-btn-icon {
          font-size: $btn-round-font-size;
          line-height: $btn-round-icon-line-height;
          margin-top: $btn-zero-padding;
          width: $btn-auto-width;
        }
      }

      &.e-round-corner {
        @if $skin-name == 'Material3' {
          border-radius: $btn-bgr-mat3-round-border-radius;
          padding: $btn-padding;
        }
      }

      &.e-rtl {
        & .e-icon-right {
          margin-left: $btn-icon-margin;
          margin-right: $btn-zero-padding;
        }

        & .e-icon-left {
          margin-left: $btn-zero-padding;
          margin-right: $btn-icon-margin;
        }
      }

      &.e-flat {
        border: $btn-flat-border;
      }

      &.e-small {
        font-size: $btn-small-font-size;
        line-height: $btn-small-text-line-height;
        padding: $btn-small-padding;
        @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
          border-radius: 2px;
        }

        &.e-round-corner {
          @if $skin-name == 'Material3' {
            border-radius: $btn-bgr-mat3-round-border-radius;
            padding: $btn-small-padding;
          }
        }

        & .e-btn-icon {
          font-size: $btn-small-icon-font-size;
          width: $btn-icon-small-width;

          &.e-icon-left {
            margin-left: $btn-small-icon-margin;
            width: $btn-small-icon-width;
            @include icon-left-right;
          }

          &.e-icon-right {
            margin-right: $btn-small-icon-margin;
            width: $btn-small-icon-width;
            @include icon-left-right;
          }

          &.e-icon-top {
            padding-bottom: $btn-small-icon-top-bottom-padding;
            width: $btn-auto-width;
          }

          &.e-icon-bottom {
            padding-top: $btn-small-icon-top-bottom-padding;
            width: $btn-auto-width;
          }
        }

        &.e-icon-btn {
          padding: $btn-small-icon-padding;
          @include mat3-border-radius;
        }

        &.e-top-icon-btn,
        &.e-bottom-icon-btn {
          @include top-bottom-icon-btn;
          padding: $btn-top-icon-padding;
        }

        &.e-round {
          height: $btn-round-small-height;
          line-height: $btn-round-line-height;
          padding: $btn-zero-padding;
          width: $btn-round-small-width;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
            border-radius: $btn-round-border-radius;
          }

          & .e-btn-icon {
            font-size: $btn-small-round-font-size;
            line-height: $btn-small-round-icon-line-height;
            width: $btn-auto-width;
          }
        }

        &.e-rtl {
          & .e-icon-right {
            margin-left: $btn-small-icon-margin;
            margin-right: $btn-zero-padding;
          }

          & .e-icon-left {
            margin-left: $btn-zero-padding;
            margin-right: $btn-small-icon-margin;
          }
        }
      }

      &.e-block {
        display: block;
        width: $btn-width-full;
      }
    }
  }

  .e-small .e-btn,
  .e-small.e-btn,
  .e-small .e-css.e-btn,
  .e-small.e-css.e-btn {
    font-size: $btn-small-font-size;
    line-height: $btn-small-text-line-height;
    padding: $btn-small-padding;
    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
      border-radius: 2px;
    }

    &.e-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: $btn-bgr-mat3-round-border-radius;
        padding: $btn-small-padding;
      }
    }

    & .e-btn-icon {
      font-size: $btn-small-icon-font-size;
      width: $btn-icon-small-width;

      &.e-icon-left {
        margin-left: $btn-small-icon-margin;
        width: $btn-small-icon-width;
        @include icon-left-right;
      }

      &.e-icon-right {
        margin-right: $btn-small-icon-margin;
        width: $btn-small-icon-width;
        @include icon-left-right;
      }

      &.e-icon-top {
        padding-bottom: $btn-small-icon-top-bottom-padding;
        width: $btn-auto-width;
      }

      &.e-icon-bottom {
        padding-top: $btn-small-icon-top-bottom-padding;
        width: $btn-auto-width;
      }
    }

    &.e-icon-btn {
      padding: $btn-small-icon-padding;
      @if $skin-name == 'fluent2' {
        line-height: $btn-icon-btn-line-height;
      }
      @include mat3-border-radius;
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-padding;
    }

    &.e-round {
      height: $btn-round-small-height;
      line-height: $btn-round-line-height;
      padding: $btn-zero-padding;
      width: $btn-round-small-width;
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or or $skin-name == 'Material3' {
        border-radius: $btn-round-border-radius;
      }

      & .e-btn-icon {
        font-size: $btn-small-round-font-size;
        line-height: $btn-small-round-icon-line-height;
        width: $btn-auto-width;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-small-icon-margin;
        margin-right: $btn-zero-padding;
      }

      & .e-icon-left {
        margin-left: $btn-zero-padding;
        margin-right: $btn-small-icon-margin;
      }
    }
  }

  @if $skin-name == 'fluent2' {
    .e-btn.e-icon-btn .e-btn-icon,
    .e-small .e-btn.e-icon-btn .e-btn-icon {
      font-size: $btn-small-flu2-font-size;
      line-height: $btn-small-flu2-line-height;
    }
  }
}

@mixin button-focus {
  background: $btn-focus-bgcolor;
  @if $skin-name == 'Material3' {
    border-image: $btn-focus-border-color;
  }
  @else {
    border-color: $btn-focus-border-color;
  }
  color: $btn-focus-color;
  outline: $btn-focus-outline;
  outline-offset: $btn-focus-outline-offset;
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-focus-bgcolor, $lightness: 50%), $btn-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
    box-shadow: $btn-hover-focus-box-shadow;
  }
}

@mixin button-active {
  background: $btn-active-bgcolor;
  @if $skin-name == 'Material3' {
    border-image: $btn-active-border-color;
  }
  @else {
    border-color: $btn-active-border-color;
  }
  color: $btn-active-color;
  @if $skin-name != 'FluentUI' {
    outline: $btn-active-outline;
    outline-offset: $btn-active-outline-offset;
  }
  @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
    box-shadow: $btn-active-box-shadow;
  }
}

@mixin primary-focus {
  background: $btn-primary-focus-bgcolor;
  border-color: $btn-primary-focus-border-color;
  color: $btn-primary-focus-color;
  outline: $btn-primary-outline;
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-primary-focus-bgcolor, $lightness: 50%), $btn-primary-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
    box-shadow: $btn-primary-focus-box-shadow;
  }
  @else {
    @if $skin-name != 'tailwind3' {
      box-shadow: $btn-hover-focus-box-shadow;
    }
  }
}

@mixin primary-active {
  background: $btn-primary-active-bgcolor;
  border-color: $btn-primary-active-border-color;
  color: $btn-primary-active-color;
  @if $skin-name != 'FluentUI' {
    outline: $btn-active-outline;
  }
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
    box-shadow: $btn-active-box-shadow;
  }
}

@mixin primary-disabled {
  background: $btn-primary-disabled-bgcolor;
  border-color: $btn-primary-disabled-border-color;
  box-shadow: $btn-flat-box-shadow;
  color: $btn-primary-disabled-color;
  @if $skin-name == 'FluentUI' {
    outline: none;
  }
}

@mixin outline-focus {
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-outline-focus-bgcolor, $lightness: 50%), $btn-outline-default-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if $skin-name == 'Material3' {
    background: $btn-outline-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: $btn-outline-color;
  }
  @else if $skin-name == 'fluent2' {
    color: $secondary-outline-button-text-color-hover;
  }
  @else if $skin-name == 'bootstrap5.3' {
    box-shadow: $btn-hover-focus-box-shadow;
  }
  @else if $skin-name == 'tailwind3' {
    background: $secondary-bg-color-focus;
    border: 1px solid $secondary-border-color-focus;
    color: $secondary-text-color-focus;
  }
}

@mixin outline-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-bgcolor;
    border-color: transparent;
  }
  @else {
    background: $btn-outline-active-bgcolor;
    border-color: $btn-outline-active-border-color;
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
      box-shadow: $btn-outline-active-box-shadow;
    }
  }
  color: $btn-outline-active-color;
}

@mixin outline-primary-focus {
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-outline-primary-focus-bgcolor, $lightness: 50%), $btn-outline-primary-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if ($skin-name == 'bootstrap5') {
    box-shadow: $btn-primary-focus-box-shadow;
  }
  @else if $skin-name == 'Material3' {
    background: $btn-outline-primary-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-primary-color);
  }
  @else if $skin-name == 'tailwind3' {
    background: $primary-bg-color-focus;
    border: 1px solid $primary-border-color-focus;
    color: $primary-text-focus;
  }
}

@mixin outline-primary-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-primary-bgcolor;
    border-color: transparent;
  }
  @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
    background: $btn-primary-bgcolor;
  }
  @else {
    background: $btn-primary-active-bgcolor;
    border-color: $btn-outline-primary-active-border-color;
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
      box-shadow: $btn-outline-active-box-shadow;
    }
  }
  color: $btn-primary-active-color;
  @if $skin-name == 'Material3' {
    background: $btn-outline-primary-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-primary-color);
  }
}

@mixin outline-success-focus {
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-success-focus-bgcolor, $lightness: 50%), $btn-success-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if ($skin-name == 'bootstrap5') {
    box-shadow: $btn-success-focus-box-shadow;
  }
  @else if $skin-name == 'Material3' {
    background: $btn-outline-success-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-success-color);
  }
  @else if $skin-name == 'tailwind3' {
    background: $success-bg-color-focus;
    border: 1px solid $success-border-color-focus;
    color: $success-text-focus;
  }
}

@mixin outline-success-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-success-bgcolor;
    border-color: transparent;
  }
  @else {
    background: $btn-success-active-bgcolor;
    border-color: $btn-success-active-border-color;
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
      box-shadow: $btn-outline-active-box-shadow;
    }
  }
  color: $btn-success-active-color;
  @if $skin-name == 'Material3' {
    background: $btn-outline-success-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-success-color);
  }
}

@mixin outline-info-focus {
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-info-hover-bgcolor, $lightness: 50%), $btn-info-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if ($skin-name == 'bootstrap5') {
    box-shadow: $btn-info-focus-box-shadow;
  }
  @else if $skin-name == 'Material3' {
    background: $btn-outline-info-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-info-color);
  }
  @else if $skin-name == 'tailwind3' {
    background: $info-bg-color-focus;
    border: 1px solid $info-border-color-focus;
    color: $info-text-focus;
  }
}

@mixin outline-info-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-info-bgcolor;
    border-color: transparent;
  }
  @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
    background: $btn-info-bgcolor;
  }
  @else {
    background: $btn-info-active-bgcolor;
    border-color: $btn-info-active-border-color;
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
      box-shadow: $btn-outline-active-box-shadow;
    }
  }
  color: $btn-info-active-color;
  @if $skin-name == 'Material3' {
    background: $btn-outline-info-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-info-color);
  }
}

@mixin outline-warning-focus {
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-warning-hover-bgcolor, $lightness: 50%), $btn-warning-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if ($skin-name == 'bootstrap5') {
    box-shadow: $btn-warning-focus-box-shadow;
  }
  @else if $skin-name == 'Material3' {
    background: $btn-outline-warning-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-warning-color);
  }
  @else if $skin-name == 'tailwind3' {
    background: $warning-bg-color-focus;
    border: 1px solid $warning-border-color-focus;
    color: $warning-text-focus;
  }
}

@mixin outline-warning-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-warning-bgcolor;
    border-color: transparent;
  }
  @else {
    background: $btn-warning-active-bgcolor;
    border-color: $btn-warning-active-border-color;
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
      box-shadow: $btn-outline-active-box-shadow;
    }
  }
  color: $btn-warning-active-color;
  @if $skin-name == 'Material3' {
    background: $btn-outline-warning-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-warning-color);
  }
}

@mixin outline-danger-focus {
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-danger-hover-bgcolor, $lightness: 50%), $btn-danger-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if ($skin-name == 'bootstrap5') {
    box-shadow: $btn-danger-focus-box-shadow;
  }
  @else if $skin-name == 'Material3' {
    background: $btn-outline-danger-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-danger-color);
  }
  @else if $skin-name == 'tailwind3' {
    background: $danger-bg-color-focus;
    border: 1px solid $danger-border-color-focus;
    color: $danger-text-focus;
  }
}

@mixin outline-danger-active {
  @if $skin-name == 'bootstrap4' {
    background: $btn-danger-bgcolor;
    border-color: transparent;
  }
  @else {
    background: $btn-danger-active-bgcolor;
    border-color: $btn-danger-active-border-color;
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
      box-shadow: $btn-outline-active-box-shadow;
    }
  }
  color: $btn-danger-active-color;
  @if $skin-name == 'Material3' {
    background: $btn-outline-danger-active-bgcolor;
    border: 1px solid $btn-outline-border-color;
    color: rgba($btn-outline-danger-color);
  }
}

@mixin outline-disabled {
  background: $btn-outline-bgcolor;
  @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
    border-color: $btn-outline-disabled-border-color;
    color: $btn-outline-disabled-color;
  }
  @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    border-color: $btn-outline-disabled-border-color;
    color: $btn-outline-disabled-color;
  }
  @else if $skin-name == 'fluent2' {
    background: $btn-outline-disabled-bgcolor !important; /* stylelint-disable-line declaration-no-important */
    border-color: $btn-outline-disabled-border-color !important; /* stylelint-disable-line declaration-no-important */
    color: $btn-outline-disabled-color !important; /* stylelint-disable-line declaration-no-important */
  }
  @else if $skin-name == 'tailwind3' {
    border: 1px solid $secondary-border-color-disabled;
    color: $secondary-text-color-disabled;
  }
  @else {
    border-color: $btn-outline-primary-disabled-border-color;
    box-shadow: $btn-flat-box-shadow;
    color: $btn-outline-primary-disabled-color;
  }
}

@mixin outline-primary-disabled {
  @if $skin-name == 'bootstrap5' {
    background: $btn-outline-primary-disabled-border-color;
    border-color: $btn-outline-primary-disabled-color;
  }
  @else {
    background: $btn-outline-bgcolor;
    border-color: $btn-outline-primary-disabled-border-color;
  }
  box-shadow: $btn-flat-box-shadow;
  color: $btn-outline-primary-disabled-color;
}

@mixin outline-success-disabled {
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    background: $btn-outline-success-disabled-border-color;
  }
  @else {
    background: $btn-outline-bgcolor;
  }
  border-color: $btn-outline-success-disabled-border-color;
  box-shadow: $btn-flat-box-shadow;
  color: $btn-outline-success-disabled-color;
}

@mixin outline-info-disabled {
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    background: $btn-info-disabled-border-color;
  }
  @else {
    background: $btn-outline-bgcolor;
  }
  border-color: $btn-outline-info-disabled-border-color;
  box-shadow: $btn-flat-box-shadow;
  color: $btn-outline-info-disabled-color;
}

@mixin outline-warning-disabled {
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    background: $btn-outline-warning-disabled-border-color;
  }
  @else {
    background: $btn-outline-bgcolor;
  }
  border-color: $btn-outline-warning-disabled-border-color;
  box-shadow: $btn-flat-box-shadow;
  color: $btn-outline-warning-disabled-color;
}

@mixin outline-danger-disabled {
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    background: $btn-outline-danger-disabled-border-color;
  }
  @else {
    background: $btn-outline-bgcolor;
  }
  border-color: $btn-outline-danger-disabled-border-color;
  box-shadow: $btn-flat-box-shadow;
  color: $btn-outline-danger-disabled-color;
}

@mixin success-focus {
  background: $btn-success-focus-bgcolor;
  border-color: $btn-success-focus-border-color;
  color: $btn-success-hover-color;
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-success-focus-bgcolor, $lightness: 50%), $btn-success-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
    box-shadow: $btn-success-focus-box-shadow;
  }
  @else {
    @if $skin-name != 'tailwind3' {
      box-shadow: $btn-hover-focus-box-shadow;
    }
  }
}

@mixin success-active {
  background: $btn-success-active-bgcolor;
  border-color: $btn-success-active-border-color;
  color: $btn-success-active-color;
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
    box-shadow: $btn-active-box-shadow;
  }
}

@mixin info-focus {
  background: $btn-info-focus-bgcolor;
  border-color: $btn-info-focus-border-color;
  color: $btn-info-hover-color;
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-info-focus-bgcolor, $lightness: 50%), $btn-info-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if ($skin-name == 'bootstrap5') {
    box-shadow: $btn-info-focus-box-shadow;
  }
  @else {
    @if $skin-name != 'tailwind3' {
      box-shadow: $btn-hover-focus-box-shadow;
    }
  }
}

@mixin info-active {
  background: $btn-info-active-bgcolor;
  color: $btn-info-active-color;
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    border-color: $info-border-color-pressed;
  }
  @else {
    border-color: $btn-info-active-border-color;
  }
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
    box-shadow: $btn-active-box-shadow;
  }
}

@mixin warning-focus {
  background: $btn-warning-focus-bgcolor;
  border-color: $btn-warning-focus-border-color;
  color: $btn-warning-hover-color;
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-warning-focus-bgcolor, $lightness: 50%), $btn-warning-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
    box-shadow: $btn-warning-focus-box-shadow;
  }
  @else {
    @if $skin-name != 'tailwind3' {
      box-shadow: $btn-hover-focus-box-shadow;
    }
  }
}

@mixin warning-active {
  background: $btn-warning-active-bgcolor;
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    border-color: $warning-border-color-pressed;
  }
  @else {
    border-color: $btn-warning-active-border-color;
  }
  color: $btn-warning-active-color;
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
    box-shadow: $btn-active-box-shadow;
  }
}

@mixin danger-focus {
  background: $btn-danger-focus-bgcolor;
  border-color: $btn-danger-focus-border-color;
  color: $btn-danger-hover-color;
  @if $skin-name == 'bootstrap4' {
    $color-rgba: rgba(color.mix(color.adjust($btn-danger-focus-bgcolor, $lightness: 50%), $btn-danger-focus-border-color, 15%), .5);
    box-shadow: 0 0 0 .25em $color-rgba;
  }
  @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    box-shadow: $btn-focus-box-shadow;
  }
  @else if $skin-name == 'bootstrap5' or $skin-name == 'Material3' {
    box-shadow: $btn-danger-focus-box-shadow;
  }
  @else {
    @if $skin-name != 'tailwind3' {
      box-shadow: $btn-hover-focus-box-shadow;
    }
  }
}

@mixin danger-active {
  background: $btn-danger-active-bgcolor;
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    border-color: $danger-border-color-pressed;
  }
  @else {
    border-color: $btn-danger-active-border-color;
  }
  color: $btn-danger-active-color;
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' {
    box-shadow: $btn-active-box-shadow;
  }
}

@mixin link-focus {
  border-radius: 0;
  text-decoration: underline;
  @if $skin-name == 'bootstrap4' {
    background: $btn-link-bgcolor;
    border-color: $btn-link-border-color;
    box-shadow: none;
    color: $btn-link-hover-color;
  }
  @else {
    color: $btn-link-hover-color;
  }
}

@mixin link-hover {
  border-radius: 0;
  color: $btn-link-hover-color;
  text-decoration: underline;
  @if $skin-name == 'bootstrap4' {
    background: transparent;
    border-color: transparent;
  }
}

@mixin success-disabled {
  background: $btn-success-disabled-bgcolor;
  @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    border-color: $success-border-color-disabled;
  }
  @else {
    border-color: $btn-disabled-border-color;
  }
  box-shadow: $btn-flat-box-shadow;
  color: $btn-success-disabled-color;
  @if $skin-name == 'FluentUI' {
    outline: none;
  }
}

@mixin info-disabled {
  background: $btn-info-disabled-bgcolor;
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
    border-color: $btn-info-disabled-border-color;
  }
  @else {
    border-color: $btn-disabled-border-color;
  }
  box-shadow: $btn-flat-box-shadow;
  color: $btn-info-disabled-color;
  @if $skin-name == 'FluentUI' {
    outline: none;
  }
}

@mixin warning-disabled {
  background: $btn-warning-disabled-bgcolor;
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
    border-color: $btn-warning-disabled-border-color;
  }
  @else {
    border-color: $btn-disabled-border-color;
  }
  box-shadow: $btn-flat-box-shadow;
  color: $btn-warning-disabled-color;
  @if $skin-name == 'FluentUI' {
    outline: none;
  }
}

@mixin danger-disabled {
  background: $btn-danger-disabled-bgcolor;
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
    border-color: $btn-danger-disabled-border-color;
  }
  @else {
    border-color: $btn-disabled-border-color;
  }
  box-shadow: $btn-flat-box-shadow;
  color: $btn-danger-disabled-color;
  @if $skin-name == 'FluentUI' {
    outline: none;
  }
}

@mixin link-disabled {
  @if $skin-name == 'bootstrap4' {
    color: $btn-bgcolor;
  }
  @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    color: $secondary-border-color-disabled;
    text-decoration: underline;
  }
  @else if $skin-name == 'tailwind3' {
    color: $btn-link-disabled-color;
  }
  @else {
    color: $btn-disabled-color;
  }
  background: $btn-link-disabled-bgcolor;
  box-shadow: $btn-flat-box-shadow;
  text-decoration: none;
  @if $skin-name == 'FluentUI' {
    outline: none;
  }
}

@include export-module('button-theme') {

  /* stylelint-disable property-no-vendor-prefix */
  .e-btn,
  .e-css.e-btn {
    -webkit-tap-highlight-color: transparent;
    background: $btn-bgcolor;
    @if $skin-name == 'Material3' {
      border-image: $btn-border-color;
    }
    @else {
      border-color: $btn-border-color;
    }
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
      box-shadow: $btn-box-shadow;
    }
    color: $btn-color;
    transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
    @at-root {
      &:hover {
        background: $btn-hover-bgcolor;
        @if $skin-name == 'Material3' {
          border-image: $btn-hover-border-color;
        }
        @else {
          border-color: $btn-hover-border-color;
        }
        box-shadow: $btn-hover-focus-box-shadow;
        color: $btn-hover-color;
      }

      &:focus { // both keyboard and focus
        @include button-focus;
      }

      &:focus:not(:focus-visible) { //mouse click
        @include fluent-focus-visible;
      }

      &:focus-visible { // only for keybord
        @if $skin-name == 'FluentUI' {
          background: $btn-focus-bgcolor;
        }
        @if $skin-name == 'Material3' {
          background: $btn-active-bgcolor;
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
        @if $skin-name == 'fluent2' {
          border-color: $btn-keyboard-focus-border-color;
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
        @if $skin-name == 'bootstrap5.3' {
          box-shadow: $btn-focus-box-shadow;
        }
        @if $skin-name == 'tailwind3' {
          background: $btn-bgcolor;
          color: $btn-color;
          box-shadow: $btn-focus-box-shadow;
        }
      }

      &:active {
        @include button-active;
      }

      &.e-active {
        background: $btn-active-bgcolor;
        @if $skin-name == 'Material3' {
          border-image: $btn-active-border-color;
        }
        @else {
          border-color: $btn-active-border-color;
        }
        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
          box-shadow: $btn-active-box-shadow;
        }
        color: $btn-active-color;
        @if $skin-name == 'fluent2' {
          background: $secondary-bg-color-selected; /* stylelint-disable-line declaration-no-important */
          border-color: $secondary-border-color-selected; /* stylelint-disable-line declaration-no-important */
          color: $secondary-text-color-selected; /* stylelint-disable-line declaration-no-important */
        }
      }

      &:disabled,
      &.e-disabled {
        background: $btn-disabled-bgcolor;
        border-color: $btn-disabled-border-color;
        box-shadow: $btn-flat-box-shadow;
        color: $btn-disabled-color;
        @if $skin-name == 'FluentUI' {
          outline: none;
        }
      }

      &.e-disabled {
        @if $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3' {
          opacity: 1;
        }
      }

      & .e-ripple-element {
        background: $btn-ripple-bgcolor;
      }

      &.e-round,
      &.e-round-edge {
        background: $btn-round-bgcolor;
        border-color: $btn-round-border-color;
        color: $btn-round-color;

        &:hover {
          background: $btn-round-hover-bgcolor;
          border-color: $btn-round-hover-border-color;
          color: $btn-round-hover-color;
        }

        &:focus {
          background: $btn-focus-bgcolor;
          @if $skin-name == 'Material3' {
            border-image: $btn-focus-border-color;
          }
          @else {
            border-color: $btn-focus-border-color;
          }
          @if ($skin-name == 'tailwind') {
            box-shadow: $btn-focus-box-shadow;
          }
          @else {
            box-shadow: $btn-box-shadow;
          }
          color: $btn-round-focus-color;
          outline: $btn-focus-outline-round;
          outline-offset: $btn-focus-outline-offset;
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-focus-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            border-color: $btn-keyboard-focus-border-color;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $btn-bgcolor;
            color: $btn-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active {
          background: $btn-active-bgcolor;
          @if $skin-name == 'Material3' {
            border-image: $btn-active-border-color;
          }
          @else {
            border-color: $btn-active-border-color;
          }
          @if ($skin-name == 'tailwind') {
            box-shadow: $btn-focus-box-shadow;
          }
          @else {
            box-shadow: $btn-active-box-shadow;
          }
          color: $btn-round-active-color;
          outline: $btn-active-outline;
          outline-offset: $btn-active-outline-offset;
        }

        &:disabled,
        &.e-disabled {
          background: $btn-disabled-bgcolor;
          border-color: $btn-disabled-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-disabled-color;
        }

        &.e-primary {
          &:hover {
            @if $skin-name != 'fluent2' {
              border-color: $btn-primary-bgcolor;
            }
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-primary-focus-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-primary-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-primary-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-primary-bgcolor;
              color: $btn-primary-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }
        }

        &.e-success {
          &:hover {
            @if $skin-name != 'fluent2' {
              border-color: $btn-success-bgcolor;
            }
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-success-focus-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-success-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-success-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-success-bgcolor;
              color: $btn-success-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }
        }

        &.e-info {
          &:hover {
            @if $skin-name != 'fluent2' {
              border-color: $btn-info-bgcolor;
            }
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-info-focus-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-info-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-info-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-info-bgcolor;
              color: $btn-info-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }
        }

        &.e-warning {
          &:hover {
            @if $skin-name != 'fluent2' {
              border-color: $btn-warning-bgcolor;
            }
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-warning-focus-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-warning-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-warning-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-warning-bgcolor;
              color: $btn-warning-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }
        }

        &.e-danger {
          &:hover {
            @if $skin-name != 'fluent2' {
              border-color: $btn-danger-bgcolor;
            }
          }

          &:focus {
            outline: $btn-focus-outline-round;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-danger-focus-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-danger-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-danger-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-danger-bgcolor;
              color: $btn-danger-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }
        }
      }

      &.e-primary {
        background: $btn-primary-bgcolor;
        border-color: $btn-primary-border-color;
        color: $btn-primary-color;
        @if $skin-name == 'Material3' {
          box-shadow: $btn-focus-box-shadow;
        }

        &:hover {
          background: $btn-primary-hover-bgcolor;
          @if $skin-name != 'Material3' {
            border-color: $btn-primary-hover-border-color;
          }
          @if $skin-name == 'Material3' {
            box-shadow: $btn-primary-focus-box-shadow;
          }
          @else {
            box-shadow: $btn-hover-focus-box-shadow;
          }
          color: $btn-primary-hover-color;
        }

        &:focus {
          @include primary-focus;
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-primary-focus-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-primary-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            box-shadow: $btn-primary-focus-box-shadow;
            border-color: $btn-keyboard-focus-border-color;
            background-color: $primary-bg-color-focus;
          }
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $btn-primary-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $btn-primary-bgcolor;
            color: $btn-primary-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active {
          @include primary-active;
        }

        &.e-active {
          background: $btn-primary-active-bgcolor;
          border-color: $btn-primary-active-border-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(color.mix(color.adjust($btn-primary-focus-bgcolor, $lightness: 50%), $btn-primary-focus-border-color, 15%), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
            box-shadow: $btn-active-box-shadow;
          }
          color: $btn-primary-active-color;
          @if $skin-name == 'fluent2' {
            background: $primary-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
            border-color: $primary-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            color: $primary-text-selected !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:disabled,
        &.e-disabled {
          @include primary-disabled;
        }

        & .e-ripple-element {
          background: $btn-ripple-primary-bgcolor;
        }
      }

      &.e-success {
        background: $btn-success-bgcolor;
        border-color: $btn-success-border-color;
        color: $btn-success-color;
        @if $skin-name == 'Material3' {
          box-shadow: $btn-focus-box-shadow;
        }

        &:hover {
          background: $btn-success-hover-bgcolor;
          @if $skin-name != 'Material3' {
            border-color: $btn-success-hover-border-color;
          }
          @if $skin-name == 'Material3' {
            box-shadow: $btn-primary-focus-box-shadow;
          }
          @else {
            box-shadow: $btn-hover-focus-box-shadow;
          }
          color: $btn-success-hover-color;
        }

        &:focus {
          @include success-focus;
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-success-focus-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-success-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            border-color: $btn-keyboard-focus-border-color;
            box-shadow: $btn-success-focus-box-shadow;
            background-color: $success-bg-color-focus;
            color: $success-text-focus;
          }
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $btn-success-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $btn-success-bgcolor;
            color: $btn-success-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include success-active;
        }

        &.e-active {
          @if $skin-name == 'fluent2' {
            background: $success-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
            border-color: $success-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            color: $success-text-pressed !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:disabled,
        &.e-disabled {
          @include success-disabled;
        }

        & .e-ripple-element {
          background: $btn-ripple-success-bgcolor;
        }
      }

      &.e-info {
        background: $btn-info-bgcolor;
        border-color: $btn-info-border-color;
        color: $btn-info-color;
        @if $skin-name == 'Material3' {
          box-shadow: $btn-focus-box-shadow;
        }

        &:hover {
          background: $btn-info-hover-bgcolor;
          @if $skin-name != 'Material3' {
            border-color: $btn-info-hover-border-color;
          }
          @if $skin-name == 'Material3' {
            box-shadow: $btn-primary-focus-box-shadow;
          }
          @else {
            box-shadow: $btn-hover-focus-box-shadow;
          }
          color: $btn-info-hover-color;
        }

        &:focus {
          @include info-focus;
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-info-focus-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-info-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            border-color: $btn-keyboard-focus-border-color;
            box-shadow: $btn-info-focus-box-shadow;
            background-color: $info-bg-color-focus;
          }
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $btn-info-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $btn-info-bgcolor;
            color: $btn-info-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include info-active;
        }

        &.e-active {
          @if $skin-name == 'fluent2' {
            background: $info-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
            border-color: $info-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            color: $btn-info-active-color !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:disabled,
        &.e-disabled {
          @include info-disabled;
        }

        & .e-ripple-element {
          background: $btn-ripple-info-bgcolor;
        }
      }

      &.e-warning {
        background: $btn-warning-bgcolor;
        border-color: $btn-warning-border-color;
        color: $btn-warning-color;
        @if $skin-name == 'Material3' {
          box-shadow: $btn-focus-box-shadow;
        }

        &:hover {
          background: $btn-warning-hover-bgcolor;
          @if $skin-name != 'Material3' {
            border-color: $btn-warning-hover-border-color;
          }
          @if $skin-name == 'Material3' {
            box-shadow: $btn-primary-focus-box-shadow;
          }
          @else {
            box-shadow: $btn-hover-focus-box-shadow;
          }
          color: $btn-warning-hover-color;
        }

        &:focus {
          @include warning-focus;
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-warning-focus-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-warning-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            border-color: $btn-keyboard-focus-border-color;
            box-shadow: $btn-warning-focus-box-shadow;
            background-color: $warning-bg-color-focus;
          }
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $btn-warning-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $btn-warning-bgcolor;
            color: $btn-warning-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include warning-active;
        }

        &.e-active {
          @if $skin-name == 'fluent2' {
            background: $warning-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
            border-color: $warning-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            color: $btn-warning-active-color !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:disabled,
        &.e-disabled {
          @include warning-disabled;
        }

        & .e-ripple-element {
          background: $btn-ripple-warning-bgcolor;
        }
      }

      &.e-danger {
        background: $btn-danger-bgcolor;
        border-color: $btn-danger-border-color;
        color: $btn-danger-color;
        @if $skin-name == 'Material3' {
          box-shadow: $btn-focus-box-shadow;
        }

        &:hover {
          background: $btn-danger-hover-bgcolor;
          @if $skin-name != 'Material3' {
            border-color: $btn-danger-hover-border-color;
          }
          @if $skin-name == 'Material3' {
            box-shadow: $btn-primary-focus-box-shadow;
          }
          @else {
            box-shadow: $btn-hover-focus-box-shadow;
          }
          color: $btn-danger-hover-color;
        }

        &:focus {
          @include danger-focus;
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-danger-focus-bgcolor;
          }
          @if $skin-name == 'Material3' {
            background: $btn-danger-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            border-color: $btn-keyboard-focus-border-color;
            box-shadow: $btn-danger-focus-box-shadow;
            background-color: $danger-bg-color-focus;
            color: $danger-text-focus;
          }
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $btn-danger-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $btn-danger-bgcolor;
            color: $btn-danger-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active {
          @include danger-active;
        }

        &.e-active {
          background: $btn-danger-active-bgcolor;
          border-color: $btn-danger-active-border-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(color.mix(color.adjust($btn-primary-focus-bgcolor, $lightness: 50%), $btn-primary-focus-border-color, 15%), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
            box-shadow: $btn-active-box-shadow;
          }
          color: $btn-danger-active-color;
          @if $skin-name == 'fluent2' {
            background: $danger-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
            border-color: $danger-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            color: $danger-text-pressed !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &:disabled,
        &.e-disabled {
          @include danger-disabled;
        }

        & .e-ripple-element {
          background: $btn-ripple-danger-bgcolor;
        }
      }

      &.e-flat {
        background: $btn-flat-bgcolor;
        border-color: $btn-flat-border-color;
        box-shadow: $btn-flat-box-shadow;
        color: $btn-flat-color;

        &:hover {
          background: $btn-flat-hover-bgcolor;
          border-color: $btn-flat-hover-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-flat-hover-color;
        }

        &:focus {
          background: $btn-flat-focus-bgcolor;
          border-color: $btn-flat-focus-border-color;
          color: $btn-flat-focus-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(color.mix(color.adjust($btn-flat-focus-bgcolor, $lightness: 50%), $btn-flat-focus-border-color, 15%), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
            box-shadow: $btn-focus-box-shadow;
          }
          @else if $skin-name != 'bootstrap5.3' {
            box-shadow: $btn-flat-box-shadow;
          }
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'Material3' {
            background: $btn-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            border-color: $btn-keyboard-focus-border-color;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $btn-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $btn-bgcolor;
            color: $btn-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          background: $btn-flat-active-bgcolor;
          border-color: $btn-flat-active-border-color;
          color: $btn-flat-active-color;
          @if $skin-name == 'bootstrap4' {
            $color-rgba: rgba(color.mix(color.adjust($btn-flat-active-bgcolor, $lightness: 50%), $btn-flat-active-border-color, 15%), .5);
            box-shadow: 0 0 0 .25em $color-rgba;
          }
          @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
            box-shadow: $btn-flat-active-box-shadow;
          }
        }

        &:disabled,
        &.e-disabled {
          background: $btn-flat-disabled-bgcolor;
          border-color: $btn-flat-disabled-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-flat-disabled-color;
        }

        & .e-ripple-element {
          background: $btn-ripple-flat-bgcolor;
        }

        &.e-primary {
          background: $btn-flat-primary-bgcolor;
          border-color: $btn-flat-primary-border-color;
          color: $btn-flat-primary-color;

          &:hover {
            background: $btn-flat-primary-hover-bgcolor;
            border-color: $btn-flat-primary-hover-border-color;
            color: $btn-flat-primary-hover-color;
          }

          &:focus {
            background: $btn-flat-primary-focus-bgcolor;
            border-color: $btn-flat-primary-focus-border-color;
            color: $btn-flat-primary-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-primary-focus-bgcolor, $lightness: 50%), $btn-flat-primary-focus-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if ($skin-name == 'tailwind') {
              box-shadow: $btn-focus-box-shadow;
            }
            @else if ($skin-name == 'bootstrap5') {
              box-shadow: $btn-primary-focus-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'Material3' {
              background: $btn-primary-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-primary-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-primary-focus-box-shadow;
              background-color: $primary-bg-color-focus;
            }
            @if $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-primary-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-primary-bgcolor;
              color: $btn-primary-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background: $btn-flat-primary-active-bgcolor;
            border-color: $btn-flat-primary-active-border-color;
            color: $btn-flat-primary-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-primary-active-bgcolor, $lightness: 50%), $btn-flat-primary-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
          }

          &:disabled,
          &.e-disabled {
            background: $btn-flat-primary-disabled-bgcolor;
            border-color: $btn-flat-primary-disabled-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-primary-disabled-color;
          }

          & .e-ripple-element {
            background: $btn-ripple-flat-primary-bgcolor;
          }
        }

        &.e-success {
          background: $btn-flat-success-bgcolor;
          border-color: $btn-flat-success-border-color;
          color: $btn-flat-success-color;

          &:hover {
            background: $btn-flat-success-hover-bgcolor;
            border-color: $btn-flat-success-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-success-hover-color;
          }

          &:focus {
            background: $btn-flat-success-focus-bgcolor;
            border-color: $btn-flat-success-focus-border-color;
            color: $btn-flat-success-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-success-focus-bgcolor, $lightness: 50%), $btn-flat-success-focus-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if ($skin-name == 'tailwind') {
              box-shadow: $btn-focus-box-shadow;
            }
            @else if ($skin-name == 'bootstrap5') {
              box-shadow: $btn-success-focus-box-shadow;
            }
            @else if $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'Material3' {
              background: $btn-success-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-success-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-success-focus-box-shadow;
              background-color: $success-bg-color-focus;
              color: $success-text-focus;
            }
            @if $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-success-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-success-bgcolor;
              color: $btn-success-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background: $btn-flat-success-active-bgcolor;
            border-color: $btn-flat-success-active-border-color;
            color: $btn-flat-success-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-success-active-bgcolor, $lightness: 50%), $btn-flat-success-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled,
          &.e-disabled {
            background: $btn-flat-success-disabled-bgcolor;
            border-color: $btn-flat-success-disabled-border-color;
            color: $btn-flat-success-disabled-color;
          }

          & .e-ripple-element {
            background: $btn-ripple-flat-success-bgcolor;
          }
        }

        &.e-info {
          background: $btn-flat-info-bgcolor;
          border-color: $btn-flat-info-border-color;
          color: $btn-flat-info-color;

          &:hover {
            background: $btn-flat-info-hover-bgcolor;
            border-color: $btn-flat-info-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-info-hover-color;
          }

          &:focus {
            background: $btn-flat-info-focus-bgcolor;
            border-color: $btn-flat-info-focus-border-color;
            color: $btn-flat-info-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-info-focus-bgcolor, $lightness: 50%), $btn-flat-info-focus-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if ($skin-name == 'tailwind') {
              box-shadow: $btn-focus-box-shadow;
            }
            @else if ($skin-name == 'bootstrap5') {
              box-shadow: $btn-info-focus-box-shadow;
            }
            @else if $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'Material3' {
              background: $btn-info-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-info-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-info-focus-box-shadow;
              background-color: $info-bg-color-focus;
            }
            @if $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-info-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-info-bgcolor;
              color: $btn-info-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background: $btn-flat-info-active-bgcolor;
            border-color: $btn-flat-info-active-border-color;
            color: $btn-flat-info-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-info-active-bgcolor, $lightness: 50%), $btn-flat-info-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled,
          &.e-disabled {
            background: $btn-flat-info-disabled-bgcolor;
            border-color: $btn-flat-info-disabled-border-color;
            color: $btn-flat-info-disabled-color;
          }

          & .e-ripple-element {
            background: $btn-ripple-flat-info-bgcolor;
          }
        }

        &.e-warning {
          background: $btn-flat-warning-bgcolor;
          border-color: $btn-flat-warning-border-color;
          color: $btn-flat-warning-color;

          &:hover {
            background: $btn-flat-warning-hover-bgcolor;
            border-color: $btn-flat-warning-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-warning-hover-color;
          }

          &:focus {
            background: $btn-flat-warning-focus-bgcolor;
            border-color: $btn-flat-warning-focus-border-color;
            color: $btn-flat-warning-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-warning-focus-bgcolor, $lightness: 50%), $btn-flat-warning-focus-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if ($skin-name == 'tailwind') {
              box-shadow: $btn-focus-box-shadow;
            }
            @else if ($skin-name == 'bootstrap5') {
              box-shadow: $btn-warning-focus-box-shadow;
            }
            @else if $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'Material3' {
              background: $btn-warning-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-warning-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-warning-focus-box-shadow;
              background-color: $warning-bg-color-focus;
            }
            @if $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-warning-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-warning-bgcolor;
              color: $btn-warning-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background: $btn-flat-warning-active-bgcolor;
            border-color: $btn-flat-warning-active-border-color;
            color: $btn-flat-warning-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-warning-active-bgcolor, $lightness: 50%), $btn-flat-warning-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled,
          &.e-disabled {
            background: $btn-flat-warning-disabled-bgcolor;
            border-color: $btn-flat-warning-disabled-border-color;
            color: $btn-flat-warning-disabled-color;
          }

          & .e-ripple-element {
            background: $btn-ripple-flat-warning-bgcolor;
          }
        }

        &.e-danger {
          background: $btn-flat-danger-bgcolor;
          border-color: $btn-flat-danger-border-color;
          color: $btn-flat-danger-color;

          &:hover {
            background: $btn-flat-danger-hover-bgcolor;
            border-color: $btn-flat-danger-hover-border-color;
            box-shadow: $btn-flat-box-shadow;
            color: $btn-flat-danger-hover-color;
          }

          &:focus {
            background: $btn-flat-danger-focus-bgcolor;
            border-color: $btn-flat-danger-focus-border-color;
            color: $btn-flat-danger-focus-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-danger-focus-bgcolor, $lightness: 50%), $btn-flat-danger-focus-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if ($skin-name == 'tailwind') {
              box-shadow: $btn-focus-box-shadow;
            }
            @else if ($skin-name == 'bootstrap5') {
              box-shadow: $btn-danger-focus-box-shadow;
            }
            @else if $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-box-shadow;
            }
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'Material3' {
              background: $btn-danger-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-danger-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-danger-focus-box-shadow;
              background-color: $danger-bg-color-focus;
              color: $danger-text-focus;
            }
            @if $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-danger-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $btn-danger-bgcolor;
              color: $btn-danger-color;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            background: $btn-flat-danger-active-bgcolor;
            border-color: $btn-flat-danger-active-border-color;
            color: $btn-flat-danger-active-color;
            @if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-flat-danger-active-bgcolor, $lightness: 50%), $btn-flat-danger-active-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba;
            }
            @else if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
              box-shadow: $btn-flat-active-box-shadow;
            }
          }

          &:disabled,
          &.e-disabled {
            background: $btn-flat-danger-disabled-bgcolor;
            border-color: $btn-flat-danger-disabled-border-color;
            color: $btn-flat-danger-disabled-color;
          }

          & .e-ripple-element {
            background: $btn-ripple-flat-danger-bgcolor;
          }
        }
      }

      &.e-outline {
        background: $btn-outline-bgcolor;
        border-color: $btn-outline-border-color;
        box-shadow: $btn-flat-box-shadow;
        color: $btn-outline-color;
        @if $skin-name == 'Material3' {
          border: 1px solid;
        }

        &:hover {
          @if $skin-name == 'bootstrap4' {
            background: $btn-bgcolor;
          }
          @else {
            background: $btn-outline-hover-bgcolor;
          }
          border-color: $btn-outline-hover-border-color;
          box-shadow: $btn-flat-box-shadow;
          color: $btn-outline-hover-color;
        }

        &:focus {
          @include outline-focus;
        }

        &:focus:not(:focus-visible) { //mouse click
          @include fluent-focus-visible;
          @if $skin-name == 'fluent2' {
            background: transparent;
            border-color: $secondary-border-color-hover;
            color: $secondary-outline-button-text-color-pressed;
          }

          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            background: $btn-outline-active-bgcolor;
            color: $btn-outline-active-color;
          }
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'FluentUI' {
            background: $btn-outline-bgcolor;
          }

          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            box-shadow: $btn-focus-box-shadow;
          }
          @if $skin-name == 'bootstrap5.3' {
            background-color: $secondary-bg-color-focus;
            color: $secondary-text-color-focus;
          }
          @if $skin-name == 'Material3' {
            background: $btn-active-bgcolor;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            border-color: $btn-keyboard-focus-border-color;
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $transparent;
            color: $btn-color;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &:active,
        &.e-active {
          @include outline-active;
          @if $skin-name == 'fluent2' {
            background: transparent;
            color: $secondary-outline-button-text-color-pressed !important; /* stylelint-disable-line declaration-no-important */
            border-color: $btn-outline-active-border-color !important; /* stylelint-disable-line declaration-no-important */
            outline: 2px solid $secondary-outline-button-text-color-pressed;
          }
        }

        &.e-active {
          @if $skin-name == 'fluent2' {
            background: transparent !important; /* stylelint-disable-line declaration-no-important */
            border-color: $btn-outline-active-border-color !important; /* stylelint-disable-line declaration-no-important */
            outline: 2px solid $secondary-outline-button-text-color-pressed;
          }
        }

        &:disabled,
        &.e-disabled {
          @include outline-disabled;
        }

        &.e-primary {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'Material3' {
            border: 1px solid $btn-outline-border-color;
            color: rgba($btn-outline-primary-color);
          }
          @else {
            border-color: $btn-outline-primary-color;
            color: $btn-outline-primary-color;
          }

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background: $btn-primary-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-outline-primary-hover-bgcolor;
              border: 1px solid $btn-outline-border-color;
              color: rgba($btn-outline-primary-color);
            }
            @else if $skin-name == 'fluent2' {
              background: $btn-outline-success-hover-bgcolor;
              border-color: $btn-outline-primary-hover-border-color;
              color: $btn-primary-hover-bgcolor;
            }
            @else {
              background: $btn-primary-hover-bgcolor;
              border-color: $btn-outline-primary-hover-border-color;
              color: $btn-primary-hover-color;
            }
          }

          &:focus {
            @include outline-primary-focus;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
            @if $skin-name == 'fluent2' {
              background: transparent;
              border-color: $primary-border-color-hover;
              color: $primary-border-color-hover;
            }

            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              background: $btn-outline-primary-focus-bgcolor;
              color: $btn-outline-active-color;
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }

            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-primary-focus-box-shadow;
            }
            @if $skin-name == 'bootstrap5.3' {
              background-color: $primary-bg-color-focus;
              color: $primary-text-color;
            }
            @if $skin-name == 'Material3' {
              background: $btn-primary-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-primary-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-primary-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $transparent;
              color: $btn-primary-bgcolor;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            @include outline-primary-active;
            @if $skin-name == 'fluent2' {
              background: transparent;
              color: $primary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
              border-color: $btn-outline-primary-active-border-color !important; /* stylelint-disable-line declaration-no-important */
              outline: 2px solid $primary-bg-color-pressed;
            }
          }

          &.e-active {
            @if $skin-name == 'fluent2' {
              background: transparent !important; /* stylelint-disable-line declaration-no-important */
              color: $primary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
              border-color: $btn-outline-primary-active-border-color !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:disabled,
          &.e-disabled {
            @include outline-primary-disabled;
          }
        }

        &.e-success {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
            border-color: $success-outline;
            color: $success-outline;
          }
          @if $skin-name == 'Material3' {
            border: 1px solid $btn-outline-border-color;
            color: rgba($btn-outline-success-color);
          }
          @else {
            border-color: $btn-success-bgcolor;
            color: $btn-success-bgcolor;
          }

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background: $btn-success-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-outline-success-hover-bgcolor;
              border: 1px solid $btn-outline-border-color;
              color: rgba($btn-outline-success-color);
            }
            @else if $skin-name == 'fluent2' {
              background: $btn-outline-success-hover-bgcolor;
              border-color: $btn-success-hover-border-color;
              color: $btn-success-hover-bgcolor;
            }
            @else {
              background: $btn-success-hover-bgcolor;
              border-color: $btn-success-hover-border-color;
              color: $btn-success-color;
            }
          }

          &:focus {
            @include outline-success-focus;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
            @if $skin-name == 'fluent2' {
              background: transparent;
              border-color: $success-border-color-hover;
              color: $success-border-color-hover;
            }

            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              background: $btn-success-bgcolor;
              color: $btn-success-color;
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-success-focus-box-shadow;
            }
            @if $skin-name == 'bootstrap5.3' {
              background-color: $success-bg-color-focus;
              color: $success-text-focus;
            }
            @if $skin-name == 'Material3' {
              background: $btn-success-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-success-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-success-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $transparent;
              color: $btn-success-bgcolor;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            @include outline-success-active;
            @if $skin-name == 'fluent2' {
              background: transparent;
              color: $success-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
              border-color: $btn-success-active-border-color !important; /* stylelint-disable-line declaration-no-important */
              outline: 2px solid $success-bg-color-pressed;
            }
          }

          &.e-active {
            @if $skin-name == 'fluent2' {
              background: transparent !important; /* stylelint-disable-line declaration-no-important */
              border-color: $success-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:disabled,
          &.e-disabled {
            @include outline-success-disabled;
          }
        }

        &.e-info {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
            border-color: $info-outline;
            color: $info-outline;
          }
          @if $skin-name == 'Material3' {
            border: 1px solid $btn-outline-border-color;
            color: rgba($btn-outline-info-color);
          }
          @else {
            border-color: $btn-info-bgcolor;
            color: $btn-info-bgcolor;
          }

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background: $btn-info-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-outline-info-hover-bgcolor;
              border: 1px solid $btn-outline-border-color;
              color: rgba($btn-outline-info-color);
            }
            @else if $skin-name == 'fluent2' {
              background: $btn-outline-info-hover-bgcolor;
              border-color: $btn-info-hover-border-color;
              color: $btn-info-hover-bgcolor;
            }
            @else {
              background: $btn-info-hover-bgcolor;
              border-color: $btn-info-hover-border-color;
              color: $btn-info-color;
            }
          }

          &:focus {
            @include outline-info-focus;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
            @if $skin-name == 'fluent2' {
              background: transparent;
              border-color: $info-bg-color-hover;
              color: $info-bg-color-hover;
            }

            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              background: $btn-info-bgcolor;
              color: $btn-info-color;
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-info-focus-box-shadow;
            }
            @if $skin-name == 'bootstrap5.3' {
              background-color: $info-bg-color-focus;
              color: $info-text-focus;
            }
            @if $skin-name == 'Material3' {
              background: $btn-info-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-info-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-info-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $transparent;
              color: $btn-info-bgcolor;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            @include outline-info-active;
            @if $skin-name == 'fluent2' {
              background: transparent;
              color: $info-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
              border-color: $btn-info-active-border-color !important; /* stylelint-disable-line declaration-no-important */
              outline: 2px solid $info-bg-color-pressed;
            }
          }

          &.e-active {
            @if $skin-name == 'fluent2' {
              background: transparent !important; /* stylelint-disable-line declaration-no-important */
              border-color: $info-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:disabled,
          &.e-disabled {
            @include outline-info-disabled;
          }
        }

        &.e-warning {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
            border-color: $warning-outline;
            color: $warning-outline;
          }
          @if $skin-name == 'Material3' {
            border: 1px solid $btn-outline-border-color;
            color: rgba($btn-outline-warning-color);
          }
          @else {
            border-color: $btn-warning-bgcolor;
            color: $btn-warning-bgcolor;
          }

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background: $btn-warning-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-outline-warning-hover-bgcolor;
              border: 1px solid $btn-outline-border-color;
              color: rgba($btn-outline-warning-color);
            }
            @else if $skin-name == 'fluent2' {
              background: $btn-outline-warning-hover-bgcolor;
              border-color: $btn-warning-hover-border-color;
              color: $btn-warning-hover-bgcolor;
            }
            @else {
              background: $btn-warning-hover-bgcolor;
              border-color: $btn-warning-hover-border-color;
              color: $btn-warning-color;
            }
          }

          &:focus {
            @include outline-warning-focus;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
            @if $skin-name == 'fluent2' {
              background: transparent;
              border-color: $warning-border-color-hover;
              color: $warning-border-color-hover;
            }

            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              background: $btn-warning-bgcolor;
              color: $btn-warning-color;
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-warning-focus-box-shadow;
            }
            @if $skin-name == 'bootstrap5.3' {
              background-color: $warning-bg-color-focus;
              color: $warning-text-focus;
            }
            @if $skin-name == 'Material3' {
              background: $btn-warning-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-warning-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-warning-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $transparent;
              color: $btn-warning-bgcolor;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            @include outline-warning-active;
            @if $skin-name == 'fluent2' {
              background: transparent;
              color: $warning-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
              border-color: $btn-warning-active-border-color !important; /* stylelint-disable-line declaration-no-important */
              outline: 2px solid $warning-bg-color-pressed;
            }
          }

          &.e-active {
            @if $skin-name == 'fluent2' {
              background: transparent !important; /* stylelint-disable-line declaration-no-important */
              border-color: $warning-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:disabled,
          &.e-disabled {
            @include outline-warning-disabled;
          }
        }

        &.e-danger {
          background: $btn-outline-bgcolor;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
            border-color: $danger-outline;
            color: $danger-outline;
          }
          @if $skin-name == 'Material3' {
            border: 1px solid $btn-outline-border-color;
            color: rgba($btn-outline-danger-color);
          }
          @else {
            border-color: $btn-danger-bgcolor;
            color: $btn-danger-bgcolor;
          }

          &:hover {
            @if $skin-name == 'bootstrap4' {
              background: $btn-danger-bgcolor;
            }
            @if $skin-name == 'Material3' {
              background: $btn-outline-danger-hover-bgcolor;
              border: 1px solid $btn-outline-border-color;
              color: rgba($btn-outline-danger-color);
            }
            @if $skin-name == 'fluent2' {
              background: $btn-outline-danger-hover-bgcolor;
              border-color: $btn-danger-hover-border-color;
              color: $btn-danger-hover-bgcolor;
            }
            @else {
              background: $btn-danger-hover-bgcolor;
              border-color: $btn-danger-hover-border-color;
              color: $btn-danger-color;
            }
          }

          &:focus {
            @include outline-danger-focus;
          }

          &:focus:not(:focus-visible) { //mouse click
            @include fluent-focus-visible;
            @if $skin-name == 'fluent2' {
              background: transparent;
              border-color: $danger-border-color-hover;
              color: $danger-border-color-hover;
            }

            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              background: $btn-danger-bgcolor;
              color: $btn-danger-color;
            }
          }

          &:focus-visible { // only for keybord
            @if $skin-name == 'FluentUI' {
              background: $btn-outline-bgcolor;
            }
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              box-shadow: $btn-danger-focus-box-shadow;
            }
            @if $skin-name == 'bootstrap5.3' {
              background-color: $danger-bg-color-focus;
              color: $danger-text-focus;
            }
            @if $skin-name == 'Material3' {
              background: $btn-danger-active-bgcolor;
              box-shadow: $btn-keyboard-focus-box-shadow;
              color: $btn-danger-color;
            }
            @if $skin-name == 'fluent2' {
              border-color: $btn-keyboard-focus-border-color;
              box-shadow: $btn-danger-focus-box-shadow;
            }
            @if $skin-name == 'tailwind3' {
              background: $transparent;
              color: $btn-danger-bgcolor;
              box-shadow: $btn-focus-box-shadow;
            }
          }

          &:active,
          &.e-active {
            @include outline-danger-active;
            @if $skin-name == 'fluent2' {
              background: transparent;
              color: $danger-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
              border-color: $btn-danger-active-border-color !important; /* stylelint-disable-line declaration-no-important */
              outline: 2px solid $danger-bg-color-pressed;
            }
          }

          &.e-active {
            @if $skin-name == 'fluent2' {
              background: transparent !important; /* stylelint-disable-line declaration-no-important */
              border-color: $danger-border-color-selected !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:disabled,
          &.e-disabled {
            @include outline-danger-disabled;
          }
        }
      }

      &.e-link {
        background: $btn-link-bgcolor;
        border-color: $btn-link-border-color;
        border-radius: 0;
        box-shadow: none;
        color: $btn-link-color;

        &:hover {
          @include link-hover;
        }

        &:focus {
          @include link-focus;
        }

        &:focus:not(:focus-visible) {
          outline: none !important; /* stylelint-disable-line declaration-no-important */
        }

        &:focus-visible { // only for keybord
          @if $skin-name == 'Material3' {
            box-shadow: $btn-keyboard-focus-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            text-decoration-color: $btn-link-focus-underline-color !important; /* stylelint-disable-line declaration-no-important */
            text-decoration: underline;
            text-decoration-style: double;
          }
        }

        &:active,
        &.e-active {
          @if $skin-name == 'tailwind3' {
            color: $btn-link-active-color;
            text-decoration: underline;
          }
        }

        &:disabled {
          @include link-disabled;
        }
      }

      &.e-inherit {
        color: inherit;
        background: inherit;
        border-color: transparent;
        box-shadow: none;

        &:hover,
        &:focus,
        &:active,
        &.e-active {
          background: rgba(transparent, .056);
          border-color: transparent;
          box-shadow: none;
          color: inherit;
          outline: none;
        }

        &:disabled {
          background: inherit;
          color: inherit;
          border-color: transparent;
          box-shadow: none;
          opacity: .5;
        }
      }
    }
  }
}

@if $skin-name == 'bootstrap5.3' {
  .e-btn:not(.e-outline) {
    &:disabled,
    &.e-disabled {
      border-color: transparent !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

@mixin icon-left-right {
  @if $skin-name == 'bootstrap4' {
    padding: $btn-zero-padding $btn-bigger-icon-top-bottom-padding;
  }
  @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
    line-height: $btn-zero-line-height;
  }
}

@mixin mat3-border-radius {
  @if $skin-name == 'Material3' {
    border-radius: $btn-bgr-mat3-border-radius;
  }
}

@mixin top-bottom-icon-btn {
  line-height: $btn-top-bottom-icon-line-height;
}

@include export-module('button-bigger') {
  .e-bigger.e-small .e-btn,
  .e-bigger .e-small.e-btn,
  .e-bigger.e-small .e-css.e-btn,
  .e-bigger .e-small.e-css.e-btn {
    font-size: $btn-bigger-small-font-size;
    line-height: $btn-bigger-small-text-line-height;
    padding: $btn-bigger-small-padding;
    @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
      border-radius: $btn-bgr-tail-border-radius;
    }

    &.e-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: $btn-bgr-mat3-round-border-radius;
        padding: $btn-bigger-small-padding;
      }
    }

    & .e-btn-icon {
      font-size: $btn-bigger-small-icon-font-size;
      width: $btn-icon-bigger-small-width;

      &.e-icon-left {
        margin-left: $btn-bigger-small-icon-margin;
        width: $btn-bigger-small-icon-width;
        @include icon-left-right;
      }

      &.e-icon-right {
        margin-right: $btn-bigger-small-icon-margin;
        width: $btn-bigger-small-icon-width;
        @include icon-left-right;
      }

      &.e-icon-top {
        padding-bottom: $btn-small-icon-top-bottom-padding;
        width: $btn-auto-width;
      }

      &.e-icon-bottom {
        padding-top: $btn-small-icon-top-bottom-padding;
        width: $btn-auto-width;
      }
    }

    &.e-icon-btn {
      padding: $btn-bigger-small-icon-padding;
      @if $skin-name == 'fluent2' {
        line-height: $btn-bgr-icon-line-height;
      }
      @include mat3-border-radius;
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-bigger-padding;
    }

    &.e-round {
      height: $btn-round-bigger-small-height;
      line-height: $btn-round-line-height;
      padding: $btn-zero-padding;
      width: $btn-round-bigger-small-width;

      & .e-btn-icon {
        font-size: $btn-bigger-small-round-font-size;
        line-height: $btn-bigger-small-round-icon-line-height;
        width: $btn-auto-width;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-bigger-small-icon-margin;
        margin-right: $btn-zero-padding;
      }

      & .e-icon-left {
        margin-left: $btn-zero-padding;
        margin-right: $btn-bigger-small-icon-margin;
      }
    }
  }

  .e-bigger .e-btn,
  .e-bigger.e-btn,
  .e-bigger .e-css.e-btn,
  .e-bigger.e-css.e-btn {
    font-size: $btn-bigger-font-size;
    line-height: $btn-bigger-text-line-height;
    padding: $btn-bigger-padding;
    @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
      border-radius: $btn-bgr-tail-border-radius;
    }
    @else if $skin-name == 'bootstrap5.3' {
      border-radius: $btn-bigger-border-radius;
    }

    &.e-round-corner {
      @if $skin-name == 'Material3' {
        border-radius: $btn-bgr-mat3-round-border-radius;
        padding: $btn-bigger-padding;
      }
    }

    & .e-btn-icon {
      font-size: $btn-bigger-icon-font-size;
      width: $btn-icon-bigger-width;

      &.e-icon-left {
        margin-left: $btn-bigger-icon-margin;
        width: $btn-bigger-icon-width;
        @include icon-left-right;
      }

      &.e-icon-right {
        margin-right: $btn-bigger-icon-margin;
        width: $btn-bigger-icon-width;
        @include icon-left-right;
      }

      &.e-icon-top {
        padding-bottom: $btn-bigger-icon-top-bottom-padding;
        width: $btn-auto-width;
      }

      &.e-icon-bottom {
        padding-top: $btn-bigger-icon-top-bottom-padding;
        width: $btn-auto-width;
      }
    }

    &.e-icon-btn {
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        line-height: $btn-icon-bgr-line-height;
      }
      @if $skin-name == 'highcontrast' {
        padding: 3px 11px;
      }
      @include mat3-border-radius;
    }

    &.e-top-icon-btn,
    &.e-bottom-icon-btn {
      @include top-bottom-icon-btn;
      padding: $btn-top-icon-bigger-padding;
    }

    &.e-round {
      height: $btn-round-bigger-height;
      line-height: $btn-round-line-height;
      padding: $btn-zero-padding;
      width: $btn-round-bigger-width;
      @if $skin-name == 'tailwind' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' {
        border-radius: $btn-round-border-radius;
      }

      & .e-btn-icon {
        font-size: $btn-bigger-round-font-size;
        line-height: $btn-bigger-round-icon-line-height;
        width: $btn-auto-width;
      }
    }

    &.e-rtl {
      & .e-icon-right {
        margin-left: $btn-bigger-icon-margin;
        margin-right: $btn-zero-padding;
      }

      & .e-icon-left {
        margin-left: $btn-zero-padding;
        margin-right: $btn-bigger-icon-margin;
      }
    }

    &.e-small {
      font-size: $btn-bigger-small-font-size;
      line-height: $btn-bigger-small-text-line-height;
      padding: $btn-bigger-small-padding;
      @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
        border-radius: 2px;
      }
      @else if $skin-name == 'bootstrap5.3' {
        border-radius: $btn-bigger-border-radius;
      }

      &.e-round-corner {
        @if $skin-name == 'Material3' {
          border-radius: $btn-bgr-mat3-round-border-radius;
          padding: $btn-bigger-small-padding;
        }
      }

      & .e-btn-icon {
        font-size: $btn-bigger-small-icon-font-size;
        width: $btn-icon-bigger-small-width;

        &.e-icon-left {
          margin-left: $btn-bigger-small-icon-margin;
          width: $btn-bigger-small-icon-width;
          @include icon-left-right;
        }

        &.e-icon-right {
          margin-right: $btn-bigger-small-icon-margin;
          width: $btn-bigger-small-icon-width;
          @include icon-left-right;
        }

        &.e-icon-top {
          padding-bottom: $btn-small-icon-top-bottom-padding;
          width: $btn-auto-width;
        }

        &.e-icon-bottom {
          padding-top: $btn-small-icon-top-bottom-padding;
          width: $btn-auto-width;
        }
      }

      &.e-icon-btn {
        padding: $btn-bigger-small-icon-padding;
        @include mat3-border-radius;
      }

      &.e-top-icon-btn,
      &.e-bottom-icon-btn {
        @include top-bottom-icon-btn;
        padding: $btn-top-icon-bigger-padding;
      }

      &.e-round {
        height: $btn-round-bigger-small-height;
        line-height: $btn-round-line-height;
        padding: $btn-zero-padding;
        width: $btn-round-bigger-small-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
          border-radius: $btn-round-border-radius;
        }

        & .e-btn-icon {
          font-size: $btn-bigger-small-round-font-size;
          line-height: $btn-bigger-small-round-icon-line-height;
          width: $btn-auto-width;
        }
      }

      &.e-rtl {
        & .e-icon-right {
          margin-left: $btn-bigger-small-icon-margin;
          margin-right: $btn-zero-padding;
        }

        & .e-icon-left {
          margin-left: $btn-zero-padding;
          margin-right: $btn-bigger-small-icon-margin;
        }
      }
    }
  }

  @if $skin-name == 'fluent2' {
    .e-bigger.e-small .e-btn.e-icon-btn .e-btn-icon,
    .e-bigger .e-btn.e-icon-btn .e-btn-icon {
      font-size: $btn-bgr-icon-font-size;
      line-height: $btn-bgr-icon-line-height;
    }
  }
}

$fab-offset: 16px !default;

$fab-border-radius: 9999px !default;
$fab-min-height: 40px !default;
$fab-min-width: 40px !default;
$fab-padding: 0 15px !default;
$fab-icon-font-size: 14px !default;

$fab-small-border-radius: $fab-border-radius !default;
$fab-small-min-height: 32px !default;
$fab-small-min-width: 32px !default;
$fab-small-padding: 0 11px !default;
$fab-small-icon-font-size: 12px !default;

$fab-bigger-border-radius: $fab-border-radius !default;
$fab-bigger-min-height: 52px !default;
$fab-bigger-min-width: 52px !default;
$fab-bigger-padding: 0 21px !default;
$fab-bigger-icon-font-size: 16px !default;

$fab-bigger-small-border-radius: $fab-border-radius !default;
$fab-bigger-small-min-height: 46px !default;
$fab-bigger-small-min-width: 46px !default;
$fab-bigger-small-padding: 0 17px !default;
$fab-bigger-small-icon-font-size: 14px !default;

$fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
$fab-zero-padding: 0 !default;
$fab-half-position-top: 50% !default;

@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) {
  border-radius: $border-radius;
  min-height: $min-height;
  min-width: $min-width;
  padding: $padding;

  &.e-icon-btn {
    padding: $fab-zero-padding;
  }

  .e-btn-icon {
    font-size: $icon-font-size;
  }
}

@include export-module('floating-action-button-layout') {
  .e-fab.e-btn {
    align-items: center;
    border-radius: $fab-border-radius;
    display: inline-flex;
    min-height: $fab-min-height;
    min-width: $fab-min-width;
    padding: $fab-padding;
    position: absolute;
    z-index: 100000;

    .e-btn-icon {
      margin-top: $fab-zero-padding;
      font-size: $fab-icon-font-size;
    }

    &.e-icon-btn {
      padding: $fab-zero-padding;
    }

    &.e-fab-fixed {
      position: fixed;
    }

    &.e-fab-top {
      top: $fab-offset;
      &.e-fab-middle {
        top: $fab-half-position-top;
        transform: translateY(-50%);
        &.e-fab-left.e-fab-center {
          left: $fab-half-position-top;
          top: $fab-half-position-top;
          transform: translate(-50%, -50%);
        }
      }
    }

    &.e-fab-bottom {
      bottom: $fab-offset;
    }

    &.e-fab-left {
      left: $fab-offset;
      &.e-fab-center {
        left: $fab-half-position-top;
        transform: translateX(-50%);
      }
    }

    &.e-fab-right {
      right: $fab-offset;
    }
  }

  .e-rtl {
    &.e-fab.e-btn {
      &.e-fab-top {
        top: $fab-offset;
        &.e-fab-middle {
          top: $fab-half-position-top;
          transform: translateY(-50%);
          &.e-fab-right.e-fab-center {
            right: $fab-half-position-top;
            top: $fab-half-position-top;
            transform: translate(50%, -50%);
          }
        }
      }

      &.e-fab-bottom {
        bottom: $fab-offset;
      }

      &.e-fab-right {
        right: $fab-offset;
        &.e-fab-center {
          right: $fab-half-position-top;
          transform: translateX(50%);
        }
      }

      &.e-fab-left {
        left: $fab-offset;
      }
    }
  }

  .e-fab-hidden {
    visibility: hidden;
  }

  .e-small.e-fab.e-btn,
  .e-small .e-fab.e-btn {
    @include fab-button-styles($fab-small-border-radius, $fab-small-min-height, $fab-small-min-width, $fab-small-padding, $fab-small-icon-font-size);
  }
}

@include export-module('floating-action-button-theme') {
  .e-fab.e-btn {
    box-shadow: $fab-box-shadow;

    &:hover:not(:focus),
    &:active,
    &.e-active,
    &:disabled {
      box-shadow: $fab-box-shadow;
    }

    &:focus {
      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark') {
        box-shadow: $fab-box-shadow;
      }
      @if $skin-name == 'tailwind' {
        box-shadow: $fab-focus-box-shadow;
      }
    }
  }
}

@if $skin-name == 'tailwind3' {
  .e-fab.e-btn:focus-visible {
    box-shadow: $fab-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */
  }
}

@mixin fab-button-styles($border-radius, $min-height, $min-width, $padding, $icon-font-size) {
  border-radius: $border-radius;
  min-height: $min-height;
  min-width: $min-width;
  padding: $padding;

  &.e-icon-btn {
    padding: $fab-zero-padding;
  }

  .e-btn-icon {
    font-size: $icon-font-size;
  }
}

@include export-module('floating-action-button-bigger') {
  .e-bigger.e-fab.e-btn,
  .e-bigger .e-fab.e-btn {
    @include fab-button-styles($fab-bigger-border-radius, $fab-bigger-min-height, $fab-bigger-min-width, $fab-bigger-padding, $fab-bigger-icon-font-size);
  }
  .e-bigger.e-small.e-fab.e-btn,
  .e-bigger.e-small .e-fab.e-btn,
  .e-bigger .e-small.e-fab.e-btn,
  .e-small .e-bigger.e-fab.e-btn {
    @include fab-button-styles($fab-bigger-small-border-radius, $fab-bigger-small-min-height, $fab-bigger-small-min-width, $fab-bigger-small-padding, $fab-bigger-small-icon-font-size);
  }
}

$sd-offset: 16px !default;
$sd-ul-margin: 0 !default;
$sd-li-text-padding: 0 5px !default;

//Distance between vertical menu and button => Ul bottom padding + li bottom margin
//Distance between vertical menu item =>  li bottom margin + li top margin
//Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
$sd-horz-ul-padding: 3px 4px !default;
$sd-vert-ul-padding: 4px 3px !default;
$sd-horz-li-margin: 0 4px !default;
$sd-vert-li-margin: 4px 0 !default;
$sd-li-text-margin: 0 8px !default;
$sd-li-text-height: 30px !default;
$sd-li-icon-height: 34px !default;
$sd-li-icon-width: 34px !default;
$sd-li-icon-border-radius: 99999px !default;
$sd-li-icon-font-size: 12px !default;

$sd-small-horz-ul-padding: 2px 5px !default;
$sd-small-vert-ul-padding: 5px 2px !default;
$sd-small-horz-li-margin: 0 5px !default;
$sd-small-vert-li-margin: 5px 0 !default;
$sd-small-li-text-margin: 0 8px !default;
$sd-small-li-text-height: 26px !default;
$sd-small-li-icon-height: 28px !default;
$sd-small-li-icon-width: 28px !default;
$sd-small-li-icon-font-size: 12px !default;

$sd-bigger-horz-ul-padding: 5px 6px !default;
$sd-bigger-vert-ul-padding: 6px 5px !default;
$sd-bigger-horz-li-margin: 0 6px !default;
$sd-bigger-vert-li-margin: 6px 0 !default;
$sd-bigger-li-text-margin: 0 12px !default;
$sd-bigger-li-text-height: 36px !default;
$sd-bigger-li-icon-height: 40px !default;
$sd-bigger-li-icon-width: 40px !default;
$sd-bigger-li-icon-font-size: 14px !default;

$sd-bigger-small-horz-ul-padding: 4px 5px !default;
$sd-bigger-small-vert-ul-padding: 5px 4px !default;
$sd-bigger-small-horz-li-margin: 0 5px !default;
$sd-bigger-small-vert-li-margin: 5px 0 !default;
$sd-bigger-small-li-text-margin: 0 12px !default;
$sd-bigger-small-li-text-height: 34px !default;
$sd-bigger-small-li-icon-height: 36px !default;
$sd-bigger-small-li-icon-width: 36px !default;
$sd-bigger-small-li-icon-font-size: 14px !default;

$sd-overlay-bg: rgba(107, 114, 128, .5) !default;
$sd-li-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 10px 15px -3px rgba(0, 0, 0, .1) !default;
$sd-li-bg: $gray-light !default;
$sd-li-border-color: $grey-8c !default;
$sd-font-color: $grey-light-font !default;
$sd-disabled-li-bg: $gray-light !default;
$sd-disabled-li-border-color: $grey-8c !default;
$sd-disabled-font-color: $grey-light-font !default;
$sd-focus-li-bg: $gray !default;
$sd-focus-li-border-color: $grey-99 !default;
$sd-focus-font-color: $grey-light-font !default;
$sd-hover-li-bg: $gray !default;
$sd-hover-li-border-color: $grey-99 !default;
$sd-hover-font-color: $grey-light-font !default;
$sd-active-li-bg: $gray !default;
$sd-active-li-border-color: $grey-99 !default;
$sd-active-font-color: $grey-light-font !default;
$sd-li-text-border-radius: 2px !default;
$sd-border-normal-width: 1px !default;
$sd-top-bottom-border-radius: 100% !default;
$sd-zero-padding-margin: 0 !default;
$spdl-border-width: 1px !default;

@mixin speeddial-popup-styles($padding, $li-margin, $li-text-margin, $speeddial-li-text-height, $li-icon-height, $li-icon-width, $li-icon-font-size, $ul-padding, $sd-li-margin, $speeddial-text-li-padding) {
  .e-speeddial-ul {
    padding: $padding;
  }

  &.e-speeddial-linear .e-speeddial-li {
    margin: $li-margin;
  }

  .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
    margin: $li-text-margin;
  }

  .e-speeddial-li.e-speeddial-text-li .e-speeddial-li-text {
    @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
      font-size: $li-icon-font-size;
      line-height: $speeddial-li-text-height;
      padding: $speeddial-text-li-padding;
    }
    @if ($skin-name == 'tailwind3') {
      height: $sd-li-text-li-tail-height;
      line-height: $sd-li-text-li-tail-line-height;
    }
  }

  .e-speeddial-li-text {
    height: $speeddial-li-text-height;
    line-height: $speeddial-li-text-height;
    @if ($skin-name == 'tailwind3') {
      font-size: $li-icon-font-size;
    }
  }

  .e-speeddial-li-icon {
    height: $li-icon-height;
    width: $li-icon-width;
    font-size: $li-icon-font-size;
  }

  &.e-speeddial-horz-right,
  &.e-speeddial-horz-left {
    .e-speeddial-ul {
      padding: $ul-padding;
    }

    .e-speeddial-li {
      margin: $sd-li-margin;
    }
  }
}

@mixin speeddial-top-bottom-position($direction) {
  #{$direction}: $sd-offset;

  &.e-speeddial-radial {
    .e-speeddial-li {
      #{$direction}: 0;
    }

    &.e-speeddial-middle .e-speeddial-li {
      #{$direction}: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset));
    }
  }

  &.e-speeddial-middle,
  &.e-speeddial-linear {
    #{$direction}: var(--speeddialVertDist);
  }
}

@mixin speeddial-left-right-position($direction) {
  #{$direction}: var(--speeddialRadialHorzDist);

  &.e-speeddial-radial {
    .e-speeddial-li {
      #{$direction}: 0;
    }

    &.e-speeddial-center .e-speeddial-li {
      #{$direction}: calc(.5 * var(--speeddialRadialMinWidth) + var(--speeddialRadialOffset));
    }
  }

  &.e-speeddial-radial.e-speeddial-center,
  &.e-speeddial-center {
    #{$direction}: var(--speeddialRadialHorzDist);
  }

  &.e-speeddial-linear {
    #{$direction}: var(--speeddialHorzDist);
  }
}

@mixin speeddial-styles($sd-height, $sd-width, $sd-position) {
  height: $sd-height;
  width: $sd-width;
  position: $sd-position;
}

@include export-module('speed-dial-layout') {
  .e-speeddial-popup {
    position: absolute;
    z-index: 100000;
    pointer-events: none;

    &.e-speeddial-top {
      @include speeddial-top-bottom-position(top);
    }

    &.e-speeddial-bottom {
      @include speeddial-top-bottom-position(bottom);
    }

    &.e-speeddial-left {
      @include speeddial-left-right-position(left);
    }

    &.e-speeddial-right {
      @include speeddial-left-right-position(right);
    }

    &.e-speeddial-template {
      outline: none;
      pointer-events: auto;
      z-index: 100001;
    }

    &.e-speeddial-linear .e-speeddial-li {
      margin: $sd-vert-li-margin;
    }

    .e-speeddial-ul {
      box-sizing: border-box;
      display: inline-flex;
      flex-direction: column;
      list-style-type: none;
      margin: $sd-ul-margin;
      padding: $sd-vert-ul-padding;
    }

    .e-speeddial-li {
      align-items: center;
      cursor: pointer;
      display: inline-flex;
      pointer-events: auto;
      position: relative;
      z-index: 100001;

      &:not(.e-speeddial-text-li) .e-speeddial-li-text {
        margin: $sd-li-text-margin;
      }

      &.e-speeddial-text-li .e-speeddial-li-text {
        @if ($skin-name == 'fluent2') {
          border: $spdl-border-width solid;
          border-radius: $spdl-text-border-radius;
          font-size: $spdl-text-font-size;
          line-height: $spdl-text-line-height;
          padding: $spdl-text-padding;
          box-sizing: content-box;
        }
        @if ($skin-name == 'tailwind3') {
          height: $speed-dial-text-li-tail-height;
          line-height: $speed-dial-text-li-tail-line-height;
          border: 1px solid;
          border-radius: $speed-dial-text-li-tail-radius;
          padding: $speed-dial-text-li-tail-padding;
        }
      }
    }

    .e-speeddial-li-text {
      border-radius: $sd-li-text-border-radius;
      padding: $sd-li-text-padding;
      white-space: nowrap;
      height: $sd-li-text-height;
      line-height: $sd-li-text-height;
      @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
        border: $border-none;
      }
      @else {
        border: $spdl-border-width solid;
      }
      @if ($skin-name == 'tailwind3') {
        font-weight: $font-weight-medium;
      }
    }

    .e-speeddial-li-icon {
      border-radius: $sd-li-icon-border-radius;
      border: $sd-border-normal-width solid;
      font-size: $sd-li-icon-font-size;
      height: $sd-li-icon-height;
      width: $sd-li-icon-width;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    &.e-speeddial-fixed {
      position: fixed;
    }

    &.e-speeddial-vert-right .e-speeddial-li,
    &.e-speeddial-horz-right .e-speeddial-ul,
    &.e-speeddial-horz-left .e-speeddial-ul.e-speeddial-horz-top {
      flex-direction: row-reverse;
    }

    &.e-speeddial-vert-bottom .e-speeddial-ul {
      flex-direction: column-reverse;
    }

    &.e-speeddial-horz-right .e-speeddial-ul.e-speeddial-horz-top,
    &.e-speeddial-horz-left .e-speeddial-ul {
      flex-direction: row;
    }

    &.e-speeddial-horz-right,
    &.e-speeddial-horz-left {
      .e-speeddial-ul {
        padding: $sd-horz-ul-padding;
      }

      .e-speeddial-li {
        margin: $sd-horz-li-margin;
      }
    }

    /* OVERFLOW CSS */
    &.e-speeddial-overflow {
      .e-speeddial-ul {
        overflow: auto;
        scroll-behavior: smooth;

        /* Hide scrollbar for IE and Edge */
        -ms-overflow-style: none;

        /* Hide scrollbar for Firefox */
        scrollbar-width: none;

        &::-webkit-scrollbar {

          /* Hide scrollbar for Chrome, Safari and Opera */
          display: none;
        }
      }

      &.e-speeddial-vert-overflow .e-speeddial-ul {
        max-height: var(--speeddialOverflowLimit);
      }

      &.e-speeddial-horz-overflow .e-speeddial-ul {
        max-width: var(--speeddialOverflowLimit);
      }
    }

    &.e-speeddial-radial {
      height: calc(var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinHeight));
      width: calc(var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinWidth));

      &.e-speeddial-middle {
        height: calc(2 * var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinHeight));
      }

      &.e-speeddial-center {
        width: calc(2 * var(--speeddialRadialOffset) + 2 * var(--speeddialRadialMinWidth));
      }

      &.e-speeddial-top-left {
        border-bottom-right-radius: $sd-top-bottom-border-radius;
      }

      &.e-speeddial-top-right {
        border-bottom-left-radius: $sd-top-bottom-border-radius;
      }

      &.e-speeddial-bottom-left {
        border-top-right-radius: $sd-top-bottom-border-radius;
      }

      &.e-speeddial-bottom-right {
        border-top-left-radius: $sd-top-bottom-border-radius;
      }

      .e-speeddial-ul {
        @include speeddial-styles(inherit, inherit, relative);
        border-radius: inherit;
        padding: $sd-zero-padding-margin;
      }

      .e-speeddial-li {
        position: absolute;
        transform: rotate(var(--speeddialRadialAngle)) translate(var(--speeddialRadialOffset)) rotate(calc(-1 * var(--speeddialRadialAngle)));
      }
    }

    &.e-speeddial-radial,
    &.e-speeddial-horz-right,
    &.e-speeddial-horz-left {
      .e-speeddial-li-text {
        position: absolute;
        visibility: hidden;
      }
    }
  }

  .e-small.e-speeddial-popup,
  .e-small .e-speeddial-popup {
    @include speeddial-popup-styles($sd-small-vert-ul-padding, $sd-small-vert-li-margin, $sd-small-li-text-margin, $sd-small-li-text-height, $sd-small-li-icon-height, $sd-small-li-icon-width, $sd-small-li-icon-font-size, $sd-small-horz-ul-padding, $sd-small-horz-li-margin, 5px 16px);
  }

  .e-speeddial-overlay {
    @include speeddial-styles(100%, 100%, absolute);
    left: $sd-zero-padding-margin;
    top: $sd-zero-padding-margin;
    z-index: 99998;

    &.e-speeddial-fixed {
      @include speeddial-styles(100vh, 100vw, fixed);
    }
  }

  .e-speeddial-hidden {
    visibility: hidden;
  }
}

@mixin speeddial-text-icon-colors($sd-color, $sd-bg-color, $sd-border-color) {
  color: $sd-color;
  .e-speeddial-li-text,
  .e-speeddial-li-icon {
    background: $sd-bg-color;
    border-color: $sd-border-color;
  }
}

@include export-module('speed-dial-theme') {
  .e-speeddial-overlay {
    background-color: $sd-overlay-bg;
  }

  .e-speeddial-popup {
    .e-speeddial-li {
      color: $sd-font-color;

      .e-speeddial-li-text {
        @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
          background: transparent;
          box-shadow: none;
        }
        @else {
          background: $sd-li-bg;
          box-shadow: $sd-li-shadow;
        }
        @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'tailwind3') {
          border-color: transparent;
        }
        @else {
          border-color: $sd-li-border-color;
        }
      }
      .e-speeddial-li-icon {
        box-shadow: $sd-li-shadow;
        background: $sd-li-bg;
        @if ($skin-name == 'Material3') {
          border-color: transparent;
        }
        @else {
          border-color: $sd-li-border-color;
        }
        @if ($skin-name == 'tailwind3') {
          box-shadow: none;
        }
      }
      &.e-speeddial-text-li .e-speeddial-li-text {
        @if ($skin-name == 'fluent2') {
          background: $secondary-bg-color;
          box-shadow: $shadow-lg;
          border-color: $secondary-border-color;
        }
        @if ($skin-name == 'tailwind3') {
          background: $secondary-bg-color;
          border-color: $secondary-border-color;
        }
      }
    }
    .e-speeddial-li.e-disabled {
      @include speeddial-text-icon-colors($sd-disabled-font-color, $sd-disabled-li-bg, $sd-disabled-li-border-color);
    }

    .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
    .e-speeddial-li:focus:not(.e-disabled) {
      color: $sd-focus-font-color;

      .e-speeddial-li-text,
      .e-speeddial-li-icon {
        background: $sd-focus-li-bg;
        border-color: $sd-focus-li-border-color;
        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
          box-shadow: $sd-focus-box-shadow;
        }
      }
    }

    .e-speeddial-li:not(.e-disabled):hover {
      @include speeddial-text-icon-colors($sd-hover-font-color, $sd-hover-li-bg, $sd-hover-li-border-color);
    }

    .e-speeddial-li:not(.e-disabled):active {
      @include speeddial-text-icon-colors($sd-active-font-color, $sd-active-li-bg, $sd-active-li-border-color);
    }
  }
}

@mixin speeddial-popup-styles($padding, $li-margin, $li-text-margin, $speeddial-li-text-height, $li-icon-height, $li-icon-width, $li-icon-font-size, $ul-padding, $sd-li-margin, $speeddial-text-li-padding) {
  .e-speeddial-ul {
    padding: $padding;
  }

  &.e-speeddial-linear .e-speeddial-li {
    margin: $li-margin;
  }

  .e-speeddial-li:not(.e-speeddial-text-li) .e-speeddial-li-text {
    margin: $li-text-margin;
  }

  .e-speeddial-li.e-speeddial-text-li .e-speeddial-li-text {
    @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
      font-size: $li-icon-font-size;
      line-height: $speeddial-li-text-height;
      padding: $speeddial-text-li-padding;
    }
    @if ($skin-name == 'tailwind3') {
      height: $speed-li-text-tail-height;
      line-height: $speed-li-text-tail-line-height;
    }
  }

  .e-speeddial-li-text {
    height: $speeddial-li-text-height;
    line-height: $speeddial-li-text-height;
    @if ($skin-name == 'tailwind3') {
      font-size: $li-icon-font-size;
    }
  }

  .e-speeddial-li-icon {
    height: $li-icon-height;
    width: $li-icon-width;
    font-size: $li-icon-font-size;
  }

  &.e-speeddial-horz-right,
  &.e-speeddial-horz-left {
    .e-speeddial-ul {
      padding: $ul-padding;
    }

    .e-speeddial-li {
      margin: $sd-li-margin;
    }
  }
}

@include export-module('speed-dial-bigger') {
  .e-bigger.e-speeddial-popup,
  .e-bigger .e-speeddial-popup {
    @include speeddial-popup-styles($sd-bigger-vert-ul-padding, $sd-bigger-vert-li-margin, $sd-bigger-li-text-margin, $sd-bigger-li-text-height, $sd-bigger-li-icon-height, $sd-bigger-li-icon-width, $sd-bigger-li-icon-font-size, $sd-bigger-horz-ul-padding, $sd-bigger-horz-li-margin, 10px 28px);
  }

  .e-bigger.e-small.e-speeddial-popup,
  .e-bigger.e-small .e-speeddial-popup,
  .e-bigger .e-small.e-speeddial-popup,
  .e-small .e-bigger.e-speeddial-popup {
    @include speeddial-popup-styles($sd-bigger-small-vert-ul-padding, $sd-bigger-small-vert-li-margin, $sd-bigger-li-text-margin, $sd-bigger-small-li-text-height, $sd-bigger-small-li-icon-height, $sd-bigger-small-li-icon-width, $sd-bigger-small-li-icon-font-size, $sd-bigger-small-horz-ul-padding, $sd-bigger-small-horz-li-margin, 8px 24px);
  }
}

//month view
$calendar-normal-month-view-height: 28px !default;
$calendar-normal-month-view-line-height: $calendar-normal-month-view-height !default;
$calendar-normal-month-view-width: 34px !default;
$calendar-normal-month-cell-padding: 0 !default;
$calendar-bigger-table-month-padding: 0 !default;
$calendar-bigger-month-font-size: 15px !default;
$calendar-bigger-month-view-padding: 0 !default;
$calendar-bigger-month-view-height: 30px !default;
$calendar-bigger-month-view-line-height: $calendar-bigger-month-view-height !default;
$calendar-bigger-month-view-width: 36px !default;
$border-zero: 0;

//header dimension
$calendar-header-font-size: 14px !default;
$calendar-bigger-header-padding: 0 !default;
$calendar-bigger-day-header-height: $calendar-bigger-month-view-height !default;
$calendar-bigger-header-height: 40px !default;
$calendar-normal-header-padding: 0 !default;
$calendar-normal-day-header-height: $calendar-normal-month-view-height !default;
$calendar-normal-day-header-text: none !default;
$calendar-normal-header-height: 36px !default;
$calendar-bigger-header-font-size: 18px !default;
$calendar-normal-day-header-font-weight: 600 !default;
$calendar-title-font-size: 16px !default;
$calendar-title-margin-left-style: 8px !default;
$calendar-title-font-weight-style: 600 !default;
$calendar-title-decoration-style: none !default;
$calendar-header-title-padding: 0 5px !default;

//Focus related styles
$calendar-title-focus-box-shadow: 0 0 0 1px $grey-light-font !default;
$calendar-title-focus-background: none !default;
$calendar-title-active-background: transparent !default;
$calendar-icon-focus-box-shadow: 0 0 0 1px $grey-light-font !default;
$calendar-title-border-radius: 4px !default;
$calendar-title-hover-bg-color: none !default;
$calendar-focused-cell-box-shadow: 0 0 0 1px $grey-light-font !default;

//bgcolor
$calendar-header-font-color: $grey-dark-font !default;
$calendar-header-icon-color: $grey-dark-font !default;
$calendar-title-font-color: $calendar-header-icon-color !default;
$calendar-icon-font-color: $grey-dark-font !default;
$calendar-active-icon-color: $calendar-icon-font-color !default;
$calendar-title-hover-color: $grey-light-font !default;
$calendar-icon-hover-color: $grey-light-font !default;
$calendar-icon-hover-bg-color: $grey-88 !default;
$calendar-device-icon-hover-bg-color: none !default;
$calendar-default-border-color: none !default;
$calendar-icon-hover-border-color: $calendar-default-border-color !default;
$calendar-active-state-icon-bg-color: $grey-8c !default;

// common styles

$calendar-none-style: none !default;
$calendar-cursor-default-style: default !default;
$calendar-cursor-pointer-style: pointer !default;
$calendar-block-style: block !default;
$calendar-inline-block-style: inline-block !default;
$calendar-display-style: inline-block !default;
$calendar-wrapper-border-radius: 4px !default;
$calendar-full-width: 100% !default;
$calendar-lg-day-header-format-max-width: 100% !default;
$calendar-lg-day-header-format-min-width: 540px !default;
$calendar-pointer-events: initial !default;
$calendar-float-right-style: right !default;
$calendar-icon-padding-top: 0 !default;
$calendar-float-left-style: left !default;
$calendar-zero-value: 0 !default;
$calendar-disable-opacity: 1 !default;

//popup styles
$calendar-normal-max-width: 262px !default;
$calendar-normal-min-width: 256px !default;
$calendar-small-max-width: $calendar-normal-max-width !default;
$calendar-small-min-width: $calendar-normal-min-width !default;
$calendar-bigger-max-width: 284px !default;
$calendar-bigger-min-width: 278px !default;
$calendar-weeknumber-min-width: 300px !default;
$calendar-weeknumber-bigger-width: 325px !default;
$calendar-border-style: 1px solid rgba($grey-44, 100%) !default;
$calendar-bg-color: $grey-base !default;
$calendar-popup-padding: 12px !default;
$calendar-popup-bigger-padding: 16px !default;
$calendar-box-shadow: none !default;

// newly added
$calendar-active-today-hover-font-color: $grey-dark-font !default;
$calendar-today-focused-font-color: $grey-dark-font !default;
$calendar-active-today-font-color: $brand-primary-font !default;

// today button
$calendar-bigger-today-button-height: 48px !default;
$calendar-normal-today-button-height: 36px !default;

//  year decade view

//color
$calendar-yeardecade-bg-color: none !default;
$calendar-yeardecade-hover-bg: $grey-88 !default;
$calendar-yeardecade-selected-hover-bg: color.adjust($brand-primary, $lightness: -10%) !default;

//dimension
$calendar-normal-year-decade-height: 54px !default;
$calendar-normal-year-decade-width: 58px !default;
$calendar-normal-year-decade-padding: 0 !default;
$calendar-yeardeacde-span-padding: 0 !default;
$calendar-yeardecade-padding: 0 !default;
$calendar-bigger-year-decade-padding: 0 !default;
$calendar-bigger-yeardecade-font-size: $calendar-bigger-month-font-size !default;
$calendar-bigger-table-yeardecade-padding: 0 0 10px !default;
$calendar-bigger-yeardecade-font-weight: normal !default;
$calendar-yeardecade-font-weight: normal !default;
$calendar-bigger-year-decade-height: 56px !default;
$calendar-bigger-year-decade-width: 62px !default;
$calendar-yeardecade-header-padding: 0 0 10px !default;
$calendar-bigger-yeardecade-header-padding: 0 0 10px !default;
$calendar-other-decade-cell-color: $grey-lighter !default;
$calendar-decade-title-left-margin-style: 15px !default;

// end year decade

//other months
$calendar-other-month-display-style: inline-block !default;
$calendar-other-month-row-display-style: none !default;
$calendar-other-month-date: $grey-lighter !default;
$calendar-other-month-date-hover-bg: $grey-lighter !default;

// table related styles
$calendar-table-padding: 0 0 10px !default;
$calendar-rtl-text-indent: 4px !default;

//font icons
$calendar-prev-icon: '\e910' !default;
$calendar-next-icon: '\e916' !default;
$calendar-next-prev-icon-size: 14px !default;
$calendar-icon-line-height: 16px !default;
$calendar-bigger-icon-size: 40px !default;
$calendar-normal-icon-size: 36px !default;
$calendar-spanicon-font-weight-style: normal !default;

//pending
$calendar-icon-font-size-style: 16px !default;
$calendar-bigger-icon-font-size: 18px !default;

// td styles

//color
$calendar-light-font: $grey-dark-font !default;
$calendar-active-font-color: $brand-primary-font !default;
$calendar-active-bg-color: $brand-primary !default;
$calendar-active-bg-box-shadow: inset 1px 0 $brand-primary, inset 0 1px $brand-primary, inset -1px 0 $brand-primary, inset 0 -1px $brand-primary !default;
$calendar-active-bg-border-color: none !default;
$calendar-active-hover-bg-color: color.adjust($brand-primary, $lightness: -10%) !default;
$calendar-hover-color:  $grey-88 !default;
$calendar-text-color: $grey-dark-font !default;
$calendar-hover-text: $calendar-text-color !default;
$calendar-focus-bg-color: $grey-88 !default;
$calendar-focused-today-bg-style: $grey !default;
$calendar-focused-today-box-shadow: inset 1px 0 $brand-primary, inset 0 1px $brand-primary, inset -1px 0 $brand-primary, inset 0 -1px $brand-primary !default;
$calendar-focused-today-border-style: none !default;
$calendar-focus-box-shadow: none !default;
$calendar-focus-border-color: none !default;
$calendar-hover-border-color: none !default;
$calendar-disable-font-color: $grey-8c !default;

//thead style
$calendar-thead-padding: 0 0 6px !default;

//dimension
$calendar-date-font-size: 14px !default;
$calendar-bigger-day-font-size: 15px !default;
$calendar-link-font-weight-style: normal !default;
$calendar-focused-date-bg-style: $grey-88 !default;
$calendar-disable-font-weight-style: normal !default;
$calendar-border-radius: 4px !default;
$calendar-week-number-font-weight: 500 !default;

// end td styles

//today date
$calendar-today-bg-style: none !default;
$calendar-today-bg-hover-color: $grey-white !default;
$calendar-today-box-shadow: inset 1px 0 $brand-primary, inset 0 1px $brand-primary, inset -1px 0 $brand-primary, inset 0 -1px $brand-primary !default;
$calendar-today-border-color: none !default;
$calendar-selected-border-color: none !default;

//pending
$calendar-today-color: $grey-light-font !default;
$calendar-today-focus-color: $grey-light-font !default;

//week header
$calendar-week-header-font-color: $grey-dark-font !default;
$calendar-week-header-bg-style: none !default;
$calendar-bigger-week-header-font-size: 15px !default;

//week number
$calendar-week-number-font-style: italic !default;
$calendar-week-number-color-style: $grey-lighter !default;
$calendar-week-number-font-size-style: 14px !default;
$calendar-week-number-font-color: $calendar-text-color !default;
$calendar-week-normal-max-width: 294px !default;
$calendar-week-normal-min-width: 288px !default;
$calendar-week-bigger-max-width: 320px !default;
$calendar-week-bigger-min-width: 314px !default;
$calendar-icon-padding: 10px !default;
$calendar-icon-button-margin: 0 !default;
$calendar-bigger-icon-padding: 11px !default;
$calendar-bigger-icon-margin: 0 !default;

$calendar-footer-container-padding: 10px 0 0 0 !default;
$calendar-footer-border: none !default;
$calendar-footer-background: transparent !default;
$calendar-bigger-footer-container-padding: 10px 0 0 0 !default;
$calendar-bigger-footer-border: none !default;
$calendar-today-disabled-background-style: $grey-white !default;
$calendar-today-disabled-border-style: rgba($grey-cc, .65) !default;
$calendar-today-disabled-box-shadow: none !default;
$calendar-today-disabled-color: rgba($grey-light-font, .65) !default;

// small size
$calendar-small-icon-size: 32px !default;
$calendar-small-icon-font-size-style: 12px !default;
$calendar-small-title-font-size: 13px !default;
$calendar-small-icon-padding: 6px !default;
$calendar-small-header-height: 32px !default;
$calendar-small-day-header-height: 24px !default;
$calendar-small-month-view-height: 24px !default;
$calendar-small-month-view-line-height: $calendar-small-month-view-height !default;
$calendar-small-date-font-size: 12px !default;
$calendar-small-month-view-width: 34px !default;
$calendar-small-popup-padding: 10px !default;
$calendar-small-title-font-color: $grey-dark-font !default;
$calendar-bigger-small-table-padding: 0 0 10px !default;
$calendar-bigger-small-yeardecade-font-size: 14px !default;
$calendar-small-font-size: 12px !default;

//endtoday button

$line-height: 14px;
$margin-zero: 0;
$padding-zero: 0;
$calendar-bigger-rtl-header-text-indent: 6px !default;
$calendar-zero-border-radius: 0 !default;
$calendar-bigger-header-width: 60% !default;
$calendar-bigger-placeholder-min-height: 392px !default;
$calendar-small-min-height: 220px !default;

@include export-module('calendar-layout') { /*! calendar layout */

  #{&}ejs-calendar {
    display: block;
  }

  #{&}.e-calendar.e-disabled {
    #{if(&, '&', '*')} .e-header {
      #{if(&, '&', '*')} .e-prev,
      #{if(&, '&', '*')} .e-next {
        cursor: $calendar-cursor-default-style;
        pointer-events: $calendar-none-style;
        touch-action: $calendar-none-style;
      }

      #{if(&, '&', '*')} .e-title {
        cursor: $calendar-cursor-default-style;
        pointer-events: $calendar-none-style;
        touch-action: $calendar-none-style;
      }
    }

    #{if(&, '&', '*')} .e-content td {
      pointer-events: $calendar-none-style;
      touch-action: $calendar-none-style;
    }

    #{if(&, '&', '*')} .e-btn.e-today {
      pointer-events: $calendar-none-style;
      touch-action: $calendar-none-style;
    }
  }

  #{&}.e-calendar {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;
    border-radius: $calendar-wrapper-border-radius;
    display: $calendar-block-style;
    overflow: auto;
    user-select: $calendar-none-style;

    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      float: $calendar-float-right-style;
      text-align: $calendar-float-right-style;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-icon-container {
      float: $calendar-float-left-style;
    }
    #{if(&, '&', '*')} .e-header {
      background: $calendar-none-style;
      display: table;
      font-weight: $calendar-spanicon-font-weight-style;
      position: relative;
      text-align: center;
      width: $calendar-full-width;

      #{if(&, '&', '*')} button {
        background: transparent;
        border: $border-zero;
        margin-right: $calendar-icon-button-margin;
        padding: $padding-zero;
        text-decoration: $calendar-none-style;
      }
      #{if(&, '&', '*')} span {
        cursor: $calendar-cursor-pointer-style;
        display: inline-block;
        font-size: $calendar-icon-font-size-style;
        font-weight: $calendar-spanicon-font-weight-style;
        line-height: $calendar-icon-line-height;
        padding: $calendar-icon-padding;
        vertical-align: middle;

        #{if(&, '&', '*')}.e-disabled {
          cursor: $calendar-cursor-default-style;
        }
      }
    }
    #{if(&, '&', '*')} .e-week-header {
      padding: $calendar-thead-padding;
    }
    #{if(&, '&', '*')} th {
      cursor: $calendar-cursor-default-style;
      font-size: $calendar-header-font-size;
      font-weight: normal;
      text-align: center;
    }
    #{if(&, '&', '*')} .e-content {
      #{if(&, '&', '*')} .e-selected ,
      #{if(&, '&', '*')} .e-state-hover {
        border-radius: $calendar-zero-border-radius;
      }
      #{if(&, '&', '*')} span.e-day {
        border-radius: $calendar-zero-border-radius;
        cursor: $calendar-cursor-pointer-style;
        display: $calendar-inline-block-style;
        font-size: $calendar-date-font-size;
        overflow: hidden;
        padding: $padding-zero;
        text-align: center;
        text-decoration: $calendar-none-style;
        vertical-align: middle;
      }
      #{if(&, '&', '*')} th,
      #{if(&, '&', '*')} td {
        box-sizing: border-box;
      }
      #{if(&, '&', '*')} td.e-disabled {
        opacity: $calendar-disable-opacity;
        pointer-events: $calendar-none-style;
        touch-action: $calendar-none-style;
      }
      #{if(&,'&','*')} td.e-disabled.e-today {
        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'highcontrast' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
          opacity: 1;
          #{if(&,'&','*')} span.e-day {
            box-shadow: $calendar-disabled-today-box-shadow;
            color: $calendar-disabled-today-font-color;
          }
        }
      }
      #{if(&, '&', '*')} td {
        cursor: pointer;
        padding: $calendar-yeardeacde-span-padding;
        text-align: center;
        #{if(&, '&', '*')}.e-week-number {
          color: $calendar-week-number-font-color;
          font-size: $calendar-week-number-font-size-style;
          font-style: $calendar-week-number-font-style;
          font-weight: $calendar-week-number-font-weight;
          @if $skin-name == 'FluentUI' {
            background-color: $calendar-week-number-bg-color;
            border-right: $calendar-week-number-border;
          }
          @if $skin-name == 'fluent2' {
            border-right: $calendar-week-number-border;
          }
        }
        #{if(&, '&', '*')}.e-overlay {
          background: $calendar-none-style;
          width: initial;
        }
      }
      #{if(&, '&', '*')} td:hover {
        @if skin-name == 'fluent2' {
          border-radius: $calendar-td-hover-border-radius;
          background: $calendar-hover-border-color;
        }
      }

      table {
        border-collapse: separate;
        border-spacing: 0;
        border-width: $border-zero;
        float: $calendar-float-left-style;
        margin: $margin-zero;
        outline: 0;
        padding: $calendar-table-padding;
        table-layout: fixed;
        width: $calendar-full-width;
      }
      #{if(&, '&', '*')} td.e-other-month > span.e-day,
      #{if(&, '&', '*')} td.e-other-year > span.e-day {
        display: $calendar-other-month-display-style;
        font-weight: $calendar-link-font-weight-style;
      }
      #{if(&, '&', '*')} tr.e-month-hide {
        display: $calendar-other-month-row-display-style;
        font-weight: $calendar-link-font-weight-style;
      }
      #{if(&, '&', '*')} tr.e-month-hide,
      #{if(&, '&', '*')} td.e-other-month,
      #{if(&, '&', '*')} td.e-other-year {
        pointer-events: $calendar-pointer-events;
        touch-action: $calendar-pointer-events;
      }
      #{if(&, '&', '*')} tr.e-month-hide,
      #{if(&, '&', '*')} td.e-other-month.e-disabled,
      #{if(&, '&', '*')} td.e-other-year.e-disabled {
        pointer-events: $calendar-none-style;
        touch-action: $calendar-none-style;
      }
      #{if(&, '&', '*')} td.e-week-number:hover span.e-day,
      #{if(&, '&', '*')} td.e-week-number:hover {
        @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
          background-color: $calendar-bg-color;
        }
        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
          background: $calendar-bg-color;
        }
        cursor: $calendar-cursor-default-style;
        @if $skin-name == 'FluentUI' {
          background-color: $calendar-week-number-bg-color;
        }
      }
    }
    #{if(&, '&', '*')} .e-header {
      #{if(&, '&', '*')} .e-prev,
      #{if(&, '&', '*')} .e-next {
        border-radius: $calendar-border-radius;
        display: inline-block;
        font-size: $calendar-next-prev-icon-size;
        vertical-align: middle;
      }
      #{if(&, '&', '*')} .e-title {
        cursor: $calendar-cursor-pointer-style;
        display: $calendar-inline-block-style;
        float: $calendar-float-left-style;
        font-size: $calendar-title-font-size;
        font-weight: $calendar-title-font-weight-style;
        text-align: $calendar-float-left-style;
        padding: $calendar-header-title-padding;
        border: $calendar-none-style;
        border-radius: $calendar-title-border-radius;
      }
      #{if(&, '&', '*')} .e-title {
        margin-left: $calendar-title-margin-left-style;
      }
      #{if(&, '&', '*')} .e-prev:hover,
      #{if(&, '&', '*')} .e-next:hover {
        cursor: $calendar-cursor-pointer-style;
      }
      #{if(&, '&', '*')} .e-prev.e-overlay,
      #{if(&, '&', '*')} .e-next.e-overlay {
        background: $calendar-none-style;
      }
    }
    #{if(&, '&', '*')} .e-header.e-decade .e-title,
    #{if(&, '&', '*')} .e-header.e-year .e-title {
      margin-left: $calendar-decade-title-left-margin-style;
    }
    #{if(&, '&', '*')} .e-header.e-decade .e-title {
      cursor: $calendar-cursor-default-style;
    }
    #{if(&, '&', '*')} .e-header .e-icon-container {
      display: $calendar-inline-block-style;
      float: $calendar-float-right-style;
      padding-top: $calendar-icon-padding-top;
      @if $skin-name == 'tailwind3' {
        position: inherit;
        top: $calendar-header-icon-top;
      }
    }
    #{if(&, '&', '*')} .e-footer-container {
      text-transform: uppercase;
    }
  }

  .e-calendar .e-content td.e-today:hover {
    @if $skin-name == 'fluent2' {
      background: $calendar-hover-border-color;
      border-radius: $calendar-td-hover-border-radius;
    }
  }

  .e-calendar .e-date-icon-prev {
    @if $skin-name =='tailwind3' {
      transform: scale(1.1);
    }
  }

  //normal style
  #{&}.e-calendar {
    @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
      border-spacing: 0;
      max-width: $calendar-normal-max-width;
      min-width: $calendar-normal-min-width;
      padding: $calendar-popup-padding;
    }
    @else {
      border-spacing: 0;
      max-width: $calendar-normal-max-width;
      min-width: $calendar-normal-min-width;
      padding: $calendar-popup-padding;
      min-height: $calendar-normal-min-height;
    }

    #{if(&, '&', '*')}.e-calendar-day-header-lg {
      max-width: $calendar-lg-day-header-format-max-width;
      min-width: $calendar-lg-day-header-format-min-width;
    }
    #{if(&, '&', '*')}.e-week-number {
      min-width: $calendar-weeknumber-min-width;
    }

    #{if(&, '&', '*')}.e-week {
      max-width: $calendar-week-normal-max-width;
      min-width: $calendar-week-normal-min-width;
    }
    #{if(&, '&', '*')} .e-header .e-title {
      line-height: $calendar-normal-header-height;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      text-align: $calendar-float-right-style;
      text-indent: $calendar-rtl-text-indent;
    }
    #{if(&, '&', '*')} .e-header {
      height: $calendar-normal-header-height;

      #{if(&, '&', '*')}.e-month {
        padding: $calendar-normal-header-padding;
      }

      #{if(&, '&', '*')}.e-year,
      #{if(&, '&', '*')}.e-decade {
        padding: $calendar-yeardecade-header-padding;
      }
    }
    #{if(&, '&', '*')} th {
      font-weight: $calendar-normal-day-header-font-weight;
      height: $calendar-normal-day-header-height;
      text-transform: $calendar-normal-day-header-text;
    }
    #{if(&, '&', '*')} .e-content {
      #{if(&, '&', '*')} .e-selected ,
      #{if(&, '&', '*')} .e-state-hover {
        border-radius: $calendar-zero-border-radius;
      }
      #{if(&, '&', '*')} span.e-day {
        border: $calendar-default-border-color;
        font-size: $calendar-date-font-size;
        font-weight: $calendar-link-font-weight-style;
        height: $calendar-normal-month-view-height;
        line-height: $calendar-normal-month-view-height;
        width: $calendar-normal-month-view-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-month td.e-today span.e-day {
      line-height: $calendar-normal-month-view-line-height;
    }
    #{if(&, '&', '*')} .e-content td.e-today span.e-day {
      @if $skin-name == 'FluentUI' {
        height: 25px;
        width: 25px;
        line-height: 25px;
      }
    }
    #{if(&, '&', '*')} .e-content.e-year table,
    #{if(&, '&', '*')} .e-content.e-decade table {
      border-spacing: 0;
      padding: $calendar-yeardecade-padding;
    }
    #{if(&, '&', '*')} .e-content.e-month td {
      height: $calendar-normal-month-view-height;
      padding: $calendar-normal-month-cell-padding;
    }
    #{if(&, '&', '*')} .e-content .tfooter > tr > td {
      height: $calendar-normal-today-button-height;
      line-height: $calendar-normal-today-button-height;
    }
    #{if(&, '&', '*')} .e-content.e-year td,
    #{if(&, '&', '*')} .e-content.e-decade td {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        height: $calendar-normal-year-decade-height;
        padding: $calendar-normal-year-decade-padding;
      }
      @else {
        height: $calendar-normal-year-decade-height;
        padding: $calendar-normal-year-decade-padding;
        width: $calendar-normal-year-decade-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-year td .e-selected,
    #{if(&, '&', '*')} .e-content.e-decade td .e-selected {
      @if $skin-name == 'tailwind3' {
        background: $calendar-active-bg-color;
        border-radius: $calendar-active-content-border-radius;
      }
    }

    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        font-weight: $calendar-yeardecade-font-weight;
        height: $calendar-normal-year-decade-height;
        line-height: $calendar-normal-year-decade-height;
        width: $calendar-normal-year-decade-width;
      }
      @else {
        font-weight: $calendar-yeardecade-font-weight;
        height: $calendar-normal-year-decade-height-inside;
        line-height: $calendar-normal-year-decade-height-inside;
        width: $calendar-normal-year-decade-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date) > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date) > span.e-day,
    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date):hover > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date):hover > span.e-day {
      @if ($skin-name == 'FluentUI') {
        box-shadow: $calendar-none-style;
      }
    }
    #{if(&, '&', '*')} .e-header .e-icon-container {
      #{if(&, '&', '*')} .e-prev,
      #{if(&, '&', '*')} .e-next {
        height: $calendar-normal-icon-size;
        width: $calendar-normal-icon-size;
      }

      #{if(&, '&', '*')} .e-prev {
        @if $skin-name == 'tailwind' {
          margin: $calendar-normal-down-icon-margin;
        }
      }
    }
    #{if(&, '&', '*')} .e-footer-container {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        background-color: $calendar-footer-background;
      }
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        background: $calendar-footer-background;
      }
      @if $skin-name == 'tailwind3' {
        text-align: right;
      }
      @if $skin-name != 'tailwind3' {
        border-top: $calendar-footer-border;
        text-align: center;
      }
      cursor: $calendar-cursor-default-style;
      display: $calendar-display-style;
      flex-direction: row;
      justify-content: flex-end;
      padding: $calendar-footer-container-padding;
      width: $calendar-full-width;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        text-indent: $calendar-rtl-bigger-small-text-indent;
      }
    }
  }

  .e-small#{&}.e-calendar,
  .e-small #{&}.e-calendar {
    @if ($skin-name != 'Material3' and $skin-name != 'Material3-dark' and $skin-name != 'fluent2') {
      max-width: $calendar-small-max-width;
      min-width: $calendar-small-min-width;
      padding: $calendar-small-popup-padding;
      min-height: $calendar-small-min-height;
    }
    @else {
      max-width: $calendar-small-max-width;
      min-width: $calendar-small-min-width;
      padding: $calendar-small-popup-padding;
    }
    #{if(&, '&', '*')} .e-footer-container {
      @if $skin-name == 'tailwind' {
        padding: $calendar-small-footer-container-padding;
      }
    }

    #{if(&, '&', '*')}.e-calendar-day-header-lg {
      max-width: $calendar-lg-day-header-format-max-width;
      min-width: $calendar-lg-day-header-format-min-width;
    }
    #{if(&, '&', '*')}.e-week-number .e-content table {
      @if $skin-name == 'FluentUI' {
        padding: 0 5px;
      }
    }
    #{if(&, '&', '*')} .e-content {
      #{if(&, '&', '*')} span.e-day {
        font-size: $calendar-small-date-font-size;
        height: $calendar-small-month-view-height;
        line-height: $calendar-small-month-view-height;
        width: $calendar-small-month-view-width;
      }

      #{if(&, '&', '*')}.e-month td.e-today span.e-day {
        line-height: $calendar-small-month-view-line-height;
      }
      #{if(&, '&', '*')} td.e-today span.e-day {
        @if $skin-name == 'FluentUI' {
          height: 21px;
          width: 21px;
          line-height: 21px;
        }
      }
    }

    #{if(&, '&', '*')} .e-content.e-month td {
      height: $calendar-small-month-view-height;
    }

    #{if(&, '&', '*')} .e-header {
      height: $calendar-small-header-height;
      #{if(&, '&', '*')} button{
        #{if(&, '&', '*')} span {
          font-size: $calendar-small-icon-font-size-style;
          padding: $calendar-small-icon-padding;
          line-height: $line-height;
        }
      }

      #{if(&, '&', '*')} .e-title {
        font-size: $calendar-small-title-font-size;
        line-height: $calendar-small-header-height;
      }

      #{if(&, '&', '*')}.e-month,
      #{if(&, '&', '*')}.e-year,
      #{if(&, '&', '*')}.e-decade {
        @if $skin-name == 'tailwind' {
          padding: $calendar-small-header-padding;
        }
      }
    }

    #{if(&, '&', '*')} .e-content.e-month table,
    #{if(&, '&', '*')} .e-content.e-year table,
    #{if(&, '&', '*')} .e-content.e-decade table {
      @if $skin-name == 'tailwind' {
        padding: $calendar-small-table-padding;
      }
    }

    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        text-indent: $calendar-rtl-text-indent;
      }
    }

    #{if(&, '&', '*')} .e-header .e-icon-container {
      #{if(&, '&', '*')} .e-prev,
      #{if(&, '&', '*')} .e-next {
        height: $calendar-small-icon-size;
        width: $calendar-small-icon-size;
      }

      #{if(&, '&', '*')} .e-prev {
        @if $skin-name == 'tailwind' {
          margin: $calendar-small-down-icon-margin;
        }
      }
    }

    #{if(&, '&', '*')} th {
      font-size: $calendar-small-font-size;
      height: $calendar-small-day-header-height;
    }

    #{if(&, '&', '*')} .e-header .e-title {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        margin-left: $calendar-title-margin-small-left-style;
      }
    }

    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        width: $calendar-small-year-decade-width;
      }
    }

    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
      @if $skin-name == 'tailwind' {
        height: $calendar-small-year-decade-height;
        line-height: $calendar-small-year-decade-height;
        width: $calendar-small-year-decade-width;
      }
    }
  }

  #{&}.e-calendar {
    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled,
    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:hover,
    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:active,
    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:focus,
    #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-disabled:hover:active {
      background: $calendar-today-disabled-background-style;
      border-color: $calendar-today-disabled-border-style;
      box-shadow: $calendar-today-disabled-box-shadow;
      color: $calendar-today-disabled-color;
      cursor: $calendar-cursor-default-style;
      opacity: $calendar-disable-opacity;
      outline: $calendar-none-style;
      pointer-events: $calendar-none-style;
      touch-action: $calendar-none-style;
    }
  }

  .e-content-placeholder.e-calendar.e-placeholder-calendar {
    background-size: 250px 336px;
    min-height: 336px;
  }
}

@include export-module('calendar-theme') {
  #{&}.e-calendar {
    @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
      background: $calendar-bg-color;
      border-radius: 8px;
    }
    @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
      background-color: $calendar-bg-color;
    }
    border: $calendar-border-style;
    box-shadow: $calendar-box-shadow;
    #{if(&, '&', '*')} .e-date-icon-prev,
    #{if(&, '&', '*')} .e-date-icon-next {
      color: $calendar-header-icon-color;
    }
    #{if(&, '&', '*')} th {
      border-bottom: 0;
      color: $calendar-week-header-font-color;
    }
    @at-root {
      #{if(&, '&', '*')} .e-header {
        border-bottom: 0;
        #{if(&, '&', '*')} a {
          #{if(&, '&', '*')} span {
            border: $calendar-default-border-color;
            color: $calendar-icon-font-color;
          }
        }
        #{if(&, '&', '*')} .e-title {
          color: $calendar-title-font-color;
        }
        #{if(&, '&', '*')} .e-title:hover {
          @if $skin-name != 'tailwind3' {
            background: $calendar-title-hover-bg-color;
          }
          cursor: pointer;
          text-decoration: $calendar-title-decoration-style;
          @if $skin-name == 'fluent2' {
            color: $calendar-title-hover-color;
          }
        }
        #{if(&, '&', '*')} .e-title:focus {
          box-shadow: $calendar-title-focus-box-shadow;
          @if $skin-name != 'fluent2' and $skin-name != 'tailwind3' {
            background: $calendar-title-focus-background;
          }
          @if $skin-name == 'highcontrast' {
            text-decoration: none;
          }
          @else {
            text-decoration: $calendar-title-decoration-style;
          }
        }
        #{if(&, '&', '*')} .e-title:active {
          @if $skin-name == 'fluent2' {
            background: $calendar-title-active-background;
            color: $calendar-title-active-color;
          }
          @else {
            box-shadow: $calendar-box-shadow;
            @if $skin-name != 'tailwind3' {
              background: $calendar-title-active-background;
            }
            text-decoration: $calendar-title-decoration-style;
          }
        }
        #{if(&, '&', '*')} .e-prev:hover > span,
        #{if(&, '&', '*')} .e-next:hover > span {
          border: $calendar-icon-hover-border-color;
          color: $calendar-icon-hover-color;
          cursor: pointer;
        }

        #{if(&, '&', '*')} .e-prev:hover,
        #{if(&, '&', '*')} .e-next:hover {
          @if $skin-name != 'tailwind3' {
            background: $calendar-icon-hover-bg-color;
          }
          @if $skin-name == 'fluent2' {
            color: $calendar-active-font-color;
          }
          @if $skin-name == 'tailwind3' {
            color: $calendar-prev-icon-hover;
          }
        }
        #{if(&, '&', '*')} .e-prev:focus,
        #{if(&, '&', '*')} .e-next:focus {
          box-shadow: $calendar-icon-focus-box-shadow;
        }
        #{if(&, '&', '*')} .e-prev:active,
        #{if(&, '&', '*')} .e-next:active {
          @if $skin-name == 'tailwind3' {
            color: $icon-color-pressed;
          }
          @else {
            background: $calendar-active-state-icon-bg-color;
            color: $calendar-active-font-color;
          }
        }
        #{if(&, '&', '*')} button.e-prev:active span,
        #{if(&, '&', '*')} button.e-next:active span {
          border: $calendar-selected-border-color;
          color: $calendar-active-icon-color;
        }
        #{if(&, '&', '*')}.e-decade .e-title {
          @if $skin-name != 'fluent2' {
            color: $calendar-light-font;
            cursor: default;
          }
        }
        #{if(&, '&', '*')} .e-next.e-disabled span,
        #{if(&, '&', '*')} .e-prev.e-disabled span {
          color: $calendar-disable-font-color;
          font-weight: $calendar-disable-font-weight-style;
        }
        #{if(&, '&', '*')} .e-next.e-disabled,
        #{if(&, '&', '*')} .e-prev.e-disabled {
          opacity: $calendar-disable-opacity;
        }
      }
      #{if(&, '&', '*')} .e-content.e-year,
      #{if(&, '&', '*')} .e-content.e-decade {
        #{if(&, '&', '*')} td.e-selected span.e-day {
          @if $skin-name == 'fluent2' {
            font-weight: 600;
          }
        }
      }
      #{if(&, '&', '*')} .e-content {
        #{if(&, '&', '*')} .e-selected:hover {
          @if $skin-name == 'tailwind3' {
            background: $flyout-bg-color-hover;
          }
        }
        #{if(&, '&', '*')} .e-selected:active {
          @if $skin-name == 'tailwind3' {
            background: $flyout-bg-color-pressed;
          }
        }
        #{if(&, '&', '*')} .e-selected:focus {
          @if $skin-name == 'tailwind3' {
            background: $flyout-bg-color-focus;
          }
        }
        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell:first-child span.e-day,
        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell:last-child span.e-day {
          color: $calendar-other-decade-cell-color;
        }
        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell:first-child.e-selected span.e-day,
        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell:last-child.e-selected span.e-day {
          color: $calendar-active-font-color;
        }
        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell.e-disabled:first-child span.e-day,
        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell.e-disabled:last-child span.e-day {
          color: $calendar-disable-font-color;
        }
        #{if(&, '&', '*')}.e-year td:hover span.e-day,
        #{if(&, '&', '*')}.e-decade td:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name == 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            background-color: $calendar-yeardecade-selected-hover-bg;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-yeardecade-selected-hover-bg;
          }
        }

        #{if(&, '&', '*')}.e-year td > span.e-day,
        #{if(&, '&', '*')}.e-decade td > span.e-day {
          background: $calendar-yeardecade-bg-color;
        }

        #{if(&, '&', '*')} .e-week-number span {
          color: $calendar-week-number-color-style;
        }

        #{if(&, '&', '*')} td.e-focused-date span.e-day,
        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day,
        #{if(&, '&', '*')} td.e-focused-date:focus span.e-day {
          @if $skin-name != 'tailwind3' {
            background: $calendar-focused-date-bg-style;
          }
          border: $calendar-focus-border-color;
          border-radius: $calendar-border-radius;
          box-shadow: $calendar-focus-box-shadow;
          @if ($skin-name == 'FluentUI') {
            background: none;
            border-radius: $calendar-focused-state-border-radius;
            box-shadow: $calendar-focused-state-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            font-weight: 600;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
          border: $calendar-hover-border-color;
          border-radius: $calendar-border-radius;
          color: $calendar-text-color;
        }
        #{if(&, '&', '*')} td.e-today span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
          background: $calendar-today-bg-style;
          border: $calendar-today-border-color;
          @if $skin-name != 'fluent2' {
            border-radius: $calendar-border-radius;
          }
          @else {
            border-radius: $calendar-today-border-radius;
          }
          @if $skin-name != 'tailwind3' {
            box-shadow: $calendar-today-box-shadow;
          }
          color: $calendar-today-color;
          @if ($skin-name == 'FluentUI') {
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
          @if $skin-name != 'tailwind3' {
            background: $calendar-focused-today-bg-style;
            border: $calendar-focused-today-border-style;
            box-shadow: $calendar-focused-today-box-shadow;
            color: $calendar-today-focused-font-color;
          }
        }
        #{if(&, '&', '*')} td.e-today:focus span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-focus-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-focus-bg-color;
          }
          @if $skin-name == 'fluent2' {
            background: $calendar-today-focus-bg-color;
          }
          border: $calendar-focus-border-color;
          @if $skin-name == 'fluent2' {
            border-radius: $calendar-today-border-radius;
          }
          @else {
            border-radius: $calendar-border-radius;
          }
          color: $calendar-today-focus-color;
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-today:hover span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today:hover span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-hover-color;
          }
          @if $skin-name == 'fluent2' {
            background: $calendar-today-hover-color;
            border-radius: $calendar-border-selected-radius;
          }
          border: $calendar-today-border-color;
          color: $calendar-today-focus-color;
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-today-bg-style;
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            background-color: $calendar-active-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-active-bg-color;
          }
          @if $skin-name == 'fluent2' {
            background: $calendar-focused-today-bg-style;
            border-radius: $calendar-today-border-radius;
          }
          border: $calendar-active-bg-border-color;
          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
            box-shadow: $calendar-selected-box-shadow;
          }
          @else {
            box-shadow: $calendar-active-bg-box-shadow;
          }
          @if $skin-name == 'tailwind3' {
            background: $calendar-focused-date-bg-style;
          }
          color: $calendar-active-today-font-color;
        }
        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day {
          @if $skin-name == 'fluent2' {
            border-radius: $calendar-today-border-radius;
          }
        }
        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
          @if $skin-name == 'tailwind3' {
            background: $calendar-active-bg-color;
            color: $calendar-active-font-colour;
            box-shadow: none;
            border-radius: $calendar-selected-span-border-radius;
          }
        }
        #{if(&, '&', '*')} td.e-selected.e-focused-date.e-today span.e-day {
          @if $skin-name == 'tailwind3' {
            background: $calendar-active-hover-bg-color;
            color: $calendar-active-today-hover-font-color;
            border-radius: $calendar-selected-span-border-radius;
          }
        }

        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
        #{if(&, '&', '*')} td.e-selected:hover span.e-day,
        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            background: $calendar-active-hover-bg-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-active-hover-bg-color;
          }
          @if $skin-name != 'tailwind3' {
            color: $calendar-active-today-hover-font-color;
          }
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} span {
          color: $calendar-text-color;
        }
        #{if(&, '&', '*')} .e-disabled span.e-day:hover {
          background: $calendar-none-style;
          border: 0;
          color: $calendar-disable-font-color;
        }
        #{if(&, '&', '*')} .e-other-month:hover span.e-day {
          @if ($skin-name != 'fabric-dark') {
            color: $calendar-other-month-date-hover-bg;
          }
        }
        #{if(&, '&', '*')} .e-other-month span.e-day,
        #{if(&, '&', '*')} .e-other-month.e-today span.e-day {
          color: $calendar-other-month-date;
        }
        #{if(&, '&', '*')} .e-other-month.e-today:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
          color: $calendar-other-month-date;
          @if ($skin-name == 'FluentUI') {
            background: $calendar-today-bg-style;
            border: $calendar-today-border-color;
            border-radius: $calendar-border-selected-radius;
            box-shadow: $calendar-today-box-shadow;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} thead {
          background: $calendar-week-header-bg-style;
          border-bottom: 0;
        }
        #{if(&, '&', '*')} td:hover span.e-day,
        #{if(&, '&', '*')} td:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
          border: $calendar-hover-border-color;
          border-radius: $calendar-border-radius;
          color: $calendar-hover-text;
        }
        #{if(&, '&', '*')} td:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-focus-bg-color;
            color: $calendar-text-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-focus-bg-color;
            color: $calendar-text-color-focus;
          }
          border: $calendar-focus-border-color;
          border-radius: $calendar-border-radius;
          @if ($skin-name == 'FluentUI') {
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-disabled span.e-day,
        #{if(&, '&', '*')} td.e-disabled:hover span.e-day,
        #{if(&, '&', '*')} td.e-disabled:focus span.e-day {
          background: $calendar-none-style;
          border: $calendar-none-style;
          color: $calendar-disable-font-color;
        }
        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay span.e-day,
        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:hover span.e-day,
        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:focus span.e-day {
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} td.e-selected span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            background-color: $calendar-active-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-active-bg-color;
          }
          @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
            background: $calendar-active-bg-color;
            color: $calendar-active-font-colour;
          }
          @else {
            color: $calendar-active-font-color;
          }
          border: $calendar-selected-border-color;
          @if $skin-name == 'tailwind3' {
            border-radius: $calendar-selected-span-border-radius;
          }
          @else {
            border-radius: $calendar-border-radius;
          }
        }
        #{if(&, '&', '*')} td.e-selected:not(.e-focused-date) span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            box-shadow: $calendar-selected-box-shadow;
          }
        }
        #{if(&, '&', '*')} .e-footer {
          color: $calendar-active-bg-color;
        }
        #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date span.e-day,
        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
        #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border-radius: $calendar-focused-state-border-radius;
            box-shadow: $calendar-focused-state-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-today.e-selected {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border-radius: $calendar-wrapper-border-radius;
            box-shadow: $calendar-selected-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-selected:hover span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border: $calendar-selected-border-color;
            border-radius: $calendar-border-radius;
            color: $calendar-active-font-colour;
          }
        }
        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border: $calendar-selected-border-color;
            border-radius: $calendar-focused-state-border-radius;
            color: $calendar-active-font-colour;
          }
        }
        #{if(&, '&', '*')}.e-month td.e-today span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            color: $calendar-today-focused-font-color;
          }
        }
        #{if(&, '&', '*')}.e-month td.e-disabled.e-today span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            color: $calendar-today-disabled-color;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-selected > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-selected > span.e-day,
        #{if(&, '&', '*')}.e-year td.e-selected:hover > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-selected:hover > span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-selected-month-bg-color;
            color: $calendar-selected-month-font-color;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-focused-date > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-focused-date > span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background: $calendar-none-style;
            border-radius: 0;
            box-shadow: $calendar-focused-state-month-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date.e-today {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            border-radius: $calendar-focused-state-border-radius;
            box-shadow: $calendar-focused-state-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            border-radius: $calendar-focused-state-border-radius;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-focused-date:hover > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-focused-date:hover > span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background: $calendar-hover-color;
            border-radius: 0;
            box-shadow: $calendar-focused-state-month-box-shadow;
          }
        }
      }
    }
    #{if(&, '&', '*')}.e-device {
      #{if(&, '&', '*')} .e-prev:hover,
      #{if(&, '&', '*')} .e-next:hover,
      #{if(&, '&', '*')} .e-prev:active,
      #{if(&, '&', '*')} .e-next:active,
      #{if(&, '&', '*')} .e-prev:focus,
      #{if(&, '&', '*')} .e-next:focus {
        background: $calendar-device-icon-hover-bg-color;
      }
      #{if(&, '&', '*')} button.e-prev:active span,
      #{if(&, '&', '*')} button.e-next:active span {
        color: $calendar-header-icon-color;
      }
    }

    #{if(&, '&', '*')} .e-footer-container {
      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary:not(:hover) {
        @if $skin-name == 'tailwind' {
          -webkit-tap-highlight-color: transparent;
          background-color: $calendar-today-btn-primary-bgcolor;
          border-color: $calendar-today-btn-primary-border-color;
          color: $calendar-today-btn-primary-color;
        }
      }

      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary.e-disabled {
        @if $skin-name == 'tailwind' {
          -webkit-tap-highlight-color: transparent;
          background-color: $calendar-today-btn-primary-disabled-bgcolor;
          border-color: $calendar-today-btn-primary-disabled-border-color;
          color: $calendar-today-btn-primary-disabled-color;
        }
      }
    }
  }

  .e-calendar .e-content.e-month .e-selected.e-focused-date {
    @if $skin-name == 'tailwind3' {
      box-shadow: none;
    }
  }
  .e-calendar .e-content.e-year td.e-selected span.e-day,
  .e-calendar .e-content.e-decade td.e-selected span.e-day {
    @if $skin-name == 'tailwind3' {
      border-radius: $calendar-active-content-border-radius;
    }
  }

  .e-small#{&}.e-calendar,
  .e-small #{&}.e-calendar {
    #{if(&, '&', '*')} .e-header {
      #{if(&, '&', '*')} .e-title {
        color: $calendar-small-title-font-color;
      }
    }
  }

  #{&}.e-calendar.e-disabled {
    #{if(&, '&', '*')} .e-footer-container {
      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary {
        @if $skin-name == 'tailwind' {
          -webkit-tap-highlight-color: transparent;
          background-color: $calendar-today-btn-primary-disabled-bgcolor;
          border-color: $calendar-today-btn-primary-disabled-border-color;
          color: $calendar-today-btn-primary-disabled-color;
        }
        @if $skin-name == 'tailwind3' {
          background: $calendar-today-disabled-background-style;
          border-color: $calendar-today-disabled-border-style;
          color: $calendar-today-disabled-color;
          box-shadow: $calendar-today-disabled-box-shadow;
        }
      }
    }
  }

  .e-calendar .e-zoomin {
    animation: animatezoom .3s;
  }

  @keyframes animatezoom {
    from {
      transform: scale(0);
    }

    to {
      transform: scale(1);
    }
  }

  .e-calendar .e-btn.e-today.e-flat.e-primary,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
      background-color: $today-button-bg;
      border: 0;
      border-color: $today-button-bg-border-color;
      color: $today-button-text-color;
    }
    @if $skin-name == 'fluent2' {
      color: $today-button-font-color;
      background: none;
      border-color: transparent;
    }
  }

  .e-calendar .e-btn.e-today.e-flat.e-primary:hover,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
      background-color: $today-button-hover-bg;
      border-color: $today-button-bg-border-hover-color;
      color: $today-button-text-hover-color;
    }
    @if $skin-name == 'fluent2' {
      color: $today-button-hover-font-color;
      background: none;
      border-color: transparent;
    }
  }

  .e-calendar .e-btn.e-today.e-flat.e-primary:active,
  .e-calendar .e-btn.e-today.e-flat.e-primary.e-active,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:active,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-active {
    @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
      background-color: $today-button-active-bg;
      border-color: $today-button-bg-border-active-color;
      color: $today-button-text-active-color;
    }
    @if $skin-name == 'FluentUI' {
      border: $calendar-none-style;
      outline: $calendar-none-style;
    }
    @if $skin-name == 'fluent2' {
      color: $today-button-active-font-color;
      background: none;
      border-color: transparent;
    }
  }

  .e-calendar .e-btn.e-today.e-flat.e-primary:focus,
  .e-calendar .e-btn.e-today.e-flat.e-primary.e-focus,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:focus,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-focus {
    @if $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
      background-color: $today-button-active-bg;
      border: $calendar-none-style;
      border-color: $today-button-bg-border-active-color;
      color: $today-button-text-active-color;
      outline: $calendar-none-style;
    }
    @if $skin-name == 'fluent2' {
      background: none;
      color: $today-button-font-color;
      box-shadow: $keyboard-focus;
      border-color: transparent;
    }
  }

  .e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
  .e-calendar .e-btn.e-today.e-flat.e-primary.e-disabled,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled,
  .e-calendar .e-css.e-btn.e-today.e-flat.e-primary.e-disabled {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      background-color: $calendar-today-disabled-background-style;
      border-color: $calendar-today-disabled-border-style;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' {
      color: $calendar-today-disabled-color;
    }
    @if $skin-name == 'fluent2' {
      border-color: transparent;
      color: $calendar-today-disabled-color;
    }
    @if $skin-name == 'tailwind3' {
      background-color: $calendar-today-disabled-background-style;
      border-color: $calendar-today-disabled-border-style;
    }
  }
  .e-calendar .e-calendar-content-table .e-cell.e-focused-cell span.e-day {
    box-shadow: $calendar-focused-cell-box-shadow;
    border-radius: $calendar-border-radius;
  }
}

@include export-module('calendar-material-icons') {

  /*! component icons */
  .e-calendar .e-header {
    #{if(&, '&', '*')} .e-date-icon-prev::before {
      content: '\e910';
    }

    #{if(&, '&', '*')} .e-date-icon-next::before {
      content: '\e916';
    }
  }
}

@include export-module('calendar-bigger') {

  .e-bigger#{&}.e-calendar,
  #{if(&, '&', '*')}.e-bigger #{&}.e-calendar {
    max-width: $calendar-bigger-max-width;
    min-width: $calendar-bigger-min-width;
    padding: $calendar-popup-bigger-padding;
    @if $skin-name == 'fluent2' {
      min-height: $calendar-bigger-min-height;
    }

    #{if(&, '&', '*')}.e-calendar-day-header-lg {
      max-width: $calendar-lg-day-header-format-max-width;
      min-width: $calendar-lg-day-header-format-min-width;
    }
    #{if(&, '&', '*')}.e-week {
      max-width: $calendar-week-bigger-max-width;
      min-width: $calendar-week-bigger-min-width;
    }
    #{if(&, '&', '*')}.e-week-number {
      min-width: $calendar-weeknumber-bigger-width;
    }
    #{if(&, '&', '*')} .e-header .e-title {
      font-size: $calendar-bigger-header-font-size;
      @if $skin-name == 'bootstrap5.3' {
        line-height: $calendar-bigger-header-line-height;
        padding: $calendar-bigger-header-title-padding;
      }
      @else {
        line-height: $calendar-bigger-header-height;
      }
      width: $calendar-bigger-header-width;
    }
    #{if(&, '&', '*')}:not(.e-rtl) .e-header.e-year .e-title,
    #{if(&, '&', '*')}:not(.e-rtl) .e-header.e-month .e-title {
      @if $skin-name == 'Material3' {
        margin-left: -3px;
      }
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      line-height: $calendar-bigger-header-height;
      text-indent: $calendar-bigger-rtl-header-text-indent;
    }
    #{if(&, '&', '*')} .e-header {
      height: $calendar-bigger-header-height;
      padding: $calendar-bigger-header-padding;

      #{if(&, '&', '*')} button {
        margin-right: $calendar-bigger-icon-margin;

        #{if(&, '&', '*')} span {
          font-size: $calendar-bigger-icon-font-size;
          padding: $calendar-bigger-icon-padding;
        }
      }

      #{if(&, '&', '*')}.e-year,
      #{if(&, '&', '*')}.e-decade {
        padding: $calendar-bigger-yeardecade-header-padding;
      }
    }
    #{if(&, '&', '*')} th {
      font-size: $calendar-bigger-week-header-font-size;
      height: $calendar-bigger-day-header-height;
      text-transform: $calendar-normal-day-header-text;
    }
    #{if(&, '&', '*')} .e-content {
      #{if(&, '&', '*')}.e-year span.e-day {
        font-size: $calendar-bigger-yeardecade-font-size;
        font-weight: $calendar-bigger-yeardecade-font-weight;
      }

      #{if(&, '&', '*')}.e-month table {
        padding: $calendar-bigger-table-month-padding;
      }

      #{if(&, '&', '*')}.e-year table,
      #{if(&, '&', '*')}.e-decade table	   {
        padding: $calendar-bigger-table-yeardecade-padding;
      }

      #{if(&, '&', '*')} .e-selected ,
      #{if(&, '&', '*')} .e-state-hover {
        border-radius: $calendar-zero-border-radius;
      }
      #{if(&, '&', '*')} span.e-day {
        font-size: $calendar-bigger-month-font-size;
        height: $calendar-bigger-month-view-height;
        line-height: $calendar-bigger-month-view-height;
        width: $calendar-bigger-month-view-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-month td.e-today span.e-day {
      line-height: $calendar-bigger-month-view-line-height;
    }
    #{if(&, '&', '*')} .e-content td.e-today span.e-day {
      @if $skin-name == 'FluentUI' {
        height: 29px;
        width: 29px;
        line-height: 29px;
      }
    }
    #{if(&, '&', '*')} .e-content.e-month td {
      height: $calendar-bigger-month-view-padding;
      padding: $calendar-bigger-month-view-padding;
    }
    #{if(&, '&', '*')} .e-content.e-year td,
    #{if(&, '&', '*')} .e-content.e-decade td {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        height: $calendar-bigger-year-decade-height;
        padding: $calendar-bigger-year-decade-padding;
      }
      @else {
        height: $calendar-bigger-year-decade-height;
        padding: $calendar-bigger-year-decade-padding;
        width: $calendar-bigger-year-decade-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        height: $calendar-bigger-year-decade-height;
        line-height: $calendar-bigger-year-decade-height;
        width: $calendar-bigger-year-decade-width;
      }
      @else {
        height: $calendar-bigger-year-decade-height-inside;
        line-height: $calendar-bigger-year-decade-height-inside;
        width: $calendar-bigger-year-decade-width;
      }
    }
    #{if(&, '&', '*')} .e-header .e-icon-container {
      #{if(&, '&', '*')} .e-prev,
      #{if(&, '&', '*')} .e-next  {
        height: $calendar-bigger-icon-size;
        width: $calendar-bigger-icon-size;
      }

      #{if(&, '&', '*')} .e-prev {
        @if $skin-name == 'tailwind' {
          margin: $calendar-bigger-down-icon-margin;
        }
      }
    }
    #{if(&, '&', '*')} .e-footer-container {
      @if $skin-name != 'tailwind3' {
        border-top: $calendar-bigger-footer-border;
      }
      padding: $calendar-bigger-footer-container-padding;
    }
    #{if(&, '&', '*')} .e-header .e-title {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        margin-left: $calendar-title-margin-bigger-small-left-style;
      }
    }

    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        text-indent: $calendar-rtl-bigger-text-indent;
      }
    }
  }

  .e-bigger .e-content-placeholder.e-calendar.e-placeholder-calendar,
  .e-bigger.e-content-placeholder.e-calendar.e-placeholder-calendar {
    background-size: 300px 392px;
    min-height: $calendar-bigger-placeholder-min-height;
  }

  .e-bigger.e-small #{&}.e-calendar {
    @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
      background: $calendar-bg-color;
      border-radius: $calendar-bgr-small-border-radius;
    }
    @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
      background-color: $calendar-bg-color;
    }
    border: $calendar-border-style;
    box-shadow: $calendar-box-shadow;
    #{if(&, '&', '*')} .e-date-icon-prev,
    #{if(&, '&', '*')} .e-date-icon-next {
      color: $calendar-header-icon-color;
    }
    #{if(&, '&', '*')} th {
      border-bottom: $border-zero;
      color: $calendar-week-header-font-color;
    }
    @at-root {
      #{if(&, '&', '*')} .e-header {
        border-bottom: $border-zero;
        #{if(&, '&', '*')} a {
          #{if(&, '&', '*')} span {
            border: $calendar-default-border-color;
            color: $calendar-icon-font-color;
          }
        }
        #{if(&, '&', '*')} .e-title {
          color: $calendar-title-font-color;
        }
        #{if(&, '&', '*')} .e-title:hover {
          background: $calendar-title-hover-bg-color;
          cursor: pointer;
          text-decoration: $calendar-title-decoration-style;
          @if $skin-name == 'fluent2' {
            color: $calendar-title-hover-color;
          }
        }
        #{if(&, '&', '*')} .e-title:focus {
          box-shadow: $calendar-title-focus-box-shadow;
          @if $skin-name != 'fluent2' {
            background: $calendar-title-focus-background;
          }
          @if $skin-name == 'highcontrast' {
            text-decoration: none;
          }
          @else {
            text-decoration: $calendar-title-decoration-style;
          }
        }
        #{if(&, '&', '*')} .e-title:active {
          @if $skin-name == 'fluent2' {
            background: $calendar-title-active-background;
            color: $calendar-title-active-color;
          }
          @else {
            box-shadow: $calendar-box-shadow;
            background: $calendar-title-active-background;
            text-decoration: $calendar-title-decoration-style;
          }
        }
        #{if(&, '&', '*')} .e-prev:hover > span,
        #{if(&, '&', '*')} .e-next:hover > span {
          border: $calendar-icon-hover-border-color;
          color: $calendar-icon-hover-color;
          cursor: pointer;
        }

        #{if(&, '&', '*')} .e-prev:hover,
        #{if(&, '&', '*')} .e-next:hover {
          background: $calendar-icon-hover-bg-color;
          @if $skin-name == 'fluent2' {
            color: $calendar-active-font-color;
          }
        }
        #{if(&, '&', '*')} .e-prev:focus,
        #{if(&, '&', '*')} .e-next:focus {
          box-shadow: $calendar-icon-focus-box-shadow;
        }
        #{if(&, '&', '*')} .e-prev:active,
        #{if(&, '&', '*')} .e-next:active {
          background: $calendar-active-state-icon-bg-color;
          color: $calendar-active-font-color;
        }
        #{if(&, '&', '*')} button.e-prev:active span,
        #{if(&, '&', '*')} button.e-next:active span {
          border: $calendar-selected-border-color;
          color: $calendar-active-icon-color;
        }
        #{if(&, '&', '*')}.e-decade .e-title {
          @if $skin-name != 'fluent2' {
            color: $calendar-light-font;
            cursor: default;
          }
        }
        #{if(&, '&', '*')} .e-next.e-disabled span,
        #{if(&, '&', '*')} .e-prev.e-disabled span {
          color: $calendar-disable-font-color;
          font-weight: $calendar-disable-font-weight-style;
        }
        #{if(&, '&', '*')} .e-next.e-disabled,
        #{if(&, '&', '*')} .e-prev.e-disabled {
          opacity: $calendar-disable-opacity;
        }
      }
      #{if(&, '&', '*')} .e-content.e-year,
      #{if(&, '&', '*')} .e-content.e-decade {
        #{if(&, '&', '*')} td.e-selected span.e-day {
          @if $skin-name == 'fluent2' {
            font-weight: $font-weight-semibold;
          }
        }
      }
      #{if(&, '&', '*')} .e-content {
        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell:first-child span.e-day,
        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell:last-child span.e-day {
          color: $calendar-other-decade-cell-color;
        }
        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell:first-child.e-selected span.e-day,
        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell:last-child.e-selected span.e-day {
          color: $calendar-active-font-color;
        }
        #{if(&, '&', '*')}.e-decade tr:first-child .e-cell.e-disabled:first-child span.e-day,
        #{if(&, '&', '*')}.e-decade tr:last-child .e-cell.e-disabled:last-child span.e-day {
          color: $calendar-disable-font-color;
        }
        #{if(&, '&', '*')}.e-year td:hover span.e-day,
        #{if(&, '&', '*')}.e-decade td:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name == 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-yeardecade-selected-hover-bg;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-yeardecade-selected-hover-bg;
          }
        }

        #{if(&, '&', '*')}.e-year td > span.e-day,
        #{if(&, '&', '*')}.e-decade td > span.e-day {
          background: $calendar-yeardecade-bg-color;
        }

        #{if(&, '&', '*')} .e-week-number span {
          color: $calendar-week-number-color-style;
        }

        #{if(&, '&', '*')} td.e-focused-date span.e-day,
        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day,
        #{if(&, '&', '*')} td.e-focused-date:focus span.e-day {
          @if $skin-name != 'tailwind3' {
            background: $calendar-focused-date-bg-style;
          }
          border: $calendar-focus-border-color;
          border-radius: $calendar-border-radius;
          box-shadow: $calendar-focus-box-shadow;
          @if ($skin-name == 'FluentUI') {
            background: none;
            border-radius: $calendar-focused-state-border-radius;
            box-shadow: $calendar-focused-state-box-shadow;
          }
          @if $skin-name == 'fluent2' {
            font-weight: $font-weight-semibold;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
          border: $calendar-hover-border-color;
          border-radius: $calendar-border-radius;
          color: $calendar-text-color;
        }
        #{if(&, '&', '*')} td.e-today span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
          background: $calendar-today-bg-style;
          border: $calendar-today-border-color;
          @if $skin-name != 'fluent2' {
            border-radius: $calendar-border-radius;
          }
          @else {
            border-radius: $calendar-today-border-radius;
          }
          box-shadow: $calendar-today-box-shadow;
          color: $calendar-today-color;
          @if ($skin-name == 'FluentUI') {
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date.e-today span.e-day {
          background: $calendar-focused-today-bg-style;
          border: $calendar-focused-today-border-style;
          box-shadow: $calendar-focused-today-box-shadow;
          color: $calendar-today-focused-font-color;
        }
        #{if(&, '&', '*')} td.e-today:focus span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-focus-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-focus-bg-color;
          }
          @if $skin-name == 'fluent2' {
            background: $calendar-today-focus-bg-color;
          }
          border: $calendar-focus-border-color;
          @if $skin-name == 'fluent2' {
            border-radius: $calendar-today-border-radius;
          }
          @else {
            border-radius: $calendar-border-radius;
          }
          color: $calendar-today-focus-color;
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-today:hover span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today:hover span.e-day,
        #{if(&, '&', '*')} td.e-focused-date.e-today:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-hover-color;
          }
          @if $skin-name == 'fluent2' {
            background: $calendar-today-hover-color;
            border-radius: $calendar-border-selected-radius;
          }
          border: $calendar-today-border-color;
          color: $calendar-today-focus-color;
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-today-bg-style;
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-active-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-active-bg-color;
          }
          @if $skin-name == 'fluent2' {
            background: $calendar-focused-today-bg-style;
            border-radius: $calendar-today-border-radius;
          }
          border: $calendar-active-bg-border-color;
          @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
            box-shadow: $calendar-selected-box-shadow;
          }
          @else {
            box-shadow: $calendar-active-bg-box-shadow;
          }
          color: $calendar-active-today-font-color;
        }
        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day {
          @if $skin-name == 'fluent2' {
            border-radius: $calendar-today-border-radius;
          }
        }

        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
        #{if(&, '&', '*')} td.e-selected:hover span.e-day,
        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            background-color: $calendar-active-hover-bg-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-active-hover-bg-color;
          }
          color: $calendar-active-today-hover-font-color;
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} span {
          color: $calendar-text-color;
        }
        #{if(&, '&', '*')} .e-disabled span.e-day:hover {
          background: $calendar-none-style;
          border: $border-zero;
          color: $calendar-disable-font-color;
        }
        #{if(&, '&', '*')} .e-other-month:hover span.e-day {
          @if ($skin-name != 'fabric-dark') {
            color: $calendar-other-month-date-hover-bg;
          }
        }
        #{if(&, '&', '*')} .e-other-month span.e-day,
        #{if(&, '&', '*')} .e-other-month.e-today span.e-day {
          color: $calendar-other-month-date;
        }
        #{if(&, '&', '*')} .e-other-month.e-today:hover span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
          color: $calendar-other-month-date;
          @if ($skin-name == 'FluentUI') {
            background: $calendar-today-bg-style;
            border: $calendar-today-border-color;
            border-radius: $calendar-border-selected-radius;
            box-shadow: $calendar-today-box-shadow;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} thead {
          background: $calendar-week-header-bg-style;
          border-bottom: $border-zero;
        }
        #{if(&, '&', '*')} td:hover span.e-day,
        #{if(&, '&', '*')} td:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-hover-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-hover-color;
          }
          border: $calendar-hover-border-color;
          border-radius: $calendar-border-radius;
          color: $calendar-hover-text;
        }
        #{if(&, '&', '*')} td:focus span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
            background-color: $calendar-focus-bg-color;
            color: $calendar-text-color;
          }
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $calendar-focus-bg-color;
            color: $calendar-text-color-focus;
          }
          border: $calendar-focus-border-color;
          border-radius: $calendar-border-radius;
          @if ($skin-name == 'FluentUI') {
            border-radius: $calendar-border-selected-radius;
          }
        }
        #{if(&, '&', '*')} td.e-disabled span.e-day,
        #{if(&, '&', '*')} td.e-disabled:hover span.e-day,
        #{if(&, '&', '*')} td.e-disabled:focus span.e-day {
          background: $calendar-none-style;
          border: $calendar-none-style;
          color: $calendar-disable-font-color;
        }
        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay span.e-day,
        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:hover span.e-day,
        #{if(&, '&', '*')} td.e-today.e-disabled.e-overlay:focus span.e-day {
          @if ($skin-name == 'FluentUI') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} td.e-selected span.e-day {
          @if ($skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            background-color: $calendar-active-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $calendar-active-bg-color;
          }
          @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
            background: $calendar-active-bg-color;
            color: $calendar-active-font-colour;
          }
          @else {
            color: $calendar-active-font-color;
          }
          border: $calendar-selected-border-color;
          @if $skin-name == 'tailwind3' {
            border-radius: $calendar-selected-span-border-radius;
          }
          @else {
            border-radius: $calendar-border-radius;
          }
        }
        #{if(&, '&', '*')} td.e-selected:not(.e-focused-date) span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            box-shadow: $calendar-selected-box-shadow;
          }
        }
        #{if(&, '&', '*')} .e-footer {
          color: $calendar-active-bg-color;
        }
        #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date span.e-day,
        #{if(&, '&', '*')} td.e-today.e-selected:hover span.e-day,
        #{if(&, '&', '*')} td.e-today.e-selected span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-focused-today-bg-style;
            border-radius: $calendar-border-selected-radius;
            color: $calendar-today-color;
          }
        }
        #{if(&, '&', '*')} td.e-today.e-selected.e-focused-date {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border-radius: $calendar-focused-state-border-radius;
            box-shadow: $calendar-focused-state-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-today.e-selected {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border-radius: $calendar-wrapper-border-radius;
            box-shadow: $calendar-selected-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-selected:hover span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border: $calendar-selected-border-color;
            border-radius: $calendar-border-radius;
            color: $calendar-active-font-color;
          }
        }
        #{if(&, '&', '*')} td.e-selected.e-focused-date span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-active-bg-color;
            border: $calendar-selected-border-color;
            border-radius: $calendar-focused-state-border-radius;
            color: $calendar-active-font-color;
          }
        }
        #{if(&, '&', '*')}.e-month td.e-today span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            color: $calendar-today-focused-font-color;
          }
        }
        #{if(&, '&', '*')}.e-month td.e-disabled.e-today span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            color: $calendar-today-disabled-color;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-selected > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-selected > span.e-day,
        #{if(&, '&', '*')}.e-year td.e-selected:hover > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-selected:hover > span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background-color: $calendar-selected-month-bg-color;
            color: $calendar-week-header-font-color;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-focused-date > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-focused-date > span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background: $calendar-none-style;
            border-radius: $calendar-zero-border-radius;
            box-shadow: $calendar-focused-state-month-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date.e-today {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            border-radius: $calendar-focused-state-border-radius;
            box-shadow: $calendar-focused-state-box-shadow;
          }
        }
        #{if(&, '&', '*')} td.e-focused-date:hover span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            border-radius: $calendar-focused-state-border-radius;
          }
        }
        #{if(&, '&', '*')}.e-year td.e-focused-date:hover > span.e-day,
        #{if(&, '&', '*')}.e-decade td.e-focused-date:hover > span.e-day {
          @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
            background: $calendar-hover-color;
            border-radius: $calendar-zero-border-radius;
            box-shadow: $calendar-focused-state-month-box-shadow;
          }
        }
      }
    }
    #{if(&, '&', '*')}.e-device {
      #{if(&, '&', '*')} .e-prev:hover,
      #{if(&, '&', '*')} .e-next:hover,
      #{if(&, '&', '*')} .e-prev:active,
      #{if(&, '&', '*')} .e-next:active,
      #{if(&, '&', '*')} .e-prev:focus,
      #{if(&, '&', '*')} .e-next:focus {
        background: $calendar-device-icon-hover-bg-color;
      }
      #{if(&, '&', '*')} button.e-prev:active span,
      #{if(&, '&', '*')} button.e-next:active span {
        color: $calendar-header-icon-color;
      }
    }

    #{if(&, '&', '*')} .e-footer-container {
      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary:not(:hover) {
        @if $skin-name == 'tailwind' {
          -webkit-tap-highlight-color: transparent;
          background-color: $calendar-today-btn-primary-bgcolor;
          border-color: $calendar-today-btn-primary-border-color;
          color: $calendar-today-btn-primary-color;
        }
      }

      #{if(&, '&', '*')} .e-btn.e-today.e-flat.e-primary.e-disabled {
        @if $skin-name == 'tailwind' {
          -webkit-tap-highlight-color: transparent;
          background-color: $calendar-today-btn-primary-disabled-bgcolor;
          border-color: $calendar-today-btn-primary-disabled-border-color;
          color: $calendar-today-btn-primary-disabled-color;
        }
      }
    }
  }

  .e-bigger.e-small #{&}.e-calendar {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;
    border-radius: $calendar-wrapper-border-radius;
    display: $calendar-block-style;
    overflow: auto;
    user-select: $calendar-none-style;

    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      float: $calendar-float-right-style;
      text-align: $calendar-float-right-style;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-icon-container {
      float: $calendar-float-left-style;
    }
    #{if(&, '&', '*')} .e-header {
      background: $calendar-none-style;
      display: table;
      font-weight: $calendar-spanicon-font-weight-style;
      position: relative;
      text-align: center;
      width: $calendar-full-width;

      #{if(&, '&', '*')} button {
        background: transparent;
        border: $border-zero;
        margin-right: $calendar-icon-button-margin;
        padding: $padding-zero;
        text-decoration: $calendar-none-style;
      }
      #{if(&, '&', '*')} span {
        cursor: $calendar-cursor-pointer-style;
        display: inline-block;
        font-size: $calendar-icon-font-size-style;
        font-weight: $calendar-spanicon-font-weight-style;
        line-height: $calendar-icon-line-height;
        padding: $calendar-icon-padding;
        vertical-align: middle;

        #{if(&, '&', '*')}.e-disabled {
          cursor: $calendar-cursor-default-style;
        }
      }
    }
    #{if(&, '&', '*')} .e-week-header {
      padding: $calendar-thead-padding;
    }
    #{if(&, '&', '*')} th {
      cursor: $calendar-cursor-default-style;
      font-size: $calendar-header-font-size;
      font-weight: normal;
      text-align: center;
    }
    #{if(&, '&', '*')} .e-content {
      #{if(&, '&', '*')} .e-selected ,
      #{if(&, '&', '*')} .e-state-hover {
        border-radius: $calendar-zero-border-radius;
      }
      #{if(&, '&', '*')} span.e-day {
        border-radius: $calendar-zero-border-radius;
        cursor: $calendar-cursor-pointer-style;
        display: $calendar-inline-block-style;
        font-size: $calendar-date-font-size;
        overflow: hidden;
        padding: $padding-zero;
        text-align: center;
        text-decoration: $calendar-none-style;
        vertical-align: middle;
      }
      #{if(&, '&', '*')} th,
      #{if(&, '&', '*')} td {
        box-sizing: border-box;
      }
      #{if(&, '&', '*')} td.e-disabled {
        opacity: $calendar-disable-opacity;
        pointer-events: $calendar-none-style;
        touch-action: $calendar-none-style;
      }
      #{if(&,'&','*')} td.e-disabled.e-today {
        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'highcontrast' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
          opacity: 1;
          #{if(&,'&','*')} span.e-day {
            box-shadow: $calendar-disabled-today-box-shadow;
            color: $calendar-disabled-today-font-color;
          }
        }
      }
      #{if(&, '&', '*')} td {
        cursor: pointer;
        padding: $calendar-yeardeacde-span-padding;
        text-align: center;
        #{if(&, '&', '*')}.e-week-number {
          color: $calendar-week-number-font-color;
          font-size: $calendar-week-number-font-size-style;
          font-style: $calendar-week-number-font-style;
          font-weight: $calendar-week-number-font-weight;
          @if $skin-name == 'FluentUI' {
            background-color: $calendar-week-number-bg-color;
            border-right: $calendar-week-number-border;
          }
          @if $skin-name == 'fluent2' {
            border-right: $calendar-week-number-border;
          }
        }
        #{if(&, '&', '*')}.e-overlay {
          background: $calendar-none-style;
          width: initial;
        }
      }
      #{if(&, '&', '*')} td:hover {
        @if skin-name == 'fluent2' {
          border-radius: $calendar-td-hover-border-radius;
          background: $calendar-hover-border-color;
        }
      }

      table {
        border-collapse: separate;
        border-spacing: 0;
        border-width: $border-zero;
        float: $calendar-float-left-style;
        margin: $margin-zero;
        outline: 0;
        padding: $calendar-table-padding;
        table-layout: fixed;
        width: $calendar-full-width;
      }
      #{if(&, '&', '*')} td.e-other-month > span.e-day,
      #{if(&, '&', '*')} td.e-other-year > span.e-day {
        display: $calendar-other-month-display-style;
        font-weight: $calendar-link-font-weight-style;
      }
      #{if(&, '&', '*')} tr.e-month-hide {
        display: $calendar-other-month-row-display-style;
        font-weight: $calendar-link-font-weight-style;
      }
      #{if(&, '&', '*')} tr.e-month-hide,
      #{if(&, '&', '*')} td.e-other-month,
      #{if(&, '&', '*')} td.e-other-year {
        pointer-events: $calendar-pointer-events;
        touch-action: $calendar-pointer-events;
      }
      #{if(&, '&', '*')} tr.e-month-hide,
      #{if(&, '&', '*')} td.e-other-month.e-disabled,
      #{if(&, '&', '*')} td.e-other-year.e-disabled {
        pointer-events: $calendar-none-style;
        touch-action: $calendar-none-style;
      }
      #{if(&, '&', '*')} td.e-week-number:hover span.e-day,
      #{if(&, '&', '*')} td.e-week-number:hover {
        @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
          background-color: $calendar-bg-color;
        }
        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
          background: $calendar-bg-color;
        }
        cursor: $calendar-cursor-default-style;
        @if $skin-name == 'FluentUI' {
          background-color: $calendar-week-number-bg-color;
        }
      }
    }
    #{if(&, '&', '*')} .e-header {
      #{if(&, '&', '*')} .e-prev,
      #{if(&, '&', '*')} .e-next {
        border-radius: $calendar-border-radius;
        display: inline-block;
        font-size: $calendar-next-prev-icon-size;
        vertical-align: middle;
      }
      #{if(&, '&', '*')} .e-title {
        cursor: $calendar-cursor-pointer-style;
        display: $calendar-inline-block-style;
        float: $calendar-float-left-style;
        font-size: $calendar-title-font-size;
        font-weight: $calendar-title-font-weight-style;
        text-align: $calendar-float-left-style;
        padding: $calendar-header-title-padding;
        border: $calendar-none-style;
        border-radius: $calendar-title-border-radius;
      }
      #{if(&, '&', '*')} .e-title {
        margin-left: $calendar-title-margin-left-style;
      }
      #{if(&, '&', '*')} .e-prev:hover,
      #{if(&, '&', '*')} .e-next:hover {
        cursor: $calendar-cursor-pointer-style;
      }
      #{if(&, '&', '*')} .e-prev.e-overlay,
      #{if(&, '&', '*')} .e-next.e-overlay {
        background: $calendar-none-style;
      }
    }
    #{if(&, '&', '*')} .e-header.e-decade .e-title,
    #{if(&, '&', '*')} .e-header.e-year .e-title {
      margin-left: $calendar-decade-title-left-margin-style;
    }
    #{if(&, '&', '*')} .e-header.e-decade .e-title {
      cursor: $calendar-cursor-default-style;
    }
    #{if(&, '&', '*')} .e-header .e-icon-container {
      display: $calendar-inline-block-style;
      float: $calendar-float-right-style;
      padding-top: $calendar-icon-padding-top;
    }
    #{if(&, '&', '*')} .e-footer-container {
      text-transform: uppercase;
    }
  }

  .e-bigger.e-small #{&}.e-calendar {
    @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
      border-spacing: 0;
      max-width: $calendar-normal-max-width;
      min-width: $calendar-normal-min-width;
      padding: $calendar-popup-padding;
    }
    @else {
      border-spacing: 0;
      max-width: $calendar-normal-max-width;
      min-width: $calendar-normal-min-width;
      padding: $calendar-popup-padding;
      min-height: $calendar-normal-min-height;
    }

    #{if(&, '&', '*')}.e-calendar-day-header-lg {
      max-width: $calendar-lg-day-header-format-max-width;
      min-width: $calendar-lg-day-header-format-min-width;
    }
    #{if(&, '&', '*')}.e-week-number {
      min-width: $calendar-weeknumber-min-width;
    }

    #{if(&, '&', '*')}.e-week {
      max-width: $calendar-week-normal-max-width;
      min-width: $calendar-week-normal-min-width;
    }
    #{if(&, '&', '*')} .e-header .e-title {
      line-height: $calendar-normal-header-height;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      text-align: $calendar-float-right-style;
      text-indent: $calendar-rtl-text-indent;
    }
    #{if(&, '&', '*')} .e-header {
      height: $calendar-normal-header-height;

      #{if(&, '&', '*')}.e-month {
        padding: $calendar-normal-header-padding;
      }

      #{if(&, '&', '*')}.e-year,
      #{if(&, '&', '*')}.e-decade {
        padding: $calendar-yeardecade-header-padding;
      }
    }
    #{if(&, '&', '*')} th {
      font-weight: $calendar-normal-day-header-font-weight;
      height: $calendar-normal-day-header-height;
      text-transform: $calendar-normal-day-header-text;
    }
    #{if(&, '&', '*')} .e-content {
      #{if(&, '&', '*')} .e-selected ,
      #{if(&, '&', '*')} .e-state-hover {
        border-radius: $calendar-zero-border-radius;
      }
      #{if(&, '&', '*')} span.e-day {
        border: $calendar-default-border-color;
        font-size: $calendar-date-font-size;
        font-weight: $calendar-link-font-weight-style;
        height: $calendar-normal-month-view-height;
        line-height: $calendar-normal-month-view-height;
        width: $calendar-normal-month-view-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-month td.e-today span.e-day {
      line-height: $calendar-normal-month-view-line-height;
    }
    #{if(&, '&', '*')} .e-content td.e-today span.e-day {
      @if $skin-name == 'FluentUI' {
        height: 25px;
        width: 25px;
        line-height: 25px;
      }
    }
    #{if(&, '&', '*')} .e-content.e-year table,
    #{if(&, '&', '*')} .e-content.e-decade table {
      border-spacing: 0;
      padding: $calendar-yeardecade-padding;
    }
    #{if(&, '&', '*')} .e-content.e-month td {
      height: $calendar-normal-month-view-height;
      padding: $calendar-normal-month-cell-padding;
    }
    #{if(&, '&', '*')} .e-content .tfooter > tr > td {
      height: $calendar-normal-today-button-height;
      line-height: $calendar-normal-today-button-height;
    }
    #{if(&, '&', '*')} .e-content.e-year td,
    #{if(&, '&', '*')} .e-content.e-decade td {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        height: $calendar-normal-year-decade-height;
        padding: $calendar-normal-year-decade-padding;
      }
      @else {
        height: $calendar-normal-year-decade-height;
        padding: $calendar-normal-year-decade-padding;
        width: $calendar-normal-year-decade-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-year td > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td > span.e-day {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        font-weight: $calendar-yeardecade-font-weight;
        height: $calendar-normal-year-decade-height;
        line-height: $calendar-normal-year-decade-height;
        width: $calendar-normal-year-decade-width;
      }
      @else {
        font-weight: $calendar-yeardecade-font-weight;
        height: $calendar-normal-year-decade-height-inside;
        line-height: $calendar-normal-year-decade-height-inside;
        width: $calendar-normal-year-decade-width;
      }
    }
    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date) > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date) > span.e-day,
    #{if(&, '&', '*')} .e-content.e-year td.e-selected:not(.e-focused-date):hover > span.e-day,
    #{if(&, '&', '*')} .e-content.e-decade td.e-selected:not(.e-focused-date):hover > span.e-day {
      @if ($skin-name == 'FluentUI') {
        box-shadow: $calendar-none-style;
      }
    }
    #{if(&, '&', '*')} .e-header .e-icon-container {
      #{if(&, '&', '*')} .e-prev,
      #{if(&, '&', '*')} .e-next {
        height: $calendar-normal-icon-size;
        width: $calendar-normal-icon-size;
      }

      #{if(&, '&', '*')} .e-prev {
        @if $skin-name == 'tailwind' {
          margin: $calendar-normal-down-icon-margin;
        }
      }
    }
    #{if(&, '&', '*')} .e-footer-container {
      @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
        background-color: $calendar-footer-background;
      }
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        background: $calendar-footer-background;
      }
      @if $skin-name == 'tailwind3' {
        text-align: right;
      }
      @if $skin-name != 'tailwind3' {
        border-top: $calendar-footer-border;
        text-align: center;
      }
      cursor: $calendar-cursor-default-style;
      display: $calendar-display-style;
      flex-direction: row;
      justify-content: flex-end;
      padding: $calendar-footer-container-padding;
      width: $calendar-full-width;
    }
    #{if(&, '&', '*')}.e-rtl .e-header .e-title {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        text-indent: $calendar-rtl-bigger-small-text-indent;
      }
    }
  }

  .e-small.e-bigger#{&}.e-calendar,
  .e-small.e-bigger #{&}.e-calendar {
    @if $skin-name == 'tailwind' {
      max-width: $calendar-bigger-small-max-width;
      min-width: $calendar-bigger-small-min-width;
    }

    #{if(&, '&', '*')} .e-footer-container {
      @if $skin-name == 'tailwind' {
        padding: $calendar-bigger-small-footer-container-padding;
      }
    }

    #{if(&, '&', '*')} .e-content.e-year {
      #{if(&, '&', '*')} span.e-day {
        font-size: $calendar-bigger-small-yeardecade-font-size;
      }
    }

    #{if(&, '&', '*')} .e-header {
      #{if(&, '&', '*')}.e-month,
      #{if(&, '&', '*')}.e-year,
      #{if(&, '&', '*')}.e-decade {
        @if $skin-name == 'tailwind' {
          padding: $calendar-bigger-small-header-padding;
        }
      }

      #{if(&, '&', '*')} .e-icon-container .e-prev {
        @if $skin-name == 'tailwind' {
          margin: $calendar-bigger-small-down-icon-margin;
        }
      }
    }

    #{if(&, '&', '*')} .e-content.e-month table {
      padding: $calendar-bigger-small-table-padding;
    }

    #{if(&, '&', '*')} .e-content.e-year table,
    #{if(&, '&', '*')} .e-content.e-decade table {
      @if $skin-name == 'tailwind' {
        padding: $calendar-bigger-small-table-padding;
      }
    }

    #{if(&, '&', '*')} th {
      @if $skin-name == 'tailwind' {
        height: $calendar-bigger-small-day-header-height;
      }
    }

    #{if(&, '&', '*')} .e-content {
      #{if(&, '&', '*')} span.e-day {
        @if $skin-name == 'tailwind' {
          height: $calendar-bigger-small-month-view-height;
          line-height: $calendar-bigger-small-month-view-height;
          width: $calendar-bigger-small-month-view-width;
        }
      }

      #{if(&, '&', '*')}.e-month td.e-today span.e-day {
        @if $skin-name == 'tailwind' {
          line-height: $calendar-bigger-small-month-view-line-height;
        }
      }
      #{if(&, '&', '*')}.e-month td {
        @if $skin-name == 'tailwind' {
          height: $calendar-bigger-small-month-view-height;
        }
      }
    }

    #{if(&, '&', '*')} .e-content span.e-day {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        height: $calendar-day-bigger-small-cell-size;
        width: $calendar-day-bigger-small-cell-size;
      }
    }
    #{if(&, '&', '*')} .e-header .e-title {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        margin-left: $calendar-title-margin-bigger-small-left-style;
      }
    }
  }

  .e-bigger.e-small .e-calendar .e-content td.e-today:hover {
    @if $skin-name == 'fluent2' {
      background: $calendar-hover-border-color;
      border-radius: $calendar-content-td-border-radius;
    }
  }
}

/*! component's default definitions and variables */
$card-img-brdr-radious: 50% !default;
$card-brdr-radious: $border-radius !default;
$card-action-btn-txt-transform: none !default;
$card-bg-color: $default-bg-color !default;
$card-focus-bg-color: $default-bg-color !default;
$card-hover-bg-color: $default-bg-color !default;
$card-active-bg-color: $default-bg-color !default;
$card-focus-brdr-color: $default-border-color !default;
$card-hover-brdr-color: $default-border-color !default;
$card-active-brdr-color: $default-border-color !default;
$card-highlight-color: rgba(0, 0, 0, 0) !default;
$card-hover-box-shadow: $shadow-color !default;

$card-content-line-height: normal !default;
$card-title-nrml-lheight: 12px !default;
$card-title-bigger-lheight: 13px !default;
$card-header-image-width: 40px !default;
$card-header-image-height: 40px !default;
$card-header-minheight: 30px !default;
$card-header-nrml-padding: 16px 0 16px 16px !default;
$card-header-txt-nrml-padding: 0 0 0 8px !default;
$card-action-btn-font: 14px !default;
$card-nrml-content-padding: 16px !default;
$card-nrml-nested-content-padding: 16px !default;
$card-content-font-size: 14px !default;
$card-content-bigger-font-size: 16px !default;
$card-title-nrml-padding: 8px !default;
$card-action-nrml-padding: 8px !default;
$card-action-nrml-nested-margin: 8px !default;
$card-action-nrml-vertical-padding: 0 8px !default;
$card-action-nrml-btn-vertical-margin: 0 0 8px 0 !default;
$card-action-btn-nrml-margin: 0 0 0 8px !default;
$card-action-btn-nrml-padding: 0 6px !default;
$card-action-btn-nrml-height: 36px !default;
$card-action-btn-nrml-line-height: 36px !default;
$card-action-btn-nrml-min-height: 36px !default;
$card-nrml-mheight: 48px !default;
$card-nrml-lheight: 16px !default;
$card-nrml-padding: 16px 0 !default;
$card-image-mheight: 150px !default;
$card-image-title-font: 24px !default;
$card-image-title-lheight: 22px !default;
$card-header-txt-title-nrml-padding: 0 0 8px !default;
$card-header-txt-title-font: 15px !default;
$card-header-font: 15px !default;
$card-header-padding: 16px !default;
$card-header-lheight: 16px !default;
$card-title-font: 18px !default;
$card-image-title-nrml-padding: 16px !default;
$card-hor-image-margin: 2px !default;
$card-header-txt-subtitle-font: 14px !default;
$card-header-txt-subtitle-lheight: 14px !default;
$card-header-txt-title-lheight: 18px !default;
$card-header-title-font: 15px !default;
$card-header-sub-title-font: 14px !default;
$card-image-title-mheight: 40px !default;
$card-header-txt-nrml-title-font: 13px !default;
$card-header-txt-nrml-subtitle-font: 12px !default;
$card-action-btn-icon-width: 24px !default;
$card-action-btn-icon-height: 24px !default;
$card-nrml-font-size: 15px !default;
$card-normal-line-height: normal !default;
$card-corner-border-radius: 50% !default;
$card-header-title-font-weight: normal !default;
$card-sub-title-font-weight: normal !default;
$card-btn-border-radius: 2px !default;
$card-font-family: $font-family !default;

//bigger

$card-bigger-lheight: 36px !default;
$card-bigger-mheight: 36px !default;
$card-header-bigger-padding: 12px !default;
$card-header-bigger-lheight: 12px !default;
$card-title-bigger-margin: 18px 12px 12px !default;
$card-hor-image-bigger-margin: 2px !default;
$card-sep-bigger-margin: 12px 0 !default;
$card-header-bigger-minheight: 22.5px !default;
$card-header-bigger-padding: 12px !default;
$card-header-txt-bigger-padding: 0 0 0 12px !default;
$card-header-txt-title-bigger-lheight: 13.5px !default;
$card-header-txt-title-bigger-padding: 0 0 6px !default;
$card-header-txt-subtitle-bigger-lheight: 10.5px !default;
$card-header-image-bigger-width: 30px !default;
$card-header-image-bigger-height: 30px !default;
$card-image-bigger-mheight: 112.5px !default;
$card-image-title-bigger-lheight: 18px !default;
$card-image-title-bigger-mheight: 30px !default;
$card-img-title-bigger-padding: 6px !default;
$card-action-bigger-padding: 6px !default;
$card-action-bigger-vertical-padding: 0 6px !default;
$card-action-bigger-btn-vertical-margin: 0 0 6px 0 !default;
$card-action-btn-bigger-height: 27px !default;
$card-action-btn-bigger-line-height: 27px !default;
$card-action-btn-bigger-min-height: 27px !default;
$card-action-btn-bigger-margin: 0 0 0 6px !default;
$card-action-btn-bigger-padding: 0 6px !default;
$card-bigger-content-padding: 12px !default;
$card-header-txt-bigger-title-font: 15px !default;
$card-header-txt-bigger-subtitle-font: 14px !default;
$card-image-title-bigger-font: 24px !default;
$card-action-btn-bigger-icon-width: 24px !default;
$card-action-btn-bigger-icon-height: 24px !default;

$card-padding-none: 0 !default;
$card-margin-none: 0 !default;
$card-horizontal-padding: 2px !default;

//color

$card-brdr-size: 1px !default;
$card-brdr-type: solid !default;
$card-brdr-color: $default-border-color !default;
$card-sep-margin: 16px 0 !default;
$card-sep-brdr-size: 1px !default;
$card-sep-brdr-type: solid !default;
$card-sep-brdr-color: $default-border-color !default;
$card-image-title-color: $default-font-color !default;
$card-image-title-bg: $default-bg-color !default;
$card-action-btn-bg-color: $default-bg-color !default;
$card-action-btn-font-color: $default-font-color !default;
$card-action-btn-border: 0 !default;
$card-action-btn-hover-bg: $default-bg-color !default;
$card-action-btn-hover-border: 0 !default;
$card-action-btn-hover-font: $default-font-color !default;
$card-action-btn-focus-bg: $default-bg-color !default;
$card-action-btn-focus-border: 0 !default;
$card-action-btn-focus-font: $default-font-color !default;
$card-action-btn-pressed-bg: $default-bg-color !default;
$card-action-btn-pressed-border: 0 !default;
$card-action-btn-pressed-font: $default-font-color !default;
$card-font-color: $default-font-color !default;
$card-header-txt-title-color: $default-font-color !default;
$card-header-txt-subtitle-color: $default-font-color !default;
$card-content-font-color: $card-header-txt-subtitle-color !default;
$card-action-btn-icon-color: $default-font-color !default;

/*! component's theme wise override material-definitions and variables */
$skin-name: 'bootstrap' !default;
$card-img-brdr-radious: 50% !default;
$card-brdr-radious: 4px !default;

// Font

$card-header-font: 15px !default;
$card-title-font: 17px !default;
$card-action-btn-icon-font: 14px !default;
$card-action-btn-font: 14px !default;
$card-content-font-size: 14px !default;
$card-header-title-font: 14px !default;
$card-header-sub-title-font: 14px !default;

// Mouse
$card-nrml-lheight: 36px !default;
$card-nrml-mheight: 36px !default;
$card-header-padding: 12px !default;
$card-header-lheight: normal !default;
$card-title-nrml-lheight: normal !default;
$card-title-nrml-padding: 12px !default;
$card-hor-image-margin: 2px !default;
$card-sep-margin: 12px 0 !default;
$card-header-minheight: 22.5px !default;
$card-header-nrml-padding: 12px !default;
$card-header-txt-nrml-padding: 0 0 0 7.5px !default;
$card-header-txt-title-lheight: normal !default;
$card-header-txt-title-nrml-padding: 6px 0 0 !default;
$card-header-txt-subtitle-lheight: normal !default;
$card-header-image-width: 30px !default;
$card-header-image-height: 30px !default;
$card-image-mheight: 112.5px !default;
$card-image-title-lheight: 27px !default;
$card-image-title-mheight: 27px !default;
$card-image-title-nrml-padding: 0 12px !default;
$card-action-nrml-padding: 6px !default;
$card-action-nrml-vertical-padding: 12px !default;
$card-action-nrml-btn-vertical-margin: 0 0 6px 0 !default;
$card-action-btn-nrml-height: 27px !default;
$card-action-btn-nrml-line-height: 27px !default;
$card-action-btn-nrml-min-height: 27px !default;
$card-action-btn-nrml-margin: 0 0 0 6px !default;
$card-action-btn-nrml-padding: 0 6px !default;
$card-nrml-content-padding: 12px !default;
$card-header-txt-nrml-title-font: 14px !default;
$card-header-txt-nrml-subtitle-font: 14px !default;
$card-image-title-font: 17px !default;
$card-action-btn-icon-width: 24px !default;
$card-action-btn-icon-height: 24px !default;

// Touch

$card-bigger-lheight: 45px !default;
$card-bigger-mheight: 45px !default;
$card-header-bigger-padding: 16px !default;
$card-header-bigger-lheight: normal !default;
$card-title-bigger-margin: 16px !default;
$card-title-bigger-lheight: normal !default;
$card-hor-image-bigger-margin: 2px !default;
$card-sep-bigger-margin: 16px 0 !default;
$card-header-bigger-minheight: 30px !default;
$card-header-bigger-padding: 16px !default;
$card-header-txt-bigger-padding: 0 0 0 10px !default;
$card-header-txt-title-bigger-lheight: normal !default;
$card-header-txt-title-bigger-padding: 8px 0 0 !default;
$card-header-txt-subtitle-bigger-lheight: normal !default;
$card-header-image-bigger-width: 40px !default;
$card-header-image-bigger-height: 40px !default;
$card-image-bigger-mheight: 150px !default;
$card-image-title-bigger-lheight: 36px !default;
$card-image-title-bigger-mheight: 36px !default;
$card-img-title-bigger-padding: 0 16px !default;
$card-action-bigger-padding: 16px !default;
$card-action-bigger-vertical-padding: 16px !default;
$card-action-bigger-btn-vertical-margin: 0 0 10px 0 !default;
$card-action-btn-bigger-height: 36px !default;
$card-action-btn-bigger-line-height: 36px !default;
$card-action-btn-bigger-min-height: 36px !default;
$card-action-btn-bigger-margin: 0 0 0 10px !default;
$card-action-btn-bigger-padding: 0 6px !default;
$card-bigger-content-padding: 16px !default;
$card-header-txt-bigger-title-font: 14px !default;
$card-header-txt-bigger-subtitle-font: 14px !default;
$card-image-title-bigger-font: 17px !default;
$card-action-btn-bigger-icon-width: 24px !default;
$card-action-btn-bigger-icon-height: 24px !default;

// color

$card-bg-color: $grey-white !default;
$card-brdr-size: 1px !default;
$card-brdr-type: solid !default;
$card-brdr-color: $grey-dd !default;
$card-sep-brdr-size: 1px !default;
$card-sep-brdr-type: solid !default;
$card-sep-brdr-color: $grey-dd !default;
$card-image-title-color: $grey-dark-font !default;
$card-image-title-bg: rgba($grey-base, .35) !default;

$card-action-btn-bg-color: $brand-primary !default;
$card-action-btn-font-color: $brand-primary-font !default;
$card-action-btn-border: 1px solid $brand-primary-darken-10 !default;
$card-action-btn-hover-bg: $brand-primary-darken-15 !default;
$card-action-btn-hover-border: 1px solid $brand-primary-darken-25 !default;
$card-action-btn-hover-font: $brand-primary-font !default;
$card-action-btn-focus-bg: $brand-primary-darken-15 !default;
$card-action-btn-focus-border: 1px solid $brand-primary-darken-35 !default;
$card-action-btn-focus-font: $brand-primary-font !default;
$card-action-btn-pressed-bg: $brand-primary-darken-15 !default;
$card-action-btn-pressed-border: 1px solid $brand-primary-darken-25 !default;
$card-action-btn-pressed-font: $brand-primary-font !default;

$card-font-color: $grey-light-font !default;
$card-header-txt-title-color: $grey-light-font !default;
$card-header-txt-subtitle-color: $grey-light-font !default;
$card-content-font-color: $grey-light-font !default;
$card-box-shadow: none !default;

$card-focus-bg-color: $grey-white !default;
$card-hover-bg-color: $grey-white !default;
$card-active-bg-color: $grey-white !default;
$card-focus-brdr-color: $grey-ad !default;
$card-hover-brdr-color: $grey-ad !default;
$card-active-brdr-color: $brand-primary !default;
$card-action-btn-icon-color: $grey-light-font !default;

@include export-module('card-layout') {

  .e-card {
    border-radius: $card-brdr-radious;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: $card-font-family;
    font-size: $card-nrml-font-size;
    justify-content: center;
    line-height: $card-nrml-lheight;
    min-height: $card-nrml-mheight;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    vertical-align: middle;
    width: 100%;
    @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
      padding: 1px;
    }

    &:hover {
      @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
        border-width: 1px;
        padding: 1px;
      }
    }

    &:active {
      @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
        border-width: 1px;
        padding: 0;
      }
    }

    > * {
      justify-content: center;
    }

    > .e-card-header-title {
      box-sizing: border-box;
      font-size: $card-header-font;
      line-height: $card-header-lheight;
      padding: $card-header-padding;
      @if $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
        min-height: 34px;
      }

      + :not(.e-card-header-title) {
        margin-top: $card-margin-none;
        padding-top: $card-padding-none;
      }
    }

    > .e-card-title {
      font-size: $card-title-font;
      line-height: $card-title-nrml-lheight;
      padding: $card-title-nrml-padding;

      + :not(.e-card-title) {
        margin-top: $card-margin-none;
        padding-top: $card-padding-none;
      }
    }

    > .e-card-header-title,
    > .e-card-title  {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .e-card-header-caption {
      line-height: $card-normal-line-height;

      .e-card-header-title {
        font-size: $card-header-title-font;
      }

      .e-card-sub-title {
        font-size: $card-header-sub-title-font;
      }
    }

    .e-card-stacked {
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }

    &.e-card-horizontal,
    .e-card-horizontal {
      display: flex;
      flex-direction: row;
      justify-content: center;

      .e-card-image,
      img {
        margin: $card-hor-image-margin;
      }
    }

    .e-card-horizontal {
      line-height: $card-normal-line-height;
      padding: $card-horizontal-padding;
    }

    &.e-card-horizontal {

      > * {
        flex: 1;
      }

      .e-card-stacked {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;

        >:first-child {
          flex-grow: 1;
        }
      }
    }

    .e-card-separator {
      display: block;
    }

    .e-card-corner  {
      border-radius: $card-corner-border-radius;
    }

    .e-card-header {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      line-height: $card-normal-line-height;
      min-height: $card-header-minheight;
      padding: $card-header-nrml-padding;
      width: inherit;

      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        padding-bottom: $card-header-nrml-padding-bottom;
      }
      @if $skin-name == 'tailwind3' {
        border-bottom: $card-normal-border-bottom;
      }

      .e-card-content {
        padding-left: $card-padding-none;
        padding-right: $card-padding-none;
      }

      .e-card-actions {
        justify-content: flex-start;
      }

      .e-card-header-image  {
        align-self: center;
        display: flex;
        @if $skin-name == 'highcontrast' {
          border: 1px solid;
        }
      }

      .e-card-header-caption {
        align-self: center;
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        padding: $card-header-txt-nrml-padding;

        &:first-child {
          padding: $card-padding-none;
        }

        .e-card-header-title,
        .e-card-sub-title {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .e-card-header-title {
          font-size: $card-header-txt-nrml-title-font;
          @if $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
            font-weight: $card-header-title-font-weight;
          }
          @else {
            font-weight: $card-header-title-font-weight;
          }
          line-height: $card-header-txt-title-lheight;
        }

        .e-card-sub-title {
          font-size: $card-header-txt-nrml-subtitle-font;
          font-weight: $card-sub-title-font-weight;
          line-height: $card-header-txt-subtitle-lheight;
          padding: $card-header-txt-title-nrml-padding;
        }
      }

      .e-card-header-image {
        background-repeat: no-repeat;
        background-size: cover;
        height: $card-header-image-height;
        width: $card-header-image-width;
      }

      .e-card-corner {
        border-radius: $card-img-brdr-radious;
      }

      @if $skin-name == 'FluentUI' {
        + .e-card-header {
          padding: $card-header-whole-padding;
        }
      }
    }

    .e-card-image {
      background-size: cover;
      min-height: $card-image-mheight;
      position: relative;
      width: 100%;

      .e-card-title {
        bottom: 0;
        box-sizing: border-box;
        font-size: $card-image-title-font;
        line-height: $card-image-title-lheight;
        min-height: $card-image-title-mheight;
        overflow: hidden;
        padding: $card-image-title-nrml-padding;
        position: absolute;
        text-overflow: ellipsis;
        width: inherit;
        @if $skin-name == 'fluent2' {
          font-weight: $card-header-title-font-weight;
        }

        &.e-card-top-left,
        &.e-card-top-right {
          bottom: auto;
          top: 0;
        }

        &.e-card-top-right {
          text-align: right;
        }

        &.e-card-bottom-right {
          text-align: right;
        }
      }
    }

    .e-card-actions {
      box-sizing: border-box;
      display: inline-block;
      justify-content: flex-start;
      padding: $card-action-nrml-padding;
      @if $skin-name == 'tailwind3' {
        border-top: $card-normal-border-bottom;
        line-height: $card-action-line-height;
      }

      &.e-card-vertical {
        display: flex;
        flex-direction: column;
        padding: $card-action-nrml-vertical-padding;

        .e-card-btn,
        a {
          align-self: initial;
          box-sizing: border-box;
          display: inline-block;
          justify-content: center;
          margin: $card-action-nrml-btn-vertical-margin;
          text-align: center;
          width: 100%;

          &:last-child {
            margin-bottom: $card-margin-none;
          }
        }
      }

      button,
      a {
        align-items: center;
        align-self: center;
        cursor: pointer;
        display: inline-flex;
        overflow: hidden;
        vertical-align: middle;
        white-space: nowrap;
      }

      .e-card-btn span,
      .e-card-btn span.e-icons {
        display: flex;
        font-size: $card-action-btn-icon-font;
        height: $card-action-btn-icon-height;
        width: $card-action-btn-icon-width;

        &::before {
          align-self: center;
          display: flex;
          justify-content: center;
          width: inherit;
        }
      }

      .e-card-btn > * {
        overflow: hidden;
        text-overflow: ellipsis;
        width: inherit;
      }

      .e-card-btn,
      a {
        @if $skin-name == 'tailwind' {
          border-radius: $card-btn-border-radius;
        }

        @else {
          border-radius: $card-btn-border-radius;
        }
      }

      .e-card-btn,
      a {
        font-family: $card-font-family;
        font-size: $card-action-btn-font;
        line-height: $card-action-btn-nrml-line-height;
        margin: $card-action-btn-nrml-margin;
        min-height: $card-action-btn-nrml-min-height;
        padding: $card-action-btn-nrml-padding;
        text-decoration: none;
        text-transform: $card-action-btn-txt-transform;

        &:first-child {
          margin-left: $card-margin-none;
        }
      }
    }

    .e-card-content {
      font-size: $card-content-font-size;
      line-height: $card-content-line-height;
      padding: $card-nrml-content-padding;
      word-wrap: break-word;

      + :not(.e-card-content),
      + .e-card-actions.e-card-vertical {
        @if $skin-name != 'tailwind3' {
          margin-top: $card-margin-none;
          padding-top: $card-padding-none;
        }
      }
      @if $skin-name == 'FluentUI' {
        + .e-card-header {
          padding: $card-header-whole-padding;
        }
      }
    }

    @if $skin-name == 'tailwind' {
      .e-card-header .e-card-actions {
        padding: $card-padding-none;
      }
    }

    .e-card-content,
    .e-card-content p {
      line-height: $card-content-line-height;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

@include export-module('card-theme') {
  /* stylelint-disable property-no-vendor-prefix */
  .e-card {
    -webkit-tap-highlight-color: $card-highlight-color;
    background: $card-bg-color;
    border: $card-brdr-size $card-brdr-type $card-brdr-color;
    box-shadow: $card-box-shadow;
    color: $card-font-color;
    outline: none;

    &:hover {
      background-color: $card-hover-bg-color;
      border-color: $card-hover-brdr-color;
      @if $skin-name == 'material' {
        box-shadow: $card-hover-box-shadow;
      }
    }

    &:focus {
      background-color: $card-focus-bg-color;
      border-color: $card-focus-brdr-color;
    }

    &:active {
      background-color: $card-active-bg-color;
      border-color: $card-active-brdr-color;
    }

    .e-card-separator {
      border-bottom: $card-sep-brdr-size $card-sep-brdr-type $card-sep-brdr-color;
    }
    .e-card-header-caption {
      .e-card-header-title {
        color: $card-header-txt-title-color;
      }
      .e-card-sub-title {
        color: $card-header-txt-subtitle-color;
      }
    }
    .e-card-image {

      .e-card-title {
        background-color: $card-image-title-bg;
        color: $card-image-title-color;
      }
    }
    .e-card-actions {

      .e-card-btn span,
      .e-card-btn span.e-icons {
        color: $card-action-btn-icon-color;
      }
      .e-card-btn,
      a {
        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
          background: $card-action-btn-bg-color;
        }
        @else {
          background-color: $card-action-btn-bg-color;
        }
        border: $card-action-btn-border;
        color: $card-action-btn-font-color;
        outline: 0;
        &:hover {
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $card-action-btn-hover-bg;
          }
          @else {
            background-color: $card-action-btn-hover-bg;
          }
          border: $card-action-btn-hover-border;
          color: $card-action-btn-hover-font;
        }
        &:focus {
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $card-action-btn-focus-bg;
          }
          @else {
            background-color: $card-action-btn-focus-bg;
          }
          border: $card-action-btn-focus-border;
          color: $card-action-btn-focus-font;
        }
        &:active {
          @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
            background: $card-action-btn-pressed-bg;
          }
          @else {
            background-color: $card-action-btn-pressed-bg;
          }
          border: $card-action-btn-pressed-border;
          color: $card-action-btn-pressed-font;
        }
      }
    }

    .e-card-content {
      color: $card-content-font-color;
    }
  }

  @if $skin-name == 'FluentUI' {
    .e-card-hover:hover {
      box-shadow: $card-hover-class-box-shadow;
    }

    .e-card-active:active {
      border: $card-selection-class-border;
      box-shadow: $card-selection-class-box-shadow;
    }
  }
}

@include export-module('card-bigger') {

  .e-bigger .e-card,
  .e-bigger.e-card {
    line-height: $card-bigger-lheight;
    min-height: $card-bigger-mheight;

    @if $skin-name == 'bootstrap4' {
      > .e-card-title {
        font-size: $card-txt-bigger-title-font;
      }

      .e-card-content {
        font-size: $card-content-bigger-font-size;
      }
    }

    > .e-card-header-title {
      line-height: $card-header-bigger-lheight;
      padding: $card-header-bigger-padding;
      @if $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
        min-height: 45px;
      }

      + :not(.e-card-header-title) {
        margin-top: $card-margin-none;
        padding-top: $card-padding-none;
      }
    }

    > .e-card-title {
      line-height: $card-title-bigger-lheight;
      padding: $card-title-bigger-margin;

      + :not(.e-card-title) {
        margin-top: $card-margin-none;
        padding-top: $card-padding-none;
      }
    }

    &.e-card-horizontal,
    .e-card-horizontal {
      .e-card-image,
      img {
        margin: $card-hor-image-bigger-margin;
      }
    }

    .e-card-header {
      min-height: $card-header-bigger-minheight;
      padding: $card-header-bigger-padding;

      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' {
        padding-bottom: $card-header-bigger-padding-bottom;
      }

      .e-card-content {
        padding-left: $card-padding-none;
        padding-right: $card-padding-none;
      }

      .e-card-header-caption {
        padding: $card-header-txt-bigger-padding;

        &:first-child {
          padding: $card-padding-none;
        }

        .e-card-header-title {
          font-size: $card-header-txt-bigger-title-font;
          line-height: $card-header-txt-title-bigger-lheight;
          @if $skin-name == 'fluent2' {
            font-weight: $card-header-title-font-weight;
          }
        }

        .e-card-sub-title {
          font-size: $card-header-txt-bigger-subtitle-font;
          line-height: $card-header-txt-subtitle-bigger-lheight;
          padding: $card-header-txt-title-bigger-padding;
        }
      }

      .e-card-header-image {
        background-size: cover;
        height: $card-header-image-bigger-height;
        width: $card-header-image-bigger-width;
      }

      @if $skin-name == 'FluentUI' {
        + .e-card-header {
          padding: $card-header-bigger-whole-padding;
        }
      }
    }

    .e-card-image {
      min-height: $card-image-bigger-mheight;

      .e-card-title {
        font-size: $card-image-title-bigger-font;
        line-height: $card-image-title-bigger-lheight;
        min-height: $card-image-title-bigger-mheight;
        padding: $card-img-title-bigger-padding;
        @if $skin-name == 'fluent2' {
          font-weight: $card-header-title-font-weight;
        }
      }
    }

    .e-card-actions {
      padding: $card-action-bigger-padding;

      &.e-card-vertical {
        padding: $card-action-bigger-vertical-padding;

        .e-card-btn,
        a {
          margin: $card-action-bigger-btn-vertical-margin;

          &:last-child {
            margin-bottom: $card-margin-none;
          }
        }
      }

      .e-card-btn span,
      .e-card-btn span.e-icons {
        height: $card-action-btn-bigger-icon-height;
        width: $card-action-btn-bigger-icon-width;
      }

      .e-card-btn,
      a {
        line-height: $card-action-btn-bigger-line-height;
        margin: $card-action-btn-bigger-margin;
        min-height: $card-action-btn-bigger-min-height;
        padding: $card-action-btn-bigger-padding;

        &:first-child {
          margin-left: $card-margin-none;
        }
      }
    }

    .e-card-content {
      padding: $card-bigger-content-padding;
      @if $skin-name == 'fluent2' {
        font-size: $card-bigger-content-font-size;
      }
      @if $skin-name == 'tailwind3' {
        font-size: $card-action-bigger-content-font-size;
        line-height: $card-action-bigger-content-line-height;
      }

      + :not(.e-card-content),
      + .e-card-actions.e-card-vertical {
        @if $skin-name != 'tailwind3' {
          margin-top: $card-margin-none;
          padding-top: $card-padding-none;
        }
      }

      @if $skin-name == 'FluentUI' {
        + .e-card-header {
          padding: $card-header-bigger-whole-padding;
        }
      }
    }
  }
}

$carousel-navigator-btn-bg: transparent !default;
$carousel-navigator-btn-bg-hover: rgba($brand-primary-font, .4) !default;
$carousel-navigator-icon-color: $brand-primary-font !default;
$carousel-indicator-bar-bg: $brand-primary-font !default;
$carousel-indicator-bar-border: 1px solid rgba($brand-primary-font, .4) !default;
$carousel-indicator-bar-bg-active: $brand-primary !default;
$carousel-indicator-border-color-focus: $base-font !default;
$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
$carousel-animation-duration: .6s !default;
$carousel-animation-timing-function: ease-in-out !default;
$carousel-navigator-btn-border-radius-hover: 50% !default;
$carousel-indicator-padding: 4px !default;
$carousel-indicator-height: 48px !default;
$carousel-indicator-bar-border-radius: 2px !default;
$carousel-indicator-bar-height: 5px !default;
$carousel-indicator-bar-width: 20px !default;
$carousel-indicator-dynamic-minheight: 36px !default;
$carousel-indicator-fraction-minheight: 36px !default;
$carousel-indicator-progress-minheight: 4px !default;
$carousel-indicator-progress-height: 4px !default;
$carousel-items-height: 100% !default;
$carousel-border-none: 0 !default;
$carousel-play-icon-line-height: 1 !default;
$carousel-indicator-border-radius: 50% !default;
$carousel-dynamic-indicator-bar-height: 8px !default;
$carousel-indicator-progressbar-height: 100% !default;
$carousel-padding-none: 0 !default;
$carousel-margin-none: 0 !default;
$carousel-partial-horizontal-padding: 0 100px !default;
$carousel-partial-horizontal-padding-small: 0 75px !default;
$carousel-partial-horizontal-padding-extra-small: 0 50px !default;
$carousel-navigator-play-icon-padding-left: 3px !default;
$carousel-dynamic-indicator-bar-margin: 0 4px !default;
$carousel-navigator-btn-padding: .5em !default;

@include export-module('carousel-layout') {
  .e-carousel {
    display: block;
    margin: $carousel-margin-none;
    padding: $carousel-padding-none;
    position: relative;

    .e-carousel-items,
    .e-carousel-slide-container {
      height: $carousel-items-height;
      margin: $carousel-margin-none;
      overflow: hidden;
      padding: $carousel-padding-none;
      position: relative;
      width: 100%;
    }

    .e-carousel-items.e-swipe-start {
      cursor: pointer;
    }

    &.e-partial {
      .e-carousel-slide-container {
        padding: $carousel-partial-horizontal-padding;

        @media screen and (max-width: 480px) {
          padding: $carousel-partial-horizontal-padding-small;
        }

        @media screen and (max-width: 320px) {
          padding: $carousel-partial-horizontal-padding-extra-small;
        }
      }
    }

    .e-carousel-items {
      width: calc(var(--carousel-items-count) * 100%);
      display: flex;
      flex-direction: row;
      transition-property: transform;
      transition-duration: $carousel-animation-duration;
      transition-timing-function: $carousel-animation-timing-function;

      .e-carousel-item {
        height: $carousel-items-height;
        overflow: hidden;
        padding: $carousel-padding-none;
        position: relative;
        width: calc(100% / var(--carousel-items-count));
      }
    }

    &.e-blazor-carousel {
      .e-carousel-items {
        transform: translateX(calc((-100%/var(--carousel-items-count)) * var(--carousel-items-current)));
        transition: transform;
      }
    }

    &.e-blazor-carousel.e-rtl {
      .e-carousel-items {
        transform: translateX(calc((100%/var(--carousel-items-count)) * var(--carousel-items-current)));
        transition: transform;
      }
    }

    &.e-carousel-fade-animation {
      .e-carousel-items {
        &.e-fade-in-out {
          transition-property: none;
          animation: fade-in-out $carousel-animation-duration $carousel-animation-timing-function;
        }

        @keyframes fade-in-out {
          0% {
            opacity: 0;
          }

          100% {
            opacity: 1;
          }
        }
      }
    }

    &.e-carousel-slide-animation {
      .e-carousel-items {
        &.e-slide {
          transition-duration: $carousel-animation-duration;
        }
      }
    }

    &.e-carousel-custom-animation:not(.e-partial) {
      .e-carousel-item {
        display: block;
        height: $carousel-items-height;
        left: 0;
        opacity: 0;
        pointer-events: none;
        top: 0;

        &.e-active {
          opacity: 1;
          pointer-events: visible;
        }
      }
    }

    .e-carousel-navigators {
      align-items: center;
      display: flex;
      height: $carousel-items-height;
      justify-content: space-between;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;

      .e-play-pause,
      .e-previous,
      .e-next {
        padding: $carousel-navigator-btn-padding;
        pointer-events: auto;

        .e-btn {
          border: $carousel-border-none;
          box-shadow: none;

          &:hover {
            border-radius: $carousel-navigator-btn-border-radius-hover;
          }

          &.e-rtl {
            transform: rotate(180deg);
          }

          .e-play-icon {
            line-height: $carousel-play-icon-line-height;
            padding-left: $carousel-navigator-play-icon-padding-left;
          }
        }

        &.e-hover-arrows {
          display: none;
        }
      }
    }

    .e-carousel-indicators {
      align-items: center;
      bottom: 0;
      display: flex;
      justify-content: center;
      min-height: $carousel-indicator-height;
      padding: $carousel-padding-none;
      pointer-events: none;
      position: absolute;
      width: 100%;
      z-index: 1;

      &.e-default .e-indicator-bars {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        pointer-events: auto;

        .e-indicator-bar {
          padding: $carousel-padding-none;

          .e-indicator {
            align-items: center;
            display: flex;
            justify-content: center;
            padding: $carousel-indicator-padding;
          }

          .e-indicator div {
            border: $carousel-indicator-bar-border;
            border-radius: $carousel-indicator-bar-border-radius;
            height: $carousel-indicator-bar-height;
            transition-duration: $carousel-animation-duration;
            transition-property: background-color, border-color;
            transition-timing-function: $carousel-animation-timing-function;
            width: $carousel-indicator-bar-width;
          }

          .e-indicator .e-ripple-element {
            display: none;
          }
        }
      }

      &.e-dynamic {
        min-height: $carousel-indicator-dynamic-minheight;

        .e-indicator-bars {
          display: block;
          overflow: hidden;
          transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
          white-space: nowrap;
          width: 80px;

          .e-indicator-bar {
            border-radius: $carousel-indicator-border-radius;
            display: inline-block;
            height: $carousel-dynamic-indicator-bar-height;
            left: calc(32px - calc(16px * var(--carousel-items-current)));
            margin: $carousel-dynamic-indicator-bar-margin;
            opacity: 1;
            position: relative;
            transform: scale(.33);
            transition-duration: $carousel-animation-duration;
            transition-property: transform, left;
            transition-timing-function: $carousel-animation-timing-function;
            white-space: nowrap;
            width: 8px;

            &.e-active {
              transform: scale(1);
            }

            &.e-prev,
            &.e-next {
              transform: scale(.66);
            }
          }
        }
      }

      &.e-fraction {
        min-height: $carousel-indicator-fraction-minheight;
      }

      &.e-progress {
        min-height: $carousel-indicator-progress-minheight;

        .e-indicator-bars {
          height: $carousel-indicator-progress-height;
          width: 100%;

          .e-indicator-bar {
            height: $carousel-indicator-progressbar-height;
            left: 0;
            position: absolute;
            top: 0;
            transform: translate3d(0, 0, 0) scaleX(calc(var(--carousel-items-current) / var(--carousel-items-count))) scaleY(1);
            transition-duration: $carousel-animation-duration;
            transform-origin: left top;
            width: 100%;
          }
        }
      }
    }
  }
}

@mixin carousel-navigator-button-color($color) {
  .e-btn-icon {
    color: $color;
  }
}

@include export-module('carousel-theme') {
  .e-carousel {
    .e-carousel-navigators {

      .e-previous .e-btn:not(:disabled),
      .e-next .e-btn:not(:disabled),
      .e-play-pause .e-btn:not(:disabled) {
        background-color: $carousel-navigator-btn-bg;
        @include carousel-navigator-button-color($carousel-navigator-icon-color);

        &:active,
        &:focus,
        &:hover {
          background-color: $carousel-navigator-btn-bg-hover;
          outline: none;
        }

        @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
          &:focus-visible {
            background-color: $carousel-navigator-btn-bg;
            box-shadow: $carousel-navigator-btn-focus-box-shadow;
            @include carousel-navigator-button-color($carousel-navigator-icon-color);
            @if $skin-name !='tailwind3' {
              border-radius: $carousel-navigator-focus-visible-border-radius;
              @include carousel-navigator-button-color($carousel-navigator-btn-hover-color);
            }
          }
          &:active {
            @if $skin-name == 'tailwind3' {
              background-color: $carousel-navigator-btn-bg-active;
            }
            @include carousel-navigator-button-color($carousel-navigator-btn-active-color);
          }
          &:hover,
          &:focus {
            @include carousel-navigator-button-color($carousel-navigator-btn-hover-color);
          }
        }
      }
    }

    .e-carousel-indicators {
      &.e-default .e-indicator-bar {
        .e-indicator {
          background-color: transparent;
          border-color: transparent;
          box-shadow: none;

          div {
            background: $carousel-indicator-bar-bg;
            @if ($skin-name == 'Material3') {
              border-image: $carousel-indicator-bar-border-bg;
            }
            @else {
              border-color: $carousel-indicator-bar-bg;
            }
          }

          &:active,
          &:focus,
          &:hover {
            background: transparent;
            border-color: transparent;
            box-shadow: none;
            outline: none;
          }

          &:focus-visible {
            border-color: $carousel-indicator-border-color-focus;
          }
        }

        &.e-active .e-indicator div {
          background-color: $carousel-indicator-bar-bg-active;
          border-color: $carousel-indicator-bar-bg-active;
        }
      }

      &.e-dynamic .e-indicator-bars {
        .e-indicator-bar {
          background-color: $carousel-navigator-icon-color;

          &.e-active {
            background-color: $carousel-indicator-bar-bg-active;
          }
        }
      }

      &.e-fraction .e-indicator-bars {
        color: $carousel-navigator-icon-color;
      }

      &.e-progress .e-indicator-bars {
        background-color: $carousel-indicator-progress-bg;

        .e-indicator-bar {
          background-color: $carousel-indicator-bar-bg-active;
        }
      }
    }
  }
}

@include export-module('carousel-bootstrap-icons') {
  .e-carousel {

    .e-previous-icon::before {
      content: '\e904';
    }

    .e-next-icon::before {
      content: '\e826';
    }

    .e-play-icon::before {
      content: '\e328';
    }

    .e-pause-icon::before {
      content: '\e329';
    }

    &.e-rtl {
      .e-previous-icon::before {
        content: '\e826';
      }

      .e-next-icon::before {
        content: '\e904';
      }
    }
  }
}

$cbox-bgcolor: $grey-base !default;
$cbox-bigger-check-fontsize: 14px !default;
$cbox-bigger-font-size: 15px !default;
$cbox-bigger-height: 22px !default;
$cbox-bigger-indeterminate-fontsize: 14px !default;
$cbox-bigger-indeterminate-lineheight: 20px !default;
$cbox-bigger-lineheight: 20px !default;
$cbox-bigger-margin: 10px !default;
$cbox-bigger-small-check-fontsize: 10px !default;
$cbox-bigger-small-font-size: 15px !default;
$cbox-bigger-small-height: 18px !default;
$cbox-bigger-small-indeterminate-fontsize: 12px !default;
$cbox-bigger-small-indeterminate-lineheight: 16px !default;
$cbox-bigger-small-lineheight: 16px !default;
$cbox-bigger-small-width: 18px !default;
$cbox-bigger-width: 22px !default;
$cbox-border: 1px solid !default;
$cbox-border-color: $grey-dark-font !default;
$cbox-border-radius: 3px !default;
$cbox-check-fontsize: 12px !default;
$cbox-checkmark-bgcolor: $grey-base !default;
$cbox-checkmark-border-color: $grey-dark-font !default;
$cbox-checkmark-color: $grey-dark-font !default;
$cbox-checked-ripple-bgcolo: transparent !default;
$cbox-checkmark-disabled-bgcolor: rgba($cbox-checkmark-bgcolor, .35) !default;
$cbox-checkmark-disabled-border-color: rgba($cbox-checkmark-border-color, .35) !default;
$cbox-checkmark-disabled-color: rgba($grey-dark-font, .35) !default;
$cbox-checkmark-hover-bgcolor: $grey !default;
$cbox-checkmark-hover-border-color: $grey-light-font !default;
$cbox-checkmark-hover-color: $grey-light-font !default;
$cbox-color: $grey-dark-font !default;
$cbox-disabled-bgcolor: rgba($grey-white, .35) !default;
$cbox-disabled-border-color: rgba($cbox-border-color, .35) !default;
$cbox-disabled-color: rgba($grey-dark-font, .35) !default;
$cbox-focus-outline: $cbox-bgcolor 0 solid !default;
$cbox-focus-outline-offset: 0 !default;
$cbox-focussed-box-shadow: 0 0 10px 0 rgba($brand-primary-lighten-10, .99) !default;
$cbox-font-size: 14px !default;
$cbox-height: 20px !default;
$cbox-hover-bgcolor: $grey !default;
$cbox-hover-border-color: $grey-cc !default;
$cbox-hover-color: $grey-light-font !default;
$cbox-indeterminate-bgcolor: $grey-base !default;
$cbox-indeterminate-border-color: $grey-dark-font !default;
$cbox-indeterminate-color: $grey-dark-font !default;
$cbox-indeterminate-content: '\e99f' !default;
$cbox-indeterminate-disabled-bgcolor: rgba($grey-base, .35) !default;
$cbox-indeterminate-disabled-border-color: rgba($grey-dark-font, .35) !default;
$cbox-indeterminate-disabled-color: rgba($grey-dark-font, .35) !default;
$cbox-indeterminate-fontsize: 12px !default;
$cbox-indeterminate-hover-color: $grey-dark-font !default;
$cbox-indeterminate-lineheight: 18px !default;
$cbox-key-focussed-bgcolor: transparent !default;
$cbox-lineheight: 18px !default;
$cbox-margin: 8px !default;
$cbox-padding: 0 !default;
$cbox-ripple-bgcolor: transparent !default;
$cbox-ripple-size: -9px !default;
$cbox-ripple-height: 36px !default;
$cbox-ripple-width: 36px !default;
$cbox-ripple-small-size: -13px !default;
$cbox-ripple-small-height: 30px !default;
$cbox-ripple-small-width: 30px !default;
$cbox-ripple-bigger-size: -15px !default;
$cbox-ripple-bigger-height: 38px !default;
$cbox-ripple-bigger-width: 38px !default;
$cbox-ripple-bigger-small-size: -16px !default;
$cbox-ripple-bigger-small-height: 38px !default;
$cbox-ripple-bigger-small-width: 38px !default;
$cbox-small-check-fontsize: 8px !default;
$cbox-small-font-size: 14px !default;
$cbox-small-height: 14px !default;
$cbox-small-indeterminate-fontsize: 6px !default;
$cbox-small-indeterminate-lineheight: 12px !default;
$cbox-small-lineheight: 12px !default;
$cbox-small-width: 14px !default;
$cbox-width: 20px !default;
$cbox-focussed-bgcolor: $cbox-hover-bgcolor !default;
$cbox-focussed-border-color: $cbox-hover-border-color !default;
$cbox-focussed-checkmark-bgcolor: $cbox-checkmark-hover-bgcolor !default;
$cbox-focussed-checkmark-border-color: $cbox-checkmark-hover-border-color !default;
$cbox-focussed-checkmark-color: $cbox-checkmark-hover-color !default;
$cbox-border-style: solid !default;
$cbox-zero-margin: 0 !default;
$cbox-wrapper-line-height: 1 !default;
$cbox-label-line-height: 0 !default;
$cbox-ripple-container-border-radius: 50% !default;
$cbox-nrml-height: 1px !default;
$cbox-nrml-width: 1px !default;
$cbox-auto-width: auto;

@mixin ripple-container {
  bottom: $cbox-ripple-small-size;
  height: $cbox-ripple-small-height;
  left: $cbox-ripple-small-size;
  right: $cbox-ripple-small-size;
  top: $cbox-ripple-small-size;
  width: $cbox-ripple-small-width;
}

@include export-module('checkbox-layout') {
  .e-checkbox-wrapper,
  .e-css.e-checkbox-wrapper {
    cursor: pointer;
    display: inline-block;
    line-height: $cbox-wrapper-line-height;
    outline: none;
    user-select: none;
    @if $skin-name == 'FluentUI' {
      border: 1px solid transparent;
      padding: 3px;
    }
    @if $skin-name == 'fluent2' {
      border-radius: $cbox-nrml-checkbox-border-radius;
      border: 1px solid transparent;
      line-height: $cbox-label-line-height;
    }
    @at-root {
      & label {
        cursor: pointer;
        display: inline-block;
        line-height: $cbox-label-line-height;
        margin: $cbox-zero-margin;
        position: relative;
        white-space: nowrap;
      }

      &:focus,
      &.e-focus {
        & .e-frame {
          & {
            box-shadow: $cbox-focussed-box-shadow;
          }
          @if $skin-name == 'bootstrap5.3' {
            & {
              border-color: $border-focus;
            }
          }
        }
        @if $skin-name == 'FluentUI' {
          & {
            border: 1px solid $cbox-border-color;
            padding: 3px;
          }
        }
        @if $skin-name == 'fluent2' {
          & {
            border-radius: $cbox-nrml-checkbox-border-radius;
            box-shadow: $shadow-focus-ring1;
          }
        }
      }

      &:active {
        & .e-frame {
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $cbox-focussed-box-shadow;
            border-color: $border-focus !important; /* stylelint-disable-line declaration-no-important */
            background-color: $content-bg-color-pressed;
          }
          @if $skin-name == 'tailwind3' {
            box-shadow: $cbox-focussed-box-shadow;
          }
        }
      }

      & .e-ripple-container {
        border-radius: $cbox-ripple-container-border-radius;
        bottom: $cbox-ripple-size;
        height: $cbox-ripple-height;
        left: $cbox-ripple-size;
        pointer-events: none;
        position: absolute;
        right: $cbox-ripple-size;
        top: $cbox-ripple-size;
        width: $cbox-ripple-width;
        z-index: 1;

        & .e-ripple-element {
          @if $skin-name == 'Material3' {
            border-radius: $cbox-ripple-container-border-radius;
          }
        }
      }

      & .e-label {
        cursor: pointer;
        display: inline-block;
        font-family: $font-family;
        font-size: $cbox-font-size;
        font-weight: normal;
        line-height: $cbox-height;
        user-select: none;
        vertical-align: middle;
        white-space: normal;
        @if $skin-name == 'tailwind3' {
          font-weight: $font-weight-medium;
        }
      }

      & .e-checkbox {
        height: $cbox-nrml-height;
        opacity: 0;
        position: absolute;
        width: $cbox-nrml-width;

        +.e-label {
          @if $skin-name == 'fluent2' {
            margin: $cbox-nrml-label-margin;
          }
          @else {
            margin-right: $cbox-margin;
          }
        }
      }

      & .e-frame {
        border: $cbox-border;
        border-radius: $cbox-border-radius;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        font-family: 'e-icons';
        height: $cbox-height;
        line-height: $cbox-lineheight;
        padding: $cbox-padding;
        text-align: center;
        vertical-align: middle;
        width: $cbox-width;
        @if $skin-name == 'fluent2' {
          margin: $cbox-nrml-frame-margin;
        }

        +.e-label {
          @if $skin-name == 'fluent2' {
            margin: $cbox-nrml-label-frame-margin;
          }
          @else {
            margin-left: $cbox-margin;
          }
        }

        +.e-ripple-container {
          left: $cbox-auto-width;
        }
      }

      & .e-check {
        font-size: $cbox-check-fontsize;
      }

      & .e-stop {
        font-size: $cbox-indeterminate-fontsize;
        line-height: $cbox-indeterminate-lineheight;
      }

      &.e-checkbox-disabled {
        cursor: default;
        pointer-events: none;
        @if $skin-name == 'bootstrap5.3' {
          opacity: .5;
        }

        & .e-frame {
          cursor: default;
        }

        & .e-label {
          cursor: default;
        }
      }

      &.e-rtl {
        .e-ripple-container {
          right: $cbox-ripple-size;
        }

        & .e-frame {
          @if $skin-name != 'fluent2' {
            margin: $cbox-zero-margin;
          }

          &:hover {
            background-color: $cbox-hover-bgcolor;
            border-color: $cbox-hover-border-color;
            @if $skin-name == 'FluentUI' {
              &:not(.e-check),
              &:not(.e-stop)::before {
                content: $cbox-check-content;
                font-size: $cbox-check-fontsize;
              }
            }
          }

          + .e-ripple-container {
            left: $cbox-ripple-size;
            right: $cbox-auto-width;
          }
        }

        & .e-label {
          @if $skin-name == 'fluent2' {
            margin: $cbox-nrml-label-margin;
          }
          @else {
            margin-left: $cbox-zero-margin;
            margin-right: $cbox-margin;
          }

          +.e-frame {
            @if $skin-name != 'fluent2' {
              margin: $cbox-zero-margin;
            }
          }
        }

        & .e-checkbox {
          +.e-label {
            @if $skin-name == 'fluent2' {
              margin: $cbox-nrml-label-margin;
            }
            @else {
              margin-left: $cbox-margin;
              margin-right: $cbox-zero-margin;
            }
          }
        }
      }

      &.e-small {
        & .e-frame {
          height: $cbox-small-height;
          line-height: $cbox-small-lineheight;
          width: $cbox-small-width;
        }

        & .e-check {
          font-size: $cbox-small-check-fontsize;
        }

        & .e-stop {
          font-size: $cbox-small-indeterminate-fontsize;
          line-height: $cbox-small-indeterminate-lineheight;
        }

        & .e-label {
          font-size: $cbox-small-font-size;
          line-height: $cbox-small-height;
        }

        & .e-ripple-container {
          @include ripple-container;
        }
      }
    }
  }

  .e-overlay .e-checkbox-wrapper.e-pointer-event .e-ripple-container {
    pointer-events: none;
  }

  .e-checkbox-wrapper.e-pointer-event .e-ripple-container{
    pointer-events: auto;
  }

  .e-checkbox-wrapper[readonly] {
    pointer-events: none;
  }

  .e-small .e-checkbox-wrapper,
  .e-small.e-checkbox-wrapper,
  .e-small .e-css.e-checkbox-wrapper,
  .e-small.e-css.e-checkbox-wrapper {
    & .e-frame {
      height: $cbox-small-height;
      line-height: $cbox-small-lineheight;
      width: $cbox-small-width;
      @if $skin-name == 'fluent2' {
        margin: $cbox-small-frame-margin;
      }

      &:hover {
        background-color: $cbox-hover-bgcolor;
        border-color: $cbox-hover-border-color;
        @if $skin-name == 'FluentUI' {
          &:not(.e-check),
          &:not(.e-stop)::before {
            content: $cbox-check-content;
            font-size: $cbox-small-check-fontsize;
          }
        }
      }
    }

    & .e-check {
      font-size: $cbox-small-check-fontsize;
    }

    & .e-stop {
      font-size: $cbox-small-indeterminate-fontsize;
      line-height: $cbox-small-indeterminate-lineheight;
    }

    & .e-label {
      font-size: $cbox-small-font-size;
      line-height: $cbox-small-height;
    }

    & .e-ripple-container {
      @include ripple-container;
    }
  }
}

@include export-module('checkbox-theme') {
  .e-checkbox-wrapper,
  .e-css.e-checkbox-wrapper {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;
    @at-root {
      & .e-frame {
        background-color: $cbox-bgcolor;
        border-color: $cbox-border-color;

        &.e-check {
          background-color: $cbox-checkmark-bgcolor;
          border-color: $cbox-checkmark-border-color;
          color: $cbox-checkmark-color;
        }

        &.e-stop {
          background-color: $cbox-indeterminate-bgcolor;
          border-color: $cbox-indeterminate-border-color;
          color: $cbox-indeterminate-color;
        }
      }

      & .e-ripple-element {
        background: $cbox-checked-ripple-bgcolo;
      }

      & .e-ripple-check {
        & .e-ripple-element {
          background: $cbox-ripple-bgcolor;
        }
      }

      &:active {
        & .e-ripple-element {
          background: $cbox-ripple-bgcolor;
        }

        & .e-ripple-check {
          & .e-ripple-element {
            background: $cbox-checked-ripple-bgcolo;
          }
        }
      }

      & .e-label {
        color: $cbox-color;
      }

      & .e-checkbox {
        &:focus,
        &:active {
          +.e-frame {
            background-color: $cbox-focussed-bgcolor;
            border-color: $cbox-focussed-border-color;
            box-shadow: $cbox-focussed-box-shadow;

            &.e-check {
              background-color: $cbox-focussed-checkmark-bgcolor;
              border-color: $cbox-focussed-checkmark-border-color;
              box-shadow: $cbox-focussed-box-shadow;
              color: $cbox-focussed-checkmark-color;
            }

            &.e-stop {
              background-color: $cbox-indeterminate-bgcolor;
              border-color: $cbox-focussed-checkmark-border-color;
              box-shadow: $cbox-focussed-box-shadow;
              color: $cbox-indeterminate-hover-color;
            }
          }
        }
      }

      &:hover {
        & .e-ripple-container {
          @if $skin-name == 'Material3' {
            background: $cbox-ripple-bgcolor;
          }
          &.e-ripple-check {
            @if $skin-name == 'Material3' {
              background: $cbox-checked-ripple-bgcolo;
            }
          }
        }

        & .e-frame {
          background-color: $cbox-hover-bgcolor;
          border-color: $cbox-hover-border-color;
          @if $skin-name == 'FluentUI' {
            font-size: $cbox-check-fontsize;

            &:not(.e-check):not(.e-stop) {
              color: $cbox-icon-color;
              @media (max-width: 768px)  {
                color: $cbox-bgcolor;
              }
            }

            &:not(.e-check),
            &:not(.e-stop)::before {
              content: $cbox-check-content;
            }
          }

          &.e-check {
            background-color: $cbox-checkmark-hover-bgcolor;
            border-color: $cbox-checkmark-hover-border-color;
            color: $cbox-checkmark-hover-color;
          }

          &.e-stop {
            @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'material' {
              background-color: $cbox-checkmark-hover-bgcolor;
              border-color: $cbox-checkmark-hover-border-color;
            }
            @else if $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
              border-color: $cbox-checkmark-hover-border-color;
            }
            @else {
              color: $cbox-indeterminate-hover-color;
            }
            @if $skin-name == 'fluent2' {
              color: $primary-bg-color-hover;
            }
            @if $skin-name == 'tailwind3' {
              background-color: $cbox-focussed-checkmark-bgcolor;
              border-color: $cbox-indeterminate-border-color;
            }
            @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
              background-color: $cbox-checkmark-bgcolor;
            }
          }
        }

        & .e-label {
          color: $cbox-hover-color;
        }
      }

      &.e-checkbox-disabled {
        & .e-frame {
          background-color: $cbox-disabled-bgcolor;
          @if $skin-name == 'Material3' {
            border: $cbox-border $cbox-disabled-border-color;
          }
          @else {
            border-color: $cbox-disabled-border-color;
          }
          color: $cbox-disabled-color;

          &.e-check {
            background-color: $cbox-checkmark-disabled-bgcolor;
            @if $skin-name == 'bootstrap4' {
              border-color: transparent;
            }
            @if $skin-name == 'Material3' {
              border: none;
              border-color: $cbox-checkmark-disabled-border-color;
              line-height: $cbox-mat3-check-line-height;
            }
            @else {
              border-color: $cbox-checkmark-disabled-border-color;
            }
            color: $cbox-checkmark-disabled-color;
          }

          &.e-stop {
            background-color: $cbox-indeterminate-disabled-bgcolor;
            @if $skin-name == 'bootstrap4' {
              border-color: transparent;
            }
            @if $skin-name == 'Material3' {
              border: none;
              border: $cbox-indeterminate-disabled-border-color;
              line-height: $cbox-mat3-check-line-height;
            }
            @else {
              border-color: $cbox-indeterminate-disabled-border-color;
            }
            color: $cbox-indeterminate-disabled-color;
          }
        }

        & .e-label {
          color: $cbox-disabled-color;
        }
      }

      &.e-focus {
        & .e-ripple-container {
          background-color: $cbox-key-focussed-bgcolor;

          &.e-ripple-check {
            background-color: $cbox-checked-ripple-bgcolo;
          }
        }

        & .e-frame,
        & .e-frame.e-check {
          outline: $cbox-focus-outline;
          outline-offset: $cbox-focus-outline-offset;
        }
      }

      .e-small .e-checkbox-wrapper,
      .e-small.e-checkbox-wrapper,
      .e-small .e-css.e-checkbox-wrapper,
      .e-small.e-css.e-checkbox-wrapper {
        &:hover {
          & .e-frame {
            @if $skin-name == 'FluentUI' {
              font-size: $cbox-small-check-fontsize;

              &:not(.e-check):not(.e-stop) {
                color: $cbox-icon-color;
              }
            }
          }
        }
      }

      &:hover .e-checkbox:focus + .e-frame.e-check {
        @if $theme-name == 'fluent2-highcontrast' {
          background-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
          border-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }
  }
}

@include export-module('check-box-bootstrap-dark-icons') {
  .e-checkbox-wrapper,
  .e-css.e-checkbox-wrapper {
    @at-root {
      & .e-check {
        &::before {
          content: '\e21d';
        }
      }

      & .e-stop {
        &::before {
          content: '\e99f';
        }
      }
    }
  }
}

@include export-module('checkbox-bigger') {
  .e-bigger.e-small .e-checkbox-wrapper,
  .e-bigger.e-small.e-checkbox-wrapper,
  .e-bigger.e-small .e-css.e-checkbox-wrapper,
  .e-bigger.e-small.e-css.e-checkbox-wrapper {
    & .e-frame {
      height: $cbox-bigger-small-height;
      line-height: $cbox-bigger-small-lineheight;
      width: $cbox-bigger-small-width;
      @if $skin-name == 'fluent2' {
        margin: $cbox-bgr-css-margin;
        +label {
          margin: $cbox-bgr-css-label-margin;
        }
      }

      &:hover {
        @if $skin-name != 'FluentUI' {
          &.e-check {
            background-color: $cbox-checkmark-hover-bgcolor;
            border-color: $cbox-checkmark-hover-border-color;
          }
        }
        @if $skin-name == 'FluentUI' {
          &:not(.e-check),
          &:not(.e-stop)::before {
            content: $cbox-check-content;
            font-size: $cbox-bigger-small-check-fontsize;
          }
        }
      }
    }

    & .e-check {
      font-size: $cbox-bigger-small-check-fontsize;
    }

    & .e-stop {
      font-size: $cbox-bigger-small-indeterminate-fontsize;
      line-height: $cbox-bigger-small-indeterminate-lineheight;
    }

    & .e-label {
      font-size: $cbox-bigger-small-font-size;
      line-height: $cbox-bigger-small-height;
    }

    & .e-ripple-container {
      bottom: $cbox-ripple-bigger-small-size;
      height: $cbox-ripple-bigger-small-height;
      left: $cbox-ripple-bigger-small-size;
      right: $cbox-ripple-bigger-small-size;
      top: $cbox-ripple-bigger-small-size;
      width: $cbox-ripple-bigger-small-width;
    }
  }

  .e-bigger .e-checkbox-wrapper,
  .e-bigger.e-checkbox-wrapper,
  .e-bigger .e-css.e-checkbox-wrapper,
  .e-bigger.e-css.e-checkbox-wrapper {
    & .e-checkbox {
      +.label {
        @if $skin-name == 'fluent2' {
          margin: $cbox-bgr-checkbox-label-margin;
        }
      }
    }
    & .e-frame {
      height: $cbox-bigger-height;
      line-height: $cbox-bigger-lineheight;
      width: $cbox-bigger-width;
      @if $skin-name == 'fluent2' {
        margin: $cbox-bgr-checkbox-label-frame-margin;
      }

      &:hover {
        @if $skin-name == 'FluentUI' {
          &:not(.e-check),
          &:not(.e-stop)::before {
            content: $cbox-check-content;
            font-size: $cbox-bigger-check-fontsize;
          }
        }
      }

      +.e-label {
        font-size: $cbox-bigger-font-size;
        line-height: $cbox-bigger-height;
        @if $skin-name == 'fluent2' {
          margin: $cbox-bigger-label-margin;
        }
        @else {
          margin-left: $cbox-bigger-margin;
        }
      }

      +.e-ripple-container {
        left: $cbox-auto-width;
      }
    }

    & .e-check {
      font-size: $cbox-bigger-check-fontsize;
    }

    & .e-stop {
      font-size: $cbox-bigger-indeterminate-fontsize;
      line-height: $cbox-bigger-indeterminate-lineheight;
    }

    & .e-label {
      font-size: $cbox-bigger-font-size;
    }

    & .e-ripple-container {
      bottom: $cbox-ripple-bigger-size;
      height: $cbox-ripple-bigger-height;
      left: $cbox-ripple-bigger-size;
      right: $cbox-ripple-bigger-size;
      top: $cbox-ripple-bigger-size;
      width: $cbox-ripple-bigger-width;
    }

    &.e-rtl {
      & .e-frame {
        @if $skin-name != 'fluent2' {
          margin: $cbox-zero-margin;
        }

        &:hover {
          @if $skin-name != 'FluentUI' {
            &.e-check {
              background-color: $cbox-checkmark-hover-bgcolor;
              border-color: $cbox-checkmark-hover-border-color;
            }
          }
          @if $skin-name == 'FluentUI' {
            &:not(.e-check),
            &:not(.e-stop)::before {
              content: $cbox-check-content;
              font-size: $cbox-bigger-check-fontsize;
            }
          }
        }

        +.e-label {
          @if $skin-name == 'fluent2' {
            margin: $cbox-bgr-checkbox-label-margin;
          }
          @else {
            margin-left: $cbox-zero-margin;
            margin-right: $cbox-bigger-margin;
          }
        }

        +.e-ripple-container {
          left: $cbox-auto-width;
        }

        +.e-ripple-container {
          right: $cbox-auto-width;
        }
      }
    }

    &.e-small {
      & .e-frame {
        height: $cbox-bigger-small-height;
        line-height: $cbox-bigger-small-lineheight;
        width: $cbox-bigger-small-width;
      }

      & .e-check {
        font-size: $cbox-bigger-small-check-fontsize;
      }

      & .e-stop {
        font-size: $cbox-bigger-small-indeterminate-fontsize;
        line-height: $cbox-bigger-small-indeterminate-lineheight;
      }

      & .e-label {
        font-size: $cbox-bigger-small-font-size;
        line-height: $cbox-bigger-small-height;
      }

      & .e-ripple-container {
        bottom: $cbox-ripple-bigger-small-size;
        height: $cbox-ripple-bigger-small-height;
        left: $cbox-ripple-bigger-small-size;
        right: $cbox-ripple-bigger-small-size;
        top: $cbox-ripple-bigger-small-size;
        width: $cbox-ripple-bigger-small-width;
      }
    }
  }

  .e-bigger .e-checkbox-wrapper,
  .e-bigger.e-checkbox-wrapper,
  .e-bigger .e-css.e-checkbox-wrapper,
  .e-bigger.e-css.e-checkbox-wrapper {
    &:hover {
      & .e-frame {
        @if $skin-name == 'FluentUI' {
          font-size: $cbox-bigger-check-fontsize;

          &:not(.e-check):not(.e-stop) {
            color: $cbox-icon-color;
            @media (max-width: 768px)  {
              color: $cbox-bgcolor;
            }
          }
        }
      }
    }

    &.e-checkbox-disabled {
      & .e-frame {
        &.e-check,
        &.e-stop {
          @if $skin-name == 'Material3' {
            line-height: $cbox-disabled-line-height;
          }
        }
      }
    }
  }

  .e-bigger.e-small .e-checkbox-wrapper,
  .e-bigger.e-small.e-checkbox-wrapper,
  .e-bigger.e-small .e-css.e-checkbox-wrapper,
  .e-bigger.e-small.e-css.e-checkbox-wrapper {
    &:hover {
      & .e-frame {
        @if $skin-name == 'FluentUI' {
          font-size: $cbox-bigger-small-check-fontsize;

          &:not(.e-check):not(.e-stop) {
            color: $cbox-icon-color;
          }
        }
        @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
          background-color: $cbox-checkmark-hover-bgcolor;
          border-color: $cbox-checkmark-hover-border-color;
        }
      }
    }
  }
}

//General
$chip-bg-color: $grey-light !default;
$chip-hover-bg-color: $grey !default;
$chip-focus-bg-color: $grey-dark !default;
$chip-choice-active-bg-color: $brand-primary !default;
$chip-active-bg-color: $grey-44 !default;
$chip-focus-active-bg-color: $chip-focus-bg-color !default;
$chip-choice-focus-active-bg-color: color.adjust($brand-primary, $lightness: -10%) !default;
$chip-pressed-bg-color: $grey-44 !default;
$chip-disabled-bg-color: transparent !default;
$chip-pressed-active-bg-color: $grey-44 !default;
$chip-avatar-bg-color: color.adjust($chip-bg-color, $lightness: 12%) !default;
$chip-avatar-hover-bg-color: color.adjust($chip-hover-bg-color, $lightness: 12%) !default;
$chip-avatar-focus-bg-color: color.adjust($chip-focus-bg-color, $lightness: 12%) !default;
$chip-avatar-active-bg-color: color.adjust($chip-active-bg-color, $lightness: 12%) !default;
$chip-avatar-choice-active-bg-color: color.adjust($chip-choice-active-bg-color, $lightness: 12%) !default;
$chip-avatar-focus-active-bg-color: color.adjust($chip-focus-active-bg-color, $lightness: 12%) !default;
$chip-avatar-choice-focus-active-bg-color: color.adjust($chip-choice-focus-active-bg-color, $lightness: 12%) !default;
$chip-avatar-pressed-bg-color: color.adjust($chip-pressed-bg-color, $lightness: 12%) !default;
$chip-avatar-pressed-active-bg-color: color.adjust($chip-pressed-active-bg-color, $lightness: 12%);
$chip-avatar-disabled-bg-color: color.adjust($chip-disabled-bg-color, $lightness: 12%) !default;
$chip-font-color: $grey-dark-font !default;
$chip-hover-font-color: $grey-dark-font !default;
$chip-focus-font-color: $grey-dark-font !default;
$chip-active-font-color: $chip-focus-font-color !default;
$chip-choice-active-font-color: $brand-primary-font !default;
$chip-focus-active-font-color: $chip-focus-font-color !default;
$chip-choice-focus-active-font-color: $brand-primary-font !default;
$chip-pressed-font-color: $grey-dark-font !default;
$chip-disabled-font-color: rgba($grey-white, .65) !default;
$chip-close-icon-font-color: rgba($chip-font-color, .8) !default;
$chip-close-icon-hover-font-color: $chip-font-color !default;
$chip-close-icon-pressed-font-color: $chip-font-color !default;
$chip-icon-font-color: $grey-dark-font !default;
$chip-icon-hover-font-color: $grey-dark-font !default;
$chip-icon-focus-font-color: $grey-dark-font !default;
$chip-icon-active-font-color: $chip-icon-focus-font-color !default;
$chip-icon-focus-active-font-color: $chip-icon-focus-font-color !default;
$chip-choice-icon-focus-active-font-color: $brand-primary-font !default;
$chip-icon-pressed-font-color: $grey-dark-font !default;
$chip-avatar-font-color: $chip-icon-font-color !default;
$chip-avatar-hover-font-color: $chip-icon-hover-font-color !default;
$chip-avatar-focus-font-color: $chip-icon-focus-font-color !default;
$chip-avatar-active-font-color: $chip-icon-active-font-color !default;
$chip-avatar-choice-active-font-color: $chip-choice-active-font-color !default;
$chip-avatar-focus-active-font-color: $chip-icon-focus-active-font-color !default;
$chip-avatar-choice-focus-active-font-color: $chip-choice-icon-focus-active-font-color !default;
$chip-avatar-pressed-font-color: $chip-icon-pressed-font-color !default;
$chip-avatar-pressed-active-font-color: $chip-icon-pressed-font-color !default;
$chip-avatar-disabled-font-color: $chip-disabled-font-color !default;
$chip-border-color: $grey-8c !default;
$chip-hover-border-color: $grey-99 !default;
$chip-focus-border-color: $grey-8c !default;
$chip-choice-active-border-color: $brand-primary-lighten-10 !default;
$chip-active-border-color: $grey-ad !default;
$chip-focus-active-border-color: $chip-focus-border-color !default;
$chip-choice-focus-active-border-color: color.adjust($brand-primary, $lightness: 20%) !default;
$chip-pressed-border-color: $grey-8c !default;
$chip-disabled-border-color: rgba($grey-8c, .65) !default;
$chip-focus-box-shadow: none !default;
$chip-list-padding: 4px !default;
$chip-height: 28px !default;
$chip-border-radius: 4px !default;
$chip-box-shadow: none !default;
$chip-pressed-box-shadow: none !default;
$chip-avatar-wrapper-border-radius: 14px 4px 4px 14px !default;
$chip-avatar-border-radius: 50% !default;
$chip-leading-icon-border-radius: 0% !default;
$chip-delete-icon-border-radius: 0% !default;
$chip-padding: 0 10px !default;
$chip-margin: 4px !default;
$chip-overflow: hidden !default;
$chip-border-size: 1px !default;
$chip-font-size: 13px !default;
$chip-line-height: 1.5em !default;
$chip-font-weight: 400 !default;
$chip-avatar-size: 28px !default;
$chip-avatar-margin: 0 8px 0 -10px !default;
$chip-avatar-content-font-size: 13px !default;
$chip-leading-icon-font-size: 14px !default;
$chip-leading-icon-size: 20px !default;
$chip-leading-icon-margin: 0 8px 0 -6px !default;
$chip-multi-selection-icon-margin: 0 4px 0 -6px !default;
$chip-multi-selection-icon-margin-top: 0 !default;
$chip-delete-icon-font-size: 10px !default;
$chip-delete-icon-size: 14px !default;
$chip-delete-icon-margin: 1px -2px 0 8px !default;
$drag-indicator-width: 2px !default;

//RTL
$chip-rtl-avatar-wrapper-border-radius: 4px 14px 14px 4px !default;
$chip-rtl-avatar-margin: 0 -10px 0 8px !default;
$chip-rtl-leading-icon-margin: 0 -6px 0 8px !default;
$chip-rtl-delete-icon-margin: 0 8px 0 -2px !default;

//Touch
$chip-touch-border-radius: 4px !default;
$chip-touch-avatar-wrapper-border-radius: 16px 4px 4px 16px !default;
$chip-touch-font-size: 14px !default;
$chip-touch-height: 32px !default;
$chip-touch-padding: 0 12px !default;
$chip-touch-avatar-size: 32px !default;
$chip-touch-avatar-margin: 0 8px 0 -12px !default;
$chip-touch-avatar-content-font-size: 15px !default;
$chip-touch-leading-icon-font-size: 16px !default;
$chip-touch-leading-icon-size: 24px !default;
$chip-touch-leading-icon-margin: 0 8px 0 -8px !default;
$chip-touch-multi-selection-icon-margin: 0 4px 0 -8px !default;
$chip-touch-delete-icon-font-size: 10px !default;
$chip-touch-delete-icon-size: 18px !default;
$chip-touch-delete-icon-margin: 0 -4px 0 8px !default;

//Touch-RTL
$chip-touch-rtl-avatar-wrapper-border-radius: 4px 16px 16px 4px !default;
$chip-touch-rtl-avatar-margin: 0 -12px 0 8px !default;
$chip-touch-rtl-leading-icon-margin: 0 -8px 0 8px !default;
$chip-touch-rtl-delete-icon-margin: 0 8px 0 -4px !default;

//outline
$chip-outline-hover-bg-color: $grey !default;
$chip-outline-focus-bg-color: $grey-dark !default;
$chip-outline-choice-active-bg-color: $brand-primary !default;
$chip-outline-active-bg-color: $grey-44 !default;
$chip-outline-focus-active-bg-color: $chip-outline-focus-bg-color !default;
$chip-outline-choice-focus-active-bg-color: color.adjust($brand-primary, $lightness: -10%) !default;
$chip-outline-pressed-bg-color: $grey-44 !default;
$chip-outline-pressed-active-bg-color: $grey-44 !default;
$chip-outline-disabled-bg-color: transparent !default;
$chip-outline-avatar-bg-color: $chip-avatar-bg-color !default;
$chip-outline-avatar-hover-bg-color: $chip-outline-avatar-bg-color !default;
$chip-outline-avatar-focus-bg-color: color.adjust($chip-outline-focus-bg-color, $lightness: 12%) !default;
$chip-outline-avatar-active-bg-color: color.adjust($chip-outline-active-bg-color, $lightness: 12%) !default;
$chip-outline-avatar-choice-active-bg-color: color.adjust($chip-outline-choice-active-bg-color, $lightness: 12%) !default;
$chip-outline-avatar-focus-active-bg-color: color.adjust($chip-outline-focus-active-bg-color, $lightness: 12%) !default;
$chip-outline-avatar-choice-focus-active-bg-color: color.adjust($chip-outline-choice-focus-active-bg-color, $lightness: 12%) !default;
$chip-outline-avatar-pressed-bg-color: color.adjust($chip-outline-pressed-bg-color, $lightness: 12%) !default;
$chip-outline-avatar-pressed-active-bg-color: color.adjust($chip-outline-pressed-active-bg-color, $lightness: 12%);
$chip-outline-avatar-disabled-bg-color: color.adjust($chip-outline-disabled-bg-color, $lightness: 12%) !default;
$chip-outline-font-color: $grey-dark-font !default;
$chip-outline-hover-font-color: $grey-dark-font !default;
$chip-outline-focus-font-color: $grey-dark-font !default;
$chip-outline-active-font-color: $chip-outline-focus-font-color;
$chip-outline-choice-active-font-color: $brand-primary-font !default;
$chip-outline-focus-active-font-color: $chip-outline-focus-font-color !default;
$chip-outline-choice-focus-active-font-color: $brand-primary-font !default;
$chip-outline-pressed-font-color: $grey-dark-font !default;
$chip-outline-disabled-font-color: rgba($grey-dark, .65) !default;
$chip-outline-close-icon-font-color: $chip-close-icon-font-color !default;
$chip-outline-close-icon-hover-font-color: $chip-close-icon-hover-font-color !default;
$chip-outline-close-icon-pressed-font-color: $chip-close-icon-pressed-font-color !default;
$chip-outline-icon-font-color: $grey-dark-font !default;
$chip-outline-icon-hover-font-color: $grey-dark-font !default;
$chip-outline-icon-focus-font-color: $grey-dark-font !default;
$chip-outline-icon-active-font-color: $chip-outline-icon-focus-font-color !default;
$chip-outline-icon-focus-active-font-color: $chip-outline-icon-focus-font-color !default;
$chip-outline-choice-icon-focus-active-font-color: $brand-primary-font !default;
$chip-outline-icon-pressed-font-color: $grey-dark-font !default;
$chip-outline-avatar-font-color: $chip-outline-focus-font-color !default;
$chip-outline-avatar-hover-font-color: $chip-outline-focus-font-color !default;
$chip-outline-avatar-focus-font-color: $chip-outline-icon-focus-font-color !default;
$chip-outline-avatar-active-font-color: $chip-outline-icon-active-font-color !default;
$chip-outline-avatar-choice-active-font-color: $chip-outline-choice-active-font-color !default;
$chip-outline-avatar-focus-active-font-color: $chip-outline-icon-focus-active-font-color !default;
$chip-outline-avatar-choice-focus-active-font-color: $chip-outline-choice-icon-focus-active-font-color !default;
$chip-outline-avatar-pressed-font-color: $chip-outline-icon-pressed-font-color !default;
$chip-outline-avatar-pressed-active-font-color: $chip-outline-icon-pressed-font-color;
$chip-outline-avatar-disabled-font-color: $chip-disabled-font-color !default;
$chip-outline-border-color: $chip-border-color !default;
$chip-outline-hover-border-color: $chip-hover-border-color !default;
$chip-outline-focus-border-color: $chip-focus-border-color !default;
$chip-outline-choice-active-border-color: $brand-primary-lighten-10 !default;
$chip-outline-active-border-color: $chip-active-border-color !default;
$chip-outline-focus-active-border-color: $chip-outline-focus-border-color !default;
$chip-outline-choice-focus-active-border-color: color.adjust($brand-primary, $lightness: 20%) !default;
$chip-outline-pressed-border-color: $chip-pressed-border-color !default;
$chip-outline-disabled-border-color: rgba($grey-8c, .65) !default;
$chip-outline-border-size: 1px !default;
$chip-outline-avatar-margin: 0 4px 0 -13px !default;
$chip-outline-icon-margin: 0 4px 0 -4px !default;
$chip-outline-delete-icon-margin: 0 -4px 0 4px !default;

//outline-rtl
$chip-outline-rtl-avatar-margin: 0 -13px 0 4px !default;
$chip-outline-rtl-icon-margin: 0 -4px 0 4px !default;
$chip-outline-rtl-delete-icon-margin: 0 4px 0 -4px !default;

//theme
//primary
$chip-primary-bg-color: $brand-primary !default;
$chip-primary-hover-bg-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-primary-focus-bg-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-primary-active-bg-color: color.adjust($chip-primary-bg-color, $lightness: -20%) !default;
$chip-primary-focus-active-bg-color: $chip-primary-focus-bg-color !default;
$chip-primary-pressed-bg-color: color.adjust($chip-primary-bg-color, $lightness: -20%) !default;
$chip-primary-disabled-bg-color: transparent !default;
$chip-primary-avatar-bg-color: color.adjust($chip-primary-bg-color, $lightness: 12%) !default;
$chip-primary-avatar-hover-bg-color: color.adjust($chip-primary-hover-bg-color, $lightness: 12%) !default;
$chip-primary-avatar-focus-bg-color: color.adjust($chip-primary-focus-bg-color, $lightness: 12%) !default;
$chip-primary-avatar-active-bg-color: color.adjust($chip-primary-active-bg-color, $lightness: 12%) !default;
$chip-primary-avatar-focus-active-bg-color: color.adjust($chip-primary-focus-active-bg-color, $lightness: 12%) !default;
$chip-primary-avatar-pressed-bg-color: color.adjust($chip-primary-pressed-bg-color, $lightness: 12%) !default;
$chip-primary-avatar-disabled-bg-color: color.adjust($chip-primary-disabled-bg-color, $lightness: 12%) !default;
$chip-primary-font-color: $brand-primary-font !default;
$chip-primary-hover-font-color: $chip-primary-font-color !default;
$chip-primary-focus-font-color: $chip-primary-font-color !default;
$chip-primary-active-font-color: $chip-primary-font-color !default;
$chip-primary-focus-active-font-color: $chip-primary-focus-font-color !default;
$chip-primary-pressed-font-color: $chip-primary-font-color !default;
$chip-primary-disabled-font-color: rgba($brand-primary-lighten-10, .65) !default;
$chip-primary-close-icon-font-color: rgba($chip-primary-font-color, .8) !default;
$chip-primary-close-icon-hover-font-color: $chip-primary-hover-font-color !default;
$chip-primary-close-icon-pressed-font-color: $chip-primary-pressed-font-color !default;
$chip-primary-avatar-font-color: $chip-primary-font-color !default;
$chip-primary-avatar-hover-font-color: $chip-primary-hover-font-color !default;
$chip-primary-avatar-focus-font-color: $chip-primary-focus-font-color !default;
$chip-primary-avatar-active-font-color: $chip-primary-active-font-color !default;
$chip-primary-avatar-focus-active-font-color: $chip-primary-focus-active-font-color !default;
$chip-primary-avatar-pressed-font-color: $chip-primary-pressed-font-color !default;
$chip-primary-avatar-disabled-font-color: $chip-primary-disabled-font-color !default;
$chip-primary-border-color: color.adjust($chip-primary-bg-color, $lightness: 10%) !default;
$chip-primary-hover-border-color: $brand-primary !default;
$chip-primary-focus-border-color: color.adjust($chip-primary-bg-color, $lightness: 20%) !default;
$chip-primary-active-border-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-primary-focus-active-border-color: $chip-primary-focus-border-color !default;
$chip-primary-pressed-border-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-primary-disabled-border-color: rgba($chip-primary-border-color, .65) !default;

//success
$chip-success-bg-color: $brand-success-dark !default;
$chip-success-hover-bg-color: color.adjust($chip-success-bg-color, $lightness: -5%) !default;
$chip-success-focus-bg-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-success-active-bg-color: color.adjust($chip-success-bg-color, $lightness: -15%) !default;
$chip-success-focus-active-bg-color: $chip-success-focus-bg-color !default;
$chip-success-pressed-bg-color: color.adjust($chip-success-bg-color, $lightness: -15%) !default;
$chip-success-disabled-bg-color: transparent !default;
$chip-success-avatar-bg-color: color.adjust($chip-success-bg-color, $lightness: 12%) !default;
$chip-success-avatar-hover-bg-color: color.adjust($chip-success-hover-bg-color, $lightness: 12%) !default;
$chip-success-avatar-focus-bg-color: color.adjust($chip-success-focus-bg-color, $lightness: 12%) !default;
$chip-success-avatar-active-bg-color: color.adjust($chip-success-active-bg-color, $lightness: 12%) !default;
$chip-success-avatar-focus-active-bg-color: color.adjust($chip-success-focus-active-bg-color, $lightness: 12%) !default;
$chip-success-avatar-pressed-bg-color: color.adjust($chip-success-pressed-bg-color, $lightness: 12%) !default;
$chip-success-avatar-disabled-bg-color: color.adjust($chip-success-disabled-bg-color, $lightness: 12%) !default;
$chip-success-font-color: #fff !default;
$chip-success-hover-font-color: $chip-success-font-color !default;
$chip-success-focus-font-color: $chip-success-font-color !default;
$chip-success-active-font-color: $chip-success-font-color !default;
$chip-success-focus-active-font-color: $chip-success-focus-font-color !default;
$chip-success-pressed-font-color: $chip-success-font-color !default;
$chip-success-disabled-font-color: rgba($chip-success-bg-color, .65) !default;
$chip-success-close-icon-font-color: rgba($chip-success-font-color, .8) !default;
$chip-success-close-icon-hover-font-color: $chip-success-hover-font-color !default;
$chip-success-close-icon-pressed-font-color: $chip-success-pressed-font-color !default;
$chip-success-avatar-font-color: $chip-success-font-color !default;
$chip-success-avatar-hover-font-color: $chip-success-hover-font-color !default;
$chip-success-avatar-focus-font-color: $chip-success-focus-font-color !default;
$chip-success-avatar-active-font-color: $chip-success-active-font-color !default;
$chip-success-avatar-focus-active-font-color: $chip-success-focus-active-font-color !default;
$chip-success-avatar-pressed-font-color: $chip-success-pressed-font-color !default;
$chip-success-avatar-disabled-font-color: $chip-success-disabled-font-color !default;
$chip-success-border-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-success-hover-border-color: color.adjust($chip-success-bg-color, $lightness: -0%) !default;
$chip-success-focus-border-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-success-active-border-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-success-focus-active-border-color: $chip-success-focus-border-color !default;
$chip-success-pressed-border-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-success-disabled-border-color: rgba($chip-success-border-color, .65) !default;

//info
$chip-info-bg-color: $brand-info-dark !default;
$chip-info-hover-bg-color: color.adjust($chip-info-bg-color, $lightness: -5%) !default;
$chip-info-focus-bg-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-info-active-bg-color: color.adjust($chip-info-bg-color, $lightness: -15%) !default;
$chip-info-focus-active-bg-color: $chip-info-focus-bg-color !default;
$chip-info-pressed-bg-color: color.adjust($chip-info-bg-color, $lightness: -15%) !default;
$chip-info-disabled-bg-color: transparent !default;
$chip-info-avatar-bg-color: color.adjust($chip-info-bg-color, $lightness: 12%) !default;
$chip-info-avatar-hover-bg-color: color.adjust($chip-info-hover-bg-color, $lightness: 12%) !default;
$chip-info-avatar-focus-bg-color: color.adjust($chip-info-focus-bg-color, $lightness: 12%) !default;
$chip-info-avatar-active-bg-color: color.adjust($chip-info-active-bg-color, $lightness: 12%) !default;
$chip-info-avatar-focus-active-bg-color: color.adjust($chip-info-focus-active-bg-color, $lightness: 12%) !default;
$chip-info-avatar-pressed-bg-color: color.adjust($chip-info-pressed-bg-color, $lightness: 12%) !default;
$chip-info-avatar-disabled-bg-color: color.adjust($chip-info-disabled-bg-color, $lightness: 12%) !default;
$chip-info-font-color: #fff !default;
$chip-info-hover-font-color: $chip-info-font-color !default;
$chip-info-focus-font-color: $chip-info-font-color !default;
$chip-info-active-font-color: $chip-info-font-color !default;
$chip-info-focus-active-font-color: $chip-info-focus-font-color !default;
$chip-info-pressed-font-color: $chip-info-font-color !default;
$chip-info-disabled-font-color: rgba($grey-dark-font, .65) !default;
$chip-info-close-icon-font-color: rgba($chip-info-font-color, .8) !default;
$chip-info-close-icon-hover-font-color: $chip-info-hover-font-color !default;
$chip-info-close-icon-pressed-font-color: $chip-info-pressed-font-color !default;
$chip-info-avatar-font-color: $chip-info-font-color !default;
$chip-info-avatar-hover-font-color: $chip-info-hover-font-color !default;
$chip-info-avatar-focus-font-color: $chip-info-focus-font-color !default;
$chip-info-avatar-active-font-color: $chip-info-active-font-color !default;
$chip-info-avatar-focus-active-font-color: $chip-info-focus-active-font-color !default;
$chip-info-avatar-pressed-font-color: $chip-info-pressed-font-color !default;
$chip-info-avatar-disabled-font-color: $chip-info-disabled-font-color !default;
$chip-info-border-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-info-hover-border-color: color.adjust($chip-info-bg-color, $lightness: -0%) !default;
$chip-info-focus-border-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-info-active-border-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-info-focus-active-border-color: $chip-info-focus-border-color !default;
$chip-info-pressed-border-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-info-disabled-border-color: rgba($chip-info-border-color, .65) !default;

//warning
$chip-warning-bg-color: $brand-warning-dark !default;
$chip-warning-hover-bg-color: color.adjust($chip-warning-bg-color, $lightness: -5%) !default;
$chip-warning-focus-bg-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-warning-active-bg-color: color.adjust($chip-warning-bg-color, $lightness: -15%) !default;
$chip-warning-focus-active-bg-color: $chip-warning-focus-bg-color !default;
$chip-warning-pressed-bg-color: color.adjust($chip-warning-bg-color, $lightness: -15%) !default;
$chip-warning-disabled-bg-color: transparent !default;
$chip-warning-avatar-bg-color: color.adjust($chip-warning-bg-color, $lightness: 12%) !default;
$chip-warning-avatar-hover-bg-color: color.adjust($chip-warning-hover-bg-color, $lightness: 12%) !default;
$chip-warning-avatar-focus-bg-color: color.adjust($chip-warning-focus-bg-color, $lightness: 12%) !default;
$chip-warning-avatar-active-bg-color: color.adjust($chip-warning-active-bg-color, $lightness: 12%) !default;
$chip-warning-avatar-focus-active-bg-color: color.adjust($chip-warning-focus-active-bg-color, $lightness: 12%) !default;
$chip-warning-avatar-pressed-bg-color: color.adjust($chip-warning-pressed-bg-color, $lightness: 12%) !default;
$chip-warning-avatar-disabled-bg-color: color.adjust($chip-warning-disabled-bg-color, $lightness: 12%) !default;
$chip-warning-font-color: #fff !default;
$chip-warning-hover-font-color: $chip-warning-font-color !default;
$chip-warning-focus-font-color: $chip-warning-font-color !default;
$chip-warning-active-font-color: $chip-warning-font-color !default;
$chip-warning-focus-active-font-color: $chip-warning-focus-font-color !default;
$chip-warning-pressed-font-color: $chip-warning-font-color !default;
$chip-warning-disabled-font-color: rgba($chip-warning-bg-color, .65) !default;
$chip-warning-close-icon-font-color: rgba($chip-warning-font-color, .8) !default;
$chip-warning-close-icon-hover-font-color: $chip-warning-hover-font-color !default;
$chip-warning-close-icon-pressed-font-color: $chip-warning-pressed-font-color !default;
$chip-warning-avatar-font-color: $chip-warning-font-color !default;
$chip-warning-avatar-hover-font-color: $chip-warning-hover-font-color !default;
$chip-warning-avatar-focus-font-color: $chip-warning-focus-font-color !default;
$chip-warning-avatar-active-font-color: $chip-warning-active-font-color !default;
$chip-warning-avatar-focus-active-font-color: $chip-warning-focus-active-font-color !default;
$chip-warning-avatar-pressed-font-color: $chip-warning-pressed-font-color !default;
$chip-warning-avatar-disabled-font-color: $chip-warning-disabled-font-color !default;
$chip-warning-border-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-warning-hover-border-color: color.adjust($chip-warning-bg-color, $lightness: -0%) !default;
$chip-warning-focus-border-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-warning-active-border-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-warning-focus-active-border-color: $chip-warning-focus-border-color !default;
$chip-warning-pressed-border-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-warning-disabled-border-color: rgba($chip-warning-border-color, .65) !default;

//danger
$chip-danger-bg-color: $brand-danger-dark !default;
$chip-danger-hover-bg-color: color.adjust($chip-danger-bg-color, $lightness: -5%) !default;
$chip-danger-focus-bg-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-danger-active-bg-color: color.adjust($chip-danger-bg-color, $lightness: -15%) !default;
$chip-danger-focus-active-bg-color: $chip-danger-focus-bg-color !default;
$chip-danger-pressed-bg-color: color.adjust($chip-danger-bg-color, $lightness: -15%) !default;
$chip-danger-disabled-bg-color: transparent !default;
$chip-danger-avatar-bg-color: color.adjust($chip-danger-bg-color, $lightness: 12%) !default;
$chip-danger-avatar-hover-bg-color: color.adjust($chip-danger-hover-bg-color, $lightness: 12%) !default;
$chip-danger-avatar-focus-bg-color: color.adjust($chip-danger-focus-bg-color, $lightness: 12%) !default;
$chip-danger-avatar-active-bg-color: color.adjust($chip-danger-active-bg-color, $lightness: 12%) !default;
$chip-danger-avatar-focus-active-bg-color: color.adjust($chip-danger-focus-active-bg-color, $lightness: 12%) !default;
$chip-danger-avatar-pressed-bg-color: color.adjust($chip-danger-pressed-bg-color, $lightness: 12%) !default;
$chip-danger-avatar-disabled-bg-color: color.adjust($chip-danger-disabled-bg-color, $lightness: 12%) !default;
$chip-danger-font-color: #fff !default;
$chip-danger-hover-font-color: $chip-danger-font-color !default;
$chip-danger-focus-font-color: $chip-danger-font-color !default;
$chip-danger-active-font-color: $chip-danger-font-color !default;
$chip-danger-focus-active-font-color: $chip-danger-focus-font-color !default;
$chip-danger-pressed-font-color: $chip-danger-font-color !default;
$chip-danger-disabled-font-color: rgba($chip-danger-bg-color, .65) !default;
$chip-danger-avatar-font-color: $chip-danger-font-color !default;
$chip-danger-avatar-hover-font-color: $chip-danger-hover-font-color !default;
$chip-danger-avatar-focus-font-color: $chip-danger-focus-font-color !default;
$chip-danger-avatar-active-font-color: $chip-danger-active-font-color !default;
$chip-danger-avatar-focus-active-font-color: $chip-danger-focus-active-font-color !default;
$chip-danger-avatar-pressed-font-color: $chip-danger-pressed-font-color !default;
$chip-danger-avatar-disabled-font-color: $chip-danger-disabled-font-color !default;
$chip-danger-close-icon-font-color: rgba($chip-danger-font-color, .8) !default;
$chip-danger-close-icon-hover-font-color: $chip-danger-hover-font-color !default;
$chip-danger-close-icon-pressed-font-color: $chip-danger-pressed-font-color !default;
$chip-danger-border-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-danger-hover-border-color: color.adjust($chip-danger-bg-color, $lightness: -0%) !default;
$chip-danger-focus-border-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-danger-active-border-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-danger-focus-active-border-color: $chip-danger-focus-border-color !default;
$chip-danger-pressed-border-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-danger-disabled-border-color: rgba($chip-danger-border-color, .65) !default;

//outline-theme
//primary
$chip-outline-primary-bg-color: transparent !default;
$chip-outline-primary-hover-bg-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-outline-primary-focus-bg-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-outline-primary-active-bg-color: $chip-primary-bg-color !default;
$chip-outline-primary-focus-active-bg-color: $chip-outline-primary-focus-bg-color !default;
$chip-outline-primary-pressed-bg-color: color.adjust($chip-primary-bg-color, $lightness: -20%) !default;
$chip-outline-primary-disabled-bg-color: transparent !default;
$chip-outline-primary-avatar-bg-color: color.adjust($chip-primary-bg-color, $lightness: 10%) !default;
$chip-outline-primary-avatar-hover-bg-color: $chip-outline-primary-avatar-bg-color !default;
$chip-outline-primary-avatar-focus-bg-color: color.adjust($chip-outline-primary-focus-bg-color, $lightness: 12%) !default;
$chip-outline-primary-avatar-active-bg-color: color.adjust($chip-outline-primary-active-bg-color, $lightness: 12%) !default;
$chip-outline-primary-avatar-focus-active-bg-color: color.adjust($chip-outline-primary-focus-active-bg-color, $lightness: 12%) !default;
$chip-outline-primary-avatar-pressed-bg-color: color.adjust($chip-outline-primary-pressed-bg-color, $lightness: 12%) !default;
$chip-outline-primary-avatar-disabled-bg-color: color.adjust($chip-outline-primary-disabled-bg-color, $lightness: 12%) !default;
$chip-outline-primary-font-color: color.adjust($chip-primary-bg-color, $lightness: 10%) !default;
$chip-outline-primary-hover-font-color: $chip-primary-font-color !default;
$chip-outline-primary-focus-font-color: $chip-primary-font-color !default;
$chip-outline-primary-active-font-color: $chip-primary-font-color !default;
$chip-outline-primary-focus-active-font-color: $chip-outline-primary-focus-font-color !default;
$chip-outline-primary-pressed-font-color: $chip-primary-font-color !default;
$chip-outline-primary-disabled-font-color: rgba($chip-primary-bg-color, .65) !default;
$chip-outline-primary-close-icon-font-color: rgba($chip-outline-primary-font-color, .8) !default;
$chip-outline-primary-close-icon-hover-font-color: $chip-outline-primary-hover-font-color !default;
$chip-outline-primary-close-icon-pressed-font-color: $chip-outline-primary-pressed-font-color !default;
$chip-outline-primary-avatar-font-color: $chip-outline-primary-focus-font-color !default;
$chip-outline-primary-avatar-hover-font-color: $chip-outline-primary-focus-font-color !default;
$chip-outline-primary-avatar-focus-font-color: $chip-outline-primary-focus-font-color !default;
$chip-outline-primary-avatar-active-font-color: $chip-outline-primary-active-font-color !default;
$chip-outline-primary-avatar-focus-active-font-color: $chip-outline-primary-focus-active-font-color !default;
$chip-outline-primary-avatar-pressed-font-color: $chip-outline-primary-pressed-font-color !default;
$chip-outline-primary-avatar-disabled-font-color: $chip-outline-primary-disabled-font-color !default;
$chip-outline-primary-border-color: color.adjust($chip-primary-bg-color, $lightness: 10%) !default;
$chip-outline-primary-hover-border-color: $brand-primary !default;
$chip-outline-primary-focus-border-color: color.adjust($chip-primary-bg-color, $lightness: 20%) !default;
$chip-outline-primary-active-border-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-outline-primary-focus-active-border-color: $chip-outline-primary-focus-border-color !default;
$chip-outline-primary-pressed-border-color: color.adjust($chip-primary-bg-color, $lightness: -10%) !default;
$chip-outline-primary-disabled-border-color: rgba($chip-primary-bg-color, .65) !default;

//success
$chip-outline-success-bg-color: transparent !default;
$chip-outline-success-hover-bg-color: color.adjust($chip-success-bg-color, $lightness: -5%) !default;
$chip-outline-success-focus-bg-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-outline-success-active-bg-color: $chip-success-bg-color !default;
$chip-outline-success-focus-active-bg-color: $chip-outline-success-focus-bg-color !default;
$chip-outline-success-pressed-bg-color: color.adjust($chip-success-bg-color, $lightness: -15%) !default;
$chip-outline-success-disabled-bg-color: transparent !default;
$chip-outline-success-avatar-bg-color: color.adjust($chip-success-bg-color, $lightness: 10%) !default;
$chip-outline-success-avatar-hover-bg-color: $chip-outline-success-avatar-bg-color !default;
$chip-outline-success-avatar-focus-bg-color: color.adjust($chip-outline-success-focus-bg-color, $lightness: 12%) !default;
$chip-outline-success-avatar-active-bg-color: color.adjust($chip-outline-success-active-bg-color, $lightness: 12%) !default;
$chip-outline-success-avatar-focus-active-bg-color: color.adjust($chip-outline-success-focus-active-bg-color, $lightness: 12%) !default;
$chip-outline-success-avatar-pressed-bg-color: color.adjust($chip-outline-success-pressed-bg-color, $lightness: 12%) !default;
$chip-outline-success-avatar-disabled-bg-color: color.adjust($chip-outline-success-disabled-bg-color, $lightness: 12%) !default;
$chip-outline-success-font-color: $brand-success !default;
$chip-outline-success-hover-font-color: $chip-success-font-color !default;
$chip-outline-success-focus-font-color: $chip-success-font-color !default;
$chip-outline-success-active-font-color: $chip-success-font-color !default;
$chip-outline-success-focus-active-font-color: $chip-outline-success-focus-font-color !default;
$chip-outline-success-pressed-font-color: $chip-success-font-color !default;
$chip-outline-success-disabled-font-color: rgba($chip-success-bg-color, .65) !default;
$chip-outline-success-close-icon-font-color: rgba($chip-outline-success-font-color, .8) !default;
$chip-outline-success-close-icon-hover-font-color: $chip-outline-success-hover-font-color !default;
$chip-outline-success-close-icon-pressed-font-color: $chip-outline-success-pressed-font-color !default;
$chip-outline-success-avatar-font-color: $chip-outline-success-focus-font-color !default;
$chip-outline-success-avatar-hover-font-color: $chip-outline-success-focus-font-color !default;
$chip-outline-success-avatar-focus-font-color: $chip-outline-success-focus-font-color !default;
$chip-outline-success-avatar-active-font-color: $chip-outline-success-active-font-color !default;
$chip-outline-success-avatar-focus-active-font-color: $chip-outline-success-focus-active-font-color !default;
$chip-outline-success-avatar-pressed-font-color: $chip-outline-success-pressed-font-color !default;
$chip-outline-success-avatar-disabled-font-color: $chip-outline-success-disabled-font-color !default;
$chip-outline-success-border-color: $brand-success !default;
$chip-outline-success-hover-border-color: color.adjust($chip-success-bg-color, $lightness: -0%) !default;
$chip-outline-success-focus-border-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-outline-success-active-border-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-outline-success-focus-active-border-color: $chip-outline-success-focus-border-color !default;
$chip-outline-success-pressed-border-color: color.adjust($chip-success-bg-color, $lightness: -10%) !default;
$chip-outline-success-disabled-border-color: rgba($chip-success-bg-color, .65) !default;

//info
$chip-outline-info-bg-color: transparent !default;
$chip-outline-info-hover-bg-color: color.adjust($chip-info-bg-color, $lightness: -5%) !default;
$chip-outline-info-focus-bg-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-outline-info-active-bg-color: $chip-info-bg-color !default;
$chip-outline-info-focus-active-bg-color: $chip-outline-info-focus-bg-color !default;
$chip-outline-info-pressed-bg-color: color.adjust($chip-info-bg-color, $lightness: -15%) !default;
$chip-outline-info-disabled-bg-color: transparent !default;
$chip-outline-info-avatar-bg-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-outline-info-avatar-hover-bg-color: $chip-outline-info-avatar-bg-color !default;
$chip-outline-info-avatar-focus-bg-color: color.adjust($chip-outline-info-focus-bg-color, $lightness: -12%) !default;
$chip-outline-info-avatar-active-bg-color: color.adjust($chip-outline-info-active-bg-color, $lightness: -12%) !default;
$chip-outline-info-avatar-focus-active-bg-color: color.adjust($chip-outline-info-focus-active-bg-color, $lightness: -12%) !default;
$chip-outline-info-avatar-pressed-bg-color: color.adjust($chip-outline-info-pressed-bg-color, $lightness: -12%) !default;
$chip-outline-info-avatar-disabled-bg-color: color.adjust($chip-outline-info-disabled-bg-color, $lightness: -12%) !default;
$chip-outline-info-font-color: $brand-info !default;
$chip-outline-info-hover-font-color: $chip-info-font-color !default;
$chip-outline-info-focus-font-color: $chip-info-font-color !default;
$chip-outline-info-active-font-color: $chip-info-font-color !default;
$chip-outline-info-focus-active-font-color: $chip-outline-info-focus-font-color !default;
$chip-outline-info-pressed-font-color: $chip-info-font-color !default;
$chip-outline-info-disabled-font-color: rgba($chip-info-bg-color, .65) !default;
$chip-outline-info-close-icon-font-color: rgba($chip-outline-info-font-color, .8) !default;
$chip-outline-info-close-icon-hover-font-color: $chip-outline-info-hover-font-color !default;
$chip-outline-info-close-icon-pressed-font-color: $chip-outline-info-pressed-font-color !default;
$chip-outline-info-avatar-font-color: $chip-outline-info-focus-font-color !default;
$chip-outline-info-avatar-hover-font-color: $chip-outline-info-focus-font-color !default;
$chip-outline-info-avatar-focus-font-color: $chip-outline-info-focus-font-color !default;
$chip-outline-info-avatar-active-font-color: $chip-outline-info-active-font-color !default;
$chip-outline-info-avatar-focus-active-font-color: $chip-outline-info-focus-active-font-color !default;
$chip-outline-info-avatar-pressed-font-color: $chip-outline-info-pressed-font-color !default;
$chip-outline-info-avatar-disabled-font-color: $chip-outline-info-disabled-font-color !default;
$chip-outline-info-border-color: $brand-info !default;
$chip-outline-info-hover-border-color: color.adjust($chip-info-bg-color, $lightness: -0%) !default;
$chip-outline-info-focus-border-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-outline-info-active-border-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-outline-info-focus-active-border-color: $chip-outline-info-focus-border-color !default;
$chip-outline-info-pressed-border-color: color.adjust($chip-info-bg-color, $lightness: -10%) !default;
$chip-outline-info-disabled-border-color: rgba($chip-info-bg-color, .65) !default;

//warning
$chip-outline-warning-bg-color: transparent !default;
$chip-outline-warning-hover-bg-color: color.adjust($chip-warning-bg-color, $lightness: -5%) !default;
$chip-outline-warning-focus-bg-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-outline-warning-active-bg-color: $chip-warning-bg-color !default;
$chip-outline-warning-focus-active-bg-color: $chip-outline-warning-focus-bg-color !default;
$chip-outline-warning-pressed-bg-color: color.adjust($chip-warning-bg-color, $lightness: -15%) !default;
$chip-outline-warning-disabled-bg-color: transparent !default;
$chip-outline-warning-avatar-bg-color: color.adjust($chip-warning-bg-color, $lightness: 10%) !default;
$chip-outline-warning-avatar-hover-bg-color: $chip-outline-warning-avatar-bg-color !default;
$chip-outline-warning-avatar-focus-bg-color: color.adjust($chip-outline-warning-focus-bg-color, $lightness: 12%) !default;
$chip-outline-warning-avatar-active-bg-color: color.adjust($chip-outline-warning-active-bg-color, $lightness: 12%) !default;
$chip-outline-warning-avatar-focus-active-bg-color: color.adjust($chip-outline-warning-focus-active-bg-color, $lightness: 12%) !default;
$chip-outline-warning-avatar-pressed-bg-color: color.adjust($chip-outline-warning-pressed-bg-color, $lightness: 12%) !default;
$chip-outline-warning-avatar-disabled-bg-color: color.adjust($chip-outline-warning-disabled-bg-color, $lightness: 12%) !default;
$chip-outline-warning-font-color: $brand-warning !default;
$chip-outline-warning-hover-font-color: $chip-warning-font-color !default;
$chip-outline-warning-focus-font-color: $chip-warning-font-color !default;
$chip-outline-warning-active-font-color: $chip-warning-font-color !default;
$chip-outline-warning-focus-active-font-color: $chip-outline-warning-focus-font-color !default;
$chip-outline-warning-pressed-font-color: $chip-warning-font-color !default;
$chip-outline-warning-disabled-font-color: rgba($chip-warning-bg-color, .65) !default;
$chip-outline-warning-close-icon-font-color: rgba($chip-outline-warning-font-color, .8) !default;
$chip-outline-warning-close-icon-hover-font-color: $chip-outline-warning-hover-font-color !default;
$chip-outline-warning-close-icon-pressed-font-color: $chip-outline-warning-pressed-font-color !default;
$chip-outline-warning-avatar-font-color: $chip-outline-warning-focus-font-color !default;
$chip-outline-warning-avatar-hover-font-color: $chip-outline-warning-focus-font-color !default;
$chip-outline-warning-avatar-focus-font-color: $chip-outline-warning-focus-font-color !default;
$chip-outline-warning-avatar-active-font-color: $chip-outline-warning-active-font-color !default;
$chip-outline-warning-avatar-focus-active-font-color: $chip-outline-warning-focus-active-font-color !default;
$chip-outline-warning-avatar-pressed-font-color: $chip-outline-warning-pressed-font-color !default;
$chip-outline-warning-avatar-disabled-font-color: $chip-outline-warning-disabled-font-color !default;
$chip-outline-warning-border-color: $brand-warning !default;
$chip-outline-warning-hover-border-color: color.adjust($chip-warning-bg-color, $lightness: -0%) !default;
$chip-outline-warning-focus-border-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-outline-warning-active-border-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-outline-warning-focus-active-border-color: $chip-outline-warning-focus-border-color !default;
$chip-outline-warning-pressed-border-color: color.adjust($chip-warning-bg-color, $lightness: -10%) !default;
$chip-outline-warning-disabled-border-color: rgba($chip-warning-bg-color, .65) !default;

//danger
$chip-outline-danger-bg-color: transparent !default;
$chip-outline-danger-hover-bg-color: color.adjust($chip-danger-bg-color, $lightness: -5%) !default;
$chip-outline-danger-focus-bg-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-outline-danger-active-bg-color: $chip-danger-bg-color !default;
$chip-outline-danger-focus-active-bg-color: $chip-outline-danger-focus-bg-color !default;
$chip-outline-danger-pressed-bg-color: color.adjust($chip-danger-bg-color, $lightness: -15%) !default;
$chip-outline-danger-disabled-bg-color: transparent !default;
$chip-outline-danger-avatar-bg-color: color.adjust($chip-danger-bg-color, $lightness: 10%) !default;
$chip-outline-danger-avatar-hover-bg-color: $chip-outline-danger-avatar-bg-color !default;
$chip-outline-danger-avatar-focus-bg-color: color.adjust($chip-outline-danger-focus-bg-color, $lightness: 12%) !default;
$chip-outline-danger-avatar-active-bg-color: color.adjust($chip-outline-danger-active-bg-color, $lightness: 12%) !default;
$chip-outline-danger-avatar-focus-active-bg-color: color.adjust($chip-outline-danger-focus-active-bg-color, $lightness: 12%) !default;
$chip-outline-danger-avatar-pressed-bg-color: color.adjust($chip-outline-danger-pressed-bg-color, $lightness: 12%) !default;
$chip-outline-danger-avatar-disabled-bg-color: color.adjust($chip-outline-danger-disabled-bg-color, $lightness: 12%) !default;
$chip-outline-danger-font-color: $brand-danger !default;
$chip-outline-danger-hover-font-color: $chip-danger-font-color !default;
$chip-outline-danger-focus-font-color: $chip-danger-font-color !default;
$chip-outline-danger-active-font-color: $chip-danger-font-color !default;
$chip-outline-danger-focus-active-font-color: $chip-outline-danger-focus-font-color !default;
$chip-outline-danger-pressed-font-color: $chip-danger-font-color !default;
$chip-outline-danger-disabled-font-color: rgba($chip-danger-bg-color, .65) !default;
$chip-outline-danger-close-icon-font-color: rgba($chip-outline-danger-font-color, .8) !default;
$chip-outline-danger-close-icon-hover-font-color: $chip-outline-danger-hover-font-color !default;
$chip-outline-danger-close-icon-pressed-font-color: $chip-outline-danger-pressed-font-color !default;
$chip-outline-danger-avatar-font-color: $chip-outline-danger-focus-font-color !default;
$chip-outline-danger-avatar-hover-font-color: $chip-outline-danger-focus-font-color !default;
$chip-outline-danger-avatar-focus-font-color: $chip-outline-danger-focus-font-color !default;
$chip-outline-danger-avatar-active-font-color: $chip-outline-danger-active-font-color !default;
$chip-outline-danger-avatar-focus-active-font-color: $chip-outline-danger-focus-active-font-color !default;
$chip-outline-danger-avatar-pressed-font-color: $chip-outline-danger-pressed-font-color !default;
$chip-outline-danger-avatar-disabled-font-color: $chip-outline-danger-disabled-font-color !default;
$chip-outline-danger-border-color: $brand-danger !default;
$chip-outline-danger-hover-border-color: color.adjust($chip-danger-bg-color, $lightness: -0%) !default;
$chip-outline-danger-focus-border-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-outline-danger-active-border-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-outline-danger-focus-active-border-color: $chip-outline-danger-focus-border-color !default;
$chip-outline-danger-pressed-border-color: color.adjust($chip-danger-bg-color, $lightness: -10%) !default;
$chip-outline-danger-disabled-border-color: rgba($chip-danger-bg-color, .65) !default;
$chip-touch-text-margin-top: -3px !default;
$chip-align-line-height: 1 !default;
$chip-zero-width: 0 !default;

@mixin align-chip($border-radius, $font-size, $margin) {
  border-radius: $border-radius;
  font-size: $font-size;
  margin: $margin;
  align-items: center;
  justify-content: center;
  line-height: $chip-align-line-height;
}

@mixin icon-position {
  background-size: cover;
  display: flex;
  overflow: hidden;
}

@mixin icon-style($height, $width) {
  height: $height;
  width: $width;
}

@mixin bigger-style($height, $width, $margin) {
  height: $height;
  width: $width;
  margin: $margin;
}

.e-clone-chip {
  z-index: 2000;
}

@include export-module('chip-layout') {
  .e-chip-list {
    display: flex;
    padding: $chip-list-padding;

    &.e-chip,
    .e-chip {
      -webkit-tap-highlight-color: transparent;
      border: $chip-border-size solid;
      @include align-chip($chip-border-radius, $chip-font-size, $chip-margin);
      box-shadow: $chip-box-shadow;
      box-sizing: border-box;
      cursor: pointer;
      display: inline-flex;
      font-weight: $chip-font-weight;
      height: $chip-height;
      line-height: $chip-line-height;
      outline: none;
      overflow: $chip-overflow;
      padding: $chip-padding;
      position: relative;
      transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1);
      user-select: none;

      .e-chip-avatar {
        @include icon-position;
        @include icon-style($chip-avatar-size, $chip-avatar-size);
        @include align-chip($chip-avatar-border-radius, $chip-avatar-content-font-size, $chip-avatar-margin);
      }

      .e-chip-avatar-wrap,
      &.e-chip-avatar-wrap {
        border-radius: $chip-avatar-wrapper-border-radius;
      }

      .e-chip-icon {
        @include icon-position;
        @include icon-style($chip-leading-icon-size, $chip-leading-icon-size);
        @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin);
        @if ($skin-name == 'tailwind3') {
          font-weight: normal;
        }
      }

      .e-chip-drag {
        &.e-drag-and-drop,
        &.e-error-treeview {
          margin: $chip-leading-icon-margin;
        }
      }

      .e-chip-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5dark') {
          height: $chip-text-height;
        }
      }

      .e-chip-delete {
        @include icon-position;
        @include icon-style($chip-delete-icon-size, $chip-delete-icon-size);
        @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin);
        @if $skin-name == 'Material3' {
          line-height: $chip-delete-icon-size;
          width: $chip-delete-icon-font-size;
        }
        &.e-dlt-btn::before {
          font-family: 'e-icons';
        }
      }

      .image-url {
        @include icon-position;
        @include icon-style($chip-leading-icon-size, $chip-leading-icon-size);
        @include align-chip($chip-leading-icon-border-radius, $chip-leading-icon-font-size, $chip-leading-icon-margin);
      }

      .trailing-icon-url {
        @include icon-position;
        @include icon-style($chip-delete-icon-size, $chip-delete-icon-size);
        @include align-chip($chip-delete-icon-border-radius, $chip-delete-icon-font-size, $chip-delete-icon-margin);
        font-family: 'e-icons';
      }

      .e-chip-template {
        display: inline-flex;
      }
    }

    .e-chip.e-outline {
      .e-chip-avatar {
        @if ($skin-name == 'FluentUI') {
          @include icon-style($chip-outline-avatar-size, $chip-outline-avatar-size);
          border-radius: $chip-avatar-wrapper-border-radius;
        }
      }
    }

    &:not(.e-chip) {
      flex-wrap: wrap;
    }

    &.e-multi-selection .e-chip {
      &::before {
        align-items: center;
        justify-content: center;
        line-height: $chip-align-line-height;
        display: flex;
        font-family: 'e-icons';
        @include icon-style($chip-leading-icon-size, $chip-leading-icon-size);
        margin: $chip-multi-selection-icon-margin;
        margin-top: $chip-multi-selection-icon-margin-top;
        overflow: hidden;
        transition: width 300ms cubic-bezier(.4, 0, .2, 1);
      }

      &:not(.e-chip-icon-wrap):not(.e-chip-avatar-wrap) {
        &::before {
          width: $chip-zero-width;
        }
      }

      &.e-chip-icon-wrap,
      &.e-chip-avatar-wrap {
        &::before {
          display: none;
        }
      }

      &.e-chip-avatar-wrap {
        &::before {
          @include icon-style($chip-avatar-size, $chip-avatar-size);
          margin: $chip-avatar-margin;
          margin-top: $chip-multi-selection-icon-margin-top;
        }
      }

      &.e-active {
        & .e-chip-icon,
        & .e-chip-avatar {
          display: none;
        }

        &.e-chip-icon-wrap,
        &.e-chip-avatar-wrap {
          &::before {
            display: flex;
          }
        }

        &:not(.e-chip-icon-wrap):not(.e-chip-avatar-wrap) {
          &::before {
            width: $chip-leading-icon-size;
          }
        }
      }
    }

    &.e-rtl {
      &.e-chip,
      & .e-chip {
        .e-chip-avatar {
          margin: $chip-rtl-avatar-margin;
        }

        .e-chip-icon {
          margin: $chip-rtl-leading-icon-margin;
        }

        .e-chip-drag {
          &.e-drag-and-drop,
          &.e-error-treeview {
            margin: $chip-rtl-leading-icon-margin;
          }
        }

        .e-chip-delete {
          margin: $chip-rtl-delete-icon-margin;
        }

        .e-chip-avatar-wrap,
        &.e-chip-avatar-wrap {
          border-radius: $chip-rtl-avatar-wrapper-border-radius;
        }

        .trailing-icon-url {
          margin: $chip-rtl-delete-icon-margin;
        }
      }

      &.e-multi-selection .e-chip {
        &::before {
          margin: $chip-rtl-leading-icon-margin;
          margin-top: $chip-multi-selection-icon-margin-top;
        }

        &.e-chip-avatar-wrap {
          &::before {
            margin: $chip-rtl-avatar-margin;
            margin-top: $chip-multi-selection-icon-margin-top;
          }
        }
      }
    }
  }
}

@mixin chip-color($bg-color, $border-color, $color, $icon-color, $avatar-bg-color, $avatar-font-color, $delete-icon-color: null) {
  background: $bg-color;
  @if $skin-name != 'Material3' {
    border-color: $border-color;
  }
  @else {
    border-image: $border-color;
  }
  color: $color;

  .e-chip-icon,
  .e-chip-delete {
    color: $icon-color;
  }

  .e-chip-delete.e-dlt-btn {
    color: $delete-icon-color;
  }

  .e-chip-avatar {
    background-color: $avatar-bg-color;
    color: $avatar-font-color;
  }
}

@mixin chip-dlt-btn-color($hover-color, $pressed-color) {
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
    .e-chip-delete.e-dlt-btn {
      &:hover {
        color: $hover-color;
      }

      &:active {
        color: $pressed-color;
      }
    }
  }
  @else {
    &:not(.e-active) {
      .e-chip-delete.e-dlt-btn {
        &:hover {
          color: $hover-color;
        }

        &:active {
          color: $pressed-color;
        }
      }
    }
  }
}

@mixin chip-disabled {
  opacity: .65;
  pointer-events: none;
}

.e-drag-indicator {
  background-color: $chip-choice-active-bg-color;
  height: $chip-height;
  width: $drag-indicator-width;
  position: absolute;
  display: none;
  z-index: 1000;
}

@include export-module('chip-theme') {
  .e-chip-list {
    &.e-selection .e-chip {
      &.e-active {
        @if ($skin-name == 'bootstrap4') {
          @include chip-color($chip-choice-active-bg-color, $chip-choice-active-border-color, $chip-choice-active-font-color, $chip-choice-active-font-color, $chip-avatar-choice-active-bg-color, $chip-avatar-choice-active-font-color, $chip-close-icon-font-color);
        }
        @else {
          @include chip-color($chip-choice-active-bg-color, $chip-choice-active-border-color, $chip-choice-active-font-color, $chip-choice-active-font-color, $chip-avatar-choice-active-bg-color, $chip-avatar-choice-active-font-color);
        }

        &.e-focused {
          @if ($skin-name == 'highcontrast') {
            @include chip-dlt-btn-color($chip-close-icon-font-color, $chip-close-icon-pressed-font-color);
          }
          @include chip-color($chip-choice-focus-active-bg-color, $chip-choice-focus-active-border-color, $chip-choice-focus-active-font-color, $chip-choice-icon-focus-active-font-color, $chip-avatar-choice-focus-active-bg-color, $chip-avatar-choice-focus-active-font-color);
        }

        &.e-disabled {
          @if ($skin-name == 'bootstrap4') {
            @include chip-disabled;
          }
          @else {
            @include chip-color($chip-disabled-bg-color, $chip-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-avatar-disabled-bg-color, $chip-avatar-disabled-font-color);
          }
        }

        &.e-clone-chip {
          @include chip-color($chip-choice-active-bg-color, $chip-choice-active-border-color, $chip-choice-active-font-color, $chip-choice-active-font-color, $chip-avatar-choice-active-bg-color, $chip-avatar-choice-active-font-color);
          .e-drag-and-drop,
          &.e-error-treeview {
            color: $chip-active-font-color;
          }
        }

        &.e-outline {
          @include chip-color($chip-outline-choice-active-bg-color, $chip-outline-choice-active-border-color, $chip-outline-choice-active-font-color, $chip-outline-choice-active-font-color, $chip-outline-avatar-choice-active-bg-color, $chip-outline-avatar-choice-active-font-color);
          @if ($skin-name =='fluent2') {
            border-width: 2px;
          }
          &.e-focused {
            @if ($skin-name == 'bootstrap4') {
              @include chip-color($chip-outline-choice-focus-active-bg-color, $chip-outline-choice-focus-active-border-color, $chip-outline-choice-focus-active-font-color, $chip-outline-choice-icon-focus-active-font-color, $chip-outline-avatar-choice-focus-active-bg-color, $chip-outline-avatar-choice-focus-active-font-color, $chip-primary-close-icon-font-color);
            }
            @else {
              @include chip-color($chip-outline-choice-focus-active-bg-color, $chip-outline-choice-focus-active-border-color, $chip-outline-choice-focus-active-font-color, $chip-outline-choice-icon-focus-active-font-color, $chip-outline-avatar-choice-focus-active-bg-color, $chip-outline-avatar-choice-focus-active-font-color);
            }
            @if ($skin-name == 'fluent2') {
              box-shadow: $keyboard-focus;
            }
          }

          &.e-disabled {
            @include chip-color($chip-outline-disabled-bg-color, $chip-outline-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-outline-avatar-disabled-bg-color, $chip-outline-avatar-disabled-font-color);
          }

          &.e-clone-chip {
            @include chip-color($chip-choice-active-bg-color, $chip-choice-active-border-color, $chip-choice-active-font-color, $chip-choice-active-font-color, $chip-avatar-choice-active-bg-color, $chip-avatar-choice-active-font-color);
            .e-drag-and-drop,
            &.e-error-treeview {
              color: $chip-active-font-color;
            }
          }
        }
      }

      &:active {
        @include chip-color($chip-pressed-active-bg-color, $chip-pressed-border-color, $chip-pressed-font-color, $chip-icon-pressed-font-color, $chip-avatar-pressed-active-bg-color, $chip-avatar-pressed-active-font-color);

        &.e-outline {
          @if ($skin-name == 'bootstrap4') {
            @include chip-color($chip-outline-pressed-active-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-pressed-font-color, $chip-outline-avatar-pressed-active-bg-color, $chip-outline-avatar-pressed-active-font-color, $chip-close-icon-pressed-font-color);
          }
          @else {
            @include chip-color($chip-outline-pressed-active-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-icon-pressed-font-color, $chip-outline-avatar-pressed-active-bg-color, $chip-outline-avatar-pressed-active-font-color);
          }
        }
      }
    }

    &.e-chip,
    & .e-chip {
      @if ($skin-name == 'fluent2') {
        @include chip-color($secondary-chip-bg-color, $secondary-chip-border-color, $secondary-chip-text-color, $chip-icon-font-color, $chip-avatar-bg-color, $chip-avatar-font-color, $chip-close-icon-font-color);
      }
      @else {
        @include chip-color($chip-bg-color, $chip-border-color, $chip-font-color, $chip-icon-font-color, $chip-avatar-bg-color, $chip-avatar-font-color, $chip-close-icon-font-color);
      }
      @include chip-dlt-btn-color($chip-close-icon-hover-font-color, $chip-close-icon-pressed-font-color);

      &:hover {
        @include chip-color($chip-hover-bg-color, $chip-hover-border-color, $chip-hover-font-color, $chip-icon-hover-font-color, $chip-avatar-hover-bg-color, $chip-avatar-hover-font-color);
      }

      &.e-focused {
        @if ($skin-name != 'bootstrap5.3') {
          box-shadow: $chip-focus-box-shadow;
        }
        @if ($skin-name == 'bootstrap4') {
          @include chip-color($chip-focus-bg-color, $chip-focus-border-color, $chip-focus-font-color, $chip-icon-focus-font-color, $chip-avatar-hover-bg-color, $chip-avatar-hover-font-color, $chip-close-icon-font-color);
        }
        @else {
          @include chip-color($chip-focus-bg-color, $chip-focus-border-color, $chip-focus-font-color, $chip-icon-focus-font-color, $chip-avatar-hover-bg-color, $chip-avatar-hover-font-color);
        }
        @if ($skin-name == 'highcontrast') {
          @include chip-dlt-btn-color($chip-close-icon-font-color, $chip-close-icon-pressed-font-color);
        }

        &.e-active {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
            @include chip-color($chip-focus-active-bg-color, $chip-focus-active-border-color, $chip-focus-active-font-color, $chip-icon-focus-active-font-color, $chip-avatar-focus-active-bg-color, $chip-avatar-focus-active-font-color, $chip-close-icon-font-color);
          }
          @else {
            @include chip-color($chip-focus-active-bg-color, $chip-focus-active-border-color, $chip-focus-active-font-color, $chip-icon-focus-active-font-color, $chip-avatar-focus-active-bg-color, $chip-avatar-focus-active-font-color);
          }

          @if ($skin-name == 'fluent2') {
            box-shadow: $keyboard-focus;
          }
          @else {
            box-shadow: $chip-focus-box-shadow;
          }
        }
      }

      &.e-active {
        @if ($skin-name == 'bootstrap4') {
          @include chip-color($chip-active-bg-color, $chip-active-border-color, $chip-active-font-color, $chip-icon-active-font-color, $chip-avatar-active-bg-color, $chip-avatar-active-font-color, $chip-close-icon-font-color);
        }
        @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
          @include chip-color($chip-active-bg-color, $chip-active-border-color, $chip-active-font-color, $chip-icon-active-font-color, $chip-avatar-active-bg-color, $chip-avatar-active-font-color, $chip-close-icon-pressed-font-color);
        }
        @else {
          @include chip-color($chip-active-bg-color, $chip-active-border-color, $chip-active-font-color, $chip-icon-active-font-color, $chip-avatar-active-bg-color, $chip-avatar-active-font-color);
        }
        box-shadow: none;
      }

      &:active {
        @include chip-color($chip-pressed-bg-color, $chip-pressed-border-color, $chip-pressed-font-color, $chip-icon-pressed-font-color, $chip-avatar-pressed-bg-color, $chip-avatar-pressed-font-color);
        box-shadow: $chip-pressed-box-shadow;
      }

      &.e-disabled {
        @if ($skin-name == 'bootstrap4') {
          @include chip-disabled;
        }
        @else {
          @include chip-color($chip-disabled-bg-color, $chip-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-avatar-disabled-bg-color, $chip-avatar-disabled-font-color);
          opacity: 1;
        }
        pointer-events: none;
      }

      &.e-clone-chip {
        @include chip-color($chip-active-bg-color, $chip-active-border-color, $chip-active-font-color, $chip-icon-active-font-color, $chip-avatar-active-bg-color, $chip-avatar-active-font-color, $chip-close-icon-font-color);
        .e-drag-and-drop,
        &.e-error-treeview {
          color: $chip-active-font-color;
        }
      }

      &.e-outline {
        @include chip-color(transparent, $chip-outline-border-color, $chip-outline-font-color, $chip-outline-icon-font-color, $chip-outline-avatar-bg-color, $chip-outline-avatar-font-color, $chip-outline-close-icon-font-color);
        @include chip-dlt-btn-color($chip-outline-close-icon-hover-font-color, $chip-outline-close-icon-pressed-font-color);
        border-width: $chip-outline-border-size;

        &:hover {
          @include chip-color($chip-outline-hover-bg-color, $chip-outline-hover-border-color, $chip-outline-hover-font-color, $chip-outline-icon-hover-font-color, $chip-outline-avatar-hover-bg-color, $chip-outline-avatar-hover-font-color);
        }

        &.e-focused {
          @include chip-color($chip-outline-focus-bg-color, $chip-outline-focus-border-color, $chip-outline-focus-font-color, $chip-outline-icon-focus-font-color, $chip-outline-avatar-focus-bg-color, $chip-outline-avatar-focus-font-color);

          &.e-active {
            @include chip-color($chip-outline-focus-active-bg-color, $chip-outline-focus-active-border-color, $chip-outline-focus-active-font-color, $chip-outline-icon-focus-active-font-color, $chip-outline-avatar-focus-active-bg-color, $chip-outline-avatar-focus-active-font-color);
            @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
              box-shadow: $chip-primary-box-shadow;
            }
            @if ($skin-name == 'fluent2') {
              box-shadow: $keyboard-focus;
            }
          }
        }

        &.e-active {
          @include chip-color($chip-outline-active-bg-color, $chip-outline-active-border-color, $chip-outline-active-font-color, $chip-outline-icon-active-font-color, $chip-outline-avatar-active-bg-color, $chip-outline-avatar-active-font-color);
        }

        &:active {
          @if ($skin-name == 'bootstrap4') {
            @include chip-color($chip-outline-pressed-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-icon-pressed-font-color, $chip-outline-avatar-pressed-bg-color, $chip-outline-avatar-pressed-font-color, $chip-outline-close-icon-pressed-font-color);
          }
          @else {
            @include chip-color($chip-outline-pressed-bg-color, $chip-outline-pressed-border-color, $chip-outline-pressed-font-color, $chip-outline-icon-pressed-font-color, $chip-outline-avatar-pressed-bg-color, $chip-outline-avatar-pressed-font-color);
          }
        }

        &.e-disabled {
          @if ($skin-name == 'bootstrap4') {
            @include chip-disabled;
          }
          @else if ($skin-name == 'bootstrap5') {
            @include chip-color($chip-outline-disabled-bg-color, $chip-outline-disabled-border-color, $chip-outline-disabled-font-color, $chip-outline-disabled-font-color, $chip-outline-avatar-disabled-bg-color, $chip-outline-avatar-disabled-font-color);
          }
          @else {
            @include chip-color($chip-outline-disabled-bg-color, $chip-outline-disabled-border-color, $chip-disabled-font-color, $chip-disabled-font-color, $chip-outline-avatar-disabled-bg-color, $chip-outline-avatar-disabled-font-color);
          }
        }

        &.e-clone-chip {
          @include chip-color($chip-active-bg-color, $chip-active-border-color, $chip-active-font-color, $chip-icon-active-font-color, $chip-avatar-active-bg-color, $chip-avatar-active-font-color, $chip-close-icon-font-color);
          .e-drag-and-drop,
          &.e-error-treeview {
            color: $chip-active-font-color;
          }
        }
      }

      &.e-primary {
        @include chip-color($chip-primary-bg-color, $chip-primary-border-color, $chip-primary-font-color, $chip-primary-font-color, $chip-primary-avatar-bg-color, $chip-primary-avatar-font-color, $chip-primary-close-icon-font-color);
        @include chip-dlt-btn-color($chip-primary-close-icon-hover-font-color, $chip-primary-close-icon-pressed-font-color);

        &:hover {
          @include chip-color($chip-primary-hover-bg-color, $chip-primary-hover-border-color, $chip-primary-hover-font-color, $chip-primary-hover-font-color, $chip-primary-avatar-hover-bg-color, $chip-primary-avatar-hover-font-color);
        }

        &.e-focused {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' ) {
            @include chip-color($chip-primary-focus-bg-color, $chip-primary-focus-border-color, $chip-primary-focus-font-color, $chip-primary-focus-font-color, $chip-primary-avatar-focus-bg-color, $chip-primary-avatar-focus-font-color, $chip-close-icon-font-color);
            box-shadow: $chip-primary-box-shadow;
          }
          @else {
            @include chip-color($chip-primary-focus-bg-color, $chip-primary-focus-border-color, $chip-primary-focus-font-color, $chip-primary-focus-font-color, $chip-primary-avatar-focus-bg-color, $chip-primary-avatar-focus-font-color);
            @if ($skin-name == 'FluentUI') {
              box-shadow: $chip-primary-box-shadow;
            }
          }

          &.e-active {
            @if ($skin-name == 'bootstrap4') {
              @include chip-color($chip-primary-focus-active-bg-color, $chip-primary-focus-active-border-color, $chip-primary-focus-active-font-color, $chip-primary-focus-active-font-color, $chip-primary-avatar-focus-active-bg-color, $chip-primary-avatar-focus-active-font-color, $chip-close-icon-font-color);
            }
            @else {
              @include chip-color($chip-primary-focus-active-bg-color, $chip-primary-focus-active-border-color, $chip-primary-focus-active-font-color, $chip-primary-focus-active-font-color, $chip-primary-avatar-focus-active-bg-color, $chip-primary-avatar-focus-active-font-color);
              @if ($skin-name == 'bootstrap5.3') {
                box-shadow: $chip-primary-box-shadow;
              }
              @if ($skin-name == 'fluent2') {
                box-shadow: $keyboard-focus;
              }
            }
          }
        }

        &.e-active {
          @if ($skin-name == 'bootstrap4') {
            @include chip-color($chip-primary-active-bg-color, $chip-primary-active-border-color, $chip-primary-active-font-color, $chip-primary-active-font-color, $chip-primary-avatar-active-bg-color, $chip-primary-avatar-active-font-color, $chip-close-icon-font-color);
          }
          @else {
            @include chip-color($chip-primary-active-bg-color, $chip-primary-active-border-color, $chip-primary-active-font-color, $chip-primary-active-font-color, $chip-primary-avatar-active-bg-color, $chip-primary-avatar-active-font-color);
          }
        }

        &:active {
          @include chip-color($chip-primary-pressed-bg-color, $chip-primary-pressed-border-color, $chip-primary-pressed-font-color, $chip-primary-pressed-font-color, $chip-primary-avatar-pressed-bg-color, $chip-primary-avatar-pressed-font-color);
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' ) {
            box-shadow: $chip-primary-box-shadow;
          }
        }

        &.e-disabled {
          @if ($skin-name == 'bootstrap4') {
            @include chip-disabled;
          }
          @else {
            @include chip-color($chip-primary-disabled-bg-color, $chip-primary-disabled-border-color, $chip-primary-disabled-font-color, $chip-primary-disabled-font-color, $chip-primary-avatar-disabled-bg-color, $chip-primary-avatar-disabled-font-color);
          }
        }

        &.e-clone-chip {
          @include chip-color($chip-primary-active-bg-color, $chip-primary-active-border-color, $chip-primary-active-font-color, $chip-primary-active-font-color, $chip-primary-avatar-active-bg-color, $chip-primary-avatar-active-font-color);
          .e-drag-and-drop,
          &.e-error-treeview {
            color: $chip-primary-active-font-color;
          }
        }

        &.e-outline {
          @include chip-color($chip-outline-primary-bg-color, $chip-outline-primary-border-color, $chip-outline-primary-font-color, $chip-outline-primary-font-color, $chip-outline-primary-avatar-bg-color, $chip-outline-primary-avatar-font-color, $chip-outline-primary-close-icon-font-color);
          @include chip-dlt-btn-color($chip-outline-primary-close-icon-hover-font-color, $chip-outline-primary-close-icon-pressed-font-color);

          &:hover {
            @include chip-color($chip-outline-primary-hover-bg-color, $chip-outline-primary-hover-border-color, $chip-outline-primary-hover-font-color, $chip-outline-primary-hover-font-color, $chip-outline-primary-avatar-hover-bg-color, $chip-outline-primary-avatar-hover-font-color);
          }

          &.e-focused {
            @include chip-color($chip-outline-primary-focus-bg-color, $chip-outline-primary-focus-border-color, $chip-outline-primary-focus-font-color, $chip-outline-primary-focus-font-color, $chip-outline-primary-avatar-focus-bg-color, $chip-outline-primary-avatar-focus-font-color);

            &.e-active {
              @if ($skin-name == 'bootstrap4') {
                @include chip-color($chip-outline-primary-focus-active-bg-color, $chip-outline-primary-focus-active-border-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-avatar-focus-active-bg-color, $chip-outline-primary-avatar-focus-active-font-color, $chip-outline-primary-close-icon-font-color);
              }
              @else {
                @include chip-color($chip-outline-primary-focus-active-bg-color, $chip-outline-primary-focus-active-border-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-focus-active-font-color, $chip-outline-primary-avatar-focus-active-bg-color, $chip-outline-primary-avatar-focus-active-font-color);
                @if ($skin-name == 'bootstrap5.3') {
                  box-shadow: $chip-primary-box-shadow;
                }
                @if ($skin-name == 'fluent2') {
                  box-shadow: $keyboard-focus;
                }
              }
            }
          }

          &.e-active {
            @include chip-color($chip-outline-primary-active-bg-color, $chip-outline-primary-active-border-color, $chip-outline-primary-active-font-color, $chip-outline-primary-active-font-color, $chip-outline-primary-avatar-active-bg-color, $chip-outline-primary-avatar-active-font-color);
          }

          &:active {
            @include chip-color($chip-outline-primary-pressed-bg-color, $chip-outline-primary-pressed-border-color, $chip-outline-primary-pressed-font-color, $chip-outline-primary-pressed-font-color, $chip-outline-primary-avatar-pressed-bg-color, $chip-outline-primary-avatar-pressed-font-color);
          }

          &.e-disabled {
            @if ($skin-name == 'bootstrap4') {
              @include chip-disabled;
            }
            @else {
              @include chip-color($chip-outline-primary-disabled-bg-color, $chip-outline-primary-disabled-border-color, $chip-outline-primary-disabled-font-color, $chip-outline-primary-disabled-font-color, $chip-outline-primary-avatar-disabled-bg-color, $chip-outline-primary-avatar-disabled-font-color);
            }
          }

          &.e-clone-chip {
            @include chip-color($chip-primary-active-bg-color, $chip-primary-active-border-color, $chip-primary-active-font-color, $chip-primary-active-font-color, $chip-primary-avatar-active-bg-color, $chip-primary-avatar-active-font-color);
            .e-drag-and-drop,
            &.e-error-treeview {
              color: $chip-primary-active-font-color;
            }
          }
        }
      }

      &.e-success {
        @include chip-color($chip-success-bg-color, $chip-success-border-color, $chip-success-font-color, $chip-success-font-color, $chip-success-avatar-bg-color, $chip-success-avatar-font-color, $chip-success-close-icon-font-color);
        @include chip-dlt-btn-color($chip-success-close-icon-hover-font-color, $chip-success-close-icon-pressed-font-color);

        &:hover {
          @include chip-color($chip-success-hover-bg-color, $chip-success-hover-border-color, $chip-success-hover-font-color, $chip-success-hover-font-color, $chip-success-avatar-hover-bg-color, $chip-success-avatar-hover-font-color);
        }

        &.e-focused {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
            @include chip-color($chip-success-focus-bg-color, $chip-success-focus-border-color, $chip-success-focus-font-color, $chip-success-focus-font-color, $chip-success-avatar-focus-bg-color, $chip-success-avatar-focus-font-color, $chip-close-icon-font-color);
            box-shadow: $chip-success-box-shadow;
          }
          @else {
            @include chip-color($chip-success-focus-bg-color, $chip-success-focus-border-color, $chip-success-focus-font-color, $chip-success-focus-font-color, $chip-success-avatar-focus-bg-color, $chip-success-avatar-focus-font-color);
            @if ($skin-name == 'FluentUI') {
              box-shadow: $chip-success-box-shadow;
            }
          }

          &.e-active {
            @if ($skin-name == 'bootstrap4') {
              @include chip-color($chip-success-focus-active-bg-color, $chip-success-focus-active-border-color, $chip-success-focus-active-font-color, $chip-success-focus-active-font-color, $chip-success-avatar-focus-active-bg-color, $chip-success-avatar-focus-active-font-color, $chip-close-icon-font-color);
            }
            @else {
              @include chip-color($chip-success-focus-active-bg-color, $chip-success-focus-active-border-color, $chip-success-focus-active-font-color, $chip-success-focus-active-font-color, $chip-success-avatar-focus-active-bg-color, $chip-success-avatar-focus-active-font-color);
              @if ($skin-name == 'bootstrap5.3') {
                box-shadow: $chip-success-box-shadow;
              }
              @if ($skin-name == 'fluent2') {
                box-shadow: $keyboard-focus;
              }
            }
          }
        }

        &.e-active {
          @if ($skin-name == 'bootstrap4') {
            @include chip-color($chip-success-active-bg-color, $chip-success-active-border-color, $chip-success-active-font-color, $chip-success-active-font-color, $chip-success-avatar-active-bg-color, $chip-success-avatar-active-font-color, $chip-close-icon-font-color);
          }
          @else {
            @include chip-color($chip-success-active-bg-color, $chip-success-active-border-color, $chip-success-active-font-color, $chip-success-active-font-color, $chip-success-avatar-active-bg-color, $chip-success-avatar-active-font-color);
          }
        }

        &:active {
          @include chip-color($chip-success-pressed-bg-color, $chip-success-pressed-border-color, $chip-success-pressed-font-color, $chip-success-pressed-font-color, $chip-success-avatar-pressed-bg-color, $chip-success-avatar-pressed-font-color);
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            box-shadow: $chip-success-box-shadow;
          }
        }

        &.e-disabled {
          @if ($skin-name == 'bootstrap4') {
            @include chip-disabled;
          }
          @else {
            @include chip-color($chip-success-disabled-bg-color, $chip-success-disabled-border-color, $chip-success-disabled-font-color, $chip-success-disabled-font-color, $chip-success-avatar-disabled-bg-color, $chip-success-avatar-disabled-font-color);
          }
        }

        &.e-clone-chip {
          @include chip-color($chip-success-active-bg-color, $chip-success-active-border-color, $chip-success-active-font-color, $chip-success-active-font-color, $chip-success-avatar-active-bg-color, $chip-success-avatar-active-font-color);
          .e-drag-and-drop,
          &.e-error-treeview {
            color: $chip-success-active-font-color;
          }
        }

        &.e-outline {
          @include chip-color($chip-outline-success-bg-color, $chip-outline-success-border-color, $chip-outline-success-font-color, $chip-outline-success-font-color, $chip-outline-success-avatar-bg-color, $chip-outline-success-avatar-font-color, $chip-outline-success-close-icon-font-color);
          @include chip-dlt-btn-color($chip-outline-success-close-icon-hover-font-color, $chip-outline-success-close-icon-pressed-font-color);

          &:hover {
            @include chip-color($chip-outline-success-hover-bg-color, $chip-outline-success-hover-border-color, $chip-outline-success-hover-font-color, $chip-outline-success-hover-font-color, $chip-outline-success-avatar-hover-bg-color, $chip-outline-success-avatar-hover-font-color);
          }

          &.e-focused {
            @include chip-color($chip-outline-success-focus-bg-color, $chip-outline-success-focus-border-color, $chip-outline-success-focus-font-color, $chip-outline-success-focus-font-color, $chip-outline-success-avatar-focus-bg-color, $chip-outline-success-avatar-focus-font-color);

            &.e-active {
              @if ($skin-name == 'bootstrap4') {
                @include chip-color($chip-outline-success-focus-active-bg-color, $chip-outline-success-focus-active-border-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-avatar-focus-active-bg-color, $chip-outline-success-avatar-focus-active-font-color, $chip-outline-success-close-icon-font-color);
              }
              @else {
                @include chip-color($chip-outline-success-focus-active-bg-color, $chip-outline-success-focus-active-border-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-focus-active-font-color, $chip-outline-success-avatar-focus-active-bg-color, $chip-outline-success-avatar-focus-active-font-color);
                @if ($skin-name == 'bootstrap5.3') {
                  box-shadow: $chip-success-box-shadow;
                }
                @if ($skin-name == 'fluent2') {
                  box-shadow: $keyboard-focus;
                }
              }
            }
          }

          &.e-active {
            @include chip-color($chip-outline-success-active-bg-color, $chip-outline-success-active-border-color, $chip-outline-success-active-font-color, $chip-outline-success-active-font-color, $chip-outline-success-avatar-active-bg-color, $chip-outline-success-avatar-active-font-color);
          }

          &:active {
            @include chip-color($chip-outline-success-pressed-bg-color, $chip-outline-success-pressed-border-color, $chip-outline-success-pressed-font-color, $chip-outline-success-pressed-font-color, $chip-outline-success-avatar-pressed-bg-color, $chip-outline-success-avatar-pressed-font-color);
          }

          &.e-disabled {
            @if ($skin-name == 'bootstrap4') {
              @include chip-disabled;
            }
            @else {
              @include chip-color($chip-outline-success-disabled-bg-color, $chip-outline-success-disabled-border-color, $chip-outline-success-disabled-font-color, $chip-outline-success-disabled-font-color, $chip-outline-success-avatar-disabled-bg-color, $chip-outline-success-avatar-disabled-font-color);
            }
          }

          &.e-clone-chip {
            @include chip-color($chip-success-active-bg-color, $chip-success-active-border-color, $chip-success-active-font-color, $chip-success-active-font-color, $chip-success-avatar-active-bg-color, $chip-success-avatar-active-font-color);
            .e-drag-and-drop,
            &.e-error-treeview {
              color: $chip-success-active-font-color;
            }
          }
        }
      }

      &.e-info {
        @include chip-color($chip-info-bg-color, $chip-info-border-color, $chip-info-font-color, $chip-info-font-color, $chip-info-avatar-bg-color, $chip-info-avatar-font-color, $chip-info-close-icon-font-color);
        @include chip-dlt-btn-color($chip-info-close-icon-hover-font-color, $chip-info-close-icon-pressed-font-color);

        &:hover {
          @include chip-color($chip-info-hover-bg-color, $chip-info-hover-border-color, $chip-info-hover-font-color, $chip-info-hover-font-color, $chip-info-avatar-hover-bg-color, $chip-info-avatar-hover-font-color);
        }

        &.e-focused {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
            @include chip-color($chip-info-focus-bg-color, $chip-info-focus-border-color, $chip-info-focus-font-color, $chip-info-focus-font-color, $chip-info-avatar-focus-bg-color, $chip-info-avatar-focus-font-color, $chip-close-icon-font-color);
            box-shadow: $chip-info-box-shadow;
          }
          @else {
            @include chip-color($chip-info-focus-bg-color, $chip-info-focus-border-color, $chip-info-focus-font-color, $chip-info-focus-font-color, $chip-info-avatar-focus-bg-color, $chip-info-avatar-focus-font-color);
            @if ($skin-name == 'FluentUI') {
              box-shadow: $chip-info-box-shadow;
            }
          }

          &.e-active {
            @if ($skin-name == 'bootstrap4') {
              @include chip-color($chip-info-focus-active-bg-color, $chip-info-focus-active-border-color, $chip-info-focus-active-font-color, $chip-info-focus-active-font-color, $chip-info-avatar-focus-active-bg-color, $chip-info-avatar-focus-active-font-color, $chip-close-icon-font-color);
            }
            @else {
              @include chip-color($chip-info-focus-active-bg-color, $chip-info-focus-active-border-color, $chip-info-focus-active-font-color, $chip-info-focus-active-font-color, $chip-info-avatar-focus-active-bg-color, $chip-info-avatar-focus-active-font-color);
              @if ($skin-name == 'bootstrap5.3') {
                box-shadow: $chip-info-box-shadow;
              }
              @if ($skin-name == 'fluent2') {
                box-shadow: $keyboard-focus;
              }
            }
          }
        }

        &.e-active {
          @if ($skin-name == 'bootstrap4') {
            @include chip-color($chip-info-active-bg-color, $chip-info-active-border-color, $chip-info-active-font-color, $chip-info-active-font-color, $chip-info-avatar-active-bg-color, $chip-info-avatar-active-font-color, $chip-close-icon-font-color);
          }
          @else {
            @include chip-color($chip-info-active-bg-color, $chip-info-active-border-color, $chip-info-active-font-color, $chip-info-active-font-color, $chip-info-avatar-active-bg-color, $chip-info-avatar-active-font-color);
          }
        }

        &:active {
          @include chip-color($chip-info-pressed-bg-color, $chip-info-pressed-border-color, $chip-info-pressed-font-color, $chip-info-pressed-font-color, $chip-info-avatar-pressed-bg-color, $chip-info-avatar-pressed-font-color);
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            box-shadow: $chip-info-box-shadow;
          }
        }

        &.e-disabled {
          @if ($skin-name == 'bootstrap4') {
            @include chip-disabled;
          }
          @else {
            @include chip-color($chip-info-disabled-bg-color, $chip-info-disabled-border-color, $chip-info-disabled-font-color, $chip-info-disabled-font-color, $chip-info-avatar-disabled-bg-color, $chip-info-avatar-disabled-font-color);
          }
        }

        &.e-clone-chip {
          @include chip-color($chip-info-active-bg-color, $chip-info-active-border-color, $chip-info-active-font-color, $chip-info-active-font-color, $chip-info-avatar-active-bg-color, $chip-info-avatar-active-font-color);
          .e-drag-and-drop,
          &.e-error-treeview {
            color: $chip-info-active-font-color;
          }
        }

        &.e-outline {
          @include chip-color($chip-outline-info-bg-color, $chip-outline-info-border-color, $chip-outline-info-font-color, $chip-outline-info-font-color, $chip-outline-info-avatar-bg-color, $chip-outline-info-avatar-font-color, $chip-outline-info-close-icon-font-color);
          @include chip-dlt-btn-color($chip-outline-info-close-icon-hover-font-color, $chip-outline-info-close-icon-pressed-font-color);

          &:hover {
            @include chip-color($chip-outline-info-hover-bg-color, $chip-outline-info-hover-border-color, $chip-outline-info-hover-font-color, $chip-outline-info-hover-font-color, $chip-outline-info-avatar-hover-bg-color, $chip-outline-info-avatar-hover-font-color);
          }

          &.e-focused {
            @include chip-color($chip-outline-info-focus-bg-color, $chip-outline-info-focus-border-color, $chip-outline-info-focus-font-color, $chip-outline-info-focus-font-color, $chip-outline-info-avatar-focus-bg-color, $chip-outline-info-avatar-focus-font-color);

            &.e-active {
              @if ($skin-name == 'bootstrap4') {
                @include chip-color($chip-outline-info-focus-active-bg-color, $chip-outline-info-focus-active-border-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-avatar-focus-active-bg-color, $chip-outline-info-avatar-focus-active-font-color, $chip-outline-info-close-icon-font-color);
              }
              @else {
                @include chip-color($chip-outline-info-focus-active-bg-color, $chip-outline-info-focus-active-border-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-focus-active-font-color, $chip-outline-info-avatar-focus-active-bg-color, $chip-outline-info-avatar-focus-active-font-color);
                @if ($skin-name == 'bootstrap5.3') {
                  box-shadow: $chip-info-box-shadow;
                }
                @if ($skin-name == 'fluent2') {
                  box-shadow: $keyboard-focus;
                }
              }
            }
          }

          &.e-active {
            @include chip-color($chip-outline-info-active-bg-color, $chip-outline-info-active-border-color, $chip-outline-info-active-font-color, $chip-outline-info-active-font-color, $chip-outline-info-avatar-active-bg-color, $chip-outline-info-avatar-active-font-color);
          }

          &:active {
            @include chip-color($chip-outline-info-pressed-bg-color, $chip-outline-info-pressed-border-color, $chip-outline-info-pressed-font-color, $chip-outline-info-pressed-font-color, $chip-outline-info-avatar-pressed-bg-color, $chip-outline-info-avatar-pressed-font-color);
          }

          &.e-disabled {
            @if ($skin-name == 'bootstrap4') {
              @include chip-disabled;
            }
            @else {
              @include chip-color($chip-outline-info-disabled-bg-color, $chip-outline-info-disabled-border-color, $chip-outline-info-disabled-font-color, $chip-outline-info-disabled-font-color, $chip-outline-info-avatar-disabled-bg-color, $chip-outline-info-avatar-disabled-font-color);
            }
          }

          &.e-clone-chip {
            @include chip-color($chip-info-active-bg-color, $chip-info-active-border-color, $chip-info-active-font-color, $chip-info-active-font-color, $chip-info-avatar-active-bg-color, $chip-info-avatar-active-font-color);
            .e-drag-and-drop,
            &.e-error-treeview {
              color: $chip-info-active-font-color;
            }
          }
        }
      }

      &.e-warning {
        @include chip-color($chip-warning-bg-color, $chip-warning-border-color, $chip-warning-font-color, $chip-warning-font-color, $chip-warning-avatar-bg-color, $chip-warning-avatar-font-color, $chip-warning-close-icon-font-color);
        @include chip-dlt-btn-color($chip-warning-close-icon-hover-font-color, $chip-warning-close-icon-pressed-font-color);

        &:hover {
          @include chip-color($chip-warning-hover-bg-color, $chip-warning-hover-border-color, $chip-warning-hover-font-color, $chip-warning-hover-font-color, $chip-warning-avatar-hover-bg-color, $chip-warning-avatar-hover-font-color);
        }

        &.e-focused {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
            @include chip-color($chip-warning-focus-bg-color, $chip-warning-focus-border-color, $chip-warning-focus-font-color, $chip-warning-focus-font-color, $chip-warning-avatar-focus-bg-color, $chip-warning-avatar-focus-font-color, $chip-warning-close-icon-font-color);
            box-shadow: $chip-warning-box-shadow;
          }
          @else {
            @include chip-color($chip-warning-focus-bg-color, $chip-warning-focus-border-color, $chip-warning-focus-font-color, $chip-warning-focus-font-color, $chip-warning-avatar-focus-bg-color, $chip-warning-avatar-focus-font-color);
            @if ($skin-name == 'FluentUI') {
              box-shadow: $chip-warning-box-shadow;
            }
          }

          &.e-active {
            @if ($skin-name == 'bootstrap4') {
              @include chip-color($chip-warning-focus-active-bg-color, $chip-warning-focus-active-border-color, $chip-warning-focus-active-font-color, $chip-warning-focus-active-font-color, $chip-warning-avatar-focus-active-bg-color, $chip-warning-avatar-focus-active-font-color, $chip-warning-close-icon-font-color);
            }
            @else {
              @include chip-color($chip-warning-focus-active-bg-color, $chip-warning-focus-active-border-color, $chip-warning-focus-active-font-color, $chip-warning-focus-active-font-color, $chip-warning-avatar-focus-active-bg-color, $chip-warning-avatar-focus-active-font-color);
              @if ($skin-name == 'bootstrap5.3') {
                box-shadow: $chip-warning-box-shadow;
              }
              @if ($skin-name == 'fluent2') {
                box-shadow: $keyboard-focus;
              }
            }
          }
        }

        &.e-active {
          @if ($skin-name == 'bootstrap4') {
            @include chip-color($chip-warning-active-bg-color, $chip-warning-active-border-color, $chip-warning-active-font-color, $chip-warning-active-font-color, $chip-warning-avatar-active-bg-color, $chip-warning-avatar-active-font-color, $chip-warning-close-icon-font-color);
          }
          @else {
            @include chip-color($chip-warning-active-bg-color, $chip-warning-active-border-color, $chip-warning-active-font-color, $chip-warning-active-font-color, $chip-warning-avatar-active-bg-color, $chip-warning-avatar-active-font-color);
          }
        }

        &:active {
          @include chip-color($chip-warning-pressed-bg-color, $chip-warning-pressed-border-color, $chip-warning-pressed-font-color, $chip-warning-pressed-font-color, $chip-warning-avatar-pressed-bg-color, $chip-warning-avatar-pressed-font-color);
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            box-shadow: $chip-warning-box-shadow;
          }
        }

        &.e-disabled {
          @if ($skin-name == 'bootstrap4') {
            @include chip-disabled;
          }
          @else {
            @include chip-color($chip-warning-disabled-bg-color, $chip-warning-disabled-border-color, $chip-warning-disabled-font-color, $chip-warning-disabled-font-color, $chip-warning-avatar-disabled-bg-color, $chip-warning-avatar-disabled-font-color);
          }
        }

        &.e-clone-chip {
          @include chip-color($chip-warning-active-bg-color, $chip-warning-active-border-color, $chip-warning-active-font-color, $chip-warning-active-font-color, $chip-warning-avatar-active-bg-color, $chip-warning-avatar-active-font-color);
          .e-drag-and-drop,
          &.e-error-treeview {
            color: $chip-warning-active-font-color;
          }
        }

        &.e-outline {
          @include chip-color($chip-outline-warning-bg-color, $chip-outline-warning-border-color, $chip-outline-warning-font-color, $chip-outline-warning-font-color, $chip-outline-warning-avatar-bg-color, $chip-outline-warning-avatar-font-color, $chip-outline-warning-close-icon-font-color);
          @include chip-dlt-btn-color($chip-outline-warning-close-icon-hover-font-color, $chip-outline-warning-close-icon-pressed-font-color);

          &:hover {
            @include chip-color($chip-outline-warning-hover-bg-color, $chip-outline-warning-hover-border-color, $chip-outline-warning-hover-font-color, $chip-outline-warning-hover-font-color, $chip-outline-warning-avatar-hover-bg-color, $chip-outline-warning-avatar-hover-font-color);
          }

          &.e-focused {
            @include chip-color($chip-outline-warning-focus-bg-color, $chip-outline-warning-focus-border-color, $chip-outline-warning-focus-font-color, $chip-outline-warning-focus-font-color, $chip-outline-warning-avatar-focus-bg-color, $chip-outline-warning-avatar-focus-font-color);

            &.e-active {
              @if ($skin-name == 'bootstrap4') {
                @include chip-color($chip-outline-warning-focus-active-bg-color, $chip-outline-warning-focus-active-border-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-avatar-focus-active-bg-color, $chip-outline-warning-avatar-focus-active-font-color, $chip-outline-warning-close-icon-font-color);
              }
              @else {
                @include chip-color($chip-outline-warning-focus-active-bg-color, $chip-outline-warning-focus-active-border-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-focus-active-font-color, $chip-outline-warning-avatar-focus-active-bg-color, $chip-outline-warning-avatar-focus-active-font-color);
                @if ($skin-name == 'bootstrap5.3') {
                  box-shadow: $chip-warning-box-shadow;
                }
                @if ($skin-name == 'fluent2') {
                  box-shadow: $keyboard-focus;
                }
              }
            }
          }

          &.e-active {
            @include chip-color($chip-outline-warning-active-bg-color, $chip-outline-warning-active-border-color, $chip-outline-warning-active-font-color, $chip-outline-warning-active-font-color, $chip-outline-warning-avatar-active-bg-color, $chip-outline-warning-avatar-active-font-color);
          }

          &:active {
            @if ($skin-name == 'bootstrap4') {
              @include chip-color($chip-outline-warning-pressed-bg-color, $chip-outline-warning-pressed-border-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-avatar-pressed-bg-color, $chip-outline-warning-avatar-pressed-font-color, $chip-outline-warning-pressed-font-color);
            }
            @else {
              @include chip-color($chip-outline-warning-pressed-bg-color, $chip-outline-warning-pressed-border-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-pressed-font-color, $chip-outline-warning-avatar-pressed-bg-color, $chip-outline-warning-avatar-pressed-font-color);
            }
          }

          &.e-disabled {
            @if ($skin-name == 'bootstrap4') {
              @include chip-disabled;
            }
            @else {
              @include chip-color($chip-outline-warning-disabled-bg-color, $chip-outline-warning-disabled-border-color, $chip-outline-warning-disabled-font-color, $chip-outline-warning-disabled-font-color, $chip-outline-warning-avatar-disabled-bg-color, $chip-outline-warning-avatar-disabled-font-color);
            }
          }

          &.e-clone-chip {
            @include chip-color($chip-warning-active-bg-color, $chip-warning-active-border-color, $chip-warning-active-font-color, $chip-warning-active-font-color, $chip-warning-avatar-active-bg-color, $chip-warning-avatar-active-font-color);
            .e-drag-and-drop,
            &.e-error-treeview {
              color: $chip-warning-active-font-color;
            }
          }
        }
      }

      &.e-danger {
        @include chip-color($chip-danger-bg-color, $chip-danger-border-color, $chip-danger-font-color, $chip-danger-font-color, $chip-danger-avatar-bg-color, $chip-danger-avatar-font-color, $chip-danger-close-icon-font-color);
        @include chip-dlt-btn-color($chip-danger-close-icon-hover-font-color, $chip-danger-close-icon-pressed-font-color);

        &:hover {
          @include chip-color($chip-danger-hover-bg-color, $chip-danger-hover-border-color, $chip-danger-hover-font-color, $chip-danger-hover-font-color, $chip-danger-avatar-hover-bg-color, $chip-danger-avatar-hover-font-color);
        }

        &.e-focused {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
            @include chip-color($chip-danger-focus-bg-color, $chip-danger-focus-border-color, $chip-danger-focus-font-color, $chip-danger-focus-font-color, $chip-danger-avatar-focus-bg-color, $chip-danger-avatar-focus-font-color, $chip-close-icon-font-color);
            box-shadow: $chip-danger-box-shadow;
          }
          @else {
            @include chip-color($chip-danger-focus-bg-color, $chip-danger-focus-border-color, $chip-danger-focus-font-color, $chip-danger-focus-font-color, $chip-danger-avatar-focus-bg-color, $chip-danger-avatar-focus-font-color);
            @if ($skin-name == 'FluentUI') {
              box-shadow: $chip-danger-box-shadow;
            }
          }

          &.e-active {
            @if ($skin-name == 'bootstrap4') {
              @include chip-color($chip-danger-focus-active-bg-color, $chip-danger-focus-active-border-color, $chip-danger-focus-active-font-color, $chip-danger-focus-active-font-color, $chip-danger-avatar-focus-active-bg-color, $chip-danger-avatar-focus-active-font-color, $chip-close-icon-font-color);
            }
            @else {
              @include chip-color($chip-danger-focus-active-bg-color, $chip-danger-focus-active-border-color, $chip-danger-focus-active-font-color, $chip-danger-focus-active-font-color, $chip-danger-avatar-focus-active-bg-color, $chip-danger-avatar-focus-active-font-color);
              @if ($skin-name == 'bootstrap5.3') {
                box-shadow: $chip-danger-box-shadow;
              }
              @if ($skin-name == 'fluent2') {
                box-shadow: $keyboard-focus;
              }
            }
          }
        }

        &.e-active {
          @if ($skin-name == 'bootstrap4') {
            @include chip-color($chip-danger-active-bg-color, $chip-danger-active-border-color, $chip-danger-active-font-color, $chip-danger-active-font-color, $chip-danger-avatar-active-bg-color, $chip-danger-avatar-active-font-color, $chip-close-icon-font-color);
          }
          @else {
            @include chip-color($chip-danger-active-bg-color, $chip-danger-active-border-color, $chip-danger-active-font-color, $chip-danger-active-font-color, $chip-danger-avatar-active-bg-color, $chip-danger-avatar-active-font-color);
          }
        }

        &:active {
          @include chip-color($chip-danger-pressed-bg-color, $chip-danger-pressed-border-color, $chip-danger-pressed-font-color, $chip-danger-pressed-font-color, $chip-danger-avatar-pressed-bg-color, $chip-danger-avatar-pressed-font-color);
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            box-shadow: $chip-danger-box-shadow;
          }
        }

        &.e-disabled {
          @if ($skin-name == 'bootstrap4') {
            @include chip-disabled;
          }
          @else {
            @include chip-color($chip-danger-disabled-bg-color, $chip-danger-disabled-border-color, $chip-danger-disabled-font-color, $chip-danger-disabled-font-color, $chip-danger-avatar-disabled-bg-color, $chip-danger-avatar-disabled-font-color);
          }
        }

        &.e-clone-chip {
          @include chip-color($chip-danger-active-bg-color, $chip-danger-active-border-color, $chip-danger-active-font-color, $chip-danger-active-font-color, $chip-danger-avatar-active-bg-color, $chip-danger-avatar-active-font-color);
          .e-drag-and-drop,
          &.e-error-treeview {
            color: $chip-danger-active-font-color;
          }
        }

        &.e-outline {
          @include chip-color($chip-outline-danger-bg-color, $chip-outline-danger-border-color, $chip-outline-danger-font-color, $chip-outline-danger-font-color, $chip-outline-danger-avatar-bg-color, $chip-outline-danger-avatar-font-color, $chip-outline-danger-close-icon-font-color);
          @include chip-dlt-btn-color($chip-outline-danger-close-icon-hover-font-color, $chip-outline-danger-close-icon-pressed-font-color);

          &:hover {
            @include chip-color($chip-outline-danger-hover-bg-color, $chip-outline-danger-hover-border-color, $chip-outline-danger-hover-font-color, $chip-outline-danger-hover-font-color, $chip-outline-danger-avatar-hover-bg-color, $chip-outline-danger-avatar-hover-font-color);
          }

          &.e-focused {
            @include chip-color($chip-outline-danger-focus-bg-color, $chip-outline-danger-focus-border-color, $chip-outline-danger-focus-font-color, $chip-outline-danger-focus-font-color, $chip-outline-danger-avatar-focus-bg-color, $chip-outline-danger-avatar-focus-font-color);

            &.e-focused.e-active {
              @if ($skin-name == 'bootstrap4') {
                @include chip-color($chip-outline-danger-focus-active-bg-color, $chip-outline-danger-focus-active-border-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-avatar-focus-active-bg-color, $chip-outline-danger-avatar-focus-active-font-color, $chip-outline-danger-close-icon-font-color);
              }
              @else {
                @include chip-color($chip-outline-danger-focus-active-bg-color, $chip-outline-danger-focus-active-border-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-focus-active-font-color, $chip-outline-danger-avatar-focus-active-bg-color, $chip-outline-danger-avatar-focus-active-font-color);
                @if ($skin-name == 'bootstrap5.3') {
                  box-shadow: $chip-danger-box-shadow;
                }
                @if ($skin-name == 'fluent2') {
                  box-shadow: $keyboard-focus;
                }
              }
            }
          }

          &.e-active {
            @include chip-color($chip-outline-danger-active-bg-color, $chip-outline-danger-active-border-color, $chip-outline-danger-active-font-color, $chip-outline-danger-active-font-color, $chip-outline-danger-avatar-active-bg-color, $chip-outline-danger-avatar-active-font-color);
          }

          &:active {
            @include chip-color($chip-outline-danger-pressed-bg-color, $chip-outline-danger-pressed-border-color, $chip-outline-danger-pressed-font-color, $chip-outline-danger-pressed-font-color, $chip-outline-danger-avatar-pressed-bg-color, $chip-outline-danger-avatar-pressed-font-color);
          }

          &.e-disabled {
            @if ($skin-name == 'bootstrap4') {
              @include chip-disabled;
            }
            @else {
              @include chip-color($chip-outline-danger-disabled-bg-color, $chip-outline-danger-disabled-border-color, $chip-outline-danger-disabled-font-color, $chip-outline-danger-disabled-font-color, $chip-outline-danger-avatar-disabled-bg-color, $chip-outline-danger-avatar-disabled-font-color);
            }
          }

          &.e-clone-chip {
            @include chip-color($chip-danger-active-bg-color, $chip-danger-active-border-color, $chip-danger-active-font-color, $chip-danger-active-font-color, $chip-danger-avatar-active-bg-color, $chip-danger-avatar-active-font-color);
            .e-drag-and-drop,
            &.e-error-treeview {
              color: $chip-danger-active-font-color;
            }
          }
        }
      }
    }
  }
}

#{&}.e-chip-list {
  .e-chip-delete {
    &.e-dlt-btn::before {
      content: '\e842';
    }
  }

  &.e-multi-selection .e-chip {
    &::before {
      content: '\e7ff';
    }
  }
}

@mixin bigger-style($height, $width, $margin) {
  height: $height;
  width: $width;
  margin: $margin;
}

.e-bigger {
  .e-drag-indicator {
    height: $chip-touch-height;
  }
}

@include export-module('chip-bigger') {
  .e-bigger .e-chip-list,
  .e-bigger.e-chip-list {
    &.e-chip,
    & .e-chip {
      border-radius: $chip-touch-border-radius;
      font-size: $chip-touch-font-size;
      height: $chip-touch-height;
      padding: $chip-touch-padding;
    }

    .e-chip-text {
      @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5dark' ) {
        height: $chip-touch-text-height;
      }
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        line-height: $chip-touch-text-line-height;
      }
      @if $skin-name == 'tailwind3' {
        line-height: $chip-touch-text-line-height;
        margin-top: $chip-touch-text-margin-top;
      }
    }

    .e-chip-avatar {
      @include bigger-style($chip-touch-avatar-size, $chip-touch-avatar-size, $chip-touch-avatar-margin);
      font-size: $chip-touch-avatar-content-font-size;
      @if $skin-name == 'Material3' {
        border-radius: $chip-touch-avatar-wrapper-border-radius;
      }
    }

    .e-chip-avatar-wrap,
    &.e-chip-avatar-wrap {
      border-radius: $chip-touch-avatar-wrapper-border-radius;
    }

    .e-chip-icon {
      font-size: $chip-touch-leading-icon-font-size;
      @include bigger-style($chip-touch-leading-icon-size, $chip-touch-leading-icon-size, $chip-touch-leading-icon-margin);
    }

    .e-chip-delete {
      @include bigger-style($chip-touch-delete-icon-size, $chip-touch-delete-icon-size, $chip-touch-delete-icon-margin);
      font-size: $chip-touch-delete-icon-font-size;
      @if $skin-name == 'Material3' {
        line-height: $chip-touch-delete-icon-height;
        height: $chip-touch-delete-icon-height;
      }

      @if $skin-name == 'bootstrap4' {
        &.e-dlt-btn::before {
          font-size: small;
        }
      }

      @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5dark') {
        &.e-dlt-btn::before {
          font-size: 13px;
        }
      }
      @else if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
        &.e-dlt-btn::before {
          font-size: $text-base;
        }
      }
    }

    .trailing-icon-url {
      @include bigger-style($chip-touch-delete-icon-size, $chip-touch-delete-icon-size, $chip-touch-delete-icon-margin);
      font-size: $chip-touch-delete-icon-font-size;
    }

    &.e-multi-selection .e-chip {
      &::before {
        @include bigger-style($chip-touch-leading-icon-size, $chip-touch-leading-icon-size, $chip-touch-multi-selection-icon-margin);
        margin-top: $chip-multi-selection-icon-margin-top;
      }

      &.e-chip-avatar-wrap {
        &::before {
          @include bigger-style($chip-touch-avatar-size, $chip-touch-avatar-size, $chip-touch-avatar-margin);
          margin-top: $chip-multi-selection-icon-margin-top;
        }
      }

      &.e-active {
        &:not(.e-chip-icon-wrap):not(.e-chip-avatar-wrap) {
          &::before {
            width: $chip-touch-leading-icon-size;
          }
        }
      }
    }

    &.e-rtl {
      &.e-chip,
      & .e-chip {
        .e-chip-avatar {
          margin: $chip-touch-rtl-avatar-margin;
        }

        .e-chip-icon {
          margin: $chip-touch-rtl-leading-icon-margin;
        }

        .e-chip-delete {
          margin: $chip-touch-rtl-delete-icon-margin;
        }

        .e-chip-avatar-wrap,
        &.e-chip-avatar-wrap {
          border-radius: $chip-touch-rtl-avatar-wrapper-border-radius;
        }
      }

      &.e-multi-selection .e-chip {
        &::before {
          margin: $chip-touch-rtl-leading-icon-margin;
          margin-top: $chip-multi-selection-icon-margin-top;
        }

        &.e-chip-avatar-wrap {
          &::before {
            margin: $chip-touch-rtl-avatar-margin;
            margin-top: $chip-multi-selection-icon-margin-top;
          }
        }
      }

      .trailing-icon-url {
        margin: $chip-touch-rtl-delete-icon-margin;
      }
    }
  }
}

$drop-down-btn-arrow-content: '\e969' !default;
$drop-down-btn-vertical-btn-padding: 6px 12px !default;
$drop-down-btn-vertical-bigger-padding: 8px 16px !default;
$drop-down-btn-bigger-font-size: 15px !default;
$drop-down-btn-bigger-li-height: 40px !default;
$drop-down-btn-bigger-max-width: 280px !default;
$drop-down-btn-bigger-min-width: 112px !default;
$drop-down-btn-color: $grey-dark-font !default;
$drop-down-btn-disable-text: rgba($grey-dark-font, .65) !default;
$drop-down-btn-font-size: 14px !default;
$drop-down-btn-font-weight: normal !default;
$drop-down-btn-icon-margin-right: 12px !default;
$drop-down-btn-bigger-icon-margin-right: 12px !default;
$drop-down-btn-li-bgcolor: $grey-44 !default;
$drop-down-btn-li-box-shadow: inset 0 0 0 1px $grey-8c !default;
$drop-down-btn-li-border-color: $grey-44 !default;
$drop-down-btn-li-border-style: solid !default;
$drop-down-btn-li-border-width: 1px !default;
$drop-down-btn-li-focus-bgcolor: transparent !default;
$drop-down-btn-li-height: 26px !default;
$drop-down-btn-li-padding: 0 14px !default;
$drop-down-btn-bigger-li-padding: 0 14px !default;
$drop-down-btn-small-li-padding: 0 14px !default;
$drop-down-btn-li-selection-bgcolor: $brand-primary !default;
$drop-down-btn-li-selection-font-color: $brand-primary-font !default;
$drop-down-btn-max-width: 240px !default;
$drop-down-btn-icon-font-size: 16px !default;
$drop-down-btn-small-icon-font-size: 14px !default;
$drop-down-btn-menu-icon-bigger-font-size: 16px !default;
$drop-down-btn-menu-icon-color: $grey-dark-font !default;
$drop-down-btn-menu-icon-disabled-color: rgba($grey-dark-font, .65) !default;
$drop-down-btn-menu-icon-font-size: 16px !default;
$drop-down-btn-min-width: 120px !default;
$drop-down-btn-parent-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
$drop-down-btn-seperator-padding: 3px 0 !default;
$drop-down-btn-selected-color: $brand-primary-font !default;
$drop-down-btn-sub-ul-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
$drop-down-btn-ul-bgcolor: $grey-dark !default;
$drop-down-btn-ul-border: 1px solid $grey-44 !default;
$drop-down-btn-ul-border-radius: 4px !default;
$drop-down-btn-ul-padding: 3px 0 !default;
$drop-down-btn-ul-bigger-padding: 5px 0 !default;
$drop-down-btn-ul-small-padding: 5px 0 !default;
$drop-down-btn-caret-icon-font-size: 8px !default;
$drop-down-btn-small-caret-icon-font-size: 8px !default;
$drop-down-btn-icon-font-size-bigger: 20px !default;
$drop-down-btn-small-icon-font-size-bigger: 18px !default;
$drop-down-btn-caret-icon-font-size-bigger: 10px !default;
$drop-down-btn-small-caret-icon-font-size-bigger: 10px !default;
$drop-down-btn-box-shadow: none !default;
$drop-down-btn-popup-margin-top: 0 !default;
$drop-down-btn-bigger-popup-margin-top: 0 !default;

$drop-down-btn-line-height: 1 !default;
$dd-btn-zero-margin-padding: 0 !default;
$dd-menu-height: 1px !default;
$dd-menu-icon-width: 1em !default;
$dd-menu-width: 1px !default;
$dd-auto-height: auto !default;
$dd-bgr-seperator-line-height: normal !default;
$dd-full-width: 100% !default;

@include export-module('drop-down-button-layout') {
  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3' {
      box-shadow: none;
    }
    text-transform: none;
    white-space: normal;
    @if $skin-name == 'Material3' {
      border-radius: $btn-border-radius;
      box-shadow: $drop-down-btn-box-shadow;
      line-height: $drop-down-btn-line-height;
    }

    &:hover {
      @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'Material3' {
        box-shadow: none;
      }
    }

    &:focus {
      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
        box-shadow: $drop-down-btn-box-shadow;
      }
      @else {
        @if $skin-name != 'tailwind3' {
          box-shadow: none;
        }
      }
    }

    &:focus-visible { // only for keybord
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        box-shadow: $btn-keyboard-focus-box-shadow;
      }
    }

    &:active {
      box-shadow: $btn-active-box-shadow;
    }

    .e-btn-icon {
      font-size: $drop-down-btn-icon-font-size;
    }

    .e-caret {
      font-size: $drop-down-btn-caret-icon-font-size;
      @if $skin-name == 'FluentUI' or $skin-name == 'highcontrast' {
        margin-top: 0;
      }
    }

    &.e-vertical {
      line-height: $drop-down-btn-line-height;
      padding: $drop-down-btn-vertical-btn-padding;
    }

    &.e-caret-hide {
      & .e-caret {
        display: none;
      }
    }

    &.e-small {
      .e-dropdown-popup ul {
        padding: $drop-down-btn-ul-small-padding;

        & .e-item  {
          padding: $drop-down-btn-small-li-padding;
          @if $skin-name == 'Material3' {
            height: $drop-down-btn-small-li-height;
          }
        }
      }

      &.e-vertical {
        line-height: $drop-down-btn-line-height;
        padding: $drop-down-btn-vertical-btn-padding;
      }

      & .e-btn-icon {
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
          font-size: $drop-down-btn-small-icon-font-size;
        }
      }

      & .e-btn-icon.e-caret {
        @if $skin-name == 'fluent2' {
          font-size: $drop-down-btn-icon-caret-font-size;
        }
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
          font-size: $drop-down-btn-small-caret-icon-font-size;
        }
      }
    }
  }

  .e-small.e-dropdown-popup ul {
    & .e-item {
      @if $skin-name == 'tailwind3' {
        height: $drop-down-btn-small-li-height;
        font-size: $drop-down-btn-small-font-size;
        line-height: $drop-down-btn-small-li-height;
        .e-menu-icon {
          font-size: $drop-down-btn-small-icon-font-size;
          line-height: $drop-down-btn-small-li-height;
        }
      }
    }
  }

  .e-dropdown-popup {
    position: absolute;
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
      border-radius: $drop-down-btn-ul-border-radius;
      margin-top: $drop-down-btn-popup-margin-top;
    }
    @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      border-radius: $drop-down-btn-ul-border-radius;
    }

    & ul {
      border: $drop-down-btn-ul-border;
      border-radius: $drop-down-btn-ul-border-radius;
      box-shadow: $drop-down-btn-parent-ul-box-shadow;
      box-sizing: border-box;
      font-size: $drop-down-btn-font-size;
      font-weight: $drop-down-btn-font-weight;
      list-style-image: none;
      list-style-position: outside;
      list-style-type: none;
      margin: $dd-btn-zero-margin-padding;
      min-width: $drop-down-btn-min-width;
      overflow: hidden;
      padding: $drop-down-btn-ul-padding;
      user-select: none;
      white-space: nowrap;

      & .e-item  {
        cursor: pointer;
        display: flex;
        height: $drop-down-btn-li-height;
        line-height: $drop-down-btn-li-height;
        padding: $drop-down-btn-li-padding;
        @if $skin-name == 'fluent2' {
          line-height: $dropdown-btn-item-flu-line-height;
          margin: $dropdown-btn-item-flu-margin;
          border-radius: $dropdown-btn-item-flu-border-radius;
        }

        &.e-separator {
          padding: $dd-btn-zero-margin-padding !important; /* stylelint-disable-line declaration-no-important */
        }

        &.e-url {
          padding: $dd-btn-zero-margin-padding;
        }

        & .e-menu-url {
          display: block;
          padding: $drop-down-btn-li-padding;
          text-decoration: none;
          width: $dd-full-width;
        }

        & .e-menu-icon {
          float: left;
          font-size: $drop-down-btn-menu-icon-font-size;
          @if $skin-name == 'fluent2' {
            line-height: $dd-btn-menu-icon-line-height;
            padding: $dd-btn-menu-icon-padding;
          }
          @else {
            line-height: $drop-down-btn-li-height;
          }
          margin-right: $drop-down-btn-icon-margin-right;
          vertical-align: middle;
          width: $dd-menu-icon-width;
        }

        &.e-disabled {
          cursor: auto;
          pointer-events: none;
          @if $skin-name == 'Material3' {
            box-shadow: $drop-down-btn-sub-ul-box-shadow;
          }
          @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
            color: $flyout-text-color-disabled;
            opacity: 1;

            & .e-menu-icon {
              color: $flyout-text-color-disabled;
            }
          }
        }

        &.e-separator {
          border-bottom-style: $drop-down-btn-li-border-style;
          border-bottom-width: $drop-down-btn-li-border-width;
          cursor: auto;
          height: $dd-auto-height;
          line-height: $dd-bgr-seperator-line-height;
          margin: $drop-down-btn-seperator-padding;
          pointer-events: none;
        }
      }
    }

    &.e-transparent {
      background: transparent;
      box-shadow: none;

      & .e-dropdown-menu {
        border: 0;
        height: $dd-menu-height;
        min-width: $dd-btn-zero-margin-padding;
        padding: $dd-btn-zero-margin-padding;
        width: $dd-menu-width;
      }
    }

    &.e-hidden {
      display: none !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-rtl.e-dropdown-popup .e-item {
    & .e-menu-icon {
      float: right;
      margin-left: $drop-down-btn-icon-margin-right;
      margin-right: $dd-btn-zero-margin-padding;
    }
  }

  .e-dropdown-popup-width ul {
    min-width: $dd-btn-zero-margin-padding !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-dropdown-popup-width ul li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block !important; /* stylelint-disable-line declaration-no-important */
  }
}

@include export-module('drop-down-button-theme') {
  .e-dropdown-popup {
    background: $drop-down-btn-ul-bgcolor;
    color: $drop-down-btn-color;

    & ul {
      & .e-item  {
        & .e-menu-url {
          color: $drop-down-btn-color;
        }

        & .e-menu-icon {
          color: $drop-down-btn-menu-icon-color;
        }

        &.e-focused {
          @if $skin-name != 'FluentUI' {
            background: $drop-down-btn-li-focus-bgcolor;
          }
          box-shadow: $drop-down-btn-li-box-shadow;
        }

        &:hover {
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            background: $drop-down-btn-li-hover-bgcolor;
          }
          @else {
            background: $drop-down-btn-li-bgcolor;
          }
          color: $drop-down-btn-li-selection-font-color;
          & .e-menu-icon,
          & .e-menu-url {
            @if $skin-name == 'fluent2' {
              color: $drop-down-btn-li-selection-font-color;
            }
          }
        }

        &:active,
        &.e-selected {
          background: $drop-down-btn-li-selection-bgcolor;
          color: $drop-down-btn-selected-color;

          & .e-menu-url {
            color: $drop-down-btn-selected-color;
          }

          & .e-menu-icon {
            @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
              color: $drop-down-btn-menu-icon-color;
            }
            @else {
              color: $drop-down-btn-selected-color;
            }
          }
        }

        &:focus {
          @if $skin-name == 'tailwind3' {
            background: $drop-down-btn-li-bgcolor;
            color: $drop-down-btn-li-selection-font-color;
          }
        }

        &:focus-visible {
          @if $theme-name == 'fluent2' {
            background-color: $flyout-bg-color-focus;
            box-shadow: $btn-keyboard-focus-box-shadow;
            color: $flyout-text-color-focus;

            & .e-menu-icon {
              color: $flyout-text-color-focus;
            }
          }
        }
      }

      & .e-separator {
        border-bottom-color: $drop-down-btn-li-border-color;
      }
    }
  }

  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    &.e-inherit {
      background: inherit;
      border-color: transparent;
      box-shadow: none;
      color: inherit;

      &:hover,
      &:focus,
      &:active,
      &.e-active {
        background: rgba(transparent, .056);
        border-color: transparent;
        box-shadow: none;
        color: inherit;
      }
    }
  }
}

@include export-module('drop-down-button-bootstrap-dark-icons') {
  .e-dropdown-btn,
  .e-dropdown-btn.e-btn {
    .e-caret {
      &::before {
        content: '\e969';
      }
    }
  }
}

@include export-module('drop-down-button-bigger') {
  .e-bigger .e-dropdown-btn,
  .e-bigger.e-dropdown-btn {
    .e-btn-icon {
      font-size: $drop-down-btn-icon-font-size-bigger;
    }

    .e-caret {
      font-size: $drop-down-btn-caret-icon-font-size-bigger;
    }

    &.e-vertical {
      line-height: $drop-down-btn-line-height;
      padding: $drop-down-btn-vertical-bigger-padding;
    }

    &.e-small {
      &.e-vertical {
        line-height: $drop-down-btn-line-height;
        padding: $drop-down-btn-vertical-bigger-padding;
      }
      .e-btn-icon {
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' {
          font-size: $drop-down-btn-small-icon-font-size-bigger;
        }
      }
      .e-btn-icon.e-caret {
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
          font-size: $drop-down-btn-small-caret-icon-font-size-bigger;
        }
      }
    }
  }

  .e-bigger .e-small.e-dropdown-popup ul,
  .e-bigger.e-small.e-dropdown-popup ul {
    & .e-item {
      @if $skin-name == 'tailwind3' {
        height: $drop-down-btn-bigger-small-li-height;
        font-size: $drop-down-btn-bigger-font-size;
        line-height: $drop-down-btn-bigger-small-li-height;
        .e-menu-icon {
          font-size: $drop-down-btn-icon-font-size-bigger;
          line-height: $drop-down-btn-bigger-small-li-height;
        }
      }
    }
  }

  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $theme-name == 'tailwind-dark' or $theme-name == 'bootstrap5-dark' {
      background-color: transparent;
      border-radius: $drop-down-btn-ul-border-radius;
    }
  }

  #{if(&, '&', '*')}.e-bigger .e-dropdown-popup ul,
  #{if(&, '&', '*')}.e-bigger.e-dropdown-popup ul {
    box-shadow: $drop-down-btn-parent-ul-box-shadow;
    font-size: $drop-down-btn-bigger-font-size;
    min-width: $drop-down-btn-bigger-min-width;
    padding: $drop-down-btn-ul-bigger-padding;
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      background-color: $drop-down-btn-ul-bgcolor;
      margin-top: $drop-down-btn-bigger-popup-margin-top;
    }

    & .e-item  {
      height: $drop-down-btn-bigger-li-height;
      @if $skin-name != 'fluent2' {
        line-height: $drop-down-btn-bigger-li-height;
      }
      @if $skin-name == 'fluent2' {
        height: $drop-down-btn-item-height;
        line-height: $drop-down-btn-item-line-height;
      }
      padding: $drop-down-btn-bigger-li-padding;

      &.e-url {
        padding: $dd-btn-zero-margin-padding;
      }

      & .e-menu-url {
        @if $skin-name == 'fluent2' {
          padding: $drop-down-menu-url-padding;
        }
      }

      & .e-menu-icon {
        font-size: $drop-down-btn-menu-icon-bigger-font-size;
        line-height: $drop-down-btn-bigger-li-height;
        @if $skin-name == 'fluent2' {
          line-height: $dropdown-btn-line-height;
        }
      }

      &.e-separator {
        height: $dd-auto-height;
        line-height: $dd-bgr-seperator-line-height;
      }
    }
  }
}

$split-btn-zindex: 2;
$split-btn-border-radius: 4px;
$split-btn-focus-border-color: $grey-8c;
$split-btn-focus-vertical-border-color: $grey-8c;
$split-btn-focus-outline-offset: 0;
$split-btn-vertical-secondary-icon-line-height: .334em;
$split-btn-seperator-border: 1px solid;
$split-btn-seperator-border-color: $grey-8c;
$split-btn-seperator-default-border-color: $grey-8c;
$split-btn-seperator-vertical-border-color: $grey-8c;
$split-btn-hover-border-color: $grey-ad;
$split-btn-hover-vertical-border-color: $grey-ad;
$split-btn-active-border-color: $grey-ad;
$split-btn-active-vertical-border-color: $grey-ad;
$split-btn-disabled-vertical-border-color: rgba($grey-cc, .65);
$split-btn-active-box-shadow: inset 0 3px 5px rgba($grey-base, .125);
$split-btn-disabled-left-border-color: $grey-cc;
$split-btn-hover-left-border-color: $grey-ad;
$split-btn-focus-left-border-color: $grey-8c;
$split-btn-active-left-border-color: $grey-ad;
$split-btn-sec-btn-margin-left: -1px;
$split-btn-icon-btn-padding: 10px;
$split-btn-icon-btn-padding-bigger: 12px;
$split-btn-bigger-padding-left: 12px !default;
$split-btn-bigger-padding-right: 6px !default;
$drop-dbtn-bigger-padding-left: 4px !default;
$drop-dbtn-bigger-padding-right: 4px !default;
$split-btn-bgr-vertical-padding-bottom: 6px !default;
$split-btn-bgr-vertical-padding-right: 12px !default;
$drop-down-btn-bgr-vertical-padding-bottom: 4px !default;
$drop-down-btn-bgr-vertical-padding-top: 4px !default;
$drop-down-bigger-btn-icon-margin-left: 0 !default;
$drop-down-bigger-btn-icon-padding-right: 10px !default;
$drop-down-bigger-icon-top-padding-bottom: 6px !default;
$drop-down-zero-padding-margin: 0 !default;
$drop-down-zero-border-radius: 0 !default;
$drop-down-bigger-rtl-padding-left: 6px !default;
$drop-down-bigger-rtl-padding-right: 12px !default;
$drop-down-bgr-rtl-icon-padding-left: 10px !default;
$drop-dbtn-bigger-padding-left: 4px !default;
$drop-dbtn-bigger-padding-right: 4px !default;

$split-rtl-btn-padding-left: 4px !default;
$split-rtl-btn-padding-right: 10px !default;

$split-btn-icon-padding-right: 8px !default;
$split-rtl-btn-icon-padding-left: 8px !default;

$split-btn-padding-left: 10px !default;
$split-btn-padding-right: 10px !default;
$split-btn-top-icon-padding-bottom: 10px !default;
$split-btn-top-icon-padding-top: 10px !default;
$split-btn-icon-top-padding-bottom: 4px !default;
$drop-down-btn-padding-left: 4px !default;
$drop-down-btn-padding-right: 4px !default;
$split-btn-line-height: 1 !default;
$split-btn-vertical-padding-bottom: 4px !default;
$split-btn-vertical-padding-right: 10px !default;
$split-btn-vertical-icon-top-padding: 4px !default;
$drop-down-btn-vertical-padding-bottom: 4px !default;
$drop-down-btn-vertical-padding-top: 4px !default;
$split-btn-top-icon-padding-bottom: 12px !default;
$split-btn-top-icon-padding-top: 12px !default;
$split-auto-width: auto !default;
$split-full-width: 100% !default;

@include export-module('split-button-layout') {
  .e-split-btn-wrapper {
    display: inline-flex;
    white-space: nowrap;
    width: min-content;
    @if $skin-name == 'Material3' {
      border-radius: $split-bgr-btn-border-radius;
      box-shadow: $btn-box-shadow;
    }

    .e-split-btn {
      border-bottom-right-radius: $drop-down-zero-border-radius;
      border-top-right-radius: $drop-down-zero-border-radius;
      text-transform: none;
      @if $skin-name == 'bootstrap4' {
        padding-left: $split-btn-icon-btn-padding;
        padding-right: $split-btn-icon-btn-padding;
      }
      @else if $skin-name == 'FluentUI' {
        padding: 3px 7px;
      }
      @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
        padding: $split-nrml-btn-padding;
        line-height: $split-nrml-btn-line-height;
        box-shadow: none;
        z-index: 1;
      }
      @if $skin-name == 'bootstrap5.3' {
        border: 0;
      }
      @if $skin-name == 'bootstrap5' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        padding: $split-btn-wrapper-btn-padding;
      }
      @else {
        padding-left: $split-btn-padding-left;
        padding-right: $split-btn-padding-right;
      }

      &:focus {
        outline-offset: $split-btn-focus-outline-offset;
      }

      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' {
          box-shadow: none;
        }
      }

      &:focus {
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          box-shadow: $split-btn-active-box-shadow;
          z-index: $split-btn-zindex;
        }
        @else {
          box-shadow: none;
        }
      }

      &:focus-visible { // only for keybord
        @if $skin-name == 'Material3' {
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }

      &.e-btn:focus-visible { // only for keybord
        @if $skin-name == 'fluent2' {
          border-right-color: $grey-black !important; /* stylelint-disable-line declaration-no-important */
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }

      &:active {
        box-shadow: $split-btn-active-box-shadow;
        z-index: $split-btn-zindex;
      }

      &.e-top-icon-btn {
        padding-bottom: $split-btn-top-icon-padding-bottom;
        padding-top: $split-btn-top-icon-padding-top;
      }

      .e-btn-icon {
        font-size: $drop-down-btn-icon-font-size;
        margin-left: $drop-down-zero-padding-margin;
        padding-right: $split-btn-icon-padding-right;
        width: $split-auto-width;
        @if $skin-name == 'Material3' {
          border-radius: $btn-border-radius;
        }
      }

      .e-icon-top {
        padding-bottom: $split-btn-icon-top-padding-bottom;
        padding-right: $drop-down-zero-padding-margin;
      }

      &.e-icon-btn {
        padding-left: $split-btn-icon-btn-padding;
        padding-right: $split-btn-icon-btn-padding;
        @if $skin-name == 'bootstrap5' {
          padding: 3.75px 11px;
        }
        .e-btn-icon {
          padding-right: $drop-down-zero-padding-margin;
        }
      }
    }

    .e-dropdown-btn {
      border-bottom-left-radius: $drop-down-zero-border-radius;
      border-top-left-radius: $drop-down-zero-border-radius;
      margin-left: $split-btn-sec-btn-margin-left;
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
      @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
        padding-left: $split-btn-icon-btn-padding;
        padding-right: $split-btn-icon-btn-padding;
      }
      @else if $skin-name == 'FluentUI' {
        padding: 4px;
      }
      @else {
        padding-left: $drop-down-btn-padding-left;
        padding-right: $drop-down-btn-padding-right;
      }

      &:focus,
      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'FluentUI' and $theme-name != 'Material3' {
          box-shadow: none;
        }
      }

      &:active {
        box-shadow: $split-btn-active-box-shadow;
        z-index: $split-btn-zindex;
      }

      &:disabled {
        &:focus,
        &:hover,
        &:active {
          z-index: 0;
        }
      }

      &:focus {
        outline-offset: $split-btn-focus-outline-offset;
      }

      &.e-btn:focus-visible { // only for keybord
        @if $skin-name == 'fluent2' {
          margin-left: $drop-down-zero-padding-margin !important; /* stylelint-disable-line declaration-no-important */
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }
    }

    .e-btn {
      @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' and $theme-name != 'Material3' {
        box-shadow: none;
      }

      &:hover {
        @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $theme-name != 'fluent2' {
          box-shadow: none;
        }
      }

      &:focus {
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          box-shadow: $split-btn-active-box-shadow;
          z-index: $split-btn-zindex;
        }
        @else {
          box-shadow: none;
        }
      }

      &:focus-visible { // only for keybord
        @if $skin-name == 'Material3' {
          box-shadow: $btn-keyboard-focus-box-shadow;
        }
      }

      &:active {
        box-shadow: $split-btn-active-box-shadow;
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          z-index: $split-btn-zindex;
        }
      }

      &:disabled {
        box-shadow: none;
        @if $skin-name == 'FluentUI' or $theme-name == 'FluentUI' {
          outline: 0;
          outline-offset: 0;
        }
      }

      &.e-inherit {
        &:focus,
        &:active {
          box-shadow: none;
        }
      }
    }

    &.e-rtl {
      .e-split-btn {
        border-bottom-left-radius: $drop-down-zero-border-radius;
        border-bottom-right-radius: $split-btn-border-radius;
        border-top-left-radius: $drop-down-zero-border-radius;
        border-top-right-radius: $split-btn-border-radius;
        margin-left: $split-btn-sec-btn-margin-left;
        @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' {
          padding-left: $split-btn-icon-btn-padding;
          padding-right: $split-btn-icon-btn-padding;
        }
        @else {
          padding-left: $split-rtl-btn-padding-left;
          padding-right: $split-rtl-btn-padding-right;
        }
        @if $skin-name == 'Material3' {
          border-radius: $split-bgr-btn-border-radius;
        }

        .e-btn-icon {
          margin-right: $drop-down-zero-padding-margin;
          padding-left: $split-rtl-btn-icon-padding-left;
          padding-right: $drop-down-zero-padding-margin;
          @if $skin-name == 'Material3' {
            border-radius: $btn-border-radius;
          }
        }

        .e-icon-top {
          padding-left: $drop-down-zero-padding-margin;
        }

        &.e-icon-btn {
          padding-left: $split-btn-icon-btn-padding;
          padding-right: $split-btn-icon-btn-padding;

          .e-btn-icon {
            padding-left: $drop-down-zero-padding-margin;
          }
        }
      }

      .e-dropdown-btn {
        border-bottom-left-radius: $split-btn-border-radius;
        border-bottom-right-radius: $drop-down-zero-border-radius;
        border-top-left-radius: $split-btn-border-radius;
        border-top-right-radius: $drop-down-zero-border-radius;
        margin-left: $drop-down-zero-padding-margin;
        @if $skin-name == 'Material3' {
          border-radius: $split-bgr-btn-border-radius;
          box-shadow: none;
        }
      }
    }

    &.e-vertical {
      display: inline-block;

      .e-split-btn,
      .e-dropdown-btn {
        display: block;
        width: $split-full-width;
      }

      .e-split-btn {
        border-bottom-left-radius: $drop-down-zero-border-radius;
        border-top-right-radius: $split-btn-border-radius;
        line-height: $split-btn-line-height;
        @if $skin-name == 'bootstrap4'or $skin-name == 'tailwind' {
          padding-bottom: $split-btn-icon-btn-padding;
          padding-right: $split-btn-icon-btn-padding;
        }
        @else {
          padding-bottom: $split-btn-vertical-padding-bottom;
          padding-right: $split-btn-vertical-padding-right;
        }
        @if $skin-name == 'Material3' {
          border-radius: $split-bgr-btn-border-radius;
          box-shadow: none;
        }

        .e-icon-top {
          padding-bottom: $split-btn-vertical-icon-top-padding;
        }
      }

      .e-dropdown-btn {
        border-bottom-left-radius: $split-btn-border-radius;
        border-top-right-radius: $drop-down-zero-border-radius;
        line-height: $split-btn-vertical-secondary-icon-line-height;
        margin-left: $drop-down-zero-padding-margin;
        margin-top: $split-btn-sec-btn-margin-left;
        @if $skin-name == 'bootstrap4' {
          padding-bottom: $split-btn-icon-btn-padding;
          padding-top: $split-btn-icon-btn-padding;
        }
        @else {
          padding-bottom: $drop-down-btn-vertical-padding-bottom;
          padding-top: $drop-down-btn-vertical-padding-top;
        }
        @if $skin-name == 'Material3' {
          border-radius: $split-bgr-btn-border-radius;
          box-shadow: none;
        }

        .e-icon-bottom {
          padding-top: $drop-down-zero-padding-margin;
        }
      }

      &.e-rtl {
        .e-split-btn {
          border-bottom-right-radius: $drop-down-zero-border-radius;
          border-top-left-radius: $split-btn-border-radius;
          margin-left: $drop-down-zero-padding-margin;
        }

        .e-dropdown-btn {
          border-bottom-right-radius: $split-btn-border-radius;
          border-top-left-radius: $drop-down-zero-border-radius;
        }
      }
    }
  }
}

@include export-module('split-button-theme') {
  .e-split-btn-wrapper {
    .e-split-btn {
      @if $skin-name != 'tailwind3' {
        border-right-color: $split-btn-seperator-border-color;
      }
      @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
        border-image: $split-btn-seperator-border-color;
        border-width: 0 1px 0 0;
      }

      &:focus {
        border-right-color: $split-btn-focus-border-color;
      }

      &:active {
        border-right-color: $split-btn-active-border-color;
      }

      &:disabled {
        border-right-color: $btn-disabled-bgcolor;
        @if $skin-name == 'tailwind3' {
          border-right-color: $btn-disabled-border-color;
        }
      }

      &.e-inherit {
        border-color: transparent;
      }
    }

    &.e-splitbtn-disabled {
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
    }

    &:hover :not(e-active) {
      & .e-split-btn {
        border-right-color: $split-btn-hover-border-color;

        &:disabled {
          border-right-color: $btn-disabled-border-color;
        }
      }
    }

    &.e-rtl {
      .e-split-btn {
        @if $skin-name == 'material' or $skin-name == 'fabric' {
          border-color: transparent;
        }
        @else if $skin-name == 'Material3' {
          border-image: $split-btn-seperator-border-color-rtl;
          border-width: 0 0 0 1px;
        }
        @else {
          border-left-color: $split-btn-seperator-border-color;
          border-right-color: $split-btn-seperator-default-border-color;
        }

        &:focus {
          @if $skin-name == 'material' or $skin-name == 'fabric' {
            border-color: transparent;
          }
          @else {
            border-left-color: $split-btn-focus-border-color;
            border-right-color: $split-btn-focus-vertical-border-color;
          }
        }

        &:active {
          @if $skin-name == 'material' or $skin-name == 'fabric' {
            border-color: transparent;
          }
          @else {
            border-left-color: $split-btn-active-border-color;
            border-right-color: $split-btn-active-vertical-border-color;
          }
        }

        &:disabled {
          border-left-color: $btn-disabled-border-color;
          border-right-color: $split-btn-disabled-vertical-border-color;
        }

        &.e-inherit {
          border-color: transparent;
        }
      }

      &:hover {
        & .e-split-btn :not(e-active) {
          border-left-color: $split-btn-hover-border-color;
          border-right-color: $split-btn-hover-vertical-border-color;

          &:disabled {
            border-left-color: $btn-disabled-border-color;
          }
        }
      }
    }

    &.e-vertical {
      .e-split-btn {
        @if $skin-name == 'Material3' {
          border-image: $split-btn-seperator-border-color-vertical;
          border-width: 0 0 2px;
        }
        border-bottom-color: $split-btn-seperator-vertical-border-color;
        border-right-color: $split-btn-seperator-default-border-color;

        &.e-inherit,
        &.e-inherit:focus,
        &.e-inherit:active,
        &.e-inherit:disabled {
          border-color: transparent;
        }

        &:focus {
          border-bottom-color: $split-btn-focus-border-color;
          border-right-color: $split-btn-focus-vertical-border-color;
        }

        &:active {
          border-bottom-color: $split-btn-active-border-color;
          border-right-color: $split-btn-active-vertical-border-color;
        }

        &:disabled {
          border-bottom-color: $btn-disabled-border-color;
          border-right-color: $split-btn-disabled-vertical-border-color;
        }
      }

      &:hover {
        & .e-split-btn {
          border-bottom-color: $split-btn-hover-border-color;
          border-right-color: $split-btn-hover-vertical-border-color;

          &.e-inherit,
          &.e-inherit:disabled {
            border-color: transparent;
          }

          &:disabled {
            border-bottom-color: $btn-disabled-border-color;
          }
        }
      }

      &.e-rtl {
        .e-split-btn {
          border-left-color: $split-btn-seperator-default-border-color;

          &.e-inherit,
          &.e-inherit:focus,
          &.e-inherit:active,
          &.e-inherit:disabled {
            border-color: transparent;
          }

          &:focus {
            border-left-color: $split-btn-focus-left-border-color;
          }

          &:active {
            border-left-color: $split-btn-active-left-border-color;
          }

          &:disabled {
            border-left-color: $split-btn-disabled-left-border-color;
          }
        }

        &:hover {
          & .e-split-btn {
            border-left-color: $split-btn-hover-left-border-color;

            &.e-inherit {
              border-color: transparent;
            }
          }
        }
      }
    }
  }
}

@include export-module('split-button-bigger') {
  .e-bigger .e-split-btn-wrapper,
  .e-bigger.e-split-btn-wrapper {
    @if $skin-name == 'Material3' {
      border-radius: $split-bgr-btn-border-radius;
      box-shadow: $btn-box-shadow;
    }
    .e-split-btn {
      @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
        border-radius: $split-bgr-btn-border-radius;
        box-shadow: none;
        padding: $split-wrapper-split-btn-padding;
      }
      @if $skin-name == 'bootstrap4'or $skin-name == 'FluentUI' {
        padding: 7px 4px;
        padding-left: $split-btn-icon-btn-padding-bigger;
        padding-right: $split-btn-icon-btn-padding-bigger;
      }
      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        padding-left: $split-btn-bigger-padding-left;
        padding-right: $split-btn-bigger-padding-right;
        line-height: 1.781em;
      }
      @else {
        padding-left: $split-btn-bigger-padding-left;
        padding-right: $split-btn-bigger-padding-right;
      }

      &.e-top-icon-btn {
        padding-bottom: $split-btn-top-icon-padding-bottom;
        padding-top: $split-btn-top-icon-padding-top;
      }

      .e-btn-icon {
        font-size: $drop-down-btn-icon-font-size-bigger;
        margin-left: $drop-down-bigger-btn-icon-margin-left;
        padding-right: $drop-down-bigger-btn-icon-padding-right;
        width: $split-auto-width;
        @if $skin-name == 'Material3' {
          border-radius: $split-bgr-btn-border-radius;
        }
      }

      .e-icon-top {
        padding-bottom: $drop-down-bigger-icon-top-padding-bottom;
        padding-right: $drop-down-zero-padding-margin;
      }

      &.e-icon-btn {
        padding-left: $split-btn-icon-btn-padding-bigger;
        padding-right: $split-btn-icon-btn-padding-bigger;

        .e-btn-icon {
          padding-right: $drop-down-zero-padding-margin;
        }
      }
    }

    .e-dropdown-btn {
      @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
        padding: $split-wrapper-split-btn-padding;
      }
      @else {
        padding-left: $drop-dbtn-bigger-padding-left;
        padding-right: $drop-dbtn-bigger-padding-right;
      }
      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        z-index: 1;
      }
    }

    &.e-rtl {
      .e-split-btn {
        @if $skin-name == 'bootstrap4' {
          padding-left: $split-btn-icon-btn-padding-bigger;
          padding-right: $split-btn-icon-btn-padding-bigger;
        }
        @else {
          padding-left: $drop-down-bigger-rtl-padding-left;
          padding-right: $drop-down-bigger-rtl-padding-right;
        }

        .e-btn-icon {
          padding-left: $drop-down-bgr-rtl-icon-padding-left;
          padding-right: $drop-down-zero-padding-margin;
          @if $skin-name == 'Material3' {
            border-radius: $split-bgr-btn-border-radius;
          }
        }

        .e-icon-top {
          padding-left: $drop-down-zero-padding-margin;
        }

        &.e-icon-btn {
          padding-left: $split-btn-icon-btn-padding-bigger;
          padding-right: $split-btn-icon-btn-padding-bigger;

          .e-btn-icon {
            padding-left: $drop-down-zero-padding-margin;
          }
        }
      }
    }

    &.e-vertical {
      .e-split-btn {
        @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
          padding-bottom: $split-btn-icon-btn-padding-bigger;
          padding-right: $split-btn-icon-btn-padding-bigger;
        }
        @else {
          padding-bottom: $split-btn-bgr-vertical-padding-bottom;
          padding-right: $split-btn-bgr-vertical-padding-right;
        }
      }

      .e-dropdown-btn {
        @if $skin-name == 'bootstrap4' {
          padding-bottom: $split-btn-icon-btn-padding-bigger;
          padding-top: $split-btn-icon-btn-padding-bigger;
        }
        @else {
          padding-bottom: $drop-down-btn-bgr-vertical-padding-bottom;
          padding-top: $drop-down-btn-bgr-vertical-padding-top;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          z-index: 1;
        }

        .e-icon-bottom {
          padding-top: $drop-down-zero-padding-margin;
        }
      }
    }
  }
}

//default
$numeric-skin-name: 'bootstrap' !default;
$numeric-input-icon-size: 12px !default;
$numeric-input-bigger-icon-size: 14px !default;
$numric-zero-padding-margin: 0 !default;

//enddefault
$numeric-bigger-min-height: 40px !default;
$numeric-min-height: 33px !default;
$numeric-zero-height: 0 !default;

$numeric-prepend-label-bottom-top: 17px !default;
$numeric-prepend-label-top-top: 18px !default;
$numeric-prepend-outline-label-bottom-top: 16px !default;
$numeric-prepend-outline-label-top-top: 17px !default;
$numeric-prepend-filled-label-bottom-top: 16px !default;
$numeric-prepend-filled-label-top-top: 20px !default;
$numeric-bigger-prepend-label-bottom-top: -10px !default;
$numeric-bigger-prepend-label-top-top: -15px !default;
$numeric-bigger-prepend-outline-label-bottom-top: -10px !default;
$numeric-bigger-prepend-outline-label-top-top: -15px !default;
$numeric-bigger-prepend-filled-label-bottom-top: 18px !default;
$numeric-bigger-prepend-filled-label-top-top: -15px !default;

.e-numeric-container {
  width: 100%;
}

.e-content-placeholder.e-numeric.e-placeholder-numeric {
  background-size: 300px 33px;
  min-height: $numeric-min-height;
}

// Hidden element styles
.e-float-input.e-input-group.e-control-wrapper.e-numeric .e-numeric-hidden,
.e-input-group.e-control-wrapper.e-numeric .e-numeric-hidden,
.e-float-input.e-control-wrapper.e-numeric .e-numeric-hidden,
.e-float-input.e-input-group.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden,
.e-input-group.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden,
.e-float-input.e-control-wrapper.e-numeric.e-input-focus .e-numeric-hidden {
  border: 0;
  height: $numeric-zero-height;
  margin: $numric-zero-padding-margin;
  padding: $numric-zero-padding-margin;
  text-indent: 0;
  visibility: hidden;
  width: $numric-zero-padding-margin;
}

div.e-numeric.e-input-group,
span.e-numeric.e-input-group {
  &.e-prepend-wrapper,
  &.e-append-wrapper {
    &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
      top: $numeric-prepend-label-bottom-top;
    }

    &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
      top: $numeric-prepend-label-top-top;
    }

    &.e-outline {
      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
        top: $numeric-prepend-outline-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
        top: $numeric-prepend-outline-label-top-top;
      }
    }

    &.e-filled {
      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
        top: $numeric-prepend-filled-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
        top: $numeric-prepend-filled-label-top-top;
      }
      @if ($skin-name == 'Material3') {
        div.e-prepend-template {
          padding: 18px 8px 8px 0;
        }
        div.e-append-template {
          padding: 18px 0 8px 8px;
        }
      }
    }
  }
}

@if ($skin-name == 'tailwind3' or $skin-name == 'fluent2' or $skin-name == 'FluentUI') {
  .e-numeric.e-input-group.e-prepend-wrapper.e-filled input,
  .e-numeric.e-input-group.e-append-wrapper.e-filled input {
    height: auto;
  }
}

.e-numeric.e-input-group.e-prepend-wrapper.e-input-focus input.e-input,
.e-numeric.e-input-group.e-prepend-wrapper input.e-input {
  padding-left: 0;
}

.e-numeric.e-rtl.e-input-group.e-prepend-wrapper.e-input-focus input.e-input,
.e-numeric.e-rtl.e-input-group.e-prepend-wrapper input.e-input {
  padding-right: 0;
}

@include export-module('numerictextbox-theme') {
  .e-numeric.e-control-wrapper {
    #{if(&, '&', '*')}.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-focus) {
      @if $numeric-skin-name == 'bootstrap' {
        border-color: $input-group-full-border-color;
        box-shadow: none;
      }
    }

    #{if(&, '&', '*')}.e-input-group .e-input-group-icon {
      font-size: $numeric-input-icon-size;
    }
  }

  .e-small {
    #{if(&, '&', '*')} .e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
    #{if(&, '&', '*')}.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon {
      @if ($input-skin-name == 'FluentUI') {
        font-size: $numeric-input-small-icon-size;
      }
    }
  }
}

@include export-module('numerictextbox-bootstrap-dark-icons') {
  .e-input-group-icon.e-spin-up::before {
    content: '\e834';
    font-family: 'e-icons';
  }

  .e-input-group-icon.e-spin-down::before {
    content: '\e83d';
    font-family: 'e-icons';
  }
}

@include export-module('numerictextbox-bigger') {

  .e-bigger.e-content-placeholder.e-numeric.e-placeholder-numeric,
  .e-bigger .e-content-placeholder.e-numeric.e-placeholder-numeric {
    background-size: 300px 40px;
    min-height: $numeric-bigger-min-height;
  }

  .e-bigger {
    #{if(&, '&', '*')} .e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
    #{if(&, '&', '*')}.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon {
      font-size: $numeric-input-bigger-icon-size;
    }
  }

  .e-small.e-bigger .e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
  .e-small.e-bigger.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
  .e-small .e-bigger.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon,
  .e-bigger .e-small.e-control-wrapper.e-numeric.e-input-group .e-input-group-icon {
    @if ($input-skin-name == 'FluentUI') {
      font-size: $numeric-input-bigger-small-icon-size;
    }
  }

  div.e-bigger.e-numeric.e-input-group,
  .e-bigger div.e-numeric.e-input-group,
  span.e-bigger.e-numeric.e-input-group,
  .e-bigger span.e-numeric.e-input-group {
    &.e-prepend-wrapper,
    &.e-append-wrapper {
      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
        top: $numeric-bigger-prepend-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
        top: $numeric-bigger-prepend-label-top-top;
      }

      &.e-outline {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $numeric-bigger-prepend-outline-label-bottom-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $numeric-bigger-prepend-outline-label-top-top;
        }
      }

      &.e-filled {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $numeric-bigger-prepend-filled-label-bottom-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $numeric-bigger-prepend-filled-label-top-top;
        }
      }
    }
  }
}

$tooltip-drop-shadow: none !default;
$tooltip-content-bg-color: $grey-dark-font !default;
$tooltip-content-border-color: $grey-99 !default;
$tooltip-content-font-color: $grey-base !default;
$tooltip-default-icon-color: $grey-dark-font !default;
$tooltip-icon-bg-normal: $grey-base !default;
$tooltip-hover-icon-color: $grey-cc !default;
$tooltip-icon-bg-hover: $grey-base !default;
$tooltip-font-size: 12px !default;
$tooltip-mobile-font-size: 13px !default;
$tooltip-border-radius: 4px !default;
$tooltip-opacity: 1 !default;
$tooltip-arrow-outer-border: 8px !default;
$tooltip-arrow-inner-border: 7px !default;
$tooltip-horizontal-padding: 3px !default;
$tooltip-vertical-padding: 8px !default;
$tooltip-mobile-horizontal-padding: 5px !default;
$tooltip-mobile-vertical-padding: 10px !default;
$tooltip-line-height: 17px !default;
$tooltip-arrow-icon-font-size: 16px !default;
$tooltip-icon-border-color: $grey-base !default;
$tooltip-tip-bottom-height: 8px !default;
$tooltip-tip-bottom-left: 50% !default;
$tooltip-tip-bottom-top: 100% !default;
$tooltip-tip-bottom-width: 16px !default;
$tooltip-tip-top-height: 8px !default;
$tooltip-tip-top-left: 50% !default;
$tooltip-tip-top-top: -9px !default;
$tooltip-tip-top-width: 16px !default;
$tooltip-tip-left-height: 16px !default;
$tooltip-tip-left-left: -9px !default;
$tooltip-tip-left-top: 48% !default;
$tooltip-tip-left-width: 8px !default;
$tooltip-tip-right-height: 16px !default;
$tooltip-tip-right-left: 100% !default;
$tooltip-tip-right-top: 50% !default;
$tooltip-tip-right-width: 8px !default;
$tooltip-tip-content-line-height: 20px !default;
$tooltip-zero-padding-margin: 0 !default;
$tooltip-wrap-min-width: 30px !default;
$tooltip-zero-height: 0 !default;
$tooltip-one-line-height: 1 !default;
$tooltip-close-right: -9px !default;
$tooltip-close-top: -9px !default;
$tooltip-full-height: 100% !default;
$tooltip-full-width: 100% !default;
$tooltip-nrml-close-border-radius: 9px !default;
$tooltip-nrml-close-border: 1px !default;
$tooltip-nrml-close-height: 16px !default;
$tooltip-nrml-close-width: 16px !default;

@mixin tip-size($height, $left, $top, $width) {
  height: $height;
  left: $left;
  top: $top;
  width: $width;
}

@include export-module('tooltip-layout') {

  .e-tooltip-popup-container {
    position: relative;
  }

  .e-tooltip-wrap {
    max-width: 350px;
    min-width: $tooltip-wrap-min-width;
    padding: $tooltip-zero-padding-margin;
    position: absolute;
    visibility: visible;

    .e-arrow-tip {
      overflow: hidden;
      position: absolute;

      &.e-tip-bottom {
        @include tip-size($tooltip-tip-bottom-height, $tooltip-tip-bottom-left, $tooltip-tip-bottom-top, $tooltip-tip-bottom-width);
      }

      &.e-tip-top {
        @include tip-size($tooltip-tip-top-height, $tooltip-tip-top-left, $tooltip-tip-top-top, $tooltip-tip-top-width);
      }

      &.e-tip-left {
        @include tip-size($tooltip-tip-left-height, $tooltip-tip-left-left, $tooltip-tip-left-top, $tooltip-tip-left-width);
      }

      &.e-tip-right {
        @include tip-size($tooltip-tip-right-height, $tooltip-tip-right-left, $tooltip-tip-right-top, $tooltip-tip-right-width);
      }
    }

    .e-tooltip-close {
      cursor: pointer;
      float: right;
      position: absolute;
      right: $tooltip-close-right;
      top: $tooltip-close-top;
      z-index: inherit;
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        border-radius: $tooltip-nrml-close-border-radius;
        border-width: $tooltip-nrml-close-border;
        box-shadow: $shadow-sm;
        box-sizing: border-box;
        height: $tooltip-nrml-close-height;
        width: $tooltip-nrml-close-width;
      }
      @if ($skin-name == 'tailwind3') {
        height: $tooltip-nrml-close-height;
        width: $tooltip-nrml-close-width;
      }
    }

    .e-tip-content {
      background-color: inherit;
      height: $tooltip-full-height;
      line-height: $tooltip-line-height;
      overflow-wrap: break-word;
      overflow-x: hidden;
      padding: $tooltip-horizontal-padding $tooltip-vertical-padding;
      position: relative;
      white-space: normal;
      width: $tooltip-full-width;
      word-break: break-word;
      z-index: 1;
      @if $skin-name == 'bootstrap4' {
        border-radius: inherit;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        font-weight: 500;
      }
    }

    &.e-rtl {
      .e-tooltip-close::before {
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          font-size: $tooltip-close-before-font-size;
          margin-right: $tooltip-close-before-margin-right;
        }
        @if $skin-name == 'tailwind' {
          font-size: 8px;
          margin-right: 3px;
        }
      }
    }
  }
  .e-tooltip-content-placeholder {
    display: none;
  }
}

@include export-module('tooltip-theme') {

  .e-tooltip-wrap {
    border-radius: $tooltip-border-radius;

    @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI') {
      filter: $tooltip-drop-shadow;
      opacity: $tooltip-opacity;
    }

    &.e-popup {
      background-color: $tooltip-content-bg-color;
      border: $border-size $border-type $tooltip-content-border-color;
      @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
        box-shadow: $tooltip-drop-shadow;
        filter: $tooltip-drop-shadow-filter;
      }
    }

    .e-arrow-tip-outer {
      height: $tooltip-zero-height;
      left: 0;
      position: absolute;
      top: 0;
      width: $tooltip-zero-padding-margin;

      &.e-tip-bottom {
        border-left: $tooltip-arrow-outer-border $border-type transparent;
        border-right: $tooltip-arrow-outer-border $border-type transparent;
        border-top: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
      }

      &.e-tip-top {
        border-bottom: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
        border-left: $tooltip-arrow-outer-border $border-type transparent;
        border-right: $tooltip-arrow-outer-border $border-type transparent;
      }

      &.e-tip-left {
        border-bottom: $tooltip-arrow-outer-border $border-type transparent;
        border-right: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
        border-top: $tooltip-arrow-outer-border $border-type transparent;
      }

      &.e-tip-right {
        border-bottom: $tooltip-arrow-outer-border $border-type transparent;
        border-left: $tooltip-arrow-outer-border $border-type $tooltip-content-border-color;
        border-top: $tooltip-arrow-outer-border $border-type transparent;
      }
    }

    .e-arrow-tip-inner {
      height: $tooltip-zero-height;
      position: absolute;
      width: $tooltip-zero-padding-margin;
      z-index: 10;

      &.e-tip-right,
      &.e-tip-left,
      &.e-tip-bottom,
      &.e-tip-top {
        color: $tooltip-content-bg-color;
        font-family: 'e-icons';
        font-size: $tooltip-arrow-icon-font-size;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
      }

      &.e-tip-bottom,
      &.e-tip-top {
        right: $tooltip-arrow-icon-font-size;
      }

      &.e-tip-right,
      &.e-tip-left {
        bottom: $tooltip-arrow-icon-font-size;
      }
    }

    .e-tooltip-close {
      background-color: $tooltip-icon-bg-normal;
      border-color: $tooltip-icon-border-color;
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
        border-radius: 9px;
      }
      @else if ($skin-name == 'tailwind3') {
        border-radius: 50%;
      }
      @else {
        border-radius: 8px;
      }
      color: $tooltip-default-icon-color;
      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        border-style: solid;
        border-width: 1px;
        height: 16px;
        width: 16px;
      }
      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
        border: $tooltip-close-icon-border;
      }

      &:hover {
        @if ($skin-name == 'tailwind') {
          color: $tooltip-hover-icon-color;
        }
        @else {
          background-color: $tooltip-icon-bg-hover;
          color: $tooltip-hover-icon-color;
        }
        @if ($skin-name == 'bootstrap5') {
          border-color: $tooltip-close-icon-border-hover;
        }
      }
    }

    .e-tip-content {
      border-radius: inherit;
      color: $tooltip-content-font-color;
      font-family: $font-family;
      font-size: $tooltip-font-size;
      @if $skin-name == 'bootstrap4' {
        line-height: 1.5;
      }
    }
  }
}

.e-tooltip-close::before {
  content: '\e7e9';
  font-size: 16px;
}

.e-arrow-tip-inner.e-tip-right::before {
  content: '\e848';
}

.e-arrow-tip-inner.e-tip-top::before {
  content: '\e918';
}

.e-arrow-tip-inner.e-tip-bottom::before {
  content: '\e919';
}

.e-arrow-tip-inner.e-tip-left::before {
  content: '\e84b';
}

@include export-module('tooltip-bigger') {
  .e-bigger .e-tooltip-wrap,
  .e-tooltip-wrap.e-bigger {

    .e-tooltip-close {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        border-radius: $tooltip-bgr-close-border-radius;
        border-width: $tooltip-bgr-close-border;
        height: $tooltip-bgr-close-height;
        width: $tooltip-bgr-close-width;
      }

      &::before {
        @if ($skin-name == 'tailwind') {
          font-size: 10px;
          vertical-align: middle;
        }

        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          font-size: $tooltip-bgr-before-font-size;
          left: $tooltip-bgr-before-left;
        }
      }
    }

    .e-tip-content {
      line-height: $tooltip-tip-content-line-height;
      padding: $tooltip-mobile-horizontal-padding $tooltip-mobile-vertical-padding;
    }

    &.e-rtl {
      .e-tooltip-close::before {
        @if ($skin-name == 'tailwind') {
          font-size: 10px;
          margin-right: 4px;
        }
      }
    }
  }

  .e-bigger .e-tooltip-wrap .e-tip-content,
  .e-tooltip-wrap.e-bigger .e-tip-content {
    font-size: $tooltip-mobile-font-size;
  }
}

//default
$slider-bg-color: $grey-99 !default;
$slider-disabled-bg-color: $grey-99 !default;
$slider-active-bg-color: $grey-white !default;
$slider-disabled-opacity: .65 !default;
$slider-start-handle-border-size: 1px solid $grey-cc !default;
$slider-border-radius: 4px !default;
$slider-height: 10px !default;
$slider-handle-border-size: 1px solid !default;
$slider-handle-border-color: $grey-cc !default;
$slider-handle-height: 16px !default;
$slider-handle-width: 16px !default;
$slider-handle-mobile-height: 18px !default;
$slider-handle-mobile-width: 18px !default;
$slider-handle-border-radius: 100% !default;
$slider-button-icon-color: $grey-white !default;
$slider-handle-top: -4px !default;
$slider-handle-mobile-top: -4px !default;
$slider-h-handle-margin: 0 !default;
$slider-h-handle-mobile-margin: 0 !default;
$rtl-slider-h-handle-margin: 0 -8px 0 0 !default;
$rtl-slider-h-handle-mobile-margin: 0 !default;
$slider-v-handle-margin: -8px !default;
$slider-v-handle-mobile-margin: 0 !default;
$rtl-slider-v-handle-margin: 0 !default;
$rtl-slider-v-handle-mobile-margin: 0 !default;
$slider-range-bar-color: $brand-primary !default;
$slider-range-bar-hover-color: $brand-primary !default;
$slider-color: $grey-base !default;
$slider-handle-color: $grey-white !default;
$slider-handle-start-border-color: $grey-99 !default;
$slider-handle-focus-bg-color: rgba($grey-base, .24) !default;
$slider-tick-color: $grey-dark !default;
$slider-button-bg-color: $grey-light !default;
$slider-button-color-border: transparent !default;
$slider-btn-focus-color:  $grey-dark !default;
$slider-btn-focus-border-color: $grey-dark !default;
$slider-btn-focus-after-color: $grey-dark !default;
$slider-container-height: 10px !default;
$slider-normal-handle-border-size: 1px solid !default;
$slider-normal-handle-border-color:  $grey-white !default;
$slider-handle-bg-color: $grey-white !default;
$slider-handle-hover-color: $grey-e6 !default;
$slider-disabled-handle-bg-color: $grey-white !default;
$slider-disabled-handle-hover-color: $grey-cc !default;
$slider-disabled-handle-normal-border-color: $grey-cc !default;
$slider-disabled-normal-handle-border-color: $grey-cc !default;
$slider-disabled-range-bar-color: $brand-primary !default;
$slider-disabled-button-bg-color: $grey-light !default;
$slider-hover-color: $grey-99 !default;
$slider-tooltip-padding: 2px 12px !default;
$slider-start-transform: none !default;
$slider-mid-transform: none !default;
$slider-final-transform: none !default;
$slider-handle-after-position: relative !default;
$slider-handle-hover-start: scale(1) !default;
$slider-handle-hover-end: scale(1) !default;
$slider-start-handle-hover-end: scale(1) !default;
$slider-handle-normal-border-color: $grey-cc !default;
$slider-handle-hover-border-color: $grey-cc !default;
$tick-after-height: 5px !default;
$tick-after-top: -9px !default;
$largetick-before-top: -9px !default;
$largetick-before-height: 8px !default;
$largetick-after-height: 8px !default;
$largetick-after-top: 9px !default;
$tick-before-height: 5px !default;
$tick-before-top: 6px !default;
$slider-btn-container-height: 10px !default;
$slider-horizontal-btn-icon-prev: '\e904' !default;
$slider-vertical-btn-icon-prev: '\e95d' !default;
$slider-horizontal-btn-icon-next: '\e895' !default;
$slider-vertical-btn-icon-next: '\e98a' !default;
$slider-vertical-width: 10px !default;
$slider-border-radius-handle: 4px !default;
$slider-border: 1px solid $grey-cc !default;
$slider-btn-top: 0 !default;
$slider-btn-after-height: 0 !default;
$slider-btn-after-width: 0 !default;
$slider-btn-after-padding: 0 !default;
$slider-btn-margin-right: 2px !default;
$slider-btn-margin-top: -1.5px !default;
$slider-vertical-left: -4px !default;
$slider-button-font-size: 9px !default;
$slider-scale-font-family: $font-family !default;
$slider-scale-font-size: 10px !default;
$slider-mobile-scale-font-size: 12px !default;
$slider-disabled-handle-color: $grey-white !default;
$slider-disabled-handle-show: none !default;
$slider-button-border-color: $grey-light !default;
$slider-first-btn-margin: -.5px !default;
$slider-second-btn-margin: -4.5px !default;
$slider-button-size: 18px !default;
$slider-button-horizon-padding: 0 38px !default;
$slider-button-vertical-padding: 38px 0 !default;
$slider-scale-value-position-top: -16px !default;
$slider-scale-value-position-bottom: -16px !default;
$tick-after-left: 4px !default;
$largetick-before-left: 1px !default;
$tick-before-left: 19px !default;
$largetick-after-left: 19px !default;
$slider-scale-value-position-left: -36px !default;
$slider-scale-value-position-right: -36px !default;
$slider-scale-value-position-both-left: -18px !default;
$slider-scale-value-position-both-right: -74px !default;
$slider-vertical-btn-right: 0 !default;
$slider-horizon-prve-btn-left: 0 !default;
$slider-horizon-next-btn-left: 0 !default;
$slider-vertical-prve-btn-left: -1px !default;
$slider-vertical-next-btn-left: 0 !default;
$slider-handle-start-top: calc(50% - 8px) !default;
$slider-handle-start-left: calc(50% - 8px) !default;
$slider-wrap-height: 26px !default;
$slider-wrap-width: 26px !default;
$slider-center-align: -5px !default;
$slider-btn-center-align: -9px !default;
$tick-both-top: -3px !default;
$tick-both-left: 3px !default;
$largetick-both-top: 0 !default;
$largetick-both-left: 0 !default;
$slider-range-height: $slider-container-height - 2px !default;
$slider-range-width: $slider-vertical-width - 2px !default;
$slider-range-border-radius: $slider-border-radius - 1px !default;
$slider-first-btn-font-size: 6px !default;
$slider-first-btn-height: 24px !default;
$slider-first-btn-line-height: 20px !default;
$slider-second-btn-margin-right: 0 !default;
$slider-second-btn-font-size: 6px !default;
$slider-second-btn-height: 24px !default;
$slider-second-btn-line-height: 20px !default;
$slider-button-hover-transform: 0 !default;
$slider-cursor: pointer !default;
$slider-handle-hover-cursor: pointer !default;
$slider-handle-active-cursor: pointer !default;
$slider-scale-top: 16px !default;
$slider-scale-right: -15px !default;
$slider-track-border-color: $grey-99 !default;
$slider-tab-background: $grey-e6 !default;
$slider-handle-start-background: $grey-cc !default;
$slider-tab-border-color: $brand-primary !default;
$slider-handle-active-bg-color: $grey-e6 !default;
$slider-handle-active-border-color: $grey-cc !default;
$slider-limit-bar-horizontal-height: 8px !default;
$slider-limit-bar-top: calc(50% - 4px) !default;
$slider-limit-bar-vertical-width: 8px !default;
$slider-limit-bar-left: calc(50% - 4px) !default;
$slider-limit-bar-color: rgba($grey-base, .25) !default;
$slider-tick-font-color: $grey-light-font !default;
$slider-tab-active-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) !default;

//enddefault
//dimensions
$slider-button-hleft-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAolBMVEUAAAD////////////////////////+/v7////+/v7////+/v7////+/v7////////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7///+y6E2hAAAANXRSTlMABAgMEBQYHCAkKCwwNEBESExUWFxkaGx0fICDh4ubn6Orr7O3u7/Hy8/T19vf4+fr7/P3+0e6nekAAAEFSURBVHjalZXJVgJBEASjnXHAEUQURZBFFAfZt+H/f82jedCXVpyjD1mvs4q/aR4uP1QJR7YUf1tgmYl/amEZXIRHLF31X7GUJ/E/fOB8I/46w5Hm4h9LLGPx63ssPQ08wNI+i/+GpdiLv/xH4IX4+waWqQa+w9LXwE9YOrX4ExzxCqzE3xVY3oMVGGrgHpYH9UdYWlqBuQ9cbLUCOY5UaeCS4INbPMVO19A1wdBVIli0CXhG+uIZYsui7uDJ1/Li0MRTHuXFKouOakZ0VMPwqLqBUckfiWzuTU7wNnwmgtdnDPFyxy7ouQ3hBeW50RW4SMSXrOdFg/chfCg8V1/RcjR+PXbfOBx/sErjBl8AAAAASUVORK5CYII=');
$slider-button-hright-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAnFBMVEUAAAD////////////////////////+/v7////////+/v7////+/v7+/v7////////+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////uN4ajAAAAM3RSTlMABAgMEBQYHCAoLDA0ODxASExcYGRobHR8g4uTl5ufo6ert7u/w8fLz9fb3+Pn6+/z9/tbKk6UAAABBklEQVR42q2VyRKCAAxDQRBZVMAFcRdxVxD0///Nk2M8OCQz9tx3SJu0xrvWz09VXaO5rCMQN4cgOgUQB5Mg+g8glgZRoydUwhALAB4hAZg7IEqXIJwrECeLIIIKiIyRMUDhKUNMkYgZ4Vv0iM945AzExSYID4XnjEci9MiMEZ6i8CFDYDhqKhwnIAomHO5XOFoEEaLwFSNjjMInDLHEcESMR/ZA3D0mHDcgzhYBFBrQOqJtPWLbouhUjF6Mi9s09/uVdj7sC5rPbd5ZjvYmTuBMHNBQHFC31gbkFNqAzIN4wVfij0ikL6RH2S2lT6qfowwd0fv/SY2xfy6/BS0C17b42oLfjS/tEHrYzreszwAAAABJRU5ErkJggg==');
$slider-button-vdown-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAApVBMVEUAAAD////////////////////+/v7////+/v7////+/v7////+/v7+/v7////////+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////Ss6t3AAAANnRSTlMABAwQFBgcICQoLDA0OEBESExcYGRobHR8gIOHi4+Tl5ujq7O3u7/Dx8vP09fb3+Pn6+/z9/vRpbpFAAABHklEQVR4Ae3TW1PCMBAF4LOFgsj9ooCichcFoVBy/v9P0xGndktS8uT4wPeYmZPZnZPgf7h6EMCfjMF5Ad7CFUFuKvBUj0iQjNvw0jM8BcghLpMXMglwFuCCcMl0gJsb5KrtqAM8tJCje2Q2QDOAizwxAf6aBrAqLmgPcF2GRXVLV4D7Js50YqbBMM30ockjlRiNiMpELVKYU9lWgdIblfcSErcfVBZFfAkmVKIGfrRjKiPBST+zyB2+DakcO0g091TGAgRTKrsaUsprKq9h9mQZQjm7b0/lWZA1MHQyPVi0DnSI6rCqbGi1CuEQzGgxFrgNmWXu4WYp99BAPv18dFsOhblqy4OMdFt51Cc7duGttvMYXwmXHuMrIrj6Q58aX4DtQxE2xQAAAABJRU5ErkJggg==');
$slider-button-vup-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAApVBMVEUAAAD////////////////////+/v7////+/v7////+/v7////+/v7+/v7////////+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7////+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7////4hhd5AAAANnRSTlMABAgMEBgcICQoLDA0OEBESExUXGBkbHR8gIOHi5Obn6Onq6+zt7u/x8vP09fb3+Pn6+/z9/tWLLgwAAABGElEQVR4Ae3UyXLyMBAE4NYvzPJDDARCyMKShbBAgo1wv/+jhSRVqhojqeRDqnLgu/nQh3GPBhd/mZ7PNSpobMhNA9HSjCd5F5FGBb8Vt4ihprRiBklWtGIG6WQU9i0EDY8sMX34qQkdxvBJlnR61nBqf9Bj24TDwNDr0EOZeqRg7PTuDmtvFHat8v+VHf5/p7ColRuUHV4bCg8KJ2pGIU/xQ91TMAO5hVYxwhf9SmHfhtXNKcz+Aa0dhWVSeknCug5DYaIg6CcKGcTncYgzYzkIRLwDh97BF1glcGpu3YGpgod+cQSKGwTcnQWyKwT1jQys6wizfcE2GGY3AnZHwuzOgcxShImtRuTRte8G1c56bYGKFC5+wyfN5oD6Q24erwAAAABJRU5ErkJggg==');
$slider-scale-tick-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNYtmzZfwAG2gLyNpL4dgAAAABJRU5ErkJggg==');

$slider-vertical-btn-padding: 34px 0 !default;
$slider-vertical-button-margin-right: -9px !default;
$slider-track-normal-border-radius: 4px !default;
$slider-vertical-range-padding: 38px 0 !default;

$slider-tooltip-wrap-popup-font-size: 11px !default;
$slider-tooltip-wrap-popup-line-height: 16px !default;
$slider-button-icon-size: 17px !default;
$slider-ver-hori-button-border-radius: 12px !default;
$slider-vertical-horizontal-button-icon-size: 14px !default;
$slider-horizontal-slider-button-margin-top: -12px !default;
$slider-horizontal-button-radius: 12px !default;
$slider-horizontal-button-icon-size: 22px !default;
$slider-track-border-radius: 6px !default;
$slider-first-second-button-margin-top: -14px !default;
$slider-button-margin-right: -15px !default;
$slider-after-radius: 50% !default;
$slider-button-icon-before-icon-size: 18px !default;
$slider-first-second-button-font-weight: 600 !default;
$slider-zero-padding-margin: 0 !default;
$slider-scale-range-height: 6px !default;
$slider-range-width: 6px !default;
$slider-track-width: 4px !default;
$slider-handle-mobile-margin-left: -9px !default;
$slider-handle-mobile-handle-top: calc(50% - 9px) !default;
$slider-vertical-handle-left: calc(50% - 9px);
$slider-vertical-handle-margin-bottom: -9px !default;
$slider-handle-margin-left: -8px !default;
$slider-handle-slide-top: calc(50% - 8px);
$slider-range-top: calc(50% - 4px);
$slider-button-icon-font-size: 17px !default;
$slider-slider-top: calc(50% - 16px);
$slider-track-top: calc(50% - 4px);
$slider-vertical-slider-left: calc(50% - 16px);
$scale-before-v-scale-right: 9px !default;
$slider-tick-before-top: -18px !default;
$slider-tick-before-bottom: -20px !default;
$slider-tip-content-padding: 0 8px !default;
$slider-tip-content-top: calc(50% - 10px);
$slider-tip-content-left: calc(50% - 36px);
$slider-zero-radius: 0% !default;
$slider-half-radius: 50% !default;
$slider-active-tooltip-content-top: calc(50% - 10px);
$slider-active-tooltip-content-left: calc(50% - 16px);
$slider-nrml-handle-left: calc(50% - 8px);
$slider-ev-scale-left: calc(50% - 14px);
$slider-full-height: 100% !default;
$slider-ev-scale-margin-top: -2px !default;
$slider-scale-both-top: 15px !default;
$slider-tick-value-before-right: 17px !default;
$slider-tick-value-before-left: 19px !default;
$slider-tooltip-wrap-border-radius: 8px !default;
$slider-zero-border: 0 !default;
$slider-nrml-track-top: calc(50% - 2px);
$slider-full-radius: 50% !default;

@mixin position($position, $top, $left) {
  position: $position;
  top: $top;
  left: $left;
}

@mixin size($height, $width) {
  height: $height;
  width: $width;
}

@mixin tick-position($position) {
  @if ($skin-name == 'material' or $skin-name == 'material-dark') {
    background-position-x: $position;
  }
  @else {
    background-position: $position center;
  }
}

@mixin tick-background-position($position) {
  @if ($skin-name != 'material' and $skin-name != 'material-dark') {
    background-position: $position center;
  }
  @if ($skin-name == 'material' or $skin-name == 'material-dark') {
    background-position-x: $position;
  }
}

@mixin alignment($size, $pos, $type) {
  @if $type == 'horizontal' {
    height: $size;
    top: $pos;
  }
  @else {
    width: $size;
    left: $pos;
  }
}

@mixin handle-transform($ms-transform, $transform) {
  /* stylelint-disable */
  -ms-transform: $ms-transform;
  -webkit-transform: $ms-transform;
  transform: $transform;
  /* stylelint-enable */
}

@mixin cursor-grabbing {
  /* stylelint-disable */
  cursor: -webkit-grabbing;
  cursor: grabbing;
  /* stylelint-enable */
}

@mixin cursor-grab {
  /* stylelint-disable */
  cursor: -webkit-grab;
  cursor: grab;
  /* stylelint-enable */
}

@mixin button-style($bg-image, $size, $top, $left) {
  .e-button-icon {
    background-image: $bg-image;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    @include size($size, $size);
    @include position(absolute, $top, $left);
  }
}

@mixin button-position($left, $right, $margin-top, $top) {
  left: $left;
  right: $right;
  margin-top: $margin-top;
  top: $top;
}

@mixin v-button-position($top, $bottom, $margin-right, $right) {
  top: $top;
  bottom: $bottom;
  margin-right: $margin-right;
  right: $right;
}

@mixin button-icon($color, $content, $font-size) {
  .e-button-icon {
    font-family: 'e-icons';

    &::before {
      color: $color;
      content: $content;
      font-size: $font-size;
    }
  }
}

@mixin bg-border($bg-color, $border) {
  background-color: $bg-color;
  border-color: $border;
}

@mixin slider-transform($rotation) {
  transform: rotate($rotation);
  .e-tip-content {
    transform: rotate(-$rotation);
  }
}

@include export-module('slider-layout') {
  /* stylelint-disable property-no-vendor-prefix */

  .e-control-wrapper.e-slider-container {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    display: inline-block;
    height: $slider-wrap-height;
    line-height: normal;
    outline: none;
    position: relative;
    user-select: none;

    &.e-material-slider .e-slider .e-handle {
      &.e-material-handle {
        cursor: default;
        transition: transform .4s cubic-bezier(.25, .8, .25, 1);
        z-index: 3;
      }

      &.e-tab-handle,
      &.e-handle-start.e-tab-handle {
        &::after {
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            background-color: transparent;
          }
        }
      }
    }

    &:hover,
    &:active {
      .e-scale .e-tick {
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          visibility: visible;
        }
      }
    }

    &::after {
      content: $skin-name;
      display: none;
    }

    .e-slider {
      box-sizing: border-box;
      cursor: $slider-cursor;
      display: block;
      outline: 0 none;
      padding: $slider-zero-padding-margin;
      position: relative;

      .e-handle {
        border-radius: $slider-border-radius-handle;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'fluent2') {
          box-shadow: $slider-handle-box-shadow;
        }
        box-sizing: border-box;
        cursor: $slider-handle-hover-cursor;
        @include size($slider-handle-height, $slider-handle-width);
        outline: none;
        position: absolute;
        touch-action: none;
        transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, transform 300ms ease-out;
        z-index: 10;

        &.e-large-thumb-size {
          transform: scale(1.5);
        }

        &.e-handle-active {
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            @include bg-border($slider-active-handle-bg-color, $slider-hover-handle-color);
          }
          @else if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
            @include bg-border($slider-handle-active-bg-color, $slider-handle-active-border-color);
          }
          @if ($skin-name == 'bootstrap4') {
            box-shadow: $slider-handle-active-box-shadow;
          }
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            @include cursor-grabbing;
          }
        }

        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          @include cursor-grab;

          &.e-handle-start {
            background-color: $slider-handle-start-background;
            border: $slider-start-handle-border-size;
          }

          &::after {
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            @include handle-transform(scale(0), scale(0));
            border: 0 solid;
            border-radius: $slider-after-radius;
            box-sizing: content-box;
            content: '';
            @include size(32px, 32px);
            @include position($slider-handle-after-position, calc(50% - 16px), calc(50% - 16px));
            opacity: .26;
            transition: transform .4s cubic-bezier(.25, .8, .25, 1);
            z-index: -1;
          }
        }

        &.e-tab-handle {
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            &.e-handle-start::after {
              background-color: $slider-tab-background;
              opacity: .38;
            }

            &::after {
              @include handle-transform(scale(1), scale(1));
              background-color: $slider-color;
            }
          }

          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
            border-color: $slider-tab-border-color;
          }

          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
            @include bg-border($slider-tab-background, $slider-tab-border-color);
            box-shadow: $slider-tab-active-box-shadow;
          }
          @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
            @if $skin-name == 'Material3' {
              background: $slider-tab-background;
            }
            @else {
              background-color: $slider-tab-background;
              @if ($skin-name != 'tailwind3') {
                border: $slider-tab-border;
              }
            }
            box-shadow: $slider-tab-active-box-shadow;
          }
        }
      }

      .e-tab-track {
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
          background-color: $slider-tab-track-color;
        }
      }
    }

    &.e-rtl {
      &.e-horizontal {
        .e-slider {
          .e-handle {
            margin: $rtl-slider-h-handle-margin;
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              top: calc(50% - 8px);
            }
            @else if ($skin-name == 'material' or $skin-name == 'material-dark') {
              top: calc(50% - 6px);
            }
          }
        }

        .e-scale {
          &.e-h-scale {
            .e-tick.e-first-tick {
              @include tick-position(right);
              @if ($skin-name != 'material' and $skin-name != 'material-dark') {
                left: $slider-zero-padding-margin;
              }
            }

            .e-tick.e-last-tick {
              @include tick-position(left);
            }
          }
        }

        .e-slider-button {
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
            margin-top: -8px;
          }
          @else if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
            margin-top: -7px;
          }
          @else if ($skin-name == 'tailwind'  or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
            margin-top: $slider-button-margin-top;

            .e-button-icon::before {
              font-size: $slider-button-icon-before-icon-size;
            }
          }
        }
      }

      &.e-vertical {
        direction: ltr;
      }
    }

    &.e-disabled {
      @if ($skin-name == 'tailwind') {
        opacity: 1;
      }
      @if ($theme-name == 'fluent2') {
        opacity: 1;
      }
      @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        opacity: .5;
      }
      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        &.e-material-slider .e-slider .e-handle.e-handle-first {
          background-color: $grey-600;
        }

        &:hover {
          .e-scale .e-tick {
            visibility: hidden;
          }
        }

        .e-slider {
          .e-range {
            background: $slider-disabled-bg-color;
          }

          .e-handle {
            background: $grey-600;
            transform: scale(.5) !important;/* stylelint-disable-line declaration-no-important */

            &.e-handle-first {
              background-color: $grey-600;
              border: 0;
            }

            &::after {
              @include handle-transform(scale(0), scale(1));
              background: transparent;
              border: 7px solid $slider-material-tooltip-content-color;
              border-radius: $slider-after-radius;
              box-sizing: border-box;
              content: '';
              @include size(26px, 26px);
              @include position(absolute, calc(50% - 13px), calc(50% - 13px));
              opacity: 1;
              transition: none;
              z-index: -1;
            }
          }
        }
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        .e-slider {
          .e-range {
            background: $slider-disabled-bg-color;
          }

          .e-handle {
            border-color: $slider-disabled-bg-color;
          }
        }
      }

      .e-btn {
        cursor: default;
      }

      .e-slider {
        .e-handle {
          cursor: default;

          &.e-handle-disable {
            display: $slider-disabled-handle-show;
          }
        }
      }

      @if ($skin-name == 'bootstrap4') {
        .e-slider {
          .e-range {
            background-color: $slider-disabled-range-color;
          }

          .e-handle {
            @include bg-border($slider-disabled-handle-color, $slider-disabled-handle-color);
          }

          .e-slider-track {
            background-color: $slider-disabled-track-color;
          }
        }

        .e-scale .e-tick {
          .e-tick-value {
            color: $slider-button-bg-color;
          }
        }

        .e-slider-button {
          @include bg-border($slider-disabled-bg-color, $white);
        }
      }
    }

    @if ($skin-name == 'bootstrap4') {
      &:not(.e-disabled) {
        .e-slider-button {
          &:hover {
            @include bg-border(color.adjust($gray-600, $lightness: -7.5%), color.adjust($gray-600, $lightness: -10%));
          }

          &:active {
            @include bg-border(color.adjust($gray-600, $lightness: -10%), color.adjust($gray-600, $lightness: -12%));
          }
        }
      }
    }

    &.e-horizontal {
      @include size(48px, 100%);
      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        .e-first-button {
          @include button-position(0, null, $slider-btn-center-align, 50%);
          @include button-style($slider-button-hleft-bg-image, 7px, calc(50% - 3.6px), calc(50% - 4.6px));
        }

        .e-second-button {
          @include button-position(null, 0, $slider-btn-center-align, 50%);
          @include button-style($slider-button-hright-bg-image, 7px, calc(50% - 3.6px), calc(50% - 2.6px));
        }
      }
      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
        .e-first-button {
          @include button-position(0, null, $slider-btn-center-align, 50%);

          @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name !='tailwind3') {
            @include button-style($slider-button-hleft-bg-image, 8px, calc(50% - 4px), calc(50% - 5px));
          }
          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
            @include button-icon($slider-button-icon-bg-color,'\e738', 17px);
            @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
              @include button-icon($slider-button-icon-bg-color,'\e738', 14px);
            }
            @else if ($skin-name == 'Material3') {
              @include button-icon($slider-button-icon-bg-color,'\e738', 16px);
            }
          }
          @else {
            .e-button-icon::before {
              font-size: $slider-button-icon-font-size;
              @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
                color: $slider-button-icon-bg-color;
                content: '\e765';
              }
              @else {
                content: '\e761';
              }
            }
          }
        }

        .e-second-button {
          @include button-position(null, 0, $slider-btn-center-align, 50%);

          @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            @include button-style($slider-button-hright-bg-image, 8px, calc(50% - 4px), calc(50% - 3px));
          }
          @else if($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
            @include button-icon($slider-button-icon-bg-color, '\e75c', 17px);
            @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
              @include button-icon($slider-button-icon-bg-color, '\e75c', 14px);
            }
            @else if ($skin-name == 'Material3') {
              @include button-icon($slider-button-icon-bg-color, '\e75c', 16px);
            }
          }
          @else {
            .e-button-icon::before {
              font-size: $slider-button-icon-before-icon-size;
              @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
                color: $slider-button-icon-bg-color;
                content: '\e748';
              }
              @else {
                content: '\e707';
              }
            }
          }
        }
      }
      @else {
        .e-first-button {
          @include button-position(0, null, $slider-btn-center-align, 50%);
          @include button-icon($slider-button-icon-color, '\e829', 8px);
          .e-button-icon::before {
            font-weight: $slider-first-second-button-font-weight;
            @include position(absolute, calc(50% - 4px), calc(50% - 5px));
          }
        }

        .e-second-button {
          @include button-position(null, 0, $slider-btn-center-align, 50%);
          @include button-icon($slider-button-icon-color, '\e830', 8px);
          .e-button-icon::before {
            font-weight: $slider-first-second-button-font-weight;
            @include position(absolute, calc(50% - 4px), calc(50% - 3px));
          }
        }
      }

      &.e-slider-btn {
        padding: $slider-button-horizon-padding;
      }

      .e-slider {
        @include size(32px, 100%);
        position: relative;
        top: $slider-slider-top;
      }

      .e-slider-track {
        @include size($slider-container-height, 100%);
        left: $slider-zero-padding-margin;
        position: absolute;
        overflow: hidden;
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          background: $slider-handle-start-border-color;
          top: calc(50% - 1px);
        }
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
          background: $slider-track-color;
          top: $slider-nrml-track-top;
          @if $skin-name == 'fluent2' or $skin-name == 'FluentUI' {
            border-radius: $slider-radius;
          }
        }
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
          background: $slider-track-color;
          border-radius: $slider-track-normal-border-radius;
          top: $slider-track-top;
        }
        @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          top: $slider-nrml-track-top;
        }
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
          background: $slider-handle-start-border-color;
          border: 1px solid $slider-track-border-color;
          border-radius: $slider-track-normal-border-radius;
          top: calc(50% - 5px);
        }
        @if $skin-name == 'bootstrap4' {
          background: $slider-handle-start-border-color;
          border-radius: $slider-track-normal-border-radius;
        }
      }

      .e-handle {
        margin-left: $slider-handle-margin-left;
        top: $slider-handle-slide-top;
      }

      &.e-scale-both {
        .e-handle {
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            margin-left: -8px;
            top: calc(50% - 7px);
          }
        }

        .e-range {
          height: $slider-range-height;
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            top: calc(50% - 2px);
          }
        }
      }

      .e-range {
        height: $slider-range-height;
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          top: calc(50% - 1px);
        }
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or or $skin-name == 'fluent2') {
          top: $slider-nrml-track-top;
        }
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          top: $slider-nrml-track-top;
        }
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'Material3') {
          top: $slider-range-top;
        }
      }

      .e-limits {
        background-color: $slider-limit-bar-color;
        position: absolute;
        @include alignment($slider-limit-bar-horizontal-height, $slider-limit-bar-top, 'horizontal');
        @if ($skin-name == 'bootstrap5' or $skin-name == 'fluent2' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3') {
          border-radius: $slider-limit-border-radius;
        }
      }
    }

    &.e-vertical {
      @include size(inherit, 48px);
      padding: $slider-vertical-range-padding;

      .e-slider {
        @include size(100%, 32px);
        left: $slider-vertical-slider-left;
        position: relative;
      }

      .e-slider-track {
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          background: $slider-track-color;
        }
        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
          background: $slider-handle-start-border-color;
        }
        bottom: $slider-zero-padding-margin;
        height: $slider-full-height;
        position: absolute;
        overflow: hidden;
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          @if ($skin-name == 'tailwind3') {
            left: $slider-range-top;
          }
          @else {
            left: $slider-track-range-top;
          }
          width: $slider-track-width;
        }
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          @include alignment(8px, calc(50% - 4px), 'vertical');
        }
        @else if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
          border: 1px solid $slider-track-border-color;
          border-radius: 3px;
          @include alignment(10px, calc(50% - 5px), 'vertical');
        }
        @else if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          @include alignment(6px, calc(50% - 3px), 'vertical');
        }
        @else if ($skin-name == 'material' or $skin-name == 'material-dark') {
          @include alignment(2px, calc(50% - 1px), 'vertical');
        }
        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          border-radius: 4px;
        }
        @else if $skin-name == 'tailwind3' {
          border-radius: $slider-track-normal-border-radius;
        }
        @else if ($skin-name == 'bootstrap4') {
          border-radius: 6px;
        }
        @else if ($skin-name == 'FluentUI') {
          border-radius: 2px;
        }
        @else if ($skin-name == 'bootstrap5.3') {
          border-radius: $slider-ver-track-border-radius;
        }
      }

      &.e-small-size {
        &.e-slider-btn {
          height: $slider-full-height;
          padding: $slider-button-vertical-padding;

          .e-slider {
            @include size(100%, $slider-height);
          }
        }
      }

      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        .e-first-button {
          @include v-button-position(null, 0, $slider-btn-center-align, 50%);
          @include button-style($slider-button-vdown-bg-image, 8px, calc(50% - 2.7px), calc(50% - 3.8px));
        }

        .e-second-button {
          @include v-button-position(0, null, $slider-btn-center-align, 50%);
          @include button-style($slider-button-vup-bg-image, 8px, calc(50% - 4.7px), calc(50% - 3.8px));
        }
      }
      @else if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light') {
        .e-first-button {
          @include v-button-position(null, 0, $slider-btn-center-align, 50%);
          @if $skin-name == 'Material3' {
            margin-right: $slider-btn-vertical-center-align;
          }

          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            @include button-style($slider-button-vdown-bg-image, 8px, calc(50% - 3.6px), calc(50% - 4px));
          }
          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
            @include button-icon($slider-button-icon-bg-color, '\e734', 14px);
            @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
              @include button-icon($slider-button-icon-bg-color, '\e734', 18px);
            }
            @else if ($skin-name == 'Material3') {
              @include button-icon($slider-button-icon-bg-color, '\e734', 16px);
            }
            .e-button-icon::before {
              @if $skin-name == 'fluent2' {
                @include position(absolute, 3px, 4px);
              }
            }
          }
          @else {
            .e-button-icon::before {
              font-size: $slider-button-icon-before-icon-size;
              content: '\e729';
              @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
                color: $slider-button-icon-bg-color;
              }
            }
          }
        }

        .e-second-button {
          @include v-button-position(0, null, $slider-btn-center-align, 50%);
          @if $skin-name == 'Material3' {
            margin-right: $slider-btn-vertical-center-align;
          }
          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
            @include button-style($slider-button-vup-bg-image, 8px, calc(50% - 4.5px), calc(50% - 4px));
          }
          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
            @include button-icon($slider-button-icon-bg-color, '\e7dd', 14px);
            @if ($skin-name == 'bootstrap5') {
              @include button-icon($slider-button-icon-bg-color, '\e7dd', 18px);
            }
            @if ($skin-name == 'bootstrap5.3') {
              @include button-icon($slider-button-icon-bg-color, '\e7dd', 18px);
            }
            @else if ($skin-name == 'Material3') {
              @include button-icon($slider-button-icon-bg-color, '\e7dd', 16px);
            }
            .e-button-icon::before {
              @if $skin-name == 'fluent2' {
                @include position(absolute, 3px, 4px);
              }
            }
          }
          @else {
            .e-button-icon::before {
              font-size: $slider-button-icon-before-icon-size;
              @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
                color: $slider-button-icon-bg-color;
                content: '\e776';
              }
              @else {
                content: '\e7a0';
              }
            }
          }
        }
      }
      @else {
        .e-first-button {
          @include v-button-position(null, 0, $slider-btn-center-align, 50%);
          @include button-icon($slider-button-icon-color, '\e829', 9px);

          .e-button-icon::before {
            font-weight: $slider-first-second-button-font-weight;
            @include position(absolute, calc(50% - 4px), calc(50% - 4.15px));
            transform: rotate(-90deg);
          }
        }

        .e-second-button {
          @include v-button-position(0, null, $slider-btn-center-align, 50%);
          @include button-icon($slider-button-icon-color, '\e829', 9px);

          .e-button-icon::before {
            font-weight: $slider-first-second-button-font-weight;
            @include position(absolute, calc(50% - 5.8px), calc(50% - 5.5px));
            transform: rotate(90deg);
          }
        }
      }

      &.e-scale-both {
        .e-slider {
          .e-handle {
            margin-bottom: $slider-v-handle-margin;
            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              left: calc(50% - 9px);
            }
          }
        }
      }

      .e-slider {
        .e-handle {
          margin-bottom: $slider-v-handle-margin;
          left: $slider-nrml-handle-left;
        }

        .e-range {
          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
            @include alignment(8px, calc(50% - 4px), 'vertical');
          }
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
            @include alignment(6px, calc(50% - 3px), 'vertical');
          }
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
            @include alignment(4px, calc(50% - 2px), 'vertical');
          }
          @if ($skin-name == 'tailwind') {
            @include alignment(4px, calc(50%), 'vertical');
          }
          @if ($skin-name == 'tailwind3') {
            @include alignment(4px, calc(50% - 4px), 'vertical');
          }
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            @include alignment(6px, calc(50% - 3px), 'vertical');
          }
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            @include alignment(2px, calc(50% - 1px), 'vertical');
          }
        }

        .e-limits {
          background-color: $slider-limit-bar-color;
          position: absolute;
          @include alignment($slider-limit-bar-vertical-width, $slider-limit-bar-left, 'vertical');
          @if ($skin-name == 'bootstrap5' or $skin-name == 'fluent2' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3') {
            border-radius: $slider-limit-border-radius;
          }
        }
      }
    }

    .e-range {
      border-radius: $slider-range-border-radius;
      position: absolute;
      transition: left 300ms ease-out, right 300ms ease-out, bottom 300ms ease-out, width 300ms ease-out, height 300ms ease-out;

      &.e-drag-horizontal,
      &.e-drag-vertical {
        cursor: pointer;
      }
    }

    .e-tick-before {
      &.e-scale {
        &.e-h-scale {
          .e-tick {
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
              background-position: bottom;
            }
            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($tick-after-height, $tick-after-top, 'horizontal');
            }
            @else {
              background-position: bottom;
              @include alignment(50%, 1px, 'horizontal');
            }
          }

          .e-large {
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
            }
            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($largetick-before-height, $largetick-before-top, 'horizontal');
            }
          }
        }

        &.e-v-scale {
          .e-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($tick-after-height, $tick-after-left, 'vertical');
            }
            @else {
              background-position: right;
              @include alignment(50%, 1px, 'vertical');
            }
          }

          .e-large {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($largetick-before-height, $largetick-before-left, 'vertical');
            }
          }
        }
      }
    }

    .e-tick-after {
      &.e-scale {
        &.e-h-scale {
          .e-tick {
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
              background-position-x: center;
            }
            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($tick-before-height, $tick-before-top, 'horizontal');
            }
            @else {
              background-position-x: center;
              @include alignment(50%, calc(50% - 1px), 'horizontal');
            }
          }

          .e-large {
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
            }
            @else if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($largetick-after-height, $largetick-after-top, 'horizontal');
            }
          }
        }

        &.e-v-scale {
          .e-tick {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($tick-before-height, $tick-before-left, 'vertical');
            }
            @else {
              background-position: left;
              @include alignment(50%, calc(50% - 1px), 'vertical');
            }
          }

          .e-large {
            @if ($skin-name != 'material' and $skin-name != 'material-dark') {
              @include alignment($largetick-after-height, $largetick-after-left, 'vertical');
            }
          }
        }
      }
    }

    &.e-scale-before {
      .e-scale {
        &.e-v-scale {
          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
            right: $scale-before-v-scale-right;
          }
        }
      }
    }

    &.e-scale-after {
      .e-scale {
        &.e-v-scale {
          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
            right: $scale-before-v-scale-right;
          }
        }
      }
    }

    .e-tick-both {
      &.e-scale {
        &.e-h-scale {
          .e-tick {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              @include alignment(calc(100% - 6px), -11px, 'horizontal');
            }
            @else if ($skin-name == 'bootstrap4') {
              @include alignment(16px, -8px, 'horizontal');
            }
            @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
              @include alignment(18px, -11px, 'horizontal');
            }
            @else if ($skin-name == 'Material3') {
              @include alignment(18px, -13px, 'horizontal');
            }
            @else if ($skin-name == 'tailwind') {
              @include alignment(16px, -16px, 'horizontal');
            }
            @else if ($skin-name == 'tailwind3') {
              @include alignment(16px, -12px, 'horizontal');
            }
            @else if ($skin-name == 'FluentUI') {
              @include alignment(30px, -17px, 'horizontal');
            }
            @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
              @include alignment(calc(100% - 3px), -12.5px, 'horizontal');
            }
            @else if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              @include alignment(calc(100% - 6px), -12px, 'horizontal');
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position: center;
              height: 12px;
            }
          }

          .e-large {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              @include alignment(100%, -8px, 'horizontal');
            }
            @else if ($skin-name == 'bootstrap4') {
              @include alignment(22px, -5px, 'horizontal');
            }
            @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
              @include alignment(26px, -7px, 'horizontal');
            }
            @else if ($skin-name == 'tailwind') {
              @include alignment(24px, -12px, 'horizontal');
            }
            @else if ($skin-name == 'tailwind3') {
              @include alignment(24px, -9px, 'horizontal');
            }
            @else if ($skin-name == 'FluentUI') {
              @include alignment(38px, -13px, 'horizontal');
            }
            @else if ($skin-name == 'Material3') {
              @include alignment(26px, -10px, 'horizontal');
            }
            @else if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              @include alignment(calc(100% + 3px), -9px, 'horizontal');
            }
            @else if ($skin-name == 'material-dark' or $skin-name == 'material') {
              height: 20px;
              top: 4px;
            }
          }
        }

        &.e-v-scale {
          .e-tick {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              background-position: center;
              width: 100%;
            }
            @if ($skin-name == 'bootstrap4') {
              background-position: center;
              @include alignment(calc(100% - 12px), 6px, 'vertical');
            }
            @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3') {
              background-position: center;
              @include alignment(18px, 5px, 'vertical');
            }
            @if ($skin-name == 'tailwind') {
              @include alignment(16px, 6px, 'vertical');
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position: center;
              width: 100%;
            }
            @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
              @include alignment(calc(100% - 2px), 0, 'vertical');
            }
            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              @include alignment(calc(100% - 6px), 2px, 'vertical');
            }
          }

          .e-large {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              width: 100%;
            }
            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
              @include alignment(calc(100% - 6px), 3px, 'vertical');
            }
            @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'bootstrap5.3') {
              @include alignment(26px, 1px, 'vertical');
            }
            @if ($skin-name == 'tailwind') {
              @include alignment(24px, 3px, 'vertical');
            }
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              width: 100%;
            }
            @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
              @include alignment(calc(100% + 3px), -2px, 'vertical');
            }
          }
        }
      }
    }

    .e-scale {
      box-sizing: content-box;
      font-family: $slider-scale-font-family;
      @include size(28px, 100%);
      @if $skin-name == 'fluent2' {
        @include size(20px, 100%);
      }
      line-height: normal;
      list-style: none outside none;
      margin: $slider-zero-padding-margin;
      outline: 0 none;
      padding: $slider-zero-padding-margin;
      position: absolute;
      top: $slider-scale-top;
      z-index: 1;
      @if ($skin-name != 'material' and $skin-name != 'material-dark' and $skin-name != 'fluent2') {
        font-size: $slider-scale-font-size;
        margin-top: $slider-center-align;
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        z-index: -1;

        &.e-tick-both {
          top: 12px;
        }
      }

      .e-tick {
        @if ($theme-name == 'bootstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark') {
          background-image: $slider-scale-tick-image-dark;
        }
        @else {
          background-image: $slider-scale-tick-image;
        }
        cursor: $slider-cursor;
        outline: none;
        position: relative;
        user-select: none;
        @if ($skin-name != 'material' and $skin-name != 'material-dark') {
          background-position: center center;
        }

        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'material-dark') {
          &.e-large {
            @if ($skin-name != 'bootstrap4') {
              background-image: $slider-scale-tick-image-dark;
            }
            @else {
              background-image: $slider-small-scale-tick-image;
            }
          }
        }

        .e-tick-value {
          color: $slider-tick-font-color;
          font-family: $slider-scale-font-family;
          font-size: $slider-scale-font-size;
          outline: none;
          position: absolute;
          user-select: none;
          white-space: nowrap;
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
            line-height: $slider-tick-value-line-height;
          }
          @if ($skin-name == 'tailwind') {
            line-height: 18px;
          }
        }
      }

      &.e-v-scale {
        @include size(100%, 28px);
        left: $slider-ev-scale-left;
        top: $slider-zero-padding-margin;
        @if $skin-name == 'fluent2' {
          @include alignment(20px, calc(50% - 10px), 'vertical');
        }
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          margin-top: $slider-ev-scale-margin-top;
        }

        .e-tick {
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            background-repeat: no-repeat;
          }
          @else {
            background-repeat: repeat-x;
          }

          &.e-first-tick {
            background-position-y: top;
          }

          &.e-last-tick {
            @if ($skin-name == 'material' or $skin-name == 'material-dark') {
              background-position-y: bottom;
            }
            @else {
              background-position-y: bottom;
              margin-top: 2px;
              @if ($skin-name == 'tailwind') {
                margin-top: 3px;
              }
            }
          }
        }
      }

      &.e-h-scale {
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' ) {
          &.e-tick-after {
            top: 8px;
          }

          &.e-tick-before {
            top: 20px;
          }
        }

        @if ($skin-name == 'tailwind3') {
          &.e-tick-after {
            top: 18px;
          }

          &.e-tick-before {
            top: 22px;
          }
        }

        .e-tick {
          display: inline-block;
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            background-repeat: repeat-y;
          }

          @if ($skin-name != 'material' and $skin-name != 'material-dark') {
            background-repeat: repeat-y;
            @include alignment(100%, 0, 'horizontal');
          }

          .e-tick-value {
            &.e-tick-before,
            &.e-tick-both:first-child {
              top: $slider-tick-before-top;
            }

            &.e-tick-after,
            &.e-tick-both {
              bottom: $slider-tick-before-bottom;
            }
          }

          &.e-first-tick {
            @include tick-background-position(left);
          }

          &.e-last-tick {
            @include tick-background-position(right);
          }
        }
      }
    }

    .e-scale .e-tick {
      @if ($skin-name == 'material' or $skin-name == 'material-dark') {
        visibility: hidden;
      }

      .e-tick-value {
        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          visibility: visible;
        }
      }
    }

    &.e-horizontal {
      &.e-scale-both {
        .e-scale {
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
            top: 12px;
          }
          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
            top: $slider-scale-both-top;
          }
        }

        .e-slider-track {
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
            border-color: $slider-track-border-color;
            border-radius: 1px;
            border-style: solid;
            border-width: 5px 0;
            @include alignment(14px, calc(50% - 3px), 'horizontal');
            margin-top: -4px;
          }
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            border-color: $slider-track-border-color;
            border-radius: 4px;
            border-style: solid;
            border-width: 4px;
            @include alignment(14px, calc(50% - 6px), 'horizontal');
          }
        }
      }
    }

    &.e-vertical {
      &.e-scale-both {
        .e-scale {
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
            right: 12px;
          }
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            right: 11px;
          }
        }

        .e-slider-track {
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            border-color: $slider-track-border-color;
            border-radius: 1px;
            border-style: solid;
            border-width: 0 5px;
            margin-left: -7px;
            @include alignment(14px, calc(50% - 1px), 'vertical');
          }
        }

        .e-range {
          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
            margin-left: -1px;
          }
        }
      }
    }

    &.e-scale-both {
      &.e-vertical {
        &.e-small-size,
        .e-scale {
          &.e-h-scale {
            @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
              margin-left: -7px;
            }
          }
        }
      }
    }

    &.e-vertical {
      &.e-scale-both {
        .e-scale.e-v-scale {
          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4') {
            right: 10px;
          }
        }
      }
    }

    .e-scale.e-v-scale {
      @if ($skin-name == 'tailwind') {
        &.e-tick-after {
          left: calc(50% - 17px);
        }

        &.e-tick-before {
          left: calc(50% - 7px);
        }
      }

      .e-tick {
        .e-tick-value {
          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            &.e-tick-before {
              right: 26px;
            }

            &.e-tick-after {
              left: 27px;
            }

            &.e-tick-both {
              right: 41px;

              &:first-child {
                left: 39px;
              }
            }
          }
          @else {
            &.e-tick-before {
              right: $slider-tick-value-before-right;
            }

            &.e-tick-after {
              left: $slider-tick-value-before-left;
            }

            &.e-tick-both {
              @if $skin-name == 'bootstrap4' {
                right: 30px;
              }
              @else {
                right: 44px;
              }

              &:first-child {
                @if $skin-name == 'bootstrap4' {
                  left: 30px;
                }
                @else {
                  left: 42px;
                }
              }
            }
          }
        }
      }
    }
  }

  .e-slider-tooltip.e-tooltip-wrap.e-popup {
    @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
      background-color: $slider-handle-bg-color;
      border: $slider-zero-border;
      border-radius: $slider-tooltip-wrap-border-radius;
      @include cursor-grab;
      opacity: 1;

      &.e-popup.e-popup-close {
        display: block;
        opacity: 0;
      }

      &.e-material-tooltip-start {
        background-color: $slider-handle-border-color;

        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
          .e-arrow-tip-inner {
            color: $grey-black;
            opacity: 0;
          }
        }

        .e-arrow-tip-outer {
          &.e-tip-bottom {
            border-top-color: $slider-handle-border-color;
          }
          &.e-tip-top {
            border-bottom-color: $slider-handle-border-color;
          }
          &.e-tip-right {
            border-left-color: $slider-handle-border-color;
          }
          &.e-tip-left {
            border-right-color: $slider-handle-border-color;
          }
        }
      }

      &.e-tooltip-active {
        @include cursor-grabbing;
      }

      .e-arrow-tip {
        visibility: visible;
      }

      .e-tip-content {
        background-color: transparent;
        @include size(16px, 100%);
        overflow: hidden;
        padding: $slider-tip-content-padding;
        @if $skin-name != 'Material3' and $skin-name != 'Material3-dark' {
          text-align: center;
        }
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
          top: $slider-tip-content-mat-top;
          position: relative;
          line-height: $slider-tip-content-mat-line-height;
        }
        @else {
          top: $slider-tip-content-top;
          left: $slider-tip-content-left;
        }

        &.e-material-tooltip-show {
          color: $slider-material-tooltip-content-color;
        }

        &.e-material-tooltip-hide {
          color: transparent;
        }
      }

      .e-arrow-tip-inner {
        color: $slider-handle-bg-color;
      }

      .e-arrow-tip-outer {
        &.e-tip-bottom {
          border-top-color: $slider-handle-bg-color;
        }
        &.e-tip-top {
          border-bottom-color: $slider-handle-bg-color;
        }
        &.e-tip-right {
          border-left-color: $slider-handle-bg-color;
        }
        &.e-tip-left {
          border-right-color: $slider-handle-bg-color;
        }
      }

      &.e-tooltip-wrap.e-popup.e-material-default {
        background-color: $slider-handle-bg-color;
        border: $slider-zero-border;
        border-bottom-left-radius: $slider-half-radius;
        border-bottom-right-radius: $slider-zero-radius;
        border-top-left-radius: $slider-half-radius;
        border-top-right-radius: $slider-half-radius;
        @include cursor-grab;
        opacity: 1;

        &.e-material-tooltip-start {
          background-color: $slider-handle-border-color;
        }

        &.e-tooltip-active {
          @include cursor-grabbing;
        }

        .e-arrow-tip {
          visibility: hidden;
        }

        &.e-slider-horizontal-before {
          @include slider-transform(45deg);
        }

        &.e-slider-horizontal-after {
          @include slider-transform(225deg);
        }

        &.e-slider-vertical-before {
          @include slider-transform(-45deg);
        }

        &.e-slider-vertical-after {
          @include slider-transform(-225deg);
        }

        .e-tip-content {
          background-color: transparent;
          @include size(16px, 100%);
          overflow: hidden;
          padding: $slider-zero-padding-margin;
          text-align: center;
          @if $skin-name == 'material' or $skin-name == 'material-dark' {
            top: calc(50% - 8px);
          }
          @else {
            top: $slider-active-tooltip-content-top;
            left: $slider-active-tooltip-content-left;
          }

          &.e-material-tooltip-show {
            color: $slider-material-tooltip-content-color;
          }

          &.e-material-tooltip-hide {
            color: transparent;
          }
        }
      }
    }
    @else {
      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        background-color: $slider-active-handle-bg-color;
        border: 1px solid $slider-hover-handle-color;
      }

      .e-tip-content {
        padding: $slider-tooltip-padding;
        text-align: center;

        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          color: $slider-button-icon-color;
        }
      }
    }
  }

  .e-slider-horizantal-color {
    @include alignment(100%, 0, 'horizontal');
    position: absolute;
  }

  .e-slider-vertical-color {
    position: absolute;
    @include alignment(100%, -1px, 'vertical');
  }

  .e-slider-hover .e-scale .e-tick {
    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
      visibility: visible;
    }
  }
  /* stylelint-enable property-no-vendor-prefix */
}

@mixin button-size($size) {
  height: $size;
  width: $size;
}

@mixin handle-style($bg-color, $border-color) {
  background-color: $bg-color;
  border-color: $border-color;
}

@include export-module('slider-theme') {

  .e-control-wrapper.e-slider-container {
    @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
      &.e-material-slider .e-slider .e-handle.e-handle-first,
      &.e-material-slider .e-slider .e-handle.e-handle-second {
        background: transparent;
        border-color: transparent;
        @if $skin-name == 'Material3' or $skin-name == 'Material3-dark' {
          box-shadow: none;
        }
      }
    }

    .e-slider-button {
      background-color: $slider-button-bg-color;
      border: 1px solid $slider-button-border-color;
      box-sizing: border-box;
      cursor: pointer;
      outline: none;
      position: absolute;
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5'  or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'Material3') {
        @include button-size($slider-button-size);
      }
      @else {
        @include button-size(18px);
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        border-radius: $slider-slide-button-radius;
        box-shadow: $slider-button-shadow;
      }
      @else {
        border-radius: $slider-full-radius;
      }
      @if ($skin-name == 'Material3') {
        padding: 4px;
        border: none;
      }
      @else if $skin-name == 'fluent2' {
        padding: 4px;
      }
      @else if ($skin-name != 'Material3') {
        padding: 0;
      }
      @if ($skin-name == 'bootstrap4') {
        border: 0;
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        &:hover {
          border-color: $slider-range-bar-color;
        }

        &:hover,
        &:active {
          background-color: $slider-range-bar-color;

          .e-button-icon::before {
            color: $slider-button-icon-font-color;
          }
        }
      }

      @if ($skin-name == 'fluent2') {
        &:hover {
          background-color: $slider-button-hover-bg-color;
          border-color: $slider-button-hover-border-color;
          .e-button-icon::before {
            color: $slider-button-icon-hover-color;
          }
        }
        &:active {
          background-color: $slider-button-active-bg-color;
          border-color: $slider-button-active-border-color;
          .e-button-icon::before {
            color: $slider-button-icon-active-color;
          }
        }
      }
    }

    @if ($skin-name == 'tailwind') {
      &:not(.e-disabled) {
        .e-slider-button {
          &:hover {
            background-color: $secondary-bg-color-hover;
          }

          &:active {
            background-color: $secondary-bg-color-pressed;
          }
        }
      }
    }

    .e-slider {
      .e-range {
        background-color: $slider-range-bar-color;
        @if ($skin-name == 'fluent2')  {
          border: 1px solid $slider-range-border-color;
        }
        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          border-radius: 4px;
        }

        &.e-tab-range {
          @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' {
            background-color: $slider-tab-range-color;
          }
        }
      }

      .e-handle {
        background-color: $slider-handle-bg-color;
        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
          border: 1px solid $slider-normal-handle-border-color;
        }
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          border: 2px solid $slider-normal-handle-border-color;
        }
        @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap-dark' and $skin-name != 'bootstrap5' or $skin-name != 'FluentUI') {
          border-color: $slider-normal-handle-border-color;
        }

        &.e-material-tooltip {
          @include handle-style(transparent, transparent);
        }

        &.e-handle-first,
        &.e-handle-second {
          &:hover,
          &:active {
            @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              @include handle-style($slider-handle-active-bg-color, $slider-handle-active-border-color);
            }
          }
        }

        &:hover {
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            @include handle-style($slider-hover-handle-color, null);
          }
          @if ($skin-name == 'bootstrap5') {
            @include handle-style($slider-hover-handle-color, $slider-hover-handle-border-color);
          }
        }

        &:active {
          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            @include handle-style($slider-active-handle-bg-color, null);
          }
          @if ($skin-name == 'bootstrap5') {
            @include handle-style($slider-hover-handle-color, $slider-hover-handle-border-color);
          }
        }
      }
    }

    &.e-slider-hover {
      .e-slider-track {
        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'bootstrap4' and $skin-name != 'fluent2') {
          background-color: $slider-hover-color;
        }
      }

      .e-range {
        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'Material3') {
          background-color: $slider-range-bar-hover-color;
        }
      }

      .e-handle {
        @if ($skin-name != 'highcontrast' and $skin-name != 'highcontrast-light' and $skin-name != 'bootstrap4') {
          border-color: $slider-handle-hover-border-color;
        }
      }
    }

    &.e-disabled {
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'fluent2') {
        .e-slider {
          .e-range {
            background: $slider-disabled-bg-color;
          }

          .e-handle {
            background: $slider-disabled-bg-color;
            @if ($skin-name != 'tailwind3') {
              border-color: $slider-disabled-bg-color;
            }
          }
        }
        @if ($skin-name == 'fluent2') {
          .e-slider-button {
            border: 1px solid $slider-button-disabled-border-color;
            background-color: $slider-button-disabled-bg-color;
          }
        }
      }
    }

    &.e-horizontal.e-disabled {
      @if ($skin-name == 'fluent2') {
        .e-slider-track {
          background-color: $slider-disabled-track-bg-color;
          border: 1px solid $slider-range-border-color;
        }

        .e-button-icon::before {
          color: $slider-button-icon-disabled-bg-color;
        }
      }
    }

    &:not(.e-disabled):not(.e-read-only):active {
      .e-handle {
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
          border-color: $slider-tab-border-color;
        }
      }

      .e-range {
        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
          background-color: $slider-tab-range-color;
        }
      }

      .e-slider-track {
        @if ($skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark') {
          background-color: $slider-tab-track-color;
        }
      }
    }
  }
}

@mixin size($height, $width) {
  height: $height;
  width: $width;
}

@mixin alignment($size, $pos, $type) {
  @if $type == 'horizontal' {
    height: $size;
    top: $pos;
  }
  @else {
    width: $size;
    left: $pos;
  }
}

@include export-module('slider-bigger') {
  .e-bigger {
    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
      .e-slider-tooltip.e-tooltip-wrap.e-popup {
        .e-tip-content {
          padding: $slider-tooltip-padding;
        }
      }
    }
    @else {
      &.e-slider-tooltip.e-tooltip-wrap.e-popup {
        .e-tip-content {
          font-size: $slider-tooltip-wrap-popup-font-size;
          line-height: $slider-tooltip-wrap-popup-line-height;
        }
      }
    }
  }

  .e-bigger .e-control-wrapper.e-slider-container,
  .e-control-wrapper.e-slider-container.e-bigger {
    @if ($skin-name != 'material' and $skin-name != 'material-dark') {
      .e-slider {
        .e-handle {
          @include size($slider-handle-mobile-height, $slider-handle-mobile-width);
        }
      }

      @if ($skin-name == 'FluentUI') {
        .e-slider-button {
          @include size(20px, 20px);
        }

        &.e-horizontal {
          .e-first-button,
          .e-second-button {
            margin-top: $slider-touch-btn-center-align;

            .e-button-icon::before {
              font-size: $slider-button-icon-size;
            }
          }
        }

        &.e-vertical {
          .e-first-button,
          .e-second-button {
            margin-right: $slider-touch-btn-center-align;

            .e-button-icon::before {
              font-size: $slider-button-icon-size;
            }
          }
        }
      }

      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        .e-slider-button {
          @include size(18px, 18px);
        }

        &.e-vertical {
          &.e-slider-btn {
            padding: $slider-vertical-btn-padding;
          }

          .e-first-button,
          .e-second-button {
            margin-right: $slider-vertical-button-margin-right;
          }

          .e-slider {
            .e-slider-track {
              @include alignment(8px, calc(50% - 4px), 'vertical');
              @if $skin-name == 'fluent2' {
                border-radius: $slider-touch-track-border-radius;
              }
            }

            @if $skin-name == 'fluent2' {
              &.e-scale {
                margin-top: $slider-touch-center-align;
              }
              &.e-v-scale {
                left: $slider-touch-evscale-left;
              }
            }

            .e-range {
              @include alignment(8px, calc(50% - 4px), 'vertical');
            }
          }
        }

        &.e-horizontal .e-slider {
          .e-limits {
            @include alignment(8px, calc(50% - 4px), 'horizontal');
            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3') {
              border-radius: $slider-range-border-radius;
            }
          }
        }

        &.e-vertical .e-slider {
          .e-limits {
            @include alignment(8px, calc(50% - 4px), 'vertical');
            @if ($skin-name == 'bootstrap5' and $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3') {
              border-radius: $slider-range-border-radius;
            }
          }
        }
      }

      @if ($skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3') {

        &.e-horizontal,
        &.e-vertical {
          .e-slider-button.e-first-button,
          .e-slider-button.e-second-button {
            border-radius: $slider-ver-hori-button-border-radius;
            @include size(24px, 24px);
            @if $skin-name == 'Material3' {
              padding: $slider-zero-padding-margin;
            }

            .e-button-icon::before {
              font-size: $slider-vertical-horizontal-button-icon-size;
            }
          }
        }

        &.e-horizontal {
          .e-slider-button.e-first-button,
          .e-slider-button.e-second-button {
            margin-top: $slider-horizontal-slider-button-margin-top;
          }

          .e-tick-both {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  @include alignment(24px, -14px, 'horizontal');
                }

                .e-large {
                  @if $skin-name == 'fluent2' {
                    @include alignment(32px, -6px, 'horizontal');
                  }
                  @else {
                    @include alignment(32px, -10px, 'horizontal');
                  }
                }
              }
            }
          }

          .e-tick-before {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  @include alignment($tick-after-mobile-height, $tick-before-mobile-top, 'horizontal');
                }

                .e-large {
                  @include alignment($largetick-before-mobile-height, $tick-before-mobile-top, 'horizontal');
                }
              }
            }
          }

          .e-tick-after {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  @include alignment($tick-after-mobile-height, $tick-after-mobile-top, 'horizontal');
                }

                .e-large {
                  @include alignment($largetick-before-mobile-height, $largetick-after-mobile-top, 'horizontal');
                }
              }
            }
          }
        }

        &.e-vertical {

          .e-tick-both {
            &.e-scale {
              .e-tick {
                @include alignment(24px, 2px, 'vertical');
              }

              .e-large {
                @include alignment(32px, -2px, 'vertical');
              }
            }
          }

          .e-tick-before {

            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  @include alignment($tick-after-mobile-height, $tick-before-mobile-left, 'vertical');
                }

                .e-large {
                  @include alignment($largetick-before-mobile-height, $largetick-before-mobile-left, 'vertical');
                }
              }
            }
          }

          .e-tick-after {

            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  @include alignment($tick-after-mobile-height, $tick-after-mobile-left, 'vertical');
                }

                .e-large {
                  @include alignment($largetick-before-mobile-height, $tick-after-mobile-left, 'vertical');
                }
              }
            }
          }
        }
      }

      @if ($skin-name == 'tailwind') {
        .e-scale.e-h-scale {
          &.e-tick-after {
            top: 7px;
          }
        }

        &.e-horizontal,
        &.e-vertical {
          .e-slider-button.e-first-button,
          .e-slider-button.e-second-button {
            border-radius: $slider-horizontal-button-radius;
            @include size(24px, 24px);
            .e-button-icon::before {
              font-size: $slider-horizontal-button-icon-size;
            }
          }
        }

        &.e-horizontal {

          &.e-scale-both .e-range,
          .e-limits {
            height: $slider-scale-range-height;
          }

          .e-slider-track {
            border-radius: $slider-track-border-radius;
          }

          .e-first-button,
          .e-second-button {
            margin-top: $slider-first-second-button-margin-top;
          }

          .e-tick-both {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  @include alignment(22px, -19px, 'horizontal');
                }

                .e-large {
                  @include alignment(30px, -16px, 'horizontal');
                }
              }
            }
          }

          .e-tick-before,
          .e-tick-after {
            &.e-scale {
              &.e-h-scale {
                .e-tick {
                  height: $tick-after-mobile-height;
                }

                .e-large {
                  height: $largetick-before-mobile-height;
                }
              }
            }
          }

          &.e-scale-both {
            .e-scale {
              top: 17px;
            }
          }

          &.e-slider-btn {
            padding: $slider-button-horizon-mobile-padding;
          }
        }

        &.e-vertical {

          &.e-scale-both .e-range,
          .e-range {
            width: $slider-range-width;
          }

          .e-slider-track {
            border-radius: $slider-track-border-radius;
          }

          &.e-slider-btn {
            padding: $slider-button-vertical-mobile-padding;
          }

          .e-slider-button {
            margin-right: $slider-button-margin-right;
          }

          .e-tick-both {
            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  @include alignment(22px, 4px, 'vertical');
                }

                .e-large {
                  @include alignment(30px, -0, 'vertical');
                }
              }
            }
          }

          .e-tick-before,
          .e-tick-after {

            &.e-scale {
              &.e-v-scale {
                .e-tick {
                  width: $tick-after-mobile-height;
                }

                .e-large {
                  width: $largetick-before-mobile-height;
                }
              }
            }
          }
        }
      }

      &.e-horizontal {
        @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          &.e-slider-btn {
            padding: $slider-bgr-hor-btn-padding;
          }
        }
        @if ($skin-name == 'bootstrap4') {
          &.e-slider-btn {
            padding: 0 34px;
          }

          .e-slider-button {
            @include size($slider-handle-mobile-buttons-height, $slider-handle-mobile-buttons-width);
            margin-top: -9px;
          }
        }

        @if ($skin-name == 'tailwind') {
          .e-slider-track,
          .e-range {
            height: 6px;
          }
        }

        .e-slider {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3'  or $skin-name == 'fluent2') {
            .e-slider-track,
            .e-range {
              @include alignment(8px, calc(50% - 4px), 'horizontal');
            }
          }

          .e-handle {
            margin-left: $slider-handle-mobile-margin-left;
            top: $slider-handle-mobile-handle-top;
          }
        }

        &.e-scale-both {
          .e-slider {
            .e-handle {
              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
                margin-left: -9px;
                top: calc(50% - 8px);
              }
            }
          }
        }
      }

      &.e-vertical {
        .e-slider {
          .e-handle {
            left: $slider-vertical-handle-left;
            margin-bottom: $slider-vertical-handle-margin-bottom;
          }

          @if ($skin-name == 'tailwind') {
            .e-range {
              width: $slider-range-width;
            }
          }
        }

        &.e-scale-both {
          .e-slider {
            .e-handle {
              @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
                left: calc(50% - 10px);
                margin-bottom: -9px;
              }
              @if $skin-name == 'bootstrap4' {
                left: calc(50% - 8px);
                margin-bottom: -8px;
              }
            }
          }
        }

        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
          .e-slider-track,
          .e-range {
            width: $slider-range-width;
          }
        }
      }

      &.e-rtl {
        &.e-horizontal {
          .e-slider {
            .e-handle {
              @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
                margin: $slider-rtl-handle-margin;
              }
            }
          }
        }
      }
    }

    .e-scale .e-tick .e-tick-value {
      font-size: $slider-mobile-scale-font-size;
    }
  }
}

$cpicker-split-btn-padding: 0 6px !default;
$cpicker-bigger-split-btn-padding: $cpicker-split-btn-padding !default;
$cpicker-split-line-height: 17px !default;
$cpicker-bigger-split-line-height: 20px !default;
$cpicker-split-btn-icon-height: 20px !default;
$cpicker-split-btn-icon-height: $cpicker-split-btn-icon-height !default;
$cpicker-bigger-split-btn-icon-height: 26px !default;
$cpicker-bigger-split-btn-icon-width: 26px !default;
$cpicker-color: $grey-dark !default;
$cpicker-border: 0 !default;
$cpicker-radius: 4px !default;
$cpicker-overlay: rgba(0, 0, 0, .6) !default;
$cpicker-shadow: 0 0 15px 0 rgba($grey-base, .8) !default;
$cpicker-tiles-height: 27px !default;
$cpicker-tiles-width: 27px !default;
$cpicker-tile-border: .5px solid transparent !default;
$cpicker-tile-active-border-color: $base-font !default;
$cpicker-tile-outline: $grey-light-font .5px solid !default;
$cpicker-tiles-hover-shadow: 2px 2px 7px 2px rgba($grey-base, .3) !default;
$cpicker-transparent-bg-pattern: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') !default;
$cpicker-container-height: 170px !default;
$cpicker-bigger-container-height: 180px !default;
$cpicker-container-width: 270px !default;
$cpciker-handler-border: 1px solid $grey-light-font !default;
$cpicker-handler-shadow: 0 0 3px rgba($grey-base, .7), inset 0 0 2px rgba($grey-base, .7) !default;
$cpicker-handler-radius: 6px !default;
$cpicker-handler-height: 8px !default;
$cpicker-handler-width: 8px !default;
$cpicker-handler-tooltip-color: $grey-light-font !default;
$cpicker-slider-top: calc(50% - 9px) !default;
$cpicker-slider-wrapper-padding: 9px 15px !default;
$cpicker-bigger-slider-wrapper-padding: 7px 15px !default;
$cpicker-slider-container-height: 18px !default;
$cpicker-slider-container-width: 82.5% !default;
$cpicker-bigger-slider-container-width: 83.7% !default;
$cpicker-bigger-slider-container-height: 22px !default;
$cpicker-slider-element-height: 6px !default;
$cpicker-slider-height: 6px !default;
$cpicker-slider-handler-color: $grey-light-font !default;
$cpicker-slider-handler-focus-color: #fff !default;
$cpicker-slider-handler-box-shadow: 0 1px 2px rgba($grey-base, .64) !default;
$cpicker-slider-handle-size: 14px !default;
$cpicker-slider-handle-top: calc(50% - 7px) !default;
$cpicker-bigger-slider-handle-size: 16px !default;
$cpicker-bigger-slider-handle-top: calc(50% - 8px) !default;
$cpicker-input-picker-padding: 0 15px 15px !default;
$cpicker-input-palette-padding: 15px 15px !default;
$cpicker-input-container: 90% !default;
$cpicker-bigger-input-container: 90.77% !default;
$cpicker-label-width: 15% !default;
$cpicker-label-margin: 1.856% !default;
$cpicker-bigger-label-margin: 1.699% !default;
$cpicker-hex-label-width: 30% !default;
$cpicker-switch-btn-padding: 2px 3px !default;
$cpicker-bigger-switch-btn-padding: 0 2px !default;
$cpicker-bigger-container-height: 180px !default;
$cpicker-value-switch-btn-margin: 22px !default;
$cpicker-preview-height: 16px !default;
$cpicker-preview-size: 13.338% !default;
$cpicker-bigger-preview-size: 12.31% !default;
$cpicker-preview-margin-left: 4.17% !default;
$cpicker-bigger-preview-margin-left: 3.85% !default;
$cpicker-preview-container-top: -2px !default;
$cpicker-preview-container-border: 1px solid $grey-8c !default;
$cpicker-preview-border: 1px solid $grey-8c !default;
$cpicker-right-icon-content: '\e431' !default;
$cpicker-mode-palette-icon: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUwLjIgKDU1MDQ3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA0IENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQXJ0Ym9hcmQiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMjUtQ29weS04IiBmaWxsPSIjNDU5NkNFIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMjUtQ29weS05IiBmaWxsPSIjNUNDMTVCIiB4PSIwIiB5PSIxMiIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIj48L3JlY3Q+CiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTI1LUNvcHktMTAiIGZpbGw9IiNGQkQ1MDYiIHg9IjEyIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMjUtQ29weS0xMSIgZmlsbD0iI0VDNEU0MyIgeD0iMTIiIHk9IjEyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat 100% 100% !default;
$cpicker-mode-picker-icon: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE4IDE4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zOnNlcmlmPSJodHRwOi8vd3d3LnNlcmlmLmNvbS8iIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS40MTQyMTsiPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMCwxOCkiPgogICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgc3R5bGU9ImZpbGw6dXJsKCNfTGluZWFyMSk7Ii8+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDE4KSI+CiAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBzdHlsZT0iZmlsbDp1cmwoI19MaW5lYXIyKTsiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDAsMTgpIj4KICAgICAgICA8Y2xpcFBhdGggaWQ9Il9jbGlwMyI+CiAgICAgICAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIvPgogICAgICAgIDwvY2xpcFBhdGg+CiAgICAgICAgPGcgY2xpcC1wYXRoPSJ1cmwoI19jbGlwMykiPgogICAgICAgICAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwtMCwxOCkiPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgogICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMCwxOCkiPgogICAgICAgIDxjbGlwUGF0aCBpZD0iX2NsaXA0Ij4KICAgICAgICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ii8+CiAgICAgICAgPC9jbGlwUGF0aD4KICAgICAgICA8ZyBjbGlwLXBhdGg9InVybCgjX2NsaXA0KSI+CiAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLC0wLDE4KSI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNfSW1hZ2U1IiB4PSIwIiB5PSIwIiB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4Ii8+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwwLDE4KSI+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJfY2xpcDYiPgogICAgICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgICAgIDxnIGNsaXAtcGF0aD0idXJsKCNfY2xpcDYpIj4KICAgICAgICAgICAgPGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsLTAsMTgpIj4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iX0xpbmVhcjEiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCg2LjI3MDE5ZS0xNCwtMTAyNCwtMTAyNCwtNi4yNzAxOWUtMTQsMCwxOCkiPjxzdG9wIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDAsMTgyLDI1NSk7c3RvcC1vcGFjaXR5OjAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOmJsYWNrO3N0b3Atb3BhY2l0eTowIi8+PC9saW5lYXJHcmFkaWVudD4KICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9Il9MaW5lYXIyIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMDIxOGUtMTUsLTE4LC0xOCwtMS4xMDIxOGUtMTUsMTgsMTgpIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYigwLDE4MiwyNTUpO3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjpibGFjaztzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGltYWdlIGlkPSJfSW1hZ2U1IiB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB4bGluazpocmVmPSJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUJJQUFBQVNDQVlBQUFCV3pvNVhBQUFBQ1hCSVdYTUFBQTdFQUFBT3hBR1ZLdzRiQUFBQmUwbEVRVlE0alcyUjIyNGNNUXhER2NBbyt2OC8yU0lYZE9wTk5iSXVWaDlrZXp6SlBoaWlTT3JNQXZ2eTBBanlBSGVBSEdBSHlDUDE4dTQ3ZVl6ZTlBS2xhaDlCZ0F5WG5tVUxjQStRYmQ3cWp4OWdnVkxGUWRiVDlBQlpYNlZkWHpNLy9MVmZqbE11dy9xQWR2QUMzZmR2bVE1UVpVbUErZ1ZUWDZWZDh3Sjk3NWRLbkdYek1VZnBpVGYzdXpkQi93Z2tsaVZ4a0U1dFdSSkxiNGMvNlplamZvTE5NdFJaeXYyWk4zZFNCYXREVlFGWGxQcDRnTlZBb3FPa1F4dW8yY3Iybk5Wd2lnSnVnQ2xnaWxMclgxQ2Jod3BXdmUwa3NtVTUzUXh3SGM4QU01UjZIQnRBUUUzQVlqa25WREpyb2tDM1BIYlBPZlpTano4SjRMWU9XRFIzVlJBblBOeUE3dm1tZGs5UWQ1VGo0dzBzRzRqYjBPbXBUa0FmMHpiZDExN3FCSjBOeEx3MGl5RGNnZGlPcG80K0lCMElINkQzMXdTMEJqb1ozQ1QvMHBpSGNla0ppTmgwdmxMZmZnOUF3OGs4Z3RoZXYyczh6MHA5L1FVNlQ3Z2JFTWhnbGhIcDdjZDQzbm5CajU4ekhVZERiMk1URit6TC9oOXIveU91c0ZQS093QUFBQUJKUlU1RXJrSmdnZz09Ii8+CiAgICA8L2RlZnM+Cjwvc3ZnPgo=') no-repeat 100% 100% !default;
$cpicker-type-switch-margin: 2px !default;
$cpicker-bigger-type-switch-btn-margin: 6px !default;
$cpicker-ctrl-btn-padding: 0 15px 15px !default;
$cpicker-palette-ctrl-btn-padding: 25px 15px 15px !default;
$cpicker-bigger-palette-ctrl-btn-padding: $cpicker-palette-ctrl-btn-padding !default;
$cpicker-palette-value-padding: 0 15px 15px !default;
$cpicker-switch-btn-width: 10% !default;
$cpicker-switch-btn-height: 24px;
$cpicker-bigger-switch-btn-width: 9.235% !default;
$cpicker-ctrl-btn-width: 47.29% !default;
$cpicker-cancel-btn-margin: 3.71% !default;
$cpicker-tooltip-preview-size: 24px !default;
$cpicker-bigger-tooltip-preview-size: 30px !default;
$cpicker-to-bottom-gradient-start: rgba(0, 0, 0, 0) !default;
$cpicker-to-bottom-gradient-end: #000 !default;
$cpicker-to-right-gradient-start: #fff !default;
$cpicker-to-right-gradient-end: rgba(255, 255, 255, 0) !default;
$cpicker-gradient-0: #f00 !default;
$cpicker-gradient-16: #ff0 !default;
$cpicker-gradient-33: #0f0 !default;
$cpicker-gradient-50: #0ff !default;
$cpicker-gradient-67: #00f !default;
$cpicker-gradient-84: #f0f !default;
$cpicker-gradient-100: #ff0004 !default;
$cpicker-handler-margin: -4px !default;
$cpicker-slider-track-top: calc(50% - 3px) !default;
$cpicker-opacity-slider-border: 0 !default;
$cpicker-previous-height: 16px !default;
$cpicker-input-height: 32px !default;
$cpicker-numeric-input-height: 30px !default;
$cpicker-focus-shadow: none !default;
$cpicker-switcher-outline: none !default;
$cpicker-opacity-hidden-hex-width: 36% !default;
$cpicker-opacity-hidden-numeric-width: 16% !default;
$cpicker-hex-hidden-width: 21% !default;
$cpicker-hex-opacity-hidden-width: 29.59% !default;
$cpicker-value-hidden-hex-label-width: $cpicker-hex-label-width !default;
$cpicker-value-hidden-label-width: 13% !default;
$cpicker-value-opacity-hide-hex-label-width: 36% !default;
$cpicker-value-opacity-hide-label-width: 17.58% !default;
$cpicker-value-hex-hidden-width: 22% !default;
$cpicker-value-opacity-hex-hidden-width: 30.82% !default;
$cpicker-bigger-container-width: 290px !default;
$cpicker-bigger-tile-size: 29px !default;
$cpicker-bigger-slider-handle-radius: 8px !default;
$cpicker-bigger-hex-label-width: 34.9% !default;
$cpicker-bigger-input-height: 38px !default;
$cpicker-bigger-label-width: 12.3% !default;
$cpicker-bigger-numeric-input-height: 36px !default;
$cpicker-bigger-opacity-hidden-numeric-width: 16% !default;
$cpicker-bigger-hex-hidden-width: 21.58% !default;
$cpicker-hex-opacity-hidden-width: 29.59% !default;
$cpicker-bigger-value-hidden-label-width: 13.2% !default;
$cpicker-bigger-value-opacity-hide-label-width: 17.9% !default;
$cpicker-bigger-hex-hidden-width: 22% !default;
$cpicker-bigger-value-opacity-hex-hidden-width: 30.82% !default;
$cpicker-slider-tab-handler-color: $cpicker-slider-handler-color !default;
$cpicker-slider-tab-shadow: $cpicker-slider-handler-box-shadow !default;
$cpicker-blazor-input-margin: -1px !default;
$cpicker-blazor-bigger-input-margin: calc(1.699% - 2.9px) !default;
$cpicker-recent-color-wrap-pad: 0 !default;
$cpicker-recent-color-span-hgt: 40px !default;
$cpicker-recent-color-span-pad: 9px 16px !default;
$cpicker-recent-color-span-line-hgt: 22px !default;
$cpicker-recent-color-tile-pad: 10px 10.5px !default;
$cpicker-recent-color-tile-dim: 20px !default;
$cpicker-recent-color-tile-margin: 0 2.5px;
$cpicker-bigger-recent-color-wrap-pad: 0 !default;
$cpicker-bigger-recent-color-span-hgt: 48px !default;
$cpicker-bigger-recent-color-span-pad: 12px 16px !default;
$cpicker-bigger-recent-color-span-line-hgt: 22px !default;
$cpicker-bigger-recent-color-tile-pad: 13px 10px !default;
$cpicker-bigger-recent-color-tile-dim: 25px !default;
$cpicker-bigger-recent-color-tile-margin: 0 1px;
$cpicker-recent-color-span-color: #0070f0 !default;
$cpicker-recent-color-span-weight: bold !default;
$cpicker-recent-color-tile-border: $grey-ad !default;
$color-bgr-recent-clr-font-size: 16px !default;
$color-bgr-value-mode-switch-font-size: 18px !default;
$color-bgr-value-mode-switch-line-height: 18px !default;
$color-slider-track-border-radius: 0 !default;
$color-container-value-switch-font-size: 16px !default;
$color-container-value-switch-line-height: 16px !default;
$color-recent-clr-btn-font-size: 14px !default;
$color-bigger-switch-ctrl-margin: 2px 0 !default;
$color-bigger-switch-btn-padding: 16px !default;
$color-zero-padding-margin: 0 !default;
$color-bigger-slider-first-child-margin-bottom: 4px !default;
$color-custom-palette-padding: 10px !default;
$color-popup-radius-50: 50% !default;
$color-popup-radius-0: 0% !default;
$color-container-float-input-margin-top: 22px !default;
$color-preview-container-height: 32px !default;
$color-zero-line-height: 0 !default;
$color-one-line-height: 1px !default;
$color-bigger-popup-min-width: 32px !default;
$color-one-width: 1px !default;
$color-auto-width: auto !default;
$color-picker-nrml-ctrl-btn-width: 89.913% !default;
$color-full-width: 100% !default;
$color-full-height: 100% !default;
$color-picker-popup-width: calc(100% - 20px);
$color-mob-preview-cont-margin-left: 4.6% !default;
$color-ctrl-btn-width: 90.6% !default;
$cpicker-bgr-palette-title-height: 24px !default;
$color-zero-radius: 0 !default;
$show-value-palette-width: 270px !default;
$color-half-border-width: .5px !default;
$selected-value-float-text-right: -12px !default;
$cpicker-cont-color-ctrl-btn-padding-top: 12px !default;

@mixin btn-icon-layout {
  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    background-color: $cpicker-tile-active-border-color;
    border: $cpicker-split-btn-border;
    color: $cpicker-split-btn-icon-color;
  }
}

@include export-module('color-picker-layout') {
  .e-colorpicker-wrapper,
  .e-colorpicker-container {
    display: inline-block;
    line-height: $color-zero-line-height;
    outline: none;
    user-select: none;

    & .e-colorpicker {
      height: $color-one-line-height;
      opacity: 0;
      position: absolute;
      width: $color-one-width;
    }

    & .e-dropdown-btn.e-icon-btn {
      @if $skin-name == 'Material3' {
        background: $cpicker-split-btn-background-color;
        border-radius: $cpicker-split-btn-border-radius;
        @if $skin-name == 'Material3' {
          border-bottom-left-radius: $color-zero-radius;
          border-top-left-radius: $color-zero-radius;
        }
        box-shadow: none;
      }
    }

    & .e-btn.e-icon-btn {
      @include btn-icon-layout;
    }

    & .e-split-btn-wrapper {
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
      & .e-split-colorpicker.e-split-btn {
        font-family: initial;
        line-height: $cpicker-split-line-height;
        @if $skin-name == 'bootstrap4' {
          box-shadow: none;
        }
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'tailwind3' {
          padding: $cpicker-split-btn-padding;
        }
        @else if $skin-name == 'Material3' {
          background: $cpicker-split-btn-background-color;
          border-radius: $cpicker-split-btn-border-radius;
          border-bottom-right-radius: $color-zero-radius;
          border-top-right-radius: $color-zero-radius;
          border-right-color: transparent;
          box-shadow: none;
          padding: $cpicker-split-btn-padding;
        }
        @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: transparent;
          border: $cpicker-split-btn-border;
        }

        & .e-selected-color {
          background: $cpicker-transparent-bg-pattern;
          background-size: 8px;
          border-radius: $btn-border-radius;
          height: $cpicker-split-btn-icon-height;
          margin-top: $color-zero-padding-margin;
          position: relative;
          width: $cpicker-split-btn-icon-height;

          & .e-split-preview {
            border-radius: $btn-border-radius;
          }
        }

        & .e-btn.e-icon-btn {
          @include btn-icon-layout;
        }
      }

      &.e-rtl {
        & .e-split-colorpicker.e-split-btn {
          @if $skin-name == 'Material3' {
            border-bottom-right-radius: $color-zero-radius;
            border-top-right-radius: $color-zero-radius;
            padding: $cpicker-split-btn-padding;
          }
        }

        & .e-dropdown-btn.e-icon-btn {
          @if $skin-name == 'Material3' {
            border-bottom-left-radius: $color-zero-radius;
            border-top-left-radius: $color-zero-radius;
          }
        }

        & .e-btn.e-icon-btn {
          @include btn-icon-layout;
          @if $skin-name == 'Material3' {
            background: $cpicker-split-btn-background-color;
            border-radius: $cpicker-split-btn-border-radius;
            border-left-color: transparent;
          }
        }
      }
    }

    * {
      box-sizing: border-box;
    }

    &.e-disabled {
      & .e-palette {
        & .e-tile {
          cursor: default;

          &:hover {
            border: 0;
            box-shadow: none;
          }

          &.e-selected {
            border: 0;
          }
        }
      }

      & .e-container {
        & .e-handler,
        & .e-preview-container,
        & .e-slider-preview .e-colorpicker-slider .e-hue-slider,
        & .e-slider-preview .e-colorpicker-slider .e-opacity-slider,
        & .e-slider-preview .e-colorpicker-slider .e-slider-container .e-handle {
          cursor: default;
        }

        & .e-hsv-container {
          pointer-events: none;
        }
      }
    }
  }

  .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
    line-height: $color-zero-line-height;
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-colorpicker {
    &.e-modal,
    &.e-hsv-model {
      -webkit-overflow-scrolling: touch;
      height: $color-full-height;
      left: $color-zero-padding-margin;
      position: fixed;
      top: $color-zero-padding-margin;
      width: $color-full-width;
    }

    &.e-modal {
      background-color: $cpicker-overlay;
      opacity: .5;
      pointer-events: auto;
    }

    &.e-hsv-model {
      background-color: transparent;
    }
  }

  .sf-colorpicker .e-switch-ctrl-btn .e-ctrl-btn {
    position: relative;
  }

  .e-show-value .sf-colorpicker.e-color-palette {
    & .e-selected-value,
    & .e-switch-ctrl-btn {
      width: $show-value-palette-width;
    }
  }

  .e-dropdown-popup.e-transparent .e-container {
    display: none;
  }

  body {
    &.e-colorpicker-overflow {
      overflow: visible;
    }
  }

  .e-container {
    border: $cpicker-border;
    border-radius: $cpicker-radius;
    display: inline-block;
    line-height: $color-zero-line-height;
    outline: none;
    user-select: none;
    @if $skin-name == 'bootstrap4' {
      background-color: $content-bg;
      border-color: $cpicker-shadow;
      box-shadow: none;
    }
    @else {
      box-shadow: $cpicker-shadow;
    }

    &.e-color-picker {
      @if $skin-name == 'Material3' {
        height: $cpicker-popup-container-height;
        width: $cpicker-popup-container-width;
      }
      @else {
        width: $cpicker-container-width;
      }
      @if $skin-name == 'bootstrap4' {
        background-color: $content-bg;
        border: 1px solid $cpicker-shadow;
      }
      @if $skin-name == 'fluent2' {
        border: 1px solid $cpicker-shadow;
      }

      & .e-mode-switch-btn {
        background: $cpicker-mode-palette-icon;
        @if $theme-name == 'Matrial3' {
          border-radius: $color-mode-switch-btn-border-radius;
        }
      }
    }

    &.e-color-palette {
      @if $skin-name == 'bootstrap4' {
        background-color: $content-bg;
        border: 1px solid $cpicker-shadow;
      }
      width: $color-auto-width;

      & .e-mode-switch-btn {
        background: $cpicker-mode-picker-icon;
      }
    }

    & .e-custom-palette {
      width: $color-auto-width;

      & .e-palette {
        padding: $color-custom-palette-padding;
      }

      &.e-palette-group {
        height: $cpicker-container-width;
        overflow-y: scroll;
      }
    }

    & .e-palette {
      border-bottom: $cpicker-border;
      display: table;
      line-height: $color-zero-line-height;
      outline: none;
      user-select: none;

      & .e-row {
        display: table-row;
        white-space: nowrap;
      }

      & .e-tile {
        border: $cpicker-tile-border;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        height: $cpicker-tiles-height;
        text-align: center;
        vertical-align: middle;
        width: $cpicker-tiles-width;

        &.e-selected {
          outline: $cpicker-tile-outline;
          position: relative;
        }

        &:hover {
          position: relative;
        }

        &.e-nocolor-item {
          background: $cpicker-transparent-bg-pattern;
          background-size: 8px;
        }
      }
    }

    & .e-hsv-container {
      border-bottom: $cpicker-border;
      position: relative;
      touch-action: none;

      & .e-hsv-color {
        background: linear-gradient(to bottom, $cpicker-to-bottom-gradient-start 0, $cpicker-to-bottom-gradient-end 100%), linear-gradient(to right, $cpicker-to-right-gradient-start 0, $cpicker-to-right-gradient-end 100%);
        height: $cpicker-container-height;
      }

      & .e-handler {
        border: $cpciker-handler-border;
        border-radius: $cpicker-handler-radius;
        box-shadow: $cpicker-handler-shadow;
        cursor: pointer;
        display: inline-block;
        height: $cpicker-handler-height;
        margin-left: $cpicker-handler-margin;
        margin-top: $cpicker-handler-margin;
        position: absolute;
        touch-action: none;
        user-select: none;
        width: $cpicker-handler-width;
      }
    }

    & .e-slider-preview {
      display: inline-block;
      width: $color-full-width;
      @if $skin-name == 'bootstrap4' {
        padding: $cpicker-slider-handle-size;
      }
      @else {
        padding: $cpicker-slider-wrapper-padding;
      }

      & .e-colorpicker-slider {
        display: inline-block;
        width: $cpicker-slider-container-width;

        & .e-slider-container {
          height: $cpicker-slider-container-height;

          & .e-slider {
            height: $cpicker-slider-container-height;
            top: $cpicker-slider-top;
          }

          & .e-slider-track {
            height: $cpicker-slider-height !important; /* stylelint-disable-line declaration-no-important */
            top: $cpicker-slider-track-top;
            border-radius: $color-slider-track-border-radius;
          }

          & .e-handle {
            border-radius: $cpicker-handler-radius;
            cursor: pointer;
            height: $cpicker-slider-handle-size;
            top: $cpicker-slider-handle-top;
            width: $cpicker-slider-handle-size;

            &.e-handle-active {
              cursor: pointer;
            }

            &.e-large-thumb-size {
              transform: scale(1);
            }
          }
        }

        & .e-hue-slider {
          & .e-slider-track {
            background: linear-gradient(to right, $cpicker-gradient-0 0, $cpicker-gradient-16 16%, $cpicker-gradient-33 33%, $cpicker-gradient-50 50%, $cpicker-gradient-67 67%, $cpicker-gradient-84 84%, $cpicker-gradient-100 100%);
          }
        }

        & .e-opacity-slider {
          & .e-slider-track {
            background: $cpicker-transparent-bg-pattern;
            border: $cpicker-opacity-slider-border;
            z-index: 0;
          }

          & .e-opacity-empty-track {
            background-size: contain;
            border: $cpicker-opacity-slider-border;
            height: $cpicker-slider-height;
            position: absolute;
            top: $cpicker-slider-track-top;
            width: $color-full-width;
            z-index: 1;

            @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              border-radius: $opacity-empty-track-border-radius;
            }
            @if $skin-name == 'tailwind3' {
              border-radius: $color-slider-track-border-radius;
            }
          }
        }

        & .e-slider.e-hue-slider,
        & .e-slider.e-opacity-slider {
          & .e-handle,
          & .e-handle-start {
            box-shadow: $cpicker-slider-handler-box-shadow;
          }
        }
      }

      & .e-preview-container {
        background: $cpicker-transparent-bg-pattern;
        background-size: 10px;
        border: $cpicker-preview-container-border;
        cursor: pointer;
        display: inline-block;
        height: $color-preview-container-height;
        margin-left: $cpicker-preview-margin-left;
        position: relative;
        top: $cpicker-preview-container-top;
        width: $cpicker-preview-size;
        @if $skin-name == 'tailwind3' {
          border-radius: $cpicker-preview-container-radius;
        }

        & .e-preview {
          display: block;
          height: $cpicker-preview-height;
          position: absolute;
          width: $color-full-width;

          &.e-current {
            border-bottom: $cpicker-preview-border;
            top: $color-zero-padding-margin;
            @if $skin-name == 'tailwind3' {
              border-top-right-radius: $cpicker-preview-container-radius;
              border-top-left-radius: $cpicker-preview-container-radius;
            }
          }

          &.e-previous {
            height: $cpicker-previous-height;
            @if $skin-name == 'FluentUI' {
              top: 25px;
            }
            @if $skin-name == 'Material3' {
              top: $mat-color-previous-top;
            }
            @else {
              top: $cpicker-preview-height;
            }
            @if $skin-name == 'tailwind3' {
              border-bottom-right-radius: $cpicker-preview-container-radius;
              border-bottom-left-radius: $cpicker-preview-container-radius;
            }
          }
        }
      }
    }

    & .e-selected-value {
      align-items: center;
      display: flex;
      padding: $cpicker-input-picker-padding;
      user-select: none;
      width: $color-full-width;
      @if $skin-name == 'bootstrap5.3' {
        border-bottom: 1px solid $border-light;
      }

      & .e-input-container {
        & .e-float-input {
          & input {
            padding-left: $color-zero-padding-margin;
            @if $skin-name == 'Material3' {
              text-align: left;
            }
            @else {
              text-align: center;
            }
          }
        }

        & .e-numeric-hidden {
          display: none;
        }
      }

      & .e-value-switch-btn {
        font-family: 'e-icons';
        margin-top: $cpicker-value-switch-btn-margin;
        padding: $cpicker-switch-btn-padding;
        @if $skin-name == 'Material3' {
          border: none;
        }
        font-size: $color-container-value-switch-font-size;
        line-height: $color-container-value-switch-line-height;

        &::before {
          @if $skin-name == 'Material3' {
            margin-left: $cpicker-mat-value-switch-margin-left;
          }
        }
      }
    }

    & .e-input-container {
      display: inline-block;
      width: $cpicker-input-container;

      & .e-float-input {
        display: inline-block;
        margin-right: $cpicker-label-margin;
        vertical-align: baseline;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          margin-top: $color-input-float-margin-top;
        }

        &:first-child {
          width: $cpicker-hex-label-width;

          & input {
            height: $cpicker-input-height;
          }
        }

        &.e-numeric {
          height: $cpicker-input-height;
          width: $cpicker-label-width;

          & input {
            height: $cpicker-numeric-input-height;
          }
        }

        & .e-float-text {
          @if $skin-name != 'fluent2' {
            text-align: center;
          }
          @if $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
            text-align: left;
          }
          @if $skin-name == 'tailwind3' {
            text-align: left;
            font-weight: $font-weight-normal !important; /* stylelint-disable-line declaration-no-important */
            color: $content-text-color !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }
    }

    & .e-switch-ctrl-btn {
      display: inline-block;
      padding: $cpicker-ctrl-btn-padding;
      white-space: nowrap;
      width: $color-full-width;
      @if $skin-name == 'tailwind3' {
        border-top: 1px $border-light solid;
      }

      & .e-ctrl-btn {
        float: right;
        text-align: right;
        white-space: nowrap;
        width: $color-picker-nrml-ctrl-btn-width;
        @if $skin-name == 'fluent2' {
          margin: $color-picker-nrml-ctrl-btn-margin;
        }

        & .e-btn {
          max-width: $cpicker-ctrl-btn-width;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            height: 30px;
          }
          @if $skin-name == 'tailwind3' {
            font-size: $color-container-btn-font-size;
            line-height: $color-container-btn-line-height;
          }

          &.e-cancel {
            margin-left: $cpicker-cancel-btn-margin;
          }

          &.e-flat {
            &:hover {
              @if $skin-name == 'bootstrap4' {
                border-color: $gray-500;
              }
            }
          }
        }
      }

      & .e-mode-switch-btn {
        background-origin: border-box;
        background-position: center;
        background-size: cover;
        float: left;
        margin-top: $cpicker-type-switch-margin;
        overflow: hidden;
        white-space: nowrap;
        @if $skin-name == 'Material3' {
          border-radius: $color-mode-switch-btn-border-radius;
        }

        &:hover {
          @if $skin-name == 'bootstrap4' {
            border-color: $gray-500;
          }
        }

        &:focus {
          box-shadow: $cpicker-focus-shadow;
        }
      }
    }

    & .e-value-switch-btn,
    & .e-mode-switch-btn {
      background-color: transparent;
      border-color: transparent;
      position: relative;
      width: $cpicker-switch-btn-width;
      @if $skin-name == 'bootstrap4' {
        height: 26px;
      }
      @else if $skin-name == 'Material3' {
        height: $cpicker-switch-btn-height;
        padding: $color-zero-padding-margin;
      }
      @else {
        height: $cpicker-switch-btn-height;
      }
    }

    & .e-value-switch-btn {
      @if $skin-name == 'fluent2' {
        border-radius: $color-pkr-value-switch-btn-border-radius;

        &:focus-visible {
          box-shadow: $secondary-shadow-focus !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }

    &.e-color-picker {
      & .e-value-switch-btn {
        &:focus,
        &:hover,
        &:active {
          border-color: transparent;
          @if $skin-name != 'tailwind3' {
            box-shadow: none;
          }
          outline: none;
        }

        &:focus {
          outline: $cpicker-switcher-outline;
        }
      }
    }

    &.e-color-palette {
      & .e-palette,
      & .e-palette-group {
        +.e-selected-value {
          padding: $cpicker-input-palette-padding;
        }

        +.e-switch-ctrl-btn {
          padding: $cpicker-palette-ctrl-btn-padding;

          @if $skin-name == 'tailwind' or $skin-name == 'Material3' {
            & .e-mode-switch-btn {
              @if $skin-name == 'Material3' {
                height: $color-palette-mode-switch-height;
              }
              width: $cpicker-palette-switch-btn-width;
            }
          }
        }
      }

      & .e-clr-pal-rec-wpr {
        padding: $cpicker-recent-color-wrap-pad;

        & .e-recent-clr-span {
          display: block;
          font-weight: $cpicker-recent-color-span-weight;
          font-size: $color-recent-clr-btn-font-size;
          height: $cpicker-recent-color-span-hgt;
          padding: $cpicker-recent-color-span-pad;
          line-height: $cpicker-recent-color-span-line-hgt;
          color: $cpicker-recent-color-span-color;
          @if $skin-name == 'fabric-dark' {
            background-color: $neutral-light;
          }
        }

        & .e-palette.e-recent-palette {
          padding: $cpicker-recent-color-tile-pad;
          @if $skin-name == 'highcontrast-light' or $skin-name == 'highcontrast' {
            border-bottom: none;
          }

          & .e-tile {
            height: $cpicker-recent-color-tile-dim !important; /* stylelint-disable-line declaration-no-important */
            width: $cpicker-recent-color-tile-dim !important; /* stylelint-disable-line declaration-no-important */
            margin: $cpicker-recent-color-tile-margin;
            border: .5px solid $cpicker-recent-color-tile-border;

            &:hover {
              border: .5px solid transparent !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }
      }
    }
  }

  .sf-colorpicker.e-container .e-input-container .e-float-input {
    float: left;
    margin-left: $cpicker-blazor-input-margin;
  }

  .e-hide-opacity .e-container {
    & .e-slider-preview {
      & .e-colorpicker-slider {
        vertical-align: super;
      }

      & .e-preview-container {
        top: $color-zero-padding-margin;
      }
    }

    & .e-float-input {
      &:first-child {
        width: $cpicker-opacity-hidden-hex-width;
      }

      &.e-numeric {
        width: $cpicker-opacity-hidden-numeric-width;
      }
    }
  }

  .e-hide-hex-value {
    & .e-container {
      & .e-float-input {
        &.e-numeric {
          width: $cpicker-hex-hidden-width;
        }
      }
    }

    &.e-hide-opacity .e-container {
      & .e-float-input {
        &.e-numeric {
          width: $cpicker-hex-opacity-hidden-width;
        }
      }
    }
  }

  .e-hide-valueswitcher {
    & .e-container {
      & .e-input-container {
        width: $color-full-width;
      }

      & .e-float-input {
        &:first-child {
          width: $cpicker-value-hidden-hex-label-width;
        }

        &.e-numeric {
          width: $cpicker-value-hidden-label-width;
        }

        &:last-child {
          margin-right: $color-zero-padding-margin;
        }
      }
    }

    &.e-hide-opacity .e-container {
      & .e-float-input {
        &:first-child {
          width: $cpicker-value-opacity-hide-hex-label-width;
        }

        &.e-numeric {
          width: $cpicker-value-opacity-hide-label-width;
        }
      }
    }

    &.e-hide-hex-value {
      & .e-container {
        & .e-float-input {
          &.e-numeric {
            width: $cpicker-value-hex-hidden-width;
          }
        }
      }

      &.e-hide-opacity .e-container {
        & .e-float-input {
          &.e-numeric {
            width: $cpicker-value-opacity-hex-hidden-width;
          }
        }
      }
    }
  }

  .e-rtl {
    & .e-container {
      & .e-hsv-container {
        & .e-hsv-color {
          background: linear-gradient(to bottom, $cpicker-to-bottom-gradient-start 0, $cpicker-to-bottom-gradient-end 100%), linear-gradient(to left, $cpicker-to-right-gradient-start 0, $cpicker-to-right-gradient-end 100%);
        }
      }

      & .e-slider-preview {
        & .e-hue-slider {
          & .e-slider-track {
            background: linear-gradient(to left, $cpicker-gradient-0 0, $cpicker-gradient-16 16%, $cpicker-gradient-33 33%, $cpicker-gradient-50 50%, $cpicker-gradient-67 67%, $cpicker-gradient-84 84%, $cpicker-gradient-100 100%);
          }

          & .e-handle {
            @if $skin-name == 'FluentUI' {
              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }

        & .e-preview-container {
          margin-left: $color-zero-padding-margin;
          margin-right: $cpicker-preview-margin-left;
        }

        & .e-opacity-slider {
          & .e-handle-first {
            @if $skin-name == 'FluentUI' {
              top: $cpicker-slider-handle-top !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }
      }

      & .e-selected-value {
        & .e-float-input {
          margin-left: $cpicker-label-margin;
          margin-right: $color-zero-padding-margin;

          & input {
            padding-right: $color-zero-padding-margin;
          }

          .e-float-text {
            right: $selected-value-float-text-right !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        & .e-value-switch-btn {
          transform: rotate(180deg);
        }
      }

      & .e-switch-ctrl-btn {
        & .e-mode-switch-btn {
          float: right;
        }

        & .e-ctrl-btn {
          float: left;
          text-align: left;

          & .e-cancel {
            margin-left: $color-zero-padding-margin;
            margin-right: $cpicker-cancel-btn-margin;
          }
        }
      }

      &.sf-colorpicker .e-selected-value .e-input-container .e-float-input {
        float: right;
        margin-right: $cpicker-blazor-input-margin;
      }
    }

    &.e-hide-valueswitcher {
      & .e-container {
        & .e-float-input {
          &:last-child {
            margin-left: $color-zero-padding-margin;
          }
        }
      }
    }
  }

  .e-hide-switchable-value {
    & .e-container {
      & .e-input-container {
        & .e-float-input:first-child {
          width: $color-full-width;
        }
      }
    }
  }

  .e-popup.e-tooltip-wrap {
    &.e-color-picker-tooltip {
      border-bottom-left-radius: $color-popup-radius-50;
      border-bottom-right-radius: $color-popup-radius-0;
      border-top-left-radius: $color-popup-radius-50;
      border-top-right-radius: $color-popup-radius-50;
      box-shadow: $cpicker-slider-handler-box-shadow;
      cursor: pointer;
      min-width: 26px;
      transform: translateY(18px) rotate(45deg) scale(.01);
      transition: transform .4s cubic-bezier(.25, .8, .25, 1);

      & .e-tip-content {
        background: $cpicker-transparent-bg-pattern;
        background-size: 8px;
        border-radius: $color-popup-radius-50;
        height: $cpicker-tooltip-preview-size;
        position: relative;
        transform: rotate(45deg);
        width: $cpicker-tooltip-preview-size;
      }
    }
  }

  .e-split-preview,
  .e-tip-transparent {
    height: $color-full-height;
    left: $color-zero-padding-margin;
    position: absolute;
    top: $color-zero-padding-margin;
    width: $color-full-width;
  }

  @if $skin-name == 'fluent2' {
    .e-container.e-color-picker .e-colorpicker-slider:first-child .e-hue-slider {
      top: $cpicker-cont-color-slider-top !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-container.e-color-picker .e-float-input {
      margin-top: $color-container-float-input-margin-top;
    }
  }
}

.e-container.e-color-palette .e-clr-pal-rec-wpr + .e-switch-ctrl-btn {
  @if $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'material' or $skin-name == 'material-dark' {
    padding-top: $cpicker-cont-color-ctrl-btn-padding-top;
  }
}

@include export-module('color-picker-theme') {
  .e-container {
    @if $skin-name == 'Material3' {
      background: $cpicker-color;
    }
    @else {
      background-color: $cpicker-color;
    }
    @if $skin-name == 'fluent2' {
      border-color: $border-light;
    }

    & .e-palette {
      & .e-tile {
        &:hover {
          border-color: $cpicker-tile-active-border-color;
        }

        &.e-selected {
          @if $skin-name == 'bootstrap4' {
            border-color: transparent;
          }
          border-color: $cpicker-tile-active-border-color;
        }
      }
    }

    & .e-handler,
    & .e-handle {
      &.e-hide-handler {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
      }
    }
  }

  .e-container .e-control-wrapper.e-slider-container {
    & .e-slider.e-hue-slider,
    & .e-slider.e-opacity-slider {
      & .e-handle:not(.e-tab-handle) {
        background-color: $cpicker-slider-handler-color;
        @if $skin-name == 'fluent2' {
          border: 2px solid $white;
        }
        @else {
          border-color: $cpicker-slider-handler-color;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          border: 1px solid $white;
        }
        @if $skin-name == 'tailwind3' {
          border: 1px solid $cpicker-slider-handler-focus-color;
        }

        &.e-handle-start:not(.e-tab-handle) {
          background-color: $cpicker-slider-handler-color;
          border-color: $cpicker-slider-handler-color;
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            border-color: $white;
          }
          @if $skin-name == 'tailwind3' {
            border: 1px solid $cpicker-slider-handler-focus-color;
          }
        }
      }

      & .e-handle {
        &.e-tab-handle {
          background-color: $cpicker-slider-tab-handler-color;
          border-color: $cpicker-slider-handler-focus-color;
          box-shadow: $cpicker-slider-tab-shadow;
          @if $skin-name == 'tailwind3' {
            border: 1px solid $cpicker-slider-handler-focus-color;
          }
        }
      }
    }
  }

  .e-colorpicker-wrapper,
  .e-colorpicker-container {
    &.e-disabled {
      & .e-value-switch-btn,
      & .e-mode-switch-btn {
        color: $btn-disabled-color;

        &:focus {
          background-color: transparent;
          color: $btn-disabled-color;
          outline: none;
          outline-offset: unset;
        }

        &:active {
          background-color: transparent;
          color: $btn-disabled-color;
        }
      }
    }

    & .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
      @if $skin-name == 'bootstrap4' {
        background-color: $cpicker-handler-tooltip-color;
        border-color: $gray-400;
      }
    }

    & .e-split-btn-wrapper .e-split-colorpicker + .e-dropdown-btn {
      @if $skin-name == 'bootstrap4' {
        border-color: $gray-400;
      }
    }

    & .e-btn.e-icon-btn {
      @if $skin-name == 'bootstrap4' {
        background-color: $cpicker-handler-tooltip-color;
        color: $gray-700;
      }
      @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        background-color: transparent;
        color: $cpicker-split-btn-icon-color;
      }
    }

    & .e-icon-btn {
      &:hover {
        @if $skin-name == 'bootstrap4' {
          background-color: $gray-600;
          color: $cpicker-handler-tooltip-color;
        }
        @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: $btn-hover-bgcolor;
          color: $cpicker-handler-tooltip-color;
        }
      }

      &:focus {
        @if $skin-name == 'bootstrap4' {
          background-color: $cpicker-handler-tooltip-color;
          border-color: $gray-700;
          $color-rgba: rgba(color.mix(color.adjust($cpicker-handler-tooltip-color, $lightness: 50%), $gray-700, 15%), .5);
          box-shadow: 0 0 0 .2rem $color-rgba;
          color: $gray-700;
        }
        @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: $btn-focus-bgcolor;
          border-color: $btn-focus-border-color;
          box-shadow: $btn-active-box-shadow;
          color: $btn-active-color;
        }
      }

      &:active {
        @if $skin-name == 'bootstrap4' {
          background-color: $gray-600;
          $color-rgba: rgba(color.mix(color.adjust($cpicker-handler-tooltip-color, $lightness: 50%), $gray-700, 15%), .5);
          box-shadow: 0 0 0 .2rem $color-rgba;
          color: $cpicker-handler-tooltip-color;
        }
        @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: $btn-active-bgcolor;
          box-shadow: $btn-active-box-shadow;
          color: $btn-active-color;
        }
      }

      &:disabled,
      &.e-disabled {
        @if $skin-name != 'tailwind3' {
          background-color: transparent;
        }
        box-shadow: none;
        @if $skin-name != 'tailwind' and $skin-name != 'tailwind3' and $skin-name != 'FluentUI' and $skin-name != 'fluent2'{
          color: $btn-disabled-bgcolor;
        }
        @if $skin-name == 'fluent2' {
          color: $icon-color-disabled;
        }
        @if $skin-name == 'tailwind' {
          border-color: $btn-disabled-border-color;
        }
        @if $skin-name == 'Material3' {
          border: none;
        }
      }
    }
  }

  #{if(&, '&', '*')} .e-color-picker .e-selected-value {
    & .e-css.e-btn.e-flat {
      @if $skin-name == 'bootstrap4' {
        background-color: $cpicker-handler-tooltip-color;
        border-color: $cpicker-handler-tooltip-color;
        color: $gray-700;
      }

      &:hover,
      &:active {
        @if $skin-name == 'bootstrap4' {
          color: $gray-900;
        }
      }
    }
  }

  .e-popup.e-tooltip-wrap {
    &.e-color-picker-tooltip {
      background-color: $cpicker-handler-tooltip-color;
      border-color: $cpicker-handler-tooltip-color;
    }
  }
}

@include export-module('color-picker-bootstrap-dark-icons') {
  .e-container {
    & .e-value-switch-btn {
      &::before {
        content: '\e431';
      }
    }
  }
}

@include export-module('color-picker-bigger') {
  .e-bigger .e-colorpicker-wrapper,
  .e-bigger.e-colorpicker-wrapper,
  .e-bigger .e-colorpicker-container,
  .e-bigger.e-colorpicker-container {
    & .e-split-btn-wrapper {
      @if $skin-name == 'Material3' {
        box-shadow: none;
      }
      & .e-split-colorpicker.e-split-btn {
        line-height: $cpicker-bigger-split-line-height;
        @if $skin-name != 'tailwind3' {
          padding: $cpicker-bigger-split-btn-padding;
        }
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: $content-bg-color;
          border: $cpicker-split-btn-border;
        }

        & .e-selected-color {
          height: $cpicker-bigger-split-btn-icon-height;
          width: $cpicker-bigger-split-btn-icon-width;
        }
      }

      &.e-rtl {
        & .e-split-colorpicker.e-split-btn {
          @if $skin-name != 'tailwind3' {
            padding: $cpicker-bigger-split-btn-padding;
          }
        }
      }
    }

    .e-colorpicker-popup:not(.e-split-btn-wrapper):not(.e-dropdown-btn) {
      line-height: $color-zero-line-height;
    }
  }

  .e-bigger {
    & .e-container {
      @if $skin-name == 'Material3' {
        border-radius: $cpicker-bigger-popup-border-radius;
        box-shadow: $cpicker-bigger-box-shadow;
      }

      & .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider {
        @if $skin-name == 'bootstrap5.3' {
          top: $slider-preview-color-top;
        }
      }

      & .e-switch-ctrl-btn .e-ctrl-btn {
        @if $skin-name == 'bootstrap5.3' {
          width: $switch-ctrl-btn-width;
        }
        @if $skin-name == 'tailwind3' {
          font-size: $color-switch-ctrl-btn-tail-font-size;
          margin: $color-switch-ctrl-btn-tail-margin;
        }
        @else {
          margin: $color-bigger-switch-ctrl-margin;
        }
      }

      &.e-color-picker {
        @if $skin-name == 'Material3' {
          height: $cpicker-bigger-popup-container-height;
          width: $cpicker-bigger-popup-container-width;
        }
        @else {
          width: $cpicker-bigger-container-width;
        }

        & .e-switch-ctrl-btn .e-ctrl-btn .e-btn {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            height: 38px;
          }
        }

        & .e-switch-ctrl-btn {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            padding: $cpicker-bigger-ctrl-btn-padding;
          }
          @if $skin-name == 'fluent2' {
            padding: $switch-ctrl-btn-padding;
          }
          @if $skin-name == 'tailwind3' {
            height: $color-switch-ctrl-btn-height;
            align-content: center;
          }
        }

        & .e-switch-ctrl-btn .e-mode-switch-btn {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            height: 38px;
          }
          @if $skin-name == 'Material3' {
            height: $cpicker-bigger-switch-btn-height;
            width: $cpicker-bigger-switch-btn-width;
          }
        }
      }

      @media only screen and (max-width: 600px) {
        @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
          &.e-color-picker {
            width: $color-full-width !important; /* stylelint-disable-line declaration-no-important */
          }

          &.e-colorpicker-popup {
            width: $color-picker-popup-width !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }

      & .e-palette {
        & .e-tile {
          @if $skin-name == 'Material3' {
            height: $cpicker-tiles-height;
          }
          @else {
            height: $cpicker-bigger-tile-size;
          }
          width: $cpicker-bigger-tile-size;
        }

        @media only screen and (max-width: 600px) {
          @if $skin-name == 'Material3' {
            & .e-tile {
              width: $mat3-color-pic-title-width !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }
      }

      & .e-hsv-container {
        & .e-handler {
          @if $skin-name == 'bootstrap4' {
            height: 12px;
            width: 12px;
          }
          @if $skin-name == 'tailwind3' {
            height: $color-hsv-container-height;
            width: $color-hsv-container-width;
          }
        }

        & .e-hsv-color {
          height: $cpicker-bigger-container-height;
        }
      }

      & .e-custom-palette {
        &.e-palette-group {
          height: $cpicker-bigger-container-width;
        }
      }

      & .e-slider-preview {
        padding: $cpicker-bigger-slider-wrapper-padding;

        & .e-preview-container {
          margin-left: $cpicker-bigger-preview-margin-left;
          vertical-align: super;
          width: $cpicker-bigger-preview-size;
          @if $skin-name == 'tailwind3' {
            height: $color-slider-prew-container-height;
            & .e-preview {
              &.e-current {
                height: $color-slider-preview-current-height;
              }
              &.e-previous {
                height: $color-slider-preview-previous-height;
                top: $color-slider-preview-previous-top;
              }
            }
          }
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
            top: 5px;
          }
          @else if $skin-name == 'FluentUI' {
            top: $cpicker-preview-container-top;
          }
          @else if $skin-name == 'tailwind3' {
            top: $color-picker-preview-tail-top;
          }
          @else {
            top: $color-zero-padding-margin;
          }
        }

        @media only screen and (max-width: 600px) {
          & .e-preview-container {
            @if $skin-name == 'material' or $skin-name == 'FluentUI' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
              margin-left: $color-mob-preview-cont-margin-left !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }

        & .e-colorpicker-slider {
          width: $cpicker-bigger-slider-container-width;

          & .e-slider-container {
            height: $cpicker-bigger-slider-container-height;
            @if $skin-name == 'bootstrap4' {
              padding: 12px;
            }

            & .e-slider-track {
              @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
                height: $cpicker-bigger-slider-height;
              }
              @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
                border-radius: $color-slider-track-bot-border-radius;
              }
              @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
                height: $color-slider-height !important; /* stylelint-disable-line declaration-no-important */
              }
            }

            & .e-opacity-slider {
              & .e-opacity-empty-track {
                @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
                  height: 12px;
                }
                @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
                  height: $color-slider-height !important; /* stylelint-disable-line declaration-no-important */
                }
              }
            }

            & .e-handle {
              border-radius: $cpicker-bigger-slider-handle-radius;
              height: $cpicker-bigger-slider-handle-size;
              top: $cpicker-bigger-slider-handle-top;
              width: $cpicker-bigger-slider-handle-size;
            }
          }
        }

        & .e-switch-ctrl-btn {
          @if $skin-name == 'bootstrap4' {
            display: inline-block;
            white-space: nowrap;
            width: $color-full-width;
            padding: $color-bigger-switch-btn-padding;
          }

          & .e-ctrl-btn {
            width: $color-ctrl-btn-width;
          }

          & .e-cancel {
            @if $skin-name == 'bootstrap4' {
              margin-left: 10px;
            }
          }
        }
      }

      &.e-color-palette {
        & .e-palette {
          +.e-switch-ctrl-btn {
            padding: $cpicker-bigger-palette-ctrl-btn-padding;

            & .e-mode-switch-btn {
              @if $skin-name == 'Material3' {
                height: $cpicker-bigger-switch-btn-height;
                width: $cpicker-bigger-switch-btn-width;
              }
            }

            & .e-ctrl-btn .e-btn {
              @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
                line-height: 0;
              }
            }
          }
        }

        & .e-clr-pal-rec-wpr {
          padding: $cpicker-bigger-recent-color-wrap-pad;

          & .e-recent-clr-span {
            display: block;
            @if $skin-name == 'bootstrap4' {
              font-weight: 600;
            }
            @else if $skin-name == 'bootstrap-dark' {
              font-weight: normal;
            }
            font-size: $color-bgr-recent-clr-font-size;
            height: $cpicker-bigger-recent-color-span-hgt;
            padding: $cpicker-bigger-recent-color-span-pad;
            line-height: $cpicker-bigger-recent-color-span-line-hgt;
          }

          & .e-palette.e-recent-palette {
            padding: $cpicker-bigger-recent-color-tile-pad;

            & .e-tile {
              @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'highcontrast-light' or $skin-name == 'highcontrast' or $skin-name == 'bootstrap' {
                height: $cpicker-bgr-palette-title-height !important; /* stylelint-disable-line declaration-no-important */
              }
              @else {
                height: $cpicker-bigger-recent-color-tile-dim !important; /* stylelint-disable-line declaration-no-important */
              }
              width: $cpicker-bigger-recent-color-tile-dim !important; /* stylelint-disable-line declaration-no-important */
              margin: $cpicker-bigger-recent-color-tile-margin;
            }
          }
        }
      }

      & .e-input-container {
        width: $cpicker-bigger-input-container;

        & .e-float-input {
          margin-right: $cpicker-bigger-label-margin;
          @if $skin-name == 'tailwind3' {
            .e-float-text {
              font-weight: $font-weight-normal;
              font-size: $color-float-text-font-size !important; /* stylelint-disable-line declaration-no-important */
              right: $color-zero-padding-margin !important; /* stylelint-disable-line declaration-no-important */
            }
          }
          &:first-child {
            width: $cpicker-bigger-hex-label-width;

            & input {
              height: $cpicker-bigger-input-height;
            }
          }

          &.e-numeric {
            height: $cpicker-bigger-input-height;
            width: $cpicker-bigger-label-width;

            & input {
              height: $cpicker-bigger-numeric-input-height;
            }
          }
        }
      }

      @media only screen and (max-width: 600px) {
        & .e-input-container {
          @if $skin-name == 'fabric' {
            width: 89.8%;
          }
        }
      }

      &.e-color-palette .e-mode-switch-btn {
        @if $skin-name == 'bootstrap5.3' {
          width: $color-palette-switch-btn-width;
        }
      }

      & .e-css.e-value-switch-btn,
      & .e-mode-switch-btn {
        padding: $cpicker-bigger-switch-btn-padding;
        width: $cpicker-bigger-switch-btn-width;
        @if $skin-name == 'Material3' {
          border: none;
        }
        @if $skin-name == 'bootstrap4' or $skin-name == 'fluent2' or $skin-name == 'tailwind3'{
          height: $cpicker-bigger-switch-btn-width;
        }
        @if $skin-name == 'bootstrap5.3' {
          height: $switch-mode-height;
        }
        font-size: $color-bgr-value-mode-switch-font-size;
        line-height: $color-bgr-value-mode-switch-line-height;
      }

      & .e-mode-switch-btn {
        margin-top: $cpicker-bigger-type-switch-btn-margin;
      }

      &.sf-colorpicker .e-input-container .e-float-input {
        margin-right: $cpicker-blazor-bigger-input-margin;
      }
    }

    & .e-hide-opacity,
    &.e-hide-opacity {
      & .e-container {
        & .e-slider-preview {
          padding: $cpicker-bigger-slider-wrapper-padding;

          & .e-preview-container {
            vertical-align: initial;
          }
        }

        & .e-float-input {
          &:first-child {
            width: $cpicker-opacity-hidden-hex-width;
          }

          &.e-numeric {
            width: $cpicker-bigger-opacity-hidden-numeric-width;
          }
        }
      }
    }

    &.e-hide-hex-value,
    & .e-hide-hex-value {
      & .e-container {
        & .e-float-input {
          &.e-numeric {
            width: $cpicker-bigger-hex-hidden-width;
          }
        }
      }

      &.e-hide-opacity .e-container {
        & .e-float-input {
          &.e-numeric {
            width: $cpicker-hex-opacity-hidden-width;
          }
        }
      }
    }

    &.e-hide-valueswitcher,
    & .e-hide-valueswitcher {
      & .e-container {
        & .e-input-container {
          width: $color-full-width;
        }

        & .e-float-input {
          &:last-child {
            margin-right: $color-zero-padding-margin;
          }

          &.e-numeric {
            width: $cpicker-bigger-value-hidden-label-width;
          }
        }
      }

      &.e-hide-opacity .e-container {
        & .e-float-input {
          &:first-child {
            width: $cpicker-value-opacity-hide-hex-label-width;
          }

          &.e-numeric {
            width: $cpicker-bigger-value-opacity-hide-label-width;
          }
        }
      }

      &.e-hide-hex-value,
      & .e-hide-hex-value {
        & .e-container {
          & .e-float-input {
            &.e-numeric {
              width: $cpicker-bigger-hex-hidden-width;
            }
          }
        }

        &.e-hide-opacity .e-container {
          & .e-float-input {
            &.e-numeric {
              width: $cpicker-bigger-value-opacity-hex-hidden-width;
            }
          }
        }
      }
    }
  }

  .e-bigger .e-rtl,
  .e-bigger.e-rtl {
    & .e-container {
      & .e-slider-preview {
        & .e-preview-container {
          margin-left: $color-zero-padding-margin;
          margin-right: $cpicker-bigger-preview-margin-left;
        }
      }

      & .e-selected-value {
        & .e-float-input {
          margin-left: $cpicker-bigger-label-margin;
          margin-right: $color-zero-padding-margin;
        }
      }

      &.sf-colorpicker .e-selected-value .e-input-container .e-float-input {
        margin-left: $cpicker-blazor-bigger-input-margin;
      }
    }

    &.e-hide-valueswitcher {
      & .e-container {
        & .e-float-input {
          &:last-child {
            margin-left: $color-zero-padding-margin;
          }
        }
      }
    }
  }

  .e-bigger.e-hide-switchable-value,
  .e-bigger .e-hide-switchable-value {
    & .e-container {
      & .e-input-container {
        & .e-float-input:first-child {
          width: $color-full-width;
        }
      }
    }
  }

  .e-bigger .e-popup.e-tooltip-wrap,
  .e-bigger.e-popup.e-tooltip-wrap {
    &.e-color-picker-tooltip {
      min-width: $color-bigger-popup-min-width;

      & .e-tip-content {
        height: $cpicker-bigger-tooltip-preview-size;
        width: $cpicker-bigger-tooltip-preview-size;
      }
    }
  }

  @if $skin-name == 'fluent2' {
    .e-bigger .e-container .e-switch-ctrl-btn .e-ctrl-btn {
      width: $bgr-container-switch-btn-width;
    }

    .e-bigger .e-container.e-color-picker .e-colorpicker-slider .e-slider-container:first-child {
      margin-bottom: $color-bigger-slider-first-child-margin-bottom !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-bigger .e-container .e-slider-preview .e-colorpicker-slider .e-slider-container .e-slider {
      top: $bgr-slider-preview-top !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

//default
//enddefault

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

$cmenu-back-icon: '\e94b' !default;
$cmenu-back-icon-margin: 12px !default;
$cmenu-bigger-caret-font-size: 12px !default;
$cmenu-bigger-font-size: 15px !default;
$cmenu-bigger-li-height: 40px !default;
$cmenu-bigger-li-line-height: 40px !default;
$cmenu-bigger-max-width: 280px !default;
$cmenu-bigger-min-width: 112px !default;
$cmenu-caret-blank-icon: 14px !default;
$cmenu-caret-font-size: 12px !default;
$cmenu-caret-color: $grey-dark-font !default;
$cmenu-caret-icon: '\e207' !default;
$cmenu-caret-icon-rtl: '\e990' !default;
$cmenu-caret-li-padding: 36px !default;
$cmenu-caret-right: 7px !default;
$cmenu-color: $grey-dark-font !default;
$cmenu-disable-text: rgba($grey-dark-font, .65) !default;
$cmenu-font-size: 14px !default;
$cmenu-font-weight: normal !default;
$cmenu-icon-margin-right: 12px !default;
$cmenu-li-bgcolor: $grey-88 !default;
$cmenu-li-border-color: $grey-99 !default;
$cmenu-li-border-style: solid !default;
$cmenu-li-border-width: 1px !default;
$cmenu-li-height: 26px !default;
$cmenu-li-padding: 0 14px !default;
$cmenu-li-right-padding: 14px !default;
$cmenu-li-selection-bgcolor: $grey-99 !default;
$cmenu-li-selection-font-color: $grey-dark-font !default;
$cmenu-max-width: 240px !default;
$cmenu-icon-color: $grey-dark-font !default;
$cmenu-icon-disabled-color: rgba($grey-dark-font, .65) !default;
$cmenu-icon-font-size: 16px !default;
$cmenu-icon-bigger-font-size: 16px !default;
$cmenu-min-width: 120px !default;
$cmenu-parent-ul-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
$cmenu-seperator-bigger-padding: 5px 0 !default;
$cmenu-seperator-padding: 3px 0 !default;
$cmenu-selected-color: $grey-dark-font !default;
$cmenu-sub-ul-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
$cmenu-ul-bgcolor: $grey !default;
$cmenu-ul-border: 1px solid $grey-99 !default;
$cmenu-ul-border-radius: 4px !default;
$cmenu-ul-padding: 0 !default;
$cmenu-ul-bigger-padding: 5px 0 !default;
$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
$cmenu-caret-hover-color: $cmenu-caret-color !default;
$cmenu-hover-icon-color: $cmenu-icon-color !default;
$cmenu-li-hover-outline-offset: 0 !default;
$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
$cmenu-li-selected-outline-offset: 0 !default;
$cmenu-border-none: 0 !default;
$cmenu-padding-none: 0 !default;
$cmenu-margin-none: 0 !default;
$cmenu-scroll-margin-top: -12px !default;
$cmanu-scroll-padding: 16px 0 !default;
$cmenu-container-ul-font-family: $font-family !default;
$cmenu-ul-height: 1px !default;
$cmenu-height-none: 0 !default;
$cmenu-vscroll-bar-height: 100% !default;
$cmenu-scroll-nav-height: 16px !default;
$cmenu-auto-height: auto !default;
$cmenu-normal-line-height: normal !default;
$cmenu-disabled-item-opacity: 1 !default;

@mixin ul-layout {
  font-weight: $cmenu-font-weight;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  user-select: none;

  &.e-ul,
  &.e-ul * {
    box-sizing: border-box;

    &:focus {
      outline: none;
    }
  }
}

@mixin ul-size {
  font-size: $cmenu-font-size;
  padding: $cmenu-ul-padding;
}

@mixin li-layout {
  cursor: pointer;
  position: relative;

  &.e-menu-hide {
    display: none;
  }

  &.e-menu-header {
    border-bottom-style: $cmenu-li-border-style;
    border-bottom-width: $cmenu-li-border-width;
  }

  & .e-menu-url {
    text-decoration: none;
  }

  & .e-menu-icon {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }

  &.e-separator {
    cursor: auto;
    line-height: normal;
    pointer-events: none;
  }
}

@mixin li-size {
  height: $cmenu-li-height;
  line-height: $cmenu-li-height;
  @if $skin-name == 'fluent2' {
    line-height: 19px;
    height: 32px;
  }
  padding: $cmenu-li-padding;

  & .e-menu-url {
    display: inline-block;
    min-width: 120px;
  }

  & .e-menu-icon {
    font-size: $cmenu-icon-font-size;
    line-height: $cmenu-li-height;
    margin-right: $cmenu-icon-margin-right;
    width: 1em;
  }

  & .e-caret {
    line-height: $cmenu-li-height;
    margin-left: 16px;
    margin-right: 0;
    position: absolute;
    right: $cmenu-caret-right;
    @if $skin-name == 'fluent2' {
      padding: 4px 0;
    }
  }

  &.e-menu-caret-icon {
    padding-right: $cmenu-caret-li-padding;
  }

  &.e-separator {
    @include separator-size;
    margin: $cmenu-seperator-padding;
  }
}

@mixin separator-size {
  border-bottom-style: $cmenu-li-border-style;
  border-bottom-width: $cmenu-li-border-width;
  height: auto;
}

@mixin rtl-li-layout {
  & .e-menu-icon {
    margin-right: 0;
  }

  & .e-caret {
    margin-left: 0;
    margin-right: 16px;
    right: auto;
  }
}

@mixin rtl-li-size {
  & .e-menu-icon {
    margin-left: $cmenu-icon-margin-right;
    @if $skin-name == 'fluent2' {
      margin: 3px 3px 3px 5px;
    }
  }

  & .e-caret {
    left: $cmenu-caret-right;
  }

  &.e-menu-caret-icon {
    @if $skin-name != 'FluentUI' {
      padding-left: $cmenu-caret-li-padding;
    }
    padding-right: $cmenu-li-right-padding;
  }

  &.e-blankicon {
    padding-left: $cmenu-caret-blank-icon;

    &.e-menu-caret-icon {
      padding-left: $cmenu-caret-li-padding;
    }
  }
}

@include export-module('contextmenu-layout') {
  .e-contextmenu-wrapper,
  .e-contextmenu-container {
    @at-root {
      & ul {
        @include ul-layout;
        @include ul-size;
        border: $cmenu-ul-border;
        border-radius: $cmenu-ul-border-radius;
        box-shadow: $cmenu-sub-ul-box-shadow;
        display: none;
        min-width: $cmenu-min-width;
        position: absolute;

        &.e-contextmenu {
          box-shadow: $cmenu-parent-ul-box-shadow;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'Material3' {
            padding: $cmenu-nrml-ul-padding;
          }
          &.e-contextmenu-template {
            .e-menu-caret-icon {
              display: flex;
            }
          }
        }

        &.e-ul {
          font-family: $cmenu-container-ul-font-family;
        }

        & .e-menu-item  {
          @include li-layout;
          @include li-size;

          & .e-menu-icon {
            @if $skin-name == 'fluent2' {
              margin-bottom: $cmenu-item--icon-margin-bottom;
            }
          }

          & .e-caret {
            font-size: $cmenu-caret-font-size;
          }

          & .e-previous {
            margin-right: $cmenu-back-icon-margin;
          }

          &.e-disabled {
            cursor: auto;
            pointer-events: none;
            @if $skin-name == 'tailwind3' {
              color: $flyout-text-color-disabled;
            }
          }

          &.e-separator {
            @if $skin-name == 'fluent2' {
              padding: $cmenu-padding-none !important;  /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible {
            @if $skin-name == 'fluent2' {
              border-radius: $cmenu-item-focus-viible-border-radius;
              background-color: $content-bg-color;
              box-shadow: $shadow-focus-ring1;
            }
            @if $skin-name == 'tailwind3' {
              box-shadow: $shadow-focus-ring2;
              background: $flyout-bg-color;
            }
          }
        }

        .e-menu-item .e-checkbox-wrapper {
          width: max-content;
        }
      }
    }

    &.e-sfcontextmenu {
      position: absolute;

      & .e-menu-vscroll {
        position: absolute;
      }

      & ul {
        white-space: nowrap;

        &.e-transparent {
          background: transparent;
          border: $cmenu-border-none;
          box-shadow: none;
          height: $cmenu-ul-height;
          left: 0;
          min-width: 0;
          padding: $cmenu-padding-none;
          top: 0;
          width: 0;
        }

        &.e-transparent .e-menu-item {
          height: $cmenu-height-none;
          padding: $cmenu-padding-none;
        }

        &.e-transparent .e-menu-item.e-separator {
          border: $cmenu-border-none;
          margin: $cmenu-margin-none;
        }
      }
    }

    &:not(.e-menu-container) {
      & .e-menu-vscroll.e-vscroll {
        box-shadow: $cmenu-parent-ul-box-shadow;

        & .e-vscroll-bar {
          height: $cmenu-vscroll-bar-height;
          width: inherit;
        }

        & .e-scroll-nav {
          height: $cmenu-scroll-nav-height;
        }

        &:not(.e-scroll-device) {
          padding: $cmanu-scroll-padding;
        }

        & ul {
          box-shadow: none;
          margin-top: $cmenu-scroll-margin-top;
          width: inherit;
        }
      }
    }
  }

  .e-rtl.e-contextmenu-wrapper .e-menu-item,
  .e-rtl.e-contextmenu-container .e-menu-item {
    @include rtl-li-layout;
    @include rtl-li-size;
  }

  .e-contextmenu-wrapper .e-menu-item:not(.e-control),
  .e-contextmenu-container .e-menu-item:not(.e-control) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .e-small .e-contextmenu-wrapper ul .e-menu-item .e-caret,
  .e-small .e-contextmenu-wrapper ul .e-menu-icon {
    @if $skin-name == 'fluent2' {
      font-size: $cmenu-small-caret-icon-font-size;
    }
  }

  .e-small .e-contextmenu-wrapper ul .e-menu-item,
  .e-small.e-contextmenu-wrapper ul .e-menu-item {
    @if $skin-name == 'tailwind3' {
      font-size: $cmenu-small-font-size;
      height: $cmenu-small-li-height;
      line-height: $cmenu-small-li-line-height;
      .e-caret,
      .e-menu-icon {
        font-size: $cmenu-small-font-size;
        line-height: $cmenu-small-li-line-height;
      }
      &.e-separator {
        height: $cmenu-auto-height;
      }
    }
  }
}

@mixin focused-icon-color {
  @if $skin-name != 'bootstrap5' {
    & .e-caret {
      color: $cmenu-caret-color;
      @if $skin-name == 'fluent2' {
        color: $cmenu-hover-icon-color;
      }
    }

    & .e-menu-icon {
      @if $skin-name == 'fluent2' {
        color: $cmenu-hover-icon-color;
      }
      @else if $skin-name == 'bootstrap5.3' {
        color: $cmenu-hover-icon-color;
      }
      @else {
        color: $cmenu-icon-color;
      }
    }
  }
}

@mixin selected-icon-color {
  @if $skin-name != 'bootstrap5' {
    & .e-caret {
      color: $cmenu-caret-hover-color;
    }

    & .e-menu-icon {
      @if $skin-name == 'bootstrap5.3' {
        color: $flyout-text-color-pressed;
      }
      @else {
        color: $cmenu-hover-icon-color;
      }
    }
  }
}

@mixin icon-color {
  &.e-menu-header {
    border-bottom-color: $cmenu-li-border-color;
  }
  @include focused-icon-color;
}

@mixin focused-color {
  background-color: $cmenu-li-bgcolor;
  color: $cmenu-li-selection-font-color;
  outline: $cmenu-li-hover-outline;
  outline-offset: $cmenu-li-hover-outline-offset;
  @if $skin-name == 'fluent2' {
    border-radius: 4px;
  }
}

@mixin selected-color {
  background-color: $cmenu-li-selection-bgcolor;
  color: $cmenu-selected-color;
  outline: $cmenu-li-selected-outline;
  outline-offset: $cmenu-li-selected-outline-offset;
  @if $skin-name == 'fluent2' {
    border-radius: 4px;
    box-shadow: none;
  }
}

@mixin disabled-color {
  & .e-disabled {
    color: $cmenu-disable-text;
    opacity: $cmenu-disabled-item-opacity;
    & .e-menu-icon {
      color: $cmenu-icon-disabled-color;
    }

    & .e-caret {
      color: $cmenu-icon-disabled-color;
    }

    & .e-menu-url {
      color: $cmenu-disable-text;
    }
  }
}

@include export-module('contextmenu-theme') {
  .e-contextmenu-wrapper,
  .e-contextmenu-container {
    @at-root {
      & ul {
        @if $skin-name == 'Material3' {
          background: $cmenu-ul-bgcolor;
        }
        @else {
          background-color: $cmenu-ul-bgcolor;
        }
        color: $cmenu-color;

        & .e-menu-item  {
          @include icon-color;
          @if $skin-name == 'fluent2' {
            & .e-menu-icon,
            & .e-caret {
              color: $icon-color;
            }
          }

          & .e-menu-url {
            color: $cmenu-color;
          }

          &.e-focused {
            @include focused-color;
            @include focused-icon-color;
          }

          &.e-selected {
            @include selected-color;
            @include selected-icon-color;
          }

          &:active {
            @if $skin-name == 'bootstrap5.3' {
              background-color: $cmenu-li-selection-bgcolor;
              color: $cmenu-selected-color;

              & .e-menu-icon {
                color: $cmenu-selected-color;
              }
            }
          }
        }

        @include disabled-color;

        & .e-separator {
          border-bottom-color: $cmenu-li-border-color;
        }
      }
    }

    &:not(.e-menu-container) {
      & .e-menu-vscroll.e-vscroll {
        @if $skin-name == 'Material3' {
          background: $cmenu-ul-bgcolor;
        }
        @else {
          background-color: $cmenu-ul-bgcolor;
        }
        border: $cmenu-ul-border;

        & .e-scroll-nav {
          border-color: $cmenu-li-border-color;
          @if $skin-name == 'material-dark' {
            background: $cmenu-ul-bgcolor;
          }
        }
      }
    }
  }
}

@include export-module('context-menu-bootstrap-dark-icons') {
  .e-contextmenu-wrapper,
  .e-contextmenu-container {
    @at-root {
      & ul {
        & .e-menu-item  {
          & .e-previous {
            &::before {
              content: '\e94b';
            }
          }

          & .e-caret {
            &::before {
              content: '\e207';
            }
          }
        }
      }
    }
  }

  .e-rtl.e-contextmenu-wrapper .e-menu-item,
  .e-rtl.e-contextmenu-container .e-menu-item {
    & .e-caret {
      &::before {
        content: '\e990';
      }
    }
  }
}

@mixin bigger-rtl-blank-icon {
  padding-left: $cmenu-caret-blank-icon;

  &.e-menu-caret-icon {
    padding-left: $cmenu-caret-li-padding;
  }
}

@mixin bigger-ul-size {
  font-size: $cmenu-bigger-font-size;
  padding: $cmenu-ul-bigger-padding;
  white-space: nowrap;
}

@mixin bigger-li-size {
  height: $cmenu-bigger-li-height;
  line-height: $cmenu-bigger-li-line-height;
  @if $skin-name == 'fluent2' {
    height: $cmenu-bigger-li-size-height;
    line-height: $cmenu-bigger-li-size-line-height;
    padding: $cmenu-bigger-li-size-padding;
  }
  &.e-menu-caret-icon {
    @if $skin-name == 'fluent2' {
      padding: $cmenu-caret-icon-padding;
    }
  }

  & .e-menu-icon {
    font-size: $cmenu-icon-bigger-font-size;
    line-height: $cmenu-bigger-li-line-height;
    @if $skin-name == 'tailwind' {
      margin-right: $cmenu-icon-bigger-margin-right;
    }
  }

  & .e-caret {
    line-height: $cmenu-bigger-li-line-height;
    @if $skin-name == 'fluent2' {
      margin: $cmenu-bigger-caret-icon-margin;
    }
  }

  &.e-separator {
    height: $cmenu-auto-height;
    line-height: $cmenu-normal-line-height;
  }
}

@include export-module('contextmenu-bigger') {
  .e-bigger .e-contextmenu-wrapper ul,
  .e-bigger.e-contextmenu-wrapper ul,
  .e-bigger .e-contextmenu-container ul,
  .e-bigger.e-contextmenu-container ul {
    @include bigger-ul-size;
    box-shadow: $cmenu-parent-ul-box-shadow;
    max-width: $cmenu-bigger-max-width;
    min-width: $cmenu-bigger-min-width;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or  $skin-name == 'Material3' {
      padding: $cmenu-bigger-ul-padding;
    }

    & .e-menu-item  {
      @include bigger-li-size;

      & .e-menu-icon {
        @if $skin-name == 'fluent2' {
          margin-bottom: $cmenu-item-icon-margin-top;
        }
      }

      & .e-caret {
        font-size: $cmenu-bigger-caret-font-size;
        @if $skin-name == 'fluent2' {
          padding: $cmenu-padding-none;
        }
      }
    }
  }

  .e-bigger .e-contextmenu-wrapper.e-rtl ul .e-blankicon,
  .e-bigger.e-contextmenu-wrapper.e-rtl ul .e-blankicon,
  .e-bigger .e-contextmenu-container.e-rtl ul .e-blankicon,
  .e-bigger.e-contextmenu-container.e-rtl ul .e-blankicon {
    @if $skin-name != 'FluentUI' {
      @include bigger-rtl-blank-icon;
    }
  }

  .e-bigger .e-contextmenu-wrapper.e-rtl ul .e-menu-item.e-menu-caret-icon {
    @if $skin-name == 'fluent2' {
      padding: $cmenu-bigger-rtl-caret-icon-padding;
    }
  }

  .e-bigger .e-small .e-contextmenu-wrapper ul .e-menu-item,
  .e-bigger .e-small.e-contextmenu-wrapper ul .e-menu-item {
    @if $skin-name == 'tailwind3' {
      height: $cmenu-bigger-small-li-height;
      font-size: $cmenu-bigger-font-size;
      line-height: $cmenu-bigger-small-li-line-height;
      &.e-separator {
        height: $cmenu-auto-height;
      }
      .e-menu-icon {
        line-height: $cmenu-bigger-small-li-line-height;
      }
    }
  }
}

/*! component's theme wise override bootstrap-definitions and variables */

// Generic

$panel-position: absolute !default;
$grid-layout-position: relative !default;
$panel-box-sizing: border-box !default;
$icon-zero: 0 !default;
$icon-border-radius: 50% !default;

// Mouse

$panel-header-height: 28px !default;
$panel-header-padding: 4px 12px !default;
$panel-header-color: $grey-dark-font !default;
$panel-header-font-size: 14px !default;
$panel-header-font-weight: 500 !default;
$panel-header-border-bottom: 1px solid $grey-99 !default;
$panel-header-font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, '-apple-system', 'BlinkMacSystemFont' !default;
$panel-header-white-space: nowrap !default;
$panel-header-overflow: hidden !default;
$panel-header-text-overflow: ellipsis !default;

// Touch

$panel-bigger-header-height: 30px !default;
$panel-bigger-header-padding: 0 12px !default;
$panel-bigger-header-color: $grey-cc !default;
$panel-bigger-header-font-size: 14px !default;
$panel-bigger-header-font-weight: 500 !default;

// Panel styles

$panel-background: $grey-base !default;
$panel-border: 1px $grey-88 solid !default;
$panel-hover-border: 1px $grey-white solid !default;
$panel-active-border: 1px $brand-primary solid !default;
$panel-position: absolute !default;
$panel-box-sizing: border-box !default;
$panel-border-radius: 2px !default;
$panel-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .15) !default;
$panel-full-height: 100% !default;
$panel-full-width: 100% !default;

// Blazor ContentTemplate styles

$panel-content-template-height: inherit !default;
$panel-content-template-width: inherit !default;

// icons styles

$panel-resize-one-dimensional-icon-height: 8px !default;
$panel-resize-one-dimensional-icon-width: 8px !default;
$panel-resize-one-dimensional-icon-background: $grey-white !default;
$panel-resize-one-dimensional-icon-border: 1px $brand-primary solid !default;
$panel-resize-one-dimensional-icon-shadow: 0 0 3px rgba(0, 0, 0, .25) !default;

$panel-resize-two-dimensional-icon-height: 16px !default;
$panel-resize-two-dimensional-icon-width: 16px !default;
$panel-resize-two-dimensional-inner-icon-height: 8px !default;
$panel-resize-two-dimensional-inner-icon-width: 8px !default;
$panel-resize-two-dimensional-icon-background: $brand-primary !default;
$panel-resize-two-dimensional-icon-color: $grey-cc !default;
$panel-resize-two-dimensional-icon-border: 2px $grey-white solid !default;
$panel-resize-two-dimensional-icon-shadow: 0 0 3px rgba(0, 0, 0, .25) !default;

// south-east-icon-styles

$panel-south-east-icon-right: -6px !default;
$panel-south-east-icon-bottom: -5px !default;

// south-west-icon-style

$panel-south-west-icon-left: -6px !default;
$panel-south-west-icon-bottom: -5px !default;

// north-east-icon-styles

$panel-north-east-icon-right: -6px !default;
$panel-north-east-icon-top: -5px !default;

// north-west-icon-styles

$panel-north-west-icon-left: -6px !default;
$panel-north-west-icon-top: -5px !default;

// droppable area border

$panel-drop-border: 2px $brand-primary dotted !default;
$panel-drop-background: rgba($brand-primary, .2) !default;
$panel-drop-border-radius: 0 !default;

// dragging element style

$panel-dragging-cursor: move !default;
/* stylelint-disable */
$panel-dragging-zindex: 1111 !important !default;
$panel-drag-prevent: none !default;
$element-width-complete: 100% !important !default;
//gridlines
$gridline-background: #141414 !default;
$gridline-border: #2C2C2C !default;
$gridline-border-width: 1px !default;

@include export-module('dashboardlayout-layout') {
  .e-dashboardlayout.e-control {

    .e-dashboard-gridline-table {
      background: $gridline-background;
      border-collapse: collapse;
      height: $panel-full-height;
      width: $panel-full-width;

      td.e-dashboard-gridline {
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
          border: $gridline-border-width dashed $gridline-border;
        }
        @else {
          border: $gridline-border-width dotted $gridline-border;
        }

        @if ($skin-name == 'bootstrap5' or $skin-name == 'fluent2') {
          border-radius: $gridline-border-radius;
        }
        position: absolute;
      }
    }

    &.e-responsive {
      width: $element-width-complete;
    }

    &.e-prevent {
      user-select: $panel-drag-prevent;
    }

    & .e-panel.e-ssr {
      position: relative;
    }

    & .e-panel {
      border: $panel-border;
      height: $panel-full-height;
      user-select: none;
      width: $panel-full-width;

      & .e-resize.e-dl-icon {
        @if ($skin-name == 'tailwind') {
          line-height: 9px;
        }
      }

      &:hover {
        @if ($skin-name != 'tailwind' and $skin-name != 'fluent2') {
          border: $panel-hover-border;
        }
        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          box-shadow: $panel-hover-box-shadow;
        }
        @if $skin-name == 'fluent2' {
          background: $panel-hover-background;
        }

        & .e-panel-container {
          & .e-resize.e-dl-icon {
            display: block;
          }
        }
      }

      &:active {
        @if ($skin-name != 'tailwind' or $skin-name != 'tailwind3') {
          border: $panel-active-border;
        }
      }

      & .e-panel-container {
        height: $panel-full-height;
        width: $panel-full-width;

        & .e-panel-content{
          @if $skin-name == 'tailwind' {
            padding: $panel-content-padding;
          }

          .e-blazor-template {
            height: $panel-content-template-height;
            width: $panel-content-template-width;
          }
        }

        & .e-resize.e-dl-icon {
          display: none;
        }
      }

      @if $skin-name != 'highcontrast' {
        border-radius: $panel-border-radius;
      }

      &.e-panel-transition {
        transition: top .1s, left .1s;
      }

      & .e-panel-header {
        border-bottom: $panel-header-border-bottom;
        color: $panel-header-color;
        font-family: $panel-header-font-family;
        font-size: $panel-header-font-size;
        font-weight: $panel-header-font-weight;
        height: $panel-header-height;
        padding: $panel-header-padding;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
          line-height: $panel-header-line-height;
        }

        @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind' or $skin-name == 'Material3') {
          border-top-left-radius: $panel-header-border-radius;
          border-top-right-radius: $panel-header-border-radius;
        }

        & div {
          overflow: $panel-header-overflow;
          text-overflow: $panel-header-text-overflow;
          white-space: $panel-header-white-space;
        }

        & .e-header-content {
          display: inline-block;
        }

        & .e-header-template {
          float: right;
        }
      }

      & .e-resize.e-single,
      & .e-resize.e-double {
        position: $panel-position;
        touch-action: none;

        &.e-east,
        &.e-west,
        &.e-north,
        &.e-south {
          border: $panel-resize-one-dimensional-icon-border;
        }

        &.e-east:hover {
          cursor: e-resize;
        }

        &.e-west:hover {
          cursor: w-resize;
        }

        &.e-north:hover {
          cursor: n-resize;
        }

        &.e-south:hover {
          cursor: s-resize;
        }

        &.e-north-west:hover {
          cursor: nw-resize;
        }

        &.e-north-east:hover {
          cursor: ne-resize;
        }

        &.e-south-west:hover {
          cursor: sw-resize;
        }

        &.e-south-east:hover {
          cursor: se-resize;
        }
      }

      & .e-resize.e-single::before,
      & .e-resize.e-double::before {
        font-family: 'e-icons';
        position: $panel-position;
      }

      &.e-dragging,
      &.e-item-moving {
        cursor: $panel-dragging-cursor;
        z-index: $panel-dragging-zindex;
        @if $skin-name == 'fluent2' {
          border: $panel-drgging-item-moving-border;
        }
      }

      &.e-rtl {
        & .e-panel-header {
          & .e-header-template {
            float: left;
          }
        }
      }
    }

    & .e-drag:hover {
      cursor: $panel-dragging-cursor;
    }

    & .e-drag-restrict {
      &.e-drag:hover,
      .e-drag:hover {
        cursor: default;
      }
    }

    .e-holder {
      background: $panel-drop-background;
      border: $panel-drop-border;
      border-radius: $panel-drop-border-radius;
      position: $panel-position;

      &.e-holder-transition {
        transition: top .3s, left .3s;
      }

      @if $skin-name != 'highcontrast' {
        border-radius: $panel-border-radius;
      }
    }
  }

  .e-content-placeholder.e-dashboardlayout.e-placeholder-dashboardlayout {
    height: $panel-full-height;
    width: $panel-full-width;
  }
}

@include export-module('dashboardlayout-theme') {
  .e-dashboardlayout.e-control {
    display: block;
    position: $grid-layout-position;

    & .e-panel {
      background: $panel-background;
      box-shadow: $panel-box-shadow;
      box-sizing: $panel-box-sizing;
      position: $panel-position;

      & .e-panel-container {
        & .e-panel-header {
          color: $panel-header-color;
          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'Material3' or $skin-name == 'Material3-dark') {
            background: $panel-header-bg-color;
            box-sizing: $panel-box-sizing;
          }
        }

        & .e-resize.e-single {
          background: none;
        }

        & .e-resize.e-double {
          color: $panel-resize-two-dimensional-icon-color;
          font-size: $panel-resize-two-dimensional-inner-icon-height;
          height: $panel-resize-two-dimensional-icon-height;
          width: $panel-resize-two-dimensional-icon-width;

          &.e-south-east-double {
            bottom: $panel-south-east-icon-bottom;
            right: $panel-south-east-icon-right;
          }

          &.e-south-west-double {
            bottom: $panel-south-west-icon-bottom;
            left: $panel-south-west-icon-left;
          }

          &.e-north-west-double {
            left: $panel-north-west-icon-left;
            top: $panel-north-west-icon-top;
          }

          &.e-north-east-double {
            right: $panel-north-east-icon-right;
            top: $panel-north-east-icon-top;
          }

          &.e-north-east-shrink {
            right: $panel-north-east-icon-right;
            top: $panel-north-east-icon-top;
          }

          &.e-north-west-shrink {
            left: $panel-north-west-icon-left;
            top: $panel-north-west-icon-top;
          }

          &.e-south-west-shrink {
            bottom: $panel-south-west-icon-bottom;
            left: $panel-south-west-icon-left;
          }

          &.e-south-east-shrink {
            bottom: $panel-south-east-icon-bottom;
            right: $panel-south-east-icon-right;
          }

          &.e-north-east-expand {
            right: $panel-north-east-icon-right;
            top: $panel-north-east-icon-top;
          }

          &.e-north-west-expand {
            left: $panel-north-west-icon-left;
            top: $panel-north-west-icon-top;
          }

          &.e-south-west-expand {
            bottom: $panel-south-west-icon-bottom;
            left: $panel-south-west-icon-left;
          }

          &.e-south-east-expand {
            bottom: $panel-south-east-icon-bottom;
            right: $panel-south-east-icon-right;
          }
        }
      }

      &:active {
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
          background: $panel-active-background;
          @if ($skin-name == 'tailwind3') {
            box-shadow: $shadow-md;
          }
        }
      }

      &.e-dragging {
        &:active {
          @if ($skin-name == 'tailwind') {
            background: $content-bg-color;
            box-shadow: $panel-active-drag-box-shadow;
          }
          @else if ($skin-name == 'tailwind3') {
            background: $panel-active-background;
            box-shadow: $shadow-md;
          }
        }
      }
    }
  }
}

@include export-module('dashboardlayout-bootsrtap-icons') {
  .e-dashboardlayout.e-control {
    & .e-panel {

      & .e-resize.e-single,
      & .e-resize.e-double {
        &.e-east {
          height: 100%;
          padding: 20px 0;
          right: 1px;
          top: 0;
          width: 12px;
        }

        &.e-west {
          height: 100%;
          left: 0;
          padding: 20px 0;
          top: 0;
          width: 12px;
        }

        &.e-north {
          height: 12px;
          padding: 0 20px;
          top: 1px;
          width: 100%;
        }

        &.e-south {
          bottom: 1px;
          height: 12px;
          padding: 0 20px;
          width: 100%;
        }

        &.e-south-east {
          bottom: 0;
          right: 1px;
          z-index: 10;
        }

        &.e-north-west {
          left: 2px;
          top: 2px;
          z-index: 10;
        }

        &.e-north-east {
          right: 2px;
          top: 2px;
          z-index: 10;
        }

        &.e-south-west {
          bottom: 1px;
          left: 1px;
          z-index: 10;
        }

        &.e-south-east::before {
          bottom: 0;
          content: '\eb08';
          font-size: 12px;
          position: absolute;
          right: 0;
        }

        &.e-south-west::before {
          bottom: 0;
          content: '\eb08';
          font-size: 12px;
          left: 0;
          position: absolute;
          transform: rotateY(180deg);
        }
      }
    }
  }
}

@mixin bigger-header-style {
  font-size: $panel-bigger-header-font-size;
  font-weight: $panel-bigger-header-font-weight;
  height: $panel-bigger-header-height;
  padding: $panel-bigger-header-padding;
  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
    line-height: $panel-bigger-header-line-height;
  }
}

@include export-module('dashboardlayout-bigger') {
  .e-bigger {
    .e-dashboardlayout.e-control {
      & .e-panel {
        & .e-panel-header {
          @include bigger-header-style;
        }

        & .e-panel-content {
          @if $skin-name == 'tailwind' {
            padding: $panel-bigger-content-padding;
          }
        }
      }
    }
  }

  .e-bigger {
    & .e-panel-header {
      color: $panel-bigger-header-color;
    }
  }

  .e-bigger {
    & .e-panel-header {
      @include bigger-header-style;
    }
  }
}

//default
$datepicker-icon-color: none !default;
$datepicker-active-icon-color: $datepicker-icon-color !default;
$datepicker-popup-box-shadow: 0 6px 12px rgba($base-font, .5) !default;
$datepicker-input-border-style: none !default;
$datepicker-popup-border-radius: 4px !default;
$datepicker-calendar-border-style: none !default;
$datepicker-icon: '\e960' !default;
$datepicker-popup-border: 1px solid $grey-44 !default;
$datepicker-icon-font-size: 16px !default;
$datepicker-bigger-icon-font-size: 18px !default;
$datepicker-overlay: rgba($grey-base, .6) !default;
$datepicker-icon-normal-margin: 0 !default;
$datepicker-icon-bigger-margin: 0 !default;
$datepicker-icon-hover-color: $grey-e6 !default;
$datepicker-popup-bg-color: $grey-dark !default;
$datepicker-icon-border-radius: 0 !default;
$datepicker-box-sizing: border-box !default;
$datepicker-othermonth-row: table-row !default;
$datepicker-modal-header-bg: $datepicker-popup-bg-color !default;
$datepicker-modal-header-color: $grey-dark-font !default;
$datepicker-modal-header-display: block !default;
$datepicker-calendar-tbody-landscape-height: 150px !default;

// mouse small icon
$datepicker-small-icon-font-size: 14px !default;

// Touch small icon
$datepicker-bigger-small-icon-font-size: 18px !default;
$modal-year-font-size: 14px !default;
$modal-year-font-weight: 500 !default;
$modal-year-line-height: 32px !default;
$modal-month-font-size: 20px !default;
$modal-month-font-weight: 500 !default;
$modal-month-line-height: 32px !default;

// modal dialog dimensions and styles
$modal-portrait-year-font-size: 4vw !default;
$modal-portrait-header-year-margin: 12vh 0 0 0 !default;
$modal-portrait-month-font-size: 5vw !default;
$modal-portrait-header-padding: 2vh 6vw !default;
$modal-portrait-month-header-padding: 2vh 2vw !default;
$modal-month-header-line-height: 5vh !default;
$modal-month-header-title-line-height: inherit !default;

$modal-header-border-style: solid !default;
$modal-header-border-width: 1px 0 !default;
$modal-header-border-color: rgba($grey-44, 100%) !default;
$modal-portrait-icon-float: none !default;

// Touch modal popup cancel icon style
$modal-portrait-cancel-icon-float-style: left !default;
$modal-portrait-cancel-icon-padding: 2px !default;
$modal-portrait-prev-icon-margin: 18px !default;
$modal-portrait-next-icon-margin: 0 !default;
$modal-portrait-header-title-margin: 22vw !default;
$modal-portrait-header-title-position: absolute !default;
$modal-portrait-header-title-text: center !default;
$modal-portrait-header-title-width: 50vw !default;
$modal-portrait-cancel-icon-color: inherit !default;

//Touch modal popup today styles
$modal-portrait-today-float-style: right !default;
$modal-today-text-color: inherit !default;
$modal-portrait-footer-display-style: none !default;

// Touch modal popup styles
$modal-portrait-header-height: 20vh !default;
$modal-portrait-header-month-height: 10vh !default;
$modal-portrait-calendar-container-height: 79vh !default;
$modal-portrait-calendar-min-height: 100% !default;
$modal-portrait-calendar-min-width: 100% !default;
$modal-portrait-calendar-height: 100% !default;
$modal-portrait-calendar-content-height: 69vh !default;
$modal-portrait-calendar-tabel-height: 69vh !default;
$modal-portrait-calendar-padding: 0 !default;
$modal-portrait-month-header-vertical-align: middle !default;
$modal-header-day-line-height: 6vw !default;

// Touch modal popup landscape styles
$datepicker-modal-popup-landscape-max-width: 100% !default;
$modal-landscape-header-height: 30vh !default;
$modal-landscape-header-big-height: 25vh !default;
$modal-landscape-calendar-content-height: 60vh !default;
$modal-landscape-calendar-content-table-height: 65vh !default;
$modal-landscape-calendar-content-big-height: 65vh !default;
$modal-landscape-header-year-margin: 12vh 0 0 0 !default;
$modal-landscape-prev-icon-margin: 80vw !default;
$modal-year-landscape-font-size: 3vw !default;
$modal-month-landscape-font-size: 4vw !default;
$datepicker-modal-landscape-overflow: visible !default;
$modal-month-landscape-title-line-height: 12vh !default;

// tablet device style changes for modal popup
$modal-tablet-font-size: 18px !default;
$modal-tablet-content-dimension: 64px !default;
$modal-tablet-table-header-height: 48px !default;

$margin-zero: 0;
$padding-zero: 0;
$datepicker-modal-header-padding: 10px 10px 10px 15px;
$datepicker-footer-container-padding: 10px 0;
$date-picker-full-height: 100% !default;
$datepicker-bigger-min-height: 40px !default;
$datepicker-full-width: 100% !default;
$datepicker-min-height: 33px !default;
$date-picker-cell-container-height: 70% !default;
$date-footer-container-font-size: 24px !default;
$date-footer-height: 10% !default;
$date-content-max-height: 50vh !default;
$date-content-min-height: 60vh !default;
$date-picker-popup-landscape-height: 25vh !default;
$date-zero-radius: 0 !default;
$date-mob-popup-height: 15vh !default;
$date-normal-font: 400 !default;
$date-header-mob-prev-height: 35px !default;
$date-header-mob-prev-width: 35px !default;
$date-min-device-height: 55px !default;
$date-min-device-width: 55px !default;
$date-picker-popup-next-height: 35px !default;
$date-picker-popup-next-width: 35px !default;
$date-picker-popup-next-min-height: 55px !default;
$date-picker-popup-next-min-width: 55px !default;

@include export-module('datepicker-layout') {

  .e-input-group.e-control-wrapper.e-date-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-date-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
    display: flex;
  }

  .e-date-wrapper:not(.e-filled) {
    #{if(&, '&', '*')} .e-date-icon.e-icons {
      @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
        box-sizing: $datepicker-box-sizing;
      }
    }
  }

  #{&}.e-datepicker {
    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
      --dummy-style: true;
    }
    #{if(&, '&', '*')} .e-calendar {

      #{if(&, '&', '*')} .e-content table tbody tr.e-month-hide:last-child {
        display: $datepicker-othermonth-row;
      }
    }

    #{if(&, '&', '*')}.e-popup-wrapper {
      border-radius: $datepicker-popup-border-radius;
      overflow-y: hidden;
      pointer-events: auto;
    }

    #{if(&, '&', '*')}.e-date-modal {
      @if $skin-name != 'Material3' {
        background-color: $datepicker-overlay;
      }
      @if $skin-name == 'Material3' {
        background: $datepicker-overlay;
      }
      height: $date-picker-full-height;
      left: $margin-zero;
      opacity: .5;
      pointer-events: auto;
      position: fixed;
      top: $margin-zero;
      width: $datepicker-full-width;
      z-index: 999;
    }

    #{if(&, '&', '*')} .e-model-header {
      @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
        background-color: $datepicker-modal-header-bg;
      }
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        background: $datepicker-modal-header-bg;
      }
      color: $datepicker-modal-header-color;
      cursor: default;
      display: $datepicker-modal-header-display;
      padding: $datepicker-modal-header-padding;

      #{if(&, '&', '*')} .e-model-year {
        font-size: $modal-year-font-size;
        font-weight: $modal-year-font-weight;
        line-height: $modal-year-line-height;
        margin: $margin-zero;
        @if $skin-name == 'bootstrap5.3' {
          color: $modal-year-font-color;
        }
      }
    }

    #{if(&, '&', '*')} .e-model-month,
    #{if(&, '&', '*')} .e-model-day {
      font-size: $modal-month-font-size;
      font-weight: $modal-month-font-weight;
      line-height: $modal-month-line-height;
      margin: $margin-zero;
      @if $skin-name == 'bootstrap5.3' {
        color: $modal-year-font-color;
      }
    }
  }
}

/* stylelint-disable */
.e-date-overflow {
  overflow: hidden !important;
}

.e-datepick-mob-popup-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: $date-picker-full-height;
  justify-content: center;
  left: $margin-zero;
  max-height: $date-picker-full-height;
  position: fixed;
  top: $margin-zero;
  width: $datepicker-full-width;
  z-index: 1002;

  .e-datepicker.e-popup-wrapper.e-lib.e-popup.e-control.e-popup-open {
    position: relative;
    top: $margin-zero !important;
    left: $margin-zero !important;
  }

  .e-datepicker.e-popup-wrapper.e-popup-expand.e-lib.e-popup.e-control.e-popup-open {
    min-width: $datepicker-full-width;
    min-height: $date-picker-full-height;
  }
}

.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
  background-size: 250px 33px;
  min-height: $datepicker-min-height;
}

@media screen and (orientation: landscape) {
  .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-calendar .e-content.e-month td.e-today span.e-day {
    line-height: $modal-tablet-content-dimension;
  }
}

.e-datepick-mob-popup-wrap {  
  #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
    border-radius: $date-zero-radius;

    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
      height: $date-mob-popup-height;
      .e-popup-close {
        float: right;
      }
    }

    #{if(&, '&', '*')} .e-model-header.e-blazor-device {
      height: $date-mob-popup-height;
      .e-popup-close {
        float: right;
      }
    }

    #{if(&, '&', '*')} .e-model-header {
      height: $modal-portrait-header-height;
      padding: $modal-portrait-header-padding;

      #{if(&, '&', '*')} .e-day-wrapper {
        margin: $modal-portrait-header-year-margin;
      }

      #{if(&, '&', '*')} .e-popup-close {
        color: $modal-portrait-cancel-icon-color;
        float: $modal-portrait-cancel-icon-float-style;
        font-size: $datepicker-bigger-icon-font-size;
        @media (min-device-width: 768px) {
          font-size: $modal-tablet-font-size;
        }
      }

      #{if(&, '&', '*')} .e-btn.e-flat.e-popup-close {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        font-weight: $date-normal-font;
        padding: $padding-zero;
      }

      #{if(&, '&', '*')} .e-today.e-flat.e-primary {
        color: $modal-today-text-color;
        float: $modal-portrait-today-float-style;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: transparent;
        }
        @if $skin-name == 'fluent2' {
          border-color: transparent;
        }
        @media (min-device-width: 768px) {
          font-size: $modal-tablet-font-size;
        }
      }
    }

    #{if(&, '&', '*')} .e-model-month,
    #{if(&, '&', '*')} .e-model-day {
      font-size: $modal-portrait-month-font-size;
      line-height: $modal-header-day-line-height;
    }

    #{if(&, '&', '*')} .e-calendar {
      min-width: $modal-portrait-calendar-min-width;
      min-height: $modal-portrait-calendar-min-height;
      height: $modal-portrait-calendar-height;
      @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
        padding: $modal-portrait-calendar-padding;
      }

      #{if(&, '&', '*')} .e-header.e-month,
      #{if(&, '&', '*')} .e-header.e-year,
      #{if(&, '&', '*')} .e-header.e-decade {
        height: $modal-portrait-header-month-height;
        border-style: $modal-header-border-style;
        border-width: $modal-header-border-width;
        border-color: $modal-header-border-color;
        padding: $modal-portrait-month-header-padding;
        line-height: $modal-month-header-line-height;

        #{if(&, '&', '*')} .e-title {
          @if $skin-name != 'bootstrap5.3' {
            position: $modal-portrait-header-title-position;
            line-height: $modal-month-header-title-line-height;
          }
          margin-left: $modal-portrait-header-title-margin;
          text-align: $modal-portrait-header-title-text;
          vertical-align: $modal-portrait-month-header-vertical-align;
          width: $modal-portrait-header-title-width;
          @media (min-device-width: 768px) {
            font-size: $modal-tablet-font-size;
          }
          @if $skin-name == 'fluent2' {
            & {
              left: $modal-header-left;
            }
          }
        }

        #{if(&, '&', '*')} .e-prev {
          margin-right: $modal-portrait-prev-icon-margin;
          vertical-align: inherit;
          height: $date-header-mob-prev-height;
          width: $date-header-mob-prev-width;
          @media (min-device-width: 768px) {
            height: $date-min-device-height;
            width: $date-min-device-width;
          }

          #{if(&, '&', '*')} .e-icons {
            vertical-align: inherit;
           @media (min-device-width: 768px) {
             font-size: $modal-tablet-font-size;
           }
          }
        }

        #{if(&, '&', '*')} .e-next {
          margin-right: $modal-portrait-next-icon-margin;
          vertical-align: inherit;
          height: $date-picker-popup-next-height;
          width: $date-picker-popup-next-width;
          @media (min-device-width: 768px) {
            height: $date-picker-popup-next-min-height;
            width: $date-picker-popup-next-min-width;
          }

          #{if(&, '&', '*')} .e-icons {
            vertical-align: inherit;
            @media (min-device-width: 768px) {
              font-size: $modal-tablet-font-size;
            }
           }
        }

        #{if(&, '&', '*')} .e-icon-container {
          float: $modal-portrait-icon-float;
          @if $skin-name == 'fluent2' {
            padding-right: 2vw;
          }
        }
      }

      #{if(&, '&', '*')} th {
        @media (min-device-width: 768px) {
          font-size: $modal-tablet-font-size;
          height: $modal-tablet-table-header-height;
        }
      }

      #{if(&, '&', '*')} .e-content span.e-day {
        @media (min-device-width: 768px) {
          font-size: $modal-tablet-font-size;
          height: $modal-tablet-content-dimension;
          width: $modal-tablet-content-dimension;
          line-height: $modal-tablet-content-dimension;
        }
      }

    }

  #{if(&, '&', '*')} .e-calendar-cell-container {
    height: $modal-portrait-calendar-container-height;
  }

  .e-footer-container
  {
    display: $modal-portrait-footer-display-style;
  }

  #{if(&, '&', '*')} .e-content.e-month
  {
    height: $modal-portrait-calendar-content-height;
    table
    {
    height: $modal-portrait-calendar-tabel-height;
    }

  }

  }
}

@media screen and (orientation: landscape) {
  .e-datepick-mob-popup-wrap {
    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {

      #{if(&, '&', '*')} .e-model-header.e-blazor-device {
        height: $date-picker-popup-landscape-height;
        .e-popup-close {
          float: right;
        }
      }

      #{if(&, '&', '*')} .e-calendar-cell-container {

        #{if(&, '&', '*')} .e-content.e-month,
        #{if(&, '&', '*')} .e-content.e-year,
        #{if(&, '&', '*')} .e-content.e-decade {
          @media (max-height: 600px) {
            height: $date-content-max-height;
          }

          @media (min-height: 600px) {
            height: $date-content-min-height;
          }
          overflow-y: auto;

          #{if(&, '&', '*')} table {
            @media (min-height: 600px) {
              height: $date-content-min-height;
            }
          }
        }
        #{if(&, '&', '*')} .e-footer-container {
          @media (min-height: 600px) {
            padding: $datepicker-footer-container-padding;
            height: $date-footer-height;
            font-size: $date-footer-container-font-size;
          }
        }
      }

      #{if(&, '&', '*')} .e-model-header {

        @media (max-height: 600px) {
          height: $modal-landscape-header-height;
        }

        @media (min-height: 600px) {
          height: $modal-landscape-header-big-height;
        }
        width: $datepicker-modal-popup-landscape-max-width;

        .e-popup-close {
          float: $modal-portrait-cancel-icon-float-style;
        }

        .e-day-wrapper {
          margin: $modal-landscape-header-year-margin;
        }

        #{if(&, '&', '*')} .e-model-month,
        #{if(&, '&', '*')} .e-model-day {
          font-size: $modal-month-landscape-font-size;
        }

      }

      #{if(&, '&', '*')} .e-calendar .e-header.e-month,
      #{if(&, '&', '*')} .e-calendar .e-header.e-year,
      #{if(&, '&', '*')} .e-calendar .e-header.e-decade {

        #{if(&, '&', '*')} .e-prev {
          @if $skin-name != 'fluent2' {
            margin-right: $modal-landscape-prev-icon-margin;
          }
        }

        #{if(&, '&', '*')} .e-title {
          @media (max-height: 600px) {
            line-height: $modal-month-landscape-title-line-height;
          }

          @media (min-height: 600px) {
            line-height: $modal-month-header-title-line-height;
          }          
        }
      }

      #{if(&, '&', '*')} .e-content.e-month,
      #{if(&, '&', '*')} .e-content.e-year,
      #{if(&, '&', '*')} .e-content.e-decade {        
        @media (max-height: 600px) {
          height: $modal-landscape-calendar-content-height;
        }

        @media (min-height: 600px) {
          height: $modal-landscape-calendar-content-big-height;
        }
        overflow-y: auto;
      }

      .e-calendar {
        display: $datepicker-modal-header-display;
        max-width: $datepicker-modal-popup-landscape-max-width;
        overflow: $datepicker-modal-landscape-overflow;
      }

      .e-calendar-cell-container {
        height: $date-picker-cell-container-height;
        width: $datepicker-full-width;
      }

      .e-calendar.e-device .e-month table tbody {
        display: table-row-group;
      }

      #{if(&, '&', '*')} .e-content.e-month table ,
      #{if(&, '&', '*')} .e-content.e-decade table ,
      #{if(&, '&', '*')} .e-content.e-year table {
        @media (max-height: 600px) {
          height: $modal-portrait-calendar-content-height;
        }

        @media (min-height: 600px) {
          height: $modal-landscape-calendar-content-table-height;
        }        
      }
    }
}
}
/* stylelint-enable */

@include export-module('datepicker-theme') {
  #{&}.e-datepicker,
  .e-small#{&}.e-datepicker {
    #{if(&, '&', '*')}.e-popup-wrapper {
      border: $datepicker-popup-border;
      box-shadow: $datepicker-popup-box-shadow;
    }

    #{if(&, '&', '*')} .e-calendar {
      @if $skin-name != 'Material3' {
        background-color: $datepicker-popup-bg-color;
      }
      @if $skin-name == 'Material3' {
        background: $datepicker-popup-bg-color;
      }
      border: $datepicker-calendar-border-style;
    }
  }

  #{if(&, '&', '*')}.e-input-group {
    #{if(&, '&', '*')}.e-date-wrapper.e-dateinput-active:active:not(.e-success):not(.e-warning):not(.e-error) {
      border: $datepicker-input-border-style;
    }
  }

  .e-date-wrapper {
    #{if(&, '&', '*')} span.e-input-group-icon {
      #{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
        @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap-dark' and $skin-name != 'fabric' and $skin-name != 'fabric-dark') {
          color: $datepicker-icon-color;
        }
      }
      #{if(&, '&', '*')}.e-date-icon.e-icons.e-active {
        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background: $datepicker-icon-active-bg-color;
          border-color: $datepicker-active-border-color;
        }
        @if ($skin-name != 'bootstrap' and $skin-name != 'bootstrap-dark' and $skin-name != 'fabric' and $skin-name != 'fabric-dark') {
          color: $datepicker-active-icon-color;
        }
        @if $skin-name == 'Material3' {
          border: $datepicker-icon-active-border;
          background: $datepicker-icon-active-bg-color;
        }
      }
    }
  }
}

@include export-module('datepicker-bootstrap-icons') {

  /*! component icons */

  .e-input-group-icon.e-date-icon,
  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-date-icon {
    font-size: $datepicker-icon-font-size;
    margin: $datepicker-icon-normal-margin;
    outline: none;

    #{if(&, '&', '*')}::before {
      content: '\e960';
      font-family: 'e-icons';
    }

    #{if(&, '&', '*')}:focus {
      background: $datepicker-icon-hover-color;
      border-radius: $datepicker-icon-border-radius;
    }
  }

  // mouse small icon
  .e-small .e-input-group-icon.e-date-icon,
  #{if(&, '&', '*')}.e-control-wrapper.e-small .e-input-group-icon.e-date-icon,
  #{if(&, '&', '*')}.e-small .e-control-wrapper .e-input-group-icon.e-date-icon {
    font-size: $datepicker-small-icon-font-size;
  }

  .e-datepick-mob-popup-wrap {

    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {

      #{if(&, '&', '*')} .e-model-header {

        #{if(&, '&', '*')} .e-popup-close::before {
          content: '\e7fc';
          font-family: 'e-icons';
        }
      }

      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
        content: '\e913';
      }
      #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
        content: '\e904';
      }
    }
  }
}

@include export-module('datepicker-bigger') {
  #{&}.e-datepicker.e-bigger,
  .e-bigger #{&}.e-datepicker {
    #{if(&, '&', '*')}.e-popup-wrapper {
      @if $skin-name == 'tailwind' {
        margin-top: $datepicker-popup-bigger-margin-top;
      }
    }
  }

  .e-bigger .e-content-placeholder.e-datepicker.e-placeholder-datepicker,
  .e-bigger.e-content-placeholder.e-datepicker.e-placeholder-datepicker {
    background-size: 250px 40px;
    min-height: $datepicker-bigger-min-height;
  }

  .e-bigger#{&}.e-datepicker,
  .e-bigger.e-small#{&}.e-datepicker {
    #{if(&, '&', '*')}.e-popup-wrapper {
      border: $datepicker-popup-border;
      box-shadow: $datepicker-popup-box-shadow;
    }

    #{if(&, '&', '*')} .e-calendar {
      @if $skin-name != 'Material3' {
        background-color: $datepicker-popup-bg-color;
      }
      @if $skin-name == 'Material3' {
        background: $datepicker-popup-bg-color;
      }
      border: $datepicker-calendar-border-style;
    }
  }

  .e-bigger .e-input-group-icon.e-date-icon,
  #{if(&, '&', '*')}.e-control-wrapper.e-bigger .e-input-group-icon.e-date-icon,
  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'material-dark' or $skin-name == 'material' or $skin-name == 'Material3' {
      font-size: $datepicker-bigger-icon-font-size;
      margin: $datepicker-icon-bigger-margin;
      min-height: $datepicker-bigger-icon-container-min-height;
      min-width: $datepicker-bigger-icon-container-min-width;
    }
    @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
      border-radius: $datepicker-bigger-icon-border-radius;
    }
    @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'highcontrast-light' or $skin-name == 'highcontrast' {
      font-size: $datepicker-bigger-icon-font-size;
      margin: $datepicker-icon-bigger-margin;
    }
  }

  .e-small.e-bigger .e-input-group-icon.e-date-icon,
  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-date-icon,
  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-date-icon {
    font-size: $datepicker-bigger-small-icon-font-size;
    @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
      min-width: $datepicker-bigger-small-icon-container-min-width;
      min-height: $datepicker-bigger-small-icon-container-min-height;
      border-radius: $datepicker-bigger-small-icon-border-radius;
      margin: $datepicker-bigger-small-icon-margin;
    }
  }

  .e-bigger .e-date-wrapper.e-outline .e-input-group-icon.e-date-icon,
  .e-date-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-date-icon,
  .e-bigger .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' {
      min-height: $zero-value;
      min-width: 24px;
    }
  }
  .e-bigger.e-small .e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
  .e-bigger.e-small.e-outline.e-date-wrapper .e-input-group-icon.e-date-icon,
  .e-date-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-date-icon,
  .e-bigger.e-small .e-date-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' {
      min-height: $zero-value;
      min-width: 20px;
    }
  }
}

$radio-btn-background-color: $grey-base !default;
$radio-btn-border: 1px solid !default;
$radio-btn-border-color: $grey-dark-font !default;
$radio-btn-bigger-font-size: 15px !default;
$radio-btn-bigger-height: 22px !default;
$radio-btn-bigger-line-height: 22px !default;
$radio-btn-bigger-padding: 32px !default;
$radio-btn-bigger-small-height: 18px !default;
$radio-btn-bigger-small-line-height: 18px !default;
$radio-btn-bigger-small-padding: 28px !default;
$radio-btn-bigger-small-width: 18px !default;
$radio-btn-bigger-width: 22px !default;
$radio-btn-bigger-ripple-position: -11px !default;
$radio-btn-bigger-ripple-size: 48px !default;
$radio-btn-bigger-small-ripple-size: 36px !default;
$radio-btn-checked-border-color: $grey-dark-font !default;
$radio-btn-checked-color: $grey-dark-font !default;
$radio-btn-checked-background-color: $radio-btn-background-color !default;
$radio-btn-checked-ripple-bgcolor: transparent !default;
$radio-btn-check-transition: none !default;
$radio-btn-disabled-border-color: rgba($grey-dark-font, .35) !default;
$radio-btn-disabled-color: rgba($grey-dark-font, .35) !default;
$radio-btn-disabled-checked-color: rgba($grey-dark-font, .35) !default;
$radio-btn-disabled-checked-border-color: $radio-btn-disabled-border-color !default;
$radio-btn-disabled-background-color: transparent !default;
$radio-btn-font-color: $grey-dark-font !default;
$radio-btn-font-size: 14px !default;
$radio-btn-focus-ripple-bgcolor: #000 !default;
$radio-btn-focussed-box-shadow: 0 0 8px 0 rgba($brand-primary, .9) !default;
$radio-btn-hover-bgcolor: $grey-light-font !default;
$radio-btn-hover-border-color: $grey-light-font !default;
$radio-btn-hover-check-bg-color: $grey-light-font !default;
$radio-btn-hover-check-border-color: $grey-light-font !default;
$radio-btn-height: 20px !default;
$radio-btn-width: 20px !default;
$radio-btn-small-height: 14px !default;
$radio-btn-small-width: 14px !default;
$radio-btn-icon-left: 6px !default;
$radio-btn-icon-top: 6px !default;
$radio-btn-icon-right: 6px !default;
$radio-btn-ripple-position: -8px !default;
$radio-btn-ripple-size: 34px !default;
$radio-btn-small-icon-left: 4px !default;
$radio-btn-small-icon-top: 4px !default;
$radio-btn-small-icon-right: 4px !default;
$radio-btn-small-ripple-position: -10px !default;
$radio-btn-bigger-icon-left: 6px !default;
$radio-btn-bigger-icon-top: 6px !default;
$radio-btn-bigger-icon-right: 6px !default;
$radio-btn-bigger-small-icon-left: 5px !default;
$radio-btn-bigger-small-icon-top: 5px !default;
$radio-btn-bigger-small-icon-right: 5px !default;
$radio-btn-icon-height: 8px !default;
$radio-btn-icon-width: 8px !default;
$radio-btn-small-icon-height: 6px !default;
$radio-btn-small-icon-width: 6px !default;
$radio-btn-bigger-icon-height: 10px !default;
$radio-btn-bigger-icon-width: 10px !default;
$radio-btn-bigger-small-icon-height: 8px !default;
$radio-btn-bigger-small-icon-width: 8px !default;
$radio-btn-line-height: 20px !default;
$radio-btn-padding-left: 28px !default;
$radio-btn-ripple-bgcolor: transparent !default;
$radio-btn-small-line-height: 14px !default;
$radio-btn-small-padding: 22px !default;
$radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
$radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
$radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
$radio-btn-focus-outline-offset: 0 !default;
$radio-btn-zero-padding: 0 !default;
$radio-button-border-radius: 50% !default;
$radio-label-font-weight: normal !default;
$radio-btn-after-border: 1px solid !default;
$radio-btn-wrapper-line-height: 1 !default;
$radio-btn-radio-height: 1px !default;
$radio-btn-radio-width: 1px !default;
$radio-ripple-left: -10px !default;
$radio-auto-position: auto !default;
$radio-ripple-rtl-container-left: -12px !default;
$radio-nrml-ripple-rtl-container-left: -8px !default;
$radio-btn-border-error-color: $msg-danger-border-color-alt1;

@mixin fluent-focus-border {
  @if $skin-name == 'FluentUI' {
    border: 1px solid transparent;
  }
}

@mixin fluent-label-border {
  @if $skin-name == 'FluentUI' {
    border: 1px solid $radio-btn-border-color;
  }
}

@include export-module('radiobutton-layout') {
  .e-radio-wrapper {
    display: inline-block;
    line-height: $radio-btn-wrapper-line-height;
    position: relative;
  }

  /* stylelint-disable property-no-vendor-prefix */
  .e-radio {
    -webkit-appearance: none;
    height: $radio-btn-radio-height;
    opacity: 0;
    position: absolute;
    width: $radio-btn-radio-width;

    &:not(:checked):not(:disabled):hover {
      +label,
      +label.e-rtl,
      +label.e-right {
        @if $skin-name == 'FluentUI' {
          &::after {
            background-color: $radio-btn-uncheck-background-color;
            border: 1px solid;
            border-radius: 50%;
            box-sizing: border-box;
            color: $radio-btn-uncheck-color;
            content: '';
            height: $radio-btn-icon-height;
            left: $radio-btn-icon-left;
            position: absolute;
            top: $radio-btn-icon-top;
            transform: scale(1);
            width: $radio-btn-icon-width;
          }
        }
      }

      +label.e-rtl,
      +label.e-right {
        &::after {
          left: $radio-auto-position;
        }
      }
    }

    &:focus-visible {
      +label {
        @if $skin-name == 'fluent2' {
          box-shadow: $switch-box-shadow;
          border-radius: $radio-focus-border-radius;
        }
      }
    }

    +label {
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      display: inline-block;
      margin: $radio-btn-zero-padding;
      position: relative;
      user-select: none;
      vertical-align: middle;
      white-space: nowrap;
      @if $skin-name == 'FluentUI' {
        border: 1px solid transparent;
        height: 24px;
      }
      @if $skin-name == 'fluent2' {
        margin: $radio-btn-focus-margin;
      }

      & .e-label {
        display: inline-block;
        font-family: $font-family;
        font-size: $radio-btn-font-size;
        font-weight: $radio-label-font-weight;
        line-height: $radio-btn-line-height;
        padding-left: $radio-btn-padding-left;
        vertical-align: text-top;
        white-space: normal;
      }

      &:focus,
      &.e-focus {
        @include fluent-focus-border;
      }

      &::before {
        border: $radio-btn-border;
        border-radius: $radio-button-border-radius;
        box-sizing: border-box;
        content: '';
        height: $radio-btn-height;
        @if $skin-name == 'FluentUI' {
          left: 1px;
          top: 1px;
        }
        @else {
          left: $radio-btn-zero-padding;
        }
        position: absolute;
        width: $radio-btn-width;
      }

      &:focus {
        &::before {
          box-shadow: $radio-btn-focussed-box-shadow;
          @if $skin-name == 'bootstrap5.3' {
            border-color: $border-selected;
          }
        }
      }

      &:active {
        &::before {
          @if $skin-name == 'bootstrap5.3' {
            box-shadow: $radio-btn-focussed-box-shadow;
            border-color: $border-selected !important; /* stylelint-disable-line declaration-no-important */
            background-color: $content-bg-color-pressed;
          }
          @if $skin-name == 'tailwind3' {
            box-shadow: $radio-btn-focussed-box-shadow;
          }
        }
      }

      &::after {
        border: $radio-btn-after-border;
        border-radius: $radio-button-border-radius;
        box-sizing: border-box;
        content: '';
        height: $radio-btn-icon-height;
        left: $radio-btn-icon-left;
        position: absolute;
        top: $radio-btn-icon-top;
        transform: scale(0);
        width: $radio-btn-icon-width;
      }

      & .e-ripple-container {
        border-radius: $radio-button-border-radius;
        height: $radio-btn-ripple-size;
        left: $radio-btn-ripple-position;
        position: absolute;
        top: $radio-btn-ripple-position;
        width: $radio-btn-ripple-size;
        z-index: 1;

        & .e-ripple-element {
          @if $skin-name == 'Material3' {
            border-radius: $radio-btn-ripple-border-radius;
          }
        }
      }

      &.e-right,
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-zero-padding;
          padding-right: $radio-btn-padding-left;
        }

        &::before {
          left: $radio-auto-position;
          right: $radio-btn-zero-padding;
        }

        &::after {
          left: $radio-auto-position;
          right: $radio-btn-icon-right;
        }

        & .e-ripple-container {
          left: $radio-auto-position;
          right: $radio-btn-ripple-position;
        }
      }

      &.e-right {
        &.e-rtl {
          & .e-label {
            padding-left: $radio-btn-padding-left;
            padding-right: $radio-btn-zero-padding;
          }

          &::before {
            left: $radio-btn-zero-padding;
            right: $radio-auto-position;
          }

          &::after {
            left: $radio-btn-icon-right;
            right: $radio-auto-position;
          }

          & .e-ripple-container {
            left: $radio-nrml-ripple-rtl-container-left;
            right: $radio-auto-position;
          }
        }
      }

      &.e-small {

        & .e-label {
          line-height: $radio-btn-small-line-height;
          padding-left: $radio-btn-small-padding;
        }

        &::before {
          height: $radio-btn-small-height;
          width: $radio-btn-small-width;
        }

        &::after {
          height: $radio-btn-small-icon-height;
          left: $radio-btn-small-icon-left;
          top: $radio-btn-small-icon-top;
          width: $radio-btn-small-icon-width;
        }

        & .e-ripple-container {
          left: $radio-btn-small-ripple-position;
          top: $radio-btn-small-ripple-position;
        }

        &.e-right,
        &.e-rtl {
          & .e-label {
            padding-left: $radio-btn-zero-padding;
            padding-right: $radio-btn-small-padding;
          }

          &::after {
            left: $radio-auto-position;
            right: $radio-btn-small-icon-right;
          }

          & .e-ripple-container {
            left: $radio-auto-position;
            right: $radio-btn-small-ripple-position;
          }
        }

        &.e-right {
          &.e-rtl {
            & .e-label {
              padding-left: $radio-btn-small-padding;
              padding-right: $radio-btn-zero-padding;
            }

            &::after {
              left: $radio-btn-small-icon-right;
              right: $radio-auto-position;
            }

            & .e-ripple-container {
              left: $radio-ripple-left;
              right: $radio-auto-position;
            }
          }
        }
      }
    }

    &:focus,
    .e-focus {
      +label,
      & .e-label {
        @include fluent-label-border;
      }
    }

    &:focus:not(:focus-visible) {
      +label,
      & .e-label {
        @include fluent-focus-border;
      }
    }

    &:focus-visible {
      +label,
      & .e-label {
        @include fluent-label-border;
      }
    }

    &:checked {
      +label {
        &::after {
          transform: scale(1);
          transition: $radio-btn-check-transition;
        }
      }
    }
  }

  .e-small .e-radio + label,
  .e-radio + label.e-small {
    @if $skin-name == 'fluent2' {
      margin: $radio-small-btn-label-margin;
    }
    & .e-label {
      line-height: $radio-btn-small-line-height;
      padding-left: $radio-btn-small-padding;
      @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
        font-size: $text-xs;
      }
    }

    &::before {
      height: $radio-btn-small-height;
      width: $radio-btn-small-width;
    }

    &::after {
      height: $radio-btn-small-icon-height;
      left: $radio-btn-small-icon-left;
      top: $radio-btn-small-icon-top;
      width: $radio-btn-small-icon-width;
    }

    & .e-ripple-container {
      left: $radio-btn-small-ripple-position;
      top: $radio-btn-small-ripple-position;
    }

    &.e-right,
    &.e-rtl {
      & .e-label {
        padding-left: $radio-btn-zero-padding;
        padding-right: $radio-btn-small-padding;
      }

      &::after {
        left: $radio-auto-position;
        right: $radio-btn-small-icon-right;
      }

      & .e-ripple-container {
        left: $radio-auto-position;
        right: $radio-btn-small-ripple-position;
      }
    }

    &.e-right {
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-small-padding;
          padding-right: $radio-btn-zero-padding;
        }

        &::after {
          left: $radio-btn-small-icon-right;
          right: $radio-auto-position;
        }

        & .e-ripple-container {
          left: $radio-ripple-left;
          right: $radio-auto-position;
        }
      }
    }
  }
  .e-radio-wrapper.e-error .e-radio + label::before {
    border-color: $radio-btn-border-error-color;
  }
}

@include export-module('radiobutton-theme') {
  .e-radio {
    +label {
      &::before {
        background-color: $radio-btn-background-color;
        border-color: $radio-btn-border-color;
      }

      &.e-focus {
        & .e-ripple-container {
          background-color: $radio-btn-focus-ripple-bgcolor;
        }
      }

      & .e-label {
        color: $radio-btn-font-color;
      }

      & .e-ripple-element {
        background-color: $radio-btn-checked-ripple-bgcolor;
      }

      &:active {
        & .e-ripple-element {
          background-color: $radio-btn-ripple-bgcolor;
        }
      }
    }

    &:focus {
      +label {
        &::before {
          border-color: $radio-btn-focus-check-border-color;
          box-shadow: $radio-btn-focussed-box-shadow;
        }

        & .e-ripple-container {
          @if $skin-name == 'Material3' {
            background-color: $radio-btn-focus-ripple-bgcolor;
          }
        }
      }
    }

    &:focus {
      +label {
        &::before {
          border-color: $radio-btn-hover-border-color;
          box-shadow: $radio-btn-focussed-box-shadow;
        }
      }
    }

    &:hover {
      +label {
        & .e-ripple-container {
          @if $skin-name == 'Material3' {
            background: $radio-btn-ripple-bgcolor;
          }
        }
      }

      +label {
        &::before {
          border-color: $radio-btn-hover-border-color;
        }
      }
    }

    &:checked {
      +label {
        &::before {
          background-color: $radio-btn-checked-background-color;
          border-color: $radio-btn-checked-border-color;
        }

        &::after {
          background-color: $radio-btn-checked-color;
          color: $radio-btn-checked-color;
        }

        &:active {
          & .e-ripple-element {
            background-color: $radio-btn-checked-ripple-bgcolor;
          }
        }
      }

      +.e-focus {
        & .e-ripple-container {
          background-color: $radio-btn-checked-ripple-bgcolor;
        }

        &::before {
          outline: $radio-btn-focus-outline;
          outline-offset: $radio-btn-focus-outline-offset;
        }
      }
    }

    &:checked {
      &:focus {
        +label {
          &::before {
            border-color: $radio-btn-focus-check-border-color;
          }

          &::after {
            background-color: $radio-btn-focus-check-bg-color;
            @if $skin-name == 'fluent2' {
              color: $radio-btn-focus-check-bg-color;
            }
          }
        }
      }

      +label {
        &:hover {
          & .e-ripple-container {
            @if $skin-name == 'Material3' {
              background: $radio-btn-checked-ripple-bgcolor;
            }
          }
          &::before {
            border-color: $radio-btn-hover-check-border-color;
          }

          &::after {
            background-color: $radio-btn-hover-check-bg-color;
            @if $skin-name == 'fluent2' {
              color: $radio-btn-hover-check-bg-color;
            }
          }
        }
      }
    }

    &:disabled {
      +label {
        cursor: default;
        pointer-events: none;
        @if $skin-name == 'bootstrap5.3' {
          opacity: .5;
        }

        &::before {
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
            background-color: $radio-btn-disabled-not-checked-bg-color;
          }
          @else {
            background-color: $radio-btn-disabled-background-color;
          }
          border-color: $radio-btn-disabled-border-color;
          cursor: default;
        }

        & .e-ripple-container {
          background-color: transparent;

          &::after {
            background-color: transparent;
            cursor: default;
          }
        }

        & .e-label {
          color: $radio-btn-disabled-color;
        }
      }

      &:checked {
        +label {
          &::before {
            background-color: $radio-btn-disabled-background-color;
            border-color: $radio-btn-disabled-checked-border-color;
          }

          &::after {
            background-color: $radio-btn-disabled-checked-color;
            border-color: $radio-btn-disabled-checked-color;
            cursor: default;
          }

          & .e-ripple-container,
          & .e-ripple-container::after {
            background-color: transparent;
          }
        }
      }
    }
  }
}

@mixin fluent-focus-border {
  @if $skin-name == 'FluentUI' {
    border: 1px solid transparent;
  }
}

@mixin fluent-label-border {
  @if $skin-name == 'FluentUI' {
    border: 1px solid $radio-btn-border-color;
  }
}

@include export-module('radiobutton-bigger') {
  .e-bigger.e-small .e-radio + label,
  .e-radio + label.e-bigger.e-small {
    @if $skin-name == 'fluent2' {
      margin: $radio-small-btn-label-margin;
    }
    & .e-label {
      line-height: $radio-btn-bigger-small-line-height;
      padding-left: $radio-btn-bigger-small-padding;
    }

    &::before {
      height: $radio-btn-bigger-small-height;
      width: $radio-btn-bigger-small-width;
    }

    &::after {
      height: $radio-btn-bigger-small-icon-height;
      left: $radio-btn-bigger-small-icon-left;
      top: $radio-btn-bigger-small-icon-top;
      width: $radio-btn-bigger-small-icon-width;
    }

    & .e-ripple-container {
      height: $radio-btn-bigger-small-ripple-size;
      left: $radio-btn-bigger-ripple-position;
      top: $radio-btn-bigger-ripple-position;
      width: $radio-btn-bigger-small-ripple-size;
    }

    &.e-right,
    &.e-rtl {
      & .e-label {
        padding-left: $radio-btn-zero-padding;
        padding-right: $radio-btn-bigger-small-padding;
      }

      &::after {
        left: $radio-auto-position;
        right: $radio-btn-bigger-small-icon-right;
      }

      & .e-ripple-container {
        left: $radio-auto-position;
        right: $radio-btn-small-ripple-position;
      }
    }

    &.e-right {
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-bigger-small-padding;
          padding-right: $radio-btn-zero-padding;
        }

        &::after {
          left: $radio-btn-bigger-small-icon-right;
          right: $radio-auto-position;
        }

        & .e-ripple-container {
          left: $radio-ripple-left;
          right: $radio-auto-position;
        }
      }
    }
  }

  .e-bigger .e-radio {
    &:not(:checked):hover {
      +label,
      +label.e-rtl,
      +label.e-right {
        @if $skin-name == 'FluentUI' {
          &::after {
            background-color: $radio-btn-uncheck-background-color;
            border: 1px solid;
            border-radius: 50%;
            box-sizing: border-box;
            color: $radio-btn-uncheck-color;
            content: '';
            height: $radio-btn-bigger-icon-height;
            left: $radio-btn-bigger-icon-left;
            position: absolute;
            top: $radio-btn-bigger-icon-top;
            transform: scale(1);
            width: $radio-btn-bigger-icon-width;
          }
        }
      }

      +label.e-rtl,
      +label.e-right {
        &::after {
          left: $radio-auto-position;
        }
      }
    }

    &:focus,
    .e-focus {
      +label,
      & .e-label {
        @include fluent-focus-border;
      }
    }

    &:focus:not(:focus-visible) {
      +label,
      & .e-label {
        @include fluent-focus-border;
      }
    }

    &:focus-visible {
      +label,
      & .e-label {
        @include fluent-label-border;
      }
    }
  }

  .e-bigger .e-radio + label {
    @if $skin-name == 'FluentUI' {
      border: 1px solid transparent;
      height: 28px;
    }
  }

  .e-bigger .e-radio + label,
  .e-radio + label.e-bigger {
    @if $skin-name == 'fluent2' {
      margin: $radio-bigger-btn-label-margin;
    }

    & .e-label {
      font-size: $radio-btn-bigger-font-size;
      line-height: $radio-btn-bigger-line-height;
      padding-left: $radio-btn-bigger-padding;
    }

    &::before {
      height: $radio-btn-bigger-height;
      width: $radio-btn-bigger-width;
    }

    &::after {
      height: $radio-btn-bigger-icon-height;
      left: $radio-btn-bigger-icon-left;
      top: $radio-btn-bigger-icon-top;
      width: $radio-btn-bigger-icon-width;
    }

    & .e-ripple-container {
      height: $radio-btn-bigger-ripple-size;
      left: $radio-btn-bigger-ripple-position;
      top: $radio-btn-bigger-ripple-position;
      width: $radio-btn-bigger-ripple-size;
    }

    &.e-right,
    &.e-rtl {
      & .e-label {
        padding-left: $radio-btn-zero-padding;
        padding-right: $radio-btn-bigger-padding;
      }

      &::after {
        left: $radio-auto-position;
        right: $radio-btn-bigger-icon-right;
      }

      & .e-ripple-container {
        left: $radio-auto-position;
        right: $radio-btn-bigger-ripple-position;
      }
    }

    &.e-right {
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-bigger-padding;
          padding-right: $radio-btn-zero-padding;
        }

        &::after {
          left: $radio-btn-bigger-icon-right;
          right: $radio-auto-position;
        }

        & .e-ripple-container {
          left: $radio-ripple-rtl-container-left;
          right: $radio-auto-position;
        }
      }
    }

    &.e-small {
      & .e-label {
        line-height: $radio-btn-bigger-small-line-height;
        padding-left: $radio-btn-bigger-small-padding;
      }

      &::before {
        height: $radio-btn-bigger-small-height;
        width: $radio-btn-bigger-small-width;
      }

      &::after {
        height: $radio-btn-bigger-small-icon-height;
        left: $radio-btn-bigger-small-icon-left;
        top: $radio-btn-bigger-small-icon-top;
        width: $radio-btn-bigger-small-icon-width;
      }

      & .e-ripple-container {
        height: $radio-btn-bigger-small-ripple-size;
        left: $radio-btn-bigger-ripple-position;
        top: $radio-btn-bigger-ripple-position;
        width: $radio-btn-bigger-small-ripple-size;
      }

      &.e-right,
      &.e-rtl {
        & .e-label {
          padding-left: $radio-btn-zero-padding;
          padding-right: $radio-btn-bigger-small-padding;
        }

        &::after {
          left: $radio-auto-position;
          right: $radio-btn-bigger-small-icon-right;
        }

        & .e-ripple-container {
          left: $radio-auto-position;
          right: $radio-btn-small-ripple-position;
        }
      }

      &.e-right {
        &.e-rtl {
          & .e-label {
            padding-left: $radio-btn-bigger-small-padding;
            padding-right: $radio-btn-zero-padding;
          }

          &::after {
            left: $radio-btn-bigger-small-icon-right;
            right: $radio-auto-position;
          }

          & .e-ripple-container {
            left: $radio-ripple-left;
            right: $radio-auto-position;
          }
        }
      }
    }
  }
}

$switch-wrapper-width: 46px !default;
$switch-wrapper-height: 20px !default;
$switch-inner-width: 100% !default;
$switch-inner-height: 100% !default;
$switch-border-radius: 20px !default;
$switch-active-handle-bg: $brand-primary-font !default;
$switch-active-on-position-left: 0 !default;
$switch-inner-border-style: 2px solid $grey-white !default;
$switch-inner-active: $brand-primary !default;
$switch-inner-active-bg: $brand-primary !default;
$switch-focus-inner-box-shadow: 0 0 0 2px #a1ccfd !default;
$switch-inner-active-border-color: $brand-primary !default;
$switch-active-background: transparent !default;
$switch-handle-top: 0 !default;
$switch-handle-left: 2px !default;
$switch-on-bg-color: initial !default;
$switch-handle-margin: auto 0 !default;
$switch-inner-top: 0 !default;
$switch-inner-left: 0 !default;
$switch-off-text-indent: 16px !default;
$switch-on-text-indent: -14px !default;
$switch-handle-active: 100% !default;
$switch-handle-margin-left: -18px !default;
$switch-off-active-left: 100% !default;
$switch-small-ripple-height: 36px !default;
$switch-small-ripple-left: -10px !default;
$switch-small-ripple-top: -10px !default;
$switch-small-ripple-width: 36px !default;
$switch-handle-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .1) !default;
$switch-handle-shadow-disabled: none !default;
$switch-active-on-opacity: 1 !default;
$switch-off-opacity: 1 !default;
$switch-off-bg-color: transparent !default;
$switch-inner-bg: $grey-white !default;
$switch-handle-bg-color: $brand-primary-font !default;
$switch-hover-bg-color: $grey-8c !default;
$switch-handle-height: 16px !default;
$switch-handle-width: 16px !default;
$switch-transition: all .2s ease-in-out .1s !default;
$switch-inner-transition: all .2s ease-in-out !default;
$switch-handle-transition: all .2s linear !default;
$switch-font-family: $font-family !default;
$switch-font-size: 12px !default;
$switch-inner-hover-bg-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-hover-border-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-on-font-color: $brand-primary-font !default;
$switch-inner-off-font-color: $grey-light-font !default;
$switch-inner-focus-border: $grey-99 !default;
$switch-on-hover-bg-color: transparent !default;
$switch-on-off-disabled-bg-color: $grey-88 !default;
$switch-on-disabled-bg-color: $switch-on-off-disabled-bg-color !default;
$switch-on-off-disabled-bg-color-opacity: 1 !default;
$switch-handle-disabled-bg-color: $grey-white !default;
$switch-handle-on-disabled-bg-color: $switch-handle-disabled-bg-color !default;
$switch-border-disabled-bg-color: $grey-88 !default;
$switch-disabled-font-color: $grey-8c !default;
$switch-on-off-hover-bg-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-focus-bg-color: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-inner-focus-off-bg: $grey-99 !default;
$switch-on-disabled-bg-color: transparent !default;
$switch-focus-border-color-active: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-hover-border: $grey-8c !default;
$switch-hover-active-border: color.adjust($brand-primary, $lightness: -15%) !default;
$switch-handle-hover-bg-color: $brand-primary-font !default;
$switch-on-position-left: -100% !default;
$switch-off-position-left: 0 !default;
$switch-on-position-left-rtl: 0 !default;
$switch-off-position-left-rtl: -100% !default;
$switch-on-rtl: 100% !default;
$switch-off-rtl: 0 !default;
$switch-small-wrapper-height: 16px !default;
$switch-small-wrapper-width: 38px !default;
$switch-small-handle-width: 12px !default;
$switch-small-handle-height: 12px !default;
$switch-handle-radius: 50% !default;
$switch-handle-bottom: 0 !default;
$switch-small-handle-active-left: 100% !default;
$switch-small-handle-margin-left: -14px !default;
$switch-small-handle-active-left-rtl: 16px !default;
$switch-small-font-size: 8px !default;
$small-switch-text-indent: 10px !default;
$switch-small-on-rtl: 100% !default;
$switch-small-off-rtl: 0 !default;
$switch-small-on-position-left-rtl: 0 !default;
$switch-small-off-position-left-rtl: -100% !default;
$switch-small-on-text-indent: -11px !default;
$switch-small-off-text-indent: 11px !default;
$switch-small-disabled-rtl-active-bg-color: transparent !default;
$switch-checked-ripple-bg-color: rgba(0, 0, 0, .12) !default;
$switch-ripple-bg-color: rgba(255, 64, 129, .12) !default;
$switch-inner-hover-on-font-color: #fff !default;
$switch-focused-outline: none !default;
$switch-focused-outline-offset: initial !default;
$switch-focused-outline-active: none !default;
$switch-bigger-wrapper-height: 22px !default;
$switch-bigger-wrapper-width: 52px !default;
$switch-bigger-handle-width: 18px !default;
$switch-bigger-handle-height: 18px !default;
$switch-bigger-handle-active-left: 100% !default;
$switch-bigger-handle-margin-left: -20px !default;
$switch-bigger-handle-active-left-rtl: 22px !default;
$switch-bigger-font-size: 12px !default;
$switch-bigger-on-text-indent: -16px !default;
$switch-bigger-off-text-indent: 18px !default;
$switch-bigger-on-rtl: 100% !default;
$switch-bigger-off-rtl: 0 !default;
$switch-bigger-on-position-left-rtl: 0 !default;
$switch-bigger-off-position-left-rtl: -100% !default;
$switch-bigger-handle-top: 0 !default;
$switch-bigger-handle-left: 2px !default;
$switch-bigger-ripple-height: 52px !default;
$switch-bigger-ripple-left: -16px !default;
$switch-bigger-ripple-top: -16px !default;
$switch-bigger-ripple-width: 52px !default;
$switch-handle-off-hover-bg-color: $brand-primary-font !default;

$switch-bigger-small-wrapper-height: 18px !default;
$switch-bigger-small-wrapper-width: 42px !default;
$switch-bigger-small-handle-width: 14px !default;
$switch-bigger-small-handle-height: 14px !default;
$switch-bigger-small-handle-active-left: 100% !default;
$switch-bigger-small-handle-margin-left: -16px !default;
$switch-bigger-small-handle-active-left-rtl: 18px !default;
$switch-bigger-small-font-size: 11px !default;
$bigger-small-switch-text-indent: 10px !default;
$switch-bigger-small-on-rtl: 100% !default;
$switch-bigger-small-off-rtl: 0 !default;
$switch-bigger-small-on-position-left-rtl: 0 !default;
$switch-bigger-small-off-position-left-rtl: -100% !default;
$switch-bigger-small-on-text-indent: -12px !default;
$switch-bigger-small-off-text-indent: 15px !default;
$switch-bigger-small-handle-to: 0 !default;
$switch-bigger-small-handle-left: 2px !default;
$switch-bigger-small-ripple-height: 36px !default;
$switch-bigger-small-ripple-left: -10px !default;
$switch-bigger-small-ripple-top: -10px !default;
$switch-bigger-small-ripple-width: 36px !default;
$switch-ripple-border-radius: 50% !default;
$switch-height: 1px !default;
$switch-ripple-container-height: 52px !default;
$switch-width: 1px !default;
$switch-ripple-container-width: 52px !default;
$switch-ripple-container-bottom: -9px !default;
$switch-ripple-container-left: -17px !default;
$switch-ripple-container-top: -17px !default;

@include export-module('switch-layout') {
  .e-switch-wrapper,
  .e-css.e-switch-wrapper {
    cursor: pointer;
    display: inline-block;
    height: $switch-wrapper-height;
    position: relative;
    user-select: none;
    width: $switch-wrapper-width;
    @if $skin-name == 'FluentUI' {
      border: 1px solid transparent;
    }
    @if $skin-name == 'fluent2' {
      margin: $switch-bgr-small-wrapper-margin;
    }

    &:focus,
    &.e-focus {
      @if $skin-name == 'FluentUI' {
        border: 1px solid $switch-inner-focus-border;
      }
      @if $skin-name == 'fluent2' {
        box-shadow: $switch-box-shadow !important; /* stylelint-disable-line declaration-no-important */
        border-radius: $switch-nrml-focus-border-radius;
      }
    }

    @at-root {
      & .e-switch {
        /* stylelint-disable property-no-vendor-prefix */
        -moz-appearance: none;
        height: $switch-height;
        opacity: 0;
        position: absolute;
        width: $switch-width;
      }

      & .e-switch-inner {
        -ms-transition: $switch-inner-transition;
        -webkit-transition: $switch-inner-transition;
        border: $switch-inner-border-style;
        border-radius: $switch-border-radius;
        box-sizing: border-box;
        height: $switch-inner-height;
        left: $switch-inner-left;
        overflow: hidden;
        position: absolute;
        top: $switch-inner-top;
        transition: $switch-inner-transition;
        width: $switch-inner-width;
      }

      & .e-switch-on,
      & .e-switch-off {
        -ms-transition: $switch-transition;
        -webkit-transition: $switch-transition;
        align-items: center;
        border-radius: inherit;
        display: flex;
        font-family: $switch-font-family;
        font-size: $switch-font-size;
        height: $switch-inner-height;
        justify-content: center;
        left: $switch-inner-left;
        position: absolute;
        transition: $switch-transition;
        width: $switch-inner-width;
        @if $skin-name == 'bootstrap5.3' {
          font-weight: $font-weight-semibold;
        }
        @if $skin-name == 'tailwind3' {
          font-weight: $font-weight-medium;
        }
      }

      & .e-switch-on {
        @if $skin-name == 'bootstrap4' {
          top: $switch-inner-text-top;
        }
        left: $switch-on-position-left;
        text-indent: $switch-on-text-indent;
      }

      & .e-switch-off {
        @if $skin-name == 'bootstrap4' {
          top: $switch-inner-text-top;
        }
        left: $switch-off-position-left;
        opacity: $switch-off-opacity;
        text-indent: $switch-off-text-indent;
      }

      & .e-switch-handle {
        -ms-transition: $switch-handle-transition;
        -webkit-transition: $switch-handle-transition;
        border-radius: $switch-handle-radius;
        bottom: $switch-handle-bottom;
        height: $switch-handle-height;
        left: $switch-handle-left;
        margin: $switch-handle-margin;
        position: absolute;
        top: $switch-handle-top;
        transition: $switch-handle-transition;
        width: $switch-handle-width;
      }

      & .e-switch-inner.e-switch-active .e-switch-on {
        left: $switch-active-on-position-left;
        opacity: $switch-active-on-opacity;
      }

      & .e-switch-inner.e-switch-active .e-switch-off {
        left: $switch-off-active-left;
      }

      & .e-switch-handle.e-switch-active {
        left: $switch-handle-active;
        margin-left: $switch-handle-margin-left;
        @if $skin-name == 'Material3' {
          height: $switch-handle-active-height;
          width: $switch-handle-active-width;
        }
      }

      &.e-switch-disabled {
        cursor: default;
        pointer-events: none;
        @if $skin-name == 'bootstrap5.3' {
          opacity: .5;
        }
      }

      & .e-ripple-container {
        border-radius: $switch-ripple-border-radius;
        bottom: $switch-ripple-container-bottom;
        height: $switch-ripple-container-height;
        left: $switch-ripple-container-left;
        pointer-events: none;
        position: absolute;
        top: $switch-ripple-container-top;
        width: $switch-ripple-container-width;
        z-index: 1;
        @if $skin-name == 'Material3' {
          height: $switch-ripple-height;
          left: $switch-off-ripple-left;
          top: $switch-off-ripple-top;
          width: $switch-ripple-width;
        }

        &.e-ripple-check {
          @if $skin-name == 'Material3' {
            left: $switch-ripple-left !important; /* stylelint-disable-line declaration-no-important */
            top: $switch-ripple-top !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        & .e-ripple-element {
          @if $skin-name == 'Material3' {
            border-radius: $switch-ripple-element-border-radius;
          }
        }
      }

      &.e-rtl {
        & .e-switch-handle {
          left: $switch-handle-active;
          margin-left: $switch-handle-margin-left;
        }

        & .e-switch-inner.e-switch-active .e-switch-on {
          left: $switch-on-position-left-rtl;
        }

        & .e-switch-inner.e-switch-active .e-switch-off {
          left: $switch-off-position-left-rtl;
        }

        & .e-switch-on {
          left: $switch-on-rtl;
        }

        & .e-switch-off {
          left: $switch-off-rtl;
        }

        & .e-switch-handle.e-switch-active {
          border-radius: $switch-handle-radius;
          height: $switch-handle-height;
          left: $switch-handle-left;
          margin: $switch-handle-margin;
          position: absolute;
          top: $switch-handle-top;
          transition: $switch-handle-transition;
          width: $switch-handle-width;
        }
      }

      &.e-small {
        height: $switch-small-wrapper-height;
        width: $switch-small-wrapper-width;

        & .e-switch-handle {
          height: $switch-small-handle-height;
          width: $switch-small-handle-width;
        }

        & .e-ripple-container {
          border-radius: $switch-ripple-border-radius;
          height: $switch-small-ripple-height;
          left: $switch-small-ripple-left;
          pointer-events: none;
          position: absolute;
          top: $switch-small-ripple-top;
          width: $switch-small-ripple-width;
          z-index: 1;
        }

        & .e-switch-handle.e-switch-active {
          left: $switch-small-handle-active-left;
          margin-left: $switch-small-handle-margin-left;
          @if $skin-name == 'Material3' {
            height: $switch-handle-small-active-height;
            width: $switch-handle-small-active-width;
          }
        }

        & .e-switch-on,
        & .e-switch-off {
          font-size: $switch-small-font-size;
        }

        & .e-switch-on {
          text-indent: $switch-small-on-text-indent;
        }

        & .e-switch-off {
          text-indent: $switch-small-off-text-indent;
        }

        &.e-rtl {
          & .e-switch-handle {
            left: $switch-small-handle-active-left;
            margin-left: $switch-small-handle-margin-left;
          }

          & .e-switch-handle {
            height: $switch-small-handle-height;
            width: $switch-small-handle-width;
          }

          & .e-switch-on {
            left: $switch-small-on-rtl;
            opacity: $switch-active-on-opacity;
          }

          & .e-switch-off {
            left: $switch-small-off-rtl;
          }

          & .e-switch-inner.e-switch-active .e-switch-on {
            left: $switch-small-on-position-left-rtl;
          }

          & .e-switch-inner.e-switch-active .e-switch-off {
            left: $switch-small-off-position-left-rtl;
          }

          & .e-switch-handle.e-switch-active {
            left: $switch-small-handle-active-left-rtl;
            @if $skin-name == 'Material3' {
              height: $switch-handle-small-active-height;
              width: $switch-handle-small-active-width;
            }
          }
        }
      }
    }
  }

  #{if(&, '&', '*')}.e-small .e-switch-wrapper,
  #{if(&, '&', '*')}.e-small.e-switch-wrapper,
  #{if(&, '&', '*')}.e-small .e-css.e-switch-wrapper,
  #{if(&, '&', '*')}.e-small.e-css.e-switch-wrapper {
    height: $switch-small-wrapper-height;
    width: $switch-small-wrapper-width;
    @if $skin-name == 'fluent2' {
      margin: $small-switch-css-margin;
    }

    & .e-switch-handle {
      height: $switch-small-handle-height;
      width: $switch-small-handle-width;
      @if $skin-name == 'Material3' {
        left: $switch-small-handle-left;
        top: $switch-small-handle-top;
      }
    }

    & .e-ripple-container {
      border-radius: $switch-ripple-border-radius;
      height: $switch-small-ripple-height;
      left: $switch-small-ripple-left;
      pointer-events: none;
      position: absolute;
      top: $switch-small-ripple-top;
      width: $switch-small-ripple-width;
      z-index: 1;
      @if $skin-name == 'Material3' {
        left: $switch-small-off-ripple-left;
        top: $switch-small-off-ripple-top;
      }

      &.e-ripple-check {
        @if $skin-name == 'Material3' {
          left: $switch-small-ripple-left !important; /* stylelint-disable-line declaration-no-important */
          top: $switch-small-ripple-top !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }

    & .e-switch-handle.e-switch-active {
      left: $switch-small-handle-active-left;
      margin-left: $switch-small-handle-margin-left;
      @if $skin-name == 'Material3' {
        height: $switch-handle-small-active-height;
        width: $switch-handle-small-active-width;
      }
    }

    & .e-switch-on,
    & .e-switch-off {
      font-size: $switch-small-font-size;
    }

    & .e-switch-on {
      text-indent: $switch-small-on-text-indent;
    }

    & .e-switch-off {
      text-indent: $switch-small-off-text-indent;
    }

    &.e-rtl {
      & .e-switch-handle {
        left: $switch-small-handle-active-left;
        margin-left: $switch-small-handle-margin-left;
      }

      & .e-switch-handle {
        height: $switch-small-handle-height;
        width: $switch-small-handle-width;
      }

      & .e-switch-on {
        left: $switch-small-on-rtl;
        opacity: $switch-active-on-opacity;
      }

      & .e-switch-off {
        left: $switch-small-off-rtl;
      }

      & .e-switch-inner.e-switch-active .e-switch-on {
        left: $switch-small-on-position-left-rtl;
      }

      & .e-switch-inner.e-switch-active .e-switch-off {
        left: $switch-small-off-position-left-rtl;
      }

      & .e-switch-handle.e-switch-active {
        left: $switch-small-handle-active-left-rtl;
        @if $skin-name == 'Material3' {
          height: $switch-handle-small-active-height;
          width: $switch-handle-small-active-width;
        }
      }
    }
  }
}

@include export-module('switch-theme') {
  .e-switch-wrapper,
  .e-css.e-switch-wrapper {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;

    & .e-switch-off {
      background-color: $switch-off-bg-color;
      color: $switch-inner-off-font-color;
    }

    & .e-switch-handle {
      background-color: $switch-handle-bg-color;
      box-shadow: $switch-handle-shadow;
    }

    & .e-switch-on {
      background-color: $switch-on-bg-color;
      color: $switch-inner-on-font-color;
    }

    & .e-switch-handle.e-switch-active {
      background-color: $switch-active-handle-bg;
      @if $skin-name == 'bootstrap5.3' {
        opacity: 1;
      }
    }

    & .e-switch-inner.e-switch-active {
      background-color: $switch-inner-active-bg;
      border-color: $switch-inner-active-border-color;
    }

    & .e-switch-inner {
      background-color: $switch-inner-bg;
    }

    & .e-ripple-element {
      background-color: $switch-checked-ripple-bg-color;
    }

    & .e-ripple-check .e-ripple-element {
      background-color: $switch-ripple-bg-color;
    }

    &.e-switch-disabled {
      & .e-switch-handle.e-switch-active {
        box-shadow: $switch-handle-shadow-disabled;
        @if $skin-name == 'bootstrap4' {
          background-color: $switch-inner-on-font-color;
        }
        @if $skin-name == 'FluentUI' {
          background-color: $switch-handle-on-disabled-bg-color;
        }
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: $content-bg-color;
          @if $skin-name == 'bootstrap5.3' {
            opacity: 1;
          }
          @else {
            opacity: $switch-on-off-disabled-bg-color-opacity;
          }
        }
      }

      & .e-switch-handle:not(.e-switch-active) {
        @if $skin-name == 'Material3' {
          background-color: $switch-on-disabled-bg-color;
        }
      }

      & .e-switch-handle {
        background-color: $switch-handle-disabled-bg-color;
        box-shadow: $switch-handle-shadow-disabled;
      }

      & .e-switch-inner.e-switch-active {
        @if $skin-name == 'bootstrap4' {
          background-color: $switch-inner-active-bg;
          border-color: $switch-inner-active-bg;
        }
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: $primary;
          @if $skin-name == 'bootstrap5' {
            border-color: $primary;
          }
        }
        @if $skin-name == 'tailwind3' {
          background-color: $switch-inner-active-bg;
          border-color: $switch-inner-active-bg;
        }
      }

      & .e-switch-inner .e-switch-off {
        @if $skin-name == 'bootstrap4' {
          opacity: $switch-disabled-bg-color-opacity;
        }
        @else {
          opacity: $switch-on-off-disabled-bg-color-opacity;
        }
        background-color: $switch-on-off-disabled-bg-color;
        @if $skin-name == 'Material3' {
          border-color: $switch-handle-disabled-border-color;
        }
        @else {
          border-color: $switch-handle-disabled-bg-color;
        }
        color: $switch-disabled-font-color;
      }

      & .e-switch-inner .e-switch-on {
        @if $skin-name == 'bootstrap4' {
          color: $switch-inner-on-font-color;
          opacity: $switch-disabled-bg-color-opacity;
        }
        @else {
          color: $switch-disabled-font-color;
          opacity: $switch-on-off-disabled-bg-color-opacity;
        }
        background-color: $switch-on-disabled-bg-color;
        @if $skin-name == 'fluent2' {
          border-color: $toggle-switch-border-disabled !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      & .e-switch-inner {
        @if $skin-name == 'fluent2' {
          background-color: transparent;
        }
        @else {
          background-color: $switch-on-off-disabled-bg-color;
        }
        @if $skin-name != 'bootstrap5.3' {
          opacity: $switch-on-off-disabled-bg-color-opacity;
        }
        border-color: $switch-border-disabled-bg-color;
      }

      &:hover {
        & .e-switch-inner.e-switch-active {
          @if $skin-name == 'bootstrap4' {
            background-color: $switch-inner-active-bg;
            border-color: $switch-inner-active-bg;
          }
          @else {
            @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
              background-color: $switch-on-off-disabled-bg-color;
            }
            border-color: $switch-border-disabled-bg-color;
          }
        }
        & .e-switch-handle:not(.e-switch-active) {
          @if $skin-name == 'Material3' {
            background-color: $switch-on-disabled-bg-color;
          }
        }

        & .e-switch-inner {
          @if $skin-name == 'bootstrap4' {
            background-color: $switch-on-off-disabled-bg-color;
          }
          border-color: $switch-border-disabled-bg-color;
          color: $switch-disabled-font-color;
        }

        & .e-switch-inner.e-switch-active .e-switch-on {
          @if $skin-name == 'bootstrap4' {
            color: $switch-inner-on-font-color;
          }
          @else {
            color: $switch-disabled-font-color;
          }
          background-color: $switch-on-disabled-bg-color;
        }

        & .e-switch-handle {
          background-color: $switch-handle-disabled-bg-color;
        }

        & .e-switch-handle.e-switch-active {
          @if $skin-name == 'bootstrap4' {
            background-color: $switch-inner-on-font-color;
          }
          @else if $skin-name == 'FluentUI' {
            background-color: $switch-active-handle-bg;
          }
          @else {
            background-color: $switch-handle-disabled-bg-color;
          }
        }
      }
    }

    &:hover {
      & .e-switch-inner.e-switch-active {
        background-color: $switch-inner-hover-border-color;
        border-color: $switch-inner-hover-border-color;
      }

      & .e-switch-inner {
        background-color: $switch-hover-bg-color;
        border-color: $switch-hover-border;
      }

      & .e-switch-inner.e-switch-active .e-switch-on {
        background-color: $switch-on-hover-bg-color;
        color: $switch-inner-hover-on-font-color;
      }

      & .e-switch-handle.e-switch-active {
        @if $skin-name == 'FluentUI' {
          background-color: $switch-active-handle-bg;
        }

        @else {
          background-color: $switch-handle-hover-bg-color;
        }

        & .e-ripple-container {
          @if $skin-name == 'Material3' {
            background-color: $switch-checked-ripple-bg-color;
          }
        }

        & .e-ripple-check.e-ripple-container {
          @if $skin-name == 'Material3' {
            background-color: $switch-ripple-bg-color;
          }
        }
      }
    }

    &:not(.e-switch-disabled):hover {
      & .e-switch-handle:not(.e-switch-active) {
        @if $skin-name != 'bootstrap5.3' {
          background-color: $switch-handle-off-hover-bg-color;
        }
        @if $skin-name == 'tailwind3' {
          background-color: $switch-handle-bg-color;
        }
      }
    }

    &.e-focus,
    &:focus {
      & .e-switch-inner {
        background-color: $switch-inner-focus-off-bg;
        border-color: $switch-inner-focus-border;
        box-shadow: $switch-focus-inner-box-shadow;
        outline: $switch-focused-outline;
        outline-offset: $switch-focused-outline-offset;
      }

      & .e-switch-inner.e-switch-active {
        background-color: $switch-inner-focus-bg-color;
        border-color: $switch-focus-border-color-active;
        outline: $switch-focused-outline-active;
      }

      & .e-ripple-container {
        background-color: $switch-checked-ripple-bg-color;
      }

      & .e-ripple-check.e-ripple-container {
        background-color: $switch-ripple-bg-color;
      }
    }

    &.e-active,
    &:active {
      & .e-switch-inner {
        @if $skin-name == 'fluent2' {
          background-color: $content-bg-color;
          border-color: $border-pressed;
        }
        @else {
          background-color: $switch-inner-focus-off-bg;
          border-color: $switch-inner-focus-border;
        }
        box-shadow: $switch-focus-inner-box-shadow;
        outline: $switch-focused-outline;
        outline-offset: $switch-focused-outline-offset;

        &.e-switch-active {
          @if $skin-name == 'fluent2' {
            background-color: $primary-border-color-selected;
            border-color: $primary-border-color-selected;
          }
        }
      }

      & .e-switch-inner.e-switch-active {
        background-color: $switch-inner-focus-bg-color;
        border-color: $switch-focus-border-color-active;
        outline: $switch-focused-outline-active;
      }

      & .e-ripple-container {
        background-color: $switch-checked-ripple-bg-color;
      }

      & .e-ripple-check.e-ripple-container {
        background-color: $switch-ripple-bg-color;
      }
    }

    &.e-rtl {
      &.e-focus {

        & .e-switch-on {
          @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            background-color: $switch-on-hover-bg-color;
          }
          @else if $skin-name != 'bootstrap5.3' {
            background-color: $switch-on-off-hover-bg-color;
          }
        }

        & .e-switch-off {
          @if $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            background-color: $switch-off-bg-color;
          }
          @else {
            background-color: $switch-on-off-hover-bg-color;
          }
        }

        & .e-switch-inner.e-switch-active {
          background-color: $switch-inner-focus-bg-color;
          border-color: $switch-focus-border-color-active;
          color: $switch-inner-on-font-color;
          outline: $switch-focused-outline-active;
        }
      }

      & .e-switch-on {
        background-color: $switch-inner-active;
      }

      & .e-switch-handle {
        background-color: $switch-handle-bg-color;
        box-shadow: $switch-handle-shadow;
      }

      & .e-switch-inner.e-switch-active .e-switch-off {
        background-color: $switch-off-bg-color;
      }

      & .e-switch-handle.e-switch-active {
        background-color: $switch-active-handle-bg;
      }

      & .e-switch-inner.e-switch-active {
        background-color: $switch-inner-active-bg;
        border-color: $switch-inner-active-border-color;
      }

      &:hover {
        & .e-switch-inner.e-switch-active {
          @if $skin-name == 'bootstrap4' {
            background-color: $switch-on-hover-bg-color;
          }
          @else {
            background-color: $switch-inner-hover-bg-color;
          }
          border-color: $switch-inner-hover-border-color;
        }

        & .e-switch-inner {
          border-color: $switch-hover-border;
        }

        & .e-switch-inner.e-switch-active .e-switch-on {
          background-color: $switch-on-hover-bg-color;
        }

        & .e-switch-handle.e-switch-active {
          @if $skin-name == 'bootstrap4' {
            background-color: $switch-handle-hover-bg-color;
          }
          @else if $skin-name == 'FluentUI' {
            background-color: $switch-active-handle-bg;
          }
          @else {
            background-color: $switch-handle-hover-bg-color;
          }
        }
      }

      &.e-switch-disabled {
        & .e-switch-inner .e-switch-on {
          @if $skin-name == 'bootstrap4' {
            color: $switch-inner-on-font-color;
            opacity: $switch-disabled-bg-color-opacity;
          }
          @else {
            color: $switch-disabled-font-color;
            opacity: $switch-on-off-disabled-bg-color-opacity;
          }
          background-color: $switch-on-disabled-bg-color;
          @if $skin-name == 'fluent2' {
            border-color: $toggle-switch-border-disabled;
          }
        }

        & .e-switch-inner.e-switch-active {
          @if $skin-name == 'bootstrap4' {
            background-color: $switch-inner-active-bg;
            border-color: $switch-inner-active-bg;
          }
          @if $skin-name == 'tailwind3' {
            background-color: $switch-inner-active-bg;
            border-color: $switch-inner-active-bg;
          }
        }

        & .e-switch-inner .e-switch-off {
          @if $skin-name == 'bootstrap4' {
            opacity: $switch-disabled-bg-color-opacity;
          }
          @else {
            opacity: $switch-on-off-disabled-bg-color-opacity;
          }
          background-color: $switch-on-off-disabled-bg-color;
          color: $switch-disabled-font-color;
        }

        & .e-switch-handle {
          background-color: $switch-handle-disabled-bg-color;
          box-shadow: $switch-handle-shadow-disabled;
        }

        & .e-switch-handle.e-switch-active {
          @if $skin-name == 'bootstrap4' {
            background-color: $switch-inner-on-font-color;
          }
          @else {
            background-color: $switch-handle-on-disabled-bg-color;
          }
          box-shadow: $switch-handle-shadow-disabled;
        }

        & .e-switch-inner {
          background-color: $switch-on-off-disabled-bg-color;
          border-color: $switch-border-disabled-bg-color;
          opacity: $switch-on-off-disabled-bg-color-opacity;
        }

        &:hover {
          & .e-switch-inner.e-switch-active .e-switch-on {
            @if $skin-name == 'bootstrap4' {
              color: $switch-inner-on-font-color;
            }
            @else {
              color: $switch-disabled-font-color;
            }
            background-color: $switch-on-disabled-bg-color;
          }

          & .e-switch-inner.e-switch-active {
            @if $skin-name == 'bootstrap4' {
              background-color: $switch-inner-active-bg;
              border-color: $switch-inner-active-bg;
            }
            @else {
              background-color: $switch-on-off-disabled-bg-color;
              border-color: $switch-border-disabled-bg-color;
            }
          }

          & .e-switch-inner {
            border-color: $switch-border-disabled-bg-color;
            color: $switch-disabled-font-color;
          }

          & .e-switch-handle.e-switch-active {
            @if $skin-name == 'bootstrap4' {
              background-color: $switch-inner-on-font-color;
            }
            @else {
              background-color: $switch-handle-on-disabled-bg-color;
            }
          }

          & .e-switch-handle {
            background-color: $switch-handle-disabled-bg-color;
          }
        }
      }
    }

    & .e-switch {
      &:focus {
        box-shadow: $switch-focus-inner-box-shadow;
      }
    }

    &.e-small {
      &.e-rtl.e-switch-disabled {
        &:hover {
          & .e-switch-inner.e-switch-active {
            background-color: $switch-small-disabled-rtl-active-bg-color;
          }
        }
      }
    }
  }
}

.e-switch-wrapper:focus .e-switch-handle:not(.e-switch-active),
.e-switch-wrapper:active .e-switch-handle:not(.e-switch-active),
.e-switch-wrapper.e-focus .e-switch-handle:not(.e-switch-active) {
  @if $skin-name == 'bootstrap5.3' {
    background-color: $primary-light;
  }
}

@include export-module('switch-bigger') {
  #{if(&, '&', '*')}.e-bigger.e-small .e-switch-wrapper,
  #{if(&, '&', '*')}.e-bigger.e-small.e-switch-wrapper,
  #{if(&, '&', '*')}.e-bigger.e-small .e-css.e-switch-wrapper,
  #{if(&, '&', '*')}.e-bigger.e-small.e-css.e-switch-wrapper {
    height: $switch-bigger-small-wrapper-height;
    width: $switch-bigger-small-wrapper-width;
    @if $skin-name == 'fluent2' {
      margin: $switch-bgr-small-wrapper-margin;
    }

    & .e-switch-handle {
      height: $switch-bigger-small-handle-height;
      left: $switch-bigger-small-handle-left;
      top: $switch-bigger-small-handle-to;
      width: $switch-bigger-small-handle-width;
    }

    & .e-ripple-container {
      border-radius: $switch-ripple-border-radius;
      height: $switch-bigger-small-ripple-height;
      left: $switch-bigger-small-ripple-left;
      pointer-events: none;
      position: absolute;
      top: $switch-bigger-small-ripple-top;
      width: $switch-bigger-small-ripple-width;
      z-index: 1;
      @if $skin-name == 'Material3' {
        left: $switch-bigger-small-off-ripple-left;
        top: $switch-bigger-small-off-ripple-top;
      }

      &.e-ripple-check {
        @if $skin-name == 'Material3' {
          left: $switch-bigger-small-ripple-left !important; /* stylelint-disable-line declaration-no-important */
          top: $switch-bigger-small-ripple-top !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }

    & .e-switch-handle.e-switch-active {
      left: $switch-bigger-small-handle-active-left;
      margin-left: $switch-bigger-small-handle-margin-left;
      @if $skin-name == 'Material3' {
        height: $switch-handle-bigger-small-active-height;
        width: $switch-handle-bigger-small-active-width;
      }
    }

    & .e-switch-on,
    & .e-switch-off {
      font-size: $switch-bigger-small-font-size;
    }

    & .e-switch-on {
      text-indent: $switch-bigger-small-on-text-indent;
    }

    & .e-switch-off {
      text-indent: $switch-bigger-small-off-text-indent;
    }

    &.e-rtl {
      & .e-switch-handle {
        left: $switch-bigger-small-handle-active-left;
        margin-left: $switch-bigger-small-handle-margin-left;
      }

      & .e-switch-handle {
        height: $switch-bigger-small-handle-height;
        width: $switch-bigger-small-handle-width;
      }

      & .e-switch-on {
        left: $switch-bigger-small-on-rtl;
        opacity: $switch-active-on-opacity;
      }

      & .e-switch-off {
        left: $switch-bigger-small-off-rtl;
      }

      & .e-switch-inner.e-switch-active .e-switch-on {
        left: $switch-bigger-small-on-position-left-rtl;
      }

      & .e-switch-inner.e-switch-active .e-switch-off {
        left: $switch-bigger-small-off-position-left-rtl;
      }

      & .e-switch-handle.e-switch-active {
        left: $switch-bigger-small-handle-active-left-rtl;
        @if $skin-name == 'Material3' {
          height: $switch-handle-bigger-small-active-height;
          width: $switch-handle-bigger-small-active-width;
        }
      }
    }
  }

  #{if(&, '&', '*')}.e-bigger .e-switch-wrapper,
  #{if(&, '&', '*')}.e-bigger.e-switch-wrapper,
  #{if(&, '&', '*')}.e-bigger .e-css.e-switch-wrapper,
  #{if(&, '&', '*')}.e-bigger.e-css.e-switch-wrapper {
    height: $switch-bigger-wrapper-height;
    width: $switch-bigger-wrapper-width;
    @if $skin-name == 'fluent2' {
      margin: $switch-bgr-wrapper-margin;
    }

    & .e-switch-handle {
      height: $switch-bigger-handle-height;
      left: $switch-bigger-handle-left;
      top: $switch-bigger-handle-top;
      width: $switch-bigger-handle-width;
    }

    & .e-switch-handle.e-switch-active {
      left: $switch-bigger-handle-active-left;
      margin-left: $switch-bigger-handle-margin-left;
      @if $skin-name == 'Material3' {
        height: $switch-handle-bigger-active-height;
        width: $switch-handle-bigger-active-width;
      }
    }

    & .e-switch-on,
    & .e-switch-off {
      font-size: $switch-bigger-font-size;
    }

    & .e-switch-on {
      text-indent: $switch-bigger-on-text-indent;
    }

    & .e-switch-off {
      text-indent: $switch-bigger-off-text-indent;
    }

    & .e-ripple-container {
      height: $switch-bigger-ripple-height;
      left: $switch-bigger-ripple-left;
      top: $switch-bigger-ripple-top;
      width: $switch-bigger-ripple-width;
      @if $skin-name == 'Material3' {
        left: $switch-bigger-off-ripple-left;
        top: $switch-bigger-off-ripple-top;
      }

      &.e-ripple-check {
        @if $skin-name == 'Material3' {
          left: $switch-bigger-ripple-left !important; /* stylelint-disable-line declaration-no-important */
          top: $switch-bigger-ripple-top !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }

    &.e-rtl {
      & .e-switch-handle {
        height: $switch-bigger-handle-height;
        left: $switch-bigger-handle-active-left;
        margin-left: $switch-bigger-handle-margin-left;
        top: $switch-bigger-handle-top;
        width: $switch-bigger-handle-width;
      }

      & .e-switch-on {
        left: $switch-bigger-on-rtl;
        opacity: $switch-active-on-opacity;
      }

      & .e-switch-off {
        left: $switch-bigger-off-rtl;
      }

      & .e-switch-inner.e-switch-active .e-switch-on {
        left: $switch-bigger-on-position-left-rtl;
      }

      & .e-switch-inner.e-switch-active .e-switch-off {
        left: $switch-bigger-off-position-left-rtl;
      }

      & .e-switch-handle.e-switch-active {
        left: $switch-bigger-handle-active-left-rtl;
        @if $skin-name == 'Material3' {
          height: $switch-handle-bigger-active-height;
          width: $switch-handle-bigger-active-width;
        }
      }
    }

    &.e-small {
      height: $switch-bigger-small-wrapper-height;
      width: $switch-bigger-small-wrapper-width;

      & .e-switch-handle {
        height: $switch-bigger-small-handle-height;
        left: $switch-bigger-small-handle-left;
        top: $switch-bigger-small-handle-to;
        width: $switch-bigger-small-handle-width;
      }

      & .e-ripple-container {
        border-radius: $switch-ripple-border-radius;
        height: $switch-bigger-small-ripple-height;
        left: $switch-bigger-small-ripple-left;
        pointer-events: none;
        position: absolute;
        top: $switch-bigger-small-ripple-top;
        width: $switch-bigger-small-ripple-width;
        z-index: 1;
        @if $skin-name == 'Material3' {
          left: $switch-bigger-small-off-ripple-left;
          top: $switch-bigger-small-off-ripple-top;
        }

        &.e-ripple-check {
          @if $skin-name == 'Material3' {
            left: $switch-bigger-small-ripple-left !important; /* stylelint-disable-line declaration-no-important */
            top: $switch-bigger-small-ripple-top !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }

      & .e-switch-handle.e-switch-active {
        left: $switch-bigger-small-handle-active-left;
        margin-left: $switch-bigger-small-handle-margin-left;
        @if $skin-name == 'Material3' {
          height: $switch-handle-bigger-small-active-height;
          width: $switch-handle-bigger-small-active-width;
        }
      }

      & .e-switch-on,
      & .e-switch-off {
        font-size: $switch-bigger-small-font-size;
      }

      & .e-switch-on {
        text-indent: $switch-bigger-small-on-text-indent;
      }

      & .e-switch-off {
        text-indent: $switch-bigger-small-off-text-indent;
      }

      &.e-rtl {
        & .e-switch-handle {
          left: $switch-bigger-small-handle-active-left;
          margin-left: $switch-bigger-small-handle-margin-left;
        }

        & .e-switch-handle {
          height: $switch-bigger-small-handle-height;
          width: $switch-bigger-small-handle-width;
        }

        & .e-switch-on {
          left: $switch-bigger-small-on-rtl;
          @if $skin-name != 'tailwind3' {
            opacity: $switch-active-on-opacity;
          }
        }

        & .e-switch-off {
          left: $switch-bigger-small-off-rtl;
        }

        & .e-switch-inner.e-switch-active .e-switch-on {
          left: $switch-bigger-small-on-position-left-rtl;
        }

        & .e-switch-inner.e-switch-active .e-switch-off {
          left: $switch-bigger-small-off-position-left-rtl;
        }

        & .e-switch-handle.e-switch-active {
          left: $switch-bigger-small-handle-active-left-rtl;
        }
      }
    }
  }
}

//default
$listview-font-family: $font-family !default;
$listview-text-color: rgba($grey-dark-font, 1) !default;
$listview-text-disabled: $grey-light-font !default;
$listview-icon-color: $grey-dark-font !default;
$listview-icon-disabled: rgba($grey-dark-font, .5) !default;
$listview-icon-margin-right: 10px !default;
$listview-icon-back-margin: -2px !default;
$listview-rtl-icon-back-margin: -1px !default;
$listview-icon-line-height: 34px !default;
$listview-icon-collapsible: '\e943' !default;
$listview-icon-collapsible-rtl: '\e981' !default;
$listview-icon-back-rtl: '\e85f' !default;
$listview-back-icon: '\e94b' !default;
$listview-background: $grey-base !default;
$listview-line-color: rgba($grey-base, .1) !default;
$listview-item-hover-bg: $grey !default;
$listview-item-height: 40px !default;
$listview-item-line-height: 36px !default;
$listview-item-padding: 0 15px !default;
$listview-root-border-color: none;
$listview-root-border-radius: 0;
$listview-nested-icon-collapsible: 12px;
$checkmark-bgcolor: $grey-base !default;
$checkmark-border-color: $grey-dark-font !default;
$checkmark-color: $grey-dark-font !default;
$listview-border-bottom: 1px !default;
$listview-border-top: 0 !default;
$listview-border-left: 0 !default;
$listview-border-right: 0 !default;
$listview-hover-border-color: transparent !default;
$listview-border-bottom-color: rgba($grey-44, 1) !default;
$listview-border-top-color: transparent !default;
$listview-border-right-color: transparent !default;
$listview-border-left-color: transparent !default;
$listview-group-first-border-bottom: 1px !default;
$listview-group-border-top: 0 !default;
$listview-group-border-bottom: 1px !default;
$listview-text-hover-color: rgba($grey-light-font, .87) !default;
$listview-item-active-bg: $grey-44 !default;
$listview-text-active-color: rgba($grey-light-font, .87) !default;
$listview-header-text-color: rgba($grey-light-font, .95) !default;
$listview-header-text-disabled: $grey-light-font !default;
$listview-header-text-padding: 20px !default;
$listview-header-bg: $grey-white !default;
$listview-header-icon-color: $grey-light-font !default;
$listview-header-icon-disabled: $grey-light-font !default;
$listview-header-border: $grey-44 !default;
$listview-header-font-size: 14px !default;
$listview-header-height: 40px !default;
$listview-header-font-weight: bold !default;
$listview-header-line-height: 1px !default;
$listview-header-padding-bottom: 4px !default;
$listview-groupheader-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
$listview-groupheader-bg: $grey-base !default;
$listview-groupheader-border: $grey-44 !default;
$listview-groupheader-icon: $grey-dark-font !default;
$listview-groupheader-item-height: 40px !default;
$listview-groupheader-item-line-height: 36px !default;
$listview-groupheader-font-size: 14px !default;
$listview-border-size: 0 !default;
$listview-font-size: 14px !default;
$listview-back-padding-right: 10px !default;
$listview-back-icon-height: 0 !default;
$listview-back-icon-font-size: 14px !default;
$listview-touch-item-height: 48px !default;
$listview-touch-item-line-height: 45px !default;
$listview-touch-item-font-size: 15px !default;
$listview-touch-groupheader-height: 48px !default;
$listview-touch-groupheader-line-height: 45px !default;
$listview-touch-header-height: 48px !default;
$listview-touch-header-font-weight: bold !default;
$listview-touch-back-icon-padding: 2px !default;
$listview-touch-header-font-size: 15px !default;
$listview-touch-header-line-height: 6px !default;
$listview-touch-header-icon-margin-top: 2px !default;
$listview-checkbox-left-margin: -4px 10px 0 0 !default;
$listview-checkbox-right-margin: -4px 0 0 10px !default;
$listview-rtl-checkbox-left-margin: -4px 0 0 10px !default;
$listview-rtl-checkbox-right-margin: -4px 10px 0 0 !default;
$listview-list-margin: 0 !default;
$listview-list-padding: 0 !default;
$listview-header-border-bottom-size: 1px !default;
$listview-group-item-font-weight: 600 !default;
$listview-border-none: 0 !default;
$listview-item-icon-margin-left: 16px !default;
$listview-item-icon-margin-right: 0 !default;
$listitem-header-font-weight: 500 !default;
$listview-margin-none: 0 !default;
$listview-padding-none: 0 !default;
$listview-text-content-height: 100% !default;
$listview-checkbox-text-content-width: calc(100% - 40px) !default;
$listview-checkbox-left-list-icon-text-width: calc(100% - 90px) !default;
$listview-checkbox-right-list-icon-text-width: calc(100% - 80px) !default;
$listview-icon-text-width: calc(100% - 60px) !default;
$listview-list-icon-size: 30px !default;

//ListView In-built template variables
$listview-template-padding: .7142em 1.0714em !default;
$listview-template-avatar-padding-right: 1.0714em !default;
$listview-template-avatar-padding-left: 4.6428em !default;
$listview-template-avatar-rightposition-padding-right: 4.6428em !default;
$listview-template-avatar-rightposition-padding-left: 1.0714em !default;
$listview-template-avatar-size: 2.8571em !default;
$listview-template-avatar-top: .7142em !default;
$listview-template-avatar-left: 1.0667em !default;
$listview-template-avatar-rightposition-right: 1.0667em !default;
$listview-template-badge-height: 1.333em !default;
$listview-template-badge-width: 2em !default;
$listview-template-badge-line-height: 1.433em !default;
$listview-template-badge-font-size: 15px !default;
$listview-template-badge-right: 1em !default;
$listview-template-avatar-badge-padding-right: 3.9285em !default;
$listview-template-avatar-badge-padding-left: 4.6428em !default;
$listview-template-badgewithoutavatar-padding-right: 3.9285em !default;
$listview-template-badgewithoutavatar-padding-left: 1.0714em !default;
$listview-template-item-padding: .83em 0 !default;
$listview-template-multiline-header-color: $grey-light-font !default;
$listview-template-multiline-content-color: $grey-light !default;
$listview-template-multiline-header-padding: .038em 0 !default;
$listview-template-multiline-content-padding: .038em 0 !default;
$listview-template-multiline-header-font-size: 18px !default;
$listview-template-multiline-padding: .7142em 1.0714em !default;
$listview-template-multiline-content-font-size: 14px !default;
$listview-template-multiline-avatar-top: .7142em !default;
$listview-template-height: inherit !default;

//enddefault

@mixin list-style($height, $line-height, $position) {
  height: $height;
  line-height: $line-height;
  position: $position;
}

@mixin size($height, $width) {
  height: $height;
  width: $width;
}

@mixin text-style($font-size, $line-height) {
  font-size: $font-size;
  line-height: $line-height;
}

@mixin header($font-weight, $height) {
  align-items: center;
  display: flex;
  font-weight: $font-weight;
  height: $height;

  .e-text.header,
  .e-headertemplate-text.nested-header {
    display: none;
  }
}

@mixin checkbox-style($left, $right) {
  .e-checkbox-left {
    margin: $left;
  }
  .e-checkbox-right {
    margin: $right;
  }
}

@mixin list-checkbox-style($left, $right) {
  &.e-checkbox-left {
    margin: $left;
  }
  &.e-checkbox-right {
    margin: $right;
  }
}

@mixin icon-margin($margin-left, $margin-right) {
  margin-left: $margin-left;
  margin-right: $margin-right;
}

@include export-module('listview-layout') {
  /* stylelint-disable property-no-vendor-prefix */

  .e-listview {
    -webkit-overflow-scrolling: touch;
    border: $listview-border-size solid;
    border-radius: $listview-root-border-radius;
    display: block;
    overflow: auto;
    position: relative;
    width: 100%;

    &:not(.e-list-template) .e-list-item {
      @include list-style($listview-item-height, $listview-item-line-height, relative);
      @if $skin-name != 'fluent2' {
        padding: $listview-item-padding;
      }
    }

    @at-root {
      & .e-list-item {
        border-bottom: $listview-border-size solid;
        cursor: pointer;
        @if $skin-name == 'fluent2' {
          border-radius: $listview-item-radius;
          margin: $listview-item-margin-bottom;
          padding: $listview-padding-none;
        }
        @if ($skin-name == 'tailwind') {
          .e-text-content .e-list-text {
            font-size: $listview-font-size;
          }
        }
        &.e-disabled,
        &.e-disabled * {
          cursor: default;
        }
      }

      &.e-listview-template {
        .e-list-item{
          .e-checkbox{
            display: flex;
            align-items: baseline;
          }
        }
      }

      & .e-list-parent {
        margin: $listview-list-margin;
        padding: $listview-list-padding;
      }

      & .e-icon-back {
        @if ($skin-name == 'tailwind') {
          @include size($listview-back-icon-size, $listview-back-icon-size);
        }
        @else {
          margin-top: $listview-icon-back-margin;
        }
        @if ($skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          margin-right: $listview-icon-back-margin-right;
        }
        @if ($skin-name == 'tailwind3') {
          @include size($listview-back-icon-size, $listview-back-icon-size);
          margin: $listview-back-icon-margin;
        }
      }

      & .e-list-header {
        @include header($listview-header-font-weight, $listview-header-height);
        @if ($skin-name == 'tailwind') {
          padding: 6px $listview-header-text-padding;
          .e-headertext {
            text-transform: uppercase;
          }
        }
        @else {
          @if ($skin-name != 'FluentUI' and $skin-name != 'Material3' and $skin-name != 'fluent2' ) {
            border-bottom: $listview-header-border-bottom-size solid;
          }
          padding: $listview-list-padding $listview-header-text-padding;
        }

        &.e-list-navigation .e-text {
          cursor: pointer;
        }

        & .e-header-back-icon {
          display: none;
        }

        .e-text {
          cursor: default;
          text-indent: 0;
        }
      }

      & .e-list-navigation .e-but-back.e-header-back-icon {
        display: block;
      }

      & .e-has-header > .e-view {
        top: 45px;
      }

      & .e-back-button {
        cursor: pointer;
        @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
          margin-right: $listview-back-padding-right;
        }
        @else {
          padding-right: $listview-back-padding-right;
        }
        @if ($skin-name == 'FluentUI') {
          font-size: 12px;
        }
      }

      & .e-list-group-item {
        border-bottom: $listview-group-border-bottom solid $listview-border-bottom-color;
        border-top: $listview-group-border-top solid;
        height: $listview-groupheader-item-height;
        line-height: $listview-groupheader-item-line-height;
        font-weight: $listview-group-item-font-weight;
        @if ($skin-name == 'tailwind') {
          box-sizing: border-box;
          font-weight: $font-weight-medium;
          padding: $listview-header-padding;

          .e-list-text {
            text-transform: uppercase;
          }
        }
        @else if $skin-name == 'fluent2' {
          padding: $listview-header-padding;
          margin: $listview-item-margin-bottom;
        }
        @else {
          padding: $listview-item-padding;
        }
        @if ($skin-name == 'Material3') {
          border-top: $listview-group-border-bottom solid $listview-border-bottom-color;
          border-bottom: $listview-group-border-top solid;
        }

        .e-list-text {
          cursor: default;
          @if $skin-name == 'fluent2' {
            padding: $listview-padding-none;
          }
          @if $skin-name == 'tailwind3' {
            font-weight: $listview-group-item-font-weight;
          }
        }

        &:first-child {
          border: $listview-border-none;
          border-bottom: $listview-group-first-border-bottom solid $listview-border-bottom-color;
        }
      }

      & .e-icon-collapsible {
        cursor: pointer;
        font-size: $listview-nested-icon-collapsible;
        position: absolute;
        @if ($skin-name == 'fluent2') {
          right: 3px;
        }
        @else {
          right: 0%;
        }
        top: 50%;
        transform: translateY(-50%);
        @if ($skin-name == 'tailwind') {
          @include size($listview-icon-height, $listview-icon-size);
        }
      }

      & .e-text-content {
        height: $listview-text-content-height;
        position: relative;
        vertical-align: middle;

        &.e-checkbox {
          .e-list-text {
            width: $listview-checkbox-text-content-width;
          }
          &.e-checkbox-left .e-list-icon + .e-list-text {
            width: $listview-checkbox-left-list-icon-text-width;
          }
          &.e-checkbox-right .e-list-icon + .e-list-text {
            width: $listview-checkbox-right-list-icon-text-width;
          }
        }
      }

      & .e-text-content * {
        display: inline-block;
        vertical-align: middle;
      }

      & .e-list-item.e-checklist.e-has-child {
        .e-text-content.e-checkbox.e-checkbox-right {
          .e-list-icon + .e-list-text {
            width: calc(100% - 92px);
          }
        }
      }

      & .e-checkbox {
        @include checkbox-style($listview-checkbox-left-margin, $listview-checkbox-right-margin);
      }

      & .e-list-text {
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: 100%;
        @if $skin-name == 'fluent2' {
          padding: $listview-item-padding;
        }
        @if $skin-name == 'tailwind3' {
          font-weight: $listview-list-text-font-weight;
        }
      }

      & .e-list-icon + .e-list-text,
      & .e-icon-wrapper .e-list-text,
      & .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
        width: $listview-icon-text-width;
      }

      & .e-list-icon {
        margin-right: $listview-icon-margin-right;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
          @include size($listview-icon-height, $listview-icon-size);
        }
        @else if ($skin-name == 'Material3') {
          @include size($listview-icon-size, $listview-icon-size);
        }
        @else if ($skin-name == 'material' or $skin-name == 'material-dark') {
          @include size($listview-icon-size, $listview-icon-size);
        }
        @else {
          @include size($listview-list-icon-size, $listview-list-icon-size);
        }
      }

      &.e-virtualization .e-list-container{
        overflow: unset;
      }

      & .e-list-container {
        overflow: hidden;
        position: relative;
      }

      & .e-text .e-headertext {
        display: inline-block;
        line-height: $listview-header-line-height;
      }

      &.e-rtl {
        direction: rtl;

        @if ($skin-name == 'FluentUI') {
          & .e-back-button {
            @include icon-margin(12px, 0);
          }
        }

        &:not(.e-list-template) .e-list-item {
          @if ($skin-name == 'tailwind') {
            padding: $listview-rtl-item-padding;
          }
        }

        & .e-list-icon {
          @if ($skin-name == 'tailwind') {
            @include icon-margin(8px, 0);
          }
          @else {
            @include icon-margin($listview-item-icon-margin-left, $listview-item-icon-margin-right);
          }
        }

        & .e-icon-collapsible {
          left: 0%;
          right: initial;
          top: 50%;
          transform: translateY(-50%) rotate(180deg);
        }

        & .e-list-header .e-text {
          cursor: pointer;
        }

        & .e-back-button {
          transform: rotate(180deg);
          @if ($skin-name == 'tailwind') {
            @include icon-margin(8px, 0);
          }
        }

        & .e-icon-back {
          @if ($skin-name != 'tailwind') {
            margin-top: $listview-rtl-icon-back-margin;
          }
          @if ($skin-name == 'tailwind3') {
            margin-bottom: $listview-rtl-icon-back-margin;
            margin-left: $listview-rtl-icon-margin-left;
          }
        }

        & .e-checkbox {
          @include checkbox-style($listview-rtl-checkbox-left-margin, $listview-rtl-checkbox-right-margin);
        }
      }
      &.e-disabled,
      &.e-disabled * {
        cursor: default;
      }

      &.e-disabled .e-checkbox .e-icons{
        cursor: default;
      }
    }
  }
}

@mixin avatar-padding($left, $right) {
  padding-left: $left;
  padding-right: $right;
}

@mixin list-color($bg-color, $color, $border) {
  background-color: $bg-color;
  color: $color;
  border-color: $border;
}

@mixin avatar-size($height, $width, $top, $left, $right) {
  height: $height;
  width: $width;
  top: $top;
  left: $left;
  right: $right;
}

@include export-module('listview-theme') {
  .e-listview {
    border-color: $listview-line-color;
    font-family: $listview-font-family;
    font-size: $listview-font-size;
    @at-root {
      & .e-list-header {
        @include list-color($listview-header-bg, $listview-header-text-color, $listview-header-border);
        font-size: $listview-header-font-size;
      }

      & .e-icons:not(.e-primary .e-btn-icon, .e-check) {
        @if ($skin-name != 'bootstrap5.3') {
          color: $listview-icon-color;
        }
        @if ($skin-name == 'tailwind') {
          &.e-back-button,
          &.e-icon-collapsible {
            &:hover {
              color: $icon-color-hover;
            }
          }
        }
        @if ($skin-name == 'bootstrap5') {
          &.e-back-button{
            &:hover {
              color: $icon-color-hover;
            }
            &:active {
              color: $icon-color-pressed;
            }
          }
        }
      }

      & .e-list-item {
        border-bottom: $listview-border-bottom solid $listview-border-bottom-color;
        border-left: $listview-border-left solid $listview-border-left-color;
        border-right: $listview-border-right solid $listview-border-right-color;
        border-top: $listview-border-top solid $listview-border-top-color;
        @include list-color($listview-background, $listview-text-color, null);

        &.e-hover,
        &.e-hover.e-active.e-checklist {
          @include list-color($listview-item-hover-bg, $listview-text-hover-color, $listview-hover-border-color);
        }

        &.e-active {
          @include list-color($listview-item-active-bg, $listview-text-active-color, null);

          &.e-checklist {
            @include list-color($listview-background, $listview-text-color, null);

            @if $skin-name == 'Material3' {
              & .e-checkbox-wrapper .e-frame.e-check {
                color: $checkmark-color;
              }
            }
          }
        }

        &.e-focused,
        &.e-focused.e-active.e-checklist {
          @include list-color($listview-item-active-bg, $listview-text-active-color, null);
        }

        &.e-focused .e-checkbox-wrapper .e-frame.e-check,
        &.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
          @if ($skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'fluent2') {
            @include list-color($checkmark-bgcolor, $checkmark-color, $checkmark-border-color);
          }
        }
      }

      & .e-list-group-item {
        @include list-color($listview-groupheader-bg, $listview-groupheader-text-color, $listview-header-border);
        font-size: $listview-groupheader-font-size;
      }

      @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5') {
        & .e-list-item.e-focused .e-icon-wrapper .e-icon-collapsible {
          color: $listview-focused-collapsible-color;
        }
      }
    }

    &.e-list-template {
      .e-list-wrapper {
        height: $listview-template-height;
        position: relative;

        &:not(.e-list-multi-line) {
          padding: $listview-template-padding;

          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
            &.e-list-badge:not(.e-list-avatar) {
              padding: 0 8px 0 12px;
            }
          }
          @if ($skin-name == 'FluentUI') {
            &.e-list-badge:not(.e-list-avatar) {
              padding: 2px 10px 2px 16px;
            }
          }
        }

        &.e-list-multi-line {
          padding: $listview-template-multiline-padding;

          .e-list-item-header {
            color: $listview-template-multiline-header-color;
            display: block;
            font-size: $listview-template-multiline-header-font-size;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
              font-weight: $font-weight-normal;
              line-height: $listview-item-header-line-height;
            }
            @else if $skin-name == 'fluent2' {
              font-weight: $font-weight-normal;
              line-height: $listview-item-header-line-height;
            }
            @else {
              font-weight: $listitem-header-font-weight;
            }
            @if ($skin-name == 'tailwind3') {
              line-height: $listview-header-line-height;
            }
            margin: $listview-margin-none;
            overflow: hidden;
            padding: $listview-template-multiline-header-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .e-list-content {
            color: $listview-template-multiline-content-color;
            display: block;
            font-size: $listview-template-multiline-content-font-size;
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3') {
              font-weight: $font-weight-normal;
              @if ($skin-name == 'FluentUI') {
                line-height: $listview-list-content-line-height;
              }
              @else {
                line-height: $listview-list-content-line-height;
              }
            }
            @if ($skin-name == 'fluent2') {
              line-height: $listview-list-content-line-height;
            }
            @if ($skin-name == 'tailwind3') {
              line-height: $listview-header-line-height;
            }
            margin: $listview-margin-none;
            padding: $listview-template-multiline-content-padding;
            word-wrap: break-word;
          }

          .e-list-content:not(.e-text-overflow) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        &.e-list-avatar {
          .e-avatar {
            @include avatar-size($listview-template-avatar-size, $listview-template-avatar-size, $listview-template-avatar-top, $listview-template-avatar-left, null);
            position: absolute;
            @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
              margin: $listview-template-avatar-margin;
            }
            @if ($skin-name == 'Material3' or $skin-name == 'tailwind3') {
              background-color: $listview-template-avatar-background;
            }
            @if ($skin-name == 'tailwind3') {
              top: -3px;
            }
          }
        }

        &.e-list-avatar:not(.e-list-badge) {
          @include avatar-padding($listview-template-avatar-padding-left, $listview-template-avatar-padding-right);
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          @include avatar-padding($listview-template-avatar-rightposition-padding-left, $listview-template-avatar-rightposition-padding-right);

          .e-avatar {
            @include avatar-size($listview-template-avatar-size, $listview-template-avatar-size, $listview-template-avatar-top, null, $listview-template-avatar-rightposition-right);
            position: absolute;
          }
        }

        &.e-list-multi-line.e-list-avatar {
          .e-avatar {
            top: $listview-template-multiline-avatar-top;
          }
        }

        &.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) {
          .e-avatar {
            top: $listview-template-multiline-avatar-top;
          }
        }

        &.e-list-badge {
          .e-badge {
            font-size: $listview-template-badge-font-size;
            @include avatar-size($listview-template-badge-height, $listview-template-badge-width, 50%, null, $listview-template-badge-right);
            line-height: $listview-template-badge-line-height;
            padding: $listview-padding-none;
            position: absolute;
            transform: translateY(-50%);
            @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'Material3'  or $skin-name == 'fluent2') {
              border-radius: $listview-list-badge-border-radius;
            }
          }
        }

        &.e-list-badge.e-list-avatar {
          @include avatar-padding($listview-template-avatar-badge-padding-left, $listview-template-avatar-badge-padding-right);
        }

        &.e-list-badge:not(.e-list-avatar) {
          @include avatar-padding($listview-template-badgewithoutavatar-padding-left, $listview-template-badgewithoutavatar-padding-right);
        }

        &:not(.e-list-multi-line) {
          .e-list-content {
            display: block;
            margin: $listview-margin-none;
            overflow: hidden;
            padding: $listview-template-item-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
            @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'fluent2') {
              font-size: $listview-font-size;
              line-height: $listview-item-line-height;
            }
          }
        }
      }

      .e-list-item {
        &.e-focused {
          .e-list-wrapper.e-list-multi-line {
            @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
              .e-list-item-header,
              .e-list-content {
                color: $content-text-color-selected;
              }
            }
          }
        }

        &.e-hover .e-list-item-header,
        &.e-hover .e-list-content {
          color: $listview-text-hover-color;
        }

        &.e-active .e-list-item-header,
        &.e-active .e-list-content {
          color: $listview-text-active-color;
        }
      }
    }

    &.e-rtl {
      &.e-list-template .e-list-wrapper {
        &.e-list-avatar {
          .e-avatar {
            left: inherit;
            @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
              margin: 7px 12px 7px 16px;
            }
            right: $listview-template-avatar-left;
          }
        }

        &.e-list-avatar:not(.e-list-badge) {
          @include avatar-padding($listview-template-avatar-padding-right, $listview-template-avatar-padding-left);
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          @include avatar-padding($listview-template-avatar-rightposition-padding-right, $listview-template-avatar-rightposition-padding-left);

          .e-avatar {
            left: $listview-template-avatar-rightposition-right;
            right: inherit;
          }
        }

        &.e-list-badge {
          .e-badge {
            left: $listview-template-badge-right;
            right: inherit;
          }
        }

        &.e-list-badge.e-list-avatar {
          @include avatar-padding($listview-template-avatar-badge-padding-right, $listview-template-avatar-badge-padding-left);
        }

        &.e-list-badge:not(.e-list-avatar) {
          @include avatar-padding($listview-template-badgewithoutavatar-padding-right, $listview-template-badgewithoutavatar-padding-left);
        }
      }
    }
  }
}

@include export-module('listview-bootstrap-dark-icons') {
  .e-listview {
    .e-icon-collapsible::before {
      content: '\e943';
    }

    .e-icon-back::before {
      content: '\e94b';
      font-size: $listview-back-icon-font-size;
    }
  }
}

@mixin list-style($height, $line-height, $position) {
  height: $height;
  line-height: $line-height;
  position: $position;
}

@mixin size($height, $width) {
  height: $height;
  width: $width;
}

@mixin text-style($font-size, $line-height) {
  font-size: $font-size;
  line-height: $line-height;
}

@mixin header($font-weight, $height) {
  align-items: center;
  display: flex;
  font-weight: $font-weight;
  height: $height;

  .e-text.header,
  .e-headertemplate-text.nested-header {
    display: none;
  }
}

@mixin checkbox-style($left, $right) {
  @if $skin-name != 'fluent2' {
    .e-checkbox-left {
      margin: $left;
    }
    .e-checkbox-right {
      margin: $right;
    }
  }
}

@mixin list-checkbox-style($left, $right) {
  &.e-checkbox-left {
    margin: $left;
  }
  &.e-checkbox-right {
    margin: $right;
  }
}

@mixin icon-margin($margin-left, $margin-right) {
  margin-left: $margin-left;
  margin-right: $margin-right;
}

@mixin avatar-size($height, $width, $top, $left, $right) {
  height: $height;
  width: $width;
  top: $top;
  left: $left;
  right: $right;
}

@include export-module('listview-bigger') {
  .e-bigger #{&}.e-listview,
  #{&}.e-listview.e-bigger {
    @if ($skin-name == 'bootstrap4') {
      font-size: 16px;
    }

    .e-list-item {
      border-bottom: $listview-border-bottom solid $listview-border-bottom-color;
      border-left: $listview-border-left solid $listview-border-left-color;
      border-right: $listview-border-right solid $listview-border-right-color;
      border-top: $listview-border-top solid $listview-border-top-color;
      @if ($skin-name == 'tailwind3') {
        padding: $listview-touch-item-padding;
      }
      @if ($skin-name == 'tailwind') {
        .e-text-content .e-list-text {
          font-size: $listview-touch-item-font-size;
        }
      }
      @if $skin-name == 'fluent2' {
        .e-list-text {
          padding: $listview-touch-item-padding;
        }
      }
    }

    &:not(.e-list-template) .e-list-item {
      @include list-style($listview-touch-item-height, $listview-touch-item-line-height, relative);
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap4') {
        padding: $listview-touch-item-padding;
      }
    }

    .e-text-content {
      font-size: $listview-touch-item-font-size;
    }

    .e-list-group-item {
      height: $listview-touch-groupheader-height;
      line-height: $listview-touch-groupheader-line-height;
      @if ($skin-name == 'bootstrap4') {
        padding: 12px 20px;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
        padding: $listview-template-padding;
      }
      @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap4') {
        font-size: 16px;
      }
      @if ($skin-name == 'tailwind3') {
        padding-top: $listview-touch-group-item-padding-top;
      }

      .e-text-content {
        @if ($skin-name == 'tailwind' or $skin-name == 'Material3') {
          @include text-style($listview-touch-header-font-size, $listview-touch-groupheader-line-height);
        }
      }
    }

    .e-list-header {
      @include header($listview-touch-header-font-weight, $listview-touch-header-height);
      @if ($skin-name == 'bootstrap4') {
        @include text-style(20px, 1.2);
        padding: 0 0 0 20px;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'FluentUI') {
        @include text-style($text-sm, $listview-item-line-height);
        padding: $listview-template-padding;
      }
      @if ($skin-name == 'tailwind3') {
        padding: $listview-touch-list-header-padding-top;
      }

      .e-text {
        font-size: $listview-touch-header-font-size;
      }
    }

    .e-back-button {
      @if ($skin-name == 'bootstrap4') {
        margin-top: -3px;
        padding-right: 12px;
      }
      @if ($skin-name == 'tailwind') {
        margin-right: $listview-touch-icon-margin-right;
      }
    }

    .e-list-icon {
      @if ($skin-name == 'bootstrap4') {
        margin-right: 12px;
      }
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
        @include size($listview-touch-item-height, $listview-touch-item-size);
        margin-right: $listview-touch-icon-margin-right;
      }
    }

    .e-icon-collapsible {
      @if ($skin-name == 'bootstrap4') {
        font-size: $listview-icon-collapsible-font-size;
      }
      @else if $skin-name == 'fluent2' {
        font-size: $listview-icon-collapsible-font-size;

        &::before {
          padding: $listview-icon-collapsible-before-padding;
        }
      }
      @if ($skin-name == 'tailwind') {
        font-size: $listview-touch-item-size;
        @include size($listview-touch-item-height, $listview-touch-item-size);
      }
      @if ($skin-name == 'tailwind3') {
        font-size: $listview-touch-collapsible-icon-font-size;
      }
    }

    .e-listview-checkbox {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap4') {
        @include list-checkbox-style($listview-touch-checkbox-left-margin, $listview-touch-checkbox-right-margin);
      }
      @if ($skin-name == 'FluentUI') {
        &.e-checkbox-left {
          border: 0;
          padding: 0;
          margin: $listview-touch-checkbox-left-margin;
        }
      }
      @if $skin-name == 'tailwind3' {
        margin: $listview-touch-checkbox-left-margin;
      }
    }

    & .e-icon-back {
      @if $skin-name == 'tailwind3' {
        margin: $listview-touch-back-icon-margin;
        @include size($listview-icon-height, $listview-icon-size);
        &::before {
          font-size: $listview-touch-back-icon-font-size;
        }
      }
    }

    &.e-rtl {
      @if ($skin-name == 'FluentUI') {
        &.e-list-template {
          .e-list-wrapper {
            &.e-list-avatar {
              .e-avatar {
                margin: $listview-template-avatar-rtl-margin;
              }
            }
          }
        }
      }
      @if ($skin-name == 'tailwind') {
        &:not(.e-list-template) .e-list-item {
          padding: $listview-rtl-touch-item-padding;
        }

        & .e-list-icon {
          margin-left: 12px;
        }

        & .e-back-button {
          @include icon-margin(12px, 0);
        }
      }
      @if ($skin-name == 'Material3') {
        & .e-list-icon {
          @include icon-margin($listview-touch-icon-margin-right, $listview-rtl-icon-back-margin);
        }
        & .e-icon-back {
          @include icon-margin($listview-icon-back-margin-right, $listview-rtl-icon-back-margin);
        }
      }

      @if $skin-name == 'tailwind3' {
        & .e-list-icon {
          margin-right: $listview-rtl-touch-list-icon-margin-right;
        }
        & .e-icon-back {
          margin: $listview-rtl-touch-back-icon-margin;
        }
      }

      .e-listview-checkbox {
        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap4') {
          @include list-checkbox-style($listview-touch-rtl-checkbox-left-margin, $listview-touch-rtl-checkbox-right-margin);
        }
      }

      @if ($skin-name == 'tailwind') {
        &.e-list-template {
          .e-list-wrapper {
            &.e-list-avatar {
              .e-avatar {
                margin: 8px 16px 8px 24px;
              }
            }

            &.e-list-avatar:not(.e-list-badge),
            &.e-list-badge.e-list-avatar {
              padding-right: $listview-touch-template-avatar-padding-left;
            }
          }
        }
      }
    }

    @if ($skin-name == 'tailwind3') {
      .e-list-wrapper {
        &.e-list-avatar {
          .e-avatar {
            @include avatar-size($listview-touch-template-avatar-height, $listview-touch-template-avatar-size, -5px, $listview-template-avatar-left, null);
            margin: $listview-touch-list-avatar-margin;
          }
        }

        &.e-list-multi-line {
          padding: $listview-touch-template-multiline-padding;
          &.e-list-avatar {
            .e-avatar {
              top: -3px;
            }
          }
          .e-list-item-header,
          .e-list-content {
            @include text-style($listview-touch-template-multiline-header-font-size, $listview-touch-template-multiline-header-line-height);
          }
          .e-list-content {
            padding-top: $listview-touch-template-multiline-content-padding-top;
          }
        }
      }
    }

    @if ($skin-name == 'tailwind') {
      &.e-list-template {
        .e-list-header {
          padding: 8px 16px;
        }

        .e-list-wrapper {
          &.e-list-multi-line {
            padding: $listview-touch-template-multiline-padding;

            .e-list-item-header,
            .e-list-content {
              @include text-style($listview-touch-template-multiline-header-font-size, $listview-touch-template-multiline-header-line-height);
              font-weight: $font-weight-normal;
            }
          }

          &:not(.e-list-multi-line) {
            &.e-list-badge:not(.e-list-avatar) {
              padding: 0 12px 0 16px;

              .e-list-content {
                padding: 14px 0;
              }
            }
          }

          &.e-list-avatar {
            .e-avatar {
              @include size($listview-touch-template-avatar-size, $listview-touch-template-avatar-size);
              margin: $listview-touch-template-avatar-margin;
            }
          }

          &.e-list-avatar:not(.e-list-badge),
          &.e-list-badge.e-list-avatar {
            padding-left: $listview-touch-template-avatar-padding-left;
          }

          &:not(.e-list-multi-line) {
            .e-list-content {
              font-size: 16px;
              padding: 12px 0;
            }
          }
        }
      }
    }

    & .e-text-content.e-checkbox .e-list-text {
      @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
        width: calc(100% - 60px);
      }
      @else {
        width: calc(100% - 40px);
      }
    }

    @if ($skin-name == 'FluentUI') {
      &.e-list-template {
        .e-list-wrapper {
          &:not(.e-list-multi-line) {
            padding: $listview-template-touch-padding;
          }

          &.e-list-multi-line {
            padding: $listview-template-multiline-touch-padding;

            .e-list-item-header {
              @include text-style($listview-template-touch-font-size, 24px);
            }

            .e-list-content {
              @include text-style($listview-template-multiline-header-font-size, 22px);
            }
          }

          &.e-list-avatar {
            .e-avatar {
              @include size($listview-template-avatar-touch-size, $listview-template-avatar-touch-size);
            }
          }

          &:not(.e-list-multi-line) {
            .e-list-content {
              @include text-style($listview-template-touch-font-size, 24px);
            }
          }
        }
      }
    }
  }
}

/* stylelint-disable-line no-empty-source */

@include export-module('sortable-layout') {
  #{&}.e-sortable {
    outline: none;
    position: relative;
    user-select: none;

    .e-disabled {
      background-image: none;
      cursor: default;
      opacity: .35;
    }

    * {
      box-sizing: border-box;

      &:focus {
        outline: none;
      }
    }
  }

  /* stylelint-disable */
  .e-sortableclone {
    position: fixed !important;
  }
  /* stylelint-enable */
}

$range-bg-color:  $content-bg-color !default;
$range-primary-color: $brand-primary !default;
$range-primary-font-color: $brand-primary-font !default;
$range-presets-bg: $grey-dark !default;
$range-preset-normal-font-color: $grey-dark-font !default;
$range-font-color: none !default;
$range-active-icon-color: $grey-dark-font !default;
$range-active-state-icon-color: $grey-dark-font !default;
$range-hover-color: $grey-99 !default;
$range-hover-content-color: color.adjust($range-hover-color, $lightness: -15%) !default;
$range-today-color: $grey-light !default;
$range-calendar-today-color: $grey-dark-font !default;
$range-selection-bg: color.adjust($brand-primary, $lightness: -10%) !default;
$range-other-hover-color: $grey-99 !default;
$range-lg-day-header-format-width: 100% !default;
$range-other-month-date: $grey-cc !default;
$range-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
$range-box-shadow-none: none !default;
$range-btn-font-weight: 500 !default;
$range-btn-width: 50% !default;
$range-btn-normal-height: 34px !default;
$range-btn-bigger-height: 40px !default;
$range-btn-normal-line-height: 32px !default;
$range-btn-bigger-line-height: 38px !default;
$range-btn-height: 36px !default;
$range-device-btn-line-height: 1em !default;
$range-max-width: 730px !default;
$range-device-max-width: 294px !default;
$range-bigger-max-width: 770px !default;
$range-icon-bigger-margin: 0 !default;
$range-max-height: 500px !default;
$range-normal-nav-icon-width: 36px !default;
$range-normal-nav-icon-height: 36px !default;
$range-calendar-dark-color: $grey-dark-font !default;
$range-calendar-header-text-color: $grey-dark-font !default;
$range-calendar-header-dark-color: $grey-dark-font !default;
$range-calendar-medium-color: $grey-dark-font !default;
$range-calendar-light-color: $grey-dark-font !default;
$range-calendar-medium-font-size: 18px !default;
$range-calendar-btn-font-size: 16px !default;
$range-presets-normal-list-font-size: 14px !default;
$range-presets-bigger-list-font-size: 15px !default;
$range-range-btn-font-weight: normal !default;
$range-calendar-small-font-size: 13px !default;
$range-calendar-bigger-font-size: 20px !default;
$range-calendar-header-padding: 10px 10px 0 10px !default;
$range-e-bigger-header-padding: 10px 10px 0 10px !default;
$range-device-control-header-margin: 0 !default;
$range-device-control-header-padding: 20px 10px 1px 10px !default;
$range-control-header-width: auto !default;
$range-font-weight-normal: normal !default;
$range-flex-style: flex !default;
$range-inline-block-style: inline-block !default;
$range-block-style: block !default;
$range-table-style: table !default;
$range-display-none:  none !default;
$range-align-center: center !default;
$range-float-right: right !default;
$range-float-left: left !default;
$range-float-none: none !default;
$range-float-clear: both !default;
$range-start-end-container-height: 35px !default;
$range-calendar-border: none !default;
$range-calendar-selection-border: none !default;
$range-calendar-hover-border: none !default;
$range-calendar-hover-border-color: none !default;
$range-calendar-other-month-border: none !default;
$range-calendar-margin: 0 !default;
$range-cursor-default-style: default !default;
$range-cursor-pointer-style: pointer !default;
$range-start-end-label-width: 48% !default;
$range-browser-select-none:  none !default;
$range-change-icon-width: 4% !default;
$range-font-weight-bold: normal !default;
$range-font-size: 16px !default;
$range-change-icon-color: $grey-dark-font !default;
$range-indicator-label-width: 100% !default;
$range-device-indicator-margin: 10px 0 !default;
$range-separator-height: 1px !default;
$range-border-value: 1px solid rgba($grey-dark-font, .12) !default;
$range-separator-color: rgba($grey-dark-font, .12) !default;
$range-separator-margin: 0 !default;
$range-footer-height: 48px !default;
$range-bigger-footer-height: 58px !default;
$range-flex-direction-row-reverse: row-reverse !default;
$range-btn-padding: 0 16px !default;
$range-normal-footer-margin: 0 10px 0 5px !default;
$range-bigger-footer-margin: 0 15px 0 5px !default;
$range-normal-rtl-footer-margin: 0 5px 0 10px !default;
$range-bigger-rtl-footer-margin: 0 5px 0 15px !default;
$range-presets-height: 216px !default;
$range-bigger-presets-height: 240px !default;
$range-calendar-container-height: 100% !default;
$range-list-item-height: 26px !default;
$range-list-item-padding: 0 20px !default;
$range-listview-padding: 0 !default;
$range-width-auto: auto !default;
$range-list-item-line-height: 47px !default;
$range-device-medium-font-size: 20px !default;
$range-device-small-font-size: 14px !default;
$range-week-header-font-size: 14px !default;
$range-device-header-container-height: 36px !default;
$range-device-header-container-width: 100% !default;
$range-device-list-item-padding: 0 12px !default;
$range-value-zero: 0 !default;
$range-btn-border-value: 1px solid $brand-primary !default;
$range-today-border-color: 1px solid $brand-primary !default;
$range-btn-left-radius: 4px 0 0 4px !default;
$range-btn-right-radius: 0 4px 4px 0 !default;
$range-visibility-hidden: hidden !default;
$range-indicator-size: 1px !default;
$range-text-nowrap: nowrap !default;
$range-background: $grey-dark !default;
$range-footer-background: $range-background !default;
$range-header-bg-color: $range-background !default;
$range-day-span-height: 20px !default;
$range-direction-left: ltr !default;
$range-value-none: none !default;
$range-control-header-margin: 12px 12px 0 12px !default;
$range-indicator-margin: 0 !default;
$range-btn-border-transparent: 1px solid transparent !default;
$range-header-label-size: 20px !default;
$range-flex-direction-row: row !default;
$range-flex-justify-content: flex-end !default;
$range-preset-min-width: 659px !default;
$range-header-btn-max-width: 116px !default;
$range-header-btn-bigger-max-width: 141px !default;
$range-presets-width: 160px !default;
$range-hover-start-radius: 50% 0 0 50% !default;
$range-hover-end-radius: 0 50% 50% 0 !default;
$range-text-overflow: ellipsis !default;
$range-icon-hover-color: $grey-e6 !default;
$range-icon-border-radius: 0 !default;
$range-icon-bottom-right-radius: 3px !default;
$range-icon-top-right-radius: 3px !default;
$range-icon-margin: 0 !default;
$range-sart-end-btn-padding: 1px 6px !default;
$range-calendar-landscape-height: 150px !default;

// fabric theme variable
$range-icon-font-size: 16px !default;
$range-icon: '\e243' !default;
$range-icon-next: '\e913' !default;
$range-icon-prev: '\e904' !default;
$range-change-icon: '\e85f' !default;
$range-rtl-icon-next: '\e98f' !default;
$range-rtl-icon-prev: '\e85c' !default;
$range-rtl-icon-change: '\e85b' !default;
$range-popup-border: 1px solid rgba($grey-f5, .15) !default;
$range-overlay: rgba($grey-base, .6) !default;
$range-popup-padding: 0 !default;
$range-presets-bg-color: $brand-primary !default;
$range-presets-font-color: $brand-primary-font !default;
$range-calendar-normal-table-padding: 0 10px 10px !default;
$range-calendar-bigger-table-padding: 0 15px 15px !default;
$range-popup-border-radius: 4px !default;
$range-list-border-radius: 4px !default;
$range-presets-hover-bg: $grey-f5 !default;
$range-bigger-nav-icon-width: 40px !default;
$range-bigger-nav-icon-height: 40px !default;
$range-device-medium-header-font-size: 14px !default;
$range-calendar-popup-padding: 0 !default;
$range-bigger-calendar-popup-padding: 0 !default;
$range-icon-bigger-padding: 11px !default;
$range-icon-normal-padding: 10px !default;
$range-preset-normal-list-height: 36px !default;
$range-preset-bigger-list-height: 45px !default;
$range-bigger-icon-font-size: 18px !default;
$range-list-hover-color: $range-calendar-header-dark-color !default;
$range-calendar-active-border: 1px solid $brand-primary !default;
$range-calendar-today-start-color: 1px solid $brand-primary !default;
$range-calendar-other-normal-border: none !default;
$range-calendar-bigger-max: 292px !default;
$range-active-font-color: $brand-primary-font !default;

// Mouse small size
$range-small-header-label-size: 16px !default;
$range-small-font-size: 12px !default;
$range-start-end-container-small-height: 32px !default;
$range-calendar-mouse-small-font-size: 12px !default;
$range-indicator-small-margin: 0 !default;
$range-control-small-header-margin: 0 !default;
$range-separator-small-margin: 0 10px !default;
$range-small-footer-margin: 10px 10px 10px 8px !default;
$range-preset-small-list-height: 26px !default;
$range-presets-small-list-font-size: 12px !default;
$calendar-bigger-small-max-width: 262px !default;

// mouse small icon
$range-small-icon-font-size: 14px !default;

// touch small icon
$range-bigger-small-icon-font-size: 18px !default;

// modal full-screen styles
$modal-range-portrait-calendar-min-height: 100% !default;
$modal-range-portrait-calendar-min-width: 100% !default;
$modal-range-portrait-calendar-height: 100% !default;
$modal-range-portrait-header-height: 20vh !default;
$modal-range-portrait-header-padding: 2vh 2vw !default;
$modal-range-portrait-month-header-padding: 2vh 2vw !default;
$modal-range-portrait-icon-float: right !default;
$modal-range-portrait-header-month-height: 10vh !default;
$modal-range-month-header-line-height: 5vh !default;
$modal-range-month-landscape-title-line-height: 8vh !default;
$modal-range-month-header-title-line-height: inherit !default;
$modal-range-portrait-calendar-content-height: 69vh !default;
$modal-range-portrait-calendar-tabel-height: 69vh !default;
$modal-range-landscape-header-big-height: 25vh !default;
$modal-range-portrait-calendar-width: 100% !default;
$modal-range-start-end-margin: 3vh 0 0 0 !default;
$modal-range-start-end-tablet-margin: 5vh 0 0 0 !default;
$modal-range-portrait-calendar-height: 70vh !default;
$modal-range-landscape-calendar-height: 80vh !default;
$modal-range-landscape-container-height: 75vh !default;
$modal-range-header-height: 60vh !default;
$modal-range-tablet-header-height: 65vh !default;
$modal-range-calendar-padding: 0 !default;
$modal-range-calendar-overflow: unset !default;
$modal-range-calendar-header-border-style: solid !default;
$modal-range-calendar-header-border-width: 0 0 1px 0 !default;
$modal-range-prev-next-icon-size: 36px !default;
$modal-range-prev-next-icon-padding: 10px !default;
$modal-range-prev-next-icon-line-height: 1 !default;
$modal-range-calendar-th-size: 48px !default;
$modal-range-tablet-content-size: 64px !default;
$modal-range-range-hover-radius: 0 !default;
$modal-range-table-padding: 0 2vw !default;
$modal-range-footer-display: none !default;
$modal-range-landscape-header-height: 27vh !default;
$modal-range-landscape-conetent-overflow: auto !default;
$modal-range-table-display: table !default;
$modal-range-start-end-size: 28px !default;

// header styles for presets
$modal-range-presets-header-height: 10% !default;
$modal-range-presets-portrait-height: 90% !default;
$modal-range-presets-landscape-height: 85% !default;
$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
$modal-range-header-display-style: flex !default;
$modal-range-header-content-align: center !default;
$modal-range-header-portrait-font-size: 3vh !default;
$modal-close-icon-float: left !default;
$modal-portrait-content-padding: 1vh 2vw !default;
$modal-range-header-title-transform: capitalize !default;
$modal-range-header-border-bottom: 1px solid $grey-44 !default;
$modal-range-header-landscape-height: 15% !default;
$modal-range-header-landscape-font-size: 18px !default;
$modal-landscape-padding: 1vh 1vw !default;

// modal dialog colors
$modal-range-header-bg-color: $grey-dark !default;
$modal-range-header-text-color: $grey-dark-font !default;

// tablet device style changes for modal popup
$modal-range-tablet-font-size: 18px !default;

$range-header-font-size: 16px !default;

$padding-zero: 0;
$margin-zero: 0;
$daterangepicker-day-span-margin: 8px 0;
$daterangepicker-span-padding: 11px;
$height-zero: 0 !default;
$range-full-height: 100% !default;
$range-full-width: 100% !default;
$range-content-min-height: 40px !default;
$range-normal-content-min-height: 33px !default;
$zero-border: 0 !default;
$range-device-span-font-size: 18px !default;
$range-calendar-container-height: 78vh !default;
$range-footer-font-size: 18px !default;
$range-calendar-holder-container-height: 70vh !default;
$range-calendar-holder-container-600-height: 65% !default;
$range-container-content-month-height: 50vh !default;
$date-range-day-span-font-size: 16px !default;
$range-outline-float-text-width: calc(100% - 80px);
$range-outline-static-clear-float-text-width: calc(100% - 110px);

@include export-module('daterangepicker-layout') {

  .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-date-range-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
    display: flex;
  }

  .e-float-input.e-input-group.e-control-wrapper.e-date-range-wrapper .e-daterange-hidden,
  .e-input-group.e-control-wrapper.e-date-range-wrapper .e-daterange-hidden,
  .e-float-input.e-control-wrapper.e-date-range-wrapper .e-daterange-hidden,
  .e-float-input.e-input-group.e-control-wrapper.e-date-range-wrapper.e-input-focus .e-daterange-hidden,
  .e-input-group.e-control-wrapper.e-date-range-wrapper.e-input-focus .e-daterange-hidden,
  .e-float-input.e-control-wrapper.e-date-range-wrapper.e-input-focus .e-daterange-hidden {
    border: $zero-border;
    height: $height-zero;
    margin: $margin-zero;
    padding: $padding-zero;
    text-indent: $padding-zero;
    visibility: hidden;
    width: $padding-zero;
  }

  #{&}.e-daterangepicker {
    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
      --dummy-style: true;
    }
    #{if(&, '&', '*')}.e-popup {
      border: $range-popup-border;
      border-radius: $range-popup-border-radius;
      box-shadow: $range-box-shadow;
      max-height: $range-max-height;
      max-width: $range-max-width;

      #{if(&, '&', '*')}.e-daterange-day-header-lg {
        max-width: $range-lg-day-header-format-width;
      }
      #{if(&, '&', '*')}.e-preset-wrapper {
        min-width: $range-preset-min-width;

        #{if(&, '&', '*')} .e-presets {
          max-height: $range-value-none;
        }
      }
      #{if(&, '&', '*')} .e-range-header {
        background: $range-header-bg-color;
        padding: $range-control-header-margin;
        width: $range-control-header-width;
        @if $skin-name == 'tailwind' {
          border-radius: $range-popup-header-border-radius;
        }
        @if $skin-name == 'Material3' {
          border-top-left-radius: $range-popup-border-radius;
        }
        @if $skin-name == 'fluent2' {
          border-top-left-radius: inherit;
          border-top-right-radius: inherit;
        }

        #{if(&, '&', '*')} .e-start-label,
        #{if(&, '&', '*')} .e-end-label {
          cursor: $range-cursor-default-style;
          display: $range-inline-block-style;
          font-size: $range-header-label-size;
          overflow: $range-visibility-hidden;
          text-align: $range-align-center;
          text-decoration: $range-value-none;
          text-overflow: $range-text-overflow;
          user-select: $range-browser-select-none;
          white-space: $range-text-nowrap;
          width: $range-start-end-label-width;
          @if $skin-name == 'Material3' {
            font-weight: $font-weight-semibold;
          }
        }
        #{if(&, '&', '*')} .e-change-icon {
          font-size: $range-font-size;
          font-weight: $range-font-weight-bold;
          text-align: $range-align-center;
          width: $range-change-icon-width;
        }
        #{if(&, '&', '*')} .e-day-span {
          direction: $range-direction-left;
          font-size: $range-calendar-small-font-size;
          height: $range-day-span-height;
          margin: $range-indicator-margin;
          text-align: $range-align-center;
          user-select: $range-browser-select-none;
          width: $range-indicator-label-width;
        }
        #{if(&, '&', '*')} .e-start-end {
          align-items: $range-align-center;
          display: $range-flex-style;
          height: $range-start-end-container-height;
        }
      }
      #{if(&, '&', '*')} .e-separator {
        @if ($skin-name != 'FluentUI') {
          height: $range-separator-height;
          margin: $range-separator-margin;
        }
      }
      #{if(&, '&', '*')} .e-calendar {
        border: $range-calendar-border;
        margin: $range-calendar-margin;
        @if ($skin-name != 'FluentUI') {
          padding: $range-calendar-popup-padding;
        }
        @if $skin-name == 'fluent2' {
          box-shadow: none;
        }

        #{if(&, '&', '*')} .e-content table {
          @if ($skin-name != 'FluentUI') {
            padding: $range-calendar-normal-table-padding;
          }
        }
        #{if(&, '&', '*')} .e-header {
          #{if(&, '&', '*')} .e-title {
            cursor: $range-cursor-pointer-style;
            @if $skin-name == 'bootstrap5.3' {
              line-height: $range-normal-nav-icon-line-height;
              padding: $range-header-title-padding;
            }
            @else {
              line-height: $range-normal-nav-icon-height;
            }
            @if ($skin-name != 'FluentUI') {
              width: $range-control-header-width;
              float: $range-float-none;
              font-weight: $range-font-weight-normal;
              margin-left: $range-value-zero;
            }
          }
          #{if(&, '&', '*')}.e-month,
          #{if(&, '&', '*')}.e-year,
          #{if(&, '&', '*')}.e-decade {
            @if ($skin-name != 'FluentUI') {
              padding: $range-calendar-header-padding;
            }
          }
          #{if(&, '&', '*')} .e-next {
            @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
              float: $range-float-right;
            }
            @if $skin-name == 'tailwind3' {
              margin-right: $daterangepicker-margin-right;
              right: $date-range-popup-next-right;
            }
          }
          #{if(&, '&', '*')} .e-prev {
            @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
              float: $range-float-left;
            }
            @if $skin-name == 'tailwind3' {
              left: $date-range-popup-next-right;
            }
          }
          #{if(&, '&', '*')} .e-next,
          #{if(&, '&', '*')} .e-prev {
            height: $range-normal-nav-icon-height;
            width: $range-normal-nav-icon-width;
            @if $skin-name == 'tailwind3' {
              position: inherit;
              top: $date-range-popup-next-top;
            }
          }
          #{if(&, '&', '*')} .e-next span,
          #{if(&, '&', '*')} .e-prev span {
            padding: $range-icon-normal-padding;
          }
        }
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
          border-radius: $range-hover-start-radius;
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
          border-radius: $range-hover-end-radius;
        }
        #{if(&, '&', '*')} .e-start-date.e-selected {
          @if ($skin-name == 'FluentUI') {
            border-radius: $range-hover-start-radius;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected {
          @if ($skin-name == 'FluentUI') {
            border-radius: $range-hover-end-radius;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
          border: $range-calendar-hover-border;
        }
      }
      #{if(&, '&', '*')} .e-footer {
        align-items: $range-align-center;
        @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
          border-top: $range-border-value;
        }
        clear: $range-float-clear;
        display: $range-flex-style;
        flex-direction: $range-flex-direction-row-reverse;
        height: $range-footer-height;
        @if $skin-name == 'tailwind' {
          border-radius: $range-popup-footer-border-radius;
        }
      }
      #{if(&, '&', '*')} .e-footer .e-btn {
        font-weight: $range-btn-font-weight;
        height: $range-btn-normal-height;
        line-height: $range-btn-normal-line-height;
        overflow: $range-visibility-hidden;
        padding: $range-btn-padding;
        text-overflow: $range-text-overflow;
        @if $skin-name == 'fluent2' {
          border: $footer-btn-border;
        }
      }
      #{if(&, '&', '*')} .e-footer .e-btn.e-apply {
        margin: $range-normal-footer-margin;
      }
      #{if(&, '&', '*')} .e-date-range-container {
        float: $range-float-left;
        @if $skin-name == 'fluent2' {
          border-top-left-radius: inherit;
          border-top-right-radius: inherit;
        }

        #{if(&, '&', '*')}.e-range-border {
          @if $skin-name != 'tailwind3' {
            border-right: $range-border-value;
          }
        }
      }
      #{if(&, '&', '*')} .e-calendar-container {
        display: $range-flex-style;

        #{if(&, '&', '*')} .e-left-container,
        #{if(&, '&', '*')} .e-right-container {
          float: $range-float-left;
        }
        #{if(&, '&', '*')} .e-left-container {
          @if $skin-name != 'FluentUI' and $skin-name != 'fluent2' and $skin-name != 'tailwind3' {
            border-right: $range-border-value;
          }
          @if $skin-name == 'tailwind' {
            border-right: $range-container-border-value;
          }
        }
      }
      #{if(&, '&', '*')} .e-presets {
        max-height: $range-presets-height;
        overflow: auto;
        width: $range-width-auto;

        #{if(&, '&', '*')} .e-list-item {
          border-radius: $range-list-border-radius;
          cursor: $range-cursor-pointer-style;
          line-height: $range-list-item-height;
          overflow: $range-visibility-hidden;
          padding: $range-list-item-padding;
          white-space: $range-text-nowrap;
          text-overflow: $range-text-overflow;
        }
        #{if(&, '&', '*')} .e-list-parent {
          margin: $range-value-zero;
          max-width: $range-presets-width;
          padding: $range-value-zero;
        }
        #{if(&, '&', '*')} .e-text-content {
          line-height: $range-list-item-line-height;
        }
        #{if(&, '&', '*')} .e-ul {

          #{if(&, '&', '*')} li.e-list-item {
            font-size: $range-presets-normal-list-font-size;
            height: $range-preset-normal-list-height;
            line-height: $range-preset-normal-list-height;
            @if $skin-name == 'tailwind3' {
              font-weight: $font-weight-medium;
            }
            &.e-active:first-child {
              @if $skin-name == 'Material3' {
                border-top-right-radius: $range-popup-border-radius;
                border-top-left-radius: $range-popup-border-radius;
              }
            }
          }
        }
      }
      #{if(&, '&', '*')} .e-hide-range {
        display: $range-display-none;
      }
    }
    #{if(&, '&', '*')}.e-rtl {
      #{if(&, '&', '*')} .e-date-range-container {
        float: $range-float-right;

        #{if(&, '&', '*')}.e-range-border {
          border-left: $range-border-value;
          border-right: $range-value-zero;
        }
        #{if(&, '&', '*')} .e-left-container {
          @if $skin-name != 'FluentUI' {
            border-left: $range-border-value;
            border-right: $range-value-zero;
          }
          @if $skin-name == 'tailwind' {
            border-left: $range-container-border-value;
          }
        }
        #{if(&, '&', '*')} .e-calendar {
          #{if(&, '&', '*')} .e-next {
            float: $range-float-left;
          }
          #{if(&, '&', '*')} .e-prev {
            @if ($skin-name != 'FluentUI') {
              float: $range-float-right;
            }
          }
          #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
            border-radius: $range-hover-end-radius;
            @if ($skin-name == 'FluentUI') {
              box-shadow: $selected-range-box-shadow;
            }
          }
          #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
            border-radius: $range-hover-start-radius;
            @if ($skin-name == 'FluentUI') {
              box-shadow: $selected-range-box-shadow;
            }
          }
        }
      }
      #{if(&, '&', '*')} .e-footer {
        flex-direction: $range-flex-direction-row;
        justify-content: $range-flex-justify-content;

        #{if(&, '&', '*')} .e-btn.e-cancel {
          margin: $range-normal-rtl-footer-margin;
        }
        #{if(&, '&', '*')} .e-btn.e-apply {
          margin-left: $range-value-zero;
        }
      }
    }
  }

  .e-small #{&}.e-daterangepicker,
  #{if(&, '&', '*')}.e-small#{&}.e-daterangepicker {
    #{if(&, '&', '*')}.e-popup {
      #{if(&, '&', '*')} .e-range-header {
        @if $skin-name != 'tailwind' {
          margin: $range-control-small-header-margin;
        }

        @if $skin-name == 'tailwind' {
          padding: $range-control-bigger-header-margin;
        }

        #{if(&, '&', '*')} .e-start-label,
        #{if(&, '&', '*')} .e-end-label {
          font-size: $range-small-header-label-size;
        }

        #{if(&, '&', '*')} .e-change-icon {
          font-size: $range-small-font-size;
        }

        #{if(&, '&', '*')} .e-start-end {
          height: $range-start-end-container-small-height;
        }

        #{if(&, '&', '*')} .e-day-span {
          font-size: $range-calendar-mouse-small-font-size;
          margin: $range-indicator-small-margin;
        }

        #{if(&, '&', '*')} .e-separator {
          @if ($skin-name != 'FluentUI') {
            margin: $range-separator-small-margin;
          }
        }
      }

      #{if(&, '&', '*')} .e-footer .e-btn.e-apply {
        margin: $range-small-footer-margin;
      }

      #{if(&, '&', '*')}.e-preset-wrapper .e-presets .e-list-parent.e-ul {
        #{if(&, '&', '*')} .e-list-item {
          font-size: $range-presets-small-list-font-size;
          height: $range-preset-small-list-height;
          line-height: $range-preset-small-list-height;
        }
      }
    }
  }
  .e-daterangepicker .e-calendar .e-month .e-selected span.e-day {
    @if $skin-name == 'FluentUI' {
      height: 25px;
      width: 25px;
      line-height: 25px;
    }
  }

  .e-daterangepicker.e-small .e-calendar .e-month .e-selected span.e-day {
    @if $skin-name == 'FluentUI' {
      height: 21px;
      width: 21px;
      line-height: 21px;
    }
  }
}

/* stylelint-disable */
.e-range-overflow {
  overflow: hidden;
}

.e-daterangepick-mob-popup-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: $range-full-height;
  justify-content: center;
  left: $margin-zero;
  max-height: $range-full-height;
  position: fixed;
  top: $margin-zero;
  width: $range-full-width;
  z-index: 1002;

  .e-daterangepicker.e-popup.e-control.e-lib.e-device.e-popup-open {
    position: relative;
    top: $padding-zero !important;
    left: $padding-zero !important;
  }

  .e-daterangepicker.e-popup.e-popup-expand.e-control.e-lib.e-device.e-popup-open {
    min-height: $range-full-height;
    min-width: $range-full-width;
    height: $range-full-height;
    width: $range-full-width;
}
}

.e-content-placeholder.e-daterangepicker.e-placeholder-daterangepicker {
  background-size: 250px 33px;
  min-height: $range-normal-content-min-height;
}

.e-daterangepick-mob-popup-wrap {
    #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {      
      #{if(&, '&', '*')} .e-date-range-container {
            & {
              min-height: $modal-range-portrait-calendar-min-height;
              min-width: $modal-range-portrait-calendar-min-width;
              height: $modal-range-portrait-calendar-height;
              width: $modal-range-portrait-calendar-width;
            }

            #{if(&, '&', '*')} .e-range-header {
              height: $modal-range-portrait-header-height;
              padding: $modal-range-portrait-header-padding;
              margin: $margin-zero;
              color: $range-calendar-header-dark-color;

              #{if(&, '&', '*')} .e-model-header-wrapper {
                @media (max-device-width: 768px) {
                  font-size: $range-header-font-size;
                }

                @media (min-device-width: 768px) {
                  font-size: $modal-range-tablet-font-size;
                }

                #{if(&, '&', '*')} .e-apply {
                  float: $modal-range-portrait-icon-float;
                }
              }

              #{if(&, '&', '*')} .e-start-end {
                margin: $modal-range-start-end-margin;
              }
            }
            #{if(&, '&', '*')} .e-calendar {
              @media (max-height: 600px) {
                min-height: $modal-range-portrait-calendar-height;
                height: $modal-range-portrait-calendar-height;
              }      
              @media (min-height: 600px) {
                min-height: $modal-range-landscape-calendar-height;
                height: $modal-range-landscape-calendar-height;
              }
              & {
                min-width: $modal-range-portrait-calendar-min-width;
                width: $modal-range-portrait-calendar-width;
                padding: $modal-range-calendar-padding;
                overflow: $modal-range-calendar-overflow;
              }

              #{if(&, '&', '*')} .e-header.e-month,
              #{if(&, '&', '*')} .e-header.e-year,
              #{if(&, '&', '*')} .e-header.e-decade {
                height: $modal-range-portrait-header-month-height;
                border-style: $modal-range-calendar-header-border-style;
                border-width: $modal-range-calendar-header-border-width;
                border-color: $range-separator-color;
                padding: $modal-range-portrait-month-header-padding;
                line-height: $modal-range-month-header-line-height;

                #{if(&, '&', '*')} .e-prev {
                  height: $modal-range-prev-next-icon-size;
                  width: $modal-range-prev-next-icon-size;
                  @if ($skin-name == 'Material3') {
                    vertical-align: inherit;
                    font-size: $modal-range-tablet-font-size
                  }
                  @media screen and (orientation: landscape) {
                    @if ($skin-name == 'Material3') {
                      vertical-align: inherit;
                    }
                  }

                  #{if(&, '&', '*')} span {
                    @media (min-device-width: 768px) {
                      font-size: $range-device-span-font-size;
                      padding: $daterangepicker-span-padding;
                    }
                  }
                }
                #{if(&, '&', '*')} .e-next {
                  height: $modal-range-prev-next-icon-size;
                  width: $modal-range-prev-next-icon-size;

                  #{if(&, '&', '*')} span {
                    padding: $modal-range-prev-next-icon-padding;
                    line-height: $modal-range-prev-next-icon-line-height;
                    @media (min-device-width: 768px) {
                      font-size: $modal-range-tablet-font-size;
                    }
                  }
                }

                #{if(&, '&', '*')} .e-title {
                  @media (max-height: 600px) {
                      @if ($skin-name =='Material3') {
                        margin-left: $modal-header-month-name-left-landscape-width;
                        position: absolute;
                        text-align: center;
                        vertical-align: middle;
                        width: $modal-header-month-name-width;
                        line-height: $modal-month-name-line-height;
                      }

                      line-height: $modal-range-month-landscape-title-line-height;
                    }

                  @media (min-height: 600px) {
                    @if ($skin-name == 'Material3') {
                      margin-left: $modal-header-month-name-left-width;
                      position: absolute;
                      text-align: center;
                      vertical-align: middle;
                      width: $modal-header-month-name-width;
                      line-height: $modal-month-name-line-height;
                  }
                    line-height: $modal-range-month-header-title-line-height;
                  }       

                  @media (min-device-width: 768px) {
                    font-size: $modal-range-tablet-font-size;
                  }
                }
              }

              #{if(&, '&', '*')} th {
                @media (min-device-width: 768px) {
                  font-size: $modal-range-tablet-font-size;
                  height: $modal-range-calendar-th-size;
                }
              }

              #{if(&, '&', '*')} .e-content span.e-day {
                @media (min-device-width: 768px) {
                  font-size: $modal-range-tablet-font-size;
                  height: $modal-range-tablet-content-size;
                  width: $modal-range-tablet-content-size;
                  line-height: $modal-range-tablet-content-size;
                }
              }
              #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover,
              #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
                border-radius: $modal-range-range-hover-radius;
              }
            }            
        }        

        #{if( &, '&', '*')} .e-calendar-holder {
            height: $range-full-height;

            #{if( &, '&', '*')} .e-calendar-container {
              @media (max-height: 600px) {
                min-height: $range-calendar-container-height;
                height: $range-calendar-container-height;
              }

              #{if( &, '&', '*')} .e-calendar {
                @media (max-height: 600px) {
                  min-height: $range-calendar-container-height;
                  height: $range-calendar-container-height;
                }
              }
            }
        }

        #{if(&, '&', '*')} .e-calendar-container {
          @media (max-height: 600px) {
            min-height: $modal-range-portrait-calendar-height;
            height: $modal-range-portrait-calendar-height;
          }      
          @media (min-height: 600px) {
            min-height: $modal-range-landscape-calendar-height;
            height: $modal-range-landscape-calendar-height;
          }
        }

        #{if(&, '&', '*')} .e-separator {
            margin: $margin-zero;
        }

        #{if( &, '&', '*')} .e-content.e-month {
            height: $modal-range-portrait-calendar-content-height;

            table {
              padding: $modal-range-table-padding;
              height: $modal-range-portrait-calendar-tabel-height;
              border-spacing: $modal-range-calendar-overflow;
            }
        }
        #{if( &, '&', '*')} .e-footer{
          display: $modal-range-footer-display;
        }

        #{if(&, '&', '*')} .e-presets {
          max-height: $modal-range-presets-portrait-height;
          height: $modal-range-presets-portrait-height;
          #{if(&, '&', '*')} ul {
            height: $modal-range-portrait-calendar-height;

            #{if(&, '&', '*')} li.e-list-item {
              font-size: $range-header-font-size;

              @media (min-device-width: 768px) {
                font-size: $range-footer-font-size;
              }
            }
           }
        }

        #{if(&, '&', '*')} .e-range-mob-popup-wrap {
          position: relative;
          height: $range-full-height;

          #{if(&, '&', '*')} .e-model-header {
            height: $modal-range-presets-header-height;
            padding: $modal-range-header-padding;
            display: $modal-range-header-display-style;
            align-items: $modal-range-header-content-align;
            font-size: $modal-range-header-portrait-font-size;
            border-bottom: none;
            @media (min-device-width: 768px) {
              font-size: $modal-range-header-landscape-font-size;
            }

            #{if(&, '&', '*')} .e-popup-close {
              float: $modal-close-icon-float;
              padding: $modal-portrait-content-padding;
            }

            #{if(&, '&', '*')} .e-model-title {
              padding: $modal-portrait-content-padding;
              text-transform: $modal-range-header-title-transform;
            }
          }
        }
    }
}

@media screen and (orientation: landscape) {
  .e-daterangepick-mob-popup-wrap {
    #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
        @if $skin-name != 'fluent2' {
          padding: $padding-zero;
        }
        @media (min-device-width: 768px) {
          font-size: $modal-range-header-landscape-font-size;
        }
      }

      #{if( &, '&', '*')} .e-calendar-holder {
        #{if(&, '&', '*')} .e-calendar-container {
          @media (min-height: 600px) {
            min-height: $range-calendar-holder-container-height;
            height: $range-calendar-holder-container-height;
          }

          @media (max-height: 600px) {
            min-height: $range-calendar-holder-container-600-height;
            height: $range-calendar-holder-container-600-height;
          }

          #{if(&, '&', '*')} .e-calendar {
            @media (min-height: 600px) {
              min-height: $range-calendar-holder-container-height;
              height: $range-calendar-holder-container-height;
            }
          }

          #{if(&, '&', '*')} .e-content.e-month,
          #{if(&, '&', '*')} .e-content.e-year,
          #{if(&, '&', '*')} .e-content.e-decade {        
            @media (max-height: 600px) {
              height: $range-container-content-month-height;
            }
          }
        }
      }

      #{if(&, '&', '*')} .e-presets {
        max-height: $modal-range-presets-landscape-height;
        height: $modal-range-presets-landscape-height;
      }

      #{if(&, '&', '*')} .e-range-mob-popup-wrap {
        #{if(&, '&', '*')} .e-model-header {
          height: $modal-range-header-landscape-height;
          font-size: $modal-range-header-landscape-font-size;

          #{if(&, '&', '*')} .e-popup-close {
            padding: $modal-landscape-padding;
          }

          #{if(&, '&', '*')} .e-model-title {
            padding: $modal-landscape-padding;
          }
        }
      }

      #{if( &, '&', '*')} .e-date-range-container .e-range-header {
          @media (max-height: 600px) {
            height: $modal-range-landscape-header-height;
          }

          @media (min-height: 600px) {
            height: $modal-range-landscape-header-big-height;
          }
          width: $modal-range-portrait-calendar-width;

          #{if(&, '&', '*')} .e-start-end {
            margin: $modal-range-calendar-padding;
            height: $modal-range-start-end-size;

            @media (min-height: 600px) {
              margin: $modal-range-start-end-tablet-margin;
            }
          }

          #{if(&, '&', '*')} .e-day-span {
            margin: $daterangepicker-day-span-margin;
            font-size: $date-range-day-span-font-size;
          }

        }            

        #{if(&, '&', '*')} .e-calendar-container {
          @media (min-height: 600px) {
            min-height: $modal-range-landscape-container-height;
            height: $modal-range-landscape-container-height;
          }
        }

        #{if(&, '&', '*')} .e-content.e-month,
        #{if(&, '&', '*')} .e-content.e-year,
        #{if(&, '&', '*')} .e-content.e-decade {        
          @media (max-height: 600px) {
            height: $modal-range-header-height;
          }

          @media (min-height: 600px) {
            height: $modal-range-tablet-header-height;
          }
          overflow-y: $modal-range-landscape-conetent-overflow;

          table {  
            @media (min-height: 600px) {
              height: $modal-range-tablet-header-height;
            }
            display: $modal-range-table-display;
            border-spacing: $modal-range-calendar-overflow;
          }
        }        
    }
  }
}

.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
  width: $range-outline-float-text-width;
}

.e-outline.e-float-input.e-static-clear.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-date-time-icon {
  width: $range-outline-static-clear-float-text-width;
}

@include export-module('daterangepicker-theme') {
  .e-date-range-wrapper {
    #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
      @if $skin-name == 'bootstrap4' {
        background: $range-icon-active-bg-color;
        border-color: $range-active-border-color;
      }
      color: $range-active-icon-color;
    }

    #{if(&, '&', '*')}.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
      color: $range-active-state-icon-color;
    }
  }

  #{&}.e-daterangepicker {
    #{if(&, '&', '*')}.e-popup {
      background: $range-background;

      #{if(&, '&', '*')} .e-calendar {
        @if $skin-name != 'Material3' {
          background-color: $range-background;
        }
        @if $skin-name == 'Material3' {
          background: $range-background;
        }

        #{if(&, '&', '*')} .e-header .e-title,
        #{if(&, '&', '*')} .e-header .e-title:hover {
          color: $range-calendar-header-dark-color;
          text-decoration: none;
          @if $skin-name == 'fluent2' {
            width: 72%;
          }
        }
        #{if(&, '&', '*')} .e-content .e-range-hover {
          @if $skin-name != 'Material3' {
            background-color: $range-hover-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-hover-color;
          }
          color: $range-calendar-dark-color;
        }
        #{if(&, '&', '*')} .e-content .e-start-date.e-selected,
        #{if(&, '&', '*')} .e-content .e-end-date.e-selected {
          @if $skin-name == 'FluentUI' {
            background-color: $range-hover-color;
            color: $range-calendar-dark-color;
          }
        }
        #{if(&, '&', '*')} .e-content.e-month .e-today.e-range-hover span {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'tailwind3' {
            background-color: $range-today-color;
            border: $range-today-border-color;
            color: $range-calendar-today-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-today-color;
            border: $range-today-border-color;
            color: $range-calendar-today-color;
          }
          @if $skin-name == 'FluentUI' {
            box-shadow: $range-today-hover-box-shadow;
          }
        }
        #{if(&, '&', '*')} .e-content .e-range-hover span {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'tailwind3' {
            background: $range-hover-color;
            border: $range-calendar-selection-border;
            color: $range-calendar-dark-color;
          }
          @if $skin-name == 'fluent2' {
            background: $range-hover-color;
            border: $range-calendar-selection-border;
            color: $range-calendar-hover-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-hover-bg-color;
            border: $range-calendar-selection-border;
            color: $range-calendar-dark-color;
          }
        }

        #{if(&, '&', '*')} .e-content .e-range-hover:not(.e-other-month) span {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
            background: $range-hover-color;
            border: $range-calendar-selection-border;
            color: $range-calendar-dark-color;
          }
        }
        #{if(&, '&', '*')} .e-range-hover:not(.e-selected):hover span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-focused-date.e-today span.e-day {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'tailwind3' {
            background-color: $range-hover-content-color;
            border: $range-calendar-hover-border-color;
            color: $range-calendar-dark-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-hover-content-color;
            border: $range-calendar-hover-border-color;
            color: $range-calendar-dark-color;
          }
        }
        #{if(&, '&', '*')} .e-range-hover.e-today:hover span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-focused-date.e-today span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-start-date.e-selected.e-today span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-end-date.e-selected.e-today span.e-day {
          @if $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
            border: $range-calendar-active-border;
          }
        }
        #{if(&, '&', '*')} .e-range-hover.e-selected.e-today:hover span.e-day {
          @if $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
            border: $range-calendar-today-start-color;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
        #{if(&, '&', '*')} .e-content .e-other-month.e-today.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover:hover span.e-day,
        #{if(&, '&', '*')} .e-content .e-other-month.e-selected,
        #{if(&, '&', '*')} .e-content .e-other-month.e-selected span {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'tailwind3' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-month-border;
            color: $range-other-month-date;
          }
          @if $skin-name == 'Material3' {
            background: $range-other-hover-color;
            border: $range-calendar-other-month-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
        #{if(&, '&', '*')} .e-content .e-other-month.e-today.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover:hover span.e-day {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-month-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
        #{if(&, '&', '*')} .e-content .e-other-month.e-selected {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' and $skin-name != 'tailwind3' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-normal-border;
            color: $range-other-month-date;
          }
          @if $skin-name == 'Material3' {
            background: $range-other-hover-color;
            border: $range-calendar-other-normal-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-normal-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
          @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
            background-color: $range-selection-bg;
          }
          @if $skin-name == 'Material3' {
            background: $range-selection-bg;
          }
          @if $skin-name == 'fluent2' {
            background: $range-selection-bg;
            border-radius: $range-selected-hover-radius;
          }
          color: $range-active-font-color;
          @if ($skin-name == 'FluentUI') {
            border-radius: $range-selected-hover-radius;
            box-shadow: $range-value-none;
          }
          @if $skin-name == 'tailwind3' {
            border-radius: $range-radius-zero;
          }
        }
        #{if(&, '&', '*')} .e-start-date.e-selected span.e-day,
        #{if(&, '&', '*')} .e-end-date.e-selected span.e-day {
          @if ($skin-name == 'FluentUI') {
            background-color: $range-selection-bg;
            border-radius: $range-selected-hover-radius;
            box-shadow: $range-value-none;
            color: $range-active-font-color;
          }
          @if ($skin-name == 'fluent2') {
            background: $range-selection-bg;
            border-radius: $range-selected-hover-radius;
            color: $range-active-font-color;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover.e-other-month span.e-day {
          @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
            background-color: $range-selection-bg;
            color: $range-active-font-color;
          }
        }
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover.e-today span.e-day {
          @if $skin-name != 'Material3' {
            background-color: $range-selection-bg;
          }
          @if $skin-name == 'Material3' {
            background: $range-selection-bg;
          }
          color: $range-active-font-color;
        }
        #{if(&, '&', '*')} .e-other-month.e-selected span {
          color: $range-primary-font-color;
        }
      }
      #{if(&, '&', '*')} .e-presets {
        @if $skin-name != 'Material3' {
          background-color: $range-presets-bg;
        }
        @if $skin-name == 'Material3' {
          background: $range-presets-bg;
        }
        color: $range-preset-normal-font-color;

        #{if(&, '&', '*')} .e-list-item.e-active {
          @if $skin-name != 'Material3' {
            background-color: $range-presets-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-presets-bg-active-color;
          }
          @if $skin-name != 'tailwind3' {
            color: $range-presets-font-color;
          }
        }
        #{if(&, '&', '*')} .e-list-item.e-hover {
          @if $skin-name != 'Material3' {
            background-color: $range-presets-hover-bg;
          }
          @if $skin-name == 'Material3' {
            background: $range-presets-hover-bg;
          }
          color: $range-list-hover-color;
        }
      }
      #{if(&, '&', '*')} .e-start-label,
      #{if(&, '&', '*')} .e-end-label {
        color: $range-calendar-header-text-color;
      }
      #{if(&, '&', '*')} .e-change-icon {
        color: $range-change-icon-color;
      }
      #{if(&, '&', '*')} .e-day-span {
        color: $range-calendar-medium-color;
      }
      #{if(&, '&', '*')} .e-separator {
        @if $skin-name != 'Material3' {
          background-color: $range-separator-color;
        }
        @if $skin-name == 'Material3' {
          background: $range-separator-color;
        }
        @if $skin-name == 'fluent2' {
          display: none;
        }
      }
      #{if(&, '&', '*')} .e-footer {
        @if $skin-name != 'Material3' {
          background-color: $range-footer-background;
        }
        @if $skin-name == 'fluent2' {
          border-bottom-left-radius: inherit;
          border-bottom-right-radius: inherit;
        }
        @if $skin-name == 'Material3' {
          background: $range-footer-background;
          border-bottom-left-radius: $range-popup-border-radius;
          border-bottom-right-radius: $range-popup-border-radius;
        }

        #{if(&, '&', '*')} .e-cancel.e-flat:not(:hover) {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
            /* stylelint-disable property-no-vendor-prefix */
            -webkit-tap-highlight-color: transparent;
            background-color: $range-cancel-flat-btn-bgcolor;
            border-color: $range-cancel-flat-btn-border-color;
            box-shadow: $range-cancel-flat-btn-box-shadow;
            color: $range-cancel-flat-btn-color;
          }
        }

        #{if(&, '&', '*')} .e-apply.e-flat.e-primary:not(:hover):not(:disabled) {
          @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
            -webkit-tap-highlight-color: transparent;
            background-color: $range-apply-btn-primary-bgcolor;
            border-color: $range-apply-btn-primary-border-color;
            color: $range-apply-btn-primary-color;
          }
        }
      }
    }
  }

  .e-daterangepicker.e-popup .e-calendar .e-content .e-end-date.e-selected span.e-day,
  .e-daterangepicker.e-popup .e-calendar .e-content .e-start-date.e-selected span.e-day {
    @if $skin-name == 'tailwind3' {
      background: $range-primary-color;
      border-radius: $range-radius-zero;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $apply-buuton-bg;
      border-color: $apply-buuton-bg-border-color;
      color: $apply-buuton-text-color;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:hover,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:hover {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $apply-buuton-hover-bg;
      border-color: $apply-buuton-bg-border-hover-color;
      color: $apply-buuton-text-hover-color;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:active,
  .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary.e-active,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:active,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary.e-active {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $apply-buuton-active-bg;
      border-color: $apply-buuton-bg-border-active-color;
      color: $apply-buuton-text-active-color;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled,
  .e-daterangepicker.e-popup .e-footer .e-btn.e-apply.e-flat.e-primary:disabled,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-apply.e-flat.e-primary:disabled {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $range-apply-disabled-background-style;
      border-color: $range-apply-disabled-border-style;
      color: $range-apply-disabled-color;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-flat,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $cancel-buuton-bg;
      border-color: $cancel-buuton-bg-border-color;
      color: $cancel-buuton-text-color;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-flat:hover,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:hover {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $cancel-buuton-hover-bg;
      border-color: $cancel-buuton-bg-border-hover-color;
      color: $cancel-buuton-text-hover-color;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-flat:active,
  .e-daterangepicker.e-popup .e-footer .e-btn.e-flat.e-active,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:active,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat.e-active {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $cancel-buuton-active-bg;
      border-color: $cancel-buuton-bg-border-active-color;
      color: $cancel-buuton-text-active-color;
    }
  }

  .e-daterangepicker.e-popup .e-footer .e-btn.e-flat:disabled,
  .e-daterangepicker.e-popup .e-footer .e-btn.e-flat:disabled,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:disabled,
  .e-daterangepicker.e-popup .e-footer .e-css.e-btn.e-flat:disabled {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      background-color: $range-cancel-disabled-background-style;
      border-color: $range-cancel-disabled-border-style;
      color: $range-cancel-disabled-color;
    }
  }
}

.e-daterangepicker.e-popup .e-calendar .e-content.e-month .e-today.e-range-hover span {
  @if $skin-name == 'FluentUI' {
    line-height: $range-today-hover-line-height;
  }
}

.e-daterangepicker.e-popup .e-calendar .e-content .e-other-month.e-today.e-range-hover span {
  @if $skin-name == 'FluentUI' {
    line-height: $range-other-hover-line-height;
  }
}

.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day,
.e-small .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
  @if $skin-name == 'FluentUI' {
    line-height: $range-small-today-hover-line-height;
  }
}

.e-daterangepick-mob-popup-wrap {
  #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
    #{if(&, '&', '*')} .e-model-header {
      background-color: $modal-range-header-bg-color;
      color: $modal-range-header-text-color;

      #{if(&, '&', '*')} .e-popup-close {
        color: $modal-range-header-text-color;
      }
    }
  }
}

@include export-module('daterangepicker-bootstrap-icons') {

  /*! component icons */
  .e-input-group-icon.e-range-icon,
  #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon {
    font-size: $range-icon-font-size;
    margin: $range-icon-margin;
    outline: none;

    #{if(&, '&', '*')}::before {
      content: '\e243';
      font-family: 'e-icons';
    }

    #{if(&, '&', '*')}:focus {
      background: $range-icon-hover-color;
      border-radius: $range-icon-border-radius;
    }
  }

  .e-daterangepicker {
    #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-next::before {
      content: '\e913';
    }
    #{if(&, '&', '*')} .e-calendar .e-header .e-date-icon-prev::before {
      content: '\e904';
    }
    #{if(&, '&', '*')} .e-change-icon::before {
      content: '\e85f';
    }
    #{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-next::before {
      content: '\e98f';
    }
    #{if(&, '&', '*')} .e-calendar.e-rtl .e-header .e-date-icon-prev::before {
      content: '\e85c';
    }
    #{if(&, '&', '*')}.e-rtl .e-start-end .e-change-icon::before {
      content: '\e85b';
    }
  }

  .e-daterangepick-mob-popup-wrap {

    #{if(&, '&', '*')} .e-daterangepicker.e-popup-expand {

      #{if(&, '&', '*')} .e-range-header,
      #{if(&, '&', '*')} .e-model-header {

        #{if(&, '&', '*')} .e-popup-close::before {
          content: '\e7fc';
          font-family: 'e-icons';
        }

        #{if(&, '&', '*')} .e-apply::before {
          content: '\e7ff';
          font-family: 'e-icons';
        }
      }
    }
  }
}

@include export-module('daterangepicker-bigger') {

  .e-bigger #{&}.e-daterangepicker.e-range-modal,
  #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker.e-range-modal {
    @if $skin-name != 'Material3' {
      background-color: $range-overlay;
    }
    @if $skin-name == 'Material3' {
      background: $range-overlay;
    }
    height: $range-full-height;
    left: $margin-zero;
    opacity: .5;
    pointer-events: auto;
    position: fixed;
    top: $margin-zero;
    width: $range-full-width;
    z-index: 999;
  }

  .e-bigger #{&}.e-daterangepicker,
  #{if(&, '&', '*')}.e-bigger#{&}.e-daterangepicker,
  #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker {
    #{if(&, '&', '*')}.e-popup {
      @if $skin-name == 'material' or $skin-name == 'bootstrap'{
        background-color: $range-background;
      }
      @if $skin-name == 'Material3' {
        background: $range-background;
      }

      #{if(&, '&', '*')} .e-start-label,
      #{if(&, '&', '*')} .e-end-label {
        @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          font-size: $range-bigger-header-label-size;
        }
      }

      #{if(&, '&', '*')} .e-day-span {
        @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          font-size: $range-bigger-indicator-label-size;
        }
      }

      #{if(&, '&', '*')}.e-preset-wrapper {
        max-width: $range-bigger-max-width;
        min-width: $range-width-auto;

        #{if(&, '&', '*')} .e-presets {
          max-height: $range-value-none;
        }
      }
      #{if(&, '&', '*')} .e-range-header {
        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          margin: $range-control-bigger-header-margin;
        }

        @if $skin-name == 'tailwind' {
          padding: $range-control-bigger-header-margin;
        }
        width: $range-control-header-width;

        #{if(&, '&', '*')} .e-change-icon {
          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
            font-size: $range-bigger-change-icon-size;
          }
        }

        #{if(&, '&', '*')} .e-start-end {
          align-items: $range-align-center;
          cursor: $range-cursor-pointer-style;
          display: $range-flex-style;
          height: $range-device-header-container-height;
          justify-content: $range-align-center;
          user-select: $range-browser-select-none;
          width: $range-device-header-container-width;

          #{if(&, '&', '*')} .e-start-btn,
          #{if(&, '&', '*')} .e-end-btn {
            border: $range-btn-border-value;
            box-shadow: $range-box-shadow-none;
            font-size: $range-calendar-btn-font-size;
            font-weight: $range-range-btn-font-weight;
            height: $range-btn-height;
            line-height: $range-device-btn-line-height;
            max-width: $range-header-btn-max-width;
            overflow: $range-visibility-hidden;
            padding: $range-sart-end-btn-padding;
            text-overflow: $range-text-overflow;
            width: $range-btn-width;
          }
          #{if(&, '&', '*')} .e-end-btn {
            border-left: $range-value-zero;
            border-radius: $range-btn-right-radius;
          }
          #{if(&, '&', '*')} .e-start-btn {
            border-radius: $range-btn-left-radius;
          }
          #{if(&, '&', '*')} .e-start-btn:hover,
          #{if(&, '&', '*')} .e-end-btn:hover:not([disabled]) {
            box-shadow: $range-box-shadow-none;
          }
          #{if(&, '&', '*')} .e-start-btn.e-active,
          #{if(&, '&', '*')} .e-start-btn.e-active:active,
          #{if(&, '&', '*')} .e-end-btn.e-active,
          #{if(&, '&', '*')} .e-end-btn.e-active:active:not([disabled]),
          #{if(&, '&', '*')} .e-start-btn.e-active:hover,
          #{if(&, '&', '*')} .e-end-btn.e-active:hover {
            box-shadow: $range-box-shadow-none;
          }
          #{if(&, '&', '*')} .e-start-btn,
          #{if(&, '&', '*')} .e-end-btn {
            max-width: $range-header-btn-bigger-max-width;
          }
        }
      }
      #{if(&, '&', '*')} .e-presets {
        max-height: $range-bigger-presets-height;

        #{if(&, '&', '*')}.e-preset-wrapper {
          max-height: $range-value-none;
        }

        #{if(&, '&', '*')} ul {
          max-width: $range-value-none;

          #{if(&, '&', '*')} li.e-list-item {
            font-size: $range-presets-bigger-list-font-size;
            height: $range-preset-bigger-list-height;
            line-height: $range-preset-bigger-list-height;
            padding: $range-device-list-item-padding;
          }
        }
      }
    }
    #{if(&, '&', '*')} .e-calendar {
      max-width: $range-calendar-bigger-max;
      @if ($skin-name != 'FluentUI') {
        padding: $range-bigger-calendar-popup-padding;
      }

      #{if(&, '&', '*')} .e-content table {
        @if ($skin-name != 'FluentUI') {
          padding: $range-calendar-bigger-table-padding;
        }
      }
      #{if(&, '&', '*')} .e-header {
        @if ($skin-name == 'FluentUI') {
          padding: 8px 16px;
        }

        #{if(&, '&', '*')} .e-next,
        #{if(&, '&', '*')} .e-prev {
          height: $range-bigger-nav-icon-height;
          width: $range-bigger-nav-icon-width;

          #{if(&, '&', '*')} span {
            padding: $range-icon-bigger-padding;
          }
        }

        #{if(&, '&', '*')} .e-title {
          cursor: $range-cursor-pointer-style;
          line-height: $range-bigger-nav-icon-height;
        }
        #{if(&, '&', '*')}.e-month,
        #{if(&, '&', '*')}.e-year,
        #{if(&, '&', '*')}.e-decade {
          @if ($skin-name != 'FluentUI') {
            padding: $range-e-bigger-header-padding;
          }
        }
      }
    }
    #{if(&, '&', '*')} .e-footer {
      height: $range-bigger-footer-height;

      #{if(&, '&', '*')} .e-btn {
        height: $range-btn-bigger-height;
        line-height: $range-btn-bigger-line-height;
        overflow: $range-visibility-hidden;
      }
      #{if(&, '&', '*')} .e-btn.e-apply {
        margin: $range-bigger-footer-margin;
      }
    }
    #{if(&, '&', '*')}.e-rtl.e-popup {
      #{if(&, '&', '*')} .e-range-header .e-start-end {
        #{if(&, '&', '*')} .e-end-btn {
          border: $range-btn-border-value;
          border-radius: $range-btn-left-radius;
          border-right: $range-value-zero;
        }
        #{if(&, '&', '*')} .e-start-btn {
          border-radius: $range-btn-right-radius;
        }
      }
      #{if(&, '&', '*')} .e-footer {
        #{if(&, '&', '*')}.e-btn.e-cancel {
          margin: $range-bigger-rtl-footer-margin;
        }
        #{if(&, '&', '*')} .e-btn.e-apply {
          margin-left: $range-value-zero;
        }
      }
    }
    #{if(&, '&', '*')}.e-device {
      #{if(&, '&', '*')}.e-popup {
        max-width: $range-device-max-width;

        #{if(&, '&', '*')} .e-range-header {
          margin: $range-device-control-header-margin;
          padding: $range-device-control-header-padding;

          #{if(&, '&', '*')} .e-day-span {
            @if $skin-name == 'tailwind' {
              height: $range-device-indicator-height;
              line-height: $range-device-indicator-height;
            }
            margin: $range-device-indicator-margin;

            @if $skin-name == 'fluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' {
              margin-bottom: $margin-zero;
            }
          }
        }
      }
    }
  }

  .e-daterangepicker.e-bigger .e-calendar .e-month .e-selected span.e-day {
    @if $skin-name == 'FluentUI' {
      height: 29px;
      width: 29px;
      line-height: 29px;
    }
  }

  .e-bigger .e-content-placeholder.e-daterangepicker.e-placeholder-daterangepicker,
  .e-bigger.e-content-placeholder.e-daterangepicker.e-placeholder-daterangepicker {
    background-size: 250px 40px;
    min-height: $range-content-min-height;
  }

  .e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
    @if $skin-name == 'FluentUI' {
      line-height: $range-bigger-today-hover-line-height;
    }
  }

  .e-bigger .e-calendar .e-content.e-month td.e-other-month.e-today.e-range-hover span.e-day {
    @if $skin-name == 'FluentUI' {
      line-height: $range-bigger-other-hover-line-height;
    }
  }

  .e-bigger #{&}.e-daterangepicker,
  #{if(&, '&', '*')}.e-bigger#{&}.e-daterangepicker,
  #{if(&, '&', '*')}.e-device#{&}.e-daterangepicker {
    @if $skin-name == 'material' {
      background-color: initial;
    }
    @else if $skin-name == 'Material3' {
      background: initial;
    }
    @else if $skin-name == 'bootstrap-dark' {
      background-color: $range-background;
    }
    @else {
      background-color: $range-bg-color;
    }
    padding: $range-popup-padding;

    #{if(&, '&', '*')} .e-calendar th {
      color: $range-calendar-light-color;
    }
    #{if(&, '&', '*')} .e-start-btn,
    #{if(&, '&', '*')} .e-end-btn {
      background: $range-bg-color;
      @if $skin-name == 'bootstrap4' {
        color: $range-button-font-color;
      }
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3'{
        color: $range-button-font-color;
      }
    }
    #{if(&, '&', '*')} .e-start-btn.e-active,
    #{if(&, '&', '*')} .e-start-btn.e-active:active,
    #{if(&, '&', '*')} .e-end-btn.e-active,
    #{if(&, '&', '*')} .e-end-btn.e-active:active:not([disabled]),
    #{if(&, '&', '*')} .e-start-btn.e-active:hover,
    #{if(&, '&', '*')} .e-end-btn.e-active:hover {
      background: $range-primary-color;
      color: $range-primary-font-color;
    }
  }

  .e-daterangepicker.e-bigger.e-small .e-calendar .e-month .e-selected span.e-day {
    @if $skin-name == 'FluentUI' {
      height: 25px;
      width: 25px;
      line-height: 25px;
    }
  }

  .e-bigger.e-small #{&}.e-daterangepicker {
    #{if(&, '&', '*')}.e-popup {
      border: $range-popup-border;
      border-radius: $range-popup-border-radius;
      box-shadow: $range-box-shadow;
      max-height: $range-max-height;
      max-width: $range-max-width;

      #{if(&, '&', '*')}.e-daterange-day-header-lg {
        max-width: $range-lg-day-header-format-width;
      }
      #{if(&, '&', '*')}.e-preset-wrapper {
        min-width: $range-preset-min-width;

        #{if(&, '&', '*')} .e-presets {
          max-height: $range-value-none;
        }
      }
      #{if(&, '&', '*')} .e-range-header {
        background: $range-header-bg-color;
        padding: $range-control-header-margin;
        width: $range-control-header-width;
        @if $skin-name == 'tailwind' {
          border-radius: $range-popup-header-border-radius;
        }
        @if $skin-name == 'Material3' {
          border-top-left-radius: $range-popup-border-radius;
        }

        #{if(&, '&', '*')} .e-start-label,
        #{if(&, '&', '*')} .e-end-label {
          cursor: $range-cursor-default-style;
          display: $range-inline-block-style;
          font-size: $range-header-label-size;
          overflow: $range-visibility-hidden;
          text-align: $range-align-center;
          text-decoration: $range-value-none;
          text-overflow: $range-text-overflow;
          user-select: $range-browser-select-none;
          white-space: $range-text-nowrap;
          width: $range-start-end-label-width;
          @if $skin-name == 'Material3' {
            font-weight: $font-weight-medium;
          }
        }
        #{if(&, '&', '*')} .e-change-icon {
          font-size: $range-font-size;
          font-weight: $range-font-weight-bold;
          text-align: $range-align-center;
          width: $range-change-icon-width;
        }
        #{if(&, '&', '*')} .e-day-span {
          direction: $range-direction-left;
          font-size: $range-calendar-small-font-size;
          height: $range-day-span-height;
          margin: $range-indicator-margin;
          text-align: $range-align-center;
          user-select: $range-browser-select-none;
          width: $range-indicator-label-width;
        }
        #{if(&, '&', '*')} .e-start-end {
          align-items: $range-align-center;
          display: $range-flex-style;
          height: $range-start-end-container-height;
        }
      }
      #{if(&, '&', '*')} .e-separator {
        @if ($skin-name != 'FluentUI') {
          height: $range-separator-height;
          margin: $range-separator-margin;
        }
      }
      #{if(&, '&', '*')} .e-calendar {
        border: $range-calendar-border;
        margin: $range-calendar-margin;
        @if ($skin-name != 'FluentUI') {
          padding: $range-calendar-popup-padding;
        }
        @if $skin-name == 'fluent2' {
          box-shadow: none;
        }

        #{if(&, '&', '*')} .e-content table {
          @if ($skin-name != 'FluentUI') {
            padding: $range-calendar-normal-table-padding;
          }
        }
        #{if(&, '&', '*')} .e-header {
          #{if(&, '&', '*')} .e-title {
            cursor: $range-cursor-pointer-style;
            line-height: $range-normal-nav-icon-height;
            @if ($skin-name != 'FluentUI') {
              width: $range-control-header-width;
              float: $range-float-none;
              font-weight: $range-font-weight-normal;
              margin-left: $range-value-zero;
            }
          }
          #{if(&, '&', '*')}.e-month,
          #{if(&, '&', '*')}.e-year,
          #{if(&, '&', '*')}.e-decade {
            @if ($skin-name != 'FluentUI') {
              padding: $range-calendar-header-padding;
            }
          }
          #{if(&, '&', '*')} .e-next {
            @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
              float: $range-float-right;
            }
          }
          #{if(&, '&', '*')} .e-prev {
            @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
              float: $range-float-left;
            }
          }
          #{if(&, '&', '*')} .e-next,
          #{if(&, '&', '*')} .e-prev {
            height: $range-normal-nav-icon-height;
            width: $range-normal-nav-icon-width;
          }
          #{if(&, '&', '*')} .e-next span,
          #{if(&, '&', '*')} .e-prev span {
            padding: $range-icon-normal-padding;
          }
        }
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
          border-radius: $range-hover-start-radius;
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
          border-radius: $range-hover-end-radius;
        }
        #{if(&, '&', '*')} .e-start-date.e-selected {
          @if ($skin-name == 'FluentUI') {
            border-radius: $range-hover-start-radius;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected {
          @if ($skin-name == 'FluentUI') {
            border-radius: $range-hover-end-radius;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
          border: $range-calendar-hover-border;
        }
      }
      #{if(&, '&', '*')} .e-footer {
        align-items: $range-align-center;
        @if ($skin-name != 'FluentUI') {
          border-top: $range-border-value;
        }
        clear: $range-float-clear;
        display: $range-flex-style;
        flex-direction: $range-flex-direction-row-reverse;
        height: $range-footer-height;
        @if $skin-name == 'tailwind' {
          border-radius: $range-popup-footer-border-radius;
        }
      }
      #{if(&, '&', '*')} .e-footer .e-btn {
        font-weight: $range-btn-font-weight;
        height: $range-btn-normal-height;
        line-height: $range-btn-normal-line-height;
        overflow: $range-visibility-hidden;
        padding: $range-btn-padding;
        text-overflow: $range-text-overflow;
        @if $skin-name == 'fluent2' {
          border: $footer-btn-border;
        }
      }
      #{if(&, '&', '*')} .e-footer .e-btn.e-apply {
        margin: $range-normal-footer-margin;
      }
      #{if(&, '&', '*')} .e-date-range-container {
        float: $range-float-left;

        #{if(&, '&', '*')}.e-range-border {
          border-right: $range-border-value;
        }
      }
      #{if(&, '&', '*')} .e-calendar-container {
        display: $range-flex-style;

        #{if(&, '&', '*')} .e-left-container,
        #{if(&, '&', '*')} .e-right-container {
          float: $range-float-left;
        }
        #{if(&, '&', '*')} .e-left-container {
          @if $skin-name != 'FluentUI' {
            border-right: $range-border-value;
          }
          @if $skin-name == 'tailwind' {
            border-right: $range-container-border-value;
          }
        }
      }
      #{if(&, '&', '*')} .e-presets {
        max-height: $range-presets-height;
        overflow: auto;
        width: $range-width-auto;

        #{if(&, '&', '*')} .e-list-item {
          border-radius: $range-list-border-radius;
          cursor: $range-cursor-pointer-style;
          line-height: $range-list-item-height;
          overflow: $range-visibility-hidden;
          padding: $range-list-item-padding;
          white-space: $range-text-nowrap;
          text-overflow: $range-text-overflow;
        }
        #{if(&, '&', '*')} .e-list-parent {
          margin: $range-value-zero;
          max-width: $range-presets-width;
          padding: $range-value-zero;
        }
        #{if(&, '&', '*')} .e-text-content {
          line-height: $range-list-item-line-height;
        }
        #{if(&, '&', '*')} .e-ul {

          #{if(&, '&', '*')} li.e-list-item {
            font-size: $range-presets-normal-list-font-size;
            height: $range-preset-normal-list-height;
            line-height: $range-preset-normal-list-height;
            &.e-active:first-child {
              @if $skin-name == 'Material3' {
                border-top-right-radius: $range-popup-border-radius;
                border-top-left-radius: $range-popup-border-radius;
              }
            }
          }
        }
      }
      #{if(&, '&', '*')} .e-hide-range {
        display: $range-display-none;
      }
    }
    #{if(&, '&', '*')}.e-rtl {
      #{if(&, '&', '*')} .e-date-range-container {
        float: $range-float-right;

        #{if(&, '&', '*')}.e-range-border {
          border-left: $range-border-value;
          border-right: $range-value-zero;
        }
        #{if(&, '&', '*')} .e-left-container {
          @if $skin-name != 'FluentUI' {
            border-left: $range-border-value;
            border-right: $range-value-zero;
          }
          @if $skin-name == 'tailwind' {
            border-left: $range-container-border-value;
          }
        }
        #{if(&, '&', '*')} .e-calendar {
          #{if(&, '&', '*')} .e-next {
            float: $range-float-left;
          }
          #{if(&, '&', '*')} .e-prev {
            @if ($skin-name != 'FluentUI') {
              float: $range-float-right;
            }
          }
          #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
            border-radius: $range-hover-end-radius;
            @if ($skin-name == 'FluentUI') {
              box-shadow: $selected-range-box-shadow;
            }
          }
          #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
            border-radius: $range-hover-start-radius;
            @if ($skin-name == 'FluentUI') {
              box-shadow: $selected-range-box-shadow;
            }
          }
        }
      }
      #{if(&, '&', '*')} .e-footer {
        flex-direction: $range-flex-direction-row;
        justify-content: $range-flex-justify-content;

        #{if(&, '&', '*')} .e-btn.e-cancel {
          margin: $range-normal-rtl-footer-margin;
        }
        #{if(&, '&', '*')} .e-btn.e-apply {
          margin-left: $range-value-zero;
        }
      }
    }
  }

  .e-bigger.e-small #{&}.e-daterangepicker #{&}.e-calendar {
    max-width: $calendar-bigger-small-max-width;
  }

  .e-bigger.e-small #{&}.e-daterangepicker,
  .e-bigger.e-small#{&}.e-daterangepicker {
    #{if(&, '&', '*')}.e-popup {
      background: $range-background;

      #{if(&, '&', '*')} .e-calendar {
        @if $skin-name != 'Material3' {
          background-color: $range-background;
        }
        @if $skin-name == 'Material3' {
          background: $range-background;
        }

        #{if(&, '&', '*')} .e-header .e-title,
        #{if(&, '&', '*')} .e-header .e-title:hover {
          color: $range-calendar-header-dark-color;
          text-decoration: none;
          @if $skin-name == 'fluent2' {
            width: $title-hover-width;
          }
        }
        #{if(&, '&', '*')} .e-content .e-range-hover {
          @if $skin-name != 'Material3' {
            background-color: $range-hover-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-hover-color;
          }
          color: $range-calendar-dark-color;
        }
        #{if(&, '&', '*')} .e-content .e-start-date.e-selected,
        #{if(&, '&', '*')} .e-content .e-end-date.e-selected {
          @if $skin-name == 'FluentUI' {
            background-color: $range-hover-color;
            color: $range-calendar-dark-color;
          }
        }
        #{if(&, '&', '*')} .e-content.e-month .e-today.e-range-hover span {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
            background-color: $range-today-color;
            border: $range-today-border-color;
            color: $range-calendar-today-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-today-color;
            border: $range-today-border-color;
            color: $range-calendar-today-color;
          }
          @if $skin-name == 'FluentUI' {
            box-shadow: $range-today-hover-box-shadow;
          }
        }
        #{if(&, '&', '*')} .e-content .e-range-hover span {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
            background: $range-hover-color;
            border: $range-calendar-selection-border;
            color: $range-calendar-dark-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-hover-bg-color;
            border: $range-calendar-selection-border;
            color: $range-calendar-dark-color;
          }
        }

        #{if(&, '&', '*')} .e-content .e-range-hover:not(.e-other-month) span {
          @if $skin-name == 'tailwind' {
            background: $range-hover-color;
            border: $range-calendar-selection-border;
            color: $range-calendar-dark-color;
          }
        }
        #{if(&, '&', '*')} .e-range-hover:not(.e-selected):hover span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-focused-date:not(.e-selected) span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-focused-date.e-today span.e-day {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
            background-color: $range-hover-content-color;
            border: $range-calendar-hover-border-color;
            color: $range-calendar-dark-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-hover-content-color;
            border: $range-calendar-hover-border-color;
            color: $range-calendar-dark-color;
          }
        }
        #{if(&, '&', '*')} .e-range-hover.e-today:hover span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-focused-date.e-today span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-start-date.e-selected.e-today span.e-day,
        #{if(&, '&', '*')} .e-range-hover.e-end-date.e-selected.e-today span.e-day {
          @if $skin-name != 'tailwind' {
            border: $range-calendar-active-border;
          }
        }
        #{if(&, '&', '*')} .e-range-hover.e-selected.e-today:hover span.e-day {
          @if $skin-name != 'tailwind' {
            border: $range-calendar-today-start-color;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
        #{if(&, '&', '*')} .e-content .e-other-month.e-today.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover:hover span.e-day,
        #{if(&, '&', '*')} .e-content .e-other-month.e-selected,
        #{if(&, '&', '*')} .e-content .e-other-month.e-selected span {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-month-border;
            color: $range-other-month-date;
          }
          @if $skin-name == 'Material3' {
            background: $range-other-hover-color;
            border: $range-calendar-other-month-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
        #{if(&, '&', '*')} .e-content .e-other-month.e-today.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover span,
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover:hover span.e-day {
          @if $skin-name == 'tailwind' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-month-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover,
        #{if(&, '&', '*')} .e-content .e-other-month.e-selected {
          @if $skin-name != 'tailwind' and $skin-name != 'Material3' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-normal-border;
            color: $range-other-month-date;
          }
          @if $skin-name == 'Material3' {
            background: $range-other-hover-color;
            border: $range-calendar-other-normal-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-content .e-other-month.e-range-hover {
          @if $skin-name == 'tailwind' {
            background-color: $range-other-hover-color;
            border: $range-calendar-other-normal-border;
            color: $range-other-month-date;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
          @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
            background-color: $range-selection-bg;
          }
          @if $skin-name == 'Material3' {
            background: $range-selection-bg;
          }
          @if $skin-name == 'fluent2' {
            background: $range-selection-bg;
            border-radius: $range-selected-hover-radius;
          }
          color: $range-active-font-color;
          @if ($skin-name == 'FluentUI') {
            border-radius: $range-selected-hover-radius;
            box-shadow: $range-value-none;
          }
        }
        #{if(&, '&', '*')} .e-start-date.e-selected span.e-day,
        #{if(&, '&', '*')} .e-end-date.e-selected span.e-day {
          @if ($skin-name == 'FluentUI') {
            background-color: $range-selection-bg;
            border-radius: $range-selected-hover-radius;
            box-shadow: $range-value-none;
            color: $range-active-font-color;
          }
          @if ($skin-name == 'fluent2') {
            background: $range-selection-bg;
            border-radius: $range-selected-hover-radius;
            color: $range-active-font-color;
          }
        }
        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover.e-other-month span.e-day,
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover.e-other-month span.e-day {
          @if ($skin-name == 'tailwind') {
            background-color: $range-selection-bg;
            color: $range-active-font-color;
          }
        }
        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover.e-today span.e-day {
          @if $skin-name != 'Material3' {
            background-color: $range-selection-bg;
          }
          @if $skin-name == 'Material3' {
            background: $range-selection-bg;
          }
          color: $range-active-font-color;
        }
        #{if(&, '&', '*')} .e-other-month.e-selected span {
          color: $range-primary-font-color;
        }
      }
      #{if(&, '&', '*')} .e-presets {
        @if $skin-name != 'Material3' {
          background-color: $range-presets-bg;
        }
        @if $skin-name == 'Material3' {
          background: $range-presets-bg;
        }
        color: $range-preset-normal-font-color;

        #{if(&, '&', '*')} .e-list-item.e-active {
          @if $skin-name != 'Material3' {
            background-color: $range-presets-bg-color;
          }
          @if $skin-name == 'Material3' {
            background: $range-presets-bg-active-color;
          }
          color: $range-presets-font-color;
        }
        #{if(&, '&', '*')} .e-list-item.e-hover {
          @if $skin-name != 'Material3' {
            background-color: $range-presets-hover-bg;
          }
          @if $skin-name == 'Material3' {
            background: $range-presets-hover-bg;
          }
          color: $range-list-hover-color;
        }
      }
      #{if(&, '&', '*')} .e-start-label,
      #{if(&, '&', '*')} .e-end-label {
        color: $range-calendar-header-text-color;
      }
      #{if(&, '&', '*')} .e-change-icon {
        color: $range-change-icon-color;
      }
      #{if(&, '&', '*')} .e-day-span {
        color: $range-calendar-medium-color;
      }
      #{if(&, '&', '*')} .e-separator {
        @if $skin-name != 'Material3' {
          background-color: $range-separator-color;
        }
        @if $skin-name == 'Material3' {
          background: $range-separator-color;
        }
        @if $skin-name == 'fluent2' {
          display: none;
        }
      }
      #{if(&, '&', '*')} .e-footer {
        @if $skin-name != 'Material3' {
          background-color: $range-footer-background;
        }
        @if $skin-name == 'Material3' {
          background: $range-footer-background;
          border-bottom-left-radius: $range-popup-border-radius;
          border-bottom-right-radius: $range-popup-border-radius;
        }

        #{if(&, '&', '*')} .e-cancel.e-flat:not(:hover) {
          @if $skin-name == 'tailwind' {
            /* stylelint-disable property-no-vendor-prefix */
            -webkit-tap-highlight-color: transparent;
            background-color: $range-cancel-flat-btn-bgcolor;
            border-color: $range-cancel-flat-btn-border-color;
            box-shadow: $range-cancel-flat-btn-box-shadow;
            color: $range-cancel-flat-btn-color;
          }
        }

        #{if(&, '&', '*')} .e-apply.e-flat.e-primary:not(:hover):not(:disabled) {
          @if $skin-name == 'tailwind' {
            -webkit-tap-highlight-color: transparent;
            background-color: $range-apply-btn-primary-bgcolor;
            border-color: $range-apply-btn-primary-border-color;
            color: $range-apply-btn-primary-color;
          }
        }
      }
    }
  }

  .e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
    @if $skin-name == 'FluentUI' {
      line-height: $range-today-hover-line-height;
    }
  }

  .e-bigger.e-small .e-calendar .e-content.e-month td.e-today.e-other-month.e-range-hover span.e-day {
    @if $skin-name == 'FluentUI' {
      line-height: $range-other-hover-line-height;
    }
  }

  .e-bigger {
    #{if(&, '&', '*')} .e-input-group-icon.e-range-icon,
    #{if(&, '&', '*')}.e-control-wrapper .e-input-group-icon.e-range-icon,
    #{if(&, '&', '*')} .e-control-wrapper .e-input-group-icon.e-range-icon {
      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'material-dark' or $skin-name == 'material' or $skin-name == 'tailwind3' {
        font-size: $range-bigger-icon-font-size;
        margin: $range-icon-bigger-margin;
        min-height: $range-bigger-icon-container-min-height;
        min-width: $range-bigger-icon-container-min-width;
        outline: none;
      }
      @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
        font-size: $range-bigger-icon-font-size;
        margin: $range-icon-bigger-margin;
        min-height: $range-icon-bigger-container-min-height;
        min-width: $range-icon-bigger-container-min-width;
        outline: none;
        border-radius: $range-icon-bigger-border-radius;
      }
      @if $skin-name == 'fluent2' {
        padding: $date-range-icon-padding;
      }
      @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'fabric-dark' or $skin-name == 'fabric'  or $skin-name == 'highcontrast-light' or $skin-name == 'highcontrast' {
        font-size: $range-bigger-icon-font-size;
        margin: $range-icon-bigger-margin;
        outline: none;
      }
    }
  }

  .e-small.e-bigger .e-input-group-icon.e-range-icon,
  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger .e-input-group-icon.e-range-icon,
  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper .e-input-group-icon.e-range-icon {
    font-size: $range-bigger-small-icon-font-size;
    @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
      min-width: $range-bigger-small-icon-container-min-width;
      min-height: $range-bigger-small-icon-container-min-height;
      border-radius: $range-bigger-small-icon-border-radius;
      margin: $zero-value;
    }
    @if $skin-name == 'Material3' {
      padding: $zero-value;
    }
  }

  .e-bigger .e-date-range-wrapper.e-outline .e-input-group-icon.e-range-icon,
  .e-date-range-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-range-icon,
  .e-bigger .e-date-range-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-range-icon {
    @if $skin-name == 'fluent2' or $skin-name == 'material-dark'  or $skin-name == 'material' or $skin-name == 'Material3' {
      min-height: $zero-value;
      min-width: 24px;
    }
  }

  .e-bigger.e-small .e-outline.e-date-range-wrapper .e-input-group-icon.e-range-icon,
  .e-bigger.e-small.e-outline.e-date-range-wrapper .e-input-group-icon.e-range-icon,
  .e-date-range-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-range-icon,
  .e-bigger.e-small .e-date-range-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-range-icon {
    @if $skin-name == 'fluent2' or $skin-name == 'material-dark' or $skin-name == 'material' or $skin-name == 'Material3' {
      min-height: $zero-value;
      min-width: 20px;
    }
  }

  .e-daterangepicker.e-popup.e-bigger .e-calendar .e-header .e-title,
  .e-daterangepicker.e-popup.e-device .e-calendar .e-header .e-title {
    @if $skin-name == 'FluentUI' {
      width: 72%;
    }
  }

  .e-daterangepicker.e-popup.e-bigger.e-small .e-calendar .e-header .e-title {
    @if $skin-name == 'FluentUI' {
      width: 70%;
    }
  }
}

//default
$datetime-default-text-indent: 20px !default;
$datetime-list-bigger-line-height: 40px !default;
$datetime-list-normal-line-height: 26px !default;
$datetime-list-normal-font-size: 14px !default;
$datetime-list-bigger-font-size: 15px !default;
$datetime-list-normal-text-indent: $datetime-default-text-indent !default;
$datetime-list-bigger-text-indent: 20px !default;
$datetime-popup-border-radius: 4px !default;
$datetime-list-active-icon-color: $grey-dark-font !default;
$datetime-list-font-weight: regular !default;
$datetime-popup-shadow:  0 6px 12px rgba($base-font, .5) !default;
$datetime-list-default-font-color: $grey-dark-font !default;
$datetime-list-border-color: 1px solid $grey-44 !default;
$datetime-list-bg-color: $grey-dark !default;
$datetime-list-active-bg-color: $brand-primary !default;
$datetime-list-active-font-color: $brand-primary-font !default;
$datetime-list-hover-bg-color: $grey-44 !default;
$datetime-list-hover-font-color: $grey-dark-font !default;
$datetime-list-active-hover-bg-color: $brand-primary !default;
$datetime-list-active-hover-font-color: $brand-primary-font !default;
$datetime-list-normal-padding: 5px !default;
$datetime-list-bigger-padding: 10px !default;
$datetime-time-font-icon: '\e93e' !default;
$datetime-icon-normal-font-size: 16px !default;
$datetime-icon-bigger-font-size: 18px !default;
$datetime-date-icon-margin: 0 !default;
$datetime-time-icon-margin: 0 !default;
$datetime-time-bigger-icon-margin: 0 !default;
$datetime-list-popup-icon-active-color: $grey-dark-font !default;
$datetime-time-rtl-icon-margin: 0 !default;
$datetime-time-rtl-bigger-icon-margin: 0 !default;
$datetime-time-icon-border: 1px !default;
$datetime-time-icon-border-style: none !default;
$datetime-list-hover-border-color: none !default;
$datetime-list-default-border-style: none !default;
$datetime-default-overlay: rgba($grey-base, .6) !default;

//mouse small
$datetime-list-small-line-height: 22px !default;
$datetime-list-small-text-indent: 12px !default;
$datetime-list-small-font-size: 13px !default;

// mouse small icon
$datetime-icon-small-font-size: 14px !default;

//touch small
$datetime-list-bigger-small-line-height: 34px !default;
$datetime-list-bigger-small-text-indent: 20px !default;
$datetime-list-bigger-small-font-size: 14px !default;

// touch small icon
$datetime-icon-bigger-small-font-size: 18px !default;

// modal full-screen popup
$modal-datetime-position: fixed !default;
$modal-datetime-wrapper-position: relative !default;
$modal-datetime-wrapper-width: 100% !default;

//enddefault

$margin-zero: 0;
$datetime-list-parent-padding: $datetime-list-normal-padding 0;
$datetime-list-parent-bigger-padding: $datetime-list-bigger-padding 0;
$datetime-full-height: 100% !default;
$datetime-content-place-min-height: 33px !default;
$datetime-bigger-content-place-min-height: 40px !default;
$date-time-full-width: 100% !default;
$date-time-border-width: 1px !default;

@include export-module('datetimepicker-layout') {
  // datetimepicker layout
  .e-input-group.e-control-wrapper.e-datetime-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-datetime-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
    display: flex;
  }

  .e-datetime-wrapper {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      font-size: $datetime-icon-normal-font-size;
    }

    #{if(&, '&', '*')}.e-control-wrapper {
      box-sizing: border-box;
    }

    #{if(&, '&', '*')} .e-time-icon.e-icons.e-disabled,
    #{if(&, '&', '*')} .e-date-icon.e-icons.e-disabled {
      pointer-events: none;
    }

    #{if(&, '&', '*')} .e-clear-icon {
      box-sizing: content-box;
      @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark' {
        box-sizing: border-box;
      }
    }

    #{if(&, '&', '*')} span {
      cursor: pointer;
    }

    #{if(&, '&', '*')} .e-input-group-icon.e-date-icon,
    #{if(&, '&', '*')} .e-input-group-icon.e-time-icon {
      font-size: $datetime-icon-normal-font-size;
      margin: $datetime-date-icon-margin;
      @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
        min-height: $datetime-normal-min-height;
        min-width: $datetime-normal-min-width;
        @if $skin-name == 'Material3' {
          border-radius: $datetime-normal-border-radius;
        }
      }
      outline: none;
    }

    #{if(&, '&', '*')} .e-input-group-icon.e-time-icon {
      border: $datetime-time-icon-border;
      border-style: $datetime-time-icon-border-style;
      margin: $datetime-time-icon-margin;
    }
  }

  #{&}.e-datetimepicker {
    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
      --dummy-style: true;
    }
  }

  .e-datetime-wrapper:not(.e-outline) {
    #{if(&, '&', '*')}.e-rtl .e-input-group-icon.e-time-icon {
      margin: $datetime-time-rtl-icon-margin;
    }
  }

  .e-control.e-datetimepicker.e-popup-wrapper.e-popup-container.e-popup-expand.e-popup.e-popup-open .e-datetime-mob-popup-wrap {
    align-items: normal;
  }

  .e-datetime-mob-popup-wrap {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: $datetime-full-height;
    justify-content: center;
    left: $margin-zero;
    max-height: $datetime-full-height;
    position: fixed;
    top: $margin-zero;
    width: $date-time-full-width;
    z-index: 1002;

    .e-datetimepicker.e-popup.e-lib.e-control.e-popup-open {
      left: $margin-zero !important; /* stylelint-disable-line declaration-no-important */
      position: relative;
      top: $margin-zero !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  #{&}.e-datetimepicker.e-time-modal {
    @if $skin-name != 'Material3' {
      background-color: $datetime-default-overlay;
    }
    @if $skin-name == 'Material3' {
      background: $datetime-default-overlay;
    }
    height: $datetime-full-height;
    left: $margin-zero;
    opacity: .5;
    pointer-events: auto;
    position: fixed;
    top: $margin-zero;
    width: $date-time-full-width;
    z-index: 999;
  }

  #{&}.e-datetimepicker.e-popup {
    border-style: solid;
    border-width: $date-time-border-width;
    overflow: auto;

    #{if(&, '&', '*')} .e-content {
      position: relative;
    }

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      margin: $margin-zero;
      @if $skin-name != 'Material3' {
        padding: $datetime-list-parent-padding;
      }
      @else {
        padding: $margin-zero;
      }

      #{if(&, '&', '*')} .e-list-item {
        color: $datetime-list-default-font-color;
        cursor: default;
        font-size: $datetime-list-normal-font-size;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: 100%;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        cursor: pointer;
      }
    }
  }

  #{&}.e-datetimepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
      line-height: $datetime-list-normal-line-height;
      text-indent: $datetime-list-normal-text-indent;
    }
  }

  .e-small #{&}.e-datetimepicker.e-popup,
  #{if(&, '&', '*')}.e-small#{&}.e-datetimepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
      font-size: $datetime-list-small-font-size;
      line-height: $datetime-list-small-line-height;
      text-indent: $datetime-list-small-text-indent;
    }
  }

  .e-small.e-datetime-wrapper,
  #{if(&, '&', '*')}.e-small .e-datetime-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      font-size: $datetime-icon-small-font-size;
    }

    #{if(&, '&', '*')} .e-input-group-icon.e-time-icon {
      @if $skin-name == 'Material3' {
        min-height: $datetime-small-min-height;
        min-width: $datetime-small-min-width;
        border-radius: $datetime-small-icon-border-radius;
        margin: $datetime-time-small-icon-margin;
      }
    }
  }

  .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
    background-size: 250px 33px;
    min-height: $datetime-content-place-min-height;
  }

  .e-datetimepicker.e-popup-expand.e-popup {
    position: $modal-datetime-position;

    #{if(&, '&', '*')} .e-datetime-mob-popup-wrap {
      position: $modal-datetime-wrapper-position;
      width: $modal-datetime-wrapper-width;
    }
  }
}

@include export-module('datetimepicker-theme') {

  /*! datetimepicker theme */
  .e-datetime-wrapper {
    #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
      @if $skin-name == 'bootstrap4' {
        background: $datetime-icon-active-bg-color;
        border-color: $datetime-active-border-color;
      }
      color: $datetime-list-active-icon-color;
    }

    #{if(&, '&', '*')}.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
      color: $datetime-list-popup-icon-active-color;
    }
  }

  .e-datetimepicker.e-popup {
    border: $datetime-list-border-color;
    border-radius: $datetime-popup-border-radius;
    box-shadow: $datetime-popup-shadow;

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      @if $skin-name != 'Material3' {
        background-color: $datetime-list-bg-color;
      }
      @if $skin-name == 'Material3' {
        background: $datetime-list-bg-color;
      }

      #{if(&, '&', '*')} li.e-list-item {
        border: $datetime-list-default-border-style;
        color: $datetime-list-default-font-color;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        @if $skin-name == 'tailwind3' {
          background: $datetime-list-hover-bg-color;
          color: $datetime-list-hover-font-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-navigation {
        @if $skin-name == 'tailwind3' {
          background: $datetime-list-navigation-bg-color;
          color: $datetime-list-navigation-font-color;
          box-shadow: $datetime-list-navigation-box-shadow;
        }
      }

      #{if(&, '&', '*')} .e-list-item:focus {
        @if $skin-name == 'tailwind3' {
          background: $datetime-list-focus-bg-color;
          color: $datetime-list-focus-font-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-hover,
      #{if(&, '&', '*')} .e-list-item.e-navigation,
      #{if(&, '&', '*')} .e-list-item:focus {
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $datetime-list-hover-bg-color;
        }
        @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
          background: $datetime-list-hover-bg-color;
        }
        border: $datetime-list-hover-border-color;
        color: $datetime-list-hover-font-color;
      }

      #{if(&, '&', '*')} .e-list-item.e-active {
        @if $skin-name != 'Material3' and $skin-name != 'tailwind3' {
          background-color: $datetime-list-active-bg-color;
        }
        @if $skin-name == 'Material3' or $skin-name == 'tailwind3' {
          background: $datetime-list-active-bg-color;
        }
        color: $datetime-list-active-font-color;
        @if $skin-name == 'tailwind3' {
          font-weight: $font-weight-medium;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
        @if $skin-name != 'Material3' {
          background-color: $datetime-list-active-hover-bg-color;
        }
        @if $skin-name == 'Material3' {
          background: $datetime-list-active-hover-bg-color;
        }
        color: $datetime-list-active-hover-font-color;
      }
    }
  }
}

@include export-module('datetimepicker-bootstrap-icons') {

  /*! component icons */
  .e-datetime-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      content: '\e93e';
      font-family: 'e-icons';
    }
  }
}

@include export-module('datetimepicker-bigger') {

  .e-bigger.e-datetime-wrapper,
  #{if(&, '&', '*')}.e-bigger .e-datetime-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      font-size: $datetime-icon-bigger-font-size;
    }

    #{if(&, '&', '*')} .e-input-group-icon.e-time-icon {
      margin: $datetime-time-bigger-icon-margin;
      @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
        min-height: $datetime-bigger-min-height;
        min-width: $datetime-bigger-min-width;
        @if $skin-name == 'Material3' {
          border-radius: $datetime-bigger-icon-border-radius;
        }
      }
    }
  }

  .e-bigger.e-datetime-wrapper:not(.e-outline),
  #{if(&, '&', '*')}.e-bigger .e-datetime-wrapper:not(.e-outline) {
    #{if(&, '&', '*')}.e-rtl .e-input-group-icon.e-time-icon {
      margin: $datetime-time-rtl-bigger-icon-margin;
    }
  }

  .e-bigger #{&}.e-datetimepicker.e-popup,
  #{if(&, '&', '*')}.e-bigger#{&}.e-datetimepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul {
      @if $skin-name != 'Material3' {
        padding: $datetime-list-parent-bigger-padding;
      }
      @else {
        padding: $margin-zero;
      }

      #{if(&, '&', '*')} .e-list-item {
        font-size: $datetime-list-bigger-font-size;
        line-height: $datetime-list-bigger-line-height;
        text-indent: $datetime-list-bigger-text-indent;
      }
    }
  }

  .e-bigger .e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker,
  .e-bigger.e-content-placeholder.e-datetimepicker.e-placeholder-datetimepicker {
    background-size: 250px 40px;
    min-height: $datetime-bigger-content-place-min-height;
  }

  .e-small.e-bigger.e-datetime-wrapper,
  #{if(&, '&', '*')}.e-small.e-bigger .e-datetime-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      font-size: $datetime-icon-bigger-small-font-size;
    }

    #{if(&, '&', '*')} .e-input-group-icon.e-time-icon {
      @if $skin-name == 'Material3' {
        min-height: $datetime-bigger-small-min-height;
        min-width: $datetime-bigger-small-min-width;
        border-radius: $datetime-bigger-small-icon-border-radius;
        margin: $datetime-time-bigger-small-icon-margin;
      }
    }
  }

  .e-small.e-bigger #{&}.e-datetimepicker.e-popup,
  #{if(&, '&', '*')}.e-small.e-bigger#{&}.e-datetimepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
      font-size: $datetime-list-bigger-small-font-size;
      line-height: $datetime-list-bigger-small-line-height;
      text-indent: $datetime-list-bigger-small-text-indent;
    }
  }

  .e-bigger .e-datetime-wrapper.e-outline .e-input-group-icon.e-date-icon,
  .e-datetime-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-date-icon,
  .e-bigger .e-datetime-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon,
  .e-bigger .e-datetime-wrapper.e-outline .e-input-group-icon.e-time-icon,
  .e-datetime-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-time-icon,
  .e-bigger .e-datetime-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-time-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' {
      min-height: $zero-value;
      min-width: 24px;
    }
  }

  .e-bigger.e-small .e-outline.e-datetime-wrapper .e-input-group-icon.e-date-icon,
  .e-bigger.e-small.e-outline.e-datetime-wrapper .e-input-group-icon.e-date-icon,
  .e-datetime-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-date-icon,
  .e-bigger.e-small .e-datetime-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-date-icon,
  .e-bigger.e-small .e-outline.e-datetime-wrapper .e-input-group-icon.e-time-icon,
  .e-bigger.e-small.e-outline.e-datetime-wrapper .e-input-group-icon.e-time-icon,
  .e-datetime-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-time-icon,
  .e-bigger.e-small .e-datetime-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-time-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' {
      min-height: $zero-value;
      min-width: 20px;
    }
  }
}

//default
$mask-error-color: $brand-danger-dark !default;
$mask-font-family: Arial, $font-family !default;
$mask-font-size: 13px !default;
$mask-bigger-font-size: 14px !default;

//enddefault
$mask-bigger-min-height: 40px !default;
$mask-min-height: 33px !default;

$mask-prepend-label-bottom-top: 20px !default;
$mask-prepend-label-top-top: 18px !default;
$mask-prepend-outline-label-bottom-top: 20px !default;
$mask-prepend-outline-label-top-top: 17px !default;
$mask-prepend-filled-label-bottom-top: 20px !default;
$mask-prepend-filled-label-top-top: 20px !default;
$mask-bigger-prepend-label-bottom-top: 22px !default;
$mask-bigger-prepend-label-top-top: 18px !default;
$mask-bigger-prepend-outline-label-bottom-top: 22px !default;
$mask-bigger-prepend-outline-label-top-top: 17px !default;
$mask-bigger-prepend-filled-label-bottom-top: 23px !default;
$mask-bigger-prepend-filled-label-top-top: 18px !default;

@include export-module('maskedtextbox-layout') {

  /*! maskedtextbox layout */
  .e-control-wrapper.e-mask #{&}.e-maskedtextbox {
    @if $skin-name != 'bootstrap' {
      font-family: $mask-font-family;
      font-size: $mask-font-size;
    }
  }

  .e-content-placeholder.e-mask.e-placeholder-mask {
    background-size: 300px 33px;
    min-height: $mask-min-height;
  }

  div.e-mask.e-input-group,
  span.e-mask.e-input-group {
    &.e-prepend-wrapper,
    &.e-append-wrapper {
      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
        top: $mask-prepend-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
        top: $mask-prepend-label-top-top;
      }

      &.e-outline {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $mask-prepend-outline-label-bottom-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $mask-prepend-outline-label-top-top;
        }
      }

      &.e-filled {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $mask-prepend-filled-label-bottom-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $mask-prepend-filled-label-top-top;
        }
      }
    }
  }

  .e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
    padding-left: 0;
  }
  .e-mask.e-input-group.e-prepend-wrapper.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
    padding-right: 0;
  }

  .e-mask.e-input-group.e-prepend-wrapper input.e-input {
    padding-left: 0;
  }

  .e-mask.e-rtl.e-input-group.e-prepend-wrapper input.e-input {
    padding-right: 0;
  }

  @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
    .e-mask.e-input-group.e-prepend-wrapper input,
    .e-mask.e-input-group.e-append-wrapper input {
      height: 35px;
    }
  }
  @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap5') {
    .e-mask.e-input-group.e-prepend-wrapper input,
    .e-mask.e-input-group.e-append-wrapper input {
      height: 37px;
    }
  }
  @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
    .e-mask.e-input-group.e-prepend-wrapper input,
    .e-mask.e-input-group.e-append-wrapper input {
      height: 39px;
    }
  }

  @if ($skin-name == 'bootstrap4') {
    .e-mask.e-input-group.e-prepend-wrapper input,
    .e-mask.e-input-group.e-append-wrapper input {
      height: 38px;
    }
  }

  @if ($skin-name == 'bootstrap5.3') {
    .e-mask.e-input-group.e-prepend-wrapper input,
    .e-mask.e-input-group.e-append-wrapper input {
      height: 36px;
    }
  }
}

@include export-module('maskedit-theme') {

  /*! maskedtextbox theme */
  .e-control-wrapper.e-mask.e-error #{&}.e-maskedtextbox,
  .e-utility-mask.e-error {
    @if $skin-name != 'bootstrap' and $skin-name != 'FluentUI' {
      color: $mask-error-color;
    }
  }
}

@include export-module('maskedtextbox-bigger') {

  .e-bigger .e-control-wrapper.e-mask #{&}.e-maskedtextbox {
    @if $skin-name != 'bootstrap' {
      font-size: $mask-bigger-font-size;
    }
  }

  .e-control-wrapper.e-mask.e-bigger #{&}.e-maskedtextbox {
    @if $skin-name != 'bootstrap' {
      font-size: $mask-bigger-font-size;
    }
  }

  .e-bigger .e-content-placeholder.e-mask.e-placeholder-mask,
  .e-bigger.e-content-placeholder.e-mask.e-placeholder-mask {
    background-size: 300px 40px;
    min-height: $mask-bigger-min-height;
  }

  div.e-bigger.e-mask.e-input-group,
  .e-bigger div.e-mask.e-input-group,
  span.e-bigger.e-mask.e-input-group,
  .e-bigger span.e-mask.e-input-group {
    &.e-prepend-wrapper,
    &.e-append-wrapper {
      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
        top: $mask-bigger-prepend-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
        top: $mask-bigger-prepend-label-top-top;
      }

      &.e-outline {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $mask-bigger-prepend-outline-label-bottom-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $mask-bigger-prepend-outline-label-top-top;
        }
      }

      &.e-filled {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $mask-bigger-prepend-filled-label-bottom-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $mask-bigger-prepend-filled-label-top-top;
        }
      }

      & input {
        height: auto;
      }
    }
  }
}

/* stylelint-disable-line no-empty-source */
$multiline-clear-icon-right-position: 10px;
$multiline-clear-icon-top-position: 10px;
$multiline-clear-icon-left-position: 10px;
$input-bigger-focus-text-padding-right: 32px;
$input-bigger-focus-text-padding-left: 32px;
$input-focus-text-padding-right: 30px;
$input-focus-text-padding-left: 30px;
$textbox-bigger-min-height: 40px;
$textbox-min-height: 33px;

$textbox-prepend-padding: 10px 8px 10px 12px;
$textbox-append-padding: 10px 12px 10px 8px;
$textbox-rtl-prepend-padding: 10px 12px 10px 8px;
$textbox-icon-template-font-size: 14px;
$textbox-icon-template-margin: 0 3px;
$textbox-outline-prepend-padding: 10px 8px 10px 12px;
$textbox-outline-append-padding: 10px 12px 10px 8px;
$textbox-filled-prepend-padding: 10px 8px 10px 12px;
$textbox-filled-append-padding: 10px 12px 10px 8px;
$textbox-prepend-float-label-top: 18px;
$textbox-prepend-focus-float-label-margin-left: 0;
$textbox-outline-prepend-multiline-label-top: -6px;
$textbox-outline-prepend-input-padding: 10px 12px 9px 0;
$textbox-outline-prepend-append-input-padding: 10px 0 9px;
$textbox-filled-prepend-label-bottom-top: 16px;
$textbox-filled-prepend-label-top: 20px;
$textbox-prepand-multiline-label-top: 15px;
$textbox-prepand-multiline-padding: 7px 8px 7px 12px;
$textbox-append-multiline-padding: 7px 12px 7px 8px;
$textbox-prepand-multiline-outline-padding: 7px 8px 7px 12px;
$textbox-prepand-multiline-filled-padding: 7px 8px 7px 12px;
$textbox-prepand-append-multiline-filled-padding: 4px 1px 1px 1px;
$textbox-prepand-multiline-filled-textarea-padding: 0 12px 5px 1px;
$textbox-prepand-multiline-filled-label-top: 18px;
$textbox-prepand-append-multiline-outline-textarea-padding: 4px 1px 1px 1px;
$textbox-prepand-multiline-outline-textarea-padding: 0 12px 5px 1px;
$textbox-append-outline-input-padding: 10px 0 9px 12px;
$textbox-append-multiline-filled-template-padding: 7px 12px 7px 8px;
$textbox-append-multiline-filled-textarea-padding: 0 1px 5px 12px;
$textbox-append-multiline-outline-textarea-padding: 0 1px 5px 12px;
$textbox-rtl-outline-prepend-padding: 10px 12px 10px 8px;
$textbox-rtl-prepand-append-input-padding: 10px 0 9px;
$textbox-rtl-append-outline-template-padding: 7px 8px 7px 12px;
$textbox-rtl-filled-prepend-padding: 10px 12px 10px 8px;
$textbox-rtl-append-filled-template-padding: 10px 8px 10px 12px;
$textbox-append-multiline-outline-template-padding: 7px 12px 7px 8px;
$textbox-rtlt-prepend-multiline-filled-template-padding: 7px 12px 7px 8px;
$textbox-rtl-multiline-append-filled-template-padding: 7px 8px 7px 12px;
$textbox-rtl-prepand-outline-input-padding: 10px 2px 9px 12px;
$textbox-rtl-append-outline-input-padding: 7px 8px 7px 12px;
$textbox-rtl-multiline-prepand-filled-textarea-padding: 0 1px 5px 12px;
$textbox-rtl-append-template-padding: 7px 8px 7px 12px;
$textbox-rtl-multiline-append-outline-textarea-padding: 0 12px 5px 1px;
$textbox-rtl-multiline-append-filled-textarea-padding: 0 12px 5px 1px;
$textbox-rtl-multiline-prepand-template-padding: 7px 12px 7px 8px;
$textbox-rtl-multiline-prepand-outline-textarea-padding: 0 1px 5px 12px;
$textbox-rtl-multiline-outline-prepand-template-padding: 7px 12px 7px 8px;
$textbox-rtl-multiline-prepand-append-outline-textarea-padding: 3px 1px 3px 1px;
$textbox-prepend-float-label-bottom: 17px;
$textbox-outline-prepend-label-bottom-top: 19px;
$textbox-outline-prepend-label-top: 17px;
$textbox-multiline-prepand-multiline-label-bottom-top: -12px;
$textbox-multiline-outline-prepand-multiline-label-bottom-top: -12px;
$textbox-multiline-filled-prepand-multiline-label-bottom-top: -7px;
$textbox-bigger-prepand-template-padding: 12px 12px 12px 14px;
$textbox-bigger-append-template-padding: 12px 14px 12px 12px;
$textbox-bigger-icon-template-font-size: 16px;
$textbox-bigger-outline-prepand-template-padding: 12px 12px 12px 14px;
$textbox-bigger-outline-append-template-padding: 12px 14px 12px 12px;
$textbox-bigger-filled-prepand-template-padding: 12px 12px 12px 14px;
$textbox-bigger-filled-append-template-padding: 12px 14px 12px 12px;
$textbox-bigger-prepand-bottom-label-top: 19px;
$textbox-bigger-prepand-top-label-top: 18px;
$textbox-bigger-outline-prepand-bottom-label-top: 20px;
$textbox-bigger-outline-prepand-top-label-top: 17px;
$textbox-bigger-filled-prepand-bottom-label-top: 20px;
$textbox-bigger-filled-prepand-top-label-top: 20px;
$textbox-bigger-rtl-prepand-template-padding: 12px 14px 12px 12px;
$textbox-bigger-rtl-outline-prepand-template-padding: 12px 14px 12px 12px;
$textbox-bigger-rtl-filled-prepand-template-padding: 12px 14px 12px 12px;
$textbox-bigger-rtl-append-template-padding: 12px 12px 12px 14px;
$textbox-bigger-rtl-outline-append-template-padding: 12px 12px 12px 14px;
$textbox-bigger-rtl-filled-append-template-padding: 12px 12px 12px 14px;
$textbox-bigger-multiline-prepand-template-padding: 12px 12px 1px 14px;
$textbox-bigger-multiline-prepand-bottom-label-top: 19px;
$textbox-bigger-multiline-prepand-top-label-top: 15px;
$textbox-bigger-multiline-outline-prepand-template-padding: 12px 12px 1px 14px;
$textbox-bigger-multiline-outline-prepand-bottom-label-top: 19px;
$textbox-bigger-multiline-outline-prepand-top-label-top: 15px;
$textbox-bigger-multiline-filled-prepand-template-padding: 12px 12px 1px 14px;
$textbox-bigger-multiline-filled-prepand-bottom-label-top: 19px;
$textbox-bigger-multiline-filled-prepand-top-label-top: 18px;
$textbox-bigger-multiline-append-template-padding: 12px 14px 1px 12px;
$textbox-bigger-multiline-outline-append-template-padding: 12px 14px 1px 12px;
$textbox-bigger-multiline-filled-append-template-padding: 12px 14px 1px 12px;
$textbox-bigger-multiline-rtl-prepand-template-padding: 12px 14px 1px 12px;
$textbox-bigger-multiline-outline-rtl-prepand-template-padding: 12px 14px 1px 12px;
$textbox-bigger-multiline-filled-rtl-prepand-template-padding: 12px 14px 1px 12px;
$textbox-bigger-multiline-rtl-append-template-padding: 12px 12px 1px 14px;
$textbox-bigger-multiline-outline-rtl-append-template-padding: 12px 12px 1px 14px;
$textbox-bigger-multiline-filled-rtl-append-template-padding: 12px 12px 1px 14px;
$textbox-icon-template-separator-color: $grey-cc;

.e-content-placeholder.e-textbox.e-placeholder-textbox {
  background-size: 300px 33px;
  min-height: $textbox-min-height;
}

.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
  padding-right: $input-focus-text-padding-right;
}

.e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
  padding-left: $input-focus-text-padding-left;
}

div.e-input-group,
span.e-input-group {
  &.e-prepend-wrapper {
    & .e-prepend-template {
      padding: $textbox-prepend-padding;
      display: flex;
      align-items: center;

      & .e-icons {
        font-size: $textbox-icon-template-font-size;
        margin: $textbox-icon-template-margin;

        &:focus-visible {
          outline: none;
        }
      }

      & .e-input-separator {
        border: 1px solid $textbox-icon-template-separator-color;
        border-width: 0 2px 0 0;
        margin: 0 5px;
        padding: 7px 0;
      }
    }

    & input.e-control {
      height: auto;
    }

    @if ($skin-name != 'material' or $skin-name != 'material-dark') {
      & input.e-input,
      &.e-input-focus input.e-input,
      &.e-append-wrapper input.e-input {
        padding-left: 1px;
      }
    }

    &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric, .e-outline, .e-filled) label.e-float-text.e-label-top {
      top: $textbox-prepend-float-label-top;
    }

    &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric, .e-outline, .e-filled) label.e-float-text.e-label-bottom {
      top: $textbox-prepend-float-label-bottom;
    }

    &.e-outline {
      &.e-multi-line-input {
        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
        &.e-float-input.e-control-wrapper.e-input-focus .e-float-text {
          @if ($skin-name == 'fluent2') {
            top: $textbox-outline-prepend-multiline-label-top !important; /* stylelint-disable-line declaration-no-important */
          }
          @else {
            top: $textbox-outline-prepend-multiline-label-top;
          }
        }
      }

      & .e-prepend-template {
        padding: $textbox-outline-prepend-padding;
      }

      & input.e-input,
      & input.e-input:focus,
      &.e-input-focus input.e-input {
        padding: $textbox-outline-prepend-input-padding;
      }

      &.e-append-wrapper input.e-input,
      &.e-append-wrapper input.e-input:focus,
      &.e-append-wrapper.e-input-focus input.e-input {
        padding: $textbox-outline-prepend-append-input-padding;
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-bottom {
        top: $textbox-outline-prepend-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-top {
        top: $textbox-outline-prepend-label-top;
      }
    }

    &.e-filled {
      @if ($skin-name == 'fluent2') {
        padding-left: 0;

        &.e-append-wrapper {
          padding: 0;
        }
      }

      & .e-prepend-template {
        padding: $textbox-filled-prepend-padding;
      }

      @if ($skin-name == 'tailwind3') {
        & input.e-input,
        & input.e-input:focus,
        &.e-input-focus input.e-input {
          padding: 7px 7px 5px 1px;
        }
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-bottom {
        top: $textbox-filled-prepend-label-bottom-top;
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-float-text.e-label-top {
        top: $textbox-filled-prepend-label-top;
      }
    }

    &.e-multi-line-input {
      & .e-prepend-template {
        display: block;
        padding: $textbox-prepand-multiline-padding;

        & .e-input-separator {
          padding: 5px 0 2px;
        }
      }

      & textarea.e-input {
        height: auto;
      }

      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind3') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 2px;
        }
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrat-light') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 2px 0;
        }
      }

      @if ($skin-name == 'FluentUI') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 6px 1px;
        }
      }

      @if ($skin-name == 'fluent2') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 1px;
        }
      }

      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 2px 0;
        }
      }

      @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: 4px 1px;
        }
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-top,
      &.e-float-input.e-control-wrapper.e-input-focus .e-float-text {
        top: $textbox-prepand-multiline-label-top;
      }

      &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom,
      &.e-float-input.e-control-wrapper.e-rtl label.e-float-text.e-label-bottom {
        top: $textbox-multiline-prepand-multiline-label-bottom-top;
      }

      &.e-filled {
        & .e-prepend-template {
          padding: $textbox-prepand-multiline-filled-padding;
        }

        &.e-append-wrapper textarea.e-input,
        &.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-append-wrapper textarea.e-input:focus {
          padding: $textbox-prepand-append-multiline-filled-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-prepand-multiline-filled-textarea-padding;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
          top: $textbox-prepand-multiline-filled-label-top;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $textbox-multiline-filled-prepand-multiline-label-bottom-top;
        }

        &.e-rtl .e-prepend-template {
          padding: $textbox-rtlt-prepend-multiline-filled-template-padding;
        }
      }

      &.e-outline {
        & .e-prepend-template {
          padding: $textbox-prepand-multiline-outline-padding;
        }

        &.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom {
          top: $textbox-multiline-outline-prepand-multiline-label-bottom-top;
        }

        @if ($skin-name == 'tailwind3') {
          &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
            top: -20px !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
          &.e-float-input.e-control-wrapper label.e-float-text.e-label-top {
            top: 15px !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &.e-append-wrapper textarea.e-input,
        &.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-append-wrapper textarea.e-input:focus {
          padding: $textbox-prepand-append-multiline-outline-textarea-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-prepand-multiline-outline-textarea-padding;
        }
      }
    }

    &.e-rtl {
      & .e-prepend-template {
        padding: $textbox-rtl-prepend-padding;
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-label-bottom {
          top: 14px;
        }

        &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric) label.e-label-top {
          top: 15px;
        }
      }

      @if ($skin-name != 'material' or $skin-name != 'material-dark') {
        & input.e-input,
        &.e-input-focus input.e-input,
        &.e-append-wrapper input.e-input {
          padding-right: 1px;
        }
      }

      &.e-outline {
        & .e-prepend-template {
          padding: $textbox-rtl-outline-prepend-padding;
        }

        & input.e-input,
        & input.e-input:focus,
        &.e-input-focus input.e-input {
          padding: $textbox-rtl-prepand-outline-input-padding;
        }

        &.e-append-wrapper input.e-input,
        &.e-append-wrapper input.e-input:focus,
        &.e-append-wrapper.e-input-focus input.e-input {
          padding: $textbox-rtl-prepand-append-input-padding;
        }
      }

      &.e-filled {
        @if ($skin-name == 'fluent2') {
          padding-right: 0;
        }

        & .e-prepend-template {
          padding: $textbox-rtl-filled-prepend-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-rtl-multiline-prepand-filled-textarea-padding;
        }
      }

      &.e-multi-line-input {
        & .e-prepend-template {
          padding: $textbox-rtl-multiline-prepand-template-padding;
        }

        @if ($skin-name == 'tailwind3') {
          & textarea.e-input {
            padding-right: 1px;
          }
        }

        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: 15px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: -8px;
          }
        }

        @if ($skin-name == 'FluentUI') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: 15px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: -10px;
          }
        }

        @if ($skin-name == 'fluent2') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: -30px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: 7px;
          }
        }

        @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
          &.e-float-input.e-control-wrapper label.e-label-top {
            top: 15px;
          }

          &.e-float-input.e-control-wrapper.e-filled .label.e-float-text.e-label-bottom {
            top: -5px;
          }
        }

        @if ($skin-name == 'bootstrap') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 4px 1px;
            padding-right: 0;
          }
        }

        @if ($skin-name == 'bootstrap4') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 4px 1px;
            padding-right: 0;
          }
          &.e-float-input.e-control-wrapper label.e-label-bottom {
            top: -7px;
          }
        }

        &.e-outline .e-prepend-template {
          padding: $textbox-rtl-multiline-outline-prepand-template-padding;
        }

        &.e-outline textarea.e-input,
        &.e-outline.e-input-focus textarea.e-input,
        &.e-outline textarea.e-input:focus {
          padding: $textbox-rtl-multiline-prepand-outline-textarea-padding;
        }

        &.e-outline.e-append-wrapper textarea.e-input,
        &.e-filled.e-append-wrapper textarea.e-input,
        &.e-outline.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-filled.e-append-wrapper.e-input-focus textarea.e-input,
        &.e-outline.e-append-wrapper textarea.e-input:focus,
        &.e-filled.e-append-wrapper textarea.e-input:focus {
          padding: $textbox-rtl-multiline-prepand-append-outline-textarea-padding;
        }
      }
    }
  }

  &.e-append-wrapper {
    & .e-append-template {
      padding: $textbox-append-padding;
      display: flex;
      align-items: center;

      & .e-icons {
        font-size: $textbox-icon-template-font-size;
        margin: $textbox-icon-template-margin;

        &:focus-visible {
          outline: none;
        }
      }

      & .e-input-separator {
        border: 1px solid $textbox-icon-template-separator-color;
        border-width: 0 2px 0 0;
        margin: 0 5px;
        padding: 7px 0;
      }
    }

    & input.e-control {
      height: auto;
    }

    &.e-outline {
      & .e-append-template {
        padding: $textbox-outline-append-padding;
      }

      & input.e-input,
      & input.e-input:focus,
      &.e-input-focus input.e-input {
        padding: $textbox-append-outline-input-padding;
      }
    }

    &.e-filled {
      @if ($skin-name == 'fluent2') {
        padding-right: 0;
      }

      & .e-append-template {
        padding: $textbox-filled-append-padding;
      }
    }

    &.e-multi-line-input {
      & .e-append-template {
        display: block;
        padding: $textbox-append-multiline-padding;

        & .e-input-separator {
          padding: 5px 0 2px;
        }
      }

      & textarea.e-input {
        height: auto;
      }

      &.e-filled {
        & .e-append-template {
          padding: $textbox-append-multiline-filled-template-padding;
        }

        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-append-multiline-filled-textarea-padding;
        }
      }

      &.e-outline {
        & .e-append-template {
          padding: $textbox-append-multiline-outline-template-padding;
        }
        & textarea.e-input,
        &.e-input-focus textarea.e-input,
        & textarea.e-input:focus {
          padding: $textbox-append-multiline-outline-textarea-padding;
        }
      }
    }

    &.e-rtl {
      & .e-append-template {
        padding: $textbox-rtl-append-template-padding;
      }

      @if ($skin-name == 'bootstrap4') {
        &.e-multi-line-input .e-append-template {
          padding: 11px 8px;
        }
      }

      &.e-outline {
        & .e-append-template {
          padding: $textbox-rtl-append-outline-template-padding;
        }

        & input.e-input,
        & input.e-input:focus,
        &.e-input-focus input.e-input {
          padding: $textbox-rtl-append-outline-input-padding;
        }
      }

      &.e-filled {
        @if ($skin-name == 'fluent2') {
          padding-left: 0;

          & input.e-input,
          & input.e-input:focus,
          &.e-input-focus input.e-input {
            padding: 14px 12px 5px;
          }
        }

        & .e-append-template {
          padding: $textbox-rtl-append-filled-template-padding;
        }
      }

      &.e-multi-line-input.e-filled .e-append-template {
        padding: $textbox-rtl-multiline-append-filled-template-padding;
      }

      &.e-multi-line-input.e-filled textarea.e-input,
      &.e-multi-line-input.e-filled.e-input-focus textarea.e-input,
      &.e-multi-line-input.e-filled textarea.e-input:focus {
        padding: $textbox-rtl-multiline-append-filled-textarea-padding;
      }

      &.e-multi-line-input.e-outline textarea.e-input,
      &.e-multi-line-input.e-outline.e-input-focus textarea.e-input,
      &.e-multi-line-input.e-outline textarea.e-input:focus {
        padding: $textbox-rtl-multiline-append-outline-textarea-padding;
      }
    }
  }
}

@if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
  .e-float-input.e-input-group.e-prepend-wrapper.e-append-wrapper:not(.e-filled) label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-input-group.e-prepend-wrapper:not(.e-filled) label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper.e-append-wrapper:not(.e-filled) label.e-float-text.e-label-top,
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper:not(.e-filled) label.e-float-text.e-label-top {
    margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
}
@else {
  .e-float-input.e-input-group.e-prepend-wrapper.e-append-wrapper label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-input-group.e-prepend-wrapper label.e-float-text.e-label-top {
    margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper.e-append-wrapper label.e-float-text.e-label-top,
  .e-float-input.e-rtl.e-input-group.e-prepend-wrapper label.e-float-text.e-label-top {
    margin-right: 0 !important; /* stylelint-disable-line declaration-no-important */
  }
}

@if ($skin-name == 'tailwind3') {
  .e-float-input.e-input-group.e-rtl.e-filled.e-prepend-wrapper.e-append-wrapper,
  .e-float-input.e-input-group.e-rtl.e-filled.e-prepend-wrapper,
  .e-float-input.e-input-group.e-rtl.e-filled.e-append-wrapper {
    padding: 0;
  }
}

.e-input-group.e-prepend-wrapper.e-input-focus input.e-input {
  padding-left: 1px;
}

.e-input-group.e-rtl.e-prepend-wrapper.e-input-focus input.e-input {
  padding-right: 1px;
}

/* stylelint-disable-line no-empty-source */

@include export-module('textbox-bigger') {

  .e-bigger .e-content-placeholder.e-textbox.e-placeholder-textbox,
  .e-bigger.e-content-placeholder.e-textbox.e-placeholder-textbox {
    background-size: 300px 40px;
    min-height: $textbox-bigger-min-height;
  }

  .e-bigger .e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
    padding-right: $input-bigger-focus-text-padding-right;
  }

  .e-bigger .e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
    padding-left: $input-bigger-focus-text-padding-left;
  }

  .e-bigger div.e-input-group,
  div.e-bigger.e-input-group,
  .e-bigger span.e-input-group,
  span.e-bigger.e-input-group {
    &.e-prepend-wrapper {
      & .e-prepend-template {
        padding: $textbox-bigger-prepand-template-padding;

        & .e-icons {
          font-size: $textbox-bigger-icon-template-font-size;
        }
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric, .e-outline, .e-filled) label.e-float-text.e-label-top {
        top: $textbox-bigger-prepand-top-label-top;
      }

      &.e-float-input.e-control-wrapper:not(.e-mask, .e-numeric, .e-outline, .e-filled) label.e-float-text.e-label-bottom {
        top: $textbox-bigger-prepand-bottom-label-top;
      }

      &.e-outline {
        & .e-prepend-template {
          padding: $textbox-bigger-outline-prepand-template-padding;
        }

        &.e-float-input.e-control-wrapper label.e-label-bottom {
          top: $textbox-bigger-outline-prepand-bottom-label-top !important; /* stylelint-disable-line declaration-no-important */
        }

        &.e-float-input.e-control-wrapper label.e-label-top {
          top: $textbox-bigger-outline-prepand-top-label-top;
        }
      }

      &.e-filled {
        @if ($skin-name == 'Material3') {
          & input.e-input,
          & input.e-input:focus,
          &.e-input-focus input.e-input {
            padding: 2px 3px 5px;
          }
        }

        @if ($skin-name == 'tailwind3') {
          & input.e-input,
          & input.e-input:focus,
          &.e-input-focus input.e-input {
            padding: 0;
          }
        }

        & .e-prepend-template {
          padding: $textbox-bigger-filled-prepand-template-padding;
        }

        &.e-float-input.e-control-wrapper label.e-label-bottom {
          top: $textbox-bigger-filled-prepand-bottom-label-top;
        }

        &.e-float-input.e-control-wrapper label.e-label-top {
          top: $textbox-bigger-filled-prepand-top-label-top;
        }
      }

      &.e-multi-line-input {
        & .e-prepend-template {
          padding: $textbox-bigger-multiline-prepand-template-padding;
        }

        &.e-float-input.e-control-wrapper label.e-label-bottom {
          top: $textbox-bigger-multiline-prepand-bottom-label-top;
        }

        &.e-float-input.e-control-wrapper label.e-label-top {
          top: $textbox-bigger-multiline-prepand-top-label-top;
        }

        @if ($skin-name == 'material' or $skin-name == 'material-dark') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 10px 0 5px;
          }

          &.e-outline textarea.e-input,
          &.e-outline.e-input-focus textarea.e-input,
          &.e-outline textarea.e-input:focus {
            padding: 7px 1px 0;
          }

          &.e-filled textarea.e-input,
          &.e-filled.e-input-focus textarea.e-input,
          &.e-filled textarea.e-input:focus {
            padding: 1px 0 5px;
          }
        }

        @if ($skin-name == 'Material3') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 10px 0 1px;
          }

          &.e-outline textarea.e-input,
          &.e-outline.e-input-focus textarea.e-input,
          &.e-outline textarea.e-input:focus {
            padding: 1px;
          }
        }

        @if ($skin-name == 'tailwind') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 5px 2px 1px;
          }
        }

        @if ($skin-name == 'tailwind3') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 11px 2px 1px;
          }

          &.e-outline textarea.e-input,
          &.e-outline.e-input-focus textarea.e-input,
          &.e-outline textarea.e-input:focus {
            padding: 2px 2px 1px;
          }

          &.e-filled textarea.e-input,
          &.e-filled.e-input-focus textarea.e-input,
          &.e-filled textarea.e-input:focus {
            padding: 0 1px 5px;
          }
        }

        @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 5px 2px 0;
          }
        }

        @if ($skin-name == 'FluentUI') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 9px 1px 1px;
          }
        }

        @if ($skin-name == 'fluent2') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 7px 1px 1px;
          }
        }

        @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 10px 1px 0;
          }
        }

        @if ($skin-name == 'bootstrap4') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 10px 1px 0;
          }
        }

        @if ($skin-name == 'bootstrap5') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 9px 1px 0;
          }
        }

        @if ($skin-name == 'bootstrap5.3') {
          & textarea.e-input,
          &.e-input-focus textarea.e-input,
          & textarea.e-input:focus {
            padding: 10px 1px 0;
          }
        }

        &.e-outline {
          & .e-prepend-template {
            padding: $textbox-bigger-multiline-outline-prepand-template-padding;
          }

          &.e-float-input.e-control-wrapper label.e-label-bottom {
            top: $textbox-bigger-multiline-outline-prepand-bottom-label-top;
          }

          &.e-float-input.e-control-wrapper label.e-label-top {
            top: $textbox-bigger-multiline-outline-prepand-top-label-top;
          }
        }

        &.e-filled {
          & .e-prepend-template {
            padding: $textbox-bigger-multiline-filled-prepand-template-padding;
          }

          &.e-float-input.e-control-wrapper label.e-label-bottom {
            top: $textbox-bigger-multiline-filled-prepand-bottom-label-top;
          }

          &.e-float-input.e-control-wrapper label.e-label-top {
            top: $textbox-bigger-multiline-filled-prepand-top-label-top;
          }
        }
      }

      &.e-rtl {
        @if ($skin-name == 'fluent2') {
          & input.e-input,
          & input.e-input:focus,
          &.e-input-focus input.e-input.e-input {
            padding: 0;
          }
        }

        & .e-prepend-template {
          padding: $textbox-bigger-rtl-prepand-template-padding;
        }

        &.e-outline .e-prepend-template {
          padding: $textbox-bigger-rtl-outline-prepand-template-padding;
        }

        &.e-filled .e-prepend-template {
          padding: $textbox-bigger-rtl-filled-prepand-template-padding;
        }

        &.e-multi-line-input {
          @if ($skin-name == 'tailwind') {
            & textarea.e-input,
            &.e-input-focus textarea.e-input,
            & textarea.e-input:focus {
              padding: 5px 2px 1px;
            }
          }

          @if ($skin-name == 'tailwind3') {
            & textarea.e-input,
            &.e-input-focus textarea.e-input,
            & textarea.e-input:focus {
              padding: 11px 2px 1px;
            }

            &.e-outline textarea.e-input,
            &.e-outline.e-input-focus textarea.e-input,
            &.e-outline textarea.e-input:focus {
              padding: 2px 2px 1px;
            }

            &.e-filled textarea.e-input,
            &.e-filled.e-input-focus textarea.e-input,
            &.e-filled textarea.e-input:focus {
              padding: 0 1px 5px;
            }
          }

          @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
            & textarea.e-input,
            &.e-outline textarea.e-input,
            &.e-filled textarea.e-input {
              padding: 5px 2px 0;
            }
          }

          @if ($skin-name == 'FluentUI') {
            & textarea.e-input,
            &.e-outline textarea.e-input,
            &.e-filled textarea.e-input {
              padding: 9px 1px 1px;
            }
          }

          @if ($skin-name == 'fluent2') {
            & textarea.e-input,
            &.e-outline textarea.e-input,
            &.e-filled textarea.e-input {
              padding: 7px 1px 1px;
            }
          }

          @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
            & textarea.e-input,
            &.e-outline textarea.e-input,
            &.e-filled textarea.e-input  {
              padding: 10px 1px 0;
            }
          }

          @if ($skin-name == 'bootstrap4') {
            & textarea.e-input,
            &.e-outline textarea.e-input,
            &.e-filled textarea.e-input  {
              padding: 10px 1px 0;
            }
          }

          @if ($skin-name == 'bootstrap5') {
            & textarea.e-input,
            &.e-outline textarea.e-input,
            &.e-filled textarea.e-input  {
              padding: 9px 1px 0;
            }
          }

          @if ($skin-name == 'bootstrap5.3') {
            & textarea.e-input,
            &.e-outline textarea.e-input,
            &.e-filled textarea.e-input  {
              padding: 10px 1px 0;
            }
          }

          & .e-prepend-template {
            padding: $textbox-bigger-multiline-rtl-prepand-template-padding;
          }

          &.e-outline .e-prepend-template {
            padding: $textbox-bigger-multiline-outline-rtl-prepand-template-padding;
          }

          &.e-filled .e-prepend-template {
            padding: $textbox-bigger-multiline-filled-rtl-prepand-template-padding;
          }
        }
      }
    }

    &.e-append-wrapper {
      & .e-append-template {
        padding: $textbox-bigger-append-template-padding;

        & .e-icons {
          font-size: $textbox-bigger-icon-template-font-size;
        }
      }

      &.e-outline {
        & .e-append-template {
          padding: $textbox-bigger-outline-append-template-padding;
        }
      }

      &.e-filled {
        & .e-append-template {
          padding: $textbox-bigger-filled-append-template-padding;
        }
      }

      &.e-multi-line-input {
        & .e-append-template {
          padding: $textbox-bigger-multiline-append-template-padding;
        }

        &.e-outline {
          & .e-append-template {
            padding: $textbox-bigger-multiline-outline-append-template-padding;
          }
        }

        &.e-filled {
          & .e-append-template {
            padding: $textbox-bigger-multiline-filled-append-template-padding;
          }

          @if ($skin-name == 'material' or $skin-name == 'material-dark') {
            &.e-float-input.e-control-wrapper label.e-label-top {
              top: 0;
            }
          }

          @if ($skin-name == 'Material3') {
            &.e-float-input.e-control-wrapper label.e-label-top {
              top: 1px;
            }
          }
        }
      }

      &.e-rtl {
        & .e-append-template {
          padding: $textbox-bigger-rtl-append-template-padding;
        }

        &.e-outline .e-append-template {
          padding: $textbox-bigger-rtl-outline-append-template-padding;
        }

        &.e-filled .e-append-template {
          padding: $textbox-bigger-rtl-filled-append-template-padding;
        }

        &.e-multi-line-input {
          & .e-append-template {
            padding: $textbox-bigger-multiline-rtl-append-template-padding;
          }

          &.e-outline .e-append-template {
            padding: $textbox-bigger-multiline-outline-rtl-append-template-padding;
          }

          &.e-filled .e-append-template {
            padding: $textbox-bigger-multiline-filled-rtl-append-template-padding;
          }
        }
      }
    }
  }

  .e-bigger.e-float-input.e-input-group.e-prepend-wrapper.e-input-focus,
  .e-bigger.e-float-input.e-input-group.e-prepend-wrapper.e-valid-input,
  .e-bigger .e-float-input.e-input-group.e-prepend-wrapper.e-input-focus,
  .e-bigger .e-float-input.e-input-group.e-prepend-wrapper.e-valid-input {
    & input.e-input,
    & textarea.e-input {
      padding-left: 0;
    }
  }

  .e-bigger.e-rtl.e-float-input.e-input-group.e-prepend-wrapper.e-input-focus,
  .e-bigger.e-rtl.e-float-input.e-input-group.e-prepend-wrapper.e-valid-input,
  .e-bigger .e-rtl.e-float-input.e-input-group.e-prepend-wrapper.e-input-focus,
  .e-bigger .e-rtl.e-float-input.e-input-group.e-prepend-wrapper.e-valid-input {
    & input.e-input,
    & textarea.e-input {
      padding-right: 0;
    }
  }
}

$textarea-VH-textarea-padding: 3px 12px 3px 12px !default;
$textarea-outline-VH-textarea-padding: 3px 12px 3px 12px !default;
$textarea-filled-VH-textarea-padding: 3px 12px 3px 12px !default;
$textarea-VV-template-padding: 7px 12px 7px 12px !default;
$textarea-outline-VV-template-padding: 7px 12px 7px 12px !default;
$textarea-filled-VV-template-padding: 7px 12px 7px 12px !default;
$textarea-HV-textarea-padding: 9px 5px 5px 5px !default;
$textarea-HV-textarea-top: -8px !default;
$textarea-outline-HV-textarea-padding: 9px 5px 5px 5px !default;
$textarea-outline-HV-label-top: -9px !default;
$textarea-filled-HV-textarea-padding: 9px 5px 5px 5px !default;
$textarea-filled-HV-label-top: -6px !default;
$textbox-icon-template-separator-color: $grey-cc;

.e-input-group.e-multi-line-input.e-auto-width {
  width: auto;
}

.e-input-group.e-multi-line-input {
  textarea.e-resize-x {
    resize: horizontal;
  }

  textarea.e-resize-y {
    resize: vertical;
  }

  textarea.e-resize-xy {
    resize: both;
  }

  textarea.e-textarea.e-resize-none {
    resize: none;
  }
}

.e-float-input .e-clear-icon:hover,
.e-float-input.e-control-wrapper .e-clear-icon:hover,
.e-input-group .e-clear-icon:hover,
.e-input-group.e-control-wrapper .e-clear-icon:hover {
  background: none;
  border: none;
}

.e-float-input:not(.e-disabled) .e-clear-icon:hover,
.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
.e-input-group:not(.e-disabled) .e-clear-icon:hover,
.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
  background: none;
}

div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-prepend-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-horizontal.e-append-wrapper {
  & .e-prepend-template,
  & .e-append-template {
    display: flex;
    align-items: start;
    flex: none;
    flex-flow: row wrap;

    & .e-input-separator {
      padding: 15px 0 0;
    }
  }

  @if ($skin-name == 'FluentUI') {
    &.e-outline textarea.e-textarea {
      padding: 4px 1px 1px;
    }

    &.e-filled textarea.e-textarea {
      padding: 4px 1px;
    }
  }
}

div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-prepend-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-horizontal.e-append-wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */

  & .e-clear-icon {
    flex-direction: row !important; /* stylelint-disable-line declaration-no-important */
    margin: 5px;
    justify-content: right;
  }

  &.e-rtl .e-clear-icon {
    justify-content: left;
  }

  & .e-prepend-template .e-input-separator,
  & .e-append-template .e-input-separator {
    padding: 3px 0 0;
  }

  & label.e-label-top,
  &.e-valid-input label.e-label-top {
    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
  }

  & textarea.e-textarea {
    padding: $textarea-VH-textarea-padding;
  }

  &.e-outline textarea.e-textarea {
    padding: $textarea-outline-VH-textarea-padding;
  }

  &.e-filled textarea.e-textarea {
    padding: $textarea-filled-VH-textarea-padding;
  }

  & .e-prepend-template,
  & .e-append-template {
    padding: $textarea-VV-template-padding;
  }
}

div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper {
  display: inline-flex;
  flex-flow: row nowrap;
  flex-direction: column !important; /* stylelint-disable-line declaration-no-important */

  & .e-clear-icon {
    flex-direction: row !important; /* stylelint-disable-line declaration-no-important */
    margin: 5px;
    justify-content: right;
  }

  &.e-rtl .e-clear-icon {
    justify-content: left;
  }

  & .e-prepend-template,
  & .e-append-template {
    display: flex;
    align-items: start;
    flex-flow: column wrap;

    & .e-icons {
      margin: 3px 0;
    }

    & .e-input-separator {
      border: 1px solid $textbox-icon-template-separator-color;
      border-width: 1px 0 0;
      margin: 5px;
      width: 100%;
      margin-inline: 0;
    }
  }

  & label.e-label-top,
  &.e-valid-input label.e-label-top {
    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
  }

  & textarea.e-textarea {
    padding: $textarea-VH-textarea-padding;
  }

  &.e-outline textarea.e-textarea {
    padding: $textarea-outline-VH-textarea-padding;
  }

  &.e-filled textarea.e-textarea {
    padding: $textarea-filled-VH-textarea-padding;
  }

  & .e-prepend-template,
  & .e-append-template {
    padding: $textarea-VV-template-padding;
  }

  &.e-outline .e-prepend-template,
  &.e-outline .e-append-template {
    padding: $textarea-outline-VV-template-padding;
  }

  &.e-filled .e-prepend-template,
  &.e-filled .e-append-template {
    padding: $textarea-filled-VV-template-padding;
  }
}

div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper,
div.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper.e-append-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-prepend-wrapper,
span.e-input-group.e-multi-line-input.e-adornment-flow-horizontal.e-adornment-orientation-vertical.e-append-wrapper {
  & .e-prepend-template,
  & .e-append-template {
    display: flex;
    align-items: center;
    flex: none;
    flex-flow: column wrap;

    & .e-icons {
      margin: 3px 0;
    }

    & .e-input-separator {
      border: 1px solid $textbox-icon-template-separator-color;
      border-width: 1px 0 0;
      margin: 5px;
      width: 100%;
      margin-inline: 0;
    }
  }

  & textarea.e-textarea,
  & textarea.e-textarea:focus,
  &.e-input-focus textarea.e-textarea {
    padding: $textarea-HV-textarea-padding;
  }

  & label.e-float-text.e-label-bottom,
  &.e-rtl label.e-float-text.e-label-bottom {
    top: $textarea-HV-textarea-top;
  }

  &.e-outline {
    & textarea.e-textarea,
    & textarea.e-textarea:focus,
    &.e-input-focus textarea.e-textarea {
      padding: $textarea-outline-HV-textarea-padding;
    }

    & label.e-float-text.e-label-bottom,
    &.e-rtl label.e-float-text.e-label-bottom {
      top: $textarea-outline-HV-label-top;
    }
  }

  &.e-filled {
    & textarea.e-textarea,
    & textarea.e-textarea:focus,
    &.e-input-focus textarea.e-textarea {
      padding: $textarea-filled-HV-textarea-padding;
    }

    & label.e-float-text.e-label-bottom,
    &.e-rtl label.e-float-text.e-label-bottom {
      top: $textarea-filled-HV-label-top;
    }
  }
}

.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-prepend-wrapper.e-rtl .e-clear-icon,
.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-append-wrapper.e-rtl .e-clear-icon,
.e-input-group.e-multi-line-input.e-adornment-orientation-vertical.e-prepend-wrapper.e-rtl .e-clear-icon,
.e-input-group.e-multi-line-input.e-adornment-orientation-vertical.e-append-wrapper.e-rtl .e-clear-icon {
  margin-left: 10px;
  float: left;
}

.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-outline .e-clear-icon,
.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper.e-outline .e-clear-icon,
.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-prepend-wrapper.e-outline .e-clear-icon,
.e-input-group.e-multi-line-input.e-adornment-flow-vertical.e-adornment-orientation-vertical.e-append-wrapper.e-outline .e-clear-icon {
  top: -30px;
}

/* stylelint-disable-line no-empty-source */

$zero-value: 0 !default;
$upload-root-font-family: $font-family !default;
$upload-element-opacity: $zero-value !default;
$upload-element-width: $zero-value !default;
$select-file-margin: $zero-value !default;
$select-file-padding: $zero-value !default;
$list-items-font-size: 15px !default;
$list-item-height: 35px !default;
$list-item-margin-right: 90px !default;
$list-item-name-width: 75% !default;
$progress-bar-wrapper-height: 5px !default;
$progress-bar-height: 90% !default;
$delete-icon-opacity: 1 !default;
$float-right: right !default;
$float-left: left !default;
$right: 100% !default;
$file-status-rtl-top-margin: 7% !default;
$remove-icon-height: 20px !default;
$remove-icon-width: 20px !default;
$remove-bigger-icon-height: 20px !default;
$remove-bigger-icon-width: 20px !default;
$remove-icon-before: 4px !default;
$file-size-top: $zero-value !default;
$action-buttons-margin: 10px !default;
$file-status-rtl: 30px !default;
$progress-inner-wrap-height: 5px !default;
$progress-inner-wrap-top: 3px !default;
$progress-bar-wrap-top: 34px !default;
$file-status-top-bigger: 35px !default;
$file-drop-rtl-smaller: -10px !default;
$file-drop-rtl-bigger: -10px !default;
$footer-height: 50px !default;
$footer-height-smaller: 30px !default;
$footer-buttons-height: 30px !default;
$footer-buttons-height-bigger: 40px !default;
$file-name-top: $zero-value !default;
$file-container-top-bigger: $zero-value !default;
$remove-icon-rtl: 20px !default;
$reload-btn-right: 36px !default;
$icons-small-ie-padding: 18px 13px 18px 23px !default;
$icons-bigger-ie-padding: 20px 17px 20px 26px !default;

// Smaller values
$list-items-font-size-smaller: 14px !default;
$list-items-height-smaller: 60px !default;
$list-item-status-margin-smaller: 8px !default;
$progress-bar-top-smaller: $zero-value !default;
$progress-bar-wrapper-height-smaller: 10px !default;
$file-status-top-smaller: 19px !default;
$list-item-status-top-smaller: 10px !default;
$file-size-top-smaller: 10px !default;
$file-size-left-smaller: 10px !default;
$file-type-top-smaller: $zero-value !default;
$file-size-rtl-right: 10px !default;
$list-item-size-top: 30px !default;
$file-container-height: 100% !default;
$progress-bar-paddding: 6px 6px !default;
$remove-icon-before-bigger: 15px !default;

// Smaller RTL values
$file-status-rtl-smaller: 21px !default;
$progress-bar-wrap-top-smaller: 23px !default;
$rtl-progress-left-smaller: -23px !default;
$remove-icon-top-bigger: 10px !default;
$file-container-top: $zero-value !default;

// themes files
$progress-bar-transition: width 2s !default;
$remove-icon-disabled-color:  $zero-value !default;
$progress-text-rtl-smaller: 0 !default;
$pause-play-button-right-value: 36px !default;
$pause-play-button-right-value-bigger: 45px !default;
$pause-play-button-right-value-bigger-rtl: 41px !default;
$file-container-left: 60px !default;
$ie-icons-position-value: 10px !default;
$ie-abort-icon-position-value: 12px !default;

//default
$upload-font-family: inherit !default;
$drop-area-font-size-smaller: 14px !default;
$drop-area-font-size: 15px !default;
$drop-text-color: $grey-dark-font !default;
$file-drop-text-color: $drop-text-color !default;
$drag-hover-border: 2px dashed $brand-primary !default;
$drop-zone-margin: 3px !default;
$header-padding: 16px 0 16px 12px !default;
$drop-area-padding-left: 15px !default;
$drop-area-padding-left-smaller: 11px !default;
$file-name-font-size-smaller: 14px !default;
$file-name-font-size: 15px !default;
$file-size-color: $grey-f5 !default;
$list-item-status-font-size-smaller: 12px !default;
$list-item-status-font-size: 13px !default;
$list-item-status-bigger-font-size: $list-item-status-font-size !default;
$list-item-margin-left-smaller: 12px !default;
$list-item-margin-left: 15px !default;
$list-line-height: normal !default;
$remove-icon-margin: 15px !default;
$remove-icon-margin-smaller: 12px !default;
$action-buttons-margin-smaller: 12px !default;
$footer-buttons-margin: 15px !default;
$list-bottom-border: 1px solid $grey-44 !default;
$delete-icon-padding-smaller: 15px !default;
$delete-icon-padding: 24px !default;
$remove-icon-right: $zero-value !default;
$remove-icon-top-smaller: 50% !default;
$remove-icon-before-left: 9px !default;
$remove-icon-before-top: 9px !default;
$remove-icon-margin-top: -24px !default;
$file-name-padding-top-smaller: 12px !default;
$file-name-padding-top: 15px !default;
$file-size-padding: 10px $zero-value !default;
$file-size-padding-smaller: 8px $zero-value !default;
$progress-bar-wrapper-width: 95% !default;
$progress-bar-top-paddding: 6px !default;
$progress-bar-bottom-paddding: 11px !default;
$progress-bar-text-right-smaller: $zero-value !default;
$progress-bar-text-top-smaller: -33px !default;
$li-min-height: 92px !default;
$inner-wrap-radius: 2px !default;
$progress-bar-radius: 1px !default;
$progress-inner-wrap-height-smaller: 4px !default;
$progress-bar-height-smaller: 4px !default;
$upload-success-color: $brand-success !default;
$upload-failure-color: $brand-danger !default;
$upload-in-progress-color: $brand-primary !default;
$progress-background-color:  $grey-e6 !default;
$remove-icon-before-left-bigger: 12px !default;
$remove-icon-before-top-bigger: 12px !default;
$list-items-height: 108px !default;
$progress-bar-text-right: 16px !default;
$progress-bar-text-top: -36px !default;
$progress-bar-wrapper-width-bigger: 95% !default;
$header-padding-rtl-bigger: 20px 15px 20px $zero-value !default;
$header-padding-bigger: 20px 0 20px 15px !default;
$margin-rtl-header: $zero-value !default;
$margin-rtl: 15px !default;
$remove-icon-rtl-bigger: $zero-value !default;
$progress-bar-width-rtl: 86% !default;
$header-padding-rtl-smaller: 16px 12px 16px $zero-value !default;
$margin-rtl-header-smaller: $zero-value !default;
$margin-rtl-smaller: 11px !default;
$left: $zero-value !default;
$rtl-progress-top: -32px !default;
$remove-icon-rtl-top-smaller: 50% !default;
$file-name-font-family: inherit !default;
$progress-text-color: $grey-f5 !default;
$remove-icon-top: 50% !default;
$clear-icon-focus-color: $grey !default;
$clear-icon-font-content: '\e96c' !default;
$delete-icon-font-content: '\e201' !default;
$abort-icon-font-content: '\e991' !default;
$reload-icon-font-content: '\e975' !default;
$remove-icon-font-size-smaller: 11px !default;
$remove-icon-font-size: 12px !default;
$delete-icon-font-size: 12px !default;
$abort-icon-font-size: 18px !default;
$delete-icon-font-size-smaller: 11px !default;
$abort-icon-font-size-smaller: 15px !default;
$upload-border: 1px solid $grey-44 !default;
$remove-icon-padding-smaller: 16px !default;
$remove-icon-margin-top-smaller: -22px !default;
$pause-icon-font-content: '\e329' !default;
$play-icon-font-content: '\e328' !default;
$remove-icon-color: $grey-cc !default;
$upload-hover-icon-color: $grey-dark-font !default;
$disabled-state: rgba($grey-dark-font, .38) !default;
$uploader-icons-hover-radius: 50% !default;

// mouse small
$header-padding-small: 12px 0 12px 12px !default;
$drop-area-small-font-size: 13px !default;
$file-small-name-font-size: 12px !default;
$file-small-name-padding-top: 12px !default;
$list-small-item-status-font-size: 12px !default;
$file-small-size-padding: 6px 0 !default;
$remove-small-icon-font-size: 10px !default;
$remove-small-icon-height: 24px !default;
$delete-small-icon-padding: 12px !default;
$remove-small-icon-width: 24px !default;
$progress-bar-bottom-paddding-small: 2px !default;
$drop-small-area-padding-left: 10px !default;
$li-min-height-small: 79px !default;
$header-padding-rtl-small: 12px 12px 12px 0 !default;

//enddefault

// form upload
$form-upload-file-name-line-height: 1.5 !default;
$form-upload-file-list-height: $list-item-height !default;
$form-upload-file-list-padding-top: $file-name-padding-top - 4 !default;
$form-upload-file-list-padding-bottom: $file-name-padding-top !default;
$form-upload-file-name-padding: 4px !default;
$form-upload-file-status-font-size: $list-item-status-font-size-smaller !default;
$form-upload-remove-icon-top: 42px !default;
$form-upload-bigger-remove-icon-top: 38px !default;
$form-upload-small-remove-icon-top: 42px !default;

// form upload - bigger
$form-upload-bigger-file-name-line-height: 1.5 !default;
$form-upload-bigger-file-list-height: $list-item-height !default;
$form-upload-bigger-file-list-padding-top: $file-name-padding-top - 4 !default;
$form-upload-bigger-file-list-padding-bottom: $file-name-padding-top !default;
$form-upload-bigger-file-name-padding: 4px !default;
$form-upload-bigger-file-status-font-size: $list-item-status-font-size !default;

// form upload - small
$form-upload-small-file-name-line-height: 1.5 !default;
$form-upload-small-file-list-height: $list-item-height !default;
$form-upload-small-file-list-padding-top: $file-small-name-padding-top - 4 !default;
$form-upload-small-file-list-padding-bottom: $file-small-name-padding-top !default;
$form-upload-small-file-name-padding: 4px !default;
$form-upload-small-file-status-font-size: $list-item-status-font-size-smaller !default;

$upload-zer-padding-margin: 0 !default;
$upload-zero-height: 0 !default;
$upload-full-height: 100% !default;
$upload-bgr-placeholder-min-height: 65px !default;
$upload-bgr-content-placeholder-min-height: 80px !default;
$upload-zero-width: 0 !default;
$upload-full-width: 100% !default;
$upload-auto-width: auto !default;
$uploader-actions-border-radius: 0 0 6px 6px !default;

// uploader layout styles
@include export-module('uploader-layout') {
  // For bigger class UI

  // For Desktop view

  .e-upload {
    width: $upload-full-width;

    #{if(&, '&', '*')}.e-control-wrapper {
      font-family: $upload-root-font-family;
    }

    .e-hidden-file-input {
      border: 0;
      height: $upload-zero-height;
      margin: $upload-zer-padding-margin;
      outline: none;
      padding: $upload-zer-padding-margin;
      text-indent: $upload-zer-padding-margin;
      visibility: hidden;
      width: $upload-zero-width;
    }

    .e-file-select-wrap {
      padding: $header-padding;

      .e-file-select,
      .e-file-select .e-uploader {
        display: inline-block;
        width: $upload-element-width;
      }

      .e-file-select .e-uploader {
        opacity: $upload-element-opacity;
      }

      #{if(&, '&', '*')} .e-file-drop {
        font-family: $upload-font-family;
        font-size: $drop-area-font-size-smaller;
        margin-left: $drop-area-padding-left-smaller;
      }
    }

    #{if(&, '&', '*')}.e-form-upload .e-upload-files {
      #{if(&, '&', '*')} .e-upload-file-list {
        min-height: $form-upload-file-list-height;
        padding-bottom: $form-upload-file-list-padding-bottom;
        padding-top: $form-upload-file-list-padding-top;

        #{if(&, '&', '*')} .e-file-container {
          top: $upload-zer-padding-margin;

          #{if(&, '&', '*')} .e-hidden-input {
            display: none;
          }

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type {
            line-height: $form-upload-file-name-line-height;
            padding-top: $form-upload-file-name-padding;
          }

          #{if(&, '&', '*')} .e-file-name.e-error,
          #{if(&, '&', '*')} .e-file-type.e-error,
          #{if(&, '&', '*')} .e-file-status.e-error {
            color: $upload-failure-color;
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            color: $file-size-color;
            display: block;
            font-size: $form-upload-file-status-font-size;
            line-height: $form-upload-file-name-line-height;
            padding-bottom: $upload-zer-padding-margin;
            padding-top: $form-upload-file-name-padding;
            position: relative;
          }
        }

        #{if(&, '&', '*')}.e-file-invalid {
          color: $upload-failure-color;

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type,
          #{if(&, '&', '*')} .e-file-status {
            color: $upload-failure-color;
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
        box-sizing: border-box;
        top: $form-upload-remove-icon-top;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }
    }

    #{if(&, '&', '*')} .e-upload-files {
      list-style-type: none;
      margin: $select-file-margin;
      padding: $select-file-padding;

      .e-icons:focus {
        @if ($skin-name == 'material' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          outline: none;
        }
      }

      .e-upload-file-list {
        font-family: $upload-font-family;
        font-size: $list-items-font-size-smaller;
        height: $upload-full-height;
        line-height: $list-line-height;
        @if $skin-name == 'tailwind' {
          line-height: $list-line-height-smaller;
        }
        min-height: $li-min-height;
        position: relative;

        .e-file-container {
          display: block;
          height: $upload-full-height;
          margin-left: $list-item-margin-left-smaller;
          margin-right: $list-item-margin-right;
          min-height: $list-item-height;
          position: relative;
          top: $file-container-top;

          .e-file-name {
            float: left;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            max-width: $list-item-name-width;
            overflow: hidden;
            padding-top: $file-name-padding-top-smaller;
            position: relative;
            text-overflow: ellipsis;
            top: $file-name-top;
            white-space: nowrap;
          }

          .e-file-name::before {
            content: attr(data-tail);
            float: right;
          }

          #{if(&, '&', '*')} .e-file-type {
            display: block;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            padding-top: $file-name-padding-top-smaller;
          }

          #{if(&, '&', '*')} .e-file-type.e-hidden {
            visibility: hidden;
          }

          #{if(&, '&', '*')} .e-file-size {
            display: block;
            font-size: $list-item-status-font-size-smaller;
            padding: $file-size-padding-smaller;
            @if $skin-name == 'tailwind' {
              font-size: $list-item-file-size-font-size-smaller;
              line-height: 18px;
            }
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            display: block;
            font-family: $upload-font-family;
            font-size: $list-item-status-font-size-smaller;
            padding-bottom: $file-name-padding-top-smaller;

            #{if(&, '&', '*')}.e-upload-progress {
              display: none;
            }
          }

          #{if(&, '&', '*')} .e-upload-progress-wrap {
            display: block;
            height: $progress-bar-wrapper-height-smaller;
            padding-bottom: $progress-bar-bottom-paddding;
            padding-top: $progress-bar-top-paddding;
            position: absolute;
            width: $progress-bar-wrapper-width;

            #{if(&, '&', '*')} .e-progress-inner-wrap {
              border-radius: $inner-wrap-radius;
              display: block;
              height: $progress-inner-wrap-height-smaller;
              width: $upload-full-width;

              #{if(&, '&', '*')} .e-upload-progress-bar {
                border-radius: $progress-bar-radius;
                display: inherit;
                height: $progress-bar-height-smaller;
              }
            }

            #{if(&, '&', '*')} .e-progress-bar-text {
              float: right;
              font-family: $upload-font-family;
              font-size: $list-item-status-font-size-smaller;
              position: relative;
              right: $progress-bar-text-right-smaller;
              top: $progress-bar-text-top-smaller;
            }
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-flex;
        font-size: $remove-icon-font-size-smaller;
        height: $remove-icon-height;
        justify-content: center;
        margin: $remove-icon-margin-smaller;
        margin-top: $remove-icon-margin-top-smaller;
        padding: $remove-icon-padding-smaller;
        position: absolute;
        right: $remove-icon-right;
        top: $remove-icon-top-smaller;
        vertical-align: middle;
        width: $remove-icon-width;

        #{if(&, '&', '*')}.e-upload-progress {
          cursor: default;
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons {
        padding: $icons-small-ie-padding;
      }

      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        right: $pause-play-button-right-value;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:hover,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):hover,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        @if $skin-name == 'Material3' {
          background: $clear-icon-focus-color;
        }
        @if $skin-name == 'fluent2' {
          color: $primary;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $clear-icon-focus-color;
        }
        border-color: transparent;
        border-radius: $uploader-icons-hover-radius;
        box-shadow: 0 0 0 transparent;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:focus,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):focus,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        border-radius: $uploader-icons-hover-radius;
      }

      #{if(&, '&', '*')} .e-file-delete-btn.e-icons {
        font-size: $delete-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }

      #{if(&, '&', '*')} .e-file-abort-btn.e-icons {
        font-size: $abort-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }
    }

    #{if(&, '&', '*')} .e-file-select-wrap .e-btn,
    #{if(&, '&', '*')} .e-upload-actions .e-btn {
      font-family: $upload-font-family;
      @if $skin-name == 'tailwind3' {
        font-weight: 600;
      }
    }

    #{if(&, '&', '*')} .e-upload-actions {
      position: relative;
      text-align: right;

      .e-file-upload-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-upload-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }

      .e-file-clear-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-clear-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      #{if(&, '&', '*')} .e-file-select-wrap {
        padding: $header-padding-rtl-smaller;

        #{if(&, '&', '*')} .e-control {
          #{if(&, '&', '*')}.e-btn {
            margin-right: $margin-rtl-header-smaller;
          }
        }

        #{if(&, '&', '*')} .e-file-drop {
          margin-left: $file-container-left;
          margin-right: $drop-area-padding-left-smaller;
          position: relative;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions {
        text-align: $float-left;

        .e-file-upload-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-upload-buttons-margin-smaller-rtl;
          }
        }

        .e-file-clear-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-clear-buttons-margin-smaller-rtl;
          }
        }
      }

      #{if(&, '&', '*')} .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container {
            height: $file-container-height;
            margin-left: $file-container-left;
            margin-right: $margin-rtl-smaller;
            position: relative;

            #{if(&, '&', '*')} .e-rtl-container {
              direction: ltr;
              float: $float-right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-file-type {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-name {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-size {
              direction: ltr;
              float: $float-right;
              position: relative;
              text-align: right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-upload-progress-wrap {
              float: $float-right;
              position: initial;
              top: $progress-bar-wrap-top-smaller;
              width: $progress-bar-width-rtl;

              #{if(&, '&', '*')} .e-progress-bar-text {
                float: $float-left;
                right: $progress-text-rtl-smaller;
                top: $rtl-progress-top;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-remove-btn,
          #{if(&, '&', '*')} .e-file-delete-btn,
          #{if(&, '&', '*')} .e-file-abort-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn,
          #{if(&, '&', '*')} .e-file-play-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $left;
              margin-left: $margin-rtl-smaller;
              margin-right: $margin-rtl-smaller;
              right: auto;
              top: $remove-icon-rtl-top-smaller;
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl-smaller;
                margin-right: $margin-icon-rtl-smaller;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-reload-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $reload-btn-right;
              right: auto;
            }
          }

          #{if(&, '&', '*')} .e-file-play-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $pause-play-button-right-value;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-disabled {
      #{if(&, '&', '*')} .e-file-drop {
        color: $disabled-state;
      }

      #{if(&, '&', '*')} .e-upload-files {
        .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container .e-file-name,
          #{if(&, '&', '*')} .e-file-container .e-file-type,
          #{if(&, '&', '*')} .e-file-container .e-file-size,
          #{if(&, '&', '*')} .e-file-container .e-file-status,
          #{if(&, '&', '*')} .e-file-container .e-file-information {
            color: $disabled-state;
          }
        }
      }
    }

    .e-content-placeholder.e-upload.e-placeholder-upload {
      background-size: 400px 65px;
      min-height: $upload-bgr-placeholder-min-height;
    }
  }

  .e-small {
    .e-upload {
      .e-file-select-wrap {
        padding: $header-padding-small;

        #{if(&, '&', '*')} .e-file-drop {
          font-size: $drop-area-small-font-size;
          margin-left: $drop-small-area-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-upload-files {
        .e-upload-file-list {
          min-height: $li-min-height-small;

          .e-file-container .e-file-name {
            font-size: $file-small-name-font-size;
            padding-top: $file-small-name-padding-top;
          }

          .e-file-container .e-file-size {
            font-size: $list-small-item-status-font-size;
            padding: $file-small-size-padding;
          }

          .e-file-container .e-file-type {
            font-size: $file-small-name-font-size;
            padding-top: $file-small-name-padding-top;
          }

          .e-file-container .e-file-status,
          .e-file-container .e-file-information {
            padding-bottom: $file-small-name-padding-top;
          }

          .e-file-container .e-upload-progress-wrap {
            padding-bottom: $progress-bar-bottom-paddding-small;
            padding-top: $progress-bar-bottom-paddding-small;
          }

          .e-file-container {
            @if $skin-name == 'FluentUI' {
              margin-left: $list-item-margin-left-small;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          font-size: $remove-small-icon-font-size;
          height: $remove-small-icon-height;
          padding: $delete-small-icon-padding;
          width: $remove-small-icon-width;
          @if $skin-name == 'FluentUI' {
            margin: $remove-icon-margin-small;
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions {
        .e-file-upload-btn {
          @if $skin-name == 'FluentUI' {
            margin: $footer-upload-buttons-margin-small;
          }
        }

        .e-file-clear-btn {
          @if $skin-name == 'FluentUI' {
            margin: $footer-clear-buttons-margin-samll;
          }
        }
      }

      #{if(&, '&', '*')}.e-rtl {
        #{if(&, '&', '*')} .e-file-select-wrap {
          padding: $header-padding-rtl-small;
        }

        #{if(&, '&', '*')} .e-upload-actions {
          .e-file-upload-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-upload-buttons-margin-rtl-small;
            }
          }

          .e-file-clear-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-clear-buttons-margin-rtl-small;
            }
          }
        }

        #{if(&, '&', '*')} .e-upload-files {
          #{if(&, '&', '*')} .e-upload-file-list {
            #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
            #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
            #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
            #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
            #{if(&, '&', '*')} .e-file-play-btn.e-icons,
            #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl-small;
                margin-right: $margin-icon-rtl-small;
              }
            }
          }
        }
      }

      #{if(&, '&', '*')}.e-form-upload .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          min-height: $form-upload-small-file-list-height;
          padding-bottom: $form-upload-small-file-list-padding-bottom;
          padding-top: $form-upload-small-file-list-padding-top;

          #{if(&, '&', '*')} .e-file-container {
            top: 0;

            #{if(&, '&', '*')} .e-hidden-input {
              display: none;
            }

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type {
              line-height: $form-upload-small-file-name-line-height;
              padding-top: $form-upload-small-file-name-padding;
            }

            #{if(&, '&', '*')} .e-file-name.e-error,
            #{if(&, '&', '*')} .e-file-type.e-error,
            #{if(&, '&', '*')} .e-file-status.e-error {
              color: $upload-failure-color;
            }

            #{if(&, '&', '*')} .e-file-status,
            #{if(&, '&', '*')} .e-file-information {
              color: $file-size-color;
              display: block;
              font-size: $form-upload-small-file-status-font-size;
              line-height: $form-upload-small-file-name-line-height;
              padding-bottom: $upload-zer-padding-margin;
              padding-top: $form-upload-small-file-name-padding;
              position: relative;
            }
          }

          #{if(&, '&', '*')}.e-file-invalid {
            color: $upload-failure-color;

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type,
            #{if(&, '&', '*')} .e-file-status {
              color: $upload-failure-color;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          box-sizing: border-box;
          top: $form-upload-small-remove-icon-top;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }
      }
    }
  }
}

// uploader theme file
// uploader layout styles
@include export-module('uploader-theme') {

  .e-upload {
    border: $upload-border;
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
      border-radius: $upload-border-radius;
    }

    #{if(&, '&', '*')} .e-file-drop {
      color: $file-drop-text-color;
      vertical-align: middle;
    }

    #{if(&, '&', '*')} .e-upload-files {
      border-top: $list-bottom-border;

      .e-upload-file-list {
        border-bottom: $list-bottom-border;

        .e-file-container {

          .e-file-name {
            color: $drop-text-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-type {
            color: $drop-text-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-size {
            color: $file-size-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status,
          .e-file-information {
            color: $drop-text-color;
            @if $skin-name == 'FluentUI' or $skin-name == 'tailwind' {
              color: $file-status-color;
            }
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status.e-upload-success {
            color: $upload-success-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status.e-upload-fails {
            color: $upload-failure-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          .e-file-status.e-validation-fails {
            color: $upload-failure-color;
            @if $skin-name == 'tailwind3' {
              font-weight: 500;
            }
          }

          #{if(&, '&', '*')} .e-progress-inner-wrap {
            @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
              background-color: $progress-background-color;
            }
            @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
              background: $progress-background-color;
            }

            #{if(&, '&', '*')} .e-upload-progress-bar {

              #{if(&, '&', '*')}.e-upload-progress {
                background: $upload-in-progress-color;
              }

              #{if(&, '&', '*')}.e-upload-success {
                background: $upload-success-color;
              }

              #{if(&, '&', '*')}.e-upload-failed {
                background: $upload-failure-color;
              }
            }
          }

          #{if(&, '&', '*')} .e-progress-bar-text {
            color: $drop-text-color;
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              color: $progress-text-color;
            }
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons {
        color: $remove-icon-color;

        #{if(&, '&', '*')}:hover {
          color: $upload-hover-icon-color;
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:focus,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):focus,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $clear-icon-focus-color;
        }
        @if $skin-name == 'Material3' {
          background: $clear-icon-focus-color;
        }
        @if $skin-name == 'fluent2' {
          color: $primary;
        }
        border-color: transparent;
        box-shadow: 0 0 0 transparent;
      }
    }
  }

  .e-upload-drag-hover {
    @if $skin-name == 'FluentUI' or $skin-name == 'tailwind' {
      border-color: transparent;
    }
  }

  .e-upload .e-upload-actions .e-file-clear-btn.e-flat:not(:hover) {
    @if $skin-name == 'tailwind' {
      /* stylelint-disable property-no-vendor-prefix */
      -webkit-tap-highlight-color: $upload-btn-tap-highlight;
      background-color: $upload-flat-btn-bgcolor;
      border-color: $upload-flat-btn-border-color;
      box-shadow: $upload-flat-btn-box-shadow;
      color: $upload-flat-btn-color;
    }
  }

  .e-upload .e-upload-actions .e-file-upload-btn.e-flat.e-primary:not(:hover) {
    @if $skin-name == 'tailwind' {
      -webkit-tap-highlight-color: $upload-btn-tap-highlight;
      background-color: $upload-btn-primary-bgcolor;
      border-color: $upload-btn-primary-border-color;
      color: $upload-btn-primary-color;
    }
  }
}

@include export-module('uploader-bootstrap-icons') {
  .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
    content: '\e96c';
  }

  .e-upload .e-upload-files .e-icons.e-file-pause-btn::before {
    content: '\e329';
  }

  .e-upload .e-upload-files .e-icons.e-file-reload-btn::before {
    content: '\e975';
  }

  .e-upload .e-upload-files .e-icons.e-file-play-btn::before {
    content: '\e328';
  }

  .e-upload .e-upload-files .e-file-delete-btn.e-icons::before {
    content: '\e201';
  }

  .e-upload .e-upload-files .e-file-abort-btn.e-icons::before {
    content: '\e991';
  }

  .e-upload .e-upload-files .e-icons.e-msie::before {
    position: relative;
    right: $ie-icons-position-value;
  }

  .e-upload .e-upload-files .e-icons.e-file-abort-icon.e-msie::before {
    right: $ie-abort-icon-position-value;
  }
}

@include export-module('uploader-bigger') {

  .e-bigger {
    .e-upload {
      width: $upload-full-width;
      @if $skin-name == 'FluentUI' {
        border-radius: $upload-border-radius-bigger;
      }

      .e-file-select-wrap {
        padding: $header-padding-bigger;

        #{if(&, '&', '*')} .e-file-drop {
          font-size: $drop-area-font-size;
          margin-left: $drop-area-padding-left;
        }
      }

      #{if(&, '&', '*')} .e-upload-files {

        .e-upload-file-list {
          font-size: $list-items-font-size;
          line-height: $list-line-height;
          min-height: $list-items-height;

          .e-file-container {
            margin-left: $list-item-margin-left;
            top: $file-container-top-bigger;
          }

          .e-file-container .e-file-name {
            font-size: $file-name-font-size;
            padding-top: $file-name-padding-top;
          }

          .e-file-container .e-file-size {
            font-size: $list-item-status-font-size;
            @if $skin-name == 'tailwind' {
              font-size: $list-item-file-size-font-size;
              line-height: 22px;
            }
            padding: $file-size-padding;
          }

          .e-file-container .e-file-type {
            font-size: $file-name-font-size;
            padding-top: $file-name-padding-top;
            top: initial;
          }

          .e-file-container .e-file-status,
          .e-file-container .e-file-information {
            font-size: $list-item-status-font-size;
            padding-bottom: $file-name-padding-top;
          }

          .e-file-container .e-upload-progress-wrap {
            height: $progress-bar-wrapper-height;

            #{if(&, '&', '*')} .e-progress-inner-wrap {
              height: $progress-inner-wrap-height;
              width: $progress-bar-wrapper-width;

              #{if(&, '&', '*')} .e-upload-progress-bar {
                height: $progress-bar-height;
              }
            }

            #{if(&, '&', '*')} .e-progress-bar-text {
              font-size: $list-item-status-font-size-smaller;
              right: $progress-bar-text-right;
              top: $progress-bar-text-top;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          box-sizing: border-box;
          font-size: $remove-icon-font-size;
          height: $remove-bigger-icon-height;
          margin: $remove-icon-margin;
          margin-top: $remove-icon-margin-top;
          padding: $delete-icon-padding;
          top: $remove-icon-top-smaller;
          width: $remove-bigger-icon-width;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons {
          padding: $icons-bigger-ie-padding;
        }

        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          right: $pause-play-button-right-value-bigger;
        }

        #{if(&, '&', '*')} .e-file-delete-btn.e-icons {
          font-size: $delete-icon-font-size;
        }

        #{if(&, '&', '*')} .e-file-abort-btn.e-icons {
          font-size: $abort-icon-font-size;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions .e-btn {
        margin-left: $list-item-margin-left;
      }

      #{if(&, '&', '*')} .e-upload-actions {

        .e-file-upload-btn {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
            margin: $footer-upload-buttons-margin;
          }
          @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
            margin: $footer-buttons-margin;
          }
        }

        .e-file-clear-btn {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
            margin: $footer-clear-buttons-margin;
          }
          @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
            margin: $footer-buttons-margin;
          }
        }
      }

      #{if(&, '&', '*')}.e-rtl {
        #{if(&, '&', '*')} .e-file-select-wrap {
          padding: $header-padding-rtl-bigger;

          #{if(&, '&', '*')} .e-control {
            #{if(&, '&', '*')}.e-btn {
              margin-right: $margin-rtl-header;
            }
          }

          #{if(&, '&', '*')} .e-file-drop {
            margin-right: $drop-area-padding-left;
          }
        }

        #{if(&, '&', '*')} .e-upload-actions {

          .e-file-upload-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-upload-buttons-margin-rtl;
            }
          }

          .e-file-clear-btn {
            @if $skin-name == 'FluentUI' {
              margin: $footer-clear-buttons-margin-rtl;
            }
          }
        }

        #{if(&, '&', '*')} .e-upload-files {
          #{if(&, '&', '*')} .e-upload-file-list {
            #{if(&, '&', '*')} .e-file-container {
              margin-left: $file-container-left;
              margin-right: $margin-rtl;

              #{if(&, '&', '*')} .e-file-status,
              #{if(&, '&', '*')} .e-file-information {
                top: $file-status-rtl;
              }

              #{if(&, '&', '*')} .e-upload-progress-wrap {

                #{if(&, '&', '*')} .e-progress-bar-text {
                  left: $progress-bar-text-right;
                  right: initial;
                }
              }
            }

            #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
            #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
            #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
            #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
            #{if(&, '&', '*')} .e-file-play-btn.e-icons,
            #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
              box-sizing: border-box;
              left: $remove-icon-rtl-bigger;
              margin-left: $margin-rtl;
              margin-right: $margin-rtl;
              padding: $delete-icon-padding;
              top: $remove-icon-top;
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl;
                margin-right: $margin-icon-rtl;
              }
            }

            #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
            #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
              color: $disabled-state;
              cursor: not-allowed;
              opacity: .4;
              pointer-events: none;
            }

            #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
            #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons {
              padding: $icons-bigger-ie-padding;
            }

            #{if(&, '&', '*')} .e-file-play-btn,
            #{if(&, '&', '*')} .e-file-reload-btn,
            #{if(&, '&', '*')} .e-file-pause-btn {
              #{if(&, '&', '*')}.e-icons {
                left: $pause-play-button-right-value-bigger-rtl;
              }
            }
          }
        }
      }

      #{if(&, '&', '*')}.e-form-upload .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          min-height: $form-upload-bigger-file-list-height;
          padding-bottom: $form-upload-bigger-file-list-padding-bottom;
          padding-top: $form-upload-bigger-file-list-padding-top;

          #{if(&, '&', '*')} .e-file-container {
            top: $upload-zer-padding-margin;

            #{if(&, '&', '*')} .e-hidden-input {
              display: none;
            }

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type {
              line-height: $form-upload-bigger-file-name-line-height;
              padding-top: $form-upload-bigger-file-name-padding;
            }

            #{if(&, '&', '*')} .e-file-name.e-error,
            #{if(&, '&', '*')} .e-file-type.e-error,
            #{if(&, '&', '*')} .e-file-status.e-error {
              color: $upload-failure-color;
            }

            #{if(&, '&', '*')} .e-file-status,
            #{if(&, '&', '*')} .e-file-information {
              color: $file-size-color;
              display: block;
              font-size: $form-upload-bigger-file-status-font-size;
              line-height: $form-upload-bigger-file-name-line-height;
              padding-bottom: $upload-zer-padding-margin;
              padding-top: $form-upload-bigger-file-name-padding;
              position: relative;
            }
          }

          #{if(&, '&', '*')}.e-file-invalid {
            color: $upload-failure-color;

            #{if(&, '&', '*')} .e-file-name,
            #{if(&, '&', '*')} .e-file-type,
            #{if(&, '&', '*')} .e-file-status {
              color: $upload-failure-color;
            }
          }
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
        #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
        #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
        #{if(&, '&', '*')} .e-file-play-btn.e-icons,
        #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
          box-sizing: border-box;
          top: $form-upload-bigger-remove-icon-top;
        }

        #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
        #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
          color: $disabled-state;
          cursor: not-allowed;
          opacity: .4;
          pointer-events: none;
        }
      }
    }
  }

  .e-bigger.e-small .e-upload {
    width: $upload-full-width;

    #{if(&, '&', '*')}.e-control-wrapper {
      font-family: $upload-root-font-family;
    }

    .e-hidden-file-input {
      border: 0;
      height: $upload-zero-height;
      margin: $upload-zer-padding-margin;
      outline: none;
      padding: $upload-zer-padding-margin;
      text-indent: $upload-zer-padding-margin;
      visibility: hidden;
      width: $upload-zero-width;
    }

    .e-file-select-wrap {
      padding: $header-padding;

      .e-file-select,
      .e-file-select .e-uploader {
        display: inline-block;
        width: $upload-element-width;
      }

      .e-file-select .e-uploader {
        opacity: $upload-element-opacity;
      }

      #{if(&, '&', '*')} .e-file-drop {
        font-family: $upload-font-family;
        font-size: $drop-area-font-size-smaller;
        margin-left: $drop-area-padding-left-smaller;
      }
    }

    #{if(&, '&', '*')}.e-form-upload .e-upload-files {
      #{if(&, '&', '*')} .e-upload-file-list {
        min-height: $form-upload-file-list-height;
        padding-bottom: $form-upload-file-list-padding-bottom;
        padding-top: $form-upload-file-list-padding-top;

        #{if(&, '&', '*')} .e-file-container {
          top: $upload-zer-padding-margin;

          #{if(&, '&', '*')} .e-hidden-input {
            display: none;
          }

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type {
            line-height: $form-upload-file-name-line-height;
            padding-top: $form-upload-file-name-padding;
          }

          #{if(&, '&', '*')} .e-file-name.e-error,
          #{if(&, '&', '*')} .e-file-type.e-error,
          #{if(&, '&', '*')} .e-file-status.e-error {
            color: $upload-failure-color;
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            color: $file-size-color;
            display: block;
            font-size: $form-upload-file-status-font-size;
            line-height: $form-upload-file-name-line-height;
            padding-bottom: $upload-zer-padding-margin;
            padding-top: $form-upload-file-name-padding;
            position: relative;
          }
        }

        #{if(&, '&', '*')}.e-file-invalid {
          color: $upload-failure-color;

          #{if(&, '&', '*')} .e-file-name,
          #{if(&, '&', '*')} .e-file-type,
          #{if(&, '&', '*')} .e-file-status {
            color: $upload-failure-color;
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons {
        box-sizing: border-box;
        top: $form-upload-remove-icon-top;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }
    }

    #{if(&, '&', '*')} .e-upload-files {
      list-style-type: none;
      margin: $select-file-margin;
      padding: $select-file-padding;

      .e-icons:focus {
        @if ($skin-name == 'material' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
          outline: none;
        }
      }

      .e-upload-file-list {
        font-family: $upload-font-family;
        font-size: $list-items-font-size-smaller;
        height: $upload-full-height;
        line-height: $list-line-height;
        @if $skin-name == 'tailwind' {
          line-height: $list-line-height-smaller;
        }
        min-height: $li-min-height;
        position: relative;

        .e-file-container {
          display: block;
          height: $upload-full-height;
          margin-left: $list-item-margin-left-smaller;
          margin-right: $list-item-margin-right;
          min-height: $list-item-height;
          position: relative;
          top: $file-container-top;

          .e-file-name {
            float: left;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            max-width: $list-item-name-width;
            overflow: hidden;
            padding-top: $file-name-padding-top-smaller;
            position: relative;
            text-overflow: ellipsis;
            top: $file-name-top;
            white-space: nowrap;
          }

          .e-file-name::before {
            content: attr(data-tail);
            float: right;
          }

          #{if(&, '&', '*')} .e-file-type {
            display: block;
            font-family: $file-name-font-family;
            font-size: $file-name-font-size-smaller;
            padding-top: $file-name-padding-top-smaller;
          }

          #{if(&, '&', '*')} .e-file-type.e-hidden {
            visibility: hidden;
          }

          #{if(&, '&', '*')} .e-file-size {
            display: block;
            font-size: $list-item-status-font-size-smaller;
            padding: $file-size-padding-smaller;
            @if $skin-name == 'tailwind' {
              font-size: $list-item-file-size-font-size-smaller;
              line-height: 18px;
            }
          }

          #{if(&, '&', '*')} .e-file-status,
          #{if(&, '&', '*')} .e-file-information {
            display: block;
            font-family: $upload-font-family;
            font-size: $list-item-status-font-size-smaller;
            padding-bottom: $file-name-padding-top-smaller;

            #{if(&, '&', '*')}.e-upload-progress {
              display: none;
            }
          }

          #{if(&, '&', '*')} .e-upload-progress-wrap {
            display: block;
            height: $progress-bar-wrapper-height-smaller;
            padding-bottom: $progress-bar-bottom-paddding;
            padding-top: $progress-bar-top-paddding;
            position: absolute;
            width: $progress-bar-wrapper-width;

            #{if(&, '&', '*')} .e-progress-inner-wrap {
              border-radius: $inner-wrap-radius;
              display: block;
              height: $progress-inner-wrap-height-smaller;
              width: $upload-full-width;

              #{if(&, '&', '*')} .e-upload-progress-bar {
                border-radius: $progress-bar-radius;
                display: inherit;
                height: $progress-bar-height-smaller;
              }
            }

            #{if(&, '&', '*')} .e-progress-bar-text {
              float: right;
              font-family: $upload-font-family;
              font-size: $list-item-status-font-size-smaller;
              position: relative;
              right: $progress-bar-text-right-smaller;
              top: $progress-bar-text-top-smaller;
            }
          }
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        align-items: center;
        box-sizing: border-box;
        cursor: pointer;
        display: inline-flex;
        font-size: $remove-icon-font-size-smaller;
        height: $remove-icon-height;
        justify-content: center;
        margin: $remove-icon-margin-smaller;
        margin-top: $remove-icon-margin-top-smaller;
        padding: $remove-icon-padding-smaller;
        position: absolute;
        right: $remove-icon-right;
        top: $remove-icon-top-smaller;
        vertical-align: middle;
        width: $remove-icon-width;

        #{if(&, '&', '*')}.e-upload-progress {
          cursor: default;
        }
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons.e-disabled,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons.e-disabled {
        color: $disabled-state;
        cursor: not-allowed;
        opacity: .4;
        pointer-events: none;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-delete-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-abort-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-pause-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-msie.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-msie.e-icons {
        padding: $icons-small-ie-padding;
      }

      #{if(&, '&', '*')} .e-file-pause-btn.e-icons,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons {
        right: $pause-play-button-right-value;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):hover,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:hover,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):hover,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        @if $skin-name == 'Material3' {
          background: $clear-icon-focus-color;
        }
        @if $skin-name == 'fluent2' {
          color: $primary;
        }
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          background-color: $clear-icon-focus-color;
        }
        border-color: transparent;
        border-radius: $uploader-icons-hover-radius;
        box-shadow: 0 0 0 transparent;
      }

      #{if(&, '&', '*')} .e-file-remove-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-delete-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-pause-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-play-btn.e-icons:not(.e-upload-progress):focus,
      #{if(&, '&', '*')} .e-file-reload-btn.e-icons:focus,
      #{if(&, '&', '*')} .e-file-abort-btn.e-icons:not(.e-disabled):focus,
      #{if(&, '&', '*')} .e-clear-icon-focus {
        border-radius: $uploader-icons-hover-radius;
      }

      #{if(&, '&', '*')} .e-file-delete-btn.e-icons {
        @if $skin-name == 'tailwind3' {
          font-size: $delete-icon-font-size-bigger-smaller;
        }
        font-size: $delete-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }

      #{if(&, '&', '*')} .e-file-abort-btn.e-icons {
        font-size: $abort-icon-font-size-smaller;
        opacity: $delete-icon-opacity;
      }
    }

    #{if(&, '&', '*')} .e-file-select-wrap .e-btn,
    #{if(&, '&', '*')} .e-upload-actions .e-btn {
      font-family: $upload-font-family;
    }

    #{if(&, '&', '*')} .e-upload-actions {
      position: relative;
      text-align: right;

      .e-file-upload-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-upload-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }

      .e-file-clear-btn {
        @if ($skin-name == 'bootstrap4' or $skin-name == 'FluentUI') {
          margin: $action-clear-buttons-margin-smaller;
        }
        @else if ($skin-name != 'bootstrap4' and $skin-name != 'FluentUI') {
          margin: $action-buttons-margin-smaller;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      #{if(&, '&', '*')} .e-file-select-wrap {
        padding: $header-padding-rtl-smaller;

        #{if(&, '&', '*')} .e-control {
          #{if(&, '&', '*')}.e-btn {
            margin-right: $margin-rtl-header-smaller;
          }
        }

        #{if(&, '&', '*')} .e-file-drop {
          margin-left: $file-container-left;
          margin-right: $drop-area-padding-left-smaller;
          position: relative;
        }
      }

      #{if(&, '&', '*')} .e-upload-actions {
        text-align: $float-left;

        .e-file-upload-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-upload-buttons-margin-smaller-rtl;
          }
        }

        .e-file-clear-btn {
          @if $skin-name == 'FluentUI' {
            margin: $action-clear-buttons-margin-smaller-rtl;
          }
        }
      }

      #{if(&, '&', '*')} .e-upload-files {
        #{if(&, '&', '*')} .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container {
            height: $file-container-height;
            margin-left: $file-container-left;
            margin-right: $margin-rtl-smaller;
            position: relative;

            #{if(&, '&', '*')} .e-rtl-container {
              direction: ltr;
              float: $float-right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-file-type {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-name {
              float: $float-right;
            }

            #{if(&, '&', '*')} .e-file-size {
              direction: ltr;
              float: $float-right;
              position: relative;
              text-align: right;
              width: $file-container-height;
            }

            #{if(&, '&', '*')} .e-upload-progress-wrap {
              float: $float-right;
              position: initial;
              top: $progress-bar-wrap-top-smaller;
              width: $progress-bar-width-rtl;

              #{if(&, '&', '*')} .e-progress-bar-text {
                float: $float-left;
                right: $progress-text-rtl-smaller;
                top: $rtl-progress-top;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-remove-btn,
          #{if(&, '&', '*')} .e-file-delete-btn,
          #{if(&, '&', '*')} .e-file-abort-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn,
          #{if(&, '&', '*')} .e-file-play-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $left;
              margin-left: $margin-rtl-smaller;
              margin-right: $margin-rtl-smaller;
              right: $upload-auto-width;
              top: $remove-icon-rtl-top-smaller;
              @if $skin-name == 'FluentUI' {
                margin-left: $margin-icon-rtl-smaller;
                margin-right: $margin-icon-rtl-smaller;
              }
            }
          }

          #{if(&, '&', '*')} .e-file-reload-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $reload-btn-right;
              right: $upload-auto-width;
            }
          }

          #{if(&, '&', '*')} .e-file-play-btn,
          #{if(&, '&', '*')} .e-file-reload-btn,
          #{if(&, '&', '*')} .e-file-pause-btn {
            #{if(&, '&', '*')}.e-icons {
              left: $pause-play-button-right-value;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-disabled {
      #{if(&, '&', '*')} .e-file-drop {
        color: $disabled-state;
      }

      #{if(&, '&', '*')} .e-upload-files {
        .e-upload-file-list {
          #{if(&, '&', '*')} .e-file-container .e-file-name,
          #{if(&, '&', '*')} .e-file-container .e-file-type,
          #{if(&, '&', '*')} .e-file-container .e-file-size,
          #{if(&, '&', '*')} .e-file-container .e-file-status,
          #{if(&, '&', '*')} .e-file-container .e-file-information {
            color: $disabled-state;
          }
        }
      }
    }

    .e-content-placeholder.e-upload.e-placeholder-upload {
      background-size: 400px 65px;
      min-height: $upload-bgr-placeholder-min-height;
    }

    .e-bigger .e-content-placeholder.e-upload.e-placeholder-upload,
    .e-bigger.e-content-placeholder.e-upload.e-placeholder-upload {
      background-size: 400px 80px;
      min-height: $upload-bgr-content-placeholder-min-height;
    }
  }

  .e-upload .e-upload-actions,
  .e-bigger.e-small .e-upload .e-upload-actions {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' or $skin-name == 'tailwind' {
      background-color: $content-bg-color-alt1;
      border-radius: $uploader-actions-border-radius;
    }
    @if $skin-name == 'FluentUI' {
      background-color: $transparent;
      border-radius: $uploader-actions-border-radius;
    }
  }
}

$dialog-btn-bg-bgcolor: transparent !default;
$dialog-btn-box-shadow: none !default;
$dialog-resize-handler-width: 15px;
$dialog-resize-handler-height: 15px;
$dialog-resize-handler-position: 0;
$resize-hanlder-bottom-rtl: 2px;

//default
$dialog-bg-color: $grey-base !default;
$dialog-icon-color: $grey-cc !default;
$dialog-active-icon-color: $grey-dark-font !default;
$dialog-close-icon-normal-opacity: initial !default;
$dialog-close-icon-active-opacity: initial !default;
$dialog-header-border: 1px solid $grey-99 !default;
$dialog-hover-icon-color: $grey-dark-font !default;
$dialog-icon-bg-normal: transparent !default;
$dialog-header-bg-color: $grey-base !default;
$dialog-content-bg-color: $grey-base !default;
$dialog-footer-bg-color: $grey-base !default;
$dialog-shadow-color: 0 6px 12px rgba($base-font, .5) !default;
$dialog-header-font-color: $grey-dark-font !default;
$dialog-border: 1px solid $grey-99 !default;
$dialog-content-font-color: $grey-dark-font !default;
$dialog-overlay-bg-color: rgba($shadow, .8) !default;
$dialog-closeicon-btn-hover-color: transparent !default;
$dialog-closeicon-btn-active-color: transparent !default;
$dialog-footer-content-border-top: 1px solid $grey-99 !default;
$dialog-alert-footer-content-border-top: 1px solid $grey-99 !default;
$dialog-btn-border-color: transparent !default;
$dialog-btn-bg-color: transparent !default;
$dialog-overlay-opacity: .5 !default;
$dialog-active-btn-border-color: transparent !default;
$dialog-hover-focus-btn-bg-color: transparent !default;
$dialog-active-btn-bg-color: transparent !default;

//enddefault
//start
$dialog-close-button-left: -5px !default;
$dialog-close-button-right: -4px !default;
$dialog-close-icon-content: '\e361' !default;
$dialog-close-icon-font-size: 12px !default;
$dialog-close-icon-button-padding: 0 13px !default;
$dialog-bigger-close-icon-button-padding: 0 2px !default;
$dialog-bigger-close-icon-font-size: 12px !default;
$dialog-header-font-size: 18px !default;
$dialog-header-font-weight: 500 !default;
$footer-content-border-radius: 6px !default;
$header-content-border-radius: 6px 6px 0 0 !default;
$dialog-content-font-size: 14px !default;
$dialog-header-line-height: 1.25 !default;
$dialog-content-line-height: 1.25 !default;
$dialog-content-padding-top: 15px !default;
$dialog-rtl-content-padding-top: -15px !default;
$dialog-bigger-content-padding-top: 18.75px !default;
$dialog-content-font-weight: 300 !default;
$dialog-device-content-font-size: 15px !default;
$dialog-border-radius: 6px !default;
$dialog-header-icon-hover-border-radius: 50% !default;
$dialog-close-button-height: 20px !default;
$dialog-close-button-width: 20px !default;
$dialog-header-content-padding: 15px !default;
$dialog-content-padding: 15px !default;
$dialog-footer-content-padding: 15px !default;
$dialog-bigger-header-content-padding: 18.75px !default;
$dialog-bigger-content-padding: 18.75px !default;
$dialog-bigger-footer-content-padding: 18.75px !default;
$dialog-bigger-footer-button-margin-left: 10px !default;
$dialog-footer-button-margin-left: 8px !default;
$dialog-footer-button-margin-right: 8px !default;
$dialog-bigger-footer-button-margin-right: 10px !default;
$dialog-close-icon-margin-left: -7px !default;
$dialog-close-icon-height: 16px !default;
$dialog-close-icon-width: 12px !default;
$dialog-bigger-header-content-font-size: 18px !default;
$dialog-bigger-content-font-size: 14px !default;
$dialog-bigger-close-icon-height: 16px !default;
$dialog-bigger-close-icon-width: 12px !default;
$dialog-close-icon-top: -4px !default;
$dialog-bigger-close-icon-top: -5px !default;
$dialog-bigger-close-icon-margin-left: -8px !default;
$dialog-bigger-close-icon-margin-right: -1px !default;
$dialog-bigger-close-button-bottom: 7px !default;
$dialog-bigger-close-button-height: 25px !default;
$dialog-bigger-close-button-left: -7px !default;
$dialog-bigger-close-button-width: 25px !default;
$dialog-headericon-bottom: 5px !default;
$dialog-enable-resize-padding-bottom: 15px !default;
$dialog-bigger-rtl-footer-btn-margin-left: 0 !default;
$dialog-zero-padding-margin: 0 !default;
$dialog-alert-popup-margin: 30px !default;
$dialog-full-width: 100% !default;
$dialog-header-width: 80% !default;
$dialog-max-height: 98% !default;
$dialog-full-height: 100% !default;
$dialog-mobile-width: 600px !default;
$dialog-auto-width: auto !default;

//endstart

@include export-module('dialog-layout') {
  /* stylelint-disable property-no-vendor-prefix */
  .e-dialog {
    -webkit-flex-direction: column;
    @if $skin-name == 'fluent2' {
      border: $dialog-outer-border;
    }
    @else {
      border: $dialog-border;
    }
    border-radius: $dialog-border-radius;
    flex-direction: column;
    width: $dialog-full-width;

    &.e-popup {
      width: $dialog-full-width;
    }

    &.e-dlg-resizable {
      padding-bottom: $dialog-enable-resize-padding-bottom;
      touch-action: none;
    }

    .e-dlg-header-content {
      border-radius: $header-content-border-radius;
      @if $skin-name != 'bootstrap5' {
        line-height: $dialog-header-line-height;
      }
    }

    .e-dlg-header-content + .e-dlg-content {
      padding-top: $dialog-content-padding-top;
    }

    .e-btn .e-btn-icon.e-icon-dlg-close {
      font-size: $dialog-close-icon-font-size;
      width: $dialog-close-icon-width;
      @if $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' {
        top: $dialog-header-close-icon-top;
        left: $dialog-header-close-icon-left;
        position: inherit;
      }
      @if $skin-name == 'tailwind3' {
        margin-left: -4px;
        margin-top: -22px;
      }
    }

    .e-dlg-header {
      display: block;
      font-size: $dialog-header-font-size;
      font-weight: $dialog-header-font-weight;
      overflow: hidden;
      text-overflow: ellipsis;
      user-select: none;
      vertical-align: top;
      white-space: nowrap;
      width: $dialog-header-width;
      @if $skin-name == 'Material3' or $skin-name == 'fluent2' {
        line-height: $dialog-normal-header-line-height;
      }

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

    .e-dlg-modal {
      position: fixed;
    }

    /* stylelint-disable declaration-no-important */
    .e-scroll-disabled {
      overflow: hidden !important;
    }
    /* stylelint-enable declaration-no-important */

    .e-dlg-content {
      display: block;
      flex: 1 1 auto;
      font-size: $dialog-content-font-size;
      font-weight: $dialog-content-font-weight;
      line-height: $dialog-content-line-height;
      overflow: auto;
      overflow-x: hidden;

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

    .e-footer-content {
      border-bottom-left-radius: $footer-content-border-radius;
      border-bottom-right-radius: $footer-content-border-radius;
      @if $skin-name != 'tailwind3' {
        border-top: $dialog-footer-content-border-top;
      }
      bottom: $dialog-zero-padding-margin;
      display: block;
      right: $dialog-zero-padding-margin;
      width: $dialog-full-width;

      &.e-hide {
        display: none;
      }

      & .e-footer-btn {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    &.e-dlg-tooltip .e-footer-content {
      display: flex;
      justify-content: flex-end;
      flex-wrap: nowrap;
    }

    .e-footer-content {
      text-align: right;
    }

    .e-resize-handle {
      height: $dialog-resize-handler-height;
      position: absolute;
      width: $dialog-resize-handler-width;

      &.e-south-east {
        bottom: $dialog-resize-handler-position;
        cursor: nwse-resize;
        right: $dialog-resize-handler-position;
      }

      &.e-south-west {
        bottom: $dialog-resize-handler-position;
        cursor: nesw-resize;
        left: $dialog-resize-handler-position;
        transform: rotate(90deg);
      }

      &.e-north-east {
        cursor: nesw-resize;
        right: $dialog-resize-handler-position;
        top: $dialog-resize-handler-position;
        transform: rotate(-90deg);
      }

      &.e-north-west {
        cursor: nwse-resize;
        left: $dialog-resize-handler-position;
        top: $dialog-resize-handler-position;
        transform: rotate(180deg);
      }
    }

    .e-south,
    .e-north,
    .e-east,
    .e-west {
      background-color: transparent;
      background-repeat: repeat;
      overflow: visible;
      position: absolute;
    }

    .e-east,
    .e-west {
      cursor: ew-resize;
    }

    .e-south,
    .e-north {
      cursor: ns-resize;
    }

    &.e-blazor-hidden {
      left: $dialog-zero-padding-margin;
      position: absolute;
    }
  }

  .e-dialog {
    & .e-dlg-header-content {
      @if $skin-name != 'tailwind3' {
        border-bottom: $dialog-header-border;
      }
      padding: $dialog-header-content-padding;
    }

    & .e-dlg-content {
      padding: $dialog-content-padding;
      @if $skin-name == 'Material3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
        border-radius: $dialog-border-radius;
      }
    }

    & .e-footer-content {
      padding: $dialog-footer-content-padding;
    }

    @if $skin-name == 'FluentUI' {
      &.e-dlg-resizable {
        & .e-footer-content {
          padding-bottom: $dialog-footer-content-padding-bottom;
        }
      }
    }

    & .e-footer-content .e-btn {
      margin-left: $dialog-footer-button-margin-left;
    }
  }

  .e-alert-dialog .e-footer-content{
    border-top: $dialog-alert-footer-content-border-top;
  }

  .e-rtl .e-footer-content .e-btn {
    margin-right: $dialog-footer-button-margin-right;
  }

  .e-dialog.e-draggable > .e-dlg-header-content {
    cursor: move;
  }

  .e-dialog.e-device.e-draggable.e-popup-open {
    touch-action: none;
  }

  .e-dialog {
    max-height: $dialog-max-height;
    max-width: $dialog-full-width;
    min-width: 240px;
    position: absolute;
  }

  .e-rtl .e-footer-content .e-btn {
    margin-left: $dialog-zero-padding-margin;
  }

  .e-rtl .e-footer-content {
    text-align: left;
  }

  .e-rtl .e-footer-content {
    text-align: left;
  }

  .e-dialog.e-rtl .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    float: left;
    left: $dialog-zero-padding-margin;
    right: $dialog-close-button-left;

    & .e-icon-dlg-close {
      @if ($skin-name == 'bootstrap5') {
        top: -5px;
        left: 5px;
      }
    }
  }

  .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    background-color: $dialog-btn-bg-color;
    border-color: $dialog-btn-border-color;
    border-radius: $dialog-header-icon-hover-border-radius;
    bottom: $dialog-headericon-bottom;
    float: right;
    height: $dialog-close-button-height;
    left: $dialog-close-button-left;
    position: relative;
    width: $dialog-close-button-width;
    @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      padding: $dialog-header-btn-padding;
    }
    @if $skin-name == 'Material3' {
      padding: $zero-value;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      line-height: $dialog-one-line-height;
    }
  }

  .e-rtl {
    &.e-dialog {
      .e-resize-handle {
        &.e-south-west {
          bottom: $dialog-resize-handler-position;
          cursor: sw-resize;
          direction: ltr;
          left: $dialog-resize-handler-position;
          text-align: initial;
          transform: rotate(90deg);
        }
      }
    }
  }

  /* stylelint-disable declaration-no-important */
  .e-dlg-target.e-scroll-disabled {
    overflow: hidden !important;
  }
  /* stylelint-enable declaration-no-important */
  .e-dlg-overlay {
    height: $dialog-full-height;
    left: $dialog-zero-padding-margin;
    opacity: $dialog-overlay-opacity;
    position: fixed;
    top: $dialog-zero-padding-margin;
    transition: opacity .15s linear;
    width: $dialog-full-width;

    &.e-fade {
      opacity: 0;
    }
  }

  .e-dlg-overflow-hidden {
    overflow: auto;
  }

  /* stylelint-disable declaration-no-important */
  .e-dlg-fullscreen {
    height: $dialog-full-height !important;
    left: $dialog-zero-padding-margin !important;
    width: $dialog-full-width !important;
  }
  /* stylelint-enable declaration-no-important */

  .e-popup.e-popup-open.e-dialog {
    display: inline-flex;
  }

  .e-dlg-container {
    align-items: flex-start;
    display: none;
    height: $dialog-full-height;
    left: $dialog-zero-padding-margin;
    position: fixed;
    top: $dialog-zero-padding-margin;
    width: $dialog-full-width;
  }

  .e-dlg-center-center {
    -webkit-align-items: center;
    -webkit-justify-content: center;
    align-items: center;
    justify-content: center;
  }

  .e-dlg-left-center {
    -webkit-align-items: center;
    -webkit-justify-content: flex-start;
    align-items: center;
    justify-content: flex-start;
  }

  .e-dlg-right-center {
    -webkit-align-items: center;
    -webkit-justify-content: flex-end;
    align-items: center;
    justify-content: flex-end;
  }

  .e-dlg-left-top {
    -webkit-align-items: flex-start;
    -webkit-justify-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .e-dlg-right-top {
    -webkit-align-items: flex-start;
    -webkit-justify-content: flex-end;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .e-dlg-center-top {
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    align-items: center;
    flex-direction: column;
  }

  .e-dlg-left-bottom {
    -webkit-align-items: flex-end;
    -webkit-justify-content: flex-start;
    align-items: flex-end;
    justify-content: flex-start;
  }

  .e-dlg-right-bottom {
    -webkit-align-items: flex-end;
    -webkit-justify-content: flex-end;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .e-dlg-center-bottom {
    -webkit-align-items: center;
    -webkit-flex-direction: column;
    -webkit-justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
  }

  .e-dialog .e-btn.e-dlg-closeicon-btn:hover,
  .e-dialog .e-btn.e-dlg-closeicon-btn:focus,
  .e-dialog .e-btn.e-dlg-closeicon-btn:active {
    @if $skin-name != 'fluent2' {
      background-color: $dialog-hover-focus-btn-bg-color;
      border-color: $dialog-active-btn-border-color;
      box-shadow: 0 0 0 transparent;
    }
    @if $skin-name == 'bootstrap5.3' {
      background-color: $content-bg-color;
      border-color: $dialog-active-btn-border-color;
    }
  }

  .e-dialog .e-btn.e-dlg-closeicon-btn:active {
    @if $skin-name != 'fluent2' {
      background-color: $dialog-active-btn-bg-color;
    }
  }

  .e-dialog .e-btn.e-dlg-closeicon-btn:focus,
  .e-dialog .e-btn.e-dlg-closeicon-btn:active {
    @if $skin-name == 'bootstrap5.3' {
      background-color: $content-bg-color;
      border-color: $dialog-active-btn-border-color;
      box-shadow: $primary-shadow-focus;
    }
  }
}

.e-content-placeholder.e-dialog.e-placeholder-dialog {
  background-size: 400px 210px;
  min-height: 210px;
}

@media (min-width: 768px) {
  .e-alert-dialog.e-dialog.e-popup,
  .e-confirm-dialog.e-dialog.e-popup {
    margin: $dialog-alert-popup-margin;
    width: $dialog-mobile-width;
  }
}

@media (max-width: 768px) {
  .e-alert-dialog.e-dialog.e-popup,
  .e-confirm-dialog.e-dialog.e-popup {
    margin: $dialog-alert-popup-margin;
    width: $dialog-auto-width;
  }
}

@media (max-width: 768px) {
  .e-prompt-dialog.e-dialog.e-popup,
  .e-prompt-dialog.e-dialog.e-popup {
    margin: $dialog-alert-popup-margin;
    width: $dialog-auto-width;
  }
}

@media (min-width: 768px) {
  .e-prompt-dialog.e-dialog.e-popup,
  .e-prompt-dialog.e-dialog.e-popup {
    margin: $dialog-alert-popup-margin;
    width: $dialog-mobile-width;
  }
}

.e-dlg-ref-element {
  display: none;
}

.e-dialog .e-footer-content {
  box-sizing: border-box;
}

@if $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
  .e-dialog .e-dlg-content .e-richtexteditor .e-rte-container .e-rte-tb-float {
    top: $dialog-rtl-content-padding-top !important; /* stylelint-disable-line declaration-no-important */
  }
}

@include export-module('dialog-theme') {
  .e-dialog {
    background-color: $dialog-bg-color;
    box-shadow: $dialog-shadow-color;
  }

  .e-dlg-overlay {
    background-color: $dialog-overlay-bg-color;
  }

  .e-footer-content {
    background-color: $dialog-footer-bg-color;

    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or  $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
        background: $dialog-footer-btn-bg-color;
        border-color: $dialog-footer-btn-border-color;
        color: $dialog-footer-btn-color;
      }

      .e-btn:hover.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
        @if $skin-name == 'Material3' {
          background: $dialog-footer-flat-hover-btn-bg-color;
          color: rgba($primary);
        }
        @else {
          background: $dialog-footer-hover-btn-color;
          @if $skin-name == 'fluent2' {
            color: $dialog-footer-hover-btn;
          }
        }
      }
    }

    @if $skin-name == 'Material3' {
      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus-visible,
      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus,
      .e-btn.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus,
      .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):focus-visible {
        background: $dialog-footer-flat-hover-btn-bg-color;
        box-shadow: $shadow-focus-ring1;
      }
    }

    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
        background: $dialog-footer-flat-btn-bg-color;
        border-color: $dialog-footer-flat-btn-border-color;
        color: $dialog-footer-flat-btn-content-color;
      }
      .e-btn:hover.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
        background: $dialog-footer-flat-hover-btn-bg-color;
        @if $skin-name == 'fluent2' {
          color: $dialog-footer-flat-btn-hover-color;
        }
      }
    }
  }

  .e-dlg-header,
  .e-dlg-header * {
    color: $dialog-header-font-color;
    font-size: $dialog-header-font-size;
    font-weight: $dialog-header-font-weight;
  }

  .e-dlg-content {
    color: $dialog-content-font-color;
  }

  .e-device .e-dlg-content {
    font-size: $dialog-device-content-font-size;
  }

  .e-dlg-header-content {
    background-color: $dialog-header-bg-color;
  }

  .e-dlg-content {
    background-color: $dialog-content-bg-color;
  }

  .e-icon-dlg-close {
    color: $dialog-icon-color;
  }

  .e-dialog .e-btn.e-dlg-closeicon-btn:hover span {
    @if $skin-name != 'tailwind3'
    {
      color: $dialog-active-icon-color;
    }
  }

  .e-dialog button.e-btn.e-dlg-closeicon-btn:hover .e-btn-icon {
    @if $skin-name =='tailwind3'
      {
      color: $dialog-hover-icon-color;
    }
  }

  .e-dialog .e-btn.e-dlg-closeicon-btn:active span,
  .e-dialog .e-btn.e-dlg-closeicon-btn:focus span {
    border-radius: $dialog-header-icon-hover-border-radius;
    color: $dialog-active-icon-color;
    opacity: 1;
  }

  .e-icon-dlg-close:active {
    border-radius: $dialog-header-icon-hover-border-radius;
    color: $dialog-active-icon-color;
    opacity: 1;
  }

  .e-icon-dlg-close:hover {
    color: $dialog-hover-icon-color;
  }

  .e-dlg-header-content .e-dlg-closeicon-btn:not(:hover) {
    @if $skin-name == 'fluent2' {
      color: $dialog-icon-color;
    }
  }

  .e-dlg-header-content .e-dlg-closeicon-btn:hover {
    @if $skin-name != 'fluent2' {
      background-color: $dialog-closeicon-btn-hover-color;
    }
  }

  .e-dlg-header-content .e-dlg-closeicon-btn:active {
    background-color: $dialog-closeicon-btn-active-color;
    @if $skin-name == 'FluentUI' {
      outline: none;
    }
    @if $skin-name == 'fluent2' {
      color: $dialog-active-icon-color;
    }
  }

  .e-south-east {
    color: $dialog-icon-color;
  }

  .e-rtl .e-south-east {
    color: transparent;
  }

  .e-rtl .e-south-west {
    color: $dialog-icon-color;
  }

  .e-south-west,
  .e-north-east,
  .e-north-west {
    color: transparent;
  }

  @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'bootstrap4'  {
    .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn.e-ripple {
      overflow: visible;
    }
  }
}

@include export-module('dialog-bootstrap-icons') {
  .e-dialog {
    .e-icon-dlg-close::before {
      content: '\e361';
      position: relative;
    }

    .e-icon-dlg-close {
      opacity: $dialog-close-icon-normal-opacity;
    }

    .e-icon-dlg-close:active {
      opacity: $dialog-close-icon-active-opacity;
    }

    .e-icon-dlg-close:hover {
      opacity: $dialog-close-icon-active-opacity;
    }

    .e-south-east::before,
    .e-south-west::before,
    .e-north-east::before,
    .e-north-west::before {
      content: '\eb08';
    }
  }
}

@include export-module('dialog-bigger') {

  .e-bigger.e-dialog,
  #{if(&, '&', '*')}.e-bigger .e-dialog {
    #{if(&, '&', '*')} .e-dlg-header-content {
      padding: $dialog-bigger-header-content-padding;
      @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
        height: $dialog-bigger-header-content-height;
      }
      @if $skin-name == 'bootstrap5' {
        line-height: inherit;
      }
    }

    & .e-dlg-header {
      font-size: $dialog-bigger-header-content-font-size;
      @if $skin-name == 'Material3' {
        line-height: $dialog-bigger-header-line-height;
      }
      @if $skin-name == 'material' or $skin-name == 'material-dark' {
        line-height: 36px;
      }
    }

    & .e-dlg-content {
      font-size: $dialog-bigger-content-font-size;
      padding: $dialog-bigger-content-padding;
    }

    & .e-footer-content {
      padding: $dialog-bigger-footer-content-padding;
    }

    & .e-footer-content .e-btn {
      @if $skin-name != 'fluent2' {
        margin-left: $dialog-bigger-footer-button-margin-left;
      }
    }

    & .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
      @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' and $skin-name != 'material' and $skin-name != 'material-dark' {
        bottom: $dialog-bigger-close-button-bottom;
        left: $dialog-bigger-close-button-left;
      }
      height: $dialog-bigger-close-button-height;
      width: $dialog-bigger-close-button-width;
      @if $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
        padding: $dialog-bigger-header-btn-padding;
      }
      @if $skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' {
        padding: $zero-value;
      }
      @if $skin-name == 'highcontrast' {
        padding: 3px 11px;
      }
    }

    .e-btn .e-btn-icon.e-icon-dlg-close {
      font-size: $dialog-bigger-close-icon-font-size;
      width: $dialog-bigger-close-icon-width;
      @if $skin-name == 'bootstrap5' {
        top: $dialog-auto-width;
        left: $dialog-auto-width;
      }
      @if $skin-name == 'tailwind3' {
        margin-top: $dialog-btn-icon-close-margin-top;
      }
    }
  }

  .e-bigger.e-rtl .e-footer-content .e-btn,
  .e-bigger .e-rtl .e-footer-content .e-btn {
    margin-left: $dialog-bigger-rtl-footer-btn-margin-left;
    margin-right: $dialog-bigger-footer-button-margin-right;
  }

  .e-bigger .e-dlg-header-content + .e-dlg-content {
    padding-top: $dialog-bigger-content-padding-top;
  }

  .e-bigger .e-content-placeholder.e-dialog.e-placeholder-dialog,
  .e-bigger.e-content-placeholder.e-dialog.e-placeholder-dialog {
    background-size: 400px 220px;
    min-height: 220px;
  }
}

//default
$hscroll-skin: 'bootstrap' !default;
$hscroll-default-bg: $grey-darker !default;
$hscroll-nav-nrml-minheight: 40px !default;
$hscroll-nav-bgr-minheight: 50px !default;
$hscroll-mob-nav-nrml-width: 50px !default;
$hscroll-device-arrow-width: 50px !default;
$hscroll-device-arrow-size: 14px !default;
$hscroll-device-arrow-icon-size: 12px !default;
$hscroll-device-arrow-size-bigger: 14px !default;
$hscroll-overlay-opacity: .5 !default;
$hscroll-device-arrow-border-color: $default-border-color !default;
$hscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
$hscroll-device-arrow-bg: $hscroll-default-bg !default;
$hscroll-device-arrow-border-size: 0 !default;
$hscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .6) !default;
$hscroll-device-arrow-color: $default-icon-color !default;
$hscroll-overlay-bg: $hscroll-default-bg !default;
$hscroll-overlay-start: rgba($hscroll-overlay-bg, .0001) !default;
$hscroll-overlay-end: rgba($hscroll-overlay-bg, $hscroll-overlay-opacity) !default;
$hscroll-right-bg: linear-gradient(to right, $hscroll-overlay-start 0, $hscroll-overlay-end 100%) !default;
$hscroll-left-bg: linear-gradient(to right, $hscroll-overlay-end 0, $hscroll-overlay-start 100%) !default;
$hscroll-border-size: $border-size !default;
$hscroll-border-type: solid !default;
$hscroll-hover-font: $hover-font-color !default;
$hscroll-active-font-color: $active-font-color !default;
$hscroll-nav-nrml-width: 40px !default;
$hscroll-nav-bgr-left: 50px !default;
$hscroll-nav-bgr-right: 50px !default;
$hscroll-nav-bgr-width: 50px !default;
$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
$hscroll-box-shadow: none !default;
$hscroll-border-none: 0 !default;
$hscroll-item-height: inherit !default;
$hscroll-item-line-height: normal !default;

$hscroll-default-icon-color: $grey-dark-font !default;
$hscroll-hover-bg: $grey-light !default;
$hscroll-press-bg: $grey-dark !default;
$hscroll-default-border: $grey-99 !default;
$hscroll-focus-border: 0 !default;
$hscroll-active-border: 0 !default;
$hscroll-hover-border: 0 !default;
$hscroll-hover-border-color: '' !default;
$hscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;

$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
$hscroll-nav-focus-border: $hscroll-focus-border !default;
$hscroll-nav-active-color: $hscroll-default-icon-color !default;

@mixin hscroll-btn-animation {
  content: '';
}

@mixin hscroll-btn-animation-after {
  content: '';
}

//enddefault

@include export-module('h-scroll') {

  /*! h-scroll layout */

  #{&}.e-hscroll {
    display: block;
    position: relative;
    width: 100%;

    &.e-rtl {

      &.e-scroll-device {
        padding-left: $hscroll-mob-nav-nrml-width;
        padding-right: initial;

        .e-scroll-nav {
          transform: skewX(-16deg) translateX(-6px);
        }

        .e-scroll-overlay {

          &.e-scroll-right-overlay {
            left: $hscroll-device-arrow-width;
            right: auto;
            transform: skewX(-16deg) translateX(-6px);
          }

          &.e-scroll-left-overlay {
            left: auto;
            right: 0;
          }
        }
      }
    }

    &:not(.e-scroll-device) {
      padding: $hscroll-nrml-padding;
    }

    &.e-scroll-device {
      padding-right: $hscroll-mob-nav-nrml-width;

      .e-scroll-nav {
        transform: skewX(-16deg) translateX(6px);
        width: $hscroll-device-arrow-width;

        .e-nav-arrow {
          font-size: $hscroll-device-arrow-size;
          transform: skewX(16deg);
        }
      }

      .e-scroll-overlay {
        opacity: $hscroll-overlay-opacity;
        pointer-events: none;
        position: absolute;
        top: 0;
        z-index: 100;

        &.e-scroll-right-overlay {
          left: auto;
          right: $hscroll-device-arrow-width;
          transform: skewX(-16deg) translateX(6px);
        }

        &.e-scroll-left-overlay {
          left: 0;
          right: auto;
        }
      }
    }

    &.e-overlay {

      .e-hscroll-content {

        > * {
          pointer-events: none;
        }
      }
    }

    > * {
      height: $hscroll-item-height;
      line-height: $hscroll-item-line-height;
    }

    .e-hscroll-content {
      display: inline-block;
      height: $hscroll-item-height;
      position: relative;

      > * {
        pointer-events: auto;
      }
    }

    &.e-rtl {

      .e-scroll-nav  {

        &.e-scroll-right-nav {
          left: 0;
          right: auto;
        }

        &.e-scroll-left-nav {
          left: auto;
          right: 0;
        }
      }
    }

    .e-scroll-nav  {
      align-items: center;
      bottom: 0;
      cursor: pointer;
      display: flex;
      min-height: $hscroll-nav-nrml-minheight;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: $hscroll-nav-nrml-width;

      &.e-scroll-left-nav {
        left: 0;
      }

      &.e-scroll-right-nav {
        right: 0;
      }

      &.e-ie-align {
        display: table;
      }
    }

    .e-nav-arrow {
      position: relative;
    }

    .e-nav-arrow.e-icons {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 100%;
      font-size: $hscroll-device-arrow-icon-size;
    }

    .e-hscroll-bar {

      .e-hscroll-content {

        .e-overlay {
          pointer-events: none;
        }
      }
    }
  }
}

@include export-module('h-scroll-theme') {

  /*! h-scroll theme */
  #{&}.e-hscroll {

    .e-scroll-nav .e-icons {
      color: $hscroll-default-icon-color;
    }

    &.e-rtl {

      &.e-scroll-device {

        .e-scroll-nav.e-scroll-right-nav {
          border-color: $hscroll-device-arrow-border-color;
          box-shadow: $hscroll-device-arrow-rtl-box-shadow;
        }
      }
    }

    &.e-scroll-device {

      .e-scroll-nav.e-scroll-right-nav {
        background-color: $hscroll-device-arrow-bg;
        border-color: $hscroll-device-arrow-border-color;
        border-width: $hscroll-device-arrow-border-size;
        box-shadow: $hscroll-device-arrow-box-shadow;

        .e-nav-arrow {
          color: $hscroll-device-arrow-color;
        }
      }
    }

    .e-scroll-overlay {
      background-color: transparent;
      background-repeat: repeat-x;

      &.e-scroll-left-overlay {
        background-image: $hscroll-left-bg;
      }

      &.e-scroll-right-overlay {
        background-image: $hscroll-right-bg;
      }
    }

    &.e-rtl {

      .e-scroll-nav  {
        background: $hscroll-default-bg;

        &.e-scroll-left-nav {
          border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
          border-right: $hscroll-border-none;
        }

        &.e-scroll-right-nav {
          border-left: $hscroll-border-none;
          border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
        }

        &:hover {
          background: $hscroll-hover-bg;
          border: $hscroll-hover-border;
          color: $hscroll-hover-font;

          &:active {
            background: $hscroll-nav-hover-press-bg;
          }
        }
      }
    }

    &:not(.e-scroll-device) {

      .e-scroll-nav  {

        &:hover {
          background: $hscroll-hover-bg;
          color: $hscroll-hover-font;

          .e-icons {
            color: $hscroll-nav-hover-icons-color;
          }
        }

        &:focus {
          background: $hscroll-nav-focus-bg-color;
          border: $hscroll-nav-focus-border;
          color: $hscroll-hover-font;

          .e-icons {
            color: $hscroll-nav-hover-icons-color;
          }
        }

        &:active {
          background: $hscroll-press-bg;
          border: $hscroll-active-border;
          box-shadow: $hscroll-active-box-shadow;
          color: $hscroll-active-font-color;

          .e-icons {
            color: $hscroll-nav-active-color;
          }
        }
      }
    }

    .e-scroll-nav  {
      background: $hscroll-default-bg;
      @if $skin-name == 'fluent2' {
        &.e-overlay {
          &.e-scroll-left-nav,
          &.e-scroll-right-nav {
            opacity: inherit;
            border-right: $hscroll-border-none;
            border-left: $hscroll-border-none;
            .e-nav-arrow {
              &.e-icons {
                color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
              }
            }
          }
        }
      }

      &.e-scroll-left-nav {
        border-right: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
      }

      &.e-scroll-right-nav {
        border-left: $hscroll-border-size $hscroll-border-type $hscroll-default-border;
      }

      &::after {
        @include hscroll-btn-animation;
      }

      &:active::after {
        @include hscroll-btn-animation-after;
      }
    }
  }
}

@include export-module('hscroll-bootstrap-dark-icons') {

  /*! hscroll icons */
  #{&}.e-hscroll {

    &.e-rtl {

      &.e-scroll-device {

        .e-nav-right-arrow::before {
          content: '\e904';
        }

        .e-nav-left-arrow::before {
          content: '\e913';
        }
      }

      .e-nav-left-arrow::before {
        content: '\e848';
      }

      .e-nav-right-arrow::before {
        content: '\e84b';
      }
    }

    &.e-scroll-device {

      .e-nav-right-arrow::before {
        content: '\e913';
      }

      .e-nav-left-arrow::before {
        content: '\e904';
      }
    }

    .e-nav-left-arrow::before {
      content: '\e84b';
      line-height: normal;
    }

    .e-nav-right-arrow::before {
      content: '\e848';
      line-height: normal;
    }
  }
}

@include export-module('h-scroll-bigger') {
  .e-bigger #{&}.e-hscroll,
  #{&}.e-hscroll.e-bigger {
    min-height: $hscroll-nav-bgr-minheight;

    &:not(.e-scroll-device) {
      padding: $hscroll-bgr-padding;
    }

    &.e-scroll-device {
      padding-right: $hscroll-nav-bgr-width;
    }

    &.e-rtl.e-scroll-device {
      padding-left: $hscroll-nav-bgr-width;
      padding-right: initial;
    }

    .e-nav-arrow.e-icons {
      font-size: $hscroll-device-arrow-size-bigger;
    }

    &.e-rtl .e-scroll-overlay.e-scroll-right-overlay {
      left: $hscroll-nav-bgr-left;
    }

    .e-scroll-overlay {

      &.e-scroll-right-overlay {
        right: $hscroll-nav-bgr-right;
      }
    }

    .e-scroll-nav {
      min-height: $hscroll-nav-bgr-minheight;
      width: $hscroll-nav-bgr-width;
    }
  }
}

//default
$vscroll-skin: 'bootstrap' !default;
$vscroll-nav-nrml-height: 40px !default;
$vscroll-hover-font: $hover-font-color !default;
$vscroll-active-font-color: $active-font-color !default;
$vscroll-border-size: $border-size !default;
$vscroll-border-type: solid !default;

$vscroll-default-bg: $grey-f8 !default;
$vscroll-nav-nrml-minheight: 40px !default;
$vscroll-nav-bgr-minheight: 50px !default;
$vscroll-nav-nrml-width: 40px !default;
$vscroll-nav-bgr-width: 50px !default;
$vscroll-nrml-padding: 0 $vscroll-nav-nrml-width !default;
$vscroll-bgr-padding: $vscroll-nav-bgr-width 0 !default;
$vscroll-box-shadow: none !default;
$vscroll-overlay-opacity: .5 !default;
$vscroll-overlay-bg: $grey-white !default;
$vscroll-overlay-start: rgba($vscroll-overlay-bg, 0) !default;
$vscroll-overlay-end: rgba($vscroll-overlay-bg, 1) !default;
$vscroll-right-bg: linear-gradient(-270deg, $vscroll-overlay-start 0%, $vscroll-overlay-end 100%) !default;
$vscroll-left-bg:  linear-gradient(-270deg, $vscroll-overlay-end 0%, $vscroll-overlay-start 100%) !default;

$vscroll-device-arrow-box-shadow: -4px 0 8px 0 rgba($shadow, .06) !default;
$vscroll-device-arrow-rtl-box-shadow: 4px 0 8px 0 rgba($shadow, .06) !default;
$vscroll-device-arrow-bg: $grey-f8 !default;
$vscroll-device-arrow-border-size: 1px !default;
$vscroll-device-arrow-border-color: $grey-cc !default;
$vscroll-device-arrow-color: $brand-primary !default;
$vscroll-device-arrow-size: 14px !default;
$vscroll-device-arrow-width: 52px !default;

$vscroll-default-icon-color: $grey-light-font !default;
$vscroll-hover-bg: $grey-e6 !default;
$vscroll-press-bg: $grey-e6 !default;
$vscroll-default-border: $grey-cc !default;
$vscroll-focus-border: 0 !default;
$vscroll-active-border: 0 !default;
$vscroll-hover-border: 0 !default;
$vscroll-hover-border-color: transparent !default;
$vscroll-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;

@mixin vscroll-btn-animation {
  content: '';
}

@mixin vscroll-btn-animation-after {
  content: '';
}

//enddefault

@include export-module('v-scroll') {

  /*! v-scroll layout */

  #{&}.e-vscroll {
    display: block;
    position: relative;
    width: inherit;

    &.e-rtl {

      &.e-scroll-device {

        .e-scroll-nav {
          transform: skewX(-16deg) translateX(-6px);
        }

        .e-scroll-overlay {

          &.e-scroll-down-overlay {
            left: $vscroll-device-arrow-width;
            right: auto;
            transform: skewX(-16deg) translateX(-6px);
          }

          &.e-scroll-up-overlay {
            left: auto;
            right: 0;
          }
        }
      }
    }

    &:not(.e-scroll-device) {
      padding: $vscroll-nrml-padding;
    }

    &.e-scroll-device {

      .e-scroll-nav {
        transform: skewX(-16deg) translateX(6px);
        width: $vscroll-device-arrow-width;
        z-index: 1001;

        .e-nav-arrow {
          font-size: $vscroll-device-arrow-size;
          transform: skewX(16deg);
        }
      }

      .e-scroll-overlay {
        opacity: $vscroll-overlay-opacity;
        pointer-events: none;
        position: absolute;
        top: 0;
        z-index: 100;

        &.e-scroll-down-overlay {
          left: auto;
          right: $vscroll-device-arrow-width;
          transform: skewX(-16deg) translateX(6px);
        }

        &.e-scroll-up-overlay {
          left: 0;
          right: auto;
        }
      }
    }

    > * {
      height: inherit;
    }

    .e-vscroll-content {
      display: inline-block;
      height: auto;
      position: relative;
      width: 100%;

      > * {
        pointer-events: auto;
      }
    }

    &.e-rtl {

      .e-scroll-nav  {

        &.e-scroll-up-nav {
          left: auto;
          right: 0;
        }

        &.e-scroll-down-nav {
          left: 0;
          right: auto;
        }
      }
    }

    .e-scroll-nav  {
      align-items: center;
      cursor: pointer;
      display: flex;
      height: $vscroll-nav-nrml-height;
      overflow: hidden;
      position: absolute;
      width: 100%;

      &.e-scroll-up-nav {
        top: 0;
      }

      &.e-scroll-down-nav {
        bottom: 0;
      }

      &.e-ie-align {
        display: table;
      }
    }

    .e-nav-arrow {
      position: relative;
    }

    .e-nav-arrow.e-icons {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 100%;
    }
  }
}

@include export-module('v-scroll-theme') {

  /*! v-scroll theme */
  #{&}.e-vscroll {

    .e-icons {
      color: $vscroll-default-icon-color;
    }

    & .e-menu-item.e-selected .e-icons {
      @if $skin-name == 'fluent2' {
        color: $flyout-text-color-selected;
      }
    }

    &.e-rtl {

      &.e-scroll-device {

        .e-scroll-nav.e-scroll-right-nav {
          border-color: $vscroll-device-arrow-border-color;
          box-shadow: $vscroll-device-arrow-rtl-box-shadow;
        }
      }
    }

    &.e-scroll-device {

      .e-scroll-nav.e-scroll-right-nav {
        background-color: $vscroll-device-arrow-bg;
        border-color: $vscroll-device-arrow-border-color;
        border-width: $vscroll-device-arrow-border-size;
        box-shadow: $vscroll-device-arrow-box-shadow;

        .e-nav-arrow {
          color: $vscroll-device-arrow-color;
        }
      }
    }

    .e-scroll-overlay {
      background-color: transparent;
      background-repeat: repeat-x;

      &.e-scroll-up-overlay {
        background-image: $vscroll-left-bg;
      }

      &.e-scroll-down-overlay {
        background-image: $vscroll-right-bg;
      }
    }

    &.e-rtl {

      .e-scroll-nav  {
        background: $vscroll-default-bg;

        &:hover {
          background: $vscroll-hover-bg;
          border: $vscroll-hover-border;
          border-color: $vscroll-hover-border-color;
          color: $vscroll-hover-font;
        }
      }
    }

    &:not(.e-scroll-device) {

      .e-scroll-nav  {

        &:hover {
          background: $vscroll-hover-bg;
          border: $vscroll-hover-border;
          color: $vscroll-hover-font;
        }

        &:focus {
          background: $vscroll-hover-bg;
          border: $vscroll-focus-border;
          border-color: $vscroll-hover-border-color;
          color: $vscroll-hover-font;
        }

        &:active {
          background: $vscroll-press-bg;
          border: $vscroll-active-border;
          box-shadow: $vscroll-active-box-shadow;
          color: $vscroll-active-font-color;
        }
      }
    }

    .e-scroll-nav  {
      background: $vscroll-default-bg;

      &.e-scroll-up-nav {
        border-bottom: $vscroll-border-size $vscroll-border-type $vscroll-default-border;
      }

      &.e-scroll-down-nav {
        border-top: $vscroll-border-size $vscroll-border-type $vscroll-default-border;
      }

      &::after {
        @include vscroll-btn-animation;
      }

      &:active::after {
        @include vscroll-btn-animation-after;
      }
    }
  }
}

@include export-module('vscroll-bootstrap-icons') {

  /*! vscroll icons */
  #{&}.e-vscroll {

    &.e-scroll-device {

      .e-nav-up-arrow::before {
        content: '\e85e';
      }

      .e-nav-down-arrow::before {
        content: '\e84f';
      }
    }

    .e-nav-up-arrow::before {
      content: '\e910';
      line-height: normal;
    }

    .e-nav-down-arrow::before {
      content: '\e916';
      line-height: normal;
    }
  }
}

@include export-module('v-scroll-bigger') {
  .e-bigger #{&}.e-vscroll,
  #{&}.e-vscroll.e-bigger {

    &:not(.e-scroll-device) {
      padding: $vscroll-bgr-padding;
    }

    .e-icons {
      font-size: 18px;
    }

    &.e-rtl .e-scroll-overlay.e-scroll-down-overlay {
      left: $vscroll-nav-bgr-width;
    }

    .e-scroll-overlay {

      &.e-scroll-down-overlay {
        right: $vscroll-nav-bgr-width;
      }
    }

    .e-scroll-nav {
      height: $vscroll-nav-bgr-width;
    }
  }
}

$tbar-skin: 'bootstrap' !default;
$tbar-default-bg: $grey-darker !default;
$tbar-items-default-bg: $tbar-default-bg !default;
$tbar-pop-bg: $tbar-default-bg !default;
$tbar-zero-value: 0 !default;
$tbar-pop-btn-bgr-padding: $tbar-zero-value 4px !default;
$tbar-pop-btn-nrml-padding: $tbar-zero-value 4px !default;
$tbar-separator-bgr-minheight: 36px !default;
$tbar-btn-bgr-minwidth: 0 !default;
$tbar-separator-vertical-bgr-mrgn: 5px 10px !default;
$tbar-btn-nrml-minwidth: 0 !default;
$tbar-btn-weight: 400 !default;
$tbar-border-radius: $border-radius !default;
$tbar-separator-nrml-minheight: 27px !default;
$tbar-separator-nrml-height: calc(100% - 15px) !default;
$tbar-separator-vertical-nrml-mrgn: 3px 7.5px !default;
$tbar-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
$tbar-border-nav-type: solid !default;
$tbar-popup-vertical-border-width: $border-size 0 0 0 !default;
$tbar-popup-vertical-rtl-border-width: 0 0 $border-size 0 !default;
$tbar-separator-size: $border-size !default;
$tba-horizontal-separator: 0 $tbar-separator-size 0 0 !default;
$tba-vertical-separator: 0 0 $tbar-separator-size 0 !default;
$tbar-btn-box-shadow: none !default;
$tbar-hover-font: $hover-font-color !default;
$tbar-press-font: $active-font-color !default;
$tbar-active-font-color: $active-font-color !default;
$tbar-default-font-overlay: $default-font-color !default;
$tbar-default-icon-overlay: $default-icon-color !default;
$tbar-popup-rtl-border-width: 0 $border-size 0 0 !default;
$tbar-popup-border-width: 0 0 0 $border-size !default;
$tbar-select-font: $tbar-hover-font !default;
$tbar-pressed-font: $tbar-hover-font !default;
$tbar-hover-bg: $grey !default;
$tbar-pressed-bg: $grey-dark !default;
$tbar-btn-txt-font-size: 14px !default;
$tbar-hover-border-color:  $grey-white !default;
$tbar-focus-bg: $grey-dark !default;
$tbar-focus-border-color: $grey-8c !default;
$tbar-press-bg: $grey-dark !default;
$tbar-btn-press-bg: $tbar-press-bg !default;
$tbar-press-border-color: $tbar-hover-border-color !default;
$tbar-nrml-size: 40px !default;
$tbar-nrml-height: 40px !default;
$tbar-bgr-size: 50px !default;
$tbar-bgr-height: 50px !default;
$tbar-nrml-items-size: 39px !default;
$tbar-bgr-items-size: 49px !default;
$tbar-border-type: solid !default;
$tbar-default-border: $grey-99 !default;
$tbar-border-size: 1px !default;
$tbar-box-shadow: none !default;
$tbar-separator-size: 1px !default;
$tbar-separator-border: $tbar-default-border !default;
$tbar-separator-border-type: solid !default;
$tbar-default-icon-color: $grey-dark-font !default;
$tbar-default-font: $grey-dark-font !default;
$tbar-nav-press-border: 0 !default;
$tbar-nav-hover-border: 1px solid $grey-99 !default;
$tbar-nav-focus-border: 0 !default;
$tbar-pressed-border: transparent !default;
$tbar-btn-border: 1px solid transparent !default;
$tbar-nav-pressed-box-shadow: inset 0 4px 5px rgba($grey-base, .35) !default;
$tbar-pop-box-shadow:  0 6px 12px rgba(0, 0, 0, .175) !default;
$tbar-pop-radius: 4px !default;
$tbar-item-pop-bg-color: transparent !default;
$tbar-radius: 4px !default;
$tbar-border-nav-active-type: none !default;
$tbar-btn-pop-nrml-minheight: 40px !default;
$tbar-btn-pop-bgr-minheight: 40px !default;
$tbar-pop-icon-bgr-padding: 0 12px 0 15px !default;
$tbar-pop-icon-nrml-padding: 0 12px 0 15px !default;
$tbar-pop-btn-txt-nrml-pad: 0 12px 0 15px !default;
$tbar-pop-btn-txt-bgr-pad: 0 12px 0 15px !default;
$tbar-nav-nrml-width: 38px !default;
$tbar-nav-bgr-width: 38px !default;
$tbar-popup-padding: 5px 0 !default;
$tbar-btn-icn-nrml-padding: 0 0 0 12px !default;
$tbar-btn-icn-bgr-padding: 0 0 0 12px !default;
$tbar-rtl-btn-icn-nrml-padding: 0 12px 0 0 !default;
$tbar-rtl-btn-icn-bgr-padding: 0 12px 0 0 !default;
$tbar-btn-icn-right-bgr-padding: 0 12px 0 0 !default;
$tbar-btn-icn-right-nrml-padding: 0 12px 0 0 !default;
$tbar-rtl-btn-icn-right-nrml-padding: 0 0 0 12px !default;
$tbar-rtl-btn-icn-right-bgr-padding: 0 0 0 12px !default;
$btn-txt-nrml-padding: 0 12px 0 6px !default;
$btn-txt-bgr-padding: 0 12px 0 6px !default;
$btn-rtl-txt-nrml-padding: 0 6px 0 12px !default;
$btn-rtl-txt-bgr-padding: 0 6px 0 12px !default;
$tbar-item-pop-nrml-padding: 0 !default;
$tbar-item-pop-bgr-padding: 0 !default;
$tbar-item-nrml-mrgn: 15px !default;
$tbar-item-bgr-mrgn: 15px !default;
$tbar-btn-nrml-mrgn: 0 !default;
$tbar-btn-nrml-minheight: 32px !default;
$tbar-btn-nrml-line-height: 27px !default;
$tbar-btn-icon-nrml-line-height: 25px !default;
$tbar-btn-bgr-minheight: 34px !default;
$tbar-btn-bgr-line-height: 34px !default;
$tbar-btn-icon-bgr-line-height: 34px !default;
$tbar-btn-font-size: 16px !default;
$tbar-btn-icon-font-size: 16px !default;
$tbar-btn-border-radius: 4px !default;
$tbar-btn-pressed-box-shadow: inset 0 4px 5px rgba($grey-base, .35) !default;
$tbar-btn-icon-bgr-width: 24px !default;
$tbar-btn-icon-nrml-width: 27px !default;
$tbar-btn-icon-nrml-height: 25px !default;
$tbar-right-item-line-height: 24px !default;
$tbar-item-bgr-padding: 2.5px 5px !default;
$tbar-nrml-item-size: 0 !default;
$tbar-item-height: auto !default;
$tbar-bgr-item-size: 0 !default;
$tbar-item-bgr-padding: 3.5px 2.5px !default;
$tbar-item-nrml-padding: 4px 2.5px !default;
$tbar-item-nrml-minwidth: 30px !default;
$tbar-separator-bgr-height: calc(100% - 12px) !default;
$tbar-separator-bgr-mrgn: 6px 6px !default;
$tbar-separator-nrml-mrgn: 5.5px 6px !default;
$tbar-btn-bgr-padding: 0 7px !default;
$tbar-btn-bgr-focus-padding: 0 7px !default;
$tbar-btn-nrml-padding: 1px 2.5px !default;
$tbar-icons-bgr-font-size: 14px !default;
$tbar-multirow-items-mrgn-bigger: 15px !default;
$tbar-multirow-items-mrgn-small: 15px !default;
$tbar-multirow-item-top-btm-mrgn-bigger: 0 !default;
$tbar-multirow-item-top-btm-mrgn-small: 0 !default;
$tbar-bgr-btn-text-font-size: 14px !default;
$tbar-bgr-btn-icon-font-size: 16px !default;
$tbar-bgr-btn-focus-padding: 0 6px !default;
$tbar-nrml-btn-border-radius: 4px !default;
$tbar-nrml-btn-focus-padding: 0 2.5px !default;
$tbar-nrml-btn-focus-outline: 0 !default;
$tbar-btn-icons-focus-color: $grey-dark-font !default;
$tbar-btn-text-focus-color: $grey-dark-font !default;
$tbar-btn-focus-border-color: $tbar-focus-border-color !default;
$tbar-btn-hover-border-size: $tbar-border-size !default;
$tbar-btn-hover-active-icons-color: $grey-dark-font !default;
$tbar-btn-hover-active-text-color: $grey-dark-font !default;
$tbar-btn-overlay-opacity: .5 !default;
$tbar-btn-active-bg: $grey-dark !default;
$tbar-btn-active-icons-color: $grey-dark-font !default;
$tbar-btn-active-text-color: $grey-dark-font !default;
$tbar-btn-text-color: $grey-dark-font !default;
$tbar-btn-pressed-text-color: $grey-light-font !default;
$tbar-btn-pressed-focus-box-shadow: inset 0 4px 5px rgba($grey-base, .4) !default;
$tbar-btn-pressed-bg: $grey-dark !default;
$tbar-flat-btn-active-box-shadow: inset 0 4px 5px rgba($grey-base, .4) !default;
$tbar-ext-btn-focus-padding: 0 1.5px !default;
$tbar-ext-btn-icon-padding: 0 !default;
$tbar-ext-btn-icon-font-size: 14px !default;
$tbar-ext-btn-focus-box-shadow: none !default;
$tbar-ext-btn-hover-border-color: $tbar-hover-border-color !default;
$tbar-ext-btn-border: 0 !default;
$tbar-popup-icon-font-size: 12px !default;
$tbar-popup-text-btn-icon-padding: 0 !default;
$tbar-popup-bgr-text-btn-icon-padding: 0 !default;
$tbar-popup-btn-border: 0 !default;
$tbar-popup-btn-border-radius: 0 !default;
$tbar-popup-bgr-height: auto !default;
$tbar-popup-bgr-btn-icon-font-size: 16px !default;
$tbar-popup-bgr-btn-text-font-size: 14px !default;
$tbar-popup-nav-active-border-bottom-right-radius: 0 !default;
$tbar-popup-nav-active-bg: $tbar-default-bg !default;
$tbar-popup-nav-active-icons-color: $grey-dark-font !default;
$tbar-popup-nav-hover-bg: $tbar-hover-bg !default;
$tbar-popup-nav-hover-color: $tbar-hover-font !default;
$tbar-popup-nav-hover-icons-color: $grey-dark-font !default;
$tbar-popup-nav-hover-border-color: $tbar-default-border !default;
$tbar-popup-nav-hover-border-size: 0 0 0 1px !default;
$tbar-popup-nav-hover-active-bg: $tbar-hover-bg !default;
$tbar-popup-nav-hover-active-border-color: $tbar-default-border !default;
$tbar-popup-nav-hover-active-border-size:  0 0 0 1px !default;
$tbar-popup-nav-focus-bg: $tbar-hover-bg !default;
$tbar-popup-nav-focus-color: $tbar-hover-font !default;
$tbar-popup-nav-focus-border-color: $tbar-default-border !default;
$tbar-popup-nav-focus-border-size: 0 !default;
$tbar-popup-btn-bg: $tbar-default-bg !default;
$tbar-popup-btn-hover-bg: $tbar-hover-bg !default;
$tbar-popup-btn-hover-box-shadow: none !default;
$tbar-popup-btn-active-bg: $grey-dark !default;
$tbar-popup-btn-active-box-shadow: inset 0 4px 5px rgba($grey-base, .35) !default;
$tbar-popup-btn-focus-bg: $grey-dark !default;
$tbar-popup-btn-focus-box-shadow: none !default;
$tbar-popup-nav-pressed-icons-active-color: $tbar-active-font-color !default;
$tbar-popup-btn-focus-outline: 0 !default;
$tbar-popup-nav-pressed-border-color: $tbar-pressed-bg !default;
$tbar-popup-nav-pressed-border-size: 0 !default;
$tbar-popup-nav-pressed-focus-border-color: $tbar-pressed-bg !default;
$tbar-popup-nav-pressed-focus-border-size: 0 !default;
$tbar-popup-btn-hover-border-size: $tbar-zero-value !default;
$tbar-popup-btn-icon-font-size: 14px !default;
$tbar-margin-zero: 0 !default;
$tbar-padding-zero: 0 !default;
$tbar-border-zero: 0 !default;
$tbar-radius-zero: 0 !default;
$tbar-multirow-items-btm-mrgn-small: 1px !default;
$tbar-extended-left-mrgn: -1px !default;
$tbar-auto-height: auto !default;
$tbar-inherit-height: inherit !default;
$tbar-items-height: 100% !default;
$tbar-margin-auto: auto !default;
@mixin tbar-btn-animation {
  content: '';
}
@mixin tbar-btn-animation-after {
  content: '';
}

@include export-module('toolbar-layout') {
  .e-toolbar {
    border-radius: $tbar-radius;
    display: block;
    height: $tbar-nrml-height;
    min-height: $tbar-nrml-size;
    position: relative;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;

    &.e-spacer-toolbar {

      .e-toolbar-items {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;

        &:not(.e-toolbar-multirow) {
          position: absolute;
        }
      }

      &.e-pop-mode {

        .e-toolbar-items {
          width: calc(100% - $tbar-nav-nrml-width);
        }
      }
    }

    .e-blazor-toolbar-items {
      position: absolute;
      top: -9999px;
      visibility: hidden;
    }

    &.e-control[class *= 'e-toolbar'] {
      box-sizing: content-box;
    }

    &.e-corner {
      border-radius: $tbar-border-radius;
    }

    &.e-hidden {
      display: none;
    }

    &.e-overlay {
      .e-toolbar-item:not(.e-separator):not(.e-spacer) {
        > * {
          pointer-events: none;
        }
      }
      &.e-extended-toolbar {
        .e-toolbar-items .e-toolbar-item.e-toolbar-item > * {
          pointer-events: none;
        }
      }
    }

    .e-toolbar-items {
      border-radius: $tbar-radius $tbar-radius-zero $tbar-radius-zero $tbar-radius;
      display: inline-flex;
      height: $tbar-items-height;
      vertical-align: middle;
      align-items: center;

      &.e-toolbar-multirow {
        margin-bottom: $tbar-multirow-items-btm-mrgn-small;
        margin-left: $tbar-multirow-items-mrgn-small;
        margin-right: $tbar-multirow-items-mrgn-small;
        white-space: normal;
        flex-wrap: wrap;

        .e-toolbar-item {

          &:not(.e-separator) {
            margin: $tbar-multirow-item-top-btm-mrgn-small;
          }

          &.e-separator {

            &.e-multirow-separator,
            &.e-hidden {
              display: none;
            }
          }
        }
      }

      &.e-multirow-pos {

        .e-toolbar-left,
        .e-toolbar-center,
        .e-toolbar-right {
          display: inline;
        }
      }

      &.e-tbar-pos {
        display: block;

        .e-toolbar-left,
        .e-toolbar-center,
        .e-toolbar-right {
          display: table;
          height: $tbar-items-height;
          top: 0;
        }

        .e-toolbar-right,
        .e-toolbar-left {
          position: absolute;
        }

        .e-toolbar-right {
          right: 0;
        }

        .e-toolbar-left {
          left: 0;
        }

        .e-toolbar-center {
          margin: $tbar-margin-zero $tbar-margin-auto;
        }
      }

      .e-toolbar-left,
      .e-toolbar-center,
      .e-toolbar-right {
        display: inline-block;
      }

      .e-toolbar-left,
      &:not(.e-tbar-pos):not(.e-toolbar-multirow) {

        .e-toolbar-item:first-child {
          margin-left: $tbar-item-nrml-mrgn;
        }
      }

      &:first-child:not(.e-toolbar-multirow) {

        > .e-toolbar-item:last-child,
        > .e-toolbar-right .e-toolbar-item:last-child {
          margin-right: $tbar-item-nrml-mrgn;
        }
      }

      .e-hscroll-bar .e-hscroll-content {
        touch-action: pan-y pinch-zoom;

        > .e-toolbar-item:last-child {
          margin-right: $tbar-item-nrml-mrgn;
        }

        .e-toolbar-center .e-toolbar-item,
        .e-toolbar-right .e-toolbar-item {
          margin: $tbar-margin-zero;
        }

        .e-toolbar-right .e-toolbar-item:last-child {
          margin-right: $tbar-item-nrml-mrgn;
        }
      }
    }

    .e-toolbar-item {
      align-content: center;
      align-items: center;
      cursor: pointer;
      display: inline-flex;
      min-height: $tbar-nrml-item-size;
      vertical-align: middle;
      width: auto;
      flex: 0 0 auto;

      &.e-spacer {
        flex-grow: 1;
      }

      .e-tbar-btn {
        display: flex;
        align-items: center;
        vertical-align: middle;
        justify-content: center;
        margin: $tbar-btn-nrml-mrgn;
        min-height: $tbar-btn-nrml-minheight;
        min-width: $tbar-btn-nrml-minwidth;
        padding: $tbar-btn-nrml-padding;
        border-radius: $tbar-nrml-btn-border-radius;
        line-height: $tbar-btn-nrml-line-height;
        border: $tbar-btn-border;
        cursor: pointer;
        font-size: $tbar-btn-font-size;
        font-weight: $tbar-btn-weight;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        text-transform: none;

        &.e-tbtn-txt {

          .e-icons.e-btn-icon {
            padding: $tbar-btn-icn-nrml-padding;

            &.e-icon-right {
              padding: $tbar-btn-icn-right-nrml-padding;
            }
          }
        }

        .e-icons.e-btn-icon {
          margin: $tbar-zero-value;
          min-width: $tbar-btn-icon-nrml-width;
          width: auto;
          font-size: $tbar-btn-icon-font-size;
          line-height: $tbar-btn-icon-nrml-line-height;
        }

        &:hover,
        &:focus,
        &:active {
          padding: $tbar-nrml-btn-focus-padding;
        }

        &:focus {
          outline: $tbar-nrml-btn-focus-outline;
        }

        div {
          vertical-align: middle;
        }

        .e-tbar-btn-text {
          font-size: $tbar-btn-txt-font-size;
          padding: $btn-txt-nrml-padding;
        }
      }

      &:not(.e-separator):not(.e-spacer) {
        height: $tbar-inherit-height;
        min-width: $tbar-item-nrml-minwidth;
        padding: $tbar-item-nrml-padding;
      }

      &:not(.e-separator):not(.e-spacer),
      &.e-overlay > * {
        pointer-events: none;
      }

      &.e-separator {
        margin: $tbar-separator-nrml-mrgn;
        min-height: $tbar-separator-nrml-minheight;
        min-width: 1px;
        height: $tbar-separator-nrml-height;

        + .e-separator,
        &:last-of-type,
        &:first-of-type {
          display: none;
        }
      }

      &.e-popup-text {

        .e-tbar-btn.e-btn.e-tbtn-txt {

          .e-icons.e-btn-icon {
            padding: $tbar-popup-text-btn-icon-padding;
          }
        }
      }

      > * {
        text-overflow: ellipsis;
      }

      &:not(.e-overlay) > * {
        pointer-events: auto;
      }

      &.e-hidden {
        display: none;
      }

      input[type = 'checkbox'] {
        height: $tbar-auto-height;
      }
    }

    &.e-vertical {
      display: flex;
      flex-direction: column;

      .e-toolbar-items {

        .e-vscroll-bar .e-vscroll-content {
          touch-action: pan-x pinch-zoom;
        }

        &.e-tbar-pos {

          .e-toolbar-left,
          .e-toolbar-center,
          .e-toolbar-right {
            height: $tbar-auto-height;
          }

          .e-toolbar-left {
            left: auto;
            right: auto;
            top: 0;
          }

          .e-toolbar-right {
            bottom: 0;
            left: auto;
            right: auto;
          }
        }

        &:not(.e-tbar-pos) .e-toolbar-item {

          &:first-child {
            margin-left: $tbar-margin-zero;
          }

          &:last-child {
            margin-right: $tbar-margin-zero;
          }
        }

        .e-toolbar-item {
          display: flex;
          height: $tbar-auto-height;

          &:not(.e-separator) {
            min-width: 33px;
          }

          &.e-separator {
            height: $tbar-auto-height;
            margin: $tbar-separator-vertical-nrml-mrgn;
            min-height: auto;
          }
        }
      }

      .e-hor-nav {
        bottom: 0;
        height: $tbar-auto-height;
        left: 0;
        min-height: 40px;
        min-width: 50px;
        right: auto;
        top: auto;
        width: auto;
      }

      &.e-rtl.e-tbar-pos {

        .e-toolbar-left {
          bottom: 0;
          top: auto;
        }

        .e-toolbar-right {
          bottom: auto;
          top: 0;
        }
      }
    }

    .e-hor-nav {
      align-items: center;
      border-radius: $tbar-radius-zero $tbar-radius $tbar-radius $tbar-radius-zero;
      cursor: pointer;
      display: flex;
      height: $tbar-items-height;
      min-height: $tbar-nrml-items-size;
      overflow: hidden;
      position: absolute;
      right: $tbar-zero-value;
      top: $tbar-zero-value;
      width: $tbar-nav-nrml-width;

      &.e-ie-align {
        display: table;
      }
    }

    .e-popup-down-icon.e-icons,
    .e-popup-up-icon.e-icons {
      display: flex;
      text-align: center;
      vertical-align: middle;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-size: $tbar-popup-icon-font-size;

      @if ($skin-name == 'tailwind3') {
        color: $tbar-active-font-color;
      }
      @else {
        color: $tbar-default-icon-color;
      }
    }

    &.e-toolpop {
      overflow: visible;

      .e-toolbar-items {

        .e-toolbar-item {

          &.e-popup-text .e-tbar-btn-text {
            display: none;
          }
        }
      }
    }

    .e-toolbar-pop {
      border-radius: $tbar-pop-radius;
      overflow: hidden;
      padding: $tbar-popup-padding;
      position: absolute;

      .e-toolbar-item  {
        display: flex;
        height: $tbar-item-height;
        justify-content: center;
        min-height: $tbar-btn-pop-nrml-minheight;

        &.e-toolbar-popup.e-hidden {
          display: none;
        }

        .e-tbar-btn.e-btn {
          min-height: $tbar-btn-pop-nrml-minheight;
          min-width: 100%;
          padding: $tbar-pop-btn-nrml-padding;
          border: $tbar-popup-btn-border;
          border-radius: $tbar-popup-btn-border-radius;
          justify-content: flex-start;

          .e-icons.e-btn-icon {
            margin: $tbar-zero-value;
            padding: $tbar-pop-icon-nrml-padding;
            width: auto;
          }

          .e-tbar-btn-text {
            padding: $tbar-pop-btn-txt-nrml-pad;
          }
        }

        &:not(.e-separator) {
          height: $tbar-item-height;
          min-width: 34px;
          padding: $tbar-item-pop-nrml-padding;
        }

        > * {
          height: $tbar-items-height;
          min-width: 100%;
          text-overflow: ellipsis;
        }

        &:not(.e-overlay) > * {
          pointer-events: auto;
        }

        &.e-tbtn-align .e-btn.e-control .e-icons.e-btn-icon {
          min-width: 100%;
        }
      }

      .e-toolbar-text .e-tbar-btn-text {
        display: none;
      }

      .e-toolbar-popup,
      .e-toolpopup {
        text-align: center;
      }
    }

    &.e-extended-toolbar {
      overflow: visible;

      &.e-tbar-extended {
        border-bottom: $tbar-border-zero;
        border-bottom-left-radius: $tbar-radius-zero;
        border-bottom-right-radius: $tbar-radius-zero;
      }

      .e-toolbar-extended {
        border-top: $tbar-border-zero;
        border-top-left-radius: $tbar-radius-zero;
        border-top-right-radius: $tbar-radius-zero;
        min-height: $tbar-nrml-size;
        padding-bottom: $tbar-padding-zero;
        padding-left: $tbar-item-nrml-mrgn;
        padding-right: $tbar-item-nrml-mrgn;
        padding-top: $tbar-padding-zero;
        margin-left: $tbar-extended-left-mrgn;
        box-shadow: $tbar-box-shadow;
        display: inline;
        white-space: normal;

        .e-toolbar-item {
          display: inline-flex;
          min-height: $tbar-nrml-item-size;

          .e-tbar-btn.e-btn,
          .e-tbar-btn.e-btn.e-control {
            min-height: $tbar-btn-nrml-minheight;
            min-width: $tbar-btn-nrml-minwidth;
            padding: $tbar-btn-nrml-padding;

            .e-tbar-btn-text {
              padding: $btn-txt-nrml-padding;
              font-size: $tbar-btn-txt-font-size;
            }

            .e-icons.e-btn-icon:not(.e-toolbar-pop) {
              display: flex;
              align-items: center;
              vertical-align: middle;
              justify-content: center;
              padding: $tbar-ext-btn-icon-padding;
              font-size: $tbar-ext-btn-icon-font-size;
            }

            &.e-tbtn-txt {

              .e-icons.e-btn-icon:not(.e-toolbar-pop) {
                padding: $tbar-btn-icn-nrml-padding;
              }

              .e-icons.e-icon-right.e-btn-icon:not(.e-toolbar-pop) {
                padding: $tbar-btn-icn-right-nrml-padding;
              }
            }

            &:hover,
            &:focus,
            &:active {
              padding: $tbar-ext-btn-focus-padding;
            }
          }

          &:not(.e-separator) {
            min-width: $tbar-item-nrml-minwidth;
            padding: $tbar-item-nrml-padding;
          }

          &.e-separator {
            min-height: $tbar-btn-icon-nrml-height;

            &.e-extended-separator {
              display: none;
            }
          }

          &.e-toolbar-text .e-tbar-btn-text {
            display: none;
          }
        }

        &.e-popup-close {
          display: none;
        }

        &.e-popup-open {
          display: inline;
        }

        &.e-toolbar-pop {
          width: inherit;

          .e-toolbar-item {

            .e-tbar-btn {
              cursor: pointer;
              font-size: $tbar-btn-font-size;
              overflow: hidden;
              padding: $tbar-btn-nrml-padding;

              .e-icons.e-btn-icon {
                font-size: $tbar-popup-btn-icon-font-size;
              }
            }

            &:not(.e-separator) {
              height: $tbar-auto-height;
            }

            &:not(.e-overlay) > * {
              pointer-events: auto;
            }
          }

          .e-toolbar-item > * {
            align-self: center;
            text-overflow: ellipsis;
          }
        }
      }

      .e-toolbar-items {

        .e-toolbar-item {

          &.e-popup-text .e-tbar-btn-text {
            display: none;
          }

          &.e-separator:last-of-type {
            display: inline-flex;
          }

          &:not(.e-overlay) > * {
            pointer-events: auto;
          }
        }
      }

      .e-hor-nav.e-ie-align {
        display: table;
      }
    }

    &.e-rtl {

      &:not(.e-spacer-toolbar) {

        .e-toolbar-items:not(.e-tbar-pos) {

          .e-toolbar-item:first-child {
            margin-right: $tbar-item-nrml-mrgn;
          }

          .e-toolbar-item:last-child {
            margin-left: $tbar-item-nrml-mrgn;
          }
        }
      }

      .e-toolbar-item {

        .e-tbar-btn {

          &.e-tbtn-txt {

            .e-icons.e-btn-icon {
              padding: $tbar-rtl-btn-icn-nrml-padding;

              &.e-icon-right {
                padding: $tbar-rtl-btn-icn-right-nrml-padding;
              }
            }
          }

          .e-tbar-btn-text {
            padding: $btn-rtl-txt-nrml-padding;
          }
        }
      }

      .e-hscroll-bar .e-hscroll-content {

        > .e-toolbar-item:last-child {
          margin-left: $tbar-item-nrml-mrgn;
          margin-right: initial;
        }

        .e-toolbar-center .e-toolbar-item,
        .e-toolbar-right .e-toolbar-item {
          margin: $tbar-margin-zero;
        }

        .e-toolbar-right .e-toolbar-item:last-child {
          margin-right: $tbar-item-nrml-mrgn;
        }
      }

      .e-toolbar-items {

        &.e-tbar-pos {

          .e-toolbar-left {
            left: auto;
            right: 0;
          }

          .e-toolbar-right {
            left: 0;
            right: auto;
          }
        }

        .e-toolbar-left {

          .e-toolbar-item {

            &:first-child {
              margin-left: $tbar-margin-zero;
              margin-right: $tbar-item-nrml-mrgn;
            }

            &:last-child {
              margin-left: $tbar-item-nrml-mrgn;
            }
          }
        }

        &:not(.e-tbar-pos) {
          .e-toolbar-item:first-child {
            margin-left: $tbar-margin-zero;
          }
        }

        &:first-child {

          > .e-toolbar-item:last-child {

            &:last-child {
              margin-right: $tbar-margin-zero;
            }
          }

          > .e-toolbar-right .e-toolbar-item {

            &:last-child {
              margin-right: $tbar-margin-zero;
              margin-left: $tbar-item-nrml-mrgn;
            }

            &:first-child {
              margin-right: $tbar-item-nrml-mrgn;
            }
          }
        }
      }

      .e-hor-nav {
        left: $tbar-zero-value;
        right: auto;
        border-radius: $tbar-radius $tbar-radius-zero $tbar-radius-zero $tbar-radius;
      }
    }

    &.e-toolpop.e-rtl {

      .e-toolbar-items:not(.e-tbar-pos) {

        .e-toolbar-center .e-toolbar-item,
        .e-toolbar-right .e-toolbar-item {
          margin: $tbar-margin-zero;
        }

        .e-toolbar-right .e-toolbar-item:last-child {
          margin: $tbar-margin-zero;
          margin-left: $tbar-item-nrml-mrgn;
        }
      }
    }

    &.e-extended-toolbar.e-rtl {

      .e-hor-nav {
        left: 0;
        right: auto;
      }

      .e-toolbar-extended {
        padding-right: $tbar-item-nrml-mrgn;
        margin-left: $tbar-margin-zero;

        .e-toolbar-item .e-tbar-btn.e-btn .e-icon-left {
          padding-left: $tbar-padding-zero;
        }
      }
    }
  }
}

@include export-module('toolbar-theme') {
  /* stylelint-disable property-no-vendor-prefix */
  .e-toolbar {
    -webkit-tap-highlight-color: $tbar-tab-highlight-color;
    background: $tbar-default-bg;
    border: $tbar-border-size $tbar-border-type $tbar-default-border;
    box-shadow: $tbar-box-shadow;

    .e-toolbar-items {
      background: $tbar-default-bg;
    }

    .e-toolbar-item {

      .e-tbar-btn {
        background: $tbar-items-default-bg;
        box-shadow: $tbar-btn-box-shadow;
        color: $tbar-default-font;
        border: $tbar-btn-border;

        .e-icons {
          color: $tbar-default-icon-color;
        }

        .e-tbar-btn-text {
          color: $tbar-btn-text-color;
        }

        &.e-flat.e-active {
          background: $tbar-btn-pressed-bg;
          box-shadow: $tbar-flat-btn-active-box-shadow;
          .e-tbar-btn-text {
            color: $tbar-btn-pressed-text-color;
          }

          &:focus {
            box-shadow: $tbar-btn-pressed-focus-box-shadow;
          }
        }

        &:focus {
          background: $tbar-focus-bg;
          border-radius: $tbar-btn-border-radius;
          color: $tbar-hover-font;
          border-color: $tbar-btn-focus-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-btn-hover-border-size;
          box-shadow: $tbar-ext-btn-focus-box-shadow;

          .e-icons {
            color: $tbar-btn-icons-focus-color;
            @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
              color: $tbar-default-icon-color;
            }
          }

          .e-tbar-btn-text {
            color: $tbar-btn-text-focus-color;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              color: $tbar-btn-icons-focus-color;
            }
            @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
              color: $tbar-default-font;
            }
          }
        }

        &:hover {
          background: $tbar-hover-bg;
          border-color: $tbar-hover-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-btn-hover-border-size;
          border-radius: $tbar-btn-border-radius;
          color: $tbar-hover-font;

          .e-icons {
            color: $tbar-btn-icons-focus-color;

            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              color: $tbar-btn-text-focus-color;
            }
          }

          .e-tbar-btn-text {
            color: $tbar-btn-text-focus-color;
          }

          &:active {
            .e-icons {
              color: $tbar-btn-hover-active-icons-color;
            }

            .e-tbar-btn-text {
              color: $tbar-btn-hover-active-text-color;
            }
          }
        }

        &:active {
          background: $tbar-btn-active-bg;
          border-color: $tbar-press-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-btn-hover-border-size;
          border-radius: $tbar-btn-border-radius;
          box-shadow: $tbar-btn-pressed-box-shadow;
          color: $tbar-press-font;

          .e-icons {
            color: $tbar-btn-active-icons-color;
          }

          .e-tbar-btn-text {
            color: $tbar-btn-active-text-color;
          }
        }
      }

      &.e-separator {
        border: $tbar-separator-border-type $tbar-separator-border;
        border-width: $tba-horizontal-separator;
      }

      &.e-overlay {
        background: $tbar-default-bg;
        opacity: $tbar-btn-overlay-opacity;
        color: $tbar-default-icon-overlay;

        .e-tbar-btn-text {
          color: $tbar-default-font-overlay;
        }

        .e-icons {
          color: $tbar-default-icon-overlay;
        }
      }
    }

    &.e-vertical {

      .e-hor-nav {
        border: $tbar-border-nav-type $tbar-default-border;
        border-width: $tbar-popup-vertical-border-width;
      }

      &.e-rtl .e-hor-nav {
        border: $tbar-border-nav-type $tbar-default-border;
        border-width: $tbar-popup-vertical-rtl-border-width;
      }

      .e-toolbar-items .e-toolbar-item {

        &.e-separator {
          border-width: $tba-vertical-separator;
        }
      }
    }

    .e-hor-nav {
      background: $tbar-default-bg;
      border: $tbar-border-nav-type $tbar-default-border;
      border-width: $tbar-popup-border-width;

      &::after {
        @include tbar-btn-animation;
      }

      &.e-nav-active {
        &:active,
        &:focus,
        &:hover {
          border-bottom-right-radius: $tbar-popup-nav-active-border-bottom-right-radius;
        }
      }

      &:active {
        border: $tbar-nav-press-border;
        box-shadow: $tbar-nav-pressed-box-shadow;
        color: $tbar-select-font;
        background: $tbar-popup-nav-active-bg;

        .e-icons {
          color: $tbar-popup-nav-active-icons-color;
        }

        &::after {
          @include tbar-btn-animation-after;
        }
      }

      &:hover {
        background: $tbar-popup-nav-hover-bg;
        border-left: $tbar-nav-hover-border;
        color: $tbar-popup-nav-hover-color;

        .e-icons {
          color: $tbar-popup-nav-hover-icons-color;
        }

        &:not(.e-nav-active) {
          border-color: $tbar-popup-nav-hover-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-nav-hover-border-size;
        }

        &:active {
          background: $tbar-popup-nav-hover-active-bg;
          border-color: $tbar-popup-nav-hover-active-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-nav-hover-active-border-size;
        }
      }

      &:focus {
        background: $tbar-popup-nav-focus-bg;
        color: $tbar-popup-nav-focus-color;
        border-color: $tbar-popup-nav-focus-border-color;
        border-style: $tbar-border-nav-type;
        border-width: $tbar-popup-nav-focus-border-size;

        .e-icons {
          color: $tbar-popup-nav-hover-icons-color;
        }
      }
    }

    &.e-toolpop {

      .e-hor-nav.e-nav-active,
      .e-hor-nav.e-nav-active:not(.e-expended-nav) {
        background: $tbar-pressed-bg;
        box-shadow: $tbar-nav-pressed-box-shadow;
        border-color: $tbar-popup-nav-pressed-border-color;
        border-style: $tbar-border-nav-type;
        border-width: $tbar-popup-nav-pressed-border-size;

        &:focus {
          border-color: $tbar-popup-nav-pressed-focus-border-color;
          border-style: $tbar-border-nav-type;
          border-width: $tbar-popup-nav-pressed-focus-border-size;
        }

        .e-icons {
          color: $tbar-active-font-color;

          &:active {
            color: $tbar-popup-nav-pressed-icons-active-color;
          }
        }
      }
    }

    .e-toolbar-pop {
      background: $tbar-pop-bg;
      border: $tbar-border-size $tbar-border-type $tbar-default-border;
      box-shadow: $tbar-pop-box-shadow;

      .e-toolbar-item {

        .e-tbar-btn {
          background: $tbar-popup-btn-bg;

          &:hover {
            background: $tbar-popup-btn-hover-bg;
            box-shadow: $tbar-popup-btn-hover-box-shadow;
            border-color: $tbar-hover-border-color;
            border-style: $tbar-border-nav-type;
            border-width: $tbar-popup-btn-hover-border-size;

            @if $skin-name == 'bootstrap5.3' {
              .e-tbar-btn-text,
              .e-icons.e-btn-icon {
                color: $tbar-default-font;
              }
            }
          }

          &:active {
            background: $tbar-popup-btn-active-bg;
            box-shadow: $tbar-popup-btn-active-box-shadow;
            border-color: $tbar-press-border-color;
            border-style: $tbar-border-nav-type;
            border-width: $tbar-popup-btn-hover-border-size;
          }

          &:focus {
            background: $tbar-popup-btn-focus-bg;
            border-color: $tbar-btn-focus-border-color;
            border-style: $tbar-border-nav-type;
            border-width: $tbar-popup-btn-hover-border-size;
            box-shadow: $tbar-popup-btn-focus-box-shadow;

            @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
              .e-icons {
                color: $tbar-popup-nav-hover-icons-color;
              }

              .e-tbar-btn-text {
                color: $tbar-popup-btn-text-focus-color;
              }
            }
            @if $skin-name == 'bootstrap5.3' {
              .e-tbar-btn-text,
              .e-icons.e-btn-icon {
                color: $tbar-btn-active-icons-color;
              }
            }
          }
        }

        .e-btn:focus {
          outline: $tbar-popup-btn-focus-outline;
        }

        &:not(.e-separator) {
          background: $tbar-item-pop-bg-color;
        }
      }
    }

    &.e-extended-toolbar {

      .e-toolbar-extended {

        .e-toolbar-item {

          .e-tbar-btn {
            background: $tbar-default-bg;
            box-shadow: $tbar-btn-box-shadow;
            border: $tbar-ext-btn-border;

            &:focus {
              background: $tbar-focus-bg;
              border-radius: $tbar-btn-border-radius;
              border-color: $tbar-btn-focus-border-color;
              border-style: $tbar-border-nav-type;
              border-width: $tbar-btn-hover-border-size;
              box-shadow: $tbar-ext-btn-focus-box-shadow;

              @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
                .e-icons {
                  color: $tbar-default-icon-color;
                }

                .e-tbar-btn-text {
                  color: $tbar-default-font;
                }
              }
              @if $skin-name == 'bootstrap5.3' {
                .e-tbar-btn-text,
                .e-icons.e-btn-icon {
                  color: $tbar-default-icon-color;
                }
              }
            }

            &:hover {
              background: $tbar-hover-bg;
              border-radius: $tbar-btn-border-radius;
              border-color: $tbar-ext-btn-hover-border-color;
              border-style: $tbar-border-nav-type;
              border-width: $tbar-btn-hover-border-size;

              @if $skin-name == 'bootstrap5.3' {
                .e-tbar-btn-text,
                .e-icons.e-btn-icon {
                  color: $tbar-btn-text-focus-color;
                }
              }
            }

            &:active {
              background: $tbar-btn-press-bg;
              border-radius: $tbar-btn-border-radius;
              box-shadow: $tbar-btn-pressed-box-shadow;
              border-color: $tbar-press-border-color;
              border-style: $tbar-border-nav-type;
              border-width: $tbar-btn-hover-border-size;
            }
          }

          &.e-separator {
            border: $tbar-separator-border-type $tbar-separator-border;
            border-width: $tba-horizontal-separator;
          }

          &.e-overlay {
            background: $tbar-default-bg;
          }
        }
      }

      .e-toolbar-pop {
        background: $tbar-default-bg;
      }
    }

    &.e-rtl .e-hor-nav {
      background: $tbar-default-bg;
      border: $tbar-border-nav-type $tbar-default-border;
      border-width: $tbar-popup-rtl-border-width;

      &:not(.e-nav-active):hover {
        background: $tbar-hover-bg;
        color: $tbar-hover-font;
        border: $tbar-border-nav-type $tbar-default-border;
        border-width: $tbar-popup-rtl-border-width;
      }
    }
  }
}

@include export-module('toolbar-bootstrap-dark-icons') {
  #{&}.e-toolbar {

    .e-popup-down-icon::before {
      content: '\e83d';
      line-height: normal;
    }

    .e-popup-up-icon::before {
      content: '\e834';
      line-height: normal;
    }
  }
}

@include export-module('toolbar-bigger') {
  .e-bigger .e-toolbar,
  .e-toolbar.e-bigger {
    height: $tbar-bgr-height;
    min-height: $tbar-bgr-size;

    .e-toolbar-items {

      &:not(.e-tbar-pos):not(.e-toolbar-multirow),
      .e-toolbar-left {

        .e-toolbar-item:first-child {
          margin-left: $tbar-item-bgr-mrgn;
        }
      }

      &:first-child:not(.e-toolbar-multirow) {

        > .e-toolbar-item:last-child,
        > .e-toolbar-right .e-toolbar-item:last-child {
          margin-right: $tbar-item-bgr-mrgn;
        }
      }

      .e-hscroll-bar .e-hscroll-content {

        > .e-toolbar-item:last-child {
          margin-right: $tbar-item-bgr-mrgn;
        }

        .e-toolbar-right .e-toolbar-item {

          &:last-child {
            margin-right: $tbar-item-bgr-mrgn;
          }
        }
      }

      &.e-toolbar-multirow {
        margin-left: $tbar-multirow-items-mrgn-bigger;
        margin-right: $tbar-multirow-items-mrgn-bigger;

        .e-toolbar-item:not(.e-separator) {
          margin: $tbar-multirow-item-top-btm-mrgn-bigger;
        }
      }

      .e-toolbar-item {

        .e-tbar-btn.e-btn,
        .e-tbar-btn.e-btn.e-control {

          &:focus,
          &:hover,
          &:active {
            padding: $tbar-btn-bgr-focus-padding;
          }
        }
      }
    }

    &.e-spacer-toolbar {
      &.e-pop-mode {
        .e-toolbar-items {
          width: calc(100% - $tbar-nav-bgr-width);
        }
      }
    }

    .e-toolbar-item {
      min-height: $tbar-bgr-items-size;

      .e-tbar-btn.e-btn,
      .e-tbar-btn.e-btn.e-control {
        min-height: $tbar-btn-bgr-minheight;
        min-width: $tbar-btn-bgr-minwidth;
        padding: $tbar-btn-bgr-padding;
        line-height: $tbar-btn-bgr-line-height;

        .e-tbar-btn-text {
          padding: $btn-txt-bgr-padding;
          font-size: $tbar-bgr-btn-text-font-size;
        }

        .e-icons {
          font-size: $tbar-icons-bgr-font-size;

          &.e-btn-icon {
            font-size: $tbar-bgr-btn-icon-font-size;
            line-height: $tbar-btn-icon-bgr-line-height;
          }
        }

        &.e-tbtn-txt {

          .e-icons.e-btn-icon {
            padding: $tbar-btn-icn-bgr-padding;
          }

          .e-icons.e-icon-right.e-btn-icon {
            padding: $tbar-btn-icn-right-bgr-padding;
          }
        }
      }

      &:not(.e-separator):not(.e-spacer) {
        min-width: $tbar-bgr-item-size;
        padding: $tbar-item-bgr-padding;
      }

      &.e-separator {
        height: $tbar-separator-bgr-height;
        margin: $tbar-separator-bgr-mrgn;
        min-height: $tbar-separator-bgr-minheight;
      }

      &.e-popup-text {

        .e-tbar-btn.e-btn,
        .e-tbar-btn.e-btn.e-control {

          &.e-tbtn-txt {

            .e-icons.e-btn-icon {
              padding: $tbar-popup-bgr-text-btn-icon-padding;
            }
          }
        }
      }
    }

    .e-hor-nav {
      min-height: $tbar-bgr-items-size;
      min-width: $tbar-nav-bgr-width;
    }

    &.e-vertical {

      .e-toolbar-items {

        &:not(.e-tbar-pos) .e-toolbar-item {

          &:first-child {
            margin-left: $tbar-margin-zero;
          }

          &:last-child {
            margin-right: $tbar-margin-zero;
          }
        }
      }

      .e-toolbar-item {

        &:not(.e-separator) {
          min-height: 38px;
        }

        &.e-separator {
          height: $tbar-auto-height;
          margin: $tbar-separator-vertical-bgr-mrgn;
          min-height: auto;
        }
      }

      .e-hor-nav {
        min-height: 40px;
        min-width: 50px;
      }
    }

    .e-toolbar-pop {

      .e-toolbar-item {
        height: $tbar-popup-bgr-height;

        &:not(.e-separator) {
          min-width: 48px;
          padding: $tbar-item-pop-bgr-padding;
          min-height: $tbar-btn-pop-bgr-minheight;
        }

        .e-tbar-btn.e-btn {
          min-height: $tbar-btn-pop-bgr-minheight;
          padding: $tbar-pop-btn-bgr-padding;
          min-width: 100%;

          .e-icons.e-btn-icon {
            margin-left: $tbar-zero-value;
            padding: $tbar-pop-icon-bgr-padding;
            font-size: $tbar-popup-bgr-btn-icon-font-size;
          }

          .e-tbar-btn-text {
            padding: $tbar-pop-btn-txt-bgr-pad;
            font-size: $tbar-popup-bgr-btn-text-font-size;
          }
        }
      }
    }

    &.e-extended-toolbar {

      .e-toolbar-extended {
        min-height: $tbar-bgr-size;
        padding-bottom: $tbar-padding-zero;
        padding-left: $tbar-item-bgr-mrgn;
        padding-right: $tbar-item-bgr-mrgn;
        padding-top: $tbar-padding-zero;

        .e-toolbar-item {
          min-height: $tbar-bgr-items-size;

          .e-tbar-btn.e-btn,
          .e-tbar-btn.e-btn.e-control {
            min-height: $tbar-btn-bgr-minheight;
            min-width: $tbar-btn-bgr-minwidth;
            padding: $tbar-btn-bgr-padding;

            @if ($skin-name == 'tailwind3') {
              .e-icons.e-btn-icon:not(.e-toolbar-pop) {
                font-size: $tbar-bgr-btn-icon-font-size;
              }

              &.e-tbtn-txt .e-icons.e-btn-icon:not(.e-toolbar-pop),
              .e-control.e-tbtn-txt .e-icons.e-btn-icon:not(.e-toolbar-pop) {
                padding: $tbar-btn-icn-bgr-padding;
              }
            }

            .e-tbar-btn-text {
              padding: $btn-txt-bgr-padding;
              @if ($skin-name == 'tailwind3') {
                font-size: $tbar-bgr-btn-text-font-size;
              }
            }

            &:hover,
            &:focus,
            &:active {
              padding: $tbar-bgr-btn-focus-padding;
            }
          }

          &:not(.e-separator) {
            min-width: $tbar-bgr-item-size;
            padding: $tbar-item-bgr-padding;
          }

          &.e-separator {
            height: $tbar-separator-bgr-height;
            margin: $tbar-separator-bgr-mrgn;
            min-height: $tbar-separator-bgr-minheight;
          }
        }
      }

      &.e-tbar-extended {
        border-bottom: $tbar-border-zero;
        border-bottom-left-radius: $tbar-radius-zero;
        border-bottom-right-radius: $tbar-radius-zero;

        .e-toolbar-extended {
          border-top: $tbar-border-zero;
          border-top-left-radius: $tbar-radius-zero;
          border-top-right-radius: $tbar-radius-zero;
        }
      }
    }

    &.e-rtl {

      .e-toolbar-item {

        .e-tbar-btn.e-btn {

          &.e-tbtn-txt {

            .e-icons.e-btn-icon {
              padding: $tbar-rtl-btn-icn-bgr-padding;

              &.e-icon-right {
                padding: $tbar-rtl-btn-icn-right-bgr-padding;
              }
            }
          }

          .e-tbar-btn-text {
            padding: $btn-rtl-txt-bgr-padding;
          }
        }
      }

      .e-toolbar-items {

        .e-hscroll-bar .e-hscroll-content {

          > .e-toolbar-item:last-child {
            margin-left: $tbar-item-bgr-mrgn;
            margin-right: initial;
          }

          .e-toolbar-center .e-toolbar-item,
          .e-toolbar-right .e-toolbar-item {
            margin: $tbar-margin-zero;
          }

          .e-toolbar-right .e-toolbar-item:last-child {
            margin-left: $tbar-item-bgr-mrgn;
            margin-right: $tbar-margin-zero;
          }
        }

        &:not(.e-tbar-pos) {

          .e-toolbar-item:first-child {
            margin-left: $tbar-margin-zero;
            margin-right: $tbar-item-bgr-mrgn;
          }
        }
      }
    }

    &.e-extended-toolbar.e-rtl {

      .e-toolbar-extended {
        padding-right: $tbar-item-bgr-mrgn;
      }
    }
  }
}

$tab-skin: 'bootstrap' !default;
$tab-big-vertical-scroll-nav-top-bottom: 23px !default;
$tab-vscroll-big-padding: 24px 0 !default;
$tab-big-v-wrap-padding: 0 20px !default;
$tab-v-big-close-icon-top-bottom-right: -20px !default;
$tab-big-vertical-nav-arrow-size: 24px !default;
$tab-big-vertical-nav-arrow-height: 24px !default;
$tab-big-vertical-nav-arrow-line-height: 24px !default;
$tab-big-vertical-nav-arrow-font-size: 12px !default;
$tab-big-more-btn-line-height: 48px !default;
$tab-pop-more-icon-margin: 0 0 0 8px !default;
$tab-v-rtl-big-close-icon-top-bottom-left: -20px !default;
$tab-rtl-pop-more-icon-margin: 0 8px 0 0 !default;
$tab-font-family: $font-family !default;
$tab-nrml-vertical-scroll-nav-top-bottom: 15px !default;
$tab-indicator-display: none !default;
$tab-vscroll-nrml-padding: 16px 0 !default;
$tab-nrml-v-wrap-padding: 0 15px !default;
$tab-v-nrml-close-icon-top-bottom-right: -15px !default;
$tab-nrml-vertical-nav-arrow-size: 16px !default;
$tab-nrml-vertical-nav-arrow-line-height: 16px !default;
$tab-nrml-vertical-nav-arrow-font-size: 10px !default;
$tab-nrml-more-btn-line-height: 36px !default;
$tab-v-rtl-nrml-close-icon-top-bottom-left: -15px !default;
$tab-active-item-hide-border: 1px solid $grey-light-font !default;
$tab-top-active-item-border-radius: 4px 4px 0 0 !default;
$tab-bottom-active-item-border-radius: 0 0 4px 4px !default;
$tab-left-active-item-border-radius: 4px 0 0 4px !default;
$tab-right-active-item-border-radius: 0 4px 4px 0 !default;
$tab-vscroll-nav-border: 1px solid transparent !default;
$tab-vscroll-nav-border-color: $grey-dd !default;
$tab-v-nav-hover-bg-color: $grey-lighter !default;
$tab-v-nav-focus-bg-color: $grey-lighter !default;
$tab-v-pop-focus-outline: 0 !default;
$tab-text-transform: capitalize !default;
$tab-big-height: 50px !default;
$tab-big-min-height: 50px !default;
$tab-nrml-height: 40px !default;
$tab-nrml-min-height: 40px !default;
$tab-focus-big-height: 50px !default;
$tab-focus-nrml-height: 40px !default;
$tab-active-big-height: 50px !default;
$tab-active-nrml-height: 40px !default;
$tab-active-focus-big-height: 50px !default;
$tab-active-focus-nrml-height: 40px !default;
$tab-big-fill-height: 50px !default;
$tab-big-fill-min-height: 50px !default;
$tab-nrml-fill-height: 40px !default;
$tab-nrml-fill-minheight: 40px !default;
$tab-mob-fill-height: 50px !default;
$tab-mob-fill-min-height: 50px !default;
$tab-focus-big-fill-height: 50px !default;
$tab-focus-nrml-fill-height: 40px !default;
$tab-disable-cnt-opacity: .38 !default;
$tab-big-tb-icon-height: 72px !default;
$tab-big-tb-icon-height-calc: 2 !default;
$tab-big-tb-icon-min-height: 72px !default;
$tab-nrml-tb-icon-height: 62px !default;
$tab-nrml-tb-icon-height-calc: 2 !default;
$tab-nrml-tb-icon-min-height: 62px !default;
$tab-content-font-color: $grey-dark-font !default;
$tab-border-width: 2px !default;
$tab-border-height: 2px !default;
$tab-border-style: $tab-border-width Solid !default;
$tab-focus-outline: 0 !default;
$tab-active-focus-outline: 0 !default;
$tab-active-text-item-border: 0 !default;
$tab-disable-active-text-item-border: 0 !default;
$tab-active-item-border: 1px solid $grey-99 !default;
$tab-alt-active-item-border: $tab-border-style $grey-99 !default;
$tab-accent-active-item-border: $tab-border-style $grey-99 !default;
$tab-fill-hdr-border: 0 !default;
$tab-fill-disable-hdr-border: 0 !default;
$tab-anim-border-display: none !default;
$tab-border-color: $grey-99 !default;
$tab-disable-border-color: rgba($grey-99, .38) !default;
$tab-alt-border-color: $grey-99 !default;
$tab-alt-disable-border-color: rgba($grey-99, .38) !default;
$tab-bg-color: transparent !default;
$tab-border: none !default;
$tab-alt-hdr-bg-color: inherit !default;
$tab-focus-hscroll-content-padding: 1px 0 !default;
$tab-hdr-bdr-color: $grey-88 !default;
$tab-hdr-border: 1px solid $grey-88 !default;
$tab-alt-hdr-border: 0 !default;
$tab-items-border: 1px solid $grey-88 !default;
$tab-big-item-margin: 0 !default;
$tab-nrml-item-margin: 0 !default;
$tab-big-item-padding: 0 !default;
$tab-nrml-item-padding: 0 !default;
$tab-big-icon-top-bottom-item-height: 72px !default;
$tab-big-icon-top-bottom-item-min-height: 72px !default;
$tab-nrml-icon-top-bottom-item-height: 62px !default;
$tab-pop-big-icon-top-bottom-item-height: 50px !default;
$tab-pop-big-icon-top-bottom-item-min-height: 50px !default;
$tab-pop-nrml-icon-top-bottom-item-height: 40px !default;
$tab-pop-nrml-icon-top-bottom-item-min-height: 40px !default;
$tab-big-focus-icon-top-bottom-item-height: 72px !default;
$tab-nrml-focus-icon-top-bottom-item-height: 62px !default;
$tab-big-fill-icon-top-bottom-item-height: 72px !default;
$tab-big-fill-icon-top-bottom-item-min-height: 72px !default;
$tab-nrml-fill-icon-top-bottom-item-height: 62px !default;
$tab-nrml-fill-icon-top-bottom-item-min-height: 62px !default;
$tab-big-focus-fill-icon-top-bottom-item-height: 72px !default;
$tab-nrml-focus-fill-icon-top-bottom-item-height: 62px !default;
$tab-big-first-item-margin: 0 !default;
$tab-nrml-first-item-margin: 0 !default;
$tab-big-last-item-margin: 0 2px -3px 0 !default;
$tab-nrml-last-item-margin: 0 2px -1px 0 !default;
$tab-big-active-last-item-margin: 0 2px -5px 0 !default;
$tab-nrml-active-last-item-margin: 1px 2px -2px 0 !default;
$tab-big-scroll-last-item-margin: 0 2px -3px 0 !default;
$tab-nrml-scroll-last-item-margin: 0 2px -2px 0 !default;
$tab-nrml-active-scroll-last-item-margin: 0 2px -4px 0 !default;
$tab-mob-last-item-margin: 0 2px -4px 0 !default;
$tab-big-even-last-item-margin: -1px 2px 0 0 !default;
$tab-nrml-even-last-item-margin: -1px 2px 0 0 !default;
$tab-mob-even-last-item-margin: -1px 2px 0 0 !default;
$tab-big-alt-first-item-margin: 0 !default;
$tab-nrml-alt-first-item-margin: 0 !default;
$tab-pop-item-margin: 0 !default;
$tab-big-pop-item-height: 40px !default;
$tab-big-pop-item-min-height: 40px !default;
$tab-nrml-pop-item-height: 26px !default;
$tab-nrml-pop-item-min-height: 26px !default;
$tab-alt-item-margin: 0 2px 0 0 !default;
$tab-big-rtl-item-margin: 1px 0 -6px 2px !default;
$tab-nrml-rtl-item-margin: 1px 0 -4px 2px !default;
$tab-big-rtl-alt-item-margin: 0 0 0 2px !default;
$tab-nrml-rtl-alt-item-margin: 0 0 0 2px !default;
$tab-mob-pop-item-height: 50px !default;
$tab-mob-pop-item-min-height: 50px !default;
$tab-ripple-bg-color: rgba($grey, 0) !default;
$tab-fill-ripple-bg-color: rgba($grey, 0) !default;
$tab-alt-ripple-bg-color: rgba($grey, 0) !default;
$tab-item-border: 1px solid transparent !default;
$tab-active-item-border-bottom: 3px solid $grey-base !default;
$tab-active-item-border-color: $grey-99 !default;
$tab-even-active-item-border-bottom: 3px solid $grey-base !default;
$tab-big-boot-item-margin: 0 !default;
$tab-nrml-boot-item-margin: 0 !default;
$tab-big-scroll-boot-item-margin: 0 2px -4px 0 !default;
$tab-nrml-scroll-boot-item-margin: 0 2px -4px 0 !default;
$tab-mob-boot-item-margin: 1px 2px -4px 0 !default;
$tab-big-even-boot-item-margin: 0 2px 0 0 !default;
$tab-nrml-even-boot-item-margin: 0 2px 0 0 !default;
$tab-mob-even-boot-item-margin: -1px 2px 0 0 !default;
$tab-big-boot-active-item-padding-bottom: 0 !default;
$tab-nrml-boot-active-item-padding-bottom: 0 !default;
$tab-big-even-boot-active-item-padding-bottom: 1px !default;
$tab-nrml-even-boot-active-item-padding-bottom: 0 !default;
$tab-big-even-scroll-boot-active-item-padding-bottom: 2px !default;
$tab-active-item-border-radius: 4px !default;
$tab-item-wrap-border-radius: 4px !default;
$tab-hscroll-item-padding: 0 !default;
$tab-big-item-last-child-padding-bottom: 3px !default;
$tab-nrml-item-last-child-padding-bottom: 1px !default;
$tab-big-wrap-padding: 0 20px !default;
$tab-nrml-wrap-padding: 0 15px !default;
$tab-mob-wrap-padding: 0 15px !default;
$tab-pop-padding: 5px 0 !default;
$tab-big-pop-item-wrap-padding: 0 24px !default;
$tab-nrml-pop-item-wrap-padding: 0 20px !default;
$tab-mob-pop-item-wrap-padding: 0 24px !default;
$tab-big-io-text-wrap-width: auto !default;
$tab-nrml-io-text-wrap-width: auto !default;
$tab-big-io-wrap-padding: 0 20px !default;
$tab-nrml-io-wrap-padding: 0 15px !default;
$tab-wrap-focus-margin-right: 0 !default;
$tab-wrap-focus-margin-left: 0 !default;
$tab-big-even-ileft-active-text-wrap-margin: 0 !default;
$tab-nrml-even-ileft-active-text-wrap-margin: 0 !default;
$tab-big-fill-tb-wrap-height: 50px !default;
$tab-nrml-fill-tb-wrap-height: 44px !default;
$tab-focus-bg-color: $grey-44 !default;
$tab-fill-focus-bg-color: $brand-primary !default;
$tab-hover-bg-color: $grey !default;
$tab-active-bg-color: $grey !default;
$tab-fill-active-bg-color: $brand-primary !default;
$tab-fill-disable-active-bg-color: $brand-primary !default;
$tab-alt-active-bg-color: $brand-primary !default;
$tab-alt-disable-active-bg-color: $brand-primary !default;
$tab-alt-item-bg-color: inherit !default;
$tab-alt-active-focus-bg-color:  $brand-primary !default;
$tab-key-alt-active-focus-bg-color: $grey-44 !default;
$tab-alt-hover-bg-color: $grey !default;
$tab-alt-focus-top-bottom-bg-color: inherit !default;
$tab-fill-active-wrap-corner: 3px 3px 0 0 !default;
$tab-fill-even-active-wrap-corner: 0 0 3px 3px !default;
$tab-alt-tb-active-bg-color: $brand-primary !default;
$tab-fill-big-wrap-padding: 0 20px !default;
$tab-fill-nrml-wrap-padding: 0 15px !default;
$tab-mob-fill-wrap-padding: 0 15px !default;
$tab-bg-big-wrap-padding: 0 20px !default;
$tab-bg-nrml-wrap-padding: 0 15px !default;
$tab-item-hover-bg-color: $grey !default;
$tab-bg-item-wrap-hover-bg-color: $tab-item-hover-bg-color !default;
$tab-mob-item-hover-bg-color: initial !default;
$tab-pop-text-color: $grey-light-font !default;
$tab-alt-disable-active-item-opacity: .65 !default;
$tab-big-active-item-wrap-margin-bottom: 1px !default;
$tab-nrml-active-item-wrap-margin-bottom: 0 !default;
$tab-fill-big-active-item-wrap-margin-bottom: 0 !default;
$tab-fill-nrml-active-item-wrap-margin-bottom: 0 !default;
$tab-bg-big-active-item-wrap-margin-bottom: 0 !default;
$tab-bg-nrml-active-item-wrap-margin-bottom: 0 !default;
$tab-alt-big-active-item-padding: 0 !default;
$tab-alt-nrml-active-item-padding: 0 !default;
$tab-active-text-container-margin: 0 !default;
$tab-big-text-container-margin-right: 22px !default;
$tab-nrml-text-container-margin-right: 20px !default;
$tab-rtl-big-text-container-margin-right: 0 !default;
$tab-rtl-nrml-text-container-margin-right: 0 !default;
$tab-rtl-big-text-container-margin-left: 22px !default;
$tab-rtl-nrml-text-container-margin-left: 20px !default;
$tab-big-active-text-container-height: 50px !default;
$tab-big-active-it-text-container-height: 50px !default;
$tab-fill-big-active-it-text-container-height: 50px !default;
$tab-fill-nrml-active-it-text-container-height: 40px !default;
$tab-big-even-active-text-container-height: 50px !default;
$tab-nrml-even-active-text-container-height: 40px !default;
$tab-even-active-text-container-margin: 0 !default;
$tab-big-font-size: 15px !default;
$tab-nrml-font-size: 14px !default;
$tab-nrml-font-icon-size: 14px !default;
$tab-font-weight: 400 !default;
$tab-semi-font-weight: 400 !default;
$tab-light-font-weight: 400 !default;
$tab-big-it-text-margin: 0 0 0 10px !default;
$tab-nrml-it-text-margin: 0 0 0 8px !default;
$tab-mob-it-text-margin: 0 0 0 10px !default;
$tab-rtl-mob-it-text-margin: 0 10px 0 0 !default;
$tab-rtl-big-it-text-margin: 0 10px 0 0 !default;
$tab-rtl-nrml-it-text-margin: 0 8px 0 0 !default;
$tab-big-icon-top-margin: 10px 0 0 !default;
$tab-nrml-icon-top-margin: 8px 0 0 !default;
$tab-big-icon-bottom-margin: 0 0 10px !default;
$tab-nrml-icon-bottom-margin: 0 0 8px !default;
$tab-big-pop-text-padding-right: 12px !default;
$tab-nrml-pop-text-padding-right: 10px !default;
$tab-rtl-big-pop-text-padding-left: 12px !default;
$tab-rtl-nrml-pop-text-padding-left: 10px !default;
$tab-big-even-active-text-height: 50px !default;
$tab-nrml-even-active-text-height: 40px !default;
$tab-fill-big-even-active-text-height: 50px !default;
$tab-fill-nrml-even-active-text-height: 40px !default;
$tab-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
$tab-wrap-comb-icon-color: $tab-text-color !default;
$tab-disable-text-color: $grey-light !default;
$tab-active-text-color: $grey-dark-font !default;
$tab-disable-active-text-color: $grey-light !default;
$tab-focus-text-color: $grey-dark-font !default;
$tab-hover-text-color: color.adjust($brand-primary, $lightness: 10%) !default;
$tab-pop-active-item-text-color: $tab-active-text-color !default;
$tab-alt-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
$tab-alt-disable-text-color: $grey-light !default;
$tab-alt-active-text-color: $brand-primary-font !default;
$tab-alt-disable-active-text-color: $brand-primary-font !default;
$tab-alt-hover-text-color: color.adjust($brand-primary, $lightness: 10%) !default;
$tab-alt-active-hover-text-color: $brand-primary-font !default;
$tab-alt-active-style-hover-icon-color: $brand-primary-font !default;
$tab-clone-item-bg-color: rgba($grey-light, .87) !default;
$tab-clone-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
$tab-icon-container-width: auto !default;
$tab-nav-pop-press-border: 0 !default;
$tab-big-nav-icon-container-size: 44px !default;
$tab-big-nav-icon-container-height: 44px !default;
$tab-big-nav-icon-container-line-height: 44px !default;
$tab-nrml-nav-icon-container-size: 34px !default;
$tab-nrml-nav-icon-container-line-height: 34px !default;
$tab-big-nav-icon-size: 16px !default;
$tab-nrml-nav-icon-size: 16px !default;
$tab-mob-nav-icon-size: 16px !default;
$tab-mob-nav-vicon-size: 12px !default;
$tab-big-icon-size: 20px !default;
$tab-nrml-icon-size: 16px !default;
$tab-mob-icon-size: 20px !default;
$tab-big-icon-container-size: 24px !default;
$tab-big-icon-container-width: 24px !default;
$tab-big-icon-container-height: 24px !default;
$tab-nrml-icon-container-size: 20px !default;
$tab-nrml-icon-container-height: 20px !default;
$tab-nrml-icon-container-width: 20px !default;
$tab-mob-icon-container-size: 20px !default;
$tab-mob-icon-container-height: 20px !default;
$tab-big-nav-icon-top: 11px !default;
$tab-nrml-nav-icon-top: 5px !default;
$tab-big-nav-pop-icon-top: 13px !default;
$tab-nrml-nav-pop-icon-top: 8px !default;
$tab-big-safari-nav-icon-top: 4px !default;
$tab-nrml-safari-nav-icon-top: 4px !default;
$tab-big-safari-pop-icon-top: 6px !default;
$tab-nrml-safari-pop-icon-top: 6px !default;
$tab-big-ie-nav-icon-line-height: 15px !default;
$tab-nrml-ie-nav-icon-line-height: 14px !default;
$tab-big-ie-pop-icon-line-height: 15px !default;
$tab-nrml-ie-pop-icon-line-height: 15px !default;
$tab-big-edge-nav-icon-line-height: 13px !default;
$tab-nrml-edge-nav-icon-line-height: 11px !default;
$tab-big-edge-pop-icon-line-height: 15px !default;
$tab-nrml-edge-pop-icon-line-height: 14px !default;
$tab-comb-icon-color: $grey-dark-font !default;
$tab-comb-text-color: $grey-dark-font !default;
$tab-close-icon-size: 12px !default;
$tab-big-close-icon-size: 12px !default;
$tab-nrml-close-icon-size: 12px !default;
$tab-mob-close-icon-size: 12px !default;
$tab-close-icon-minwidth: 12px !default;
$tab-big-close-icon-margin: 0 0 0 10px !default;
$tab-nrml-close-icon-margin: 0 0 0 8px !default;
$tab-mob-close-icon-margin: 0 0 0 8px !default;
$tab-rtl-mob-close-icon-margin: 0 8px 0 0 !default;
$tab-rtl-big-close-icon-margin: 0 10px 0 0 !default;
$tab-rtl-nrml-close-icon-margin: 0 8px 0 0 !default;
$tab-rtl-big-pop-close-icon-margin: 0 !default;
$tab-rtl-nrml-pop-close-icon-margin: 0 !default;
$tab-big-close-icon-top-bottom-right: 20px !default;
$tab-nrml-close-icon-top-bottom-right: 15px !default;
$tab-big-pop-close-icon-top-bottom-right: 24px !default;
$tab-nrml-pop-close-icon-top-bottom-right: 20px !default;
$tab-rtl-big-close-icon-top-bottom-right: 0 !default;
$tab-rtl-nrml-close-icon-top-bottom-right: 0 !default;
$tab-rtl-big-close-icon-top-bottom-left: 20px !default;
$tab-rtl-nrml-close-icon-top-bottom-left: 15px !default;
$tab-rtl-big-pop-close-icon-top-bottom-left: 24px !default;
$tab-rtl-nrml-pop-close-icon-top-bottom-left: 20px !default;
$tab-pop-close-icon-right: 16px !default;
$tab-rtl-pop-close-icon-left: 16px !default;
$tab-mob-close-icon-top-bottom-right: 12px !default;
$tab-rtl-mob-close-icon-top-bottom-left: 12px !default;
$tab-big-pop-close-top: 0 !default;
$tab-nrml-pop-close-top: 0 !default;
$tab-big-safari-close-icon-top: 0 !default;
$tab-nrml-safari-close-icon-top: -1px !default;
$tab-close-icon-color: $grey-dark-font !default;
$tab-active-close-icon-color: $grey-dark-font !default;
$tab-close-icon-hover-color: $grey-light-font !default;
$tab-close-icon-active-color: $grey-light-font !default;
$tab-alt-close-icon-color: $brand-primary-font !default;
$tab-alt-active-wrap-close-icon-color: $tab-alt-close-icon-color !default;
$tab-alt-active-close-icon-color: $brand-primary-font !default;
$tab-alt-active-hover-close-icon-color: $brand-primary-font !default;
$tab-pop-bg-color: $grey-dark !default;
$tab-pop-border: 1px solid $grey-base !default;
$tab-pop-border-radius: 4px !default;
$tab-big-nav-right-icon-padding: 0 !default;
$tab-nrml-nav-right-icon-padding: 0 !default;
$tab-mob-nav-right-icon-padding: 0 !default;
$tab-rtl-big-nav-right-icon-padding: 0 !default;
$tab-rtl-nrml-nav-right-icon-padding: 0 !default;
$tab-big-nav-left-icon-padding: 0 !default;
$tab-nrml-nav-left-icon-padding: 0 !default;
$tab-rtl-big-nav-left-icon-padding: 0 !default;
$tab-rtl-nrml-nav-left-icon-padding: 0 !default;
$tab-big-nav-tb-icon-top: 0 !default;
$tab-nrml-nav-tb-icon-top: 0 !default;
$tab-big-nav-icons-top: -2px !default;
$tab-nrml-nav-icons-top: 0 !default;
$tab-hover-nav-bg-color: $grey !default;
$tab-bg-hover-nav-bg-color: inherit !default;
$tab-nav-icon-color: $grey-dark-font !default;
$tab-alt-nav-icon-color: $grey-dark-font !default;
$tab-active-nav-icon-color: $grey-dark-font !default;
$tab-hover-nav-icon-color: $grey-dark-font !default;
$tab-alt-hover-nav-icon-color: $grey-light-font !default;
$tab-disable-nav-icon-color: rgba($grey-dark-font, .65) !default;
$tab-nav-focus-bg-color: $grey-dark !default;
$tab-nav-focus-icon-color: $grey-dark-font !default;
$tab-bg-nav-focus-icon-color: $grey-dark-font !default;
$tab-pop-icon-color: $grey-dark-font !default;
$tab-pop-icon-hover-bg-color: $grey !default;
$tab-pop-icon-hover-border: 1px solid $grey !default;
$tab-pop-up-icon-hover-border: $tab-pop-icon-hover-border !default;
$tab-pop-up-down-icon-hover-border: $tab-pop-icon-hover-border !default;
$tab-pop-icon-focus-border: 1px solid none !default;
$tab-pop-up-icon-focus-border: $tab-pop-icon-focus-border !default;
$tab-pop-icon-active-border: 1px solid none !default;
$tab-pop-up-icon-active-border: $tab-pop-icon-active-border !default;
$tab-pop-border-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
$tab-bg-hover-nav-icon-color: $grey-dark-font !default;
$tab-pop-box-shadow: 0 6px 12px rgba(0, 0, 0, .175) !default;
$tab-v-popup-box-shadow: $tab-pop-box-shadow !default;
$tab-pop-icon-transition: none !default;
$tab-pop-up-icon-transform: rotate(0deg) !default;
$tab-pop-down-icon-transform: rotate(0deg) !default;
$tab-alt-focused-active-wrap-focus-or-hover-color: color.adjust($brand-primary-font, $lightness: 15%) !default;
$tab-alt-focused-active-wrap-focus-and-hover-color: $brand-primary-darken-25 !default;
$tab-even-active-item-bottom-border-color: 0 !default;
$tab-fill-focused-active-wrap-focus-color: $brand-primary-darken-25 !default;
$tab-alt-active-wrap-hover-close-color: $brand-primary-font !default;
$tab-alt-pop-wrap-hover-color: $brand-primary !default;
$tab-alt-wrap-hover-color: $brand-primary-font !default;
$tab-nav-active-box-shadow: none !default;
$tab-nav-focus-border-color: $grey-e6 !default;
$tab-alt-nav-hover-bg-color: $grey-e6 !default;
$tab-bgr-active-last-margin: 1px 2px 0 0 !default;
$tab-bgr-hscroll-items-nav-width: 50px !default;
$tab-bgr-item-textwrap-height: $tab-big-height !default;
$tab-bgr-active-icon-top: -.5px !default;
$tab-bgr-icon-line-height: 1 !default;
$tab-bgr-mob-item-iconright-margin: 0 !default;
$tab-bgr-pop-item-textwrap-height: $tab-big-pop-item-height !default;
$tab-bgr-scroll-nav-arrow-before-top: 0 !default;
$tab-bgr-hor-pop-lineheight: 42px !default;
$tab-bgr-hor-focus-pop-hover-top: -2px !default;
$tab-bgr-bottom-active-close-top: .5px !default;
$tab-bgr-bottom-active-itop-close-top: 1.5px !default;
$tab-bgr-bottom-active-text-padding-top: .5px !default;
$tab-bgr-bottom-active-last-close-top: 0 !default;
$tab-bgr-vertical-icon-min-height: 38px !default;
$tab-bgr-vertical-icon-min-width: auto !default;
$tab-bgr-rtl-bottom-item-margin: 0 0 0 2px !default;
$tab-bgr-rtl-bottom-active-margin: 0 0 0 2px !default;
$tab-bgr-fill-first-last-padding: 0 !default;
$tab-bgr-fill-item-textwrap-height: $tab-big-fill-height !default;
$tab-bgr-fill-active-ileft-textwrap-height: 50px !default;
$tab-bgr-fill-focused-wrap-height: $tab-focus-big-fill-height !default;
$tab-bgr-rtl-icon-right-margin: 0 !default;
$tab-bgr-background-active-padding: $tab-alt-big-active-item-padding !default;
$tab-bgr-fill-active-item-padding: 0 !default;
$tab-bgr-item-text-margin-bottom: 0 !default;
$tab-nrml-hscroll-items-nav-width: 40px !default;
$tab-nrml-hscroll-items-bdr-radius: 0 !default;
$tab-nrml-item-text-wrap-height: $tab-nrml-height !default;
$tab-nrml-item-tabicon-line-height: 1 !default;
$tab-nrml-pop-item-textwrap-height: $tab-nrml-pop-item-height !default;
$tab-nrml-scroll-nav-arrow-before-top: 0 !default;
$tab-nrml-hor-pop-lineheight: 34px !default;
$tab-nrml-mob-hor-pop-lineheight: 43px !default;
$tab-nrml-hor-focus-pop-lineheight: 32px !default;
$tab-nrml-hor-focus-pop-hover-top: -.5px !default;
$tab-nrml-vertical-icon-min-height: 40px !default;
$tab-nrml-vertical-icon-min-width: 33px !default;
$tab-nrml-vertical-tabicon-margin: 0 !default;
$tab-nrml-vertical-rtl-active-margin: 0 0 0 2px !default;
$tab-nrml-fill-item-textwrap-height: $tab-nrml-fill-height !default;
$tab-nrml-fill-focused-wrap-height: $tab-focus-nrml-fill-height !default;
$tab-nrml-rtl-icon-right-margin: 0 !default;
$tab-nrml-hdr-before-display: block !default;
$tab-nrml-item-active-position: unset !default;
$tab-nrml-item-active-hover-before-left: unset !default;
$tab-nrml-item-active-hover-before-right: unset !default;
$tab-nrml-item-active-before-bg-font: unset !default;
$tab-nrml-item-active-before-bottom: unset !default;
$tab-nrml-item-active-before-content: unset !default;
$tab-nrml-item-active-before-height: unset !default;
$tab-nrml-item-active-before-width: unset !default;
$tab-nrml-item-active-before-left: unset !default;
$tab-nrml-item-active-before-position: unset !default;
$tab-nrml-item-active-before-transition: unset !default;
$tab-nrml-item-active-after-font: unset !default;
$tab-nrml-item-active-after-content: unset !default;
$tab-nrml-item-active-after-display: unset !default;
$tab-nrml-item-active-after-font-weight: unset !default;
$tab-nrml-item-active-after-height: unset !default;
$tab-nrml-item-active-after-overflow: unset !default;
$tab-nrml-hscroll-bar-padding: 0 !default;
$tab-nrml-vertical-indicator-bdr-radius: 0 !default;
$tab-nrml-indicator-transition: left .125s cubic-bezier(.35, 0, .25, 1), right .25s cubic-bezier(.35, 0, .25, 1) !default;
$tab-nrml-active-item-tabicon-before-top: -1px !default;
$tab-nrml-bottom-active-before-top: unset !default;
$tab-nrml-vertical-indicator-transition: top .125s cubic-bezier(.35, 0, .25, 1), bottom .25s cubic-bezier(.35, 0, .25, 1) !default;
$tab-nrml-vertical-hover-before-height: unset !default;
$tab-nrml-vertical-before-bottom: unset !default;
$tab-nrml-vertical-before-height: unset !default;
$tab-nrml-vertical-before-left: unset !default;
$tab-nrml-vertical-before-transition: unset !default;
$tab-nrml-vertical-text-position: unset !default;
$tab-nrml-vertical-wrap-before-content: unset !default;
$tab-nrml-vertical-wrap-before-display: unset !default;
$tab-nrml-vertical-wrap-before-position: unset !default;
$tab-nrml-vertical-wrap-before-top: unset !default;
$tab-nrml-vertical-wrap-before-width: unset !default;
$tab-nrml-vertical-wrap-before-border: unset !default;
$tab-nrml-vertical-indicator-width: 2px !default;
$tab-nrml-bottom-wrap-before-top: unset !default;
$tab-nrml-background-vertical-indicator-display: none !default;
$tab-nrml-background-active-padding: $tab-alt-nrml-active-item-padding !default;
$tab-nrml-item-text-margin-bottom: 0 !default;
$tab-header-font-weight: normal !default;
$tab-header-before-border-color: $tab-hdr-bdr-color !default;
$tab-header-before-border-width: 0 0 1px !default;
$tab-header-border-bottom: 0 !default;
$tab-item-hover-bg: inherit !default;
$tab-item-wrap-border: 0 !default;
$tab-clone-item-wrap-border: 0 !default;
$tab-item-wrap-hover-border: 0 !default;
$tab-item-wrap-hover-border-radius: 4px !default;
$tab-item-active-hover-bg: inherit !default;
$tab-item-active-wrap-border: 0 !default;
$tab-active-wrap-position: unset !default;
$tab-active-wrap-before-border: unset !default;
$tab-active-wrap-before-content: unset !default;
$tab-active-wrap-before-display: unset !default;
$tab-active-wrap-before-position: unset !default;
$tab-active-wrap-before-top: unset !default;
$tab-active-wrap-before-width: unset !default;
$tab-focused-wrap-focus-border: 0 !default;
$tab-focused-wrap-focus-icon-color: $tab-focus-text-color !default;
$tab-content-font-size: 14px !default;
$tab-item-active-tabwrap-border: 0 !default;
$tab-item-left-icon-before-top: 2px !default;
$tab-item-icon-before-top: 2px !default;
$tab-item-icon-before-left: 2px !default;
$tab-item-active-border-bottom: 1px solid $grey-99 !default;
$tab-pop-wrap-hover-border: 0 !default;
$tab-pop-wrap-hover-border-radius: 4px !default;
$tab-pop-wrap-hover-close-color: $tab-hover-text-color !default;
$tab-pop-wrap-active-border-color: unset !default;
$tab-pop-wrap-active-icon-font: $tab-pop-text-color !default;
$tab-pop-icon-border: 0 !default;
$tab-pop-focus-icon-active-bg: $tab-pop-icon-hover-bg-color !default;
$tab-pop-focus-icon-active-color: $tab-nav-focus-icon-color !default;
$tab-pop-focus-bg: transparent !default;
$tab-pop-hover-bg: transparent !default;
$tab-pop-nav-active-bg: inherit !default;
$tab-pop-nav-active-border: 0 !default;
$tab-pop-nav-active-border-radius: 0 4px 0 0 !default;
$tab-pop-active-icons-color: $active-font-color !default;
$tab-scroll-nav-bg: inherit !default;
$tab-scroll-nav-arrow-font: $tab-nav-icon-color !default;
$tab-scroll-arrow-hover-border: $tab-item-active-wrap-border !default;
$tab-scroll-arrow-active-border: $tab-item-active-wrap-border !default;
$tab-scroll-focus-arrow-border: $tab-item-active-wrap-border !default;
$tab-scroll-focus-arrow-active-bg: $tab-nav-focus-bg-color !default;
$tab-scroll-focus-arrow-active-border-color: unset !default;
$tab-scroll-focus-arrow-active-color: $tab-nav-focus-icon-color !default;
$tab-scroll-active-border: 0 !default;
$tab-scroll-overlay-arrow-color: $tab-disable-nav-icon-color !default;
$tab-scroll-overlay-arrow-hover-color: $tab-disable-nav-icon-color !default;
$tab-scroll-overlay-arrow-hover-bg: $tab-hover-nav-bg-color !default;
$tab-scroll-overlay-arrow-hover-border-color: unset !default;
$tab-scroll-focused-nav-focus-icon-bg: $tab-nav-focus-bg-color !default;
$tab-scroll-focused-nav-focus-icon-border: $tab-pop-up-icon-focus-border !default;
$tab-bottom-border-color: unset !default;
$tab-bottom-border-width: 0 !default;
$tab-bottom-hidden-items-border-color: $grey-88 !default;
$tab-bottom-hidden-items-border-width: 1px 0 0 !default;
$tab-bottom-active-border-color: $tab-active-item-border-color !default;
$tab-bottom-active-border-width: 1px !default;
$tab-bottom-active-margin-top: 0 !default;
$tab-vertical-scroll-hover-border-color: $tab-vscroll-nav-border-color transparent transparent !default;
$tab-vertical-scroll-hover-active-bg: $tab-v-nav-focus-bg-color !default;
$tab-vertical-focus-active-arrow-color: none !default;
$tab-vertical-pop-icon-hover-color: $tab-hover-nav-icon-color !default;
$tab-vertical-pop-icon-active-color: $tab-nav-focus-icon-color !default;
$tab-vertical-focused-nav-focus-border-color: $tab-vertical-scroll-hover-border-color !default;
$tab-vertical-before-border-width: 0 1px 0 0 !default;
$tab-fill-wrap-hover-icon-color: $tab-hover-text-color !default;
$tab-fill-active-tabwrap-border-color: unset !default;
$tab-fill-active-text-before-border: unset !default;
$tab-fill-active-close-hover-color: $tab-alt-active-hover-close-icon-color !default;
$tab-fill-pop-active-icon-color: $tab-pop-text-color !default;
$tab-fill-pop-wrap-hover-bg: $tab-hover-bg-color !default;
$tab-fill-pop-wrap-hover-text-color: $tab-hover-text-color !default;
$tab-fill-pop-wrap-hover-icon-color: $tab-hover-text-color !default;
$tab-fill-pop-wrap-hover-close-color: $tab-hover-text-color !default;
$tab-fill-focused-active-tabwrap-focus-border-color: unset !default;
$tab-fill-focused-active-wrap-focus-text-color: $tab-fill-focused-active-wrap-focus-color !default;
$tab-fill-focused-active-wrap-focus-close-color: $tab-alt-active-hover-close-icon-color !default;
$tab-background-indicator-bottom: 0 !default;
$tab-background-wrap-border-color: unset !default;
$tab-background-close-hover-color: $tab-alt-active-wrap-close-icon-color !default;
$tab-background-pop-icon-hover-bg: $tab-alt-nav-hover-bg-color !default;
$tab-background-pop-icon-hover-border-color: $grey !default;
$tab-background-focused-active-wrap-focus-bg: $tab-key-alt-active-focus-bg-color !default;
$tab-background-focused-active-wrap-focus-border-color: unset !default;
$tab-background-wrap-hover-text-color: $tab-alt-wrap-hover-color !default;
$tab-background-wrap-hover-icon-color: $tab-alt-active-text-color !default;
$tab-background-wrap-hover-close-color: $tab-alt-wrap-hover-color !default;
$tab-background-close-hover-active-color: $tab-background-wrap-hover-close-color !default;
$tab-background-wrap-hover-bg-color: $tab-bg-item-wrap-hover-bg-color !default;
$tab-background-wrap-hover-border-color: unset !default;
$tab-background-active-bg: inherit !default;
$tab-background-active-text-color: $tab-alt-active-text-color !default;
$tab-background-active-icon-color: $tab-alt-active-text-color !default;
$tab-background-active-close-color: $tab-alt-active-close-icon-color !default;
$tab-background-active-wrap-bg: $tab-alt-active-bg-color !default;
$tab-background-active-wrap-border-color: unset !default;
$tab-background-active-wrap-border-radius: $tab-active-item-border-radius !default;
$tab-background-active-wrap-border-width: 0 !default;
$tab-background-active-hover-text-color: $tab-alt-active-text-color !default;
$tab-background-active-hover-icon-color: $tab-alt-active-text-color !default;
$tab-background-active-hover-close-color: $tab-alt-active-wrap-hover-close-color !default;
$tab-background-active-hover-bg: $tab-background-active-wrap-bg !default;
$tab-background-active-hover-border-color: $tab-background-active-wrap-border-color !default;
$tab-background-active-close-hover-color: $tab-background-active-hover-close-color !default;
$tab-background-activeitem-close-active-color: $tab-background-active-hover-close-color !default;
$tab-background-active-wrap-focus-bg: $tab-alt-active-focus-bg-color !default;
$tab-background-active-wrap-focus-text-color: $tab-alt-active-text-color !default;
$tab-background-active-wrap-focus-icon: $tab-alt-active-text-color !default;
$tab-background-active-wrap-focushover-text-color: $tab-alt-active-text-color !default;
$tab-background-active-wrap-focushover-close-color: $tab-alt-active-text-color !default;
$tab-background-active-text-icon-color: $tab-alt-active-text-color !default;
$tab-background-active-close-icon-color: $tab-alt-active-close-icon-color !default;
$tab-background-active-close-text-hover-color: $tab-alt-active-hover-close-icon-color !default;
$tab-background-pop-text-color: $tab-alt-text-color !default;
$tab-background-pop-wrap-hover-bg: $tab-alt-hover-bg-color !default;
$tab-background-pop-wrap-hover-text-color: $tab-alt-pop-wrap-hover-color !default;
$tab-background-pop-wrap-active-text-color: $tab-background-pop-text-color !default;
$tab-background-pop-wrap-active-icon-color: $tab-background-pop-text-color !default;
$tab-background-pop-wrap-active-close-color: $tab-background-pop-text-color !default;
$tab-background-scroll-bg: inherit !default;
$tab-background-scroll-arrow-border: 0 !default;
$tab-background-scroll-arrow-hover-bg: $tab-bg-hover-nav-bg-color !default;
$tab-background-scroll-arrow-hover-border-color: unset !default;
$tab-background-scroll-arrow-active-bg: unset !default;
$tab-background-scroll-arrow-active-color: $tab-alt-nav-icon-color !default;
$tab-background-scroll-focus-arrow-border: 0 !default;
$tab-background-scroll-focus-arrow-bg: $tab-nav-focus-bg-color !default;
$tab-background-nav-focus-active-bg: $tab-nav-focus-bg-color !default;
$tab-background-nav-focus-active-border-color: unset !default;
$tab-background-nav-focus-active-color: $tab-bg-hover-nav-icon-color !default;
$tab-background-hor-nav-bg: transparent !default;
$tab-background-pop-icon-color: $tab-alt-nav-icon-color !default;
$tab-background-pop-icon-border: 0 !default;
$tab-background-pop-active-hover-bg: $tab-background-pop-icon-hover-bg !default;
$tab-background-pop-active-hover-color: $tab-bg-hover-nav-icon-color !default;
$tab-background-focus-pop-bg: $tab-nav-focus-bg-color !default;
$tab-background-focus-pop-border: $tab-pop-up-icon-focus-border !default;
$tab-background-focus-pop-hover-bg: $tab-background-pop-icon-hover-bg !default;
$tab-background-focused-wrap-focus-bg: $tab-alt-hover-bg-color !default;
$tab-background-focused-wrap-focus-border-color: unset !default;
$tab-background-popicon-focus-active-bg: $tab-pop-focus-icon-active-bg !default;
$tab-background-popicon-focus-active-border-color: unset !default;
$tab-background-popicon-focus-active-color: $tab-bg-hover-nav-icon-color !default;
$tab-background-bottom-active-wrap-border-color: unset !default;
$tab-background-bottom-active-wrap-border-radius: 4px !default;
$tab-background-bottom-active-wrap-border-width: 0 !default;
$tab-background-vertical-left-active-border-color: $grey-light-font !default;
$tab-background-vertical-left-active-border-width: 0 1px 0 0 !default;
$tab-background-vertical-left-active-wrap-border-radius: 4px !default;
$tab-background-vertical-left-active-wrap-border-width: 0 !default;
$tab-background-vertical-right-active-border-width: 0 0 0 1px !default;
$tab-background-vertical-right-active-wrap-border-radius: 4px !default;
$tab-background-vertical-right-active-wrap-border-width: 0 !default;
$tab-background-focused-active-wrap-hover-bg: $tab-background-active-wrap-bg !default;
$tab-background-focused-active-wrap-hover-border: 0 !default;
$tab-background-focused-active-wrap-hover-border-radius: $tab-background-active-wrap-border-radius !default;
$tab-background-focused-active-wrap-focus-text-color: $tab-alt-focused-active-wrap-focus-or-hover-color !default;
$tab-background-focused-active-wrap-focus-icon-color: $tab-alt-active-hover-text-color !default;
$tab-background-focused-active-wrap-focus-close-color: $tab-alt-focused-active-wrap-focus-or-hover-color !default;
$tab-background-focused-active-wrap-hover-text-color: $tab-alt-focused-active-wrap-focus-or-hover-color !default;
$tab-background-focused-active-wrap-hover-icon-color: $tab-background-active-hover-icon-color !default;
$tab-background-focused-active-wrap-hover-close-color: $tab-alt-focused-active-wrap-focus-or-hover-color !default;
$tab-background-focused-active-focus-hover-text-color: $tab-alt-focused-active-wrap-focus-and-hover-color !default;
$tab-background-focused-active-focus-hover-close-color: $tab-alt-focused-active-wrap-focus-and-hover-color !default;
$tab-background-focused-wrap-focus-close-color: $tab-alt-text-color !default;
$tab-background-focused-active-wrap-icon-color: $tab-alt-active-hover-text-color !default;
$tab-background-accent-indicator-bg: $tab-border-color !default;
$tab-background-active-text-font-weight: $tab-light-font-weight !default;
$tab-background-text-color: $tab-alt-text-color !default;
$tab-fill-background-disable-text-color: $tab-disable-text-color !default;
$tab-bgr-icon-right-margin: 0 0 0 12px !default;
$tab-padding-none: 0 !default;
$tab-margin-none: 0 !default;
$tab-close-icon-margin: 0 0 0 8px !default;
$tab-popup-text-padding-right: 12px !default;
$tab-nrml-pop-text-margin: 0 0 0 10px !default;
$tab-mob-pop-text-margin: 0 0 0 12px !default;
$tab-nrml-pop-text-padding-right: 10px !default;
$tab-popup-down-icon-font-size: 12px !default;
$tab-clone-element-icon-margin: 0 0 0 8px !default;
$tab-border-none: 0 !default;
$tab-border-radius-none: 0 !default;
$tab-content-height: 100% !default;
$tab-auto-height: auto !default;
$tab-initial-height: initial !default;
$tab-inherit-height: inherit !default;
$tbar-margin-auto: auto !default;
@mixin tbar-alt-btn-animation-after {
  animation: none;
}
@mixin hscroll-alt-btn-animation-after {
  animation: none;
}

@mixin tab-mob-last-item-margin {
  @media screen and (max-width: 480px) {
    margin: $tab-mob-last-item-margin;
  }
}
@mixin tab-mob-close-icon-margin {
  @media screen and (max-width: 480px) {
    margin: $tab-mob-close-icon-margin;
  }
}
@include export-module('tab-layout') {
  .e-tab {
    display: block;
    position: relative;

    &.e-hidden {
      display: none;
    }

    &.e-fill-mode .e-content,
    &.e-fill-mode .e-content .e-item,
    &.e-fill-mode .e-content .e-item > div,
    &.e-fill-mode .e-content .e-item > div > .e-blazor-template {
      height: $tab-content-height;
    }

    .e-tab-header {
      height: $tab-nrml-height;
      min-height: $tab-nrml-min-height;

      @media screen and (max-width: 480px) {
        height: $tab-big-height;
        min-height: $tab-big-min-height;
      }

      &::before {
        content: '';
        position: absolute;
        display: $tab-nrml-hdr-before-display;
      }

      &:not(.e-vertical) {

        &::before {
          bottom: 0;
          top: 0;
          width: 100%;
        }
      }

      .e-toolbar-items {
        height: $tab-auto-height;
        margin: $tab-margin-none;
        min-height: $tab-nrml-min-height;
        position: relative;

        @media screen and (max-width: 480px) {
          min-height: $tab-big-min-height;
        }

        &:not(.e-tbar-pos) .e-toolbar-item:first-child,
        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-nrml-first-item-margin;
        }

        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-nrml-last-item-margin;
          padding-bottom: $tab-big-boot-active-item-padding-bottom;
          @include tab-mob-last-item-margin;
        }

        .e-toolbar-item.e-active {
          position: $tab-nrml-item-active-position;

          &:hover::before {
            left: $tab-nrml-item-active-hover-before-left;
            right: $tab-nrml-item-active-hover-before-right;
          }

          &::before {
            background-color: $tab-nrml-item-active-before-bg-font;
            bottom: $tab-nrml-item-active-before-bottom;
            content: $tab-nrml-item-active-before-content;
            height: $tab-nrml-item-active-before-height;
            left: $tab-nrml-item-active-before-left;
            position: $tab-nrml-item-active-before-position;
            right: $tab-nrml-item-active-before-left;
            transition: $tab-nrml-item-active-before-transition;
          }

          &::after {
            color: $tab-nrml-item-active-after-font;
            content: $tab-nrml-item-active-after-content;
            display: $tab-nrml-item-active-after-display;
            font-weight: $tab-nrml-item-active-after-font-weight;
            height: $tab-nrml-item-active-after-height;
            overflow: $tab-nrml-item-active-after-overflow;
            visibility: $tab-nrml-item-active-after-overflow;
          }
        }
      }

      .e-toolbar-items.e-hscroll {

        &.e-scroll-device {
          padding: $tab-padding-none;

          .e-scroll-right-nav {
            display: none;
          }
        }

        .e-hscroll-bar {
          padding: $tab-nrml-hscroll-bar-padding;
        }

        .e-scroll-nav {
          width: $tab-nrml-hscroll-items-nav-width;
          border-radius: $tab-nrml-hscroll-items-bdr-radius;
        }

        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-nrml-scroll-last-item-margin;
          @include tab-mob-last-item-margin;

          &.e-active {
            margin: $tab-nrml-active-scroll-last-item-margin;
          }
        }
      }

      .e-hscroll-bar {
        overflow: hidden;
      }

      .e-indicator {
        display: $tab-anim-border-display;
        position: absolute;

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

      &:not(.e-vertical) .e-indicator {
        bottom: 0;
        height: $tab-border-height;
        left: 0;
        right: 0;
        border-radius: $tab-nrml-vertical-indicator-bdr-radius;
        transition: $tab-nrml-indicator-transition;
      }

      .e-toolbar-item {

        &.e-hidden {
          display: none;
        }

        &:not(.e-separator) {
          height: $tab-nrml-height;
          margin: $tab-nrml-item-margin;
          min-height: $tab-nrml-min-height;
          min-width: auto;
          padding: $tab-nrml-item-padding;

          @media screen and (max-width: 480px) {
            height: $tab-big-height;
            min-height: $tab-big-min-height;
          }
        }

        .e-tab-wrap {
          height: $tab-nrml-height;
          padding: $tab-nrml-wrap-padding;
          width: 100%;

          @media screen and (max-width: 480px) {
            height: $tab-big-height;
            padding: $tab-mob-wrap-padding;
          }
        }

        .e-text-wrap {
          align-content: center;
          align-items: center;
          display: inline-flex;
          height: $tab-nrml-item-text-wrap-height;

          @media screen and (max-width: 480px) {
            height: $tab-big-height;
          }
        }

        .e-tab-text {
          display: inherit;
          font-family: $tab-font-family;
          font-size: $tab-nrml-font-size;
          font-weight: $tab-font-weight;
          text-transform: $tab-text-transform;
          align-self: auto;
          margin-bottom: $tab-nrml-item-text-margin-bottom;

          @media screen and (max-width: 480px) {
            font-size: $tab-big-font-size;
          }
        }

        &.e-active {
          margin: $tab-nrml-boot-item-margin;
          padding-bottom: $tab-nrml-even-boot-active-item-padding-bottom;

          @media screen and (max-width: 480px) {
            margin: $tab-mob-boot-item-margin;
          }

          .e-text-wrap {
            height: $tab-nrml-item-text-wrap-height;
            margin-top: $tab-active-text-container-margin;

            @media screen and (max-width: 480px) {
              height: $tab-big-active-text-container-height;
            }
          }

          .e-tab-wrap {
            margin-bottom: $tab-nrml-active-item-wrap-margin-bottom;
          }

          .e-tab-text {
            font-weight: $tab-semi-font-weight;
          }

          .e-tab-icon::before {
            top: $tab-item-icon-before-top;
            left: $tab-item-icon-before-left;
          }

          .e-icon-top.e-tab-icon::before,
          .e-icon-bottom.e-tab-icon::before {
            left: 0;
          }

          &.e-ileft,
          &.e-iright {

            .e-text-wrap {
              height: $tab-nrml-item-text-wrap-height;
              padding: $tab-padding-none;

              @media screen and (max-width: 480px) {
                height: $tab-big-active-it-text-container-height;
              }
            }
          }
        }

        .e-icons.e-close-icon {
          display: none;
          margin: $tab-nrml-close-icon-margin;
          min-width: $tab-close-icon-minwidth;
          @include tab-mob-close-icon-margin;
        }

        .e-close-icon,
        .e-close-icon::before {
          font-size: $tab-nrml-close-icon-size;

          @media screen and (max-width: 480px) {
            font-size: $tab-mob-close-icon-size;
          }
        }

        .e-close-icon::before {
          top: 1px;
        }

        .e-icons.e-tab-icon {
          display: inline-flex;
          height: $tab-nrml-icon-container-height;
          min-width: $tab-nrml-icon-container-size;
          width: $tab-nrml-icon-container-width;
          line-height: $tab-nrml-item-tabicon-line-height;

          @media screen and (max-width: 480px) {
            height: $tab-mob-icon-container-height;
            width: $tab-mob-icon-container-size;
          }
        }

        .e-tab-icon,
        .e-tab-icon::before {
          font-size: $tab-nrml-icon-size;

          @media screen and (max-width: 480px) {
            font-size: $tab-mob-icon-size;
          }
        }

        .e-tab-icon::before {
          position: relative;
          top: $tab-item-icon-before-top;
          left: $tab-item-icon-before-left;
        }

        .e-icon-top.e-tab-icon::before,
        .e-icon-bottom.e-tab-icon::before {
          left: 0;
        }

        &.e-icon {

          .e-tab-wrap {
            justify-content: center;
            padding: $tab-nrml-io-wrap-padding;

            @media screen and (max-width: 480px) {
              padding: $tab-big-wrap-padding;
            }
          }
        }

        .e-icon-right {
          margin: $tab-close-icon-margin;

          @media screen and (max-width: 480px) {
            margin: $tab-bgr-mob-item-iconright-margin;
          }
        }

        .e-icon-left + .e-tab-text {
          margin: $tab-nrml-it-text-margin;

          @media screen and (max-width: 480px) {
            margin: $tab-mob-it-text-margin;
          }
        }

        &.e-itop,
        &.e-ibottom {
          height: $tab-nrml-icon-top-bottom-item-height;

          @media screen and (max-width: 480px) {
            height: $tab-nrml-icon-top-bottom-item-height;
          }

          .e-tab-wrap {
            align-items: center;
            display: flex;
            height: $tab-nrml-icon-top-bottom-item-height;
            position: relative;

            @media screen and (max-width: 480px) {
              height: $tab-nrml-icon-top-bottom-item-height;
            }

            &:focus {

              .e-text-wrap {
                height: $tab-auto-height;
              }
            }
          }

          .e-text-wrap {
            display: block;
            height: $tab-auto-height;
          }

          &.e-active {

            .e-tab-wrap {

              &:focus {

                .e-text-wrap {
                  height: $tab-auto-height;
                }
              }

              .e-text-wrap {
                height: $tab-auto-height;
              }
            }
          }

          .e-close-icon {
            position: absolute;
            right: $tab-nrml-close-icon-top-bottom-right;
            top: calc(50% - 6px);

            @media screen and (max-width: 480px) {
              right: $tab-mob-close-icon-top-bottom-right;
            }
          }
        }

        &.e-itop .e-tab-text {
          margin: $tab-nrml-icon-top-margin;

          @media screen and (max-width: 480px) {
            margin: $tab-big-icon-top-margin;
          }
        }

        &.e-ibottom .e-tab-text {
          margin: $tab-nrml-icon-bottom-margin;

          @media screen and (max-width: 480px) {
            margin: $tab-big-icon-bottom-margin;
          }
        }

        .e-tab-icon.e-icon-top,
        .e-tab-icon.e-icon-bottom {
          align-items: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin: $tbar-margin-auto;
        }
      }

      .e-toolbar-pop {
        overflow-y: auto;
        padding: $tab-pop-padding;

        .e-toolbar-item {
          height: $tab-nrml-pop-item-height;
          min-height: $tab-nrml-pop-item-min-height;
          min-width: auto;

          @media screen and (max-width: 480px) {
            height: $tab-mob-pop-item-height;
            min-height: $tab-mob-pop-item-min-height;
          }

          &:not(.e-separator) {
            margin: $tab-pop-item-margin;
            padding: $tab-padding-none;
          }

          .e-tab-wrap {
            height: $tab-nrml-pop-item-height;
            padding: $tab-nrml-pop-item-wrap-padding;
            text-align: initial;

            @media screen and (max-width: 480px) {
              height: $tab-mob-pop-item-height;
              padding: $tab-mob-pop-item-wrap-padding;
            }
          }

          .e-text-wrap {
            height: $tab-nrml-pop-item-textwrap-height;
            width: 100%;

            @media screen and (max-width: 480px) {
              height: $tab-big-height;
            }
          }

          .e-tab-text {
            display: inline-flex;
            width: 100%;
          }

          .e-close-icon {
            margin: $tab-close-icon-margin;
          }

          .e-close-icon::before {
            top: $tab-nrml-pop-close-top;
          }

          .e-tab-text + .e-close-icon[style = 'display:block'] {
            padding-right: $tab-nrml-pop-text-padding-right;

            @media screen and (max-width: 480px) {
              padding-right: $tab-padding-none;
            }
          }

          &.e-itop,
          &.e-ibottom {
            height: $tab-pop-nrml-icon-top-bottom-item-height;

            @media screen and (max-width: 480px) {
              height: $tab-pop-big-icon-top-bottom-item-height;
            }

            &:not(.e-separator) {
              min-height: $tab-pop-nrml-icon-top-bottom-item-min-height;

              @media screen and (max-width: 480px) {
                min-height: $tab-pop-big-icon-top-bottom-item-min-height;
              }
            }

            .e-tab-wrap {
              height: $tab-pop-nrml-icon-top-bottom-item-height;

              @media screen and (max-width: 480px) {
                height: $tab-pop-big-icon-top-bottom-item-height;
              }
            }

            .e-text-wrap {
              display: inline-flex;
              height: $tab-auto-height;
            }

            .e-tab-text {
              display: block;
              justify-content: center;
              margin: $tab-nrml-pop-text-margin;
              padding-left: $tab-padding-none;
              padding-right: $tab-nrml-pop-text-padding-right;

              @media screen and (max-width: 480px) {
                justify-content: center;
                margin: $tab-mob-pop-text-margin;
                padding-left: $tab-padding-none;
                padding-right: $tab-padding-none;
              }
            }

            .e-close-icon {
              right: $tab-nrml-pop-close-icon-top-bottom-right;
              top: initial;
            }
          }

          &.e-ibottom {

            .e-tab-text {
              margin: $tab-margin-none;
            }
          }

          .e-tab-icon.e-icon-top,
          .e-tab-icon.e-icon-bottom {
            display: inline-flex;
          }
        }
      }

      &.e-close-show {

        .e-icons.e-close-icon {
          align-items: center;
          align-self: center;
          display: inline-flex;

          @media screen and (max-width: 480px) {
            display: none;
          }
        }

        .e-toolbar-item.e-active .e-close-icon {

          @media screen and (max-width: 480px) {
            display: inline-flex;
          }
        }

        .e-toolbar-item.e-itop .e-text-wrap,
        .e-toolbar-item.e-ibottom .e-text-wrap {
          margin-right: $tab-nrml-text-container-margin-right;
        }
      }

      .e-scroll-nav {
        height: $tab-nrml-height;
        min-height: $tab-nrml-min-height;
        min-width: auto;
        width: auto;

        @media screen and (max-width: 480px) {
          height: $tab-big-height;
          min-height: $tab-big-min-height;
        }

        &.e-scroll-left-nav {
          padding: $tab-nrml-nav-left-icon-padding;
        }

        &.e-scroll-right-nav {
          padding: $tab-nrml-nav-right-icon-padding;

          @media screen and (max-width: 480px) {
            padding: $tab-mob-nav-right-icon-padding;
          }
        }

        .e-nav-left-arrow::before,
        .e-nav-right-arrow::before {
          font-size: $tab-nrml-nav-icon-size;
          line-height: $tab-nrml-nav-icon-container-line-height;
          position: relative;
          top: $tab-nrml-scroll-nav-arrow-before-top;
          vertical-align: initial;
        }

        .e-nav-arrow {
          font-size: $tab-nrml-nav-icon-size;
          height: $tab-nrml-nav-icon-container-size;
          line-height: $tab-nrml-nav-icon-container-line-height;
          width: $tab-nrml-nav-icon-container-size;

          @media screen and (max-width: 480px) {
            font-size: $tab-big-nav-icon-size;
            height: $tab-big-nav-icon-container-size;
            line-height: $tab-big-nav-icon-container-size;
            width: $tab-big-nav-icon-container-size;
          }
        }
      }

      .e-hor-nav {
        height: $tab-nrml-height;
        min-height: $tab-nrml-min-height;
        min-width: auto;
        padding: $tab-nrml-nav-right-icon-padding;
        width: auto;

        @media screen and (max-width: 480px) {
          height: $tab-big-height;
          min-height: $tab-big-min-height;
          padding: $tab-mob-nav-right-icon-padding;
        }

        .e-popup-up-icon,
        .e-popup-down-icon {
          font-size: $tab-nrml-nav-icon-size;
          height: $tab-nrml-nav-icon-container-size;
          line-height: $tab-nrml-nav-icon-container-line-height;
          width: $tab-nrml-nav-icon-container-size;

          @media screen and (max-width: 480px) {
            font-size: $tab-big-nav-icon-size;
            height: $tab-big-nav-icon-container-size;
            line-height: $tab-big-nav-icon-container-size;
            width: $tab-big-nav-icon-container-size;
          }

          &::before {
            font-size: $tab-nrml-nav-icon-size;
            line-height: $tab-nrml-nav-icon-container-line-height;
            position: relative;
            top: 0;
            vertical-align: initial;

            @media screen and (max-width: 480px) {
              font-size: $tab-mob-nav-icon-size;
            }
          }

          &:hover {
            line-height: $tab-nrml-hor-pop-lineheight;

            &::before {
              line-height: $tab-nrml-hor-pop-lineheight;
              top: 0;

              @media screen and (max-width: 480px) {
                line-height: $tab-nrml-mob-hor-pop-lineheight;
              }
            }
          }
        }

        .e-popup-up-icon {
          transform: $tab-pop-up-icon-transform;
          transition: $tab-pop-icon-transition;

          @media screen and (max-width: 480px) {
            transform: none;
            transition: none;
          }
        }

        .e-popup-down-icon {
          transform: $tab-pop-down-icon-transform;
          transition: $tab-pop-icon-transition;

          @media screen and (max-width: 480px) {
            transform: none;
            transition: none;
          }
        }

        &:focus {

          .e-popup-up-icon,
          .e-popup-down-icon {
            line-height: $tab-nrml-hor-focus-pop-lineheight;

            &::before {
              line-height: $tab-nrml-hor-focus-pop-lineheight;
              top: 0;

              @media screen and (max-width: 480px) {
                line-height: $tab-nrml-mob-hor-pop-lineheight;
              }
            }

            &:hover {
              line-height: $tab-nrml-hor-focus-pop-lineheight;
              top: $tab-nrml-hor-focus-pop-hover-top;
            }
          }
        }
      }

      &.e-horizontal-bottom {

        .e-toolbar-items .e-toolbar-item.e-active {
          position: $tab-nrml-item-active-position;

          &:hover::before {
            left: $tab-nrml-item-active-hover-before-left;
            right: $tab-nrml-item-active-hover-before-right;
          }

          &::before {
            background-color: $tab-nrml-item-active-before-bg-font;
            content: $tab-nrml-item-active-before-content;
            height: $tab-nrml-item-active-before-height;
            left: $tab-nrml-item-active-before-left;
            position: $tab-nrml-item-active-before-position;
            right: $tab-nrml-item-active-before-left;
            top: $tab-nrml-item-active-before-bottom;
            transition: $tab-nrml-item-active-before-transition;
          }

          &::after {
            color: $tab-nrml-item-active-after-font;
            content: $tab-nrml-item-active-after-content;
            display: $tab-nrml-item-active-after-display;
            font-weight: $tab-nrml-item-active-after-font-weight;
            height: $tab-nrml-item-active-after-height;
            overflow: $tab-nrml-item-active-after-overflow;
            visibility: $tab-nrml-item-active-after-overflow;
          }
        }

        &::before {
          bottom: auto;
        }

        .e-hscroll-bar {
          margin-top: $tab-nrml-active-item-tabicon-before-top;
        }

        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-nrml-even-last-item-margin;
          padding-bottom: $tab-padding-none;
          padding-top: $tab-nrml-even-boot-active-item-padding-bottom;

          @media screen and (max-width: 480px) {
            margin: $tab-mob-even-last-item-margin;
          }
        }

        .e-indicator {
          bottom: auto;
          top: 0;
        }

        .e-toolbar-item {

          &.e-active {
            margin: $tab-nrml-even-boot-item-margin;
            padding-bottom: $tab-padding-none;
            padding-top: $tab-nrml-boot-active-item-padding-bottom;

            @media screen and (max-width: 480px) {
              margin: $tab-mob-even-boot-item-margin;
            }

            .e-text-wrap {
              height: $tab-nrml-item-text-wrap-height;
              padding: $tab-padding-none;

              @media screen and (max-width: 480px) {
                height: $tab-big-active-text-container-height;
              }
            }

            .e-text-wrap::before,
            &:not(.e-separator):last-child .e-text-wrap::before {
              top: $tab-nrml-bottom-active-before-top;
            }

            &.e-itop {
              .e-tab-wrap:focus .e-close-icon::before {
                top: 0;
              }
            }
          }

          &.e-itop,
          &.e-ibottom {

            .e-text-wrap {
              height: $tab-initial-height;
            }

            &.e-active {

              .e-text-wrap {
                height: $tab-initial-height;
                padding: $tab-padding-none;
              }

              .e-text-wrap::before {
                bottom: auto;
                top: 0;
              }
            }
          }
        }
      }

      &.e-reorder-active-item .e-toolbar-pop .e-toolbar-item.e-active .e-text-wrap::before {
        display: none;
      }

      &.e-vertical {
        max-width: 150px;
        z-index: 1;

        &::before {
          bottom: 0;
          height: $tab-content-height;
          left: 0;
          top: 0;
        }

        &[style *= 'overflow: hidden']::before {
          bottom: $tab-nrml-vertical-scroll-nav-top-bottom;
          height: $tab-auto-height;
          top: $tab-nrml-vertical-scroll-nav-top-bottom;

          @media screen and (max-width: 480px) {
            bottom: 0;
            top: 0;
          }
        }

        .e-indicator {
          display: $tab-indicator-display;
          transition: $tab-nrml-vertical-indicator-transition;
          width: $tab-border-width;
        }

        .e-toolbar-items {
          height: $tab-inherit-height;
          flex-direction: column;
          align-items: normal;

          &.e-vscroll:not(.e-scroll-device) {
            padding: $tab-vscroll-nrml-padding;
          }
        }

        .e-toolbar-item {

          &:last-child {
            margin: $tab-margin-none;
          }

          &:not(.e-separator) {
            margin: $tab-margin-none;
          }

          .e-tab-wrap {
            padding: $tab-nrml-v-wrap-padding;
          }

          .e-text-wrap {
            position: relative;
            width: 100%;
          }

          .e-tab-text,
          .e-tab-icon::before {
            text-align: center;
            width: 100%;
          }

          .e-tab-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &.e-active {

            .e-text-wrap::before {
              display: none;
            }
          }

          &.e-ileft.e-icon {
            min-height: $tab-nrml-vertical-icon-min-height;
            min-width: $tab-nrml-vertical-icon-min-width;

            .e-tab-icon {
              margin: $tab-nrml-vertical-tabicon-margin;
            }
          }

          &.e-itop,
          &.e-ibottom {

            .e-close-icon {
              right: $tab-v-nrml-close-icon-top-bottom-right;
            }
          }
        }

        .e-toolbar-pop {
          top: initial !important; /* stylelint-disable-line declaration-no-important */
        }

        &.e-vertical-left {
          float: left;

          &::before {
            right: 0;
          }

          .e-indicator {
            left: auto;
            right: 0;
            @if ($skin-name == 'Material3') {
              border-radius: $tab-indicator-border-radius;
            }
            @else if ($skin-name == 'fluent2') {
              border-radius: $tab-nrml-vertical-indicator-bdr-radius;
            }
          }

          .e-toolbar-items .e-toolbar-item.e-active {

            &:hover::before {
              bottom: $tab-nrml-item-active-before-bottom;
              height: $tab-nrml-vertical-hover-before-height;
            }

            &::before {
              background-color: $tab-nrml-item-active-before-bg-font;
              bottom: $tab-nrml-vertical-before-bottom;
              content: $tab-nrml-item-active-before-content;
              height: $tab-nrml-vertical-before-height;
              left: $tab-nrml-vertical-before-left;
              position: $tab-nrml-item-active-before-position;
              right: $tab-nrml-item-active-before-bottom;
              transition: $tab-nrml-vertical-before-transition;
              width: $tab-nrml-item-active-before-width;
            }

            &::after {
              color: $tab-nrml-item-active-after-font;
              content: $tab-nrml-item-active-after-content;
              display: $tab-nrml-item-active-after-display;
              font-weight: $tab-nrml-item-active-after-font-weight;
              height: $tab-nrml-item-active-after-height;
              overflow: $tab-nrml-item-active-after-overflow;
              visibility: $tab-nrml-item-active-after-overflow;
            }
          }
        }

        &.e-vertical-right {
          float: right;

          &::before {
            right: auto;
          }

          .e-indicator {
            left: 0;
            right: auto;
            @if ($skin-name == 'Material3') {
              border-radius: $tab-nrml-vertical-right-indicator-border-radius;
            }
            @else if ($skin-name == 'fluent2') {
              border-radius: $tab-nrml-vertical-indicator-bdr-radius;
            }
          }

          .e-tab-wrap {
            text-align: right;
          }

          .e-toolbar-pop {

            .e-tab-text {
              width: auto;
            }
          }

          .e-toolbar-items .e-toolbar-item.e-active {

            &:hover::before {
              bottom: $tab-nrml-item-active-before-bottom;
              height: $tab-nrml-vertical-hover-before-height;
            }

            &::before {
              background-color: $tab-nrml-item-active-before-bg-font;
              bottom: $tab-nrml-vertical-before-bottom;
              content: $tab-nrml-item-active-before-content;
              height: $tab-nrml-vertical-before-height;
              left: $tab-nrml-item-active-before-bottom;
              position: $tab-nrml-item-active-before-position;
              right: $tab-nrml-vertical-before-left;
              transition: $tab-nrml-vertical-before-transition;
              width: $tab-nrml-item-active-before-width;
            }

            &::after {
              color: $tab-nrml-item-active-after-font;
              content: $tab-nrml-item-active-after-content;
              display: $tab-nrml-item-active-after-display;
              font-weight: $tab-nrml-item-active-after-font-weight;
              height: $tab-nrml-item-active-after-height;
              overflow: $tab-nrml-item-active-after-overflow;
              visibility: $tab-nrml-item-active-after-overflow;
            }
          }
        }

        .e-scroll-nav {
          height: $tab-nrml-vertical-nav-arrow-size;
          justify-content: center;
          min-height: $tab-nrml-vertical-nav-arrow-size;
          width: 100%;

          .e-nav-arrow {
            font-size: $tab-nrml-vertical-nav-arrow-font-size;
            height: $tab-nrml-vertical-nav-arrow-size;
            line-height: $tab-nrml-vertical-nav-arrow-line-height;
            margin: $tab-margin-none auto;
            width: $tab-nrml-vertical-nav-arrow-size;
          }
        }

        .e-hor-nav {
          padding: $tab-nrml-wrap-padding;
          width: 100%;

          .e-popup-up-icon,
          .e-popup-down-icon {
            height: $tab-content-height;
            transform: none;
            transition: none;
            width: 100%;

            &::before {
              float: left;
              font-family: $tab-font-family;
              font-size: $tab-nrml-font-icon-size;
              font-weight: $tab-font-weight;
              line-height: $tab-nrml-more-btn-line-height;
              text-align: left;
              text-transform: $tab-text-transform;
              transform: none;
              transition: none;
            }

            &::after {
              float: left;
              font-size: $tab-popup-down-icon-font-size;
              line-height: $tab-nrml-more-btn-line-height;
              margin: $tab-pop-more-icon-margin;
              vertical-align: initial;

              @media screen and (max-width: 480px) {
                font-size: $tab-big-font-size;
              }
            }
          }
        }

        .e-scroll-device {

          .e-scroll-nav,
          .e-scroll-overlay {
            display: none;
          }
        }

        &.e-toolpop {

          .e-toolbar-items {
            height: $tab-auto-height;
          }
        }
      }
    }

    &.e-rtl {

      .e-tab-header.e-vertical {

        .e-toolbar-items:not(.e-tbar-pos) {

          .e-toolbar-item:last-child {
            margin: $tab-margin-none;
          }
        }

        .e-toolbar-item {

          &:not(.e-separator) {
            margin: $tab-margin-none;

            &.e-itop .e-close-icon,
            &.e-ibottom .e-close-icon {
              left: $tab-v-rtl-nrml-close-icon-top-bottom-left;
            }
          }
        }

        .e-hor-nav {
          padding: $tab-nrml-wrap-padding;

          .e-popup-up-icon,
          .e-popup-down-icon {

            &::before {
              float: right;
            }

            &::after {
              float: right;
              margin: $tab-rtl-pop-more-icon-margin;
            }
          }
        }
      }
    }

    .e-content {
      position: relative;

      .e-item {

        &.e-view {
          bottom: 0;
          left: 0;
          overflow: hidden;
          position: absolute;
          right: 0;
          top: 0;
        }
      }

      > .e-item {
        display: none;

        &.e-active {
          background: inherit;
          display: block;
        }
      }

      &.e-progress {
        overflow: hidden;
      }
    }

    &.e-vertical-tab {

      .e-content {
        display: flex;

        .e-item.e-active {
          display: flex;
          flex: none;
        }

        .e-item,
        .e-item > :first-child {
          width: 100%;
        }
      }
    }

    &.e-vertical-icon {

      > .e-tab-header {
        height: $tab-nrml-tb-icon-height;
        min-height: $tab-nrml-tb-icon-min-height;

        &.e-reorder-active-item .e-toolbar-pop {

          .e-toolbar-item.e-active .e-tab-wrap::before,
          .e-toolbar-item:not(.e-separator):last-child.e-active .e-tab-wrap::before {
            display: none;
          }
        }

        > .e-toolbar-items {
          height: $tab-nrml-tb-icon-height;
        }

        .e-toolbar-item.e-active,
        .e-toolbar-item:not(.e-separator):last-child.e-active {
          .e-text-wrap {
            position: $tab-nrml-vertical-text-position;
          }

          .e-text-wrap::before {
            border: $tab-active-wrap-before-border;
            content: $tab-active-wrap-before-content;
            display: none;
            position: $tab-active-wrap-before-position;
            top: $tab-active-wrap-before-top;
            width: $tab-active-wrap-before-width;
          }

          .e-tab-wrap::before {
            content: $tab-nrml-vertical-wrap-before-content;
            display: $tab-nrml-vertical-wrap-before-display;
            position: $tab-nrml-vertical-wrap-before-position;
            top: $tab-nrml-vertical-wrap-before-top;
            width: $tab-nrml-vertical-wrap-before-width;
            border: $tab-nrml-vertical-wrap-before-border;
          }
        }

        .e-scroll-nav {
          height: $tab-nrml-icon-top-bottom-item-height;
        }

        .e-hor-nav {
          height: $tab-nrml-icon-top-bottom-item-height;

          .e-popup-up-icon::before,
          .e-popup-down-icon::before {

            @media screen and (max-width: 480px) {
              font-size: $tab-mob-nav-vicon-size;
            }
          }
        }

        &.e-vertical {

          .e-indicator {
            width: $tab-nrml-vertical-indicator-width;
          }

          .e-toolbar-item.e-active,
          .e-toolbar-item:not(.e-separator):last-child.e-active {

            .e-tab-wrap::before {
              display: none;
            }

            .e-text-wrap {
              position: relative;
            }
          }

          .e-scroll-nav {
            height: $tab-nrml-vertical-nav-arrow-size;
          }
        }

        &.e-horizontal-bottom {

          .e-toolbar-item.e-active,
          .e-toolbar-item:not(.e-separator):last-child.e-active {
            .e-tab-wrap::before {
              top: $tab-nrml-bottom-wrap-before-top;
            }
          }
        }
      }

      &.e-rtl .e-tab-header .e-toolbar-item.e-active {
        margin: $tab-nrml-vertical-rtl-active-margin;
      }

      &.e-vertical-tab {

        .e-tab-header.e-vertical .e-toolbar-items {
          height: $tab-inherit-height;
        }
      }
    }

    &.e-focused {

      .e-tab-header .e-toolbar-item {

        .e-tab-wrap:focus {
          height: $tab-nrml-height;

          .e-text-wrap {
            height: $tab-nrml-item-text-wrap-height;
          }
        }

        &.e-itop,
        &.e-ibottom {

          .e-tab-wrap:focus {
            height: $tab-nrml-icon-top-bottom-item-height;
          }

          .e-tab-wrap:focus .e-text-wrap {
            height: $tab-auto-height;
          }

          &.e-active .e-tab-wrap:focus .e-text-wrap {
            height: $tab-auto-height;
          }
        }
      }

      .e-tab-header .e-toolbar-pop {

        .e-toolbar-item {

          .e-tab-wrap:focus {
            height: $tab-nrml-pop-item-height;

            .e-text-wrap {
              height: $tab-nrml-pop-item-textwrap-height;
            }
          }

          &.e-itop .e-tab-wrap:focus,
          &.e-ibottom .e-tab-wrap:focus {
            height: $tab-nrml-height;
          }
        }
      }

      .e-tab-header .e-horizontal-bottom {

        .e-toolbar-item {

          &.e-active {

            .e-tab-wrap:focus .e-text-wrap {
              height: $tab-nrml-item-text-wrap-height;
              padding: $tab-padding-none;
            }
          }

          &.e-itop,
          &.e-ibottom {

            .e-tab-wrap:focus .e-text-wrap {
              height: $tab-auto-height;
            }

            &.e-active .e-tab-wrap:focus .e-text-wrap {
              height: $tab-auto-height;
            }
          }
        }
      }
    }

    &.e-template {

      .e-tab-header {

        .e-toolbar-items,
        .e-toolbar-pop {

          .e-toolbar-item .e-tab-wrap .e-text-wrap .e-tab-text > div {
            display: inherit;
          }
        }
      }

      .e-content {

        > .e-item {
          display: none;

          &.e-active {
            background: inherit;
            display: block;
          }
        }
      }
    }

    &.e-ie .e-tab-header {

      .e-hor-nav.e-ie-align,
      .e-scroll-nav.e-ie-align {
        display: flex;

        .e-popup-up-icon,
        .e-popup-down-icon {
          display: block;
          line-height: $tab-nrml-ie-pop-icon-line-height;
        }

        .e-nav-left-arrow,
        .e-nav-right-arrow {
          display: block;
          line-height: $tab-nrml-ie-nav-icon-line-height;
        }
      }

      .e-popup-up-icon,
      .e-popup-down-icon {
        transform: none;
        transition: none;
      }

      .e-popup-up-icon::before {
        transform: $tab-pop-up-icon-transform;
        transition: $tab-pop-icon-transition;

        @media screen and (max-width: 480px) {
          transform: none;
          transition: none;
        }
      }

      .e-popup-down-icon::before {
        transform: $tab-pop-down-icon-transform;
        transition: $tab-pop-icon-transition;

        @media screen and (max-width: 480px) {
          transform: none;
          transition: none;
        }
      }
    }

    &.e-edge .e-tab-header {

      .e-hor-nav.e-ie-align,
      .e-scroll-nav.e-ie-align {
        display: flex;

        .e-popup-up-icon,
        .e-popup-down-icon {
          display: block;
          line-height: $tab-nrml-edge-pop-icon-line-height;
          position: relative;
        }

        .e-nav-left-arrow,
        .e-nav-right-arrow {
          display: block;
          line-height: $tab-nrml-edge-nav-icon-line-height;
          position: relative;
        }
      }

      .e-popup-up-icon {
        transform: $tab-pop-up-icon-transform;
        transition: $tab-pop-icon-transition;

        @media screen and (max-width: 480px) {
          transform: none;
          transition: none;
        }
      }

      .e-popup-down-icon {
        transform: $tab-pop-down-icon-transform;
        transition: $tab-pop-icon-transition;

        @media screen and (max-width: 480px) {
          transform: none;
          transition: none;

          @media screen and (max-width: 480px) {
            transform: none;
            transition: none;
          }
        }
      }

      .e-popup-up-icon::before {
        transform: $tab-pop-up-icon-transform;
        transition: $tab-pop-icon-transition;

        @media screen and (max-width: 480px) {
          transform: none;
          transition: none;
        }
      }

      .e-popup-down-icon::before {
        transform: $tab-pop-down-icon-transform;
        transition: $tab-pop-icon-transition;

        @media screen and (max-width: 480px) {
          transform: none;
          transition: none;
        }
      }
    }

    &.e-safari .e-tab-header {

      .e-close-icon::before {
        top: $tab-nrml-safari-close-icon-top;
      }

      .e-hor-nav,
      .e-scroll-nav {

        .e-popup-up-icon::before,
        .e-popup-down-icon::before {
          top: 0;
        }

        .e-nav-left-arrow::before,
        .e-nav-right-arrow::before {
          top: 0;
        }
      }
    }

    &.e-disable {
      pointer-events: none;
    }

    &.e-fill {

      .e-tab-header {
        height: $tab-nrml-fill-height;
        min-height: $tab-nrml-fill-minheight;

        @media screen and (max-width: 480px) {
          height: $tab-mob-fill-height;
          min-height: $tab-mob-fill-height;
        }

        .e-indicator {
          display: none;
        }

        .e-toolbar-items {
          height: $tab-auto-height;
          min-height: $tab-nrml-fill-minheight;

          @media screen and (max-width: 480px) {
            min-height: $tab-mob-fill-height;
          }

          &:not(.e-tbar-pos) .e-toolbar-item:first-child,
          &:not(.e-tbar-pos) .e-toolbar-item:last-child {
            margin: $tab-nrml-alt-first-item-margin;
            padding: $tab-nrml-background-active-padding;
          }
        }

        .e-toolbar-item {

          &:not(.e-separator) {
            height: $tab-nrml-fill-height;
            margin: $tab-alt-item-margin;
            min-height: $tab-nrml-fill-minheight;
            padding: $tab-nrml-background-active-padding;

            @media screen and (max-width: 480px) {
              height: $tab-mob-fill-height;
              min-height: $tab-mob-fill-height;
            }

            &.e-itop,
            &.e-ibottom {
              height: $tab-nrml-fill-icon-top-bottom-item-height;
              min-height: $tab-nrml-fill-icon-top-bottom-item-min-height;
            }
          }

          .e-tab-wrap {
            height: $tab-nrml-fill-height;
            padding: $tab-fill-nrml-wrap-padding;

            @media screen and (max-width: 480px) {
              height: $tab-mob-fill-height;
              padding: $tab-mob-fill-wrap-padding;
            }
          }

          .e-text-wrap {
            height: $tab-nrml-fill-item-textwrap-height;

            @media screen and (max-width: 480px) {
              height: $tab-mob-fill-height;
            }
          }

          &.e-active {
            padding: $tab-nrml-background-active-padding;

            .e-tab-wrap {
              margin-bottom: $tab-fill-nrml-active-item-wrap-margin-bottom;
            }

            .e-text-wrap {
              height: $tab-nrml-fill-item-textwrap-height;

              @media screen and (max-width: 480px) {
                height: $tab-mob-fill-height;
              }
            }

            .e-tab-text {
              font-weight: $tab-light-font-weight;
            }

            &.e-ileft .e-text-wrap,
            &.e-iright .e-text-wrap {
              height: $tab-fill-nrml-active-it-text-container-height;

              @media screen and (max-width: 480px) {
                height: $tab-fill-big-active-it-text-container-height;
              }
            }
          }

          &.e-itop .e-tab-wrap,
          &.e-ibottom .e-tab-wrap {
            height: $tab-nrml-fill-icon-top-bottom-item-height;
          }

          &.e-itop .e-text-wrap,
          &.e-ibottom .e-text-wrap {
            height: $tab-auto-height;
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item.e-itop:not(.e-separator),
          .e-toolbar-item.e-ibottom:not(.e-separator) {
            height: $tab-auto-height;
          }
        }

        &.e-horizontal-bottom {

          .e-toolbar-items:not(.e-tbar-pos) {

            .e-toolbar-item {

              &:first-child.e-active,
              &:last-child.e-active {
                padding: $tab-padding-none;
              }

              &.e-itop,
              &:first-child.e-itop,
              &:last-child.e-itop {
                padding-top: $tab-padding-none;
              }
            }
          }

          .e-toolbar-item {

            &.e-active {
              margin-right: $tab-margin-none;
              padding: $tab-padding-none;

              .e-text-wrap {
                height: $tab-nrml-fill-item-textwrap-height;

                @media screen and (max-width: 480px) {
                  height: $tab-mob-fill-height;
                }
              }
            }

            &.e-itop,
            &.e-ibottom {

              .e-tab-wrap:focus .e-text-wrap {
                height: $tab-nrml-fill-tb-wrap-height;
              }

              .e-text-wrap {
                height: $tab-auto-height;
              }
            }
          }
        }

        &.e-vertical {

          .e-toolbar-items {
            height: $tab-inherit-height;

            .e-toolbar-item {

              .e-tab-wrap {
                padding: $tab-nrml-v-wrap-padding;
              }
            }
          }
        }
      }

      &.e-focused {

        .e-tab-header .e-toolbar-item {

          .e-tab-wrap:focus {
            height: $tab-focus-nrml-fill-height;

            .e-text-wrap {
              height: $tab-nrml-fill-focused-wrap-height;
            }
          }

          &.e-active .e-tab-wrap:focus {

            .e-text-wrap {
              height: $tab-nrml-fill-focused-wrap-height;
            }
          }

          &.e-itop .e-tab-wrap:focus,
          &.e-ibottom .e-tab-wrap:focus {
            height: $tab-nrml-focus-fill-icon-top-bottom-item-height;

            .e-text-wrap {
              height: $tab-auto-height;

              @media screen and (max-width: 480px) {
                height: $tab-auto-height;
              }
            }
          }
        }
      }

      &.e-rtl {

        .e-tab-header .e-toolbar-item:not(.e-separator) {
          margin: $tab-nrml-rtl-alt-item-margin;
        }
      }

      &.e-vertical-icon {

        > .e-tab-header {
          height: $tab-nrml-tb-icon-height - $tab-nrml-tb-icon-height-calc;
          min-height: $tab-nrml-tb-icon-min-height - 2;
        }
      }
    }

    &.e-background {

      .e-tab-header {

        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-nrml-alt-first-item-margin;
          padding: $tab-nrml-background-active-padding;
        }

        .e-toolbar-item {

          &:not(.e-separator) {
            margin: $tab-margin-none;
            padding: $tab-nrml-background-active-padding;
          }

          .e-tab-wrap {
            padding: $tab-bg-nrml-wrap-padding;

            @media screen and (max-width: 480px) {
              padding: $tab-mob-fill-wrap-padding;
            }
          }

          &.e-active {
            padding: $tab-nrml-background-active-padding;
            @if ($skin-name == 'fluent2') {
              &::before {
                background-color: $tab-background-text-color;
              }
            }

            .e-tab-wrap {
              margin-bottom: $tab-bg-nrml-active-item-wrap-margin-bottom;
            }

            .e-tab-text {
              font-weight: $tab-background-active-text-font-weight;
            }
          }
        }

        &.e-vertical {

          .e-indicator {
            display: $tab-nrml-background-vertical-indicator-display;
          }

          .e-toolbar-items {

            .e-toolbar-item {

              .e-tab-wrap {
                padding: $tab-nrml-v-wrap-padding;
              }
            }
          }
        }

        &.e-horizontal-bottom {

          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child.e-active,
          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
            padding: $tab-padding-none;
          }

          .e-toolbar-item.e-active {
            margin: $tab-margin-none;
            padding: $tab-padding-none;
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item {

            &.e-active {

              .e-text-wrap {
                height: $tab-nrml-pop-item-textwrap-height;
              }
            }
          }
        }
      }

      &.e-rtl {

        .e-tab-header .e-toolbar-item {

          &:not(.e-separator) {
            margin: $tab-nrml-rtl-alt-item-margin;
          }
        }
      }
    }

    &.e-rtl {

      .e-tab-header {

        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-nrml-rtl-item-margin;
        }

        .e-toolbar-item:not(.e-separator) {
          margin: $tab-nrml-rtl-item-margin;

          .e-icon-right {
            margin: $tab-nrml-rtl-icon-right-margin;
          }

          .e-icon-left + .e-tab-text {
            margin: $tab-rtl-nrml-it-text-margin;
          }

          .e-icons.e-close-icon {
            margin: $tab-rtl-nrml-close-icon-margin;
          }

          &.e-itop .e-close-icon,
          &.e-ibottom .e-close-icon {
            left: $tab-rtl-nrml-close-icon-top-bottom-left;
            right: auto;
          }
        }

        &.e-close-show {

          .e-toolbar-item.e-itop .e-text-wrap,
          .e-toolbar-item.e-ibottom .e-text-wrap {
            margin-left: $tab-rtl-nrml-text-container-margin-left;
            margin-right: $tab-rtl-nrml-text-container-margin-right;
          }
        }

        &.e-horizontal-bottom {

          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
            margin: $tab-nrml-vertical-rtl-active-margin;
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item {
            margin: $tab-margin-none;

            .e-tab-text {
              padding-left: $tab-rtl-nrml-pop-text-padding-left;
              padding-right: $tab-padding-none;

              @media screen and (max-width: 480px) {
                padding-left: $tab-padding-none;
              }
            }

            .e-icons.e-close-icon {
              margin: $tab-rtl-nrml-pop-close-icon-margin;
            }

            .e-close-icon {
              left: $tab-rtl-pop-close-icon-left;
              right: auto;
            }

            &.e-itop .e-close-icon,
            &.e-ibottom .e-close-icon {
              left: $tab-rtl-big-pop-close-icon-top-bottom-left;
              right: auto;
            }

            &.e-itop .e-tab-text,
            &.e-ibottom .e-tab-text {
              margin: $tab-margin-none;
              padding-left: $tab-nrml-pop-text-padding-right;
              padding-right: $tab-padding-none;

              @media screen and (max-width: 480px) {
                margin: $tab-margin-none;
                padding-left: $tab-nrml-pop-text-padding-right;
                padding-right: $tab-padding-none;
              }
            }
          }
        }

        .e-hor-nav,
        .e-scroll-right-nav {
          padding: $tab-rtl-nrml-nav-right-icon-padding;
        }

        .e-scroll-left-nav {
          padding: $tab-rtl-nrml-nav-left-icon-padding;
        }
      }
    }

    &.e-vertical-tab.e-icon-tab {

      .e-tab-header.e-vertical {

        .e-hor-nav .e-popup-up-icon,
        .e-hor-nav .e-popup-down-icon {

          &::before {
            display: none;
          }

          &::after {
            margin: $tab-margin-none;
            width: 100%;
          }
        }
      }
    }
  }

  .e-tab-clone-element {
    overflow: visible;
    z-index: 10000;

    &:not(.e-separator) {
      height: $tab-nrml-height;
      margin: $tab-nrml-item-margin;
      min-height: $tab-nrml-min-height;
      min-width: auto;
      padding: $tab-nrml-item-padding;

      @media screen and (max-width: 480px) {
        height: $tab-big-height;
        min-height: $tab-big-min-height;
      }
    }

    .e-tab-wrap {
      height: $tab-nrml-height;
      padding: $tab-nrml-wrap-padding;
      width: 100%;

      @media screen and (max-width: 480px) {
        height: $tab-big-height;
        padding: $tab-mob-wrap-padding;
      }
    }

    .e-text-wrap {
      align-content: center;
      align-items: center;
      display: inline-flex;
      height: $tab-nrml-item-text-wrap-height;

      @media screen and (max-width: 480px) {
        height: $tab-big-height;
      }
    }

    .e-tab-text {
      display: inherit;
      font-family: $tab-font-family;
      font-size: $tab-nrml-font-size;
      font-weight: $tab-font-weight;
      text-transform: $tab-text-transform;
      align-self: auto;

      @media screen and (max-width: 480px) {
        font-size: $tab-big-font-size;
      }
    }

    .e-icons.e-close-icon {
      display: none;
    }

    .e-close-icon,
    .e-close-icon::before {
      font-size: $tab-nrml-close-icon-size;

      @media screen and (max-width: 480px) {
        font-size: $tab-mob-close-icon-size;
      }
    }

    .e-close-icon::before {
      top: 1px;
    }

    .e-icons.e-tab-icon {
      display: inline-flex;
      height: $tab-nrml-icon-container-height;
      min-width: $tab-nrml-icon-container-size;
      width: $tab-nrml-icon-container-width;
      line-height: $tab-nrml-item-tabicon-line-height;

      @media screen and (max-width: 480px) {
        height: $tab-mob-icon-container-height;
        width: $tab-mob-icon-container-size;
      }
    }

    .e-tab-icon,
    .e-tab-icon::before {
      font-size: $tab-nrml-icon-size;

      @media screen and (max-width: 480px) {
        font-size: $tab-mob-icon-size;
      }
    }

    &.e-icon {

      .e-tab-wrap {
        justify-content: center;
        padding: $tab-nrml-io-wrap-padding;

        @media screen and (max-width: 480px) {
          padding: $tab-big-wrap-padding;
        }
      }
    }

    .e-icon-right {
      margin: $tab-clone-element-icon-margin;

      @media screen and (max-width: 480px) {
        margin: $tab-bgr-mob-item-iconright-margin;
      }
    }

    .e-icon-left + .e-tab-text {
      margin: $tab-nrml-it-text-margin;

      @media screen and (max-width: 480px) {
        margin: $tab-mob-it-text-margin;
      }
    }

    &.e-itop,
    &.e-ibottom {
      height: $tab-nrml-icon-top-bottom-item-height;

      @media screen and (max-width: 480px) {
        height: $tab-nrml-icon-top-bottom-item-height;
      }

      .e-tab-wrap {
        align-items: center;
        display: flex;
        height: $tab-nrml-icon-top-bottom-item-height;
        position: relative;

        @media screen and (max-width: 480px) {
          height: $tab-nrml-icon-top-bottom-item-height;
        }

        &:focus {

          .e-text-wrap {
            height: $tab-auto-height;
          }
        }
      }

      .e-text-wrap {
        display: block;
        height: $tab-auto-height;
      }

      .e-close-icon {
        position: absolute;
        right: $tab-nrml-close-icon-top-bottom-right;
        top: calc(50% - 6px);

        @media screen and (max-width: 480px) {
          right: $tab-mob-close-icon-top-bottom-right;
        }
      }
    }

    &.e-itop .e-tab-text {
      margin: $tab-nrml-icon-top-margin;

      @media screen and (max-width: 480px) {
        margin: $tab-big-icon-top-margin;
      }
    }

    &.e-ibottom .e-tab-text {
      margin: $tab-nrml-icon-bottom-margin;

      @media screen and (max-width: 480px) {
        margin: $tab-big-icon-bottom-margin;
      }
    }

    .e-tab-icon.e-icon-top,
    .e-tab-icon.e-icon-bottom {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: $tbar-margin-auto;
    }

    &.e-close-show {

      .e-icons.e-close-icon {
        align-items: center;
        align-self: center;
        display: inline-flex;

        @media screen and (max-width: 480px) {
          display: none;
        }
      }

      .e-toolbar-item.e-itop .e-text-wrap,
      .e-toolbar-item.e-ibottom .e-text-wrap {
        margin-right: $tab-nrml-text-container-margin-right;
      }
    }
  }
}

@include export-module('tab-theme') {
  .e-tab {
    background: $tab-bg-color;
    border: $tab-border;

    .e-tab-header {
      background: inherit;
      border: $tab-border-none;
      border-radius: $tab-border-radius-none;
      box-shadow: none;
      font-weight: $tab-header-font-weight;
      border-bottom: $tab-header-border-bottom;

      &::before {
        border-color: $tab-header-before-border-color;
        border-style: solid;
      }

      &:not(.e-vertical) {
        &::before {
          border-width: $tab-header-before-border-width;
        }
      }

      &:not(.e-vertical) {

        .e-toolbar-item.e-active {
          border-bottom: $tab-item-active-border-bottom;
          margin-bottom: $tab-margin-none;
        }
      }

      .e-toolbar-items {
        background: inherit;
      }

      .e-indicator {
        background: $tab-border-color;
      }

      .e-toolbar-item {
        background: inherit;
        border: $tab-item-border;

        &:hover {
          background: $tab-item-hover-bg;
        }

        &.e-active {
          @if ($skin-name == 'Bootstrap5') {
            background: $tab-item-active-bg;
          }
        }

        &.e-active:hover {
          background: $tab-item-active-hover-bg;
        }

        .e-ripple-element {
          background: $tab-ripple-bg-color;
        }

        .e-tab-wrap {
          border-radius: $tab-active-item-border-radius;
          color: $tab-text-color;
          border: $tab-item-wrap-border;

          .e-tab-icon {
            color: $tab-wrap-comb-icon-color;
          }

          &:hover {
            background: $tab-item-hover-bg-color;
            border: $tab-item-wrap-hover-border;
            border-radius: $tab-item-wrap-hover-border-radius;

            @media screen and (max-width: 480px) {
              background: $tab-mob-item-hover-bg-color;
            }

            .e-tab-text,
            .e-tab-icon {
              color: $tab-hover-text-color;
            }
          }
        }

        &.e-active {
          border: $tab-active-item-border;
          border-radius: $tab-top-active-item-border-radius;

          .e-tab-wrap {
            border: $tab-item-active-tabwrap-border;
            &:hover {

              .e-tab-text,
              .e-tab-icon {
                color: $tab-active-text-color;
              }
            }
          }

          .e-text-wrap {
            position: $tab-active-wrap-position;

            &::before {
              border: $tab-active-wrap-before-border;
              content: $tab-active-wrap-before-content;
              display: $tab-active-wrap-before-display;
              position: $tab-active-wrap-before-position;
              width: $tab-active-wrap-before-width;
              @if ($skin-name == 'Material3' or $skin-name == 'tailwind3') {
                border-radius: $tab-text-wrap-border-radius;
                bottom: $tab-active-wrap-before-top;
              }
              @else {
                top: $tab-active-wrap-before-top;
              }
            }
          }

          .e-tab-text,
          .e-tab-icon {
            color: $tab-active-text-color;
          }

          &.e-ileft,
          &.e-iright {

            .e-tab-icon {
              color: $tab-comb-icon-color;
            }

            .e-tab-text {
              color: $tab-comb-text-color;
            }
          }

          .e-close-icon {
            color: $tab-active-close-icon-color;
          }
        }

        .e-close-icon {
          color: $tab-close-icon-color;

          &:hover {
            color: $tab-close-icon-hover-color;
          }

          &:active {
            color: $tab-close-icon-active-color;
          }

          @if $skin-name == 'bootstrap5.3' {
            &:focus {
              color: $tab-close-icon-focus-color;
            }
          }
        }

        &.e-disable.e-overlay {
          background: inherit;
          opacity: 1;
          @if $skin-name =='bootstrap5.3' {
            opacity: .65;
          }
          pointer-events: none;

          .e-tab-text,
          .e-tab-icon {
            color: $tab-disable-text-color;
          }
        }
      }

      &.e-reorder-active-item:not(.e-vertical) .e-toolbar-pop .e-toolbar-item.e-active {
        border: $tab-active-item-hide-border;
      }

      .e-toolbar-pop {
        background: $tab-pop-bg-color;
        border: $tab-pop-border;
        border-radius: $tab-pop-border-radius;
        box-shadow: $tab-pop-box-shadow;
        overflow-y: auto;

        &[e-animate = 'true'] {
          overflow-y: hidden;
        }

        @media screen and (max-width: 480px) {
          box-shadow: $tab-pop-box-shadow;
        }

        .e-toolbar-item {

          .e-tab-wrap {

            .e-tab-text,
            .e-tab-icon {
              color: $tab-pop-text-color;
            }

            &:hover {
              background: $tab-hover-bg-color;
              border: $tab-pop-wrap-hover-border;
              border-radius: $tab-pop-wrap-hover-border-radius;

              .e-tab-text,
              .e-tab-icon,
              .e-close-icon {
                color: $tab-pop-wrap-hover-close-color;
                @if $skin-name == 'bootstrap5.3' {
                  color: $tab-alt-active-style-hover-text-color;
                }
              }
            }

            &:active {
              background: $tab-active-bg-color;
              border-color: $tab-pop-wrap-active-border-color;

              .e-tab-text,
              .e-tab-icon {
                color: $tab-pop-wrap-active-icon-font;
              }
            }
          }

          &.e-active .e-tab-wrap {

            .e-tab-text,
            .e-tab-icon {
              color: $tab-active-text-color;
            }
          }

          &.e-disable.e-overlay {
            .e-tab-text,
            .e-tab-icon {
              color: $tab-disable-text-color;
            }
          }
        }
      }

      .e-scroll-nav,
      .e-hscroll:not(.e-scroll-device) .e-scroll-nav {
        background: $tab-scroll-nav-bg;
        border: $tab-border-none;

        .e-nav-arrow {
          color: $tab-scroll-nav-arrow-font;
          border: $tab-item-active-wrap-border;

          &:hover {
            background: $tab-hover-nav-bg-color;
            color: $tab-hover-nav-icon-color;
            border: $tab-scroll-arrow-hover-border;
          }

          &:active {
            box-shadow: none;
            border: $tab-scroll-arrow-active-border;
          }
        }

        &:focus {
          background: $tab-scroll-nav-bg;

          .e-nav-arrow {
            background: $tab-nav-focus-bg-color;
            color: $tab-nav-focus-icon-color;
            border: $tab-scroll-focus-arrow-border;

            &:hover {
              background: $tab-hover-nav-bg-color;
              color: $tab-hover-nav-icon-color;
            }

            &:active {
              background: $tab-scroll-focus-arrow-active-bg;
              border-color: $tab-scroll-focus-arrow-active-border-color;
              color: $tab-scroll-focus-arrow-active-color;
            }
          }
        }

        &:active {
          box-shadow: none;
          background: $tab-scroll-nav-bg;
          border: $tab-scroll-active-border;
          @if $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' {
            background: $tab-vertical-scroll-hover-active-bg;
            .e-nav-arrow {
              color: $tab-pop-focus-icon-active-color;
            }
          }
        }

        &.e-overlay {

          .e-nav-arrow {
            color: $tab-scroll-overlay-arrow-color;

            &:hover {
              color: $tab-scroll-overlay-arrow-hover-color;
              background: $tab-scroll-overlay-arrow-hover-bg;
              border-color: $tab-scroll-overlay-arrow-hover-border-color;
            }
          }
        }
      }

      .e-hor-nav,
      .e-hor-nav:not(.e-expended-nav) {
        background: transparent;
        border: $tab-border-none;

        .e-popup-up-icon,
        .e-popup-down-icon {
          color: $tab-pop-icon-color;
          border: $tab-pop-icon-border;

          &:hover {
            background: $tab-pop-icon-hover-bg-color;
            border: $tab-pop-up-icon-hover-border;
            border-radius: $tab-active-item-border-radius;
          }
        }

        .e-popup-down-icon {

          &:hover {
            color: $tab-hover-nav-icon-color;
          }
        }

        &:focus {
          background: $tab-pop-focus-bg;
          .e-popup-up-icon,
          .e-popup-down-icon {
            background: $tab-nav-focus-bg-color;
            border: $tab-pop-up-icon-focus-border;
            border-radius: $tab-active-item-border-radius;
            color: $tab-nav-focus-icon-color;

            &:hover {
              background: $tab-pop-icon-hover-bg-color;
              border: $tab-pop-up-down-icon-hover-border;
              border-radius: $tab-active-item-border-radius;
            }

            &:active {
              background: $tab-pop-focus-icon-active-bg;
              color: $tab-pop-focus-icon-active-color;
              border: $tab-pop-up-icon-active-border;
              border-radius: $tab-active-item-border-radius;
              box-shadow: $tab-pop-border-box-shadow;
            }
          }
        }

        &:hover {
          border: $tab-border-none;
          background: $tab-pop-hover-bg;

          &:active {
            background: transparent;
            @if $skin-name == 'bootstrap5.3' {
              background: $tab-pop-focus-bg;
            }
          }
        }

        &:active {
          box-shadow: none;
          background: $tab-pop-focus-bg;
          @if $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' {
            .e-popup-down-icon,
            .e-popup-up-icon {
              color: $tab-pop-focus-icon-active-color;
            }
          }
        }

        &.e-nav-active {
          background: $tab-pop-nav-active-bg;
          border: $tab-pop-nav-active-border;
          box-shadow: none;
          border-radius: $tab-pop-nav-active-border-radius;

          .e-icons {
            color: $tab-pop-active-icons-color;
          }

          &:focus {
            border: $tab-pop-nav-active-border;
          }
        }
      }

      &.e-horizontal-bottom {
        border-color: $tab-bottom-border-color;
        border-style: solid;
        border-width: $tab-bottom-border-width;

        &[style *= 'overflow: hidden'] {
          border-color: $tab-bottom-border-color;
          border-style: solid;
          border-width: $tab-bottom-border-width;
        }

        &[style *= 'overflow: hidden'] .e-toolbar-items {
          border-color: $tab-bottom-hidden-items-border-color;
          border-style: solid;
          border-width: $tab-bottom-hidden-items-border-width;
        }

        .e-toolbar-item {

          .e-tab-wrap:hover {
            border-radius: $tab-bottom-active-item-border-radius;
          }

          &.e-active {
            border-color: $tab-bottom-active-border-color;
            border-style: solid;
            border-width: $tab-bottom-active-border-width;
            margin-top: $tab-bottom-active-margin-top;
            border-radius: $tab-bottom-active-item-border-radius;
          }
        }
      }

      &.e-vertical {
        border-bottom: $tab-border-none;

        &::before {
          border-width: $tab-vertical-before-border-width;
        }

        .e-toolbar-item {

          &.e-active {
            border-bottom: $tab-hdr-border;
            border-top: $tab-hdr-border;
          }
        }

        &.e-vertical-left {

          .e-toolbar-item {

            .e-tab-wrap:hover {
              border-radius: $tab-left-active-item-border-radius;
            }

            &.e-active {
              border-radius: $tab-left-active-item-border-radius;
              border-right: $tab-item-active-border-bottom;
            }
          }
        }

        &.e-vertical-right {

          .e-toolbar-item {

            .e-tab-wrap:hover {
              border-radius: $tab-right-active-item-border-radius;
            }

            &.e-active {
              border-left: $tab-item-active-border-bottom;
              border-radius: $tab-right-active-item-border-radius;
            }
          }
        }

        .e-toolbar-pop {
          box-shadow: $tab-v-popup-box-shadow;
        }

        .e-scroll-nav {
          background: inherit;
          border: $tab-vscroll-nav-border;

          &.e-scroll-up-nav {
            border-bottom-color: $tab-vscroll-nav-border-color;
          }

          &.e-scroll-down-nav {
            border-top-color: $tab-vscroll-nav-border-color;
          }

          .e-nav-arrow {
            border: $tab-border-none;

            &:hover {
              background: none;
            }
          }

          &:hover {
            background: $tab-v-nav-hover-bg-color;
            border-color: $tab-vertical-scroll-hover-border-color;

            &:active:focus {
              background: $tab-vertical-scroll-hover-active-bg;
            }

            .e-nav-arrow {
              color: $tab-hover-nav-icon-color;

              &:hover {
                background: none;
              }
            }
          }

          &:focus {
            background: $tab-v-nav-focus-bg-color;

            &:hover:active {

              .e-nav-arrow {
                color: $tab-vertical-focus-active-arrow-color;
              }
            }

            .e-nav-arrow {
              background: none;

              &:hover {
                background: none;
                border: $tab-border-none;
              }
            }
          }

          &:active {
            @if $skin-name == 'bootstrap5.3' {
              background: $tab-vertical-scroll-hover-active-bg;
            }
          }
        }

        .e-hor-nav {

          .e-popup-up-icon,
          .e-popup-down-icon {
            border: $tab-border-none;

            &:hover {
              background: inherit;
              border: $tab-border-none;
              color: $tab-vertical-pop-icon-hover-color;
            }
          }

          &:focus {

            .e-popup-up-icon,
            .e-popup-down-icon {
              background: inherit;
              border: $tab-border-none;

              &:hover,
              &:active,
              &:active:hover {
                background: inherit;
                border: $tab-border-none;
                box-shadow: none;
              }

              &:active {
                color: $tab-vertical-pop-icon-active-color;
              }
            }
          }

          &:hover {

            .e-popup-up-icon,
            .e-popup-down-icon {
              border: $tab-border-none;
            }
          }
        }
      }
    }

    &.e-focused > .e-tab-header {

      .e-toolbar-item {
        @if ($skin-name == 'Material3') {
          &.e-active .e-tab-wrap:focus {
            background: $tab-active-focus-bg-color;

            .e-tab-icon,
            .e-tab-text {
              color: $tab-active-text-color;
            }
          }
        }

        .e-tab-wrap:focus {
          @if ($skin-name == 'fluent2') {
            box-shadow: $tab-focus-box-shadow;
          }
          background: $tab-focus-bg-color;
          border: $tab-focused-wrap-focus-border;

          .e-tab-icon,
          .e-tab-text {
            color: $tab-focus-text-color;
          }

          .e-tab-icon {
            color: $tab-focused-wrap-focus-icon-color;
          }
        }
      }

      .e-scroll-nav {

        &:focus {

          .e-nav-arrow {
            color: $tab-nav-focus-icon-color;
          }
        }
      }

      .e-hor-nav {

        &:focus {

          .e-popup-up-icon,
          .e-popup-down-icon {
            color: $tab-nav-focus-icon-color;
            background: $tab-scroll-focused-nav-focus-icon-bg;
            border: $tab-scroll-focused-nav-focus-icon-border;
          }
        }
      }

      &.e-vertical {

        .e-scroll-nav {

          &:focus {
            border-color: $tab-vertical-focused-nav-focus-border-color;

            .e-nav-arrow {
              border: $tab-border-none;
            }
          }
        }

        .e-hor-nav {

          .e-popup-up-icon,
          .e-popup-down-icon {
            border: $tab-border-none;
          }

          &:focus {
            outline: $tab-v-pop-focus-outline;
          }
        }
      }
    }

    &.e-disable {
      pointer-events: none;

      .e-tab-header {

        .e-indicator {
          background: $tab-disable-border-color;
        }

        .e-toolbar-item {

          .e-tab-wrap {
            color: $tab-disable-text-color;
          }

          &.e-active {

            .e-tab-text,
            .e-tab-icon {
              color: $tab-disable-active-text-color;
            }
          }
        }
      }

      .e-content {
        opacity: $tab-disable-cnt-opacity;
      }
    }

    &.e-fill {

      .e-tab-header {
        border-bottom: $tab-fill-hdr-border;

        .e-toolbar-items.e-hscroll {
          border: $tab-border-none;
        }

        .e-toolbar-item {
          border: $tab-border-none;

          .e-ripple-element {
            background: $tab-fill-ripple-bg-color;
          }

          .e-tab-wrap {
            color: $tab-text-color;

            &:hover {
              @if ($skin-name == 'fluent2') {
                background: $tab-fill-wrap-hover-bg;
              }
            }

            &:hover .e-tab-text,
            &:hover .e-tab-icon {
              color: $tab-hover-text-color;
              @if ($skin-name == 'fluent2') {
                color: $tab-fill-wrap-hover-icon-color;
              }
            }

            &:hover .e-tab-icon {
              color: $tab-fill-wrap-hover-icon-color;
            }

            @if ($skin-name == 'fluent2') {
              &:hover .e-close-icon {
                color: $tab-fill-wrap-hover-icon-color;
              }
            }
          }

          .e-text-wrap {
            margin-top: $tab-margin-none;
          }

          &.e-active {
            border: $tab-border-none;

            &.e-disable.e-overlay {

              .e-tab-text,
              .e-tab-icon {
                color: $tab-fill-background-disable-text-color;
              }
            }

            .e-tab-wrap {
              background: $tab-fill-active-bg-color;
              border-radius: $tab-active-item-border-radius;
              border-color: $tab-fill-active-tabwrap-border-color;

              &:hover .e-tab-text,
              &:hover .e-tab-icon {
                color: $tab-alt-active-text-color;
              }
            }

            .e-text-wrap {
              margin-top: $tab-margin-none;
            }

            .e-text-wrap::before {
              border: $tab-fill-active-text-before-border;
            }

            .e-tab-text,
            .e-tab-icon {
              color: $tab-alt-active-text-color;
            }

            .e-close-icon {
              color: $tab-alt-active-close-icon-color;
            }

            .e-close-icon:hover {
              color: $tab-fill-active-close-hover-color;
            }
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item:active:hover {
            .e-tab-text,
            .e-tab-icon {
              color: $tab-fill-pop-active-icon-color;
            }
          }

          .e-tab-wrap {
            &:hover {
              background: $tab-fill-pop-wrap-hover-bg;

              .e-tab-text {
                color: $tab-fill-pop-wrap-hover-text-color;
              }

              .e-tab-icon {
                color: $tab-fill-pop-wrap-hover-icon-color;
              }

              .e-close-icon {
                color: $tab-fill-pop-wrap-hover-close-color;
              }
            }
          }
        }

        &.e-horizontal-bottom {
          border-bottom: $tab-border-none;
          border-top: $tab-fill-hdr-border;

          .e-toolbar-item {

            &.e-active .e-text-wrap {
              margin-top: $tab-margin-none;
            }
          }
        }

        &.e-vertical {
          border-bottom: $tab-border-none;

          &.e-vertical-left {
            border-right: $tab-fill-hdr-border;
          }

          &.e-vertical-right {
            border-left: $tab-fill-hdr-border;
          }
        }
      }

      &.e-corner {

        .e-tab-header {

          .e-toolbar-item {

            &.e-active .e-tab-wrap {
              border-radius: $tab-fill-active-wrap-corner;
            }
          }

          &.e-horizontal-bottom {

            .e-toolbar-item.e-active .e-tab-wrap {
              border-radius: $tab-fill-even-active-wrap-corner;
            }
          }
        }
      }

      &.e-disable {

        .e-tab-header {
          border-bottom: $tab-fill-disable-hdr-border;

          .e-toolbar-item {

            .e-tab-wrap {
              color: $tab-disable-text-color;
            }

            &.e-active {
              opacity: $tab-alt-disable-active-item-opacity;

              .e-tab-wrap,
              .e-tab-wrap:focus {
                background: $tab-fill-disable-active-bg-color;
              }

              .e-tab-wrap .e-tab-text,
              .e-tab-wrap .e-tab-icon,
              .e-tab-wrap:focus .e-tab-text,
              .e-tab-wrap:focus .e-tab-icon {
                color: $tab-alt-disable-active-text-color;
              }
            }
          }

          &.e-horizontal-bottom {
            border-bottom: $tab-border-none;
            border-top: $tab-fill-disable-hdr-border;
          }
        }
      }

      &.e-focused .e-tab-header {

        .e-toolbar-item {

          .e-tab-wrap:focus .e-tab-icon,
          .e-tab-wrap:focus .e-tab-text,
          .e-tab-wrap:focus .e-close-icon {
            color: $tab-hover-text-color;
          }

          &.e-active .e-tab-wrap:focus {
            background: $tab-fill-focus-bg-color;
            border-color: $tab-fill-focused-active-tabwrap-focus-border-color;

            .e-tab-text {
              color: $tab-fill-focused-active-wrap-focus-text-color;
            }

            .e-close-icon {
              color: $tab-fill-focused-active-wrap-focus-close-color;
            }

            .e-tab-text,
            .e-tab-icon {
              color: $tab-alt-active-style-hover-icon-color;
            }
          }
        }
      }
    }

    &.e-background {

      .e-tab-header {
        background: $tab-alt-hdr-bg-color;
        border: $tab-border-none;

        .e-toolbar-items {
          background: $tab-alt-item-bg-color;
        }

        .e-toolbar-items.e-hscroll {
          border: $tab-border-none;
        }

        .e-indicator {
          background: $tab-alt-border-color;
          bottom: $tab-background-indicator-bottom;
        }

        .e-toolbar-item {
          border: $tab-border-none;

          .e-ripple-element {
            background: $tab-alt-ripple-bg-color;
          }

          .e-tab-wrap {
            background: $tab-alt-item-bg-color;
            border-color: $tab-background-wrap-border-color;

            .e-tab-icon,
            .e-close-icon {
              color: $tab-alt-text-color;
            }

            .e-tab-text {
              color: $tab-background-text-color;
            }

            .e-close-icon:hover {
              color: $tab-background-close-hover-color;
            }

            &:hover {
              background: $tab-bg-item-wrap-hover-bg-color;
              background-color: $tab-background-wrap-hover-bg-color;
              border-color: $tab-background-wrap-hover-border-color;

              .e-tab-text {
                color: $tab-background-wrap-hover-text-color;
              }

              .e-tab-icon {
                color: $tab-background-wrap-hover-icon-color;
              }

              .e-close-icon {
                color: $tab-background-wrap-hover-close-color;

                &:hover,
                &:active {
                  color: $tab-background-close-hover-active-color;
                }
              }
            }
          }

          &.e-active {
            border: $tab-border-none;
            margin: $tab-margin-none;
            background: $tab-background-active-bg;

            &.e-disable.e-overlay {

              .e-tab-text,
              .e-tab-icon {
                color: $tab-fill-background-disable-text-color;
              }
            }

            .e-tab-wrap {
              background: $tab-background-active-wrap-bg;
              border-color: $tab-background-active-wrap-border-color;
              border-radius: $tab-background-active-wrap-border-radius;
              border-style: solid;
              border-width: $tab-background-active-wrap-border-width;

              .e-tab-text {
                color: $tab-background-active-text-color;
              }

              .e-tab-icon {
                color: $tab-background-active-icon-color;
              }

              .e-close-icon {
                color: $tab-background-active-close-color;
              }

              &:hover {
                background: $tab-background-active-hover-bg;
                border-color: $tab-background-active-hover-border-color;
                .e-tab-text {
                  color: $tab-background-active-hover-text-color;
                }

                .e-tab-icon {
                  color: $tab-background-active-hover-icon-color;
                }

                .e-close-icon {
                  color: $tab-background-active-hover-close-color;

                  &:hover {
                    color: $tab-background-active-close-hover-color;
                  }

                  &:active {
                    color: $tab-background-activeitem-close-active-color;
                  }
                }

                &:focus {
                  background: $tab-background-active-wrap-focus-bg;

                  .e-tab-icon,
                  .e-tab-text {
                    color: $tab-background-active-wrap-focus-text-color;
                  }
                }
              }

              &:focus {
                background: $tab-alt-active-focus-bg-color;

                .e-tab-text,
                .e-tab-icon {
                  color: $tab-background-active-wrap-focus-icon;
                }
              }

              &:focus:hover {

                .e-tab-text {
                  color: $tab-background-active-wrap-focushover-text-color;
                }

                .e-close-icon {
                  color: $tab-background-active-wrap-focushover-close-color;
                }
              }
            }

            .e-text-wrap::before {
              border: $tab-nrml-bottom-wrap-before-top;
              @if ($skin-name == 'Material3') {
                border-radius: $tab-text-wrap-border-radius;
              }
            }

            .e-tab-text,
            .e-tab-icon {
              color: $tab-background-active-text-icon-color;
            }

            .e-close-icon {
              color: $tab-background-active-close-icon-color;
            }

            .e-close-icon:hover,
            .e-tab-text:hover {
              color: $tab-background-active-close-text-hover-color;
            }

            &.e-itop .e-tab-wrap,
            &.e-ibottom .e-tab-wrap {
              background: $tab-alt-tb-active-bg-color;
            }
          }

          &.e-disable {
            .e-tab-text,
            .e-tab-icon,
            .e-close-icon {
              color: $tab-alt-disable-text-color;
            }
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item {
            background: $tab-alt-item-bg-color;

            .e-tab-wrap {

              .e-tab-text,
              .e-tab-icon,
              .e-close-icon {
                color: $tab-background-pop-text-color;
              }

              &:hover {
                background: $tab-background-pop-wrap-hover-bg;

                .e-tab-text,
                .e-tab-icon,
                .e-close-icon {
                  color: $tab-background-pop-wrap-hover-text-color;
                }
              }

              &:active {
                .e-tab-text {
                  color: $tab-background-pop-wrap-active-text-color;
                }

                .e-tab-icon {
                  color: $tab-background-pop-wrap-active-icon-color;
                }

                .e-close-icon {
                  color: $tab-background-pop-wrap-active-close-color;
                }
              }
            }
          }
        }

        .e-hscroll:not(.e-scroll-device) .e-scroll-nav,
        .e-scroll-nav {
          background: $tab-background-scroll-bg;

          .e-nav-arrow {
            color: $tab-alt-nav-icon-color;
            border: $tab-background-scroll-arrow-border;

            &:hover {
              background: $tab-background-scroll-arrow-hover-bg;
              color: $tab-bg-hover-nav-icon-color;
              border-color: $tab-background-scroll-arrow-hover-border-color;
            }

            &:active {
              background: $tab-background-scroll-arrow-active-bg;
              color: $tab-background-scroll-arrow-active-color;
            }
          }

          &:focus {

            .e-nav-arrow {
              color: $tab-bg-hover-nav-icon-color;
              border: $tab-background-scroll-focus-arrow-border;
              background: $tab-background-scroll-focus-arrow-bg;

              &:hover {
                background: $tab-bg-hover-nav-bg-color;
                color: $tab-bg-hover-nav-icon-color;
              }

              &:active {
                background: $tab-background-nav-focus-active-bg;
                border-color: $tab-background-nav-focus-active-border-color;
                color: $tab-background-nav-focus-active-color;
              }
            }
          }

          &:active::after {
            @include hscroll-alt-btn-animation-after;
          }
        }

        .e-hor-nav:not(.e-expended-nav),
        .e-hor-nav {
          background: $tab-background-hor-nav-bg;

          .e-popup-up-icon,
          .e-popup-down-icon {
            color: $tab-background-pop-icon-color;
            border: $tab-background-pop-icon-border;

            &:hover {
              background: $tab-background-pop-icon-hover-bg;
              border-color: $tab-background-pop-icon-hover-border-color;
              color: $tab-bg-hover-nav-icon-color;
            }

            &:active {
              &:hover {
                background: $tab-background-pop-active-hover-bg;
                color: $tab-background-pop-active-hover-color;
              }
            }
          }

          &:focus {

            .e-popup-up-icon,
            .e-popup-down-icon {
              color: $tab-bg-hover-nav-icon-color;
              background: $tab-background-focus-pop-bg;
              border: $tab-background-focus-pop-border;

              &:hover {
                background: $tab-background-focus-pop-hover-bg;
              }

              &:active {
                background: $tab-background-popicon-focus-active-bg;
                border-color: $tab-background-popicon-focus-active-border-color;
                color: $tab-background-popicon-focus-active-color;
              }
            }
          }

          &:active::after {
            @include tbar-alt-btn-animation-after;
          }

          &.e-nav-active {
            .e-popup-up-icon {
              color: $tab-bg-hover-nav-icon-color;
            }
          }
        }

        &.e-horizontal-bottom {
          .e-toolbar-item.e-active {
            border: $tab-border-none;
            margin: $tab-margin-none;

            .e-tab-wrap {
              border-color: $tab-background-bottom-active-wrap-border-color;
              border-radius: $tab-background-bottom-active-wrap-border-radius;
              border-style: solid;
              border-width: $tab-background-bottom-active-wrap-border-width;
            }
          }
        }

        &.e-vertical {

          &.e-vertical-left {
            .e-toolbar-item.e-active {
              border-color: $tab-background-vertical-left-active-border-color;
              border-style: solid;
              border-width: $tab-background-vertical-left-active-border-width;
              margin: $tab-margin-none;
              @if ($skin-name == 'fluent2') {
                &::before {
                  background-color: $tab-background-text-color;
                }
              }

              .e-tab-wrap {
                border-color: $tab-background-bottom-active-wrap-border-color;
                border-radius: $tab-background-vertical-left-active-wrap-border-radius;
                border-style: solid;
                border-width: $tab-background-vertical-left-active-wrap-border-width;
              }
            }
          }

          &.e-vertical-right {
            .e-toolbar-item.e-active {
              border-color: $tab-background-vertical-left-active-border-color;
              border-style: solid;
              border-width: $tab-background-vertical-right-active-border-width;
              margin: $tab-margin-none;

              @if ($skin-name == 'fluent2') {
                &::before {
                  background-color: $tab-background-text-color;
                }
              }

              .e-tab-wrap {
                border-color: $tab-background-bottom-active-wrap-border-color;
                border-radius: $tab-background-vertical-right-active-wrap-border-radius;
                border-style: solid;
                border-width: $tab-background-vertical-right-active-wrap-border-width;
              }
            }
          }

          .e-scroll-nav {

            .e-nav-arrow {
              border: $tab-border-none;
            }

            &:focus {

              .e-nav-arrow {
                border: $tab-border-none;

                &:hover {
                  background: none;
                }
              }
            }

            &:hover {

              .e-nav-arrow {
                color: $tab-bg-hover-nav-icon-color;
              }
            }
          }

          .e-hor-nav {

            &:focus {

              .e-popup-up-icon,
              .e-popup-down-icon {
                background: inherit;
                border-color: transparent;

                &:hover {
                  background: inherit;
                  border-color: transparent;
                }
              }
            }

            .e-popup-up-icon,
            .e-popup-down-icon {

              &:hover {
                background: inherit;
                border-color: transparent;
              }
            }
          }
        }
      }

      &.e-disable .e-tab-header {

        .e-indicator {
          background: $tab-alt-disable-border-color;
        }

        .e-toolbar-item {

          .e-tab-wrap {
            color: $tab-alt-disable-text-color;

            .e-tab-text,
            .e-tab-icon {
              color: $tab-alt-disable-text-color;
            }

            &:focus {

              .e-tab-text,
              .e-tab-icon {
                color: $tab-alt-disable-text-color;
              }
            }
          }

          &.e-active {
            opacity: $tab-alt-disable-active-item-opacity;

            .e-tab-wrap,
            .e-tab-wrap:focus {
              background: $tab-alt-disable-active-bg-color;
              color: $tab-alt-disable-active-text-color;

              .e-tab-text,
              .e-tab-icon {
                color: $tab-alt-disable-active-text-color;
              }
            }
          }
        }
      }

      &.e-accent .e-tab-header {

        .e-indicator {
          background: $tab-background-accent-indicator-bg;
        }

        &.e-disable {

          .e-indicator {
            background: $tab-disable-border-color;
          }
        }
      }

      &.e-focused .e-tab-header {

        .e-toolbar-item {

          .e-tab-wrap:focus {
            @if ($skin-name == 'fluent2') {
              box-shadow: $tab-focus-box-shadow;
            }
            background: $tab-background-focused-wrap-focus-bg;
            border-color: $tab-background-focused-wrap-focus-border-color;

            .e-tab-icon,
            .e-tab-text,
            .e-close-icon {
              color: $tab-background-focused-wrap-focus-close-color;
            }
          }

          &.e-active {

            .e-tab-wrap:focus {
              background: $tab-background-focused-active-wrap-focus-bg;
              border-color: $tab-background-focused-active-wrap-focus-border-color;
            }

            .e-tab-wrap:focus .e-tab-text,
            .e-tab-wrap:focus .e-tab-icon {
              color: $tab-background-focused-active-wrap-icon-color;
            }

            .e-tab-wrap:hover {
              background: $tab-background-focused-active-wrap-hover-bg;
              border: $tab-background-focused-active-wrap-hover-border;
              border-radius: $tab-background-focused-active-wrap-hover-border-radius;
            }

            .e-tab-wrap:focus {
              .e-tab-text {
                color: $tab-background-focused-active-wrap-focus-text-color;
              }

              .e-tab-icon {
                color: $tab-background-focused-active-wrap-focus-icon-color;
              }

              .e-close-icon {
                color: $tab-background-focused-active-wrap-focus-close-color;
              }
            }

            .e-tab-wrap:hover {
              .e-tab-text {
                color: $tab-background-focused-active-wrap-hover-text-color;
              }

              .e-tab-icon {
                color: $tab-background-focused-active-wrap-hover-icon-color;
              }

              .e-close-icon {
                color: $tab-background-focused-active-wrap-hover-close-color;
              }
            }

            .e-tab-wrap:focus:hover {
              .e-tab-text {
                color: $tab-background-focused-active-focus-hover-text-color;
              }
              .e-close-icon {
                color: $tab-background-focused-active-focus-hover-close-color;
              }
            }

            &.e-itop .e-tab-wrap,
            &.e-ibottom .e-tab-wrap {
              background: $tab-alt-tb-active-bg-color;

              &:focus {
                background: $tab-key-alt-active-focus-bg-color;
              }
            }
          }
        }

        .e-scroll-nav {

          &:focus {

            .e-nav-arrow {
              color: $tab-bg-nav-focus-icon-color;
            }
          }
        }

        .e-hor-nav {

          &:focus {

            .e-popup-up-icon,
            .e-popup-down-icon {
              color: $tab-bg-nav-focus-icon-color;
            }
          }
        }
      }
    }

    &.e-rtl {

      .e-tab-header {

        .e-hscroll.e-rtl {

          .e-scroll-nav {
            border: $tab-border-none;
          }
        }
      }
    }

    .e-content {
      background: inherit;

      .e-item {
        background: inherit;
        color: $tab-content-font-color;
        font-size: $tab-content-font-size;
      }
    }
  }

  .e-tab-clone-element {
    background: $tab-clone-item-bg-color;
    color: $tab-clone-text-color;

    .e-tab-wrap {
      border-radius: $tab-active-item-border-radius;
      color: $tab-clone-text-color;
      border: $tab-clone-item-wrap-border;

      .e-tab-icon {
        color: $tab-clone-text-color;
      }
    }
  }
}

@include export-module('tab-bootstrap-dark-icons') {
  #{&}.e-tab {

    .e-tab-header {

      .e-close-icon::before {
        content: '\e7fc';
        position: relative;
      }

      .e-popup-up-icon::before {
        content: '\e988';
      }

      .e-popup-down-icon::before {
        content: '\e968';
      }
    }

    &.e-vertical-icon .e-tab-header {

      @media screen and (max-width: 480px) {

        .e-popup-up-icon::before {
          content: '\e918';
        }

        .e-popup-down-icon::before {
          content: '\e968';
        }
      }
    }

    &.e-vertical-tab {

      .e-tab-header {

        .e-popup-up-icon {

          &::before {
            content: 'More';
          }

          &::after {
            content: '\eb04';
          }
        }

        .e-popup-down-icon {

          &::before {
            content: 'More';
          }

          &::after {
            content: '\eb05';
          }
        }
      }

      &.e-icon-tab {

        .e-tab-header {

          .e-popup-up-icon {

            &::before {
              content: '';
            }

            &::after {
              content: '\ebb5';
            }
          }

          .e-popup-down-icon {

            &::before {
              content: '';
            }

            &::after {
              content: '\ebb5';
            }
          }
        }
      }
    }
  }

  .e-tab-clone-element {

    .e-close-icon::before {
      content: '\e7fc';
      position: relative;
    }
  }
}

@mixin tab-mob-last-item-margin {
  @media screen and (max-width: 480px) {
    margin: $tab-mob-last-item-margin;
  }
}
@mixin tab-mob-close-icon-margin {
  @media screen and (max-width: 480px) {
    margin: $tab-mob-close-icon-margin;
  }
}
@include export-module('tab-bigger') {
  .e-bigger .e-tab,
  .e-tab.e-bigger {

    .e-tab-header {
      height: $tab-big-height;
      min-height: $tab-big-min-height;

      .e-toolbar-items {
        height: $tab-auto-height;
        min-height: auto;

        &:not(.e-tbar-pos) .e-toolbar-item:first-child,
        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-big-first-item-margin;

          @media screen and (max-width: 480px) {
            margin: $tab-nrml-first-item-margin;
          }
        }

        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
          padding-bottom: $tab-big-boot-active-item-padding-bottom;
          @include tab-mob-last-item-margin;
        }

        .e-indicator + .e-toolbar-item:last-child.e-active {
          margin: $tab-bgr-active-last-margin;
        }
      }

      .e-toolbar-items.e-hscroll {

        &:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-big-scroll-last-item-margin;
          @include tab-mob-last-item-margin;

          &.e-active {
            margin: $tab-big-active-last-item-margin;
          }
        }

        .e-scroll-nav {
          width: $tab-bgr-hscroll-items-nav-width;
        }
      }

      .e-toolbar-item {

        &:not(.e-separator) {
          height: $tab-big-height;
          margin: $tab-big-item-margin;
          min-height: $tab-big-min-height;
          min-width: auto;
          padding: $tab-big-item-padding;

          @media screen and (max-width: 480px) {
            margin: $tab-nrml-item-margin;
          }
        }

        &:not(.e-separator).e-itop,
        &:not(.e-separator).e-ibottom {
          height: $tab-big-icon-top-bottom-item-height;
          min-height: $tab-big-icon-top-bottom-item-min-height;
        }

        .e-tab-wrap {
          height: $tab-big-height;
          padding: $tab-big-wrap-padding;

          @media screen and (max-width: 480px) {
            padding: $tab-mob-wrap-padding;
          }
        }

        .e-text-wrap {
          height: $tab-bgr-item-textwrap-height;
        }

        .e-tab-text {
          font-size: $tab-big-font-size;
          margin-bottom: $tab-bgr-item-text-margin-bottom;
        }

        &.e-ileft:not(.e-icon) .e-tab-icon::before {
          position: relative;
          top: $tab-item-left-icon-before-top;
        }

        &.e-active {
          margin: $tab-big-boot-item-margin;
          padding-bottom: $tab-big-boot-active-item-padding-bottom;

          @media screen and (max-width: 480px) {
            margin: $tab-mob-boot-item-margin;
          }

          &.e-ileft:not(.e-icon) .e-tab-icon::before {
            position: relative;
            top: $tab-item-left-icon-before-top;
          }

          .e-text-wrap {
            height: $tab-bgr-item-textwrap-height;
            margin-top: $tab-active-text-container-margin;
          }

          &.e-ileft .e-text-wrap,
          &.e-iright .e-text-wrap {
            height: $tab-bgr-item-textwrap-height;
          }
        }

        .e-icons.e-close-icon {
          cursor: pointer;
          margin: $tab-big-close-icon-margin;
          @include tab-mob-close-icon-margin;
        }

        .e-icons.e-close-icon,
        .e-close-icon::before {
          font-size: $tab-big-close-icon-size;

          @media screen and (max-width: 480px) {
            font-size: $tab-mob-close-icon-size;
          }
        }

        .e-icons.e-tab-icon {
          height: $tab-big-icon-container-height;
          min-width: $tab-big-icon-container-size;
          width: $tab-big-icon-container-width;
          line-height: $tab-bgr-icon-line-height;
        }

        .e-tab-icon,
        .e-tab-icon::before {
          font-size: $tab-big-icon-size;
        }

        &.e-icon {

          .e-tab-wrap {
            padding: $tab-big-io-wrap-padding;
          }
        }

        .e-icon-right {
          margin: $tab-bgr-icon-right-margin;

          @media screen and (max-width: 480px) {
            margin: $tab-bgr-mob-item-iconright-margin;
          }
        }

        .e-icon-left + .e-tab-text {
          margin: $tab-big-it-text-margin;

          @media screen and (max-width: 480px) {
            margin: $tab-mob-it-text-margin;
          }
        }

        &.e-itop,
        &.e-ibottom {
          height: $tab-big-icon-top-bottom-item-height;

          .e-tab-wrap {
            height: $tab-big-icon-top-bottom-item-height;

            &:focus .e-text-wrap {
              height: $tab-auto-height;
            }
          }

          &.e-active .e-tab-wrap {
            height: $tab-big-icon-top-bottom-item-height;

            &:focus .e-text-wrap {
              height: $tab-auto-height;
            }
          }

          .e-close-icon {
            right: $tab-big-close-icon-top-bottom-right;
          }
        }

        &.e-itop .e-tab-text {
          margin: $tab-big-icon-top-margin;
        }

        &.e-ibottom .e-tab-text {
          margin: $tab-big-icon-bottom-margin;
        }
      }

      &.e-close-show {

        .e-toolbar-item.e-itop .e-text-wrap,
        .e-toolbar-item.e-ibottom .e-text-wrap {
          margin-right: $tab-big-text-container-margin-right;
        }
      }

      .e-toolbar-pop {

        .e-toolbar-item {
          height: $tab-big-pop-item-height;
          min-height: $tab-big-pop-item-min-height;

          @if ($skin-name == 'fluent2') {
            &:not(.e-separator) {
              margin: $tbar-bgr-item-margin;
            }
          }

          .e-tab-wrap {
            height: $tab-big-pop-item-height;
            padding: $tab-big-pop-item-wrap-padding;

            @media screen and (max-width: 480px) {
              padding: $tab-mob-pop-item-wrap-padding;
            }
          }

          .e-text-wrap {
            height: $tab-bgr-pop-item-textwrap-height;
          }

          .e-tab-text + .e-close-icon[style = 'display:block'] {
            padding-right: $tab-big-pop-text-padding-right;

            @media screen and (max-width: 480px) {
              padding-right: $tab-padding-none;
            }
          }

          .e-close-icon {
            margin: $tab-close-icon-margin;
          }

          .e-close-icon::before {
            top: $tab-big-pop-close-top;
          }

          &.e-itop,
          &.e-ibottom {

            .e-close-icon {
              right: $tab-big-pop-close-icon-top-bottom-right;
            }
          }

          &.e-itop:not(.e-separator),
          &.e-ibottom:not(.e-separator) {
            min-height: $tab-pop-big-icon-top-bottom-item-min-height;

            @media screen and (max-width: 480px) {
              min-height: $tab-pop-big-icon-top-bottom-item-min-height;
            }
          }

          &.e-itop,
          &.e-itop .e-tab-wrap,
          &.e-ibottom,
          &.e-ibottom .e-tab-wrap {
            height: $tab-pop-big-icon-top-bottom-item-height;

            @media screen and (max-width: 480px) {
              height: $tab-pop-big-icon-top-bottom-item-height;
            }
          }

          &.e-itop .e-tab-text,
          &.e-ibottom .e-tab-text {
            margin: $tab-margin-none;
            padding-left: $tab-padding-none;
            padding-right: $tab-popup-text-padding-right;

            @media screen and (max-width: 480px) {
              margin: $tab-margin-none;
              padding-left: $tab-padding-none;
              padding-right: $tab-padding-none;
            }
          }
        }
      }

      .e-scroll-nav {
        height: $tab-big-height;
        min-height: $tab-big-min-height;
        padding: $tab-big-nav-right-icon-padding;

        @media screen and (max-width: 480px) {
          padding: $tab-mob-nav-right-icon-padding;
        }

        &.e-scroll-right-nav {
          padding: $tab-big-nav-right-icon-padding;
        }

        &.e-scroll-left-nav {
          padding: $tab-big-nav-left-icon-padding;
        }

        .e-nav-arrow {
          font-size: $tab-big-nav-icon-size;
          height: $tab-big-nav-icon-container-height;
          line-height: $tab-big-nav-icon-container-line-height;
          width: $tab-big-nav-icon-container-size;

          @media screen and (max-width: 480px) {
            font-size: $tab-big-nav-icon-size;
            height: $tab-big-nav-icon-container-height;
            line-height: $tab-big-nav-icon-container-line-height;
            width: $tab-big-nav-icon-container-size;
          }
        }

        .e-nav-left-arrow,
        .e-nav-right-arrow {

          &::before {
            font-size: $tab-big-nav-icon-size;
            line-height: $tab-big-nav-icon-container-line-height;
            top: $tab-bgr-scroll-nav-arrow-before-top;
            vertical-align: initial;
          }
        }
      }

      &.e-vertical {
        .e-hor-nav {
          .e-popup-up-icon,
          .e-popup-down-icon {
            height: 100%;
            width: 100%;
          }
        }
      }

      .e-hor-nav {
        height: $tab-big-height;
        min-height: $tab-big-min-height;
        padding: $tab-big-nav-right-icon-padding;

        @media screen and (max-width: 480px) {
          padding: $tab-mob-nav-right-icon-padding;
        }

        .e-popup-up-icon,
        .e-popup-down-icon {
          font-size: $tab-big-nav-icon-size;
          height: $tab-big-nav-icon-container-height;
          line-height: $tab-big-nav-icon-container-line-height;
          width: $tab-big-nav-icon-container-size;

          @media screen and (max-width: 480px) {
            font-size: $tab-big-nav-icon-size;
            height: $tab-big-nav-icon-container-height;
            line-height: $tab-big-nav-icon-container-line-height;
            width: $tab-big-nav-icon-container-size;
          }

          &::before {
            font-size: $tab-big-nav-icon-size;
            line-height: $tab-big-nav-icon-container-line-height;
            top: 0;
            vertical-align: initial;

            @media screen and (max-width: 480px) {
              font-size: $tab-mob-nav-icon-size;
            }
          }

          &:hover {
            line-height: $tab-bgr-hor-pop-lineheight;

            &::before {
              line-height: $tab-bgr-hor-pop-lineheight;
              top: 0;
            }
          }
        }

        &:focus {

          .e-popup-up-icon,
          .e-popup-down-icon {
            line-height: $tab-bgr-hor-pop-lineheight;

            &::before {
              line-height: $tab-bgr-hor-pop-lineheight;
              top: 0;
            }

            &:hover {
              line-height: $tab-bgr-hor-pop-lineheight;
              top: $tab-bgr-hor-focus-pop-hover-top;
            }
          }
        }
      }

      .e-hor-nav.e-ie-align,
      .e-scroll-nav.e-ie-align {

        .e-popup-up-icon,
        .e-popup-down-icon {
          line-height: $tab-big-ie-pop-icon-line-height;
        }

        .e-nav-left-arrow,
        .e-nav-right-arrow {
          line-height: $tab-big-ie-nav-icon-line-height;
        }
      }

      &.e-horizontal-bottom {

        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child.e-active {
          margin: $tab-big-even-last-item-margin;
        }

        .e-toolbar-item {

          &.e-active {
            margin: $tab-big-even-boot-item-margin;
            padding-bottom: $tab-padding-none;

            @media screen and (max-width: 480px) {
              margin: $tab-mob-even-boot-item-margin;
            }

            .e-tab-text {
              padding-top: $tab-big-even-boot-active-item-padding-bottom;
            }

            .e-close-icon::before {
              top: $tab-bgr-bottom-active-close-top;
            }

            &.e-itop .e-close-icon::before,
            &.e-ibottom .e-close-icon::before {
              top: $tab-bgr-bottom-active-itop-close-top;
            }
          }

          &.e-active:last-child {
            margin: $tab-big-even-last-item-margin;
            padding-bottom: $tab-padding-none;

            @media screen and (max-width: 480px) {
              margin: $tab-mob-even-last-item-margin;
            }

            .e-tab-text {
              padding-top: $tab-bgr-bottom-active-text-padding-top;
            }

            .e-close-icon::before {
              top: $tab-bgr-bottom-active-last-close-top;
            }
          }

          &.e-itop,
          &.e-ibottom {
            padding-bottom: $tab-padding-none;
            padding-top: $tab-padding-none;
          }

          &.e-ileft.e-active .e-text-wrap {
            margin: $tab-big-even-ileft-active-text-wrap-margin;
          }

          &.e-active .e-text-wrap {
            height: $tab-big-even-active-text-container-height;
            padding: $tab-padding-none;
          }

          &.e-itop.e-active .e-text-wrap,
          &.e-ibottom.e-active .e-text-wrap {
            height: $tab-initial-height;
          }

          &.e-ileft.e-active {
            height: $tab-big-even-active-text-container-height;
          }
        }
      }

      &.e-vertical {
        max-width: 150px;

        &[style *= 'overflow: hidden']::before {
          bottom: $tab-big-vertical-scroll-nav-top-bottom;
          top: $tab-big-vertical-scroll-nav-top-bottom;

          @media screen and (max-width: 480px) {
            bottom: 0;
            top: 0;
          }
        }

        .e-toolbar-items {
          height: $tab-inherit-height;

          &:not(.e-tbar-pos) {

            .e-toolbar-item:last-child {
              margin: $tab-margin-none;
            }
          }
        }

        .e-toolbar-items.e-vscroll:not(.e-scroll-device) {
          padding: $tab-vscroll-big-padding;
        }

        .e-toolbar-item {

          .e-tab-wrap {
            padding: $tab-big-v-wrap-padding;
          }

          &.e-itop,
          &.e-ibottom {

            .e-close-icon {
              right: $tab-v-big-close-icon-top-bottom-right;
            }
          }

          &.e-ileft.e-icon {
            min-height: $tab-bgr-vertical-icon-min-height;
            min-width: $tab-bgr-vertical-icon-min-width;
          }
        }

        .e-scroll-nav {
          height: $tab-big-vertical-nav-arrow-height;
          min-height: $tab-big-vertical-nav-arrow-size;

          .e-nav-arrow {
            font-size: $tab-big-vertical-nav-arrow-font-size;
            height: $tab-big-vertical-nav-arrow-height;
            line-height: $tab-big-vertical-nav-arrow-line-height;
            width: $tab-big-vertical-nav-arrow-size;
          }
        }

        .e-hor-nav {
          padding: $tab-big-wrap-padding;

          .e-popup-up-icon,
          .e-popup-down-icon {

            &::before {
              line-height: $tab-big-more-btn-line-height;
              @if $skin-name == 'Material3' {
                font-size: $tab-big-font-size;
              }
            }

            &::after {
              font-size: $tab-big-font-size;
              @if $skin-name == 'Material3' {
                font-size: $tab-big-nav-icon-size;
              }
              line-height: $tab-big-more-btn-line-height;
              margin: $tab-pop-more-icon-margin;
            }
          }
        }

        &.e-toolpop {

          .e-toolbar-items {
            height: $tab-auto-height;
          }
        }
      }
    }

    &.e-vertical-icon {

      > .e-tab-header {
        height: $tab-big-tb-icon-height;
        min-height: $tab-big-tb-icon-min-height;

        > .e-toolbar-items {
          height: $tab-big-tb-icon-height;
        }

        .e-scroll-nav {
          height: $tab-big-icon-top-bottom-item-height;
        }

        .e-hor-nav {
          height: $tab-big-icon-top-bottom-item-height;

          .e-popup-up-icon::before,
          .e-popup-down-icon::before {

            @media screen and (max-width: 480px) {
              font-size: $tab-mob-nav-vicon-size;
            }
          }
        }
      }

      &.e-vertical-tab {

        .e-tab-header.e-vertical {

          .e-toolbar-items {
            height: $tab-inherit-height;
          }

          .e-scroll-nav {
            height: $tab-big-vertical-nav-arrow-height;
          }
        }
      }
    }

    &.e-focused {

      .e-tab-header {

        .e-toolbar-item {

          .e-tab-wrap:focus {
            height: $tab-big-height;
          }

          .e-tab-wrap:focus .e-text-wrap {
            height: $tab-bgr-item-textwrap-height;
          }

          &.e-itop,
          &.e-ibottom {

            .e-tab-wrap:focus {
              height: $tab-big-focus-icon-top-bottom-item-height;

              .e-text-wrap {
                height: $tab-auto-height;
              }
            }

            &.e-active .e-tab-wrap:focus .e-text-wrap {
              height: $tab-auto-height;
            }
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item {

            .e-tab-wrap:focus {
              height: $tab-big-pop-item-height;

              .e-text-wrap {
                height: $tab-bgr-pop-item-textwrap-height;
              }
            }

            &.e-itop .e-tab-wrap:focus,
            &.e-ibottom .e-tab-wrap:focus {
              height: $tab-big-height;
            }
          }
        }

        &.e-horizontal-bottom {

          .e-toolbar-item {

            &.e-active {

              .e-tab-wrap:focus .e-text-wrap {
                height: $tab-bgr-item-textwrap-height;
                padding: $tab-padding-none;
              }

              &.e-ileft {
                height: $tab-big-even-active-text-container-height;
              }
            }
          }
        }
      }
    }

    &.e-ie .e-tab-header {

      .e-hor-nav.e-ie-align,
      .e-scroll-nav.e-ie-align {

        .e-popup-up-icon,
        .e-popup-down-icon {
          line-height: $tab-big-ie-pop-icon-line-height;
        }

        .e-nav-left-arrow,
        .e-nav-right-arrow {
          line-height: $tab-big-ie-nav-icon-line-height;
        }
      }
    }

    &.e-edge .e-tab-header {

      .e-hor-nav.e-ie-align,
      .e-scroll-nav.e-ie-align {

        .e-popup-up-icon,
        .e-popup-down-icon {
          line-height: $tab-big-edge-pop-icon-line-height;
        }

        .e-nav-left-arrow,
        .e-nav-right-arrow {
          line-height: $tab-big-edge-nav-icon-line-height;
        }
      }
    }

    &.e-safari .e-tab-header {

      .e-close-icon::before {
        top: $tab-big-safari-close-icon-top;
      }

      .e-hor-nav,
      .e-scroll-nav {

        .e-popup-up-icon::before,
        .e-popup-down-icon::before {
          top: 0;
        }

        .e-nav-left-arrow::before,
        .e-nav-right-arrow::before {
          top: 0;
        }
      }
    }

    &.e-rtl {

      .e-tab-header {

        &.e-horizontal-bottom {

          .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:not(.e-separator) {
            margin: $tab-bgr-rtl-bottom-item-margin;

            &.e-active {
              margin: $tab-bgr-rtl-bottom-active-margin;
            }
          }
        }
      }
    }

    &.e-fill {

      .e-tab-header {
        height: $tab-big-fill-height;
        min-height: $tab-big-fill-min-height;

        @media screen and (max-width: 480px) {
          height: $tab-mob-fill-height;
          min-height: $tab-mob-fill-min-height;
        }

        .e-toolbar-items {
          height: $tab-auto-height;
          min-height: $tab-big-fill-min-height;

          @media screen and (max-width: 480px) {
            min-height: $tab-mob-fill-min-height;
          }
        }

        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-big-alt-first-item-margin;
          padding: $tab-bgr-fill-active-item-padding;
        }

        .e-toolbar-item {

          &:not(.e-separator) {
            height: $tab-big-fill-height;
            margin: $tab-alt-item-margin;
            min-height: $tab-big-fill-min-height;
            padding: $tab-bgr-fill-active-item-padding;

            @media screen and (max-width: 480px) {
              height: $tab-mob-fill-height;
              min-height: $tab-mob-fill-min-height;
            }
          }

          &:not(.e-separator).e-itop,
          &:not(.e-separator).e-ibottom {
            height: $tab-big-fill-icon-top-bottom-item-height;
            min-height: $tab-big-fill-icon-top-bottom-item-min-height;
          }

          .e-tab-wrap {
            height: $tab-big-fill-height;
            padding: $tab-fill-big-wrap-padding;

            @media screen and (max-width: 480px) {
              height: $tab-mob-fill-height;
              padding: $tab-fill-big-wrap-padding;
            }
          }

          .e-text-wrap {
            height: $tab-bgr-fill-item-textwrap-height;

            @media screen and (max-width: 480px) {
              height: $tab-mob-fill-height;
            }
          }

          &.e-active {
            padding: $tab-bgr-fill-active-item-padding;

            .e-tab-wrap {
              margin-bottom: $tab-fill-big-active-item-wrap-margin-bottom;
            }

            .e-text-wrap {
              height: $tab-bgr-fill-item-textwrap-height;

              @media screen and (max-width: 480px) {
                height: $tab-mob-fill-height;
              }
            }

            &.e-ileft .e-text-wrap,
            &.e-iright .e-text-wrap {
              height: $tab-bgr-fill-active-ileft-textwrap-height;

              @media screen and (max-width: 480px) {
                height: $tab-fill-big-active-it-text-container-height;
              }
            }
          }

          &.e-itop .e-tab-wrap,
          &.e-ibottom .e-tab-wrap {
            height: $tab-big-fill-icon-top-bottom-item-height;
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item.e-itop:not(.e-separator),
          .e-toolbar-item.e-ibottom:not(.e-separator) {
            height: $tab-auto-height;
          }
        }

        &.e-vertical {

          .e-toolbar-items {

            .e-toolbar-item {

              .e-tab-wrap {
                padding: $tab-big-v-wrap-padding;
              }
            }
          }
        }

        &.e-horizontal-bottom {

          .e-toolbar-item.e-active .e-text-wrap {
            height: $tab-fill-big-even-active-text-height;
          }

          .e-toolbar-item.e-itop .e-text-wrap,
          .e-toolbar-item.e-ibottom .e-text-wrap {
            height: $tab-auto-height;
          }

          .e-toolbar-item.e-itop .e-tab-wrap:focus .e-text-wrap,
          .e-toolbar-item.e-ibottom .e-tab-wrap:focus .e-text-wrap {
            height: $tab-big-fill-tb-wrap-height;
          }
        }
      }

      &.e-focused {

        .e-tab-header {

          .e-toolbar-item {

            .e-tab-wrap:focus {
              height: $tab-focus-big-fill-height;
            }

            .e-tab-wrap:focus .e-text-wrap {
              height: $tab-bgr-fill-focused-wrap-height;
            }

            &.e-active .e-tab-wrap:focus {

              .e-text-wrap {
                height: $tab-bgr-fill-focused-wrap-height;
              }
            }

            &.e-itop .e-tab-wrap:focus,
            &.e-ibottom .e-tab-wrap:focus {
              height: $tab-big-focus-fill-icon-top-bottom-item-height;

              .e-text-wrap {
                height: $tab-auto-height;

                @media screen and (max-width: 480px) {
                  height: $tab-auto-height;
                }
              }
            }
          }
        }
      }

      &.e-rtl .e-tab-header {

        .e-toolbar-item:not(.e-separator) {
          margin: $tab-big-rtl-alt-item-margin;
        }
      }

      &.e-vertical-icon {

        > .e-tab-header {
          height: $tab-big-tb-icon-height - $tab-big-tb-icon-height-calc;
          min-height: $tab-big-tb-icon-min-height - 2;
        }
      }
    }

    &.e-background {

      .e-tab-header {

        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-big-alt-first-item-margin;
          padding: $tab-bgr-background-active-padding;
        }

        .e-toolbar-item {

          &:not(.e-separator) {
            padding: $tab-bgr-background-active-padding;
          }

          .e-tab-wrap {
            padding: $tab-bg-big-wrap-padding;

            @media screen and (max-width: 480px) {
              padding: $tab-bg-big-wrap-padding;
            }
          }

          &.e-active {
            padding: $tab-bgr-background-active-padding;

            .e-tab-wrap {
              margin-bottom: $tab-bg-big-active-item-wrap-margin-bottom;
            }
          }
        }

        &.e-vertical {

          .e-toolbar-items {

            .e-toolbar-item {

              .e-tab-wrap {
                padding: $tab-big-v-wrap-padding;
              }
            }
          }
        }
      }

      &.e-rtl .e-tab-header {

        .e-toolbar-item:not(.e-separator) {
          margin: $tab-big-rtl-alt-item-margin;
        }
      }
    }

    &.e-rtl {

      .e-tab-header {

        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child,
        .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {
          margin: $tab-big-rtl-item-margin;
        }

        .e-toolbar-item:not(.e-separator) {
          margin: $tab-big-rtl-item-margin;

          .e-icon-right {
            margin: $tab-bgr-rtl-icon-right-margin;
          }

          .e-icon-left + .e-tab-text {
            margin: $tab-rtl-big-it-text-margin;

            @media screen and (max-width: 480px) {
              margin: $tab-rtl-mob-it-text-margin;
            }
          }

          .e-icons.e-close-icon {
            margin: $tab-rtl-big-close-icon-margin;

            @media screen and (max-width: 480px) {
              margin: $tab-rtl-mob-close-icon-margin;
            }
          }

          &.e-itop .e-close-icon,
          &.e-ibottom .e-close-icon {
            left: $tab-rtl-big-close-icon-top-bottom-left;
            right: auto;
          }
        }

        &.e-close-show {

          .e-toolbar-item.e-itop .e-text-wrap,
          .e-toolbar-item.e-ibottom .e-text-wrap {
            margin-left: $tab-rtl-big-text-container-margin-left;
            margin-right: $tab-rtl-big-text-container-margin-right;
          }
        }

        .e-toolbar-pop {

          .e-toolbar-item {
            margin: $tab-margin-none;

            .e-tab-text {
              padding-left: $tab-rtl-big-pop-text-padding-left;
              padding-right: $tab-padding-none;

              @media screen and (max-width: 480px) {
                padding-left: $tab-padding-none;
              }
            }

            .e-icons.e-close-icon {
              margin: $tab-rtl-big-pop-close-icon-margin;
            }

            &.e-itop,
            &.e-ibottom {

              .e-close-icon {
                left: $tab-rtl-big-pop-close-icon-top-bottom-left;
                right: auto;
              }
            }

            &.e-itop .e-tab-text,
            &.e-ibottom .e-tab-text {
              margin: $tab-margin-none;
              padding-left: $tab-popup-text-padding-right;
              padding-right: $tab-padding-none;

              @media screen and (max-width: 480px) {
                margin: $tab-margin-none;
                padding-left: $tab-padding-none;
                padding-right: $tab-padding-none;
              }
            }
          }
        }

        .e-hor-nav,
        .e-scroll-right-nav {
          padding: $tab-rtl-big-nav-right-icon-padding;
        }

        .e-scroll-left-nav {
          padding: $tab-rtl-big-nav-left-icon-padding;
        }

        &.e-vertical {

          .e-toolbar-item {

            &:not(.e-separator) {
              margin: $tab-margin-none;
            }

            &.e-itop,
            &.e-ibottom {

              .e-close-icon {
                left: $tab-v-rtl-big-close-icon-top-bottom-left;
              }
            }
          }

          .e-hor-nav {
            padding: $tab-big-wrap-padding;
          }

          .e-popup-up-icon,
          .e-popup-down-icon {

            &::after {
              margin: $tab-rtl-pop-more-icon-margin;
            }
          }
        }
      }
    }
  }

  .e-bigger .e-tab-clone-element {

    &:not(.e-separator) {
      height: $tab-big-height;
      margin: $tab-big-item-margin;
      min-height: $tab-big-min-height;
      min-width: auto;
      padding: $tab-big-item-padding;

      @media screen and (max-width: 480px) {
        margin: $tab-nrml-item-margin;
      }
    }

    &:not(.e-separator).e-itop,
    &:not(.e-separator).e-ibottom {
      height: $tab-big-icon-top-bottom-item-height;
      min-height: $tab-big-icon-top-bottom-item-min-height;
    }

    .e-tab-wrap {
      height: $tab-big-height;
      padding: $tab-big-wrap-padding;

      @media screen and (max-width: 480px) {
        padding: $tab-mob-wrap-padding;
      }
    }

    .e-text-wrap {
      height: $tab-bgr-item-textwrap-height;
    }

    .e-tab-text {
      font-size: $tab-big-font-size;
      align-self: auto;
    }

    .e-icons.e-close-icon {
      cursor: pointer;
      margin: $tab-big-close-icon-margin;
      @include tab-mob-close-icon-margin;
    }

    .e-icons.e-close-icon,
    .e-close-icon::before {
      font-size: $tab-big-close-icon-size;

      @media screen and (max-width: 480px) {
        font-size: $tab-mob-close-icon-size;
      }
    }

    .e-icons.e-tab-icon {
      height: $tab-big-icon-container-height;
      min-width: $tab-big-icon-container-size;
      width: $tab-big-icon-container-width;
      line-height: $tab-bgr-icon-line-height;
    }

    .e-tab-icon,
    .e-tab-icon::before {
      font-size: $tab-big-icon-size;
    }

    &.e-icon {

      .e-tab-wrap {
        padding: $tab-big-io-wrap-padding;
      }
    }

    .e-icon-right {
      margin: $tab-bgr-icon-right-margin;

      @media screen and (max-width: 480px) {
        margin: $tab-bgr-mob-item-iconright-margin;
      }
    }

    .e-icon-left + .e-tab-text {
      margin: $tab-big-it-text-margin;

      @media screen and (max-width: 480px) {
        margin: $tab-mob-it-text-margin;
      }
    }

    &.e-itop,
    &.e-ibottom {
      height: $tab-big-icon-top-bottom-item-height;

      .e-tab-wrap {
        height: $tab-big-icon-top-bottom-item-height;

        &:focus .e-text-wrap {
          height: $tab-auto-height;
        }
      }

      &.e-active .e-tab-wrap {
        height: $tab-big-icon-top-bottom-item-height;

        &:focus .e-text-wrap {
          height: $tab-auto-height;
        }
      }

      .e-close-icon {
        right: $tab-big-close-icon-top-bottom-right;
      }
    }

    &.e-itop .e-tab-text {
      margin: $tab-big-icon-top-margin;
    }

    &.e-ibottom .e-tab-text {
      margin: $tab-big-icon-bottom-margin;
    }
  }
}

//default
/* stylelint-disable */
$treeview-font-size: 14px !default;
$treeview-icon-font-size: 8px !default;
$treeview-image-font-size: 16px !default;

$treeview-big-font-size: 15px !default;
$treeview-big-icon-font-size: 10px !default;

$treeview-icon-color: $grey-dark-font !default;
$treeview-text-color: $grey-dark-font !default;
$treeview-item-border-color: transparent !default;
$treeview-item-active-bg: $brand-primary !default;
$treeview-icon-active-color: $brand-primary-font !default;
$treeview-text-active-color: $brand-primary-font !default;
$treeview-item-active-border-color: $brand-primary !default;
$treeview-item-hover-bg: $grey-44 !default;
$treeview-icon-hover-color: $grey-dark-font !default;
$treeview-text-hover-color: $grey-dark-font !default;
$treeview-item-hover-border-color: $grey-44 !default;
$treeview-item-active-hover-bg: $brand-primary !default;
$treeview-icon-active-hover-color: $brand-primary-font !default;
$treeview-text-active-hover-color: $brand-primary-font !default;
$treeview-item-active-hover-border-color: $input-border-focus !default;
$treeview-text-disable-color: $grey-light-font !default;
$treeview-icon-disable-color: $grey-light-font !default;
$treeview-drag-line-bg: $brand-primary !default;
$treeview-drag-line-color: $grey-light-font !default;
$treeview-popup-bg-color: $brand-primary-font !default;
$treeview-popup-border-color: $grey-lighter !default;
$treeview-drop-count-bg: $grey-dark-font !default;
$treeview-drop-count-border: $grey-ad !default;
$treeview-drop-count-color: $grey-ad !default;
$treeview-drag-item-bg: $grey-99 !default;
$treeview-drag-item-color: $grey-dark-font !default;
$treeview-drag-icon-color: $grey-dark-font !default;
//enddefault
//dimensions
$treeview-skin-name: 'bootstrap' !default;
$treeview-item-height: 32px !default;
$treeview-text-line-height: 30px !default;
$treeview-text-min-height: 30px !default;
$treeview-input-height: 30px !default;
$treeview-root-ul-padding: 0 0 0 24px !default;
$treeview-rtl-root-ul-padding: 0 24px 0 0 !default;
$treeview-child-ul-padding: 0 0 0 24px !default;
$treeview-rtl-child-ul-padding: 0 24px 0 0 !default;
$treeview-text-wrap-padding: 0 0 0 24px !default;
$treeview-rtl-text-wrap-padding: 0 24px 0 0 !default;
$treeview-icon-size: 24px !default;
$treeview-nrml-icon-height: 24px !default;
$treeview-icon-margin: 0 0 0 -24px !default;
$treeview-rtl-icon-margin: 0 -24px 0 0 !default;
$treeview-icon-padding: 8px !default;
$treeview-text-padding: 0 5px !default;
$treeview-text-margin: 0 !default;
$treeview-image-size: 18px !default;
$treeview-image-height: 18px !default;
$treeview-image-margin: 0 0 0 5px !default;
$treeview-navigable-image-icon-margin: 0 10px 0 12px !default;
$treeview-navigable-uncheck-image-margin: 0 10px 0 0 !default;
$treeview-navigable-image-icon-rtl-margin: 0 12px 0 10px !default;
$treeview-navigable-uncheck-image-rtl-margin: 0 0 0 10px !default;
$treeview-navigable-icon-image-margin: 0 8px 0 0 !default;
$treeview-navigable-icon-image-margin-reverse: 0 0 0 8px !default;
$treeview-navigable-check-margin-bigger: 0 0 0 12px !default;
$treeview-navigable-icon-image-anchor-margin-bigger: 0 10px 0 6px !default;
$treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
$treeview-navigable-icon-image-anchor-margin: 0 10px 0 2px !default;
$treeview-navigable-icon-image-anchor-margin-reverse: 0 2px 0 10px !default;
$treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
$treeview-rtl-image-margin: 0 5px 0 0 !default;
$treeview-input-padding: 0 7px !default;
$treeview-image-text-padding: 0 10px !default;
$treeview-icon-image-margin: 0 0 0 10px !default;
$treeview-rtl-icon-image-margin: 0 10px 0 0 !default;
$treeview-check-margin: 0 0 0 5px !default;
$treeview-rtl-check-margin: 0 5px 0 0 !default;
$treeview-check-text-padding: 0 10px !default;
$treeview-check-image-margin: 0 0 0 12px !default;
$treeview-rtl-check-image-margin: 0 12px 0 0 !default;
$treeview-border-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) !default;
$treeview-drop-count-border-size: 1px !default;
$treeview-drop-count-font-size: 13px !default;
$treeview-edit-wrap-width: calc(100% - 2px) !default;
$treeview-check-wrap-width: calc(100% - 24px) !default;
$treeview-check-icon-wrap-width: calc(100% - 61px) !default;
$treeview-check-icon-img-wrap-width: calc(100% - 89px) !default;
$treeview-icon-wrap-width: calc(100% - 29px) !default;
$treeview-icon-img-wrap-width: calc(100% - 57px) !default;

$treeview-big-item-height: 40px !default;
$treeview-big-text-line-height: 38px !default;
$treeview-big-text-min-height: 38px !default;
$treeview-big-input-height: 38px !default;
$treeview-big-text-padding: 0 10px !default;
$treeview-big-input-padding: 0 9px !default;
$treeview-big-icon-padding: 7px !default;
$treeview-big-image-margin: 0 0 0 10px !default;
$treeview-big-rtl-image-margin: 0 10px 0 0 !default;
$treeview-big-icon-image-margin: 0 0 0 10px !default;
$treeview-big-rtl-icon-image-margin: 0 10px 0 0 !default;
$treeview-big-check-margin: 0 0 0 10px !default;
$treeview-big-rtl-check-margin: 0 10px 0 0 !default;
$treeview-big-check-image-margin: 0 0 0 16px !default;
$treeview-big-rtl-check-image-margin: 0 16px 0 0 !default;
$treeview-drag-icon-padding: 6px !default;
$treeview-font-family: $font-family !default;
$treeview-drag-icon-font-size: 12px !default;
$treeview-big-check-wrap-width: calc(100% - 27px) !default;
$treeview-big-check-icon-wrap-width: calc(100% - 68px) !default;
$treeview-big-check-icon-img-wrap-width: calc(100% - 96px) !default;
$treeview-big-icon-wrap-width: calc(100% - 34px) !default;
$treeview-big-icon-img-wrap-width: calc(100% - 62px) !default;  

$treeview-font-family: $font-family !default;
$treeview-drag-icon-font-size: 12px !default;
$treeview-drag-icon-padding: 6px !default;
$treeview-navigable-check-text-padding-bigger: 0 !default;
$treeview-sibling-border-size: 4px !default;
$treeview-virtual-mask-margin-bottom: 20px !default;
$treeview-root-ul-margin: 0 !default;
$treeview-interaction-icon-radius: 15px !default;
$treeview-text-wrap-margin: 0 !default;
$treeview-text-sibling-margin-top: -1px !default;
$treeview-input-group-margin-bottom: 0px !default;
$treeview-input-padding: 6px !default;
$treeview-nav-padding: 0 !default;
$treeview-sibling-margin-top: -5px !default;
$treeview-popup-border-radius: 4px !default;
$treeview-popup-border-width: 1px !default;
$treeview-popup-font-size: 14px !default;
$treeview-popup-padding: 4px !default;
$treeview-popup-icon-line-height: 18px !default;
$treeview-popup-tail-border-size: 10px !default;
$treeview-drop-count-radius: 15px !default;
$treeview-drop-count-padding: 3px 5px 4px !default;
$treeview-drop-count-margin: -12px !default;
$treeview-border-size: 1px !default;
$treeview-big-list-text-input-height: 36px !default;
$treeview-nrml-siblings-height: 6px !default;
$treeview-sibling-before-height: 1px !default;
$treeview-popup-font-weight: normal !default;
$treeview-popup-icon-height: 26px !default;
$treeview-height-none: 0 !default;
$treeview-drop-count-line-height: normal !default;
$treeview-padding-none: 0 !default;
$treeview-list-item-padding: 2px 0 !default;
$treeview-child-ul-margin: 2px 0 -2px !default;
$treeview-input-group-input-height: 28px !default;

$ripple-size: -7px !default;
$ripple-height: 32px !default;
$ripple-width: 32px !default;

/* stylelint-disable property-no-vendor-prefix */
@mixin user-select {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

@mixin sibling-style {
  @if $skin-name == 'material' {
    border-radius: 10px;
  }
  @else {
    border: $treeview-sibling-border-size solid transparent;
  }
}

@mixin sibling-before($position) {
  @if $skin-name == 'material' {
    @if $position == 'rtl' {
      right: 6px;
      top: 3px;
    }
    @else {
      left: 6px;
      top: 3px;
    }
  }
  @else {
    @if $position == 'rtl' {
      right: 0;
    }
    @else {
      left: 0;
    }
  }
}

@mixin big-icon-style($size) {
  height: $size;
  width: $size;
}

@include export-module('treeview-layout') {
  @keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
    }
  }

  .e-treeview {
    display: block;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      border: $treeview-border-size solid;
      border-color: $treeview-border-color;
      border-radius: $treeview-radius;
    }
    @if $skin-name == 'tailwind3' {
      background: $treeview-bg-color;
    }

    &.e-virtualization {
      overflow: auto;

      & .e-virtual-mask {
        display: block;
        margin-bottom: $treeview-virtual-mask-margin-bottom;
      }

      & .e-ul {
        overflow: unset;
      }
    }

    .e-mask-parent {
      display: none;
    }

    & > .e-ul {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
    }

    &.e-text-wrap {
      .e-list-text {
        white-space: normal;
        word-break: break-word;
      }

      &.e-ie-wrap {
        .e-list-text {
          word-break: break-all;
        }
      }

      .e-editing {
        .e-list-text,
        .e-list-text .e-input-group {
          max-width: $treeview-edit-wrap-width;
        }
      }

      .e-checkbox-wrapper {
        & + .e-list-text {
          max-width: $treeview-check-wrap-width;
        }

        & + .e-list-icon,
        & + .e-list-img {
          & + .e-list-text {
            max-width: $treeview-check-icon-wrap-width;
          }
        }

        & + .e-list-icon + .e-list-img {
          & + .e-list-text {
            max-width: $treeview-check-icon-img-wrap-width;
          }
        }
      }

      .e-list-icon,
      .e-list-img {
        & + .e-list-text {
          max-width: $treeview-icon-wrap-width;
        }
      }

      .e-list-icon + .e-list-img {
        & + .e-list-text {
          max-width: $treeview-icon-img-wrap-width;
        }
      }
    }

    @if ($skin-name == 'fluent2') {
      .e-checkbox-wrapper .e-frame {
        margin-right: $treeview-margin-none;
      }
      .e-list-item:last-child:not(.e-level-1) {
        padding-bottom: $treeview-padding-none;
      }
    }

    .e-ul {
      margin: $treeview-root-ul-margin;
      padding: $treeview-root-ul-padding;
    }

    .e-node-collapsed .e-list-item .e-fullrow,
    .e-display-none {
      display: none;
    }

    .e-list-item {
      list-style: none;
      @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
        padding: $treeview-list-item-padding;
      }
      @if $skin-name == 'fluent2' {
        padding: $treeview-list-item-padding;
      }

      .e-ul {
        padding: $treeview-child-ul-padding;
        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
          margin: $treeview-child-ul-margin;
        }
        @if $skin-name == 'fluent2' {
          margin-top: $treeview-child-ul-margin;
        }
      }

      &.e-disable {

        > .e-text-content,
        > .e-fullrow {
          -ms-touch-action: none;
          opacity: .5;
          pointer-events: none;
          touch-action: none;
        }
      }

      &.e-active {
        @if $skin-name == 'tailwind' {
          font-weight: $treeview-active-font-weight;
        }
      }

      div.e-icons.interaction {
        -webkit-transition: -webkit-transform .3s ease-in-out;
        border-radius: $treeview-interaction-icon-radius;
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
      }

      .e-icons.e-icon-collapsible {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }

      .e-icons.e-icons-spinner::before {
        content: none;
      }

      .e-text-content {
        .e-list-text {
          &:has(> .e-input-group) {
            @if $skin-name == 'material' or $skin-name == 'material-dark' {
              padding-top: 1px;
              padding-bottom: 1px;
              .e-input-group {
                height: 34px;

                .e-input {
                  line-height: 26px;
                  min-height: 26px;
                }
              }
            }
            @if $skin-name == 'tailwind3' {
              padding-top: $treeview-edit-inline-padding-top;
              padding-bottom: $treeview-edit-inline-padding-bottom;
            }
            @if $skin-name == 'highcontrast' {
              padding-top: $treeview-edit-inline-padding;
              padding-bottom: $treeview-edit-inline-padding;
            }
            @if ($skin-name == 'FluentUI') {
              padding-top: $treeview-edit-inline-padding;
              padding-bottom: $treeview-edit-inline-padding;
            }
            @if $skin-name == 'bootstrap5.3' {
              padding-top: $treeview-edit-inline-padding;
              padding-bottom: $treeview-edit-inline-padding;
            }
            @if $skin-name == 'bootstrap4' {
              padding-top: $treeview-edit-inline-padding;
              padding-bottom: $treeview-edit-inline-padding;
            }
            @if $skin-name == 'bootstrap5' {
              padding-top: $treeview-edit-inline-padding;
              padding-bottom: $treeview-edit-inline-padding;
            }
          }
        }
      }
    }

    .e-icons {
      .e-spinner-pane {
        position: relative;
      }
      .e-treeview-spinner {
        position: absolute;
      }
    }

    .e-icons-spinner {
      position: relative;
    }

    .e-text-content {
      @include user-select;
      cursor: pointer;
      margin: $treeview-text-wrap-margin;
      padding: $treeview-text-wrap-padding;

      @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' {
        border: 1px solid;
      }

      @if $skin-name == 'Material3' or $skin-name == 'tailwind3' {
        border: $treeview-border-none;
      }

      + .e-sibling {
        @if ($skin-name == 'tailwind') {
          margin-top: -2px;
        }
        @else if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
          margin-top: 1px;
        }
        @else {
          margin-top: $treeview-text-sibling-margin-top;
        }
      }
    }

    .e-fullrow {
      @include user-select;
      border: $treeview-border-size solid;
      box-sizing: border-box;
      cursor: pointer;
      height: $treeview-item-height;
      left: 0;
      overflow: hidden;
      position: absolute;
      width: 100%;
      @if $skin-name == 'fluent2' {
        border-radius: $treeview-radius;
        width: calc(100% - 8px);
        margin-left: $treeview-fullrow-margin-left;
      }

      @supports (-webkit-overflow-scrolling: touch) {
        z-index: 0;
      }
    }

    .e-checkbox-wrapper {
      margin: $treeview-check-margin;
      pointer-events: all;
      position: relative;

      & + .e-list-icon,
      & + .e-list-img {
        margin: $treeview-check-image-margin;
      }

      & + .e-list-text {
        padding: $treeview-check-text-padding;
      }

      .e-ripple-container {
        bottom: $ripple-size;
        height: $ripple-height;
        left: $ripple-size;
        right: $ripple-size;
        top: $ripple-size;
        width: $ripple-width;
      }
    }

    .e-list-text {
      box-sizing: border-box;
      display: inline-block;
      line-height: $treeview-text-line-height;
      margin: $treeview-text-margin;
      @if $skin-name == 'Material3' or $skin-name == 'tailwind3' {
        min-height: $treeview-item-min-height;
      }
      @else if $skin-name != 'bootstrap4' {
        min-height: $treeview-text-min-height;
      }
      @else if $skin-name == 'bootstrap4' {
        min-height: $treeview-text-min-height;
      }
      @if $skin-name == 'tailwind3' {
        font-weight: $treeview-font-weight;
      }
      padding: $treeview-text-padding;
      text-decoration: none;
      vertical-align: middle;

      .e-input-group {
        height: $treeview-input-height;
        @if ($skin-name == 'tailwind') {
          margin-top: 4px;
          margin-bottom: 4px;
        }
        @else {
          margin-bottom: $treeview-input-group-margin-bottom;
        }
        min-width: 150px;
        vertical-align: bottom;
        @if ($skin-name == 'fluent2') {
          border-color: $treeview-input-border-color;
        }
        .e-input {
          @if $skin-name != 'material' and $skin-name != 'material-dark' {
            height: $treeview-input-group-input-height;
            padding-top: $treeview-input-padding;
            padding-bottom: $treeview-input-padding;
          }
          @if $skin-name == 'tailwind3' {
            line-height: $treeview-input-line-height;
            height: $treeview-nrml-input-height;
          }
          @if $skin-name == 'bootstrap5.3' {
            height: $treeview-input-group-height;
            padding-top: $treeview-input-group-padding;
            padding-bottom: $treeview-input-group-padding;
          }
        }
      }
      @if ($skin-name == 'fluent2') {
        .e-input-group:hover {
          border-color: $treeview-input-border-color;
          border-bottom-color: $treeview-input-border-color;
        }
      }
    }

    .e-navigable-text {
      @if ($skin-name != 'Material3') {
        padding: $treeview-text-padding;
      }
      @else {
        padding: $treeview-nav-padding;
      }
    }

    .e-list-icon,
    .e-list-img {
      display: inline-block;
      height: $treeview-image-height;
      margin: $treeview-image-margin;
      vertical-align: middle;
      width: $treeview-image-size;

      & + .e-list-icon,
      & + .e-list-img {
        margin: $treeview-icon-image-margin;
      }

      & + .e-list-text {
        padding: $treeview-image-text-padding;
      }

      & + .e-navigable-text {
        padding: $treeview-image-text-padding;
      }
    }

    .e-icon-collapsible,
    .e-icon-expandable {
      display: inline-block;
      height: $treeview-nrml-icon-height;
      margin: $treeview-icon-margin;
      vertical-align: middle;
      width: $treeview-icon-size;

      &::before {
        display: inline-block;
        padding: $treeview-icon-padding;
      }
    }

    .e-load {
      -webkit-animation: rotation .5s infinite linear;
      animation: rotation .5s infinite linear;
    }

    .e-sibling {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
        width: 144px;
      }
      @else {
        @include sibling-style;
        height: $treeview-nrml-siblings-height;
        margin-top: $treeview-sibling-margin-top;
        width: 6px;
      }

      &::before {
        @include sibling-before(ltr);
        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
          height: $treeview-sibling-before-height;
          top: -1.5px;
        }
        @else {
          height: $treeview-sibling-before-height;
          width: 144px;
        }
      }
    }

    .e-sibling,
    .e-sibling::before {
      position: absolute;
      z-index: 2;
    }

    .e-popup {
      @include user-select;
      font-weight: $treeview-popup-font-weight;
      position: absolute;
      z-index: 99999;

      .e-content {
        border-radius: $treeview-popup-border-radius;
        border-style: solid;
        border-width: $treeview-popup-border-width;
        font-size: $treeview-popup-font-size;
        padding: $treeview-popup-padding;
      }

      .e-icons {
        border: $treeview-popup-border-width solid transparent;
        cursor: pointer;
        display: inline-block;
        height: $treeview-popup-icon-height;
        line-height: $treeview-popup-icon-line-height;
        padding: $treeview-popup-padding;
        width: 26px;
      }

      .e-downtail {
        &::before,
        &::after {
          border: $treeview-popup-tail-border-size solid transparent;
          content: '';
          height: $treeview-height-none;
          left: 8px;
          position: absolute;
          width: 0;
        }

        &::after {
          bottom: -18px;
        }
      }
    }

    &.e-fullrow-wrap {

      .e-text-content {
        pointer-events: none;
        position: relative;
      }

      .e-icon-collapsible,
      .e-icon-expandable,
      .e-input,
      .e-list-url {
        pointer-events: auto;
      }
    }

    & .e-navigable {

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

      .e-list-url {
        width: 100%;
      }

      .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {
        @if $skin-name == 'bootstrap4' {
          padding: $treeview-navigable-icon-image-margin-reverse;
        }
        @else {
          padding: $treeview-icon-image-margin;
        }

        .e-list-icon,
        .e-list-img {
          margin: $treeview-navigable-icon-image-anchor-margin;
        }

        .e-list-icon + .e-list-img {
          margin: $treeview-rtl-icon-image-margin;
        }
      }

      .e-anchor-wrap {
        padding: $treeview-check-margin;
      }

      .e-nav-wrapper {
        padding: $treeview-nav-padding;
      }

      .e-checkbox-wrapper + .e-list-text .e-nav-wrapper:not(:has(.e-list-icon)) {
        padding: $treeview-nav-padding;
      }

      .e-list-icon,
      .e-list-img {
        @if $skin-name == 'bootstrap4' {
          margin: $treeview-navigable-icon-image-margin;
        }
        @else {
          margin: $treeview-rtl-icon-image-margin;
        }
      }
    }

    &.e-drag-item {
      overflow: visible;
      z-index: 10000;

      .e-text-content {
        float: left;

        @if ($skin-name == 'Material3') {
          .e-list-img {
            margin: $treeview-drag-icon-img-margin;
          }
        }

        .e-list-text {
          @if ($skin-name == 'FluentUI') {
            padding: $treeview-icon-padding;
          }
          @else if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
            padding: $treeview-padding-none $treeview-drag-icon-padding;
          }
          @if $skin-name == 'fluent2' {
            line-height: $treeview-text-content-line-height;
            padding: $treeview-text-content-padding;
          }
        }
      }

      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
        .e-icon-collapsible,
        .e-icon-expandable {
          @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI') {
            @if ($skin-name == 'fluent2') {
              margin: $treeview-margin-none;
            }
            @else {
              margin: $treeview-drag-icon-margin;
            }
          }
          @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            box-sizing: content-box;
            padding-left: $treeview-drag-icon-padding;
          }
        }
      }

      .e-icon-collapsible::before,
      .e-icon-expandable::before {
        font-size: $treeview-drag-icon-font-size;
        @if (($skin-name != 'bootstrap5' or $skin-name == 'bootstrap5.3') and $skin-name != 'FluentUI') {
          padding: $treeview-drag-icon-padding;
        }
        @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
          padding-right: $treeview-drag-icon-padding-right;
        }
      }

      .e-drop-count {
        border: $treeview-drop-count-border-size solid;
        border-radius: $treeview-drop-count-radius;
        box-sizing: content-box;
        font-size: $treeview-drop-count-font-size;
        @if $skin-name == 'bootstrap4' {
          line-height: 1.5;
          min-width: 10px;
          padding: 0 5px;
        }
        @else {
          line-height: $treeview-drop-count-line-height;
          min-width: 12px;
          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
            padding: $treeview-drop-count-padding;
          }
          @else {
            padding: $treeview-drop-count-padding;
          }
        }
        margin-left: $treeview-drop-count-margin;
        position: absolute;
        text-align: center;
        top: -10px;
      }
    }

    &.e-dragging {

      .e-text-content,
      .e-fullrow {
        cursor: default;
      }
    }

    &.e-rtl {

      & .e-navigable {

        .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {

          @if $skin-name == 'bootstrap4' {
            padding: $treeview-navigable-icon-image-margin;
          }
          @else {
            padding: $treeview-rtl-icon-image-margin;
          }

          .e-list-icon,
          .e-list-img {
            margin: $treeview-navigable-icon-image-anchor-margin-reverse;
          }

          .e-list-icon + .e-list-img {
            margin: $treeview-icon-image-margin;
          }
        }

        .e-anchor-wrap {
          padding: $treeview-rtl-check-margin;
        }

        .e-nav-wrapper {
          padding: $treeview-nav-padding;
        }

        .e-list-icon,
        .e-list-img,
        .e-list-icon + .e-list-img {
          @if $skin-name == 'bootstrap4' {
            margin: $treeview-navigable-icon-image-margin-reverse;
          }
          @else {
            margin: $treeview-icon-image-margin;
          }
        }
      }

      .e-ul {
        padding: $treeview-rtl-root-ul-padding;
      }

      .e-list-item {

        .e-ul {
          padding: $treeview-rtl-child-ul-padding;
        }
      }

      .e-text-content {
        padding: $treeview-rtl-text-wrap-padding;
      }

      .e-checkbox-wrapper {
        margin: $treeview-rtl-check-margin;

        & + .e-list-icon,
        & + .e-list-img {
          margin: $treeview-rtl-check-image-margin;
        }
      }

      .e-list-icon,
      .e-list-img {
        margin: $treeview-rtl-image-margin;

        & + .e-list-icon,
        & + .e-list-img {
          margin: $treeview-rtl-icon-image-margin;
        }
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        margin: $treeview-rtl-icon-margin;
      }

      .e-sibling::before {
        @include sibling-before(rtl);
      }

      &.e-drag-item {

        .e-icons.e-drop-next {
          transform: rotate(180deg);
        }

        .e-text-content {
          float: right;
        }

        .e-icon-collapsible,
        .e-icon-expandable {
          @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
            margin: $treeview-rtl-drag-margin;
          }
        }

        .e-drop-count {
          margin-right: $treeview-drop-count-margin;
        }
      }

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

    &.e-disabled {
      .e-fullrow,
      .e-icons,
      .e-text-content,
      .e-list-img,
      .e-list-icon {
        cursor: auto;
      }

      .e-list-url {
        cursor: default;
        pointer-events: none;
      }
    }

    &.e-interaction.e-fullrow-wrap {
      .e-text-content {
        pointer-events: auto;
      }
    }
  }
  /* stylelint-enable property-no-vendor-prefix */
}

/* stylelint-disable property-no-vendor-prefix */
@mixin sibling-theme($left, $right) {
  @if $skin-name == 'material' {
    background: $treeview-drag-line-bg;
  }
  @else {
    border-#{$left}-color: $treeview-drag-line-bg;
    border-#{$right}-color: transparent;
  }
}

@mixin bg-border($background, $border) {
  background-color: $background;
  border-color: $border;
}

@mixin active-hover-theme {
  @if $theme-name =='fluentui-dark' {
    background-color: color.adjust($treeview-item-active-bg, $lightness: 5%);
  }
  @else {
    @if ($skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3') {
      background-color: $treeview-item-active-bg;
    }

    @else {
      background-color: $treeview-item-active-hover-bg;
    }
  }
  border-color: $treeview-item-active-hover-border-color;
  @if $skin-name == 'bootstrap' or $skin-name == 'highcontrast' {
    -webkit-box-shadow: $treeview-border-shadow;
    box-shadow: $treeview-border-shadow;
  }
}

@mixin active-editing-theme {
  @include bg-border($treeview-item-border-color, $treeview-item-border-color);
  @if $skin-name == 'bootstrap' {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

@mixin active-font-weight {
  @if $skin-name == 'highcontrast' {
    font-weight: $treeview-active-font-weight;
  }
}

@mixin text-content($text-color, $icon-color) {
  color: $text-color;

  .e-list-text {
    color: $text-color;
    .e-input {
      @include active-font-weight;
    }
  }

  .e-icon-collapsible,
  .e-icon-expandable {
    color: $icon-color;
  }
}

@include export-module('treeview-theme') {
  .e-treeview {
    -webkit-tap-highlight-color: transparent;

    @if $skin-name == 'bootstrap5' {
      &.e-disabled {
        opacity: .5;
      }
    }

    .e-text-content,
    .e-fullrow {
      border-color: $treeview-item-border-color;
    }

    .e-list-text {
      color: $treeview-text-color;
      font-size: $treeview-font-size;

      .e-input {
        @include active-font-weight;
      }
    }

    .e-list-icon,
    .e-list-img {
      font-size: $treeview-image-font-size;
    }

    .e-icon-collapsible,
    .e-icon-expandable {
      color: $treeview-icon-color;

      &::before {
        font-size: $treeview-icon-font-size;
      }
    }

    .e-list-item {
      &.e-hover,
      &.e-node-focus {
        background: transparent;

        > .e-fullrow {
          @include bg-border($treeview-item-hover-bg, $treeview-item-hover-border-color);
        }

        > .e-text-content {
          @include text-content($treeview-text-hover-color, $treeview-icon-hover-color);
        }
      }

      &.e-active {
        background: transparent;

        > .e-fullrow {
          background-color: $treeview-item-active-bg;
          @if $skin-name != 'fluent2' {
            border-color: $treeview-item-active-border-color;
          }
        }

        &.e-animation-active {
          > .e-fullrow {
            @include bg-border(transparent, transparent);
          }

          > .e-text-content {
            color: $treeview-text-color;

            .e-list-text {
              color: $treeview-text-color;
            }
          }
        }

        > .e-text-content {
          @include text-content($treeview-text-active-color, $treeview-icon-active-color);

          .e-list-text {
            @include active-font-weight;
          }

          .e-check {
            @if $skin-name == 'highcontrast' {
              @include bg-border($treeview-checkmark-bgcolor, $treeview-checkmark-border-color);
              color: $treeview-checkmark-color;
            }
            @else if $skin-name == 'bootstrap4' {
              @include bg-border($treeview-item-active-check-bg, $treeview-item-active-check-border-color);
              color: $treeview-item-active-check-color;
            }
            @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3' {
              border-color: $content-text-color-selected;
            }
          }

          .e-stop {
            @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5.3' {
              border-color: $content-text-color-selected;
            }
          }
        }

        &.e-hover,
        &.e-node-focus {

          > .e-fullrow {
            @include active-hover-theme;
          }

          > .e-text-content {
            @include text-content($treeview-text-active-hover-color, $treeview-icon-active-hover-color);
          }
        }
      }

      &.e-editing {
        &.e-active,
        &.e-hover,
        &.e-node-focus {
          > .e-fullrow {
            @include active-editing-theme;
          }

          > .e-text-content {
            @include text-content ($treeview-text-color, $treeview-icon-color);
          }
        }
      }

      &.e-disable {
        > .e-text-content,
        > .e-fullrow {
          color: $treeview-text-disable-color;
          @if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
            .e-list-text {
              color: $treeview-text-disable-color;
            }
          }
        }

        > .e-text-content {
          > .e-icon-collapsible,
          > .e-icon-expandable {
            color: $treeview-icon-disable-color;
          }
        }
      }
      @if ($theme-name == 'fluent2-highcontrast') {
        .e-checkbox-wrapper .e-frame.e-check {
          border-color: $content-text-color-hover;
        }
      }
    }

    .e-sibling {
      @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
        @include sibling-theme(left, right);
      }
      @else {
        border-top: 2px solid $treeview-drag-line-bg;
      }

      &::before {
        background: $treeview-drag-line-color;
        @if $skin-name == 'bootstrap4' {
          border: $treeview-sibling-border;
        }
        @if ($skin-name == 'fluent2') {
          border: $treeview-sibling-border solid $treeview-sibling-border-color;
        }
      }
    }

    .e-popup {
      .e-content {
        @include bg-border($treeview-popup-bg-color, $treeview-popup-border-color);
      }

      &.e-select {
        .e-icons {
          border-color: $treeview-popup-border-color;
        }
      }

      .e-downtail {
        &::before {
          border-top-color: $treeview-popup-border-color;
        }
        &::after {
          border-top-color: $treeview-popup-bg-color;
        }
      }
    }

    &:not(.e-fullrow-wrap) {
      .e-list-item {
        &.e-hover,
        &.e-node-focus {
          > .e-text-content {
            @include bg-border($treeview-item-hover-bg, $treeview-item-hover-border-color);
          }
        }

        &.e-active {
          > .e-text-content {
            @include bg-border($treeview-item-active-bg, $treeview-item-active-border-color);
          }

          &.e-hover,
          &.e-node-focus {
            > .e-text-content {
              @include active-hover-theme;
            }
          }
        }

        &.e-editing {
          &.e-active,
          &.e-hover,
          &.e-node-focus {
            > .e-text-content {
              @include active-editing-theme;
            }
          }
        }
      }
    }

    &.e-fullrow-wrap {
      .e-text-content {
        border-color: transparent;
      }
    }

    &.e-drag-item {
      background-color: $treeview-drag-item-bg;
      font-family: $treeview-font-family;
      @if ($skin-name == 'Material3') {
        background: $treeview-drag-item-bg;
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        &::before {
          font-size: $treeview-drag-icon-font-size;
        }
      }

      .e-list-text {
        @include active-font-weight;
        color: $treeview-drag-item-color;
        @if $skin-name == 'bootstrap4' {
          padding: $treeview-drag-text-padding;
        }
      }

      .e-text-content {
        @if $skin-name == 'bootstrap4' {
          -webkit-box-shadow: $treeview-drag-item-box-shadow;
          border-radius: .5em;
          box-shadow: $treeview-drag-item-box-shadow;
        }
      }

      .e-icons {
        color: $treeview-drag-icon-color;
      }

      .e-drop-count {
        @include bg-border($treeview-drop-count-bg, $treeview-drop-count-border);
        color: $treeview-drop-count-color;
      }

      &.e-rtl {
        .e-sibling {
          @if ($skin-name != 'tailwind' and $skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
            @include sibling-theme(right, left);
          }
          @else {
            border: 1px solid $treeview-drag-line-bg;
          }
        }
      }
    }
    /* stylelint-enable property-no-vendor-prefix */
  }
}

@include export-module('treeview-bootstrap-dark-icons') {

  /*! TreeView icons */
  .e-treeview {
    .e-list-item {
      div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
      div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
        content: '\e230';
      }
    }

    .e-sibling::before {
      content: '';
    }

    .e-popup {
      .e-icons::before {
        content: '\e930';
      }
    }

    &.e-drag-item {
      .e-icons.e-drop-in::before {
        content: '\e22c';
      }

      .e-icons.e-drop-out::before {
        content: '\e22b';
      }

      .e-icons.e-drop-next::before {
        content: '\e22d';
      }

      .e-icons.e-no-drop::before {
        content: '\e22a';
      }
    }
  }
}

@mixin big-icon-style($size) {
  height: $size;
  width: $size;
}

@include export-module('treeview-bigger') {
  .e-bigger .e-treeview,
  .e-treeview.e-bigger {

    @if $skin-name == 'tailwind3' {
      border-radius: $treeview-bigger-radius;
    }

    @if $skin-name == 'bootstrap4' {
      .e-ul,
      .e-list-item .e-ul {
        padding-left: 16px;
      }
    }

    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
      .e-ul {
        padding: $treeview-big-root-ul-padding;
      }

      .e-list-item {
        .e-ul {
          padding: $treeview-big-child-ul-padding;
        }

        .e-text-content {
          padding: $treeview-big-text-wrap-padding;
        }

        .e-list-icon,
        .e-list-img {
          @if $skin-name == 'fluent2' {
            @include big-icon-style($treeview-big-img-size);
          }
          @else {
            @include big-icon-style($treeview-big-icon-font-size);
          }
        }

        .e-small.e-css.e-checkbox-wrapper {
          & .e-frame {
            height: $treeview-big-checkbox-size;
            line-height: $treeview-big-checkbox-line-height;
            width: $treeview-big-checkbox-size;
          }

          & .e-check,
          & .e-stop {
            font-size: $treeview-big-checkbox-mark-font-size;
          }

          & .e-stop {
            line-height: $treeview-big-checkbox-line-height;
          }
        }

        .e-checkbox-wrapper + .e-list-text {
          padding: $treeview-big-check-text-padding;
        }
      }

      .e-icon-collapsible,
      .e-icon-expandable {
        @include big-icon-style($treeview-big-icon-font-size);
        margin: $treeview-big-icon-margin;
      }

      &.e-drag-item {

        @if $skin-name == 'FluentUI' {
          .e-icon-expandable,
          .e-icon-collapsible {
            padding-left: 24px;
            padding-top: 10px;
          }
        }

        .e-drop-count {
          padding: $treeview-big-drop-count-padding;
        }
      }
    }

    .e-navigable {

      .e-list-text {
        @if ($skin-name != 'Material3' and $skin-name != 'tailwind3') {
          padding: $treeview-padding-none;
        }
        width: 100%;
      }

      .e-checkbox-wrapper {
        + .e-list-text {
          padding: $treeview-navigable-check-text-padding-bigger;
        }

        + .e-list-url .e-anchor-wrap {
          @if $skin-name == 'bootstrap4' {
            padding: $treeview-check-image-margin;
          }

          .e-list-icon,
          .e-list-img {
            margin: $treeview-navigable-icon-image-anchor-margin-bigger;
          }
        }
      }

      .e-anchor-wrap {
        @if $skin-name == 'bootstrap4' {
          padding: $treeview-navigable-check-margin-bigger;
        }
        @else {
          padding: $treeview-icon-image-margin;
        }
      }

      .e-list-icon,
      .e-list-img,
      .e-list-icon + .e-list-img {

        @if $skin-name == 'bootstrap4' {
          margin: $treeview-rtl-check-image-margin;
        }
        @else {
          margin: $treeview-rtl-icon-image-margin;
        }
      }
    }

    .e-fullrow {
      height: $treeview-big-item-height;
    }

    &.e-text-wrap {
      .e-checkbox-wrapper {
        & + .e-list-text {
          max-width: $treeview-big-check-wrap-width;
        }

        & + .e-list-icon,
        & + .e-list-img {
          & + .e-list-text {
            max-width: $treeview-big-check-icon-wrap-width;
          }
        }

        & + .e-list-icon + .e-list-img {
          & + .e-list-text {
            max-width: $treeview-big-check-icon-img-wrap-width;
          }
        }
      }

      .e-list-icon,
      .e-list-img {
        & + .e-list-text {
          max-width: $treeview-big-icon-wrap-width;
        }
      }

      .e-list-icon + .e-list-img {
        & + .e-list-text {
          max-width: $treeview-big-icon-img-wrap-width;
        }
      }
    }

    .e-list-text {
      line-height: $treeview-big-text-line-height;
      @if $skin-name != 'bootstrap4' or $skin-name != 'tailwind3' {
        min-height: $treeview-big-text-min-height;
      }
      @else if $skin-name == 'bootstrap4' {
        min-height: 38px;
      }
      @if $skin-name == 'tailwind3' {
        padding: $treeview-big-text-padding;
        min-height: $treeview-big-item-min-height;
      }

      @if $skin-name == 'bootstrap5.3' {
        padding: $treeview-big-text-padding;
      }

      @if $skin-name == 'highcontrast' {
        padding: $treeview-big-text-padding;
      }

      @if $skin-name == 'material' or $skin-name == 'material-dark' {
        padding-top: 12px;
        padding-bottom: 12px;
      }

      @if $skin-name == 'FluentUI' {
        padding: $treeview-big-text-padding;
      }

      @if $skin-name == 'bootstrap4' {
        padding-top: 13px;
        padding-bottom: 13px;
      }

      .e-input-group {
        height: $treeview-big-input-height;

        @if $skin-name != 'material' {
          .e-input {
            height: $treeview-big-list-text-input-height;
          }
        }

        @if $skin-name =='bootstrap5' {
          padding-top: 6px;
          padding-bottom: 6px;
          margin-top: 2px;
          margin-bottom: 2px;
        }

        @if $skin-name == 'highcontrast' or $skin-name == 'material-dark' {
          line-height: 42px;
          min-height: 42px;
        }

        .e-input {
          @if $skin-name =='tailwind3' {
            height: $treeview-input-height-bgr;
            line-height: $treeview-big-input-line-height;
            padding-top: $treeview-big-input-padding-top;
            padding-bottom: $treeview-big-input-padding-bottom;
          }

          @if $skin-name =='bootstrap5' {
            height: 24px;
          }

          @if $skin-name =='material' or $skin-name == 'material-dark' {
            line-height: 28px;
            min-height: 28px;
            padding-top: 9px;
            padding-bottom: 5px;
          }

          @if $skin-name == 'bootstrap5.3' {
            line-height: $treeview-list-text-input-line-height;
            min-height: 24px;
            padding-top: $treeview-list-text-input-padding;
            padding-bottom: $treeview-list-text-input-padding;
          }
        }
      }
    }
    .e-list-item .e-text-content .e-list-text {
      &:has(> .e-input-group) {
        @if $skin-name =='highcontrast' {
          padding-top: 4px;
          padding-bottom: 4px;
        }

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

        @if $skin-name =='material' or $skin-name == 'material-dark' {
          padding-top: 3px;
          padding-bottom: 3px;
        }

        @if $skin-name == 'bootstrap4' {
          padding-top: 6px;
          padding-bottom: 6px;
        }
      }
    }

    .e-checkbox-wrapper {
      margin: $treeview-big-check-margin;
      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind') {
        & + .e-list-text {
          padding: $treeview-big-check-text-padding;
        }
      }

      & + .e-list-icon,
      & + .e-list-img {
        margin: $treeview-big-check-image-margin;
      }
    }

    .e-list-icon,
    .e-list-img {
      margin: $treeview-big-image-margin;
      @if $skin-name == 'bootstrap4' {
        font-size: $treeview-big-image-font-size;
      }
      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
        & + .e-list-text {
          padding: $treeview-big-image-text-padding;
        }
      }

      & + .e-list-icon,
      & + .e-list-img {
        margin: $treeview-big-icon-image-margin;
      }
    }

    .e-icon-collapsible,
    .e-icon-expandable {
      @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5.3' {
        height: $treeview-big-icon-size;
        margin: $treeview-big-icon-margin;
        width: $treeview-big-icon-size;
      }

      @if $skin-name == 'tailwind3' {
        height: $treeview-big-icon-height;
        width: $treeview-big-icon-size;
      }

      &::before {
        @if $skin-name != 'tailwind3' and $skin-name != 'Material3' {
          padding: $treeview-big-icon-padding;
        }
      }
    }

    &.e-drag-item {

      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {

        .e-text-content {
          padding-left: $treeview-big-drag-item-text-padding-left;
        }

        .e-icon-collapsible,
        .e-icon-expandable {
          font-size: $treeview-big-drag-icon-font-size;
          @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
            margin: $treeview-big-drag-icon-margin;
          }

          &::before {
            @if ($skin-name != 'bootstrap5' and $skin-name != 'FluentUI') {
              padding: $treeview-big-drag-before-icon-padding;
            }
            @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
              font-size: $treeview-big-drag-icon-font-size;
            }
          }
        }

        @if $skin-name == 'bootstrap4' {
          .e-drop-count {
            border: $treeview-big-drop-count-border-size solid;
          }
        }
      }
    }

    &.e-rtl {

      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
        .e-ul {
          padding: $treeview-big-rtl-root-ul-padding;
        }

        .e-list-item {
          .e-ul {
            padding: $treeview-big-rtl-child-ul-padding;
          }

          .e-text-content {
            padding: $treeview-big-rtl-text-wrap-padding;
          }
        }
      }

      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'bootstrap4' {
        .e-icon-collapsible,
        .e-icon-expandable {
          margin: $treeview-big-rtl-icon-margin;
        }
      }

      &.e-drag-item {

        @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {

          .e-text-content {
            padding-left: 0;
            padding-right: $treeview-big-drag-item-text-padding-left;
          }
        }
      }

      .e-navigable {

        .e-checkbox-wrapper + .e-list-url .e-anchor-wrap {

          @if $skin-name == 'bootstrap4' {
            padding: $treeview-navigable-rtl-margin-reverse;
          }

          .e-list-icon,
          .e-list-img {
            margin: $treeview-navigable-icon-image-anchor-margin-reverse-bigger;
          }
        }

        .e-anchor-wrap {
          @if $skin-name == 'bootstrap4' {
            padding: $treeview-navigable-check-margin-bigger-reverse;
          }
          @else {
            padding: $treeview-rtl-icon-image-margin;
          }
        }

        .e-list-icon,
        .e-list-img,
        .e-list-icon + .e-list-img {
          @if $skin-name == 'bootstrap4' {
            margin: $treeview-check-image-margin;
          }
          @else {
            margin: $treeview-icon-image-margin;
          }
        }
      }

      .e-checkbox-wrapper {
        margin: $treeview-big-rtl-check-margin;

        & + .e-list-icon,
        & + .e-list-img {
          margin: $treeview-big-rtl-check-image-margin;
        }
      }

      .e-list-icon,
      .e-list-img {
        margin: $treeview-big-rtl-image-margin;

        & + .e-list-icon,
        & + .e-list-img {
          margin: $treeview-big-rtl-icon-image-margin;
        }
      }
    }
  }

  .e-bigger .e-treeview,
  .e-treeview.e-bigger {
    .e-list-text {
      font-size: $treeview-big-font-size;
      @if $skin-name == 'Material3' {
        padding: $treeview-bigger-list-text-padding;
      }

      @if $skin-name == 'bootstrap4' {
        color: $treeview-big-text-color;
      }
    }

    .e-icon-collapsible,
    .e-icon-expandable {
      &::before {
        font-size: $treeview-big-icon-font-size;
      }
    }

    &.e-drag-item {
      .e-icon-collapsible,
      .e-icon-expandable {
        @if $skin-name == 'bootstrap4' {
          padding: $treeview-big-drag-icon-padding;
        }
        @else if $skin-name == 'bootstrap5.3' {
          padding: $treeview-drag-icon-padding;
        }
      }

      .e-list-text {
        @if $skin-name == 'bootstrap4' {
          padding: $treeview-big-drag-text-padding;
        }
      }
    }
    .e-list-item.e-editing {
      .e-list-text {
        .e-input-group.e-input-focus {
          .e-input {
            @if $skin-name == 'tailwind3' {
              padding-bottom: $treeview-big-input-padding-bottom;
            }
          }
        }
      }
    }
  }
}

$sidebar-background: $grey !default;
$sidebar-border: $grey-cc !default;
$sidebar-box-shadow: 0 0 20px rgba(0, 0, 0, .2) !default;
$sidebar-overlay: rgba(0, 0, 0, .6) !default;
$sidebar-height: 100% !default;
$sidebar-border-width: 1px !default;
$sidebar-margin-none: 0 !default;

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

@include export-module('sidebar-theme') {

  ejs-sidebar {
    display: none;
  }

  .e-sidebar-display {
    display: block;
  }

  .e-sidebar {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;
    background: $sidebar-background;
    height: $sidebar-height;
    overflow: auto;
    position: fixed;
    top: 0;
    transition: none;
    vertical-align: middle;
    visibility: hidden;
    will-change: transform;

    &.e-right.e-open,
    &.e-left.e-open {
      transform: translateX(0%);
      transition: transform .5s ease;
      visibility: visible;
    }

    &.e-right.e-close,
    &.e-left.e-close {
      box-shadow: none;
      visibility: hidden;
    }

    &.e-right.e-close {
      transform: translateX(100%);
    }

    &.e-left.e-close {
      transform: translateX(-100%);
    }

    &.e-left.e-transition.e-close,
    &.e-right.e-transition.e-close,
    &.e-right.e-close {
      transition: transform .5s ease, visibility 500ms;
    }

    &.e-right {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-left: $sidebar-border-width solid $sidebar-border;
      }
      @else {
        border-left: $sidebar-border-width solid $sidebar-border;
      }
      left: auto;
      right: 0;
      top: 0;
    }

    &.e-left {
      @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
        border-right: $sidebar-border-width solid $sidebar-border;
      }
      @else {
        border-right: $sidebar-border-width solid $sidebar-border;
      }
      left: 0;
      right: auto;
      top: 0;
    }

    &.e-left.e-close.e-dock,
    &.e-right.e-close.e-dock {
      transform: translateX(0%);
      transition: width .5s ease, visibility 500ms;
      visibility: visible;
    }

    &.e-left.e-open.e-dock.e-blazor-dock,
    &.e-right.e-open.e-dock.e-blazor-dock {
      transition: width .5s ease, visibility 500ms;
    }

    &.e-left.e-open.e-disable-animation,
    &.e-right.e-open.e-disable-animation,
    &.e-right.e-close.e-disable-animation,
    &.e-left.e-close.e-disable-animation {
      transition: none;
    }

    &.e-visibility {
      visibility: hidden;
    }

    &.e-over {
      box-shadow: $sidebar-box-shadow;
    }
  }

  .e-sidebarcontainer {
    > .e-sidebar {
      &.e-over,
      &.e-auto,
      &.e-push,
      &.e-slide + div {
        transition: margin .5s ease, transform .5s ease;
      }
    }

    > .e-sidebar.e-left.e-open.e-auto + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: var(--sidebar-width);
    }

    > .e-sidebar.e-left.e-close.e-auto + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-right.e-open.e-auto + div {
      margin-left: $sidebar-margin-none;
      transform: translateX(0);
      margin-right: var(--sidebar-width);
    }

    > .e-sidebar.e-right.e-close.e-auto + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-left.e-open.e-push + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: var(--sidebar-width);
    }

    > .e-sidebar.e-left.e-close.e-push + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-right.e-open.e-push + div {
      margin-left: $sidebar-margin-none;
      transform: translateX(0);
      margin-right: var(--sidebar-width);
    }

    > .e-sidebar.e-right.e-close.e-push + div {
      margin-right: $sidebar-margin-none;
      transform: translateX(0);
      margin-left: $sidebar-margin-none;
    }

    > .e-sidebar.e-left.e-open.e-slide + div {
      margin-left: $sidebar-margin-none;
      transform: translate(var(--sidebar-width));
    }

    > .e-sidebar.e-left.e-close.e-slide + div {
      margin-left: $sidebar-margin-none;
      transform: translate(0);
    }

    > .e-sidebar.e-right.e-open.e-slide + div {
      margin-right: $sidebar-margin-none;
      margin-left: $sidebar-margin-none;
      transform: translate(calc(-1 * var(--sidebar-width)));
    }

    > .e-sidebar.e-right.e-close.e-slide + div {
      margin-right: $sidebar-margin-none;
      margin-left: $sidebar-margin-none;
      transform: translate(0);
    }
  }

  .e-sidebar-absolute {
    position: absolute;
  }

  .e-sidebar-context {
    overflow-x: hidden;
    position: relative;
  }

  .e-backdrop,
  .e-sidebar-overlay {
    background-color: $sidebar-overlay;
    height: $sidebar-height;
    left: 0;
    pointer-events: auto;
    top: 0;
    z-index: 999;
  }

  .e-backdrop {
    @if ($skin-name != 'tailwind' and $skin-name != 'tailwind3' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI' and $skin-name != 'Material3') {
      opacity: .5;
    }
    @if ($skin-name == 'fluent2') {
      filter: $sidebar-overlay-filter;
      opacity: $sidebar-overlay-opacity;
    }
    width: auto;
  }

  .e-sidebar-overlay {
    @if ($skin-name != 'tailwind' and  $skin-name != 'bootstrap5' and  $skin-name != 'FluentUI') {
      opacity: .5;
    }
    @if ($skin-name == 'fluent2') {
      backdrop-filter: $sidebar-overlay-filter;
    }
    position: fixed;
    width: 100%;
  }

  .e-content-animation {
    transition: margin .5s ease, -webkit-transform .5s ease, transform .5s ease;

    &.e-overlay {
      box-sizing: border-box;
      overflow: auto;
      user-select: none;
    }
  }

  .e-disable-interaction {
    pointer-events: none;
    touch-action: none;
  }

  .e-sidebar-overflow {
    overflow-x: hidden;
  }

  .e-content-placeholder.e-sidebar.e-placeholder-sidebar {
    left: 0;
    position: fixed;
    right: auto;
    top: 0;
    visibility: visible;
  }
}

$menu-bigger-li-right-padding: 15px !default;
$menu-bigger-icon-margin-right: 10px !default;
$menu-caret-padding-left: 10px !default;
$menu-li-border-style: solid !default;
$menu-li-border-width: 1px !default;
$menu-seperator-border-color: $grey-44 !default;
$menu-ul-border: $menu-li-border-width $menu-li-border-style $grey-44 !default;
$menu-font-size: 14px !default;
$menu-ul-padding: 0 !default;
$menu-blank-icon: 34px !default;
$menu-ul-header-padding: $menu-ul-padding !default;
$menu-separator-padding: 0 !default;
$menu-li-height: 42px !default;
$menu-li-line-height: 42px !default;
$menu-li-padding: 0 15px !default;
$menu-li-text-indent: 15px !default;
$menu-icon-font-size: 14px !default;
$menu-header-font-size: 14px !default;
$menu-icon-font-size-text-indent: 14px !default;
$menu-icon-margin-right: 8px !default;
$menu-icon-margin-right-text-indent: 8px !default;
$menu-icon-width: 1em !default;
$menu-caret-font-size: 11px !default;
$menu-caret-right: 6px !default;
$menu-caret-icon: '\e94d' !default;
$menu-caret-li-padding: 26px !default;
$menu-disable-opacity: .65 !default;
$menu-li-right-padding: 12px !default;
$menu-bigger-font-size: 15px !default;
$menu-bigger-li-height: 52px !default;
$menu-bigger-li-line-height: 52px !default;
$menu-bigger-li-padding: 0 15px !default;
$menu-bigger-li-text-indent: 15px !default;
$menu-icon-bigger-font-size: 16px !default;
$menu-bigger-caret-li-padding: 36px !default;
$menu-bigger-caret-font-size: 15px !default;
$menu-bigger-caret-right: 8px !default;
$menu-separator-bigger-padding: 0 !default;
$menu-ul-bigger-header-padding: 0 !default;
$menu-blank-icon-bigger: 41px !default;
$menu-ul-bgcolor: $grey-darker !default;
$menu-li-border-color: $grey-44 !default;
$menu-color: $cmenu-color !default;
$menu-li-bgcolor: $grey !default;
$menu-li-selection-font-color: $cmenu-li-selection-font-color !default;
$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
$menu-li-hover-outline-offset: 0 !default;
$menu-li-selection-bgcolor: $grey !default;
$menu-selected-color: $cmenu-selected-color !default;
$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
$menu-li-selected-outline-offset: 0 !default;
$menu-hscroll-nav-size: 30px !default;
$menu-vscroll-nav-size: 16px !default;
$menu-vscroll-nav-height: 16px !default;
$menu-vscroll-nav-padding: 16px !default;
$menu-scroll-nav-icon-size: 10px !default;
$menu-bigger-hscroll-nav-size: 36px !default;
$menu-bigger-vscroll-nav-size: 24px !default;
$menu-bigger-vscroll-nav-height: 24px !default;
$menu-bigger-vscroll-nav-padding: 24px !default;
$menu-bigger-scroll-nav-icon-size: 12px !default;
$menu-srollbar-ul-border: $menu-ul-border !default;
$submenu-caret-font-size: $menu-caret-font-size !default;
$submenu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
$submenu-color: $cmenu-color !default;
$menu-icon-color: $cmenu-caret-color !default;
$menu-icon-hover-color: inherit !default;
$menu-icon-focussed-color: $cmenu-caret-color !default;
$menu-caret-color: $cmenu-caret-color !default;
$menu-header-icon-padding: 0 16px !default;
$menu-padding-none: 0 !default;
$menu-bigger-icon-mrg-right: 0 !default;
$menu-bigger-icon-margin-left: 0 !default;
$menu-icon-margin-bottom: 4px !default;
$menu-scroll-padding: 0 !default;
$menu-hscroll-nav-interaction-border: 0 !default;
$menu-hamburger-border: 0 !default;
$menu-hamburger-border-radius: 0 !default;
$menu-hamburger-padding: 0 !default;
$menu-hamburger-rtl-icon-margin-left: 0 !default;
$menu-border-none: 0 !default;
$menu-inherit-height: inherit !default;
$menu-inherit-line-height: inherit !default;
$menu-auto-height: auto !default;
$menu-header-font-family: $font-family !default;
$menu-scroll-bar-height: 100% !default;
$menu-container-height: 1px !default;
$menu-normal-line-height: normal !default;
$menu-container-ul-font-weight: 500 !default;
$menu-wrapper-line-height: 0 !default;

@include export-module('menu-layout') {
  .e-menu-wrapper,
  .e-menu-container {
    border: $menu-ul-border;
    border-radius: $cmenu-ul-border-radius;
    display: inline-block;
    line-height: $menu-wrapper-line-height;

    & .e-menu-vscroll {
      height: $menu-inherit-height;
    }

    @at-root {
      & ul {
        @include ul-layout;
        @if $skin-name == 'tailwind3' {
          font-weight: $menu-container-ul-font-weight;
        }
        font-size: $menu-font-size;
        padding: $menu-ul-padding;
        text-align: left;
        white-space: nowrap;

        & .e-separator {
          @if $skin-name == 'fluent2' {
            padding: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
          }
        }

        &.e-vertical {
          min-width: 120px;

          & .e-menu-item {
            display: list-item;
          }

          & .e-separator {
            @include separator-size;
          }
        }

        &.e-menu {
          display: inline-block;

          &:not(.e-vertical) {
            padding: $menu-ul-header-padding;

            & .e-separator {
              border-right-style: $menu-li-border-style;
              border-right-width: $menu-li-border-width;
              padding: $menu-separator-padding;
            }
          }

          & .e-menu-item .e-menu-icon {
            width: $menu-icon-width;
          }
        }

        & .e-menu-item  {
          @include li-layout;
          display: inline-flex;
          height: $menu-li-height;
          line-height: $menu-li-line-height;
          padding: $menu-li-padding;
          vertical-align: top;
          white-space: nowrap;

          & .e-menu-icon {
            font-size: $menu-icon-font-size;
            height: $menu-auto-height;
            line-height: $menu-li-line-height;
            margin-right: $menu-icon-margin-right;
            text-align: center;
            @if $skin-name == 'fluent2' {
              margin-bottom: $menu-icon-margin-bottom;
            }
            @else {
              margin-bottom: $menu-icon-margin-bottom;
            }
          }

          & .e-caret {
            font-size: $menu-caret-font-size;
            height: $menu-auto-height;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' {
              line-height: $menu-icon-li-height;
            }
            @else {
              line-height: $menu-li-line-height;
            }
            position: absolute;
            right: $menu-caret-right;
            top: 0;
            width: auto;
          }

          &.e-menu-caret-icon {
            padding-right: $menu-caret-li-padding;
          }

          &.e-disabled {
            cursor: auto;
            opacity: $menu-disable-opacity;
            pointer-events: none;
            @if $skin-name == 'tailwind3' {
              color: $flyout-text-color-disabled;
            }
          }
        }
      }

      & .e-ul {
        @include ul-size;
        min-width: $cmenu-min-width;
        @if $skin-name == 'tailwind3' {
          font-weight: $menu-ul-font-weight;
        }

        & .e-menu-item {
          @include li-size;
          display: list-item;

          & .e-caret {
            font-size: $submenu-caret-font-size;
            @if $skin-name == 'fluent2' {
              padding: $menu-container-caret-padding;
            }
          }
        }
      }
    }

    &.e-menu-icon-right {
      & .e-menu-header .e-menu-icon {
        float: right;
      }

      & .e-menu-header .e-menu-title {
        padding: $menu-header-icon-padding;
      }
    }

    & .e-menu-header {
      display: none;
      font-family: $menu-header-font-family;
      font-size: $menu-header-font-size;
      // font-weight: $font-weight;
      height: $menu-li-height;
      line-height: $menu-li-line-height;
      text-align: left;
      white-space: nowrap;
      @if $skin-name == 'tailwind3' {
        font-weight: $menu-container-ul-font-weight;
      }

      & .e-menu-title,
      & .e-menu-icon {
        display: inline-block;
        line-height: $menu-inherit-line-height;
      }

      & .e-menu-icon {
        cursor: pointer;
        float: left;
        outline: none;
        padding: $menu-header-icon-padding;
      }
    }

    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
      @if $skin-name == 'bootstrap4' {
        padding: $menu-scroll-padding $menu-hscroll-nav-size;
      }
      @else {
        padding: $menu-scroll-padding $menu-hscroll-nav-size;
      }

      & .e-scroll-nav {
        width: $menu-hscroll-nav-size;
        @if $skin-name == 'tailwind3' {
          min-height: 38px;
        }

        &:focus,
        &:hover {
          border: $menu-hscroll-nav-interaction-border;
        }

        &.e-scroll-right-nav {
          border-left: $menu-srollbar-ul-border;
        }

        &.e-scroll-left-nav {
          border-right: $menu-srollbar-ul-border;
        }
      }

      & .e-hscroll-bar {
        overflow-y: hidden;
      }
    }

    & .e-scroll-nav .e-nav-arrow {
      font-size: $menu-scroll-nav-icon-size;

      &.e-nav-left-arrow,
      &.e-nav-up-arrow {
        transform: rotate(180deg);
      }
    }

    &.e-rtl .e-scroll-nav .e-nav-arrow {
      &.e-nav-left-arrow {
        transform: rotate(0deg);
      }

      &.e-nav-right-arrow {
        transform: rotate(180deg);
      }
    }

    &.e-popup.e-menu-popup {
      border: $cmenu-ul-border;
      box-shadow: $cmenu-sub-ul-box-shadow;
      overflow: hidden;
      position: absolute;
    }

    & .e-menu-vscroll.e-vscroll {
      &:not(.e-scroll-device) {
        padding: $menu-vscroll-nav-padding $menu-scroll-padding;
      }

      &.e-scroll-device {
        & .e-scroll-nav.e-scroll-down-nav {
          transform: none;
          width: 100%;

          & .e-nav-down-arrow {
            transform: none;
          }
        }
      }

      & .e-vscroll-bar {
        height: $menu-scroll-bar-height;
        width: inherit;

        & .e-vscroll-content {
          width: inherit;
        }
      }

      & .e-scroll-nav {
        height: $menu-vscroll-nav-height;
      }
    }

    &.e-scrollable {
      display: block;

      & .e-menu {
        display: block;
        overflow: auto;
      }
    }

    &.e-contextmenu-container {
      height: $menu-container-height;

      .e-menu-vscroll ul.e-ul {
        width: inherit;
      }

      .e-menu-vscroll {
        border: $cmenu-ul-border;
        box-shadow: $cmenu-sub-ul-box-shadow;
      }
    }
  }

  .e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu {
    &.e-vertical {
      & .e-blankicon {
        padding-left: $menu-blank-icon;
      }
    }
  }

  .e-rtl.e-menu-wrapper ul,
  .e-rtl.e-menu-container ul {
    & .e-menu-item {
      @include rtl-li-layout;
      text-align: right;

      & .e-menu-icon {
        margin-left: $menu-icon-margin-right;
      }

      & .e-caret {
        left: $menu-caret-right;
      }

      &.e-menu-caret-icon {
        padding-left: $menu-caret-li-padding;
        padding-right: $menu-li-right-padding;
      }
    }

    &.e-ul {
      & .e-menu-item {
        @include rtl-li-size;
      }
    }
  }

  .e-rtl.e-menu-container:not(.e-hamburger) .e-menu {
    &.e-vertical {
      & .e-blankicon {
        padding-right: $menu-blank-icon;
      }
    }
  }

  .e-menu-wrapper.e-hamburger,
  .e-menu-container.e-hamburger {
    border: $menu-hamburger-border;
    display: block;
    position: relative;

    & .e-menu-header:not(.e-vertical) {
      border: $menu-ul-border;
      display: block;
    }

    & .e-popup.e-menu-popup {
      border: $menu-hamburger-border;
      border-radius: $menu-hamburger-border-radius;
      box-shadow: none;
      display: block;
      position: relative;
      width: 100%;
    }

    & ul {
      &.e-menu {
        border: $menu-ul-border;
        overflow-y: auto;
        width: 100%;

        &.e-menu-parent.e-hide-menu {
          display: none;
        }

        & .e-menu-item {
          text-indent: $menu-li-text-indent;
          @if $skin-name == 'Material3' {
            border-radius: $menu-item-border-radius;
          }

          &.e-blankicon {
            text-indent: $menu-li-text-indent + $menu-icon-font-size-text-indent + $menu-icon-margin-right-text-indent;
          }

          & .e-menu-icon {
            display: inline;
            text-indent: 0;
          }

          &.e-menu-hide {
            display: none;
          }
        }

        /* stylelint-disable */
		    & .e-menu-item[aria-expanded = "true"] .e-caret {
			    -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
			    -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
          text-indent: 0;
		    }

		    & .e-menu-item[aria-expanded = "false"] .e-caret {
			    -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
          text-indent: 0;
        }
        /* stylelint-enable */
      }

      &.e-menu:not(.e-vertical) {
        border-top: $menu-hamburger-border;
        display: block;
        padding: $menu-hamburger-padding;
        position: absolute;
      }

      &.e-ul {
        font-size: $menu-font-size;
        padding: $menu-hamburger-padding;

        & .e-menu-item {
          line-height: $menu-li-line-height;
          text-indent: inherit;

          &.e-blankicon {
            padding: $menu-hamburger-padding;
            text-indent: inherit;
          }

          & .e-caret {
            font-size: $menu-caret-font-size;
            right: $menu-caret-right;
          }

          &.e-selected {
            & .e-menu-icon,
            & .e-caret {
              @if $skin-name == 'bootstrap5.3' {
                color: $flyout-text-color-pressed;
              }
            }
          }
        }
      }

      & .e-menu-item {
        display: list-item;
        height: $menu-auto-height;
        padding: $menu-hamburger-padding;

        &.e-menu-caret-icon,
        &.e-blankicon {
          padding: $menu-hamburger-padding;
        }

        & .e-menu-url {
          display: inline-block;
          min-width: 120px;
          text-indent: 0;
          width: 100%;
        }

        &.e-separator {
          @include separator-size;
        }
      }
    }
    @if $skin-name == 'tailwind3' {
      .e-menu-header {
        background: $content-bg-color-alt1;
        .e-menu-icon {
          font-size: $menu-bigger-scroll-nav-icon-size;
        }
      }
      ul {
        background: $content-bg-color;
        .e-menu-item {
          & .e-menu-icon,
          & .e-caret {
            font-size: $menu-bigger-scroll-nav-icon-size;
          }
        }
      }
      .e-ul {
        font-weight: $menu-container-ul-font-weight;
      }
    }
  }

  .e-rtl.e-menu-wrapper.e-hamburger ul,
  .e-rtl.e-menu-container.e-hamburger ul {
    & .e-menu-item {
      & .e-menu-caret-icon {
        padding-left: $menu-hamburger-padding;
        padding-right: $menu-hamburger-padding;
      }

      & .e-menu-icon {
        margin-left: $menu-hamburger-rtl-icon-margin-left;
        text-indent: inherit;
      }

      & .e-caret {
        left: $menu-caret-right;
        right: auto;
      }
    }
  }

  .e-menu-container .e-vscroll ul {
    position: relative;
  }
}

@include export-module('menu-theme') {
  .e-menu-wrapper,
  .e-menu-container {
    background: $menu-ul-bgcolor;

    @at-root {
      & .e-menu {
        @if $skin-name == 'bootstrap4' {
          background-color: $cmenu-ul-bgcolor;
        }
        @else {
          background: inherit;
        }
        color: $menu-color;

        &.e-menu {
          &:not(.e-vertical) {
            & .e-separator {
              border-right-color: $menu-seperator-border-color;
            }
          }
        }

        & .e-menu-item  {
          @if $skin-name == 'bootstrap4' {
            & .e-caret {
              color: $menu-caret-color;
            }

            & .e-menu-icon {
              color: $menu-icon-color;
            }
          }
          @else {
            @include icon-color;
            @if $skin-name == 'fluent2' {
              & .e-menu-icon,
              & .e-caret {
                color: $icon-color;
              }
            }
          }

          &.e-menu-header {
            border-bottom-color: $cmenu-li-border-color;
          }

          & .e-menu-url {
            color: $menu-color;
          }

          &.e-focused {
            color: $menu-icon-hover-color;
            outline: $menu-li-hover-outline;
            outline-offset: $menu-li-hover-outline-offset;
            @if $skin-name == 'bootstrap4' {
              background: $menu-ul-bgcolor;

              & .e-caret {
                color: $menu-caret-color;
              }

              & .e-menu-icon {
                color: $menu-icon-hover-color;
              }
            }
            @else {
              @include focused-icon-color;
              background: $menu-li-bgcolor;
              @if $skin-name == 'Material3' {
                border-radius: $menu-foucused-border-radius;
              }
              @if $skin-name == 'fluent2' {
                border-radius: $menu-foucused-border-radius;
                &:focus-visible {
                  color: $content-text-color;
                  & .e-caret,
                  & .e-menu-icon {
                    color: $icon-color;
                  }
                }
              }
            }
          }

          &.e-selected,
          &.e-active-item {
            color: $menu-selected-color;
            outline: $menu-li-selected-outline;
            outline-offset: $menu-li-selected-outline-offset;
            @if $skin-name == 'bootstrap4' {
              background: $menu-ul-bgcolor;
            }
            @if $skin-name == 'FluentUI' {
              background: $cmenu-li-bgcolor;
            }
            @else {
              background: $menu-li-selection-bgcolor;
            }
            @if $skin-name == 'Material3' {
              border-radius: $menu-foucused-border-radius;
            }
            @if $skin-name == 'fluent2' {
              border-radius: $menu-foucused-border-radius;
            }

            & .e-caret {
              @if $skin-name == 'Material3' {
                color: $menu-icon-focussed-color;
              }
              @else {
                color: $menu-caret-color;
              }
            }

            & .e-menu-icon {
              @if $skin-name == 'Material3' {
                color: $menu-icon-focussed-color;
              }
              @else {
                color: $menu-caret-color;
              }
            }
          }

          &.e-separator {
            border-bottom-color: $menu-seperator-border-color;
          }

          &:focus-visible {
            @if $skin-name == 'fluent2' {
              &:not(.e-selected) {
                border-radius: $menu-foucused-border-radius;
                background-color: $content-bg-color;
                box-shadow: $shadow-focus-ring1;
              }
            }
            @if $skin-name == 'tailwind3' {
              box-shadow: $shadow-focus-ring2;
              background: transparent;
              border-radius: $menu-li-border-radius;
            }
          }
        }

        @include disabled-color;
      }

      & .e-ul {
        background: inherit;
        color: $submenu-color;

        & .e-menu-item {
          @if $skin-name == 'bootstrap4' {
            & .e-caret,
            & .e-menu-icon {
              color: $submenu-color;
            }
          }
          @else if $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
            & .e-caret,
            & .e-menu-icon {
              color: $menu-icon-color;
            }
          }

          &.e-focused {
            @if $skin-name == 'bootstrap4' {
              & .e-caret {
                color: $menu-caret-color;
              }

              & .e-menu-icon {
                color: $submenu-color;
              }
            }
            @if $skin-name == 'fluent2' {
              background-color: $flyout-bg-color-hover;
              border-radius: $menu-foucused-border-radius;
            }
            @if $skin-name == 'tailwind3' {
              & .e-caret,
              & .e-menu-icon {
                color: $icon-color-hover;
              }
            }
          }

          &.e-selected,
          &.e-active-item {
            @if $skin-name == 'bootstrap4' {
              & .e-caret,
              & .e-menu-icon {
                color: $menu-icon-focussed-color;
              }
            }
            @if $skin-name == 'fluent2' {
              background-color: $flyout-bg-color-selected;
            }
            @if $skin-name == 'tailwind3' {
              & .e-caret,
              & .e-menu-icon {
                color: $menu-icon-color;
              }
            }
          }

          & .e-menu-url {
            color: $submenu-color;
          }

          &.e-focused {
            @include focused-color;
          }

          &.e-selected,
          &.e-active-item {
            @include selected-color;
          }

          &.e-separator {
            border-bottom-color: $cmenu-li-border-color;
          }

          &:focus-visible {
            @if $skin-name == 'fluent2' {
              background-color: $flyout-bg-color-focus;
              box-shadow: $shadow-focus-ring1;
              border-radius: $menu-foucused-border-radius;
            }
            @if $skin-name == 'tailwind3' {
              box-shadow: $shadow-focus-ring2;
              background: $flyout-bg-color;
            }
          }

          &:active {
            @if $skin-name == 'bootstrap5.3' {
              background-color: $cmenu-li-selection-bgcolor;
              color: $cmenu-selected-color;
            }
          }
        }
      }
    }

    &.e-menu-popup {
      background: $cmenu-ul-bgcolor;

      & .e-ul .e-menu-item.e-disabled,
      & .e-ul .e-menu-item.e-disabled .e-menu-icon {
        @if $skin-name == 'fluent2' {
          color: $flyout-text-color-disabled;
          opacity: 1;
        }
      }

      &.e-sfcontextmenu .e-menu-vscroll {
        background: inherit;
      }
    }

    & .e-menu-hscroll.e-hscroll .e-scroll-nav {
      background: $menu-ul-bgcolor;

      & .e-nav-arrow.e-icons {
        @if $skin-name == 'fluent2' {
          color: $icon-color;
        }
        @else if $skin-name == 'tailwind3' {
          color: $secondary-text-color-focus;
        }
        @else {
          color: $cmenu-caret-color;
        }
      }

      &:hover {
        @if $skin-name == 'bootstrap4' {
          background: color.adjust($gray-600, $lightness: -7.5%);
          border: 1px inset color.adjust($gray-600, $lightness: -10%);

          & .e-icons {
            color: $menu-icon-focussed-color;
          }
        }
        @else if $skin-name == 'Material3' {
          border-radius: $menu-foucused-border-radius;
        }
        @else {
          background: $menu-li-bgcolor;
        }

        @if $skin-name == 'fluent2' {
          & .e-nav-arrow.e-icons {
            color: $icon-color-pressed;
          }
        }
      }

      &:focus {
        @if $skin-name == 'bootstrap4' {
          background: color.adjust($gray-600, $lightness: -7.5%);
          border-color: color.adjust($gray-600, $lightness: -10%);

          & .e-icons {
            color: $menu-icon-focussed-color;
          }
        }
        @else {
          background: $menu-li-bgcolor;
        }

        @if $skin-name == 'fluent2' {
          & .e-nav-arrow.e-icons {
            color: $icon-color-hover;
          }
        }
      }

      &:active {
        @if $skin-name == 'bootstrap4' {
          background: color.adjust($gray-600, $lightness: -7.5%);
          border: 1px inset color.adjust($gray-600, $lightness: -10%);
        }
        @else if $skin-name == 'tailwind3' {
          background: $secondary-bg-color-pressed;
        }
        @else {
          background: $menu-li-bgcolor;
        }
        @if $skin-name == 'fluent2' {
          & .e-nav-arrow.e-icons {
            color: $icon-color-pressed;
          }
        }
      }
    }

    &.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav {
      background: $cmenu-ul-bgcolor;
      border-color: $menu-seperator-border-color;

      & .e-icons {
        color: $cmenu-color;
      }

      &:hover,
      &:focus {
        background: $cmenu-li-bgcolor;
        @if $skin-name == 'fluent2' {
          & .e-nav-arrow.e-icons {
            color: $flyout-text-color-selected;
          }
        }
      }

      &.e-overlay {
        @if $skin-name == 'fluent2' {
          & .e-nav-arrow.e-icons {
            color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }

      &:active {
        background: $cmenu-li-selection-bgcolor;
      }
    }

    &.e-inherit {
      border: $menu-border-none;

      & .e-menu,
      & .e-menu .e-menu-item .e-menu-icon,
      & .e-menu .e-menu-item .e-caret {
        color: inherit;
      }

      & .e-menu {
        background: inherit;
      }

      & .e-menu .e-menu-item.e-selected,
      & .e-menu .e-menu-item.e-active-item,
      & .e-menu .e-menu-item.e-focused {
        background: rgba(transparent, .056);
        color: inherit;
      }
    }
  }

  .e-menu-wrapper.e-hamburger,
  .e-menu-container.e-hamburger {
    & .e-menu-header {
      color: $submenu-color;

      & .e-menu-icon {
        color: $submenu-color;
      }
    }

    & ul {
      color: $submenu-color;

      @if $skin-name == 'bootstrap4' {
        & .e-selected .e-caret,
        & .e-active-item .e-caret,
        & .e-caret {
          color: $submenu-color;
        }
      }
    }
  }
}

@if $skin-name == 'fluent2' {
  .e-menu-wrapper.e-hamburger .e-menu-popup .e-menu-item.e-menu-caret-icon:not(.e-selected):not(.e-focused) .e-icons {
    color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
  }
}
@if $skin-name == 'tailwind3' {
  .e-menu-wrapper.e-hamburger .e-menu .e-menu-item.e-selected {
    color: $primary;
  }
}

@include export-module('menu-bootstrap-dark-icons') {
  .e-menu-wrapper,
  .e-menu-container {
    @at-root {
      & ul {
        &.e-vertical .e-menu-item {
          & .e-caret {
            &::before {
              content: '\e207';
            }
          }
        }

        & .e-menu-item  {
          & .e-caret {
            &::before {
              content: '\e95d';
            }
          }
        }
      }

      & .e-ul .e-menu-item {
        & .e-caret {
          &::before {
            content: '\e207';
          }
        }
      }
    }

    &.e-hamburger {
      & .e-menu-header {
        & .e-menu-icon::before {
          content: '\e941';
        }
      }

      &.e-close-icon {
        & .e-menu-header {
          & .e-menu-icon::before {
            content: '\e60a';
          }
        }
      }

      & .e-vertical .e-menu-item .e-caret,
      & .e-menu-item .e-caret {
        &::before {
          content: '\e95d';
        }
      }
    }

    &.e-rtl.e-hamburger ul {
      &.e-ul {
        & .e-caret {
          &::before {
            content: '\e95d';
          }
        }
      }
    }

    & .e-menu-hscroll.e-hscroll .e-nav-right-arrow::before,
    & .e-menu-hscroll.e-hscroll .e-nav-left-arrow::before {
      content: '\e207';
    }

    & .e-menu-vscroll.e-vscroll .e-nav-up-arrow::before,
    & .e-menu-vscroll.e-vscroll .e-nav-down-arrow::before {
      content: '\e95d';
    }
  }

  .e-rtl.e-menu-wrapper ul,
  .e-rtl.e-menu-container ul,
  .e-bigger .e-rtl.e-menu-wrapper ul,
  .e-bigger.e-rtl.e-menu-wrapper ul,
  .e-bigger .e-rtl.e-menu-container ul,
  .e-bigger.e-rtl.e-menu-container ul {
    &.e-vertical,
    &.e-ul {
      & .e-caret {
        &::before {
          content: '\e937';
        }
      }
    }
  }

  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger ul,
  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger ul,
  .e-bigger .e-rtl.e-menu-container.e-hamburger ul,
  .e-bigger.e-rtl.e-menu-container.e-hamburger ul {

    &.e-ul {
      & .e-caret {
        &::before {
          content: '\e95d';
        }
      }
    }
  }
}

@mixin bigger-rtl-blank-icon {
  padding-left: $cmenu-caret-blank-icon;

  &.e-menu-caret-icon {
    padding-left: $cmenu-caret-li-padding;
  }
}

@mixin bigger-ul-size {
  font-size: $cmenu-bigger-font-size;
  padding: $cmenu-ul-bigger-padding;
  white-space: nowrap;
}

@mixin bigger-li-size {
  height: $cmenu-bigger-li-height;
  line-height: $cmenu-bigger-li-line-height;
  @if $skin-name == 'fluent2' {
    height: $cmenu-bigger-li-size-height;
    line-height: $cmenu-bigger-li-size-line-height;
    padding: $cmenu-bigger-li-size-padding;
  }

  &.e-menu-caret-icon {
    @if $skin-name == 'fluent2' {
      padding: $cmenu-caret-icon-padding;
    }
  }

  & .e-menu-icon {
    font-size: $cmenu-icon-bigger-font-size;
    line-height: $cmenu-bigger-li-line-height;
    @if $skin-name == 'tailwind' {
      margin-right: $cmenu-icon-bigger-margin-right;
    }
  }

  & .e-caret {
    line-height: $cmenu-bigger-li-line-height;
    @if $skin-name == 'fluent2' {
      margin: $cmenu-bigger-caret-icon-margin;
    }
  }

  &.e-separator {
    height: $menu-auto-height;
    line-height: $menu-normal-line-height;
  }
}

@include export-module('menu-bigger') {
  .e-bigger .e-menu-wrapper ul,
  .e-bigger.e-menu-wrapper ul,
  .e-bigger .e-menu-container ul,
  .e-bigger.e-menu-container ul {
    font-size: $menu-bigger-font-size;

    &.e-menu .e-menu-item {
      line-height: $menu-bigger-li-line-height;
      padding: $menu-bigger-li-padding;
      height: $menu-bigger-li-height;

      & .e-menu-icon {
        font-size: $menu-icon-bigger-font-size;
        line-height: $menu-bigger-li-line-height;
        margin-right: $menu-bigger-icon-margin-right;
        @if $skin-name == 'fluent2' {
          margin-bottom: $menu-bigger-icon-item-margin-bottom;
        }
      }

      & .e-caret {
        font-size: $menu-bigger-caret-font-size;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' {
          line-height: $menu-bigger-li-icon-height;
        }
        @else {
          line-height: $menu-bigger-li-line-height;
        }
        right: $menu-bigger-caret-right;
      }

      &.e-separator {
        padding: $menu-separator-bigger-padding;
      }
    }

    &.e-menu {
      &:not(.e-vertical) {
        padding: $menu-ul-bigger-header-padding;
      }

      &.e-vertical {
        & .e-menu-item {
          &.e-separator {
            height: $menu-auto-height;
            line-height: $menu-normal-line-height;
          }
        }
      }
    }

    &.e-ul {
      @include bigger-ul-size;
      min-width: $cmenu-bigger-min-width;
      @if $skin-name == 'tailwind3' {
        font-weight: $menu-ul-font-weight;
      }

      & .e-menu-item  {
        @include bigger-li-size;
        @if $skin-name != 'fluent2' {
          padding: $cmenu-li-padding;
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          padding: $menu-bigger-li-padding;
        }

        & .e-caret {
          font-size: $submenu-bigger-caret-font-size;
          right: $cmenu-caret-right;
        }

        &.e-menu-caret-icon {
          padding-right: $cmenu-caret-li-padding;
        }

        & .e-menu-icon {
          @if $skin-name == 'tailwind' {
            margin-right: $menu-icon-bigger-margin-right;
          }
          @else {
            margin-right: $cmenu-icon-margin-right;
          }
        }
      }
    }
  }

  .e-bigger .e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu,
  .e-bigger.e-menu-container:not(.e-hamburger):not(.e-rtl) .e-menu {
    &.e-vertical {
      & .e-blankicon {
        padding-left: $menu-blank-icon-bigger;
      }
    }
  }

  .e-bigger .e-menu-wrapper,
  .e-bigger.e-menu-wrapper,
  .e-bigger .e-menu-container,
  .e-bigger.e-menu-container {
    & .e-menu-hscroll.e-hscroll:not(.e-scroll-device) {
      padding: $menu-padding-none $menu-bigger-hscroll-nav-size;

      & .e-scroll-nav {
        width: $menu-bigger-hscroll-nav-size;
        @if $skin-name == 'tailwind3' {
          min-height: 48px;
        }
      }
    }

    & .e-menu-vscroll.e-vscroll {
      &:not(.e-scroll-device) {
        padding: $menu-bigger-vscroll-nav-padding $menu-padding-none;
      }

      & .e-scroll-nav {
        height: $menu-bigger-vscroll-nav-height;
      }
    }

    &.e-menu-popup {
      box-shadow: $cmenu-parent-ul-box-shadow;
    }

    & .e-scroll-nav .e-icons {
      font-size: $menu-bigger-scroll-nav-icon-size;
    }
  }

  .e-bigger .e-rtl.e-menu-wrapper ul,
  .e-bigger.e-rtl.e-menu-wrapper ul,
  .e-bigger .e-rtl.e-menu-container ul,
  .e-bigger.e-rtl.e-menu-container ul {
    & .e-menu-item {
      text-align: right;

      & .e-menu-icon {
        margin-left: $menu-bigger-icon-margin-right;
        margin-right: $menu-bigger-icon-mrg-right;
      }

      & .e-caret {
        left: $menu-bigger-caret-right;
        margin-left: $menu-bigger-icon-margin-left;
        right: auto;
      }

      &.e-menu-caret-icon {
        padding-left: $menu-bigger-caret-li-padding;
        padding-right: $menu-bigger-li-right-padding;
      }
    }

    &.e-ul {
      & .e-menu-item {
        & .e-menu-icon {
          margin-left: $cmenu-icon-margin-right;
        }

        & .e-caret {
          left: $cmenu-caret-right;
        }

        &.e-menu-caret-icon {
          padding-left: $cmenu-caret-li-padding;
          @if $skin-name == 'fluent2' {
            padding-right: $menu-bigger-caret-icon-padding-right;
          }
          @else {
            padding-right: $cmenu-li-right-padding;
          }
        }

        &.e-blankicon {
          @include bigger-rtl-blank-icon;
        }
      }
    }
  }

  .e-bigger .e-rtl.e-menu-container:not(.e-hamburger) .e-menu,
  .e-bigger.e-rtl.e-menu-container:not(.e-hamburger) .e-menu {
    &.e-vertical {
      & .e-blankicon {
        padding-right: $menu-blank-icon-bigger;
      }
    }
  }

  .e-bigger .e-menu-wrapper.e-hamburger ul,
  .e-bigger.e-menu-wrapper.e-hamburger ul,
  .e-bigger .e-menu-container.e-hamburger ul,
  .e-bigger.e-menu-container.e-hamburger ul {
    & .e-ul {
      max-width: 100%;

      & .e-menu-item {
        height: $menu-auto-height;
        line-height: $menu-bigger-li-line-height;
        padding: $menu-padding-none;
      }
    }
  }

  .e-bigger .e-menu-wrapper.e-hamburger,
  .e-bigger.e-menu-wrapper.e-hamburger,
  .e-bigger .e-menu-container.e-hamburger,
  .e-bigger.e-menu-container.e-hamburger {
    & .e-menu-header {
      font-size: $menu-icon-bigger-font-size;
      height: $menu-bigger-li-height;
      line-height: $menu-bigger-li-line-height;
    }

    & ul.e-menu {
      & .e-menu-item {
        text-indent: $menu-bigger-li-text-indent;

        &.e-blankicon {
          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
        }
      }

      & .e-ul {
        font-size: $menu-bigger-font-size;

        & .e-menu-item {
          text-indent: inherit;

          &.e-menu-caret-icon {
            padding-right: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
          }

          & .e-caret {
            font-size: $menu-bigger-caret-font-size;
            right: $menu-bigger-caret-right;
          }
        }
      }
    }
    @if $skin-name == 'tailwind3' {
      .e-menu-header {
        background: $content-bg-color-alt1;
        .e-menu-icon {
          font-size: $menu-bigger-scroll-nav-icon-size;
        }
      }
      ul {
        background: $content-bg-color;
        .e-menu-item {
          & .e-menu-icon,
          & .e-caret {
            font-size: $menu-bigger-scroll-nav-icon-size;
          }
        }
      }
      .e-ul {
        font-weight: $menu-container-ul-font-weight;
      }
    }
  }

  .e-bigger .e-rtl.e-menu-wrapper.e-hamburger,
  .e-bigger.e-rtl.e-menu-wrapper.e-hamburger,
  .e-bigger .e-rtl.e-menu-container.e-hamburger,
  .e-bigger.e-rtl.e-menu-container.e-hamburger {
    & ul.e-menu {
      & .e-menu-item {
        padding: $menu-padding-none;
        text-indent: $menu-bigger-li-text-indent;

        &.e-blankicon {
          text-indent: $menu-bigger-li-text-indent + $menu-icon-bigger-font-size + $menu-bigger-icon-margin-right;
        }

        & .e-menu-icon {
          margin-left: $menu-bigger-icon-margin-left;
          text-indent: inherit;
        }

        &.e-menu-caret-icon {
          padding-left: $menu-padding-none;
          padding-right: $menu-padding-none;
        }

        & .e-caret {
          left: $menu-caret-right;
          right: auto;
        }
      }

      & .e-ul {
        & .e-menu-item {
          text-indent: inherit;
        }
      }
    }
  }

  .e-bigger .e-menu-container .e-ul .e-menu-item .e-caret {
    @if $skin-name == 'fluent2' {
      padding: $menu-container-caret-padding;
    }
  }

  .e-bigger .e-menu-wrapper:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator),
  .e-bigger .e-menu-container:not(.e-hamburger) ul.e-ul .e-menu-item:not(.e-separator) {
    @if $skin-name == 'fluent2' {
      height: $menu-bigger-ul-item-height;
    }
    @else {
      height: $cmenu-bigger-li-height;
    }
  }

  .e-bigger .e-menu-wrapper:not(.e-hamburger) ul .e-menu-item,
  .e-bigger .e-menu-container:not(.e-hamburger) ul .e-menu-item {
    &.e-menu-caret-icon {
      padding-right: $menu-bigger-caret-li-padding;
    }
  }

  .e-bigger .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item,
  .e-bigger .e-menu-container.e-hamburger ul.e-menu .e-menu-item {
    padding: $menu-padding-none !important; /* stylelint-disable-line declaration-no-important */
    height: $menu-auto-height !important; /* stylelint-disable-line declaration-no-important */
  }
}

$stepper-ol-padding: 0 !default;
$stepper-step-radius: 9999px !default;
$stepper-step-width: 32px !default;
$stepper-step-font-size: 32px !default;
$stepper-icon-size: 16px !default;
$stepper-progress-bar-height: 1.6px !default;
$stepper-progress-bar-width: 1.6px !default;
$stepper-progress-value-height: 100% !default;
$stepper-progress-value-width: 100% !default;
$stepper-progress-position: 50% !default;
$stepper-temp-outline-width: 2px solid !default;
$stepper-label-top: 1em !default;
$stepper-label-bottom: 4.5em !default;
$stepper-label-position: 2.5em !default;
$stepper-validation-position: .25em !default;
$stepper-text-padding: 0 6px !default;
$stepper-icon-text-padding: 0 8px !default;
$stepper-text-vert-padding: 6px 0 !default;
$stepper-label-optional: 3em !default;
$stepper-text-postion: 10px !default;
$stepper-optional-size: 12px !default;
$step-border: 2px solid !default;
$stepper-label-order: -1 !default;
$stepper-font-weight: 600 !default;
$stepper-text-size: 14px !default;
$stepper-tooltip-tip-bottom-height: 8px !default;
$stepper-inherit-height: inherit !default;
$stepper-content-line-height: 0 !default;
$stepper-label-line-height: 2em !default;
$stepper-text-container-border-radius: unset !default;
$stepper-text-container-border-none: none !default;
$step-content-padding: 0 8px !default;
$step-padding-none: 0 !default;
$step-margin-none: 0 !default;
$step-container-padding-block: 5px !default;
$step-label-optional-padding: 6px !default;
$stepper-horizontal-label-gap: 1em !default;
$stepper-label-before-optional-gap: .5em !default;
$stepper-margin-unset: unset !default;
$stepper-horizontal-label-optional-margin: 2.5em !default;
$stepper-horizontal-optional-margin-top: .5em !default;
$stepper-horizontal-label-after-optional-margin-top: .2em !default;
$stepper-vertical-optional-margin-right: 4em !default;
$stepper-progress-top-position: var(--progress-top-position) !default;
$stepper-vertical-progress-position: var(--progress-position) !default;
$stepper-small-step-width: 28px !default;
$stepper-small-step-font-size: 28px !default;
$stepper-small-step-height: 28px !default;
$stepper-small-icon-size: 14px !default;
$stepper-small-optional-size: 10px !default;
$stepper-small-text-size: 12px !default;
$stepper-bigger-step-width: 40px !default;
$stepper-bigger-step-font-size: 40px !default;
$stepper-bigger-step-height: 40px !default;
$stepper-bigger-icon-size: 18px !default;
$stepper-bigger-optional-size: 14px !default;
$stepper-bigger-text-size: 16px !default;
$stepper-bigger-small-step-width: 36px !default;
$stepper-bigger-small-step-font-size: 36px !default;
$stepper-bigger-small-step-height: 36px !default;
$stepper-bigger-small-icon-size: 16px !default;
$stepper-bigger-small-optional-size: 12px !default;
$stepper-bigger-small-text-size: 14px !default;
$step-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-primary, 0 0 0 8px $gray-base !default;
$step-keyboard-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $grey-light-font, 0 0 0 8px $gray-base !default;
$step-valid-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-success, 0 0 0 8px $gray-base !default;
$step-error-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-danger, 0 0 0 8px $gray-base !default;
$step-li-shadow: 0 0 0 8px $gray-base !default;
$step-border-color: $grey-8c !default;
$step-hover-text-color: $brand-primary-font !default;
$step-hover-not-text-color: $grey-dark-font !default;
$step-hover-border-color: $grey-f9 !default;
$step-active-border-color: $grey-f9 !default;
$stepper-outline-color: $gray-base !default;
$step-color: $grey-dark-font !default;
$step-optional-color: $grey-cc !default;
$step-bg-color: $gray-light !default;
$step-completed-color: $brand-primary-font !default;
$step-completed-bg-color: $brand-primary !default;
$step-progress-bg-color: $grey-8c !default;
$step-progress-value-bg-color: $brand-primary !default;
$step-disabled-bg-color: $grey-88 !default;
$step-disabled-font-color: $grey-lighter !default;
$step-disabled-color: $grey-88 !default;
$stepper-text-color: $grey-light-font !default;
$step-valid-icon-only-color:$brand-success !default;
$step-error-icon-only-color: $brand-danger !default;
$step-valid-completed-color: $grey-light-font !default;
$step-valid-completed-bg-color: $brand-success !default;
$step-error-icon-color: $grey-light-font !default;
$step-error-completed-color: $brand-danger !default;
$step-error-completed-bg-color: $brand-danger !default;
$step-hover-color: $grey-88 !default;
$step-active-color: $grey-8c !default;
$step-selected-hover-color: $brand-primary-lighten-10 !default;
$step-selected-active-color: $brand-primary-lighten-15 !default;
@mixin stepper-styles($step-font-size, $step-height, $step-width, $icon-size, $text-size, $optional-size) {
  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
    .e-icons.e-step-indicator {
      font-size: $step-font-size;
    }
    &.e-step-notstarted .e-icons.e-step-indicator {
      width: $step-width;
      height: $step-height;
    }
  }
  .e-step-container {
    .e-step,
    .e-indicator {
      min-width: $step-width;
      min-height: $step-width;
    }
    .e-indicator {
      font-size: $icon-size;
    }
    .e-step-text-container,
    .e-step-label-container {
      font-size: $text-size;
    }
    .e-step-content {
      font-size: $icon-size;
    }
    .e-step-label-optional {
      font-size: $optional-size;
    }
  }
  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
    font-size: $optional-size;
  }
}
@include export-module('stepper-layout') {
  .e-stepper {
    position: relative;
    .e-step-selected {
      .e-text,
      .e-label {
        font-weight: $stepper-font-weight;
      }
    }
    &.e-linear {
      .e-step-container {
        pointer-events: none;
      }
      .e-previous:not(.e-step-disabled),
      .e-next:not(.e-step-disabled),
      .e-step-selected:not(.e-step-disabled),
      .e-previous:not(.e-step-disabled) + li {
        pointer-events: auto;
      }
    }
    &.e-stepper-readonly,
    .e-step-disabled {
      cursor: default;
      pointer-events: none;
    }
    &.e-step-type-indicator .e-step-container {
      &:not(.e-step-item.e-step-label.e-step-text) {
        .e-icons.e-step-indicator {
          font-size: $stepper-step-font-size;
          border-radius: $stepper-step-radius;
        }
      }
    }
    &.e-step-type-indicator .e-step-content,
    &.e-step-type-label .e-step-content {
      padding: $step-content-padding;
    }
    //For Blazor Stepper Tooltip
    .e-step-container:has(.e-tooltip-wrap.e-stepper-tooltip),
    &.e-vertical.e-label-after .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip),
    &.e-vertical.e-label-before .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
      position: relative;
    }
    &.e-horizontal .e-step-item.e-step-label:has(.e-tooltip-wrap.e-stepper-tooltip) {
      position: unset;
    }
    .e-tooltip-wrap.e-stepper-tooltip {
      display: none;
      justify-content: center;
      left: 50%;
      top: -$stepper-tooltip-tip-bottom-height;
      transform: translate(-50%, -100%);
      &.e-show-tooltip {
        display: inline-flex;
      }
      .e-tip-content {
        width: max-content;
      }
      .e-arrow-tip.e-tip-bottom {
        left: 50%;
        top: 100%;
        transform: translate(-50%, 0);
      }
      .e-arrow-tip-inner.e-tip-bottom {
        top: -6px;
      }
    }
    .e-step-item.e-step-label .e-tooltip-wrap.e-stepper-tooltip {
      left: unset;
      top: 0;
      transform: translate(0%, -135%);
    }
    &.e-step-type-indicator .e-tooltip-wrap.e-stepper-tooltip {
      transform: translate(-50%, -115%);
    }
    .e-stepper-steps {
      display: flex;
      padding: $step-padding-none;
      margin: $step-margin-none;
      justify-content: space-between;
      position: relative;
      align-items: flex-start;
      .e-step-container,
      .e-step,
      .e-step-valid.e-step-text.e-step-text-only .e-step-text-container,
      .e-step-error.e-step-text.e-step-text-only .e-step-text-container,
      .e-step-label-container {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .e-step-container {
      max-width: var(--max-width);
      list-style-type: none;
      cursor: pointer;
      text-align: center;
      .e-step-label-container,
      .e-step-text-container {
        max-width: clamp(100%, 10em, 100%);
        white-space: nowrap;
        font-size: $stepper-text-size;
      }
      .e-step-label-optional {
        font-size: $stepper-optional-size;
        flex-basis: 100%;
      }
      .e-step-optional-container {
        display: flex;
        flex-direction: column;
      }
      .e-step-content {
        font-size: $stepper-icon-size;
        line-height: $stepper-content-line-height;
      }
      .e-indicator {
        font-size: $stepper-icon-size;
      }
      &:not(.e-step-text-only) > .e-step-text-container {
        padding: $stepper-icon-text-padding;
      }
      &.e-step-text-only .e-step-text-container,
      &.e-step-label-only .e-step-label-container {
        padding: $stepper-text-padding;
        padding-block: $step-container-padding-block;
      }
      &.e-step-text-only.e-step-error .e-step-text-container,
      &.e-step-text-only.e-step-valid .e-step-text-container,
      &.e-step-label-only.e-step-error .e-step-label-container,
      &.e-step-label-only.e-step-valid .e-step-label-container {
        flex-direction: column;
        .e-step-validation-icon {
          position: relative;
          top: $stepper-validation-position;
        }
      }
      .e-step,
      .e-indicator {
        border-radius: $stepper-step-radius;
        min-width: $stepper-step-width;
        min-height: $stepper-step-width;
      }
    }
    .e-step-notstarted:not(.e-step-disabled) .e-step,
    .e-step-notstarted:not(.e-step-disabled) .e-indicator {
      border: $step-border;
    }
    &.e-horizontal {
      display: block;
      .e-stepper-steps {
        flex-direction: row;
      }
      &.e-label-before,
      &.e-label-after {
        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
          margin-left: var(--progress-left-position);
          top: $stepper-progress-top-position;
          width: var(--progress-bar-width);
        }
      }
      &.e-label-before.e-rtl,
      &.e-label-after.e-rtl {
        &:has(.e-step-item.e-step-label:not(.e-step-text)) .e-stepper-progressbar {
          margin-right: var(--progress-left-position);
          margin-left: $stepper-margin-unset;
        }
      }
      .e-step-item.e-step-label {
        gap: $stepper-horizontal-label-gap;
        flex-direction: column;
      }
      .e-step-item.e-step-label .e-step-label-container {
        position: relative;
        &.e-label-before {
          order: -1;
        }
      }
      &.e-label-start .e-step-text-container {
        order: $stepper-label-order;
      }
      .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
        position: absolute;
        top: 2.5em;
        margin-left: $stepper-horizontal-label-optional-margin;
      }
      &.e-label-start .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional,
      &.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
        margin-right: $stepper-horizontal-label-optional-margin;
        margin-left: $stepper-margin-unset;
      }
      &.e-label-start.e-rtl .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
        margin-right: $stepper-margin-unset;
        margin-left: $stepper-horizontal-label-optional-margin;
      }
      &.e-label-before .e-stepper-steps {
        &:has(.e-step-label-optional) {
          align-items: flex-end;
        }
        .e-step-label-container.e-label-before:has(.e-step-label-optional) {
          flex-direction: column;
          gap: $stepper-label-before-optional-gap;
        }
      }
      .e-text,
      .e-label,
      .e-step-label-optional {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .e-step-text.e-step-text-only:has(.e-step-label-optional),
      .e-step-label.e-step-label-only:has(.e-step-label-optional),
      .e-step-item:not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
      .e-step-container:not(.e-step-item):not(.e-step-text):not(.e-step-label):has(.e-step-label-optional),
      .e-step-label-container.e-label-after:has(.e-step-label-optional),
      &.e-step-type-indicator .e-step-container {
        flex-wrap: wrap;
      }
      .e-step-item:not(.e-step-label):not(.e-step-text) .e-step-label-optional {
        margin-top: $stepper-horizontal-optional-margin-top;
      }
      &.e-label-after .e-step-item.e-step-label:not(.e-step-text) .e-step-label-optional {
        margin-top: $stepper-horizontal-label-after-optional-margin-top;
      }
    }
    &.e-vertical {
      min-height: inherit;
      height: $stepper-inherit-height;
      display: inline-block;
      .e-step-label.e-step-label-only,
      .e-step-template {
        position: relative;
      }
      &:not(.e-label-top):not(.e-label-bottom) .e-step-label-optional {
        position: absolute;
      }
      &:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
        margin-top: $stepper-label-optional;
        margin-left: $stepper-vertical-optional-margin-right;
      }
      &.e-rtl:not(.e-label-bottom):not(.e-label-top) .e-step-item.e-step-text:not(.e-step-label) .e-step-label-optional {
        margin-left: $stepper-margin-unset;
        margin-right: $stepper-vertical-optional-margin-right;
      }
      .e-stepper-steps {
        flex-direction: column;
        min-height: inherit;
        height: $stepper-inherit-height;
        float: left;
        align-items: start;
        margin: $stepper-ol-padding;
        justify-content: space-between;
      }
      &.e-rtl .e-stepper-steps {
        float: right;
      }
      .e-stepper-steps:has(.e-step-item:not(.e-step-text):not(.e-step-label)),
      .e-stepper-steps:has(.e-step-text.e-step-text-only),
      .e-stepper-steps:has(.e-step-label.e-step-label-only),
      &.e-label-after .e-stepper-steps:has(.e-step-label.e-step-text:not(.e-step-item)),
      &.e-step-type-indicator .e-stepper-steps {
        align-items: center;
      }
      .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
      .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
        margin-left: $stepper-text-postion;
      }
      &.e-rtl {
        .e-step-item.e-step-text:not(.e-step-label) .e-step-text-container,
        .e-step-item.e-step-label:not(.e-step-text) .e-step-label-container.e-label-after {
          margin-left: $stepper-margin-unset;
          margin-right: $stepper-text-postion;
        }
      }
      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
      &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional),
      .e-step-text-only.e-step-text:has(.e-step-label-optional),
      .e-step-label-only.e-step-label:has(.e-step-label-optional) {
        flex-direction: column;
        .e-step-label-optional {
          position: unset;
        }
      }
      .e-step-item:not(.e-step-label):not(.e-step-text):has(.e-step-label-optional),
      &.e-label-before .e-step-label-container.e-label-before:has(.e-step-label-optional) {
        gap: $stepper-label-before-optional-gap;
      }
      &.e-label-before .e-step-item.e-step-label,
      &.e-label-after .e-step-item.e-step-label {
        .e-step-label-container.e-label-after:has(.e-step-label-optional) {
          flex-direction: column;
          .e-label {
            line-height: $stepper-label-line-height;
          }
        }
        .e-step-label-optional {
          position: unset;
        }
      }
      .e-step-container {
        &.e-step-label.e-step-text:not(.e-step-item) .e-step-label-container.e-label-after {
          position: absolute;
          .e-step-label-optional {
            left: $stepper-ol-padding;
          }
        }
        .e-step-label-container.e-label-after .e-step-label-optional {
          font-size: $stepper-optional-size;
        }
        .e-step-label-container.e-label-before .e-label {
          width: var(--label-width);
        }
        &:not(.e-step-text-only) .e-step-text-container {
          border: $stepper-text-container-border-none;
          border-radius: $stepper-text-container-border-radius;
          padding: $stepper-text-vert-padding;
        }
        &.e-step-text-only .e-step-text-container,
        &.e-step-label-only .e-step-label-container {
          position: unset;
        }
      }
      &.e-label-top .e-step-label-optional {
        padding-bottom: $step-label-optional-padding;
      }
    }
    &.e-vertical.e-label-top,
    &.e-vertical.e-label-bottom {
      .e-stepper-steps {
        align-items: center;
        .e-step-container {
          flex-direction: column;
          .e-step-text-container {
            margin-left: $stepper-ol-padding;
          }
        }
      }
    }
    &.e-vertical.e-label-top .e-step-container {
      .e-step-label-optional,
      .e-step-text-container {
        order: $stepper-label-order;
      }
    }
    .e-stepper-progressbar {
      height: $stepper-progress-bar-height;
      position: absolute;
      top: $stepper-progress-top-position;
      width: $stepper-progress-value-width;
      >.e-progressbar-value {
        height: $stepper-progress-value-height;
        width: var(--progress-value);
        transition-property: width;
        transition-duration: var(--duration);
        transition-delay: var(--delay);
      }
    }
    &.e-vertical .e-stepper-progressbar {
      min-height: inherit;
      width: $stepper-progress-bar-width;
      top: $stepper-ol-padding;
      left: $stepper-vertical-progress-position;
      >.e-progressbar-value {
        width: $stepper-progress-value-width;
        height: var(--progress-value);
        transition-property: height;
      }
    }
    &.e-vertical.e-rtl .e-stepper-progressbar {
      right: $stepper-vertical-progress-position;
      left: unset;
    }
    &:not(.e-steps-focus):not(.e-step-type-label):not(.e-step-type-indicator) .e-step-container .e-indicator,
    .e-step-focus .e-indicator {
      z-index: 0;
    }
    .e-step-template.e-step-focus {
      outline: $stepper-temp-outline-width;
    }
  }
  .e-tooltip-wrap.e-stepper-tooltip.e-step-inprogress-tip {
    .e-arrow-tip.e-tip-bottom {
      top: 90% !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  .e-small.e-stepper,
  .e-small .e-stepper {
    @include stepper-styles($stepper-small-step-font-size, $stepper-small-step-height, $stepper-small-step-width, $stepper-small-icon-size, $stepper-small-text-size, $stepper-small-optional-size);
  }
}

@mixin stepper-text-label-colors($step-label-text-color) {
  .e-text,
  .e-label {
    color: $step-label-text-color;
  }
}
@include export-module('stepper-theme') {
  .e-stepper {
    .e-step-notstarted:not(.e-step-disabled) .e-step,
    .e-step-notstarted:not(.e-step-disabled) .e-indicator,
    .e-step-notstarted .e-icons.e-step-indicator {
      border-color: $step-border-color;
    }
    .e-step-label-optional {
      color: $step-optional-color;
    }
    .e-step,
    .e-indicator {
      color: $step-color;
      background: $step-bg-color;
    }
    .e-step-indicator {
      color: transparent;
    }
    .e-step-completed .e-step,
    .e-step-inprogress .e-step,
    .e-step-completed .e-indicator,
    .e-step-inprogress .e-indicator,
    .e-step-completed .e-step-indicator,
    .e-step-inprogress .e-step-indicator {
      background: $step-completed-bg-color;
      color: $step-completed-color;
    }
    .e-step-selected .e-indicator {
      background: $step-completed-bg-color;
    }
    .e-step-valid .e-indicator {
      background: $step-valid-completed-bg-color;
      color: $step-valid-completed-color;
    }
    .e-step-error {
      .e-indicator {
        background: $step-error-completed-bg-color;
        color: $step-error-icon-color;
      }
      @include stepper-text-label-colors($step-error-completed-color);
    }
    .e-step-valid:not(.e-step-notstarted) .e-indicator:hover,
    .e-step-error .e-indicator:hover {
      color: $step-color;
    }
    .e-step-valid.e-step-text-only,
    .e-step-valid.e-step-label-only {
      .e-step-validation-icon {
        color: $step-valid-icon-only-color;
      }
    }
    .e-step-error.e-step-text-only,
    .e-step-error.e-step-label-only {
      .e-step-validation-icon {
        color: $step-error-icon-only-color;
      }
    }
    @include stepper-text-label-colors($stepper-text-color);
    .e-step-selected:not(.e-step-error),
    .e-step-completed:not(.e-step-error) {
      @include stepper-text-label-colors($step-completed-bg-color);
    }
    .e-step-label:not(.e-step-item) .e-step-label-container {
      background-color: $stepper-outline-color;
    }
    .e-step-text-container {
      background-color: $stepper-outline-color;
      border-color: transparent;
    }
    .e-step-disabled .e-indicator,
    .e-step-disabled .e-step {
      background: $step-disabled-bg-color;
      color: $step-disabled-color;
    }
    .e-step-disabled .e-text,
    .e-step-disabled .e-label,
    .e-step-disabled .e-step-validation-icon {
      color: $step-disabled-font-color;
    }
    &.e-vertical .e-step-text-only.e-step-text .e-step-label-optional,
    &.e-vertical .e-step-label-only.e-step-label .e-step-label-optional,
    &.e-vertical .e-step-item:not(.e-step-text):not(.e-step-label) .e-step-label-optional,
    &.e-vertical.e-label-top .e-step-label-optional,
    &.e-vertical.e-label-bottom .e-step-label-optional {
      background-color: $stepper-outline-color;
    }
    .e-stepper-progressbar {
      background-color: $step-progress-bg-color;
      >.e-progressbar-value {
        background-color: $step-progress-value-bg-color;
      }
    }
    &:not(.e-steps-focus) .e-step-selected .e-step {
      box-shadow: $step-selected-li-shadow;
    }
    .e-step-focus .e-step,
    .e-step-label-only.e-step-focus .e-label,
    .e-step-text-only.e-step-focus .e-text,
    .e-step-template.e-step-focus,
    &:not(.e-steps-focus) :focus-visible .e-step,
    &:not(.e-steps-focus) .e-step-text-only:focus-visible .e-text,
    &:not(.e-steps-focus) .e-step-label-only:focus-visible .e-label {
      box-shadow: $step-keyboard-selected-li-shadow;
    }
    &:not(.e-steps-focus) .e-step-valid.e-step-selected .e-step,
    .e-step-valid.e-step-focus .e-step,
    .e-step-valid.e-step-label-only.e-step-focus .e-label,
    .e-step-valid.e-step-text-only.e-step-focus .e-text,
    .e-step-valid.e-step-template.e-step-focus {
      box-shadow: $step-valid-li-shadow;
    }
    &:not(.e-steps-focus) .e-step-error.e-step-selected .e-step,
    .e-step-error.e-step-focus .e-step,
    .e-step-error.e-step-label-only.e-step-focus .e-label,
    .e-step-error.e-step-text-only.e-step-focus .e-text,
    .e-step-error.e-step-template.e-step-focus {
      box-shadow: $step-error-li-shadow;
    }
    .e-step-container:not(.e-step-focus).e-step-notstarted .e-step,
    .e-step-container:not(.e-step-focus).e-step-completed .e-step,
    &.e-steps-focus .e-step-container:not(.e-step-focus).e-step-selected .e-step {
      box-shadow: $step-li-shadow;
    }
    .e-step-notstarted:not(.e-step-disabled) .e-step:hover,
    .e-step-notstarted:not(.e-step-disabled) .e-indicator:hover {
      border-color: $step-hover-border-color;
    }
    .e-step-notstarted:not(.e-step-disabled) .e-step:active,
    .e-step-notstarted:not(.e-step-disabled) .e-indicator:active {
      border-color: $step-active-border-color;
    }
    &:not(.e-step-type-label) {
      .e-indicator:hover,
      .e-step:hover {
        color: $step-hover-text-color;
        background: $step-selected-hover-color;
      }
    }
    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
      color: $step-hover-not-text-color;
    }
    &:not(.e-step-type-label) {
      .e-step-selected .e-indicator:active,
      .e-step-selected .e-step:active {
        background: $step-selected-active-color;
      }
      .e-step-valid.e-step-selected .e-indicator:active,
      .e-step-valid.e-step-selected .e-step:active {
        background: $step-valid-completed-bg-color;
      }
      .e-step-error.e-step-selected .e-indicator:active,
      .e-step-error.e-step-selected .e-step:active {
        background: $step-error-completed-bg-color;
      }
    }
    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
    &:not(.e-step-type-label) .e-step-notstarted .e-step:hover {
      background: $step-hover-color;
    }
    &:not(.e-step-type-label) .e-step-notstarted .e-indicator:active,
    &:not(.e-step-type-label) .e-step-notstarted .e-step:active {
      background: $step-active-color;
    }
    &:not(.e-step-type-label) {
      .e-step-valid .e-indicator:hover,
      .e-step-valid .e-step:hover {
        color: $step-hover-text-color;
        background: $step-valid-completed-bg-color;
      }
      .e-step-error .e-indicator:hover,
      .e-step-error .e-step:hover {
        color: $step-hover-text-color;
        background: $step-error-completed-bg-color;
      }
    }
  }
}

@include export-module('stepper-bootstrap-icons') {
  .e-step-indicator::before {
    content: '\e110';
  }
}
@mixin stepper-styles($step-font-size, $step-height, $step-width, $icon-size, $text-size, $optional-size) {
  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
    .e-icons.e-step-indicator {
      font-size: $step-font-size;
    }
    &.e-step-notstarted .e-icons.e-step-indicator {
      width: $step-width;
      height: $step-height;
    }
  }

  .e-step-container {
    .e-step,
    .e-indicator {
      min-width: $step-width;
      min-height: $step-width;
    }

    .e-indicator {
      font-size: $icon-size;
    }

    .e-step-text-container,
    .e-step-label-container {
      font-size: $text-size;
    }

    .e-step-content {
      font-size: $icon-size;
    }

    .e-step-label-optional {
      font-size: $optional-size;
    }
  }
  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
    font-size: $optional-size;
  }
}

@include export-module('stepper-bigger') {
  .e-bigger.e-stepper,
  .e-bigger .e-stepper {
    @include stepper-styles($stepper-bigger-step-font-size, $stepper-bigger-step-height, $stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
  }

  .e-bigger.e-small.e-stepper,
  .e-bigger.e-small .e-stepper,
  .e-bigger .e-small.e-stepper,
  .e-small .e-bigger.e-stepper {
    @include stepper-styles($stepper-bigger-small-step-font-size, $stepper-bigger-small-step-height, $stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
  }
}

//layout variables
$diagram-border-stroke-width: 2;
$diagram-lane-border-stroke-width: 2;
$diagram-highlighter-border-stroke-width: 2;
$diagram-symbolpalette-shape-radius: 4px;
$diagram-ruler-font-size: 10px;
$diagram-tooltip: none;

//normal
$diagram-resize-handle-disable-color: $grey-cc;
$diagram-border-stroke-disabled: $grey-cc;
$diagram-resize-handle-disable-stroke: $brand-primary-font;
$diagram-rotate-handle-color: $brand-primary;
$diagram-bezier-handle-color: $brand-primary-font;

$diagram-symbolpalette-hover: $grey-cc;
$diagram-symbolpalette-selected: $grey-dd;

$diagram-ruler-color: $grey-cc;
$diagram-ruler-marker-stroke: $brand-primary;
$diagram-ruler-marker-background-color: $grey-44;
$diagram-ruler-label-fill: $grey-cc;
$diagram-ruler-tick-stroke: $grey-cc;
$diagram-overview-resizer-color:$brand-primary;

//end normal

//primary
$diagram-endpoint-handle-color: $brand-primary-font;
$diagram-endpoint-handle-connected-border: $brand-primary-font;
$diagram-endpoint-handle-connected-color: $brand-primary;

$diagram-resize-handle-color: $brand-primary;
$diagram-resize-handle-stroke: $brand-primary;
$diagram-border-stroke: $brand-primary-darken-10;

$diagram-bezier-line-color: $brand-primary;

$palette-background-color: #e0e0e0;
$diagram-background-color: $grey-light-font;
$diagram-highlighter-stroke: $brand-primary;
$diagram-selected-region-stroke: $brand-primary;
$diagram-pivot-line-stroke: $brand-primary;

$diagram-helper-stroke: $brand-primary;

$diagram-text-edit-selection-color: $brand-primary-font;
$diagram-text-edit-selection-background: $brand-primary;

$diagram-editbox-background: $brand-primary-font;
$diagram-editbox-fontcolor: $base-font;

$diagram-border-strokes: $brand-primary-darken-10;
$diagram-lane-border-strokes: $brand-primary;

$diagram-multiselect-stroke: $diagram-resize-handle-stroke;

//end primary

.e-icons {
  font-family: 'e-icons';
  font-style: normal;
  font-variant: normal;
  //font-weight: $font-weight;
  line-height: 1;
  text-transform: none;
}

@include export-module('diagram-bootstrap-icons') {

  .e-symbolpalette {
    .e-clear-searchtext::before{ content: '\e7a7'; }
  }
}

@include export-module('diagram-theme') {

  .e-diagram {
    display: block;
    background-color: $diagram-background-color;
  }

  .e-symbolpalette {
    display: block;
  }

  .e-overview {
    display: block;
  }
  .overview-resizer{
    fill: $diagram-overview-resizer-color;
  }

  .e-content-placeholder.e-diagram.e-placeholder-diagram {
    background-size: 100% 100%;
    max-height: 500px;
    max-width: 500px;
  }

  .e-content-placeholder.e-symbolpalette.e-placeholder-symbolpalette {
    background-size: 100% 100%;
    max-height: 200px;
    max-width: 200px;
  }

  .e-diagram-endpoint-handle {
    fill: $diagram-endpoint-handle-color;
    stroke: $diagram-resize-handle-stroke;
  }

  .e-diagram-endpoint-handle.e-connected {
    fill: $diagram-endpoint-handle-connected-color;
    stroke: $diagram-endpoint-handle-connected-border;
  }

  .e-diagram-endpoint-handle.e-disabled,
  .e-diagram-bezier-control-handle.e-disabled,
  .e-diagram-resize-handle.e-disabled {
    fill: $diagram-resize-handle-disable-color;
    opacity: 1;
    stroke: $diagram-resize-handle-disable-stroke;
  }

  /* stylelint-disable */
  .e-diagram-bezier-handle.e-source.e-disabled {
    opacity: 1 !important;
  }

  .e-diagram-bezier-handle.e-target.e-disabled {
    opacity: 1 !important;
  }
  .e-diagram-bezier-control-handle{
    fill: $diagram-bezier-handle-color;
    stroke: $diagram-resize-handle-stroke;
    rx: 0px;
    ry: 0px;
  }
  .e-diagram-ortho-segment-handle,
  .e-diagram-straight-segment-handle,
  .e-diagram-bezier-segment-handle {
    fill: $diagram-bezier-handle-color;
    stroke: $diagram-resize-handle-stroke;
  }

  .e-symbolpalette .e-acrdn-content {
    background-color: $palette-background-color !important;
  }

  /* stylelint-enable */

  .e-diagram-bezier-control-line {
    stroke: $diagram-bezier-line-color;
  }

  .e-diagram-resize-handle {
    fill: $diagram-resize-handle-color;
    stroke: $diagram-endpoint-handle-color;
    rx: 0;
    ry: 0;
  }

  .e-diagram-helper {
    stroke: $diagram-helper-stroke;
  }

  .e-diagram-rotate-handle {
    fill: $diagram-rotate-handle-color;
    stroke: $diagram-resize-handle-stroke;
  }

  .e-diagram-selector {
    stroke: $diagram-border-stroke;
  }

  .e-diagram-selector.e-disabled {
    opacity: 1;
    stroke: $diagram-border-stroke-disabled;
  }

  .e-diagram-selector.e-thick-border {
    stroke: $diagram-border-strokes;
    stroke-width: $diagram-border-stroke-width;
  }

  .e-diagram-selector.e-thick-border.e-diagram-lane {
    stroke: $diagram-lane-border-strokes;
    stroke-width: $diagram-lane-border-stroke-width;
  }

  .e-diagram-highlighter {
    stroke: $diagram-highlighter-stroke;
    stroke-width: $diagram-highlighter-border-stroke-width;
  }

  .e-diagram-selected-region {
    stroke: $diagram-selected-region-stroke;
  }

  .e-diagram-pivot-line {
    stroke: $diagram-pivot-line-stroke;
  }

  .e-symbolpalette .e-symbol-hover:hover {
    background: $diagram-symbolpalette-hover;
    border-radius: $diagram-symbolpalette-shape-radius;
  }

  .e-symbolpalette .e-symbol-selected {
    background: $diagram-symbolpalette-selected;
    border-radius: $diagram-symbolpalette-shape-radius;
  }

  .e-diagram-tooltip {
    pointer-events: $diagram-tooltip;
  }

  .e-diagram .e-ruler {
    background: $diagram-ruler-marker-background-color;
    color: $diagram-ruler-color;
    font-size: $diagram-ruler-font-size;
  }

  .e-diagram .e-ruler-overlap {
    background: $diagram-ruler-marker-background-color;
  }

  .e-diagram .e-d-ruler-marker {
    stroke: $diagram-ruler-marker-stroke;
  }

  .e-diagram .e-diagram-text-edit {
    background: $diagram-editbox-background;
    border-color: $diagram-bezier-line-color;
    border-style: dashed;
    border-width: 1px;
    box-sizing: content-box;
    color: $diagram-editbox-fontcolor;
    min-width: 50px;
  }

  .e-diagram-text-edit::selection {
    background: $diagram-text-edit-selection-background;
    color: $diagram-text-edit-selection-color;
  }

  .e-ruler-tick-label {
    fill: $diagram-ruler-label-fill;
  }

  .e-ruler-tick {
    stroke: $diagram-ruler-tick-stroke;
  }

  .e-menu-item e-blankicon {
    padding-left: 28px;
  }

  .e-diagram-selection-indicator {
    stroke: $diagram-multiselect-stroke;
  }

  .e-diagram-selection-line {
    stroke: $diagram-multiselect-stroke;
  }

  /* stylelint-disable */
  .e-diagram-rotate {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAA60lEQVQ4jZ1SwQ2DMBAzlfLJI2KEjJAVukG7ARsxQkfoKHQDugHdgOoqh14oCaGWIpSTudzZRg2MdYOxrq0il2Csm411o7Eu5GinTN0D6AGMAGZVux9p1LGBrHIF0LD+4l3ql70thDABSFZYaeTJ6UqNWhL3ELhyyhUR98TcwI06Lk1aNonO1NocqGWy/6zOcGCq6OjiSCw22/wUfEzL8ND2P9duFXBmHMDvWVN7CliFkkGe69VM5RmVLDqG7ZMPOroWP5BTle5WjR6dkQayutyLqU6gsiU/ypHMiI41yf+CE01qov+R0egXAN5x6jng51I3yAAAAABJRU5ErkJggg==), auto !important;
  }

  .e-symbolpalette-hidden {
    display: none !important;
  }

  .e-symbolpalette-search-hidden {
    display: none !important;
  }

  .e-diagramTooltip-content {
    width: auto !important;
    height: auto !important;
  }
  .e-diagram-blazor{
    position: relative; 
    overflow: hidden; 
    fill: transparent;
  }
  .e-diagram-blazor-vertical-linemarker{
    overflow:hidden; 
    position: absolute;
  }
  .e-diagram-blazor-vertical-rulerlinesvg{
    position:inherit;
  }
  .e-diagram-blazor-horiontal-linemarker{
    overflow:hidden; 
    position: absolute;
  }
  .e-diagram-blazor-horizontal-rulerlinesvg{
    position:inherit;
  }
  .e-diagram-blazor-diagramcontent{
    position: absolute;
    overflow: auto; 
    background: transparent;
  }
  .e-diagram-blazor-diagram-adornerlayer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-userhandle-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-symbolpalette-blazor{
    overflow: auto;
  }
  .e-symbolpalette-blazor-draggable{
    visibility:hidden;
    display:none
  }
  .e-symbolpalette-blazor-preview{
    visibility:hidden;
    display:none
  }
  .e-symbolpalette-blazor-preview-div{
    overflow: hidden;
    float: left
  }
  .e-symbolpalette-blazor-preview-content{
    position: absolute;
  }
  .e-symbolpalette-blazor-input{
    width: 100%;
  }
  .e-diagram-blazor-searchbox-icon{
    margin-top:10px;
    margin-right:7px
  }
  .e-symbolpalette-blazor-remove-palette{
    overflow: auto;
  }
  .e-symbolpalette-blazor-symbol-draggable{
    overflow: hidden;
    float: left
  }
  .e-symbolpalette-blazor-symbol-draggable-svg{
    margin-left: 10px; 
    margin-top: 10px
  }
  .e-symbolpalette-blazor-symbol-draggable-content{
    position: absolute;
  }
  .e-diagram-blazor-tspan{
    user-select: none;
  }
  .e-diagram-blazor-ruler{
    overflow:hidden; 
    position: absolute;
    font-size: 11px;
  }
  .e-diagram-blazor-ruler-space{
    float: left;
  }
  .e-diagram-blazor-ruler-svg{
    position:inherit;
  }
  .e-diagram-blazor-background{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-grid-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-diagram-layer{
    position: absolute; 
    top: 0px;
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-svg-layer{
    pointer-events: all;
  }
  .e-diagram-blazor-html-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-html-layer-div{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    pointer-events: all;
  }
  .e-diagram-blazor-ports-expand-layer{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    pointer-events: none;
  }
  .e-diagram-blazor-ports-gparent{
    pointer-events: all;
  }
  .e-diagram-blazor-expander{
    pointer-events: all;
  }
  .e-diagram-blazor-foreign-object{
    user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none;
  }
  .e-diagram-blazor-html-template{
    position: absolute;
  }
  .e-diagram-blazor-expand-collapse-template{
    position: absolute;
    opacity: 1;
  }
  .e-diagram-blazor-annotation-template{
    position: absolute;
  }
  .e-diagram-blazor-userhandle-div{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    pointer-events: all; 
    transform: translate(0px, 0px) scale(1);
  }
  .e-diagram-blazor-userhandle-template{
    position: absolute; 
    transform: rotate(0deg); 
    visibility: visible; 
    opacity: 1;
  }
  .e-diagram-blazor-fixed-userhandle-template{
    position: absolute; 
    transform: rotate(0deg);
    opacity:1;
  }
  .e-diagram-blazor-fixed-userhandle{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    pointer-events: all; 
    transform: translate(0px, 0px) scale(1);
  }
  .e-diagram-blazor-ruler-overlap{
    position: absolute; 
    left: 0; 
    top: 0;
  }
  .e-blazordiagram-tooltip {
    pointer-events: none;
  }
  .e-blazordiagram-tooltip .e-tooltip-close{
    pointer-events: auto;
  }
  .e-diagram-blazor-template-div{
    height: 100%; 
    width: 100%;
  }
  .e-diagram-blazor-overview{
    background: transparent; 
    user-select: none; 
    overflow: hidden; 
    height: 100%; 
    width: 100%;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
  }
  .e-diagram-blazor-drawing{
    position: relative;
    touch-action: none;
  }
  .e-diagram-blazor-overview-diagramlayer{
    position: absolute; 
    left: 0px; 
    top: 0px;
  }
  .e-diagram-blazor-overview-diagramlayer-canvas{
    position: absolute; 
    left: 0px; 
    top: 0px;
  }
  .e-diagram-blazor-overview-html-layer{
    pointer-events: none; 
    position: absolute; 
    top: 0px; 
    left: 0px;
  }
  .e-diagram-blazor-overview-html-layer-div{
    position: absolute; 
    top: 0px; 
    left: 0px;
  }
  .e-diagram-blazor-overviewsvg{
    position: absolute; 
    left: 0px; 
    top: 0px;
  }
  .e-diagram-blazor-goverviewlayer{
    pointer-events: none;
  }
  .e-diagram-blazor-overviewbackrect{
    pointer-events: none;
  }
  .e-diagram-blazor-overviewrect{
    cursor: all-scroll;
  }
  .e-diagram-blazor-all{
    pointer-events: all;
  }
  .e-diagram-blazor-none{
    pointer-events: none;
  }
}
 /* stylelint-enable */

/* stylelint-disable */
$ddt-skin-name: 'bootstrap-dark' !default;
$ddt-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 0px rgba(0, 0, 0, 0.14), 0 3px 14px 0px rgba(0, 0, 0, 0.12) !default;
$ddt-label-top: 16px !default;
$ddt-close-icon-min-height: 32px !default;
$ddt-close-icon-bigger-min-height: 38px !default;
$ddt-close-icon-width: 32px !default;
$ddt-close-icon-bigger-width: 38px !default;
$ddt-close-icon-bottom: 0 !default;
$ddt-spin-icon-margin: inherit !default;
$ddt-dd-icon-bottom: 0 !default;
$ddt-dd-icon-bigger-bottom: 0 !default;
$ddt-dd-icon-width: 32px !default;
$ddt-nrml-show-dd-icon-margin-left: 32px !default;
$ddt-dd-icon-margin-right: 32px !default;
$ddt-dd-icon-bigger-width: 38px !default;
$ddt-dd-icon-bigger-margin-right: 38px !default;
$ddt-rtl-close-left: -7px !default;
$ddt-list-filter-text-indent: 0 12px !default;
$ddt-filter-border: $grey-44 !default;
$ddt-filter-top-border: 0 !default;
$ddt-filter-padding: 5px 8px !default;
$ddt-filter-box-shadow: none !default;
$ddt-filter-background-color: $grey-white !default;
$ddt-filter-border-bottom-color: 1px solid $grey-88;
$ddt-chip-margin: 2px 1px !default;
$ddt-chip-padding: 0 !default;
$ddt-chip-radius: 4px !default;
$ddt-chip-height: 28px !default;
$ddt-chip-bigger-height: 34px !default;
$ddt-chip-bg-color:  $grey-44 !default;
$ddt-chip-content-padding: 0 10px 0 10px !default;
$ddt-chip-close-font: 10px !default;
$ddt-chip-close-height: 30px !default;
$ddt-chip-close-width: 30px !default;
$ddt-chip-icon-line-height: 30px !default;
$ddt-last-chip-right-margin: 64px !default;
$ddt-last-chip-bigger-right-margin: 76px !default;
$ddt-select-all-height: 36px !default;
$ddt-select-all-checkbox-margin: 10px !default;
$ddt-rtl-select-all-checkbox-margin: 0 10px !default;
$ddt-select-all-text-indent: 38px !default;
$ddt-rtl-select-all-text-indent: 38px !default;
$ddt-select-all-bigger-text-indent: 43px !default;
$ddt-rtl-select-all-bigger-text-indent: 43px !default;
$ddt-select-all-text-font-size: 14px !default;
$ddt-popup-reorder-border: $grey-88 !default;
$ddt-treeview-padding: 0 8px !default;
$ddt-treeview-fullrow-height: 36px !default;
$ddt-treeview-fullrow-bigger-height: 44px !default;
$ddt-treeview-content-padding-top: 2px !default;
$ddt-treeview-content-padding-bottom: 2px !default;
$ddt-popup-background-color: $grey !default;
$ddt-popup-border-color: $grey-44 !default;
$ddt-chip-close:  $grey-dark-font !default;
$ddt-chip-font-color:  $grey-dark-font !default;
$ddt-chip-hover-bg-color: $grey-88 !default;
$ddt-chip-hover-font-color: $grey-dark-font !default;
$ddt-nodata-font-color: $grey-d4 !default;
$ddt-select-all-font-color: $grey-dark-font !default;
$ddt-icon-bg-color: $grey-base !default;
$ddt-chip-width: calc(100% - 2px) !default;
$ddt-chip-ddi-width: calc(100% - 33px) !default;
$ddt-chip-ci-width: calc(100% - 33px) !default;
$ddt-chip-ddi-ci-width: calc(100% - 65px) !default;
$ddt-big-chip-ddi-width: calc(100% - 39px) !default;
$ddt-big-chip-ci-width: calc(100% - 39px) !default;
$ddt-big-chip-ddi-ci-width: calc(100% - 77px) !default;
$ddt-select-all-font-size: 14px !default;
$ddt-big-select-all-font-size: 16px !default;
$ddt-big-select-all-padding: 0 !default;
$ddt-big-select-all-text-margin: 0 10px !default;
$ddt-rtl-big-select-all-text-margin: 0 10px !default;
$ddt-select-all-checkbox-bottom: 2px !default;
$ddt-popup-text-line-height: 24px !default;
$ddt-show-dd-icon-margin-right: 1px !default;
$ddt-nrml-border-none: 0 !default;
$ddt-nrml-padding-none: 0 !default;
$ddt-nrml-margin-none: 0 !default;
$ddt-nrml-popup-selectall-border-bottom: 1px !default;
$ddt-nrml-nodata-font-size: 14px !default;
$ddt-nrml-nodata-padding: 14px 16px !default;
$ddt-nrml-show-dd-icon-margin: 1px !default;
$ddt-nrml-popup-ul-padding: 0 14px 0 0 !default;
$ddt-show-dd-icon-margin-left: 1px !default;
$ddt-popup-border: 1px !default;

$ddt-icon-bg-color: $grey-base !default;
$ddt-remains-font-color: $grey-f5 !default;
$ddt-remains-padding: 0 0 0 10px !default;
$ddt-rtl-remains-padding: 0 10px 0 0 !default;
$ddt-chip-font-size: 15px !default;
$ddt-overflow-count-padding-top: 6px !default;
$ddt-delim-padding: 6px 12px 0 12px !default;
$ddt-delim-bigger-padding: 7.5px 14px 0 14px !default;
$ddt-remains-count-padding-top: 5.5px !default;
$ddt-item-hover-bg: $grey-44 !default;
$ddt-height-none: 0 !default;
$ddt-popup-border: 1px !default;
$ddt-list-item-ul-padding: 0 0 0 14px !default;

@mixin ddt-rotate($position) {
  transform: rotate($position);
  transition: transform 300ms ease;
}

@mixin position($position, $right){
  position: $position;
  right: $right;
}

@mixin close-style($font-size, $height, $width) {
  font-size: $font-size;
  height: $height;
  width: $width;
}

@mixin min-style($min-height, $min-width, $font-size, $line-height) {
  min-height: $min-height;
  min-width: $min-width;
  line-height: $line-height;
  &::before {
    font-size: $font-size;
    @if ($ddt-skin-name == 'fluent2') {
      padding: $ddt-chip-close-before-padding;
    }
  }
}

@mixin icon-style($bottom, $right) {
  bottom: $bottom;
  right: $right;
}

@mixin chip-last($margin-right, $max-width) {
  .e-chips-wrapper .e-chips:last-child {
    margin-right: $margin-right;
    max-width: $max-width;
  }
}

@mixin chip-last-margin($margin-right, $margin-left) {
  .e-chips-wrapper .e-chips:last-child {
    margin-right: $margin-right;
    margin-left: $margin-left;
  }
}

@include export-module('dropdowntree-layout') {

  .e-ddt {
    cursor: pointer;
    outline: none;

    .e-ddt-icon::before {
      @include ddt-rotate(0deg);
    }

    &.e-icon-anim {
      @if $ddt-skin-name == 'Material3' {
        .e-ddt-icon {
          background: $ddt-dd-icon-bg;
          border-radius: $ddt-dd-icon-radius;
        }
      }

      .e-ddt-icon::before {
        @include ddt-rotate(180deg);
      }
    }

    .e-ddt-hidden {
      border: $ddt-nrml-border-none;
      height: $ddt-height-none;
      visibility: hidden;
      width: 0;
    }

    &.e-input-group.e-control-wrapper,
    &.e-float-input.e-control-wrapper {
      .e-clear-icon {
        box-sizing: content-box;
        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'tailwind3' {
          min-height: $ddt-close-icon-min-height;
        }
        @if $ddt-skin-name == 'Material3' {
          margin: $ddt-dd-icon-margin;
        }
        @if $ddt-skin-name == 'FluentUI' {
          min-height: $ddt-dd-icon-width;
        }
        @if $ddt-skin-name == 'fluent2' {
          min-width: $ddt-close-icon-min-height;
          margin: $ddt-close-icon-margin;
          align-items: center;
          &::before {
            font-size: $ddt-nrml-close-icon-font-size;
            padding: $ddt-nrml-close-icon-padding;
          }
        }
      }

      .e-input-group-icon.e-ddt-icon {
        border: $ddt-nrml-border-none;

        @if $ddt-skin-name == 'bootstrap4' {
          font-size: 8px;
        }
        @else if $ddt-skin-name == 'bootstrap5' {
          font-size: 20px;
        }
        @else if $ddt-skin-name == 'fluent2' {
          font-size: $ddt-nrml-icon-font-size;
          margin: $ddt-nrml-icon-margin;
          padding: $ddt-nrml-padding-none;
          min-height: 20px;
          min-width: 20px;
        }

        @if $ddt-skin-name == 'Material3' {
          font-size: $ddt-chip-icon-font-size;
          margin: $ddt-dd-icon-margin;
          line-height: $ddt-chip-icon-line-height;
        }
      }

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

      &.e-show-chip,
      &.e-show-text  {
        .e-clear-icon {
          @if $ddt-skin-name == 'tailwind3' {
            bottom: 0;
          }
          @else {
            bottom: $ddt-close-icon-bottom;
          }
          @include position(absolute, 0);
          @if $ddt-skin-name == 'Material3' {
            margin: $ddt-nrml-margin-none;
          }
        }

        &.e-show-dd-icon .e-clear-icon {
          @if $ddt-skin-name == 'tailwind' {
            right: 28px;
          }
          @else {
            right: $ddt-dd-icon-width;
          }
          @if $ddt-skin-name == 'FluentUI' or $ddt-skin-name == 'fluent2' {
            bottom: 0;
          }
        }

        .e-ddt-icon {
          @if $ddt-skin-name != 'FluentUI' {
            bottom: $ddt-dd-icon-bottom;
          }
          @include position(absolute, 0);
        }

        &.e-input-focus input.e-dropdowntree.e-chip-input,
        input.e-dropdowntree.e-chip-input {
          padding-left: $ddt-nrml-padding-none;
          padding-right: $ddt-nrml-padding-none;
        }
      }

      &.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
        display: flex;
      }
    }

    .e-chips-wrapper {
      width: 100%;
      @if ($ddt-skin-name =='tailwind3') {
        margin: $ddt-chips-wrapper-margin;
      }
    }

    &.e-show-chip {

      .e-chips-close {
        @if $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'bootstrap5.3' {
          @include min-style($ddt-chip-close-height, $ddt-chip-close-width, $ddt-chip-close-font, $ddt-chip-icon-line-height);
        }
        @else {
          @include min-style($ddt-chip-close-height, $ddt-chip-close-width, $ddt-chip-close-font, null);
        }
        text-align: center;

        &::before {
          @if $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'material' and $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'bootstrap5.3-dark' {
            vertical-align: middle;
          }
        }
      }

      .e-chips {
        align-items: center;
        @if $theme-name =='fluent2-highcontrast' {
          border-radius: $ddt-show-chip-border-radius;
        }
        @else {
          border-radius: $ddt-chip-radius;
        }
        box-sizing: border-box;
        display: inline-flex;
        float: left;
        height: $ddt-chip-height;
        margin: $ddt-chip-margin;
        max-width: $ddt-chip-width;
        overflow: hidden;
        padding: $ddt-chip-padding;
        text-overflow: ellipsis;
        white-space: nowrap;

        @if ($ddt-skin-name == 'tailwind3') {
          border: $ddt-nrml-chip-border solid $border-light;
        }

        & > .e-chipcontent {
          max-width: 100%;
          overflow: hidden;
          padding: $ddt-chip-content-padding;
          text-indent: 0;
          text-overflow: ellipsis;
          white-space: nowrap;

          @if $ddt-skin-name == 'fabric' or $ddt-skin-name == 'fabric-dark' or $ddt-skin-name == 'highcontrast' or $ddt-skin-name == 'highcontrast-light' {
            line-height: $ddt-chip-text-line-height;
          }
          @if ($ddt-skin-name == 'tailwind3') {
            font-size: $ddt-nrml-chipcontent-font-size;
            line-height: $ddt-nrml-chipcontent-line-height;
            font-weight: $ddt-nrml-chipcontent-font-weight;
          }
        }
      }

      .e-ddt-icon {
        @if $ddt-skin-name == 'FluentUI' {
          bottom: 0;
        }
      }
    }

    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
      &.e-outline {
        .e-overflow {
          &.e-show-text {
            padding: 10px 12px 9px;
          }

          &.e-total-count {
            padding: $ddt-outline-padding;
          }
        }

        &.e-input-group.e-control-wrapper,
        &.e-float-input.e-control-wrapper {
          &.e-show-dd-icon .e-clear-icon {
            right: 30px;
          }

          &:not(.e-show-chip) {
            &.e-show-dd-icon.e-input-focus .e-clear-icon  {
              min-height: 20px;
            }
          }
        }

        &.e-show-chip {
          .e-overflow,
          .e-chips-wrapper {
            padding: $ddt-outline-chip-padding;
          }
        }
      }

      &.e-filled {
        &.e-float-input.e-control-wrapper {
          .e-overflow {
            &.e-show-text {
              line-height: 21px;
              padding: 14px 2px 5px 0;
            }

            .e-remain {
              &.e-wrap-count {
                padding-top: 10px;
              }
            }
          }

          &:not(.e-show-chip) {
            .e-ddt-icon,
            &.e-show-dd-icon .e-clear-icon {
              padding-top: 8px;
            }
          }

          &.e-show-chip,
          &.e-show-text {
            .e-ddt-icon {
              @include icon-style(6px, 10px);
            }

            .e-clear-icon {
              @include icon-style(5px, 38px);
            }

            &:not(.e-show-dd-icon) .e-clear-icon {
              @include icon-style(9px, 10px);
            }
          }

          &.e-show-chip {
            .e-chips-wrapper,
            .e-overflow {
              padding-top: 8px;

              .e-chips {
                height: 18px;

                > .e-chipcontent {
                  font-size: 12px;
                  padding: 0 4px 0 0;
                }
              }

              .e-chips-close::before  {
                @include close-style(12px, 12px, 12px);
              }
            }
          }
        }

        .e-chips-wrapper,
        .e-overflow {
          .e-chips {
            margin-top: 8px;
            padding: 0 8px;
          }
        }

        &.e-input-group.e-control-wrapper:not(.e-float-input) {
          .e-overflow {
            &.e-show-text {
              line-height: 39px;
              padding: 0;
            }

            .e-remain {
              &.e-wrap-count {
                line-height: 39px;
                padding-top: 0;
              }
            }
          }

          &.e-show-chip {
            .e-chips-wrapper,
            .e-overflow {
              .e-chips {
                height: 28px;
                margin-top: 8px;
                padding: 0 8px;

                > .e-chipcontent {
                  font-size: 13px;
                  padding: 0 8px 0 0;
                }
              }

              .e-chips-close::before  {
                @include close-style(14px, 12px, 12px);
              }
            }
          }

          &.e-show-dd-icon.e-show-text,
          &.e-show-dd-icon.e-show-chip {
            .e-ddt-icon {
              @include icon-style(10px, 10px);
            }
          }

          .e-clear-icon {
            @include icon-style(9px, 38px);
          }

          &:not(.e-show-dd-icon) .e-clear-icon {
            @include icon-style(9px, 10px);
          }
        }
      }
    }

    .e-overflow {
      white-space: nowrap;

      &.e-show-text {
        padding: $ddt-delim-padding;
        @if $ddt-skin-name == 'tailwind' {
          line-height: 22px;

          .e-remain {
            padding-left: 8px;
          }
        }
        @if $ddt-skin-name == 'bootstrap5' or  $ddt-skin-name == 'FluentUI' {
          line-height: 30px;
        }

        &.e-input-value:not(.e-icon-hide) {
          display: inline-grid;
        }
      }

      &.e-total-count {
        box-sizing: border-box;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;

        .e-remain {
          @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
            line-height: 30px;
          }
          @else {
            padding: $ddt-rtl-remains-padding;
          }
        }
      }

      &.e-wrap-count {
        @if $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'bootstrap5.3-dark' and $ddt-skin-name != 'tailwind3' {
          padding-top: $ddt-remains-count-padding-top;
        }
      }

      .e-remain {
        cursor: pointer;
        display: inline-block;
        font-size: $ddt-chip-font-size;
        padding: $ddt-remains-padding;
        @if $ddt-skin-name == 'fluent2' {
          line-height: $ddt-remains-line-height;
        }

        &.e-wrap-count {
          @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' or $ddt-skin-name == 'tailwind3' {
            padding: $ddt-overflow-count-padding;
          }
          @else if $ddt-skin-name == 'FluentUI' {
            line-height: 30px;
          }
          @else {
            padding-top: $ddt-overflow-count-padding-top;
          }
        }
      }
    }

    &.e-show-chip {
      .e-overflow {
        &.e-total-count {
          .e-remain {
            padding: $ddt-delim-padding;
          }
        }
        @if $ddt-skin-name == 'FluentUI' {
          .e-remain.e-wrap-count {
            padding-left: 4px;
          }
        }
      }
    }

    &.e-show-dd-icon {
      @include chip-last($ddt-dd-icon-margin-right, $ddt-chip-ddi-width);
    }

    &.e-show-clear {
      @include chip-last($ddt-close-icon-width, $ddt-chip-ci-width);
    }

    &.e-show-clear.e-show-dd-icon {
      @include chip-last($ddt-last-chip-right-margin, $ddt-chip-ddi-ci-width);
    }

    input[readonly],
    .e-dropdowntree,
    input[readonly].e-input {
      pointer-events: none;

      &.e-chip-input {
        width: 0;
        visibility: hidden;
      }
    }

    &.e-popup {
      @if $skin-name != 'material' and $skin-name != 'FluentUI' and $skin-name != 'Material3' {
        border: $ddt-popup-border solid $ddt-popup-border-color;
      }
      @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'tailwind3' {
        margin-top: $ddt-nrml-popup-margin-top;
      }
      @else if $skin-name == 'Material3' {
        margin-top: $ddt-nrml-popup-margin-top;
      }
      @else if $skin-name == 'fluent2' {
        margin-top: $ddt-nrml-popup-margin-top;
      }
      @if $skin-name == 'bootstrap4' or $skin-name == 'Material3' or $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $ddt-skin-name == 'tailwind3' {
        border-radius: $ddt-popup-radius;
      }
      box-shadow: $ddt-box-shadow;
      position: absolute;

      .e-active .e-checkbox-wrapper {
        .e-frame:not(.e-check):not(.e-stop) {
          @if $ddt-skin-name == 'bootstrap5' {
            background-color: $ddt-readonly-input-bg-color;
          }
        }
      }

      .e-checkbox-wrapper {
        .e-frame:not(.e-check):not(.e-stop) {
          @if $ddt-skin-name == 'bootstrap5' {
            background-color: transparent;
          }
        }
      }

      .e-selectall-parent {
        border-bottom: $ddt-nrml-popup-selectall-border-bottom solid;
        cursor: pointer;
        display: block;
        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'FluentUI' {
          line-height: $ddt-select-all-height;
        }
        overflow: hidden;
        position: relative;
        text-indent: $ddt-select-all-text-indent;
        white-space: nowrap;
        width: 100%;
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' or $ddt-skin-name == 'fluent2' or $ddt-skin-name == 'Material3' {
          padding: $ddt-select-all-padding;
        }

        &.e-hide-selectall {
          display: none;
        }

        .e-checkbox-wrapper {
          position: relative;
          text-indent: 0;
          bottom: $ddt-select-all-checkbox-bottom;

          .e-frame {
            @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
              margin-top: -3px;
            }
          }
        }

        .e-all-text {
          font-family: inherit;
          font-size: $ddt-select-all-font-size;
          margin: $ddt-select-all-checkbox-margin;
          @if $ddt-skin-name == 'tailwind' {
            line-height: $ddt-select-all-height;
          }
        }
      }

      .e-filter-wrap {
        border-top-width: $ddt-filter-top-border;
        display: block;
        padding: $ddt-filter-padding;
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'FluentUI' {
          border-bottom: $ddt-filter-border;
        }
        @else {
          border: $ddt-filter-border;
        }

        @if $ddt-skin-name == 'fabric' or $ddt-skin-name == 'fabric-dark' or $ddt-skin-name == 'highcontrast' or $ddt-skin-name == 'highcontrast-light' {
          border-left-width: 0;
          border-right-width: 0;
        }
        @if $ddt-skin-name == 'bootstrap-dark' or $ddt-skin-name == 'bootstrap' {
          border-bottom: $ddt-filter-border-bottom-color;
        }
        @if $ddt-skin-name == 'bootstrap4' {
          background: $ddt-filter-bg;
        }

        .e-input,
        .e-input:focus {
          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'tailwind3' {
            padding: $ddt-list-filter-text-indent;
          }
        }

        .e-input-group {
          margin-bottom: $ddt-nrml-margin-none;

          @if $ddt-skin-name == 'tailwind' {
            border: 1px solid $border;
            border-radius: 4px;
          }

          @if $ddt-skin-name == 'bootstrap4' {
            background: $ddt-filter-bg;
          }

          .e-clear-icon {
            @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
              margin: 6px 6px 5px;
              min-height: 12px;
              min-width: 12px;
              padding: 6px;
            }
          }

          &:not(.e-disabled):not(.e-float-icon-left)::before,
          &:not(.e-disabled):not(.e-float-icon-left)::after,
          &.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::before,
          &.e-control-wrapper:not(.e-disabled):not(.e-float-icon-left)::after {
            @if $ddt-skin-name == 'material' {
              bottom: -1px;
              height: 1px;
            }
          }
        }
      }

      .e-popup-content {
        overflow: auto;
        position: relative;

        .e-ddt-nodata {
          display: none;
        }

        &.e-no-data {
          cursor: default;
          font-family: inherit;
          font-size: $ddt-nrml-nodata-font-size;
          text-align: center;
          @if $ddt-skin-name == 'tailwind' {
            padding: $ddt-nrml-nodata-padding;
          }
          @else if $ddt-skin-name == 'bootstrap5' {
            padding: $ddt-nrml-nodata-padding;
          }
          @else {
            padding: $ddt-nrml-nodata-padding;
          }

          .e-treeview {
            display: none;
          }

          .e-ddt-nodata {
            display: block;
            @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5'or $ddt-skin-name == 'FluentUI'  {
              line-height: 22px;
            }
          }
        }
      }

      .e-treeview {
        display: inline-table;
        width: 100%;
        @if $ddt-skin-name == 'tailwind3' {
          border: $ddt-treeview-border-none;
        }

        .e-list-item {
          @if $ddt-skin-name != 'fluent2' {
            padding: $ddt-nrml-padding-none;

            .e-ul {
              margin: $ddt-nrml-margin-none;
              padding: $ddt-list-item-ul-padding;
            }
          }
        }

        .e-fullrow {
          @if $ddt-skin-name == 'highcontrast' or $ddt-skin-name == 'highcontrast-light' {
            border-width: 2px;
          }
          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'fluent2' and $ddt-skin-name != 'tailwind3' {
            height: $ddt-treeview-fullrow-height;
          }
        }

        & > .e-ul {
          overflow: hidden;
          @if $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'fluent2' {
            padding: $ddt-treeview-padding;
          }
        }

        &.e-fullrow-wrap .e-text-content {
          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'fluent2' and $ddt-skin-name != 'tailwind3' {
            padding-bottom: $ddt-treeview-content-padding-top;
            padding-top: $ddt-treeview-content-padding-bottom;
          }
        }
      }

      .e-ddt-footer,
      .e-ddt-header {
        cursor: default;
      }
    }

    &.e-rtl {
      &.e-show-chip {
        .e-chips {
          float: right;
          @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
            & > .e-chipcontent {
              padding: $ddt-rtl-chip-content-padding;
            }
          }
        }
      }

      &.e-show-chip,
      &.e-show-text {
        .e-overflow {
          .e-remain {
            padding: $ddt-rtl-remains-padding;

            &.e-wrap-count {
              @if $ddt-skin-name == 'bootstrap5' {
                padding-top: 5px;
              }
              @else {
                padding-top: $ddt-remains-count-padding-top;
              }
            }
          }

          &.e-wrap-count {
            @include position(absolute, auto);
          }
        }
      }

      &.e-show-text {
        .e-overflow {
          &.e-total-count {
            .e-remain {
              padding: $ddt-remains-padding;
            }
          }
        }
      }

      &.e-show-text {
        .e-overflow {
          &.e-wrap-count {
            .e-remain {
              @if $ddt-skin-name == 'tailwind' {
                padding-right: 8px;
              }
            }
          }
        }
      }

      &.e-show-chip {
        .e-overflow {
          &.e-total-count {
            .e-remain {
              padding: $ddt-delim-padding;
            }
          }
        }
      }

      @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
        &.e-outline {
          &.e-input-group.e-control-wrapper,
          &.e-float-input.e-control-wrapper {
            &.e-show-dd-icon .e-clear-icon,
            &.e-show-dd-icon.e-show-text .e-clear-icon,
            &.e-show-dd-icon.e-show-chip .e-clear-icon {
              left: 30px;
            }
          }
        }

        &.e-filled {
          &.e-float-input.e-control-wrapper {
            .e-overflow {
              &.e-show-text {
                padding: 14px 0 5px 2px;
              }
            }
          }

          &.e-float-input.e-control-wrapper.e-show-chip,
          &.e-float-input.e-control-wrapper.e-show-text {
            .e-ddt-icon {
              left: 10px;
              right: auto;
            }

            &.e-show-dd-icon .e-clear-icon {
              left: 38px;
              right: auto;
            }

            &:not(.e-show-dd-icon) .e-clear-icon {
              left: 10px;
              right: auto;
            }
          }

          &.e-float-input.e-control-wrapper.e-show-chip {
            .e-chips-wrapper,
            .e-overflow {
              .e-chips > .e-chipcontent {
                padding: 0 0 0 4px;
              }
            }
          }

          &.e-input-group.e-control-wrapper:not(.e-float-input) {
            &.e-show-chip {
              .e-chips-wrapper,
              .e-overflow {
                .e-chips > .e-chipcontent {
                  padding: 0 0 0 8px;
                }
              }
            }

            &.e-show-dd-icon.e-show-text,
            &.e-show-dd-icon.e-show-chip {
              .e-ddt-icon {
                left: 10px;
                right: auto;
              }
            }

            &.e-show-dd-icon .e-clear-icon {
              left: 38px;
              right: auto;
            }

            &:not(.e-show-dd-icon) .e-clear-icon {
              left: 10px;
              right: auto;
            }
          }
        }
      }

      &.e-show-dd-icon {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, 18px);
        }
        @else {
          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-nrml-show-dd-icon-margin-left);
        }
      }

      &.e-show-clear {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, 18px);
        }
        @else {
          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-close-icon-width);
        }
      }

      &.e-show-clear.e-show-dd-icon {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-last-chip-right-margin);
        }
        @else {
          @include chip-last-margin($ddt-nrml-show-dd-icon-margin, $ddt-last-chip-right-margin);
        }
      }

      &.e-input-group.e-control-wrapper,
      &.e-float-input.e-control-wrapper {

        &.e-show-chip,
        &.e-show-text  {

          .e-clear-icon,
          .e-ddt-icon {
            left: 0;
            right: auto;
          }

          &.e-show-dd-icon .e-clear-icon {
            @if $ddt-skin-name == 'tailwind' {
              left: 28px;
            }
            @else {
              left: $ddt-dd-icon-width;
            }
          }
        }
      }

      &.e-popup {
        .e-treeview .e-list-item .e-ul {
          padding: $ddt-nrml-popup-ul-padding;
        }

        .e-selectall-parent {
          text-indent: $ddt-rtl-select-all-text-indent;
          .e-all-text {
            margin: $ddt-rtl-select-all-checkbox-margin;
          }
        }
      }
    }

    &.e-float-input {
      @if $ddt-skin-name !='Material3' and $ddt-skin-name !='material' and $ddt-skin-name !='material-dark' and $ddt-skin-name !='fluent2' {
        &.e-control-wrapper.e-input-group {
          .e-float-text.e-label-top {
            top: 15px;
          }
        }
      }
    }

    &.e-popup {
      .e-treeview {
        .e-list-item {
          .e-ul {
            @if $ddt-skin-name == 'fluent2' {
              padding: $ddt-list-item-ul-padding;
            }
          }
        }
      }
    }
  }

  .e-ddt-icon-hide {
    display: none;
  }
}

@mixin chip-style($bg-color, $close-color, $font-color) {

  @if $ddt-skin-name == 'Material3' {
    background: $bg-color;
  }
  @else {
    background-color: $bg-color;
  }
  .e-chips-close::before {
    color: $close-color;
  }

  > .e-chipcontent {
    color: $font-color;
  }
}

@include export-module('dropdowntree-theme') {

  .e-ddt {

    .e-chips {
      @include chip-style($ddt-chip-bg-color, $ddt-chip-close, $ddt-chip-font-color);
      @if $ddt-skin-name == 'Material3' or $theme-name == 'fluent2-highcontrast' {
        border-color: $ddt-chip-border-color;
        border: $ddt-chip-border;
      }
      &:hover {
        @if $ddt-skin-name == 'highcontrast' {
          @include chip-style($ddt-chip-hover-bg-color, $ddt-chip-hover-font-color, $ddt-chip-hover-font-color);
        }
        @if $ddt-skin-name == 'tailwind' {
          @include chip-style($ddt-chip-hover-bg-color, $icon-color-hover, $ddt-chip-hover-font-color);
        }
      }
    }

    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
      &.e-filled {
        .e-chips {
          background-color: $ddt-filled-chip-bg-color;
        }
      }
    }

    @if $ddt-skin-name == 'tailwind' {
      &.e-disabled {
        @include chip-style($content-bg-color-alt3, $content-text-color-disabled, $content-text-color-disabled);
      }
    }

    .e-overflow {

      @if $skin-name == 'bootstrap4' {
        color: $ddt-remains-font-color;
      }

      .e-remain {
        color: $ddt-remains-font-color;
      }
    }

    &.e-input-group.e-control-wrapper,
    &.e-float-input.e-control-wrapper {
      .e-clear-icon {
        @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'material' and  $ddt-skin-name != 'material-dark' and $ddt-skin-name != 'FluentUI' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'fluent2' and $ddt-skin-name != 'tailwind3' {
          background-color: $ddt-icon-bg-color;
        }
      }
    }

    @if ($ddt-skin-name == 'fluent2') {
      &.e-input-group.e-control-wrapper:focus,
      &.e-float-input.e-control-wrapper:focus {
        border-color: $ddt-input-border-color;
      }

      &.e-input-group.e-control-wrapper:active,
      &.e-float-input.e-control-wrapper:active {
        border-color: $ddt-input-border-color;
      }
    }

    &.e-input-group.e-control-wrapper .e-input[readonly],
    &.e-float-input.e-control-wrapper input[readonly] {
      @if $ddt-skin-name == 'bootstrap4' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' or $ddt-skin-name == 'FluentUI' or $ddt-skin-name == 'tailwind3' {
        @if $ddt-skin-name == 'FluentUI' or $ddt-skin-name == 'tailwind3' {
          background: transparent;
        }
        @else {
          background: $ddt-readonly-input-bg-color;
        }

        @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' {
          ~ span.e-input-group-icon.e-ddt-icon {
            background: transparent;
            color: $icon-color;
          }
        }
        ~ span.e-clear-icon {
          @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' {
            background: transparent;
          }
        }
      }

      &.e-disabled {
        @if $ddt-skin-name == 'tailwind' {
          background-color: $content-bg-color-alt1;
          color: $content-text-color-disabled;
        }
      }
    }

    &.e-popup {
      background: $ddt-popup-background-color;
      border-color: $ddt-popup-border-color;

      .e-popup-content.e-no-data {
        color: $ddt-nodata-font-color;
      }

      .e-selectall-parent {
        border-bottom-color: $ddt-popup-reorder-border;

        &:focus {
          background: $ddt-item-hover-bg;
        }
        .e-all-text {
          color: $ddt-select-all-font-color;
        }
      }
    }
  }
}

@include export-module('dropdowntree-bootstrap-dark-icons') {
  .e-ddt {
    .e-ddt-icon::before {
      content: '\e969';
    }

    .e-chips-close::before {
      content: '\e842';
    }
  }
}

@mixin close-style($font-size, $height, $width) {
  font-size: $font-size;
  height: $height;
  width: $width;
}

@mixin min-style($min-height, $min-width, $font-size, $line-height) {
  min-height: $min-height;
  min-width: $min-width;
  line-height: $line-height;
  &::before {
    font-size: $font-size;
    @if ($ddt-skin-name == 'fluent2') {
      padding: $ddt-chip-close-before-padding;
    }
  }
}

@mixin icon-style($bottom, $right) {
  bottom: $bottom;
  right: $right;
}

@mixin chip-last($margin-right, $max-width) {
  .e-chips-wrapper .e-chips:last-child {
    margin-right: $margin-right;
    max-width: $max-width;
  }
}

@mixin chip-last-margin($margin-right, $margin-left) {
  .e-chips-wrapper .e-chips:last-child {
    margin-right: $margin-right;
    margin-left: $margin-left;
  }
}

@include export-module('dropdowntree-bigger') {
  .e-bigger .e-ddt,
  .e-ddt.e-bigger {

    .e-chips {
      height: $ddt-chip-bigger-height;

      @if $ddt-skin-name == 'tailwind' {
        padding: 3px 8px;

        & > .e-chipcontent {
          padding: $ddt-big-chip-content-padding;
        }
      }
      @if $ddt-skin-name == 'FluentUI' {
        font-size: $text-lg;
      }
    }

    &.e-input-group.e-control-wrapper,
    &.e-float-input.e-control-wrapper {

      &.e-show-chip,
      &.e-show-text  {
        &.e-show-dd-icon .e-clear-icon {
          @if $ddt-skin-name == 'tailwind' {
            @include icon-style(3px, 32px);
          }
          @else if $ddt-skin-name == 'bootstrap4' {
            right: 33px;
          }
          @else if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' or $ddt-skin-name == 'tailwind3' {
            @include icon-style(auto, 36px);
          }
          @else if $ddt-skin-name != 'Material3' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'fluent2' {
            right: $ddt-dd-icon-bigger-width;
          }
          @else if $ddt-skin-name == 'fluent2' {
            right: 30px;
          }
          @else if $ddt-skin-name == 'bootstrap5.3' {
            @include icon-style(auto, 30px);
          }
          @if ($ddt-skin-name =='tailwind3') {
            bottom: 0;
            right: 24px;
          }
        }

        @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          &.e-show-chip {
            &.e-show-dd-icon .e-clear-icon {
              bottom: 0;
            }
          }
        }

        .e-ddt-icon {
          bottom: $ddt-dd-icon-bigger-bottom;
        }

        @if ($ddt-skin-name =='tailwind3') {
          & .e-chips {
            & > .e-chipcontent {
              height: $ddt-chip-content-height;
              font-size: $ddt-big-chip-font-size;
              line-height: $ddt-big-chip-line-height;
              padding: $ddt-big-chipcontent-padding;
            }
          }
          & .e-chips-close {
            margin: $ddt-big-chip-close-margin;
          }
        }
      }

      .e-input-group-icon.e-ddt-icon {
        @if $ddt-skin-name == 'bootstrap4' {
          font-size: $ddt-bgr-icon-font-size;
        }
        @else if $ddt-skin-name == 'fluent2' {
          font-size: $ddt-bgr-icon-font-size;
        }
      }

      .e-clear-icon {
        @if $ddt-skin-name == 'tailwind' {
          min-width: 0;
          padding: 6px;
        }
        @else {
          min-height: $ddt-close-icon-bigger-min-height;
        }
        @if $ddt-skin-name == 'fluent2' {
          padding: $ddt-bgr-padding-none;
          &::before {
            font-size: $ddt-bgr-clear-icon-font-size;
          }
        }
      }
    }

    &.e-show-chip {
      .e-chips-close {
        @if $ddt-skin-name == 'bootstrap4' {
          @include min-style(30px, 30px, 10px, 27px);
        }
        @if $ddt-skin-name == 'tailwind' {
          @include min-style(24px, 24px, 20px, 18px);
        }
        @if $ddt-skin-name == 'bootstrap5' {
          @include min-style(24px, 24px, 12px, null);
          &::before {
            vertical-align: middle;
          }
        }
        @if $ddt-skin-name == 'FluentUI' {
          @include min-style(32px, 32px, 12px, 27px);
        }
        @if $ddt-skin-name == 'tailwind3' {
          height: $ddt-chips-close-height;
          width: 16px;
          &::before {
            font-size: $ddt-big-chip-close-font-size;
          }
        }
      }

      .e-overflow {
        .e-remain {
          &.e-wrap-count {
            @if $ddt-skin-name == 'tailwind' {
              line-height: 22px;
              padding-top: 7px;
            }
            @if $ddt-skin-name == 'FluentUI' {
              line-height: 38px;
              padding-top: 0;
            }
            @if ($ddt-skin-name == 'fluent2') {
              padding-top: $ddt-overflow-remain-wrap-padding;
              padding-bottom: $ddt-overflow-remain-wrap-padding;
            }
          }
        }

        &.e-total-count {
          .e-remain {
            @if $ddt-skin-name == 'bootstrap5' {
              line-height: 36px;
              padding: 0 12px;
            }
            @else if $ddt-skin-name == 'tailwind' {
              padding: 8px 12px;
            }
            @else if  $ddt-skin-name == 'FluentUI' {
              line-height: 38px;
              padding: 0 8px;
            }
          }
        }
      }
    }

    .e-overflow {

      &.e-show-text {
        padding: $ddt-delim-bigger-padding;
        @if $ddt-skin-name == 'bootstrap5' {
          line-height: 37px;
        }
        @if $ddt-skin-name == 'FluentUI' {
          line-height: 38px;
        }
      }

      .e-remain {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          font-size: $ddt-remains-font-size;
        }
      }
    }

    @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
      &.e-outline {
        .e-overflow {
          &.e-show-text,
          &.e-total-count {
            padding: $ddt-outline-bigger-padding;
          }
        }

        &.e-input-group.e-control-wrapper,
        &.e-float-input.e-control-wrapper {
          &.e-show-dd-icon .e-clear-icon {
            right: 36px;
          }
        }
      }

      &.e-outline.e-show-chip {
        .e-overflow {
          padding: $ddt-bigger-outline-chip-padding;

          &.e-total-count {
            .e-remain {
              padding-top: 10px;
            }
          }

          .e-remain {
            &.e-wrap-count {
              padding-top: 10px;
            }
          }
        }

        .e-chips-wrapper {
          padding: $ddt-bigger-outline-chip-padding;
        }
      }

      &.e-filled {
        &.e-float-input.e-control-wrapper {
          .e-overflow {
            &.e-show-text {
              line-height: 30px;
              padding: 19px 12px 0 0;
            }

            .e-remain {
              &.e-wrap-count {
                padding-top: 14px;
              }
            }
          }
        }

        &.e-float-input.e-control-wrapper:not(.e-show-chip) {
          .e-ddt-icon,
          &.e-show-dd-icon .e-clear-icon {
            padding-top: 8px;
          }
        }

        &.e-float-input.e-control-wrapper.e-show-chip,
        &.e-float-input.e-control-wrapper.e-show-text {
          .e-ddt-icon {
            @include icon-style(12px, 12px);
          }

          .e-clear-icon {
            @include icon-style(11px, 44px);
          }

          &:not(.e-show-dd-icon) .e-clear-icon {
            @include icon-style(14px, 12px);
          }
        }

        .e-chips-wrapper,
        .e-overflow {
          .e-chips {
            margin-top: 8px;
            padding: 0 8px;
          }
        }

        &.e-float-input.e-control-wrapper.e-show-chip {
          .e-chips-wrapper,
          .e-overflow {
            padding-top: 19px;

            .e-chips {
              height: 24px;
            }

            .e-chips > .e-chipcontent {
              font-size: 13px;
            }

            .e-chips-close::before  {
              @include close-style(14px, 14px, 14px);
            }
          }
        }

        &.e-input-group.e-control-wrapper:not(.e-float-input) {
          .e-overflow {
            &.e-show-text {
              line-height: 55px;
            }

            .e-remain {
              &.e-wrap-count {
                line-height: 55px;
                padding-top: 0;
              }
            }
          }

          &.e-show-chip {
            .e-chips-wrapper,
            .e-overflow {
              .e-chips {
                height: 32px;
                padding: 0 12px;

                > .e-chipcontent {
                  font-size: 14px;
                }
              }

              .e-chips-close::before  {
                @include close-style(16px, 16px, 16px);
              }
            }
          }

          &.e-show-dd-icon.e-show-text,
          &.e-show-dd-icon.e-show-chip {
            .e-ddt-icon,
            &:not(.e-show-dd-icon) .e-clear-icon {
              @include icon-style(16px, 12px);
            }
          }

          .e-clear-icon {
            @include icon-style(15px, 44px);
          }
        }
      }
    }

    &.e-show-dd-icon .e-chips-wrapper .e-chips:last-child {
      @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'tailwind3' {
        margin-right: $ddt-dd-icon-bigger-margin-right;
      }
      max-width: $ddt-big-chip-ddi-width;
    }

    &.e-show-clear .e-chips-wrapper .e-chips:last-child {
      @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'Material3' and $ddt-skin-name != 'tailwind3' {
        margin-right: $ddt-close-icon-bigger-width;
      }
      max-width: $ddt-big-chip-ci-width;
    }

    &.e-show-clear.e-show-dd-icon {
      @include chip-last($ddt-last-chip-bigger-right-margin, $ddt-big-chip-ddi-ci-width);
    }

    &.e-popup {
      @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' {
        margin-top: $ddt-popup-margin;
      }

      .e-selectall-parent {
        text-indent: $ddt-select-all-bigger-text-indent;
        padding: $ddt-big-select-all-padding;

        .e-all-text {
          font-size: $ddt-big-select-all-font-size;
          line-height: $ddt-popup-text-line-height;
          margin: $ddt-big-select-all-text-margin;
        }
      }

      @if ($ddt-skin-name == 'tailwind3') {
        border-radius: $ddt-popup-radius;
        margin-top: $ddt-popup-margin;

        .e-filter-wrap {
          padding: $ddt-popup-filter-wrap-padding;
        }
      }

      @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI'  {
        .e-popup-content {
          &.e-no-data {
            @if $ddt-skin-name == 'bootstrap5' {
              padding: 9px 16px;
            }
            @else {
              padding: 10px 16px;
            }

            .e-ddt-nodata {
              @if $ddt-skin-name == 'FluentUI' {
                font-size: $text-lg;
              }
              @else {
                font-size: $text-base;
              }
              line-height: 24px;
            }
          }
        }

        .e-filter-wrap {
          padding: 8px;
        }
      }

      .e-treeview {
        .e-fullrow {
          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'tailwind3' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'Material3' {
            height: $ddt-treeview-fullrow-bigger-height;
          }
        }

        > .e-ul {
          @if $ddt-skin-name == 'bootstrap5' {
            padding: 8px 16px;
          }
          @if $ddt-skin-name == 'tailwind' {
            padding: 8px 0 8px 16px;
          }
        }
      }
    }

    &.e-rtl {
      .e-chips {
        @if $ddt-skin-name == 'tailwind' {
          & > .e-chipcontent {
            padding: $ddt-rtl-big-chip-content-padding;
          }
        }
      }

      @if $ddt-skin-name == 'material' or $ddt-skin-name == 'material-dark' {
        &.e-outline {
          &.e-input-group.e-control-wrapper,
          &.e-float-input.e-control-wrapper {
            &.e-show-dd-icon .e-clear-icon,
            &.e-show-dd-icon.e-show-text .e-clear-icon,
            &.e-show-dd-icon.e-show-chip .e-clear-icon {
              left: 36px;
            }
          }
        }

        &.e-filled {
          &.e-float-input.e-control-wrapper {
            .e-overflow {
              &.e-show-text {
                padding: 19px 0 0 12px;
              }
            }

            &.e-show-chip,
            &.e-show-text {
              .e-ddt-icon,
              &:not(.e-show-dd-icon) .e-clear-icon {
                left: 12px;
                right: auto;
              }

              &.e-show-dd-icon .e-clear-icon {
                left: 44px;
                right: auto;
              }
            }
          }

          &.e-input-group.e-control-wrapper:not(.e-float-input) {
            &.e-show-dd-icon:not(.e-input-focus),
            &.e-show-dd-icon.e-show-chip {
              .e-ddt-icon,
              &:not(.e-show-dd-icon) .e-clear-icon {
                left: 12px;
                right: auto;
              }
            }

            .e-clear-icon {
              left: 44px;
              right: auto;
            }
          }
        }
      }

      &.e-show-dd-icon {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'tailwind3' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' or $ddt-skin-name == 'FluentUI' {
          @include chip-last-margin($ddt-show-dd-icon-margin-left, null);
        }
        @else if $ddt-skin-name != 'Material3' {
          @include chip-last-margin($ddt-show-dd-icon-margin-left, $ddt-dd-icon-bigger-margin-right);
        }
      }

      &.e-show-clear {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'tailwind3' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' or $ddt-skin-name == 'FluentUI' {
          @include chip-last-margin($ddt-show-dd-icon-margin-left, null);
        }
        @else if $ddt-skin-name != 'Material3' {
          @include chip-last-margin($ddt-show-dd-icon-margin-left, $ddt-close-icon-bigger-width);
        }
      }

      &.e-show-clear.e-show-dd-icon {
        @if $ddt-skin-name == 'tailwind' or $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' {
          @include chip-last-margin($ddt-last-chip-bigger-right-margin, $ddt-show-dd-icon-margin-right);
        }
        @else {
          @include chip-last-margin($ddt-last-chip-bigger-right-margin, $ddt-show-dd-icon-margin-right);
        }
      }

      &.e-show-chip,
      &.e-show-text  {
        &.e-input-group.e-show-dd-icon .e-clear-icon {
          @if $ddt-skin-name != 'tailwind' and $ddt-skin-name != 'tailwind3' and $ddt-skin-name != 'bootstrap5' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'Material3' {
            left: $ddt-dd-icon-bigger-width;
          }
          right: auto;
        }
      }

      .e-selectall-parent {
        text-indent: $ddt-rtl-select-all-bigger-text-indent;
        .e-all-text {
          margin: $ddt-rtl-big-select-all-text-margin;
        }
      }
    }
  }
}

//default
$ddl-chip-mobile-close-font: 16px !default;

$ddl-multiselect-skin-name: 'bootstrap' !default;
$ddl-delim-font-size: 14px !default;
$ddl-rtl-wrapper: 0 2px 0 32px !default;
$ddl-chip-mobile-bg: $brand-primary !default;
$ddl-chip-mobile-font: $brand-primary-font !default;
$ddl-chip-bg-color:  $grey-44 !default;
$ddl-chip-hover-bg-color: $grey-88 !default;
$ddl-chip-hover-font-color: $grey-dark-font !default;
$ddl-chip-font-color:  $grey-dark-font !default;
$ddl-chip-close:  $grey-dark-font !default;
$ddl-sel-chip-font-color: $grey-dark-font !default;
$ddl-sel-chip-close: $grey-dark-font !default;
$ddl-sel-chip-color: $grey-dark-font !default;
$ddl-sel-chip-bg-color: $grey-99 !default;
$ddl-chip-selected-shadow-value: 0 6px 12px rgba(0, 0, 0, .175) !default;
$ddl-popup-shadow-value: 0 6px 12px rgba(0, 0, 0, .175) !default;
$ddl-remains-font-color: $grey-f5 !default;
$ddl-remains-padding-left: 10px !default;
$ddl-chip-margin: 2px 4px 2px 0 !default;
$ddl-chip-margin-bigger: 3px 4px 2px 0 !default;
$ddl-chip-radius: 4px !default;
$ddl-search-wrapper-width: calc(100% - 43px) !default;
$ddl-bigger-search-wrapper-width: calc(100% - 49px) !default;
$ddl-bigger-small-search-wrapper-width: calc(100% - 45px) !default;
$ddl-small-search-wrapper-width: calc(100% - 37px) !default;
$ddl-chip-content-padding: 6px 10px 6px 10px !default;
$ddl-chip-mobile-content-padding: 7px 10px 7px 10px !default;
$ddl-rtl-chip-mobile-content-padding: $ddl-chip-mobile-content-padding !default;
$ddl-chip-padding: 0 !default;
$ddl-closer-margin-top: -4em !default;
$ddl-icon-margin-top: -2.65em !default;
$ddl-clear-margin-top: -3.2em !default;
$ddl-icon-margin-top-bigger: -2.7em !default;
$ddl-small-ddl-icon-top: -2.6em !default;
$ddl-bigger-small-ddl-icon-top: -2.85em !default;
$ddl-closer-margin-top-bigger: -4em !default;
$ddl-chip-close-top: 9px !default;
$ddl-chip-close-left: 10px !default;
$ddl-chip-close-margin: 0 0 0 !default;
$ddl-chip-close-rtl-margin: 0 0 0 !default;
$ddl-chip-close-square: 30px !default;
$ddl-chip-close-width: 30px !default;
$ddl-chip-close-font: 10px !default;
$ddl-chip-height: 28px !default;
$ddl-chip-mobile-height: 32px !default;
$ddl-chip-collection-top: 0 !default;
$ddl-input-height: 32px !default;
$ddl-input-bigger-height: 38px !default;
$ddl-delimviewheight-bigger: 36px !default;
$ddl-input-mob-height: 30px !default;
$ddl-control-height: 32px !default;
$ddl-control-bigger-height: 38px !default;
$ddl-delimviewheight: 32px !default;
$ddl-closer-hooker-font: 10px !default;
$ddl-closer-hooker-color: $grey-dark-font !default;
$ddl-chip-hooker-square: 40px !default;
$ddl-chip-hooker-width: 40px !default;
$ddl-sel-hover-chip-bg-color: $grey-99 !default;
$ddl-sel-chip-hover-font-color: $grey-dark-font !default;
$ddl-chip-hooker-right: 0 !default;
$ddl-chip-font-family: inherit !default;
$ddl-chip-mobile-radius: 4px !default;
$ddl-chip-sel-mobile-height: 46px !default;
$ddl-chip-selected-padding: 13px 0 13px 0 !default;
$ddl-chip-mobile-close-margin: 1px 0 0 !default;
$ddl-chip-close-mob-margin: 0 0 0 !default;
$ddl-closer-hooker-top: 100% !default;
$ddl-chip-mob-left: 0 !default;
$ddl-chip-mob-padding: 0 0 0 20px !default;
$ddl-chip-font-size: 15px !default;
$ddl-rtl-chip-close-left: -10px !default;
$ddl-rtl-chip-content-padding: 6px 10px 6px 10px !default;
$ddl-rtl-mob-chip-content-padding: 8px 4px !default;
$ddl-rtl-mob-chip-content-margin: 2px 0 2px 4px !default;
$ddl-rtl-mob-sel-chip-content-padding: 12px 4px !default;
$ddl-rtl-chip-padding: 0 8px 0 0 !default;
$ddl-rtl-mob-sel-chip-padding: 0 8px 0 4px !default;
$ddl-rtl-mob-chip-padding: 0 4px 0 8px !default;
$ddl-overall-close-left: 15px !default;
$ddl-overall-close-top: 17px !default;
$ddl-rtl-hooker-left: -15px !default;
$ddl-chip-close-mob-top: 0 !default;
$ddl-chip-close-mobile-top: 10px !default;
$ddl-control-placholder-padding: 0 32px 0 2px !default;
$ddl-sel-chip-close-mobile-top: 8px !default;
$ddl-sel-chip-close-mobile-left: 17px !default;
$ddl-chip-sel-mobile-close-height: 40px !default;
$ddl-chip-sel-mobile-close-margin: 0 0 0 0 !default;
$ddl-input-text-indent: 6px !default;
$ddl-input-placeholder-padding: 0 0 0 12px !default;
$ddl-rtl-chip-sel-close-left: -10px !default;
$ddl-popup-active-focus-bg-color: $brand-primary !default;
$ddl-popup-active-focus-font-color: $brand-primary-font !default;
$ddl-popup-active-focus-border-color: $input-border-focus !default;
$ddl-popup-active-focus-border-width: 1px !default;
$ddl-popup-active-focus-shadow-item: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) !default;
$ddl-input-placeholder: $grey-lighter !default;
$ddl-popup-active-border-color: $brand-primary-darken-35 !default;
$ddl-popup-active-border-width: 1px !default;
$ddl-delim-text-indent: 6px !default;
$ddl-delimview-bigger-padding-left: $ddl-delim-text-indent !default;
$ddl-popup-normal-border-width: 1px !default;
$ddl-check-right: 21px !default;
$ddl-check-left: 12px !default;
$ddl-bigger-select-all-height: 40px !default;
$ddl-select-all-height: 26px !default;
$ddl-back-icon-margin: -2px 10px 0 -54px !default;
$ddl-back-icon-padding: 0 !default;
$ddl-filterbar-padding: 8px !default;
$ddl-bigger-filterbar-padding: 4px 0 !default;
$ddl-delimviewheight-check-bigger: 36px !default;
$ddl-popup-reorder-border: $grey-88 !default;
$ddl-check-right-margin: 8px !default;
$ddl-bigger-check-right-margin: 10px !default;
$ddl-selectall-font-size: 14px !default;
$ddl-close-icon-left: 38px !default;
$ddl-check-icon-top: 0 !default;
$ddl-bigger-check-right: 25px !default;
$ddl-multi-list-default-font-color: $grey-dark-font !default;
$ddl-multi-list-hover-bg-color: $grey-44 !default;
$ddl-delim-text-padding-right: 6px !default;
$ddl-remains-font-color: $grey-dd !default;
$ddl-list-rtl-padding-right: 15px !default;
$ddl-close-rtl-icon-left: 38px !default;
$ddl-chip-close-rtl-left: -15px !default;
$ddl-delim-font-color: $grey-light-font !default;
$ddl-close-icon-color: $grey-light-font !default;
$ddl-multiselect-group-list-item-rtl-padding-right: 29px !default;
$ddl-bigger-multiselect-group-list-item-rtl-padding-right: 5px !default;
$ddl-multiselect-group-list-group-item-padding-left: 24px !default;
$ddl-multiselect-group-checkbox-wrapper-padding-left: 14px !default;
$ddl-bigger-multiselect-group-checkbox-wrapper-padding-left: 20px !default;
$ddl-multiselect-group-list-group-item-rtl-padding-right: 20px !default;
$ddl-multiselect-label-position: 17px !default;
$multiselect-disable-font-color: $grey-dd !default;

$ddl-bigger-filled-wrapper-chip-padding: 0 12px !default;
$ddl-rtl-bigger-small-wrapper-chips-padding: 0 0 0 4px !default;
$ddl-bigger-small-filled-float-wrapper-chip-padding: 0 4px 0 0 !default;
$ddl-bigger-filled-float-wrapper-chip-padding-right: 8px !default;
$ddl-bgr-filled-float-wrapper-chip-font-size: 13px !default;
$ddl-bigger-small-filled-float-wrapper-chip-font-size: 12px !default;
$ddl-bgr-small-filled-wrapper-chip-padding: 0 8px 0 0 !default;
$ddl-bgr-small-filled-wrapper-chip-font-size: 13px !default;
$ddl-small-bgr-filled-float-chip-padding-left: 8px !default;
$ddl-rtl-bgr-small-filled-chip-padding: 0 8px !default;
$ddl-rtl-bgr-small-filled-chip-margin: 8px 0 0 8px !default;
$ddl-bgr-small-filled-wrapper-chip-margin: 8px 8px 0 0 !default;
$ddl-bgr-small-filled-wrapper-chip-padding: 0 8px !default;
$ddl-bigger-filled-float-wrapper-delimiter-input-padding: 5px 0 !default;
$ddl-bigger-filled-wrapper-padding-top: 3px !default;
$ddl-bgr-filled-float-input-wrapper-padding: 19px 12px 0 16px !default;
$ddl-bgr-small-filled-float-wrapper-padding: 11px 12px 0 !default;
$ddl-multiselect-zero-padding-margin: 0 !default;
$ddl-small-float-input-wrapper: 3px 12px 0 4px !default;

$ddl-multi-wrapper-down-icon-padding: 0 48px 0 0 !default;
$ddl-wrapper-down-icon-padding: 0 0 0 48px !default;
$ddl-rtl-filled-wrapper-input: 5px !default;
$ddl-popup-multi-filter-padding-left: 8px !default;
$ddl-filled-wrapper-padding: 0 12px 0 8px !default;
$ddl-filled-float-wrapper-padding: 11px 12px 0 !default;
$ddl-small-filled-float-wrapper-padding: 12px 12px 0 8px !default;
$ddl-filled-float-wrapper-chip-margin: 8px 8px 0 0 !default;
$ddl-filled-float-wrapper-chip-padding: 0 8px !default;
$ddl-rtl-filled-float-wrapper-chip-margin: 8px 0 0 8px !default;
$ddl-small-filled-wrapper-chip-margin: 4px 4px 0 0 !default;
$ddl-small-filled-wrapper-chip-padding-right: 8px !default;
$ddl-rtl-small-filled-float-chip-margin: 4px 0 0 4px !default;
$ddl-filled-chipcontent-font-size: 13px !default;
$ddl-filled-chipcontent-padding: 0 8px 0 0 !default;
$ddl-small-filled-chipcontent-font-size: 12px !default;
$ddl-filled-float-chipcontent-font-size: 12px !default;
$ddl-filled-float-chipcontent-padding: 0 4px 0 0 !default;
$ddl-rtl-filled-chipcontent-padding: 0 0 0 4px !default;
$ddl-small-filled-float-chiupcontent-font-size: 10px !default;
$ddl-filled-float-mob-chipcontent-font-size: 13px !default;
$ddl-filled-float-mob-chipcontent-padding-right: 4px !default;
$ddl-filled-wrapper-chip-close-margin-top: -38px !default;

// Small size
$ddl-select-all-height-small: 22px !default;
$ddl-small-chip-height: 22px !default;
$ddl-chip-small-font-size: 13px !default;
$ddl-small-chip-close-square: 24px !default;
$ddl-small-chip-close-width: 24px !default;
$ddl-small-chip-close-font: 8px !default;
$ddl-control-small-height: 24px !default;
$ddl-small-input-height: 26px !default;
$ddl-delim-small-font-size: 13px !default;
$ddl-small-closer-margin-top: -3.5em !default;
$ddl-chip-close-hooker-small-left: 8px !default;
$ddl-chip-close-hooker-small-bigger-left: 8px !default;
$ddl-delimviewheight-small: 26px !default;

// Touch Small size
$ddl-select-all-height-bigger-small: 34px !default;
$ddl-bigger-small-chip-height: 28px !default;
$ddl-chip-bigger-small-font-size: 15px !default;
$ddl-bigger-small-chip-close-square: 30px !default;
$ddl-bigger-small-chip-close-width: 30px !default;
$ddl-bigger-small-chip-close-font: 10px !default;
$ddl-control-bigger-small-height: 30px !default;
$ddl-bigger-small-input-height: 34px !default;
$ddl-delim-bigger-small-font-size: 14px !default;
$ddl-delimviewheight-bigger-small: 34px !default;
$ddl-closer-margin-top-bigger-small: -4em !default;

$ddl-bigger-small-filled-chip-height: 28px !default;
$ddl-bigger-filled-chip-height: 24px !default;
$ddl-bigger-filled-not-chip-height: 32px !default;
$ddl-bigger-small-filled-input-chip-height: 18px !default;
$ddl-delimiter-height: 27px !default;
$ddl-full-height: 100% !default;
$ddl-zero-margin-padding: 0 !default;
$multi-input-down-icon-margin-right: 30px !default;
$multi-zero-height: 0 !default;
$popup-multi-rtl-margin-left: 12px !default;
$ddl-checkbox-delim-line-height: 20px !default;
$ddl-checkbox-delim-padding-left: 10px !default;
$multi-wrapper-chip-height: 28px !default;
$multi-small-chip-height: 24px !default;
$multi-filled-float-chip-height: 18px !default;
$multi-small-filled-chip-height: 16px !default;
$multi-filled-clear-icon-height: 38px !default;
$multi-filled-clear-icon-margin-top: -38px !default;
$popup-multi-resize-height: 15px !default;
$multi-zero-width: 0 !default;
$multi-auto-width: auto !default;
$multi-filled-clear-icon-width: 16px !default;
$popup-multi-resize-width: 15px !default;
$multi-bgr-list-wrapper-padding-left: 8px !default;
$multi-full-width: 100% !default;
$multi-searcher-height: 1px !default;
$multi-filled-close-right: 12px !default;
$multi-one-width: 1px !default;
$multi-select-wrapper-chip-width: 92%;

//enddefault

@include export-module('multiselect-bootstrap-dark') {
  .e-multi-select-wrapper .e-chips-collection .e-chips .e-chips-close.e-icon::before {
    line-height: 30px;
    top: 0;
  }

  .e-multiselect .e-input-group-icon.e-ddl-icon {
    border-radius: 0 4px 4px 0;
    border-right-width: 0;
    height: 32px;
    width: 36px;
  }

  .e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
    border-left-width: 0;
    border-radius: 4px 0 0 4px;
    border-right-width: 1px;
  }

  .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
    height: 32px;
    width: 32px;
  }

  .e-multi-select-wrapper .e-searcher input[type = 'text'],
  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
    color: $grey-light-font;
  }
}

.e-multi-select-wrapper {
  box-sizing: border-box;
  cursor: text;
  line-height: normal;
  min-height: $ddl-control-height;
  padding: $ddl-control-placholder-padding;
  position: relative;
  user-select: none;
  width: $multi-full-width;

  #{if(&, '&', '*')}.e-delimiter {
    #{if(&, '&', '*')} .e-searcher,
    #{if(&, '&', '*')} .e-multi-searcher {
      height: $ddl-delimiter-height;
      vertical-align: middle;
      #{if(&, '&', '*')} .e-dropdownbase {
        height: $ddl-full-height;
        min-height: $ddl-full-height;
      }
    }
  }

  .e-delim-view {
    white-space: nowrap;

    #{if(&, '&', '*')}.e-delim-values.e-delim-overflow,
    #{if(&, '&', '*')}.e-delim-values.e-delim-total {
      box-sizing: border-box;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      @if $ddl-multiselect-skin-name == 'tailwind' {
        padding: $ddl-multiselect-zero-padding-margin;
      }
    }
  }

  .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
    color: $ddl-chip-mobile-font;
    font-size: $ddl-chip-close-font;
    left: $ddl-sel-chip-close-mobile-left;
    top: $ddl-sel-chip-close-mobile-top;
  }

  .e-chips.e-mob-chip.e-chip-selected .e-chipcontent {
    @if $ddl-multiselect-skin-name == 'Material3' {
      background: $ddl-chip-mobile-bg;
    }
    @if $ddl-multiselect-skin-name != 'Material3' {
      background-color: $ddl-chip-mobile-bg;
    }
    color: $ddl-chip-mobile-font;
    padding: $ddl-chip-selected-padding;
  }

  .e-searcher.e-zero-size:not(.e-multiselect-box),
  .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
    width: $multi-zero-width;

    input[type = 'text'] {
      height: $multi-searcher-height;
      min-height: $multi-searcher-height;
    }
  }

  .e-chips.e-mob-chip > .e-chipcontent {
    max-width: $multi-full-width;
  }
}

.e-multiselect.e-control-container,
.e-multiselect.e-control-container.e-input-group {
  .e-multi-select-wrapper .e-multi-searcher {
    display: flex;
    float: left;
    width: $multi-auto-width;
  }

  .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
    display: inline-flex;
    float: none;
  }

  .e-multi-select-wrapper .e-multi-searcher.e-zero-size:not(.e-multiselect-box) {
    width: $multi-zero-width;
  }

  .e-multi-select-wrapper .e-delim-values.e-delim-hide,
  .e-multi-select-wrapper .e-delim-view.e-delim-values.e-delim-hide,
  .e-multi-select-wrapper .e-chips-collection.e-delim-hide {
    display: none;
  }

  .e-multi-select-wrapper.e-down-icon {
    @if $ddl-multiselect-skin-name != 'fluent2' {
      padding: $ddl-multi-wrapper-down-icon-padding;
    }
  }

  .e-multi-select-wrapper .e-delim-values {
    align-items: center;
    display: inline;
    max-width: $multi-full-width;
    word-break: break-word;
  }

  .e-multi-select-wrapper .e-clear-icon,
  .e-multi-select-wrapper .e-ddl-icon {
    align-items: center;
    cursor: pointer;
    display: none;
    flex-direction: row;
    margin-top: $ddl-clear-margin-top;
    @if $ddl-multiselect-skin-name == 'tailwind' {
      margin-top: -1.55em;
    }
    outline: 0;
    padding: $ddl-multiselect-zero-padding-margin;
    position: absolute;
    right: $ddl-chip-hooker-right;
    top: $ddl-closer-hooker-top;
    @if $ddl-multiselect-skin-name == 'FluentUI' {
      right: $ddl-clear-icon-right;
      top: $ddl-clear-icon-top;
    }
  }

  :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
  .e-multi-select-wrapper .e-ddl-icon {
    display: flex;
  }

  .e-multi-select-wrapper .e-ddl-icon {
    margin-right: $ddl-zero-margin-padding;
    margin-top: $ddl-icon-margin-top;
    right: $multi-zero-width;
    @if $ddl-multiselect-skin-name == 'fluent2' {
      padding: $multi-selecet-wrapper-icon-padding;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'tailwind-dark'{
      min-width: 30px;
    }
  }

  .e-multi-select-wrapper.e-delimiter {
    @if $ddl-multiselect-skin-name != 'FluentUI' {
      top: -1px;
    }
  }

  .e-multi-select-wrapper .e-clear-icon {
    font-size: $ddl-closer-hooker-font;
    @if $ddl-multiselect-skin-name != 'bootstrap' {
      height: $ddl-chip-hooker-square;
      width: $ddl-chip-hooker-square;
    }
  }
}

.e-multiselect.e-control-container.e-rtl,
.e-multiselect.e-control-container.e-input-group.e-rtl {
  .e-multi-select-wrapper .e-multi-searcher {
    float: right;
  }
  .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
    float: none;
  }

  .e-multi-select-wrapper .e-clear-icon,
  .e-multi-select-wrapper .e-ddl-icon {
    left: $multi-zero-width;
    right: $multi-auto-width;
  }

  .e-multi-select-wrapper.e-down-icon {
    padding: $ddl-wrapper-down-icon-padding;
  }
}

.e-popup.e-multi-select-list-wrapper .e-list-item.e-disabled,
.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-disabled {
  opacity: .7;
  pointer-events: none;
}

.e-multiselect.e-input-group,
.e-multiselect.e-float-input {
  word-wrap: initial;
}

.e-multiselect.e-input-group .e-searcher .e-label-top,
.e-multiselect.e-input-group .e-multi-searcher .e-label-top {
  top: $ddl-multiselect-label-position;
}

.e-multi-select-wrapper.e-close-icon-hide {
  padding-right: $ddl-zero-margin-padding;
}

.e-multi-select-wrapper .e-chips-collection {
  cursor: default;
  display: block;
}

.e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
  margin-right: $multi-input-down-icon-margin-right;
}

.e-multi-select-wrapper .e-multi-hidden {
  border: 0;
  height: $multi-zero-height;
  position: absolute;
  visibility: hidden;
  width: $multi-zero-width;
}

.e-multi-select-wrapper .e-chips {
  align-items: center;
  display: inline-flex;
  float: left;
  margin: $ddl-chip-margin;
  max-width: $multi-full-width;
  overflow: hidden;
  padding: $ddl-chip-padding;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e-multi-select-wrapper .e-chips > .e-chipcontent {
  max-width: $multi-full-width;
  overflow: hidden;
  padding: $ddl-chip-content-padding;
  text-indent: $multi-zero-width;
  text-overflow: ellipsis;
  white-space: nowrap;
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    line-height: $multi-select-chips-content-line-height;
  }
}

.e-small .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'highcontrast' {
    margin: $ddl-chip-small-margin;
    #{if(&, '&', '*')} > .e-chipcontent {
      padding: $ddl-chip-small-content-padding;
    }
  }
}

.e-multi-select-wrapper.e-delimiter {
  .e-searcher {
    display: inline-block;
    float: none;
  }
}

.e-multi-select-wrapper .e-mob-chip.e-chips > .e-chipcontent {
  padding: $ddl-chip-mobile-content-padding;
}

#{&}.e-multiselect.e-rtl .e-multi-select-wrapper .e-mob-chip.e-chips>.e-chipcontent {
  padding: $ddl-rtl-chip-mobile-content-padding;
}

.e-multi-select-wrapper .e-chips-close {
  align-self: center;
  display: flex;
  float: right;
  font-family: 'e-icons';
  height: $ddl-chip-close-square;
  margin: $ddl-chip-close-margin;
  width: $ddl-chip-close-width;
}

.e-rtl .e-multi-select-wrapper .e-chips-close {
  margin: $ddl-chip-close-rtl-margin;
}

.e-multi-select-wrapper .e-mob-chip.e-chips .e-chips-close {
  margin: $ddl-chip-mobile-close-margin;
}

.e-multi-select-wrapper .e-chips-close.e-close-hooker {
  cursor: default;
  font-size: $ddl-closer-hooker-font;
  height: $ddl-chip-hooker-square;
  margin-top: $ddl-closer-margin-top;
  position: absolute;
  right: $ddl-chip-hooker-right;
  width: $ddl-chip-hooker-width;
  @if $ddl-multiselect-skin-name != 'Material3' {
    top: $ddl-closer-hooker-top;
  }
  @else {
    top: $ddl-closer-hooker-top-margin;
    border-radius: $ddl-closer-hooker-font;
  }
}

.e-multiselect .e-chips-close.e-close-hooker:hover {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-bigger-closer-hooker-bg-color;
    border: 1px;
  }
}

.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
  right: $ddl-close-icon-left;
}

.e-small.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
.e-small.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    font-size: $ddl-closer-hooker-font-small;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    right: $multi-small-drow-down-icon-mat3-right;
  }
}

.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
.e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    font-size: $ddl-chip-close-font;
  }
}

.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
  left: $ddl-close-icon-left;
  right: $multi-auto-width;
}

.e-small .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
.e-small.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker {
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    left: $multi-bgr-small-chips-clear-icon-left;
    right: $multi-auto-width;
  }
}

.e-multi-select-wrapper input[type = 'text'] {
  background: none;
  border: 0;
  font-family: $ddl-chip-font-family;
  font-size: $ddl-chip-font-size;
  font-weight: normal;
  height: $ddl-input-height;
  min-height: $ddl-input-height;
  outline: none;
  @if $ddl-multiselect-skin-name == 'Material3' {
    padding: $ddl-multiselect-zero-padding-margin;
  }
  @else {
    padding: $ddl-input-placeholder-padding;
  }
  text-indent: 0;
}

.e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
  background: none;
  border: 0;
  color: inherit;
  font-family: $ddl-chip-font-family;
  font-size: $ddl-delim-font-size;
  font-weight: normal;
  height: $ddl-input-height;
  min-height: $ddl-input-height;
  outline: none;
  padding: $ddl-multiselect-zero-padding-margin;
  text-indent: $ddl-input-text-indent;
}

.e-rtl.e-multiselect.e-filled .e-multi-select-wrapper input[type = 'text'] {
  padding: $ddl-rtl-filled-wrapper-input;
}

/* stylelint-disable property-no-vendor-prefix */
.e-multi-select-wrapper input[type = 'text']::-ms-clear {
  display: none;
}

.e-multi-select-wrapper .e-searcher {
  display: block;
  float: left;
  width: $multi-auto-width;
}

.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
  width: $ddl-search-wrapper-width;
}

.e-small .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
.e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
  width: $ddl-small-search-wrapper-width;
}

.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    width: $ddl-search-wrapper-width;
  }
}

.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    width: $ddl-small-search-wrapper-width;
  }
}

.e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-family: $multi-select-delim-font-family;
  }
  @else {
    font-family: $ddl-chip-font-family;
  }
  font-size: $ddl-delim-font-size;
  line-height: $ddl-delimviewheight;
  max-width: $multi-full-width;
  padding-left: $ddl-delim-text-indent;
  padding-right: $ddl-delim-text-padding-right;
  vertical-align: middle;
}

.e-small .e-multi-select-wrapper .e-delim-values .e-remain {
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-size: $ddl-chip-small-font-size;
  }
}

.e-multi-select-list-wrapper .e-hide-listitem,
.e-multi-select-list-wrapper .e-hide-group-header {
  display: none;
}

.e-multi-select-wrapper .e-delim-values .e-remain {
  color: $ddl-remains-font-color;
  cursor: pointer;
  display: inline-block;
  font-size: $ddl-chip-font-size;
  padding-left: $ddl-remains-padding-left;
}

#{&}.e-multiselect.e-disabled .e-multi-select-wrapper,
#{&}.e-multiselect.e-disabled .e-multi-select-wrapper .e-chips .e-chips-close::before {
  cursor: not-allowed;
}

.e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
  height: $ddl-chip-sel-mobile-height;
  left: $ddl-chip-mob-left;
  margin: $ddl-chip-sel-mobile-close-margin;
  margin-left: auto;
  position: relative;
  top: $ddl-chip-close-mob-top;
  width: $ddl-chip-sel-mobile-height;
}

.e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
  align-self: center;
  box-shadow: $ddl-chip-selected-shadow-value;
  display: inline-flex;
  padding: $ddl-chip-mob-padding;
  width: $multi-select-wrapper-chip-width;
}

.e-multi-select-wrapper .e-ddl-disable-icon::before {
  content: '';
}

#{&}.e-multiselect.e-rtl .e-multi-select-wrapper.e-delimiter {
  .e-searcher {
    float: none;
  }
}

#{&}.e-multiselect.e-rtl {
  .e-multi-select-wrapper.e-close-icon-hide {
    padding-left: $ddl-zero-margin-padding;
  }

  .e-multi-select-wrapper {
    padding: $ddl-rtl-wrapper;

    .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
      left: $ddl-rtl-chip-sel-close-left;
    }

    .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
      margin: $ddl-multiselect-zero-padding-margin;
      margin-right: $multi-auto-width;
    }

    .e-searcher {
      float: right;
    }

    .e-chips {
      float: right;
      margin: $ddl-rtl-mob-chip-content-margin;
      padding: $ddl-rtl-chip-padding;

      .e-chipcontent {
        padding: $ddl-rtl-chip-content-padding;
      }

      .e-chips-close {
        float: left;
      }

      .e-chips-close::before {
        left: $ddl-rtl-chip-close-left;
      }
    }

    .e-chips.e-mob-chip {
      padding: $ddl-rtl-mob-chip-padding;

      .e-chipcontent {
        padding: $ddl-rtl-mob-chip-content-padding;
      }
    }

    .e-chips.e-mob-chip.e-chip-selected {
      padding: $ddl-rtl-mob-sel-chip-padding;

      .e-chipcontent {
        padding: $ddl-rtl-mob-sel-chip-content-padding;
      }
    }

    .e-chips-close.e-close-hooker {
      left: $ddl-close-icon-left;
      position: absolute;
      right: $multi-auto-width;
      @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' or $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'Material3' {
        left: $ddl-zero-margin-padding;
      }
    }

    .e-close-hooker::before {
      @if $ddl-multiselect-skin-name != 'Material3' {
        left: $ddl-rtl-hooker-left;
      }
    }

    .e-delim-values .e-remain {
      padding-right: $ddl-remains-padding-left;
    }
  }
}

.e-multiselect.e-rtl .e-down-icon .e-chips-close.e-close-hooker {
  left: $ddl-close-rtl-icon-left;
}

.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
  left: $ddl-chip-close-rtl-left;
}

.e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
.e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
  @if ($ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3') {
    left: $ddl-chip-close-rtl-small-left;
  }
}

.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
  bottom: $multi-one-width;
  margin-right: $ddl-check-right-margin;
  position: relative;
  text-indent: $ddl-zero-margin-padding;
  vertical-align: middle;
}

.e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-list-item .e-checkbox-wrapper {
  @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
    padding-left: $ddl-multiselect-group-checkbox-wrapper-padding-left;
  }
}

.e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-list-item .e-checkbox-wrapper .e-ripple-container {
  @if ($ddl-multiselect-skin-name == 'Material3') {
    left: $multi-popup-list-item-left;
  }
}

.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-item .e-checkbox-wrapper {
  @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
    padding-right: $ddl-multiselect-group-list-item-rtl-padding-right;
  }
}

.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
  bottom: $multi-one-width;
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    bottom: $ddl-multi-select-list-item-bottom;
  }
  margin-right: $ddl-check-right-margin;
  position: relative;
  text-indent: $ddl-zero-margin-padding;
  vertical-align: middle;
}

.e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item .e-checkbox-wrapper {
  margin-left: $popup-multi-rtl-margin-left;
  margin-right: $ddl-zero-margin-padding;
}

.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-group-item .e-checkbox-wrapper {
  margin-left: $popup-multi-rtl-margin-left;
  margin-right: $ddl-zero-margin-padding;
}

.e-popup.e-multi-select-list-wrapper.e-rtl .e-list-item {
  @if ($ddl-multiselect-skin-name != 'tailwind') {
    padding-right: $ddl-zero-margin-padding;
  }
}

.e-popup.e-multi-select-list-wrapper.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-item {
  @if ($ddl-multiselect-skin-name != 'tailwind') {
    padding-right: $ddl-list-rtl-padding-right;
  }
}

.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-group-item {
  @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
    padding-right: $ddl-multiselect-group-list-group-item-rtl-padding-right;
  }
}

.e-multi-select-list-wrapper .e-selectall-parent {
  cursor: pointer;
  display: block;
  line-height: $ddl-select-all-height;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: $ddl-list-padding-right;
  position: relative;
  text-indent: $ddl-check-right;
  white-space: nowrap;
  width: $multi-full-width;
}

.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent {
  @if ($ddl-multiselect-skin-name == 'FluentUI') {
    text-indent: $ddl-check-group-right;
  }
}

.e-rtl .e-multi-select-list-wrapper .e-selectall-parent,
.e-multi-select-list-wrapper.e-rtl .e-selectall-parent {
  padding-left: $ddl-list-rtl-padding-left;
  padding-right: $ddl-list-rtl-padding-right;
}

.e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
  color: $ddl-multi-list-default-font-color;
  font-family: $ddl-chip-font-family;
  font-size: $ddl-selectall-font-size;
}

.e-small.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
.e-small .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-size: $ddl-small-selectall-font-size;
  }
}

.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
  bottom: $multi-one-width;
  margin-right: $ddl-check-right-margin;
  position: relative;
  text-indent: $ddl-zero-margin-padding;
  vertical-align: middle;
}

.e-multi-select-list-wrapper.e-rtl .e-selectall-parent .e-checkbox-wrapper {
  margin-left: $ddl-check-left;
  margin-right: $ddl-zero-margin-padding;
}

.e-multiselect .e-input-group-icon.e-ddl-icon {
  float: right;
  margin-top: $ddl-check-icon-top;
  @if $ddl-multiselect-skin-name == 'Material3' {
    top: $multi-one-width;
  }
}

.e-small .e-multiselect:not(.e-outline):not(.e-filled) .e-input-group-icon.e-ddl-icon {
  @if $ddl-multiselect-skin-name == 'Material3' {
    top: $small-multi-group-ddl-icon-top;
  }
}

.e-multiselect.e-rtl .e-input-group-icon.e-ddl-icon {
  float: left;
}

.e-multiselect .e-ddl-icon::before {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    transform: rotate(0deg);
    transition: transform 300ms ease;
  }
}

.e-multiselect.e-icon-anim .e-ddl-icon::before {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    transform: rotate(180deg);
    transition: transform 300ms ease;
  }
}

.e-multiselect.e-checkbox .e-multi-select-wrapper,
.e-multiselect .e-multi-select-wrapper.e-down-icon {
  @if $ddl-multiselect-skin-name != 'fluent2' {
    padding: $ddl-multiselect-zero-padding-margin;
  }
}

.e-multiselect.e-control-wrapper.e-checkbox .e-multi-select-wrapper.e-down-icon
{
  @if $ddl-multiselect-skin-name == 'fluent2' {
    padding-right: $multi-control-checkbox-padding-right;
  }
}

.e-multiselect .e-multi-select-wrapper.e-down-icon {
  @if $ddl-multiselect-skin-name =='fluent2' {
    padding: $multi-select-wrapper-down-icon-padding;
  }
}

.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus .e-input-filter {
  @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'bootstrap5.3' and $ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'fluent2' {
    padding: $ddl-filterbar-padding;
  }
}

.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
  @if $ddl-multiselect-skin-name != 'Material3' {
    padding-left: $ddl-popup-multi-filter-padding-left;
  }
  @if $ddl-multiselect-skin-name == 'material' {
    padding-right: 8px;
  }
}

.e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-back-icon {
  padding: $ddl-back-icon-padding;
}

.e-checkbox .e-multi-select-wrapper .e-delim-values .e-remain {
  line-height: $ddl-checkbox-delim-line-height;
  padding-left: $ddl-checkbox-delim-padding-left;
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    padding-left: $ddl-zero-margin-padding;
  }
}

.e-popup.e-multi-select-list-wrapper .e-list-item.e-disable .e-checkbox-wrapper .e-frame,
.e-popup.e-multi-select-list-wrapper .e-list-group-item.e-disable .e-checkbox-wrapper .e-frame {
  opacity: .3;
}

.e-popup.e-multi-select-list-wrapper .e-list-item.e-disable,
.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-disable {
  opacity: .7;
}

.e-multi-select-wrapper input[readonly = 'true'] {
  pointer-events: none;
}

.e-multiselect.e-checkbox .e-multi-select-wrapper .e-searcher {
  pointer-events: none;
}

ejs-multiselect {
  display: block;
}

.e-small.e-multi-select-list-wrapper .e-selectall-parent,
.e-small .e-multi-select-list-wrapper .e-selectall-parent {
  line-height: $ddl-select-all-height-small;
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-size: $ddl-chip-small-font-size;
    text-indent: $ddl-small-check-right;
  }
}

.e-small .e-multi-select-wrapper .e-chips-close {
  height: $ddl-small-chip-close-square;
  width: $ddl-small-chip-close-width;
}

.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
  @if $ddl-multiselect-skin-name == 'Material3' {
    right: $multi-small-down-icon-close-right;
  }
}

.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
  @if $ddl-multiselect-skin-name == 'Material3' {
    margin-top: $ddl-small-close-hooker-margin-top;
    height: $ddl-small-chip-close-hooker-height;
    width: $ddl-small-chip-close-hooker-width;
    line-height: normal;
  }
}

.e-small .e-multi-select-wrapper {
  min-height: $ddl-control-small-height;
}

.e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
.e-small .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
  @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
    height: $ddl-small-input-height;
  }
}

.e-small .e-multi-select-wrapper input[type = 'text'] {
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-size: $ddl-chip-small-font-size;
  }
  height: $ddl-small-input-height;
  min-height: $ddl-small-input-height;
}

.e-small .e-multi-select-wrapper .e-delim-values {
  font-size: $ddl-delim-small-font-size;
  line-height: $ddl-delimviewheight-small;
}

.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
  @if $ddl-multiselect-skin-name != 'fluent2' {
    margin-top: $ddl-small-closer-margin-top;
  }
  @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $ddl-closer-hooker-font-small;
    height: $ddl-small-clear-icon-height;
    width: $ddl-small-clear-icon-width;
  }
}

.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
.e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
  @if $ddl-multiselect-skin-name == 'Material3' {
    margin-top: $ddl-small-ddl-icon-top;
  }
}

.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
  margin-top: $ddl-small-ddl-icon-top;
}

.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
  @if ddl-multiselect-skin-name == 'Material3' {
    height: $ddl-small-clear-icon-height;
    width: $ddl-small-clear-icon-width;
  }
}

.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'bootstrap4' {
    padding: $ddl-chip-small-content-padding;
  }
}

.e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
  @if $ddl-multiselect-skin-name == 'Material3' {
    right: $ddl-close-icon-small-right;
  }
}

.e-content-placeholder.e-multiselect.e-placeholder-multiselect {
  background-size: 300px 33px;
  min-height: 33px;
}

.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
  color: inherit;
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: inherit;
    min-height: $outline-multiselect-inner-input-height;
    padding: $multi-select-wrapper-padding;
  }
}

.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: $multi-select-wrapper-padding;
  }
}

.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: inherit;
    min-height: $outline-multiselect-small-inner-input-height;
    padding: $small-multi-input-padding;
  }
}

.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: $small-multi-input-padding;
  }
}

.e-small {
  .e-multiselect.e-outline .e-multi-select-wrapper,
  #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      min-height: $outline-multiselect-small-height;
      padding: $outline-multiselect-overall-padding;
    }
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    min-height: $ddl-outline-multiselect-height;
    padding: $outline-multiselect-overall-padding;
  }
}

.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding-right: $ddl-zero-margin-padding;
  }
}

.e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
.e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
.e-rtl .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
.e-rtl .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
.e-rtl.e-small.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
.e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
.e-small .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
.e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
.e-rtl .e-small.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
.e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding-left: $ddl-zero-margin-padding;
  }
}

.e-rtl .e-multiselect.e-outline .e-multi-select-wrapper,
.e-rtl.e-multiselect.e-outline .e-multi-select-wrapper,
.e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
.e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper,
.e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: $outline-rtl-multiselect-overall-padding;
  }
}

.e-rtl .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
.e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
.e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
.e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
.e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding-left: $ddl-zero-margin-padding;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding-right: $ddl-zero-margin-padding;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $ddl-outline-multiselect-height;
  }
}

.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $outline-multiselect-small-height;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $bigger-small-multi-filled-float-font-size;
    line-height: $ddl-outline-multiselect-height;
    padding: $outline-multiselect-delimeter-padding;
  }
}

.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $bigger-small-multi-float-font-size;
    line-height: $outline-multiselect-small-height;
    padding: $outline-multiselect-small-delimeter-padding;
  }
}

.e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: $outline-rtl-multiselect-delimeter-padding;
  }
}

.e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
.e-rtl.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
.e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
.e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
.e-small .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
.e-rtl .e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: $outline-rtl-multiselect-small-delimeter-padding;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $outline-multiselect-chip-height;
    margin: $outline-multiselect-chip-margin;
    padding: $outline-multiselect-chip-padding;
  }
}

.e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
.e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    margin: $outline-rtl-multiselect-chip-margin;
  }
}

.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $outline-multiselect-small-chip-height;
    padding: $outline-multiselect-chip-padding;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: $multiselect-wrapper-chips-padding;
  }
}

.e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
.e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    padding: $multiselect-wrapper-rtl-chips-padding;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $outline-multiselect-chip-font-size;
  }
}

.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $outline-multiselect-small-chip-font-size;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
  align-items: normal;
}

.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $bigger-small-multi-filled-float-font-size;
  }
}

.e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
.e-small .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $bigger-small-multi-float-font-size;
  }
}

.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
  padding: $ddl-filled-wrapper-padding;
}

.e-multiselect.e-filled.e-input-group.e-control-wrapper {
  padding: $ddl-multiselect-zero-padding-margin;
}

.e-filled.e-float-input .e-multi-select-wrapper {
  padding: $ddl-filled-float-wrapper-padding;
}

.e-small.e-filled.e-float-input .e-multi-select-wrapper,
.e-small .e-filled.e-float-input .e-multi-select-wrapper {
  padding: $ddl-small-filled-float-wrapper-padding;
}

.e-rtl.e-multiselect.e-filled.e-input-group.e-control-wrapper,
.e-rtl.e-multiselect.e-filled.e-float-input.e-control-wrapper {
  padding: $ddl-multiselect-zero-padding-margin;
}

.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    min-height: $ddl-multiselect-filled-input-min-height;
    padding-right: $ddl-mat-bigger-rtl-close-left;
  }
}

.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    min-height: $ddl-multiselect-filled-input-min-height-small;
  }
}

.e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
.e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $ddl-multiselect-filled-float-input-min-height-small;
    min-height: $ddl-multiselect-filled-float-input-min-height-small;
    padding: $small-multiselect-filled-input-padding;
  }
}

.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $ddl-multiselect-filled-input-min-height;
  }
}

.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher,
.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $ddl-multiselect-filled-input-min-height-small;
  }
}

.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $ddl-multiselect-filled-float-input-min-height-small;
  }
}

.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    min-height: $ddl-multiselect-filled-float-input-min-height;
  }
}

.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $bigger-small-multi-float-font-size;
    line-height: $ddl-multiselect-filled-input-min-height;
  }
}

.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $bigger-small-multi-filled-float-font-size;
    line-height: $ddl-multiselect-filled-float-input-min-height;
  }
}

.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
.e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
.e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    font-size: $ddl-delim-bigger-small-font-size;
    line-height: $ddl-multiselect-filled-input-min-height-small;
  }
}

.e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
.e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    line-height: $ddl-multiselect-filled-float-input-min-height-small;
  }
}

.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
  height: $multi-wrapper-chip-height;
}

.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip,
.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
  height: $multi-small-chip-height;
}

.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
  height: $multi-filled-float-chip-height;
}

.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
  margin: $ddl-filled-float-wrapper-chip-margin;
  padding: $ddl-filled-float-wrapper-chip-padding;
}

.e-rtl.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
.e-rtl.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
  margin: $ddl-rtl-filled-float-wrapper-chip-margin;
  padding: $ddl-filled-float-wrapper-chip-padding;
}

.e-small .e-filled .e-multi-select-wrapper .e-chips,
.e-small.e-filled .e-multi-select-wrapper .e-chips {
  height: $multi-small-filled-chip-height 16px;
  margin: $ddl-small-filled-wrapper-chip-margin;
  padding-right: $ddl-small-filled-wrapper-chip-padding-right;
}

.e.rtl.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
.e-rtl.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
  margin: $ddl-rtl-small-filled-float-chip-margin;
}

.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    height: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
    width: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
  }
}

.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent {
  font-size: $ddl-filled-chipcontent-font-size;
  padding: $ddl-filled-chipcontent-padding;
}

.e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
.e-small .e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
  font-size: $ddl-small-filled-chipcontent-font-size;
}

.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
  font-size: $ddl-filled-float-chipcontent-font-size;
  padding: $ddl-filled-float-chipcontent-padding;
}

.e-rtl.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
  padding: $ddl-rtl-filled-chipcontent-padding;
}

.e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
.e-small .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
  font-size: $ddl-small-filled-float-chiupcontent-font-size;
}

.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-mob-wrapper .e-chips > .e-chipcontent {
  font-size: $ddl-filled-float-mob-chipcontent-font-size;
  padding-right: $ddl-filled-float-mob-chipcontent-padding-right;
}

// Clear icon styles

.e-filled.e-multi-select-wrapper .e-chips-close.e-close-hooker,
.e-multiselect.e-control-container .e-filled.e-multi-select-wrapper .e-clear-icon {
  height: $multi-filled-clear-icon-height;
  margin-top: $multi-filled-clear-icon-margin-top;
  right: $multi-filled-close-right;
  top: $multi-full-width;
  width: $multi-filled-clear-icon-width;
}

.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container.e-input-group :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon {
  display: none;
}

.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
  @if $ddl-multiselect-skin-name != 'Material3' {
    margin-right: $multi-zero-width;
  }
  @else {
    margin: $ddl-multiselect-zero-padding-margin;
  }
}

.e-multiselect.e-control-container.e-input-group.e-disabled .e-input-group-icon.e-ddl-icon.e-icons,
.e-multiselect.e-control-container.e-input-group.e-disabled .e-clear-icon {
  cursor: not-allowed;
}

.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon,
.e-multiselect.e-control-wrapper.e-control-container.e-input-group.e-checkbox .e-multi-select-wrapper.e-down-icon .e-multi-searcher .e-dropdownbase.e-control.e-multiselect.e-lib {
  cursor: pointer;
}

.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
  bottom: $multi-zero-width;
  right: $multi-zero-width;
  cursor: nwse-resize;
  height: $popup-multi-resize-height;
  position: absolute;
  width: $popup-multi-resize-width;
}

.e-popup.e-multi-select-list-wrapper.e-resize .e-resizer-right {
  @if $skin-name == 'bootstrap-dark' or $skin-name == 'material-dark' or $skin-name == 'tailwind-dark' or $skin-name == 'material3-dark' or $skin-name == 'bootstrap5-dark' or $skin-name == 'fluent-dark'  or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
    background: transparent;
    color: rgb(221, 218, 218);
  }
}

.e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
  color: $ddl-sel-chip-close;
}

.e-multi-select-wrapper .e-chips.e-chip-selected {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-sel-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-sel-chip-bg-color;
  }
}

.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-sel-hover-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-sel-hover-chip-bg-color;
  }
}

#{&}.e-multiselect {
  box-sizing: border-box;
}

/* stylelint-disable property-no-vendor-prefix */
.e-multi-select-wrapper .e-chips > .e-chipcontent {
  -webkit-text-fill-color: $ddl-chip-font-color;
  color: $ddl-chip-font-color;
  font-family: $ddl-chip-font-family;
  font-size: $ddl-chip-font-size;
}

.e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent {
  color: $ddl-sel-chip-font-color;
}

.e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent:hover {
  color: $ddl-sel-chip-hover-font-color;
}

.e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-chip-bg-color;
    border: $ddl-chip-border;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'fluent2' or $skin-name == 'tailwind3' {
    border: $dd-chip-border;
  }
  border-radius: $ddl-chip-radius;
  height: $ddl-chip-height;
}

.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-chip-hover-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-chip-hover-bg-color;
  }
}

.e-multi-select-wrapper .e-chips > .e-chipcontent:hover {
  color: $ddl-chip-hover-font-color;
}

.e-multi-select-wrapper .e-chips .e-chips-close::before {
  -webkit-text-fill-color: $ddl-chip-close;
  color: $ddl-chip-close;
  font-size: $ddl-chip-close-font;
}

.e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-chip-mobile-bg;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-chip-mobile-bg;
  }
  border-radius: $ddl-chip-mobile-radius;
  color: $ddl-chip-mobile-font;
  height: $ddl-chip-sel-mobile-height;
  line-height: $ddl-chip-sel-mobile-height;
}

.e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chipcontent {
  color: $ddl-chip-mobile-font;
}

.e-multi-select-wrapper .e-chips.e-mob-chip {
  height: $ddl-chip-mobile-height;
}

#{&}.e-popup.e-multi-select-list-wrapper {
  box-shadow: $ddl-popup-shadow-value;
  box-sizing: content-box;
  overflow: initial;
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active {
  @if $ddl-multiselect-skin-name != 'tailwind' {
    border-bottom: $ddl-popup-active-border-width solid transparent;
    border-left: $ddl-popup-active-border-width solid $ddl-popup-active-focus-bg-color;
    border-right: $ddl-popup-active-border-width solid $ddl-popup-active-focus-bg-color;
    border-top: $ddl-popup-active-border-width solid $ddl-popup-active-border-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: transparent;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: transparent;
  }
  border-color: transparent;
  color: $ddl-multi-list-default-font-color;
}

#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active,
#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active.e-hover {
  @if $ddl-multiselect-skin-name == 'tailwind' {
    font-weight: normal;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:not(.e-item-focus),
#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active:not(.e-item-focus),
#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active:not(.e-item-focus),
#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-hover:not(.e-item-focus),
#{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active:not(.e-item-focus),
#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:first-child:not(.e-item-focus),
#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:last-child:not(.e-item-focus),
#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-dropdownbase .e-list-item.e-active.e-hover:not(.e-item-focus) {
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    box-shadow: none;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: transparent;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: transparent;
  }
  border-color: transparent;
  color: $ddl-multi-list-default-font-color;
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    color: $ddl-list-header-font-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-item-focus {
  @if $ddl-multiselect-skin-name != 'highcontrast' and $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'bootstrap5.3' {
    color: $ddl-multi-list-default-font-color;
  }
  @if $ddl-multiselect-skin-name == 'fluent2' {
    color: $ddl-multi-list-select-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active.e-item-focus {
  @if $ddl-multiselect-skin-name != 'highcontrast' and $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'bootstrap5.3' {
    color: $ddl-multi-list-default-font-color;
  }
  @if$ddl-multiselect-skin-name == 'FluentUI' {
    color: $ddl-list-header-font-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-hover {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-multi-list-hover-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-multi-list-hover-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    color: $ddl-multi-list-default-font-color;
  }
  @if $ddl-multiselect-skin-name == 'fluent2' {
    color: $ddl-multi-checkbox-selected-hover-text-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-list-group-item.e-active.e-hover {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-multi-list-hover-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-multi-list-hover-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    color: $content-text-color-alt3;
  }
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    box-shadow: none;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:first-child {
  @if $ddl-multiselect-skin-name != 'tailwind' {
    border-bottom: $ddl-popup-active-border-width solid transparent;
    border-top: $ddl-popup-active-border-width solid transparent;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active:last-child {
  @if $ddl-multiselect-skin-name != 'tailwind' {
    border-bottom: $ddl-popup-active-border-width solid transparent;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus + li.e-active {
  @if $ddl-multiselect-skin-name != 'highcontrast' and $ddl-multiselect-skin-name != 'tailwind' {
    border-top: $ddl-popup-active-border-width solid transparent;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-popup-active-focus-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-popup-active-focus-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'FluentUI' {
    box-shadow: $ddl-popup-active-focus-shadow-item;
  }
  color: $ddl-popup-active-focus-font-color;
  @if $ddl-multiselect-skin-name != 'tailwind' {
    border: $ddl-popup-active-focus-border-width solid $ddl-popup-active-focus-border-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-popup-active-focus-bg-color;
  }
  @if $ddl-multiselect-skin-name != 'Material3' {
    background-color: $ddl-popup-active-focus-bg-color;
  }
  box-shadow: $ddl-popup-active-focus-shadow-item;
  color: $ddl-popup-active-focus-font-color;
  @if $ddl-multiselect-skin-name != 'tailwind' {
    border: $ddl-popup-active-focus-border-width solid $ddl-popup-active-focus-border-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item.e-item-focus {
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-popup-focus-bg-color;
  }
}

#{&}.e-popup.e-multi-select-list-wrapper .e-list-item {
  border: $ddl-popup-normal-border-width solid transparent;
}

#{&}.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item {
  border: $ddl-popup-normal-border-width solid transparent;
}

.e-multi-select-wrapper input.e-dropdownbase:-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
  color: $ddl-input-placeholder;
}

.e-multi-select-wrapper input.e-dropdownbase::-moz-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
  color: $ddl-input-placeholder;
}

.e-multi-select-wrapper input.e-dropdownbase:-ms-input-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
  color: $ddl-input-placeholder;
}

.e-multi-select-wrapper input.e-dropdownbase::-webkit-input-placeholder {/* stylelint-disable-line selector-no-vendor-prefix */
  color: $ddl-input-placeholder;
}

.e-ul.e-reorder {
  border-bottom: 1px solid $ddl-popup-reorder-border;
}

.e-multi-select-list-wrapper .e-selectall-parent {
  border-bottom: 1px solid $ddl-popup-reorder-border;
}

.e-ddl.e-popup.e-multi-select-list-wrapper .e-list-item.e-active.e-item-focus .e-checkbox-wrapper .e-frame.e-check {
  @if $ddl-multiselect-skin-name == 'highcontrast' {
    background-color: $ddl-multi-checkmark-bgcolor;
    border-color: $ddl-multi-checkmark-border-color;
    color: $ddl-multi-checkmark-color;
  }
  @if $ddl-multiselect-skin-name == 'bootstrap4' {
    background-color: $ddl-multi-checkbox-bgcolor;
    border-color: $ddl-multi-checkbox-border-color;
    color: $ddl-multi-checkbox-color;
  }
}

.e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item.e-active.e-item-focus .e-checkbox-wrapper .e-frame.e-check {
  @if $ddl-multiselect-skin-name == 'highcontrast' {
    background-color: $ddl-multi-checkmark-bgcolor;
    border-color: $ddl-multi-checkmark-border-color;
    color: $ddl-multi-checkmark-color;
  }
  @if $ddl-multiselect-skin-name == 'bootstrap4' {
    background-color: $ddl-multi-checkbox-bgcolor;
    border-color: $ddl-multi-checkbox-border-color;
    color: $ddl-multi-checkbox-color;
  }
}

.e-ddl.e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active:not(.e-item-focus):not(.e-hover) {
  @if $ddl-multiselect-skin-name == 'highcontrast' {
    background-color: $bg-base-0;
  }
}

e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-group-item.e-active:not(.e-item-focus):not(.e-hover) {
  @if $ddl-multiselect-skin-name == 'highcontrast' {
    background-color: $bg-base-0;
  }
}

.e-multi-select-wrapper .e-delim-values {
  -webkit-text-fill-color: $ddl-chip-font-color;
  color: $ddl-chip-font-color;
  @if $ddl-multiselect-skin-name == 'bootstrap4' {
    -webkit-text-fill-color: $gray-900;
    color: $gray-900;
  }
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    -webkit-text-fill-color: $content-text-color;
    color: $content-text-color;
  }
}

.e-multi-select-wrapper .e-chips-close.e-close-hooker {
  color: $ddl-close-icon-color;
}

.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover {
  @if $ddl-multiselect-skin-name == 'tailwind' {
    color: $ddl-close-icon-hover-color;
  }
}

.e-small .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
    border-radius: $ddl-chip-mobile-radius;
  }
  height: $ddl-small-chip-height;
}

.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
  font-size: $ddl-chip-small-font-size;
}

.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {
  @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'FluentUI' {
    left: $ddl-chip-close-small-left;
    top: $ddl-chip-close-small-top;
  }
  font-size: $ddl-small-chip-close-font;
}

.e-small .e-multi-select-wrapper .e-close-hooker::before {
  left: $ddl-chip-close-hooker-small-left;
}

.e-small .e-multi-select-wrapper .e-down-icon .e-close-hooker::before {
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    left: $ddl-small-down-icon-left;
  }
}

.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon:hover,
.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon:hover {
  @if $ddl-multiselect-skin-name == 'FluentUI' {
    background: transparent;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $outline-multiselect-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $outline-multiselect-chip-bg-color;
  }
}

.e-multiselect.e-filled .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $filled-multiselect-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $filled-multiselect-chip-bg-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips:hover {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $outline-multiselect-chip-hover-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $outline-multiselect-chip-hover-bg-color;
  }
}

.e-multiselect.e-filled .e-multi-select-wrapper .e-chips:hover {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $filled-multiselect-chip-hover-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $filled-multiselect-chip-hover-bg-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected,
.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $outline-multiselect-sel-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $outline-multiselect-sel-chip-bg-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected:hover,
.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $outline-multiselect-sel-hover-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $outline-multiselect-sel-hover-chip-bg-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent,
.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $ddl-chip-font-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent:hover,
.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent:hover {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $ddl-chip-font-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
.e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $outline-multiselect-close-icon-bg-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover,
.e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $outline-multiselect-close-icon-hover-bg-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before,
.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $ddl-chip-close;
  }
}

.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before,
.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close::before {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $ddl-chip-mobile-font;
  }
}

.e-multiselect.e-outline:not(.e-disabled) .e-multi-select-wrapper .e-chips:not(.e-chip-selected) .e-chips-close:hover::before,
.e-multiselect.e-filled:not(.e-disabled) .e-multi-select-wrapper .e-chips:not(.e-chip-selected) .e-chips-close:hover::before {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $outline-multiselect-close-icon-hover-bg-color;
  }
}

.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $outline-multiselect-remains-font-color;
  }
}

.e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-delim-values,
.e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-delim-values .e-remain,
.e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-chips > .e-chipcontent,
.e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-chips .e-chips-close::before,
.e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $outline-multiselect-disabled-font-color;
  }
}

.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
  -webkit-text-fill-color: $multiselect-disable-font-color;
  color: $multiselect-disable-font-color;
}

.e-multiselect.e-outline.e-disabled .e-multi-select-wrapper .e-chips {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $outline-multiselect-disabled-chip-bg-color;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $outline-multiselect-disabled-chip-bg-color;
  }
}

.e-multiselect.e-filled .e-multi-select-wrapper.e-mob-wrapper .e-chips.e-mob-chip.e-chip-selected,
.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected {
  @if $ddl-multiselect-skin-name == 'material' {
    background-color: $ddl-chip-mobile-bg;
    border-radius: 4px;
    box-sizing: border-box;
    color: $ddl-chip-mobile-font;
    height: $ddl-chip-sel-mobile-height;
    line-height: $ddl-chip-sel-mobile-height;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  @if $ddl-multiselect-skin-name == 'Material3' {
    background: $ddl-chip-mobile-bg;
    border-radius: 4px;
    box-sizing: border-box;
    color: $ddl-chip-mobile-font;
    height: $ddl-chip-sel-mobile-height;
    line-height: $ddl-chip-sel-mobile-height;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close,
.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chips-close {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    width: 33px;
  }
}

.e-multiselect.e-filled .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chipcontent,
.e-multiselect.e-outline .e-multi-select-wrapper .e-chips.e-mob-chip.e-chip-selected .e-chipcontent {
  @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
    color: $ddl-chip-mobile-font;
  }
}

@include export-module('multiselect-bootstrap-icons') {
  .e-multiselect.e-input-group .e-ddl-icon::before {
    content: '\e969';
    font-family: 'e-icons';
  }

  .e-multi-select-wrapper .e-chips .e-chips-close::before {
    content: '\e842';
    cursor: pointer;
    left: $ddl-chip-close-left;
    position: relative;
    top: $ddl-chip-close-top;
  }

  .e-multi-select-wrapper .e-close-hooker::before {
    content: '\e842';
    cursor: pointer;
    left: $ddl-overall-close-left;
    position: relative;
    top: $ddl-overall-close-top;
  }

  .e-multiselect.e-input-group .e-ddl-disable-icon::before {
    content: '';
  }

  .e-popup.e-multi-select-list-wrapper.e-resize .e-icons.e-resizer-right::before {
    content: '\eb08';
  }
}

@include export-module('multiselect-bigger') {
  .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon,
  .e-bigger.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
    @if $ddl-multiselect-skin-name != 'Material3' {
      margin-top: $ddl-icon-margin-top-bigger;
    }
    @if $ddl-multiselect-skin-name == 'fluent2' {
      padding: $multi-bigger-input-padding;
    }
  }

  .e-bigger .e-multi-select-wrapper {
    min-height: $ddl-control-bigger-height;
  }

  .e-bigger .e-multi-select-wrapper .e-chips {
    margin: $ddl-chip-margin-bigger;
  }

  .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
    @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      padding: $ddl-chip-bigger-content-padding;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-chip-bigger-font-size;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
    padding: $ddl-chip-mobile-content-padding;
  }

  .e-bigger #{&}.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips>.e-chipcontent {
    padding: $ddl-rtl-chip-mobile-content-padding;
  }

  .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
    @if $ddl-multiselect-skin-name == 'Material3' {
      right: $ddl-close-icon-bigger-right;
    }
  }

  .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'Material3' {
      right: $multi-bigger-down-icon-close-right;
    }
  }

  .e-bigger.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
  .e-bigger.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
  .e-bigger.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'FluentUI' {
      font-size: $ddl-bigger-chip-down-icon-font;
      right: $ddl-close-icon-bigger-right;
    }
  }

  .e-bigger.e-small.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
  .e-bigger.e-small.e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
  .e-bigger.e-small.e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'FluentUI' {
      font-size: $ddl-biggersmall-chip-down-icon-font;
      right: $ddl-close-icon-bigger-right;
    }
  }

  .e-bigger .e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
    @if $ddl-multiselect-skin-name == 'Fabric' or $ddl-multiselect-skin-name == 'highcontrast' {
      right: 38px;
    }
  }

  .e-bigger.e-small .e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'FluentUI' or $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      right: $ddl-close-down-icon-left;
    }
  }

  .e-bigger.e-small .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon,
  .e-bigger.e-small.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
    @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      left: $multi-bgr-small-clear-icon-left;
      right: $multi-auto-width;
    }
  }

  .e-small.e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-small.e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      left: $multi-bgr-small-chips-clear-icon-left;
      right: $multi-auto-width;
    }
  }

  .e-bigger .e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon,
  .e-bigger.e-multiselect.e-input-group.e-control-container.e-rtl .e-multi-select-wrapper.e-down-icon .e-clear-icon {
    @if $ddl-multiselect-skin-name == 'Fabric' or $ddl-multiselect-skin-name == 'highcontrast' {
      left: 38px;
      right: auto;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name != 'Material3' {
      margin-top: $ddl-closer-margin-top-bigger;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' {
      height: $ddl-bigger-clear-icon-height;
      width: $ddl-bigger-clear-icon-width;
    }
    @if $ddl-multiselect-skin-name == 'FluentUI' {
      font-size: $ddl-bigger-chip-down-icon-font;
    }
    @if $ddl-multiselect-skin-name == 'Material3' {
      margin-top: $multi-bgr-chip-close-hooker-margin-top;
      font-size: $ddl-bigger-chip-down-icon-font;
      top: $multi-full-width;
      border-radius: $ddl-bigger-closer-hooker-border-radius;
      width: $ddl-bigger-closer-hooker-width;
      height: $ddl-bigger-closer-hooker-height;
      line-height: $multi-bgr-chip-close-hooker-line-height;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker:hover {
    @if $ddl-multiselect-skin-name == 'Material3' {
      background: $ddl-bigger-closer-hooker-bg-color;
      border: 1px;
    }
  }

  .e-bigger.e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon {
    @if $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-bigger-small-closer-hooker-height;
      width: $ddl-bigger-small-closer-hooker-width;
      margin-top: $ddl-closer-margin-top-bigger-small;
    }
  }

  .e-bigger .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-clear-icon {
    @if $ddl-multiselect-skin-name == 'Material3' {
      width: $ddl-bigger-closer-hooker-width;
      height: $ddl-bigger-closer-hooker-width;
    }
  }

  .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon,
  .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
    @if $ddl-multiselect-skin-name != 'fluent2' {
      margin-top: $ddl-closer-margin-top-bigger;
    }
    @if $ddl-multiselect-skin-name == 'fluent2' {
      margin-top: $ddl-multi-clear-icon-margin-top;
    }
    @if $ddl-multiselect-skin-name == 'FluentUI' {
      margin-top: $ddl-bigger-clear-margin-top;
    }
    @if $ddl-multiselect-skin-name == 'bootstrap' {
      margin-top: -3.7em;
    }
    @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      margin-top: $ddl-multi-clear-icon-margin-top;
    }
    @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
      margin-top: -3.2em;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' {
      height: $ddl-bigger-clear-icon-height;
      margin-top: $ddl-clear-margin-top;
      width: $ddl-bigger-clear-icon-width;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-multiselect .e-down-icon .e-chips-close.e-close-hooker.e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-closer-hooker-font-bigger;
      margin-top: $ddl-closer-margin-top;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' {
      margin-top: $ddl-closer-margin-top-bigger;
    }
  }

  .e-bigger .e-multi-select-wrapper input[type = 'text'],
  .e-multi-select-wrapper.e-mob-wrapper input[type = 'text'] {
    height: $ddl-input-height;
    min-height: $ddl-input-height;
  }

  .e-bigger .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'bootstrap4' {
      font-size: $ddl-chip-bigger-font-size;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-chip-bigger-font-size;
    }
    height: $ddl-input-bigger-height;
    min-height: $ddl-input-bigger-height;
  }

  .e-bigger .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
  .e-bigger.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
    width: $ddl-bigger-search-wrapper-width;
  }

  .e-bigger.e-small .e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
  .e-bigger.e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
  .e-bigger .e-small.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
  .e-small .e-bigger.e-multiselect .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
    width: $ddl-bigger-small-search-wrapper-width;
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-searcher.e-search-custom-width {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      width: $ddl-bigger-small-search-wrapper-width;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-delim-bigger-font-size;
    }
    line-height: $ddl-delimviewheight-bigger;
    padding-left: $ddl-delimview-bigger-padding-left;
  }

  .e-bigger .e-multi-select-wrapper .e-delim-values .e-remain {
    @if $ddl-multiselect-skin-name == 'bootstrap4' {
      padding-left: 12px;
    }
    @else if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      padding-left: $ddl-zero-margin-padding;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-chip-bigger-font-size;
    }
  }

  .e-bigger.e-small .e-multi-select-wrapper .e-delim-values .e-remain {
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-chip-bigger-small-font-size;
    }
  }

  .e-bigger.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
  .e-bigger .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
    @if ($ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3') {
      left: $ddl-chip-close-rtl-bigger-left;
    }
  }

  .e-bigger.e-small.e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before,
  .e-bigger.e-small .e-multiselect.e-rtl .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
    @if ($ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3') {
      left: $ddl-chip-close-rtl-small-bigger-left;
    }
  }

  .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-list-item .e-checkbox-wrapper {
    @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
      padding-right: $ddl-bigger-multiselect-group-list-item-rtl-padding-right;
    }
  }

  .e-bigger .e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
  .e-bigger.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper {
    bottom: $multi-one-width;
    @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      bottom: $ddl-multi-select-list-item-bottom;
    }
    margin-right: $ddl-bigger-check-right-margin;
  }

  .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper,
  .e-bigger.e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-list-group-item .e-checkbox-wrapper {
    bottom: $multi-one-width;
    @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      bottom: $ddl-multi-select-list-item-bottom;
    }
    margin-right: $ddl-bigger-check-right-margin;
  }

  .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group.e-rtl .e-dropdownbase.e-rtl.e-dd-group .e-list-group-item {
    @if $ddl-multiselect-skin-name == 'highcontrast' or $ddl-multiselect-skin-name == 'fabric' {
      padding-right: $ddl-list-padding-right;
    }
  }

  .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group .e-dropdownbase.e-dd-group .e-list-group-item {
    @if ($ddl-multiselect-skin-name != 'tailwind') {
      padding-left: $ddl-multiselect-group-list-group-item-padding-left;
    }
  }

  .e-bigger .e-popup.e-multi-select-list-wrapper.e-multiselect-group:not(.e-rtl) .e-dropdownbase.e-dd-group .e-list-item .e-checkbox-wrapper {
    @if ($ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'FluentUI') {
      padding-left: $ddl-bigger-multiselect-group-checkbox-wrapper-padding-left;
    }
  }

  .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
  .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
    @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' or $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
      font-size: $ddl-bigger-selectall-font-size;
    }
  }

  .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
  .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-bigger-small-selectall-font-size;
    }
  }

  .e-bigger.e-multi-select-list-wrapper .e-selectall-parent,
  .e-bigger .e-multi-select-list-wrapper .e-selectall-parent {
    font-size: $ddl-chip-font-size;
    line-height: $ddl-bigger-select-all-height;
    text-indent: $ddl-bigger-check-right;
  }

  .e-bigger .e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent,
  .e-bigger.e-multi-select-list-wrapper.e-multiselect-group.e-checkbox .e-selectall-parent {
    @if $ddl-multiselect-skin-name == 'FluentUI' {
      font-size: $ddl-chip-font-size;
      line-height: $ddl-bigger-select-all-height;
      text-indent: $ddl-bigger-check-right;
    }
  }

  .e-bigger.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper,
  .e-bigger .e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
    bottom: $multi-one-width;
    @if $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' {
      bottom: $ddl-multi-select-list-item-bottom;
    }
    margin-right: $ddl-bigger-check-right-margin;
  }

  .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-filter,
  .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group.e-input-focus {
    @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'bootstrap5.3' and $ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'Material3' {
      padding: $ddl-bigger-filterbar-padding;
    }
  }

  .e-bigger .e-ddl.e-popup.e-multi-select-list-wrapper .e-filter-parent .e-input-group:not(.e-control-container) .e-clear-icon {
    @if $ddl-multiselect-skin-name != 'Material3' {
      padding-left: $multi-bgr-list-wrapper-padding-left;
    }
    @if $ddl-multiselect-skin-name == 'material' {
      padding-right: 8px;
    }
  }

  .e-bigger .e-checkbox .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name != 'highcontrast' {
      line-height: $ddl-delimviewheight-check-bigger;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips-close {
    @if $ddl-multiselect-skin-name == 'tailwind' {
      height: $ddl-bigger-chip-close-square;
      width: $ddl-bigger-chip-close-width;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-bigger-chip-close-font;
    }
  }

  .e-bigger.e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger.e-small .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
    @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
      height: $ddl-bigger-small-input-height;
    }
  }

  .e-bigger .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger .e-multi-select-wrapper.e-delimiter .e-multi-searcher {
    @if $ddl-multiselect-skin-name == 'tailwind' or $ddl-multiselect-skin-name == 'FluentUI' {
      height: $ddl-input-bigger-height;
    }
  }

  .e-bigger.e-small.e-multi-select-list-wrapper .e-selectall-parent,
  .e-bigger.e-small .e-multi-select-list-wrapper .e-selectall-parent {
    line-height: $ddl-select-all-height-bigger-small;
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-chip-bigger-small-font-size;
      text-indent: $ddl-bigger-small-check-right;
    }
  }

  .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
  .e-bigger.e-small .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'Material3' {
      margin-top: $ddl-bigger-small-ddl-icon-top;
      top: $multi-full-width;
    }
  }

  .e-bigger.e-small.e-multiselect.e-control-container .e-multi-select-wrapper .e-ddl-icon,
  .e-bigger.e-small.e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-ddl-icon {
    margin-top: $ddl-bigger-small-ddl-icon-top;
  }

  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close {
    height: $ddl-bigger-small-chip-close-square;
    width: $ddl-bigger-small-chip-close-width;
    @if $ddl-multiselect-skin-name == 'bootstrap4' {
      margin: 3px 10px 10px 0;
    }
  }

  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'Material3' {
      min-height: $ddl-bigger-small-close-hooker-height;
      min-width: $ddl-bigger-small-close-hooker-width;
    }
  }

  .e-bigger.e-small .e-multi-select-wrapper {
    min-height: $ddl-control-bigger-small-height;
  }

  .e-bigger.e-small .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-chip-bigger-small-font-size;
    }
    height: $ddl-bigger-small-input-height;
    min-height: $ddl-bigger-small-input-height;
  }

  .e-small.e-bigger .e-multi-select-wrapper .e-delim-values {
    font-size: $ddl-delim-bigger-small-font-size;
    line-height: $ddl-delimviewheight-bigger-small;
  }

  .e-bigger.e-small .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
    @if $ddl-multiselect-skin-name == 'Material3' {
      right: $ddl-close-icon-bigger-small-right;
    }
  }

  .e-bigger.e-small .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
    margin-top: $ddl-closer-margin-top-bigger-small;
    @if $ddl-multiselect-skin-name != 'bootstrap5' and $ddl-multiselect-skin-name != 'bootstrap5.3' and $ddl-multiselect-skin-name != 'tailwind' and $ddl-multiselect-skin-name != 'tailwind3' {
      right: $ddl-chip-hooker-right;
    }
    @if $ddl-multiselect-skin-name == 'Material3' or $ddl-multiselect-skin-name == 'tailwind3' {
      right: $ddl-chip-hooker-bigger-small-right;
    }
    @if $ddl-multiselect-skin-name == 'tailwind' {
      font-size: $ddl-closer-hooker-font-bigger-small;
      height: $ddl-bigger-small-clear-icon-height;
      width: $ddl-bigger-small-clear-icon-width;
    }
    @if $ddl-multiselect-skin-name == 'FluentUI' {
      font-size: $ddl-biggersmall-chip-down-icon-font;
    }
  }

  .e-small.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
    @if $ddl-multiselect-skin-name == 'bootstrap4' {
      padding: $ddl-chip-bigger-content-padding;
    }
  }

  .e-bigger .e-content-placeholder.e-multiselect.e-placeholder-multiselect,
  .e-bigger.e-content-placeholder.e-multiselect.e-placeholder-multiselect {
    background-size: 300px 40px;
    min-height: 40px;
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: inherit;
      min-height: $outline-multiselect-inner-input-height;
      padding: $ddl-multi-bgr-small-outline-input-padding;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
  .e-bigger.e-small .e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
  .e-bigger .e-small.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'],
  .e-small .e-bigger.e-multiselect.e-outline.e-input-focus .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding: $ddl-multi-bgr-small-outline-input-padding;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'],
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: inherit;
      min-height: $outline-multiselect-bigger-inner-input-height;
    }
  }

  .e-bigger {
    .e-multiselect.e-outline .e-multi-select-wrapper,
    #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
      @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
        min-height: $outline-multiselect-bigger-height;
        padding: $outline-multiselect-bigger-overall-padding;
      }
    }

    .e-small {
      #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
        @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
          min-height: $ddl-outline-multiselect-height;
          padding: $outline-multiselect-overall-padding;
        }
      }
    }

    #{if(&, '&', '*')}.e-small {
      .e-multiselect.e-outline .e-multi-select-wrapper,
      #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
        @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
          min-height: $ddl-outline-multiselect-height;
          padding: $outline-multiselect-overall-padding;
        }
      }
    }
  }

  .e-small {
    .e-bigger {
      #{if(&, '&', '*')}.e-multiselect.e-outline .e-multi-select-wrapper {
        @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
          min-height: $ddl-outline-multiselect-height;
          padding: $outline-multiselect-overall-padding;
        }
      }
    }

    #{if(&, '&', '*')}.e-bigger {
      .e-multiselect.e-outline .e-multi-select-wrapper {
        @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
          min-height: $ddl-outline-multiselect-height;
          padding: $outline-multiselect-overall-padding;
        }
      }
    }
  }

  .e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-bigger .e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding-right: $ddl-zero-margin-padding;
    }
  }

  .e-rtl.e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
  .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-bigger .e-rtl.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
  .e-bigger .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-rtl .e-bigger.e-outline.e-multiselect.e-checkbox .e-multi-select-wrapper,
  .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-rtl.e-bigger .e-small.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
  .e-rtl.e-small .e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
  .e-rtl .e-bigger .e-small.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
  .e-rtl .e-small .e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
  .e-rtl.e-small.e-bigger .e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
  .e-rtl.e-small.e-bigger.e-multiselect.e-outline.e-checkbox .e-multi-select-wrapper,
  .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon,
  .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding-left: $ddl-zero-margin-padding;
    }
  }

  .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
  .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
  .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper,
  .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
  .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper,
  .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding: $outline-rtl-multiselect-overall-padding;
    }
  }

  .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper,
  .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper,
  .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding: $outline-rtl-multiselect-bigger-overall-padding;
    }
  }

  .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl.e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl.e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding-left: $ddl-zero-margin-padding;
    }
  }

  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide,
  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-close-icon-hide {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding-right: $ddl-zero-margin-padding;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $outline-multiselect-bigger-height;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-delimiter .e-searcher {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-outline-multiselect-height;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multi-bigger-delim-value-font-size;
      line-height: $outline-multiselect-bigger-height;
      padding: $outline-multiselect-bigger-delimeter-padding;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multi-bigger-small-delim-value-font-size;
      line-height: $ddl-outline-multiselect-height;
      padding: $outline-multiselect-delimeter-padding;
    }
  }

  .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding: $outline-rtl-multiselect-bigger-delimeter-padding;
    }
  }

  .e-rtl.e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl.e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger.e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-small .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values,
  .e-small .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      padding: $outline-rtl-multiselect-delimeter-padding;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $outline-multiselect-bigger-chip-height;
      padding: $outline-multiselect-bigger-chip-padding;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $outline-multiselect-chip-height;
      padding: $outline-multiselect-chip-padding;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $outline-multiselect-chip-font-size;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips > .e-chipcontent {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $outline-multiselect-bigger-chip-font-size;
    }
  }

  .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multi-bigger-delim-value-font-size;
    }
  }

  .e-bigger.e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger.e-small .e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger .e-small.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-small .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-delim-values .e-remain {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multi-bigger-small-delim-value-font-size;
    }
  }

  .e-small.e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper,
  .e-small .e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
    padding: $ddl-small-float-input-wrapper;
  }

  .e-bigger.e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper,
  .e-bigger.e-small .e-multiselect.e-filled.e-input-group.e-control-wrapper,
  .e-bigger .e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper,
  .e-small .e-bigger.e-multiselect.e-filled.e-input-group.e-control-wrapper {
    padding: $ddl-multiselect-zero-padding-margin;
  }

  .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper,
  .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper,
  .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper,
  .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper {
    padding: $ddl-bgr-small-filled-float-wrapper-padding;
  }

  .e-bigger.e-filled.e-float-input .e-multi-select-wrapper,
  .e-bigger .e-filled.e-float-input .e-multi-select-wrapper {
    padding: $ddl-bgr-filled-float-input-wrapper-padding;
  }

  .e-bigger:not(.e-small).e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper {
    padding-top: $ddl-bigger-filled-wrapper-padding-top;
  }

  .e-bigger.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
  .e-bigger.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
  .e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
  .e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      min-height: $ddl-multiselect-filled-input-min-height;
      padding-right: $ddl-multi-bgr-small-filled-padding-right;
    }
  }

  .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'],
  .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      min-height: $ddl-multiselect-filled-input-min-height-bigger;
    }
  }

  .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'],
  .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper input[type = 'text'] {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      min-height: $ddl-multiselect-filled-float-input-min-height-bigger;
    }
  }

  .e-bigger.e-filled:not(.e-small).e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger .e-filled:not(.e-small).e-multiselect:not(.e-float-input) .e-multi-select-wrapper.e-delimiter .e-searcher {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-multiselect-filled-input-min-height-bigger;
    }
  }

  .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-multiselect-filled-float-input-min-height-bigger;
    }
  }

  .e-bigger.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher .e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher,
  .e-small .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper.e-delimiter .e-searcher {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-multiselect-filled-float-input-min-height;
    }
  }

  .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'],
  .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper.e-delimiter input[type = 'text'] {
    padding: $ddl-bigger-filled-float-wrapper-delimiter-input-padding;
  }

  .e-bigger.e-small.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
  .e-bigger.e-small .e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
  .e-bigger .e-small.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase,
  .e-small .e-bigger.e-multiselect.e-filled.e-float-input .e-searcher .e-dropdownbase {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      min-height: $ddl-multiselect-filled-float-input-min-height;
    }
  }

  .e-small.e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
  .e-small.e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
  .e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $bigger-small-multi-float-font-size;
      line-height: $ddl-multiselect-filled-input-min-height;
    }
  }

  .e-small.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
  .e-small.e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
  .e-small .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $bigger-small-multi-filled-float-font-size;
      line-height: $ddl-multiselect-filled-float-input-min-height;
    }
  }

  .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-delim-values,
  .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $multi-bgr-filled-delim-value-font-size;
      line-height: $ddl-multiselect-filled-input-min-height-bigger;
    }
  }

  .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values,
  .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-delim-values {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      line-height: $ddl-multiselect-filled-float-input-min-height-bigger;
    }
  }

  .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-bigger .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-small .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips {
    height: $ddl-bigger-small-filled-chip-height;
  }

  .e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
    height: $ddl-bigger-filled-chip-height;
  }

  .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-bigger .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
    height: $ddl-bigger-filled-not-chip-height;
  }

  .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
    height: $ddl-bigger-small-filled-input-chip-height;
  }

  .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-bigger.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
    margin: $ddl-bgr-small-filled-wrapper-chip-margin;
    padding: $ddl-bgr-small-filled-wrapper-chip-padding;
  }

  .e-rtl.e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-rtl.e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger.e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger.e-small .e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger .e-small.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips,
  .e-rtl.e-small .e-bigger.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips {
    margin: $ddl-rtl-bgr-small-filled-chip-margin;
    padding: $ddl-rtl-bgr-small-filled-chip-padding;
  }

  .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips {
    padding-left: $ddl-small-bgr-filled-float-chip-padding-left;
  }

  .e-small.e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-small .e-filled:not(.e-bigger).e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-bigger.e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-bigger.e-small .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-bigger .e-small.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-small .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
      width: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
    }
  }

  .e-bigger.e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger.e-small .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger .e-small.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-small .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent {
    font-size: $ddl-bgr-small-filled-wrapper-chip-font-size;
    padding: $ddl-bgr-small-filled-wrapper-chip-padding;
  }

  .e-bigger.e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger.e-small .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger .e-small.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-small .e-bigger.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
    font-size: $ddl-bigger-small-filled-float-wrapper-chip-font-size;
    padding: $ddl-bigger-small-filled-float-wrapper-chip-padding;
  }

  .e-rtl.e-bigger.e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-rtl.e-bigger.e-small .e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-rtl.e-bigger .e-small.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-rtl.e-small .e-bigger.e-filled.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
    padding: $ddl-rtl-bigger-small-wrapper-chips-padding;
  }

  .e-bigger.e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger .e-filled.e-float-input.e-multiselect .e-multi-select-wrapper .e-chips > .e-chipcontent {
    font-size: $ddl-bgr-filled-float-wrapper-chip-font-size;
  }

  .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent,
  .e-bigger .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips > .e-chipcontent {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multiselect-filled-chip-clear-icon-size;
    }
  }

  .e-rtl.e-bigger.e-filled .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger .e-filled .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-rtl.e-bigger .e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger.e-filled .e-multi-select-wrapper .e-chips,
  .e-bigger .e-filled .e-multi-select-wrapper .e-chips {
    padding: $ddl-bigger-filled-wrapper-chip-padding;
  }

  .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips,
  .e-bigger .e-filled.e-float-input .e-multi-select-wrapper .e-chips {
    padding-right: $ddl-bigger-filled-float-wrapper-chip-padding-right;
  }

  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $ddl-multiselect-skin-name == 'bootstrap4' or $ddl-multiselect-skin-name == 'bootstrap5' or $ddl-multiselect-skin-name == 'bootstrap5.3' or $ddl-multiselect-skin-name == 'FluentUI' {
      font-size: $ddl-bigger-chip-close-font;
    }
  }

  .e-bigger.e-small .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $ddl-multiselect-skin-name == 'bootstrap4' {
      left: $ddl-chip-close-bigger-left;
      top: $ddl-chip-close-bigger-top;
    }
    font-size: $ddl-bigger-small-chip-close-font;
  }

  .e-bigger.e-small .e-multi-select-wrapper .e-chips {
    height: $ddl-bigger-small-chip-height;
  }

  .e-bigger.e-small .e-multi-select-wrapper .e-chips > .e-chipcontent {
    font-size: $ddl-chip-bigger-small-font-size;
  }

  .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
    left: $ddl-chip-close-hooker-small-bigger-left;
  }

  .e-bigger .e-multi-select-wrapper .e-chips {
    height: $ddl-chip-mobile-height;
  }

  .e-bigger .e-multiselect.e-input-group .e-ddl-icon::before {
    @if $skin-name == 'bootstrap4' {
      font-size: 10px;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $skin-name == 'bootstrap4' {
      font-size: 18px;
      top: $ddl-bigger-close-top;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger.e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $skin-name == 'bootstrap4' {
      top: 5px;
    }
  }

  .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {
    @if $skin-name == 'bootstrap4' {
      top: 4px;
    }
  }

  .e-small.e-bigger .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
    @if $skin-name == 'bootstrap4' {
      top: 5px;
    }
  }

  .e-bigger .e-multi-select-wrapper .e-close-hooker::before {
    @if $skin-name == 'bootstrap4' {
      top: 11px;
    }
  }

  .e-bigger .e-multi-select-wrapper.e-down-icon .e-close-hooker::before {
    @if $skin-name == 'bootstrap4' {
      top: 11px;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $multi-bgr-small-close-height;
      margin-top: $multi-bgr-small-close-margin-top;
      right: $multi-bgr-small-close-right;
      top: $multi-full-width;
      width: $multi-bgr-small-close-width;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      right: $ddl-multi-select-bgr-small-down-icon-right;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' {
      height: 54px;
      margin-top: -55px;
      right: 16px;
      top: $multi-full-width;
      width: 20px;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      right: $bigger-multi-select-mat-right;
    }
  }

  .e-rtl.e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl.e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-small .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-small .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger.e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger.e-small .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger.e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-rtl.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger .e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger .e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl.e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl .e-small.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl.e-small .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl .e-small .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-small .e-rtl .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-small .e-rtl.e-bigger.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      left: $multi-bgr-small-rtl-filled-left;
      right: $multi-auto-width;
    }
  }

  .e-rtl.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl.e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl .e-multiselect.e-outline .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl.e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl .e-multiselect.e-filled .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      left: $bigger-multi-select-mat-right;
      right: $multi-auto-width;
    }
  }

  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      content: '\e208';
      font-size: $multi-bigger-close-hooker-font-size;
      height: $multi-bigger-close-hooker-height;
      left: $multi-zero-width;
      margin-top: $multi-bigger-close-hooker-margin-top;
      top: $multi-half-width;
    }
  }

  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      content: '\e208';
      font-size: $multi-bigger-small-close-hooker-font-size;
      height: $multi-bigger-small-close-hooker-height;
      left: $multi-zero-width;
      margin-top: $multi-bigger-small-close-hooker-margin-top;
      top: $multi-half-width;
    }
  }

  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $multi-bgr-filled-delim-value-font-size;
    }
  }

  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $bigger-small-multi-filled-float-font-size;
    }
  }

  .e-multiselect.e-input-group.e-outline.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-multiselect.e-input-group.e-outline .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-multiselect.e-input-group.e-outline.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin: $multiselect-bgr-ddl-icon-margin;
    }
  }

  .e-multiselect.e-input-group.e-outline.e-small.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger.e-small .e-multiselect.e-input-group.e-outline .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-small.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small.e-bigger .e-multiselect.e-input-group.e-outline.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-multiselect.e-input-group.e-outline.e-small .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-small .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small .e-multiselect.e-input-group.e-outline.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin: $multiselect-bgr-small-ddl-icon-margin;
    }
  }

  .e-rtl.e-multiselect.e-input-group.e-outline.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-rtl.e-multiselect.e-input-group.e-outline .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-multiselect.e-input-group.e-outline.e-control-wrapper.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-rtl.e-multiselect.e-input-group.e-outline.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl .e-multiselect.e-input-group.e-outline.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger.e-rtl .e-multiselect.e-input-group.e-outline .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger.e-rtl .e-multiselect.e-input-group.e-outline.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin: $multiselect-rtl-bgr-ddl-icon-margin;
    }
  }

  .e-rtl.e-multiselect.e-input-group.e-outline.e-small.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger.e-small .e-rtl.e-multiselect.e-input-group.e-outline .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-multiselect.e-input-group.e-outline.e-control-wrapper.e-small.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small.e-bigger .e-rtl.e-multiselect.e-input-group.e-outline.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-rtl.e-multiselect.e-input-group.e-outline.e-small .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-rtl.e-multiselect.e-input-group.e-outline.e-control-wrapper.e-small .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small .e-rtl.e-multiselect.e-input-group.e-outline.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small .e-rtl.e-multiselect.e-input-group.e-outline.e-control-wrapper.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl .e-multiselect.e-input-group.e-outline.e-small.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-bigger.e-small .e-multiselect.e-input-group.e-outline .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-small.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-small.e-bigger .e-multiselect.e-input-group.e-outline.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-bigger .e-multiselect.e-input-group.e-outline.e-small .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-bigger .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-small .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-small .e-multiselect.e-input-group.e-outline.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-rtl.e-small .e-multiselect.e-input-group.e-outline.e-control-wrapper.e-bigger .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin: $multiselect-rtl-bgr-small-ddl-icon-margin;
    }
  }

  .e-bigger.e-small.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $multi-mat-bgr-small-close-hooker-height;
      margin-top: $multi-mat-bgr-small-close-hooker-margin-top;
      right: $multi-mat-bgr-small-close-hooker-right;
      width: $multi-mat-bgr-small-close-hooker-width;
    }
  }

  .e-bigger.e-small.e-filled.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-filled.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-filled.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-filled.e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $multi-mat-bgr-small-close-hooker-height;
      margin-top: $multi-mat-bgr-small-filled-close-hooker-margin-top;
      right: $multi-mat-bgr-small-filled-close-hooker-right;
      width: $multi-mat-bgr-small-close-hooker-width;
    }
  }

  .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small.e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin-top: $multi-mat-bgr-small-float-input-margin-top;
    }
  }

  .e-bigger.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $multi-mat-bgr-filled-close-hooker-height;
      width: $multi-mat-bgr-filled-close-hooker-width;
    }
  }

  .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin-top: $ddl-multi-mat-bgr-float-close-margin-top;
    }
  }

  .e-bigger.e-small.e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-filled.e-float-input.e-multiselect .e-down-icon .e-chips-close.e-close-hooker,
  .e-bigger.e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-small.e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-small .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin-top: $multi-ddl-bgr-small-close-icon-margin-top;
      right: $multi-ddl-bgr-small-close-icon-right;
    }
  }

  .e-bigger.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-filled.e-multiselect .e-down-icon .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin-top: $ddl-multi-filled-icon-close-margin-top;
    }
  }

  .e-bigger.e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-bigger .e-filled.e-multiselect.e-float-input .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-multiselect-filled-chip-clear-icon-size;
      width: $ddl-multiselect-filled-chip-clear-icon-size;
    }
  }

  .e-bigger.e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close,
  .e-bigger .e-filled.e-multiselect:not(.e-float-input) .e-multi-select-wrapper .e-chips:not(.e-mob-chip) .e-chips-close {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-multi-chips-height;
      width: $ddl-multi-chips-width;
    }
  }

  .e-bigger.e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger.e-small .e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger .e-small.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-small.e-bigger.e-multiselect.e-filled.e-float-input .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
      height: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
      width: $ddl-multiselect-filled-float-input-chip-clear-icon-size;
    }
  }

  .e-bigger.e-filled.e-float-input .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger .e-filled.e-float-input .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger.e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger.e-small .e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-bigger .e-small.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips .e-chips-close::before,
  .e-small .e-bigger.e-multiselect.e-filled:not(.e-float-input) .e-multi-select-wrapper .e-chips .e-chips-close::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multiselect-filled-chip-clear-icon-size;
      height: $ddl-multiselect-filled-chip-clear-icon-size;
      width: $ddl-multiselect-filled-chip-clear-icon-size;
    }
  }

  .e-bigger.e-small.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
  .e-bigger.e-small .e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
  .e-bigger .e-small.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
  .e-small .e-bigger.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before {
    @if $ddl-multiselect-skin-name == 'material-dark' {
      content: '\e208';
      font-size: 16px;
      height: 16px;
      padding: 0;
      text-align: center;
      vertical-align: middle;
      width: 16px;
    }
  }

  .e-bigger.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before,
  .e-bigger .e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multi-mat-filled-before-font-size;
      height: $ddl-multi-mat-filled-before-height;
      width: $ddl-multi-mat-filled-before-width;
    }
  }

  .e-bigger.e-small.e-rtl.e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger.e-small .e-rtl .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      left: $ddl-mat-bigger-rtl-close-left;
      right: $multi-auto-width;
    }
  }

  .e-bigger.e-rtl.e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl .e-bigger.e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-bigger .e-rtl.e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker,
  .e-rtl.e-bigger .e-multiselect.e-filled .e-multi-select-wrapper .e-chips-close.e-close-hooker {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      left: $ddl-mat-bigger-rtl-close-hooker-left;
      right: $multi-auto-width;
    }
  }

  .e-bigger.e-multiselect.e-input-group.e-filled .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $multi-mat-bgr-filled-close-hooker-height;
      margin: $ddl-multi-select-icon-margin;
      padding: $ddl-zero-margin-padding;
      width: $multi-mat-bgr-filled-close-hooker-width;
    }
  }

  .e-bigger.e-multiselect.e-input-group.e-filled.e-float-input .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-multiselect.e-filled.e-input-group.e-control-wrapper.e-float-input .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      margin: $ddl-zero-margin-padding;
    }
  }

  .e-bigger.e-small.e-multiselect.e-input-group.e-float-input.e-filled .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger.e-small .e-multiselect.e-input-group.e-float-input.e-filled .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-small.e-multiselect.e-input-group.e-float-input.e-filled .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small .e-bigger.e-multiselect.e-input-group.e-float-input.e-filled .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $ddl-multi-mat-filled-before-height;
      margin: $mat-multi-bgr-small-margin;
      padding: $ddl-zero-margin-padding;
      width: $ddl-multi-mat-filled-before-width;
    }
  }

  .e-bigger.e-multiselect.e-input-group.e-filled .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon::before,
  .e-bigger .e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $ddl-multi-mat-filled-before-font-size;
      height: $ddl-multi-mat-filled-before-height;
      width: $ddl-multi-mat-filled-before-width;
    }
  }

  .e-bigger.e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon::before,
  .e-bigger .e-small .e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon::before,
  .e-small.e-bigger.e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon::before,
  .e-small .e-bigger.e-multiselect.e-filled.e-input-group.e-control-wrapper .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      font-size: $multi-bigger-small-close-hooker-font-size;
      height: $multi-bigger-small-close-hooker-height;
      width: $multi-mat-bgr-small-close-hooker-right;
    }
  }

  .e-bigger.e-small.e-multiselect.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-bigger .e-small .e-multiselect.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small.e-bigger.e-multiselect.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon,
  .e-small .e-bigger.e-multiselect.e-filled.e-input-group.e-control-wrapper:not(.e-float-input) .e-multi-select-wrapper .e-input-group-icon.e-ddl-icon {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      height: $multi-mat-bgr-filled-close-hooker-height;
      margin: $multi-mat-bigger-small-filled-ddl-icon-margin;
      padding: $multi-zero-width;
      width: $multi-mat-bgr-filled-close-hooker-width;
    }
  }

  .e-small.e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before,
  .e-small.e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before,
  .e-small .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before,
  .e-bigger.e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before,
  .e-bigger.e-small .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before,
  .e-bigger .e-small.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before,
  .e-bigger.e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before,
  .e-bigger .e-multiselect.e-outline .e-multi-select-wrapper .e-close-hooker.e-ddl-disable-icon::before {
    @if $ddl-multiselect-skin-name == 'material' or $ddl-multiselect-skin-name == 'material-dark' or $ddl-multiselect-skin-name == 'Material3' {
      content: '';
    }
  }

  @if $skin-name == 'bootstrap-dark' or $skin-name == 'tailwind' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'fluent2'{
    .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
      height: $ddl-chip-hooker-square;
      width: $ddl-chip-hooker-square;
    }
  }
  @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' {
    .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
      margin-top: -3.2em;
    }
  }
  @if $skin-name == 'bootstrap4' {
    .e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
    .e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
      font-size: 14px;
    }
    .e-small.e-bigger .e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before,
    .e-small.e-bigger.e-input-group.e-multiselect.e-control-wrapper .e-input-group-icon.e-ddl-icon::before {
      font-size: 12px;
    }
    .e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
      font-size: 14px;
    }

    .e-bigger .e-multi-select-wrapper .e-chips-close {
      height: $ddl-bigger-chip-close-square;
      width: $ddl-bigger-chip-close-width;
    }
    .e-bigger .e-ddl.e-popup .e-filter-parent .e-clear-icon {
      display: flex;
    }
    .e-small.e-bigger .e-multi-select-wrapper .e-chips {
      margin: 2px 4px 2px 0;
    }
    .e-bigger .e-multiselect .e-multi-select-wrapper .e-chips-close.e-close-hooker {
      height: $multiselect-closer-bigger-height;
      margin-top: $multiselect-closer--bigger-margin-top;
      right: $multiselect-closer-bigger-width;
    }

    .e-bigger .e-multiselect .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
    .e-bigger.e-multiselect .e-multi-select-wrapper.e-down-icon .e-chips-close.e-close-hooker,
    .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
      right: $multiselect-dropicon-closer-bigger-width;
    }

    .e-bigger .e-multiselect.e-input-group.e-control-container .e-multi-select-wrapper .e-clear-icon {
      height: $multiselect-closer-bigger-height;
      margin-top: $ddl-closer-margin-top-bigger;
    }
  }
  @if $skin-name == 'fabric-dark' or $skin-name == 'fabric'{
    .e-small.e-bigger .e-multi-select-wrapper .e-chips {
      padding: 0;
    }

    .e-small.e-bigger .e-multi-select-wrapper .e-chips > .e-chipcontent {
      padding: 0 8px;
    }
  }
  @if $skin-name == 'FluentUI' {
    .e-bigger .e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon,
    .e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper.e-down-icon .e-clear-icon {
      margin-top: -1.6em;
    }
  }
  @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
    #{&}.e-popup {
      #{if(&, '&', '*')}.e-multi-select-list-wrapper {
        #{if(&, '&', '*')}.e-ddl,
        .e-bigger #{if(&, '&', '*')}.e-ddl {
          #{if(&, '&', '*')}.e-checkbox .e-filter-parent .e-clear-icon {
            padding-left: 0;
          }
        }
      }
    }
  }
}

//default
$listbox-font-family: $font-family !default;
$listbox-text-color: rgba($grey-dark-font, 1) !default;
$listbox-text-disabled: $grey-light-font !default;
$listbox-icon-color: $grey-dark-font !default;
$listbox-icon-disabled: rgba($grey-dark-font, .5) !default;
$listbox-icon-margin-right: 10px !default;
$listbox-icon-back-margin: -2px !default;
$listbox-rtl-icon-back-margin: -1px !default;
$listbox-icon-line-height: 34px !default;
$listbox-icon-collapsible: '\e943' !default;
$listbox-icon-collapsible-rtl: '\e981' !default;
$listbox-icon-back-rtl: '\e85f' !default;
$listbox-back-icon: '\e94b' !default;
$listbox-background: $grey-base !default;
$listbox-line-color: rgba($grey-base, .1) !default;
$listbox-item-hover-bg: $grey !default;
$listbox-item-height: 40px !default;
$listbox-item-line-height: 1 !default;
$listbox-item-padding: 13px 16px !default;
$listbox-bigger-item-padding: 12px 16px !default;
$checkmark-bgcolor: $grey-base !default;
$checkmark-border-color: $grey-dark-font !default;
$checkmark-color: $grey-dark-font !default;
$listbox-border-bottom: 1px !default;
$listbox-border-top: 0 !default;
$listbox-border-left: 0 !default;
$listbox-border-right: 0 !default;
$listbox-hover-border-color: transparent !default;
$listbox-border-bottom-color: rgba($grey-44, 1) !default;
$listbox-border-top-color: transparent !default;
$listbox-border-right-color: transparent !default;
$listbox-border-left-color: transparent !default;
$listbox-group-first-border-bottom: 1px !default;
$listbox-group-border-top: 0 !default;
$listbox-group-border-bottom: 1px !default;
$listbox-text-hover-color: rgba($grey-light-font, .87) !default;
$listbox-item-active-bg: $grey-44 !default;
$listbox-text-active-color: rgba($grey-light-font, .87) !default;
$listbox-header-text-color: rgba($grey-light-font, .95) !default;
$listbox-header-text-disabled: $grey-light-font !default;
$listbox-header-text-padding: 0 20px !default;
$listbox-header-bg: $grey-white !default;
$listbox-header-icon-color: $grey-light-font !default;
$listbox-header-icon-disabled: $grey-light-font !default;
$listbox-header-border: $grey-44 !default;
$listbox-header-font-size: 14px !default;
$listbox-header-height: 40px !default;
$listbox-header-font-weight: bold !default;
$listbox-header-line-height: 1px !default;
$listbox-header-padding-bottom: 4px !default;
$listbox-groupheader-text-color: color.adjust($brand-primary, $lightness: 15%) !default;
$listbox-groupheader-bg: $grey-base !default;
$listbox-groupheader-border: $grey-44 !default;
$listbox-groupheader-icon: $grey-dark-font !default;
$listbox-groupheader-item-height: 40px !default;
$listbox-groupheader-item-line-height: 36px !default;
$listbox-groupheader-font-size: 14px !default;
$listbox-border-size: 0 !default;
$listbox-font-size: 14px !default;
$listbox-back-padding-right: 10px !default;
$listbox-touch-item-height: 48px !default;
$listbox-touch-item-line-height: 1.6 !default;
$listbox-touch-item-font-size: 15px !default;
$listbox-touch-groupheader-height: 48px !default;
$listbox-touch-groupheader-line-height: 45px !default;
$listbox-touch-header-height: 48px !default;
$listbox-touch-header-font-weight: bold !default;
$listbox-touch-back-icon-padding: 2px !default;
$listbox-touch-header-font-size: 15px !default;
$listbox-touch-header-line-height: 6px !default;
$listbox-touch-header-icon-margin-top: 2px !default;
$listbox-checkbox-left-margin: -4px 10px 0 0 !default;
$listbox-checkbox-right-margin: -4px 0 0 10px !default;
$listbox-rtl-checkbox-left-margin: -4px 0 0 10px !default;
$listbox-rtl-checkbox-right-margin: -4px 10px 0 0 !default;

$listbox-bigger-wrapper-padding: 12px !default;
$listbox-zero-margin-padding: 0 !default;
$listbox-input-grp-padding: 4px 8px !default;
$listbox-input-focus-padding: 4px 4px 4px 8px !default;
$listbox-tool-padding: 8px !default;
$listbox-template-multiline-header-font-weight: 500 !default;

//ListView In-built template variables
$listbox-template-padding: .7142em 1.0714em !default;
$listbox-template-avatar-padding-right: 1.0714em !default;
$listbox-template-avatar-padding-left: 4.6428em !default;
$listbox-template-avatar-rightposition-padding-right: 4.6428em !default;
$listbox-template-avatar-rightposition-padding-left: 1.0714em !default;
$listbox-template-avatar-size: 2.8571em !default;
$listbox-template-avatar-top: .7142em !default;
$listbox-template-avatar-left: 1.0667em !default;
$listbox-template-avatar-rightposition-right: 1.0667em !default;
$listbox-template-badge-height: 1.333em !default;
$listbox-template-badge-width: 2em !default;
$listbox-template-badge-line-height: 1.433em !default;
$listbox-template-badge-font-size: 15px !default;
$listbox-template-badge-right: 1em !default;
$listbox-template-avatar-badge-padding-right: 3.9285em !default;
$listbox-template-avatar-badge-padding-left: 4.6428em !default;
$listbox-template-badgewithoutavatar-padding-right: 3.9285em !default;
$listbox-template-badgewithoutavatar-padding-left: 1.0714em !default;
$listbox-template-item-padding: .83em 0 !default;
$listbox-template-multiline-header-color: $grey-light-font !default;
$listbox-template-multiline-content-color: $grey-light !default;
$listbox-template-multiline-header-padding: .038em 0 !default;
$listbox-template-multiline-content-padding: .038em 0 !default;
$listbox-template-multiline-header-font-size: 18px !default;
$listbox-template-multiline-padding: .7142em 1.0714em !default;
$listbox-template-multiline-content-font-size: 14px !default;
$listbox-template-multiline-avatar-top: .7142em !default;

$listbox-border-color: $grey-88;
$badge-color: $brand-primary-font !default;
$badge-bgcolor: $brand-primary !default;

$select-all-border-color: $grey-88 !default;

$listbox-filter-small-height: calc(100% - 46px) !default;
$listbox-filter-bigger-small-height: calc(100% - 54px) !default;
$listbox-select-height: calc(100% - 40px) !default;
$listbox-select-bigger-height: calc(100% - 48px) !default;
$listbox-filterselect-height: calc(100% - 40px) !default;
$listbox-filterselect-bigger-height: calc(100% - 48px) !default;
$listbox-mat-filter-height: calc(100% - 51px) !default;
$listbox-mat-filter-bigger-height: calc(100% - 58px) !default;
$listbox-filter-height: calc(100% - 52px) !default;
$listbox-filter-bigger-height: calc(100% - 58px) !default;
$listbox-ej2-filterselect-height: calc(100% - 91.5px) !default;
$listbox-ej2-filterselect-bigger-height: calc(100% - 106px) !default;
$listbox-icon-padding: 0 !default;
$listbox-group-item-font-weight: 600 !default;
$listbox-icon-collapsible-font-size: 12px !default;
$listbox-zero-padding-margin: 0 !default;
$listbox-list-icon-margin-left: 16px !default;
$listbox-list-badge-border-radius: 50% !default;
$listbox-list-badge-font-size: 12px !default;
$listbox-wrapper-right-left-margin: 15px !default;
$listbox-tool-btn-margin-bottom: 10px !default;

$listbox-full-height: 100% !default;
$listbox-list-icon-height: 30px !default;
$listbox-hidden-select-height: 1px !default;
$listbox-placeholder-height: 1px !default;
$list-border-width: 1px !default;
$list-badge-height: 22px !default;
$list-icon-width: auto !default;
$list-icon-height: auto !default;
$list-badge-width: 22px !default;
$listbox-list-icon-width: 30px !default;
$listbox-full-width: 100% !default;
$list-box-header-view-top: 45px !default;
$list-box-half-width: 50% !default;
$checkbox-wrapper-top: 30% !default;
$list-box-list-item-height: 38px !default;
$list-box-list-badge-right: -10px !default;
$list-box-list-badge-top: -10px !default;
$list-text-checkbox-width: calc(100% - 40px);
$list-box-checkbox-icon-width: calc(100% - 90px);
$list-checkbox-right-icon-width: calc(100% - 80px);
$list-box-icon-child-width: calc(100% - 92px);
$list-box-text-width: calc(100% - 60px);
$list-tool-box-wrap-width: calc(100% - 17%);
$list-tool-nrml-box-wrap-width: calc(100% - 14%);
$list-box-full-height: 100% !default;
$list-border: 1px !default;
$zero-border: 0 !default;
$zero-width: 0% !default;

@include export-module('listbox-layout') {
  /* stylelint-disable property-no-vendor-prefix */
  .e-listbox-wrapper,
  .e-listbox-container,
  .e-listboxtool-wrapper {
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    position: relative;
    user-select: none;
    width: $listbox-full-width;

    * {
      box-sizing: border-box;
    }

    @if $skin-name == 'fluent2' or $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
      & {
        border-radius: $list-box-nrml-border-radius;
      }
    }
    @if $skin-name == 'tailwind3' {
      & {
        font-weight: $list-font-weight-medium;
        border-radius: $list-box-nrml-border-radius;
      }
    }

    &.e-listboxtool-container .e-list-wrap {
      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
        width: $list-tool-nrml-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'fabric' {
        width: $list-tool-nrml-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'highcontrast' {
        width: $list-tool-nrml-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    & .e-list-wrap:focus-visible,
    &:focus {
      outline: none;
    }

    &.e-disabled {
      cursor: default;
      pointer-events: none;
    }

    & .e-list-item.e-disabled,
    & .e-list-item.e-disabled .e-list-icon {
      @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
        color: $content-text-color-disabled;
        opacity: 1;
      }
    }

    &:not(.e-list-template) .e-list-nrt {
      text-align: center;
    }

    .e-list-parent {
      height: $listbox-full-height;
      min-height: $listbox-item-height;
    }

    & .e-list-item {
      border-bottom: $listbox-border-size solid;
      outline: none;

      &:focus-visible {
        @if $skin-name == 'fluent2' {
          background-color: $content-bg-color !important; /* stylelint-disable-line declaration-no-important */
          color: $content-text-color !important; /* stylelint-disable-line declaration-no-important */
          box-shadow: $secondary-shadow-focus;
        }
        @if $skin-name == 'tailwind3' {
          background-color: $content-bg-color !important; /* stylelint-disable-line declaration-no-important */
          color: $content-text-color !important; /* stylelint-disable-line declaration-no-important */
          box-shadow: $shadow-focus-ring2;
        }
      }

      &.e-disabled {
        pointer-events: none;
      }
    }

    .e-disable {
      opacity: .7;
    }

    & .e-list-group-item,
    & .e-list-item {
      @if $skin-name == 'fluent2' {
        margin: $list-group-item-margin;
      }
    }

    & .e-list-parent {
      margin: $listbox-zero-margin-padding;
      padding: $listbox-zero-margin-padding;
    }

    & .e-list-header .e-text.header,
    & .e-list-header .e-headertemplate-text.nested-header {
      display: none;
    }

    & .e-icon-back {
      margin-top: $listbox-icon-back-margin;
    }

    & .e-list-header {
      align-items: center;
      border-bottom: $list-border solid;
      display: flex;
      font-weight: $listbox-header-font-weight;
      height: $listbox-header-height;
      padding: $listbox-header-text-padding;
    }

    & .e-has-header > .e-view {
      top: $list-box-header-view-top;
    }

    & .e-but-back {
      cursor: pointer;
      padding-right: $listbox-back-padding-right;
    }

    & .e-list-group-item:first-child {
      @if $theme-name != 'bootstrap5.3' and $theme-name != 'bootstrap5.3-dark' {
        border: $zero-border;
        border-bottom: $listbox-group-first-border-bottom solid $listbox-border-bottom-color;
      }
    }

    & .e-list-group-item {
      border-bottom: $listbox-group-border-bottom solid $listbox-border-bottom-color;
      border-top: $listbox-group-border-top solid;
      font-weight: $listbox-group-item-font-weight;
      height: $listbox-groupheader-item-height;
      line-height: $listbox-groupheader-item-line-height;
      @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
        padding: $list-group-item-padding;
      }
      @else {
        padding: $listbox-item-padding;
      }
    }

    & .e-icon-collapsible {
      cursor: pointer;
      font-size: $listbox-icon-collapsible-font-size;
      position: absolute;
      right: $zero-width;
      top: $list-box-half-width;
      transform: translateY(-50%);
    }

    & .e-text-content {
      height: $listbox-full-height;
      position: relative;
      vertical-align: middle;
    }

    & .e-text-content * {
      display: inline-block;
      vertical-align: middle;
    }

    & .e-text-content.e-checkbox .e-list-text {
      width: $list-text-checkbox-width;
    }

    & .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
      width: $list-box-checkbox-icon-width;
    }

    & .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
      width: $list-checkbox-right-icon-width;
    }

    & .e-list-item.e-checklist.e-has-child {
      .e-text-content.e-checkbox.e-checkbox-right {
        .e-list-icon + .e-list-text {
          width: $list-box-icon-child-width;
        }
      }
    }

    & .e-checkbox .e-checkbox-left {
      margin: $listbox-checkbox-left-margin;
    }

    & .e-checkbox .e-checkbox-right {
      margin: $listbox-checkbox-right-margin;
    }

    & .e-list-text {
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: top;
      white-space: nowrap;
      width: $listbox-full-width;
    }

    & .e-list-icon + .e-list-text,
    & .e-icon-wrapper .e-list-text,
    & .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
      width: $list-box-text-width;
    }

    & .e-list-icon {
      height: $listbox-list-icon-height;
      margin-right: $listbox-icon-margin-right;
      width: $listbox-list-icon-width;
    }

    & .e-content {
      overflow: hidden;
      position: relative;
    }

    & .e-list-header .e-text {
      cursor: pointer;
      text-indent: $listbox-zero-padding-margin;
    }

    & .e-text .e-headertext {
      display: inline-block;
      line-height: $listbox-header-line-height;
    }

    &.e-rtl {
      direction: rtl;

      & .e-list-icon {
        margin-left: $listbox-list-icon-margin-left;
        margin-right: $listbox-zero-padding-margin;
      }

      & .e-icon-collapsible {
        left: $zero-width;
        right: initial;
        top: $list-box-half-width;
        transform: translateY(-50%) rotate(180deg);
      }

      & .e-list-header .e-text {
        cursor: pointer;
      }

      & .e-but-back {
        transform: rotate(180deg);
      }

      & .e-icon-back {
        margin-top: $listbox-rtl-icon-back-margin;
      }

      & .e-checkbox .e-checkbox-left,
      .e-checkbox-wrapper {
        margin: $listbox-rtl-checkbox-left-margin;
        @if $skin-name == 'fluent2' {
          padding: $list-check-box-left-padding;
          vertical-align: top;
        }
      }

      & .e-checkbox .e-checkbox-right {
        margin: $listbox-rtl-checkbox-right-margin;
      }
    }

    .e-checkbox-wrapper {
      margin: $listbox-checkbox-left-margin;
      text-indent: $listbox-zero-padding-margin;
      vertical-align: middle;
      @if $skin-name == 'Material3' {
        position: relative;
      }
      @if $skin-name == 'fluent2' {
        padding: $list-checkbox-wrapper-padding;
        vertical-align: top;

        & .e-frame {
          margin: $listbox-zero-margin-padding !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }

    &.e-checkbox-right {
      .e-checkbox-wrapper {
        position: absolute;
        right: $listbox-zero-padding-margin;
        top: $checkbox-wrapper-top;
      }
    }

    .e-filter-parent {
      @if $skin-name == 'tailwind3' {
        padding: $listbox-filter-parent-padding;
      }
    }

    .e-input-group {
      @if $skin-name != 'tailwind' {
        padding: $listbox-input-grp-padding;
      }
      @if $skin-name == 'tailwind3' {
        padding: $listbox-zero-margin-padding;
      }
    }

    .e-input-focus {
      @if $skin-name != 'tailwind' {
        padding: $listbox-input-focus-padding;
      }
      @if $skin-name == 'tailwind3' {
        padding: $listbox-zero-margin-padding;
      }
    }

    .e-hidden-select {
      height: $listbox-hidden-select-height;
      opacity: 0;
      position: absolute;
      width: $listbox-full-width;
    }

    .e-placeholder {
      background-color: $badge-bgcolor;
      display: block;
      @if $skin-name == 'fluent2' {
        border: $placeholder-border solid $badge-bgcolor;
      }
      height: $listbox-placeholder-height;
    }
  }

  ejs-listbox {
    display: block;
  }

  .e-listbox-wrapper:not(.e-listbox-container),
  .e-listbox-wrapper.e-filter-list .e-list-parent {
    overflow: auto;
  }

  .e-listbox-wrapper.e-sortableclone,
  .e-listbox-container.e-sortableclone,
  .e-listboxtool-wrapper.e-sortableclone {
    border-width: $zero-border;
    overflow: visible;

    .e-list-item {
      list-style-type: none;
      @if $skin-name != 'fluent2' {
        height: $list-box-list-item-height !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-ripple {
      overflow: visible;

      .e-ripple-element {
        display: none;
      }
    }

    .e-list-badge {
      align-items: center;
      background-color: $badge-bgcolor;
      border: $list-border-width solid $badge-color;
      border-radius: $listbox-list-badge-border-radius;
      color: $badge-color;
      display: flex;
      font-size: $listbox-list-badge-font-size;
      height: $list-badge-height;
      justify-content: center;
      position: absolute;
      right: $list-box-list-badge-right;
      top: $list-box-list-badge-top;
      width: $list-badge-width;
    }
  }

  .e-listboxtool-wrapper.e-sortableclone{
    display: block;
  }

  .e-listboxtool-wrapper,
  .e-listboxtool-container {
    cursor: pointer;
    display: flex;

    * {
      box-sizing: border-box;
    }

    &.e-disabled {
      cursor: default;
      pointer-events: none;
    }

    .e-listbox-wrapper,
    .e-list-wrap {
      flex: 1;
    }

    &.e-right {
      .e-listbox-tool {
        margin-left: $listbox-wrapper-right-left-margin;
      }
    }

    &.e-left {
      .e-listbox-tool {
        margin-right: $listbox-wrapper-right-left-margin;
      }
    }

    .e-listbox-tool {
      border: $list-border-width solid $listbox-border-color;
      overflow: auto;
      padding: $listbox-tool-padding;
      @if $skin-name == 'tailwind3' {
        border-radius: $list-box-tool-tail-radius;
        .e-btn-icon {
          font-size: $text-base;
        }
      }
      .e-btn {
        display: list-item;
        list-style-type: none;
        margin-bottom: $listbox-tool-btn-margin-bottom;
      }
    }

    &.e-checkbox-right {
      .e-checkbox-wrapper {
        position: absolute;
        right: $listbox-zero-padding-margin;
        top: $checkbox-wrapper-top;
      }
    }
  }

  .e-rtl.e-listboxtool-wrapper,
  .e-rtl.e-listboxtool-container {
    &.e-right {
      .e-listbox-tool {
        margin-right: $listbox-wrapper-right-left-margin;
      }
    }

    &.e-left {
      .e-listbox-tool {
        margin-left: $listbox-wrapper-right-left-margin;
      }
    }
  }
}

.e-listbox-wrapper,
.e-listbox-container,
.e-listboxtool-wrapper .e-listbox-wrapper {
  &:not(.e-list-template) .e-list-item,
  .e-list-nrt,
  .e-selectall-parent {
    height: $listbox-item-height;
    line-height: $listbox-item-line-height;
    padding: $listbox-item-padding;
    position: relative;
    @if $skin-name == 'fluent2' {
      font-size: $list-box-item-font-size;
      border-radius: $list-box-item-border-radius !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-list-icon {
    display: inline;
    vertical-align: middle;
    width: $list-icon-width;
    height: $list-icon-height;
    padding-bottom: $listbox-icon-padding;
  }
}

@mixin avatar {
  height: $listbox-template-avatar-size;
  left: $listbox-template-avatar-left;
  position: absolute;
  width: $listbox-template-avatar-size;
}

@include export-module('listbox-theme') {
  .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
  .e-small .e-listbox-container.e-filter-list .e-list-parent {
    height: $listbox-filter-small-height !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
    height: $listbox-filterselect-bigger-height !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
    height: $listbox-filter-height !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
    height: $listbox-ej2-filterselect-height !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-listbox-wrapper,
  .e-listbox-container:not(.e-listboxtool-container):not(.e-sortableclone),
  .e-listboxtool-container.e-listbox-container .e-ul {
    border: 1px solid $listbox-border-color;
  }

  .e-listbox-wrapper,
  .e-listbox-container,
  .e-listboxtool-wrapper {
    font-family: $listbox-font-family;
    font-size: $listbox-font-size;
    @if $skin-name == 'tailwind3' {
      .e-filter-parent {
        background: $listbox-groupheader-bg;
        box-shadow: none;
        .e-input-group {
          .e-input-filter {
            color: $placeholder-text-color;
          }
        }
      }
    }
    @at-root {
      & .e-list-header {
        background-color: $listbox-header-bg;
        border-color: $listbox-header-border;
        color: $listbox-header-text-color;
        font-size: $listbox-header-font-size;
      }

      &.e-filter-list .e-list-parent {
        height: $listbox-filter-height;
      }

      &.e-filter-list .e-selectall-parent + .e-list-parent {
        height: $listbox-filterselect-height !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-selectall-parent + .e-list-parent {
        height: $listbox-select-height !important; /* stylelint-disable-line declaration-no-important */
      }

      // & .e-icons {
      //   @if $skin-name != 'bootstrap5' {
      //     color: $listbox-icon-color;
      //   }
      // }

      & .e-list-item {
        background-color: $listbox-background;
        border-bottom: $listbox-border-bottom solid $listbox-border-bottom-color;
        border-left: $listbox-border-left solid $listbox-border-left-color;
        border-right: $listbox-border-right solid $listbox-border-right-color;
        border-top: $listbox-border-top solid $listbox-border-top-color;
        color: $listbox-text-color;
        @if $skin-name == 'tailwind3' {
          overflow: hidden;
          text-overflow: ellipsis;
          vertical-align: middle;
          white-space: nowrap;
        }
      }

      & .e-list-item:hover:not(.e-selected):not(.e-disabled),
      & .e-list-item:hover.e-selected.e-checklist:not(.e-disabled) {
        background-color: $listbox-item-hover-bg;
        border-color: $listbox-hover-border-color;
        color: $listbox-text-hover-color;
      }

      & .e-list-item.e-selected.e-checklist {
        background-color: $listbox-background;
        color: $listbox-text-color;
      }

      & .e-list-item.e-focused,
      & .e-list-item.e-focused.e-selected.e-checklist,
      & .e-list-item.e-selected {
        background-color: $listbox-item-active-bg;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          color: $listbox-text-selected-color;
        }
        @else {
          color: $listbox-text-active-color;
        }
      }

      & .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check,
      & .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
        @if $skin-name != 'fluent2' {
          background-color: $checkmark-bgcolor;
          border-color: $checkmark-border-color;
          color: $checkmark-color;
        }
      }

      & .e-list-group-item {
        background-color: $listbox-groupheader-bg;
        border-color: $listbox-header-border;
        color: $listbox-groupheader-text-color;
        font-size: $listbox-groupheader-font-size;
      }

      & .e-selectall-parent {
        background-color: $listbox-background;
        border-bottom: 1px solid $select-all-border-color;
        color: $listbox-text-color;
      }

      & .e-sortableclone.e-ripple .e-ripple-element {
        background-color: transparent;
      }
    }

    &.e-list-template {
      .e-list-wrapper {
        height: inherit;
        position: relative;

        &:not(.e-list-multi-line) {
          padding: $listbox-template-padding;
        }

        &.e-list-multi-line {
          padding: $listbox-template-multiline-padding;

          .e-list-item-header {
            color: $listbox-template-multiline-header-color;
            display: block;
            font-size: $listbox-template-multiline-header-font-size;
            font-weight: $listbox-template-multiline-header-font-weight;
            margin: $listbox-zero-margin-padding;
            overflow: hidden;
            padding: $listbox-template-multiline-header-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .e-list-content {
            color: $listbox-template-multiline-content-color;
            display: block;
            font-size: $listbox-template-multiline-content-font-size;
            margin: $listbox-zero-margin-padding;
            padding: $listbox-template-multiline-content-padding;
            word-wrap: break-word;
          }

          .e-list-content:not(.e-text-overflow) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        &.e-list-avatar {
          .e-avatar {
            @include avatar;
            left: $listbox-template-avatar-left;
          }
        }

        &.e-list-avatar:not(.e-list-badge) {
          padding-left: $listbox-template-avatar-padding-left;
          padding-right: $listbox-template-avatar-padding-right;
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          padding-left: $listbox-template-avatar-rightposition-padding-left;
          padding-right: $listbox-template-avatar-rightposition-padding-right;

          .e-avatar {
            @include avatar;
            right: $listbox-template-avatar-rightposition-right;
          }
        }

        &.e-list-multi-line.e-list-avatar,
        &.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) {
          .e-avatar {
            top: $listbox-template-multiline-avatar-top;
          }
        }

        &.e-list-badge {
          .e-badge {
            font-size: $listbox-template-badge-font-size;
            height: $listbox-template-badge-height;
            line-height: $listbox-template-badge-line-height;
            padding: $listbox-zero-margin-padding;
            position: absolute;
            right: $listbox-template-badge-right;
            top: 50%;
            transform: translateY(-50%);
            width: $listbox-template-badge-width;
          }
        }

        &.e-list-badge.e-list-avatar {
          padding-left: $listbox-template-avatar-badge-padding-left;
          padding-right: $listbox-template-avatar-badge-padding-right;
        }

        &.e-list-badge:not(.e-list-avatar) {
          padding-left: $listbox-template-badgewithoutavatar-padding-left;
          padding-right: $listbox-template-badgewithoutavatar-padding-right;
        }

        &:not(.e-list-multi-line) {
          .e-list-content {
            display: block;
            margin: $listbox-zero-margin-padding;
            overflow: hidden;
            padding: $listbox-template-item-padding;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .e-list-item {
        &.e-list-item:hover .e-list-item-header,
        &.e-list-item:hover .e-list-content {
          color: $listbox-text-hover-color;
        }

        &.e-selected .e-list-item-header,
        &.e-selected .e-list-content {
          color: $listbox-text-active-color;
        }
      }
    }

    &.e-rtl {
      &.e-list-template .e-list-wrapper {
        &.e-list-avatar {
          .e-avatar {
            left: inherit;
            right: $listbox-template-avatar-left;
          }
        }

        &.e-list-avatar:not(.e-list-badge) {
          padding-left: $listbox-template-avatar-padding-right;
          padding-right: $listbox-template-avatar-padding-left;
        }

        &.e-list-avatar-right:not(.e-list-badge) {
          padding-left: $listbox-template-avatar-rightposition-padding-right;
          padding-right: $listbox-template-avatar-rightposition-padding-left;

          .e-avatar {
            left: $listbox-template-avatar-rightposition-right;
            right: inherit;
          }
        }

        &.e-list-badge {
          .e-badge {
            left: $listbox-template-badge-right;
            right: inherit;
          }
        }

        &.e-list-badge.e-list-avatar {
          padding-left: $listbox-template-avatar-badge-padding-right;
          padding-right: $listbox-template-avatar-badge-padding-left;
        }

        &.e-list-badge:not(.e-list-avatar) {
          padding-left: $listbox-template-badgewithoutavatar-padding-right;
          padding-right: $listbox-template-badgewithoutavatar-padding-left;
        }
      }
    }
  }

  .e-listbox-wrapper.e-sortableclone,
  .e-listbox-container.e-sortableclone {
    @if $skin-name == 'fluent2' or $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
      & .e-list-item {
        background-color: $listbox-dragged-item-bg-color !important; /* stylelint-disable-line declaration-no-important */
        color: $listbox-dragged-item-text-color !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-listbox-container {
    @at-root {
      &.e-filter-list .e-list-parent,
      &.e-filter-list .e-selectall-parent + .e-list-parent,
      & .e-selectall-parent + .e-list-parent {
        height: 100%;
      }

      &.e-filter-list .e-list-wrap {
        height: $listbox-mat-filter-height !important; /* stylelint-disable-line declaration-no-important */
      }

      &.e-filter-list .e-selectall-parent + .e-list-wrap {
        height: $listbox-filterselect-height !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-selectall-parent + .e-list-wrap {
        height: $listbox-select-height !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
}

@include export-module('list-box-bootstrap-dark-icons') {
  .e-listbox-tool .e-moveup::before {
    content: '\e651';
  }

  .e-listbox-tool .e-movedown::before {
    content: '\e652';
  }

  .e-listbox-tool .e-moveto::before {
    content: '\e653';
  }

  .e-listbox-tool .e-movefrom::before {
    content: '\e654';
  }

  .e-listbox-tool .e-moveallto::before {
    content: '\e655';
  }

  .e-listbox-tool .e-moveallfrom::before {
    content: '\e656';
  }
}

@include export-module('listbox-bigger') {
  .e-bigger .e-listbox-wrapper,
  .e-listbox-wrapper.e-bigger,
  .e-bigger .e-listbox-container,
  .e-listbox-container.e-bigger {
    @if ($skin-name == 'bootstrap4') {
      font-size: 16px;
    }
    @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' or $skin-name == 'tailwind3') {
      border-radius: $list-box-bgr-border-radius;
    }

    &.e-listboxtool-container .e-list-wrap {
      @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' {
        width: $list-tool-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' {
        width: $list-tool-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
      }
      @else if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
        width: $list-tool-box-wrap-width !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-list-item {
      border-bottom: $listbox-border-bottom solid $listbox-border-bottom-color;
      border-left: $listbox-border-left solid $listbox-border-left-color;
      border-right: $listbox-border-right solid $listbox-border-right-color;
      border-top: $listbox-border-top solid $listbox-border-top-color;
    }

    &:not(.e-list-template) .e-list-item,
    .e-selectall-parent,
    .e-list-group-item,
    .e-list-header {
      padding: $listbox-bigger-item-padding;
    }

    &:not(.e-list-template) .e-list-item,
    .e-selectall-parent {
      height: $listbox-touch-item-height;
      line-height: $listbox-touch-item-line-height;
      position: relative;
      @if ($skin-name == 'bootstrap4') {
        padding: 12px 20px;
      }
      @if ($theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' or $skin-name == 'tailwind3') {
        font-size: $list-box-bgr-list-item-font-size;
      }
    }

    .e-list-parent {
      min-height: $listbox-touch-item-height;
    }

    .e-text-content {
      font-size: $listbox-touch-item-font-size;
    }

    .e-list-group-item {
      height: $listbox-touch-groupheader-height;
      line-height: $listbox-touch-groupheader-line-height;
      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind3') {
        font-size: $list-item-grup-font-size;
        padding: $list-item-grp-padding;
      }
      @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
        padding: $list-item-grp-padding;
      }
    }

    .e-list-header {
      align-items: center;
      display: flex;
      font-weight: $listbox-touch-header-font-weight;
      height: $listbox-touch-header-height;
      @if ($skin-name == 'bootstrap4') {
        font-size: 20px;
        line-height: 1.2;
        padding: 0 0 0 20px;
      }
    }

    .e-list-header .e-text.header,
    .e-list-header .e-headertemplate-text.nested-header {
      display: none;
    }

    .e-list-header .e-text {
      font-size: $listbox-touch-header-font-size;
    }

    .e-but-back {
      @if ($skin-name == 'bootstrap4') {
        margin-top: -3px;
        padding-right: 12px;
      }
    }

    .e-list-icon {
      @if ($skin-name == 'bootstrap4') {
        margin-right: 12px;
      }
    }

    .e-icon-collapsible {
      @if ($skin-name == 'bootstrap4') {
        font-size: 12px;
      }
    }

    .e-checkbox-wrapper {
      @if ($skin-name == 'bootstrap4') {
        margin: 0 12px 0 0;
      }
    }

    &.e-rtl {
      .e-checkbox-wrapper {
        @if ($skin-name == 'bootstrap4') {
          margin: 0 0 0 12px;
        }
      }
    }
  }

  .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
    height: $listbox-filter-bigger-height !important; /* stylelint-disable-line declaration-no-important */
  }
  .e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
    height: $listbox-mat-filter-bigger-height !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-listbox-container.e-filter-list .e-list-parent,
  .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent,
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent,
  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
    height: $list-box-full-height;
  }

  .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
  .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
    height: $listbox-filterselect-bigger-height !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
  .e-bigger .e-listbox-container .e-selectall-parent + .e-list-wrap {
    height: $listbox-select-bigger-height !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
  .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
    height: $listbox-filter-bigger-small-height !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
    height: $listbox-ej2-filterselect-bigger-height !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-bigger.e-listbox-wrapper,
  .e-bigger.e-listbox-container {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      font-size: $listbox-touch-item-font-size;
    }

    & .e-list-header,
    & .e-list-group-item {
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
        font-size: $listbox-touch-header-font-size;
      }
    }
  }

  @if $skin-name == 'tailwind3' {
    .e-bigger .e-listboxtool-wrapper .e-listbox-tool .e-btn-icon {
      font-size: $text-lg;
    }

    .e-bigger .e-listbox-wrapper .e-filter-parent {
      padding: $listbox-bigger-filter-parent-padding;
    }
  }
}

//default
//undefined
//enddefault

@include export-module('mention-layout') {

  //default
  //undefined
  //enddefault
}

$de-padding-half: 6px;
$de-padding-half-bigger: 8px;
$de-padding-full: 12px;
$de-padding-full-bigger: 16px;
$de-cmt-author-nme-padding-left: 8px;
$de-cmt-author-nme-padding-left-big: $de-cmt-author-nme-padding-left;
$de-cmt-textbox-top-margin: 12px;
$de-cmt-textbox-top-margin-big: $de-cmt-textbox-top-margin;
$de-cmt-sub-container-padding: 8px;
$de-cmt-sub-container-padding-big: $de-cmt-sub-container-padding;
$de-cmt-sub-container-padding-left: 6px;
$de-cmt-sub-container-padding-left-big: $de-cmt-sub-container-padding-left;
$de-cmt-sub-container-hover-padding-left: 7px;
$de-cmt-sub-container-hover-padding-left-big: $de-cmt-sub-container-hover-padding-left;
$de-cmt-avatar-height: 24px;
$de-cmt-avatar-width: 24px;
$de-rp-sub-div-padding: 12px;
$de-rp-sub-div-padding-big: $de-rp-sub-div-padding;
$de-rp-whole-header-padding: 12px;
$de-rp-whole-header-padding-big: $de-rp-whole-header-padding;
$de-rp-enforce-padding: 12px;
$de-rp-enforce-padding-big: $de-rp-enforce-padding;
$de-rp-close-icon-right: -8px;
$de-rp-close-icon-right-bigger: -10px;
$de-rp-close-icon-top-bigger: -10px;
$de-rp-close-icon-right-rtl: 8px;
$de-rp-close-icon-right-bigger-rtl: 10px;
$de-table-row-height-padding: 24px;
$de-table-alignment-icon-width: 54px;
$de-table-alignment-icon-height: 54px;
$de-table-alignment-icon-margin: 2px;
$de-table-dia-align-height: 52px;
$de-table-dia-align-width: 52px;
$de-table-dia-align-icon-height: 46px;
$de-border-dlg-clr-padding-right: 19px;
$de-border-dlg-clr-radius-bottom: 6px;
$de-td-table-border-left: 5px;
$de-border-dlg-preview-padding-left: 76px;
$de-tbl-dlg-align-padding-bottom: 4px;
$de-background: #232323 !default;
$search-result-highlight-bg-color: transparent !default;
$search-result-hightlight-bdr-clr-hvr: $brand-primary !default;
$search-result-item-padding-top: 15px !default;
$search-result-item-padding-bottom: 15px !default;
$search-result-hightlight-bdr-clr: $brand-primary !default;
$search-icon-bdr-clr: #ddd !default;
$search-icon-hvr: #ddd !default;
$spin-down-bdr-clr: #ddd !default;
$spin-down-hvr: #ddd !default;
$spin-up-bdr-clr: #ddd !default;
$spin-up-hvr: #ddd !default;
$de-font-dlg-width-big: max-content;
$de-style-font-size: 13px !default;
$de-dlg-heading-main-header: $grey-dark-font !default;
$de-para-dlg-small-heading-font-size: 14px !default;
$de-para-dlg-heading-font-weight: 400 !default;
$de-para-title-bottom-margin: 10px !default;
$de-font-style-margin: 10px !default;
$de-para-dlg-height: auto !default;
$de-para-dlg-width: 400px !default;
$de-toc-dlg-right-container-left: 1px !default;
$de-toc-dlg-heading-font-size: 14px !default;
$de-toc-dlg-heading-font-weight: 400 !default;
$de-toc-dlg-main-heading-font-weight: 500 !default;
$de-toc-title-bottom-margin: 5px !default;
$de-title-bottom-margin: 10px !default;
$de-toc-dlg-height: 454px !default;
$de-toc-dlg-container-margin: 6px !default;
$de-toc-dlg-width: 550px !default;
$de-toc-sub-container-bottom: 15px !default;
$de-toc-list-view-border-color: #c3c3c3 !default;
$de-toc-reset-button-margin-top: 10px !default;
$de-toc-modify-button-margin-top: 10px !default;
$de-toc-list-view-font-size: 12px !default;
$de-toc-list-view-height: 183px !default;
$de-toc-dlg-sub-margin: 5px 15px 5px 15px !default;
$de-toc-dlg-style-label-left: 42px !default;
$de-toc-dlg-style-label-top: 50px !default;
$de-para-sub-title-bottom-margin: 8px !default;
$de-para-sub-title-top-margin: 8px !default;
$de-para-sub-container-bottom: 15px !default;
$de-hyperlink-dlg-margin-bottom: 8px !default;
$de-hyperlink-dlg-margin-top: 8px !default;
$de-hyperlink-dlg-input-bottom: 7px !default;
$de-hyperlink-dlg-input-width: 230px !default;
$de-hyperlink-dlg-input-height: 32px !default;
$de-font-dlg-header-margin-bottom: 8px !default;
$de-font-dlg-main-header-margin-right: 17px !default;
$e-de-font-dlg-cb-margin-right: 40px !default;
$de-dropdown-margin-right: 20px !default;
$de-op-border-clr: $grey-99 !default;
$de-op-padding-left: 15px !default;
$de-op-padding-top: 22px !default;
$de-op-title-clr: $grey-dark-font !default;
$de-op-header-font-family: 'Helvetica' !default;
$de-op-header-font-weight: 500 !default;
$de-op-header-bottm-margin: 12px !default;
$de-op-header-padding-top: 12px !default;
$de-op-tab-height: 40px !default;
$de-layout-margin-dlg-padding-top: 10px !default;
$de-op-icon-color: $grey-dark-font !default;
$de-op-close-icon-clr: $grey-dark-font !default;
$de-op-close-icon-width: 20px !default;
$de-op-close-button-top: 18px !default;
$search-result-hightlight-bdr-item: #ddd !default;
$de-op-search-txt: $grey-dark-font !default;
$de-cell-margin-dia-common-font: 12px !default;
$de-cell-margin-dia-common-margin-bottom: 8px !default;
$de-cell-margin-dia-common-margin-top: 8px !default;
$de-cell-margin-dia-common-width: 150px !default;
$de-cell-margin-dia-options-font: 14px !default;
$de-border-dlg-border-label-fontsize: 16px !default;
$de-border-dlg-border-label-fontweight: normal !default;
$de-border-dlg-border-preview-div-width: 1px !default;
$de-border-dlg-border-label-paddingbottom: 20px !default;
$de-border-dlg-setting-label-fontsize: 14px !default;
$de-border-dlg-setting-label-paddingbottom: 20px !default;
$de-border-dlg-settinglabels-fontsize: 12px !default;
$de-border-dlg-border-preview-div-opacity: rgba(0, 0, 0, .54) !default;
$de-border-dlg-preview-inside-divs-opacity: .54 !default;
$de-table-align-border-width: 1px !default;
$de-table-align-border-color: #ddd !default;
$de-table-align-height: 60px !default;
$de-table-align-margin-right: 10px !default;
$de-table-align-width: 60px !default;
$de-table-alignment-label-font-size: 12px !default;
$de-table-alignment-label-margin-top: 10px !default;
$de-table-alignment-label-margin-left: 10px !default;
$de-table-separator-line-color: $grey-99 !default;
$de-table-separator-line-height: 1px !default;
$de-table-separator-line-left: 1px !default;
$de-table-separator-line-opacity: .12 !default;
$de-table-separtor-line-top: 59px !default;
$de-table-separtor-line-top-touch: 62px !default;
$de-table-separator-line-width: 100% !default;
$de-table-options-font-size: 14px !default;
$de-table-options-padding-bottom: 10px !default;
$de-table-options-padding-top: 10px !default;
$de-page-setup-dlg-width: 354px !default;
$de-page-setup-dlg-height: 281px !default;
$de-page-setup-ppty-tab-border: 0 !default;
$de-page-setup-sub-container-bottom: 35px !default;
$de-page-setup-sub-container-port-bottom: 20px !default;
$de-page-setup-dlg-left-container-top: 19px !default;
$de-page-setup-dlg-right-container-top: 19px !default;
$de-page-setup-margin-dia-common-font: 12px !default;
$de-page-setup-margin-dia-common-margin-bottom: 8px !default;
$de-page-setup-margin-dia-common-margin-top: 1px !default;
$de-page-setup-common-margin-top: 15px !default;
$de-page-setup-sub-container-height-style: 55px !default;
$de-page-setup-dlg-sub-label-font-size: 13px !default;
$de-page-setup-dlg-sub-label-font-weight: 500 !default;
$de-page-setup-dlg-orientation-prop-margin-top: 13px !default;
$de-page-setup-sub-size-container-height: 73px !default;
$de-page-setup-sub-size-container-bottom: 20px !default;
$de-page-setup-layout-sub-container-height: 60px !default;
$de-page-setup-layout-sub-container-bottom: 20px !default;
$de-page-setup-layout-sub-container-top: 17px !default;
$de-page-setup-checkbox-label-font-size: 12px !default;
$de-page-setup-dlg-layout-container-top: 10px !default;
$de-list-dlg-header-font-weight: normal !default;
$de-list-dlg-header-margin-bottom: 15px !default;
$de-list-dlg-header-margin-top: 15px !default;
$de-tbl-dlg-footer: 23px !default;
$de-row-ht-padding-top: 13px !default;
$de-cell-width-padding-top: 9px !default;
$de-tbl-opt-btn-left: 440px !default;
$de-tbl-opt-btn-top: 285px !default;
$de-list-dlg-subheader-font-weight: normal !default;
$de-list-dlg-subheader-margin-bottom: 10px !default;
$de-list-dlg-subheader-margin-top: 10px !default;
$e-de-list-subdiv-margin-top: 40px !default;
$e-de-list-div-margin-top: 30px !default;
$de-ok-insert-button-margin-right: 8px !default;
$de-options-buttons-left: 339px !default;
$de-op-btn-icon-hover-clr: rgba($grey-base, .5) !default;
$de-tooltip-bg-clr: #1a1a1a !default;
$de-tooltip-shadow: 0 3px 8px 0 rgba(0, 0, 0, .26) !default;
$de-op-btn-icon-bg: transparent !default;
$de-op-btn-icon-border: transparent !default;
$de-op-btn-icon-active-clr: rgba($grey-base, .5) !default;
$de-input-color: #fff !default;
$de-dlg-btn-height: 32px !default;
$de-dlg-header-font-size: 16px !default;
$de-dlg-header-font-weight: 400 !default;
$de-dlg-header-margin-top: 4px !default;
$de-dlg-footer-margin-top: 8px !default;
$de-dlg-footer-padding-top: 7px !default;
$de-dlg-header-content-padding: 15px 15px 5px 15px !default;
$de-dlg-content-padding: 20px 15px 5px 15px !default;
$de-dlg-footer-padding-right: 15px !default;
$de-dlg-footer-content-padding-top: 1px !default;
$de-dlg-close-font-size: 12px !default;
$e-de-dlg-border-radius: 1px !default;
$de-dlg-close-icon-left: -1px !default;
$de-dlg-clr-pkr-top: 160px !default;
$de-op-result-container-margin-top: 7px !default;
$de-op-bg-color: $grey-base !default;
$de-op-tab-header-padding: 25px !default;
$de-op-tab-header-margin-bottom: 0 !default;
$de-op-tab-header-margin-top: 20px !default;
$de-font-color-border: 1px $grey-cc !default;
$de-font-color-border-radius: 4px !default;
$de-icon-table-row-above-top: 10px !default;
$de-icon-table-row-below-top: 49px !default;
$de-icon-table-column-left-top: 89px !default;
$de-icon-table-column-right-top: 127px !default;
$de-icon-table-delete-top: 10px !default;
$de-icon-table-row-delete-top: 49px !default;
$de-icon-table-column-delete-top: 89px !default;
$de-bullet-list-hover-color: rgba(0, 0, 0, .12) !default;
$de-number-list-hover-color: rgba(0, 0, 0, .12) !default;
$de-multilevel-list-hover-color: rgba(0, 0, 0, .12) !default;
$de-list-dialog-hover-color: rgba(0, 0, 0, .12) !default;
$de-cell-options-left: 336px !default;
$de-cell-options-top: 272px !default;
$de-font-color-margin-bottom: 5px !default;
$de-font-color-margin-top: 15px !default;
$de-font-dlg-effect-margin-left: 15px !default;
$de-font-dlg-margin-right: 10px !default;
$de-font-dlg-color-margin-right: 10px !default;
$de-font-dlg-color-margin-top: 5px !default;
$de-font-content-checkbox-left: 42px !default;
$de-font-content-checkbox-left-bg: 64px !default;
$de-font-content-checkbox-right: 61px !default;
$de-font-content-checkbox-right-bg: 64px !default;
$de-font-checkbox-left: 58px !default;
$de-font-dlg-margin-top: 12px !default;
$de-table-container-margin-top: 15px !default;
$de-table-header-padding-top: 0 !default;
$de-table-subheader-padding-top: 16px !default;
$de-cell-subheader-top: 57px !default;
$de-cell-margin-header-left: -26px !default;
$de-cell-margin-header-top: 274px !default;
$de-tbl-margin-sub-header: 10px !default;
$de-tbl-btn-separator: 60% !default;
$de-op-container-messagediv-color: $grey-dark-font !default;
$de-save-dlg-format-type-padding: 1px !default;
$de-op-search-tab-content-margin-top: 12px !default;
$de-op-search-text-box-container-width: 275px !default;
$de-font-dlg-height: 245px !default;
$de-font-dlg-width: max-content !default;
$de-hyper-link-height: auto !default;
$de-hyper-link-width: 250px !default;
$de-insert-table-height: 139px !default;
$de-insert-table-width: 247px !default;
$de-insert-footnote-height: 139px !default;
$de-insert-footnote-width: 247px !default;
$de-insert-spellchecker-height: 350px !default;
$de-insert-spellchecker-width: 513px !default;
$de-insert-big-spellchecker-width: 600px !default;
$de-spellcheck-listview-height: 122px !default;
$de-spellcheck-listview-border-color: #e4e4e4;
$de-spellcheck-container-height: 140px !default;
$de-spellcheck-container-gap: 25px !default;
$de-spellcheck-list-width: 100% !default;
$de-spellcheck-btn-container-width: 100% !default;
$de-spellcheck-btn-width: 100% !default;
$de-insert-table-title-bottom-margin: 8px !default;
$de-insert-table-title-top-margin: 8px !default;
$de-insert-table-dlg-input-bottom: 15px !default;
$de-list-dlg-height: 450px !default;
$de-list-dlg-width: 400px !default;
$de-save-dlg-height: 135px !default;
$de-save-dlg-width: 230px !default;
$de-table-ppty-dlg-height: 367px !default;
$de-table-ppty-dlg-width: 410px !default;
$de-table-border-shading-dlg-height: 438px !default;
$de-table-border-shading-dlg-width: 460px !default;
$de-table-cell-margin-dlg-height: 222px !default;
$de-table-cell-margin-dlg-width: 380px !default;
$de-table-options-dlg-height: 248px !default;
$de-table-options-dlg-width: 380px !default;
$de-table-border-none-top: 25px !default;
$de-table-border-box-top: 95px !default;
$de-table-border-all-top: 165px !default;
$de-table-border-custom-top: 235px !default;
$de-table-shading-preview-top: 385px !default;
$de-checkbox-wrapper-color: rgba(0, 0, 0, .87) !default;
$de-checkbox-height: 15px !default;
$de-checkbox-line-height: 11px !default;
$de-checkbox-width: 15px !default;
$de-op-dlg-footer-margin-top: 15px !default;
$de-op-search-input-width: 178px !default;
$de-op-replacewith-width: 98% !default;
$de-table-ppty-tab-border: 0 !default;
$de-list-info-btn-padding: 3px 0 0 0 !default;
$bookmark-listview-border-color: #c8c8c8 !default;
$de-table-border-dlg-alignments-left: 48% !default;
$de-table-border-preview-top: 59% !default;
$de-table-border-dlg-alignments-transform: translate(-50%, -50%) !default;
$de-style-dialog-height: 352px !default;
$de-style-dialog-width: 443px !default;
$de-style-heading-font-size: 14px !default;
$de-style-heading-font-weight: 400 !default;
$de-style-dialog-style-ppties-bottom-margin: 15px !default;
$de-style-dialog-style-formatting-bottom-margin: 15px !default;
$de-style-paragraph-width: 182px !default;
$de-style-name-input-top: 109px !default;
$de-style-type-div-top: 155px !default;
$de-style-based-on-div-top: 202px !default;
$de-style-paragraph-div-top: 249px !default;
$de-style-font-margin-right: 20px !default;
$de-style-font-margin-left: 20px !default;
$de-style-para-margin-right: 20px !default;
$de-style-para-margin-left: 20px !default;
$de-style-list-margin-left: 20px !default;
$de-style-template-top: 410px !default;
$de-style-dialog-style-left-div-right-margin: 20px !default;
$de-style-dialog-option-div-bottom-margin: 15px !default;
$de-style-dialog-style-name-type-div-bottom-margin: 15px !default;
$de-style-dialog-style-based-para-div-bottom-margin: 15px !default;
$de-style-dialog-label-bottom-margin: 8px !default;
$de-style-btn-active-bg-border-color: #c8c8c8 !default;
$de-style-btn-active-text-color: #000 !default;
$de-style-toggle-btn-color: '' !default;
$e-de-style-input-text-height: 32px !default;
$de-font-checkbox-label-font-size: 12px !default;
$de-op-icon-font-size: 12px !default;
$de-op-close-icon-size: 12px !default;
$de-op-close-icon-margin-left: -4px !default;
$de-table-align-hover-color: $brand-primary !default;
$de-table-tab-hover-color: $de-table-align-hover-color !default;
$de-cell-align-hover-color: $de-table-align-hover-color !default;
$de-table-align-active-color: $brand-primary !default;
$de-table-setting-hover-color: $de-table-align-hover-color !default;
$de-table-preview-hover-color: $de-table-setting-hover-color !default;
$de-table-setting-color: $de-table-align-active-color !default;
$de-table-preview-setting-color: $de-table-setting-color !default;
$de-table-alignment-font-size: 46px !default;
$de-table-alignment-top: 126px !default;
$de-tablecell-alignment-font-size: 51px !default;
$de-border-dlg-border-setting-inside-border: $de-table-align-border-color !default;
$de-border-dlg-border-setting-divs-color: $de-table-align-border-color !default;
$de-border-dlg-border-preview-divs-color: $de-table-align-border-color !default;
$de-border-none-setting-font-size: 38px !default;
$de-border-setting-font-size: 34px !default;
$de-td-table-border-top: 2px !default;
$de-hyperlink-bookmark-check-margin-top: 20px !default;
$de-table-ppty-dlg-measure-div-margin-left: 20px !default;
$de-table-ppty-dlg-measure-div-margin-top: 6px !default;
$de-table-ppty-dlg-left-indent-container-margin-right: 110px !default;
$de-tbl-dlg-border-btn-margin-right: 120px !default;
$de-tbl-dlg-border-btn-margin-top: 20px !default;
$de-tbl-dlg-border-btn-margin-bottom: 20px !default;
$de-table-subheader-div-margin-top: -40px !default;
$de-table-subheader-div-margin-right: 140px !default;
$de-table-ppty-dlg-row-height-label-margin-top: -62px !default;
$de-table-ppty-dlg-row-height-label-margin-right: 184px !default;
$de-table-ppty-dlg-preferred-width-margin-top: 6px !default;
$de-table-ppty-dlg-preferred-width-margin-left: 20px !default;
$styles-listview-border-color: #808080 !default;
$de-table-ppty-options-break-margin-bottom: 7px !default;
$de-table-ppty-dlg-table-header-padding-left: 15px !default;
$de-table-ppty-dlg-table-header-padding: 12px !default;
$de-table-ppty-dlg-cell-tab-measure-label-margin-right: 190px !default;
$de-table-ppty-dlg-cell-tab-measure-label-margin-top: -58px !default;
$de-border-dlg-border-label-font-weight: 400 !default;
$de-toc-dlg-build-table-margin-top: 30px !default;
$de-toc-styles-table-div-margin-top: 10px !default;
$de-toc-table-div-width: 100% !default;
$de-toc-dlg-right-sub-container-margin-right: 2px !default;
$de-toc-dlg-styles-margin-bottom: 11px !default;
$de-toc-dlg-styles-margin-left: 38px !default;
$de-toc-dlg-styles-margin-top: 15px !default;
$de-toc-list-view-width: 100% !default;
$de-toc-table-list-view-height: 183px !default;
$de-toc-styles-table-div-border-radius: 3px !default;
$de-toc-modify-button-margin-left: 156px !default;
$de-toc-dlg-outline-levels-width: 150px !default;
$de-bookmark-content-margin-top: 20px !default;
$de-bookmark-textbox-margin-bottom: 6px !default;
$de-bookmark-textbox-height: 32px !default;
$de-bookmark-custom-btn-width: 70px !default;
$de-bookmark-custom-btn-height: 32px !default;
$de-bookmark-button-div-top-position: 0 !default;
$de-toc-dlg-style-input-margin-bottom: 3px !default;
$de-toc-dlg-style-input-margin-left: 38px !default;
$de-toc-dlg-style-input-width: 210px !default;
$de-toc-list-view-margin-left: 3px !default;
$e-de-toc-table-div-height: 143px !default;
$de-toc-dlg-showlevel-div-margin-left: 276px !default;
$de-toc-dlg-show-level-div-margin-left: 275px !default;
$de-op-input-group-height: 34px !default;
$de-op-tab-header-padding-left: 15px !default;
$de-op-tab-header-padding: 12px !default;
$de-list-dlg-font-margin-left: 1px !default;
$de-bookmark-list-view-border-radius: 4px !default;
$de-bookmark-listview-margin-right: 24px !default;
$de-bookmark-dlgfields-margin-bottom: 6px !default;
$de-numbering-list-line-color: #ccc !default;
$de-numbering-list-span-color: #aaa !default;
$de-numbering-list-border-color: #ebebeb !default;
$de-numbering-list-background-color: $grey-base !default;
$de-table-ppty-dlg-tabs-height: 320px !default;
$de-toc-dlg-toc-level-margin-left: 36px !default;
$de-table-options-font-weight: 400 !default;
$de-cell-width-top-margin-left: 20px !default;
$de-cell-width-top-margin-top: -23px !default;
$de-table-cell-subheader-div-margin-right: 125px !default;
$de-table-cell-subheader-div-margin-top: -37px !default;
$e-de-table-ppty-dlg-left-indent-container-bottom: 4px !default;
$de-cell-options-rtl: 123px !default;
$de-font-checkbox-ltr: 58px !default;
$de-font-content-label-width: 68px !default;
$de-font-label-width: 115px !default;
$de-font-label-width-bg: 132px !default;
$de-toc-dlg-right-sub-container-margin-top: 122px !default;
$e-de-list-div-margin-top-rtl: -138px !default;
$e-de-list-subdiv-margin-top-rtl: -136px !default;
$de-toc-modify-button-margin-rtl: 150px !default;
$de-hght-type-top: -22px !default;
$de-bigger-style-button-height: 37px !default;
$de-bigger-style-button-width: 88px !default;
$de-table-border-margin-right: 15px !default;
$de-table-border-margin-top: 10px !default;
$de-table-dlg-separator-line-top: 5px !default;
$de-bookmark-list-margin-right: 14px;
$de-bkmrk-list-margin-left: 20px !default;
$de-paradialog-dir-div: .4 !default;
$de-list-view: #e4e4e4 !default;
$de-rp-btn-bg-color: '' !default;
$de-rp-btn-nav-box-shadow: rgba(0, 0, 0, .14) !default;
$de-rp-btn-nav-box-shadow-next: rgba(0, 0, 0, .5) !default;
$de-cmt-selection: $brand-primary !default;
$de-cmt-selection-rslv: rgba($de-cmt-selection, .5) !default;
$de-cmt-opt-size: 20px !default;
$de-cmt-pant-content-font: $grey-dark-font !default;
$de-cmt-post-btn-ht: 32px !default;
$de-cmt-post-btn-wt: $de-cmt-post-btn-ht !default;
$de-cmt-post-btn-wt-big: 36px !default;
$de-cmt-post-btn-ht-big: 40px !default;
$de-cmt-separator: $grey-99 !default;
$de-reply-footer-margin-top: 8px !default;
$de-rp-btn-enforce-margin: 24px;
$de-rp-btn-enforce-padding-big: 10px;
$e-de-cmt-textarea-padding-top: 7px;
$e-de-cmt-textarea-padding-top-big: 5px;
$de-dlg-table-options-content-div: 504px !default;
$dialog-btn-bg-color: transparent;
$dialog-btn-border-color: transparent;
$dialog-headericon-border-radius: 50%;
$dialog-closeicon-btn-active-color: transparent;
$dialog-closeicon-btn-hover-color: transparent;
$dialog-active-icon-color: #f0f0f0;
$e-de-close-icon-cursor: default;
$dialog-btn-clr: #acacac;
$de-tooltip-color: $grey-dark-font;
$de-blink-cursor-clr: rgba(0, 0, 0, .87);
$de-check-exactnumbr-width: 120px;
$de-tc-btn-padding: 4px;
$de-avatar-clr:  #fff !default;
$de-tc-tlbr-padding-btm: 1px;
$de-pane-color-border:  $brand-primary !default;
$de-font-dlg-font-size: 12px;
$de-tbl-measure-lbl-font-size: 11px;
$de-toc-lbl-mrgn-left: 4px;
$de-toc-lbl-mrgn-rgt: 4px;
$de-floating-menu-width: 70px;
$de-floating-menu-height: 65px;
$de-floating-menu-padding: 10px;
$de-cmt-container-padding: 0 8px;
$de-cmt-sub-container-margin: 8px 0;
$de-rply-cmt-sub-container-margin: 11.5px 8px 0 8px;
$de-cmt-view-mrgn-top: 11.5px;
$de-ui-floating-menu-padding: 10px 4px 5px 10px;
$de-ui-list-header-presetmenu-min-width: 50px;
$de-ui-wfloating-menu: 0 5px 5px 0;
$de-bullet-number-width: 272px;
$de-rp-content-ln-ht: none;
$de-rp-font-size: 12px;
$de-rp-format-font-size: 13px;
$de-header-font-weight: normal;
$de-dlg-bkm-fld-fnt-size: 12px;
$de-ff-dlg-hdg-small-mrgn-btm: 4px;
$de-ff-seperate-div-mrgn-btm: 15.5px;
$de-ff-dlg-heading-mrgn-btm: 12px;
$de-ff-radio-div-mrgn-btm: 26px;
$de-ff-radio-scnd-div-mrgn-btm: 18px;
$de-fnt-dlg-header-effects-mrgn-btm: $de-font-dlg-header-margin-bottom;
$de-para-dlg-cs-check-box-mrgn-btm: 8px;
$de-bullet-numbered-dlg-width: 272px;
$de-bullet-numbered-dlg-height: 270px;
$de-tbl-indent-lb-fnt-size: 11px;
$de-font-clr-div-mrgn-top: 14px;
$de-para-dlg-cs-check-box-mrgn-top: 8px;
$de-insert-footnote-dlg-header-mrg-btm: 25px;
$de-table-options-dlg-div-mrgn-btm: 14px;
$de-tbl-indent-lbl-mrgn-btm: 18px;
$de-tbl-indent-lbl-top: 10px;
$de-cmt-date-fnt-size: 13px;
$de-cmt-author-nme-fnt-size: 13px;
$de-cmt-date-mrgn-top: 12px;
$de-ff-drpdwn-dlg-scndiv-mrgn-botton: 16px;
$de-drp-dwn-frst-div-mrgn-btm: 23.5px;
$de-ff-dlg-lft-hlf-mrgn-rgt: 5%;
$de-ff-dlg-lft-hlf-wdth: 47.5%;
$de-para-dlg-spacing-div-mrgn-left: 40px;
$de-para-dlg-cs-check-box: 8px;
$de-op-close-button-top: 6px;
$de-table-row-cell-pdng: 20px;
$de-table-prop-left-indnt-cntr-pos: 69px;
$de-track-chngs-sucs-bg-color: #4d841e;
$de-track-chngs-rejct-bg-color: #d74113;
$de-avatar-width: 90%;
$de-op-more-less-mrgn-top: 14px;
$de-enforce-dlg-title-mrgn-top: 8px;
$de-enforce-dlg-title-fnt-size: 14px;
$de-enforce-btn-mrng-btm: 8px;
$de-unprotect-dlg-title-fnt-size: 14px;
$de-unprotect-dlg-title-mrgn-btm: 8px;
$de-user-dlg-textbox-input-mrgn-right: 16px;
$de-user-dlg-list-mrgn-btm: 15px;
$de-user-dlg-user-mrgn-btm: 12px;
$de-trckchanges-inner-mrgn: 8px 0 8px 7.5px !default;
$de-rp-width: 268px !default;
$de-rp-close-icon-top: -7px;
$de-rp-btn-enforce-prtct-margin: 0 46px;
$de-rp-nav-lbl: 0 28px;
$de-rp-nav-btn-mrgn: 0 12px;
$de-rp-btn-enforce-bx-shadow: 0 2px 2px 0 $de-rp-btn-nav-box-shadow, 0 2px 4px 0 $de-rp-btn-nav-box-shadow-next;
$de-para-dlg-right-sub-container-top-margin: 0;
$de-par-dlg-hdr-weight: 400 !default;
$de-para-dlg-hdr-margin-bottom: 15px;
$de-dlg-heading-opacity: 87%;
$de-para-dlg-hdr-margin-top: 15px;
$de-dlg-heading-main-header: $grey-dark-font !default;
$de-para-dlg-sub-title-bottom-margin: 15px !default;
$de-para-dlg-sub-title-top-margin: 0 !default;
$de-para-dlg-heading-font-size: 16px !default;
$de-para-dlg-right-contaner-top: 0 !default;
$de-para-dlg-rtl-btn-margin-right: 24px;
$de-para-dlg-rtl-btn-font-size: 12px;
$de-para-dlg-rtl-btn-width: 200px;
$de-de-rtl-btn-div-e-de-rtl-margin-right: 24px;
$de-de-rtl-btn-div-e-de-rtl-margin-left: 12px;
$de-svg-border-stroke: rgba($grey-dark-font, 1) !default;
$de-row-height-bottom-margin: 8px;
$de-column-presets-font-size: 60px !default;

$de-op-more-font-size: 16px;
$de-para-dlg-container-font-size-bigger: 14px;
$de-dlg-sub-header-font-size-bigger: 12px;
$de-table-options-font-size-bigger: 12px;
$de-para-dlg-left-margin-bigger: 20px;
$de-para-dlg-spacing-left-margin-bigger: 0;
$de-para-dlg-spacing-right-margin-bigger: 20px;
$de-de-rtl-btn-div-e-de-rtl-margin-right-bigger: 0;
$de-subcontainer-left-padding-right-bigger: 0;
$de-subcontainer-right-padding-left-bigger: 0;

// layout.scss
$de-subcontainer-padding-right: 0;
$de-subcontainer-padding-left-rtl: 0;
$de-blink-cursor-border-left: 1px;
$de-text-target-border: 0;

// theme.scss
$de-border-dlg-border-label-padding-left: 20px;
$de-border-dlg-border-label-padding-right: 20px;
$de-border-dlg-border-column-label-padding-left: 50px;
$de-border-dlg-border-column-label-padding-right: 50px;
$de-ff-sub-header-font-size: 12px;
$de-ff-sub-header-margin-top: 6px;
$de-ff-dlg-drpdwn-heading-margin-bottom: 8px;
$de-ff-dlg-check-margin-bottom: -2px;
$de-ff-radio-div-margin-right: 16px;
$de-ff-radio-margin-left: 16px;
$de-ff-radio-margin-right: 0;
$de-ff-radio-scnd-div-margin-right: 16px;
$de-ff-radio-scnd-div-margin-left: 16px;
$de-ff-radio-scnd-margin-right: 0;
$de-ff-dlg-lft-hlf-margin-right-rtl: 0;
$de-ff-chck-exact-margin-left: 15px;
$de-ff-chck-exact-margin-top: -6px;
$de-ff-chck-margin-left-rtl: 0;
$de-ff-chck-margin-right-rtl: 15px;
$de-ff-cmt-avatar-font-size: 12px;
$de-ff-cmt-avatar-letter-spacing: 0;
$de-ff-cmt-avatar-line-height: 12px;
$de-ff-drpdwn-listview-margin-right: 12px;
$de-ff-drpdwn-listview-margin-left-rtl: 12px;
$de-ff-drpdwn-margin-right-rtl: 0;
$de-ff-drpdwn-mvup-margin-right: 8px;
$de-ff-drpdwn-mvup-margin-left-rtl: 8px;
$de-ff-dropdown-margin-right-rtl: 0;
$de-result-list-block-border-bottom: 2px;
$search-result-item-padding-right: 1px;
$search-result-item-padding-left: 5px;
$de-search-result-item-border-bottom: 1px;
$de-toc-reset-button-margin-right: 0;
$de-toc-button-margin-left-rtl: 0;
$de-toc-list-border: 1px;
$de-toc-list-view-margin-left-rtl: 0;
$de-toc-dlg-style-label-margin-left-rtl: 0;
$de-page-setup-dlg-first-page-margin-bottom: 8px;
$de-dlg-footer-margin-left: 10px;
$de-font-dlg-header-font-size: 12px;
$de-dlg-main-header-font-size: 14px;
$e-de-font-dlg-cb-margin-left: 0;
$de-font-dlg-cb-margin-left: 20px;
$de-op-border-right: 1px;
$de-op-padding-lft: 0;
$de-op-tab-border: 0;
$de-dlg-heading-main-border-bottom: 1px;
$de-dlg-heading-main-font-size: 14px;
$de-table-align-margin-rgt-rtl: 0;
$de-table-align-active-border: 1px;
$de-list-dlg-header-font-size: 14px;
$de-cell-ht-top-padding: 0;
$de-table-row-cell-pdng-left-rtl: 0;
$de-tbl-dlg-border-btn-margin-right-rtl: 0;
$de-header-font-size: 12px;
$de-list-dlg-subheader-font-size: 12px;
$de-tooltip-padding: 5px;
$de-form-tooltip-padding: 16px;
$de-save-margin-left: 8px;
$de-op-search-tab-content-margin-right: 0;
$de-documenteditor-font-size: 14px;
$de-font-color-font-size: 12px;
$de-font-color-margin-left: 15px;
$de-font-checkbox-margin-left: 0;
$de-table-subheader-div-margin-rgt-rtl: 0;
$de-save-dlg-file-name-margin-bottom: 8px;
$de-save-dlg-format-type-margin-bottom: 8px;
$de-bookmark-list-margin-top: 8px;
$de-spellcheck--listitem-font-size: 15px;
$de-spellcheck-btn-container-margin-top: 8px;
$de-dlg-spellchecker-subheader-margin-top: 8px;
$de-dlg-spellchecker-subheader-font-size: 15px;
$de-dlg-spellchecker-subheaderbtm-font-size: 15px;
$de-op-dlg-footer-padding-left: 6px;
$de-op-dlg-footer-padding-right: 6px;
$de-list-info-btn-font-size: 12px;
$de-list-info-btn-line-height: 1px;
$bookmark-listview-border: 1px;
$de-bookmark-deletebutton-margin-bottom: 12px;
$de-bkmrk-list-margin-right-rtl: 0;
$de-bookmark-listview-font-size: 13px;
$de-bookmark-listview-line-height: 27px;
$de-dlg-table-options-margin-bottom: 14px;
$de-style-dialog-style-left-div-margin-right-rtl: 0;
$de-style-dialog-label-right-margin: 8px;
$de-style-format-dropdwn-margin-left: 8px;
$de-style-dialog-margin-top: 25px;
$de-style-toggle-btn-border-right: 2px;
$de-style-toggle-btn-border: 2px;
$de-table-container-div-font-size: 14px;
$de-table-ppty-dlg-measure-div-margin-left: -18px;
$de-table-ppty-dlg-measure-div-margin-lft-rtl: 0;
$de-table-ppty-dlg-row-height-label-margin-rgt-rtl: 0;
$de-table-ppty-dlg-preferred-width-margin-lft-rtl: 0;
$de-table-cell-subheader-div-margin-rgt-rtl: 0;
$de-styles-textboxdiv-padding-bottom: 15px;
$styles-listview-font-size: 13px;
$styles-listview-line-height: 27px;
$styles-common-padding-top: 5px;
$de-toc-dlg-styles-margin-lft-rtl: 0;
$de-toc-dlg-style-input-margin-lft-rtl: 0;
$de-toc-list-view-border: 1px;
$de-toc-dlg-sub-level-heading-font-size: 12px;
$de-toc-dlg-outline-levels-margin-top: 15px;
$de-header-margin-bottom: 6px;
$de-ui-list-header-presetmenu-font-size: 11px;
$de-ui-list-header-presetmenu-line-height: 14px;
$de-number-bullet-dlg-padding: 0;
$de-ui-bullet-font-size: 42px;
$de-numbering-list-border-bottom: 1px;
$de-numbering-list-margin-left: 5px;
$de-ui-wfloating-menu-border: 0;
$de-ui-wfloating-padding: 0;
$de-numbering-list-border: 1px;
$de-numbering-list-margin: 5px;
$de-numbering-list-paddng-top: 7px;
$de-numbering-list-padding-right: 10px;
$de-list-item-size-font-size: 14px;
$de-rp-margin-bottom: 8px;
$de-ltr-btn-div-font-size: 12px;
$de-tbl-rtl-btn-div-font-size: 12px;
$de-tbl-rtl-btn-div-margin-right: 14px;
$de-tbl-rtl-btn-div-margin-rgt-rtl: 0;
$de-tbl-ltr-btn-div-font-size: 12px;
$de-restrict-format-margin-top: 16px;
$de-rp-format-margin-bottom: 12px;
$de-rp-checkbox-font-size: 12px;
$de-rp-border-margin-bottom: 12px;
$de-rp-border-margin-top: 12px;
$de-rp-header-font-size: 15px;
$de-rp-btn-font-size: 13px;
$de-rp-btn-border-radius: 2px;
$de-rp-btn-border-radius: 2px;
$de-list-view-border-bottom: 1px;
$de-restrict-pane-padding-left: 0;
$de-restrict-pane-padding-top: 0;
$de-restrict-pane-padding-right: 0;
$de-list-view-font-size: 12px;
$de-rp-enforce-nav-margin-top: 0;
$de-rp-enforce-nav-margin: 12px;
$de-user-add-btn-border-radius: 2px;
$de-user-dlg-list-margin-right: 0;
$de-list-view-border: 1px;
$de-list-view-border-radius: 2px;
$de-rp-stop-div1-padding-top: 12px;
$de-rp-stop-div1-padding-right: 12px;
$de-rp-stop-div1-padding-bottom: 6px;
$de-rp-stop-div1-padding-left: 12px;
$de-rp-stop-div1-font-weight: 500;
$de-rp-stop-div1-border-bottom: 1px;
$de-rp-stop-div2-padding-top: 12px;
$de-rp-stop-div2-padding-right: 12px;
$de-rp-stop-div2-padding-bottom: 24px;
$de-rp-nav-lbl-font-size: 13px;
$de-rp-nav-lbl-margin-top: 0;
$de-rp-nav-lbl-margin-right: 12px;
$de-cp-whole-header-padding: 12px;
$de-cp-header-font-size: 13px;
$de-cp-header-font-weight: 500;
$de-cmt-separator-border: 1px;
$de-cmt-sub-container-border-radius: 2px;
$de-cmt-sub-container-cmt-selection-border-left: 3px;
$de-tc-outer-border-bottom: 1px;
$de-trckchanges-inner-padding-left: 8px;
$de-trckchanges-inner-padding-right: 16px;
$de-trckchanges-inner-padding-bottom: 8px;
$de-trckchanges-inner-border-left: 2px;
$de-trckchanges-inner-hover-padding-left: 6px;
$de-trckchanges-inner-padding-right: 16px;
$de-trckchanges-inner-padding-bottom: 8px;
$de-trckchanges-inner-select-border-left: 3px;
$de-trckchanges-inner-select-padding-left: 5px;
$de-trckchanges-inner-select-padding-right: 16px;
$de-trckchanges-inner-select-padding-bottom: 8px;
$de-input-font-size: 14px;
$de-input-margin-top: 60px;
$de-input-margin-right: 0;
$de-tc-btn-padding-top: 5px;
$de-track-reject-button-top: 5px;
$de-track-reject-button-right: 6px;
$de-track-reject-button-right-margin-left: 8px;
$de-track-chngs-count-font-size: 12px;
$de-track-chngs-count-margin-left: 6px;
$de-track-chngs-count-padding-top: 7px;
$de-track-chngs-sucs-font-size: 13px;
$de-track-chngs-rejct-font-size: 13px;
$de-track-toolbar-border-bottom: 1px;
$de-track-toolbar-border-top: 1px;
$de-track-pane-drop-btn-padding-left: 0;
$de-track-pane-drop-btn-padding-right: 0;
$de-track-pane-drop-btn-padding-top: 5px;
$de-track-pane-drop-btn-font-size: 13px;
$de-cmt-date-margin-top: 4px;
$de-track-usernme-div-padding-top: 8px;
$de-cmt-author-nme-font-weight: 500;
$de-track-chngs-text-padding-top: 8px;
$de-track-chngs-text-margin-bottom: 16px;
$de-track-chng-table-border-spacing: 0;
$de-tc-tble-cell-border: 1px;
$de-tc-shrink-img-margin-top: 0;
$de-tc-shrink-img-margin-right: 4px;
$de-tc-field-margin-top: 0;
$de-tc-field-margin-right: 2px;
$de-tc-pmark-font-size: 14px;
$de-tc-pmark-font-weight: 600;
$de-tc-pmark-margin-top: 0;
$de-tc-pmark-margin-right: 2px;
$de-cmt-selection-border-left: 2px;
$de-cmt-author-margin-bottom: 8px;
$de-cp-option-padding: 0;
$de-cp-option-margin-top: 0;
$de-cmt-readonly-padding-top: 4px;
$de-cmt-separator-border-top: 1px;
$de-cmt-separator-border-radius: 0;
$de-cmt-separator-padding: 0;
$de-cmt-font-size: 13px;
$de-cmt-post-btn-margin-left: 8px;
$de-cmt-resolve-btn-margin-top: 8px;
$de-cmt-selection-rslv-border-left: 3px;
$de-cmt-selection-rslv-border-lft: 2px;
$de-lock-mark-font-size: 13px;
$de-cmt-no-cmt-margin-left: 6px;
$de-cmt-no-cmt-margin-top: 24px;
$de-cmt-no-cmt-font-size: 13px;
$de-cmt-drawer-cnt-font-size: 13px;
$de-cmt-drawer-cnt-margin-top: 8px;
$de-cmt-drawer-margin-right: 4px;
$de-cmt-drawer-margin-top: 4px;
$de-cmt-separator-border-left: 1px;
$de-cmt-selection-border-right: 3px;
$de-cmt-selection-border-rgt: 2px;
$de-cmt-selection-rslv-border-right: 3px;
$de-cmt-selection-rslv-border-rgt: 2px;
$de-cmt-no-cmt-margin-right: 6px;
$de-cmt-drawer-margin-left: 8px;
$de-rp-mu-btn-margin-top: 3px;
$de-table-border-icon-container-margin-top: 4px;
$de-table-bdr-icon-container-margin-right: 4px;
$de-ok-button-margin-right: 0;
$de-table-align-margin-rgt-rtl: 0;
$de-border-dlg-clr-padding-rgt: 0;
$de-border-dlg-preview-padding-lft: 0;
$de-table-border-setting-genral-margin-right: 0;
$de-table-border-icon-container-margin-right: 0;
$de-table-border-icon-container-margin-left: 4px;
$de-table-setting-labels-heading-margin-left: 0;
$de-table-setting-labels-heading-margin-right: 10px;
$de-user-info-border-radius: 6px;
$de-user-info-padding: 0;
$de-user-name-expended-padding-top: 0;
$de-user-name-expended-padding-right: 8px;
$de-ff-cmt-avatar-border-radius: 50%;
$de-cmt-author-name-padding-lft: 0%;
$de-cmt-sub-container-padding-cmt-reply: 0%;
$de-cmt-author-name-padding-left: 0%;
$de-track-chngs-text-line-height: 19.5px;
$de-para-dlg-line-height: 22px;
$de-op-more-less-margin-top-bigger: 16px;
$de-font-dlg-left-margin-bigger: 16px;
$de-dlg-sub-header-font-size: 16px;
$de-font-dlg-right-margin-bigger: 16px;
$de-bookmark-textboxdiv-bottom-margin-bigger: 12px;
$de-track-date-font-size-bigger: 12px;
$de-page-setup-dlg-top-margin-bigger: 19px;
$de-table-container-top-margin-bigger: 13px;
$de-style-bold-button-right-margin-bigger: 8px;
$de-toc-label-margin-left-bigger: 0;
$de-toc-label-rtl-margin-left-bigger: 0;
$de-toc-label-rtl-margin-right-bigger: 0;
$de-de-rp-header-font-size-bigger: 16px;
$de-cmt-post-btn-left-margin-bigger: 12px;
$de-cp-whole-header-padding-bigger: 16px;
$de-cp-whole-header-padding-right-bigger: 8px;
$de-cmt-post-btn-margin-right-bigger: 12px;
$de-table-options-font-size-bigger: 12px;
$de-para-dlg-left-margin-bigger: 20px;
$de-para-dlg-spacing-left-margin-bigger: 0;
$de-para-dlg-spacing-right-margin-bigger: 20px;
$de-de-rtl-btn-div-e-de-rtl-margin-right-bigger: 0;
$de-subcontainer-left-padding-right-bigger: 0;
$de-subcontainer-right-padding-left-bigger: 0;
$e-de-cmt-sub-container-font-size: 14px;
$e-de-op-header-font-size: 15px;
$e-de-style-dialog-margin-top: 25px;
$e-de-style-icon-button-last-size-height: 35px;
$e-de-style-bold-button-size-height-big: 31px;
$e-de-style-font-color-picker-height-big: 40px;
$e-de-style-font-group-button-height: 40px;
$e-de-op-input-group-height: 40px;
$e-para-dlg-sub-height-height: 170px;
$e-de-cp-whole-header-height: 56px;
$e-de-text-target-height: 1px;
$e-de-ff-drpdwn-dlg-scndiv-height: 168px;
$e-de-op-icon-height: 20px;
$e-de-border-dlg-preview-div-height: 80px;
$e-de-font-dlg-color-height: 16px;
$e-de-list-bullet-height: 40px;
$e-de-list-numbered-height: 80px;
$e-de-list-multilevel-height: 80px;
$e-de-save-dlg-height: 25px;
$e-de-list-format-info-height: 15px;
$e-styles-bookmark-listview-height: 150px;
$e-bookmark-listview-height: 30px;
$e-de-style-font-color-picker-height: 31px;
$e-de-style-bold-button-size-height: 35px;
$e-styles-listview-height: 30px;
$e-de-toc-table-height: 24px;
$e-de-ui-wfloating-menu-height: 45px;
$e-de-bullet-icon-size-height: 45px;
$e-de-ui-menuitem-none-height: 70px;
$e-de-rp-use-height: 110px;
$e-de-user-listview-height: 106px;
$e-de-restrict-pane-height: 100%;
$e-documenteditor-optionspane-height: 100%;
$e-de-track-chngs-text-min-height: 20px;
$e-de-tc-tble-cell-height: 20px;
$e-de-tc-shrink-img-height: 30px;
$e-de-cmt-textarea-min-height: 30px;
$e-de-lock-mark-height: 13px;
$e-de-cmt-mark-height: 13px;
$e-de-cmt-drawer-cnt-height: 20px;
$e-de-user-name-collapse-height: 6px;
$e-de-user-name-expended-height: 20px;
$e-de-user-name-expended-line-height: 20px;
$e-close-font-size: 14px;
$e-de-cmt-mark-icon-font-size: 13px;
$e-de-table-border-font-size: 16px;
$e-de-icon-bullet-list-dot-font-size: 8px;
$e-de-icon-bullet-list-tick-font-size: 12px;
$e-de-icon-bullet-list-none-font-size: 24px;
$e-de-cmt-resolve-icon-font-size: 13px;
$e-de-tablecell-top-alignment-margin: 2px;
$e-de-columns-presets-genral-margin-right: 33px;
$e-de-columns-presets-genral-margin-bottom: 12px;
$e-de-table-properties-alignment-border: 1px;
$e-de-table-border-setting-border: 1px;
$e-de-table-border-inside-border: 1px;
$e-de-column-dlg-preview-border: 1px;
$e-de-table-border-setting-height: 40px;
$e-de-table-border-setting-genral-height: 52px;
$e-de-table-border-preview-genral-height: 24px;
$e-de-table-border-preview-height: 24px;
$e-de-columns-presets-genral-height: 62px;
$e-de-column-dlg-preview-height: 120px;
$e-de-icon-bullet-list-line-height: 28px;
$e-de-columns-padding-alignment-padding-top: 24px;
$e-de-padding-col-prev-padding-left: 15px;
$e-de-search-tab-content-border: 1px;
$e-de-style-font-color-picker-padding-top: 4px;
$e-de-style-font-color-picker-padding-right: 8px;
$e-de-rp-close-icon-border: 0;
$e-de-toc-dlg-style-input-margin-top: 18px;
$e-de-styles-margin-top: 0;
$e-de-font-color-margin-right: 0;
$de-dlg-spellcheck-listview-border: 1px;
$de-dlg-spellcheck-listview-border-radius: 2px;
$e-de-style-icon-button-first-size-margin-right: 3px;
$de-table-ppty-dlg-measure-margin-top: -18px;
$de-track-user-nme-padding-left: 8px;

@include export-module('documenteditor-layout') {
  .e-de-dlg-container {
    padding-bottom: $de-padding-full;
  }

  .e-de-dlg-row {
    display: flex;
  }

  .e-de-svg-border-color {
    stroke: $de-svg-border-stroke;
  }

  .e-de-svg-border-fill-color {
    fill: $de-svg-border-stroke;
  }

  .e-de-container-row {
    display: flex;
    padding-bottom: $de-padding-full;
  }

  .e-de-subcontainer-left {
    padding-right: $de-padding-half;
    width: 50%;
  }

  .e-de-subcontainer-right {
    padding-left: $de-padding-half;
    width: 50%;
  }

  .e-de-dlg-tab-first-child {
    padding-top: $de-padding-half;
  }

  .e-de-dlg-heading {
    display: block;
    font-size: $de-para-dlg-heading-font-size;
    font-weight: $de-para-dlg-heading-font-weight;
    margin-bottom: $de-ff-dlg-heading-mrgn-btm;
  }

  .e-rtl {
    .e-de-subcontainer-left {
      padding-left: $de-padding-half;
      padding-right: $de-subcontainer-padding-right;
    }

    .e-de-subcontainer-right {
      padding-left: $de-subcontainer-padding-left-rtl;
      padding-right: $de-padding-half;
      width: 50%;
    }
  }

  .e-de-blink-cursor {
    border-left: $de-blink-cursor-border-left solid $de-blink-cursor-clr;
    pointer-events: none;
    position: absolute;
    z-index: 3;
  }

  .e-de-cursor-animation {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: FadeInFadeOut;
  }

  @keyframes FadeInFadeOut {
    from {
      opacity: 1;
    }

    13% {
      opacity: 0;
    }

    50% {
      opacity: 0;
    }

    63% {
      opacity: 1;
    }

    to {
      opacity: 1;
    }
  }

  .e-de-text-target {
    border: $de-text-target-border;
    height: $e-de-text-target-height;
    opacity: 0;
    outline-style: none;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: -10000px;
    width: 625px;
  }

  .e-de-txt-form {
    .e-de-txt-field {
      display: block;
    }

    .e-de-num-field {
      display: none;
    }

    .e-de-date-field {
      display: none;
    }

    .e-de-ddl-field {
      display: none;
    }
  }

  .e-de-num-form {
    .e-de-txt-field {
      display: none;
    }

    .e-de-num-field {
      display: block;
    }

    .e-de-date-field {
      display: none;
    }

    .e-de-ddl-field {
      display: none;
    }
  }

  .e-de-date-form {
    .e-de-txt-field {
      display: none;
    }

    .e-de-num-field {
      display: none;
    }

    .e-de-date-field {
      display: block;
    }

    .e-de-ddl-field {
      display: none;
    }
  }

  .e-de-ddl-form {
    .e-de-txt-field {
      display: none;
    }

    .e-de-num-field {
      display: none;
    }

    .e-de-date-field {
      display: none;
    }

    .e-de-ddl-field {
      display: block;
    }
  }

  .e-documenteditor {
    .e-de-op-close-button {
      left: 267px;
      position: absolute;
      top: $de-op-close-button-top;
    }

    .e-de-op-close-button.e-de-rtl {
      left: 14px;
    }
  }
}

@include export-module('documenteditor-theme') {
    /* stylelint-disable */
    .e-de-background {
        background-color: $de-background;
    }
    .e-de-column-label {
        font-size: $de-border-dlg-settinglabels-fontsize;
        font-weight: $de-border-dlg-border-label-fontweight;
        padding-left: $de-border-dlg-border-label-padding-left;
        padding-right: $de-border-dlg-border-label-padding-right;
    }

    .e-de-para-tab {
        float: left;
    }
    .e-de-para-tab.e-rtl {
        float: right;
    }

    .e-de-column-label.e-de-rtl {
        font-size: $de-border-dlg-settinglabels-fontsize;
        font-weight: $de-border-dlg-border-label-fontweight;
        padding-left: $de-border-dlg-border-column-label-padding-left;
        padding-right: $de-border-dlg-border-column-label-padding-right;
    }

    .e-de-font-dlg-display {
        display: inline-flex;
    }

    .e-de-ff-sub-header {
        display: block;
        font-size: $de-ff-sub-header-font-size;
        font-weight: $de-header-font-weight;
        margin-top: $de-ff-sub-header-margin-top;
    }

    .e-de-check-exactnumbr-width {
        width: $de-check-exactnumbr-width !important;
    }

    .e-de-ff-dlg-heading {
        display: block;
        font-weight: $de-para-dlg-heading-font-weight;
        margin-bottom: $de-ff-dlg-heading-mrgn-btm;
        @if $skin-name=='Material3' {
            font-size: 14px;
        }
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-ff-dlg-heading-small {
        display: block;
        font-weight: $de-para-dlg-heading-font-weight;
        margin-bottom: $de-ff-dlg-hdg-small-mrgn-btm;
    }
    .e-de-ff-dlg-drpdwn-heading {
        display: block;
        font-size: $de-para-dlg-heading-font-size;
        font-weight: $de-para-dlg-heading-font-weight;
        margin-bottom: $de-ff-dlg-drpdwn-heading-margin-bottom;
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-ff-dlg-check {
        display: block;
        font-size: $de-para-dlg-heading-font-size;
        font-weight: $de-para-dlg-heading-font-weight;
        margin-bottom: $de-ff-dlg-check-margin-bottom;
    }
    .e-de-div-seperate-dlg {
        display: inline-flex;
        margin-bottom: $de-ff-seperate-div-mrgn-btm;
        width: 100%;
    }
    .e-de-ff-radio-div {
        display: inline-flex;
        margin-right: $de-ff-radio-div-margin-right;
    }
    .e-de-ff-radio-div.e-de-rtl {
        margin-left: $de-ff-radio-margin-left;
        margin-right: $de-ff-radio-margin-right;
    }
    .e-de-ff-radio-scnd-div {
        display: inline-flex;
        margin-bottom: $de-ff-radio-scnd-div-mrgn-btm;
        margin-right: $de-ff-radio-scnd-div-margin-right;
    }
    .e-de-ff-radio-scnd-div.e-de-rtl {
        margin-left: $de-ff-radio-scnd-div-margin-left;
        margin-right: $de-ff-radio-scnd-margin-right;
    }
    .e-de-ff-dlg-lft-hlf {
        margin-right: $de-ff-dlg-lft-hlf-mrgn-rgt;
        width: $de-ff-dlg-lft-hlf-wdth;
    }
    .e-de-ff-dlg-lft-hlf.e-de-rtl {
        margin-left: $de-ff-dlg-lft-hlf-mrgn-rgt;
        margin-right: $de-ff-dlg-lft-hlf-margin-right-rtl;
    }
    .e-de-ff-chck-exact {
        margin-left: $de-ff-chck-exact-margin-left;
        margin-top: $de-ff-chck-exact-margin-top;
    }
    .e-de-ff-chck-exact.e-de-rtl {
        margin-left: $de-ff-chck-margin-left-rtl;
        margin-right: $de-ff-chck-margin-right-rtl;
    }
    .e-de-ff-dlg-rght-hlf {
        width: 47.5%;
    }
    .e-de-ff-drpdwn-dlg-scndiv {
        display: inline-flex;
        height: $e-de-ff-drpdwn-dlg-scndiv-height;
        margin-bottom: $de-ff-drpdwn-dlg-scndiv-mrgn-botton;
        width: 100%;
    }
    .e-de-cmt-avatar {
        align-items: center;
        display: flex;
        width: $de-avatar-width;
    }
    .e-de-ff-cmt-avatar {
        align-items: center;
        border-radius: $de-ff-cmt-avatar-border-radius;
        color: $de-avatar-clr;
        display: flex;
        font-size: $de-ff-cmt-avatar-font-size;
        height: $de-cmt-avatar-height;
        justify-content: center;
        letter-spacing: $de-ff-cmt-avatar-letter-spacing;
        line-height: $de-ff-cmt-avatar-line-height;
        opacity: 100%;
        user-select: none;
        width: $de-cmt-avatar-width;
        z-index: 1;
    }
    .e-de-ff-drpdwn-listview {
        margin-right: $de-ff-drpdwn-listview-margin-right;
        width: 100%;
    }
    .e-de-ff-drpdwn-listview.e-de-rtl {
        margin-left: $de-ff-drpdwn-listview-margin-left-rtl;
        margin-right: $de-ff-drpdwn-margin-right-rtl;
    }
    .e-de-ff-drpdwn-mvup {
        margin-right: $de-ff-drpdwn-mvup-margin-right;
    }
    .e-de-ff-drpdwn-mvup.e-de-rtl {
        margin-left: $de-ff-drpdwn-mvup-margin-left-rtl;
        margin-right: $de-ff-dropdown-margin-right-rtl;
    }
    .e-de-drp-dwn-frst-div {
        margin-bottom: $de-drp-dwn-frst-div-mrgn-btm;
        width: 47.5%;
    }
    .e-de-result-list-block .e-de-search-result-hglt {
        background: $search-result-highlight-bg-color;
        border-bottom: $de-result-list-block-border-bottom solid $search-result-hightlight-bdr-clr-hvr;
        cursor: default;
        padding: $search-result-item-padding-top $search-result-item-padding-right $search-result-item-padding-bottom $search-result-item-padding-left;
    }
    .e-de-result-list-block .e-de-op-search-txt .e-de-op-search-word-text {
        color: $search-result-hightlight-bdr-clr;
    }
    .e-de-search-result-item {
        cursor: default;
        padding: $search-result-item-padding-top $search-result-item-padding-right $search-result-item-padding-bottom $search-result-item-padding-left;
        word-break: break-word;
    }
    .e-de-search-result-item:hover {
        border-bottom: $de-search-result-item-border-bottom solid $search-result-hightlight-bdr-clr-hvr;
        cursor: default;
    }
    .e-de-search-result-item:focus {
        border-bottom: $de-result-list-block-border-bottom solid $search-result-hightlight-bdr-clr-hvr;
        cursor: default;
        padding: $search-result-item-padding-top $search-result-item-padding-right $search-result-item-padding-bottom $search-result-item-padding-left;
    }
    @if $skin-name !='tailwind' {
        .e-de-search-tab-content .e-input-group .e-de-op-search-icon:focus {
            border: $e-de-search-tab-content-border solid $search-icon-bdr-clr;
        }
        .e-de-op-search-icon:hover {
            background: $search-icon-hvr;
            @if $skin-name=='bootstrap5' or $skin-name=='bootstrap5.3' {
                color: var(--color-sf-secondary-text-color-pressed) !important;
            }
        }
        .e-de-search-tab-content .e-input-group .e-de-op-search-close-icon:focus {
            border: $e-de-search-tab-content-border solid $search-icon-bdr-clr;
            border-right-width: 0;
        }
        .e-de-op-search-close-icon:hover {
            background: $search-icon-hvr;
        }
        .e-spin-down:focus {
            border: $e-de-search-tab-content-border solid $spin-down-bdr-clr;
            border-right-width: 0;
        }
        .e-spin-down:hover {
            background: $spin-down-hvr;
        }
        .e-spin-up:focus {
            border: $e-de-search-tab-content-border solid $spin-up-bdr-clr;
            border-right-width: 0;
        }
        .e-spin-up:hover {
            background: $spin-up-hvr;
        }
        .e-de-search-tab-content {
            .e-de-op-input-group {
                .e-spin-up:hover,
                .e-spin-down:hover {
                    @if $skin-name=='bootstrap5.3' {
                        background: var(--color-sf-secondary-bg-color-pressed) !important;
                        color: var(--color-sf-secondary-text-color-pressed) !important;
                    }
                }
            }
        }
    }
    .e-de-toc-dlg-heading {
        display: block;
        color: $de-dlg-heading-main-header;
        font-size: $de-toc-dlg-heading-font-size;
        font-weight: $de-toc-dlg-heading-font-weight;
        margin-bottom: $de-toc-title-bottom-margin; 
    }
    .e-de-toc-dlg-main-heading {
        color: $de-dlg-heading-main-header;
        display: block;
        font-size: $de-toc-dlg-heading-font-size;
        font-weight: $de-toc-dlg-main-heading-font-weight;
        margin-bottom: $de-title-bottom-margin;
    }
    .e-content-placeholder.e-documenteditor.e-placeholder-documenteditor {
        background-size: 100%;
    }
    .e-de-toc-reset-button {
        margin-top: $de-toc-reset-button-margin-top;
    }
    .e-de-toc-reset-button.e-de-rtl {
        margin-right: $de-toc-reset-button-margin-right;
    }
    .e-de-toc-modify-button {
        margin-left: $de-toc-modify-button-margin-left;
        margin-top: $de-toc-modify-button-margin-top;
    }
    .e-de-toc-modify-button.e-de-rtl {
        margin-left: $de-toc-button-margin-left-rtl;
        margin-right: $de-toc-modify-button-margin-rtl;
    }
    .e-de-toc-dlg-container {
        height: $de-toc-dlg-height;
        width: $de-toc-dlg-width;
    }
    .e-de-toc-dlg-sub-container {
        margin-bottom: $de-toc-sub-container-bottom;
    }
    .e-de-toc-list-view {
        border: $de-toc-list-border solid $de-toc-list-view-border-color;
        border-radius: $de-toc-styles-table-div-border-radius;
        font-size: $de-toc-list-view-font-size;
        height: $de-toc-list-view-height;
        overflow-y: scroll;
    }
    .e-de-toc-list-view.e-de-rtl {
        margin-left: $de-toc-list-view-margin-left-rtl;
    }
    .e-de-toc-dlg-sub-heading {
        color: $de-dlg-heading-main-header;
        display: block;
        font-size: $de-toc-dlg-heading-font-size;
        font-weight: $de-toc-dlg-heading-font-weight;
        margin: $de-toc-dlg-sub-margin;
    }
    .e-de-toc-dlg-style-label {
        margin-left: $de-toc-dlg-style-label-left;
        margin-top: $de-toc-dlg-style-label-top;
    }
    .e-de-toc-dlg-style-label .e-de-rtl {
        margin-left: $de-toc-dlg-style-label-margin-left-rtl;
        margin-right: $de-toc-dlg-style-label-left;
    }
    .e-de-pagesetup-dlg-container {
        height: $de-page-setup-dlg-height;
        width: $de-page-setup-dlg-width;
    }
    .e-de-page-setup-ppty-tab {
        border: $de-page-setup-ppty-tab-border;
    }
    .e-de-page-setup-dlg-sub-container {
        margin-bottom: $de-page-setup-sub-container-bottom;
    }
    .e-de-page-setup-dlg-left-sub-container {
        float: left;
        position: relative;
        top: $de-page-setup-dlg-left-container-top;
    }
    .e-de-page-setup-dlg-left-sub-container.e-de-rtl {
        float: right;
    }
    .e-de-page-setup-dlg-right-sub-container {
        float: right;
        position: relative;
        top: $de-page-setup-dlg-right-container-top;
    }
    .e-de-page-setup-dlg-right-sub-container.e-de-rtl {
        float: left;
    }
    .e-de-page-setup-dlg-sub-header {
        display: block;
        font-size: $de-page-setup-margin-dia-common-font;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-page-setup-margin-dia-common-margin-bottom;
        margin-top: $de-page-setup-margin-dia-common-margin-top;
    }
    .e-de-page-setup-dlg-sub-title-header {
        display: block;
        font-size: $de-page-setup-margin-dia-common-font;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-page-setup-margin-dia-common-margin-bottom;
        margin-top: $de-page-setup-common-margin-top;
    }
    .e-de-page-setup-dlg-sub-container-port {
        height: $de-page-setup-sub-container-height-style;
        margin-bottom: $de-page-setup-sub-container-port-bottom;
    }
    .e-de-page-setup-dlg-sub-label {
        font-size: $de-page-setup-dlg-sub-label-font-size;
        font-weight: $de-page-setup-dlg-sub-label-font-weight;
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-page-setup-dlg-orientation-prop {
        margin-top: $de-page-setup-dlg-orientation-prop-margin-top;
    }
    .e-de-page-setup-dlg-sub-size-container {
        height: $de-page-setup-sub-size-container-height;
        margin-bottom: $de-page-setup-sub-size-container-bottom;
    }
    .e-de-page-setup-dlg-layout-sub-container {
        height: $de-page-setup-layout-sub-container-height;
        margin-bottom: $de-page-setup-layout-sub-container-bottom;
        position: relative;
        top: $de-page-setup-layout-sub-container-top;
    }
    .e-de-page-setup-dlg-first-page-prop {
        margin-bottom: $de-page-setup-dlg-first-page-margin-bottom;
    }
    @if $skin-name !='tailwind' and $skin-name !='FluentUI'  {
        .e-de-page-setup-dlg-first-page-prop .e-label,
        .e-de-page-setup-dlg-odd-or-even-prop .e-label {
            font-size: $de-page-setup-checkbox-label-font-size;
        }
        .e-de-page-setup-dlg-first-page-prop .e-frame,
        .e-de-page-setup-dlg-odd-or-even-prop .e-frame {
            height: $de-checkbox-height;
            line-height: $de-checkbox-line-height;
            width: $de-checkbox-width;
        }
    }

    .e-de-page-setup-dlg-left-layout-container {
        float: left;
        position: relative;
        top: $de-page-setup-dlg-layout-container-top;
    }
    .e-de-page-setup-dlg-left-layout-container.e-de-rtl {
        float: right;
    }
    .e-de-page-setup-dlg-right-layout-container {
        float: right;
        position: relative;
        top: $de-page-setup-dlg-layout-container-top;
    }
    .e-de-page-setup-dlg-right-layout-container.e-de-rtl {
        float: left;
    }
    .e-de-dlg-footer .e-btn {
        margin-left: $de-dlg-footer-margin-left;
    }
    .e-de-hyperlink-dlg-title {
        font-size: 12px;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-hyperlink-dlg-margin-bottom;
        margin-top: $de-hyperlink-dlg-margin-top;
    }
    .e-de-hyperlink .e-de-hyperlink-dlg-input {
        height: $de-hyperlink-dlg-input-height;
        margin-bottom: $de-hyperlink-dlg-input-bottom;
        width: $de-hyperlink-dlg-input-width;
    }
    .e-de-font-dlg-header {
        display: flex;
        font-size: $de-font-dlg-header-font-size;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-font-dlg-header-margin-bottom;
        @if $skin-name=='tailwind' {
            line-height: 18px;
        }
    }
    .e-de-font-dlg-header-effects,
    .e-de-font-dlg-header-font-color {
        display: flex;
        font-size: $de-font-dlg-font-size;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-fnt-dlg-header-effects-mrgn-btm;
    }
    .e-de-font-dlg-main-header {
        color: $de-dlg-heading-main-header;
        font-size: $de-dlg-main-header-font-size;
        font-weight: $de-header-font-weight;
        margin-right: $de-font-dlg-main-header-margin-right;
    }
    .e-de-font-dlg-cb-right {
        margin-left: $e-de-font-dlg-cb-margin-right;
    }
    .e-de-font-dlg-cb-right.e-de-rtl {
        margin-left: $e-de-font-dlg-cb-margin-left;
        margin-right: $e-de-font-dlg-cb-margin-right;
    }
    .e-de-font-dlg-cb-right-div {
        margin-left: $de-font-dlg-cb-margin-left;
    }
    .e-de-dropdown {
        margin-right: $de-dropdown-margin-right;
    }
    .e-de-restrict-pane{
        border-right: $de-op-border-right solid $de-op-border-clr;
        padding-left: $de-op-padding-left;
        padding-top: $de-op-padding-top;
        padding-right: $de-op-padding-left;
        position: relative;
        width: 300px;
    }
    .e-de-op {
        border-right: $de-op-border-right solid $de-op-border-clr;
        padding-left: $de-op-padding-left;
        padding-right: $de-op-padding-left;
        position: relative;
        width: 300px;
    }
    .e-de-op.e-de-rtl {
        padding-left: $de-op-padding-lft;
        padding-right: $de-op-padding-left;
    }
    .e-de-op-header {
        @if $skin-name=='fluent2' {
            color: $de-sub-header-color;
            font-size: 14px;
        }
        @else {
            color: $de-op-title-clr;
            font-size: $e-de-op-header-font-size;
        }  
        font-family: $de-op-header-font-family;
        font-weight: $de-op-header-font-weight;
        margin-bottom: $de-op-header-bottm-margin;
        padding-top: $de-op-header-padding-top;
        @if $skin-name=='tailwind' {
            line-height: 24px;
        }
    }
    .e-de-op-header.e-de-rtl {
        direction: rtl;
        text-align: right;
    }
    .e-de-op-tab {
        border: $de-op-tab-border;
        height: auto;
        @if $skin-name=='tailwind' {
            background: transparent;
        }
    }
    .e-de-op-icon {
        color: $de-op-icon-color;
        @if $skin-name !='tailwind' {
            height: $e-de-op-icon-height;
            width: 20px;
        }
    }
    .e-de-op-close-icon {
        @if $skin-name !='bootstrap' {
            color: $dialog-btn-clr;
        }
    }
    .e-de-op-nav-btn {
        @if $skin-name !='tailwind' {
            height: $de-op-close-icon-width;
            width: $de-op-close-icon-width;
        }
    }
    .e-de-op-search-txt {
        border-bottom: $de-dlg-heading-main-border-bottom solid $search-result-hightlight-bdr-item;
        color: $de-dlg-heading-main-header;
        font-size: $de-dlg-heading-main-font-size;
    }
    .e-de-op-search-txt .e-de-op-search-word {
        color: $de-op-search-txt;
    }
    .e-de-op-more-less {
        display: inline-flex;
        margin-top: $de-op-more-less-mrgn-top;
    }

    @if $skin-name == "FluentUI" {
        .e-de-rp-more-less{
            .e-label{
                font-size: 14px !important;
            }
        }
    }

    .e-de-op-replacetabcontentdiv {
        margin-top: $de-op-more-less-mrgn-top;
    }
    label[for*="_wholeWord_e-de-ltr"] {
      @if $skin-name == "FluentUI" {
        left: 15px;
      }
      @else {
        left: 35px;
      }
    }
    label[for*="_wholeWord_e-de-rtl"] {
      @if $skin-name == "FluentUI" {
        right: 15px;
      }
      @else {
        right: 35px;
      }
    }
    .e-de-cell-dia-label-common {
        display: inline-block;
        font-size: $de-cell-margin-dia-common-font;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-cell-margin-dia-common-margin-bottom;
        margin-top: $de-cell-margin-dia-common-margin-top;
        width: $de-cell-margin-dia-common-width;
    }
    .e-de-cell-dia-options-label {
        font-weight: $de-para-dlg-heading-font-weight;
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-table-border-heading {
        @if $skin-name=='fluent2' {
            font-size: $de-border-dlg-border-sub-heading-fontsize;
        }
        @else {
            font-size: $de-border-dlg-border-label-fontsize;
        }
        font-weight: $de-border-dlg-border-label-font-weight;
        padding-bottom: $de-border-dlg-border-label-paddingbottom;
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-table-setting-heading {
        font-size: $de-border-dlg-setting-label-fontsize;
        font-weight: $de-border-dlg-border-label-fontweight;
        padding-bottom: $de-border-dlg-setting-label-paddingbottom;
    }
    .e-de-layout-setting-heading {
        font-size: $de-border-dlg-setting-label-fontsize;
        font-weight: $de-border-dlg-border-label-fontweight;
        padding-bottom: $de-border-dlg-setting-label-paddingbottom;
    }
    .e-de-table-setting-labels-heading {
        font-size: $de-border-dlg-settinglabels-fontsize;
        font-weight: $de-border-dlg-border-label-fontweight;
        margin-left: $de-table-alignment-label-margin-left;
    }
    .e-de-table-element-subheading {
        font-size: $de-border-dlg-settinglabels-fontsize;
        font-weight: $de-border-dlg-border-label-fontweight;
        @if $skin-name=='tailwind' {
            padding-bottom: 8px !important;
        }
    }
    .e-de-border-dlg-preview-div {
        border: $de-border-dlg-border-preview-div-width solid $de-border-dlg-border-preview-div-opacity;
        width: 80px;
        height: $e-de-border-dlg-preview-div-height;
    }
    .e-de-border-dlg-preview-inside-divs {
        opacity: $de-border-dlg-preview-inside-divs-opacity;
    }
    .e-de-tablecell-dia-align-div {
        border: $de-table-align-border-width solid $de-table-align-border-color;
        display: inline-block;
        height: $de-table-align-height;
        margin-right: $de-table-align-margin-right;
        width: $de-table-align-width;
    }
    .e-de-tablecell-dia-align-div.e-de-rtl {
        margin-left: $de-table-align-margin-right;
        margin-right: $de-table-align-margin-rgt-rtl;
    }
    .e-de-table-dia-align-label {
        display: inline-block;
        font-size: $de-table-alignment-label-font-size;
        @if $skin-name !='Material3' {
            font-weight: $de-header-font-weight;
        }
        margin-left: $de-table-alignment-label-margin-left;
        margin-top: $de-table-alignment-label-margin-top;
    }
    .e-de-table-dialog-separator-line {
        background-color: $de-table-separator-line-color;
        bottom: $de-table-separtor-line-top;
        display: none;
        height: $de-table-separator-line-height;
        left: $de-table-separator-line-left;
        margin-top: $de-table-dlg-separator-line-top;
        position: absolute;
        width: $de-table-separator-line-width;
    }
    .e-de-table-alignment-active {
        border: $de-table-align-active-border solid $de-table-align-active-color;
    }
    .e-de-table-dialog-options-label {
        @if $skin-name =='Material3' {
            font-size: $de-table-options-font-size;
            font-weight: $de-table-options-font-weight;
            padding-bottom: $de-table-options-padding-bottom;
        }
    }
    .e-de-table-dialog-size-label {
        padding-top: $de-table-options-padding-top !important;
        @if $skin-name =='Material3' {
            font-weight: 600;
            font-size: 12px;
        }
    }

    .e-de-list-ddl-header {
        font-size: $de-list-dlg-header-font-size;
        font-weight: $de-list-dlg-header-font-weight;
        margin-bottom: $de-list-dlg-header-margin-bottom;
        margin-top: $de-list-dlg-header-margin-top;
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-list-ddl-header-list-level {
        font-size: $de-list-dlg-header-font-size;
        font-weight: $de-list-dlg-header-font-weight;
        margin-bottom: $de-list-dlg-header-margin-bottom;
        @if $skin-name=='tailwind' {
            color: $de-dlg-heading-main-header;
        }
    }
    .e-de-tbl-dlg-footer {
        padding-top: $de-tbl-dlg-footer;
    }
    .e-de-row-ht-top,
    .e-de-cell-ht-top {
        padding: $de-cell-ht-top-padding $de-table-row-cell-pdng;
        @if $skin-name=='bootstrap5' or $skin-name=='tailwind' {
            width: 144px;
        }
        @else {
            width: 160px;
        }
    }
    .e-de-ht-wdth-type {
        margin-top: $de-hght-type-top;
        width: 120px;
    }
    .e-de-row-ht-top.e-de-rtl,
    .e-de-cell-ht-top.e-de-rtl {
        margin-left: $de-table-row-cell-pdng-left-rtl;
        margin-right: $de-table-row-cell-pdng;
    }
    .e-de-cell-width-top {
        margin-left: $de-cell-width-top-margin-left;
        margin-top: $de-cell-width-top-margin-top;
    }
    .e-de-cell-width-top.e-de-rtl {
        margin-left: $de-table-row-cell-pdng-left-rtl;
        margin-right: $de-cell-width-top-margin-left;
    }
    .e-de-tbl-dlg-border-btn {
        float: right;
        margin-top: $de-tbl-dlg-border-btn-margin-top;
    }
    .e-de-tbl-dlg-border-btn.e-de-rtl {
        float: left;
        margin-right: $de-tbl-dlg-border-btn-margin-right-rtl;
    }
    .e-de-table-border-setting.e-de-rtl {
        right: 5px;
    }
    .e-de-tbl-dlg-op-btn {
        left: $de-tbl-opt-btn-left;
        position: absolute;
        top: $de-tbl-opt-btn-top;
    }
    .e-de-insert-table-dlg-sub-header {
        display: block;
        font-size: $de-header-font-size;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-insert-table-title-bottom-margin;
        margin-top: $de-insert-table-title-top-margin;
    }
    .e-de-insert-footnote-dlg-sub-header,
    .e-de-insert-footnote-dlg-header {
        display: block;
        font-size: $de-header-font-size;
        font-weight: $de-header-font-weight;
        margin-bottom: $de-insert-table-title-bottom-margin;
        margin-top: $de-insert-table-title-top-margin;
    }
    .e-de-insert-footnote-dlg-header {
        margin-bottom: $de-insert-footnote-dlg-header-mrg-btm;
    }
    .e-de-insert-table-dlg-input {
        @if $skin-name == 'FluentUI' {
            display: inline-block;
        }
        margin-bottom: $de-insert-table-dlg-input-bottom;
    }
    .e-de-list-ddl-subheader,
    .e-de-list-ddl-subheaderbottom {
        font-size: $de-list-dlg-subheader-font-size;
        font-weight: $de-list-dlg-subheader-font-weight;
        margin-bottom: $de-list-dlg-subheader-margin-bottom;
        margin-top: $de-list-dlg-subheader-margin-top;
    }
    .e-de-list-dlg-subdiv {
        float: right;
        margin-top: $e-de-list-subdiv-margin-top;
        position: relative;
    }
    .e-de-list-dlg-subdiv.e-de-rtl {
        float: left;
        margin-top: $e-de-list-subdiv-margin-top-rtl;
    }
    .e-de-list-dlg-div {
        float: right;
        margin-top: $e-de-list-div-margin-top;
        position: relative;
    }
    .e-de-list-dlg-div.e-de-rtl {
        float: left;
        margin-top: $e-de-list-div-margin-top-rtl;
    }
    .e-de-ok-button {
        margin-right: $de-ok-insert-button-margin-right;
    }
    .e-de-ok-button.e-de-rtl {
        margin-left: $de-ok-insert-button-margin-right;
    }
    .e-de-options-setter {
        left: $de-options-buttons-left;
    }
    .e-de-op-close-icon:hover {
        color: $de-op-btn-icon-hover-clr;
    }
    .e-de-tooltip {
        background-color: $de-tooltip-bg-clr;
        box-shadow: $de-tooltip-shadow;
        color: $de-tooltip-color;
        cursor: text;
        display: table;
        max-width: 200px;
        padding: $de-tooltip-padding;
        word-wrap: break-word;
    }
    .e-de-form-popup {
        background-color: $de-tooltip-bg-clr;
        box-shadow: $de-tooltip-shadow;
        color: $de-tooltip-color;
        cursor: text;
        max-width: 350px;
        min-width: 300px;
        padding: $de-form-tooltip-padding;
        position: absolute;
        width: fit-content;
        word-wrap: break-word;
    }
    .e-de-save,
    .e-de-cancel {
        margin-left: $de-save-margin-left;
    }
    .e-btn.e-de-op-icon-btn {
        background-color: $de-op-btn-icon-bg;
        border-color: $de-op-btn-icon-border;
    }
    .e-documenteditor .e-de-op-close-button {
        left: 250px;
        position: absolute;
        top: $de-op-close-button-top;
        @if $skin-name=='bootstrap4' {
            padding-top: 0px;
        }
    }
    @if $skin-name=='bootstrap4' or $skin-name=='bootstrap5' or $skin-name=='bootstrap5.3' {

        .e-de-style-paragraph-indent-group-button .e-btn.e-active,
        .e-de-style-paragraph-group-button .e-btn.e-active,
        .e-de-style-font-group-button .e-btn.e-active {
            @if $skin-name !='tailwind' {
                background-color: $de-style-btn-bg-color;
                box-shadow: $de-toggle-btn-border;
                box-shadow: none;
                .e-btn-icon {
                  @if $skin-name !='bootstrap5' and $skin-name !='bootstrap5.3' {
                    color: $de-style-btn-color;
                  } @else if $skin-name =='bootstrap5.3' {
                    color: var(--color-sf-secondary-text-color-pressed);
                  }
                }
            }
        }

        .e-de-style-font-group-button,
        .e-de-style-paragraph-group-button,
        .e-de-style-paragraph-indent-group-button {
            .e-btn {
                background: $de-style-dlg-btn-bg-color;
                @if $skin-name !='Material3' {
                    border-color: $de-style-dlg-btn-border-color;
                }
                #{if(&, '&', '*')}:focus {
                    background-color: $de-style-btn-bg-color;
                    box-shadow: $de-toggle-btn-border;
                }
                #{if(&, '&', '*')}:active {
                    background-color: $de-style-btn-bg-color;
                    box-shadow: $de-toggle-btn-border;
                }
                #{if(&, '&', '*')}:hover {
                    background-color: $de-style-btn-bg-color;
                    box-shadow: $de-toggle-btn-border;
                }
            }
        }
        .e-de-style-font-group-button .e-btn:hover,
        .e-de-style-font-group-button .e-btn:focus,
        .e-de-style-font-group-button .e-btn:active,
        .e-de-style-font-group-button .e-btn:disabled,
        .e-de-style-paragraph-group-button .e-btn:hover,
        .e-de-style-paragraph-group-button .e-btn:focus,
        .e-de-style-paragraph-group-button .e-btn:active,
        .e-de-style-paragraph-group-button .e-btn:disabled {
            .e-btn-icon {
                @if $skin-name=='bootstrap5' or $skin-name=='bootstrap5.3' {
                    color: $de-style-btn-hover-color
                }
                @else {
                    color: $de-style-btn-color;
                }
            }
        }
        .e-de-style-font-group-button .e-btn-icon,
        .e-de-style-paragraph-group-button .e-btn-icon,
        .e-de-style-paragraph-indent-group-button .e-btn-icon {
            color: $de-prop-btn-icon-clr;
            font-size: $de-btn-font-size;
        }
        .e-de-style-paragraph-indent-group-button .e-btn:hover,
        .e-de-style-paragraph-indent-group-button .e-btn:focus,
        .e-de-style-paragraph-indent-group-button .e-btn:active,
        .e-de-style-paragraph-indent-group-button .e-btn:disabled {
            .e-btn-icon {
                color: $de-style-btn-color;
            }
        }
        .e-de-style-paragraph-indent-group-button .e-btn-icon {
            color: $de-prop-btn-icon-clr;
            font-size: $de-btn-font-size;
        }

        @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
            .e-de-style-font-color-picker .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
            .e-de-style-font-color-picker .e-btn.e-icon-btn,
            .e-de-dlg-clr-picker .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
            .e-de-dlg-clr-picker .e-btn.e-icon-btn,
            .e-de-font-dlg-display .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
            .e-de-font-dlg-display .e-colorpicker-wrapper .e-btn.e-icon-btn {
                padding: $e-de-style-font-color-picker-padding-top $e-de-style-font-color-picker-padding-right !important;
            }

            .e-de-rp-close-icon.e-btn {
                background: $de-rp-btn-bg-color;
                border: $e-de-rp-close-icon-border;
                color: $de-cmt-pant-content-font;
                opacity: 1;
            }

            .e-de-toc-dlg-style-input {
                margin-top: $e-de-toc-dlg-style-input-margin-top;
            }
            .e-de-list-container {
                background: $de-style-btn-color !important;
            }

            .e-documenteditor .e-de-op-close-button {
                top: 10px;
            }
            .e-de-styles,
            .e-de-bookmark {
                margin-top: $e-de-styles-margin-top !important;
            }
            .e-de-bookmark .e-bookmark-textbox-input {
                box-sizing: border-box !important;
            }
            .e-de-cp-option {
                background: transparent;
            }

            .e-styles-common {
                padding-top: $de-style-list-top;
            }
            .e-styles-list {
                margin-right: $de-style-list-top;
            }
            .e-de-font-dlg-display .e-split-btn-wrapper .e-btn {
                border-color: $de-style-toggle-btn-color;
            }
        }
    }
    @if $skin-name=='bootstrap5' or $skin-name=='FluentUI' {
        .e-de-restrict-pane {
            color: $content-text-color;
        }
    }
    @if $skin-name=='tailwind' {

        .e-de-style-font-group-button .e-btn:not(button:last-child),
        .e-de-style-paragraph-group-button .e-btn:not(button:last-child),
        .e-de-style-paragraph-indent-group-button .e-btn:not(button:last-child) {
            margin-right: 3px;
        }
        .e-style-font-fmaily-right:not(.e-bigger .e-style-font-fmaily-right) {
            width: 148px !important;
        }
        .e-de-rp-enforce-nav.e-de-rp-nav-lbl .e-label {
            font-size: 12px;
        }
        .e-de-cell-margin-top {
            padding-bottom: 0;
        }
        .e-de-ctnr-prop-label.e-de-table-prop-label {
            margin-bottom: 8px;
        }
        .e-de-search-tab-content .e-input-group .e-de-op-search-icon:active,
        .e-de-op-search-close-icon:active {
            color: $search-icon-bdr-clr !important;
        }
        .e-de-op-search-icon:hover,
        .e-de-op-search-close-icon:hover {
            color: $search-icon-hvr !important;
        }
        .e-de-enforce {
            font-weight: 500;
        }
        .e-de-page-setup-dlg-first-page-prop {
            margin-bottom: 8px;
        }
        .e-de-pagesetup-dlg-container .e-input-group {
            width: 184px !important;
        }
        .e-de-table-options-dlg-div .e-input-group {
            width: 187px !important;
        }
        .e-de-font-dlg .e-input-group,
        .e-de-list-dlg .e-input-group,
        .e-de-list-dlg .e-input {
            width: max-content !important;
        }
        .e-de-list-ddl-subheaderbottom {
            margin-top: 12px;
        }
        .e-de-style-based-para-div .e-input-group,
        .e-de-style-nametype-div .e-input-group,
        .e-de-style-nametype-div .e-input {
            width: 256px !important;
        }
        .e-de-list-ddl-subheader {
            width: auto !important;
        }
        .e-de-table-measure-lbl {
            width: 80px !important;
        }
        .e-de-style-font-group-button>button:last-child {
            margin-right: 6px;
        }
        .e-de-hdr-ftr-frst-page-div,
        .e-de-page-setup-dlg-sub-container,
        .e-de-div-seperate-dlg {
            margin-bottom: 12px;
        }
        .e-de-toc-dlg-tab-div {
            margin-top: 16px;
        }
        .e-bookmark-textbox-input {
            margin-top: 0px !important;
        }
        .e-de-table-cell-header-div,
        .e-de-table-header-div {
            margin-top: 4px !important;
        }
        .e-documenteditor {
            .e-tab .e-content .e-item {
                padding: 0;
            }
        }
        .e-de-table-cell-margin-dlg .e-input-group {
            width: 188px !important;
        }
        .e-de-restrict-pane {
            line-height: $de-rp-content-ln-ht;
        }
    }
    .e-de-restrict-pane {
        color: $de-input-color;
    }
    .e-de-op.e-de-rtl .e-de-search-tab-content {
        margin-left: $de-op-search-tab-content-margin-top;
        margin-right: $de-op-search-tab-content-margin-right;
    }
    .e-documenteditor .e-de-op-close-button.e-de-rtl {
        right: 255px;
    }
    .e-de-table-measure-lbl {
        font-size: $de-tbl-measure-lbl-font-size;
        font-weight: $de-header-font-weight;
        display: block;
        margin-bottom: $de-row-height-bottom-margin;
    }
    .e-de-tbl-indent-lbl {
        font-weight: $de-header-font-weight;
        font-size: $de-tbl-indent-lb-fnt-size;
        position: relative;
        display: block;
        margin-bottom: $de-tbl-indent-lbl-mrgn-btm;
        top: $de-tbl-indent-lbl-top;
    }
    .e-btn.e-de-op-close-button:hover {
        background-color: $de-op-btn-icon-bg;
        border-color: $de-op-btn-icon-border;
        color: $de-op-btn-icon-hover-clr;
    }
    .e-btn.e-de-op-close-button:focus {
        background-color: $de-op-btn-icon-bg;
        border-color: $de-op-btn-icon-border;
        color: $de-op-btn-icon-hover-clr;
    }
    .e-btn.e-de-op-close-button:active {
        background-color: $de-op-btn-icon-bg;
        border-color: $de-op-btn-icon-border;
        color: $de-op-btn-icon-active-clr;
    }
    .e-documenteditor {
        .e-input {
            font-size: $de-documenteditor-font-size;
        }
    }
    .e-de-dlg-target .e-footer-content {
        .e-control.e-btn.e-flat:not(.e-icon-btn) {
            height: $de-dlg-btn-height;
        }
    }
    .e-dialog .e-footer-content {
        @if $skin-name == 'tailwind3' {
            border: $de-border-dlg-clr-border;
            border-bottom-left-radius: $de-border-dlg-clr-radius-bottom;
            border-bottom-right-radius: $de-border-dlg-clr-radius-bottom;
        }
    }
    .e-de-tbl-dlg-border-btn .e-control.e-btn.e-flat:not(.e-icon-btn) {
        height: auto;
    }
    .e-de-op-result-container {
        margin-top: $de-op-result-container-margin-top;
    }
    .e-de-restrict-pane,
    .e-de-op {
        background: $de-op-bg-color;
    }
    .e-de-restrict-pane,
    .e-de-op {
        .e-tab-header .e-toolbar-items {
            margin-bottom: $de-op-tab-header-margin-bottom;
            margin-top: $de-op-tab-header-margin-top;
        }
    }
    .e-de-font-dlg-color {
        border: $de-font-color-border;
        border-radius: $de-font-color-border-radius;
        font-size: $de-font-color-font-size;
        height: $e-de-font-dlg-color-height;
        margin-left: $de-font-color-margin-left;
        width: 25px;
    }
    .e-de-icon-table-row-above {
        top: $de-icon-table-row-above-top;
    }
    .e-de-icon-table-row-below {
        top: $de-icon-table-row-below-top;
    }
    .e-de-icon-table-column-left {
        top: $de-icon-table-column-left-top;
    }
    .e-de-icon-table-column-right {
        top: $de-icon-table-column-right-top;
    }
    .e-de-icon-table-delete {
        top: $de-icon-table-delete-top;
    }
    .e-de-icon-table-row-delete {
        top: $de-icon-table-row-delete-top;
    }
    .e-de-icon-table-column-delete {
        top: $de-icon-table-column-delete-top;
    }
    .e-de-list-bullet-none {
        height: $e-de-list-bullet-height;
        width: 40px;
    }
    .e-de-list-bullet-dot {
        height: $e-de-list-bullet-height;
        width: 40px;
    }
    .e-de-list-bullet-circle {
        height: $e-de-list-bullet-height;
        width: 40px;
    }
    .e-de-list-bullet-square {
        height: $e-de-list-bullet-height;
        width: 40px;
    }
    .e-de-list-bullet-flower {
        height: $e-de-list-bullet-height;
        width: 40px;
    }
    .e-de-list-bullet-arrow {
        height: $e-de-list-bullet-height;
        width: 40px;
    }
    .e-de-list-bullet-tick {
        height: $e-de-list-bullet-height;
        width: 40px;
    }
    .e-de-bullet:hover {
        background: $de-bullet-list-hover-color;
    }
    .e-de-list-numbered-none {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-list-numbered-number-dot {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-list-numbered-number-brace {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-list-numbered-up-roman {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-list-numbered-up-letter {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-list-numbered-low-letter-brace {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-numbered-low-letter-dot {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-list-numbered-low-roman {
        height: $e-de-list-numbered-height;
        width: 80px;
    }
    .e-de-numbered:hover {
        background: $de-number-list-hover-color;
    }
    .e-de-list-multilevel-none {
        height: $e-de-list-multilevel-height;
        width: 80px;
    }
    .e-de-list-multilevel-list-normal {
        height: $e-de-list-multilevel-height;
        width: 80px;
    }
    .e-de-list-multilevel-list-multilevel {
        height: $e-de-list-multilevel-height;
        width: 80px;
    }
    .e-de-list-multilevel-list-bullets {
        height: $e-de-list-multilevel-height;
        width: 80px;
    }
    .e-de-multilevel-list:hover {
        background: $de-multilevel-list-hover-color;
    }
    .e-de-list-dialog-open:hover {
        background: $de-list-dialog-hover-color;
    }
    .e-de-cell-options {
        left: $de-cell-options-left;
        top: $de-cell-options-top;
    }
    .e-de-cell-options.e-de-rtl {
        left: $de-cell-options-rtl;
    }
    .e-de-font-color-label {
        margin-bottom: $de-font-color-margin-bottom;
        margin-right: $de-font-color-margin-top;
        margin-top: $de-font-color-margin-top;
    }
    .e-de-font-content-label {
        width: $de-font-label-width;
    }
    .e-de-font-color-margin {
        margin-right: $de-font-dlg-color-margin-right;
        margin-top: $de-font-dlg-color-margin-top;
    }
    .e-de-font-color-margin.e-de-rtl {
        margin-left: $de-font-dlg-color-margin-right;
        margin-right: $e-de-font-color-margin-right;
    }
    .e-de-font-content-checkbox-label {
        margin-left: $de-font-content-checkbox-left;
    }
    .e-de-font-content-checkbox-label-rtl {
        margin-right: $de-font-content-checkbox-right;
    }
    .e-de-font-checkbox {
        margin-top: $de-font-style-margin;
    }
    .e-de-font-checkbox-transform {
        margin-left: $de-font-checkbox-ltr;
    }
    .e-de-font-checkbox-transform.e-de-rtl {
        margin-left: $de-font-checkbox-margin-left;
        margin-right: $de-font-checkbox-ltr;
    }
    .e-de-font-checkbox-transform-label {
        margin-bottom: $de-font-style-margin;
        margin-top: $de-font-style-margin;
    }
    .e-de-font-checkbox.e-de-rtl {
        margin-left: $de-font-checkbox-margin-left;
        margin-right: $de-font-checkbox-ltr;
    }
    .e-de-font-checkbox.e-de-rtl {
        margin-left: $de-font-checkbox-margin-left;
        margin-right: $de-font-checkbox-left;
    }
    .e-de-font-clr-div {
        margin-top: $de-font-clr-div-mrgn-top;
    }
    .e-de-font-dlg-padding {
        margin-top: $de-font-dlg-margin-top;
    }
    .e-de-table-container-div {
        margin-top: $de-table-container-margin-top;
    }
    .e-de-table-header-div {
        padding-top: $de-table-header-padding-top;
    }
    .e-de-table-subheader-div {
        float: right;
        margin-right: $de-table-subheader-div-margin-right;
        margin-top: $de-table-subheader-div-margin-top;
    }
    .e-de-table-subheader-div.e-de-rtl {
        float: left;
        margin-left: $de-table-subheader-div-margin-right;
        margin-right: $de-table-subheader-div-margin-rgt-rtl;
    }
    .e-de-table-cell-header-div {
        padding-top: $de-table-header-padding-top;
    }
    .e-de-table-cell-subheader-div {
        top: $de-cell-subheader-top;
    }
    .e-de-cell-margin-header {
        left: $de-cell-margin-header-left;
        top: $de-cell-margin-header-top;
    }
    .e-de-tbl-margin-sub-header {
        margin-top: $de-tbl-margin-sub-header;
    }
    .e-de-tbl-btn-separator {
        width: $de-tbl-btn-separator;
    }
    .e-de-op-msg {
        color: $de-op-container-messagediv-color;
        top: 79px;
    }
    .e-de-save-dlg-file-name {
        height: $e-de-save-dlg-height;
        margin-bottom: $de-save-dlg-file-name-margin-bottom;
    }
    .e-de-save-dlg-format-type {
        height: $e-de-save-dlg-height;
        margin-bottom: $de-save-dlg-format-type-margin-bottom;
        padding-top: $de-save-dlg-format-type-padding;
    }
    .e-de-search-tab-content {
        margin-top: $de-op-search-tab-content-margin-top;
        width: $de-op-search-text-box-container-width;
    }
    .e-de-font-dlg {
        width: $de-font-dlg-width;
        @if $skin-name == 'Material3' {
            padding: 8px
        }
    }
    .e-de-hyperlink {
        width: $de-hyper-link-width;
    }
    @if $skin-name =='Material3'{
        .e-de-table-border-shading-dlg {
            .e-de-dlg-row .e-de-dlg-row label {
                margin-left: 10px;
            }
        }
        .e-de-table-setting-heading {
            line-height: 22px;
            letter-spacing: 0.30000001192092896px;
        }
        .e-de-rp-btn-enforce {
            border-radius: 4px !important;
        }
        .e-de-track-toolbar .e-de-track-pane-drop-btn, #e-de-menu-option {
            background: none;
        }
    }
    .e-de-insert-table {
        height: $de-insert-table-height;
        width: $de-insert-table-width;
    }
    .e-de-insert-footnote {
        height: $de-insert-footnote-height;
        width: $de-insert-footnote-width;
    }
    .e-de-insert-spellchecker {
        height: $de-insert-spellchecker-height;
        width: $de-insert-spellchecker-width;
        font-weight: $de-header-font-weight;
    }
    .e-de-dlg-spellcheck-listview {
        @if $skin-name !='tailwind' {
            border: $de-dlg-spellcheck-listview-border solid $de-spellcheck-listview-border-color;
            border-radius: $de-dlg-spellcheck-listview-border-radius !important;
        }
        height: $de-spellcheck-listview-height !important;
        margin-right: $de-bookmark-list-margin-right;
        margin-top: $de-bookmark-list-margin-top;
        position: relative;
        float: left;
        width:$de-spellcheck-list-width;
    }
    .e-de-dlg-spellcheck-listview.e-de-rtl {
        float: right;
    }
    .e-de-spellcheck-error-container {
        height: $de-spellcheck-container-height;
        margin-bottom: $de-spellcheck-container-gap;
        display: flex;
    }
    .e-de-spellcheck-suggestion-container {
        height: $de-spellcheck-container-height;
        margin-bottom: $de-spellcheck-container-gap;
        display: flex;
    }
    .e-dlg-spellcheck-listitem {
        font-size: $de-spellcheck--listitem-font-size !important;
    }
    .e-de-spellcheck-btncontainer {
        margin-top: $de-spellcheck-btn-container-margin-top;
        position: relative;
        width:$de-spellcheck-btn-container-width;
        float: right;
    }
    .e-de-spellcheck-btncontainer.e-de-rtl {
        float: left;
    }
    .e-de-spellcheck-btn {
        margin-bottom:$de-padding-half-bigger;
        width:$de-spellcheck-btn-width;
    }
    .e-de-dlg-spellchecker-subheader {
        margin-top: $de-dlg-spellchecker-subheader-margin-top;
        @if $skin-name=='tailwind' {
            font-size: 14px;
            margin-top: 4px;
        }
        @else {
            font-size: $de-dlg-spellchecker-subheader-font-size;
        }
    }
    .e-de-dlg-spellchecker-subheaderbtm {
        @if $skin-name=='tailwind' {
            font-size: 14px;
        }
        @else {
            font-size: $de-dlg-spellchecker-subheaderbtm-font-size;
        }
    }
    .e-de-list-dlg {
        height: $de-list-dlg-height;
        width: $de-list-dlg-width;
    }
    .e-de-save-dlg {
        height: $de-save-dlg-height;
        width: $de-save-dlg-width;
    }
    .e-de-table-properties-dlg {
        @if $skin-name =='Material3' {
            padding: 0px 8px;
        }
        width: $de-table-ppty-dlg-width;
    }
    .e-de-table-border-shading-dlg {
        width: $de-table-border-shading-dlg-width;
        @if $skin-name =='Material3'{
            height: 400px
        }
    }
    .e-de-table-cell-margin-dlg {
        height: $de-table-cell-margin-dlg-height;
        width: $de-table-cell-margin-dlg-width;
        @if $skin-name =='Material3' {
            padding: 0px 8px
        }
    }
    .e-de-table-options-dlg {
        height: $de-table-options-dlg-height;
        width: $de-table-options-dlg-width;
    }
    .e-de-table-border-none {
        position: absolute;
        top: $de-table-border-none-top;
    }
    .e-de-table-border-box {
        position: absolute;
        top: $de-table-border-box-top;
    }
    .e-de-table-border-all {
        position: absolute;
        top: $de-table-border-all-top;
    }
    .e-de-table-border-custom {
        position: absolute;
        top: $de-table-border-custom-top;
    }
    .e-de-table-shading-preview {
        top: $de-table-shading-preview-top;
    }
    .e-de-font-label span.e-label {
        color: $de-checkbox-wrapper-color;
    }
    .e-de-font-content-label:hover .e-label,
    .e-css.e-de-font-content-label:hover .e-label {
        color: $de-checkbox-wrapper-color;
    }
    .e-de-font-label:hover .e-label,
    .e-css.e-de-font-label:hover .e-label {
        color: $de-checkbox-wrapper-color;
    }
    .e-de-op-dlg-footer {
        margin-top: $de-op-dlg-footer-margin-top;
    }
    .e-de-op-dlg-footer .e-btn {
        padding-left: $de-op-dlg-footer-padding-left;
        padding-right: $de-op-dlg-footer-padding-right;
    }
    .e-de-search-tab-content .e-input-group .e-de-search-input {
        width: $de-op-search-input-width;
    }
    .e-de-op-replacewith {
        width: $de-op-replacewith-width;
    }
    .e-de-table-ppty-tab {
        border: $de-table-ppty-tab-border;
    }
    .e-de-list-format-info {
        border-radius: $de-ff-cmt-avatar-border-radius;
        cursor: default;
        font-size: $de-list-info-btn-font-size !important;
        height: $e-de-list-format-info-height;
        line-height: $de-list-info-btn-line-height;
        padding: $de-list-info-btn-padding !important;
        text-transform: lowercase;
        width: 16px;
    }
    .e-button-custom {
        height: $de-bookmark-custom-btn-height;
        width: 100%;
    }
    .e-styles-listview,
    .e-bookmark-listview {
        border: $bookmark-listview-border solid $bookmark-listview-border-color;
        border-radius: $de-bookmark-list-view-border-radius;
        height: $e-styles-bookmark-listview-height;
        overflow-y: scroll;
    }
    .e-bookmark-gotobutton,
    .e-bookmark-addbutton,
    .e-styles-addbutton,
    .e-bookmark-deletebutton {
        margin-bottom: $de-bookmark-deletebutton-margin-bottom;
    }
    .e-bookmark-list {
        float: left;
        margin-right: $de-bookmark-list-margin-right;
        width: 250px;
    }
    .e-bookmark-list.e-de-rtl {
        margin-left: $de-bkmrk-list-margin-left;
        margin-right: $de-bkmrk-list-margin-right-rtl;
    }
    .e-bookmark-textboxdiv {
        margin-bottom: $de-bookmark-textbox-margin-bottom;
    }
    .e-bookmark-listview .e-list-item {
        font-size: $de-bookmark-listview-font-size;
        height: $e-bookmark-listview-height;
        line-height: $de-bookmark-listview-line-height;
    }
    .e-bookmark-common {
        display: flex;
    }
    .e-bookmark-button {
        position: relative;
        top: $de-bookmark-button-div-top-position;
    }
    .e-font {
        float: left;
    }
    .e-font-rtl {
        float: right;
    }
    .e-de-table-border-toptop-alignment,
    .e-de-table-border-topcenter-alignment,
    .e-de-table-border-topbottom-alignment,
    .e-de-table-border-diagionalup-alignment,
    .e-de-table-border-diagionaldown-alignment,
    .e-de-table-border-bottomleft-alignment,
    .e-de-table-border-bottomcenter-alignment,
    .e-de-table-border-bottomright-alignment {
        left: $de-table-border-dlg-alignments-left;
        position: relative;
        top: $de-table-border-preview-top;
        transform: $de-table-border-dlg-alignments-transform;
    }
    .e-de-style-properties,
    .e-de-style-formatting {
        font-size: $de-style-heading-font-size;
        font-weight: $de-style-heading-font-weight;
        color: $de-dlg-heading-main-header;
    }
    .e-de-style-formatting {
        margin-bottom: $de-style-dialog-style-formatting-bottom-margin;
    }
    .e-de-style-paragraph-indent-group-button .e-btn,
    .e-de-style-paragraph-group-button .e-btn,
    .e-de-style-font-group-button .e-btn {
        box-shadow: none;
    }
    .e-de-table-options-dlg-div {
        height: auto;
        position: relative;
        margin-bottom: $de-dlg-table-options-margin-bottom;
        width: $de-dlg-table-options-content-div;
    }
        @if $skin-name !='bootstrap4' and $skin-name !='bootstrap5.3' and $skin-name !='tailwind' {
            .e-de-style-paragraph-indent-group-button .e-btn.e-active,
            .e-de-style-paragraph-group-button .e-btn.e-active,
            .e-de-style-font-group-button .e-btn.e-active {
                background-color: $de-style-btn-active-bg-border-color;
                border-color: $de-style-btn-active-bg-border-color;
                box-shadow: none;
                color: $de-style-btn-active-text-color;
            }
        }
        .e-de-style-properties {
            margin-bottom: $de-style-dialog-style-ppties-bottom-margin;
        }
        .e-de-style-nametype-div {
            margin-bottom: $de-style-dialog-style-name-type-div-bottom-margin;
        }
        .e-de-style-based-para-div {
            margin-bottom: $de-style-dialog-style-based-para-div-bottom-margin;
        }
        .e-de-style-name,
        .e-de-style-styletype,
        .e-de-style-style-based-on,
        .e-de-style-style-paragraph {
            font-weight: $de-header-font-weight;
            margin-bottom: $de-style-dialog-label-bottom-margin;
            font-size: $de-style-font-size;
            @if $skin-name !='tailwind' {
                width: 180px;
            }
        }
        .e-de-style-left-div {
            margin-right: $de-style-dialog-style-left-div-right-margin;
        }
        .e-de-style-left-div.e-de-rtl {
            margin-left: $de-style-dialog-style-left-div-right-margin;
            margin-right: $de-style-dialog-style-left-div-margin-right-rtl;
        }
        @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
            .e-de-style-font-color-picker,
            .e-de-style-icon-button-size,
            .e-de-style-icon-button-first-size,
            .e-de-style-icon-button-last-size {
                height: $e-de-style-font-color-picker-height;
            }
        }

        @if $skin-name =='Material3' {
            .e-de-style-font-group-button button,
            .e-de-style-paragraph-indent-group-button button,
            .e-de-style-paragraph-group-button button {
                width: 36px;
                border-radius: 4px;
                margin-right: 5px;
                background: $de-style-dlg-btn-bg-color;
            }
        }

        .e-de-style-bold-button-size {          
            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'Fluent' and $skin-name != 'Material3' {
                margin-right: $de-style-dialog-label-right-margin;
                height: $e-de-style-bold-button-size-height;
            }
            @if $skin-name=='fluent2' {
                margin-left: 0;
                border-left: 0;
                border-right: 0;
                height: 31px;
                margin-right: 0px;
            }
            @else {
                margin-left: $de-style-dialog-label-bottom-margin;
            }   
        }
        .e-de-style-format-dropdwn .e-btn-icon {
            margin-left: $de-style-format-dropdwn-margin-left;
        }
        @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI'  {
            .e-de-style-font-color-picker,
            .e-de-style-icon-button-size {
                @if $skin-name=='fluent2' {
                    margin-right: 0;
                }
                @else {
                    margin-right: $de-style-dialog-label-bottom-margin;
                }
            }
        }
        .e-de-style-icon-button-first-size {
            @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name != 'FluentUI' {
                margin-right: $e-de-style-icon-button-first-size-margin-right;
            }
            @if $skin-name=='fluent2' {
                margin-right: 0;
                margin-left: 0;
            }
            @else{
                margin-left: $de-style-dialog-label-bottom-margin;
            }
        }
        .e-de-style-icon-button-last-size {
            margin-right: $de-style-dialog-label-bottom-margin;
        }
        .e-de-style-font-color-picker {
            margin-left: $de-style-dialog-label-bottom-margin;
        }
        .e-style-font-fmaily-right {
            margin-right: $de-style-dialog-label-bottom-margin;
        }
        .e-style-font {
            margin-left: $de-style-font-margin-left;
            margin-right: $de-style-font-margin-right;
        }
        .e-de-style-dlg-name-input {
            height: $e-de-style-input-text-height;
        }
        .e-style-list {
            margin-left: $de-style-list-margin-left;
        }
        .e-de-style-dialog .e-de-style-only-this-document {
            margin-top: $e-de-style-dialog-margin-top;
        }
        .e-de-style-format-dropdwn {
            @if $skin-name == 'FluentUI' {
              width: 145px;
            } 
            @else 
            {
              width: 135px;
              @if $skin-name =='Material3' {
                background: $de-style-dlg-btn-bg-color;
                border-radius: 2px;
              }
            }
        }
        .e-de-style-options-div,
        .e-de-style-options-div>div:first-child {
            margin-bottom: $de-style-dialog-option-div-bottom-margin !important;
        }
        .e-de-style-paragraph-group-button {
            @if $skin-name !='Material3' {
                border-right: $de-style-toggle-btn-border-right solid $de-style-toggle-btn-color;
            }
            @if $skin-name=='fluent2' {
                border-right: 0;
                border-left: 0;
            }
        }
        .e-de-style-font-group-button {
            @if $skin-name !='Material3' {
                border-left: $de-style-toggle-btn-border solid $de-style-toggle-btn-color;
                border-right: $de-style-toggle-btn-border solid $de-style-toggle-btn-color;
            }
            @if $skin-name=='bootstrap5' or $skin-name == 'FluentUI' {
                padding-right: $de-style-dialog-option-div-bottom-margin;
            }
            @if $skin-name=='fluent2' {
                margin-right: 10px;
                border-left: 0;
                border-right: 0;
            }
        }
        .e-de-op-replace-messagediv {
            color: $de-op-container-messagediv-color;
            top: auto;
        }
        @if $skin-name !='bootstrap5' and  $skin-name !='FluentUI' { 
            .e-de-font-content-label .e-label,
            .e-de-font-dlg-cb-right .e-label,
            .e-de-font-checkbox .e-label {
                font-size: $de-font-checkbox-label-font-size;
                @if $skin-name=='tailwind' {
                    line-height: 1.5;
                }
            }
            .e-de-font-content-label .e-frame,
            .e-de-font-dlg-cb-right .e-frame,
            .e-de-font-checkbox .e-frame,
            .e-de-font-content-label-caps .e-frame,
            .e-de-cntr-pane-padding .e-frame {
                height: $de-checkbox-height;
                line-height: $de-checkbox-line-height;
                width: $de-checkbox-width;
            }
        }
        .e-de-op-input-group,
        .e-de-op-replacewith {
            height: $de-op-input-group-height;
        }
        .e-de-hyperlink-bookmark-check {
            margin-top: $de-hyperlink-bookmark-check-margin-top;
        }
        @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name !='FluentUI' {
            .e-de-table-container-div .e-checkbox-wrapper .e-frame,
            .e-de-table-header-div .e-checkbox-wrapper .e-frame,
            .e-de-table-ppty-options-break .e-checkbox-wrapper .e-frame,
            .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-frame,
            .e-de-table-cell-header-div .e-checkbox-wrapper .e-frame,
            .e-de-tbl-btn-separator .e-checkbox-wrapper .e-frame,
            .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame,
            .e-de-tbl-margin-sub-header .e-frame {
                height: $de-checkbox-height;
                line-height: $de-checkbox-line-height;
                width: $de-checkbox-width;
            }
            .e-de-table-container-div .e-checkbox-wrapper .e-label,
            .e-de-table-header-div .e-checkbox-wrapper .e-label,
            .e-de-table-ppty-options-break .e-checkbox-wrapper .e-label,
            .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-label,
            .e-de-table-cell-header-div .e-checkbox-wrapper .e-label,
            .e-de-tbl-btn-separator .e-checkbox-wrapper .e-label,
            .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-label,
            .e-de-tbl-margin-sub-header .e-label {
                font-size: $de-table-container-div-font-size;
            }
        }
        .e-de-table-container-div .e-checkbox-wrapper .e-label,
        .e-de-table-header-div .e-checkbox-wrapper .e-label,
        .e-de-table-ppty-options-break .e-checkbox-wrapper .e-label,
        .e-de-table-ppty-options-header-row .e-checkbox-wrapper .e-label,
        .e-de-table-cell-header-div .e-checkbox-wrapper .e-label,
        .e-de-tbl-btn-separator .e-checkbox-wrapper .e-label,
        .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-label,
        .e-de-tbl-margin-sub-header .e-label {
            font-size: $de-table-container-div-font-size;
        }
        .e-de-table-ppty-dlg-measure-div {
            float: right;
            margin-left: $de-table-ppty-dlg-measure-div-margin-left;
            margin-top: $de-table-ppty-dlg-measure-margin-top;
        }
        .e-de-table-ppty-dlg-measure-div.e-de-rtl {
            float: left;
            margin-left: $de-table-ppty-dlg-measure-div-margin-lft-rtl;
            margin-right: $de-table-ppty-dlg-measure-div-margin-left;
        }
        .e-de-table-ppty-dlg-measure-drop-down-div {
            float: right;
            margin-left: $de-table-ppty-dlg-measure-div-margin-left;
            margin-top: $de-table-ppty-dlg-measure-div-margin-top;
            width: 120px;
        }
        .e-de-table-ppty-dlg-measure-drop-down-div.e-de-rtl {
            margin-left: $de-table-ppty-dlg-measure-div-margin-lft-rtl;
            margin-right: $de-table-ppty-dlg-measure-div-margin-left;
        }
        .e-de-table-ppty-dlg-left-indent-container {
            @if $skin-name =='Material3' {
                bottom: $e-de-table-ppty-dlg-left-indent-container-bottom;
                left: $de-table-prop-left-indnt-cntr-pos;
                position: relative;
            }
        }
        .e-de-table-ppty-dlg-left-indent-container.e-de-rtl {
            @if $skin-name =='Material3' {
                right: $de-table-prop-left-indnt-cntr-pos;
            }
        }
        .e-de-table-ppty-dlg-row-height-label {
            float: right;
            margin-right: $de-table-ppty-dlg-row-height-label-margin-right;
            margin-top: $de-table-ppty-dlg-row-height-label-margin-top;
        }
        .e-de-table-ppty-dlg-row-height-label.e-de-rtl {
            float: left;
            margin-left: $de-table-ppty-dlg-row-height-label-margin-right;
            margin-right: $de-table-ppty-dlg-row-height-label-margin-rgt-rtl;
        }
        .e-de-table-ppty-dlg-preferred-width-div {
            float: right;
            margin-left: $de-table-ppty-dlg-preferred-width-margin-left;
            margin-top: $de-table-ppty-dlg-preferred-width-margin-top;
            width: 120px;
        }
        .e-de-table-ppty-dlg-preferred-width-div.e-de-rtl {
            margin-left: $de-table-ppty-dlg-preferred-width-margin-lft-rtl;
            margin-right: $de-table-ppty-dlg-preferred-width-margin-left;
            width: 120px;
        }
        .e-de-table-ppty-options-break {
            margin-bottom: $de-table-ppty-options-break-margin-bottom;
        }
        .e-de-table-cell-subheader-div {
            margin-right: $de-table-cell-subheader-div-margin-right;
            margin-top: $de-table-cell-subheader-div-margin-top;
        }
        .e-de-table-cell-subheader-div.e-de-rtl {
            margin-left: $de-table-cell-subheader-div-margin-right;
            margin-right: $de-table-cell-subheader-div-margin-rgt-rtl;
        }
        .e-de-table-ppty-dlg-cell-tab-measure-label {
            float: right;
            margin-right: $de-table-ppty-dlg-cell-tab-measure-label-margin-right;
            margin-top: $de-table-ppty-dlg-cell-tab-measure-label-margin-top;
        }
        .e-tab .e-tab-header .e-toolbar-item .e-de-table-ppty-dlg-row-header {
            padding-left: $de-table-ppty-dlg-table-header-padding;
            padding-right: $de-table-ppty-dlg-table-header-padding;
        }
        .e-tab .e-tab-header .e-toolbar-item .e-de-table-ppty-dlg-cell-header {
            padding-left: $de-table-ppty-dlg-table-header-padding;
            padding-right: $de-table-ppty-dlg-table-header-padding;
        }
        .e-tab .e-tab-header .e-toolbar-item .e-de-page-setup-dlg-margin-tab-header {
            padding-left: $de-table-ppty-dlg-table-header-padding-left;
            padding-right: $de-table-ppty-dlg-table-header-padding;
        }
        .e-styles-list {
            float: left;
            margin-right: $de-bookmark-listview-margin-right;
            width: 250px;
        }
        .e-styles-textboxdiv {
            padding-bottom: $de-styles-textboxdiv-padding-bottom;
        }
        .e-styles-listview .e-list-item {
            @if $skin-name=='fluent2' {
                font-size: 14px;
                color: $de-sub-header-color;
            }
            @else {
                font-size: $styles-listview-font-size;
            }
            height: $e-styles-listview-height;
            line-height: $styles-listview-line-height;
        }
        .e-styles-common {
            padding-top: $styles-common-padding-top;
        }
        .e-styles-button {
            float: right;
        }
        .e-de-toc-dlg-right-sub-container.e-de-rtl {
            margin-left: $de-toc-dlg-right-sub-container-margin-right;
            margin-right: $de-toc-dlg-right-sub-container-margin-right;
        }
        .e-de-toc-dlg-styles {
            margin-bottom: $de-toc-dlg-styles-margin-bottom;
            margin-left: $de-toc-dlg-styles-margin-left;
            margin-top: $de-toc-dlg-styles-margin-top;
        }
        .e-de-toc-dlg-styles.e-de-rtl {
            margin-left: $de-toc-dlg-styles-margin-lft-rtl;
            margin-right: $de-toc-dlg-styles-margin-left;
        }
        .e-de-toc-dlg-style-input.e-de-rtl {
            margin-left: $de-toc-dlg-style-input-margin-lft-rtl;
            margin-right: $de-toc-dlg-style-input-margin-left;
        }
        .e-de-toc-table-div .e-de-toc-dlg-toc-level {
            height: $e-de-toc-table-height;
            margin-left: $de-toc-dlg-toc-level-margin-left;
            width: 44px;
        }
        .e-de-toc-styles-table-div {
            border: $de-toc-list-view-border solid $de-toc-list-view-border-color;
            border-radius: $de-toc-styles-table-div-border-radius;
            margin-top: $de-toc-styles-table-div-margin-top;
            width: $de-toc-list-view-width;
            height: $de-toc-table-list-view-height;
        }
        .e-de-toc-dlg-sub-level-heading {
            font-size: $de-toc-dlg-sub-level-heading-font-size;
        }
        .e-de-toc-table-div {
            height: $e-de-toc-table-div-height;
            overflow-y: scroll;
            width: $de-toc-table-div-width;
        }
        .e-de-toc-dlg-style-input {
            margin-bottom: $de-toc-dlg-style-input-margin-bottom;
            margin-left: $de-toc-dlg-style-input-margin-left;
            width: $de-toc-dlg-style-input-width;
        }
        .e-de-toc-dlg-outline-levels {
            margin-top: $de-toc-dlg-outline-levels-margin-top;
            width: $de-toc-dlg-outline-levels-width;
        }
        .e-bookmark-textboxdiv .e-bookmark-textbox-input {
            height: $de-bookmark-textbox-height;
        }
        .e-styles-dlgfields {
            font-weight: $de-header-font-weight;
            margin-bottom: $de-header-margin-bottom;
        }
        .e-tab .e-tab-header .e-toolbar-item .e-de-op-find-tab-header {
            padding-left: $de-op-tab-header-padding-left;
            padding-right: $de-op-tab-header-padding;
        }
        .e-tab .e-tab-header .e-toolbar-item .e-de-op-replace-tab-header {
            padding-left: $de-op-tab-header-padding-left;
            padding-right: $de-op-tab-header-padding;
        }
        .e-de-dlg-target .e-footer-content .e-list-dlg-font {
            margin-left: $de-list-dlg-font-margin-left;
        }
        .e-bookmark-dlgfields {
            font-weight: $de-header-font-weight;
            font-size: $de-dlg-bkm-fld-fnt-size;
            margin-bottom: $de-bookmark-dlgfields-margin-bottom;
        }
        .e-de-ui-wfloating-menu.e-de-ui-bullets-menu .e-de-ui-wfloating-menuitem-md {
            height: $de-floating-menu-height;
            padding: $de-floating-menu-padding;
            width: $de-floating-menu-width;
        }
        .e-de-ui-wfloating-menu.e-de-ui-bullets-menu .e-de-ui-wfloating-bullet-menuitem-md {
            height: $e-de-ui-wfloating-menu-height;
            width: 45px;
        }
        .e-de-bullet-icon-size {
            height: $e-de-bullet-icon-size-height;
            width: 45px;
        }
        .e-de-ui-list-header-presetmenu {
            cursor: pointer;
            font-size: $de-ui-list-header-presetmenu-font-size;
            line-height: $de-ui-list-header-presetmenu-line-height;
            min-width: $de-ui-list-header-presetmenu-min-width;
            overflow: hidden;
            text-align: left;
            white-space: nowrap;
            width: 100%;
            @if $skin-name=='tailwind' {
                color: $icon-color;
            }
        }
        .e-de-number-bullet-dlg .e-tab .e-content .e-item {
            padding: $de-number-bullet-dlg-padding;
        }
        .e-de-number-bullet-dlg {
            width: $de-bullet-numbered-dlg-width;
        }
        .e-de-style-numbered-list,
        .e-de-ui-bullet-list-header-presetmenu {
            height: $de-bullet-numbered-dlg-height;
        }
        .e-de-ui-bullet {
            font-size: $de-ui-bullet-font-size;
        }
        .e-de-ui-list-header-presetmenu .e-de-ui-list-line {
            border-bottom: $de-numbering-list-border-bottom solid $de-numbering-list-line-color;
            margin-left: $de-numbering-list-margin-left;
            width: 100%;
        }
        .e-de-ui-list-header-presetmenu div span {
            color: $de-numbering-list-span-color;
            display: inline-block;
            vertical-align: middle;
        }
        .e-de-ui-wfloating-menu .e-de-ui-wfloating-menuitem,
        .e-de-ui-wfloating-menu .e-de-ui-menuitem-none {
            border: $de-ui-wfloating-menu-border;
            box-shadow: inset 0 0 0 1px $de-numbering-list-border-color;
            cursor: pointer;
            height: $e-de-ui-menuitem-none-height;
            margin: $de-ui-wfloating-menu;
            padding: $de-ui-wfloating-padding;
            width: 70px;
        }
        .e-de-ui-wfloating-menu {
            padding: $de-ui-floating-menu-padding;
        }
        .e-de-list-thumbnail .e-de-list-items {
            float: left;
        }
        .e-de-list-thumbnail .e-de-list-items {
            background: $de-numbering-list-background-color;
            border: $de-numbering-list-border solid transparent;
            clear: initial;
            display: inline-block;
            height: auto;
            margin: $de-numbering-list-margin;
            text-align: center;
            width: auto;
        }
        .e-de-list-items {
            background: $de-numbering-list-background-color;
            box-sizing: border-box;
            cursor: pointer;
            list-style: none;
            padding: $de-numbering-list-paddng-top $de-numbering-list-padding-right;
            position: relative;
        }
        .e-de-list-item-size {
            font-size: $de-list-item-size-font-size;
        }
        .e-de-ui-wfloating-menu {
            padding: $de-ui-floating-menu-padding;
        }
        .e-de-table-ppty-dlg-tabs {
            height: $de-table-ppty-dlg-tabs-height;
            position: relative;
        }
        .e-de-ui-bullet-list-header-presetmenu .e-de-list-thumbnail .e-de-list-active,
        .e-de-style-numbered-list .e-de-list-thumbnail .e-de-list-active {
            border-color: $de-table-align-active-color;
        }
        .e-de-rp-sub-content-div {
            line-height: $de-rp-content-ln-ht;
            font-size: $de-rp-font-size;
            margin-bottom: $de-rp-margin-bottom;
        }
        .e-de-bullet-icons {
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .e-de-header-footer-list {
            color: $de-op-search-txt;
        }

        .e-de-ltr-btn-div {
            font-size: $de-ltr-btn-div-font-size;
            @if $skin-name =='Material3' {
                width: 100px;
            }
            @else {
                width: 200px;
            }
        }
        .e-de-tbl-rtl-btn-div {
            font-size: $de-tbl-rtl-btn-div-font-size;
            margin-right: $de-tbl-rtl-btn-div-margin-right;
        }
        .e-de-tbl-rtl-btn-div.e-de-rtl {
            margin-left: $de-tbl-rtl-btn-div-margin-right;
            margin-right: $de-tbl-rtl-btn-div-margin-rgt-rtl;
        }
        .e-de-tbl-ltr-btn-div {
            font-size: $de-tbl-ltr-btn-div-font-size;
        }

        .e-de-disabledbutton {
            opacity: $de-paradialog-dir-div;
            pointer-events: none;
        }
        .e-de-restrict-format {
            margin-top: $de-restrict-format-margin-top;
        }
        .e-de-rp-format {
            font-size: $de-rp-format-font-size;
            @if $skin-name == 'FluentUI'{
              margin-bottom: 16px;
            } 
            @else {
              margin-bottom: $de-rp-format-margin-bottom;
              opacity: 0.65;
            }
            font-weight: $de-header-font-weight;
            @if $skin-name=='fluent2' { 
                color: $de-op-title-clr;
                font-size: 16px;
            }
        }
        .e-de-rp-checkbox {
            font-size: $de-rp-checkbox-font-size;
        }
        .e-de-rp-border {
            margin-bottom: $de-rp-border-margin-bottom;
            margin-top: $de-rp-border-margin-top;
        }
        .e-de-rp-header {
            font-size: $de-rp-header-font-size;
            font-weight: $de-header-font-weight;
            opacity: 0.87;
            color: $de-op-title-clr;
            width: 75%;
            @if $skin-name=='fluent2' { 
                color:$de-sub-header-color;
                font-size: 14px;
            }
        }
        @if $skin-name !='tailwind' {
            .e-de-rp-user .e-checkbox-wrapper {
                width: auto;
            }
        }
        .e-de-rp-nav-btn,
        .e-de-rp-btn-enforce {
            @if $skin-name !='tailwind' {
                background: $de-rp-btn-bg-color;
                font-size: $de-rp-btn-font-size;
            }
            opacity: 0.87;
            border-radius: $de-rp-btn-border-radius;
            box-shadow: $de-rp-btn-enforce-bx-shadow;
            @if $skin-name=='bootstrap4' {
                border-color: $de-cmt-separator;
                box-shadow: none;
                color: $de-cmt-pant-content-font;
                opacity: 1;
            }
        }
        .e-de-rp-nav-btn { 
          width: auto;
        }
        .e-de-rp-btn-stop-enforce {
            @if $skin-name !='tailwind' {
                background: $de-rp-btn-bg-color;
                font-size: $de-rp-btn-font-size;
                opacity: 0.87;
            }
            border-radius: $de-rp-btn-border-radius;
            box-shadow: $de-rp-btn-enforce-bx-shadow;
            @if $skin-name=='bootstrap4' {
                border-color: $de-cmt-separator;
                box-shadow: none;
                color: $de-cmt-pant-content-font;
                opacity: 1;
            }
        }
        .e-de-rp-sub-div {
            border-bottom: $de-list-view-border-bottom solid $de-list-view;
            padding: $de-rp-sub-div-padding;
        }
        .e-de-restrict-pane {
            padding-left: $de-restrict-pane-padding-left;
            padding-top: $de-restrict-pane-padding-top;
            padding-right: $de-restrict-pane-padding-right;
        }
        .e-de-rp-whole-header {
            padding: $de-rp-whole-header-padding;
        }
        .e-de-rp-user {
            background: $de-numbering-list-background-color;
            border: $de-list-view-border-bottom solid $de-list-view;
            border-radius: $de-list-view-border-radius;
            font-size: $de-list-view-font-size;
            height: $e-de-rp-use-height;
        }
        .e-de-rp-enforce {
            padding: $de-rp-enforce-padding;
        }
        .e-de-rp-enforce-nav {
            margin: $de-rp-enforce-nav-margin-top $de-rp-enforce-nav-margin $de-rp-enforce-nav-margin $de-rp-enforce-nav-margin;
        }
        .e-de-enforce-dlg-title {
            font-size: $de-enforce-dlg-title-fnt-size;
            font-weight: $de-header-font-weight;
            margin-bottom: $de-hyperlink-dlg-margin-bottom;
        }
        .e-de-enforce .e-de-enforce-dlg-input {
            height: $de-hyperlink-dlg-input-height;
            width: 300px;
        }
        .e-de-enforce-dlg-input .e-input:focus {
            @if $skin-name =='fluent2'  {
                border-color: $content-bg-color-alt1;
                border-radius: 5px;
                box-shadow: $border;
            }
        }
        .e-de-user-add-btn {
            @if ($skin-name !='bootstrap4' and $skin-name !='tailwind' and $skin-name !='bootstrap5') {
                background: $de-style-toggle-btn-color;
            }
            border-radius: $de-user-add-btn-border-radius;
            width: 74px;
        }
        .e-de-user-dlg .e-de-user-dlg-textbox-input {
            margin-right: $de-user-dlg-textbox-input-mrgn-right;
            width: 304px;
        }
        .e-de-user-dlg-list.e-de-rtl .e-de-user-dlg-textbox-input {
            margin-right: $de-user-dlg-list-margin-right;
            margin-left: $de-user-dlg-textbox-input-mrgn-right;
        }
        .e-de-user-dlg-list {
            margin-bottom: $de-user-dlg-list-mrgn-btm;
            display: inline-flex;
        }
        .e-de-user-listview {
            border: $de-list-view-border solid $de-list-view;
            border-radius: $de-list-view-border-radius;
            height: $e-de-user-listview-height;
        }
        .e-de-user-dlg-user {
            margin-bottom: $de-user-dlg-user-mrgn-btm;
            @if $skin-name=='tailwind' {
                color: $de-dlg-heading-main-header;
                font-weight: $de-para-dlg-heading-font-weight;
            }
        }
        .e-user-delete {
            float: left;
        }
        .e-de-unprotect-dlg-title {
            font-size: $de-unprotect-dlg-title-fnt-size;
            margin-bottom: $de-unprotect-dlg-title-mrgn-btm;
        }
        .e-de-rp-stop-div1 {
            @if $skin-name != 'FluentUI' {
              opacity: 0.87;
            }
            padding: $de-rp-stop-div1-padding-top $de-rp-stop-div1-padding-right $de-rp-stop-div1-padding-bottom $de-rp-stop-div1-padding-left;
            font-weight: $de-rp-stop-div1-font-weight;
            border-bottom: $de-rp-stop-div1-border-bottom solid #e0e0e0;
        }
        .e-de-rp-stop-div2 {
            padding: $de-rp-stop-div2-padding-top $de-rp-stop-div2-padding-right $de-rp-stop-div2-padding-bottom;
        }
        .e-de-rp-close-icon {
            float: right;
            position: relative;
            top: $de-rp-close-icon-top;
            right: $de-rp-close-icon-right;
        }
        .e-de-restrict-pane {
            height: $e-de-restrict-pane-height;
            overflow: auto;
            overflow-x: hidden;
            width: $de-rp-width;
        }
        .e-de-rp-nav-lbl {
            font-size: $de-rp-nav-lbl-font-size;
            margin: $de-rp-nav-lbl-margin-top $de-rp-nav-lbl-margin-right;
        }
        .e-documenteditor-optionspane {
            height: $e-documenteditor-optionspane-height;
        }
        .e-de-cmt-pane {
            background-color: inherit;
            color: $de-cmt-pant-content-font;
        }
        .e-de-cp-whole-header {
            padding: $de-cp-whole-header-padding;
        }
        .e-de-cp-header {
            font-size: $de-cp-header-font-size;
            font-weight: $de-cp-header-font-weight;
            opacity: 0.87;
            width: 75%;
        }
        .e-de-cmt-container {
            height: auto;
            padding: $de-cmt-container-padding;
            overflow: auto;
        }
        .e-de-cmt-sub-container {
            @if $skin-name !='tailwind' and $skin-name != 'FluentUI' {
                background-color: $de-background;
            }
            @if $skin-name !='Material3' {
                border: $de-cmt-separator-border solid $de-cmt-separator;
                border-radius: $de-cmt-sub-container-border-radius;
            }
            @if $skin-name=='fluent2' {
                background-color: $de-ctnr-prop-bg-clr;
            } 
            margin: $de-cmt-sub-container-margin;
            padding: $de-cmt-sub-container-padding;
        }
        .e-de-cmt-view {
            cursor: default;
        }
        .e-de-cmt-sub-container.e-de-cmt-selection {
            border-left: $de-cmt-sub-container-cmt-selection-border-left solid $de-cmt-selection;
            padding-left: $de-cmt-sub-container-padding-left;
        }
        .e-de-tc-outer {
            border-bottom: $de-tc-outer-border-bottom solid #d8d8d8;
        }
        .e-de-tc-pane {
            color: $de-cmt-pant-content-font;
        }
        .e-de-trckchanges-inner {
            cursor: default;
            margin: $de-trckchanges-inner-mrgn;
            padding-left: $de-trckchanges-inner-padding-left;
            padding-right: $de-trckchanges-inner-padding-right;
            padding-bottom: $de-trckchanges-inner-padding-bottom;
        }
        .e-de-trckchanges-inner:hover {
            border-left: $de-trckchanges-inner-border-left solid $de-cmt-selection;
            cursor: default;
            margin: $de-trckchanges-inner-mrgn;
            padding-left: $de-trckchanges-inner-hover-padding-left;
            padding-right: $de-trckchanges-inner-padding-right;
            padding-bottom: $de-trckchanges-inner-padding-bottom;
        }
        .e-de-trckchanges-inner.e-de-trckchanges-inner-select {
            border-left: $de-trckchanges-inner-select-border-left solid $de-cmt-selection;
            cursor: default;
            margin: $de-trckchanges-inner-mrgn;
            padding-left: $de-trckchanges-inner-select-padding-left;
            padding-right: $de-trckchanges-inner-select-padding-right;
            padding-bottom: $de-trckchanges-inner-select-padding-bottom;
        }
        .e-de-tc-no-chng {
            color: $de-input-color;
            font-size: $de-input-font-size;
            opacity: 65%;
            margin: $de-input-margin-top $de-input-margin-right;
            text-align: center;
        }
        .e-tc-btn-bg-clr.e-btn:not(:hover):not(.e-active) {
            background-color: inherit;
            border-color: transparent;
            color: inherit;
        }
        .e-tc-nvgte.e-icon-btn {
            text-align: center;
            vertical-align: middle;
        }
        .e-de-track-span-user {
            display: inline-flex;
            overflow: hidden;
            width: 110px;
            @if $skin-name=='fluent2' {
                padding-left: $de-changes-padding-left;
            }
        }
        .e-de-track-span-view {
            display: inline-flex;
            overflow: hidden;
            width: 50px;
        }
        .e-btn.e-outline.e-de-track-accept-button {
            min-width: 66px;
            padding: $de-tc-btn-padding-top $de-tc-btn-padding;
            text-transform: initial;
        }
        .e-btn.e-outline.e-de-track-accept-button:hover {
            min-width: 66px; 
            padding: $de-tc-btn-padding-top $de-tc-btn-padding;
            text-transform: initial;
        }
        .e-btn.e-outline.e-de-track-reject-button {
            min-width: 64px;
            padding: $de-track-reject-button-top $de-track-reject-button-right;
            margin-left: $de-track-reject-button-right-margin-left;
            text-transform: initial;
        }
        .e-btn.e-outline.e-de-track-reject-button:hover {
            min-width: 64px; 
            padding: $de-track-reject-button-top $de-track-reject-button-right;
            margin-left: $de-track-reject-button-right-margin-left;
            text-transform: initial;
        }
        .e-de-track-chngs-count {
            font-size: $de-track-chngs-count-font-size;
            margin-left: $de-track-chngs-count-margin-left;
            opacity: 0.87;
            padding-top: $de-track-chngs-count-padding-top;
            white-space: nowrap;
        }
        .e-de-track-insert {
            color: $de-track-chngs-sucs-bg-color;
            font-size: $de-track-chngs-sucs-font-size;
            opacity: 100%;
        }
        .e-de-track-delete {
            color: $de-track-chngs-rejct-bg-color;
            font-size: $de-track-chngs-rejct-font-size;
            opacity: 100%;
        }
        @if $skin-name !='tailwind' {
            .e-de-track-toolbar {
                border-bottom: $de-track-toolbar-border-bottom solid #d8d8d8;
                border-top: $de-track-toolbar-border-top solid #d8d8d8;
                padding-bottom: $de-tc-tlbr-padding-btm;
            }
            .e-de-track-pane-drop-btn {
                padding-left: $de-track-pane-drop-btn-padding-left;
                padding-right: $de-track-pane-drop-btn-padding-right;
                @if $skin-name =='Material3' {
                    padding-top: 10px !important;
                }
                @else {
                    padding-top: $de-track-pane-drop-btn-padding-top;
                }
                font-size: $de-track-pane-drop-btn-font-size;
                font-weight: $de-header-font-weight;
            }
            @if ($skin-name =='fabric' or $skin-name =='bootstrap') {
                .e-de-track-toolbar .e-de-track-pane-drop-btn {
                    padding-top: 4px !important;
                }
            }
        }
        .e-toolbar-item.e-de-track-toolbar-overlay.e-template.e-overlay {
            opacity: 1;
            font-weight: $de-header-font-weight;
            font-size: $de-cmt-author-nme-fnt-size;
        }
        .e-de-track-date {
            font-size: $de-cmt-date-fnt-size;
            margin-top: $de-cmt-date-margin-top;
            opacity: 0.67;
        }
        .e-de-track-usernme-div {
            justify-content: space-between;
            padding-top: $de-track-usernme-div-padding-top;
        }
        .e-de-track-user-nme {
            font-size: $de-cmt-author-nme-fnt-size;
            font-weight: $de-cmt-author-nme-font-weight;
            padding-left: $de-track-user-nme-padding-left;
        }
        .e-de-track-chngs-text {
            line-height: $de-track-chngs-text-line-height;
            overflow: hidden;
            word-wrap: break-word;
            text-overflow: ellipsis;
            font-size: $de-cmt-author-nme-fnt-size;
            min-height: $e-de-track-chngs-text-min-height;
            padding-top: $de-track-chngs-text-padding-top;
            margin-bottom: $de-track-chngs-text-margin-bottom;
        }
        .e-de-track-chng-table {
            border-collapse: collapse;
            border-spacing: $de-track-chng-table-border-spacing;
            opacity: 70%;
            width: 100%;
        }
        .e-de-tc-tble-cell {
            border: $de-tc-tble-cell-border solid;
            height: $e-de-tc-tble-cell-height;
        }
        .e-de-tc-shrink-img {
            height: $e-de-tc-shrink-img-height;
            margin: $de-tc-shrink-img-margin-top $de-tc-shrink-img-margin-right;
            vertical-align: middle;
            width: 50px;
        }
        .e-de-tc-field {
            background-color: rgb(206, 205, 205);
            margin: $de-tc-field-margin-top $de-tc-field-margin-right;
        }
        .e-de-tc-hide-para-mark .e-de-tc-outer .e-de-trckchanges-inner .e-de-track-chngs-text .e-de-tc-pmark {
            display: none;
        }
        .e-de-tc-pmark {
            font-size: $de-tc-pmark-font-size;
            font-family: Roboto-Regular;
            font-weight: $de-tc-pmark-font-weight;
            color: rgb(1, 22, 119);
            margin: $de-tc-pmark-margin-top $de-tc-pmark-margin-right;
        }
        .e-de-cmt-sub-container:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
            border-left: $de-cmt-selection-border-left solid $de-cmt-selection;
            padding-left: $de-cmt-sub-container-hover-padding-left;
        }
        .e-de-cmt-author {
            align-items: center;
            @if $skin-name == 'bootstrap5' {
              margin-bottom: 12px;
            }
            @else {
              margin-bottom: $de-cmt-author-margin-bottom;
            }
        }
        .e-de-cmt-author-name {
            font-size: $de-cmt-author-nme-fnt-size;
            font-weight: $de-header-font-weight;
            padding-left: $de-cmt-author-nme-padding-left;
            width: 90%;
        }
        .e-de-cp-option.e-btn.e-icon-btn {
            background-color: inherit;
            border: none;
            color: inherit;
            float: right;
            height: $de-cmt-opt-size;
            padding: $de-cp-option-padding;
            width: $de-cmt-opt-size;
            @if $skin-name=='bootstrap4' {
                margin-top: -4px;
            }
            @if $skin-name=='bootstrap' {
                margin-top: -8px;
            }
        }
        .e-de-cp-option.e-btn.e-icon-btn span {
            margin-top: $de-cp-option-margin-top;
            background: $de-op-bg-color;
        }
        .e-de-cmt-view:hover {
            .e-de-cp-option {
                display: block;
            }
        }
        .e-de-cmt-readonly {
            font-size: $de-cmt-author-nme-fnt-size;
            @if $skin-name != 'bootstrap5' {
                padding-top: $de-cmt-readonly-padding-top;
            }
            word-break: break-word;
        }
        .e-de-cmt-date {
            font-size: $de-cmt-date-fnt-size;
            margin-top: $de-cmt-date-mrgn-top;
            opacity: 0.67;
        }
        .e-de-cmt-sub-container.e-de-cmt-reply {
            border: none;
            border-top: $de-cmt-separator-border-top solid $de-cmt-separator;
            border-radius: $de-cmt-separator-border-radius;
            margin: $de-rply-cmt-sub-container-margin;
            padding: $de-cmt-separator-padding;
            .e-de-cmt-view {
                margin-top: $de-cmt-view-mrgn-top;
            }
        }
        .e-de-cmt-textarea.e-input {
            color: $de-cmt-pant-content-font;
            @if $skin-name == 'tailwind' {
                font-size: $de-cmt-author-nme-fnt-size;
            }
            @else {
                font-size: $de-cmt-font-size;
            }
            line-height: normal;
            min-height: $e-de-cmt-textarea-min-height;
            overflow: hidden;
            padding-top: $e-de-cmt-textarea-padding-top;
            resize: none;
        }
        .e-de-cmt-textarea.e-input:focus {
            @if $skin-name == 'fluent2' {
                border-color: $content-bg-color-alt1;
                border-radius: 5px;
                box-shadow: $border;
            }
        }
        .e-de-cmt-textarea:empty::before {
            content: attr(placeholder);
            opacity: 0.5;
        }
        .e-de-cmt-action-button {
            text-align: right;
            margin-top: $de-reply-footer-margin-top;
        }
        .e-de-cmt-post-btn.e-btn.e-flat,
        .e-de-cmt-cancel-btn.e-btn.e-flat {
            height: $de-cmt-post-btn-ht;
            margin-left: $de-cmt-post-btn-margin-left;
            width: $de-cmt-post-btn-wt;
            @if $skin-name == 'tailwind' {
                padding-top: $de-cmt-cancel-btn-padding-top;
                padding-left: $de-cmt-cancel-btn-padding-left;
            }
        }
        .e-de-cmt-resolved {
            .e-de-cmt-author-name,
            .e-de-cmt-readonly,
            e-de-cmt-date {
                opacity: 0.67;
            }
            .e-de-cmt-rply-view {
                display: none;
            }
            .e-de-cmt-resolve-btn {
                display: block;
                margin-top: $de-cmt-resolve-btn-margin-top;
                text-align: right;
                @if ($skin-name=='fluent2') {
                    font-size: 12px;
                    color: $de-sub-header-color;
                }
            }
        }
        .e-de-cmt-sub-container.e-de-cmt-resolved.e-de-cmt-selection {
            border-left: $de-cmt-selection-rslv-border-left solid $de-cmt-selection-rslv;
        }
        .e-de-cmt-sub-container.e-de-cmt-resolved:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
            border-left: $de-cmt-selection-rslv-border-lft solid $de-cmt-selection-rslv;
        }
        .e-de-lock-mark {
            cursor: default;
            color: $de-op-icon-color; 
            font-size: $de-lock-mark-font-size;
            height: $e-de-lock-mark-height;
            pointer-events: all;
            width: 13px;
        }
        .e-de-cmt-mark {
            cursor: default;
            color: $de-op-icon-color; 
            font-size: $de-lock-mark-font-size;
            height: $e-de-cmt-mark-height;
            pointer-events: all;
            width: 13px;
             :hover {
                color: $de-cmt-selection;
            }
        }
        .e-de-cmt-mark.e-de-cmt-mark-selected,
        .e-de-cmt-mark.e-de-cmt-mark-hover {
            color: $de-cmt-selection;
        }
        .e-de-cmt-no-cmt {
            margin-left: $de-cmt-no-cmt-margin-left;
            margin-top: $de-cmt-no-cmt-margin-top;
            font-size: $de-cmt-no-cmt-font-size;
        }
        .e-de-cmt-drawer-cnt {
            font-size: $de-cmt-drawer-cnt-font-size;
            height: $e-de-cmt-drawer-cnt-height;
            margin-top: $de-cmt-drawer-cnt-margin-top;
        }
        .e-de-cmt-drawer {
            cursor: pointer;
            float: right;
            opacity: 0.54;
            margin-right: $de-cmt-drawer-margin-right;
            margin-top: $de-cmt-drawer-margin-top;
        }
        .e-de-cmt-rply-view {
            margin-top: $de-cmt-textbox-top-margin;
        }
        .e-de-cmt-resolve-btn {
            display: none;
        }
        @if $skin-name=='bootstrap4' {
            textarea.e-de-cmt-textarea {
                height: 28px;
            }
        }
        .e-rtl {
            .e-de-cmt-pane {
                border-left: none;
                border-right: $de-op-border-right solid $de-op-border-clr;
            }
            .e-de-rp-close-icon {
                float: left;
                right: $de-rp-close-icon-right-rtl;
            }
            .e-de-cp-option.e-btn.e-icon-btn {
                float: left;
            }
            .e-de-cmt-sub-container.e-de-cmt-selection {
                border-left: $de-cmt-separator-border-left solid $de-cmt-separator;
                border-right: $de-cmt-selection-border-right solid $de-cmt-selection;
                padding-left: $de-cmt-sub-container-padding;
                padding-right: $de-cmt-sub-container-padding-left;
            }
            .e-de-cmt-sub-container:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
                border-left: $de-cmt-separator-border-left solid $de-cmt-separator;
                border-right: $de-cmt-selection-border-rgt solid $de-cmt-selection;
                padding-left: $de-cmt-sub-container-padding;
                padding-right: $de-cmt-sub-container-hover-padding-left;
            }
            .e-de-cmt-sub-container.e-de-cmt-resolved.e-de-cmt-selection {
                border-right: $de-cmt-selection-rslv-border-right solid $de-cmt-selection-rslv;
            }
            .e-de-cmt-sub-container.e-de-cmt-resolved:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
                border-right: $de-cmt-selection-rslv-border-rgt solid $de-cmt-selection-rslv;
            }
            .e-de-cmt-action-button {
                text-align: left;
            }
            .e-de-cmt-no-cmt {
                margin-left: auto;
                margin-right: $de-cmt-no-cmt-margin-right;
            }
            .e-de-cmt-drawer {
                float: left;
                margin-left: $de-cmt-drawer-margin-left;
                margin-right: auto;
            }
            .e-de-cmt-resolve-btn {
                text-align: left;
            }
        }
        .e-de-close-icon.e-btn {
            background-color: $dialog-btn-bg-color !important;
            border-color: $dialog-btn-border-color !important;
            border-radius: $dialog-headericon-border-radius;
            color: $dialog-btn-clr;
            border: none;
            #{if(&, '&', '*')}:active {
                background-color: $dialog-closeicon-btn-active-color !important;
                border-color: $dialog-btn-border-color !important;
                box-shadow: none;
            }
            #{if(&, '&', '*')}:hover {
                background-color: $dialog-closeicon-btn-hover-color !important;
                box-shadow: none;
                color: $dialog-active-icon-color;
                cursor: $e-de-close-icon-cursor;
                border: none;
            }
        }
        .e-btn.e-de-close-icon:hover span {
            cursor: pointer;
            color: $dialog-active-icon-color;
        }
        .e-de-para-dlg-right-sub-container-blazor {
            top: $de-para-dlg-right-sub-container-top-margin;
        }
        .e-de-rp-mu-btn {
            margin-top: $de-rp-mu-btn-margin-top;
        }
        .e-de-table-dialog-row-height {
            padding-top: $de-table-row-height-padding;
        }
        .e-de-tablecell-dialog-alignment-icon {
            width: $de-table-alignment-icon-width;
            height: $de-table-alignment-icon-height;
            margin: $de-table-alignment-icon-margin;
        }
        .e-de-table-dia-indent-from-left {
            right: 45px;
        }
        .e-de-table-dia-align-div {
            border: $de-table-align-border-width solid $de-table-align-border-color;
            display: inline-block;
            height: $de-table-dia-align-height;
            margin-right: $de-table-align-margin-right;
            width: $de-table-dia-align-width;
        }
        .e-de-table-dialog-alignment-icon {
            margin: $de-table-alignment-icon-margin;
            height: $de-table-dia-align-icon-height;
        }
        .e-de-table-border-setting-genral {
            margin-right: $de-table-align-margin-right;
        }
        .e-de-table-border-clr-left-container {
             padding-right: $de-border-dlg-clr-padding-right;
        }
        .e-de-table-border-clr-heading {
            font-size: $de-border-dlg-setting-label-fontsize;
            font-weight: $de-border-dlg-border-label-fontweight;
            padding-bottom: $de-border-dlg-clr-radius-bottom;
        }
        .e-de-table-border-icon-container {
            margin-top: $de-table-border-icon-container-margin-top;
            margin-right: $de-table-bdr-icon-container-margin-right;
        }
        .e-de-table-border-preview-container {
            padding-left: $de-border-dlg-preview-padding-left;
        }
        .e-de-table-dlg-alignment-heading {
            color: $de-dlg-heading-main-header;
            display: block;
            font-size: $de-para-dlg-heading-font-size;
            font-weight: $de-par-dlg-hdr-weight;
            margin-bottom: $de-tbl-dlg-align-padding-bottom;
            @if $skin-name == 'tailwind' {
              line-height: 22px;
            }
          }

        .e-rtl{
            .e-de-cmt-author-name {
                padding-left: $de-cmt-author-name-padding-lft;
                padding-right: $de-cmt-author-nme-padding-left;
            }
            .e-de-cmt-post-btn.e-btn.e-flat,
            .e-de-cmt-cancel-btn.e-btn.e-flat{
                @if $skin-name == 'tailwind' {
                    padding-bottom: $de-cmt-cancel-btn-padding-top;
                    padding-right: $de-cmt-cancel-btn-padding-left;
                }
            }
            .e-de-ok-button {
                margin-right: $de-ok-button-margin-right;
                margin-left: $de-ok-insert-button-margin-right;
            }
            .e-de-table-dia-align-div.e-de-rtl {
                margin-left: $de-table-align-margin-right;
                margin-right: $de-table-align-margin-rgt-rtl;
            }
            .e-de-table-border-clr-left-container {
                padding-right: $de-border-dlg-clr-padding-rgt;
                padding-left: $de-border-dlg-clr-padding-right;
            }
            .e-de-table-border-preview-container {
                padding-right: $de-border-dlg-preview-padding-left;
                padding-left: $de-border-dlg-preview-padding-lft;
            }
            .e-de-table-border-setting-genral {
                margin-right: $de-table-border-setting-genral-margin-right;
                margin-left: $de-table-align-margin-right;
            }
            .e-de-table-border-icon-container {
                margin-right: $de-table-border-icon-container-margin-right;
                margin-left: $de-table-border-icon-container-margin-left;
            }
            .e-de-table-border-preview {
                width: 23px;
              }
            .e-de-table-setting-labels-heading {
                margin-left: $de-table-setting-labels-heading-margin-left;
                margin-right: $de-table-setting-labels-heading-margin-right;
            }
        }
        .e-de-style-paragraph-indent-group-button .e-btn.e-active,
        .e-de-style-paragraph-group-button .e-btn.e-active,
        .e-de-style-font-group-button .e-btn.e-active {
            @if $skin-name =='fluent2' {
                background-color: var(--color-sf-content-bg-color-pressed);
                color: var(--color-sf-toolbar-icon-color);
            }
        }
        .e-de-hyperlink-bookmark-check .e-checkbox-wrapper .e-frame {
            @if $skin-name == 'fluent2' {
               margin-left: 0px;
               margin-right: 0px;
            }
        }
        .e-de-user-info.e-de-user-name-collapse span {
            transition-property: height, min-width, max-width, width, border-radius, padding;
            transition-duration: 200ms;
            transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
            position: absolute;
            bottom: 0px;
            height: $e-de-user-name-collapse-height;
            width: 6px;
            min-width: 0px;
            max-width: 6px;
            border-radius: $de-user-info-border-radius;
            padding: $de-user-info-padding;
        }
        .e-de-user-info.e-de-user-name-expended span {
            transition-property: height, width, min-width, max-width, border-radius, padding;
            transition-duration: 300ms;
            transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
            position: absolute;
            bottom: 0px;
            height: $e-de-user-name-expended-height;
            line-height: $e-de-user-name-expended-line-height;
            min-width: 44px;
            max-width: auto;
            padding: $de-user-name-expended-padding-top $de-user-name-expended-padding-right;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: white;
        }
}

@include export-module('documenteditor-bootstrap-icons') {
  .e-documenteditor {
    .e-close::before {
      content: '\e825';
      font-family: 'e-icons';
      font-size: 14px;
    }

    .e-de-op-search-icon::before {
      content: '\e275';
      font-family: 'e-icons';
      font-size: $de-op-icon-font-size;
    }

    .e-arrow-up::before {
      content: '\e834';
      font-family: 'e-icons';
      font-size: $de-op-icon-font-size;
    }

    .e-arrow-down::before {
      content: '\e83d';
      font-family: 'e-icons';
      font-size: $de-op-icon-font-size;
    }

    .e-de-op .e-de-op-close-icon {
      height: $de-op-close-icon-width;
    }

    .e-de-op-close-icon::before {
      content: '\e361';
    }

    .e-de-op-search-close-icon::before {
      content: '\e361';
      font-family: 'e-icons';
      font-size: 10px;
    }

    .e-de-new-cmt::before {
      content: '\eb0c';
      font-family: 'e-icons';
    }

    .e-de-menu-icon::before {
      content: '\e936';
      font-family: 'e-icons';
      font-size: $de-op-icon-font-size;
    }

    .e-de-cmt-mark-icon::before {
      content: '\e817';
      font-family: 'e-icons';
      font-size: 13px;
    }

    .e-de-multi-cmt-mark::before {
      content: '\e98a';
      font-family: 'e-icons';
      font-size: 14px;
    }

    .e-de-cmt-resolve-icon::before {
      content: '\e146';
      font-family: 'e-icons';
      font-size: 13px;
    }

    .e-de-multi-cmt-resolve::before {
      content: '\e147';
      font-family: 'e-icons';
      font-size: 14px;
    }

    .e-de-cmt-post::before {
      content: '\e816';
      font-family: 'e-icons';
    }

    .e-de-cmt-rply-icon::before {
      content: '\e815';
      font-family: 'e-icons';
    }

    .e-de-cmt-cancel::before {
      content: '\e361';
      font-family: 'e-icons';
    }

    .e-de-cmt-delete::before {
      content: '\e602';
      font-family: 'e-icons';
    }

    .e-de-cmt-reopen::before {
      content: '\e818';
      font-family: 'e-icons';
    }

    .e-de-nav-up::before {
      content: '\e651';
      font-family: 'e-icons';
    }

    .e-de-nav-right-arrow::before {
      content: '\e913';
    }

    .e-de-nav-left-arrow::before {
      content: '\e904';
    }

    .e-de-save-icon::before {
      content: '\e614';
      font-family: 'e-icons';
    }

    .e-de-cancel-icon::before {
      content: '\e60a';
      font-family: 'e-icons';
    }
  }

  .e-de-ctn-title-print::before {
    content: '\e34b';
    font-family: 'e-icons';
  }

  .e-de-ctn-title-download::before {
    content: '\e603';
    font-family: 'e-icons';
  }

  .e-de-table-properties-alignment:hover {
    border-color: $de-table-align-hover-color;
  }

  .e-de-table-properties-alignment {
    border: 1px solid transparent;
  }

  .e-de-tablecell-alignment {
    border: 1px solid transparent;
  }

  .e-de-tablecell-alignment:hover {
    border-color: $de-cell-align-hover-color;
  }

  .e-de-table-left-alignment::before {
    content: '\e517';
    font-size: $de-table-alignment-font-size;
  }

  .e-de-table-center-alignment::before {
    content: '\e518';
    font-size: $de-table-alignment-font-size;
  }

  .e-de-table-right-alignment::before {
    content: '\e515';
    font-size: $de-table-alignment-font-size;
  }

  .e-de-tablecell-top-alignment::before {
    content: '\e527';
    font-size: $de-tablecell-alignment-font-size;
  }

  .e-de-tablecell-center-alignment::before {
    content: '\e526';
    font-size: $de-tablecell-alignment-font-size;
  }

  .e-de-tablecell-bottom-alignment::before {
    content: '\e525';
    font-size: $de-tablecell-alignment-font-size;
  }

  .e-de-acceptchange::before {
    content: '\e19f';
    font-family: 'e-icons';
  }

  .e-de-rejectchange::before {
    content: '\e204';
    font-family: 'e-icons';
  }

  .e-de-table-border-setting {
    border: 1px solid $de-border-dlg-border-setting-inside-border;
    height: 40px;
    left: 5px;
    position: relative;
    top: 5px;
    width: 40px;
  }

  .e-de-table-border-setting-genral {
    border: 1px solid $de-border-dlg-border-setting-divs-color;
    height: 52px;
    width: 52px;
  }

  .e-de-table-border-preview-genral {
    border: 1px solid $de-border-dlg-border-preview-divs-color;
    height: 24px;
    width: 24px;
  }

  .e-de-table-border-inside-setting:hover {
    border: 1px solid $de-table-setting-hover-color;
  }

  .e-de-table-border-preview {
    height: 24px;
    width: 24px;
  }

  .e-de-table-border-inside-preview:hover {
    border: 1px solid $de-table-preview-hover-color;
  }

  .e-de-table-border-inside-setting-click {
    border: 1px solid $de-table-setting-color;
  }

  .e-de-table-border-inside-preview-click {
    border: 1px solid $de-table-preview-setting-color;
  }

  .e-de-table-border-none-setting::before {
    content: '\e507';
    font-size: $de-border-none-setting-font-size;
    position: absolute;
  }

  .e-de-table-border-box-setting::before {
    content: '\e509';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-table-border-all-setting::before {
    content: '\e511';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-table-border-custom-setting::before {
    content: '\e516';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-para-border-none-setting::before {
    content: '\e93f';
    font-size: $de-border-none-setting-font-size;
    position: absolute;
  }

  .e-de-para-border-box-setting::before {
    content: '\e940';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-para-border-shadow-setting::before {
    content: '\e942';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-para-border-custom-setting::before {
    content: '\e945';
    font-size: $de-border-setting-font-size;
    left: 2px;
    position: absolute;
    top: 2px;
  }

  .e-de-table-border-toptop-alignment::before {
    content: '\e281';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-topcenter-alignment::before {
    content: '\e276';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-topbottom-alignment::before {
    content: '\e298';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-diagionalup-alignment::before {
    content: '\e262';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-diagionaldown-alignment::before {
    content: '\e265';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-bottomleft-alignment::before {
    content: '\e291';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-bottomcenter-alignment::before {
    content: '\e287';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-table-border-bottomright-alignment::before {
    content: '\e288';
    font-size: 16px;
    left: $de-td-table-border-left;
    position: absolute;
    top: $de-td-table-border-top;
  }

  .e-de-columns-presets-genral {
    height: 62px;
    width: 62px;
    margin-right: 33px;
    margin-bottom: 12px;
  }

  .e-de-columns-padding-alignment {
    padding-top: 24px;
  }

  .e-de-column-dlg-preview-div {
    border: 1px solid $de-border-dlg-border-setting-divs-color;
    height: 120px;
    width: 120px;
  }

  .e-de-padding-col-prev{
    padding-left: 15px;
  }

  .e-width-space-div{
    width: 320px;
  }

  .e-de-columns-presets-genral.e-de-rtl{
    margin-left: 33px;
  }

  .e-de-padding-col-prev.e-de-rtl{
    padding-right: 15px;
  }

  .e-de-column-dlg-preview-div.e-de-rtl{
    border: 1px solid $de-border-dlg-border-setting-divs-color;
    height: 120px;
    width: 120px;
  }

  .e-menu-item .e-de-cmt-add::before {
    content: '\e814';
    font-family: 'e-icons';
  }

  .e-menu-item .e-de-cut::before {
    content: '\e279';
  }

  .e-menu-item .e-de-open-properties::before {
    content: '\e605';
  }

  .e-menu-item .e-de-spellcheck::before {
    content: '\e689';
  }

  .e-menu-item .e-de-copy::before {
    content: '\e280';
  }

  .e-menu-item .e-de-paste::before {
    content: '\e501';
  }

  .e-menu-item .e-de-continue-numbering::before {
    content: '\e503';
  }

  .e-menu-item .e-de-restart-at::before {
    content: '\e277';
  }

  .e-menu-item .e-de-insertlink::before {
    content: '\e290';
  }

  .e-menu-item .e-de-open-hyperlink::before {
    content: '\e278';
  }

  .e-menu-item .e-de-copy-hyperlink::before {
    content: '\e295';
  }

  .e-menu-item .e-de-edit-hyperlink::before {
    content: '\e289';
  }

  .e-menu-item .e-de-remove-hyperlink::before {
    content: '\e286';
  }

  .e-menu-item .e-de-fonts::before {
    content: '\e273';
  }

  .e-menu-item .e-de-paragraph::before {
    content: '\e75e';
  }

  .e-menu-item .e-de-table::before {
    content: '\e294';
  }

  .e-menu-item .e-de-insertabove::before {
    content: '\e506';
  }

  .e-menu-item .e-de-insertbelow::before {
    content: '\e505';
  }

  .e-menu-item .e-de-insertleft::before {
    content: '\e285';
  }

  .e-menu-item .e-de-insertright::before {
    content: '\e284';
  }

  .e-menu-item .e-de-delete-table::before {
    content: '\e292';
  }

  .e-menu-item .e-de-deleterow::before {
    content: '\e283';
  }

  .e-menu-item .e-de-deletecolumn::before {
    content: '\e282';
  }

  .e-de-bold::before {
    content: '\e339';
    font-family: 'e-icons';
  }

  .e-de-italic::before {
    content: '\e35a';
    font-family: 'e-icons';
  }

  .e-de-underline::before {
    content: '\e343';
    font-family: 'e-icons';
  }

  .e-de-indent::before {
    content: '\e35d';
    font-family: 'e-icons';
  }

  .e-de-outdent::before {
    content: '\e33f';
    font-family: 'e-icons';
  }

  .e-de-align-left::before {
    content: '\e33a';
    font-family: 'e-icons';
  }

  .e-de-align-center::before {
    content: '\e35e';
    font-family: 'e-icons';
  }

  .e-de-align-right::before {
    content: '\e34d';
    font-family: 'e-icons';
  }

  .e-de-justify::before {
    content: '\e334';
    font-family: 'e-icons';
  }

  .e-de-single-spacing::before {
    content: '\e520';
    font-family: 'e-icons';
  }

  .e-de-double-spacing::before {
    content: '\e521';
    font-family: 'e-icons';
  }

  .e-de-one-point-five-spacing::before {
    content: '\e522';
    font-family: 'e-icons';
  }

  .e-de-before-spacing::before {
    content: '\e523';
    font-family: 'e-icons';
  }

  .e-de-after-spacing::before {
    content: '\e274';
    font-family: 'e-icons';
  }

  .e-de-icon-bullet-list-dot::before {
    content: '\e270';
    font-family: 'e-icons';
    font-size: 42px;
  }

  .e-de-icon-bullet-list-circle::before {
    content: '\e254';
    font-family: 'e-icons';
    font-size: 42px;
  }

  .e-de-icon-bullet-list-square::before {
    content: '\e271';
    font-family: 'e-icons';
    font-size: 42px;
  }

  .e-de-icon-bullet-list-tick::before {
    content: '\e259';
    font-family: 'e-icons';
    font-size: 42px;
  }

  .e-de-icon-bullet-list-flower::before {
    content: '\e267';
    font-family: 'e-icons';
    font-size: 42px;
  }

  .e-de-icon-bullet-list-arrow::before {
    content: '\e253';
    font-family: 'e-icons';
    font-size: 42px;
  }

  .e-de-icon-bullet-list-none::before {
    content: '\e256';
    font-family: 'e-icons';
    font-size: 42px;
  }

  .e-de-icon-autofit::before {
    content: '\eba8';
    font-family: 'e-icons';
  }

  .e-de-icon-fixed-columnwidth::before {
    content: '\eba9';
    font-family: 'e-icons';
  }

  .e-de-icon-auto-fitwindow::before {
    content: '\ebaa';
    font-family: 'e-icons';
  }

  .e-item .e-de-paste-text::before {
    content: '\e685';
  }

  .e-item .e-de-paste-source::before {
    content: '\e687';
  }

  .e-item .e-de-paste-merge::before {
    content: '\e688';
  }

  .e-item .e-de-paste-column::before {
    content: '\e91b';
  }

  .e-item .e-de-paste-row::before {
    content: '\e91c';
  }

  .e-item .e-de-paste-overwrite-cells::before {
    content: '\e91d';
  }

  .e-item .e-de-paste-nested-table::before {
    content: '\e91e';
  }

  .e-item .e-de-paste-merge-table::before {
    content: '\e91f';
  }

  .e-btn-icon .e-de-paste::before,
  .e-icon-btn .e-de-paste::before {
    content: '\e68a';
  }

  .e-de-share::before {
    content: '\e8f2';
    font-family: 'e-icons';
  }

  .e-de-preset-container {
    width: 95px;
  }

  .e-de-preset-container.e-de-rtl {
    width: 85px;
  }
}

@include export-module('documenteditor-paragraph-dialog') {
  .e-de-para-dlg-heading {
    @if $skin-name=='fluent2' {
      color: $de-sub-header-color;
    }
    @else {
      color: $de-dlg-heading-main-header;
    }
    display: block;
    font-size: $de-para-dlg-heading-font-size;
    font-weight: $de-par-dlg-hdr-weight;
    margin-bottom: $de-para-dlg-sub-title-bottom-margin;
    opacity: $de-dlg-heading-opacity;
    @if $skin-name == 'tailwind' {
      line-height: 22px;
    }
  }

  .e-de-para-dlg-container,
  .e-de-table-options-dlg {
    .e-checkbox-wrapper .e-label {
      font-size: 12px;
    }
  }

  .e-de-para-dlg-container {
    @if $skin-name == 'Material3' {
      padding: 8px;
    }
    height: $de-para-dlg-height;
    width: $de-para-dlg-width;
  }

  .e-de-para-dlg-cs-check-box {
    margin-bottom: $de-para-dlg-cs-check-box-mrgn-btm;
    margin-top: $de-para-dlg-cs-check-box;
  }

  .e-de-para-dlg-spacing-div {
    margin-left: $de-para-dlg-spacing-div-mrgn-left;
  }

  .e-de-para-dlg-spacing-div.e-de-rtl {
    margin-left: 0;
    margin-right: $de-para-dlg-spacing-div-mrgn-left;
  }

  .e-de-para-dlg-sub-container .e-input-group {
    margin-bottom: $de-para-sub-title-bottom-margin;
  }

  .e-de-para-dlg-sub-container {
    margin-bottom: $de-para-sub-container-bottom;
  }

  .e-de-para-dlg-right-sub-container {
    top: $de-para-dlg-right-contaner-top;
  }

  .e-de-dlg-sub-header {
    display: block;
    @if $skin-name == 'FluentUI' {
      color: $de-dlg-heading-main-header;
      font-size: 14px;
    }
    @else {
      font-size: 12px;
    }
    font-weight: $de-header-font-weight;
    margin-bottom: $de-para-dlg-sub-title-bottom-margin;
  }

  .e-de-rtl-btn-div {
    font-size: 12px;
    margin-right: 14px;
    width: 200px;
  }

  .e-de-rtl-btn-div.e-de-rtl {
    margin-left: 14px;
    margin-right: 0;
  }

  .e-para-dlg-sub-height {
    height: 145px;
  }
}

@include export-module('documenteditor-bigger') {
  /* stylelint-disable */
  .e-bigger {

    .e-de-para-dlg-container,
    .e-de-table-options-dlg {
      .e-checkbox-wrapper .e-label {
        font-size: $de-para-dlg-container-font-size-bigger;
      }
    }

    .e-de-para-dlg-container .e-input-group {
      width: 192px !important;
    }

    .e-de-para-dlg-heading {
      @if $skin-name=='fluent2' {
        color: $de-sub-header-color;
      }

      @else {
        color: $de-dlg-heading-main-header;
      }
      display: block;
      font-size: $de-para-dlg-heading-font-size;
      font-weight: $de-par-dlg-hdr-weight;
      margin-bottom: $de-padding-half-bigger;
      @if $skin-name =='tailwind' {
        line-height: $de-para-dlg-line-height;
      }
    }

    .e-de-para-dlg-container,
    .e-de-table-options-dlg {
      .e-checkbox-wrapper .e-label {
        font-size: $de-table-options-font-size-bigger;
      }
    }

    .e-de-para-dlg-container {
      height: $de-para-dlg-height;
      width: $de-para-dlg-width;
    }

    .e-de-para-dlg-cs-check-box {
      margin-bottom: $de-para-dlg-cs-check-box-mrgn-btm;
      margin-top: $de-para-dlg-cs-check-box;
    }

    .e-de-para-dlg-spacing-div {
      margin-left: $de-para-dlg-left-margin-bigger;
    }

    .e-de-para-dlg-spacing-div.e-de-rtl {
      margin-left: $de-para-dlg-spacing-left-margin-bigger;
      margin-right: $de-para-dlg-spacing-right-margin-bigger;
    }

    .e-de-para-dlg-sub-container .e-input-group {
      margin-bottom: $de-para-sub-title-bottom-margin;
    }

    .e-de-para-dlg-sub-container {
      margin-bottom: $de-para-sub-container-bottom;
    }

    .e-de-para-dlg-right-sub-container {
      top: $de-para-dlg-right-contaner-top;
    }

    .e-de-dlg-sub-header {
      display: block;

      @if $skin-name =='FluentUI' {
        font-size: $de-dlg-sub-header-font-size;
      }

      @else {
        font-size: $de-dlg-sub-header-font-size-bigger;
      }
      font-weight: $de-header-font-weight;
      margin-bottom: $de-para-dlg-sub-title-bottom-margin;
    }

    .e-de-rtl-btn-div {
      font-size: $de-para-dlg-rtl-btn-font-size;
      margin-right: $de-para-dlg-rtl-btn-margin-right;
      width: $de-para-dlg-rtl-btn-width;
    }

    .e-de-rtl-btn-div.e-de-rtl {
      margin-left: $de-de-rtl-btn-div-e-de-rtl-margin-left;
      margin-right: $de-de-rtl-btn-div-e-de-rtl-margin-right-bigger;
    }
  }

  .e-bigger {
    .e-de-dlg-container {
      padding-bottom: $de-padding-full-bigger;
    }

    .e-de-container-row {
      padding-bottom: $de-padding-full-bigger;
    }

    .e-de-subcontainer-left {
      padding-right: $de-padding-half-bigger;
      width: 50%;
    }

    .e-de-subcontainer-right {
      padding-left: $de-padding-half-bigger;
      width: 50%;
    }

    .e-de-dlg-tab-first-child {
      padding-top: $de-padding-half-bigger;
    }

    .e-rtl {
      .e-de-subcontainer-left {
        padding-left: $de-padding-half-bigger;
        padding-right: $de-subcontainer-left-padding-right-bigger;
      }

      .e-de-subcontainer-right {
        padding-left: $de-subcontainer-right-padding-left-bigger;
        padding-right: $de-padding-half-bigger;
        width: 50%;
      }
    }
  }

  @if $skin-name =='FluentUI' {
    .e-bigger {

      .e-de-restrict-pane,
      .e-de-op {
        width: 300px;
      }
    }
  }

  @if $skin-name =="FluentUI" {
    .e-bigger {

      .e-de-op-more-less,
      .e-de-rp-more-less {
        .e-label {
          font-size: $de-op-more-font-size !important;
        }
      }
    }
  }

  @if $skin-name=='FluentUI' or $skin-name=='bootstrap5' {
    .e-bigger {
      .e-documenteditor .e-de-op-close-button {
        left: 240px;
        position: absolute;
        top: 5px;
      }
    }
  }

  @if $skin-name=='bootstrap4' {
    .e-bigger {
      .e-de-style-dlg-name-input {
        height: $e-de-style-input-text-height-bigger;
      }

      .e-de-style-bold-button-size {
        height: $e-de-style-input-text-height-bigger;
      }

      .e-styles-common {
        padding-top: $de-style-list-top-bigger;
      }

      .e-styles-list {
        margin-right: $de-style-list-top-bigger;
      }

      .e-bookmark-gotobutton,
      .e-bookmark-addbutton,
      .e-styles-addbutton,
      .e-bookmark-deletebutton {
        margin-bottom: $de-style-list-top-bigger;
      }
    }

    .e-bigger .e-de-search-tab-content {
      margin-top: $de-op-search-tab-content-margin-top-bigger;
      width: $de-op-search-text-box-container-width;
    }

    .e-bigger .e-de-op-more-less {
      display: inline-flex;
      margin-top: $de-op-more-less-margin-top-bigger;
    }

    .e-bigger .e-de-op-dlg-footer {
      margin-top: $de-op-dlg-footer-margin-top-bigger;
    }
  }

  @if $skin-name=='bootstrap5' or $skin-name=='FluentUI' {
    .e-bigger {

      .e-de-hyperlink-dlg-input,
      .e-de-insert-table-dlg-input,
      .e-de-insert-footnote-dlg-header,
      .e-bookmark-dlgfields,
      .e-de-ff-dlg-heading {
        margin-bottom: $de-bigger-padding !important;
      }

      @if $skin-name !='FluentUI' {

        .e-de-font-dlg-cb-right,
        .e-bookmark-list.e-de-rtl,
        .e-styles-list.e-de-rtl,
        .e-de-ff-dlg-lft-hlf.e-de-rtl {
          margin-left: $de-bigger-padding;
        }

        .e-de-font-dlg-cb-right.e-de-rtl,
        .e-bookmark-list,
        .e-styles-list,
        .e-de-ff-dlg-lft-hlf {
          margin-right: $de-bigger-padding;
        }
      }

      @else {

        .e-de-font-dlg-cb-right,
        .e-bookmark-list.e-de-rtl,
        .e-styles-list.e-de-rtl,
        .e-de-ff-dlg-lft-hlf.e-de-rtl {
          margin-left: $de-font-dlg-left-margin-bigger;
        }

        .e-de-font-dlg-cb-right.e-de-rtl,
        .e-bookmark-list,
        .e-styles-list,
        .e-de-ff-dlg-lft-hlf {
          margin-right: $de-font-dlg-right-margin-bigger;
        }
      }

      .e-bookmark-textboxdiv {
        margin-bottom: $de-bookmark-textboxdiv-bottom-margin-bigger !important;
      }

      .e-de-ff-drpdwn-mvdn,
      .e-de-ff-drpdwn-mvup {
        width: 52px !important;
      }

      .e-documenteditor {
        .e-de-op-close-button.e-de-rtl {
          right: 240px;
        }
      }

      .e-de-track-date {
        font-size: $de-track-date-font-size-bigger;
      }

      .e-de-page-setup-dlg-sub-container-port {
        @if $skin-name !='FluentUI' {
          margin-top: $de-page-setup-dlg-top-margin-bigger;
        }

        @else {
          margin-top: $de-page-setup-dlg-top-margin-bigger;
        }
      }

      .e-de-table-container-div {
        margin-top: $de-table-container-top-margin-bigger;
      }

      .e-de-table-properties-dlg {
        width: 470px;
      }

      .e-de-table-ppty-dlg-preferred-width-div,
      .e-de-table-ppty-dlg-measure-drop-down-div,
      .e-de-ht-wdth-type {
        width: 155px;
      }

      .e-de-row-ht-top,
      .e-de-cell-ht-top {
        width: 179px;
      }
    }
  }

  @if $skin-name=='tailwind' {
    .e-bigger {
      .e-de-table-properties-dlg {
        width: 485px;
      }

      .e-de-table-ppty-dlg-preferred-width-div,
      .e-de-table-ppty-dlg-measure-drop-down-div,
      .e-de-ht-wdth-type {
        width: 155px;
      }

      .e-de-row-ht-top,
      .e-de-cell-ht-top {
        width: 179px;
      }

      .e-de-restrict-pane {
        width: 295px;
      }

      .e-de-rp-stop-div1 {
        padding: 12px 16px 12px 16px;
      }

      .e-de-rp-stop-div2 {
        padding: 16px 16px 24px;
      }

      .e-de-cmt-sub-container,
      .e-de-font-dlg-header,
      .e-de-font-dlg-header-effects,
      .e-de-font-dlg-header-font-color,
      .e-de-dlg-sub-header,
      .e-de-prop-sub-label,
      .e-de-hyperlink-dlg-title,
      .e-de-insert-table-dlg-sub-header,
      .e-de-row-ht-top,
      .e-de-table-dia-align-label,
      .e-de-cell-dia-label-common,
      .e-de-table-setting-labels-heading,
      .e-de-trckchanges-inner,
      .e-de-page-setup-dlg-sub-header,
      .e-de-tbl-indent-lbl,
      .e-de-table-element-subheading,
      .e-de-ff-dlg-heading-small,
      .e-styles-dlgfields,
      .e-de-insert-footnote-dlg-sub-header,
      .e-de-list-ddl-subheaderbottom,
      .e-de-table-measure-lbl,
      .e-bookmark-dlgfields,
      .e-de-page-setup-dlg-sub-title-header,
      .e-de-list-ddl-subheader,
      .e-de-rp-stop-div1,
      .e-de-unprotect-dlg-title,
      .e-de-rp-stop-div2,
      .e-de-rp-enforce-nav.e-de-rp-nav-lbl .e-label,
      .e-de-enforce-dlg-title,
      .e-de-track-date,
      .e-de-rp-sub-content-div,
      .e-de-rp-stop-div3,
      .e-de-cmt-date {
        font-size: $e-de-cmt-sub-container-font-size !important;
      }

      .e-de-table-setting-heading,
      .e-de-cell-dia-options-label,
      .e-de-style-formatting,
      .e-de-table-border-heading,
      .e-de-style-properties,
      .e-de-page-setup-dlg-sub-label,
      .e-de-toc-dlg-heading,
      .e-de-ff-dlg-heading,
      .e-de-toc-dlg-main-heading,
      .e-de-list-ddl-header,
      .e-de-prop-header-label,
      .e-de-table-border-heading,
      .e-de-dlg-spellchecker-subheader,
      .e-de-dlg-spellchecker-subheaderbtm,
      .e-de-list-ddl-header-list-level,
      .e-de-rp-format,
      .e-de-track-toolbar-overlay,
      .e-de-cmt-author-name,
      .e-de-cmt-readonly,
      .e-de-op-search-icon,
      .e-de-op-nav-btn,
      .e-de-track-user-nme,
      .e-de-tc-no-chng {
        font-size: 16px;
      }

      .e-de-cell-margin-top {
        padding-top: 0;
      }

      .e-de-op {
        padding-left: 16px;
        padding-right: 16px;
        width: 308px;
      }

      .e-de-font-dlg-cb-right.e-de-rtl,
      .e-de-style-left-div,
      .e-bookmark-list,
      .e-de-ff-dlg-lft-hlf,
      .e-styles-list,
      .e-de-user-dlg-textbox-input {
        margin-right: 16px !important;
      }

      .e-de-ff-dlg-lft-hlf.e-de-rtl,
      .e-de-table-ppty-dlg-preferred-width-div,
      .e-de-font-dlg-cb-right,
      .e-de-table-ppty-dlg-measure-div,
      .e-de-ff-drpdwn-listview.e-de-rtl,
      .e-de-table-ppty-dlg-measure-drop-down-div,
      .e-bookmark-list.e-de-rtl,
      .e-de-op.e-de-rtl .e-de-search-tab-content,
      .e-de-user-dlg-list.e-de-rtl .e-de-user-dlg-textbox-input {
        margin-left: 16px;
      }

      .e-de-toc-dlg-style-label {
        margin-top: 56px;
      }

      .e-de-ff-drpdwn-mvup {
        margin-right: 12px;
      }

      .e-de-font-clr-div,
      .e-de-toc-dlg-styles,
      .e-de-font-dlg-padding,
      .e-de-page-setup-dlg-sub-title-header,
      .e-de-op-result-container .e-de-list-ddl-subheaderbottom,
      .e-de-op-more-less,
      .e-de-op-replacetabcontentdiv,
      .e-de-op-dlg-footer {
        margin-top: 16px;
      }

      .e-de-ff-drpdwn-mvdn,
      .e-de-ff-drpdwn-mvup {
        width: 46px !important;
      }

      .e-de-list-dlg-div.e-de-rtl,
      .e-de-list-dlg-subdiv.e-de-rtl {
        margin-top: -150px;
      }

      .e-de-list-dlg-div:not(.e-de-rtl) {
        margin-top: 40px;
      }

      .e-de-ht-wdth-type {
        margin-top: -18px;
      }

      .e-de-list-dlg {
        width: 425px;
      }

      .e-de-list-dlg-subdiv .e-input {
        height: 38px;
      }

      .e-de-toc-dlg-container {
        width: 640px;
      }

      .e-de-toc-styles-table-div {
        height: 195px;
      }

      .e-de-toc-table-div {
        height: 127px;
      }

      .e-de-toc-list-view {
        height: 204px;
      }

      .e-de-style-options-div,
      .e-de-ff-dlg-heading,
      .e-de-table-ppty-options-break,
      .e-de-page-setup-dlg-first-page-prop,
      .e-de-style-options-div>div:first-child,
      .e-de-toc-dlg-sub-container,
      .e-de-cmt-author,
      .e-de-font-checkbox-transform,
      .e-de-font-color-label,
      .e-bookmark-gotobutton,
      .e-de-drp-dwn-frst-div,
      .e-de-font-checkbox-transform-label,
      .e-bookmark-deletebutton,
      .e-bookmark-textboxdiv,
      .e-de-user-dlg-user,
      .e-de-page-setup-dlg-sub-label {
        margin-bottom: 12px !important;
      }

      .e-de-rp-format {
        @if $skin-name=='fluent2' {
          color: $de-op-title-clr;
          font-size: 16px;
        }
      }

      .e-de-row-ht-top,
      .e-de-cell-ht-top {
        padding: 0 16px;
      }

      .e-de-style-name,
      .e-de-style-styletype,
      .e-de-style-style-based-on,
      .e-de-style-style-paragraph {
        font-size: 14px;
      }

      .e-de-pagesetup-dlg-container .e-input-group {
        width: 199px !important;
      }

      .e-de-table-measure-lbl {
        width: 90px !important;
      }

      .e-de-list-ddl-subheader,
      .e-de-cell-dia-label-common,
      .e-de-page-setup-dlg-sub-container-port {
        margin-top: 42px;
      }

      .e-de-page-setup-dlg-first-page-prop {
        height: 30px !important;
      }

      .e-de-table-dialog-options-label {
        padding-bottom: 16px;
      }

      .e-de-row-ht-top,
      .e-de-cell-ht-top {
        margin-top: 4px;
      }

      .e-de-table-options-dlg {
        width: 425px;
      }

      .e-de-style-based-para-div .e-input-group,
      .e-de-style-nametype-div .e-input-group,
      .e-de-style-nametype-div .e-input {
        width: 320px !important;
      }

      .e-de-font-color-label,
      .e-de-hyperlink-bookmark-check,
      .e-de-search-tab-content,
      .e-de-page-setup-dlg-orientation-prop {
        margin-top: 16px;
      }

      .e-de-page-setup-dlg-sub-size-container,
      .e-bookmark-addbutton,
      .e-de-page-setup-dlg-layout-sub-container,
      .e-de-insert-table-dlg-input,
      .e-de-insert-footnote-dlg-header,
      .e-de-hyperlink-dlg-input,
      .e-de-style-nametype-div,
      .e-de-rp-format,
      .e-de-hdr-ftr-frst-page-div,
      .e-de-page-setup-dlg-sub-container,
      .e-de-div-seperate-dlg,
      .e-styles-addbutton,
      .e-de-user-dlg-list,
      .e-de-spellcheck-error-container,
      .e-bookmark-deletebutton,
      .e-bookmark-gotobutton {
        margin-bottom: 16px !important;
      }

      .e-de-op-header {
        margin-bottom: 0;
      }

      .e-de-style-based-para-div,
      .e-de-table-options-dlg-div {
        margin-bottom: 20px;
      }

      .e-de-font-dlg .e-input-group {
        width: max-content !important;
      }

      .e-de-list-dlg .e-input-group,
      .e-de-list-dlg .e-input {
        width: 203px !important;
      }

      .e-de-pagesetup-dlg-container {
        width: 415px;
      }

      .e-style-font-fmaily-right {
        width: 188px !important;
      }

      .e-de-style-format-dropdwn {
        height: auto !important;
      }

      .e-de-table-options-dlg-div .e-input-group {
        width: 200px !important;
        margin-right: 16px;
      }
    }

    .e-bigger .e-de-rp-enforce-nav:not(.e-de-rp-nav-lbl) {
      margin: 0 16px 16px 16px;
    }

    .e-bigger .e-de-ctnr-prop-label.e-de-table-prop-label {
      margin-bottom: 12px;
    }
  }

  .e-bigger {
    .e-de-font-content-checkbox-label {
      margin-left: $de-font-content-checkbox-left-bg;
    }

    .e-de-font-content-checkbox-label-rtl {
      margin-right: $de-font-content-checkbox-right-bg;
    }

    .e-de-font-content-label {
      width: $de-font-label-width-bg;
    }
  }

  .e-bigger {
    .e-de-hyperlink {
      @if $skin-name=='Material3' {
        width: 320px;
      }

      @else {
        width: 300px;
      }
    }
  }

  .e-bigger {
    .e-de-insert-spellchecker {
      width: $de-insert-big-spellchecker-width;
    }
  }

  .e-bigger {
    .e-button-custom {
      height: $de-bigger-style-button-height;
      width: 100%;
    }
  }

  .e-bigger {
    @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name !='FluentUI' {

      .e-de-style-font-color-picker,
      .e-de-style-icon-button-size,
      .e-de-style-icon-button-first-size,
      .e-de-style-icon-button-last-size {
        height: $e-de-style-icon-button-last-size-height;
      }
    }

    .e-de-style-bold-button-size {
      @if $skin-name !='tailwind' and $skin-name !='bootstrap5' and $skin-name !='FluentUI' and $skin-name !='Material3' {
        margin-right: $de-style-bold-button-right-margin-bigger;
        height: $e-de-style-bold-button-size-height-big;
      }

      @if $skin-name=='fluent2' {
        margin-left: 0;
        border-left: 0;
        border-right: 0;
        height: 35px;
        margin-right: 0;
      }

      @else {
        margin-left: $de-style-dialog-label-bottom-margin;
      }
    }
  }

  .e-bigger .e-dlg-container .e-de-dlg-target .e-de-style-dialog {

    .e-de-style-font-group-button,
    .e-style-paragraph {
      button {
        @if $skin-name =='Material3' {
          height: 40px !important;
          width: 44px !important;
        }
      }
    }

    .e-de-style-font-color-picker button {
      height: $e-de-style-font-color-picker-height-big !important;
      width: auto !important;
    }
  }

  .e-bigger .e-dlg-container .e-de-dlg-target .e-de-style-dialog {

    .e-de-style-font-group-button,
    .e-style-paragraph {
      button {
        @if $skin-name =='Material3' {
          height: 40px !important;
          width: 44px !important;
        }
      }
    }

    .e-de-style-font-color-picker button {
      height: $e-de-style-font-color-picker-height-big !important;
      width: auto !important;
    }
  }

  @if $skin-name =='Material3' {
    .e-bigger {
      .e-rtl {

        .e-de-style-font-group-button,
        .e-de-style-paragraph-indent-group-button,
        .e-de-style-paragraph-group-button {
          button {
            height: $e-de-style-font-group-button-height !important;
            width: 44px !important;
          }
        }
      }

      .e-de-style-font-group-button,
      .e-de-style-paragraph-indent-group-button,
      .e-de-style-paragraph-group-button {
        button {
          height: $e-de-style-font-group-button-height !important;
          width: 44px !important;
        }
      }
    }
  }

  .e-bigger {

    .e-de-op-input-group,
    .e-de-op-replacewith {
      height: $e-de-op-input-group-height;
    }
  }

  .e-bigger {
    .e-de-insert-table {
      height: auto;
      width: auto;
    }

    .e-de-insert-footnote {
      height: auto;
      width: auto;
    }

    .e-de-dlg-target .e-footer-content .e-control.e-btn.e-flat:not(.e-icon-btn) {
      height: auto;
    }

    .e-de-font-dlg {
      width: $de-font-dlg-width-big;
    }

    .e-para-dlg-sub-height {
      height: $e-para-dlg-sub-height-height;
    }

    .e-de-toc-table-div .e-de-toc-dlg-toc-level.e-de-rtl {
      margin-right: $de-toc-dlg-toc-level-margin-left;
    }

    .e-de-font-content-label-width {
      width: $de-font-content-label-width;
    }

    .e-de-toc-label {
      margin-left: $de-toc-label-margin-left-bigger;
    }

    .e-de-toc-label-rtl {
      margin-left: $de-toc-label-rtl-margin-left-bigger;
      margin-right: $de-toc-label-rtl-margin-right-bigger;
    }

    .e-de-outline-rtl {
      width: 173px;
    }

    .e-de-rp-header {
      font-size: $de-de-rp-header-font-size-bigger;
      width: 75%;
    }
  }

  .e-bigger .e-de-rp-btn-enforce {
    padding-left: $de-rp-btn-enforce-padding-big;
    padding-right: $de-rp-btn-enforce-padding-big;
  }

  .e-bigger .e-de-cmt-textarea.e-input {
    padding-top: $e-de-cmt-textarea-padding-top-big;
  }

  .e-bigger .e-de-cmt-textarea.e-input:focus {
    @if $skin-name =='fluent2' {
      border-color: $content-bg-color-alt1;
      border-radius: 5px;
      box-shadow: $border;
    }
  }

  .e-bigger {

    .e-de-cmt-post-btn.e-btn.e-flat,
    .e-de-cmt-cancel-btn.e-btn.e-flat {
      height: $de-cmt-post-btn-ht-big;
      margin-left: $de-cmt-post-btn-left-margin-bigger;
      width: $de-cmt-post-btn-wt-big;

      @if $skin-name =='tailwind' {
        padding-top: $de-cmt-cancel-btn-padding-top-big;
        padding-left: $de-cmt-cancel-btn-padding-left-big;
      }
    }

    .e-de-cp-whole-header {
      height: $e-de-cp-whole-header-height;
      padding: $de-cp-whole-header-padding-bigger;
      padding-right: $de-cp-whole-header-padding-right-bigger;
    }

    .e-de-rp-close-icon {
      float: right;
      position: relative;
      top: $de-rp-close-icon-top-bigger;
      right: $de-rp-close-icon-right-bigger;
    }

    .e-rtl {

      .e-de-cmt-post-btn.e-btn.e-flat,
      .e-de-cmt-cancel-btn.e-btn.e-flat {
        margin-right: $de-cmt-post-btn-margin-right-bigger;

        @if $skin-name =='tailwind' {
          padding-bottom: $de-cmt-cancel-btn-padding-top-big;
          padding-right: $de-cmt-cancel-btn-padding-left-big;
        }
      }
    }
  }

  .e-bigger {
    .e-de-cmt-author-name {
      padding-left: $de-cmt-author-nme-padding-left-big;
    }

    .e-de-cmt-rply-view {
      margin-top: $de-cmt-textbox-top-margin-big;
    }

    .e-de-cmt-sub-container {
      padding: $de-cmt-sub-container-padding-big;

      @if $skin-name=='fluent2' {
        background-color: $de-ctnr-prop-bg-clr;
      }
    }

    .e-de-cmt-sub-container.e-de-cmt-selection {
      padding-left: $de-cmt-sub-container-padding-left-big;
    }

    .e-de-cmt-sub-container:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
      padding-left: $de-cmt-sub-container-hover-padding-left-big;
    }

    .e-de-cmt-sub-container.e-de-cmt-reply {
      padding: $de-cmt-sub-container-padding-cmt-reply;
    }

    .e-de-rp-nav-btn {
      width: auto;
    }

    .e-de-rp-whole-header {
      padding: $de-rp-whole-header-padding-big;
    }

    .e-de-rp-sub-div {
      border-bottom: 1px solid $de-list-view;
      padding: $de-rp-sub-div-padding-big;
    }

    .e-de-rp-enforce {
      padding: $de-rp-enforce-padding-big;
    }

    .e-de-enforce .e-de-enforce-dlg-input:not(.e-de-enforce .e-de-enforce-dlg-input:last-child) {
      width: 300px;
    }

    .e-rtl {
      .e-de-cmt-author-name {
        padding-left: $de-cmt-author-name-padding-left;
        padding-right: $de-cmt-author-nme-padding-left-big;
      }

      .e-de-cmt-sub-container.e-de-cmt-selection {
        padding-left: $de-cmt-sub-container-padding-big;
        padding-right: $de-cmt-sub-container-padding-left-big;
      }

      .e-de-cmt-sub-container:not(.e-de-cmt-selection):not(.e-de-cmt-reply):hover {
        padding-left: $de-cmt-sub-container-padding-big;
        padding-right: $de-cmt-sub-container-hover-padding-left-big;
      }

      .e-de-rp-close-icon {
        float: left;
        right: $de-rp-close-icon-right-bigger-rtl;
      }
    }
    @if $skin-name =='tailwind3' {
      .e-de-subcontainer-left .e-float-input {
        margin-bottom: $de-subcontainer-left-margin-bottom-big;
      }
      .e-de-style-format-dropdwn {
        height: auto !important;
      }
      .e-de-op-more-less {
        > div:nth-child(2) {
          margin-left: $bigger-de-op-more-less-margin-left;
        }
      }
    }
  }
}

$de-title-bar-bg-clr: $brand-primary !default;
$de-title-bar-font-clr: $brand-primary-font !default;
$de-ctnr-bg-clr: $grey-base !default;
$de-ctnr-prop-bg-clr: $de-ctnr-bg-clr !default;
$de-ctnr-height: calc(100%) !default;
$de-ctnr-tlbr-height: 77px !default;
$de-ctnr-tlbt-height-big: 82px !default;
$de-tlbr-margin-first: 12px !default;
$de-tlbr-margin-first-big: 16px !default;
$de-tlbr-margin-right: 6px !default;
$de-tlbr-margin-right-big: 8px !default;
$de-ctrnr-tblr-separator-margin: 0 5.5px !default;
$de-ctrnr-tblr-separator-margin-big: 0 7.5px !default;
$de-ctnr-margin-bottom: 12px !default;
$de-ctnr-margin-bottom-big: 16px !default;
$de-group-btn-hgt: 34px !default;
$de-group-btn-hgt-big: 38px !default;
$de-ctnr-tlbr-width: calc(100% - 75px) !default;
$de-spellcheck-tlbr-width: 91px !default;
$de-spellcheck-tlbr-width-big: 111px !default;
$de-spellcheck-tlbr-height: 34px !default;
$de-spellcheck-tlbr-margin-left: 7.5px !default;
$de-zoom-tlbr-margin-left: calc(100% - 380px) !default;
$de-zoom-tlbr-margin-left-big: calc(100% - 410px) !default;
$e-de-ctnr-break-listview-margin-right: 12px !default;
$e-de-ctnr-break-listview-margin-right-big: 16px !default;
$e-de-ctnr-break-listview-margin-left: 12px !default;
$e-de-ctnr-break-listview-margin-left-big: 16px !default;
$de-tlbr-btn-height: calc(100% - 10px) !default;
$de-tbl-merge-cell: 17px !default;
$de-ruler-background-color: $gray-darker !default;
$de-ruler-margin-color: $grey-44 !default;
$de-ruler-tick-stroke: $grey-f9 !default;
$de-ruler-label-fill: $grey-light-font !default;
$de-ruler-indent-stroke: $grey-cc !default;
$de-ruler-indent-fill: $grey-44 !default;
$de-ruler-indent-hover: $gray-darker !default;
$de-ruler-indent-active: $brand-primary !default;
$de-custom-treeview-text-size: 13px !default;
$de-custom-treeview-text-size-bg: 14px !default;
$de-tool-ctnr-editor-height: calc(100% - 115px) !default;
$de-tool-ctnr-editor-height-big: calc(100% - 121px) !default;
$de-ctnr-editor-height: calc(100% - 38px) !default;
$de-ctnr-editor-height-big: calc(100% - 38px) !default;
$de-ctrnr-tblr-item-padding: 0 !default;
$de-ctrnr-tblr-item-margin: 0 6.5px !default;
$de-ctrnr-tblr-item-margin-big: 0 6px !default;
$de-prpty-btn-bg-clr: $grey-darker !default;
$de-panel-header-size: 12px !default;
$de-panel-header-color: $grey-cc !default;
$de-panel-sub-label-color: $grey-cc !default;
$de-header-line-color: 1px solid $grey-99 !default;
$de-group-btn-hgt: 34px !default;
$de-toc-template-content1: 81px !default;
$de-toc-template-content2: 64px !default;
$de-toc-template-content3: 60px !default;
$de-img-span-top: 12px !default;
$de-ribbon-img-span-top: 8px !default;
$de-img-span-left: 12px !default;
$de-toggle-bg-color: $grey !default;
$de-toggle-btn-outline: #fafafa 0 solid !default;
$de-toggle-btn-border: inset 0 3px 5px rgba(0, 0, 0, .125) !default;
$de-panel-border: $grey-99 !default;
$de-page-no-width-spellout: calc(100% - 140px) !default;
$de-page-no-width-spellout-big: calc(100% - 160px) !default;
$de-font-color: $grey-light-font !default;
$de-hover-clr:  1px solid #ff8c00 !default;
$de-hover-bg: #313131 !default;
$de-pane-separator: $grey-99 !default;
$de-ctnr-status-bar-hgt: 36px !default;
$de-border-size-button-height-bg: 38px !default;
$de-border-size-button-width-bg: 96px !default;
$de-border-size-button-height: 28px !default;
$de-border-size-button-width: 100px !default;
$de-list-hover-bg: $grey-e6 !default;
$e-de-statusbar-separator-color: #ccc;
$de-pane-margin-right: 12px;
$de-pane-margin-right-big: 16px;
$de-left-panel-width: 153px;
$de-left-panel-width-big: 149px;
$de-right-panel-width: 75px;
$de-text-pane-width: 264px;
$de-text-pane-width-big: 272px;
$de-left-btn-width: 153px * .25;
$de-left-btn-width-big: 149px * .25;
$de-right-btn-width: $de-right-panel-width * .5;
$de-border-btn-width-big: 42px;
$de-img-span-top-big: 14px;
$de-bullet-icon-font-size: 29px;
$de-bullet-icon-line-height: 26px;
$de-list-button-margin-right: 14px;
$de-list-button-margin-right-bigger: 16px;
$de-ctnr-padding: 12px;
$de-pageweb-toggle-color: $grey !default;
$de-pageweb-toggle-outline: #fafafa 0 solid !default;
$de-layout-btn-font-size: 14px;
$de-layout-btn-bgr-font-size: 16px;
$de-pagenumber-text-border-radius: 2px;
$de-pagenumber-text-margin-top: -3px;
$e-de-pagenumber-input-margin-left: -3px;
$e-de-ctnr-pg-no-spellout-padd-top: 9px;
$e-de-ctnr-pg-no-spellout-padd-top-big: $e-de-ctnr-pg-no-spellout-padd-top;
$e-de-pagenumber-bg: $gray-dark;
$e-de-status-bar-padding-top: 2.5px;
$e-de-status-bar-big-padding-top: 2.5px;
$e-de-review-pane-width: 420px;
$e-de-ctnr-linespacing-tick-icon: 6px;
$e-de-bzr-button-bg-color: inherit;
$e-de-bzr-button-font-color: #f0f0f0 !default;
$e-de-bzr-button-border-color: inherit;
$e-de-bzr-button-hover-bg-color: inherit;
$e-de-bzr-button-hover-border: inherit;
$e-de-bzr-button-hover-border-radius: inherit;
$e-de-bzr-button-hover-font-color: #f0f0f0 !default;
$e-de-bzr-btn-font-size: 16px;
$e-de-bzr-btn-font-size-big: 16px;
$de-prop-style-padding: 12px;
$de-prop-div-padding-top: 12.5px;
$de-prop-div-padding-bottom: 11.5px;
$de-prop-pane-margin: 14px;
$de-table-prop-border-margin: 14px;
$de-clr-pckr-width: 30.8px;
$de-toolbar-font-size: 12px;
$de-toolbar-padding-bottom: 5px;
$de-toolbar-padding-bottom-bg: 5px;
$de-header-font-weight: normal;
$de-list-thmbnail-border-clr: #e4e4e4;
$de-prop-sub-label-mrgn-btm: 8px;
$de-hdr-ftr-frst-div-mrgn-btm: 10px;
$de-hdr-ftr-top-div-mrgn-btm: 14px;
$de-ctnr-pg-no-spellout-fnt-size: 13px;
$de-ctnr-pg-no-spellout-fnt-size-bg: $de-ctnr-pg-no-spellout-fnt-size;
$de-status-br-lbl-fnt-weight: normal;
$de-status-br-left: 15.5 !default;
$de-status-br-top: 10px !default;
$de-status-br-top-big: 10px !default;
$de-white-color: #fff !default;
$de-black-color: #000 !default;
$de-hlt-clr-height: 18px;
$de-hlt-clr-height-bigger: 25px;
$de-prop-btn-icon-clr: #ccc;
$de-ribbon-property-label: 12px;

// Subtract the ribbon & statusbar height
$de-ribbon-simplified-ctnr-editor-height: calc(100% - 115px) !default;
$de-ribbon-simplified-ctnr-editor-height-big: calc(100% - 119px) !default;

$de-ribbon-classic-editor-height: calc(100% - 197px) !default;
$de-ribbon-classic-editor-height-big: calc(100% - 201px) !default;
$de-ctnr-layout-margin-bottom: 2px;
$de-ctnr-picture-margin-bottom: 0;

// layout.scss
$de-toolbar-line-height: 0;
$de-ctnr-hglt-btn-margin: 3px;
$de-hglt-no-color-padding-top: 1px;
$de-ctnr-hglt-no-color-font-size: 12px;
$de-ctnr-hglt-no-color-padding-top: 11px;

// bigger.scss
$de-statusbar-pageweb-padding: 0;
$de-statusbar-spellcheck-border-radius: 2px;
$de-ctnr-toolbar-margin-left: 0;
$de-ctnr-toolbar-margin-right: 0;
$de-cntr-pane-padding: 16px;
$de-statusbar-zoom-spell-border: 0;
$de-prop-fill-label-margin-left: 0;
$de-prop-fill-label-margin-right-big: 9.8px;
$de-cell-text-box-margin-left: 16px;
$de-cell-text-box-margin-right: 0;
$de-stylediv-padding-left: 16px;
$de-tlbr-wrapper-border: 0;
$de-panel-border-left: 1px;
$de-ctnr-segment-margin-right: 0;
$de-ctnr-prop-label-font-weight: 500;
$de-ctnr-prop-label-letter-spacing: .05px;
$de-table-prop-label-margin-left-big: 14.5px;
$de-table-prop-label-margin-left-rtl: 0;
$de-toolbar-padding: 0;
$de-ctnr-properties-pane-btn-border-radius: 0;
$de-showhide-btn-border: 0;
$de-toolbar-font-size: 12px;
$de-ctrnr-tblr-padding: 0;
$de-toolbar-items-padding: 0;
$de-pane-separator-border-bottom: .5px;
$de-property-div-padding: 16px;
$de-pane-separator-border-top: 1px;
$de-ctnr-dropdown-ftr-font-size: 12px;
$de-ctnr-dropdown-ftr-line-height: 40px;
$de-btn-hghlclr-top: 0;
$de-btn-hghlclr-right: 6px;
$de-ctnr-hglt-color-font-size: 12px;
$de-ctnr-hglt-color-font-weight: 400;
$de-image-property-padding-left: 32px;
$de-panel-border-width: 1px;
$de-panel-margin-left: 78px;
$de-toc-template1-content1-font-size: 10px;
$de-toc-template1-content1-margin-left: 5.4px;
$de-toc-template1-content1-margin-top: 6.7px;
$de-toc-template1-content2-font-size: 8px;
$de-toc-template1-content2-margin-left: 20.4px;
$de-toc-template1-content2-margin-top: 5.7px;
$de-toc-template1-content3-font-size: 7px;
$de-toc-template1-content3-margin-left: 28.4px;
$de-toc-template1-content3-margin-top: 6.7px;
$de-toc-optionsdiv-margin-bottom: 11.5px;
$de-toc-optionsdiv-margin-left: 5.5px;
$de-toc-optionsdiv-margin-top: 15.5px;
$de-toc-optionsdiv-margin-left-rtl: 0;
$de-prop-sub-label-font-size: 13px;
$de-prop-sub-label-margin-bottom: 8.5px;
$de-btn-cancel-margin-left: 10px;
$de-statusbar-zoom-border: 0;
$tbar-btn-text-line-height: 25px;
$tbar-btn-text-padding-top: 0;
$tbar-btn-text-padding-right: 5px;
$tbar-btn-text-line-hgt: 0;
$de-listview-icon-line-height: 22px;
$e-de-btn-line-height: 30px;

// theme.scss
$de-ctnr-group-btn-middle-border-radius: 0;
$de-statusbar-pageweb-border: 0;
$e-de-ctnr-break-listview-line-height: 22px;
$de-ctnr-font-weight: 400;
$e-de-btn-padding: 0;
$e-de-statusbar-separator-border-left: 1px;
$de-statusbar-spellcheck-border-radius: 2px;
$de-statusbar-spellcheck-font-weight: 400;
$de-panel-border-bottom: 1px;
$de-pane-margin-rgt: 0;
$de-panel-header-font-weight: 500;
$de-panel-header-letter-spacing: .05px;
$de-table-prop-label-margin-left: 12px;
$de-toolbar-border-radius: 0;
$de-tlbr-margin-left: 0;
$de-tlbr-btn-padding: 0;
$de-prpty-btn-border-radius: 0;
$de-op-border-left: 1px;
$de-pane-separator-border-bottom: .5px;
$de-pane-separator-font-size: 12px;
$de-pane-separator-line-height: 40px;
$de-btn-hghlclr-padding: 1px;
$de-ctnr-hglt-color-font-size: 12px;
$de-ctnr-hglt-color-font-weight: 400;
$de-floating-menu-menuitem-padding: 4px;
$de-list-hover-border-width: 3px;
$de-list-hover-padding: 2px;
$de-list-header-presetmenu-font-size: 11px;
$de-list-header-presetmenu-line-height: 14px;
$de-bullet-icon-font-sze: 14px;
$de-bullet-font-size: 42px;
$de-prop-btn-icon-border-bottom: 1px;
$de-prop-btn-icon-margin-left: 5px;
$de-floating-menuitem-padding: 0;
$de-floating-menuitem-margin-top: 0;
$de-floating-menuitem-margin-right: 5px;
$de-floating-menuitem-margin-bottom: 5px;
$de-floating-menuitem-margin-left: 0;
$de-list-thmbnail-border-width: 1px;
$de-list-thmbnail-margin: 5px;
$de-list-thmbnail-padding: 2px;
$de-ctnr-padding-top: 7px;
$de-ctnr-padding-right: 10px;
$de-ctnr-padding-bottom: 7px;
$de-ctnr-padding-left: 10px;
$de-list-item-font-size: 14px;
$de-title-bar-border-width: 3px;
$de-title-bar-padding: 2px;
$de-floating-menu-padding-top: 10px;
$de-floating-menu-padding-right: 4px;
$de-floating-menu-padding-bottom: 5px;
$de-floating-menu-padding-left: 10px;
$de-list-container-border-width: 1px;
$de-list-container-border-radius: 2px;
$de-list-container-margin: 0;
$de-list-container-padding-top: 5px;
$de-list-container-padding-right: 0;
$de-image-property-padding-left: 32px;
$de-panel-header-margin-left: 78px;
$de-toc-template1-margin-left: 0;
$de-toc-template1-margin-right: 78px;
$de-toc-template1-content1-font-size: 10px;
$de-toc-template1-content1-margin-left: 5.4px;
$de-toc-template1-content1-margin-top: 6.7px;
$de-toc-template1-content2-font-size: 8px;
$de-toc-template1-content2-margin-left: 20.4px;
$de-toc-template1-content2-margin-top: 5.7px;
$de-toc-template1-content3-font-size: 7px;
$de-toc-template1-content3-margin-left: 28.4px;
$de-toc-template1-content3-margin-top: 6.7px;
$de-prop-sub-label-font-size: 13px;
$de-ctnr-pg-no-border: 1px;
$de-statusbar-zoom-spell-border: 0;
$de-btn-cancel-rtl-margin-lft: 0;
$de-prop-header-label-font-size: 13px;
$de-prop-header-label-letter-spacing: .05px;
$de-stylediv-rtl-padding-left: 0;
$de-prop-style-margin-right: 0;
$de-prop-fill-label-margin-right-rtl: 0;
$de-hRuler-border-bottom: .5px;
$de-vRuler-border-right: .5px;
$de-vRuler-border-width: .5px;
$de-ctn-font-size: 12px;
$e-de-prop-fill-label-margin-right: 8px;
$e-de-bzr-btn-padding-bottom: 4px;
$e-tbar-btn-text-line-height: 25px;
$e-toolbar-items-line-height: 30px;
$e-de-statusbar-separator-height: 16px;
$e-de-prop-pane-height: 100%;
$e-de-prop-pane-min-height: 200px;
$e-de-ctnr-pg-no-spellout-height: 100%;
$e-de-statusbar-zoom-spell-height: 34px;
$e-de-grp-btn-ctnr-height: 42px;
$e-de-tool-ctnr-properties-pane-min-height: 200px;
$e-de-overlay-height: 100%;
$e-de-ctnr-properties-pane-btn-min-height: 100%;
$e-de-toc-template1-height: 129px;
$e-de-toc-template1-content1-height: 11px;
$e-de-toc-template1-content2-height: 9px;
$e-de-toc-template1-content3-height: 8px;
$e-de-statusbar-zoom-height-big: 34px;
$e-de-text-wrap-height: 0;
$e-list-icon-height: 24px;
$e-de-font-clr-picker-height: 24px;
$e-de-toolbar-height: 100%;
$e-de-ctnr-hglt-btn-height: 25px;
$e-hglt-no-color-height: 30px;
$e-de-ctnr-picture-format-tab-height: 30px;
$e-de-statusbar-pageweb-height: 33px;
$e-de-listview-height: 24px;
$e-de-statusbar-zoom-height: 33px;
$e-de-statusbar-separator-height: 16px;
$e-de-pane-height: 460px;
$e-de-separator-height: 59px;
$e-de-toolbar-min-height: 16px;
$e-de-floating-menu-height: 55px;
$e-de-floating-bullet-menuitem-md-height: 38px;
$e-de-menuitem-none-height: 70px;
$e-de-ctnr-pg-no-height: 100%;
$e-de-ctnr-group-btn-height: 36px;
$e-de-grp-ctnr: 38px;
$e-de-ctnr-hglt-color-height: 24px;
$e-de-ctnr-showhide-font-size: 16px;
$e-de-ctnr-close-font-size: 16px;
$e-de-selected-spellcheck-font-size: 10px;
$e-de-ctnr-bullet-font-size: 20px;
$e-de-ctnr-bullet-dot-font-size: 8px;
$e-de-ctnr-bullet-line-height: 28px;
$e-de-ctnr-hglt-btn-border: .5px;
$e-de-statusbar-zoom-border: 0;
$e-btn-pageweb-spellcheck-border: 0;
$e-de-tlbr-wrapper-border: 0;
$e-de-showhide-btn-border: 0;
$e-de-ctn-height: 100%;
$e-de-ctn-border-big: 1px;
$e-de-ctn-border: none;
$de-ctnr-dropdown-ftr-border-top: 1px;
$de-prop-fill-label-margin-right: 8px;

@include export-module('document-editor-container-layout') {
  .e-de-toolbar {
    height: $e-de-toolbar-height;
  }
  .e-documenteditorcontainer {
    display: block;
  }
  .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
    height: $e-de-text-wrap-height;
    @if $skin-name == 'tailwind' {
      line-height: 1;
    }
    @else if $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
      line-height: .5;
    }
    @else {
      line-height: $de-toolbar-line-height;
    }
  }

  .e-de-ctnr-file-picker {
    left: -110em;
    position: fixed;
  }

  .e-de-ctnr-rtl {
    direction: rtl;
  }

  .e-de-ctnr-layout-tab {
    position: relative;
    width: 100%;
    display: flex;
    align-content: center;
  }

  .e-de-ctnr-layout-ribbon-segment.e-de-ctnr-layout-tab .e-textbox,
  .e-de-ctnr-layout-ribbon-segment.e-de-ctnr-layout-tab .e-textbox {
    width: 100px;
  }

  .e-de-ctnr-hglt-btn {
    border: $e-de-ctnr-hglt-btn-border solid transparent;
    display: inline-block;
    height: $e-de-ctnr-hglt-btn-height;
    margin: $de-ctnr-hglt-btn-margin;
    width: 25px;
  }

  .e-color-selected,
  .e-de-ctnr-hglt-btn:hover {
    border-color: $de-white-color;
    outline: $de-black-color .5px solid;
  }

  .e-hglt-no-color {
    height: $e-hglt-no-color-height;
    padding-top: $de-hglt-no-color-padding-top;
    width: 157px;

    #{if(&, '&', '*')}:hover {
      background-color: $de-hover-bg;
      cursor: pointer;
    }
  }

  .e-de-ctnr-hglt-no-color {
    font-size: $de-ctnr-hglt-no-color-font-size;
    font-weight: normal;
    left: 40px;
    padding-top: $de-ctnr-hglt-no-color-padding-top;
    position: absolute;
    top: 100px;
  }

  /* stylelint-disable */
  .e-de-scrollbar-hide::-webkit-scrollbar {
    width: 0;
  }

  .e-de-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* stylelint-enable */
  @if $skin-name == 'FluentUI' {
    .e-de-ctnr-group-btn .e-btn .e-btn-icon.e-icons.e-de-ctnr-fontcolor,
    .e-de-ctnr-group-btn .e-btn .e-btn-icon.e-icons.e-de-ctnr-change-case {
      font-size: 18px;
    }
  }

  .e-de-contextmenu-wrapper {
    .e-lib.e-contextmenu.e-control.e-menu-parent {
      .e-blankicon {
        padding-left: $de-tbl-merge-cell !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
}

@include export-module('document-editor-container-theme') {
    /* stylelint-disable */
    .e-de-toolbar {
        height: $e-de-toolbar-height;
    }
    .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group:not(.e-outline){
        box-shadow: none;
        height: $de-group-btn-hgt;
        #{if(&, '&', '*')}:focus {
            box-shadow: none;
        }
        #{if(&, '&', '*')}:active {
            box-shadow: none;
        }
        #{if(&, '&', '*')}:hover {
            box-shadow: none;
        }
    }
    .e-de-ctnr-group-btn-middle button {
        border-radius: $de-ctnr-group-btn-middle-border-radius;
    }
    .e-de-property-label-container {
        align-content: center;
        width: 100px;
    }
    .e-de-indent-label-container {
        align-content: center;
        width: 80px;
    }

    .e-de-picture-label-container {
        align-content: center;
        width: 45px; 
    }

    .e-de-ctnr-picture-format-tab {
        position: relative;
        width: 100%;
        display: flex;
        @if $skin-name != 'Material3' {
        height: $e-de-ctnr-picture-format-tab-height;
        }
    }

    .e-de-ribbon-property-label {
        font-size: $de-ribbon-property-label;
    }

    .e-ribbon-gallery-wrapper .e-ribbon-gallery-item .e-ribbon-gallery-text,
    .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-item .e-ribbon-gallery-text {
        font-family: inherit;
        font-size: inherit;
        color: inherit;
        font-weight: inherit;
    }

    .e-de-ctnr-layout-ribbon-segment {
        margin-right: $de-ctnr-margin-bottom;
        margin-bottom: $de-ctnr-layout-margin-bottom;
    }
    .e-de-ctnr-picture-ribbon-segment {
        @if $skin-name != 'Material3' {
        margin-right: $de-ctnr-margin-bottom;
        margin-bottom: $de-ctnr-picture-margin-bottom;
        }
    }

    .e-de-ribbon-border-size-button,
    .e-de-ribbon-border-color-picker {
        @if $skin-name =='tailwind' {
            width: 85px;
        }
        @else if $skin-name == 'tailwind3' {
            width: 103px;
        }
        @else {
            width: $de-border-size-button-width;
        }
    }
    .e-de-prop-bordersize .e-split-btn-wrapper .e-split-colorpicker .e-selected-color {
    width: 50px !important;
}
    .e-de-ribbon-border-color-picker .e-selected-color {
        width: 50px !important;
    }

    @if ($skin-name=='Material3') {
        .e-de-review-pane button.e-de-close-icon {
            background: transparent;
            box-shadow: none;
        }
        .e-de-op-more-less > div:last-child label {
            left: 35px;
        }
        .e-de-ctn .e-de-bzr-button {
            box-shadow: none !important;
        }
        .e-de-char-fmt-btn-left button:not(:first-child) {
            border: 1px solid transparent;
            border-left: 1px solid rgba($border-light);
        }
        .e-de-prop-pane .e-de-ctnr-group-btn button, 
        .e-de-ctn .e-de-status-bar button {
            @if $skin-name == 'tailwind3' {
                width: $de-prop-clr-wrap-height;
                height: $de-prop-clr-wrap-height;
            }
        }
        .e-de-ctnr-group-btn {
            .e-de-prop-font-button {
                position: relative;
                border: 1px solid transparent rgba($border-light);
                border-right-width: 1px;
            }
            .e-de-prop-font-last-button {
                position: relative;
                border: 1px solid transparent rgba($border-light);
                border-left-width: 1px;
            }
        }
        .e-de-ctnr-group-btn {
            .e-de-prop-indent-button {
                position: relative;
                border: 1px solid transparent rgba($border-light);
                border-right-width: 1px;
            }
            .e-de-prop-indent-last-button {
                position: relative;
                border: 1px solid transparent rgba($border-light);
                border-left-width: 1px;
            }
        }
        .e-de-grp-btn-ctnr {
            .e-de-ctnr-group-btn-middle {
                > * {
                    border-radius: 0px;
                }
                & {
                    margin-bottom: -1px;
                }

            }
        }
    }
    .de-tbl-fill-clr .e-dropdown-btn.e-btn {
        box-shadow: none;
    }
    .e-de-prop-pane .e-de-ctnr-group-btn button,
    .e-de-ctn .e-de-status-bar button {
        box-shadow: none;
        height: $de-group-btn-hgt;
        #{if(&, '&', '*')}:focus {
            box-shadow: none;
        }
        #{if(&, '&', '*')}:active {
            box-shadow: none;
        }
        #{if(&, '&', '*')}:hover {
            box-shadow: none;
        }
    }
    .e-de-statusbar-pageweb {
        background: $de-ctnr-bg-clr;
        border: $de-statusbar-pageweb-border;
        box-shadow: none;
        float: right;
        @if $skin-name!='bootstrap5' and $skin-name!='tailwind' and $skin-name!='FluentUI' { 
            height: $e-de-statusbar-pageweb-height;
            width: 33px;
        }
        @if $skin-name=='bootstrap4' {
            color: $e-de-statusbar-separator-color;
        }
        @if $skin-name=='bootstrap5' {
            color: $icon-color;
        }
        #{if(&, '&', '*')}:hover {
            @if $skin-name=='bootstrap5' {
                color: $e-de-bzr-button-hover-font-color;
            }
            box-shadow: none;
        }
    }

    .e-split-btn-wrapper.e-de-prop-splitbutton,
    .e-split-btn-wrapper.e-de-btn-hghlclr,
    .e-btn.de-split-button {
        @if $skin-name=='fluent2' {
            margin-right: $de-pane-margin-right;
        }
        @if $skin-name=='Material3' {
            box-shadow: none;
        }
    }
    .e-de-statusbar-pageweb .e-de-printlayout,
    .e-de-statusbar-pageweb .e-de-weblayout {
        font-size: $e-de-bzr-btn-font-size;
    }
    .e-de-statusbar-pageweb .e-de-printlayout:hover,
    .e-de-statusbar-pageweb .e-de-weblayout:hover {
        font-size: $e-de-bzr-btn-font-size;
        @if $skin-name=='bootstrap5' {
          color: $e-de-bzr-button-hover-font-color;
        }
    }
    .e-de-listview.e-de-listview-icon.e-icons.e-list-icon {
        height: $e-de-listview-height;
        width: 16px;
        margin-right: $e-de-ctnr-break-listview-margin-right;
    }
    .e-de-listview-icon {
        height: auto;
        width: auto;
        line-height: $e-de-ctnr-break-listview-line-height;
        margin-right: $e-de-ctnr-break-listview-margin-right;
        @if $skin-name=='fluent2' {
            padding: 1px 12px;
        }
    }
    .e-de-linespacing {
        margin-top: $e-de-ctnr-linespacing-tick-icon;
    }
    .e-de-statusbar-zoom {
        background: $de-ctnr-bg-clr;
        border: $e-de-statusbar-zoom-border;
        color: $de-font-color;
        float: right;
        font-weight: $de-ctnr-font-weight;
        height: $e-de-statusbar-zoom-height;
        @if $skin-name =='bootstrap5' {
            box-shadow: none;
        }
    }
    .e-de-pagenumber-text {
        border: none !important;
    }

    @if $skin-name=='Material3' {
        .e-de-prop-pane .e-de-ctnr-group-btn.e-btn-group button {
            background: $de-prop-btn-bg-color;
        }
        .e-de-font-clr-picker button,
        .e-de-prop-font-colorpicker button {
            background: $de-prop-btn-bg-color !important;
        }
        .e-de-style-font-color-picker .e-de-style-icon-button-size button:first-child {
            margin-right: 0px;
        }
        .e-de-ctnr-group-btn .e-btn-group button,
        .e-documenteditorcontainer.e-lib .e-split-btn-wrapper button,
        .e-documenteditorcontainer.e-lib .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
        .e-de-ctnr-segment button,
        .e-de-char-fmt-btn-right button,
        .e-de-border-size-button,
        .e-de-cell-div button,
        .e-de-insert-del-cell button,
        .e-de-align-text button {
            border-radius: 4px;
            background: $de-prop-btn-bg-color;
        }
        .e-de-char-fmt-btn-right button:not(:first-child),
        .e-de-char-fmt-btn-left button:not(:first-child), 
        .e-de-align-text button:not(:first-child) {
            border-left: 1.7px solid rgba($border-light);
            background: $de-prop-btn-bg-color;
        }
        .e-de-insert-del-cell button:not(:first-child) {
            &:not(.e-rtl) {
                border-left: 1.7px solid rgba($border-light);
            }
        }
        .e-de-ctnr-segment-rtl {
            .e-de-char-fmt-btn-left,
            .e-de-char-fmt-btn-right {
              .e-de-prop-font-last-button,
              .e-de-prop-indent-last-button {
                border-left: 0;
              }
            }
        }
        .e-rtl {
            .e-de-char-fmt-btn-right button:not(:last-child),
            .e-de-char-fmt-btn-left button:not(:last-child),
            .e-de-insert-del-cell button:not(:last-child),
            .e-de-align-text button:not(:last-child) {
                border-right: 1.7px solid rgba($border-light);
                background: $de-prop-btn-bg-color;
            }
        }

        .e-de-char-fmt-btn-right.e-rtl button:not(:first-child),
        .e-de-char-fmt-btn-left.e-rtl button:not(:first-child),
        .e-de-insert-del-cell .e-rtl button:not(:first-child),
        .e-de-align-text .e-rtl button:not(:first-child)
        {
            border-right: 1px solid rgba($border-light) !important;
        }
        .e-de-grp-btn-ctnr {
            .e-de-ctnr-group-btn {
                .e-de-prop-font-button {
                    background: $de-prop-btn-bg-color;
                    border: 1px solid rgba($border-light) !important;
                }
            }
            .e-de-ctnr-group-btn-top {
                margin-bottom: -1px;
            }
        }
        .e-de-font-clr-picker > *,
        .de-split-button>div:first-child {
            margin-right: 8px;
        }
    }

    .e-de-pagenumber-input {
        background: $e-de-pagenumber-bg;
        @if $skin-name =='Material3'{
            border: none !important;
        } 
        @else {
            border: $de-panel-border-width solid $de-panel-border;
        }
        border-radius: $de-pagenumber-text-border-radius;
        color: $de-font-color;
        @if $skin-name=='bootstrap5' or  $skin-name=='tailwind' or $skin-name =='FluentUI' {
          font-family: inherit;
          font-size: $e-de-btn-font-size;
        }
        padding: $e-de-btn-padding;
        text-align: center;
        width: 22px;
        @if $skin-name =='fluent2' {
            height: $de-page-number-height;
        } 
        @if $skin-name == 'tailwind3' {
            width: 30px;
            height: $de-hlt-clr-height-bigger;
            border: $de-hlt-clr-border;
            border-radius: $de-hlt-clr-border-radius;
        }
    }
    .e-btn-pageweb-toggle {
        background-color: $de-pageweb-toggle-color;
        box-shadow: none;
        outline: $de-pageweb-toggle-outline;
        outline-offset: 0;
        @if $skin-name=='bootstrap4' {
            color: $de-prop-btn-bg-color;
        }
    }
    .e-btn-pageweb-spellcheck {
        border: $e-btn-pageweb-spellcheck-border;
        box-shadow: none;
        float: right;
        margin-left: $de-zoom-tlbr-margin-left;
    }
    .e-de-ctn-title {
        background-color: $de-title-bar-bg-clr;
        border-bottom: none !important;
        color: $de-title-bar-font-clr;
        @if $skin-name=='tailwind' or $skin-name == 'bootstrap5' or $skin-name =='FluentUI' or $skin-name =='Material3' {
            font-size: $e-de-btn-font-size !important;
            button {
                font-size: $e-de-btn-font-size !important;
                height: 36px !important;
                @if  $skin-name !='tailwind' {
                    margin: 0 !important;
                }
                .e-btn-icon {
                    font-size: $e-de-btn-font-icon-size !important;
                }
            }
        }
    }
    .e-de-tool-ctnr-properties-pane {
        display: flex;
        height: $de-tool-ctnr-editor-height;
        width: 100%;
    }
    .e-de-ctnr-properties-pane {
        display: flex;
        height: $de-ctnr-editor-height;
        width: 100%;
    }
    .e-de-ribbon-simplified-ctnr-properties-pane {
        height: $de-ribbon-simplified-ctnr-editor-height;
        width: 100%;
    }
    .e-de-ribbon-classic-ctnr-properties-pane {
        height: $de-ribbon-classic-editor-height;
        width: 100%;
    }
    .e-de-statusbar-separator {
        border-left: $e-de-statusbar-separator-border-left solid $e-de-statusbar-separator-color;
        height: $e-de-statusbar-separator-height;
        margin-left: $de-spellcheck-tlbr-margin-left;
        margin-right: $de-spellcheck-tlbr-margin-left;
        margin-top: $de-status-br-top;
    }
    .e-de-statusbar-spellcheck {
        border-radius: $de-statusbar-spellcheck-border-radius;
        font-weight: $de-statusbar-spellcheck-font-weight;

        @if $skin-name == 'Material3' {
            background: $de-ctnr-bg-clr;
        }
    }
    .e-de-ctn {
        background-color: $de-ctnr-bg-clr;
        border: $de-panel-border-width solid $de-panel-border;
        height: $de-ctnr-height;
        position: relative;
        width: 100%;
    }
    .e-de-ctnr-toolbar {
        display: flex;
        height: $de-ctnr-tlbr-height;
        width: 100%;
        @if $skin-name == 'Material3' {
            background: $de-toolbar-background-color;
        }
    }
    .e-de-tlbr-wrapper .e-de-toolbar.e-toolbar,
    .e-de-tlbr-wrapper .e-de-ctnr-properties-pane-btn {
        border: $e-de-tlbr-wrapper-border;
    }
    .e-de-pane {
        border-left: $de-panel-border-left solid $de-panel-border;
        @if $skin-name == 'Material3' {
            background: $de-pane-background-color;
        }
        @if $skin-name == 'tailwind3' {
            width: 300px;
            height: $e-de-pane-height;
        }
    }
    .e-de-pane-rtl {
        border-right: $de-panel-border-left solid $de-panel-border;
        @if $skin-name == 'Material3' {
            background: $de-pane-background-color;
        }
    }
    @if $skin-name=='material' {
        .e-de-pane>div button:not(.e-primary),
        .e-de-pane-rtl>div button:not(.e-primary) {
            background-color: $de-panel-btn-bg-clr;
        }
    }
    .e-de-tool-ctnr-properties-pane,
    .e-de-ctnr-properties-pane,
    .e-de-ribbon-simplified-ctnr-properties-pane,
    .e-de-ribbon-classic-ctnr-properties-pane {
        background: $de-ctnr-prop-bg-clr;
        border-bottom: $de-panel-border-bottom solid $de-panel-border;
        border-top: $de-panel-border-bottom solid $de-panel-border;
    }
    .e-de-ctnr-segment {
        margin-bottom: $de-ctnr-margin-bottom;
    }
    @if $skin-name=='tailwind' or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
        .e-de-insert-del-cell>div:last-child {
            margin-left: $de-pane-margin-right !important;
        }
        .e-de-ctnr-group-btn .e-btn .e-btn-icon:not(.e-caret) {
            font-size: $de-btn-font-size;
        }
        .e-de-property-div-padding .e-de-cellmargin-text {
            padding-bottom: 3px;
        }
        .e-de-cntr-pane-padding.e-de-prop-separator-line>div>div:first-child>div:first-child {
            margin-bottom: 0 !important;
        }
    }
    @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or $skin-name=='bootstrap5' or $skin-name =='FluentUI'  {
        .e-de-font-clr-picker .e-colorpicker-wrapper:first-child,
        .e-de-font-clr-picker>.e-split-btn-wrapper {
            margin-right: $de-pane-margin-right;
        }
        .e-de-font-clr-picker.e-rtl .e-colorpicker-wrapper:first-child,
        .e-de-font-clr-picker.e-rtl>.e-split-btn-wrapper {
            margin-left: $de-pane-margin-right;
            margin-right: 0;
        }
    }
        .e-colorpicker-wrapper.e-de-font-clr-picker,
        .e-split-btn-wrapper.e-de-prop-splitbutton,
        .e-split-btn-wrapper.e-de-btn-hghlclr
        {
            @if $skin-name == 'tailwind3'{
              margin-right: $de-prop-clr-wrap-mar-right;
            }
        } 
        // .e-bigger .e-colorpicker-wrapper,
        // .e-bigger .e-split-btn-wrapper.e-de-prop-splitbutton,
        // .e-bigger .e-split-btn-wrapper.e-de-btn-hghlclr
        // {
        //     @if $skin-name == 'tailwind3'{
        //       margin-right: $de-hdr-ftr-frst-div-mrgn-btm;
        //     }
        // } 
    @if $skin-name=='fluent2' {
        .e-de-font-clr-picker .e-colorpicker-wrapper:first-child,
        .e-de-font-clr-picker>.e-split-btn-wrapper {
            margin-right: $de-font-margin-right;
        }
        .e-de-font-clr-picker.e-rtl .e-colorpicker-wrapper:first-child,
        .e-de-font-clr-picker.e-rtl>.e-split-btn-wrapper {
            margin-left: $de-font-margin-right;
            margin-right: 0;
        }
    }
    @if $skin-name=='bootstrap-dark' {
        .e-de-font-clr-picker .e-colorpicker-wrapper:first-child,
        .e-de-font-clr-picker>.e-split-btn-wrapper {
            margin-right: $de-pane-margin-right;
        }
        .e-de-font-clr-picker.e-rtl .e-colorpicker-wrapper:first-child,
        .e-de-font-clr-picker.e-rtl>.e-split-btn-wrapper {
            margin-left: $de-pane-margin-right;
            margin-right: 0;
        }
    }
    .e-de-ctnr-segment>div:first-child:not(.e-rtl),
    .e-de-ctnr-segment-list>div:last-child:not(.e-rtl),
    .e-de-ctnr-segment>button:first-child:not(.e-rtl) {
        margin-right: $de-pane-margin-right;
        @if $skin-name == 'tailwind3' {
            margin-right: $de-prop-clr-wrap-mar-right;
        }
    }
    .e-de-ctnr-segment.e-de-ctnr-segment-rtl>div:first-child,
    .e-de-ctnr-segment-list.e-de-ctnr-segment-list-rtl>div:last-child,
    .e-de-ctnr-segment.e-de-ctnr-segment-rtl>button:first-child {
        margin-left: $de-pane-margin-right;
        margin-right: $de-pane-margin-rgt;
    }
    .e-de-tlbr-wrapper {
        background-color: $de-prpty-btn-bg-clr;
        height: $de-ctnr-tlbr-height;
        width: $de-ctnr-tlbr-width;
        @if $skin-name =='tailwind3' {
            height: $de-tool-item-height;
        }
    }
    // .e-bigger .e-de-tlbr-wrapper{
    //     @if $skin-name =='tailwind3' {
    //         height: $de-shw-hid-height-big;
    //     }
    // }
    .e-de-cntr-pane-padding .e-de-prop-separator-line .e-de-ctnr-prop-label {
        @if $skin-name == 'tailwind3' {
            font-size: $e-de-btn-font-icon-size;
            color: $e-de-bzr-button-font-color;
        }
    }
    .e-de-cntr-pane-padding .e-de-ctnr-prop-label{
        @if $skin-name == 'tailwind3' {
            font-size: $de-prop-sub-fnt;
            color: $de-panel-sub-label-color;
        }
    }
    .e-de-ctnr-prop-label {
        @if $skin-name=='fluent2' {
            color: $de-sub-header-color;
        }
        @if $skin-name == 'tailwind3' {
            color: $e-de-bzr-button-font-color;
        }
        @else {
            color: $de-panel-header-color;
        }
        display: inline-block;
        font-size: $de-panel-header-size;
        font-weight: $de-panel-header-font-weight;
        @if $skin-name=='Material3' {
            letter-spacing: 0.3px;
        }
        @else {
            letter-spacing: $de-panel-header-letter-spacing;
        }
        @if $skin-name=='tailwind' {
            line-height: 1.5;
        }
        margin-bottom: $de-ctnr-margin-bottom;
        opacity: 0.87;
    }
    // .e-bigger .e-de-ctnr-prop-label {
    //     @if $skin-name == 'tailwind3' {
    //         color: $e-de-bzr-button-font-color;
    //     }
    // }
    .e-de-table-prop-label {
        margin-left: $de-table-prop-label-margin-left;
    }
    .e-de-table-prop-label.e-de-rtl {
        margin-left: $de-table-prop-label-margin-left-rtl;
        margin-right: $de-table-prop-label-margin-left;
    }
    .e-de-toolbar.e-toolbar {
        border-radius: $de-toolbar-border-radius;
        @if $skin-name =='FluentUI' {
            box-shadow: none;
        }
    }
    .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-first {
        margin-left: $de-tlbr-margin-left;
        margin-right: $de-tlbr-margin-right;
    }
    .e-de-ctnr-toolbar.e-de-ctnr-rtl .e-toolbar-item.e-de-toolbar-btn-first {
        margin-left: $de-tlbr-margin-right;
        margin-right: $de-tlbr-margin-left;
    }
    .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-last {
        margin-left: $de-tlbr-margin-right;
        margin-right: $de-tlbr-margin-left;
    }
    .e-de-ctnr-toolbar.e-de-ctnr-rtl .e-toolbar-item.e-de-toolbar-btn-last {
        margin-left: $de-tlbr-margin-left;
        margin-right: $de-tlbr-margin-right;
    }
    .e-de-toolbar.e-toolbar .e-toolbar-items {
        height: $de-ctnr-tlbr-height;
        .e-toolbar-item.e-de-separator {
            @if $skin-name=='fabric' {
                border: 1px solid $de-ctnr-separator-clr;
                border-width: 0 1px 0 0;
            }
            height: $e-de-separator-height;
            margin: $de-ctrnr-tblr-separator-margin;
        }
        .e-toolbar-item.e-de-toolbar-btn-start {
            margin-left: $de-tlbr-margin-first !important;
            margin-right: $de-tlbr-margin-right;
        }
        .e-toolbar-item.e-de-toolbar-btn-middle {
            margin-left: $de-tlbr-margin-right;
            margin-right: $de-tlbr-margin-right;
        }
        .e-toolbar-item.e-de-toolbar-btn-end {
            margin-left: $de-tlbr-margin-right;
            margin-right: $de-tlbr-margin-first;
        }
        .e-toolbar-item.e-de-image-focus :focus {
            background-color: $de-toggle-bg-color;
        }
    }
    @if $skin-name=='bootstrap' {
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
            flex-direction: column;
            height: $de-tlbr-btn-height;
            padding: 0 1px;
            padding-bottom: 5px;
            #{if(&, '&', '*')}:focus {
                padding: 0;
                padding-bottom: 5px;
            }
            #{if(&, '&', '*')}:active {
                padding: 0;
                padding-bottom: 5px;
            }
            #{if(&, '&', '*')}:hover {
                padding: 0;
                padding-bottom: 5px;
            }
        }
    }
    @if $skin-name !='bootstrap' {
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
            flex-direction: column;
            height: $de-tlbr-btn-height;
            padding: $de-tlbr-btn-padding;
            @if $skin-name =='fluent2' {
                padding-bottom: $de-toolbar-padding-bottom-size;
            }
            @else{
                padding-bottom: $de-toolbar-padding-bottom;
            }

            #{if(&, '&', '*')}:focus {
                padding: $de-toolbar-padding;
                padding-bottom: $de-toolbar-padding-bottom;
            }
            #{if(&, '&', '*')}:active {
                padding: $de-toolbar-padding;
                padding-bottom: $de-toolbar-padding-bottom;
            }
            #{if(&, '&', '*')}:hover {
                padding: $de-toolbar-padding;
                padding-bottom: $de-toolbar-padding-bottom;
            }
        }
    }
    @if $skin-name=='bootstrap4' {
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
            flex-direction: column;
            height: $de-tlbr-btn-height;
            padding: 0 1px;
            padding-bottom: 5px;
            #{if(&, '&', '*')}:focus {
                padding: 0;
                padding-bottom: 5px;
            }
            #{if(&, '&', '*')}:active {
                padding: 0;
                padding-bottom: 5px;
            }
            #{if(&, '&', '*')}:hover {
                padding: 0;
                padding-bottom: 5px;
            }
        }
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-btn-icon {
            color: $de-toolbar-icon-clr;
            font-size: 16px;
        }
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
        .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:disabled {
            .e-btn-icon {
                color: $de-toggle-btn-color;
            }
        }
    }
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
        padding: $de-toolbar-padding;
    }
    .e-de-overlay {
        height: $e-de-overlay-height;
        opacity: 0.5;
        pointer-events: none;
        touch-action: none;
        width: 100%;
    }
    .e-de-hide-track-btn {
        display: none;
    }
    @if $skin-name == 'bootstrap5.3' {
        .e-de-status-bar {
            .e-btn {
                .e-btn-icon {
                    color: var(--color-sf-icon-color);
                }
                &:hover {
                    .e-btn-icon {
                        color: var(--color-sf-secondary-text-color-pressed);
                    }
                }
            }
        }
    }
    @if $skin-name=='bootstrap4' or $skin-name=='bootstrap5' or $skin-name=='bootstrap5.3' {
        .e-de-font-clr-picker .e-colorpicker-container .e-split-btn-wrapper .e-btn.e-icon-btn,
        .e-de-font-clr-picker .e-colorpicker-container .e-split-btn-wrapper .e-btn.e-icon-btn,
        .e-de-font-clr-picker .e-colorpicker-wrapper .e-btn.e-icon-btn,
        .e-de-font-clr-picker .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
        .e-de-font-clr-picker .e-colorpicker-wrapper .e-btn.e-icon-btn.e-rtl {
            padding: 0;
        }

        .e-de-prop-font-colorpicker .e-btn.e-icon-btn,
        .e-de-prop-font-colorpicker .e-split-btn-wrapper .e-split-colorpicker.e-split-btn {
            padding: 4px 8px !important;
        }

        .e-de-ctnr-style-div {
            width: $de-text-pane-style-width;
            @if $skin-name == 'tailwind3' {
                width: 226px;
                height: $de-prop-clr-wrap-height;
            }
        }
        // .e-bigger .e-de-ctnr-style-div {
        //     @if $skin-name == 'tailwind3' {
        //         width: 298px;
        //         height: $de-prop-clr-wrap-height;
        //     }
        // }
        .e-btn-toggle {
            .e-tbar-btn-text {
                color: $de-toggle-btn-color !important;
            }
            .e-btn-icon {
                color: $de-toggle-btn-color !important;
            }
        }

        .e-de-ctnr-list,
        .e-de-list-header-presetmenu {
            color: $de-prop-btn-icon-clr;
        }
        .e-de-ctnr-group-btn {
            .e-btn {
                background: $de-prop-btn-bg-color;
                border-color: $de-prop-btn-border-color;
                #{if(&, '&', '*')}:focus {
                    background-color: $de-toggle-border-hover-color;
                    @if $skin-name !='bootstrap4' and $skin-name!='bootstrap5' and $skin-name!='bootstrap5.3' {
                        border: 1px;
                    }
                    border-color: $de-toggle-border-color;
                    box-shadow: 0 0 0 0 $de-toggle-bg-color;
                    outline-color: $de-toggle-bg-color;
                }
                #{if(&, '&', '*')}:active,
                .e-btn-toggle {
                    background-color: $de-toggle-border-hover-color;
                    @if $skin-name !='bootstrap4' and $skin-name!='bootstrap5' and $skin-name!='bootstrap5.3' {
                        border: 1px;
                    }
                    border-color: $de-toggle-border-color;
                }
                #{if(&, '&', '*')}:hover {
                    @if $skin-name !='tailwind' {
                        background-color: $de-toggle-hover-color;
                        @if $skin-name !='bootstrap4' and $skin-name!='bootstrap5' and $skin-name!='bootstrap5.3' {
                            border: 1px;
                        }
                        @if $skin-name!='bootstrap5' and $skin-name!='bootstrap5.3' {
                            border-color: $de-toggle-border-hover-color;
                        }
                    }
                }
            }
            @if $skin-name=='bootstrap4' {
                .e-split-btn-wrapper.e-rtl .e-split-btn {
                    border-color: $de-prop-btn-border-color;
                }
            }
        }
        .e-de-ctnr-group-btn .e-btn:disabled {
            background-color: $de-toggle-bg-color;
            border-color: $de-toggle-bg-color;
            opacity: 65%;
        }
        .e-de-ctnr-group-btn .e-btn:hover,
        .e-de-ctnr-group-btn .e-btn:focus,
        .e-de-ctnr-group-btn .e-btn:active,
        .e-de-ctnr-group-btn .e-btn:disabled {
            .e-btn-icon {
                @if $skin-name == 'bootstrap5' or $skin-name=='bootstrap5.3' {
                    color: $de-white-color;
                }
                @else {
                  color: $de-toggle-btn-color;
                }
            }
        }
        .e-de-ctnr-group-btn .e-btn-icon {
            color: $de-prop-btn-icon-clr;
            font-size: $de-btn-font-size;
        }
        .e-btn-toggle .e-btn-icon {
            color: $de-toggle-btn-color;
        }
        .e-de-prop-font-colorpicker .e-split-btn-wrapper .e-btn,
        .e-de-prop-font-colorpicker .e-split-btn-wrapper .e-btn-icon,
        .e-de-border-size-button,
        .e-de-border-size-button .e-btn-icon {
            background-color: $de-prop-btn-bg-color;
            border-color: $de-prop-btn-border-color;
            color: $de-prop-btn-icon-clr;
        }
        .e-de-border-size-button:focus,
        .e-de-border-size-button:hover,
        .e-de-prop-font-colorpicker .e-split-btn-wrapper .e-btn:hover,
        .e-de-prop-font-colorpicker .e-split-btn-wrapper .e-btn:focus {
            background-color: $de-toggle-bg-color;
            box-shadow: $de-toggle-btn-border;
            .e-btn-icon {
                background-color: $de-toggle-bg-color;
                box-shadow: $de-toggle-btn-border;
                color: $de-toggle-btn-color;
            }
        }
        .e-de-border-size-button .e-btn-icon:focus,
        .e-de-border-size-button .e-btn-icon:hover {
            background-color: $de-toggle-bg-color;
            box-shadow: $de-toggle-btn-border;
            color: $de-toggle-btn-color;
        }

        .e-de-pagenumber-text {
            border: none !important;
        }

    }
    .e-de-ctnr-properties-pane-btn {
        @if $skin-name == 'Material3' {
            width: 78px;
        }
        @else {
            width: 75px;
        }
        @if $skin-name == 'tailwind3' {
            width: $de-shw-hid-height;
            height: $de-shw-hid-height;
        }
        @if $skin-name=='fluent2' {
            background-color: $de-ctnr-prop-bg-clr;
        }
    }
    // .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
    //     @if $skin-name=='tailwind3' {
    //         width: $de-shw-hid-height;
    //         height: $de-shw-hid-height-big;
    //     }
    // }
    .e-de-pane-enable-clr.e-de-ctnr-properties-pane-btn {
        .e-btn {
            color: $de-pane-color-border;
            @if $skin-name=='fluent2' {
                background-color: $de-ctnr-prop-bg-clr;
            }    
        }
    }
    .e-de-pane-disable-clr.e-de-ctnr-properties-pane-btn {
        .e-btn {
            color: $de-font-color;
            @if $skin-name=='fluent2' {
                background-color: $de-ctnr-prop-bg-clr;
            }
        }
    }
    .e-de-ctnr-properties-pane-btn {
        .e-btn {
            background: $de-prpty-btn-bg-clr;
            border-radius: $de-prpty-btn-border-radius;
            box-shadow: none;
            color: $de-pane-color-border;
            min-height: $e-de-ctnr-properties-pane-btn-min-height;
            min-width: 100%;
            #{if(&, '&', '*')}:focus {
                box-shadow: none;
            }
            #{if(&, '&', '*')}:active {
                box-shadow: none;
            }
            #{if(&, '&', '*')}:hover {
                box-shadow: none;
            }
            @if $skin-name=='fluent2' {
                background-color: $de-ctnr-prop-bg-clr;
            }
        }
    }
    .e-de-showhide-btn {
        border: $e-de-showhide-btn-border;
        height: $de-ctnr-tlbr-height;
    }
    .e-de-showhide-btn-rtl {
        border: $e-de-showhide-btn-border;
        height: $de-ctnr-tlbr-height;
    }
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
        padding: $de-ctrnr-tblr-item-padding;
    }
    .e-de-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
        @if $skin-name =='Material3' {
            line-height: 0.8;
        }
        @if  $skin-name == 'fluent2' {
            padding-top: 5px;
        }
        @if  $skin-name == 'tailwind3' {
            line-height: $de-prop-clr-wrap-mar-right;
        }
    }
    // .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text{
    //     @if  $skin-name == 'tailwind3' {
    //     font-size: $e-de-btn-font-icon-size;
    //     line-height: 30px;
    //     }
    // }  
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
        display: table;
        font-size: $de-toolbar-font-size;
        margin: $de-ctrnr-tblr-item-margin;
        padding: $de-toolbar-padding;
        white-space: normal;
    }
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
        padding: $de-toolbar-padding !important;
        min-height: $e-de-toolbar-min-height;
    }
    .e-de-hdr-ftr-frst-div {
        margin-bottom: $de-hdr-ftr-frst-div-mrgn-btm;
    }
    .e-de-hdr-ftr-top-div {
        margin-bottom: $de-hdr-ftr-top-div-mrgn-btm;
    }
    .e-de-cntr-pane-padding {
        padding: $de-ctnr-padding;
    }
    .e-de-prop-pane {
        height: $e-de-prop-pane-height;
        min-height: $e-de-prop-pane-min-height;
        overflow: auto;
        width: $de-text-pane-width;
    }
    .e-de-review-pane {
        background: $de-ctnr-prop-bg-clr;
        border-left: $de-op-border-left solid $de-op-border-clr;
        height: $e-de-prop-pane-height;
        min-height: $e-de-prop-pane-min-height;
        overflow: auto;
        width: $e-de-review-pane-width;
        @if $skin-name == 'FluentUI' {
            .e-toolbar {
              box-shadow: none;
            }
        }
    }
    .e-de-property-div-padding {
        @if $skin-name=='Material3' {
            border-bottom: 1px solid $de-pane-separator;
        }
        @else {
            border-bottom: $de-pane-separator-border-bottom solid $de-pane-separator;
        }
        padding: $de-prop-div-padding-top;
    }
    .e-de-ctnr-dropdown-ftr {
        border-top: $de-ctnr-dropdown-ftr-border-top solid $de-pane-separator;
        color: $de-panel-header-color;
        cursor: pointer;
        display: block;
        font-size: $de-pane-separator-font-size;
        line-height: $de-pane-separator-line-height;
        text-indent: 1.2em;
    }
    .e-de-char-fmt-btn-left>button,
    .e-de-insert-del-cell button {
        width: $de-left-btn-width;
    }
    .e-de-char-fmt-btn-right>button {
        width: $de-right-btn-width;
    }
    .e-de-panel-left-width {
        width: $de-left-panel-width;
        @if $skin-name == 'tailwind3' {
            width: 159px;
            height: $de-prop-clr-wrap-height;
            .e-de-char-fmt-btn-right .e-de-ctnr-group-btn>button {
                width: 62px !important;
            }
        }
    }
    // .e-bigger .e-de-panel-left-width {
    //     @if $skin-name == 'tailwind3' {
    //         width: 212px;
    //         height: $de-prop-clr-wrap-height-big;
    //     }
    // }
    .e-de-panel-right-width {
        width: $de-right-panel-width;
        @if $skin-name == 'tailwind3' {
            width: $de-prop-font-btn-width;
            height: $de-prop-clr-wrap-height;
        }
    }
    // .e-bigger .e-de-panel-right-width {
    //     @if $skin-name == 'tailwind3' {
    //         width: 74px;
    //         height: $de-prop-clr-wrap-height-big;
    //     }
    // }
    .e-de-cntr-highlight-pane {
        border: $de-panel-border-width solid $de-panel-border;
    }

    .e-de-btn-hghlclr>button:first-child {
        padding: $de-btn-hghlclr-padding !important;
    }
    .e-de-ctnr-hglt-color {
        font-size: $de-ctnr-hglt-color-font-size;
        font-weight: $de-ctnr-hglt-color-font-weight;
        height: $de-hlt-clr-height !important;
        width: $de-hlt-clr-height !important;
        @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or  $skin-name=='bootstrap5' or $skin-name=='tailwind' {
            border-radius: 4px;
        }
    }

    @if $skin-name=='tailwind3' {
        .e-de-font-clr-picker {
            .e-split-btn-wrapper {
                .e-split-btn {
                    width: $de-clr-pckr-split-button;
                 }
            }
        }
    }

    .e-de-font-clr-picker>div div button,
    .e-de-font-clr-picker>div button,
    .e-de-font-clr-picker>button {
        width: $de-clr-pckr-width;
    }
    // .e-bigger .e-de-font-clr-picker>div button{
    //     @if $skin-name == 'tailwind3' {
    //         width: $de-prop-clr-wrap-height-big;
    //     }
    // }

    .e-de-floating-menu.e-de-bullets-menu .e-de-floating-menuitem-md {
        height: $e-de-floating-menu-height;
        padding: $de-floating-menu-menuitem-padding !important;
        width: 60px;
    }
    .e-de-floating-menu.e-de-bullets-menu .e-de-floating-menuitem-md:hover {
        border: $de-list-hover-border-width solid $de-list-hover-bg;
        padding: $de-list-hover-padding !important;
    }
    .e-de-floating-menu.e-de-bullets-menu .e-de-floating-bullet-menuitem-md {
        height: $e-de-floating-bullet-menuitem-md-height;
        padding: $de-floating-menu-menuitem-padding !important;
        width: 38px;
    }
    .e-de-floating-menu.e-de-bullets-menu .e-de-floating-bullet-menuitem-md:hover {
        border: $de-list-hover-border-width solid $de-list-hover-bg;
        padding: $de-list-hover-padding !important;
    }
    .e-de-list-header-presetmenu {
        cursor: pointer;
        font-size: $de-list-header-presetmenu-font-size;
        line-height: $de-list-header-presetmenu-line-height;
        overflow: hidden;
        text-align: left;
        min-width: 50px;
        white-space: nowrap;
        width: 100%;
        @if $skin-name=='tailwind' {
            color: $icon-color;
        }
    }
    .e-de-bullet-list-header-presetmenu {
        cursor: pointer;
        font-size: $de-bullet-icon-font-sze;
        left: -11px;
        line-height: $de-bullet-icon-line-height;
        min-width: 50px;
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        width: 100%;
    }
    .e-rtl {
        .e-de-bullet-list-header-presetmenu {
            cursor: pointer;
            font-size: $de-bullet-icon-font-sze;
            left: 10px;
            line-height: $de-bullet-icon-line-height;
            min-width: 50px;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            width: 100%;
        }
    }
    .e-de-bullet {
        font-size: $de-bullet-font-size;
    }
    .e-de-list-header-presetmenu .e-de-list-line {
        border-bottom: $de-prop-btn-icon-border-bottom solid $de-prop-btn-icon-clr !important;
        margin-left: $de-prop-btn-icon-margin-left;
        width: 100%;
    }
    .e-de-toc-optionsdiv {
        margin-bottom: $de-toc-optionsdiv-margin-bottom;
        margin-left: $de-toc-optionsdiv-margin-left;
        margin-top: $de-toc-optionsdiv-margin-top;
    }
    .e-de-toc-optionsdiv.e-de-rtl {
        margin-right: $de-toc-optionsdiv-margin-left;
        margin-left: $de-toc-optionsdiv-margin-left-rtl;
    }
    .e-de-list-header-presetmenu div span {
        display: inline-block;
        vertical-align: middle;
    }
    .e-de-floating-menu .e-de-floating-menuitem,
    .e-de-floating-menu .e-de-menuitem-none {
        cursor: pointer;
        height: $e-de-menuitem-none-height;
        padding: $de-floating-menuitem-padding !important;
        margin: $de-floating-menuitem-margin-top $de-floating-menuitem-margin-right $de-floating-menuitem-margin-bottom $de-floating-menuitem-margin-left !important;
        width: 70px;
    }
    .e-de-list-thumbnail .e-de-list-items {
        float: left;
    }
    .e-de-list-thumbnail .e-de-list-items {
        border: $de-list-thmbnail-border-width solid $de-list-thmbnail-border-clr;
        @if $skin-name =='Material3' {
            border-radius: 4px;
        }
        clear: initial;
        display: inline-block;
        height: auto;
        margin: $de-list-thmbnail-margin;
        padding: $de-list-thmbnail-padding;
        text-align: center;
        width: auto;
    }
    .e-de-list-items {
        cursor: pointer;
        background: $de-ctnr-bg-clr;
        box-sizing: border-box;
        list-style: none;
        padding: $de-ctnr-padding-top $de-ctnr-padding-right $de-ctnr-padding-bottom $de-ctnr-padding-left;
        position: relative;
    }
    .e-de-list-item-size {
        font-size: $de-list-item-font-size;
    }
    .e-de-floating-menuitem.e-de-floating-menuitem-md.e-de-list-items.e-de-list-item-size.de-list-item-selected,
    .e-de-floating-menuitem.e-de-floating-bullet-menuitem-md.e-de-list-items.e-de-list-item-size.de-list-item-selected {
        border: $de-title-bar-border-width solid $de-title-bar-bg-clr;
        padding: $de-title-bar-padding !important;
    }
    .e-de-floating-menu {
        padding: $de-floating-menu-padding-top $de-floating-menu-padding-right $de-floating-menu-padding-bottom $de-floating-menu-padding-left !important;
    }
    @if $skin-name !='tailwind' {
        .e-de-list-container {
            @if $skin-name !='Material3' {
                border: $de-list-container-border-width solid #ccc;
                border-radius: $de-list-container-border-radius;
                box-shadow: 0 0 14px rgba(0, 0, 0, 0.2);
            }
            background: $de-ctnr-bg-clr;
            box-sizing: border-box;
            display: inline-block;
            line-height: normal;
            margin: $de-list-container-margin;
            outline: 0;
			background: $de-ctnr-bg-clr;
            @if $skin-name =='Material3' {
                padding: 10px 0;
            }
            @else {
                padding: $de-list-container-padding-top $de-list-container-padding-right;
            }
            position: absolute;
            width: auto;
            z-index: 10020;
        }
    }
    .e-de-ctnr-list {
        font-size: $de-bullet-icon-font-size;
        @if ( $skin-name !='bootstrap4' and $skin-name !='tailwind') {
            vertical-align: top;
        }
    }
    .e-de-image-property {
        padding-left: $de-image-property-padding-left;
    }
    .e-de-img-prty-span {
        color: $de-font-color;
        left: $de-img-span-left;
        position: absolute;
        top: $de-img-span-top;
    }
    .e-btn-toggle {
        @if $skin-name=='fluent2' {
            background-color: var(--color-sf-content-bg-color-pressed) !important;
        }
        @else{
            background-color: $de-toggle-bg-color !important;
        }
        @if $skin-name =='fluent2' {
            color: var(--color-sf-toolbar-icon-color) !important;
        }
        @if $skin-name=='highcontrast' {
            color: $de-title-bar-font-clr !important;
        }
        @if $skin-name=='fabric' {
            border-color: $de-toggle-bg-color !important;
        }
        outline: $de-toggle-btn-outline;
        outline-offset: 0;
        box-shadow: $de-toggle-btn-border !important;
        #{if(&, '&', '*')}:hover {
            @if $skin-name=='fluent2' {
                background-color: var(--color-sf-content-bg-color-pressed) !important;
            }
            @else {
                background-color: $de-toggle-bg-color !important;
            }
            @if $skin-name=='fabric' {
                border-color: $de-toggle-bg-color !important;
            }
            outline: $de-toggle-btn-outline;
            outline-offset: 0;
            box-shadow: $de-toggle-btn-border !important;
        }
    }
    @if $skin-name=='highcontrast' {
        .e-btn-toggle .e-tbar-btn-text {
            color: $de-title-bar-font-clr !important;
        }
        .e-btn-toggle>span {
            color: $de-title-bar-font-clr !important;
        }
    }
    @if $skin-name=='fluent2' {
        .e-btn-toggle .e-tbar-btn-text {
            color: var(--color-sf-toolbar-icon-color) !important;
        }
        .e-btn-toggle>span {
            color: var(--color-sf-toolbar-icon-color) !important;
        }
    }
    @if $skin-name=='bootstrap5.3' {
        .e-btn-toggle .e-tbar-btn-text {
            color: $de-toggle-btn-color !important;
        }
        .e-btn-toggle>span {
            color: $de-toggle-btn-color !important;
        }
    }
    @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
        .e-de-ctnr-group-btn-top>button:first-child {
            border-radius: 0;
            border-top-left-radius: 4px;
        }
        .e-de-ctnr-group-btn-top.e-de-rtl>button:first-child {
            border-top-left-radius: 0;
            border-top-right-radius: 4px;
        }
        .e-de-ctnr-group-btn-top>button:last-child {
            border-radius: 0;
            border-top-right-radius: 4px;
        }
        .e-de-ctnr-group-btn-top.e-de-rtl>button:last-child {
            border-top-left-radius: 4px;
            border-top-right-radius: 0;
        }
        .e-de-ctnr-group-btn-middle>button {
            border-radius: 0;
            border-top: 0;
            border-bottom: 0;
        }
        .e-de-ctnr-group-btn-bottom>button:first-child {
            border-radius: 0;
            border-bottom-left-radius: 4px;
        }
        .e-de-ctnr-group-btn-bottom.e-de-rtl>button:first-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 4px;
        }
        .e-de-ctnr-group-btn-bottom>button:last-child {
            border-radius: 0;
            border-bottom-right-radius: 4px;
        }
        .e-de-ctnr-group-btn-bottom.e-de-rtl>button:last-child {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 4px;
        }
    }
    .e-de-toc-template1 {
        @if $skin-name != 'tailwind' {
            background: $de-ctnr-bg-clr;
        }
        border: $de-panel-border-width solid $de-panel-border;
        color: $de-panel-header-color;
        @if $skin-name=='Material3' {
            height: 130px;
            width: 95px;
            margin-left: 80px;
        }
        @else {
            height: $e-de-toc-template1-height;
            width: 94px;
            margin-left: $de-panel-header-margin-left;
        }

    }
    .e-de-toc-template1.e-de-rtl {
        margin-left: $de-toc-template1-margin-left;
        margin-right: $de-toc-template1-margin-right;
    }

    .e-de-toc-template1-content1 {
        font-size: $de-toc-template1-content1-font-size;
        @if $skin-name=='Material3' {
            height: 16px;
            margin-left: 8px;
            margin-top: 6px;
        }
        @else {
            height: $e-de-toc-template1-content1-height;
            margin-left: $de-toc-template1-content1-margin-left;
            margin-top: $de-toc-template1-content1-margin-top;
        }
        width: $de-toc-template-content1;
    }
    .e-de-toc-template1-content2 {
        font-size: $de-toc-template1-content2-font-size;
        height: $e-de-toc-template1-content2-height;
        @if $skin-name=='Material3' {
            margin-left: 23px;
            margin-top: 6px;
        }
        @else {
            margin-left: $de-toc-template1-content2-margin-left;
            margin-top: $de-toc-template1-content2-margin-top;
        }
        width: $de-toc-template-content2;
    }
    .e-de-toc-template1-content3 {
        font-size: $de-toc-template1-content3-font-size;
        height: $e-de-toc-template1-content3-height;
        @if $skin-name=='Material3' {
            margin-left: 30px;
            margin-top: 6px;
        }
        @else {
            margin-left: $de-toc-template1-content3-margin-left;
            margin-top: $de-toc-template1-content3-margin-top;
        }
        width: $de-toc-template-content3;
    }
    .e-de-prop-sub-label {
        @if $skin-name=='fluent2' {
            color: $de-panel-header-color;
        }
        @else {
            color: $de-panel-sub-label-color;
        }
        @if $skin-name=='tailwind' {
            font-size: 12px;
            line-height: 18px;
        }
        @else if $skin-name=='Material3' {
            font-size: $de-toolbar-font-size;
        }
        @else {
            font-size: $de-prop-sub-label-font-size;
        }
        margin-bottom: $de-prop-sub-label-mrgn-btm;
        font-weight: $de-header-font-weight;
        @if $skin-name == 'tailwind3' {
            font-weight: $de-fnt-wgt-sub-lvl;
            font-size: $de-toc-lvl-font ;
            color: $de-font-color;
        }
    }
    .e-de-toc-checkbox1 {
        height: $de-prop-pane-margin;
        margin-top: $de-prop-pane-margin;
    }
    .e-de-toc-checkbox2 {
        height: $de-prop-pane-margin;
        margin-top: $de-prop-pane-margin;
    }
    .e-de-toc-checkbox3 {
        height: $de-prop-pane-margin;
        margin-top: $de-prop-pane-margin;
    }
    .e-de-status-bar {
        @if $skin-name !='fluent2' {
            background: $de-ctnr-bg-clr;
        }
        display: flex;
        @if $skin-name !='Material3' {
            padding-top: $e-de-status-bar-padding-top;
        }
        width: 100%;
        // @if $skin-name == 'tailwind3' {
        //     width: 1355px;
        //     height: 48px;
        //     background-color: $de-ruler-background-color;
        // }

    }
    // .e-bigger .e-de-status-bar {
    //     @if $skin-name == 'tailwind3' {
    //         width: 1491px;
    //         height: $de-prop-clr-wrap-width;
    //         background-color: $de-ruler-background-color;
    //     }
    // }
    .e-de-ctnr-pg-no {
        color: $de-font-color;
        display: inline-flex;
        font-size: $de-ctnr-pg-no-spellout-fnt-size;
        height: $e-de-ctnr-pg-no-height;
        padding-top: $e-de-ctnr-pg-no-spellout-padd-top;

        span {
            border: $de-ctnr-pg-no-border solid transparent;
        }
    }
    .e-de-ctnr-pg-no-spellout {
        color: $de-font-color;
        display: inline-flex;
        font-size: $de-ctnr-pg-no-spellout-fnt-size;
        height: $e-de-ctnr-pg-no-spellout-height;
        padding-top: $e-de-ctnr-pg-no-spellout-padd-top;
        width: $de-page-no-width-spellout;

        span {
            border: $de-ctnr-pg-no-border solid transparent;
        }
    }
    .e-de-statusbar-zoom-spell {
        @if $skin-name =='Material3' {
            background: $de-ctnr-bg-clr;
        } 
        @else {
            background-color: $de-ctnr-bg-clr;
        }
        border: $de-statusbar-zoom-spell-border;
        color: $de-font-color;
        float: right;
        height: $e-de-statusbar-zoom-spell-height;
        margin-left: $de-zoom-tlbr-margin-left;
    }
    .e-de-btn-cancel {
        margin-left: $de-btn-cancel-margin-left;
    }
    .e-de-btn-cancel-rtl {
        margin-left: $de-btn-cancel-rtl-margin-lft;
        margin-right: $de-btn-cancel-margin-left;
    }
    .e-de-prop-header-label {
        @if $skin-name=='fluent2' {
            color: $de-sub-header-color;
            font-size: 16px;
        }
        @else {
            color: $de-panel-header-color;
        }

        display: inline-block;
        @if $skin-name =='tailwind' or $skin-name =='bootstrap5' or $skin-name =='FluentUI' {
            font-size: $de-panel-header-size;
        }
        @else if $skin-name == 'Material3' {
            font-size: $de-toolbar-font-size;
        }
        @else {
            font-size: $de-prop-header-label-font-size;
        }
        font-weight: bold;
        letter-spacing: $de-prop-header-label-letter-spacing;
        opacity: 0.87;
    }
    .e-de-prop-separator-line {
        border-bottom: $de-header-line-color;
    }
    .e-de-status-bar>div label {
        font-weight: $de-status-br-lbl-fnt-weight;
    }
    .e-de-stylediv {
        padding-left: $de-prop-style-padding;
    }
    .e-de-stylediv-rtl {
        padding-left: $de-stylediv-rtl-padding-left;
        padding-right: $de-prop-style-padding;
    }
    .e-de-border-size-button {
        height: $de-border-size-button-height;
        margin-top: $de-table-prop-border-margin;
        width: $de-border-size-button-width;
    }

    .e-de-color-picker {
        height: $de-border-size-button-height;
        width: $de-border-size-button-width;
    }
    .e-de-cell-text-box {
        margin-right: $de-prop-style-padding;
    }
    .e-de-pane-rtl {
        .e-de-cell-text-box {
            margin-left: $de-prop-style-padding;
            margin-right: $de-prop-style-margin-right;
        }
    }
    .e-de-prop-fill-label {
        @if $skin-name =='Material3' {
            margin-right: 16px;
        }
        @else {
            margin-right: $e-de-prop-fill-label-margin-right;
        }
    }
    .e-de-prop-fill-label.e-de-rtl {
        @if $skin-name =='Material3' {
            margin-left: 16px;
        }
        @else {
            margin-left: $de-prop-fill-label-margin-right;
        }
        margin-right: $de-prop-fill-label-margin-right-rtl;
    }

    .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
        height: $e-de-ctnr-group-btn-height !important;
    }

    .e-de-grp-btn-ctnr .e-de-ctnr-group-btn>button {
        @if $skin-name =='bootstrap5' { 
          width: 39px;
          height: 38px;
        }
        @else if $skin-name == 'Material3' {
          width: 36px;
          height: 36px;
        }
        @else {
          width: 38px;
          height: $e-de-grp-ctnr;
        }   
    }
    .e-de-border-clr-picker .e-split-btn-wrapper>button:first-child {
        @if $skin-name=='Material3' {
            width: 64px;
        }
        @else {
            width: 70px;
        }
    }
    .e-documenteditor-optionspane {
        @if $skin-name=='Material3' {
            background: $de-background-color;
        }
        // @if $skin-name == 'tailwind3' {
        //     height: 501px;
        // }
    }
    @if $skin-name=='tailwind' {
        .e-de-prop-fill-label {
            font-size: 16px;
            line-height: 24px;
            color: $de-panel-header-color;
        }
        .e-documenteditorcontainer {
            .e-tab .e-content .e-item {
                padding: 0;
            }
        }
    }
    .e-de-hRuler {
        background-color: $de-ruler-background-color;
        @if $skin-name =='Material3' {
            background: $de-ruler-background-color;
        }
        border-bottom: $de-hRuler-border-bottom solid $de-panel-border;
    }
    .e-de-vRuler {
        background-color: $de-ruler-background-color;
        @if $skin-name =='Material3' {
            background: $de-ruler-background-color;
        }
        border-right: $de-vRuler-border-right solid $de-panel-border;
    }
    .e-de-ruler-margin {
        background-color: $de-ruler-margin-color;
        @if $skin-name =='Material3' {
            background: $de-ruler-margin-color;
        }
    }
    .e-de-ruler-tick {
        stroke: $de-ruler-tick-stroke;
    }
    .e-de-ruler-tick-label {
        fill: $de-ruler-label-fill
    }
    .e-de-ruler-markIndicator {
        background-color: $de-ruler-margin-color;
    }
    .e-de-ruler-marker .e-de-ruler-tab-svg {
        fill: $de-ruler-tick-stroke;
    }
   .e-de-ruler-marker .e-de-ruler-indent-svg {
        fill: $de-ruler-tick-stroke;
    }
    .e-de-ruler-indent .e-de-ruler-indent-svg {
        fill: $de-ruler-indent-fill;
        stroke: $de-ruler-indent-stroke;
    }
    .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
        fill: $de-ruler-indent-hover;
        stroke:  $de-ruler-indent-stroke;
    }
    .e-de-ruler-indent .e-de-ruler-indent-svg:active {
        fill: $de-ruler-indent-active;
        stroke:  $de-ruler-indent-stroke;
    }
    .e-de-ruler-table-svg {
        fill: $de-ruler-indent-stroke;
    }
    .e-de-ruler-table-svg:hover {
        fill: $de-ruler-indent-hover;
    }
    .e-de-ruler-table-svg:active {
        fill: $de-ruler-indent-active;
    }
    .e-de-custom-treeview  .e-list-text{
        font-size: $de-custom-treeview-text-size;
        white-space: nowrap;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    @if $skin-name=='tailwind3' {
        .e-de-custom-treeview {
            border: none !important;
        }
    }
    .e-rtl {
        .e-listview .e-list-icon {
            height: $e-de-listview-height;
            width: 16px;
            margin-left: $e-de-ctnr-break-listview-margin-left;
        }
        .e-de-listview-icon {
            height: auto;
            width: auto;
            line-height: $e-de-ctnr-break-listview-line-height;
            margin-left: $e-de-ctnr-break-listview-margin-left;
        }
        .e-de-vRuler {
            background-color: $de-ruler-background-color;
            border-right: none;
            border-left: $de-vRuler-border-width solid $de-panel-border;
        }
    }
}

.e-de-ctn .e-de-bzr-button {
    @if $skin-name !='Material3' {
        @if $skin-name!='tailwind' and $skin-name!='tailwind-dark' and $skin-name !='bootstrap5' {
            font-size: $de-ctn-font-size;
        }
        @if $skin-name !='bootstrap4' and $skin-name !='bootstrap5' {
            font-weight: $de-ctnr-font-weight;
        }
        @if $skin-name !='fluent2' {
            background: $e-de-bzr-button-bg-color;
        }

        @if $skin-name!='tailwind' and $skin-name!='tailwind-dark' and $skin-name !='material' and $skin-name !='material-dark' {
            height: $e-de-ctn-height;
        }
        @if $skin-name !='fabric'and $skin-name !='material' and $skin-name !='material-dark' {
            color: $e-de-bzr-button-font-color;
        }
        @if $skin-name=='bootstrap5.3' {
            border: none;
        }
    }

    @if $skin-name=='bootstrap4' or $skin-name=='bootstrap' or $skin-name=='bootstrap-dark' {
        border: 1px solid $e-de-bzr-button-border-color;
    }
    @if $skin-name=='highcontrast' or $skin-name=='bootstrap' or $skin-name=='bootstrap-dark' or $skin-name=='fabric' or $skin-name=='fabric-dark' or $skin-name=='fluent2' {
        box-shadow: none;
        border: none;
    }
    @if $skin-name=='highcontrast' {
        border: 2px solid $e-de-bzr-button-border-color;
    }
    @if $skin-name=='bootstrap' or $skin-name=='bootstrap-dark' {
        padding-bottom: 6px;
    }
    @if $skin-name=='tailwind' or $skin-name=='tailwind-dark' {
        border: none;
        height: calc(100% - 10px);
        line-height: 1.3 !important;
        padding: 10px 6px 10px 6px !important;
        font-size: 14px !important;
    }
    @if $skin-name=='tailwind3' or $skin-name=='tailwind3-dark' {
        border: $e-de-ctn-border;
        font-size: $e-de-font-size !important;
        color: var(--color-sf-content-text-color);
        font-weight: $e-de-font-weight;
        .e-icons {
             color: var(--color-sf-icon-color);
        }
    }
}
@if $skin-name =='fabric' {
    .e-de-ctn .e-de-bzr-button:focus {
        outline: none;
    }
}
@if $skin-name !='material' and $skin-name !='material-dark' {
    .e-de-ctn .e-de-bzr-button:hover {
        background: $e-de-bzr-button-hover-bg-color;
        border: $e-de-bzr-button-hover-border;
        border-radius: $e-de-bzr-button-hover-border-radius;
        @if $skin-name !='tailwind' and $skin-name !='tailwind-dark' {
            color: $e-de-bzr-button-hover-font-color;
        }
        @if $skin-name =='tailwind3' or $skin-name =='tailwind3-dark' {
            .e-icons {
                color: var(--color-sf-secondary-text-color-hover);
           }
        } 
    }
    @if $skin-name=='bootstrap4' or $skin-name=='bootstrap5' {
        .e-de-ctn .e-de-bzr-button:hover .e-btn-icon {
            color: $e-de-bzr-button-hover-font-color;
        }
    }
}
@if $skin-name !='bootstrap' and $skin-name!='bootstrap-dark' and $skin-name!='tailwind' and $skin-name!='tailwind-dark' {
    .e-de-ctn .e-de-bzr-button:active {
        @if $skin-name !='bootstrap4' {
            box-shadow: none;
        }
        @if $skin-name=='fabric' or $skin-name=='highcontrast' {
            border-radius: 0;
        }
        @if $skin-name !='material' and $skin-name !='material-dark' {
            background-color: $e-de-bzr-button-active-bg-color;
            border-color: $e-de-bzr-button-active-border-color;
            color: $e-de-bzr-button-active-font-color;
        }
    }
    @if $skin-name=='highcontrast' {
        .e-de-ctn .e-de-bzr-button:active .e-btn-icon {
            color: $e-de-bzr-button-active-font-color;
        }
    }
}

@if $skin-name=='material' or $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='fabric' or $skin-name=='highcontrast' or $skin-name=='bootstrap5' or $skin-name=='FluentUI' or $skin-name=='Material3' {
    .e-de-ctn .e-de-bzr-button {
        @if $skin-name!='bootstrap5' and $skin-name!='FluentUI' and $skin-name != 'Material3' {
            font-size: 12px;
        }   
        @if $skin-name !='bootstrap4' {
            font-weight: 400;
        }
        @if  $skin-name=='FluentUI' or $skin-name == 'Material3' {
            font-size: 14px;
            border: none;
        }
        @if $skin-name !='material' {
            background: $e-de-bzr-button-bg-color;
            @if $skin-name !='Material3' {
                height: 100%;
                @if $skin-name !='fabric' {
                    color: $e-de-bzr-button-font-color;
                }
            }
        }
        @if $skin-name =='Material3' {
            height: calc(100% - 10px);
            line-height: 16px;
            font-size: $de-toolbar-font-size !important;
        }
        @if $skin-name=='bootstrap4' or $skin-name=='bootstrap' {
            border: 1px solid $e-de-bzr-button-border-color;
        }
        @if $skin-name=='bootstrap5' {
            border: none;
            line-height: 16px !important;
        }
        @if $skin-name=='highcontrast' or $skin-name=='bootstrap' or $skin-name=='bootstrap5' {
            box-shadow: none;
        }
        @if $skin-name=='highcontrast' {
            border: 2px solid $e-de-bzr-button-border-color;
        }
        @if $skin-name=='bootstrap' {
            padding-bottom: 6px;
        }
    }
    @if $skin-name=='fabric' {
        .e-de-ctn .e-de-bzr-button:focus {
            outline: none;
        }
    }
    @if $skin-name !='material' {
        .e-de-ctn .e-de-bzr-button:hover {
            background: $e-de-bzr-button-hover-bg-color;
            border: $e-de-bzr-button-hover-border;
            border-radius: $e-de-bzr-button-hover-border-radius;
            color: $e-de-bzr-button-hover-font-color;
        }
        @if $skin-name=='bootstrap4' {
            .e-de-ctn .e-de-bzr-button:hover .e-btn-icon {
                color: $e-de-bzr-button-hover-font-color;
            }
        }
    }
    @if $skin-name !='bootstrap' {
        .e-de-ctn .e-de-bzr-button:active {
            @if $skin-name !='bootstrap4' {
                box-shadow: none;
            }
            @if $skin-name=='fabric' or $skin-name=='highcontrast' {
                border-radius: 0;
            }
            @if $skin-name !='material' {
                background-color: $e-de-bzr-button-active-bg-color;
                border-color: $e-de-bzr-button-active-border-color;
                color: $e-de-bzr-button-active-font-color;
            }
        }
        @if $skin-name=='highcontrast' {
            .e-de-ctn .e-de-bzr-button:active .e-btn-icon {
                color: $e-de-bzr-button-active-font-color;
            }
        }
    }
}

.e-de-ctn {
    .e-de-ctnr-toolbar {
        .e-de-bzr-button {
            @if $skin-name == 'FluentUI' {
                font-size: 14px;
            }
            .e-btn-icon {
               font-size: $e-de-bzr-btn-font-size; 
               @if $skin-name=='tailwind' or  $skin-name=='tailwind-dark' or $skin-name=='tailwind3' or  $skin-name=='tailwind3-dark' {  
                   padding-bottom: $e-de-bzr-btn-padding-bottom !important;
               }
               @if $skin-name == 'FluentUI' {
                    padding-bottom: 2px;
                }
            }
        }

        .e-de-bzr-break.e-de-bzr-button {
            @if $skin-name=='bootstrap4' {
               line-height: 23px !important;
            }
            @if $skin-name=='tailwind' or  $skin-name=='tailwind-dark' { 
                padding-top: 9px !important;
                padding-bottom: 23px !important;
            }
            @if  $skin-name=='material' or  $skin-name=='material-dark' {
                height: calc(100% - 10px);
                line-height: 23px;
            }
            @if $skin-name =='bootstrap5' {
                .e-btn-icon {
                    margin-top: -11px;
                }
            }
            @if $skin-name == 'FluentUI' {
                padding-top: 0 !important;
            }
            @if $skin-name=='tailwind3' or $skin-name=='tailwind3-dark' {
                padding-top: $e-de-bzr-btn-padding-top !important;
            }
        }
    }
}
@if $skin-name =='tailwind3' {
    .e-de-char-fmt-btn-right .e-de-ctnr-group-btn>button {
        width: 62px;
    }
    .e-de-ctnr-segment.e-de-ctnr-style-div {
        width: 234px;
    }
    .e-de-font-clr-picker.e-de-ctnr-group-btn {
        .e-split-colorpicker.e-control.e-lib.e-btn.e-icon-btn.e-split-btn.e-keyboard:first-of-type {
            padding: $e-de-bzr-btn-padding !important;
        }
    }
    .e-de-ctnr-hglt-color {
        height: $e-de-ctnr-hglt-color-height !important;
        width: 24px !important;
        border-radius: $e-de-ctnr-hlt-clr-border-radius;
    }
}

@include export-module('document-editor-container-bootstrap-icons') {
  .e-de-ctnr-linespacing::before {
    content: '\eb30';
  }

  .e-de-ctnr-lock::before {
    content: '\eb20';
  }

  .e-de-ctnr-italic::before {
    content: '\eb1d';
  }

  .e-de-ctnr-link::before {
    content: '\eb27';
  }

  .e-de-cnt-track::before {
    content: '\e20a';
    font-family: 'e-icons';
  }

  .e-de-ctnr-table::before {
    content: '\eb2b';
  }

  .e-de-ctnr-tableofcontent::before {
    content: '\eb10';
  }

  .e-de-ctnr-pagenumber::before {
    content: '\eb1b';
  }

  .e-de-ctnr-new::before {
    content: '\eb0c';
  }

  .e-de-ctnr-bold::before {
    content: '\eb2f';
  }

  .e-de-ctnr-fontcolor::before {
    content: '\eb1f';
  }

  .e-de-ctnr-change-case::before {
    content: '\e88c';
  }

  .e-de-ctnr-pagesetup::before {
    content: '\eb33';
  }

  .e-de-ctnr-content-control::before {
    content: '\e156';
  }

  .e-de-ctnr-xml-mapping::before {
    content: '\e158';
  }

  .e-de-ctnr-strokestyle::before {
    content: '\eb1a';
  }

  .e-de-ctnr-image::before {
    content: '\eb1c';
  }

  .e-de-ctnr-bookmark::before {
    content: '\eb11';
  }

  .e-de-ctnr-header::before {
    content: '\eb0b';
  }

  .e-de-ctnr-open::before {
    content: '\eb28';
  }

  .e-de-ctnr-bullets::before {
    content: '\eb25';
  }

  .e-de-ctnr-borders::before {
    content: '\e93b';
  }

  .e-de-ctnr-showhide::before {
    content: '\eb23';
    font-size: 16px;
  }

  .e-de-ctnr-footer::before {
    content: '\eb0a';
  }

  .e-de-ctnr-clearall::before {
    content: '\eb26';
  }

  .e-de-ctnr-outsideborder::before {
    content: '\eb66';
  }

  .e-de-ctnr-allborders::before {
    content: '\eb95';
  }

  .e-de-ctnr-insideborders::before {
    content: '\eb88';
  }

  .e-de-ctnr-mergecell::before {
    content: '\eb93';
  }

  .e-de-ctnr-aligntop::before {
    content: '\eb35';
  }

  .e-de-ctnr-alignbottom::before {
    content: '\eb0e';
  }

  .e-de-ctnr-aligncenter-table::before {
    content: '\eb0d';
  }

  .e-de-ctnr-bullet-none::before {
    content: '\e256';
  }

  .e-de-ctnr-bullet-dot::before {
    content: '\e270';
  }

  .e-de-ctnr-bullet-circle::before {
    content: '\e254';
  }

  .e-de-ctnr-bullet-square::before {
    content: '\e271';
  }

  .e-de-ctnr-bullet-flower::before {
    content: '\e267';
  }

  .e-de-ctnr-bullet-arrow::before {
    content: '\e253';
  }

  .e-de-ctnr-bullet-tick::before {
    content: '\e259';
  }

  .e-de-selected-item::before {
    content: '\e935';
  }

  .e-de-ctnr-break::before {
    content: '\eba1';
  }

  .e-de-selected-spellcheck-item::before {
    content: '\e935';
    font-family: 'e-icons';
    font-size: 10px;
  }

  .e-de-selected-underline-item::before {
    content: '\e935';
    font-family: 'e-icons';
    font-size: 10px;
  }

  .e-de-ctnr-page-break::before {
    content: '\eba5';
  }

  .e-de-ctnr-section-break::before {
    content: '\eba7';
  }

  .e-de-ctnr-upload::before {
    content: '\eba4';
  }

  .e-de-ctnr-leftborders::before {
    content: '\e291';
  }

  .e-de-ctnr-rightborder::before {
    content: '\e288';
  }

  .e-de-ctnr-topborder::before {
    content: '\e281';
  }

  .e-de-ctnr-bottomborder::before {
    content: '\e298';
  }

  .e-de-ctnr-insertleft::before {
    content: '\e285';
  }

  .e-de-ctnr-insertright::before {
    content: '\e284';
  }

  .e-de-ctnr-insertabove::before {
    content: '\e506';
  }

  .e-de-ctnr-insertbelow::before {
    content: '\e505';
  }

  .e-de-ctnr-deleterows::before {
    content: '\e283';
  }

  .e-de-ctnr-deletecolumns::before {
    content: '\e282';
  }

  .e-de-ctnr-undo::before {
    content: '\ebc5';
  }

  .e-de-ctnr-find::before {
    content: '\e60e';
  }

  .e-de-ctnr-download::before {
    content: '\ec32';
  }

  .e-de-ctnr-justify::before {
    content: '\e334';
  }

  .e-de-ctnr-highlight::before {
    content: '\ebc6';
  }

  .e-de-ctnr-paste::before {
    content: '\e601';
  }

  .e-de-ctnr-subscript::before {
    content: '\e357';
  }

  .e-de-ctnr-strikethrough::before {
    content: '\ebc9';
  }

  .e-de-ctnr-redo::before {
    content: '\ebd3';
  }

  .e-de-ctnr-increaseindent::before {
    content: '\e33f';
  }

  .e-de-ctnr-underline::before {
    content: '\ebc8';
  }

  .e-de-ctnr-superscript::before {
    content: '\e352';
  }

  .e-de-ctnr-alignleft::before {
    content: '\e33a';
  }

  .e-de-ctnr-numbering::before {
    content: '\e346';
  }

  .e-de-ctnr-decreaseindent::before {
    content: '\e35d';
  }

  .e-de-ctnr-insideverticalborder::before {
    content: '\e287';
  }

  .e-de-ctnr-insidehorizondalborder::before {
    content: '\e276';
  }

  .e-de-ctnr-highlightcolor::before {
    content: '\ebc6';
  }

  .e-de-ctnr-close::before {
    content: '\e361';
  }

  .e-de-ctnr-backgroundcolor::before {
    content: '\ebca';
  }

  .e-de-ctnr-aligncenter::before {
    content: '\e35e';
  }

  .e-de-ctnr-print::before {
    content: '\ebd2';
  }

  .e-de-ctnr-alignright::before {
    content: '\e34d';
  }

  .e-de-ctnr-strokesize::before {
    content: '\ebd7';
  }

  .e-de-ctnr-cellbg-clr-picker::before {
    content: '\ebca';
  }

  .e-de-flip {
    transform: scaleX(-1);
  }

  .e-de-cnt-cmt-add::before {
    content: '\e814';
    font-family: 'e-icons';
  }

  .e-de-printlayout::before {
    content: '\e897';
    font-family: 'e-icons';
  }

  .e-de-weblayout::before {
    content: '\e798';
    font-family: 'e-icons';
  }

  .e-de-textform::before {
    content: '\e198';
    font-family: 'e-icons';
  }

  .e-de-combo-box::before {
    content: '\e8ff';
    font-family: 'e-icons';
  }

  .e-de-dropdown-list::before {
    content: '\e8fe';
    font-family: 'e-icons';
  }

  .e-de-formproperties::before {
    content: '\e199';
    font-family: 'e-icons';
  }

  .e-de-clearform::before {
    content: '\e19a';
    font-family: 'e-icons';
  }

  .e-de-dropdownform::before {
    content: '\e19b';
    font-family: 'e-icons';
  }

  .e-de-formfield::before {
    content: '\e19c';
    font-family: 'e-icons';
  }

  .e-de-checkbox-form::before {
    content: '\e19d';
    font-family: 'e-icons';
  }

  .e-de-arrow-up::before {
    content: '\e834';
    font-family: 'e-icons';
  }

  .e-de-arrow-down::before {
    content: '\e83d';
    font-family: 'e-icons';
  }

  .e-de-update-field::before {
    content: '\e19e';
    font-family: 'e-icons';
  }

  .e-de-footnote::before {
    content: '\e435';
    font-family: 'e-icons';
  }

  .e-de-endnote::before {
    content: '\e436';
    font-family: 'e-icons';
  }

  .e-de-e-paragraph-mark::before {
    content: '\e353';
    font-family: 'e-icons';
  }

  .e-de-e-paragraph-style-mark::before {
    content: '\e353';
    font-family: 'e-icons';
  }

  .e-de-e-character-style-mark::before {
    content: '\e98e';
    font-family: 'e-icons';
  }

  .e-de-e-linked-style-mark::before {
    content: '\e992';
    font-family: 'e-icons';
  }

  .e-de-ctnr-columns::before {
    content: '\e955';
    font-family: 'e-icons';
  }

  .e-de-ctnr-page-size::before {
    content: '\e952';
    font-family: 'e-icons';
  }

  .e-de-ctnr-page-break-column::before {
    content: '\e980';
    font-family: 'e-icons';
  }

  .e-de-ctnr-page-break-text-wrapping::before {
    content: '\e982';
    font-family: 'e-icons';
  }

  .e-de-ctnr-section-break-continuous::before {
    content: '\e981';
    font-family: 'e-icons';
  }

  .e-de-ctnr-section-break-even-page::before {
    content: '\e97e';
    font-family: 'e-icons';
  }

  .e-de-ctnr-section-break-odd-page::before {
    content: '\e97f';
    font-family: 'e-icons';
  }

  .e-de-ctnr-columns-one::before {
    content: '\e986';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-two::before {
    content: '\e987';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-three::before {
    content: '\e989';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-right::before {
    content: '\e983';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-columns-left::before {
    content: '\e985';
    font-family: 'e-icons';
    font-size: $de-column-presets-font-size;
  }

  .e-de-ctnr-add-bookmark::before {
    content: '\e17a';
  }

  .e-de-ctnr-all-bookmarks::before {
    content: '\e17b';
  }

  .e-de-ctnr-landscape::before {
    content: '\e17c';
  }

  .e-de-ctnr-page-orientation::before {
    content: '\e17d';
  }

  .e-de-ctnr-margin::before {
    content: '\e17e';
  }

  .e-de-ctnr-previous-comment::before {
    content: '\e17f';
  }

  .e-de-ctnr-next-comment::before {
    content: '\e180';
  }

  .e-de-ctnr-close-comment::before {
    content: '\e181';
  }

  .e-de-ctnr-increase-fontsize::before {
    content: '\e182';
  }

  .e-de-ctnr-decrease-fontsize::before {
    content: '\e183';
  }

  .e-de-ctnr-delete-all-comments::before {
    content: '\e184';
  }

  .e-de-ctnr-reading-view::before {
    content: '\e185';
  }

  .e-de-ctnr-multiple-page::before {
    content: '\e186';
  }

  .e-de-ctnr-fit-100::before {
    content: '\e187';
  }

  .e-de-ctnr-margin-narrow::before {
    content: '\e188';
  }

  .e-de-ctnr-margin-normal::before {
    content: '\e189';
  }

  .e-de-ctnr-margin-moderate::before {
    content: '\e18a';
  }

  .e-de-ctnr-margin-wide::before {
    content: '\e18b';
  }

  .e-de-ctnr-margin-default::before {
    content: '\e18c';
  }

  .e-de-ctnr-margin-custom::before {
    content: '\e18d';
  }

  .e-de-ctnr-size-letter::before {
    content: '\e18e';
  }

  .e-de-ctnr-size-legal::before {
    content: '\e18f';
  }

  .e-de-ctnr-size-executive::before {
    content: '\e190';
  }

  .e-de-ctnr-size-a4::before {
    content: '\e191';
  }

  .e-de-ctnr-size-a5::before {
    content: '\e192';
  }

  .e-de-ctnr-size-custom::before {
    content: '\e193';
  }

  .e-de-ctnr-more-column::before {
    content: '\e194';
  }

  .e-de-ctnr-zoom-in::before {
    content: '\e349';
  }

  .e-de-ctnr-zoom-out::before {
    content: '\e351';
  }

  .e-de-ctnr-table-update::before {
    content: '\e19e';
  }

  .e-de-ctnr-text-alternative::before {
    content: '\e33c';
  }

  .e-de-ctnr-export::before {
    content: '\e702';
  }

  .e-de-ctnr-replace::before {
    content: '\e359';
  }

  .e-de-ctnr-cut::before {
    content: '\e33b';
  }

  .e-de-ctnr-copy::before {
    content: '\e77c';
  }

  .e-de-ctnr-changes-accept::before {
    content: '\e19f';
  }

  .e-de-ctnr-changes-reject::before {
    content: '\e204';
  }

  .e-de-ctnr-border-none::before {
    content: '\e195';
  }

  .e-de-ctnr-paint-bucket::before {
    content: '\e35c';
  }

  .e-de-ctnr-mouse-pointer::before {
    content: '\ebce';
  }

  .e-de-ctnr-table-2::before {
    content: '\e70f';
  }

  .e-de-ctnr-freeze-row::before {
    content: '\eb02';
  }

  .e-de-ctnr-freeze-column::before {
    content: '\e21e';
  }

  .e-de-ctnr-table-cell::before {
    content: '\e89c';
  }

  .e-de-ctnr-table-delete::before {
    content: '\e292';
  }

  .e-de-ctnr-page-column-right::before {
    content: '\e983';
  }

  .e-de-ctnr-page-column-left::before {
    content: '\e985';
  }

  .e-de-ctnr-page-column-one::before {
    content: '\e986';
  }

  .e-de-ctnr-page-column-two::before {
    content: '\e987';
  }

  .e-de-ctnr-page-column-three::before {
    content: '\e989';
  }

  .e-de-ctnr-page-width::before {
    content: '\e169';
  }

  .e-de-ctnr-page-portrait::before {
    content: '\e13f';
  }
}

@include export-module('document-editor-container-bigger') {
  /* stylelint-disable */
  @if $skin-name =='FluentUI' {
    .e-bigger {

      .e-de-ctnr-group-btn .e-btn .e-btn-icon.e-icons.e-de-ctnr-fontcolor,
      .e-de-ctnr-group-btn .e-btn .e-btn-icon.e-icons.e-de-ctnr-change-case {
        font-size: 21px;
      }
    }
  }

  @if ($skin-name=='Material3') {
    .e-bigger .e-de-ctn .e-de-bzr-button {
      line-height: 17px;
      padding-top: 12px;
    }

    .e-bigger .e-de-ctn .e-de-bzr-button {
      box-shadow: none !important;
    }

    .e-bigger {
      .e-de-grp-btn-ctnr {
        .e-de-ctnr-group-btn-middle {
          >* {
            border-radius: 0px;
          }
        }

        .e-de-ctnr-group-btn-top {
          >* {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
          }
        }

        .e-de-ctnr-group-btn-bottom {
          >* {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
          }
        }
      }
    }
  }

  .e-bigger {
    @if $skin-name !='bootstrap5' and $skin-name !='tailwind' and $skin-name !='FluentUI' {
      .e-btn.e-de-statusbar-pageweb {
        padding: $de-statusbar-pageweb-padding;
      }
    }

    .e-de-statusbar-pageweb .e-de-printlayout,
    .e-de-statusbar-pageweb .e-de-weblayout {
      font-size: $e-de-bzr-btn-font-size-big;

      @if $skin-name=='bootstrap' {
        margin-top: -6px;
      }
    }
  }

  @if $skin-name=='bootstrap5' or $skin-name=='tailwind' or $skin-name =='FluentUI' {
    .e-bigger {
      .e-de-pagenumber-input {
        font-size: $e-de-btn-font-size-big;

        @if $skin-name =='fluent2' {
          height: $de-page-number-height;
        }
      }
    }
  }

  @if $skin-name=='tailwind'$skin-name=='material' or $skin-name=='bootstrap-dark' or $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='bootstrap5' or $skin-name=='fabric-dark' or $skin-name=='fabric' or $skin-name=='highcontrast' or $skin-name=='material-dark' {
    .e-bigger .e-btn-pageweb-spellcheck {
      margin-left: $de-zoom-tlbr-margin-left-big;
    }
  }

  @if $skin-name=='tailwind' or $skin-name =='bootstrap5' or $skin-name =='FluentUI' or $skin-name =='Material3' {
    .e-bigger {
      .e-de-ctn-title {
        font-size: $e-de-btn-font-size-big !important;
        height: 40px !important;

        button {
          font-size: $e-de-btn-font-size-big !important;
          height: auto !important;

          @if $skin-name !='tailwind' {
            margin: 0 !important;
          }

          .e-btn-icon {
            font-size: $e-de-btn-font-icon-size-big !important;
          }
        }
      }
    }
  }

  .e-bigger .e-de-statusbar-separator {
    border-left: 1px solid $e-de-statusbar-separator-color;

    @if $skin-name =='Material3' {
      height: 20px;
    }

    @else {
      height: $e-de-statusbar-separator-height;
    }

    margin-left: $de-spellcheck-tlbr-margin-left;
    margin-right: $de-spellcheck-tlbr-margin-left;
    margin-top: $de-status-br-top-big;
  }

  .e-bigger .e-de-statusbar-spellcheck {
    border-radius: $de-statusbar-spellcheck-border-radius;
  }

  @if $skin-name=='tailwind' or $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
    .e-bigger {

      .e-de-ctnr-prop-label,
      .e-de-ctnr-segment {
        margin-bottom: 16px;
      }

      .e-de-property-div-padding {
        padding: 16px;
      }

      .e-de-insert-del-cell>div:last-child {
        margin-left: $de-pane-margin-right-big !important;
      }

      .e-de-ctnr-group-btn .e-btn .e-btn-icon {
        margin-left: $de-btn-icon-margin;
      }

      .e-de-ctnr-group-btn .e-btn .e-btn-icon:not(.e-caret) {
        font-size: $de-btn-font-size-bigger;
      }

      .e-de-pane-rtl {
        .e-de-ctnr-group-btn .e-btn .e-btn-icon {
          margin-left: 0px;

          @if $skin-name=='tailwind' {
            margin-right: -5px;
          }

          @else {
            margin-right: $de-btn-icon-margin;
          }
        }
      }
    }
  }

  .e-bigger .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-first {
    margin-left: $de-ctnr-toolbar-margin-left;
    margin-right: $de-tlbr-margin-right-big;
  }

  .e-bigger .e-de-ctnr-toolbar.e-de-ctnr-rtl .e-toolbar-item.e-de-toolbar-btn-first {
    margin-left: $de-tlbr-margin-right-big;
    margin-right: $de-ctnr-toolbar-margin-left;
  }

  .e-bigger .e-de-ctnr-toolbar .e-toolbar-item.e-de-toolbar-btn-last {
    margin-left: $de-tlbr-margin-right-big;
    margin-right: $de-ctnr-toolbar-margin-right;
  }

  .e-bigger .e-de-ctnr-toolbar.e-de-ctnr-rtl .e-toolbar-item.e-de-toolbar-btn-last {
    margin-left: $de-ctnr-toolbar-margin-right;
    margin-right: $de-tlbr-margin-right-big;
  }

  @if $skin-name=='bootstrap4' {
    .e-bigger {
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-btn-icon {
        color: $de-toolbar-icon-clr;
        font-size: 18px;
      }

      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:disabled {
        .e-btn-icon {
          color: $de-toggle-btn-color;
        }
      }

      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
        font-size: 13px;
      }
    }
  }

  @if $skin-name=='bootstrap4' or $skin-name=='bootstrap5' {
    .e-bigger {
      .e-de-ctnr-group-btn .e-btn-icon {
        color: $de-prop-btn-icon-clr;
      }
    }
  }

  .e-bigger {
    .e-de-cntr-pane-padding {
      @if $skin-name=='FluentUI' {
        padding: 24px;
      }

      @else {
        padding: $de-cntr-pane-padding;
      }
    }

    .e-de-prop-pane {
      height: $e-de-prop-pane-height;
      min-height: $e-de-prop-pane-min-height;
      overflow: auto;
      width: $de-text-pane-width-big;
    }

    @if $skin-name=='bootstrap4' {
      .e-btn-toggle .e-tbar-btn-text {
        color: $de-toggle-btn-color !important;
      }

      .e-de-prop-font-colorpicker .e-split-btn-wrapper .e-btn {
        border-color: $de-clr-picker-border-clr;
      }
    }

    @if $skin-name=='tailwind' {
      .e-de-prop-sub-label {
        font-size: 14px;
      }

      .e-de-hdr-ftr-top-div,
      .e-de-hdr-ftr-frst-div {
        margin-bottom: 16px;
      }
    }
  }

  .e-bigger {
    .e-de-panel-left-width {
      width: $de-left-panel-width-big;
    }

    .e-de-char-fmt-btn-left>button,
    .e-de-insert-del-cell button {
      width: $de-left-btn-width-big;
    }
  }

  @if $skin-name=='bootstrap5' or $skin-name=='FluentUI' or $skin-name=='tailwind' {
    .e-bigger {
      .e-de-panel-right-width {
        width: $de-right-font-size-width-big;
      }

      .e-de-char-fmt-btn-left>button,
      .e-de-char-fmt-btn-right>button {
        width: $de-right-btn-width-big;
      }
    }
  }

  .e-bigger .e-de-ctnr-pg-no-spellout {
    color: $de-font-color;
    display: inline-flex;
    font-size: $de-ctnr-pg-no-spellout-fnt-size-bg;
    height: $e-de-ctnr-pg-no-spellout-height;
    padding-top: $e-de-ctnr-pg-no-spellout-padd-top-big;
    width: $de-page-no-width-spellout-big;
  }

  .e-bigger .e-de-statusbar-zoom-spell {
    @if $skin-name =='Material3' {
      background: $de-ctnr-bg-clr;
    }

    @else {
      background-color: $de-ctnr-bg-clr;
    }

    border: $de-statusbar-zoom-spell-border;
    color: $de-font-color;
    float: right;
    height: $e-de-statusbar-zoom-spell-height;
    margin-left: $de-zoom-tlbr-margin-left-big;
  }

  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn {
    height: $e-de-grp-btn-ctnr-height !important;
  }

  .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn>button {
    height: $e-de-grp-btn-ctnr-height;
    width: $de-border-btn-width-big;
  }

  .e-bigger .e-de-custom-treeview .e-list-text {
    font-size: $de-custom-treeview-text-size-bg;
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .e-bigger {
    @if $skin-name =='tailwind' or $skin-name =='bootstrap5' or $skin-name =='FluentUI' or $skin-name =='bootstrap4' {
      .de-split-button>div:first-child {
        margin-right: 0;
      }
    }

    @else {
      .de-split-button>div:first-child {
        margin-right: $de-list-button-margin-right-bigger;
      }
    }

    .e-de-border-clr-picker .e-split-btn-wrapper>button:first-child {
      @if $skin-name=='Material3' {
        width: 60px;
      }

      @else {
        width: 66px;
      }
    }

    .e-de-prop-fill-label {
      margin-left: $de-prop-fill-label-margin-left;
      margin-right: $de-prop-fill-label-margin-right-big;
    }

    .e-de-prop-fill-label.e-de-rtl {
      margin-left: $de-prop-fill-label-margin-right-big;
      margin-right: $de-prop-fill-label-margin-left;
    }

    .e-rtl {
      .e-de-cell-text-box {
        margin-left: $de-cell-text-box-margin-left;
        margin-right: $de-cell-text-box-margin-right;
      }
    }

    .e-de-cell-div {
      @if $skin-name =='bootstrap5' {
        button {
          width: 45px !important;
        }
      }
    }

    .e-de-color-picker {
      height: $de-border-size-button-height-bg;
      width: $de-border-size-button-width-bg;
    }

    .e-de-border-size-button {
      height: $de-border-size-button-height-bg;
      margin-top: $de-table-prop-border-margin;
      width: $de-border-size-button-width-bg;
    }

    .e-de-stylediv {
      padding-left: $de-stylediv-padding-left;
    }

    .e-de-stylediv-rtl {
      padding-right: $de-stylediv-padding-left;
    }

    .e-de-tool-ctnr-properties-pane {
      display: flex;
      height: $de-tool-ctnr-editor-height-big;
      min-height: $e-de-tool-ctnr-properties-pane-min-height;
      width: 100%;
    }

    .e-de-ctnr-properties-pane {
      display: flex;
      height: $de-ctnr-editor-height-big;
      width: 100%;
    }

    .e-de-ctn {
      background-color: $de-ctnr-bg-clr;
      border: $e-de-ctn-border-big solid $de-panel-border;
      height: $de-ctnr-height;
      position: relative;
      width: 100%;
    }

    .e-de-ctnr-toolbar {
      display: flex;
      height: $de-ctnr-tlbt-height-big;
      width: 100%;
    }

    .e-de-tlbr-wrapper .e-de-toolbar.e-toolbar,
    .e-de-tlbr-wrapper .e-de-ctnr-properties-pane-btn {
      border: $de-tlbr-wrapper-border;
    }

    .e-de-pane {
      border-left: $de-panel-border-left solid $de-panel-border;
    }

    .e-de-pane-rtl {
      border-right: $de-panel-border-left solid $de-panel-border;
    }

    @if $skin-name=='material' {

      .e-de-pane>div button:not(.e-primary),
      .e-de-pane-rtl>div button:not(.e-primary) {
        background-color: $de-panel-btn-bg-clr;
      }
    }

    .e-de-ctnr-segment {
      margin-bottom: $de-ctnr-margin-bottom-big;
    }

    @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' or $skin-name=='bootstrap5' {

      .e-de-font-clr-picker .e-colorpicker-wrapper:first-child,
      .e-de-font-clr-picker>.e-split-btn-wrapper {
        margin-right: $de-pane-margin-right-big;
      }

      .e-de-font-clr-picker.e-rtl .e-colorpicker-wrapper:first-child,
      .e-de-font-clr-picker.e-rtl>.e-split-btn-wrapper {
        margin-left: $de-pane-margin-right-big;
        margin-right: 0;
      }
    }

    @if $skin-name=='bootstrap-dark' {

      .e-de-font-clr-picker .e-colorpicker-wrapper:first-child,
      .e-de-font-clr-picker>.e-split-btn-wrapper {
        margin-right: $de-pane-margin-right-big;
      }

      .e-de-font-clr-picker.e-rtl .e-colorpicker-wrapper:first-child,
      .e-de-font-clr-picker.e-rtl>.e-split-btn-wrapper {
        margin-left: $de-pane-margin-right-big;
        margin-right: 0;
      }
    }

    .e-de-ctnr-segment>div:first-child:not(.e-rtl),
    .e-de-ctnr-segment-list>div:last-child:not(.e-rtl),
    .e-de-ctnr-segment>button:first-child:not(.e-rtl) {
      margin-right: $de-pane-margin-right-big;
    }

    .e-de-ctnr-segment.e-de-ctnr-segment-rtl>div:first-child,
    .e-de-ctnr-segment-list.e-de-ctnr-segment-list-rtl>div:last-child,
    .e-de-ctnr-segment.e-de-ctnr-segment-rtl>button:first-child {
      margin-left: $de-pane-margin-right-big;
      margin-right: $de-ctnr-segment-margin-right;
    }

    .e-de-tlbr-wrapper {
      background-color: $de-prpty-btn-bg-clr;
      height: $de-ctnr-tlbt-height-big;
      width: $de-ctnr-tlbr-width;
    }

    .e-de-ctnr-prop-label {
      color: $de-panel-header-color;
      display: inline-block;

      @if $skin-name =='tailwind' or $skin-name =='bootstrap5' or $skin-name =='FluentUI' {
        font-size: 16px;
      }

      @else {
        font-size: $de-panel-header-size;
      }

      font-weight: $de-ctnr-prop-label-font-weight;
      letter-spacing: $de-ctnr-prop-label-letter-spacing;
      margin-bottom: $de-ctnr-margin-bottom-big;
      opacity: 0.87;

      @if $skin-name=='tailwind' {
        line-height: 1.5;
      }
    }

    .e-de-table-prop-label {
      margin-left: $de-table-prop-label-margin-left-big;
    }

    .e-de-table-prop-label.e-de-rtl {
      margin-left: $de-table-prop-label-margin-left-rtl;
      margin-right: $de-table-prop-label-margin-left;
    }

    .e-de-toolbar.e-toolbar .e-toolbar-items {
      height: $de-ctnr-tlbt-height-big;

      .e-toolbar-item.e-de-separator {
        margin: $de-ctrnr-tblr-separator-margin-big;
      }

      .e-toolbar-item.e-de-toolbar-btn-start {
        margin-left: $de-tlbr-margin-first-big !important;
        margin-right: $de-tlbr-margin-right-big;
      }

      .e-toolbar-item.e-de-toolbar-btn-middle {
        margin-left: $de-tlbr-margin-right-big;
        margin-right: $de-tlbr-margin-right-big;
      }

      .e-toolbar-item.e-de-toolbar-btn-end {
        margin-left: $de-tlbr-margin-right-big;
        margin-right: $de-tlbr-margin-first-big;
      }

      .e-toolbar-item.e-de-image-focus :focus {
        background-color: $de-toggle-bg-color;
      }
    }

    @if $skin-name=='bootstrap' {

      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
        padding: 0 1px;
        padding-bottom: 6px;

        #{if(&, '&', '*')}:focus {
          padding: 0;
          padding-bottom: 6px;
        }

        #{if(&, '&', '*')}:active {
          padding: 0;
          padding-bottom: 6px;
        }

        #{if(&, '&', '*')}:hover {
          padding: 0;
          padding-bottom: 6px;
        }
      }
    }

    @if $skin-name !='bootstrap' {

      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
        padding: $de-toolbar-padding;
        padding-bottom: $de-toolbar-padding-bottom-bg;

        #{if(&, '&', '*')}:focus {
          padding: $de-toolbar-padding;
          padding-bottom: $de-toolbar-padding-bottom-bg;
        }

        #{if(&, '&', '*')}:active {
          padding: $de-toolbar-padding;
          padding-bottom: $de-toolbar-padding-bottom-bg;
        }

        #{if(&, '&', '*')}:hover {
          padding: $de-toolbar-padding;
          padding-bottom: $de-toolbar-padding-bottom-bg;
        }
      }
    }

    @if $skin-name=='bootstrap4' {

      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
        padding: 0 1px;
        padding-bottom: 6px;

        #{if(&, '&', '*')}:focus {
          padding: 0;
          padding-bottom: 6px;
        }

        #{if(&, '&', '*')}:active {
          padding: 0;
          padding-bottom: 6px;
        }

        #{if(&, '&', '*')}:hover {
          padding: 0;
          padding-bottom: 6px;
        }
      }
    }

    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
      padding: $de-toolbar-padding !important;
    }

    .e-de-overlay {
      height: $e-de-overlay-height;
      opacity: 0.5;
      pointer-events: none;
      touch-action: none;
    }

    .e-de-ctnr-properties-pane-btn {
      @if $skin-name=='Material3' {
        width: 78px;
      }

      @else {
        width: 75px;
      }
    }

    .e-de-ctnr-properties-pane-btn {
      .e-btn {
        background: $de-prpty-btn-bg-clr;
        border-radius: $de-ctnr-properties-pane-btn-border-radius;
        box-shadow: none;
        min-height: $e-de-ctnr-properties-pane-btn-min-height;
        min-width: 100%;

        #{if(&, '&', '*')}:focus {
          box-shadow: none;
        }

        #{if(&, '&', '*')}:active {
          box-shadow: none;
        }

        #{if(&, '&', '*')}:hover {
          box-shadow: none;
        }

        @if $skin-name=='fluent2' {
          background-color: $de-ctnr-prop-bg-clr;
        }
      }
    }

    .e-de-showhide-btn {
      border: $de-showhide-btn-border;
      height: $de-ctnr-tlbt-height-big;
    }

    .e-de-showhide-btn-rtl {
      border: $de-showhide-btn-border;
      height: $de-ctnr-tlbt-height-big;
    }

    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
      padding: $de-ctrnr-tblr-item-padding;
    }

    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
      display: table;

      @if $skin-name=='material' {
        font-size: 13px;
      }

      @if $skin-name=='material3' {
        font-size: $text-base;
      }

      @else if $skin-name=='tailwind' {
        font-size: 14px;
        line-height: 1.5;
      }

      @else if $skin-name=='bootstrap5' or $skin-name =='FluentUI' {
        font-size: 16px;
      }

      @else {
        font-size: $de-toolbar-font-size !important;
      }

      margin: $de-ctrnr-tblr-item-margin-big;
      padding: $de-ctrnr-tblr-padding;
      white-space: normal;
    }

    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
      @if $skin-name=='material' {
        font-size: 16px;
      }

      padding: $de-toolbar-items-padding;
    }

    .e-de-ctnr-group-btn.e-btn-group:not(.e-outline) {
      box-shadow: none;
      height: $de-group-btn-hgt-big;

      @if $skin-name=='bootstrap5' {
        padding-left: 1px;
      }

      #{if(&, '&', '*')}:focus {
        box-shadow: none;
      }

      #{if(&, '&', '*')}:active {
        box-shadow: none;
      }

      #{if(&, '&', '*')}:hover {
        box-shadow: none;
      }
    }

    .e-de-status-bar button {
      @if $skin-name=='Material3' {
        height: $de-status-btn-hgt-big;
      }

      @else {
        height: $de-group-btn-hgt-big;
      }

      box-shadow: none;

      #{if(&, '&', '*')}:focus {
        box-shadow: none;
      }

      #{if(&, '&', '*')}:active {
        box-shadow: none;
      }

      #{if(&, '&', '*')}:hover {
        box-shadow: none;
      }
    }

    .e-de-ctnr-group-btn button {
      box-shadow: none;
      height: $de-group-btn-hgt-big;

      #{if(&, '&', '*')}:focus {
        box-shadow: none;
      }

      #{if(&, '&', '*')}:active {
        box-shadow: none;
      }

      #{if(&, '&', '*')}:hover {
        box-shadow: none;
      }
    }

    .e-de-ctnr-group-btn {
      .e-de-prop-indent-button {
        @if $skin-name =='fluent2' {
          padding-left: 10px;
        }
      }

      .e-de-prop-indent-last-button {
        @if $skin-name =='fluent2' {
          padding-left: 10px;
        }
      }
    }

    @if $skin-name !='tailwind' {
      .e-de-property-div-padding {
        border-bottom: $de-pane-separator-border-bottom solid $de-pane-separator;

        @if $skin-name =='FluentUI' {
          padding: 24px;
        }

        @else {
          padding: $de-property-div-padding;
        }
      }

      .e-de-font-clr-picker>div button,
      .e-de-font-clr-picker>button {
        @if $skin-name=='bootstrap5' {
          width: 43px;
        }

        @else {
          width: auto;
        }
      }
    }

    .e-de-ctnr-dropdown-ftr {
      border-top: $de-pane-separator-border-top solid $de-pane-separator;
      color: $de-panel-header-color;
      cursor: pointer;
      display: block;
      font-size: $de-ctnr-dropdown-ftr-font-size;
      line-height: $de-ctnr-dropdown-ftr-line-height;
      text-indent: 1.2em;
    }

    .e-de-char-fmt-btn>button {
      width: 38.5px;
    }

    .e-de-btn-hghlclr>button:first-child {
      padding: $de-btn-hghlclr-top $de-btn-hghlclr-right !important;
    }

    .e-de-ctnr-hglt-color {
      font-size: $de-ctnr-hglt-color-font-size;
      font-weight: $de-ctnr-hglt-color-font-weight;
      height: $de-hlt-clr-height-bigger !important;
      width: $de-hlt-clr-height-bigger !important;

      @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='bootstrap5' or $skin-name=='tailwind' {
        border-radius: 4px;
      }
    }

    @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' or $skin-name=='tailwind' {
      .e-de-font-clr-picker>div div button {
        width: 38px;
      }
    }

    @if $skin-name=='bootstrap' or $skin-name=='bootstrap4' {
      .e-de-font-clr-picker>div div button {
        width: 38px;
      }
    }

    .e-de-ctnr-list {
      font-size: $de-bullet-icon-font-size;
      vertical-align: top;
    }

    .e-de-image-property {
      padding-left: $de-image-property-padding-left;
    }

    .e-de-img-prty-span {
      color: $de-font-color;
      left: 10px;
      position: absolute;
      top: $de-img-span-top-big;
    }

    .e-btn-toggle {
      @if $skin-name=='fluent2' {
        background-color: var(--color-sf-secondary-bg-color);
      }

      @else {
        background-color: $de-toggle-bg-color !important;
      }

      box-shadow: $de-toggle-btn-border !important;

      @if $skin-name=='fabric' {
        border-color: $de-toggle-bg-color !important;
      }

      outline: $de-toggle-btn-outline;
      outline-offset: 0;

      #{if(&, '&', '*')}:hover {
        background-color: $de-toggle-bg-color !important;

        @if $skin-name=='fabric' {
          border-color: $de-toggle-bg-color !important;
        }

        outline: $de-toggle-btn-outline;
        outline-offset: 0;
        box-shadow: $de-toggle-btn-border !important;
      }
    }

    .e-de-toc-template1 {
      background: $de-ctnr-bg-clr;
      border: $de-panel-border-width solid $de-panel-border;
      color: $de-panel-header-color;
      height: $e-de-toc-template1-height;
      margin-left: $de-panel-margin-left;
      width: 94px;
    }

    .e-de-toc-template1-content1 {
      font-size: $de-toc-template1-content1-font-size;
      height: $e-de-toc-template1-content1-height;
      margin-left: $de-toc-template1-content1-margin-left;
      margin-top: $de-toc-template1-content1-margin-top;
      width: $de-toc-template-content1;
    }

    .e-de-toc-template1-content2 {
      font-size: $de-toc-template1-content2-font-size;
      height: $e-de-toc-template1-content2-height;
      margin-left: $de-toc-template1-content2-margin-left;
      margin-top: $de-toc-template1-content2-margin-top;
      width: $de-toc-template-content2;
    }

    .e-de-toc-template1-content3 {
      font-size: $de-toc-template1-content3-font-size;
      height: $e-de-toc-template1-content3-height;
      margin-left: $de-toc-template1-content3-margin-left;
      margin-top: $de-toc-template1-content3-margin-top;
      width: $de-toc-template-content3;
    }

    .e-de-toc-optionsdiv {
      margin-bottom: $de-toc-optionsdiv-margin-bottom;
      margin-left: $de-toc-optionsdiv-margin-left;
      margin-top: $de-toc-optionsdiv-margin-top;
    }

    .e-de-toc-optionsdiv.e-de-rtl {
      margin-right: $de-toc-optionsdiv-margin-left;
      margin-left: $de-toc-optionsdiv-margin-left-rtl;
    }

    @if $skin-name !='tailwind' {
      .e-de-prop-sub-label {
        font-size: $de-prop-sub-label-font-size;
        margin-bottom: $de-prop-sub-label-margin-bottom;
      }
    }

    .e-de-btn-cancel {
      margin-left: $de-btn-cancel-margin-left;
    }

    .e-de-status-bar {
      @if $skin-name !='fluent2' {
        background: $de-ctnr-bg-clr;
      }

      display: flex;

      @if $skin-name !='Material3' {
        padding-top: $e-de-status-bar-big-padding-top;
      }

      width: 100%;
    }

    .e-de-statusbar-zoom {
      border: $de-statusbar-zoom-border;
      color: $de-font-color;
      float: right;

      @if $skin-name =='Material3' {
        height: 40px;
        background: $de-ctnr-bg-clr;
      }

      @else {
        height: $e-de-statusbar-zoom-height-big;
        background-color: $de-ctnr-bg-clr;
      }
    }

    @if $skin-name !='tailwind' {
      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
        line-height: $tbar-btn-text-line-height;

        @if $skin-name !='material' {
          padding: $tbar-btn-text-padding-top $tbar-btn-text-padding-right !important;
        }
      }

      .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text .e-de-text-wrap {
        @if $skin-name !='material' {
          height: $e-de-text-wrap-height;
        }

        @if $skin-name =='material' {
          height: 6px;
        }

        @if $skin-name =='bootstrap5' or $skin-name =='FluentUI' {
          line-height: .5;
        }

        @else {
          line-height: $tbar-btn-text-line-hgt;
        }

        @if $skin-name =='Material3' {
          line-height: 0.8;
        }
      }
    }

    .e-listview .e-list-icon {
      height: $e-list-icon-height;
      width: 16px;
      margin-right: $e-de-ctnr-break-listview-margin-right-big;
    }

    .e-de-listview-icon {
      height: auto;
      width: auto;
      line-height: $de-listview-icon-line-height;
      margin-right: $e-de-ctnr-break-listview-margin-right-big;
    }

    .e-rtl {
      .e-listview .e-list-icon {
        height: $e-list-icon-height;
        width: 16px;
        margin-left: $e-de-ctnr-break-listview-margin-left-big;
      }

      .e-de-listview-icon {
        height: auto;
        width: auto;
        line-height: $de-listview-icon-line-height;
        margin-left: $e-de-ctnr-break-listview-margin-left-big;
      }
    }
  }
}

.e-bigger {
  .e-de-ctn {
    .e-de-ctnr-toolbar {
      .e-de-bzr-button {
        @if $skin-name =='FluentUI' and $skin-name =='Material3' {
          font-size: 16px;
        }

        .e-btn-icon {
          font-size: $e-de-bzr-btn-font-size-big;

          @if $skin-name =='bootstrap5' or $skin-name =='FluentUI' {
            padding-bottom: 4px;
          }
        }
      }

      .e-de-bzr-break.e-de-bzr-button {
        @if $skin-name =='material' or $skin-name =='material-dark' or $skin-name =='Material3' {
          padding-top: 11px !important;
        }

        @if $skin-name =='FluentUI' {
          padding-top: 4px !important;
        }
      }
    }
  }
}

@if $skin-name =='tailwind3' {
  .e-bigger 
  {
    .e-colorpicker-wrapper.e-de-font-clr-picker,
    .e-split-btn-wrapper.e-de-prop-splitbutton,
    .e-split-btn-wrapper.e-de-btn-hghlclr,
    .e-de-ctnr-segment>div:first-child:not(.e-rtl),
    .e-bigger .de-split-button>div:first-child {
      margin-right: $de-hdr-ftr-frst-div-mrgn-btm;
    }
    .e-de-tlbr-wrapper{ 
      height: $de-shw-hid-height-big;
    }
    .e-de-ctnr-prop-label {
      color: $e-de-bzr-button-font-color;
    }
    .e-de-ctnr-style-div {
      width: 270px;
      height: $de-prop-clr-wrap-height;
    }
    .e-de-ctnr-properties-pane-btn .e-btn {
       width: $de-shw-hid-height;
       height: $de-shw-hid-height-big;
    }
    // .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-
    // {
    //   font-size: $e-de-btn-font-icon-size;
    //   line-height: 30px;
    // }
    .e-de-panel-left-width {
      width: 170px;
      height: $de-prop-clr-wrap-height-big;
    }
    .e-de-panel-right-width {
      width: $de-prop-font-btn-width-big;
      height: $de-prop-clr-wrap-height-big;
    }
    .e-de-font-clr-picker>div button{
      width: $de-prop-clr-wrap-height-big;
    }
    // .e-de-status-bar {
    //   width: 1491px;
    //   height: $de-prop-clr-wrap-width;
    //   background-color: $de-ruler-background-color;
    // } 
    .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text{
      font-size: $e-de-btn-font-icon-size;
      line-height: $e-toolbar-items-line-height;
    }
    .e-de-toolbar-btn-first ul {
      max-width: 280px;
    }
    .e-de-font-clr-picker {
      .e-selected-color {
        width: 24px !important;
        height: $e-de-font-clr-picker-height !important;
      }
    }
    .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
      font-size: $bigger-e-de-btn-font-icon-size !important;
    }
    .e-de-char-fmt-btn-right .e-de-ctnr-group-btn>button {
      width: 74px !important;
    }
    .e-de-ctnr-segment .e-de-ctnr-style-div {
      width: 298px;
    }
    .e-de-char-fmt-btn-right>button {
      width: 40px;
    }
  }
}

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

$navigation-arrow-background: #fff !default;
$navigation-icon-background-hover: #0070f0 !default;
$navigation-icon-border-hover: rgba(0, 112, 240, .5) !default;
$splitter-border-color: $grey-88 !default;
$splitter-background-color: #fff !default;
$splitpane-font-size: 14px !default;
$splitpane-font-weight: normal !default;
$splitpane-font-family: $font-family !default;
$splitpane-font-color: $grey-dark-font !default;
$splitbar-border-color: $grey-88 !default;
$splitbar-hover-border-color: $brand-primary !default;
$resize-icon-hover-color: $splitbar-hover-border-color !default;
$splitbar-icon-color: $grey-dark-font !default;
$splitbar-icon-size: 14px !default;
$collapse-icon-bg-color: $grey-base !default;
$splitbar-icon-gap: 18px !default;
$splitbar-icon-height: 18px !default;
$resize-icon-bg-color: $grey-base !default;
$split-bar-border-left: none !default;
$split-bar-border-right: none !default;
$split-bar-hover-border-left: none !default;
$split-bar-hover-border-right: none !default;
$splitbar-border-width: 1px !default;
$splitbar-arrow-border-radius: 50% !default;
$splitbar-resizable-height: 100% !default;
$splitbar-arrow-height: 26px !default;
$splitbar-arrow-segment-radius: 16px !default;
$splitbar-arrow-segment-height: 8px !default;
$splitbar-vertical-resizable-height: 16px !default;
$splitbar-vertical-handler-height: 1px !default;
$splitter-border-none: 0 !default;
$split-bar-vertical-navigate-arrow-margin-top: -2px !default;
$split-bar-vertical-navigate-arrow-down-margin-top: 2px !default;
$split-bar-horizontal-navigate-arrow-padding: 1px 12px !default;
$splitbar-horizontal-last-bar-margin: 0 3px !default;
$splitbar-horizontal-bar-margin: 0 0 0 3px !default;
$split-bar-vertical-navigate-arrow-padding: 10px 3px 10px 18px !default;
$split-bar-horizontal-navigate-arrow-left-margin-left: -26px !default;
$splitbar-vertical-last-bar-margin: 3px 0 !default;
$splitbar-vertical-bar-margin: 3px 0 0 !default;
$splitter-navigate-arrow-left: 5px !default;
$splitter-navigate-arrow-right: 5px !default;
$splitter-horizontal-navigate-arrow-right: 8px !default;
$splitter-navigate-arrow-transform-origin-before: 1px 7px 0 !default;
$splitter-navigate-arrow-top-before: 5px !default;
$splitter-navigate-arrow-transform-origin-after: 1px 1px 0 !default;
$splitter-navigate-arrow-top-after: 11px !default;
$splitter-navigate-arrow-width: 2px !default;
$splitter-navigate-right-arrow-left: 8px !default;
$splitter-navigate-right-arrow-right: 3px !default;
$splitter-vertical-navigate-arrow-topbottom: 20px !default;
$splitter-vertical-navigate-arrow-left: 22px !default;
$splitter-vertical-navigate-arrow-up-top-before: 3px !default;
$splitter-vertical-navigate-arrow-up-transform-origin-before: 2px 7px 0 !default;
$splitter-vertical-navigate-arrow-up-top-after: 8px !default;
$splitter-vertical-navigate-arrow-up-transform-origin-after: 1px 1px 0 !default;
$splitter-vertical-navarrow-up-left: 10px !default;
$splitter-vertical-navarrow-up-left-after: 11px !default;
$splitter-vertical-navigate-arrow-down-left-after: 10px !default;
$splitter-vertical-navigate-arrow-down-top-after: 12px !default;
$splitter-vertical-navarrow-transform-origin-after: 1px 2px 0 !default;
$splitter-vertical-navigate-arrow-down-left-before: 12px !default;
$splitter-vertical-navigate-arrow-down-top-before: 8px !default;
$splitter-vertical-navarrow-transform-origin-before: 1px 6px 0 !default;
$splitter-vertical-nav-arrow-width: 26px !default;

// Bigger style
$bigger-splitbar-icon-gap: 20px !default;
$bigger-splitbar-icon-height: 20px !default;
$bigger-splitpane-font-size: 14px !default;
$bigger-splitbar-icon-size: 16px !default;

@include export-module('splitter-layout') {
  .e-splitter {
    &.e-splitter-horizontal,
    &.e-splitter-vertical {
      border-width: $splitbar-border-width;
      display: flex;
      overflow: hidden;
      position: relative;
      touch-action: none;
      width: 100%;

      .e-pane {
        flex: 1 1 auto;
        font-family: $splitpane-font-family;
        font-size: $splitpane-font-size;
        font-weight: $splitpane-font-weight;

        &.e-scrollable {
          overflow: auto;
        }

        &.e-static-pane {
          flex-grow: 0;
          flex-shrink: 0;
        }

        &.e-pane-horizontal {
          overflow: auto;

          &.e-pane-hidden {
            flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
            overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }
    }

    &.e-splitter-horizontal {
      flex-direction: row;

      &.e-pane {
        &.e-scrollable {
          overflow: hidden;
        }
      }

      &.e-rtl {
        flex-direction: row-reverse;

        .e-split-bar {
          &.e-split-bar-horizontal {
            flex-direction: row-reverse;

            .e-navigate-arrow:not(.e-arrow-right)::before,
            .e-navigate-arrow:not(.e-arrow-right)::after {
              right: auto;
            }
          }
        }
      }
    }

    &.e-splitter-vertical {
      flex-direction: column;

      &.e-reverse {
        flex-direction: column-reverse;
      }

      &.e-pane {
        &.e-scrollable {
          overflow: hidden;
        }
      }

      .e-pane-vertical {
        overflow: auto;

        &.e-pane-hidden {
          flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
          overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      &.e-rtl {
        .e-split-bar {
          &.e-split-bar-vertical {
            .e-navigate-arrow:not(.e-arrow-down)::before,
            .e-navigate-arrow:not(.e-arrow-down)::after {
              right: auto;
            }

            .e-navigate-arrow {
              &:not(.e-arrow-down) {
                border-radius: $splitbar-arrow-border-radius;
                bottom: $splitter-vertical-navigate-arrow-topbottom;
                right: $splitter-vertical-navigate-arrow-left;
              }

              &.e-arrow-down {
                border-radius: $splitbar-arrow-border-radius;
                left: $splitter-vertical-navigate-arrow-left;
                right: auto;
                top: $splitter-vertical-navigate-arrow-topbottom;

                &::after {
                  right: auto;
                }
              }
            }
          }
        }
      }
    }

    .e-split-bar {
      &.e-split-bar-horizontal {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        min-width: 1px;
        z-index: 15;

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

        &.e-resizable-split-bar {
          cursor: col-resize;
        }

        &.e-resizable-split-bar::after {
          content: '';
          cursor: col-resize;
          display: block;
          height: $splitbar-resizable-height;
          position: absolute;
          width: 16px;
          z-index: 10;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: $splitbar-icon-height;
          justify-content: center;
          position: relative;
          width: 1px;

          &.e-hide-handler {
            visibility: hidden;
          }
        }

        .e-navigate-arrow:not(.e-arrow-right)::before,
        .e-navigate-arrow:not(.e-arrow-right)::after {
          left: $splitter-navigate-right-arrow-left;
          right: $splitter-navigate-right-arrow-right;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: $splitbar-border-width;
          cursor: pointer;
          display: flex;
          height: $splitbar-arrow-height;
          padding: $split-bar-horizontal-navigate-arrow-padding;
          position: relative;

          &::before,
          &::after {
            border-radius: $splitbar-arrow-segment-radius;
            content: '';
            height: $splitbar-arrow-segment-height;
            position: absolute;
            transform: rotate(0deg);
            width: $splitter-navigate-arrow-width;
          }

          &::before {
            top: $splitter-navigate-arrow-top-before;
            transform-origin: $splitter-navigate-arrow-transform-origin-before;
          }

          &::after {
            top: $splitter-navigate-arrow-top-after;
            transform-origin: $splitter-navigate-arrow-transform-origin-after;
          }

          &:not(.e-arrow-right) {
            border-radius: $splitbar-arrow-border-radius;
            right: $splitter-navigate-arrow-left;
          }

          &.e-arrow-right {
            border-radius: $splitbar-arrow-border-radius;
            left: $splitter-navigate-arrow-right;
          }

          &.e-arrow-right::before,
          &.e-arrow-right::after {
            right: $splitter-horizontal-navigate-arrow-right;
          }
        }

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: $splitbar-horizontal-last-bar-margin;
        }

        &:not(.e-resizable-split-bar) {
          margin: $splitbar-horizontal-bar-margin;
        }
      }

      &.e-split-bar-vertical {
        align-items: center;
        border-left: $split-bar-border-left;
        border-right: $split-bar-border-right;
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        min-height: 1px;

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

        &.e-resizable-split-bar {
          cursor: row-resize;
        }

        &.e-resizable-split-bar::after {
          content: '';
          cursor: row-resize;
          display: block;
          height: $splitbar-vertical-resizable-height;
          position: absolute;
          width: 100%;
          z-index: 12;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: $splitbar-vertical-handler-height;
          justify-content: center;
          width: $splitbar-icon-gap;

          &.e-hide-handler {
            visibility: hidden;
          }
        }

        .e-navigate-arrow:not(.e-arrow-down)::before,
        .e-navigate-arrow:not(.e-arrow-down)::after {
          left: $splitter-vertical-navarrow-up-left;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: $splitter-border-none;
          cursor: pointer;
          display: flex;
          height: $splitbar-arrow-height;
          padding: $split-bar-vertical-navigate-arrow-padding;
          position: relative;
          width: $splitter-vertical-nav-arrow-width;

          &::before,
          &::after {
            border-radius: $splitbar-arrow-segment-radius;
            content: '';
            height: $splitbar-arrow-segment-height;
            position: absolute;
            transform: rotate(90deg);
            width: $splitter-navigate-arrow-width;
          }

          &:not(.e-arrow-down) {
            &::before {
              top: $splitter-vertical-navigate-arrow-up-top-before;
              transform-origin: $splitter-vertical-navigate-arrow-up-transform-origin-before;
            }
          }

          &:not(.e-arrow-down) {
            &::after {
              left: $splitter-vertical-navarrow-up-left-after;
              top: $splitter-vertical-navigate-arrow-up-top-after;
              transform-origin: $splitter-vertical-navigate-arrow-up-transform-origin-after;
            }
          }

          &.e-arrow-down {
            &::before {
              left: $splitter-vertical-navigate-arrow-down-left-before;
              top: $splitter-vertical-navigate-arrow-down-top-before;
              transform-origin: $splitter-vertical-navarrow-transform-origin-before;
            }
          }

          &.e-arrow-down {
            &::after {
              left: $splitter-vertical-navigate-arrow-down-left-after;
              top: $splitter-vertical-navigate-arrow-down-top-after;
              transform-origin: $splitter-vertical-navarrow-transform-origin-after;
            }
          }

          &:not(.e-arrow-down) {
            border-radius: $splitbar-arrow-border-radius;
            bottom: $splitter-vertical-navigate-arrow-topbottom;
            left: $splitter-vertical-navigate-arrow-left;
          }

          &.e-arrow-down {
            border-radius: $splitbar-arrow-border-radius;
            right: $splitter-vertical-navigate-arrow-left;
            top: $splitter-vertical-navigate-arrow-topbottom;
          }

          &.e-arrow-down::before,
          &.e-arrow-down::after {
            right: 10px;
          }
        }

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: $splitbar-vertical-last-bar-margin;
        }

        &:not(.e-resizable-split-bar) {
          margin: $splitbar-vertical-bar-margin;
        }
      }
      .e-navigate-arrow {
        border-style: solid;
      }
    }
  }

  .e-rtl .e-splitter {
    &.e-splitter-horizontal {
      flex-direction: row-reverse;
    }
  }

  .e-content-placeholder.e-splitter.e-placeholder-splitter {
    background-size: 100px 110px;
    min-height: 110px;
  }

  .e-splitter.e-ie .e-navigate-arrow.e-arrow-left {
    margin-left: $split-bar-horizontal-navigate-arrow-left-margin-left;
  }

  .e-splitter.e-ie .e-split-bar-horizontal .e-resize-handler {
    flex-direction: column;
  }
}

/* stylelint-disable-line no-empty-source */

@include export-module('splitter-theme') {
  .e-splitter {
    &.e-splitter-horizontal,
    &.e-splitter-vertical {
      border: solid $splitbar-border-width $splitter-border-color;

      .e-pane {
        color: $splitpane-font-color;

        // sass-lint:disable nesting-depth
        &.e-splitter {

          &.e-splitter-horizontal,
          &.e-splitter-vertical {
            border: transparent;
          }
        }
      }
    }

    .e-split-bar {
      &.e-split-bar-horizontal {
        background: $splitbar-border-color;
        border-left: $split-bar-border-left;
        border-right: $split-bar-border-right;

        .e-resize-handler {
          background: $resize-icon-bg-color;
          color: $splitbar-icon-color;
          z-index: 10;
        }

        .e-navigate-arrow:not(.e-icon-hidden) {
          background-color: transparent;
          border-color: transparent;
          color: transparent;
          transition: background-color 500ms ease-out;

          &::before,
          &::after {
            background-color: $navigation-icon-background-hover;
            opacity: 0;
            transition-duration: .3s;
            transition-timing-function: cubic-bezier(.25, .1, .25, 1);
          }
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          background: $splitbar-hover-border-color;
          border-left: $split-bar-hover-border-left;
          border-right: $split-bar-hover-border-right;

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }

          .e-navigate-arrow {
            &.e-arrow-left,
            &.e-arrow-right {
              background-color: $navigation-arrow-background;
              border-color: $navigation-icon-border-hover;
              border-width: $splitbar-border-width;
              opacity: .9;
            }
          }

          &.e-split-bar-hover,
          &.e-split-bar-active {
            .e-navigate-arrow::before {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(40deg);
            }

            .e-navigate-arrow::after {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(-40deg);
            }
          }
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          .e-navigate-arrow.e-arrow-right::before {
            background-color: $navigation-icon-background-hover;
            opacity: 1;
            transform: rotate(-40deg);
          }

          .e-navigate-arrow.e-arrow-right::after {
            background-color: $navigation-icon-background-hover;
            opacity: 1;
            transform: rotate(40deg);
          }
        }

        &.e-split-bar-active {
          background: $splitbar-hover-border-color;

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }
        }
      }

      &.e-split-bar-vertical {
        background: $splitbar-border-color;

        .e-resize-handler {
          background: $resize-icon-bg-color;
          color: $splitbar-icon-color;
          z-index: 12;
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          background: $splitbar-hover-border-color;
          border-left: $split-bar-hover-border-left;
          border-right: $split-bar-hover-border-right;

          .e-navigate-arrow {
            &.e-arrow-up,
            &.e-arrow-down {
              background-color: $navigation-arrow-background;
              border-color: $navigation-icon-border-hover;
              border-width: $splitbar-border-width;
              opacity: .9;
            }
          }

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          .e-navigate-arrow.e-arrow-up {
            &::before {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(125deg);
            }

            &::after {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(50deg);
            }
          }

          .e-navigate-arrow.e-arrow-down {
            &::before {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(55deg);
            }

            &::after {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(125deg);
            }
          }
        }

        .e-navigate-arrow {
          background-color: transparent;
          border-color: transparent;
          color: transparent;
          transition: background-color 300ms ease-out;

          &::before,
          &::after {
            background-color: $navigation-icon-background-hover;
            opacity: 0;
            transition-duration: .3s;
            transition-timing-function: cubic-bezier(.25, .1, .25, 1);
          }
        }

        &.e-split-bar-active {
          background: $splitbar-hover-border-color;

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }
        }
      }
    }

    &.e-disabled {
      opacity: .4;
      pointer-events: none;
    }
  }
}

@include export-module('splitter-bootstrap-icons') {
  .e-splitter {
    .e-split-bar {
      &.e-split-bar-horizontal {
        .e-resize-handler::before {
          content: '\e984';
          font-family: 'e-icons';
          font-size: $splitbar-icon-size;
        }

        .e-resize-handler {
          &.e-template-resize-handler::before {
            content: '';
          }
        }
      }

      &.e-split-bar-vertical {
        & .e-resize-handler::before {
          content: '\e984';
          font-family: 'e-icons';
          font-size: $splitbar-icon-size;
          transform: rotate(90deg);
        }

        .e-resize-handler {
          &.e-template-resize-handler::before {
            content: '';
          }
        }
      }
    }
  }
}

@include export-module('splitter-bigger') {

  .e-bigger.e-splitter {
    .e-pane {
      font-size: $bigger-splitpane-font-size;
    }

    .e-split-bar {
      &.e-split-bar-horizontal {
        .e-resize-handler {
          height: $bigger-splitbar-icon-height;
        }
      }

      &.e-split-bar-vertical {
        .e-resize-handler {
          width: $bigger-splitbar-icon-gap;
        }

        .e-navigate-arrow:not(.e-arrow-down)::before,
        .e-navigate-arrow:not(.e-arrow-down)::after {
          margin-top: $split-bar-vertical-navigate-arrow-margin-top;
        }

        .e-navigate-arrow {
          &.e-arrow-down::after {
            margin-top: $split-bar-vertical-navigate-arrow-down-margin-top;
          }
        }
      }
    }
  }

  .e-bigger .e-splitter {
    .e-pane {
      font-size: $bigger-splitpane-font-size;
    }

    .e-split-bar {

      &.e-split-bar-horizontal {
        .e-resize-handler {
          height: $bigger-splitbar-icon-height;
        }
      }

      &.e-split-bar-vertical {
        .e-resize-handler {
          width: $bigger-splitbar-icon-gap;
        }
      }
    }
  }

  .e-bigger .e-content-placeholder.e-splitter.e-placeholder-splitter,
  .e-bigger.e-content-placeholder.e-splitter.e-placeholder-splitter {
    background-size: 100px 110px;
    min-height: 110px;
  }

  .e-bigger {
    .e-splitter {
      .e-split-bar {
        .e-resize-handler::before {
          font-size: $bigger-splitbar-icon-size;
        }
      }
    }

    &.e-splitter {
      .e-split-bar {
        .e-resize-handler::before {
          font-size: $bigger-splitbar-icon-size;
        }
      }
    }
  }
}

$pager-numericitem-border-radius: 4px !default;
$pager-border-type: $border-type !default;
$pager-mobile-icon-size: 11px !default;
$pager-icon-width: 'auto' !default;
$pager-icon-height: 'auto' !default;
$pager-navigationicon-padding: 11px 9px 8px !default;
$pager-navigationicon-right: 0 !default;
$pager-navigationicon-top: 0 !default;
$pager-numericitem-margin-right: 0 !default;
$pager-messagebar-padding-bottom: 9px !default;
$pager-bigger-messagebar-padding-bottom: 8px !default;
$pager-content-opacity: 1 !default;
$pager-next-icon-margin-left: 0 !default;
$pager-numeric-hover-bg-color: unset !default;
$pager-numeric-txt-bg-color: unset !default;
$pager-container-rtl-margin: 0 6px -4px 0 !default;
$pager-rtl-navigation-icon-padding: 11px 9px 8px 2px !default;
$pager-rtl-numeric-margin: 0 !default;
$pager-tripledot-font-size: 16px !default;
$pager-last-page-hover-border-radius:  0 4px 4px 0 !default;
$pager-first-page-hover-border-radius: 4px 0 0 4px !default;
$pager-rtl-parentmsgbar-margin-left: 6px !default;
$pager-rtl-parentmsgbar-padding-top: 12px !default;
$pager-bigger-nexticon-marign-left: math.div($pager-next-icon-margin-left, .75) !default;
$pager-bigger-current-item-border-radius: math.div($pager-numericitem-border-radius, .75) !default;
$pager-bigger-rtl-nexticon-marign-left: 0 !default;
$pager-bigger-rtl-nexticon-marign-right: math.div($pager-next-icon-margin-left, .75) !default;
$pager-device-padding: 19px 0 !default;
$pager-device-messabar-padding: 0 !default;
$pager-bigger-rtl-parentmsgbar-margin-left: 6px !default;
$pager-bigger-rtl-activeitem-padding: 15px 14px 12px 13px !default;
$pager-numericitem-min-width: 26px !default;
$pager-font-size: 14px !default;
$pager-font-line-height: 1 !default;
$pager-numeric-font-line-height: $pager-font-line-height !default;
$pager-bg-color: $grey-base !default;
$pager-border-color: $grey-99 !default;
$pager-color: $grey-dd !default;
$pager-icon-size: 10px !default;
$pager-border-size: 1px !default;
$pager-numericitem-padding: 13px 12px 10px !default;
$pager-padding: 8px !default;
$pager-numeric-font-weight: bold !default;
$pager-messagebar-padding-top: 10px !default;
$pager-number-hover-bg-color: $grey-99 !default;
$pager-font-family: Helvertica !default;
$pager-font-weight: bold !default;
$pager-messagebar-padding-right: 8px !default;
$pager-tripledot-padding: 8px 11px 9px !default;
$pager-numeric-icon-padding: 11px 12px 10px 11px !default;
$pager-pagecontainer-icon-padding: 11px 10px 12px 8px !default;
$pager-bigger-pagecontainer-icon-padding: 11px 10px 12px 8px !default;
$pager-hover-color: $grey-dark-font !default;
$pager-mhover-color: $grey-dark-font !default;
$pager-pagermessage-weight: 500 !default;
$pager-active-color: $brand-primary-font !default;
$pager-active-bg-color: $brand-primary !default;
$pager-last-border-size: 1px !default;
$page-content-color: $grey-dark-font !default;
$pager-container-margin: 0 0 -4px !default;
$pager-bigger-numeric-item-margin: 0 !default;
$pager-bigger-icon-font-size: 12px !default;
$pager-bigger-font-size: 14px !default;
$pager-bigger-padding: 13px 13px 8px !default;
$pager-bigger-pagercontainer-margin: 0 !default;
$pager-bigger-pagercontainer-icons-padding: 13px 10px 12px !default;
$pager-bigger-pagercontainer-icons-marign-right: 0 !default;
$pager-bigger-current-item-padding: 15px 14px 12px 13px !default;
$pager-letter-spacing: 0 !default;
$pager-bigger-icons-align: middle !default;
$pager-bigger-messagebar-padding-right: 10px !default;
$pager-bigger-messagebar-padding-top: 14px !default;
$pager-last-content-icon: 'e235' !default;
$pager-next-content-icon: 'e236' !default;
$pager-prev-content-icon: 'e237' !default;
$pager-first-content-icon: 'e238' !default;
$pager-icon-color: $grey-dark-font !default;
$pager-hover-bg-color: $grey-99 !default;
$pager-dropdown-margin-top: -20px !default;
$pager-dropdown-margin-left: 16px !default;
$pager-dropdown-margin-right: 0 !default;
$pager-dropdown-overflow: hidden !default;
$pager-bigger-dropdown-constant-margin: 12px !default;
$pager-bigger-dropdown-margin: -35px  0 0 20px !default;
$pager-dropdown-height: 34px !default;
$pager-dropdown-width: 90px !default;
$pager-bigger-dropdown-width: 90px !default;
$pager-constant-margin: 11px 0 6px 8px !default;
$pager-bigger-letter-spacing: 9px 10px 12px !default;
$pager-tripledot-rtl-margin-top: 2px !default;
$pager-tripledot-rtl-padding: 8px 11px 9px !default;
$pager-rtl-pagerconstant-margin-top: 8px !default;
$pager-rtl-pagerdropdown-margin: -16px 16px 0 0 !default;
$pager-tripledot-rtl-bigger-margin-top: -5px !default;
$pager-bigger-rtl-numeric-margin: 0 !default;
$pager-bigger-container-rtl-margin: 0 0 -4px 0 !default;
$pager-bigger-new-container-rtl-margin: -4px -4px -4px 0 !default;
$pager-activeitem-padding: 11px 12px 10px 11px !default;
$pager-bigger-activeitem-padding: $pager-activeitem-padding !default;
$pager-rtl-pagerdropdown-bigger-margin: -24px 16px 0 0 !default;
$pager-rtl-pagerconstant-bigger-margin-top: 22px 16px 5px 0 !default;
$pager-bigger-rtl-parentmsgbar-margin-top: 8px !default;
$pager-item-hover-borders-width: 0 !default;
$pager-bigger-rtl-pagercontainer-margin-top: 5px !default;
$pager-bigger-device-rtl-parentmsgbar-margin-top: 5px !default;
$pager-rtl-pagermsgbar-device-margin-top: 0 !default;
$pager-bigger-constant-margin-left: 16px !default;
$pager-rtl-last-content-icon: 'e238' !default;
$pager-rtl-first-content-icon: 'e235' !default;
$pager-rtl-prev-content-icon: 'e236' !default;
$pager-rtl-next-content-icon: 'e237' !default;
$pager-rtl-first-last-icon-hover-border-radius: 0 4px 4px 0 !default;
$pager-item-hover-border-width: 0 1px 0 0 !default;
$pager-item-hover-border-color: $pager-border-color !default;
$pager-bigger-current-item-hover-padding: $pager-bigger-current-item-padding !default;
$pager-numeric-icon-hover-padding: $pager-numeric-icon-padding !default;
$pager-bigger-rtl-activeitem-hover-padding:  $pager-bigger-rtl-activeitem-padding !default;
$pager-activeitem-hover-padding: $pager-activeitem-padding !default;
$pager-bigger-dropdown-margin-top: -31px !default;
$pager-rtl-nxtpage-margin: 0 !default;
$pager-disabled-icons-opacity: .3 !default;
$pager-bigger-dropdown-heigh: 40px !default;
$pager-external-msg-padding: 6px !default;
$pager-rtl-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
$pager-current-item-font-weight: normal !default;
$pager-skin: 'bootstrap-dark' !default;
$pager-container-border-radius: 4px !default;
$pager-bigger-tripledot-font-size: $pager-tripledot-font-size !default;
$pager-focus-bg-color: $grey-light !default;
$pager-focus-tripledot-padding: $pager-tripledot-padding !default;
$pager-focus-tripledot-line-height: 1 !default;
$pager-focus-active-box-shadow: 0 0 0 1px color.adjust($brand-primary, $lightness: 10%) inset !default;
$pager-focus-shadow: 0 0 0 1px color.adjust($brand-primary, $lightness: 10%) inset !default;
$pager-bigger-adaptive-pagermsgbar-margin-top: 2px !default;
$pager-bigger-adaptive-dropdown-margin: -1px 2px 0 4px !default;
$pager-bigger-adaptive-dropdown-min-width: 77px !default;
$pager-bigger-adaptive-constant-top: 8px !default;
$pager-rtl-adaptive-constant-top: 2px 10px 0 8px !default;
$pager-rtl-e-bigger-adaptive-dropdown-margin: 3px 4px 0 2px !default;
$pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top: 5px !default;
$pager-bigger-adaptive-pager-padding: 6px !default;
$pager-adaptive-pagermsgbar-margin-top: -4px !default;
$pager-adaptive-dropdown-margin: 1px 2px 0 4px !default;
$pager-rtl-adaptive-pagermsgbar-margin-top: 1px !default;
$pager-rtl-adaptive-dropdown-margin: 7px 4px 0 2px !default;
$pager-adaptive-constant-pagesizeall-top: 14px !default;
$pager-bigger-adaptive-constant-pagesizeall-top: 12px !default;
$pager-rtl-adaptive-constant-pagesizeall-top: 15px !default;
$pager-rtl-e-bigger-adaptive-constant-pagesizeall-top: 14px !default;

$pager-border-radius-4: 4px !default;
$pager-border-radius-5: 5px !default;

@mixin padding-bottom-right-top-styles($bottom, $right, $top) {
  padding-bottom: $bottom;
  padding-right: $right;
  padding-top: $top;
}

@mixin fontsize-padding-styles($fontsize, $padding) {
  font-size: $fontsize;
  padding: $padding;
}

@mixin textalign-width-styles($align, $width) {
  text-align: $align;
  width: $width;
}

@mixin margin-left-right($left, $right) {
  margin-left: $left;
  margin-right: $right;
}

@mixin border-left-width-styles($style, $width) {
  border-left-style: $style;
  border-left-width: $width;
}

@mixin border-right-width-styles($style, $width) {
  border-right-style: $style;
  border-right-width: $width;
}

@include export-module('pager-layout') {

  /*! Pager layout */
  #{&}.e-pager {
    border-style: $pager-border-type;
    border-width: 1px;
    display: inline-block;
    @include fontsize-padding-styles($pager-font-size, $pager-padding);
    white-space: normal;
    width: 100%;

    [class ^= 'e-'] {
      box-sizing: border-box;
    }

    .e-pager-default.e-hide,
    .e-pagesizes.e-hide,
    .e-hide {
      display: none;
    }

    div.e-parentmsgbar {
      float: right;
      @include padding-bottom-right-top-styles($pager-messagebar-padding-bottom, $pager-messagebar-padding-right, $pager-messagebar-padding-top);
      @if $pager-skin == 'tailwind' {
        line-height: 18px;
      }
      @if $pager-skin == 'fluent2' {
        line-height: 20px;
      }
      span.e-rightalign {
        text-align: right;
      }
    }

    .e-pagesizes {
      display: inline;
    }

    .e-pagerdropdown {
      display: inline-block;
      height: $pager-dropdown-height;
      @include margin-left-right($pager-dropdown-margin-left, $pager-dropdown-margin-right);
      margin-top: $pager-dropdown-margin-top;
      overflow: $pager-dropdown-overflow;
      vertical-align: middle;
      width: $pager-dropdown-width;
    }

    .e-pagerconstant {
      @if $pager-skin == 'fluent' {
        font-weight: 600;
      }
      display: inline-block;
      @if $pager-skin == 'tailwind' {
        line-height: 18px;
      }
      @if $pager-skin == 'fluent2' {
        line-height: 20px;
      }
      margin: $pager-constant-margin;
      overflow: hidden;
      width: auto;
    }

    .e-icons {
      font-size: $pager-icon-size;
    }

    .e-numericitem {
      @if $pager-skin == 'fluent2' {
        @include border-right-width-styles($pager-border-type, 0);
        margin-left: 1px;
        vertical-align: bottom;
      }
      @else {
        @include border-right-width-styles($pager-border-type, $pager-border-size);
      }
      display: inline-block;
      line-height: $pager-numeric-font-line-height;
      margin-right: $pager-numericitem-margin-right;
      min-width: $pager-numericitem-min-width;
      padding: $pager-numericitem-padding;
      text-align: center;
      @if $pager-skin == 'material3' {
        vertical-align: middle;
      }

      &.e-currentitem {
        @if $pager-skin == 'tailwind' {
          border: 1px solid $primary;
        }
      }

      &.e-currentitem,
      &.e-currentitem:hover {
        @if $pager-skin == 'tailwind' {
          padding: 3.5px 11px 6.2px 10px;
        }
        @else if $pager-skin == 'bootstrap5' {
          padding: 7.4px 10.5px 9.2px 9.5px;
        }
      }
    }

    &.e-mac-safari .e-numericitem {
      @if $pager-skin == 'fluent2' {
        vertical-align: top;
      }
    }

    div.e-pagermsgdiv {
      padding-right: 6px;
      padding-top: 4px;
      text-align: right;
    }

    .e-firstpagedisabled,
    .e-prevpagedisabled,
    .e-nextpagedisabled,
    .e-lastpagedisabled {
      opacity: $pager-disabled-icons-opacity;
    }

    .e-spacing,
    .e-numericitem:hover,
    .e-currentitem {
      border-radius: $pager-numericitem-border-radius;
      cursor: pointer;
      padding: $pager-numeric-icon-padding;
      text-decoration: none;
    }

    .e-currentitem {
      @if $pager-skin == 'fluent' {
        border-bottom: $pager-active-item-border-bottom;
      }
      @if $pager-skin == 'bootstrap5' {
        border: 3px solid $primary-light;
      }
      @if $pager-skin == 'material3' {
        border-radius: $pager-border-radius-4;
      }
      font-style: normal;
      font-variant: normal;
      font-weight: $pager-current-item-font-weight;
    }

    div,
    a {
      display: inline;
      user-select: none;
    }

    .e-icons::before {
      display: inline-block;
    }

    .e-pagercontainer {
      .e-firstpage,
      .e-prevpage,
      .e-firstpagedisabled,
      .e-prevpagedisabled,
      .e-nextpage,
      .e-lastpage,
      .e-nextpagedisabled,
      .e-lastpagedisabled {
        @if $pager-skin == 'fluent2' {
          border-radius: $pager-border-radius-5;
          @include border-right-width-styles($pager-border-type, 0);
          margin-left: 1px;
          &.e-focused {
            border-radius: $pager-border-radius-5;
          }
        }
        @else {
          @include border-right-width-styles($pager-border-type, $pager-border-size);
        }
        display: inline-block;
        margin-right: $pager-navigationicon-right;
        margin-top: $pager-navigationicon-top;
        min-width: 26px;
        padding: $pager-pagecontainer-icon-padding;
        @if $pager-skin == 'tailwind' {
          position: relative;
          top: 3px;

          &.e-focused {
            border: 0;
            border-right-style: none;
            padding: 8.5px 7px 9.5px;
          }
        }
        @else if $pager-skin == 'material3' {
          vertical-align: middle;
          &.e-focused {
            border-radius: $pager-border-radius-4;
          }
        }
        @else if $pager-skin == 'tailwind3' {
          vertical-align: sub;
        }
      }

      .e-nextpage.e-focused,
      .e-firstpage.e-focused  {
        @if $pager-skin == 'tailwind' {
          padding-right: 8px;
        }
      }

      .e-prevpage.e-focused {
        @if $pager-skin == 'tailwind' {
          padding-left: 7px;
          padding-right: 8px;
        }
      }

      .e-lastpage,
      .e-lastpagedisabled {
        border-right: $pager-last-border-size;
      }
    }

    .e-firstpage:hover,
    .e-prevpage:hover,
    .e-lastpage:hover,
    .e-nextpage:hover {
      cursor: pointer;
      text-decoration: none;
    }

    a.e-nextprevitemdisabled {
      display: none;
      @include margin-left-right($pager-border-size, $pager-border-size);
      padding-left: 5px;
      padding-right: 5px;
      text-decoration: none;
    }

    .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
    .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
      margin-left: $pager-next-icon-margin-left;
    }

    .e-pagercontainer {
      border-radius: $pager-container-border-radius;
      border-style: $pager-border-type;
      @if $pager-skin == 'fluent2' {
        border-width: 0;
      }
      @else {
        border-width: $pager-border-size;
      }
      display: inline-block;
      margin: $pager-container-margin;
      overflow: hidden;
    }

    .e-lastpage:hover {
      border-radius: $pager-last-page-hover-border-radius;
    }

    .e-firstpage:hover {
      border-radius: $pager-first-page-hover-border-radius;
    }

    .e-pagermessage,
    .e-pagerexternalmsg {
      display: block;
      margin: $pager-external-msg-padding;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .e-mfirst,
    .e-mprev,
    .e-mnext,
    .e-mlast {
      display: none;
    }

    .e-mprev {
      text-indent: -3px;
    }

    .e-mnext {
      text-indent: -2px;
    }

    /* stylelint-disable */
    .e-mfirst,
    .e-mprev,
    .e-mnext,
    .e-mlast {
      -webkit-tap-highlight-color: $pager-bg-color;
    }

    /* stylelint-enable */
    .e-pp,
    .e-np,
    .e-pp:hover,
    .e-np:hover {
      @include fontsize-padding-styles($pager-tripledot-font-size, $pager-tripledot-padding);
      font-weight: $pager-numeric-font-weight;
      letter-spacing: $pager-letter-spacing;
    }

    .e-np.e-focused,
    .e-pp.e-focused {
      line-height: $pager-focus-tripledot-line-height;
      padding: $pager-focus-tripledot-padding;
    }
    @if $pager-skin == 'material3' {
      &.e-rtl .e-np.e-focused,
      &.e-rtl .e-pp.e-focused {
        padding: $pager-focus-tripledot-padding;
      }
    }

    &.e-adaptive {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: $pager-bigger-adaptive-pager-padding;

      div.e-parentmsgbar {
        margin: 0 5px;
        margin-top: $pager-adaptive-pagermsgbar-margin-top;
        flex-grow: 1;
        min-width: 10px;
        white-space: nowrap;
      }
      .e-pagesizes {
        display: inline-flex;
        width: auto;
      }
      .e-pagerdropdown {
        margin: $pager-adaptive-dropdown-margin;
        width: $pager-bigger-adaptive-dropdown-min-width;
        min-width: $pager-bigger-adaptive-dropdown-min-width;
        order: 2;
        height: 40px;
        padding-right: 5px;
      }
      .e-pagerconstant {
        font-size: 12px;
        position: relative;
        top: $pager-bigger-adaptive-constant-top;
        order: 1;
        min-width: 52px;
        @if $pager-skin == 'tailwind' {
          max-height: 42px;
        }
        @else if $pager-skin == 'fluent2' {
          max-height: 32px;
        }
        @else {
          max-height: 34px;
        }
        @if $pager-skin == 'fluent2' {
          line-height: 16px;
        }
        margin: 0 8px 0 10px;
      }
      .e-pagerconstant.e-page-all {
        top: $pager-adaptive-constant-pagesizeall-top;
        text-align: center;
      }

      .e-mfirst,
      .e-mprev,
      .e-mnext,
      .e-mlast {
        padding: 1% 2%;
        width: 5%;
      }

      .e-mfirst,
      .e-mlast {
        width: calc(5% + 11px);
      }
    }

    @media (max-width: 769px) {
      @if $pager-skin != 'bootstrap5' {
        display: flex;
        align-items: center;
      }
      @if $pager-skin == 'fluent2' {
        padding: 11px 0;
      }
      @else {
        padding: 13px 0;
      }

      div.e-parentmsgbar {
        @include padding-bottom-right-top-styles(0, 0, 0);
        box-sizing: border-box;
        display: inline-block;
        float: initial;
        @include textalign-width-styles(center, calc(60% - 48px));
      }

      .e-pagesizes,
      .e-pagecountmsg,
      .e-pagercontainer {
        display: none;
      }

      .e-icons {
        font-size: $pager-mobile-icon-size;
      }

      .e-mfirst,
      .e-mprev,
      .e-mnext,
      .e-mlast {
        border: 0;
        box-sizing: border-box;
        display: inline-block;
        padding: 1% 5%;
      }

      .e-mfirst {
        margin-right: 4px;
        @include textalign-width-styles(right, calc(10% + 11px));
      }

      .e-mprev {
        margin: 0 4px;
        @include textalign-width-styles(right, 10%);
      }

      .e-mnext {
        margin: 0 4px;
        @include textalign-width-styles(left, 10%);
      }

      .e-mlast {
        margin-left: 4px;
        @include textalign-width-styles(left, calc(10% + 11px));
      }
    }

    &.e-rtl {
      .e-numericitem {
        &.e-currentitem,
        &.e-currentitem:hover {
          @if $pager-skin == 'tailwind' {
            padding: 3.5px 11px 4px 10px;
          }
          @else if $pager-skin == 'bootstrap5' {
            padding: 8px 10.5px 8.5px 9.5px;
          }
        }
        &.e-currentitem {
          @if $pager-skin == 'tailwind' {
            border-left-color: $primary;
            @include border-left-width-styles(solid, 1px);
          }
          @else if $pager-skin == 'bootstrap5' {
            border-left-color: $primary-light;
            @include border-left-width-styles(solid, 3px);
          }
        }
      }
      direction: rtl;
      .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
      .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
        @include margin-left-right(0, $pager-rtl-nxtpage-margin);
        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
          @include border-left-width-styles(solid, 1px);
          @include border-right-width-styles(solid, 1px);
        }
      }

      & .e-pagercontainer,
      & div,
      & a {
        float: initial;
      }

      & .e-parentmsgbar {
        float: left;
        margin-left: $pager-rtl-parentmsgbar-margin-left;
        padding-top: $pager-rtl-parentmsgbar-padding-top;
      }

      & .e-pagerdropdown {
        margin: $pager-rtl-pagerdropdown-margin;
      }

      & .e-pagerconstant {
        margin: $pager-rtl-pagerconstant-margin-top;
      }

      & .e-pagerexternalmsg {
        float: none;
      }

      & .e-pagercontainer {
        float: none;
        margin: $pager-container-rtl-margin;
        padding: 0;
      }

      & .e-firstpage,
      & .e-prevpage,
      & .e-firstpagedisabled,
      & .e-prevpagedisabled,
      & .e-nextpage,
      & .e-lastpage,
      & .e-nextpagedisabled,
      & .e-lastpagedisabled {
        padding: $pager-rtl-navigation-icon-padding;
      }

      & .e-next.e-icons.e-icon-next.e-nextpage.e-focused {
        @if $pager-skin == 'tailwind' {
          border: 0;
          padding: 6.5px 8px 6px;
        }
      }

      & .e-prevpage.e-focused {
        @if $pager-skin == 'tailwind' {
          padding: 6.5px 8px 6px 7px;
        }
      }

      & .e-lastpage.e-focused,
      & .e-firstpage.e-focused {
        @if $pager-skin == 'tailwind' {
          padding: 6.5px 7px 6px;
        }
      }

      & .e-firstpage::before,
      & .e-firstpage:hover,
      & .e-firstpagedisabled::before {
        content: '\e701';
      }

      & .e-prevpage::before,
      & .e-prevpage:hover,
      & .e-prevpagedisabled::before {
        content: '\e848';
      }

      & .e-nextpage::before,
      & .e-nextpage:hover,
      & .e-nextpagedisabled::before {
        content: '\e84b';
      }

      & .e-lastpage::before,
      & .e-lastpage:hover,
      & .e-lastpagedisabled::before {
        content: '\e716';
      }

      & .e-nextpage,
      & .e-nextpagedisabled,
      & .e-prevpage,
      & .e-prevpagedisabled,
      & .e-firstpage,
      & .e-firstpagedisabled {
        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' or $pager-skin == 'fluent2' {
          @include border-left-width-styles(none, 0);
        }
        @else {
          @include border-left-width-styles($pager-border-type, $pager-border-size);
        }
      }

      & .e-nextpage,
      & .e-nextpagedisabled,
      & .e-prevpage,
      & .e-prevpagedisabled {
        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
          @include border-left-width-styles(none, 0);
        }
        @else {
          @include border-right-width-styles(none, 0);
        }
      }

      & .e-firstpage,
      & .e-firstpagedisabled {
        border-right: medium none;
      }

      & .e-firstpage:hover {
        border-radius: $pager-rtl-first-last-icon-hover-border-radius;
      }

      & .e-lastpage:hover {
        border-radius: $pager-rtl-first-last-icon-hover-border-radius;
      }

      & .e-numericcontainer {
        float: none;
      }

      & .e-numericitem {
        @if $pager-skin == 'tailwind' or $pager-skin == 'bootstrap5' {
          @if $pager-skin == 'bootstrap5' {
            border-right-style: solid;
          }
          @else {
            @include border-left-width-styles(none, 0);
            @include border-right-width-styles(solid, 1px);
          }
        }
        @else {
          @if $pager-skin == 'fluent2' {
            @include border-left-width-styles(none, 0);
          }
          @else {
            @include border-left-width-styles($pager-border-type, $pager-border-size);
            @include border-right-width-styles(none, 0);
          }
        }
        min-width: 26px;
      }

      & .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
      & .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
        @include margin-left-right(0, $pager-next-icon-margin-left);
      }

      & .e-spacing,
      & .e-numericitem:hover,
      & .e-currentitem {
        margin: $pager-rtl-numeric-margin;
        padding: $pager-activeitem-padding;
      }

      & .e-pp,
      & .e-np,
      & .e-pp:hover,
      & .e-np:hover {
        margin-top: $pager-tripledot-rtl-margin-top;
        padding: $pager-tripledot-rtl-padding;
      }

      & .e-np.e-focused,
      & .e-pp.e-focused {
        @if $pager-skin == 'tailwind' {
          padding: $pager-focus-tripledot-padding;
        }
      }

      &.e-adaptive.e-rtl {
        div.e-parentmsgbar {
          margin: 0 5px;
          margin-top: $pager-rtl-adaptive-pagermsgbar-margin-top;
          padding-top: 0;
        }
        div.e-pagerconstant {
          margin: $pager-rtl-adaptive-constant-top;
        }
        div.e-pagerconstant.e-page-all {
          top: $pager-rtl-adaptive-constant-pagesizeall-top;
        }
        div.e-pagerdropdown {
          min-width: 92px;
          margin: $pager-rtl-adaptive-dropdown-margin;
          padding: 0 0 0 5px;
        }
        .e-mfirst,
        .e-mprev,
        .e-mnext,
        .e-mlast {
          padding: 1% 2%;
          width: 5%;
        }

        .e-mfirst,
        .e-mlast {
          width: calc(5% + 11px);
        }
      }

      @media (max-width: 769px) {
        .e-mfirst,
        .e-mprev,
        .e-mnext,
        .e-mlast {
          border: 0;
        }

        &.e-rtl div.e-parentmsgbar {
          float: initial;
          margin-left: 0;
          margin-top: $pager-rtl-pagermsgbar-device-margin-top;
          padding-top: 0;
        }

        .e-parentmsgbar {
          float: right;
        }
      }
    }

    &.sf-pager {
      .e-pagercontainer {
        font-size: 0;
        .e-first,
        .e-prev,
        .e-next,
        .e-last {
          font-size: $pager-icon-size;
        }
        .e-firstpage,
        .e-prevpage,
        .e-firstpagedisabled,
        .e-prevpagedisabled,
        .e-nextpage,
        .e-lastpage,
        .e-nextpagedisabled,
        .e-lastpagedisabled {
          @if $pager-skin == 'tailwind3' {
            padding: 7.1px 8.6px 8.5px;
          }
        }
      }
      .e-spacing {
        @if $pager-skin == 'tailwind3' {
          padding: 7.6px 11.85px 7.8px 11.8px;
        }
      }

      .e-numericcontainer a {
        font-size: $pager-font-size;
      }

      .e-link,
      .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
        margin-left: 0;
      }
    }
  }
}

@mixin color-opacity-styles($color, $opacity) {
  color: $color;
  opacity: $opacity;
}

@mixin background-color-opacity-styles($background, $color, $opacity) {
  background: $background;
  @include color-opacity-styles($color, $opacity);
}

@include export-module('pager-theme') {

  /*! Pager theme */
  #{&}.e-pager {
    @if $pager-skin == 'material3' {
      border-color: rgba($border-light);
    }
    @else if $pager-skin == 'fluent2' {
      border-color: $border-light;
    }
    @else {
      border-color: $pager-border-color;
    }

    @include background-color-opacity-styles($pager-bg-color, $pager-color, $pager-content-opacity);

    div.e-icons.e-pager-default {
      color: $pager-icon-color;
    }

    div.e-icons.e-pager-default.e-focused {
      @if $pager-skin == 'fluent2' {
        color: $pager-hover-color;
      }
    }

    div.e-icons.e-pager-default:not(.e-numericitem):hover {
      @if $pager-skin == 'fluent2' {
        color: $pager-hover-color;
        background-color: $pager-hover-bg-color;
      }
    }

    div.e-icons.e-disable {
      color: $pager-numeric-txt-bg-color;
    }

    .e-pager-default:hover {
      @include background-color-opacity-styles($pager-hover-bg-color, $pager-hover-color, $pager-content-opacity);
      @if $pager-skin == 'material3' {
        border-radius: $pager-border-radius-4;
      }
    }

    .e-parentmsgbar {
      font-weight: $pager-pagermessage-weight;
    }

    .e-spacing {
      @include color-opacity-styles($page-content-color, $pager-content-opacity);
    }

    .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
      background: $pager-numeric-hover-bg-color;
    }

    .e-numericitem:hover {
      @include color-opacity-styles($pager-hover-color, $pager-content-opacity);
    }

    .e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover {
      background-color: $pager-number-hover-bg-color;
      opacity: 1;
    }

    .e-numericitem {
      background: $pager-bg-color;
      color: $page-content-color;
    }

    .e-prevpagedisabled,
    .e-prevpage,
    .e-nextpage,
    .e-nextpagedisabled,
    .e-lastpagedisabled,
    .e-lastpage,
    .e-firstpage,
    .e-firstpagedisabled {
      background-color: $pager-bg-color;
      color: $pager-icon-color;
    }

    .e-prevpagedisabled,
    .e-nextpagedisabled,
    .e-lastpagedisabled,
    .e-firstpagedisabled {
      @if $pager-skin == 'fluent2' {
        background-color: $content-bg-color-disabled;
      }
    }

    @media (max-width: 769px) {
      .e-prevpagedisabled,
      .e-nextpagedisabled,
      .e-lastpagedisabled,
      .e-firstpagedisabled {
        @if $pager-skin == 'fluent2' {
          background-color: $pager-bg-color;
        }
      }
    }

    .e-lastpage,
    .e-firstpage {
      background-color: transparent;
    }

    .e-pagercontainer {
      background-color: $pager-bg-color;
      border-color: $pager-border-color;
    }

    .e-numericitem,
    .e-firstpage,
    .e-prevpage,
    .e-firstpagedisabled,
    .e-prevpagedisabled,
    .e-nextpage,
    .e-lastpage,
    .e-nextpagedisabled,
    .e-lastpagedisabled {
      border-right-color: $pager-border-color;
    }

    .e-currentitem,
    .e-currentitem:hover {
      @if $pager-skin == 'bootstrap5' {
        border-right-color: $primary-light;
      }
      @if $pager-skin == 'material3' {
        border-radius: $pager-border-radius-4;
      }
      @include background-color-opacity-styles($pager-active-bg-color, $pager-active-color, 1);
    }

    .e-numericitem.e-focused,
    .e-first.e-focused,
    .e-prev.e-focused,
    .e-next.e-focused,
    .e-last.e-focused,
    .e-mfirst.e-focused,
    .e-mprev.e-focused,
    .e-mnext.e-focused,
    .e-mlast.e-focused {
      background-color: $pager-focus-bg-color;
    }

    .e-currentitem.e-numericitem.e-focused {
      background: $pager-active-bg-color;
      box-shadow: $pager-focus-active-box-shadow;
    }

    .e-focused {
      box-shadow: $pager-focus-shadow;
    }

    @media (max-width: 590px) {
      .e-pager-default:hover {
        @include background-color-opacity-styles($pager-bg-color, $pager-mhover-color, $pager-content-opacity);
      }
    }

    &.e-rtl {
      & .e-numericitem,
      & .e-firstpage,
      & .e-prevpage,
      & .e-firstpagedisabled,
      & .e-prevpagedisabled,
      & .e-nextpage,
      & .e-lastpage,
      & .e-nextpagedisabled,
      & .e-lastpagedisabled,
      & .e-nextpage,
      & .e-nextpagedisabled {
        border-left-color: $pager-border-color;
      }
    }
  }
}

@include export-module('pager-bootstrap-dark-icons') {

  /* !componenticons */

  #{&}.e-pager,
  .e-grid-menu {

    .e-icon-last::before {
      content: '\e235';
    }

    .e-icon-first::before {
      content: '\e238';
    }

    .e-icon-prev::before {
      content: '\e237';
    }

    .e-icon-next::before {
      content: '\e236';
    }

    &.e-rtl {
      & .e-icon-last.e-lastpage::before,
      & .e-icon-last.e-lastpage:hover,
      & .e-icon-last.e-lastpagedisabled::before {
        content: '\e238';
      }

      & .e-icon-first.e-firstpage::before,
      & .e-icon-first.e-firstpage:hover,
      & .e-icon-first.e-firstpagedisabled::before {
        content: '\e235';
      }

      & .e-icon-prev.e-prevpage::before,
      & .e-icon-prev.e-prevpage:hover,
      & .e-icon-prev.e-prevpagedisabled::before {
        content: '\e236';
      }

      & .e-icon-next.e-nextpage::before,
      & .e-icon-next.e-nextpage:hover,
      & .e-icon-next.e-nextpagedisabled::before {
        content: '\e237';
      }
    }
  }
}

@include export-module('pager-bigger') {

  /*! Pager bigger */
  .e-bigger  #{&}.e-pager,
  #{&}.e-pager.e-bigger {
    font-size: $pager-bigger-font-size;
    padding: $pager-bigger-padding;
    div.e-icons:not(.e-check) {
      font-size: $pager-bigger-icon-font-size;
    }

    div.e-parentmsgbar {
      padding-bottom: $pager-bigger-messagebar-padding-bottom;
      padding-right: $pager-bigger-messagebar-padding-right;
      padding-top: $pager-bigger-messagebar-padding-top;
      @if $pager-skin == 'tailwind' or $pager-skin == 'fluent2' {
        line-height: 22px;
      }
    }

    &:not(.e-adaptive) {
      .e-pagerdropdown {
        height: $pager-bigger-dropdown-heigh;
        margin: $pager-bigger-dropdown-margin;
        margin-top: $pager-bigger-dropdown-margin-top;
        width: $pager-bigger-dropdown-width;
      }
    }

    .e-pagercontainer {
      margin: $pager-bigger-pagercontainer-margin;
      .e-firstpage,
      .e-prevpage,
      .e-firstpagedisabled,
      .e-prevpagedisabled,
      .e-nextpage,
      .e-lastpage,
      .e-nextpagedisabled,
      .e-lastpagedisabled {
        padding: $pager-bigger-pagecontainer-icon-padding;
      }
    }

    .e-pagerconstant {
      margin-bottom: $pager-bigger-dropdown-constant-margin;
      margin-left: $pager-bigger-constant-margin-left;
      @if $pager-skin == 'tailwind' {
        line-height: 22px;
      }
    }

    @media (max-width: 769px) {
      padding: $pager-device-padding;
      &.e-adaptive .e-icons {
        @if $pager-skin == 'fluent2' {
          font-size: 20px;
        }
      }
      &.e-rtl div.e-parentmsgbar {
        margin-right: 0;
      }

      div.e-parentmsgbar {
        padding: $pager-device-messabar-padding;
        @if $pager-skin == 'material3' {
          vertical-align: top;
        }
      }
    }

    .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
    .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
      margin-left: $pager-bigger-nexticon-marign-left;
    }

    .e-numericitem {
      margin: $pager-bigger-numeric-item-margin;
      @if $pager-skin == 'tailwind' or $pager-skin == 'fluent2' {
        line-height: 22px;
      }
      &.e-currentitem,
      &.e-currentitem:hover {
        @if $pager-skin == 'tailwind' {
          padding: 6px 14px 5.5px 13px;
        }
        @else if $pager-skin == 'bootstrap5' {
          padding: 9.7px 13px 10.4px 12px;
        }
      }
    }

    .e-pp.e-spacing,
    .e-np.e-spacing,
    .e-pp.e-spacing:hover,
    .e-np.e-spacing:hover {
      padding: $pager-bigger-letter-spacing;
    }

    .e-np.e-spacing.e-focused,
    .e-pp.e-spacing.e-focused {
      @if $pager-skin == 'tailwind' {
        padding: 7px 11.8px 6.5px;
      }
    }

    .e-spacing,
    .e-numericitem:hover,
    .e-currentitem {
      border-radius: $pager-bigger-current-item-border-radius;
      padding: $pager-bigger-current-item-padding;
    }

    &.e-rtl {
      .e-spacing,
      .e-numericitem:hover,
      .e-currentitem {
        margin: $pager-bigger-numeric-item-margin;
        @if $pager-skin == 'material3' {
          padding: $pager-bigger-current-item-padding;
        }
        @if $pager-skin == 'tailwind3' {
          padding: 11.4px 15.48px 11.5px 15.1px;
        }
        @else {
          padding: $pager-bigger-letter-spacing;
        }
      }

      .e-pp.e-spacing,
      .e-np.e-spacing,
      .e-pp.e-spacing:hover,
      .e-np.e-spacing:hover {
        @if $pager-skin == 'tailwind3' {
          padding-top: 13px;
        }
      }

      & .e-pagerdropdown {
        margin: $pager-rtl-pagerdropdown-bigger-margin;
      }

      & .e-pagerconstant {
        margin: $pager-rtl-pagerconstant-bigger-margin-top;
      }

      .e-pagercontainer {
        margin: $pager-bigger-new-container-rtl-margin;

        .e-prevpage.e-focused {
          @if $pager-skin == 'tailwind' {
            padding: 10px 11px 9px 10px;
          }
        }

        .e-firstpage.e-focused,
        .e-lastpage.e-focused {
          @if $pager-skin == 'tailwind' {
            padding: 10px 10px 9.5px;
          }
        }

        .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default.e-focused {
          @if $pager-skin == 'tailwind' {
            padding: 10px 11px 9.5px;
          }
        }
      }

      .e-next.e-icons.e-icon-next.e-nextpagedisabled.e-disable,
      .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default {
        margin-left: 0;
        margin-right: $pager-bigger-rtl-nexticon-marign-right;
      }

      div.e-parentmsgbar {
        margin-left: $pager-bigger-rtl-parentmsgbar-margin-left;
        margin-top: $pager-bigger-rtl-parentmsgbar-margin-top;
      }

      @media (max-width: 769px) {
        div.e-parentmsgbar {
          margin-left: 0;
          margin-top: $pager-rtl-pagermsgbar-device-margin-top;
        }
      }

      @media (max-width: 769px) {
        div.e-parentmsgbar {
          margin-left: 0;
          margin-top: $pager-rtl-pagermsgbar-device-margin-top;
        }
      }

      .e-numericitem.e-currentitem,
      .e-numericitem.e-currentitem:hover {
        @if $pager-skin == 'tailwind' {
          padding: 6px 14px 6px 13px;
        }
        @else if $pager-skin == 'bootstrap5' {
          padding: 11.3px 13px 10.4px 12px;
        }
        @else if $pager-skin == 'material3' {
          padding: 10px 15px;
        }
      }

      .e-np.e-spacing.e-focused,
      .e-pp.e-spacing.e-focused {
        @if $pager-skin == 'tailwind' {
          padding: 13px 13px 11px 12px;
        }
      }

      & .e-pp.e-spacing.e-numericitem,
      & .e-np.e-spacing.e-numericitem,
      & .e-pp.e-spacing.e-numericitem:hover,
      & .e-np.e-spacing.e-numericitem:hover {
        font-size: $pager-rtl-bigger-tripledot-font-size;
        margin-top: $pager-tripledot-rtl-bigger-margin-top;
        @if $pager-skin == 'tailwind' {
          padding: 7px 12.6px;
        }
        @else if $pager-skin == 'bootstrap5' {
          padding: 14px 14px 13px;
        }
        @else if $pager-skin == 'material3' {
          &.e-focused {
            padding: 10px 12px;
          }
          & {
            padding: 10px 12px;
          }
        }
      }

      &.e-adaptive {
        div.e-parentmsgbar {
          margin-top: $pager-rtl-e-bigger-adaptive-pagermsgbar-margin-top;
        }
        div.e-pagerdropdown {
          margin: $pager-rtl-e-bigger-adaptive-dropdown-margin;
        }
        div.e-pagerconstant.e-page-all {
          top: $pager-rtl-e-bigger-adaptive-constant-pagesizeall-top;
        }
      }
    }

    .e-pagercontainer {
      .e-firstpage,
      .e-prevpage,
      .e-firstpagedisabled,
      .e-prevpagedisabled,
      .e-nextpage,
      .e-lastpage,
      .e-nextpagedisabled,
      .e-lastpagedisabled {
        margin-right: $pager-bigger-pagercontainer-icons-marign-right;
        @if $pager-skin == 'fluent2' {
          margin-left: 2px;
        }
        @if $pager-skin == 'tailwind' {
          margin-top: -4px;
        }
        padding: $pager-bigger-pagercontainer-icons-padding;
      }

      .e-next.e-icons.e-icon-next.e-nextpage.e-pager-default.e-focused,
      .e-prevpage.e-focused,
      .e-firstpage.e-focused {
        @if $pager-skin == 'tailwind' {
          padding: 10px 11px 9.5px 10px;
        }
      }

      .e-lastpage.e-focused {
        @if $pager-skin == 'tailwind' {
          padding: 10px 10px 9.5px;
        }
      }
    }

    &.e-rtl .e-pagercontainer {
      .e-firstpage,
      .e-prevpage,
      .e-firstpagedisabled,
      .e-prevpagedisabled,
      .e-nextpage,
      .e-lastpage,
      .e-nextpagedisabled,
      .e-lastpagedisabled {
        @if $pager-skin == 'tailwind3' {
          padding: 11.7px 11.6px 8.7px;
        }
      }
    }
    .e-pp,
    .e-np,
    .e-pp:hover,
    .e-np:hover {
      font-size: $pager-bigger-tripledot-font-size;
    }
    &.e-adaptive {
      div.e-parentmsgbar {
        margin-top: $pager-bigger-adaptive-pagermsgbar-margin-top;
      }
      .e-pagerdropdown {
        margin: $pager-bigger-adaptive-dropdown-margin;
        height: 40px;
      }
      .e-pagerconstant.e-page-all {
        top: $pager-bigger-adaptive-constant-pagesizeall-top;
      }
      .e-pagerconstant {
        margin: 0 8px 0 10px;
      }
    }
  }

  .e-bigger .e-responsive  #{&}.e-pager,
  .e-responsive #{&}.e-pager.e-bigger {
    div.e-icons {
      @if $pager-skin == 'material3' {
        border-radius: $pager-border-radius-4;
      }
    }
    &.e-adaptive {
      .e-firstpagedisabled,
      .e-prevpagedisabled,
      .e-nextpagedisabled,
      .e-lastpagedisabled {
        @if $pager-skin == 'fluent2' {
          background-color: transparent;
        }
      }
    }
  }

  .e-bigger  #{&}.sf-pager,
  #{&}.sf-pager.e-bigger {
    .e-pagercontainer {
      .e-firstpage,
      .e-prevpage,
      .e-firstpagedisabled,
      .e-prevpagedisabled,
      .e-nextpage,
      .e-lastpage,
      .e-nextpagedisabled,
      .e-lastpagedisabled {
        @if $pager-skin =='tailwind3' {
          padding: 10.3px 11.6px 12.5px;
        }
      }
    }

    .e-spacing,
    .e-currentitem,
    .e-numericitem:hover {
      @if $pager-skin =='tailwind3' {
        padding: 14.5px 15.48px 11.8px 15.1px;
      }
    }
  }
}

$grid-xl-rtl-radio-padding-left: 0 !default;
$grid-xl-rtl-radio-padding-right: 25px !default;
$grid-autofill-color: $brand-primary !default;
$grid-checkbox-padding-topbottom: 8px !default;
$grid-checkbox-content-padding-left: 7px !default;
$grid-rtl-checkbox-content-padding-left: 15px !default;
$grid-bigger-checkbox-padding-topbottom: 9px !default;
$grid-bigger-checkbox-filter-min-height: 360px !default;
$grid-bigger-checkbox-content-padding-left: 9.75px !default;
$grid-rtl-bigger-checkbox-content-padding-left: 18.75px !default;
$grid-checkbox-filter-min-height: 338px !default;
$grid-xlfl-fieldset-padding: 9px !default;
$grid-xlfltd-padding: 11.25px !default;
$grid-xlfltable-border-spacing: 0 !default;
$grid-xlfl-dropdown-padding-right: 11.25px !default;
$grid-xlfl-min-height: 318px !default;
$grid-exlfltr-ctxtmnu-max-height: 298px !default;
$grid-bigger-exlfltr-ctxtmnu-max-height: 355px !default;
$grid-xlfl-li-left-padding: 25px !default;
$grid-xlfl-li-icon-margin-right: 10px !default;
$grid-xlfl-dlg-padding-bottom: 5px !default;
$grid-xlfltd-radio-mtcase-padding: 12px !default;
$grid-xlfl-fieldset-font-size: 13px !default;
$grid-xlfl-dlgfields-font-size: 15px !default;
$grid-xlfl-li-height: 36px !default;
$grid-xl-radio-padding-left: 25px !default;
$grid-xlfl-radiodiv-width: 120px !default;
$grid-bigger-xlfl-li-height: 40px !default;
$grid-bigger-xlfl-fieldset-font-size: 14px !default;
$grid-bigger-xlfl-dlgfields-font-size: 16px !default;
$grid-bigger-xlfltd-radio-mtcase-padding: 5px !default;
$grid-bigger-xlfl-dlg-padding-bottom: 10px !default;
$grid-bigger-xlfl-li-icon-margin-right: 13px !default;
$grid-bigger-xlfl-li-left-padding: 26px !default;
$grid-bigger-xlfl-min-height: 362px !default;
$grid-bigger-xlfl-fieldset-padding: 12px !default;
$grid-bigger-xlfltable-border-spacing: 0 !default;
$grid-bigger-xlfltd-padding: 15px !default;
$grid-bigger-xlfl-radio-margin-left: 18px !default;
$grid-bigger-xlfl-dropdown-padding-right: 15px !default;
$grid-bigger-xlfl-radiodiv-width: 141px !default;
$grid-xlfl-radio-margin-left: 2px !default;
$grid-xl-radio-padding-right: 9px !default;
$grid-bigger-xl-radio-padding-left: 27px !default;
$grid-bigger-xl-radio-padding-right: 6px !default;
$grid-checkboxfiltertext-width: 150px !default;
$grid-xl-match-margin-left: 6px !default;
$grid-bigger-xl-match-margin-left: 8px !default;
$grid-column-chooser-footdiv: 2px 0 0 !default;
$grid-columnchooser-footer-border-color: rgba($grey-e6, .12) !default;
$grid-columnchooser-footer-border-opacity: 1 !default;
$grid-filtered-color: $brand-primary !default;
$sfgrid-xlfl-dlg-padding: 15px !default;
$grid-excel-filter-separator: 0 !default;
$grid-dialog-footer-color: $grey !default;
$grid-xlfl-dlg-content-top-padding: 6px !default;
$grid-xlfl-context-menu-border-radious: 5px 5px 0 0 !default;
$grid-excel-filter-bottom-padding: 0 !default;
$grid-xlfl-li-icon-margin-arrow-icon: 15px !default;
$grid-bigger-xlfl-li-icon-margin-arrow-icon: 0 !default;
$grid-xl-radio-margin-top: 0 !default;
$grid-xlfl-skin: 'bootstrap' !default;

$grid-border-radius-0: 0 !default;

@mixin padding-styles($left, $right) {
  padding-left: $left;
  padding-right: $right;
}

@mixin height-styles($height, $line-height) {
  height: $height;
  line-height: $line-height;
}

@mixin padding-position-styles {
  padding-bottom: 4px;
  position: static;
}

@include export-module('excel-filter-layout') {

  /*! Excel-Filter layout */
  .sf-grid .e-excelfilter {
    &.e-dialog .e-dlg-content {
      padding-left: 0;
      padding-right: 0;
    }
    .e-dlg-content {
      overflow: visible;
      padding: 0;
      @if $theme-name == 'Material3-dark' or $theme-name == 'tailwind3-dark' or $theme-name == 'fluent-dark'{
        background: unset;
      }
    }

    .e-searchcontainer {
      padding: $sfgrid-xlfl-dlg-padding;
      padding-top: 4px;
      @include padding-styles($grid-checkbox-content-padding-left, 24px);
    }

    &.e-rtl{
      .e-searchcontainer {
        padding: $sfgrid-xlfl-dlg-padding;
        padding-top: 4px;
        @include padding-styles($grid-rtl-checkbox-content-padding-left, 0);
      }
      .e-checkbox-wrapper .e-frame + .e-label {
        margin-left: 0;
        margin-right: 8px;
      }
    }

    .e-contextmenu-container {
      &.e-sfcontextmenu {
        display: inline-block;
        position: relative;
        width: 100%;
        .e-ul {
          position: absolute;
          .e-menu-item .e-menu-icon {
            @include height-styles(26px, 26px);
          }
          .e-menu-item:not(.e-separator) {
            @include height-styles(36px, 36px);
          }
          .e-separator {
            height: auto;
          }
        }
      }
      ul .e-menu-item .e-caret {
        margin-right: 24px;
        @if $grid-xlfl-skin == 'fluent2' or $grid-xlfl-skin == 'fluent2-dark' or $grid-xlfl-skin == 'bootstrap5' or $grid-xlfl-skin == 'bootstrap5-dark' or $grid-xlfl-skin == 'bootstrap4'or $grid-xlfl-skin == 'tailwind' or $grid-xlfl-skin == 'tailwind3' or $grid-xlfl-skin == 'tailwind3-dark' {
          line-height: $grid-xlfl-li-height;
          padding: 0;
        }
      }
    }

    .e-searchbox {
      padding-left: 8px;
    }
  }

  .sf-grid-dlg.e-xlflmenu .e-xlfl-radiodiv {
    width: unset;
  }

  #{&}.e-xlflmenu {
    min-height: $grid-xlfl-min-height;

    .e-xlfl-dlgfields {
      font-size: $grid-xlfl-dlgfields-font-size;
      @if $grid-xlfl-skin == 'material3' {
        padding-top: 12px;
      }
      @if $grid-xlfl-skin == 'tailwind3' {
        color: $content-text-color;
      }
    }

    .e-xlfl-fieldset {
      font-size: $grid-xlfl-fieldset-font-size;
      padding-top: $grid-xlfl-fieldset-padding;
      @if $grid-xlfl-skin == 'tailwind3' {
        color: $content-text-color;
      }
    }

    .e-responsive-dialog & table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-optr,
    .e-responsive-dialog & table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-value {
      @if $grid-xlfl-skin == 'material3' {
        padding-top: 16px;
      }
    }

    table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-optr,
    table.e-xlfl-table tr.e-xlfl-fields:nth-child(2) td.e-xlfl-value {
      @if $grid-xlfl-skin == 'material3' {
        padding-top: 0;
      }
    }

    .e-xlfl-optr,
    .e-xlfl-value {
      padding-top: $grid-xlfltd-padding;
    }

    .e-xlfl-radio,
    .e-xlfl-mtcase {
      padding-top: $grid-xlfltd-radio-mtcase-padding;
    }

    .e-xlfl-optr:first-child {
      padding-right: $grid-xlfl-dropdown-padding-right;
    }

    .e-xlfl-table {
      border-spacing: $grid-xlfltable-border-spacing;
      table-layout: fixed;
      width: 100%;
    }

    .e-radio + label .e-label {
      margin-top: $grid-xl-radio-margin-top;
      @include padding-styles($grid-xl-radio-padding-left, $grid-xl-radio-padding-right);
    }

    .e-xlfl-matchcasediv .e-checkbox-wrapper {
      .e-frame + .e-label {
        @if $grid-xlfl-skin == 'material3' {
          max-width: none;
        }
      }
    }

    .e-checkbox-wrapper {
      .e-frame + .e-label {
        margin-bottom: 1px;
        margin-left: $grid-xl-match-margin-left;
        @if $grid-xlfl-skin == 'fluent2' {
          margin-bottom: 7px;
        }
        @if $grid-xlfl-skin == 'tailwind3' {
          margin-bottom: 2px;
        }
      }

      .e-frame {
        margin-bottom: 1px;
        @if $grid-xlfl-skin == 'fluent2' {
          margin-bottom: 8px;
        }
      }
    }

    .e-dlg-content {
      padding-bottom: $grid-xlfl-dlg-padding-bottom;
    }

    .e-xlfl-radiodiv {
      width: $grid-xlfl-radiodiv-width;
    }

    .e-xlfl-matchcasediv {
      margin-left: 0;
      margin-right: 13px;
    }
  }

  .e-xlfl-radio-or,
  .e-xlfl-matchcasediv {
    margin-left: $grid-xlfl-radio-margin-left;
  }

  .e-emptyicon {
    opacity: 0;
  }

  #{&}.e-xlflmenu.e-rtl {
    .e-xlfl-optr {
      @include padding-styles($grid-xlfl-dropdown-padding-right, 0);
    }

    .e-radio + label .e-label {
      @include padding-styles($grid-xl-rtl-radio-padding-left, $grid-xl-rtl-radio-padding-right);
    }

    .e-xlfl-radio-or {
      margin-left: 0;
      margin-right: 13px;
    }
  }

  #{&}.e-excelfilter {
    .e-checkboxlist {
      height: 200px;
      margin-top: 5px;
      min-height: 160px;
      overflow-y: auto;
      @if $grid-xlfl-skin == 'fluent2' {
        margin-left: -12px;
      }
    }

    .e-checkboxfiltertext {
      width: $grid-checkboxfiltertext-width;
      word-break: normal;
    }

    .e-responsive-dialog & .e-checkboxfiltertext {
      @if $grid-xlfl-skin == 'material3' {
        width: 180px;
      }
    }

    .e-chk-hidden {
      -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
      height: 1px;
      opacity: 0;
      width: 1px;
    }

    .e-contextmenu-wrapper ul li,
    .e-contextmenu-container ul li {
      @if $grid-xlfl-skin == 'fluent2' {
        padding: 0 12px;
      }
      @include height-styles($grid-xlfl-li-height, $grid-xlfl-li-height);
      .e-menu-icon {
        @include height-styles($grid-xlfl-li-height, $grid-xlfl-li-height);
        margin-right: $grid-xlfl-li-icon-margin-right;
      }
    }

    .e-contextmenu-wrapper ul .e-menu-item .e-caret {
      @include height-styles($grid-xlfl-li-height, $grid-xlfl-li-height);
    }

    .e-contextmenu-wrapper ul,
    .e-contextmenu-container ul:not(.e-ul) {
      border: 0;
      border-radius: $grid-xlfl-context-menu-border-radious;
      box-shadow: none;
      max-width: 300px;
      @include padding-position-styles;
      @if $grid-xlfl-skin == 'fluent2' {
        background-color: $content-bg-color;
      }
    }

    .e-dlg-content {
      @if $grid-xlfl-skin == 'material3' {
        background: $grid-dialog-footer-color;
      }
      @else {
        background-color: $grid-dialog-footer-color;
      }
      padding-top: 0;
      padding-top: $grid-xlfl-dlg-content-top-padding;
    }

    .e-searchbox,
    .e-contextmenu-wrapper,
    .e-contextmenu-wrapper ul {
      display: block;
    }

    .e-contextmenu-wrapper ul {
      @include padding-position-styles;
      @if $grid-xlfl-skin == 'fluent2' {
        padding: 4px 0;
      }
      li .e-contextmenu-container ul li {
        @include height-styles($grid-xlfl-li-height, $grid-xlfl-li-height);
      }
      .e-menu-item .e-caret {
        @include height-styles($grid-xlfl-li-height, $grid-xlfl-li-height);
        margin-right: $grid-xlfl-li-icon-margin-arrow-icon;
        @if $grid-xlfl-skin == 'fluent2' {
          margin-top: -3px;
          margin-right: 17px;
        }
        @if $grid-xlfl-skin == 'tailwind3' {
          margin-top: 1px;
        }
        @if $grid-xlfl-skin == 'tailwind3' {
          font-size: 18px;
        }
      }
    }

    .e-contextmenu-wrapper ul li .e-menu-icon,
    .e-contextmenu-container ul li .e-menu-icon {
      @include height-styles($grid-xlfl-li-height, $grid-xlfl-li-height);
      margin-right: $grid-xlfl-li-icon-margin-right;
      @if $grid-xlfl-skin == 'tailwind3' {
        font-size: 20px;
        &.e-icon-check {
          font-size: 18px;
        }
      }
    }

    &.e-rtl {
      .e-contextmenu-wrapper ul {
        li .e-menu-icon {
          margin-right: 0;
        }
        .e-menu-item .e-caret {
          @if $grid-xlfl-skin == 'material3' {
            margin-left: 14px;
          }
          @else {
            margin-left: $grid-xlfl-li-icon-margin-arrow-icon;
          }
        }
      }
    }

    .e-footer-content {
      border-style: solid;
      border-width: $grid-column-chooser-footdiv;
      @if $grid-xlfl-skin == 'fluent2' {
        padding-right: 20px;
        padding-left: 20px;
      }
    }

    .e-excel-menu {
      z-index: 1000;
    }

    .e-xlsel {
      border: 0 solid;
      position: absolute;
      user-select: none;
    }

    &.e-dialog .e-dlg-content {
      padding-left: $grid-checkbox-content-padding-left;
      @if $grid-xlfl-skin == 'material3' {
        padding-right: 16px;
      }
      @if $grid-xlfl-skin == 'fluent2' {
        padding-right: 20px;
      }
    }

    .e-ftrchk,
    .e-searchbox {
      padding-left: $grid-checkbox-padding-topbottom;
    }

    &.e-rtl {
      .e-dlg-content {
        @include padding-styles($grid-rtl-checkbox-content-padding-left, $grid-checkbox-content-padding-left);
      }

      .e-ftrchk,
      .e-searchbox {
        @include padding-styles(0, $grid-checkbox-padding-topbottom);
      }
    }
  }

  .e-ftrchk {
    padding-bottom: $grid-checkbox-padding-topbottom;
    padding-top: $grid-checkbox-padding-topbottom;
    @if $grid-xlfl-skin == 'fluent2' {
      padding-bottom: 4px;
      padding-top: 4px;
    }
  }

  @if $grid-xlfl-skin == 'fluent2' {
    .e-ftrchk.e-infinitescroll {
      padding-left: 0;
      margin-left: 0;
    }
  }
}

.e-excel-menu.e-contextmenu.e-menu-parent {
  max-height: $grid-exlfltr-ctxtmnu-max-height;
  overflow-y: auto;
}

@include export-module('excel-filter-theme') {

  /*! Excel-Filter theme */
  #{&}.e-excelfilter {
    .e-footer-content {
      border-color: $grid-columnchooser-footer-border-color;
      opacity: $grid-columnchooser-footer-border-opacity;
    }

    .e-filtered::before {
      color: $grid-filtered-color;
    }

    .e-menu-item:active .e-filtered::before {
      @if $grid-xlfl-skin == 'bootstrap5' {
        color: $flyout-text-color-pressed;
      }
    }

    .e-menu-item.e-focused .e-menu-icon.e-filtered::before {
      @if $grid-xlfl-skin == 'fluent2' {
        color: $icon-color-hover;
      }
    }

    .e-dlg-content {
      padding-bottom: $grid-excel-filter-bottom-padding;
      @if $grid-xlfl-skin == 'material3' {
        border-radius: $grid-border-radius-0;
      }
    }
  }

  li.e-separator.e-menu-item.e-excel-separator {
    margin-bottom: $grid-excel-filter-separator;
    margin-top: $grid-excel-filter-separator;
  }

  .e-xlsel {
    background-color: $grid-autofill-color;
    border-color: $grid-autofill-color;
  }

  .sf-grid .e-excelfilter {
    .e-contextmenu-container ul .e-menu-item.e-selected .e-caret {
      @if $grid-xlfl-skin == 'bootstrap5' {
        color: $flyout-text-color-pressed;
      }
    }
  }
}

@include export-module('excel-filter-bootstrap-dark-icons') {

  .e-icon-check::before {
    content: '\e7ff';
  }

  #{&}.e-excelfilter {
    .e-icon-filter::before {
      content: '\e946';
    }

    .e-excl-filter-icon::before {
      content: '\e249';
    }

    .e-excl-filter-icon.e-filtered::before {
      content: '\e246';
    }

    .e-chkcancel-icon::before {
      content: '\e7a7';
    }

    .e-search-icon::before {
      content: '\e961';
    }

    .e-sortascending::before {
      content: '\e734';
    }

    .e-sortdescending::before {
      content: '\e733';
    }
  }
}

@mixin padding-styles($left, $right) {
  padding-left: $left;
  padding-right: $right;
}

@mixin height-styles($height, $line-height) {
  height: $height;
  line-height: $line-height;
}

@include export-module('excel-filter-bigger') {

  /*! Excel-Filter bigger */
  .sf-grid .e-excelfilter {
    &.e-bigger {
      .e-contextmenu-wrapper ul .e-menu-item .e-caret {
        @if $grid-xlfl-skin == 'fluent2' {
          margin-right: 24px;
        }
      }

      .e-contextmenu-wrapper ul .e-menu-item.e-menu-caret-icon,
      &.e-contextmenu-wrapper ul .e-menu-item.e-menu-caret-icon,
      .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon,
      &.e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
        @if $grid-xlfl-skin == 'fluent2' {
          padding: 0 36px 0 0;
        }
      }
    }
  }

  .e-bigger .sf-grid {
    .e-excelfilter {
      &.e-dialog .e-dlg-content {
        @if $grid-xlfl-skin == 'fluent2' {
          padding-right: 0;
        }
        @if $grid-xlfl-skin == 'highcontrast' {
          padding-left: 0;
        }
      }
    }
    .e-contextmenu-container ul .e-menu-item.e-menu-item .e-caret {
      @if $grid-xlfl-skin == 'bootstrap4'or $grid-xlfl-skin == 'bootstrap5' or $grid-xlfl-skin == 'bootstrap5-dark' $grid-xlfl-skin == 'tailwind3' or $grid-xlfl-skin == 'tailwind3-dark' or $grid-xlfl-skin == 'tailwind3' or  $grid-xlfl-skin == 'tailwind3-dark' {
        line-height: $grid-bigger-xlfl-li-height;
      }
    }
  }

  .e-bigger #{&}.e-xlflmenu.e-rtl {
    .e-radio + label .e-label {
      @include padding-styles($grid-xl-rtl-radio-padding-left, $grid-xl-rtl-radio-padding-right);
    }
  }

  .e-bigger.e-responsive-dialog #{&}.e-xlflmenu {
    .e-xlfl-dlgfields,
    .e-xlfl-fieldset {
      @if $grid-xlfl-skin == 'material3' {
        font-weight: 500;
        padding-top: 8px;
      }
    }

    .e-xlfl-optr:first-child {
      @if $grid-xlfl-skin == 'material3' {
        width: 70%;
      }
    }

    .e-xlfl-radio,
    .e-xlfl-mtcase,
    .e-xlfl-optr,
    .e-xlfl-value {
      @if $grid-xlfl-skin == 'material3' {
        padding-top: 24px;
      }
    }
  }

  .e-bigger #{&}.e-xlflmenu {
    min-height: $grid-bigger-xlfl-min-height;

    .e-xlfl-table {
      border-spacing: $grid-bigger-xlfltable-border-spacing;
      width: 100%;
    }

    .e-dlg-content {
      padding-bottom: $grid-bigger-xlfl-dlg-padding-bottom;
    }

    .e-radio + label .e-label {
      @include padding-styles($grid-bigger-xl-radio-padding-left, $grid-bigger-xl-radio-padding-right);
    }

    .e-checkbox-wrapper .e-frame + .e-label {
      margin-left: $grid-bigger-xl-match-margin-left;
      @if $grid-xlfl-skin == 'fluent2' {
        margin-top: 6px;
      }
    }

    .e-xlfl-radiodiv {
      width: $grid-bigger-xlfl-radiodiv-width;
    }

    .e-xlfl-radio-or,
    .e-xlfl-matchcasediv {
      margin-left: $grid-bigger-xlfl-radio-margin-left;
    }

    .e-xlfl-optr:first-child {
      padding-right: $grid-bigger-xlfl-dropdown-padding-right;
    }

    table.e-xlfl-table tr.e-xlfl-fields td.e-xlfl-value:nth-child(2) {
      @if $grid-xlfl-skin == 'tailwind3' {
        padding-left: 8px;
      }
    }

    &.e-rtl .e-xlfl-optr {
      padding-right: 0;
    }

    .e-xlfl-dlgfields {
      font-size: $grid-bigger-xlfl-dlgfields-font-size;
    }

    .e-xlfl-fieldset {
      font-size: $grid-bigger-xlfl-fieldset-font-size;
      padding-top: $grid-bigger-xlfl-fieldset-padding;
    }

    .e-xlfl-optr,
    .e-xlfl-value {
      padding-top: $grid-bigger-xlfltd-padding;
    }

    .e-xlfl-radio,
    .e-xlfl-mtcase {
      padding-top: $grid-bigger-xlfltd-radio-mtcase-padding;
    }
  }

  .e-bigger #{&}.e-excelfilter,
  #{&}.e-excelfilter.e-bigger {
    .e-xlflmenu {
      min-height: $grid-bigger-xlfl-min-height;
    }

    .e-ftrchk {
      padding-bottom: $grid-bigger-checkbox-padding-topbottom;
      padding-top: $grid-bigger-checkbox-padding-topbottom;
    }

    @if $grid-xlfl-skin == 'fluent2' {
      .e-ftrchk.e-infinitescroll {
        margin-left: 0;
        padding-left: 0;
      }
    }

    .e-contextmenu-wrapper ul li,
    .e-contextmenu-container ul li {
      @include height-styles($grid-bigger-xlfl-li-height, $grid-bigger-xlfl-li-height);
      @if $grid-xlfl-skin == 'fluent2' {
        padding: 0 12px;
      }
      .e-menu-icon {
        @include height-styles($grid-bigger-xlfl-li-height, $grid-bigger-xlfl-li-height);
        margin-right: $grid-bigger-xlfl-li-icon-margin-right;
        @if $grid-xlfl-skin == 'tailwind3' {
          font-size: 24px;
          &.e-icon-check {
            font-size: 22px;
          }
        }
      }
    }

    .e-contextmenu-wrapper ul .e-menu-item .e-caret {
      @include height-styles($grid-bigger-xlfl-li-height, $grid-bigger-xlfl-li-height);
      @if $grid-xlfl-skin == 'material3' {
        font-size: $text-xl;
        margin-right: 19px;
      }
      @else {
        margin-right: $grid-bigger-xlfl-li-icon-margin-arrow-icon;
      }
      @if $grid-xlfl-skin == 'fluent2' {
        margin-top: 2px;
      }
      @if $grid-xlfl-skin == 'tailwind3' {
        font-size: 22px;
      }
    }

    &.e-dialog .e-dlg-content {
      padding-left: $grid-bigger-checkbox-content-padding-left;
      @if $grid-xlfl-skin == 'fluent2' {
        padding-right: 24px;
      }
    }

    .e-ftrchk,
    .e-searchbox {
      padding-left: $grid-bigger-checkbox-padding-topbottom;
    }

    &.e-rtl {
      .e-contextmenu-wrapper ul {
        li .e-menu-icon {
          margin-right: 0;
        }
        .e-menu-item .e-caret {
          margin-left: $grid-bigger-xlfl-li-icon-margin-arrow-icon;
        }
      }

      .e-dlg-content {
        @include padding-styles($grid-rtl-bigger-checkbox-content-padding-left, $grid-bigger-checkbox-content-padding-left);
      }

      .e-ftrchk,
      .e-searchbox {
        @include padding-styles(0, $grid-bigger-checkbox-padding-topbottom);
      }
    }
  }
}

.e-bigger .e-excel-menu.e-contextmenu.e-menu-parent {
  max-height: $grid-bigger-exlfltr-ctxtmnu-max-height;
}

$grid-content-padding: 8px !default;
$grid-headecell-height: 38px !default;
$grid-font-size: 13px !default;
$grid-icon-color: $default-icon-color !default;
$grid-command-icon-color: $default-icon-color !default;
$grid-border-type: $border-type !default;
$grid-vertical-border-size: $border-size !default;
$grid-horizontal-border-size: $border-size !default;
$grid-font-family: $font-family !default;
$grid-maskedcell-virtual-background-color: rgba(0, 0, 0, .1) !default;
$grid-frozen-shadow-background-color: $frozen-shadow !default;
$grid-frozen-row-shadow-background-color: $frozen-shadow-2 !default;
$grid-frozen-row-shadow-inset-color: rgb(0, 0, 0);
$grid-header-font-size: 14px !default;
$grid-bigger-header-font-size: $grid-header-font-size !default;
$grid-sorted-header-color: $header-font-color !default;
$grid-popup-bg-color: $content-bg-color !default;
$grid-row-selection-color: $active-font-color !default;
$grid-cell-selection-color: $active-font-color !default;
$grid-content-selection-color: $active-font-color !default;
$grid-drag-clone-color: $header-font-color !default;
$group-droparea-hover-color: $active-font-color !default;
$group-header-hover-color: $header-font-color !default;
$group-row-bg-stcolor: #ececec !default;
$grid-group-broder-color: $content-border-color !default;
$grid-group-hover-broder-color: $content-border-color !default;
$grid-group-text-line-height: 24px !default;
$filter-text-color: $content-font-color !default;
$grid-wrap-line-height:10px !default;
$grid-wrap-margin-bottom: 2px !default;
$grid-wrap-margin-top: 0 !default;
$grid-header-bottom-padding: 0 !default;
$grid-header-top-padding: 0 !default;
$grid-headerconent-font-opacity: 1 !default;
$grid-conent-font-opacity: 1 !default;
$grid-filtercell-line-height: 27px !default;
$grid-group-captioncell-line-height: 14px !default;
$group-text-padding-right: 3px !default;
$group-sorticon-margin-right: 0 !default;
$group-ungroupicon-padding: 5px 3px !default;
$grid-rtl-group-sorticon-margin-left: 0 !default;
$grid-ungroup-icon-opactiy: 1 !default;
$grid-default-color: '' !default;
$grid-stackedheadercell-border-size: 1px 0 1px 1px !default;
$grid-stackedheadercell-botttom-padding: 13px !default;
$group-text-align: center !default;
$grid-right-border: 1px !default;
$grid-headercelldiv-line-height: 29px !default;
$grid-bigger-headercelldiv-line-height: $grid-headercelldiv-line-height !default;
$grid-filterbarcell-text-indent: 1px !default;
$grid-groupdroparea-rtl-text-align: center !default;
$grid-rtl-th-firstcell-border-left: 0 !default;
$grid-checkbox-cell-padding-top-bottom: 8px !default;
$grid-rowselect-text-indent: 1px !default;
$grid-toolbar-border-width: 1px solid !default;
$grid-filterdiv-padding: 0 !default;
$grid-headercelldiv-height: 29px !default;
$grid-filterbarcell-input-height: 26px !default;
$grid-sortnumber-border-radius: 65% !default;
$grid-columnchooser-header-padding: 11px 18px 15px !default;
$grid-columnchooser-toolbar-button-padding: 0 12px !default;
$grid-columnchooser-ul-padding: 0 !default;
$grid-column-chooser-footdiv: 2px 0 0 !default;
$grid-column-chosser-searchdiv-opactiy: .6 !default;
$grid-column-chosser-searchdiv-fopactiy: 1 !default;
$grid-columnchooser-search-border-color: #212121 !default;
$grid-columnchooser-search-border-fcolor: #ff4081 !default;
$grid-columnchooser-footer-border-opacity: 1 !default;
$grid-columnchooser-toolbar-div-padding: 0 10px !default;
$grid-columnchooser-toolbar-icon-line-height: 1.9 !default;
$grid-columnchooser-toolbar-icon-font-size: 15px !default;
$grid-columnchooser-btn-font-size: 9px !default;
$grid-columnchooser-toolbardiv-padding: 3px 0 0 !default;
$grid-columnchooser-toolbardiv-margin-top: 0 !default;
$grid-columnchooser-toolbar-icon-vertical-align: middle !default;
$grid-columnchooser-cancel-icon-content-f-opactiy: 1 !default;
$grid-columnchooser-toolbar-div-margin-top: -1px !default;
$grid-columnchooser-input-border: 0 !default;
$grid-columnchooser-input-padding-top: 4px !default;
$grid-column-chooser-search-icon-padding: 5px 2px !default;
$grid-column-chooser-cancel-icon-padding: 5px 2px 6px !default;
$grid-columnchooser-input-padding-bottom: 8px !default;
$grid-columnchooser-input-padding-left: 4px !default;
$grid-columnchooser-ul-margin: 13px 0 !default;
$grid-column-chooser-dlg-footer-padding: 8px !default;
$grid-columnchooser-checkbox-label-width: 150px !default;
$grid-rtl-bigger-sortnumber-margin: 6px 0 0 10px !default;
$grid-rtl-bigger-sortnumber-withfilter-margin: 8px 0 0 10px !default;
$grid-rtl-bigger-rightalign-sortnumber-margin: 6px 0 0 10px !default;
$grid-rtl-group-text-marign-right: 0 !default;
$grid-rtl-group-text-margin-right: 0 !default;
$grid-rtl-textwrap-srotnumber-margin: 3px 5px 0 12px !default;
$grid-rtl-headercell-both-border-width: 0 1px 0 0 !default;
$grid-rtl-textwrap-srotnumber-rightalign-margin: 3px 5px 0 12px !default;
$grid-rtl-stackedheadercell-border-size: 0 1px 1px 0 !default;
$grid-rtl-stackedhader-firstcell-left-border-size: 0 !default;
$grid-rtl-stackedhader-firstcell-right-border-size: 1px !default;
$grid-rtl-bothlines-stackedhader-firstcell-left-border-size: 1px !default;
$grid-rtl-bothlines-stackedhader-firstcell-right-border-size: 0 !default;
$grid-bigger-headercell-bootom-padding: math.round(math.div($grid-header-bottom-padding, .75)) !default;
$grid-bigger-grightarrow-icon-font-size: 14px !default;
$group-bigger-sorticon-margin-right: 0 !default;
$grid-bigger-groupdroparea-padding: 22px 24px !default;
$grid-bigger-group-headercell-height: math.round(math.div($grid-headecell-height, .75)) !default;
$grid-bigger-ungroup-button-font-size: 16px !default;
$grid-bigger-group-text-line-height: 32px !default;
$grid-bigger-groupcaption-line-height: 32px !default;
$grid-bigger-rtl-group-headercell-margin: 3px 8px 0 0 !default;
$grid-bigger-rtl-group-headercell-padding: 9px 0 4px 0 !default;
$grid-bigger-device-rtl-group-headercell-padding: 9px 0 4px 0 !default;
$grid-bigger-rtl-ungroup-icon-margin-right: -8px !default;
$grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
$grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
$grid-bigger-textwrap-sorticon-margin: -9px 10px !default;
$grid-bigger-textwrap-srotnumber-margin: 3px 5px 0 2px !default;
$grid-bigger-columnchooser-header-padding: 24px 24px 38px !default;
$grid-bigger-columnchooser-ul-padding: 0 !default;
$grid-bigger-columnchooser-li-padding: 11px 0 !default;
$grid-bigger-columnchooser-toolbar-div-margin-top: 0 !default;
$grid-bigger-toolbar-div-margin: 15px !default;
$grid-device-headercell-padding: 0 12px $grid-header-bottom-padding !default;
$grid-device-headercell-fistchild-padding: 0 12px $grid-header-bottom-padding 16px !default;
$grid-device-headercell-lastchild-padding: 0 16px $grid-header-bottom-padding 12px !default;
$grid-device-rowcell-padding: $grid-content-padding 12px !default;
$grid-device-rowcell-firstchild-padding: $grid-content-padding 12px $grid-content-padding 16px !default;
$grid-device-rowcell-lastchild-padding: $grid-content-padding 16px $grid-content-padding 12px !default;
$grid-device-filterbarcell-padding: $grid-content-padding 12px !default;
$grid-device-filterbarcell-firstchild-padding: $grid-content-padding 12px $grid-content-padding 16px !default;
$grid-device-filterbarcell-lastchild-padding: $grid-content-padding 16px $grid-content-padding 12px !default;
$grid-device-gridheader-row-span-padding: 20px !default;
$grid-touch-device-hdrcell-span-line-height: 26px !default;
$grid-touch-device-hdrcell-ungroup-line-height: 23px !default;
$grid-edit-input-bigger-padding-bottom: 0 !default;
$grid-edit-input-bigger-padding-top: 0 !default;
$grid-edit-input-bigger-device-padding-bottom: 0 !default;
$grid-edit-input-bigger-device-padding-top: 0 !default;
$frozen-border: 2px solid !default;
$grid-fltrdiv-text-align: right !default;
$grid-fltrdiv-padding: 0 2px !default;
$grid-rtl-fltrdiv-padding: 6px !default;
$grid-flmenu-padding: 24px 0 0 !default;
$grid-flmenu-boolean-content-padding: 18px 18px 0 !default;
$grid-flmenu-boolean-button-width: 110px !default;
$grid-flmenu-device-padding: 24px 0 0 !default;
$grid-fltrmnu-dd-max-height: 298px !default;
$grid-rtlfltrdiv-float: left !default;
$grid-checkbox-wrapper-height: 20px !default;
$grid-checkbox-wrapper-line-height: 20px !default;
$grid-checkbox-wrapper-top: 0 !default;
$grid-rtl-headercelldiv-fltricon-padding: 0 1.6em 0 10px !default;
$grid-sortnumber-filtericon-rightalign-margin: 8px 2px 0 5px !default;
$grid-rows-bg-color: $grey-base !default;
$grid-resize-border-width: 1px !default;
$grid-filterbarcell-input-padding: 0 26px 0 10px !default;
$grid-icon-default-color: $grey-dark-font !default;
$grid-resize-helper-color: $brand-primary !default;
$grid-header-bg-color: $grey-base !default;
$grid-header-color: $grey-dark-font !default;
$grid-header-icon-color: $grey-dark-font !default;
$grid-headercell-both-border-width: 0 0 0 1px !default;
$grid-icon-font-size: 10px !default;
$grid-border-size: 1px !default;
$grid-header-padding: 8px !default;
$grid-headercelldiv-right-align-padding: 0 8px 0 !default;
$grid-headercell-line-height: 36px !default;
$grid-header-font-weight: Bold !default;
$grid-filtercell-both-border-width: 2px 0 0 1px !default;
$grid-header-border-color: $grey-88 !default;
$grid-rowcell-line-height: 19px !default;
$grid-rowcell-autofill-top-line-height: 17px !default;
$grid-rowcell-autofill-top-bottom-line-height: 15px !default;
$grid-content-font-color: $grey-dark-font !default;
$grid-hover-content-font-color: $grey-dark-font !default;
$grid-cell-border-color: $grey-88 !default;
$grid-content-bg-color: $grey-base !default;
$grid-row-selection-bg-color: $grey-88 !default;
$grid-cell-selection-bg-color: $grey-88 !default;
$grid-hover-bg-color: $grey-light !default;
$grid-cell-selection-hover-bg-color: color-mix(in srgb, $grey-88, rgba(57, 57, 57, .2)) !default;
$grid-row-selection-hover-bg-color: color-mix(in srgb, $grey-88, rgba(57, 57, 57, .2)) !default;
$grid-content-font-size: 14px !default;
$grid-header-height: 29px !default;
$grid-bigger-header-height: $grid-header-height !default;
$grid-rowcell-broder-width: 1px 0 0 !default;
$grid-content-right-padding: 8px !default;
$grid-toolbar-search-margin-bottom: 0 !default;
$grid-toolbar-search-width: 230px !default;
$grid-bigger-toolbar-search-width: $grid-toolbar-search-width !default;
$grid-toolbar-search-icon-min-width: 32px !default;
$grid-toolbar-search-wrapper-padding-bottom: 3px !default;
$grid-toolbar-search-wrapper-padding-top: 3px !default;
$grid-toolbar-search-clear-icon-min-width: 32px !default;
$grid-toolbar-search-clear-icon-font-size: 12px !default;
$grid-toolbar-search-clear-icon-padding: 0 !default;
$grid-toolbar-search-clear-icon-margin-right: 0 !default;
$grid-rtl-toolbar-search-clear-icon-padding: 0 !default;
$grid-rtl-toolbar-search-clear-icon-margin: 0 !default;
$grid-bigger-toolbar-search-clear-icon-padding: 0 !default;
$grid-bigger-toolbar-search-clear-icon-min-width: 38px !default;
$grid-bigger-toolbar-search-clear-icon-margin: 0 !default;
$grid-bigger-toolbar-search-clear-icon-font-size: 14px !default;
$grid-rtl-bigger-toolbar-search-clear-icon-padding: 0 !default;
$grid-rtl-bigger-toolbar-search-clear-icon-min-width: 38px !default;
$grid-rtl-bigger-toolbar-search-clear-icon-margin: 0 !default;
$grid-responsive-toolbar-search-clear-icon-margin: 0 -16px 0 0 !default;
$grid-responsive-toolbar-search-clear-icon-font-size: 18px !default;
$grid-rtl-responsive-toolbar-search-clear-icon-margin: 0 !default;
$grid-res-toolbar-clear-icon-width: 100% !default;
$grid-res-toolbar-clear-icon-margin: 0 !default;
$grid-res-toolbar-search-clear-icon-font-size: 17px !default;
$grid-res-toolbar-search-icon-font-size: 18px !default;
$grid-res-toolbar-search-wrapper-padding: 2.5px 5px !default;
$grid-res-toolbar-input-search-wrapper-padding: 5px 13px 5px 0 !default;
$grid-res-toolbar-search-wrapper-icon-padding: 9px 11.5px !default;
$grid-res-toolbar-search-wrapper-padding-right: 13px !default;
$grid-res-toolbar-search-icon-padding-left: 0 !default;
$grid-toolbar-responsive-right-width: calc(100% - 53px) !default;
$grid-bigger-toolbar-search-icon-min-width: 38px !default;
$grid-bigger-toolbar-search-wrapper-padding-bottom: 5px !default;
$grid-bigger-toolbar-search-wrapper-padding-top: 5px !default;
$grid-bigger-command-column-padding-bottom: 6px !default;
$grid-bigger-command-column-padding-top: 6px !default;
$grid-summary-cell-font-size: 14px !default;
$grid-filterbarcell-border-width: 2px 0 0 !default;
$grid-filterbarcell-first-last-child-padding-left: 2px !default;
$grid-filterbarcell-padding: 1px 2px !default;
$grid-filterbar-input-border-width: 0 !default;
$grid-border-radius: 0 !default;
$grid-bottom-border-size: $border-size !default;
$group-droparea-bg-color: $grey-darker !default;
$group-header-bg-color: $grey-44 !default;
$group-row-bg-color: $grey-base !default;
$grid-summary-template-row-bg-color: '' !default;
$grid-summary-row-bg-color: $grey-base !default;
$grid-sortdiv-width: 16px !default;
$grid-sortdiv-height: auto !default;
$grid-sortnumber-padding: 0 2px !default;
$grid-sortnumer-line-height: 15px !default;
$grid-bigger-sortnumer-line-height: $grid-sortnumer-line-height !default;
$grid-sortdiv-margin: 0 0 0 auto !default;
$grid-sortdiv-padding: 0 2px !default;
$grid-ungroup-button-line-height: 23px !default;
$grid-ungroup-button-font-size: 10px !default;
$grid-grouparea-first-cell-margin: 0 6px 0 12px !default;
$grid-grouparea-font-size: 13px !default;
$grid-grouparea-margin: 6px 0 0 8px !default;
$grid-group-headercell-line-height: 30px !default;
$grid-grouped-headercell-padding: 7px 0 !default;
$grid-grouped-headercell-span-padding: 0 8px !default;
$grid-group-unpgroupicon-padding-right: 8px !default;
$group-droparea-hover-bg-color: $grey-base !default;
$group-header-hover-bg-color: $grey-44 !default;
$grid-grouped-padding: 0 0 6px !default;
$group-area-padding: 15px 0 !default;
$grid-grouptext-margin-right: 0 !default;
$group-header-color: $grey-dark-font !default;
$group-grouped-droparea-bg-color: $grey-white !default;
$group-border-width: 1px !default;
$grouped-text-font-size: 14px !default;
$group-header-border-radius: 4px !default;
$grid-hover-icon-color: $grey-dark-font !default;
$grid-headecell-span-height: 30px !default;
$grid-drag-clone-opacity: .9 !default;
$grouped-droparea-bg-color: $grey-darker !default;
$grid-drag-clone-border-color: $grey-44 !default;
$grid-drag-clone-bg-color: $grey-base !default;
$group-caption-font-color: $grey-dark-font !default;
$grid-group-down-arrow-icon-font-size: 10px !default;
$grid-group-down-arrow-icon-padding: 13px 9px 11px 10px !default;
$group-expand-icon-text-indent: 11px !default;
$grid-sortnumber-bg-color: $grey-dark-font !default;
$grid-sortnumber-color: $grey-base !default;
$grid-table-background-color: $grey-base !default;
$group-droparea-color: $grey-dd !default;
$group-sorticon-font-size: 12px !default;
$grid-rowcell-both-border-width: 1px 0 0 1px !default;
$grid-indentcell-border-width: 0 1px 0 0 !default;
$grid-group-right-arrow-icon-font-size: 10px !default;
$grid-group-right-arrow-icon-padding: 12px 9px 12px 10px !default;
$grid-group-unpgroupicon-padding-top: 4px !default;
$grid-summary-cell-line-height: 19px !default;
$grid-batch-updated-bg-color: #d7f9c7 !default;
$grid-val-error-color: #f44336 !default;
$grid-val-error-bg-color: #fcdbe4 !default;
$grid-edit-input-padding-bottom: 1px !default;
$grid-edit-input-padding-top: 2px !default;
$grid-edit-input-margin: 2px !default;
$grid-edit-cell-padding: 2px !default;
$grid-group-height: 52px !default;
$grid-ungroup-rtl-padding-top: 4px !default;
$grid-bigger-ungroup-rtl-padding-top: $grid-ungroup-rtl-padding-top !default;
$grid-rtl-group-headercell-margin-right: 8px !default;
$grid-rtl-group-headercell-margin-left: 0 !default;
$grid-rtl-grouped-headercell-padding: 7px 0 !default;
$grid-rtl-group-text-margin-left: 0 !default;
$grid-rtl-group-sorticon-margin-right: -5px !default;
$grid-rtl-headercell-border-width: 0 !default;
$grid-rtl-headercelldiv-padding: 0 .4em 0 1.8em !default;
$grid-ungroup-rtl-padding-right: -8px !default;
$grid-headercelldiv-padding: 0 1.8em 0 .4em !default;
$grid-headercelldiv-sort-centeralign-padding-right: .4em !default;
$grid-group-text-width: auto !default;
$grid-grouptopleftcell-border-top: 2px solid !default;
$grid-group-caption-font-size: 14px !default;
$grid-group-caption-header-padding: .7em !default;
$group-sorticon-margin-left: -6px !default;
$group-sorticon-margin-top: -3px !default;
$grid-bigger-headercell-line-height: 44px !default;
$grid-bigger-rhandler-height: $grid-bigger-headercell-line-height !default;
$grid-bigger-rowcell-line-height: 27px !default;
$grid-bigger-rowcell-autofill-top-line-height: 24px !default;
$grid-bigger-rowcell-autofill-top-bottom-line-height: 22px !default;
$grid-bigger-font-size: 14px !default;
$group-unpgrouicon-margin-left: -6px !default;
$grid-group-ungroupicon-margin-left: -8px !default;
$grid-group-clone-text-align: left !default;
$grid-clone-padding: 2px 4px 1px !default;
$grid-bigger-first-last-rowcell-padding: 8px !default;
$grid-bigger-content-padding: 8px !default;
$grid-bigger-group-line-height: math.round($grid-group-height*1.25) !default;
$grid-bigger-content-right-padding: 8px !default;
$grid-bigger-headercell-font-size: 15px !default;
$grid-bigger-content-font-size: 14px !default;
$grid-filterbar-border-radius: 4px !default;
$grid-bigger-sorticon-margin-top: -4px !default;
$grid-device-group-sorticon-margin-top: -1px !default;
$grid-header-border-width: 0 !default;
$grid-bigger-groupedcell-padding: 5px 0 8px !default;
$grid-bigger-group-headercell-margin: 4px 0 0 10px !default;
$grid-bigger-group-headercell-padding: 9px 0 !default;
$grid-device-group-headercell-padding: 9px 0 !default;
$grid-bigger-grouptext-marign: 0 !default;
$grid-bigger-headercell-padding: 8px !default;
$grid-bigger-icons-font-size: 14px !default;
$group-collapse-icon-text-indent: 11px !default;
$grid-bigger-grouparea-font-size: 14px !default;
$grid-bigger-grouped-headercell-border-radius: 6px !default;
$grid-bigger-groupedcell-icons-marign-left: -6px !default;
$grid-bigger-ungroupbutton-icons-font-size: 14px !default;
$grid-bigger-groupcell-span-padding: 0 8px !default;
$grid-device-grouped-headercell-span-padding: 0 8px !default;
$grid-bigger-ungroupbutton-icon-margin-left: -5px !default;
$grid-bigger-ungroupbutton-icon-margin-top: -3px !default;
$grid-device-ungroupbutton-icon-margin-top: -3px !default;
$grid-bigger-groupcell-span-line-height: 37px !default;
$grid-bigger-groupcell-span-height: $grid-bigger-groupcell-span-line-height !default;
$grid-bigger-gdownarrow-icon-font-size: 14px !default;
$grid-gd-clone-border-radius: 4px !default;
$grid-bigger-group-clone-broder-radius: 6px !default;
$grid-gd-clone-padding: 7px 4px 4px !default;
$grid-bigger-group-clone-padding: 10px 6px 6px !default;
$grid-columnchooser-footer-border-color: rgba($grey-e6, .12) !default;
$grid-column-chooser-searchdiv: 1px !default;
$grid-bigger-columnchooser-toolbartxt-padding: 0 !default;
$grid-columnchooser-toolbartxt-padding: 0 !default;
$grid-columnchooser-content-padding: 23px 15px 15px 7px !default;
$grid-bigger-columnchooser-content-padding: 23px 15px 5px 7px !default;
$grid-bigger-cc-checkbox-padding-left: 8px !default;
$grid-bigger-searchdiv-padding-left: 4px !default;
$grid-cc-checkbox-padding-left: 8px !default;
$grid-column-chooser-searchdiv-left: 5px !default;
$grid-columnchooser-content-margin: 37px 0 0 !default;
$grid-bigger-columnchooser-content-margin: 37px 0 0 !default;
$grid-bigger-columnchooser-btn-font-size: 12px !default;
$grid-bigger-header-icons-font-size: 14px !default;
$grid-bigger-grouptext-width: auto !default;
$grid-edit-input-margin-top: 2px !default;
$grid-td-checkbox-margin-top: 0 !default;
$grid-filterbarcell-text-input: 32px !default;
$grid-bigger-filterbarcell-text-input: 39px !default;
$grid-columnchooser-li-padding: 8px 0 !default;
$grid-edit-input-bigger-margin: 2px !default;
$grid-device-ungroupbutton-line-height: 39px !default;
$grid-device-groupsort-margin-top: 0;
$grid-device-groupheadercell-span-line-height: 33px !default;
$frozen-border-color: $grey-dd !default;
$grid-frozenborder-disabled-color: $grey-base !default;
$grid-freezeline-right-border: rgba($grey-dd, .6) !default;
$grid-freezeline-border: 2px solid !default;
$grid-edit-checkbox-bigger-padding-left: 8px !default;
$grid-edit-checkbox-bigger-padding-top: 8px !default;
$grid-cell-focus-shadow: 0 0 0 1px color.adjust($brand-primary, $lightness: 10%) inset !default;
$grid-cell-focus-border-color: color.adjust($brand-primary, $lightness: 10%) !default;
$grid-headercelldiv-fltricon-margin: -5px 15px -5px -6px !default;
$grid-headercelldiv-rightalign-fltricon-margin: -5px 15px -5px 0 !default;
$grid-rtl-headercelldiv-fltricon-margin: -5px !default;
$grid-rtl-headercelldiv-rightalign-fltricon-margin: -5px -8px -5px 0 !default;
$grid-filtered-color: $brand-primary !default;
$grid-autofill-color: $brand-primary !default;
$grid-e-firstrow-dragborder-bcolor: $brand-primary !default;
$grid-checkbox-padding-topbottom: 8px !default;
$grid-checkbox-content-padding-left: 7px !default;
$grid-rtl-checkbox-content-padding-left: 15px !default;
$grid-bigger-checkbox-padding-topbottom: 9px !default;
$grid-bigger-checkbox-content-padding-left: 9.75px !default;
$grid-rtl-bigger-checkbox-content-padding-left: 18.75px !default;
$grid-column-menu-sub-menu-box-shadow: 0 6px 12px rgba($shadow, .175) !default;
$grid-bigger-checkbox-filter-min-height: 340px !default;
$grid-checkbox-filter-min-height: 338px !default;
$grid-textwrap-column-menu-margin: -15px -20px -20px -20px !default;
$grid-bigger-column-menu-margin: -20px -20px !default;
$grid-bigger-device-column-menu-margin: -20px -18px !default;
$grid-column-menu-top-touch: 31px !default;
$grid-column-menu-bottom-touch: 31px !default;
$grid-column-menu-right-touch: 23px !default;
$grid-excelmenu-filter-icon: 'e249' !default;
$grid-excelmenu-clear-filter-icon: 'e246' !default;
$grid-column-menu-top-touch: 31px !default;
$grid-selection-font-weight: normal !default;
$group-hover-border: $group-border-width !default;
$grid-grouped-headercell-hover-padding: $grid-grouped-headercell-padding !default;
$grid-drag-clone-font-weight: $grid-header-font-weight !default;
$grid-content-batch-font-color: $grid-content-font-color !default;
$grid-bigger-group-headercell-hover-padding: $grid-bigger-group-headercell-padding !default;
$grid-drag-font-size: 12px !default;
$grid-drag-icon-font-weight: bold !default;
$grid-drag-move-icon: 10px !default;
$grid-drag-area-border: 1px solid !default;
$grid-dragdrop-padding: 2px !default;
$grid-dragborder-box-shadow: 0 2px 0 0 $brand-primary !default;
$grid-dragborder-cell-dashed: 1px dashed $brand-primary !default;
$grid-dragborder-position: relative !default;
$grid-dragborder-z-index: 5 !default;
$grid-dragicon-cell-border: 1px 0 0 0 !default;
$grid-border-bottom-width: 1px !default;
$grid-dragcell-border-style: solid !default;
$grid-dragcell-border-color: $grey-88 !default;
$grid-e-firstrow-dragborder-bcolor: #e3165b !default;
$grid-drap-drop-icon-color: $grey-dark-font !default;
$grid-clone-dropitemscount-bg-color: $brand-primary !default;
$grid-clone-dropitemscount-color: $grey-dark-font !default;
$grid-clone-row-border-color: $grey-88 !default;
$grid-dropitemscount-color: $brand-primary-font !default;
$grid-clone-prop-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
$grid-drag-icon-opacity: $grid-conent-font-opacity !default;
$grid-clone-dropitemscount-border: $grey-88 !default;
$grid-clone-dragdrop-bg-color: $grey !default;
$grid-group-clone-box-shadow: 0 0 !default;
$grid-unboundcelldiv-margin: 0 3.5px !default;
$grid-bigger-flmenu-padding: $grid-flmenu-padding !default;
$grid-rowcell-wrap-height: 18px !default;
$grid-rowcell-autofill-top-height: 16px !default;
$grid-rowcell-autofill-top-bottom-height: 14px !default;
$grid-bigger-columnmenu-bottom: 16px !default;
$grid-rtl-searchclear: 0 !default;
$grid-column-chosser-searchdiv-top: -46px !default;
$grid-reorderarrow-font-size: 10px !default;
$grid-bigger-wrap-line-height:18px !default;
$grid-bigger-wrap-autofill-top-line-height: 22px !default;
$grid-bigger-wrap-autofill-top-bottom-line-height: 20px !default;
$grid-bigger-clone-padding: $grid-clone-padding !default;
$grid-bigger-draganddrop-clone-padding: 0 !default;
$grouped-bigger-text-font-size: 16px !default;
$grid-bigger-ungroupbutton-icon-margin-right: 0 !default;
$grid-bigger-ungroupbutton-icon-padding-top: 0 !default;
$grid-bigger-font-size: $grid-font-size !default;
$grid-rtl-bigger-wrap-rightalign-fltrdiv-margin: -20px 4px -14px -2px !default;
$grid-bigger-rtl-ungroup-icon-margin-left: 0 !default;
$grid-grouparea-font-weight: lighter !default;
$grid-ungroup-rtl-margin-left: 0 !default;
$grid-rtl-group-sorticon-margin-left: 0 !default;
$grid-column-menu-padding: 0 2px !default;
$grid-rtl-column-menu-left: 5px !default;
$grid-checkboxfiltertext-width: 150px !default;
$grid-columnchoosertext-width: 140px !default;
$grid-rtl-column-menu-margin: -20px -18px -18px -4px !default;
$grid-rtl-textwrap-column-menu-margin: -15px -13px -23px -3px !default;
$grid-filter-checkbox-width: 0 !default;
$grid-filter-checkbox-white-space: nowrap !default;
$grid-group-animator-bigger-cell-margin: 15px 0 15px 0 !default;
$grid-group-animator-bigger-drop-height: 70px !default;
$grid-animator-bigger-area-margin: 22px !default;
$grid-group-animator-drop-height: 62px !default;
$grid-group-animator-cell-margin: 12px 0 12px 0 !default;
$grid-animtor-border-bottom-width: 1px !default;
$grid-animator-area-padding: 0 12px 0 !default;
$grid-animtor-area-border-width: 1px !default;
$grid-animator-area-border: 0 !default;
$grid-animator-area-margin: 16px !default;
$grid-animator-chips-display: inline-block !default;
$grid-animator-drag-icon: 24px !default;
$grid-animator-drag-icon-line-height: 25px !default;
$grid-animator-margin-left: 8px !default;
$grid-animator-padding-bottom: 10px !default;
$grid-animator-line-height: 21px !default;
$grid-animator-line-height-next: 32px !default;
$grid-animator-font-size-drag: 11px !default;
$grid-animator-opacity: .7 !default;
$grid-animator-drag-margin-left: 8px !default;
$grid-animator-first-group: 12px 0 12px 12px !default;
$grid-animator-rtl-first-group: 12px 12px 12px 0 !default;
$grid-animator-margin-top-rtl: 23px !default;
$grid-filterbar-dropdown: 29px !default;
$grid-responsive-close-icon-margin: 6px 8px 8px 8px !default;
$grid-responsive-custom-header-margin: 18px 8px 18px 8px !default;
$grid-responsive-custom-header-btn-color: $grid-filtered-color !default;
$grid-responsive-custom-header-right-margin: 6px 4px 6px 4px !default;
$grid-responsive-filter-clear-font: 18px !default;
$grid-responsive-search-icon-margin: 0 !default;
$grid-responsive-search-icon-right: 9px !default;
$grid-responsive-search-padding-right: 13px !default;
$grid-responsive-search-padding-left: 18px !default;
$grid-responsive-header-background: $grey-base !default;
$grid-bigger-res-dlg-hdr-padding: 16px !default;
$grid-responsive-header-search: -3px !default;
$grid-responsive-filter-reset-color: $grid-filtered-color !default;
$grid-responsive-toolbar-icon-color: $grid-icon-color !default;
$grid-responsive-close-icon-color: $grid-icon-color !default;
$grid-responsive-btn-background: $grey-light !default;
$grid-responsive-res-apply-btn-font-size: 15px !default;
$grid-responsive-res-apply-btn-margin-top: -4px !default;
$grid-responsive-sort-clear-btn-font-size: 15px !default;
$grid-responsive-sort-clear-margin-top: -4px !default;
$grid-responsive-icon-filter-clear: 18px !default;
$grid-responsive-icon-filter-clear-bottom: 10px !default;
$grid-responsive-btn-icon-font-size: 14px !default;
$grid-responsive-back-btn-bottom: 12px !default;
$grid-responsive-header-padding-top: 10px !default;
$grid-responsive-search-place-holder-margin-top: 2px !default;
$grid-responsive-search-width: 0 !default;
$grid-responsive-search-left-padding: 0 !default;
$grid-responsive-filter-clear-margin: 1px !default;
$grid-responsive-toolbar-filter-font-size: 18px !default;
$grid-responsive-tbar-btn-bgr-padding: 1px 7px !default;
$grid-responsive-btn-top: 0 !default;
$grid-responsive-apply-btn-top: 3px !default;
$grid-responsive-column-menu-icon-margin-top: 0 !default;
$grid-frozen-mac-scrollbar-background: rgba(0, 0, 0, .5) !default;
$grid-rowcell-color: rgba($grid-content-font-color, $grid-conent-font-opacity) !default;
$grid-reorderarrow-margin-top: -6.5px !default;
$grid-reorderdownarrow-margin-top: 4px !default;
$grid-reorder-arrow-top-margin: .5px !default;
$grid-reorder-downarrow-top-margin: -1.5px !default;
$grid-biggerreorder-arrow-top-margin: -2px !default;
$grid-biggerreorder-downarrow-top-margin: -1px !default;
$grid-reorder-virtualarrow-top-margin: -.5px !default;
$grid-reorder-virtualdownarrow-top-margin: -1.5px !default;
$grid-sortnumber-font-size: 9px !default;
$grid-header-text-transform: none !default;
$grid-bigger-toolbar-icon-size: 18px !default;
$grid-reorderarrow-margin-left: -2.5px !default;
$grid-column-chooser-cancel-icon-size: 11px !default;
$grid-outter-border: $grid-header-border-color !default;
$grid-btn-disabled-bgcolor: rgba($grey-light, .4) !default;
$grid-sort-number-size: 15px !default;
$grid-bigger-sort-number-size: $grid-sort-number-size !default;
$grid-sort-number-font-size: 9px !default;
$grid-filter-border-radius: 6px !default;
$grid-bigger-filter-border-radius: $grid-filter-border-radius !default;
$grid-adaptive-toolbar-icon-hover-bottom: 0 !default;
$grid-adaptive-cell-padding-bottom: 5px !default;
$grid-adaptive-cell-padding-top: 5px !default;
$grid-bigger-adaptive-cell-position-top: 6px !default;
$grid-skin: 'bootstrap' !default;
$grid-biggerreorderarrow-font-size: $grid-reorderarrow-font-size !default;
$grid-bigger-drag-count-padding: 3px 7px 4px !default;
$grid-bigger-drag-count-top: -10px !default;
$grid-bigger-check-select-all-font-size: $grid-bigger-header-icons-font-size !default;
$grid-adaptive-sort-clear-button-padding: 4px !default;
$grid-cc-margin-top: 2px !default;
$grid-bigger-device-rtl-cm-margin: -20px -18px -18px -4px !default;
$grid-bigger-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
$grid-device-rtl-grouped-headercell-span-padding: $grid-device-grouped-headercell-span-padding !default;
$grid-rtl-group-span-padding: $grid-bigger-groupcell-span-padding !default;
$grid-ungroup-rtl-padding-left: 8px !default;
$grid-column-reorder-icon-color: $grid-icon-default-color !default;
$grid-bigger-headercell-top-padding: 0 !default;
$grid-bigger-headercell-autofit-padding: 0 8px 0 !default;
$grid-bigger-icon-font-size: $grid-icon-font-size !default;
$grid-rtl-mselect-dd-indicator-left: -6px !default;
$grid-toolbar-text-opacity: 1 !default;
$grid-toolbar-placeholder-text-color: $grey-lighter !default;
$grid-toolbar-searchbar-text-opacity: 1 !default;
$grid-dropitems-count-margin-left: -8px !default;
$grid-checkmark-color: $grey-light-font !default;

$grid-border-radius-0: 0 !default;
$grid-border-radius-4: 4px !default;
$grid-border-radius-8: 8px !default;
$grid-border-radius-17: 17px !default;

@mixin wrap-styles {
  height: Auto;
  line-height: $grid-rowcell-wrap-height;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
  word-wrap: break-word;
}

@mixin sort-number-styles {
  border-radius: $grid-sortnumber-border-radius;
  display: inline-block;
  flex: none;
  text-align: center;
  font-size: $grid-sortnumber-font-size;
}

@mixin animator-drag-styles {
  height: $grid-animator-drag-icon;
  padding: $grid-animator-area-border;
  vertical-align: $grid-columnchooser-toolbar-icon-vertical-align;
}

@mixin ricon-style {
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  content: '';
  display: block;
  height: 0;
  position: absolute;
  width: 20px;
  top: 4px;
}

@mixin gridheader-border-styles {
  border-top-style: $grid-border-type;
  border-top-width: $grid-border-size;
}

@mixin grid-border-width-styles {
  border-left-style: $grid-border-type;
  border-left-width: $grid-border-size;
}

@mixin grid-group-arrow-icons($size, $padding) {
  font-size: $size;
  padding: $padding;
  text-decoration: none;
}

@mixin grid-edit-input-styles($fontsize, $bottom, $top) {
  font-family: $grid-font-family;
  font-size: $fontsize;
  @include grid-top-bottom-padding($bottom, $top);
}

@mixin frozen-shadow-styles($depth, $color) {
  clip-path: $depth;
  box-shadow: $color;
}

@mixin frozen-cursor-styles {
  cursor: move;
  height: 100%;
  position: absolute;
  top: 0;
  width: 4px;
}

@mixin grid-top-bottom-padding($bottom, $top) {
  padding-bottom: $bottom;
  padding-top: $top;
}

@mixin grid-margin-padding($margin, $padding) {
  margin: $margin;
  padding: $padding;
}

@mixin grid-height-position-index($background, $position) {
  background-color: $background;
  height: 2px;
  position: $position;
  z-index: 5;
}

@mixin grid-flot-margin($float, $margin) {
  float: $float;
  margin: $margin;
}

@mixin grid-padding-left-right($left, $right) {
  padding-left: $left;
  padding-right: $right;
}

@mixin grid-line-height-padding-styles($lheight, $padding) {
  line-height: $lheight;
  padding: $padding;
}

@mixin grid-font-size-weight-styles($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

@mixin grid-border-style-weight($style, $width) {
  border-style: $style;
  border-width: $width;
}

@mixin grid-border-style-width-font-size-weight($style, $width, $size, $weight) {
  @include grid-border-style-weight($style, $width);
  @include grid-font-size-weight-styles($size, $weight);
}

@mixin grid-checkbox-styles {
  -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
  height: 1px;
  opacity: 0;
  width: 1px;
}

@mixin grid-checkfltrnmdiv-styles {
  height: 60px;
  padding: 23px;
  text-align: center;
}

@include export-module('grid-layout') {

  /*! Grid layout */
  .e-disableuserselect {
    user-select: none;
  }

  /*! Blazor column menu custom css */
  .e-contextmenu-container.e-sfcontextmenu.e-hide-menu {
    visibility: hidden;
  }

  .e-emptyicon {
    opacity: 0;
  }

  .e-device .e-flmenu-valuediv {
    padding: $grid-flmenu-device-padding;
  }

  .e-dialog {
    .e-xlfl-table {
      col {
        width: 50%;
      }

      .e-xlfl-radiodiv,
      .e-xlfl-matchcasediv {
        display: inline-block;
      }
    }
  }

  .e-grid-popup {
    position: absolute;
  }

  #{&}.e-grid,
  #{&}.e-grid-popup {
    .e-dialog.e-checkboxfilter,
    .e-dialog.e-flmenu {
      min-width: 250px;

      & .e-dlg-content {
        border-radius: $grid-filter-border-radius;
      }
    }

    [class ^= 'e-'] {
      box-sizing: border-box;
    }

    .e-flmenu-valuediv {
      padding: $grid-flmenu-padding;
    }

    .e-dialog.e-checkboxfilter {
      min-height: $grid-checkbox-filter-min-height;
      &.e-checkbox-dialog-wrapper {
        top: 64px;
        min-height: 80%;
        left: 0;
        overflow: hidden;
      }

      .e-searchcontainer {
        /* stylelint-disable */
        &.e-adaptive-filter-excel {
          position: absolute;
          height: 75% !important;
          width: 100%;
        }

        &.e-adaptive-filter-checkbox {
          position: absolute;
          height: 80% !important;
          width: 100%;
        }
        /* stylelint-enable */
      }
    }

    .e-checkboxfilter {
      .e-searchbox {
        display: block;
      }

      & .e-dlg-content {
        padding-left: $grid-checkbox-content-padding-left;
        @if $grid-skin == 'material3' {
          padding-top: 16px;
          padding-right: 16px;
        }
        /* stylelint-disable declaration-no-important */
        &.e-excel-filter-content {
          padding: 0 !important;
        }
        /* stylelint-enable declaration-no-important */
        @if $grid-skin == 'fluent2' {
          padding-right: 20px;
        }
      }

      & .e-footer-content {
        @if $grid-skin == 'fluent2' {
          padding-right: 20px;
          padding-left: 20px;
        }
      }

      & .e-ftrchk,
      & .e-searchbox {
        padding-left: $grid-checkbox-padding-topbottom;
      }
    }

    @if $grid-skin == 'fluent2' {
      .e-checkboxfilter .e-ftrchk.e-infinitescroll {
        padding-left: 0;
        margin-left: 0;
      }
    }

    .e-checkboxfiltertext {
      width: $grid-checkboxfiltertext-width;
      word-break: normal;
      /* stylelint-disable */
      @if $grid-skin == 'fluent' {
        margin-left: 12px !important;
      }
      /* stylelint-enable */
    }

    @if $grid-skin == 'tailwind3' {
      .e-checkbox-wrapper .e-checkboxfiltertext {
        font-weight: normal;
      }
    }

    .e-checkboxlist {
      height: 200px;
      margin-top: 5px;
      min-height: 160px;
      overflow-y: auto;
      &.e-checkbox-infinitescroll {
        border-top-style: solid;
        border-top-color: $grid-columnchooser-footer-border-color;
        border-top-width: 1px;
        margin-top: 0;
        overflow-x: auto;
        & .e-checkbox-wrapper .e-label.e-checkboxfiltertext{
          white-space: nowrap;
        }
      }

      @if $grid-skin == 'fluent2' {
        margin-left: -8px;
      }
    }

    .e-filter-popup.e-excelfilter .e-dlg-content {
      @if $grid-skin == 'fluent' {
        padding-bottom: 12px;
      }
    }

    &.e-rtl {
      .e-checkboxfilter {
        & .e-dlg-content {
          @include grid-padding-left-right($grid-rtl-checkbox-content-padding-left, $grid-checkbox-content-padding-left);
        }

        & .e-ftrchk,
        & .e-searchbox {
          @include grid-padding-left-right(0, $grid-checkbox-padding-topbottom);
        }
      }

      .e-searchclear,
      & .e-cc-searchdiv span.e-ccsearch-icon.e-icons {
        float: left;
      }
    }

    .e-searchclear {
      float: right;
    }

    .e-checkfltrnmdiv {
      @include grid-checkfltrnmdiv-styles;
    }

    .e-checkboxlist > span {
      padding-left: $grid-checkbox-padding-topbottom;
    }

    .e-chk-hidden {
      @include grid-checkbox-styles;
    }

    .e-checkselect,
    .e-checkselectall {
      margin: 0;
      opacity: 0;
      position: absolute;
      width: 0;
    }

    .e-ftrchk {
      @include grid-top-bottom-padding($grid-checkbox-padding-topbottom, $grid-checkbox-padding-topbottom);
      @if $grid-skin == 'fluent2' {
        @include grid-top-bottom-padding(4px, 4px);
      }
      @if $grid-skin == 'material3' {
        margin-left: -4px;
      }
    }

    .e-ccdlg.e-sticky {
      position: fixed;
      z-index: 10;
    }

    .e-ccdlg.e-cc .e-dlg-header-content {
      @if $grid-skin == 'fluent' {
        padding: 11px 24px 13px;
      }
      @if $grid-skin == 'fluent2' {
        padding-left: 20px;
      }
    }

    .e-rtl.e-ccdlg .e-ccul-ele {
      @if $grid-skin == 'tailwind3' {
        margin: 0 0 0 13px;
      }
    }

    .e-ccdlg {
      .e-dlg-content {
        @include grid-margin-padding($grid-columnchooser-content-margin, $grid-columnchooser-content-padding);
        overflow: visible;
      }

      .e-checkbox-wrapper.e-control.e-keyboard {
        padding-left: $grid-cc-checkbox-padding-left;
      }

      .e-main-div {
        box-sizing: border-box;
        position: relative;
      }

      .e-ccul-ele {
        @include grid-margin-padding($grid-columnchooser-ul-margin, $grid-columnchooser-ul-padding);
      }

      .e-checkbox-infinitescroll .e-ccul-ele {
        margin: 0;
      }

      li.e-cclist {
        padding: $grid-columnchooser-li-padding;
        &.e-cclist-hidden{
          list-style: none;
        }
      }

      .e-checkbox-wrapper .e-frame {
        margin-left: 0;
      }

      label.e-cc {
        margin: 0;
      }

      .e-footer-content {
        @include grid-border-style-weight(solid, $grid-column-chooser-footdiv);
        @if $grid-skin == 'fluent2' {
          padding-right: 20px;
          padding-left: 20px;
        }
      }

      .e-cc-contentdiv {
        height: 196px;
        overflow-y: auto;
      }

      .e-cc-contentdiv.e-checkbox-infinitescroll {
        border-top-style: $grid-border-type;
        border-top-width: $grid-border-size;
        border-top-color: $grid-columnchooser-footer-border-color;
      }

      .e-cc-searchdiv {
        @include grid-border-style-weight(solid, $grid-column-chooser-searchdiv);
        left: $grid-column-chooser-searchdiv-left;
        opacity: $grid-column-chosser-searchdiv-opactiy;
        position: absolute;
        right: 0;
        top: $grid-column-chosser-searchdiv-top;

        span.e-ccsearch-icon.e-icons {
          float: right;
          opacity: .6;
          padding: $grid-column-chooser-search-icon-padding;
        }

        span.e-ccsearch-icon.e-cc-cancel {
          font-size: $grid-column-chooser-cancel-icon-size;
          padding: $grid-column-chooser-cancel-icon-padding;
        }
      }

      .e-cc-searchdiv.e-input-focus {
        opacity: $grid-column-chosser-searchdiv-fopactiy;

        span.e-ccsearch-icon.e-icons {
          opacity: $grid-columnchooser-cancel-icon-content-f-opactiy;
        }
      }

      .e-innerdiv.e-ccnmdiv {
        @include grid-checkfltrnmdiv-styles;
      }

      .e-cc-lab-name,
      .e-checkbox-wrapper .e-label {
        text-overflow: ellipsis;
        width: $grid-columnchooser-checkbox-label-width;
      }

      .e-cc-chbox {
        margin: 3px;
        vertical-align: middle;
      }

      .e-cc-lab-name {
        padding: 7px;
        vertical-align: middle;
      }

      .e-cc.e-input,
      .e-cc.e-input:focus {
        border: $grid-columnchooser-input-border;
        @include grid-top-bottom-padding($grid-columnchooser-input-padding-bottom, $grid-columnchooser-input-padding-top);
        padding-left: $grid-columnchooser-input-padding-left;
      }
    }

    & .e-mask {
      &.e-skeleton {
        display: inline-block;
        height: 10px;
        width: 80%;
      }

      &.e-mask-group-intent {
        margin-left: 7px;
        width: 16px;
      }

      &.e-mask-detail-intent {
        width: 16px;
      }

      &.e-mask-checkbox-intent {
        margin-left: 3px;
        margin-right: 16px;
        width: 20px;
      }

      &.e-mask-checkbox-filter-intent {
        width: 13px;
      }

      &.e-mask-checkbox-filter-span-intent {
        margin-left: 8px;
      }

      &.e-mask-drag-intent {
        margin-left: 12px;
        width: 12px;
      }
    }
  }

  #{&}.e-grid {
    @include grid-border-style-weight(none $grid-border-type $grid-border-type, $grid-border-size);
    border-radius: $grid-border-radius;
    display: block;
    font-family: $grid-font-family;
    font-size: $grid-font-size;
    height: auto;
    position: relative;

    .e-noselect,
    .e-gridheader .e-headercell,
    .e-gridheader .e-detailheadercell,
    .e-gridheader {
      user-select: none;
    }

    .e-groupdroparea.e-sticky,
    .e-toolbar.e-sticky,
    .e-gridheader.e-sticky {
      position: sticky;
      z-index: 10;
    }

    .e-gridheader.e-sticky .e-headercontent .e-reorderuparrow,
    .e-gridheader.e-sticky .e-headercontent .e-reorderdownarrow {
      position: fixed;
      z-index: 10;
    }

    .e-groupdroparea.e-sticky {
      opacity: 1;
    }

    .e-gridheader .e-firstrow-dragborder,
    &.e-rtl .e-gridheader .e-firstrow-dragborder,
    .e-gridcontent .e-lastrow-dragborder,
    &.e-rtl .e-gridcontent .e-lastrow-dragborder {
      bottom: 0;
      @include grid-height-position-index($grid-e-firstrow-dragborder-bcolor, absolute);
    }

    .e-frozenrow-border {
      @include grid-height-position-index($frozen-border-color, relative);
    }

    &.e-lib.e-top-shadow .e-frozenrow-border {
      box-shadow: 0 4px 8px $grid-frozen-row-shadow-background-color, inset 0 2px 4px $grid-frozen-row-shadow-inset-color;
    }

    .e-frozenrow-border.e-frozenrow-empty {
      height: 0;
    }

    /* stylelint-disable */
    &.e-top-shadow .e-frozenrow-border {
      background-color: transparent !important;
      @include frozen-shadow-styles(inset(0 0 -15px 0), 0 4px 8px $grid-frozen-row-shadow-background-color);
    }
    /* stylelint-enable */

    .e-dropitemscount {
      border: 1px solid $grid-clone-dropitemscount-border;
      border-radius: $grid-border-radius-17;
      box-sizing: border-box;
      font-size: 12px;
      @include grid-line-height-padding-styles(normal, $grid-bigger-drag-count-padding);
      margin-left: $grid-dropitems-count-margin-left;
      @if $grid-skin == 'tailwind' {
        margin-left: -7px;
      }
      min-width: 12px;
      position: absolute;
      text-align: center;
      top: $grid-bigger-drag-count-top;
      z-index: 5;
      @if $grid-skin == 'tailwind3' {
        font-weight: 500;
        font-size: 10px;
      }
    }

    /* stylelint-disable */
    &.e-rtl .e-dropitemscount {
      left: $grid-rtl-mselect-dd-indicator-left !important;
    }
    /* stylelint-enable */

    &.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper{
      & .e-sicon.e-clear-icon {
        @include grid-margin-padding($grid-rtl-toolbar-search-clear-icon-padding, $grid-rtl-toolbar-search-clear-icon-margin);
      }
    }

    &.e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop,
    &.e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop{
      border-top: 1px solid $grid-cell-border-color;
      border-right: 1px solid $grid-cell-border-color;
      border-bottom: 0;
    }

    .e-gridcontent,
    .e-gridheader,
    &.e-rtl .e-gridcontent,
    &.e-rtl .e-gridheader {
      & tr.e-row:first-child .e-rowcell.e-dragborder,
      & .e-rowcell.e-dragborder,
      & .e-rowdragdrop.e-dragborder,
      & .e-detailrowcollapse.e-dragborder,
      & .e-detailrowexpand.e-dragborder {
        z-index: $grid-dragborder-z-index;
        box-shadow: $grid-dragborder-box-shadow;
      }

      & tr.e-row:first-child .e-rowcell.e-dragborder.e-leftfreeze,
      & tr.e-row:first-child .e-rowcell.e-dragborder.e-rightfreeze,
      & tr.e-row:first-child .e-rowcell.e-dragborder.e-fixedfreeze,
      & .e-rowcell.e-dragborder.e-leftfreeze,
      & .e-rowcell.e-dragborder.e-rightfreeze,
      & .e-rowcell.e-dragborder.e-rightfreeze,
      & .e-rowdragdrop.e-dragborder.e-leftfreeze,
      & .e-rowdragdrop.e-dragborder.e-rightfreeze,
      & .e-rowdragdrop.e-dragborder.e-fixedfreeze,
      & .e-detailrowcollapse.e-dragborder.e-leftfreeze,
      & .e-detailrowcollapse.e-dragborder.e-rightfreeze,
      & .e-detailrowcollapse.e-dragborder.e-fixedfreeze,
      & .e-detailrowexpand.e-dragborder.e-leftfreeze,
      & .e-detailrowexpand.e-dragborder.e-rightfreeze,
      & .e-detailrowexpand.e-dragborder.e-fixedfreeze {
        z-index: 6;
      }

      & .e-rowcell.e-dragtop,
      & .e-rowdragdrop.e-dragtop,
      & .e-rowcell.e-dragtop.e-dragright {
        border-top: $grid-dragborder-cell-dashed;
      }
      & .e-rowdragdrop.e-dragtop.e-dragleft,
      & .e-rowdragdrop.e-dragleft,
      & .e-rowdragdrop.e-dragbottom.e-dragleft {
        border-left: $grid-dragborder-cell-dashed;
      }
      & .e-rowcell.e-dragright {
        border-right: $grid-dragborder-cell-dashed;
      }
      & .e-rowcell.e-dragbottom,
      & .e-rowcell.e-lastrowcell.e-dragbottom,
      & .e-rowcell.e-dragtop.e-dragbottom,
      & .e-rowdragdrop.e-dragbottom {
        border-bottom: $grid-dragborder-cell-dashed;
      }

      & tr.e-row:first-child .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
      & .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
      & .e-rowdragdrop.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
      & .e-detailrowcollapse.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
      & .e-detailrowexpand.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze) {
        position: $grid-dragborder-position;
      }
    }

    .e-gridheader thead .e-icons:not(.e-check):not(.e-stop) {
      font-size: $grid-icon-font-size;
    }

    .e-row {
      .e-icon-rowdragicon::before {
        display: block;
        text-indent: 10px;
        color: $grid-drap-drop-icon-color;
        opacity: $grid-drag-icon-opacity;
      }

      .e-icon-rowdragicon::before,
      .e-icon-rowdragmoveicon::before {
        @include grid-font-size-weight-styles($grid-drag-font-size, $grid-drag-icon-font-weight);
      }

      .e-icon-rowdragmoveicon {
        padding-left: $grid-drag-move-icon;
      }
    }

    .e-draganddrop .e-rowcell,
    &.e-rtl .e-draganddrop .e-rowcell {
      @include grid-padding-left-right(6px, 6px);
    }

    .e-gridcontent .e-rowdragdrop,
    .e-gridheader .e-rowdragdrop {
      @include grid-border-style-weight($grid-dragcell-border-style, $grid-dragicon-cell-border);
      border-color: $grid-dragcell-border-color;
    }

    .e-gridcontent {
      .e-rowdragdrop.e-lastrowcell,
      .e-recordpluscollapse.e-lastrowcell,
      .e-indentcell.e-lastrowcell,
      .e-groupcaption.e-lastrowcell {
        border-bottom-width: $grid-border-bottom-width;
      }
    }

    .e-gridcontent .e-groupcaptionrow .e-lastrowcell.e-recordplusexpand ~ td.e-lastrowcell {
      &.e-groupcaption,
      &.e-summarycell {
        border-bottom-width: 0;
      }
    }

    & .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
      position: relative;
      left: -5px;
    }

    .e-icon-rowdragicon {
      font-size: $grid-group-right-arrow-icon-font-size;
      text-indent: $group-expand-icon-text-indent;
    }

    .e-toolbar {
      border-bottom: 0;
      border-left: 0;
      border-right: 0;
      border-top: $grid-toolbar-border-width $grid-header-border-color;
      border-radius: $grid-border-radius-0;

      .e-toolbar-item.e-search-wrapper {
        & .e-sicon.e-clear-icon {
          padding: $grid-toolbar-search-clear-icon-padding;
          min-width: $grid-toolbar-search-clear-icon-min-width;
          margin-right: $grid-toolbar-search-clear-icon-margin-right;
        }

        & .e-sicon.e-clear-icon::before {
          font-size: $grid-toolbar-search-clear-icon-font-size;
        }
      }
    }

    & .e-toolbar-items {
      & .e-input-group-icon.e-icons.e-sicon:hover:not(.e-clear-icon),
      & .e-input-group-icon.e-icons.e-sicon:active:not(.e-clear-icon),
      & .e-input-group-icon.e-icons.e-sicon:focus:not(.e-clear-icon) {
        background: none;
        box-shadow: none;
      }
      & .e-input-group-icon.e-icons.e-sicon:not(.e-clear-icon) {
        border: none;
      }
    }

    &:not(.sf-grid).e-rtl .e-res-toolbar .e-toolbar-items .e-responsive-right .e-search-wrapper {
      &.e-toolbar-item:first-child {
        @if $grid-skin == 'tailwind3' {
          margin-right: -8px;
        }
        @if $grid-skin == 'material3' {
          margin-right: -2px;
        }
        @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap4' or $grid-skin == 'bootstrap5.3' or $grid-skin == 'fluent2' {
          margin-right: -10px;
        }
      }
    }

    &:not(.sf-grid) .e-res-toolbar .e-toolbar-items .e-search-wrapper {
      & .e-search-icon {
        padding: $grid-res-toolbar-search-wrapper-icon-padding;
        @if $grid-skin == 'bootstrap5.3' {
          padding: 9px 8px;
        }
        @if $grid-skin == 'bootstrap4' {
          padding: 9px 9.5px;
        }
      }
    }

    .e-res-toolbar {
      border-bottom: 1px solid;
      border-bottom-color: $grid-header-border-color;
      @if $grid-skin == 'fluent2' {
        min-height: 56px;
      }
      & .e-toolbar-items {
        min-height: initial;
        @if $grid-skin == 'fluent2' {
          & .e-toolbar-item {
            min-height: 56px;
          }
        }

        & .e-tbar-btn:hover,
        & .e-tbar-btn:active,
        & .e-tbar-btn:focus,
        & .e-search-icon:hover,
        & .e-search-icon:active,
        & .e-search-icon:focus,
        & .e-sicon.e-clear-icon:hover,
        & .e-sicon.e-clear-icon:active,
        & .e-sicon.e-clear-icon:focus {
          @if $grid-skin != 'fluent2' {
            background: none;
          }
          & .e-icons {
            @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap4' or $grid-skin == 'bootstrap5.3' {
              color: $grid-responsive-toolbar-icon-color;
            }
          }
        }
        & .e-icons {
          color: $grid-responsive-toolbar-icon-color;
        }

        & .e-toolbar-left {
          & .e-toolbar-item {
            & .e-tbar-btn {
              & .e-resfilter-icon {
                font-size: $grid-responsive-toolbar-filter-font-size;
              }
            }
          }
        }

        & .e-responsive-right {
          width: $grid-toolbar-responsive-right-width;
          &.e-search-wrapper {
            width: auto;
          }

          & .e-search-wrapper {
            & .e-input-group::before,
            & .e-input-group::after {
              background: none;
            }
          }
        }

        & .e-toolbar-right:not(.e-responsive-right) {
          & .e-search-wrapper:not(.e-responsive-right) {
            min-width: 40px;
          }
        }

        & .e-toolbar-right {
          & .e-search-wrapper {
            @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
            & .e-search-icon {
              font-size: $grid-res-toolbar-search-icon-font-size;
              margin-top: 0;
              padding: $grid-res-toolbar-search-wrapper-icon-padding;
            }

            & .e-input-group {
              border: 0;
              opacity: 1;
              padding: $grid-responsive-tbar-btn-bgr-padding;
              padding-right: $grid-responsive-search-icon-right;
              width: 100%;
              @if $grid-skin == 'fluent2' {
                border: 1px solid;
                border-color: $grid-header-border-color;
              }
              & .e-input {
                margin-top: $grid-responsive-search-place-holder-margin-top;
              }

              & .e-search-icon {
                margin-top: $grid-responsive-search-icon-margin;
                padding-left: $grid-responsive-search-left-padding;
              }
            }
          }
          & .e-search-wrapper:has(.e-input-group) {
            width: 100%;
          }
        }

        & .e-responsive-right {
          & .e-search-wrapper {
            padding-left: 0;
          }
        }
      }
    }

    &.e-rtl .e-res-toolbar {
      & .e-toolbar-items {
        & .e-responsive-right {
          & .e-search-wrapper {
            .e-sicon.e-clear-icon {
              margin: $grid-rtl-responsive-toolbar-search-clear-icon-margin;
            }
            padding-left: 26px;
          }
        }
      }
    }

    .e-toolbar-items .e-toolbar-item.e-search-wrapper {
      @include grid-top-bottom-padding($grid-toolbar-search-wrapper-padding-bottom, $grid-toolbar-search-wrapper-padding-top);

      & .e-search:focus {
        opacity: $grid-toolbar-searchbar-text-opacity;
      }

      & .e-search::placeholder {
        color: $grid-toolbar-placeholder-text-color;
      }

      & .e-search {
        margin-bottom: $grid-toolbar-search-margin-bottom;
        opacity: $grid-toolbar-text-opacity;
        width: $grid-toolbar-search-width;

        &.e-input-focus {
          opacity: 1;
        }

        .e-search-icon {
          min-width: $grid-toolbar-search-icon-min-width;
        }
      }
    }

    & .e-group-animator {
      .e-groupheadercell,
      .e-groupheadercell:hover {
        margin: $grid-group-animator-cell-margin;
        border-bottom-width: $grid-animtor-border-bottom-width;
      }
    }

    & .e-groupdroparea.e-group-animate.e-grouped {
      height: $grid-group-animator-bigger-drop-height;
      padding: $grid-animator-area-padding;
      // height: auto;
      border-bottom-width: $grid-animator-area-border;
    }

    &.e-rtl {
      .e-group-animator {
        float: right;
        .e-icon-drag.e-icons {
          @if $grid-skin == 'material3' {
            margin-right: $grid-animator-drag-margin-left;
            margin-left: -8px;
          }
        }
      }

      .e-group-animate .e-groupheadercell,
      .e-group-animate .e-groupheadercell:hover {
        margin-right: 0;
        margin-left: 0;
        @if $grid-skin == 'fluent2' {
          margin: 8px;
        }
      }

      .e-group-animate.e-groupdroparea .e-nextgroup {
        transform: rotate(180deg);
        margin-top: $grid-animator-margin-top-rtl;
      }
    }

    .e-group-animate.e-groupdroparea .e-nextgroup {
      margin-top: $grid-animator-area-margin;
    }

    .e-group-animate span.e-nextgroup.e-icons.e-icon-next {
      display: $grid-animator-chips-display;
      line-height: $grid-animator-line-height-next;
      float: $grid-rtlfltrdiv-float;
      @include animator-drag-styles;
      @if $grid-skin == 'tailwind3' {
        font-size: 14px;
      }
    }

    .e-groupdroparea.e-group-animate .e-drag.e-icon-drag {
      font-size: $grid-animator-font-size-drag;
      line-height: $grid-animator-drag-icon-line-height;
      display: $grid-animator-chips-display;
      @include animator-drag-styles;
    }

    .e-groupdroparea.e-group-animate .e-drag.e-icon-drag:hover {
      @if $grid-skin == 'material3' {
        background: none;
      }
    }

    .e-group-animate {
      .e-icon-drag.e-icons {
        margin-left: $grid-animator-drag-margin-left;
        @if $grid-skin == 'material3' {
          margin-right: -8px;
        }
      }

      .e-drag.e-icon-drag::before {
        opacity: $grid-animator-opacity;
      }

      span.e-nextgroup.e-icons.e-icon-next:hover {
        @if $grid-skin == 'material3' or $grid-skin == 'tailwind3' {
          background-color: $transparent;
        }
      }
    }

    .e-groupdroparea.e-group-animate span.e-drag.e-icons.e-icon-drag {
      cursor: move;
    }

    .e-groupdroparea.e-grouped {
      padding: $grid-grouped-padding;
    }

    .e-groupdroparea.e-grouped.e-hover {
      @if $grid-skin == 'tailwind' {
        padding: 0 1px 1px;
      }
      @else if $grid-skin == 'fluent' {
        padding-bottom: 0;
      }
    }

    &.e-default .e-gridheader.e-stackedfilter {
      .e-grouptopleftcell {
        border-top: 0;
      }

      tr:first-child th.e-grouptopleftcell {
        border-bottom: 1px solid;
      }

      tr:last-child th.e-grouptopleftcell {
        border-top: 1px solid;
      }
    }

    &.e-default.e-horizontallines .e-gridheader.e-stackedfilter {
      .e-grouptopleftcell {
        border-top: 0;
      }

      tr:first-child th.e-grouptopleftcell {
        border-bottom: 1px solid;
      }

      tr:last-child th.e-grouptopleftcell {
        border-top: 1px solid;
      }
    }

    &.e-default.e-verticallines .e-gridheader.e-stackedfilter {
      .e-grouptopleftcell {
        border-top: 0;
      }

      tr:last-child th.e-grouptopleftcell {
        border-top: 0;
      }
    }

    &.e-default.e-hidelines .e-gridheader.e-stackedfilter {
      tr:first-child th.e-grouptopleftcell {
        border-bottom: 0;
      }

      .e-filterbarcell {
        border-top-width: 1px;
      }
    }

    &.e-default {
      .e-grouptopleftcell,
      .e-rowdragheader {
        border-top: $grid-grouptopleftcell-border-top;
      }

      &:not(.e-verticallines) tr.e-grid-pin-row .e-grouptopleftcell {
        border-top: 1px solid $grid-cell-border-color;
      }
    }

    &.e-default .e-gridheader .e-headercell.e-firstheader,
    &.e-default.e-horizontallines .e-headercell.e-firstheader {
      border-left: 1px solid;
    }

    &.e-default.e-verticallines,
    &.e-default.e-bothlines,
    &.e-default.e-hidelines {
      .e-grouptopleftcell,
      .e-rowdragheader {
        border-top-width: 0;
      }
    }

    &.e-default.e-verticallines,
    &.e-default.e-hidelines {
      & .e-detailrowcollapse,
      & .e-detailrowexpand,
      & .e-rowdragdrop {
        border-top-width: 0;
      }
    }

    &.e-verticallines,
    &.e-bothlines {
      .e-firstchildrow .e-rowdragdropcell {
        border-top-width: 1px;
      }
    }

    &.e-default.e-horizontallines .e-grouptopleftcell {
      border-top: 1px solid;
    }

    & .e-gridheader .e-headercell {
      .e-rhandler,
      .e-rsuppress {
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 4px;
      }
    }

    & .e-gridheader .e-headercell.e-leftfreeze.e-freezeleftborder .e-rhandler {
      border-right: 0;
    }

    &.e-default.e-hidelines .e-headercell.e-firstheader,
    &.e-rtl .e-gridheader .e-headercell.e-leftfreeze.e-freezeleftborder .e-rhandler {
      border-left: 0;
    }

    &.e-device .e-gridheader .e-headercell .e-rhandler {
      width: 14px;
    }

    &.e-rtl .e-gridheader .e-headercell {
      .e-rhandler,
      .e-rsuppress {
        left: 0;
        right: auto;
      }
    }

    &.e-resize-lines .e-gridheader {
      th.e-headercell.e-lastcell .e-rhandler {
        border-right-width: 0;
      }
    }

    & .e-rhelper {
      position: absolute;
      width: $grid-resize-border-width;
    }
    &:not(.sf-grid) .e-rhelper {
      width: 2px;
    }

    & .e-rhelper,
    & .e-virtual-rhandler {
      z-index: 5;
    }

    &.e-device .e-ricon::before {
      @include ricon-style;
      border-right: 6px solid;
      right: 4px;
    }

    &.e-device .e-ricon::after {
      @include ricon-style;
      left: 4px;
      border-left: 6px solid;
      z-index: 3;
    }

    &.e-rcursor,
    & .e-gridheader .e-stackedheadercell.e-rcursor,
    & .e-gridheader .e-rcursor {
      cursor: col-resize;
    }

    .e-disablepointer,
    .e-defaultcur,
    .e-headercell,
    .e-headercell.e-stackedheadercell,
    .e-headercell.e-defaultcursor,
    &.e-editing .e-gridheader .e-rcursor {
      cursor: default;
    }

    .e-table {
      border-collapse: separate;
      table-layout: fixed;
      width: 100%;
      .e-rowcell{
        &.e-textAlign-left{
          text-align: left;
          width: 190px;
        }
        &.e-textAlign-right{
          text-align: right;
          width: 190px;
        }
        &.e-adaptive-align-left{
          text-align: left;
          padding: 6px;
        }
        &.e-adaptive-align-right{
          text-align: right;
          padding: 6px;
        }
      }
    }

    .e-tableborder {
      border-right: 1px solid;
    }

    .e-tableborder:has(.e-emptyrow) {
      border: none;
    }

    .e-virtualtable {
      will-change: transform;
      z-index: 1;
    }

    .e-content .e-grid-pin-row td{
      font-weight: bold;
    }

    .e-headercelldiv {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;
      border: 0 none;
      @include grid-font-size-weight-styles($grid-header-font-size, $grid-header-font-weight);
      line-height: $grid-headercelldiv-line-height;
      overflow: hidden;
      text-align: left;
      text-transform: $grid-header-text-transform;
      user-select: none;
      &.e-headercell-border {
        margin: 5px 0 2px;
        border-color: rgba(0, 0, 0, .08);
        border-bottom-style: solid;
        border-bottom-width: 1px;
      }
    }

    .e-headercelldiv.e-headerchkcelldiv {
      overflow: visible;
    }

    .e-headercell.e-templatecell .e-headercelldiv {
      height: auto;
      min-height: $grid-header-height;
    }

    .e-gridheader .e-headercontent {
      .e-rightalign .e-headercelldiv.e-headerchkcelldiv {
        justify-content: right;
      }
      .e-centeralign .e-headercelldiv.e-headerchkcelldiv {
        justify-content: center;
      }

      .e-reorderuparrow,
      .e-reorderdownarrow,
      .e-reorderuparrow-virtual,
      .e-reorderdownarrow-virtual {
        font-size: $grid-reorderarrow-font-size;
        margin-left: $grid-reorderarrow-margin-left;
        margin-top: $grid-reorderarrow-margin-top;
        position: absolute;
        z-index: 10;
      }

      .e-reorderuparrow {
        margin-top: $grid-reorderarrow-margin-top;
      }

      .e-reorderdownarrow {
        margin-top: $grid-reorderdownarrow-margin-top;
      }
    }

    .e-filtermenudiv:hover,
    .e-headercell.e-mousepointer,
    .e-headercell.e-stackedheadercell.e-mousepointer {
      cursor: pointer;
    }

    &:not(.e-left-shadow, .e-right-shadow) .e-gridcontent {
      & tr:first-child td {
        border-top: 0 none;
      }
    }

    .e-gridcontent {
      & tr:first-child td.e-xlsel-top-border {
        border-top-width: 2px;
      }
    }

    .e-gridheader {
      & tr:first-child:not(.e-grid-pin-row) th:not(.e-freezeleftborder, .e-freezerightborder) {
        border-top: 0 none;
      }

      & tr th:last-child.e-filterbarcell  {
        padding-right: $grid-filterbarcell-first-last-child-padding-left;
      }

      & tr th:first-child.e-filterbarcell {
        padding-left: $grid-filterbarcell-first-last-child-padding-left;
      }
    }

    .e-gridheader {
      border-bottom-style: $grid-border-type;
      border-bottom-width: $grid-bottom-border-size;
      @include gridheader-border-styles;
    }

    .e-frozenhdr {
      border-bottom-width: 0;
    }

    &.e-bothlines {
      .e-filterbarcell,
      .e-filterbarcelldisabled {
        border-width: $grid-filtercell-both-border-width;
        border-top-width: 1px;
      }
    }

    .e-headercell,
    .e-detailheadercell {
      @include grid-border-style-width-font-size-weight($grid-border-type, $grid-header-border-width, $grid-header-font-size, $grid-header-font-weight);
      height: $grid-headercell-line-height;
      overflow: hidden;
      padding: $grid-header-top-padding $grid-header-padding $grid-header-bottom-padding;
      position: relative;
      text-align: left;
    }

    &.e-device {
      .e-headercell {
        padding: $grid-device-headercell-padding;
      }

      .e-headercell:first-child {
        padding: $grid-device-headercell-fistchild-padding;
      }

      .e-headercell:last-child {
        padding: $grid-device-headercell-lastchild-padding;
      }
    }

    .e-rowcell {
      @include grid-border-style-weight($grid-border-type, $grid-rowcell-broder-width);
      display: table-cell;
      font-size: $grid-content-font-size;
      @include grid-line-height-padding-styles($grid-rowcell-line-height, $grid-content-padding $grid-content-right-padding);
      overflow: hidden;
      vertical-align: middle;
      white-space: nowrap;
      width: auto;
    }

    th.e-detailcell td.e-rowcell.e-rightalign,
    td.e-rowcell.e-rightalign,
    th.e-headercell.e-rightalign .e-headercelldiv,
    th.e-headercell.e-rightalign .e-stackedheadercelldiv,
    td.e-summarycell.e-rightalign {
      text-align: right;
    }

    th.e-detailcell td.e-rowcell.e-leftalign,
    td.e-rowcell.e-leftalign,
    th.e-headercell.e-leftalign .e-headercelldiv,
    th.e-headercell.e-leftalign .e-stackedheadercelldiv,
    td.e-summarycell.e-leftalign,
    .e-masked-cell.e-rowcell.e-leftalign {
      text-align: left;
    }

    th.e-detailcell td.e-rowcell.e-centeralign,
    td.e-rowcell.e-centeralign,
    th.e-headercell.e-centeralign .e-headercelldiv,
    th.e-headercell.e-centeralign .e-stackedheadercelldiv,
    td.e-summarycell.e-centeralign,
    .e-masked-cell.e-rowcell.e-centeralign {
      text-align: center;
    }

    th.e-detailcell td.e-rowcell.e-justifyalign,
    td.e-rowcell.e-justifyalign,
    th.e-headercell.e-justifyalign .e-headercelldiv,
    th.e-headercell.e-justifyalign .e-stackedheadercelldiv,
    td.e-summarycell.e-justifyalign {
      text-align: justify;
    }

    .e-gridcontent td.e-rowcell.e-unboundcell .e-unboundcelldiv {
      display: inline-block;
    }

    .e-rowcell.e-gridchkbox {
      @if $grid-skin == 'fluent' {
        padding-left: 8px;
      }
    }

    &.e-left-shadow,
    &.e-rtl.e-left-shadow,
    &.e-rtl.e-default.e-left-shadow,
    &.e-wrap.e-left-shadow {
      .e-leftfreeze.e-freezeleftborder.e-focused:not(.e-menu-item,.e-xlsel-top-border,.e-xlsel-left-border,.e-xlsel-bottom-border,.e-xlsel-right-border) {
        line-height: $grid-rowcell-autofill-top-line-height;
        border-width: 1.5px;
      }
    }

    &.e-right-shadow,
    &.e-rtl.e-right-shadow,
    &.e-rtl.e-default.e-right-shadow,
    &.e-wrap.e-right-shadow {
      .e-rightfreeze.e-freezerightborder.e-focused:not(.e-menu-item,.e-xlsel-top-border,.e-xlsel-left-border,.e-xlsel-bottom-border,.e-xlsel-right-border) {
        line-height: $grid-rowcell-autofill-top-line-height;
        border-width: 1.5px;
      }
    }

    &:not(.e-grid-min-height) .e-gridcontent .e-content tr.e-insertedrow .e-rowcell:empty,
    & .e-row.e-emptyrow {
      height: $grid-rowcell-line-height + $grid-content-padding + $grid-content-padding + 1;
    }

    .e-editedrow,
    .e-addedrow {
      .e-input-group input.e-input,
      .e-input-group.e-control-wrapper input.e-input {
        min-height: unset;
      }
    }

    &:not(.e-grid-min-height) .e-gridcontent {
      tr td:not(.e-indentcell):first-child:empty,
      tr.e-row .e-rowcell:empty {
        height: $grid-rowcell-line-height + $grid-content-padding + $grid-content-padding;
      }
    }

    @if $grid-skin == 'fluent2' or $grid-skin == 'tailwind3' {
      &:not(.e-grid-min-height) .e-editedrow,
      &:not(.e-grid-min-height) .e-addedrow {
        .e-normaledit .e-rowcell {
          height: $grid-rowcell-line-height + $grid-content-padding + $grid-content-padding;
        }
      }
    }

    &.e-afenabled,
    &.e-enabledboxbdr {
      .e-headercontent {
        position: relative;
      }
    }

    .e-unboundcell,
    .e-editedrow .e-normaledit .e-unboundcell,
    .e-addedrow .e-normaledit .e-unboundcell {
      @include grid-top-bottom-padding(4px, 4px);
    }

    .e-unboundcelldiv > button {
      margin: $grid-unboundcelldiv-margin;
      @if $grid-skin == 'material3' {
        border-radius: $grid-border-radius-8;
      }
    }

    .e-unboundcelldiv {
      margin: 0 -3.5px;
    }

    .e-summarycell {
      @include grid-border-style-width-font-size-weight(solid, 1px 0 0, $grid-summary-cell-font-size, $grid-header-font-weight);
      @if $grid-skin == 'fluent2' or $grid-skin == 'tailwind3' {
        font-weight: $font-weight-medium;
      }
      height: auto;
      @include grid-line-height-padding-styles($grid-summary-cell-line-height, $grid-content-padding $grid-content-right-padding);
      @if $grid-skin == 'tailwind' {
        padding: $grid-group-caption-header-padding $grid-content-right-padding;
      }
      white-space: normal;
      text-wrap: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &.e-lastrowcell {
        border-bottom-width: 1px;
      }
    }

    .e-summarycontent {
      & .e-indentcell {
        border-width: 1px 0 0;
      }

      & .e-detailindentcelltop {
        border-width: 1px 0 0;
      }
    }

    &.e-device {
      .e-rowcell,
      .e-summarycell {
        padding: $grid-device-rowcell-padding;
      }

      .e-rowcell:first-child,
      .e-summarycell:first-child {
        padding: $grid-device-rowcell-firstchild-padding;
      }

      .e-rowcell:last-child,
      .e-summarycell:last-child {
        padding: $grid-device-rowcell-lastchild-padding;
      }
    }

    td.e-rowcell.e-checkbox {
      padding: $grid-checkbox-cell-padding-top-bottom $grid-content-right-padding;
      input[type = 'checkbox'] {
        margin-top: $grid-td-checkbox-margin-top;
      }
    }

    &.e-default {
      .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border),
      .e-detailrowcollapse.e-lastrowcell {
        border-bottom-width: 1px;
      }

      .e-detailrow .e-lastrowcell {
        border-bottom: 1px solid;
        border-bottom-color: $grid-header-border-color;
      }

      .e-headercell,
      .e-detailheadercell {
        border-width: $grid-header-border-width;
      }

      .e-stackedheadercell {
        border-width: $grid-stackedheadercell-border-size;
      }

      .e-stackedheadercell.e-leftfreeze,
      .e-stackedheadercell.e-rightfreeze {
        border-top-width: 0;
      }

      .e-stackedheadercell.e-leftfreeze.e-freezeleftborder {
        border-right-width: 2px;
      }

      .e-stackedheadercell.e-rightfreeze.e-freezerightborder {
        border-left-width: 2px;
      }

      .e-stackedheadercell.e-fixedfreeze.e-freezeleftborder {
        border-left-width: 1px;
      }

      .e-stackedheadercell.e-fixedfreeze.e-freezerightborder {
        border-right-width: 1px;
      }

      .e-gridheader th.e-firstcell.e-movablefirst {
        border-left-width: 0;
      }
    }

    &.e-bothlines {
      .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border) {
        border-bottom-width: 1px;
      }

      .e-rowcell {
        border-width: $grid-rowcell-both-border-width;
      }
    }

    &:not(.sf-grid).e-gridheader table th[rowspan],
    &:not(.sf-grid).e-device .e-gridheader table th[rowspan] {
      padding-bottom: $grid-stackedheadercell-botttom-padding;
      vertical-align: bottom;
    }

    .e-emptyrow td {
      @include grid-line-height-padding-styles($grid-rowcell-line-height, .7em);
    }

    &.e-responsive {
      .e-rowcell,
      .e-headercelldiv {
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-rowcell.e-gridchkbox,
      .e-rowcell.e-gridchkbox-cell,
      .e-headercelldiv.e-headerchkcelldiv,
      .e-rowcell.e-boolcell {
        text-overflow: clip;
      }
    }

    .e-addedrow .e-rowcell.e-boolcell .e-frame.e-check {
      color: $grid-checkmark-color;
    }

    @if $grid-skin == 'fluent2' {
      .e-rowcell .e-checkbox-wrapper .e-frame {
        margin: 0;
      }
      td.e-active.e-rowcell .e-checkbox-wrapper .e-frame {
        @if $theme-name =='fluent2-highcontrast' {
          border-color: rgb(0, 0, 0);
        }
      }
      .e-normaledit .e-rowcell .e-checkbox-wrapper.e-focus {
        box-shadow: none;
      }
    }

    [aria-selected] + tr .e-detailindentcell {
      @include gridheader-border-styles;
    }

    &.e-default.e-verticallines {
      tr th:first-child:not(.e-firstcell),
      tr th:first-child:not(.e-firstcell) {
        border-left-width: 0;
      }

      .e-headercell,
      .e-detailheadercell {
        border-width: 0 0 0 $grid-border-size;
      }

      .e-headercell.e-stackedheadercell {
        border-bottom: $grid-border-size solid $grid-header-border-color;
      }
    }

    &:not(.sf-grid).e-default.e-bothlines {
      .e-headercell,
      .e-detailheadercell {
        border-width: $grid-headercell-both-border-width;
      }
      .e-headercell.e-grid-group-first-cell,
      .e-headercell.e-first-visible-cell {
        border-left-width: 0;
      }
    }

    &:not(.sf-grid, .e-rtl).e-default.e-bothlines {
      .e-headercell.e-leftfreeze.e-freezeleftborder {
        border-right-width: 2px;
      }

      .e-headercell.e-rightfreeze.e-freezerightborder {
        border-left-width: 2px;
      }

      .e-headercell.e-fixedfreeze.e-freezerightborder {
        border-right-width: 1px;
      }
    }

    &.e-rtl:not(.sf-grid).e-default.e-bothlines {
      .e-headercell.e-leftfreeze.e-freezeleftborder {
        border-left-width: 2px;
      }

      .e-headercell.e-rightfreeze.e-freezerightborder {
        border-right-width: 2px;
      }

      .e-headercell.e-fixedfreeze.e-freezeleftborder {
        border-right-width: 1px;
      }
    }

    &:not(.sf-grid).e-default {
      &:not(.e-verticallines):not(.e-bothlines) table th[rowspan] {
        border-width: $grid-headercell-both-border-width;
      }
      table {
        th[rowspan].e-leftfreeze.e-freezeleftborder {
          border-right-width: 2px;
        }

        th[rowspan].e-rightfreeze.e-freezerightborder {
          border-left-width: 2px;
        }

        th[rowspan].e-fixedfreeze.e-freezeleftborder {
          border-left-width: 1px;
        }

        th[rowspan].e-fixedfreeze.e-freezerightborder {
          border-right-width: 1px;
        }
      }
    }

    tr th.e-firstcell {
      @include grid-border-width-styles;
    }

    &.e-default tr {
      & th.e-detailheadercell:first-child {
        border-left-width: 0;
      }
    }

    &.e-default:not(.e-rtl) tr {
      & td:first-child:not(.e-xlsel-left-border, .e-fixedfreeze.e-freezeleftborder, .e-rowcell-firstchild, .e-addfreezefirstchildborder, .e-leftfreeze.e-freezeleftborder.e-focused),
      & th.e-headercell:first-child:not(.e-firstcell, .e-headercell.e-frozen-left-border, .e-leftfreeze.e-freezeleftborder.e-focused),
      & th.e-filterbarcell:first-child:not(.e-filterbarcell.e-frozen-left-border) {
        border-left-width: 0;
      }
    }

    &:not(.e-rtl).e-verticallines,
    &:not(.e-rtl).e-bothlines {
      .e-grouptopleftcell.e-lastgrouptopleftcell {
        border-right-width: 1px;
        border-right-style: solid;
      }
    }

    .e-filterbarcell .e-filtertext::-webkit-search-cancel-button,
    .e-search input::-webkit-search-cancel-button {
      display: none;
    }

    .e-filterbarcell .e-filtertext::-ms-clear,
    .e-search input::-ms-clear {
      display: none;
    }

    .e-hiddenrow,
    .e-hide,
    & .e-group-animator:last-child .e-nextgroup.e-icons.e-icon-next {
      display: none;
    }

    .e-rowcell,
    .e-gridcontent,
    .e-gridheader,
    .e-headercontent,
    .e-groupdroparea,
    .e-gridfooter,
    .e-summarycontent {
      overflow: hidden;
      vertical-align: middle;
    }

    .e-groupdroparea.e-hover {
      @if $grid-skin == 'tailwind' {
        position: relative;
        top: 2px;
        right: -1.9px;
        margin-bottom: 4px;
        width: 99.7%;
        outline: 1px solid $cool-gray-200;
        outline-offset: 2px;
        border: 1px dashed $cool-gray-400;
        min-height: 35px;
        padding: 8px;
      }
      @else if $grid-skin == 'fluent' {
        padding-bottom: 13px;
      }
    }

    &.e-rtl .e-groupdroparea.e-hover {
      @if $grid-skin == 'tailwind' {
        right: 2px;
      }
    }

    .e-sortfilterdiv {
      height: $grid-sortdiv-height;
      @include grid-margin-padding($grid-sortdiv-margin, $grid-sortdiv-padding);
      width: $grid-sortdiv-width;
    }

    .e-gridheader {
      .e-header-checkbox .e-sortfilterdiv {
        display: contents;
      }
      .e-sortfilter {
        .e-centeralign.e-headercell[aria-sort = 'none'],
        .e-centeralign.e-headercell:not([aria-sort]) {
          .e-stackedheadercelldiv {
            padding-right: $grid-headercelldiv-sort-centeralign-padding-right;
          }
        }
      }

      .e-rightalign .e-stackedheadercelldiv {
        padding: $grid-headercelldiv-right-align-padding;
        @if $grid-skin == 'material3' {
          margin-left: 8px;
        }
      }

      .e-stackedheadercelldiv {
        padding: $grid-headercelldiv-padding;
      }
    }

    &.e-rtl .e-gridheader .e-sortfilter {
      .e-centeralign.e-headercell[aria-sort = 'none'],
      .e-centeralign.e-headercell:not([aria-sort]) {
        .e-stackedheadercelldiv {
          padding-left: $grid-headercelldiv-sort-centeralign-padding-right;
        }
      }
    }

    .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
      @if $grid-skin == 'fluent' {
        margin-bottom: -6px;
      }
    }

    @if $grid-skin == 'fluent2' {
      .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv .e-frame {
        margin: 0;
      }
    }

    .e-filtermenudiv {
      padding: $grid-fltrdiv-padding;
      text-align: $grid-fltrdiv-text-align;
    }

    &.e-print-grid-layout {
      .e-pager,
      .e-filterbar,
      .e-icons:not(.e-frame),
      .e-grouptopleftcell,
      .e-recordpluscollapse,
      .e-indentcell,
      .e-recordplusexpand {
        display: none;
      }

      .e-indentcell.e-detailindentcelltop {
        display: table-cell;
      }

      .e-content {
        overflow-y: hidden;
      }

      .e-grouptext {
        width: auto;
      }

      .e-detailcell {
        padding: .8em .6em;
      }
    }

    &.e-print-grid {
      left: -1000px;
      top: -1000px;
    }

    .e-flbldcontent {
      padding: $grid-flmenu-boolean-content-padding;
    }

    .e-flblbtn {
      width: $grid-flmenu-boolean-button-width;
    }

    .e-sortnumber {
      @include sort-number-styles;
      font-size: $grid-sortnumber-font-size;
      height: $grid-sort-number-size;
      line-height: $grid-sortnumer-line-height;
      width: $grid-sort-number-size;
      padding: $grid-sortnumber-padding;
      order: 2;
    }

    .e-columnmenu {
      padding: $grid-column-menu-padding;
    }

    &.e-wrap .e-columnmenu,
    &.e-wrap &.e-rtl .e-columnmenu {
      @if $grid-skin == 'material' or $grid-skin == 'material3' {
        line-height: 3px;
      }
      @else {
        line-height: $grid-wrap-line-height;
      }
    }

    .e-headercell .e-headercell-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .e-headertext {
      order: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      width: inherit;
    }

    .e-rightalign.e-fltr-icon .e-headertext,
    .e-centeralign.e-fltr-icon .e-headertext {
      padding: 0 3px;
    }
    .e-rightalign.e-fltr-icon .e-headertext {
      padding-right: 3px;
    }
    .e-fltr-icon .e-headertext,
    .e-leftalign.e-fltr-icon .e-headertext {
      padding-right: 3px;
    }

    .e-rightalign .e-headercell-container {
      .e-sortfilterdiv,
      .e-sortnumber {
        order: 0;
      }
      .e-headercelldiv,
      .e-headertext {
        order: 1;
      }
      .e-filtermenudiv,
      .e-columnmenu,
      .e-grptogglebtn {
        order: 2;
      }
    }

    .e-headercelldiv:has(span.e-grptogglebtn) .e-headertext {
      width: auto;
    }
    .e-rightalign {
      .e-headercelldiv:has(span.e-grptogglebtn) .e-headertext {
        margin-left: auto;
        width: auto;
      }
      .e-grptogglebtn {
        margin: 0;
      }
      .e-headercell-container.e-stacked-header {
        justify-content: right;
      }
    }
    .e-centeralign {
      .e-headercelldiv:has(span.e-headertext):not(:has(span.e-grptogglebtn)) {
        justify-content: center;
      }
      .e-sortnumber {
        margin-left: auto;
      }
      .e-headercelldiv:has(span.e-grptogglebtn) .e-headertext {
        margin-left: auto;
        width: auto;
      }
      .e-headercelldiv:has(span.e-grptogglebtn) .e-sortnumber {
        margin: 0;
      }
      .e-headercell-container.e-stacked-header {
        justify-content: center;
      }
    }

    .e-leftalign {
      .e-headercelldiv:has(span.e-grptogglebtn) .e-headertext  {
        width: auto;
      }
      .e-sortnumber {
        margin-left: auto;
      }
      .e-headercell-container.e-stacked-header {
        justify-content: left;
      }
    }

    &.e-rtl {
      .e-headercell-container {
        .e-headercelldiv,
        .e-grptogglebtn {
          order: 0;
        }
        .e-sortfilterdiv,
        .e-headertext {
          order: 1;
        }
        .e-filtermenudiv,
        .e-sortnumber,
        .e-columnmenu {
          order: 2;
        }
      }

      /* RTL left alignment */
      .e-leftalign {
        .e-headercell-container {
          .e-sortfilterdiv,
          .e-sortnumber {
            order: 0;
          }
          .e-headercelldiv,
          .e-grptogglebtn {
            order: 1;
          }
          .e-headertext {
            order: 2;
          }
        }
      }

      .e-rightalign.e-fltr-icon .e-headertext {
        padding-right: 0;
      }
      .e-fltr-icon .e-headertext {
        padding: 0 0 0 3px;
      }
      .e-leftalign.e-fltr-icon .e-headertext {
        padding: 0 3px;
      }

      .e-leftalign .e-grptogglebtn,
      .e-centeralign .e-grptogglebtn {
        margin-right: auto;
      }
      .e-headercelldiv:has(span.e-grptogglebtn) .e-headertext {
        margin-left: auto;
      }
      .e-grptogglebtn,
      .e-leftalign .e-headercelldiv:has(span.e-grptogglebtn) .e-headertext  {
        margin: 0;
      }
    }

    .e-detailrowcollapse,
    .e-detailrowexpand,
    .e-rowdragdropcell {
      @include grid-border-style-weight($grid-border-type, $grid-rowcell-broder-width);
    }

    .e-detailrowcollapse,
    .e-detailrowexpand {
      cursor: pointer;
      @if $grid-skin == 'material3' {
        padding-top: 6px;
      }
    }

    .e-detailindentcell {
      border-right-style: $grid-border-type;
      border-right-width: $grid-border-size;
    }

    .e-detailcell {
      @include gridheader-border-styles;
      padding: .3em;
      font-weight: normal;
      text-align: left;
    }

    th.e-detailcell {
      .e-rowcell,
      .e-gridpager {
        text-align: left;
      }

      .e-rtl .e-rowcell,
      .e-rtl .e-gridpager {
        text-align: right;
      }
    }

    &.e-rtl th.e-detailcell {
      .e-rowcell,
      .e-gridpager {
        text-align: right;
      }
    }

    &.e-verticallines {
      .e-rowcell,
      .e-filterbarcell {
        border-width: 0 0 0 $grid-border-size;
      }
    }

    &.e-verticallines,
    &.e-bothlines {
      .e-rowcell.e-grid-group-first-cell,
      .e-rowcell.e-first-visible-cell,
      .e-headercell.e-grid-group-first-cell,
      .e-headercell.e-first-visible-cell,
      .e-filterbarcell.e-grid-group-first-cell,
      .e-filterbarcell.e-first-visible-cell {
        border-left-width: 0;
      }
    }

    &.e-hidelines {
      .e-rowcell,
      .e-headercell,
      .e-detailheadercell,
      tr th.e-firstcell,
      .e-filterbarcell  {
        border-width: 0;
      }
    }

    &.e-horizontallines {
      .e-headercell,
      .e-detailheadercell {
        border-width: 0;
      }

      .e-headercell.e-stackedheadercell {
        border-width: 0 0  $grid-border-size  $grid-border-size;
      }

      .e-rowcell {
        border-width: $grid-border-size 0 0;
      }

      .e-filterbarcell {
        border-width: $grid-bottom-border-size 0 0;
      }
    }

    &.e-horizontallines,
    &.e-verticallines,
    &.e-hidelines {
      & .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border) {
        border-bottom-width: $grid-border-size;
      }
    }

    &.e-horizontallines,
    &.e-verticallines,
    &.e-hidelines,
    &.e-bothlines {
      & .e-detailrowvisible {
        border-left-width: 0;
      }
    }

    &.e-verticallines,
    &.e-hidelines {
      & .e-firstchildrow .e-rowcell,
      & .e-firstchildrow .e-detailrowcollapse,
      & .e-firstchildrow .e-detailrowexpand {
        border-top-width: 1px;
      }
    }

    .e-filterbarcell .e-icons::before {
      display: block;
      margin: 0 auto;
    }

    .e-filterbarcell,
    .e-filterbarcelldisabled {
      border-collapse: collapse;
      @include grid-border-style-weight($grid-border-type, $grid-filterbarcell-border-width);
      cursor: default;
      height: $grid-headercell-line-height;
      overflow: hidden;
      padding: $grid-filterbarcell-padding;
      vertical-align: middle;
    }

    .e-rowdragheader {
      border-color: $grid-header-border-color;
      @include grid-border-style-weight($grid-border-size, $grid-filterbarcell-border-width);
      @if $grid-skin == 'fluent2' {
        border-width: 1px 0 0;
      }
    }

    .e-filterbarcell input {
      &.e-checkbox{
        height: 1px;
      }
      border-radius: $grid-filterbar-border-radius;
      @include grid-border-style-width-font-size-weight(solid, $grid-filterbar-input-border-width, $grid-font-size, normal);
      height: $grid-filterbarcell-text-input;
      padding-right: 24px;
      text-indent: $grid-filterbarcell-text-indent;
      width: 100%;
    }

    &.e-device {
      .e-filterbarcell {
        padding: $grid-device-filterbarcell-padding;
      }

      .e-filterbarcell:first-child {
        padding: $grid-device-filterbarcell-firstchild-padding;
      }

      .e-filterbarcell:last-child {
        padding: $grid-device-filterbarcell-lastchild-padding;
      }
    }

    .e-searchclear,
    &.e-rtl .e-searchclear,
    .e-grid-relative {
      position: relative;
    }

    .e-searchclear {
      float: right;
    }

    &.e-rtl .e-searchclear {
      float: left;
    }

    .e-checkselect,
    .e-checkselectall {
      margin: 0;
      opacity: 0;
      position: absolute;
      width: 0;
    }

    .e-rowcell .e-checkbox-wrapper,
    .e-rowcell .e-css.e-checkbox-wrapper {
      -webkit-user-select: auto; /* stylelint-disable-line property-no-vendor-prefix */
      height: $grid-checkbox-wrapper-height;
      line-height: $grid-checkbox-wrapper-line-height;
      position: relative;
      top: $grid-checkbox-wrapper-top;
      @if $grid-skin == 'fluent' {
        border: 0;
      }
      user-select: auto;
    }

    .e-filterdiv,
    .e-fltrtempdiv {
      padding: $grid-filterdiv-padding;
      position: relative;
      text-align: center;
      width: 100%;
    }

    .e-pager {
      border-bottom: transparent;
      border-left: transparent;
      border-right: transparent;
    }

    .e-gridpopup {
      font-weight: normal;
      position: absolute;
      user-select: none;
      z-index: 99999;

      .e-content {
        border-radius: $grid-border-radius-4;
        @include grid-border-style-weight(solid, $grid-border-size);
        font-size: 14px;
        padding: 4px;
      }

      span {
        border: 1px solid transparent;
        cursor: pointer;
        display: inline-block;
        height: 26px;
        padding: 4px;
        width: 26px;
      }

      .e-tail::before,
      .e-tail::after {
        border: 10px solid transparent;
        content: '';
        height: 0;
        @if $grid-skin == 'material3' {
          left: 12px;
        }
        @else {
          left: 8px;
        }
        position: absolute;
        width: 0;
      }

      .e-downtail::after {
        top: 34px;
      }

      .e-uptail::after {
        top: -17px;
      }

      .e-uptail::before {
        top: -19px;
      }

      .e-sortdirect,
      .e-rowselect {
        @if $grid-skin == 'material3' {
          font-size: 20px;
          @include grid-line-height-padding-styles(20px, 2px 6px);
          width: 34px;
        }
        @else {
          line-height: 18px;
        }
        text-indent: $grid-rowselect-text-indent;
      }
    }

    .e-footerpadding {
      @include grid-padding-left-right(0, 14px);

      .e-lastsummarycell {
        border-left: none;
        border-right: 1px solid;
      }
    }

    &.e-rtl .e-footerpadding {
      @include grid-padding-left-right(14px, 0);

      tr.e-summaryrow {
        & td.e-lastsummarycell:last-child {
          border-right: none;
          border-left: 1px solid $grid-cell-border-color;
        }
      }
    }

    .e-cloneproperties {
      @include grid-border-style-width-font-size-weight(solid, $grid-border-size, $grid-header-font-size, $grid-drag-clone-font-weight);
      box-shadow: $grid-group-clone-box-shadow;
      opacity: $grid-drag-clone-opacity;
      overflow: hidden;
      padding: $grid-clone-padding;
      text-align: $grid-group-clone-text-align;
      @if $grid-skin == 'tailwind' {
        text-transform: uppercase;
      }
      @else if $grid-skin == 'material3' {
        border-radius: $grid-border-radius-4;
      }
      user-select: none;
      vertical-align: middle;
      white-space: nowrap;
      z-index: 10;

      .e-draganddrop {
        border-spacing: 0;
        @include grid-font-size-weight-styles($grid-header-font-size, normal);
        overflow: visible;
      }
    }

    .e-cloneproperties.e-headerclone table,
    .e-cloneproperties.e-draganddrop table {
      border-spacing: 0;
    }

    .e-notallowedcur {
      cursor: not-allowed;
    }

    .e-grabcur {
      cursor: grabbing;
    }

    .e-headerclone {
      border-radius: $group-header-border-radius;
      @if $grid-skin == 'fluent2' {
        font-size: 12px;
      }
      font-weight: $grid-drag-clone-font-weight;
      line-height: 29px;
    }

    .e-draganddrop {
      border-width: 0 1px 1px;
      font-weight: normal;
      padding: 0;

      .e-rowcell {
        opacity: .95;
      }
    }

    &.e-default .e-gridheader {
      th.e-firstcell,
      th.e-laststackcell:not(:has(.e-rhandler.e-rcursor), :has(.e-rsuppress)) {
        @include grid-border-width-styles;
      }
    }

    &.e-rtl.e-lib.e-default:not(.e-resize-lines, .e-verticallines, .e-bothlines) {
      .e-gridheader th.e-headercell.e-firstcell.e-leftfreeze.e-freezeleftborder,
      th.e-laststackcell:not(:has(.e-rhandler.e-rcursor), :has(.e-rsuppress)),
      .e-stackedheadercell.e-leftfreeze.e-freezeleftborder {
        border-right-width: 1px;
        border-right-color: var(--color-sf-border-light);
      }
      .e-gridheader tr th:first-child:not(.e-firstcell) {
        border-right-width: 0;
      }
    }

    &.e-default.e-verticallines .e-gridheader th.e-firstcell.e-grid-group-first-cell {
      border-left-width: 0;
    }

    &:not(.sf-grid).e-bothlines .e-gridheader th.e-stackedheadercell {
      border-bottom-style: $grid-border-type;
      border-bottom-width: $grid-border-size;
      @include grid-border-width-styles;
    }

    &.e-default.e-hidelines .e-gridheader th.e-firstcell {
      border-left-width: 0;
    }

    &.e-default.e-hidelines:not(.e-rtl) {
      .e-headercell.e-stackedheadercell {
        border-bottom-width: 1px;
        border-left-width: 1px;
      }
      &:not(.e-resize-lines, .e-rtl) {
        .e-gridheader.e-stackedheader th.e-headercell.e-firstcell {
          border-left-width: 1px;
        }
      }
    }

    &.e-hidelines,
    &.e-verticallines {
      .e-frozenhdr tr:first-child td,
      tr.e-grid-pin-row:first-child td {
        border-top-width: 1px;
      }
    }

    &.e-rtl .e-gridheader .e-headercontent {
      .e-reorderuparrow,
      .e-reorderdownarrow,
      .e-reorderuparrow-virtual,
      .e-reorderdownarrow-virtual {
        @if $grid-skin == 'material3' {
          margin-left: -1.3px;
        }
      }
    }

    td.e-active {
      font-weight: $grid-selection-font-weight;
    }

    &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
    td.e-cellselectionbackground {
      font-weight: $grid-selection-font-weight;
      @if $grid-skin == 'material3' {
        padding-bottom: 7px;
        @include grid-padding-left-right(8px, 8px);
      }
    }

    &.e-grid-min-height td.e-cellselectionbackground {
      @if $grid-skin == 'material3' {
        padding-bottom: 0;
      }
    }

    &.e-bothlines td.e-rowcell.e-cellselectionbackground,
    &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground {
      @if $grid-skin == 'material3' {
        border: 1px solid rgba($content-text-color);
      }
    }

    &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
      @if $grid-skin == 'material3' {
        padding-top: 7px;
      }
    }

    .e-groupdroparea {
      height: auto;
      line-height: normal;
      min-height: $grid-group-height;
    }

    .e-griddragarea {
      border: $grid-drag-area-border;
      opacity: .6;
      position: absolute;
    }

    .e-gdclone {
      border-radius: $grid-gd-clone-border-radius;
      padding: 2px;
    }

    .e-content {
      -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
      overflow-x: auto;
      overflow-y: scroll;
      position: relative;
    }

    &.e-ungroupdrag  {
      .e-columnheader,
      .e-groupdroparea {
        cursor: not-allowed;
      }

      .e-gridcontent {
        cursor: default;
      }
    }

    &.e-rowdrag {
      .e-columnheader,
      .e-groupdroparea {
        cursor: not-allowed;
      }

      .e-gridcontent {
        cursor: default;
      }
    }

    .e-groupdroparea {
      cursor: default;
      @include grid-border-style-width-font-size-weight(solid none, 1px 0 0,  $grid-grouparea-font-size, $grid-grouparea-font-weight);
      border-top-width: $grid-border-size;
      opacity: $grid-conent-font-opacity;
      padding: $group-area-padding;
      text-align: $group-text-align;
      text-indent: 1pt;
      user-select: none;
      width: 100%;
    }

    .e-grouptext {
      display: inline-block;
      margin-right: $grid-grouptext-margin-right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: $grid-group-text-width;
      @if $grid-skin == 'material3' {
        font-weight: 500;
      }
    }

    .e-grid-icon {
      float: left;
    }

    .e-groupheadercell,
    .e-groupheadercell:hover {
      border: $group-border-width;
      border-collapse: collapse;
      border-radius: $group-header-border-radius;
      cursor: pointer;
      @include grid-font-size-weight-styles($grouped-text-font-size, normal);
      height: $grid-headecell-height;
      margin: $grid-grouparea-margin;
      overflow: hidden;
      @if $grid-skin != 'material3' {
        padding: $grid-grouped-headercell-padding;
      }
      @if $grid-skin == 'tailwind3' {
        font-weight: 500;
      }
      vertical-align: middle;
    }

    .e-groupheadercell:hover {
      border: $group-hover-border;
      @if $grid-skin != 'material3' {
        padding: $grid-grouped-headercell-hover-padding;
      }
    }

    .e-groupdroparea.e-grouped.e-hover .e-groupheadercell {
      @if $grid-skin == 'tailwind' {
        margin-top: 2px;
      }
      @else if $grid-skin == 'fluent' {
        margin-bottom: 3px;
      }
    }

    .e-groupheadercell {
      span {
        display: inline-block;
        float: left;
        height: $grid-headecell-span-height;
        @include grid-line-height-padding-styles($grid-group-headercell-line-height, $grid-grouped-headercell-span-padding);
        vertical-align: middle;
      }

      .e-grouptext {
        line-height: $grid-group-text-line-height;
        @if $grid-skin == 'bootstrap4' {
          padding-top: 3px;
        }
      }

      .e-ungroupbutton {
        font-size: $grid-ungroup-button-font-size;
        line-height: $grid-ungroup-button-line-height;
      }

      .e-cancel {
        padding-right: $group-sorticon-font-size;
      }

      .e-icons::before {
        display: inline;
      }
    }

    &.e-device .e-groupheadercell {
      span {
        line-height: $grid-touch-device-hdrcell-span-line-height;
      }

      .e-ungroupbutton {
        line-height: $grid-touch-device-hdrcell-ungroup-line-height;
      }

      .e-groupsort {
        margin-top: $grid-device-groupsort-margin-top;
      }
    }

    .e-groupsort,
    .e-ungroupbutton,
    .e-toggleungroup {
      font-size: $group-sorticon-font-size;
      margin-left: $group-sorticon-margin-left;
    }

    .e-groupsort {
      margin-right: $group-sorticon-margin-right;
      margin-top: $group-sorticon-margin-top;
      @if $grid-skin == 'material3' {
        padding-top: 6px;
      }
    }

    span.e-ungroupbutton.e-icons {
      margin-left: $group-unpgrouicon-margin-left;
      margin-top: $group-sorticon-margin-top;
      padding-top: $grid-group-unpgroupicon-padding-top;
      padding-right: $grid-group-unpgroupicon-padding-right;
    }

    span.e-ungroupbutton.e-icons:hover {
      @if $grid-skin == 'tailwind' {
        color: $cool-gray-700;
      }
    }

    .e-grptogglebtn {
      padding: 0 2px;
      order: 1;
      margin-right: auto;
    }

    .e-icon-gdownarrow {
      @include grid-group-arrow-icons($grid-group-down-arrow-icon-font-size, $grid-group-down-arrow-icon-padding);
    }

    .e-icon-grightarrow {
      @include grid-group-arrow-icons($grid-group-right-arrow-icon-font-size, $grid-group-right-arrow-icon-padding);
    }

    .e-recordplusexpand {
      padding-top: 5px;
    }

    .e-indentcell {
      @include grid-border-style-weight($grid-border-type, 0 $grid-border-size 0 0);
      &.e-indentcelltop,
      &.e-detailindentcelltop {
        border-width: $grid-border-size 0 0;
      }
    }

    .e-recordplusexpand,
    .e-recordpluscollapse {
      @include grid-border-style-weight($grid-border-type, $grid-border-size 0 0);
      cursor: pointer;
      @if $grid-skin == 'material3' or $grid-skin == 'tailwind3' {
        padding-top: 6px;
      }
    }

    .e-groupcaption {
      @include grid-border-style-weight($grid-border-type, $grid-border-size 0 0);
      display: table-cell;
      font-size: $grid-group-caption-font-size;
      @if $grid-skin == 'material3' or $grid-skin == 'tailwind3' {
        font-weight: 500;
      }
      @include grid-line-height-padding-styles($grid-group-captioncell-line-height, $grid-group-caption-header-padding);
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
      width: auto;
    }

    .e-virtualtable .e-groupcaption {
      @include grid-line-height-padding-styles($grid-rowcell-line-height, $grid-content-padding $grid-content-right-padding);
    }

    .e-autofill {
      border: 1px solid;
      height: 8px;
      position: absolute;
      user-select: none;
      width: 8px;
    }

    .e-headercontent {
      @include grid-border-style-weight(solid, 0);
    }

    .e-stackedheadercell {
      border-width: $grid-stackedheadercell-border-size;
      white-space: nowrap;
    }

    .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
      font-size: $grid-columnchooser-btn-font-size;
    }

    .e-toolbar .e-toolbar-items .e-toolbar-right .e-cc-toolbar .e-tbar-btn .e-columnchooser-btn {
      margin-top: $grid-cc-margin-top;
    }

    .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
      margin-top: $grid-columnchooser-toolbardiv-margin-top;
      padding: $grid-columnchooser-toolbardiv-padding;
    }

    .e-toolbar-item.e-template {
      .e-toolbar-search {
        width: 230px;
      }
    }

    &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
      @if $grid-skin == 'fluent' {
        padding-bottom: 1px;
      }
    }

    .e-edit-dialog {
      min-height: 350px;
      .e-dlg-content {
        position: relative;
      }
    }

    /* stylelint-disable */
    .e-griderror label {
      display: inline !important;
    }
    /* stylelint-enable */

    .e-tooltip-wrap.e-griderror {
      z-index: 1000;
      .e-arrow-tip.e-tip-top {
        left: 44%;
        top: -8px;
      }
    }

    .e-normaledit {
      border-top: 0;
      padding: 0;
      .e-rowcell {
        @include grid-top-bottom-padding(0, 0);
      }
    }

    &.e-device .e-normaledit .e-rowcell {
      @include grid-top-bottom-padding($grid-edit-cell-padding, $grid-edit-cell-padding);
    }

    .e-gridcontent .e-normaledit .e-rowcell.e-lastrowadded {
      border-bottom: $grid-border-size $grid-border-type $grid-cell-border-color;
      border-top: 0 none $grid-cell-border-color;
    }

    .e-gridcontent table tbody .e-normaledit .e-rowcell {
      border-top: $grid-border-size $grid-border-type;
    }

    &:not(.e-row-responsive, .e-left-shadow, .e-right-shadow) .e-gridcontent tr.e-row:first-child .e-rowcell:not(.e-xlsel-top-border) {
      border-top: 0;
    }

    &.e-device .e-editedbatchcell.e-rowcell,
    .e-editedbatchcell.e-rowcell,
    &.e-device .e-gridcontent .e-normaledit .e-rowcell {
      @include grid-top-bottom-padding(0, 0);
    }

    .e-editedbatchcell,
    td.e-boolcell {
      @include grid-padding-left-right($grid-content-right-padding, $grid-content-right-padding);
    }

    td.e-boolcell input {
      margin: 3px 3px 3px 4px;
    }

    td.e-boolcell.e-rowcell {
      @include grid-top-bottom-padding(5px, 5px);
    }

    .e-dialog .e-gridform .e-rowcell {
      border: 0;
      padding: 0;
    }

    .e-row {
      .e-input-group .e-input.e-field,
      .e-input-focus .e-input.e-field {
        @include grid-edit-input-styles($grid-font-size, $grid-edit-input-padding-bottom, $grid-edit-input-padding-top);
      }

      .e-input-group {
        margin-bottom: $grid-edit-input-margin;
        margin-top: $grid-edit-input-margin-top;
        vertical-align: middle;
        @if $grid-skin == 'material3' {
          line-height: 28.5px;
        }
      }
    }

    .e-defaultcell.e-ralign,
    .e-editedrow .e-defaultcell.e-ralign,
    .e-defaultcell.e-ralign:focus,
    .e-editedrow .e-defaultcell.e-ralign:focus {
      padding-right: 10px;
    }

    .e-dlg-content {
      .e-defaultcell.e-ralign,
      .e-defaultcell.e-ralign:focus {
        padding-right: 0;
      }
    }

    .e-columnchooserdiv {
      @include grid-flot-margin(right, -12px);
    }

    .e-rowcell,
    .e-gridheader .e-headercell,
    .e-gridheader .e-filterbarcell {
      .e-frozen-default-cursor {
        border-left: $frozen-border;
        border-right: 0;
      }
    }

    .e-tooltip-wrap.e-griderror.e-unfreeze {
      z-index: 1;
    }

    &.e-lib .e-leftfreeze,
    &.e-lib.e-grid .e-headercell.e-leftfreeze,
    &.e-lib.e-grid .e-headercell.e-rightfreeze,
    &.e-lib .e-rightfreeze,
    .e-leftfreeze,
    .e-rightfreeze {
      position: sticky;
      z-index: 2;
    }

    &.e-lib .e-fixedfreeze,
    &.e-lib.e-grid .e-headercell.e-fixedfreeze,
    .e-fixedfreeze {
      position: sticky;
      z-index: 3;
    }

    .e-xlsel-top-border,
    &.e-rtl.e-default .e-rowcell.e-xlsel-top-border {
      border-top-width: 2px;
      line-height: $grid-rowcell-autofill-top-line-height;
    }

    .e-xlsel-left-border,
    .e-fixedfreeze.e-freezeleftborder.e-xlsel-left-border,
    &.e-rtl.e-default .e-rowcell.e-xlsel-left-border,
    &.e-rtl.e-default .e-rowcell.e-fixedfreeze.e-freezeleftborder.e-xlsel-left-border {
      border-left-width: 2px;
    }

    .e-xlsel-right-border,
    .e-fixedfreeze.e-freezerightborder.e-xlsel-right-border,
    &.e-rtl.e-default .e-rowcell.e-xlsel-right-border,
    &.e-rtl.e-default .e-rowcell.e-fixedfreeze.e-freezerightborder.e-xlsel-right-border {
      border-right-width: 2px;
    }

    &.e-wrap,
    &.e-rtl.e-wrap {
      .e-xlsel-bottom-border.e-xlsel-top-border {
        line-height: $grid-rowcell-autofill-top-height;
      }
    }

    &.e-wrap,
    &.e-rtl.e-wrap {
      .e-xlsel-bottom-border {
        line-height: $grid-rowcell-autofill-top-bottom-height;
      }
    }

    .e-xlsel-bottom-border.e-xlsel-top-border,
    &.e-rtl.e-default .e-rowcell.e-xlsel-bottom-border.e-xlsel-top-border {
      line-height: $grid-rowcell-autofill-top-bottom-line-height;
    }

    .e-xlsel-bottom-border,
    &.e-rtl.e-default .e-rowcell.e-xlsel-bottom-border {
      border-bottom-width: 2px;
      line-height: $grid-rowcell-autofill-top-line-height;
    }

    .e-virtual-content.e-content {
      overflow-x: hidden;
    }

    .e-gridcontent .e-virtual-horizontal-scrollbar {
      overflow-x: scroll;
      width: 100%;
      position: absolute;
      bottom: 0;
      z-index: 2;
    }

    .e-gridcontent .e-virtual-vertical-scrollbar {
      overflow-y: scroll;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      left: auto;
      z-index: 2;
    }

    &.e-rtl .e-gridcontent .e-virtual-vertical-scrollbar {
      right: auto;
      left: 0;
    }

    &.e-lib.e-default .e-headercell.e-leftfreeze.e-freezeleftborder,
    &.e-lib .e-leftfreeze.e-freezeleftborder,
    .e-leftfreeze.e-freezeleftborder {
      border-right-width: 2px;
    }

    &.e-rtl.e-right-shadow .e-rightfreeze.e-freezerightborder:not(.e-dragborder),
    &.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-dragborder) {
      @include frozen-shadow-styles(inset(0 -15px 0 0), 4px 0 8px $grid-frozen-shadow-background-color);
    }

    &.e-rtl.e-right-shadow .e-rightfreeze.e-freezerightborder:not(.e-xlsel-right-border),
    &.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-xlsel-right-border) {
      border-right-color: transparent;
    }

    &.e-rtl.e-right-shadow .e-rightfreeze.e-freezerightborder.e-dragborder,
    &.e-left-shadow .e-leftfreeze.e-freezeleftborder.e-dragborder {
      box-shadow: $grid-dragborder-box-shadow, 4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-right-shadow .e-rightfreeze.e-freezerightborder:not(.e-dragborder),
    &.e-rtl.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-dragborder) {
      @include frozen-shadow-styles(inset(0 0 0 -15px), -4px 0 8px $grid-frozen-shadow-background-color);
    }

    &.e-right-shadow:not(.e-rtl) .e-rightfreeze.e-freezerightborder:not(.e-xlsel-left-border),
    &.e-rtl.e-left-shadow .e-leftfreeze.e-freezeleftborder:not(.e-xlsel-left-border) {
      border-left-color: transparent;
    }

    &.e-right-shadow .e-rightfreeze.e-freezerightborder.e-dragborder,
    &.e-rtl.e-left-shadow .e-leftfreeze.e-freezeleftborder.e-dragborder {
      box-shadow: $grid-dragborder-box-shadow, -4px 0 8px $grid-frozen-shadow-background-color;
    }

    &.e-lib.e-default .e-headercell.e-rightfreeze.e-freezerightborder,
    &.e-lib .e-rightfreeze.e-freezerightborder,
    .e-rightfreeze.e-freezerightborder {
      border-left-width: 2px;
    }

    &.e-lib.e-default:not(.e-rtl) .e-headercell.e-fixedfreeze.e-freezeleftborder:not(.e-removefreezeleftborder),
    &.e-lib:not(.e-rtl) .e-fixedfreeze.e-freezeleftborder:not(.e-removefreezeleftborder),
    &:not(.e-rtl) .e-fixedfreeze.e-freezeleftborder:not(.e-removefreezeleftborder) {
      border-left-width: 1px;
    }

    &.e-lib.e-default:not(.e-rtl) .e-headercell.e-fixedfreeze.e-freezerightborder:not(.e-removefreezerightborder),
    &.e-lib:not(.e-rtl) .e-fixedfreeze.e-freezerightborder:not(.e-removefreezerightborder),
    &:not(.e-rtl) .e-fixedfreeze.e-freezerightborder:not(.e-removefreezerightborder) {
      border-right-width: 1px;
    }

    // Safari with Mac OS
    .e-content.e-mac-safari::-webkit-scrollbar { /* stylelint-disable-line property-no-vendor-prefix */
      width: 7px;
    }

    // Safari with Mac OS
    .e-content.e-mac-safari::-webkit-scrollbar-thumb { /* stylelint-disable-line property-no-vendor-prefix */
      background-color: $grid-frozen-mac-scrollbar-background;
      border-radius: $grid-border-radius-4;
    }

    .e-movablescrollbar {
      flex: 1;
      overflow: hidden;
      overflow-x: scroll;
    }

    &.e-mac-safari .e-virtualtable {
      .e-leftfreeze,
      .e-rightfreeze {
        transform: translateZ(0);
      }
    }

    &.e-mac-safari.e-resize-lines.e-rcursor {
      user-select: none;
    }

    .e-columnchooser::before {
      line-height: $grid-columnchooser-toolbar-icon-line-height;
    }

    .e-toolbar .e-ccdiv {
      margin-top: $grid-columnchooser-toolbar-div-margin-top;
      padding: $grid-columnchooser-toolbar-div-padding;

      .e-columnchooser.e-cctbn-icon {
        font-size: $grid-columnchooser-toolbar-icon-font-size;
        vertical-align: $grid-columnchooser-toolbar-icon-vertical-align;
      }
    }

    &.e-rtl {
      .e-tableborder {
        border-left: 1px solid;
        border-right: 0;
      }

      &.e-lib.e-default .e-headercell.e-leftfreeze.e-freezeleftborder,
      &.e-lib.e-default .e-rowcell.e-leftfreeze.e-freezeleftborder,
      &.e-lib.e-default .e-filterbarcell.e-leftfreeze.e-freezeleftborder,
      &.e-lib .e-leftfreeze.e-freezeleftborder,
      .e-leftfreeze.e-freezeleftborder {
        border-left-width: 2px;
        border-right-width: 0;
      }

      &.e-lib.e-default .e-headercell.e-rightfreeze.e-freezerightborder,
      &.e-lib.e-default .e-rowcell.e-rightfreeze.e-freezerightborder,
      &.e-lib.e-default .e-filterbarcell.e-rightfreeze.e-freezerightborder,
      &.e-lib .e-rightfreeze.e-freezerightborder,
      .e-rightfreeze.e-freezerightborder {
        border-right-width: 2px;
      }

      &.e-lib.e-default .e-headercell.e-fixedfreeze.e-freezeleftborder:not(.e-removefreezerightborder),
      &.e-lib .e-fixedfreeze.e-freezeleftborder:not(.e-removefreezerightborder),
      .e-fixedfreeze.e-freezeleftborder:not(.e-removefreezerightborder) {
        border-right-width: 1px;
      }

      &.e-lib.e-default .e-headercell.e-fixedfreeze.e-freezerightborder:not(.e-removefreezeleftborder),
      &.e-lib .e-fixedfreeze.e-freezerightborder:not(.e-removefreezeleftborder),
      .e-fixedfreeze.e-freezerightborder:not(.e-removefreezeleftborder) {
        border-left-width: 1px;
      }

      & .e-headercell,
      & .e-detailheadercell {
        border-width: $grid-rtl-headercell-border-width;
        text-align: right;

        &.e-fltr-icon {
          .e-headercelldiv.e-headerchkcelldiv {
            padding: $grid-rtl-headercelldiv-padding;
            @if $grid-skin == 'highcontrast' {
              margin: -7px 0;
            }
          }
          &.e-rightalign {
            & .e-headercelldiv,
            .e-headercelldiv.e-headerchkcelldiv {
              text-align: right;
            }
          }
        }

        & .e-headercelldiv,
        .e-headercelldiv.e-headerchkcelldiv {
          text-align: right;
        }

        & .e-filterbarcell input {
          border-width: $grid-filterbar-input-border-width;
        }

        &.e-leftalign {
          & .e-sortfilterdiv {
            @if $grid-skin == 'tailwind' {
              margin-bottom: -13px;
              margin-top: -13px;
            }
          }
        }
      }
      .e-headercell.e-leftalign .e-headercelldiv.e-headerchkcelldiv {
        justify-content: left;
      }

      &.e-wrap .e-columnheader,
      & .e-columnheader.e-wrap {
        .e-rightalign.e-fltr-icon .e-headercelldiv {
          height: auto;
        }
      }

      &.e-verticallines,
      &.e-bothlines,
      &.e-hidelines {
        .e-grouptopleftcell {
          border-top: 0;
        }
      }

      & .e-grouptopleftcell {
        border-top: $grid-grouptopleftcell-border-top;

        span.e-grouptext {
          margin-left: $grid-rtl-group-text-margin-left;
          margin-right: $grid-rtl-group-text-margin-right;
          @if $grid-skin == 'bootstrap4' {
            padding-top: 3px;
          }
        }

        span {
          @include grid-flot-margin(right, $grid-rtl-group-span-padding);
        }
      }

      & .e-groupheadercell span {
        float: right;
        padding: $grid-rtl-group-span-padding;
      }

      &.e-horizontallines .e-grouptopleftcell {
        border-top: 1px solid;
      }

      & .e-rowcell {
        border-width: $grid-rowcell-broder-width;
      }

      & .e-stackedheadercell.e-leftfreeze.e-freezeleftborder,
      & .e-rowcell.e-leftfreeze.e-freezeleftborder {
        border-left-width: 2px;
      }

      & .e-stackedheadercell.e-rightfreeze.e-freezerightborder,
      & .e-rowcell.e-rightfreeze.e-freezerightborder {
        border-right-width: 2px;
      }

      & .e-stackedheadercell.e-fixedfreeze.e-freezeleftborder,
      & .e-rowcell.e-fixedfreeze.e-freezeleftborder:not(.e-xlsel-right-border, .e-removefreezerightborder) {
        border-right-width: 1px;
      }

      & .e-stackedheadercell.e-fixedfreeze.e-freezerightborder,
      & .e-rowcell.e-fixedfreeze.e-freezerightborder:not(.e-xlsel-left-border, .e-removefreezeleftborder) {
        border-left-width: 1px;
      }

      & .e-summarycell.e-rightfreeze.e-freezerightborder,
      & .e-summarycell.e-fixedfreeze.e-freezeleftborder {
        border-left-width: 0;
      }

      & .e-summarycell.e-leftfreeze.e-freezeleftborder,
      & .e-summarycell.e-fixedfreeze.e-freezerightborder {
        border-right-width: 0;
      }

      & .e-filterbarcell,
      & .e-filterbarcelldisabled {
        border-width: $grid-filterbarcell-border-width;
      }

      & .e-lastrowcell {
        border-width: $grid-border-size $grid-border-size $grid-border-size 0;
      }

      & .e-cloneproperties {
        border-width: $grid-border-size $grid-border-size 2px;
      }

      & tr {
        & td:first-child,
        & th:first-child {
          border-left-width: $grid-rtl-th-firstcell-border-left;
        }
      }

      &.e-default.e-bothlines tr {
        & td:first-child:not(.e-summarycell, .e-freezeleftborder),
        & th:first-child {
          border-left-width: 1px;
        }

        & td:first-child.e-detailrowcollapse,
        & td:first-child.e-detailrowexpand {
          border-left-width: 0;
        }
      }

      &.e-default {
        & tr td:last-child:not(.e-xlsel-left-border, .e-rowcell-lastchild, .e-addfreezefirstchildborder),
        & .e-gridheader table tr th:last-child:not(.e-firstcell) {
          border-left: 0;
        }
      }

      &.e-default.e-verticallines tr th:last-child {
        border-left: 1px solid;
      }

      &.e-default th:first-child &.e-default .e-headercell,
      &.e-default .e-detailheadercell {
        border-width: $grid-header-border-width;
      }

      &.e-default .e-rowcell {
        border-width: $grid-rowcell-broder-width;
      }

      &.e-default.e-verticallines {
        .e-headercell,
        .e-rowcell,
        .e-filterbarcell,
        .e-detailheadercell,
        .e-gridheader th.e-firstcell {
          border-width: 0 0  0 $grid-border-size;
        }

        & tr th:first-child:not(.e-firstcell) {
          border-left-width: $grid-border-size;
        }

        .e-gridheader .e-headercell.e-firstheader {
          border-right: 0;
        }

        .e-gridheader .e-headercell.e-firstheader,
        .e-gridheader th.e-grouptopleftcell.e-lastgrouptopleftcell {
          border-left: 1px solid;
        }

        .e-headercell.e-stackedheadercell {
          border-bottom: 1px solid;
          border-bottom-color: $grid-header-border-color;
        }
      }

      &.e-default .e-stackedheadercell,
      &.e-default.e-horizontallines .e-stackedheadercell {
        border-width: $grid-rtl-stackedheadercell-border-size;
      }

      &.e-default .e-gridheader th.e-firstcell,
      &.e-default.e-horizontallines .e-gridheader th.e-firstcell {
        border-left-width: $grid-rtl-stackedhader-firstcell-left-border-size;
        border-right-width: $grid-rtl-stackedhader-firstcell-right-border-size;
      }

      &.e-default.e-bothlines .e-gridheader th.e-firstcell {
        border-left-width: $grid-rtl-bothlines-stackedhader-firstcell-left-border-size;
        border-right-width: $grid-rtl-bothlines-stackedhader-firstcell-right-border-size;
      }

      &.e-default .e-gridheader,
      &.e-default.e-horizontallines {
        .e-headercell.e-firstheader {
          border-left: 0;
        }
      }

      &.e-default.e-hidelines {
        .e-headercell.e-stackedheadercell {
          border-bottom-width: 1px;
          border-right-width: 1px;
        }
      }

      &.e-default.e-hidelines .e-gridheader:not(.e-stackedheader) th.e-firstcell {
        border-left: 0;
        border-right: 0;
      }

      &.e-default,
      &.e-default.e-horizontallines {
        .e-gridheader .e-headercell.e-firstheader {
          border-right: 1px solid;
        }
      }

      &.e-default .e-detailcell,
      &.e-default.e-bothlines .e-detailcell {
        border-right-style: solid;
        border-right-width: 1px;
        text-align: right;
      }

      & .e-groupsort,
      & .e-ungroupbutton,
      & .e-toggleungroup {
        margin-left: $grid-rtl-group-sorticon-margin-left;
        margin-right: $grid-rtl-group-sorticon-margin-right;
      }

      & span.e-ungroupbutton.e-icons {
        margin-left: $grid-ungroup-rtl-margin-left;
        margin-right: $grid-ungroup-rtl-padding-right;
        padding-top: $grid-ungroup-rtl-padding-top;
      }

      &:not(.sf-grid).e-default.e-bothlines {
        & .e-headercell,
        & .e-detailheadercell {
          border-width: $grid-headercell-both-border-width;
        }
      }

      &.e-default.e-bothlines {
        & .e-dragheadercell,
        & .e-rowdragheader,
        & .e-cloneproperties.e-draganddrop td.e-rowdragdrop {
          border-left: 1px solid $grid-header-border-color;
          padding-left: 3px;
        }

        .e-gridheader .e-headercell.e-firstheader,
        .e-gridheader th.e-grouptopleftcell.e-lastgrouptopleftcell {
          border-left: 1px solid;
          border-right: 0;
        }
      }

      & .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
        left: 4px;
        position: relative;
      }

      &:not(.sf-grid).e-bothlines .e-gridheader th.e-stackedheadercell {
        border-bottom-style: $grid-border-type;
        border-bottom-width: $grid-border-size;
      }

      &.e-bothlines {
        .e-filterbarcell,
        .e-filterbarcelldisabled {
          border-width: $grid-filtercell-both-border-width;
          border-top-width: 1px;
        }

        .e-rowcell,
        .e-rowcell.e-lastrowcell {
          border-width: $grid-rowcell-both-border-width;
        }
        .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border) {
          border-bottom-width: 1px;
        }
      }

      &.e-verticallines {
        .e-rowcell,
        .e-filterbarcell {
          border-width: 1px 0 0 $grid-border-size;
        }
      }

      &.e-hidelines {
        .e-rowcell,
        .e-headercell,
        .e-detailheadercell,
        .e-filterbarcell {
          border-width: 0;
        }
      }

      &.e-horizontallines {
        .e-rowcell {
          border-width: $grid-border-size 0 0;
        }

        .e-filterbarcell {
          border-width: $grid-bottom-border-size 0 0;
        }
      }

      &.e-horizontallines,
      &.e-verticallines,
      &.e-hidelines {
        & .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border) {
          border-bottom-width: $grid-border-size;
        }
      }

      &.e-verticallines,
      &.e-hidelines {
        & .e-firstchildrow .e-rowcell {
          border-top-width: 1px;
        }
      }

      @if $grid-skin == 'tailwind3' {
        & .e-grouptext {
          margin-right: 2px;
          margin-left: 8px;
        }
      }

      & .e-groupheadercell .e-icons::before {
        display: inline-block;
      }

      & .e-groupheadercell .e-cancel {
        @include grid-padding-left-right(23px, 0);
        padding-top: 2px;
      }

      & .e-groupheadercell,
      & .e-groupheadercell:hover {
        float: right;
        margin-left: $grid-rtl-group-headercell-margin-left;
        margin-right: $grid-rtl-group-headercell-margin-right;
        @if $grid-skin != 'material3' {
          padding: $grid-rtl-grouped-headercell-padding;
        }
      }

      & .e-groupdroparea {
        text-align: $grid-groupdroparea-rtl-text-align;
      }

      & .e-ungroupbutton {
        float: left;
      }

      & .e-gridcontent table tr:not(.e-summaryrow) td.e-indentcell {
        @include grid-border-style-weight($grid-border-type, 0 0 0 $grid-border-size);
      }

      & .e-defaultcell.e-ralign,
      & .e-row .e-input.e-defaultcell.e-ralign,
      & .e-defaultcell.e-ralign:focus,
      & .e-editedrow .e-defaultcell.e-ralign:focus {
        padding-left: 10px;
      }

      & .e-detailindentcell {
        @include grid-border-width-styles;
        border-right-width: 0;
      }
    }

    &:not(.sf-grid).e-rtl{
      &.e-default:not(.e-verticallines):not(.e-bothlines) table th[rowspan]  {
        border-width: $grid-rtl-headercell-both-border-width;
      }

      &.e-default table th[rowspan].e-leftfreeze.e-freezeleftborder {
        border-left-width: 2px;
      }

      &.e-default table th[rowspan].e-rightfreeze.e-freezerightborder {
        border-right-width: 2px;
      }

      &.e-default table th[rowspan].e-fixedfreeze.e-freezeleftborder {
        border-right-width: 1px;
      }

      &.e-default table th[rowspan].e-fixedfreeze.e-freezerightborder {
        border-left-width: 1px;
      }
    }

    &.e-wrap {
      & .e-rowcell,
      & .e-columnheader .e-stackedheadercelldiv,
      & .e-columnheader .e-headercelldiv,
      & .e-columnheader .e-headercell.e-fltr-icon .e-headercelldiv {
        @include wrap-styles;
      }

      & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
        white-space: nowrap;
      }

      & .e-checkbox-wrapper {
        vertical-align: middle;
      }
    }

    &.e-wrap .e-columnheader {
      .e-filtermenudiv,
      .e-sortfilterdiv .e-filtermenudiv  {
        line-height: $grid-wrap-line-height;
      }
      .e-icon-group::before {
        display: inline-block;
      }
    }

    & .e-columnheader.e-wrap {
      .e-filtermenudiv,
      .e-sortfilterdiv .e-filtermenudiv {
        line-height: $grid-wrap-line-height;
      }

      .e-headercelldiv,
      .e-headercell.e-fltr-icon .e-headercelldiv,
      .e-stackedheadercelldiv {
        @include wrap-styles;
      }
      .e-icon-group::before {
        display: inline-block;
      }
    }

    & .e-gridcontent.e-wrap .e-rowcell {
      @include wrap-styles;
    }

    & .e-stackedheadercelldiv {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.e-responsive {
      .e-rowcell.e-gridclip,
      .e-gridclip .e-headercelldiv,
      .e-gridclip .e-stackedheadercelldiv {
        text-overflow: clip;
      }
    }

    .e-clipboard {
      cursor: default;
      height: 1px;
      left: -1000px;
      overflow: hidden;
      position: fixed;
      resize: none;
      top: -1000px;
      width: 1px;
    }

    &.e-resize-lines,
    &.e-resize-lines.e-rtl {
      & th.e-headercell.e-stackedheadercell:not(.e-freezerightborder, .e-freezeleftborder),
      & th.e-headercell.e-firstcell:not(.e-freezerightborder, .e-freezeleftborder) {
        border-left: 0;
        border-right: 0;
        border-top: 0;
      }

      & tr.e-columnheader th:last-child.e-stackedheadercell .e-rhandler.e-rcursor :not(.e-laststackcell, .e-freezerightborder, .e-freezeleftborder) {
        border-right: 0;
      }
    }

    &:not(.sf-grid).e-resize-lines,
    &:not(.sf-grid).e-resize-lines.e-rtl {
      &.e-default table th[rowspan]:not(.e-freezerightborder, .e-freezeleftborder) {
        border-left: 0;
      }
    }

    &.e-resize-lines.e-rtl {
      & tr.e-columnheader {
        & th:last-child.e-stackedheadercell .e-rhandler.e-rcursor,
        & th.e-lastcell .e-rhandler.e-rcursor,
        & th.e-laststackcell .e-rhandler.e-rcursor,
        & th.e-last-visible-stack-cell .e-rhandler.e-rcursor,
        & th.e-last-visible-cell .e-rhandler.e-rcursor {
          border-left: 0;
        }
        & th:last-child.e-stackedheadercell .e-rsuppress,
        & th.e-lastcell .e-rsuppress,
        & th.e-laststackcell .e-rsuppress,
        & th.e-last-visible-stack-cell .e-rsuppress,
        & th.e-last-visible-cell .e-rsuppress {
          border-left: 0;
        }
      }
    }

    &.e-resize-lines {
      & tr.e-columnheader {
        & th:last-child.e-stackedheadercell .e-rhandler.e-rcursor,
        & th.e-lastcell .e-rhandler.e-rcursor,
        & th.e-laststackcell .e-rhandler.e-rcursor,
        & th.e-last-visible-stack-cell .e-rhandler.e-rcursor,
        & th.e-last-visible-cell .e-rhandler.e-rcursor {
          border-right: 0;
        }
        & th:last-child.e-stackedheadercell .e-rsuppress,
        & th.e-lastcell .e-rsuppress,
        & th.e-laststackcell .e-rsuppress,
        & th.e-last-visible-stack-cell .e-rsuppress,
        & th.e-last-visible-cell .e-rsuppress {
          border-right: 0;
        }
      }
      & th.e-headercell.e-stackedheadercell.e-leftfreeze.e-freezeleftborder,
      & th.e-headercell.e-firstcell.e-leftfreeze.e-freezeleftborder {
        border-left-width: 0;
      }
    }

    &:not(.sf-grid).e-resize-lines.e-rtl {
      &.e-default table th[rowspan] {
        border-right: 0;
      }
    }

    &.sf-grid {
      .e-ccdlg .e-dlg-header-content{
        @if $grid-skin == 'fluent2' {
          padding-left: 20px;
        }
      }
      .e-indentcell.e-hide-padding {
        padding: 0;
      }

      .e-dialog .e-gridform .e-table .e-rowcell {
        &.e-adaptive-align-left {
          text-align: left;
          padding: 6px;
        }
        &.e-adaptive-align-right {
          text-align: right;
          padding: 6px;
        }
      }

      .e-content[aria-grabbed = 'true'] {
        .e-rowcell .e-checkbox-wrapper,
        .e-rowcell .e-css.e-checkbox-wrapper {
          -webkit-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
          user-select: none;
        }
      }

      span.e-ungroupbutton.e-icons {
        margin-left: $grid-group-ungroupicon-margin-left;
        @if $grid-skin == 'material3' or $grid-skin == 'tailwind3' or $grid-skin == 'tailwind3-dark' or $grid-skin == 'bootstrap5\.3' {
          margin-left: $group-unpgrouicon-margin-left;
        }
        &.e-ungroupbutton-hidden {
          display: none;
        }
      }
      .e-movablescrollbar {
        min-height: 17px;
        max-height: 17px;
        .e-movablechild {
          min-height: 17px;
          max-height: 17px;
        }
      }
      .e-summarycontent {
        &.e-summary-frozen{
          display: inherit;
        }
      }
      .e-table{
        &.e-masked-table{
          position: absolute;
          z-index: 5;
          border-collapse: separate;
          border-spacing: .25px;
        }
      }
      .e-dlg-content{
        .columndiv{
          width: 100%;
          .e-responsivecoldiv{
            .e-filter-icon{
              font-size: 16px;
            }
          }
          .e-icons.e-resascending-icon.e-btn-icon,
          .e-icons.e-resdescending-icon.e-btn-icon {
            float: none;
          }
        }
      }
      .e-table.e-inline-edit {
        border-collapse: separate;
        border-spacing: .25px;
      }

      .e-row .e-input-group .e-control.e-input {
        @if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
          padding-bottom: 1px;
          padding-top: 2px;
        }
      }

      .e-rowdragdrop {
        @if $grid-skin == 'material3' or $grid-skin == 'material3-dark' or $grid-skin == 'material' or $grid-skin == 'material-dark' or $grid-skin == 'bootstrap4' or $grid-skin == 'fluent2' or $grid-skin == 'fluent2-dark' {
          border-width: $grid-rowcell-broder-width;
          border-color: $grid-dragcell-border-color;
        }
      }

      .e-label.e-fltrcheck.e-wrapfilter {
        width: $grid-checkboxfiltertext-width;
        white-space: normal;
      }
      .e-label.e-choosercheck.e-checkboxwrap {
        width: $grid-columnchoosertext-width;
        white-space: normal;
      }

      .e-rowcell.e-frozen-right-border,
      .e-headercell.e-frozen-right-border,
      .e-filterbarcell.e-frozen-right-border {
        border-right: $grid-freezeline-border $grid-freezeline-right-border;
      }

      .e-rowcell.e-frozen-left-border,
      .e-headercell.e-frozen-left-border,
      .e-filterbarcell.e-frozen-left-border {
        border-left: $grid-freezeline-border $grid-freezeline-right-border;
      }

      .e-rowcell.e-freezeline {
        position: relative;
      }

      .e-rowcell {
        .e-frozen-right-cursor,
        .e-frozen-fixedright-cursor,
        .e-frozen-left-cursor,
        .e-frozen-fixedleft-cursor {
          @include frozen-cursor-styles;
        }
        .e-frozen-left-cursor,
        .e-frozen-fixedright-cursor {
          right: 0;
        }

        .e-frozen-right-cursor,
        .e-frozen-fixedleft-cursor {
          left: 0;
        }

        .e-frozen-left-cursor.e-frozen-resize-cursor {
          right: 3px;
        }
      }

      .e-gridheader .e-headercell {
        .e-frozen-right-cursor,
        .e-frozen-fixedright-cursor,
        .e-frozen-left-cursor,
        .e-frozen-fixedleft-cursor {
          @include frozen-cursor-styles;
        }

        .e-frozen-left-cursor,
        .e-frozen-fixedright-cursor {
          right: 0;
        }

        .e-frozen-right-cursor,
        .e-frozen-fixedleft-cursor {
          left: 0;
        }

        .e-frozen-left-cursor.e-frozen-resize-cursor {
          right: 3px;
        }

        .e-frozen-right-cursor.e-frozen-resize-cursor:not(.e-frozen-default-cursor) {
          left: 3px;
        }
      }

      .e-gridheader .e-filterbarcell {
        .e-frozen-right-cursor,
        .e-frozen-fixedright-cursor,
        .e-frozen-left-cursor,
        .e-frozen-fixedleft-cursor {
          @include frozen-cursor-styles;
        }

        .e-frozen-fixedright-cursor,
        .e-frozen-left-cursor {
          right: 0;
        }

        .e-frozen-right-cursor,
        .e-frozen-fixedleft-cursor {
          left: 0;
        }

        .e-frozen-left-cursor.e-frozen-resize-cursor {
          right: 3px;
        }

        .e-frozen-right-cursor.e-frozen-resize-cursor:not(.e-frozen-default-cursor) {
          left: 3px;
        }
      }

      .e-frozen-helper {
        border-left: $grid-freezeline-border $grid-freezeline-right-border;
        cursor: move;
        position: absolute;
        z-index: 2;
      }

      .e-content.e-freezeline-moving {
        user-select: none;
      }

      .e-gridheader .e-headercontent {
        .e-reorderuparrow {
          margin-top: $grid-reorder-arrow-top-margin;
        }

        .e-reorderuparrow-virtual {
          margin-top: $grid-reorder-virtualarrow-top-margin;
        }

        .e-reorderdownarrow {
          margin-top: $grid-reorder-downarrow-top-margin;
        }
        .e-reorderdownarrow-virtual {
          margin-top: $grid-reorder-virtualdownarrow-top-margin;
        }
      }

      /* stylelint-disable */
      .e-masked-cell.e-rowcell{
        &.e-rowcell-center {
          text-align: center;
        }

        &.e-rowcell-Left {
          text-align: left;
        } 
      .e-virtualcell {
        background-color: $grid-maskedcell-virtual-background-color;
        @if ($theme-name == 'fluent2-highcontrast') {
          background-color: white;
        }
        display: inline-block;
        height: 10px;
        width: 80%;
      }
    }
      /* stylelint-enable */

      .e-gridcontent {
        .e-content {
          overflow-y: auto;
        }

        .e-content.e-yscroll {
          overflow-y: scroll;
        }

        .e-content.e-noscroll {
          overflow-y: hidden;
        }
      }

      .e-gridcontent .e-content,
      .e-detailrowcollapse.e-dragborder,
      .e-detailrowexpand.e-dragborder{
        position: $grid-dragborder-position;
      }

      .e-label.e-fltrcheck,
      .e-label.e-choosercheck {
        width: $grid-filter-checkbox-width;
      }

      .e-checkboxlist .e-fltrcheck,
      .e-cc-contentdiv .e-choosercheck {
        white-space: $grid-filter-checkbox-white-space;
      }

      .e-checkbox-wrapper .e-label.e-fltrcheck {
        @if $grid-skin == 'tailwind3' {
          font-weight: normal;
        }
      }

      .e-filterdiv,
      .e-fltrtempdiv {
        .e-multiselect.e-input-group:not(.e-rtl) {
          text-align: left;
        }
      }

      &.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader)  {
        border-width: $grid-headercell-both-border-width;
      }

      .e-gridheader table th:not([rowspan = '1']):not(.e-grouptopleftcell),
      .e-device .e-gridheader table th:not([rowspan = '1']):not(.e-grouptopleftcell) {
        padding-bottom: $grid-stackedheadercell-botttom-padding;
        vertical-align: bottom;
      }

      &.e-rtl.e-default table th:not([rowspan = '1']).e-rightfreeze.e-freezerightborder,
      &.e-default table th:not([rowspan = '1']).e-leftfreeze.e-freezeleftborder {
        border-right-width: 2px;
      }

      &.e-rtl.e-default table th:not([rowspan = '1']).e-leftfreeze.e-freezeleftborder,
      &.e-default table th:not([rowspan = '1']).e-rightfreeze.e-freezerightborder {
        border-left-width: 2px;
      }

      &.e-rtl.e-default table th:not([rowspan = '1']).e-fixedfreeze.e-freezerightborder,
      &.e-default table th:not([rowspan = '1']).e-fixedfreeze.e-freezeleftborder {
        border-left-width: 1px;
      }

      &.e-rtl.e-default table th:not([rowspan = '1']).e-fixedfreeze.e-freezeleftborder,
      &.e-default table th:not([rowspan = '1']).e-fixedfreeze.e-freezerightborder {
        border-right-width: 1px;
      }

      &.e-rtl.e-default table th:not([rowspan = '1']):not(.e-detailcell,.e-detailindentcell,.e-stackedheadercell,.e-detailheadercell,.e-rowdragheader)  {
        border-width: $grid-rtl-headercell-both-border-width;
      }

      &.e-resize-lines,
      &.e-resize-lines.e-rtl {
        &.e-default table th:not([rowspan = '1']):not(.e-freezerightborder, .e-freezeleftborder) {
          border-left: 0;
        }
      }

      &.e-resize-lines.e-rtl {
        &.e-default table th:not([rowspan = '1']) {
          border-right: 0;
        }
      }

      &.e-rtl.e-bothlines .e-gridheader th.e-stackedheadercell {
        border-bottom-style: $grid-border-type;
        border-bottom-width: $grid-border-size;
      }

      &.e-rtl.e-default.e-bothlines {
        .e-headercell,
        .e-detailheadercell {
          border-width: $grid-headercell-both-border-width;
        }
      }

      &.e-resize-lines,
      &.e-resize-lines.e-rtl {
        & th.e-headercell.e-stackedheadercell:not(.e-freezerightborder, .e-freezeleftborder),
        & th.e-headercell.e-firstcell:not(.e-freezerightborder, .e-freezeleftborder) {
          border-left: 0;
          border-right: 0;
          border-top: 0;
        }
      }

      &.e-resize-lines.e-hidelines,
      &.e-resize-lines.e-rtl.e-hidelines {
        th.e-headercell.e-stackedheadercell.e-freezeleftborder,
        th.e-headercell.e-stackedheadercell.e-freezerightborder {
          border-bottom-width: 1px;
        }
      }

      &.e-default.e-bothlines {
        .e-headercell,
        .e-detailheadercell {
          border-width: $grid-headercell-both-border-width;
        }
      }

      &.e-default.e-bothlines,
      &.e-default.e-verticallines {
        .e-headercell.e-leftfreeze.e-freezeleftborder {
          border-right-width: 2px;
        }
      }

      &.e-default.e-bothlines,
      &.e-default.e-verticallines {
        .e-headercell.e-rightfreeze.e-freezerightborder {
          border-left-width: 2px;
        }
      }

      &.e-bothlines .e-gridheader th.e-stackedheadercell {
        border-bottom-style: $grid-border-type;
        border-bottom-width: $grid-border-size;
        @include grid-border-width-styles;
      }

      &.e-print-grid-layout {
        @if $theme-name =='fluent2-highcontrast' {
          border-color: rgb(128, 128, 128);
        }

        .e-rowcell,
        .e-gridheader {
          @if $theme-name =='fluent2-highcontrast' {
            border-color: rgb(128, 128, 128);
          }
        }
      }
    }
  }
}

#{&}.e-grid-min-height {
  .e-rowcell,
  .e-icon-grightarrow,
  .e-icon-gdownarrow {
    line-height: 0;
    @include grid-top-bottom-padding(0, 0);
  }

  .e-gridheader {
    .e-headercell,
    .e-detailheadercell,
    .e-headercell:not(.e-fltr-icon, .e-sort-icon) .e-headercelldiv {
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
    }
    .e-headercell .e-headercelldiv.e-headerchkcelldiv {
      @if $grid-skin == 'fluent' {
        margin-bottom: 0;
      }
    }
  }

  .e-gridcontent .e-groupcaption {
    @include grid-line-height-padding-styles(normal, 0 .7em);
  }

  .e-summarycell {
    @include grid-line-height-padding-styles(normal, 0 8px);
  }
}

#{&}.e-grid-min-height .e-grid-height {
  .e-rowcell {
    @include grid-line-height-padding-styles($grid-rowcell-line-height, $grid-content-padding $grid-content-right-padding);
  }

  .e-gridheader {
    .e-headercell,
    .e-detailheadercell,
    .e-headercell .e-headercelldiv {
      height: $grid-header-height;
    }
  }

  .e-gridcontent .e-groupcaption {
    @include grid-line-height-padding-styles($grid-group-captioncell-line-height, 0 .7em);
  }

  .e-summarycell {
    @include grid-line-height-padding-styles($grid-summary-cell-line-height, $grid-content-padding $grid-content-right-padding);
  }
}

.e-device.e-grid-min-height {
  .e-grid-height {
    .e-rowcell {
      padding: $grid-device-rowcell-padding;
    }

    .e-rowcell:first-child {
      padding: $grid-device-rowcell-firstchild-padding;
    }

    .e-rowcell:last-child {
      padding: $grid-device-rowcell-lastchild-padding;
    }
  }

  .e-rowcell,
  .e-rowcell:first-child,
  .e-rowcell:last-child {
    @include grid-top-bottom-padding(0, 0);
  }
}

.e-rtl {
  & .e-grid {
    & .e-headercell,
    & .e-detailheadercell,
    & .e-headercelldiv,
    & .e-headercelldiv.e-headerchkcelldiv {
      text-align: right;
    }
  }
}

.e-edit-dialog .e-gridform .e-table {
  border-collapse: separate;
  border-spacing: 11px;
  width: 100%;
}

.e-edit-dialog .e-dlg-content {
  position: relative;
}

@if $grid-skin == 'fluent2' {
  .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
  .e-grid-menu.e-contextmenu-container.e-grid-column-menu .e-ul .e-menu-item {
    padding: 0 6px;
  }
  .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
    padding: 0;
  }
}

@if $grid-skin == 'tailwind3' {
  .e-grid-menu.e-contextmenu-wrapper,
  .e-grid-menu.e-contextmenu-container.e-sfcontextmenu {
    .e-ul .e-menu-item .e-checkbox-wrapper .e-label {
      font-weight: normal;
    }
  }
}

 /* stylelint-disable */
.e-grid-toolbarmenu .e-responsivetoolbar-menu .e-menu-item.e-focused {
  @if $grid-skin != 'fluent2' and $grid-skin != 'bootstrap5.3' {
    background-color: transparent !important;
  }
}
/* stylelint-enable */

/* stylelint-disable */
.e-ddl.e-popup.e-popup-flmenu .e-dropdownbase,
.e-ddl.e-popup.e-popup-flbar .e-dropdownbase {
  max-height: $grid-fltrmnu-dd-max-height !important;
}
/* stylelint-enable */

/* Apply styles for Firefox only */
/* stylelint-disable function-url-quotes */
@-moz-document url-prefix() {
  #{&}.e-grid-min-height {
    .e-rowcell,
    .e-icon-grightarrow,
    .e-icon-gdownarrow {
      line-height: normal;
    }
  }
  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {
    /* stylelint-disable declaration-no-important */
    .e-table {
      border-spacing: 0 !important;
    }
    /* stylelint-enable declaration-no-important */

    .e-rowcell {
      line-height: 1;
    }
  }
}
/* stylelint-enable function-url-quotes */

/* Apply styles for Safari on macOS desktop and other Apple devices */
/* stylelint-disable function-url-quotes */
@supports (font: -apple-system-body) {
  .e-grid.sf-grid .e-virtualtable:has(tr.e-masked-row) {

    /* stylelint-disable declaration-no-important */
    .e-table {
      border-spacing: 0 !important;
    }
  }
}
/* stylelint-enable function-url-quotes */

@mixin background-color-styles($grid-skin, $bg, $bgcolor) {
  @if $grid-skin == 'material3' {
    background: $bg;
  }
  @else {
    background-color: $bgcolor;
  }
}

@mixin bgcolor-color-styles($bgcolor, $color) {
  @if $grid-skin == 'material3' {
    background: $bgcolor;
  }
  @else {
    background-color: $bgcolor;
  }
  color: $color;
}

@mixin bgcolor-bordercolor-styles($bgcolor, $bordercolor) {
  background-color: $bgcolor;
  border-color: $bordercolor;
}

@mixin hover-color-styles($grid-skin, $material, $bootstrap) {
  @if $grid-skin == 'material3' {
    background: $material;
  }
  @if $grid-skin == 'bootstrap4' {
    background-color: $bootstrap;
  }
}

@include export-module('grid-theme') {

  #{&}.e-grid,
  #{&}.e-grid-popup {
    .e-icons:not(.e-btn-icon, .e-check, .e-stop) {
      color: $grid-icon-color;
    }

    .e-ftrchk.e-chkfocus,
    .e-menu-item.e-menufocus,
    li.e-cclist.e-colfocus {
      @if ($grid-skin == 'material3') {
        background: $grid-hover-bg-color;
      }
      @else {
        background-color: $grid-hover-bg-color;
      }
      .e-checkbox-wrapper .e-frame {
        @if $theme-name =='fluent2-highcontrast' {
          border-color: rgb(0, 0, 0);
        }
      }
    }

    .e-ccdlg {
      .e-footer-content {
        border-color: $grid-columnchooser-footer-border-color;
        opacity: $grid-columnchooser-footer-border-opacity;
      }

      .e-cc-searchdiv {
        border-color: $grid-columnchooser-search-border-color;
      }

      .e-cc-searchdiv.e-input-focus {
        @if $grid-skin != 'fluent2' {
          border-color: $grid-columnchooser-search-border-fcolor;
        }
      }
    }
  }

  /*! Grid theme */
  #{&}.e-grid {
    border-color: $grid-header-border-color;

    .e-content {
      background-color: $grid-rows-bg-color;
    }

    .e-gridpopup span:hover,
    .e-gridpopup .e-spanclicked {
      color: $grid-icon-color;
    }

    .e-unboundcelldiv {
      .e-icons:not(.e-btn-icon) {
        color: $grid-command-icon-color;
      }
      .e-btn:hover .e-icons {
        @if $grid-skin == 'bootstrap5' {
          color: $white;
        }
      }
    }

    .e-table {
      background-color: $grid-table-background-color;
    }

    .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
      box-shadow: $grid-cell-focus-shadow;
    }

    .e-addedrow .e-normaledit .e-rowcell.e-focused {
      box-shadow: none;
    }

    &.e-left-shadow .e-leftfreeze.e-freezeleftborder.e-focused:not(.e-menu-item, .e-xlsel-top-border, .e-xlsel-left-border, .e-xlsel-bottom-border, .e-xlsel-right-border),
    &.e-right-shadow .e-rightfreeze.e-freezerightborder.e-focused:not(.e-menu-item, .e-xlsel-top-border, .e-xlsel-left-border, .e-xlsel-bottom-border, .e-xlsel-right-border) {
      border-color: $grid-cell-focus-border-color;
    }

    .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
      color: $grid-icon-default-color;
    }

    .e-gridheader .e-columnselection .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
      @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
        color: $grid-row-selection-color;
      }
    }

    .e-gridheader .e-headercontent {
      .e-icon-reorderuparrow,
      .e-icon-reorderdownarrow {
        color: $grid-column-reorder-icon-color;
      }
    }

    .e-groupdroparea .e-icons {
      color: $grid-header-icon-color;
      @if $grid-skin == 'material3' or $grid-skin == 'fluent2' or $grid-skin == 'tailwind3' {
        border-radius: $grid-border-radius-4;
      }
    }

    .e-groupdroparea .e-groupheadercell:hover .e-icons {
      @if $grid-skin == 'fluent2' {
        color: $grid-hover-icon-color;
      }
    }

    @if $grid-skin == 'material3' or $grid-skin == 'tailwind3' {
      .e-groupdroparea .e-icons:hover,
      .e-groupdroparea .e-icons.e-focused {
        background-color: $group-grouped-headercell-span-hover-bg-color;
      }
    }

    &.e-rtl .e-tableborder,
    tr th.e-firstcell {
      border-left-color: $grid-header-border-color;
    }

    tr th.e-firstcell,
    .e-tableborder {
      border-right-color: $grid-header-border-color;
    }

    .e-xlselaf,
    .e-autofill {
      background-color: $grid-autofill-color;
    }

    .e-autofill,
    .e-xlselaf,
    .e-xlsel {
      border-color: $grid-autofill-color;
      z-index: 1;
    }

    .e-autofill.e-freeze-autofill {
      z-index: 5;
    }

    .e-xlsel {
      background-color: transparent;
      border-style: solid;
      pointer-events: none;
      position: absolute;
    }

    .e-xlselaf {
      position: absolute;
      z-index: 3;
    }

    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
    .e-gridcontent .e-rowcell.e-dragborder,
    .e-gridcontent .e-groupcaption.e-dragborder,
    .e-gridcontent .e-summarycell.e-dragborder,
    .e-gridcontent .e-rowdragdrop.e-dragborder,
    & .e-gridheader thead tr th.e-firstrowdragborder,
    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder,
    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
      box-shadow: $grid-dragborder-box-shadow;
      z-index: $grid-dragborder-z-index;
    }

    .e-gridcontent {
      tr.e-row:first-child .e-rowcell.e-dragborder.e-fixedfreeze,
      .e-rowcell.e-dragborder.e-fixedfreeze,
      .e-groupcaption.e-dragborder.e-fixedfreeze,
      .e-summarycell.e-dragborder.e-fixedfreeze,
      .e-rowdragdrop.e-dragborder.e-fixedfreeze,
      tr.e-row:first-child .e-rowcell.e-dragborder.e-rightfreeze,
      .e-rowcell.e-dragborder.e-rightfreeze,
      .e-groupcaption.e-dragborder.e-rightfreeze,
      .e-summarycell.e-dragborder.e-rightfreeze,
      .e-rowdragdrop.e-dragborder.e-rightfreeze,
      .tr.e-row:first-child .e-rowcell.e-dragborder.e-leftfreeze,
      .e-rowcell.e-dragborder.e-leftfreeze,
      .e-groupcaption.e-dragborder.e-leftfreeze,
      .e-summarycell.e-dragborder.e-leftfreeze,
      .e-rowdragdrop.e-dragborder.e-leftfreeze {
        z-index: 6;
      }
    }

    &.e-rtl .e-gridcontent {
      tr.e-row:first-child .e-rowcell.e-dragborder.e-fixedfreeze,
      .e-rowcell.e-dragborder.e-fixedfreeze,
      .e-rowdragdrop.e-dragborder.e-fixedfreeze,
      tr.e-row:first-child .e-rowcell.e-dragborder.e-rightfreeze,
      .e-rowcell.e-dragborder.e-rightfreeze,
      .e-rowdragdrop.e-dragborder.e-rightfreeze,
      tr.e-row:first-child .e-rowcell.e-dragborder.e-leftfreeze,
      .e-rowcell.e-dragborder.e-leftfreeze,
      .e-rowdragdrop.e-dragborder.e-leftfreeze {
        z-index: 6;
      }
    }

    & .e-gridheader thead tr {
      th.e-firstrowdragborder.e-leftfreeze,
      th.e-firstrowdragborder.e-rightfreeze,
      th.e-firstrowdragborder.e-fixedfreeze {
        z-index: 6;
      }
    }

    .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    .e-gridcontent .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    .e-gridcontent .e-groupcaption.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    .e-gridcontent .e-summarycell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    .e-gridcontent .e-rowdragdrop.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    & .e-gridheader thead tr th.e-firstrowdragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    &.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    &.e-rtl .e-gridcontent .e-rowcell.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze),
    &.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder:not(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze) {
      position: $grid-dragborder-position;
    }

    .e-gridheader {
      @include bgcolor-color-styles($grid-header-bg-color, $grid-header-color);
      border-bottom-color: $grid-outter-border;
      border-top-color: $grid-header-border-color;
    }

    .e-gridcontent {
      & tr:first-child td {
        border-top-color: transparent;
      }

      & tr:first-child td.e-xlsel-top-border {
        border-top-color: $frozen-border-color;
      }
    }

    th.e-headercell[aria-sort = 'ascending']:not(.e-columnselection) .e-headertext,
    th.e-headercell[aria-sort = 'descending']:not(.e-columnselection) .e-headertext,
    th.e-headercell[aria-sort = 'ascending'] .e-sortfilterdiv,
    th.e-headercell[aria-sort = 'descending'] .e-sortfilterdiv {
      color: $grid-sorted-header-color;
      opacity: 1;
    }

    .e-verticallines tr th,
    .e-grouptopleftcell,
    .e-rowdragheader,
    .e-gridpopup .e-content,
    .e-filterbarcell,
    .e-filterbarcelldisabled,
    &.e-default .e-grouptopleftcell,
    &.e-default .e-rowdragheader,
    .e-headercell,
    .e-summarycell,
    .e-detailheadercell,
    [aria-selected] + tr .e-detailindentcell,
    &.e-default .e-gridheader .e-headercell.e-firstheader,
    &.e-default.e-horizontallines .e-headercell.e-firstheader,
    .e-filterbarcell input,
    .e-headercontent,
    &.e-default.e-verticallines .e-headercell.e-stackedheadercell:not(.e-freezeleftborder, .e-freezerightborder),
    &.e-default.e-horizontallines .e-grouptopleftcell,
    &.e-default .e-gridheader.e-stackedfilter tr:last-child th.e-grouptopleftcell,
    &.e-default.e-horizontallines .e-gridheader.e-stackedfilter tr:last-child th.e-grouptopleftcell,
    &.e-default .e-gridheader.e-stackedfilter tr:first-child th.e-grouptopleftcell,
    &.e-default.e-horizontallines .e-gridheader.e-stackedfilter tr:first-child th.e-grouptopleftcell {
      border-color: $grid-header-border-color;
    }

    .e-headercell,
    .e-detailheadercell {
      background-color: $grid-header-bg-color;

      &.e-leftfreeze:not(.e-rowcell),
      &.e-rightfreeze:not(.e-rowcell),
      &.e-fixedfreeze:not(.e-rowcell) {
        @if $grid-skin == 'bootstrap5.3' or $grid-skin == 'tailwind' {
          background-color: $grid-header-bg-color;
        }
      }
    }

    .e-gridcontent {
      background-color: $grid-content-bg-color;
    }

    .e-gridfooter,
    .e-gridfooter .e-leftfreeze,
    .e-gridfooter .e-rightfreeze,
    .e-gridfooter .e-fixedfreeze {
      @include background-color-styles($grid-skin, $grid-summary-row-bg-color, $grid-summary-row-bg-color);
    }

    .e-rowcell,
    .e-detailrowcollapse,
    .e-detailrowexpand,
    .e-gridcontent .e-rowdragdrop,
    .e-gridheader .e-rowdragdrop,
    .e-emptyrow {
      &:not(.e-editedbatchcell):not(.e-updatedtd) {
        color: $grid-rowcell-color;
        &.e-active {
          @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
            color: $grid-row-selection-color;
          }
        }
      }
    }

    .e-summaryrow .e-summarycell,
    .e-summaryrow .e-templatecell,
    .e-summarycontent .e-indentcell,
    .e-indentcell.e-detailindentcelltop,
    .e-groupfooterrow.e-summaryrow .e-indentcell.e-indentcelltop {
      @include background-color-styles($grid-skin, $grid-summary-row-bg-color, $grid-summary-row-bg-color);
      border-color: $grid-header-border-color;
      color: $grid-header-color;
    }

    .e-rowcell,
    .e-groupcaption,
    .e-indentcell,
    .e-recordplusexpand,
    .e-recordpluscollapse,
    .e-rowdragdropcell,
    .e-detailrowcollapse,
    .e-detailrowexpand,
    .e-detailindentcell,
    .e-detailcell,
    .e-emptyrow.e-show-added-row .e-lastrowcell {
      border-color: $grid-cell-border-color;
    }

    .e-xlsel-bottom-border {
      border-bottom-color: $frozen-border-color;
    }

    .e-xlsel-right-border,
    &.e-lib:not(.e-rtl) .e-filterbarcell.e-fixedfreeze.e-freezerightborder,
    &:not(.e-rtl) .e-filterbarcell.e-fixedfreeze.e-freezerightborder,
    &.e-lib:not(.e-rtl) .e-fixedfreeze.e-freezerightborder:not(.e-removefreezerightborder),
    &:not(.e-rtl) .e-fixedfreeze.e-freezerightborder:not(.e-removefreezerightborder),
    &.e-lib .e-leftfreeze.e-freezeleftborder,
    .e-leftfreeze.e-freezeleftborder,
    &.e-rtl .e-rightfreeze.e-freezerightborder,
    &.e-rtl .e-filterbarcell.e-fixedfreeze.e-freezeleftborder,
    &.e-rtl .e-fixedfreeze.e-freezeleftborder:not(.e-removefreezerightborder) {
      border-right-color: $frozen-border-color;
    }

    .e-rowcell .e-frozen-default-cursor,
    .e-gridheader .e-headercell .e-frozen-default-cursor,
    .e-gridheader .e-filterbarcell .e-frozen-default-cursor,
    &.e-rtl .e-leftfreeze.e-freezeleftborder,
    &.e-rtl .e-filterbarcell.e-fixedfreeze.e-freezerightborder,
    &.e-rtl .e-fixedfreeze.e-freezerightborder:not(.e-removefreezeleftborder),
    &.e-lib:not(.e-rtl) .e-rightfreeze.e-freezerightborder,
    &:not(.e-rtl) .e-rightfreeze.e-freezerightborder,
    &.e-lib:not(.e-rtl) .e-filterbarcell.e-fixedfreeze.e-freezeleftborder,
    &:not(.e-rtl) .e-filterbarcell.e-fixedfreeze.e-freezeleftborder,
    &.e-lib:not(.e-rtl) .e-fixedfreeze.e-freezeleftborder:not(.e-removefreezeleftborder),
    &:not(.e-rtl) .e-fixedfreeze.e-freezeleftborder:not(.e-removefreezeleftborder),
    .e-xlsel-left-border {
      border-left-color: $frozen-border-color;
    }

    .e-xlsel-top-border {
      border-top-color: $frozen-border-color;
    }

    .e-leftfreeze:not(.e-summarycell, .e-indentcell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground, .e-active),
    .e-rightfreeze:not(.e-summarycell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground, .e-active),
    .e-fixedfreeze:not(.e-summarycell, .e-selectionbackground, .e-updatedtd, .e-columnselection, .e-groupcaption, .e-cellselectionbackground, .e-active) {
      @if $grid-skin == 'material' or $grid-skin == 'highcontrast' {
        background-color: $grid-rows-bg-color;
      }
      @else {
        background-color: $grid-content-bg-color;
      }
    }

    .e-gridcontent .e-groupcaptionrow {
      .e-leftfreeze.e-groupcaption,
      .e-leftfreeze.e-recordplusexpand,
      .e-leftfreeze.e-recordpluscollapse,
      .e-leftfreeze.ee-indentcell {
        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
      }
    }

    &.e-gridhover,
    &.e-gridhover:not(.e-rowdrag) {
      tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover {
        td.e-active.e-rowcell:not(.e-updatedtd),
        td.e-rowdragdropcell.e-active:not(.e-updatedtd),
        td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover,
        td.e-rowcell:not(.e-updatedtd):not(.e-indentcell).e-columnselection:hover {
          background: $grid-row-selection-hover-bg-color;
        }
      }
    }

    &.e-gridhover .e-frozenhover,
    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
    &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
    &.e-gridhover:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
    &.e-gridhover .e-row.e-addedrow:not(.e-disable-gridhover):not(.e-detailrow):hover .e-dragindentcell,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
      &:not(.e-cellselectionbackground):not(.e-active):not(.e-columnselection):not(.e-updatedtd):not(.e-indentcell) {
        @if $grid-skin == 'bootstrap5.3' {
          background: $grid-hover-bg-color;
          color: $grid-hover-content-font-color;
        }
        @else {
          @include bgcolor-color-styles($grid-hover-bg-color, $grid-hover-content-font-color);
        }
      }
    }

    &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover,
    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover {
      .e-rowcell.e-leftfreeze,
      .e-rowcell.e-rightfreeze,
      .e-rowcell.e-unfreeze,
      .e-rowcell.e-fixedfreeze {
        &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
        }
      }
    }

    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover {
      .e-detailrowcollapse.e-leftfreeze,
      .e-detailrowcollapse.e-rightfreeze,
      .e-detailrowcollapse.e-unfreeze,
      .e-detailrowcollapse.e-fixedfreeze,
      .e-rowdragdrop.e-leftfreeze,
      .e-rowdragdrop.e-rightfreeze,
      .e-rowdragdrop.e-unfreeze,
      .e-rowdragdrop.e-fixedfreeze {
        &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
        }
      }
    }

    &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover {
      .e-rowdragdrop.e-leftfreeze,
      .e-rowdragdrop.e-rightfreeze,
      .e-rowdragdrop.e-unfreeze,
      .e-rowdragdrop.e-fixedfreeze {
        &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
        }
      }
    }

    &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
      &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        @if $grid-skin != 'material3' {
          @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
        }
      }
    }

    &.e-gridhover .e-dragclone .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
    &.e-rtl .e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
    &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
      &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        @if $grid-skin == 'material3' {
          background: $content-bg-color-alt3;
        }
      }
    }

    & .e-row:hover .e-rowdragdrop {
      cursor: move;
    }

    & .e-notallowedcur .e-row:hover .e-rowdragdrop {
      cursor: not-allowed;
    }

    .e-sortnumber {
      @include background-color-styles($grid-skin, $grid-sortnumber-bg-color, $grid-sortnumber-bg-color);
      color: $grid-sortnumber-color;
    }

    &.e-gridhover .e-frozenhover {
      color: $grid-hover-content-font-color;
    }

    .e-col-menu.e-filter-popup {
      box-shadow: $grid-column-menu-sub-menu-box-shadow;
    }

    td.e-active,
    & td.e-active .e-icon-rowdragicon::before {
      color: $grid-row-selection-color;
    }

    & .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
      @if $grid-skin == 'fluent2' {
        color: $grid-row-selection-color;
      }
      @if $grid-skin == 'tailwind3' {
        color: $grid-drag-clone-text-color;
      }
    }

    td.e-active {
      background: $grid-row-selection-bg-color;
    }

    td.e-active.e-leftfreeze:not(.e-updatedtd),
    td.e-active.e-unfreeze:not(.e-updatedtd),
    td.e-active.e-rightfreeze:not(.e-updatedtd),
    td.e-active.e-fixedfreeze:not(.e-updatedtd),
    .e-columnselection.e-leftfreeze:not(.e-updatedtd),
    .e-columnselection.e-unfreeze:not(.e-updatedtd),
    .e-columnselection.e-rightfreeze:not(.e-updatedtd),
    .e-columnselection.e-fixedfreeze:not(.e-updatedtd) {
      @if $grid-skin == 'material3' {
        background-color: rgba($primary-container, 1);
      }
      @else if $grid-skin == 'bootstrap4' {
        background-color: rgb(212 205 205);
      }
    }

    .e-columnselection {
      background: $grid-row-selection-bg-color;
      @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
        color: $grid-content-selection-color;
      }
    }

    td.e-cellselectionbackground {
      background: $grid-cell-selection-bg-color;
      color: $grid-cell-selection-color;
    }

    td:hover.e-cellselectionbackground {
      background: $grid-cell-selection-hover-bg-color;
    }

    td.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd).e-cellselectionbackground,
    td.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd).e-columnselection {
      @if $grid-skin == 'fluent2' or $grid-skin == 'highcontrast' {
        color: $grid-content-selection-color;
      }
    }

    td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
    td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
    td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
    td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
      @if $grid-skin == 'material3' {
        background-color: rgba($primary-container, 1);
      }
    }

    .e-filterbarcell,
    .e-filterbarcelldisabled {
      background-color: $grid-header-bg-color;
      background-image: none;
    }

    .e-filtered::before {
      color: $grid-filtered-color;
    }

    .e-gridpopup {
      .e-content {
        background-color: $grid-popup-bg-color;
      }

      .e-downtail::after {
        border-top-color: $grid-popup-bg-color;
      }

      .e-uptail::after {
        border-bottom-color: $grid-popup-bg-color;
      }
    }

    .e-cloneproperties {
      @if $grid-skin == 'material3' {
        background: $grid-drag-clone-bg-color;
        border: none;

        .e-dragclone {
          background-color: $grid-clone-dragdrop-bg-color;
        }
      }
      @else {
        @include bgcolor-bordercolor-styles($grid-drag-clone-bg-color, $grid-drag-clone-border-color);
      }
      color: $grid-drag-clone-color;
    }

    & .e-rhelper {
      background-color: $grid-resize-helper-color;
      cursor: col-resize;
      opacity: $grid-conent-font-opacity;
    }

    &.e-device .e-rcursor::before {
      border-right-color: $grid-resize-helper-color;
      opacity: $grid-conent-font-opacity;
    }

    &.e-device .e-rcursor::after {
      border-left-color: $grid-resize-helper-color;
      opacity: $grid-conent-font-opacity;
    }

    &.e-resize-lines {
      .e-headercell {
        .e-rhandler,
        .e-rsuppress {
          border-right: 1px solid $grid-header-border-color;
        }
      }

      &:not(.sf-grid) .e-focused .e-rhandler,
      &:not(.sf-grid) .e-focused .e-rsuppress {
        border: 0 none;
      }

      .e-headercell.e-stackedheadercell:not(.e-freezerightborder, .e-freezeleftborder) {
        border-bottom: 1px solid $grid-header-border-color;
        border-right: 1px solid $grid-header-border-color;
      }
    }

    &.e-rtl.e-resize-lines {
      .e-headercell.e-stackedheadercell:not(.e-freezeleftborder, .e-freezerightborder),
      .e-headercell .e-rhandler,
      .e-headercell .e-rsuppress {
        border-left: 1px solid $grid-header-border-color;
        border-right-width: 0;
      }

      .e-focused .e-rhandler,
      .e-focused .e-rsuppress {
        border: 0 none;
      }
    }

    .e-cloneproperties.e-draganddrop {
      box-shadow: $grid-clone-prop-box-shadow;
      @if $grid-skin != 'material3' or $grid-skin != 'tailwind3' {
        opacity: .95;
      }
      overflow: visible;
    }

    & .e-row {
      .e-dragstartrow::before,
      .e-selectionbackground .e-dragstartrow::before {
        color: $grid-clone-dropitemscount-bg-color;
      }
    }

    .e-griddragarea {
      @if $grid-skin == 'material3' {
        background: rgba($primary, .18);
      }
      @else if $grid-skin == 'fluent2' or $grid-skin == 'tailwind3' {
        @include bgcolor-bordercolor-styles($grid-drag-selection-bg-color, $grid-autofill-color);
      }
      @else {
        @include bgcolor-bordercolor-styles($grid-drag-clone-bg-color, $grid-drag-clone-bg-color);
      }
      color: $grid-row-selection-color;
    }

    .e-groupdroparea {
      @include background-color-styles($grid-skin, $group-droparea-bg-color, $group-droparea-bg-color);
      border-top-color: $grid-header-border-color;
      color: $group-droparea-color;
    }

    .e-groupdroparea.e-hover {
      background-color: $group-droparea-hover-bg-color;
      @if $grid-skin == 'fluent' {
        border: 1px dashed $grid-autofill-color;
      }
    }

    .e-groupdroparea.e-grouped {
      @include background-color-styles($grid-skin, $grouped-droparea-bg-color, $grouped-droparea-bg-color);
    }

    .e-groupheadercell {
      @if $grid-skin == 'material3' {
        background: $group-header-bg-color;
        border-style: solid;
      }
      @else {
        background-color: $group-header-bg-color;
      }
      border-color: $grid-group-broder-color;
      border-radius: $group-header-border-radius;
      color: $group-header-color;
      @if $grid-skin == 'fluent2' {
        border: 1px solid $chip-border-color;
      }
      @if $grid-skin == 'tailwind3' {
        border: 1px solid $grid-group-broder-color;
      }
    }

    .e-groupheadercell:hover {
      @include bgcolor-bordercolor-styles($group-header-hover-bg-color, $grid-group-hover-broder-color);
      @if $grid-skin == 'material3' {
        border-style: solid;
      }
      @if $grid-skin == 'fluent2' {
        color: $grid-hover-content-font-color;
        border: 1px solid $group-header-hover-bg-color;
      }
      @if $grid-skin == 'tailwind3' {
        background-color: $grid-group-broder-color;
        border: 1px solid $grid-group-broder-color;
      }
    }

    .e-ungroupbutton:hover {
      color: $grid-hover-icon-color;
      opacity: 1;
    }

    .e-ungroupbutton {
      opacity: $grid-ungroup-icon-opactiy;
    }

    .e-summarycell {
      color: $grid-header-color;
    }

    .e-summarycell,
    .e-groupcaption,
    .e-indentcell,
    .e-recordplusexpand,
    .e-recordpluscollapse {
      @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
      color: $group-caption-font-color;
    }

    .e-rowdragheader,
    .e-grouptopleftcell {
      background-color: $grid-header-bg-color;
    }

    .e-gridpopup .e-uptail::before,
    .e-gridpopup .e-uptail,
    .e-stackedheadercell {
      border-bottom-color: $grid-header-border-color;
    }

    td.e-updatedtd {
      @include bgcolor-color-styles($grid-batch-updated-bg-color, $grid-content-batch-font-color);
    }

    .e-gridpopup .e-downtail::before,
    .e-gridpopup .e-downtail,
    .e-gridcontent table tbody .e-normaledit .e-rowcell {
      border-top-color: $grid-header-border-color;
    }
    .e-gridcontent table tbody .e-normaledit{
      &.e-edit-frozen{
        position: relative;
      }
    }

    &.e-resize-lines .e-filterbarcell,
    &.e-rtl.e-resize-lines .e-filterbarcell,
    .e-gridcontent table tbody tr:not(:first-child) .e-normaledit .e-dragindentcell,
    .e-gridcontent table tbody tr:not(:first-child) .e-normaledit .e-detailrowcollapse,
    .e-gridheader table tbody .e-normaledit .e-dragindentcell,
    .e-gridheader table tbody .e-normaledit .e-detailrowcollapse {
      border-top: 1px solid $grid-header-border-color;
    }

    .e-gridcontent table tbody tr:first-child .e-normaledit .e-dragindentcell {
      border-top: 0 solid $grid-header-border-color;
    }

    .e-detailrow .e-grid.e-default .e-normaledit .e-lastrowcell {
      border-bottom: 0;
    }

    .e-cloneproperties.e-draganddrop .e-rowcell {
      color: $grid-content-font-color;
      @if $grid-skin == 'material3' {
        padding-top: 6px;
        padding-bottom: 6px;
      }
      @if $grid-skin == 'fluent2' {
        color: $grid-dragdrop-text-color;
      }

      &.e-focused {
        box-shadow: none;
      }
    }

    .e-cloneproperties.e-draganddrop table,
    .e-cloneproperties.e-draganddrop table .e-selectionbackground {
      @if $grid-skin == 'material3' {
        background: $grid-clone-dragdrop-bg-color;
        height: 32px;
      }
      @else {
        background-color: $grid-clone-dragdrop-bg-color;
        height: 30px;
      }
    }

    &.e-rtl {
      & .e-verticallines tr th:first-child:not(.e-firstcell),
      &.e-default .e-gridheader .e-headercell.e-firstheader,
      &.e-default.e-horizontallines .e-headercell.e-firstheader,
      &.e-default.e-verticallines .e-gridheader .e-headercell.e-firstheader,
      &.e-default.e-verticallines .e-headercell.e-stackedheadercell:not(.e-freezeleftborder, .e-freezerightborder),
      &.e-default.e-verticallines tr th:last-child:not(.e-freezeleftborder, .e-freezerightborder),
      &.e-default.e-verticallines .e-gridheader th.e-grouptopleftcell,
      &.e-default.e-verticallines .e-gridheader th.e-grouptopleftcell.e-lastgrouptopleftcell,
      &.e-default.e-bothlines .e-gridheader .e-headercell.e-firstheader,
      &.e-default.e-bothlines .e-gridheader th.e-grouptopleftcell.e-lastgrouptopleftcell {
        border-color: $grid-header-border-color;
      }

      .e-filterbardropdown {
        margin-left: $grid-filterbar-dropdown;
      }
    }

    &.sf-grid {
      .e-gridfooter .e-summarycontent {
        border-right: 0 $grid-header-border-color solid;
      }
      //New changes
      :is(.e-groupdroparea,
    .e-groupdroparea .e-groupsort,
    .e-groupdroparea .e-ungroupbutton,
    .e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-headercontent td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-groupcaption:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-recordplusexpand:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-recordpluscollapse:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-detailrowcollapse:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content td.e-detailrowexpand:not(.e-menu-item):not(.e-editedbatchcell),
    .e-content th.e-detailcell:not(.e-menu-item):not(.e-editedbatchcell)):is(:focus, :focus-visible) {
        box-shadow: $grid-cell-focus-shadow;
      }

      .e-groupdroparea .e-groupheadercell:focus-visible {
        box-shadow: $grid-cell-focus-shadow;
      }

      &.e-resize-lines {
        th:focus,
        th:focus-visible {
          .e-rhandler,
          .e-rsuppress {
            border: 0 none;
          }
        }
      }
    }

    &.sf-grid {
      .e-ccheck {
        &.e-colfocus {
          @if ($grid-skin == 'material3') {
            background: $grid-hover-bg-color;
          }
          @else {
            background-color: $grid-hover-bg-color;
          }
        }
        &.e-cchooser-chk {
          padding: 5px 0;
        }
      }
      .e-hide {
        display: none;
      }
    }

    &.sf-grid{
      .e-gridcontent .e-leftfreeze.e-recordplusexpand,
      .e-gridcontent .e-leftfreeze.e-recordpluscollapse{
        @include background-color-styles($grid-skin, $group-row-bg-color, $group-row-bg-color);
      }
    }
  }
  .e-print-offscreen{
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .e-spreadsheet .e-ftrchk.e-chkfocus {
    @if ($grid-skin == 'material3') {
      background: $grid-hover-bg-color;
    }
    @else {
      background-color: $grid-hover-bg-color;
    }
  }

  .e-tooltip-wrap.e-griderror,
  .e-control.e-tooltip-wrap.e-popup.e-griderror {
    @include bgcolor-bordercolor-styles($grid-val-error-bg-color, $grid-val-error-bg-color);
    @if $grid-skin == 'fluent2' {
      border-color: $tooltip-border;
    }
  }

  .e-tooltip-wrap.e-griderror {
    .e-arrow-tip-inner.e-tip-top,
    .e-arrow-tip-outer.e-tip-top {
      border-bottom: 8px solid $grid-val-error-bg-color;
      color: $grid-val-error-bg-color;
      @if $grid-skin == 'fluent2' {
        border-bottom: 8px solid $tooltip-border;
      }
    }

    .e-arrow-tip-outer.e-tip-bottom,
    .e-arrow-tip-inner.e-tip-bottom {
      border-top: 8px solid $grid-val-error-bg-color;
      color: $grid-val-error-bg-color;
      @if $grid-skin == 'fluent2' {
        border-bottom: 8px solid $tooltip-border;
      }
    }

    .e-tip-content,
    .e-tip-content label {
      color: $grid-val-error-color;
    }
    .e-tip-content .e-error{
      display: block;
    }
  }

  .e-dropitemscount {
    @include bgcolor-color-styles($grid-clone-dropitemscount-bg-color, $grid-dropitemscount-color);
  }

  .e-filterbaroperator.e-dropdownlist {
    position: absolute;
  }

  @if $grid-skin == 'fluent2' {
    .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
    .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
      color: $flyout-text-color-hover;
    }
  }

  .e-filterbardropdown:not(.e-rtl) {
    margin-right: $grid-filterbar-dropdown;
  }

  .e-bigger .e-filterbardropdown:not(.e-rtl) {
    @if $grid-skin == 'highcontrast' {
      margin-right: 38px;
    }
  }

  .e-headercontent .e-filterbar .e-filterbarcell .e-fltrinputdiv .e-input-group {
    .e-filterbardropdown {
      border: transparent;
    }

    .e-filterbardropdown:active,
    .e-filterbardropdown.e-input-focus {
      box-shadow: none;
    }
  }
}

@include export-module('grid-bootstrap-dark-icons') {

  .e-icon-check::before {
    content: '\e7ff';
  }

  #{&}.e-grid,
  .e-grid-menu {

    &.e-rtl .e-icon-rowdragicon::before,
    .e-icon-rowdragicon::before,
    .e-group-animate .e-drag.e-icon-drag::before {
      content: '\e330';
    }

    .e-group-animate .e-nextgroup.e-icon-next::before {
      content: '\e219';
    }

    .e-icon-autofit::before {
      content: '\e169';
    }

    .e-icon-autofitall::before {
      content: '\e16a';
    }

    .e-icon-columnchooser::before {
      content: '\e16b';
    }

    .e-icon-ascending::before {
      content: '\e234';
    }

    .e-icon-descending::before {
      content: '\e239';
    }

    .e-icon-hide::before {
      content: '\e825';
    }

    .e-ungroupbutton.e-icon-hide::before {
      content: '\e842';
    }

    .e-icon-rowselect::before {
      content: '\e930';
    }

    .e-icon-sortdirect::before {
      content: '\e890';
    }

    .e-icon-gdownarrow::before {
      content: '\e853';
    }

    .e-icon-grightarrow::before {
      content: '\e826';
    }

    .e-icon-filter::before,
    .e-resfilter-icon::before {
      content: '\e946';
    }

    .e-icon-filter.e-filtered::before {
      content: '\ebb2';
    }

    .e-ressort-icon::before {
      content: '\e612';
    }

    .e-excl-filter-icon::before {
      content: '\e249';
    }

    .e-excl-filter-icon.e-filtered::before {
      content: '\e246';
    }

    &.e-rtl {
      .e-icon-grightarrow::before {
        content: '\e98f';
      }
    }

    .e-icon-group::before,
    .e-icon-ungroup::before {
      content: '\e926';
    }

    .e-icon-reorderuparrow::before {
      content: '\e918';
    }

    .e-icon-reorderdownarrow::before {
      content: '\e919';
    }

    .e-print::before {
      content: '\e34b';
    }

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

    .e-resback-icon::before {
      content: '\e94b';
    }

    .e-wordexport::before {
      content: '\e7b0';
    }

    .e-pdfexport::before {
      content: '\e240';
    }

    .e-csvexport::before {
      content: '\e241';
    }

    .e-excelexport::before {
      content: '\e242';
    }

    .e-edit::before {
      content: '\e81e';
    }

    .e-grid-icon-pin::before {
      content: '\e178';
    }

    .e-grid-icon-unpin::before {
      content: '\e179';
    }

    .e-responsivetoolbaritems-btn::before,
    .e-columnmenu::before,
    .e-columnmenu.e-filtered::before {
      content: '\e984';
    }

    .e-delete::before {
      content: '\e84e';
    }

    .e-copy::before {
      content: '\e70a';
    }

    .e-save::before {
      content: '\e964';
    }

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

    .e-columnchooserdiv::before {
      content: '\e714';
    }

    .e-columnchooser::before {
      content: '\e21e';
    }

    .e-columnchooser-btn::before {
      content: '\e969';
    }

    .e-cc-icon::before {
      content: '\e82e';
    }
  }
}

#{&}.e-grid,
.e-grid-menu,
.e-grid-popup {
  .e-ccsearch-icon::before,
  .e-search-icon::before {
    content: '\e961';
  }

  .e-ccsearch-icon.e-cc-cancel::before,
  .e-chkcancel-icon::before,
  .e-input-group .e-clear-icon::before {
    content: '\e7a7';
  }

  .e-cancel-icon::before {
    content: '\e825';
  }

  .e-cancel::before {
    content: '\e842';
  }
}

.e-responsive-dialog {
  & .e-resfilterback::before {
    content: '\e94b';
  }

  & .e-resfilter-icon.e-icons::before,
  & .e-filterset::before {
    content: '\e946';
  }

  & .e-search-icon::before,
  & .e-ccdlg span.e-ccsearch-icon::before {
    content: '\e961';
  }

  & .e-chkcancel-icon::before,
  & .e-ccdlg span.e-cc-cancel::before {
    content: '\e7a7';
  }

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

  & .e-resascending-icon.e-icons::before {
    content: '\e234';
  }

  & .e-resdescending-icon.e-icons::before {
    content: '\e239';
  }

  & .e-rescolumn-icon.e-icons::before {
    content: '\e16b';
  }

  & .e-resautofit-icon.e-icons::before {
    content: '\e169';
  }

  & .e-resautofitall-icon.e-icons::before {
    content: '\e16a';
  }

  & .e-resgroup-icon.e-icons::before,
  & .e-resungroup-icon.e-icons::before {
    content: '\e926';
  }
}

.e-grid-toolbarmenu .e-responsivetoolbar-menu {
  .e-menu-icon.e-print::before {
    content: '\e34b';
  }
  .e-menu-icon.e-pdfexport::before {
    content: '\e240';
  }
  .e-menu-icon.e-excelexport::before {
    content: '\e242';
  }
  .e-menu-icon.e-csvexport::before {
    content: '\e241';
  }
  .e-menu-icon.e-columnchooser::before {
    content: '\e16b';
  }
}

.e-row-responsive-filter {
  & .e-dlg-closeicon-btn {
    & .e-icon-dlg-close::before {
      content: '\e94b';
    }
  }
}

.e-contextmenu-container {
  .e-menu-item {
    .e-menu-icon {
      &.e-columnchooser::before {
        content: '\e16b';
      }

      &.e-pdfexport::before {
        content: '\e240';
      }

      &.e-excelexport::before {
        content: '\e242';
      }

      &.e-csvexport::before {
        content: '\e241';
      }
    }
  }
}

.e-grid-chart-icon::before {
  content: '\e70d';
}

.e-grid-bar-chart-icon::before {
  content: '\e855';
}

.e-grid-bar-icon::before {
  content: '\e855';
}

.e-grid-stacking-bar-icon::before {
  content: '\e889';
}

.e-grid-stacking-bar-100-icon::before {
  content: '\e863';
}

.e-grid-pie-icon::before {
  content: '\e141';
}

.e-grid-column-chart-icon::before {
  content: '\e847';
}

.e-grid-column-icon::before {
  content: '\e847';
}

.e-grid-stacking-column-icon::before {
  content: '\e888';
}

.e-grid-stacking-column-100-icon::before {
  content: '\e868';
}

.e-grid-line-chart-icon::before {
  content: '\e867';
}

.e-grid-line-icon::before {
  content: '\e867';
}

.e-grid-stacking-line-icon::before {
  content: '\e841';
}

.e-grid-stacking-line-100-icon::before {
  content: '\e871';
}

.e-grid-area-chart-icon::before {
  content: '\e883';
}

.e-grid-area-icon::before {
  content: '\e883';
}

.e-grid-stacking-area-icon::before {
  content: '\e875';
}

.e-grid-stacking-area-100-icon::before {
  content: '\e900';
}

.e-grid-scatter-icon::before {
  content: '\e1ae';
}

@mixin hover-color-styles($grid-skin, $material, $bootstrap) {
  @if $grid-skin == 'material3' {
    background: $material;
  }
  @if $grid-skin == 'bootstrap4' {
    background-color: $bootstrap;
  }
}

@mixin sort-number-styles {
  border-radius: $grid-sortnumber-border-radius;
  display: inline-block;
  float: right;
  text-align: center;
  font-size: $grid-sortnumber-font-size;
}

@mixin grid-top-bottom-padding($bottom, $top) {
  padding-bottom: $bottom;
  padding-top: $top;
}

@mixin grid-edit-input-styles($fontsize, $bottom, $top) {
  font-family: $grid-font-family;
  font-size: $fontsize;
  @include grid-top-bottom-padding($bottom, $top);
}

@mixin grid-margin-padding($margin, $padding) {
  margin: $margin;
  padding: $padding;
}

@mixin grid-flot-margin($float, $margin) {
  float: $float;
  margin: $margin;
}

@mixin grid-padding-left-right($left, $right) {
  padding-left: $left;
  padding-right: $right;
}

@mixin grid-line-height-padding-styles($lheight, $padding) {
  line-height: $lheight;
  padding: $padding;
}

@mixin grid-font-size-weight-styles($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

@mixin grid-checkbox-styles {
  -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
  height: 1px;
  opacity: 0;
  width: 1px;
}

@include export-module('grid-bigger') {

  /*! Grid bigger */
  #{&}.e-grid {
    .e-bigger &,
    &.e-bigger {
      &.e-gridhover .e-dragclone .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell,
      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse,
      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
      &.e-rtl .e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop,
      &.e-gridhover .e-dragclone .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
        &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
          @if $grid-skin == 'material3' {
            background: $content-bg-color-alt3;
          }
        }
      }

      &.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover,
      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover {
        .e-rowcell.e-leftfreeze,
        .e-rowcell.e-rightfreeze,
        .e-rowcell.e-unfreeze,
        .e-rowcell.e-fixedfreeze {
          &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
          }
        }
      }

      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover {
        .e-detailrowcollapse.e-leftfreeze,
        .e-detailrowcollapse.e-rightfreeze,
        .e-detailrowcollapse.e-unfreeze,
        .e-detailrowcollapse.e-fixedfreeze,
        .e-rowdragdrop.e-leftfreeze,
        .e-rowdragdrop.e-rightfreeze,
        .e-rowdragdrop.e-unfreeze,
        .e-rowdragdrop.e-fixedfreeze {
          &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
          }
        }
      }

      &.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover {
        .e-rowdragdrop.e-leftfreeze,
        .e-rowdragdrop.e-rightfreeze,
        .e-rowdragdrop.e-unfreeze,
        .e-rowdragdrop.e-fixedfreeze {
          &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
          }
        }
      }

      &.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand {
        &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
          @if $grid-skin != 'material3' {
            @include hover-color-styles($grid-skin, $grid-hover-bg-color, rgb(236 233 233));
          }
        }
      }
    }
  }

  .e-bigger #{&}.e-grid,
  #{&}.e-grid-popup.e-bigger,
  .e-bigger #{&}.e-grid-popup,
  .e-bigger #{&}.e-grid-popup {
    .e-dialog.e-checkboxfilter,
    .e-dialog.e-flmenu {
      min-width: 260px;
    }

    .e-dialog.e-checkboxfilter {
      min-height: $grid-bigger-checkbox-filter-min-height;
      @if $grid-skin =='material3' {
        & .e-dlg-content {
          padding-top: 16px;
          padding-right: 16px;
        }
      }
    }

    .e-flmenu-valuediv {
      padding: $grid-bigger-flmenu-padding;
    }

    .e-checkboxfilter {
      & .e-dlg-content {
        padding-left: $grid-bigger-checkbox-content-padding-left;
        @if $grid-xlfl-skin == 'fluent2' {
          padding-right: 24px;
        }
      }

      & .e-footer-content {
        @if $grid-xlfl-skin == 'fluent2' {
          padding-right: 24px;
          padding-left: 24px;
        }
      }

      & .e-ftrchk,
      & .e-searchbox {
        padding-left: $grid-bigger-checkbox-padding-topbottom;
      }
    }

    &.e-rtl .e-checkboxfilter {
      & .e-dlg-content {
        @include grid-padding-left-right($grid-rtl-bigger-checkbox-content-padding-left, $grid-bigger-checkbox-content-padding-left);
      }

      & .e-ftrchk,
      & .e-searchbox {
        @include grid-padding-left-right(0, $grid-bigger-checkbox-padding-topbottom);
      }
    }

    @if $grid-skin == 'fluent2' {
      .e-checkboxfilter .e-ftrchk.e-infinitescroll {
        margin-left: 0;
        padding-left: 0;
      }
    }

    .e-ccdlg {
      .e-dlg-content {
        @include grid-margin-padding($grid-bigger-columnchooser-content-margin, $grid-bigger-columnchooser-content-padding);
      }

      .e-ccul-ele {
        padding: $grid-bigger-columnchooser-ul-padding;
      }

      .e-cc-searchdiv {
        padding-left: $grid-bigger-searchdiv-padding-left;
      }

      .e-checkbox-wrapper.e-control.e-keyboard {
        padding-left: $grid-bigger-cc-checkbox-padding-left;
      }

      li.e-cclist {
        padding: $grid-bigger-columnchooser-li-padding;
        @if $grid-skin == 'material3' {
          line-height: 24px;
        }
      }

      .e-toolbar .e-ccdiv {
        margin-top: $grid-bigger-columnchooser-toolbar-div-margin-top;
      }

      @if $grid-skin == 'tailwind3' {
        .e-cc.e-input,
        .e-cc.e-input:focus {
          padding-top: 0;
          padding-bottom: 0;
          padding-left: 8px;
        }

        .e-main-div {
          padding-top: 10px;
        }
      }
    }

    .e-bigger &,
    &.e-bigger {
      .e-ccdlg .e-checkbox-wrapper span.e-label {
        @if $grid-skin == 'material3' {
          font-size: $text-base;
        }
      }
    }

    .e-ccdlg {
      .e-cc-searchdiv {
        @include grid-padding-left-right(0, $grid-bigger-searchdiv-padding-left);
      }

      span.e-ccsearch-icon.e-cc-cancel {
        @if $grid-skin == 'fluent' {
          font-size: 14px;
        }
        @else if $grid-skin == 'tailwind' or $grid-skin == 'bootstrap5' {
          font-size: 16px;
        }
      }
    }
  }

  .e-bigger #{&}.e-grid,
  #{&}.e-grid.e-bigger {
    font-size: $grid-bigger-font-size;

    .e-gridheader thead .e-icons:not(.e-check):not(.e-stop) {
      font-size: $grid-bigger-icon-font-size;
    }

    .e-row .e-icon-rowdragicon::before {
      font-size: $grid-bigger-icon-font-size;
      @if $grid-skin == 'fluent2' {
        font-size: 18px;
      }
    }

    .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper.e-responsive-right {
      padding-right: $grid-res-toolbar-search-wrapper-padding-right;
    }

    .e-res-toolbar .e-toolbar-items .e-toolbar-right .e-search-wrapper .e-input-group {
      width: 100%;
    }

    .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper {
      padding: $grid-res-toolbar-search-wrapper-padding;

      .e-input.e-search {
        width: $grid-res-toolbar-clear-icon-width;
      }

      .e-input-group-icon.e-icons.e-sicon.e-clear-icon {
        margin: $grid-res-toolbar-clear-icon-margin;
      }

      & .e-sicon.e-clear-icon::before {
        font-size: $grid-res-toolbar-search-clear-icon-font-size;
      }

      & .e-search .e-search-icon {
        padding-left: $grid-res-toolbar-search-icon-padding-left;
      }
    }

    .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper:has(.e-input-group) {
      padding: $grid-res-toolbar-input-search-wrapper-padding;
    }

    .e-toolbar-items .e-toolbar-item.e-search-wrapper {
      @include grid-top-bottom-padding($grid-bigger-toolbar-search-wrapper-padding-bottom, $grid-bigger-toolbar-search-wrapper-padding-top);
      @if $grid-skin =='fluent2' {
        & .e-search {
          width: 248px;
        }
      }

      & .e-search .e-search-icon {
        min-width: $grid-bigger-toolbar-search-icon-min-width;
      }
    }

    .e-toolbar .e-toolbar-item.e-search-wrapper {
      @if $grid-skin == 'material3' {
        & .e-search {
          width: $grid-bigger-toolbar-search-width;
        }
      }
      & .e-sicon.e-clear-icon {
        min-width: $grid-bigger-toolbar-search-clear-icon-min-width;
        @include grid-margin-padding($grid-bigger-toolbar-search-clear-icon-margin, $grid-bigger-toolbar-search-clear-icon-padding);
      }

      & .e-sicon.e-clear-icon::before {
        font-size: $grid-bigger-toolbar-search-clear-icon-font-size;
      }
    }

    &.e-rtl .e-toolbar .e-toolbar-item.e-search-wrapper {
      & .e-sicon.e-clear-icon {
        min-width: $grid-rtl-bigger-toolbar-search-clear-icon-min-width;
        @include grid-margin-padding($grid-rtl-bigger-toolbar-search-clear-icon-margin, $grid-rtl-bigger-toolbar-search-clear-icon-padding);
      }
    }

    .e-toolbar .e-toolbar-items .e-tbar-btn.e-btn .e-btn-icon.e-icons {
      font-size: $grid-bigger-toolbar-icon-size;
    }

    .e-headercell {
      height: $grid-bigger-headercell-line-height;
      padding: $grid-bigger-headercell-top-padding $grid-bigger-headercell-padding $grid-bigger-headercell-bootom-padding;
    }

    .e-gridheader .e-resizetable tr th:first-child {
      padding-left: $grid-bigger-headercell-padding;
    }

    .e-gridheader .e-resizetable tr th:last-child {
      padding-right: $grid-bigger-headercell-padding;
    }

    .e-gridcontent .e-resizetable tr td:first-child {
      padding-left: $grid-bigger-content-right-padding;
    }

    .e-gridcontent .e-resizetable tr td:last-child {
      padding-right: $grid-bigger-content-right-padding;
    }

    &.e-grid-autofit .e-headercell {
      padding: $grid-bigger-headercell-autofit-padding;
    }

    .e-headercelldiv {
      height: $grid-bigger-header-height;
      line-height: $grid-bigger-headercelldiv-line-height;
    }

    .e-headercell,
    .e-headercelldiv,
    .e-detailheadercell {
      font-size: $grid-bigger-header-font-size;
    }

    .e-icons:not(.e-check, .e-stop) {
      @if $grid-skin == 'tailwind3' {
        &:not(.e-search-icon) {
          font-size: $grid-bigger-icons-font-size;
        }
      }
      @else {
        font-size: $grid-bigger-icons-font-size;
      }
    }

    .e-gridheader thead .e-icons {
      @if $grid-skin == 'tailwind3' {
        &:not(.e-check):not(.e-stop) {
          font-size: $grid-bigger-header-icons-font-size;
        }
      }
      @else {
        font-size: $grid-bigger-header-icons-font-size;
      }
    }

    .e-groupsort.e-icons {
      @if $grid-skin == 'fluent2' {
        font-size: 16px;
      }
    }

    @if $grid-skin == 'tailwind3' {
      .e-gdiagonaldown.e-icon-gdownarrow,
      .e-gnextforward.e-icon-grightarrow {
        font-size: 20px;
      }
    }

    .e-icon-gdownarrow {
      font-size: $grid-bigger-gdownarrow-icon-font-size;
    }

    .e-icon-grightarrow {
      font-size: $grid-bigger-grightarrow-icon-font-size;
    }

    .e-toolbar .e-tbar-btn.e-btn .e-btn-icon.e-icons.e-columnchooser-btn {
      font-size: $grid-bigger-columnchooser-btn-font-size;
    }

    @if $grid-skin == 'fluent2' {
      &.e-device .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
        margin-left: -5px;
        margin-top: 4px;
      }
      &.e-rtl.e-device .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
        margin-right: -2px;
      }
    }

    @if $grid-skin == 'tailwind3' {
      &.e-device .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
        margin-top: 4px;
      }

      &.e-device .e-gridheader .e-rightalign.e-fltr-icon .e-sortnumber {
        margin: 0 4px 0 -15px;
      }

      &.e-device .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv {
        margin: -21px 10px -16px -13px;
      }

      &.e-device .e-gridheader .e-rightalign .e-sortnumber {
        @if $grid-skin == 'tailwind3' {
          margin: 1px 4px 0 0;
        }
        @else {
          margin: 0 4px 0 -10px;
        }
      }

      &.e-device .e-gridheader .e-rightalign .e-sortfilterdiv {
        @if $grid-skin == 'tailwind3' {
          margin: -16px 4px -16px -17px;
        }
        @else {
          margin: -22px 4px -16px -13px;
        }
      }

      &.e-device .e-gridheader .e-fltr-icon .e-sortnumber {
        margin: 0 -4px 0 2px;
      }

      &.e-device .e-gridheader .e-fltr-icon .e-sortfilterdiv {
        margin: -20px 18px -14px 5px;
      }
    }

    .e-gridheader {
      .e-headercell .e-headercelldiv.e-headerchkcelldiv {
        @if $grid-skin == 'fluent2' {
          margin-bottom: 2px;
        }
        @if $grid-skin == 'fluent' {
          margin-bottom: 0;
        }
      }

      .e-rightalign .e-stackedheadercelldiv {
        @if $grid-skin == 'material3' {
          margin-left: 12px;
        }
      }

      & tr th:first-child.e-filterbarcell,
      & tr th:last-child.e-filterbarcell {
        padding-left: $grid-filterbarcell-first-last-child-padding-left;
      }
    }

    .e-headercelldiv {
      font-size: $grid-bigger-headercell-font-size;
    }
    .e-headercelldiv:has(.e-hierarchycheckbox) {
      overflow: visible;
    }
    .e-rowcell,
    .e-summarycell,
    .e-groupcaption {
      font-size: $grid-bigger-content-font-size;
      padding: $grid-bigger-content-padding $grid-bigger-content-right-padding;
    }

    @if $grid-skin == 'tailwind3' {
      .e-summarycell,
      .e-groupcaption {
        padding: 16px;
      }
    }

    .e-summarycell.e-lastrowcell {
      border-bottom-width: 1px;
    }

    .e-rowcell .e-checkbox-wrapper,
    .e-rowcell .e-css.e-checkbox-wrapper {
      @if $grid-skin == 'material3' {
        height: 18px;
      }
      @if $grid-skin == 'tailwind3' {
        height: $grid-bigger-rowcell-line-height;
      }
    }

    @if $grid-skin == 'tailwind3' {
      &.e-grid-min-height .e-rowcell {
        .e-checkbox-wrapper,
        .e-css.e-checkbox-wrapper {
          top: 0;
        }
      }
    }

    .e-filterbarcell,
    .e-filterbarcelldisabled {
      height: $grid-bigger-headercell-line-height;
      @if $grid-skin == 'material3' {
        padding: 0 $grid-bigger-headercell-padding 5px;
      }
      @else if $grid-skin == 'fluent2' {
        padding: 6px;
      }
      @else {
        padding: 0 $grid-bigger-headercell-padding;
      }
    }

    .e-filterbarcell input {
      &.e-checkbox{
        height: 1px;
      }
      height: $grid-bigger-filterbarcell-text-input;
    }

    .e-ftrchk {
      @include grid-top-bottom-padding($grid-bigger-checkbox-padding-topbottom, $grid-bigger-checkbox-padding-topbottom);
      @if $grid-skin == 'material3' {
        margin-left: -4px;
      }
    }

    &.e-device.e-noselect {
      user-select: none;
    }

    .e-rightalign.e-fltr-icon .e-headertext,
    .e-centeralign.e-fltr-icon .e-headertext {
      padding: 0 4px;
    }
    .e-fltr-icon .e-headertext,
    .e-leftalign.e-fltr-icon .e-headertext {
      padding-right: 4px;
    }

    &.e-rtl {
      .e-rightalign.e-fltr-icon .e-headertext {
        padding-right: 0;
      }
      .e-fltr-icon .e-headertext {
        padding: 0 0 0 4px;
      }
      .e-leftalign.e-fltr-icon .e-headertext {
        padding: 0 4px;
      }
    }

    &.e-wrap {
      & .e-rowcell,
      & .e-columnheader .e-stackedheadercelldiv,
      & .e-columnheader .e-headercelldiv {
        line-height: $grid-bigger-wrap-line-height;
      }
    }

    .e-sortnumber {
      @include sort-number-styles;
      font-size: $grid-sort-number-font-size;
      height: $grid-bigger-sort-number-size;
      line-height: $grid-bigger-sortnumer-line-height;
      width: $grid-bigger-sort-number-size;

      @if $grid-skin == 'fluent' {
        font-size: 14px;
      }
    }

    &.e-rtl {
      .e-headercell.e-leftalign .e-sortfilterdiv{
        @if $grid-skin == 'material3' {
          margin: -16px 2px;
        }
      }
      .e-headercell.e-fltr-icon .e-headercelldiv .e-sortnumber {
        @if $grid-skin == 'tailwind' {
          margin-left: 0;
        }
      }

      .e-groupdroparea.e-hover {
        @if $grid-skin == 'tailwind' {
          right: 3.4px;
        }
      }

      .e-dropitemscount {
        @if $grid-skin == 'tailwind' {
          margin-left: -8px;
        }
      }

      span.e-groupsort.e-icons {
        @if $grid-skin == 'fluent' {
          margin-top: 0;
          padding: 0 4px;
        }
        @else if $grid-skin == 'bootstrap4' {
          margin-left: 7px;
        }
        @else if $grid-skin == 'material3' {
          padding-top: 7.5px;
        }
      }

      & .e-groupsort,
      & .e-ungroupbutton,
      & .e-toggleungroup {
        margin-left: $grid-rtl-group-sorticon-margin-left;
      }

      .e-groupheadercell,
      .e-groupheadercell:hover {
        @include grid-margin-padding($grid-bigger-rtl-group-headercell-margin, $grid-bigger-rtl-group-headercell-padding);
      }

      .e-device .e-groupheadercell {
        padding: $grid-bigger-device-rtl-group-headercell-padding;
      }

      &.e-device .e-groupheadercell {
        @if $grid-skin == 'bootstrap5.3' {
          padding: $grid-bigger-device-rtl-group-headercell-padding;
        }
      }

      span.e-ungroupbutton.e-icons {
        margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
        margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
        margin-top: $grid-bigger-sorticon-margin-top;
        padding-left: $grid-ungroup-rtl-padding-left;
        @if $grid-skin == 'fluent' {
          margin-top: 0;
          padding: 0 4px;
        }
        @else if $grid-skin == 'material3' {
          padding-top: 7.5px;
        }
      }

      .e-headercell {
        .e-frozen-right-cursor,
        .e-frozen-fixedleft-cursor,
        .e-frozen-left-cursor,
        .e-frozen-fixedright-cursor {
          left: 0;
        }
        .e-frozen-right-cursor.e-frozen-resize-cursor:not(.e-frozen-default-cursor),
        .e-frozen-left-cursor.e-frozn-resize-cursor {
          left: 3px;
        }
      }

      .e-filterbarcell {
        .e-frozen-fixedright-cursor,
        .e-frozen-left-cursor,
        .e-frozen-fixedleft-cursor,
        .e-frozen-right-cursor {
          left: 0;
        }

        .e-frozen-right-cursor.e-frozen-resize-cursor:not(.e-frozen-default-cursor),
        .e-frozen-left-cursor.e-frozen-resize-cursor {
          left: 3px;
        }
      }

      .e-filterbardropdown {
        @if $grid-skin == 'fluent2' {
          margin-left: 37px;
        }
        @if $grid-skin == 'highcontrast' {
          margin-left: 38px;
        }
      }
    }

    .e-rowcell,
    .e-summarycell,
    .e-emptyrow td,
    &:not(.e-grid-min-height) .e-gridcontent tr td:not(.e-indentcell):first-child:empty,
    &:not(.e-grid-min-height) .e-gridcontent tr.e-row .e-rowcell:empty {
      line-height: $grid-bigger-rowcell-line-height;
    }

    .e-xlsel-bottom-border.e-xlsel-top-border {
      line-height: $grid-bigger-rowcell-autofill-top-bottom-line-height;
    }

    .e-xlsel-bottom-border {
      line-height: $grid-bigger-rowcell-autofill-top-line-height;
    }

    .e-filterbarcell input {
      font-size: $grid-bigger-font-size;
    }

    .e-groupdroparea {
      font-size: $grid-bigger-grouparea-font-size;
      min-height: $grid-bigger-group-line-height;
      padding: $grid-bigger-groupdroparea-padding;

      .e-icons {
        @if $grid-skin == 'material3' {
          border-radius: $grid-border-radius-8;
        }
      }
    }

    .e-groupdroparea.e-hover {
      @if $grid-skin == 'tailwind' {
        margin-bottom: 7px;
        min-height: 38px;
        outline-offset: 4px;
        padding: 9px;
        right: -3.4px;
        top: 4px;
        width: 99.4%;
      }
      @else if $grid-skin == 'fluent' {
        padding-bottom: 13.5px;
      }
    }

    .e-cloneproperties {
      padding: $grid-bigger-clone-padding;
    }

    .e-cloneproperties.e-draganddrop {
      & .e-rowcell {
        @if $grid-skin == 'material3' {
          @include grid-top-bottom-padding(10px, 10px);
        }
      }
      & table,
      table .e-selectionbackground {
        @if $grid-skin == 'material3' {
          height: 40px;
        }
      }
      padding: $grid-bigger-draganddrop-clone-padding;
    }

    .e-headerclone {
      font-size: $grid-bigger-header-font-size;
      @if $grid-skin == 'fluent2' {
        font-size: 14px;
      }
    }

    .e-dropitemscount {
      font-size: 14px;
      @if $grid-skin == 'tailwind' or  $grid-skin =='highcontrast' {
        margin-left: 1px;
      }
      @if $grid-skin == 'tailwind3' {
        font-size: 12px;
        padding: 3px 8px 4px;
      }
    }

    .e-groupdroparea.e-grouped {
      padding: $grid-bigger-groupedcell-padding;
    }

    .e-groupdroparea.e-grouped.e-hover {
      @if $grid-skin == 'tailwind' {
        padding: 0 .5px 1.5px;
      }
      @else if $grid-skin == 'fluent' {
        padding-bottom: 0;
      }
    }

    .e-groupdroparea.e-grouped.e-hover .e-groupheadercell {
      @if $grid-skin == 'tailwind' {
        margin-top: 1.5px;
      }
      @else if $grid-skin == 'fluent' {
        margin-bottom: 5px;
      }
    }

    /* stylelint-disable */
    &:not(.e-grid-min-height) .e-gridcontent tr td:not(.e-indentcell):first-child:empty,
    &:not(.e-grid-min-height) .e-gridcontent tr.e-row .e-rowcell:empty {
      height: $grid-bigger-rowcell-line-height + $grid-bigger-content-padding +  $grid-bigger-content-padding;
    }

    @if $grid-skin == 'fluent2' or $grid-skin == 'tailwind3' {
      &:not(.e-grid-min-height) .e-editedrow,
      &:not(.e-grid-min-height) .e-addedrow {
        .e-normaledit .e-rowcell {
          height: $grid-bigger-rowcell-line-height + $grid-bigger-content-padding +  $grid-bigger-content-padding;
        }
      }
    }
    /* stylelint-enable */

    .e-groupheadercell,
    .e-groupheadercell:hover {
      border-radius: $grid-bigger-grouped-headercell-border-radius;
      height: $grid-bigger-group-headercell-height;
      margin: $grid-bigger-group-headercell-margin;
      @if $grid-skin != 'material3' {
        padding: $grid-bigger-group-headercell-padding;
      }
      font-size: $grouped-bigger-text-font-size;
    }

    .e-groupheadercell:hover {
      padding: $grid-bigger-group-headercell-hover-padding;
    }

    .e-gdclone {
      border-radius: $grid-bigger-group-clone-broder-radius;
      padding: $grid-bigger-group-clone-padding;
    }

    .e-groupheadercell {
      span {
        height: $grid-bigger-groupcell-span-height;
        @include grid-line-height-padding-styles($grid-bigger-groupcell-span-line-height, $grid-bigger-groupcell-span-padding);
      }

      .e-ungroupbutton {
        font-size: $grid-bigger-ungroup-button-font-size;
      }

      .e-grouptext {
        line-height: $grid-bigger-group-text-line-height;
        @if $grid-skin == 'material3' {
          padding-left: 12px;
        }
      }
    }

    .e-row {
      .e-input-group .e-input.e-field,
      .e-input-focus .e-input.e-field {
        @include grid-edit-input-styles($grid-bigger-font-size, $grid-edit-input-bigger-padding-bottom, $grid-edit-input-bigger-padding-top);
      }

      .e-input-group {
        @if $grid-skin == 'material3' {
          margin-top: 2px;
          line-height: 39.5px;
        }
        margin-bottom: $grid-edit-input-bigger-margin;
        vertical-align: middle;
      }
    }

    &.e-device {
      .e-filterbarcell {
        padding: $grid-device-filterbarcell-padding;
      }

      .e-filterbarcell:first-child {
        padding: $grid-device-filterbarcell-firstchild-padding;
      }

      .e-filterbarcell:last-child {
        padding: $grid-device-filterbarcell-lastchild-padding;
      }

      .e-groupheadercell .e-ungroupbutton {
        line-height: $grid-device-ungroupbutton-line-height;
      }

      .e-columnmenu {
        margin: $grid-bigger-device-column-menu-margin;
      }

      .e-groupheadercell {
        padding: $grid-device-group-headercell-padding;
        @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap5.3' {
          padding: $grid-bigger-group-headercell-padding;
        }
        span {
          @include grid-line-height-padding-styles($grid-device-groupheadercell-span-line-height, $grid-device-grouped-headercell-span-padding);
        }
      }

      .e-headercell {
        padding: $grid-device-headercell-padding;
      }

      .e-headercell:first-child {
        padding: $grid-device-headercell-fistchild-padding;
      }

      .e-headercell:last-child {
        padding: $grid-device-headercell-lastchild-padding;
      }

      .e-rowcell,
      .e-summarycell {
        padding: $grid-device-rowcell-padding;
      }

      .e-row {
        .e-input-group .e-input.e-field,
        .e-input-focus .e-input.e-field {
          @include grid-top-bottom-padding($grid-edit-input-bigger-device-padding-bottom, $grid-edit-input-bigger-device-padding-bottom);
        }
      }

      & .e-normaledit .e-rowcell,
      & .e-editedbatchcell.e-rowcell {
        @include grid-top-bottom-padding(0, 0);
      }

      span.e-ungroupbutton.e-icons {
        margin-top: $grid-device-ungroupbutton-icon-margin-top;
        @if $grid-skin == 'bootstrap4' {
          padding-top: 0;
        }
      }

      span.e-groupsort.e-icons {
        margin-top: $grid-device-group-sorticon-margin-top;
      }
    }

    &:not(.e-row-responsive).e-device {
      .e-rowcell:first-child,
      .e-summarycell:first-child {
        padding: $grid-device-rowcell-firstchild-padding;
      }

      .e-rowcell:last-child,
      .e-summarycell:last-child {
        padding: $grid-device-rowcell-lastchild-padding;
      }
    }

    .e-unboundcell,
    .e-editedrow .e-normaledit .e-unboundcell,
    .e-addedrow .e-normaledit .e-unboundcell {
      @include grid-top-bottom-padding($grid-bigger-command-column-padding-bottom, $grid-bigger-command-column-padding-top);
    }

    .e-grouptext {
      margin-right: $grid-bigger-grouptext-marign;
      width: $grid-bigger-grouptext-width;
    }

    .e-groupsort,
    span.e-ungroupbutton,
    .e-toggleungroup {
      margin-left: $grid-bigger-groupedcell-icons-marign-left;
      margin-top: $grid-bigger-sorticon-margin-top;
    }

    span.e-ungroupbutton.e-icons {
      font-size: $grid-bigger-ungroupbutton-icons-font-size;
      margin-left: $grid-bigger-ungroupbutton-icon-margin-left;
      padding-top: $grid-bigger-ungroupbutton-icon-padding-top;
      @if $grid-skin != 'material3' {
        margin-top: $grid-bigger-ungroupbutton-icon-margin-top;
      }
      margin-right: $grid-bigger-ungroupbutton-icon-margin-right;
      @if $grid-skin == 'fluent' {
        padding: 0 4px;
      }
      padding-right: $grid-group-unpgroupicon-padding-right;
      @if $grid-skin == 'fluent' {
        padding-right: 4px;
      }
    }

    span.e-ungroupbutton.e-icons:hover {
      @if $grid-skin == 'tailwind' {
        color: $cool-gray-700;
      }
    }

    span.e-groupsort.e-icons {
      margin-right: $group-bigger-sorticon-margin-right;
      @if $grid-skin == 'material3' {
        font-size: 16px;
        padding-top: 7.5px;
      }
      @else {
        margin-top: $grid-bigger-sorticon-margin-top;
      }
      @if $grid-skin == 'fluent' {
        margin-left: 0;
        padding: 0 4px;
      }
      @else if $grid-skin == 'bootstrap4' {
        margin-left: -4px;
      }
    }

    .e-groupcaption {
      line-height: $grid-bigger-groupcaption-line-height;
    }

    .e-rowcell.e-frozen-right-border,
    .e-headercell.e-frozen-right-border,
    .e-filterbarcell.e-frozen-right-border {
      border-right: $grid-freezeline-border $grid-freezeline-right-border;
    }

    .e-rowcell.e-frozen-left-border,
    .e-headercell.e-frozen-left-border,
    .e-filterbarcell.e-frozen-left-border {
      border-left: $grid-freezeline-border $grid-freezeline-right-border;
    }

    .e-rowcell.e-freezeline,
    .e-gridheader .e-filterbarcell.e-freezeline {
      position: relative;
    }

    .e-rowcell,
    .e-gridheader .e-headercell,
    .e-gridheader .e-filterbarcell {
      .e-frozen-right-cursor,
      .e-frozen-fixedright-cursor,
      .e-frozen-left-cursor,
      .e-frozen-fixedleft-cursor {
        cursor: move;
        height: 100%;
        position: absolute;
        top: 0;
        width: 4px;
      }
    }

    .e-rowcell {
      .e-frozen-left-cursor,
      .e-frozen-fixedright-cursor,
      .e-frozen-right-cursor,
      .e-frozen-fixedleft-cursor {
        left: 0;
      }

      .e-frozen-left-cursor.e-frozen-resize-cursor {
        left: 3px;
      }
    }

    .e-frozen-helper {
      border-left: $grid-freezeline-border $grid-freezeline-right-border;
      cursor: move;
      position: absolute;
      z-index: 2;
    }

    .e-content.e-freezeline-moving {
      user-select: none;
    }

    .e-groupdroparea.e-group-animate .e-drag.e-icon-drag {
      @if $grid-skin == 'material3' {
        font-size: 16px;
        height: 30px;
        line-height: 31px;
        margin-right: -12px;
      }
      @if $grid-skin == 'tailwind3' {
        font-size: 16px;
        height: 20px;
        line-height: 20px;
      }
    }

    &.e-rtl .e-groupdroparea.e-group-animate .e-drag.e-icon-drag {
      @if $grid-skin == 'material3' {
        line-height: 31px;
        margin-right: 0;
        margin-left: -12px;
      }
    }

    .e-gridheader .e-headercontent {
      .e-reorderuparrow,
      .e-reorderdownarrow,
      .e-reorderuparrow-virtual,
      .e-reorderdownarrow-virtual {
        @if $grid-skin == 'material3' or $grid-skin == 'tailwind3' {
          margin-left: -4px;
        }
      }

      .e-reorderuparrow,
      .e-reorderuparrow-virtual {
        @if $grid-skin == 'material3' or $grid-skin == 'tailwind3' {
          margin-top: -9px;
        }
      }

      .e-reorderdownarrow,
      .e-reorderdownarrow-virtual {
        @if $grid-skin == 'material3' {
          margin-top: 2px;
        }
        @if $grid-skin == 'tailwind3' {
          margin-top: 3px;
        }
      }
    }

    &.e-rtl {
      .e-gridheader .e-headercontent {
        .e-reorderuparrow,
        .e-reorderdownarrow,
        .e-reorderuparrow-virtual,
        .e-reorderdownarrow-virtual {
          @if $grid-skin == 'material3' {
            margin-left: -3px;
          }
        }
      }
    }

    & .e-normaledit .e-rowcell,
    & .e-editedbatchcell.e-rowcell {
      @include grid-top-bottom-padding(0, 0);
    }

    td.e-boolcell input.e-input.e-boolcell {
      @if $grid-skin != 'material' or $grid-skin != 'material3' or $grid-skin != 'tailwind3' {
        height: 23px;
      }
    }
  }

  .e-bigger #{&}.e-grid:not(.sf-grid),
  #{&}.e-grid:not(.sf-grid).e-bigger {
    .e-gridheader table th[rowspan],
    &.e-device .e-gridheader table th[rowspan] {
      padding-bottom: $grid-device-gridheader-row-span-padding;
    }
  }

  #{&}.e-grid {
    @if $grid-skin == 'fluent2' {
      &.e-bigger .e-dropitemscount {
        font-size: 14px;
        padding: 2px 8px 3px;
        margin-left: -2px;
      }
    }

    .e-bigger & .e-gridcontent .e-groupcaptionrow .e-lastrowcell.e-recordplusexpand ~ td.e-lastrowcell,
    &.e-bigger .e-gridcontent .e-groupcaptionrow .e-lastrowcell.e-recordplusexpand ~ td.e-lastrowcell {
      &.e-groupcaption,
      &.e-summarycell {
        border-bottom-width: 0;
      }
    }

    &.e-bigger .e-res-toolbar {
      & .e-toolbar-items {
        & .e-tbar-btn:hover {
          background: none;
        }
        & .e-responsive-right {
          & .e-search-wrapper {
            & .e-sicon.e-clear-icon {
              margin: $grid-responsive-toolbar-search-clear-icon-margin;
            }

            & .e-sicon.e-clear-icon::before {
              font-size: $grid-responsive-toolbar-search-clear-icon-font-size;
            }
          }
        }
      }
    }

    .e-bigger & .e-group-animator {
      .e-groupheadercell,
      .e-groupheadercell:hover {
        margin: $grid-group-animator-bigger-cell-margin;
        border-bottom-width: $grid-animtor-border-bottom-width;
      }
    }

    .e-bigger & .e-group-animate.e-groupdroparea .e-nextgroup {
      margin-top: $grid-animator-bigger-area-margin;
      @if $grid-skin == 'fluent2' {
        margin-left: 16px;
      }
    }

    .e-bigger &.e-rtl .e-group-animate.e-groupdroparea .e-nextgroup {
      @if $grid-skin == 'material3' {
        margin-top: 18px;
      }
    }

    .e-bigger & .e-groupdroparea.e-group-animate .e-drag.e-icon-drag {
      @if $grid-skin == 'fluent2' {
        font-size: 16px;
        margin-top: 2px;
      }
    }

    .e-bigger &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
    &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
      @if $grid-skin == 'material3' {
        border: 1px solid rgba($content-text-color);
      }
    }

    .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
    &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
      @if $grid-skin == 'material3' {
        padding-top: 0;
        padding-bottom: 0;
        @include grid-padding-left-right(12px, 12px);
      }
    }

    &.e-rtl {
      .e-bigger & .e-groupheadercell span.e-grouptext {
        @if $grid-skin == 'material3' {
          padding-right: 12px;
          margin-left: -8px;
        }
        @if $grid-skin == 'tailwind3' {
          padding-right: 4px;
          margin-left: 6px;
        }
      }
      .e-bigger & .e-group-animator .e-groupheadercell span.e-grouptext {
        @if $grid-skin == 'tailwind3' {
          padding-right: 0;
          margin-right: 0;
        }
      }
    }

    &.sf-grid {

      .e-bigger #{&}.e-grid.sf-grid,
      #{&}.e-grid.sf-grid.e-bigger {
        .e-gridheader table th:not([rowspan = '1']),
        &.e-device .e-gridheader table th:not([rowspan = '1']) {
          padding-bottom: $grid-device-gridheader-row-span-padding;
        }
      }
    }
  }
}

.e-bigger .e-grid.sf-grid {
  .e-res-toolbar .e-toolbar-items .e-toolbar-item.e-search-wrapper:has(.e-input-group) {
    padding-right: $grid-res-toolbar-search-wrapper-padding-right;
  }

  .e-label.e-choosercheck.e-checkboxwrap {
    @if $grid-skin == 'fluent'{
      width: 125px;
    }
  }

  .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:not(.e-hidden):nth-last-child(1 of :not(.e-hidden)),
  .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:not(.e-hidden):nth-last-child(1 of :not(.e-hidden)) {
    margin-right: $grid-bigger-toolbar-div-margin;
  }
  .e-toolbar.e-rtl .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:not(.e-hidden):nth-last-child(1 of :not(.e-hidden)),
  .e-toolbar.e-rtl .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:not(.e-hidden):nth-last-child(1 of :not(.e-hidden)) {
    margin-left: $grid-bigger-toolbar-div-margin;
    margin-right: initial;
  }

  .e-row .e-input-group .e-control.e-input {
    @if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
      padding-bottom: 0;
      padding-top: 0;
    }
  }

  .e-responsive-dialog .e-dlg-content .e-mainfilterdiv .e-dialog .e-contextmenu-wrapper ul li{
    @if $theme-name == 'Material3-dark' or $theme-name == 'tailwind3-dark'{
      background-color: unset;
      outline-offset: 0;
    }
  }

  .e-icons:not(.e-check, .e-stop) {
    @if $grid-skin == 'tailwind3' {
      font-size: $grid-bigger-icons-font-size;
    }
  }

  .e-dialog .e-footer-content .e-btn{
    @if $grid-skin =='highcontrast'{
      margin-left: $grid-column-chooser-dlg-footer-padding;
    }
  }

  .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-apply-btn {
    @if $grid-skin =='tailwind' or $grid-skin =='tailwind3' or $grid-skin =='tailwind-dark' or $grid-skin =='tailwind3-dark'{
      padding-bottom: 6px;
    }
  }
  .e-dialog .e-dlg-content .e-contextmenu-container ul .e-menu-item.e-menu-caret-icon {
    @if $grid-skin =='fluent2' or $grid-skin =='fluent2-highcontrast' or $grid-skin =='fluent2-dark' {
      padding: 0;
    }
  }
  .e-xlflmenu.e-responsive-dialog.e-bigger {
    .e-dlg-content{
      .e-radio + label{
        @if $grid-skin == 'fluent2' or $grid-skin == 'fluent2-dark' or $grid-skin == 'fluent2-highcontrast' {
          margin: 0;
        }
      }
    }
  }
}

.e-bigger .e-grid,
.e-bigger.e-grid {
  .e-gridheader .e-headercontent {
    .e-reorderuparrow,
    .e-reorderdownarrow {
      font-size: $grid-biggerreorderarrow-font-size;
      @if $grid-skin == 'fluent2' {
        margin-left: -2.5px;
      }
    }

    .e-reorderuparrow {
      @if $grid-skin == 'fluent' {
        margin-top: -11px;
      }
      @if $grid-skin == 'bootstrap5' {
        margin-top: -2px;
      }
      @if $grid-skin == 'fluent2' {
        margin-top: -8px;
      }
      @if $grid-skin == 'bootstrap5.3' {
        margin-top: -9px;
      }
    }

    .e-reorderdownarrow {
      @if $grid-skin == 'fluent2' {
        margin-top: 4px;
      }
    }
  }

  .e-gridheader thead .e-icons {
    @if $grid-skin != 'tailwind3' {
      font-size: $grid-bigger-check-select-all-font-size;
    }
  }

  &.e-rtl.e-device .e-columnmenu {
    margin: $grid-bigger-device-rtl-cm-margin;
  }

  &.e-rtl .e-groupheadercell span {
    padding: $grid-bigger-rtl-group-span-padding;
  }

  &.e-device.e-rtl .e-groupheadercell span {
    padding: $grid-device-rtl-grouped-headercell-span-padding;
  }
}

.e-bigger .e-grid.e-grid-min-height {
  .e-grid-height {
    .e-rowcell {
      @include grid-line-height-padding-styles($grid-bigger-rowcell-line-height, $grid-bigger-content-padding $grid-bigger-content-right-padding);
    }

    .e-rowcell:first-child {
      line-height: $grid-bigger-first-last-rowcell-padding;
    }

    .e-rowcell:last-child {
      line-height: $grid-bigger-first-last-rowcell-padding;
    }
  }

  .e-rowcell,
  .e-rowcell:first-child,
  .e-rowcell:last-child {
    line-height: 0;
    @include grid-top-bottom-padding(0, 0);
  }
}

.e-bigger .e-wrap.e-grid-min-height {
  .e-rowcell {
    line-height: 18px;
  }

  &:not(.e-grid-min-height) .e-gridcontent tr td:not(.e-indentcell):first-child:empty,
  &:not(.e-grid-min-height) .e-gridcontent tr.e-row .e-rowcell:empty {
    height: 18px;
  }

  .e-grid-height {
    .e-rowcell {
      line-height: $grid-bigger-wrap-line-height;
    }

    &:not(.e-grid-min-height) .e-gridcontent tr td:not(.e-indentcell):first-child:empty,
    &:not(.e-grid-min-height) .e-gridcontent tr.e-row .e-rowcell:empty {
      height: $grid-bigger-rowcell-line-height + $grid-bigger-content-padding + $grid-bigger-content-padding;
    }
  }
}

.e-bigger {
  .e-edit-dialog.e-dlg-modal {
    .e-dlg-header-content{
      @if $grid-skin == 'fluent' {
        padding: 16px;
        .e-btn.e-dlg-closeicon-btn{
          bottom: 4px;
        }
      }
    }
  }
  .e-ccdlg.e-cc {
    .e-dlg-header-content {
      @if $grid-skin == 'fluent' {
        padding: 14px 28px 17px;
      }
      @if $grid-skin == 'fluent2' {
        padding-left: 24px;
      }
    }
    .e-footer-content {
      @if $grid-skin == 'fluent2' {
        padding-right: 24px;
        padding-left: 24px;
      }
    }
  }
  .e-ccdlg {
    .e-dlg-header-content {
      @if $grid-skin == 'fluent2' {
        padding-left: 24px;
      }
    }
    .e-footer-content {
      @if $grid-skin == 'fluent2' {
        padding-right: 24px;
        padding-left: 24px;
      }
    }
  }
  .e-filter-popup.e-excelfilter .e-dlg-content {
    @if $grid-skin == 'fluent' {
      padding-bottom: 0;
    }
  }
}

.e-bigger {
  &.e-grid.sf-grid.e-row-responsive,
  .e-grid.sf-grid.e-row-responsive {
    & .e-gridcontent,
    & .e-summarycontent {
      & td::before{
        @if $grid-skin == 'fluent' {
          overflow: hidden;
          bottom: 0;
        }
      }
    }
    & .e-gridcontent tr.e-verticalwrap td::before {
      @if $grid-skin == 'fluent' {
        bottom: auto;
      }
    }
  }
  .e-grid.sf-grid .e-gridheader .e-headercontent {
    .e-reorderuparrow {
      @if $grid-skin == 'fluent2' or $grid-skin == 'fluent2-dark' or $grid-skin == 'material3' or $grid-skin == 'material3-dark' or $grid-skin == 'bootstrap5\.3' or $grid-skin == 'fluent' or $grid-skin == 'tailwind3' or $grid-skin == 'tailwind3-dark' {
        margin-top: $grid-biggerreorder-arrow-top-margin;
      }
    }
    .e-reorderdownarrow {
      @if $grid-skin == 'fluent2' or $grid-skin == 'fluent2-dark' or $grid-skin == 'material3' or $grid-skin == 'material3-dark' or $grid-skin == 'tailwind3' or $grid-skin == 'tailwind3-dark' {
        margin-top: $grid-biggerreorder-downarrow-top-margin;
      }
    }
  }
}

.e-bigger .e-grid.e-row-responsive,
.e-bigger.e-grid.e-row-responsive {
  & .e-toolbar {
    .e-tbar-btn:hover,
    .e-tbar-btn:active,
    .e-tbar-btn:focus {
      background: none;
      @if $grid-skin == 'fluent2' {
        background-color: $group-header-hover-bg-color;
      }

      .e-icons {
        padding-bottom: $grid-adaptive-toolbar-icon-hover-bottom;
        @if $grid-skin == 'bootstrap5' or $grid-skin == 'bootstrap4' or $grid-skin == 'bootstrap5.3' {
          color: $grid-responsive-toolbar-icon-color;
        }
      }
    }

    .e-search-icon {
      background: none;
    }
  }

  & .e-responsive-header {
    border-top: 1px solid;
    border-top-color: $grid-header-border-color;
  }

  & .e-gridcontent,
  & .e-summarycontent {
    & td::before {
      content: attr(data-cell);
      @if $grid-skin == 'fluent2' or $grid-skin == 'tailwind3' {
        font-weight: $font-weight-normal;
      }
      @else {
        font-weight: 500;
      }
      left: 13px;
      padding-right: 10px;
      position: absolute;
      top: $grid-bigger-adaptive-cell-position-top;
      white-space: nowrap;
      text-overflow: ellipsis;
      @if $grid-skin == 'fluent' {
        overflow: visible;
      }
      @else {
        overflow: hidden;
      }
      width: 45%;
    }

    & .e-verticalwrap td::before {
      line-height: $grid-rowcell-wrap-height;
      white-space: normal;
      word-wrap: break-word;
    }

    & td[data-cell] {
      @include grid-top-bottom-padding($grid-adaptive-cell-padding-bottom, $grid-adaptive-cell-padding-top);
      padding-left: 55%;
      position: relative;
    }

    & .e-input {
      display: block;
    }

    & td {
      border: 0;
    }

    & .e-row {
      border-bottom: 1px solid $grid-cell-border-color;
    }

    & .e-normaledit .e-rowcell {
      height: auto;
      @include grid-padding-left-right(1%, 1%);
    }

    & td.e-rowcell {
      border-bottom: 0;
      border-bottom-color: $grid-header-border-color;
      height: auto;
    }

    & .e-emptyrow {
      & td.e-lastrowcell {
        border-bottom: 0;
      }
    }

    & .e-emptyrow.e-show-added-row {
      & td.e-lastrowcell {
        border-bottom: $grid-border-bottom-width;
      }
    }

    & .e-normaledit :not(.e-responsive-editcell).e-rowcell {
      border-top-width: 0;
    }

    & .e-normaledit .e-rowcell::before {
      bottom: 6px;
      position: static;
    }
  }

  & .e-table {
    display: block;

    tbody,
    tr,
    td:not(.e-hide),
    tfoot {
      display: block;
    }
  }

  & > .e-gridheader {
    display: none;
  }

  & .e-gridfooter {
    padding-right: 0;
  }
}

.e-bigger .e-grid.e-row-responsive.e-hidelines,
.e-bigger.e-grid.e-row-responsive.e-hidelines,
.e-bigger.e-grid.e-row-responsive.e-verticallines,
.e-bigger .e-grid.e-row-responsive.e-verticallines {
  & .e-gridcontent {
    & .e-rowcell:last-child {
      border: 0;
    }
  }
}

.e-bigger .e-responsive-dialog.e-customfilter,
.e-bigger.e-responsive-dialog.e-customfilter {
  .e-responsivecoldiv {
    cursor: pointer;
  }
}

.e-bigger .e-responsive-dialog,
.e-bigger.e-responsive-dialog {

  .e-checkbox-wrapper .e-label.e-checkboxfiltertext,
  .e-checkbox-wrapper .e-label.e-fltrcheck {
    @if $grid-skin == 'tailwind3' {
      font-weight: normal;
    }
  }

  .e-btn.e-ripple {
    overflow: initial;
    @if $grid-skin == 'material3' {
      &.e-dlg-closeicon-btn {
        .e-ripple-element {
          display: none;
        }
      }
      &.e-ressortbutton {
        overflow: hidden;
      }
    }
  }

  .columnmenudiv {
    .e-responsiveascendingdiv .e-resascending-icon,
    .e-responsivedescendingdiv .e-resdescending-icon,
    .e-responsivegroupdiv .e-resgroup-icon,
    .e-responsiveungroupdiv .e-resungroup-icon,
    .e-responsiveautofitalldiv .e-resautofitall-icon,
    .e-responsiveautofitdiv .e-resautofit-icon,
    .e-responsivecolumndiv .e-rescolumn-icon,
    .e-responsivecoldiv .e-ressort-icon,
    .e-responsivefilterdiv .e-resfilter-icon {
      margin-top: $grid-responsive-column-menu-icon-margin-top;
      position: absolute;
    }

    /* stylelint-disable */
    .e-responsivecoldiv .e-res-header-text.e-rescolumn-menu {
      margin-left: 33px !important;
    }
    /* stylelint-enable */
  }

  .e-mainfilterdiv {
    /* stylelint-disable */
    .e-ccdlg.e-cc.e-control.e-dialog {
      left: 0 !important;
      max-height: 100% !important;
      width: 100% !important;
    }
    /* stylelint-enable */

    .e-ccdlg {
      li.e-cclist {
        padding: 13px 0 13px 6px;
        @if $grid-skin == 'fluent2' {
          padding: 0;
        }
      }

      .e-main-div.e-cc {
        height: 100%;
      }

      /* stylelint-disable */
      .e-cc-contentdiv {
        height: 90% !important;
        min-height: 160px;
        overflow-y: auto !important;
      }
      /* stylelint-enable */

      .e-dlg-content {
        @if $grid-skin == 'fluent2' {
          padding: 24px 27px;
        }
        @else {
          padding: 8px 16px 8px 8px;
        }
        overflow-y: hidden;
      }

      .e-ccul-ele {
        @if $grid-skin == 'fluent2' {
          @include grid-margin-padding(16px 0, 0);
        }
        @else {
          @include grid-margin-padding(13px 0, 0);
        }
      }

      .e-chk-hidden {
        @include grid-checkbox-styles;
      }
    }
    /* stylelint-disable */
    .e-cc-contentdiv {
      height: 90% !important;
      min-height: 160px;
      overflow-y: auto !important;
    }
    /* stylelint-enable */

    .e-cc-searchBox {
      @if $grid-skin != 'fluent2' {
        padding-left: 8px;
      }

      @if $grid-skin == 'fluent2' {
        & .e-ccsearch.e-input {
          padding: 8px 10px;
        }

        & .e-ccsearch.e-input:focus {
          padding: 8px 10px 6px;
        }
      }

      .e-ccsearch-icon:hover,
      .e-cc-cancel:hover {
        @if $grid-skin != 'fluent2' {
          background: none;
        }
        @if $grid-skin == 'bootstrap5' {
          color: $grid-responsive-btn-background;
        }
      }
    }

    .e-ccsearch-icon,
    .e-cc-cancel,
    .e-search-icon,
    .e-chkcancel-icon {
      font-size: 20px;
      @if $grid-skin == 'material' {
        font-size: 16px;
      }
      @if $grid-skin == 'fluent2' {
        font-size: 18px;
      }
    }
  }

  &.e-dialog .e-dlg-header-content {
    @if $grid-skin == 'bootstrap5' {
      padding: $grid-bigger-res-dlg-hdr-padding;
    }
    @if $grid-skin == 'material3' {
      padding: $grid-bigger-res-dlg-hdr-padding;
    }
  }

  & .e-dlg-header-content {
    background: $grid-responsive-header-background;
    border-bottom: 1px solid;
    border-bottom-color: $grid-header-border-color;
    padding: $grid-bigger-res-dlg-hdr-padding;
    width: 100%;
    border-radius: $grid-border-radius-0;
    @if $grid-skin == 'fluent2' {
      background: $content-bg-color-alt1;
    }

    & .e-btn {
      @if $grid-skin != 'fluent2' {
        background: none;
      }
      box-shadow: none;
      outline: none;
      position: initial;
      @if $grid-skin == 'material3' {
        padding-bottom: 0;
        line-height: 40px;
      }

      &.e-dlg-closeicon-btn {
        @if $grid-skin != 'fluent2' {
          background-color: transparent;
        }
        @if $grid-skin == 'tailwind' {
          padding: .5px 15px;
        }
      }

      & .e-btn-icon {
        @if $grid-skin != 'fluent2' {
          color: $grid-responsive-close-icon-color;
        }
        font-size: $grid-responsive-btn-icon-font-size;
        margin-top: $grid-responsive-btn-top;
      }

      & .e-resfilterback {
        @if $grid-skin == 'fluent2' {
          margin-top: -2px;
        }
      }

      & .e-btn-icon.e-icon-filter-clear {
        @if $grid-skin == 'fluent' {
          margin-top: 4px;
        }
        @else if $grid-skin == 'tailwind' {
          margin-top: -6px;
        }
      }
    }

    & .e-dlg-closeicon-btn.e-btn .e-btn-icon {
      @if $grid-skin == 'fluent2' {
        line-height: 20px;
      }
    }

    & .e-btn:hover,
    & .e-btn:focus {
      .e-btn-icon {
        @if $grid-skin != 'fluent2' {
          color: $grid-responsive-toolbar-icon-color;
        }
      }
    }

    & .e-btn.e-dlg-closeicon-btn {
      float: left;
      @if $grid-skin == 'fluent' {
        padding-top: 6px;
      }
      @else if $grid-skin == 'material3' {
        line-height: 35px;
        padding-top: 5px;
      }
      @if $grid-skin == 'fluent2' {
        padding: 10px 9px;
      }
      @else if $grid-skin == 'tailwind3' {
        padding: 0 40px 3px 8px;
      }
      @else {
        @include grid-padding-left-right(0 !important, 40px !important);
      }
    }

    & .e-dlg-header {
      width: auto;

      & .e-res-custom-element {
        display: flex;

        & .e-dlg-custom-header {
          padding-top: $grid-responsive-header-padding-top;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          @if $grid-skin == 'material3' {
            font-weight: $font-weight-normal;
            line-height: 20px;
          }
          @else if $grid-skin == 'tailwind3' {
            font-weight: 600;
          }
          @else {
            font-weight: 500;
          }
          @if $grid-skin == 'fluent2' {
            margin-left: 12px;
            font-size: 22px;
            font-weight: 600;
            line-height: 28px;
          }
        }

        & .e-res-filter-clear-btn {
          color: $grid-responsive-filter-reset-color;
          @if $grid-skin == 'fluent2' {
            padding: 8.2px 11px;
          }
          @else {
            margin-top: $grid-responsive-filter-clear-margin;
            padding: 0;
          }
          @if $grid-skin == 'material3' {
            line-height: 32px;
          }

          & .e-icon-filter-clear {
            font-size: $grid-responsive-icon-filter-clear;
          }
        }

        & .e-res-sort-clear-btn:focus {
          @if $grid-skin == 'fluent2' {
            color: $primary-text-pressed;
          }
        }

        & .e-res-sort-clear-btn {
          color: $grid-responsive-filter-reset-color;
          @include grid-font-size-weight-styles($grid-responsive-sort-clear-btn-font-size, 500);
          @if $grid-skin == 'fluent2' {
            padding: 9px 16px;
          }
          @else {
            padding-top: $grid-adaptive-sort-clear-button-padding;
          }
          @if $grid-skin == 'tailwind' {
            margin-top: -7px;
          }
        }

        & .e-res-apply-btn {
          @include grid-font-size-weight-styles($grid-responsive-res-apply-btn-font-size, 500);
          padding: 0;
          @if $grid-skin == 'material3' {
            padding-left: 11px;
          }
          @else {
            padding-left: 20px;
          }
          padding-right: 0;
          padding-top: $grid-responsive-apply-btn-top;

          @if $grid-skin == 'fluent2' {
            padding: 9px 16px;
            margin-right: 14px;
          }

          @if $grid-skin == 'fluent' {
            padding-bottom: 3px;
          }
          @else if $grid-skin == 'tailwind' {
            margin-top: -2px;
          }
          @else if $grid-skin == 'bootstrap5' {
            margin-bottom: -2px;
          }
          @if $grid-skin == 'tailwind3' {
            font-weight: $font-weight-semibold;
            padding-right: 5px;
          }
        }

        & .e-res-apply-btn:disabled {
          color: $grid-btn-disabled-bgcolor;
          @if $grid-skin == 'fluent2' {
            color: $primary-text-disabled;
          }
        }
        & .e-btn {
          @if $grid-skin != 'fluent2' {
            color: $grid-responsive-custom-header-btn-color;
            background: none;
          }
          border: 0;
        }
        & .e-btn .e-icon-filter-clear {
          @if $grid-skin == 'fluent2' {
            color: $grid-responsive-custom-header-btn-color;
          }
        }
        & .e-primary.e-flat.e-btn:hover,
        & .e-primary.e-flat.e-btn:hover .e-icon-filter-clear,
        & .e-primary.e-flat.e-btn:focus .e-icon-filter-clear {
          @if $grid-skin == 'fluent2' {
            color: $grid-checkmark-color;
          }
        }
      }
    }

    & .e-res-back-btn {
      @if $grid-skin == 'fluent2' {
        padding: 10px 11px;
      }
      @else {
        background: none;
        padding-left: 0;
      }
      box-shadow: none;

      @if $grid-skin == 'fluent' {
        padding-top: 6px;
      }
      @else if $grid-skin == 'tailwind' or $grid-skin == 'tailwind3' {
        padding-top: 1.5px;
      }
      @else if $grid-skin == 'material3' {
        line-height: 31px;
        @include grid-top-bottom-padding(.5px, 8.5px);
      }
    }
  }

  &.e-rtl .e-dlg-header-content .e-res-back-btn {
    @include grid-padding-left-right(15px, 0);
  }

  & .e-dlg-content {
    padding: 16px;
    padding-top: 0;

    .e-checkfltrnmdiv,
    .e-ccnmdiv {
      text-align: center;
      padding-top: 40px;
    }

    & .e-mainfilterdiv {
      @if $grid-skin == 'fabric' or $grid-skin == 'fabric-dark' or $grid-skin == 'highcontrast' or $grid-skin == 'material' or $grid-skin == 'material-dark' {
        padding-top: 30px;
      }
      @else if $grid-skin == 'material3' or $grid-skin == 'material3-dark' {
        padding-top: 0;
      }
      @else {
        padding-top: 16px;
      }
    }

    & .e-filtersetdiv {
      float: right;
      margin-right: 1%;
      @if $grid-skin == 'material3' {
        margin: -1px;
        font-size: 20px;
      }
      @else {
        margin-top: 1%;
      }

      & .e-filterset {
        color: $grid-responsive-filter-reset-color;
      }
    }

    & .e-dialog {
      box-shadow: none;
    }

    & .e-excelfilter {
      border: transparent;

      & .e-dlg-content {
        background-color: $grid-responsive-header-background;
        @if $grid-skin == 'fluent2' {
          padding: 8px 27px;
        }
        @else {
          padding: 8px;
          padding-right: 16px;
        }
      }

      .e-checkboxlist > span {
        padding-left: 9px;
      }

      @if $grid-skin == 'fluent2' {
        .e-checkboxlist {
          margin-left: 0;
        }
      }
    }

    & .e-ccdlg {
      border: transparent;
    }

    & .e-xlflmenu {
      border: transparent;

      & .e-dlg-content {
        @if $grid-skin == 'fluent2' {
          padding: 15px;
        }
        @else {
          padding: 16px;
        }
        & .e-xlfl-fieldset {
          @if $grid-skin == 'fluent2' {
            padding-top: 24px;
          }
        }
      }

      @if $grid-xlfl-skin == 'fluent2' {
        .e-checkbox-wrapper .e-frame {
          @if $grid-xlfl-skin == 'fluent2' {
            margin: 0 0 1px 4px;
          }
        }

        .e-radio + label {
          margin: 0;
        }

        .e-radio-wrapper .e-xlfl-radio-or {
          margin-left: 18px;
        }
      }
    }

    & .e-ressortbutton-parent {
      float: right;
      margin-top: -9px;

      & .e-ressortbutton {
        @if $grid-skin != 'fluent2' and  $grid-skin != 'highcontrast' {
          background: $grid-responsive-btn-background;
        }
        width: 120px;
      }
    }

    & .e-responsivecoldiv {
      font-size: 16px;
      margin-bottom: 26px;
      margin-top: 26px;
      @if $grid-skin == 'fluent2' {
        line-height: 22px;
      }
      width: 100%;
    }

    & .e-mainfilterdiv {
      & .e-dialog {
        bottom: 0;
        box-shadow: none;
        width: 100%;

        // sass-lint:disable-all
        & .e-contextmenu-wrapper {
          ul {
            background-color: $grid-responsive-header-background;
            max-width: 100%;
            @if $grid-skin == 'fluent2' {
              padding: 16px 0 8px;
            }

            li {
              @if $grid-skin != 'bootstrap5.3' and $grid-skin != 'fluent2' and $grid-skin != 'highcontrast' {
                color: $grid-rowcell-color;
              }
            }

            & .e-submenu.e-selected {
              @if $grid-skin != 'bootstrap5.3' and $grid-skin != 'fluent2' and $grid-skin != 'highcontrast' {
                background-color: $grid-responsive-header-background;
              }
            }

            & .e-submenu {
              padding: 0;

              & .e-menu-icon {
                margin-right: 4px;
                margin-left: 15px;
                @if $grid-skin == 'fluent2' {
                  margin-right: 29px;
                }
              }

              & .e-caret {
                padding: 0;
                @if $grid-skin == 'material3' {
                  padding-right: 1px;
                }
                @else {
                  padding-right: 8px;
                }
                @if $grid-skin == 'fluent2' {
                  margin-right: 23px;
                }
              }
            }
          }
        }

        & .e-searchcontainer {
          height: 88%;

          & .e-searchbox {
            @if $grid-skin == 'fluent2' {
              padding-left: 0;
            }
            @else {
              padding-left: 10px;
            }

            & .e-search-icon:focus,
            & .e-search-icon:active,
            & .e-search-icon:hover,
            & .e-chkcancel-icon:focus,
            & .e-chkcancel-icon:active,
            & .e-chkcancel-icon:hover {
              @if $grid-skin != 'fluent2' {
                background: none;
              }
              @if $grid-skin == 'bootstrap5' {
                color: $grid-responsive-btn-background;
              }
            }

            @if $grid-skin == 'fluent2' {
              & .e-searchinput {
                padding: 8px 10px;
              }

              & .e-searchinput:focus {
                padding: 8px 10px 6px;
              }
            }
          }

          & .e-spinner {
            height: 100%;

            & .e-chk-hidden {
              @include grid-checkbox-styles;
            }

            & .e-checkboxlist {
              height: 100%;
              min-height: 160px;
              overflow-y: auto;

              &.e-checkbox-infinitescroll {
                border-top-style: solid;
                border-top-color: $grid-columnchooser-footer-border-color;
                border-top-width: 1px;
                margin-top: 0;
                overflow-x: hidden;
              }

              & .e-ftrchk {
                @include grid-top-bottom-padding($grid-bigger-checkbox-padding-topbottom, $grid-bigger-checkbox-padding-topbottom);
                @if $grid-skin == 'fluent2' {
                  padding-left: 0;
                }
              }
            }
          }

          & .e-ftrchk {
            & .e-chk-hidden {
              -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
              height: 1px;
              opacity: 0;
              width: 1px;
              @if $grid-skin == 'fluent2' {
                margin-left: 0;
                margin-right: 0;
              }
            }

            & .e-mask {
              &.e-skeleton {
                display: inline-block;
                height: 10px;
                width: 80%;
              }

              &.e-mask-checkbox-filter-intent {
                width: 13px;
              }

              &.e-mask-checkbox-filter-span-intent {
                margin-left: 8px;
              }
            }
          }
        }
      }
    }

    & .e-checkboxfilter {
      & .e-dlg-content {
        padding: 8px;

        & .e-searchcontainer {
          @if $grid-skin == 'fluent2' {
            padding: 8px 27px;
          }
          @else {
            padding: 8px 16px;
          }
          margin-right: 7px;
          & .e-searchbox {
            @if $grid-skin == 'fluent2' {
              padding-left: 0;
            }
            @else {
              padding-left: 10px;
            }
          }
          & .e-ftrchk.e-infinitescroll,
          & .e-spinner .e-checkboxlist {
            margin-left: -7px;
          }
        }
      }
    }
  }

  & .e-res-contextmenu-wrapper {
    & .e-contextmenu {
      background-color: $grid-responsive-header-background;
      border: transparent;
      box-shadow: none;
      margin-top: 23px;
      max-width: 100%;
      min-width: 100%;
      overflow-y: auto;
      @if $grid-skin == 'fluent2' {
        padding: 0 23px 23px;
      }
      @else {
        padding: 0 16px 16px;
      }

      & .e-menu-item {
        @if $grid-skin == 'fluent2' {
          padding: 9px 12px;
        }
        @else {
          padding: 0;
        }
      }

      & .e-menu-item.e-focused {
        @if $grid-skin != 'bootstrap5.3' and $grid-skin != 'fluent2' {
          background-color: transparent;
        }
      }
    }
  }

  & .e-defaultcell.e-ralign,
  & .e-editedrow .e-defaultcell.e-ralign,
  & .e-insertedrow .e-defaultcell.e-ralign,
  & .e-defaultcell.e-ralign:focus,
  & .e-insertedrow .e-defaultcell.e-ralign:focus & .e-editedrow .e-defaultcell.e-ralign:focus {
    padding-right: 10px;
  }
}

.e-bigger .e-responsive-dialog.e-edit-dialog,
.e-bigger.e-responsive-dialog.e-edit-dialog {
  & .e-dlg-content {
    @if $grid-skin == 'fluent2' {
      padding: 0 12px;
    }
  }
}

.e-bigger .e-responsive-dialog.e-ressortdiv,
.e-bigger.e-responsive-dialog.e-ressortdiv {
  .e-dlg-header-content .e-dlg-header .e-res-custom-element .e-res-apply-btn {
    padding-top: 0;
    @if $grid-skin == 'material3' {
      padding-top: 1px;
    }
    @if $grid-skin == 'fluent' {
      padding-top: 3px;
    }
    @if $grid-skin == 'fluent2' {
      padding: 9px 16px;
      margin-right: 6px;
    }
    @if $grid-skin == 'tailwind3' {
      padding-bottom: 3px;
    }
    @if $grid-skin == 'bootstrap4' or $grid-skin == 'material' {
      padding-top: 2px;
    }
    @if $grid-skin == 'tailwind' {
      margin-top: -8px;
    }
    @else if $grid-skin == 'bootstrap5' {
      margin-bottom: 2px;
    }
  }
}

.e-bigger .e-responsive-dialog.e-rtl,
.e-bigger.e-responsive-dialog.e-rtl {
  & .e-btn.e-dlg-closeicon-btn {
    float: right;
    @if $grid-skin == 'fluent' {
      padding-top: 6px;
    }
    @include grid-padding-left-right(40px !important, 0 !important);
  }

  & .e-res-apply-btn {
    @include grid-padding-left-right(0, 20px);
  }

  & .e-ressortbutton-parent {
    float: left;
  }

  .columnmenudiv .e-responsivecoldiv .e-res-header-text.e-rescolumn-menu {
    margin-right: 33px;
  }
}

@if $grid-skin == 'fluent2' {
  .e-bigger .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
    padding: 0 9px;
  }
  .e-bigger .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
    padding: 0;
  }
}

/* Apply styles for Firefox only */
/* stylelint-disable function-url-quotes */
@-moz-document url-prefix() {
  .e-bigger .e-grid.e-grid-min-height {
    .e-rowcell,
    .e-rowcell:first-child,
    .e-rowcell:last-child {
      line-height: normal;
    }
  }
}
/* stylelint-enable function-url-quotes */

/*! FileManager's bootstrap theme wise override definitions and variables */
$fm-skin-name: 'bootstrap-dark' !default;
$fe-bc-font-size: 14px !default;
$fe-bc-icon-font-size: 10px !default;
$fe-dg-td-font-size: 14px !default;
$fe-lg-text-font-size: 13px !default;
$fe-ddl-icon-font-size: 14px !default;

$fe-big-bc-font-size: 15px !default;
$fe-big-bc-icon-font-size: 12px !default;
$fe-big-lg-text-font-size: 14px !default;
$fe-big-dg-header-font-size: 21px !default;
$fe-big-dg-td-font-size: 15px !default;

$fe-border-color: $grey-99 !default;
$fe-background:  $gray-base !default;
$fe-icon-color: $grey-dark-font !default;
$fe-label-color: $grey-dark-font !default;
$fe-text-color: $grey-dark-font !default;
$fe-active-border-color: $brand-primary !default;
$fe-active-bg-color: $brand-primary !default;
$fe-active-font-color: $grey-dark-font !default;
$fe-hover-border-color: $gray-light !default;
$fe-hover-bg-color: $gray-light !default;
$fe-ah-border-color: $brand-primary !default;
$fe-ah-bg-color: $brand-primary !default;
$fe-focus-border-color: $gray-light !default;
$fe-bc-color: $grey-dark-font !default;
$fe-bc-link-color: $brand-primary-lighten-10 !default;
$fe-bc-hover-bg-color: $gray-base !default;
$fe-bc-hover-font-color: $brand-primary-lighten-20 !default;
$fe-grid-header-bg-color: $gray-base !default;
$fe-grid-type-color: $grey-cc !default;
$fe-grid-text-color: $grey-dark-font !default;
$fe-ddl-icon-color: $brand-primary !default;
$fe-error-color: $brand-danger !default;
$fe-img-border-color: $grey-dark-font !default;
$fe-search-bg-color: $gray-base !default;
$fe-tb-hover-border-color: $grey-white !default;
$fe-tb-focus-border-color: $grey-white !default;
$fe-tb-focus-bg: $gray !default;
$fe-checkbox-color: $grey-dark-font !default;
$fe-checkbox-bg-color: $gray-base !default;
$fe-drop-border-color: $brand-primary !default;
$fe-up-list-border-color: $brand-primary !default;
$fe-clone-bg-color: $gray-light !default;
$fe-clone-border-color: $grey-99 !default;
$fe-clone-count-border-color: $grey-base !default;
$fe-clone-count-font-color: $brand-primary-font !default;
$fe-clone-count-bg-color: $brand-primary !default;
$fe-drop-folder-bg-color: $brand-primary !default;

$fe-clone-box-shadow: none !default;
$fe-clone-border: 1px solid !default;
$fe-img-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .05) !default;
$fe-tb-ddb-icon-padding: 0 !default;
$fe-tb-ddb-height: calc(100% - 2px) !default;
$fe-tb-ddb-btn-hvr-padding: 0 1.5px !default;
$fe-tb-ddb-btn-padding: 1px 2.5px !default;
$fe-tb-ddb-border: 0 !default;
$fe-tb-ddb-caret-size: 8px !default;
$fe-upload-overlay-border: 2px !default;
$fe-search-padding: 1.5px 8px 0 1px !default;
$fe-search-height: 30px !default;
$fe-search-icon-margin: 3px 0 !default;
$fe-search-icon-font-size : 14px !default;
$fe-search-clear-icon-padding: 0 !default;
$fe-search-input-margin: -1px 0 0 24px !default;
$fe-bc-margin: 0 !default;
$fe-bc-padding: 2px 8px !default;
$fe-bc-text-padding: 4px 4px 5px !default;
$fe-bc-text-size: 30px !default;
$fe-bc-icon-margin: 0 4px !default;
$fe-bc-icon-padding: 5px !default;
$fe-bc-search-border-bottom: 1px !default;
$fe-bc-li-item-height: 29px !default;
$fe-bc-submenu-height: 26px !default;
$fe-bc-li-text-decoration: none;
$fe-grid-icon-size: 18px !default;
$fe-grid-icon-height: 18px !default;
$fe-grid-icon-margin: 0 8px 0 0 !default;
$fe-dg-td-padding: 8px 24px 8px 0 !default;
$fe-dg-rtl-td-padding: 8px 0 8px 24px !default;
$fe-grid-header-height: 32px !default;
$fe-grid-header-font-size: 14px !default;
$fe-grid-header-cb-padding-left: 8px !default;
$fe-grid-content-font-size: 12px !default;
$fe-grid-content-name-font-size: 13px !default;
$fe-grid-icon-sort-margin: 0 !default;
$fe-grid-row-ie-box-shadow: inset 0 1px 0 0 color.adjust($brand-primary, $lightness: 10%), inset 0 -1px 0 0 color.adjust($brand-primary, $lightness: 10%) !default;
$fe-grid-row-fc-ie-box-shadow: inset 1px 1px 0 0 color.adjust($brand-primary, $lightness: 10%), inset 1px -1px 0 0 color.adjust($brand-primary, $lightness: 10%) !default;
$fe-grid-row-lc-ie-box-shadow: inset -1px 1px 0 0 color.adjust($brand-primary, $lightness: 10%), inset -1px -1px 0 0 color.adjust($brand-primary, $lightness: 10%) !default;
$fe-lg-margin: 0 !default;
$fe-lg-padding: 0 4px !default;
$fe-lg-item-height: 85px !default;
$fe-lg-item-width: 80px !default;
$fe-lg-item-margin: 8px 4px !default;
$fe-lg-item-padding: 2px !default;
$fe-lg-item-border: 1px !default;
$fe-lg-item-inner-height: 79px !default;
$fe-lg-item-inner-width: 74px !default;
$fe-lg-icon-height: 40px !default;
$fe-lg-icon-width: 40px !default;
$fe-lg-icon-margin: 10px auto !default;
$fe-lg-img-height: 62px !default;
$fe-lg-text-padding: 2px 0 0 0 !default;
$fe-cb-line-height: 12px !default;
$fe-cm-separator-margin: 0 0 !default;
$fe-dd-popup-blank-icon-padding-left: 40px !default;
$fe-tv-fullrow-height: 34px !default;
$fe-address-height: 34px !default;
$fe-tb-height: 42px !default;
$fe-tv-node-height: 32px !default;
$fe-tv-node-lheight: 32px !default;
$fe-nrml-border-none: none !default;
$fe-tb-items-caret-icon-padding: 0 8px !default;
$fe-tb-pop-caret-icon-padding: 0 8px !default;
$fe-treeview-ul-padding-left: 8px !default;
$fe-breadcrumb-icons-padding-bottom: 6px !default;
$fe-grid-headercell-icon-margin-right: 1px !default;
$fe-grid-icon-padding: 0 2px 0 9px !default;
$fe-gridcontent-icon-padding: 0 0 0 12px !default;
$fe-grid-name-padding-left: 6px !default;
$fe-clone-content-padding: 4px 8px !default;
$fe-clone-content-name-margin: auto 8px !default;
$fe-clone-content-icon-margin: auto 8px !default;
$fe-clone-count-margin-left: -12px !default;
$fe-rtl-treeview-ul-padding: 0 8px 0 0 !default;
$fe-rtl-search-wrap-input-margin: 0 24px 0 0 !default;
$fe-rtl-grid-content-padding: 12px !default;
$fe-rtl-grid-icon-padding: 21px !default;
$fe-popup-dialog-icon-margin: 0 8px -2px 0 !default;
$fe-dialog-retrycontent-padding: 16px 0 !default;
$fe-popup-dialog-rtl-icon-margin: 0 0 -2px 8px !default;
$fe-content-border-spacing: 0 !default;
$fe-padding-none: 0 !default;
$fe-checkbox-padding: 5px !default;
$fe-margin-none: 0 !default;
$fe-tb-btn-icon-padding: 0 2px !default;
$fe-nrml-overlay-height: calc(100% - 34px) !default;
$fe-margin-auto: auto !default;

$fe-big-tv-fullrow-height: 40px !default;
$fe-big-address-height: 40px !default;
$fe-big-tb-height: 52px !default;
$fe-big-tv-node-height: 38px !default;
$fe-big-tv-node-lheight: 38px !default;
$fe-big-tb-ddb-btn-hvr-padding: 0 6px !default;
$fe-big-tb-ddb-btn-padding: 1px 7px !default;
$fe-big-search-padding: 1.5px 12px 0 1px !default;
$fe-big-search-height: 36px !default;
$fe-big-bc-padding: 3px 12px !default;
$fe-big-bc-text-size: 32px !default;
$fe-big-bc-text-padding: 5px 4px !default;
$fe-big-bc-li-item-height: 34px !default;
$fe-big-bc-submenu-height: 33px !default;
$fe-big-grid-icon-margin: 0 12px 0 0 !default;
$fe-big-grid-header-height: 36px !default;
$fe-big-dg-td-padding: 8px 30px 8px 0 !default;
$fe-big-lg-padding: 0 6px !default;
$fe-big-lg-item-height: 106px !default;
$fe-big-lg-item-width: 100px !default;
$fe-big-lg-item-margin: 12px 6px !default;
$fe-big-lg-item-inner-height: 100px !default;
$fe-big-lg-item-inner-width: 94px !default;
$fe-big-lg-text-inner-width: 94px !default;
$fe-big-lg-icon-height: 52px !default;
$fe-big-lg-icon-width: 52px !default;
$fe-big-lg-icon-margin: 11px auto !default;
$fe-big-lg-img-height: 79px !default;
$fe-big-lg-text-padding: 4px 2px 2px !default;
$fe-big-cb-line-height: 17px !default;
$fe-big-grid-header-font-size: 15px !default;
$fe-big-grid-content-font-size: 13px !default;
$fe-big-grid-content-name-font-size: 14px !default;
$fe-big-search-wrap-input-margin-left: 45px !default;
$fe-big-search-wrap-margin-left: 8px !default;
$fe-big-search-wrap-margin-top: 3px !default;
$fe-big-rtl-search-wrap-input-margin-right: 45px !default;
$fe-big-rtl-grid-icon-padding-right: 10px !default;
$fe-big-tb-caret-icon-padding: 0 10px !default;
$fe-big-tb-popup-caret-icon-padding: 0 10px !default;
$fe-big-treeview-ul-padding-left: 12px !default;
$fe-big-grid-content-checkbox-padding-left: 10px !default;
$fe-big-grid-icon-padding-left: 16px !default;
$fe-big-rtl-grid-checkbox-wrapper-margin-right: -10px !default;
$fe-big-rtl-grid-treeview-ul-padding: 0 12px 0 0 !default;
$fe-big-rtl-grid-checkbox-padding-right: 16px !default;
$fe-big-overlay-height: calc(100% - 41px) !default;

$fe-rtl-grid-icon-margin: 0 0 0 8px !default;

$fe-mobile-lg-item-height: 155px !default;
$fe-mobile-lg-item-width: 155px !default;
$fe-mobile-lg-item-margin: 12px 8px !default;
$fe-mobile-lg-item-inner-width: 110px !default;
$fe-mobile-lg-icon-height: 110px !default;
$fe-mobile-lg-icon-width: 110px !default;
$fe-mobile-lg-icon-margin: 11px auto 0 !default;
$fe-mobile-lg-img-height: 110px !default;
$fe-mobile-grid-icon-size: 35px !default;
$fe-mobile-grid-icon-height: 35px !default;
$fe-mobile-icon-font-size: 20px !default;
$fe-mobile-newfolder-padding-top: 0 !default;
$fe-mobile-upload-padding-left: 0 !default;
$fe-mobile-sort-padding-top: 3px !default;
$fe-mobile-refresh-padding-top: 3px !default;
$fe-mobile-select-padding-top: 2px !default;
$fe-mobile-large-padding: 0 0 0 2px !default;
$fe-mobile-grid-padding: 4px 2px 0 2px !default;
$fe-mobile-gridview-icon-padding: 0 !default;
$fe-mobile-details-padding-top: 3px !default;
$fe-mobile-delete-padding-left: 4px !default;
$fe-mobile-rename-padding-left: 2px !default;
$fe-mobile-rename-padding-top: 3px !default;
$fe-mobile-download-padding-left: 4px !default;
$fe-mobile-cut-padding-left: 2px !default;
$fe-mobile-cut-padding-top: 1px !default;
$fe-mobile-copy-padding-left: 4px !default;
$fe-mobile-search-height: 40px !default;
$fe-mobile-lg-item-minwidth: 140px !default;
$fe-mobile-lg-item-width-two: calc(50% - 17px) !default;
$fe-mobile-lg-item-width-three: calc(33.33% - 17px) !default;
$fe-mobile-clear-icon-margin: 2px 8px 0 !default;
$fe-mobile-address-search-margin: 3px 0 !default;
$fe-mobile-grid-icon-margin: 0 8px 0 0 !default;
$fe-mobile-grid-icon-padding: 10px !default;
$fe-mobile-list-img-margin: 11px !default;

$fe-big-lg-icon-empty-min-width: 300px !default;

$fe-big-lg-icon-empty-content-font-size: 24px !default;
$fe-big-lg-icon-empty-content-margin: 0 auto !default;
$fe-big-lg-icon-empty-content-padding: 12px !default;
$fe-big-lg-icon-empty-content-text-align: center !default;

$fe-big-lg-icon-empty-icon-height: 64px !default;
$fe-big-lg-icon-empty-icon-margin: 0 auto !default;
$fe-big-lg-icon-empty-icon-width: 64px !default;

$fe-big-lg-icon-empty-inner-content-font-size: 16px !default;
$fe-big-lg-icon-empty-inner-content-margin: 0 auto !default;
$fe-big-lg-icon-empty-inner-content-opacity: .5 !default;
$fe-big-lg-icon-empty-inner-content-padding: 6px !default;
$fe-big-lg-icon-empty-inner-content-text-align: center !default;

$fe-big-grid-empty-min-width: 300px !default;

$fe-big-grid-empty-content-font-size: 24px !default;
$fe-big-grid-empty-content-margin: 0 auto !default;
$fe-big-grid-empty-content-padding: 12px !default;
$fe-big-grid-empty-content-text-align: center !default;

$fe-big-grid-empty-icon-height: 64px !default;
$fe-big-grid-empty-icon-margin: 0 auto !default;
$fe-big-grid-empty-icon-width: 64px !default;

$fe-big-grid-empty-inner-content-font-size: 16px !default;
$fe-big-grid-empty-inner-content-margin: 0 auto !default;
$fe-big-grid-empty-inner-content-opacity: .5 !default;
$fe-big-grid-empty-inner-content-padding: 6px !default;
$fe-big-grid-empty-inner-content-text-align: center !default;

$fe-grid-empty-min-width: 200px !default;

$fe-grid-empty-content-font-size: 20px !default;
$fe-grid-empty-content-margin: 0 auto !default;
$fe-grid-empty-content-padding: 8px !default;
$fe-grid-empty-content-text-align: center !default;

$fe-grid-empty-icon-height: 52px !default;
$fe-grid-empty-icon-margin: 0 auto !default;
$fe-grid-empty-icon-width: 52px !default;

$fe-grid-empty-inner-content-font-size: 14px !default;
$fe-grid-empty-inner-content-margin: 0 auto !default;
$fe-grid-empty-inner-content-opacity: .5 !default;
$fe-grid-empty-inner-content-padding: 6px !default;
$fe-grid-empty-inner-content-text-align: center !default;

$fe-lg-icon-empty-min-width: 200px !default;

$fe-lg-icon-empty-content-font-size: 20px !default;
$fe-lg-icon-empty-content-margin: 0 auto !default;
$fe-lg-icon-empty-content-padding: 8px !default;
$fe-lg-icon-empty-content-text-align: center !default;

$fe-lg-icon-empty-icon-height: 52px !default;
$fe-lg-icon-empty-icon-margin: 0 auto !default;
$fe-lg-icon-empty-icon-width: 52px !default;

$fe-lg-icon-empty-inner-content-font-size: 14px !default;
$fe-lg-icon-empty-inner-content-margin: 0 auto !default;
$fe-lg-icon-empty-inner-content-opacity: .5 !default;
$fe-lg-icon-empty-inner-content-padding: 6px !default;
$fe-lg-icon-empty-inner-content-text-align: center !default;
$fe-drag-select-bg-color: $grey-ad !default;
$fe-drag-select-bg-opacity: .45 !default;
$fe-checkbox-wrapper-border-width: 1px !default;
$fe-mobile-grid-rowcell-border-bottom: 1px !default;
$fe-auto-height: auto !default;
$fe-bigger-splitter-height: 100% !default;
$fe-toolbar-border-width: 1px !default;
$fe-large-list-img-border: 2px !default;
$fe-clone-content-height: 36px !default;
$fe-clone-content-name-font-size: 13px !default;
$fe-clone-content-icon-height: 18px !default;
$fe-clone-count-height: 22px !default;
$fe-clone-count-lheight: 22px !default;
$fe-popup-error-font-size: 12px !default;
$fe-popup-error-line-height: 1.5 !default;
$fe-height-none: 0 !default;
$fe-nrml-border-width: 1px !default;
$fe-border-none: 0 !default;
$fe-grid-header-border-width: 0 1px 1px !default;
$fe-parent-list-height: 100% !default;
$fe-dialog-icon-height: 18px !default;
$fe-dialog-img-height: 100% !default;
$fe-full-height: 100% !default;
$fe-clone-count-border-radius: 50% !default;
$fe-clone-count-font-size: 12px !default;
$fe-pager-border-width: 1px 0 0 !default;
$fe-large-icon-list-item-border-radius: 4px !default;

/* stylelint-disable property-no-vendor-prefix */
@mixin user-select {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

@mixin visibility($value) {
  .e-checkbox-wrapper {
    visibility: $value;
    @if $fm-skin-name == 'fluent2' {
      padding: $fe-padding-none;
    }
  }
}

@mixin grid-no-border {
  .e-rowcell.e-lastrowcell {
    border-bottom-width: $fe-border-none;
  }
}

@mixin popup-active-icon {
  .e-fe-dot,
  .e-fe-tick {
    font-size: $fe-ddl-icon-font-size;
  }
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin size($height, $width) {
  height: $height;
  width: $width;
}

@mixin checkbox($value) {
  .e-checkbox-wrapper .e-frame {
    border-width: $fe-checkbox-wrapper-border-width;
    line-height: $value;
    @if $fm-skin-name == 'fluent2' {
      @include size(16px, 16px);
      font-size: 10px;
      margin: $fe-margin-none;
    }
    @if $fm-skin-name == 'tailwind3' {
      @include size($fe-checkbox-wrapper-height, $fe-checkbox-wrapper-width);
      margin: $fe-checkbox-wrapper-margin;
    }
  }
}

@mixin icon-style($height, $width, $margin) {
  height: $height;
  margin: $margin;
  width: $width;
}

@mixin empty-content($font-size, $margin, $padding, $text-align) {
  font-size: $font-size;
  margin: $margin;
  padding: $padding;
  text-align: $text-align;
}

@mixin toolbar-height($height, $min-height) {
  height: $height;
  min-height: $min-height;
}

@mixin margin-padding($margin, $padding) {
  margin: $margin;
  padding: $padding;
}

@mixin empty-style($empty-min-width, $empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align, $empty-icon-height, $empty-icon-width, $empty-icon-margin, $empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align) {
  .e-empty {
    min-width: $empty-min-width;
  }

  .e-empty-content {
    @include empty-content($empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align);
  }

  .e-empty-icon {
    @include icon-style($empty-icon-height, $empty-icon-width, $empty-icon-margin);
  }

  .e-empty-inner-content {
    @include empty-content($empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align);
  }
}

@include export-module('FileManager-layout') {
  ejs-filemanager {
    display: block;
  }

  .e-filemanager {
    @include user-select;
    border: $fe-nrml-border-width solid;
    position: relative;
    @if $fm-skin-name == 'fluent2' {
      border-radius: $fm-border-radius;
    }

    .e-blur {
      opacity: .5;
    }

    &.e-fe-drop,
    &.e-fe-drop .e-treeview .e-text-content,
    &.e-fe-drop .e-treeview .e-fullrow,
    &.e-fe-drop .e-address .e-address-list-item:last-child .e-list-text,
    &.e-fe-drop .e-grid .e-columnheader {
      cursor: grab;
    }

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

    .e-toolbar {
      @if $fm-skin-name != 'fluent2' {
        border-bottom-style: solid;
      }
      @if $fm-skin-name == 'bootstrap-dark' {
        border-width: $fe-toolbar-border-width;
      }
      @else {
        border-width: $fe-toolbar-border-width;
      }

      @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
        @include toolbar-height($fe-tb-height, $fe-tb-height);
      }

      @if ($fm-skin-name == 'fluent2') {
        box-shadow: none;
      }

      @if ($fm-skin-name == 'Material3') {
        .e-toolbar-item .e-tbar-btn {
          .e-tbar-btn-text {
            line-height: 18px;
            padding: 7px 8px 7px 0;
          }

          .e-icons.e-btn-icon {
            padding: 7px 8px;
          }
        }

        .e-toolbar-item:not(.e-separator) {
          padding: 0;
        }
      }

      .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
        border: $fe-border-none;
        @if $fm-skin-name != 'tailwind3' {
          font-weight: normal;
        }
        height: $fe-tb-ddb-height;
        padding: $fe-tb-ddb-btn-padding;

        .e-btn-icon.e-icons:not(.e-icon-left):not(.e-icon-right) {
          padding: $fe-tb-ddb-icon-padding;
        }

        .e-btn-icon.e-icons.e-caret {
          font-size: $fe-tb-ddb-caret-size;
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            @include icon-style(18px, 18px, 2px 4px 0);
            padding: $fe-tb-items-caret-icon-padding;
          }
          @else {
            padding: $fe-tb-items-caret-icon-padding;
          }
        }

        .e-tbar-btn-text.e-tbar-ddb-text {
          padding-right: $fe-padding-none;
        }

        &.e-active,
        &:hover,
        &:focus {
          border: $fe-tb-ddb-border;
          padding: $fe-tb-ddb-btn-hvr-padding;

          @if $fm-skin-name == 'bootstrap5.3' {
            .e-btn-icon,
            .e-tbar-btn-text {
              color: $secondary-text-color-hover;
            }
          }
        }
      }

      .e-toolbar-pop .e-toolbar-item .e-dropdown-btn {
        .e-icons.e-caret {
          font-size: $fe-tb-ddb-caret-size;
          min-width: 0;
          padding: $fe-tb-pop-caret-icon-padding;
        }

        .e-tbar-btn-text.e-tbar-ddb-text {
          padding-right: $fe-padding-none;
        }
      }

      .e-toolbar-pop {
        width: max-content;
      }
    }

    .e-treeview {

      @if ($fm-skin-name == 'tailwind3') {
        border-radius: $fe-treeview-border-radius;
        border: $fe-nrml-border-none;
        background: none;
      }

      & > .e-ul {
        overflow: initial;
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding-left: $fe-treeview-ul-padding-left;
        }
      }

      .e-list-parent {
        margin-bottom: $fe-margin-none;
        margin-top: $fe-margin-none;

        .e-list-item {
          @if $fm-skin-name != 'fluent2' {
            padding-bottom: $fe-padding-none;
            padding-top: $fe-padding-none;

            .e-fullrow {
              height: $fe-tv-fullrow-height;
            }
          }

          .e-list-text {
            height: $fe-tv-node-height;
            line-height: $fe-tv-node-lheight;
          }

          &.e-fe-drop-folder > .e-fullrow {
            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'fluent2' {
              border: 1px dashed;
            }
            @else {
              border: $fe-nrml-border-width solid;
            }
            box-sizing: border-box;
          }
        }
      }

      .e-text-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @if ($fm-skin-name == 'tailwind3') {
          top: 4px;
          height: $fe-tv-fullrow-height;
        }
      }

      .e-list-text {
        display: initial;
      }

      @if $fm-skin-name == 'fluent2' {
        border: none;
      }
    }

    .e-splitter {
      border-width: $fe-border-none;
    }

    .e-address {
      border-bottom: $fe-nrml-border-width solid;
      height: $fe-address-height;
      position: relative;

      .e-fe-breadcrumb.e-icons {
        padding-bottom: $fe-breadcrumb-icons-padding-bottom;
        @if $fm-skin-name == 'material-dark' {
          padding-bottom: $fe-padding-none;
        }
      }

      .e-search-wrap {
        float: right;
        padding: $fe-search-padding;
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;

        .e-input-group {
          @if $fm-skin-name != 'fluent2' {
            border-bottom-width: $fe-bc-search-border-bottom;
          }
          height: $fe-search-height;
          margin: $fe-margin-none;

          @if $skin-name == 'bootstrap5' or $skin-name == 'tailwind' {
            &.e-input-focus .e-input {
              padding: $fe-padding-none;
            }
          }

          .e-input {
            @include margin-padding($fe-search-input-margin, $fe-padding-none);
            @if $fm-skin-name == 'Material3' or $skin-name == 'bootstrap5' or $skin-name == 'material' {
              height: $fe-search-input-height;
            }
          }

          .e-clear-icon {
            margin: $fe-search-clear-icon-padding;
            @if $skin-name == 'FluentUI' {
              padding: $fe-search-clear-icon-margin;
            }
          }
        }
      }

      .e-fe-search {
        font-size: $fe-search-icon-font-size;
        @if ($fm-skin-name != 'fluent2') {
          margin: $fe-search-icon-margin;
        }
        @if ($fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5') {
          margin-right: 4px;
          padding: $fe-search-input-padding;
        }
        @else if ($fm-skin-name == 'Material3') {
          padding: $fe-search-input-padding;
        }
        @else if ($fm-skin-name == 'fluent2') {
          padding: $fe-search-input-padding;
        }
        @else if ($fm-skin-name == 'tailwind3') {
          padding: $fe-search-input-padding;
        }
        @else {
          padding: 5px;
        }
        position: absolute;
        z-index: 1;

        &::before {
          display: inline-block;
        }
      }

      .e-addressbar-ul {
        @include ellipsis;
        list-style: none;
        @include margin-padding($fe-bc-margin, $fe-bc-padding);

        .e-breadcrumb-menu {
          display: inline;

          .e-breadcrumb-submenu {
            height: $fe-bc-submenu-height;
            @if $fm-skin-name == 'material-dark' {
              padding-bottom: $fe-padding-none;
              padding-top: $fe-padding-none;
            }
          }
        }
      }

      .e-list-text {
        cursor: pointer;
        font-size: $fe-bc-font-size;
        line-height: $fe-bc-text-size;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          font-weight: $font-weight-medium;
        }
        @else {
          padding: $fe-bc-text-padding;
        }
        text-decoration: none;
        @if $fm-skin-name == 'fluent2' {
          border-radius: $fe-address-list-text-border-radius;
        }

        &:hover {
          text-decoration: $fe-bc-li-text-decoration;
        }
      }

      .e-address-list-item {
        &:not(:last-child) {
          .e-list-text {
            @if ($fm-skin-name == 'bootstrap5.3') {
              text-decoration: underline $primary-border-color;
            }
          }
        }
      }

      .e-address-list-item {
        display: inline-block;
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
          height: $fe-bc-li-item-height;
        }

        &:last-child {
          .e-list-text {
            cursor: default;
            @if $fm-skin-name == 'fluent2' {
              font-weight: 600;
            }
            &:hover {
              text-decoration: none;
            }
          }
        }

        .e-icons {
          font-size: $fe-bc-icon-font-size;
          margin: $fe-bc-icon-margin;
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2' {
            vertical-align: middle;
          }

          &::before {
            @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'tailwind3' {
              padding: $fe-bc-icon-padding;
            }
          }
        }
      }
    }

    .e-view-container .e-grid .e-gridcontent .e-emptyrow {
      display: table-row;
    }

    .e-grid {
      @include checkbox($fe-cb-line-height);
      @if ($fm-skin-name == 'tailwind3') {
        .e-checkbox-wrapper {
          .e-icons.e-check {
            font-size: $fe-checkbox-icon-font-size;
          }
        }
      }
      border-width: $fe-border-none;
      float: left;

      &.sf-grid {
        .e-headercell.e-fe-grid-icon .e-headercelldiv {
          @if $fm-skin-name !='Material3' {
            margin-right: $fe-grid-headercell-icon-margin-right;
          }
        }

        .e-gridheader .e-fe-grid-icon,
        .e-gridcontent .e-fe-grid-icon  {
          @if $fm-skin-name !='Material3' {
            padding: $fe-grid-icon-padding;
          }
        }
      }
      .e-gridcontent tr.e-emptyrow td.e-lastrowcell:first-child:empty {
        height: $fe-height-none;
        padding: $fe-padding-none;
      }

      .e-gridheader {
        border-width: $fe-grid-header-border-width;

        .e-headercell {
          height: $fe-grid-header-height;

          &.e-fe-grid-icon .e-sortfilterdiv {
            margin-right: $fe-grid-icon-sort-margin;
          }

          .e-headertext {
            font-size: $fe-grid-header-font-size;
          }

          .e-rcursor {
            border: $fe-border-none;
          }

          @if $fm-skin-name == 'fabric' or $fm-skin-name == 'fabric-dark' {
            padding: 5px 8px;
            line-height: 16px;
          }
        }

        @include visibility(hidden);

        &:hover,
        .e-active {
          @include visibility(visible);
          @if $fm-skin-name == 'tailwind3' {
            .e-checkbox-wrapper {
              position: relative;
              z-index: 999;
            }
          }
        }
      }

      &.e-headercheck .e-gridheader .e-headercontent {
        @include visibility(visible);
        @if $fm-skin-name == 'tailwind3' {
          .e-checkbox-wrapper {
            position: relative;
            z-index: 999;
          }
        }
      }

      @if $fm-skin-name == 'FluentUI' {
        .e-checkbox-wrapper:hover .e-frame {
          font-size: 10px;
        }
      }

      .e-content {
        overflow-y: auto !important; /* stylelint-disable-line declaration-no-important */
        .e-table {
          border-spacing: $fe-content-border-spacing;
        }
      }

      .e-content {

        .e-rowcell {
          border: $fe-border-none;
          font-size: $fe-grid-content-font-size;

          @if $fm-skin-name == 'FluentUI' {
            padding: 8px;
          }

          @if $fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2' {
            padding: $fe-grid-content-padding;
            line-height: 20px;

            .e-fe-text {
              font-size: $fe-grid-content-name-font-size;
              line-height: 20px;
            }
          }

          @if $fm-skin-name == 'fabric' or $fm-skin-name == 'fabric-dark' {
            padding: 8px 12px;
            line-height: 16px;
          }
        }

        tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
          @if $fm-skin-name == 'tailwind' {
            border-bottom: 1px dashed $fe-drop-folder-bg-color;
            border-left: 1px dashed $fe-drop-folder-bg-color;
            border-top: 1px dashed $fe-drop-folder-bg-color;
          }
          @else {
            box-shadow: 1px 0 0 1px $fe-drop-folder-bg-color inset;
          }
        }

        tr.e-row.e-fe-drop-folder .e-rowcell:last-child {
          @if $fm-skin-name == 'tailwind' {
            border-bottom: 1px dashed $fe-drop-folder-bg-color;
            border-right: 1px dashed $fe-drop-folder-bg-color;
            border-top: 1px dashed $fe-drop-folder-bg-color;
          }
          @else {
            box-shadow: -1px 0 0 1px $fe-drop-folder-bg-color inset;
          }
        }

        tr.e-row.e-fe-drop-folder .e-rowcell {
          @if $fm-skin-name == 'tailwind' {
            border-bottom: 1px dashed $fe-drop-folder-bg-color;
            border-top: 1px dashed $fe-drop-folder-bg-color;
            padding-bottom: 6px;
            padding-top: 6px;
          }
          @else {
            box-shadow: 0 2px 0 -1px $fe-drop-folder-bg-color inset, 0 -2px 0 -1px $fe-drop-folder-bg-color inset;
          }
        }
      }

      .e-empty {
        min-width: $fe-grid-empty-min-width;
        @if $fm-skin-name == 'Material3' {
          border: 1px dashed $primary;
          border-radius: $fe-empty-border-radius;
          margin: 36px;
          height: calc(100% - 72px);
        }
      }

      .e-empty-content {
        @include empty-content($fe-grid-empty-content-font-size, $fe-grid-empty-content-margin, $fe-grid-empty-content-padding, $fe-grid-empty-content-text-align);
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          line-height: 24px;
        }
        @if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
          line-height: $fe-grid-empty-content-line-height;
        }
        @if $fm-skin-name == 'Material3' {
          font-weight: 500;
        }
      }

      .e-empty-icon {
        @include icon-style($fe-grid-empty-icon-height, $fe-grid-empty-icon-width, $fe-grid-empty-icon-margin);
        @if $fm-skin-name == 'Material3' {
          margin-top: 5%;
        }
      }

      .e-empty-inner-content {
        @include empty-content($fe-grid-empty-inner-content-font-size, $fe-grid-empty-inner-content-margin, $fe-grid-empty-inner-content-padding, $fe-grid-empty-inner-content-text-align);
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap5.3' or $fm-skin-name == 'Material3' or $fm-skin-name == 'tailwind3' {
          line-height: $fe-grid-empty-inner-content-line-height;
        }
        @else if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
          line-height: $fe-grid-empty-content-line-height;
          color: $fe-grid-empty-inner-content-color;
        }
        @else {
          opacity: $fe-lg-icon-empty-inner-content-opacity;
        }
      }

      .e-gridpopup {
        display: none !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-gridheader,
      .e-gridcontent {

        .e-fe-checkbox {
          overflow: inherit;
          padding-left: $fe-grid-header-cb-padding-left;
          padding-right: $fe-padding-none;
          box-shadow: none;
        }

        .e-fe-grid-icon {
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'Material3' {
            padding: $fe-gridcontent-icon-padding;
          }
          @if $fm-skin-name == 'Material3' {
            padding: $fe-grid-icon-padding;
          }

          .e-headercelldiv {
            text-overflow: unset;
          }

          & + .e-rowcell,
          & + .e-headercell {
            padding-left: $fe-padding-none;

            &.e-fe-grid-name {
              padding-left: $fe-grid-name-padding-left;
            }
          }
        }
      }

      .e-row {
        @include visibility(hidden);

        &.e-focused {
          box-shadow: none;
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'tailwind3' {
            td {
              box-shadow: $fe-grid-row-ie-box-shadow;
              &:first-child{
                box-shadow: $fe-grid-row-fc-ie-box-shadow;
              }
              &:last-child{
                box-shadow: $fe-grid-row-lc-ie-box-shadow;
              }
            }
          }
        }

        &:hover,
        .e-active {
          @include visibility(visible);
        }

        &.e-fe-drop-file:hover {
          @include visibility(hidden);
        }
      }

      &.e-horizontallines,
      &.e-verticallines,
      &.e-hidelines {
        @include grid-no-border;
      }

      &.e-resize-lines .e-headercell .e-rsuppress {
        border-width: $fe-border-none;
      }

      .e-fe-icon {
        display: inline-block;
        @include icon-style($fe-grid-icon-height, $fe-grid-icon-size, $fe-grid-icon-margin);
        vertical-align: middle;
      }
    }

    .e-view-container .e-grid .e-gridheader {
      padding-right: $fe-padding-none !important; /* stylelint-disable-line declaration-no-important */
    }

    &.e-rtl .e-view-container .e-grid .e-gridheader {
      padding-left: $fe-padding-none !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $fm-skin-name == 'tailwind3' {
      &.e-rtl .e-large-icons .e-checkbox-wrapper {
        padding-right: $fe-largeicon-rtl-checkbox-padding-right;
      }
    }
    .e-large-icons {
      @include checkbox($fe-cb-line-height);
      float: left;
      overflow: auto;
      width: 100%;
      height: calc($fe-full-height - $fe-address-height);

      .e-empty {
        min-width: $fe-lg-icon-empty-min-width;
        @if $fm-skin-name == 'Material3' {
          border: 1px dashed $primary;
          border-radius: $fe-empty-border-radius;
          margin: 36px;
          height: calc(100% - 72px);
        }
      }

      .e-empty-content {
        @include empty-content($fe-lg-icon-empty-content-font-size, $fe-lg-icon-empty-content-margin, $fe-lg-icon-empty-content-padding, $fe-lg-icon-empty-content-text-align);
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          line-height: 24px;
        }
        @if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
          line-height: $fe-grid-empty-content-line-height;
        }
        @if $fm-skin-name == 'Material3' {
          font-weight: 500;
        }
      }

      .e-empty-icon {
        @include icon-style($fe-lg-icon-empty-icon-height, $fe-lg-icon-empty-icon-width, $fe-lg-icon-empty-icon-margin);
        @if $fm-skin-name == 'Material3' {
          margin-top: 10%;
        }
      }

      .e-empty-inner-content {
        @include empty-content($fe-lg-icon-empty-inner-content-font-size, $fe-lg-icon-empty-inner-content-margin, $fe-lg-icon-empty-inner-content-padding, $fe-lg-icon-empty-inner-content-text-align);
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap5.3' or $fm-skin-name == 'Material3' {
          line-height: 22px;
        }
        @else if ($fm-skin-name == 'fluent2' or $fm-skin-name == 'tailwind3') {
          line-height: $fe-grid-empty-content-line-height;
          color: $fe-grid-empty-inner-content-color;
        }
        @else {
          opacity: $fe-lg-icon-empty-inner-content-opacity;
        }
      }

      .e-list-parent {
        display: block;
        height: $fe-parent-list-height;
        @include margin-padding($fe-lg-margin, $fe-lg-padding);
        overflow: auto;
      }

      .e-checkbox-wrapper {
        float: left;
        position: absolute;
        top: 0;
        visibility: hidden;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          margin: 2px;
        }
        @if $fm-skin-name == 'Material3' {
          margin: 4px;
        }
        @if ($fm-skin-name == 'tailwind3') {
          .e-icons.e-check {
            font-size: $fe-checkbox-icon-font-size;
          }
        }
      }

      .e-list-item {
        border: $fe-lg-item-border solid;
        float: left;
        @include icon-style($fe-lg-item-height, $fe-lg-item-width, $fe-lg-item-margin);
        overflow: hidden;
        @if $fm-skin-name != 'tailwind3' {
          padding: $fe-lg-item-padding;
        }

        &.e-fe-drop-folder {
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3'{
            border: 1px dashed $fe-drop-folder-bg-color;
          }
          @else if $fm-skin-name == 'FluentUI' {
            border: 2px dashed $fe-drop-folder-bg-color;
          }
        }
        @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap-dark' or $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $skin-name == 'Material3' or $fm-skin-name == 'fluent2' {
          border-radius: $fe-large-icon-list-item-border-radius;
        }

        &.e-active,
        &.e-hover,
        &:hover {
          @include visibility(visible);
        }
      }

      .e-text-content {
        display: table-cell;
        height: $fe-lg-item-inner-height;
        position: relative;
        vertical-align: bottom;
      }

      .image-blur {
        filter: blur(8px);
      }

      .e-list-text {
        @include ellipsis;
        display: block;
        font-size: $fe-lg-text-font-size;
        @if $fm-skin-name != 'tailwind3' {
          padding: $fe-lg-text-padding;
        }
        text-align: center;
        width: $fe-lg-item-inner-width;
        @if $fm-skin-name == 'Material3' {
          line-height: $fe-lg-text-line-height;
        }
        @if $fm-skin-name == 'tailwind3' {
          line-height: $fe-large-list-text-lheight;
        }
      }

      .e-list-img {
        @if $fm-skin-name != 'Material3' and $fm-skin-name != 'Material3-dark' {
          border: $fe-large-list-img-border solid;
        }
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
          box-shadow: $fe-img-box-shadow;
        }
        display: block;
        margin: $fe-margin-none $fe-margin-auto;
        max-height: $fe-lg-img-height;
        max-width: 100%;
        min-height: 20px;
      }

      .e-list-icon {
        display: block;
        @include icon-style($fe-lg-icon-height, $fe-lg-icon-width, $fe-lg-icon-margin);
        @if $fm-skin-name == 'Material3' {
          background-position: center;
        }
      }
    }

    &.e-drag-select {
      position: absolute;
      background-color: $fe-drag-select-bg-color;
      opacity: $fe-drag-select-bg-opacity;
      border: $fe-nrml-border-none;
      width: 0;
      height: $fe-height-none;
      z-index: 1;
    }

    .e-fe-clone {
      pointer-events: none;
      z-index: 20;

      .e-fe-content {
        border: $fe-clone-border;
        box-shadow: $fe-clone-box-shadow;
        display: inline-flex;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          height: $fe-clone-content-height;
        }
        @else if $fm-skin-name == 'Material3' {
          height: $fe-clone-content-height;
        }
        @else {
          height: $fe-clone-content-height;
          padding: $fe-clone-content-padding;
        }
        @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap-dark' or $fm-skin-name == 'bootstrap' {
          border-radius: 4px;
        }

        .e-fe-name {
          display: inline-block;
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            font-size: $fe-clone-content-name-font-size;
            line-height: 22px;
            margin: $fe-clone-content-name-margin;
            max-width: 150px;
          }
          @else {
            font-size: $fe-clone-content-name-font-size;
            margin: $fe-clone-content-name-margin;
            max-width: 70px;
          }
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .e-fe-icon {
          display: inline-block;
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            @include icon-style(20px, 20px, $fe-clone-content-icon-margin);
          }
          @else {
            @include icon-style(18px, 18px, $fe-clone-content-icon-margin);
          }
        }
      }

      .e-fe-count {
        border: $fe-nrml-border-width solid;
        border-radius: $fe-clone-count-border-radius;
        font-size: $fe-clone-count-font-size;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          @include icon-style(20px, 20px, $fe-clone-count-margin);
          line-height: $fe-clone-count-lheight;
        }
        @else {
          @include size($fe-clone-count-height, 22px);
          line-height: $fe-clone-count-lheight;
          margin-left: $fe-clone-count-margin-left;
        }
        position: relative;
        text-align: center;
        top: 0;
      }
    }

    &.e-rtl {

      .e-treeview > .e-ul {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding: $fe-rtl-treeview-ul-padding;
        }
      }

      .e-toolbar {

        .e-fe-grid {
          display: inline-table;
          transform: rotate(180deg);
        }

        .e-toolbar-items .e-toolbar-right .e-toolbar-item .e-dropdown-btn .e-icon-left {
          @if $fm-skin-name == 'FluentUI' {
            line-height: $fe-cb-line-height;
          }
        }
      }

      .e-splitter.e-splitter-horizontal {
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
      }

      .e-address {

        .e-search-wrap {
          float: left;
          left: 0;
          right: auto;
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            padding-left: 12px;
          }

          @if $fm-skin-name == 'Material3' {
            padding: $fe-rtl-search-padding;
          }

          .e-input-group {
            .e-input {
              @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
                margin: $fe-rtl-search-wrap-input-margin;
              }
              @else if $fm-skin-name == 'Material3' {
                margin: $fe-rtl-search-input-margin;
              }
              @else if $fm-skin-name == 'tailwind3' {
                margin: $fe-rtl-search-wrap-input-margin;
              }
              @else {
                margin: $fe-rtl-search-wrap-input-margin;
              }
              padding: $fe-padding-none;
            }
          }
        }

        .e-addressbar-ul {
          display: flex;

          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            padding: $fe-rtl-bc-padding;
          }

          .e-icons::before {
            display: inline-block;
            transform: rotate(180deg);
          }
        }
      }

      .e-grid.e-rtl {

        .e-row.e-focused {
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' and $fm-skin-name != 'FluentUI' and $fm-skin-name != 'Material3' and $fm-skin-name != 'tailwind3' {
            td:first-child {
              box-shadow: $fe-grid-row-lc-ie-box-shadow;
            }

            td:last-child {
              box-shadow: $fe-grid-row-fc-ie-box-shadow;
            }
          }
        }
        @if $fm-skin-name == 'tailwind' {
          .e-content {

            tr.e-row.e-fe-drop-folder .e-rowcell:first-child {
              border-left: 0;
              border-right: 1px dashed $fe-drop-folder-bg-color;
            }

            tr.e-row.e-fe-drop-folder .e-rowcell:last-child {
              border-left: 1px dashed $fe-drop-folder-bg-color;
              border-right: 0;
            }
          }
        }

        .e-gridheader,
        .e-gridcontent {

          .e-fe-checkbox {
            padding-left: $fe-padding-none;
            padding-right: $fe-rtl-grid-content-padding;
          }

          .e-fe-grid-icon {
            padding-left: $fe-padding-none;
            padding-right: $fe-rtl-grid-content-padding;

            & + .e-rowcell,
            & + .e-headercell {
              padding-left: $fe-rtl-grid-icon-padding;
              padding-right: $fe-padding-none;

              &.e-fe-grid-name {
                padding-right: $fe-rtl-grid-content-padding;
              }
            }
          }
        }

        .e-fe-icon {
          margin: $fe-rtl-grid-icon-margin;
        }
      }

      .e-large-icons .e-list-item {
        float: right;
      }

      .e-fe-clone .e-fe-count {
        margin-left: $fe-margin-none;
        margin-right: $fe-clone-count-margin-left;
      }

      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        .e-fe-clone .e-fe-name {
          margin: 8px 0 8px 8px;
        }
      }
    }

    .e-layout-content {
      position: relative;
    }

    .e-pager {
      border-width: $fe-pager-border-width;
    }

    .e-fe-overlay {
      border: $fe-upload-overlay-border dashed $fe-drop-border-color;
      bottom: 0;
      display: block;
      @include size($fe-nrml-overlay-height, 100%);
      @if $fm-skin-name == 'fluent2' {
        width: calc(100% - 48px);
        top: 64px;
        height: calc(100% - 88px);
        left: 24px;
      }
      pointer-events: none;
      position: absolute;
      visibility: hidden;
    }

    @if $fm-skin-name == 'fluent2' {
      .e-grid + .e-large-icons + .e-fe-overlay {
        top: 82px;
      }

      .e-grid:has(.e-empty) + .e-large-icons + .e-fe-overlay {
        top: 96px;
        height: calc(100% - 120px);
      }
    }

    .e-upload-drag-hover {
      outline: none;

      .e-fe-overlay {
        visibility: visible;
      }
    }

    .e-fm-view-container {
      display: flex;
      width: 100%;
      flex-direction: column;
      height: $fe-parent-list-height;
    }
  }

  .e-fe-popup {

    &.e-dropdown-popup ul .e-item,
    &.e-contextmenu-wrapper ul .e-menu-item,
    &.e-contextmenu-container ul .e-menu-item {
      @include popup-active-icon;
    }

    &.e-dlg-resizable .e-dlg-content {
      overflow: hidden;
    }

    &.e-dialog.e-fe-upload-dialog .e-dlg-content {
      overflow: auto;
    }

    &.e-contextmenu-wrapper ul .e-menu-item.e-separator,
    &.e-contextmenu-container ul .e-menu-item.e-separator {
      margin: $fe-cm-separator-margin;
    }

    &.e-rtl .e-fe-grid {
      display: inline-table;
      transform: rotate(180deg);
    }

    &.e-dialog {

      td {
        @include ellipsis;
        font-size: $fe-dg-td-font-size;
        max-width: 211px;
        min-width: 51px;
        padding: $fe-dg-td-padding;
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          line-height: 22px;

          &:first-child {
            font-size: $text-sm;
            line-height: 22px;
          }
        }
      }

      td.e-fe-value {
        white-space: unset;
        word-break: break-word;
      }

      .e-fe-errorcontent {
        white-space: normal;
        word-break: break-word;
      }

      .e-fe-icon {
        display: inline-block;
        @include icon-style(18px, 18px, $fe-popup-dialog-icon-margin);
      }

      .e-fe-access-header {
        display: inline-block;
      }

      .e-fe-retrycontent {
        padding: $fe-dialog-retrycontent-padding;
      }

      .e-image {
        @include size($fe-dialog-img-height, 100%);
      }

      .e-dlg-content {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
          padding-top: 16px;
        }
        @if $fm-skin-name == 'FluentUI' {
          padding-top: 2px;
        }
      }

      &.e-rtl {
        td {
          padding: $fe-dg-rtl-td-padding;
        }
        .e-fe-icon {
          margin: $fe-popup-dialog-rtl-icon-margin;
        }
      }
    }

    &.e-dialog.e-popup.e-dlg-resizable {
      min-height: 200px;
    }

    .e-fe-error {
      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        font-size: $fe-popup-error-font-size;
        line-height: $fe-popup-error-line-height;
        padding-top: 4px;
      }
      @else {
        font-size: $fe-popup-error-font-size;
        line-height: $fe-popup-error-line-height;
      }
    }

    .e-upload {
      border-bottom-width: $fe-border-none;
      border-top-width: $fe-border-none;

      .e-upload-actions {
        border-bottom: $fe-nrml-border-width solid;
      }
    }
  }

  .e-filemanager .e-display-none,
  .e-filemanager .e-treeview .e-icons .e-treeview-spinner,
  .e-filemanager .e-splitter .e-split-bar .e-resize-handler,
  .e-filemanager .e-splitter .e-display-none,
  .e-filemanager .e-grid .e-spin-show,
  .e-filemanager .e-grid .e-gridheader .e-emptyrow,
  .e-filemanager .e-grid .e-gridcontent .e-emptyrow,
  .e-fe-popup .e-upload .e-file-select-wrap,
  .e-fe-popup .e-upload .e-icons.e-file-delete-btn {
    display: none;
  }

  @media (max-width: 469px) {
    .e-bigger .e-filemanager,
    .e-filemanager.e-bigger {
      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
        min-width: $fe-mobile-lg-item-minwidth;
        width: $fe-mobile-lg-item-width-two;
      }
    }
  }

  @media (min-width: 470px) and (max-width: 625px) {
    .e-bigger .e-filemanager,
    .e-filemanager.e-bigger {
      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
        min-width: $fe-mobile-lg-item-minwidth;
        width: $fe-mobile-lg-item-width-three;
      }
    }
  }

  @media (min-width: 360px) and (max-width: 500px) {
    @if $skin-name == 'FluentUI' {
      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
        position: relative;
        right: 10px;
      }
    }
  }

  .e-content-placeholder.e-filemanager.e-placeholder-filemanager {
    @include size($fe-full-height, 100%);
  }

  .e-filemanager-dialog {
    z-index: 1005;
    display: flex;
    position: absolute;
  }

  .e-image-wrap-style {
    height: $fe-full-height;
  }

  .e-fe-popup.e-dialog td.e-permission-content{
    white-space: unset;
  }

  .e-large-icon-visible {
    visibility: visible;
  }

  .e-large-icon-hidden {
    visibility: hidden;
  }

  .e-filemanager .e-empty-state-container {
    display: flex;
    height: $fe-full-height;
  }

  .e-filemanager .e-empty.e-view-container {
    margin: $fe-margin-auto;
  }

  .e-filemanager.e-fe-no-toolbar .e-fe-splitter {
    height: $fe-full-height;
  }

  .e-filemanager .e-fe-splitter {
    height: calc(#{$fe-full-height} - #{if($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2', $fe-tb-height + 1px, $fe-tb-height)});
  }

  .e-filemanager .e-view-container .e-fe-grid-container {
    height: calc($fe-full-height - $fe-address-height);
  }

  .e-filemanager .e-dropdown-btn.e-caret-hide .e-caret,
  .e-filemanager .e-dropdown-btn.e-btn.e-caret-hide .e-caret {
    position: absolute;
    display: block;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }
}

@mixin active-icon {
  .e-fe-dot,
  .e-fe-tick {
    color: $fe-ddl-icon-color;
  }
}

@mixin active-icon-color {
  .e-btn-icon,
  .e-tbar-btn-text {
    @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap5' {
      color: $fe-tb-active-color;
    }

    @if $fm-skin-name == 'highcontrast' {
      color: $fe-active-font-color;
    }
  }
}

@mixin hover-icon-border-color {
  @if $fm-skin-name == 'bootstrap-dark' {
    border: 1px solid $fe-tb-hover-border-color;
  }
}

@mixin bg-border($bg-color, $border-color) {
  background: $bg-color;
  border-color: $border-color;
}

@include export-module('FileManager-theme') {
  .e-filemanager {
    @include bg-border($fe-background, $fe-border-color);

    .e-toolbar {
      border-bottom-color: $fe-border-color;
      @if $fm-skin-name != 'Material3' {
        .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
          &.e-active {
            @include hover-icon-border-color;
            @include active-icon-color;
            @include bg-border($fe-tb-focus-bg, $fe-tb-focus-border-color);
            @if $fm-skin-name == 'highcontrast' {
              background: $fe-active-bg-color;
            }

            &:hover {
              @if $fm-skin-name == 'highcontrast' {
                background: $fe-active-bg-color;
              }
            }
          }

          &:hover {
            @include hover-icon-border-color;
            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
          }

          &:focus {
            @include hover-icon-border-color;
            @include active-icon-color;
            @include bg-border($fe-tb-focus-bg, $fe-tb-hover-border-color);
            @if $fm-skin-name == 'highcontrast' {
              background: $fe-active-bg-color;
            }
          }
        }
      }
    }

    @if $fm-skin-name == 'tailwind' {
      .e-navigation.e-pane {
        background-color: $content-bg-color-alt1;
      }
    }

    .e-address {
      border-bottom-color: $fe-border-color;

      .e-breadcrumb-menu .e-breadcrumb-submenu {
        &:active,
        &:focus,
        &:hover {
          @include active-icon-color;
        }
      }

      .e-icons {
        color: $fe-icon-color;
      }

      .e-list-text {
        color: $fe-bc-link-color;
      }

      .e-address-list-item {
        color: $fe-bc-link-color;

        &:focus .e-list-text {
          @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'bootstrap5.3' {
            background: $fe-bc-hover-bg-color;
          }
          color: $fe-bc-hover-font-color;
        }

        &:last-child {
          .e-list-text {
            color: $fe-bc-color;
          }
        }

        &:not(:last-child) {
          .e-list-text {
            @if ($fm-skin-name == 'bootstrap5.3') {
              &:hover {
                background-color: $content-bg-color-hover;
                color: $primary-bg-color-hover;
                text-decoration: underline $primary-bg-color-hover;
              }
              &:active {
                color: $primary-bg-color-hover;
                border: 1px solid $primary-bg-color-hover;
                text-decoration: underline $primary-bg-color-hover;
              }
            }
            @else {
              &:hover,
              &:active,
              &:focus {
                @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
                  background: $fe-bc-hover-bg-color;
                }
                color: $fe-bc-hover-font-color;
              }
            }
            @if $fm-skin-name == 'fluent2' {
              &:active {
                background: $fe-bc-active-bg-color;
              }
            }
          }
        }
      }

      .e-address-list-item:focus .e-list-text {
        @if ($fm-skin-name == 'bootstrap5.3') {
          color: $primary-bg-color-hover;
          border: 1px solid $primary-bg-color-hover;
          text-decoration: underline $primary-bg-color-hover;
        }
        @else {
          color: $fe-bc-hover-font-color;
        }
      }

      .e-search-wrap {
        .e-input-group.e-control-wrapper:not(.e-success) {
          @if $fm-skin-name != 'fluent2' {
            @include bg-border($fe-search-bg-color, $fe-border-color);
          }

          @if $theme-name == 'fluentui-dark' {
            border-color: $fe-search-border-color;
          }
          @if ($fm-skin-name == 'Material3') {
            border: none;
            border-bottom: 1px solid $outline;
            border-radius: $fe-address-input-group-border-radius;
          }
        }
      }
    }

    .e-treeview {
      .e-list-item.e-active {
        & > .e-fullrow {
          border: $fe-ah-border-color;
        }

        &.e-hover > .e-fullrow {
          @if $fm-skin-name == 'material-dark' {
            background-color: $fe-ah-bg-color;
          }
        }
      }

      .e-list-parent .e-list-item.e-fe-drop-folder.e-hover > .e-fullrow {
        border-color: $fe-drop-folder-bg-color;
      }
    }

    .e-grid {

      .e-gridheader {
        @if $fm-skin-name != 'FluentUI' {
          tr:first-child th {
            background: $fe-grid-header-bg-color;
          }
        }

        .e-headercell {

          &:not(.e-fe-grid-icon):hover,
          &.e-fe-grid-icon .e-headercelldiv:hover {
            background: $fe-hover-bg-color;
          }
          &.e-fe-checkbox:hover {
            @if $fm-skin-name == 'FluentUI' {
              background: $content-bg-color;
            }
            @else {
              background: $fe-grid-header-bg-color;
            }
          }
        }
      }

      .e-empty-inner-content {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' or $fm-skin-name =='Material3' {
          color: $fe-grid-empty-inner-content-color;
        }
      }

      .e-rowcell {
        @if $fm-skin-name == 'material-dark' or $fm-skin-name == 'bootstrap-dark' {
          color: $fe-grid-type-color;

          .e-fe-text {
            color: $fe-grid-text-color;
          }
        }
      }

      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap4' {
        td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
          color: $fe-grid-active-font-color;
        }
      }

      td.e-active {
        background-color: $fe-active-bg-color;
        @if $fm-skin-name != 'material-dark' {
          color: $fe-active-font-color;
        }
        @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'fluent2'{
          background-color: $fe-grid-active-bg-color;
        }
      }

      tr:hover td.e-active {
        @if $fm-skin-name == 'material-dark' {
          background-color: $fe-ah-bg-color;
        }
      }

      .e-checkbox-wrapper {
        .e-icons.e-check {
          @if $fm-skin-name == 'highcontrast' or $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap-dark' or $fm-skin-name == 'bootstrap5' {
            background-color: $fe-checkbox-bg-color;
            color: $fe-checkbox-color;
          }
        }

        .e-icons.e-stop {
          @if $fm-skin-name == 'bootstrap4' or $fm-skin-name == 'bootstrap5' {
            background-color: $fe-checkbox-bg-color;
            color: $fe-checkbox-color;
          }
        }
      }

      &.e-gridhover .e-row:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        @if $fm-skin-name == 'material-dark' or $fm-skin-name == 'bootstrap-dark' {
          background-color: $fe-hover-bg-color;
          color: $fe-grid-type-color;
        }
      }

      &.e-gridhover .e-row.e-fe-drop-file:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
        background-color: transparent;
      }

      &.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd) {
        @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'bootstrap4' {
          color: $fe-selected-hover-font-color;
        }
      }
    }

    .e-large-icons {

      .e-list-img {
        border-color: $fe-img-border-color;
      }

      .e-active {
        color: $fe-active-font-color;
      }

      .e-empty-inner-content {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'tailwind3' or $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'Material3' {
          color: $fe-grid-empty-inner-content-color;
        }
      }

      .e-large-icon {
        border-color: transparent;

        &.e-active {
          @include bg-border($fe-active-bg-color, $fe-active-border-color);
        }

        &.e-hover,
        &:hover {
          @include bg-border($fe-hover-bg-color, $fe-hover-border-color);
          @if ($fm-skin-name == 'fluent2') {
            color: $fe-lg-hover-font-color;
          }
        }

        &.e-active.e-hover,
        &.e-active:hover {
          @include bg-border($fe-ah-bg-color, $fe-ah-border-color);
          @if ($fm-skin-name == 'fluent2') {
            color: $fe-lg-active-font-color;
          }
        }

        &.e-focus {
          border-color: $fe-focus-border-color;
          @if $fm-skin-name == 'tailwind3' {
            background-color: $content-bg-color-focus;
          }
        }

        &.e-hover.e-fe-drop-folder,
        &:hover.e-fe-drop-folder {
          border-color: $fe-drop-folder-bg-color;
        }
      }

      .e-checkbox-wrapper {
        .e-icons.e-check {
          background-color: $fe-checkbox-bg-color;
          color: $fe-checkbox-color;
        }
      }
    }

    .e-fe-clone {

      .e-fe-content {
        background-color: $fe-clone-bg-color;
        @if $fm-skin-name == 'highcontrast-light' or $fm-skin-name == 'fabric-dark' or $fm-skin-name == 'bootstrap-dark' {
          border-color: $fe-clone-border-color;
        }
        color: $fe-bc-color;

        @if $fm-skin-name == 'highcontrast' {
          color: $fe-active-font-color;
        }
      }

      .e-fe-count {
        background-color: $fe-clone-count-bg-color;
        border-color: $fe-clone-count-border-color;
        color: $fe-clone-count-font-color;
      }
    }

    &.e-fe-mobile {
      .e-large-icons {
        .e-large-icon {

          &.e-hover,
          &:hover {
            @include bg-border(transparent, transparent);
          }
          &.e-focus {
            border-color: transparent;
          }
          &.e-active {
            @include bg-border($fe-active-bg-color, $fe-active-border-color);
          }
        }
      }
      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        .e-address .e-icons {
          color: $icon-color;
          &:hover {
            color: $icon-color-hover;
          }
        }
      }
    }
  }

  .e-fe-popup {

    &.e-dropdown-popup ul .e-item,
    &.e-contextmenu-wrapper ul .e-menu-item,
    &.e-contextmenu-container ul .e-menu-item {
      @include active-icon;

      &.e-separator {
        @if $fm-skin-name == 'bootstrap4' {
          border-bottom-color: $fe-tb-db-sep-color;
        }
      }
    }

    &.e-dialog {
      td {
        color: $fe-text-color;
        &:first-child {
          color: $fe-label-color;
        }
      }
    }

    .e-fe-error {
      color: $fe-error-color;
    }

    .e-upload .e-upload-actions {
      border-bottom-color: $fe-up-list-border-color;
    }
  }
  .e-filemanager .e-grid.sf-grid :is(.e-headercontent th.e-headercell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox, .e-content td.e-rowcell:not(.e-menu-item):not(.e-editedbatchcell).e-fe-checkbox):is(:focus, :focus-visible) {
    box-shadow: none;
  }
}

@include export-module('FileManager-bootstrap-dark-icons') {

  .e-filemanager {

    .e-fe-icon,
    .e-list-icon {
      background-repeat: no-repeat;
    }

    .e-fe-access-error {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGQkUzRjtzdHJva2U6I0FDODkzODtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MXtmaWxsOiMwNjAyMDA7fTwvc3R5bGU+PGcgaWQ9ImNmdUt3Ri50aWYiPjxpbWFnZSBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZTsiIHdpZHRoPSIxMjgiIGhlaWdodD0iMTQwIiBpZD0iTGF5ZXJfMF8xXyIgeGxpbms6aHJlZj0iQTQ5RUUwRjNGODFBNjdDMS5wbmciICB0cmFuc2Zvcm09Im1hdHJpeCgwLjI2NTYgMCAwIDAuMjY1NiAtODMuNTc3OSAtMi4yNzgyKSI+PC9pbWFnZT48L2c+PHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LDMuMUwxLjYsMjcuOWMtMC40LDAuNywwLjEsMS42LDAuOSwxLjZoMjYuOGMwLjgsMCwxLjMtMC45LDAuOS0xLjZMMTYuOSwzLjFDMTYuNSwyLjMsMTUuNCwyLjMsMTUsMy4xeiIvPjxwb2x5Z29uIGNsYXNzPSJzdDEiIHBvaW50cz0iMTcsMjIgMTUsMjIgMTQuNSwxMCAxNy4zLDEwICIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNiwyNi41TDE2LDI2LjVjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgwYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzE3LjUsMjUuOCwxNi44LDI2LjUsMTYsMjYuNXoiLz48L3N2Zz4=');
    }

    .e-fe-docx,
    .e-fe-doc {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik0yMS41LDAuNWgtMTdjLTEuMSwwLTIsMC45LTIsMnYyN2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi0yMUwyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3Q0IiBkPSJNMjcuNSwzMmgtMjNDMy4xLDMyLDIsMzAuOSwyLDI5LjV2LTI3QzIsMS4xLDMuMSwwLDQuNSwwaDE3LjJMMzAsOC4zdjIxLjJDMzAsMzAuOSwyOC45LDMyLDI3LjUsMzJ6IE00LjUsMUMzLjcsMSwzLDEuNywzLDIuNXYyN0MzLDMwLjMsMy43LDMxLDQuNSwzMWgyM2MwLjgsMCwxLjUtMC43LDEuNS0xLjVWOC43TDIxLjMsMUg0LjV6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDUiIGQ9Ik0yMS41LDAuNXY2YzAsMS4xLDAuOSwyLDIsMmg2TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDQiIGQ9Ik0yOS41LDloLTZDMjIuMSw5LDIxLDcuOSwyMSw2LjV2LTZjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLjEsMC40LDAsMC41LDAuMWw4LDhDMzAsOC4zLDMwLDguNSwzMCw4LjdDMjkuOSw4LjksMjkuNyw5LDI5LjUsOXogTTIyLDEuN3Y0LjhDMjIsNy4zLDIyLjcsOCwyMy41LDhoNC44TDIyLDEuN3oiLz48L2c+PGc+PHJlY3QgeD0iNyIgeT0iMjMiIGNsYXNzPSJzdDYiIHdpZHRoPSIxOCIgaGVpZ2h0PSIyIi8+PC9nPjxnPjxyZWN0IHg9IjciIHk9IjE3IiBjbGFzcz0ic3Q2IiB3aWR0aD0iMTgiIGhlaWdodD0iMiIvPjwvZz48Zz48cmVjdCB4PSI3IiB5PSIxMSIgY2xhc3M9InN0NiIgd2lkdGg9IjExIiBoZWlnaHQ9IjIiLz48L2c+PC9nPjwvc3ZnPg==');
    }

    .e-fe-pptx,
    .e-fe-ppt {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDEwIiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MTEiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MTIiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDExIiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxyZWN0IHg9IjgiIHk9IjI1IiBjbGFzcz0ic3Q2IiB3aWR0aD0iMTciIGhlaWdodD0iMiIvPjwvZz48Zz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMjIsMTYuMWgtNS4xVjExSDE3QzE5LjgsMTEsMjIsMTMuMiwyMiwxNi4xTDIyLDE2LjF6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xNi45LDE4LjFoLTJ2LTJ2LTMuOGMtMi41LDAuNS00LjQsMy0zLjgsNS45YzAuNCwxLjgsMS45LDMuMywzLjcsMy43YzIuOCwwLjYsNS4zLTEuMiw1LjktMy44SDE2Ljl6Ii8+PC9nPjwvZz48L2c+PC9zdmc+');
    }

    .e-fe-xlsx,
    .e-fe-xls {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDciIGQ9Ik0yMS41LDAuNWgtMTdjLTEuMSwwLTIsMC45LTIsMnYyN2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi0yMUwyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3Q4IiBkPSJNMjcuNSwzMmgtMjNDMy4xLDMyLDIsMzAuOSwyLDI5LjV2LTI3QzIsMS4xLDMuMSwwLDQuNSwwaDE3LjJMMzAsOC4zdjIxLjJDMzAsMzAuOSwyOC45LDMyLDI3LjUsMzJ6IE00LjUsMUMzLjcsMSwzLDEuNywzLDIuNXYyN0MzLDMwLjMsMy43LDMxLDQuNSwzMWgyM2MwLjgsMCwxLjUtMC43LDEuNS0xLjVWOC43TDIxLjMsMUg0LjV6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDkiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDgiIGQ9Ik0yOS41LDloLTdDMjEuNyw5LDIxLDguMywyMSw3LjV2LTdjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLjEsMC40LDAsMC41LDAuMWw4LDhDMzAsOC4zLDMwLDguNSwzMCw4LjdDMjkuOSw4LjksMjkuNyw5LDI5LjUsOXogTTIyLDEuN3Y1LjhDMjIsNy44LDIyLjIsOCwyMi41LDhoNS44TDIyLDEuN3oiLz48L2c+PGc+PHJlY3QgeD0iNyIgeT0iMTgiIGNsYXNzPSJzdDYiIHdpZHRoPSIxNyIgaGVpZ2h0PSIyIi8+PC9nPjxnPjxyZWN0IHg9IjkiIHk9IjE4IiB0cmFuc2Zvcm09Im1hdHJpeCgtMS44MzY5NzBlLTE2IDEgLTEgLTEuODM2OTcwZS0xNiAzNC45OTk5IDMuMDAwMSkiIGNsYXNzPSJzdDYiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyIi8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yNSwyNkg3VjEyaDE4VjI2eiBNOSwyNGgxNFYxNEg5VjI0eiIvPjwvZz48L2c+PC9zdmc+');
    }

    .e-fe-pdf {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDEzIiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTI3LjUsMzJoLTIzQzMuMSwzMiwyLDMwLjksMiwyOS41di0yN0MyLDEuMSwzLjEsMCw0LjUsMGgxNy4yTDMwLDguM3YyMS4yQzMwLDMwLjksMjguOSwzMiwyNy41LDMyeiBNNC41LDFDMy43LDEsMywxLjcsMywyLjV2MjdDMywzMC4zLDMuNywzMSw0LjUsMzFoMjNjMC44LDAsMS41LTAuNywxLjUtMS41VjguN0wyMS4zLDFINC41eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QxNCIgZD0iTTIxLjUsMC41djdjMCwwLjYsMC40LDEsMSwxaDdMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MSIgZD0iTTI5LjUsOWgtN0MyMS43LDksMjEsOC4zLDIxLDcuNXYtN2MwLTAuMiwwLjEtMC40LDAuMy0wLjVjMC4yLTAuMSwwLjQsMCwwLjUsMC4xbDgsOEMzMCw4LjMsMzAsOC41LDMwLDguN0MyOS45LDguOSwyOS43LDksMjkuNSw5eiBNMjIsMS43djUuOEMyMiw3LjgsMjIuMiw4LDIyLjUsOGg1LjhMMjIsMS43eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMTAuMywxNC44YzAuNCwwLDAuOCwwLjEsMS4xLDAuMmMwLjMsMC4xLDAuNSwwLjMsMC43LDAuNmMwLjIsMC4yLDAuMywwLjUsMC40LDAuOGMwLjEsMC4zLDAuMSwwLjYsMC4xLDAuOWMwLDAuNC0wLjEsMC44LTAuMiwxLjJjLTAuMSwwLjMtMC4zLDAuNi0wLjYsMC44Yy0wLjIsMC4yLTAuNSwwLjQtMC45LDAuNWMtMC4zLDAuMS0wLjcsMC4yLTEuMSwwLjJIOXYzLjRINy4zdi04LjZIMTAuM3ogTTkuOCwxOC43YzAuMywwLDAuNi0wLjEsMC44LTAuM3MwLjMtMC41LDAuMy0xYzAtMC40LTAuMS0wLjgtMC4zLTFjLTAuMi0wLjItMC41LTAuMy0wLjktMC4zSDl2Mi42SDkuOHoiLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMTYuNCwxNC44YzAuNiwwLDEuMSwwLjEsMS41LDAuM2MwLjQsMC4yLDAuNywwLjUsMC45LDAuOGMwLjIsMC40LDAuMywwLjgsMC40LDEuM2MwLjEsMC41LDAuMSwxLjEsMC4xLDEuN2MwLDAuOCwwLDEuNC0wLjEsMnMtMC4yLDEtMC41LDEuNGMtMC4yLDAuNC0wLjUsMC42LTAuOSwwLjhjLTAuNCwwLjItMC45LDAuMy0xLjQsMC4zaC0yLjd2LTguNkgxNi40eiBNMTYuMSwyMi4xYzAuMywwLDAuNS0wLjEsMC43LTAuMmMwLjItMC4xLDAuMy0wLjMsMC40LTAuNWMwLjEtMC4yLDAuMi0wLjYsMC4yLTAuOWMwLTAuNCwwLjEtMC45LDAuMS0xLjVjMC0wLjUsMC0wLjksMC0xLjNjMC0wLjQtMC4xLTAuNy0wLjItMC45Yy0wLjEtMC4yLTAuMi0wLjQtMC40LTAuNnMtMC41LTAuMi0wLjgtMC4yaC0wLjd2NkgxNi4xeiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yNS4yLDE0Ljh2MS40aC0zLjF2MkgyNXYxLjRoLTIuOXYzLjdoLTEuN3YtOC42SDI1LjJ6Ii8+PC9nPjwvc3ZnPg==');
    }

    .e-fe-image {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMS41LDAuNWgtMTdjLTEuMSwwLTIsMC45LTIsMnYyN2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi0yMUwyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjcuNSwzMmgtMjNDMy4xLDMyLDIsMzAuOSwyLDI5LjV2LTI3QzIsMS4xLDMuMSwwLDQuNSwwaDE3LjJMMzAsOC4zdjIxLjJDMzAsMzAuOSwyOC45LDMyLDI3LjUsMzJ6IE00LjUsMUMzLjcsMSwzLDEuNywzLDIuNXYyN0MzLDMwLjMsMy43LDMxLDQuNSwzMWgyM2MwLjgsMCwxLjUtMC43LDEuNS0xLjVWOC43TDIxLjMsMUg0LjV6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yOS41LDloLTdDMjEuNyw5LDIxLDguMywyMSw3LjV2LTdjMC0wLjIsMC4xLTAuNCwwLjMtMC41YzAuMi0wLjEsMC40LDAsMC41LDAuMWw4LDhDMzAsOC4zLDMwLDguNSwzMCw4LjdDMjkuOSw4LjksMjkuNyw5LDI5LjUsOXogTTIyLDEuN3Y1LjhDMjIsNy44LDIyLjIsOCwyMi41LDhoNS44TDIyLDEuN3oiLz48L2c+PC9nPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDYiIHBvaW50cz0iNSwyNCAxMC42LDE3LjIgMTQuOCwyMS44IDIxLjQsMTMgMjcsMjQgIi8+PC9nPjwvc3ZnPg==');
    }

    .e-fe-rar {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDIzIiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MjQiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MjUiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDI0IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNXMwLjQsMCwwLjUsMC4xbDgsOEMzMCw4LjMsMzAsOC41LDMwLDguN0MyOS45LDguOSwyOS43LDksMjkuNSw5eiBNMjIsMS43djUuOEMyMiw3LjgsMjIuMiw4LDIyLjUsOGg1LjhMMjIsMS43eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNOS44LDE0LjhjMC43LDAsMS4zLDAuMiwxLjcsMC41YzAuNCwwLjQsMC42LDAuOSwwLjYsMS43YzAsMC42LTAuMSwxLTAuMywxLjRjLTAuMiwwLjQtMC42LDAuNi0xLjEsMC43djBjMC40LDAuMSwwLjcsMC4yLDAuOSwwLjRjMC4yLDAuMiwwLjMsMC42LDAuNCwxYzAsMC4yLDAsMC4zLDAsMC41czAsMC40LDAsMC42YzAsMC41LDAsMC44LDAuMSwxYzAsMC4yLDAuMiwwLjQsMC4zLDAuNXYwLjFoLTEuOWMtMC4xLTAuMS0wLjEtMC4zLTAuMi0wLjRjMC0wLjIsMC0wLjMsMC0wLjVsMC0xLjZjMC0wLjMtMC4xLTAuNi0wLjMtMC44Yy0wLjItMC4yLTAuNC0wLjMtMC44LTAuM0g4LjN2My42SDYuNnYtOC42SDkuOHogTTksMTguNmMwLjQsMCwwLjctMC4xLDEtMC4zYzAuMi0wLjIsMC4zLTAuNSwwLjMtMWMwLTAuOC0wLjQtMS4yLTEuMi0xLjJIOC4zdjIuNUg5eiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xNy4xLDE0LjhsMi4zLDguNmgtMS44bC0wLjQtMS44aC0yLjNsLTAuNCwxLjhoLTEuOGwyLjMtOC42SDE3LjF6IE0xNi44LDIwLjFMMTYsMTYuM2gwbC0wLjgsMy45SDE2Ljh6Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTIzLjEsMTQuOGMwLjcsMCwxLjMsMC4yLDEuNywwLjVjMC40LDAuNCwwLjYsMC45LDAuNiwxLjdjMCwwLjYtMC4xLDEtMC4zLDEuNGMtMC4yLDAuNC0wLjYsMC42LTEuMSwwLjd2MGMwLjQsMC4xLDAuNywwLjIsMC45LDAuNGMwLjIsMC4yLDAuMywwLjYsMC40LDFjMCwwLjIsMCwwLjMsMCwwLjVzMCwwLjQsMCwwLjZjMCwwLjUsMCwwLjgsMC4xLDFjMCwwLjIsMC4yLDAuNCwwLjMsMC41djAuMWgtMS45Yy0wLjEtMC4xLTAuMS0wLjMtMC4yLTAuNGMwLTAuMiwwLTAuMywwLTAuNWwwLTEuNmMwLTAuMy0wLjEtMC42LTAuMy0wLjhjLTAuMi0wLjItMC40LTAuMy0wLjgtMC4zaC0wLjl2My42aC0xLjd2LTguNkgyMy4xeiBNMjIuNCwxOC42YzAuNCwwLDAuNy0wLjEsMS0wLjNjMC4yLTAuMiwwLjMtMC41LDAuMy0xYzAtMC44LTAuNC0xLjItMS4yLTEuMmgtMC44djIuNUgyMi40eiIvPjwvZz48L3N2Zz4=');
    }

    .e-fe-zip {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDE1IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MTYiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MTciIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDE2IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNXMwLjQsMCwwLjUsMC4xbDgsOEMzMCw4LjMsMzAsOC41LDMwLDguN0MyOS45LDguOSwyOS43LDksMjkuNSw5eiBNMjIsMS43djUuOEMyMiw3LjgsMjIuMiw4LDIyLjUsOGg1LjhMMjIsMS43eiIvPjwvZz48Zz48cmVjdCB4PSI3IiB5PSI4IiBjbGFzcz0ic3Q2IiB3aWR0aD0iMTMiIGhlaWdodD0iMiIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3Q2IiBwb2ludHM9IjEzLjUsMjkgNywyMyAyMCwyMyAiLz48L2c+PGc+PHJlY3QgeD0iNyIgeT0iMTMiIGNsYXNzPSJzdDYiIHdpZHRoPSIxMyIgaGVpZ2h0PSIyIi8+PC9nPjxnPjxyZWN0IHg9IjciIHk9IjE4IiBjbGFzcz0ic3Q2IiB3aWR0aD0iMTMiIGhlaWdodD0iMiIvPjwvZz48L2c+PC9zdmc+');
    }

    .e-fe-txt {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDE4IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MTkiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MjAiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDE5IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxyZWN0IHg9IjciIHk9IjIzIiBjbGFzcz0ic3Q2IiB3aWR0aD0iMTgiIGhlaWdodD0iMiIvPjwvZz48Zz48cmVjdCB4PSI3IiB5PSIxNyIgY2xhc3M9InN0NiIgd2lkdGg9IjE4IiBoZWlnaHQ9IjIiLz48L2c+PGc+PHJlY3QgeD0iNyIgeT0iMTEiIGNsYXNzPSJzdDYiIHdpZHRoPSIxMSIgaGVpZ2h0PSIyIi8+PC9nPjwvc3ZnPg==');
    }

    .e-fe-music {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik0yMS41LDAuNWgtMTdjLTEuMSwwLTIsMC45LTIsMnYyN2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi0yMUwyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3QyMSIgZD0iTTI3LjUsMzJoLTIzQzMuMSwzMiwyLDMwLjksMiwyOS41di0yN0MyLDEuMSwzLjEsMCw0LjUsMGgxNy4yTDMwLDguM3YyMS4yQzMwLDMwLjksMjguOSwzMiwyNy41LDMyeiBNNC41LDFDMy43LDEsMywxLjcsMywyLjV2MjdDMywzMC4zLDMuNywzMSw0LjUsMzFoMjNjMC44LDAsMS41LTAuNywxLjUtMS41VjguN0wyMS4zLDFINC41eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q1IiBkPSJNMjEuNSwwLjV2N2MwLDAuNiwwLjQsMSwxLDFoN0wyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3QyMSIgZD0iTTI5LjUsOWgtN0MyMS43LDksMjEsOC4zLDIxLDcuNXYtN2MwLTAuMiwwLjEtMC40LDAuMy0wLjVjMC4yLTAuMSwwLjQsMCwwLjUsMC4xbDgsOEMzMCw4LjMsMzAsOC41LDMwLDguN0MyOS45LDguOSwyOS43LDksMjkuNSw5eiBNMjIsMS43djUuOEMyMiw3LjgsMjIuMiw4LDIyLjUsOGg1LjhMMjIsMS43eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMTIsMTQuOXY3LjZjLTAuNi0wLjUtMS40LTAuNy0yLjMtMC40Yy0wLjgsMC4yLTEuNCwwLjktMS42LDEuN2MtMC41LDEuOCwxLDMuNSwyLjgsMy4yYzEuMi0wLjIsMi4xLTEuNCwyLjEtMi42bDAtNi40bDEwLTEuOXY0LjNjLTAuNi0wLjUtMS40LTAuNy0yLjMtMC40Yy0wLjgsMC4yLTEuNCwwLjktMS42LDEuN2MtMC41LDEuOCwxLDMuNSwyLjgsMy4yYzEuMi0wLjIsMi4xLTEuNCwyLjEtMi42bDAtOS4zYzAtMC42LTAuNi0xLjEtMS4yLTFsLTEwLDEuOUMxMi4zLDE0LDEyLDE0LjQsMTIsMTQuOXoiLz48L2c+PC9zdmc+');
    }

    .e-fe-video {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMS41LDAuNWgtMTdjLTEuMSwwLTIsMC45LTIsMnYyN2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi0yMUwyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3QyMiIgZD0iTTI3LjUsMzJoLTIzQzMuMSwzMiwyLDMwLjksMiwyOS41di0yN0MyLDEuMSwzLjEsMCw0LjUsMGgxNy4yTDMwLDguM3YyMS4yQzMwLDMwLjksMjguOSwzMiwyNy41LDMyeiBNNC41LDFDMy43LDEsMywxLjcsMywyLjV2MjdDMywzMC4zLDMuNywzMSw0LjUsMzFoMjNjMC44LDAsMS41LTAuNywxLjUtMS41VjguN0wyMS4zLDFINC41eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3QyIiBkPSJNMjEuNSwwLjV2N2MwLDAuNiwwLjQsMSwxLDFoN0wyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3QyMiIgZD0iTTI5LjUsOWgtN0MyMS43LDksMjEsOC4zLDIxLDcuNXYtN2MwLTAuMiwwLjEtMC40LDAuMy0wLjVjMC4yLTAuMSwwLjQsMCwwLjUsMC4xbDgsOEMzMCw4LjMsMzAsOC41LDMwLDguN0MyOS45LDguOSwyOS43LDksMjkuNSw5eiBNMjIsMS43djUuOEMyMiw3LjgsMjIuMiw4LDIyLjUsOGg1LjhMMjIsMS43eiIvPjwvZz48Zz48cG9seWdvbiBjbGFzcz0ic3Q2IiBwb2ludHM9IjE1LDE2LjUgMTksMjAgMTUsMjMuNSAiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0NiIgZD0iTTIyLDI3SDEwYy0xLjcsMC0zLTEuMy0zLTN2LThjMC0xLjcsMS4zLTMsMy0zaDEyYzEuNywwLDMsMS4zLDMsM3Y4QzI1LDI1LjcsMjMuNywyNywyMiwyN3ogTTEwLDE1Yy0wLjYsMC0xLDAuNC0xLDF2OGMwLDAuNiwwLjQsMSwxLDFoMTJjMC42LDAsMS0wLjQsMS0xdi04YzAtMC42LTAuNC0xLTEtMUgxMHoiLz48L2c+PC9nPjwvc3ZnPg==');
    }

    .e-fe-js {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDI2IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MjciIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MjgiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDI3IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xNS4xLDIxYzAsMC45LTAuMiwxLjYtMC42LDEuOWMtMC40LDAuNC0xLjEsMC42LTEuOSwwLjZjLTAuNSwwLTAuOC0wLjEtMS4xLTAuMmMtMC4zLTAuMS0wLjUtMC4zLTAuNy0wLjVzLTAuMy0wLjUtMC40LTAuOGMtMC4xLTAuMy0wLjEtMC42LTAuMS0xdi0wLjRoMS42djAuM2MwLDAuNSwwLDAuOCwwLjIsMWMwLjEsMC4yLDAuMywwLjMsMC42LDAuM2MwLjMsMCwwLjUtMC4xLDAuNi0wLjNjMC4xLTAuMiwwLjEtMC42LDAuMS0xdi02LjFoMS43VjIxeiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xNy43LDIxYzAsMC4yLDAsMC40LDAsMC41czAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuM2MwLjEsMC4xLDAuMywwLjEsMC42LDAuMWMwLjMsMCwwLjUtMC4xLDAuNy0wLjNzMC4zLTAuNCwwLjMtMC44YzAtMC4yLDAtMC40LTAuMS0wLjVzLTAuMS0wLjMtMC4zLTAuNGMtMC4xLTAuMS0wLjMtMC4yLTAuNS0wLjNjLTAuMi0wLjEtMC40LTAuMi0wLjctMC4zYy0wLjQtMC4xLTAuNy0wLjMtMS0wLjRzLTAuNS0wLjMtMC43LTAuNWMtMC4yLTAuMi0wLjMtMC40LTAuNC0wLjdTMTYsMTcuNSwxNiwxNy4yYzAtMC44LDAuMi0xLjUsMC43LTEuOXMxLjEtMC42LDEuOS0wLjZjMC40LDAsMC43LDAsMS4xLDAuMWMwLjMsMC4xLDAuNiwwLjIsMC44LDAuNGMwLjIsMC4yLDAuNCwwLjQsMC42LDAuN2MwLjEsMC4zLDAuMiwwLjYsMC4yLDF2MC4yaC0xLjdjMC0wLjQtMC4xLTAuNy0wLjItMC45Yy0wLjEtMC4yLTAuNC0wLjMtMC43LTAuM2MtMC4yLDAtMC40LDAtMC41LDAuMVMxOCwxNi4xLDE4LDE2LjJjLTAuMSwwLjEtMC4xLDAuMi0wLjIsMC4zYzAsMC4xLDAsMC4yLDAsMC40YzAsMC4zLDAuMSwwLjUsMC4yLDAuN2MwLjEsMC4yLDAuNCwwLjMsMC43LDAuNWwxLjMsMC42YzAuMywwLjEsMC42LDAuMywwLjgsMC40czAuNCwwLjMsMC41LDAuNXMwLjIsMC40LDAuMywwLjZjMCwwLjIsMC4xLDAuNSwwLjEsMC43YzAsMC45LTAuMywxLjYtMC44LDJjLTAuNSwwLjQtMS4zLDAuNi0yLjIsMC42Yy0xLDAtMS43LTAuMi0yLjEtMC42Yy0wLjQtMC40LTAuNi0xLTAuNi0xLjh2LTAuM2gxLjdWMjF6Ii8+PC9nPjwvZz48L3N2Zz4=');
    }

    .e-fe-css {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDI5IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MzAiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MzEiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDMwIiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xMC43LDE2LjNjLTAuMS0wLjMtMC40LTAuNC0wLjgtMC40Yy0wLjIsMC0wLjQsMC4xLTAuNSwwLjJjLTAuMSwwLjEtMC4yLDAuMy0wLjMsMC42cy0wLjEsMC42LTAuMiwxYzAsMC40LDAsMC45LDAsMS41YzAsMC42LDAsMS4yLDAuMSwxLjZzMC4xLDAuNywwLjIsMC45czAuMiwwLjQsMC4zLDAuNGMwLjEsMC4xLDAuMywwLjEsMC41LDAuMWMwLjIsMCwwLjMsMCwwLjQtMC4xYzAuMS0wLjEsMC4yLTAuMiwwLjMtMC4zYzAuMS0wLjIsMC4yLTAuNCwwLjItMC43YzAuMS0wLjMsMC4xLTAuNywwLjEtMS4xaDEuN2MwLDAuNSwwLDAuOS0wLjEsMS4zcy0wLjIsMC44LTAuNCwxLjFjLTAuMiwwLjMtMC41LDAuNi0wLjgsMC43Yy0wLjQsMC4yLTAuOCwwLjMtMS40LDAuM2MtMC42LDAtMS4yLTAuMS0xLjUtMC4zYy0wLjQtMC4yLTAuNy0wLjUtMC45LTAuOXMtMC4zLTAuOS0wLjQtMS40Yy0wLjEtMC41LTAuMS0xLjEtMC4xLTEuOGMwLTAuNiwwLTEuMiwwLjEtMS44YzAuMS0wLjUsMC4yLTEsMC40LTEuNGMwLjItMC40LDAuNS0wLjcsMC45LTAuOWMwLjQtMC4yLDAuOS0wLjMsMS41LTAuM2MwLjYsMCwxLjEsMC4xLDEuNSwwLjNjMC40LDAuMiwwLjYsMC41LDAuOCwwLjhzMC4zLDAuNiwwLjMsMWMwLDAuNCwwLjEsMC43LDAuMSwxaC0xLjdDMTAuOSwxNy4xLDEwLjgsMTYuNiwxMC43LDE2LjN6Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTE1LjEsMjFjMCwwLjIsMCwwLjQsMCwwLjVzMC4xLDAuMywwLjIsMC40YzAuMSwwLjEsMC4yLDAuMiwwLjQsMC4zYzAuMSwwLjEsMC4zLDAuMSwwLjYsMC4xYzAuMywwLDAuNS0wLjEsMC43LTAuM3MwLjMtMC40LDAuMy0wLjhjMC0wLjIsMC0wLjQtMC4xLTAuNXMtMC4xLTAuMy0wLjMtMC40Yy0wLjEtMC4xLTAuMy0wLjItMC41LTAuM2MtMC4yLTAuMS0wLjQtMC4yLTAuNy0wLjNjLTAuNC0wLjEtMC43LTAuMy0xLTAuNFMxNC4yLDE5LDE0LDE4LjhjLTAuMi0wLjItMC4zLTAuNC0wLjQtMC43cy0wLjEtMC42LTAuMS0wLjljMC0wLjgsMC4yLTEuNSwwLjctMS45czEuMS0wLjYsMS45LTAuNmMwLjQsMCwwLjcsMCwxLjEsMC4xYzAuMywwLjEsMC42LDAuMiwwLjgsMC40YzAuMiwwLjIsMC40LDAuNCwwLjYsMC43YzAuMSwwLjMsMC4yLDAuNiwwLjIsMXYwLjJoLTEuN2MwLTAuNC0wLjEtMC43LTAuMi0wLjljLTAuMS0wLjItMC40LTAuMy0wLjctMC4zYy0wLjIsMC0wLjQsMC0wLjUsMC4xcy0wLjIsMC4xLTAuMywwLjJjLTAuMSwwLjEtMC4xLDAuMi0wLjIsMC4zYzAsMC4xLDAsMC4yLDAsMC40YzAsMC4zLDAuMSwwLjUsMC4yLDAuN2MwLjEsMC4yLDAuNCwwLjMsMC43LDAuNWwxLjMsMC42YzAuMywwLjEsMC42LDAuMywwLjgsMC40czAuNCwwLjMsMC41LDAuNVMxOSwyMCwxOSwyMC4yYzAsMC4yLDAuMSwwLjUsMC4xLDAuN2MwLDAuOS0wLjMsMS42LTAuOCwyYy0wLjUsMC40LTEuMywwLjYtMi4yLDAuNmMtMSwwLTEuNy0wLjItMi4xLTAuNmMtMC40LTAuNC0wLjYtMS0wLjYtMS44di0wLjNoMS43VjIxeiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yMS4zLDIxYzAsMC4yLDAsMC40LDAsMC41czAuMSwwLjMsMC4yLDAuNGMwLjEsMC4xLDAuMiwwLjIsMC40LDAuM2MwLjEsMC4xLDAuMywwLjEsMC42LDAuMWMwLjMsMCwwLjUtMC4xLDAuNy0wLjNzMC4zLTAuNCwwLjMtMC44YzAtMC4yLDAtMC40LTAuMS0wLjVzLTAuMS0wLjMtMC4zLTAuNGMtMC4xLTAuMS0wLjMtMC4yLTAuNS0wLjNjLTAuMi0wLjEtMC40LTAuMi0wLjctMC4zYy0wLjQtMC4xLTAuNy0wLjMtMS0wLjRzLTAuNS0wLjMtMC43LTAuNWMtMC4yLTAuMi0wLjMtMC40LTAuNC0wLjdzLTAuMS0wLjYtMC4xLTAuOWMwLTAuOCwwLjItMS41LDAuNy0xLjlzMS4xLTAuNiwxLjktMC42YzAuNCwwLDAuNywwLDEuMSwwLjFjMC4zLDAuMSwwLjYsMC4yLDAuOCwwLjRjMC4yLDAuMiwwLjQsMC40LDAuNiwwLjdjMC4xLDAuMywwLjIsMC42LDAuMiwxdjAuMmgtMS43YzAtMC40LTAuMS0wLjctMC4yLTAuOWMtMC4xLTAuMi0wLjQtMC4zLTAuNy0wLjNjLTAuMiwwLTAuNCwwLTAuNSwwLjFzLTAuMiwwLjEtMC4zLDAuMmMtMC4xLDAuMS0wLjEsMC4yLTAuMiwwLjNjMCwwLjEsMCwwLjIsMCwwLjRjMCwwLjMsMC4xLDAuNSwwLjIsMC43YzAuMSwwLjIsMC40LDAuMywwLjcsMC41bDEuMywwLjZjMC4zLDAuMSwwLjYsMC4zLDAuOCwwLjRzMC40LDAuMywwLjUsMC41czAuMiwwLjQsMC4zLDAuNmMwLDAuMiwwLjEsMC41LDAuMSwwLjdjMCwwLjktMC4zLDEuNi0wLjgsMmMtMC41LDAuNC0xLjMsMC42LTIuMiwwLjZjLTEsMC0xLjctMC4yLTIuMS0wLjZjLTAuNC0wLjQtMC42LTEtMC42LTEuOHYtMC4zaDEuN1YyMXoiLz48L2c+PC9zdmc+');
    }

    .e-fe-html {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDMyIiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MzMiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MzQiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDMzIiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yMC4xLDI0LjNsLTEuMy0xLjVsNS4xLTQuMmwtNS4xLTQuMmwxLjMtMS41bDYsNWMwLjIsMC4yLDAuNCwwLjUsMC40LDAuOHMtMC4xLDAuNi0wLjQsMC44TDIwLjEsMjQuM3oiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0NiIgZD0iTTEwLjgsMjQuM2wtNi01Yy0wLjItMC4yLTAuNC0wLjUtMC40LTAuOHMwLjEtMC42LDAuNC0wLjhsNi01bDEuMywxLjVMNywxOC41bDUuMSw0LjJMMTAuOCwyNC4zeiIvPjwvZz48Zz48cmVjdCB4PSI3LjMiIHk9IjE3LjUiIHRyYW5zZm9ybT0ibWF0cml4KDAuMjQyMiAtMC45NzAyIDAuOTcwMiAwLjI0MjIgLTYuMjAzMiAyOS4wNTgpIiBjbGFzcz0ic3Q2IiB3aWR0aD0iMTYuNSIgaGVpZ2h0PSIyIi8+PC9nPjwvc3ZnPg==');
    }

    .e-fe-php {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDM1IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MzYiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0MzciIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDM2IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xMC4xLDE0LjhjMC40LDAsMC44LDAuMSwxLjEsMC4yYzAuMywwLjEsMC41LDAuMywwLjcsMC42YzAuMiwwLjIsMC4zLDAuNSwwLjQsMC44YzAuMSwwLjMsMC4xLDAuNiwwLjEsMC45YzAsMC40LTAuMSwwLjgtMC4yLDEuMmMtMC4xLDAuMy0wLjMsMC42LTAuNiwwLjhjLTAuMiwwLjItMC41LDAuNC0wLjksMC41Yy0wLjMsMC4xLTAuNywwLjItMS4xLDAuMkg4Ljh2My40SDd2LTguNkgxMC4xeiBNOS41LDE4LjdjMC4zLDAsMC42LTAuMSwwLjgtMC4zczAuMy0wLjUsMC4zLTFjMC0wLjQtMC4xLTAuOC0wLjMtMWMtMC4yLTAuMi0wLjUtMC4zLTAuOS0wLjNIOC44djIuNkg5LjV6Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTE1LDE0Ljh2My4zaDJ2LTMuM2gxLjd2OC42SDE3di0zLjhoLTJ2My44aC0xLjd2LTguNkgxNXoiLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMjMsMTQuOGMwLjQsMCwwLjgsMC4xLDEuMSwwLjJjMC4zLDAuMSwwLjUsMC4zLDAuNywwLjZjMC4yLDAuMiwwLjMsMC41LDAuNCwwLjhjMC4xLDAuMywwLjEsMC42LDAuMSwwLjljMCwwLjQtMC4xLDAuOC0wLjIsMS4yYy0wLjEsMC4zLTAuMywwLjYtMC42LDAuOGMtMC4yLDAuMi0wLjUsMC40LTAuOSwwLjVDMjMuNCwxOS45LDIzLDIwLDIyLjYsMjBoLTAuOXYzLjRoLTEuN3YtOC42SDIzeiBNMjIuNCwxOC43YzAuMywwLDAuNi0wLjEsMC44LTAuM3MwLjMtMC41LDAuMy0xYzAtMC40LTAuMS0wLjgtMC4zLTFjLTAuMi0wLjItMC41LTAuMy0wLjktMC4zaC0wLjd2Mi42SDIyLjR6Ii8+PC9nPjwvc3ZnPg==');
    }

    .e-fe-exe {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDM4IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0MzkiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0NDAiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDM5IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xMS44LDE2LjJIOC44djJoMi45djEuNEg4LjhWMjJoMy4ydjEuNEg3di04LjZoNC44VjE2LjJ6Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTE0LjQsMTQuOGwxLjEsMi44bDEuMS0yLjhoMS45bC0yLDQuMmwyLjEsNC4zaC0xLjlsLTEuMi0yLjlsLTEuMiwyLjloLTEuOWwyLjEtNC4zbC0yLTQuMkgxNC40eiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yNCwxNi4ySDIxdjJoMi45djEuNEgyMVYyMmgzLjJ2MS40aC00Ljl2LTguNkgyNFYxNi4yeiIvPjwvZz48L3N2Zz4=');
    }

    .e-fe-msi {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDQxIiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0NDIiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0NDMiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDQyIiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik05LjYsMTQuOGwxLjIsNmgwbDEuMi02aDIuNnY4LjZoLTEuNnYtNi44aDBsLTEuNSw2LjhoLTEuM2wtMS41LTYuOGgwdjYuOEg3LjF2LTguNkg5LjZ6Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTE3LjMsMjFjMCwwLjIsMCwwLjQsMCwwLjVzMC4xLDAuMywwLjIsMC40YzAuMSwwLjEsMC4yLDAuMiwwLjQsMC4zYzAuMSwwLjEsMC4zLDAuMSwwLjYsMC4xYzAuMywwLDAuNS0wLjEsMC43LTAuM3MwLjMtMC40LDAuMy0wLjhjMC0wLjIsMC0wLjQtMC4xLTAuNXMtMC4xLTAuMy0wLjMtMC40Yy0wLjEtMC4xLTAuMy0wLjItMC41LTAuM2MtMC4yLTAuMS0wLjQtMC4yLTAuNy0wLjNjLTAuNC0wLjEtMC43LTAuMy0xLTAuNHMtMC41LTAuMy0wLjctMC41Yy0wLjItMC4yLTAuMy0wLjQtMC40LTAuN3MtMC4xLTAuNi0wLjEtMC45YzAtMC44LDAuMi0xLjUsMC43LTEuOXMxLjEtMC42LDEuOS0wLjZjMC40LDAsMC43LDAsMS4xLDAuMWMwLjMsMC4xLDAuNiwwLjIsMC44LDAuNGMwLjIsMC4yLDAuNCwwLjQsMC42LDAuN2MwLjEsMC4zLDAuMiwwLjYsMC4yLDF2MC4yaC0xLjdjMC0wLjQtMC4xLTAuNy0wLjItMC45Yy0wLjEtMC4yLTAuNC0wLjMtMC43LTAuM2MtMC4yLDAtMC40LDAtMC41LDAuMXMtMC4yLDAuMS0wLjMsMC4yYy0wLjEsMC4xLTAuMSwwLjItMC4yLDAuM2MwLDAuMSwwLDAuMiwwLDAuNGMwLDAuMywwLjEsMC41LDAuMiwwLjdjMC4xLDAuMiwwLjQsMC4zLDAuNywwLjVsMS4zLDAuNmMwLjMsMC4xLDAuNiwwLjMsMC44LDAuNHMwLjQsMC4zLDAuNSwwLjVzMC4yLDAuNCwwLjMsMC42YzAsMC4yLDAuMSwwLjUsMC4xLDAuN2MwLDAuOS0wLjMsMS42LTAuOCwyYy0wLjUsMC40LTEuMywwLjYtMi4yLDAuNmMtMSwwLTEuNy0wLjItMi4xLTAuNmMtMC40LTAuNC0wLjYtMS0wLjYtMS44di0wLjNoMS43VjIxeiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yMi4yLDE0LjhIMjR2OC42aC0xLjdWMTQuOHoiLz48L2c+PC9zdmc+');
    }

    .e-fe-unknown {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDQ0IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0NDUiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0NDYiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDQ1IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDYiIHBvaW50cz0iMTcuNSwyMiAxNC41LDIyIDE0LDEwIDE4LDEwICIvPjwvZz48Zz48Y2lyY2xlIGNsYXNzPSJzdDYiIGN4PSIxNiIgY3k9IjI2IiByPSIyIi8+PC9nPjwvZz48L3N2Zz4=');
    }

    .e-fe-rtf {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDQ3IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0NCIgZD0iTTI3LjUsMzJoLTIzQzMuMSwzMiwyLDMwLjksMiwyOS41di0yN0MyLDEuMSwzLjEsMCw0LjUsMGgxNy4yTDMwLDguM3YyMS4yQzMwLDMwLjksMjguOSwzMiwyNy41LDMyeiBNNC41LDFDMy43LDEsMywxLjcsMywyLjV2MjdDMywzMC4zLDMuNywzMSw0LjUsMzFoMjNjMC44LDAsMS41LTAuNywxLjUtMS41VjguN0wyMS4zLDFINC41eiIvPjwvZz48Zz48cGF0aCBjbGFzcz0ic3Q1IiBkPSJNMjEuNSwwLjV2N2MwLDAuNiwwLjQsMSwxLDFoN0wyMS41LDAuNXoiLz48cGF0aCBjbGFzcz0ic3Q0IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xMS4yLDE0LjhjMC43LDAsMS4zLDAuMiwxLjcsMC41YzAuNCwwLjQsMC42LDAuOSwwLjYsMS43YzAsMC42LTAuMSwxLTAuMywxLjRjLTAuMiwwLjQtMC42LDAuNi0xLjEsMC43djBjMC40LDAuMSwwLjcsMC4yLDAuOSwwLjRjMC4yLDAuMiwwLjMsMC42LDAuNCwxYzAsMC4yLDAsMC4zLDAsMC41YzAsMC4yLDAsMC40LDAsMC42YzAsMC41LDAsMC44LDAuMSwxYzAsMC4yLDAuMiwwLjQsMC4zLDAuNXYwLjFIMTJjLTAuMS0wLjEtMC4xLTAuMy0wLjItMC40YzAtMC4yLDAtMC4zLDAtMC41bDAtMS42YzAtMC4zLTAuMS0wLjYtMC4zLTAuOGMtMC4yLTAuMi0wLjQtMC4zLTAuOC0wLjNIOS44djMuNkg4di04LjZIMTEuMnogTTEwLjUsMTguNmMwLjQsMCwwLjctMC4xLDEtMC4zYzAuMi0wLjIsMC4zLTAuNSwwLjMtMWMwLTAuOC0wLjQtMS4yLTEuMi0xLjJIOS44djIuNUgxMC41eiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0xOS41LDE2LjJoLTEuOXY3LjJoLTEuN3YtNy4ySDE0di0xLjRoNS41VjE2LjJ6Ii8+PHBhdGggY2xhc3M9InN0NiIgZD0iTTI1LDE0Ljh2MS40SDIydjJoMi45djEuNEgyMnYzLjdoLTEuN3YtOC42SDI1eiIvPjwvZz48L3N2Zz4=');
    }

    .e-fe-xml {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDQ4IiBkPSJNMjEuNSwwLjVoLTE3Yy0xLjEsMC0yLDAuOS0yLDJ2MjdjMCwxLjEsMC45LDIsMiwyaDIzYzEuMSwwLDItMC45LDItMnYtMjFMMjEuNSwwLjV6Ii8+PHBhdGggY2xhc3M9InN0NDkiIGQ9Ik0yNy41LDMyaC0yM0MzLjEsMzIsMiwzMC45LDIsMjkuNXYtMjdDMiwxLjEsMy4xLDAsNC41LDBoMTcuMkwzMCw4LjN2MjEuMkMzMCwzMC45LDI4LjksMzIsMjcuNSwzMnogTTQuNSwxQzMuNywxLDMsMS43LDMsMi41djI3QzMsMzAuMywzLjcsMzEsNC41LDMxaDIzYzAuOCwwLDEuNS0wLjcsMS41LTEuNVY4LjdMMjEuMywxSDQuNXoiLz48L2c+PGc+PHBhdGggY2xhc3M9InN0NTAiIGQ9Ik0yMS41LDAuNXY3YzAsMC42LDAuNCwxLDEsMWg3TDIxLjUsMC41eiIvPjxwYXRoIGNsYXNzPSJzdDQ5IiBkPSJNMjkuNSw5aC03QzIxLjcsOSwyMSw4LjMsMjEsNy41di03YzAtMC4yLDAuMS0wLjQsMC4zLTAuNWMwLjItMC4xLDAuNCwwLDAuNSwwLjFsOCw4QzMwLDguMywzMCw4LjUsMzAsOC43QzI5LjksOC45LDI5LjcsOSwyOS41LDl6IE0yMiwxLjd2NS44QzIyLDcuOCwyMi4yLDgsMjIuNSw4aDUuOEwyMiwxLjd6Ii8+PC9nPjxnPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik03LjcsMTQuOGwxLjEsMi44bDEuMS0yLjhoMS45bC0yLDQuMmwyLjEsNC4zSDEwbC0xLjItMi45bC0xLjIsMi45SDUuNkw3LjgsMTlsLTItNC4ySDcuN3oiLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNMTUuMiwxNC44bDEuMiw2aDBsMS4yLTZoMi42djguNmgtMS42di02LjhoMGwtMS41LDYuOGgtMS4zbC0xLjUtNi44aDB2Ni44aC0xLjZ2LTguNkgxNS4yeiIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik0yMS41LDE0LjhoMS43VjIyaDMuMXYxLjRoLTQuOFYxNC44eiIvPjwvZz48L3N2Zz4=');
    }

    .e-fe-folder {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGOTI5Mjt9LnN0MXtmaWxsOiNFODdFN0U7fS5zdDJ7ZmlsbDojRkZDM0MzO30uc3Qze2ZpbGw6IzkxRDRGRTt9LnN0NHtmaWxsOiM2M0E3RDM7fS5zdDV7ZmlsbDojQzFFN0ZGO30uc3Q2e2ZpbGw6I0ZGRkZGRjt9LnN0N3tmaWxsOiM4M0Q2Qjk7fS5zdDh7ZmlsbDojNDZDNjhDO30uc3Q5e2ZpbGw6I0JCRThEODt9LnN0MTB7ZmlsbDojRkVCMTdEO30uc3QxMXtmaWxsOiNERDk2NjY7fS5zdDEye2ZpbGw6I0ZFRDRCNzt9LnN0MTN7ZmlsbDojRjJBMkEyO30uc3QxNHtmaWxsOiNGMUM1QzU7fS5zdDE1e2ZpbGw6I0RCQjY2Mzt9LnN0MTZ7ZmlsbDojQ0VBMTUxO30uc3QxN3tmaWxsOiNFQkQ3QTk7fS5zdDE4e2ZpbGw6I0NFQ0VDRTt9LnN0MTl7ZmlsbDojQjdCN0I3O30uc3QyMHtmaWxsOiNFNEU0RTQ7fS5zdDIxe2ZpbGw6IzY1QUFEMTt9LnN0MjJ7ZmlsbDojRTU3QTdBO30uc3QyM3tmaWxsOiNFNkE2RTg7fS5zdDI0e2ZpbGw6I0Q2OEFENjt9LnN0MjV7ZmlsbDojRkZDQ0ZFO30uc3QyNntmaWxsOiM5OENFNUY7fS5zdDI3e2ZpbGw6IzhDQUYyQzt9LnN0Mjh7ZmlsbDojQzZFM0E3O30uc3QyOXtmaWxsOiNGRkI1Nzg7fS5zdDMwe2ZpbGw6I0VEOUY2NDt9LnN0MzF7ZmlsbDojRkZENkI1O30uc3QzMntmaWxsOiNGNEExRUY7fS5zdDMze2ZpbGw6I0REODdERDt9LnN0MzR7ZmlsbDojRjlDQkY2O30uc3QzNXtmaWxsOiNBOEEyRjQ7fS5zdDM2e2ZpbGw6Izg4ODVFODt9LnN0Mzd7ZmlsbDojQ0ZDQ0Y4O30uc3QzOHtmaWxsOiNCQ0JDQkM7fS5zdDM5e2ZpbGw6I0E4QThBODt9LnN0NDB7ZmlsbDojREFEQURBO30uc3Q0MXtmaWxsOiM3N0NDREI7fS5zdDQye2ZpbGw6IzREQkNDMTt9LnN0NDN7ZmlsbDojQjRFM0VCO30uc3Q0NHtmaWxsOiNGRkI3QTQ7fS5zdDQ1e2ZpbGw6I0Y2OUE3Qjt9LnN0NDZ7ZmlsbDojRkZEN0NEO30uc3Q0N3tmaWxsOiM3MUM4RjQ7fS5zdDQ4e2ZpbGw6IzhEQzk3Nzt9LnN0NDl7ZmlsbDojN0NBODUxO30uc3Q1MHtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik0yOS41LDI3LjVoLTI3Yy0xLjEsMC0yLTAuOS0yLTJ2LTE5YzAtMS4xLDAuOS0yLDItMmgxMC40bDMuNSwzLjFoMTMuMmMxLjEsMCwyLDAuOSwyLDJ2MTUuOUMzMS41LDI2LjYsMzAuNiwyNy41LDI5LjUsMjcuNXoiLz48cGF0aCBjbGFzcz0ic3Q0IiBkPSJNMjkuNSwyOGgtMjdDMS4xLDI4LDAsMjYuOSwwLDI1LjV2LTE5QzAsNS4xLDEuMSw0LDIuNSw0aDEwLjZsMy41LDMuMWgxM2MxLjQsMCwyLjUsMS4xLDIuNSwyLjV2MTUuOUMzMiwyNi45LDMwLjksMjgsMjkuNSwyOHogTTIuNSw1QzEuNyw1LDEsNS43LDEsNi41djE5QzEsMjYuMywxLjcsMjcsMi41LDI3aDI3YzAuOCwwLDEuNS0wLjcsMS41LTEuNVY5LjZjMC0wLjgtMC43LTEuNS0xLjUtMS41SDE2LjJMMTIuNyw1SDIuNXoiLz48L2c+PC9zdmc+');
    }

    .e-fe-locked {

      & > .e-text-content,
      & > .e-fe-grid-icon {

        .e-fe-folder {
          background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzREQkNDMTt9LnN0MXtmaWxsOiNGRjNFM0U7fS5zdDJ7ZmlsbDojMDA5MEQ4O30uc3Qze2ZpbGw6I0MzNzFCRDt9LnN0NHtmaWxsOiNGRjg2MkM7fS5zdDV7ZmlsbDojNzM3MUNDO30uc3Q2e2ZpbGw6IzRCNDg0Qzt9LnN0N3tmaWxsOiMyMjc5NEE7fS5zdDh7ZmlsbDojODJCQjIyO30uc3Q5e2ZpbGw6I0FBQUFBQTt9LnN0MTB7ZmlsbDojOTk5OTk5O30uc3QxMXtmaWxsOiM4MTgxODE7fS5zdDEye2ZpbGw6I0YzRjNGMzt9LnN0MTN7ZmlsbDojRkZGRkZGO30uc3QxNHtmaWxsOiNFQUVBRUE7fS5zdDE1e2ZpbGw6bm9uZTtzdHJva2U6Izk0OTQ5NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MTZ7ZmlsbDojMDI3OUQ3O30uc3QxN3tvcGFjaXR5OjAuNTtmaWxsOiM5NDk0OTQ7fS5zdDE4e2ZpbGw6bm9uZTtzdHJva2U6IzAyNzlENztzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MTl7ZmlsbDojQzhDOEM4O30uc3QyMHtmaWxsOiMwNDdBRDY7fS5zdDIxe2ZpbGw6I0ZGRkZGRjtzdHJva2U6Izk0OTQ5NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MjJ7ZmlsbDpub25lO3N0cm9rZTojQzhDOEM4O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QyM3tmaWxsOm5vbmU7c3Ryb2tlOiNDNUM1QzU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDI0e2ZpbGw6bm9uZTtzdHJva2U6I0QxNTczNztzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MjV7ZmlsbDojRDE1NzM3O30uc3QyNntmaWxsOm5vbmU7c3Ryb2tlOiNGRUZFRkU7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDI3e2ZpbGw6I0Y1QkE5RTt9LnN0Mjh7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QyOXtmaWxsOiNGRUZFRkU7fS5zdDMwe2ZpbGw6IzM4NjJBMTt9LnN0MzF7ZmlsbDpub25lO3N0cm9rZTojRDE1NzM3O3N0cm9rZS13aWR0aDo0O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QzMntmaWxsOiMyQzdBNEY7fS5zdDMze2ZpbGw6bm9uZTtzdHJva2U6I0ZFRkVGRTtzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MzR7ZmlsbDojRkZGRkZGO3N0cm9rZTojQzhDOEM4O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QzNXtmaWxsOm5vbmU7c3Ryb2tlOiM2RUFGREY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDM2e2ZpbGw6bm9uZTtzdHJva2U6Izk5OTk5OTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0Mzd7ZmlsbDojNkFCMEU1O30uc3QzOHtmaWxsOiNDNUM1QzU7fS5zdDM5e2ZpbGw6I0ZGRkZGRjtzdHJva2U6Izk5OTk5OTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0NDB7ZmlsbDpub25lO3N0cm9rZTojRjVCQjlFO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q0MXtmaWxsOiM4NkJFQjc7fS5zdDQye2ZpbGw6IzZFQUZERjt9LnN0NDN7ZmlsbDojNkJCMEU1O30uc3Q0NHtmaWxsOm5vbmU7c3Ryb2tlOiM2QUFGRTU7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDQ1e2ZpbGw6IzZBQUZFNTt9LnN0NDZ7ZmlsbDojMDA3OEQ3O30uc3Q0N3tmaWxsOiNGRjkyOTI7fS5zdDQ4e2ZpbGw6I0U4N0U3RTt9LnN0NDl7ZmlsbDojRkZDM0MzO30uc3Q1MHtmaWxsOiM5MUQ0RkU7fS5zdDUxe2ZpbGw6IzYzQTdEMzt9LnN0NTJ7ZmlsbDojQzFFN0ZGO30uc3Q1M3tmaWxsOiM4M0Q2Qjk7fS5zdDU0e2ZpbGw6IzQ2QzY4Qzt9LnN0NTV7ZmlsbDojQkJFOEQ4O30uc3Q1NntmaWxsOiNGRUIxN0Q7fS5zdDU3e2ZpbGw6I0REOTY2Njt9LnN0NTh7ZmlsbDojRkVENEI3O30uc3Q1OXtmaWxsOiNGMkEyQTI7fS5zdDYwe2ZpbGw6I0YxQzVDNTt9LnN0NjF7ZmlsbDojREJCNjYzO30uc3Q2MntmaWxsOiNDRUExNTE7fS5zdDYze2ZpbGw6I0VCRDdBOTt9LnN0NjR7ZmlsbDojQ0VDRUNFO30uc3Q2NXtmaWxsOiNCN0I3Qjc7fS5zdDY2e2ZpbGw6I0U0RTRFNDt9LnN0Njd7ZmlsbDojNjVBQUQxO30uc3Q2OHtmaWxsOiNFNTdBN0E7fS5zdDY5e2ZpbGw6I0U2QTZFODt9LnN0NzB7ZmlsbDojRDY4QUQ2O30uc3Q3MXtmaWxsOiNGRkNDRkU7fS5zdDcye2ZpbGw6Izk4Q0U1Rjt9LnN0NzN7ZmlsbDojOENBRjJDO30uc3Q3NHtmaWxsOiNDNkUzQTc7fS5zdDc1e2ZpbGw6I0ZGQjU3ODt9LnN0NzZ7ZmlsbDojRUQ5RjY0O30uc3Q3N3tmaWxsOiNGRkQ2QjU7fS5zdDc4e2ZpbGw6I0Y0QTFFRjt9LnN0Nzl7ZmlsbDojREQ4N0REO30uc3Q4MHtmaWxsOiNGOUNCRjY7fS5zdDgxe2ZpbGw6I0E4QTJGNDt9LnN0ODJ7ZmlsbDojODg4NUU4O30uc3Q4M3tmaWxsOiNDRkNDRjg7fS5zdDg0e2ZpbGw6I0JDQkNCQzt9LnN0ODV7ZmlsbDojQThBOEE4O30uc3Q4NntmaWxsOiNEQURBREE7fS5zdDg3e2ZpbGw6Izc3Q0NEQjt9LnN0ODh7ZmlsbDojQjRFM0VCO30uc3Q4OXtmaWxsOiNGRkI3QTQ7fS5zdDkwe2ZpbGw6I0Y2OUE3Qjt9LnN0OTF7ZmlsbDojRkZEN0NEO30uc3Q5MntmaWxsOiM3MUM4RjQ7fS5zdDkze2ZpbGw6IzhEQzk3Nzt9LnN0OTR7ZmlsbDojN0NBODUxO30uc3Q5NXtvcGFjaXR5OjAuNDU7ZmlsbDojRkZGRkZGO30uc3Q5NntmaWxsOm5vbmU7c3Ryb2tlOiM2QkIwRTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDk3e2ZpbGw6IzAwOEZFNzt9LnN0OTh7ZmlsbDojQTdEREZGO30uc3Q5OXtmaWxsOiMyRUI5ODg7fS5zdDEwMHtmaWxsOiM5MkVDQ0E7fS5zdDEwMXtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDEwMntmaWxsOiNGRDY2MDA7fS5zdDEwM3tmaWxsOiNGRkNEQUE7fS5zdDEwNHtmaWxsOiNGRkNDQ0I7fS5zdDEwNXtmaWxsOiNGMTAzMDA7fS5zdDEwNntmaWxsOiNFQ0VDRUM7fS5zdDEwN3tmaWxsOiNGMjlDMUY7fS5zdDEwOHtmaWxsOiNGRkVGQ0M7fS5zdDEwOXtmaWxsOiNEQ0RDRkY7fS5zdDExMHtmaWxsOiNENkQ2RDY7fS5zdDExMXtmaWxsOiNFOUZGQjg7fS5zdDExMntmaWxsOiNDNUVGRkY7fS5zdDExM3tmaWxsOiNDQUZGRTE7fS5zdDExNHtmaWxsOiNGRkNEQUI7fS5zdDExNXtmaWxsOiM4MjNBOUI7fS5zdDExNntmaWxsOiNFQ0JERkY7fS5zdDExN3tmaWxsOiNBRkVGRUQ7fS5zdDExOHtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QxMTl7ZmlsbDojOEY4RjhGO30uc3QxMjB7b3BhY2l0eTowLjQ1O30uc3QxMjF7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDozO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QxMjJ7ZmlsbDojOTFENUZGO30uc3QxMjN7ZmlsbDojMjY5RkU5O30uc3QxMjR7ZmlsbDojOTQ5NDk0O30uc3QxMjV7ZmlsbDojRjVCQjlFO30uc3QxMjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO30uc3QxMjd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNF8pO2ZpbGw6IzMwMzAzMDt9LnN0MTI4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzZfKTtmaWxsOm5vbmU7c3Ryb2tlOiM2MTYxNjE7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QxMjl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOF8pO30uc3QxMzB7b3BhY2l0eTowO2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwXyk7ZmlsbDojRkZFMkUyO30uc3QxMzF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTRfKTt9LnN0MTMye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2Xyk7ZmlsbDojMzAzMDMwO30uc3QxMzN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMThfKTtmaWxsOm5vbmU7c3Ryb2tlOiM2MTYxNjE7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDEzNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yMF8pO30uc3QxMzV7b3BhY2l0eTowLjc7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjJfKTtmaWxsOiNGRkZGRkY7fS5zdDEzNntvcGFjaXR5OjAuNDI7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjRfKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QxMzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjRfKTt9LnN0MTM4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI2Xyk7fS5zdDEzOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yOF8pO2ZpbGw6IzMwMzAzMDt9LnN0MTQwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMwXyk7ZmlsbDpub25lO3N0cm9rZTojNjE2MTYxO3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MTQxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMyXyk7fS5zdDE0MntvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF8zNF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTQze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM2Xyk7fS5zdDE0NHtvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF8zOF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTQ1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQyXyk7fS5zdDE0NntvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF80NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTQ3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ2Xyk7fS5zdDE0OHtvcGFjaXR5OjA7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDhfKTtmaWxsOiNGRkZGRkY7fS5zdDE0OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF81MF8pO30uc3QxNTB7b3BhY2l0eTowO2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUyXyk7ZmlsbDojRkZGRkZGO30uc3QxNTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTRfKTt9LnN0MTUye29wYWNpdHk6MC4xODtjbGlwLXBhdGg6dXJsKCNTVkdJRF81Nl8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTUze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU4Xyk7fS5zdDE1NHtvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF82MF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTU1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzYyXyk7fS5zdDE1NntvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF82NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTU3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY2Xyk7fS5zdDE1OHtvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF82OF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTU5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzcwXyk7fS5zdDE2MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF83Ml8pO30uc3QxNjF7b3BhY2l0eTowLjE7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzRfKTtmaWxsOiNGRkZGRkY7fS5zdDE2MntjbGlwLXBhdGg6dXJsKCNTVkdJRF83Nl8pO30uc3QxNjN7b3BhY2l0eTowLjc7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzhfKTtmaWxsOiNGRkZGRkY7fS5zdDE2NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF84Ml8pO30uc3QxNjV7b3BhY2l0eTowO2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg0Xyk7ZmlsbDojRkZGRkZGO30uc3QxNjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODZfKTt9LnN0MTY3e29wYWNpdHk6MC43O2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg4Xyk7ZmlsbDojRkZGRkZGO30uc3QxNjh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTJfKTt9LnN0MTY5e29wYWNpdHk6MDtjbGlwLXBhdGg6dXJsKCNTVkdJRF85NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTcwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk2Xyk7fS5zdDE3MXtvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF85OF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTcye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwMl8pO30uc3QxNzN7b3BhY2l0eTowO2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTc0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNl8pO30uc3QxNzV7b3BhY2l0eTowLjc7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA4Xyk7ZmlsbDojRkZGRkZGO30uc3QxNzZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTEyXyk7fS5zdDE3N3tvcGFjaXR5OjA7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE0Xyk7ZmlsbDojRkZGRkZGO30uc3QxNzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE2Xyk7fS5zdDE3OXtvcGFjaXR5OjAuNztjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMThfKTtmaWxsOiNGRkZGRkY7fS5zdDE4MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjJfKTt9LnN0MTgxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNF8pO2ZpbGw6I0UwRERERDt9LnN0MTgye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNl8pO30uc3QxODN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI4Xyk7ZmlsbDojRTBEREREO30uc3QxODR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMwXyk7fS5zdDE4NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzJfKTtmaWxsOiNFMEREREQ7fS5zdDE4NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzRfKTt9LnN0MTg3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNl8pO2ZpbGw6I0UwRERERDt9LnN0MTg4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzOF8pO30uc3QxODl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQwXyk7ZmlsbDojRTBEREREO30uc3QxOTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQyXyk7fS5zdDE5MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDRfKTtmaWxsOiNFMEREREQ7fS5zdDE5MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDZfKTt9LnN0MTkze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0OF8pO2ZpbGw6I0UwRERERDt9LnN0MTk0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MF8pO30uc3QxOTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTUyXyk7ZmlsbDojRTBEREREO30uc3QxOTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU0Xyk7fS5zdDE5N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTZfKTtmaWxsOiMyMTIxMjE7fS5zdDE5OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNThfKTt9LnN0MTk5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2MF8pO2ZpbGw6bm9uZTtzdHJva2U6IzYxNjE2MTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MjAwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2Ml8pO30uc3QyMDF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY0Xyk7ZmlsbDojRkZGRkZGO30uc3QyMDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY4Xyk7fS5zdDIwM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzBfKTtmaWxsOiNGRkZGRkY7fS5zdDIwNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzJfKTt9LnN0MjA1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MjA2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3Nl8pO30uc3QyMDd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc4Xyk7ZmlsbDojRkZGRkZGO30uc3QyMDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgwXyk7fS5zdDIwOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODJfKTtmaWxsOiNGRkZGRkY7fS5zdDIxMHtvcGFjaXR5OjAuMjQ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg0Xyk7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MjExe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4Nl8pO30uc3QyMTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg4Xyk7ZmlsbDojRkZGRkZGO30uc3QyMTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkwXyk7fS5zdDIxNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTJfKTtmaWxsOiMzMDMwMzA7fS5zdDIxNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTRfKTt9LnN0MjE2e29wYWNpdHk6MDtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTZfKTtmaWxsOiNEOEQ4RDg7fS5zdDIxN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOThfKTt9LnN0MjE4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzIwMF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MjE5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzIwMl8pO30uc3QyMjB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjA0Xyk7ZmlsbDojMzAzMDMwO30uc3QyMjF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjA4Xyk7fS5zdDIyMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8yMTBfKTtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30uc3QyMjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjEyXyk7fS5zdDIyNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yMTRfKTt9LnN0MjI1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzIxNl8pO2ZpbGw6I0UwRERERDt9LnN0MjI2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzIxOF8pO30uc3QyMjd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjIwXyk7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9LnN0MjI4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzIyMl8pO30uc3QyMjl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjI0Xyk7fS5zdDIzMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yMjZfKTtmaWxsOiNFMEREREQ7fS5zdDIzMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yMjhfKTt9LnN0MjMye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzIzMF8pO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fS5zdDIzM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8yMzJfKTt9LnN0MjM0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzIzNF8pO30uc3QyMzV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjM2Xyk7ZmlsbDojRTBEREREO30uc3QyMzZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjM4Xyk7fS5zdDIzN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8yNDBfKTtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30uc3QyMzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjQyXyk7fS5zdDIzOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yNDRfKTt9LnN0MjQwe29wYWNpdHk6MC44MjI4O2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI0Nl8pO2ZpbGw6I0ZGRkZGRjt9LnN0MjQxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI0OF8pO30uc3QyNDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjUwXyk7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9LnN0MjQze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI1Ml8pO30uc3QyNDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjU0Xyk7fS5zdDI0NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yNTZfKTtmaWxsOiNFMEREREQ7fS5zdDI0NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8yNThfKTt9LnN0MjQ3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI2MF8pO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fS5zdDI0OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yNjJfKTt9LnN0MjQ5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI2NF8pO30uc3QyNTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjY2Xyk7ZmlsbDojRTBEREREO30uc3QyNTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjY4Xyk7fS5zdDI1MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8yNzBfKTtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30uc3QyNTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjcyXyk7fS5zdDI1NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yNzRfKTt9LnN0MjU1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI3Nl8pO2ZpbGw6I0UwRERERDt9LnN0MjU2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI3OF8pO30uc3QyNTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjgwXyk7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9LnN0MjU4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI4Ml8pO30uc3QyNTl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjg0Xyk7fS5zdDI2MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yODZfKTtmaWxsOiNFMEREREQ7fS5zdDI2MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yODhfKTt9LnN0MjYye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI5MF8pO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fS5zdDI2M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8yOTJfKTt9LnN0MjY0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzI5NF8pO30uc3QyNjV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjk2Xyk7ZmlsbDojRTBEREREO30uc3QyNjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMjk4Xyk7fS5zdDI2N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMDBfKTtmaWxsOiNGRjg2MkM7fS5zdDI2OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMDJfKTt9LnN0MjY5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMwNF8pO2ZpbGw6I0ZGRkZGRjt9LnN0Mjcwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMwNl8pO30uc3QyNzF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzA4Xyk7ZmlsbDojRkZGRkZGO30uc3QyNzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzEwXyk7fS5zdDI3M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMTJfKTtmaWxsOiNGRkZGRkY7fS5zdDI3NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMTRfKTt9LnN0Mjc1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMxNl8pO2ZpbGw6I0ZGQ0RBQjt9LnN0Mjc2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMxOF8pO30uc3QyNzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzIwXyk7ZmlsbDojRkY4NjJDO30uc3QyNzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzIyXyk7fS5zdDI3OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMjRfKTtmaWxsOiNGRkZGRkY7fS5zdDI4MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMjZfKTt9LnN0Mjgxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMyOF8pO2ZpbGw6I0ZGRkZGRjt9LnN0Mjgye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzMzMF8pO30uc3QyODN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzMyXyk7ZmlsbDojRkZGRkZGO30uc3QyODR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzM0Xyk7fS5zdDI4NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMzZfKTtmaWxsOiNGRkNEQUI7fS5zdDI4NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8zMzhfKTt9LnN0Mjg3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM0MF8pO2ZpbGw6I0ZGODYyQzt9LnN0Mjg4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM0Ml8pO30uc3QyODl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzQ0Xyk7ZmlsbDojRkZGRkZGO30uc3QyOTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzQ2Xyk7fS5zdDI5MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zNDhfKTtmaWxsOiNGRkZGRkY7fS5zdDI5MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8zNTBfKTt9LnN0Mjkze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM1Ml8pO2ZpbGw6I0ZGRkZGRjt9LnN0Mjk0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM1NF8pO30uc3QyOTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzU2Xyk7ZmlsbDojRkZDREFCO30uc3QyOTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzU4Xyk7fS5zdDI5N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8zNjBfKTtmaWxsOiM0QjQ4NEM7fS5zdDI5OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zNjJfKTt9LnN0Mjk5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM2NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MzAwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM2Nl8pO30uc3QzMDF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzY4Xyk7ZmlsbDojRkZGRkZGO30uc3QzMDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzcwXyk7fS5zdDMwM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8zNzJfKTtmaWxsOiNGRkZGRkY7fS5zdDMwNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zNzRfKTt9LnN0MzA1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM3Nl8pO2ZpbGw6I0Q2RDZENjt9LnN0MzA2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM3OF8pO30uc3QzMDd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzgwXyk7ZmlsbDojMkVCOTg4O30uc3QzMDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzgyXyk7fS5zdDMwOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zODRfKTtmaWxsOiM5MkVDQ0E7fS5zdDMxMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zODZfKTt9LnN0MzExe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM4OF8pO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fS5zdDMxMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8zOTBfKTt9LnN0MzEze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzM5Ml8pO30uc3QzMTR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzk0Xyk7ZmlsbDojRkZGRkZGO30uc3QzMTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMzk2Xyk7fS5zdDMxNntjbGlwLXBhdGg6dXJsKCNTVkdJRF8zOThfKTtmaWxsOiNGRkZGRkY7fS5zdDMxN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80MDBfKTt9LnN0MzE4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQwMl8pO2ZpbGw6I0ZGRkZGRjt9LnN0MzE5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQwNF8pO30uc3QzMjB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDA2Xyk7ZmlsbDojRkY4NjJDO30uc3QzMjF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDA4Xyk7fS5zdDMyMntjbGlwLXBhdGg6dXJsKCNTVkdJRF80MTBfKTtmaWxsOiNGRkZGRkY7fS5zdDMyM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80MTJfKTt9LnN0MzI0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQxNF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MzI1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQxNl8pO30uc3QzMjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDE4Xyk7ZmlsbDojRkZGRkZGO30uc3QzMjd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDIwXyk7fS5zdDMyOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF80MjJfKTtmaWxsOiNBQUFBQUE7fS5zdDMyOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF80MjRfKTt9LnN0MzMwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQyNl8pO2ZpbGw6I0VDRUNFQzt9LnN0MzMxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQyOF8pO30uc3QzMzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDMwXyk7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9LnN0MzMze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQzMl8pO30uc3QzMzR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDM0Xyk7fS5zdDMzNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF80MzZfKTtmaWxsOiNGRkZGRkY7fS5zdDMzNntjbGlwLXBhdGg6dXJsKCNTVkdJRF80MzhfKTt9LnN0MzM3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ0MF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MzM4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ0Ml8pO30uc3QzMzl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDQ0Xyk7ZmlsbDojRkZGRkZGO30uc3QzNDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDQ2Xyk7fS5zdDM0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF80NDhfKTtmaWxsOiMwMDkwRDg7fS5zdDM0MntjbGlwLXBhdGg6dXJsKCNTVkdJRF80NTBfKTt9LnN0MzQze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ1Ml8pO2ZpbGw6I0ZGRkZGRjt9LnN0MzQ0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ1NF8pO30uc3QzNDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDU2Xyk7ZmlsbDojRkZGRkZGO30uc3QzNDZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDU4Xyk7fS5zdDM0N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80NjBfKTtmaWxsOiNGRkZGRkY7fS5zdDM0OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF80NjJfKTt9LnN0MzQ5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ2NF8pO2ZpbGw6I0M1RUZGRjt9LnN0MzUwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ2Nl8pO30uc3QzNTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDY4Xyk7ZmlsbDojMjI3OTRBO30uc3QzNTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDcwXyk7fS5zdDM1M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF80NzJfKTtmaWxsOiNGRkZGRkY7fS5zdDM1NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF80NzRfKTt9LnN0MzU1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ3Nl8pO2ZpbGw6I0ZGRkZGRjt9LnN0MzU2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ3OF8pO30uc3QzNTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDgwXyk7ZmlsbDojRkZGRkZGO30uc3QzNTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDgyXyk7fS5zdDM1OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF80ODRfKTtmaWxsOiNDQUZGRTE7fS5zdDM2MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF80ODZfKTt9LnN0MzYxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ4OF8pO2ZpbGw6I0YyOUMxRjt9LnN0MzYye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzQ5MF8pO30uc3QzNjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDkyXyk7ZmlsbDojRkZFRkNDO30uc3QzNjR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDk0Xyk7fS5zdDM2NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF80OTZfKTtlbmFibGUtYmFja2dyb3VuZDpuZXcgICAgO30uc3QzNjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNDk4Xyk7fS5zdDM2N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF81MDBfKTt9LnN0MzY4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUwMl8pO2ZpbGw6I0ZGRkZGRjt9LnN0MzY5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUwNF8pO30uc3QzNzB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTA2Xyk7ZmlsbDojRkZGRkZGO30uc3QzNzF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTA4Xyk7fS5zdDM3MntjbGlwLXBhdGg6dXJsKCNTVkdJRF81MTBfKTtmaWxsOiNGRkZGRkY7fS5zdDM3M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF81MTJfKTt9LnN0Mzc0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUxNF8pO2ZpbGw6I0ZGRkZGRjt9LnN0Mzc1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUxNl8pO30uc3QzNzZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTE4Xyk7ZmlsbDojRjEwMzAwO30uc3QzNzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTIwXyk7fS5zdDM3OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF81MjJfKTtmaWxsOiNGRkNDQ0I7fS5zdDM3OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF81MjRfKTt9LnN0Mzgwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUyNl8pO2ZpbGw6I0ZGRkZGRjt9LnN0Mzgxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUyOF8pO30uc3QzODJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTMwXyk7ZmlsbDojRkZGRkZGO30uc3QzODN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTMyXyk7fS5zdDM4NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF81MzRfKTtmaWxsOiMwMDhGRTc7fS5zdDM4NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF81MzZfKTt9LnN0Mzg2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzUzOF8pO2ZpbGw6I0E3RERGRjt9LnN0Mzg3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU0MF8pO30uc3QzODh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTQyXyk7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9LnN0Mzg5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU0NF8pO30uc3QzOTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTQ2Xyk7fS5zdDM5MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF81NDhfKTtmaWxsOiNGRkZGRkY7fS5zdDM5MntjbGlwLXBhdGg6dXJsKCNTVkdJRF81NTBfKTt9LnN0Mzkze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU1Ml8pO2ZpbGw6I0ZGRkZGRjt9LnN0Mzk0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU1NF8pO30uc3QzOTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTU2Xyk7ZmlsbDojRkZGRkZGO30uc3QzOTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTU4Xyk7fS5zdDM5N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF81NjBfKTtmaWxsOiMzMDMwMzA7fS5zdDM5OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF81NjRfKTt9LnN0Mzk5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU2Nl8pO2ZpbGw6IzI4MjcyNzt9LnN0NDAwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU2OF8pO30uc3Q0MDF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTcwXyk7ZmlsbDpub25lO3N0cm9rZTojNDE0MDQwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q0MDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTcyXyk7fS5zdDQwM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF81NzRfKTtmaWxsOiNEQURBREE7fS5zdDQwNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF81NzZfKTt9LnN0NDA1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU3OF8pO2ZpbGw6I0RBREFEQTt9LnN0NDA2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU4MF8pO30uc3Q0MDd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTgyXyk7ZmlsbDojREFEQURBO30uc3Q0MDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNTg2Xyk7fS5zdDQwOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF81ODhfKTtmaWxsOiNEQURBREE7fS5zdDQxMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF81OTJfKTt9LnN0NDExe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU5NF8pO2ZpbGw6I0RBREFEQTt9LnN0NDEye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzU5OF8pO30uc3Q0MTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjAwXyk7ZmlsbDojREFEQURBO30uc3Q0MTR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjA0Xyk7fS5zdDQxNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF82MDZfKTtmaWxsOiNEQURBREE7fS5zdDQxNntjbGlwLXBhdGg6dXJsKCNTVkdJRF82MTBfKTt9LnN0NDE3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzYxMl8pO2ZpbGw6I0RBREFEQTt9LnN0NDE4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzYxNl8pO30uc3Q0MTl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjE4Xyk7ZmlsbDojMjAxRjFGO30uc3Q0MjB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjIwXyk7fS5zdDQyMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF82MjJfKTtmaWxsOm5vbmU7c3Ryb2tlOiM0MTQwNDA7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDQyMntjbGlwLXBhdGg6dXJsKCNTVkdJRF82MjRfKTt9LnN0NDIze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzYyNl8pO2ZpbGw6IzUxNEY0Rjt9LnN0NDI0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzYyOF8pO30uc3Q0MjV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjMwXyk7ZmlsbDojREFEQURBO30uc3Q0MjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjMyXyk7fS5zdDQyN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF82MzRfKTtmaWxsOiNEQURBREE7fS5zdDQyOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF82MzZfKTt9LnN0NDI5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzYzOF8pO2ZpbGw6I0RBREFEQTt9LnN0NDMwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY0MF8pO30uc3Q0MzF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjQyXyk7ZmlsbDojRkZGRkZGO30uc3Q0MzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjQ0Xyk7fS5zdDQzM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF82NDZfKTtmaWxsOiNEQURBREE7fS5zdDQzNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF82NDhfKTt9LnN0NDM1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY1MF8pO2ZpbGw6I0RBREFEQTt9LnN0NDM2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY1Ml8pO30uc3Q0Mzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjU0Xyk7ZmlsbDojREFEQURBO30uc3Q0Mzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjU2Xyk7fS5zdDQzOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF82NThfKTtmaWxsOiNEQURBREE7fS5zdDQ0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF82NjBfKTt9LnN0NDQxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY2Ml8pO2ZpbGw6I0RBREFEQTt9LnN0NDQye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY2Nl8pO30uc3Q0NDN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjY4Xyk7ZmlsbDojNDE0MDQwO30uc3Q0NDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjcwXyk7fS5zdDQ0NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF82NzJfKTtmaWxsOiMyMDFGMUY7fS5zdDQ0NntjbGlwLXBhdGg6dXJsKCNTVkdJRF82NzRfKTt9LnN0NDQ3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY3Nl8pO2ZpbGw6bm9uZTtzdHJva2U6IzQxNDA0MDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0NDQ4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY3OF8pO30uc3Q0NDl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjgwXyk7ZmlsbDojMjAxRjFGO30uc3Q0NTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjgyXyk7fS5zdDQ1MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF82ODRfKTtmaWxsOm5vbmU7c3Ryb2tlOiM5QTlBOUE7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDQ1MntjbGlwLXBhdGg6dXJsKCNTVkdJRF82ODhfKTt9LnN0NDUze29wYWNpdHk6MDtjbGlwLXBhdGg6dXJsKCNTVkdJRF82OTBfKTtmaWxsOiNEOEQ4RDg7fS5zdDQ1NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF82OTJfKTt9LnN0NDU1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY5NF8pO2ZpbGw6I0RBREFEQTt9LnN0NDU2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzY5Nl8pO30uc3Q0NTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNjk4Xyk7ZmlsbDojREFEQURBO30uc3Q0NTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzAwXyk7fS5zdDQ1OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF83MDJfKTtmaWxsOiNEQURBREE7fS5zdDQ2MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF83MDZfKTt9LnN0NDYxe29wYWNpdHk6MDtjbGlwLXBhdGg6dXJsKCNTVkdJRF83MDhfKTtmaWxsOiNGRjg0ODQ7fS5zdDQ2MntjbGlwLXBhdGg6dXJsKCNTVkdJRF83MTRfKTt9LnN0NDYze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzcxOF8pO30uc3Q0NjR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzIyXyk7fS5zdDQ2NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF83MjRfKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDQ2NntjbGlwLXBhdGg6dXJsKCNTVkdJRF83MzBfKTt9LnN0NDY3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzczNF8pO30uc3Q0Njh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzM4Xyk7fS5zdDQ2OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF83NDBfKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDQ3MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF83NDZfKTt9LnN0NDcxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzc1MF8pO30uc3Q0NzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzU0Xyk7fS5zdDQ3M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF83NTZfKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDQ3NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF83NThfKTt9LnN0NDc1e29wYWNpdHk6MDtjbGlwLXBhdGg6dXJsKCNTVkdJRF83NjBfKTtmaWxsOiNGRjkxOTE7fS5zdDQ3NntjbGlwLXBhdGg6dXJsKCNTVkdJRF83NjRfKTt9LnN0NDc3e29wYWNpdHk6MDtjbGlwLXBhdGg6dXJsKCNTVkdJRF83NjZfKTtmaWxsOiNGRjkxOTE7fS5zdDQ3OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF83NzBfKTt9LnN0NDc5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzc3Ml8pO2ZpbGw6I0ZGRkZGRjt9LnN0NDgwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzc3NF8pO30uc3Q0ODF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzc2Xyk7ZmlsbDojOTQ5NDk0O30uc3Q0ODJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzc4Xyk7fS5zdDQ4M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF83ODBfKTtmaWxsOiM5NDk0OTQ7fS5zdDQ4NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF83ODJfKTt9LnN0NDg1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzc4NF8pO2ZpbGw6Izk0OTQ5NDt9LnN0NDg2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzc4Nl8pO30uc3Q0ODd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzg4Xyk7ZmlsbDojOTQ5NDk0O30uc3Q0ODh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfNzkwXyk7fS5zdDQ4OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF83OTJfKTtmaWxsOiNDNUM1QzU7fS5zdDQ5MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF83OTRfKTt9LnN0NDkxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzc5Nl8pO2ZpbGw6I0M1QzVDNTt9LnN0NDkye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzc5OF8pO30uc3Q0OTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODAwXyk7ZmlsbDojOTQ5NDk0O30uc3Q0OTR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODA0Xyk7fS5zdDQ5NXtvcGFjaXR5OjA7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODA2Xyk7ZmlsbDojRURGRjhGO30uc3Q0OTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODEwXyk7fS5zdDQ5N3tvcGFjaXR5OjA7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODEyXyk7ZmlsbDojRkZCMUIxO30uc3Q0OTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODE2Xyk7fS5zdDQ5OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF84MThfKTtmaWxsOiNGRkZGRkY7fS5zdDUwMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF84MjBfKTt9LnN0NTAxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzgyMl8pO2ZpbGw6Izk0OTQ5NDt9LnN0NTAye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzgyNF8pO30uc3Q1MDN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODI2Xyk7ZmlsbDojOTQ5NDk0O30uc3Q1MDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODI4Xyk7fS5zdDUwNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF84MzBfKTtmaWxsOiM5NDk0OTQ7fS5zdDUwNntjbGlwLXBhdGg6dXJsKCNTVkdJRF84MzJfKTt9LnN0NTA3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzgzNF8pO2ZpbGw6Izk0OTQ5NDt9LnN0NTA4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzgzNl8pO30uc3Q1MDl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODM4Xyk7ZmlsbDojQzVDNUM1O30uc3Q1MTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODQwXyk7fS5zdDUxMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF84NDJfKTtmaWxsOiNDNUM1QzU7fS5zdDUxMntjbGlwLXBhdGg6dXJsKCNTVkdJRF84NDRfKTt9LnN0NTEze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg0Nl8pO2ZpbGw6IzZFQUZERjt9LnN0NTE0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg0OF8pO30uc3Q1MTV7b3BhY2l0eTowO2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg1MF8pO2ZpbGw6I0ZGODQ4NDt9LnN0NTE2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg1NF8pO30uc3Q1MTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODU2Xyk7ZmlsbDojQkRCQ0JDO30uc3Q1MTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODU4Xyk7fS5zdDUxOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF84NjBfKTtmaWxsOiNGMUVERUQ7fS5zdDUyMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF84NjJfKTt9LnN0NTIxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg2NF8pO2ZpbGw6I0RBRDhEODt9LnN0NTIye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg2Nl8pO30uc3Q1MjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODY4Xyk7ZmlsbDojQkRCQ0JDO30uc3Q1MjR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODcwXyk7fS5zdDUyNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF84NzJfKTtmaWxsOiNCREJDQkM7fS5zdDUyNntjbGlwLXBhdGg6dXJsKCNTVkdJRF84NzRfKTt9LnN0NTI3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg3Nl8pO2ZpbGw6I0JEQkNCQzt9LnN0NTI4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg3OF8pO30uc3Q1Mjl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODgwXyk7ZmlsbDojRUFFQUVBO30uc3Q1MzB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODgyXyk7fS5zdDUzMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF84ODRfKTtmaWxsOiNCREJDQkM7fS5zdDUzMntjbGlwLXBhdGg6dXJsKCNTVkdJRF84ODZfKTt9LnN0NTMze29wYWNpdHk6MDtjbGlwLXBhdGg6dXJsKCNTVkdJRF84ODhfKTtmaWxsOiNERUVDRjk7fS5zdDUzNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF84OTJfKTt9LnN0NTM1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg5NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0NTM2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzg5Nl8pO30uc3Q1Mzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfODk4Xyk7ZmlsbDojOTQ5NDk0O30uc3Q1Mzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTAwXyk7fS5zdDUzOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF85MDJfKTtmaWxsOiM5NDk0OTQ7fS5zdDU0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF85MDRfKTt9LnN0NTQxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzkwNl8pO2ZpbGw6I0M1QzVDNTt9LnN0NTQye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzkwOF8pO30uc3Q1NDN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTEwXyk7ZmlsbDojQzVDNUM1O30uc3Q1NDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTEyXyk7fS5zdDU0NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF85MTRfKTtmaWxsOiM5NDk0OTQ7fS5zdDU0NntjbGlwLXBhdGg6dXJsKCNTVkdJRF85MTZfKTt9LnN0NTQ3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzkxOF8pO2ZpbGw6Izk0OTQ5NDt9LnN0NTQ4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzkyMl8pO30uc3Q1NDl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTI0Xyk7ZmlsbDojRkZGRkZGO30uc3Q1NTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTI2Xyk7fS5zdDU1MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF85MjhfKTtmaWxsOiM5NDk0OTQ7fS5zdDU1MntjbGlwLXBhdGg6dXJsKCNTVkdJRF85MzBfKTt9LnN0NTUze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzkzMl8pO2ZpbGw6Izk0OTQ5NDt9LnN0NTU0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzkzNF8pO30uc3Q1NTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTM2Xyk7ZmlsbDojQzVDNUM1O30uc3Q1NTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTM4Xyk7fS5zdDU1N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF85NDBfKTtmaWxsOiNDNUM1QzU7fS5zdDU1OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF85NDJfKTt9LnN0NTU5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk0NF8pO2ZpbGw6I0M1QzVDNTt9LnN0NTYwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk0Nl8pO30uc3Q1NjF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTQ4Xyk7ZmlsbDojQzVDNUM1O30uc3Q1NjJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTUwXyk7fS5zdDU2M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF85NTJfKTtmaWxsOiNDNUM1QzU7fS5zdDU2NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF85NTRfKTt9LnN0NTY1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk1Nl8pO2ZpbGw6I0M1QzVDNTt9LnN0NTY2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk1OF8pO30uc3Q1Njd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTYwXyk7ZmlsbDojQzVDNUM1O30uc3Q1Njh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTYyXyk7fS5zdDU2OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF85NjRfKTtmaWxsOiNDNUM1QzU7fS5zdDU3MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF85NjZfKTt9LnN0NTcxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk2OF8pO2ZpbGw6I0M1QzVDNTt9LnN0NTcye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk3MF8pO30uc3Q1NzN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTcyXyk7ZmlsbDojQzVDNUM1O30uc3Q1NzR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTc0Xyk7fS5zdDU3NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF85NzZfKTtmaWxsOiNDNUM1QzU7fS5zdDU3NntjbGlwLXBhdGg6dXJsKCNTVkdJRF85NzhfKTt9LnN0NTc3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk4MF8pO2ZpbGw6I0M1QzVDNTt9LnN0NTc4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk4Ml8pO30uc3Q1Nzl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTg0Xyk7ZmlsbDojQzVDNUM1O30uc3Q1ODB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTg2Xyk7fS5zdDU4MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF85ODhfKTtmaWxsOiNDNUM1QzU7fS5zdDU4MntjbGlwLXBhdGg6dXJsKCNTVkdJRF85OTBfKTt9LnN0NTgze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk5Ml8pO2ZpbGw6I0M1QzVDNTt9LnN0NTg0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzk5NF8pO30uc3Q1ODV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTk2Xyk7ZmlsbDojQzVDNUM1O30uc3Q1ODZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfOTk4Xyk7fS5zdDU4N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDAwXyk7ZmlsbDojQzVDNUM1O30uc3Q1ODh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTAwMl8pO30uc3Q1ODl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTAwNF8pO2ZpbGw6I0M1QzVDNTt9LnN0NTkwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwMDZfKTt9LnN0NTkxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwMDhfKTtmaWxsOiMyQzdBNEY7fS5zdDU5MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDEwXyk7fS5zdDU5M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDEyXyk7ZmlsbDojRkVGRUZFO30uc3Q1OTR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTAxNF8pO30uc3Q1OTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTAxNl8pO2ZpbGw6I0JEQkNCQzt9LnN0NTk2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwMThfKTt9LnN0NTk3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwMjBfKTtmaWxsOiNGMUVERUQ7fS5zdDU5OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDIyXyk7fS5zdDU5OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDI0Xyk7ZmlsbDojREFEOEQ4O30uc3Q2MDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTAyNl8pO30uc3Q2MDF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTAyOF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjAye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwMzBfKTt9LnN0NjAze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwMzJfKTtmaWxsOiNGMUVERUQ7fS5zdDYwNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDM0Xyk7fS5zdDYwNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDM2Xyk7ZmlsbDojREFEOEQ4O30uc3Q2MDZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTAzOF8pO30uc3Q2MDd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA0MF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjA4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNDJfKTt9LnN0NjA5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNDRfKTtmaWxsOiNGMUVERUQ7fS5zdDYxMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDQ2Xyk7fS5zdDYxMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDQ4Xyk7ZmlsbDojREFEOEQ4O30uc3Q2MTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA1MF8pO30uc3Q2MTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA1Ml8pO2ZpbGw6I0JEQkNCQzt9LnN0NjE0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNTRfKTt9LnN0NjE1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNTZfKTtmaWxsOiNGMUVERUQ7fS5zdDYxNntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDU4Xyk7fS5zdDYxN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDYwXyk7ZmlsbDojREFEOEQ4O30uc3Q2MTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA2Ml8pO30uc3Q2MTl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA2NF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjIwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNjZfKTt9LnN0NjIxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNjhfKTtmaWxsOiNGMUVERUQ7fS5zdDYyMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDcwXyk7fS5zdDYyM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDcyXyk7ZmlsbDojREFEOEQ4O30uc3Q2MjR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA3NF8pO30uc3Q2MjV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA3Nl8pO2ZpbGw6I0JEQkNCQzt9LnN0NjI2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwNzhfKTt9LnN0NjI3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwODBfKTtmaWxsOiNGMUVERUQ7fS5zdDYyOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDgyXyk7fS5zdDYyOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDg0Xyk7ZmlsbDojREFEOEQ4O30uc3Q2MzB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA4Nl8pO30uc3Q2MzF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA4OF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjMye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwOTBfKTt9LnN0NjMze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEwOTJfKTtmaWxsOiNGMUVERUQ7fS5zdDYzNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDk0Xyk7fS5zdDYzNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMDk2Xyk7ZmlsbDojREFEOEQ4O30uc3Q2MzZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTA5OF8pO30uc3Q2Mzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTEwMF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjM4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExMDJfKTt9LnN0NjM5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExMDRfKTtmaWxsOiNGMUVERUQ7fS5zdDY0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTA2Xyk7fS5zdDY0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTA4Xyk7ZmlsbDojREFEOEQ4O30uc3Q2NDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTExMF8pO30uc3Q2NDN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTExMl8pO2ZpbGw6I0JEQkNCQzt9LnN0NjQ0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExMTRfKTt9LnN0NjQ1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExMTZfKTtmaWxsOiNGMUVERUQ7fS5zdDY0NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTE4Xyk7fS5zdDY0N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTIwXyk7ZmlsbDojREFEOEQ4O30uc3Q2NDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTEyMl8pO30uc3Q2NDl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTEyNF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjUwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExMjZfKTt9LnN0NjUxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExMjhfKTtmaWxsOiNGMUVERUQ7fS5zdDY1MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTMwXyk7fS5zdDY1M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTMyXyk7ZmlsbDojREFEOEQ4O30uc3Q2NTR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTEzNF8pO30uc3Q2NTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTEzNl8pO2ZpbGw6I0JEQkNCQzt9LnN0NjU2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExMzhfKTt9LnN0NjU3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExNDBfKTtmaWxsOiNGMUVERUQ7fS5zdDY1OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTQyXyk7fS5zdDY1OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTQ0Xyk7ZmlsbDojREFEOEQ4O30uc3Q2NjB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE0Nl8pO30uc3Q2NjF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE0OF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjYye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExNTBfKTt9LnN0NjYze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExNTJfKTtmaWxsOiNGMUVERUQ7fS5zdDY2NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTU0Xyk7fS5zdDY2NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTU2Xyk7ZmlsbDojREFEOEQ4O30uc3Q2NjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE1OF8pO30uc3Q2Njd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE2MF8pO2ZpbGw6I0JEQkNCQzt9LnN0NjY4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExNjJfKTt9LnN0NjY5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExNjRfKTtmaWxsOiNGMUVERUQ7fS5zdDY3MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTY2Xyk7fS5zdDY3MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTY4Xyk7ZmlsbDojREFEOEQ4O30uc3Q2NzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE3MF8pO30uc3Q2NzN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE3Ml8pO2ZpbGw6I0JEQkNCQzt9LnN0Njc0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExNzRfKTt9LnN0Njc1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExNzZfKTtmaWxsOiNGMUVERUQ7fS5zdDY3NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTc4Xyk7fS5zdDY3N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTgwXyk7ZmlsbDojREFEOEQ4O30uc3Q2Nzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE4Ml8pO30uc3Q2Nzl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE4NF8pO2ZpbGw6I0JEQkNCQzt9LnN0Njgwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExODZfKTt9LnN0Njgxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExODhfKTtmaWxsOiNGMUVERUQ7fS5zdDY4MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTkwXyk7fS5zdDY4M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMTkyXyk7ZmlsbDojREFEOEQ4O30uc3Q2ODR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE5NF8pO30uc3Q2ODV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTE5Nl8pO2ZpbGw6I0ZGRkZGRjt9LnN0Njg2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzExOThfKTt9LnN0Njg3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyMDBfKTtmaWxsOiM5NDk0OTQ7fS5zdDY4OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjAyXyk7fS5zdDY4OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjA0Xyk7ZmlsbDojOTQ5NDk0O30uc3Q2OTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTIwNl8pO30uc3Q2OTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTIwOF8pO2ZpbGw6Izk0OTQ5NDt9LnN0Njkye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyMTBfKTt9LnN0Njkze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyMTJfKTtmaWxsOiM5NDk0OTQ7fS5zdDY5NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjE0Xyk7fS5zdDY5NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjE2Xyk7ZmlsbDojQzVDNUM1O30uc3Q2OTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTIxOF8pO30uc3Q2OTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTIyMF8pO2ZpbGw6I0M1QzVDNTt9LnN0Njk4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyMjJfKTt9LnN0Njk5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyMjRfKTtmaWxsOiM5NDk0OTQ7fS5zdDcwMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjI2Xyk7fS5zdDcwMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjI4Xyk7ZmlsbDojRkZGRkZGO30uc3Q3MDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTIzMF8pO30uc3Q3MDN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTIzMl8pO2ZpbGw6Izk5OTk5OTt9LnN0NzA0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyMzRfKTt9LnN0NzA1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyMzZfKTtmaWxsOiNFQUVBRUE7fS5zdDcwNntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjM4Xyk7fS5zdDcwN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjQwXyk7ZmlsbDojNkJCMEU1O30uc3Q3MDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI0Ml8pO30uc3Q3MDl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI0NF8pO2ZpbGw6Izk5OTk5OTt9LnN0NzEwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNDZfKTt9LnN0NzExe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNDhfKTtmaWxsOiNDOEM4Qzg7fS5zdDcxMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjUwXyk7fS5zdDcxM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjUyXyk7ZmlsbDojQzhDOEM4O30uc3Q3MTR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI1NF8pO30uc3Q3MTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI1Nl8pO2ZpbGw6I0M4QzhDODt9LnN0NzE2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNThfKTt9LnN0NzE3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNjBfKTtmaWxsOiNDOEM4Qzg7fS5zdDcxOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjYyXyk7fS5zdDcxOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjY0Xyk7ZmlsbDojQzVDNUM1O30uc3Q3MjB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI2Nl8pO30uc3Q3MjF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI2OF8pO2ZpbGw6I0M1QzVDNTt9LnN0NzIye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNzBfKTt9LnN0NzIze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyNzJfKTtmaWxsOiNDNUM1QzU7fS5zdDcyNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjc0Xyk7fS5zdDcyNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjc2Xyk7ZmlsbDojQzVDNUM1O30uc3Q3MjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI3OF8pO30uc3Q3Mjd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI4MF8pO2ZpbGw6I0M1QzVDNTt9LnN0NzI4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyODJfKTt9LnN0NzI5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyODRfKTtmaWxsOiNDNUM1QzU7fS5zdDczMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjg2Xyk7fS5zdDczMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjg4Xyk7ZmlsbDojQzVDNUM1O30uc3Q3MzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI5MF8pO30uc3Q3MzN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTI5Ml8pO2ZpbGw6I0ZGRkZGRjt9LnN0NzM0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyOTRfKTt9LnN0NzM1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEyOTZfKTtmaWxsOiM5NDk0OTQ7fS5zdDczNntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMjk4Xyk7fS5zdDczN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzAwXyk7ZmlsbDojRkZGRkZGO30uc3Q3Mzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMwMl8pO30uc3Q3Mzl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMwNF8pO2ZpbGw6Izk0OTQ5NDt9LnN0NzQwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzMDZfKTt9LnN0NzQxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzMDhfKTtmaWxsOiNGRkZGRkY7fS5zdDc0MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzEwXyk7fS5zdDc0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzEyXyk7ZmlsbDojQzhDOEM4O30uc3Q3NDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMxNF8pO30uc3Q3NDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMxNl8pO2ZpbGw6I0ZGRkZGRjt9LnN0NzQ2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzMThfKTt9LnN0NzQ3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzMjBfKTtmaWxsOiNDOEM4Qzg7fS5zdDc0OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzIyXyk7fS5zdDc0OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzI0Xyk7ZmlsbDojRkZGRkZGO30uc3Q3NTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMyNl8pO30uc3Q3NTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMyOF8pO2ZpbGw6I0M4QzhDODt9LnN0NzUye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzMzBfKTt9LnN0NzUze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzMzJfKTtmaWxsOiNGRkZGRkY7fS5zdDc1NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzM0Xyk7fS5zdDc1NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzM2Xyk7ZmlsbDojQzhDOEM4O30uc3Q3NTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTMzOF8pO30uc3Q3NTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM0MF8pO2ZpbGw6I0ZGRkZGRjt9LnN0NzU4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNDJfKTt9LnN0NzU5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNDRfKTtmaWxsOiNDOEM4Qzg7fS5zdDc2MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzQ2Xyk7fS5zdDc2MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzQ4Xyk7ZmlsbDojRkZGRkZGO30uc3Q3NjJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM1MF8pO30uc3Q3NjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM1Ml8pO2ZpbGw6I0M4QzhDODt9LnN0NzY0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNTRfKTt9LnN0NzY1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNTZfKTtmaWxsOiNGRkZGRkY7fS5zdDc2NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzU4Xyk7fS5zdDc2N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzYwXyk7ZmlsbDojQzhDOEM4O30uc3Q3Njh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM2Ml8pO30uc3Q3Njl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM2NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0Nzcwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNjZfKTt9LnN0Nzcxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNjhfKTtmaWxsOiNDOEM4Qzg7fS5zdDc3MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzcwXyk7fS5zdDc3M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzcyXyk7ZmlsbDojRkZGRkZGO30uc3Q3NzR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM3NF8pO30uc3Q3NzV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM3Nl8pO2ZpbGw6I0M4QzhDODt9LnN0Nzc2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzNzhfKTt9LnN0Nzc3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzODBfKTtmaWxsOiNGRkZGRkY7fS5zdDc3OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzgyXyk7fS5zdDc3OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzg0Xyk7ZmlsbDojQzhDOEM4O30uc3Q3ODB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM4Nl8pO30uc3Q3ODF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM4OF8pO2ZpbGw6I0ZGRkZGRjt9LnN0Nzgye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzOTBfKTt9LnN0Nzgze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzEzOTJfKTtmaWxsOiM5NDk0OTQ7fS5zdDc4NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzk0Xyk7fS5zdDc4NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMzk2Xyk7ZmlsbDojOTQ5NDk0O30uc3Q3ODZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTM5OF8pO30uc3Q3ODd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQwMF8pO2ZpbGw6I0M1QzVDNTt9LnN0Nzg4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0MDJfKTt9LnN0Nzg5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0MDRfKTtmaWxsOiNDNUM1QzU7fS5zdDc5MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDA2Xyk7fS5zdDc5MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDA4Xyk7ZmlsbDojQzVDNUM1O30uc3Q3OTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQxMF8pO30uc3Q3OTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQxMl8pO2ZpbGw6I0M1QzVDNTt9LnN0Nzk0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0MTRfKTt9LnN0Nzk1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0MTZfKTtmaWxsOiNDNUM1QzU7fS5zdDc5NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDE4Xyk7fS5zdDc5N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDIwXyk7ZmlsbDojMDI3OUQ3O30uc3Q3OTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQyMl8pO30uc3Q3OTl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQyNF8pO2ZpbGw6IzZBQUZFNTt9LnN0ODAwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0MjZfKTt9LnN0ODAxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0MjhfKTtmaWxsOiM2QUFGRTU7fS5zdDgwMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDMwXyk7fS5zdDgwM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDMyXyk7ZmlsbDojQzVDNUM1O30uc3Q4MDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQzNF8pO30uc3Q4MDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQzNl8pO2ZpbGw6IzZBQUZFNTt9LnN0ODA2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0MzhfKTt9LnN0ODA3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0NDBfKTtmaWxsOiMwMDc4RDc7fS5zdDgwOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDQyXyk7fS5zdDgwOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDQ0Xyk7ZmlsbDojMzAzMDMwO30uc3Q4MTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ0OF8pO30uc3Q4MTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ1MF8pO2ZpbGw6IzFBMUExQTt9LnN0ODEye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0NTJfKTt9LnN0ODEze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0NTRfKTtmaWxsOm5vbmU7c3Ryb2tlOiM1MDUwNTA7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDgxNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDU2Xyk7fS5zdDgxNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDU4Xyk7ZmlsbDojRjBGMEYwO30uc3Q4MTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ2MF8pO30uc3Q4MTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ2Ml8pO2ZpbGw6IzkxRDVGRjt9LnN0ODE4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0NjRfKTtmaWxsOm5vbmU7c3Ryb2tlOiMyNjlGRTk7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDgxOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDY2Xyk7fS5zdDgyMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDY4Xyk7ZmlsbDojRjBGMEYwO30uc3Q4MjF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ3MF8pO30uc3Q4MjJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ3Ml8pO2ZpbGw6IzkxRDVGRjt9LnN0ODIze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0NzRfKTtmaWxsOm5vbmU7c3Ryb2tlOiMyNjlGRTk7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDgyNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDc2Xyk7fS5zdDgyNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDc4Xyk7ZmlsbDojRjBGMEYwO30uc3Q4MjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ4MF8pO30uc3Q4Mjd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ4Ml8pO2ZpbGw6IzkxRDVGRjt9LnN0ODI4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0ODRfKTtmaWxsOm5vbmU7c3Ryb2tlOiMyNjlGRTk7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDgyOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDg2Xyk7fS5zdDgzMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDg4Xyk7ZmlsbDojMDA3MEYwO30uc3Q4MzF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ5MF8pO30uc3Q4MzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTQ5Ml8pO2ZpbGw6I0ZGRkZGRjt9LnN0ODMze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0OTRfKTt9LnN0ODM0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE0OTZfKTtmaWxsOiM5MUQ1RkY7fS5zdDgzNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNDk4Xyk7ZmlsbDpub25lO3N0cm9rZTojMjY5RkU5O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q4MzZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTUwMF8pO30uc3Q4Mzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTUwMl8pO2ZpbGw6IzM5MzkzOTt9LnN0ODM4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MDRfKTt9LnN0ODM5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MDZfKTtmaWxsOiNGMEYwRjA7fS5zdDg0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTA4Xyk7fS5zdDg0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTEwXyk7ZmlsbDojOTFENUZGO30uc3Q4NDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTUxMl8pO2ZpbGw6bm9uZTtzdHJva2U6IzI2OUZFOTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODQze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MTRfKTt9LnN0ODQ0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MTZfKTtmaWxsOiNGMEYwRjA7fS5zdDg0NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTE4Xyk7fS5zdDg0NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTIwXyk7ZmlsbDojOTFENUZGO30uc3Q4NDd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTUyMl8pO2ZpbGw6bm9uZTtzdHJva2U6IzI2OUZFOTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODQ4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MjRfKTt9LnN0ODQ5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MjZfKTtmaWxsOiNGMEYwRjA7fS5zdDg1MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTI4Xyk7fS5zdDg1MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTMwXyk7ZmlsbDojOTFENUZGO30uc3Q4NTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTUzMl8pO2ZpbGw6bm9uZTtzdHJva2U6IzI2OUZFOTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODUze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MzRfKTt9LnN0ODU0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1MzZfKTtmaWxsOiNGMEYwRjA7fS5zdDg1NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTM4Xyk7fS5zdDg1NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTQwXyk7ZmlsbDojOTFENUZGO30uc3Q4NTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU0Ml8pO2ZpbGw6bm9uZTtzdHJva2U6IzI2OUZFOTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODU4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1NDRfKTt9LnN0ODU5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1NDZfKTtmaWxsOiM0ODQ4NDg7fS5zdDg2MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTQ4Xyk7fS5zdDg2MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTUwXyk7ZmlsbDojMUExQTFBO30uc3Q4NjJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU1Ml8pO30uc3Q4NjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU1NF8pO2ZpbGw6bm9uZTtzdHJva2U6IzQ4NDg0ODtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODY0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1NTZfKTt9LnN0ODY1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1NThfKTtmaWxsOiMxQTFBMUE7fS5zdDg2NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTYwXyk7fS5zdDg2N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTYyXyk7ZmlsbDpub25lO3N0cm9rZTojNzY3Njc2O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q4Njh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU2Nl8pO30uc3Q4Njl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU2OF8pO2ZpbGw6IzkxRDVGRjt9LnN0ODcwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1NzBfKTtmaWxsOm5vbmU7c3Ryb2tlOiMyNjlGRTk7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDg3MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTcyXyk7fS5zdDg3MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTc0Xyk7ZmlsbDojOTFENUZGO30uc3Q4NzN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU3Nl8pO2ZpbGw6bm9uZTtzdHJva2U6IzI2OUZFOTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODc0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1NzhfKTt9LnN0ODc1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1ODBfKTtmaWxsOiM5MUQ1RkY7fS5zdDg3NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTgyXyk7ZmlsbDpub25lO3N0cm9rZTojMjY5RkU5O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q4Nzd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU4NF8pO30uc3Q4Nzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU4Nl8pO2ZpbGw6IzkxRDVGRjt9LnN0ODc5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1ODhfKTtmaWxsOm5vbmU7c3Ryb2tlOiMyNjlGRTk7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDg4MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTkwXyk7fS5zdDg4MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNTkyXyk7ZmlsbDojOTFENUZGO30uc3Q4ODJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTU5NF8pO2ZpbGw6bm9uZTtzdHJva2U6IzI2OUZFOTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODgze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1OTZfKTt9LnN0ODg0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE1OThfKTtmaWxsOiM5MUQ1RkY7fS5zdDg4NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjAwXyk7ZmlsbDpub25lO3N0cm9rZTojMjY5RkU5O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q4ODZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTYwNF8pO30uc3Q4ODd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTYwOF8pO30uc3Q4ODh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTYxMl8pO30uc3Q4ODl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTYxNF8pO2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0ODkwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2MjBfKTt9LnN0ODkxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2MjRfKTt9LnN0ODkye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2MjhfKTt9LnN0ODkze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2MzBfKTtmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDg5NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjM2Xyk7fS5zdDg5NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjQwXyk7fS5zdDg5NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjQ0Xyk7fS5zdDg5N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjQ2Xyk7ZmlsbDpub25lO3N0cm9rZTojRkZGRkZGO3N0cm9rZS13aWR0aDo0O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q4OTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY1MF8pO30uc3Q4OTl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY1Ml8pO2ZpbGw6I0ZGQjU3ODt9LnN0OTAwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2NTRfKTt9LnN0OTAxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2NTZfKTtmaWxsOiNFRDlGNjQ7fS5zdDkwMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjU4Xyk7fS5zdDkwM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjYwXyk7ZmlsbDojRkZENkI1O30uc3Q5MDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY2Ml8pO30uc3Q5MDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY2NF8pO2ZpbGw6I0VEOUY2NDt9LnN0OTA2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2NjZfKTt9LnN0OTA3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2NjhfKTtmaWxsOiNGRkZGRkY7fS5zdDkwOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjcwXyk7fS5zdDkwOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjcyXyk7ZmlsbDojRkZGRkZGO30uc3Q5MTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY3NF8pO30uc3Q5MTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY3Nl8pO2ZpbGw6I0ZGRkZGRjt9LnN0OTEye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2ODBfKTt9LnN0OTEze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2ODJfKTtmaWxsOiNGRkI1Nzg7fS5zdDkxNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjg0Xyk7fS5zdDkxNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjg2Xyk7ZmlsbDojRUQ5RjY0O30uc3Q5MTZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY4OF8pO30uc3Q5MTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTY5MF8pO2ZpbGw6I0ZGRDZCNTt9LnN0OTE4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2OTJfKTt9LnN0OTE5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE2OTRfKTtmaWxsOiNFRDlGNjQ7fS5zdDkyMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjk2Xyk7fS5zdDkyMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNjk4Xyk7ZmlsbDojRkZGRkZGO30uc3Q5MjJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTcwMF8pO30uc3Q5MjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTcwMl8pO2ZpbGw6I0ZGRkZGRjt9LnN0OTI0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3MDRfKTt9LnN0OTI1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3MDZfKTtmaWxsOiNGRkZGRkY7fS5zdDkyNntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzEwXyk7fS5zdDkyN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzEyXyk7ZmlsbDojQ0VDRUNFO30uc3Q5Mjh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTcxNF8pO30uc3Q5Mjl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTcxNl8pO2ZpbGw6I0I3QjdCNzt9LnN0OTMwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3MThfKTt9LnN0OTMxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3MjBfKTtmaWxsOiNFNEU0RTQ7fS5zdDkzMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzIyXyk7fS5zdDkzM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzI0Xyk7ZmlsbDojQjdCN0I3O30uc3Q5MzR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTcyNl8pO30uc3Q5MzV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTcyOF8pO2ZpbGw6I0ZGRkZGRjt9LnN0OTM2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3MzBfKTt9LnN0OTM3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3MzJfKTtmaWxsOiNGRkZGRkY7fS5zdDkzOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzM0Xyk7fS5zdDkzOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzM2Xyk7ZmlsbDojRkZGRkZGO30uc3Q5NDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc0MF8pO30uc3Q5NDF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc0Ml8pO2ZpbGw6IzcxQzhGNDt9LnN0OTQye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3NDRfKTt9LnN0OTQze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3NDZfKTtmaWxsOiM2M0E3RDM7fS5zdDk0NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzQ4Xyk7fS5zdDk0NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzUwXyk7ZmlsbDojQzFFN0ZGO30uc3Q5NDZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc1Ml8pO30uc3Q5NDd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc1NF8pO2ZpbGw6IzYzQTdEMzt9LnN0OTQ4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3NTZfKTt9LnN0OTQ5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3NThfKTtmaWxsOiNGRkZGRkY7fS5zdDk1MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzYwXyk7fS5zdDk1MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzYyXyk7ZmlsbDojRkZGRkZGO30uc3Q5NTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc2NF8pO30uc3Q5NTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc2Nl8pO2ZpbGw6I0ZGRkZGRjt9LnN0OTU0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3NzBfKTt9LnN0OTU1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3NzJfKTtmaWxsOiM4REM5Nzc7fS5zdDk1NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzc0Xyk7fS5zdDk1N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzc2Xyk7ZmlsbDojN0NBODUxO30uc3Q5NTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc3OF8pO30uc3Q5NTl7b3BhY2l0eTowLjQ1O2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3ODBfKTtmaWxsOiNGRkZGRkY7fS5zdDk2MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzgyXyk7fS5zdDk2MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzg0Xyk7ZmlsbDojN0NBODUxO30uc3Q5NjJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc4Nl8pO30uc3Q5NjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTc4OF8pO2ZpbGw6I0ZGRkZGRjt9LnN0OTY0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3OTBfKTt9LnN0OTY1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE3OTJfKTtmaWxsOiNGRkZGRkY7fS5zdDk2NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzk0Xyk7fS5zdDk2N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xNzk2Xyk7ZmlsbDojRkZGRkZGO30uc3Q5Njh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgwMF8pO30uc3Q5Njl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgwMl8pO2ZpbGw6I0RCQjY2Mzt9LnN0OTcwe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4MDRfKTt9LnN0OTcxe2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4MDZfKTtmaWxsOiNDRUExNTE7fS5zdDk3MntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODA4Xyk7fS5zdDk3M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODEwXyk7ZmlsbDojRUJEN0E5O30uc3Q5NzR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgxMl8pO30uc3Q5NzV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgxNF8pO2ZpbGw6I0NFQTE1MTt9LnN0OTc2e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4MTZfKTt9LnN0OTc3e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4MThfKTtmaWxsOiNGRkZGRkY7fS5zdDk3OHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODIwXyk7fS5zdDk3OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODIyXyk7ZmlsbDojRkZGRkZGO30uc3Q5ODB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgyNF8pO30uc3Q5ODF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgyNl8pO2ZpbGw6I0ZGRkZGRjt9LnN0OTgye2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4MjhfKTt9LnN0OTgze2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4MzBfKTtmaWxsOiNGRkZGRkY7fS5zdDk4NHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODM0Xyk7fS5zdDk4NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODM2Xyk7ZmlsbDojODNENkI5O30uc3Q5ODZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTgzOF8pO30uc3Q5ODd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg0MF8pO2ZpbGw6IzQ2QzY4Qzt9LnN0OTg4e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4NDJfKTt9LnN0OTg5e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4NDRfKTtmaWxsOiNCQkU4RDg7fS5zdDk5MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODQ2Xyk7fS5zdDk5MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODQ4Xyk7ZmlsbDojNDZDNjhDO30uc3Q5OTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg1MF8pO30uc3Q5OTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg1Ml8pO2ZpbGw6I0ZGRkZGRjt9LnN0OTk0e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4NTRfKTt9LnN0OTk1e2NsaXAtcGF0aDp1cmwoI1NWR0lEXzE4NTZfKTtmaWxsOiNGRkZGRkY7fS5zdDk5NntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODU4Xyk7fS5zdDk5N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODYwXyk7ZmlsbDojRkZGRkZGO30uc3Q5OTh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg2NF8pO30uc3Q5OTl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg2Nl8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAwMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODY4Xyk7fS5zdDEwMDF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg3MF8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAwMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODcyXyk7fS5zdDEwMDN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg3NF8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAwNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODc2Xyk7fS5zdDEwMDV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg3OF8pO2ZpbGw6IzEzMTMxMzt9LnN0MTAwNntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODgwXyk7fS5zdDEwMDd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg4Ml8pO2ZpbGw6bm9uZTtzdHJva2U6IzUwNTA1MDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MTAwOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODg0Xyk7fS5zdDEwMDl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg4Nl8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAxMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODg4Xyk7fS5zdDEwMTF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg5MF8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAxMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODkyXyk7fS5zdDEwMTN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTg5NF8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAxNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xODk4Xyk7fS5zdDEwMTV7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkwMF8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAxNntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTA0Xyk7fS5zdDEwMTd7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkwNl8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAxOHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTEwXyk7fS5zdDEwMTl7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkxMl8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAyMHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTE2Xyk7fS5zdDEwMjF7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkxOF8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAyMntjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTIwXyk7fS5zdDEwMjN7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkyMl8pO2ZpbGw6I0YwRjBGMDt9LnN0MTAyNHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTI0Xyk7ZmlsbDpub25lO3N0cm9rZTojNTA1MDUwO3N0cm9rZS1saW5lY2FwOnNxdWFyZTtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MTAyNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTI2Xyk7fS5zdDEwMjZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkyOF8pO2ZpbGw6IzM5MzkzOTt9LnN0MTAyN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTMyXyk7fS5zdDEwMjh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkzNF8pO2ZpbGw6I0JDQkNCQzt9LnN0MTAyOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTM2Xyk7fS5zdDEwMzB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTkzOF8pO2ZpbGw6I0E4QThBODt9LnN0MTAzMXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTQwXyk7fS5zdDEwMzJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk0Ml8pO2ZpbGw6I0RBREFEQTt9LnN0MTAzM3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTQ0Xyk7fS5zdDEwMzR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk0Nl8pO2ZpbGw6I0E4QThBODt9LnN0MTAzNXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTQ4Xyk7fS5zdDEwMzZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk1MF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTAzN3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTUyXyk7fS5zdDEwMzh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk1NF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTAzOXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTU2Xyk7fS5zdDEwNDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk1OF8pO2ZpbGw6I0ZGRkZGRjt9LnN0MTA0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTYwXyk7fS5zdDEwNDJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk2Ml8pO2ZpbGw6IzFBMUExQTt9LnN0MTA0M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTY0Xyk7fS5zdDEwNDR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk2Nl8pO2ZpbGw6bm9uZTtzdHJva2U6I0YwRjBGMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MTA0NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTY4Xyk7fS5zdDEwNDZ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk3MF8pO2ZpbGw6IzAwNzBGMDt9LnN0MTA0N3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTc0Xyk7fS5zdDEwNDh7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk3Nl8pO2ZpbGw6IzFBMUExQTt9LnN0MTA0OXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTc4Xyk7fS5zdDEwNTB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk4MF8pO2ZpbGw6bm9uZTtzdHJva2U6I0YwRjBGMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MTA1MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTgyXyk7fS5zdDEwNTJ7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk4NF8pO2ZpbGw6I0YwRjBGMDt9LnN0MTA1M3tjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTg2Xyk7fS5zdDEwNTR7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMTk4OF8pO2ZpbGw6I0ZGRTc5Mjt9LnN0MTA1NXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8xOTkwXyk7ZmlsbDpub25lO3N0cm9rZTojMjY5RkU5O3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3QxMDU2e2ZpbGw6I0ZCRDEzRjt9LnN0MTA1N3tmaWxsOiNFMkI3MzA7fS5zdDEwNTh7ZmlsbDojRkZFNzkyO30uc3QxMDU5e2ZpbGw6IzVCQzFGRjt9LnN0MTA2MHtmaWxsOiNFMEREREQ7fS5zdDEwNjF7ZmlsbDojNkQ2RDZEO30uc3QxMDYye2ZpbGw6IzJDOTZEMTt9LnN0MTA2M3tmaWxsOiMxMjlCRTA7fS5zdDEwNjR7ZmlsbDojQTNBM0EzO30uc3QxMDY1e2ZpbGw6I0Q2QTUxRDt9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QxMDYyIiBkPSJNMjkuOSwxOEgyOHYtMy40YzAtMC45LTAuNy0xLjYtMS42LTEuNmgtMy44Yy0wLjksMC0xLjYsMC43LTEuNiwxLjZWMThoLTEuOWMtMC42LDAtMS4xLDAuNS0xLjEsMS4xdjcuOWMwLDAuNiwwLjUsMS4xLDEuMSwxLjFoMTAuOWMwLjYsMCwxLjEtMC41LDEuMS0xLjF2LTcuOUMzMSwxOC41LDMwLjUsMTgsMjkuOSwxOHogTTIyLjUsMTRoMy45YzAuMywwLDAuNSwwLjIsMC41LDAuNVYxOGgtNXYtMy41QzIyLDE0LjIsMjIuMiwxNCwyMi41LDE0eiIvPjxyZWN0IHg9IjIzIiB5PSIxNSIgY2xhc3M9InN0NTAiIHdpZHRoPSIzIiBoZWlnaHQ9IjIiLz48Zz48cGF0aCBjbGFzcz0ic3Q1MCIgZD0iTTE3LDI2Ljl2LTcuOWMwLTEuMSwwLjktMi4xLDIuMS0yLjFIMjB2LTIuNGMwLTEuNCwxLjItMi42LDIuNi0yLjZoMy44YzEuNCwwLDIuNiwxLjIsMi42LDIuNlYxN2gwLjljMC42LDAsMS4yLDAuMywxLjYsMC43VjkuNmMwLTEuMS0wLjktMi0yLTJIMTYuM2wtMy41LTMuMUgyLjVjLTEuMSwwLTIsMC45LTIsMnYxOWMwLDEuMSwwLjksMiwyLDJoMTQuNkMxNywyNy4zLDE3LDI3LjEsMTcsMjYuOXoiLz48cmVjdCB4PSIyMyIgeT0iMTUiIGNsYXNzPSJzdDUwIiB3aWR0aD0iMyIgaGVpZ2h0PSIyIi8+PC9nPjxwYXRoIGNsYXNzPSJzdDUxIiBkPSJNMjkuNSw3LjFoLTEzTDEzLjEsNEgyLjVDMS4xLDQsMCw1LjEsMCw2LjV2MTlDMCwyNi45LDEuMSwyOCwyLjUsMjhoMTQuOGMtMC4yLTAuMy0wLjMtMC42LTAuMy0xSDIuNUMxLjcsMjcsMSwyNi4zLDEsMjUuNXYtMTlDMSw1LjcsMS43LDUsMi41LDVoMTAuMmwzLjUsMy4xaDEzLjNjMC44LDAsMS41LDAuNywxLjUsMS41djcuN2MwLjYsMC40LDEsMSwxLDEuOFY5LjZDMzIsOC4zLDMwLjksNy4xLDI5LjUsNy4xeiIvPjwvc3ZnPg==');
        }
      }
    }

    .e-address {

      .e-address-list-item {

        .e-icons::before {
          content: '\e608';
        }
      }
    }
  }

  .e-filemanager,
  .e-fe-popup {

    .e-fe-open::before {
      content: '\e609';
    }

    .e-fe-cut::before {
      content: '\e604';
    }

    .e-fe-copy::before {
      content: '\e60d';
    }

    .e-fe-paste::before {
      content: '\e601';
    }

    .e-fe-delete::before {
      content: '\e602';
    }

    .e-fe-rename::before {
      content: '\e60c';
    }

    .e-fe-newfolder::before {
      content: '\e60b';
    }

    .e-fe-refresh::before {
      content: '\e606';
    }

    .e-fe-upload::before {
      content: '\e60f';
    }

    .e-fe-download::before {
      content: '\e603';
    }

    .e-fe-grid::before {
      content: '\e605';
    }

    .e-fe-large::before {
      content: '\e600';
    }

    .e-fe-select::before {
      content: '\e611';
    }

    .e-fe-details::before {
      content: '\e607';
    }

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

    .e-fe-search::before {
      content: '\e60e';
    }

    .e-fe-clear::before {
      content: '\e60a';
    }

    .e-fe-breadcrumb::before {
      content: '\e615';
    }

    .e-fe-drop-in::before {
      content: '\e22c';
    }

    .e-fe-drop-out::before {
      content: '\e22d';
    }

    .e-fe-no-drop::before {
      content: '\e22a';
    }

    .e-toolbar .e-hor-nav {

      .e-popup-up-icon::before {
        content: '\e613';
      }

      .e-popup-down-icon::before {
        content: '\e613';
      }
    }

    &.e-fe-m-filter {

      .e-fe-search::before {
        content: '\e610';
      }
    }
  }

  .e-fe-popup {

    .e-fe-dot::before {
      content: '\e614';
    }

    .e-fe-tick::before {
      content: '\e614';
    }
  }
}

@mixin visibility($value) {
  .e-checkbox-wrapper {
    visibility: $value;
    @if $fm-skin-name == 'fluent2' {
      padding: $fe-padding-none;
    }
  }
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin size($height, $width) {
  height: $height;
  width: $width;
}

@mixin checkbox($value) {
  .e-checkbox-wrapper .e-frame {
    border-width: $fe-checkbox-wrapper-border-width;
    line-height: $value;
    @if $fm-skin-name == 'fluent2' {
      @include size(16px, 16px);
      font-size: 10px;
      margin: $fe-margin-none;
    }
    @if $fm-skin-name == 'tailwind3' {
      line-height: $fe-checkbox-wrapper-line-height;
      @include size($fe-bigger-checkbox-wrapper-height, $fe-bigger-checkbox-wrapper-width);
    }
  }
}

@mixin icon-style($height, $width, $margin) {
  height: $height;
  margin: $margin;
  width: $width;
}

@mixin toolbar-height($height, $min-height) {
  height: $height;
  min-height: $min-height;
}

@mixin margin-padding($margin, $padding) {
  margin: $margin;
  padding: $padding;
}

@mixin empty-style($empty-min-width, $empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align, $empty-icon-height, $empty-icon-width, $empty-icon-margin, $empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align) {
  .e-empty {
    min-width: $empty-min-width;
  }

  .e-empty-content {
    @include empty-content($empty-content-font-size, $empty-content-margin, $empty-content-padding, $empty-content-text-align);
  }

  .e-empty-icon {
    @include icon-style($empty-icon-height, $empty-icon-width, $empty-icon-margin);
  }

  .e-empty-inner-content {
    @include empty-content($empty-inner-content-font-size, $empty-inner-content-margin, $empty-inner-content-padding, $empty-inner-content-text-align);
  }
}

@include export-module('FileManager-bigger') {
  .e-filemanager,
  .e-bigger .e-filemanager,
  .e-filemanager.e-bigger {

    &.e-fe-mobile {

      .e-toolbar {
        @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
          @include toolbar-height($fe-mobile-tb-height, $fe-mobile-tb-height);
        }
      }

      .e-toolbar .e-popup-up-icon.e-icons,
      .e-toolbar .e-popup-down-icon.e-icons,
      .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons {
        font-size: $fe-mobile-icon-font-size;
      }

      .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {

        @if $fm-skin-name == 'Material3' {
          padding: $fe-mobile-tb-icon-padding;
          font-size: $fe-mobile-tb-icon-font-size;
          line-height: $fe-mobile-tb-icon-font-size;
        }
        @else {
          &.e-fe-newfolder {
            padding-top: $fe-mobile-newfolder-padding-top;
          }
          &.e-fe-upload {
            padding-left: $fe-mobile-upload-padding-left;
          }
          &.e-fe-sort {
            padding-top: $fe-mobile-sort-padding-top;
          }
          &.e-fe-refresh {
            padding-top: $fe-mobile-refresh-padding-top;
          }
          &.e-fe-select  {
            padding-top: $fe-mobile-select-padding-top;
          }
          &.e-fe-large {
            padding: $fe-mobile-large-padding;
          }
          &.e-fe-grid {
            @if $fm-skin-name != 'Material3' and $fm-skin-name != 'material' and $fm-skin-name != 'fluent2' and $fm-skin-name != 'FluentUI' {
              padding: $fe-mobile-gridview-icon-padding;
            }
            @else {
              padding: $fe-mobile-grid-padding;
            }
          }
          &.e-fe-details {
            padding-top: $fe-mobile-details-padding-top;
          }
          &.e-fe-delete {
            padding-left: $fe-mobile-delete-padding-left;
          }
          &.e-fe-rename {
            padding-left: $fe-mobile-rename-padding-left;
            padding-top: $fe-mobile-rename-padding-top;
          }
          &.e-fe-download {
            padding-left: $fe-mobile-download-padding-left;
          }
          &.e-fe-cut {
            padding-left: $fe-mobile-cut-padding-left;
            padding-top: $fe-mobile-cut-padding-top;
          }
          &.e-fe-copy {
            padding-left: $fe-mobile-copy-padding-left;
          }
        }
      }
      &:not(.e-rtl) {
        .e-toolbar .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn.e-btn.e-tbtn-txt.e-icon-btn .e-icons.e-btn-icon.e-fe-grid {
          padding: $fe-tb-btn-icon-padding;
        }
      }

      .e-toolbar-left {
        .e-icons.e-fe-sort {
          display: inline-block;
          margin: $fe-margin-none;
          width: 14px;
        }

        .e-tbar-ddb-text,
        .e-toolbar-item .e-tbar-btn-text {
          display: none;
        }
      }

      .e-splitter .e-split-bar {
        display: none;
      }

      .e-address {
        height: $fe-mobile-search-height;

        .e-addressbar-ul {
          height: $fe-mobile-search-height;
          @if $fm-skin-name == 'material-dark' {
            padding: $fe-big-bc-padding;
          }
          @if $fm-skin-name == 'tailwind3' {
            padding: $fe-mobile-addressbar-ul-padding;
          }
        }

        .e-address-list-item .e-icons {
          font-size: $fe-big-bc-icon-font-size;
        }

        .e-list-text {
          font-size: $fe-big-bc-font-size;
          @if $fm-skin-name == 'tailwind3' {
            line-height: $fe-bigger-list-text-line-height;
          }
        }

        .e-search-wrap {
          min-width: 47px;
          width: auto;

          .e-input-group {
            display: none;
            @include size($fe-mobile-search-height, 100%);

            .e-clear-icon {
              margin: $fe-mobile-clear-icon-margin;
            }

            .e-input {
              margin: $fe-search-input-margin;
            }
          }
        }

        .e-fe-search {
          font-size: $fe-mobile-icon-font-size;
          @if $fm-skin-name !='Material3' {
            margin: $fe-mobile-address-search-margin;
          }
          right: 13px;
        }
      }

      @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
        .e-fe-splitter {
          height: calc(100% - #{$fe-mobile-tb-height + 1px});
        }
      }

      .e-view-container .e-fe-grid-container {
        height: calc($fe-full-height - $fe-mobile-search-height);
      }

      .e-grid {

        .e-fe-grid-icon .e-fe-icon {
          @include size($fe-mobile-grid-icon-height, $fe-mobile-grid-icon-size);
          @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
            margin: $fe-mobile-grid-icon-margin;
          }
        }

        .e-gridheader {
          display: none;
        }

        .e-content {
          .e-rowcell {
            border-bottom: $fe-mobile-grid-rowcell-border-bottom solid;
            border-bottom-color: $fe-border-color;
            @if $fm-skin-name == 'tailwind3' {
              padding: $fe-mobile-grid-content-padding;
            }
            &.e-fe-checkbox {
              padding: $fe-checkbox-padding;
            }
          }
        }

        .e-gridcontent .e-fe-grid-icon {
          @if $fm-skin-name == 'fabric-dark' {
            padding-left: $fe-mobile-grid-icon-padding;
            padding-right: $fe-mobile-grid-icon-padding;
          }
          @else if $fm-skin-name == 'tailwind3' {
            padding-left: $fe-mobile-grid-icon-padding;
            padding-right: $fe-mobile-grid-icon-padding;
          }
          @else {
            padding-left: $fe-mobile-grid-icon-padding;
            padding-right: $fe-mobile-grid-icon-padding;
          }
        }

        .e-fe-text {
          @include ellipsis;
        }

        @if $fm-skin-name == 'tailwind3' {
          .e-fe-text {
            font-size: $fe-bigger-grid-text-font-size;
            line-height: $fe-bigger-grid-text-line-height;
          }
        }

        @if $fm-skin-name == 'fluent2' {
          .e-fe-text {
            font-size: $text-base;
            line-height: 22px;
          }
          .e-fe-date,
          .e-fe-size {
            color: $content-text-color-alt2;
          }
        }
      }

      .e-large-icons {
        height: calc($fe-full-height - $fe-mobile-search-height);
      }

      .e-large-icons .e-list-parent {
        padding: $fe-padding-none;
        @if ($fm-skin-name == 'tailwind3') {
          padding: $fe-mobile-large-icon-parent-list-padding;
        }

        .e-list-item {
          display: inline-table;
          @include icon-style($fe-mobile-lg-item-height, $fe-mobile-lg-item-width, $fe-mobile-lg-item-margin);

          &.e-hover,
          &:hover {
            @include visibility(hidden);
          }

          &.e-active {
            @include visibility(visible);
          }

          .e-checkbox-wrapper {
            z-index: 999;
          }

          .e-list-text {
            margin: $fe-margin-none $fe-margin-auto;
            width: $fe-mobile-lg-item-inner-width;
            @if $fm-skin-name == 'tailwind3' {
              font-size: $fe-big-lg-text-font-size;
              line-height: $fe-bigger-list-text-line-height;
            }
            @if $fm-skin-name == 'Material3' {
              font-size: $fe-big-lg-text-font-size;
              padding: $fe-big-lg-text-padding;
            }
          }

          .e-list-img {
            margin: $fe-mobile-list-img-margin $fe-margin-auto;
            max-height: $fe-mobile-lg-img-height;
            max-width: $fe-mobile-lg-item-inner-width;
          }

          .e-list-icon {
            @include icon-style($fe-mobile-lg-icon-height, $fe-mobile-lg-icon-width, $fe-mobile-lg-icon-margin);
          }
        }
      }
    }

    &.e-fe-m-select {
      .e-large-icons .e-list-item.e-large-icon,
      .e-grid .e-content .e-row .e-rowcell {
        @include visibility(visible);
      }
    }

    &.e-fe-m-filter {

      .e-address {

        .e-search-wrap {
          @include margin-padding($fe-margin-none, $fe-padding-none);
          position: absolute;
          width: 100%;

          .e-input-group {
            display: inline-flex;
          }

          .e-input-group .e-input {
            height: $fe-auto-height;
            margin-left: $fe-big-search-wrap-input-margin-left;
          }

          .e-fe-search {
            left: 0;
            margin-left: $fe-big-search-wrap-margin-left;
            @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
              margin-top: $fe-big-search-wrap-margin-top;
            }
            @else if ($fm-skin-name == 'tailwind3') {
              margin-top: $fe-big-search-wrap-margin-top;
            }
            @else {
              margin-top: $fe-big-search-wrap-margin-top;
            }
            width: 30px;
          }
        }

        .e-addressbar-ul {
          visibility: hidden;
        }
      }
    }

    &.e-fe-m-filter.e-rtl {
      .e-address {
        .e-search-wrap {
          .e-input-group .e-input {
            margin-right: $fe-big-rtl-search-wrap-input-margin-right;
          }
          .e-fe-search {
            transform: rotate(180deg);
          }
        }
      }
    }

    &.e-rtl .e-grid {
      .e-gridheader,
      .e-gridcontent {
        .e-fe-grid-icon {
          padding-right: $fe-big-rtl-grid-icon-padding-right;
        }
      }
    }
  }

  .e-fe-popup.e-bigger,
  .e-bigger .e-fe-popup {

    .e-fe-error {
      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        font-size: $text-sm;
        line-height: 22px;
      }
    }

    &.e-dialog {
      .e-dlg-header-content {
        padding: $fe-big-dg-header-font-size;
      }
      td {
        @include ellipsis;
        font-size: $fe-big-dg-td-font-size;
        max-width: 205px;
        min-width: 45px;
        padding: $fe-big-dg-td-padding;
      }
    }
  }

  .e-bigger .e-filemanager,
  .e-filemanager.e-bigger {

    .e-toolbar {

      @if ($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2') {
        @include toolbar-height($fe-big-tb-height, $fe-big-tb-height);
        .e-toolbar-item:not(.e-separator) {
          min-height: $fe-big-tb-height;
          padding: 4px;
        }
      }

      .e-popup-up-icon.e-icons,
      .e-popup-down-icon.e-icons,
      .e-toolbar-items .e-toolbar-item .e-btn-icon.e-icons {
        font-size: $fe-mobile-icon-font-size;
      }

      .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn {
        &.e-tbar-btn {
          padding: $fe-big-tb-ddb-btn-padding;

          &.e-active,
          &:hover,
          &:focus {
            padding: $fe-big-tb-ddb-btn-hvr-padding;
          }
        }

        &.e-tbar-btn .e-btn-icon.e-icons.e-caret {
          @if $fm-skin-name == 'tailwind' {
            font-size: 22px;
            @include icon-style(22px, 22px, 4px 4px 0);
            padding: $fe-big-tb-caret-icon-padding;
          }
          @else {
            padding: $fe-big-tb-caret-icon-padding;
          }
        }
      }

      .e-toolbar-pop .e-toolbar-item .e-dropdown-btn .e-btn-icon.e-icons.e-caret {
        padding: $fe-big-tb-popup-caret-icon-padding;
      }
    }
    @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
      .e-fe-clone {
        .e-fe-content {
          .e-fe-name {
            font-size: $text-base;
            line-height: 24px;
            margin: 7px 12px 7px 0;
          }

          .e-fe-icon {
            @include icon-style(24px, 24px, 7px 12px);
          }
        }

        .e-fe-count {
          font-size: $text-sm;
          @include size(24px, 24px);
          line-height: 22px;
        }
      }
    }

    .e-treeview {

      & > .e-ul {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding-left: $fe-big-treeview-ul-padding-left;
        }
      }

      @if $fm-skin-name == 'tailwind3' {
        .e-list-icon {
          height: $fe-bigger-treeview-list-icon-height;
          width: $fe-bigger-treeview-list-icon-width;
        }
      }

      .e-list-parent .e-list-item {
        .e-fullrow {
          height: $fe-big-tv-fullrow-height;
        }
        .e-list-text {
          height: $fe-big-tv-node-height;
          line-height: $fe-big-tv-node-lheight;
        }
      }

      .e-text-content {
        @if ($fm-skin-name == 'tailwind3') {
          height: $fe-big-tv-fullrow-height;
        }
      }
    }

    .e-address {
      height: $fe-big-address-height;

      .e-breadcrumb-menu .e-breadcrumb-submenu {
        height: $fe-big-bc-submenu-height;
        @if $fm-skin-name == 'material-dark' {
          margin-top: -3px;
        }
      }

      .e-address-list-item {
        @if ($fm-skin-name != 'Material3') {
          height: $fe-big-bc-li-item-height;
        }
        .e-icons {
          font-size: $fe-big-bc-icon-font-size;
          @if ($fm-skin-name == 'tailwind3') {
            margin: $fe-big-bc-icon-margin;
          }
        }
      }

      .e-addressbar-ul {
        padding: $fe-big-bc-padding;
      }

      .e-list-text {
        font-size: $fe-big-bc-font-size;
        line-height: $fe-big-bc-text-size;
        padding: $fe-big-bc-text-padding;
      }

      .e-search-wrap {
        min-width: 51px;
        padding: $fe-big-search-padding;

        .e-input-group {
          height: $fe-big-search-height;

          .e-input:focus {
            padding: $fe-padding-none;
          }

          .e-input {
            @if ($fm-skin-name == 'material' or $fm-skin-name == 'material-dark') {
              height: 39px;
            }
            @else if ($fm-skin-name == 'FluentUI') {
              height: 30px;
            }
            @else if ($fm-skin-name == 'Material3') {
              margin: $fe-big-search-input-margin;
              height: $fe-big-search-input-height;
            }
          }

          .e-clear-icon::before {
            @if ($fm-skin-name == 'bootstrap5') {
              margin: $fe-margin-none;
            }
          }
        }
      }

      .e-fe-search {
        @if $fm-skin-name == 'tailwind' {
          font-size: 16px;
          margin: 7px 4px;
        }
        @else if $fm-skin-name == 'bootstrap5' {
          font-size: 16px;
          margin: 4px;
        }
        @else if $fm-skin-name == 'FluentUI' {
          font-size: 18px;
          margin: 3px;
        }
        @else if $fm-skin-name == 'Material3' {
          @include margin-padding($fe-search-icon-margin, $fe-big-search-input-padding);
        }
        @else if ($fm-skin-name == 'tailwind3') {
          font-size: $fe-bigger-search-font-size;
          line-height: $fe-bigger-search-line-height;
          margin: $fe-big-address-search-margin;
          padding: $fe-big-address-search-padding;
        }
        @else {
          margin: 7px 0;
        }
      }
    }

    .e-fe-splitter {
      height: calc(#{$fe-full-height} - #{if($fm-skin-name == 'Material3' or $fm-skin-name == 'fluent2', $fe-big-tb-height + 1px, $fe-big-tb-height)});
    }

    .e-view-container .e-fe-grid-container {
      height: calc($fe-full-height - $fe-big-address-height);
    }

    .e-grid {
      @include checkbox($fe-big-cb-line-height);
      @if $fm-skin-name == 'tailwind3' {
        .e-checkbox-wrapper .e-frame {
          margin: $fe-margin-none;
        }
      }
      .e-gridheader {
        .e-headercell {
          height: $fe-big-grid-header-height;
          @if $fm-skin-name == 'fluent2' {
            .e-headercelldiv.e-headerchkcelldiv {
              margin-left: -6px;
            }
          }
        }
        .e-headertext {
          font-size: $fe-big-grid-header-font-size;
        }
      }

      .e-gridheader,
      .e-gridcontent {

        .e-rowcell {
          font-size: $fe-big-grid-content-font-size;

          @if $fm-skin-name == 'Material3' {
            padding: 14px 12px;
            line-height: 20px;

            .e-fe-text {
              font-size: $fe-grid-content-name-font-size;
              line-height: 20px;
            }
          }
          .e-fe-text {
            font-size: $fe-big-grid-content-name-font-size;
          }
        }

        .e-fe-checkbox {
          padding-left: $fe-big-grid-content-checkbox-padding-left;
        }

        .e-fe-grid-icon {
          @if $fm-skin-name == 'bootstrap5' or $fm-skin-name == 'tailwind' {
            padding-left: $fe-big-grid-icon-padding-left;
          }
          @else {
            padding-left: $fe-big-grid-icon-padding-left;
          }
        }
      }

      .e-content {
        tr.e-row.e-fe-drop-folder .e-rowcell {
          @if $fm-skin-name == 'tailwind' {
            padding-bottom: 11px;
            padding-top: 11px;
          }
        }
      }

      .e-fe-icon {
        @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'tailwind3' {
          @include size($fe-mobile-grid-icon-height, 24px);
        }
        @else {
          margin: $fe-big-grid-icon-margin;
        }
      }

      @include empty-style($fe-big-grid-empty-min-width, $fe-big-grid-empty-content-font-size, $fe-big-grid-empty-content-margin, $fe-big-grid-empty-content-padding, $fe-big-grid-empty-content-text-align, $fe-big-grid-empty-icon-height, $fe-big-grid-empty-icon-width, $fe-big-grid-empty-icon-margin, $fe-big-grid-empty-inner-content-font-size, $fe-big-grid-empty-inner-content-margin, $fe-big-grid-empty-inner-content-padding, $fe-big-grid-empty-inner-content-text-align);

      .e-empty-inner-content {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'tailwind3' and $fm-skin-name != 'bootstrap5' {
          opacity: $fe-big-grid-empty-inner-content-opacity;
        }
      }

      &.e-rtl .e-checkbox-wrapper .e-frame {
        @if $fm-skin-name == 'FluentUI' {
          margin-right: $fe-big-rtl-grid-checkbox-wrapper-margin-right;
        }
        @else{
          margin-right: $fe-big-rtl-grid-checkbox-wrapper-margin-right;
        }
      }
    }

    .e-large-icons {
      @include checkbox($fe-big-cb-line-height);
      height: calc($fe-full-height - $fe-big-address-height);

      .e-list-parent {
        padding: $fe-big-lg-padding;
      }

      .e-list-item {
        @include icon-style($fe-big-lg-item-height, $fe-big-lg-item-width, $fe-big-lg-item-margin);
      }

      .e-text-content {
        height: $fe-big-lg-item-inner-height;
      }

      .e-list-text {
        @if ($fm-skin-name == 'tailwind3') {
          line-height: $fe-bigger-list-text-line-height;
        }
        font-size: $fe-big-lg-text-font-size;
        padding: $fe-big-lg-text-padding;
        width: $fe-big-lg-text-inner-width;
      }

      .e-list-img {
        max-height: $fe-big-lg-img-height;
        max-width: $fe-big-lg-item-inner-width;
      }

      .e-list-icon {
        @include icon-style($fe-big-lg-icon-height, $fe-big-lg-icon-width, $fe-big-lg-icon-margin);
      }

      @include empty-style($fe-big-lg-icon-empty-min-width, $fe-big-lg-icon-empty-content-font-size, $fe-big-lg-icon-empty-content-margin, $fe-big-lg-icon-empty-content-padding, $fe-big-lg-icon-empty-content-text-align, $fe-big-lg-icon-empty-icon-height, $fe-big-lg-icon-empty-icon-width, $fe-big-lg-icon-empty-icon-margin, $fe-big-lg-icon-empty-inner-content-font-size, $fe-big-lg-icon-empty-inner-content-margin, $fe-big-lg-icon-empty-inner-content-padding, $fe-big-lg-icon-empty-inner-content-text-align);

      .e-empty-inner-content {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' and $fm-skin-name != 'tailwind3' {
          opacity: $fe-big-lg-icon-empty-inner-content-opacity;
        }
      }
    }

    &.e-rtl {

      .e-treeview > .e-ul {
        @if $fm-skin-name != 'tailwind' and $fm-skin-name != 'bootstrap5' {
          padding: $fe-big-rtl-grid-treeview-ul-padding;
        }
      }

      @if $fm-skin-name =='Material3' {
        .e-address {
          .e-search-wrap .e-input-group .e-input {
            margin: $fe-big-rtl-search-input-margin;
          }

          .e-fe-search {
            padding: $fe-big-rtl-search-input-padding;
          }
        }
      }

      @if $fm-skin-name == 'tailwind' or $fm-skin-name == 'bootstrap5' {
        .e-fe-clone .e-fe-name {
          margin: 7px 0 7px 12px;
        }
      }

      .e-grid {

        .e-gridheader,
        .e-gridcontent {

          .e-fe-checkbox {
            padding-right: $fe-big-rtl-grid-checkbox-padding-right;
          }
        }
      }
    }

    .e-fe-overlay {
      height: $fe-big-overlay-height;
      @if $fm-skin-name == 'fluent2' {
        height: calc(100% - 88px);
      }
    }
  }

  .e-filemanager.e-fe-no-toolbar.e-fe-mobile,
  .e-bigger .e-filemanager.e-fe-no-toolbar {
    .e-fe-splitter {
      height: $fe-bigger-splitter-height;
    }
  }

  @media (max-width: 469px) {
    .e-bigger .e-filemanager,
    .e-filemanager.e-bigger {
      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
        min-width: $fe-mobile-lg-item-minwidth;
        width: $fe-mobile-lg-item-width-two;
      }
    }
  }

  @media (min-width: 470px) and (max-width: 625px) {
    .e-bigger .e-filemanager,
    .e-filemanager.e-bigger {
      &.e-fe-mobile .e-large-icons .e-list-parent .e-list-item {
        min-width: $fe-mobile-lg-item-minwidth;
        width: $fe-mobile-lg-item-width-three;
      }
    }
  }

  @media (min-width: 360px) and (max-width: 500px) {
    @if $skin-name == 'FluentUI' {
      .e-bigger .e-filemanager .e-grid .e-checkbox-wrapper .e-frame {
        position: relative;
        right: 1px;
      }
    }
  }
}

/*! Form bootstrap theme wise override definitions and variables */

// form field styles
$field-label-color: $grey-light-font !default;
$field-label-font-size: 12px !default;
$field-label-margin-bottom: 4px !default;
$field-label-font-weight: 400 !default;
$form-layout-margin-top: 20px !default;
$field-label-right-margin-top: 5px !default;

// group title styles
$group-title-color: $grey-light-font !default;
$group-title-border-color: $grey-base !default;
$form-group-border-none: none !default;
$form-padding-zero: 0 !default;
$form-margin-zero: 0 !default;
$form-group-title-position: relative !default;
$form-group-title-display: inline-block !default;
$form-group-title-padding-bottom: 8px !default;
$form-group-title-margin-bottom: 4px !default;
$form-group-title-font-size: 16px !default;
$form-group-title-border-position: absolute !default;
$form-group-title-border-bottom: 0 !default;
$form-group-title-border-left: 0 !default;
$form-group-title-border-width: 100% !default;
$form-group-title-border-height: 1px !default;
$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;

//tooltip styles
$form-tooltip-background-color: color.adjust($brand-danger, $lightness: 25%) !default;
$form-tooltip-color:color.adjust($brand-danger, $lightness: 30%) !default;
$form-validation-message-font-size: 12px;

// form common styles
$form-display-flex: flex !default;
$form-label-top-direction: column !default;
$form-label-text-align: center !default;
$form-button-left-justify: flex-start !default;
$form-button-right-justify: flex-end !default;
$form-button-center-justify: center !default;
$form-button-border-radius: 20px !default;
$form-button-padding: 7px 16px !default;

$form-data-label-margin-right: 12px !default;
$form-switch-wrapper-margin-top: 3px !default;
$form-switch-wrapper-margin-left: 5px !default;
$form-button-margin-top: 24px !default;
$form-button-gap: 10px !default;
$form-child-layout-margin-top: 0 !default;
$form-item-wrapper-width: calc(75% - 12px);
$form-label-q-width: 25%;
$form-full-width: 100%;

@include export-module('data-form-layout') {

  /*! data-form layout */
  #{&}.e-data-form {

    #{if(&, '&', '*')} .e-form-label {
      font-size: $field-label-font-size;
      margin-bottom: $field-label-margin-bottom;
      font-weight: $field-label-font-weight;
    }

    #{if(&, '&', '*')} .e-form-layout {
      display: grid;
    }

    /* stylelint-disable property-no-vendor-prefix */
    #{if(&, '&', '*')} .e-grid-col-2 {
      -ms-grid-columns: repeat(2, 1fr);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-3 {
      -ms-grid-columns: repeat(3, 1fr);
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-4 {
      -ms-grid-columns: repeat(4, 1fr);
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-5 {
      -ms-grid-columns: repeat(5, 1fr);
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-6 {
      -ms-grid-columns: repeat(6, 1fr);
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-7 {
      -ms-grid-columns: repeat(7, 1fr);
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-8 {
      -ms-grid-columns: repeat(8, 1fr);
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-9 {
      -ms-grid-columns: repeat(9, 1fr);
      grid-template-columns: repeat(9, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-10 {
      -ms-grid-columns: repeat(10, 1fr);
      grid-template-columns: repeat(10, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-11 {
      -ms-grid-columns: repeat(11, 1fr);
      grid-template-columns: repeat(11, minmax(0, 1fr));
    }

    #{if(&, '&', '*')} .e-grid-col-12 {
      -ms-grid-columns: repeat(12, 1fr);
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    /* stylelint-enable property-no-vendor-prefix */
    #{if(&, '&', '*')} .e-colspan-1 {
      grid-column: span 1/span 1;
    }

    #{if(&, '&', '*')} .e-colspan-2 {
      grid-column: span 2/span 2;
    }

    #{if(&, '&', '*')} .e-colspan-3 {
      grid-column: span 3/span 3;
    }

    #{if(&, '&', '*')} .e-colspan-4 {
      grid-column: span 4/span 4;
    }

    #{if(&, '&', '*')} .e-colspan-5 {
      grid-column: span 5/span 5;
    }

    #{if(&, '&', '*')} .e-colspan-6 {
      grid-column: span 6/span 6;
    }

    #{if(&, '&', '*')} .e-colspan-7 {
      grid-column: span 7/span 7;
    }

    #{if(&, '&', '*')} .e-colspan-8 {
      grid-column: span 8/span 8;
    }

    #{if(&, '&', '*')} .e-colspan-9 {
      grid-column: span 9/span 9;
    }

    #{if(&, '&', '*')} .e-colspan-10 {
      grid-column: span 10/span 10;
    }

    #{if(&, '&', '*')} .e-colspan-11 {
      grid-column: span 11/span 11;
    }

    #{if(&, '&', '*')} .e-colspan-12 {
      grid-column: span 12/span 12;
    }

    .e-label-position-left {

      .e-form-item-wrapper {
        flex: 1 1 auto;
        max-width: $form-item-wrapper-width;
      }

      .e-form-label {
        margin-right: $form-data-label-margin-right;
        width: $form-label-q-width;
        text-align: end;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
      }

      .validation-message {
        display: flex;
      }
    }

    #{if(&, '&', '*')} .e-form-group {
      border: $form-group-border-none;
      padding: $form-padding-zero;
      margin: $form-margin-zero;
      margin-top: $form-layout-margin-top;

      #{if(&, '&', '*')} .e-group-title {
        position: $form-group-title-position;
        display: $form-group-title-display;
        padding-bottom: $form-group-title-padding-bottom;

        /* Gap between text and border */
        margin-bottom: $form-group-title-margin-bottom;
        font-size: $form-group-title-font-size;

        #{if(&, '&', '*')}::after {
          content: '';
          position: $form-group-title-border-position;
          bottom: $form-group-title-border-bottom;
          left: $form-group-title-border-left;
          width: $form-group-title-border-width;
          height: $form-group-title-border-height;
          border-bottom: $form-group-title-border-bottom-style;
        }
      }
    }

    #{if(&, '&', '*')} .e-label-position-top {
      display: $form-display-flex;
      flex-direction: $form-label-top-direction;
      margin-top: $form-layout-margin-top;

      .e-label-right {
        display: flex;
        align-items: center;

        .e-switch-wrapper + .e-form-label {
          margin-top: $form-switch-wrapper-margin-top;
          margin-left: $form-switch-wrapper-margin-left;
        }

        .e-checkbox-wrapper + .e-form-label {
          margin-top: $field-label-right-margin-top;
        }
      }
    }

    #{if(&, '&', '*')} .e-label-position-left {
      display: $form-display-flex;
      text-align: $form-label-text-align;
      margin-top: $form-layout-margin-top;
    }

    #{if(&, '&', '*')} .e-button-left {
      justify-content: $form-button-left-justify;
    }

    #{if(&, '&', '*')} .e-button-right {
      justify-content: $form-button-right-justify;
    }

    #{if(&, '&', '*')} .e-button-center {
      justify-content: $form-button-center-justify;
    }

    #{if(&, '&', '*')} .e-button-left,
    #{if(&, '&', '*')} .e-button-right,
    #{if(&, '&', '*')} .e-button-center,
    #{if(&, '&', '*')} .e-button-stretch {
      margin-top: $form-button-margin-top;
      display: $form-display-flex;
      gap: $form-button-gap;

      #{if(&, '&', '*')} .e-btn {
        border-radius: $form-button-border-radius;
        padding: $form-button-padding;
      }
    }

    #{if(&, '&', '*')} .e-button-stretch {
      #{if(&, '&', '*')} .e-btn {
        width: $form-full-width;
      }
    }

    > :first-child.e-form-layout {
      margin-top: $form-child-layout-margin-top;
    }
  }
}

@include export-module('data-form-theme') {

  /*! data-form theme */
  #{&}.e-data-form {

    #{if(&, '&', '*')} .e-form-label {
      color: $field-label-color;
    }

    #{if(&, '&', '*')} .e-group-title {
      color: $group-title-color;
    }

    #{if(&, '&', '*')} .validation-message {
      color: $form-tooltip-color;
      font-size: $form-validation-message-font-size;
      font-style: italic;
    }
  }

  #{&}.e-tooltip-wrap.e-popup.e-error-tooltip {
    @if $skin-name != 'fluent2' {
      background-color: $form-tooltip-background-color;
      border: $form-tooltip-background-color;
    }

    #{if(&, '&', '*')} .e-tip-content .validation-message {
      color: $form-tooltip-color;
    }

    #{if(&, '&', '*')} .e-arrow-tip {

      #{if(&, '&', '*')} .e-arrow-tip-outer.e-tip-top,
      #{if(&, '&', '*')} .e-arrow-tip-inner.e-tip-top {
        border-bottom-color: $form-tooltip-background-color;
        color: $form-tooltip-background-color;
      }
    }
  }
}

$treegrid-right-arrow-icon: '\e22f' !default;
$treegrid-toolbar-expand-icon: '\e558' !default;
$treegrid-toolbar-collapse-icon: '\e557' !default;
$treegrid-right-arrow-icon-color: $grey-dark-font !default;
$treegrid-right-arrow-icon-font-size: 10px !default;
$treegrid-right-arrow-icon-padding: 0 !default;
$treegrid-right-arrow-icon-height: 16px !default;
$treegrid-right-arrow-icon-width: 16px !default;
$treegrid-right-arrow-icon-vertical-align: middle;
$treegrid-content-right-padding: 8px !default;
$treegrid-bigger-icon-size: 18px !default;
$treegrid-smaller-icon-size: 16px !default;
$treegrid-bigger-icon-font-size: 10px !default;
$treegrid-right-arrow-hover-color: $grey-dark-font !default;
$treegrid-toolbar-indent-icon: '\e33f' !default;
$treegrid-toolbar-outdent-icon: '\e35d' !default;
$treegrid-rowdrag-childborder-border: 1px solid $brand-primary !default;
$childborder-color: $brand-primary;
$error-elem-color: #e3165b;
$error-elem-content: '\e22a' !default;
$treegrid-frame-bigger-icon-height: 20px !default;
$treegrid-frame-bigger-icon-width: 20px !default;
$treegrid-frame-icon-height: 18px !default;
$treegrid-frame-icon-width: 18px !default;
$treegrid-rowdd-topbottom-border: 1px solid #0070f0 !default;
$treegrid-rowdd-boxshadow:  #0070f0 !default;
$treegrid-rowdd-childborder-width: 1px 0 0 !default;
$treegrid-lastrowdd-childborder-width: 1px 0 !default;
$treegrid-rtl-rowdd-childborder-width: 1px 0 0 !default;

@mixin rowcell-container {
  overflow: hidden;
  text-overflow: ellipsis;
}
@mixin grid-wrap {
  display: inline-block;
  white-space: normal;
  word-wrap: break-word;
}
@mixin display-align {
  display: inline-block;
  vertical-align: text-bottom;
}
@mixin drop-bottom-child {
  box-shadow: 0 1px 0 0 $childborder-color;
  position: relative;
  z-index: 1;
}
@mixin childborder {
  border-bottom: $treegrid-rowdrag-childborder-border;
  border-top: $treegrid-rowdrag-childborder-border;
  box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
}
@mixin dropbottom {
  border-bottom: $treegrid-rowdd-topbottom-border;
  box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
}
@mixin droptop {
  border-top: $treegrid-rowdd-topbottom-border;
  box-shadow: 0 0 0 0 $treegrid-rowdd-boxshadow;
}
@include export-module('tree-layout') {

  @media print {
    .e-treecell-child {
      width: 10px;
      display: inline-block;
    }
  }

  .e-treegrid {
    .e-icons.e-none::before {
      content: '';
    }

    .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowdragdrop.e-childborder:first-child:not(.e-dropbottom,.e-droptop),
    .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowcell.e-childborder:first-child:not(.e-dropbottom,.e-droptop) {
      border-left: $treegrid-rowdrag-childborder-border;
    }

    .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row.e-summaryrow .e-rowcell:empty {
      height: auto;
    }

    .e-gridheader {
      .e-headercell .e-css.e-hierarchycheckbox {
        height: 20px;
        @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
          padding-top: 0;
        }
        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark'{
          position: relative;
          bottom: 8px;
        }
        vertical-align: middle;
      }
    }

    .e-treegridexpand::before,
    .e-treegridcollapse::before {
      text-align: center;
      vertical-align: $treegrid-right-arrow-icon-vertical-align;
    }

    span.e-icons.e-treegridcollapse{
      @if $skin-name == 'highcontrast'{
        text-align: center;
        vertical-align: middle;
      }
    }

    .e-treecolumn-container{
      .e-treecell-icon {
        width: 4px;
        display: inline-block;
      }

      .e-treecell-child{
        width: 10px;
        display: inline-block;
      }
    }

    .e-expand-iconstyle{
      width: 16px;
    }

    .e-print-layout{
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    tr.e-childrow-hidden{
      display: none;
    }

    .e-rowcell:not(.e-gridclip) {
      .e-treecolumn-container {
        display: block;
        @include rowcell-container;

        span.e-treecell {
          display: contents;
          @include rowcell-container;
        }
      }
    }

    .e-templatecell .e-treecolumn-container span {
      vertical-align: middle;
    }

    .e-treegridexpand:hover::before,
    .e-treegridcollapse:hover::before {
      color: $treegrid-right-arrow-hover-color;
    }

    @if $skin-name == 'fluent2' {
      .e-selectionbackground.e-active .e-treegridexpand::before,
      .e-selectionbackground.e-active .e-treegridcollapse::before,
      .e-gridhover .e-gridcontent td.e-rowcell:hover .e-treegridexpand::before,
      .e-gridhover .e-gridcontent td.e-rowcell:hover .e-treegridcollapse::before,
      .e-selectionbackground.e-active .e-treegridexpand:hover::before,
      .e-selectionbackground.e-active .e-treegridcollapse:hover::before,
      .e-gridhover .e-gridcontent td.e-rowcell:hover .e-treegridexpand:hover::before,
      .e-gridhover .e-gridcontent td.e-rowcell:hover .e-treegridcollapse:hover::before {
        color: $icon-color-pressed;
      }
    }

    .e-rowcell.e-treerowcell.e-treegridcheckbox {
      @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
        padding-left: $treegrid-treecell-padding;
      }
    }

    .e-row[aria-expanded = 'true'] .e-treecell {
      @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
        font-size: 14px;
        font-weight: bold;
      }
    }

    .e-rtl {
      .e-treegridcollapse {
        transform: scale(-1);
      }
    }

    .e-treegridexpand {
      transform: rotate(90deg);
    }

    .e-treerowexpanded:not(.e-hiddenrow) {
      display: table-row;
    }

    .e-treerowcollapsed {
      display: none;
    }

    .e-treecheckbox-container {
      display: block;
      @include rowcell-container;

      :not(.e-treecheckbox) {
        white-space: nowrap;
      }
    }

    .e-treecheckbox {
      @include rowcell-container;
      vertical-align: middle;
    }

    .e-treecolumn-container {
      span {
        @include display-align;
      }
    }

    .e-templatecell .e-treecolumn-container span {
      vertical-align: middle;
    }

    .e-cloneproperties .e-treecolumn-container {
      span {
        vertical-align: text-top;
      }
    }

    .e-cloneproperties .e-rowcell:not(.e-gridclip) .errorValue .e-treecolumn-container {
      display: table-row;
    }

    .e-hierarchycheckbox .e-frame {
      @if $skin-name == 'bootstrap' or $skin-name == 'boostrap-dark' or $skin-name == 'fabric-dark' or $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
        font-size: 10px;
        height: 16px;
        line-height: 11px;
        padding: 2px 0;
        width: 16px;
      }
      @else {
        height: $cbox-height;
        width: $cbox-width;
      }
    }

    .e-checkselection {
      .e-frozenheader .e-rowcell,
      .e-movableheader .e-rowcell,
      .e-frozencontent .e-rowcell,
      .e-movablecontent .e-rowcell {
        line-height: 21px;
      }
    }

    .e-treegridexpand,
    .e-treegridcollapse {
      color: $treegrid-right-arrow-icon-color;
      cursor: pointer;
      font-size: $treegrid-right-arrow-icon-font-size;
      height: $treegrid-right-arrow-icon-height;
      padding: $treegrid-right-arrow-icon-padding;
      text-align: center;
      vertical-align: text-bottom;
      width: $treegrid-right-arrow-icon-width;
    }

    .e-treecell {
      display: table-cell;
      @if $skin-name == 'bootstrap5' or $skin-name == 'boostrap5-dark' or $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2' {
        line-height: 19px;
      }
      @else {
        line-height: normal;
      }
    }

    .e-grid {
      &.e-wrap .e-rowcell .e-treecolumn-container,
      &.e-wrap .e-rowcell .e-treecheckbox-container {
        white-space: nowrap;
      }

      &.e-wrap .e-rowcell .e-treecolumn-container .e-treecell {
        @include grid-wrap;
      }
      &.e-wrap .e-cloneproperties .e-rowcell .e-treecolumn-container .e-treecell {
        display: inline-block;
        white-space: nowrap;
        word-wrap: break-word;
      }

      &.e-wrap .e-rowcell .e-treecheckbox-container .e-treecheckbox {
        @include grid-wrap;
      }
      &.e-wrap .e-treecolumn-container {
        span {
          vertical-align: middle;
        }
      }
    }

    #{if(&, '&', '*')}.e-grid.e-print-grid-layout .e-icons {
      display: inline-block;
    }

    .e-treecheckselect,
    .e-treeselectall {
      margin: 0;
      opacity: 0;
      position: absolute;
      width: 0;
    }

    .e-detailheadercell,
    .e-detailcell-visible,
    .e-headercontent .e-table .e-detail-intent,
    .e-gridcontent .e-table .e-detail-intent,
    .e-table .e-detailrow .e-detailindentcell,
    .e-table .e-detailrowexpand,
    .e-table .e-detailrowcollapse,
    tr.e-detailrow.e-childrow-hidden {
      display: none;
    }

    .e-table-cell::before {
      content: none;
      display: none;
    }

    .e-table-cell {
      display: table-cell;
    }

    .e-icons.e-errorelem {
      padding-left: 10px;
      @include display-align;
    }

    .e-errorelem::before {
      color: $error-elem-color;
      content: $error-elem-content;
      transform: rotate(180deg);
    }

    .e-gridcontent {
      td.e-childborder {
        border-color: $childborder-color;
        border-width: $treegrid-rowdd-childborder-width;
        @include drop-bottom-child;
        &.e-leftfreeze {
          position: sticky;
        }
      }

      td.e-rowcell.e-childborder.e-dragborder,
      td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
        box-shadow: 0 1px 0 0 $childborder-color;
      }

      td.e-rowcell.e-dragborder,
      tr.e-row:first-child .e-rowcell.e-dragborder,
      .e-rowdragdrop.e-dragborder {
        box-shadow: 0 0 0 0;
      }

      td.e-childborder:first-child {
        border-left: $treegrid-rowdrag-childborder-border;
        @include drop-bottom-child;
      }

      td.e-rowcell.e-childborder:last-child,
      td.e-lastrowcell.e-childborder:last-child {
        border-right: $treegrid-rowdrag-childborder-border;
      }

      td.e-lastrowcell.e-childborder {
        border-width: $treegrid-lastrowdd-childborder-width;
      }

      td.e-lastrowcell.e-childborder:first-child {
        border-left: $treegrid-rowdrag-childborder-border;
      }

      td.e-dropbottom:first-child,
      td.e-rowcell.e-dropbottom,
      td.e-dropbottom {
        @include drop-bottom-child;
        &.e-leftfreeze {
          position: sticky;
        }
      }

      td.e-droptop:first-child,
      td.e-rowcell.e-droptop {
        border-top-color: $childborder-color;
        border-width: $treegrid-rowdd-childborder-width;
      }

      td.e-lastrowcell.e-dropbottom {
        border-bottom-color: $childborder-color;
      }

      td.e-rowdragdrop.e-droptop.e-dragborder {
        box-shadow: 0 0 0 0;
      }

      .e-gridheader .e-firstrow-dragborder {
        height: 1px;
      }

      .e-lastrow-dragborder {
        height: 0;
      }
    }

    .e-gridheader .e-firstrow-dragborder,
    .e-droptop .e-lastrow-dragborder,
    .e-gridheader .e-firstrow-dragborder tr:first-child.e-dropbottom {
      height: 0;
    }

    .e-treegrid-relative {
      position: relative;
    }

    .e-gridheader .e-firstrow-border,
    .e-gridcontent .e-lastrow-border {
      background-color: $childborder-color;
      bottom: 0;
      display: none;
      height: 1px;
      position: absolute;
      z-index: 1;
    }

    .e-gridcontent .e-rowcell{
      @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark'{
        line-height: 17px;
      }
    }

    .e-grid .e-gridcontent {
      tr.e-row:first-child {
        td.e-rowcell.e-childborder,
        td.e-rowdragdrop.e-childborder {
          @include childborder;
        }

        td.e-rowcell.e-droptop,
        td.e-rowdragdrop.e-droptop {
          border-top: $treegrid-rowdd-topbottom-border;
        }
      }

      td.e-rowcell {
        &.e-childborder {
          @include childborder;
        }
      }

      td.e-rowdragdrop {
        &.e-childborder {
          @include childborder;
        }
      }

      td.e-rowcell {
        &.e-dropbottom {
          @include dropbottom;
        }
        &.e-droptop {
          @include droptop;
        }
      }

      td.e-rowdragdrop {
        &.e-dropbottom {
          @include dropbottom;
        }
        &.e-droptop {
          @include droptop;
        }
      }
    }

    .e-grid.e-rtl {
      .e-gridheader .e-firstrow-dragborder,
      .e-droptop .e-lastrow-dragborder {
        height: 0;
      }

      .e-gridcontent {
        td.e-childborder {
          border-color: $childborder-color;
          border-width: $treegrid-rtl-rowdd-childborder-width;
          position: relative;
          z-index: 1;
          &.e-leftfreeze {
            position: sticky;
          }
        }

        td.e-rowcell.e-dragborder,
        tr.e-row:first-child .e-rowcell.e-dragborder,
        .e-rowdragdrop.e-dragborder {
          box-shadow: 0 0 0 0;
        }

        td.e-childborder:first-child {
          border-right: $treegrid-rowdrag-childborder-border;
          @include drop-bottom-child;
        }

        td.e-rowcell.e-childborder:last-child,
        td.e-lastrowcell.e-childborder:first-child {
          border-left: $treegrid-rowdrag-childborder-border;
        }

        td.e-lastrowcell.e-childborder {
          border-width: $treegrid-lastrowdd-childborder-width;
        }

        td.e-lastrowcell.e-childborder:last-child {
          border-right: $treegrid-rowdrag-childborder-border;
        }

        td.e-droptop:first-child,
        td.e-rowcell.e-droptop {
          border-top-color: $childborder-color;
          border-width: $treegrid-rowdd-childborder-width;
        }

        td.e-lastrowcell.e-dropbottom {
          border-bottom-color: $childborder-color;
        }
      }
    }
  }

  .e-treelistgrid.e-print-grid-layout {
    .e-icons.e-none::before {
      content: '';
    }

    .e-treecolumn-container {
      .e-icons:not(.e-frame) {
        display: inline-block;
      }
    }

    .e-treegridexpand {
      transform: rotate(90deg);
    }
  }
}

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

@include export-module('treegrid-bootstrap-dark-icons') {
  #{&}.e-treegrid,
  .e-grid-menu {
    .e-indent::before {
      content: '\e33f';
    }

    .e-outdent::before {
      content: '\e35d';
    }
  }

  .e-treegrid {
    .e-toolbar-item {
      .e-expand::before {
        content: '\e558';
      }

      .e-collapse::before {
        content: '\e557';
      }

      .e-indent::before {
        content: '\e33f';
      }

      .e-outdent::before {
        content: '\e35d';
      }
    }
  }

  .e-treegrid,
  .e-grid {
    .e-treegridexpand::before,
    .e-treegridcollapse::before {
      content: '\e22f';
    }
  }

  .e-treelistgrid.e-print-grid-layout {
    .e-treegridexpand::before,
    .e-treegridcollapse::before {
      content: '\e22f';
    }
  }
}

@include export-module('tree-bigger') {
  .e-bigger {
    .e-treegrid {
      .e-grid {

        .e-treegridexpand,
        .e-treegridcollapse {
          font-size: $treegrid-bigger-icon-font-size;
          height: $treegrid-bigger-icon-size;
          width: $treegrid-bigger-icon-size;
          vertical-align: bottom;
        }

        .e-treegridexpand {
          @if $skin-name =='highcontrast' {
            vertical-align: middle;
          }
        }

        .e-hierarchycheckbox {
          padding-left: 2px;
          @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
            line-height: 0px;
          }
        }

        .e-hierarchycheckbox .e-frame {
          @if $skin-name =='bootstrap' or $skin-name =='boostrap-dark' or $skin-name =='fabric-dark' or $skin-name =='fabric' or $skin-name =='highcontrast' or $skin-name =='FluentUI' or $theme-name =='fluentui-dark' {
            font-size: 12px;
            line-height: 12px;
            padding: 2px 0;
          }
          height: $treegrid-frame-bigger-icon-height;
          width: $treegrid-frame-bigger-icon-width;
        }

        .e-treecell {
          line-height: $treegrid-bigger-icon-size;
        }

        .e-treecolumn-container span {
          vertical-align: middle;
        }

        .e-row[aria-expanded = 'true'] .e-treecell {
          @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
            font-size: 16px;
            font-weight: bold;
          }
        }

        // .e-gridcontent .e-rowcell {
        //   @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
        //     line-height: 19px;
        //   }
        // }

        .e-gridheader {
          .e-headercell .e-css.e-hierarchycheckbox {
            @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
              bottom: 12px;
            }
          }
        }
      }
    }
  }
}

//default
$btn-grp-margin: -1px !default;
$btn-grp-margin-left: -1px !default;
$btn-grp-wrapper-border: 4px !default;
$btn-grp-round-radius: 20px !default;
$btn-grp-icon-font-size: 12px !default;
$btn-grp-icon-font-size-bigger: 14px !default;

$btn-group-input-margin: 0 0 0 -1px !default;
$btn-zero-radius: 0 !default;
$btn-vertical-grp-margin: -1 0 0 !default;
$btn-top-radius: 2px !default;
$btn-group-zero-margin-padding: 0 !default;
$btn-group-input-height: 1px !default;
$btn-group-input-width: 1px !default;

//Normal Outline GroupButton
$btn-grp-outline-focus-border-color: $grey-8c !default;
$btn-grp-outline-focus-color: inherit !default;

//Outline Primary
$btn-grp-outline-primary-focus-border-color: $brand-primary-lighten-15 !default;
$btn-grp-outline-focus-primary-color: inherit !default;

//Outline Success
$btn-grp-outline-success-focus-border-color: inherit !default;
$btn-grp-outline-focus-success-color: inherit !default;

//Outline Info
$btn-grp-outline-info-focus-border-color: inherit !default;
$btn-grp-outline-focus-info-color: inherit !default;

//Outline warning
$btn-grp-outline-warning-focus-border-color: inherit !default;
$btn-grp-outline-focus-warning-color: inherit !default;

//Outline danger
$btn-grp-outline-danger-focus-border-color:  inherit !default;
$btn-grp-outline-focus-danger-color: inherit !default;

@mixin apply-border {
  &:not(:first-of-type):not(:last-of-type) {
    border-left: transparent;
    border-right: transparent;
  }

  &:first-of-type {
    border-right: transparent;
  }

  &:last-of-type {
    border-left: transparent;
  }
}

@mixin apply-border-vertical {
  &:not(:first-of-type):not(:last-of-type) {
    border-bottom: transparent;
    border-top: transparent;
  }

  &:first-of-type {
    border-bottom: transparent;
  }

  &:last-of-type {
    border-top: transparent;
  }
}

@mixin different-states {
  // Outline focus
  .e-btn:focus,
  input:focus + label.e-btn {
    &.e-outline {
      border-color: $btn-grp-outline-focus-border-color;
      outline-color: $btn-grp-outline-focus-color;

      &.e-primary {
        border-color: $btn-grp-outline-primary-focus-border-color;
        outline-color: $btn-grp-outline-focus-primary-color;
      }

      &.e-success {
        border-color: $btn-grp-outline-success-focus-border-color;
        outline-color: $btn-grp-outline-focus-success-color;
      }

      &.e-info {
        border-color: $btn-grp-outline-info-focus-border-color;
        outline-color: $btn-grp-outline-focus-info-color;
      }

      &.e-warning {
        border-color: $btn-grp-outline-warning-focus-border-color;
        outline-color: $btn-grp-outline-focus-warning-color;
      }

      &.e-danger {
        border-color: $btn-grp-outline-danger-focus-border-color;
        outline-color: $btn-grp-outline-focus-danger-color;
      }
    }
  }
}

@mixin disabled {
  background-color: $btn-disabled-bgcolor;
  border-color: $btn-disabled-border-color;
  box-shadow: $btn-flat-box-shadow;
  color: $btn-disabled-color;
}

@mixin box-shadow-theme {
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
    box-shadow: none;
  }
  @if $skin-name == 'fabric' {
    border-color: transparent;
  }
}

@mixin outline-box-shadow-theme {
  @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
    box-shadow: none;
  }
}

@mixin Mat3-box-shadow-none {
  @if $skin-name == 'Material3' {
    box-shadow: none;
  }
}

@include export-module('button-group-layout') {
/* stylelint-disable */
  #{if(&, '&', '*')}.e-btn-group,
  #{if(&, '&', '*')}.e-css.e-btn-group {
    display: -webkit-inline-flex;
    display: inline-flex;
    border-radius: $btn-grp-wrapper-border;
    -webkit-flex-direction: row;
    flex-direction: row;
    position: relative;
    @if $skin-name == 'Material3' {
      border-radius: $btn-border-radius;
      box-shadow: $btn-active-box-shadow;
    }

    input:focus+label.e-btn,
    .e-btn:focus,
    .e-btn:hover {
      @if $skin-name == 'tailwind' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' {
        z-index: 2;
      }
    }

    input + label.e-btn {
      margin-bottom: $btn-group-zero-margin-padding;
    }

    input {
      -moz-appearance: none;
      height: $btn-group-input-height;
      margin: $btn-group-input-margin;
      opacity: 0;
      position: absolute;
      width: $btn-group-input-width;
    }

    // Disabled
    input:disabled+label.e-btn,
    :disabled {
      cursor: default;
      pointer-events: none;
    }

    .e-btn-icon {
      font-size: $btn-grp-icon-font-size;
    }

    // Sharp corner for sides individual Button and SplitButton
    &:not(.e-rtl):not(.e-vertical) {
      .e-btn {
        @if $skin-name != 'Material3' and $skin-name != 'fluent2' {
          margin-left: $btn-grp-margin-left;
        }

        &:not(:first-of-type):not(:last-of-type) {
          border-radius: $btn-zero-radius;
        }

        &:first-of-type,
        &:last-of-type:not(:last-child) {
          border-bottom-right-radius: $btn-zero-radius;
          border-top-right-radius: $btn-zero-radius;
        }

        &:last-of-type {
          border-bottom-left-radius: $btn-zero-radius;
          border-top-left-radius: $btn-zero-radius;
        }
      }

      .e-split-btn-wrapper {
        +.e-btn {
          border-bottom-left-radius: $btn-zero-radius;
          border-top-left-radius: $btn-zero-radius;
        }

        &:not(:first-child):not(:last-child) {
          .e-btn:last-child {
            border-bottom-right-radius: $btn-zero-radius;
            border-top-right-radius: $btn-zero-radius;
          }

          .e-btn:first-child {
            border-bottom-left-radius: $btn-zero-radius;
            border-top-left-radius: $btn-zero-radius;
          }
        }

        &:first-child {
          .e-btn:last-child {
            border-bottom-right-radius: $btn-zero-radius;
            border-top-right-radius: $btn-zero-radius;
          }
        }

        &:last-child {
          .e-btn:first-child {
            border-bottom-left-radius: $btn-zero-radius;
            border-top-left-radius: $btn-zero-radius;
          }
        }
      }
    }

    // RTL with Sharp corner combinations
    &.e-rtl {
      .e-btn {
        margin-left: $btn-grp-margin-left;

        &:not(:first-of-type):not(:last-of-type) {
          border-radius: $btn-zero-radius;
        }

        &:first-of-type,
        &:last-of-type:not(:last-child) {
          border-bottom-left-radius: $btn-zero-radius;
          border-top-left-radius: $btn-zero-radius;
        }

        &:last-of-type {
          border-bottom-right-radius: $btn-zero-radius;
          border-top-right-radius: $btn-zero-radius;
        }
      }

      .e-split-btn-wrapper {
        +.e-btn {
          border-bottom-right-radius: $btn-zero-radius;
          border-top-right-radius: $btn-zero-radius;
        }

        &:not(:first-child):not(:last-child) {
          .e-btn:last-child {
            border-bottom-left-radius: $btn-zero-radius;
            border-top-left-radius: $btn-zero-radius;
          }

          .e-btn:first-child {
            border-bottom-right-radius: $btn-zero-radius;
            border-top-right-radius: $btn-zero-radius;
          }
        }

        &:first-child {
          .e-btn:last-child {
            border-bottom-left-radius: $btn-zero-radius;
            border-top-left-radius: $btn-zero-radius;
          }
        }

        &:last-child {
          .e-btn:first-child {
            border-bottom-right-radius: $btn-zero-radius;
            border-top-right-radius: $btn-zero-radius;
          }
        }
      }
    }

    // Vertical Orientation
    &.e-vertical {
      -webkit-flex-direction: column;
      flex-direction: column;

      input {
        margin: $btn-vertical-grp-margin;
      }

      // Round corner
      .e-btn {
        &:not(.e-outline) {
          margin-top: $btn-grp-margin;
        }

        &:not(:first-of-type):not(:last-of-type) {
          border-radius: $btn-zero-radius;
        }

        &:first-of-type {
          border-bottom-left-radius: $btn-zero-radius;
          border-bottom-right-radius: $btn-zero-radius;
          border-top-left-radius: $btn-top-radius;
          border-top-right-radius: $btn-top-radius;
        }

        &:last-of-type {
          border-bottom-left-radius: $btn-top-radius;
          border-bottom-right-radius: $btn-top-radius;
          border-top-left-radius: $btn-zero-radius;
          border-top-right-radius: $btn-zero-radius;
        }
      }
    }

    // Rounded Corner
    &.e-round-corner:not(.e-vertical) {
      &:not(.e-rtl) {
        border-radius: $btn-grp-round-radius;

        .e-btn {
          &:first-of-type {
            border-bottom-left-radius: $btn-grp-round-radius;
            border-top-left-radius: $btn-grp-round-radius;
          }

          &:last-of-type {
            border-bottom-right-radius: $btn-grp-round-radius;
            border-top-right-radius: $btn-grp-round-radius;
          }

          &:last-of-type:not(:last-child) {
            border-bottom-right-radius: $btn-zero-radius;
            border-top-right-radius: $btn-zero-radius;
          }
        }

        .e-split-btn-wrapper {
          +.e-btn {
            border-bottom-left-radius: $btn-zero-radius;
            border-top-left-radius: $btn-zero-radius;
          }

          &:first-child {
            .e-btn:first-child {
              border-bottom-left-radius: $btn-grp-round-radius;
              border-top-left-radius: $btn-grp-round-radius;
            }

            .e-btn:last-child {
              border-bottom-right-radius: $btn-zero-radius;
              border-top-right-radius: $btn-zero-radius;
            }
          }

          &:last-child {
             .e-btn:first-child {
              border-bottom-left-radius: $btn-zero-radius;
              border-top-left-radius: $btn-zero-radius;
            }

            .e-btn:last-child {
              border-bottom-right-radius: $btn-grp-round-radius;
              border-top-right-radius: $btn-grp-round-radius;
            }
          }
        }
      }

      // Rounded corner with RTL
      &.e-rtl {
        border-radius: $btn-grp-round-radius;

        .e-btn {
          &:first-of-type {
            border-bottom-right-radius: $btn-grp-round-radius;
            border-top-right-radius: $btn-grp-round-radius;
          }

          &:last-of-type {
            border-bottom-left-radius: $btn-grp-round-radius;
            border-top-left-radius: $btn-grp-round-radius;
          }

          &:last-of-type:not(:last-child) {
            border-bottom-left-radius: $btn-zero-radius;
            border-top-left-radius: $btn-zero-radius;
          }

          &:first-of-type:not(:first-child) {
            border-bottom-right-radius: $btn-zero-radius;
            border-top-right-radius: $btn-zero-radius;
          }
        }
      }
    }
  }
}

@include export-module('button-group-theme') {
/* stylelint-disable */
  .e-btn-group,
  .e-css.e-btn-group {
    &:not(.e-outline) {
      @if $skin-name != 'Material3' {
        box-shadow: $btn-box-shadow;
      }
    }

    @if $skin-name == 'material' or $skin-name == 'Material3' {
      .e-btn {
        box-shadow: none;
      }
    }

    .e-btn:hover {
      box-shadow: none;
    }

    @if $skin-name == 'Material3' {
      .e-btn:focus-visible,
      input:focus-visible+label.e-btn { // only for keybord
        box-shadow: $btn-keyboard-focus-box-shadow !important;
        z-index: 1;

        &.e-primary,
        &.e-success,
        &.e-info,
        &.e-warning,
        &.e-danger {
          box-shadow: $btn-keyboard-focus-box-shadow !important;
          z-index: 1;
        }

        &.e-outline {
          box-shadow: $btn-keyboard-focus-box-shadow !important;
          z-index: 1;
          &.e-primary,
          &.e-success,
          &.e-info,
          &.e-warning,
          &.e-danger {
            box-shadow: $btn-keyboard-focus-box-shadow !important;
            z-index: 1;
          }
        }
    }
  }

  @if $skin-name == 'fluent2' {
    .e-btn:focus-visible,
    input:focus-visible+label.e-btn { // only for keybord
      box-shadow: $btn-keyboard-focus-box-shadow !important;
    }

    .e-outline.e-btn:active,
    .e-outline.e-btn:focus,
    input:focus+label.e-btn.e-outline {
      background: transparent !important;
    }
  }

    //Focus state for Normal and Outline GroupButton
    .e-btn:focus,
    input:focus-visible+label.e-btn,
    input:focus+label.e-btn {
      @include button-focus;
      @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap4' and $skin-name != 'tailwind' and $skin-name != 'tailwind3' {
        box-shadow: none;
      }
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        border-color: $btn-focus-bgcolor;
      }
      outline-color: $btn-grp-outline-focus-color;
      @if $skin-name == 'fabric' {
        outline-offset: -2px;
      }

      @if $skin-name == 'highcontrast' {
        outline-offset: -4px;
      }

      @if $skin-name == 'tailwind3' {
        background: $btn-bgcolor;
        color: $btn-color;
        box-shadow: $btn-focus-box-shadow;
      }

      &.e-primary {
        @include primary-focus;
        @include box-shadow-theme;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $btn-primary-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-primary-color;
        @if $skin-name == 'tailwind3' {
          background: $btn-primary-bgcolor;
          color: $btn-primary-color;
          box-shadow: $btn-focus-box-shadow;
        }
      }

      &.e-success {
        @include success-focus;
        @include box-shadow-theme;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $btn-success-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-success-color;
        @if $skin-name == 'tailwind3' {
          background: $btn-success-bgcolor;
          color: $btn-success-color;
          box-shadow: $btn-focus-box-shadow;
        }
      }

      &.e-info {
        @include info-focus;
        @include box-shadow-theme;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $btn-info-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-info-color;
        @if $skin-name == 'tailwind3' {
          background: $btn-info-bgcolor;
          color: $btn-info-color;
          box-shadow: $btn-focus-box-shadow;
        }
      }

      &.e-warning {
        @include warning-focus;
        @include box-shadow-theme;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $btn-warning-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-warning-color;
        @if $skin-name == 'tailwind3' {
          background: $btn-warning-bgcolor;
          color: $btn-warning-color;
          box-shadow: $btn-focus-box-shadow;
        }
      }

      &.e-danger {
        @include danger-focus;
        @include box-shadow-theme;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $btn-danger-focus-bgcolor;
        }
        outline-color: $btn-grp-outline-focus-danger-color;
        @if $skin-name == 'tailwind3' {
          background: $btn-danger-bgcolor;
          color: $btn-danger-color;
          box-shadow: $btn-focus-box-shadow;
        }
      }

      &.e-link {
        @include link-focus;
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        outline: none;
      }

      &.e-outline {
        @include outline-focus;
        @include outline-box-shadow-theme;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $btn-outline-focus-bgcolor;
        }
        @if $skin-name == 'tailwind3' {
          background: $transparent;
          color: $btn-color;
          box-shadow: $btn-focus-box-shadow;
        }

        &.e-primary {
          @include outline-primary-focus;
          @include outline-box-shadow-theme;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-color: $btn-outline-primary-focus-bgcolor;
          }
          @if $skin-name == 'tailwind3' {
            background: $transparent;
            color: $btn-primary-bgcolor;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &.e-success {
          @include outline-success-focus;
          @include outline-box-shadow-theme;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-color: $btn-success-focus-bgcolor;
          }
          @if $skin-name == 'tailwind3' {
            background: $transparent;
            color: $btn-success-bgcolor;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &.e-info {
          @include outline-info-focus;
          @include outline-box-shadow-theme;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-color: $btn-info-hover-bgcolor;
          }
          @if $skin-name == 'tailwind3' {
            background: $transparent;
            color: $btn-info-bgcolor;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &.e-warning {
          @include outline-warning-focus;
          @include outline-box-shadow-theme;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-color: $btn-warning-hover-bgcolor;
          }
          @if $skin-name == 'tailwind3' {
            background: $transparent;
            color: $btn-warning-bgcolor;
            box-shadow: $btn-focus-box-shadow;
          }
        }

        &.e-danger {
          @include outline-danger-focus;
          @include outline-box-shadow-theme;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-color: $btn-danger-hover-bgcolor;
          }
          @if $skin-name == 'tailwind3' {
            background: $transparent;
            color: $btn-danger-bgcolor;
            box-shadow: $btn-focus-box-shadow;
          }
        }
      }
    }

    //Active/Checked state for Normal and Outline GroupButton
    .e-btn:active,
    input:active+label.e-btn,
    input:checked+label.e-btn {
      @include button-active;
      @include Mat3-box-shadow-none;

      &.e-primary {
        @include primary-active;
        @include Mat3-box-shadow-none;
      }

      &.e-success {
        @include success-active;
        @include Mat3-box-shadow-none;
      }

      &.e-info {
        @include info-active;
        @include Mat3-box-shadow-none;
      }

      &.e-warning {
        @include warning-active;
        @include Mat3-box-shadow-none;
      }

      &.e-danger {
        @include danger-active;
        @include Mat3-box-shadow-none;
      }

      &.e-outline {
        @include outline-active;
        @include Mat3-box-shadow-none;

        &.e-primary {
          @include outline-primary-active;
          @include Mat3-box-shadow-none;
        }

        &.e-success {
          @include outline-success-active;
          @include Mat3-box-shadow-none;
        }

        &.e-info {
          @include outline-info-active;
          @include Mat3-box-shadow-none;
        }

        &.e-warning {
          @include outline-warning-active;
          @include Mat3-box-shadow-none;
        }

        &.e-danger {
          @include outline-danger-active;
          @include Mat3-box-shadow-none;
        }
      }
    }

    //Disabled state for Normal and Outline GroupButton
    .e-btn:disabled,
    input:disabled+label.e-btn {
      @include disabled;
      @if $skin-name != 'bootstrap4' {
        border-color: $btn-border-color;
      }

      &.e-primary {
        @include primary-disabled;
        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
          border-color: $btn-primary-border-color;
        }
      }

      &.e-success {
        @include success-disabled;
        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
          border-color: $btn-success-border-color;
        }
      }

      &.e-info {
        @include info-disabled;
        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
          border-color: $btn-info-border-color;
        }
      }

      &.e-warning {
        @include warning-disabled;
        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
          border-color: $btn-warning-border-color;
        }
      }

      &.e-danger {
        @include danger-disabled;
        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
          border-color: $btn-danger-border-color;
        }
      }

      &.e-link {
        @include link-disabled;
        @if $skin-name != 'bootstrap4' and $skin-name != 'tailwind3' {
          border-color: $btn-link-border-color;
        }
      }

      &.e-outline {
        @include outline-disabled;
        border-color: $btn-outline-border-color;

        &.e-primary {
          @include outline-primary-disabled;
          @if $skin-name != 'tailwind3' {
            border-color: $btn-primary-bgcolor;
          }
        }

        &.e-success {
          @include outline-success-disabled;
          @if $skin-name != 'tailwind3' {
            border-color: $btn-success-bgcolor;
          }
        }

        &.e-info {
          @include outline-info-disabled;
          @if $skin-name != 'tailwind3' {
            border-color: $btn-info-bgcolor;
          }
        }

        &.e-warning {
          @include outline-warning-disabled;
          @if $skin-name != 'tailwind3' {
            border-color: $btn-warning-bgcolor;
          }
        }

        &.e-danger {
          @include outline-danger-disabled;
          @if $skin-name != 'tailwind3' {
            border-color: $btn-danger-bgcolor;
          }
        }
      }
    }

    //Normal ButtonGroup layout for highcontrast theme
    @if $skin-name == 'highcontrast' {
      &:not(.e-vertical):not(.e-rtl) {
        .e-btn {
          @include apply-border;
        }
      }

      &.e-vertical:not(.e-rtl) {
        .e-btn {
          @include apply-border-vertical;
        }
      }

      .e-btn:hover {
        border-color: $btn-border-color;

        &.e-primary {
          border-color: $btn-primary-bgcolor;
        }

        &.e-success {
          border-color: $btn-success-bgcolor;
        }

        &.e-info {
          border-color: $btn-info-bgcolor;
        }

        &.e-warning {
          border-color: $btn-warning-bgcolor;
        }

        &.e-danger {
          border-color: $btn-danger-bgcolor;
        }
      }
    }

    &:not(.e-vertical):not(.e-rtl) {// Outline GroupButton - Horizontal orientation
      .e-outline {
        @if $skin-name != 'bootstrap' {
          @include apply-border;
        }
      }
      @include different-states;
    }

    &.e-vertical:not(.e-rtl) {// Outline GroupButton - Vertical Orientation
      .e-outline {
        @include apply-border-vertical;
      }
      @include different-states;
    }

    // RTL
    &.e-rtl {
      .e-btn {
        @if $skin-name != 'bootstrap' and $skin-name != 'tailwind' and $skin-name !='tailwind-dark' {
          &:not(:first-of-type):not(:last-of-type) {
            border-left: transparent;
            border-right: transparent;
          }

          &:first-of-type {
            border-left: transparent;
          }

          &:last-of-type {
            border-right: transparent;
          }
        }
      }
    }
  }
}

@include export-module('button-group-bigger') {
  .e-bigger .e-btn-group,
  .e-bigger.e-btn-group,
  .e-bigger .e-css.e-btn-group,
  .e-bigger.e-css.e-btn-group  {
    .e-btn-icon {
      font-size: $btn-grp-icon-font-size-bigger;
    }
  }
}

$progress-btn-color: $grey-light-font !default;
$progress-btn-bgcolor: rgba($grey-light-font, .3) !default;
$progress-btn-bgcolor-normal: rgba($grey-light-font, .2) !default;
$progress-btn-warning-progress-color: $progress-btn-bgcolor !default;
$progress-btn-circle-opacity: 1 !default;

$progress-btn-zero-padding-margin: 0 !default;
$progress-btn-line-height: 1 !default;
$progress-btn-full-height: 100% !default;
$progress-btn-nill-height: 0% !default;
$progress-btn-process-height: 10% !default;

$progress-btn-transition: all .3s linear !default;

$progress-btn-spin-btn-padding: 16px !default;
$progress-btn-small-spin-btn-padding: 14px !default;
$progress-btn-bigger-spin-btn-padding: 20px !default;
$progress-btn-bigger-small-spin-btn-padding: 16px !default;

$progress-btn-spinner-padding: 12px !default;
$progress-btn-spinner-padding-small: 10px !default;
$progress-btn-spinner-padding-bigger: 14px !default;
$progress-btn-spinner-padding-bigger-small: 12px !default;

$progress-btn-flat-primary-progress-color: #ff4081 !default;
$progress-btn-flat-success-progress-color: #4d841d !default;
$progress-btn-flat-info-progress-color: #0378d5 !default;
$progress-btn-flat-warning-progress-color: #c15700 !default;
$progress-btn-flat-danger-progress-color: #d64113 !default;
$btn-flat-primary-path-arc: none;
$progress-auto-width: auto !default;
$progress-auto-height: auto !default;
$progress-full-width: 100% !default;
$spinner-inner-top: -1px !default;
$progress-round-border-radius: 5em !default;
$progress-slidedown-to-top: 100px !default;
$progress-slideup-to-top: -100px !default;
$progress-zero-width: 0% !default;
$progress-negative-full-width: -100% !default;

@include export-module('progress-button-layout') {
  .e-progress-btn {
    position: relative;

    .e-progress {
      height: $progress-btn-full-height;
      left: $progress-btn-zero-padding-margin;
      opacity: 0;
      position: absolute;
      top: $progress-btn-zero-padding-margin;
      transition: opacity .3s linear;
    }

    .e-spinner {
      transition: $progress-btn-transition;
    }

    .e-btn-content {
      display: inline-block;
      position: relative;
      z-index: 1;
    }

    &.e-vertical {
      .e-progress {
        bottom: $progress-btn-zero-padding-margin;
        height: $progress-btn-nill-height;
        top: $progress-auto-width;
        width: $progress-full-width;
      }
    }

    &.e-progress-top {
      .e-progress {
        height: $progress-btn-process-height;
      }
    }

    &.e-progress-bottom {
      .e-progress {
        bottom: $spinner-inner-top;
        height: $progress-btn-process-height;
        top: $progress-auto-width;
      }
    }

    &.e-progress-active {
      overflow: hidden;
      pointer-events: none;

      @if $skin-name == 'bootstrap5.3' {
        .e-progress,
        .e-primary .e-progress,
        .e-success .e-progress,
        .e-danger .e-progress {
          opacity: .3;
        }

        .e-warning .e-progress,
        .e-info .e-progress,
        .e-primary.e-outline .e-progress,
        .e-primary.e-flat .e-progress,
        .e-success.e-outline .e-progress,
        .e-success.e-flat .e-progress,
        .e-danger.e-outline .e-progress,
        .e-danger.e-flat .e-progress,
        .e-warning.e-outline .e-progress,
        .e-warning.e-flat .e-progress,
        .e-info.e-outline .e-progress,
        .e-info.e-flat .e-progress {
          opacity: .2;
        }
      }
      @else {
        .e-progress {
          opacity: 1;
        }
      }

      .e-animate-end {
        opacity: 0;
      }
    }

    &.e-spin-top,
    &.e-spin-bottom {
      transition: padding .3s linear;
    }

    &.e-progress-active:not(.e-hide-spinner) {
      &.e-spin-top,
      &.e-spin-bottom {
        .e-btn-content,
        .e-spinner {
          display: block;
          line-height: $progress-btn-line-height;
        }
      }

      &.e-spin-center {
        .e-spinner {
          display: flex;
          justify-content: center;
        }
      }

      &.e-spin-left:not(.e-round) {
        .e-spinner {
          padding-right: $progress-btn-spinner-padding;

          .e-spinner-inner {
            top: $spinner-inner-top;
          }
        }

        &.e-rtl {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding;
            padding-right: $progress-btn-zero-padding-margin;
          }
        }
      }

      &.e-spin-right:not(.e-round) {
        .e-spinner {
          padding-left: $progress-btn-spinner-padding;

          .e-spinner-inner {
            top: $spinner-inner-top;
          }
        }

        &.e-rtl {
          .e-spinner {
            padding-left: $progress-btn-zero-padding-margin;
            padding-right: $progress-btn-spinner-padding;
          }
        }
      }

      &.e-spin-top {
        padding-bottom: $progress-btn-spin-btn-padding;
        padding-top: $progress-btn-spin-btn-padding;

        .e-spinner {
          padding-bottom: $progress-btn-spinner-padding;
        }
      }

      &.e-spin-bottom {
        padding-bottom: $progress-btn-spin-btn-padding;
        padding-top: $progress-btn-spin-btn-padding;

        .e-spinner {
          padding-top: $progress-btn-spinner-padding;
        }
      }

      &.e-small {
        &.e-spin-left:not(.e-round) {
          .e-spinner {
            padding-right: $progress-btn-spinner-padding-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: $progress-btn-spinner-padding-small;
              padding-right: $progress-btn-zero-padding-margin;
            }
          }
        }

        &.e-spin-right:not(.e-round) {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: $progress-btn-zero-padding-margin;
              padding-right: $progress-btn-spinner-padding-small;
            }
          }
        }

        &.e-spin-top {
          padding-bottom: $progress-btn-small-spin-btn-padding;
          padding-top: $progress-btn-small-spin-btn-padding;

          .e-spinner {
            padding-bottom: $progress-btn-spinner-padding-small;
          }
        }

        &.e-spin-bottom {
          padding-bottom: $progress-btn-small-spin-btn-padding;
          padding-top: $progress-btn-small-spin-btn-padding;

          .e-spinner {
            padding-top: $progress-btn-spinner-padding-small;
          }
        }
      }
    }

    &.e-round-corner {
      border-radius: $progress-round-border-radius;
      outline: none;
      overflow: hidden;
    }

    &.e-rtl {
      .e-progress {
        left: $progress-auto-width;
        right: $progress-btn-zero-padding-margin;
      }

      &.e-vertical {
        .e-progress {
          bottom: $progress-auto-width;
          top: $progress-btn-zero-padding-margin;
        }
      }
    }

    .e-spinner-pane {
      height: $progress-auto-height;
      position: relative;
      width: $progress-auto-width;

      .e-spinner-inner {
        left: $progress-auto-width;
        position: relative;
        top: $progress-auto-width;
        transform: none;
      }
    }

    .e-cont-animate {
      align-items: center;
      display: inline-flex;
      height: $progress-btn-full-height;
      justify-content: center;
      left: $progress-btn-zero-padding-margin;
      position: absolute;
      top: $progress-btn-zero-padding-margin;
      width: $progress-full-width;
    }

    @keyframes ProgressSlideLeft {
      from {
        left: $progress-zero-width;
        opacity: 1;
      }

      to {
        left: $progress-negative-full-width;
        opacity: 0;
      }
    }

    @keyframes ProgressSlideRight {
      from {
        left: $progress-zero-width;
        opacity: 1;
      }

      to {
        left: $progress-full-width;
        opacity: 0;
      }
    }

    @keyframes ProgressSlideUp {
      from {
        height: $progress-auto-height;
        opacity: 1;
        top: $progress-btn-zero-padding-margin;
      }

      to {
        height: $progress-auto-height;
        opacity: 0;
        top: $progress-slideup-to-top;
      }
    }

    @keyframes ProgressSlideDown {
      from {
        height: $progress-auto-height;
        opacity: 1;
        top: $progress-btn-zero-padding-margin;
      }

      to {
        height: $progress-auto-height;
        opacity: 0;
        top: $progress-slidedown-to-top;
      }
    }

    @keyframes ProgressZoomIn {
      from {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }

      to {
        opacity: 0;
        transform: translate(0, 0) scale(3);
      }
    }

    @keyframes ProgressZoomOut {
      from {
        transform: translate(0, 0) scale(1);
      }

      to {
        transform: translate(0, 0) scale(0);
      }
    }
  }
}

@include export-module('progress-button-theme') {

  /*! Progress Button Theme */
  .e-progress-btn {
    .e-spinner-pane .e-spinner-inner svg {
      fill: $progress-btn-color;
      stroke: $progress-btn-color;

      .e-path-circle {
        @if $skin-name == 'bootstrap4' {
          stroke-width: 1px;
        }
        @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          stroke-width: 3px;
        }
      }

      .e-path-arc {
        stroke: $btn-color;
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          stroke-width: 3px;
        }
      }
    }

    #{if(&, '&', '*')}.e-primary,
    #{if(&, '&', '*')}.e-primary.e-outline:hover,
    #{if(&, '&', '*')}.e-primary.e-outline:focus,
    #{if(&, '&', '*')}.e-primary.e-flat:hover,
    #{if(&, '&', '*')}.e-primary.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-primary-color;
        stroke: $btn-primary-color;

        .e-path-circle {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            stroke: color.adjust($btn-primary-color, $alpha: -$progress-btn-circle-opacity);
          }
        }

        .e-path-arc {
          stroke: $btn-primary-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-primary-color;
          stroke: $btn-flat-primary-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
            }
            @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap'{
              stroke: color.adjust($btn-flat-primary-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-primary-color;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-primary.e-outline:hover,
    #{if(&, '&', '*')}.e-primary.e-outline:focus {
      @if $skin-name == 'Material3' {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-primary-bgcolor;
          stroke: $btn-primary-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-primary-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-primary-color;
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-success,
    #{if(&, '&', '*')}.e-success.e-outline:hover,
    #{if(&, '&', '*')}.e-success.e-outline:focus,
    #{if(&, '&', '*')}.e-success.e-flat:hover,
    #{if(&, '&', '*')}.e-success.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-success-color;
        stroke: $btn-success-color;

        .e-path-circle {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            stroke: color.adjust($btn-success-color, $alpha: -$progress-btn-circle-opacity);
          }
        }

        .e-path-arc {
          stroke: $btn-success-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-success-color;
          stroke: $btn-flat-success-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
            }
            @else {
              @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
                stroke: color.adjust($btn-flat-success-color, $alpha: -$progress-btn-circle-opacity);
              }
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-success-color;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-success.e-outline:hover,
    #{if(&, '&', '*')}.e-success.e-outline:focus {
      @if $skin-name == 'Material3' {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-success-bgcolor;
          stroke: $btn-success-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-success-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-success-color;
          }
        }
      }
    }

    &.e-info,
    &.e-info.e-outline:hover,
    &.e-info.e-outline:focus,
    &.e-info.e-flat:hover,
    &.e-info.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-info-color;
        stroke: $btn-info-color;

        .e-path-circle {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            stroke: color.adjust($btn-info-color, $alpha: -$progress-btn-circle-opacity);
          }
          @if $skin-name == 'fluent2' {
            stroke: color.adjust(#242424, $alpha: -$progress-btn-circle-opacity);
          }
        }

        .e-path-arc {
          stroke: $btn-info-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-info-color;
          stroke: $btn-flat-info-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
            }
            @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-flat-info-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-info-color;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-info.e-outline:hover,
    #{if(&, '&', '*')}.e-info.e-outline:focus {
      @if $skin-name == 'Material3' {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-info-bgcolor;
          stroke: $btn-info-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-info-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-info-color;
          }
        }
      }
    }

    &.e-warning,
    &.e-warning.e-outline:hover,
    &.e-warning.e-outline:focus,
    &.e-warning.e-flat:hover,
    &.e-warning.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-warning-color;
        stroke: $btn-warning-color;

        .e-path-circle {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            stroke: color.adjust($btn-warning-color, $alpha: -$progress-btn-circle-opacity);
          }
        }

        .e-path-arc {
          stroke: $btn-warning-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-warning-color;
          stroke: $btn-flat-warning-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
            }
            @else {
              stroke: $btn-flat-warning-color;
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-warning-color;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-warning.e-outline:hover,
    #{if(&, '&', '*')}.e-warning.e-outline:focus {
      @if $skin-name == 'Material3' {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-warning-bgcolor;
          stroke: $btn-warning-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-warning-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-warning-color;
          }
        }
      }
    }

    &.e-danger,
    &.e-danger.e-outline:hover,
    &.e-danger.e-outline:focus,
    &.e-danger.e-flat:hover,
    &.e-danger.e-flat:focus {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-danger-color;
        stroke: $btn-danger-color;

        .e-path-circle {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            stroke: color.adjust($btn-danger-color, $alpha: -$progress-btn-circle-opacity);
          }
        }

        .e-path-arc {
          stroke: $btn-danger-color;
        }
      }

      &.e-flat {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-flat-danger-color;
          stroke: $btn-flat-danger-color;

          .e-path-circle {
            @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-flat-primary-path-arc, $alpha: -$progress-btn-circle-opacity);
            }
            @else if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-flat-danger-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
              stroke: $btn-flat-primary-path-arc;
            }
            @else {
              stroke: $btn-flat-danger-color;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-danger.e-outline:hover,
    #{if(&, '&', '*')}.e-danger.e-outline:focus {
      @if $skin-name == 'Material3' {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-danger-bgcolor;
          stroke: $btn-danger-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-danger-color, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-danger-color;
          }
        }
      }
    }

    &.e-outline,
    &.e-flat {
      &.e-primary {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-primary-bgcolor;
          stroke: $btn-primary-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-primary-bgcolor, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-primary-bgcolor;
          }
        }
      }

      &.e-success {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-success-bgcolor;
          stroke: $btn-success-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-success-bgcolor, $alpha: -$progress-btn-circle-opacity);
            }
          }
          .e-path-arc {
            stroke: $btn-success-bgcolor;
          }
        }
      }

      &.e-info {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-info-bgcolor;
          stroke: $btn-info-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-info-bgcolor, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-info-bgcolor;
          }
        }
      }

      &.e-warning {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-warning-bgcolor;
          stroke: $btn-warning-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-warning-bgcolor, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-warning-bgcolor;
          }
        }
      }

      &.e-danger {
        .e-spinner-pane .e-spinner-inner svg {
          fill: $btn-danger-bgcolor;
          stroke: $btn-danger-bgcolor;

          .e-path-circle {
            @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
              stroke: color.adjust($btn-danger-bgcolor, $alpha: -$progress-btn-circle-opacity);
            }
          }

          .e-path-arc {
            stroke: $btn-danger-bgcolor;
          }
        }
      }
    }

    &.e-link {
      .e-spinner-pane .e-spinner-inner svg {
        fill: $btn-link-color;
        stroke: $btn-link-color;

        .e-path-circle {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            stroke: color.adjust($btn-link-color, $alpha: -$progress-btn-circle-opacity);
          }
        }

        .e-path-arc {
          stroke: $btn-link-color;
        }
      }
    }
  }

  .e-progress {
    @if $skin-name == 'bootstrap5.3'  {
      background: currentColor;
    }
    @else {
      background: $progress-btn-bgcolor-normal;
    }
  }

  #{if(&, '&', '*')}.e-primary,
  #{if(&, '&', '*')}.e-success,
  #{if(&, '&', '*')}.e-danger {
    .e-progress {
      @if $skin-name == 'bootstrap5.3'  {
        background: currentColor;
      }
      @else {
        background: $progress-btn-bgcolor;
      }
    }
  }

  #{if(&, '&', '*')}.e-info {
    .e-progress {
      @if $skin-name == 'bootstrap5.3'  {
        background: currentColor;
      }
      @else if $skin-name != 'fluent2' {
        background: $progress-btn-bgcolor;
      }
    }
  }

  #{if(&, '&', '*')}.e-flat {
    &.e-primary {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($progress-btn-flat-primary-progress-color, $alpha: -.8);
        }
      }
    }

    &.e-success {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($progress-btn-flat-success-progress-color, $alpha: -.8);
        }
      }
    }

    &.e-info {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($progress-btn-flat-info-progress-color, $alpha: -.8);
        }
      }
    }

    &.e-warning {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($progress-btn-flat-warning-progress-color, $alpha: -.8);
        }
      }
    }

    &.e-danger {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($progress-btn-flat-danger-progress-color, $alpha: -.8);
        }
      }
    }
  }

  #{if(&, '&', '*')}.e-outline:not(:focus) {
    &.e-primary {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
        }
      }
    }

    &.e-success {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($btn-success-bgcolor, $alpha: -.8);
        }
      }
    }

    &.e-info {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($btn-info-bgcolor, $alpha: -.8);
        }
      }
    }

    &.e-warning {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($btn-warning-bgcolor, $alpha: -.8);
        }
      }
    }

    &.e-danger {
      .e-progress {
        @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
          background: color.adjust($btn-danger-bgcolor, $alpha: -.8);
        }
      }
    }
  }

  @if $skin-name == 'Material3' {
    #{if(&, '&', '*')}.e-flat,
    #{if(&, '&', '*')}.e-flat:not(:focus) {
      &.e-primary {
        .e-progress {
          background: $progress-btn-flat-primary-progress-color;
        }
      }

      &.e-success {
        .e-progress {
          background: $progress-btn-flat-success-progress-color;
        }
      }

      &.e-info {
        .e-progress {
          background: $progress-btn-flat-info-progress-color;
        }
      }

      &.e-warning {
        .e-progress {
          background: $progress-btn-flat-warning-progress-color;
        }
      }

      &.e-danger {
        .e-progress {
          background: $progress-btn-flat-danger-progress-color;
        }
      }
    }
  }

  #{if(&, '&', '*')}.e-flat:not(:focus) {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      &.e-primary {
        .e-progress {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            background: color.adjust($btn-primary-bgcolor, $alpha: -.8);
          }
        }
      }

      &.e-success {
        .e-progress {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            background: color.adjust($btn-success-bgcolor, $alpha: -.8);
          }
        }
      }

      &.e-info {
        .e-progress {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            background: color.adjust($btn-info-bgcolor, $alpha: -.8);
          }
        }
      }

      &.e-warning {
        .e-progress {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            background: color.adjust($btn-warning-bgcolor, $alpha: -.8);
          }
        }
      }

      &.e-danger {
        .e-progress {
          @if $skin-name == 'material' or $skin-name == 'fabric' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
            background: color.adjust($btn-danger-bgcolor, $alpha: -.8);
          }
        }
      }
    }
  }
}

@if $skin-name != 'fluent2' {
  .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
    fill: $btn-outline-color;
    stroke: $btn-outline-color;
  }

  .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
    fill: $btn-color;
    stroke: $btn-color;
  }

  .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
    stroke: $btn-outline-color;
  }
}

@if $skin-name == 'fluent2' {
  .e-primary.e-outline .e-progress,
  .e-primary.e-flat .e-progress {
    background: rgba(15, 108, 189, .5) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-success.e-outline .e-progress,
  .e-success.e-flat .e-progress {
    background: rgba(16, 124, 16, .5) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-danger.e-outline .e-progress,
  .e-danger.e-flat .e-progress {
    background: rgba(197, 15, 31, .5) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-warning.e-outline .e-progress,
  .e-warning.e-flat .e-progress {
    background: rgba(247, 99, 12, .5) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-info.e-outline .e-progress,
  .e-info.e-flat .e-progress {
    background: rgba(49, 175, 204, .5) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle {
    stroke: color.adjust(#242424, $alpha: -$progress-btn-circle-opacity) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle {
    stroke: $brand-160 !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-progress-btn.e-outline {
    &.e-success:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
      stroke: $success-bg-color;
    }
    &.e-primary:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
      stroke: $primary-bg-color;
    }
    &.e-danger:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
      stroke: $danger-bg-color;
    }
    &.e-warning:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
      stroke: $warning-bg-color;
    }
    &.e-info:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
      stroke: $info-bg-color;
    }
  }

  .e-progress-btn .e-spinner-pane .e-spinner-inner .e-spin-fluent2 .e-path-circle {
    stroke: $progress-btn-spinner-color !important; /* stylelint-disable-line declaration-no-important */
  }
}

@if $skin-name == 'tailwind3' {
  .e-progress,
  .e-primary .e-progress,
  .e-success .e-progress,
  .e-warning .e-progress,
  .e-info .e-progress,
  .e-danger .e-progress,
  .e-primary.e-outline .e-progress,
  .e-primary.e-flat .e-progress,
  .e-success.e-outline .e-progress,
  .e-success.e-flat .e-progress,
  .e-danger.e-outline .e-progress,
  .e-danger.e-flat .e-progress,
  .e-warning.e-outline .e-progress,
  .e-warning.e-flat .e-progress,
  .e-info.e-outline .e-progress,
  .e-info.e-flat .e-progress {
    opacity: .2 !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-progress {
    background: $secondary-text-color-focus;
  }

  .e-primary .e-progress {
    background: $primary-text;
  }

  .e-success .e-progress {
    background: $success-text;
  }

  .e-warning .e-progress {
    background: $warning-text;
  }

  .e-info .e-progress {
    background: $info-text;
  }

  .e-danger .e-progress {
    background: $danger-text;
  }

  .e-primary.e-outline .e-progress,
  .e-primary.e-flat .e-progress {
    background: $primary-bg-color;
  }

  .e-success.e-outline .e-progress,
  .e-success.e-flat .e-progress {
    background: $success-bg-color;
  }

  .e-danger.e-outline .e-progress,
  .e-danger.e-flat .e-progress {
    background: $danger-bg-color;
  }

  .e-warning.e-outline .e-progress,
  .e-warning.e-flat .e-progress {
    background: $warning-bg-color;
  }

  .e-info.e-outline .e-progress,
  .e-info.e-flat .e-progress {
    background: $info-bg-color;
  }
}

@include export-module('progress-button-bigger') {
  #{if(&, '&', '*')}.e-bigger .e-progress-btn,
  #{if(&, '&', '*')}.e-bigger.e-progress-btn {
    &.e-progress-active:not(.e-hide-spinner) {
      &.e-spin-left:not(.e-round) {
        .e-spinner {
          padding-right: $progress-btn-spinner-padding-bigger;
        }

        &.e-rtl {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding-bigger;
            padding-right: $progress-btn-zero-padding-margin;
          }
        }
      }

      &.e-spin-right:not(.e-round) {
        .e-spinner {
          padding-left: $progress-btn-spinner-padding-bigger;
        }

        &.e-rtl {
          .e-spinner {
            padding-left: $progress-btn-zero-padding-margin;
            padding-right: $progress-btn-spinner-padding-bigger;
          }
        }
      }

      &.e-spin-top {
        padding-bottom: $progress-btn-bigger-spin-btn-padding;
        padding-top: $progress-btn-bigger-spin-btn-padding;

        .e-spinner {
          padding-bottom: $progress-btn-spinner-padding-bigger;
        }
      }

      &.e-spin-bottom {
        padding-bottom: $progress-btn-bigger-spin-btn-padding;
        padding-top: $progress-btn-bigger-spin-btn-padding;

        .e-spinner {
          padding-top: $progress-btn-spinner-padding-bigger;
        }
      }

      &.e-small {
        &.e-spin-left:not(.e-round) {
          .e-spinner {
            padding-right: $progress-btn-spinner-padding-bigger-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: $progress-btn-spinner-padding-bigger-small;
              padding-right: $progress-btn-zero-padding-margin;
            }
          }
        }

        &.e-spin-right:not(.e-round) {
          .e-spinner {
            padding-left: $progress-btn-spinner-padding-bigger-small;
          }

          &.e-rtl {
            .e-spinner {
              padding-left: $progress-btn-zero-padding-margin;
              padding-right: $progress-btn-spinner-padding-bigger-small;
            }
          }
        }

        &.e-spin-top {
          padding-bottom: $progress-btn-bigger-small-spin-btn-padding;
          padding-top: $progress-btn-bigger-small-spin-btn-padding;

          .e-spinner {
            padding-bottom: $progress-btn-spinner-padding-bigger-small;
          }
        }

        &.e-spin-bottom {
          padding-bottom: $progress-btn-bigger-small-spin-btn-padding;
          padding-top: $progress-btn-bigger-small-spin-btn-padding;

          .e-spinner {
            padding-top: $progress-btn-spinner-padding-bigger-small;
          }
        }
      }
    }
  }
}

//default
$rte-border-size: 1px !default;
$rte-2px-border-size: 2px !default;
$rte-border-type: solid !default;
$rte-qt-item-btn-line-height: 32px;

$rte-list-btn-flex: column !default;
$rte-split-btn-line-height: 39px !default;
$rte-big-split-btn-line-height: 38px !default;
$rte-border-color: $grey-99 !default;
$rte-full-screen-bg: $grey-white !default;
$rte-content-bg: $grey-base !default;
$rte-content-font-color: $grey-dark-font !default;
$rte-item-color: $grey-dark-font !default;
$rte-icons-color: $grey-dark-font !default;
$rte-hover-icons-color: $grey-dark-font !default;

$rte-big-quick-item-btn-width: 39px !default;
$rte-big-quick-item-btn-height: 34px !default;
$rte-big-quick-item-padding: 0 3px !default;
$rte-quick-item-icon-min-width: 25px !default;
$rte-big-quick-item-line-height: normal !default;
$rte-quick-item-line-height: 20px !default;
$rte-quick-item-active-bg: rgba($grey-base, .12) !default;
$rte-quick-item-active-font-color: $grey-dark-font !default;
$rte-quick-item-hover-border-color: $grey-8c !default;
$rte-quick-item-active-border-color: $grey-8c !default;

$rte-content-padding: 16px !default;
$rte-table-popup-padding: 10px !default;
$rte-table-popup-min-height: 155px !default;
$rte-table-popup-border: 1px solid $grey-44 !default;

$rte-quick-pop-border: 0 !default;
$rte-quick-tb-border: 1px solid $grey-99 !default;
$rte-quick-pop-bg: $grey !default;
$rte-quick-vr-line-color: rgba($grey-base, .05) !default;
$rte-quick-pop-item-focus-bg: rgba($grey-base, .12) !default;
$rte-quick-tb-btn-hover: rgba($grey-base, .12) !default;
$rte-mob-drop-down-pop-shadow: rgba($grey-base, .12) !default;

$rte-tb-items-margin-left: 6px !default;
$rte-big-active-tb-item-btn-padding: 0 7px !default;
$rte-active-tb-item-btn-padding: 0 2.5px !default;
$rte-tb-item-active-bg: rgba($grey-base, .12) !default;
$rte-tb-active-font-color: $grey-dark-font !default;
$rte-tb-item-active-border: $rte-border-size $rte-border-type $grey-8c !default;
$rte-expand-tb-border-bottom: $rte-border-size $rte-border-type $grey-99 !default;
$rte-color-picker-active-bg: inherit !default;
$rte-drop-btn-active-bg: $grey-8c !default;
$rte-drop-btn-active-color: $grey-dark-font !default;
$rte-split-btn-active-hover-font-color: $grey-dark-font !default;
$font-weight: 500 !default;
$rte-table-popup-border-radius: 0 !default;

$rte-split-btn-hover-bg: none !default;
$rte-split-btn-span-hover-bg: $grey !default;
$rte-split-btn-focus-bg: $grey-dark !default;
$rte-btn-active-bg: $grey-dark !default;
$rte-split-btn-active-color-icon-line-height: 30px !default;
$rte-dropdown-color: $grey-dark-font !default;
$rte-dropdown-transition-color: $hover-font-color !default;
$rte-color-picker-line-height: 1 !default;
$rte-popup-item-min-height: 34px !default;
$rte-big-popup-item-min-height: 40px !default;
$rte-popup-bg: $grey-darker !default;

$rte-link-valid-color: #f00 !default;
$rte-img-popup-color: #000 !default;
$rte-img-border-color: #ccc !default;
$rte-img-popup-border: 1px solid $rte-img-border-color !default;
$rte-img-popup-box-shadow: 0 2px 3px 1px rgba($rte-img-popup-color, .21) !default;
$rte-upload-drag-border-clr: $grey-99 !default;
$rte-img-header-clr: $grey-light-font !default;
$rte-drop-text-clr: $grey-ad !default;
$rte-default-character-count-color: #f0f0f0 !default;
$rte-warning-character-count-color: #ffb74d !default;
$rte-error-character-count-color: #c62828 !default;
$rte-img-border: solid 2px $brand-primary !default;
$rte-font-family: $font-family !default;
$rte-content-color: $rte-content-font-color !default;
$rte-content-blockquote-border-left-color: solid 3px $grey-e6 !default;
$rte-dropdown-selection-bgcolor: $brand-primary !default;
$rte-format-btn-min-width: 75px !default;
$rte-font-name-btn-min-width: 67px !default;
$rte-font-size-btn-min-width: 36px !default;
$rte-big-drop-btn-padding-left: 12px !default;
$rte-big-drop-btn-padding-right: 7px !default;
$rte-big-drop-btn-action-padding-left: 12px !default;
$rte-big-drop-btn-action-padding-right: 7px !default;
$rte-ext-tbar-overlay-icons-color: $grey-dark-font !default;
$rte-colorpicker-parent-padding-active-hover: 1px !default;
$rte-overlay-color: #383838 !default;
$rte-font-icon-width: 30px !default;
$rte-font-arrow-width: 18px !default;
$rte-font-arrow-touch-width: 20px !default;
$rte-colorpicker-padding: 1.5px 0 !default;
$rte-dropdown-selection-color: $brand-primary-font !default;
$rte-anchor-color: #2895ff !default;
$rte-ext-tbar-overlay-dropdown-color: $grey-dark !default;
$rte-placeholder-line-height: 18px !default;
$rte-img-resize-back-color: $brand-primary !default;
$rte-img-resize-color: $brand-primary-font !default;
$rte-table-header-color: $grey-dark-font !default;
$rte-table-span-bg-color: $grey-dark !default;
$rte-table-span-border: 1px solid $grey-cc !default;
$rte-table-span-active-bg-color: rgba($brand-primary, .2) !default;
$rte-table-span-active-border-color: color.adjust($brand-primary, $lightness: 0%) !default;
$rte-table-select-border-color: #0478d7 !default;
$rte-table-popup-bg: $grey-dark !default;
$rte-table-resize-back-color: $grey-dark !default;
$rte-table-popup-color: rgb(255, 0, 0) !default;
$rte-table-popup-box: 0 3px 8px 0 rgba($grey-base, .26) !default;
$rte-table-border-color: $grey-e6 !default;
$rte-table-alternate-color: #222 !default;
$rte-table-header-bg: #303030 !default;
$rte-table-multicell-select-bg-color: rgba($brand-primary, .14) !default;
$rte-insert-icon-color: $brand-primary !default;

$rte-insert-dialog-label-padding-top: 20px !default;
$rte-insert-dialog-label-padding-bottom: 20px !default;
$rte-big-quick-tbar-item-min-height: 36px !default;
$rte-big-quick-tbar-item-min-width: 36px !default;
$rte-content-font-size: 14px !default;
$rte-big-content-font-size: 16px !default;
$rte-big-dialog-min-height: 350px !default;
$rte-toolbar-icon-size: 16px !default;
$rte-toolbar-big-icon-size: 18px !default;
$rte-toolbar-hor-nav-border-width: 0 0 0 1px !default;
$rte-big-formatlists-dropdown-line-height: 1;

$rte-dropdown-caret-icon-size: 12px !default;
$rte-big-dropdown-caret-icon-size: 12px !default;
$rte-inline-tmp-min-width: 61px;
$rte-inline-tmp-size-min-width: 69px;
$rte-inline-tmp-color-min-width: 57px;

$rte-resize-handler-margin-bottom: 3px;
$rte-resize-handler-margin-right: 3px;
$rte-resize-handler-position: 0;
$rte-default-btn-bg: $grey-darker !default;
$rte-split-btn-border-radius: 4px !default;
$rte-split-btn-height: 34px !default;
$rte-big-split-btn-height: 40px !default;
$rte-hover-btn-border-color: $grey-white !default;
$rte-active-btn-icons-color: $grey-dark-font !default;
$rte-default-icon-color: $grey-dark-font !default;
$rte-icon-color: $grey-dark-font !default;
$rte-hover-split-btn-border: 1px solid $grey-white !default;
$rte-split-btn-border: 1px solid transparent !default;
$rte-button-focus-box-shadow: none !default;

$rte-big-color-list-span-common-padding-left-right: 1px;
$rte-default-character-count-opacity: .54;

$rte-img-dlg-max-height: 426px !default;
$rte-img-alt-dlg-max-height: 426px !default;
$rte-img-link-dlg-max-height: 223px !default;
$rte-img-size-dlg-max-height: 284px !default;
$rte-link-dlg-max-height: 394px !default;
$rte-file-browser-dlg-max-height: 557px !default;
$rte-table-dlg-max-height: 287px !default;
$rte-edit-table-dlg-max-height: 365px !default;
$rte-quick-popup-border: 1px solid $grey-88 !default;
$rte-quick-popup-border-radius: 0 !default;
$rte-quick-popup-outer-margin: 4px 1px !default;
$rte-quick-popup-inner-padding: 0 4px !default;
$rte-quick-big-popup-outer-margin: 8px 1px !default;
$rte-quick-big-popup-inner-padding: 0 5px !default;
$rte-quick-popup-bg-color: $gray !default;
$rte-quick-popup-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, .1), 0 3px 4px -1px rgba(0, 0, 0, .05) !default;

$rte-big-img-dlg-max-height: 457px !default;
$rte-big-img-alt-dlg-max-height: 457px !default;
$rte-big-img-link-dlg-max-height: 256px !default;
$rte-big-img-size-dlg-max-height: 327px !default;
$rte-big-link-dlg-max-height: 427px !default;
$rte-big-file-browser-dlg-max-height: 557px !default;
$rte-big-table-dlg-max-height: 330px !default;
$rte-big-edit-table-dlg-max-height: 414px !default;
$rte-drop-text-width: 300px !default;
$rte-drop-text-height: 128px !default;
$rte-big-drop-text-height: 140px !default;
$rte-drop-text-mobile-width: 250px !default;
$rte-tbar-default-bg: $grey-darker;
$rte-droparea-browsebtn-height: 36px;
$rte-droparea-browsebtn-padding: 0 18px;
$rte-insert-dialog-font-size: 15px;
$rte-table-popup-tablecell-height: 14px;
$rte-table-popup-tablecell-width: 14px;
$rte-table-popup-tablecell-margin: 1px;
$rte-table-popup-row-height: 16px;
$rte-top-left-border-radius: 0;
$rte-top-right-border-radius: 0;
$rte-big-table-row-height: 18px;
$rte-big-tablecell-height: 16px;
$rte-big-tablecell-width: 16px;
$rte-toolbar-item-frist-last-child-margin: 0;
$rte-toolbar-expaned-padding: 0 2.5px;
$rte-toolbar-expaned-padding-hover: 0 2.5px;
$rte-big-toolbar-expaned-padding: 0 7px;
$rte-extended-toolbar-items-padding: 0;
$rte-big-insert-dialog-label-padding-top: 12px;
$rte-tb-expended-min-height: 40px !default;
$rte-big-tb-expended-min-height: 49px !default;
$rte-tb-expended-padding-left: 1px !default;
$rte-tb-expended-hover-padding-left: 0 !default;
$rte-toolbar-expaned-minwidth: 25px !default;

$rte-emoji-pop-background: $grey-dark;
$rte-emoji-pop-box-shadow: rgba(255, 255, 255, .0001);
$rte-emoji-pop-border: 1px solid $grey-white;
$rte-emoji-tbar-btn-bg: transparent;
$rte-emoji-tbar-btn-select-bg : $grey-e6;
$rte-emoji-tbar-btn-hover: $grey-e6;
$rte-emoji-btn-height: 245px;
$rte-emoji-grp-btn-height: 40px;
$rte-emoji-grp-btn-width: 40px;
$rte-emoji-headname-font-weight: 400;
$rte-emoji-headname-color: $grey-light-font;
$rte-big-emoji-btn-height: 252px;
$rte-img-upload-abort-icon-btn-margin-top: -3px;
$rte-big-img-upload-abort-icon-btn-margin-top: -3px;
$rte-big-img-upload-abort-icon-btn-padding: 18px;
$rte-dialog-upload-status-progress: #208090 !default;
$rte-content-pre-background: inherit;
$rte-code-background: rgba(157, 157, 157, .15) !default;
$rte-code-color: rgba(237, 72, 76) !default;
$rte-code-block-label-font-weight: 500 !default;
$rte-code-block-label-font-family: Helvetica Neue !default;
$rte-code-block-label-line-height: 18px !default;
$rte-code-block-font-family: Space Mono !default;
$rte-code-block-font-weight: 400 !default;
$rte-code-block-line-height: 20px !default;
$rte-hr-border: 2px solid rgba(157, 157, 157, .48) !default;
$rte-hr-outline: rgba(0, 116, 204, 1) !default;

$rte-quick-toolbar-tip-pointer-border: $grey-88 !default;
$rte-quick-toolbar-tip-pointer-content: $gray !default;

$rte-checklist-checked-bg-color: transparent !default;
$rte-checklist-checked-border-color: 1px solid rgba(240, 240, 240, 1) !default;
$rte-checklist-checked-checkmark-color: $grey-dark-font !default;
$rte-checklist-checkbox-border: 1px solid rgba(240, 240, 240, 1);

//Start of Typography Variables Implementation
//font-size
$rte-pre-before-content-font-size: 12px !default;
$rte-default-character-count-font-size: 14px !default;
$rte-drop-text-font-size: 14px !default;
$rte-emoji-headname-font-size: 14px !default;
$rte-table-header-font-size: 14px !default;
$rte-popup-open-font-size: 14px !default;
$rte-pre-font-size: 14px !default;
$rte-slash-menu-item-text-font-size: 14px !default;
$rte-big-emoji-popup-small-font-size: 16px !default;
$rte-big-emoji-picker-name-font-size: 16px !default;
$rte-big-emoji-btn-group-small-font-size: 16px !default;
$rte-emoji-pop-tbar-btn-small-font-size: 16px !default;
$rte-emoji-grp-btn-small-font-size: 16px !default;
$rte-emoji-pop-tbar-btn-large-font-size: 24px !default;
$rte-emoji-grp-btn-large-font-size: 24px !default;
$rte-emoji-grp-btn-font-size: 24px !default;
$rte-slash-menu-content-font-size: 30px !default;
$rte-slash-menu-para-before-font-size: 15px !default;
$rte-slash-menu-h1-before-font-size: 13px !default;
$rte-slash-menu-h2-before-font-size: 13px !default;
$rte-slash-menu-h3-before-font-size: 13px !default;
$rte-slash-menu-h4-before-font-size: 13px !default;
$rte-slash-menu-item-description-font-size: 12px !default;
$rte-common-content-font-size: 1em !default;
$rte-content-h4-font-size: 1.714em !default;
$rte-content-h5-font-size: 1.428em !default;
$rte-content-h6-font-size: 1.142em !default;
$rte-content-ul-h3-font-size: 1.16em !default;
$rte-content-ul-h4-font-size: 1em !default;
$rte-content-ul-h5-font-size: .83em !default;
$rte-content-ul-h6-font-size: .7em !default;
$rte-filemanager-label-font-size: 15px !default;
$rte-content-h1-font-size: 2.857em !default;
$rte-content-h2-font-size: 2.285em !default;
$rte-content-h3-font-size: 2em !default;
$rte-content-ul-h1-font-size: 2em !default;
$rte-content-ul-h2-font-size: 1.5em !default;
$rte-big-emoji-popup-large-font-size: 26px !default;
$rte-big-emoji-btn-group-large-font-size: 26px !default;
$rte-big-emoji-picker-group-font-size: 26px !default;
$rte-big-content-h1-font-size: 2.857em !default;
$rte-big-content-h2-font-size: 2.285em !default;
$rte-big-content-h3-font-size: 2em !default;
$rte-big-content-h4-font-size: 1.714em !default;
$rte-big-content-h5-font-size: 1.428em !default;
$rte-big-content-h6-font-size: 1.142em !default;
$rte-big-content-ul-h1-font-size: 2em !default;
$rte-big-content-ul-h2-font-size: 1.5em !default;
$rte-big-content-ul-h3-font-size: 1.16em !default;
$rte-big-content-ul-h4-font-size: 1em !default;
$rte-big-content-ul-h5-font-size: .83em !default;
$rte-big-content-ul-h6-font-size: .7em !default;

//font-weight
$rte-slash-menu-content-text-font-weight: 500 !default;
$rte-big-emoji-picker-name-font-weight: 500 !default;
$rte-content-h1-font-weight: 600 !default;
$rte-content-h2-font-weight: 600 !default;
$rte-content-h3-font-weight: 600 !default;
$rte-content-h4-font-weight: 600 !default;
$rte-content-h5-font-weight: 600 !default;
$rte-edit-table-border-label-font-weight: 600 !default;
$rte-content-font-weight: 400 !default;
$rte-lable-font-weight: 400 !default;
$rte-color-picker-font-weight: 400 !default;
$rte-popup-open-font-weight: 400 !default;
$rte-dropdown-btn-font-weight: 400 !default;
$rte-popup-open-font-weight: 400 !default;
$rte-content-strong-b-font-weight: 700 !default;
$rte-content-ul-h1-font-weight: 700 !default;
$rte-content-ul-h2-font-weight: 700 !default;
$rte-content-ul-h3-font-weight: 700 !default;
$rte-content-ul-h4-font-weight: 700 !default;
$rte-content-ul-h5-font-weight: 700 !default;
$rte-content-ul-h6-font-weight: 700 !default;
$rte-content-img-caption-font-weight: 400;

//line-height
$rte-slash-menu-item-text-line-height: 20px !default;
$rte-slash-menu-content-line-height: 20px !default;
$rte-slash-menu-item-description-line-height: 20px !default;
$rte-content-ul-h1-line-height: 40px !default;
$rte-content-ul-h2-line-height: 40px !default;
$rte-content-ul-h1-small-line-height: 24px !default;
$rte-content-ul-h2-small-line-height: 24px !default;
$rte-content-h1-line-height: 1.2 !default;
$rte-content-h5-line-height: 1.2 !default;
$rte-content-h6-line-height: 1.5 !default;
$rte-dialog-word-upload-text-line-height: normal;
$rte-uploadwrap-droparea-upload-text-line-height: normal;
$rte-content-line-height: 1.5 !default;
$rte-content-h2-line-height: 1.2 !default;
$rte-content-h3-line-height: 1.2 !default;
$rte-content-h4-line-height: 1.2 !default;
$rte-srctextarea-line-height: 22px !default;
$rte-inline-dropdown-line-height: 34px !default;
$rte-big-content-height: 1.5 !default;
$rte-big-content-h1-line-height: 1.2 !default;
$rte-big-content-h2-line-height: 1.2 !default;
$rte-big-content-h3-line-height: 1.2 !default;
$rte-big-content-h4-line-height: 1.2 !default;
$rte-big-content-h5-line-height: 1.2 !default;
$rte-big-content-h6-line-height: 1.5 !default;

//border-radius
$rte-content-pre-border-radius: 0 !default;
$rte-emoji-pop-border-radius: 4px !default;
$rte-upload-drag-border-radius: 4px !default;
$rte-big-emojipicker-tbar-btn-border-radius: 4px !default;
$rte-checklist-checkbox-border-radius: 4px !default;
$rte-container-border-radius: 4px !default;
$rte-big-container-border-radius: 4px !default;
$rte-tb-item-active-border-radius: 4px !default;
$rte-border-radius: 4px !default;
$rte-pre-border-radius: 6px !default;
$rte-big-tb-expand-border-radius: 8px !default;
$rte-big-dialog-border-radius: 16px !default;
$rte-insert-table-btn-border-radius: 20px !default;
$rte-toolbar-border-radius: 0 4px 0 0;
$rte-toolbar-container-border-radius: 0 0 4px 4px !default;
$rte-pre-before-content-border-radius: 0 0 4px 4px !default;
$rte-toolbar-wrapper-border-radius: 4px 4px 0 0 !default;
$rte-big-toolbar-border-radius: 0 4px 0 0;
$rte-big-toolbar-container-border-radius: 0 0 4px 4px !default;
$rte-big-toolbar-wrapper-border-radius: 4px 4px 0 0 !default;
$rte-videoboxmark-border-radius: 15px !default;

//padding
$rte-content-pre-padding: 0 !default;
$rte-upload-dlg-content-padding: 0 !default;
$rte-table-dlg-content-padding: 0 !default;
$rte-big-toolbar-tbar-btn-hover-padding: 0 !default;
$rte-big-toolbar-tbar-btn-active-padding: 0 !default;
$rte-big-toolbar-tbar-btn-padding: 0 !default;
$rte-emoji-picker-tbar-btn-text-padding: 0 !default;
$rte-video-elem-padding: 0 !default;
$rte-colorpicker-custom-palette-padding: 0 !default;
$rte-container-custom-palette-padding: 0 !default;
$rte-img-wrap-padding: 0 !default;
$rte-media-break-elem-padding: 1px !default;
$rte-media-inline-elem-padding: 1px !default;
$rte-colorpicker-custom-palette-switch-btn-padding: 5px !default;
$rte-video-wrapper-padding: 5px !default;
$rte-content-textarea-padding: 8px !default;
$rte-emoji-btn-padding: 10px !default;
$rte-big-emoji-btn-padding: 12px !default;
$rte-slash-menu-icon-padding: 15px !default;
$rte-placeholder-padding: 16px !default;
$rte-content-src-textarea-padding: 16px !default;
$rte-iframe-content-padding: 16px !default;
$rte-big-emoji-btn-group-padding: 8px 0 !default;
$rte-big-emoji-picker-group-padding: 8px 0 !default;
$rte-big-emoji-popup-padding: 9px 5px !default;
$rte-big-toolbar-tbar-btn-small-padding: 3px 7px !default;
$rte-big-toolbar-tbar-btn-large-padding: 2px 5px !default;
$rte-dlg-modal-browse-btn-padding: 0 18px !default;
$rte-link-dlg-content-padding: 7px 20px !default;
$rte-emoji-picker-tbar-btn-material-padding: 0 6px !default;
$rte-emoji-grp-btn-padding: 6px 0 !default;
$rte-video-url-wrap-padding: 8px 4px !default;
$rte-emoji-grp-btn-control-padding: 6px 0 !default;
$rte-table-padding: 2px 5px !default;
$rte-emoji-picker-tbar-btn-hover-padding: 7px 3px !default;
$rte-emoji-picker-tbar-btn-padding: 7px 3px !default;
$rte-code-block-padding: 20px 16px 16px !default;
$rte-inline-dropdown-ul-padding: 7px 0 !default;
$rte-slash-menu-item-text-padding:  5px 0 1px !default;
$rte-slash-menu-item-description-padding: 1px 0 5px !default;
$rte-code-block-label-padding: 2px 4px !default;
$rte-big-slash-menu-item-description-padding: 1px 0 5px !default;
$rte-big-slash-menu-item-text-padding: 5px 0 1px !default;
$rte-inline-dropdown-li-padding: 0 6.5px !default;
$rte-toolbar-tbar-btn-padding: 0 !default;
$rte-toolbar-tbar-btn-hover-padding: 0 !default;
$rte-toolbar-tbar-btn-icons-padding: 0 !default;
$rte-big-split-tbar-btn-padding: 0 !default;
$rte-big-split-tbar-btn-hover-padding: 0 !default;
$rte-big-split-tbar-btn-icons-padding: 0 !default;

//padding-left
$rte-blockquote-padding-left: 0 !default;
$rte-big-slashmenu-li-padding-left: 0 !default;
$rte-iframe-blockquote-padding-left: 12px !default;
$rte-character-count-padding-left: 30px !default;

//padding-right
$rte-blockquote-padding-right: 12px !default;
$rte-character-count-padding-right: unset !default;

//padding-top
$rte-video-dialog-label-padding-top: 0 !default;
$rte-dlg-header-content-padding-top: 0 !default;
$rte-table-dialog-label-padding-top: 0 !default;
$rte-filemanager-label-padding-top: 15px !default;
$rte-video-url-wrapper-padding-top: 15px !default;
$rte-radio-keep-format-padding-top: 24px !default;
$rte-radio-remove-plain-padding-top: 20px !default;
$rte-link-label-first-child-padding-top: 0 !default;
$rte-img-label-first-child-padding-top: 0 !default;

//padding-bottom
$rte-count-resize-enabled-content-padding-bottom: 0 !default;
$rte-default-character-count-padding-bottom: 2px !default;
$rte-video-url-wrapper-padding-bottom: 5px !default;
$rte-filemanager-label-padding-bottom: 8px !default;

//margin
$rte-table-tablecell-small-margin: 0 !default;
$rte-dialog-radio-small-margin: 0 !default;
$rte-video-elem-margin: 0 !default;
$rte-tbar-btn-small-margin: 0 !default;
$rte-table-gripper-active-bg: $brand-primary !default;
$rte-table-gripper-active-color: $brand-primary-font !default;
$rte-table-gripper-hover-bg: rgba($brand-primary, .3) !default;
$rte-table-dlg-content-small-margin: 0 !default;
$rte-content-textarea-margin: 0 !default;
$rte-quick-toolbar-horizontal-separator-margin: 0 !default;
$rte-popup-toolbar-item-margin: 0 !default;
$rte-quick-horizontal-separator-first-margin: 0 !default;
$rte-table-tablecell-large-margin: 1px !default;
$rte-table-open-tablecell-margin: 1px !default;
$rte-emojipicker-input-control-wrapper-margin: 10px !default;
$rte-content-hr-margin: 10px 0 !default;
$rte-content-h1-margin: 10px 0 !default;
$rte-content-h2-margin: 10px 0 !default;
$rte-content-h3-margin: 10px 0 !default;
$rte-content-h4-margin: 10px 0 !default;
$rte-content-h5-margin: 10px 0 !default;
$rte-content-h6-margin: 10px 0 !default;
$rte-content-blockquote-margin: 10px 0 !default;
$rte-content-pre-margin: 0 0 10px !default;
$rte-content-p-margin: 0 0 10px !default;
$rte-ul-menu-icon-margin: 0 6px !default;
$rte-rtl-ul-menu-icon-margin: 0 6px !default;
$rte-img-video-center-margin: 5px auto !default;
$rte-img-video-left-margin: 0 auto !default;
$rte-img-video-right-margin: 0 auto !default;
$rte-drop-text-margin: 0 auto !default;
$rte-drop-text-mobile-margin: 0 auto !default;
$rte-img-caption-margin: 5px auto !default;
$rte-droparea-browsebtn-margin: 0 auto 10px !default;
$rte-dlg-modal-browse-btn-margin: 0 auto 10px !default;
$rte-media-droparea-browsebtn-margin: 0 auto 10px !default;
$rte-li-ul-margin:  10px !default;
$rte-big-quick-toolbar-item-margin: 0 !default;
$rte-media-elem-margin: auto !default;
$rte-content-img-caption-inner-margin: auto !default;
$rte-img-wrap-margin: auto !default;
$rte-img-leftwrap-margin: 5px 5px 5px 0 !default;
$rte-img-rightwrap-margin: 5px 0 5px 5px !default;

//margin-left
$rte-content-blockquote-margin-left: 0 !default;
$rte-toolbar-multirow-margin-left: 0 !default;
$rte-toolbar-item-first-child-margin-left: 0 !default;
$rte-imgleft-margin-left: 0 !default;
$rte-uploadwrap-file-container-margin-left: 0 !default;
$rte-toolbar-poup-extended-margin-left: 0 !default;
$rte-media-inline-elem-margin-left: 5px !default;
$rte-img-video-right-margin-left: 5px !default;
$rte-slash-menu-icon-margin-left: 15px !default;
$rte-imgcenter-margin-left: auto !default;
$rte-imgright-margin-left: auto !default;

//margin-right
$rte-imgright-margin-right: 0 !default;
$rte-toolbar-multirow-margin-right: 0 !default;
$rte-img-caption-imgright-margin-right: 0 !default;
$rte-media-inline-elem-margin-right: 5px !default;
$rte-img-video-left-margin-right: 5px !default;
$rte-default-character-count-margin-right: 15px !default;
$rte-upload-file-container-margin-right: 50px !default;
$rte-imgcenter-margin-right: auto !default;
$rte-imgleft-margin-right: auto !default;
$rte-character-count-last-child-margin-right: 10px !default;
$rte-character-count-rtl-margin-right: auto !default;

//margin-top
$rte-uploadwrap-file-btn-icons-margin-top: 0 !default;
$rte-color-picker-margin-top: 3px !default;
$rte-table-field-margin-top: 4px !default;
$rte-table-element-margin-top: 12px !default;
$rte-table-span-margin-top: 12px !default;
$rte-content-h3-h4-tag-margin-top: .6em !default;
$rte-content-h4-h5-tag-margin-top: .6em !default;
$rte-content-h5-h6-tag-margin-top: .6em !default;
$rte-big-content-h3-h4-tag-margin-top: .6em !default;
$rte-big-content-h4-h5-tag-margin-top: .6em !default;
$rte-big-content-h5-h6-tag-margin-top: .6em !default;
$rte-content-table-margin-top: 10px !default;
$rte-imgleft-margin-top: 5px !default;

//margin-bottom
$rte-tb-bottom-content-margin-bottom: 0 !default;
$rte-content-ul-tag-margin-bottom: 0 !default;
$rte-content-para-pre-block-last-margin-bottom: 0 !default;
$rte-table-span-margin-bottom: 8px !default;
$rte-content-p-margin-bottom: 10px !default;
$rte-content-li-margin-bottom: 10px !default;
$rte-content-table-margin-bottom: 10px !default;
$rte-resize-bar-margin-bottom: 20px !default;
$rte-img-leftwrap-inner-margin-bottom: 5px !default;
$rte-img-rightwrap-inner-margin-bottom: 5px !default;
$rte-img-wrap-img-margin-bottom: 0 !default;

//border
$rte-content-pre-border: 0 !default;
$rte-content-textarea-border: 0 !default;
$rte-content-src-textarea-border: 0 !default;
$rte-media-break-elem-border: 0 !default;
$rte-media-elem-border: 0 !default;
$rte-quick-popup-hide-border: 0 !default;
$rte-hr-small-border: 2px solid rgba(157, 157, 157, .48) !default;
$rte-pre-border: 1px solid rgba(229, 231, 235, 1) !default;
$rte-pre-small-border: 1px solid rgba(40, 47, 60, 1) !default;
$rte-table-select-border: 2px double $rte-table-select-border-color !default;
$rte-table-select-multi-cells-border: 1px double $rte-table-select-border-color !default;
$rte-container-border: 1px solid $rte-border-color !default;
$rte-table-border: 1px solid $rte-table-border-color !default;
$rte-media-droparea-upload-border: 0 solid transparent !default;
$rte-content-table-select-border: 1px double $rte-table-select-border-color !default;
$rte-table-border-table-border: 1px double $rte-table-border-color !default;
$rte-import-word-upload-border: 0 solid transparent !default;
$rte-drop-text-border: 2px dashed $rte-upload-drag-border-clr !default;
$rte-table-span-active-border: 1px solid $rte-table-span-active-border-color !default;
$rte-tb-expended-hover-border: solid rgba(0, 0, 0, .12) !default;
$rte-img-video-boxmark-border: 1px solid $rte-img-resize-color !default;
$rte-mob-img-video-boxmark-border: 1px solid $rte-img-resize-back-color !default;
$rte-direct-span-media-boxmark-border: 1px solid $rte-img-resize-color !default;
$rte-emoji-grp-btn-border: none !default;
$rte-insert-table-btn-border: none !default;
$rte-iframe-content-border: none !default;
$rte-quick-popup-toolbar-border: none !default;
$rte-toolbar-btn-border: none !default;
$rte-toolbar-btn-hover-border: none !default;
$rte-emojipicker-toolbar-border: none !default;
$rte-emojipicker-toolbar-scroll-border: none !default;
$rte-toolbar-pop-border: none !default;

//border-bottom
$rte-dialog-file-list-border-bottom: 0 !default;
$rte-uploadwrap-file-list-border-bottom: 0 solid transparent !default;
$rte-reicon-before-border-bottom: 6px solid transparent !default;
$rte-reicon-after-border-bottom: 6px solid transparent !default;
$rte-toolbar-wrapper-container-border-bottom: 1px solid $rte-border-color !default;

//border-top
$rte-dialog-upload-files-border-top: 0 !default;
$rte-reicon-before-border-top: 6px solid transparent !default;
$rte-reicon-after-border-top: 6px solid transparent !default;
$rte-wrapper-tb-bottom-border-top: 1px solid $rte-border-color !default;
$rte-droparea-files-border-top: 0 solid transparent !default;

//border-left
$rte-content-blockquote-border-left: 0 !default;
$rte-reicon-after-border-left: 6px solid !default;

//border-right
$rte-reicon-before-border-right: 6px solid !default;

//gap
$rte-edit-table-cell-gap: 16px !default;
$rte-emoji-btn-gap: 10px !default;
$rte-emoji-btn-group-gap: 6px !default;
$rte-emoji-search-btn-gap: 6px !default;
$rte-big-emoji-search-btn-gap: 6px !default;
$rte-slashmenu-description-gap: 10px !default;
$rte-big-emoji-btn-gap: 10px !default;
$rte-big-emoji-btn-group-gap: 8px !default;

//height
$rte-content-ul-h1-height: 40px;
$rte-content-ul-h2-height: 40px;
$rte-checklist-checkbox-height: 16px;
$rte-container-height: 100%;
$rte-content-textarea-height: 100%;
$rte-full-screen-height: 100%;
$rte-content-height: 100%;
$rte-table-cell-after-height: 100%;
$rte-srctextarea-height: 100%;
$rte-color-picker-height: auto;
$rte-media-inline-dropdown-height: 34px;
$rte-content-table-select-height: inherit;
$rte-emoji-search-btn-height: 0;
$rte-modal-popup-container-height: 100%;
$rte-popup-overlay-height: 100%;
$rte-reicon-before-height: 0;
$rte-reicon-after-height: 0;
$rte-dlg-modal-browse-btn-mobile-height: 36px;
$rte-toolbar-wrapper-container-height: auto;
$rte-tip-pointer-before-after-height: 0;

//width
$rte-checklist-checkbox-width: 16px;
$rte-container-width: 100%;
$rte-content-textarea-width: 100%;
$rte-full-screen-width: 100%;
$rte-toolbar-multirow-width: 100%;
$rte-content-width: 100%;
$rte-e-content-width: 100%;
$rte-table-cell-after-width: 100%;
$rte-srctextarea-width: 100%;
$rte-color-picker-width: 100%;
$rte-ul-menu-icon-width: auto;
$rte-drop-text-width: auto;
$rte-content-img-caption-inner-width: 100%;
$rte-img-wrap-width: 100%;
$rte-insert-table-btn-width: 100%;
$rte-table-bgcolor-width: 50%;
$rte-modal-popup-container-width: 100%;
$rte-popup-overlay-width: 100%;
$rte-insert-table-btn-width: 100%;
$rte-pop-toolbar-extended-width: 100%;
$rte-tip-pointer-before-after-width: 0;
$rte-emoji-popup-open-width: 310px;
$rte-big-emoji-popup-open-width: 337px;

//min-height
$rte-dialog-min-height: 298px;
$rte-uploadwrap-file-list-min-height: initial;
$rte-quick-toolbar-min-height: auto;
$rte-quick-toolbar-items-not-tbar-pos-min-height: auto;
$rte-quick-toolbar-items-not-tbar-pos-min-width: auto;
$rte-popup-toolbar-item-min-height: auto;
$rte-big-quick-toolbar-min-height: auto;
$rte-big-quick-toolbar-items-not-tbar-pos-min-height: auto;
$rte-big-popup-toolbar-item-min-height: auto;
$rte-expended-nav-min-height: 39px;
$rte-big-expended-nav-min-height: 49px;
$rte-emoji-popup-open-min-height: 330px;
$rte-big-emoji-popup-open-min-height: 337px;

//min-width
$rte-quick-toolbar-min-width: auto;
$rte-popup-toolbar-item-min-width: auto;
$rte-big-quick-toolbar-min-width: auto;
$rte-big-quick-toolbar-items-not-tbar-pos-min-width: auto;
$rte-big-popup-toolbar-item-min-width: auto;
$rte-dropdown-icons-ul-min-width: auto;

//max-width
$rte-media-break-elem-max-width: 100%;
$rte-media-elem-max-width: 100%;
$rte-media-inline-elem-max-width: 100%;
$rte-img-video-center-max-width: 100%;
$rte-img-caption-max-width: 100%;

//max-height
$rte-codeblock-dropdown-popup-max-height: 300px;

//End of Typography Variables Implementation

$rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAzMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9InBhdGgtMS1vdXRzaWRlLTFfNDgyXzI1NiIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iNCIgeT0iMiIgd2lkdGg9IjkiIGhlaWdodD0iMTgiIGZpbGw9ImJsYWNrIj4KPHJlY3QgZmlsbD0id2hpdGUiIHg9IjQiIHk9IjIiIHdpZHRoPSI5IiBoZWlnaHQ9IjE4Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS41IDRINi40NjQ0N0M2Ljk5NDkgNCA3LjUwMzYxIDQuMjEwNzEgNy44Nzg2OCA0LjU4NTc5TDggNC43MDcxMVY0LjcwODYzVjQuNzE1MzhWNC43MjIyMlY0LjcyOTE4VjQuNzM2MjRWNC43NDM0MVY0Ljc1MDY4VjQuNzU4MDZWNC43NjU1NFY0Ljc3MzEzVjQuNzgwODJWNC43ODg2MlY0Ljc5NjUyVjQuODA0NTNWNC44MTI2NVY0LjgyMDg3VjQuODI5MTlWNC44Mzc2MlY0Ljg0NjE2VjQuODU0OFY0Ljg2MzU0VjQuODcyMzlWNC44ODEzNVY0Ljg5MDQxVjQuODk5NTdWNC45MDg4NFY0LjkxODIxVjQuOTI3NjhWNC45MzcyN1Y0Ljk0Njk1VjQuOTU2NzRWNC45NjY2M1Y0Ljk3NjYzVjQuOTg2NzNWNC45OTY5M1Y1LjAwNzI0VjUuMDE3NjZWNS4wMjgxN1Y1LjAzODc5VjUuMDQ5NTJWNS4wNjAzNFY1LjA3MTI3VjUuMDgyMzFWNS4wOTM0NFY1LjEwNDY5VjUuMTE2MDNWNS4xMjc0OFY1LjEzOTAzVjUuMTUwNjhWNS4xNjI0NFY1LjE3NDI5VjUuMTg2MjZWNS4xOTgzMlY1LjIxMDQ5VjUuMjIyNzZWNS4yMzUxM1Y1LjI0NzYxVjUuMjYwMThWNS4yNzI4NlY1LjI4NTY1VjUuMjk4NTNWNS4zMTE1MlY1LjMyNDYxVjUuMzM3OFY1LjM1MTA5VjUuMzY0NDlWNS4zNzc5OFY1LjM5MTU4VjUuNDA1MjhWNS40MTkwOFY1LjQzMjk5VjUuNDQ2OTlWNS40NjExVjUuNDc1MzFWNS40ODk2MlY1LjUwNDAzVjUuNTE4NTRWNS41MzMxNlY1LjU0Nzg3VjUuNTYyNjlWNS41Nzc2MVY1LjU5MjYyVjUuNjA3NzRWNS42MjI5NlY1LjYzODI4VjUuNjUzNzFWNS42NjkyM1Y1LjY4NDg1VjUuNzAwNTdWNS43MTY0VjUuNzMyMzJWNS43NDgzNVY1Ljc2NDQ3VjUuNzgwN1Y1Ljc5NzAyVjUuODEzNDVWNS44Mjk5N1Y1Ljg0NjZWNS44NjMzMlY1Ljg4MDE1VjUuODk3MDdWNS45MTQxVjUuOTMxMjJWNS45NDg0NFY1Ljk2NTc3VjUuOTgzMTlWNi4wMDA3MVY2LjAxODMzVjYuMDM2MDVWNi4wNTM4N1Y2LjA3MTc5VjYuMDg5ODFWNi4xMDc5M1Y2LjEyNjE1VjYuMTQ0NDZWNi4xNjI4N1Y2LjE4MTM5VjYuMlY2LjIxODcxVjYuMjM3NTJWNi4yNTY0M1Y2LjI3NTQzVjYuMjk0NTRWNi4zMTM3NFY2LjMzMzA0VjYuMzUyNDRWNi4zNzE5NFY2LjM5MTUzVjYuNDExMjJWNi40MzEwMlY2LjQ1MDkxVjYuNDcwODlWNi40OTA5OFY2LjUxMTE2VjYuNTMxNDRWNi41NTE4MlY2LjU3MjI5VjYuNTkyODdWNi42MTM1NFY2LjYzNDMxVjYuNjU1MTdWNi42NzYxM1Y2LjY5NzE5VjYuNzE4MzVWNi43Mzk2VjYuNzYwOTVWNi43ODI0VjYuODAzOTRWNi44MjU1OFY2Ljg0NzMyVjYuODY5MTZWNi44OTEwOVY2LjkxMzEyVjYuOTM1MjRWNi45NTc0NlY2Ljk3OTc4VjcuMDAyMTlWNy4wMjQ3VjcuMDQ3MzFWNy4wNzAwMVY3LjA5MjhWNy4xMTU3VjcuMTM4NjlWNy4xNjE3N1Y3LjE4NDk1VjcuMjA4MjNWNy4yMzE2VjcuMjU1MDdWNy4yNzg2NFY3LjMwMjI5VjcuMzI2MDVWNy4zNDk5VjcuMzczODRWNy4zOTc4OFY3LjQyMjAyVjcuNDQ2MjVWNy40NzA1OFY3LjQ5NVY3LjUxOTUxVjcuNTQ0MTJWNy41Njg4M1Y3LjU5MzYzVjcuNjE4NTJWNy42NDM1MVY3LjY2ODZWNy42OTM3OFY3LjcxOTA1VjcuNzQ0NDFWNy43Njk4OFY3Ljc5NTQzVjcuODIxMDhWNy44NDY4M1Y3Ljg3MjY2VjcuODk4NlY3LjkyNDYyVjcuOTUwNzRWNy45NzY5NVY4LjAwMzI2VjguMDI5NjZWOC4wNTYxNlY4LjA4Mjc0VjguMTA5NDNWOC4xMzYyVjguMTYzMDdWOC4xOTAwM1Y4LjIxNzA5VjguMjQ0MjNWOC4yNzE0N1Y4LjI5ODgxVjguMzI2MjRWOC4zNTM3NlY4LjM4MTM3VjguNDA5MDdWOC40MzY4N1Y4LjQ2NDc2VjguNDkyNzVWOC41MjA4MlY4LjU0ODk5VjguNTc3MjVWOC42MDU2MVY4LjYzNDA1VjguNjYyNTlWOC42OTEyMlY4LjcxOTk0VjguNzQ4NzZWOC43Nzc2NlY4LjgwNjY2VjguODM1NzVWOC44NjQ5M1Y4Ljg5NDIxVjguOTIzNTdWOC45NTMwM1Y4Ljk4MjU4VjkuMDEyMjJWOS4wNDE5NVY5LjA3MTc3VjkuMTAxNjhWOS4xMzE2OVY5LjE2MTc4VjkuMTkxOTdWOS4yMjIyNVY5LjI1MjYyVjkuMjgzMDhWOS4zMTM2M1Y5LjM0NDI3VjkuMzc1MDFWOS40MDU4M1Y5LjQzNjc0VjkuNDY3NzVWOS40OTg4NFY5LjUzMDAzVjkuNTYxM1Y5LjU5MjY3VjkuNjI0MTNWOS42NTU2N1Y5LjY4NzMxVjkuNzE5MDRWOS43NTA4NVY5Ljc4Mjc2VjkuODE0NzZWOS44NDY4NFY5Ljg3OTAyVjkuOTExMjhWOS45NDM2NFY5Ljk3NjA4VjEwLjAwODZWMTAuMDQxMlYxMC4wNzRWMTAuMTA2OFYxMC4xMzk2VjEwLjE3MjZWMTAuMjA1N1YxMC4yMzg5VjEwLjI3MjFWMTAuMzA1NFYxMC4zMzg5VjEwLjM3MjRWMTAuNDA2VjEwLjQzOTdWMTAuNDczNVYxMC41MDczVjEwLjU0MTNWMTAuNTc1M1YxMC42MDk1VjEwLjY0MzdWMTAuNjc4VjEwLjcxMjRWMTAuNzQ2OVYxMC43ODE1VjEwLjgxNjFWMTAuODUwOVYxMC44ODU3VjEwLjkyMDZWMTAuOTU1N1YxMC45OTA4VjExSDcuNUg3VjEySDcuNUg4VjEyLjAwODlWMTIuMDQ2NlYxMi4wODQzVjEyLjEyMjFWMTIuMTU5OVYxMi4xOTc5VjEyLjIzNTlWMTIuMjc0MVYxMi4zMTIzVjEyLjM1MDZWMTIuMzg5VjEyLjQyNzRWMTIuNDY2VjEyLjUwNDZWMTIuNTQzNFYxMi41ODIyVjEyLjYyMTFWMTIuNjYwMVYxMi42OTkxVjEyLjczODNWMTIuNzc3NVYxMi44MTY4VjEyLjg1NjNWMTIuODk1N1YxMi45MzUzVjEyLjk3NVYxMy4wMTQ3VjEzLjA1NDVWMTMuMDk0NVYxMy4xMzQ1VjEzLjE3NDVWMTMuMjE0N1YxMy4yNTQ5VjEzLjI5NTNWMTMuMzM1N1YxMy4zNzYyVjEzLjQxNjhWMTMuNDU3NFYxMy40OTgyVjEzLjUzOVYxMy41Nzk5VjEzLjYyMDlWMTMuNjYyVjEzLjcwMzJWMTMuNzQ0NFYxMy43ODU4VjEzLjgyNzJWMTMuODY4N1YxMy45MTAzVjEzLjk1MTlWMTMuOTkzN1YxNC4wMzU1VjE0LjA3NzRWMTQuMTE5NFYxNC4xNjE1VjE0LjIwMzdWMTQuMjQ1OVYxNC4yODgyVjE0LjMzMDZWMTQuMzczMVYxNC40MTU3VjE0LjQ1ODRWMTQuNTAxMVYxNC41NDM5VjE0LjU4NjhWMTQuNjI5OFYxNC42NzI5VjE0LjcxNlYxNC43NTkyVjE0LjgwMjVWMTQuODQ1OVYxNC44ODk0VjE0LjkzM1YxNC45NzY2VjE1LjAyMDNWMTUuMDY0MVYxNS4xMDhWMTUuMTUyVjE1LjE5NlYxNS4yNDAxVjE1LjI4NDNWMTUuMzI4NlYxNS4zNzNWMTUuNDE3NFYxNS40NjE5VjE1LjUwNjVWMTUuNTUxMlYxNS41OTZWMTUuNjQwOFYxNS42ODU4VjE1LjczMDhWMTUuNzc1OVYxNS44MjFWMTUuODY2M1YxNS45MTE2VjE1Ljk1N1YxNi4wMDI1VjE2LjA0ODFWMTYuMDkzN1YxNi4xMzk1VjE2LjE4NTNWMTYuMjMxMlYxNi4yNzcxVjE2LjMyMzJWMTYuMzY5M1YxNi40MTU1VjE2LjQ2MThWMTYuNTA4MlYxNi41NTQ2VjE2LjYwMTFWMTYuNjQ3N1YxNi42OTQ0VjE2Ljc0MTJWMTYuNzg4VjE2LjgzNDlWMTYuODgxOVYxNi45MjlWMTYuOTc2MVYxNy4wMjM0VjE3LjA3MDdWMTcuMTE4MVYxNy4xNjU1VjE3LjIxMzFWMTcuMjYwN1YxNy4yOTI5TDcuODc4NjggMTcuNDE0MkM3LjUwMzYxIDE3Ljc4OTMgNi45OTQ5IDE4IDYuNDY0NDcgMThINS41VjE5SDYuNDY0NDdDNy4yMjAzNyAxOSA3Ljk0Njg3IDE4LjcxNDcgOC41IDE4LjIwMzhDOS4wNTMxNCAxOC43MTQ3IDkuNzc5NjMgMTkgMTAuNTM1NSAxOUgxMS41VjE4SDEwLjUzNTVDMTAuMDA1MSAxOCA5LjQ5NjM5IDE3Ljc4OTMgOS4xMjEzMiAxNy40MTQyTDkgMTcuMjkyOVYxNy4yNjA3VjE3LjIxMzFWMTcuMTY1NVYxNy4xMTgxVjE3LjA3MDdWMTcuMDIzNFYxNi45NzYxVjE2LjkyOVYxNi44ODE5VjE2LjgzNDlWMTYuNzg4VjE2Ljc0MTJWMTYuNjk0NFYxNi42NDc3VjE2LjYwMTFWMTYuNTU0NlYxNi41MDgyVjE2LjQ2MThWMTYuNDE1NVYxNi4zNjkzVjE2LjMyMzJWMTYuMjc3MVYxNi4yMzEyVjE2LjE4NTNWMTYuMTM5NVYxNi4wOTM3VjE2LjA0ODFWMTYuMDAyNVYxNS45NTdWMTUuOTExNlYxNS44NjYzVjE1LjgyMVYxNS43NzU5VjE1LjczMDhWMTUuNjg1OFYxNS42NDA4VjE1LjU5NlYxNS41NTEyVjE1LjUwNjVWMTUuNDYxOVYxNS40MTc0VjE1LjM3M1YxNS4zMjg2VjE1LjI4NDNWMTUuMjQwMVYxNS4xOTZWMTUuMTUyVjE1LjEwOFYxNS4wNjQxVjE1LjAyMDNWMTQuOTc2NlYxNC45MzNWMTQuODg5NFYxNC44NDU5VjE0LjgwMjVWMTQuNzU5MlYxNC43MTZWMTQuNjcyOVYxNC42Mjk4VjE0LjU4NjhWMTQuNTQzOVYxNC41MDExVjE0LjQ1ODRWMTQuNDE1N1YxNC4zNzMxVjE0LjMzMDZWMTQuMjg4MlYxNC4yNDU5VjE0LjIwMzdWMTQuMTYxNVYxNC4xMTk0VjE0LjA3NzRWMTQuMDM1NVYxMy45OTM3VjEzLjk1MTlWMTMuOTEwM1YxMy44Njg3VjEzLjgyNzJWMTMuNzg1OFYxMy43NDQ0VjEzLjcwMzJWMTMuNjYyVjEzLjYyMDlWMTMuNTc5OVYxMy41MzlWMTMuNDk4MlYxMy40NTc0VjEzLjQxNjhWMTMuMzc2MlYxMy4zMzU3VjEzLjI5NTNWMTMuMjU0OVYxMy4yMTQ3VjEzLjE3NDVWMTMuMTM0NVYxMy4wOTQ1VjEzLjA1NDVWMTMuMDE0N1YxMi45NzVWMTIuOTM1M1YxMi44OTU3VjEyLjg1NjNWMTIuODE2OFYxMi43Nzc1VjEyLjczODNWMTIuNjk5MVYxMi42NjAxVjEyLjYyMTFWMTIuNTgyMlYxMi41NDM0VjEyLjUwNDZWMTIuNDY2VjEyLjQyNzRWMTIuMzg5VjEyLjM1MDZWMTIuMzEyM1YxMi4yNzQxVjEyLjIzNTlWMTIuMTk3OVYxMi4xNTk5VjEyLjEyMjFWMTIuMDg0M1YxMi4wNDY2VjEyLjAwODlWMTJIOS41SDEwVjExSDkuNUg5VjEwLjk5MDhWMTAuOTU1N1YxMC45MjA2VjEwLjg4NTdWMTAuODUwOVYxMC44MTYxVjEwLjc4MTVWMTAuNzQ2OVYxMC43MTI0VjEwLjY3OFYxMC42NDM3VjEwLjYwOTVWMTAuNTc1M1YxMC41NDEzVjEwLjUwNzNWMTAuNDczNVYxMC40Mzk3VjEwLjQwNlYxMC4zNzI0VjEwLjMzODlWMTAuMzA1NFYxMC4yNzIxVjEwLjIzODlWMTAuMjA1N1YxMC4xNzI2VjEwLjEzOTZWMTAuMTA2OFYxMC4wNzRWMTAuMDQxMlYxMC4wMDg2VjkuOTc2MDhWOS45NDM2NFY5LjkxMTI4VjkuODc5MDJWOS44NDY4NFY5LjgxNDc2VjkuNzgyNzZWOS43NTA4NVY5LjcxOTA0VjkuNjg3MzFWOS42NTU2N1Y5LjYyNDEzVjkuNTkyNjdWOS41NjEzVjkuNTMwMDNWOS40OTg4NFY5LjQ2Nzc1VjkuNDM2NzRWOS40MDU4M1Y5LjM3NTAxVjkuMzQ0MjdWOS4zMTM2M1Y5LjI4MzA4VjkuMjUyNjJWOS4yMjIyNVY5LjE5MTk3VjkuMTYxNzhWOS4xMzE2OVY5LjEwMTY4VjkuMDcxNzdWOS4wNDE5NVY5LjAxMjIyVjguOTgyNThWOC45NTMwM1Y4LjkyMzU3VjguODk0MjFWOC44NjQ5M1Y4LjgzNTc1VjguODA2NjZWOC43Nzc2NlY4Ljc0ODc2VjguNzE5OTRWOC42OTEyMlY4LjY2MjU5VjguNjM0MDVWOC42MDU2MVY4LjU3NzI1VjguNTQ4OTlWOC41MjA4MlY4LjQ5Mjc1VjguNDY0NzZWOC40MzY4N1Y4LjQwOTA3VjguMzgxMzdWOC4zNTM3NlY4LjMyNjI0VjguMjk4ODFWOC4yNzE0N1Y4LjI0NDIzVjguMjE3MDlWOC4xOTAwM1Y4LjE2MzA3VjguMTM2MlY4LjEwOTQzVjguMDgyNzRWOC4wNTYxNlY4LjAyOTY2VjguMDAzMjZWNy45NzY5NVY3Ljk1MDc0VjcuOTI0NjJWNy44OTg2VjcuODcyNjZWNy44NDY4M1Y3LjgyMTA4VjcuNzk1NDNWNy43Njk4OFY3Ljc0NDQxVjcuNzE5MDVWNy42OTM3OFY3LjY2ODZWNy42NDM1MVY3LjYxODUyVjcuNTkzNjNWNy41Njg4M1Y3LjU0NDEyVjcuNTE5NTFWNy40OTVWNy40NzA1OFY3LjQ0NjI1VjcuNDIyMDJWNy4zOTc4OFY3LjM3Mzg0VjcuMzQ5OVY3LjMyNjA1VjcuMzAyMjlWNy4yNzg2NFY3LjI1NTA3VjcuMjMxNlY3LjIwODIzVjcuMTg0OTVWNy4xNjE3N1Y3LjEzODY5VjcuMTE1N1Y3LjA5MjhWNy4wNzAwMVY3LjA0NzMxVjcuMDI0N1Y3LjAwMjE5VjYuOTc5NzhWNi45NTc0NlY2LjkzNTI0VjYuOTEzMTJWNi44OTEwOVY2Ljg2OTE2VjYuODQ3MzJWNi44MjU1OFY2LjgwMzk0VjYuNzgyNFY2Ljc2MDk1VjYuNzM5NlY2LjcxODM1VjYuNjk3MTlWNi42NzYxM1Y2LjY1NTE3VjYuNjM0MzFWNi42MTM1NFY2LjU5Mjg3VjYuNTcyMjlWNi41NTE4MlY2LjUzMTQ0VjYuNTExMTZWNi40OTA5OFY2LjQ3MDg5VjYuNDUwOTFWNi40MzEwMlY2LjQxMTIyVjYuMzkxNTNWNi4zNzE5NFY2LjM1MjQ0VjYuMzMzMDRWNi4zMTM3NFY2LjI5NDU0VjYuMjc1NDNWNi4yNTY0M1Y2LjIzNzUyVjYuMjE4NzFWNi4yVjYuMTgxMzlWNi4xNjI4N1Y2LjE0NDQ2VjYuMTI2MTVWNi4xMDc5M1Y2LjA4OTgxVjYuMDcxNzlWNi4wNTM4N1Y2LjAzNjA1VjYuMDE4MzNWNi4wMDA3MVY1Ljk4MzE5VjUuOTY1NzdWNS45NDg0NFY1LjkzMTIyVjUuOTE0MVY1Ljg5NzA3VjUuODgwMTVWNS44NjMzMlY1Ljg0NjZWNS44Mjk5N1Y1LjgxMzQ1VjUuNzk3MDJWNS43ODA3VjUuNzY0NDdWNS43NDgzNVY1LjczMjMyVjUuNzE2NFY1LjcwMDU3VjUuNjg0ODVWNS42NjkyM1Y1LjY1MzcxVjUuNjM4MjhWNS42MjI5NlY1LjYwNzc0VjUuNTkyNjJWNS41Nzc2MVY1LjU2MjY5VjUuNTQ3ODdWNS41MzMxNlY1LjUxODU0VjUuNTA0MDNWNS40ODk2MlY1LjQ3NTMxVjUuNDYxMVY1LjQ0Njk5VjUuNDMyOTlWNS40MTkwOFY1LjQwNTI4VjUuMzkxNThWNS4zNzc5OFY1LjM2NDQ5VjUuMzUxMDlWNS4zMzc4VjUuMzI0NjFWNS4zMTE1MlY1LjI5ODUzVjUuMjg1NjVWNS4yNzI4NlY1LjI2MDE4VjUuMjQ3NjFWNS4yMzUxM1Y1LjIyMjc2VjUuMjEwNDlWNS4xOTgzMlY1LjE4NjI2VjUuMTc0MjlWNS4xNjI0NFY1LjE1MDY4VjUuMTM5MDNWNS4xMjc0OFY1LjExNjAzVjUuMTA0NjlWNS4wOTM0NFY1LjA4MjMxVjUuMDcxMjdWNS4wNjAzNFY1LjA0OTUyVjUuMDM4NzlWNS4wMjgxN1Y1LjAxNzY2VjUuMDA3MjRWNC45OTY5M1Y0Ljk4NjczVjQuOTc2NjNWNC45NjY2M1Y0Ljk1Njc0VjQuOTQ2OTVWNC45MzcyN1Y0LjkyNzY4VjQuOTE4MjFWNC45MDg4NFY0Ljg5OTU3VjQuODkwNDFWNC44ODEzNVY0Ljg3MjM5VjQuODYzNTRWNC44NTQ4VjQuODQ2MTZWNC44Mzc2MlY0LjgyOTE5VjQuODIwODdWNC44MTI2NVY0LjgwNDUzVjQuNzk2NTJWNC43ODg2MlY0Ljc4MDgyVjQuNzczMTNWNC43NjU1NFY0Ljc1ODA2VjQuNzUwNjhWNC43NDM0MVY0LjczNjI0VjQuNzI5MThWNC43MjIyMlY0LjcxNTM4VjQuNzA4NjNWNC43MDcxMUw5LjEyMTMyIDQuNTg1NzlDOS40OTYzOSA0LjIxMDcxIDEwLjAwNTEgNCAxMC41MzU1IDRIMTEuNVYzSDEwLjUzNTVDOS43Nzk2MyAzIDkuMDUzMTMgMy4yODUyOCA4LjUgMy43OTYyM0M3Ljk0Njg3IDMuMjg1MjggNy4yMjAzNyAzIDYuNDY0NDcgM0g1LjVWNFoiLz4KPC9tYXNrPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUuNSA0SDYuNDY0NDdDNi45OTQ5IDQgNy41MDM2MSA0LjIxMDcxIDcuODc4NjggNC41ODU3OUw4IDQuNzA3MTFWNC43MDg2M1Y0LjcxNTM4VjQuNzIyMjJWNC43MjkxOFY0LjczNjI0VjQuNzQzNDFWNC43NTA2OFY0Ljc1ODA2VjQuNzY1NTRWNC43NzMxM1Y0Ljc4MDgyVjQuNzg4NjJWNC43OTY1MlY0LjgwNDUzVjQuODEyNjVWNC44MjA4N1Y0LjgyOTE5VjQuODM3NjJWNC44NDYxNlY0Ljg1NDhWNC44NjM1NFY0Ljg3MjM5VjQuODgxMzVWNC44OTA0MVY0Ljg5OTU3VjQuOTA4ODRWNC45MTgyMVY0LjkyNzY4VjQuOTM3MjdWNC45NDY5NVY0Ljk1Njc0VjQuOTY2NjNWNC45NzY2M1Y0Ljk4NjczVjQuOTk2OTNWNS4wMDcyNFY1LjAxNzY2VjUuMDI4MTdWNS4wMzg3OVY1LjA0OTUyVjUuMDYwMzRWNS4wNzEyN1Y1LjA4MjMxVjUuMDkzNDRWNS4xMDQ2OVY1LjExNjAzVjUuMTI3NDhWNS4xMzkwM1Y1LjE1MDY4VjUuMTYyNDRWNS4xNzQyOVY1LjE4NjI2VjUuMTk4MzJWNS4yMTA0OVY1LjIyMjc2VjUuMjM1MTNWNS4yNDc2MVY1LjI2MDE4VjUuMjcyODZWNS4yODU2NVY1LjI5ODUzVjUuMzExNTJWNS4zMjQ2MVY1LjMzNzhWNS4zNTEwOVY1LjM2NDQ5VjUuMzc3OThWNS4zOTE1OFY1LjQwNTI4VjUuNDE5MDhWNS40MzI5OVY1LjQ0Njk5VjUuNDYxMVY1LjQ3NTMxVjUuNDg5NjJWNS41MDQwM1Y1LjUxODU0VjUuNTMzMTZWNS41NDc4N1Y1LjU2MjY5VjUuNTc3NjFWNS41OTI2MlY1LjYwNzc0VjUuNjIyOTZWNS42MzgyOFY1LjY1MzcxVjUuNjY5MjNWNS42ODQ4NVY1LjcwMDU3VjUuNzE2NFY1LjczMjMyVjUuNzQ4MzVWNS43NjQ0N1Y1Ljc4MDdWNS43OTcwMlY1LjgxMzQ1VjUuODI5OTdWNS44NDY2VjUuODYzMzJWNS44ODAxNVY1Ljg5NzA3VjUuOTE0MVY1LjkzMTIyVjUuOTQ4NDRWNS45NjU3N1Y1Ljk4MzE5VjYuMDAwNzFWNi4wMTgzM1Y2LjAzNjA1VjYuMDUzODdWNi4wNzE3OVY2LjA4OTgxVjYuMTA3OTNWNi4xMjYxNVY2LjE0NDQ2VjYuMTYyODdWNi4xODEzOVY2LjJWNi4yMTg3MVY2LjIzNzUyVjYuMjU2NDNWNi4yNzU0M1Y2LjI5NDU0VjYuMzEzNzRWNi4zMzMwNFY2LjM1MjQ0VjYuMzcxOTRWNi4zOTE1M1Y2LjQxMTIyVjYuNDMxMDJWNi40NTA5MVY2LjQ3MDg5VjYuNDkwOThWNi41MTExNlY2LjUzMTQ0VjYuNTUxODJWNi41NzIyOVY2LjU5Mjg3VjYuNjEzNTRWNi42MzQzMVY2LjY1NTE3VjYuNjc2MTNWNi42OTcxOVY2LjcxODM1VjYuNzM5NlY2Ljc2MDk1VjYuNzgyNFY2LjgwMzk0VjYuODI1NThWNi44NDczMlY2Ljg2OTE2VjYuODkxMDlWNi45MTMxMlY2LjkzNTI0VjYuOTU3NDZWNi45Nzk3OFY3LjAwMjE5VjcuMDI0N1Y3LjA0NzMxVjcuMDcwMDFWNy4wOTI4VjcuMTE1N1Y3LjEzODY5VjcuMTYxNzdWNy4xODQ5NVY3LjIwODIzVjcuMjMxNlY3LjI1NTA3VjcuMjc4NjRWNy4zMDIyOVY3LjMyNjA1VjcuMzQ5OVY3LjM3Mzg0VjcuMzk3ODhWNy40MjIwMlY3LjQ0NjI1VjcuNDcwNThWNy40OTVWNy41MTk1MVY3LjU0NDEyVjcuNTY4ODNWNy41OTM2M1Y3LjYxODUyVjcuNjQzNTFWNy42Njg2VjcuNjkzNzhWNy43MTkwNVY3Ljc0NDQxVjcuNzY5ODhWNy43OTU0M1Y3LjgyMTA4VjcuODQ2ODNWNy44NzI2NlY3Ljg5ODZWNy45MjQ2MlY3Ljk1MDc0VjcuOTc2OTVWOC4wMDMyNlY4LjAyOTY2VjguMDU2MTZWOC4wODI3NFY4LjEwOTQzVjguMTM2MlY4LjE2MzA3VjguMTkwMDNWOC4yMTcwOVY4LjI0NDIzVjguMjcxNDdWOC4yOTg4MVY4LjMyNjI0VjguMzUzNzZWOC4zODEzN1Y4LjQwOTA3VjguNDM2ODdWOC40NjQ3NlY4LjQ5Mjc1VjguNTIwODJWOC41NDg5OVY4LjU3NzI1VjguNjA1NjFWOC42MzQwNVY4LjY2MjU5VjguNjkxMjJWOC43MTk5NFY4Ljc0ODc2VjguNzc3NjZWOC44MDY2NlY4LjgzNTc1VjguODY0OTNWOC44OTQyMVY4LjkyMzU3VjguOTUzMDNWOC45ODI1OFY5LjAxMjIyVjkuMDQxOTVWOS4wNzE3N1Y5LjEwMTY4VjkuMTMxNjlWOS4xNjE3OFY5LjE5MTk3VjkuMjIyMjVWOS4yNTI2MlY5LjI4MzA4VjkuMzEzNjNWOS4zNDQyN1Y5LjM3NTAxVjkuNDA1ODNWOS40MzY3NFY5LjQ2Nzc1VjkuNDk4ODRWOS41MzAwM1Y5LjU2MTNWOS41OTI2N1Y5LjYyNDEzVjkuNjU1NjdWOS42ODczMVY5LjcxOTA0VjkuNzUwODVWOS43ODI3NlY5LjgxNDc2VjkuODQ2ODRWOS44NzkwMlY5LjkxMTI4VjkuOTQzNjRWOS45NzYwOFYxMC4wMDg2VjEwLjA0MTJWMTAuMDc0VjEwLjEwNjhWMTAuMTM5NlYxMC4xNzI2VjEwLjIwNTdWMTAuMjM4OVYxMC4yNzIxVjEwLjMwNTRWMTAuMzM4OVYxMC4zNzI0VjEwLjQwNlYxMC40Mzk3VjEwLjQ3MzVWMTAuNTA3M1YxMC41NDEzVjEwLjU3NTNWMTAuNjA5NVYxMC42NDM3VjEwLjY3OFYxMC43MTI0VjEwLjc0NjlWMTAuNzgxNVYxMC44MTYxVjEwLjg1MDlWMTAuODg1N1YxMC45MjA2VjEwLjk1NTdWMTAuOTkwOFYxMUg3LjVIN1YxMkg3LjVIOFYxMi4wMDg5VjEyLjA0NjZWMTIuMDg0M1YxMi4xMjIxVjEyLjE1OTlWMTIuMTk3OVYxMi4yMzU5VjEyLjI3NDFWMTIuMzEyM1YxMi4zNTA2VjEyLjM4OVYxMi40Mjc0VjEyLjQ2NlYxMi41MDQ2VjEyLjU0MzRWMTIuNTgyMlYxMi42MjExVjEyLjY2MDFWMTIuNjk5MVYxMi43MzgzVjEyLjc3NzVWMTIuODE2OFYxMi44NTYzVjEyLjg5NTdWMTIuOTM1M1YxMi45NzVWMTMuMDE0N1YxMy4wNTQ1VjEzLjA5NDVWMTMuMTM0NVYxMy4xNzQ1VjEzLjIxNDdWMTMuMjU0OVYxMy4yOTUzVjEzLjMzNTdWMTMuMzc2MlYxMy40MTY4VjEzLjQ1NzRWMTMuNDk4MlYxMy41MzlWMTMuNTc5OVYxMy42MjA5VjEzLjY2MlYxMy43MDMyVjEzLjc0NDRWMTMuNzg1OFYxMy44MjcyVjEzLjg2ODdWMTMuOTEwM1YxMy45NTE5VjEzLjk5MzdWMTQuMDM1NVYxNC4wNzc0VjE0LjExOTRWMTQuMTYxNVYxNC4yMDM3VjE0LjI0NTlWMTQuMjg4MlYxNC4zMzA2VjE0LjM3MzFWMTQuNDE1N1YxNC40NTg0VjE0LjUwMTFWMTQuNTQzOVYxNC41ODY4VjE0LjYyOThWMTQuNjcyOVYxNC43MTZWMTQuNzU5MlYxNC44MDI1VjE0Ljg0NTlWMTQuODg5NFYxNC45MzNWMTQuOTc2NlYxNS4wMjAzVjE1LjA2NDFWMTUuMTA4VjE1LjE1MlYxNS4xOTZWMTUuMjQwMVYxNS4yODQzVjE1LjMyODZWMTUuMzczVjE1LjQxNzRWMTUuNDYxOVYxNS41MDY1VjE1LjU1MTJWMTUuNTk2VjE1LjY0MDhWMTUuNjg1OFYxNS43MzA4VjE1Ljc3NTlWMTUuODIxVjE1Ljg2NjNWMTUuOTExNlYxNS45NTdWMTYuMDAyNVYxNi4wNDgxVjE2LjA5MzdWMTYuMTM5NVYxNi4xODUzVjE2LjIzMTJWMTYuMjc3MVYxNi4zMjMyVjE2LjM2OTNWMTYuNDE1NVYxNi40NjE4VjE2LjUwODJWMTYuNTU0NlYxNi42MDExVjE2LjY0NzdWMTYuNjk0NFYxNi43NDEyVjE2Ljc4OFYxNi44MzQ5VjE2Ljg4MTlWMTYuOTI5VjE2Ljk3NjFWMTcuMDIzNFYxNy4wNzA3VjE3LjExODFWMTcuMTY1NVYxNy4yMTMxVjE3LjI2MDdWMTcuMjkyOUw3Ljg3ODY4IDE3LjQxNDJDNy41MDM2MSAxNy43ODkzIDYuOTk0OSAxOCA2LjQ2NDQ3IDE4SDUuNVYxOUg2LjQ2NDQ3QzcuMjIwMzcgMTkgNy45NDY4NyAxOC43MTQ3IDguNSAxOC4yMDM4QzkuMDUzMTQgMTguNzE0NyA5Ljc3OTYzIDE5IDEwLjUzNTUgMTlIMTEuNVYxOEgxMC41MzU1QzEwLjAwNTEgMTggOS40OTYzOSAxNy43ODkzIDkuMTIxMzIgMTcuNDE0Mkw5IDE3LjI5MjlWMTcuMjYwN1YxNy4yMTMxVjE3LjE2NTVWMTcuMTE4MVYxNy4wNzA3VjE3LjAyMzRWMTYuOTc2MVYxNi45MjlWMTYuODgxOVYxNi44MzQ5VjE2Ljc4OFYxNi43NDEyVjE2LjY5NDRWMTYuNjQ3N1YxNi42MDExVjE2LjU1NDZWMTYuNTA4MlYxNi40NjE4VjE2LjQxNTVWMTYuMzY5M1YxNi4zMjMyVjE2LjI3NzFWMTYuMjMxMlYxNi4xODUzVjE2LjEzOTVWMTYuMDkzN1YxNi4wNDgxVjE2LjAwMjVWMTUuOTU3VjE1LjkxMTZWMTUuODY2M1YxNS44MjFWMTUuNzc1OVYxNS43MzA4VjE1LjY4NThWMTUuNjQwOFYxNS41OTZWMTUuNTUxMlYxNS41MDY1VjE1LjQ2MTlWMTUuNDE3NFYxNS4zNzNWMTUuMzI4NlYxNS4yODQzVjE1LjI0MDFWMTUuMTk2VjE1LjE1MlYxNS4xMDhWMTUuMDY0MVYxNS4wMjAzVjE0Ljk3NjZWMTQuOTMzVjE0Ljg4OTRWMTQuODQ1OVYxNC44MDI1VjE0Ljc1OTJWMTQuNzE2VjE0LjY3MjlWMTQuNjI5OFYxNC41ODY4VjE0LjU0MzlWMTQuNTAxMVYxNC40NTg0VjE0LjQxNTdWMTQuMzczMVYxNC4zMzA2VjE0LjI4ODJWMTQuMjQ1OVYxNC4yMDM3VjE0LjE2MTVWMTQuMTE5NFYxNC4wNzc0VjE0LjAzNTVWMTMuOTkzN1YxMy45NTE5VjEzLjkxMDNWMTMuODY4N1YxMy44MjcyVjEzLjc4NThWMTMuNzQ0NFYxMy43MDMyVjEzLjY2MlYxMy42MjA5VjEzLjU3OTlWMTMuNTM5VjEzLjQ5ODJWMTMuNDU3NFYxMy40MTY4VjEzLjM3NjJWMTMuMzM1N1YxMy4yOTUzVjEzLjI1NDlWMTMuMjE0N1YxMy4xNzQ1VjEzLjEzNDVWMTMuMDk0NVYxMy4wNTQ1VjEzLjAxNDdWMTIuOTc1VjEyLjkzNTNWMTIuODk1N1YxMi44NTYzVjEyLjgxNjhWMTIuNzc3NVYxMi43MzgzVjEyLjY5OTFWMTIuNjYwMVYxMi42MjExVjEyLjU4MjJWMTIuNTQzNFYxMi41MDQ2VjEyLjQ2NlYxMi40Mjc0VjEyLjM4OVYxMi4zNTA2VjEyLjMxMjNWMTIuMjc0MVYxMi4yMzU5VjEyLjE5NzlWMTIuMTU5OVYxMi4xMjIxVjEyLjA4NDNWMTIuMDQ2NlYxMi4wMDg5VjEySDkuNUgxMFYxMUg5LjVIOVYxMC45OTA4VjEwLjk1NTdWMTAuOTIwNlYxMC44ODU3VjEwLjg1MDlWMTAuODE2MVYxMC43ODE1VjEwLjc0NjlWMTAuNzEyNFYxMC42NzhWMTAuNjQzN1YxMC42MDk1VjEwLjU3NTNWMTAuNTQxM1YxMC41MDczVjEwLjQ3MzVWMTAuNDM5N1YxMC40MDZWMTAuMzcyNFYxMC4zMzg5VjEwLjMwNTRWMTAuMjcyMVYxMC4yMzg5VjEwLjIwNTdWMTAuMTcyNlYxMC4xMzk2VjEwLjEwNjhWMTAuMDc0VjEwLjA0MTJWMTAuMDA4NlY5Ljk3NjA4VjkuOTQzNjRWOS45MTEyOFY5Ljg3OTAyVjkuODQ2ODRWOS44MTQ3NlY5Ljc4Mjc2VjkuNzUwODVWOS43MTkwNFY5LjY4NzMxVjkuNjU1NjdWOS42MjQxM1Y5LjU5MjY3VjkuNTYxM1Y5LjUzMDAzVjkuNDk4ODRWOS40Njc3NVY5LjQzNjc0VjkuNDA1ODNWOS4zNzUwMVY5LjM0NDI3VjkuMzEzNjNWOS4yODMwOFY5LjI1MjYyVjkuMjIyMjVWOS4xOTE5N1Y5LjE2MTc4VjkuMTMxNjlWOS4xMDE2OFY5LjA3MTc3VjkuMDQxOTVWOS4wMTIyMlY4Ljk4MjU4VjguOTUzMDNWOC45MjM1N1Y4Ljg5NDIxVjguODY0OTNWOC44MzU3NVY4LjgwNjY2VjguNzc3NjZWOC43NDg3NlY4LjcxOTk0VjguNjkxMjJWOC42NjI1OVY4LjYzNDA1VjguNjA1NjFWOC41NzcyNVY4LjU0ODk5VjguNTIwODJWOC40OTI3NVY4LjQ2NDc2VjguNDM2ODdWOC40MDkwN1Y4LjM4MTM3VjguMzUzNzZWOC4zMjYyNFY4LjI5ODgxVjguMjcxNDdWOC4yNDQyM1Y4LjIxNzA5VjguMTkwMDNWOC4xNjMwN1Y4LjEzNjJWOC4xMDk0M1Y4LjA4Mjc0VjguMDU2MTZWOC4wMjk2NlY4LjAwMzI2VjcuOTc2OTVWNy45NTA3NFY3LjkyNDYyVjcuODk4NlY3Ljg3MjY2VjcuODQ2ODNWNy44MjEwOFY3Ljc5NTQzVjcuNzY5ODhWNy43NDQ0MVY3LjcxOTA1VjcuNjkzNzhWNy42Njg2VjcuNjQzNTFWNy42MTg1MlY3LjU5MzYzVjcuNTY4ODNWNy41NDQxMlY3LjUxOTUxVjcuNDk1VjcuNDcwNThWNy40NDYyNVY3LjQyMjAyVjcuMzk3ODhWNy4zNzM4NFY3LjM0OTlWNy4zMjYwNVY3LjMwMjI5VjcuMjc4NjRWNy4yNTUwN1Y3LjIzMTZWNy4yMDgyM1Y3LjE4NDk1VjcuMTYxNzdWNy4xMzg2OVY3LjExNTdWNy4wOTI4VjcuMDcwMDFWNy4wNDczMVY3LjAyNDdWNy4wMDIxOVY2Ljk3OTc4VjYuOTU3NDZWNi45MzUyNFY2LjkxMzEyVjYuODkxMDlWNi44NjkxNlY2Ljg0NzMyVjYuODI1NThWNi44MDM5NFY2Ljc4MjRWNi43NjA5NVY2LjczOTZWNi43MTgzNVY2LjY5NzE5VjYuNjc2MTNWNi42NTUxN1Y2LjYzNDMxVjYuNjEzNTRWNi41OTI4N1Y2LjU3MjI5VjYuNTUxODJWNi41MzE0NFY2LjUxMTE2VjYuNDkwOThWNi40NzA4OVY2LjQ1MDkxVjYuNDMxMDJWNi40MTEyMlY2LjM5MTUzVjYuMzcxOTRWNi4zNTI0NFY2LjMzMzA0VjYuMzEzNzRWNi4yOTQ1NFY2LjI3NTQzVjYuMjU2NDNWNi4yMzc1MlY2LjIxODcxVjYuMlY2LjE4MTM5VjYuMTYyODdWNi4xNDQ0NlY2LjEyNjE1VjYuMTA3OTNWNi4wODk4MVY2LjA3MTc5VjYuMDUzODdWNi4wMzYwNVY2LjAxODMzVjYuMDAwNzFWNS45ODMxOVY1Ljk2NTc3VjUuOTQ4NDRWNS45MzEyMlY1LjkxNDFWNS44OTcwN1Y1Ljg4MDE1VjUuODYzMzJWNS44NDY2VjUuODI5OTdWNS44MTM0NVY1Ljc5NzAyVjUuNzgwN1Y1Ljc2NDQ3VjUuNzQ4MzVWNS43MzIzMlY1LjcxNjRWNS43MDA1N1Y1LjY4NDg1VjUuNjY5MjNWNS42NTM3MVY1LjYzODI4VjUuNjIyOTZWNS42MDc3NFY1LjU5MjYyVjUuNTc3NjFWNS41NjI2OVY1LjU0Nzg3VjUuNTMzMTZWNS41MTg1NFY1LjUwNDAzVjUuNDg5NjJWNS40NzUzMVY1LjQ2MTFWNS40NDY5OVY1LjQzMjk5VjUuNDE5MDhWNS40MDUyOFY1LjM5MTU4VjUuMzc3OThWNS4zNjQ0OVY1LjM1MTA5VjUuMzM3OFY1LjMyNDYxVjUuMzExNTJWNS4yOTg1M1Y1LjI4NTY1VjUuMjcyODZWNS4yNjAxOFY1LjI0NzYxVjUuMjM1MTNWNS4yMjI3NlY1LjIxMDQ5VjUuMTk4MzJWNS4xODYyNlY1LjE3NDI5VjUuMTYyNDRWNS4xNTA2OFY1LjEzOTAzVjUuMTI3NDhWNS4xMTYwM1Y1LjEwNDY5VjUuMDkzNDRWNS4wODIzMVY1LjA3MTI3VjUuMDYwMzRWNS4wNDk1MlY1LjAzODc5VjUuMDI4MTdWNS4wMTc2NlY1LjAwNzI0VjQuOTk2OTNWNC45ODY3M1Y0Ljk3NjYzVjQuOTY2NjNWNC45NTY3NFY0Ljk0Njk1VjQuOTM3MjdWNC45Mjc2OFY0LjkxODIxVjQuOTA4ODRWNC44OTk1N1Y0Ljg5MDQxVjQuODgxMzVWNC44NzIzOVY0Ljg2MzU0VjQuODU0OFY0Ljg0NjE2VjQuODM3NjJWNC44MjkxOVY0LjgyMDg3VjQuODEyNjVWNC44MDQ1M1Y0Ljc5NjUyVjQuNzg4NjJWNC43ODA4MlY0Ljc3MzEzVjQuNzY1NTRWNC43NTgwNlY0Ljc1MDY4VjQuNzQzNDFWNC43MzYyNFY0LjcyOTE4VjQuNzIyMjJWNC43MTUzOFY0LjcwODYzVjQuNzA3MTFMOS4xMjEzMiA0LjU4NTc5QzkuNDk2MzkgNC4yMTA3MSAxMC4wMDUxIDQgMTAuNTM1NSA0SDExLjVWM0gxMC41MzU1QzkuNzc5NjMgMyA5LjA1MzEzIDMuMjg1MjggOC41IDMuNzk2MjNDNy45NDY4NyAzLjI4NTI4IDcuMjIwMzcgMyA2LjQ2NDQ3IDNINS41VjRaIiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNNS41IDRINC41VjVINS41VjRaTTggNC43MDcxMUg5VjQuMjkyODlMOC43MDcxMSA0TDggNC43MDcxMVpNOCAxMVYxMkg5VjExSDhaTTcgMTFWMTBINlYxMUg3Wk03IDEySDZWMTNIN1YxMlpNOCAxMkg5VjExSDhWMTJaTTggMTcuMjkyOUw4LjcwNzExIDE4TDkgMTcuNzA3MVYxNy4yOTI5SDhaTTcuODc4NjggMTcuNDE0Mkw4LjU4NTc5IDE4LjEyMTNIOC41ODU3OUw3Ljg3ODY4IDE3LjQxNDJaTTUuNSAxOFYxN0g0LjVWMThINS41Wk01LjUgMTlINC41VjIwSDUuNVYxOVpNOC41IDE4LjIwMzhMOS4xNzg1NCAxNy40NjkyTDguNSAxNi44NDI0TDcuODIxNDYgMTcuNDY5Mkw4LjUgMTguMjAzOFpNMTEuNSAxOVYyMEgxMi41VjE5SDExLjVaTTExLjUgMThIMTIuNVYxN0gxMS41VjE4Wk05IDE3LjI5MjlIOFYxNy43MDcxTDguMjkyODkgMThMOSAxNy4yOTI5Wk05IDEyVjExSDhWMTJIOVpNMTAgMTJWMTNIMTFWMTJIMTBaTTEwIDExSDExVjEwSDEwVjExWk05IDExSDhWMTJIOVYxMVpNOSA0LjcwNzExTDguMjkyODkgNEw4IDQuMjkyODlWNC43MDcxMUg5Wk05LjEyMTMyIDQuNTg1NzlMOS44Mjg0MyA1LjI5Mjg5TDkuODI4NDMgNS4yOTI4OUw5LjEyMTMyIDQuNTg1NzlaTTExLjUgNFY1SDEyLjVWNEgxMS41Wk0xMS41IDNIMTIuNVYySDExLjVWM1pNOC41IDMuNzk2MjNMNy44MjE0NiA0LjUzMDc5TDguNSA1LjE1NzU3TDkuMTc4NTQgNC41MzA3OUw4LjUgMy43OTYyM1pNNS41IDNWMkg0LjVWM0g1LjVaTTYuNDY0NDcgM0g1LjVWNUg2LjQ2NDQ3VjNaTTguNTg1NzkgMy44Nzg2OEM4LjAyMzE4IDMuMzE2MDcgNy4yNjAxMiAzIDYuNDY0NDcgM1Y1QzYuNzI5NjggNSA2Ljk4NDA0IDUuMTA1MzYgNy4xNzE1NyA1LjI5Mjg5TDguNTg1NzkgMy44Nzg2OFpNOC43MDcxMSA0TDguNTg1NzkgMy44Nzg2OEw3LjE3MTU3IDUuMjkyODlMNy4yOTI4OSA1LjQxNDIxTDguNzA3MTEgNFpNOSA0LjcwODYzVjQuNzA3MTFIN1Y0LjcwODYzSDlaTTkgNC43MTUzOFY0LjcwODYzSDdWNC43MTUzOEg5Wk05IDQuNzIyMjJWNC43MTUzOEg3VjQuNzIyMjJIOVpNOSA0LjcyOTE4VjQuNzIyMjJIN1Y0LjcyOTE4SDlaTTkgNC43MzYyNFY0LjcyOTE4SDdWNC43MzYyNEg5Wk05IDQuNzQzNDFWNC43MzYyNEg3VjQuNzQzNDFIOVpNOSA0Ljc1MDY4VjQuNzQzNDFIN1Y0Ljc1MDY4SDlaTTkgNC43NTgwNlY0Ljc1MDY4SDdWNC43NTgwNkg5Wk05IDQuNzY1NTRWNC43NTgwNkg3VjQuNzY1NTRIOVpNOSA0Ljc3MzEzVjQuNzY1NTRIN1Y0Ljc3MzEzSDlaTTkgNC43ODA4MlY0Ljc3MzEzSDdWNC43ODA4Mkg5Wk05IDQuNzg4NjJWNC43ODA4Mkg3VjQuNzg4NjJIOVpNOSA0Ljc5NjUyVjQuNzg4NjJIN1Y0Ljc5NjUySDlaTTkgNC44MDQ1M1Y0Ljc5NjUySDdWNC44MDQ1M0g5Wk05IDQuODEyNjVWNC44MDQ1M0g3VjQuODEyNjVIOVpNOSA0LjgyMDg3VjQuODEyNjVIN1Y0LjgyMDg3SDlaTTkgNC44MjkxOVY0LjgyMDg3SDdWNC44MjkxOUg5Wk05IDQuODM3NjJWNC44MjkxOUg3VjQuODM3NjJIOVpNOSA0Ljg0NjE2VjQuODM3NjJIN1Y0Ljg0NjE2SDlaTTkgNC44NTQ4VjQuODQ2MTZIN1Y0Ljg1NDhIOVpNOSA0Ljg2MzU0VjQuODU0OEg3VjQuODYzNTRIOVpNOSA0Ljg3MjM5VjQuODYzNTRIN1Y0Ljg3MjM5SDlaTTkgNC44ODEzNVY0Ljg3MjM5SDdWNC44ODEzNUg5Wk05IDQuODkwNDFWNC44ODEzNUg3VjQuODkwNDFIOVpNOSA0Ljg5OTU3VjQuODkwNDFIN1Y0Ljg5OTU3SDlaTTkgNC45MDg4NFY0Ljg5OTU3SDdWNC45MDg4NEg5Wk05IDQuOTE4MjFWNC45MDg4NEg3VjQuOTE4MjFIOVpNOSA0LjkyNzY4VjQuOTE4MjFIN1Y0LjkyNzY4SDlaTTkgNC45MzcyN1Y0LjkyNzY4SDdWNC45MzcyN0g5Wk05IDQuOTQ2OTVWNC45MzcyN0g3VjQuOTQ2OTVIOVpNOSA0Ljk1Njc0VjQuOTQ2OTVIN1Y0Ljk1Njc0SDlaTTkgNC45NjY2M1Y0Ljk1Njc0SDdWNC45NjY2M0g5Wk05IDQuOTc2NjNWNC45NjY2M0g3VjQuOTc2NjNIOVpNOSA0Ljk4NjczVjQuOTc2NjNIN1Y0Ljk4NjczSDlaTTkgNC45OTY5M1Y0Ljk4NjczSDdWNC45OTY5M0g5Wk05IDUuMDA3MjRWNC45OTY5M0g3VjUuMDA3MjRIOVpNOSA1LjAxNzY2VjUuMDA3MjRIN1Y1LjAxNzY2SDlaTTkgNS4wMjgxN1Y1LjAxNzY2SDdWNS4wMjgxN0g5Wk05IDUuMDM4NzlWNS4wMjgxN0g3VjUuMDM4NzlIOVpNOSA1LjA0OTUyVjUuMDM4NzlIN1Y1LjA0OTUySDlaTTkgNS4wNjAzNFY1LjA0OTUySDdWNS4wNjAzNEg5Wk05IDUuMDcxMjdWNS4wNjAzNEg3VjUuMDcxMjdIOVpNOSA1LjA4MjMxVjUuMDcxMjdIN1Y1LjA4MjMxSDlaTTkgNS4wOTM0NFY1LjA4MjMxSDdWNS4wOTM0NEg5Wk05IDUuMTA0NjlWNS4wOTM0NEg3VjUuMTA0NjlIOVpNOSA1LjExNjAzVjUuMTA0NjlIN1Y1LjExNjAzSDlaTTkgNS4xMjc0OFY1LjExNjAzSDdWNS4xMjc0OEg5Wk05IDUuMTM5MDNWNS4xMjc0OEg3VjUuMTM5MDNIOVpNOSA1LjE1MDY4VjUuMTM5MDNIN1Y1LjE1MDY4SDlaTTkgNS4xNjI0NFY1LjE1MDY4SDdWNS4xNjI0NEg5Wk05IDUuMTc0MjlWNS4xNjI0NEg3VjUuMTc0MjlIOVpNOSA1LjE4NjI2VjUuMTc0MjlIN1Y1LjE4NjI2SDlaTTkgNS4xOTgzMlY1LjE4NjI2SDdWNS4xOTgzMkg5Wk05IDUuMjEwNDlWNS4xOTgzMkg3VjUuMjEwNDlIOVpNOSA1LjIyMjc2VjUuMjEwNDlIN1Y1LjIyMjc2SDlaTTkgNS4yMzUxM1Y1LjIyMjc2SDdWNS4yMzUxM0g5Wk05IDUuMjQ3NjFWNS4yMzUxM0g3VjUuMjQ3NjFIOVpNOSA1LjI2MDE4VjUuMjQ3NjFIN1Y1LjI2MDE4SDlaTTkgNS4yNzI4NlY1LjI2MDE4SDdWNS4yNzI4Nkg5Wk05IDUuMjg1NjVWNS4yNzI4Nkg3VjUuMjg1NjVIOVpNOSA1LjI5ODUzVjUuMjg1NjVIN1Y1LjI5ODUzSDlaTTkgNS4zMTE1MlY1LjI5ODUzSDdWNS4zMTE1Mkg5Wk05IDUuMzI0NjFWNS4zMTE1Mkg3VjUuMzI0NjFIOVpNOSA1LjMzNzhWNS4zMjQ2MUg3VjUuMzM3OEg5Wk05IDUuMzUxMDlWNS4zMzc4SDdWNS4zNTEwOUg5Wk05IDUuMzY0NDlWNS4zNTEwOUg3VjUuMzY0NDlIOVpNOSA1LjM3Nzk4VjUuMzY0NDlIN1Y1LjM3Nzk4SDlaTTkgNS4zOTE1OFY1LjM3Nzk4SDdWNS4zOTE1OEg5Wk05IDUuNDA1MjhWNS4zOTE1OEg3VjUuNDA1MjhIOVpNOSA1LjQxOTA4VjUuNDA1MjhIN1Y1LjQxOTA4SDlaTTkgNS40MzI5OVY1LjQxOTA4SDdWNS40MzI5OUg5Wk05IDUuNDQ2OTlWNS40MzI5OUg3VjUuNDQ2OTlIOVpNOSA1LjQ2MTFWNS40NDY5OUg3VjUuNDYxMUg5Wk05IDUuNDc1MzFWNS40NjExSDdWNS40NzUzMUg5Wk05IDUuNDg5NjJWNS40NzUzMUg3VjUuNDg5NjJIOVpNOSA1LjUwNDAzVjUuNDg5NjJIN1Y1LjUwNDAzSDlaTTkgNS41MTg1NFY1LjUwNDAzSDdWNS41MTg1NEg5Wk05IDUuNTMzMTZWNS41MTg1NEg3VjUuNTMzMTZIOVpNOSA1LjU0Nzg3VjUuNTMzMTZIN1Y1LjU0Nzg3SDlaTTkgNS41NjI2OVY1LjU0Nzg3SDdWNS41NjI2OUg5Wk05IDUuNTc3NjFWNS41NjI2OUg3VjUuNTc3NjFIOVpNOSA1LjU5MjYyVjUuNTc3NjFIN1Y1LjU5MjYySDlaTTkgNS42MDc3NFY1LjU5MjYySDdWNS42MDc3NEg5Wk05IDUuNjIyOTZWNS42MDc3NEg3VjUuNjIyOTZIOVpNOSA1LjYzODI4VjUuNjIyOTZIN1Y1LjYzODI4SDlaTTkgNS42NTM3MVY1LjYzODI4SDdWNS42NTM3MUg5Wk05IDUuNjY5MjNWNS42NTM3MUg3VjUuNjY5MjNIOVpNOSA1LjY4NDg1VjUuNjY5MjNIN1Y1LjY4NDg1SDlaTTkgNS43MDA1N1Y1LjY4NDg1SDdWNS43MDA1N0g5Wk05IDUuNzE2NFY1LjcwMDU3SDdWNS43MTY0SDlaTTkgNS43MzIzMlY1LjcxNjRIN1Y1LjczMjMySDlaTTkgNS43NDgzNVY1LjczMjMySDdWNS43NDgzNUg5Wk05IDUuNzY0NDdWNS43NDgzNUg3VjUuNzY0NDdIOVpNOSA1Ljc4MDdWNS43NjQ0N0g3VjUuNzgwN0g5Wk05IDUuNzk3MDJWNS43ODA3SDdWNS43OTcwMkg5Wk05IDUuODEzNDVWNS43OTcwMkg3VjUuODEzNDVIOVpNOSA1LjgyOTk3VjUuODEzNDVIN1Y1LjgyOTk3SDlaTTkgNS44NDY2VjUuODI5OTdIN1Y1Ljg0NjZIOVpNOSA1Ljg2MzMyVjUuODQ2Nkg3VjUuODYzMzJIOVpNOSA1Ljg4MDE1VjUuODYzMzJIN1Y1Ljg4MDE1SDlaTTkgNS44OTcwN1Y1Ljg4MDE1SDdWNS44OTcwN0g5Wk05IDUuOTE0MVY1Ljg5NzA3SDdWNS45MTQxSDlaTTkgNS45MzEyMlY1LjkxNDFIN1Y1LjkzMTIySDlaTTkgNS45NDg0NFY1LjkzMTIySDdWNS45NDg0NEg5Wk05IDUuOTY1NzdWNS45NDg0NEg3VjUuOTY1NzdIOVpNOSA1Ljk4MzE5VjUuOTY1NzdIN1Y1Ljk4MzE5SDlaTTkgNi4wMDA3MVY1Ljk4MzE5SDdWNi4wMDA3MUg5Wk05IDYuMDE4MzNWNi4wMDA3MUg3VjYuMDE4MzNIOVpNOSA2LjAzNjA1VjYuMDE4MzNIN1Y2LjAzNjA1SDlaTTkgNi4wNTM4N1Y2LjAzNjA1SDdWNi4wNTM4N0g5Wk05IDYuMDcxNzlWNi4wNTM4N0g3VjYuMDcxNzlIOVpNOSA2LjA4OTgxVjYuMDcxNzlIN1Y2LjA4OTgxSDlaTTkgNi4xMDc5M1Y2LjA4OTgxSDdWNi4xMDc5M0g5Wk05IDYuMTI2MTVWNi4xMDc5M0g3VjYuMTI2MTVIOVpNOSA2LjE0NDQ2VjYuMTI2MTVIN1Y2LjE0NDQ2SDlaTTkgNi4xNjI4N1Y2LjE0NDQ2SDdWNi4xNjI4N0g5Wk05IDYuMTgxMzlWNi4xNjI4N0g3VjYuMTgxMzlIOVpNOSA2LjJWNi4xODEzOUg3VjYuMkg5Wk05IDYuMjE4NzFWNi4ySDdWNi4yMTg3MUg5Wk05IDYuMjM3NTJWNi4yMTg3MUg3VjYuMjM3NTJIOVpNOSA2LjI1NjQzVjYuMjM3NTJIN1Y2LjI1NjQzSDlaTTkgNi4yNzU0M1Y2LjI1NjQzSDdWNi4yNzU0M0g5Wk05IDYuMjk0NTRWNi4yNzU0M0g3VjYuMjk0NTRIOVpNOSA2LjMxMzc0VjYuMjk0NTRIN1Y2LjMxMzc0SDlaTTkgNi4zMzMwNFY2LjMxMzc0SDdWNi4zMzMwNEg5Wk05IDYuMzUyNDRWNi4zMzMwNEg3VjYuMzUyNDRIOVpNOSA2LjM3MTk0VjYuMzUyNDRIN1Y2LjM3MTk0SDlaTTkgNi4zOTE1M1Y2LjM3MTk0SDdWNi4zOTE1M0g5Wk05IDYuNDExMjJWNi4zOTE1M0g3VjYuNDExMjJIOVpNOSA2LjQzMTAyVjYuNDExMjJIN1Y2LjQzMTAySDlaTTkgNi40NTA5MVY2LjQzMTAySDdWNi40NTA5MUg5Wk05IDYuNDcwODlWNi40NTA5MUg3VjYuNDcwODlIOVpNOSA2LjQ5MDk4VjYuNDcwODlIN1Y2LjQ5MDk4SDlaTTkgNi41MTExNlY2LjQ5MDk4SDdWNi41MTExNkg5Wk05IDYuNTMxNDRWNi41MTExNkg3VjYuNTMxNDRIOVpNOSA2LjU1MTgyVjYuNTMxNDRIN1Y2LjU1MTgySDlaTTkgNi41NzIyOVY2LjU1MTgySDdWNi41NzIyOUg5Wk05IDYuNTkyODdWNi41NzIyOUg3VjYuNTkyODdIOVpNOSA2LjYxMzU0VjYuNTkyODdIN1Y2LjYxMzU0SDlaTTkgNi42MzQzMVY2LjYxMzU0SDdWNi42MzQzMUg5Wk05IDYuNjU1MTdWNi42MzQzMUg3VjYuNjU1MTdIOVpNOSA2LjY3NjEzVjYuNjU1MTdIN1Y2LjY3NjEzSDlaTTkgNi42OTcxOVY2LjY3NjEzSDdWNi42OTcxOUg5Wk05IDYuNzE4MzVWNi42OTcxOUg3VjYuNzE4MzVIOVpNOSA2LjczOTZWNi43MTgzNUg3VjYuNzM5Nkg5Wk05IDYuNzYwOTVWNi43Mzk2SDdWNi43NjA5NUg5Wk05IDYuNzgyNFY2Ljc2MDk1SDdWNi43ODI0SDlaTTkgNi44MDM5NFY2Ljc4MjRIN1Y2LjgwMzk0SDlaTTkgNi44MjU1OFY2LjgwMzk0SDdWNi44MjU1OEg5Wk05IDYuODQ3MzJWNi44MjU1OEg3VjYuODQ3MzJIOVpNOSA2Ljg2OTE2VjYuODQ3MzJIN1Y2Ljg2OTE2SDlaTTkgNi44OTEwOVY2Ljg2OTE2SDdWNi44OTEwOUg5Wk05IDYuOTEzMTJWNi44OTEwOUg3VjYuOTEzMTJIOVpNOSA2LjkzNTI0VjYuOTEzMTJIN1Y2LjkzNTI0SDlaTTkgNi45NTc0NlY2LjkzNTI0SDdWNi45NTc0Nkg5Wk05IDYuOTc5NzhWNi45NTc0Nkg3VjYuOTc5NzhIOVpNOSA3LjAwMjE5VjYuOTc5NzhIN1Y3LjAwMjE5SDlaTTkgNy4wMjQ3VjcuMDAyMTlIN1Y3LjAyNDdIOVpNOSA3LjA0NzMxVjcuMDI0N0g3VjcuMDQ3MzFIOVpNOSA3LjA3MDAxVjcuMDQ3MzFIN1Y3LjA3MDAxSDlaTTkgNy4wOTI4VjcuMDcwMDFIN1Y3LjA5MjhIOVpNOSA3LjExNTdWNy4wOTI4SDdWNy4xMTU3SDlaTTkgNy4xMzg2OVY3LjExNTdIN1Y3LjEzODY5SDlaTTkgNy4xNjE3N1Y3LjEzODY5SDdWNy4xNjE3N0g5Wk05IDcuMTg0OTVWNy4xNjE3N0g3VjcuMTg0OTVIOVpNOSA3LjIwODIzVjcuMTg0OTVIN1Y3LjIwODIzSDlaTTkgNy4yMzE2VjcuMjA4MjNIN1Y3LjIzMTZIOVpNOSA3LjI1NTA3VjcuMjMxNkg3VjcuMjU1MDdIOVpNOSA3LjI3ODY0VjcuMjU1MDdIN1Y3LjI3ODY0SDlaTTkgNy4zMDIyOVY3LjI3ODY0SDdWNy4zMDIyOUg5Wk05IDcuMzI2MDVWNy4zMDIyOUg3VjcuMzI2MDVIOVpNOSA3LjM0OTlWNy4zMjYwNUg3VjcuMzQ5OUg5Wk05IDcuMzczODRWNy4zNDk5SDdWNy4zNzM4NEg5Wk05IDcuMzk3ODhWNy4zNzM4NEg3VjcuMzk3ODhIOVpNOSA3LjQyMjAyVjcuMzk3ODhIN1Y3LjQyMjAySDlaTTkgNy40NDYyNVY3LjQyMjAySDdWNy40NDYyNUg5Wk05IDcuNDcwNThWNy40NDYyNUg3VjcuNDcwNThIOVpNOSA3LjQ5NVY3LjQ3MDU4SDdWNy40OTVIOVpNOSA3LjUxOTUxVjcuNDk1SDdWNy41MTk1MUg5Wk05IDcuNTQ0MTJWNy41MTk1MUg3VjcuNTQ0MTJIOVpNOSA3LjU2ODgzVjcuNTQ0MTJIN1Y3LjU2ODgzSDlaTTkgNy41OTM2M1Y3LjU2ODgzSDdWNy41OTM2M0g5Wk05IDcuNjE4NTJWNy41OTM2M0g3VjcuNjE4NTJIOVpNOSA3LjY0MzUxVjcuNjE4NTJIN1Y3LjY0MzUxSDlaTTkgNy42Njg2VjcuNjQzNTFIN1Y3LjY2ODZIOVpNOSA3LjY5Mzc4VjcuNjY4Nkg3VjcuNjkzNzhIOVpNOSA3LjcxOTA1VjcuNjkzNzhIN1Y3LjcxOTA1SDlaTTkgNy43NDQ0MVY3LjcxOTA1SDdWNy43NDQ0MUg5Wk05IDcuNzY5ODhWNy43NDQ0MUg3VjcuNzY5ODhIOVpNOSA3Ljc5NTQzVjcuNzY5ODhIN1Y3Ljc5NTQzSDlaTTkgNy44MjEwOFY3Ljc5NTQzSDdWNy44MjEwOEg5Wk05IDcuODQ2ODNWNy44MjEwOEg3VjcuODQ2ODNIOVpNOSA3Ljg3MjY2VjcuODQ2ODNIN1Y3Ljg3MjY2SDlaTTkgNy44OTg2VjcuODcyNjZIN1Y3Ljg5ODZIOVpNOSA3LjkyNDYyVjcuODk4Nkg3VjcuOTI0NjJIOVpNOSA3Ljk1MDc0VjcuOTI0NjJIN1Y3Ljk1MDc0SDlaTTkgNy45NzY5NVY3Ljk1MDc0SDdWNy45NzY5NUg5Wk05IDguMDAzMjZWNy45NzY5NUg3VjguMDAzMjZIOVpNOSA4LjAyOTY2VjguMDAzMjZIN1Y4LjAyOTY2SDlaTTkgOC4wNTYxNlY4LjAyOTY2SDdWOC4wNTYxNkg5Wk05IDguMDgyNzRWOC4wNTYxNkg3VjguMDgyNzRIOVpNOSA4LjEwOTQzVjguMDgyNzRIN1Y4LjEwOTQzSDlaTTkgOC4xMzYyVjguMTA5NDNIN1Y4LjEzNjJIOVpNOSA4LjE2MzA3VjguMTM2Mkg3VjguMTYzMDdIOVpNOSA4LjE5MDAzVjguMTYzMDdIN1Y4LjE5MDAzSDlaTTkgOC4yMTcwOVY4LjE5MDAzSDdWOC4yMTcwOUg5Wk05IDguMjQ0MjNWOC4yMTcwOUg3VjguMjQ0MjNIOVpNOSA4LjI3MTQ3VjguMjQ0MjNIN1Y4LjI3MTQ3SDlaTTkgOC4yOTg4MVY4LjI3MTQ3SDdWOC4yOTg4MUg5Wk05IDguMzI2MjRWOC4yOTg4MUg3VjguMzI2MjRIOVpNOSA4LjM1Mzc2VjguMzI2MjRIN1Y4LjM1Mzc2SDlaTTkgOC4zODEzN1Y4LjM1Mzc2SDdWOC4zODEzN0g5Wk05IDguNDA5MDdWOC4zODEzN0g3VjguNDA5MDdIOVpNOSA4LjQzNjg3VjguNDA5MDdIN1Y4LjQzNjg3SDlaTTkgOC40NjQ3NlY4LjQzNjg3SDdWOC40NjQ3Nkg5Wk05IDguNDkyNzVWOC40NjQ3Nkg3VjguNDkyNzVIOVpNOSA4LjUyMDgyVjguNDkyNzVIN1Y4LjUyMDgySDlaTTkgOC41NDg5OVY4LjUyMDgySDdWOC41NDg5OUg5Wk05IDguNTc3MjVWOC41NDg5OUg3VjguNTc3MjVIOVpNOSA4LjYwNTYxVjguNTc3MjVIN1Y4LjYwNTYxSDlaTTkgOC42MzQwNVY4LjYwNTYxSDdWOC42MzQwNUg5Wk05IDguNjYyNTlWOC42MzQwNUg3VjguNjYyNTlIOVpNOSA4LjY5MTIyVjguNjYyNTlIN1Y4LjY5MTIySDlaTTkgOC43MTk5NFY4LjY5MTIySDdWOC43MTk5NEg5Wk05IDguNzQ4NzZWOC43MTk5NEg3VjguNzQ4NzZIOVpNOSA4Ljc3NzY2VjguNzQ4NzZIN1Y4Ljc3NzY2SDlaTTkgOC44MDY2NlY4Ljc3NzY2SDdWOC44MDY2Nkg5Wk05IDguODM1NzVWOC44MDY2Nkg3VjguODM1NzVIOVpNOSA4Ljg2NDkzVjguODM1NzVIN1Y4Ljg2NDkzSDlaTTkgOC44OTQyMVY4Ljg2NDkzSDdWOC44OTQyMUg5Wk05IDguOTIzNTdWOC44OTQyMUg3VjguOTIzNTdIOVpNOSA4Ljk1MzAzVjguOTIzNTdIN1Y4Ljk1MzAzSDlaTTkgOC45ODI1OFY4Ljk1MzAzSDdWOC45ODI1OEg5Wk05IDkuMDEyMjJWOC45ODI1OEg3VjkuMDEyMjJIOVpNOSA5LjA0MTk1VjkuMDEyMjJIN1Y5LjA0MTk1SDlaTTkgOS4wNzE3N1Y5LjA0MTk1SDdWOS4wNzE3N0g5Wk05IDkuMTAxNjhWOS4wNzE3N0g3VjkuMTAxNjhIOVpNOSA5LjEzMTY5VjkuMTAxNjhIN1Y5LjEzMTY5SDlaTTkgOS4xNjE3OFY5LjEzMTY5SDdWOS4xNjE3OEg5Wk05IDkuMTkxOTdWOS4xNjE3OEg3VjkuMTkxOTdIOVpNOSA5LjIyMjI1VjkuMTkxOTdIN1Y5LjIyMjI1SDlaTTkgOS4yNTI2MlY5LjIyMjI1SDdWOS4yNTI2Mkg5Wk05IDkuMjgzMDhWOS4yNTI2Mkg3VjkuMjgzMDhIOVpNOSA5LjMxMzYzVjkuMjgzMDhIN1Y5LjMxMzYzSDlaTTkgOS4zNDQyN1Y5LjMxMzYzSDdWOS4zNDQyN0g5Wk05IDkuMzc1MDFWOS4zNDQyN0g3VjkuMzc1MDFIOVpNOSA5LjQwNTgzVjkuMzc1MDFIN1Y5LjQwNTgzSDlaTTkgOS40MzY3NFY5LjQwNTgzSDdWOS40MzY3NEg5Wk05IDkuNDY3NzVWOS40MzY3NEg3VjkuNDY3NzVIOVpNOSA5LjQ5ODg0VjkuNDY3NzVIN1Y5LjQ5ODg0SDlaTTkgOS41MzAwM1Y5LjQ5ODg0SDdWOS41MzAwM0g5Wk05IDkuNTYxM1Y5LjUzMDAzSDdWOS41NjEzSDlaTTkgOS41OTI2N1Y5LjU2MTNIN1Y5LjU5MjY3SDlaTTkgOS42MjQxM1Y5LjU5MjY3SDdWOS42MjQxM0g5Wk05IDkuNjU1NjdWOS42MjQxM0g3VjkuNjU1NjdIOVpNOSA5LjY4NzMxVjkuNjU1NjdIN1Y5LjY4NzMxSDlaTTkgOS43MTkwNFY5LjY4NzMxSDdWOS43MTkwNEg5Wk05IDkuNzUwODVWOS43MTkwNEg3VjkuNzUwODVIOVpNOSA5Ljc4Mjc2VjkuNzUwODVIN1Y5Ljc4Mjc2SDlaTTkgOS44MTQ3NlY5Ljc4Mjc2SDdWOS44MTQ3Nkg5Wk05IDkuODQ2ODRWOS44MTQ3Nkg3VjkuODQ2ODRIOVpNOSA5Ljg3OTAyVjkuODQ2ODRIN1Y5Ljg3OTAySDlaTTkgOS45MTEyOFY5Ljg3OTAySDdWOS45MTEyOEg5Wk05IDkuOTQzNjRWOS45MTEyOEg3VjkuOTQzNjRIOVpNOSA5Ljk3NjA4VjkuOTQzNjRIN1Y5Ljk3NjA4SDlaTTkgMTAuMDA4NlY5Ljk3NjA4SDdWMTAuMDA4Nkg5Wk05IDEwLjA0MTJWMTAuMDA4Nkg3VjEwLjA0MTJIOVpNOSAxMC4wNzRWMTAuMDQxMkg3VjEwLjA3NEg5Wk05IDEwLjEwNjhWMTAuMDc0SDdWMTAuMTA2OEg5Wk05IDEwLjEzOTZWMTAuMTA2OEg3VjEwLjEzOTZIOVpNOSAxMC4xNzI2VjEwLjEzOTZIN1YxMC4xNzI2SDlaTTkgMTAuMjA1N1YxMC4xNzI2SDdWMTAuMjA1N0g5Wk05IDEwLjIzODlWMTAuMjA1N0g3VjEwLjIzODlIOVpNOSAxMC4yNzIxVjEwLjIzODlIN1YxMC4yNzIxSDlaTTkgMTAuMzA1NFYxMC4yNzIxSDdWMTAuMzA1NEg5Wk05IDEwLjMzODlWMTAuMzA1NEg3VjEwLjMzODlIOVpNOSAxMC4zNzI0VjEwLjMzODlIN1YxMC4zNzI0SDlaTTkgMTAuNDA2VjEwLjM3MjRIN1YxMC40MDZIOVpNOSAxMC40Mzk3VjEwLjQwNkg3VjEwLjQzOTdIOVpNOSAxMC40NzM1VjEwLjQzOTdIN1YxMC40NzM1SDlaTTkgMTAuNTA3M1YxMC40NzM1SDdWMTAuNTA3M0g5Wk05IDEwLjU0MTNWMTAuNTA3M0g3VjEwLjU0MTNIOVpNOSAxMC41NzUzVjEwLjU0MTNIN1YxMC41NzUzSDlaTTkgMTAuNjA5NVYxMC41NzUzSDdWMTAuNjA5NUg5Wk05IDEwLjY0MzdWMTAuNjA5NUg3VjEwLjY0MzdIOVpNOSAxMC42NzhWMTAuNjQzN0g3VjEwLjY3OEg5Wk05IDEwLjcxMjRWMTAuNjc4SDdWMTAuNzEyNEg5Wk05IDEwLjc0NjlWMTAuNzEyNEg3VjEwLjc0NjlIOVpNOSAxMC43ODE1VjEwLjc0NjlIN1YxMC43ODE1SDlaTTkgMTAuODE2MVYxMC43ODE1SDdWMTAuODE2MUg5Wk05IDEwLjg1MDlWMTAuODE2MUg3VjEwLjg1MDlIOVpNOSAxMC44ODU3VjEwLjg1MDlIN1YxMC44ODU3SDlaTTkgMTAuOTIwNlYxMC44ODU3SDdWMTAuOTIwNkg5Wk05IDEwLjk1NTdWMTAuOTIwNkg3VjEwLjk1NTdIOVpNOSAxMC45OTA4VjEwLjk1NTdIN1YxMC45OTA4SDlaTTkgMTFWMTAuOTkwOEg3VjExSDlaTTcuNSAxMkg4VjEwSDcuNVYxMlpNNyAxMkg3LjVWMTBIN1YxMlpNOCAxMlYxMUg2VjEySDhaTTcuNSAxMUg3VjEzSDcuNVYxMVpNOCAxMUg3LjVWMTNIOFYxMVpNOSAxMi4wMDg5VjEySDdWMTIuMDA4OUg5Wk05IDEyLjA0NjZWMTIuMDA4OUg3VjEyLjA0NjZIOVpNOSAxMi4wODQzVjEyLjA0NjZIN1YxMi4wODQzSDlaTTkgMTIuMTIyMVYxMi4wODQzSDdWMTIuMTIyMUg5Wk05IDEyLjE1OTlWMTIuMTIyMUg3VjEyLjE1OTlIOVpNOSAxMi4xOTc5VjEyLjE1OTlIN1YxMi4xOTc5SDlaTTkgMTIuMjM1OVYxMi4xOTc5SDdWMTIuMjM1OUg5Wk05IDEyLjI3NDFWMTIuMjM1OUg3VjEyLjI3NDFIOVpNOSAxMi4zMTIzVjEyLjI3NDFIN1YxMi4zMTIzSDlaTTkgMTIuMzUwNlYxMi4zMTIzSDdWMTIuMzUwNkg5Wk05IDEyLjM4OVYxMi4zNTA2SDdWMTIuMzg5SDlaTTkgMTIuNDI3NFYxMi4zODlIN1YxMi40Mjc0SDlaTTkgMTIuNDY2VjEyLjQyNzRIN1YxMi40NjZIOVpNOSAxMi41MDQ2VjEyLjQ2Nkg3VjEyLjUwNDZIOVpNOSAxMi41NDM0VjEyLjUwNDZIN1YxMi41NDM0SDlaTTkgMTIuNTgyMlYxMi41NDM0SDdWMTIuNTgyMkg5Wk05IDEyLjYyMTFWMTIuNTgyMkg3VjEyLjYyMTFIOVpNOSAxMi42NjAxVjEyLjYyMTFIN1YxMi42NjAxSDlaTTkgMTIuNjk5MVYxMi42NjAxSDdWMTIuNjk5MUg5Wk05IDEyLjczODNWMTIuNjk5MUg3VjEyLjczODNIOVpNOSAxMi43Nzc1VjEyLjczODNIN1YxMi43Nzc1SDlaTTkgMTIuODE2OFYxMi43Nzc1SDdWMTIuODE2OEg5Wk05IDEyLjg1NjNWMTIuODE2OEg3VjEyLjg1NjNIOVpNOSAxMi44OTU3VjEyLjg1NjNIN1YxMi44OTU3SDlaTTkgMTIuOTM1M1YxMi44OTU3SDdWMTIuOTM1M0g5Wk05IDEyLjk3NVYxMi45MzUzSDdWMTIuOTc1SDlaTTkgMTMuMDE0N1YxMi45NzVIN1YxMy4wMTQ3SDlaTTkgMTMuMDU0NVYxMy4wMTQ3SDdWMTMuMDU0NUg5Wk05IDEzLjA5NDVWMTMuMDU0NUg3VjEzLjA5NDVIOVpNOSAxMy4xMzQ1VjEzLjA5NDVIN1YxMy4xMzQ1SDlaTTkgMTMuMTc0NVYxMy4xMzQ1SDdWMTMuMTc0NUg5Wk05IDEzLjIxNDdWMTMuMTc0NUg3VjEzLjIxNDdIOVpNOSAxMy4yNTQ5VjEzLjIxNDdIN1YxMy4yNTQ5SDlaTTkgMTMuMjk1M1YxMy4yNTQ5SDdWMTMuMjk1M0g5Wk05IDEzLjMzNTdWMTMuMjk1M0g3VjEzLjMzNTdIOVpNOSAxMy4zNzYyVjEzLjMzNTdIN1YxMy4zNzYySDlaTTkgMTMuNDE2OFYxMy4zNzYySDdWMTMuNDE2OEg5Wk05IDEzLjQ1NzRWMTMuNDE2OEg3VjEzLjQ1NzRIOVpNOSAxMy40OTgyVjEzLjQ1NzRIN1YxMy40OTgySDlaTTkgMTMuNTM5VjEzLjQ5ODJIN1YxMy41MzlIOVpNOSAxMy41Nzk5VjEzLjUzOUg3VjEzLjU3OTlIOVpNOSAxMy42MjA5VjEzLjU3OTlIN1YxMy42MjA5SDlaTTkgMTMuNjYyVjEzLjYyMDlIN1YxMy42NjJIOVpNOSAxMy43MDMyVjEzLjY2Mkg3VjEzLjcwMzJIOVpNOSAxMy43NDQ0VjEzLjcwMzJIN1YxMy43NDQ0SDlaTTkgMTMuNzg1OFYxMy43NDQ0SDdWMTMuNzg1OEg5Wk05IDEzLjgyNzJWMTMuNzg1OEg3VjEzLjgyNzJIOVpNOSAxMy44Njg3VjEzLjgyNzJIN1YxMy44Njg3SDlaTTkgMTMuOTEwM1YxMy44Njg3SDdWMTMuOTEwM0g5Wk05IDEzLjk1MTlWMTMuOTEwM0g3VjEzLjk1MTlIOVpNOSAxMy45OTM3VjEzLjk1MTlIN1YxMy45OTM3SDlaTTkgMTQuMDM1NVYxMy45OTM3SDdWMTQuMDM1NUg5Wk05IDE0LjA3NzRWMTQuMDM1NUg3VjE0LjA3NzRIOVpNOSAxNC4xMTk0VjE0LjA3NzRIN1YxNC4xMTk0SDlaTTkgMTQuMTYxNVYxNC4xMTk0SDdWMTQuMTYxNUg5Wk05IDE0LjIwMzdWMTQuMTYxNUg3VjE0LjIwMzdIOVpNOSAxNC4yNDU5VjE0LjIwMzdIN1YxNC4yNDU5SDlaTTkgMTQuMjg4MlYxNC4yNDU5SDdWMTQuMjg4Mkg5Wk05IDE0LjMzMDZWMTQuMjg4Mkg3VjE0LjMzMDZIOVpNOSAxNC4zNzMxVjE0LjMzMDZIN1YxNC4zNzMxSDlaTTkgMTQuNDE1N1YxNC4zNzMxSDdWMTQuNDE1N0g5Wk05IDE0LjQ1ODRWMTQuNDE1N0g3VjE0LjQ1ODRIOVpNOSAxNC41MDExVjE0LjQ1ODRIN1YxNC41MDExSDlaTTkgMTQuNTQzOVYxNC41MDExSDdWMTQuNTQzOUg5Wk05IDE0LjU4NjhWMTQuNTQzOUg3VjE0LjU4NjhIOVpNOSAxNC42Mjk4VjE0LjU4NjhIN1YxNC42Mjk4SDlaTTkgMTQuNjcyOVYxNC42Mjk4SDdWMTQuNjcyOUg5Wk05IDE0LjcxNlYxNC42NzI5SDdWMTQuNzE2SDlaTTkgMTQuNzU5MlYxNC43MTZIN1YxNC43NTkySDlaTTkgMTQuODAyNVYxNC43NTkySDdWMTQuODAyNUg5Wk05IDE0Ljg0NTlWMTQuODAyNUg3VjE0Ljg0NTlIOVpNOSAxNC44ODk0VjE0Ljg0NTlIN1YxNC44ODk0SDlaTTkgMTQuOTMzVjE0Ljg4OTRIN1YxNC45MzNIOVpNOSAxNC45NzY2VjE0LjkzM0g3VjE0Ljk3NjZIOVpNOSAxNS4wMjAzVjE0Ljk3NjZIN1YxNS4wMjAzSDlaTTkgMTUuMDY0MVYxNS4wMjAzSDdWMTUuMDY0MUg5Wk05IDE1LjEwOFYxNS4wNjQxSDdWMTUuMTA4SDlaTTkgMTUuMTUyVjE1LjEwOEg3VjE1LjE1Mkg5Wk05IDE1LjE5NlYxNS4xNTJIN1YxNS4xOTZIOVpNOSAxNS4yNDAxVjE1LjE5Nkg3VjE1LjI0MDFIOVpNOSAxNS4yODQzVjE1LjI0MDFIN1YxNS4yODQzSDlaTTkgMTUuMzI4NlYxNS4yODQzSDdWMTUuMzI4Nkg5Wk05IDE1LjM3M1YxNS4zMjg2SDdWMTUuMzczSDlaTTkgMTUuNDE3NFYxNS4zNzNIN1YxNS40MTc0SDlaTTkgMTUuNDYxOVYxNS40MTc0SDdWMTUuNDYxOUg5Wk05IDE1LjUwNjVWMTUuNDYxOUg3VjE1LjUwNjVIOVpNOSAxNS41NTEyVjE1LjUwNjVIN1YxNS41NTEySDlaTTkgMTUuNTk2VjE1LjU1MTJIN1YxNS41OTZIOVpNOSAxNS42NDA4VjE1LjU5Nkg3VjE1LjY0MDhIOVpNOSAxNS42ODU4VjE1LjY0MDhIN1YxNS42ODU4SDlaTTkgMTUuNzMwOFYxNS42ODU4SDdWMTUuNzMwOEg5Wk05IDE1Ljc3NTlWMTUuNzMwOEg3VjE1Ljc3NTlIOVpNOSAxNS44MjFWMTUuNzc1OUg3VjE1LjgyMUg5Wk05IDE1Ljg2NjNWMTUuODIxSDdWMTUuODY2M0g5Wk05IDE1LjkxMTZWMTUuODY2M0g3VjE1LjkxMTZIOVpNOSAxNS45NTdWMTUuOTExNkg3VjE1Ljk1N0g5Wk05IDE2LjAwMjVWMTUuOTU3SDdWMTYuMDAyNUg5Wk05IDE2LjA0ODFWMTYuMDAyNUg3VjE2LjA0ODFIOVpNOSAxNi4wOTM3VjE2LjA0ODFIN1YxNi4wOTM3SDlaTTkgMTYuMTM5NVYxNi4wOTM3SDdWMTYuMTM5NUg5Wk05IDE2LjE4NTNWMTYuMTM5NUg3VjE2LjE4NTNIOVpNOSAxNi4yMzEyVjE2LjE4NTNIN1YxNi4yMzEySDlaTTkgMTYuMjc3MVYxNi4yMzEySDdWMTYuMjc3MUg5Wk05IDE2LjMyMzJWMTYuMjc3MUg3VjE2LjMyMzJIOVpNOSAxNi4zNjkzVjE2LjMyMzJIN1YxNi4zNjkzSDlaTTkgMTYuNDE1NVYxNi4zNjkzSDdWMTYuNDE1NUg5Wk05IDE2LjQ2MThWMTYuNDE1NUg3VjE2LjQ2MThIOVpNOSAxNi41MDgyVjE2LjQ2MThIN1YxNi41MDgySDlaTTkgMTYuNTU0NlYxNi41MDgySDdWMTYuNTU0Nkg5Wk05IDE2LjYwMTFWMTYuNTU0Nkg3VjE2LjYwMTFIOVpNOSAxNi42NDc3VjE2LjYwMTFIN1YxNi42NDc3SDlaTTkgMTYuNjk0NFYxNi42NDc3SDdWMTYuNjk0NEg5Wk05IDE2Ljc0MTJWMTYuNjk0NEg3VjE2Ljc0MTJIOVpNOSAxNi43ODhWMTYuNzQxMkg3VjE2Ljc4OEg5Wk05IDE2LjgzNDlWMTYuNzg4SDdWMTYuODM0OUg5Wk05IDE2Ljg4MTlWMTYuODM0OUg3VjE2Ljg4MTlIOVpNOSAxNi45MjlWMTYuODgxOUg3VjE2LjkyOUg5Wk05IDE2Ljk3NjFWMTYuOTI5SDdWMTYuOTc2MUg5Wk05IDE3LjAyMzRWMTYuOTc2MUg3VjE3LjAyMzRIOVpNOSAxNy4wNzA3VjE3LjAyMzRIN1YxNy4wNzA3SDlaTTkgMTcuMTE4MVYxNy4wNzA3SDdWMTcuMTE4MUg5Wk05IDE3LjE2NTVWMTcuMTE4MUg3VjE3LjE2NTVIOVpNOSAxNy4yMTMxVjE3LjE2NTVIN1YxNy4yMTMxSDlaTTkgMTcuMjYwN1YxNy4yMTMxSDdWMTcuMjYwN0g5Wk05IDE3LjI5MjlWMTcuMjYwN0g3VjE3LjI5MjlIOVpNOC41ODU3OSAxOC4xMjEzTDguNzA3MTEgMThMNy4yOTI4OSAxNi41ODU4TDcuMTcxNTcgMTYuNzA3MUw4LjU4NTc5IDE4LjEyMTNaTTYuNDY0NDcgMTlDNy4yNjAxMiAxOSA4LjAyMzE4IDE4LjY4MzkgOC41ODU3OSAxOC4xMjEzTDcuMTcxNTcgMTYuNzA3MUM2Ljk4NDA0IDE2Ljg5NDYgNi43Mjk2OCAxNyA2LjQ2NDQ3IDE3VjE5Wk01LjUgMTlINi40NjQ0N1YxN0g1LjVWMTlaTTYuNSAxOVYxOEg0LjVWMTlINi41Wk02LjQ2NDQ3IDE4SDUuNVYyMEg2LjQ2NDQ3VjE4Wk03LjgyMTQ2IDE3LjQ2OTJDNy40NTI3NCAxNy44MDk4IDYuOTY4MzkgMTggNi40NjQ0NyAxOFYyMEM3LjQ3MjM1IDIwIDguNDQxIDE5LjYxOTYgOS4xNzg1NCAxOC45MzgzTDcuODIxNDYgMTcuNDY5MlpNMTAuNTM1NSAxOEMxMC4wMzE2IDE4IDkuNTQ3MjcgMTcuODA5OCA5LjE3ODU0IDE3LjQ2OTJMNy44MjE0NiAxOC45MzgzQzguNTU5IDE5LjYxOTYgOS41Mjc2NCAyMCAxMC41MzU1IDIwVjE4Wk0xMS41IDE4SDEwLjUzNTVWMjBIMTEuNVYxOFpNMTAuNSAxOFYxOUgxMi41VjE4SDEwLjVaTTEwLjUzNTUgMTlIMTEuNVYxN0gxMC41MzU1VjE5Wk04LjQxNDIxIDE4LjEyMTNDOC45NzY4MiAxOC42ODM5IDkuNzM5ODggMTkgMTAuNTM1NSAxOVYxN0MxMC4yNzAzIDE3IDEwLjAxNiAxNi44OTQ2IDkuODI4NDMgMTYuNzA3MUw4LjQxNDIxIDE4LjEyMTNaTTguMjkyODkgMThMOC40MTQyMSAxOC4xMjEzTDkuODI4NDMgMTYuNzA3MUw5LjcwNzExIDE2LjU4NThMOC4yOTI4OSAxOFpNOCAxNy4yNjA3VjE3LjI5MjlIMTBWMTcuMjYwN0g4Wk04IDE3LjIxMzFWMTcuMjYwN0gxMFYxNy4yMTMxSDhaTTggMTcuMTY1NVYxNy4yMTMxSDEwVjE3LjE2NTVIOFpNOCAxNy4xMTgxVjE3LjE2NTVIMTBWMTcuMTE4MUg4Wk04IDE3LjA3MDdWMTcuMTE4MUgxMFYxNy4wNzA3SDhaTTggMTcuMDIzNFYxNy4wNzA3SDEwVjE3LjAyMzRIOFpNOCAxNi45NzYxVjE3LjAyMzRIMTBWMTYuOTc2MUg4Wk04IDE2LjkyOVYxNi45NzYxSDEwVjE2LjkyOUg4Wk04IDE2Ljg4MTlWMTYuOTI5SDEwVjE2Ljg4MTlIOFpNOCAxNi44MzQ5VjE2Ljg4MTlIMTBWMTYuODM0OUg4Wk04IDE2Ljc4OFYxNi44MzQ5SDEwVjE2Ljc4OEg4Wk04IDE2Ljc0MTJWMTYuNzg4SDEwVjE2Ljc0MTJIOFpNOCAxNi42OTQ0VjE2Ljc0MTJIMTBWMTYuNjk0NEg4Wk04IDE2LjY0NzdWMTYuNjk0NEgxMFYxNi42NDc3SDhaTTggMTYuNjAxMVYxNi42NDc3SDEwVjE2LjYwMTFIOFpNOCAxNi41NTQ2VjE2LjYwMTFIMTBWMTYuNTU0Nkg4Wk04IDE2LjUwODJWMTYuNTU0NkgxMFYxNi41MDgySDhaTTggMTYuNDYxOFYxNi41MDgySDEwVjE2LjQ2MThIOFpNOCAxNi40MTU1VjE2LjQ2MThIMTBWMTYuNDE1NUg4Wk04IDE2LjM2OTNWMTYuNDE1NUgxMFYxNi4zNjkzSDhaTTggMTYuMzIzMlYxNi4zNjkzSDEwVjE2LjMyMzJIOFpNOCAxNi4yNzcxVjE2LjMyMzJIMTBWMTYuMjc3MUg4Wk04IDE2LjIzMTJWMTYuMjc3MUgxMFYxNi4yMzEySDhaTTggMTYuMTg1M1YxNi4yMzEySDEwVjE2LjE4NTNIOFpNOCAxNi4xMzk1VjE2LjE4NTNIMTBWMTYuMTM5NUg4Wk04IDE2LjA5MzdWMTYuMTM5NUgxMFYxNi4wOTM3SDhaTTggMTYuMDQ4MVYxNi4wOTM3SDEwVjE2LjA0ODFIOFpNOCAxNi4wMDI1VjE2LjA0ODFIMTBWMTYuMDAyNUg4Wk04IDE1Ljk1N1YxNi4wMDI1SDEwVjE1Ljk1N0g4Wk04IDE1LjkxMTZWMTUuOTU3SDEwVjE1LjkxMTZIOFpNOCAxNS44NjYzVjE1LjkxMTZIMTBWMTUuODY2M0g4Wk04IDE1LjgyMVYxNS44NjYzSDEwVjE1LjgyMUg4Wk04IDE1Ljc3NTlWMTUuODIxSDEwVjE1Ljc3NTlIOFpNOCAxNS43MzA4VjE1Ljc3NTlIMTBWMTUuNzMwOEg4Wk04IDE1LjY4NThWMTUuNzMwOEgxMFYxNS42ODU4SDhaTTggMTUuNjQwOFYxNS42ODU4SDEwVjE1LjY0MDhIOFpNOCAxNS41OTZWMTUuNjQwOEgxMFYxNS41OTZIOFpNOCAxNS41NTEyVjE1LjU5NkgxMFYxNS41NTEySDhaTTggMTUuNTA2NVYxNS41NTEySDEwVjE1LjUwNjVIOFpNOCAxNS40NjE5VjE1LjUwNjVIMTBWMTUuNDYxOUg4Wk04IDE1LjQxNzRWMTUuNDYxOUgxMFYxNS40MTc0SDhaTTggMTUuMzczVjE1LjQxNzRIMTBWMTUuMzczSDhaTTggMTUuMzI4NlYxNS4zNzNIMTBWMTUuMzI4Nkg4Wk04IDE1LjI4NDNWMTUuMzI4NkgxMFYxNS4yODQzSDhaTTggMTUuMjQwMVYxNS4yODQzSDEwVjE1LjI0MDFIOFpNOCAxNS4xOTZWMTUuMjQwMUgxMFYxNS4xOTZIOFpNOCAxNS4xNTJWMTUuMTk2SDEwVjE1LjE1Mkg4Wk04IDE1LjEwOFYxNS4xNTJIMTBWMTUuMTA4SDhaTTggMTUuMDY0MVYxNS4xMDhIMTBWMTUuMDY0MUg4Wk04IDE1LjAyMDNWMTUuMDY0MUgxMFYxNS4wMjAzSDhaTTggMTQuOTc2NlYxNS4wMjAzSDEwVjE0Ljk3NjZIOFpNOCAxNC45MzNWMTQuOTc2NkgxMFYxNC45MzNIOFpNOCAxNC44ODk0VjE0LjkzM0gxMFYxNC44ODk0SDhaTTggMTQuODQ1OVYxNC44ODk0SDEwVjE0Ljg0NTlIOFpNOCAxNC44MDI1VjE0Ljg0NTlIMTBWMTQuODAyNUg4Wk04IDE0Ljc1OTJWMTQuODAyNUgxMFYxNC43NTkySDhaTTggMTQuNzE2VjE0Ljc1OTJIMTBWMTQuNzE2SDhaTTggMTQuNjcyOVYxNC43MTZIMTBWMTQuNjcyOUg4Wk04IDE0LjYyOThWMTQuNjcyOUgxMFYxNC42Mjk4SDhaTTggMTQuNTg2OFYxNC42Mjk4SDEwVjE0LjU4NjhIOFpNOCAxNC41NDM5VjE0LjU4NjhIMTBWMTQuNTQzOUg4Wk04IDE0LjUwMTFWMTQuNTQzOUgxMFYxNC41MDExSDhaTTggMTQuNDU4NFYxNC41MDExSDEwVjE0LjQ1ODRIOFpNOCAxNC40MTU3VjE0LjQ1ODRIMTBWMTQuNDE1N0g4Wk04IDE0LjM3MzFWMTQuNDE1N0gxMFYxNC4zNzMxSDhaTTggMTQuMzMwNlYxNC4zNzMxSDEwVjE0LjMzMDZIOFpNOCAxNC4yODgyVjE0LjMzMDZIMTBWMTQuMjg4Mkg4Wk04IDE0LjI0NTlWMTQuMjg4MkgxMFYxNC4yNDU5SDhaTTggMTQuMjAzN1YxNC4yNDU5SDEwVjE0LjIwMzdIOFpNOCAxNC4xNjE1VjE0LjIwMzdIMTBWMTQuMTYxNUg4Wk04IDE0LjExOTRWMTQuMTYxNUgxMFYxNC4xMTk0SDhaTTggMTQuMDc3NFYxNC4xMTk0SDEwVjE0LjA3NzRIOFpNOCAxNC4wMzU1VjE0LjA3NzRIMTBWMTQuMDM1NUg4Wk04IDEzLjk5MzdWMTQuMDM1NUgxMFYxMy45OTM3SDhaTTggMTMuOTUxOVYxMy45OTM3SDEwVjEzLjk1MTlIOFpNOCAxMy45MTAzVjEzLjk1MTlIMTBWMTMuOTEwM0g4Wk04IDEzLjg2ODdWMTMuOTEwM0gxMFYxMy44Njg3SDhaTTggMTMuODI3MlYxMy44Njg3SDEwVjEzLjgyNzJIOFpNOCAxMy43ODU4VjEzLjgyNzJIMTBWMTMuNzg1OEg4Wk04IDEzLjc0NDRWMTMuNzg1OEgxMFYxMy43NDQ0SDhaTTggMTMuNzAzMlYxMy43NDQ0SDEwVjEzLjcwMzJIOFpNOCAxMy42NjJWMTMuNzAzMkgxMFYxMy42NjJIOFpNOCAxMy42MjA5VjEzLjY2MkgxMFYxMy42MjA5SDhaTTggMTMuNTc5OVYxMy42MjA5SDEwVjEzLjU3OTlIOFpNOCAxMy41MzlWMTMuNTc5OUgxMFYxMy41MzlIOFpNOCAxMy40OTgyVjEzLjUzOUgxMFYxMy40OTgySDhaTTggMTMuNDU3NFYxMy40OTgySDEwVjEzLjQ1NzRIOFpNOCAxMy40MTY4VjEzLjQ1NzRIMTBWMTMuNDE2OEg4Wk04IDEzLjM3NjJWMTMuNDE2OEgxMFYxMy4zNzYySDhaTTggMTMuMzM1N1YxMy4zNzYySDEwVjEzLjMzNTdIOFpNOCAxMy4yOTUzVjEzLjMzNTdIMTBWMTMuMjk1M0g4Wk04IDEzLjI1NDlWMTMuMjk1M0gxMFYxMy4yNTQ5SDhaTTggMTMuMjE0N1YxMy4yNTQ5SDEwVjEzLjIxNDdIOFpNOCAxMy4xNzQ1VjEzLjIxNDdIMTBWMTMuMTc0NUg4Wk04IDEzLjEzNDVWMTMuMTc0NUgxMFYxMy4xMzQ1SDhaTTggMTMuMDk0NVYxMy4xMzQ1SDEwVjEzLjA5NDVIOFpNOCAxMy4wNTQ1VjEzLjA5NDVIMTBWMTMuMDU0NUg4Wk04IDEzLjAxNDdWMTMuMDU0NUgxMFYxMy4wMTQ3SDhaTTggMTIuOTc1VjEzLjAxNDdIMTBWMTIuOTc1SDhaTTggMTIuOTM1M1YxMi45NzVIMTBWMTIuOTM1M0g4Wk04IDEyLjg5NTdWMTIuOTM1M0gxMFYxMi44OTU3SDhaTTggMTIuODU2M1YxMi44OTU3SDEwVjEyLjg1NjNIOFpNOCAxMi44MTY4VjEyLjg1NjNIMTBWMTIuODE2OEg4Wk04IDEyLjc3NzVWMTIuODE2OEgxMFYxMi43Nzc1SDhaTTggMTIuNzM4M1YxMi43Nzc1SDEwVjEyLjczODNIOFpNOCAxMi42OTkxVjEyLjczODNIMTBWMTIuNjk5MUg4Wk04IDEyLjY2MDFWMTIuNjk5MUgxMFYxMi42NjAxSDhaTTggMTIuNjIxMVYxMi42NjAxSDEwVjEyLjYyMTFIOFpNOCAxMi41ODIyVjEyLjYyMTFIMTBWMTIuNTgyMkg4Wk04IDEyLjU0MzRWMTIuNTgyMkgxMFYxMi41NDM0SDhaTTggMTIuNTA0NlYxMi41NDM0SDEwVjEyLjUwNDZIOFpNOCAxMi40NjZWMTIuNTA0NkgxMFYxMi40NjZIOFpNOCAxMi40Mjc0VjEyLjQ2NkgxMFYxMi40Mjc0SDhaTTggMTIuMzg5VjEyLjQyNzRIMTBWMTIuMzg5SDhaTTggMTIuMzUwNlYxMi4zODlIMTBWMTIuMzUwNkg4Wk04IDEyLjMxMjNWMTIuMzUwNkgxMFYxMi4zMTIzSDhaTTggMTIuMjc0MVYxMi4zMTIzSDEwVjEyLjI3NDFIOFpNOCAxMi4yMzU5VjEyLjI3NDFIMTBWMTIuMjM1OUg4Wk04IDEyLjE5NzlWMTIuMjM1OUgxMFYxMi4xOTc5SDhaTTggMTIuMTU5OVYxMi4xOTc5SDEwVjEyLjE1OTlIOFpNOCAxMi4xMjIxVjEyLjE1OTlIMTBWMTIuMTIyMUg4Wk04IDEyLjA4NDNWMTIuMTIyMUgxMFYxMi4wODQzSDhaTTggMTIuMDQ2NlYxMi4wODQzSDEwVjEyLjA0NjZIOFpNOCAxMi4wMDg5VjEyLjA0NjZIMTBWMTIuMDA4OUg4Wk04IDEyVjEyLjAwODlIMTBWMTJIOFpNOS41IDExSDlWMTNIOS41VjExWk0xMCAxMUg5LjVWMTNIMTBWMTFaTTkgMTFWMTJIMTFWMTFIOVpNOS41IDEySDEwVjEwSDkuNVYxMlpNOSAxMkg5LjVWMTBIOVYxMlpNOCAxMC45OTA4VjExSDEwVjEwLjk5MDhIOFpNOCAxMC45NTU3VjEwLjk5MDhIMTBWMTAuOTU1N0g4Wk04IDEwLjkyMDZWMTAuOTU1N0gxMFYxMC45MjA2SDhaTTggMTAuODg1N1YxMC45MjA2SDEwVjEwLjg4NTdIOFpNOCAxMC44NTA5VjEwLjg4NTdIMTBWMTAuODUwOUg4Wk04IDEwLjgxNjFWMTAuODUwOUgxMFYxMC44MTYxSDhaTTggMTAuNzgxNVYxMC44MTYxSDEwVjEwLjc4MTVIOFpNOCAxMC43NDY5VjEwLjc4MTVIMTBWMTAuNzQ2OUg4Wk04IDEwLjcxMjRWMTAuNzQ2OUgxMFYxMC43MTI0SDhaTTggMTAuNjc4VjEwLjcxMjRIMTBWMTAuNjc4SDhaTTggMTAuNjQzN1YxMC42NzhIMTBWMTAuNjQzN0g4Wk04IDEwLjYwOTVWMTAuNjQzN0gxMFYxMC42MDk1SDhaTTggMTAuNTc1M1YxMC42MDk1SDEwVjEwLjU3NTNIOFpNOCAxMC41NDEzVjEwLjU3NTNIMTBWMTAuNTQxM0g4Wk04IDEwLjUwNzNWMTAuNTQxM0gxMFYxMC41MDczSDhaTTggMTAuNDczNVYxMC41MDczSDEwVjEwLjQ3MzVIOFpNOCAxMC40Mzk3VjEwLjQ3MzVIMTBWMTAuNDM5N0g4Wk04IDEwLjQwNlYxMC40Mzk3SDEwVjEwLjQwNkg4Wk04IDEwLjM3MjRWMTAuNDA2SDEwVjEwLjM3MjRIOFpNOCAxMC4zMzg5VjEwLjM3MjRIMTBWMTAuMzM4OUg4Wk04IDEwLjMwNTRWMTAuMzM4OUgxMFYxMC4zMDU0SDhaTTggMTAuMjcyMVYxMC4zMDU0SDEwVjEwLjI3MjFIOFpNOCAxMC4yMzg5VjEwLjI3MjFIMTBWMTAuMjM4OUg4Wk04IDEwLjIwNTdWMTAuMjM4OUgxMFYxMC4yMDU3SDhaTTggMTAuMTcyNlYxMC4yMDU3SDEwVjEwLjE3MjZIOFpNOCAxMC4xMzk2VjEwLjE3MjZIMTBWMTAuMTM5Nkg4Wk04IDEwLjEwNjhWMTAuMTM5NkgxMFYxMC4xMDY4SDhaTTggMTAuMDc0VjEwLjEwNjhIMTBWMTAuMDc0SDhaTTggMTAuMDQxMlYxMC4wNzRIMTBWMTAuMDQxMkg4Wk04IDEwLjAwODZWMTAuMDQxMkgxMFYxMC4wMDg2SDhaTTggOS45NzYwOFYxMC4wMDg2SDEwVjkuOTc2MDhIOFpNOCA5Ljk0MzY0VjkuOTc2MDhIMTBWOS45NDM2NEg4Wk04IDkuOTExMjhWOS45NDM2NEgxMFY5LjkxMTI4SDhaTTggOS44NzkwMlY5LjkxMTI4SDEwVjkuODc5MDJIOFpNOCA5Ljg0Njg0VjkuODc5MDJIMTBWOS44NDY4NEg4Wk04IDkuODE0NzZWOS44NDY4NEgxMFY5LjgxNDc2SDhaTTggOS43ODI3NlY5LjgxNDc2SDEwVjkuNzgyNzZIOFpNOCA5Ljc1MDg1VjkuNzgyNzZIMTBWOS43NTA4NUg4Wk04IDkuNzE5MDRWOS43NTA4NUgxMFY5LjcxOTA0SDhaTTggOS42ODczMVY5LjcxOTA0SDEwVjkuNjg3MzFIOFpNOCA5LjY1NTY3VjkuNjg3MzFIMTBWOS42NTU2N0g4Wk04IDkuNjI0MTNWOS42NTU2N0gxMFY5LjYyNDEzSDhaTTggOS41OTI2N1Y5LjYyNDEzSDEwVjkuNTkyNjdIOFpNOCA5LjU2MTNWOS41OTI2N0gxMFY5LjU2MTNIOFpNOCA5LjUzMDAzVjkuNTYxM0gxMFY5LjUzMDAzSDhaTTggOS40OTg4NFY5LjUzMDAzSDEwVjkuNDk4ODRIOFpNOCA5LjQ2Nzc1VjkuNDk4ODRIMTBWOS40Njc3NUg4Wk04IDkuNDM2NzRWOS40Njc3NUgxMFY5LjQzNjc0SDhaTTggOS40MDU4M1Y5LjQzNjc0SDEwVjkuNDA1ODNIOFpNOCA5LjM3NTAxVjkuNDA1ODNIMTBWOS4zNzUwMUg4Wk04IDkuMzQ0MjdWOS4zNzUwMUgxMFY5LjM0NDI3SDhaTTggOS4zMTM2M1Y5LjM0NDI3SDEwVjkuMzEzNjNIOFpNOCA5LjI4MzA4VjkuMzEzNjNIMTBWOS4yODMwOEg4Wk04IDkuMjUyNjJWOS4yODMwOEgxMFY5LjI1MjYySDhaTTggOS4yMjIyNVY5LjI1MjYySDEwVjkuMjIyMjVIOFpNOCA5LjE5MTk3VjkuMjIyMjVIMTBWOS4xOTE5N0g4Wk04IDkuMTYxNzhWOS4xOTE5N0gxMFY5LjE2MTc4SDhaTTggOS4xMzE2OVY5LjE2MTc4SDEwVjkuMTMxNjlIOFpNOCA5LjEwMTY4VjkuMTMxNjlIMTBWOS4xMDE2OEg4Wk04IDkuMDcxNzdWOS4xMDE2OEgxMFY5LjA3MTc3SDhaTTggOS4wNDE5NVY5LjA3MTc3SDEwVjkuMDQxOTVIOFpNOCA5LjAxMjIyVjkuMDQxOTVIMTBWOS4wMTIyMkg4Wk04IDguOTgyNThWOS4wMTIyMkgxMFY4Ljk4MjU4SDhaTTggOC45NTMwM1Y4Ljk4MjU4SDEwVjguOTUzMDNIOFpNOCA4LjkyMzU3VjguOTUzMDNIMTBWOC45MjM1N0g4Wk04IDguODk0MjFWOC45MjM1N0gxMFY4Ljg5NDIxSDhaTTggOC44NjQ5M1Y4Ljg5NDIxSDEwVjguODY0OTNIOFpNOCA4LjgzNTc1VjguODY0OTNIMTBWOC44MzU3NUg4Wk04IDguODA2NjZWOC44MzU3NUgxMFY4LjgwNjY2SDhaTTggOC43Nzc2NlY4LjgwNjY2SDEwVjguNzc3NjZIOFpNOCA4Ljc0ODc2VjguNzc3NjZIMTBWOC43NDg3Nkg4Wk04IDguNzE5OTRWOC43NDg3NkgxMFY4LjcxOTk0SDhaTTggOC42OTEyMlY4LjcxOTk0SDEwVjguNjkxMjJIOFpNOCA4LjY2MjU5VjguNjkxMjJIMTBWOC42NjI1OUg4Wk04IDguNjM0MDVWOC42NjI1OUgxMFY4LjYzNDA1SDhaTTggOC42MDU2MVY4LjYzNDA1SDEwVjguNjA1NjFIOFpNOCA4LjU3NzI1VjguNjA1NjFIMTBWOC41NzcyNUg4Wk04IDguNTQ4OTlWOC41NzcyNUgxMFY4LjU0ODk5SDhaTTggOC41MjA4MlY4LjU0ODk5SDEwVjguNTIwODJIOFpNOCA4LjQ5Mjc1VjguNTIwODJIMTBWOC40OTI3NUg4Wk04IDguNDY0NzZWOC40OTI3NUgxMFY4LjQ2NDc2SDhaTTggOC40MzY4N1Y4LjQ2NDc2SDEwVjguNDM2ODdIOFpNOCA4LjQwOTA3VjguNDM2ODdIMTBWOC40MDkwN0g4Wk04IDguMzgxMzdWOC40MDkwN0gxMFY4LjM4MTM3SDhaTTggOC4zNTM3NlY4LjM4MTM3SDEwVjguMzUzNzZIOFpNOCA4LjMyNjI0VjguMzUzNzZIMTBWOC4zMjYyNEg4Wk04IDguMjk4ODFWOC4zMjYyNEgxMFY4LjI5ODgxSDhaTTggOC4yNzE0N1Y4LjI5ODgxSDEwVjguMjcxNDdIOFpNOCA4LjI0NDIzVjguMjcxNDdIMTBWOC4yNDQyM0g4Wk04IDguMjE3MDlWOC4yNDQyM0gxMFY4LjIxNzA5SDhaTTggOC4xOTAwM1Y4LjIxNzA5SDEwVjguMTkwMDNIOFpNOCA4LjE2MzA3VjguMTkwMDNIMTBWOC4xNjMwN0g4Wk04IDguMTM2MlY4LjE2MzA3SDEwVjguMTM2Mkg4Wk04IDguMTA5NDNWOC4xMzYySDEwVjguMTA5NDNIOFpNOCA4LjA4Mjc0VjguMTA5NDNIMTBWOC4wODI3NEg4Wk04IDguMDU2MTZWOC4wODI3NEgxMFY4LjA1NjE2SDhaTTggOC4wMjk2NlY4LjA1NjE2SDEwVjguMDI5NjZIOFpNOCA4LjAwMzI2VjguMDI5NjZIMTBWOC4wMDMyNkg4Wk04IDcuOTc2OTVWOC4wMDMyNkgxMFY3Ljk3Njk1SDhaTTggNy45NTA3NFY3Ljk3Njk1SDEwVjcuOTUwNzRIOFpNOCA3LjkyNDYyVjcuOTUwNzRIMTBWNy45MjQ2Mkg4Wk04IDcuODk4NlY3LjkyNDYySDEwVjcuODk4Nkg4Wk04IDcuODcyNjZWNy44OTg2SDEwVjcuODcyNjZIOFpNOCA3Ljg0NjgzVjcuODcyNjZIMTBWNy44NDY4M0g4Wk04IDcuODIxMDhWNy44NDY4M0gxMFY3LjgyMTA4SDhaTTggNy43OTU0M1Y3LjgyMTA4SDEwVjcuNzk1NDNIOFpNOCA3Ljc2OTg4VjcuNzk1NDNIMTBWNy43Njk4OEg4Wk04IDcuNzQ0NDFWNy43Njk4OEgxMFY3Ljc0NDQxSDhaTTggNy43MTkwNVY3Ljc0NDQxSDEwVjcuNzE5MDVIOFpNOCA3LjY5Mzc4VjcuNzE5MDVIMTBWNy42OTM3OEg4Wk04IDcuNjY4NlY3LjY5Mzc4SDEwVjcuNjY4Nkg4Wk04IDcuNjQzNTFWNy42Njg2SDEwVjcuNjQzNTFIOFpNOCA3LjYxODUyVjcuNjQzNTFIMTBWNy42MTg1Mkg4Wk04IDcuNTkzNjNWNy42MTg1MkgxMFY3LjU5MzYzSDhaTTggNy41Njg4M1Y3LjU5MzYzSDEwVjcuNTY4ODNIOFpNOCA3LjU0NDEyVjcuNTY4ODNIMTBWNy41NDQxMkg4Wk04IDcuNTE5NTFWNy41NDQxMkgxMFY3LjUxOTUxSDhaTTggNy40OTVWNy41MTk1MUgxMFY3LjQ5NUg4Wk04IDcuNDcwNThWNy40OTVIMTBWNy40NzA1OEg4Wk04IDcuNDQ2MjVWNy40NzA1OEgxMFY3LjQ0NjI1SDhaTTggNy40MjIwMlY3LjQ0NjI1SDEwVjcuNDIyMDJIOFpNOCA3LjM5Nzg4VjcuNDIyMDJIMTBWNy4zOTc4OEg4Wk04IDcuMzczODRWNy4zOTc4OEgxMFY3LjM3Mzg0SDhaTTggNy4zNDk5VjcuMzczODRIMTBWNy4zNDk5SDhaTTggNy4zMjYwNVY3LjM0OTlIMTBWNy4zMjYwNUg4Wk04IDcuMzAyMjlWNy4zMjYwNUgxMFY3LjMwMjI5SDhaTTggNy4yNzg2NFY3LjMwMjI5SDEwVjcuMjc4NjRIOFpNOCA3LjI1NTA3VjcuMjc4NjRIMTBWNy4yNTUwN0g4Wk04IDcuMjMxNlY3LjI1NTA3SDEwVjcuMjMxNkg4Wk04IDcuMjA4MjNWNy4yMzE2SDEwVjcuMjA4MjNIOFpNOCA3LjE4NDk1VjcuMjA4MjNIMTBWNy4xODQ5NUg4Wk04IDcuMTYxNzdWNy4xODQ5NUgxMFY3LjE2MTc3SDhaTTggNy4xMzg2OVY3LjE2MTc3SDEwVjcuMTM4NjlIOFpNOCA3LjExNTdWNy4xMzg2OUgxMFY3LjExNTdIOFpNOCA3LjA5MjhWNy4xMTU3SDEwVjcuMDkyOEg4Wk04IDcuMDcwMDFWNy4wOTI4SDEwVjcuMDcwMDFIOFpNOCA3LjA0NzMxVjcuMDcwMDFIMTBWNy4wNDczMUg4Wk04IDcuMDI0N1Y3LjA0NzMxSDEwVjcuMDI0N0g4Wk04IDcuMDAyMTlWNy4wMjQ3SDEwVjcuMDAyMTlIOFpNOCA2Ljk3OTc4VjcuMDAyMTlIMTBWNi45Nzk3OEg4Wk04IDYuOTU3NDZWNi45Nzk3OEgxMFY2Ljk1NzQ2SDhaTTggNi45MzUyNFY2Ljk1NzQ2SDEwVjYuOTM1MjRIOFpNOCA2LjkxMzEyVjYuOTM1MjRIMTBWNi45MTMxMkg4Wk04IDYuODkxMDlWNi45MTMxMkgxMFY2Ljg5MTA5SDhaTTggNi44NjkxNlY2Ljg5MTA5SDEwVjYuODY5MTZIOFpNOCA2Ljg0NzMyVjYuODY5MTZIMTBWNi44NDczMkg4Wk04IDYuODI1NThWNi44NDczMkgxMFY2LjgyNTU4SDhaTTggNi44MDM5NFY2LjgyNTU4SDEwVjYuODAzOTRIOFpNOCA2Ljc4MjRWNi44MDM5NEgxMFY2Ljc4MjRIOFpNOCA2Ljc2MDk1VjYuNzgyNEgxMFY2Ljc2MDk1SDhaTTggNi43Mzk2VjYuNzYwOTVIMTBWNi43Mzk2SDhaTTggNi43MTgzNVY2LjczOTZIMTBWNi43MTgzNUg4Wk04IDYuNjk3MTlWNi43MTgzNUgxMFY2LjY5NzE5SDhaTTggNi42NzYxM1Y2LjY5NzE5SDEwVjYuNjc2MTNIOFpNOCA2LjY1NTE3VjYuNjc2MTNIMTBWNi42NTUxN0g4Wk04IDYuNjM0MzFWNi42NTUxN0gxMFY2LjYzNDMxSDhaTTggNi42MTM1NFY2LjYzNDMxSDEwVjYuNjEzNTRIOFpNOCA2LjU5Mjg3VjYuNjEzNTRIMTBWNi41OTI4N0g4Wk04IDYuNTcyMjlWNi41OTI4N0gxMFY2LjU3MjI5SDhaTTggNi41NTE4MlY2LjU3MjI5SDEwVjYuNTUxODJIOFpNOCA2LjUzMTQ0VjYuNTUxODJIMTBWNi41MzE0NEg4Wk04IDYuNTExMTZWNi41MzE0NEgxMFY2LjUxMTE2SDhaTTggNi40OTA5OFY2LjUxMTE2SDEwVjYuNDkwOThIOFpNOCA2LjQ3MDg5VjYuNDkwOThIMTBWNi40NzA4OUg4Wk04IDYuNDUwOTFWNi40NzA4OUgxMFY2LjQ1MDkxSDhaTTggNi40MzEwMlY2LjQ1MDkxSDEwVjYuNDMxMDJIOFpNOCA2LjQxMTIyVjYuNDMxMDJIMTBWNi40MTEyMkg4Wk04IDYuMzkxNTNWNi40MTEyMkgxMFY2LjM5MTUzSDhaTTggNi4zNzE5NFY2LjM5MTUzSDEwVjYuMzcxOTRIOFpNOCA2LjM1MjQ0VjYuMzcxOTRIMTBWNi4zNTI0NEg4Wk04IDYuMzMzMDRWNi4zNTI0NEgxMFY2LjMzMzA0SDhaTTggNi4zMTM3NFY2LjMzMzA0SDEwVjYuMzEzNzRIOFpNOCA2LjI5NDU0VjYuMzEzNzRIMTBWNi4yOTQ1NEg4Wk04IDYuMjc1NDNWNi4yOTQ1NEgxMFY2LjI3NTQzSDhaTTggNi4yNTY0M1Y2LjI3NTQzSDEwVjYuMjU2NDNIOFpNOCA2LjIzNzUyVjYuMjU2NDNIMTBWNi4yMzc1Mkg4Wk04IDYuMjE4NzFWNi4yMzc1MkgxMFY2LjIxODcxSDhaTTggNi4yVjYuMjE4NzFIMTBWNi4ySDhaTTggNi4xODEzOVY2LjJIMTBWNi4xODEzOUg4Wk04IDYuMTYyODdWNi4xODEzOUgxMFY2LjE2Mjg3SDhaTTggNi4xNDQ0NlY2LjE2Mjg3SDEwVjYuMTQ0NDZIOFpNOCA2LjEyNjE1VjYuMTQ0NDZIMTBWNi4xMjYxNUg4Wk04IDYuMTA3OTNWNi4xMjYxNUgxMFY2LjEwNzkzSDhaTTggNi4wODk4MVY2LjEwNzkzSDEwVjYuMDg5ODFIOFpNOCA2LjA3MTc5VjYuMDg5ODFIMTBWNi4wNzE3OUg4Wk04IDYuMDUzODdWNi4wNzE3OUgxMFY2LjA1Mzg3SDhaTTggNi4wMzYwNVY2LjA1Mzg3SDEwVjYuMDM2MDVIOFpNOCA2LjAxODMzVjYuMDM2MDVIMTBWNi4wMTgzM0g4Wk04IDYuMDAwNzFWNi4wMTgzM0gxMFY2LjAwMDcxSDhaTTggNS45ODMxOVY2LjAwMDcxSDEwVjUuOTgzMTlIOFpNOCA1Ljk2NTc3VjUuOTgzMTlIMTBWNS45NjU3N0g4Wk04IDUuOTQ4NDRWNS45NjU3N0gxMFY1Ljk0ODQ0SDhaTTggNS45MzEyMlY1Ljk0ODQ0SDEwVjUuOTMxMjJIOFpNOCA1LjkxNDFWNS45MzEyMkgxMFY1LjkxNDFIOFpNOCA1Ljg5NzA3VjUuOTE0MUgxMFY1Ljg5NzA3SDhaTTggNS44ODAxNVY1Ljg5NzA3SDEwVjUuODgwMTVIOFpNOCA1Ljg2MzMyVjUuODgwMTVIMTBWNS44NjMzMkg4Wk04IDUuODQ2NlY1Ljg2MzMySDEwVjUuODQ2Nkg4Wk04IDUuODI5OTdWNS44NDY2SDEwVjUuODI5OTdIOFpNOCA1LjgxMzQ1VjUuODI5OTdIMTBWNS44MTM0NUg4Wk04IDUuNzk3MDJWNS44MTM0NUgxMFY1Ljc5NzAySDhaTTggNS43ODA3VjUuNzk3MDJIMTBWNS43ODA3SDhaTTggNS43NjQ0N1Y1Ljc4MDdIMTBWNS43NjQ0N0g4Wk04IDUuNzQ4MzVWNS43NjQ0N0gxMFY1Ljc0ODM1SDhaTTggNS43MzIzMlY1Ljc0ODM1SDEwVjUuNzMyMzJIOFpNOCA1LjcxNjRWNS43MzIzMkgxMFY1LjcxNjRIOFpNOCA1LjcwMDU3VjUuNzE2NEgxMFY1LjcwMDU3SDhaTTggNS42ODQ4NVY1LjcwMDU3SDEwVjUuNjg0ODVIOFpNOCA1LjY2OTIzVjUuNjg0ODVIMTBWNS42NjkyM0g4Wk04IDUuNjUzNzFWNS42NjkyM0gxMFY1LjY1MzcxSDhaTTggNS42MzgyOFY1LjY1MzcxSDEwVjUuNjM4MjhIOFpNOCA1LjYyMjk2VjUuNjM4MjhIMTBWNS42MjI5Nkg4Wk04IDUuNjA3NzRWNS42MjI5NkgxMFY1LjYwNzc0SDhaTTggNS41OTI2MlY1LjYwNzc0SDEwVjUuNTkyNjJIOFpNOCA1LjU3NzYxVjUuNTkyNjJIMTBWNS41Nzc2MUg4Wk04IDUuNTYyNjlWNS41Nzc2MUgxMFY1LjU2MjY5SDhaTTggNS41NDc4N1Y1LjU2MjY5SDEwVjUuNTQ3ODdIOFpNOCA1LjUzMzE2VjUuNTQ3ODdIMTBWNS41MzMxNkg4Wk04IDUuNTE4NTRWNS41MzMxNkgxMFY1LjUxODU0SDhaTTggNS41MDQwM1Y1LjUxODU0SDEwVjUuNTA0MDNIOFpNOCA1LjQ4OTYyVjUuNTA0MDNIMTBWNS40ODk2Mkg4Wk04IDUuNDc1MzFWNS40ODk2MkgxMFY1LjQ3NTMxSDhaTTggNS40NjExVjUuNDc1MzFIMTBWNS40NjExSDhaTTggNS40NDY5OVY1LjQ2MTFIMTBWNS40NDY5OUg4Wk04IDUuNDMyOTlWNS40NDY5OUgxMFY1LjQzMjk5SDhaTTggNS40MTkwOFY1LjQzMjk5SDEwVjUuNDE5MDhIOFpNOCA1LjQwNTI4VjUuNDE5MDhIMTBWNS40MDUyOEg4Wk04IDUuMzkxNThWNS40MDUyOEgxMFY1LjM5MTU4SDhaTTggNS4zNzc5OFY1LjM5MTU4SDEwVjUuMzc3OThIOFpNOCA1LjM2NDQ5VjUuMzc3OThIMTBWNS4zNjQ0OUg4Wk04IDUuMzUxMDlWNS4zNjQ0OUgxMFY1LjM1MTA5SDhaTTggNS4zMzc4VjUuMzUxMDlIMTBWNS4zMzc4SDhaTTggNS4zMjQ2MVY1LjMzNzhIMTBWNS4zMjQ2MUg4Wk04IDUuMzExNTJWNS4zMjQ2MUgxMFY1LjMxMTUySDhaTTggNS4yOTg1M1Y1LjMxMTUySDEwVjUuMjk4NTNIOFpNOCA1LjI4NTY1VjUuMjk4NTNIMTBWNS4yODU2NUg4Wk04IDUuMjcyODZWNS4yODU2NUgxMFY1LjI3Mjg2SDhaTTggNS4yNjAxOFY1LjI3Mjg2SDEwVjUuMjYwMThIOFpNOCA1LjI0NzYxVjUuMjYwMThIMTBWNS4yNDc2MUg4Wk04IDUuMjM1MTNWNS4yNDc2MUgxMFY1LjIzNTEzSDhaTTggNS4yMjI3NlY1LjIzNTEzSDEwVjUuMjIyNzZIOFpNOCA1LjIxMDQ5VjUuMjIyNzZIMTBWNS4yMTA0OUg4Wk04IDUuMTk4MzJWNS4yMTA0OUgxMFY1LjE5ODMySDhaTTggNS4xODYyNlY1LjE5ODMySDEwVjUuMTg2MjZIOFpNOCA1LjE3NDI5VjUuMTg2MjZIMTBWNS4xNzQyOUg4Wk04IDUuMTYyNDRWNS4xNzQyOUgxMFY1LjE2MjQ0SDhaTTggNS4xNTA2OFY1LjE2MjQ0SDEwVjUuMTUwNjhIOFpNOCA1LjEzOTAzVjUuMTUwNjhIMTBWNS4xMzkwM0g4Wk04IDUuMTI3NDhWNS4xMzkwM0gxMFY1LjEyNzQ4SDhaTTggNS4xMTYwM1Y1LjEyNzQ4SDEwVjUuMTE2MDNIOFpNOCA1LjEwNDY5VjUuMTE2MDNIMTBWNS4xMDQ2OUg4Wk04IDUuMDkzNDRWNS4xMDQ2OUgxMFY1LjA5MzQ0SDhaTTggNS4wODIzMVY1LjA5MzQ0SDEwVjUuMDgyMzFIOFpNOCA1LjA3MTI3VjUuMDgyMzFIMTBWNS4wNzEyN0g4Wk04IDUuMDYwMzRWNS4wNzEyN0gxMFY1LjA2MDM0SDhaTTggNS4wNDk1MlY1LjA2MDM0SDEwVjUuMDQ5NTJIOFpNOCA1LjAzODc5VjUuMDQ5NTJIMTBWNS4wMzg3OUg4Wk04IDUuMDI4MTdWNS4wMzg3OUgxMFY1LjAyODE3SDhaTTggNS4wMTc2NlY1LjAyODE3SDEwVjUuMDE3NjZIOFpNOCA1LjAwNzI0VjUuMDE3NjZIMTBWNS4wMDcyNEg4Wk04IDQuOTk2OTNWNS4wMDcyNEgxMFY0Ljk5NjkzSDhaTTggNC45ODY3M1Y0Ljk5NjkzSDEwVjQuOTg2NzNIOFpNOCA0Ljk3NjYzVjQuOTg2NzNIMTBWNC45NzY2M0g4Wk04IDQuOTY2NjNWNC45NzY2M0gxMFY0Ljk2NjYzSDhaTTggNC45NTY3NFY0Ljk2NjYzSDEwVjQuOTU2NzRIOFpNOCA0Ljk0Njk1VjQuOTU2NzRIMTBWNC45NDY5NUg4Wk04IDQuOTM3MjdWNC45NDY5NUgxMFY0LjkzNzI3SDhaTTggNC45Mjc2OFY0LjkzNzI3SDEwVjQuOTI3NjhIOFpNOCA0LjkxODIxVjQuOTI3NjhIMTBWNC45MTgyMUg4Wk04IDQuOTA4ODRWNC45MTgyMUgxMFY0LjkwODg0SDhaTTggNC44OTk1N1Y0LjkwODg0SDEwVjQuODk5NTdIOFpNOCA0Ljg5MDQxVjQuODk5NTdIMTBWNC44OTA0MUg4Wk04IDQuODgxMzVWNC44OTA0MUgxMFY0Ljg4MTM1SDhaTTggNC44NzIzOVY0Ljg4MTM1SDEwVjQuODcyMzlIOFpNOCA0Ljg2MzU0VjQuODcyMzlIMTBWNC44NjM1NEg4Wk04IDQuODU0OFY0Ljg2MzU0SDEwVjQuODU0OEg4Wk04IDQuODQ2MTZWNC44NTQ4SDEwVjQuODQ2MTZIOFpNOCA0LjgzNzYyVjQuODQ2MTZIMTBWNC44Mzc2Mkg4Wk04IDQuODI5MTlWNC44Mzc2MkgxMFY0LjgyOTE5SDhaTTggNC44MjA4N1Y0LjgyOTE5SDEwVjQuODIwODdIOFpNOCA0LjgxMjY1VjQuODIwODdIMTBWNC44MTI2NUg4Wk04IDQuODA0NTNWNC44MTI2NUgxMFY0LjgwNDUzSDhaTTggNC43OTY1MlY0LjgwNDUzSDEwVjQuNzk2NTJIOFpNOCA0Ljc4ODYyVjQuNzk2NTJIMTBWNC43ODg2Mkg4Wk04IDQuNzgwODJWNC43ODg2MkgxMFY0Ljc4MDgySDhaTTggNC43NzMxM1Y0Ljc4MDgySDEwVjQuNzczMTNIOFpNOCA0Ljc2NTU0VjQuNzczMTNIMTBWNC43NjU1NEg4Wk04IDQuNzU4MDZWNC43NjU1NEgxMFY0Ljc1ODA2SDhaTTggNC43NTA2OFY0Ljc1ODA2SDEwVjQuNzUwNjhIOFpNOCA0Ljc0MzQxVjQuNzUwNjhIMTBWNC43NDM0MUg4Wk04IDQuNzM2MjRWNC43NDM0MUgxMFY0LjczNjI0SDhaTTggNC43MjkxOFY0LjczNjI0SDEwVjQuNzI5MThIOFpNOCA0LjcyMjIyVjQuNzI5MThIMTBWNC43MjIyMkg4Wk04IDQuNzE1MzhWNC43MjIyMkgxMFY0LjcxNTM4SDhaTTggNC43MDg2M1Y0LjcxNTM4SDEwVjQuNzA4NjNIOFpNOCA0LjcwNzExVjQuNzA4NjNIMTBWNC43MDcxMUg4Wk04LjQxNDIxIDMuODc4NjhMOC4yOTI4OSA0TDkuNzA3MTEgNS40MTQyMUw5LjgyODQzIDUuMjkyODlMOC40MTQyMSAzLjg3ODY4Wk0xMC41MzU1IDNDOS43Mzk4OCAzIDguOTc2ODIgMy4zMTYwNyA4LjQxNDIxIDMuODc4NjhMOS44Mjg0MyA1LjI5Mjg5QzEwLjAxNiA1LjEwNTM2IDEwLjI3MDMgNSAxMC41MzU1IDVWM1pNMTEuNSAzSDEwLjUzNTVWNUgxMS41VjNaTTEwLjUgM1Y0SDEyLjVWM0gxMC41Wk0xMC41MzU1IDRIMTEuNVYySDEwLjUzNTVWNFpNOS4xNzg1NCA0LjUzMDc5QzkuNTQ3MjcgNC4xOTAxOSAxMC4wMzE2IDQgMTAuNTM1NSA0VjJDOS41Mjc2NSAyIDguNTU5IDIuMzgwMzggNy44MjE0NiAzLjA2MTY2TDkuMTc4NTQgNC41MzA3OVpNNi40NjQ0NyA0QzYuOTY4MzkgNCA3LjQ1MjczIDQuMTkwMTkgNy44MjE0NiA0LjUzMDc5TDkuMTc4NTQgMy4wNjE2NkM4LjQ0MSAyLjM4MDM4IDcuNDcyMzUgMiA2LjQ2NDQ3IDJWNFpNNS41IDRINi40NjQ0N1YySDUuNVY0Wk02LjUgNFYzSDQuNVY0SDYuNVoiIGZpbGw9IndoaXRlIiBtYXNrPSJ1cmwoI3BhdGgtMS1vdXRzaWRlLTFfNDgyXzI1NikiLz4KPHBhdGggZD0iTTE5LjUgMi41SDIyLjVWOS41SDI0LjVDMjUuMDUyMyA5LjUgMjUuNSA5Ljk0NzcyIDI1LjUgMTAuNVYxMi41VjE4LjVIMTUuNUwxNi4xNjY3IDEyLjVMMTYuNDAxMiAxMC4zODk2QzE2LjQ1NzQgOS44ODMxNCAxNi44ODU1IDkuNSAxNy4zOTUgOS41SDE5LjVWMi41WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTIyLjUgOS41VjIuNUgxOS41VjkuNU0yMi41IDkuNUgyNC41QzI1LjA1MjMgOS41IDI1LjUgOS45NDc3MiAyNS41IDEwLjVWMTIuNU0yMi41IDkuNUgxOS41TTE5LjUgOS41SDE3LjM5NUMxNi44ODU1IDkuNSAxNi40NTc0IDkuODgzMTQgMTYuNDAxMiAxMC4zODk2TDE2LjE2NjcgMTIuNU0yNS41IDEyLjVWMTguNUgxNS41TDE2LjE2NjcgMTIuNU0yNS41IDEyLjVIMTYuMTY2NyIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L3N2Zz4K')  8 1, auto;

$rte-popup-padding: 0 2px !default;
$rte-popup-item-padding: 9px 4px !default;

$rte-ai-assistant-btn-disabled: $grey-f5 !default;
$rte-ai-assistant-box-shadow: 0 6px 12px rgba($base-font, .5) !default;

$rte-toolbar-item-hov-bg-color: $grey;

//enddefault

@include export-module('richtexteditor-bootstrap') {
  .e-rte-toolbar,
  .e-rte-toolbar.e-extended-toolbar {
    .e-toolbar-popup {
      .e-rte-numberformatlist-dropdown,
      .e-rte-bulletformatlist-dropdown {

        &.e-active {
          border-radius: 4px;
        }
      }
    }
  }
}

@include export-module('richtexteditor-layout') {

  /*! tab layout */

  .e-richtexteditor {
    display: block;
    position: relative;

    .e-rte-container {
      display: flex;
      flex-direction: column;
      width: $rte-container-width;
      height: $rte-container-height;
      content: 'light-theme';
      @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
        content: 'dark-theme';
      }
      &.e-count-enabled,
      &.e-resize-enabled {
        .e-content {
          padding-bottom: $rte-count-resize-enabled-content-padding-bottom;
        }
      }

      &.e-source-code-enabled {
        .e-rte-content {
          display: none;
        }

        .e-source-content {
          display: block;
          overflow: hidden;
        }
      }

      &.e-rte-tb-bottom {
        .e-rte-content {
          margin-bottom: $rte-tb-bottom-content-margin-bottom;
        }
      }
    }

    .e-rte-content {
      flex-grow: 1;

      .e-rte-placeholder.e-placeholder-enabled {
        display: block;
        font-size: $rte-content-font-size;
      }
      .e-row-wrapper,
      .e-col-wrapper,
      .e-table-wrapper {
        user-select: none;
        position: absolute;
        cursor: pointer;
        .e-icons.e-drag-and-drop {
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px 0 0 4px;
          &.e-rtl {
            border-radius: 0 4px 4px 0;
          }
          &:hover {
            background: $rte-table-gripper-hover-bg;
          }
          &.e-active {
            background-color: $rte-table-gripper-active-bg;
            color: $rte-table-gripper-active-color;
          }
        }
        .e-icons.e-move {
          border-radius: 50%;
          &:hover {
            background: $rte-table-gripper-hover-bg;
          }
          &.e-active {
            background-color: $rte-table-gripper-active-bg;
            color: $rte-table-gripper-active-color;
          }
        }
      }
      .e-col-wrapper .e-icons.e-drag-and-drop {
        border-radius: 4px 4px 0 0;
        &::before {
          transform: rotate(90deg);
        }
      }
    }

    .e-source-content {
      display: none;
    }

    & textarea.e-content {
      border: $rte-content-textarea-border;
      display: block;
      height: $rte-content-textarea-height;
      margin: $rte-content-textarea-margin;
      outline: 0;
      padding: $rte-content-textarea-padding;
      resize: none;
      width: $rte-content-textarea-width;
    }

    & .e-rte-hidden {
      display: none;
    }

    &.e-disabled {
      pointer-events: none;
    }

    &.e-rte-full-screen {
      bottom: 0;
      height: $rte-full-screen-height !important; /* stylelint-disable-line declaration-no-important */
      left: 0;
      overflow: auto;
      position: fixed;
      right: 0;
      top: 0;
      width: $rte-full-screen-width !important; /* stylelint-disable-line declaration-no-important */
      z-index: 999;

      .e-resize-handle {
        display: none;
      }

      iframe {
        height: calc(100% - 42px);
      }

      .e-rte-edit-table {
        max-height: $rte-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-rte-edit-table-prop-dialog {
        max-height: $rte-edit-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-rte-link-dialog {
        max-height: $rte-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-rte-img-dialog {
        max-height: $rte-img-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-rte-img-link-dialog {
        max-height: $rte-img-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-rte-img-size-dialog {
        max-height: $rte-img-size-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-rte-img-alt-dialog {
        max-height: $rte-img-alt-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    &.e-rtl .e-rte-tb-bottom .e-rte-character-count {
      text-align: left;
    }

    &.e-rtl .e-rte-character-count {
      margin-right: $rte-character-count-rtl-margin-right;
      padding-left: $rte-character-count-padding-left;
      padding-right: $rte-character-count-padding-right;
    }

    &.e-rtl .e-rte-content .e-content blockquote {
      padding-left: $rte-blockquote-padding-left;
      padding-right: $rte-blockquote-padding-right;
    }

    .e-rte-toolbar {

      @if $skin-name == 'bootstrap5' {
        &.e-toolbar .e-hor-nav {
          min-height: $toolbar-expand-icon-min-height;
        }
      }

      .e-toolbar-items .e-hscroll-bar .e-hscroll-content .e-toolbar-item:first-child {
        margin-left: $rte-toolbar-item-first-child-margin-left;
      }

      .e-hor-nav.e-expended-nav {
        height: $rte-expended-nav-min-height; //used toolbar component nav default min-height
        min-height: $rte-expended-nav-min-height; //used toolbar component nav default min-height
      }
    }

    .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
      display: inline-block;
      margin-left: $rte-toolbar-multirow-margin-left;
      margin-right: $rte-toolbar-multirow-margin-right;
      overflow-x: auto;
      white-space: nowrap;
      width: $rte-toolbar-multirow-width;
    }

    .e-rte-toolbar {
      .e-toolbar-item {
        .e-rte-dropdown-menu {
          .e-rte-dropdown-btn-text {
            font-weight: $font-weight;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      &.e-control[class *= 'e-toolbar'] {
        box-sizing: border-box;
      }

      .e-toolbar-extended.e-visible {
        display: block;
        visibility: hidden;
      }

      &.e-tbar-ios-fixed.e-rte-tb-fixed {
        top: 0;
        transform: translate3d(0, 0, 0);
      }

      &.e-rte-tb-fixed:not(.e-tbar-ios-fixed) {
        bottom: 0;
      }

      &.e-rte-tb-fixed {
        display: none;
        left: 0;
        position: fixed;
        right: 0;

        &.e-show {
          display: block;
          z-index: 101;
        }
      }
    }

    .e-rte-placeholder {
      color: $rte-content-font-color;
      line-height: $rte-placeholder-line-height;
      opacity: .54;
      overflow: hidden;
      padding: $rte-placeholder-padding;
      position: absolute;
      text-align: start;
      top: 0;
      z-index: 1;
      display: none;
    }

    .e-rte-content,
    .e-rte-iframe-content {
      position: relative;
      z-index: 1;
    }

    .e-rte-content,
    .e-source-content,
    .e-rte-iframe-content {
      overflow: hidden;
      transition: 100ms ease-out;
      width: $rte-content-width;
      font-size: $rte-content-font-size;

      .e-content {
        width: $rte-e-content-width;
        display: block;
        float: left;
        background: unset;
        box-sizing: border-box;
        height: $rte-content-height;
        min-height: 100px;
        outline: 0 solid transparent;
        padding: $rte-iframe-content-padding;
        position: relative;
        text-align: inherit;
        z-index: 2;
        font-weight: $rte-content-font-weight;
        line-height: $rte-content-line-height;
        font-size: $rte-common-content-font-size;
        /* stylelint-disable property-no-vendor-prefix */
        -webkit-overflow-scrolling: touch; //iOS devices scrolling smooth
        // sass-lint:enabled no-vendor-prefixes
        overflow: auto;
        transition: 100ms ease-out;
      }

      .e-content p {
        margin: $rte-content-p-margin;
        margin-bottom: $rte-content-p-margin-bottom;
      }

      .e-content blockquote {
        font-size: $rte-common-content-font-size;
      }

      .e-content code {
        background: $rte-code-background;
        color: $rte-code-color;
      }

      .e-content hr {
        margin: $rte-content-hr-margin;
        border: $rte-hr-border;
        @if $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' {
          border: $rte-hr-small-border;
        }
      }

      .e-content {
        .e-rte-checklist > li:not(.e-rte-checklist-hidden) {
          list-style: none;
          position: relative;
        }

        .e-rte-checklist > li::before {
          content: '';
          position: absolute;
          top: 2px;
          box-sizing: content-box;
          left: -25px;
          width: $rte-checklist-checkbox-width;
          height: $rte-checklist-checkbox-height;
          border-radius: $rte-checklist-checkbox-border-radius;
          border: $rte-checklist-checkbox-border;
          cursor: pointer;
        }

        .e-rte-checklist li.e-rte-checklist-checked::before {
          background: $rte-checklist-checked-bg-color;
          border: $rte-checklist-checked-border-color;
        }

        .e-rte-checklist li.e-rte-checklist-checked::after {
          border-color: $rte-checklist-checked-checkmark-color;
          border-style: solid;
          border-width: 0 calc(16px / 8) calc(16px / 8) 0;
          box-sizing: content-box;
          content: '';
          display: block;
          height: 8px;
          width: 4px;
          left: -19px;
          position: absolute;
          top: 4.5px;
          transform: rotate(45deg);
          cursor: pointer;
          @if $theme-name =='Material3-dark' or $theme-name =='Material3' {
            left: -18px;
            top: 5.5px;
          }
        }
      }

      .e-content.e-rtl {
        .e-rte-checklist li.e-rte-checklist-checked::after {
          right: -19px;
        }
        .e-rte-checklist > li::before {
          right: -25px;
        }
      }

      .e-content hr:hover {
        cursor: default;
      }

      hr.e-rte-hr-focus {
        outline: 2px solid $rte-hr-outline;
        outline-offset: 3px;
        @if $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' {
          outline: 2px solid rgba(0, 116, 204, 1);
        }
      }

      .e-content li {
        margin-bottom: $rte-content-li-margin-bottom;
      }

      .e-content li ol,
      .e-content li ul {
        margin-block-start: $rte-li-ul-margin;
      }

      .e-content ul {
        list-style-type: disc;
      }

      .e-content ul ul,
      .e-content ol ul {
        list-style-type: circle;
      }

      .e-content ul ul ul,
      .e-content ol ul ul,
      .e-content ul ol ul,
      .e-content ol ol ul {
        list-style-type: square;
      }

      .e-content h1 {
        font-size: $rte-content-h1-font-size;
        font-weight: $rte-content-h1-font-weight;
        line-height: $rte-content-h1-line-height;
        margin: $rte-content-h1-margin;
      }

      .e-content h2 {
        font-size: $rte-content-h2-font-size;
        font-weight: $rte-content-h2-font-weight;
        line-height: $rte-content-h2-line-height;
        margin: $rte-content-h2-margin;
      }

      .e-content h3 {
        font-size: $rte-content-h3-font-size;
        font-weight: $rte-content-h3-font-weight;
        line-height: $rte-content-h3-line-height;
        margin: $rte-content-h3-margin;
      }

      .e-content h4 {
        font-size: $rte-content-h4-font-size;
        font-weight: $rte-content-h4-font-weight;
        line-height: $rte-content-h4-line-height;
        margin: $rte-content-h4-margin;
      }

      .e-content h5 {
        font-size: $rte-content-h5-font-size;
        font-weight: $rte-content-h5-font-weight;
        line-height: $rte-content-h5-line-height;
        margin: $rte-content-h5-margin;
      }

      .e-content h6 {
        font-size: $rte-content-h6-font-size;
        line-height: $rte-content-h6-line-height;
        margin: $rte-content-h6-margin;
      }

      .e-content blockquote {
        margin: $rte-content-blockquote-margin;
        margin-left: $rte-content-blockquote-margin-left;
        padding-left: $rte-iframe-blockquote-padding-left;
      }

      .e-content table {
        margin-bottom: $rte-content-table-margin-bottom;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;

        &:not(:first-child):not(table table) {
          margin-top: $rte-content-table-margin-top;
        }
      }

      .e-content pre {
        background-color: $rte-content-pre-background;
        border: $rte-content-pre-border;
        border-radius: $rte-content-pre-border-radius;
        color: $rte-content-color;
        font-size: inherit;
        line-height: inherit;
        margin: $rte-content-pre-margin;
        overflow: visible;
        padding: $rte-content-pre-padding;
        white-space: pre-wrap;
        word-break: inherit;
        word-wrap: break-word;

        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
          background-color: $rte-pre-bg-color;
        }
      }
      .e-content pre[data-language] {
        background: rgba(157, 157, 157, .08);
        color: rgba(46, 46, 46, 1);
        font-family: $rte-code-block-font-family;
        border-radius: $rte-pre-border-radius;
        border: $rte-pre-border;
        padding: $rte-code-block-padding;
        font-size: $rte-pre-font-size;
        line-height: $rte-code-block-line-height;
        font-weight: $rte-code-block-font-weight;
        position: relative;
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
          background: rgba(157, 157, 157, .08);
          color: rgba(245, 245, 245, 1);
          border: $rte-pre-small-border;
        }
        &::before {
          content: attr(data-language);
          font-family: $rte-code-block-label-font-family;
          font-weight: $rte-code-block-label-font-weight;
          color: rgba(249, 250, 251, 1);
          font-size: $rte-pre-before-content-font-size;
          line-height: $rte-code-block-label-line-height;
          right: 8px;
          padding: $rte-code-block-label-padding;
          background-color: rgba(105, 105, 105, 1);
          top: -1px;
          border-radius: $rte-pre-before-content-border-radius;
          position: absolute;
          @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
            background: rgba(189, 186, 186, 1);
            color: rgba(29, 36, 50, 1);
          }
        }
        code {
          color: rgba(46, 46, 46, 1);
          background: none;
          @if $theme-name == 'bootstrap-dark' or $theme-name == 'material-dark' or $theme-name == 'fabric-dark' or $theme-name == 'Material3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'highcontrast' or $theme-name == 'botstrap5-dark' or $theme-name == 'tailwind-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind3-dark' {
            color: rgba(245, 245, 245, 1);
          }
        }
      }
      .e-content strong,
      .e-content b {
        font-weight: $rte-content-strong-b-font-weight;
      }

      .e-content a {
        text-decoration: none;
        user-select: auto;
      }

      .e-content a:hover {
        text-decoration: underline;
      }

      .e-content p:last-child,
      .e-content p.e-rte-last-paragraph,
      .e-content pre:last-child,
      .e-content blockquote:last-child {
        margin-bottom: $rte-content-para-pre-block-last-margin-bottom;
      }

      .e-content h3 + h4 {
        margin-top: $rte-content-h3-h4-tag-margin-top;
      }

      .e-content h4 + h5 {
        margin-top: $rte-content-h4-h5-tag-margin-top;
      }

      .e-content h5 + h6 {
        margin-top: $rte-content-h5-h6-tag-margin-top;
      }

      .e-content ul:last-child {
        margin-bottom: $rte-content-ul-tag-margin-bottom;
      }

      .e-content table.e-cell-select {
        position: relative;
      }

      .e-content table.e-cell-select::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: $rte-table-select-border;
        pointer-events: none;
      }

      .e-content table td.e-cell-select.e-multi-cells-select,
      .e-content table th.e-cell-select.e-multi-cells-select {
        border: $rte-table-select-multi-cells-border;
        position: relative;
      }

      .e-content table td.e-cell-select.e-multi-cells-select::after,
      .e-content table th.e-cell-select.e-multi-cells-select::after {
        background-color: $rte-table-multicell-select-bg-color;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: $rte-table-cell-after-width;
        height: $rte-table-cell-after-height;
        bottom: 0;
        pointer-events: none;
        right: 0;
      }
      .e-content table td.e-multi-cells-select ::selection,
      .e-content table th.e-multi-cells-select ::selection {
        background-color: transparent;
      }
      .e-content table td.e-multi-cells-select,
      .e-content table th.e-multi-cells-select {
        user-select: none;
      }
    }

    .e-rte-tb-bottom {
      .e-rte-character-count {
        position: relative;
        text-align: right;
      }
    }

    .e-rte-character-count {
      color: $rte-default-character-count-color;
      font-size: $rte-default-character-count-font-size;
      margin-right: $rte-default-character-count-margin-right;
      opacity: $rte-default-character-count-opacity;
      padding-bottom: $rte-default-character-count-padding-bottom;
      text-align: right;
      z-index: 100;
      pointer-events: none;

      &.e-warning {
        color: $rte-warning-character-count-color;
        opacity: unset;
      }

      &.e-error {
        color: $rte-error-character-count-color;
        opacity: unset;
      }
    }

    &:not(.e-rtl) .e-rte-character-count:last-child {
      margin-right: $rte-character-count-last-child-margin-right;
    }

    .e-rte-srctextarea {
      background-color: transparent;
      border: $rte-content-src-textarea-border;
      color: $rte-content-color;
      height: $rte-srctextarea-height;
      line-height: $rte-srctextarea-line-height;
      overflow: auto;
      padding: $rte-content-src-textarea-padding;
      resize: none;
      transition: 100ms ease-out;
      width: $rte-srctextarea-width;
    }

    .e-resize-handle {
      position: absolute;
      margin-bottom: $rte-resize-handler-margin-bottom; //changing width(15px) to margin right 3px

      &.e-south-east {
        bottom: $rte-resize-handler-position;
        cursor: nwse-resize;
        right: $rte-resize-handler-position;
        z-index: 100;
        margin-right: $rte-resize-handler-margin-right; //changing height(15px) to margin right 3px
      }

      &.e-south-west {
        bottom: $rte-resize-handler-position;
        cursor: sw-resize;
        left: $rte-resize-handler-position;
        transform: rotate(90deg);
        z-index: 100;
        margin-left: $rte-resize-handler-margin-right; //changing height(15px) to margin left 3px
      }
    }

    &.e-rtl {

      &.e-rte-resize {
        float: right;
      }

      .e-resize-handle.e-south-west {
        direction: ltr;
        text-align: initial;
      }
    }

    &.e-rte-tb-expand {
      &.e-rte-fixed-tb-expand {
        transition: none;
      }
    }
    .e-clickelem::after,
    .e-video-clickelem::after {
      left: 0;
      right: 0;
      z-index: 1;
    }
    .e-clickelem::before,
    .e-video-clickelem::before {
      left: 0;
      right: 0;
      z-index: 1;
    }
    .e-clickelem::before {
      bottom: 70%;
      top: 0;
    }
    .e-clickelem::after {
      bottom: 0;
      top: 70%;
    }
    .e-video-clickelem::before {
      bottom: 85%;
      top: 0;
    }
    .e-video-clickelem::after {
      bottom: 0;
      top: 90%;
    }

    .e-audio-wrap,
    .e-embed-video-wrap {
      display: inline-block;
    }

    .e-clickelem,
    .e-video-clickelem {
      display: block;
      margin: $rte-video-elem-margin;
      outline: none;
      padding: $rte-video-elem-padding;
      position: relative;
    }

    .e-clickelem::after,
    .e-video-clickelem::after {
      background: transparent;
      content: '';
      cursor: default;
      display: block;
      position: absolute;
    }

    .e-clickelem::before,
    .e-video-clickelem::before {
      background: transparent;
      content: '';
      cursor: default;
      display: block;
      position: absolute;
    }

    .e-videoheader,
    .e-embed-videoheader,
    .e-video-url-wrap {
      padding-bottom: $rte-video-url-wrapper-padding-bottom;
      padding-top: $rte-video-url-wrapper-padding-top;
    }

    .e-video-url-wrap .e-radio-wrapper {
      padding: $rte-video-wrapper-padding;
    }

    .e-video-url-wrap textarea {
      min-height: 80px; //3. video url height to min-height
    }

    .e-rte-value-wrapper {
      display: none;
    }

    .e-rte-upload {
      visibility: hidden;
      display: none;
    }

    .e-rte-dropdown-btn-text-wrapper {
      display: inline-flex;
    }

    .e-rte-radio-keep-format {
      padding-top: $rte-radio-keep-format-padding-top;
    }

    .e-rte-radio-remove-format,
    .e-rte-radio-plain-format {
      padding-top: $rte-radio-remove-plain-padding-top;
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-colorpicker-wrapper,
    .e-colorpicker-container {

      &.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
      &.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
        display: block;
        font-family: 'e-icons';
        font-weight: $rte-color-picker-font-weight;
        line-height: $rte-color-picker-line-height;
        text-transform: none;
      }

      .e-split-btn-wrapper {
        .e-split-colorpicker {
          .e-selected-color {
            background: none;
            display: block;
            margin-top: $rte-color-picker-margin-top;
            width: $rte-color-picker-width;
            height: $rte-color-picker-height;
            .e-split-preview {
              height: 3px;
              bottom: 0;
              top: unset;
            }
          }
        }
      }
    }
  }

  .e-rte-toolbar.e-rte-quick-toolbar .e-toolbar-item {
    .e-colorpicker-wrapper,
    .e-colorpicker-container {

      &.e-rte-font-colorpicker .e-split-colorpicker.e-icons::before,
      &.e-rte-background-colorpicker .e-split-colorpicker.e-icons::before {
        display: block;
        font-family: 'e-icons';
        font-weight: $rte-color-picker-font-weight;
        line-height: $rte-color-picker-line-height;
        text-transform: none;
      }

      .e-split-btn-wrapper {
        .e-split-colorpicker {
          .e-selected-color {
            background: none;
            display: block;
            margin-top: $rte-color-picker-margin-top;
            width: $rte-color-picker-width;
            height: $rte-color-picker-height;

            .e-split-preview {
              height: 3px;
              bottom: 0;
              top: unset;
            }
          }
        }
      }
    }
  }

  .e-colorpicker-popup.e-rte-dropdown .e-container.e-color-palette .e-clr-pal-rec-wpr .e-recent-clr-span {
    font-family: $rte-font-family;
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-split-btn-wrapper,
    .e-rte-dropdown-menu {
      min-height: $rte-split-btn-height;
    }
  }

  .e-rte-linkcontent .e-rte-label {
    padding-top: $rte-insert-dialog-label-padding-top;
  }

  .e-rte-label label {
    font-weight: $rte-lable-font-weight;
  }

  .e-dlg-content {

    .e-rte-label label,
    .e-audio-content .e-audioheader,
    .e-img-content .e-linkheader {
      @if $skin-name =='tailwind3' {
        font-weight: $font-weight-medium;
        color: $rte-content-font-color;
      }
    }
  }

  .e-rte-linkcontent .e-rte-label:first-child {
    padding-top: $rte-link-label-first-child-padding-top;
  }

  .e-rte-dropdown-popup {

    &.e-rte-inline-dropdown {

      @media screen and (max-width: 768px) {
        ul {
          padding: $rte-inline-dropdown-ul-padding;

          li.e-item {
            height: $rte-media-inline-dropdown-height;
            line-height: $rte-inline-dropdown-line-height;
            padding: $rte-inline-dropdown-li-padding;
          }

          .e-item .e-menu-icon {
            float: none;
          }
        }
      }

      &.e-rte-dropdown-icons.e-dropdown-popup {

        @media screen and (max-width: 768px) {
          max-height: 280px;

          ul {
            display: inline-flex;
          }
        }
      }
    }

    ul {
      min-width: 82px;

      .e-item {

        .e-menu-icon {
          margin: $rte-ul-menu-icon-margin;
          width: $rte-ul-menu-icon-width;
        }

        &.e-h1 {
          font-size: $rte-content-ul-h1-font-size;
          font-weight: $rte-content-ul-h1-font-weight;
          height: $rte-content-ul-h1-height;
          @if $skin-name =='fluent2' {
            line-height: $rte-content-ul-h1-small-line-height;
          }
          @else {
            line-height: $rte-content-ul-h1-line-height;
          }
        }

        &.e-code{
          font-family: monospace;
          unicode-bidi: isolate;
          white-space: pre;
        }

        &.e-h2 {
          font-size: $rte-content-ul-h2-font-size;
          font-weight: $rte-content-ul-h2-font-weight;
          height: $rte-content-ul-h2-height;
          @if $skin-name =='fluent2' {
            line-height: $rte-content-ul-h2-small-line-height;
          }
          @else {
            line-height: $rte-content-ul-h2-line-height;
          }
        }

        &.e-h3 {
          font-size: $rte-content-ul-h3-font-size;
          font-weight: $rte-content-ul-h3-font-weight;
        }

        &.e-h4 {
          font-size: $rte-content-ul-h4-font-size;
          font-weight: $rte-content-ul-h4-font-weight;
        }

        &.e-h5 {
          font-size: $rte-content-ul-h5-font-size;
          font-weight: $rte-content-ul-h5-font-weight;
        }

        &.e-h6 {
          font-size: $rte-content-ul-h6-font-size;
          font-weight: $rte-content-ul-h6-font-weight;
        }

        &.e-segoe-ui {
          font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
        }

        &.e-arial {
          font-family: 'Arial', 'Helvetica', sans-serif;
        }

        &.e-courier-new {
          font-family: 'Courier New', 'Courier', monospace;
        }

        &.e-georgia {
          font-family: 'Georgia', 'Times New Roman', 'Times', serif;
        }

        &.e-helvetica-neue {
          font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
        }

        &.e-impact {
          font-family: 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
        }

        &.e-lucida-console {
          font-family: 'Lucida Console', 'Monaco', monospace;
        }

        &.e-tahoma {
          font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
        }

        &.e-times-new-roman {
          font-family: 'Times New Roman', 'Times', serif;
        }

        &.e-trebuchet-ms {
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', sans-serif;
        }

        &.e-verdana {
          font-family: 'Verdana', 'Geneva', 'Tahoma', sans-serif;
        }

        &.e-roboto {
          font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif;
        }
      }
    }

    &.e-rte-dropdown-icons {

      ul {
        min-width: $rte-dropdown-icons-ul-min-width;
      }

      @media screen and (max-width: 768px) {

        ul {
          min-width: 30px;
        }
      }
    }

    &.e-rtl {
      ul .e-item .e-menu-icon {
        margin: $rte-rtl-ul-menu-icon-margin;
      }
    }
  }

  .e-rte-image.e-imgbreak,
  .e-rte-audio.e-audio-break,
  .e-rte-video.e-video-break {
    border: $rte-media-break-elem-border;
    cursor: pointer;
    display: block;
    float: none;
    max-width: $rte-media-break-elem-max-width;
    padding: $rte-media-break-elem-padding;
    position: relative;
  }

  .e-rte-image,
  .e-rte-audio,
  .e-rte-video  {
    border: $rte-media-elem-border;
    cursor: pointer;
    display: block;
    float: none;
    margin: $rte-media-elem-margin;
    max-width: $rte-media-elem-max-width;
    position: relative;
  }

  .e-rte-image.e-imginline,
  .e-rte-image.e-img-inline,
  .e-img-caption-container.e-img-inline,
  .e-rte-audio.e-audio-inline,
  .e-rte-video.e-video-inline {
    margin-left: $rte-media-inline-elem-margin-left;
    margin-right: $rte-media-inline-elem-margin-right;
    display: inline-block;
    float: none;
    max-width: $rte-media-inline-elem-max-width;
    padding: $rte-media-inline-elem-padding;
    vertical-align: bottom;
  }

  .e-rte-image.e-imgcenter,
  .e-rte-image.e-img-center,
  .e-rte-image.e-img-break,
  .e-img-caption-container.e-img-center,
  .e-img-caption-container.e-img-break,
  .e-rte-video.e-video-center {
    cursor: pointer;
    display: block;
    float: none;
    margin: $rte-img-video-center-margin;
    max-width: $rte-img-video-center-max-width;
    position: relative;
  }

  .e-rte-image.e-imgleft,
  .e-rte-video.e-video-left {
    float: left;
    margin: $rte-img-video-left-margin;
    margin-right: $rte-img-video-left-margin-right;
    text-align: left;
  }

  .e-rte-image.e-imgright,
  .e-rte-video.e-video-right {
    float: right;
    margin: $rte-img-video-right-margin;
    margin-left: $rte-img-video-right-margin-left;
    text-align: right;
  }

  .e-rte-img-popup .e-item {
    height: 106px;
    width: 300px;
  }

  .e-rte-img-caption {
    display: inline-block;
    margin: $rte-img-caption-margin;
    max-width: $rte-img-caption-max-width;
    position: relative;
  }

  .e-rte-img-caption.e-caption-inline {
    display: inline-block;
    margin: 5px auto;
    margin-left: 5px;
    margin-right: 5px;
    max-width: calc(100% - (2 * 5px));
    position: relative;
    text-align: center;
    vertical-align: bottom;
  }

  .e-rte-img-caption.e-imgcenter {
    display: contents;
    margin-left: $rte-imgcenter-margin-left;
    margin-right: $rte-imgcenter-margin-right;
  }

  .e-rte-img-caption.e-imgright {
    display: contents;
    margin-left: $rte-imgright-margin-left;
    margin-right: 0;
  }

  .e-rte-img-caption.e-imgleft {
    display: contents;
    margin-left: 0;
    margin-right: $rte-imgleft-margin-right;
  }

  .e-rte-img-caption .e-rte-image.e-imgright {
    margin-left: auto;
    margin-right: $rte-img-caption-imgright-margin-right;
  }

  .e-rte-img-caption .e-rte-image.e-imgleft {
    margin: 0;
  }

  .e-img-caption.e-rte-img-caption.e-imgbreak {
    display: contents;
  }

  .e-rte-table td,
  .e-rte-table th {
    border: $rte-table-border;
    height: 20px;
    min-width: 20px;
    padding: $rte-table-padding;
    box-sizing: border-box;
  }

  .e-rte-table.e-dashed-border > tbody > tr > td,
  .e-rte-table.e-dashed-border > tbody > tr > th {
    border-style: dashed;
  }

  .e-rte-img-caption .e-img-inner {
    box-sizing: border-box;
    display: block;
    font-size: $rte-toolbar-icon-size;
    font-weight: $rte-content-img-caption-font-weight;
    margin: $rte-content-img-caption-inner-margin;
    opacity: .9;
    position: relative;
    text-align: center;
    width: $rte-content-img-caption-inner-width;
  }

  .e-rte-img-caption.e-imgleft .e-img-inner {
    float: left;
    text-align: left;
  }

  .e-rte-img-caption.e-imgright .e-img-inner {
    float: right;
    text-align: right;
  }

  .e-rte-img-caption.e-imgleft .e-img-wrap,
  .e-rte-img-caption.e-imgright .e-img-wrap {
    display: contents;
  }

  .e-container.e-color-palette .e-custom-palette .e-palette {
    padding: $rte-container-custom-palette-padding;
  }

  .e-rte-img-caption .e-img-wrap {
    display: inline-block;
    margin: $rte-img-wrap-margin;
    padding: $rte-img-wrap-padding;
    width: $rte-img-wrap-width;
  }

  .e-rte-img-dialog .e-rte-label {
    padding-top: $rte-insert-dialog-label-padding-top;
  }

  .e-rte-img-dialog .e-rte-label:first-child {
    padding-top: $rte-img-label-first-child-padding-top;
  }

  .e-rte-video-dialog .e-rte-label {
    padding-top: $rte-insert-dialog-label-padding-top;
  }

  .e-rte-video-dialog .e-rte-label:first-child {
    padding-top: $rte-video-dialog-label-padding-top;
  }

  .e-rte-table-resize.e-tb-col-insert,
  .e-rte-table-resize.e-tb-row-insert {
    position: absolute;
    background-color: transparent;
    text-align: center;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: $rte-insert-icon-color;
  }

  .e-rte-table-resize .e-circle::before,
  .e-rte-table-resize .e-circle-add::before {
    background-color: $rte-content-bg;
    border-radius: 50%;
  }

  .e-rte-table-resize.e-tb-col-insert {
    width: 26px;
    height: 22px;
  }

  .e-rte-table-resize.e-tb-row-insert {
    width: 22px;
    height: 26px;
  }

  .e-rte-table-resize.e-tb-row-insert.e-insert-cell-rtl {
    right: 2px;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle-add,
  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add {
    font-size: 16px;
    line-height: 16px;
    border: 1px;
    position: absolute;
    z-index: 2;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle-add {
    top: 0;
    left: 5px;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add {
    top: 5px;
    left: 0;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle-add.e-insert-cell-rtl {
    left: 6.5px;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle,
  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle {
    font-size: 8px;
    line-height: 8px;
    border: 1px;
    position: absolute;
    z-index: 2;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle {
    top: 9px;
    left: 4px;
  }

  .e-rte-table-resize.e-tb-col-insert .e-icons.e-circle {
    top: 4px;
    left: 9px;
  }

  .e-rte-table-resize.e-tb-row-insert .e-icons.e-circle.e-insert-cell-rtl {
    left: 10px;
  }

  .e-rte-table-resize.e-row-resize,
  .e-rte-table-resize.e-column-resize {
    background-color: transparent;
    background-repeat: repeat;
    bottom: 0;
    cursor: col-resize;
    height: 1px;
    overflow: visible;
    position: absolute;
    width: 1px;
  }

  .e-rte-table-resize.e-row-resize {
    cursor: row-resize;
    height: 1px;
  }

  .e-rte-image,
  .e-img-caption-container {
    &.e-img-left-wrap {
      float: left;
      margin: 5px 5px 5px 0;
    }
    &.e-img-right-wrap {
      float: right;
      margin: 5px 0 5px 5px;
    }
    &.e-img-left,
    &.e-img-right {
      margin-top: 5px;
      margin-bottom: 5px;
    }
    &.e-img-right {
      margin-right: 0;
      margin-left: auto;
    }
    &.e-img-left {
      margin-left: 0;
      margin-right: auto;
    }
  }
  .e-img-caption-container {
    &.e-img-left-wrap,
    &.e-img-right-wrap {
      display: inline-block;
    }
    &.e-img-left,
    &.e-img-right {
      display: block;
    }
    max-width: 100%;
    position: relative;
    .e-img-caption-text {
      box-sizing: border-box;
      display: block;
      font-size: $rte-toolbar-icon-size;
      font-weight: $rte-content-img-caption-font-weight;
      margin: auto;
      opacity: .9;
      position: relative;
      text-align: center;
      width: 100%;
    }
    &.e-img-left-wrap,
    &.e-img-right-wrap,
    &.e-img-left,
    &.e-img-right,
    &.e-img-center,
    &.e-img-break {
      .e-img-wrap img {
        margin-bottom: 0;
      }
    }
    &.e-img-center,
    &.e-img-break {
      margin-left: auto;
      margin-right: auto;
    }
  }

  .e-richtexteditor,
  .e-rte-elements {
    .e-linkheader,
    .e-audioheader,
    .e-videoheader,
    .e-video-url-wrap {
      font-family: $rte-font-family;
      font-size: $rte-insert-dialog-font-size;
      opacity: .87;
      padding-bottom: $rte-insert-dialog-label-padding-bottom;
      padding-top: $rte-insert-dialog-label-padding-top;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons  {
      margin-top: $rte-uploadwrap-file-btn-icons-margin-top;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list  {
      border-bottom: $rte-uploadwrap-file-list-border-bottom;
      min-height: $rte-uploadwrap-file-list-min-height;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container {
      margin-left: $rte-uploadwrap-file-container-margin-left;
    }

    .e-img-uploadwrap.e-droparea .e-upload .e-upload-files,
    .e-aud-uploadwrap.e-droparea .e-upload .e-upload-files,
    .e-vid-uploadwrap.e-droparea .e-upload .e-upload-files,
    .e-word-uploadwrap.e-droparea .e-upload .e-upload-files {
      border-top: $rte-droparea-files-border-top;
    }

    .e-img-uploadwrap.e-droparea .e-file-select-wrap,
    .e-aud-uploadwrap.e-droparea .e-file-select-wrap,
    .e-vid-uploadwrap.e-droparea .e-file-select-wrap,
    .e-word-uploadwrap.e-droparea .e-file-select-wrap {
      display: none;
    }

    .e-img-uploadwrap.e-droparea .e-upload,
    .e-aud-uploadwrap.e-droparea .e-upload,
    .e-vid-uploadwrap.e-droparea .e-upload,
    .e-word-uploadwrap.e-droparea .e-upload {
      border: $rte-media-droparea-upload-border;
      float: none;
    }

    .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
      margin-top: $rte-img-upload-abort-icon-btn-margin-top;
    }

    .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog .e-aud-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog .e-vid-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog .e-word-uploadwrap.e-droparea .e-browsebtn {
      display: block;
      height: $rte-droparea-browsebtn-height;
      margin: $rte-droparea-browsebtn-margin;
      padding: $rte-droparea-browsebtn-padding;
      position: relative;
      top: 6px;
      @if $skin-name == 'FluentUI' {
        outline: none;
      }
    }

    .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea .e-browsebtn,
    .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap.e-droparea .e-browsebtn {
      display: none;
    }

    .e-dialog .e-img-uploadwrap.e-droparea,
    .e-dialog .e-aud-uploadwrap.e-droparea,
    .e-dialog .e-vid-uploadwrap.e-droparea,
    .e-dialog .e-word-uploadwrap.e-droparea {
      // line-height: 10;////No UI affected so removed
      min-height: 50px;
      position: relative;
    }

    .e-dialog .e-img-uploadwrap.e-droparea .e-rte-upload-text,
    .e-dialog .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
    .e-dialog .e-vid-uploadwrap.e-droparea .e-rte-upload-text,
    .e-dialog .e-word-uploadwrap.e-droparea .e-rte-upload-text {
      display: inline-block;
      line-height: $rte-dialog-word-upload-text-line-height;
    }

    // .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea,
    // .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap.e-droparea,
    // .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap.e-droparea,
    // .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap.e-droparea {
    //   line-height: 4;////No UI affected so removed
    // }

    .e-rte-inline-dropdown ul {
      max-height: 200px;
      overflow-y: auto;
    }

    .e-rte-dropdown-popup.e-rte-dropdown-items ul {
      max-height: 280px;
      overflow-y: auto;
    }

    .e-rte-table-popup.e-popup.e-popup-open {
      border-radius: $rte-table-popup-border-radius;
      box-shadow: $rte-table-popup-box;
      font-size: $rte-popup-open-font-size;
      font-weight: $rte-popup-open-font-weight;
      min-width: 120px;
      overflow: hidden;
      padding: $rte-table-popup-padding;
      border: $rte-table-popup-border;
    }

    .e-rte-table-popup.e-popup-open .e-rte-tablecell {
      border: $rte-table-span-border;
      display: inline-block;
      height: $rte-table-popup-tablecell-height;
      margin: $rte-table-popup-tablecell-margin;
      overflow: hidden;
      vertical-align: top;
      width: $rte-table-popup-tablecell-width;
    }

    .e-rte-table-popup.e-popup-open .e-rte-table-row {
      height: $rte-table-popup-row-height;
    }

    .e-rte-table-popup.e-popup-open .e-insert-table-btn {
      width: $rte-insert-table-btn-width;
    }

    .e-rte-edit-table .e-rte-field {
      padding-top: $rte-insert-dialog-label-padding-top;
    }

    .e-rte-edit-table .e-rte-field:first-child {
      padding-top: $rte-table-dialog-label-padding-top;
    }

    .e-table-fake-selection {
      visibility: hidden;
      content: '\u200B';
      position: fixed;
      top: 0;
      left: -9999px;
    }

    .e-rte-content .e-content table td.e-cell-select,
    .e-rte-content .e-content table th.e-cell-select {
      border: $rte-content-table-select-border;
      height: $rte-content-table-select-height;
    }

    span.e-table-box {
      cursor: nwse-resize;
      display: block;
      height: 10px;
      position: absolute;
      width: 10px;

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

    span.e-table-box.e-rmob {
      height: 14px;
      width: 14px;
    }

    .e-upload .e-upload-files .e-upload-file-list .e-file-container {
      margin-right: $rte-upload-file-container-margin-right;
    }

    .e-rte-upload-popup {
      width: 250px;
    }

    .e-rte-dialog-upload .e-upload-files {
      border-top: $rte-dialog-upload-files-border-top;
    }

    .e-rte-dialog-upload .e-upload-files .e-upload-file-list {
      border-bottom: $rte-dialog-file-list-border-bottom;
    }

    .e-rte-edit-table-content {
      .e-rte-edit-table-cell {
        display: flex;
        gap: $rte-edit-table-cell-gap;
      }
      .e-rte-edit-table-tablewidth,
      .e-rte-edit-table-bgcolor {
        width: $rte-table-bgcolor-width;
      }
      .e-rte-edit-table-border {
        .e-rte-edit-table-borderfields {
          display: flex;
          justify-content: space-between;
          .e-rte-edit-table-borderwidth {
            width: 37%;
          }
          .e-rte-dropdown-btn-text-wrapper {
            width: 47px;
          }
        }
      }
      .e-rte-edit-table-element {
        margin-top: $rte-table-element-margin-top;
      }
      .e-rte-edit-table-field {
        margin-top: $rte-table-field-margin-top;
      }
      .e-rte-dropdown-btn-text {
        font-weight: $rte-dropdown-btn-font-weight;
      }
      .e-rte-edit-table-borderlabel {
        font-weight: $rte-edit-table-border-label-font-weight;
        font-style: semi-bold;
      }
      .e-caret {
        opacity: .75;
      }
    }

    .e-rte-edit-tablecell-dialog {
      .e-rte-edit-tablecell-row {
        display: flex;
        gap: $rte-edit-table-cell-gap;

        &:first-child {
          .e-rte-edit-table-tablewidth,
          .e-rte-edit-table-tableheight {
            width: 50%;
          }
        }

        &:not(:first-child) {
          .e-rte-edit-table-cellpadding,
          .e-rte-edit-table-bgcolor {
            width: 50%;
          }
        }
      }

      .e-rte-edit-table-field-flex {
        display: flex;
        justify-content: space-between;

        @if $theme-name == 'bootstrap' or $theme-name == 'bootstrap-dark' {
          .e-control-wrapper.e-numeric {
            width: 115px !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }

      .e-rte-edit-table-widthValue,
      .e-rte-edit-table-heightValue {
        button {
          padding: 2px 8px;

          @if $theme-name == 'highcontrast' or $theme-name == 'highcontrast-light' {
            margin-top: 0;
          }
          @else {
            margin-top: 2px;
          }

          .e-rte-dropdown-btn-content-text {
            display: inline-block;
            width: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .e-rte-edit-tablecell-align-container {
        display: flex;
        gap: 24px;

        .e-rte-edit-tablecell-horizontal-align,
        .e-rte-edit-tablecell-vertical-align {
          margin-top: 8px;
          width: 50%;
        }

        .e-rte-edit-tablecell-btn-group {
          margin-top: 4px;
        }

        .e-rte-tablecell-align-btn {
          width: auto;
          height: auto;
          padding: 12px;
          font-size: 14px;
        }
      }

      .e-rte-edit-table-border {
        .e-rte-edit-table-borderfields {
          display: flex;
          justify-content: space-between;

          .e-rte-edit-table-borderwidth {
            width: 37%;
          }

          .e-rte-dropdown-btn-text-wrapper {
            width: 47px;
          }
        }
      }

      .e-rte-edit-table-element {
        margin-top: $rte-table-element-margin-top;
      }

      .e-rte-edit-table-field {
        margin-top: $rte-table-field-margin-top;
      }

      .e-rte-dropdown-btn-text {
        font-weight: $rte-dropdown-btn-font-weight;
      }

      .e-rte-edit-table-borderlabel {
        font-weight: $rte-edit-table-border-label-font-weight;
        font-style: semi-bold;
      }

      .e-caret {
        opacity: .75;
      }
    }

    .e-rte-emojipicker-popup.e-popup.e-popup-open {
      border: $rte-emoji-pop-border;
      // min-width: 120px; //Not affecting the UI after removal
      min-height: $rte-emoji-popup-open-min-height;
      min-width: $rte-emoji-popup-open-width;
      display: flex;
      flex-direction: column;

      .e-toolbar .e-toolbar-item .e-tbar-btn {
        padding: $rte-emoji-picker-tbar-btn-padding;
        border-radius: $rte-emoji-pop-border-radius;

        @if $skin-name =='bootstrap' or $skin-name =='botstrap-dark' {
          &:hover,
          &:focus{
            padding: $rte-emoji-picker-tbar-btn-hover-padding;
          }
        }

        @if $skin-name =='material' or $skin-name =='material-dark' {
          padding: $rte-emoji-picker-tbar-btn-material-padding;
        }

        .e-tbar-btn-text {
          @if $skin-name =='fluent2' {
            font-size: $rte-emoji-pop-tbar-btn-small-font-size;
          }
          @else {
            font-size: $rte-emoji-pop-tbar-btn-large-font-size;
          }
          padding: $rte-emoji-picker-tbar-btn-text-padding;
        }
      }

      .e-input-group.e-control-wrapper {
        margin: $rte-emojipicker-input-control-wrapper-margin;
        width: 94%;
        box-sizing: border-box;
        align-self: center;

        .e-rte-emoji-search {
          @if $skin-name =='material' or $skin-name =='material-dark' or $skin-name =='material3' or $skin-name =='material3-dark' {
            text-indent: 4px;
          }
        }
      }

      .e-rte-emojipicker-btn {
        display: block;
        gap: $rte-emoji-btn-gap;
        height: $rte-emoji-btn-height;
        overflow: auto;
        padding: $rte-emoji-btn-padding;

        .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          gap: $rte-emoji-btn-group-gap;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            padding: $rte-emoji-grp-btn-padding;
            // width: $rte-emoji-grp-btn-width; //2. emoji picker dynamic issue
            // height: $rte-emoji-grp-btn-height; //2. emoji picker dynamic issue
            border: $rte-emoji-grp-btn-border;
            // line-height: 1px;//No UI affected so removed
            @if $skin-name =='fluent2' {
              font-size: $rte-emoji-grp-btn-small-font-size;
            }
            @else {
              font-size: $rte-emoji-grp-btn-large-font-size;
            }
          }
        }

        .e-rte-emojisearch-btn {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          gap: $rte-emoji-search-btn-gap;
          height: $rte-emoji-search-btn-height;

          .e-btn.e-control {
            display: inline-block;
            box-shadow: none;
            font-size: $rte-emoji-grp-btn-font-size;
            padding: $rte-emoji-grp-btn-control-padding;
            // width: 40px; //2. emoji picker dynamic issue
            // height: 40px; //2. emoji picker dynamic issue
            border: $rte-emoji-grp-btn-border;
            // line-height: 1px;//No UI affected so removed
          }
        }

        .e-rte-emojipicker-group .e-rte-emojipicker-name {
          font-weight: $rte-emoji-headname-font-weight;
          font-size: $rte-emoji-headname-font-size;
        }

        .e-rte-emojiSearch-noEmoji {
          text-align: center;
        }
      }
    }
  }

  .e-rte-backgroundcolor-colorpicker,
  .e-rte-fontcolor-colorpicker {
    & .e-color-palette.e-container {
      & .e-custom-palette .e-palette {
        padding: $rte-colorpicker-custom-palette-padding;
      }

      & .e-switch-ctrl-btn {
        padding: $rte-colorpicker-custom-palette-switch-btn-padding;
      }
    }
  }

  .e-rte-quick-popup.e-rte-elements {
    border-radius: $rte-quick-popup-border-radius;
    border: $rte-quick-popup-border;
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
      min-height: $rte-quick-toolbar-min-height;
      min-width: $rte-quick-toolbar-min-width;
      .e-toolbar-items:not(.e-tbar-pos) {
        min-height: $rte-quick-toolbar-items-not-tbar-pos-min-height;
        min-width: $rte-quick-toolbar-items-not-tbar-pos-min-width;
        margin: $rte-quick-popup-outer-margin;
        .e-toolbar-item {
          margin: $rte-popup-toolbar-item-margin;
          min-height: $rte-popup-toolbar-item-min-height;
          min-width: $rte-popup-toolbar-item-min-width;
          padding: $rte-quick-popup-inner-padding;
        }
      }
    }
  }

  .e-rte-quick-popup {

    .e-rte-quick-toolbar {

      .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
        white-space: normal;
        display: inline-block;
      }

      &.e-remove-white-space {

        .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
          white-space: nowrap;
        }
      }

      .e-toolbar-items:not(.e-tbar-pos) {

        .e-toolbar-item.e-rte-horizontal-separator,
        .e-toolbar-item.e-separator.e-multirow-separator.e-rte-horizontal-separator {
          display: block;
          height: 1px;
          margin: $rte-quick-toolbar-horizontal-separator-margin;
          min-height: 1px;
        }

        .e-toolbar-item {
          margin: $rte-toolbar-item-frist-last-child-margin;

          &:first-child,
          &:last-child {
            margin: $rte-quick-horizontal-separator-first-margin;
          }
        }
      }
      &.e-rte-toolbar.e-toolbar {
        box-sizing: border-box;
      }
    }

    &.e-hide {
      display: block;
      visibility: hidden;
    }
  }

  .e-rte-quick-popup.e-rte-inline-popup {
    .e-rte-quick-toolbar {
      .e-toolbar-item {
        &.e-rte-inline-template {
          min-width: $rte-inline-tmp-min-width;
        }

        &.e-rte-inline-size-template {
          min-width: $rte-inline-tmp-size-min-width;
        }

        &.e-rte-inline-color-template {
          min-width: $rte-inline-tmp-color-min-width;
        }
      }
    }
  }

  .e-popup-modal.e-popup.e-popup-open {
    display: inline-flex;
  }

  .e-rte-modal-popup.e-popup-container.e-center {
    justify-content: center;
  }

  .e-rte-modal-popup.e-popup-container {
    align-items: center;
    display: none;
    height: $rte-modal-popup-container-height;
    left: 0;
    position: fixed;
    top: 0;
    width: $rte-modal-popup-container-width;
    z-index: 10000;
  }

  .e-popup-overlay {
    height: $rte-popup-overlay-height;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 0;
    width: $rte-popup-overlay-width;
  }

  .e-table-rhelper {
    cursor: col-resize;
    opacity: .87;
    position: absolute;
  }

  .e-table-rhelper.e-column-helper {
    width: 1px;
  }

  .e-table-rhelper.e-row-helper {
    height: 1px;
  }

  .e-reicon::before {
    border-bottom: $rte-reicon-before-border-bottom;
    border-right: $rte-reicon-before-border-right;
    border-top: $rte-reicon-before-border-top;
    content: '';
    display: block;
    height: $rte-reicon-before-height;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 20px;
  }

  .e-reicon::after {
    border-bottom: $rte-reicon-after-border-bottom;
    border-left: $rte-reicon-after-border-left;
    border-top: $rte-reicon-after-border-top;
    content: '';
    display: block;
    height: $rte-reicon-after-height;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 20px;
    z-index: 3;
  }

  .e-row-helper.e-reicon::after {
    top: 10px;
    transform: rotate(90deg);
  }

  .e-row-helper.e-reicon::before {
    left: 4px;
    top: -20px;
    transform: rotate(90deg);
  }

  .e-rte-overflow {
    overflow: hidden;
  }

  .e-dialog.e-rte-dialog-minheight {
    min-height: $rte-dialog-min-height; //for now using 298px for ensuring But acutal value 296px
    @if $skin-name == 'FluentUI' or $skin-name =='fluent2' {
      min-height: $rte-dialog-fluent-min-height;
    }
  }

  .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
    background-size: 700px 190px;
    min-height: 190px;
  }

  .e-rte-table.e-rte-table-border {
    border: $rte-table-border-table-border;
    border-collapse: separate;
  }

  .e-rte-img-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-audio-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-video-dialog.e-dialog.e-device.e-dlg-modal,
  .e-rte-import-dialog.e-dialog.e-device.e-dlg-modal {
    .e-img-uploadwrap.e-droparea,
    .e-aud-uploadwrap.e-droparea,
    .e-vid-uploadwrap.e-droparea,
    .e-word-uploadwrap.e-droparea {
      // line-height: 10;//No UI affected so removed
      min-height: 50px;
      position: relative;

      .e-browsebtn {
        display: block;
        height: $rte-dlg-modal-browse-btn-mobile-height;
        margin: $rte-dlg-modal-browse-btn-margin;
        padding: $rte-dlg-modal-browse-btn-padding;
        position: relative;
        top: 6px;
        @if $skin-name == 'FluentUI' {
          outline: none;
        }
      }

      .e-upload {
        border: $rte-import-word-upload-border;
        float: none;
      }

      .e-file-select-wrap {
        display: none;
      }
    }
  }

  .e-rte-import-dialog .e-dlg-content {
    overflow-y: hidden;
  }

  .e-rte-file-manager-dialog {

    .e-rte-label {
      padding-bottom: $rte-filemanager-label-padding-bottom;
      padding-top: $rte-filemanager-label-padding-top;

      label {
        font-size: $rte-filemanager-label-font-size;
        opacity: .87;
      }
    }
  }

  .e-dialog .e-img-uploadwrap .e-droptext,
  .e-dialog .e-aud-uploadwrap .e-droptext,
  .e-dialog .e-vid-uploadwrap .e-droptext,
  .e-dialog .e-word-uploadwrap .e-droptext,
  .e-dialog.e-device .e-vid-uploadwrap .e-droptext  {
    border: $rte-drop-text-border;
    border-radius: $rte-upload-drag-border-radius;
    color: $rte-drop-text-clr;
    font-family: $rte-font-family;
    font-size: $rte-drop-text-font-size;
    height: $rte-drop-text-height;
    margin: $rte-drop-text-margin;
    text-align: center;
    width: $rte-drop-text-width;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap .e-droptext,
  .e-dialog.e-device.e-dlg-modal .e-vid-uploadwrap .e-droptext,
  .e-dialog.e-device.e-dlg-modal .e-aud-uploadwrap .e-droptext,
  .e-dialog.e-device.e-dlg-modal .e-word-uploadwrap .e-droptext {
    margin: $rte-drop-text-mobile-margin;
    width: $rte-drop-text-mobile-width;
  }
  .e-dialog.e-device .e-video-url-wrap .e-radio-wrapper {
    padding: $rte-video-url-wrap-padding;
  }

  // Blazor styles start
  .e-rte-upload-popup.e-dialog .e-file-select-wrap {
    display: none;
  }

  .e-rte-upload-popup.e-dialog .e-dlg-content {
    overflow: hidden;
    padding: $rte-upload-dlg-content-padding;
  }

  .e-hide.e-rte-quick-popup-hide {
    border: $rte-quick-popup-hide-border;
    position: absolute;
  }

  .e-rte-popup-hide {
    display: none;
  }

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

  .e-rte-table-popup.e-dialog .e-dlg-content {
    padding: $rte-table-dlg-content-padding;
    @if $skin-name == 'FluentUI' {
      margin-bottom: $rte-table-dlg-content-small-margin;
    }
  }

  .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell,
  .e-rte-elements.e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
    @if $skin-name == 'fluent2' {
      margin: $rte-table-tablecell-small-margin;
    }
    @else {
      margin: $rte-table-tablecell-large-margin;
    }
  }

  .e-rte-elements{
    .e-rte-table-popup.e-popup-open{
      .e-rte-table-row {
        height: $rte-table-popup-row-height;
      }

      .e-insert-table-btn {
        @if $skin-name == 'FluentUI' {
          margin-top: $rte-table-popup-btn-margin-top;
        }
        width: $rte-insert-table-btn-width;
      }
      .e-rte-tablecell {
        border: $rte-table-span-border;
        display: inline-block;
        height: $rte-table-popup-tablecell-height;
        margin: $rte-table-open-tablecell-margin;
        overflow: hidden;
        vertical-align: top;
        width: $rte-table-popup-tablecell-width;
      }
    }
    .e-rte-table-popup.e-popup.e-popup-open {
      border-radius: $rte-table-popup-border-radius;
      box-shadow: $rte-table-popup-box;
      font-size: $rte-popup-open-font-size;
      font-weight: $rte-popup-open-font-weight;
      min-width: 120px;
      overflow: hidden;
      padding: $rte-table-popup-padding;
    }
    &.e-dropdown-popup.e-popup.e-font-size-tbar-btn.e-popup-open {
      min-width: 95px;
    }
    &.e-dropdown-popup.e-rte-codeblock-dropdown.e-popup-open ul {
      max-height: $rte-codeblock-dropdown-popup-max-height;
      overflow: auto;
    }
  }

  .e-rte-elements.e-dialog {
    .e-img-uploadwrap.e-droparea .e-rte-upload-text,
    .e-aud-uploadwrap.e-droparea .e-rte-upload-text,
    .e-vid-uploadwrap.e-droparea .e-rte-upload-text,
    .e-word-uploadwrap.e-droparea .e-rte-upload-text {
      display: inline-block;
      line-height: $rte-uploadwrap-droparea-upload-text-line-height;
    }
    .e-img-uploadwrap.e-droparea,
    .e-aud-uploadwrap.e-droparea,
    .e-vid-uploadwrap.e-droparea,
    .e-word-uploadwrap.e-droparea {
      // line-height: 10;//No UI affected so removed
      min-height: 50px;
      position: relative;
    }
    .e-img-uploadwrap.e-droparea .e-browsebtn,
    .e-aud-uploadwrap.e-droparea .e-browsebtn,
    .e-vid-uploadwrap.e-droparea .e-browsebtn,
    .e-word-uploadwrap.e-droparea .e-browsebtn {
      display: block;
      height: $rte-droparea-browsebtn-height;
      margin: $rte-media-droparea-browsebtn-margin;
      padding: $rte-droparea-browsebtn-padding;
      position: relative;
      @if $skin-name == 'FluentUI' {
        outline: none;
      }
    }
  }
  // Blazor styles end

  .e-richtexteditor {
    .e-rte-container.e-rte-tb-bottom{
      & .e-toolbar-wrapper.e-rte-tb-float,
      .e-toolbar-container.e-rte-tb-float {
        bottom: 0;
      }
    }
  }

  .e-richtexteditor {
    .e-toolbar-wrapper.e-rte-tb-float,
    .e-toolbar-container.e-rte-tb-float {
      position: sticky;
      top: 0;
      overflow: visible;
    }
    .e-toolbar-wrapper,
    .e-toolbar-container {
      height: $rte-toolbar-wrapper-container-height;
      z-index: 10;
      white-space: nowrap;
    }
    .e-toolbar .e-toolbar-pop.e-toolbar-extended {
      position: relative;
      width: $rte-pop-toolbar-extended-width;
      top: 0 !important; /* stylelint-disable-line declaration-no-important */
      left: 0 !important; /* stylelint-disable-line declaration-no-important */
    }
    .e-toolbar .e-toolbar-pop.e-toolbar-extended.e-popup-open {
      display: block;
    }
  }
  // Used to hide the Color picker during the rendering at the initial stage. Removed the class in the created event.
  .e-rte-picker-init {
    display: none !important; /* stylelint-disable-line declaration-no-important */
  }

  @if $skin-name == 'tailwind' {
    .e-rte-table-popup.e-popup.e-popup-open {
      box-shadow: $rte-table-popup-box;
    }
    .e-richtexteditor .e-toolbar .e-hor-nav{
      min-height: 39px;
    }
  }

  @if $skin-name == 'fabric-dark' {
    .e-richtexteditor {
      .e-toolbar .e-hor-nav{
        min-height: 42px;
      }
    }
  }

  @if $skin-name == 'Material3' {
    .e-richtexteditor .e-rte-table-popup .e-insert-table-btn {
      font-weight: $font-weight;
      border: $rte-insert-table-btn-border;
      border-radius: $rte-insert-table-btn-border-radius;
    }
    .e-dialog .e-dlg-header-content + .e-dlg-content{
      padding-top: $rte-dlg-header-content-padding-top;
    }
    .e-rte-link-dialog .e-dlg-content{
      padding: $rte-link-dlg-content-padding;
    }
  }

  @if $skin-name == 'fluent2' {
    .e-richtexteditor {
      .e-toolbar .e-hor-nav{
        min-height: 40px;
      }
      .e-dialog {
        .e-radio + label {
          margin: $rte-dialog-radio-small-margin;
        }
      }
    }
    .e-rte-container{
      border-radius: $rte-container-border-radius;
    }
    .e-richtexteditor{
      border-radius: $rte-border-radius;
      .e-toolbar .e-hor-nav {
        border-radius: $rte-toolbar-border-radius;
      }
      .e-rte-content {
        border-radius: $rte-toolbar-container-border-radius;
      }
    }
    .e-richtexteditor .e-toolbar-wrapper{
      border-radius: $rte-toolbar-wrapper-border-radius;
      border-top-left-radius: $rte-top-left-border-radius;
      border-top-right-radius: $rte-top-right-border-radius;
    }

    .e-richtexteditor.e-rte-tb-expand {
      border-radius: $rte-big-tb-expand-border-radius;
    }
    .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
    .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
      border-top-left-radius: $rte-top-left-border-radius;
      border-top-right-radius: $rte-top-right-border-radius;
    }
    .e-rte-toolbar .e-toolbar-items {
      border-top-left-radius: $rte-toolbar-items-top-left-border-radius;
    }
    .e-rte-toolbar .e-hor-nav {
      border-top-right-radius: $rte-top-right-border-radius;
    }
    .e-rtl .e-rte-toolbar .e-hor-nav {
      border-top-left-radius: $rte-top-left-border-radius;
      border-top-right-radius: $rte-top-right-border-radius;
    }
    .e-rtl .e-rte-toolbar .e-toolbar-items {
      border-top-right-radius: $rte-toolbar-items-top-left-border-radius;
    }
  }

  /* Slash Menu Styles */
  .e-rte-elements.e-slash-menu {
    .e-rte-quotes::before {
      content: open-quote;
      font-size: $rte-slash-menu-content-font-size;
      line-height: $rte-slash-menu-content-line-height;
    }

    .e-rte-paragraph::before {
      content: 'T';
      font-size: $rte-slash-menu-para-before-font-size;
    }

    .e-rte-h1::before {
      content: 'H1';
      font-size: $rte-slash-menu-h1-before-font-size;
    }

    .e-rte-h2::before {
      content: 'H2';
      font-size: $rte-slash-menu-h2-before-font-size;
    }

    .e-rte-h3::before {
      content: 'H3';
      font-size: $rte-slash-menu-h3-before-font-size;
    }

    .e-rte-h4::before {
      content: 'H4';
      font-size: $rte-slash-menu-h4-before-font-size;
    }

    .e-rte-slash-menu-item-text {
      font-size: $rte-slash-menu-item-text-font-size;
      display: block;
      line-height: $rte-slash-menu-item-text-line-height;
      padding: $rte-slash-menu-item-text-padding;
    }

    .e-rte-slash-menu-item-description {
      display: block;
      line-height: $rte-slash-menu-item-description-line-height;
      font-size: $rte-slash-menu-item-description-font-size;
      padding: $rte-slash-menu-item-description-padding;
    }

    .e-slash-menu-icon {
      // line-height: 0;//No UI affected so removed
      display: inline-block;
      width: 50px;
      font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
    }

    .e-rte-slash-menu-item-content-description {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: $rte-slashmenu-description-gap;
      align-items: center;
    }

    .e-rte-slash-menu-item-content-description .e-slash-menu-icon {
      padding: $rte-slash-menu-icon-padding;
    }

    .e-rte-slash-menu-item-content-description .e-rte-slash-menu-item-text-column {
      display: flex;
      flex-direction: column;
    }

    .e-rte-slash-menu-item-content-description .e-rte-slash-menu-item-text,
    .e-rte-slash-menu-item-content-text {
      font-weight: $rte-slash-menu-content-text-font-weight;
    }

    .e-rte-slash-menu-item-content-text {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 25px;
    }

    .e-rte-slash-menu-item-content-text .e-slash-menu-icon {
      margin-left: $rte-slash-menu-icon-margin-left;
      width: 30px;
    }
  }

  .e-image-quicktoolbar {
    .e-link-groups {
      display: none;
    }

    &.e-link-enabled {
      .e-link-groups {
        display: inline-block;
      }

      .e-toolbar-item {
        &:has(.e-insert-link) {
          display: none;
        }
      }
    }
  }

  .e-rte-quick-popup {
    .e-rte-tip-pointer {
      position: absolute;

      &::before,
      &::after {
        content: '';
        position: absolute;
        width: $rte-tip-pointer-before-after-width;
        height: $rte-tip-pointer-before-after-height;
        pointer-events: none;
      }

      &.e-rte-tip-top {
        &::after,
        &::before {
          bottom: 0;
        }
      }

      &.e-rte-tip-bottom {
        bottom: 0;
        &::before,
        &::after {
          top: 0;
        }
      }

      &.e-rte-tip-center,
      &.e-rte-tip-center::before,
      &.e-rte-tip-center::after {
        left: 50%;
        transform: translateX(-50%);
      }

      &.e-rte-tip-left,
      &.e-rte-tip-left::before,
      &.e-rte-tip-left::after {
        left: 8.5px;
        transform: translateX(-50%);
      }

      &.e-rte-tip-right,
      &.e-rte-tip-right::before,
      &.e-rte-tip-right::after {
        right: 8.5px;
        transform: translateX(50%);
      }

      &.e-rte-tip-leftmiddle,
      &.e-rte-tip-leftmiddle::before,
      &.e-rte-tip-leftmiddle::after {
        left: 25%;
        transform: translateX(-50%);
      }

      &.e-rte-tip-rightmiddle,
      &.e-rte-tip-rightmiddle::before,
      &.e-rte-tip-rightmiddle::after {
        right: 25%;
        transform: translateX(50%);
      }
    }
  }
}

.e-richtexteditor {
  .e-rte-container.e-resize-enabled:not(.e-rte-tb-bottom):not(.e-count-enabled) {
    .e-rte-content,
    .e-source-content {
      margin-bottom: $rte-resize-bar-margin-bottom;
    }
  }
}

.e-richtexteditor .e-rte-toolbar .e-toolbar-pop.e-toolbar-extended {
  margin-left: $rte-toolbar-poup-extended-margin-left;
}

//toolbar popup min height over riding start
.e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) {
  background: $rte-popup-bg;
  .e-toolbar-item.e-toolbar-popup {
    min-height: $rte-popup-item-min-height;
  }
}

.e-richtexteditor {
  .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
  .e-rte-toolbar .e-toolbar-item {
    .e-tbar-btn.e-btn {
      min-height: $rte-split-btn-height;
      min-width: $rte-split-btn-height;
      padding: $rte-toolbar-tbar-btn-padding; //4.toolbar tbar-btn padding need to confirm and remove
      &:hover,
      &:active,
      &:focus,
      &.e-active {
        border: $rte-hover-split-btn-border;
        padding: $rte-toolbar-tbar-btn-hover-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
      .e-icons {
        padding: $rte-toolbar-tbar-btn-icons-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
    }
    .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: $rte-split-btn-border;
    }
  }
  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) {
    .e-toolbar-item.e-toolbar-popup:not(.e-overlay) .e-tbar-btn:hover .e-icons {
      @if $theme-name == 'bootstrap5.3' {
        color: $rte-hover-icons-color;
      }
    }
    .e-toolbar-item.e-toolbar-popup .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
      @if $theme-name == 'bootstrap4' {
        background: $rte-default-btn-bg;
      }
    }
  }
}

@if $theme-name == 'material' or $theme-name == 'material-dark' {
  .e-richtexteditor .e-rte-toolbar:not(.e-rte-inline-toolbar) .e-toolbar-item .e-tbar-btn.e-btn {
    margin: $rte-tbar-btn-small-margin;
  }
}

//toolbar popup min height over riding end

.e-richtexteditor .e-rte-tb-bottom {
  order: 999;
  bottom: 0;
}

.e-rte-aiquery-popup {
  min-height: 100px;
  overflow: hidden;
  display: flex !important; /* stylelint-disable-line declaration-no-important */
  flex-direction: column;
  .e-rte-ai-assit-content-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .e-aiassistview {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto !important; /* stylelint-disable-line declaration-no-important */
    .e-view-header {
      flex: 0 0 auto;
    }
    .e-view-content {
      flex: 1 1 auto;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
    }
    .e-view-container {
      margin: auto;
    }
    .e-rte-icon-btn-disabled {
      pointer-events: none;
      opacity: .5;
      cursor: not-allowed;
    }
    .banner-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 230px;
      text-align: center;
      & .e-assistview-icon::before {
        font-size: 35px;
      }
    }
    .e-footer {
      width: 85%;
    }
  }
}

//Added for export button
.e-richtexteditor .e-rte-toolbar .e-toolbar-items .e-toolbar-item .e-progress-btn.e-tbar-btn.e-spin-center {
  line-height: 2px;
}

// Styles for Blazor SmartRichTextEditor component
.e-smartrichtexteditor {
  .e-rte-ai-selected-text {
    color: rgb(255, 255, 255);
    background: rgba(51, 103, 209);
  }
  .e-rte-aiquery-dialog {
    border: 0;
  }
  .e-rte-aiquery-dialog .e-dlg-content {
    min-height: 100px;
    overflow: hidden;
    display: flex !important; /* stylelint-disable-line declaration-no-important */
    flex-direction: column;
    padding: 0;
    border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */

    .e-rte-ai-assit-content-container {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      width: 100%;
    }

    .e-aiassistview {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: auto !important; /* stylelint-disable-line declaration-no-important */
      .e-view-header {
        flex: 0 0 auto;
      }
      .e-view-content {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
      }
      .e-view-container {
        margin: auto;
      }
      .banner-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 230px;
        text-align: center;
        & .e-assistview-icon::before {
          font-size: 35px;
        }
      }
      .e-footer {
        width: 85%;
      }
    }
  }

  @if $theme-name != 'bootstrap4' and $theme-name != 'bootstrap5' and $theme-name != 'bootstrap5.3' {
    .e-rte-aiquery-dialog .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: 1px solid transparent;
      background-color: transparent;
      background: transparent;
      box-shadow: none;
    }
  }
  .e-rte-aiquery-dialog .e-dlg-overlay {
    background-color: rgb(250, 250, 250);
    opacity: .6;
  }
}

.e-smartrichtexteditor.e-dlg-target.e-scroll-disabled {
  overflow: initial !important; /* stylelint-disable-line declaration-no-important */
}

.e-rte-ai-assist-history.e-rte-dropdown-menu.e-popup-open {
  visibility: hidden;
  max-height: 200px;
  overflow-y: auto;
}

@mixin quick-toolbar-background-color {
  @if $theme-name == 'bootstrap5' {
    background: $content-bg-color;
  }
  @else if $theme-name == 'bootstrap5-dark' {
    background: $content-bg-color-alt2;
  }
  @else {
    background: $rte-quick-popup-bg-color;
  }
}

@include export-module('richtexteditor-theme') {

  /*! tab layout */

  .e-rte-container {
    border: $rte-container-border;
  }

  .e-rte-toolbar.e-toolbar {
    .e-toolbar-pop:not(.e-toolbar-extended) {
      .e-toolbar-item {
        display: inline-flex;
        margin: $rte-popup-item-padding;
      }
    }
    .e-toolbar-pop.e-popup-open:not(.e-toolbar-extended) {
      display: inline-flex;
      flex-wrap: wrap;
      max-width: 75%;
      width: max-content;
      padding: $rte-popup-padding;
    }
    // Prevents flickering caused by dynamic max-width when popup opens
    // Removes inherited max-height from toolbar component to ensure all items are visible
    .e-toolbar-pop:not(.e-toolbar-extended) {
      max-width: 75%;
      max-height: none !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-rte-container .e-toolbar-wrapper.e-rte-tb-bottom {
    border-top: $rte-wrapper-tb-bottom-border-top;
  }

  .e-toolbar-wrapper,
  .e-toolbar-container  {
    border-bottom: $rte-toolbar-wrapper-container-border-bottom;
  }

  iframe.e-rte-content {
    border: $rte-iframe-content-border;
  }

  .e-richtexteditor {
    color: $rte-content-color;
    background: $rte-content-bg;

    .e-rte-elements.e-tbar-btn.e-rte-export-btn {
      background-color: $rte-toolbar-item-hov-bg-color;
    }

    .e-toolbar-wrapper {
      background: $rte-tbar-default-bg;
    }

    img.e-img-focus::selection,
    audio.e-audio-focus::selection,
    .e-video-focus::selection {
      background: transparent;
      color: transparent;
    }
    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
      ::selection {
        color: $rte-selection-color;
        background: $rte-selection-bg;
      }
    }

    .e-rte-content,
    .e-source-content {
      background: $rte-content-bg;
      color: $rte-content-color;

      .e-content blockquote {
        border-left: $rte-content-blockquote-border-left-color;
      }

      .e-content .e-img-focus:not(.e-resize),
      .e-content .e-video-focus:not(.e-resize) {
        border: $rte-img-border;
      }

      .e-content a {
        color: $rte-anchor-color;
      }
    }

    &.e-rtl {
      .e-rte-content .e-content blockquote {
        border-left: $rte-content-blockquote-border-left;
        border-right: $rte-content-blockquote-border-left-color;
      }
    }

    .e-input.e-rte-linkurl.e-error,
    .e-input.e-img-link.e-error {
      color: $rte-link-valid-color;
    }

    &.e-rte-full-screen {
      background: $rte-full-screen-bg;
    }
  }

  .e-rte-quick-popup.e-rte-elements {
    box-shadow: $rte-quick-popup-box-shadow;
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
      @include quick-toolbar-background-color;
      @if $skin-name == 'FluentUI' {
        box-shadow: none;
      }
      @if $theme-name == 'highcontrast' {
        border: $rte-quick-popup-toolbar-border;
      }
      .e-toolbar-items:not(.e-tbar-pos) {
        @include quick-toolbar-background-color;
        .e-toolbar-item.e-overlay {
          @include quick-toolbar-background-color;
        }
        .e-toolbar-item:not(.e-active) {
          .e-tbar-btn,
          .e-rte-dropdown-menu {
            &:not(.e-active):not(:hover):not(:focus):not(:active) {
              @include quick-toolbar-background-color;
            }
          }
        }
      }
    }
  }

  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-split-btn-wrapper {
      .e-rte-dropdown {
        &:hover {
          background: $rte-quick-tb-btn-hover;
        }
        &:focus {
          background: $rte-quick-pop-item-focus-bg;
        }
        &:active {
          background: $rte-quick-item-active-bg;
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-split-btn-wrapper {
      border-radius: $rte-split-btn-border-radius;
      .e-rte-dropdown {
        background: $rte-default-btn-bg;
        border: $rte-split-btn-border;
      }
    }
  }
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-split-btn-wrapper {
      border-radius: $rte-split-btn-border-radius;
      .e-rte-dropdown {
        @include quick-toolbar-background-color;
        border: $rte-split-btn-border;
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      background: $rte-default-btn-bg;
      border: $rte-split-btn-border;
    }
    .e-tbar-btn {
      border: $rte-split-btn-border;
    }
  }

  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      background: $rte-quick-pop-bg;
      border: $rte-split-btn-border;
    }
    .e-tbar-btn {
      border: $rte-split-btn-border;
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item,
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-rte-dropdown-menu {
      box-shadow: none;
      color: $rte-dropdown-color;

      &:hover,
      &:focus {
        color: $rte-icon-color;
      }
      &:hover {
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }

      &:active {
        color: $rte-active-btn-icons-color;
      }

      &.e-active {
        color: $rte-drop-btn-active-color;
      }

      &:hover,
      &:focus,
      &:active,
      &.e-active {
        border: $rte-hover-split-btn-border;
        color: $rte-dropdown-transition-color;
        @if $theme-name == 'FluentUI' or $theme-name == 'fluentui-dark' or $theme-name == 'bootstrap' or $theme-name == 'fluent2' or $theme-name == 'fluent2-dark' {
          border-color: transparent;
        }
        @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
          background: $rte-split-btn-span-hover-bg;
        }
        @if $theme-name == 'FluentUI' or $theme-name == 'fluentui-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          background: $rte-split-btn-hover-bg;
        }
      }
      &:focus-visible {
        box-shadow: $rte-button-focus-box-shadow;
        @if $theme-name == 'fabric' or $theme-name == 'fabric-dark' {
          outline: none;
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar,
  .e-rte-quick-popup .e-rte-quick-toolbar {
    .e-toolbar-item:not(.e-overlay) {
      .e-tbar-btn {

        &:hover,
        &:focus,
        &:active,
        &.e-active {
          border: $rte-hover-split-btn-border;
        }

        .e-icons {
          color: $rte-dropdown-color;
        }

        &:hover,
        &:focus {
          @if $theme-name == 'tailwind' or $theme-name == 'bootstrap4' or $theme-name == 'bootstrap5.3'  or $theme-name == 'tailwind-dark' or $theme-name == 'tailwind3' {
            background: $rte-split-btn-hover-bg;
          }
          .e-icons {
            color: $rte-icon-color;
          }
        }
        &:hover {
          .e-icons {
            @if $theme-name == 'bootstrap5.3' {
              color: $rte-hover-icons-color;
            }
          }
        }

        &:active {
          .e-icons {
            color: $rte-active-btn-icons-color;
          }
        }
        @if $theme-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
          border-color: transparent;
        }
      }
    }
    .e-toolbar-item.e-active:not(.e-overlay) {
      .e-tbar-btn .e-icons {
        @if $theme-name != 'bootstrap5.3' {
          color: $rte-icon-color;
        }
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }
      .e-tbar-btn {
        border: $rte-hover-split-btn-border;
        @if $theme-name != 'fluent2-highcontrast' {
          background: $rte-btn-active-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $rte-split-btn-hover-bg;
        }
      }
    }
  }

  .e-richtexteditor.e-disabled .e-rte-toolbar .e-toolbar-item {
    .e-tbar-btn,
    .e-rte-dropdown-menu,
    .e-rte-dropdown {
      pointer-events: none;
      cursor: default;
      background: transparent;
      border: $rte-toolbar-btn-border;

      &:hover {
        background: transparent;
        border: $rte-toolbar-btn-hover-border;

        .e-icons,
        .e-rte-dropdown-btn-text,
        .e-rte-font-color::before,
        .e-background-color::before {
          color: inherit;
          background: transparent;
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item:not(.e-overlay),
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item:not(.e-overlay) {
    .e-rte-dropdown {
      box-shadow: none;
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item,
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-rte-dropdown {
      color: $rte-dropdown-color;
    }
    .e-split-btn-wrapper {
      &:hover {
        background: $rte-split-btn-hover-bg;
        .e-rte-dropdown {
          border: $rte-hover-split-btn-border;
          @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
            border-image: none;
          }
        }
        .e-split-btn:hover,
        .e-dropdown-btn:hover {
          @if $theme-name != 'fluent2-highcontrast' {
            background: $rte-split-btn-span-hover-bg;
          }
          @if $theme-name == 'fluent2-highcontrast' {
            background: $rte-split-btn-hover-bg;
          }
        }
        .e-split-btn,
        .e-dropdown-btn {
          &:not(:hover) {
            background: transparent;
          }
        }
        .e-icons {
          @if $theme-name != 'bootstrap5.3' {
            color: $rte-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-hover-icons-color;
          }
        }
      }

      &:active {
        .e-rte-dropdown {
          border: $rte-hover-split-btn-border;
          &:active {
            @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
              border-image: none;
            }
          }
        }
        .e-icons {
          color: $rte-active-btn-icons-color;
        }
      }

      &:focus {
        background: $rte-split-btn-span-hover-bg;
        .e-rte-dropdown {
          border: $rte-hover-split-btn-border;
          &:focus {
            @if $theme-name == 'Material3' or $theme-name== 'Material3-dark' {
              border-image: none;
            }
          }
        }
        .e-split-btn:focus,
        .e-dropdown-btn:focus {
          background: $rte-split-btn-span-hover-bg;
        }
        .e-split-btn,
        .e-dropdown-btn {
          &:not(:focus) {
            background: transparent;
          }
        }
        .e-icons {
          color: $rte-icon-color;
          @if ($theme-name == 'fluent2' or $theme-name == 'tailwind3') {
            color: $rte-default-icon-color;
          }
        }
      }
    }

    .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) {
      .e-split-btn,
      .e-dropdown-btn {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $rte-hover-split-btn-border;
        }
        @if $theme-name != 'bootstrap5.3' {
          color: $rte-icon-color;
        }
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }
    }

    .e-split-btn-wrapper .e-split-btn + .e-dropdown-btn.e-active {
      background: $rte-drop-btn-active-bg;
    }
    .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) .e-split-btn {
      background: $rte-split-btn-hover-bg;
    }
  }

  .e-richtexteditor .e-rte-toolbar {
    .e-toolbar-item.e-active {
      .e-split-btn-wrapper {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $rte-hover-split-btn-border;
        }
        @if $theme-name != 'fluent2-highcontrast' {
          background: $rte-btn-active-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $rte-split-btn-hover-bg;
        }
        .e-split-btn,
        .e-dropdown-btn {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $rte-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-hover-icons-color;
          }
        }
      }
    }
  }

  .e-richtexteditor .e-rte-toolbar .e-toolbar-item,
  .e-rte-quick-popup .e-rte-quick-toolbar .e-toolbar-item {
    .e-colorpicker-wrapper:focus-visible,
    .e-colorpicker-container:focus-visible,
    .e-split-btn-wrapper:focus-visible,
    .e-split-btn-wrapper:focus-visible {
      @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
        border: $rte-hover-split-btn-border;
      }
      @if $theme-name != 'fluent2-highcontrast' {
        background: $rte-split-btn-focus-bg;
      }
      @if $theme-name == 'fluent2-highcontrast' {
        background: $rte-split-btn-hover-bg;
      }
      box-shadow: $rte-button-focus-box-shadow;
      .e-split-btn,
      .e-dropdown-btn {
        &:not(:focus-visible) {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $rte-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $rte-hover-icons-color;
          }
        }
      }
    }
    .e-split-btn-wrapper:not(:focus-visible):has(.e-dropdown-btn:focus-visible),
    .e-split-btn-wrapper:not(:focus-visible):has(.e-split-btn:focus-visible) {
      @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
        border: $rte-hover-split-btn-border;
      }
      @if $theme-name != 'fluent2-highcontrast' {
        background: $rte-split-btn-focus-bg;
      }
      @if $theme-name == 'fluent2-highcontrast' {
        background: $rte-split-btn-hover-bg;
      }
      box-shadow: $rte-button-focus-box-shadow;
      .e-split-btn,
      .e-dropdown-btn {
        background: transparent;
        @if $theme-name != 'bootstrap5.3' {
          color: $rte-icon-color;
        }
        @if $theme-name == 'bootstrap5.3' {
          color: $rte-hover-icons-color;
        }
      }
    }
  }

  .e-linkheader {
    color: $rte-img-header-clr;
  }

  .e-rte-content .e-content img:not(.e-resize) {
    z-index: 1000;
  }

  span.e-rte-imageboxmark,
  span.e-rte-videoboxmark {
    background: $rte-img-resize-back-color;
    border: $rte-direct-span-media-boxmark-border;
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
    z-index: 1000;
  }

  .e-mob-rte span.e-rte-imageboxmark,
  .e-mob-rte span.e-rte-videoboxmark {
    background: $rte-img-resize-color;
    border: $rte-mob-img-video-boxmark-border;
    border-radius: $rte-videoboxmark-border-radius;
    height: 20px;
    width: 20px;
  }

  .e-mob-rte.e-mob-span span.e-rte-imageboxmark,
  .e-mob-rte.e-mob-span span.e-rte-videoboxmark {
    background: $rte-img-resize-back-color;
    border: $rte-img-video-boxmark-border;
  }

  .e-rte-content .e-content img.e-resize,
  .e-rte-content .e-content video.e-resize {
    z-index: 1000;
  }

  #{if(&, '&', '*')}.e-disabled {
    user-select: none;
    .e-rte-toolbar .e-toolbar-item {
      cursor: default;
      & .e-tbar-btn.e-icon-btn,
      & .e-dropdown-btn.e-btn,
      & .e-colorpicker-wrapper .e-btn {
        &:hover,
        &:active,
        &:focus {
          background: transparent;
          cursor: default;
        }
      }
    }
  }

  .e-dropdown-popup {
    & ul {
      & .e-item.e-active {
        background: $rte-dropdown-selection-bgcolor;
        color: $rte-dropdown-selection-color;
      }
    }
  }

  .e-popup-overlay {
    background-color: $rte-overlay-color;
  }

  @if $theme-name != 'fluentui-dark' and $theme-name != 'bootstrap5.3-dark' and $theme-name != 'tailwind3-dark' {
    .e-rte-toolbar .e-toolbar-item.e-overlay {
      .e-tbar-btn .e-icons,
      .e-rte-dropdown-menu,
      .e-rte-dropdown-menu .e-icons,
      .e-rte-dropdown .e-icons,
      .e-rte-font-color::before,
      .e-background-color::before {
        color: $rte-ext-tbar-overlay-dropdown-color;
      }
    }
  }

  .e-rte-table-popup.e-popup.e-popup-open {
    background-color: $rte-content-bg;
    color: $rte-item-color;
  }

  .e-richtexteditor .e-rte-toolbar .e-hor-nav:hover{
    border: $rte-tb-expended-hover-border;
    border-width: $rte-toolbar-hor-nav-border-width;
    padding-left: $rte-tb-expended-hover-padding-left;
  }

  @if $skin-name == 'bootstrap5' {
    .e-rte-table-popup.e-popup.e-popup-open {
      background-color: $rte-table-popup-bg;
    }
  }

  .e-rte-table-popup .e-span-border {
    @if $skin-name != 'Material3' {
      border: $rte-container-border;
    }
    display: block;
    margin-bottom: $rte-table-span-margin-bottom;
    margin-top: $rte-table-span-margin-top;
  }

  .e-rte-table-popup .e-rte-popup-header {
    color: $rte-table-header-color;
    font-family: $rte-font-family;
    font-size: $rte-table-header-font-size;
    text-align: center;
  }

  .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-default {
    background-color: $rte-table-span-bg-color;
  }

  .e-rte-table-popup.e-popup-open .e-rte-tablecell.e-active {
    background-color: $rte-table-span-active-bg-color;
    border: $rte-table-span-active-border;
  }

  .e-rte-table.e-alternate-border > tbody > tr:nth-child(2n),
  .e-rte-table.e-alternate-border > tbody > tr:nth-child(2n) > td,
  .e-rte-table.e-alternate-border > tbody > tr:nth-child(2n) > th {
    background: $rte-table-alternate-color;
    @if $skin-name == 'highcontrast' {
      color: $rte-img-popup-color;
    }
  }

  .e-rte-table th {
    background: $rte-table-header-bg;
    @if $skin-name == 'highcontrast' {
      color: $rte-table-header-text-color;
    }
  }

  .e-rte-table-popup.e-popup.e-popup-open {
    background-color: $rte-table-popup-bg;
    color: $rte-table-popup-color;
  }

  span.e-table-box {
    background-color: $rte-table-resize-back-color;
    border: $rte-table-border;
  }

  span.e-table-box.e-rbox-select {
    background-color: $rte-table-border-color;
    border: $rte-table-border;
  }

  .e-table-rhelper {
    background-color: $rte-table-span-active-border-color;
  }

  .e-rte-dialog-upload.e-upload.e-lib.e-keyboard {
    background: $rte-content-bg;
  }

  .e-upload.e-lib.e-control-wrapper.e-rte-dialog-upload {
    background: $rte-content-bg;
  }

  .e-rte-emojipicker-popup.e-popup.e-popup-open {
    background: $rte-emoji-pop-background;
    box-shadow: $rte-emoji-pop-box-shadow;
    border: $rte-emoji-pop-border;

    @if $skin-name =='bootstrap5' or $skin-name =='botstrap5-dark' or $skin-name =='bootstrap' or $skin-name =='bootstrap-dark' or $skin-name =='bootstrap4' {
      filter: drop-shadow(0 0 6px rgba(0, 0, 0, .25));
    }

    @if $skin-name =='bootstrap5' or $skin-name =='botstrap5-dark' or $skin-name =='bootstrap4' {
      .e-toolbar .e-toolbar-item:not(.e-overlay) .e-tbar-btn.e-selected .e-icons {
        color: $rte-emoji-tbar-btn-selected-font-color;
      }
    }

    .e-toolbar .e-toolbar-item .e-tbar-btn {
      background: $rte-emoji-tbar-btn-bg;

      @if $skin-name =='bootstrap5' {
        &:focus{
          background: $rte-tbar-default-bg;
        }
      }
      &.e-selected {
        background: $rte-emoji-tbar-btn-select-bg;
      }
    }

    .e-toolbar .e-toolbar-item .e-tbar-btn:hover {
      background: $rte-emoji-tbar-btn-hover;
    }

    .e-rte-emojipicker-toolbar {
      background: transparent;
      border: $rte-emojipicker-toolbar-border;
      box-shadow: none;

      & .e-toolbar-items {
        background: transparent;

        & .e-scroll-nav {
          border: $rte-emojipicker-toolbar-scroll-border;
        }
      }
    }

    .e-rte-emojipicker-btn {
      .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
        .e-btn.e-control {
          @if $skin-name =='bootstrap4' {
            color: inherit;
          }

          &:not(:hover):not(:focus):not(:active) {
            background: transparent;
          }
        }
      }

      .e-rte-emojisearch-btn {
        .e-btn.e-control {
          @if $skin-name =='bootstrap4' {
            color: inherit;
          }

          &:not(:hover):not(:focus):not(:active) {
            background: transparent;
          }
        }
      }
      .e-rte-emojipicker-group .e-rte-emojipicker-name {
        color: $rte-emoji-headname-color;
      }
    }
  }
  @if $skin-name == 'tailwind' {
    .e-richtexteditor .e-rte-toolbar .e-toolbar-extended {
      background: $rte-extended-toolbar-background;
    }
  }

  @if $skin-name == 'bootstrap5' {
    .e-richtexteditor .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
      background: $rte-tb-item-active-bg;
      border-radius: $rte-tb-item-active-border-radius;
    }

    .e-richtexteditor .e-toolbar .e-insert-table-btn.e-btn:hover .e-icons {
      color: $rte-tb-hover-font-color;
    }
    .e-rte-dropdown-popup .e-active.e-item .e-menu-icon {
      color: $white;
    }
  }

  @if $skin-name == 'Material3' {
    .e-richtexteditor .e-rte-table-popup .e-insert-table-btn {
      color: $rte-content-color;
    }
  }

  @if $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap4' {
    .e-richtexteditor .e-toolbar,
    .e-richtexteditor .e-toolbar .e-toolbar-pop{
      border: $rte-toolbar-pop-border;
    }
  }

  @if $skin-name == 'fluent2' {
    .e-richtexteditor .e-toolbar {
      box-shadow: none;
    }
    .e-rte-emojipickerbtn-group .e-btn:hover {
      background: $rte-emoji-tbar-btn-hover;
    }
  }

  // Blazor styles start

  .e-rte-img-dialog .e-rte-upload-progress {
    color: $rte-dialog-upload-status-progress;
  }
  // Blazor styles end

  .e-rte-quick-popup {
    @if $theme-name == 'fabric' or $theme-name == 'material' or $theme-name == 'Material3' or $theme-name == 'FluentUI' or $theme-name == 'bootstrap' or $theme-name == 'bootstrap5' {
      filter: drop-shadow(0 2px 6px $rte-quick-popup-filter-color);
    }
    .e-rte-tip-pointer {
      &.e-rte-tip-top::before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        @if $theme-name == 'Material3' {
          border-bottom: 10px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-bottom: 10px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-bottom: 10px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-bottom: 10px solid $content-bg-color-alt2;
        }
        @else {
          border-bottom: 10px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-top::after {
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;
        border-bottom: 9px solid $rte-quick-toolbar-tip-pointer-content;
      }
      &.e-rte-tip-bottom::before {
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        @if $theme-name == 'Material3' {
          border-top: 10px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-top: 10px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-top: 10px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-top: 10px solid $content-bg-color-alt2;
        }
        @else {
          border-top: 10px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-bottom::after {
        border-left: 7.5px solid transparent;
        border-right: 7.5px solid transparent;
        border-top: 9px solid $rte-quick-toolbar-tip-pointer-content;
      }
    }
  }
}

.e-rte-aiquery-popup {
  box-shadow: $rte-ai-assistant-box-shadow;
  .e-aiassistview {
    .e-rte-icon-btn-disabled {
      color: $rte-ai-assistant-btn-disabled;
    }
  }
  @if $theme-name != 'bootstrap4' and $theme-name != 'bootstrap5' and $theme-name != 'bootstrap5.3' {
    .e-toolbar-item .e-rte-dropdown-menu:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: 1px solid transparent;
      background-color: transparent;
      box-shadow: none;
    }
  }
}

/*! component's theme wise override definitions and variables */

@include export-module('richtexteditor-bootstrap-dark-icons') {

  /*! richtexteditor icons */

  .e-toolbar-wrapper,
  .e-toolbar-container,
  .e-rte-toolbar,
  .e-rte-dropdown-popup {

    .e-horizontal-line::before {
      content: '\e175';
    }

    .e-blockquote::before {
      content: '\e149';
    }
    .e-rte-checklist-icon::before {
      content: '\e952';
    }
    .e-alignments::before {
      content: '\e33a';
    }

    .e-justify-left::before {
      content: '\e33a';
    }

    .e-lineHeight::before {
      content: '\eb30';
    }

    .e-justify-center::before {
      content: '\e35e';
    }

    .e-justify-right::before {
      content: '\e34d';
    }

    .e-justify-full::before {
      content: '\e334';
    }

    .e-left-wrap::before {
      content: '\e1c3';
    }

    .e-right-wrap::before {
      content: '\e1c4';
    }

    .e-font-name::before {
      content: '\e35f';
    }

    .e-rte-font-colorpicker .e-split-colorpicker.e-rte-font-color::before {
      content: '\e34c';
    }

    .e-rte-background-colorpicker .e-split-colorpicker.e-background-color::before {
      content: '\e35c';
    }

    .e-bold::before {
      content: '\e339';
    }

    .e-italic::before {
      content: '\e35a';
    }

    .e-underline::before {
      content: '\e343';
    }

    .e-strike-through::before {
      content: '\e332';
    }

    .e-clear-format::before {
      content: '\e331';
    }

    .e-clear-all::before {
      content: '\e340';
    }

    .e-cut::before {
      content: '\e33b';
    }

    .e-copy::before {
      content: '\e33d';
    }

    .e-paste::before {
      content: '\e355';
    }

    .e-unorder-list::before {
      content: '\e344';
    }

    .e-order-list::before {
      content: '\e346';
    }

    .e-indent::before {
      content: '\e33f';
    }

    .e-outdent::before {
      content: '\e35d';
    }

    .e-undo::before {
      content: '\e341';
    }

    .e-redo::before {
      content: '\e354';
    }

    .e-super-script::before {
      content: '\e352';
    }

    .e-sub-script::before {
      content: '\e357';
    }

    .e-create-link::before {
      content: '\e34e';
    }

    .e-open-link::before {
      content: '\e34a';
    }

    .e-edit-link::before {
      content: '\e338';
    }

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

    .e-image::before {
      content: '\e335';
    }

    .e-audio::before {
      content: '\e947';
    }

    .e-video::before {
      content: '\e948';
    }

    .e-replace::before {
      content: '\e359';
    }

    .e-audio-replace::before,
    .e-video-replace::before {
      content: '\e606';
    }

    .e-align::before {
      content: '\e33a';
    }

    .e-caption::before {
      content: '\e11d';
    }

    .e-remove::before,
    .e-audio-remove::before,
    .e-video-remove::before {
      content: '\e33e';
    }

    .e-insert-link::before {
      content: '\e34e';
    }

    .e-display::before,
    .e-audio-display::before,
    .e-video-display::before {
      content: '\e358';
    }

    .e-alt-text::before {
      content: '\e33c';
    }

    .e-img-dimension::before,
    .e-video-dimension::before {
      content: '\e336';
    }

    .e-maximize::before {
      content: '\e342';
    }

    .e-minimize::before {
      content: '\e337';
    }

    .e-zoom-in::before {
      content: '\e349';
    }

    .e-zoom-out::before {
      content: '\e351';
    }

    .e-lower-case::before {
      content: '\e347';
    }

    .e-upper-case::before {
      content: '\e333';
    }

    .e-print::before {
      content: '\e34b';
    }

    .e-source-code::before {
      content: '\e350';
    }

    .e-preview::before {
      content: '\e345';
    }

    .e-view-side::before {
      content: '\e34f';
    }

    .e-inline-code::before {
      content: '\e356';
    }

    .e-preformat-code::before {
      content: '\e164';
    }

    .e-table-header::before {
      content: '\e148';
    }

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

    .e-table-rows::before {
      content: '\eb02';
    }

    .e-table-columns::before {
      content: '\ea9e';
    }

    .e-table-cell-ver-align::before {
      content: '\ea9b';
    }

    .e-table-edit-properties::before {
      content: '\e1b6';
    }

    .e-table-editCell-properties::before {
      content: '\e1c7';
    }

    .e-create-table::before {
      content: '\e294';
    }

    .e-align-bottom::before {
      content: '\ea91';
    }

    .e-align-middle::before {
      content: '\ea94';
    }

    .e-align-top::before {
      content: '\ea98';
    }

    .e-insert-column-left::before {
      content: '\ea97';
    }

    .e-insert-column-right::before {
      content: '\ea99';
    }

    .e-delete-column::before {
      content: '\ea95';
    }

    .e-insert-row-before::before {
      content: '\ea92';
    }

    .e-insert-row-after::before {
      content: '\ea93';
    }

    .e-delete-row::before {
      content: '\ea96';
    }

    .e-style::before {
      content: '\ea9f';
    }

    .e-rte-file-manager::before {
      content: '\e42b';
    }

    .e-rte-format-painter::before {
      content: '\e98b';
    }

    .e-rte-export-pdf::before {
      content: '\e14f';
    }

    .e-rte-import-doc::before {
      content: '\e150';
    }

    .e-rte-export-doc::before {
      content: '\e151';
    }
  }

  .e-rtl {
    .e-rte-toolbar,
    .e-rte-dropdown-popup {

      .e-unorder-list::before {
        content: '\e997';
      }

      .e-order-list::before {
        content: '\e998';
      }

      .e-indent::before {
        content: '\e999';
      }

      .e-outdent::before {
        content: '\e99a';
      }
    }
  }

  .e-richtexteditor {
    .e-south-east::before,
    .e-south-west::before {
      content: '\eb08';
    }
  }

  .e-cell-merge::before {
    content: '\e89a';
  }

  .e-cell-horizontal-split::before {
    content: '\e89b';
  }

  .e-cell-vertical-split::before {
    content: '\e89d';
  }

  .e-table-cell::before {
    content: '\e89c';
  }

  .e-rte-cursor-brush {
    cursor: $rte-format-painter-cursor;
  }
}

.e-bigger .e-richtexteditor,
.e-richtexteditor.e-bigger {
  &.e-rte-full-screen {

    iframe {
      height: calc(100% - 56px);
    }

    .e-rte-edit-table {
      max-height: $rte-big-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-edit-table-prop-dialog {
      max-height: $rte-big-edit-table-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-link-dialog {
      max-height: $rte-big-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-dialog {
      min-height: $rte-big-img-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-link-dialog {
      max-height: $rte-big-img-link-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-size-dialog {
      max-height: $rte-big-img-size-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-rte-img-alt-dialog {
      min-height: $rte-big-img-alt-dlg-max-height !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  .e-dialog.e-rte-dialog-minheight {
    @if $theme-name != 'fluent2-highcontrast' {
      min-height: $rte-big-dialog-min-height;
    }
    @if $theme-name == 'fluent2-highcontrast' {
      min-height: $rte-big-dialog-fluent-min-height;
    }
  }
  .e-rte-content .e-content {
    font-size: $rte-big-content-font-size;
  }
  .e-dialog .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
    margin-top: $rte-big-img-upload-abort-icon-btn-margin-top;
    padding: $rte-big-img-upload-abort-icon-btn-padding;
  }
  .e-rte-dropdown-popup.e-rte-dropdown-items ul {
    max-height: 360px;
    overflow-y: auto;
  }

  .e-dialog .e-img-uploadwrap .e-droptext,
  .e-dialog .e-aud-uploadwrap .e-droptext,
  .e-dialog .e-vid-uploadwrap .e-droptext,
  .e-dialog .e-word-uploadwrap .e-droptext {
    height: $rte-big-drop-text-height;
  }
}

.e-bigger {
  .e-rte-emojipicker-popup.e-popup.e-popup-open {
    // min-width: 120px; //Not affecting the UI after removal
    min-height: $rte-big-emoji-popup-open-min-height;
    min-width: $rte-big-emoji-popup-open-width;

    .e-toolbar .e-toolbar-item .e-tbar-btn {
      border-radius: $rte-big-emojipicker-tbar-btn-border-radius;
      padding: $rte-big-toolbar-tbar-btn-padding;
      @if $skin-name =='material' or $skin-name =='material-dark' {
        padding: $rte-big-toolbar-tbar-btn-small-padding;
      }
      @else {
        padding: $rte-big-toolbar-tbar-btn-large-padding;
      }

      &:hover {
        padding: $rte-big-toolbar-tbar-btn-hover-padding;
      }

      &:active {
        padding: $rte-big-toolbar-tbar-btn-active-padding;
      }

      .e-tbar-btn-text {
        @if $skin-name =='fluent2' {
          font-size: $rte-big-emoji-popup-small-font-size;
        }
        @else {
          font-size: $rte-big-emoji-popup-large-font-size;
        }
        padding: $rte-big-emoji-popup-padding;
      }
    }

    .e-rte-emojipicker-btn {
      gap: $rte-big-emoji-btn-gap;
      height: $rte-big-emoji-btn-height;
      padding: $rte-big-emoji-btn-padding;

      .e-rte-emojipicker-group .e-rte-emojipickerbtn-group {
        gap: $rte-big-emoji-btn-group-gap;

        .e-btn.e-control {
          padding: $rte-big-emoji-btn-group-padding;
          // width: 42px; //2. emoji picker dynamic issue
          // height: 42px;//2. emoji picker dynamic issue
          // line-height: 0;//No UI affected so removed
          @if $skin-name =='fluent2' {
            font-size: $rte-big-emoji-btn-group-small-font-size;
          }
          @else {
            font-size: $rte-big-emoji-btn-group-large-font-size;
          }
        }
      }

      .e-rte-emojisearch-btn {
        gap: $rte-big-emoji-search-btn-gap;

        .e-btn.e-control {
          font-size: $rte-big-emoji-picker-group-font-size;
          padding: $rte-big-emoji-picker-group-padding;
          // width: 40px; //2. emoji picker dynamic issue
          // height: 40px; //2. emoji picker dynamic issue
          border: $rte-emoji-grp-btn-border;
          // line-height: 0;//No UI affected so removed
        }
      }

      .e-rte-emojipicker-group .e-rte-emojipicker-name {
        font-weight: $rte-big-emoji-picker-name-font-weight;
        font-size: $rte-big-emoji-picker-name-font-size;
      }
    }
  }
  .e-rte-dropdown-popup {
    ul {
      min-width: 84px;
    }
  }

  .e-rte-edit-table .e-rte-field {
    padding-top: $rte-big-insert-dialog-label-padding-top;
  }
  .e-rte-table-popup.e-popup-open{
    .e-rte-tablecell {
      height: $rte-big-tablecell-height;
      width: $rte-big-tablecell-width;
    }
    .e-rte-table-row {
      height: $rte-big-table-row-height;
    }
  }
  .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor,
  &.e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
    background-size: 700px 190px;
    min-height: 190px;
  }
}

.e-bigger {
  .e-rte-quick-popup.e-rte-elements {
    .e-rte-quick-toolbar.e-rte-toolbar.e-toolbar {
      min-height: $rte-big-quick-toolbar-min-height;
      min-width: $rte-big-quick-toolbar-min-width;
      .e-toolbar-items:not(.e-tbar-pos) {
        min-height: $rte-big-quick-toolbar-items-not-tbar-pos-min-height;
        min-width: $rte-big-quick-toolbar-items-not-tbar-pos-min-width;
        margin: $rte-quick-big-popup-outer-margin;
        .e-toolbar-item {
          margin: $rte-big-quick-toolbar-item-margin;
          min-height: $rte-big-popup-toolbar-item-min-height;
          min-width: $rte-big-popup-toolbar-item-min-width;
          padding: $rte-quick-big-popup-inner-padding;
        }
      }
    }
  }
}

.e-bigger {
  .e-richtexteditor .e-rte-toolbar .e-toolbar-item {
    .e-split-btn-wrapper,
    .e-rte-dropdown-menu {
      min-height: $rte-big-split-btn-height;
    }
  }

  .e-rte-quick-popup {
    .e-rte-tip-pointer {
      &.e-rte-tip-top::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        @if $theme-name == 'Material3' {
          border-bottom: 14px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-bottom: 14px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-bottom: 14px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-bottom: 14px solid $content-bg-color-alt2;
        }
        @else {
          border-bottom: 14px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-top::after {
        border-left: 9.5px solid transparent;
        border-right: 9.5px solid transparent;
        border-bottom: 13px solid $rte-quick-toolbar-tip-pointer-content;
      }
      &.e-rte-tip-bottom::before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        @if $theme-name == 'Material3' {
          border-top: 14px solid rgb(244, 242, 247);
        }
        @else if $theme-name == 'Material3-dark' {
          border-top: 14px solid rgb(44, 42, 54);
        }
        @else if $theme-name == 'bootstrap5' {
          border-top: 14px solid $content-bg-color;
        }
        @else if $theme-name == 'bootstrap5-dark' {
          border-top: 14px solid $content-bg-color-alt2;
        }
        @else {
          border-top: 14px solid $rte-quick-toolbar-tip-pointer-border;
        }
      }
      &.e-rte-tip-bottom::after {
        border-left: 9.5px solid transparent;
        border-right: 9.5px solid transparent;
        border-top: 13px solid $rte-quick-toolbar-tip-pointer-content;
      }
    }
  }
}

// Skin Base Styles
@if $skin-name == 'tailwind' {
  .e-bigger .e-richtexteditor .e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'fabric-dark' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'bootstrap' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 50px;
  }
}
@if $skin-name == 'bootstrap5' {
  .e-bigger .e-richtexteditor .e-rte-toolbar.e-toolbar .e-hor-nav{
    min-height: 46px;
  }
}
@if $skin-name == 'Material3' {
  .e-bigger .e-richtexteditor,
  .e-richtexteditor.e-bigger {
    .e-dialog {
      border-radius: $rte-big-dialog-border-radius;
    }
  }

  .e-bigger {
    .e-rte-container{
      border-radius: $rte-big-container-border-radius;
    }
    .e-richtexteditor{
      .e-toolbar .e-hor-nav {
        border-radius: $rte-big-toolbar-border-radius;
      }
      .e-rte-content {
        border-radius: $rte-big-toolbar-container-border-radius;
      }
    }
    .e-richtexteditor .e-toolbar-wrapper{
      border-radius: $rte-big-toolbar-wrapper-border-radius;
    }
  }
}
@if $skin-name == 'fluent2' {
  .e-bigger .e-richtexteditor {
    .e-toolbar .e-hor-nav{
      min-height: 48px;
    }
  }
}

//toolbar popup min height over riding start
.e-bigger .e-richtexteditor .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup {
  min-height: $rte-big-popup-item-min-height;
}

.e-bigger .e-richtexteditor {
  .e-rte-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-pop:not(.e-toolbar-extended) .e-toolbar-item.e-toolbar-popup,
  .e-rte-toolbar .e-toolbar-item,
  .e-rte-toolbar .e-toolbar-items .e-toolbar-item {
    .e-tbar-btn.e-btn {
      min-height: $rte-big-split-btn-height;
      min-width: $rte-big-split-btn-height;
      padding: $rte-big-split-tbar-btn-padding; //4.toolbar tbar-btn padding need to confirm and remove
      &:hover,
      &:active,
      &:focus,
      &.e-active {
        border: $rte-hover-split-btn-border;
        padding: $rte-big-split-tbar-btn-hover-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
      .e-icons {
        padding: $rte-big-split-tbar-btn-icons-padding; //4.toolbar tbar-btn padding need to confirm and remove
      }
    }
    .e-tbar-btn:not(:hover):not(:focus):not(:active):not(.e-active) {
      border: $rte-split-btn-border;
    }
  }
}

.e-bigger {
  .e-dialog.e-rte-table-popup.e-popup.e-popup-open {
    min-height: $rte-table-popup-min-height !important; /* stylelint-disable-line declaration-no-important */
  }
}

//toolbar popup min height over riding end

//Layout styles
@if $skin-name == 'Material3' {
  .e-bigger .e-richtexteditor.e-rte-tb-expand {
    border-radius: $rte-big-tb-expand-border-radius;
  }
  .e-bigger .e-richtexteditor .e-toolbar-wrapper {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar.e-extended-toolbar,
  .e-bigger .e-richtexteditor.e-rte-tb-expand .e-rte-toolbar .e-toolbar-extended {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rte-toolbar .e-toolbar-items {
    border-top-left-radius: $rte-toolbar-items-top-left-border-radius;
  }
  .e-bigger .e-rte-toolbar .e-hor-nav {
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-hor-nav {
    border-top-left-radius: $rte-top-left-border-radius;
    border-top-right-radius: $rte-top-right-border-radius;
  }
  .e-bigger .e-rtl .e-rte-toolbar .e-toolbar-items {
    border-top-right-radius: $rte-toolbar-items-top-left-border-radius;
  }
}

.e-bigger .e-rte-elements.e-popup-open.e-rte-slashmenu .e-list-parent > li {
  padding-left: $rte-big-slashmenu-li-padding-left;
}

.e-bigger {
  .e-richtexteditor {

    .e-rte-toolbar .e-hor-nav.e-expended-nav {
      height: $rte-big-expended-nav-min-height; //used toolbar component nav default min-height
      min-height: $rte-big-expended-nav-min-height; //used toolbar component nav default min-height
    }

    .e-rte-content,
    .e-source-content,
    .e-rte-iframe-content {
      .e-content {
        line-height: $rte-big-content-height;

        blockquote {
          font-size: $rte-big-content-font-size;
        }

        h1 {
          font-size: $rte-big-content-h1-font-size;
          line-height: $rte-big-content-h1-line-height;
        }

        h2 {
          font-size: $rte-big-content-h2-font-size;
          line-height: $rte-big-content-h2-line-height;
        }

        h3 {
          font-size: $rte-big-content-h3-font-size;
          line-height: $rte-big-content-h3-line-height;
        }

        h4 {
          font-size: $rte-big-content-h4-font-size;
          line-height: $rte-big-content-h4-line-height;
        }

        h5 {
          font-size: $rte-big-content-h5-font-size;
          line-height: $rte-big-content-h5-line-height;
        }

        h6 {
          font-size: $rte-big-content-h6-font-size;
          line-height: $rte-big-content-h6-line-height;
        }

        h3 + h4 {
          margin-top: $rte-big-content-h3-h4-tag-margin-top;
        }

        h4 + h5 {
          margin-top: $rte-big-content-h4-h5-tag-margin-top;
        }

        h5 + h6 {
          margin-top: $rte-big-content-h5-h6-tag-margin-top;
        }
      }
    }
  }
  .e-rte-dropdown-popup {
    ul {
      .e-item {
        &.e-h1 {
          font-size: $rte-big-content-ul-h1-font-size;
        }

        &.e-h2 {
          font-size: $rte-big-content-ul-h2-font-size;
        }

        &.e-h3 {
          font-size: $rte-big-content-ul-h3-font-size;
        }

        &.e-h4 {
          font-size: $rte-big-content-ul-h4-font-size;
        }

        &.e-h5 {
          font-size: $rte-big-content-ul-h5-font-size;
        }

        &.e-h6 {
          font-size: $rte-big-content-ul-h6-font-size;
        }
      }
    }
  }
}

$gantt-header-bg-color: $grey-base !default;
$gantt-header-border-color: $grey-88 !default;
$gantt-header-color: $grey-dark-font !default;
$gantt-context-menu-icon-color: $grey-dark-font !default;
$gantt-grid-line-color: $grey-88 !default;
$gantt-label-color: rgba($grey-light-font, .87) !default;
$gantt-content-color: rgba($grey-light-font, .87) !default;
$holiday-background: $grey-light !default;
$progress-handler-outline: $brand-primary-font !default;
$progress-handler-background: $gray-dark !default;
$holiday-label-color: $grey-dark-font !default;
$holiday-label-font-size: 13px !default;
$weekend-background: $grey-light !default;
$event-marker-line-color: $brand-primary !default;
$event-marker-label-color: #cae8ff !default;
$event-marker-label-font-color: #004a8c !default;
$event-marker-label-font-size: 12px !default;
$event-marker-label-padding: 7px 12px !default;
$event-marker-label-height: 30px !default;
$event-marker-label-arrow-top: 60px !default;
$connector-line-color: $brand-primary !default;
$connector-line-hover-color: $brand-primary !default;
$connector-node-border-color: $grey-base !default;
$connector-false-line-color: $brand-primary !default;
$connector-node-hover-color: #21527d !default;
$critical-connector-line-color: #d13438 !default;
$critical-connector-line-hover-color: #f3d8da !default;
$connector-node-hover-bg-color: $grey-e6 !default;
$connector-node-hover-border-color: $brand-primary !default;
$gantt-connector-point-margin-radius: 4px !default;
$gantt-connector-point-left: 8px !default;
$gantt-unscheduled-taskbar-left: 3px !default;
$gantt-unscheduled-taskbar-right-radius: 2px !default;
$gantt-unscheduled-taskbar-straight-radius: 2px !default;
$gantt-unscheduled-taskbar-curved-radius: 0 !default;
$gantt-label-size: 13px !default;
$gantt-header-border-spacing: 0 !default;
$gantt-line-container-cell-border-color: $grey-88 !default;
/* stylelint-disable */
$gantt-unscheduled-taskbar-background: linear-gradient(to right, rgba($brand-primary, 0.2 ), $brand-primary 30%, $brand-primary 70%, $brand-primary 70%, rgba($brand-primary, 0.2 ) 100%) !default;
$gantt-unscheduled-critical-taskbar-background: linear-gradient(to right, rgba(285,85,85, 0.2), #D13438 30%, #D13438 70%, #D13438 70%, rgba(285,85,85, 0.2) 100%) !default;
$gantt-unscheduled-critical-taskbar-background-color: rgba(285,85,85, .2) !default;
$gantt-critical-child-task-bar: #F3D8DA !default;
$gantt-critical-child-progress-bar: #D13438 !default;
$gantt-critical-child-task-bar-border: 1px solid #F3D8DA !default;
$gantt-unscheduled-milestone-top-border: #dadada !default;
$gantt-unscheduled-milestone-bottom-border: #dadada !default;
$gantt-child-task-bar:  color.adjust($brand-primary, $lightness: 10%)  !default;
$gantt-child-progress-bar: $brand-primary !default;
$gantt-child-progress-bar-border: 0px solid $brand-primary !default;
$gantt-child-progress-bar-border-radius:3px;
$gantt-empty-taskbar-background-color: rgba(0, 112, 240, .15);
$gantt-empty-taskbar-border-color: rgba(0, 112, 240, .65) !important;
$gantt-child-task-bar-border: 1px solid $brand-primary !default;
$gantt-manualchild-task-bar: #8dd1c4;
$gantt-manualchild-progress-bar: #67c1b2;
$gantt-manualchild-progress-bar-border: #4fb29f;
$gantt-manualchild-task-bar-border: #4fb29f;
$gantt-manualparent-background-color: #989A9C;
$gantt-unscheduledmanualparent-background-color: linear-gradient(to right, rgba(63, 81, 181, 0.2), #989A9C 30%, #989A9C 70%, #989A9C 70%, rgba(63, 81, 181, 0.2) 100%) !default;
$gantt-unscheduled-manualtaskbar-background: linear-gradient(to right, rgba(63,81,181, 0.2), #8dd1c4 30%, #8dd1c4 70%, #8dd1c4 70%, rgba(63,81,181, 0.2) 100%) !default;
$gantt-parent-task-bar: #029f90 !default;
$gantt-parent-progress-bar: #4cc7ba !default;
$gantt-milestone-border-color: #dadada !default;
$gantt-critical-milestone-border-color: #D13438 !default;
$gantt-parent-milestone-border-color: #4cc7ba !default;
$gantt-parent-progress-bar-border: 0px solid #4cc7ba !default;
$gantt-parent-task-bar-border: 1px solid #4cc7ba !default;
$gantt-unscheduled-taskbar-border-radius: 4px !default;
$gantt-connector-point-right-margin-left: 3px !default;
$gantt-connector-point-left-margin-right: 3px !default;
$gantt-right-label-container-margin-left: 25px !default;
$gantt-task-label-font-size: 12px !default;
$gantt-label-font-size: 14px !default;
$gantt-bigger-label-font-size: 14px !default;
$gantt-label-font-color: $grey-dark-font !default;
$gantt-task-label-font-color: $brand-primary-font !default;
$gantt-tab-header-active-font-color: $grey-light-font !default;
$gantt-tab-header-font-color: $brand-primary-font !default;
$gantt-edit-icon-color: $brand-primary-font !default;
$gantt-icons-color: $brand-primary-font;
$gantt-unscheduled-taskbar-border: 0px !default;
$gantt-timeline-top-headercell-font-size: 14px !default;
$gantt-timeline-top-headercell-font-weight: bold !default;
$gantt-dialog-general-height: 241px !default;
$gantt-dialog-edit-form-odd-padding: 16px 18px 0 18px !default;
$gantt-dialog-edit-form-even-padding: 16px 16px 0 0 !default;
$gantt-dialog-edit-form-scroll-padding: 16px 16px 0 0 !default;
$gantt-mobile-bigger-dialog-edit-form-padding: 16px 12px 0 16px !default;
$gantt-bigger-predecessor-dialog-padding: 10px 9px 9px 14px !important;
$gantt-bigger-predecessor-dialog-font-size: 12px;
$gantt-bigger-predecessor-dialog-font-weight: 400 !default;
$gantt-bigger-predecessor-dialog-line-height: 1.8 !default;
$gantt-bigger-tooltip-button-color: $shadow;
$gantt-bigger-tooltip-dialog-color: $grey-light-font;
$gantt-bigger-tooltip-button-text-color: $grey-light-font;
$gantt-bigger-tooltip-dialog-text-color: $shadow;
$gantt-bigger-tooltip-disabled-button-color: #adadad !important;
$gantt-bigger-dialog-edit-form-odd-padding: 16px 12px 0 16px !default;
$gantt-bigger-dialog-edit-form-even-padding: 16px 16px 0 12px !default;
$gantt-bigger-dialog-close-button-size: 12px !important;
$gantt-bigger-dialog-header-padding: 16px 4px 16px 16px !important;
$gantt-bigger-dialog-edit-form-scroll-padding: 16px 18px 0 9px !default;
$gantt-bigger-add-dialog-content-height: 242px !important;
$gantt-bigger-event-arrow-color: $brand-info-light;
$gantt-bigger-event-arrow-font-size: 12px !important;
$gantt-bigger-event-markers-border-radius: 4px !important;
$gantt-bigger-event-markers-height: 26px !important; 
$gantt-bigger-event-arrow-bottom: 6px solid transparent;
$gantt-bigger-event-arrow-right: 6px solid transparent;
$gantt-bigger-event-arrow-top: 6px solid transparent;
$gantt-bigger-event-arrow-top-value: 73px !important;
$gantt-bigger-event-markers-top: 65px !important;
$gantt-bigger-event-markers-padding: 4px 11px 4px 9px !important;
$gantt-bigger-add-dialog-input-height: 76px !important;
$gantt-bigger-add-dialog-input-width: 250px !important; 
$gantt-bigger-add-dialog-input-field-width: 175px !default;
$gantt-bigger-filter-dialog-footer-padding: 16px !important;
$gantt-bigger-add-dialog-footer-padding: 16px !important;
$gantt-bigger-filter-dialog-input-padding: 16px 0 0 !important;
$gantt-bigger-filter-dialog-footer-height: 70px !important;
$gantt-bigger-add-dialog-footer-height: 70px !important;
$gantt-bigger-dialog-width: 556px !important;
$gantt-bigger-filter-dialog-width: 350px !important;
$gantt-dialog-bigger-input-field: 36px !default;
$gantt-dialog-bigger-input-padding-field: 32px 16px 16px !important;
$gantt-bigger-dialog-input-field-height: 34px !important;
$gantt-bigger-dialog-input-icon: 35px !important;
$gantt-dialog-bigger-border-radius: 6px !important;
$gantt-bigger-dialog-tab-padding-left: 5px !important;
$gantt-bigger-dialog-content-border-radius: 6px 6px 0px 0px !default;
$gantt-dialog-close-button-top: 2px !important;
$gantt-dialog-dependent-height: 161px !default;
$gantt-dialog-resource-height: 202px !default;
$gantt-dialog-rte-height: 241px !default;
$gantt-dialog-rte-content-height: 200px !default;
$gantt-dialog-padding-bottom: 20px !default;
$gantt-dialog-active-tab-background: $gray-base !default;
$gantt-dialog-tab-padding-left: 12px !default;
$gantt-dialog-tab-background: $brand-primary !default;
$gantt-dialog-header-font-color: $brand-primary-font !default;
$gantt-dialog-icon-color: $brand-primary-font !default;
$gantt-dialog-icon-hover-color: transparent !default;
$gantt-dialog-close-icon-hover-color: $grey-dark-font !default;
$gantt-dialog-tab-hover-border-color: transparent !default;
$gantt-dialog-tab-header-border-no-color: transparent !default;
$gantt-tab-header-border-width: 0px;
$gantt-depedent-div-border-bottom: 0px !default;
$gantt-resource-div-border-bottom: 0px !default;
$gantt-richtext-border-bottom: 0px !default;
$gantt-richtext-content-border-bottom: 0px !default;
$gantt-tab-selection-indicator-color: transparent !default;
$gantt-tab-header-hover-color: $grey-dark !default;
$gantt-tab-header-hover-font-color: $grey-dark-font !default;
$gantt-connector-point-width: 12px !default;
$gantt-connector-point-height: 8px !default;
$gantt-connector-left-point-left: -12px !default;
$gantt-parent-progress-bar-border-radius: 4px !default;
$gantt-active-background: $grey-88 !default;
$gantt-active-frozen-background: $grey-88 !default;
$gantt-active-color: $brand-primary-font !default;
$gantt-active-color-opacity: 1 !default;
$gantt-table-background: $grey-base !default;
$connector-node-hover-outerline-color: #75ACDB !default;
$gantt-baseline-color: $brand-warning !default;
$gantt-child-progress-margin-left: 0.5px !default;
$gantt-timeline-single-header-outer-div: 46px !default;
$gantt-chart-timeline-single-header-outer-div: 46px !default;
$gantt-header-border-height: 64px !default;
$gantt-bigger-header-border-height: 64px !default;
$gantt-treegrid-header-border-height: 64px !default;
$gantt-bigger-treegrid-header-border-height: 64px !default;
$gantt-header-border-bottom-width: 1px !default;
$gantt-timeline-top-header-cell-height: 32px !default;
$gantt-bigger-timeline-top-header-cell-height: 32px !default;
$gantt-header-border-radius: 4px !default;
$gantt-splitter-border-top-right-radius: 0px !default;
$gantt-splitter-border-top-left-radius: 0px !default;
$gantt-filter-menu-value-div-padding: 24px !default;
$gantt-dialog-tab-hover-border-bottom: 0px !default;
$gantt-dialog-tab-hover-border-bottom-radius: 0px !default;
$gantt-dialog-border-radius: 6px 6px 0px 0px !default;
$event-marker-line-height: 1.5 !default;
$gantt-inactive-parent: #8A8A8A !default;
$gantt-inactive-child: #D5D5D5 !default;
$gantt-connected-task: color.adjust($brand-primary, $lightness: 20%) !default;
$gantt-active-parent-task: color.adjust(#000000, $lightness: 10%) !default;
$gantt-uptail-border:  #e0e0e0 !default;
$gantt-gridpopup-span: $base-font !default;
$gantt-active-parent-shadow: rgba($gantt-gridpopup-span, 0.5) !default;
$gantt-left-resize-gripper-border: #9e9e9e !default;
$gantt-left-resize-gripper-color: #eee !default;
$gantt-clone-padding: 4px 5px !default;
$gantt-bigger-clone-padding: $gantt-clone-padding !default;
$gantt-cell-border-color: $grey-88 !default;
$gantt-group-clone-box-shadow: 0 0 !default;
$gantt-header-font-size: 12px !default;
$gantt-header-font-weight: 500 !default;
$gantt-drag-clone-font-weight: $gantt-header-font-weight !default;
$gantt-drag-clone-opacity: 1 !default;
$gantt-group-clone-text-align: center !default;
$gantt-clone-prop-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
$gantt-drag-clone-bg-color: $grey-base !default;
$gantt-drag-clone-border-color: $grey-44 !default;
$gantt-drag-clone-color: $header-font-color !default;
$gantt-content-font-color: $grey-dark-font !default;
$gantt-clone-dragdrop-bg-color: $grey !default;
$error-elem-color: #e3165b;
$gantt-border-size: 1px !default;
$gantt-active-container-border: color.adjust($brand-primary, $lightness: 10%) !default;
$grid-active-container-border: 0 0 0 1px color.adjust($brand-primary, $lightness: 10%) inset !default;
$gantt-collapse-progress-width: 0px !important;
$rangecontainer-border-color: #FC7A05;
$gantt-range-container-arc-radius: 2px !default;
$bigger-column-menu-size: 40px !default;
$gantt-masked-table-background-color: #e1dfdd;
$gantt-rowdd-topbottom-border: 1px solid #0070f0 !default;
$gantt-rowdd-boxshadow:  #0070f0 !default;
$gantt-rowdd-childborder-width: 1px 0 0 !default;
$gantt-chartrow-hover-bg-color: $grey-light !default;
$gantt-chartrow-selection-hover-bg-color: color-mix(in srgb, $grey-88, rgba(57, 57, 57, .2)) !default;
$gantt-timelinecell-hover-bg-color: $gray-dark !default;
$gantt-headercell-hover-bg-color: $gray-dark !default;
$gantt-weekendcell-hover-bg-color: $grey-88 !default;
$gantt-virtualtrack-contanier-height: 0 !important;
$gantt-event-markers-border-right: 0 !important;

// Typography variables
$gantt-bigger-dialog-border-radius: 6px;
$gantt-manual-parent-taskbar-border-radius: 50%;
$gantt-baseline-bar-border-radius: 2px;
$gantt-label-border-radius: 3px;

@mixin resizer-styles($display, $position, $top, $width, $index) {
  display: $display;
  position: $position;
  top: $top;
  width: $width;
  z-index: $index;
}

@mixin mask-cell-styles($height,$width,$left,$border-radius) {
  height: $height;
  width: $width;
  left: $left;
  border-radius: $border-radius;
}

@mixin inner-cell-styles($innerheight, $innerwidth, $innerleft) {
  height: $innerheight;
  width: $innerwidth;
  left: $innerleft;
}

@mixin button-styles($back-color,$border-color,$text-color,$font-size,$line-height,$padding) {
  background-color: $back-color;
  border-color: $border-color;
  color: $text-color;
  font-size: $font-size;
  line-height: $line-height;
  padding: $padding;
}

@mixin border-styles($border-radius,$border-height,$border-width) {
  border-radius: $border-radius;
  height: $border-height;
  width: $border-width;
}

@mixin float-styles($direction,$padding-style,$width) {
  float: $direction;
  padding: $padding-style;
  width: $width;
}

@mixin min-styles {
  min-height: $gantt-bigger-dialog-input-icon;
  min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
}

@include export-module('gantt-layout') {

  .e-blazor-gantt-tooltip{
    .e-tip-content{
      overflow-wrap: unset !important; /* stylelint-disable-line declaration-no-important */
      white-space: nowrap !important; /* stylelint-disable-line declaration-no-important */
      word-break: unset !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  @if ($skin-name == 'Material3-dark' or $skin-name == 'Material3'){
    .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon{
      font-size: 16px;
    }}

  .e-gantt-tooltip{
    .e-tip-content{
      text-align: left !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  .e-gantt.e-gantt-rtl{
    .e-connector-line-right-arrow {
      border-left: none !important; /* stylelint-disable-line declaration-no-important */
      border-right-color: $connector-line-hover-color;
    }
    .e-connector-line-left-arrow{
      border-right: none !important; /* stylelint-disable-line declaration-no-important */
      border-left-color: $connector-line-hover-color;
    }
    .e-gantt-chart{
      .e-timeline-header-container{
        border-right: none !important; /* stylelint-disable-line declaration-no-important */
        border-left: 1px solid !important; /* stylelint-disable-line declaration-no-important */
        border-left-color: $gantt-header-border-color !important; /* stylelint-disable-line declaration-no-important */
      }
      .e-timeline-top-header-cell{
        .e-gantt-top-cell-text {
          padding-right: 11px !important; /* stylelint-disable-line declaration-no-important */
          padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
          text-align: right !important; /* stylelint-disable-line declaration-no-important */
        }
      }
      .e-progress-resize-gripper {
        .e-progressbar-handler-element {
          right: 0 !important; /* stylelint-disable-line declaration-no-important */
        }
        .e-progressbar-handler-after{
          right: 1px !important; /* stylelint-disable-line declaration-no-important */
        }
      }
      .e-connectorpoint-right {
        margin-right: 2px !important; /* stylelint-disable-line declaration-no-important */
      }
      .e-event-markers{
        .e-gantt-right-arrow{
          border-left: 5px solid;
          border-right: 0 !important; /* stylelint-disable-line declaration-no-important */
        }
      }
      .e-holiday {
        .e-span {
          transform: rotate(90deg) !important; /* stylelint-disable-line declaration-no-important */
        }
      }
      .e-left-label-container {
        padding-left: 25px !important; /* stylelint-disable-line declaration-no-important */
        padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
      }
      .e-right-label-container {
        margin-right: 25px !important; /* stylelint-disable-line declaration-no-important */
        margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
  .e-gantt-rtl{
    .e-gantt-tooltip-label{
      text-align: right !important; /* stylelint-disable-line declaration-no-important */
    }
    .e-tip-content{
      text-align: right !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  .e-gantt-dialog.e-rtl{
    .e-dlg-closeicon-btn{
      padding: 4px 8px !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  #{&}.e-gantt {
    display: block;
    width: 100%;

    & .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
      left: -5px;
      position: relative;
    }

    .e-cloneproperties {
      border-style: solid;
      border-width: $gantt-border-size;
      box-shadow: $gantt-group-clone-box-shadow;
      font-size: $gantt-header-font-size;
      font-weight: $gantt-drag-clone-font-weight;
      opacity: $gantt-drag-clone-opacity;
      overflow: hidden;
      padding: $gantt-clone-padding;
      text-align: $gantt-group-clone-text-align;
      user-select: none;
      vertical-align: middle;
      white-space: nowrap;
      z-index: 100;

      .e-draganddrop {
        border-spacing: 0;
        font-size: $gantt-header-font-size;
        font-weight: normal;
        overflow: visible;
      }

      .e-bothganttlines {
        border-width: 1px 0 0 1px;
      }
    }

    .e-draganddrop {
      border-width: 0 1px 1px;
      font-weight: normal;
      padding: 0;
    }

    .e-draganddrop .e-rowcell {
      opacity: .95;
    }

    .e-cloneproperties.e-draganddrop table {
      border-spacing: 0;
    }

    .e-icons.e-errorelem {
      display: inline-block;
      padding-left: 10px;
      vertical-align: middle;
    }

    .e-errorelem::before {
      color: $error-elem-color;
      content: '\e22a';
      transform: rotate(180deg);
    }

    & .e-verticallines .e-cloneproperties.e-draganddrop .e-rowdragdrop,
    & .e-bothlines .e-cloneproperties.e-draganddrop .e-rowdragdrop {
      border-bottom: 0;
      border-right: 1px solid $gantt-cell-border-color;
      border-top: 1px solid $gantt-cell-border-color;
    }

    .e-gantt-toolbar {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-style: solid;
      border-width: 1px 1px 0;
    }

    .e-flmenu-valuediv {
      padding-top: $gantt-filter-menu-value-div-padding;
    }

    .e-gantt-splitter {
      .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar {
        margin: 0;
      }

      .e-pane {
        overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-gantt-splitter:has(.e-headercell.e-fltr-icon) {
      overflow: visible !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-temp-content {
      border-left: 1px solid;
    }

    .e-tab {
      border: 0;

      .e-tab-header .e-toolbar-item.e-active {
        border-color: transparent;
      }
    }

    .e-gantt-tree-grid-pane {
      .e-grid {
        border-width: 0;
      }
      .e-grid:has(.e-headercell.e-fltr-icon):not(.e-gantt .e-grid.e-rtl)  {
        position: inherit;
      }
      .e-grid .e-row .e-input-group {
        margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
        margin-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
        @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
          line-height: 100% !important; /* stylelint-disable-line declaration-no-important */
        }
      }
      .e-gantt-temp-header {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        height: 45px;
      }

      .e-headercontent {
        border-right-width: 0 !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-gridheader {
        border-top-style: none;
        border-top-width: 0;
        padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
        padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */

        .e-headercontent .e-table {
          border-spacing: $gantt-header-border-spacing !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-columnheader,
      .e-headercell {
        height: $gantt-treegrid-header-border-height !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-headercell {
        @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind3-dark') {
          padding: 15px 12px !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-gridcontent:not(:has(.e-movablescrollbar)) .e-content {
        overflow-x: scroll !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-gridcontent .e-content.e-gantt-scroll-padding {
        width: calc(100% + 17px);
      }

      .e-gridcontent .e-content.e-yscroll .e-table {
        border-spacing: $gantt-header-border-spacing !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-ganttnotes-info {
        text-align: center;
      }

      .e-icons.e-notes-info {
        display: inline-block;
        font-size: 18px;
        height: 15px;
        line-height: 10px;
        vertical-align: middle;
      }
    }

    .e-gantt-chart {
      height: 100%;
      overflow: hidden;
      position: relative;
      width: 100%;

      .e-chart-empty-row {
        border: .5px solid;
        position: absolute;
        background-color: $gantt-empty-taskbar-background-color;
        border-color: $gantt-empty-taskbar-border-color;
      }

      .e-chart-root-container {
        border-right: 0 solid;

        .e-content {
          -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
          overflow-x: scroll;
          overflow-y: auto;
          position: relative;
          td.e-chart-row-cell.e-droptop{
            border-top: $gantt-rowdd-topbottom-border;
            border-width: $gantt-rowdd-childborder-width;
          }

          td.e-chart-row-cell.e-dropbottom{
            border-bottom: $gantt-rowdd-topbottom-border;
            box-shadow: $gantt-rowdd-boxshadow;
          }

          td.e-chart-row-cell.e-childborder {
            border-bottom: $gantt-rowdd-topbottom-border;
            border-top: $gantt-rowdd-topbottom-border;
            box-shadow: $gantt-rowdd-boxshadow;
          }
        }

        .e-nonworking-day-container {
          position: absolute;
          height: 100%;
        }

        .e-event-markers-container {
          position: absolute;
          height: 100%;
        }

        .e-holiday-container {
          height: 100%;
          position: absolute;
        }

        .e-weekend-container {
          height: 100%;
          position: absolute;
        }
      }

      .e-timeline-header-container {
        border-bottom-style: solid;
        border-right: 1px solid;
        overflow: hidden;
        position: relative;
        z-index: 6;
      }

      .e-timeline-header-table-container:last-child thead tr td {
        border-bottom: $gantt-event-markers-border-right; /* stylelint-disable-line declaration-no-important */
      }
      .e-timeline-header-table-container:last-child thead tr th {
        border-bottom: $gantt-event-markers-border-right; /* stylelint-disable-line declaration-no-important */
      }

      .e-timeline-header-table-container thead tr th {
        border-left: 0;
      }

      .e-timeline-header-table-container thead tr td {
        border-left: 0;
      }

      .e-timeline-header-table-container {
        border-collapse: collapse;
        border-spacing: 0;
        border-width: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        display: block;
      }

      .e-timeline-header-table-body {
        border-collapse: collapse;
        box-sizing: border-box;
        transform: scale(1);
        white-space: nowrap;
        display: block;
      }

      .e-timeline-header-table-body > tr {
        display: inline-flex;
      }

      .e-timeline-top-header-cell,
      .e-timeline-single-header-cell {
        border-spacing: 0;
        border-style: solid;
        border-top: 0;
        border-width: 1px;
        box-sizing: border-box;
        display: inline-flex;
        font-size: $gantt-timeline-top-headercell-font-size;
        font-weight: $gantt-timeline-top-headercell-font-weight;
        margin: 0;
        padding: 0;
        position: static;
        text-align: center;
        user-select: none;
        white-space: nowrap;

        .e-header-cell-label {
          box-sizing: border-box;
          margin: auto;
          overflow: hidden;
          position: static;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        @if ($theme-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'fluent2-dark') {
          .e-gantt-top-cell-text {
            padding-left: 8px;
            text-align: left;
          }
        }
        @else {
          .e-gantt-top-cell-text {
            padding-left: 11px;
            text-align: left;
          }
        }
      }

      .e-gantt-grid-lines {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-collapse: collapse;
        border-spacing: 0;
        box-sizing: border-box;
      }

      .e-zero-spacing {
        border-spacing: 0;
      }

      .e-chart-row:first-child .e-chart-row-border {
        //border-width: 0;
        border-top: 0;
      }

      .e-chart-row {
        .e-chart-row-border {
          border-collapse: separate;
          border-style: solid;
          border-width: 1px 0 0;
        }

        .e-chart-row-cell {
          font-size: 0;
          padding: 0;
        }

        .e-chart-row-border.e-lastrow {
          border-bottom-width: 1px;
        }

        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          line-height: normal;
        }
        display: table-row;
      }

      .e-line-container-cell {
        border-right-style: solid;
        border-right-width: 1px;
        height: 100%;
        position: absolute;
      }

      .e-taskbar-main-container {
        cursor: move;
        display: inline-block;
        position: absolute;
        vertical-align: middle;
        z-index: 3;
      }

      .e-taskbar-main-container.e-gantt-multi-taskbar:hover {
        z-index: 4;
      }

      .e-left-label-container.e-left-label-temp-container {
        align-items: center;
        display: inline-flex;
        justify-content: flex-end;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-right-label-container.e-right-label-temp-container {
        align-items: center;
        display: inline-flex;
        float: left;
        outline: none;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-left-label-container {
        display: inline-block;
      }

      .e-left-label-inner-div,
      .e-right-label-container {
        overflow: hidden;
      }

      .e-left-label-inner-div {
        align-items: center;
        display: inline-flex;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
      }

      .e-label {
        margin: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-right-label-container {
        background-color: transparent;
        display: inline-block;
        margin: 0;
        position: absolute;
      }

      .e-right-label-inner-div {
        align-items: center;
        display: inline-flex;
        float: left;
        outline: none;
        overflow: hidden;
        height: 100%;
      }

      .e-indicator-span {
        display: inline-block;
        font-size: 13px;
        font-weight: normal;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
      }

      .e-gantt-child-taskbar,
      .e-gantt-parent-taskbar,
      .e-gantt-child-progressbar,
      .e-gantt-parent-progressbar,
      .e-gantt-milestone,
      .e-gantt-parent-milestone,
      .e-gantt-manualparent-milestone {
        display: inline-block;
        width: 100%;
      }
      .e-gantt-parent-milestone {
        position: absolute;
        transform: rotate(45deg);
      }
      .e-gantt-milestone{
        @if $skin-name =='Material3'{
          border: 1px;
          border-style: solid;
        }
        position: absolute;
        transform: rotate(45deg);
      }

      .e-manualparent-main-container {
        background-color: transparent;
        cursor: move;
        margin-top: -5px;
        position: absolute;
      }

      .e-gantt-manualparent-taskbar {
        margin-top: 3px;
      }

      .e-gantt-split-container-line {
        @if ($theme-name == 'material-dark' or $theme-name == 'fabric-dark') {
          border-color: $gantt-active-background-color;
        }
        @else {
          @if $skin-name =='Material3'{
            border-color: $gantt-split-container-line-border-color;
          }
          @else{
            border-color: inherit;
          }
        }
        @if $skin-name =='Material3' or $skin-name =='Material3-dark'{
          border-top-style: dashed;
        }
        @else{
          border-top-style: dotted;
        }
        border-top-width: 2px;
        height: 0;
        left: 2px;
        pointer-events: none;
        position: absolute;
        top: 50%;
        width: calc(100% - 5px);
      }

      .e-gantt-child-taskbar-inner-div,
      .e-gantt-parent-taskbar-inner-div {
        border-spacing: 0;
        box-sizing: border-box;
        margin: auto;
        overflow: hidden;
        padding: 0;
        z-index: 3;
      }

      .e-gantt-parent-progressbar-inner-div {
        z-index: 3;
      }

      .e-gantt-child-progressbar-inner-div,
      .e-gantt-parent-progressbar-inner-div {
        box-sizing: border-box;
        text-align: right;
        border-style: solid;
        height: 100%;
      }

      .e-chart-scroll-container,
      .e-chart-rows-container {
        user-select: none;
      }

      .e-chart-scroll-container {
        position: relative;
        height: 100%;
      }

      .e-chart-rows-container {
        line-height: initial;
        position: relative;
        overflow: hidden;
      }

      .e-masked-tbody {
        table-layout: fixed;
        width: 100%;
      }

      .e-div-background {
        border-color: $gantt-masked-table-background-color;
        border-right-style: solid;
        border-right-width: 1px;
        height: 100%;
        position: absolute;
      }

      .e-innerHTML {
        @include inner-cell-styles(16px,16px,14px);
      }

      .e-innerHTML1 {
        @include inner-cell-styles(16px,16px,30px);
      }

      .e-innerHTML2 {
        @include inner-cell-styles(16px,16px,60px);
      }

      .e-timelineHeader {
        @include inner-cell-styles(16px,82px,20px);
      }

      .e-maskcell01 {
        @include mask-cell-styles(12px, 88px, 14px, 0);
      }

      .e-maskcell02 {
        @include border-styles(0, 18px, 410px);
      }

      .e-maskcell03 {
        @include mask-cell-styles(12px, 88px, 14px, 0);
      }

      .e-maskcell04 {
        @include border-styles(0, 18px, 208px);
      }

      .e-maskcell05 {
        @include mask-cell-styles(12px, 108px, 64px, 0);
      }

      .e-maskcell06 {
        @include mask-cell-styles(18px, 195px, 192px, 0);
      }

      .e-maskcell07 {
        @include mask-cell-styles(18px, 156px, 388px, 0);
      }

      .e-taskbar-left-resizer,
      .e-taskbar-right-resizer {
        @include resizer-styles(inline-block,absolute,0,10px,4);
      }

      .e-child-progress-resizer {
        display: inline-block;
        height: 15px;
        position: absolute;
        top: 0;
        width: 20px;
        z-index: 5;
      }

      .e-progress-resize-gripper {
        cursor: col-resize;

        .e-progressbar-handler {
          border-width: 1px;
          box-sizing: content-box;
          cursor: col-resize;
          height: 2px;
          position: absolute;
          top: 7px;
        }

        .e-progressbar-handler-element {
          border-bottom-style: solid;
          border-bottom-width: 8px;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          cursor: col-resize;
          height: 0;
          left: 1px;
          position: absolute;
          top: -7px;
          width: 0;
        }

        .e-progressbar-handler-after {
          border-bottom-style: solid;
          border-bottom-width: 8px;
          border-left: 6px solid transparent;
          border-right: 6px solid transparent;
          cursor: col-resize;
          height: 0;
          left: 2px;
          position: absolute;
          top: -7px;
          width: 0;
        }
      }
      @if ($theme-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'fluent2-dark') {
        .e-baseline-bar {
          border-radius: $gantt-baseline-bar-border-radius;
        }
      }
      @else {
        .e-baseline-bar {
          border-radius: $gantt-baseline-bar-border-radius;
        }
      }

      .e-baseline-bar {
        box-sizing: border-box;
        position: absolute;
        z-index: 2;
      }

      .e-milestone-top,
      .e-parent-milestone-top,
      .e-manualparent-milestone-top {
        border-style: none solid solid;
        border-top: 0;
      }

      .e-milestone-top,
      .e-milestone-bottom,
      .e-parent-milestone-top,
      .e-parent-milestone-bottom,
      .e-manualparent-milestone-top,
      .e-manualparent-milestone-bottom {
        border-left-color: transparent;
        border-right-color: transparent;
      }

      .e-milestone-bottom,
      .e-parent-milestone-bottom,
      .e-manualparent-milestone-bottom {
        border-bottom: 0;
        border-style: solid solid none;
      }

      .e-baseline-gantt-milestone-container {
        position: absolute;
        z-index: 2;
        transform: rotate(45deg);
        @if $skin-name =='Material3'{
          border: 2px;
          border-color: $gantt-baseline-color;
          border-style: solid;
        }
      }

      .e-task-label {
        display: inline;
        font-weight: normal;
        margin-left: 8px;
        margin-right: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
      }

      .e-task-label-inner-div {
        align-content: center;
        height: 100%;
      }

      .e-task-table {
        overflow: hidden;
        border-collapse: separate;
        position: absolute;
      }

      .e-left-resize-gripper,
      .e-right-resize-gripper {
        align-items: center;
        cursor: ew-resize;
        display: inline-flex;
      }

      .e-holiday {
        display: inline-block;
        position: absolute;
        height: 100%;
        .e-span {
          position: absolute;
          transform: rotate(-90deg);
          white-space: nowrap;
          width: 0;
          top: calc(100% - 50%);
        }
      }

      .e-weekend {
        display: inline-block;
        position: absolute;
        z-index: 0;
        height: 100%;
      }

      .e-rangecontainer {
        position: absolute;

        .e-leftarc {
          border-bottom-left-radius: $gantt-range-container-arc-radius;
          border-top-left-radius: $gantt-range-container-arc-radius;
          position: absolute;
        }

        .e-rightarc {
          border-bottom-right-radius: $gantt-range-container-arc-radius;
          border-top-right-radius: $gantt-range-container-arc-radius;
          position: absolute;
        }
      }

      .e-event-markers {
        border-left: 1px dashed;
        position: absolute;
        width: 1px;
        z-index: 4;
        height: 100%;
        .e-span-label {
          border-radius: $gantt-label-border-radius;
          font-weight: 500;
          height: $event-marker-label-height;
          line-height: $event-marker-line-height;
          padding: $event-marker-label-padding;
          position: absolute;
          top: 50px;
          white-space: nowrap;
          width: auto;
          z-index: 2;
        }

        .e-gantt-right-arrow {
          border-bottom: 5px solid transparent;
          border-right: 5px solid;
          border-top: 5px solid transparent;
          height: 0;
          position: absolute;
          top: $event-marker-label-arrow-top;
          width: 0;
        }
      }

      .e-gantt-unscheduled-taskbar {
        border-radius: 0;
        border-style: none;
        display: inline-block;
      }

      .e-connector-line-right-arrow {
        border-left-style: solid;
        border-left-width: 10px;
      }

      .e-connector-line-left-arrow {
        border-right-style: solid;
        border-right-width: 10px;
      }

      .e-connector-line-right-arrow,
      .e-connector-line-left-arrow {
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
      }

      .e-connector-line-container {
        z-index: 5;
        pointer-events: stroke;
      }

      .e-connector-line-z-index {
        z-index: 1;
      }

      .e-connector-line-hover,
      .e-critical-connector-line-hover {
        outline: 1px solid;
      }

      .e-connector-line-hover-z-index {
        z-index: 100;
      }

      .e-connectortouchpoint {
        background-color: transparent;
        display: block;
        position: absolute;
        z-index: 5;
      }

      .e-connectorpoint-right,
      .e-connectorpoint-left,
      .e-right-connectorpoint-outer-div,
      .e-left-connectorpoint-outer-div {
        border-radius: $gantt-manual-parent-taskbar-border-radius;
        display: inline-block;
        position: absolute;
      }

      .e-connectorpoint-left-hover,
      .e-connectorpoint-right-hover {
        border-style: solid;
        border-width: 1px;
        box-sizing: content-box;
        cursor: pointer;
        display: inline-block;
      }

      .e-connectorpoint-allow-block {
        cursor: no-drop;
      }

      .e-gantt-manualparenttaskbar-left,
      .e-gantt-manualparenttaskbar-right {
        background-color: $gantt-manualparent-background-color;
        border-color: $gantt-manualparent-background-color;
        border-radius: $gantt-manual-parent-taskbar-border-radius;
        display: inline-block;
        height: 10px;
        margin: -1px;
        position: absolute;
        width: 10px;
      }

      .e-manualparent-milestone-top,
      .e-manualparent-milestone-bottom {
        border-bottom-color: $gantt-manualparent-background-color;
      }

      .e-gantt-manualparenttaskbar-right {
        cursor: e-resize;
        margin-left: -8px;
      }

      .e-gantt-manualparenttaskbar-left {
        margin-left: 0;
      }

      .e-gantt-manualparenttaskbar {
        background: $gantt-manualparent-background-color;
        margin-top: 3px;
        position: absolute;
      }

      .e-icon {
        font-family: 'e-icons';
        font-size: 13px;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
        vertical-align: middle;
      }

      .e-active-container {
        outline: 1px solid;
        outline-offset: 2px;
      }
    }
  }

  .sf-gantt.e-gantt {
    .e-cloneproperties.e-draganddrop .e-row .e-icon-rowdragicon::before {
      position: relative;
      left: 0 !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-grid .e-row .e-icon-rowdragicon::before {
      text-indent: 0 !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-grid .e-icon-rowdragicon {
      text-align: center !important; /* stylelint-disable-line declaration-no-important */
      text-indent: 0 !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-gantt-dialog .e-tab .e-tab-header {
    padding-left: $gantt-dialog-tab-padding-left;
    @if $skin-name =='fluent2' or $skin-name == 'bootstrap5.3' {
      border-bottom: 1px solid $gantt-header-border-color; /* stylelint-disable-line declaration-no-important */
    }

    @if ($skin-name == 'FluentUI'){
      .e-indicator {
        display: block;
        bottom: 1px;
        height: 3px;
      }
    }
    @else{
      .e-indicator {
        @if $skin-name !='bootstrap5.3'{
          display: block;
        }
      }
    }

    .e-toolbar-item .e-tab-wrap {
      border-style: solid;
      border-width: $gantt-tab-header-border-width;
    }
  }

  .e-gantt-dialog .e-tab .e-tab-header:not(.e-vertical)::before {
    border: 0;
  }

  .e-gantt-dialog .e-edit-form-column .error-message .e-error {
    margin-bottom: 0;
  }

  .e-gantt-dialog .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
    left: 0;
    right: 0;
    margin-inline: auto;
    top: -8px;
  }
  .e-gantt-dialog .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-bottom {
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  .e-gantt-dialog {
    border: 0;

    .e-gridform .e-table {
      border-spacing: 0;
    }

    .e-item {
      height: 100%;
    }

    .e-dependent-div {
      border-bottom-width: $gantt-depedent-div-border-bottom;
    }

    .e-icon-dlg-close {
      opacity: initial;
    }

    .e-toolbar {
      border-top-width: 0;
    }

    .e-resource-div {
      border-bottom-width: $gantt-resource-div-border-bottom;

      .e-gridheader {
        border-top-width: 0;
      }
    }

    .e-edit-form-row:not(:has(.e-richtexteditor)) {
      height: $gantt-dialog-general-height;
      overflow-y: auto;
      position: relative;
    }

    .e-edit-form-row .e-richtexteditor {
      @if ($theme-name == 'fluent2-highcontrast') {
        margin-top: 0;
      }
    }

    .e-edit-form-row .e-grid {
      @if ($theme-name == 'fluent2-highcontrast') {
        bottom: 5px;
      }
    }

    .e-edit-form-column:nth-child(odd) {
      @include float-styles(left, $gantt-dialog-edit-form-odd-padding,50%);
    }

    .e-edit-form-column:nth-child(even) {
      @include float-styles(left, $gantt-dialog-edit-form-even-padding,50%);
    }

    .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
      padding: $gantt-dialog-edit-form-scroll-padding;
    }

    .e-edit-form-column {
      height: 75px;
    }

    .e-dependent-div .e-content {
      height: $gantt-dialog-dependent-height;
    }

    .e-resource-div .e-content {
      height: $gantt-dialog-resource-height;
    }

    .e-richtexteditor {
      border-bottom-width: $gantt-richtext-border-bottom;
      height: $gantt-dialog-rte-height !important; /* stylelint-disable-line declaration-no-important */
      overflow: hidden auto;
      @if ($theme-name == 'fluent2-highcontrast') {
        bottom: 5px;
        margin-top: 5px;
      }
    }

    .e-richtexteditor.e-rte-tb-expand {
      border-top: 0;
    }

    .e-richtexteditor .e-rte-content {
      border-bottom-width: $gantt-richtext-content-border-bottom;
      height: $gantt-dialog-rte-content-height;
      overflow: auto;
    }

    > .e-dlg-content {
      padding: 0 !important; /* stylelint-disable-line declaration-no-important */
      @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark'{
        height: 298px;
      }
      @if $skin-name == 'fluent2' {
        border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name =='bootstrap5.3'{
        padding-top: 10px !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-dlg-header {
      line-height: 30px;
    }

    .e-dlg-header-content {
      @if $skin-name !='bootstrap5.3'{
        border-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-dlg-header-content {
      border-radius: $gantt-dialog-border-radius;
      padding-bottom: $gantt-dialog-padding-bottom;

      .e-btn.e-dlg-closeicon-btn {
        // left: -11px;
        top: $gantt-dialog-close-button-top;
      }

      @if ($skin-name == 'bootstrap-dark'){
        .e-btn.e-dlg-closeicon-btn {
          @include border-styles(50%, auto !important, auto);
          box-shadow: none;
        }
      }
      @else{
        .e-btn.e-dlg-closeicon-btn {
          @include border-styles(50%, auto !important, auto);
        }
      }
    }
  }

  .e-ganttpopup {
    -moz-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
    -ms-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
    -webkit-user-select: none; /* stylelint-disable-line property-no-vendor-prefix */
    font-weight: normal;
    position: absolute;
    user-select: none;
    z-index: 99999;

    .e-rowselect {
      line-height: 18px;
      text-indent: 7%;
    }

    span {
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-block;
      height: 26px;
      padding: 4px;
      width: 26px;
    }

    .e-content {
      border-radius: 4px;
      border-style: solid;
      border-width: 1px;
      font-size: 14px;
      padding: 4px;
    }

    .e-tail::after,
    .e-tail::before,
    .e-ganttpopup {
      border: 10px solid transparent;
      content: '';
      height: 0;
      left: 8px;
      position: absolute;
      width: 0;
    }

    .e-downtail::after {
      top: 34px;
    }
  }

  .e-gantt-tooltip.e-tooltip-wrap {
    opacity: 1;
  }

  .e-gantt-tooltip {
    visibility: hidden;
  }

  .e-gantt .e-cloneproperties.e-draganddrop .e-row .e-rowcell .e-treecolumn-container .e-icons.e-none::before {
    content: '';
  }

  .e-gantt-tooltip-label {
    padding-bottom: 2px;
    padding-right: 2px;
    text-align: left;
  }

  .e-gantt.e-device {
    .e-edit-form-column {
      &:nth-child(odd),
      &:nth-child(even) {
        @include float-styles(none, $gantt-dialog-edit-form-odd-padding,100%);
      }
    }

    .e-edit-form-row {
      height: auto;
    }

    .e-adaptive-searchbar {
      padding: 5px 10px;
      width: 90%;
    }

    .e-backarrowspan {
      font-size: 16px;
      padding: 5px 10px;
    }

    .e-gantt-dialog {
      max-height: none;

      .e-dlg-closeicon-btn {
        float: left;
        left: -4px;
      }

      .e-icon-dlg-close {
        font-size: 16px;
      }

      .e-dlg-header {
        display: inline-block;
      }
    }

    .e-toolbar-item {
      padding: 7px;
    }

    .e-toolbar .e-icons {
      font-size: 18px;
    }

    .e-gridheader .e-icons {
      font-size: 12px;
    }

    .e-dependent-div .e-content {
      height: 100%;
    }

    .e-resource-div .e-content {
      height: 100%;
    }

    .e-richtexteditor {
      height: 100%;

      .e-rte-content {
        height: 100%;
      }
    }
  }

  .e-predecessor-tooltip {
    background-color: $gantt-bigger-tooltip-button-color !important; /* stylelint-disable-line declaration-no-important */
    border-color: $gantt-bigger-tooltip-button-color !important; /* stylelint-disable-line declaration-no-important */
    visibility: hidden;

    .e-arrow-tip-outer.e-tip-bottom {
      border-top: 8px solid $gantt-bigger-tooltip-button-color;
      @if ($skin-name == 'FluentUI')
      {
        border-top: 12.5px solid $gantt-bigger-tooltip-button-color;
      }
      @else if ($skin-name == 'highcontrast'){
        border-top: 7px solid $gantt-bigger-tooltip-button-color;
      }
    }

    .e-arrow-tip-inner.e-tip-bottom {
      color: $gantt-bigger-tooltip-button-color;
    }

    .e-left-btn:disabled,
    .e-right-btn:disabled {
      color: $gantt-bigger-tooltip-disabled-button-color;
    }

    .e-tip-content {
      padding: 3px !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
      @include button-styles($gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-text-color, 12px, 18px,0 8px 0 0);
    }

    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
      @include button-styles($gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-text-color, 12px, 18px,0 0 0 8px);
    }
  }

  .e-predecessor-dialog {
    background-color: $gantt-bigger-tooltip-dialog-color;
    .e-dlg-content {
      background-color: $gantt-bigger-tooltip-dialog-color;
      padding: $gantt-bigger-predecessor-dialog-padding;
      font-size: $gantt-bigger-predecessor-dialog-font-size;
      font-weight: $gantt-bigger-predecessor-dialog-font-weight;
      line-height: $gantt-bigger-predecessor-dialog-line-height;
      color: $gantt-bigger-tooltip-dialog-text-color;
      @if ($skin-name == 'FluentUI') {
        margin-bottom: 0;
      }
    }
  }
  .e-gantt-chart-resize-indicator{
    height: 100%;
    position: absolute;
    z-index: 1;
  }
  .e-template-padding {
    padding: 2px;
  }
}

@mixin background-styles($color,$border-color) {
  background-color: $color;
  border-color: $border-color;
}

$applies-hover-bg: $theme-name == 'bootstrap5.3' or
  $theme-name == 'bootstrap5.3-dark' or
  $theme-name == 'tailwind3' or
  $theme-name == 'tailwind3-dark' or
  $skin-name =='fluent2' or
  $skin-name =='fluent2-dark' or
  $skin-name == 'Material3' or
  $skin-name == 'Material3-dark';

@mixin gantt-hover-bg($color) {
  background-color: $color;
}

@mixin gantt-hover-frozen-bg($color) {
  background: $color;
}

@mixin gantt-hover-bg-check {
  @if $applies-hover-bg {
    @include gantt-hover-bg($gantt-chartrow-hover-bg-color);
  }
}

@mixin gantt-hover-frozen-bg-check {
  @if $applies-hover-bg {
    @include gantt-hover-frozen-bg($gantt-chartrow-hover-bg-color);
  }
}

@mixin gantt-hover-important {
  @if $applies-hover-bg {
    background-color: $gantt-chartrow-hover-bg-color !important; /* stylelint-disable-line declaration-no-important */
  }
}

@mixin border-styles($back-color,$border-color, $border-radius) {
  background-color: $back-color;
  border: $border-color;
  border-radius: $border-radius;
}

@include export-module('gantt-theme') {

  /*! Gantt theme */

  .e-gantt-single-timeline {
    .e-timeline-header-table-body tr {
      height: $gantt-chart-timeline-single-header-outer-div !important; /* stylelint-disable-line declaration-no-important */
    }
    .e-gantt-tree-grid-pane {
      .e-columnheader,
      .e-headercell {
        height: $gantt-timeline-single-header-outer-div !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
  .e-gantt {

    .e-device {
      .e-left-resize-gripper,
      .e-right-resize-gripper {
        border-color: $gantt-left-resize-gripper-border;
        color: $gantt-left-resize-gripper-color;
      }

      .e-backarrowspan {
        color: $gantt-gridpopup-span;
      }
    }

    .e-gantt-splitter {
      border-color: $gantt-header-border-color;
      border-radius: $gantt-header-border-radius;
      .e-split-bar.e-split-bar-horizontal.e-resizable-split-bar {
        @if ($skin-name == 'Material3') {
          background: $content-bg-color-alt2;
          border: solid $border-light;
          border-width: 0 1px;
        }
      }
    }

    .e-grid .e-spinner-pane {
      display: none;
    }

    .e-cloneproperties.e-draganddrop {
      box-shadow: $gantt-clone-prop-box-shadow;
      opacity: .95;
      overflow: visible;
    }

    .e-cloneproperties {
      @include background-styles($gantt-drag-clone-bg-color,$gantt-drag-clone-border-color);
      color: $gantt-drag-clone-color;
    }

    .e-cloneproperties.e-draganddrop .e-rowcell {
      color: $gantt-content-font-color;
    }

    .e-cloneproperties.e-draganddrop table,
    .e-cloneproperties.e-draganddrop table .e-selectionbackground {
      background-color: $gantt-clone-dragdrop-bg-color;
      height: 30px;
    }

    .e-gantt-toolbar + .e-gantt-splitter {
      border-top-left-radius: $gantt-splitter-border-top-left-radius;
      border-top-right-radius: $gantt-splitter-border-top-right-radius;
    }

    .e-temp-content,
    .e-splitter-box,
    .e-gantt-temp-header,
    .e-gantt-chart-pane {
      border-color: $gantt-header-border-color;
    }

    .e-gantt-tree-grid-pane {
      .e-grid.e-gridhover {
        .e-row:not(.e-disable-gridhover):not(.e-editedrow):hover {
          .e-rowcell,
          .e-rowdragdrop {
            &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
              @include gantt-hover-bg-check;
            }
          }
        }

        & .e-row:not(.e-disable-gridhover):not(.e-editedrow):hover {
          .e-rowcell.e-leftfreeze,
          .e-rowcell.e-rightfreeze,
          .e-rowcell.e-unfreeze,
          .e-rowdragdrop.e-leftfreeze,
          .e-rowdragdrop.e-rightfreeze,
          .e-rowdragdrop.e-unfreeze {
            &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
              @include gantt-hover-frozen-bg-check;
            }
          }
        }

        &:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
          @include gantt-hover-important;
        }
      }

      .e-grid td.e-active {
        background: $gantt-active-background;
        opacity: .9;
      }
      .e-grid td.e-active:has(.e-tooltip-wrap) {
        opacity: 1;
      }
      .e-grid td.e-cellselectionbackground {
        @if ($theme-name == 'tailwind3' or $theme-name == 'tailwind3-dark') {
          background: $gantt-active-background;
        }
      }

      .e-grid{
        td.e-active.e-leftfreeze,
        td.e-active.e-unfreeze,
        td.e-active.e-rightfreeze,
        td.e-active.e-fixedfreeze{
          background: $gantt-active-frozen-background;
          opacity: .9;
        }
      }
      .e-grid{
        td.e-active.e-leftfreeze:has(.e-tooltip-wrap),
        td.e-active.e-unfreeze:has(.e-tooltip-wrap),
        td.e-active.e-rightfreeze:has(.e-tooltip-wrap),
        td.e-active.e-fixedfreeze:has(.e-tooltip-wrap){
          opacity: 1;
        }
      }
      .e-headercell-hover .e-headercell:not(.e-active):hover{
        background-color: $gantt-headercell-hover-bg-color;
      }
    }
    .e-taskbar-resize-div {
      border-color: $event-marker-line-color;
    }
    .e-gantt-chart {
      .e-timeline-header-container {
        background: $gantt-header-bg-color;
        border-bottom-color: $gantt-header-border-color;
        border-bottom-width: $gantt-header-border-bottom-width;
        border-right-color: $gantt-header-border-color;
        border-left-color: $gantt-header-border-color;
        color: $gantt-header-color;
      }

      .e-timeline-top-header-cell,
      .e-timeline-single-header-cell {
        border-color: $gantt-header-border-color;
        color: $gantt-header-color;
      }

      .e-timeline-header-table-body tr{
        height: $gantt-timeline-top-header-cell-height;
      }

      .e-timeline-top-header-cell,
      .e-timeline-single-header-cell {
        height: inherit;
      }

      .e-chart-root-container {
        @include background-styles($gantt-table-background,$gantt-header-border-color);
      }

      .e-timeline-header-table-body {
        border-spacing: $gantt-header-border-spacing;
      }

      .e-chart-row-hover .e-chart-row:not(.e-active):hover {
        background-color: $gantt-chartrow-hover-bg-color;
      }
      .e-chart-row-hover .e-chart-row.e-active:hover {
        background-color: $gantt-chartrow-selection-hover-bg-color;
      }
      .e-timeline-cell-hover .e-timeline-top-header-cell:not(.e-active):hover{
        background-color: $gantt-timelinecell-hover-bg-color;
      }
      .e-chart-row-border {
        border-top-color: $gantt-grid-line-color;
      }

      @if ($theme-name == 'fluent2-highcontrast') {
        .e-chart-row.e-active .e-chart-row-cell,
        .e-chart-row-hover .e-chart-row:not(.e-active):hover .e-chart-row-cell {
          color: $gantt-active-color;
        }
      }

      .e-chart-row-cell {
        color: $gantt-content-color;
      }

      .e-chart-row-border.e-lastrow {
        border-bottom-color: $gantt-grid-line-color;
      }

      .e-line-container-cell {
        border-color: $gantt-line-container-cell-border-color;
      }

      .e-active-container {
        outline-color: $gantt-active-container-border;
      }

      .e-gantt-child-taskbar-inner-div {
        background: $gantt-child-task-bar;
        outline: $gantt-child-task-bar-border;
        border-radius: $gantt-parent-progress-bar-border-radius;
      }

      .e-collapse-parent {
        .e-gantt-child-taskbar-inner-div {
          border: 1px solid $gantt-task-label-font-color;
          border-bottom: 0;
          border-top: 0;
        }

        .e-collapsed-taskbar-drag {
          background-color: $gantt-child-progress-bar;
        }

        .e-left-connectorpoint-outer-div {
          display: none;
        }

        .e-right-connectorpoint-outer-div {
          display: none;
        }
      }
      @if $skin-name =='Material3' or $skin-name =='Material3-dark'{
        .e-collapse-parent {
          .e-gantt-child-taskbar-inner-div {
            border-bottom: 0;
            border-top: 0;
          }
        }
      }

      @if $skin-name =='fluent2' or $skin-name =='fluent2-highcontrast' or $skin-name =='fluent2-dark'{
        .e-gantt-parent-taskbar-inner-div {
          outline: $gantt-parent-progress-bar-border;
        }
      }
      @else{
        .e-gantt-parent-taskbar-inner-div {
          outline: $gantt-parent-task-bar-border;
        }
      }

      .e-gantt-parent-taskbar-inner-div {
        background-color: $gantt-parent-task-bar;
        border-radius: $gantt-parent-progress-bar-border-radius;
      }

      .e-gantt-parent-progressbar-inner-div {
        @include border-styles($gantt-parent-progress-bar, $gantt-parent-progress-bar-border,$gantt-parent-progress-bar-border-radius);
        //margin-left: $gantt-child-progress-margin-left;
      }

      .e-gantt-child-progressbar-inner-div {
        @include border-styles($gantt-child-progress-bar, $gantt-child-progress-bar-border,$gantt-child-progress-bar-border-radius);
        //margin-left: $gantt-child-progress-margin-left;
      }

      .e-gantt-child-manualtaskbar .e-gantt-child-progressbar-inner-div {
        @if $skin-name == 'tailwind3' {
          @include border-styles($gantt-manualchild-progress-bar, $gantt-child-progress-bar-border,$gantt-child-progress-bar-border-radius);
        }
      }

      .e-gantt-child-manualtaskbar {
        background: $gantt-manualchild-task-bar;
        outline: $gantt-manualchild-task-bar-border;
      }

      .e-gantt-unscheduled-taskbar.e-gantt-child-manualtaskbar {
        background: $gantt-unscheduled-manualtaskbar-background;
      }

      .e-gantt-child-manualprogressbar {
        background-color: $gantt-manualchild-progress-bar;
        outline: $gantt-manualchild-progress-bar-border;
      }

      .e-gantt-critical-child-manualprogressbar {
        background-color: $gantt-manualchild-progress-bar;
        border: $gantt-manualchild-progress-bar-border;
      }

      .e-holiday {
        background: $holiday-background;
        .e-span {
          color: $holiday-label-color;
          font-size: $holiday-label-font-size;
        }
      }

      .e-weekend {
        background: $weekend-background;
      }

      .e-weekend-header-cell {
        background: $weekend-background;
      }

      .e-weekend-cell-hover:not(.e-active):hover{
        background-color: $gantt-weekendcell-hover-bg-color;
      }

      .e-rangecontainer {
        .e-rg-rangdiv {
          border: 2px solid $rangecontainer-border-color;
          width: 5px;
          z-index: 6;
        }
      }

      .e-event-markers {
        border-left-color: $event-marker-line-color;
        .e-span-label {
          background-color: $event-marker-label-color;
          color: $event-marker-label-font-color;
          font-size: $event-marker-label-font-size;
        }
        .e-gantt-right-arrow {
          border-right-color: $event-marker-label-color;
          border-left-color: $event-marker-label-color !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-gantt-unscheduled-taskbar {
        background: $gantt-unscheduled-taskbar-background;
        border: $gantt-unscheduled-taskbar-border;
        border-radius: $gantt-unscheduled-taskbar-border-radius;
      }

      .e-unscheduled-milestone-top {
        border-bottom-color: $gantt-unscheduled-milestone-top-border;
      }

      .e-unscheduled-milestone-bottom {
        border-top-color: $gantt-unscheduled-milestone-bottom-border;
      }

      .e-progress-resize-gripper {
        .e-progressbar-handler {
          background: $progress-handler-background;
        }
        .e-progressbar-handler-after {
          border-bottom-color: $progress-handler-background;
        }
      }

      .e-gantt-dependency-view-container {
        display: block;
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        pointer-events: none;
      }

      .e-line {
        border-color: $connector-line-color;
      }

      .e-connector-line {
        stroke: $connector-line-color;
      }

      .e-critical-line {
        stroke: $critical-connector-line-color;
      }

      .e-connector-line-arrow {
        fill: $connector-line-color;
      }

      .e-critical-line-arrow {
        fill: $critical-connector-line-color;
      }

      .e-connector-line-right-arrow {
        border-left-color: $connector-line-color;
      }

      .e-connector-line-left-arrow {
        border-right-color: $connector-line-color;
      }

      .e-connector-line-right-arrow-hover {
        border-left-color: $connector-line-hover-color;
      }
      .e-connector-line-left-arrow-hover {
        border-right-color: $connector-line-hover-color;
      }

      .e-connector-line-hover {
        border-color: $connector-line-hover-color;
        outline-color: $connector-line-hover-color;
      }
      .e-gantt-false-line {
        border-top-color: $connector-false-line-color;
      }

      .e-connectorpoint-left-hover,
      .e-connectorpoint-right-hover {
        @include background-styles($connector-node-hover-color,$connector-node-border-color);
      }

      .e-connectorpoint-left-hover:hover,
      .e-connectorpoint-right-hover:hover {
        @include background-styles($connector-node-hover-bg-color,$connector-node-hover-border-color);
      }

      .e-left-label-inner-div,
      .e-right-label-inner-div {
        color: $gantt-label-color;
        font-size: $gantt-label-size;
      }

      .e-left-label-temp-container {
        color: $gantt-label-font-color;
        font-size: $gantt-label-font-size;
        padding-right: $gantt-right-label-container-margin-left;
      }

      .e-right-label-temp-container {
        color: $gantt-label-font-color;
        font-size: $gantt-label-font-size;
        margin-left: $gantt-right-label-container-margin-left;
      }

      .e-right-label-container {
        margin-left: $gantt-right-label-container-margin-left;
      }

      .e-left-label-container {
        padding-right: $gantt-right-label-container-margin-left;
      }

      .e-connectorpoint-right {
        margin-left: $gantt-connector-point-right-margin-left;
      }

      .e-connectorpoint-left {
        margin-right: $gantt-connector-point-left-margin-right;
      }

      .e-right-connectorpoint-outer-div,
      .e-left-connectorpoint-outer-div {
        height: $gantt-connector-point-height;
        width: $gantt-connector-point-width;
      }

      .e-left-connectorpoint-outer-div {
        left: $gantt-connector-left-point-left;
      }

      .e-gantt-unscheduled-taskbar-left,
      .e-gantt-unscheduled-taskbar-right {
        border-right: transparent;
        border-width: $gantt-unscheduled-taskbar-left;
      }

      .e-gantt-unscheduled-taskbar-right {
        border-top-left-radius: $gantt-unscheduled-taskbar-curved-radius;
        border-bottom-left-radius: $gantt-unscheduled-taskbar-curved-radius;
        border-top-right-radius: $gantt-unscheduled-taskbar-straight-radius;
        border-bottom-right-radius: $gantt-unscheduled-taskbar-straight-radius;
      }

      .e-gantt-unscheduled-taskbar-left {
        border-bottom-left-radius: $gantt-unscheduled-taskbar-straight-radius;
        border-top-left-radius: $gantt-unscheduled-taskbar-straight-radius;
        border-bottom-right-radius: $gantt-unscheduled-taskbar-curved-radius;
        border-top-right-radius: $gantt-unscheduled-taskbar-curved-radius;
      }

      .e-task-label {
        color: $gantt-task-label-font-color;
        font-size: $gantt-task-label-font-size;
      }

      .e-icon {
        color: $gantt-edit-icon-color;
      }

      .e-gantt-milestone {
        @include background-styles($gantt-milestone-border-color,$gantt-child-progress-bar);
      }

      .e-gantt-parent-milestone {
        background-color: $gantt-parent-milestone-border-color;
      }

      .e-gantt-manualparent-milestone {
        @include background-styles($gantt-manualparent-background-color,$gantt-child-progress-bar);
      }

      .e-gantt-unscheduled-manualtask {
        background: $gantt-unscheduledmanualparent-background-color;
      }

      .e-label {
        color: $gantt-label-font-color;
        font-size: $gantt-label-font-size;
      }

      .e-active {
        background: $gantt-active-background;
        color: $gantt-active-color;
        opacity: $gantt-active-color-opacity;
      }

      .e-active .e-label {
        color: $gantt-active-color;
      }

      .e-baseline-bar {
        background-color: $gantt-baseline-color;
      }

      .e-baseline-gantt-milestone-container {
        @if $skin-name =='Material3'{
          background-color: $gantt-milestone-border-color;
        }
        @else{
          background-color: $gantt-baseline-color;
        }
      }

      .e-uptail::before {
        border-bottom-color: $gantt-uptail-border;
      }

      .e-downtail::after {
        border-top-color: $progress-handler-outline;
      }

      .e-downtail::before {
        border-top-color: $gantt-uptail-border;
      }

      .e-ganttpopup .e-content {
        @include background-styles($progress-handler-outline,$gantt-uptail-border);
      }

      .e-spanclicked,
      .e-grid .e-gridpopup .e-spanclicked {
        border-color: $gantt-gridpopup-span;
      }
    }

    .e-icons {
      color: $gantt-icons-color;
    }

    .e-grid .e-icons:not(.e-stop):not(.e-check):not(.e-icon-left):not(.e-date-icon) {
      color: $gantt-context-menu-icon-color !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'fluent2'{
      .e-menu-item.e-focused,
      .e-menu-item.e-selected {
        .e-icons:not(.e-stop):not(.e-check):not(.e-icon-left):not(.e-date-icon) {
          color: $gantt-context-menu-click-color !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }
    @if $skin-name == 'bootstrap5.3'{
      .e-menu-item.e-selected {
        .e-icons:not(.e-stop):not(.e-check):not(.e-icon-left):not(.e-date-icon) {
          color: $gantt-context-menu-click-color !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }
  }

  .e-gantt-dialog {
    .e-btn.e-primary {
      @if $skin-name =='Material3' or $skin-name =='Material3-dark'{
        background: rgba(103, 80, 164, 1) !important; /* stylelint-disable-line declaration-no-important */
        border-color: rgba(103, 80, 164, 1) !important; /* stylelint-disable-line declaration-no-important */
        color: rgba(255, 255, 255, 1) !important; /* stylelint-disable-line declaration-no-important */
        border-radius: 20px;
      }
    }

    .e-btn.e-primary {
      @if $skin-name =='Material3' or $skin-name =='Material3-dark'{
        background: rgba(103, 80, 164, 1) !important; /* stylelint-disable-line declaration-no-important */
        border-color: rgba(103, 80, 164, 1) !important; /* stylelint-disable-line declaration-no-important */
        color: rgba(255, 255, 255, 1) !important; /* stylelint-disable-line declaration-no-important */
        border-radius: 20px;
      }
    }

    .e-tab .e-tab-header .e-indicator {
      @if $skin-name =='Material3' or $skin-name =='Material3-dark'{
        display: none;
      }
    }

    .e-dlg-content{
      .e-rte-quick-popup.e-hide{
        border: none !important; /* stylelint-disable-line declaration-no-important */
      }
    }
    .e-dlg-header {
      color: $gantt-dialog-header-font-color;
      position: relative;
    }

    .e-dlg-header-content {
      @if $skin-name !='bootstrap5.3'{
        background: $gantt-dialog-tab-background;
      }
    }

    .e-icon-dlg-close {
      color: $gantt-dialog-icon-color;
    }

    .e-btn.e-dlg-closeicon-btn:hover {
      background-color: $gantt-dialog-icon-hover-color;
      .e-icon-dlg-close {
        color: $gantt-dialog-close-icon-hover-color;
      }
    }

    .e-tab {

      .e-tab-header {
        @if $skin-name !='bootstrap5.3'{
          background: $gantt-dialog-tab-background;
        }

        .e-indicator {
          @if $skin-name !='bootstrap5.3'{
            background: $gantt-tab-selection-indicator-color;
          }
        }

        .e-toolbar-item.e-active {
          background-color: $gantt-dialog-active-tab-background;

          .e-tab-wrap {
            @if $skin-name =='bootstrap5.3'{
              .e-tab-text {
                color: $gantt-tab-header-hover-font-color !important; /* stylelint-disable-line declaration-no-important */
              }
            }
            @else{
              .e-tab-text {
                color: $gantt-tab-header-active-font-color;
              }
            }
          }
        }

        .e-toolbar-item {
          .e-tab-wrap {
            border-color: $gantt-dialog-tab-header-border-no-color;

            .e-tab-text {
              @if $skin-name =='bootstrap5.3'{
                color: $gantt-tab-header-active-font-color !important; /* stylelint-disable-line declaration-no-important */
              }
              @else{
                color: $gantt-tab-header-font-color;
              }
            }
          }
        }

        .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
          background: $gantt-tab-header-hover-color;
          border-bottom: $gantt-dialog-tab-hover-border-bottom;
          border-bottom-left-radius: $gantt-dialog-tab-hover-border-bottom-radius;
          border-bottom-right-radius: $gantt-dialog-tab-hover-border-bottom-radius;
          border-color: $gantt-dialog-tab-hover-border-color;

          .e-tab-text {
            color: $gantt-tab-header-hover-font-color;
          }
        }
      }
    }
  }

  .e-gantt-dialog .e-tab .e-tab-header .e-indicator {
    @if $skin-name =='Material3' or $skin-name =='Material3-dark'{
      display: none;
    }
  }

  .e-gantt .e-gantt-chart {
    .e-criticalconnector-line {
      border-color: $critical-connector-line-color;
    }

    .e-criticalconnector-line-right-arrow {
      border-left-color: $critical-connector-line-color;
    }

    .e-criticalconnector-line-left-arrow {
      border-right-color: $critical-connector-line-color;
    }

    .e-critical-connector-line-hover {
      border-color: $critical-connector-line-hover-color;
      outline-color: $critical-connector-line-hover-color;
    }

    .e-critical-connector-line-right-arrow-hover {
      border-left-color: $critical-connector-line-hover-color;
    }

    .e-critical-connector-line-left-arrow-hover {
      border-right-color: $critical-connector-line-hover-color;
    }

    .e-gantt-child-critical-taskbar-inner-div {
      background: $gantt-critical-child-task-bar;
      outline: $gantt-critical-child-task-bar-border;
      border-radius: $gantt-parent-progress-bar-border-radius;
    }

    .e-gantt-child-critical-progressbar-inner-div {
      background-color: $gantt-critical-child-progress-bar;
      border: $gantt-child-progress-bar-border;
      border-radius: $gantt-child-progress-bar-border-radius;
    }

    .e-gantt-critical-unscheduled-taskbar {
      background: $gantt-unscheduled-critical-taskbar-background;
      background-color: $gantt-unscheduled-critical-taskbar-background-color;
      border: $gantt-unscheduled-taskbar-border;
      border-radius: $gantt-unscheduled-taskbar-border-radius;
    }

    .e-critical-milestone {
      background-color: $gantt-critical-milestone-border-color;
      @if $skin-name =='Material3'{
        border: 1px solid $gantt-critical-child-progress-bar;
      }
    }
  }

  .e-gantt-chart-resize-indicator{
    border: 1px dashed $gantt-child-task-bar;
    border-bottom: none;
    border-top: none;
  }
}

@include export-module('gantt-bootstrap-dark-icons') {
  #{&}.e-gantt,
  .e-gantt-menu {
    .e-add::before {
      content: '\e823';
    }

    .e-critical-path::before {
      content: '\e93a';
    }

    .e-edit::before {
      content: '\e944';
    }

    .e-delete::before {
      content: '\e84e';
    }

    .e-cancel-icon::before,
    .e-toolbar-item .e-cancel::before {
      content: '\e842';
    }

    .e-save::before {
      content: '\e964';
    }

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

    .e-search-icon::before {
      content: '\e961';
    }

    .e-notes-info::before {
      content: '\e607';
    }

    .e-left-resize-gripper::before,
    .e-right-resize-gripper::before {
      content: '\ebc7';
    }

    .e-expandall::before {
      content: '\e558';
    }

    .e-collapseall::before {
      content: '\e557';
    }

    .e-gantt-tooltip-arrow-left::before,
    .e-prevtimespan::before {
      content: '\e85b';
    }

    .e-gantt-tooltip-arrow-right::before,
    .e-nexttimespan::before {
      content: '\e85f';
    }

    .e-zoomin::before {
      content: '\e349';
    }

    .e-zoomout::before {
      content: '\e351';
    }

    .e-zoomtofit::before {
      content: '\e657';
    }

    .e-add-above::before {
      content: '\e658';
    }

    .e-add-below::before {
      content: '\e659';
    }

    .e-indent::before {
      content: '\e33f';
    }

    .e-outdent::before {
      content: '\e35d';
    }

    .e-csvexport::before {
      content: '\e241';
    }

    .e-excelexport::before {
      content: '\e242';
    }

    .e-pdfexport::before {
      content: '\e240';
    }
  }

  #{&}.e-gantt.e-device {
    .e-backarrowspan::before,
    .e-icon-dlg-close::before {
      content: '\e85b';
    }

    .e-left-resize-gripper::before,
    .e-right-resize-gripper::before {
      content: '\e903';
    }
  }

  .e-icon-rowselect::before {
    content: '\e930';
  }
}

@mixin resizer-styles($display, $position, $top, $width, $index) {
  display: $display;
  position: $position;
  top: $top;
  width: $width;
  z-index: $index;
}

@mixin mask-cell-styles($height, $width, $left, $border-radius) {
  height: $height;
  width: $width;
  left: $left;
  border-radius: $border-radius;
}

@mixin inner-cell-styles($innerheight, $innerwidth, $innerleft) {
  height: $innerheight;
  width: $innerwidth;
  left: $innerleft;
}

@mixin button-styles($back-color, $border-color, $text-color, $font-size, $line-height, $padding) {
  background-color: $back-color;
  border-color: $border-color;
  color: $text-color;
  font-size: $font-size;
  line-height: $line-height;
  padding: $padding;
}

@mixin border-styles($border-radius, $border-height, $border-width) {
  border-radius: $border-radius;
  height: $border-height;
  width: $border-width;
}

@mixin float-styles($direction, $padding-style, $width) {
  float: $direction;
  padding: $padding-style;
  width: $width;
}

@mixin min-styles {
  min-height: $gantt-bigger-dialog-input-icon;
  min-width: 35.82px !important; /* stylelint-disable-line declaration-no-important */
}

.e-bigger {
  .e-gantt-single-timeline {
    .e-timeline-header-table-body tr {
      height: $gantt-bigger-header-border-height !important; /* stylelint-disable-line declaration-no-important */
    }
    .e-gantt-tree-grid-pane {
      .e-columnheader,
      .e-headercell {
        height: $gantt-bigger-treegrid-header-border-height !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
  .e-gantt {
    @if ($theme-name =='material-dark') {
      .e-grid .e-row .e-input-group {
        margin: 0 !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    @if ($skin-name=='Material3-dark' or $skin-name =='Material3') {
      .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
        font-size: 18px;
      }
    }

    .e-gantt-chart {

      .e-taskbar-left-resizer,
      .e-taskbar-right-resizer {
        @include resizer-styles(inline-block, absolute, 0, 25px, 4);
      }

      .e-left-resize-gripper,
      .e-right-resize-gripper {
        align-items: center;
        cursor: ew-resize;
        display: inline-flex;
      }

      .e-gantt-manualparenttaskbar {
        margin-top: 5px;
      }

      .e-gantt-manualparenttaskbar-left,
      .e-gantt-manualparenttaskbar-right {
        width: 15px;
      }

      .e-timeline-header-table-body tr{
        height: $gantt-bigger-timeline-top-header-cell-height;
      }

      .e-timeline-top-header-cell,
      .e-timeline-single-header-cell {
        height: inherit;
      }

      .e-event-markers {
        .e-span-label {
          border-radius: $gantt-bigger-event-markers-border-radius;
          font-size: $gantt-bigger-event-arrow-font-size;
          height: $gantt-bigger-event-markers-height;
          padding: $gantt-bigger-event-markers-padding;
          top: $gantt-bigger-event-markers-top;
        }

        .e-gantt-right-arrow {
          border-bottom: $gantt-bigger-event-arrow-bottom;
          border-right: $gantt-bigger-event-arrow-right;
          border-right-color: $gantt-bigger-event-arrow-color;
          border-top: $gantt-bigger-event-arrow-top;
          top: $gantt-bigger-event-arrow-top-value;
        }
      }

      @if ($skin-name =='FluentUI' or $skin-name =='bootstrap5' or $skin-name =='tailwind' or $skin-name =='Material3' or $skin-name =='tailwind3' or $skin-name =='fluent2' or $skin-name =='bootstrap5.3') {

        .e-left-resize-gripper::before,
        .e-right-resize-gripper::before {
          content: '\e888';
        }
      }

      @else {

        .e-left-resize-gripper::before,
        .e-right-resize-gripper::before {
          content: '\e92c';
        }
      }

      .e-connectorpoint-right,
      .e-connectorpoint-left,
      .e-right-connectorpoint-outer-div,
      .e-left-connectorpoint-outer-div {
        border-radius: $gantt-manual-parent-taskbar-border-radius;
        display: inline-block;
        position: absolute;
      }

      .e-connectorpoint-left-hover,
      .e-connectorpoint-right-hover {
        border-style: solid;
        border-width: 1px;
        box-sizing: content-box;
        cursor: pointer;
        display: inline-block;
      }

      .e-connectorpoint-left-hover,
      .e-connectorpoint-right-hover {
        background-color: $connector-node-hover-color;
        border-color: $connector-node-border-color;
        position: relative;
      }

      .e-connectorpoint-left-hover:hover,
      .e-connectorpoint-right-hover:hover {
        background-color: $connector-node-hover-color;
        border-color: $connector-node-border-color;
        outline: 2px solid $connector-node-hover-outerline-color;
      }

      .e-connectorpoint-left-hover::after,
      .e-connectorpoint-right-hover::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 40px;
        top: -10px;
      }

      .e-connectorpoint-allow-block {
        cursor: no-drop;
      }
    }

    .e-tab .e-content {
      height: $gantt-bigger-add-dialog-content-height;
    }

    .e-gantt-tree-grid-pane {
      .e-columnheader {
        .e-headercell {
          height: $gantt-bigger-treegrid-header-border-height !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-headercell {
        @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind3-dark') {
          padding: 19px 16px !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-grid.e-gridhover {
        .e-row:not(.e-disable-gridhover):not(.e-editedrow):hover {
          .e-rowcell,
          .e-rowdragdrop {
            &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
              @include gantt-hover-bg-check;
            }
          }
        }

        & .e-row:not(.e-disable-gridhover):not(.e-editedrow):hover {
          .e-rowcell.e-leftfreeze,
          .e-rowcell.e-rightfreeze,
          .e-rowcell.e-unfreeze,
          .e-rowdragdrop.e-leftfreeze,
          .e-rowdragdrop.e-rightfreeze,
          .e-rowdragdrop.e-unfreeze {
            &:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
              @include gantt-hover-frozen-bg-check;
            }
          }
        }

        &:not(.e-rowdrag) .e-row:not(.e-disable-gridhover):not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
          @include gantt-hover-important;
        }
      }
    }

    .e-gantt-dialog .e-tab .e-tab-header {
      padding-left: $gantt-dialog-tab-padding-left;

      @if ($skin-name =='FluentUI') {
        .e-indicator {
          display: block;
          bottom: 0;
          height: 3px;
        }
      }

      @else {
        .e-indicator {
          display: block;

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

    .e-dialog {
      .e-dlg-header-content {
        padding: $gantt-bigger-dialog-header-padding;

        /* stylelint-disable-line declaration-no-important */
        .e-btn.e-dlg-closeicon-btn {
          left: -11px;
          line-height: 100%;
          padding: 12px !important;  /* stylelint-disable-line declaration-no-important */

          @if ($skin-name =='bootstrap5-dark' or $skin-name =='bootstrap5') {
            top: 2px;
          }

          @else {
            top: 3px;
          }
        }
      }

      @if ($skin-name =='FluentUI' or $skin-name =='fluent-dark') {
        .e-dlg-content {
          margin-bottom: 0;
        }
      }

      @if ($skin-name =='tailwind') {
        .e-dlg-header-content {
          height: 68px !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-btn .e-btn-icon.e-icon-dlg-close {
        font-size: $gantt-bigger-dialog-close-button-size;
        line-height: 100%;

        @if ($skin-name =='Material3') {
          width: $gantt-bigger-dialog-close-button-size;
        }
        @if ($skin-name =='bootstrap5.3' or $skin-name =='bootstrap5.3-dark') {
          top: 0;
          left: 0;
        }
      }

      .e-footer-content {
        @if ($skin-name != 'FluentUI' and $skin-name != 'fluent-dark' and $skin-name != 'fabric' and $skin-name != 'fabric-dark' and $skin-name != 'highcontrast') {
          height: $gantt-bigger-filter-dialog-footer-height;
        }
        padding: $gantt-bigger-filter-dialog-footer-padding;

        .e-btn {
          margin-left: 12px;
        }
      }

      .e-dlg-header:not(.e-gantt-adaptive-dialog .e-dialog .e-dlg-header) {
        @if ($skin-name=='Material3-dark' or $skin-name =='Material3') {
          line-height: 28px;
        }

        @else if ($skin-name !='FluentUI' or $skin-name !='fluent-dark') {
          line-height: 37px;
        }
      }
    }

    .e-grid .e-flmenu-valuediv {
      padding: $gantt-bigger-filter-dialog-input-padding;
    }

    .e-filter-popup {
      .e-dlg-content {
        border-radius: $gantt-dialog-bigger-border-radius;
        padding: $gantt-dialog-bigger-input-padding-field;
      }
    }

    .e-grid .e-columnmenu {
      @if $skin-name =='bootstrap5-dark' or $skin-name =='tailwind-dark' {
        top: 35px;
      }

      @else if $skin-name =='fluent-dark' {
        top: 38px;
      }

      @else {
        top: $bigger-column-menu-size;
      }
    }
  }

  .e-gantt-dialog {
    border-radius: $gantt-bigger-dialog-border-radius;

    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
      padding: 0 16px !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-edit-form-column:nth-child(odd) {
      padding: $gantt-bigger-dialog-edit-form-odd-padding;
    }

    .e-edit-form-column:nth-child(even) {
      padding: $gantt-bigger-dialog-edit-form-even-padding;
    }

    .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
      padding: $gantt-bigger-dialog-edit-form-scroll-padding;
    }

    .e-edit-form-row:not(:has(.e-richtexteditor)) {
      height: $gantt-bigger-add-dialog-content-height;
    }

    .e-edit-form-column {
      height: $gantt-bigger-add-dialog-input-height;
    }

    .e-dlg-header-content {
      border-bottom: 0 !important; /* stylelint-disable-line declaration-no-important */
    }

    >.e-dlg-content {
      border-radius: 0 !important; /* stylelint-disable-line declaration-no-important */
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $theme-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $theme-name == 'fluent2-dark') {
        height: 308px;
      }
    }

    .e-dlg-header-content {
      border-radius: $gantt-bigger-dialog-border-radius;
      padding-bottom: $gantt-dialog-padding-bottom;

      @if ($skin-name =='bootstrap-dark') {
        .e-btn.e-dlg-closeicon-btn {
          @include border-styles(50%, auto !important, auto);
          box-shadow: none;
        }
      }

      @else {
        .e-btn.e-dlg-closeicon-btn:not(.e-gantt-adaptive-dialog .e-dialog .e-dlg-closeicon-btn) {
          @include border-styles(50%, auto !important, auto);

          @if ($skin-name=='Material3') {
            line-height: 0px;
            padding: 0 !important; /* stylelint-disable-line declaration-no-important */
          }

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

    .e-tab {
      .e-tab-header .e-toolbar-item.e-active {
        margin-left: $gantt-bigger-dialog-tab-padding-left;
      }
    }

    @if ($skin-name =='bootstrap4') {
      .e-icon-dlg-close {
        color: $gantt-bigger-dialog-icon-color;
      }
    }

    .e-control-wrapper .e-input-group-icon.e-date-icon {
      font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-control-wrapper .e-input-group-icon.e-date-icon {
      @include min-styles;
    }

    .e-btn.e-flat {
      line-height: 24px;
      padding: 6px 16px 6px 15px !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-btn.e-primary {
      padding: 6px 21px 6px 23px !important; /* stylelint-disable-line declaration-no-important */
      @if ($skin-name =='Material3' or $skin-name =='Material3-dark') {
        background: rgba(103, 80, 164, 1) !important; /* stylelint-disable-line declaration-no-important */
        border-color: rgba(103, 80, 164, 1) !important; /* stylelint-disable-line declaration-no-important */
        color: rgba(255, 255, 255, 1) !important; /* stylelint-disable-line declaration-no-important */
        border-radius: 20px;
      }
    }

    .e-datetime-wrapper .e-time-icon.e-icons::before {
      font-size: 16px !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
      font-size: 14px;
      line-height: 22px;
    }

    .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text {
      font-size: 14px;
      line-height: 22px;
    }

    .e-float-input.e-control-wrapper input {
      height: $gantt-bigger-dialog-input-field-height;

      @if ($skin-name =='material') {
        padding: 5px 0 11px !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
      @include min-styles;
    }

    .e-control-wrapper .e-input-group-icon.e-time-icon {
      @include min-styles;
    }

    .e-input-group.e-control-wrapper {
      height: $gantt-dialog-bigger-input-field;
    }

    .e-input-group-icon.e-date-icon {
      min-width: 36px !important; /* stylelint-disable-line declaration-no-important */
    }

    @if ($skin-name =='material') {
      .e-datetime-wrapper .e-input-group-icon.e-time-icon {
        margin: 5px 0 6px !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-input-group.e-control-wrapper .e-input-group-icon {
        margin-right: 0 !important;  /* stylelint-disable-line declaration-no-important */
      }
    }

    @if ($skin-name =='tailwind') {
      .e-input-group.e-control-wrapper .e-input-group-icon {
        padding: 7px 0 !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    .e-gantt-adaptive-dialog .e-dialog {
      position: absolute !important; /* stylelint-disable-line declaration-no-important */
      left: 0 !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-gantt-adaptive-dialog .e-dialog .e-dlg-header-content {
      padding: 16px !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-gantt-adaptive-dialog .e-dialog td {
      width: 100% !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-predecessor-tooltip {
    .e-arrow-tip-outer.e-tip-bottom {
      border-top: 8px solid $gantt-bigger-tooltip-button-color;

      @if ($skin-name =='FluentUI') {
        border-top: 12.5px solid $gantt-bigger-tooltip-button-color;
      }

      @else if ($skin-name =='highcontrast') {
        border-top: 7px solid $gantt-bigger-tooltip-button-color;
      }
    }

    .e-arrow-tip-inner.e-tip-bottom {
      color: $gantt-bigger-tooltip-button-color;
    }

    .e-left-btn:disabled {
      color: $gantt-bigger-tooltip-disabled-button-color;
    }

    .e-right-btn:disabled {
      color: $gantt-bigger-tooltip-disabled-button-color;
    }

    .e-tip-content {
      padding: 3px !important; /* stylelint-disable-line declaration-no-important */
    }

    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
      @include button-styles($gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-text-color, 12px, 18px, 0 8px 0 0);
    }

    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
      @include button-styles($gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-color, $gantt-bigger-tooltip-button-text-color, 12px, 18px, 0 0 0 8px);
    }
  }

  .e-predecessor-dialog {
    background-color: $gantt-bigger-tooltip-dialog-color;

    .e-dlg-content {
      background-color: $gantt-bigger-tooltip-dialog-color;
      padding: $gantt-bigger-predecessor-dialog-padding;
      font-size: $gantt-bigger-predecessor-dialog-font-size;
      font-weight: $gantt-bigger-predecessor-dialog-font-weight;
      line-height: $gantt-bigger-predecessor-dialog-line-height;
      color: $gantt-bigger-tooltip-dialog-text-color;

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

    .e-touch-predecessor-dialog {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

.e-bigger .e-gantt .e-gantt-chart .e-label {
  font-size: $gantt-bigger-label-font-size;
}

.e-bigger .e-gantt-dialog .e-control.e-tooltip-wrap.e-popup.e-griderror {
  min-width: 135px;
}

.e-bigger .e-filter-popup .e-control .e-dialog .e-lib .e-popup .e-popup-open .e-excelfilter .e-gantt,
.e-bigger .e-gantt .e-excelfilter .e-dialog .e-dlg-content {
  padding: 0 18px 0 0 !important; /* stylelint-disable-line declaration-no-important */
}

.e-bigger .e-filter-popup .e-control .e-dialog .e-lib .e-popup .e-popup-open .e-excelfilter .e-gantt,
.e-bigger .e-gantt .e-contextmenu-wrapper ul {
  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
}

@if ($skin-name =='Material3') {
  .e-bigger .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap
  {
    border-width: 0;
  }
}

@media (max-width: 767px) {
  .e-bigger .e-gantt .e-dialog .e-edit-form-column {

    &:nth-child(odd),
    &:nth-child(even) {
      @include float-styles(none, $gantt-mobile-bigger-dialog-edit-form-padding, 100%);
    }
  }
}

/*! Bootstrap dark theme definitions and variables */
/*! Value element styles */
$editor-big-overlay-icon-size: 16px !default;
$editor-nrml-overlay-icon-size: 14px !default;
$editor-big-value-text-font-size: 15px !default;
$editor-nrml-value-text-font-size: 14px !default;
$editor-big-value-container-padding: 8px 12px !default;
$editor-nrml-value-container-padding: 6px 10px !default;
$editor-big-value-container-spin-padding: 12px !default;
$editor-nrml-value-container-spin-padding: 10px !default;
$editor-big-value-margin: 0 32px 0 0 !default;
$editor-nrml-value-margin: 0 30px 0 0 !default;
$editor-rtl-big-value-margin: 0 0 0 32px !default;
$editor-rtl-nrml-value-margin: 0 0 0 30px !default;
$editor-big-overlay-icon-container-size: 20px !default;
$editor-nrml-overlay-icon-container-size: 18px !default;
$editor-big-overlay-icon-left-right: 12px !default;
$editor-nrml-overlay-icon-left-right: 10px !default;
$editor-value-hover-bg: $grey !default;
$editor-value-text-color: $grey-dark-font !default;
$editor-overlay-icon-color: $grey-dark-font !default;
$editor-value-text-border: 1px dashed $editor-value-text-color !default;
$editable-overlay-icon-height: inherit !default;
$editable-overlay-icon: 0 !default;

/*! Tooltip styles */
$editor-tip-border: 1px solid $grey-99 !default;
$editor-tip-bg: $grey-dark !default;
$editor-tip-arrow-icon-color: $grey-dark !default;
$editor-tip-title-arrow-icon-color: $grey-44 !default;
$editor-tip-arrow-bdr-color: $grey-99 !default;
$editor-tip-title-arrow-bdr-color: $grey-99 !default;
$editor-tip-box-shadow: none !default;

/*! Tip Content styles */
$editor-tip-content-bdr-radius: 4px !default;
$editor-popup-tip-content-bdr-radius: 4px !default;

/*! Title styles */
$editor-tip-title-font-weight: 700 !default;
$editor-big-tip-title-font-size: 14px !default;
$editor-nrml-tip-title-font-size: 14px !default;
$editor-big-tip-title-padding: 0 0 0 12px !default;
$editor-nrml-tip-title-padding: 0 0 0 12px !default;
$editor-rtl-big-tip-title-padding: 0 12px 0 0 !default;
$editor-rtl-nrml-tip-title-padding: 0 12px 0 0 !default;
$editor-big-tip-title-container-size: 36px !default;
$editor-nrml-tip-title-container-size: 30px !default;
$editor-tio-title-border-bottom: 0 !default;
$editor-tip-title-bg: $grey-44 !default;
$editor-tip-title-color: $grey-dark-font !default;

/*! Wrapper styles */
$editor-big-tip-wrapper-padding: 12px !default;
$editor-nrml-tip-wrapper-padding: 12px !default;
$editor-big-wrapper-title-with-padding: 10px 12px 12px 12px !default;
$editor-nrml-wrapper-title-with-padding: 10px 12px 12px 12px !default;

/*! Component group styles */
$editor-component-bottom-margin: 4px !default;

/*! Button styles */
$editor-buttons-top-margin: 4px !default;
$editor-btn-save-icon-size: 16px !default;
$editor-btn-cancel-icon-size: 16px !default;
$editor-big-btn-save-margin: 0 4px 0 0 !default;
$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
$editor-big-btn-cancel-margin: 0 0 0 4px !default;
$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
$editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
$editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
$editor-btn-icon-color: $grey-dark-font !default;

$padding-zero: 0;
$editor-bgr-content-min-height: 70px !default;
$editor-value-min-height: 38px !default;
$editor-content-min-height: 60px !default;
$editable-bgr-tip-width: auto !default;
$editor-rtl-spinner-right: 5px !default;

@include export-module('inplaceeditor-layout') {
  .e-inplaceeditor {
    display: inline-block;
    position: relative;
    width: $editable-bgr-tip-width;

    .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
      display: block;
      visibility: hidden;
    }

    .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
      display: block;
      visibility: hidden;
    }

    .e-editable-value-wrapper {
      display: inline-block;
      padding: $editor-nrml-value-container-padding;
      position: relative;
      width: $editable-bgr-tip-width;
      word-break: break-word;

      .e-editable-value {
        display: inline-block;
        font-family: $font-family;
        font-size: $editor-nrml-value-text-font-size;
        margin: $editor-nrml-value-margin;

        @if $skin-name == 'bootstrap4' {
          line-height: 24px;
        }
      }

      .e-editable-overlay-icon {
        bottom: 0;
        cursor: pointer;
        display: inline-flex;
        height: $editable-overlay-icon-height;
        position: absolute;
        right: $editor-nrml-overlay-icon-left-right;
        top: $editable-overlay-icon;
        visibility: hidden;
        width: $editor-nrml-overlay-icon-container-size;

        &::before {
          align-items: center;
          display: flex;
          font-size: $editor-nrml-overlay-icon-size;
        }
      }

      &.e-hide {
        display: none;
      }

      &.e-editable-open {
        user-select: none;
      }

      &.e-loading {
        pointer-events: none;
      }

      .e-spinner-pane .e-spinner-inner {
        left: unset;
        right: $editor-nrml-value-container-spin-padding;
      }

      &:hover {
        .e-editable-overlay-icon {
          visibility: visible;
        }

        &.e-editable-open {

          .e-editable-overlay-icon {
            visibility: hidden;
          }
        }
      }
    }

    .e-editable-value-container {
      display: inline-block;
      padding: $editor-nrml-value-container-padding;
      position: relative;
      width: $editable-bgr-tip-width;
      word-break: break-word;

      .e-editable-value {
        display: inline-block;
        font-family: $font-family;
        font-size: $editor-nrml-value-text-font-size;
        margin: $editor-nrml-value-margin;

        @if $skin-name == 'bootstrap4' {
          line-height: 24px;
        }
      }

      .e-editable-overlay-icon {
        bottom: $padding-zero;
        cursor: pointer;
        display: inline-flex;
        height: inherit;
        position: absolute;
        right: $editor-nrml-overlay-icon-left-right;
        top: $padding-zero;
        visibility: hidden;
        width: $editor-nrml-overlay-icon-container-size;

        &::before {
          align-items: center;
          display: flex;
          font-size: $editor-nrml-overlay-icon-size;
        }
      }

      &.e-hide {
        display: none;
      }

      &.e-editable-open {
        user-select: none;
      }

      &.e-loading {
        pointer-events: none;
      }

      .e-spinner-pane .e-spinner-inner {
        left: unset;
        right: $editor-nrml-value-container-spin-padding;
      }

      &:hover {
        .e-editable-overlay-icon {
          visibility: visible;
        }

        &.e-editable-open {
          .e-editable-overlay-icon {
            visibility: hidden;
          }
        }
      }
    }

    .e-editable-action-buttons {
      margin-top: $editor-buttons-top-margin;
      position: absolute;
      right: $padding-zero;
      z-index: 100;
    }

    &.e-overlay {
      user-select: none;
    }

    &.e-rtl {
      .e-editable-value-wrapper {
        .e-editable-value {
          margin: $editor-rtl-nrml-value-margin;
        }

        .e-editable-overlay-icon {
          left: $editor-nrml-overlay-icon-left-right;
          right: $editable-bgr-tip-width;
        }

        .e-spinner-pane {
          right: unset;
        }

        .e-spinner-pane,
        .e-spinner-pane .e-spinner-inner {
          left: $editor-nrml-value-container-spin-padding;
        }
      }

      .e-editable-value-container {
        .e-editable-value {
          margin: $editor-rtl-nrml-value-margin;
        }

        .e-editable-overlay-icon {
          left: $editor-nrml-overlay-icon-left-right;
          right: $editable-bgr-tip-width;
        }

        .e-spinner-pane {
          right: unset;
        }

        .e-spinner-pane,
        .e-spinner-pane .e-spinner-inner {
          left: $editor-nrml-value-container-spin-padding;
        }
      }

      .e-editable-action-buttons {
        left: $padding-zero;
        right: $editable-bgr-tip-width;
      }
    }
  }

  .e-inplaceeditor,
  .e-inplaceeditor-tip {
    .e-input-group + .e-editable-loading {
      @if $skin-name == 'material' {
        .e-spinner-inner {
          top: 35%;
        }
      }
    }

    .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading {
      .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
        stroke-width: inherit;
      }
    }

    .e-input-group + .e-editable-loading {
      @if $skin-name == 'material' {
        .e-spinner-inner {
          top: 35%;
        }
      }
    }

    .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading {
      .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
        stroke-width: inherit;
      }
    }

    .e-editable-loading {
      display: none;
      min-height: 100%;
      position: absolute;
      top: $padding-zero;

      &.e-show {
        display: block;

        &:not(.e-rte-spin-wrap) .e-spinner-inner {
          left: $editable-bgr-tip-width;
          right: $editor-rtl-spinner-right;
          transform: translateX(-30%) translateY(-50%);
        }
      }
    }

    .e-editable-form {
      width: 100%;

      &.e-loading {
        .e-input-group-icon {
          visibility: hidden;
        }
      }
    }

    .e-component-group {
      margin-bottom: $editor-component-bottom-margin;

      .e-editable-component {
        min-width: 150px;
        position: relative;
      }
    }

    .e-control-overlay {
      visibility: hidden;

      &.e-richtexteditor {
        opacity: .5;
        pointer-events: none;
        user-select: none;
        visibility: visible;
      }
    }

    .e-editable-action-buttons {
      .e-btn-save {
        margin: $editor-nrml-btn-save-margin;
        @if $skin-name == 'tailwind3' {
          padding: $editor-nrml-btn-padding;
        }

        .e-btn-icon.e-icons {
          font-size: $editor-btn-save-icon-size;
        }
      }

      .e-btn-cancel {
        margin: $editor-nrml-btn-cancel-margin;
        @if $skin-name == 'tailwind3' {
          padding: $editor-nrml-btn-padding;
        }

        .e-btn-icon.e-icons {
          font-size: $editor-btn-cancel-icon-size;
        }
      }

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

    &.e-rtl {
      .e-editable-action-buttons {
        .e-btn-save {
          margin: $editor-rtl-nrml-btn-save-margin;
        }

        .e-btn-cancel {
          margin: $editor-rtl-nrml-btn-cancel-margin;
        }
      }

      .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
        left: $editor-rtl-spinner-right;
        right: $editable-bgr-tip-width;
        transform: translateX(30%) translateY(-50%);
      }
    }
  }

  .e-inplaceeditor-tip {
    opacity: 1;
    width: $editable-bgr-tip-width;

    &.e-tooltip-wrap {
      max-width: 100%;

      .e-input-group.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
      .e-input-group.e-control-container .e-clear-icon.e-clear-icon-hide {
        display: block;
        visibility: hidden;
      }

      .e-tip-content {
        padding: $padding-zero;

        .e-editable-title {
          align-content: center;
          display: flex;
          flex-direction: column;
          font-family: $font-family;
          font-size: $editor-nrml-tip-title-font-size;
          font-weight: $editor-tip-title-font-weight;
          height: $editor-nrml-tip-title-container-size;
          justify-content: center;
          padding: $editor-nrml-tip-title-padding;
        }

        .e-editable-wrapper {
          display: flex;
          padding: $editor-nrml-tip-wrapper-padding;

          .e-editable-action-buttons {
            float: right;
            margin-top: $editor-buttons-top-margin;
            position: relative;
            right: $editable-bgr-tip-width;
            top: $editable-bgr-tip-width;
          }
        }

        .e-editable-container {
          display: flex;
          padding: $editor-nrml-tip-wrapper-padding;

          .e-editable-action-buttons {
            float: right;
            margin-top: $editor-buttons-top-margin;
            position: relative;
            right: $editable-bgr-tip-width;
            top: $editable-bgr-tip-width;
          }
        }

        .e-editable-title + .e-editable-wrapper {
          padding: $editor-nrml-wrapper-title-with-padding;
        }

        .e-editable-title + .e-editable-container {
          padding: $editor-nrml-wrapper-title-with-padding;
        }
      }
    }

    &.e-hide {
      visibility: hidden;
    }

    &.e-rtl {
      &.e-tooltip-wrap .e-tip-content {
        .e-editable-title {
          padding: $editor-rtl-nrml-tip-title-padding;
        }

        .e-editable-wrapper {
          .e-editable-action-buttons {
            float: left;
          }
        }

        .e-editable-container {
          .e-editable-action-buttons {
            float: left;
          }
        }
      }
    }
  }

  .e-content-placeholder.e-inplaceeditor.e-placeholder-inplaceeditor {
    background-size: 150px 60px;
    min-height: $editor-content-min-height;
  }

  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    .e-control .e-inplaceeditor,
    .e-tooltip-wrap.e-popup.e-inplaceeditor-tip.e-popup-open,
    .e-inplaceeditor .e-input-group.e-control-wrapper.e-editable-elements {
      border-radius: $inplace-editor-editable-radius;
    }
  }

  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    .e-control.e-inplaceeditor .e-editable-value-wrapper {
      min-height: 30px;
    }
  }
}

@include export-module('inplaceeditor-theme') {
  .e-inplaceeditor {
    .e-editable-value-wrapper {
      .e-editable-value {
        border-bottom: $editor-value-text-border;
        color: $editor-value-text-color;
      }

      .e-editable-overlay-icon {
        color: $editor-overlay-icon-color;
      }

      &.e-loading {
        .e-editable-value {
          border-bottom: 0;
        }
      }

      &:hover {
        background: $editor-value-hover-bg;
        border-radius: $editor-tip-content-bdr-radius;

        .e-editable-value {
          border-bottom-color: transparent;
        }
      }
    }

    .e-editable-value-container {
      .e-editable-value {
        border-bottom: $editor-value-text-border;
        color: $editor-value-text-color;
      }

      .e-editable-overlay-icon {
        color: $editor-overlay-icon-color;
      }

      &.e-loading {
        .e-editable-value {
          border-bottom: 0;
        }
      }

      &:hover {
        background: $editor-value-hover-bg;
        border-radius: $editor-tip-content-bdr-radius;

        .e-editable-value {
          border-bottom-color: transparent;
        }
      }
    }

    &[data-underline = 'false'] {
      .e-editable-value-wrapper {
        .e-editable-value {
          border-bottom: 0;
        }
      }

      .e-editable-value-container {
        .e-editable-value {
          border-bottom: 0;
        }
      }
    }

    &.e-disable {
      pointer-events: none;
      touch-action: none;

      .e-editable-value-wrapper {
        .e-editable-value {
          border-bottom-color: transparent;
        }
      }

      .e-editable-value-container {
        .e-editable-value {
          border-bottom-color: transparent;
        }
      }
    }
  }

  .e-inplaceeditor,
  .e-inplaceeditor-tip {
    .e-editable-action-buttons {
      .e-btn-save.e-icon-btn,
      .e-btn-cancel.e-icon-btn {

        @if $skin-name == 'fabric-dark' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
          box-shadow: none;
        }
        @else if $skin-name == 'fabric' {
          box-shadow: 0 1px 4px 0 $black-color;
        }
        @else if $skin-name == 'bootstrap' {
          box-shadow: 0 1px 4px 0 $black-color;
        }
        @else if $skin-name == 'bootstrap4' {
          background-color: $content-bg;
          border: 1px solid $gray-400;
          box-shadow: 0 1px 4px 0 $black-color;
        }

        @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          background-color: $content-bg-color;
          border: 1px solid $border-light;
          border-radius: 4px;
        }

        .e-btn-icon.e-icons {
          color: $editor-btn-icon-color;
        }

        @if $skin-name == 'bootstrap4' {
          &:hover {
            background-color: color.adjust($gray-600, $lightness: -7.5%);
            border: 1px solid color.adjust($gray-600, $lightness: -10%);
          }

          &:disabled {
            background-color: $content-bg;
            border: 1px solid $gray-400;
            box-shadow: 0 1px 4px 0 $black-color;
          }
        }
        @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          &:hover {
            background-color: color.adjust($gray-600, $lightness: -7.5%);
            border: 1px solid color.adjust($gray-600, $lightness: -10%);
          }

          &:disabled{
            background-color: $content-bg-color;
            border: 1px solid $border-light;
            border-radius: 4px;
          }
        }

        @if $skin-name == 'bootstrap4' {
          &:focus {
            background-color: $gray-600;
            border: 1px solid $gray-600;
          }
        }

        @if $skin-name == 'bootstrap4' {
          &:active {
            background-color: color.adjust($gray-600, $lightness: -10%);
            border: 1px solid color.adjust($gray-600, $lightness: -12.5%);
          }
        }

        &:hover,
        &:active {
          .e-btn-icon.e-icons {
            @if $skin-name == 'bootstrap4' or $skin-name =='bootstrap5' or $skin-name == 'bootstrap5.3' {
              color: $white;
            }
          }
        }

        &:focus {
          .e-btn-icon.e-icons {
            @if $skin-name == 'bootstrap4' {
              color: $white;
            }
          }
        }
      }
    }
  }

  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
    .e-inplaceeditor .e-editable-value-wrapper {
      background-color: $editor-background-color;
      border-radius: 4px;
    }

    .e-inplaceeditor .e-editable-value-wrapper.e-tooltip.e-editable-open {
      background: $wrapper-background-color;
    }
  }

  .e-inplaceeditor-tip {
    &.e-tooltip-wrap.e-popup {
      background: $editor-tip-bg;
      box-shadow: $editor-tip-box-shadow;
      @if $skin-name == 'FluentUI' or $skin-name == 'Material3' {
        border-radius: $editor-popup-tip-wrapper-bdr-radius;
      }

      .e-tip-content {
        border-radius: $editor-popup-tip-content-bdr-radius;
        color: $editor-value-text-color;
        @if $skin-name == 'Material3' {
          background: $editor-tip-title-bg;
        }
      }

      .e-arrow-tip-inner {
        color: $editor-tip-arrow-icon-color;
      }

      .e-arrow-tip-outer {
        &.e-tip-top {
          border-bottom-color: $editor-tip-arrow-bdr-color;
        }

        &.e-tip-bottom {
          border-top-color: $editor-tip-arrow-bdr-color;
        }
      }

      &.e-popup {
        border: $editor-tip-border;
        @if $skin-name == 'Material3' {
          border-radius: 8px;
        }
      }

      .e-editable-title {
        @if $skin-name != 'fluent2' {
          background: $editor-tip-title-bg;
          border-bottom: $editor-tio-title-border-bottom;
          color: $editor-tip-title-color;
        }
        @else {
          color: $editor-tip-title-color;
        }
      }
    }

    &.e-editable-tip-title {
      &.e-tooltip-wrap {
        .e-arrow-tip-outer {
          &.e-tip-top {
            border-bottom-color: $editor-tip-title-arrow-bdr-color;
          }
        }

        .e-arrow-tip-inner {
          &.e-tip-top {
            color: $editor-tip-title-arrow-icon-color;
          }
        }
      }
    }
  }
}

@include export-module('inplaceeditor-bootstrap-dark-icons') {

  /*! inplaceeditor icons */
  .e-inplaceeditor,
  .e-inplaceeditor-tip {

    .e-save-icon::before {
      content: '\e614';
    }

    .e-cancel-icon::before {
      content: '\e60a';
    }

    .e-editable-overlay-icon::before {
      content: '\e338';
    }
  }
}

@include export-module('inplace-editor-bigger') {
  .e-bigger .e-inplaceeditor,
  .e-inplaceeditor.e-bigger {
    .e-editable-value-wrapper {
      padding: $editor-big-value-container-padding;

      .e-editable-value {
        font-size: $editor-big-value-text-font-size;
        margin: $editor-big-value-margin;
      }

      .e-editable-overlay-icon {
        right: $editor-big-overlay-icon-left-right;
        width: $editor-big-overlay-icon-container-size;

        &::before {
          font-size: $editor-big-overlay-icon-size;
        }
      }

      .e-spinner-pane .e-spinner-inner {
        right: $editor-big-value-container-spin-padding;
      }
    }

    .e-editable-value-container {
      padding: $editor-big-value-container-padding;

      .e-editable-value {
        font-size: $editor-big-value-text-font-size;
        margin: $editor-big-value-margin;
      }

      .e-editable-overlay-icon {
        right: $editor-big-overlay-icon-left-right;
        width: $editor-big-overlay-icon-container-size;

        &::before {
          font-size: $editor-big-overlay-icon-size;
        }
      }

      .e-spinner-pane .e-spinner-inner {
        right: $editor-big-value-container-spin-padding;
      }
    }

    .e-editable-action-buttons {

      .e-btn-save {
        margin: $editor-big-btn-save-margin;
        @if $skin-name == 'tailwind3' {
          padding: $editor-btn-save-tailwind3-padding;
        }
      }

      .e-btn-cancel {
        margin: $editor-big-btn-cancel-margin;
        @if $skin-name == 'tailwind3' {
          padding: $editor-btn-cancel-tailwind3-padding;
        }
      }
    }

    &.e-rtl {
      .e-editable-value-wrapper {
        .e-editable-value {
          margin: $editor-rtl-big-value-margin;
        }

        .e-editable-overlay-icon {
          left: $editor-big-overlay-icon-left-right;
          right: auto;
        }

        .e-spinner-pane,
        .e-spinner-pane .e-spinner-inner {
          left: $editor-big-value-container-spin-padding;
        }
      }

      .e-editable-value-container {
        .e-editable-value {
          margin: $editor-rtl-big-value-margin;
        }

        .e-editable-overlay-icon {
          left: $editor-big-overlay-icon-left-right;
          right: auto;
        }

        .e-spinner-pane,
        .e-spinner-pane .e-spinner-inner {
          left: $editor-big-value-container-spin-padding;
        }
      }

      .e-editable-action-buttons {
        .e-btn-save {
          margin: $editor-rtl-big-btn-save-margin;
        }

        .e-btn-cancel {
          margin: $editor-rtl-big-btn-cancel-margin;
        }
      }
    }
  }
  .e-bigger .e-inplaceeditor,
  .e-inplaceeditor.e-bigger,
  .e-bigger .e-inplaceeditor-tip,
  .e-inplaceeditor-tip.e-bigger {
    width: $editable-bgr-tip-width;

    .e-input-group + .e-editable-loading {
      @if $skin-name == 'material' {
        .e-spinner-inner {
          top: 45%;
        }
      }
    }

    .e-editable-action-buttons {
      .e-btn-save,
      .e-btn-cancel {
        .e-btn-icon.e-icons {
          @if $skin-name == 'bootstrap4' {
            font-size: 16px;
          }
        }
      }
    }
  }
  .e-bigger .e-inplaceeditor-tip,
  .e-inplaceeditor-tip.e-bigger {
    &.e-tooltip-wrap {
      .e-tip-content {
        @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' {
          padding: 0;
        }

        .e-editable-wrapper {
          padding: $editor-big-tip-wrapper-padding;
        }

        .e-editable-container {
          padding: $editor-big-tip-wrapper-padding;
        }

        .e-editable-title + .e-editable-wrapper {
          padding: $editor-big-wrapper-title-with-padding;
        }

        .e-editable-title + .e-editable-container {
          padding: $editor-big-wrapper-title-with-padding;
        }
      }
    }

    .e-editable-title {
      font-size: $editor-big-tip-title-font-size;
      min-height: $editor-big-tip-title-container-size;
      padding: $editor-big-tip-title-padding;
    }

    &.e-rtl {
      &.e-tooltip-wrap .e-tip-content {
        .e-editable-title {
          padding: $editor-rtl-big-tip-title-padding;
        }
      }
    }
  }
  .e-bigger .e-content-placeholder.e-inplaceeditor.e-placeholder-inplaceeditor,
  .e-bigger.e-content-placeholder.e-inplaceeditor.e-placeholder-inplaceeditor {
    background-size: 150px 70px;
    min-height: $editor-bgr-content-min-height;
  }
  @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {

    .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
    .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
      min-height: $editor-value-min-height;
    }

    .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title,
    .e-bigger.e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
      font-size: $editor-big-tip-title-font-size;
    }

    .e-bigger .e-inplaceeditor .e-editable-action-buttons .e-btn-icon.e-icons .e-bigger.e-inplaceeditor .e-editable-action-buttons .e-btn-icon.e-icons {
      font-size: $font-icon-22;
    }
  }
}

/*! Kanban component's bootstrap theme definitions and variables */
$kanban-column-bg-color:$gray-dark !default;
$kanban-border-color: $grey-e6 !default;
$kanban-default-font-color: $grey-light-font !default;
$kanban-content-font: $grey-light-font !default;
$kanban-card-selection-bg-color: $grey-lighter !default;
$kanban-dropped-clone-bg-color: rgba($brand-primary, .1) !default;
$kanban-dropped-clone-border-color: $brand-primary !default;
$kanban-dragged-clone-border-color: $grey-dd !default;
$kanban-icons-color: $gray-light !default;
$kanban-bg-color: $gray-dark !default;
$kanban-text-area-bg-color: initial !default;
$kanban-text-area-color: $grey-dark-font !default;
$kanban-popup-overlay-bg-color: #383838 !default;
$kanban-min-color: $msg-warning-bg-color !default;
$kanban-max-color:$msg-danger-bg-color !default;
$kanban-header-border-color: $grey-e6 !default;
$kanban-mb-popup-container-box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .2) !default;
$kanban-icons-border-radius: 4px !default;
$kanban-tags-bg-color: #eceaff !default;
$kanban-tags-color: #3225c9 !default;

$kanban-table-border-spacing: 10px 0 !default;
$kanban-table-bigger-border-spacing: 10px 0 !default;
$kanban-table-swimlane-border-spacing: $kanban-table-border-spacing !default;
$kanban-table-bigger-swimlane-border-spacing: $kanban-table-bigger-border-spacing !default;
$kanban-table-col-collapse-width: 50px !default;
$kanban-table-col-collapse-bgr-width: 50px !default;
$kanban-frozen-swimlane-row-padding: 13px 0 0 10px !default;
$kanban-frozen-swimlane-row-bgr-padding: $kanban-frozen-swimlane-row-padding !default;
$kanban-frozen-swimlane-row-header-padding: 2px !default;
$kanban-frozen-swimlane-row-header-line-height: 20px !default;
$kanban-frozen-swimlane-row-header-font-size: 14px !default;
$kanban-frozen-swimlane-row-header-bgr-font-size: 14px !default;
$kanban-frozen-swl-row-head-item-count-font-size: 12px !default;
$kanban-frozen-swl-row-head-item-count-bgr-font-size: 12px !default;
$kanban-frozen-swl-row-head-item-count-line-height: 20px !default;
$kanban-frozen-swl-row-head-item-count-bgr-line-height: 20px !default;
$kanban-frozen-swl-row-head-item-count-padding: 2px !default;
$kanban-frozen-swl-row-head-item-count-bgr-padding: 2px !default;
$kanban-frozen-swl-row-head-item-count-opacity: .77 !default;
$kanban-frozen-swl-row-head-item-count-font-weight: 400 !default;
$kanban-swl-frozen-header-item-count-color: $kanban-default-font-color !default;
$kanban-swl-frozen-header-row-icon-border: 1px solid transparent !default;
$kanban-swl-frozen-header-row-icon-height: 24px !default;
$kanban-swl-frozen-header-row-icon-margin: 0 0 0 8px !default;
$kanban-swl-frozen-header-row-icon-padding: 6px !default;
$kanban-swl-frozen-header-row-icon-font-size: 12px !default;

$kanban-swl-frz-head-row-icon-hover-margin: 0 0 0 8px !default;
$kanban-swl-frz-header-row-icon-hover-padding: 6px !default;
$kanban-swl-frozen-header-row-icon-hover-bg-color: $grey-light !default;
$kanban-swl-frozen-header-row-icon-focus-bg-color: $grey-light !default;
$kanban-swl-frozen-header-row-icon-hover-border: 1px solid transparent !default;
$kanban-swl-frozen-header-row-icon-hover-box-shadow: none !default;
$kanban-swl-frozen-header-row-icon-hover-color: $gray-light !default;
$kanban-swl-frozen-header-row-icon-focus-box-shadow: none !default;
$kanban-header-cell-height: 50px !default;
$kanban-header-cell-bgr-height: 56px !default;
$kanban-header-cell-padding: 5px 8px !default;
$kanban-stacked-header-cell-border-btm: 1px solid $grey-e6 !default;
$kanban-toggle-header-icon-font-size: 12px !default;
$kanban-toggle-header-icon-bgr-font-size: 12px !default;
$kanban-toggle-header-expand-icon-padding: 6px !default;
$kanban-toggle-header-collapse-icon-padding: 11px !default;
$kanban-toggle-header-collapse-width: 50px !default;
$kanban-header-text-font-size: 15px !default;
$kanban-header-text-font-weight: 400 !default;
$kanban-header-text-line-height: 24px !default;
$kanban-header-text-overflow: ellipsis !default;
$kanban-header-text-bgr-font-size: 16px !default;
$kanban-header-text-bgr-font-weight: 400 !default;
$kanban-header-text-bgr-line-height: 24px !default;
$kanban-header-text-bgr-transform: lowercase !default;
$kanban-header-item-count-font-size: 12px !default;
$kanban-header-item-count-font-weight: 400 !default;
$kanban-header-item-count-line-height: 24px !default;
$kanban-header-item-count-opacity: .77 !default;
$kanban-header-item-count-margin-top: 0 !default;
$kanban-header-item-count-text-transform: lowercase !default;
$kanban-header-item-count-bgr-font-size: $kanban-header-item-count-font-size !default;
$kanban-header-item-count-bgr-font-weight: $kanban-header-item-count-font-weight !default;
$kanban-header-item-count-bgr-line-height: $kanban-header-item-count-line-height !default;
$kanban-header-item-count-bgr-margin-top: $kanban-header-item-count-margin-top !default;
$kanban-header-item-count-bgr-text-transform: $kanban-header-item-count-text-transform !default;
$kanban-header-min-max-count-font-size: 13px !default;
$kanban-header-min-max-count-font-weight: 400 !default;
$kanban-header-min-max-count-opacity: .77 !default;
$kanban-collapse-header-text-color: $grey-light-font !default;
$kanban-collapse-header-text-font-size: 16px !default;
$kanban-collapse-header-text-font-weight: 400 !default;
$kanban-collapse-header-text-padding: 8px 0 0 13px !default;
$kanban-collapse-header-text-transform: lowercase !default;
$kanban-card-container-padding: 8px 8px 0 !default;
$kanban-card-container-bgr-padding: 8px 8px 0 !default;
$kanban-empty-card-font-size: 13px !default;
$kanban-empty-card-line-height: 40px !default;
$kanban-empty-card-padding: 10px 0 !default;
$kanban-empty-card-color: inherit !default;
$kanban-empty-card-margin: 0 !default;
$kanban-empty-card-display: inline !default;
$kanban-card-margin-bottom: 8px !default;
$kanban-card-bgr-margin-bottom: 8px !default;
$kanban-card-border: 1px solid rgba(0, 0, 0, .12) !default;
$kanban-card-border-radius: 4px !default;
$kanban-card-normal-box-shadow: none !default;
$kanban-card-header-padding: 7px 11px 0 !default;
$kanban-card-header-bgr-padding: 7px 11px 0 !default;
$kanban-color-card-header-padding: 7px 11px 0 8px !default;
$kanban-color-card-header-bgr-padding: 7px 11px 0 8px !default;
$kanban-card-header-title-font-size: 14px !default;
$kanban-card-header-title-line-height: 20px !default;
$kanban-card-header-title-font-weight: 400 !default;
$kanban-card-header-title-bgr-font-size: 15px !default;
$kanban-card-header-title-bgr-line-height: 20px !default;
$kanban-card-footer-padding: 0 11px 7px !default;
$kanban-card-footer-bgr-padding: 0 11px 7px !default;
$kanban-color-card-footer-padding: 0 11px 7px 8px !default;
$kanban-color-card-footer-bgr-padding: 0 11px 7px 8px !default;
$kanban-card-content-font-size: 13px !default;
$kanban-card-content-line-height: 20px !default;
$kanban-card-content-padding: 8px 11px !default;
$kanban-color-card-content-padding: 8px 11px 8px 8px !default;
$kanban-card-content-bgr-font-size: 14px !default;
$kanban-card-content-bgr-line-height: 20px !default;
$kanban-card-content-bgr-padding: 8px 11px !default;
$kanban-color-card-content-bgr-padding: 8px 11px 8px 8px !default;
$kanban-color-card-border: $kanban-card-border !default;
$kanban-color-card-border-left: 3px solid !default;
$kanban-color-card-hover-border: $kanban-card-border !default;
$kanban-color-card-hover-border-left: 3px solid !default;
$kanban-color-card-hover-box-shadow: none !default;
$kanban-color-card-focus-border: $kanban-card-border !default;
$kanban-color-card-focus-border-left: 3px solid !default;
$kanban-color-card-tags-padding: 0 11px 8px 8px !default;
$kanban-card-tags-padding: 0 11px 8px !default;
$kanban-color-card-selection-border: $kanban-card-border !default;
$kanban-color-card-selection-border-left: 3px solid !default;
$kanban-color-card-selection-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-color-card-selection-hover-border: $kanban-card-border !default;
$kanban-color-card-selection-hover-border-left: 3px solid !default;
$kanban-color-card-selection-hover-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-color-card-selection-hover-padding: 0 !default;
$kanban-card-selection-border: $kanban-card-border !default;
$kanban-card-selection-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-card-selection-hover-border: $kanban-card-border !default;
$kanban-card-selection-hover-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-card-selection-hover-padding: 0 !default;
$kanban-card-tag-border-radius: 4px !default;
$kanban-card-tag-font-size: 12px !default;
$kanban-card-tag-line-height: 20px !default;
$kanban-card-tag-margin-right: 8px !default;
$kanban-card-tag-padding: 2px 8px !default;
$kanban-card-hover-border: $kanban-card-border !default;
$kanban-card-normal-hover-box-shadow: $kanban-card-normal-box-shadow !default;
$kanban-card-focus-border: $kanban-card-border !default;
$kanban-multi-card-text-bg-color: $grey-white !default;
$kanban-target-drag-drop-clone-margin-bottom: 8px !default;
$kanban-target-drag-drop-clone-bgr-margin-bottom: 8px !default;
$kanban-target-drag-drop-clone-border-radius: 0 !default;
$kanban-target-dragged-clone-bg-color: $grey-f5 !default;
$kanban-swl-row-height: 50px !default;
$kanban-swl-row-header-padding: 0 !default;
$kanban-swl-row-header-bgr-padding: $kanban-swl-row-header-padding !default;
$kanban-swl-header-icon-border: 1px solid transparent !default;
$kanban-swl-header-icon-color: $kanban-icons-color !default;
$kanban-swl-header-icon-height: 24px !default;
$kanban-swl-header-icon-margin: 0 0 0 8px !default;
$kanban-swl-header-icon-rtl-margin: 0 8px 0 0 !default;
$kanban-swl-header-icon-padding: 6px !default;
$kanban-swl-header-icon-font-size: 12px !default;
$kanban-swl-header-icon-bgr-font-size: 12px !default;
$kanban-swl-header-icon-hover-border: $kanban-swl-header-icon-border !default;
$kanban-swl-header-icon-hover-color: $kanban-icons-color !default;
$kanban-swl-header-icon-hover-margin: 0 0 0 8px !default;
$kanban-swl-header-icon-hover-padding: 6px !default;
$kanban-swl-header-icon-hover-font-size: 12px !default;
$kanban-swl-header-icon-hover-background: $grey-light !default;
$kanban-swl-header-icon-hover-border-radius: $kanban-icons-border-radius !default;
$kanban-swl-header-icon-hover-box-shadow: none !default;
$kanban-swl-header-text-line-height: 20px;
$kanban-swl-header-text-bgr-line-height: 20px;
$kanban-swl-header-text-padding: 2px;
$kanban-swl-header-text-bgr-font-size: 14px;
$kanban-swl-header-item-count-font-size: 12px;
$kanban-swl-header-item-count-line-height: 20px;
$kanban-swl-header-item-count-font-opacity: .57;
$kanban-swl-header-item-count-padding: 2px;
$kanban-swl-header-item-count-color: inherit;
$kanban-swl-header-item-count-font-weight: 400;
$kanban-swl-header-item-count-bgr-font-size: 12px;
$kanban-swl-header-item-count-bgr-line-height: 20px;
$kanban-swl-header-item-count-bgr-padding: 2px;
$kanban-content-cells-focus-border: 1px solid $kanban-border-color;
$kanban-content-cells-focus-box-shadow: none;
$kanban-mb-swl-name-font-size: 14px;
$kanban-mb-swl-name-padding: 5px;
$kanban-mb-swl-name-color: inherit;
$kanban-mb-swl-name-font-weight: 400;
$kanban-mb-swl-name-line-height: 1.5;
$kanban-mb-swl-menu-icon-font-size: 14px;
$kanban-mb-swl-menu-icon-bgr-font-size: 18px;
$kanban-mb-swl-menu-icon-color: inherit;
$kanban-mb-swl-overlay-opacity: .5;
$kanban-dialog-form-table-td-line-height: 18px;
$kanban-dialog-form-table-td-opacity: .87;
$kanban-dialog-form-table-td-padding: 5px 0;
$kanban-dialog-form-table-td-color: inherit;
$kanban-dialog-form-table-td-font-weight: 400;
$kanban-mb-popup-content-padding: 4px !default;
$kanban-mb-popup-content-color: inherit !default;
$kanban-dialog-text-area-focus-shadow: none !default;

//Color Start
$kanban-header-text-color: $grey-light-font !default;
$kanban-header-item-count-color: $grey-light-font !default;
$kanban-header-limits-color: $grey-light-font !default;
$kanban-col-expand-collapse-bg-color: $grey-light;
$kanban-col-expand-collapse-color: $kanban-icons-color;
$kanban-col-expand-collapse-border: 1px solid transparent;
$kanban-col-expand-collapse-box-shadow: none;
$skeleton-card-color: $gray;
$skelton-box-shadow: none;

//Color End

//Start of Typography Variables Implementation
//font-size
$kanban-dialog-form-table-td-font-size: 14px !default;
$kanban-swl-header-text-font-size: 14px !default;
$kanban-big-mb-toolbar-swl-font-size: 18px !default;
$kanban-mb-popup-content-font-size: 15px !default;
$kanban-collapsed-header-item-count-font-size: 13px !default;

//font-weight
$kanban-mb-popup-content-font-weight: 500 !default;
$kanban-dialog-text-areas-font-weight: 400 !default;
$kanban-frozen-swimlane-row-header-font-weight: 400 !default;
$kanban-header-item-count-font-weight: 400 !default;
$kanban-swl-header-text-font-weight: 400 !default;

//border-radius
$kanban-mb-popup-container-border-radius: 2px !default;
$kanban-default-border-radius: 4px !default;
$skelton-box-border-radius: 4px !default;
$kanban-dialog-text-areas-border-radius: 4px !default;
$kanban-skeleton-header-small-border-radius: 4px 4px 0 0 !default;
$kanban-skeleton-header-large-border-radius: 4px !default;
$kanban-not-swl-content-border-radius: 4px !default;

//padding
$kanban-cells-add-icon-padding: 11px !default;
$kanban-swimlane-header-toolbar-padding: 10px !default;
$kanban-mb-swl-menu-icon-padding: 7px !default;
$Kanban-popup-device-padding: 15px !default;
$kanban-header-min-max-count-padding: 4px 8px !default;
$kanban-dialog-text-areas-padding: 4px 8px 4px 12px !default;

//padding top
$kanban-header-limits-padding-top: 3px !default;
$kanban-mobile-popup-header-padding-top: 3px !default;
$kanban-swl-header-icon-bgr-small-padding-top: 4px !default;
$kanban-swl-header-icon-bgr-hover-padding-top: 4px !default;
$kanban-swimlane-toolbar-menu-title-padding-top: 6px !default;
$kanban-frozen-toolbar-swl-item-count-padding-top: 9px !default;

//padding left
$rte-kanban-form-table-padding-left: 10px !default;
$kanban-multi-card-text-padding-left: 8px !default;
$kanban-header-text-padding-left: 5px !default;
$kanban-mb-swl-menu-icon-padding-left: 4px !default;

//padding right
$rte-kanban-form-table-padding-right: 0 !default;
$kanban-header-text-padding-right: 5px !default;
$kanban-dialog-form-table-padding-right: 10px !default;
$kanban-header-text-padding-right-rtl: initial;

//margin
$kanban-skeleton-card-margin: 8px !default;
$kanban-cells-add-button-margin: 8px 8px 0 !default;
$kanban-mb-popup-container-margin: 0 !default;

//margin bottom
$kanban-swimlane-header-toolbar-margin-bottom: 3px !default;
$kanban-big-swl-header-toolbar-margin-bottom: 5px !default;

//margin left
$kanban-dialog-delete-btn-margin-left: 0 !default;

//border
$kanban-table-border: 0 !default;
$kanban-mobile-popup-border: 0 !default;
$kanban-column-border: 1px dashed $kanban-border-color;
$kanban-cells-add-button-border: 1px dashed $kanban-dropped-clone-border-color;
$kanban-cells-add-button-focus-border: 1px dashed $kanban-border-color;
$kanban-multi-card-clone-border: 1px solid $kanban-dragged-clone-border-color;
$kanban-dragged-clone-border: 1px dashed $kanban-dragged-clone-border-color;
$kanban-dropped-clone-border: 1px dashed $kanban-dropped-clone-border-color;
$kanban-not-swl-content-border: 1px solid transparent;
$kanban-not-swl-content-dropping-border: 1px dashed $kanban-border-color;
$kanban-swl-resource-border: 1px solid $kanban-header-border-color;
$kanban-delete-border: 1px solid !default;
$kanban-header-column-border: 1px solid transparent !default;

//border top
$kanban-skeleton-content-border-top: 1px solid $kanban-border-color;
$kanban-target-clone-border-top: 1px solid $kanban-border-color;

//border bottom
$kanban-card-header-border-bottom: 0 !default;
$kanban-collapsed-not-swl-border-bottom: 0 !default;
$kanban-swimlane-header-toolbar-border-bottom: 0 !default;
$kanban-header-swl-cells-border-bottom: 0 !default;
$kanban-target-column-key-border-bottom: 1px dashed $kanban-border-color;

//border left
$kanban-target-column-key-border-left: 1px dashed $kanban-border-color;

//border right
$kanban-target-column-key-border-right: 1px dashed $kanban-border-color;

// height
$kanban-limits-height: 26px !default;
$kanban-add-button-height: 36px !default;
$card-wrapper-container-height: inherit !default;
$kanban-multi-card-clone-height: 34px !default;
$kanban-swl-resource-height: 100% !default;
$kanban-mb-popup-container-height: 60px !default;
$kanban-big-swl-header-min-height: 56px !default;

//End of Typography Variables Implementation

@include export-module('kanban-layout') {

  /*! kanban component layout */

  .e-kanban {
    display: block;
    outline: medium none;
    position: relative;
    user-select: none;

    .e-kanban-table {
      border: $kanban-table-border;
      border-collapse: separate;
      border-spacing: $kanban-table-border-spacing;
      table-layout: fixed;
      width: 100%;

      col.e-collapsed {
        width: $kanban-table-col-collapse-width;
      }
    }

    .e-swimlane {
      .e-kanban-table {
        &.e-content-table {
          border-spacing: $kanban-table-swimlane-border-spacing;
        }
      }
    }

    .e-frozen-swimlane-row {
      position: relative;
      z-index: 101;

      .e-frozen-row {
        padding: $kanban-frozen-swimlane-row-padding;

        .e-swimlane-header {
          display: flex;

          .e-swimlane-text {
            font-size: $kanban-frozen-swimlane-row-header-font-size;
            font-weight: $kanban-frozen-swimlane-row-header-font-weight;
            line-height: $kanban-frozen-swimlane-row-header-line-height;
            padding: $kanban-frozen-swimlane-row-header-padding;
          }

          .e-item-count {
            font-size: $kanban-frozen-swl-row-head-item-count-font-size;
            font-weight: $kanban-frozen-swl-row-head-item-count-font-weight;
            line-height: $kanban-frozen-swl-row-head-item-count-line-height;
            opacity: $kanban-frozen-swl-row-head-item-count-opacity;
            padding: $kanban-frozen-swl-row-head-item-count-padding;
          }

          .e-swimlane-row-expand,
          .e-swimlane-row-collapse {
            border: $kanban-swl-frozen-header-row-icon-border;
            color: $kanban-icons-color;
            cursor: pointer;
            font-size: $kanban-swl-frozen-header-row-icon-font-size;
            height: $kanban-swl-frozen-header-row-icon-height;
            margin: $kanban-swl-frozen-header-row-icon-margin;
            padding: $kanban-swl-frozen-header-row-icon-padding;

            &:hover,
            &:focus {
              background: $kanban-swl-frozen-header-row-icon-hover-bg-color;
              border: $kanban-swl-frozen-header-row-icon-hover-border;
              border-radius: $kanban-icons-border-radius;
              box-shadow: $kanban-swl-frozen-header-row-icon-hover-box-shadow;
              color: $kanban-swl-frozen-header-row-icon-hover-color;
              margin: $kanban-swl-frz-head-row-icon-hover-margin;
              padding: $kanban-swl-frz-header-row-icon-hover-padding;
            }

            &:focus {
              background: $kanban-swl-frozen-header-row-icon-focus-bg-color;
              box-shadow: $kanban-swl-frozen-header-row-icon-focus-box-shadow;
            }
          }
        }
      }
    }

    .e-kanban-header {
      > div {
        overflow: hidden;
      }

      .e-kanban-column-skeleton {
        background: $kanban-column-bg-color;
        color: $kanban-default-font-color;
        border-radius: $kanban-default-border-radius;
        overflow: hidden;
        border: $kanban-column-border;
        box-sizing: border-box;
      }

      .e-kanban-skeleton-card {
        background: $skeleton-card-color;
        box-shadow: $skelton-box-shadow;
        margin: $kanban-skeleton-card-margin;
        border-radius: $skelton-box-border-radius;
      }

      .e-kanban-skeleton-content {
        border-top: $kanban-skeleton-content-border-top;
      }

      .e-header-cells {
        @if $skin-name =='material3' {
          border-radius: $kanban-skeleton-header-small-border-radius;
        }

        @else {
          border-radius: $kanban-skeleton-header-large-border-radius;
        }
        height: $kanban-header-cell-height;
        overflow: hidden;
        padding: $kanban-header-cell-padding;
        position: relative;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;

        &.e-draggable {
          cursor: all-scroll;
        }

        .e-header-wrap {
          display: flex;

          .e-header-title {
            display: flex;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
          }
        }

        &.e-stacked-header-cell {
          border-bottom: $kanban-stacked-header-cell-border-btm;
        }

        &.e-toggle-header {
          .e-column-expand {
            cursor: pointer;
            font-size: $kanban-toggle-header-icon-font-size;
            padding: $kanban-toggle-header-expand-icon-padding;
          }

          .e-column-collapse {
            cursor: pointer;
            font-size: $kanban-toggle-header-icon-font-size;
            padding: $kanban-toggle-header-collapse-icon-padding;
          }
        }

        &.e-min-color {
          background: $kanban-min-color;
        }

        &.e-max-color {
          background: $kanban-max-color;
        }

        &.e-collapsed {
          background: $kanban-column-bg-color;
          text-align: center;
          width: $kanban-toggle-header-collapse-width;

          .e-header-wrap {
            justify-content: center;
          }

          &.e-min-color {
            background: $kanban-min-color;
          }

          &.e-max-color {
            background: $kanban-max-color;
          }

          .e-limits,
          .e-header-title {
            display: none;
          }
        }

        .e-header-text {
          font-size: $kanban-header-text-font-size;
          font-weight: $kanban-header-text-font-weight;
          line-height: $kanban-header-text-line-height;
          overflow: hidden;
          padding-right: $kanban-header-text-padding-right;
          text-overflow: $kanban-header-text-overflow;
        }

        .e-item-count {
          font-size: $kanban-header-item-count-font-size;
          font-weight: $kanban-header-item-count-font-weight;
          line-height: $kanban-header-item-count-line-height;
          margin-top: $kanban-header-item-count-margin-top;
          opacity: $kanban-header-item-count-opacity;
          text-transform: $kanban-header-item-count-text-transform;
        }

        .e-limits {
          display: flex;
          padding-top: $kanban-header-limits-padding-top;

          .e-min-count,
          .e-max-count {
            font-size: $kanban-header-min-max-count-font-size;
            font-weight: $kanban-header-min-max-count-font-weight;
            opacity: $kanban-header-min-max-count-opacity;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .e-max-count {
            text-align: right;
          }
        }
      }
    }

    .e-kanban-content {
      overflow: auto;
      padding-bottom: 10px;

      .e-content-row {
        .e-content-cells {
          .e-limits {
            display: flex;
            height: $kanban-limits-height;
            position: relative;
          }

          .e-kanban-border {
            display: none;
          }

          .e-kanban-border.e-dropping {
            display: block;
            position: absolute;
          }

          .e-limits .e-min-count,
          .e-limits .e-max-count {
            font-size: $kanban-header-min-max-count-font-size;
            font-weight: $kanban-header-min-max-count-font-weight;
            opacity: $kanban-header-min-max-count-opacity;
            padding: $kanban-header-min-max-count-padding;
          }

          .e-limits .e-max-count {
            position: absolute;
            right: 0;
          }

          &.e-min-color {
            background: $kanban-min-color;
          }

          &.e-max-color {
            background: $kanban-max-color;
          }

          &.e-collapsed {
            overflow: hidden;
            text-align: center;
            width: $kanban-toggle-header-collapse-width;

            .e-card-wrapper,
            .e-card-container,
            .e-limits {
              display: none;
            }

            .e-collapse-header-text {
              color: $kanban-collapse-header-text-color;
              font-size: $kanban-collapse-header-text-font-size;
              font-weight: $kanban-collapse-header-text-font-weight;
              overflow: hidden;
              padding: $kanban-collapse-header-text-padding;
              position: relative;
              text-overflow: ellipsis;
              white-space: nowrap;
              writing-mode: vertical-lr;

              .e-item-count {
                display: inline-block;
                font-size: $kanban-collapsed-header-item-count-font-size;
                font-weight: $kanban-header-item-count-font-weight;
                opacity: .57;
              }
            }
          }

          .e-show-add-button {
            border: $kanban-cells-add-button-border;
            height: $kanban-add-button-height;
            margin: $kanban-cells-add-button-margin;
            display: block;

            &.e-collapsed {
              display: none;
            }

            .e-show-add-icon {
              padding: $kanban-cells-add-icon-padding;
              text-align: center;
            }

            &:focus {
              border: $kanban-cells-add-button-focus-border;
              color: $kanban-border-color;
            }
          }

          .e-multi-card-wrapper,
          .e-multi-card-container {
            display: none;
          }

          .e-card-wrapper,
          .e-card-container {
            height: $card-wrapper-container-height;
            overflow: auto;
            padding: $kanban-card-container-padding;

            .e-empty-card {
              color: $kanban-empty-card-color;
              display: $kanban-empty-card-display;
              font-size: $kanban-empty-card-font-size;
              line-height: $kanban-empty-card-line-height;
              margin: $kanban-empty-card-margin;
              padding: $kanban-empty-card-padding;
              position: relative;
            }

            .e-card {
              border: $kanban-card-border;
              border-radius: $kanban-card-border-radius;
              box-shadow: $kanban-card-normal-box-shadow;
              margin-bottom: $kanban-card-margin-bottom;
              min-height: 50px;

              &.e-draggable {
                cursor: all-scroll;
              }

              .e-card-header {
                padding: $kanban-card-header-padding;
                @if ($skin-name == 'tailwind3') {
                  border-bottom: $kanban-card-header-border-bottom;
                }

                .e-card-header-title {
                  font-size: $kanban-card-header-title-font-size;
                  font-weight: $kanban-card-header-title-font-weight;
                  line-height: $kanban-card-header-title-line-height;
                }
              }

              .e-card-footer {
                display: inline-flex;
                line-height: normal;
                padding: $kanban-card-footer-padding;
              }

              .e-card-content {
                font-size: $kanban-card-content-font-size;
                line-height: $kanban-card-content-line-height;
                padding: $kanban-card-content-padding;
              }

              &.e-card-color {
                border: $kanban-color-card-border;
                border-left: $kanban-color-card-border-left;

                .e-card-header {
                  padding: $kanban-color-card-header-padding;
                }

                .e-card-content {
                  padding: $kanban-color-card-content-padding;
                }

                .e-card-tags {
                  padding: $kanban-color-card-tags-padding;
                }

                &.e-selection {
                  border: $kanban-color-card-selection-border;
                  border-left: $kanban-color-card-selection-border-left;
                  box-shadow: $kanban-color-card-selection-box-shadow;

                  &:hover {
                    border: $kanban-color-card-selection-hover-border;
                    border-left: $kanban-color-card-selection-hover-border-left;
                    box-shadow: $kanban-color-card-selection-hover-box-shadow;
                    padding: $kanban-color-card-selection-hover-padding;
                  }
                }

                &:hover {
                  border: $kanban-color-card-hover-border;
                  border-left: $kanban-color-card-hover-border-left;
                  box-shadow: $kanban-color-card-hover-box-shadow;
                }

                .e-card-footer {
                  padding: $kanban-color-card-footer-padding;
                }
              }

              .e-card-tag {
                border-radius: $kanban-card-tag-border-radius;
                display: inline-block;
                font-size: $kanban-card-tag-font-size;
                line-height: $kanban-card-tag-line-height;
                margin-right: $kanban-card-tag-margin-right;
                max-width: 100%;
                overflow: hidden;
                padding: $kanban-card-tag-padding;
                text-overflow: ellipsis;
              }

              .e-card-tags {
                line-height: 1;
                padding: $kanban-card-tags-padding;
              }

              &.e-cloned-card {
                position: absolute;
                z-index: 1;
              }

              &.e-selection {
                border: $kanban-card-selection-border;
                box-shadow: $kanban-card-selection-box-shadow;

                &:hover {
                  border: $kanban-card-selection-hover-border;
                  box-shadow: $kanban-card-selection-hover-box-shadow;
                  padding: $kanban-card-selection-hover-padding;
                }
              }

              &:hover {
                border: $kanban-card-hover-border;
                box-shadow: $kanban-card-normal-hover-box-shadow;
              }

              &:focus {
                border: $kanban-card-focus-border;
              }

              &.e-card-color {
                &:focus {
                  border: $kanban-color-card-focus-border;
                  border-left: $kanban-color-card-focus-border-left;
                }
              }

              &.e-kanban-dragged-card {
                display: none;
              }
            }

            .e-multi-card-clone {
              border: $kanban-multi-card-clone-border;
              height: $kanban-multi-card-clone-height;
            }

            .e-multi-card-text {
              background: $kanban-multi-card-text-bg-color;
              display: table-cell;
              padding-left: $kanban-multi-card-text-padding-left;
              text-align: center;
            }

            .e-target-dragged-clone,
            .e-target-dropped-clone {
              border-radius: $kanban-target-drag-drop-clone-border-radius;
              margin-bottom: $kanban-target-drag-drop-clone-margin-bottom;
            }

            .e-target-dragged-clone {
              background: $kanban-target-dragged-clone-bg-color;
              border: $kanban-dragged-clone-border;
            }

            .e-target-dropped-clone {
              background: $kanban-dropped-clone-bg-color;
              border: $kanban-dropped-clone-border;
            }
          }

          .e-target-multi-clone {
            .e-column-key {
              border-bottom: $kanban-target-column-key-border-bottom;
              border-left: $kanban-target-column-key-border-left;
              border-right: $kanban-target-column-key-border-right;

              .e-text {
                opacity: .5;
                text-align: center;

                @if ($skin-name == 'highcontrast') {
                  color: $kanban-default-font-color;
                }

                @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
                  color: $content-text-color-disabled;
                  font-size: $kanban-text-base;
                  opacity: 1;
                }
              }
            }

            .e-column-key:first-child {
              border-top: $kanban-target-clone-border-top;
            }
          }
        }

        &.e-swimlane-row .e-content-cells {
          height: $kanban-swl-row-height;
          min-height: 50px;

          .e-swimlane-header {
            display: flex;
            padding: $kanban-swl-row-header-padding;

            .e-swimlane-row-expand,
            .e-swimlane-row-collapse {
              border: $kanban-swl-header-icon-border;
              color: $kanban-swl-header-icon-color;
              cursor: pointer;
              font-size: $kanban-swl-header-icon-font-size;
              height: $kanban-swl-header-icon-height;
              margin: $kanban-swl-header-icon-margin;
              padding: $kanban-swl-header-icon-padding;

              &:hover,
              &:focus {
                background: $kanban-swl-header-icon-hover-background;
                border: $kanban-swl-header-icon-hover-border;
                border-radius: $kanban-swl-header-icon-hover-border-radius;
                color: $kanban-swl-header-icon-hover-color;
                font-size: $kanban-swl-header-icon-hover-font-size;
                margin: $kanban-swl-header-icon-hover-margin;
                padding: $kanban-swl-header-icon-hover-padding;
              }
            }

            .e-swimlane-text {
              font-size: $kanban-swl-header-text-font-size;
              font-weight: $kanban-swl-header-text-font-weight;
              line-height: $kanban-swl-header-text-line-height;
              padding: $kanban-swl-header-text-padding;
            }

            .e-item-count {
              color: $kanban-swl-header-item-count-color;
              font-size: $kanban-swl-header-item-count-font-size;
              font-weight: $kanban-swl-header-item-count-font-weight;
              line-height: $kanban-card-header-title-line-height;
              opacity: $kanban-swl-header-item-count-font-opacity;
              padding: $kanban-swl-header-item-count-padding;
            }
          }
        }

        &:not(.e-swimlane-row) .e-content-cells {
          border: $kanban-not-swl-content-border;
          border-radius: $kanban-not-swl-content-border-radius;
          vertical-align: top;

          &.e-dropping {
            border: $kanban-not-swl-content-dropping-border;
          }

          &.e-min-color {
            background: $kanban-min-color;
          }

          &.e-max-color {
            background: $kanban-max-color;
          }

          &:focus {
            border: $kanban-content-cells-focus-border;
            box-shadow: $kanban-content-cells-focus-box-shadow;
          }

          .e-card-wrapper,
          .e-card-container {
            min-height: 50px;
          }

          .e-dropping {
            border: $kanban-not-swl-content-dropping-border;
          }
        }

        &.e-collapsed:not(.e-swimlane-row) .e-content-cells {
          border-bottom: $kanban-collapsed-not-swl-border-bottom;
          height: 0;

          >.e-collapse-header-text,
          .e-limits,
          .e-show-add-button,
          .e-card-wrapper,
          .e-card-container {
            display: none;
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-kanban-table {
        .e-header-cells {
          text-align: right;

          .e-header-text {
            padding-left: $kanban-header-text-padding-left;
            padding-right: $kanban-header-text-padding-right-rtl;
            text-align: right;
            text-transform: uppercase;
          }

          .e-limits .e-max-count {
            text-align: left;
          }

          &.e-toggle-header {
            .e-column-collapse {
              text-align: center;
            }
          }
        }

        &.e-content-table {
          .e-content-row {
            .e-content-cells {
              .e-limits .e-max-count {
                left: 0;
                right: auto;
              }

              &.e-collapsed .e-collapse-header-text {
                direction: initial;
              }
            }

            &.e-swimlane-row .e-content-cells {
              .e-swimlane-header {

                .e-swimlane-row-expand,
                .e-swimlane-row-collapse {
                  margin: $kanban-swl-header-icon-rtl-margin;
                }
              }
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-device {
      .e-swimlane-header {
        .e-swimlane-header-toolbar {
          background: $kanban-column-bg-color;
          border-bottom: $kanban-swimlane-header-toolbar-border-bottom;
          display: flex;
          margin-bottom: $kanban-swimlane-header-toolbar-margin-bottom;
          min-height: 42px;
          padding: $kanban-swimlane-header-toolbar-padding;

          .e-toolbar-swimlane-name {
            color: $kanban-mb-swl-name-color;
            font-size: $kanban-mb-swl-name-font-size;
            font-weight: $kanban-mb-swl-name-font-weight;
            line-height: $kanban-mb-swl-name-line-height;
            padding: $kanban-mb-swl-name-padding;
          }

          .e-toolbar-swimlane-item-count {
            padding-top: $kanban-frozen-toolbar-swl-item-count-padding-top;

            .e-item-count {
              font-size: $kanban-frozen-swl-row-head-item-count-font-size;
              font-weight: $kanban-frozen-swl-row-head-item-count-font-weight;
              line-height: $kanban-frozen-swl-row-head-item-count-line-height;
              opacity: $kanban-frozen-swl-row-head-item-count-opacity;
              padding: $kanban-frozen-swl-row-head-item-count-padding;
            }
          }

          .e-toolbar-menu,
          .e-toolbar-level-title {
            padding-top: $kanban-swimlane-toolbar-menu-title-padding-top;

            .e-icon-menu {
              color: $kanban-mb-swl-menu-icon-color;
              font-size: $kanban-mb-swl-menu-icon-font-size;
              padding: $kanban-mb-swl-menu-icon-padding;
              padding-left: $kanban-mb-swl-menu-icon-padding-left;
            }
          }
        }
      }

      .e-kanban-header {
        .e-swimlane {
          .e-header-cells {
            border-bottom: $kanban-header-swl-cells-border-bottom;
          }
        }
      }

      .e-swimlane-content {
        position: absolute;
        width: 100%;

        .e-swimlane-resource {
          background: $kanban-bg-color;
          border: $kanban-swl-resource-border;
          height: $kanban-swl-resource-height;
          width: 225px;

          .e-swimlane-tree {
            height: $kanban-swl-resource-height;
            overflow-y: auto;
          }
        }

        .e-swimlane-overlay {
          position: absolute;

          &.e-enable {
            background: $kanban-popup-overlay-bg-color;
            height: $kanban-swl-resource-height;
            opacity: $kanban-mb-swl-overlay-opacity;
            width: 100%;
          }
        }
      }
    }
  }

  .e-mobile-popup-wrapper.e-device,
  .e-mobile-popup-container.e-device {
    background: $kanban-bg-color;
    border-radius: $kanban-mb-popup-container-border-radius;
    bottom: 0;
    box-shadow: $kanban-mb-popup-container-box-shadow;
    display: flex;
    height: $kanban-mb-popup-container-height;
    left: 0;
    margin: $kanban-mb-popup-container-margin;
    max-width: 100%;
    min-width: 100%;
    opacity: 1;
    overflow: hidden;
    padding: $Kanban-popup-device-padding;
    position: fixed;
    right: 0;
    top: 0;
    user-select: none;
    width: 100%;
    z-index: 1004;

    .e-popup-header {
      @if $skin-name == 'bootstrap4' {
        padding-top: $kanban-mobile-popup-header-padding-top;
      }

      .e-close {
        @if $skin-name != 'bootstrap4' {
          background: transparent;
        }

        @if ($skin-name == 'fabric' or $skin-name == 'bootstrap') {
          border: $kanban-mobile-popup-border;
        }
      }
    }

    .e-popup-content {
      color: $kanban-mb-popup-content-color;
      font-size: $kanban-mb-popup-content-font-size;
      font-weight: $kanban-mb-popup-content-font-weight;
      overflow: hidden;
      padding: $kanban-mb-popup-content-padding;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }
  }

  .e-kanban-dialog.e-dialog {
    min-width: 350px;

    .e-kanban-form-wrapper table,
    .e-kanban-form-container table {
      width: 100%;

      td {
        color: $kanban-dialog-form-table-td-color;
        font-size: $kanban-dialog-form-table-td-font-size;
        font-weight: $kanban-dialog-form-table-td-font-weight;
        letter-spacing: 0;
        line-height: $kanban-dialog-form-table-td-line-height;
        opacity: $kanban-dialog-form-table-td-opacity;
        padding: $kanban-dialog-form-table-td-padding;
        text-align: left;

        textarea.e-field {
          resize: vertical;
        }
      }

      .e-label {
        padding-right: $kanban-dialog-form-table-padding-right;
        vertical-align: top;
        width: 70px;
      }

      .e-field {
        width: 100%;
      }
    }

    .e-footer-content {
      .e-dialog-delete.e-btn {
        float: left;
        margin-left: $kanban-dialog-delete-btn-margin-left;
      }
    }
  }

  #{if(&, '&', '*')}.e-rtl {

    .e-kanban-form-wrapper table,
    .e-kanban-form-container table {
      .e-label {
        padding-left: $rte-kanban-form-table-padding-left;
        padding-right: $rte-kanban-form-table-padding-right;
        text-align: right;
      }
    }

    .e-dialog-delete {
      float: right;
    }
  }

  .e-card-virtual-skeleton-wrapper {
    .e-skeleton.e-skeleton-text.e-shimmer-wave {
      border-radius: $kanban-card-border-radius;
    }
  }

  .e-card-virtual-skeleton-wrapper {
    height: $card-wrapper-container-height;
    overflow: hidden;
    padding: $kanban-card-container-padding;
  }

  .e-kanban-column-indicator {
    display: none;
    position: absolute;
    width: 3px;
    background: $kanban-dropped-clone-border-color;
    height: $kanban-swl-resource-height;
    z-index: 1000;
  }
}

@include export-module('kanban-theme') {

  /*! kanban component theme */
  .e-kanban {
    background: $kanban-bg-color;

    .e-kanban-table {
      .e-header-cells {
        background: $kanban-column-bg-color;

        .e-header-text {
          color: $kanban-header-text-color;
        }

        .e-item-count {
          color: $kanban-header-item-count-color;
        }

        .e-limits {
          color: $kanban-header-limits-color;
        }

        .e-column-expand,
        .e-column-collapse {
          border: $kanban-header-column-border;
          color: $kanban-icons-color;

          &:hover,
          &:focus {
            background: $kanban-col-expand-collapse-bg-color;
            border: $kanban-col-expand-collapse-border;
            border-radius: $kanban-icons-border-radius;
            box-shadow: $kanban-col-expand-collapse-box-shadow;
            color: $kanban-col-expand-collapse-color;
          }
        }
      }

      &.e-content-table {
        .e-content-row:not(.e-swimlane-row) td {
          background: $kanban-column-bg-color;
        }

        .e-content-row {

          &.e-swimlane-row {

            .e-swimlane-text,
            .e-item-count {
              color: $kanban-default-font-color;
            }
          }

          .e-show-add-button {

            &:hover {
              background: $kanban-dropped-clone-bg-color;
            }

            .e-show-add-icon {
              color: $kanban-dropped-clone-border-color;
            }
          }
        }

        .e-card {
          @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
            background: $kanban-card-bg-color;
          }

          &.e-selection {
            background: $kanban-card-selection-bg-color;
          }

          .e-card-header {
            color: $kanban-default-font-color;
          }

          .e-card-content {
            color: $kanban-content-font;
          }

          .e-card-tag {
            &.e-card-label {
              background: $kanban-tags-bg-color;
              color: $kanban-tags-color;
            }
            @if ($skin-name == 'tailwind3') {
              font-weight: $kanban-tags-font-weight;
            }
          }
        }

        .e-target-multi-clone {
          .e-column-key {
            &.e-multi-active {
              background: $kanban-dropped-clone-bg-color;
              border-color: $kanban-dropped-clone-border-color;
            }

            &.e-multi-bottom-border {
              border-bottom-color: $kanban-dropped-clone-border-color;
            }

            &.e-multi-active:first-child {
              border-color: $kanban-dropped-clone-border-color;
            }
          }
        }
      }
    }

    .e-frozen-swimlane-row {
      background: $kanban-bg-color;

      .e-swimlane-header {
        .e-swimlane-text {
          color: $kanban-default-font-color;
        }

        .e-item-count {
          color: $kanban-swl-frozen-header-item-count-color;
        }
      }
    }

    @if $skin-name == 'fluent2' {
      .e-card {
        background: $kanban-column-bg-color;
      }
    }
  }

  .e-kanban-dialog.e-dialog {
    .e-kanban-form-wrapper table {
      textarea {
        background: $kanban-text-area-bg-color;
        color: $kanban-text-area-color;
        min-width: 70%;

        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'tailwind' {
          font-weight: $kanban-dialog-text-areas-font-weight;
        }

        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5') {
          border-color: $kanban-dialog-text-areas-border-color;
          border-radius: $kanban-dialog-text-areas-border-radius;
          outline: none;
          padding: $kanban-dialog-text-areas-padding;
        }

        &:focus {
          box-shadow: $kanban-dialog-text-area-focus-shadow;
        }
      }
    }
  }

  .e-card-virtual-skeleton-wrapper,
  .e-card-skeleton-wrapper {
    background: $kanban-column-bg-color;
  }
}
@if $skin-name == 'fluent2' {
  .e-kanban-dialog .e-dialog-delete,
  .e-kanban-dialog .e-dialog-edit.e-primary,
  .e-kanban-dialog .e-dialog-cancel{
    border: $kanban-delete-border;
    border-color: $secondary-border-color-hover;
  }

  .e-kanban-dialog .e-dialog-edit.e-primary{
    background: $primary-bg-color-hover;
    color: $primary-border-color-hover;
  }
}

@include export-module('kanban-bootstrap-dark-icons') {
  .e-kanban {
    .e-column-expand::before {
      content: '\e654';
    }

    .e-column-collapse::before {
      content: '\e653';
    }

    .e-swimlane-row-expand::before {
      content: '\e652';
    }

    .e-swimlane-row-collapse::before {
      content: '\e653';
    }

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

    .e-swimlane-header-toolbar {
      & .e-icon-menu::before {
        content: '\e941';
      }
    }

    &.e-rtl {
      .e-column-collapse::before {
        content: '\e654';
      }

      .e-column-expand::before {
        content: '\e653';
      }

      .e-swimlane-row-collapse::before {
        content: '\e654';
      }
    }
  }

  .e-mobile-popup-wrapper .e-close-icon::before {
    content: '\e96c';
  }
}

.e-bigger .e-kanban,
.e-bigger.e-kanban {
  .e-swimlane-header-toolbar {
    margin-bottom: $kanban-big-swl-header-toolbar-margin-bottom;
    min-height: $kanban-big-swl-header-min-height;

    .e-toolbar-swimlane-name {
      font-size: $kanban-big-mb-toolbar-swl-font-size;
    }

    .e-icon-menu {
      font-size: $kanban-mb-swl-menu-icon-bgr-font-size;
    }
  }

  .e-kanban-table.e-content-table {
    @if $skin-name !='tailwind' and $skin-name !='tailwind-dark' and $skin-name !='fluent2' and $skin-name !='fluent2-dark' and $skin-name !='material3' and $skin-name !='material3-dark' and $skin-name !='bootstrap5' and $skin-name !='bootstrap5-dark' {
      border-spacing: $kanban-table-bigger-border-spacing;
    }
  }

  .e-swimlane {
    .e-kanban-table.e-content-table {
      border-spacing: $kanban-table-bigger-swimlane-border-spacing;
    }
  }

  .e-frozen-swimlane-row .e-frozen-row {
    padding: $kanban-frozen-swimlane-row-bgr-padding;

    .e-swimlane-header {
      .e-swimlane-text {
        font-size: $kanban-frozen-swimlane-row-header-bgr-font-size;
      }

      .e-item-count {
        line-height: $kanban-frozen-swl-row-head-item-count-bgr-line-height;
        padding: $kanban-frozen-swl-row-head-item-count-bgr-padding;
      }
    }
  }

  .e-kanban-table {
    col.e-collapsed {
      width: $kanban-table-col-collapse-bgr-width;
    }
  }

  .e-kanban-table .e-header-cells {
    height: $kanban-header-cell-bgr-height;

    @if $skin-name =='tailwind' {
      padding: $kanban-header-cell-bgr-padding;
    }

    .e-header-text {
      font-size: $kanban-header-text-bgr-font-size;
      font-weight: $kanban-header-text-bgr-font-weight;
      line-height: $kanban-header-text-bgr-line-height;
      text-transform: $kanban-header-text-bgr-transform;
    }

    .e-item-count {
      font-size: $kanban-header-item-count-bgr-font-size;
      font-weight: $kanban-header-item-count-bgr-font-weight;
      line-height: $kanban-header-item-count-bgr-line-height;
      margin-top: $kanban-header-item-count-bgr-margin-top;
      text-transform: $kanban-header-item-count-bgr-text-transform;
    }

    .e-column-collapse,
    .e-column-expand {
      font-size: $kanban-toggle-header-icon-bgr-font-size;
    }
  }

  .e-kanban-content {

    .e-content-row .e-content-cells .e-card-wrapper,
    .e-content-row .e-content-cells .e-card-container {
      padding: $kanban-card-container-bgr-padding;

      .e-target-dragged-clone,
      .e-target-dropped-clone {
        margin-bottom: $kanban-target-drag-drop-clone-bgr-margin-bottom;
      }
    }

    .e-swimlane-row .e-content-cells .e-swimlane-header {
      padding: $kanban-swl-row-header-bgr-padding;

      .e-swimlane-text {
        font-size: $kanban-swl-header-text-bgr-font-size;
        line-height: $kanban-swl-header-text-bgr-line-height;
      }

      .e-item-count {
        font-size: $kanban-swl-header-item-count-bgr-font-size;
        line-height: $kanban-swl-header-item-count-bgr-line-height;
        padding: $kanban-swl-header-item-count-bgr-padding;
      }

      .e-swimlane-row-expand,
      .e-swimlane-row-collapse {
        font-size: $kanban-swl-header-icon-bgr-font-size;

        @if $skin-name =='bootstrap5' {
          padding-top: $kanban-swl-header-icon-bgr-small-padding-top;
        }

        &:hover,
        &:focus {
          @if $skin-name == 'bootstrap5' {
            padding-top: $kanban-swl-header-icon-bgr-hover-padding-top;
          }
        }
      }
    }

    .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color,
    .e-content-row .e-content-cells .e-card-container .e-card.e-card-color {
      .e-card-header {
        padding: $kanban-color-card-header-bgr-padding;
      }

      .e-card-content {
        padding: $kanban-color-card-content-bgr-padding;
      }

      .e-card-tags,
      .e-card-footer {
        padding: $kanban-color-card-footer-bgr-padding;
      }
    }

    .e-content-row .e-content-cells .e-card-wrapper .e-card,
    .e-content-row .e-content-cells .e-card-container .e-card {
      .e-card-header {
        padding: $kanban-card-header-bgr-padding;
      }

      .e-card-content {
        padding: $kanban-card-content-bgr-padding;
      }

      .e-card-tags,
      .e-card-footer {
        padding: $kanban-card-footer-bgr-padding;
      }
    }

    .e-content-row .e-content-cells .e-card-wrapper .e-card.e-card-color,
    .e-content-row .e-content-cells .e-card-container .e-card.e-card-color,
    .e-content-row .e-content-cells .e-card-wrapper .e-card,
    .e-content-row .e-content-cells .e-card-container .e-card {
      margin-bottom: $kanban-card-bgr-margin-bottom;

      .e-card-header {
        .e-card-header-title {
          font-size: $kanban-card-header-title-bgr-font-size;
          line-height: $kanban-card-header-title-bgr-line-height;
        }
      }

      .e-card-content {
        font-size: $kanban-card-content-bgr-font-size;
        line-height: $kanban-card-content-bgr-line-height;
      }
    }
  }
}

//dimention variables

//Mouse Mode
$toast-icon-nrml-height: 24px !default;
$toast-icon-nrml-width: 24px !default;
$toast-icon-nrml-size: 12px !default;
$toast-icon-nrml-right-margin: 14px !default;
$toast-close-icon-nrml-height: 24px !default;
$toast-close-icon-nrml-width: 24px !default;
$toast-close-icon-nrml-size: 14px !default;
$toast-position-nrml-distance: 10px !default;
$multitoast-nrml-gap-distance: 10px !default;
$toast-nrml-min-height: 48px !default;
$toast-nrml-padding: 15px !default;
$toast-action-btn-nrml-padding: 5px 0 0 0 !default;
$toast-action-btn-nrml-margin: 10px !default;
$toast-progressbar-nrml-height: 4px !default;
$toast-content-nrml-padding: 10px 0 5px 0 !default;
$toast-nrml-border-radious: 4px !default;
$toast-font-nrml-size: 14px !default;
$toast-title-font-nrml-size: 14px !default;

//Touch Mode
$toast-icon-bgr-height: 24px !default;
$toast-icon-bgr-width: 24px !default;
$toast-icon-bgr-size: 12px !default;
$toast-icon-bgr-right-margin: 14px !default;
$toast-close-icon-bgr-height: 24px !default;
$toast-close-icon-bgr-width: 24px !default;
$toast-close-icon-bgr-size: 14px !default;
$toast-position-bgr-distance: 10px !default;
$multitoast-bgr-gap-distance: 10px !default;
$toast-bgr-min-height: 48px !default;
$toast-bgr-padding: 15px !default;
$toast-action-btn-bgr-padding: 5px 0 0 0 !default;
$toast-action-btn-bgr-margin: 10px !default;
$toast-progressbar-bgr-height: 4px !default;
$toast-content-bgr-padding: 10px 0 5px 0 !default;
$toast-bgr-border-radious: 4px !default;
$toast-font-bgr-size: 14px !default;
$toast-title-font-weight: bold !default;

//theme variables

$toast-box-shadow: 0 2px 5px 0 rgba($grey-base, .26) !default;
$toast-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;
$toast-progress-color: $brand-primary !default;
$toast-bg-color: $grey !default;
$toast-hover-bg-color: $grey-light !default;
$toast-active-bg-color: $grey-f5 !default;
$toast-font-color: $grey-dark-font !default;
$toast-icon-color: $grey-dark-font !default;
$toast-close-icon-color: $grey-cc !default;
$toast-title-color: $grey-dark-font !default;
$toast-content-color: $grey-dark-font !default;

// Toast Types theme definitions

$toast-border: 1px solid $grey-base !default;
$toast-border: 1px !default;
$toast-success-bg-color: $brand-success-dark !default;
$toast-success-color: $grey-light-font !default;
$toast-success-title-color: $toast-success-color !default;
$toast-success-icon-color: $toast-success-color !default;
$toast-success-content-color: $toast-success-color !default;
$toast-success-border-color: $grey-99 !default;
$toast-success-hover-bg-color: $toast-success-bg-color !default;
$toast-success-hover-color: $toast-success-color !default;
$toast-success-hover-border-color: $toast-success-bg-color !default;
$toast-success-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;

$toast-info-bg-color: $brand-info-dark !default;
$toast-info-color: $grey-light-font !default;
$toast-info-title-color: $toast-info-color !default;
$toast-info-icon-color: $toast-info-color !default;
$toast-info-content-color: $toast-info-color !default;
$toast-info-border-color: $brand-info !default;
$toast-info-hover-bg-color: $brand-info-dark !default;
$toast-info-hover-color: $toast-info-color !default;
$toast-info-hover-border-color: $brand-info !default;
$toast-info-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;

$toast-warning-bg-color: $brand-warning-dark !default;
$toast-warning-color: $base-font !default;
$toast-warning-title-color: $base-font !default;
$toast-warning-icon-color: $base-font !default;
$toast-warning-content-color: $base-font !default;
$toast-warning-border-color: $brand-warning !default;
$toast-warning-hover-bg-color: $toast-warning-bg-color !default;
$toast-warning-hover-color: $base-font !default;
$toast-warning-hover-border-color: $brand-warning !default;
$toast-warning-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;

$toast-danger-bg-color: $brand-danger-dark !default;
$toast-danger-color: $grey-light-font !default;
$toast-danger-title-color: $toast-danger-color !default;
$toast-danger-icon-color: $grey-light-font !default;
$toast-danger-content-color: $grey-light-font !default;
$toast-danger-border-color: $brand-danger !default;
$toast-danger-hover-bg-color: $brand-danger-dark !default;
$toast-danger-hover-color: $toast-danger-color !default;
$toast-danger-hover-border-color: $brand-danger !default;
$toast-danger-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;

$toast-close-icon-hover-bg-color: transparent !default;
$toast-close-icon-hover-color: $grey-dark-font !default;
$toast-bigger-bottom-margin: 0 auto $multitoast-bgr-gap-distance !default;
$toast-bigger-top-margin: 0 auto $multitoast-bgr-gap-distance !default;
$toast-bigger-full-width-margin: 0 auto $multitoast-bgr-gap-distance !default;
$toast-bigger-margin: 0 0 $multitoast-bgr-gap-distance !default;
$toast-zero-padding-margin: 0 !default;
$toast-normal-bottom-margin: 0 auto $multitoast-nrml-gap-distance !default;
$toast-normal-top-margin: 0 auto $multitoast-nrml-gap-distance !default;
$toast-normal-full-width-margin: 0 auto $multitoast-nrml-gap-distance !default;
$toast-normal-margin: 0 0 $multitoast-nrml-gap-distance !default;
$toast-action-margin: 1px !default;
$toast-close-icon-border-radius: 50% !default;
$toast-bigger-min-height: 100px !default;
$toast-zero-padding-margin: 0 !default;
$toast-close-icon-height: 20px !default;
$toast-close-icon-width: 22px !default;
$toast-auto-margin: auto !default;
$toast-close-icon-bottom: 6px !default;
$toast-full-width: 100% !default;
$toast-tittle-letter-spacing: .5px !default;
$toast-half-full-width: 96% !default;

//enddefault

@include export-module('toast-layout') {
  /* stylelint-disable property-no-vendor-prefix */
  .e-toast-container {
    display: inline-flex;
    flex-direction: column;
    position: relative;

    &.e-toast-top-left {
      left: $toast-position-nrml-distance;
      top: $toast-position-nrml-distance;
    }

    &.e-toast-bottom-left {
      bottom: $toast-position-nrml-distance;
      left: $toast-position-nrml-distance;
    }

    &.e-toast-top-right {
      right: $toast-position-nrml-distance;
      top: $toast-position-nrml-distance;
    }

    &.e-toast-bottom-right {
      bottom: $toast-position-nrml-distance;
      right: $toast-position-nrml-distance;
    }

    &.e-toast-bottom-center {
      bottom: $toast-position-nrml-distance;
      pointer-events: none;
      right: $toast-zero-padding-margin;
      width: $toast-full-width;

      .e-toast {
        margin: $toast-normal-bottom-margin;
        pointer-events: auto;
      }
    }

    &.e-toast-top-center {
      pointer-events: none;
      right: $toast-zero-padding-margin;
      top: $toast-position-nrml-distance;
      width: $toast-full-width;

      .e-toast {
        margin: $toast-normal-top-margin;
        pointer-events: auto;
      }
    }

    &.e-toast-full-width {
      left: $toast-zero-padding-margin;
      right: $toast-zero-padding-margin;
      width: $toast-full-width;

      .e-toast {
        margin: $toast-normal-full-width-margin;
        width: $toast-half-full-width;
      }
    }

    &.e-rtl {
      .e-toast {
        .e-toast-actions {
          text-align: left;

          > * {
            margin-left: initial;
            margin-right: $toast-action-btn-nrml-margin;
          }
        }

        .e-toast-close-icon {
          margin-left: initial;
          margin-right: $toast-auto-margin;
        }

        .e-toast-icon {
          margin-left: $toast-icon-nrml-right-margin;
          margin-right: initial;
        }

        .e-toast-progress {
          left: $toast-auto-margin;
          right: $toast-zero-padding-margin;
        }
      }
    }

    .e-toast {
      border-radius: $toast-nrml-border-radious;
      display: inline-flex;
      font-size: $toast-font-nrml-size;
      margin: $toast-normal-margin;
      overflow: hidden;
      padding: $toast-nrml-padding;
      position: relative;

      .e-toast-icon,
      .e-toast-message {
        display: inline-flex;
      }

      > * {
        word-break: break-word;
        word-wrap: break-word;
      }

      .e-toast-message {
        align-self: center;
        flex-direction: column;
        overflow: hidden;
        width: inherit;
        @if $skin-name == 'material' or $skin-name == 'Material3' {
          flex: 1;
        }

        .e-toast-title,
        .e-toast-content {
          overflow: hidden;
          text-overflow: ellipsis;

          &:first-child {
            padding: $toast-zero-padding-margin;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding-bottom: $toast-content-first-child-padding-bottom;
              padding-left: $toast-content-first-child-padding-left;
              padding-right: $toast-content-first-child-padding-right;
              padding-top: $toast-content-first-child-padding-top;
            }
          }

          &:last-child {
            padding-bottom: $toast-zero-padding-margin;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding-bottom: $toast-content-last-padding-bottom;
            }
          }

          > * {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .e-toast-title {
          font-size: $toast-title-font-nrml-size;
          font-weight: $toast-title-font-weight;
          letter-spacing: $toast-tittle-letter-spacing;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-bottom: 1px solid $border;
          }
        }

        .e-toast-content {
          padding: $toast-content-nrml-padding;
          word-break: break-word;
          word-wrap: break-word;

          + .e-toast-actions {
            padding-top: $toast-zero-padding-margin;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding: $toast-action-btn-bgr-padding;
            }
          }
        }

        .e-toast-actions {
          margin: $toast-action-margin;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-top: 1px solid $border;
            margin-left: $toast-actions-margin;
            margin-right: $toast-actions-margin;
          }
          @if $skin-name != 'tailwind3' {
            padding: $toast-action-btn-nrml-padding;
          }
          text-align: right;

          > * {
            margin-left: $toast-action-btn-nrml-margin;
          }
        }
      }

      &.e-toast-header-icon {
        .e-toast-message {
          .e-toast-title,
          .e-toast-content {
            &:first-child {
              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
                padding-left: $toast-header-padding-left;
              }
            }
          }
        }
      }

      &.e-toast-header-close-icon {
        .e-toast-message {
          .e-toast-title,
          .e-toast-content {
            &:first-child {
              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
                padding-right: $toast-header-padding-right;
              }
            }
          }
        }
      }

      .e-toast-close-icon {
        align-items: center;
        cursor: pointer;
        display: flex;
        font-size: $toast-close-icon-nrml-size;
        height: $toast-close-icon-nrml-height;
        justify-content: center;
        margin-left: $toast-auto-margin;
        width: $toast-close-icon-nrml-width;
        @if $skin-name == 'material' {
          opacity: .7;
        }
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          margin-top: $toast-close-icon-margin-top;
          position: absolute;
          right: $toast-close-icon-right;
        }
      }

      .e-toast-icon {
        align-items: center;
        font-size: $toast-icon-nrml-size;
        height: $toast-icon-nrml-height;
        justify-content: center;
        margin-right: $toast-icon-nrml-right-margin;
        width: $toast-icon-nrml-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          left: $toast-zero-padding-margin;
          margin-left: $toast-icon-margin-left;
          margin-top: $toast-icon-top;
          padding-bottom: $toast-icon-padding-bottom;
          position: absolute;
        }
        @if $skin-name == 'fluent2' {
          margin-top: $toast-icon-top;
        }
      }

      .e-toast-progress {
        bottom: $toast-zero-padding-margin;
        height: $toast-progressbar-nrml-height;
        left: $toast-zero-padding-margin;
        position: absolute;
      }
    }
  }

  .e-content-placeholder.e-toast.e-placeholder-toast {
    background-size: 400px 100px;
    min-height: $toast-bigger-min-height;
  }

  .e-blazor-toast-hidden {
    visibility: hidden;
  }

  .e-toast-container .e-toast .e-toast-close-icon.blazor-toast-close-icon {
    background-color: transparent;
    border-color: transparent;
    border-radius: $toast-close-icon-border-radius;
    bottom: $toast-close-icon-bottom;
    height: $toast-close-icon-height;
    position: relative;
    width: $toast-close-icon-width;
  }
}

.e-toast-container {
  .e-toast {
    background-color: $toast-bg-color;
    border: $toast-border;
    box-shadow: $toast-box-shadow;
    color: $toast-font-color;

    .e-toast-close-icon {
      color: $toast-close-icon-color;

      &.e-blazor-toast-close-icon,
      &.e-blazor-toast-close-icon:focus,
      &.e-blazor-toast-close-icon:active {
        @if $skin-name == 'Material3' {
          background: transparent;
        }
        @else {
          background-color: transparent;
        }
        border: 0;
        box-shadow: none;
        outline: 0;
      }

      &.e-blazor-toast-close-icon:focus,
      &.e-blazor-toast-close-icon:hover {
        @if $skin-name == 'Material3' {
          background: $toast-close-icon-hover-bg-color;
        }
        @else {
          background-color: $toast-close-icon-hover-bg-color;
        }
        color: $toast-close-icon-hover-color;
      }
    }

    .e-toast-close-icon.e-icons:hover,
    .e-toast-close-icon.e-icons:focus{
      @if $skin-name == 'Material3' {
        background: $toast-close-icon-hover-bg-color;
        border-radius: $toast-icon-hover-border-radius;
        height: 32px;
      }
      @else {
        background-color: $toast-close-icon-hover-bg-color;
      }
      @if $skin-name == 'material' {
        border-radius: $toast-icon-hover-border-radius;
      }
      color: $toast-close-icon-hover-color;
    }

    &.e-toast-success {
      background-color: $toast-success-bg-color;
      color: $toast-success-color;

      @if $skin-name == 'highcontrast' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
        border-color: $toast-success-border-color;
      }

      .e-toast-message .e-toast-title {
        color: $toast-success-title-color;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $toast-success-title-border-color;
        }
      }

      .e-toast-message .e-toast-content {
        color: $toast-success-content-color;
      }

      .e-toast-icon {
        color: $toast-success-icon-color;
      }

      .e-toast-close-icon {
        color: $toast-success-icon-color;
      }

      &:hover {
        background-color: $toast-success-hover-bg-color;
        box-shadow: $toast-success-hover-box-shadow;
        color: $toast-success-hover-color;

        @if $skin-name == 'highcontrast' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
          border-color: $toast-success-hover-border-color;
        }
      }
    }

    &.e-toast-info {
      background-color: $toast-info-bg-color;
      color: $toast-info-color;

      @if $skin-name == 'highcontrast' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
        border-color: $toast-info-border-color;
      }

      .e-toast-message .e-toast-title {
        color: $toast-info-title-color;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $toast-info-title-border-color;
        }
      }

      .e-toast-message .e-toast-content {
        color: $toast-info-content-color;
      }

      .e-toast-icon {
        color: $toast-info-icon-color;
      }

      .e-toast-close-icon {
        color: $toast-info-icon-color;
      }

      &:hover {
        background-color: $toast-info-hover-bg-color;
        box-shadow: $toast-info-hover-box-shadow;
        color: $toast-info-hover-color;

        @if $skin-name == 'highcontrast' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
          border-color: $toast-info-hover-border-color;
        }
      }
    }

    &.e-toast-warning {
      background-color: $toast-warning-bg-color;
      color: $toast-warning-color;

      @if $skin-name == 'highcontrast' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
        border-color: $toast-warning-border-color;
      }

      .e-toast-message .e-toast-title {
        color: $toast-warning-title-color;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $toast-warning-title-border-color;
        }
      }

      .e-toast-message .e-toast-content {
        color: $toast-warning-content-color;
      }

      .e-toast-icon {
        color: $toast-warning-icon-color;
      }

      .e-toast-close-icon {
        color: $toast-warning-icon-color;
      }

      &:hover {
        background-color: $toast-warning-hover-bg-color;
        box-shadow: $toast-warning-hover-box-shadow;
        color: $toast-warning-hover-color;

        @if $skin-name == 'highcontrast' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
          border-color: $toast-warning-hover-border-color;
        }
      }
    }

    &.e-toast-danger {
      background-color: $toast-danger-bg-color;
      color: $toast-danger-color;

      @if $skin-name == 'highcontrast' {
        border-color: $toast-danger-border-color;
      }

      .e-toast-message .e-toast-title {
        color: $toast-danger-title-color;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          border-color: $toast-danger-title-border-color;
        }
      }

      .e-toast-message .e-toast-content {
        color: $toast-danger-content-color;
      }

      .e-toast-icon {
        color: $toast-danger-icon-color;
      }

      .e-toast-close-icon {
        color: $toast-danger-icon-color;
      }

      &:hover {
        background-color: $toast-danger-hover-bg-color;
        box-shadow: $toast-danger-hover-box-shadow;
        color: $toast-danger-hover-color;

        @if $skin-name == 'highcontrast' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' {
          border-color: $toast-danger-hover-border-color;
        }
      }
    }

    &:hover {
      background-color: $toast-hover-bg-color;
      box-shadow: $toast-hover-box-shadow;

      @if $skin-name == 'highcontrast' {
        border-color: $toast-hover-border-color;
      }
    }

    .e-toast-icon {
      color: $toast-icon-color;
    }

    .e-toast-message {
      .e-toast-title {
        color: $toast-title-color;
      }

      .e-toast-content {
        color: $toast-content-color;
      }
    }

    .e-toast-progress {
      background-color: $toast-progress-color;
    }

    @if $skin-name == 'material' {
      .e-toast-actions {
        .e-btn {
          background-color: $toast-btn-flat-bgcolor;
          border-color: $toast-btn-flat-border-color;
          box-shadow: $toast-btn-flat-box-shadow;
          color: $toast-btn-flat-color;

          &:hover {
            background-color: $toast-btn-flat-hover-bgcolor;
            color: $toast-btn-flat-hover-color;
          }

          &:focus {
            background-color: $toast-btn-flat-focus-bgcolor;
            color: $toast-btn-flat-focus-color;
          }

          &:active {
            background-color: $toast-btn-flat-active-bgcolor;
            color: $toast-btn-flat-active-color;
          }
        }
      }
    }
  }
}

.e-toast-container .e-toast.e-toast-danger .e-toast-close-icon.e-icons:hover {
  @if ($skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'fluent2' or $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
    color: $toast-danger-icon-hover-dark;
  }
}

@include export-module('toast-bootstrap-icons') {
  .e-toast {
    .e-toast-close-icon::before {
      content: '\e96c';
      font-family: 'e-icons';
    }

    .e-toast-success-icon::before {
      content: '\ea84';
      font-family: 'e-icons';
    }

    .e-toast-error-icon::before {
      content: '\e7e9';
      font-family: 'e-icons';
    }

    .e-toast-info-icon::before {
      content: '\e607';
      font-family: 'e-icons';
    }

    .e-toast-warning-icon::before {
      content: '\e92f';
      font-family: 'e-icons';
    }
  }
}

@include export-module('toast-bigger') {

  .e-bigger .e-toast-container,
  .e-toast-container.e-bigger {
    &.e-toast-top-left {
      left: $toast-position-bgr-distance;
      top: $toast-position-bgr-distance;
    }

    &.e-toast-bottom-left {
      bottom: $toast-position-bgr-distance;
      left: $toast-position-bgr-distance;
    }

    &.e-toast-top-right {
      right: $toast-position-bgr-distance;
      top: $toast-position-bgr-distance;
    }

    &.e-toast-bottom-right {
      bottom: $toast-position-bgr-distance;
      right: $toast-position-bgr-distance;
    }

    &.e-toast-bottom-center {
      bottom: $toast-position-bgr-distance;

      .e-toast {
        margin: $toast-bigger-bottom-margin;
      }
    }

    &.e-toast-top-center {
      top: $toast-position-bgr-distance;

      .e-toast {
        margin: $toast-bigger-top-margin;
      }
    }

    &.e-toast-full-width {
      left: $toast-zero-padding-margin;
      right: $toast-zero-padding-margin;

      .e-toast {
        margin: $toast-bigger-full-width-margin;
      }
    }

    &.e-rtl {
      .e-toast {
        .e-toast-message .e-toast-actions {
          text-align: left;

          > * {
            margin-left: initial;
            margin-right: $toast-action-btn-bgr-margin;
          }
        }

        .e-toast-close-icon {
          margin-left: initial;
          margin-right: $toast-auto-margin;
        }

        .e-toast-icon {
          margin-left: $toast-icon-bgr-right-margin;
          margin-right: initial;
        }

        .e-toast-progress {
          left: $toast-auto-margin;
          right: $toast-zero-padding-margin;
        }
      }
    }

    .e-toast {
      border-radius: $toast-bgr-border-radious;
      font-size: $toast-font-bgr-size;
      margin: $toast-bigger-margin;
      min-height: $toast-bgr-min-height;

      .e-toast-message {
        .e-toast-content {
          padding: $toast-content-bgr-padding;

          &:first-child {
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding-bottom: $toast-bgr-content-first-child-padding-bottom;
              padding-left: $toast-bgr-content-first-child-padding-left;
              padding-right: $toast-bgr-content-first-child-padding-right;
              padding-top: $toast-bgr-content-first-child-padding-top;
            }
            @else {
              padding: $toast-zero-padding-margin;
            }
          }

          &:last-child {
            padding-bottom: $toast-zero-padding-margin;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding-bottom: $toast-bgr-last-child-padding-bottom;
            }
          }

          + .e-toast-actions {
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              padding: $toast-action-btn-bgr-padding;
            }
            @else {
              padding: $toast-zero-padding-margin;
            }
          }
          @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            + .e-toast-actions {
              padding: $toast-action-btn-bgr-padding;
            }
          }
        }

        .e-toast-actions {
          padding: $toast-action-btn-bgr-padding;
          text-align: right;
          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
            border-top: $toast-border solid $border;
            margin-left: $toast-bgr-actions-margin;
            margin-right: $toast-bgr-actions-margin;
          }

          > * {
            margin-left: $toast-action-btn-bgr-margin;
          }
        }
      }

      .e-toast-close-icon {
        font-size: $toast-close-icon-bgr-size;
        height: $toast-close-icon-bgr-height;
        width: $toast-close-icon-bgr-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          margin-top: $toast-bgr-close-icon-margin-top;
          position: absolute;
          right: $toast-bgr-close-icon-right;
        }
      }

      .e-toast-icon {
        font-size: $toast-icon-bgr-size;
        height: $toast-icon-bgr-height;
        margin-right: $toast-icon-bgr-right-margin;
        width: $toast-icon-bgr-width;
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
          left: $toast-zero-padding-margin;
          margin-top: $toast-bgr-toast-icon-margin-top;
          margin-left: $toast-bgr-toast-icon-margin-left;
        }
      }

      .e-toast-progress {
        height: $toast-progressbar-bgr-height;
      }
    }
  }

  .e-bigger .e-content-placeholder.e-toast.e-placeholder-toast,
  .e-bigger.e-content-placeholder.e-toast.e-placeholder-toast {
    background-size: 400px 100px;
    min-height: $toast-bigger-min-height;
  }

  @if $skin-name == 'tailwind' {
    .e-bigger .e-toast .e-toast {
      padding: 24px;
    }

    .e-bigger .e-toast-container .e-toast .e-toast-message .e-toast-title {
      font-size: 16px;
    }
  }
}

/*! PdfViewer's default definitions and variables */
$pv-background: $grey-base !default;
$pv-control-border-color: $grey-99 !default;
$pv-viewer-border-width: 1px 1px 1px 0 !default;
$pv-viewer-border-style: solid !default;
$pv-control-position: relative !default;
$pv-control-overflow: auto !default;
$pv-control-touch-action: pan-x pan-y !default;
$pv-viewer-container-height: calc(100% - 50px) !default;
$pv-viewer-main-container-min-width: 400px !default;
$pv-page-container-padding: 0 !default;
$pv-page-container-margin: 0 !default;
$pv-page-container-touch-action: pan-x pan-y !default;
$pv-page-div-border: 1px !default;
$pv-page-div-border-style: none !default;
$pv-page-div-focus-style: #fff 0 0 0 2px !default;
$pv-page-div-border-color: $grey-ad !default;
$pv-page-div-border-boxing: content-box !default;
$pv-page-div-box-shadow: 0 2px 4px 0 rgba($grey-base, .2) !default;
$pv-page-div-position: absolute !default;
$pv-icon-color: $grey-dark-font !default;
$pv-icon-disable-color: $pv-icon-color !default;
$pv-icon-font-size: 16px !default;
$pv-icon-margin: 9px 7.5px !default;
$pv-icon-height: 36px !default;
$pv-icon-width: 36px !default;
$pv-icon-padding-top: 7px !default;
$gantt-masked-table-background-color: rgba(225, 223, 221, 1) !default;
$pv-toolbar-height: 50px !default;
$pv-toolbar-height-big: $pv-toolbar-height !default;
$pv-toolbar-border: 1px solid $grey-99 !default;
$pv-toolbar-border-width: 1px 1px 0 1px !default;
$pv-toolbar-border-radius: 4px 4px 0 0 !default;
$pv-current-page-height: 30px !default;
$pv-current-page-width: 48px !default;
$pv-zoom-dropdown-height: 32px !default;
$pv-zoom-dropdown-width: 91px !default;
$pv-password-input-margin-top: 14px !default;
$pv-password-error-color: $error-font-color !default;
$pv-corrupted-pop-header-opacity: .87 !default;
$pv-corrupted-pop-header-font-size: 18px !default;
$pv-corrupted-pop-header-letter-spacing: -.18px !default;
$pv-corrupted-pop-header-text-align: left !default;
$pv-corrupted-pop-content-font-size: 14px !default;
$pv-corrupted-pop-header-color: $grey-dark-font !default;
$pv-corrupted-pop-content-letter-spacing: 0 !default;
$pv-corrupted-pop-content-line-height: 24px !default;
$pv-corrupted-pop-content-margin-left: 50px !default;
$pv-toolbar-separator-margin-left: 6px !default;
$pv-toolbar-separator-margin-right: 6px !default;
$pv-toolbar-separator-border-right-width: 1px !default;
$pv-toolbar-separator-height: 27px !default;
$pv-toolbar-popup-icon-padding: 0 12px 0 15px;
$pv-toolbar-popup-icon-padding-rtl: $pv-toolbar-popup-icon-padding;
$pv-toolbar-items-margin-left: 1.5px !default;
$pv-toolbar-items-margin-right: 1.5px !default;
$pv-toolbar-items-padding-top: 6px !default;
$pv-toolbar-items-padding-bottom: 7px !default;
$pv-toolbar-items-first-child-margin-left: 5.5px !default;
$pv-toolbar-items-last-child-margin-right: 5.5px !default;
$pv-toolbar-btn-height: 37px !default;
$pv-toolbar-btn-width: 36px !default;
$pv-toolbar-btn-height-big: $pv-toolbar-btn-height !default;
$pv-toolbar-btn-width-big: $pv-toolbar-btn-width !default;
$pv-toolbar-open-icon-width: 18px !default;
$pv-toolbar-open-icon-height: 16px !default;
$pv-toolbar-open-icon-line-height: 16px !default;
$pv-toolbar-download-icon-width: 16px !default;
$pv-toolbar-download-icon-height: 16px !default;
$pv-toolbar-download-icon-line-height: 16px !default;
$pv-toolbar-print-icon-width: 16px !default;
$pv-toolbar-print-icon-height: 16px !default;
$pv-toolbar-print-icon-line-height: 16px !default;
$pv-toolbar-print-icon-margin: 3px 0 0 1px !default;
$pv-toolbar-first-page-icon-line-height: 16px !default;
$pv-toolbar-previous-page-icon-line-height: 16px !default;
$pv-toolbar-next-page-icon-line-height: 16px !default;
$pv-toolbar-last-page-icon-line-height: 16px !default;
$pv-toolbar-zoom-out-icon-size: 18px !default;
$pv-toolbar-zoom-out-icon-line-height: 18px !default;
$pv-toolbar-zoom-drop-margin: 0 4px !default;
$pv-toolbar-zoom-drop-padding: 6px 0 7px 0 !default;
$pv-toolbar-total-page-div-padding-left: 0 !default;
$pv-toolbar-total-page-padding-bottom: 6.5px !default;
$pv-toolbar-total-page-div-margin-left: 0 !default;
$pv-toolbar-total-page-div-margin-right: 7.5px !default;
$pv-toolbar-total-page-font-color: $grey-dark-font !default;
$pv-toolbar-current-page-box-margin-top: 0 !default;
$pv-toolbar-zoom-drop-down-margin-top: 0 !default;
$pv-toolbar-zoom-drop-down-padding: 0 0 0 3px !default;
$pv-toolbar-zoom-drop-down-border: 1px solid $grey-f8 !default;
$pv-toolbar-zoom-drop-down-border-focus: 1px solid $grey-ad !default;
$pv-toolbar-zoom-drop-down-border-radius: 2px !default;
$pv-toolbar-zoom-drop-down-background-color: transparent !default;
$pv-text-align: center !default;
$pv-zoom-drop-down-popup-text-align: left !default;
$pv-zoom-drop-down-padding-top: 0 !default;
$pv-zoom-drop-down-padding-bottom: 0 !default;
$pv-zoom-drop-down-padding-left: 0 !default;
$pv-zoom-drop-down-padding-left-rtl: 0 !default;
$pv-zoom-drop-down-padding-right-rtl: 12px !default;
$pv-zoom-drop-down-input-height: inherit !default;
$pv-zoom-drop-down-input-margin-top: -1px !default;
$pv-zoom-drop-down-margin-top: -.2px !default;
$pv-zoom-drop-down-margin-bottom: 0 !default;
$pv-zoom-drop-down-margin-left: 0 !default;
$pv-zoom-drop-down-padding-right: 0 !default;
$pv-zoom-drop-down-active-color: $grey-light-font !default;
$pv-current-page-border: 1px solid $grey-99 !default;
$pv-current-page-border-radius: 2px !default;
$pv-current-page-padding-left: 1.5px !default;
$pv-current-page-padding-right-rtl: 12px !default;
$pv-current-page-height: 32px !default;
$pv-current-page-padding-bottom: 3px !default;
$pv-dialog-pop-header-font-weight: normal !default;
$pv-password-pop-content-font-size: 14px !default;
$pv-password-pop-content-letter-spacing: -.16px !default;
$pv-corrupted-pop-content-padding-top: 4px !default;
$pv-password-pop-content-padding-top: 6px !default;
$pv-zoom-drop-down-popup-height: 236px !default;
$pv-zoom-drop-down-popup-width: 122px !default;
$pv-zoom-drop-down-transform: rotate(0deg) !default;
$pv-corrupted-dialog-width: 380px !default;
$pv-corrupted-dialog-height: 165px !default;
$pv-corrupted-dialog-header-border-bottom: 0 !default;
$pv-corrupted-dialog-footer-border-top: 0 !default;
$pv-password-dialog-width: 441px !default;
$pv-password-dialog-height: auto !default;
$pv-password-dialog-header-border-bottom: 0 !default;
$pv-password-dialog-footer-border-top: 0 !default;
$pv-dialog-pop-close-icon-padding-top: 10px !default;
$pv-corrupted-dialog-pop-content-padding-top: 5px !default;
$pv-corrupted-dialog-pop-content-padding-bottom: 0 !default;
$pv-password-dialog-pop-content-padding-bottom: 0 !default;
$pv-toolbar-total-page-number-color: $grey-dark-font !default;
$pv-toolbar-total-page-number-font-size: 14px !default;
$pv-corrupted-notification-background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjM1cHgiIGhlaWdodD0iMzFweCIgdmlld0JveD0iMCAwIDM1IDMxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5Hcm91cCAzPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJDb3JydXB0ZWQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MTQuMDAwMDAwLCAtMzUzLjAwMDAwMCkiPg0KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OTQuMDAwMDAwLCAyODUuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLjAwMDAwMCwgNjguMTg0NDc0KSI+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS4yMjM0NzA4LDEwLjM1NzYwMjYgTDEyLjY1MzYzNywyMy40MDU1MTA2IEwxNC4xMzIwOTA1LDI2Ljk5MTI0OTUgTDE5LjM2MTc3ODksMjYuOTkxMjQ5NSBDMjAuNDQwMjUwNywxNy44NjA2NDE1IDIwLjY5MzgwOTcsMTIuMzE2MDkyNSAyMC4xMjI0NTU4LDEwLjM1NzYwMjYgQzE5LjU1MTEwMTksOC4zOTkxMTI3NCAxNy45MTgxMDY5LDguMzk5MTEyNzQgMTUuMjIzNDcwOCwxMC4zNTc2MDI2IFoiIGlkPSJQYXRoLTExIiBmaWxsPSIjMEUwRTBFIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMS42MjM4MDkxLDMwLjM4NzQxMDEgQzMzLjgyOTUxMDUsMzAuMzg3NDEwMSAzNC43MjA5MTk0LDI4LjgzODYyNDQgMzMuNjExOTMzMiwyNi45MjMxMDI4IEwxOS4yODk5MDMsMi4xODUwNTA2OCBDMTguMTgyMjEyMiwwLjI3MTc2NjU5NSAxNi4zODc1ODYsMC4yNjk1MjkwNjkgMTUuMjc4NTk5OCwyLjE4NTA1MDY4IEwwLjk1NjU2OTY4NSwyNi45MjMxMDI4IEMtMC4xNTExMjExMDMsMjguODM2Mzg2OCAwLjc0NDI0ODg4MiwzMC4zODc0MTAxIDIuOTQ0NjkzNzksMzAuMzg3NDEwMSBMMzEuNjIzODA5MSwzMC4zODc0MTAxIFogTTE1LjYxNzU4NDgsMjYuMzg3NDEwMSBMMTUuNjE3NTg0OCwyMy4wNTQwNzY3IEwxOC45NTA5MTgxLDIzLjA1NDA3NjcgTDE4Ljk1MDkxODEsMjYuMzg3NDEwMSBMMTUuNjE3NTg0OCwyNi4zODc0MTAxIFogTTE1LjYxNzU4NDgsMjAuNzIwNzQzNCBMMTUuNjE3NTg0OCwxMC4wNTQwNzY3IEwxOC45NTA5MTgxLDEwLjA1NDA3NjcgTDE4Ljk1MDkxODEsMjAuNzIwNzQzNCBMMTUuNjE3NTg0OCwyMC43MjA3NDM0IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0VGQzAwMiI+PC9wYXRoPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==') !default;
$pv-corrupted-notification-background-repeat: no-repeat !default;
$pv-corrupted-notification-background-size: 38px 33px !default;
$pv-corrupted-notification-height: 33px !default;
$pv-corrupted-notification-background-position: right !default;
$pv-toolbar-open-icon-font-size: 18px !default;
$pv-thumbnail-icon-disable-color: rgba($grey-dark-font, .2) !default;
$pv-thumbnail-icon-selection-color: $brand-primary !default;
$pv-sidebar-container-position: $pv-page-div-position !default;
$pv-sidebar-container-top: $pv-toolbar-height !default;
$pv-sidebar-container-bottom: 0 !default;
$pv-sidebar-container-width: 250px !default;
$pv-sidebar-container-z-index: 100 !default;
$pv-sidebar-container-background: $grey-f8 !default;
$pv-sidebar-container-border-top:  1px solid $grey-99 !default;
$pv-main-container-width: 100% !default;
$pv-main-container-height: 100% !default;
$pv-main-container-position: relative !default;
$pv-main-container-overflow: hidden !default;
$pv-viewer-main-container-position: $pv-page-div-position !default;
$pv-viewer-main-container-top: 0 !default;
$pv-viewer-main-container-right: 0 !default;
$pv-viewer-main-container-bottom: 0 !default;
$pv-viewer-main-container-left: 0 !default;
$pv-sidebar-content-container-position: $pv-page-div-position !default;
$pv-sidebar-content-container-left: 47px !default;
$pv-sidebar-content-container-display: none !default;
$pv-sidebar-content-container-height: calc(100% - 51px) !default;
$pv-sidebar-content-container-width: 202px !default;
$pv-sidebar-content-container-float: left !default;
$pv-sidebar-content-container-border-top:  1px solid $grey-99 !default;
$pv-sidebar-title-container-border-width: 0 0 0 0 !default;
$pv-sidebar-title-container-width: 202px !default;
$pv-sidebar-title-container-position: $pv-page-div-position !default;
$pv-sidebar-title-container-height: 50px !default;
$pv-sidebar-title-container-top: 0 !default;
$pv-sidebar-title-container-background: $grey-darker !default;
$pv-sidebar-title-container-z-index: 102 !default;
$pv-sidebar-title-margin: 0 !default;
$pv-sidebar-title-top: 15px !default;
$pv-sidebar-title-left: 8px !default;
$pv-sidebar-title-position: $pv-page-div-position !default;
$pv-sidebar-title-width: 160px !default;
$pv-sidebar-title-height: 16px !default;
$pv-sidebar-title-font-size: 14px !default;
$pv-sidebar-title-color: $grey-light-font !default;
$pv-sidebar-title-text-align: left !default;
$pv-sidebar-toolbar-z-index: 100 !default;
$pv-sidebar-toolbar-width: 47px !default;
$pv-sidebar-toolbar-height: calc(100% - 51px) !default;
$pv-sidebar-toolbar-bottom: 0 !default;
$pv-sidebar-toolbar-background: $grey-darker !default;
$pv-sidebar-toolbar-position: $pv-page-div-position !default;
$pv-sidebar-toolbar-border:  1px solid $grey-99 !default;
$pv-sidebar-toolbar-border-width:  1px 0 1px 1px !default;
$pv-sidebar-content-top: 48px !default;
$pv-sidebar-content-bottom: 0 !default;
$pv-sidebar-content-overflow: auto !default;
$pv-sidebar-content-position: $pv-page-div-position !default;
$pv-sidebar-content-width: 202px !default;
$pv-sidebar-content-background: $grey-darker !default;
$pv-sidebar-content-overflow-x: hidden !default;
$pv-sidebar-content-z-index: 103 !default;
$pv-sidebar-resizer-width: 8px !default;
$pv-sidebar-resizer-background: $grey !default;
$pv-sidebar-resizer-height: calc(100%) !default;
$pv-sidebar-resizer-cursor: ew-resize !default;
$pv-sidebar-resizer-left: 202px !default;
$pv-sidebar-resizer-z-index: 105 !default;
$pv-sidebar-resizer-position: $pv-page-div-position !default;
$pv-sidebar-content-scrollbar-width: 16px !default;
$pv-sidebar-content-scrollbar-track-box-shadow: inset 0 0 0 rgba(0, 0, 0, .3) !default;
$pv-sidebar-content-scrollbar-track-background: #f0f0f0 !default;
$pv-sidebar-content-scrollbar-track-border: 1px solid $grey-dark !default;
$pv-sidebar-content-scrollbar-thumb-border-radius: 100px !default;
$pv-sidebar-content-scrollbar-thumb-background: rgba(0, 0, 0, .5) !default;
$pv-sidebar-content-scrollbar-thumb-box-shadow: inset 0 0 0 rgba(0, 0, 0, .5) !default;
$pv-sidebar-content-scrollbar-thumb-border: 4px solid transparent !default;
$pv-sidebar-content-scrollbar-thumb-background-clip: content-box !default;
$pv-thumbnail-view-button-width: 32px !default;
$pv-thumbnail-view-button-height: 32px !default;
$pv-thumbnail-view-button-margin: 8px !default;
$pv-thumbnail-view-button-background: transparent !default;
$pv-thumbnail-view-button-selection-background: $grey-darker !default;
$pv-thumbnail-view-button-selection-line-height: 1em !default;
$pv-thumbnail-view-button-font-weight: 400 !default;
$pv-thumbnail-view-button-border: 0 !default;
$pv-thumbnail-view-button-selection-border: 0 !default;
$pv-thumbnail-border-selection-radius: 0 !default;
$pv-thumbnail-view-button-box-shadow: none !default;
$pv-thumbnail-view-button-padding: 10px !default;
$pv-thumbnail-view-button-selection-padding: 9px !default;
$pv-thumbnail-border-radius: 4px !default;
$pv-thumbnail-outline: none !default;
$pv-bookmark-button-width: 34px !default;
$pv-bookmark-button-height: 34px !default;
$pv-bookmark-button-margin: 8px !default;
$pv-bookmark-button-background: transparent !default;
$pv-bookmark-view-button-selection-background: $grey-99 !default;
$pv-bookmark-view-button-selection-line-height: 1em !default;
$pv-bookmark-button-border: none !default;
$pv-bookmark-button-box-shadow: none !default;
$pv-bookmark-button-padding: 10px !default;
$pv-bookmark-border-radius: 2px !default;
$pv-title-close-width: 32px !default;
$pv-title-close-height: 32px !default;
$pv-title-close-left: 170px !default;
$pv-title-close-right: 21px !default;
$pv-title-close-top: 5px !default;
$pv-title-close-padding: 0 7px 1px 0 !default;
$pv-title-close-background: transparent !default;
$pv-title-close-position: absolute !default;
$pv-title-close-border: 1px solid transparent !default;
$pv-title-close-box-shadow: none !default;
$pv-title-close-border-radius: none !default;
$pv-title-close-font-size: 12px !default;
$pv-sidebar-toolbar-splitter-width: 1px !default;
$pv-sidebar-toolbar-splitter-left: 47px !default;
$pv-sidebar-toolbar-splitter-background: $grey-99 !default;
$pv-sidebar-toolbar-splitter-height: calc(100% - 50px) !default;
$pv-sidebar-toolbar-splitter-z-index: 104 !default;
$pv-sidebar-toolbar-splitter-bottom: 0 !default;
$pv-sidebar-toolbar-splitter-position: absolute !default;
$pv-sidebar-content-splitter-width: 201px !default;
$pv-sidebar-content-splitter-height: 1px !default;
$pv-sidebar-content-splitter-background: $grey-99 !default;
$pv-sidebar-content-splitter-z-index: 104 !default;
$pv-sidebar-content-splitter-top: 47px !default;
$pv-sidebar-content-splitter-position: absolute !default;
$pv-thumbnail-view-height: 50% !default;
$pv-thumbnail-view-position: absolute !default;
$pv-thumbnail-view-top: 0 !default;
$pv-thumbnail-view-bottom: 0 !default;
$pv-thumbnail-view-padding: 8px 30px 0 !default;
$pv-thumbnail-width: 100px !default;
$pv-thumbnail-height: 140px !default;
$pv-thumbnail-margin: 0 20px 40px !default;
$pv-thumbnail-number-padding-left: 50px !default;
$pv-thumbnail-number-padding-top: 8px !default;
$pv-thumbnail-number-font-family: Roboto !default;
$pv-thumbnail-number-color: $pv-sidebar-title-color !default;
$pv-thumbnail-selection-ring-border-radius: 2px !default;
$pv-thumbnail-selection-ring-padding: 3px !default;
$pv-thumbnail-selection-ring-box-shadow: 0 0 4px 0 rgba($grey-light-font, .25) !default;
$pv-thumbnail-image-width: 94px !default;
$pv-thumbnail-image-height: 126px !default;
$pv-thumbnail-image-background-color: #fff !default;
$pv-thumbnail-image-background-clip: content-box !default;
$pv-thumbnail-hover-border-radius: 2px !default;
$pv-thumbnail-hover-padding: 2px !default;
$pv-thumbnail-hover-cursor: pointer !default;
$pv-thumbnail-hover-border: 1px solid $grey-99 !default;
$pv-thumbnail-hover-box-shadow: 0 0 3px 0 rgba($grey-light-font, .25) !default;
$pv-thumbnail-focus-border-radius: 2px !default;
$pv-organize-page-select-border-radius: 2px !default;
$pv-thumbnail-focus-cursor: pointer !default;
$pv-thumbnail-focus-padding: 2px !default;
$pv-thumbnail-focus-border: 1px solid $grey-ad !default;
$pv-organize-page-select-border: 2px solid $brand-primary !default;
$pv-thumbnail-focus-box-shadow: 0 0 4px 0 rgba($grey-light-font, .25) !default;
$pv-thumbnail-selection-border-radius: 2px !default;
$pv-thumbnail-selection-cursor: pointer !default;
$pv-thumbnail-selection-border: 2px solid $brand-primary !default;
$pv-thumbnail-selection-padding: 1px !default;
$pv-thumbnail-selection-box-shadow: 0 0 4px 0 rgba($grey-light-font, .25) !default;
$pv-thumbnail-row-display: flex !default;
$pv-thumbnail-row-flex-wrap: wrap !default;
$pv-thumbnail-column-flex: 25% !default;
$pv-thumbnail-column-img-vertical-align: middle !default;
$pv-bookmark-view-height: 100% !default;
$pv-bookmark-view-position: relative !default;
$pv-bookmark-view-padding-top: 15px !default;
$pv-bookmark-view-overflow: auto !default;
$pv-bookmark-icon-float: left !default;
$pv-bookmark-icon-font-size: 14px !default;
$pv-bookmark-icon-padding-right: 18px !default;
$pv-bookmark-icon-padding-left: 6px !default;
$pv-bookmark-title-padding-left: 40px !default;
$pv-bookmark-expandable-icon-margin-top: 3px !default;
$pv-bookmark-icon-font: grey-light-font 54% !default;
$pv-sidebar-bookmark-title-font-size: 14px !default;
$pv-sidebar-bookmark-title-font-family: Roboto-Regular !default;
$pv-sidebar-bookmark-title-color: rgba(0, 0, 0, .87) !default;
$pv-sidebar-bookmark-title-font: grey-light-font 87% !default;
$pv-treeview-overflow: unset !default;
$pv-treeview-fullrow-height: 34px !default;
$pv-bookmark-view-ul-padding: 0 0 0 16px !default;
$pv-bookmark-view-list-ul-padding-left: 32px !default;
$pv-bookmark-view-icon-collapsible-display: inline-block !default;
$pv-bookmark-view-icon-collapsible-padding: 7px !default;
$pv-bookmark-view-icon-collapsible-height: 13px !default;
$pv-bookmark-view-icon-collapsible-width: 13px !default;
$pv-item-selection-color: $brand-primary !default;
$pv-item-selection-background-color: $grey-darker !default;
$pv-item-selection-border-radius: 0 !default;
$pv-item-selection-border: 0 !default;
$pv-print-popup-container-position: absolute !default;
$pv-print-popup-container-z-index: 2000 !default;
$pv-print-popup-container-width: 100% !default;
$pv-print-popup-container-height: 100% !default;
$pv-print-popup-container-left: 0 !default;
$pv-print-popup-container-top: 0 !default;
$pv-print-popup-container-overflow: auto !default;
$pv-print-popup-container-background-color: #000 !default;
$pv-print-popup-container-opacity: .3 !default;
$pv-search-box-height: 120px !default;
$pv-search-box-width: 400px !default;
$pv-search-box-background-color: $grey-darker !default;
$pv-search-box-border: 1px solid $grey-99 !default;
$pv-search-box-border-radius: 4px !default;
$pv-search-box-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24) !default;
$pv-search-box-padding: 26px 21px 24px 21px !default;
$pv-search-input-height: 34px !default;
$pv-search-input-width: 282px !default;
$pv-match-case-margin-top: 13px !default;
$pv-search-btn-height: 24px !default;
$pv-search-btn-width: 24px !default;
$pv-search-btn-margin-top: -6px;
$pv-search-prev-margin-left: 11px !default;
$pv-search-next-margin-left: 8px !default;
$pv-notification-popup-height: 185px !default;
$pv-notification-popup-width: $pv-corrupted-dialog-width !default;
$pv-notification-popup-height-large-content: 200px;
$pv-notification-popup-width-large-content: 384px;
$pv-notification-content-font-size: 14px !default;
$pv-zoom-dropdown-input-focus-color: inherit !default;
$pv-text-selection-bg-color: #247796 !default;
$pv-text-selection-opacity: .6 !default;
$pv-toolbar-text-select-tool-btn-padding: 2px 9px 2px 11px !default;
$pv-selection-touch-element-background-color: #3088ed !default;
$pv-selection-touch-element-border-color: #3088ed !default;
$pv-sidebar-toolbar-border-top:  1px solid #e0e0e0 !default;
$pv-material-line-background: none !default;
$pv-toolbar-btn-padding: 1px 2.5px !default;
$pv-toolbar-btn-line-height: 27px !default;
$pv-toolbaritem-btn-line-height: 26px !default;
$pv-toolbaritem-btn-min-height: 26px !default;
$pv-toolbar-btn-margin: 0 !default;
$pv-mobile-page-box-padding-top: 3px !default;
$pv-zoom-dropdown-width-mobile: 105px !default;
$pv-mobile-page-box-padding-left-focus: 1.5px !default;
$pv-password-dialog-height-mobile: auto !default;
$pv-notification-dialog-height-mobile: 217px !default;
$pv-notification-dialog-height-large-mobile: 235px !default;
$pv-corrupted-dialog-height-mobile: 185px !default;
$pv-dialog-pop-close-icon-padding-top-mobile: 0 !default;
$pv-sidebar-resizer-border: 1px solid $grey-99 !default;
$pv-sidebar-resizer-border-width: 0 1px 0 0 !default;
$pv-sidebar-resizer-color: $grey-dark-font !default;
$pv-input-active-background: $grey-dark !default;
$pv-input-active-color: $grey-light-font !default;
$pv-input-hover-background: $grey !default;
$pv-input-hover-color: $grey-dark-font !default;
$pv-input-background: transparent !default;
$pv-textsearch-textbox-margin-right: 10px !default;
$pv-bookmark-icon-rtl-position: absolute !default;
$pv-bookmark-icon-rtl-padding: 1px !default;
$pv-corrupted-pop-content-margin-right: 53px !default;
$pv-corrupted-pop-header-rtl-text-align: right !default;
$pv-bookmark-container-background-color: $base-font !default;
$pv-nav-toolbar-text-color: $grey-light-font !default;
$pv-toolbar-btn-width-mobile: 36px !default;
$pv-toolbar-btn-height-mobile: 36px !default;
$pv-bookmark-container-border: 1px solid $grey-99 !default;
$pv-bookmark-list-border-bottom: 1px solid $grey-99 !default;
$pv-annotation-opacity-popup-background-color: #2a2a2a !default;
$pv-annotation-opacity-popup-color: #f0f0f0 !default;
$pv-annotation-opacity-popup-padding: 23px !default;
$pv-annotation-opacity-popup-min-height: 48px !default;
$pv-annotation-opacity-popup-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .26) !default;
$pv-annotation-opacity-slider-width: 174px !default;
$pv-annotation-opacity-slider-width-rtl: 130px !default;
$pv-annotation-opacity-slider-margin-left: 9px !default;
$pv-annotation-opacity-slider-margin-right: 9px !default;
$pv-annotation-opacity-slider-height: 16px !default;
$pv-annotation-drop-down-caret-font-size: 12px !default;
$pv-annotation-drop-down-height: 32px !default;
$pv-annotation-drop-down-width: 54px !default;
$pv-annotation-opacity-icon-padding-top: 1px !default;
$pv-annotation-dropdown-background-color: $grey-darker !default;
$pv-annotation-dropdown-border-color: transparent !default;
$pv-annotation-dropdown-background-color-hover: $grey !default;
$pv-annotation-dropdown-border-color-hover: $grey-white !default;
$pv-annotation-dropdown-background-color-active: $grey !default;
$pv-annotation-dropdown-border-color-active: $grey-white !default;
$pv-annotation-drop-down-btn-line-height: 16px !default;
$pv-annotation-drop-down-btn-padding: 7px 8px !default;
$pv-annotation-icon-padding: 1px 8px 3px !default;
$pv-annotation-note-border-bottom-color: #000 !default;
$pv-annotation-note-popup-bg-color: #fff !default;
$pv-print-overlay-bg-color: rgba($pv-print-popup-container-background-color, $pv-print-popup-container-opacity) !default;
$pv-comment-font-color: rgba(255, 255, 255, .9) !default;
$pv-comment-text-color:  rgba(255, 255, 255, .6) !default;
$pv-comment-color: #0070f0 !default;
$pv-comment-panel-bg: #131313 !default;
$pv-comment-panel-bottom-color: #0070f0 !default;
$pv-comments-content-container-bg: #131313 !default;
$pv-comments-select-bg: #6e6e6e !default;
$pv-comments-hover-bg: #6e6e6e !default;
$pv-comments-div-focus-background: $gray-dark !default;
$pv-comments-div-focus-border: none !default;
$pv-annotation-thickness-drop-down-padding-top: 8px !default;
$pv-stamp-container-border-radius: 2px !default;
$pv-stamp-icon-margin-top: 0 !default;
$pv-properties-padding: 0 12px !default;
$pv-properties-drop-down-margin-left: 80px !default;
$pv-properties-line-style-padding: 8px !default;
$pv-status-icon-color: #fff !default;
$pv-save-button-bg-color: #313131 !default;
$pv-save-button-color: rgba(255, 255, 255, .6) !default;
$pv-status-icon-padding: 2px 1px 1px 3.5px !default;
$pv-accepted-icon-padding: 1px 1px 1px 4px !default;
$pv-rejected-icon-padding: 2px 1px 1px 4px !default;
$pv-status-icon-font-size: 14px !default;
$pv-status-icon-position: absolute !default;
$pv-comment-text-cursor-color: #0070f0 !default;
$pv-comment-panel-border-color: #505050 !default;
$pv-drop-down-toolbar-box-shadow: none !default;
$pv-line-stroke-color-margin-left: 150px !default;
$pv-blazor-line-stroke-color-margin-left: 162px !default;
$pv-blazor-line-stroke-color-margin-left-bigger: 141px !default;
$pv-line-leader-length-margin-left: 15px !default;
$pv-annot-toolbar-dropdown-btn-height: 36px !default;
$pv-annot-toolbar-dropdown-btn-line-height: 36px !default;
$pv-annot-toolbar-dropdown-btn-width: 69px !default;
$pv-annot-toolbar-dropdown-btn-padding-top: 2px !default;
$pv-properties-win-max-width: 417px !default;
$pv-properties-win-max-width-big: 425px !default;
$pv-properties-container-margin-bottom: 16px !default;
$pv-properties-container-height: 52px !default;
$pv-scale-ratio-win-max-width: 420px !default;
$pv-scale-ratio-win-max-width-big: 435px !default;
$pv-prop-line-styles-color: #000 !default;
$pv-prop-line-styles-hover-bg: $grey-e6 !default;
$pv-prop-color-picker-height: 36px !default;
$pv-prop-color-picker-line-height: 16px !default;
$pv-scale-ratio-win-drop-down-padding: 0 12px !default;
$pv-scale-ratio-win-drop-down-caret-margin-left: 93px !default;
$pv-scale-ratio-win-drop-down-caret-margin-top: 12px !default;
$pv-scale-ratio-input-container-height: 24px !default;
$pv-scale-ratio-input-container-margin-bottom: 24px !default;
$pv-scale-ratio-width: 180px !default;
$pv-scale-ratio-container-max-width: 180px !default;
$pv-properties-window-container-max-width: $pv-scale-ratio-container-max-width !default;
$pv-properties-window-container-width: $pv-scale-ratio-container-max-width !default;
$pv-annotation-dd-background-color-active: $grey-dd !default;
$pv-prop-line-styles-margin-top: 2.5px !default;
$pv-more-option-button-padding: 1px 7px 1px 1px !default;
$pv-comment-title-padding-top: 8px !default;
$pv-signature-footer-color: #bdbdbd !default;
$pv-signature-border-color: 1px dotted #bdbdbd !default;
$pv-signature-color: #e3165b !default;
$pv-form-checkbox-border-color: #303030 !default;
$pv-form-field-size: 0 !default;
$pv-properties-form-field-win-max-width: 477px !default;
$pv-form-field-radiobutton-border: 5px solid #fff !default;
$pv-form-field-radiobutton-box-shadow: 0 0 0 1px #303030 !default;
$pv-form-field-li-background-color: #d3d3d3 !default;
$pv-form-field-font-style-icon-color: #e2e2e2 !default;
$pv-form-field-font-style-icon-color-active: #b8b8b8 !default;
$pv-form-field-checkbox-container: 1px solid #303030 !default;
$pv-form-field-checkbox-checked: solid #303030 !default;
$pv-form-field-checkbox-border-width: 3px !default;
$pv-form-field-property-header-font-size: 20px !default;
$pv-form-field-property-header-font-weight: 500 !default;
$pv-form-field-property-header-line-height: 23px !default;
$pv-form-field-property-header-opacity: .87 !default;
$pv-form-field-property-header-margin-top: 5px !default;
$pv-form-field-property-header-width: 80% !default;
$pv-form-field-property-header-color: #000 !default;
$pv-form-field-property-general-header-font-size: 13px !default;
$pv-form-field-property-general-header-line-height: 15px !default;
$pv-form-field-property-label-color: #757575 !default;
$pv-form-field-property-font-style-color: #000 !default;
$pv-prop-win-margin-left: 24px !default;
$pv-font-size-field-width: 99px !default;
$pv-formfield-maxlength-width: 77px !default;
$pv-formfield-maxlength-arrow-width: 18px !default;
$pv-formfield-designer-dialog-height: 544px !default;
$pv-properties-header-spliter-border-bottom-color: $grey-light-font !default;
$pv-properties-header-spliter-border-bottom-style: solid !default;
$pv-properties-header-spliter-border-bottom-width: 1px !default;
$pv-properties-header-spliter-left: 0 !default;
$pv-properties-header-spliter-padding-top: 40px !default;
$pv-properties-header-spliter-position: absolute !default;
$pv-properties-header-spliter-width: 0 !default;
$pv-properties-header-spliter-margin-bottom: 10px !default;
$pv-formfield-maxlength-group-padding-left: 105px !default;
$pv-formfield-properties-icon-height: 44px !default;
$pv-formfield-properties-icon-padding: 5px !default;
$pv-formfield-properties-icon-align-padding: 8px 8px !default;
$pv-form-field-property-font-style-width: 46px !default;
$pv-signature-delete-icon-margin-top: 14px !default;
$pv-signature-dialog-height: 570px !default;
$pv-signature-dialog-blazor-height: 560px !default;
$pv-blazor-scale-ratio-dialog-max-width: 525px !default;
$pv-handwritten-sign-width: 717px !default;
$pv-handwritten-sign-height: 356px !default;
$pv-canvas-sign-width: 718px !default;
$pv-canvas-sign-width-blazor: 718px !default;
$pv-font-div-padding: 15px !default;
$pv-font-div-padding-blazor: 15px !default;
$pv-signature-appearance-checkbox: 1px !default;
$pv-show-designer-name-color: #000 !default;
$pv-eye-icon-font-size: 18px !default;
$pv-eye-icon-padding: 7px !default;
$pv-eye-icon-hover-cursor: pointer !default;
$pv-eye-icon-margin-top: 3px !default;
$pv-organize-anchor-node-border-width: 2px !default;
$pv-organize-anchor-node-border: $pv-organize-anchor-node-border-width solid $grey-99 !default;
$pv-organize-anchor-node-tile-border: $pv-organize-anchor-node-border-width solid $grey-base !default;
$pv-organize-image-border: 1px solid $grey-99 !default;
$pv-default-tile-icon-size: 25px !default;
$pv-organize-tile-draggedEle-bg-color: $grey-darker !default;
$pv-organize-anchor-node-dashed-border: $pv-organize-anchor-node-border-width dashed $grey-99 !default;
$pv-organize-page-hovered-dashed-border-color: $brand-primary !default;
$pv-organize-page-virtualEle-notification-color: $brand-primary !default;
$pv-organize-page-drag-not-allowed-color: $grey-99 !default;
$pv-organize-page-zoom-popup-box-shadow: 0 0 4px 3px rgba(0, 0, 0, .26) !default;
$pv-organize-page-zoom-popup-padding: 8px !default;
$pv-organize-page-zoom-slider-margin-left: 15px !default;
$pv-organize-page-zoom-slider-margin-right: 15px !default;
$pv-modern-sidebar-width: 40px !default;
$pv-modern-sidebar-width-big: 48px !default;
$pv-modern-sidebar-padding-top: 12px !default;
$pv-modern-sidebar-padding-top-big: 12px !default;
$pv-modern-sidebar-btn-gap: 8px !default;
$pv-modern-sidebar-btn-gap-big: 8px !default;
$pv-modern-sidebar-btn-font-size: 16px !default;
$pv-modern-sidebar-btn-font-size-big: 18px !default;
$pv-modern-sidebar-btn-width: 32px !default;
$pv-modern-sidebar-btn-width-big: 40px !default;
$pv-modern-sidebar-btn-height: 32px !default;
$pv-modern-sidebar-btn-height-big: 40px !default;
$pv-modern-sidebar-separator-width: 24px !default;
$pv-modern-sidebar-separator-width-big: 24px !default;
$pv-modern-sidebar-separator-margin: 0 !default;
$pv-modern-sidebar-separator-margin-big: 0 !default;
$pv-modern-sidebar-separator-border: 1px solid $grey-99 !default;
$pv-modern-panel-right: 47px !default;
$pv-modern-panel-right-big: 48px !default;
$pv-modern-panel-border-width: 1px 1px 0 1px !default;
$pv-modern-panel-font-color: rgba(255, 255, 255, .9) !default;
$pv-modern-panel-background: $grey-darker !default;
$pv-modern-panel-border: 1px solid $grey-99 !default;
$pv-modern-panel-header-height: 38px !default;
$pv-modern-panel-header-border: 1px solid $grey-99 !default;
$pv-modern-panel-header-height-big: 48px !default;
$pv-modern-panel-template-height: calc(100% - $pv-modern-panel-header-height) !default;
$pv-modern-panel-template-height-big: calc(100% - $pv-modern-panel-header-height-big) !default;
$pv-modern-splitter-border-radius: 12px 12px 0 0 !default;
$pv-modern-splitter-background: $grey-darker !default;
$pv-modern-splitter-border: 1px solid $grey-99 !default;
$pv-modern-splitter-menu-item-height: 40px !default;
$pv-modern-splitter-menu-padding: 0 12px !default;
$pv-modern-splitter-menu-item-padding: 0 12px !default;
$pv-modern-splitter-menu-item-font-size: 16px !default;
$pv-modern-splitter-menu-item-icon-size: 18px !default;
$pv-modern-resize-handler-margin: 15px !default;
$pv-modern-resize-handler-icon-content: '\e520' !default;
$pv-white-color: #fff !default;
$pv-selected-signature-color: #f00 !default;
$pv-signature-font-color: #000 !default;
$pv-green-color: rgb(24, 169, 85) !default;
$pv-blue-color: rgb(0, 122, 255) !default;
$pv-orange-color: rgb(245, 103, 0) !default;
$pv-red-color: rgb(255, 59, 48) !default;
$pv-annotation-tool-item-focus-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), .5);
$pv-blazor-annotation-thickness-popup-container-mobile-box-shadow: 0 3px 8px 0 #e9ecef;
$pv-redaction-panel-text-color: #f0f0f0 !default;

// Typography Varaiables

// Font weight
$pv-font-weight-medium: 500 !default;
$pv-font-weight-semibold: 600 !default;

// Font Size
$pv-text-xxs: 10px !default;
$pv-text-xs: 12px !default;
$pv-text-sm: 14px !default;
$pv-text-base: 16px !default;
$pv-text-lg: 18px !default;
$pv-text-xl: 20px !default;
$pv-text-2xl: 24px !default;
$pv-font-size-0: 0 !default;
$pv-font-size-13: 13px !default;
$pv-font-size-15: 15px !default;
$pv-font-size-inherit: inherit !default;

// Line Height
$pv-line-height-14: 14px !default;
$pv-line-height-16: 16px !default;
$pv-line-height-20: 20px !default;
$pv-line-height-24: 24px !default;
$pv-line-height-28: 28px !default;
$pv-line-height-32: 32px !default;
$pv-line-height-36: 36px !default;
$pv-line-height-40: 40px !default;
$pv-line-height-0: 0 !default;
$pv-line-height-normal: normal !default;

// Spacing
$pv-spacing-0: 0 !default;
$pv-spacing-1: 1px !default;
$pv-spacing-2: 2px !default;
$pv-spacing-3: 3px !default;
$pv-spacing-4: 4px !default;
$pv-spacing-5: 5px !default;
$pv-spacing-6: 6px !default;
$pv-spacing-7: 7px !default;
$pv-spacing-8: 8px !default;
$pv-spacing-9: 9px !default;
$pv-spacing-10: 10px !default;
$pv-spacing-11: 11px !default;
$pv-spacing-12: 12px !default;
$pv-spacing-13: 13px !default;
$pv-spacing-14: 14px !default;
$pv-spacing-15: 15px !default;
$pv-spacing-16: 16px !default;
$pv-spacing-17: 17px !default;
$pv-spacing-18: 18px !default;
$pv-spacing-20: 20px !default;
$pv-spacing-22: 22px !default;
$pv-spacing-24: 24px !default;
$pv-spacing-25: 25px !default;
$pv-spacing-28: 28px !default;
$pv-spacing-30: 30px !default;
$pv-spacing-32: 32px !default;
$pv-spacing-36: 36px !default;
$pv-spacing-40: 40px !default;
$pv-spacing-42: 42px !default;
$pv-spacing-44: 44px !default;
$pv-spacing-48: 48px !default;
$pv-spacing-3-425p: 3.425% !default;
$pv-spacing-3-657p: 3.657% !default;
$pv-spacing-unset: unset !default;
$pv-spacing-145: 145px !default;
$pv-spacing-87: 87px !default;
$pv-spacing-auto: auto !default;
$pv-spacing--2: -2px !default;
$pv-spacing--4: -4px !default;
$pv-spacing--6: -6px !default;
$pv-spacing--8: -8px !default;
$pv-spacing--12: -12px !default;
$pv-spacing-7p: 7% !default;
$pv-spacing-55p: 55% !default;
$pv-spacing-54p: 54% !default;
$pv-spacing-160: 160px !default;
$pv-spacing-195: 195px !default;
$pv-spacing-60p: 60% !default;
$pv-spacing--2p: -2% !default;
$pv-spacing--4p: -4% !default;
$pv-spacing-85: 85px !default;
$pv-spacing--10: -10px !default;

// Border width
$pv-border-0: 0 !default;
$pv-border-1: 1px !default;
$pv-border-2: 2px !default;
$pv-border-3: 3px !default;
$pv-border-4: 4px !default;
$pv-border-5: 5px !default;
$pv-border-6: 6px !default;
$pv-border-7: 7px !default;

// Radius
$pv-radius-0: 0 !default;
$pv-radius-2: 2px !default;
$pv-radius-4: 4px !default;
$pv-radius-6: 6px !default;
$pv-radius-8: 8px !default;
$pv-radius-12: 12px !default;
$pv-radius-16: 16px !default;
$pv-radius-20: 20px !default;
$pv-radius-48: 48px !default;
$pv-border-radius-50p: 50% !default;

//Height
$pv-height-0: 0 !default; /* 0px */
$pv-height-1: 1px !default; /* 1px */
$pv-height-10: 10px !default; /* 10px */
$pv-height-12: 12px !default; /* 12px */
$pv-height-14: 14px !default; /* 14px */
$pv-height-18: 18px !default; /* 18px */
$pv-height-20: 20px !default; /* 20px */
$pv-height-22: 22px !default; /* 22px */
$pv-height-24: 24px !default; /* 24px */
$pv-height-25: 25px !default; /* 25px */
$pv-height-26: 26px !default; /* 26px */
$pv-height-28: 28px !default; /* 28px */
$pv-height-29: 29px !default; /* 29px */
$pv-height-30: 30px !default; /* 30px */
$pv-height-31: 31px !default; /* 31px */
$pv-height-32: 32px !default; /* 32px */
$pv-height-33: 33px !default; /* 33px */
$pv-height-34: 34px !default; /* 34px */
$pv-height-36: 36px !default; /* 36px */
$pv-height-38: 38px !default; /* 38px */
$pv-height-40: 40px !default; /* 40px */
$pv-height-42: 42px !default; /* 42px */
$pv-height-45: 45px !default; /* 45px */
$pv-height-48: 48px !default; /* 48px */
$pv-height-49: 49px !default; /* 49px */
$pv-height-50: 50px !default; /* 50px */
$pv-height-56: 56px !default; /* 56px */
$pv-height-60: 60px !default; /* 60px */
$pv-height-88: 88px !default; /* 88px */
$pv-height-108: 108px !default; /* 108px */
$pv-height-123: 123px !default; /* 123px */
$pv-height-140: 140px !default; /* 140px */
$pv-height-150: 150px !default; /* 150px */
$pv-height-270: 270px !default; /* 270px */
$pv-height-280: 280px !default; /* 280px */
$pv-height-305: 305px !default; /* 305px */
$pv-height-340: 340px !default; /* 340px */
$pv-height-350: 350px !default; /* 350px */
$pv-height-500: 500px !default; /* 500px */
$pv-height-inherit: inherit !default; /* inherit */
$pv-height-auto: auto !default; /* auto */
$pv-height-unset: unset !default; /* unset */
$pv-height-normal: normal !default; /* normal */
$pv-height-p95: 95% !default; /* 95% */
$pv-height-p96: 96% !default; /* 96% */
$pv-height-p98: 98% !default; /* 98% */
$pv-height-p100: 100% !default; /* 100% */
$pv-height-329: 329px !default; /* 329px */
$pv-height-98: 98px !default; /* 98px */
$pv-height-465: 465px !default; /* 465px */
$pv-height-112: 112px !default; /* 112px */
$pv-height-620: 620px !default; /* 620px */
$pv-height-1-5em: 1.5em !default; /* 1.5em */
$pv-height-132: 132px !default; /* 132px */
$pv-height-555: 555px !default; /* 555px */
$pv-height-525: 525px !default; /* 525px */
$pv-height-570: 570px !default; /* 570px */
$pv-height-600: 600px !default; /* 600px */
$pv-height-505: 505px !default; /* 505px */
$pv-height-490: 490px !default; /* 490px */
$pv-height-138: 138px !default; /* 138px */
$pv-height-565: 565px !default; /* 565px */
$pv-height-585: 585px !default; /* 585px */
$pv-height-627: 627px !default; /* 627px */
$pv-height-591: 591px !default; /* 591px */
$pv-height-584: 584px !default; /* 584px */
$pv-height-592: 592px !default; /* 592px */
$pv-height-590: 590px !default; /* 590px */
$pv-height-615: 615px !default; /* 615px */
$pv-height-576: 576px !default; /* 576px */
$pv-height-109: 109px !default; /* 109px */
$pv-height-498: 498px !default; /* 498px */
$pv-height-530: 530px !default; /* 530px */

//Width
$pv-width-p10: 10% !default; /* 10% */
$pv-width-p25: 25% !default; /* 25% */
$pv-width-p40: 40% !default; /* 40% */
$pv-width-p45: 45% !default; /* 45% */
$pv-width-p50: 50% !default; /* 50% */
$pv-width-p54: 54% !default; /* 54% */
$pv-width-p55: 55% !default; /* 55% */
$pv-width-p70: 70% !default; /* 70% */
$pv-width-p80: 80% !default; /* 80% */
$pv-width-p100: 100% !default; /* 100% */
$pv-width-0: 0 !default; /* 0px */
$pv-width-1: 1px !default; /* 1px */
$pv-width-6: 6px !default; /* 6px */
$pv-width-8: 8px !default; /* 8px */
$pv-width-18: 18px !default; /* 18px */
$pv-width-20: 20px !default; /* 20px */
$pv-width-21: 21px !default; /* 21px */
$pv-width-24: 24px !default; /* 24px */
$pv-width-25: 25px !default; /* 25px */
$pv-width-28: 28px !default; /* 28px */
$pv-width-30: 30px !default; /* 30px */
$pv-width-32: 32px !default; /* 32px */
$pv-width-33: 33px !default; /* 33px */
$pv-width-36: 36px !default; /* 36px */
$pv-width-38: 38px !default; /* 38px */
$pv-width-40: 40px !default; /* 40px */
$pv-width-42: 42px !default; /* 42px */
$pv-width-43: 43px !default; /* 43px */
$pv-width-44: 44px !default; /* 44px */
$pv-width-48: 48px !default; /* 48px */
$pv-width-50: 50px !default; /* 50px */
$pv-width-54: 54px !default; /* 54px */
$pv-width-56: 56px !default; /* 56px */
$pv-width-58: 58px !default; /* 58px */
$pv-width-59: 59px !default; /* 59px */
$pv-width-60: 60px !default; /* 60px */
$pv-width-61: 61px !default; /* 61px */
$pv-width-64: 64px !default; /* 64px */
$pv-width-65: 65px !default; /* 65px */
$pv-width-68: 68px !default; /* 68px */
$pv-width-70: 70px !default; /* 70px */
$pv-width-72: 72px !default; /* 72px */
$pv-width-75: 75px !default; /* 75px */
$pv-width-76: 76px !default; /* 76px */
$pv-width-82: 82px !default; /* 82px */
$pv-width-84: 84px !default; /* 84px */
$pv-width-90: 90px !default; /* 90px */
$pv-width-92: 92px !default; /* 92px */
$pv-width-96: 96px !default; /* 96px */
$pv-width-100: 100px !default; /* 100px */
$pv-width-110: 110px !default; /* 110px */
$pv-width-120: 120px !default; /* 120px */
$pv-width-122: 122px !default; /* 122px */
$pv-width-140: 140px !default; /* 140px */
$pv-width-150: 150px !default; /* 150px */
$pv-width-160: 160px !default; /* 160px */
$pv-width-180: 180px !default; /* 180px */
$pv-width-195: 195px !default; /* 195px */
$pv-width-200: 200px !default; /* 200px */
$pv-width-240: 240px !default; /* 240px */
$pv-width-275: 275px !default; /* 275px */
$pv-width-290: 290px !default; /* 290px */
$pv-width-300: 300px !default; /* 300px */
$pv-width-500: 500px !default; /* 500px */
$pv-width-auto: auto !default; /* auto */
$pv-width-inherit: inherit !default; /* inherit */
$pv-width-unset: unset !default; /* unset */
$pv-width-1em: 1em !default; /* 1em */
$pv-width-1-5em: 1.5em !default; /* 1.5em */
$pv-width-2em: 2em !default; /* 2em */
$pv-width-37p: 37% !default; /* 37% */
$pv-width-43p: 43% !default; /* 43% */
$pv-width-44p: 44% !default; /* 44% */
$pv-width-46p: 46% !default; /* 46% */
$pv-width-52p: 52% !default; /* 52% */
$pv-width-78p: 78% !default; /* 78% */
$pv-width-85p: 85% !default; /* 85% */
$pv-width-94p: 94% !default; /* 94% */
$pv-width-95p: 95% !default; /* 95% */
$pv-width-95-5p: 95.5% !default; /* 95.5% */
$pv-width-95-55p: 95.55% !default; /* 95.55% */
$pv-width-97p: 97% !default; /* 97% */
$pv-width-103p: 103% !default; /* 103% */
$pv-width-38-5: 38.5px !default; /* 38.5px */
$pv-width-105: 105px !default; /* 105px */
$pv-width-118: 118px !default; /* 118px */
$pv-width-128: 128px !default; /* 128px */
$pv-width-138: 138px !default; /* 138px */
$pv-width-152: 152px !default; /* 152px */
$pv-width-154: 154px !default; /* 154px */
$pv-width-155: 155px !default; /* 155px */
$pv-width-163: 163px !default; /* 163px */
$pv-width-165: 165px !default; /* 165px */
$pv-width-170: 170px !default; /* 170px */
$pv-width-175: 175px !default; /* 175px */
$pv-width-176: 176px !default; /* 176px */
$pv-width-177: 177px !default; /* 177px */
$pv-width-185: 185px !default; /* 185px */
$pv-width-186: 186px !default; /* 186px */
$pv-width-204: 204px !default; /* 204px */
$pv-width-214: 214px !default; /* 214px */
$pv-width-215: 215px !default; /* 215px */
$pv-width-232: 232px !default; /* 232px */
$pv-width-248: 248px !default; /* 248px */
$pv-width-285: 285px !default; /* 285px */
$pv-width-295: 295px !default; /* 295px */
$pv-width-311: 311px !default; /* 311px */
$pv-width-318: 318px !default; /* 318px */
$pv-width-335: 335px !default; /* 335px */
$pv-width-340: 340px !default; /* 340px */
$pv-width-368: 368px !default; /* 368px */
$pv-width-380: 380px !default; /* 380px */
$pv-width-384: 384px !default; /* 384px */
$pv-width-385: 385px !default; /* 385px */
$pv-width-396: 396px !default; /* 396px */
$pv-width-420: 420px !default; /* 420px */
$pv-width-430: 430px !default; /* 430px */
$pv-width-435: 435px !default; /* 435px */
$pv-width-450: 450px !default; /* 450px */
$pv-width-470: 470px !default; /* 470px */
$pv-width-490: 490px !default; /* 490px */
$pv-width-525: 525px !default; /* 525px */
$pv-width-max: max-content !default; /* max-content */

//letter-spacing
$pv-letter-spacing-0-24: .24px !default; /* .24px */

@include export-module('pdfviewer-layout') {

  /*! component layout */
  /* stylelint-disable property-no-vendor-prefix */
  .e-pdfviewer {
    .e-pv-viewer-container {
      border-style: $pv-viewer-border-style;
      border-width: $pv-viewer-border-width;
    }

    .e-pv-text-layer {
      position: absolute;
      top: 0;
      z-index: 2;
    }

    .e-pv-annotation-canvas {
      left: 0;
      position: absolute;
      top: 0;
    }

    .e-pv-text {
      background: transparent;
      color: transparent;
      line-height: $pv-line-height-normal;
      opacity: $pv-text-selection-opacity;
      position: absolute;
    }

    .e-pv-search-text-highlight,
    .e-pv-search-text-highlightother {
      line-height: $pv-line-height-normal;
      opacity: $pv-text-selection-opacity;
      position: absolute;
    }

    .e-pv-hyperlink {
      z-index: 2;
    }

    .e-pv-hyperlink.e-pv-onselection {
      z-index: 1;
    }

    .e-enable-text-selection {
      -moz-user-select: text;
      -ms-user-select: text;
      -webkit-user-select: text;
      user-select: text;
    }

    .e-disable-text-selection {
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .e-enable-text-selection .e-pv-text {
      display: inline-block;
    }

    .e-disable-text-selection .e-pv-text {
      display: none;
    }

    .e-pv-cursor {
      cursor: text;
    }

    .e-pv-crosshair-cursor {
      cursor: crosshair;
    }

    .e-pv-touch-select-drop {
      display: inline-block;
      height: $pv-height-30;
      position: absolute;
      width: $pv-width-30;
      z-index: 1000;
    }

    .e-pv-touch-ellipse {
      background-color: $pv-selection-touch-element-background-color;
      border-bottom-left-radius: $pv-border-radius-50p;
      border-bottom-right-radius: $pv-border-radius-50p;
      border-color: $pv-selection-touch-element-border-color;
      border-style: solid;
      border-top-left-radius: $pv-border-radius-50p;
      border-width: $pv-border-2;
      height: $pv-height-20;
      margin: $pv-spacing-0 $pv-spacing-0 $pv-spacing-0 $pv-spacing-9;
      position: absolute;
      width: $pv-width-20;
    }

    .e-pv-annotation-note {
      border-radius: $pv-radius-2;
      cursor: auto;
      font-size: $pv-sidebar-title-font-size;
      height: $pv-height-auto;
      max-width: $pv-width-200;
      min-height: $pv-height-10;
      min-width: $pv-width-30;
      overflow-wrap: break-word;
      padding: $pv-spacing-5;
      position: absolute;
      width: $pv-width-auto;
      z-index: 10000;
    }

    .e-pv-annotation-note-author {
      border-bottom: $pv-border-1 solid $pv-annotation-note-border-bottom-color;
      font-weight: bold;
    }

    .e-pv-annotation-popup-menu {
      cursor: auto;
      min-width: $pv-width-396;
      padding-bottom: $pv-spacing-6;
      position: absolute;
      width: $pv-width-auto;
      z-index: 10000;
    }

    .e-pv-annotation-popup-header {
      height: $pv-height-auto;
      min-height: $pv-height-29;
      padding-top: $pv-spacing-14;
    }

    .e-pv-annotation-popup-author {
      float: left;
      font-size: $pv-text-base;
      font-weight: bold;
      margin-left: $pv-spacing-14;
    }

    .e-pv-annotation-popup-close {
      float: right;
      height: $pv-height-20;
      margin-right: $pv-spacing-14;
      width: $pv-width-20;
    }

    .e-pv-annotation-modified-time {
      height: $pv-height-14;
      margin-left: $pv-spacing-14;
      padding-top: $pv-spacing-8;
    }

    .e-pv-annotation-popup-note-container {
      height: $pv-height-auto;
      padding: $pv-spacing-14;
      width: $pv-width-auto;
    }

    .e-pv-annotation-popup-content {
      background-color: $pv-annotation-note-popup-bg-color;
      border: $pv-border-1 solid;
      font-size: $pv-text-base;
      min-height: $pv-height-132;
      overflow: hidden auto;
      width: $pv-width-368;
    }

    .e-pv-properties-fill-color-icon,
    .e-pv-properties-stroke-color-icon {
      border-bottom: $pv-border-2 solid;
    }

    .e-pv-drop {
      color: $pv-selection-touch-element-background-color;
      display: inline-block;
      height: $pv-height-20;
      position: absolute;
      width: $pv-width-20;
      z-index: 1000;
    }

    .e-pv-droplet {
      background-color: $pv-selection-touch-element-background-color;
      border-bottom-left-radius: $pv-border-radius-50p;
      border-bottom-right-radius: $pv-border-radius-50p;
      border-color: $pv-selection-touch-element-border-color;
      border-style: solid;
      border-top-left-radius: $pv-border-radius-50p;
      border-width: $pv-border-2;
      height: $pv-height-20;
      margin: $pv-spacing-0 $pv-spacing-0 $pv-spacing-0 $pv-spacing-9;
      position: absolute;
      width: $pv-width-20;
    }
  }
}

$sm-mobile: 575.98;
$mobile: 767.98;
$medium-mobile: 375;
$tablet: 991.98;
$desktop: 1199.98;
$lg-desktop: 1399.98;

// Small mobiles (landscape phones, less than 576px)
@mixin sm-mobile() {
  @media only screen and (max-width: ($sm-mobile * 1px)) {
    @content;
  }
}

// Small devices (landscape phones, less than 768px)
@mixin mobile {
  @media only screen and (max-width: ($mobile * 1px)) {
    @content;
  }
}

// Medium mobiles (phones, less than 375px)
@mixin medium-mobile() {
  @media only screen and (max-width: ($medium-mobile * 1px)) {
    @content;
  }
}

// Medium devices (tablets, less than 992px)
@mixin tablet {
  @media only screen and (max-width: ($tablet * 1px)) {
    @content;
  }
}

// Large devices (desktops, less than 1200px)
@mixin desktop {
  @media only screen and (max-width: ($desktop * 1px)) {
    @content;
  }
}

// X-Large devices (large desktops, less than 1400px)
@mixin lg-desktop {
  @media only screen and (max-width: ($lg-desktop * 1px)) {
    @content;
  }
}

@include export-module('pdfviewer-theme') {
  /* stylelint-disable value-no-vendor-prefix */
  /* stylelint-disable property-no-vendor-prefix */
  .e-pv-viewer-container {
    border-color: $pv-control-border-color;
    height: $pv-viewer-container-height;
    overflow: $pv-control-overflow;
    position: $pv-control-position;
    touch-action: $pv-control-touch-action;
    @if $skin-name == 'Material3' {
      background: $pv-background;
      border: $pv-toolbar-border;
    }
    @else
    {
      background-color: $pv-background;
    }
  }

  .e-pv-mobile-view .e-pv-viewer-container {
    border-left-width: $pv-border-1;
  }

  .e-pdfviewer.e-pv-mobile-view .e-pv-viewer-container::-webkit-scrollbar,
  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
  .e-pv-toolbar.e-toolbar.e-toolpop .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn-text,
  .e-control.e-toolbar.e-lib.e-pv-annotation-toolbar.e-pv-toolbar-scroll.e-keyboard.e-toolpop .e-tbar-btn-text,
  .e-control.e-toolbar.e-lib.e-pv-redaction-toolbar.e-pv-toolbar-scroll.e-keyboard .e-tbar-btn-text,
  .e-dropdown-popup.e-control.e-pv-annotation-shapes-container .e-tbar-btn-text,
  .e-dropdown-popup.e-control.e-pv-annotation-calibrate-container .e-tbar-btn-text,
  .e-dropdown-popup.e-control.e-pv-annotation-textalign-container .e-tbar-btn-text,
  .e-dropdown-popup.e-control.e-pv-annotation-textprop-container.e-caret-hide .e-tbar-btn-text,
  .e-control.e-toolbar.e-lib.e-pv-formdesigner-toolbar.e-pv-toolbar-scroll.e-keyboard.e-toolpop .e-tbar-btn-text,
  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper.e-hide,
  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-overlay-icon,
  .e-pv-organize-tile-draggedEle .e-pv-organize-tile.e-pv-thumbnail-column .e-pv-image-container .e-pv-organize-image {
    display: none;
  }

  input.e-pv-input-password::-ms-reveal,
  input.e-pv-formfield-input::-ms-reveal {
    display: none;
  }
  .e-pv-page-container {
    @if $skin-name == 'Material3' {
      background: $pv-background;
    }
    margin: $pv-page-container-margin;
    padding: $pv-page-container-padding;
    touch-action: $pv-page-container-touch-action;
  }

  .e-pv-signaturehover,
  .e-pv-line-styles-container:hover {
    background-color: $pv-prop-line-styles-hover-bg;
  }

  .e-pv-mobilespanscroll-container {
    color: $pv-toolbar-total-page-number-color;
    font-family: $pv-sidebar-bookmark-title-font-family;
    font-size: $pv-sidebar-bookmark-title-font-size;
  }

  .e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-stroke-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-thickness-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-shapes-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-calibrate-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-handwritten-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-pv-annotation-handwritten-container .e-pv-handwritten-icon.e-btn-icon:not(.e-caret),
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
  .e-pv-annotation-ink-container .e-pv-inkannotation-icon,
  .e-pv-icon {
    font-size: $pv-icon-font-size;
  }

  .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret) {
    @if $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'highcontrast' {
      margin-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper {
    @if $skin-name == 'FluentUI' {
      background-color: transparent;
    }
  }

  .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup.e-popup-open ul .e-primary{
    @if $skin-name == 'fluent2' {
      padding: $pv-spacing-0 $pv-spacing-16;
    }
  }

  .e-pv-handwritten-popup ul .e-item {
    @if $skin-name=='fluent2' {
      padding: $pv-spacing-2 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-mobilescroll-container {
    @if $skin-name == 'Material3' {
      background: $pv-background;
    }
    @else
    {
      background-color: $pv-background;
    }
    border: $pv-thumbnail-hover-border;
    border-radius: $pv-radius-48 $pv-radius-0 $pv-radius-0 $pv-radius-48;
    line-height: $pv-line-height-28;
    position: absolute;
    text-align: center;
  }

  .e-pv-viewer-container .e-pv-page-div {
    @if $skin-name == 'highcontrast' or $theme-name == 'fluent2-highcontrast' {
      border-color: $pv-background;
    }
    @else {
      border-color: $pv-page-div-border-color;
    }
    border-style: $pv-page-div-border-style;
    border-width: $pv-page-div-border;
    box-shadow: $pv-page-div-box-shadow;
    box-sizing: $pv-page-div-border-boxing;
    position: $pv-page-div-position;
  }

  .e-pdfviewer .e-pv-viewer-container.e-pv-fitHeight {
    border-style: none;
  }

  .e-pv-viewer-container .e-pv-page-div.e-focused {
    box-shadow: $pv-page-div-focus-style;
  }

  .e-pv-diagram-resize-handle{
    @if $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
      fill: $pv-selection-touch-element-background-color !important/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-diagram-border,
  .e-pv-diagram-resize-handle {
    @if $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
      stroke: $pv-selection-touch-element-background-color !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-viewer-container.e-focused
  {
    box-shadow: $pv-page-div-focus-style inset;
  }

  .e-pv-toolbar,
  .e-pv-nav-toolbar,
  .e-pv-annotation-toolbar,
  .e-pv-formdesigner-toolbar,
  .e-pv-redaction-toolbar {
    border: $pv-toolbar-border;
    border-radius: $pv-toolbar-border-radius;
    border-width: $pv-toolbar-border-width;
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-btn.e-dropdown-btn {
    @if ($skin-name == 'tailwind3') {
      padding: $pv-spacing-6 $pv-spacing-3;
    }
  }

  .e-pv-toolbar,
  .e-pv-annotation-toolbar,
  .e-pv-mobile-annotation-toolbar,
  .e-pv-formdesigner-toolbar {
    height: $pv-toolbar-height;
    @if $skin-name == 'bootstrap5.3' {
      min-height: $pv-toolbar-height;
    }
  }

  .e-toolbar.e-pv-redaction-toolbar {
    height: $pv-toolbar-height;
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left {
    @if $skin-name == 'bootstrap5' {
      left: 0;
    }
  }

  .e-pv-nav-toolbar,
  .e-pv-toolbar.e-pv-mobile-toolbar,
  .e-pv-mobile-view .e-pv-annotation-toolbar {
    height: $pv-toolbar-height-big;
  }

  .e-toolbar.e-pv-toolbar .e-pv-zoom-drop-down-container {
    height: $pv-zoom-dropdown-height;
    width: $pv-zoom-dropdown-width;
    @if $skin-name == 'fluent2' {
      height: $pv-zoom-dropdown-height !important;/* stylelint-disable-line declaration-no-important */
      padding: $pv-spacing-5 $pv-spacing-4 $pv-spacing-6 !important;/* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'tailwind3' {
      margin-right: $pv-signature-appearance-checkbox !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-toolbar.e-pv-toolbar .e-pv-zoom-drop-down-container .e-control-container {
    @if $skin-name == 'fluent2' {
      border: none !important;/* stylelint-disable-line declaration-no-important */
      width: $pv-width-p100 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-toolbar.e-pv-toolbar .e-pv-zoom-drop-down-container .e-control-container .e-input {
    @if $skin-name=='fluent2' {
      min-width: $pv-width-42 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-zoom-drop-down-container .e-control.e-combobox{
    @if $skin-name == 'fluent2' {
      padding-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
      padding-right: $pv-spacing-3 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-toolbar.e-pv-toolbar .e-toolbar-pop .e-pv-zoom-drop-down-container {
    display: block;
    padding-left: $pv-spacing-10;
    padding-right: $pv-spacing-10;
    width: $pv-width-auto;
  }

  .e-pv-current-page-box.e-input-group.e-control-wrapper {
    height: $pv-current-page-height;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      height: $pv-height-32;
    }
    margin-top: $pv-toolbar-current-page-box-margin-top;
    width: $pv-current-page-width;
  }

  .e-pv-mobilepagenoscroll-container {
    background: $pv-sidebar-resizer-background;
    border: $pv-thumbnail-hover-border;
    border-radius: $pv-radius-12;
    padding: $pv-spacing-6;
    text-align: center;
    vertical-align: middle;
  }

  .e-pv-mobilecurrentpage-container {
    color: $pv-toolbar-total-page-number-color;
    display: block;
    font-family: $pv-sidebar-bookmark-title-font-family;
    font-size: $pv-text-2xl;
  }

  .e-pv-mobiledashedline-container {
    color: $pv-toolbar-total-page-number-color;
    display: block;
    padding: $pv-spacing-10;
  }

  .e-pv-number-ofpages {
    width: $pv-width-p10;
  }

  .e-dialog.e-pv-gotopage-popup {
    max-width: $pv-width-500;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      padding-left: $pv-spacing-0;
      padding-top: $pv-spacing-0;
    }
    @else {
      padding-left: $pv-spacing-16;
      padding-top: $pv-spacing-16;
    }
  }

  .e-pv-image-container {
    width: $pv-width-p100;
    height: $pv-height-p100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: $pv-spacing-3;
    cursor: pointer;
  }

  .e-pv-gotopage-apply-btn.e-btn.e-flat.e-primary:disabled {
    @if $skin-name != 'bootstrap4' {
      background-color: transparent;
    }
    @if $skin-name == 'bootstrap' {
      color: $pv-save-button-color;
    }
  }

  .e-pv-mobiletotalpage-container {
    color: $pv-toolbar-total-page-number-color;
    display: block;
    font-family: $pv-sidebar-bookmark-title-font-family;
    font-size: $pv-sidebar-title-font-size;
  }

  .e-pv-password-input {
    @if $skin-name != 'Material3' {
      margin-top: $pv-password-input-margin-top;
    }
  }

  .e-pv-password-error {
    color: $pv-password-error-color;
  }

  .e-pv-corrupted-popup-header {
    color: $pv-corrupted-pop-header-color;
    opacity: $pv-corrupted-pop-header-opacity;
  }

  .e-pv-corrupted-popup-content {
    @if $skin-name == 'Material3' {
      color: $content-text-color-alt1;
    }
    @else {
      color: $pv-corrupted-pop-header-color;
    }
    font-size: $pv-corrupted-pop-content-font-size;
    line-height: $pv-corrupted-pop-content-line-height;
    margin-left: $pv-corrupted-pop-content-margin-left;
    opacity: $pv-corrupted-pop-header-opacity;
    padding-top: $pv-corrupted-pop-content-padding-top;
    text-align: $pv-corrupted-pop-header-text-align;
  }

  .e-pv-corrupted-popup-content-rtl {
    color: $pv-corrupted-pop-header-color;
    font-size: $pv-corrupted-pop-content-font-size;
    line-height: $pv-corrupted-pop-content-line-height;
    margin-right: $pv-corrupted-pop-content-margin-right;
    opacity: $pv-corrupted-pop-header-opacity;
    padding-top: $pv-corrupted-pop-content-padding-top;
    text-align: $pv-corrupted-pop-header-rtl-text-align;
  }

  .e-pv-toolbar.e-toolbar:not(.e-pv-mobile-toolbar) .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    @if $skin-name == 'Material3' {
      height: $pv-toolbar-height;
    }
    @else {
      height: $pv-height-auto;
    }
    margin-left: $pv-toolbar-items-margin-left;
    margin-right: $pv-toolbar-items-margin-right;
    @if $skin-name != 'Material3' {
      padding-bottom: $pv-toolbar-items-padding-bottom;
      padding-top: $pv-toolbar-items-padding-top;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding: $pv-spacing-3 $pv-spacing-4;
    }
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    @if $skin-name != 'tailwind' and $skin-name != 'tailwind-dark' {
      height: $pv-height-auto;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      height: $pv-height-32;
    }
    margin-left: $pv-toolbar-items-margin-left;
    margin-right: $pv-toolbar-items-margin-right;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding: $pv-spacing-0 $pv-spacing-4;
    }
  }

  .e-pv-blazor-main-container .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn {
    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
      min-height: $pv-height-36;
      min-width: $pv-width-36;
    }
    @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
      min-height: $pv-height-50;
      min-width: $pv-width-50;
    }
    @if ($skin-name == 'highcontrast') {
      min-height: $pv-height-50;
    }
  }

  .e-pv-blazor-main-container .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon,
  .e-pv-blazor-main-container .e-pv-annotation-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon {
    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
      font-size: $pv-text-base !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item {
    @if $skin-name == 'fluent2'{
      padding-top: $pv-spacing-2;
    }
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
    @if ($skin-name == 'FluentUI') {
      padding-bottom: $pv-spacing-2;
    }
    @else if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'tailwind3'){
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      padding-bottom: $pv-spacing-0;
    }
  }

  .e-pdfviewer .e-pv-open-document-icon .e-pv-icon .e-icons .e-btn-icon .e-icon-left {
    @if $skin-name == 'FluentUI' {
      padding: $pv-spacing-0;
    }
  }

  .e-pv-redaction-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon,
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-btn-icon {
    @if ($skin-name == 'highcontrast') {
      padding-left: $pv-spacing-0;
    }
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-separator {
    border-right-width: $pv-toolbar-separator-border-right-width;
    height: $pv-toolbar-separator-height;
    margin-left: $pv-toolbar-separator-margin-left;
    margin-right: $pv-toolbar-separator-margin-right;
  }

  .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child  {
    margin-left: $pv-toolbar-items-first-child-margin-left;
  }

  .e-pdfviewer .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child {
    margin-right: $pv-toolbar-items-first-child-margin-left;
  }

  .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child  {
    margin-right: $pv-toolbar-items-last-child-margin-right;
  }

  .e-pdfviewer .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:last-child,
  .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:last-child,
  .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:last-child {
    margin-left: $pv-toolbar-items-last-child-margin-right;
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
  .e-pv-mobile-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
  .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
    height: $pv-toolbar-btn-height;
    min-width: $pv-toolbar-btn-width;
    @if ($skin-name != 'fluent2') {
      width: $pv-toolbar-btn-width;
    }
    @if $skin-name == 'FluentUI' {
      line-height: $pv-toolbar-btn-height;
      min-width: $pv-width-40;
    }
    @if $skin-name == 'tailwind3' {
      height: $pv-height-32;
      min-width: $pv-width-32;
      width: $pv-width-32;
    }
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-pv-inkannotation-icon.e-icons.e-btn-icon,
  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-pv-annotation-tools-close-icon.e-icons.e-btn-icon {
    @if $skin-name == 'highcontrast' {
      padding-left: $pv-spacing-0;
    }
  }

  .e-pv-primary-toolbar .e-toolbar .e-dropdown-btn {
    @if $skin-name == 'tailwind3' {
      font-weight: $pv-font-weight-semibold !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-open-document-icon {
    font-size: $pv-toolbar-open-icon-font-size;
    height: $pv-toolbar-open-icon-height;
    line-height: $pv-toolbar-open-icon-line-height !important;/* stylelint-disable-line declaration-no-important */
    width: $pv-toolbar-open-icon-width;
  }

  .e-pv-mobile-view .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-pv-open-document-icon{
    @if $skin-name == 'tailwind3' {
      line-height: $pv-toolbar-open-icon-line-height;
    }
  }

  .e-toolbar-items:not(.e-toolbar-pop) .e-pv-download-document-icon {
    line-height: $pv-toolbar-download-icon-line-height;
  }

  .e-toolbar-items:not(.e-toolbar-pop) .e-pv-print-document-icon {
    line-height: $pv-toolbar-print-icon-line-height;
  }

  .e-pv-first-page-navigation-icon {
    line-height: $pv-toolbar-first-page-icon-line-height;
  }

  .e-pv-previous-page-navigation-icon {
    line-height: $pv-toolbar-previous-page-icon-line-height;
  }

  .e-pv-next-page-navigation-icon {
    line-height: $pv-toolbar-next-page-icon-line-height;
  }

  .e-pv-last-page-navigation-icon {
    line-height: $pv-toolbar-last-page-icon-line-height;
  }

  .e-toolbar-items:not(.e-toolbar-pop) .e-pv-zoom-out-icon,
  .e-toolbar-items:not(.e-toolbar-pop) .e-pv-zoom-in-icon {
    line-height: $pv-toolbar-zoom-out-icon-line-height;
  }

  .e-pv-eye-slash-icon,
  .e-pv-eye-icon {
    margin-top: $pv-eye-icon-margin-top;
  }

  .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-pv-current-page-container {
    @if $skin-name == 'Material3' {
      padding-left: $pv-spacing-8;
    }
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-btn.e-pv-pan-tool .e-pv-icon {
    margin-right: $pv-spacing-2;
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-pv-zoom-drop-down-container {
    margin: $pv-toolbar-zoom-drop-margin;
    @if $skin-name != 'bootstrap4' {
      padding: $pv-toolbar-zoom-drop-padding;
    }
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-pv-total-page-container.e-toolbar-item:not(.e-separator) {
    color: $pv-toolbar-total-page-number-color;
    cursor: default;
    font-size: $pv-toolbar-total-page-number-font-size;
    margin-left: $pv-toolbar-total-page-div-margin-left;
    margin-right: $pv-toolbar-total-page-div-margin-right;
    min-width: $pv-width-unset;
    @if $skin-name != 'bootstrap4' and $skin-name != 'FluentUI' {
      padding-bottom: $pv-toolbar-total-page-padding-bottom;
    }
    padding-left: $pv-toolbar-total-page-div-padding-left;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' {
      padding-top: $pv-spacing-0;
    }
    @if $skin-name == 'fluent2'{
      font-size: $pv-toolbar-total-page-number-font-size !important;/* stylelint-disable-line declaration-no-important */
    }
    position: relative;
  }

  .e-pv-total-page {
    color: $pv-toolbar-total-page-font-color;
    font-size: $pv-font-size-inherit;
  }

  .e-pv-total-page-ms {
    -ms-transform: translateY(-50%);
    margin: $pv-spacing-0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .e-pv-zoom-drop-down.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
  .e-pv-prop-dropdown.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
  .e-pv-zoom-drop-down-rtl.e-input-group.e-control-wrapper.e-ddl:not(.e-error),
  .e-pv-prop-dropdown-rtl.e-input-group.e-control-wrapper.e-ddl:not(.e-error) {
    background-color: transparent;
    border: $pv-toolbar-zoom-drop-down-border;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      box-shadow: none;
    }
    height: $pv-height-inherit;
    margin-top: $pv-toolbar-zoom-drop-down-margin-top;
    padding: $pv-toolbar-zoom-drop-down-padding;
  }

  .e-pv-fontfamily-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input{
    width: $pv-thumbnail-width;
    @if $skin-name == 'fluent2' {
      height: $pv-annotation-drop-down-height;
    }
  }

  .e-pv-fontsize-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input {
    @if $skin-name == 'fluent2' {
      height: $pv-annotation-drop-down-height;
    }
  }

  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error),
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error) {
    background-color: $pv-toolbar-zoom-drop-down-background-color;
    border: $pv-toolbar-zoom-drop-down-border-focus;
    border-radius: $pv-toolbar-zoom-drop-down-border-radius;
  }

  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus .e-search-icon.e-ddl-icon,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus .e-search-icon.e-ddl-icon,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus .e-search-icon.e-ddl-icon,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus .e-search-icon.e-ddl-icon {
    color: $pv-zoom-dropdown-input-focus-color;
  }

  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control.e-keyboard,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control.e-keyboard,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control.e-keyboard {
    height: $pv-zoom-drop-down-input-height;
    margin-top: $pv-zoom-drop-down-input-margin-top;
    padding-bottom: $pv-zoom-drop-down-padding-bottom;
    padding-top: $pv-zoom-drop-down-padding-top;
  }

  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control.e-keyboard,
  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard,
  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control.e-keyboard,
  .e-pv-toolbar:not(.e-rtl) .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control.e-keyboard {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding-left: $pv-spacing-0;
    }
    @else {
      padding-left: $pv-zoom-drop-down-padding-left;
    }
  }

  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control.e-keyboard,
  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control.e-keyboard,
  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control.e-keyboard,
  .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control.e-keyboard {
    padding-right: $pv-zoom-drop-down-padding-left;
  }

  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-search-icon.e-ddl-icon,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-search-icon.e-ddl-icon,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-search-icon.e-ddl-icon,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-search-icon.e-ddl-icon {
    background-color: transparent;
    border-left: $pv-border-0;
    margin-bottom: $pv-zoom-drop-down-margin-bottom;
    margin-left: $pv-zoom-drop-down-margin-left;
    margin-top: $pv-zoom-drop-down-margin-top;
    padding-right: $pv-zoom-drop-down-padding-right;
  }

  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-search-icon.e-ddl-icon{
    @if $skin-name == 'fluent2' {
      padding-left: $pv-zoom-drop-down-padding-right;
    }
  }

  .e-pv-zoom-drop-down-container .e-input-group.e-control-wrapper .e-input-group-icon,
  .e-pv-annotation-fontsize-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown .e-input-group-icon,
  .e-pv-annotation-fontname-container .e-input-group.e-control-wrapper.e-pv-prop-dropdown .e-input-group-icon {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      border-left: $pv-border-0;
      margin-bottom: $pv-zoom-drop-down-margin-bottom;
      margin-left: $pv-zoom-drop-down-margin-left;
      margin-top: $pv-zoom-drop-down-margin-top;
      padding-right: $pv-zoom-drop-down-padding-right;
    }
  }

  .e-pv-annotation-fontname-container.e-overlay .e-input-group,
  .e-pv-annotation-fontsize-container.e-overlay .e-input-group,
  .e-pv-fontfamily-container .e-overlay.e-input-group,
  .e-pv-fontsize-container .e-overlay.e-input-group,
  .e-pv-fontsize-container .e-overlay.e-input-group .e-input-group-icon,
  .e-pv-fontfamily-container .e-overlay.e-input-group .e-input-group-icon {
    @if $skin-name == 'fluent2' {
      color: var(--color-sf-icon-color-disabled) !important;/* stylelint-disable-line declaration-no-important */
      opacity: inherit !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl .e-input.e-control,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control,
  .e-input-group.e-control-wrapper.e-pv-current-page-box .e-numerictextbox.e-input,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl .e-input.e-control,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl .e-input.e-control {
    text-align: $pv-text-align;
  }

  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control {
    @if ($skin-name == 'FluentUI') {
      padding-bottom: $pv-spacing-4;
    }
  }

  .e-pv-zoom-drop-down.e-ddl.e-popup.e-popup-open,
  .e-pv-prop-dropdown.e-ddl.e-popup.e-popup-open {
    text-align: $pv-zoom-drop-down-popup-text-align;
  }

  .e-pv-zoom-drop-down-rtl.e-ddl.e-popup.e-popup-open,
  .e-pv-prop-dropdown-rtl.e-ddl.e-popup.e-popup-open {
    text-align: right;
  }

  .e-pv-zoom-drop-down.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active .e-pv-prop-dropdown.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active,
  .e-pv-zoom-drop-down-rtl.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active .e-pv-prop-dropdown-rtl.e-popup.e-popup-open .e-dropdownbase .e-list-item.e-active {
    color: $pv-zoom-drop-down-active-color;
  }

  .e-pv-zoom-drop-down.e-popup.e-popup-open,
  .e-pv-zoom-drop-down-rtl.e-popup.e-popup-open {
    min-height: $pv-zoom-drop-down-popup-height;
    min-width: $pv-zoom-drop-down-popup-width;
  }

  .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) {
    @if $skin-name=='Material3' {
      border-bottom: $pv-current-page-border;
    }

    @else if $skin-name=='fluent2' {
      border: $pv-current-page-border;
      border-bottom: $pv-current-page-border-bottom;
    }

    @else {
      border: $pv-current-page-border;
    }
    border-radius: $pv-current-page-border-radius;
    @if $skin-name=='bootstrap5' {
      box-shadow: none;
    }
  }

  .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) .e-control.e-numerictextbox.e-lib.e-input.e-tooltip:focus{
    @if $skin-name=='fluent2' {
      color: $primary;
    }
  }

  .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):focus {
    @if $skin-name=='fluent2' {
      border-bottom: $pv-border-2 solid var(--color-sf-border-alt);
    }
  }

  .e-pv-annotation-toolbar,
  .e-pv-mobile-annotation-toolbar,
  .e-pv-formdesigner-toolbar,
  .e-toolbar.e-pv-redaction-toolbar {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      border: solid $border-light;
      border-width: $pv-border-1;
    }
  }

  .e-toolbar.e-pv-redaction-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
    @if $skin-name == 'FluentUI' {
      min-width: $pv-width-32;
      min-height: $pv-height-32;
    }
  }
  .e-toolbar.e-pv-redaction-toolbar .e-toolbar-item .e-tbar-btn.e-tbtn-txt .e-icons.e-btn-icon {
    padding: $pv-spacing-0;
  }

  .e-pv-zoom-drop-down.e-ddl.e-valid-input.e-input-focus,
  .e-pv-zoom-drop-down-rtl.e-ddl.e-valid-input.e-input-focus {
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' {
      box-shadow: none;
    }
  }

  .e-pv-password-popup.e-dialog .e-dlg-header,
  .e-pv-corrupted-popup.e-dialog .e-pv-corrupted-popup-header,
  .e-pv-notification-popup.e-dialog .e-dlg-header {
    font-size: $pv-corrupted-pop-header-font-size;
    font-weight: $pv-dialog-pop-header-font-weight;
    letter-spacing: $pv-corrupted-pop-header-letter-spacing;
  }

  .e-pv-password-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
  .e-pv-corrupted-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
  .e-pv-notification-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    @if ($skin-name != 'bootstrap4') {
      padding-top: $pv-dialog-pop-close-icon-padding-top;
    }
  }

  .e-dialog.e-pv-redaction-confirmation-popup,
  .e-pv-password-popup.e-dialog {
    @if $skin-name != 'Material3' {
      height: $pv-password-dialog-height;
    }
    margin: $pv-spacing-0 $pv-spacing-10;
    max-width: $pv-password-dialog-width;
  }

  .e-pv-corrupted-popup.e-dialog {
    @if $skin-name != 'Material3' {
      height: $pv-corrupted-dialog-height;
    }
    margin: $pv-spacing-0 $pv-spacing-10;
    max-width: $pv-corrupted-dialog-width;
  }

  .e-pv-corrupted-popup.e-dialog .e-dlg-header-content,
  .e-pv-notification-popup.e-dialog .e-dlg-header-content {
    border-bottom: $pv-corrupted-dialog-header-border-bottom;
  }

  .e-pv-corrupted-popup.e-dialog .e-footer-content,
  .e-pv-notification-popup.e-dialog .e-footer-content {
    border-top: $pv-corrupted-dialog-footer-border-top;
  }

  .e-pv-notification-large-content.e-dialog .e-footer-content{
    @if $skin-name == 'fluent2' {
      padding-top: $pv-spacing-8 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-corrupted-popup.e-dialog .e-dlg-content {
    @if $skin-name != 'Material3' {
      padding-bottom: $pv-corrupted-dialog-pop-content-padding-bottom;
      padding-top: $pv-corrupted-dialog-pop-content-padding-top;
    }
  }

  .e-pv-password-popup.e-dialog span[id *= '_prompt'] {
    font-size: $pv-password-pop-content-font-size;
    letter-spacing: $pv-password-pop-content-letter-spacing;
  }

  .e-pv-password-popup.e-dialog .e-dlg-header-content {
    border-bottom: $pv-password-dialog-header-border-bottom;
  }

  .e-pv-password-popup.e-dialog .e-footer-content {
    border-top: $pv-password-dialog-footer-border-top;
  }

  .e-pv-password-popup.e-dialog .e-dlg-content {
    @if $skin-name != 'Material3' {
      padding-bottom: $pv-password-dialog-pop-content-padding-bottom;
      padding-top: $pv-password-pop-content-padding-top;
    }
  }

  .e-dialog .e-dlg-header {
    width: $pv-width-auto;
  }

  .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    max-height: $pv-current-page-height;
    padding-bottom: $pv-current-page-padding-bottom;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      max-height: $pv-height-30;
      padding-bottom: $pv-spacing-1;
    }
  }

  .e-pv-blazor-main-container .e-pv-toolbar:not(.e-rtl) .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    @if ($skin-name == 'material') {
      padding: $pv-spacing-0;
    }
  }

  .e-pv-toolbar:not(.e-rtl) .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    @if ($skin-name == 'fluent2') {
      padding: $pv-spacing-0 $pv-spacing-0 $pv-spacing-4;
    }
    @else
    {
      padding-left: $pv-current-page-padding-left;
    }
  }

  .e-pv-toolbar.e-rtl .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    padding-right: $pv-current-page-padding-left;
  }

  .e-pv-zoom-drop-down.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before,
  .e-pv-prop-dropdown.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before,
  .e-pv-zoom-drop-down-rtl.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before,
  .e-pv-prop-dropdown-rtl.e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
    transform: $pv-zoom-drop-down-transform;
  }

  .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-pv-current-page-box:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper.e-pv-current-page-box.e-input-focus:not(.e-float-icon-left):not(.e-float-input)::after,
  .e-input-group.e-control-wrapper.e-pv-current-page-box.e-input-focus:not(.e-float-icon-left):not(.e-float-input)::before,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl::after,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl::before,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus::after,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl.e-input-focus::before,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl::after,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl::before,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus::after,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-input-focus::before,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl::after,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl::before,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus::after,
  .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl.e-input-focus::before,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl::after,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl::before,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus::after,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-input-focus::before {
    background: $pv-material-line-background;
  }

  .e-pv-sidebar-container {
    background: $pv-sidebar-container-background;
    border-top: $pv-sidebar-container-border-top;
    bottom: $pv-sidebar-container-bottom;
    position: $pv-sidebar-container-position;
    top: $pv-sidebar-container-top;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition-duration: 200ms;
    transition-timing-function: ease;
    width: $pv-sidebar-container-width;
    z-index: $pv-sidebar-container-z-index;
  }

  .e-pv-main-container {
    height: $pv-main-container-height;
    overflow: $pv-main-container-overflow;
    position: $pv-main-container-position;
    width: $pv-main-container-width;
  }

  .e-pv-viewer-main-container {
    @if $skin-name == 'Material3' {
      background: $pv-background;
    }
    @else
    {
      background-color: $pv-background;
    }
    bottom: $pv-viewer-main-container-bottom;
    left: $pv-viewer-main-container-left;
    position: $pv-viewer-main-container-position;
    right: $pv-viewer-main-container-right;
    top: $pv-viewer-main-container-top;
  }

  .e-pdfviewer:not(.e-pv-mobile-view) .e-pv-viewer-main-container {
    min-width: $pv-viewer-main-container-min-width;
  }

  .e-pdfviewer:not(.e-pv-mobile-view) .e-pv-main-container {
    min-height: $pv-height-500;
  }

  .e-pv-sidebar-content-container {
    border-top: $pv-sidebar-content-container-border-top;
    display: $pv-sidebar-content-container-display;
    float: $pv-sidebar-content-container-float;
    height: $pv-sidebar-content-container-height;
    position: $pv-sidebar-content-container-position;
    transition-duration: 200ms;
    transition-timing-function: ease;
    width: $pv-sidebar-content-container-width;
  }

  .e-pv-sidebar-content-container.e-thumbnail {
    height: $pv-height-p100;
    left: $pv-spacing-1;
    position: unset;
  }

  .e-pv-sidebar-title-container {
    background: $pv-sidebar-title-container-background;
    border: $pv-sidebar-toolbar-border;
    border-width: $pv-sidebar-title-container-border-width;
    height: $pv-sidebar-title-container-height;
    position: $pv-sidebar-title-container-position;
    top: $pv-sidebar-title-container-top;
    width: $pv-sidebar-title-container-width;
  }

  .e-pv-sidebar-content-container:not(.e-right) .e-pv-sidebar-title-container {
    @if $skin-name == 'bootstrap4' {
      border-right: $pv-sidebar-content-scrollbar-track-border;
    }
  }

  .e-pv-sidebar-content-container.e-right .e-pv-sidebar-title-container {
    @if $skin-name == 'bootstrap4' {
      border-left: $pv-sidebar-content-scrollbar-track-border;
    }
  }

  .e-pv-sidebar-content-container:not(.e-right) .e-pv-sidebar-title-container {
    @if $skin-name == 'bootstrap4' {
      border-right: $pv-sidebar-content-scrollbar-track-border;
    }
  }

  .e-pv-sidebar-content-container.e-right .e-pv-sidebar-title-container {
    @if $skin-name == 'bootstrap4' {
      border-left: $pv-sidebar-content-scrollbar-track-border;
    }
  }

  .e-pv-sidebar-title {
    color: $pv-sidebar-title-color;
    font-size: $pv-sidebar-title-font-size;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'Material3') {
      font-weight: $pv-font-weight-medium;
    }
    height: $pv-sidebar-title-height;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
      line-height: $pv-sidebar-title-line-height;
    }
    margin: $pv-sidebar-title-margin;
    position: $pv-sidebar-title-position;
    text-align: $pv-sidebar-title-text-align;
    top: $pv-sidebar-title-top;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
      vertical-align: $pv-sidebar-title-vertical-align;
    }
    @if $skin-name == 'FluentUI' {
      padding: $pv-spacing-8;
    }
    @if $skin-name == 'fluent2' {
      margin-top: $pv-spacing-10;
    }
  }

  .e-pv-sidebar-title.e-left {
    left: $pv-sidebar-title-left;
    @if $skin-name == 'bootstrap4' {
      margin-left: $pv-spacing-12;
    }
    width: $pv-sidebar-title-width;
  }

  .e-pv-sidebar-title.e-right {
    @if $skin-name == 'bootstrap4' {
      margin-right: $pv-spacing-12;
    }
    right: $pv-sidebar-title-left;
  }

  .e-pv-sidebar-toolbar {
    @if $skin-name == 'fluent2' {
      background: $pv-sidebar-title-container-background;
    }
    @else{
      background: $pv-sidebar-toolbar-background;
    }
    border: $pv-sidebar-toolbar-border;
    border-width: $pv-sidebar-toolbar-border-width;
    bottom: $pv-sidebar-toolbar-bottom;
    height: $pv-sidebar-toolbar-height;
    position: $pv-sidebar-toolbar-position;
    width: $pv-sidebar-toolbar-width;
    z-index: $pv-sidebar-toolbar-z-index;
  }

  .e-pv-sidebar-content {
    -webkit-overflow-scrolling: touch;
    @if ($skin-name == 'bootstrap5.3') {
      background: var(--color-sf-content-bg-color);
    }
    @else {
      background: $pv-sidebar-content-background;
    }
    bottom: $pv-sidebar-content-bottom;
    overflow: $pv-sidebar-content-overflow;
    overflow-x: $pv-sidebar-content-overflow-x;
    position: $pv-sidebar-content-position;
    top: $pv-sidebar-content-top;
    width: $pv-sidebar-content-width;
    z-index: $pv-sidebar-content-z-index;
  }

  .e-pv-thumbnail-anchor-node:hover {
    text-decoration: auto;
  }

  .e-pv-sidebar-content.e-thumbnail {
    top: $pv-spacing-1;
  }

  .e-pv-sidebar-resizer,
  .e-pv-modern-side-panel-resizer,
  .e-pv-comment-panel-resizer {
    background: $pv-sidebar-resizer-background;
    border: $pv-sidebar-resizer-border;
    border-width: $pv-sidebar-resizer-border-width;
    color: $pv-sidebar-resizer-color;
    cursor: $pv-sidebar-resizer-cursor;
    height: $pv-sidebar-resizer-height;
    position: $pv-sidebar-resizer-position;
    width: $pv-sidebar-resizer-width;
    z-index: $pv-sidebar-resizer-z-index;
  }

  .e-pv-sidebar-content::-webkit-scrollbar {
    width: $pv-sidebar-content-scrollbar-width;
  }

  .e-pv-sidebar-content::-webkit-scrollbar-track {
    -webkit-box-shadow: $pv-sidebar-content-scrollbar-track-box-shadow;
    background: $pv-sidebar-content-scrollbar-track-background;
    border: $pv-sidebar-content-scrollbar-track-border;
    @if $skin-name == 'Material3' {
      border-width: $pv-border-0 $pv-border-1 $pv-border-0 $pv-border-0;
    }
  }

  .e-pv-sidebar-content::-webkit-scrollbar-thumb {
    -webkit-box-shadow: $pv-sidebar-content-scrollbar-thumb-box-shadow;
    background: $pv-sidebar-content-scrollbar-thumb-background;
    background-clip: $pv-sidebar-content-scrollbar-thumb-background-clip;
    border: $pv-sidebar-content-scrollbar-thumb-border;
    border-radius: $pv-sidebar-content-scrollbar-thumb-border-radius;
    @if $skin-name == 'Material3' {
      width: $pv-width-6;
      height: $pv-height-329;
    }
  }

  .e-pv-thumbnail-view-button.e-btn,
  .e-pv-custom-button.e-btn,
  .e-pv-organize-view-button.e-btn {
    background: $pv-thumbnail-view-button-background;
    border: $pv-thumbnail-view-button-border;
    border-radius: $pv-thumbnail-border-radius;
    box-shadow: $pv-thumbnail-view-button-box-shadow;
    font-weight: $pv-thumbnail-view-button-font-weight;
    height: $pv-thumbnail-view-button-height;
    line-height: $pv-thumbnail-view-button-selection-line-height;
    outline: $pv-thumbnail-outline;
    padding: $pv-thumbnail-view-button-padding;
    width: $pv-thumbnail-view-button-width;
    @if $skin-name != 'tailwind3' {
      margin: $pv-thumbnail-view-button-margin;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      align-items: center;
      display: flex;
      justify-content: center;
    }
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      align-items: center;
      display: flex;
      justify-content: center;
    }
  }

  .e-pv-thumbnail-view-button.e-btn {
    @if $skin-name=='tailwind3' {
      margin: $pv-thumbnail-view-button-margin;
    }
  }

  .e-pv-organize-view-button.e-btn {
    @if $skin-name=='tailwind3' {
      margin: $pv-bookmark-button-margin;
    }
  }

  .e-pv-organize-tile.e-pv-thumbnail-column {
    width: $pv-width-p100;
    height: $pv-height-p100;
  }

  .e-pv-organize-content-apperance{
    overflow: hidden;
  }
  .e-pv-organize-tile-view.e-pv-thumbnail-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: $pv-spacing-25;
  }

  .e-pv-organize-outer-border.e-pv-not-selected{
    border: $pv-border-1 dashed $pv-organize-page-hovered-dashed-border-color;
    position: absolute;
  }

  .e-pv-organize-outer-border.e-pv-selected{
    border: $pv-border-1 dashed $pv-organize-page-drag-not-allowed-color;
    position: absolute;
  }

  .e-pv-organize-anchor-node {
    margin: $pv-spacing-24;
    width: $pv-width-140;
    height: $pv-height-140;
    border: $pv-organize-anchor-node-tile-border;

    @include lg-desktop {
      width: $pv-width-140;
      height: $pv-height-140;
    }

    @include desktop {
      width: $pv-width-140;
      height: $pv-height-140;
    }

    @include tablet {
      width: $pv-width-140;
      height: $pv-height-140;
    }

    @include mobile {
      width: $pv-width-140;
      height: $pv-height-140;
      min-width: $pv-width-140;
      min-height: $pv-height-140;
    }

    @include sm-mobile {
      width: $pv-width-140;
      height: $pv-height-140;
      min-width: $pv-width-140;
      min-height: $pv-height-140;
      margin: $pv-spacing-24 $pv-spacing-20;
    }
  }

  .e-pv-organize-anchor-node:hover{
    border: $pv-organize-anchor-node-border;
  }

  .e-pv-organize-anchor-node.e-pv-organize-tile-draggedEle {
    border: $pv-organize-anchor-node-dashed-border;
    background: $pv-organize-tile-draggedEle-bg-color;
  }

  .e-pdfviewer .e-pv-organize-tile.e-pv-thumbnail-column .e-checkbox-wrapper {
    width: $pv-width-18;
    height: $pv-height-18;
    position: relative;
    top: -100%;
    padding: $pv-spacing-4;
  }

  .e-pv-organize-buttondiv {
    justify-content: center;
    flex-wrap: nowrap;
    position: relative;
    text-align: center;
    top: calc(-18px - 12px + ($pv-organize-anchor-node-border-width / 2));
  }

  .e-pv-blazor-organize-window .e-pv-organize-buttondiv .e-control.e-btn {
    @if ($skin-name == 'Material3') {
      border-image: $pv-secondary-border-color;
    }
  }

  .e-pv-blazor-organize-window .e-pv-organize-toolbar .e-toolbar-item.e-template.e-pv-page-zoom .e-dropdown-btn,
  .e-pv-blazor-organize-window .e-pv-organize-toolbar .e-toolbar-item.e-template.e-pv-page-zoom .e-dropdown-btn:hover,
  .e-pv-blazor-organize-window .e-pv-organize-toolbar .e-toolbar-item.e-template.e-pv-page-zoom .e-dropdown-btn:active,
  .e-pv-blazor-organize-window .e-pv-organize-toolbar .e-toolbar-item.e-template.e-pv-page-zoom .e-dropdown-btn:focus {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name=='tailwind3') {
      padding: $pv-spacing-0 $pv-spacing-8 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-organize-buttondiv .e-pv-icon {
    @if $skin-name=='fluent2' {
      font-weight: normal;
      padding-top: $pv-spacing-1;
    }

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

  .e-pv-organize-anchor-node.e-pv-organize-node-selection-ring {
    border: $pv-organize-page-select-border;
    border-radius: $pv-radius-2;
  }

  .e-pv-organize-anchor-node.e-pv-organize-node-selection-ring.e-pv-dragging-style {
    border: $pv-organize-anchor-node-dashed-border;
  }

  .e-pv-organize-window {
    border: $pv-organize-image-border;
    border-radius: $pv-radius-0;
  }

  .e-pdfviewer .e-pv-organize-window .e-footer-content {
    border-top: $pv-organize-image-border;
    padding: $pv-spacing-15;
  }

  .e-pdfviewer .e-pv-organize-window .e-dlg-header-content {
    padding: $pv-spacing-15;
  }

  .e-pv-tile-number {
    text-align: center;
    margin-top: calc(($pv-default-tile-icon-size / 2) + $pv-organize-anchor-node-border-width + 2px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: $pv-width-p100;
    display: block;
    padding: $pv-spacing-0 $pv-spacing-15;
  }

  .e-pv-delete-button.e-btn,
  .e-pv-copy-button.e-btn,
  .e-pv-rotate-left-button.e-btn,
  .e-pv-rotate-right-button.e-btn {
    width: $pv-default-tile-icon-size;
    height: $pv-default-tile-icon-size;
    justify-content: center;
    align-items: center;
    margin: $pv-spacing-0 $pv-spacing-5;
    padding: $pv-spacing-0;
  }

  .e-pv-blazor-organize-window .e-pv-organize-buttondiv.e-pv-flex .e-btn {
    display: flex;
  }

  .e-pv-insert-left-button.e-btn,
  .e-pv-insert-right-button.e-btn {
    width: $pv-default-tile-icon-size;
    height: $pv-default-tile-icon-size;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(-140px / 2);
    padding: $pv-spacing-0;
    @include lg-desktop {
      top: calc(-140px / 2);
    }
    @include desktop {
      top: calc(-140px / 2);
    }
    @include tablet {
      top: calc(-140px / 2);
    }
    @include mobile {
      top: calc(-140px / 2);
    }
    @include sm-mobile {
      top: calc(-140px / 2);
    }
  }

  .e-pv-insert-left-button.e-btn {
    left: calc(-1 * (#{$pv-default-tile-icon-size} / 2 + #{$pv-organize-anchor-node-border-width} / 2));
  }

  .e-pv-insert-right-button.e-btn {
    right: calc(-1 * (#{$pv-default-tile-icon-size} / 2 + #{$pv-organize-anchor-node-border-width} / 2));
  }

  .e-pv-toolbar-rotate-left-button,
  .e-pv-toolbar-rotate-right-button {
    height: $pv-height-32;
    width: $pv-width-32;
    padding: $pv-spacing-0;
    top: 7px;
    position: relative;
    box-shadow: none;
  }

  .e-pv-toolbar-rotate-left-button {
    left: 436px;
  }

  .e-pv-toolbar-rotate-right-button {
    left: 445px;
  }

  .e-pdfviewer .e-pv-organize-window .e-dlg-content {
    padding: $pv-spacing-0;
    overflow: hidden;
    border-radius: $pv-radius-0 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-organize-toolbar-apperance.e-toolbar {
    border: $pv-organize-image-border;
    border-width: $pv-border-1 $pv-border-0;
    box-shadow: none;
  }

  .e-pdfviewer .e-pv-organize-toolbar-apperance .e-checkbox-wrapper {
    margin-left: $pv-spacing-10;
    text-wrap: nowrap;
  }

  @media screen and (max-width: 480px) {
    .e-pdfviewer .e-pv-organize-toolbar-apperance .e-checkbox-wrapper {
      width: $pv-width-25;
      margin-left: $pv-spacing-22;
    }
  }

  .e-pv-thumbnail-view-button-selection.e-pv-thumbnail-view-button.e-btn,
  .e-pv-custom-button-selection.e-pv-custom-button.e-btn,
  .e-pv-bookmark-button-selection.e-pv-bookmark-button.e-btn  {
    background: $pv-thumbnail-view-button-selection-background;
    border: $pv-thumbnail-view-button-selection-border;
    border-radius: $pv-thumbnail-border-selection-radius;
    @if $skin-name == 'bootstrap4' {
      color: $pv-thumbnail-border-selection-font-color;
    }
    line-height: $pv-thumbnail-view-button-selection-line-height;
    padding: $pv-thumbnail-view-button-selection-padding;
  }

  .e-pv-tbar-btn.e-pv-thumbnail-view-button.e-btn:focus,
  .e-pv-tbar-btn.e-pv-custom-button.e-btn:focus,
  .e-pv-tbar-btn.e-pv-organize-view-button.e-btn:focus
  {
    background: $pv-thumbnail-view-button-selection-background;
    border: $pv-thumbnail-view-button-selection-border;
    border-radius: $pv-thumbnail-border-selection-radius;
    @if $skin-name == 'bootstrap4' {
      color: $pv-thumbnail-border-selection-font-color;
    }
    @if $skin-name == 'bootstrap5' {
      color: $white;
    }
    @if $skin-name == 'bootstrap5.3' {
      color: $pv-item-selection-color;
    }
    line-height: $pv-thumbnail-view-button-selection-line-height;
    padding: $pv-thumbnail-view-button-selection-padding;
  }

  .e-pv-tbar-btn.e-pv-bookmark-button.e-btn:focus
  {
    background: $pv-thumbnail-view-button-selection-background;
    border: $pv-thumbnail-view-button-selection-border;
    border-radius: $pv-thumbnail-border-selection-radius;
    @if $skin-name == 'bootstrap4' {
      color: $pv-thumbnail-border-selection-font-color;
    }
    @if $skin-name == 'bootstrap5' {
      color: $white;
    }
    @if $skin-name == 'bootstrap5.3' {
      color: $pv-item-selection-color;
    }
    line-height: $pv-thumbnail-view-button-selection-line-height;
    padding: $pv-thumbnail-view-button-selection-padding;
  }

  .e-pv-thumbnail-view-button-selection.e-pv-thumbnail-view-button.e-btn {
    @if $skin-name == 'bootstrap4' {
      margin: $pv-thumbnail-view-button-margin-selection;
    }
  }

  .e-pv-bookmark-button-selection.e-pv-bookmark-button.e-btn  {
    @if $skin-name == 'bootstrap4' {
      line-height: $pv-thumbnail-button-selection-line-height;
      margin: $pv-bookmark-button-margin-selection;
    }
  }

  .e-pv-bookmark-button.e-btn {
    background: $pv-bookmark-button-background;
    border: $pv-bookmark-button-border;
    box-shadow: $pv-bookmark-button-box-shadow;
    font-weight: $pv-thumbnail-view-button-font-weight;
    height: $pv-bookmark-button-height;
    margin: $pv-bookmark-button-margin;
    outline: $pv-thumbnail-outline;
    padding: $pv-bookmark-button-padding;
    width: $pv-bookmark-button-width;
    @if $skin-name == 'highcontrast' {
      line-height: $pv-thumbnail-view-button-selection-line-height;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      align-items: center;
      display: flex;
      justify-content: center;
    }
    @if $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      align-items: center;
      display: flex;
      justify-content: center;
    }
  }

  .e-pv-title-close-div.e-btn {
    background: $pv-title-close-background;
    border: $pv-title-close-border;
    box-shadow: $pv-title-close-box-shadow;
    @if $skin-name == 'bootstrap4' {
      color: $pv-title-close-color;
    }
    height: $pv-title-close-height;
    left: $pv-title-close-left;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
      line-height: $pv-sidebar-title-line-height;
    }
    padding: $pv-title-close-padding;
    position: $pv-title-close-position;
    right: $pv-title-close-right;
    top: $pv-title-close-top;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
      vertical-align: $pv-sidebar-title-vertical-align;
    }
    width: $pv-title-close-width;
  }

  .e-pv-sidebar-toolbar-splitter {
    background: $pv-sidebar-toolbar-splitter-background;
    bottom: $pv-sidebar-toolbar-splitter-bottom;
    height: $pv-sidebar-toolbar-splitter-height;
    position: $pv-sidebar-toolbar-splitter-position;
    width: $pv-sidebar-toolbar-splitter-width;
    z-index: $pv-sidebar-toolbar-splitter-z-index;
  }

  .e-pv-sidebar-content-splitter {
    background: $pv-sidebar-content-splitter-background;
    height: $pv-sidebar-content-splitter-height;
    position: $pv-sidebar-content-splitter-position;
    top: $pv-sidebar-content-splitter-top;
    width: $pv-sidebar-content-splitter-width;
    z-index: $pv-sidebar-content-splitter-z-index;
  }

  .e-pv-thumbnail-view {
    bottom: $pv-thumbnail-view-bottom;
    height: $pv-thumbnail-view-height;
    padding: $pv-thumbnail-view-padding;
    position: $pv-thumbnail-view-position;
    top: $pv-thumbnail-view-top;
  }

  .e-pv-thumbnail {
    height: $pv-thumbnail-height;
    margin: $pv-thumbnail-margin;
    width: $pv-thumbnail-width;
  }

  .e-pv-thumbnail-number {
    color: $pv-sidebar-title-color;
    font-family: $pv-thumbnail-number-font-family;
    padding-top: $pv-thumbnail-number-padding-top;
    text-align: center;
    @if $skin-name == 'Material3' {
      font-weight: $pv-font-weight-medium;
    }
  }

  .e-pv-thumbnail-selection-ring {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' {
      border: $pv-thumbnail-selection-ring-border;
    }
    @if $skin-name == 'fluent2' or $skin-name == 'highcontrast' or $skin-name == 'Material3' or $skin-name == 'tailwind3' {
      border: $pv-border-1 solid transparent;
    }
    border-radius: $pv-thumbnail-selection-ring-border-radius;
    box-shadow: $pv-thumbnail-selection-ring-box-shadow;
    padding: $pv-thumbnail-selection-ring-padding;
  }

  .e-pv-thumbnail-image {
    background-clip: $pv-thumbnail-image-background-clip;
    background-color: $pv-thumbnail-image-background-color;
    height: $pv-thumbnail-image-height;
    width: $pv-thumbnail-image-width;
  }

  .e-pv-thumbnail-hover {
    border: $pv-thumbnail-hover-border;
    border-radius: $pv-thumbnail-hover-border-radius;
    box-shadow: $pv-thumbnail-hover-box-shadow;
    cursor: $pv-thumbnail-hover-cursor;
    padding: $pv-thumbnail-hover-padding;
  }

  .e-pv-thumbnail-focus {
    border: $pv-thumbnail-focus-border;
    border-radius: $pv-thumbnail-focus-border-radius;
    box-shadow: $pv-thumbnail-focus-box-shadow;
    cursor: $pv-thumbnail-focus-cursor;
    padding: $pv-thumbnail-focus-padding;
  }

  .e-pv-thumbnail-selection {
    border: $pv-thumbnail-selection-border;
    border-radius: $pv-thumbnail-selection-border-radius;
    box-shadow: $pv-thumbnail-selection-box-shadow;
    cursor: $pv-thumbnail-selection-cursor;
    padding: $pv-thumbnail-selection-padding;
  }

  .e-pv-thumbnail-row {
    -ms-flex-wrap: $pv-thumbnail-row-flex-wrap; // IE10
    display: $pv-thumbnail-row-display;
    flex-wrap: $pv-thumbnail-row-flex-wrap;
  }

  .e-pv-thumbnail-row {
    display: -ms-flexbox; // IE10
  }

  .e-pv-thumbnail-column {
    -ms-flex: $pv-thumbnail-column-flex; // IE10
    flex: $pv-thumbnail-column-flex;
  }

  .e-pv-thumbnail-column img {
    display: block;
    margin-left: $pv-spacing-auto;
    margin-right: $pv-spacing-auto;
  }

  .e-pv-organize-import-image-wrapper {
    width: $pv-width-p70;
    height: $pv-height-p95;
    border: $pv-organize-image-border;
    position: relative;
    background-color: $pv-status-icon-color;
    margin-bottom: $pv-spacing-5;
  }

  .e-pv-organize-import-image-wrapper::after,
  .e-pv-organize-import-image-wrapper::before {
    content: '';
    width: $pv-width-97p;
    height: $pv-height-p98;
    border: $pv-organize-image-border;
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: $pv-status-icon-color;
    z-index: -1;
  }

  .e-pv-organize-import-image-wrapper::before {
    top: 10px;
    left: 10px;
    height: $pv-height-p96;
    width: $pv-width-95p;
  }

  .e-pv-organize-import-download-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: $pv-width-32;
    height: $pv-height-32;
    background-color: $pv-selection-touch-element-background-color;
    color: $pv-status-icon-color;
    border-radius: $pv-border-radius-50p;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .e-pv-bookmark-view {
    height: $pv-bookmark-view-height;
    overflow: $pv-bookmark-view-overflow;
    padding-top: $pv-bookmark-view-padding-top;
    position: $pv-bookmark-view-position;
  }

  .e-blazor-pdfviewer.e-pv-mobile-view .e-pv-bookmark-view {
    overflow: hidden;

    .e-list-container {
      overflow: $pv-bookmark-view-overflow;
      height: calc($pv-height-p100 - $pv-height-36);
    }
  }

  div > .e-pv-bookmark-icon.e-pv-icon {
    float: $pv-bookmark-icon-float;
    font-size: $pv-bookmark-icon-font-size;
    padding-left: $pv-bookmark-icon-padding-left;
    padding-right: $pv-bookmark-icon-padding-right;
    @if $skin-name == 'Material3' {
      font-size: $pv-text-base;
      padding-left: $pv-spacing-12;
      padding-right: $pv-spacing-12;
    }
  }

  .e-pv-bookmark-title {
    padding-left: $pv-bookmark-title-padding-left;
    @if $skin-name == 'Material3' {
      font-size: $pv-text-sm;
      font-weight: $font-weight-normal;
      line-height: $pv-line-height-20;
      letter-spacing: $pv-letter-spacing-0-24;
    }
  }

  .e-pv-bookmark-Title{
    @if $skin-name == 'fluent2' {
      padding-left: $pv-bookmark-title-padding-left;
    }
  }

  .e-pv-sidebar-bookmark-title {
    color: $pv-sidebar-bookmark-title-color;
    font-family: $pv-sidebar-bookmark-title-font-family;
    font-size: $pv-sidebar-bookmark-title-font-size;
  }

  .e-pv-bookmark-view::-webkit-scrollbar {
    height: $pv-sidebar-content-scrollbar-width;
    width: $pv-sidebar-content-scrollbar-width;
  }

  .e-pv-bookmark-view::-webkit-scrollbar-track {
    -webkit-box-shadow: $pv-sidebar-content-scrollbar-track-box-shadow;
    background: $pv-sidebar-content-scrollbar-track-background;
    border: $pv-sidebar-content-scrollbar-track-border;
    @if $skin-name == 'Material3' {
      border-width: $pv-border-0 $pv-border-1 $pv-border-0 $pv-border-0;
    }
  }

  .e-pv-bookmark-view::-webkit-scrollbar-thumb {
    -webkit-box-shadow: $pv-sidebar-content-scrollbar-thumb-box-shadow;
    background: $pv-sidebar-content-scrollbar-thumb-background;
    background-clip: $pv-sidebar-content-scrollbar-thumb-background-clip;
    border: $pv-sidebar-content-scrollbar-thumb-border;
    border-radius: $pv-sidebar-content-scrollbar-thumb-border-radius;
    @if $skin-name == 'Material3' {
      width: $pv-width-6;
      height: $pv-height-329;
    }
  }

  .e-pv-bookmark-view > .e-ul {
    height: $pv-height-inherit;
    overflow: $pv-treeview-overflow;
  }

  .e-pv-bookmark-view .e-fullrow {
    height: $pv-treeview-fullrow-height;
  }

  .e-pv-bookmark-view .e-icon-collapsible::before,
  .e-pv-bookmark-view .e-icon-expandable::before {
    display: $pv-bookmark-view-icon-collapsible-display;
    height: $pv-bookmark-view-icon-collapsible-height;
    padding: $pv-bookmark-view-icon-collapsible-padding;
    width: $pv-bookmark-view-icon-collapsible-width;
    @if $skin-name == 'Material3' {
      margin-top: $pv-spacing-5;
    }
  }

  .e-pv-bookmark-view .e-list-item .e-ul {
    padding-left: $pv-bookmark-view-list-ul-padding-left;
  }

  .e-pv-bookmark-view .e-ul {
    padding: $pv-bookmark-view-ul-padding;
  }

  .e-pv-text::selection,
  .e-pv-text .e-pv-maintaincontent {
    background: $pv-text-selection-bg-color;
  }

  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
  .e-pv-redaction-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
  .e-pv-mobile-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
  .e-pv-mobile-annotation-toolbar .e-dropdown-btn.e-btn,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn,
  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn,
  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn,
  .e-pv-shapes-toolbar .e-pv-tbar-btn,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret,
  .e-pv-annotation-comment-panel-container .e-pv-tbar-btn,
  .e-pv-comment-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon,
  .e-pv-form-designer-panel-title-container .e-pv-annotation-tools-close-icon.e-pv-icon{
    color: $pv-icon-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' or $skin-name == 'tailwind3') {
      box-shadow: none;
    }
  }

  .e-pv-rtl .e-pv-comment-panel-title-container .e-pv-blazor-annotation-tools-close-icon {
    float: right;
    padding-top: $pv-spacing-10;
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-selected .e-menu-icon,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-selected .e-caret {
    @if $skin-name == 'FluentUI' {
      color: $pv-item-selection-color;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark') {
      box-shadow: none;
      color: inherit;
    }
  }

  .e-pv-mobile-annotation-toolbar .e-tbar-btn:hover,
  .e-pv-mobile-annotation-toolbar .e-tbar-btn:focus {
    background: $pv-comment-panel-bg;
    border-color: $pv-comment-panel-bg;
  }

  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav {
    transform: skewX(-1deg) translateX(6px);
    width: $pv-width-56;
  }

  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
    font-size: $pv-text-sm;
    transform: skewX(4deg);
  }

  .e-pv-mobile-annotation-toolbar .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow,
  .e-pv-sidebar-toolbar .e-pv-tbar-btn {
    color: $pv-icon-color;
  }

  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:hover,
  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:hover,
  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:hover:focus,
  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:hover:focus,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover .e-caret,
  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:hover,
  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:hover,
  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:hover .e-caret,
  .e-pv-redaction-toolbar .e-pv-tbar-btn.e-tbar-btn:hover,
  .e-pv-shapes-toolbar .e-pv-tbar-btn:hover,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:hover,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:hover,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active,
  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus,
  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus .e-caret,
  .e-pv-shapes-toolbar .e-pv-tbar-btn:focus,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:focus,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-menu-icon:focus,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:not(.e-input-focus):hover,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused .e-caret:focus,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:not(.e-input-focus):hover,
  .e-pv-annotation-comment-panel-container .e-pv-tbar-btn:hover {
    @if $skin-name == 'bootstrap4' {
      color: $pv-icon-color-hover;
    }
    @if $skin-name == 'bootstrap5.3' {
      color: $pv-icon-color-hover;/* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'bootstrap5' {
      color: $white;
    }
    @if $skin-name == 'fluent2' {
      color: var(--color-sf-toolbar-icon-color);
    }
    @if $skin-name == 'FluentUI' {
      color: $pv-item-selection-color;
    }
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn:hover {
    @if $skin-name == 'bootstrap5.3' {
      color: $pv-icon-color;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-toolbar .e-popup .e-pv-tbar-btn:hover {
    @if ($skin-name == 'bootstrap5.3') {
      color: $pv-icon-color !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus,
  .e-pv-formdesigner-toolbar .e-dropdown-btn.e-btn:focus .e-caret {
    @if ($skin-name == 'bootstrap5.3') {
      color: var(--color-sf-icon-color) !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-shapes-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover{
    @if $skin-name == 'bootstrap5.3' {
      color: var(--color-sf-secondary-text-color-pressed);
    }
    @if $theme-name == 'bootstrap5' {
      color: $pv-item-selection-color;
    }
  }

  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus,
  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus {
    @if $skin-name == 'bootstrap4' {
      color: $pv-icon-color-hover;
    }
    @if ($skin-name == 'bootstrap5.3') {
      color: $pv-icon-color;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
      color: $pv-item-selection-color;
    }
  }

  .e-pv-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
  .e-pv-annotation-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible,
  .e-pv-formdesigner-toolbar .e-pv-tbar-btn.e-pv-tbar-btn:focus-visible {
    @if ($skin-name == 'fluent2') {
      color: $pv-icon-color;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item:hover .e-menu-icon,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-menu-icon,
  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item.e-focused:hover .e-caret {
    @if $skin-name == 'bootstrap4' {
      color: $pv-icon-color-hover;
    }
    @if $skin-name == 'fluent2' {
      color: var(--color-sf-toolbar-icon-color);
    }
  }

  .e-pv-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
  .e-pv-annotation-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
  .e-pv-redaction-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
  .e-pv-annotation-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn.e-btn .e-pv-icon,
  .e-pv-formdesigner-toolbar .e-toolbar-item.e-overlay .e-pv-tbar-btn.e-pv-tbar-btn .e-pv-icon,
  .e-pv-formdesigner-toolbar .e-toolbar-item.e-overlay .e-dropdown-btn.e-btn .e-pv-icon {
    @if ($skin-name == 'fluent2') {
      color: var(--color-sf-icon-color-disabled);
    }
    @else {
      color: $pv-icon-disable-color;
    }
  }

  .e-pv-mobile-toolbar .e-toolbar-item.e-overlay .e-tbar-btn:hover .e-pv-icon{
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: $white;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item {
    @if $skin-name != 'Material3' {
      height: $pv-height-inherit;
    }
  }

  .e-pv-stamp.e-menu-wrapper ul .e-menu-item {
    @if $skin-name == 'fabric' {
      padding-top: $pv-spacing-7;
    }
  }

  .e-pv-properties-line-start.e-btn:not(:hover),
  .e-pv-properties-line-end.e-btn:not(:hover),
  .e-pv-properties-line-style.e-btn:not(:hover),
  .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:not(:hover),
  .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:not(:hover),
  .e-pv-properties-line-start.e-btn:not(:focus),
  .e-pv-properties-line-end.e-btn:not(:focus),
  .e-pv-properties-line-style.e-btn:not(:focus),
  .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:not(:focus),
  .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:not(:focus),
  .e-pv-properties-line-start.e-btn:not(:active),
  .e-pv-properties-line-end.e-btn:not(:active),
  .e-pv-properties-line-style.e-btn:not(:active),
  .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:not(:active),
  .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:not(:active) {
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-prop-win-drop-down-bg;
      color: $pv-prop-win-drop-down-color;
    }
  }

  .e-pv-properties-line-start.e-btn:hover,
  .e-pv-properties-line-end.e-btn:hover,
  .e-pv-properties-line-style.e-btn:hover,
  .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:hover,
  .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:hover {
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-prop-win-drop-down-bg-hover;
      color: $pv-prop-win-drop-down-color-hover;
    }
  }

  .e-pv-toolbar .e-pv-zoom-drop-down-container .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon:hover {
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-zoom-drop-down-bgcolor;
      color: $pv-icon-color-hover;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      background-color: $secondary-bg-color-hover;
      color: $secondary-text-color-hover;
    }
  }

  .e-pv-prop-dropdown .e-pv-annotation-fontsize-container,
  .e-pv-prop-dropdown-rtl .e-pv-annotation-fontsize-container {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding-left: $pv-spacing-0;
      width: $pv-width-40;
    }
  }

  .e-pv-print-popup-container {
    height: $pv-print-popup-container-height;
    left: $pv-print-popup-container-left;
    overflow: $pv-print-popup-container-overflow;
    position: $pv-print-popup-container-position;
    top: $pv-print-popup-container-top;
    width: $pv-print-popup-container-width;
    z-index: $pv-print-popup-container-z-index;
  }

  .e-pdfviewer .e-pv-print-popup-container .e-spinner-pane.e-spin-center.e-spin-show {
    background-color: $pv-print-overlay-bg-color;
  }

  .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-pv-icon {
    padding: $pv-toolbar-popup-icon-padding;
  }

  .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-pv-icon {
    padding: $pv-toolbar-popup-icon-padding-rtl;
  }

  .e-pv-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
  .e-pdfviewer.e-pv-mobile-view .e-pv-annotation-container > .e-pv-tbar-btn.e-pv-select,
  .e-pdfviewer.e-pv-mobile-view .e-pv-formdesigner-container > .e-pv-tbar-btn.e-pv-select,
  .e-pv-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
  .e-pv-redaction-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
  .e-pv-mobile-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
  .e-pv-mobile-formDesigner-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
  .e-pv-mobile-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select,
  .e-pv-formdesigner-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select {
    background: $pv-item-selection-background-color;
    border: $pv-item-selection-border;
    border-radius: $pv-item-selection-border-radius;
    @if $skin-name == 'fluent2' {
      color: var(--color-sf-toolbar-icon-color);
    }
    @else{
      color: $pv-item-selection-color;
    }
  }

  .e-pdfviewer.e-pv-mobile-view .e-pv-annotation-container > .e-pv-tbar-btn.e-pv-unselect:hover,
  .e-pdfviewer.e-pv-mobile-view .e-pv-formdesigner-container > .e-pv-tbar-btn.e-pv-unselect:hover,
  .e-pdfviewer.e-pv-mobile-view .e-pv-redaction-container > .e-pv-tbar-btn.e-pv-unselect:hover {
    background: initial;
    color: initial;
  }

  .e-pv-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
  .e-pv-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
  .e-pv-mobile-annotation-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
  .e-pv-mobile-formDesigner-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
  .e-pv-mobile-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons,
  .e-pv-organize-toolbar-apperance.e-pv-organize-toolbar .e-tbar-btn.e-pv-select .e-icons,
  .e-pv-organize-toolbar-apperance.e-pv-organize-toolbar .e-tbar-btn.e-pv-select,
  .e-pv-formdesigner-toolbar .e-tbar-btn.e-pv-tbar-btn.e-pv-select .e-icons {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4') {
      color: $pv-item-selection-color;
    }
  }

  .e-pv-automplete-header {
    margin-top: $pv-spacing-10;
    height: $pv-height-26;
    font-weight: $pv-font-weight-medium;
    font-size: $pv-text-xs;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: $pv-width-p100;
    padding-right: $pv-spacing-16;
    text-indent: 16px;
  }

  .e-pv-autocomplete-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: $pv-width-p100;
  }

  .e-pv-autocomplete-word {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc($pv-width-p100 - $pv-width-25);
    display: inline-block;
  }

  .e-pv-autocomplete-count {
    margin-left: $pv-spacing-10;
    flex-shrink: 0;
    text-align: right;
  }

  .e-pv-search-exact-matches {
    display: inline-block;
  }

  .e-pv-total-exact-matches {
    margin-left: $pv-spacing-10;
    flex-shrink: 0;
    text-align: right;
  }

  .e-pv-search-count {
    margin: $pv-spacing-0 $pv-spacing-8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: $pv-width-150;
    text-align: center;
    direction: ltr;
  }

  .e-pv-search-bar {
    @if ($skin-name == 'Material3'){
      background: $pv-search-box-background-color;
    }
    @else{
      background-color: $pv-search-box-background-color;
    }
    border: $pv-search-box-border;
    border-radius: $pv-search-box-border-radius;
    box-shadow: $pv-search-box-box-shadow;
    height: $pv-search-box-height;
    padding: $pv-search-box-padding;
    position: absolute;
    width: $pv-search-box-width;
    z-index: 105;
  }

  .e-blazor-pdfviewer .e-pv-search-bar {
    z-index: 1001;
  }

  .e-pv-text-search-bar {
    @if ($skin-name == 'Material3'){
      background: $pv-search-box-background-color;
    }
    @else{
      background-color: $pv-search-box-background-color;
    }
    border: $pv-search-box-border;
    border-radius: $pv-search-box-border-radius;
    box-shadow: $pv-search-box-box-shadow;
    height: $pv-height-108;
    position: absolute;
    width: $pv-width-384;
    z-index: 105;
  }

  .e-pv-text-search-bar-elements {
    height: $pv-height-32;
    margin: $pv-spacing-20 $pv-spacing-10 $pv-spacing-16 $pv-spacing-20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .e-input-group.e-pv-text-search-input {
    border: none;
  }

  .e-pv-blazor-main-container .e-input-group.e-pv-text-search-input {
    @if ($skin-name == 'fluent2' and $skin-name != 'fluent2-highcontrast') {
      border: $pv-border-1 solid var(--color-sf-border);
    }
    @else if ($skin-name == 'Material3') {
      border-bottom: $pv-border-1 solid;
    }
    @else {
      border: $pv-border-1 solid;
    }
  }

  .e-pv-search-input {
    height: $pv-search-input-height;
    width: $pv-search-input-width;
  }

  .e-pv-text-search-input {
    height: $pv-height-31;
    width: calc($pv-width-p100 - $pv-width-160);
    position: relative;
    flex-grow: 1;
  }

  .e-pv-search-input-mobile .e-control-container.e-input,
  .e-pv-text-search-input-mobile .e-control-container.e-input {
    @if $skin-name == 'fluent2' {
      max-width: $pv-width-95p !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-search-input-mobile {
    height: $pv-search-input-height;
    max-height: $pv-height-150 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-text-search-input-mobile {
    height: $pv-search-input-height;
    max-height: $pv-height-150 !important;/* stylelint-disable-line declaration-no-important */
    width: $pv-width-auto;
  }

  // .e-pv-custom-textbox {
  //   @include sm-mobile {
  //     width: $pv-width-43p !important;/* stylelint-disable-line declaration-no-important */
  //   }
  // }

  // .e-bigger .e-pv-custom-textbox {
  //   @include sm-mobile {
  //     width: $pv-width-37p !important;/* stylelint-disable-line declaration-no-important */
  //   }
  // }

  .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
    margin-left: $pv-spacing-3;
  }

  .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:last-child {
    margin-right: $pv-spacing-3;
  }

  .e-pv-match-case-container {
    margin-top: $pv-match-case-margin-top;
    @if $skin-name=='tailwind3' {
      color: $content-text-color;
    }
  }

  .e-pv-text-search-bar-elements .e-pv-text-search-input .e-input-group .e-clear-icon {
    @if $skin-name=='tailwind3' {
      min-width: $pv-width-30;
      min-height: $pv-height-30;
    }
  }

  .e-rtl .e-pv-textsearch-match-case-container,
  .e-rtl .e-pv-blaz-textsearch-match-case-container {
    margin-right: $pv-spacing-20;
  }

  .e-pv-textsearch-match-case-container,
  .e-pv-blaz-textsearch-match-case-container {
    margin-left: $pv-spacing-20;
    width: $pv-width-240;
    display: flex;
  }

  .e-pv-blaz-textsearch-match-case-box.e-focus,
  .e-pv-blaz-search-btn.e-pv-text-search-btn.e-focus {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      box-shadow: 0 0 0 4px rgba($primary, .25);
      border-radius: $pv-radius-4;
    }
  }

  .e-pv-search-btn.e-btn {
    background-color: transparent;
    @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: $pv-icon-color;
    }
    border: $pv-border-0;
    box-shadow: none;
    height: $pv-search-btn-height;
    margin-top: $pv-search-btn-margin-top;
    width: $pv-search-btn-width;
    @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark') {
      padding-bottom: $pv-spacing-0;
      padding-left: $pv-spacing-1;
      padding-right: $pv-spacing-1;
      padding-top: $pv-spacing-1;
    }
    @if $skin-name == 'fluent2' {
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
      color: $pv-icon-color;
      font-weight: normal !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-blaz-search-btn.e-btn {
    background-color: transparent;
    @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: $pv-icon-color;
    }
    border: $pv-border-0;
    height: $pv-search-btn-height;
    margin-top: $pv-search-btn-margin-top;
    width: $pv-search-btn-width;
    @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark') {
      padding-bottom: $pv-spacing-0;
      padding-left: $pv-spacing-1;
      padding-right: $pv-spacing-1;
      padding-top: $pv-spacing-1;
    }
    @if $skin-name == 'fluent2' {
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
      color: $pv-icon-color;
      font-weight: normal !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-blazor-main-container .e-pv-blaz-search-btn.e-btn {
    margin-top: $pv-spacing-0;
  }

  .e-pv-text-search-btn.e-btn {
    background-color: transparent;
    @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: $pv-icon-color;
    }
    border: $pv-border-0;
    box-shadow: none;
    height: $pv-height-24;
    width: $pv-width-24;
    @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark') {
      padding-bottom: $pv-spacing-0;
      padding-left: $pv-spacing-1;
      padding-right: $pv-spacing-1;
      padding-top: $pv-spacing-1;
    }
    @if ($skin-name == 'bootstrap4') {
      padding-bottom: $pv-spacing-0;
      padding-left: $pv-spacing-1;
      padding-right: $pv-spacing-1;
      padding-top: $pv-spacing-0;
    }
    @if $skin-name == 'fluent2' {
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
      color: $pv-icon-color;
      font-weight: normal !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-search-btn.e-btn:active,
  .e-pv-blaz-search-btn.e-btn:active,
  .e-pv-text-search-btn.e-btn:active {
    background-color: transparent;
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-item-selection-background-color;
      color: $pv-item-selection-color;
    }
  }

  .e-pv-search-btn.e-btn:hover:not(:disabled),
  .e-pv-blaz-search-btn.e-btn:hover:not(:disabled),
  .e-pv-text-search-btn.e-btn:hover:not(:disabled),
  .e-pv-sidebar-toolbar .e-pv-tbar-btn:hover:not(:disabled) {
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-item-selection-background-color;
      color: $pv-item-selection-color;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      background-color: $pv-item-selection-background-color;
      color: $pv-item-selection-color;
    }
    @if $skin-name == 'fluent2' {
      background-color: $pv-item-selection-background-color;
      color: var(--color-sf-toolbar-icon-color);
    }
    @if $skin-name == 'highcontrast' {
      background-color: $pv-annotation-dropdown-background-color-hover;
      border: $pv-border-1 solid $pv-annotation-dropdown-border-color-hover;
    }
  }

  .e-pv-sidebar-toolbar .e-pv-tbar-btn:hover:not(:disabled) {
    @if $skin-name == 'Material3' {
      background: $pv-annotation-dropdown-background-color-hover;
      border: $pv-annotation-dropdown-border-color-hover;
    }
    @if $skin-name == 'FluentUI' {
      background: $pv-annotation-dropdown-background-color-hover;
      border: $pv-annotation-dropdown-border-color-hover;
    }
    @if $skin-name == 'tailwind' {
      background: $pv-annotation-dropdown-background-color-hover;
      border: $pv-annotation-dropdown-border-color-hover;
    }
    @if $skin-name == 'highcontrast' {
      padding: $pv-spacing-7;
    }
  }

  .e-pv-search-btn.e-btn:disabled,
  .e-pv-blaz-search-btn.e-btn:disabled,
  .e-pv-text-search-btn.e-btn:disabled {
    @if $skin-name == 'bootstrap4' {
      color: $pv-thumbnail-icon-disable-color;
    }
  }

  .e-pv-search-bar:not(.e-rtl) .e-pv-prev-search {
    margin-left: $pv-search-prev-margin-left;
  }

  .e-pv-text-search-bar:not(.e-rtl) .e-pv-prev-search {
    margin-left: $pv-spacing-8;
  }

  .e-pv-search-bar:not(.e-rtl) .e-pv-next-search,
  .e-pv-text-search-bar:not(.e-rtl) .e-pv-next-search {
    margin-left: $pv-search-next-margin-left;
  }

  .e-pv-mobile-view .e-pv-search-count {
    margin: $pv-spacing-0;
    max-width: $pv-width-60;
  }

  .e-pv-search-bar.e-rtl .e-pv-prev-search,
  .e-pv-text-search-bar.e-rtl .e-pv-prev-search {
    margin-right: $pv-search-prev-margin-left;
  }

  .e-pv-search-bar.e-rtl .e-pv-next-search,
  .e-pv-text-search-bar.e-rtl .e-pv-next-search {
    margin-right: $pv-search-next-margin-left;
  }

  .e-pv-search-bar.e-rtl .e-pv-prev-search .e-pv-icon-search {
    @if $skin-name != 'bootstrap4' {
      padding-right: $pv-spacing-5;
    }
  }

  .e-pv-notification-popup {
    margin: $pv-spacing-0 $pv-spacing-10;
    max-width: $pv-notification-popup-width;
  }

  .e-pv-notification-popup.e-pv-notification-large-content {
    max-width: $pv-notification-popup-width-large-content;
  }

  .e-pv-notification-popup .e-pv-notification-popup-content {
    font-size: $pv-notification-content-font-size;
  }

  .e-pv-search-input.e-input-group .e-input-search-group-icon.e-input-group-icon,
  .e-pv-text-search-input.e-input-group .e-input-search-group-icon.e-input-group-icon {
    background: $pv-input-background;
  }

  .e-pv-search-input.e-input-group:not(.e-disabled) .e-input-search-group-icon.e-input-group-icon:active,
  .e-pv-text-search-input.e-input-group:not(.e-disabled) .e-input-search-group-icon.e-input-group-icon:active {
    background: $pv-input-active-background;
    color: $pv-input-active-color;
  }

  .e-pv-search-input.e-input-group:not(.e-disabled) .e-input-search-group-icon.e-input-group-icon:hover,
  .e-pv-text-search-input.e-input-group:not(.e-disabled) .e-input-search-group-icon.e-input-group-icon:hover {
    color: $pv-input-hover-color;
  }

  .e-pv-bookmark-container {
    background-color: $pv-bookmark-container-background-color;
    border: $pv-bookmark-container-border;
  }

  .e-pv-bookmark-container .e-listview:not(.e-list-template) .e-list-item {
    border-bottom: $pv-bookmark-list-border-bottom;
    height: $pv-height-48;
  }

  .e-pv-bookmark-container .e-pv-bookmark-view.e-listview .e-ul .e-list-item:last-child {
    border-bottom-width: $pv-border-0;
  }

  .e-pv-bookmark-container .e-listview .e-list-text {
    -ms-transform: translateY(-50%);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .e-pv-nav-toolbar.e-toolbar .e-tbar-btn:active .e-tbar-btn-text {
    color: $pv-nav-toolbar-text-color;
  }

  .e-pv-nav-toolbar.e-toolbar .e-tbar-btn.e-tbtn-txt {
    background-color: transparent;
    border-width: $pv-border-0;
    box-shadow: none;
  }

  .e-pv-bookmark-container .e-pv-bookmark-view {
    padding-top: $pv-spacing-0;
  }

  .e-pv-bookmark-container .e-pv-bookmark-view .e-list-parent.e-ul {
    padding-left: $pv-spacing-0;
  }

  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon {
    @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
      line-height: $pv-line-height-28;
    }
    border-bottom: $pv-border-2 solid;
    margin-top: $pv-spacing-0;
    padding-top: $pv-spacing-5;
    @if ($skin-name=='bootstrap5') {
      padding-top: $pv-spacing-0;
    }
    @if ($skin-name=='fluent2' or $skin-name=='tailwind3') {
      padding-top: $pv-spacing-0;
    }
    @if $skin-name == 'FluentUI' {
      line-height: $pv-line-height-14;
    }
    vertical-align: initial;
  }

  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-font-color-container .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon {
    @if $skin-name == 'highcontrast' {
      padding-top: $pv-spacing-0;
    }
    @if ($skin-name == 'Material3' or $skin-name == 'tailwind3') {
      height: $pv-height-20;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-font-color-container .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon {
    @if ($skin-name =='tailwind3') {
      height: $pv-height-25;
    }
  }

  .e-pv-properties-font-color-container .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon {
    @if ($skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
      line-height: $pv-line-height-28;
    }
    border-bottom: $pv-border-2 solid;
    @if ($skin-name == 'fluent2') {
      margin-top: $pv-spacing-5;
    }
    @else {
      margin-top: $pv-spacing-0;
    }
    @if $skin-name != 'fluent2' {
      padding-top: $pv-spacing-1;
    }
    vertical-align: initial;
    @if $skin-name == 'FluentUI' {
      line-height: $pv-line-height-14;
    }
    @if $skin-name == 'tailwind3' {
      border-bottom: $pv-border-0;
    }
  }

  .e-pv-form-field-properties-dialog .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon {
    @if ($skin-name == 'fluent2') {
      margin-top: $pv-spacing-0;
    }
  }

  .e-pv-font-color-prop-mobile .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon,
  .e-pv-fill-prop-mobile .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-pv-border-prop-group-mobile .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-font-color-container .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon {
    border-bottom: $pv-border-2 solid;
  }

  .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
    margin-top: $pv-spacing-0;
    padding-top: $pv-spacing-7;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' or $skin-name == 'tailwind3' {
      padding-top: $pv-spacing-0;
    }
    @if ($skin-name == 'fluent2'){
      padding-top: $pv-spacing-5;
    }
    vertical-align: initial;
  }

  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-font-color-container .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon,
  .e-pv-fill-prop-mobile .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-pv-border-prop-group-mobile .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon,
  .e-pv-thickness-prop-group-mobile .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon,
  .e-pv-font-color-prop-mobile .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon {
    @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3') {
      width: $pv-width-1em;
    }
    @if ($skin-name != 'bootstrap5') {
      margin-left: $pv-spacing-0;
    }
  }

  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
    @if ($skin-name == 'FluentUI') {
      vertical-align: middle;
    }
  }

  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-font-color-container .e-btn-icon.e-pv-annotation-textcolor-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      line-height: $pv-line-height-normal;
    }
  }
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon {
    @if ($skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5') {
      line-height: $pv-line-height-16;
    }
  }

  .e-pv-custom-annotation-thickness-container .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon,
  .e-pv-custom-annotation-opacity-container .e-btn-icon.e-pv-annotation-opacity-icon.e-pv-icon {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding-top: $pv-spacing-0;
    }
    @if ($skin-name != 'FluentUI' and $skin-name != 'tailwind' and $skin-name != 'bootstrap4') {
      vertical-align: initial;
    }
  }

  .e-pv-annotation-thickness-popup-container-mobile,
  .e-pv-annotation-opacity-popup-container-mobile {
    @if $skin-name != 'Material3' {
      background-color: $pv-annotation-opacity-popup-background-color;
    }
  }

  .e-pv-annotation-opacity-popup-container,
  .e-pv-annotation-thickness-popup-container {
    @if $skin-name != 'Material3' {
      background-color: $pv-annotation-opacity-popup-background-color;
    }
    @if $skin-name != 'fluent2' {
      box-shadow: $pv-annotation-opacity-popup-box-shadow;
    }
    @if $skin-name == 'bootstrap5.3' {
      background-color: var(--color-sf-flyout-bg-color);
    }
    color: $pv-annotation-opacity-popup-color;
    height: $pv-height-auto;
    min-height: $pv-annotation-opacity-popup-min-height;
    padding: $pv-annotation-opacity-popup-padding;
    width: $pv-width-auto;
  }

  .e-pv-page-zoom-popup-container {
    display: flex;
    align-items: center;
    @if $skin-name != 'Material3' {
      background-color: $pv-annotation-opacity-popup-background-color;
    }
    @if $skin-name == 'bootstrap5.3' {
      background-color: var(--color-sf-flyout-bg-color);
    }
    color: $pv-annotation-opacity-popup-color;
    height: $pv-height-auto;
    padding: $pv-organize-page-zoom-popup-padding;
    width: $pv-width-auto;
    border-radius: $pv-radius-4;
  }

  .e-pv-page-zoom-popup-container .e-pv-page-zoom-decrease,
  .e-pv-page-zoom-popup-container .e-pv-page-zoom-increase {
    display: flex;
    float: left;
    width: $pv-default-tile-icon-size;
    height: $pv-default-tile-icon-size;
    justify-content: center;
    align-items: center;
    border-radius: $pv-radius-4;
    border: $pv-border-0;
    background: transparent;
  }

  .e-btn .e-btn-icon.e-pv-page-zoom-increase-icon,
  .e-btn .e-btn-icon.e-pv-page-zoom-decrease-icon {
    @if $skin-name != 'material' and $skin-name != 'material-dark' {
      margin-top: $pv-spacing-0;
    }
    font-size: $pv-icon-font-size;
    color: $pv-icon-color;
  }

  .e-pv-formfield-strokethickness-icon .e-pv-annotation-thickness-popup-container {
    @if ($skin-name != 'Material3') {
      padding: $pv-spacing-4;
    }
  }

  .e-dropdown-popup.e-pv-formfield-strokethickness-icon,
  .e-dropdown-popup.e-pv-formfield-strokecolor-icon,
  .e-dropdown-popup.e-pv-formfield-fontcolor-icon {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      border: none;
    }
  }

  .e-pv-annotation-opacity-label,
  .e-pv-annotation-opacity-indicator,
  .e-pv-annotation-thickness-label,
  .e-pv-annotation-thickness-indicator,
  .e-pv-page-zoom-label,
  .e-pv-page-zoom-indicator {
    float: left;
    font-family: inherit;
    font-size: $pv-font-size-inherit;
  }

  .e-pv-annotation-opacity-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-pv-annotation-thickness-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-pv-page-zoom-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-pv-blazor-zoom-popup .e-control-wrapper.e-slider-container.e-horizontal {
    flex-shrink: 2;
    float: left;
    height: $pv-height-auto;
    margin-left: $pv-organize-page-zoom-slider-margin-left;
    margin-right: $pv-organize-page-zoom-slider-margin-right;
  }

  .e-dropdown-popup:not(.e-rtl) .e-pv-annotation-opacity-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-dropdown-popup:not(.e-rtl) .e-pv-annotation-thickness-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-dropdown-popup:not(.e-rtl) .e-pv-page-zoom-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-dropdown-popup:not(.e-rtl) .e-pv-blazor-zoom-popup .e-control-wrapper.e-slider-container.e-horizontal {
    width: $pv-annotation-opacity-slider-width;
  }

  .e-dropdown-popup:not(.e-rtl) .e-pv-annotation-opacity-popup-container.e-blazor-pv-opacity-container,
  .e-dropdown-popup:not(.e-rtl) .e-pv-annotation-thickness-popup-container.e-blazor-pv-thickness-container {
    width: $pv-annotation-opacity-slider-width;
  }

  .e-dropdown-popup.e-rtl .e-pv-annotation-opacity-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-dropdown-popup.e-rtl .e-pv-annotation-thickness-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-dropdown-popup.e-rtl .e-pv-page-zoom-slider-container.e-control-wrapper.e-slider-container.e-horizontal,
  .e-dropdown-popup.e-rtl .e-pv-blazor-zoom-popup .e-control-wrapper.e-slider-container.e-horizontal {
    width: $pv-annotation-opacity-slider-width-rtl;
  }

  .e-dropdown-popup.e-rtl .e-pv-annotation-opacity-popup-container.e-blazor-pv-opacity-container,
  .e-dropdown-popup.e-rtl .e-pv-annotation-thickness-popup-container.e-blazor-pv-thickness-container {
    width: $pv-annotation-opacity-slider-width-rtl;
  }

  .e-pv-annotation-opacity-slider-container.e-control-wrapper.e-slider-container .e-pv-annotation-opacity-slider.e-slider,
  .e-pv-annotation-thickness-slider-container.e-control-wrapper.e-slider-container .e-pv-annotation-opacity-slider.e-slider,
  .e-pv-page-zoom-slider-container.e-control-wrapper.e-slider-container .e-pv-page-zoom-slider.e-slider,
  .e-pv-blazor-zoom-popup .e-control-wrapper.e-slider-container .e-pv-page-zoom-slider.e-slider {
    top: 0;
    height: $pv-annotation-opacity-slider-height;
  }

  .e-pv-annotation-opacity-popup-container.e-blazor-pv-opacity-container .e-pv-annotation-opacity-slider-container .e-control-wrapper.e-slider-container,
  .e-pv-annotation-thickness-popup-container.e-blazor-pv-thickness-container .e-pv-annotation-thickness-slider-container .e-control-wrapper.e-slider-container {
    height: $pv-annotation-opacity-slider-height;
  }

  .e-pv-annotation-color-container.e-icon-btn,
  .e-pv-annotation-opacity-container.e-icon-btn,
  .e-pv-annotation-stroke-container.e-icon-btn,
  .e-pv-custom-annotation-thickness-container.e-icon-btn,
  .e-pv-custom-annotation-opacity-container.e-icon-btn,
  .e-pv-annotation-thickness-container.e-icon-btn,
  .e-pv-annotation-textcolor-container.e-icon-btn,
  .e-pv-annotation-textalign-container.e-icon-btn,
  .e-pv-annotation-textprop-container.e-icon-btn {
    height: $pv-annotation-drop-down-height;
    width: $pv-annotation-drop-down-width;
  }

  .e-pv-annotation-thickness-container.e-btn.e-icon-btn.e-dropdown-btn {
    @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3') {
      padding-top: $pv-annotation-thickness-drop-down-padding-top;
    }
  }

  .e-pv-shapes-toolbar {
    @if $skin-name == 'Material3' {
      border-radius: $pv-radius-4;
    }
    box-shadow: $pv-drop-down-toolbar-box-shadow;
  }

  .e-pv-shapes-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    padding: $pv-spacing-4;
  }

  .e-pv-shapes-toolbar.e-toolbar .e-toolbar-items.e-toolbar-multirow {
    margin-bottom: $pv-spacing-0;
    margin-left: $pv-spacing-4;
    margin-right: $pv-spacing-4;
    @if $skin-name == 'Material3' {
      margin-top: $pv-spacing-4;
    }
  }

  .e-pv-shapes-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
    height: $pv-height-32;
    width: $pv-width-32;
    @if $skin-name == 'FluentUI' {
      min-height: $pv-height-32;
    }
  }

  .e-pv-organize-total-page-button {
    float: left;
    font-weight: normal;
    color: $pv-toolbar-total-page-number-color;
    font-size: $pv-text-sm;
  }

  .e-rtl .e-pv-organize-total-page-button {
    float: right;
  }

  .e-pdfviewer .e-pv-organize-window .e-footer-content .e-pv-organize-total-page-button {
    background-color: transparent;
    background: transparent;
    color: $pv-toolbar-total-page-number-color;
    cursor: default;
    @if $skin-name=='fluent2' {
      border: none;
    }
  }

  .e-pv-annotation-thickness-slider-container {
    margin-top: $pv-spacing--6;
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
    @if $skin-name == 'FluentUI' {
      min-height: $pv-height-32;
    }
  }

  .e-pv-organize-image {
    width: calc($pv-width-p100 - (2 * $pv-organize-anchor-node-border-width));
    height: calc($pv-height-p100 - (2 * $pv-organize-anchor-node-border-width));
    border: $pv-organize-image-border;
    pointer-events: none;
  }

  .e-pv-annotation-opacity-icon {
    padding-top: $pv-annotation-opacity-icon-padding-top;
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul.e-menu:not(.e-vertical) {
    @if $skin-name == 'highcontrast' {
      padding: $pv-spacing-0;
    }
  }

  .e-pv-stamp-template-container .e-menu-container.e-pv-custom-annotation-stamp-container ul.e-menu.e-menu-parent:not(.e-vertical) {
    @if $skin-name == 'highcontrast' {
      padding: $pv-spacing-0;
    }
  }

  .e-pv-annotation-color-container.e-btn,
  .e-pv-annotation-opacity-container.e-btn,
  .e-pv-annotation-stroke-container.e-btn,
  .e-pv-annotation-thickness-container.e-btn,
  .e-pv-annotation-shapes-container.e-btn,
  .e-pv-annotation-calibrate-container.e-btn,
  .e-pv-annotation-textcolor-container.e-btn,
  .e-pv-annotation-textalign-container.e-btn,
  .e-pv-annotation-textprop-container.e-btn,
  .e-pv-annotation-handwritten-container.e-btn,
  .e-pv-stamp.e-menu-wrapper ul .e-menu-item.e-focused:not(.e-selected) {
    @if $skin-name == 'Material3' {
      background: $pv-annotation-dropdown-background-color;
      border: $pv-annotation-dropdown-border-color;
    }
    @else {
      background-color: $pv-annotation-dropdown-background-color;
      border-color: $pv-annotation-dropdown-border-color;
    }
  }

  .e-pv-annotation-color-container.e-btn:hover,
  .e-pv-annotation-opacity-container.e-btn:hover,
  .e-pv-annotation-stroke-container.e-btn:hover,
  .e-pv-annotation-thickness-container.e-btn:hover,
  .e-pv-annotation-shapes-container.e-btn:hover,
  .e-pv-annotation-calibrate-container.e-btn:hover,
  .e-pv-annotation-textcolor-container.e-btn:hover,
  .e-pv-annotation-textalign-container.e-btn:hover,
  .e-pv-annotation-textprop-container.e-btn:hover,
  .e-pv-annotation-handwritten-container.e-btn:hover,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl.e-valid-input:hover,
  .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl.e-valid-input:hover,
  .e-pv-stamp.e-menu-wrapper ul .e-menu-item.e-focused:hover {
    @if $skin-name == 'Material3' {
      background: $pv-annotation-dropdown-background-color-hover;
      border: $pv-annotation-dropdown-border-color-hover;
    }
    @else {
      background-color: $pv-annotation-dropdown-background-color-hover;
      border-color: $pv-annotation-dropdown-border-color-hover;
    }
  }

  .e-pv-stamp.e-menu-wrapper ul .e-menu-item.e-focused:focus {
    background-color: $pv-annotation-dropdown-background-color-hover;
    border-color: $pv-annotation-dropdown-border-color-hover;
    outline: none;
    color: $pv-item-selection-color;
  }

  .e-pv-annotation-color-container.e-btn:focus,
  .e-pv-annotation-opacity-container.e-btn:focus,
  .e-pv-annotation-stroke-container.e-btn:focus,
  .e-pv-annotation-thickness-container.e-btn:focus,
  .e-pv-annotation-shapes-container.e-btn:focus,
  .e-pv-annotation-calibrate-container.e-btn:focus,
  .e-pv-annotation-textcolor-container.e-btn:focus,
  .e-pv-annotation-textalign-container.e-btn:focus,
  .e-pv-annotation-handwritten-container.e-btn:focus,
  .e-pv-annotation-textprop-container.e-btn:focus {
    @if $skin-name == 'Material3' {
      background: $pv-annotation-dropdown-background-color-hover;
      border: $pv-annotation-dropdown-border-color-hover;
      outline: none;
    }
    @else if $skin-name == 'bootstrap5.3' {
      background: none;
      color: var(--color-sf-icon-color);
      box-shadow: $pv-annotation-tool-item-focus-box-shadow;
    }
    @else {
      background-color: $pv-annotation-dropdown-background-color-hover;
      border-color: $pv-annotation-dropdown-border-color-hover;
      outline: none;
    }
  }

  .e-pv-annotation-color-container.e-btn:active,
  .e-pv-annotation-opacity-container.e-btn:active,
  .e-pv-annotation-stroke-container.e-btn:active,
  .e-pv-annotation-thickness-container.e-btn:active,
  .e-pv-annotation-shapes-container.e-btn:active,
  .e-pv-annotation-calibrate-container.e-btn:active,
  .e-pv-annotation-textcolor-container.e-btn:active,
  .e-pv-annotation-textalign-container.e-btn:active,
  .e-pv-annotation-textprop-container.e-btn:active,
  .e-pv-annotation-handwritten-container.e-btn:active {
    @if $skin-name == 'Material3' {
      background: $pv-annotation-dropdown-background-color-active;
      border: $pv-annotation-dropdown-border-color-active;
    }
    @else {
      background-color: $pv-annotation-dropdown-background-color-active;
      border-color: $pv-annotation-dropdown-border-color-active;
    }
    box-shadow: none;
    color: $pv-item-selection-color;
  }

  .e-pv-annotation-shapes-container.e-btn.e-dropdown-btn.e-active:not(:hover),
  .e-pv-annotation-calibrate-container.e-btn.e-dropdown-btn.e-active:not(:hover),
  .e-pv-annotation-handwritten-container.e-dropdown-btn.e-btn.e-active:not(:hover),
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active:not(:hover) .e-caret {
    @if $skin-name == 'Material3' {
      background: $pv-annotation-dd-background-color-active;
    }
    @else {
      background-color: $pv-annotation-dd-background-color-active;
    }
    color: $pv-icon-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: $secondary-text-color-pressed;
    }
  }

  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn.e-active:not(:hover) {
    @if $skin-name == 'fluent2' {
      background-color: $pv-annotation-dd-background-color-active;
      color: $pv-icon-color;
    }
  }

  .e-pv-annotation-color-container.e-dropdown-btn.e-btn,
  .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn,
  .e-pv-annotation-stroke-container.e-dropdown-btn.e-btn,
  .e-pv-custom-annotation-thickness-container.e-dropdown-btn.e-btn,
  .e-pv-custom-annotation-opacity-container.e-dropdown-btn.e-btn,
  .e-pv-annotation-thickness-container.e-dropdown-btn.e-btn,
  .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn,
  .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn,
  .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn {
    line-height: $pv-annotation-drop-down-btn-line-height;
    padding: $pv-annotation-drop-down-btn-padding;
    @if ($skin-name == 'bootstrap5' or $skin-name =='Material3' or $skin-name == 'bootstrap5.3') {
      align-items: center;
      display: flex;
    }
  }

  .e-pv-blazor-main-container .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
  .e-pv-blazor-main-container .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
  .e-pv-blazor-main-container .e-pv-annotation-color-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-annotation-stroke-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-custom-annotation-thickness-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-custom-annotation-opacity-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-annotation-thickness-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn,
  .e-pv-blazor-main-container .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn {
    @if ($skin-name == 'fluent2') {
      font-weight: $pv-font-weight-medium;
    }
  }

  .e-pv-blazor-main-container .e-menu-container ul.e-menu:not(.e-vertical) {
    @if ($skin-name == 'fabric') {
      padding: $pv-spacing-0;
    }
  }

  .e-pv-annotation-color-container.e-btn.e-active,
  .e-pv-annotation-opacity-container.e-btn.e-active,
  .e-pv-annotation-stroke-container.e-btn.e-active,
  .e-pv-annotation-shapes-container.e-btn.e-active,
  .e-pv-annotation-calibrate-container.e-btn.e-active,
  .e-pv-annotation-textcolor-container.e-btn.e-active,
  .e-pv-annotation-textprop-container.e-btn.e-active,
  .e-pv-custom-annotation-thickness-container.e-btn.e-active,
  .e-pv-custom-annotation-opacity-container.e-btn.e-active,
  .e-pv-annotation-handwritten-container.e-btn.e-active,
  .e-pv-annotation-textalign-container.e-btn.e-active {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      background-color: $pv-annotation-dropdown-background-color-hover;
      border-color: $pv-annotation-dropdown-border-color-hover;
      color: $white;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      height: $pv-height-32;
      line-height: $pv-line-height-32;
      padding: $pv-spacing-0 $pv-spacing-8;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item{
    @if ($skin-name == 'fluent2') {
      height: $pv-height-32;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon .e-caret,
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused .e-menu-icon .e-caret {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      height: $pv-height-32;
      line-height: $pv-line-height-32;
      padding: $pv-spacing-0 $pv-spacing-8;
    }
  }

  .e-pv-custom-annotation-stamp-container,
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
    @if ($skin-name == 'FluentUI') {
      background-color: transparent;
      height: $pv-height-32;
      line-height: $pv-line-height-32;
    }
  }

  .e-pv-toolbar.e-toolbar .e-tbar-btn .e-icons.e-btn-icon,
  .e-pv-annotation-toolbar.e-toolbar .e-tbar-btn .e-icons.e-btn-icon {
    @if ($skin-name == 'FluentUI') {
      font-size: $pv-icon-font-size;
    }
  }

  .e-pv-submit .e-tbar-btn {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      height: $pv-height-30;
    }
  }

  .e-pv-toolbar.e-toolbar.e-toolpop .e-toolbar-items .e-toolbar-item.e-popup-text .e-tbar-btn-text.e-pv-submitform-text {
    display: inline-block;
    padding: $pv-spacing-0 $pv-spacing-4;
  }

  .e-pv-toolbar.e-toolbar.e-toolpop .e-toolbar-items .e-toolbar-item.e-pv-submit .e-tbar-btn .e-tbar-btn-text.e-pv-submitform-text {
    display: inline-block;
    @if $skin-name == 'FluentUI' {
      padding: $pv-spacing-3 $pv-spacing-4;
    }
    @else {
      padding: $pv-spacing-0 $pv-spacing-4;
    }
  }

  .e-pv-mobile-toolbar .e-toolbar-items .e-toolbar-item .e-btn.e-tbar-btn,
  .e-pv-nav-toolbar .e-toolbar-items .e-toolbar-item .e-btn.e-tbar-btn {
    height: $pv-toolbar-btn-height-mobile;
    min-width: $pv-toolbar-btn-width-mobile;
  }

  .e-pv-mobile-toolbar .e-toolbar-items .e-toolbar-item .e-btn.e-tbar-btn.e-mobile-more-option:active span::before {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: $pv-item-selection-color !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-annotation-popup-menu {
    background-color: $pv-sidebar-toolbar-background;
    border-color: $pv-control-border-color;
    color: $pv-toolbar-total-page-number-color;
  }

  .e-pv-properties-window {
    max-width: $pv-properties-win-max-width;
  }

  .e-pv-scale-ratio-window {
    max-width: $pv-scale-ratio-win-max-width;
  }

  .e-pv-scale-ratio-dialog {
    max-width: $pv-blazor-scale-ratio-dialog-max-width;
  }

  .e-pv-line-styles-content,
  .e-pv-line-styles-item {
    @if ($theme-name != 'fluent2-highcontrast') {
      border-bottom-color: $pv-prop-line-styles-color;
    }
  }

  .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
  .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
    height: $pv-prop-color-picker-height;
    line-height: $pv-prop-color-picker-line-height;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      background: $transparent;
      border: $pv-border-1 solid $border-light;
      border-radius: $pv-radius-4;
      box-sizing: border-box;
      color: $content-text-color;
    }
    @if ($skin-name == 'Material3') {
      padding: $pv-spacing-7;
    }
    @if ($skin-name == 'fluent2') {
      width: $pv-width-54;
      padding: $pv-spacing-4;
      padding-left: $pv-spacing-7;
    }
  }
  .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn:disabled,
  .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn:disabled{
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: $pv-icon-color;
    }
  }

  .e-pv-properties-window .e-dlg-content {
    padding-top: $pv-spacing-6;
  }

  .e-pv-scale-ratio-text,
  .e-pv-depth-text {
    margin-bottom: $pv-spacing-8;
  }

  .e-pv-properties-line-start-container,
  .e-pv-properties-line-end-container,
  .e-pv-properties-line-style-container,
  .e-pv-properties-line-thickness-container,
  .e-pv-properties-line-fill-color-container,
  .e-pv-properties-line-stroke-color-container,
  .e-pv-properties-line-leader-length-container {
    float: left;
    height: $pv-properties-container-height;
    margin-bottom: $pv-properties-container-margin-bottom;
  }

  .e-pv-properties-line-start-container,
  .e-pv-properties-line-end-container,
  .e-pv-properties-line-style-container,
  .e-pv-properties-line-thickness-container,
  .e-pv-properties-line-fill-color-container{
    @if $skin-name == 'fluent2' or $skin-name == 'tailwind3' {
      width: $pv-width-p45 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-line-opacity-container {
    float: left;
    height: $pv-height-auto;
    width: $pv-properties-window-container-max-width;
    @if $skin-name == 'Material3'
    {
      width: $pv-width-204;
      max-width: $pv-width-204;
    }
    @if $skin-name == 'fluent2' {
      width: $pv-width-52p !important;/* stylelint-disable-line declaration-no-important */
    }
    @else if $skin-name == 'tailwind3' {
      width: $pv-width-p45 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-mobile-view .e-pv-properties-line-start-container,
  .e-pv-mobile-view .e-pv-properties-line-end-container,
  .e-pv-mobile-view .e-pv-properties-line-style-container,
  .e-pv-mobile-view .e-pv-properties-line-thickness-container,
  .e-pv-mobile-view .e-pv-properties-line-leader-length-container {
    @if $skin-name == 'FluentUI' or $skin-name == 'highcontrast' {
      width: $pv-width-43p !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      width: $pv-width-p45 !important;/* stylelint-disable-line declaration-no-important */
      @include medium-mobile {
        width: $pv-width-44p !important;/* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-pv-mobile-view .e-pv-properties-line-fill-color-container,
  .e-pv-mobile-view .e-pv-properties-line-opacity-container {
    width: $pv-width-p54 !important;/* stylelint-disable-line declaration-no-important */
    @include medium-mobile {
      width: $pv-width-p55 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-mobile-view .e-pv-properties-line-stroke-color-container,
  .e-pv-mobile-view .e-pv-properties-line-leader-length-container {
    margin-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    margin-right: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-mobile-view .e-pv-properties-opacity-indicator {
    margin-left: $pv-spacing-54p !important;/* stylelint-disable-line declaration-no-important */
    @include medium-mobile {
      margin-left: $pv-spacing-55p !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-mobile-view .e-pv-properties-line-opacity {
    width: $pv-width-p80 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-scale-ratio-src-input-container,
  .e-pv-scale-ratio-src-unit-container,
  .e-pv-scale-ratio-dest-input-container,
  .e-pv-scale-ratio-dest-unit-container,
  .e-pv-depth-input-container,
  .e-pv-depth-unit-container {
    float: left;
    height: $pv-scale-ratio-input-container-height;
  }

  .e-pv-scale-ratio-src-input-container,
  .e-pv-scale-ratio-src-unit-container,
  .e-pv-scale-ratio-dest-input-container,
  .e-pv-scale-ratio-dest-unit-container {
    margin-bottom: $pv-scale-ratio-input-container-margin-bottom;
  }

  .e-pv-scale-ratio-src-unit-container,
  .e-pv-scale-ratio-dest-unit-container,
  .e-pv-depth-unit-container {
    margin-left: $pv-prop-win-margin-left;
  }

  .e-pv-scale-ratio-src-unit.e-btn,
  .e-pv-scale-ratio-dest-unit.e-btn,
  .e-pv-depth-unit.e-btn {
    padding: $pv-scale-ratio-win-drop-down-padding;
    @if $skin-name == 'fluent2' {
      height: $pv-toolbar-btn-height;
    }
  }

  .e-pv-scale-unit-content {
    float: left;
    width: $pv-width-33;
    @if $skin-name=='fluent2' {
      width: $pv-width-8;
      height: $pv-height-20;
      font-weight: normal;
      line-height: $pv-line-height-20;
    }
  }

  .e-pv-scale-ratio-src-unit .e-caret,
  .e-pv-scale-ratio-dest-unit .e-caret,
  .e-pv-depth-unit .e-caret {
    margin-left: $pv-scale-ratio-win-drop-down-caret-margin-left;
    margin-top: $pv-scale-ratio-win-drop-down-caret-margin-top;
    @if $skin-name == 'tailwind3' {
      margin-bottom: $pv-scale-ratio-win-drop-down-caret-margin-top;
    }
  }

  .e-pv-properties-line-opacity {
    margin-top: $pv-spacing--10;
  }

  .e-pv-properties-line-start-label,
  .e-pv-properties-line-end-label,
  .e-pv-properties-line-style-label,
  .e-pv-properties-line-thickness-label,
  .e-pv-properties-line-fill-color-label,
  .e-pv-properties-line-stroke-color-label,
  .e-pv-properties-line-opacity-label,
  .e-pv-properties-line-leader-length-label {
    @if ($skin-name == 'FluentUI') {
      font-weight: $pv-font-weight-semibold;
    }
    @if ($skin-name == 'Material3'){
      margin-bottom: $pv-spacing-0;
    }
    @else {
      font-size: $pv-text-sm;
    }
    @if ($skin-name == 'fluent2') {
      margin-bottom: $pv-spacing-4;
    }
    @else
    {
      margin-bottom: $pv-spacing-8;
    }
  }

  .e-pv-properties-line-opacity-label{
    @if ($skin-name == 'fluent2') {
      margin-bottom: $pv-spacing-0;
    }
  }

  .e-pv-blazor-properties-container-custom-width .e-pv-properties-line-opacity-label{
    @if ($skin-name != 'Material3' and $skin-name != 'material') {
      margin-bottom: $pv-spacing-0 !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-line-end-container,
  .e-pv-properties-line-thickness-container {
    @if ($skin-name == 'Material3'){
      margin-left: $pv-spacing-12;
    }
    @else if ($skin-name == 'fluent2'){
      margin-left: $pv-spacing-22;
    }
    @else {
      margin-left: $pv-spacing-24;
    }
  }

  .e-pv-properties-line-leader-length-container {
    @if ($skin-name == 'fluent2') {
      margin-top: $pv-spacing-10;
      width: $pv-width-46p !important;/* stylelint-disable-line declaration-no-important */
      margin-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else if ($skin-name == 'tailwind3') {
      margin-top: $pv-spacing-10;
      width: $pv-width-p45 !important;/* stylelint-disable-line declaration-no-important */
      margin-left: $pv-spacing-7p !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      margin-left: $pv-line-leader-length-margin-left;
    }
  }

  .e-pv-properties-line-leader-length-container.e-pv-blazor-properties-container-custom-margin {
    @if ($skin-name == 'tailwind3') {
      margin-top: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-line-stroke-color-container {
    margin-left: $pv-line-stroke-color-margin-left !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-properties-line-start,
  .e-pv-properties-line-end,
  .e-pv-properties-line-style,
  .e-pv-properties-line-thickness,
  .e-pv-properties-line-opacity,
  .e-pv-properties-line-leader-length {
    max-width: $pv-properties-window-container-max-width;
    @if $skin-name == 'fluent2' {
      width: $pv-width-p100;
    }
  }

  .e-pv-scale-ratio-src-input,
  .e-pv-scale-ratio-dest-input,
  .e-pv-depth-input {
    max-width: $pv-scale-ratio-container-max-width;
    @if $skin-name == 'fluent2' {
      max-width: $pv-width-176;
    }
  }

  .e-pv-properties-line-start,
  .e-pv-properties-line-end,
  .e-pv-properties-line-style {
    @if $skin-name != 'fluent2' {
      width: $pv-properties-window-container-width;
    }
  }

  .e-pv-properties-line-style {
    @if ($skin-name == 'Material3'){
      font-size: $pv-text-xxs;
      max-width: $pv-width-214;
      border-radius: $pv-radius-0;
    }
  }

  .e-pv-scale-ratio-src-unit,
  .e-pv-scale-ratio-dest-unit,
  .e-pv-depth-unit {
    width: $pv-scale-ratio-width;
  }

  .e-pv-line-styles-container {
    line-height: $pv-line-height-14;
    padding: $pv-spacing-8 $pv-spacing-18;
  }

  .e-pv-line-styles-item {
    box-sizing: border-box;
  }

  .e-pv-line-styles-content,
  .e-pv-line-styles-item {
    border-bottom-width: $pv-border-2;
    display: inline-block;
    width: $pv-width-p100;
  }

  .e-pv-properties-line-style-content {
    float: left;
    line-height: $pv-line-height-16;
    width: $pv-width-44;
    @if $skin-name == 'FluentUI' {
      line-height: $pv-line-height-20;
    }
    @if ($skin-name == 'Material3'){
      font-size: $pv-text-sm;
    }
    @if $skin-name == 'tailwind3' {
      word-wrap: normal;
    }
  }

  .e-pv-properties-line-start.e-btn,
  .e-pv-properties-line-end.e-btn {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark') {
      background: transparent;
      border-color: $border;
      box-shadow: none;
      color: $content-text-color;
    }
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      height: $pv-height-30;
    }
    @if ($skin-name == 'Material3'){
      border-bottom: $pv-border-1 solid rgba($border);
      border-radius: $pv-radius-0;
      width: $pv-width-214;
      height: $pv-height-32;
    }

    @else {
      height: $pv-height-32;
    }
    padding: $pv-properties-padding;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' or $skin-name == 'bootstrap5.3') {
      text-align: center;
    }
  }

  .e-pv-properties-line-style.e-btn {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark') {
      background: transparent;
      border-color: $border;
      box-shadow: none;
      color: $content-text-color;
    }
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      height: $pv-height-30;
    }
    @if ($skin-name =='Material3'){
      border-bottom: $pv-border-1 solid rgba($border);
      border-radius: $pv-radius-0;
    }
    @else {
      height: $pv-height-32;
    }
    line-height: $pv-line-height-0;
    padding: $pv-properties-line-style-padding;
    white-space: pre;
  }

  .e-pv-properties-line-start.e-btn .e-caret,
  .e-pv-properties-line-end.e-btn .e-caret {
    @if $skin-name == 'bootstrap4' {
      display: block;
    }
    @else if $skin-name == 'fluent2' {
      display: block;
    }
    @else {
      display: inline;
    }
    @if ($skin-name == 'fluent2' or $skin-name == 'FluentUI') {
      line-height: $pv-line-height-24;
    }
    @else {
      line-height: $pv-line-height-16;
    }
    margin-left: $pv-properties-drop-down-margin-left;
  }

  .e-pv-line-styles-content-container {
    float: left;
    font-size: $pv-font-size-0;
    @if ($skin-name == 'FluentUI') {
      margin-right: $pv-spacing-0;
    }
    @else {
      margin-right: $pv-spacing-8;
    }
    margin-top: $pv-prop-line-styles-margin-top;
    @if $skin-name == 'FluentUI' {
      width: $pv-width-120;
    }
    @if ($skin-name == 'Material3'){
      width: $pv-width-155;
      padding-top: $pv-spacing-6;
    }
    @else if ($skin-name == 'fluent2'){
      width: $pv-width-78p;
    }
    @else {
      width: $pv-width-138;
    }
    @if ($skin-name == 'highcontrast') {
      margin-top: $pv-spacing-5;
    }
  }

  .e-pv-formfield-textcolor-icon .e-icon-right.e-caret {
    @if ($skin-name =='Material3' or $skin-name =='Material3-dark') {
      line-height: $pv-line-height-20 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-line-style-container .e-btn .e-btn-icon.e-icon-right {
    @if ($skin-name =='Material3' or $skin-name =='Material3-dark') {
      line-height: $pv-line-height-20 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
  .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
  .e-pv-annotation-handwritten-container.e-btn.e-icon-btn,
  .e-menu-wrapper.e-custom-scroll.e-lib.e-keyboard.e-pv-stamp ul {
    @if $skin-name != 'Material3' {
      height: $pv-annot-toolbar-dropdown-btn-height;
      width: $pv-annot-toolbar-dropdown-btn-width;
    }
    @else {
      width: $pv-width-max;
    }
  }

  .e-pv-annotation-shapes-container.e-btn.e-icon-button,
  .e-pv-annotation-calibrate-container.e-btn.e-icon-button,
  .e-pv-annotation-handwritten-container.e-btn.e-icon-button {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      align-items: baseline;
      display: flex;
      height: $pv-annot-toolbar-dropdown-btn-height;
      line-height: $pv-annot-toolbar-dropdown-btn-height;
      padding: $pv-spacing-3 $pv-spacing-8;
      width: $pv-annot-toolbar-dropdown-btn-width;
    }
  }

  .e-pv-properties-form-field-window .e-btn-icon.e-icon-dlg-close {
    @if $skin-name == 'tailwind3' {
      margin-top: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
  .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
  .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      align-items: baseline;
      display: flex;
      padding: $pv-annotation-icon-padding;
    }
    @else {
      padding: $pv-annotation-icon-padding;
    }
  }

  .e-pv-annotation-handwritten-container.e-dropdown-btn.e-btn {
    @if ($skin-name =='Material3') {
      padding: $pv-annotation-drop-down-btn-padding;
      align-items: center;
      display: flex;
      line-height: $pv-annotation-drop-down-btn-line-height;
    }
  }

  .e-pv-annotation-shapes-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-annotation-calibrate-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-annotation-handwritten-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-alignment-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-text-color-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-color-template-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-stroke-template-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-thickness-template-container .e-btn-icon.e-icons.e-icon-right.e-caret,
  .e-pv-opacity-template-container .e-btn-icon.e-icons.e-icon-right.e-caret {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding-bottom: $pv-spacing-0;
      width: $pv-width-20;
    }
  }

  .e-pv-blazor-main-container .e-dropdown-btn .e-btn-icon {
    @if ($skin-name == 'FluentUI') {
      font-size: $pv-font-size-inherit;
    }
  }

  .e-pv-properties-line-start-container .e-btn:focus {
    @if $skin-name == 'highcontrast' {
      outline: none;
    }
  }

  .e-pv-annotation-shape-icon,
  .e-pv-annotation-calibrate-icon,
  .e-pv-handwritten-icon {
    @if $skin-name != 'fluent2' {
      margin-right: $pv-spacing-4;
    }
  }

  .e-pv-stamp-template-container .e-menu-item.e-menu-caret-icon {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      padding: $pv-spacing-0 $pv-spacing-28 $pv-spacing-0 $pv-spacing-8;
    }
    @if $skin-name == 'fluent2'{
      padding: $pv-spacing-0 $pv-spacing-24 $pv-spacing-0 $pv-spacing-6 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-stamp-template-container .e-rtl .e-menu-item.e-menu-caret-icon {
    @if $skin-name == 'fluent2'{
      padding: $pv-spacing-0 $pv-spacing-12 $pv-spacing-0 $pv-spacing-24 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-opacity-indicator {
    width: $pv-width-p100;
    text-align: right;
    padding-right: $pv-spacing-16;
  }

  .e-pv-blazor-properties-container-custom-width .e-pv-properties-opacity-indicator {
    @if $skin-name == 'fluent2'{
      padding-right: $pv-spacing-36 !important;/* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5' or $skin-name == 'material3' or $skin-name == 'material' or $skin-name == 'tailwind' {
      padding-right: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'FluentUI'{
      padding-right: $pv-spacing-10 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-line-opacity-container .e-control-wrapper.e-slider-container.e-horizontal {
    @if $skin-name =='fluent2' {
      width: $pv-width-85p;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-parent.e-menu {
    border-radius: $pv-stamp-container-border-radius;
  }

  .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
  .e-pv-annotation-calibrate-container.e-btn.e-icon-btn,
  .e-pv-annotation-handwritten-container.e-btn.e-icon-btn,
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item,
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-pv-stamp-icon,
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item .e-caret {
    @if ($skin-name != 'Material3' and $skin-name != 'fluent2') {
      line-height: $pv-annot-toolbar-dropdown-btn-line-height;
    }
  }

  .e-pv-formdesigner-toolbar .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
    @if ($skin-name == 'tailwind') {
      line-height: $pv-line-height-28;
    }
  }
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item.e-selected {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5.3' {
      background: $secondary-bg-color-pressed;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item.e-selected .e-pv-stamp-icon,
  .e-pv-annotation-stamp-container .e-menu-parent.e-menu .e-menu-item.e-selected .e-caret {
    @if $skin-name == 'bootstrap5.3' {
      color: var(--color-sf-secondary-text-color-pressed);
    }
    @if $theme-name == 'bootstrap5' {
      color: $pv-item-selection-color;
    }
  }

  .e-toolbar-item.e-pv-current-page-container {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding-top: $pv-spacing-2;
    }
    @if $skin-name == 'fluent2' {
      margin-left: $pv-spacing-8 !important;/* stylelint-disable-line declaration-no-important */
      width: $pv-width-43;
    }
  }

  .e-pv-mobile-view .e-pv-password-popup.e-dialog {
    @if ($skin-name != 'Material3') {
      height: $pv-password-dialog-height-mobile;
    }
  }

  .e-pv-mobile-view .e-pv-password-popup.e-dialog {
    @if ($skin-name == 'FluentUI') {
      height: $pv-height-270;
    }
  }

  .e-pv-mobile-view .e-pv-notification-popup.e-dialog {
    @if $skin-name != 'Material3' {
      height: $pv-notification-dialog-height-mobile;
    }
  }

  .e-pv-mobile-view .e-pv-notification-popup.e-pv-notification-large-content.e-dialog {
    @if $skin-name != 'Material3' {
      height: $pv-notification-dialog-height-large-mobile;
    }
  }

  .e-pv-mobile-view .e-pv-notification-popup.e-pv-notification-large-content.e-dialog {
    @if ($skin-name == 'FluentUI') {
      height: $pv-height-280;
    }
  }

  .e-pv-redaction-properties-dialog .e-dlg-header-content,
  .e-pv-form-field-properties-dialog .e-dlg-header-content {
    padding-bottom: $pv-spacing-10 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-redaction-properties-dialog .e-dlg-content,
  .e-pv-form-field-properties-dialog .e-dlg-content {
    @if ($skin-name == 'fluent2' or $skin-name == 'Material3' or $skin-name == 'FluentUI') {
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'tailwind3' {
      padding-top: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-redaction-properties-dialog .e-dlg-content .e-tab-header,
  .e-pv-redaction-properties-dialog .e-dlg-content .e-content,
  .e-pv-form-field-properties-dialog .e-dlg-content .e-tab-header,
  .e-pv-form-field-properties-dialog .e-dlg-content .e-content {
    @if ($skin-name == 'fluent2' or $skin-name == 'Material3' or $skin-name == 'FluentUI') {
      padding: $pv-spacing-0 $pv-spacing-24 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-redaction-font-family input.e-control.e-dropdownlist.e-lib.e-input,
  .e-pv-redaction-font-size input.e-control.e-combobox.e-lib.e-input,
  .e-pv-redaction-overlat-input input.e-control.e-textbox.e-lib.e-input {
    @if $skin-name == 'Material3' {
      padding-left: $pv-spacing-8;
    }
  }
  .e-pv-mobile-view .e-pv-redaction-content-container{
    .e-pv-font-family-prop-mobile input.e-control.e-dropdownlist.e-lib.e-input,
    .e-pv-font-size-prop-mobile input.e-control.e-combobox.e-lib.e-input,
    .e-pv-overlay-text-prop-mobile input.e-control.e-textbox.e-lib.e-input {
      @if $skin-name =='Material3' {
        padding-left: $pv-spacing-8;
      }
    }
  }
  .e-pv-mobile-view .e-pv-redaction-panel-title-container .e-pv-comment-panel-title {
    @if $skin-name == 'Material3' {
      top: $pv-spacing-4;
      background: none;
    }
  }

  .e-pv-mobile-view .e-pv-corrupted-popup.e-dialog {
    @if $skin-name != 'Material3' {
      height: $pv-corrupted-dialog-height-mobile;
    }
  }

  .e-pv-mobile-view .e-pv-password-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
  .e-pv-mobile-view .e-pv-corrupted-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
  }

  .e-pv-organize-window .e-dlg-header-content .e-btn.e-dlg-closeicon-btn{
    @if $skin-name == 'fluent2' {
      color: var(--color-sf-secondary-text-color);
    }
  }

  .e-pv-zoom-drop-down-container .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-pv-zoom-drop-down-container .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    @if $skin-name == 'bootstrap4' {
      color: $pv-title-close-color;
    }
  }

  .e-pv-zoom-drop-down.e-popup .e-list-item {
    @if ($skin-name == 'tailwind3') {
      line-height: $pv-line-height-32;
    }
  }

  .e-pv-fontfamily-container .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-pv-fontfamily-container .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    @if $skin-name == 'bootstrap4' {
      color: $pv-title-close-color;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      color: $white;
    }
  }

  .e-pv-fontfamily-container .e-input-group .e-input-group-icon,
  .e-input-group.e-control-wrapper .e-input-group-icon {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      color: inherit;
    }
  }

  .e-pv-fontsize-container .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-pv-fontsize-container .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    @if $skin-name == 'bootstrap4' {
      color: $pv-title-close-color;
    }
  }

  .e-pv-sidebar-content-container.e-left {
    left: $pv-sidebar-content-container-left;
  }

  .e-pv-sidebar-content-container.e-right {
    right: $pv-sidebar-content-container-left;
  }

  .e-pv-sidebar-toolbar-splitter.e-left {
    left: $pv-sidebar-toolbar-splitter-left;
  }

  .e-pv-sidebar-toolbar-splitter.e-right {
    right: $pv-sidebar-toolbar-splitter-left;
  }

  .e-pv-sidebar-resizer.e-left {
    @if $skin-name == 'bootstrap4' {
      border-right: $pv-border-1 solid $pv-sidebar-resizer-border-color;
    }
    left: $pv-sidebar-resizer-left;
  }

  .e-pv-sidebar-resizer.e-right {
    @if $skin-name == 'bootstrap4' {
      border-left: $pv-border-1 solid $pv-sidebar-resizer-border-color;
    }
    right: $pv-sidebar-resizer-left;
  }

  .e-pdfviewer .e-checkbox-wrapper.e-pv-organize-select-all .e-frame + .e-label {
    font-size: $pv-text-sm;
  }

  .e-pv-organize-window.e-popup.e-popup-open {
    height: $pv-height-p100 !important;/* stylelint-disable-line declaration-no-important */
    max-height: $pv-height-p100;
  }

  .e-pv-blazor-organize-window .e-footer-content .e-btn {
    border-radius: $pv-radius-4;
  }

  .e-pv-insert-left-button.e-btn .e-btn-icon,
  .e-pv-insert-right-button.e-btn .e-btn-icon {
    margin-top: $pv-spacing-0;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'material' or $skin-name == 'material-dark') {
      font-size: $pv-text-base;
    }
  }

  .e-pv-blazor-organize-window .e-pv-organize-buttondiv .e-pv-icon {
    margin-top: $pv-spacing-0;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'material' or $skin-name == 'material-dark') {
      font-size: $pv-text-base;
    }
  }

  .e-pv-blazor-organize-window .e-toolbar .e-toolbar-item.e-separator {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      margin: $pv-spacing-4;
    }
  }

  .e-pv-organize-toolbar .e-pv-page-zoom-icon {
    @if $skin-name != 'material' and $skin-name != 'material-dark' and $skin-name != 'bootstrap4' {
      margin-right: $pv-radius-8 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-blazor-organize-window {
    .e-pv-organize-content-apperance {
      width: $pv-height-p100;
      height: $pv-height-p100;

      .e-pv-import-input-element {
        position: fixed;
        left: -100em;
      }

      .e-pv-more-selected .e-pv-delete-button,
      .e-pv-more-selected .e-pv-copy-button,
      .e-pv-more-selected .e-pv-rotate-right-button,
      .e-pv-more-selected .e-pv-rotate-left-button {
        display: none !important;/* stylelint-disable-line declaration-no-important */
      }
    }

    .e-pv-organize-toolbar {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
        height: $pv-height-38 !important;/* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap4' or $skin-name == 'FluentUI' or $skin-name == 'highcontrast' {
        height: $pv-height-40 !important;/* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'fluent2' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
        height: $pv-height-42 !important;/* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'tailwind3' or $skin-name == 'Material3' {
        height: $pv-height-48 !important;/* stylelint-disable-line declaration-no-important */
      }

      .e-toolbar-item .e-tbar-btn {
        @if $skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' or $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
          min-height: $pv-height-32 !important;/* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'fluent2' {
          min-height: $pv-height-34 !important;/* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' {
          min-height: $pv-height-30 !important;/* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'highcontrast' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
          min-height: $pv-height-40 !important;/* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'material' or $skin-name == 'material-dark' {
          height: $pv-height-24 !important;/* stylelint-disable-line declaration-no-important */
        }
      }
    }

    .e-pv-blazor-organize-window.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
      @if $skin-name == 'FluentUI' {
        left: $pv-spacing-0;
      }
    }

    .e-pv-blazor-organize-window.e-dialog .e-dlg-header {
      @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
        font-weight: $pv-font-weight-medium;
      }
    }

    .e-pv-blazor-organize-window .e-footer-content .e-btn.e-pv-organize-total-page-button {
      @if $skin-name == 'FluentUI' {
        border-color: transparent;
      }
    }

    .e-pv-organize-tile-view-wrapper {
      width: $pv-height-p100;
      height: calc($pv-height-p100 - $pv-height-48);
      position: relative;
    }

    .e-pv-organize-tile-view.e-pv-thumbnail-row {
      height: $pv-height-p100;

      .e-pv-organize-import-image-wrapper::after,
      .e-pv-organize-import-image-wrapper::before {
        z-index: 0;
      }

      .e-pv-organize-import-download-icon {
        z-index: 1;
      }
    }
  }

  .e-pdfviewer .e-checkbox-wrapper .e-frame + .e-label,
  .e-pdfviewer .e-css.e-checkbox-wrapper .e-frame + .e-label {
    margin-right: $pv-textsearch-textbox-margin-right;
  }

  .e-toolbar-right .e-pv-import-pages .e-tbar-btn{
    font-size: $pv-text-sm;
  }

  .e-pv-blazor-organize-window .e-pv-import-pages {
    margin-right: $pv-spacing-8 !important;/* stylelint-disable-line declaration-no-important */
  }

  div > .e-pv-bookmark-icon.e-pv-icon.e-right {
    float: $pv-bookmark-icon-float;
    font-size: $pv-bookmark-icon-font-size;
    padding-left: $pv-bookmark-icon-rtl-padding;
    padding-right: $pv-bookmark-icon-rtl-padding;
    position: $pv-bookmark-icon-rtl-position;
    @if $skin-name == 'Material3' {
      font-size: $pv-text-base;
      padding-left: $pv-spacing-12;
      padding-right: $pv-spacing-12;
    }
  }

  .e-pdfviewer .e-treeview .e-list-item {
    word-break: break-word;
    @if $skin-name == 'fluent2' {
      white-space: normal !important;/* stylelint-disable-line declaration-no-important */
    }
    @else{
      white-space: pre-wrap;
    }
  }

  .e-pdfviewer .e-treeview .e-list-text {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      line-height: $pv-line-height-20;
    }
    width: $pv-width-p100;
  }

  .e-pdfviewer .e-treeview.e-fullrow-wrap .e-icon-collapsible,
  .e-pdfviewer .e-treeview.e-fullrow-wrap .e-icon-expandable,
  .e-pdfviewer .e-treeview.e-fullrow-wrap .e-input,
  .e-pdfviewer .e-treeview.e-fullrow-wrap .e-list-url {
    margin-top: $pv-bookmark-expandable-icon-margin-top;
    position: absolute;
  }

  .e-pdfviewer .e-treeview .e-list-item.e-hover:not(.e-active) > .e-fullrow {
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-treeview-item-hover-bg-color;
      border-color: $pv-treeview-item-hover-bg-color;
    }
  }

  .e-pdfviewer .e-editable-inline {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding: $pv-spacing-7 $pv-spacing-8 $pv-spacing-48;
    }
    @else {
      padding: $pv-spacing-7 $pv-spacing-8 $pv-spacing-42;
    }
  }

  .e-pv-comment-textbox {
    min-height: $pv-height-22;
  }

  .e-pdfviewer .e-editable-value-wrapper {
    color: $pv-comment-font-color;
    line-height: $pv-line-height-normal;
    min-height: $pv-height-22;
    padding: $pv-spacing-2 $pv-spacing-8 $pv-spacing-3;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      color: $content-text-color-alt2;
    }
    font-size: $pv-text-sm;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      font-size: $pv-text-xs;
    }
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
      line-height: $pv-line-height-20;
    }
  }

  .e-pdfviewer .e-pv-comment-textbox .e-editable-value-wrapper {
    color: $pv-comment-font-color;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      color: $content-text-color-alt2;
    }
    font-size: $pv-text-sm;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      font-size: $pv-text-xs;
    }
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
    }
    line-height: $pv-line-height-normal;
    min-height: $pv-height-24;
    padding: $pv-spacing-2 $pv-spacing-8 $pv-spacing-3 $pv-spacing-32;
  }

  .e-pv-comment-textbox.e-inplaceeditor .e-component-group,
  .e-pv-new-comments-div.e-inplaceeditor .e-component-group {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      margin-bottom: $pv-spacing-0;
    }
  }

  .e-pv-reply-div.e-pv-comments-leave.e-focused,
  .e-pv-comments-div.e-focused {
    border: $pv-comments-div-focus-border;
    background: $pv-comments-div-focus-background;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-action-buttons,
  .e-pdfviewer .e-pv-reply-div .e-inplaceeditor .e-editable-action-buttons {
    float: right;
    @if $skin-name != 'fluent2' {
      padding-bottom: $pv-spacing-7;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      margin-top: $pv-spacing-0;
      padding-top: $pv-spacing-10;
    }
    @else if $skin-name != 'fluent2' {
      padding-top: $pv-spacing-5;
    }
    position: relative;
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      right: 0;
    }
    @else {
      right: 8px;
    }
  }

  .e-pv-comment-title-container,
  .e-pv-reply-title-container {
    height: $pv-height-36;
  }

  .e-pv-more-options-button.e-btn {
    @if ($skin-name == 'bootstrap5.3') {
      color: $pv-icon-color;
    }
    background: $pv-thumbnail-view-button-background;
    border: $pv-thumbnail-view-button-border;
    border-radius: $pv-thumbnail-border-radius;
    box-shadow: $pv-thumbnail-view-button-box-shadow;
    float: right;
    padding: $pv-more-option-button-padding;
  }

  .e-pv-rtl .e-pv-more-options-button.e-btn {
    float: left;
    padding-left: $pv-spacing-7;
  }

  .e-pdfviewer .e-editable-inline .e-btn.e-outline.e-primary,
  .e-pdfviewer .e-editable-inline .e-btn.e-outline {
    @if ($skin-name != 'bootstrap5' and $skin-name != 'Material3' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2') {
      border-color: transparent;
    }
  }

  .e-pdfviewer .e-editable-inline .e-btn.e-outline.e-primary {
    @if ($skin-name == 'fluent2') {
      border: $pv-border-1 solid $primary-border-color;
      background-color: $primary-bg-color;
      color: $primary-text;
    }
  }

  .e-pdfviewer .e-editable-inline .e-btn.e-outline {
    @if ($skin-name == 'fluent2') {
      border: $pv-border-1 solid $secondary-border-color;
      background-color: $secondary-bg-color;
      color: $secondary-text-color;
    }
  }

  .e-pdfviewer .e-editable-inline .e-editable-form {
    margin-bottom: $pv-spacing-1;
  }

  .e-pdfviewer .e-editable-inline .e-clear-icon {
    @if $skin-name == 'tailwind3' {
      padding-right: $pv-spacing-8;
    }
    @else {
      padding-right: $pv-spacing-2;
    }
  }

  .e-pdfviewer .e-btn-cancel {
    font-size: $pv-text-sm;
    padding-left: $pv-spacing-5;
    padding-right: $pv-spacing-5;
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
    }
  }

  .e-pdfviewer .e-btn-save {
    font-size: $pv-text-sm;
    margin-right: $pv-spacing-12;
    padding-left: $pv-spacing-7;
    padding-right: $pv-spacing-7;
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
      padding-left: $pv-spacing-12;
      padding-right: $pv-spacing-12;
    }
  }

  .e-pdfviewer .e-btn-save.e-outline.e-primary:disabled {
    @if ($skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'Material3' and $skin-name != 'tailwind3') {
      background-color: $pv-save-button-bg-color;
      border-radius: $pv-radius-2;
      color: $pv-save-button-color;
    }
    @if $skin-name == 'fluent2' {
      border-radius: $pv-radius-4;
    }
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    @if $skin-name == 'tailwind3' {
      box-shadow: $pv-accordian-item-panel-content-box-shadow;
    }
    @else{
      box-shadow: 0 0 0 8px $pv-comment-panel-bg inset;
    }
    padding: $pv-spacing-8;
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-header {
    line-height: $pv-line-height-32;
    min-height: $pv-height-32;
    @if $skin-name == 'Material3' {
      box-shadow: none;
      border: $pv-border-1 solid rgba($border-light);
      border-width: $pv-border-1 $pv-border-0;
    }
    @if $skin-name == 'bootstrap5.3' {
      box-shadow: none;
      margin: $pv-spacing-4;
      background: transparent !important;/* stylelint-disable-line declaration-no-important */
      border-color: transparent !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-header:has(.e-expand-icon) {
    @if $skin-name == 'bootstrap5.3' {
      background-color: var(--color-sf-primary-lighter) !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-contextmenu-wrapper .e-pv-context-menu .e-menu-item {
    height: $pv-height-38;
  }

  .e-pv-comment-panel,
  .e-pv-form-designer-property-panel,
  .e-pv-blazor-redaction-property-panel-mobile,
  .e-pv-redaction-property-panel-mobile,
  .e-pv-redaction-page-mark-panel {
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
    }
    background-color: $pv-comment-panel-bg;
    border: $pv-sidebar-toolbar-border;
    border-width: $pv-border-1 $pv-border-1 $pv-border-0;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    top: 57px;
    width: $pv-width-300;
    z-index: $pv-sidebar-toolbar-z-index;
  }

  .e-pv-comment-panel-title-container,
  .e-pv-form-designer-panel-title-container,
  .e-pv-redaction-panel-title-container,
  .e-pv-redaction-panel-title-container {
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
      border-style: solid;
      border-width: $pv-border-0 $pv-border-0 $pv-border-1 $pv-border-1;
    }
    @else {
      background-color: $pv-comment-panel-bg;
      border-style: double;
      border-width: $pv-border-0 $pv-border-1 $pv-border-1 $pv-border-0;
    }
    height: $pv-height-45;
    position: relative;
    border-color: $pv-comment-panel-border-color;
  }
  .e-pv-blazor-redaction-toolbar {
    border-width: $pv-border-0;
  }

  .e-pv-comment-panel-title,
  .e-pv-form-designer-title {
    color: $pv-comment-font-color;
    font-size: $pv-text-sm;
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
      border: $border-light;
      border-width: $pv-border-0 $pv-border-0 $pv-border-1 $pv-border-1;
      font-size: $pv-text-base;
      font-weight: $pv-comment-tile-font-weight;
      line-height: $pv-line-height-24;
      padding: $pv-spacing-8 $pv-spacing-0 $pv-spacing-8 $pv-spacing-12;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      font-size: $pv-text-base;
      font-weight: $pv-font-weight-medium;
    }
    @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2') {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name != 'Material3' {
      left: 15px;
      top: 14px;
    }
    position: absolute;
    text-align: left;
  }

  .e-pv-rtl .e-pv-comment-panel-title {
    @if $skin-name != 'Material3' {
      right: 15px;
      justify-content: flex-end;
      left: 0;
    }
  }

  .e-pv-form-designer-title {
    @if $skin-name == 'Material3' {
      padding: $pv-spacing-0;
    }
  }

  .e-pv-mobile-comments-container .e-pv-comment-panel-title {
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
      border: $border-light;
      border-width: $pv-border-0 $pv-border-0 $pv-border-1 $pv-border-1;
      font-size: $pv-text-base;
      font-weight: $pv-comment-tile-font-weight;
      line-height: $pv-line-height-16;
      padding: $pv-spacing-0;
      left: 15px;
      top: 14px;
      position: absolute;
      text-align: left;
    }
  }

  .e-pv-comment-panel-title-close-div.e-btn {
    background: $pv-title-close-background;
    border: $pv-title-close-border;
    box-shadow: $pv-title-close-box-shadow;
    @if $skin-name == 'bootstrap5.3' {
      color: $pv-icon-color;
    }
    @if $skin-name == 'bootstrap4' {
      color: $pv-title-close-color;
    }
    @if $skin-name == 'fluent2' {
      color: var(--color-sf-secondary-text-color);
    }
    height: $pv-title-close-height;
    position: $pv-title-close-position;
    right: 11px;
    top: 5px;
    width: $pv-title-close-width;
    @if $skin-name == 'FluentUI' {
      padding: $pv-spacing-4;
    }
  }

  .e-pv-rtl .e-pv-comment-panel-title-close-div.e-btn  {
    left: 11px;
  }

  @if $skin-name == 'Material3' {
    .e-pv-comment-panel-title-container .e-pv-more-icon .e-pv-icon {
      font-size: $pv-text-base;
    }
  }

  .e-pv-title-close-icon {
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
      color: $pv-comment-text-color;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
      color: $icon-color;
    }
    @if ($skin-name == 'tailwind3') {
      color: $close-icon-color;
    }
  }

  .e-pv-comments-panel-text {
    font-size: $pv-font-size-15;
    padding-left: $pv-spacing-85;
    color: var(--color-sf-content-text-color-alt1);
  }

  .e-pv-comments-content-container,
  .e-pv-form-designer-content-container,
  .e-pv-redaction-content-container {
    background-color: $pv-comments-content-container-bg;
    border-color: $pv-comment-panel-border-color;
    border-style: double;
    border-width: $pv-border-0 $pv-border-1 $pv-border-1 $pv-border-0;
    height: calc($pv-height-p100 - $pv-height-45);
    overflow: auto;
    @if $skin-name == 'Material3' {
      background: $content-bg-color-alt2;
    }
  }

  .e-pv-comments-container {
    background-color: $pv-comment-panel-bg;
    border-radius: $pv-radius-2;
    left: 7px;
    right: 7px;
    @if $skin-name == 'fluent2' {
      padding: $pv-spacing-2;
    }
  }

  .e-pv-comments-border {
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'FluentUI' {
      border: $pv-border-2;
      border-color: $pv-comment-panel-bottom-color;
      border-radius: $pv-radius-4;
      border-style: groove;
    }
    @if $skin-name == 'tailwind' {
      border: $pv-border-1 solid $border-light;
      border-radius: $pv-radius-2;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      border: $pv-border-1 solid $border-light;
      border-radius: $pv-radius-2;
    }
    @if $skin-name == 'Material3' {
      border: $pv-border-1 solid rgba($border-light);
      border-radius: $pv-radius-4;
    }
  }

  .e-pv-comment-title {
    color: $pv-comment-text-color;
    padding-left: $pv-spacing-32;
    padding-top: $pv-comment-title-padding-top;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $pv-comment-tile-text-color;
    }
    font-size: $pv-text-sm;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
      font-size: $pv-text-xs;
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'fabric' {
      color: $pv-comments-div-focus-border;
    }
    @if $skin-name == 'bootstrap4' {
      font-size: $pv-input-active-color;
    }
    @if $skin-name == 'bootstrap' {
      color: $pv-sidebar-title-color;
    }
    @if $skin-name == 'FluentUI' {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'fluent2' {
      font-weight: normal;
      padding-left: $pv-spacing-36;
    }
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
      padding-left: $pv-spacing-40;
      padding-top: $pv-comment-title-padding-top;
      padding-bottom: $pv-spacing-30;
      height: $pv-height-18;
    }
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .e-pv-rtl .e-pv-comment-title {
    float: right;
    position: unset;
    padding-right: $pv-spacing-4;
  }

  .e-pv-reply-title {
    color: $pv-comment-text-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      color: $pv-comment-tile-text-color;
    }
    font-size: $pv-text-sm;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
      font-size: $pv-text-xs;
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'fabric' {
      color: $pv-comments-div-focus-border;
    }
    @if $skin-name == 'bootstrap4' {
      font-size: $pv-input-active-color;
    }
    @if $skin-name == 'bootstrap' {
      color: $pv-sidebar-title-color;
    }
    @if $skin-name == 'FluentUI' {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
    }
    @if $skin-name == 'fluent2' {
      font-weight: normal;
    }
    padding-left: $pv-spacing-8;
    padding-top: $pv-comment-title-padding-top;
    position: absolute;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .e-pv-rtl .e-pv-reply-title {
    padding-right: $pv-spacing-8;
    padding-left: $pv-spacing-unset;
  }

  .e-pv-comments-hover {
    @if ($theme-name != 'fluent2-highcontrast') {
      background-color: $pv-comments-hover-bg;
    }
  }

  .e-pv-comments-select {
    @if $skin-name == 'FluentUI' {
      background-color: $content-bg-color-selected;
    }
    @else {
      background-color: $pv-comment-panel-bg;
    }
  }

  .e-pv-comments-select .e-pv-comment-textbox .e-editable-value-wrapper {
    color: $pv-comment-color;
  }

  .e-pv-comments-leave {
    background-color: $pv-comment-panel-bg;
  }

  .e-pdfviewer .e-accordion {
    @if $skin-name == 'Material3' {
      background: $pv-comments-content-container-bg;
      border-radius: $pv-radius-0;
      border-width: $pv-border-0;
    }
    @else {
      background-color: $pv-comments-content-container-bg;
      border: transparent;
    }
  }

  .e-menu-wrapper.e-custom-scroll.e-lib.e-keyboard.e-pv-stamp {
    border: $pv-border-0;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2') {
      background-color: $transparent;
    }
    @if $skin-name != 'Material3' {
      display: block;
    }
  }

  .e-menu-container.e-pv-custom-annotation-stamp-container {
    @if $skin-name == 'highcontrast' {
      border: $pv-border-0;
      display: block;
    }
  }

  .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup.e-popup-open ul {
    @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
      padding-bottom: $pv-spacing-6;
      padding-top: $pv-spacing-6;
    }
    @else {
      padding-bottom: $pv-spacing-6;
      padding-top: $pv-spacing-17;
    }
    @if $skin-name == 'tailwind3' {
      padding-top: $pv-spacing-6;
    }
  }

  .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
    @if ($skin-name == 'fluent2') {
      line-height: $pv-line-height-36;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
  .e-pv-stamp-template-container .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
    @if ($skin-name == 'fluent2') {
      line-height: $pv-line-height-36;
    }
  }

  .e-bigger .e-pv-blazor-main-container .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
  .e-bigger .e-pv-blazor-main-container .e-pv-stamp-template-container .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
    @if ($skin-name == 'fluent2') {
      line-height: $pv-line-height-55;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-contextmenu-container.e-menu-container ul .e-menu-item .e-caret {
    @if ($skin-name == 'fluent2') {
      margin-top: $pv-spacing-0;
    }
  }

  .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
  .e-pv-annotation-calibrate-container.e-btn.e-icon-btn {
    @if ($skin-name == 'fluent2') {
      padding-top: $pv-spacing-8;
    }
  }

  .e-pv-formdesigner-toolbar .e-pv-annotation-handwritten-container.e-btn.e-icon-btn {
    @if ($skin-name == 'fluent2') {
      padding-top: $pv-spacing-4;
    }
  }

  .e-pv-annotation-handwritten-container.e-dropdown-popup ul {
    @if ($skin-name == 'FluentUI' or $skin-name == 'highcontrast' or $skin-name == 'tailwind') {
      padding: $pv-spacing-8 $pv-spacing-0;
    }
  }

  .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
    margin-top: $pv-stamp-icon-margin-top;
    @if $skin-name != 'fluent2' and $skin-name != 'tailwind3' {
      padding-left: $pv-spacing-7;
    }
    @if $skin-name == 'fabric' {
      padding-left: $pv-spacing-10;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      padding-left: $pv-spacing-4;
    }
  }

  .e-pv-annotation-stamp-container .e-rtl.e-menu-wrapper ul .e-menu-item .e-menu-icon {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      margin-left: $pv-spacing-1;
    }
  }

  .e-pdfviewer .e-inplaceeditor,
  .e-pv-radio-btn + span,
  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper {
    display: block;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper .e-editable-value {
    border-bottom: $pv-border-0;
    word-break: break-word;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-container .e-editable-value {
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
    }
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-wrapper:hover {
    background: transparent;
  }

  .e-pdfviewer .e-inplaceeditor .e-editable-value-container {
    background: transparent;
    width: $pv-width-p100;
    max-width: $pv-width-p100;
  }

  .e-pdfviewer .e-pv-comments-div .e-inplaceeditor .e-editable-value-container .e-editable-value {
    margin-left: $pv-spacing-32;
  }

  .e-pdfviewer .e-pv-rtl .e-pv-comments-div .e-inplaceeditor .e-editable-value-container .e-editable-value {
    margin-right: $pv-spacing-28;
  }

  .e-pv-status-div {
    height: $pv-height-20;
    left: 8px;
    position: relative;
    width: $pv-width-20;
  }

  .e-pv-rtl .e-pv-status-div {
    left: -8px;
  }

  .e-pv-status-container {
    padding-bottom: $pv-spacing-5;
    padding-top: $pv-spacing-2;
  }

  .e-pdfviewer .e-input-group.e-control-wrapper.e-editable-elements.e-input-focus {
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
      caret-color: $pv-comment-text-cursor-color;
    }
  }

  .e-pv-reply-div {
    margin-top: $pv-spacing-3;
  }

  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header,
  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
    background: $pv-comment-panel-bg;
    @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
      border: $pv-border-1 solid $pv-comment-panel-border-color;
    }
    @if $skin-name == 'Material3' {
      border-width: $pv-border-1 $pv-border-0;
    }
  }

  .e-pdfviewer .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus,
  .e-pdfviewer .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: $pv-comment-panel-bg;
    box-shadow: none;
  }

  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon,
  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
    @if $skin-name == 'tailwind3' {
      color: $primary;
    }
    @else {
      color: $pv-comment-text-color;
    }
    font-size: $pv-text-sm;
    @if $skin-name == 'FluentUI' {
      font-weight: $pv-comment-tile-font-weight;
    }
    @if $skin-name == 'fluent2' {
      font-weight: normal;
    }
    @if $skin-name == 'Material3' {
      font-weight: $font-weight-normal;
      letter-spacing: $pv-letter-spacing-0-24;
      line-height: $pv-line-height-20;
      padding: $pv-spacing-0 $pv-spacing-0 $pv-spacing-9 $pv-spacing-0;
    }
  }

  .e-pdfviewer .e-accordion .e-acrdn-item.e-select.e-pv-accordion-container.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
  .e-pdfviewer .e-accordion .e-acrdn-item.e-select.e-pv-accordion-container.e-expand-state > .e-acrdn-header .e-acrdn-header-content,
  .e-pdfviewer .e-pv-accordion-container.e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon {
    @if $skin-name == 'highcontrast' {
      color: $pv-comment-text-color;
    }
  }
  .e-pdfviewer .e-accordion .e-acrdn-item.e-select.e-pv-accordion-container.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
    @if $skin-name == 'highcontrast' {
      color: $pv-signature-font-color;
    }
  }
  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
  .e-pdfviewer .e-accordion .e-acrdn-item .e-toggle-icon {
    @if $skin-name == 'bootstrap5.3' {
      color: var(--color-sf-content-text-color) !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    @if $skin-name == 'fluent2' {
      line-height: $pv-line-height-32;
    }
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-toggle-icon {
    @if $skin-name == 'fluent2' {
      padding-top: $pv-spacing-10;
    }
  }

  .e-content-placeholder.e-pdfviewer.e-placeholder-pdfviewer {
    background-size: 100%;
  }

  .e-pdfviewer .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    line-height: $pv-line-height-normal;
  }

  .e-pdfviewer .e-pv-signature-apperance .e-checkbox-wrapper {
    padding-bottom: $pv-signature-appearance-checkbox;
    @if $skin-name == 'Material3' {
      margin-top: $pv-spacing-12;
    }
    @else if $skin-name == 'fluent2' {
      margin-top: $pv-spacing-20;
    }
    @else{
      margin-top: $pv-spacing-10;
    }
  }

  .e-pdfviewer .e-pv-signature-dialog-blazor-height .e-pv-signature-apperance .e-checkbox-wrapper {
    @if $skin-name == 'fluent2' {
      margin-top: $pv-spacing-10;
    }
  }

  .foreign-object .e-pdfviewer-signatureformfields-signature + .e-pdfViewer-signIcon {
    display: none;
  }

  .foreign-object .e-pdfviewer-signatureformfields + .e-pdfViewer-signIcon {
    display: block;
  }

  .e-pdfviewer .e-pv-signature-window .e-footer-content {
    float: left;
  }
  .e-pv-signature-dialog-height .e-pv-clearbtn
  {
    float: left;
    @if $skin-name != 'Material3' {
      height: $pv-height-30;
      min-height: $pv-height-30;
    }
    @if $skin-name == 'fluent2' {
      height: $pv-height-32;
      min-height: $pv-height-32;
    }
  }

  .e-pv-signature-dialog-height .e-pv-clearbtn:disabled,
  .e-pv-signature-dialog-height .e-pv-createbtn:disabled {
    @if ($skin-name == 'fluent2') {
      border-color: var(--color-sf-primary-border-color-disabled) !important;/* stylelint-disable-line declaration-no-important */
    }
    @if ($skin-name == 'Material3') {
      color: $secondary-text-color-disabled !important;/* stylelint-disable-line declaration-no-important */
    }
    @if ($skin-name == 'material') {
      color: rgba($grey-black, .26) !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-signature-dialog-height .e-pv-cancelbtn{
    @if $skin-name != 'Material3' {
      height: $pv-height-32;
      min-height: $pv-height-32;
    }
  }

  .e-pv-extractbtn.e-primary {
    @if ($skin-name == 'fluent2') {
      border-color: var(--color-sf-primary-border-color-disabled) !important;/* stylelint-disable-line declaration-no-important */
    }
    @if ($skin-name == 'Material3') {
      color: $secondary-text-color-disabled;
    }
    @if ($skin-name == 'material') {
      color: rgba($grey-black, .26);
    }
  }

  .e-pv-signature-dialog-height .e-pv-createbtn{
    @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
      height: $pv-height-32;
      min-height: $pv-height-32;
    }
    @else if $skin-name != 'Material3' {
      height: $pv-height-30;
      min-height: $pv-height-30;
    }
  }

  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-bold.e-pv-tbar-btn.e-tooltip.textprop-option-active,
  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-italic.e-pv-tbar-btn.e-tooltip.textprop-option-active,
  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-strikeout.e-pv-tbar-btn.e-tooltip.textprop-option-active,
  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-underlinetext.e-pv-tbar-btn.e-tooltip.textprop-option-active,
  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-left-align.e-pv-tbar-btn.e-tooltip.textprop-option-active,
  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-right-align.e-pv-tbar-btn.e-tooltip.textprop-option-active,
  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-center-align.e-pv-tbar-btn.e-tooltip.textprop-option-active,
  .e-tbar-btn.e-control.e-btn.e-lib.e-icon-btn.e-pv-justfiy-align.e-pv-tbar-btn.e-tooltip.textprop-option-active {
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2' {
      background: $pv-signature-footer-color;
      border-color: $pv-signature-footer-color;
    }
    @else if ($skin-name == 'fluent2'){
      background: $pv-item-selection-background-color;
      border-color: $pv-annotation-dropdown-border-color-hover;
    }
    @else {
      background: $secondary-bg-color-pressed;
      border-color: $secondary-bg-color-pressed;
      color: $secondary-text-color-pressed;
    }
  }

  .e-pv-annotation-textprop-container .e-pv-bold-container .textprop-option-active,
  .e-pv-annotation-textprop-container .e-pv-italic-container .textprop-option-active,
  .e-pv-annotation-textprop-container .e-pv-strikeout-container .textprop-option-active,
  .e-pv-annotation-textprop-container .e-pv-underlinetext-container .textprop-option-active,
  .e-pv-annotation-textalign-container .e-pv-left-align-container .textprop-option-active,
  .e-pv-annotation-textalign-container .e-pv-right-align-container .textprop-option-active,
  .e-pv-annotation-textalign-container .e-pv-center-align-container .textprop-option-active,
  .e-pv-annotation-textalign-container .e-pv-justfiy-align-container .textprop-option-active {
    @if $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'fluent2' {
      background: $pv-item-selection-background-color;
      border-color: $pv-signature-footer-color;
    }
    @else if ($skin-name == 'fluent2'){
      background: $pv-item-selection-background-color;
      border-color: $pv-annotation-dropdown-border-color-hover;
    }
    @else {
      background: $secondary-bg-color-pressed;
      border-color: $secondary-bg-color-pressed;
      color: $secondary-text-color-pressed;
    }
  }

  .e-pv-annotation-textprop-container .e-pv-bold-container .textprop-option-active .e-pv-bold-icon,
  .e-pv-annotation-textprop-container .e-pv-italic-container .textprop-option-active .e-pv-italic-icon,
  .e-pv-annotation-textprop-container .e-pv-strikeout-container .textprop-option-active .e-pv-strikeout-icon,
  .e-pv-annotation-textprop-container .e-pv-underlinetext-container .textprop-option-active .e-pv-underlinetext-icon,
  .e-pv-annotation-textalign-container .e-pv-left-align-container .textprop-option-active .e-pv-left-align-icon,
  .e-pv-annotation-textalign-container .e-pv-right-align-container .textprop-option-active .e-pv-right-align-icon,
  .e-pv-annotation-textalign-container .e-pv-center-align-container .textprop-option-active .e-pv-center-align-icon,
  .e-pv-annotation-textalign-container .e-pv-justfiy-align-container .textprop-option-active .e-pv-justfiy-align-icon {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      color: $secondary-text-color-pressed;
    }
  }

  .e-pv-comment-panel-resizer.e-left {
    @if $skin-name == 'bootstrap4' {
      border-left: $pv-border-1 solid $pv-sidebar-resizer-border-color;
    }
    left: 300px;
  }

  .e-pv-comment-panel-resizer.e-right {
    @if $skin-name == 'bootstrap4' {
      border-right: $pv-border-1 solid $pv-sidebar-resizer-border-color;
    }
    right: 300px;
  }

  .e-pv-align {
    cursor: pointer;
    float: right;
    font-size: $pv-text-xl;
    margin-right: $pv-spacing-16;
    margin-top: $pv-signature-delete-icon-margin-top;
  }

  .e-pv-align-border {
    border: $pv-signature-border-color;
    border-radius: $pv-border-5;
    cursor: pointer;
    display: inline-block;
    width: $pv-width-170;
  }

  .e-pv-align-border-div {
    @if $skin-name == 'highcontrast' {
      background-color: $pv-high-contrast-signature-bg;
      color: $pv-high-contrast-signature-text;
    }
  }

  .e-pv-font-sign {
    border: $pv-border-1 solid $pv-sidebar-bookmark-title-color;
    border-radius: $pv-border-5;
    display: inline-block;
    font-size: $pv-font-size-13;
    padding-top: $pv-spacing-40;
    text-align: center;
    word-wrap: break-word;
    @if $skin-name == 'FluentUI' {
      max-width: $pv-width-300;
      padding-top: $pv-spacing-36;
    }
    @if $skin-name=='fluent2' {
      border: $pv-sidebar-toolbar-border;
      margin-left: $pv-spacing-20;
      margin-top: $pv-spacing-18;
    }
    @else{
      height: $pv-height-88;
      width: $pv-width-311;
      margin: $pv-spacing-15;
    }
    @if $skin-name == 'Material3' {
      border: $pv-border-1 dashed rgba($primary);
      border-radius: $pv-radius-4;
      background: $content-bg-color;
      color: $content-text-color;
      font-weight: $font-weight-normal;
    }
  }

  .e-pv-font-appearance-style .e-pv-font-sign {
    @if $skin-name=='fluent2' {
      height: $pv-height-98;/* stylelint-disable-line declaration-no-important */
      width: $pv-width-p45;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-selected-fontdiv{
    @if $skin-name=='fluent2' {
      border-color: $primary !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      color: $white;
      height: $pv-height-32;
      line-height: $pv-line-height-32;
    }
    @if $skin-name == 'bootstrap5.3' {
      color: var(--color-sf-secondary-text-color-hover) !important;/* stylelint-disable-line declaration-no-important */
      height: $pv-height-32;
      line-height: $pv-line-height-32;
    }
    @else {
      color: $pv-icon-color;
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      height: $pv-height-32;
      line-height: $pv-line-height-32;
      padding-left: $pv-spacing-8;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-menu-icon {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      font-size: $pv-text-base;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      font-size: $pv-text-sm;
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-menu-icon {
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind') {
      width: $pv-width-1-5em;
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-menu-icon,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-caret {
    @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      border-radius: $pv-radius-4;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2') {
      color: $pv-icon-color;
      height: $pv-height-32;
      @if ($skin-name != 'fluent2') {
        line-height: $pv-line-height-32;
      }
    }
    @else {
      color: $pv-icon-color;
    }
  }

  .e-pv-mobile-annotation-toolbar .e-toolbar-items .e-hscroll-bar {
    @if ($skin-name == 'FluentUI') {
      overflow-y: hidden;
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused:hover,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-selected {
    @if $skin-name == 'bootstrap5' {
      background: $secondary-bg-color-pressed;
    }
    @if $skin-name == 'bootstrap5.3' {
      background: $secondary-bg-color-pressed;
      color: var(--color-sf-secondary-text-color-hover) !important;/* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'bootstrap4' {
      background: $pv-annotation-dropdown-background-color-hover;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-wrapper ul,
  .e-pv-custom-annotation-stamp-container.e-menu-container ul {
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-annotation-dropdown-background-color;
    }
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused:hover .e-menu-icon,
  .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item.e-focused:hover .e-caret,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused:hover .e-menu-icon,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-focused:hover .e-caret,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-selected .e-menu-icon,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item.e-selected .e-caret {
    @if $skin-name == 'bootstrap4' {
      color: $pv-icon-color-hover;
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      color: $white;
    }
    @if $skin-name == 'fluent2-highcontrast' {
      color: var(--color-sf-toolbar-icon-color);
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item:hover .e-menu-icon,
  .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item:hover .e-caret
  {
    @if $skin-name == 'fluent2' {
      color: var(--color-sf-toolbar-icon-color);
    }
  }

  .e-pv-stamp-template-container .e-menu-container .e-menu {
    background-color: $pv-annotation-dropdown-background-color;
    border-color: $pv-annotation-dropdown-border-color;
  }

  .e-pv-custom-annotation-stamp-container.e-menu-container .e-ul .e-menu-item.e-selected,
  .e-pv-custom-annotation-stamp-container.e-menu-container.e-menu-container .e-ul .e-menu-item.e-focused {
    @if $skin-name == 'bootstrap4' {
      background-color: $pv-comment-text-cursor-color;
      color: $pv-icon-color-hover;
      outline: 0 solid $pv-comment-text-cursor-color;
      outline-offset: 0;
    }
  }

  .e-pv-custom-annotation-thickness-container,
  .e-pv-custom-annotation-opacity-container {
    @if $skin-name == 'Material3'{
      background: $pv-annotation-dropdown-background-color;
      border: $pv-annotation-dropdown-border-color;
    }
    @else {
      background-color: $pv-annotation-dropdown-background-color;
      border-color: $pv-annotation-dropdown-border-color;
    }
  }

  .e-dropdown-popup.e-pv-custom-annotation-thickness-container,
  .e-dropdown-popup.e-pv-custom-annotation-opacity-container {
    @if $skin-name == 'Material3'{
      background: $pv-sidebar-content-background;
    }
  }

  .e-pdfviewer-signatureformfields.e-pv-signature-focus,
  .e-pdfviewer-signatureformfields-signature.e-pv-signature-focus {
    outline: $pv-print-popup-container-background-color dotted 2px;
  }

  .e-pv-checkbox-container,
  .e-pv-radiobtn-container {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    display: block;
    margin-bottom: $pv-spacing-0;
    position: relative;
    user-select: none;
  }

  .e-pv-text-selection-none {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .e-pv-checkbox-container input {
    cursor: pointer;
    height: $pv-height-0;
    opacity: 0;
    position: absolute;
    width: $pv-width-0;
  }

  .e-pv-checkbox-div {
    border: $pv-form-field-checkbox-container;
    display: inline;
    height: $pv-height-p100;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: $pv-width-p100;
  }

  .e-pv-cb-checked {
    border: $pv-form-field-checkbox-checked;
    border-left-color: transparent;
    border-top-color: transparent;
    border-width: $pv-form-field-checkbox-border-width;
    position: absolute;
    transform: rotate(45deg);
  }

  .e-pv-cb-unchecked {
    border: $pv-border-1;
    border-width: $pv-border-1;
  }

  .e-pv-radiobtn-container input {
    cursor: pointer;
    opacity: 0;
    position: absolute;
  }

  .e-pv-radiobtn-div {
    border: $pv-border-1 solid $pv-form-checkbox-border-color;
    border-radius: $pv-border-radius-50p;
    height: $pv-height-p100;
    left: $pv-form-field-size;
    position: absolute;
    top: $pv-form-field-size;
    width: $pv-width-p100;
  }

  .e-pv-radio-btn {
    border: $pv-border-0;
    clip: rect(0 0 0 0);
    height: $pv-height-1;
    overflow: hidden;
    padding: $pv-spacing-0;
    position: absolute;
    width: $pv-width-1;
  }

  .e-pv-radio-btn + .e-pv-radiobtn-span::before {
    content: '';
    display: block;
    height: $pv-height-inherit;
    width: $pv-width-inherit;
  }

  .e-pv-radio-btn:checked + .e-pv-radiobtn-span::before {
    background: $pv-form-checkbox-border-color;
    border-radius: $pv-border-radius-50p;
  }

  .e-pv-properties-text-edit-prop,
  .e-pv-properties-visibility-style-prop,
  .e-pv-properties-font-items-container {
    display: flex;
    justify-content: space-evenly;
  }

  .e-pv-default-tab .e-pv-properties-font-items-container {
    @if ($skin-name == 'fluent2') {
      justify-content: space-evenly;
    }
    @else {
      justify-content: space-between;
    }
  }

  .e-pv-properties-form-field-name-main-div,
  .e-pv-properties-form-field-value-main-div {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'FluentUI') {
      padding-right: $pv-spacing-12;
    }
    @else {
      padding-right: $pv-spacing-15;
    }
  }

  .e-pv-properties-form-field-name-main-div,
  .e-pv-properties-form-field-tooltip-main-div,
  .e-pv-properties-form-field-value-main-div,
  .e-pv-properties-form-field-visibility-main-div {
    @if $skin-name == 'FluentUI' {
      width: $pv-width-232;
    }
    @else {
      width: $pv-width-285;
    }
  }

  .e-pv-properties-form-field-name-main-div .e-float-text,
  .e-pv-properties-form-field-tooltip-main-div .e-float-text,
  .e-pv-properties-form-field-value-main-div .e-float-text,
  .e-pv-properties-form-field-visibility-main-div .e-float-text {
    @if $skin-name == 'fluent2' {
      padding-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-text-edit-prop {
    @if $skin-name == 'FluentUI' {
      padding-top: $pv-spacing-36;
    }
    @else {
      padding-top: $pv-spacing-20;
    }
  }

  .e-pv-default-tab .e-pv-properties-text-edit-prop {
    padding-top: $pv-spacing-20;
  }

  .e-pv-properties-visibility-style-prop {
    @if $skin-name == 'FluentUI' {
      padding-bottom: $pv-spacing-12;
      padding-top: $pv-spacing-12;
    }
    @if $skin-name == 'Material3' {
      padding-top: $pv-spacing-16;
    }
    @else {
      padding-bottom: $pv-spacing-10;
      padding-top: $pv-spacing-20;
    }
  }

  .e-pv-properties-checkbox-main-div-prop {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: $pv-spacing-20;
  }

  .e-pv-default-tab .e-pv-properties-checkbox-main-div-prop {
    padding-top: $pv-spacing-12;
  }

  .e-pv-bold-icon-div,
  .e-pv-italic-icon-div,
  .e-pv-strikeout-icon-div,
  .e-pv-underlinetext-icon-div,
  .e-pv-left-align-icon-div,
  .e-pv-center-align-icon-div,
  .e-pv-right-align-icon-div {
    padding: $pv-formfield-properties-icon-align-padding;
    @if ($skin-name == 'fluent2') {
      width: $pv-width-32;
    }
  }

  .e-pv-default-tab .e-pv-bold-icon-div,
  .e-pv-default-tab .e-pv-italic-icon-div,
  .e-pv-default-tab .e-pv-strikeout-icon-div,
  .e-pv-default-tab .e-pv-underlinetext-icon-div,
  .e-pv-default-tab .e-pv-left-align-icon-div,
  .e-pv-default-tab .e-pv-center-align-icon-div,
  .e-pv-default-tab .e-pv-right-align-icon-div {
    @if ($skin-name == 'highcontrast' or $skin-name == 'tailwind') {
      padding: $pv-spacing-5 $pv-spacing-8;
    }
  }

  .e-pv-blazor-redaction-text-align,
  .e-pv-redaction-text-align {
    @if ($skin-name == 'fluent2') {
      border-radius: $pv-radius-4 !important;/* stylelint-disable-line declaration-no-important */
    }
    .e-pv-left-align-icon-div,
    .e-pv-center-align-icon-div,
    .e-pv-right-align-icon-div {
      height: $pv-height-p100;
      width: $pv-width-p100;
      @if ( $skin-name == 'FluentUI' or $skin-name == 'tailwind3' or $skin-name == 'highcontrast') {
        padding: $pv-spacing-5 $pv-spacing-8;
      }
      @else if($skin-name == 'Material3') {
        padding: $pv-spacing-7 $pv-spacing-9 $pv-spacing-2 $pv-spacing-7;
      }
      @else if($skin-name == 'fluent2') {
        padding: $pv-spacing-4 $pv-spacing-6;
      }
    }
  }

  .e-pv-redaction-toolbar .e-pv-icon {
    font-size: $pv-text-base !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-default-tab .e-pv-bold-icon-div,
  .e-pv-default-tab .e-pv-left-align-icon-div,
  .e-pv-default-tab .e-pv-center-align-icon-div {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      border-right: $pv-border-1 solid $border-light;
    }
    @if ($skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'tailwind3') {
      border-right: $pv-border-1 solid $border;
    }
    @else if($skin-name == 'highcontrast') {
      border-right: $pv-border-1 solid;
    }
  }

  .e-pv-bold-icon-div:hover,
  .e-pv-italic-icon-div:hover,
  .e-pv-strikeout-icon-div:hover,
  .e-pv-underlinetext-icon-div:hover,
  .e-pv-left-align-icon-div:hover,
  .e-pv-center-align-icon-div:hover,
  .e-pv-right-align-icon-div:hover {
    @if ($skin-name != 'Material3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' ) {
      @if ($skin-name != 'fluent2') {
        background-color: $pv-annotation-dropdown-background-color-hover;
      }
      @if $skin-name != 'FluentUI' {
        border-color: $pv-annotation-dropdown-border-color-hover;
      }
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      background-color: $secondary-bg-color-pressed;
      border-color: $secondary-bg-color-pressed;
      color: $white;
    }
    @if ($skin-name == 'Material3') {
      background: $pv-annotation-dropdown-background-color-hover;
      border: $pv-annotation-dropdown-border-color-hover;
    }
  }

  .e-pv-bold-icon-div:active,
  .e-pv-italic-icon-div:active,
  .e-pv-strikeout-icon-div:active,
  .e-pv-underlinetext-icon-div:active,
  .e-pv-left-align-icon-div:active,
  .e-pv-center-align-icon-div:active,
  .e-pv-right-align-icon-div:active {
    @if ($skin-name != 'Material3' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' ) {
      background-color: $pv-signature-footer-color;
      border-color: $pv-signature-footer-color;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      background-color: $secondary-bg-color-pressed;
      border-color: $secondary-bg-color-pressed;
      color: $white;
    }
    @if ($skin-name == 'Material3') {
      background: $pv-signature-footer-color;
      border: $pv-signature-footer-color;
    }
  }

  .e-pv-default-tab .e-pv-formfield-li-element:hover:not(.e-pv-li-select),
  .e-pv-default-tab .e-pv-bold-icon-div:hover,
  .e-pv-default-tab .e-pv-italic-icon-div:hover,
  .e-pv-default-tab .e-pv-left-align-icon-div:hover,
  .e-pv-default-tab .e-pv-center-align-icon-div:hover,
  .e-pv-default-tab .e-pv-right-align-icon-div:hover {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2') {
      background-color: $secondary-bg-color-hover;
      color: $secondary-text-color-hover;
    }
    @else if ($skin-name == 'Material3') {
      background-color: $content-bg-color-hover;
      color: $content-text-color-hover;
    }
    @else if ($skin-name == 'highcontrast') {
      background-color: $hover-bg;
      color: $hover-font;
    }
  }

  .e-pv-default-tab .e-pv-formfield-li-element.e-pv-li-select,
  .e-pv-default-tab .e-pv-bold-icon-div.e-pv-li-select,
  .e-pv-default-tab .e-pv-italic-icon-div.e-pv-li-select,
  .e-pv-default-tab .e-pv-left-align-icon-div.e-pv-li-select,
  .e-pv-default-tab .e-pv-center-align-icon-div.e-pv-li-select,
  .e-pv-default-tab .e-pv-right-align-icon-div.e-pv-li-select {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI') {
      background-color: $pv-item-selection-background-color;
      color: $pv-item-selection-color;
    }
    @else if ($skin-name == 'Material3') {
      background: $pv-item-selection-background-color;
      color: $pv-item-selection-color;
    }
    @else if($skin-name == 'fluent2') {
      background-color: $secondary-bg-color-pressed;
      color: $secondary-text-pressed;
    }
    @else if ($skin-name == 'highcontrast') {
      background-color: $selection-bg;
      color: $selection-font;
    }
  }

  .e-pv-properties-fill-color-style-prop,
  .e-pv-properties-stroke-color-style-prop,
  .e-pv-properties-stroke-thickness-style-prop {
    @if $skin-name == 'Material3' {
      padding: $pv-spacing-0 $pv-spacing-20 $pv-spacing-12 $pv-spacing-1;
    }
    @else {
      padding: $pv-spacing-12 $pv-spacing-20 $pv-spacing-12 $pv-spacing-1;
    }
  }

  .e-pv-default-tab .e-pv-properties-fill-color-style-prop,
  .e-pv-default-tab .e-pv-properties-stroke-color-style-prop,
  .e-pv-default-tab .e-pv-properties-stroke-thickness-style-prop {
    @if $skin-name == 'Material3' {
      padding: $pv-spacing-0 $pv-spacing-20 $pv-spacing-12 $pv-spacing-0;
    }
    @else {
      padding: $pv-spacing-0 $pv-spacing-20 $pv-spacing-12 $pv-spacing-0;
    }
  }

  .e-pv-properties-fill-color-icon,
  .e-pv-properties-stroke-color-icon {
    @if $skin-name == 'fluent2' {
      width: $pv-width-1em !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-fill-color-icon.e-pv-icon.e-btn-icon.e-icon-left,
  .e-pv-properties-stroke-color-icon.e-pv-icon.e-btn-icon.e-icon-left {
    @if $skin-name == 'tailwind3' {
      margin-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else if ($skin-name == 'Material3' or  $skin-name == 'tailwind') {
      line-height: $pv-line-height-normal;
    }
  }

  .e-pv-formfield-fontcolor-icon,
  .e-pv-formfield-strokecolor-icon,
  .e-pv-formfield-strokethickness-icon {
    @if ($skin-name == 'bootstrap4') {
      color: $pv-form-field-property-header-color;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      color: inherit;
    }
    @if ($skin-name == 'material') {
      color: $pv-prop-line-styles-color;
    }
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      border: $pv-border-1 solid $border-light;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      border-radius: $pv-radius-4;
    }
    @else {
      border-radius: $pv-radius-2;
    }
    height: $pv-formfield-properties-icon-height;
    margin-top: $pv-spacing-8;
    @if $skin-name != 'FluentUI' {
      width: $pv-width-54;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      align-content: center;
      align-items: center;
      box-shadow: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: $pv-spacing-0 $pv-spacing-11;
      width: $pv-width-inherit;
    }
    @if ($skin-name=='fluent2') {
      width: $pv-width-59;
      border-radius: $pv-radius-4;
    }
    @if ($skin-name == 'tailwind3') {
      width: $pv-width-61;
      border-radius: $pv-radius-6;
    }
    @if ($skin-name == 'Material3') {
      align-content: center;
      align-items: center;
      box-shadow: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: $pv-width-75;
      height: $pv-height-32;
      box-sizing: border-box;
      padding-right: $pv-spacing-16;
      margin-top: $pv-spacing-0;
    }
  }

  .e-pv-default-tab .e-pv-formfield-fontcolor-icon,
  .e-pv-default-tab .e-pv-formfield-strokecolor-icon,
  .e-pv-default-tab .e-pv-formfield-strokethickness-icon {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      width: $pv-width-60;
    }
    margin-top: $pv-spacing-5;
    @if ($skin-name == 'highcontrast') {
      height: $pv-height-32;
    }
    @else if ($skin-name == 'tailwind3') {
      height: $pv-height-36;
    }
  }

  .e-pv-form-field-list-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .e-pv-formfield-textarea-group-mobile .e-custom .e-list-wrap ul {
    @if ($skin-name == 'Material3') {
      background: $pv-comments-content-container-bg;
    }
    @else {
      background-color: $pv-comments-content-container-bg;
    }
  }

  .e-pv-formfield-textarea-group-mobile .e-custom .e-list-wrap ul:has(.e-list-nrt:only-child) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .e-pv-properties-format-text-style-prop {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      padding: $pv-spacing-15 $pv-spacing-15 $pv-spacing-4 $pv-spacing-1;
    }
    @if ($skin-name == 'Material3') {
      padding: $pv-spacing-20 $pv-spacing-15 $pv-spacing-6 $pv-spacing-0;
    }
    @if ($skin-name == 'fluent2') {
      padding: $pv-spacing-15;
    }
    @else {
      padding: $pv-spacing-15 $pv-spacing-15 $pv-spacing-15 $pv-spacing-1;
    }
  }

  .e-pv-default-tab .e-pv-properties-format-text-style-prop {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      padding: $pv-spacing-15 $pv-spacing-15 $pv-spacing-4 $pv-spacing-1;
    }
    @if ($skin-name == 'Material3') {
      padding: $pv-spacing-20 $pv-spacing-15 $pv-spacing-6 $pv-spacing-0;
    }
    @if ($skin-name == 'fluent2') {
      padding: $pv-spacing-15 $pv-spacing-10;
    }
    @else {
      padding: $pv-spacing-15 $pv-spacing-15 $pv-spacing-15 $pv-spacing-1;
    }
  }

  .e-pv-default-tab .e-pv-properties-format-text-style-prop {
    padding-bottom: $pv-spacing-5;
  }

  .e-pv-formfield-strokethickness-icon {
    @if ($skin-name=='fluent2') {
      padding-top: $pv-spacing-3 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-properties-font-family-container {
    @if $skin-name != 'fluent2' {
      margin-right: $pv-spacing-15;
    }
    @if $skin-name == 'FluentUI' {
      width: $pv-width-122;
    }
    @if $skin-name == 'Material3' {
      width: $pv-width-214;
      height: $pv-height-32;
      margin-right: $pv-spacing-12;
    }
    @else {
      width: $pv-width-165;
    }
  }

  .e-pv-default-tab .e-pv-properties-font-family-container {
    @if ($skin-name =='fluent2') {
      width: $pv-width-175;
    }
    @else if($skin-name == 'FluentUI') {
      width: $pv-width-215;
    }
    @else {
      width: $pv-width-186;
    }
  }

  .e-pv-properties-font-size-container {
    @if $skin-name == 'Material3' {
      border-right-color: $transparent;
      height: $pv-height-32;
      border-bottom: $pv-border-1 solid $transparent;
      box-sizing: border-box;
    }
    @else if $skin-name == 'fluent2' {
      border-right-color: $transparent;
      height: $pv-height-32;
      border-bottom: $pv-border-1 solid $transparent;
      box-sizing: border-box;
      padding: $pv-spacing-0;
    }
    @else {
      border-right-color: $pv-comment-panel-bottom-color;
      border-right-style: solid;
      border-right-width: $pv-border-1;
      margin-right: $pv-spacing-15;
      padding-right: $pv-spacing-15;
    }
    @if $skin-name == 'FluentUI' {
      width: $pv-width-105;
    }
    @else {
      width: $pv-font-size-field-width;
    }
  }

  .e-pv-formfield-maxlength {
    padding-left: $pv-spacing-20;
  }

  .e-pv-left-align-icon-div:not(.e-pv-default-tab *),
  .e-pv-center-align-icon-div:not(.e-pv-default-tab *),
  .e-pv-right-align-icon-div:not(.e-pv-default-tab *) {
    @if ($skin-name != 'bootstrap5' and and $skin-name != 'bootstrap5.3' ) {
      padding-left: $pv-spacing-6;
    }
  }

  .e-pv-properties-font-color-container,
  .e-pv-properties-color-container-style-prop {
    display: flex;
    padding-top: $pv-spacing-20;
    @if ($skin-name == 'fluent2') {
      margin-left: $pv-spacing-12;
    }
  }

  .e-pv-default-tab .e-pv-properties-font-color-container,
  .e-pv-default-tab .e-pv-properties-color-container-style-prop {
    display: flex;
    padding-top: $pv-spacing-20;
    @if ($skin-name == 'fluent2') {
      margin-left: $pv-spacing-10;
    }
  }

  .e-pv-formfield-textcolor {
    margin-right: $pv-spacing-10;
  }

  .e-pv-formfield-maxlength-icon {
    align-items: center;
    display: flex;
    padding-right: $pv-spacing-14;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      padding-right: $pv-spacing-10;
    }
    @if ($skin-name == 'FluentUI' or $skin-name == 'tailwind3') {
      padding-right: $pv-spacing-8;
    }
  }

  .e-pv-formfield-textcolor-icon.e-btn.e-icon-btn,
  .e-pv-formfield-strokecolor-icon.e-btn.e-icon-btn,
  .e-pv-formfield-fontcolor-icon.e-btn.e-icon-btn,
  .e-pv-formfield-strokethickness-icon.e-btn.e-icon-btn {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      padding: $pv-spacing-0 $pv-spacing-11;
    }
  }

  .e-pv-font-color-prop-mobile .e-pv-formfield-textcolor-icon.e-btn.e-icon-btn {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      padding: $pv-spacing-4 $pv-spacing-11;
    }
  }

  .e-pv-formfield-textcolor-icon {
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      border: $pv-border-1 solid $border-light;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      border-radius: $pv-radius-4;
    }
    @else {
      border-radius: $pv-radius-2;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'tailwind3') {
      border-radius: $pv-radius-6;
    }
    width: $pv-form-field-property-font-style-width;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      height: $pv-height-36;
    }
    @if ($skin-name == 'bootstrap4') {
      color: $pv-form-field-property-header-color;
    }
    @if ($skin-name == 'material') {
      color: $pv-prop-line-styles-color;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      align-items: baseline;
      box-shadow: none;
      color: inherit;
      display: flex;
      height: $pv-height-32;
    }
    @if ($skin-name == 'Material3') {
      display: flex;
      width: $pv-width-76;
      border-bottom: $pv-border-1 solid rgba($border);
      box-shadow: none;
    }
    @if ($skin-name == 'FluentUI') {
      height: $pv-height-auto;
    }
    @if ($skin-name == 'fluent2') {
      border-radius: $pv-radius-4;
      width: $pv-width-65;
    }
  }

  .e-pv-properties-form-field-window .e-pv-formfield-textcolor-icon {
    @if ($skin-name == 'fluent2') {
      padding: $pv-spacing-1 $pv-spacing-11 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-default-tab .e-pv-formfield-textcolor-icon {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      width: $pv-width-60;
      height: $pv-height-38;
    }
    @if ($skin-name == 'highcontrast') {
      width: $pv-width-54;
      height: $pv-height-32;
    }
    @if ($skin-name == 'tailwind3') {
      padding: $pv-spacing-0 $pv-spacing-14;
    }
    @if ($skin-name == 'fluent2') {
      width: $pv-width-58;
      height: $pv-height-32;
    }
  }

  .e-pv-default-tab .e-pv-formfield-textcolor-icon .e-pv-annotation-textcolor-icon {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      height: $pv-height-20;
    }
  }

  .e-pv-properties-formfield-maxlength-text-label,
  .e-pv-formfield-maxlength {
    padding-left: $pv-spacing-1;
    width: $pv-formfield-maxlength-width;
    @if ($skin-name == 'Material3') {
      height: $pv-height-32;
    }
    @if ($skin-name == 'tailwind3') {
      width: $pv-width-82;
    }
  }

  .e-pv-default-tab .e-pv-formfield-maxlength {
    @if ($skin-name == 'Material3') {
      width: $pv-width-110;
    }
    @if ($skin-name == 'fluent2'){
      width: $pv-width-84;
    }
  }

  .e-pv-formfield-maxlength-group {
    display: flex;
    @if ($skin-name == 'tailwind3') {
      padding-left: $pv-spacing-13;
    }
    @else {
      padding-left: $pv-formfield-maxlength-group-padding-left;
    }
  }

  .e-pv-default-tab .e-pv-formfield-maxlength-group {
    @if ($skin-name != 'Material3') {
      align-items: center;
    }
  }

  .e-pv-properties-form-field-list-add-div {
    display: flex;
    @if $skin-name == 'FluentUI' {
      padding-bottom: $pv-spacing-12;
      padding-top: $pv-spacing-16;
    }
    @else {
      padding-bottom: $pv-spacing-14;
      padding-top: $pv-spacing-20;
    }
  }

  .e-pv-properties-list-item-edit-prop {
    margin-right: $pv-spacing-15;
    width: $pv-width-295;
    @if $skin-name == 'FluentUI' {
      margin-right: $pv-spacing-12;
      width: $pv-width-318;
    }
  }

  .e-pv-properties-form-field-window {
    max-width: $pv-properties-form-field-win-max-width;
  }

  .e-pv-properties-form-field-window .e-dlg-content .e-tab-header {
    @if ($skin-name == 'fluent2') {
      width: $pv-properties-form-field-win-max-width !important;/* stylelint-disable-line declaration-no-important */
      border-bottom: $pv-border-1 solid var(--color-sf-border-light);
    }
  }

  .e-pv-default-tab .e-tab-header {
    @if ($skin-name == 'fluent2') {
      border-bottom: $pv-border-1 solid var(--color-sf-border-light);
    }
    @else if ($skin-name == 'FluentUI') {
      border-bottom: $pv-border-1 solid $border-light;
    }
    @else if ($skin-name == 'Material3') {
      border-bottom: $pv-border-1 solid rgba($border-light);
    }
  }

  .e-pv-properties-formfield-textarea {
    @if $skin-name == 'FluentUI' {
      min-width: $pv-width-318;
    }
  }

  .e-pv-default-tab .e-pv-properties-formfield-textarea {
    width: $pv-width-300;
    height: $pv-height-123;
    border: $pv-border-1 solid #e0e0e0;
    margin-right: $pv-spacing-15;
    overflow: auto;
  }

  .e-pv-properties-export-value-edit-prop {
    width: $pv-width-295;
    @if $skin-name == 'FluentUI' {
      width: $pv-width-318;
    }
  }

  .e-pv-properties-form-field-list-btn-div {
    align-items: center;
    display: flex;
    height: $pv-height-36;
    margin-top: $pv-spacing-10;
    text-align: center;
    @if $skin-name == 'FluentUI' {
      height: $pv-height-32;
      margin-top: $pv-spacing-24;
    }
    .e-pv-default-tab & {
      height: $pv-height-unset;
    }
  }

  .e-pv-form-field-properties-dialog .e-pv-properties-form-field-list-btn-div {
    @if $skin-name == 'tailwind3' or $skin-name == 'FluentUI' {
      margin-top: $pv-spacing-24;
    }
    @else {
      margin-top: $pv-spacing-20;
    }
  }

  .e-pv-properties-form-field-export-value-main-div {
    @if $skin-name == 'FluentUI' {
      padding-bottom: $pv-spacing-12;
      padding-top: $pv-spacing-0;
    }
    @else {
      padding-bottom: $pv-spacing-15;
      padding-top: $pv-spacing-10;
    }
    width: $pv-width-335;
  }

  .e-pv-properties-form-field-group-btn-div {
    display: grid;
    align-content: space-between;
  }

  .e-pv-properties-form-field-option-dropdown-list-div {
    @if $skin-name == 'FluentUI' {
      padding-top: $pv-spacing-0;
    }
    @else {
      padding-top: $pv-spacing-10;
    }
  }

  .e-pv-properties-form-field-btn-textarea-container {
    display: flex;
    width: $pv-width-385;
    @if $skin-name == 'FluentUI' {
      padding-top: $pv-spacing-0;
    }
    @else {
      padding-top: $pv-spacing-15;
    }
  }

  .e-pv-default-tab .e-pv-properties-form-field-btn-textarea-container {
    padding-top: $pv-spacing-0;
  }

  .e-pv-formfield-textarea-group-mobile .e-pv-properties-form-field-btn-textarea-container {
    width: $pv-width-340;
  }

  .e-pv-properties-dropdown-btn {
    align-items: center;
    display: flex;
    height: $pv-height-36;
    text-align: center;
    width: $pv-width-75;
    .e-pv-default-tab & {
      height: $pv-height-unset;
    }
  }

  .e-pv-default-tab .e-pv-properties-dropdown-btn {
    @if ($skin-name == 'fluent2') {
      width: $pv-width-96;
    }
  }

  .e-pv-default-tab .e-pv-properties-list-item-edit-prop,
  .e-pv-default-tab .e-pv-properties-export-value-edit-prop {
    @if ($skin-name == 'fluent2') {
      width: $pv-width-275;
    }
  }

  .e-pv-appearance-tab-content-mobile .e-pv-properties-dropdown-btn {
    height: $pv-height-32;
    width: $pv-width-60;
  }

  .e-pv-show-designer-name {
    align-items: center;
    color: $pv-show-designer-name-color;
    display: grid;
    height: $pv-height-p100;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: $pv-width-p100;
  }

  .e-pv-formfield-li-element {
    list-style: none;
    padding-left: $pv-spacing-10;
  }

  .e-pv-li-select {
    background-color: $pv-form-field-li-background-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      background-color: $pv-item-selection-background-color;
      color: $white;
    }
    @if ($skin-name == 'tailwind') {
      background-color: $pv-item-selection-background-color;
    }
    @if ($skin-name == 'fluent2') {
      color: $pv-save-button-color;
    }
  }

  .e-pv-formfield-li-element.e-pv-li-select {
    background-color: $pv-form-field-li-background-color;
    @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
      color: $white;
    }
    @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') {
      color: rgba($white);
    }
    @if ($skin-name == 'highcontrast') {
      color: $selection-font;
    }
  }

  .e-pv-formfield-li-element:hover:not(.e-pv-li-select) {
    @if ($skin-name != 'Material3') {
      background-color: $pv-form-field-li-background-color;
    }
    @if ($skin-name == 'FluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'tailwind') {
      color: $white;
    }
    @if ($skin-name == 'tailwind3' or $skin-name == 'bootstrap5.3') {
      color: rgba($white);
    }
    @if ($skin-name == 'Material3') {
      background-color: $content-bg-color-hover;
    }
    @if ($skin-name == 'fluent2') {
      color: $pv-save-button-color;
    }
    @if ($skin-name == 'highcontrast') {
      color: $selection-font;
    }
  }

  .e-pv-formfield-li-element:focus {
    @if ($skin-name == 'Material3') {
      background-color: $content-bg-color-focus;
    }
  }

  .e-pv-formfield-li-element:disabled {
    @if ($skin-name == 'Material3') {
      background-color: $transparent;
      font-size: $pv-text-sm;
      color: rgba(28, 31, 30, .38);
    }
  }

  .e-pv-form-designer-ul-list-items {
    padding-left: $pv-spacing-1;
  }

  .e-pv-form-field-property-header.e-dialog .e-dlg-header .e-dlg-header-content {
    font-size: $pv-form-field-property-header-font-size;
    font-weight: $pv-form-field-property-header-font-weight;
  }

  .e-pv-form-field-property-header {
    -ms-user-select: none;
    -webkit-user-select: none;
    color: $pv-form-field-property-header-color;
    display: block;
    @if $skin-name == 'FluentUI' {
      font-family: 'Segoe UI';
      height: $pv-height-24;
    }
    @else {
      font-family: 'Roboto';
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      font-family: inherit;
    }
    font-size: $pv-form-field-property-header-font-size;
    font-style: normal;
    font-weight: $pv-form-field-property-header-font-weight;
    line-height: $pv-form-field-property-header-line-height;
    margin-top: $pv-form-field-property-header-margin-top;
    mix-blend-mode: normal;
    opacity: $pv-form-field-property-header-opacity;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    vertical-align: top;
    white-space: nowrap;
    width: $pv-form-field-property-header-width;
    @if $skin-name=='Material3' {
      height: $pv-height-20;
      font-family: $font-family;
    }
    @if $skin-name=='fluent2' {
      height: $pv-height-28;
      font-family: $font-family;
    }
  }

  .e-pv-default-tab.e-pv-properties-tab-style-prop .e-pv-properties-checkbox-main-div-prop .e-icons.e-frame{
    @if $skin-name=='fluent2' {
      margin-left: $pv-spacing-0;
    }
  }

  .e-pv-form-field-property-header-general {
    @if $skin-name=='FluentUI' {
      font-family: 'Segoe UI';
      height: $pv-height-24;
    }

    @if ($skin-name=='Material3'or $skin-name == 'fluent2') {
      font-family: $font-family;
    }
    @else {
      font-family: 'Roboto';
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      font-family: inherit;
    }
    font-size: $pv-form-field-property-general-header-font-size;
    font-style: normal;
    @if $skin-name != 'FluentUI' {
      font-weight: $pv-form-field-property-header-font-weight;
    }
    line-height: $pv-form-field-property-general-header-line-height;
  }

  .e-pv-redaction-properties-dialog .e-pv-default-tab.e-lib.e-tab.e-control,
  .e-pv-properties-tab-style-prop.e-lib.e-tab.e-control {
    @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark') {
      border: $pv-border-0;
    }
  }

  .e-pv-properties-formfield-formatting {
    color: $pv-form-field-property-label-color;
    font-family: 'Roboto';
    font-size: $pv-form-field-property-general-header-font-size;
    font-style: normal;
    font-weight: normal;
    height: $pv-form-field-property-general-header-line-height;
    line-height: $pv-form-field-property-general-header-line-height;
    width: $pv-width-64;
  }

  .e-dialog:has(.e-pv-default-tab.e-pv-properties-tab-style-prop) {
    @if ($skin-name =='FluentUI') {
      width: $pv-width-450 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else if ($skin-name == 'Material3') {
      width: $pv-width-420 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'fluent2') {
      width: $pv-width-430 !important;/* stylelint-disable-line declaration-no-important */
    }
    max-height: $pv-height-530;
  }
  .e-pv-properties-form-field-font-style {
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2') {
      border-radius: $pv-radius-4;
    }
    @else {
      border-radius: $pv-radius-2;
    }
    display: flex;
    @if ($skin-name == 'fluent2') {
      height: $pv-height-32;
      border: $pv-current-page-border;
      width: $pv-width-128;
    }
    @else {
      height: $pv-height-36;
      width: $pv-width-154;
    }
    @if ($skin-name == 'tailwind3') {
      border: $pv-current-page-border;
      border-radius: $pv-radius-6;
    }
    @if ($skin-name != 'fluent2') {
      justify-content: space-evenly;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      align-items: center;
      border: $pv-border-1 solid $border-light;
      height: $pv-height-32;
      width: $pv-width-163;
    }
    @if ($skin-name == 'FluentUI') {
      align-items: center;
      border: $pv-border-1 solid $border;
      height: $pv-height-32;
      width: $pv-width-163;
    }
    @if ($skin-name == 'Material3') {
      align-items: center;
      border-bottom: $pv-border-1 solid $transparent;
      height: $pv-height-32;
      width: $pv-width-128;
      padding-left: $pv-spacing-8;
      padding-top: $pv-spacing-10;
    }
  }

  .e-pv-font-style-prop-mobile,
  .e-pv-default-tab .e-pv-properties-form-field-font-style {
    width: $pv-width-auto;
  }

  .e-pv-default-tab .e-pv-properties-form-field-font-style {
    justify-content: unset;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'tailwind3') {
      border-radius: $pv-radius-4;
      height: $pv-height-36;
      border: $pv-border-1 solid $border-light;
    }
    @else if($skin-name == 'highcontrast') {
      border: $pv-border-1 solid;
    }
  }

  .e-pv-properties-form-field-font-style .e-control:not(.e-pv-strikeout-icon-div),
  .e-pv-properties-form-field-font-align .e-control:not(.e-pv-right-align-icon-div) {
    @if ($skin-name=='fluent2' or $skin-name == 'tailwind3') {
      border-right: $pv-current-page-border;
    }
  }

  .e-pv-properties-form-field-font-align {
    background: $pv-form-field-property-font-style-color;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3' or $skin-name == 'fluent2') {
      border-radius: $pv-radius-4;
    }
    @else {
      border-radius: $pv-radius-2;
    }
    display: flex;
    @if ($skin-name == 'fluent2') {
      border: $pv-current-page-border;
      height: $pv-height-32;
      width: $pv-width-96;
    }
    @else {
      height: $pv-height-36;
      width: $pv-width-120;
    }
    @if ($skin-name == 'tailwind3') {
      border: $pv-current-page-border;
      border-radius: $pv-radius-6;
    }
    @if ($skin-name != 'fluent2') {
      justify-content: space-evenly;
    }
    margin-right: $pv-spacing-15;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI') {
      align-items: center;
      border: $pv-border-1 solid $border-light;
      height: $pv-height-32;
    }
    @if ($skin-name == 'FluentUI') {
      border: $pv-border-1 solid $border;
    }
    @if ($skin-name == 'Material3') {
      align-items: center;
      height: $pv-height-32;
      width: $pv-width-96;
      padding-top: $pv-spacing-8;
      border: $pv-border-1 solid $transparent;
    }
  }

  .e-pv-default-tab .e-pv-properties-form-field-font-align {
    @if ($skin-name == 'FluentUI') {
      height: $pv-height-34;
    }
  }

  .e-pv-redaction-properties-dialog .e-pv-properties-form-field-font-align {
    @if ($skin-name == 'Material3') {
      padding-top: $pv-spacing-0;
    }
  }

  .e-pv-default-tab .e-pv-properties-form-field-font-align {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      border: $pv-border-1 solid $border-light;
    }
    @else if($skin-name == 'highcontrast') {
      border: $pv-border-1 solid;
    }
    width: $pv-width-auto;
  }

  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div.e-pv-li-select {
    @if ($skin-name =='bootstrap5.3') {
      border-top-right-radius: $pv-radius-4;
      border-bottom-right-radius: $pv-radius-4;
    }
  }

  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div:hover,
  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div:focus,
  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div:active {
    @if ($skin-name =='bootstrap5.3') {
      border-top-right-radius: $pv-radius-4;
      border-bottom-right-radius: $pv-radius-4;
    }
  }

  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div.e-pv-li-select {
    @if ($skin-name =='bootstrap5.3') {
      border-top-left-radius: $pv-radius-4;
      border-bottom-left-radius: $pv-radius-4;
    }
  }

  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div:hover,
  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div:focus,
  .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div:active {
    @if ($skin-name =='bootstrap5.3') {
      border-top-left-radius: $pv-radius-4;
      border-bottom-left-radius: $pv-radius-4;
    }
  }

  .e-pv-font-align-prop-mobile .e-pv-properties-form-field-font-align {
    margin-right: $pv-spacing-0;
  }

  .e-pv-general-tab-content-mobile,
  .e-pv-appearance-tab-content-mobile,
  .e-pv-options-tab-content-mobile {
    display: flex;
    flex-direction: column;
    padding: $pv-spacing-10;
    gap: 16px;
  }

  .e-pv-font-family-prop-group-mobile,
  .e-pv-font-size-prop-group-mobile,
  .e-pv-font-style-prop-group-mobile,
  .e-pv-font-align-prop-group-mobile,
  .e-pv-font-color-prop-group-mobile,
  .e-pv-font-length-prop-group-mobile,
  .e-pv-fill-prop-group-mobile,
  .e-pv-border-prop-group-mobile,
  .e-pv-thickness-prop-group-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .e-pv-formfield-btn-group-mobile {
    display: flex;
    gap: 10px;
  }

  .e-pv-properties-formfield-label {
    color: $pv-form-field-property-label-color;
    @if ($skin-name == 'tailwind3') {
      font-family: 'Inter';
    }
    @else {
      font-family: 'Roboto';
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      font-family: inherit;
    }
    font-size: $pv-form-field-property-general-header-font-size;
    font-style: normal;
    font-weight: normal;
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      font-weight: $pv-font-weight-medium;
    }
    @if ($skin-name == 'FluentUI') {
      font-family: 'Segoe UI';
      font-weight: $pv-font-weight-semibold;
      margin-bottom: $pv-spacing-4;
    }
    height: $pv-form-field-property-general-header-line-height;
    line-height: $pv-form-field-property-general-header-line-height;
    @if ($skin-name == 'Material3') {
      font-size: $pv-text-xxs;
      font-weight: $font-weight-normal;
      line-height: $pv-line-height-14;
      height: $pv-height-12;
      font-family: $font-family;
    }
    @if $skin-name == 'fluent2'{
      font-family: $font-family;
    }
    @if ($skin-name == 'tailwind3') {
      line-height: $pv-line-height-20;
      height: $pv-height-20;
    }
  }

  .e-pv-default-tab .e-pv-properties-formfield-label {
    margin-bottom: $pv-spacing-0;
  }

  .e-pv-default-tab .e-pv-properties-form-field-list-add-div .e-pv-properties-formfield-label,
  .e-pv-default-tab .e-pv-properties-form-field-export-value-div .e-pv-properties-formfield-label,
  .e-pv-default-tab .e-pv-properties-form-field-option-dropdown-list-div .e-pv-properties-formfield-label {
    margin-bottom: $pv-spacing-5;
  }

  .e-pv-formfield-maxlength .e-input-group.e-control-wrapper .e-input-group-icon {
    min-width: $pv-formfield-maxlength-arrow-width;
    @if ($skin-name == 'tailwind3') {
      min-width: $pv-width-25;
      padding-top: $pv-spacing-1;
    }
  }

  .e-pv-default-tab .e-pv-formfield-maxlength .e-input-group.e-control-wrapper .e-input-group-icon {
    @if $skin-name == 'fluent2'{
      min-width: $pv-width-8;
    }
  }

  .e-pv-properties-form-field-window {
    height: $pv-formfield-designer-dialog-height;
  }

  .e-pv-properties-header-spliter {
    border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
    border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
    border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
    left: $pv-properties-header-spliter-left;
    padding-top: $pv-properties-header-spliter-padding-top;
    position: $pv-properties-header-spliter-position;
    width: $pv-properties-header-spliter-width;
  }

  .e-pv-properties-bottom-spliter {
    border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
    border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
    border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
    left: $pv-properties-header-spliter-left;
    margin-bottom: $pv-properties-header-spliter-margin-bottom;
    padding-top: $pv-properties-header-spliter-margin-bottom;
    width: $pv-properties-header-spliter-width;
    @if ($skin-name == 'Material3'){
      margin-bottom: $pv-spacing-0;
      padding-top: $pv-spacing-0;
      border-width: $pv-border-0;
    }
  }

  .e-pv-formfield-textcolor-icon .e-btn-icon.e-icons,
  .e-pv-formfield-fontcolor-icon .e-btn-icon.e-icons,
  .e-pv-formfield-strokecolor-icon .e-btn-icon.e-icons,
  .e-pv-formfield-strokethickness-icon .e-btn-icon.e-icons {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      width: $pv-width-1em;
    }
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator) {
    background-color: $pv-comment-panel-bg;
    padding: $pv-spacing-0 $pv-icon-padding-top;
  }

  .e-pv-annotation-toolbar.e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
    justify-content: center;
    padding: $pv-spacing-0 $pv-icon-padding-top;
  }

  .e-pv-mobile-toolbar .e-mobile-more-option .e-pv-more-icon {
    @if ($skin-name == 'bootstrap4') {
      margin-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
      width: $pv-width-1em !important;/* stylelint-disable-line declaration-no-important */
      line-height: $pv-line-height-24 !important;/* stylelint-disable-line declaration-no-important */
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      margin-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
      width: $pv-width-1em !important;/* stylelint-disable-line declaration-no-important */
      line-height: $pv-line-height-24 !important;/* stylelint-disable-line declaration-no-important */
    }
    margin-top: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-signature-apperance .e-float-input.e-control-wrapper.e-input-group:not(.e-pv-canvas-signature-blazor) {
    @if ($skin-name =='fluent2') {
      margin-left: $pv-spacing-3-425p;
      width: $pv-width-95-55p !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-signature-apperance .e-checkbox-wrapper{
    @if ($skin-name == 'fluent2') {
      margin-left: $pv-toolbar-btn-height;
    }
  }

  .e-pv-signature-window .e-dlg-content {
    @if ($skin-name=='highcontrast') {
      padding: $pv-spacing-16;
    }

    @if ($skin-name=='fluent2') {
      width: $pv-width-p100 !important;/* stylelint-disable-line declaration-no-important */
      padding-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
  }
  .e-pv-signature-window .e-dlg-content .e-tab-header{
    @if ($skin-name == 'fluent2') {
      width: $pv-width-103p !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-signature-window .e-dlg-content .e-tab-header .e-toolbar-items{
    @if ($skin-name == 'fluent2') {
      margin-left: $pv-spacing-28;
    }
  }

  .e-pv-signatureimage {
    @if ($skin-name == 'highcontrast') {
      background-color: $pv-signature-image-panel-bg;
    }
  }

  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover .e-caret,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover:focus,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:hover:focus .e-caret {
    @if ($skin-name == 'bootstrap4') {
      color: $pv-prop-win-drop-down-color-hover;
    }
    @if ($skin-name == 'bootstrap5.3') {
      background-color: $pv-annotation-dropdown-background-color-hover;
      border-color: $pv-annotation-dropdown-border-color-hover;
      outline: none;
    }
  }

  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:focus,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:focus .e-caret,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:not(:hover) {
    @if ($skin-name == 'bootstrap4') {
      color: $pv-stamp-icon-color;
    }
  }

  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:focus,
  .e-pv-annotation-toolbar .e-dropdown-btn.e-btn:focus .e-caret {
    @if ($skin-name == 'bootstrap4') {
      color: $pv-prop-win-drop-down-color-hover;
    }
    @if ($skin-name == 'bootstrap5') {
      color: $white;
    }
  }

  .e-dialog.e-pv-signature-dialog-height {
    height: $pv-signature-dialog-height;
    @if ($skin-name == 'FluentUI' or $skin-name == 'Material3') {
      min-height: $pv-signature-dialog-height;
    }
  }
  .e-dialog.e-pv-signature-dialog-blazor-height {
    @if ($skin-name != 'tailwind3') {
      height: $pv-signature-dialog-blazor-height;
    }
    @if ($skin-name == 'FluentUI') {
      min-height: $pv-signature-dialog-height;
    }
    @if ($skin-name == 'Material3') {
      min-height: $pv-signature-dialog-blazor-height;
    }
    @if ($skin-name == 'fluent2') {
      min-height: $pv-signature-dialog-height;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      max-height: $pv-signature-dialog-height !important;/* stylelint-disable-line declaration-no-important */
    }
    @if ($skin-name == 'tailwind3') {
      max-height: $pv-signature-dialog-blazor-height !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-signature-dialog-blazor-height.e-dlg-modal .e-dlg-content .e-tab {
    @if ($skin-name == 'highcontrast') {
      border: none;
    }
  }

  .e-pv-signature-dialog-height .e-pv-signature-dialog-height .e-dlg-content .e-tab {
    @if ($skin-name == 'highcontrast') {
      border: none;
    }
  }

  .e-dialog.e-pv-signature-dialog-blazor-height .e-checkbox-wrapper.e-wrapper {
    @if $skin-name =='fluent2' {
      margin-left: $pv-spacing-0 !important/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-toolbar-scroll .e-toolbar-pop.e-popup-open {
    overflow: auto;
  }

  .e-pv-canvas-signature {
    width: $pv-canvas-sign-width;

    @if $skin-name=='FluentUI'{
      max-width: $pv-canvas-sign-width;
    }

    @if $skin-name =='fluent2' {
      width: $pv-width-95-5p;
      max-width: $pv-width-95-5p;
      margin-left: $pv-spacing-3-657p;
      border: $pv-border-2 dotted var(--color-sf-border-dark) !important;/* stylelint-disable-line declaration-no-important */
    }

    @if $skin-name=='Material3' {
      width: $pv-width-p100;
      max-width: $pv-canvas-sign-width;
    }
    @if $skin-name=='tailwind3' {
      width: $pv-width-p100;
    }
  }

  .e-pv-blazor-mobile-redaction-toolbar,
  .e-pv-mobile-redaction-toolbar {
    bottom: 0;
    position: absolute;
    width: $pv-width-p100;
    float: left;
    z-index: 100;
  }

  .e-pv-redaction-page-mark-panel {
    inset: 0;
    height: $pv-height-p100;
    width: $pv-width-p100;
    position: absolute;
    z-index: 110;
  }

  .e-pv-redaction-page-mark-content-mobile {
    margin-left: $pv-spacing-15;
    margin-top: $pv-spacing-20;
  }

  .e-pv-blazor-redaction-title-mobile {
    left: 37px;
    top: 10px;
  }

  .e-pv-redaction-title-mobile {
    left: 37px;
    top: 10px;
  }

  .e-pv-redaction-content-container {
    left: 37px;
    top: 10px;
  }
  .e-pv-blazor-redaction-opacity-container .e-slider-container,
  .e-pv-redaction-opacity-container .e-slider-container {
    @if $skin-name =='fluent2' {
      padding-right: $pv-spacing-10;
    }
    @else {
      padding-left: $pv-spacing-10;
      @if $skin-name == 'FluentUI' {
        height: $pv-height-28 !important;/* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-pv-blazor-redaction-opacity-container {
    @if $skin-name == 'FluentUI' {
      padding-top: $pv-spacing-10;
    }
  }

  .e-pv-redaction-opacity-container {
    @if $skin-name == 'FluentUI' {
      padding-top: $pv-spacing-10;
    }
  }

  .e-pv-redaction-opactity-value {
    float: right;
    margin-top: $pv-spacing-6;
  }

  .e-pv-blazor-redaction-font-color-text,
  .e-pv-blazor-redaction-fill-text,
  .e-pv-redaction-font-color-text,
  .e-pv-redaction-fill-text {
    float: left;
    margin-top: $pv-spacing-2;
    margin-right: $pv-spacing-12;
  }

  .e-pv-blazor-redaction-fill-text {
    margin-left: $pv-spacing-10;
  }

  .e-pv-redaction-fill-text {
    margin-left: $pv-spacing-10;
  }

  .e-pv-blazor-redaction-table,
  .e-pv-blazor-redaction-font-table {
    margin-top: $pv-spacing-10;
  }

  .e-pv-redaction-table,
  .e-pv-redaction-font-table {
    margin-top: $pv-spacing-10;
  }

  .e-pv-blazor-redaction-font-table {
    margin-left: $pv-spacing-10;
  }

  .e-pv-redaction-font-table {
    margin-left: $pv-spacing-10;
  }

  .e-pv-redaction-font-family {
    float: left;
    width: $pv-width-177;
  }

  .e-pv-blazor-redaction-font-size {
    float: left;
    width: $pv-width-92;
    margin-left: $pv-spacing-15;
  }

  .e-pv-redaction-font-size {
    float: left;
    width: $pv-width-92;
    margin-left: $pv-spacing-15;
  }

  .e-pv-use-overlay-text-prop-mobile,
  .e-pv-repeat-text-prop-mobile {
    height: $pv-height-32;
  }

  .e-pv-blazor-redaction-fill-color,
  .e-pv-blazor-redaction-font-color,
  .e-pv-blazor-redaction-text-align {
    float: left;
  }

  .e-pv-redaction-fill-color,
  .e-pv-redaction-font-color,
  .e-pv-redaction-text-align {
    float: left;
  }

  .e-pv-redaction-mobile-page-range-input {
    -ms-flex: 1;
    flex: 1;
  }

  .e-pv-blazor-redaction-text-align {
    margin-left: $pv-spacing-15;
  }

  .e-pv-redaction-text-align {
    margin-left: $pv-spacing-15;
  }

  .e-pv-blazor-redaction-overlay-input {
    float: left;
    margin-left: $pv-spacing-20;
  }

  .e-pv-redaction-overlay-input {
    float: left;
    margin-left: $pv-spacing-20;
  }

  .e-pv-blazor-redaction-color-picker {
    float: left;
    width: $pv-width-auto;
    margin-left: $pv-spacing-10;
  }

  .e-pv-redaction-color-picker {
    float: left;
    width: $pv-width-auto;
    margin-left: $pv-spacing-10;
  }

  .e-pv-blazor-redaction-property-panel-mobile {
    position: absolute;
    inset: 0;
    height: $pv-height-p100;
    width: $pv-width-p100;
  }

  .e-pv-redaction-property-panel-mobile {
    position: absolute;
    inset: 0;
    height: $pv-height-p100;
    width: $pv-width-p100;
  }

  .e-pv-overlay-text-prop-lable-mobile {
    float: left;
  }

  .e-pv-overlay-text-prop-mobile {
    float: right;
  }

  .e-pv-properties-form-field-font-align {
    width: $pv-width-100;
  }

  .e-pv-blazor-redaction-title-mobile {
    top: 10px;
    left: 37px;
  }

  .e-pv-redaction-title-mobile {
    top: 10px;
    left: 37px;
  }

  .e-pv-blazor-redaction-outline-text,
  .e-pv-blazor-redaction-opacity-text {
    @if $skin-name !='fluent2' {
      margin-left: $pv-spacing-10;
    }
  }

  .e-pv-redaction-outline-text,
  .e-pv-redaction-opacity-text {
    @if $skin-name !='fluent2' {
      margin-left: $pv-spacing-10;
    }
  }

  .e-pv-blazor-redaction-overlay-text {
    float: left;
  }

  .e-pv-redaction-overlay-text {
    float: left;
  }

  .e-pv-blazor-redaction-overlat-input {
    float: left;
    margin-left: $pv-spacing-20;
  }

  .e-pv-redaction-overlat-input {
    float: left;
    margin-left: $pv-spacing-20;
  }

  .e-pv-balzor-redaction-mark-fill-text {
    float: left;
    margin: $pv-spacing-2 $pv-spacing-0 $pv-spacing-0 $pv-spacing-20;
    @if ($skin-name == 'bootstrap5.3') {
      margin-left: $pv-spacing-30;
    }
  }

  .e-pv-redaction-mark-fill-text {
    float: left;
    margin: $pv-spacing-2 $pv-spacing-0 $pv-spacing-0 $pv-spacing-20;
    @if ($skin-name == 'bootstrap5.3') {
      margin-left: $pv-spacing-30;
    }
  }

  .e-pv-blazor-redaction-outline-text {
    margin-top: $pv-spacing-2;
    float: left;
  }

  .e-pv-redaction-outline-text {
    margin-top: $pv-spacing-2;
    float: left;
  }

  .e-pv-overlaytext {
    float: left;
    margin-left: $pv-spacing-20;
  }

  .e-pv-blazor-redaction-table-tr {
    display: flex;
    align-items: center;
    margin-top: $pv-spacing-8;
  }

  .e-pv-redaction-table-tr {
    display: flex;
    align-items: center;
    margin-top: $pv-spacing-8;
  }

  .e-pv-redaction-page-mark-dialog .e-footer-content button,
  .e-pv-redaction-properties-dialog .e-footer-content button {
    @if $skin-name == 'tailwind3' {
      height: $pv-height-30;
    }
    @else {
      height: $pv-height-32;
    }
    padding-top: $pv-spacing-0;
    @if $skin-name =='fluent2' {
      width: $pv-width-96;
    }
    @else if $skin-name == 'bootstrap5.3' {
      padding-bottom: $pv-spacing-0;
    }
    @if $skin-name == 'Material3' {
      border-radius: $pv-radius-20;
      padding-top: $pv-spacing-2;
    }
  }

  .e-pv-redact-close,
  .e-pv-redact-page-close {
    color: $pv-icon-color;
  }

  .e-pv-redaction-radio-option {
    margin-bottom: $pv-spacing-12;
  }

  .e-pv-redaction-page-mark-content {
    margin-left: $pv-spacing-12;
    @if $skin-name=='Material3' {
      margin-top: $pv-spacing-5;
    }
  }

  .e-pv-page-range-row {
    display: flex;
    margin-top: $pv-spacing-10;
    margin-bottom: $pv-spacing-10;
    height: $pv-height-32;
  }

  .e-pv-page-range-label {
    margin-right: $pv-spacing-10;
    margin-top: $pv-spacing-5;
    flex: 1;
  }

  .e-pv-page-range-input {
    flex: 2;
  }

  .e-pv-tr {
    height: $pv-height-50;
  }

  .e-pv-redaction-property-panel {
    z-index: 110;
  }

  .e-pv-blazor-page-mark-title {
    left: 37px;
    top: 10px;
  }

  .e-pv-redaction-property-panel-text,
  .e-pv-redaction-page-mark-dialog {
    font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: $pv-text-sm;
    line-height: $pv-line-height-28;
    @if $skin-name == 'Material3' {
      font-size: $pv-text-xs;
    }
  }

  .e-pv-redaction-can-overlay table.e-pv-redaction-font-table tr:first-of-type td:first-of-type,
  span.e-pv-redaction-property-panel-text,
  span.e-pv-redaction-opactity-value {
    color: $pv-redaction-panel-text-color;
  }
  .e-pv-mobile-view .e-pv-redaction-page-mark-content .e-pv-page-range-label,
  .e-pv-mobile-view .e-pv-redaction-page-mark-panel .e-pv-redaction-panel-title-container span.e-pv-annotation-tools-close-icon,
  .e-pv-mobile-view .e-pv-redaction-property-panel .e-pv-redaction-panel-title-container span.e-pv-annotation-tools-close-icon {
    color: $pv-redaction-panel-text-color;
  }

  .e-pv-sign-upload{
    @if $skin-name =='fluent2' {
      left: 44.5% !important;/* stylelint-disable-line declaration-no-important */
      top: 42% !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-notification-popup .e-dlg-content {
    @if $skin-name == 'fluent2' {
      overflow: hidden;
      overflow-x: hidden;
    }
  }

  .e-pv-canvas-signature-blazor {
    width: $pv-canvas-sign-width-blazor;
  }

  .e-pv-signature-uploadcanvas.e-pv-canvas-signature-blazor {
    @if $skin-name == 'tailwind3' {
      background-color: $content-bg-color !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-font-appearance-style {
    padding: $pv-font-div-padding;
    @if $skin-name == 'Material3' {
      max-width: $pv-canvas-sign-width;
    }
  }

  .e-pv-font-appearance-style-blazor {
    padding: $pv-font-div-padding-blazor;
  }

  .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-pv-left-align-icon.e-pv-icon.e-btn-icon.e-icon-left {
    @if ($skin-name == 'bootstrap4' or $skin-name == 'material') {
      padding: $pv-spacing-0 $pv-spacing-6;
      width: $pv-width-28;
    }
  }
  .e-pv-toolbar-tooltip {
    pointer-events: none;
  }

  .e-pdfviewer .e-dropdown-btn,
  .e-pdfviewer .e-dropdown-btn.e-btn {
    @if ($skin-name == 'Material3') {
      box-shadow: none;
    }
  }

  .e-pv-notification {
    background-color: $pv-organize-page-virtualEle-notification-color;
  }

  .e-pv-zoom-dropdown .e-dropdownbase .e-list-item {
    @if ($skin-name == 'highcontrast' or $skin-name == 'fluent2') {
      padding: $pv-spacing-0;
    }
  }

  .e-pv-blazor-bookmark-icon {
    white-space: pre-wrap;
  }

  .e-pv-blazor-bookmark-title {
    padding-right: $pv-spacing-24;
  }

  .e-pv-blazor-sidebar-title-container {
    z-index: 10;
  }

  .e-pv-blazor-comment-panel-resizer {
    display: none;
  }

  .e-pv-blazor-comments-title {
    opacity: .6;
    padding: $pv-spacing-8;
    float: left;
  }

  .e-pv-rtl .e-pv-blazor-comments-title {
    float: right;
  }

  .e-pv-blazor-sidebar-title {
    padding-left: $pv-spacing-5;
  }

  .e-pv-blazor-title-close-icon {
    border: none;
    background: none;
    float: right;
  }

  .e-pv-blazor-annotation-tools-close-icon {
    border-color: transparent;
    padding-top: $pv-spacing-8;
    background-color: transparent;
  }

  .e-pv-blazor-comment-panel-title {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .e-pv-blazor-comments-container {
    z-index: 1000;
  }

  .e-pv-blazor-accordion-content-container {
    display: block;
  }

  .e-pv-blazor-comments-div {
    min-height: $pv-height-60;
  }

  .e-pv-blazor-comment-class {
    border: $pv-border-1 #000;
    z-index: 1002;
    padding-left: $pv-spacing-30;
  }

  .e-pv-rtl .e-pv-blazor-comment-class {
    padding-right: $pv-spacing-30;
    padding-left: $pv-spacing-0;
  }

  .e-pv-blazor-annotation-thickness-popup-container-mobile {
    padding-top: $pv-spacing-8;
    padding-bottom: $pv-spacing-8;
    padding-left: $pv-spacing-16;
    padding-right: $pv-spacing-16;
    border-radius: $pv-radius-6;
    box-shadow: $pv-blazor-annotation-thickness-popup-container-mobile-box-shadow;
  }

  .e-pv-blazor-annotation-custom-fontsize {
    font-size: $pv-text-base;
  }

  .e-pv-blazor-annotation-opacity-popup-container-mobile {
    padding-top: $pv-spacing-8;
    padding-bottom: $pv-spacing-36;
    padding-left: $pv-spacing-16;
    padding-right: $pv-spacing-16;
    border-radius: $pv-radius-6;
    box-shadow: $pv-blazor-annotation-thickness-popup-container-mobile-box-shadow;
  }

  .e-pv-blazor-password {
    width: $pv-width-p100;
  }

  .e-pv-blazor-fileupload-element {
    position: fixed;
    left: -100em;
  }

  .e-pv-blazor-properties-container-custom-width {
    width: $pv-width-185;
  }

  .e-pv-blazor-properties-container-custom-margin {
    margin-left: $pv-spacing-32;
    width: $pv-width-185;
  }

  .e-pv-blazor-properties-line-stroke-color-container {
    margin-left: $pv-blazor-line-stroke-color-margin-left !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-dialog:has(.e-pv-properties-line-style-prop .e-pv-blazor-properties-container-custom-width) {
    @if $skin-name =='FluentUI' {
      height: $pv-height-465 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-blazor-zoom-dropdown .e-input{
    min-width: $pv-width-58 !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-pv-blazor-tbar-btn {
    width: $pv-width-auto;
  }

  .e-pv-blazor-handwritten-signature-canvas {
    height: $pv-height-340;
    background-color: $pv-white-color;
    border: $pv-border-1 dotted #bdbdbd;
  }

  .e-dialog.e-dlg-modal.e-pv-blazor-signature-dialog-blazor-height {
    display: block;
  }

  .e-pv-blazor-input {
    width: $pv-width-1;
    height: $pv-height-1;
    opacity: 0;
    position: absolute;
  }

  .e-pv-blazor-signature-apperance {
    @if $skin-name == 'tailwind3' {
      margin-top: $pv-spacing-12;
    }
    @else if $skin-name == 'fluent2' {
      margin-top: $pv-spacing-16;
    }
    @else if ($skin-name =='Material3' or $skin-name =='Material3-dark' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI') {
      margin-top: $pv-spacing-24;
    }
    @else {
      margin-top: $pv-spacing-30;
    }
  }

  .e-pv-blazor-type-div.e-pv-signature-apperance .e-input-group.e-control-container.e-control-wrapper.e-float-input {
    @if $skin-name == 'tailwind3' {
      margin-top: $pv-spacing-6;
    }
    @else if $skin-name == 'fluent2' {
      margin-top: $pv-spacing-10;
    }
    @else if ($skin-name =='Material3' or $skin-name =='Material3-dark' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI') {
      margin-top: $pv-spacing-18;
    }
  }

  .e-pv-signature-dialog-blazor-height .e-btn.e-dlg-closeicon-btn {
    @if ($skin-name == 'FluentUI') {
      left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-pv-blazor-signature-canvas {
    height: $pv-height-305;
    background-color: $pv-white-color;
    border: $pv-border-1 dotted #bdbdbd;
  }

  .e-pv-blazor-sign-upload {
    position: absolute;
    left: 308px;
    top: 139px;
  }

  .e-pv-blazor-sign-div {
    background-color: $pv-white-color;
    @if $skin-name == 'tailwind3' {
      margin-top: $pv-spacing-12;
    }
    @else if $skin-name == 'fluent2' {
      margin-top: $pv-spacing-16;
    }
    @else if ($skin-name =='Material3' or $skin-name =='Material3-dark' or $skin-name == 'highcontrast' or $skin-name == 'FluentUI') {
      margin-top: $pv-spacing-24;
    }
    @else {
      margin-top: $pv-spacing-30;
    }
  }

  .e-pv-blazor-signature-uploadcanvas {
    height: $pv-height-305;
    background-color: $pv-white-color;
    border: $pv-border-1 dotted #bdbdbd;
    z-index: 0;
  }

  .e-pv-blazor-canvas-signature {
    height: $pv-height-270;
    border: $pv-border-1 dotted #bdbdbd;
    background-color: $pv-white-color;
    margin-top: $pv-spacing-8;
  }

  .e-pv-blazor-type-div {
    margin-top: $pv-spacing-6;
  }

  .e-pv-sign-table {
    width: $pv-width-p100;
  }

  .e-pv-blazor-properties-visibility-style-prop {
    justify-content: flex-start;
    width: $pv-width-p50;
  }

  .e-pv-blazor-properties-form-field-visibility-main-div {
    width: $pv-width-94p;
  }

  .e-pv-blazor-required-div {
    width: $pv-width-p50;
  }

  .e-pv-blazor-formfield-maxlength-group {
    padding-left: $pv-spacing-12;
  }

  .e-pv-blazor-save-button {
    position: absolute;
    right: 15px;
    top: 7px;
  }

  .e-pv-blazor-font-family-prop-mobile {
    width: $pv-width-163;
  }

  .e-pv-blazor-font-size-prop-mobile {
    width: $pv-width-120;
  }

  .e-pv-blazor-font-length-prop-mobile {
    width: $pv-width-100;
  }

  .e-pv-blazor-comment-sftextbox .e-textbox.e-lib.e-input{
    max-height: $pv-height-112;
  }

  .e-pv-blazor-properties-formfield-textarea-list {
    cursor: default;
  }

  .e-blazor-pdfviewer .e-pv-signature-window .e-footer-content .e-pv-clearbtn {
    float: left;
  }

  .e-blazor-pdfviewer .e-dialog .e-footer-content .e-pv-clearbtn {
    float: left;
  }

  .e-blazor-pdfviewer .e-tab .e-content {
    overflow: inherit !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-blazor-pdfviewer .e-pv-properties-fill-color-icon,
  .e-pv-properties-stroke-color-icon {
    border-bottom: $pv-border-2 solid;
  }

  .e-blazor-pdfviewer .e-dialog.e-pv-notification-dialog {
    max-height: $pv-height-620;
    max-width: $pv-width-380;
  }

  .e-blazor-pdfviewer .e-input.e-pv-gotopage-dialog {
    max-width: $pv-width-p80;
  }

  .e-blazor-pdfviewer .e-pv-number-ofpages {
    padding-left: $pv-spacing-10;
  }

  .e-blazor-pdfviewer .e-toast-message {
    text-align: center;
  }

  .e-blazor-pdfviewer .e-pv-container-tooltip {
    width: $pv-width-auto !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-blazor-pdfviewer .e-pv-notification-icon {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjM1cHgiIGhlaWdodD0iMzFweCIgdmlld0JveD0iMCAwIDM1IDMxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTEuMiAoNTc1MTkpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPg0KICAgIDx0aXRsZT5Hcm91cCAzPC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZGVmcz48L2RlZnM+DQogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJDb3JydXB0ZWQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MTQuMDAwMDAwLCAtMzUzLjAwMDAwMCkiPg0KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0OTQuMDAwMDAwLCAyODUuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLjAwMDAwMCwgNjguMTg0NDc0KSI+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS4yMjM0NzA4LDEwLjM1NzYwMjYgTDEyLjY1MzYzNywyMy40MDU1MTA2IEwxNC4xMzIwOTA1LDI2Ljk5MTI0OTUgTDE5LjM2MTc3ODksMjYuOTkxMjQ5NSBDMjAuNDQwMjUwNywxNy44NjA2NDE1IDIwLjY5MzgwOTcsMTIuMzE2MDkyNSAyMC4xMjI0NTU4LDEwLjM1NzYwMjYgQzE5LjU1MTEwMTksOC4zOTkxMTI3NCAxNy45MTgxMDY5LDguMzk5MTEyNzQgMTUuMjIzNDcwOCwxMC4zNTc2MDI2IFoiIGlkPSJQYXRoLTExIiBmaWxsPSIjMEUwRTBFIj48L3BhdGg+DQogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMS42MjM4MDkxLDMwLjM4NzQxMDEgQzMzLjgyOTUxMDUsMzAuMzg3NDEwMSAzNC43MjA5MTk0LDI4LjgzODYyNDQgMzMuNjExOTMzMiwyNi45MjMxMDI4IEwxOS4yODk5MDMsMi4xODUwNTA2OCBDMTguMTgyMjEyMiwwLjI3MTc2NjU5NSAxNi4zODc1ODYsMC4yNjk1MjkwNjkgMTUuMjc4NTk5OCwyLjE4NTA1MDY4IEwwLjk1NjU2OTY4NSwyNi45MjMxMDI4IEMtMC4xNTExMjExMDMsMjguODM2Mzg2OCAwLjc0NDI0ODg4MiwzMC4zODc0MTAxIDIuOTQ0NjkzNzksMzAuMzg3NDEwMSBMMzEuNjIzODA5MSwzMC4zODc0MTAxIFogTTE1LjYxNzU4NDgsMjYuMzg3NDEwMSBMMTUuNjE3NTg0OCwyMy4wNTQwNzY3IEwxOC45NTA5MTgxLDIzLjA1NDA3NjcgTDE4Ljk1MDkxODEsMjYuMzg3NDEwMSBMMTUuNjE3NTg0OCwyNi4zODc0MTAxIFogTTE1LjYxNzU4NDgsMjAuNzIwNzQzNCBMMTUuNjE3NTg0OCwxMC4wNTQwNzY3IEwxOC45NTA5MTgxLDEwLjA1NDA3NjcgTDE4Ljk1MDkxODEsMjAuNzIwNzQzNCBMMTUuNjE3NTg0OCwyMC43MjA3NDM0IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0VGQzAwMiI+PC9wYXRoPg0KICAgICAgICAgICAgICAgIDwvZz4NCiAgICAgICAgICAgIDwvZz4NCiAgICAgICAgPC9nPg0KICAgIDwvZz4NCjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: 38px 33px;
    height: $pv-height-33;
  }

  .e-blazor-pdfviewer .e-pv-more-options-button {
    visibility: hidden;
  }

  .e-blazor-pdfviewer .e-inplaceeditor .e-editable-overlay-icon::before,
  .e-inplaceeditor-tip .e-editable-overlay-icon::before {
    content: '';
  }

  .e-blazor-pdfviewer.e-pdfviewer .e-inplaceeditor .e-editable-value-container .e-editable-value {
    border-bottom: $pv-border-0;
  }

  .e-blazor-pdfviewer .e-inplaceeditor .e-editable-value-container:hover .e-editable-overlay-icon {
    display: none;
    visibility: hidden;
  }

  .e-blazor-pdfviewer .e-pv-comments-container .e-pv-new-comments-div.e-control.e-inplaceeditor.e-lib.e-pv-comments-leave {
    display: none !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-blazor-pdfviewer .e-pv-comments-container.e-pv-comments-border .e-pv-new-comments-div.e-control.e-inplaceeditor.e-lib.e-pv-comments-leave {
    display: block !important;/* stylelint-disable-line declaration-no-important */
    padding-left: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-blazor-pdfviewer.e-pdfviewer .e-treeview .e-list-item {
    white-space: nowrap;
  }

  .e-blazor-pdfviewer .e-pv-bookmark-view .e-headertemplate-text.header {
    width: $pv-width-p100;
  }

  .e-blazor-pdfviewer .e-pv-bookmark-view .e-listview .e-list-header {
    padding: $pv-spacing-0;
  }

  .e-blazor-pdfviewer .e-multiline-textbox .e-inplaceeditor .e-editable-value-container .e-editable-value {
    white-space: pre-line;
  }
  .e-blazor-pdfviewer .e-pv-rtl .e-inplaceeditor .e-editable-value-container .e-editable-value {
    margin: $pv-spacing-0 $pv-spacing-0 $pv-spacing-0 $pv-spacing-28;
  }

  .e-pv-block {
    display: block !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-none {
    display: none !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-flex {
    display: flex !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-blazor-form-designer-property-panel {
    inset: 0;
    height: $pv-height-p100;
    width: $pv-width-p100;
    position: absolute;
  }

  .e-pv-blazor-annotation-toolbar-main {
    bottom: 0;
    position: absolute;
    width: $pv-width-p100;
    float: left;
  }

  .e-pv-blazor-formdesigner-toolbar-main {
    bottom: 0;
    position: absolute;
    width: $pv-width-p100;
    float: left;
  }

  .e-blazor-pdfviewer .e-overlay .e-pv-organize-view-icon {
    color: $pv-thumbnail-icon-disable-color;
  }

  .e-blazor-pdfviewer .e-mobile-more-option {
    @if $skin-name == 'bootstrap4' {
      transform: rotate(90deg);
    }
    .e-pv-more-icon.e-pv-icon {
      @if $skin-name == 'bootstrap4' {
        margin-top: $pv-spacing-5;
      }
    }
  }

  .e-pv-blazor-main-container {
    min-height: $pv-height-500;
  }

  .e-pv-bg-green {
    background-color: $pv-green-color;
  }

  .e-pv-bg-blue {
    background-color: $pv-blue-color;
  }

  .e-pv-bg-orange {
    background-color: $pv-orange-color;
  }

  .e-pv-bg-red {
    background-color: $pv-red-color;
  }

  .e-pv-blazor-comments-panel-text {
    padding-top: $pv-spacing-55p !important;/* stylelint-disable-line declaration-no-important */
    text-align: center;
    padding-left: $pv-spacing-0;
  }

  .e-pv-blazor-signature-text {
    margin: $pv-spacing-15;
    width: $pv-width-311;
    height: $pv-height-88;
    color: $pv-signature-font-color;
  }

  .e-pv-selected-signature-font {
    border-color: $pv-selected-signature-color;
  }

  .e-pv-font-helvetica {
    font-family: 'Helvetica';
  }

  .e-pv-font-times {
    font-family: 'Times New Roman';
  }

  .e-pv-font-courier {
    font-family: 'Courier';
  }

  .e-pv-font-symbol {
    font-family: 'Symbol';
  }

  .e-pv-signature-text {
    overflow: hidden;
    padding: $pv-spacing-5;
    place-content: center;
    position: relative;
  }

  .e-pv-signature-text::after {
    content: '';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: $pv-width-p100;
    height: $pv-height-1-5em;
    background: linear-gradient(to right, transparent, $pv-white-color 90%);
  }

  .e-pv-modern-navigation-toolbar {
    right: 0;
    flex-direction: column;
    align-items: center;
    padding-top: $pv-modern-sidebar-padding-top;
    gap: $pv-modern-sidebar-btn-gap;
    border-width: $pv-modern-panel-border-width;
    width: $pv-modern-sidebar-width;

    .e-pv-ai-button:not(.e-active) {
      @if $skin-name == 'fabric-dark' {
        color: $pv-modern-sidebar-btn-color;
      }
    }

    .e-control.e-tooltip {
      display: none;
    }

    .e-btn {
      width: $pv-modern-sidebar-btn-width;
      height: $pv-modern-sidebar-btn-height;
      margin: $pv-spacing-unset;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
        border-radius: $pv-radius-4;
      }
      @else if $skin-name == 'material' or $skin-name == 'material-dark' {
        padding: $pv-spacing-0;
        line-height: $pv-line-height-24;
      }
      @else if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
        padding: $pv-spacing-0;
      }
      @else if $skin-name == 'fluent2' {
        padding-top: $pv-spacing-3;
      }
      @else if $skin-name == 'highcontrast' {
        padding: $pv-spacing-7;
      }
      @else if $skin-name == 'Material3' or $skin-name == 'tailwind3'{
        border: $pv-border-0 !important;/* stylelint-disable-line declaration-no-important */
      }

      .e-btn-icon {
        margin: $pv-spacing-unset;
        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
          margin-top: $pv-spacing-4;
        }
        font-size: $pv-modern-sidebar-btn-font-size;
        @if $skin-name == 'fluent2' {
          vertical-align: unset;
        }
      }
    }

    .e-btn.e-outline.e-active {
      @if $skin-name == 'fluent2' {
        background: $pv-modern-sidebar-btn-selected-background !important;/* stylelint-disable-line declaration-no-important */
        border: $pv-modern-sidebar-btn-selected-border !important;/* stylelint-disable-line declaration-no-important */
        color: $pv-modern-sidebar-btn-selected-color !important;/* stylelint-disable-line declaration-no-important */
        outline: none !important;/* stylelint-disable-line declaration-no-important */
      }
    }
    .e-btn.e-outline:hover:not(:disabled) {
      @if $skin-name == 'fluent2' {
        background-color: $pv-item-selection-background-color;
        color: var(--color-sf-toolbar-icon-color);
      }
    }

    .e-btn.e-pv-ai-button.e-outline.e-active {
      @if $skin-name == 'fluent2' or $skin-name == 'Material3' {
        background: $pv-modern-sidebar-ai-btn-selected-background !important;/* stylelint-disable-line declaration-no-important */
        color: $pv-modern-sidebar-ai-btn-selected-color !important;/* stylelint-disable-line declaration-no-important */
      }
    }

    .e-btn.e-outline:disabled {
      background: none !important;/* stylelint-disable-line declaration-no-important */
      @if $skin-name == 'bootstrap5' {
        color: $icon-color-disabled;/* stylelint-disable-line declaration-no-important */
      }
    }

    .e-pv-side-panel-separator {
      width: $pv-modern-sidebar-separator-width;
      border: $pv-modern-sidebar-separator-border;
      margin: $pv-modern-sidebar-separator-margin;
    }
  }

  .e-pv-modern-side-panel {
    width: $pv-width-p25;
    position: absolute;
    height: $pv-height-p100;
    background: $pv-modern-panel-background;
    border: $pv-modern-panel-border;
    z-index: 101;
    right: $pv-modern-panel-right;

    .e-pv-modern-side-panel-resizer {
      top: 0;
    }
  }

  .e-pv-modern-mobile-template-container {
    width: $pv-width-p100;
    height: $pv-height-p100;
    position: absolute;
    top: 0;
    z-index: 1001;
    background: $pv-modern-panel-background;
    border: $pv-modern-panel-border;

    .e-pv-modern-side-panel-content-container .e-pv-bookmark-container {
      position: absolute;
      top: 0;
      width: $pv-width-p100;

      .e-pv-bookmark-view {
        border: none;
      }
    }
  }

  .e-pv-modern-mobile-template-container .e-pv-modern-side-panel-container,
  .e-pv-modern-side-panel .e-pv-modern-side-panel-container {
    height: $pv-height-p100;
    width: $pv-width-p100;

    .e-pv-modern-side-panel-header {
      height: $pv-modern-panel-header-height;
      border-bottom: $pv-modern-panel-header-border;
      display: flex;
      align-items: center;
      @if $skin-name == 'FluentUI' {
        padding-right: $pv-spacing-3;
      }

      .e-pv-modern-side-panel-header-close {
        position: unset;
      }

      .e-pv-icon {
        font-size: $pv-modern-sidebar-btn-font-size;
      }

      .e-pv-modern-side-panel-header-title {
        font-size: $pv-text-sm;
        font-weight: $pv-font-weight-semibold;
        padding: $pv-spacing-12;
        flex: 1;
        color: $pv-modern-panel-font-color;
      }

      .e-pv-side-panel-close-button.e-btn,
      .e-pv-side-panel-reset-button.e-btn {
        background: $pv-thumbnail-view-button-background;
        border: none;
        box-shadow: none;
        height: $pv-height-40;
        vertical-align: middle;
        width: $pv-width-32;
        padding: $pv-spacing-6 $pv-spacing-0 $pv-spacing-1;
        color: $pv-icon-color;
      }

      .e-pv-comment-panel-title-close-div {
        position: unset !important;/* stylelint-disable-line declaration-no-important */
        padding: $pv-spacing-unset;

        .e-pv-more-icon {
          display: unset;
        }
      }
    }

    .e-pv-modern-side-panel-content-container {
      height: $pv-modern-panel-template-height;
      width: $pv-width-p100;

      .e-pv-modern-side-panel-template-content,
      .e-pv-modern-side-panel-template-container {
        width: $pv-width-p100;
        height: $pv-height-p100;
      }
      .e-pv-comment-panel {
        width: $pv-width-p100;
        height: $pv-modern-panel-template-height !important;/* stylelint-disable-line declaration-no-important */
        top: unset !important;/* stylelint-disable-line declaration-no-important */
        bottom: unset !important;/* stylelint-disable-line declaration-no-important */
        border-width: $pv-border-0;

        .e-pv-comments-content-container {
          height: $pv-height-p100;
          border: none;

          .e-pv-blazor-comments-panel-text {
            display: flex;
            padding: $pv-spacing-unset;
            align-items: center;
            height: $pv-height-p100;
            justify-content: center;
            color: $pv-modern-panel-font-color;
          }

          .e-pv-blazor-comments-panel-text.e-pv-none {
            display: none;
          }
        }
      }

      .e-pv-sidebar-content {
        width: $pv-width-p100;

        .e-pv-thumbnail-view {
          justify-content: center;
          width: $pv-width-p100;
        }
      }
    }
  }

  .e-pv-mobile-view .extract_delete_center_div {
    @if $skin-name =='material' or $skin-name =='material-dark' or $skin-name =='material3' or $skin-name =='material3-dark' or $skin-name =='tailwind' or $skin-name =='tailwind-dark' {
      margin-left: 10px !important;/* stylelint-disable-line declaration-no-important */
    }

    @else {
      margin-left: 12px !important;/* stylelint-disable-line declaration-no-important */
    }
  }
  .extract_delete_center_div {
    @if $skin-name =='bootstrap4' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5-dark' {
      margin-left: 8px;
    }
    @else {
      margin-left: 12px;
    }
  }

  .e-pv-mobile-view .e-pv-extract-toolbar .e-scroll-nav {
    -webkit-transform: skewX(-1deg) translateX(6px) !important;/* stylelint-disable-line declaration-no-important */
    transform: skewX(-1deg) translateX(6px) !important;/* stylelint-disable-line declaration-no-important */
    width: 56px;
  }

  .e-pv-mobile-view .e-pv-extract-toolbar .e-scroll-nav .e-nav-arrow {
    font-size: 14px;
    -webkit-transform: skewX(4deg);
    transform: skewX(4deg);
  }

  .e-pv-extract-toolbar {
    height: 48px !important;/* stylelint-disable-line declaration-no-important */
    display: flex !important;/* stylelint-disable-line declaration-no-important */
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 0;
    border-width: 0 0 1px;
  }

  .e-pv-center-group-style {
    width: 100%;
    margin-left: 0 !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-pv-center-items-style {
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }

  .e-pv-modern-navigation-toolbar.e-pv-rtl {
    left: 0;
  }

  .e-pv-modern-side-panel.e-pv-rtl {
    left: $pv-modern-panel-right;
  }

  .e-pv-mobile-splitter-container {
    position: absolute !important;/* stylelint-disable-line declaration-no-important */
    bottom: 0;
    border: none !important;/* stylelint-disable-line declaration-no-important */
    .e-resizable-split-bar {
      z-index: 1001;
      background: none !important;/* stylelint-disable-line declaration-no-important */

      .e-resize-handler {
        margin-top: $pv-modern-resize-handler-margin;
      }

      .e-resize-handler::before {
        content: $pv-modern-resize-handler-icon-content !important;/* stylelint-disable-line declaration-no-important */
        font-size: $pv-text-lg !important;/* stylelint-disable-line declaration-no-important */
        transform: rotate(0deg) !important;/* stylelint-disable-line declaration-no-important */
      }
    }

    .e-pv-navigation-splitter-pane {
      z-index: 101;
      background: $pv-modern-splitter-background;
      border-radius: $pv-modern-splitter-border-radius;
      border: $pv-modern-splitter-border;

      .e-pv-mobile-navigation-menu,
      .e-pv-mobile-navigation-menu ul {
        width: $pv-width-p100;
      }

      .e-pv-mobile-navigation-menu ul {
        padding: $pv-modern-splitter-menu-padding !important;/* stylelint-disable-line declaration-no-important */
      }

      .e-pv-mobile-navigation-menu {
        padding-top: $pv-spacing-10;

        ul.e-menu {
          .e-separator.e-menu-item {
            @if $skin-name == 'FluentUI' $skin-name == 'bootstrap5.3' or $skin-name == 'highcontrast' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'Material3' {
              margin: $pv-spacing-2 $pv-spacing-0;
            }
          }
          .e-menu-item:not(.e-separator)  {
            height: $pv-modern-splitter-menu-item-height !important;/* stylelint-disable-line declaration-no-important */
            line-height: $pv-modern-splitter-menu-item-height !important;/* stylelint-disable-line declaration-no-important */
            padding: $pv-modern-splitter-menu-item-padding !important;/* stylelint-disable-line declaration-no-important */
            font-size: $pv-modern-splitter-menu-item-font-size !important;/* stylelint-disable-line declaration-no-important */
            margin: $pv-spacing-2 $pv-spacing-0;
            @if $skin-name != 'FluentUI' {
              border-radius: $pv-radius-4;
            }

            .e-menu-icon {
              line-height: $pv-modern-splitter-menu-item-height !important;/* stylelint-disable-line declaration-no-important */
              font-size: $pv-modern-splitter-menu-item-icon-size !important;/* stylelint-disable-line declaration-no-important */
            }
          }
        }
      }
    }
  }

  .e-pv-modern-side-panel ~ .e-pv-sidebar-toolbar-splitter {
    background: none;
  }

  .e-pv-splitter-open {
    animation: SplitterOpen 400ms ease-out forwards;
  }

  .e-pv-splitter-close {
    animation: SplitterClose 400ms ease-in forwards;
  }

  @keyframes SplitterOpen {
    from {
      height: $pv-height-0;
    }

    to {
      height: calc($pv-height-p100 - $pv-height-40);
    }
  }

  @keyframes SplitterClose {
    from {
      height: calc($pv-height-p100 - $pv-height-40);
    }

    to {
      height: $pv-height-0;
    }
  }
}

@include export-module('pdfviewer-bootstrap-icons') {
  .e-pdfviewer {
    .e-pv-icon::before {
      font-family: 'e-icons';
    }

    .e-pv-icon-search::before {
      font-family: 'e-icons';
      font-size: 12px;
    }

    .e-pv-open-document-icon::before {
      content: '\ec2b';
    }

    .e-pv-download-document-icon::before {
      content: '\ec32';
    }

    .e-pv-print-document-icon::before {
      content: '\ebd2';
    }

    .e-pv-first-page-navigation-icon::before {
      content: '\ec2c';
    }

    .e-pv-rotate-right-icon::before{
      content: '\e971';
    }

    .e-pv-organize-view-icon::before{
      content: '\e117';
    }

    .e-pv-organize-view-disable-icon::before{
      color: $pv-thumbnail-icon-disable-color;
      content: '\e117';
    }

    .e-pv-organize-view-selection-icon::before{
      color: $pv-thumbnail-icon-selection-color;
      content: '\e117';
    }

    .e-pv-rotate-left-icon::before{
      content: '\e970';
    }

    .e-pv-previous-page-navigation-icon::before,
    .e-pv-prev-search-icon::before {
      content: '\ec2d';
    }

    .e-pv-next-page-navigation-icon::before,
    .e-pv-next-search-icon::before {
      content: '\ec2e';
    }

    .e-pv-last-page-navigation-icon::before {
      content: '\ec2f';
    }

    .e-pv-zoom-out-icon::before {
      content: '\ec30';
      line-height: $pv-toolbaritem-btn-line-height;
    }

    .e-pv-zoom-in-icon::before {
      content: '\ec31';
      line-height: $pv-toolbaritem-btn-line-height;
    }

    .e-pv-thumbnail-view-icon::before {
      content: '\ebd9';
    }

    .e-pv-thumbnail-view-disable-icon::before {
      color: $pv-thumbnail-icon-disable-color;
      content: '\ebd9';
    }

    .e-pv-thumbnail-view-selection-icon::before {
      color: $pv-thumbnail-icon-selection-color;
      content: '\ebd9';
    }

    .e-pv-bookmark-icon::before {
      content: '\ec33';
    }

    .e-pv-bookmark-disable-icon::before {
      color: $pv-thumbnail-icon-disable-color;
      content: '\ec33';
    }

    .e-pv-bookmark-selection-icon::before {
      color: $pv-thumbnail-icon-selection-color;
      content: '\ec33';
    }

    .e-pv-title-close-icon::before,
    .e-pv-annotation-tools-close-icon::before,
    .e-pv-annotation-popup-close::before {
      content: '\ebc0';
      font-size: $pv-title-close-font-size;
    }

    .e-pv-resize-icon::before {
      content: '\e84b';
      font-size: 10px;
    }

    .e-pv-text-select-tool-icon::before {
      content: '\ebce';
    }

    .e-pv-pan-tool-icon::before {
      content: '\ebcb';
    }

    .e-pv-text-search-icon::before {
      content: '\ebbe';
    }

    .e-pv-search-icon::before {
      content: '\ebbe';
      font-family: 'e-icons';
    }

    .e-pv-search-close::before {
      content: '\ebc0';
      font-family: 'e-icons';
    }

    .e-pv-formdesigner-icon::before {
      content: '\e90c';
    }

    .e-pv-annotation-icon::before {
      content: '\ebd8';
    }

    .e-pv-annotation-color-icon::before {
      content: '\ebca';
    }

    .e-pv-annotation-stroke-icon::before {
      content: '\e668';
    }

    .e-pv-annotation-opacity-icon::before {
      content: '\ebcc';
    }

    .e-pv-annotation-thickness-icon::before {
      content: '\ebd7';
    }

    .e-pv-annotation-delete-icon::before {
      content: '\ebcd';
    }

    .e-pv-undo-icon::before {
      content: '\ebc5';
    }

    .e-pv-redo-icon::before {
      content: '\ebd3';
    }

    .e-pv-more-icon::before {
      content: '\ebc7';
    }

    .e-pv-backward-icon::before {
      content: '\e94b';
    }

    .e-pv-notification-icon {
      background-image: $pv-corrupted-notification-background-image;
      background-repeat: $pv-corrupted-notification-background-repeat;
      background-size: $pv-corrupted-notification-background-size;
      height: $pv-corrupted-notification-height;
    }

    .e-pv-notification-icon-rtl {
      background-image: $pv-corrupted-notification-background-image;
      background-position: $pv-corrupted-notification-background-position;
      background-repeat: $pv-corrupted-notification-background-repeat;
      background-size: $pv-corrupted-notification-background-size;
      height: $pv-corrupted-notification-height;
    }

    .e-pv-textbox-icon::before {
      content: '\e89f';
    }

    .e-pv-password-icon::before {
      content: '\e91a';
    }

    .e-pv-checkbox-icon::before {
      content: '\e90b';
    }

    .e-pv-radiobutton-icon::before {
      content: '\e90f';
    }

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

    .e-pv-listbox-icon::before {
      content: '\e89e';
    }

    .e-pv-annotation-calibrate-icon::before {
      content: '\e678';
    }
  }

  .e-pv-download-document-icon.e-menu-icon::before {
    content: '\ec32';
  }

  .e-pv-bookmark-icon.e-menu-icon::before {
    content: '\ec33';
  }

  .e-pv-save-icon.e-menu-icon::before {
    content: '\e701';
  }

  .e-pv-save-as-icon.e-menu-icon::before {
    content: '\e703';
  }

  .e-pv-highlight-icon::before {
    content: '\ebc6';
    font-family: 'e-icons';
  }

  .e-pv-underline-icon::before {
    content: '\ebc8';
    font-family: 'e-icons';
  }

  .e-pv-strikethrough-icon::before {
    content: '\ebc9';
    font-family: 'e-icons';
  }

  .e-pv-squiggly-icon::before {
    content: '\e170';
    font-family: 'e-icons';
  }

  .e-pv-copy-icon::before {
    content: '\e70a';
    font-family: 'e-icons';
  }

  .e-pv-import-icon::before{
    content: '\e166';
    font-family: 'e-icons';
  }

  .e-pv-page-zoom-icon::before{
    content: '\e657';
    font-family: 'e-icons';
  }

  .e-pv-page-zoom-increase-icon::before{
    content: '\ec31';
    font-family: 'e-icons';
  }

  .e-pv-page-zoom-decrease-icon::before{
    content: '\ec30';
    font-family: 'e-icons';
  }

  .e-pv-stamp-icon::before {
    content: '\ebda';
  }

  .e-pv-shape-line-icon::before {
    content: '\e668';
    font-family: 'e-icons';
  }

  .e-pv-shape-arrow-icon::before {
    content: '\e669';
    font-family: 'e-icons';
  }

  .e-pv-shape-rectangle-icon::before {
    content: '\e670';
    font-family: 'e-icons';
  }

  .e-pv-shape-circle-icon::before {
    content: '\e671';
    font-family: 'e-icons';
  }

  .e-pv-shape-pentagon-icon::before {
    content: '\e672';
    font-family: 'e-icons';
  }

  .e-pv-annotation-shape-icon::before {
    content: '\ebd5';
  }

  .e-pv-cut-icon::before {
    content: '\e604';
    font-family: 'e-icons';
  }

  .e-pv-paste-icon::before {
    content: '\e601';
    font-family: 'e-icons';
  }

  .e-pv-delete-icon::before {
    content: '\ebcd';
    font-family: 'e-icons';
  }

  .e-pv-properties-fill-color-icon::before {
    content: '\ebca';
    font-family: 'e-icons';
  }

  .e-pv-properties-stroke-color-icon::before {
    content: '\e668';
    font-family: 'e-icons';
  }

  .e-pv-comment-icon::before {
    content: '\e680';
    font-family: 'e-icons';
  }

  .e-pv-property-icon::before {
    content: '\e199';
    font-family: 'e-icons';
  }

  .e-pv-comment-selection-icon::before {
    color: $pv-thumbnail-icon-selection-color;
    content: '\e680';
    font-family: 'e-icons';
  }

  .e-pv-comment-panel-icon::before {
    content: '\eb23';
    font-family: 'e-icons';
  }

  .e-pv-accepted-icon::before {
    color: $pv-status-icon-color;
    content: '\e682';
    font-family: 'e-icons';
    font-size: $pv-status-icon-font-size;
    padding: $pv-accepted-icon-padding;
    position: $pv-status-icon-position;
  }

  .e-pv-rejected-icon::before {
    color: $pv-status-icon-color;
    content: '\e683';
    font-family: 'e-icons';
    font-size: $pv-status-icon-font-size;
    padding: $pv-rejected-icon-padding;
    position: $pv-status-icon-position;
  }

  .e-pv-completed-icon::before {
    color: $pv-status-icon-color;
    content: '\e614';
    font-family: 'e-icons';
    font-size: $pv-status-icon-font-size;
    padding: $pv-status-icon-padding;
    position: $pv-status-icon-position;
  }

  .e-pv-cancelled-icon::before {
    color: $pv-status-icon-color;
    content: '\e60a';
    font-family: 'e-icons';
    font-size: $pv-status-icon-font-size;
    padding: $pv-status-icon-padding;
    position: $pv-status-icon-position;
  }

  .e-pv-scale-ratio-icon::before {
    content: '\e678';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-distance-icon::before {
    content: '\e673';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-perimeter-icon::before {
    content: '\e674';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-area-icon::before {
    content: '\e675';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-radius-icon::before {
    content: '\e676';
    font-family: 'e-icons';
  }

  .e-pv-calibrate-volume-icon::before {
    content: '\e677';
    font-family: 'e-icons';
  }

  .e-pv-freetext-icon::before {
    content: '\ebbf';
    font-family: 'e-icons';
  }

  .e-pv-annotation-textalign-icon::before {
    content: '\e33a';
    font-family: 'e-icons';
  }

  .e-pv-annotation-textcolor-icon::before {
    content: '\e34c';
    font-family: 'e-icons';
  }

  .e-pv-annotation-textprop-icon::before {
    content: '\eb07';
    font-family: 'e-icons';
  }

  .e-pv-left-align-icon::before {
    content: '\e33a';
    font-family: 'e-icons';
  }

  .e-pv-right-align-icon::before {
    content: '\e34d';
    font-family: 'e-icons';
  }

  .e-pv-center-align-icon::before {
    content: '\e35e';
    font-family: 'e-icons';
  }

  .e-pv-justfiy-align-icon::before {
    content: '\e334';
    font-family: 'e-icons';
  }

  .e-pv-bold-icon::before {
    content: '\eb2f';
    font-family: 'e-icons';
  }

  .e-pv-italic-icon::before {
    content: '\eb1d';
    font-family: 'e-icons';
  }

  .e-pv-strikeout-icon::before {
    content: '\ebc9';
    font-family: 'e-icons';
  }

  .e-pv-underlinetext-icon::before {
    content: '\ebc8';
    font-family: 'e-icons';
  }

  .e-pv-superscript-icon::before {
    content: '\e352';
    font-family: 'e-icons';
  }

  .e-pv-subscript-icon::before {
    content: '\e357';
    font-family: 'e-icons';
  }

  .e-pv-handwritten-icon::before {
    content: '\e767';
    font-family: 'e-icons';
  }

  .e-pv-inkannotation-icon::before {
    content: '\ebc4';
    font-family: 'e-icons';
  }

  .e-pv-delete::before {
    content: '\e94a';
    font-family: 'e-icons';
  }

  .e-pv-eye-icon::before {
    content: '\e345';
    cursor: $pv-eye-icon-hover-cursor;
    font-family: 'e-icons';
    font-size: $pv-eye-icon-font-size;
    padding: $pv-eye-icon-padding;
  }

  .e-pv-eye-slash-icon::before {
    content: '\e721';
    cursor: $pv-eye-icon-hover-cursor;
    font-family: 'e-icons';
    font-size: $pv-eye-icon-font-size;
    padding: $pv-eye-icon-padding;
  }

  .e-pv-button-icon::before {
    content: '\e172';
    font-family: 'e-icons';
  }

  .e-pv-drag-and-drop-icon::before {
    content: '\e726';
    font-family: 'e-icons';
  }

  .e-pv-redaction-icon::before {
    content: '\e1a2';
    font-family: 'e-icons';
  }
  .e-pv-mark-for-redaction-icon::before {
    content: '\e20a';
    font-family: 'e-icons';
  }
  .e-pv-redact-pages-icon::before {
    content: '\E93b';
    font-family: 'e-icons';
  }
  .e-pv-text-redact-icon::before {
    content: '\e1b1';
    font-family: 'e-icons';
  }
  .e-pv-redaction-panel-icon::before {
    content: '\e1a3';
    font-family: 'e-icons';
  }
  .e-pv-redact::before {
    content: '\e167';
    font-family: 'e-icons';
  }
  .e-pv-refresh::before {
    content: '\e975';
    font-family: 'e-icons';
  }
  .e-pv-multiple-comment::before {
    content: '\e98a';
    font-family: 'e-icons';
  }
  .e-pv-extract-page-icon::before {
    content: '\e1c2';
    font-family: 'e-icons';
  }
}

@include export-module('pdfviewer-bigger') {
  .e-bigger .e-pv-icon-search {
    font-size: $pv-icon-font-size;
  }

  .e-bigger .e-pv-icon {
    @if $skin-name =='FluentUI' {
      font-size: $pv-text-base;
    }
  }

  .e-bigger .e-pv-redaction-property-panel-text,
  .e-bigger .e-pv-redaction-page-mark-dialog {
    font-size: $pv-text-base;
    @if $skin-name == 'Material3' {
      font-size: $pv-text-sm;
    }
  }

  .e-bigger .e-pv-overlaytext {
    margin-left: $pv-spacing-20;
  }
  .e-bigger .e-dialog.e-pv-redaction-properties-dialog {
    width: $pv-width-430 !important;/* stylelint-disable-line declaration-no-important */
  }
  .e-bigger .e-pv-redaction-font-family {
    width: $pv-width-200;
  }

  .e-bigger .e-pv-blazor-redaction-font-size {
    width: $pv-width-92;
  }
  .e-bigger .e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-opacity-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-stroke-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-thickness-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-shapes-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-calibrate-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-textprop-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-handwritten-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-menu-icon,
  .e-bigger .e-pv-icon-search,
  .e-bigger .e-pv-icon {
    @if $skin-name =='bootstrap4' {
      font-size: $pv-icon-font-size-big;
    }
  }

  .e-bigger .e-pv-mobile-annotation-toolbar .e-pv-tbar-btn {
    @if $skin-name =='fluent2' {
      margin-left: $pv-spacing-8 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-mobile-toolbar.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer),
  .e-toolbar.e-bigger .e-toolbar-item:not(.e-separator):not(.e-spacer) {
    @if $skin-name =='tailwind3' {
      min-width: $pv-width-36 !important;/* stylelint-disable-line declaration-no-important */
      padding: $pv-spacing-8 $pv-spacing-6;
    }
  }

  .e-bigger .e-pv-mobile-view .e-pv-organize-toolbar.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
    @if $skin-name =='tailwind3' {
      min-width: $pv-width-40 !important;/* stylelint-disable-line declaration-no-important */
      width: $pv-width-40 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-mobile-annotation-toolbar .e-toolbar-item {
    @if $skin-name =='fluent2' {
      padding: $pv-spacing-4 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-properties-line-opacity-container .e-slider-container {
    height: $pv-height-40 !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-pv-toolbar,
  .e-bigger .e-pv-annotation-toolbar {
    height: $pv-toolbar-height-big;
  }

  .e-bigger .e-pv-page-range-row {
    height: $pv-height-48;
  }
  .e-bigger .e-pv-toolbar.e-toolbar:not(.e-pv-mobile-toolbar) .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    @if $skin-name =='bootstrap4' {
      padding-bottom: $pv-toolbar-items-padding-bottom-big;
      padding-top: $pv-toolbar-items-padding-top-big;
    }
  }

  .e-bigger .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon,
  .e-bigger .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
    @if ($skin-name =='FluentUI') {
      padding-bottom: $pv-spacing-2;
    }

    @else if ($skin-name =='Material3' or $skin-name =='fluent2') {
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
    }

    @else {
      padding-bottom: $pv-spacing-0;
    }
  }

  .e-bigger .e-pv-redaction-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-btn-icon {
    padding: $pv-spacing-0;
  }

  .e-bigger .e-pv-sidebar-title-container {
    @if $skin-name =='bootstrap4' {
      height: $pv-sidebar-title-container-height-big;
    }
  }

  .e-bigger .e-pv-sidebar-title-container {
    @if $skin-name =='bootstrap4' {
      height: $pv-sidebar-title-container-height-big;
    }
  }

  .e-bigger .e-pv-blazor-main-container .e-btn .e-btn-icon.e-icon-left,
  .e-bigger .e-pv-blazor-main-container .e-css.e-btn .e-btn-icon.e-icon-left {
    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
      margin-left: $pv-spacing-0;
      width: $pv-width-2em;
    }
  }

  .e-bigger .e-pv-blazor-main-container .e-dropdown-btn .e-btn-icon {
    @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI') {
      font-size: $pv-font-size-inherit;
    }
  }

  .e-bigger .e-pv-blazor-main-container .e-menu-container ul.e-menu:not(.e-vertical) {
    @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark') {
      padding: $pv-spacing-0;
    }
  }

  .e-bigger .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
  .e-bigger .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
  .e-bigger .e-pv-mobile-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn,
  .e-bigger .e-pv-formdesigner-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      min-width: $pv-width-38;
    }
    @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
      min-width: $pv-width-40;
    }
    @if ($skin-name == 'FluentUI') {
      min-width: $pv-width-48;
    }
  }

  .e-bigger .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl .e-input.e-control {
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2') {
      padding-bottom: $pv-spacing-6;
    }
  }

  .e-bigger .e-pv-annotation-color-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-stroke-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-shapes-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-calibrate-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-textcolor-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret),
  .e-bigger .e-pv-annotation-textalign-container.e-dropdown-btn.e-btn .e-btn-icon:not(.e-caret) {
    @if ($skin-name == 'FluentUI') {
      font-size: $pv-text-base;
    }
  }

  .e-bigger .e-pv-sidebar-title {
    @if $skin-name =='bootstrap4' {
      top: $pv-sidebar-title-top-big;
    }
  }

  .e-bigger .e-pv-sidebar-title,
  .e-bigger .e-pv-total-page {
    @if $skin-name =='bootstrap4' {
      font-size: $pv-label-font-size-big;
    }
  }

  .e-bigger .e-pv-sidebar-toolbar {
    @if $skin-name =='bootstrap4' or $skin-name =='FluentUI' or $skin-name =='tailwind3' {
      width: $pv-sidebar-toolbar-width-big;
    }
  }

  .e-bigger .e-pv-sidebar-content {
    @if $skin-name =='bootstrap4' {
      top: $pv-sidebar-content-top-big;
    }
  }

  .e-bigger .e-pv-thumbnail-view-button.e-btn,
  .e-bigger .e-pv-organize-view-button.e-btn {
    @if $skin-name =='bootstrap4' {
      height: $pv-thumbnail-view-button-height-big;
      margin: $pv-thumbnail-view-button-margin-big;
      padding: $pv-thumbnail-view-button-padding-big;
      width: $pv-thumbnail-view-button-width-big;
    }

    @if $skin-name =='tailwind3' {
      height: $pv-thumbnail-view-button-height-big;
      width: $pv-thumbnail-view-button-width-big;
    }

    @if $skin-name =='FluentUI' {
      margin: $pv-spacing-12 $pv-spacing-6;
    }
  }

  .e-bigger .e-pv-thumbnail-view-button-selection.e-pv-thumbnail-view-button.e-btn,
  .e-bigger .e-pv-bookmark-button-selection.e-pv-bookmark-button.e-btn {
    @if $skin-name =='bootstrap4' {
      padding: $pv-thumbnail-view-button-selection-padding-big;
    }
  }

  .e-bigger .e-pv-thumbnail-view-button-selection.e-pv-thumbnail-view-button.e-btn {
    @if $skin-name =='bootstrap4' {
      margin: $pv-thumbnail-view-button-margin-big;
    }
  }

  .e-bigger .e-pv-bookmark-button-selection.e-pv-bookmark-button.e-btn {
    @if $skin-name =='bootstrap4' {
      line-height: $pv-thumbnail-view-button-selection-line-height;
      margin: $pv-bookmark-button-margin-big;
    }
  }

  .e-bigger .e-pv-bookmark-button.e-btn {
    @if $skin-name =='bootstrap4' {
      line-height: $pv-thumbnail-button-selection-line-height;
    }

    @if $skin-name =='FluentUI' {
      margin: $pv-spacing-12 $pv-spacing-6;
    }
  }

  .e-bigger .e-pv-bookmark-button.e-btn {
    @if $skin-name =='bootstrap4' {
      height: $pv-bookmark-button-height-big;
      margin: $pv-bookmark-button-margin-big;
      padding: $pv-bookmark-button-padding-big;
      width: $pv-bookmark-button-width-big;
    }
    @if $skin-name =='tailwind3' {
      height: $pv-thumbnail-view-button-height-big;
      width: $pv-thumbnail-view-button-width-big;
    }
  }

  .e-bigger .e-pv-title-close-div.e-btn {
    @if $skin-name =='bootstrap4' {
      top: $pv-title-close-top-big;
    }
  }

  .e-bigger .e-pv-sidebar-content-splitter {
    @if $skin-name =='bootstrap4' {
      top: $pv-sidebar-content-splitter-top-big;
    }
  }

  .e-bigger div > .e-pv-bookmark-icon.e-pv-icon {
    @if $skin-name =='bootstrap4' {
      font-size: $pv-icon-font-size-big;
    }

    @if $skin-name =='Material3' {
      font-size: $pv-text-base;
      padding-left: $pv-spacing-12;
      padding-right: $pv-spacing-12;
    }
  }

  .e-bigger .e-pv-search-bar {
    @if $skin-name =='bootstrap4' {
      height: $pv-search-box-height-big;
      padding: $pv-search-box-padding-big;
      width: $pv-search-box-width-big;
    }

    @if $skin-name =='FluentUI' {
      height: $pv-height-109;
      padding: $pv-spacing-16;
      width: $pv-width-368;
    }

    @if $skin-name =='fluent2' {
      width: $pv-width-368;
    }
  }

  .e-bigger .e-input-group.e-pv-search-input-mobile .e-input,
  .e-bigger .e-input-group.e-pv-search-input .e-input {
    @if $skin-name =='fluent2' {
      height: $pv-height-28;
    }
  }

  .e-bigger .e-pv-search-input {
    @if $skin-name =='bootstrap4' or $skin-name =='FluentUI' {
      height: $pv-search-input-height-big;
    }
  }

  .e-bigger .e-pv-search-input,
  .e-bigger .e-pv-search-input-mobile,
  .e-bigger .e-pv-text-search-input,
  .e-bigger .e-pv-text-search-input-mobile {
    @if $skin-name =='tailwind3' {
      height: $pv-search-input-height-big;
    }
  }

  .e-bigger .e-pv-textsearch-match-case-container {
    @if $skin-name =='tailwind3' {
      width: $pv-width-290;
    }
  }

  .e-bigger .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
    margin-left: $pv-spacing-3;
  }

  .e-bigger .e-pdfviewer.e-pv-mobile-view .e-pv-nav-toolbar.e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:last-child {
    margin-right: $pv-spacing-3;
  }

  .e-bigger .e-pv-match-case-container {
    @if $skin-name =='bootstrap4' {
      margin-top: $pv-match-case-margin-top-big;
    }
  }

  .e-bigger .e-pv-search-btn.e-btn {
    @if $skin-name =='bootstrap4' or $skin-name =='FluentUI' {
      height: $pv-search-btn-height-big;
      padding: $pv-spacing-2;
      width: $pv-search-btn-width-big;
    }
    @if $skin-name =='tailwind3' {
      height: $pv-toolbar-btn-width-mobile;
    }
  }

  .e-bigger .e-pv-annotation-color-container.e-icon-btn,
  .e-bigger .e-pv-annotation-opacity-container.e-icon-btn,
  .e-bigger .e-pv-annotation-stroke-container.e-icon-btn,
  .e-bigger .e-pv-custom-annotation-thickness-container.e-icon-btn,
  .e-bigger .e-pv-custom-annotation-opacity-container.e-icon-btn,
  .e-bigger .e-pv-annotation-thickness-container.e-icon-btn,
  .e-bigger .e-pv-annotation-textcolor-container.e-icon-btn,
  .e-bigger .e-pv-annotation-textalign-container.e-icon-btn,
  .e-bigger .e-pv-annotation-textprop-container.e-icon-btn {
    white-space: nowrap;
    @if $skin-name =='tailwind3' {
      height: $pv-toolbar-height;
    }
  }

  .e-bigger .e-pv-properties-line-fill-color-container .e-dropdown-btn.e-btn,
  .e-bigger .e-pv-properties-line-stroke-color-container .e-dropdown-btn.e-btn {
    @if $skin-name =='FluentUI' {
      height: $pv-height-40;
    }
  }

  .e-bigger .e-pv-properties-line-opacity-container .e-control-wrapper.e-slider-container.e-horizontal {
    @if $skin-name =='fluent2' {
      width: $pv-width-78p;
    }
  }

  .e-bigger .e-pv-properties-checkbox-main-div-prop {
    @if $skin-name =='tailwind3' {
      align-items: center;
      gap: .5em;
    }
  }

  .e-bigger .e-pv-mobile-view .e-pv-properties-line-start-container,
  .e-bigger .e-pv-mobile-view .e-pv-properties-line-end-container,
  .e-bigger .e-pv-mobile-view .e-pv-properties-line-style-container,
  .e-bigger .e-pv-mobile-view .e-pv-properties-line-thickness-container,
  .e-bigger .e-pv-mobile-view .e-pv-properties-line-leader-length-container {
    width: $pv-width-43p !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-pv-scale-ratio-src-input-container,
  .e-bigger .e-pv-scale-ratio-src-unit-container,
  .e-bigger .e-pv-scale-ratio-dest-input-container,
  .e-bigger .e-pv-scale-ratio-dest-unit-container,
  .e-bigger .e-pv-depth-input-container,
  .e-bigger .e-pv-depth-unit-container {
    float: left;
    height: $pv-height-40;
    width: $pv-width-p45;
  }

  .e-bigger .e-pv-scale-ratio-src-unit .e-caret,
  .e-bigger .e-pv-scale-ratio-dest-unit .e-caret,
  .e-bigger .e-pv-depth-unit .e-caret {
    @if $skin-name =='FluentUI' {
      margin-left: $pv-spacing-160;
    }
    @if $skin-name =='tailwind3' {
      margin-top: $pv-prop-line-styles-margin-top;
      margin-bottom: $pv-prop-line-styles-margin-top;
    }
  }

  .e-bigger .e-pv-properties-line-stroke-color-container {
    @if $skin-name =='FluentUI' {
      margin-left: $pv-spacing-195;
    }
  }

  .e-bigger .e-pv-properties-line-start,
  .e-bigger .e-pv-properties-line-end,
  .e-bigger .e-pv-properties-line-style,
  .e-bigger .e-pv-properties-line-thickness,
  .e-bigger .e-pv-properties-line-opacity,
  .e-bigger .e-pv-properties-line-leader-length {
    @if $skin-name =='FluentUI' {
      max-width: $pv-width-248;
    }
  }

  .e-bigger .e-pv-scale-ratio-src-input,
  .e-bigger .e-pv-scale-ratio-dest-input,
  .e-bigger .e-pv-depth-input {
    @if $skin-name =='FluentUI' {
      max-width: $pv-width-248;
    }

    @if $skin-name =='fluent2' {
      max-width: $pv-width-200;
    }
  }

  .e-bigger .e-pv-properties-line-start,
  .e-bigger .e-pv-properties-line-end,
  .e-bigger .e-pv-properties-line-style {
    @if $skin-name =='FluentUI' {
      width: $pv-width-248;
    }
  }

  .e-bigger .e-pv-scale-ratio-src-unit,
  .e-bigger .e-pv-scale-ratio-dest-unit,
  .e-bigger .e-pv-depth-unit {
    @if $skin-name =='FluentUI' {
      height: $pv-height-40;
      width: $pv-width-248;
    }

    @if $skin-name =='fluent2' {
      height: $pv-height-inherit;
    }
  }

  .e-bigger .e-pv-properties-line-start.e-btn,
  .e-bigger .e-pv-properties-line-end.e-btn,
  .e-bigger .e-pv-properties-line-style.e-btn {
    @if $skin-name =='FluentUI' {
      height: $pv-height-40;
    }
  }

  .e-bigger .e-pv-properties-line-start.e-btn .e-caret,
  .e-bigger .e-pv-properties-line-end.e-btn .e-caret {
    @if $skin-name =='FluentUI' {
      margin-left: $pv-spacing-145;
    }
  }

  .e-bigger .e-pv-line-styles-content-container {
    @if $skin-name =='FluentUI' {
      margin-top: $pv-spacing-6;
      width: $pv-width-180;
    }
  }

  .e-bigger .e-pv-redaction-radio-option {
    margin-bottom: $pv-spacing-16;
  }

  .e-bigger .e-pv-blazor-redaction-text-align {
    .e-pv-left-align-icon-div,
    .e-pv-center-align-icon-div,
    .e-pv-right-align-icon-div {
      height: $pv-height-p100;
      width: $pv-width-p100;
    }
  }

  .e-bigger .e-pv-redaction-page-mark-content {
    @if $skin-name=='Material3' {
      margin-top: $pv-spacing-10;
    }
  }

  .e-bigger .e-pv-redaction-page-mark-dialog .e-footer-content button,
  .e-bigger .e-pv-redaction-properties-dialog .e-footer-content button {
    @if ($skin-name == 'tailwind3') {
      height: $pv-height-38;
    }
    @else {
      height: $pv-height-40;
    }
    @if ($skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5' and $skin-name != 'highcontrast') {
      padding-top: $pv-spacing-6;
    }
  }

  .e-bigger .e-pv-redaction-page-mark-dialog .e-dlg-header-content button,
  .e-bigger .e-pv-redaction-properties-dialog .e-dlg-header-content button {
    @if ($skin-name == 'highcontrast') {
      padding: $pv-spacing-0;
    }
  }

  .e-bigger .e-toolbar.e-pv-redaction-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
    @if $skin-name == 'FluentUI' {
      min-width: $pv-width-40;
      min-height: $pv-height-40;
    }
  }

  .e-bigger .e-pv-redaction-toolbar .e-pv-icon {
    font-size: $pv-text-lg !important;/* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
  .e-bigger .e-pv-annotation-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-pv-tbar-btn.e-btn {
    height: $pv-toolbar-btn-height-big;
    line-height: $pv-toolbar-btn-line-height;
    margin: $pv-toolbar-btn-margin;

    @if $skin-name !='Material3' {
      &:not(.e-pv-submit .e-tbar-btn.e-btn):not(.e-spv-btn.e-tbar-btn.e-btn) {
        padding: $pv-toolbar-btn-padding;
      }
    }
    width: $pv-toolbar-btn-width-big;
  }

  .e-bigger .e-toolbar.e-pv-redaction-toolbar .e-toolbar-item .e-tbar-btn {
    @if ($skin-name == 'highcontrast') {
      min-height: $pv-height-48;
      min-width: $pv-width-48;
    }
  }

  .e-bigger .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-pv-submit .e-tbar-btn.e-btn {
    width: $pv-width-auto;
  }

  .e-bigger .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    padding-top: $pv-mobile-page-box-padding-top;
    @if ($skin-name =='FluentUI') {
      padding-bottom: $pv-spacing-4;
    }
  }

  .e-bigger .e-pv-current-page-box.e-input-group.e-control-wrapper {
    @if $skin-name == 'tailwind3' {
      height: $pv-zoom-dropdown-height;
    }
  }

  .e-bigger .e-toolbar .e-toolbar-items .e-toolbar-item.e-pv-zoom-drop-down-container {
    width: $pv-zoom-dropdown-width-mobile;
  }

  .e-bigger .e-toolbar.e-pv-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
  .e-bigger .e-toolbar.e-pv-annotation-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
    @if $skin-name =='bootstrap4' {
      padding-left: $pv-toolbar-items-padding-left-big;
      padding-right: $pv-toolbar-items-padding-right-big;
    }
  }

  .e-bigger .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input:focus {
    padding-left: $pv-mobile-page-box-padding-left-focus;
  }

  .e-bigger .e-pv-password-popup.e-dialog {
    @if ($skin-name !='Material3') {
      height: $pv-password-dialog-height-mobile;
    }
  }

  .e-bigger .e-pv-password-popup.e-dialog {
    @if ($skin-name =='FluentUI') {
      height: $pv-height-270;
    }
  }

  .e-bigger .e-pv-notification-popup.e-dialog {
    @if $skin-name !='Material3' {
      height: $pv-notification-dialog-height-mobile;
    }
  }

  .e-bigger .e-pv-notification-popup.e-pv-notification-large-content.e-dialog {
    @if $skin-name !='Material3' {
      height: $pv-notification-dialog-height-large-mobile;
    }
  }

  .e-bigger .e-pv-notification-popup.e-pv-notification-large-content.e-dialog {
    @if ($skin-name =='FluentUI') {
      height: $pv-height-280;
    }
  }

  .e-bigger .e-pv-corrupted-popup.e-dialog {
    @if $skin-name !='Material3' {
      height: $pv-corrupted-dialog-height-mobile;
    }
  }

  .e-bigger .e-pv-password-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn,
  .e-bigger .e-pv-corrupted-popup.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
    padding-top: $pv-dialog-pop-close-icon-padding-top-mobile;
  }

  .e-bigger .e-toolbar.e-pv-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-left,
  .e-bigger .e-toolbar.e-pv-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
    top: 0;
  }

  .e-bigger .e-pv-toolbar.e-rtl .e-pv-current-page-box.e-input-group.e-control-wrapper input.e-input {
    padding-right: $pv-current-page-padding-right-rtl;
    padding-left: $pv-current-page-padding-left;
  }

  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down.e-ddl input.e-input.e-control.e-keyboard,
  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown.e-ddl input.e-input.e-control.e-keyboard,
  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-zoom-drop-down-rtl.e-ddl input.e-input.e-control.e-keyboard,
  .e-bigger .e-pv-toolbar.e-rtl .e-input-group.e-control-wrapper.e-pv-prop-dropdown-rtl.e-ddl input.e-input.e-control.e-keyboard {
    padding-left: $pv-zoom-drop-down-padding-left-rtl;
    padding-right: $pv-zoom-drop-down-padding-right-rtl;
  }

  .e-bigger .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child,
  .e-bigger .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:first-child {
    @if $skin-name =='bootstrap4' {
      margin-left: $pv-toolbar-items-first-child-margin-left-big;
    }
  }

  .e-bigger .e-pdfviewer .e-inplaceeditor .e-editable-action-buttons,
  .e-pdfviewer .e-pv-reply-div .e-inplaceeditor .e-editable-action-buttons {
    @if $skin-name =='tailwind3' {
      padding-top: $pv-spacing-0;
    }
  }

  .e-bigger .e-pdfviewer .e-pv-comments-div .e-inplaceeditor .e-editable-value-container .e-editable-value {
    margin-left: $pv-spacing-32;
  }

  .e-bigger .e-pdfviewer .e-inplaceeditor .e-editable-value-container {
    width: $pv-width-p100;
    max-width: $pv-width-p100;
  }

  .e-bigger .e-pdfviewer .e-pv-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child,
  .e-bigger .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item:first-child {
    @if $skin-name =='bootstrap4' {
      margin-right: $pv-toolbar-items-first-child-margin-left-big;
    }
  }

  .e-bigger .e-pdfviewer .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
  .e-bigger .e-pdfviewer .e-pv-annotation-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child,
  .e-bigger .e-pdfviewer .e-pv-formdesigner-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-items .e-toolbar-item:last-child {
    @if $skin-name =='bootstrap4' {
      margin-right: $pv-toolbar-items-last-child-margin-right-big;
    }
  }

  .e-bigger .e-pv-search-bar {
    @if $skin-name =='bootstrap4' {
      top: $pv-search-box-top-big;
    }
  }

  .e-bigger .e-pv-sidebar-content-container.e-left {
    @if $skin-name =='bootstrap4' or $skin-name =='tailwind3' {
      left: $pv-sidebar-content-container-left-big;
    }
  }

  .e-bigger .e-pv-sidebar-content-container.e-right {
    @if $skin-name =='bootstrap4' {
      right: $pv-sidebar-content-container-left-big;
    }
  }

  .e-bigger .e-pv-sidebar-toolbar-splitter.e-left {
    @if $skin-name =='bootstrap4' {
      left: $pv-sidebar-toolbar-splitter-left-big;
    }
  }

  .e-bigger .e-pv-sidebar-toolbar-splitter.e-right {
    @if $skin-name =='bootstrap4' {
      right: $pv-sidebar-toolbar-splitter-left-big;
    }
  }

  .e-bigger div > .e-pv-bookmark-icon.e-pv-icon.e-right {
    @if $skin-name =='bootstrap4' {
      font-size: $pv-icon-font-size-big;
    }

    @if $skin-name =='Material3' {
      font-size: $pv-text-base;
      padding-left: $pv-spacing-12;
      padding-right: $pv-spacing-12;
    }
  }

  .e-bigger .e-pv-properties-window {
    max-width: $pv-properties-win-max-width-big;

    @if $skin-name =='FluentUI' {
      min-height: $pv-height-498;
    }
  }

  .e-bigger .e-pv-scale-ratio-window {
    max-width: $pv-scale-ratio-win-max-width-big;
  }

  .e-bigger .e-pv-formfield-fontcolor-icon,
  .e-bigger .e-pv-formfield-strokecolor-icon,
  .e-bigger .e-pv-formfield-strokethickness-icon {
    @if $skin-name=='tailwind3' {
      padding: $pv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
      padding-top: $pv-spacing-2 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
    @if $skin-name=='fluent2' {
      margin-right: $pv-spacing-16 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-annotation-stamp-container .e-menu-icon.e-pv-stamp-icon.e-pv-icon {
    @if $skin-name=='fluent2' {
      margin-right: $pv-spacing-10 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-annotation-stamp-container .e-menu-wrapper ul .e-menu-item .e-caret {
    @if $skin-name=='fluent2' {
      position: static;
    }
  }

  .e-bigger .e-pv-annotation-shapes-container.e-btn.e-icon-btn,
  .e-bigger .e-pv-annotation-calibrate-container.e-btn.e-icon-btn {
    @if ($skin-name == 'fluent2') {
      padding-top: $pv-spacing-4;
    }
  }

  .e-bigger .e-dropdown-popup.e-lib.e-popup.e-control.e-pv-handwritten-popup .e-btn.e-outline.e-primary {
    @if $skin-name =='FluentUI' {
      min-height: $pv-height-49;
      min-width: $pv-width-152;
    }
  }

  .e-bigger .e-pv-mobile-annotation-toolbar .e-pv-custom-annotation-stamp-container.e-menu-container {
    @if ($skin-name =='fluent2') {
      padding-left: $pv-spacing-10;
    }
  }

  .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-pv-stamp-icon,
  .e-bigger .e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
    @if ($skin-name =='fluent2') {
      margin-top: $pv-stamp-icon-margin-top;
      padding-left: $pv-spacing-6;
    }
    @else if ($skin-name =='FluentUI') {
      line-height: $pv-annotation-drop-down-height;
    }
  }

  .e-bigger .e-contextmenu-container.e-pv-custom-annotation-stamp-container.e-menu-container ul .e-menu-item .e-caret {
    @if ($skin-name =='fluent2') {
      margin-top: $pv-spacing-3;
    }
  }

  .e-bigger .e-pv-stamp.e-menu-wrapper ul .e-menu-item {
    @if $skin-name =='fluent2' {
      padding: $pv-spacing-0 $pv-spacing-8;
    }
  }

  .e-bigger .e-pv-annotation-thickness-container {
    @if $skin-name =='fluent2' {
      padding-top: $pv-spacing-7 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-accordion-container.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
  .e-bigger .e-pv-accordion-content-container .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    @if $skin-name =='fluent2' {
      font-size: $pv-text-sm;
    }
  }

  .e-bigger .e-pv-signature-dialog-height .e-pv-clearbtn {
    @if $skin-name !='Material3' {
      float: left;
      height: $pv-height-49;
      min-height: $pv-height-49;
    }
  }

  .e-bigger .e-pv-signature-dialog-height .e-pv-cancelbtn,
  .e-bigger .e-pv-signature-dialog-height .e-pv-createbtn {
    @if $skin-name !='Material3' {
      height: $pv-height-49;
      min-height: $pv-height-49;
    }
  }

  .e-bigger .foreign-object .e-pdfviewer-signatureformfields-signature + .e-pdfViewer-signIcon {
    display: none;
  }

  .e-bigger .foreign-object .e-pdfviewer-signatureformfields + .e-pdfViewer-signIcon {
    display: block;
  }

  .e-bigger .e-pv-font-appearance-style .e-pv-font-sign {
    @if $skin-name=='fluent2' {
      width: $pv-width-p40;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item,
  .e-bigger .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-menu-icon,
  .e-bigger .e-pv-stamp-template-container .e-menu-container .e-menu .e-menu-item .e-caret {
    @if ($skin-name =='FluentUI') {
      height: $pv-height-32;
    }
  }

  .e-bigger .e-menu-wrapper.e-custom-scroll.e-lib.e-keyboard.e-pv-stamp ul {
    @if $skin-name == 'tailwind3' {
      height: $pv-height-unset !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-bold-icon-div,
  .e-bigger .e-pv-italic-icon-div,
  .e-bigger .e-pv-strikeout-icon-div,
  .e-bigger .e-pv-underlinetext-icon-div {
    @if ($skin-name =='fluent2') {
      padding: $pv-spacing-4 $pv-spacing-10;
      width: $pv-width-40;
    }
  }

  .e-bigger .e-pv-left-align-icon-div,
  .e-bigger .e-pv-center-align-icon-div,
  .e-bigger .e-pv-right-align-icon-div {
    @if ($skin-name =='fluent2') {
      padding: $pv-spacing-4 $pv-spacing-10;
      width: $pv-width-38-5;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-bold-icon-div,
  .e-bigger .e-pv-default-tab .e-pv-italic-icon-div,
  .e-bigger .e-pv-default-tab .e-pv-left-align-icon-div,
  .e-bigger .e-pv-default-tab .e-pv-center-align-icon-div,
  .e-bigger .e-pv-default-tab .e-pv-right-align-icon-div {
    @if ($skin-name =='fluent2' or $skin-name=='tailwind3' or $skin-name =='Material3') {
      padding-top: $pv-spacing-7;
    }
  }

  .e-bigger .e-pv-blazor-redaction-text-align {
    .e-pv-left-align-icon-div,
    .e-pv-center-align-icon-div,
    .e-pv-right-align-icon-div {
      @if $skin-name == 'tailwind3' {
        padding: $pv-spacing-8 $pv-spacing-10;
      }
      @else if $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5'{
        padding: $pv-spacing-8 $pv-spacing-9;
      }
      @else if ( $skin-name == 'FluentUI') {
        padding: $pv-spacing-7 $pv-spacing-8;
      }
      @else if $skin-name == 'highcontrast' {
        padding: $pv-spacing-6 $pv-spacing-11;
      }
      @else if $skin-name =='Material3' {
        padding: $pv-spacing-9 $pv-spacing-10 $pv-spacing-7 $pv-spacing-9 !important;/* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-bigger .e-pv-properties-fill-color-style-prop,
  .e-bigger .e-pv-properties-stroke-color-style-prop,
  .e-bigger .e-pv-properties-stroke-thickness-style-prop {
    @if $skin-name =='Material3' {
      padding: $pv-spacing-0 $pv-spacing-20 $pv-spacing-12 $pv-spacing-1;
    }

    @else {
      padding: $pv-spacing-12 $pv-spacing-20 $pv-spacing-12 $pv-spacing-1;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-fill-color-style-prop,
  .e-bigger .e-pv-default-tab .e-pv-properties-stroke-color-style-prop,
  .e-bigger .e-pv-default-tab .e-pv-properties-stroke-thickness-style-prop {
    padding-top: $pv-spacing-0;
  }

  .e-bigger .e-pv-formfield-fontcolor-icon,
  .e-bigger .e-pv-formfield-strokecolor-icon,
  .e-bigger .e-pv-formfield-strokethickness-icon {
    @if ($skin-name=='fluent2') {
      height: $pv-height-40;
      padding: $pv-spacing-7 !important;/* stylelint-disable-line declaration-no-important */
      width: $pv-width-68;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-formfield-strokethickness-icon {
    @if ($skin-name=='fluent2') {
      padding: $pv-spacing-4 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-formfield-textcolor-icon {
    @if ($skin-name=='tailwind3') {
      height: $pv-height-36;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-formfield-textcolor-icon {
    @if ($skin-name=='tailwind3') {
      padding: $pv-spacing-0;
    }
  }

  .e-bigger .e-pv-properties-form-field-window {
    @if $skin-name =='Material3' {
      max-width: $pv-width-490;
    }

    @if ($skin-name =='fluent2') {
      min-height: $pv-height-555 !important;/* stylelint-disable-line declaration-no-important */
      max-width: $pv-width-525 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-dialog:has(.e-pv-default-tab.e-pv-properties-tab-style-prop) {
    height: $pv-height-570 !important;/* stylelint-disable-line declaration-no-important */
    max-height: $pv-height-600 !important;/* stylelint-disable-line declaration-no-important */
    @if ($skin-name !='tailwind3') {
      width: $pv-width-470 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      width: $pv-width-435 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-dialog:has(.e-pv-properties-line-style-prop .e-pv-blazor-properties-container-custom-width) {
    @if $skin-name =='FluentUI' {
      height: $pv-height-505 !important;/* stylelint-disable-line declaration-no-important */
    }
    @else {
      height: $pv-height-490 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-blazor-properties-line-stroke-color-container {
    margin-left: $pv-blazor-line-stroke-color-margin-left-bigger !important;/* stylelint-disable-line declaration-no-important */
    @if ($skin-name != 'fluent2' and $skin-name != 'tailwind3') {
      margin-right: $pv-spacing-87;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-formfield-textarea {
    height: $pv-height-138;
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-color-icon.e-pv-icon,
  .e-bigger .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-stroke-icon.e-pv-icon {
    @if ($skin-name != 'highcontrast') {
      padding-top: $pv-spacing-0;
      @if ($skin-name !='fluent2' and $skin-name !='FluentUI') {
        height: $pv-height-30;
        @if ($skin-name =='bootstrap5.3' or $skin-name =='tailwind' or $skin-name == 'tailwind3') {
          height: $pv-height-25;
        }
        @else if ($skin-name == 'Material3') {
          height: $pv-height-20;
        }
      }
    }
  }
  .e-bigger .e-pv-font-style-prop-mobile {
    @if ($skin-name =='fluent2') {
      width: $pv-width-75;
    }
    @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name =='bootstrap5' or $skin-name =='bootstrap5.3' or $skin-name == 'tailwind3') {
      width: $pv-width-68;
    }
  }
  .e-bigger .e-pv-default-tab .e-pv-formfield-textcolor-icon {
    @if ($skin-name == 'tailwind3') {
      padding: $pv-spacing-0;
    }
  }

  .e-bigger .e-pv-properties-form-field-font-style {
    background: $pv-form-field-property-font-style-color;

    @if ($skin-name =='bootstrap5') {
      border-radius: $pv-radius-4;
    }

    @else {
      border-radius: $pv-radius-2;
    }
    @if ($skin-name =='tailwind3') {
      border-radius: $pv-radius-6;
    }
    display: flex;
    height: $pv-height-36;

    @if ($skin-name !='fluent2') {
      justify-content: space-evenly;
    }
    width: $pv-width-154;

    @if ($skin-name =='bootstrap5') {
      align-items: center;
      border: $pv-border-1 solid $border-light;
      height: $pv-height-32;
      width: $pv-width-163;
    }

    @if ($skin-name =='FluentUI') {
      align-items: center;
      border: $pv-border-1 solid $border;
      height: $pv-height-32;
      width: $pv-width-163;
    }

    @if ($skin-name =='Material3') {
      align-items: center;
      border-bottom: $pv-border-1 solid $transparent;
      height: $pv-height-32;
      width: $pv-width-128;
      padding-left: $pv-spacing-8;
      padding-top: $pv-spacing-20;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-style {
    height: $pv-height-38;
    justify-content: unset;
    width: $pv-width-auto;
    @if ($skin-name =='Material3') {
      padding-top: $pv-spacing-12;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-color-container-style-prop .e-btn-icon.e-pv-annotation-thickness-icon.e-pv-icon {
    padding-top: $pv-spacing-0;
  }

  .e-bigger .e-pv-default-tab.e-pv-properties-tab-style-prop .e-float-input.e-input-group input,
  .e-bigger .e-pv-default-tab.e-pv-properties-tab-style-prop .e-input-group:not(.e-float-input) .e-input {
    @if ($skin-name =='fluent2') {
      padding-left: $pv-spacing-12;
    }
  }

  .e-bigger .e-pv-font-style-prop-mobile {
    @if ($skin-name == 'highcontrast') {
      width: $pv-width-68;
    }
  }
  .e-bigger .e-pv-default-tab .e-pv-properties-font-size-container {
    width: $pv-width-118;
  }

  .e-bigger .e-pv-properties-form-field-font-align {
    background: $pv-form-field-property-font-style-color;

    @if ($skin-name =='bootstrap5' or $skin-name =='Material3') {
      border-radius: $pv-radius-4;
    }
    @else {
      border-radius: $pv-radius-2;
    }
    @if ($skin-name =='tailwind3') {
      border-radius: $pv-radius-6;
    }
    display: flex;
    height: $pv-height-36;

    @if ($skin-name !='fluent2') {
      justify-content: space-evenly;
    }
    margin-right: $pv-spacing-15;
    width: $pv-width-120;

    @if ($skin-name =='bootstrap5' or $skin-name =='FluentUI') {
      align-items: center;
      border: $pv-border-1 solid $border-light;
      height: $pv-height-32;
    }

    @if ($skin-name =='FluentUI') {
      border: $pv-border-1 solid $border;
    }

    @if ($skin-name =='Material3') {
      align-items: center;
      height: $pv-height-32;
      width: $pv-width-96;
      border: $pv-border-1 solid $transparent;
      padding-top: $pv-spacing-20;
    }
  }

  .e-bigger .e-pv-redaction-properties-dialog .e-pv-properties-form-field-font-align {
    @if ($skin-name == 'Material3') {
      padding-top: $pv-spacing-0;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align {
    height: $pv-height-38;
    width: $pv-width-auto;
    @if ($skin-name =='bootstrap5.3') {
      border-radius: $pv-radius-6;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div.e-pv-li-select {
    @if ($skin-name =='bootstrap5.3') {
      border-top-right-radius: $pv-radius-6;
      border-bottom-right-radius: $pv-radius-6;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div:hover,
  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div:focus,
  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-right-align-icon-div:active {
    @if ($skin-name =='bootstrap5.3') {
      border-top-right-radius: $pv-radius-6;
      border-bottom-right-radius: $pv-radius-6;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div.e-pv-li-select {
    @if ($skin-name =='bootstrap5.3') {
      border-top-left-radius: $pv-radius-6;
      border-bottom-left-radius: $pv-radius-6;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div:hover,
  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div:focus,
  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-font-align .e-pv-left-align-icon-div:active {
    @if ($skin-name =='bootstrap5.3') {
      border-top-left-radius: $pv-radius-6;
      border-bottom-left-radius: $pv-radius-6;
    }
  }

  .e-bigger .e-pv-blazor-redaction-text-align.e-pv-properties-form-field-font-align {
    @if ($skin-name =='tailwind3' or $skin-name == 'highcontrast') {
      height: $pv-height-40;
    }
  }

  .e-bigger .e-pv-form-designer-property-panel .e-pv-form-designer-panel-title-container .e-pv-save-button,
  .e-bigger .e-pv-redaction-property-panel .e-pv-redaction-panel-title-container .e-pv-save-button {
    @if ($skin-name =='Material3') {
      padding-top: $pv-spacing-5;
    }
    @else {
      @if ($skin-name == 'highcontrast') {
        padding-bottom: $pv-spacing-0;
        top: 5px !important;/* stylelint-disable-line declaration-no-important */
      }
      padding-top: $pv-spacing-0;
    }
  }
  .e-bigger .e-pv-font-align-prop-mobile .e-pv-properties-form-field-font-align {
    margin-right: $pv-spacing-0;
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-form-field-list-add-div {
    align-items: center;
  }

  .e-bigger .e-pv-font-color-prop-mobile,
  .e-bigger .e-pv-fill-prop-mobile,
  .e-bigger .e-pv-border-prop-mobile,
  .e-bigger .e-pv-thickness-prop-mobile,
  .e-bigger .e-pv-default-tab .e-pv-formfield-textcolor-icon.e-btn.e-icon-btn,
  .e-bigger .e-pv-default-tab .e-pv-formfield-strokecolor-icon.e-btn.e-icon-btn,
  .e-bigger .e-pv-default-tab .e-pv-formfield-fontcolor-icon.e-btn.e-icon-btn,
  .e-bigger .e-pv-default-tab .e-pv-formfield-strokethickness-icon.e-btn.e-icon-btn,
  .e-bigger .e-pv-default-tab .e-pv-font-color-prop-mobile .e-pv-formfield-textcolor-icon.e-btn.e-icon-btn  {
    @if ($skin-name =='bootstrap5.3') {
      width: $pv-width-72;
    }
    @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      width: $pv-width-76;
      height: $pv-height-40;
    }
    @else if ($skin-name =='FluentUI') {
      width: $pv-width-82;
    }
    @else if ($skin-name =='fluent2') {
      width: $pv-width-70;
    }
    @else if ($skin-name == 'Material3') {
      width: $pv-width-90;
      height: $pv-height-40;
    }
    @else {
      width: $pv-width-68;
    }
    @if ($skin-name != 'highcontrast' and $skin-name != 'Material3') {
      height: $pv-height-38;
    }
    @if ($skin-name == 'highcontrast') {
      padding: $pv-spacing-0;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-formfield-textcolor-icon,
  .e-bigger .e-pv-default-tab .e-pv-formfield-strokecolor-icon,
  .e-bigger .e-pv-default-tab .e-pv-formfield-fontcolor-icon,
  .e-bigger .e-pv-default-tab .e-pv-formfield-strokethickness-icon {
    @if ($skin-name == 'highcontrast') {
      height: $pv-height-40;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-formfield-textcolor-icon.e-btn.e-icon-btn {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      padding-top: $pv-spacing-0;
    }
    @if ($skin-name == 'fluent2') {
      padding: $pv-spacing-8 $pv-spacing-12;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-formfield-textcolor-icon.e-btn.e-icon-btn,
  .e-bigger .e-pv-default-tab .e-pv-formfield-strokecolor-icon.e-btn.e-icon-btn,
  .e-bigger .e-pv-default-tab .e-pv-formfield-fontcolor-icon.e-btn.e-icon-btn,
  .e-bigger .e-pv-default-tab .e-pv-formfield-strokethickness-icon.e-btn.e-icon-btn {
    @if ($skin-name == 'material' or $skin-name == 'material-dark') {
      padding: $pv-spacing-2 $pv-spacing-12;
    }
    @if ($skin-name == 'FluentUI') {
      padding: $pv-spacing-7 $pv-spacing-12;
    }
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      padding: $pv-spacing-6 $pv-spacing-12;
    }
  }

  .e-bigger .e-pv-font-color-prop-mobile .e-pv-annotation-textcolor-icon,
  .e-bigger .e-pv-fill-prop-mobile .e-pv-annotation-color-icon,
  .e-bigger .e-pv-border-prop-mobile .e-pv-annotation-stroke-icon {
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      height: $pv-height-12;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-properties-font-family-container {
    @if ($skin-name =='FluentUI') {
      width: $pv-width-195;
    }
  }

  .e-bigger .e-pv-organize-buttondiv .e-btn .e-btn-icon {
    font-size: $pv-text-base;
  }

  .e-bigger .e-pv-blazor-organize-window .e-pv-insert-left-button.e-btn,
  .e-bigger .e-pv-blazor-organize-window .e-pv-insert-right-button.e-btn {
    @if ($skin-name == 'highcontrast') {
      padding: $pv-spacing-0;
    }
  }

  .e-bigger .e-pv-blazor-organize-window .e-pv-organize-buttondiv .e-pv-delete-button.e-btn,
  .e-bigger .e-pv-blazor-organize-window .e-pv-organize-buttondiv .e-pv-copy-button.e-btn,
  .e-bigger .e-pv-blazor-organize-window .e-pv-organize-buttondiv .e-pv-rotate-left-button.e-btn,
  .e-bigger .e-pv-blazor-organize-window .e-pv-organize-buttondiv .e-pv-rotate-right-button.e-btn {
    @if ($skin-name == 'highcontrast') {
      padding: $pv-spacing-0 $pv-spacing-4;
    }
  }

  .e-bigger .e-pv-blazor-organize-window {
    .e-pv-organize-toolbar {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'fluent2' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'FluentUI' {
        height: $pv-height-48 !important;/* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'tailwind3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
        height: $pv-height-56 !important;/* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
        height: $pv-height-50 !important;/* stylelint-disable-line declaration-no-important */
      }

      .e-toolbar-item .e-tbar-btn {
        @if $skin-name == 'FluentUI' or $skin-name == 'fluent2' or $skin-name == 'tailwind3' or $skin-name == 'Material3' {
          min-height: $pv-height-40 !important;/* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap4' {
          min-height: $pv-height-38 !important;/* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'highcontrast' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
          min-height: $pv-height-48 !important;/* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'material' or $skin-name == 'material-dark' {
          height: $pv-height-34 !important;/* stylelint-disable-line declaration-no-important */
        }
      }
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-font-length-prop-mobile .e-input-group.e-control-wrapper .e-input-group-icon,
  .e-bigger .e-pv-default-tab .e-pv-formfield-maxlength .e-input-group.e-control-wrapper .e-input-group-icon {
    @if ($skin-name =='fluent2' or $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' ) {
      min-width: $pv-width-8;
    }
    @else {
      min-width: $pv-width-21;
    }
  }

  .e-bigger .e-pv-default-tab .e-pv-formfield-maxlength {
    @if ($skin-name =='FluentUI') {
      width: $pv-width-105;
    }
  }

  .e-bigger .e-pv-properties-form-field-window {
    @if $skin-name =='Material3' {
      height: $pv-height-565;
    }

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

  .e-bigger .e-pv-properties-header-spliter {
    @if $skin-name =='Material3' {
      border-bottom-color: $pv-properties-header-spliter-border-bottom-color;
      border-bottom-style: $pv-properties-header-spliter-border-bottom-style;
      border-bottom-width: $pv-properties-header-spliter-border-bottom-width;
      left: $pv-properties-header-spliter-left;
      padding-top: $pv-spacing-48;
      position: $pv-properties-header-spliter-position;
      width: $pv-properties-header-spliter-width;
    }
  }

  .e-bigger .e-dialog.e-pv-signature-dialog-height {
    @if ($skin-name =='FluentUI' or $skin-name =='Material3') {
      height: $pv-height-627;
      min-height: $pv-height-591;
    }

    @if ($skin-name =='bootstrap5.3') {
      height: $pv-height-584;
      min-height: $pv-height-584;
    }
  }

  .e-bigger .e-pv-signature-dialog-height {
    @if ($skin-name =='FluentUI') {
      min-height: $pv-height-592;
    }
  }

  .e-bigger .e-dialog.e-pv-signature-dialog-blazor-height {
    @if ($skin-name =='Material3') {
      min-height: $pv-height-590;
    }
    @if $skin-name =='fluent2' {
      min-height: $pv-height-555;
      height: $pv-height-615;
    }
    @if ($skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3') {
      height: $pv-height-576;
      max-height: $pv-height-576 !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-signature-dialog-blazor-height .e-dlg-header-content {
    @if ($skin-name == 'highcontrast') {
      padding: $pv-spacing-25 $pv-spacing-24 $pv-spacing-24;
    }
  }

  .e-bigger .e-pv-canvas-signature-blazor {
    @if $skin-name =='fluent2' {
      max-height: $pv-height-350;
    }
  }

  .e-bigger .e-pv-sign-upload {
    @if $skin-name =='fluent2' {
      margin-left: $pv-spacing--2p !important;/* stylelint-disable-line declaration-no-important */
      margin-top: $pv-spacing--4p !important;/* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-pv-modern-navigation-toolbar {
    padding-top: $pv-modern-sidebar-padding-top-big;
    width: $pv-modern-sidebar-width-big;
    gap: $pv-modern-sidebar-btn-gap-big;

    .e-btn {
      width: $pv-modern-sidebar-btn-width-big;
      height: $pv-modern-sidebar-btn-height-big;
      margin: $pv-spacing-unset;

      .e-btn-icon {
        font-size: $pv-modern-sidebar-btn-font-size-big;
      }
    }

    .e-pv-side-panel-separator {
      width: $pv-modern-sidebar-separator-width-big;
      margin: $pv-modern-sidebar-separator-margin-big;
    }
  }

  .e-bigger .e-pv-modern-side-panel {
    right: $pv-modern-panel-right-big;
  }

  .e-bigger .e-pv-modern-side-panel.e-pv-rtl {
    left: $pv-modern-panel-right-big;
  }

  .e-bigger .e-pv-modern-mobile-template-container .e-pv-modern-side-panel-container,
  .e-bigger .e-pv-modern-side-panel .e-pv-modern-side-panel-container {

    .e-pv-modern-side-panel-header {
      height: $pv-modern-panel-header-height-big;

      .e-pv-modern-side-panel-header-title {
        font-size: $pv-text-base;
      }

      .e-pv-icon {
        font-size: $pv-modern-sidebar-btn-font-size-big;
      }
    }

    .e-pv-modern-side-panel-content-container {
      height: $pv-modern-panel-template-height-big;

      .e-pv-sidebar-content {
        top: $pv-modern-panel-header-height-big;
      }
    }
  }
}

/*! PdfViewer's default definitions and variables */
$spv-assit-disclaimer-color: $grey-88 !default;
$spv-assist-toolbar-border: 1px solid $content-border-color !default;
$spv-control-border-color: $grey-99 !default;
$spv-redact-background-color: $gray-base !default;
$spv-redact-btn-gap: 8px !default;
$spv-redact-btn-gap-big: 12px !default;
$spv-redact-btn-height: 32px !default;
$spv-redact-btn-height-big: 40px !default;
$scrollbar-color: $grey-88 !default;
$scrollbar-background-color: $grey-dark-font !default;
$spv-toolbar-popup-icon-padding: 0 12px 0 15px;

// Typography Varaiables

// Font Size
$spv-text-xxs: 10px !default;
$spv-text-xs: 12px !default;
$spv-text-sm: 14px !default;
$spv-text-base: 16px !default;
$spv-text-lg: 18px !default;
$spv-text-xl: 20px !default;

// Font Icon Size
$spv-font-icon-32: 32px !default; /* 32px */

// Line Height
$spv-line-height-16: 16px !default;
$spv-line-height-20: 20px !default;
$spv-line-height-22: 22px !default;
$spv-line-height-24: 24px !default;
$spv-line-height-32: 32px !default;
$spv-line-height-40: 40px !default;

// Spacing
$spv-spacing-0: 0 !default;
$spv-spacing-1: 1px !default;
$spv-spacing-2: 2px !default;
$spv-spacing-3: 3px !default;
$spv-spacing-4: 4px !default;
$spv-spacing-5: 5px !default;
$spv-spacing-6: 6px !default;
$spv-spacing-7: 7px !default;
$spv-spacing-8: 8px !default;
$spv-spacing-9: 9px !default;
$spv-spacing-10: 10px !default;
$spv-spacing-11: 11px !default;
$spv-spacing-12: 12px !default;
$spv-spacing-13: 13px !default;
$spv-spacing-14: 14px !default;
$spv-spacing-15: 15px !default;
$spv-spacing-16: 16px !default;
$spv-spacing-18: 18px !default;
$spv-spacing-20: 20px !default;
$spv-spacing-56: 56px !default;

// Border width
$spv-border-0: 0 !default;
$spv-border-1: 1px !default;
$spv-border-2: 2px !default;
$spv-border-3: 3px !default;
$spv-border-4: 4px !default;
$spv-border-5: 5px !default;
$spv-border-6: 6px !default;
$spv-border-7: 7px !default;

// Radius
$spv-radius-0: 0 !default;
$spv-radius-2: 2px !default;
$spv-radius-4: 4px !default;
$spv-radius-6: 6px !default;
$spv-radius-8: 8px !default;
$spv-radius-12: 12px !default;
$spv-radius-16: 16px !default;
$spv-radius-20: 20px !default;
$spv-radius-48: 48px !default;

//Width
$spv-width-p100: 100% !default; /* 100% */
$spv-width-3: 3px !default; /* 3px */
$spv-width-96: 96px !default; /* 96px */
$spv-width-auto: auto !default; /* auto */
$spv-width-2em: 2em !default; /* 2em */
$spv-width-95p: 95% !default; /* 95% */
$spv-width-198: 198px !default; /* 198px */
$spv-width-fit: fit-content !default; /* fit-content */

//Height
$spv-height-p100: 100% !default; /* 100% */
$spv-height-32: 32px !default; /* 32px */
$spv-height-240: 240px !default; /* 240px */
$spv-height-250: 250px !default; /* 250px */
$spv-height-500: 500px !default; /* 500px */
$spv-height-220: 220px !default; /* 220px */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

/* stylelint-disable-line no-empty-source */

$sm-mobile: 575.98;
$mobile: 767.98;
$medium-mobile: 375;
$tablet: 991.98;
$desktop: 1199.98;
$lg-desktop: 1399.98;

// Small mobiles (landscape phones, less than 576px)
@mixin sm-mobile() {
  @media only screen and (max-width: ($sm-mobile * 1px)) {
    @content;
  }
}

// Small devices (landscape phones, less than 768px)
@mixin mobile {
  @media only screen and (max-width: ($mobile * 1px)) {
    @content;
  }
}

// Medium mobiles (phones, less than 375px)
@mixin medium-mobile() {
  @media only screen and (max-width: ($medium-mobile * 1px)) {
    @content;
  }
}

// Medium devices (tablets, less than 992px)
@mixin tablet {
  @media only screen and (max-width: ($tablet * 1px)) {
    @content;
  }
}

// Large devices (desktops, less than 1200px)
@mixin desktop {
  @media only screen and (max-width: ($desktop * 1px)) {
    @content;
  }
}

// X-Large devices (large desktops, less than 1400px)
@mixin lg-desktop {
  @media only screen and (max-width: ($lg-desktop * 1px)) {
    @content;
  }
}

@include export-module('smartpdfviewer-theme') {
  /* stylelint-disable value-no-vendor-prefix */
  /* stylelint-disable property-no-vendor-prefix */
  .e-control.e-smart-pdfviewer {
    min-height: $spv-height-500;
    position: relative;

    .e-pv-pdfviewer-container {
      width: $spv-width-p100;
      height: $spv-height-p100;
      float: left;
    }

    .e-spv-smart-assistanceview + .e-dlg-container .e-popup.e-control.e-popup-open {
      .e-footer-content button {
        @if $skin-name=='Material3' {
          border-radius: $spv-radius-20;
        }
      }

      .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
        @if $skin-name=='highcontrast' {
          padding-top: $spv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
        }
      }
    }

    .e-spv-smart-assistanceview {
      width: $spv-width-p100;
      height: $spv-height-p100;

      .e-aiassistview .e-view-container {
        width: $spv-width-95p;

        .e-spv-assist-view-banner-content {
          width: $spv-width-p100;
          height: $spv-height-240;
          font-size: $spv-text-sm;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: $spv-spacing-56;

          .e-assistview-icon::before {
            font-size: $spv-font-icon-32;
          }
        }
      }

      .e-aiassistview .e-footer {
        margin-bottom: $spv-spacing-12;
        margin-top: $spv-spacing-12;
        width: $spv-width-95p;
      }
    }

    .e-aiassistview {
      border: none;
    }

    .e-spv-smart-assistanceview-mobile {
      width: $spv-width-p100;
      position: absolute;
      z-index: 1001;
      margin-left: $spv-spacing-0;
      top: 0;
    }

    // .hide-initial-prompt #e-prompt-item_0 {
    //   display: none;
    // }

    .ai-disclaimer {
      font-size: $spv-text-xxs;
      color: $spv-assit-disclaimer-color;
      margin-bottom: $spv-spacing-4;
      text-align: center;
    }

    .e-aiassistview .e-output-icon {
      margin-left: $spv-spacing-0;
    }

    .e-smart-pdfviewer .e-spv-smart-assistanceview .e-aiassistview .e-views::-webkit-scrollbar,
    .e-aiassistview .e-custom-view::-webkit-scrollbar,
    .e-smart-pdfviewer .e-spv-smart-assistanceview .e-aiassistview .e-assistview-content-section::-webkit-scrollbar {
      width: $spv-width-3;
    }

    .e-views,
    .e-custom-view,
    .e-smart-pdfviewer .e-spv-smart-assistanceview .e-aiassistview .e-assistview-content-section {
      &::-webkit-scrollbar-thumb {
        background: $scrollbar-color;
      }
    }

    .e-control.e-smart-pdfviewer {
      &.e-views,
      &.e-custom-view,
      &.e-smart-pdfviewer .e-spv-smart-assistanceview .e-aiassistview .e-assistview-content-section {
        &::-webkit-scrollbar-track {
          background: $scrollbar-background-color;
        }
      }
    }

    .e-aiassistview .e-view-header {
      display: none;
    }

    .e-aiassistview .e-view-content {
      height: $spv-height-p100;
    }

    .e-spv-block {
      display: block;
    }

    .e-spv-none {
      display: none;
    }

    .e-spv-smart-redcatview {
      width: $spv-width-p100;
      height: $spv-height-p100;

      .e-spv-redact-options,
      .e-spv-redact-patterns {
        height: $spv-height-p100;
        overflow: auto;
      }

      // .e-spv-redact-patterns .e-icons.interaction.e-icon-collapsible {
      //   display: none !important;/* stylelint-disable-line declaration-no-important */
      //   cursor: unset !important; /* stylelint-disable-line declaration-no-important */
      // }

      // .e-spv-redact-patterns .e-icons.interaction.e-icon-expandable {
      //   display: none !important;/* stylelint-disable-line declaration-no-important */
      //   cursor: unset !important; /* stylelint-disable-line declaration-no-important */
      // }

      .e-spv-redact-container {
        width: $spv-width-p100;
        height: $spv-height-p100;
        padding-left: $spv-spacing-0;
        padding-right: $spv-spacing-0;
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;

        .e-spv-pattern-tree-view .e-list-item .e-checkbox-wrapper {
          pointer-events: none;
        }
      }

      .e-treeview .e-list-item {
        @if $skin-name == 'bootstrap5' {
          padding: $spv-spacing-0;
        }
        padding: $spv-spacing-2 $spv-spacing-0;
        white-space: unset !important;/* stylelint-disable-line declaration-no-important */
      }

      .e-treeview .e-list-text {
        width: $spv-width-fit;
        @if $skin-name=='tailwind' {
          line-height: $spv-line-height-40;
        }
      }

      .e-treeview{
        border: none;
        @if $skin-name == 'tailwind3' {
          background: none;
        }
      }

      .e-spv-button-container {
        padding: $spv-spacing-14;
        text-align: center;
        border-top: $spv-border-1 solid;
        border-color: $spv-control-border-color;
      }
      .e-spv-scan-button,
      .e-spv-redact-btn {
        height: $spv-redact-btn-height;
        @if $skin-name == 'bootstrap5.3' {
          line-height: $spv-line-height-24;
        }
      }
      .e-spv-scan-button {
        width: $spv-width-198;
        border: none;
        font-size: $spv-text-base;
        @if ($skin-name == 'highcontrast' or $skin-name == 'fabric' or $skin-name == 'fabric-dark') {
          border-radius: $spv-radius-0;
        }
        @else if ($skin-name == 'tailwind3') {
          border-radius: $spv-radius-6;
        }
        @else if ($skin-name == 'material' or $skin-name == 'material-dark') {
          border-radius: $spv-radius-2;
        }
        @else {
          border-radius: $spv-radius-4;
        }
      }

      .e-spv-redact-button-container {
        padding: $spv-spacing-14 $spv-spacing-0 $spv-spacing-0;
        text-align: center;
        border-top: $spv-border-1 solid;
        border-color: $spv-control-border-color;
        display: flex;
        justify-content: center;
        gap: $spv-redact-btn-gap;
      }

      .e-spv-spinner-redact {
        right: 12.5%;
        top: 50%;
      }

      .e-spv-blur-container {
        position: absolute;
        background-color: rgba($spv-redact-background-color, .3);
        width: $spv-width-p100;
        height: $spv-height-p100;
      }

      .e-spv-redact-body {
        padding: $spv-spacing-0;
        height: $spv-height-p100;
        display: flex;
        flex-direction: column;
      }

      .e-spv-redact-btn {
        width: $spv-width-96;
        padding: $spv-spacing-0 !important;/* stylelint-disable-line declaration-no-important */
        font-size: $spv-text-sm !important;/* stylelint-disable-line declaration-no-important */
      }

      .e-spv-smart-redactview-mobile {
        width: $spv-width-p100;
        position: absolute;
        z-index: 1001;
        margin-left: $spv-spacing-0;
        top: 0;
      }
    }

    .e-toolbar-item .e-tbar-btn-text.e-spv-smartfill-text {
      display: inline-block;
      font-weight: normal;
      @if $skin-name == 'material' or $skin-name == 'material-dark' {
        padding-top: $spv-spacing-2;
      }
    }

    .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
      justify-content: flex-start;
    }

    .e-toolbar-item .e-btn.e-spv-btn {
      align-items: center;
      justify-content: center;
      height: $spv-height-32;
      text-decoration: none;
      @if $skin-name == 'highcontrast' {
        padding: $spv-spacing-0 $spv-spacing-12;
      }
      @else if $skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'tailwind3' or $skin-name == 'fabric' or $skin-name == 'fabric-dark'  {
        padding: $spv-spacing-0 $spv-spacing-8;
      }
    }

    .e-toolbar .e-toolbar-item.e-overlay .e-icons{
      @if $skin-name == 'material' or $skin-name == 'material-dark'{
        font-size: $spv-text-base;
        width: $spv-width-2em;
      }
      @if $skin-name == 'Material3'{
        margin-bottom: $spv-spacing-4;
      }
    }

    .e-spv-smart-paste-icon {
      font-size: $spv-text-base !important;/* stylelint-disable-line declaration-no-important */
      @if $skin-name == 'Material3' {
        font-size: $spv-text-lg !important;/* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-pv-mobile-view.e-smart-pdfviewer .e-pv-modern-side-panel-template-content {
    position: relative;
  }

  .e-pv-toolbar.e-toolbar:not(.e-rtl) .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn .e-spv-smart-paste-icon {
    padding: $spv-toolbar-popup-icon-padding;
  }

  .e-pv-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-icons.e-spv-smart-paste-icon.e-btn-icon {
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name=='FluentUI' {
      padding-left: $spv-spacing-4;
      line-height: $spv-line-height-16;
    }
    @if $skin-name=='FluentUI' {
      padding-bottom: $spv-spacing-0;
    }
  }
}

@include export-module('smartpdfviewer-bootstrap-icons') {
  .e-smart-pdfviewer {
    .e-spv-icon::before {
      font-family: 'e-icons';
    }

    .e-spv-ai-assit-icon::before {
      content: '\e157';
    }

    .e-spv-smart-redaction-icon::before {
      content: '\e1b5';
    }

    .e-spv-smart-paste-icon::before {
      content: '\e168';
    }
  }
}

@include export-module('smartpdfviewer-bigger') {

  .e-bigger .e-control.e-smart-pdfviewer {
    .e-pv-smart-assistanceview + .e-dlg-container .e-popup.e-control.e-popup-open {
      @if ($skin-name=='FluentUI') {
        height: $spv-height-250;
      }

      @else if ($skin-name=='highcontrast') {
        height: $spv-height-220;
      }
    }

    .e-spv-smart-redcatview .e-treeview .e-list-text{
      padding: $spv-spacing-9;
      line-height: $spv-line-height-20;
      @if $skin-name =='tailwind' or $skin-name == 'tailwind3'{
        line-height: $spv-line-height-32;
      }
    }

    .e-spv-smart-redcatview .e-spv-redact-btn,
    .e-spv-smart-redcatview .e-spv-scan-button {
      height: $spv-redact-btn-height-big;
      @if $skin-name == 'tailwind3'{
        border-radius: $spv-radius-8;
      }
    }

    .e-spv-smart-redcatview .e-spv-redact-button-container {
      gap: $spv-redact-btn-gap-big;
    }

    .e-spv-smart-redcatview .e-treeview .e-list-item{
      @if $skin-name =='tailwind' or $skin-name == 'tailwind3'{
        padding: $spv-spacing-0;
      }
    }

    .e-toolbar .e-toolbar-item.e-overlay .e-icons{
      @if $skin-name == 'material' or $skin-name == 'material-dark'{
        font-size: $spv-text-base;
        width: $spv-width-2em;
      }
      @if $skin-name == 'Material3'{
        margin-bottom: $spv-spacing-4;
      }
    }

    .e-aiassistview .e-footer .e-assist-textarea {
      font-size: $spv-text-sm;
    }

    .e-pv-toolbar:not(.e-toolbar-pop) .e-spv-btn.e-tbar-btn {
      width: $spv-width-auto !important;/* stylelint-disable-line declaration-no-important */
    }

    .e-spv-smart-paste-icon {
      font-size: $spv-text-base !important;/* stylelint-disable-line declaration-no-important */
      @if $skin-name == 'Material3' {
        font-size: $spv-text-lg !important;/* stylelint-disable-line declaration-no-important */
      }
    }
  }
}

//default
$timepicker-skin-name: 'bootstrap-dark' !default;
$timepicker-default-text-indent: 20px !default;
$timepicker-list-bigger-line-height: 40px !default;
$timepicker-list-normal-line-height: 26px !default;
$timepicker-list-normal-font-size: 14px !default;
$timepicker-list-bigger-font-size: 15px !default;
$timepicker-list-normal-text-indent: $timepicker-default-text-indent !default;
$timepicker-list-bigger-text-indent: 20px !default;
$timepicker-popup-border-radius: 4px !default;
$timepicker-list-font-weight: regular !default;
$timepicker-popup-shadow:  0 6px 12px rgba($base-font, .5) !default;
$timepicker-list-default-font-color: $grey-dark-font !default;
$timepicker-list-default-border-style: none !default;
$timepicker-list-hover-border-color: none !default;
$timepicker-list-border-color: 1px solid $grey-44 !default;
$timepicker-list-bg-color: $grey-dark !default;
$timepicker-list-active-bg-color: $brand-primary !default;
$timepicker-list-active-icon-color: $grey-light-font !default;
$timepicker-list-active-font-color: $brand-primary-font !default;
$timepicker-list-hover-bg-color: $grey-44 !default;
$timepicker-list-hover-font-color: $grey-dark-font !default;
$timepicker-list-popup-icon-active-color: $grey-dark-font !default;
$timepicker-list-active-hover-bg-color: $brand-primary !default;
$timepicker-list-active-hover-font-color: $grey-light-font !default;
$timepicker-list-normal-padding: 0 !default;
$timepicker-list-bigger-padding: 0 !default;
$timepicker-font-icon: '\e93e' !default;
$timepicker-icon-normal-font-size: 16px !default;
$timepicker-icon-bigger-font-size: 18px !default;
$timepicker-disable-text: $grey-8c !default;
$timepicker-disable-opacity: 1 !default;
$timepicker-default-overlay: rgba($grey-base, .6) !default;

// mouse small
$timepicker-list-small-font-size: 13px !default;
$timepicker-list-small-line-height: 22px !default;
$timepicker-list-small-text-indent: 12px !default;
$timepicker-list-small-font-color: $grey-dark-font !default;

// icon small
$timepicker-icon-small-font-size: 14px !default;

// Touch small
$timepicker-list-bigger-small-font-size: 14px !default;
$timepicker-list-bigger-small-line-height: 34px !default;
$timepicker-list-bigger-small-text-indent: 20px !default;

// Touch small icon
$timepicker-icon-bigger-small-font-size: 18px !default;

// modal dialog colors
$modal-header-bg-color: $grey-dark !default;
$modal-header-text-color: $grey-dark-font !default;

// modal dialog portrait dimensions
$modal-header-height: 10% !default;
$modal-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
$modal-header-display-style: flex !default;
$modal-header-content-align: center !default;
$modal-header-portrait-font-size: 2vh !default;
$modal-close-icon-float: left !default;
$modal-portrait-content-padding: 1vh 2vw !default;
$modal-content-height: 90% !default;
$modal-content-overflow: auto !default;
$modal-header-title-transform: capitalize !default;
$modal-header-border-bottom: 1px solid $grey-44 !default;
$modal-list-line-height: 5vh !default;
$modal-landscape-list-line-height: 10vh !default;

// modal dialog landscape dimensions
$modal-header-landscape-height: 15% !default;
$modal-content-landscape-height: 85% !default;
$modal-header-landscape-font-size: 2vw !default;
$modal-landscape-padding: 1vh 1vw !default;
$modal-list-item-padding: 1vh 0 !default;
$modal-mobile-font-size: 14px !default;
$modal-tablet-font-size: 24px !default;

//enddefault

$timepicker-list-parent-margin: 0;
$timepicker-list-parent-padding: $timepicker-list-normal-padding 0;
$timepicker-list-parent-bigger-padding: $timepicker-list-bigger-padding 0;
$timepicker-zero-border-radius: 0 !default;
$timepicker-model-title-font-weight: 500 !default;
$timepicker-bigger-content-placeholder-min-height: 40px !default;
$timepicker-full-height: 100% !default;
$timepicker-content-placeholder-min-height: 33px !default;
$timepicker-full-width: 100% !default;
$timepicker-border: 1px !default;

@include export-module('timepicker-layout') {
  //   timepicker layout
  .e-input-group.e-control-wrapper.e-time-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-time-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
    display: flex;
  }

  .e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-time-wrapper {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;

    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-normal-font-size;
      @if $timepicker-skin-name == 'material' or $timepicker-skin-name == 'material-dark' or $timepicker-skin-name == 'Material3' {
        min-height: $timepicker-normal-input-min-height;
        min-width: $timepicker-normal-input-min-width;
      }
      @if $timepicker-skin-name == 'Material3' {
        border-radius: $timepicker-normal-icon-border-radius;
        margin: $timepicker-icon-margin;
      }
    }

    #{if(&, '&', '*')} .e-time-icon.e-icons.e-disabled {
      pointer-events: none;
    }

    #{if(&, '&', '*')} span {
      cursor: pointer;
    }
  }

  #{&}.e-timepicker {
    @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
      --dummy-style: true;
    }
  }

  #{&}.e-timepicker.e-time-modal {
    @if $timepicker-skin-name != 'Material3' {
      background-color: $timepicker-default-overlay;
    }
    @if $timepicker-skin-name == 'Material3' {
      background: $timepicker-default-overlay;
    }
    height: $timepicker-full-height;
    left: $timepicker-list-parent-margin;
    opacity: .5;
    pointer-events: auto;
    position: fixed;
    top: $timepicker-list-parent-margin;
    width: $timepicker-full-width;
    z-index: 999;
  }

  #{&}.e-timepicker.e-popup {
    border-style: solid;
    border-width: $timepicker-border;
    overflow: auto;

    #{if(&, '&', '*')} .e-content {
      position: relative;
    }

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      margin: $timepicker-list-parent-margin;
      padding: $timepicker-list-parent-padding;

      #{if(&, '&', '*')} .e-list-item {
        cursor: default;
        font-size: $timepicker-list-normal-font-size;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: $timepicker-full-width;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        cursor: pointer;
      }
    }
  }

  #{&}.e-timepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
      line-height: $timepicker-list-normal-line-height;
      text-indent: $timepicker-list-normal-text-indent;
    }
  }

  .e-small #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-small#{&}.e-timepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul {
      #{if(&, '&', '*')} .e-list-item {
        font-size: $timepicker-list-small-font-size;
        line-height: $timepicker-list-small-line-height;
        text-indent: $timepicker-list-small-text-indent;
      }
    }
  }

  .e-small .e-time-wrapper,
  #{if(&, '&', '*')}.e-small.e-time-wrapper,
  #{if(&, '&', '*')}.e-small .e-control-wrapper.e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-time-wrapper {
    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-small-font-size;
      @if $timepicker-skin-name == 'Material3' {
        min-height: $timepicker-small-input-min-height;
        min-width: $timepicker-small-input-min-width;
        border-radius: $timepicker-small-icon-border-radius;
        margin: $timepicker-time-small-icon-margin;
      }
    }
  }

  .e-content-placeholder.e-timepicker.e-placeholder-timepicker {
    background-size: 250px 33px;
    min-height: $timepicker-content-placeholder-min-height;
  }
}

/* stylelint-disable */
.e-time-overflow {
  overflow: hidden;
}

.e-timepicker-mob-popup-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: $timepicker-full-height;
  justify-content: center;
  left: $timepicker-list-parent-margin;
  max-height: $timepicker-full-height;
  position: fixed;
  top: $timepicker-list-parent-margin;
  width: $timepicker-full-width;
  z-index: 1002;

  .e-timepicker.e-popup.e-lib.e-control.e-popup-open {
    left: $timepicker-list-parent-margin !important;
    position: relative;
    top: $timepicker-list-parent-margin !important;
  }
}

.e-timepicker-mob-popup-wrap .e-popup-expand.e-timepicker.e-popup,
.e-datetimepicker.e-popup-expand.e-timepicker.e-popup,
.e-timepicker-mob-popup-wrap .e-popup-expand.e-datetimepicker.e-popup,
.e-datetimepicker.e-popup-expand.e-popup {
  border-radius: $timepicker-zero-border-radius;
}

.e-timepicker-mob-popup-wrap .e-popup-expand,
.e-datetimepicker.e-popup-expand {
    #{if(&, '&', '*')} .e-model-header {
      height: $modal-header-height;
      padding: $modal-header-padding;
      display: $modal-header-display-style;
      align-items: $modal-header-content-align;
      font-size: $modal-header-portrait-font-size;
      border-bottom: $modal-header-border-bottom;

      #{if(&, '&', '*')} .e-popup-close {
        float: $modal-close-icon-float;
        padding: $modal-portrait-content-padding;
      }

      #{if(&, '&', '*')} .e-model-title {
        padding: $modal-portrait-content-padding;
        text-transform: $modal-header-title-transform;
        font-weight: $timepicker-model-title-font-weight;
      }

      #{if(&, '&', '*')} .e-btn.e-popup-close {
        font-size: $modal-header-portrait-font-size;
      }
    }

    #{if(&, '&', '*')} .e-content {
      height: $modal-content-height;
      overflow: $modal-content-overflow;

      #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
        padding: $modal-list-item-padding;
        line-height: $modal-list-line-height;

        @media (max-device-width: 768px) {
          font-size: $modal-mobile-font-size;
        }

        @media (min-device-width: 768px) {
          font-size: $modal-tablet-font-size;
        }
      }
    }
}

@media screen and (orientation: landscape) {
  .e-timepicker-mob-popup-wrap .e-popup-expand,
  .e-datetimepicker.e-popup-expand {  
      #{if(&, '&', '*')} .e-model-header {
        height: $modal-header-landscape-height;
        font-size: $modal-header-landscape-font-size;

        #{if(&, '&', '*')} .e-popup-close {
          padding: $modal-landscape-padding;
        }

        #{if(&, '&', '*')} .e-model-title {
          padding: $modal-landscape-padding;
        }

        #{if(&, '&', '*')} .e-btn.e-popup-close {
          font-size: $modal-header-landscape-font-size;
        }
      }

      #{if(&, '&', '*')} .e-content {
        height: $modal-content-landscape-height;

        #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
          padding: $modal-list-item-padding;
          line-height: $modal-landscape-list-line-height;
        }
      }
    }
}
/* stylelint-enable */

@include export-module('timepicker-theme') {
  .e-time-wrapper {
    #{if(&, '&', '*')} .e-input-group-icon.e-icons.e-active {
      @if $timepicker-skin-name == 'bootstrap4' or $timepicker-skin-name == 'bootstrap5' or $timepicker-skin-name == 'bootstrap5.3' {
        background: $timepicker-icon-active-bg-color;
        border-color: $timepicker-active-border-color;
      }
      color: $timepicker-list-active-icon-color;
    }

    #{if(&, '&', '*')}.e-input-group:not(.e-disabled) .e-input-group-icon.e-active:active {
      color: $timepicker-list-popup-icon-active-color;
      @if $timepicker-skin-name == 'Material3' {
        border: $timepicker-icon-active-border;
        border-radius: $timepicker-icon-active-border-radius;
        background: $timepicker-icon-active-bg-color;
      }
    }
  }

  #{&}.e-timepicker.e-popup {
    @if $timepicker-skin-name != 'Material3' {
      background-color: $timepicker-list-bg-color;
    }
    @if $timepicker-skin-name == 'Material3' {
      background: $timepicker-list-bg-color;
    }
    border: $timepicker-list-border-color;
    border-radius: $timepicker-popup-border-radius;
    box-shadow: $timepicker-popup-shadow;

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      @if $timepicker-skin-name != 'Material3' {
        background-color: $timepicker-list-bg-color;
      }
      @if $timepicker-skin-name == 'Material3' {
        background: $timepicker-list-bg-color;
      }

      #{if(&, '&', '*')} li.e-list-item {
        border: $timepicker-list-default-border-style;
        color: $timepicker-list-default-font-color;
      }

      #{if(&, '&', '*')} .e-list-item.e-disabled {
        color: $timepicker-disable-text;
        opacity: $timepicker-disable-opacity;
        pointer-events: none;
        touch-action: none;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        @if $skin-name == 'tailwind3' {
          background: $timepicker-list-hover-bg-color;
          color: $timepicker-list-hover-font-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-navigation {
        @if $skin-name == 'tailwind3' {
          background: $timepicker-list-navigation-bg-color;
          color: $timepicker-list-navigation-font-color;
          box-shadow: $timepicker-list-navigation-box-shadow;
        }
      }

      #{if(&, '&', '*')} .e-list-item:focus {
        @if $skin-name == 'tailwind3' {
          background: $timepicker-list-focus-bg-color;
          color: $timepicker-list-focus-font-color;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-hover,
      #{if(&, '&', '*')} .e-list-item.e-navigation,
      #{if(&, '&', '*')} .e-list-item:focus {
        @if $timepicker-skin-name != 'Material3' {
          background-color: $timepicker-list-hover-bg-color;
        }
        @if $timepicker-skin-name == 'Material3' {
          background: $timepicker-list-hover-bg-color;
        }
        border: $timepicker-list-hover-border-color;
        color: $timepicker-list-hover-font-color;
      }

      #{if(&, '&', '*')} .e-list-item.e-active {
        @if $timepicker-skin-name != 'Material3' and $timepicker-skin-name != 'tailwind3' {
          background-color: $timepicker-list-active-bg-color;
        }
        @if $timepicker-skin-name == 'Material3' {
          background: $timepicker-list-active-bg-color;
        }
        color: $timepicker-list-active-font-color;
        @if $skin-name == 'tailwind3' {
          font-weight: $font-weight-medium;
        }
      }

      #{if(&, '&', '*')} .e-list-item.e-active.e-hover {
        @if $timepicker-skin-name != 'Material3' {
          background-color: $timepicker-list-active-hover-bg-color;
        }
        @if $timepicker-skin-name == 'Material3' {
          background: $timepicker-list-active-hover-bg-color;
        }
        color: $timepicker-list-active-hover-font-color;
      }
    }
  }

  .e-small #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-small#{&}.e-timepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul {
      #{if(&, '&', '*')} .e-list-item {
        color: $timepicker-list-small-font-color;
      }
    }
  }

  .e-timepicker-mob-popup-wrap .e-timepicker.e-popup-expand,
  .e-datetimepicker.e-popup-expand {

    #{if(&, '&', '*')} .e-model-header {
      background-color: $modal-header-bg-color;
      color: $modal-header-text-color;

      #{if(&, '&', '*')} .e-popup-close {
        color: $modal-header-text-color;
        font-weight: $timepicker-model-title-font-weight;
      }
    }
  }
}

@include export-module('timepicker-bootstrap-icons') {

  /*! component icons */
  .e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-time-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons::before {
      content: '\e93e';
    }
  }

  .e-timepicker-mob-popup-wrap .e-timepicker.e-popup-expand,
  .e-datetimepicker.e-popup-expand {

    #{if(&, '&', '*')} .e-model-header {

      #{if(&, '&', '*')} .e-popup-close::before {
        content: '\e7fc';
        font-family: 'e-icons';
      }
    }
  }
}

@include export-module('timepicker-bigger') {

  .e-bigger .e-time-wrapper,
  #{if(&, '&', '*')}.e-bigger.e-time-wrapper,
  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-bigger.e-time-wrapper {
    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-bigger-font-size;
      @if $timepicker-skin-name == 'material' or $timepicker-skin-name == 'material-dark' or $timepicker-skin-name == 'Material3' {
        min-height: $timepicker-bigger-input-min-height;
        min-width: $timepicker-bigger-input-min-width;
      }
      @if $timepicker-skin-name == 'Material3' {
        border-radius: $timepicker-bigger-icon-border-radius;
        margin: $timepicker-bigger-icon-margin;
      }
    }
  }

  .e-bigger #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-bigger#{&}.e-timepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul {
      padding: $timepicker-list-parent-bigger-padding;

      #{if(&, '&', '*')} .e-list-item {
        font-size: $timepicker-list-bigger-font-size;
        line-height: $timepicker-list-bigger-line-height;
        text-indent: $timepicker-list-bigger-text-indent;
      }
    }
  }

  .e-bigger .e-content-placeholder.e-timepicker.e-placeholder-timepicker,
  .e-bigger.e-content-placeholder.e-timepicker.e-placeholder-timepicker {
    background-size: 250px 40px;
    min-height: $timepicker-bigger-content-placeholder-min-height;
  }

  .e-small.e-bigger #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-small.e-bigger#{&}.e-timepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul {
      #{if(&, '&', '*')} .e-list-item {
        font-size: $timepicker-list-bigger-small-font-size;
        line-height: $timepicker-list-bigger-small-line-height;
        text-indent: $timepicker-list-bigger-small-text-indent;
      }
    }
  }

  .e-small.e-bigger .e-time-wrapper,
  #{if(&, '&', '*')}.e-small.e-bigger.e-time-wrapper,
  #{if(&, '&', '*')}.e-small.e-bigger .e-control-wrapper.e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-bigger.e-time-wrapper {
    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-bigger-small-font-size;
      @if $timepicker-skin-name == 'Material3' {
        min-height: $timepicker-bigger-small-input-min-height;
        min-width: $timepicker-bigger-small-input-min-width;
        border-radius: $timepicker-bigger-small-icon-border-radius;
        margin: $timepicker-bigger-small-icon-margin;
      }
    }
  }

  .e-bigger.e-small #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-bigger.e-small#{&}.e-timepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul {
      #{if(&, '&', '*')} .e-list-item {
        color: $timepicker-list-small-font-color;
      }
    }
  }

  .e-bigger .e-time-wrapper.e-outline .e-input-group-icon.e-time-icon,
  .e-time-wrapper.e-control-wrapper.e-bigger.e-outline .e-input-group-icon.e-time-icon,
  .e-bigger .e-time-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-time-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' {
      min-height: $zero-value;
      min-width: 24px;
    }
  }

  .e-bigger.e-small .e-outline.e-time-wrapper .e-input-group-icon.e-time-icon,
  .e-bigger.e-small.e-outline.e-time-wrapper .e-input-group-icon.e-time-icon,
  .e-time-wrapper.e-control-wrapper.e-bigger.e-small.e-outline .e-input-group-icon.e-time-icon,
  .e-bigger.e-small .e-time-wrapper.e-control-wrapper.e-outline .e-input-group-icon.e-time-icon {
    @if $skin-name == 'material-dark' or $skin-name == 'material' {
      min-height: $zero-value;
      min-width: 20px;
    }
  }
}

$field-list-skin: 'bootstrap-dark' !default;
$field-list-active-color: $brand-primary !default;
$field-list-toggle-border-color: $grey-8c !default;
$field-list-drag-default-border-color: $field-list-toggle-border-color !default;
$field-list-border-type: $border-type !default;
$field-list-border-size: $border-size !default;
$field-list-table-background-color: $grey-dark !default;
$field-list-default-padding-size: 8px !default;
$field-list-title-padding-size: 20px !default;
$field-list-static-padding-size: 10px !default;
$field-list-treeview-padding-size: -40px !default;
$field-list-header-padding-size: 14px !default;
$field-list-axis-header-padding-size: 5px !default;
$field-list-title-font-size: 18px !default;
$field-list-title-line-height: 0 !default;
$field-list-content-font-size: $font-size !default;
$field-list-button-font-weight: 500 !default;
$field-list-font-family: $font-family !default;
$field-list-header-background-color: $grey-darker !default;
$field-list-default-fill-color: $content-bg-color !default;
$field-list-default-border-radius: 5px !default;
$field-list-drop-hover-color: $grey-e6 !default;
$field-list-selected-color: rgba($header-bg-color, .87) !default;
$field-list-toggle-bg-color: $grey-dark !default;
$field-list-toggle-font-color: $grey-dark-font !default;
$field-list-button-icon-color: $grey-dark-font !default;
$field-list-filter-text-color: $field-list-button-icon-color !default;
$field-list-button-color: $gray-light !default;
$field-list-icon-hover-color: rgba($content-font-color, .87) !default;
$field-list-button-font-color: $content-font-color !default;
$field-list-button-border-color: rgba($header-bg-color, .12) !default;
$field-list-button-hover-color: rgba($header-bg-color, .12) !default;
$field-list-button-focus-color: $field-list-button-hover-color !default;
$field-list-button-active-color: $content-font-color !default;
$field-list-button-back-color: #f5f5f5 !default;
$field-list-drag-clone-text-color: rgba($grey-dark-font, .87) !default;
$field-list-treeview-text-color: $field-list-drag-clone-text-color !default;
$field-list-drag-clone-bg-color: $grey-99 !default;
$field-list-drag-clone-font-size: 14px !default;
$field-list-drag-clone-line-height: 1em !default;
$field-list-drag-clone-height: 28px !default;
$field-list-header-font-size: 13px !default;
$field-list-header-text-transform: none !default;
$field-list-button-font-size: 13px !default;
$field-list-icon-size: 14px !default;
$field-list-toggle-icon-size: 17px !default;
$field-list-toggle-padding-size: 8px !default;
$field-list-toggle-icon-bigger-size: 20px !default;
$field-list-toggle-size: 31px !default;
$field-list-toggle-bigger-size: 36px !default;
$field-list-editor-search-padding-size: 20px !default;
$field-list-member-filter-list-padding-size: -35px !default;
$field-list-member-field-list-height: 200px !default;
$field-list-toggle-hover-color: $grey-8c !default;
$pivot-formula-background: $grey-base !default;
$pivot-text-area-background: $content-border-color !default;
$field-list-treeview-drag-padding: 6px !default;
$field-list-treeview-drag-margin: 2px !default;
$field-list-treeview-drag-bigger-padding: 3px !default;
$field-list-button-height: 32px !default;
$field-list-bigger-button-height: 36px !default;
$field-list-axis-content-height: 133px !default;
$field-list-drag-icon-color: $grey-dark-font !default;
$field-list-default-header-font-color: $grey-dark-font !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: 16px !default;
$field-list-header-padding: 15px !default;
$field-list-bigger-header-padding: 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-sort-icon-to-icon-padding: 12px !default;
$field-list-bigger-icon-to-icon-padding: 4px !default;
$field-list-bigger-sort-icon-to-icon-padding: 16px !default;
$field-list-default-bigger-padding-size: 16px !default;
$field-list-bigger-header-font-size: 14px !default;
$field-list-bigger-button-font-size: 14px !default;
$pivot-calculated-header-padding: 4px !default;
$pivot-calculated-bigger-header-padding: 6px !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-header-content-line-height: 1.5em !default;
$field-list-tree-header-padding: 7px !default;
$field-list-bigger-tree-header-padding: 8px !default;
$field-list-editor-label-padding-size: 16px 10px 16px 20px !default;
$field-list-editor-label-font: 500 13px Helvetica !default;
$field-list-editor-label-opacity: 1 !default;
$field-list-editor-label-color: $grey-light-font !default;
$field-list-editor-label-fill: $grey-f8 !default;
$field-list-editor-label-excel-width: 312px !default;
$field-list-editor-label-excel-padding-size: 18px 10px 12px 20px !default;
$field-list-editor-label-excel-opacity: 100%;
$field-list-back-font-color: $grey-light-font !default;
$field-list-mobile-header-color: $grey-lighter !default;
$field-list-mobile-header-font-color: $grey-light-font !default;
$field-list-back-margin: 5px !default;
$field-list-sort-wrapper-padding-size: 10px !default;
$field-list-sort-select-background-color: $grey-dark !default;
$field-list-sort-select-border-color: $grey-8c !default;
$field-list-sort-select-color: $grey-light-font !default;
$field-list-border: $content-border-color !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: 402px !default;
$field-list-search-popup-axis-table-bigger-height: 404px !default;
$field-list-search-popup-axis-content-bigger-height: 165px !default;
$field-list-popup-axis-content-bigger-height: $field-list-axis-content-height !default;
$field-list-search-static-field-table-height: 262px !default;
$field-list-filter-toolbar-items-margin: 20px !default;
$field-list-treeview-ul-padding: 4px !default;
$field-list-treeview-li-padding: 2px !default;
$field-list-treeview-bigger-ul-padding: 5px !default;
$field-list-treeview-bigger-li-padding: 0 !default;
$field-list-treeview-mobile-ul-padding: 48px !default;
$field-list-treeview-mobile-li-padding: 0 !default;
$field-list-calc-list-icon: 8px !default;
$field-list-calc-list-icon-rtl: 3px !default;
$pivot-formatting-format-table-data-padding-right: 18px !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-member-editor-search-padding: 0 $field-list-editor-search-padding-size 10px !default;
$field-list-member-editor-node-limit-outer-div-bigger-height: 100px !default;
$field-list-member-editor-bigger-height: 400px !default;
$field-list-member-editor-node-limit-bigger-height: 450px !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: 200px !default;
$field-list-adaptive-pivot-button-height: 36px !default;
$field-list-adaptive-pivot-button-padding: 0 16px !default;
$pivot-calculated-formula-font-family:  $font-family !default;
$pivot-calculated-formula-font-padding: 5px 10px !default;
$pivot-calculated-header-opacity: .87 !default;
$pivot-dialog-font-weight: normal !default;
$pivot-dialog-content-opacity: 1 !default;
$pivot-dialog-content-padding: 15px !default;
$pivot-dialog-footer-padding: 15px !default;
$pivot-dialog-footer-paddingright: 15px !default;
$field-list-toggle-shadow-color: -1px 1px 4px 0 rgba($shadow, .12) !default;
$field-list-toggle-left-shadow-color: 1px 1px 4px 0 rgba($shadow, .12) !default;
$field-list-drag-clone-shadow-color: 0 1px 3px 0 rgba($shadow, .12) !default;
$field-list-default-header-icon-font-color: $field-list-default-header-font-color !default;
$pivot-calculated-icon-opacity: 1 !default;
$field-list-treeview-font-weight: 500 !default;
$field-list-calc-formula-font-size: 13px !default;
$field-list-calc-bigger-formula-font-size: 13px !default;
$field-list-bigger-button-line-height: 1em !default;
$error-font-color: #f44336 !default;
$field-list-adaptive-outerdiv-height: 190px !default;
$field-list-default-font-color: $grey-dark-font !default;
$field-list-default-formula-font-color: $field-list-default-font-color !default;
$field-list-cal-button-text-color: $field-list-default-font-color !default;
$field-list-default-border-color: $grey-8c !default;
$field-list-default-prompt-color: $grey-f8 !default;
$field-list-default-bg-color: $grey-base !default;
$field-list-axis-header-color: $field-list-header-background-color !default;
$field-list-default-fill-color: $grey-white !default;
$field-list-default-border-radius: 0 !default;
$field-list-button-font-color: $grey-light-font !default;
$field-list-button-border-color: $grey-d4 !default;
$field-list-drag-clone-text-color: $grey-light-font !default;
$field-list-drag-clone-border-radius: 4px !default;
$field-list-editor-dialog-footer-padding: 15px !default;
$field-list-member-filter-list-height: 150px !default;
$field-list-member-filter-list-bigger-height: 121px !default;
$pivot-formula-border: $grey-white !default;
$pivot-text-area-background: $grey-light-font !default;
$pivot-calculated-header-opacity: 1 !default;
$pivot-dialog-font-weight: bold !default;
$field-list-bigger-header-content-line-height: 1.6em !default;
$field-list-header-icon-wrapper-padding: 4px !default;
$field-list-bigger-header-icon-wrapper-padding: 7px !default;
$field-list-static-header-icon-wrapper-padding: 4px !default;
$field-list-static-bigger-header-icon-wrapper-padding: 7px !default;
$field-list-default-header-font-color: $grey-light-font !default;
$field-list-tree-icon-color: $field-list-default-header-font-color !default;
$field-list-default-header-icon-font-color: $grey !default;
$field-list-button-hover-color: $grey-f9 !default;
$field-list-button-focus-color: $grey-e6 !default;
$field-list-treeview-font-weight: bold !default;
$error-font-color: #a94442 !default;
$format-label-font-opacity: 1 !default;
$format-label-font-color: $grey-light-font !default;
$format-label-font-weight: 600 !default;
$format-preview-bigger-height: 32px !default;
$format-preview-border-color: $grey-e6 !default;
$format-outer-border-color: $grey-8c !default;
$format-outer-fill-color: $grey-base !default;
$format-outer-border-radius: 0 !default;
$format-dialog-width: 625px !default;
$field-list-excel-member-filter-height: 143px !default;
$field-list-excel-member-filter-node-limit-height: 140px !default;
$field-list-excel-filter-height: 234px !default;
$field-list-excel-member-filter-bigger-height: 102px !default;
$field-list-excel-filter-bigger-height: 213px !default;
$field-list-bigger-excel-dialog-min-width: 350px !default;
$format-label-font-size: 13px !default;
$format-label-bigger-font-size: 14px !default;
$format-preview-height: 28px !default;
$format-device-preview-height: 26px !default;
$format-bigger-preview-height: 36px !default;
$olap-tree-wrapper-height: 467px;
$olap-tree-outer-div-height: 437px;
$olap-bigger-tree-wrapper-height: 511px;
$olap-bigger-tree-outer-div-height: 475px;
$field-list-text-transform: none !default;
$olap-bigger-tree-width: 283px !default;
$olap-bigger-tree-outer-div-width: 325px !default;
$field-list-adaptive-drag-prompt-line-height: 200px !default;
$field-list-dialog-text-font-size: 13px !default;

$field-list-font-size-14: 14px !default;
$field-list-font-size-18: 18px !default;

$field-list-font-icon-10: 10px !default;
$field-list-font-icon-12: 12px !default;
$field-list-font-icon-13: 13px !default;
$field-list-font-icon-14: 14px !default;
$field-list-font-icon-16: 16px !default;
$field-list-font-icon-18: 18px !default;
$field-list-font-icon-20: 20px !default;

$field-list-font-weight-normal: 400 !default;
$field-list-font-weight-medium: 500 !default;
$field-list-font-weight-semibold: 600 !default;
$field-list-font-weight-bold: 700 !default;

$field-list-spacing--2: -2px !default;
$field-list-spacing-0: 0 !default;
$field-list-spacing-1: 1px !default;
$field-list-spacing-2: 2px !default;
$field-list-spacing-3: 3px !default;
$field-list-spacing-4: 4px !default;
$field-list-spacing-5: 5px !default;
$field-list-spacing-6: 6px !default;
$field-list-spacing-7: 7px !default;
$field-list-spacing-8: 8px !default;
$field-list-spacing-9: 9px !default;
$field-list-spacing-10: 10px !default;
$field-list-spacing-12: 12px !default;
$field-list-spacing-13: 13px !default;
$field-list-spacing-14: 14px !default;
$field-list-spacing-15: 15px !default;
$field-list-spacing-16: 16px !default;
$field-list-spacing-18: 18px !default;
$field-list-spacing-20: 20px !default;
$field-list-spacing-24: 24px !default;
$field-list-spacing-25: 25px !default;
$field-list-spacing-30: 30px !default;
$field-list-spacing-32: 32px !default;
$field-list-spacing-auto: auto !default;
$field-list-padding-unset: unset !default;
$field-list-spacing-10p: 10% !default;

$field-list-border-none: none !default;
$field-list-border-0: 0 !default;
$field-list-border-1: 1px !default;
$field-list-border-2: 2px !default;

$field-list-radius-0: 0 !default;
$field-list-radius-4: 4px !default;

$field-list-line-height-14: 14px !default;
$field-list-line-height-16: 16px !default;
$field-list-line-height-20: 20px !default;
$field-list-line-height-24: 24px !default;
$field-list-line-height-100p: 100% !default;
$field-list-line-height-normal: normal !default;
$field-list-line-height-0em: 0 !default;

$field-list-height-16: 16px !default;
$field-list-height-20: 20px !default;
$field-list-height-24: 24px !default;
$field-list-height-25: 25px !default;
$field-list-height-30: 30px !default;
$field-list-height-40: 40px !default;
$field-list-height-48: 48px !default;
$field-list-height-70: 70px !default;
$field-list-height-100: 100px !default;
$field-list-height-120: 120px !default;
$field-list-height-170: 170px !default;
$field-list-height-165: 165px !default;
$field-list-height-200: 200px !default;
$field-list-height-210: 210px !default;
$field-list-height-250: 250px !default;
$field-list-height-270: 270px !default;
$field-list-height-290: 290px !default;
$field-list-height-310: 310px !default;
$field-list-height-342: 342px !default;
$field-list-height-369: 369px !default;
$field-list-height-387: 387px !default;
$field-list-height-392: 392px !default;
$field-list-height-440: 440px !default;
$field-list-height-450: 450px !default;
$field-list-height-480: 480px !default;
$field-list-height-500: 500px !default;
$field-list-height-550: 550px !default;
$field-list-height-575: 575px !default;
$field-list-height-600: 600px !default;
$field-list-height-660: 660px !default;
$field-list-height-700: 700px !default;
$field-list-height-735: 735px !default;
$field-list-height-750: 750px !default;
$field-list-height-800: 800px !default;
$field-list-height-40p: 40% !default;
$field-list-height-100p: 100% !default;
$field-list-height-auto: auto !default;

$field-list-width-14: 14px !default;
$field-list-width-20: 20px !default;
$field-list-width-24: 24px !default;
$field-list-width-28: 28px !default;
$field-list-width-30: 30px !default;
$field-list-width-80: 80px !default;
$field-list-width-100: 100px !default;
$field-list-width-145: 145px !default;
$field-list-width-150: 150px !default;
$field-list-width-265: 265px !default;
$field-list-width-290: 290px !default;
$field-list-width-300: 300px !default;
$field-list-width-320: 320px !default;
$field-list-width-350: 350px !default;
$field-list-width-370: 370px !default;
$field-list-width-375: 375px !default;
$field-list-width-400: 400px !default;
$field-list-width-401: 401px !default;
$field-list-width-575: 575px !default;
$field-list-width-579: 579px !default;
$field-list-width-580: 580px !default;
$field-list-width-627: 627px !default;
$field-list-width-700: 700px !default;
$field-list-width-auto: auto !default;
$field-list-width-20p: 20% !default;
$field-list-width-25p: 25% !default;
$field-list-width-30p: 30% !default;
$field-list-width-40p: 40% !default;
$field-list-width-45p: 45% !default;
$field-list-width-50p: 50% !default;
$field-list-width-53p: 53% !default;
$field-list-width-60p: 60% !default;
$field-list-width-70p: 70% !default;
$field-list-width-74p: 74% !default;
$field-list-width-90p: 90% !default;
$field-list-width-100p: 100% !default;
$field-list-width-150p: 150% !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;
    }

    &.sf-pivotfieldlist {
      position: relative;

      &:not(.e-device) {
        height: $field-list-height-100p;
      }
    }
  }

  .e-pivot-formatting-dialog {
    /* stylelint-disable */
    height: auto !important;
    max-height: $field-list-height-480 !important;
    max-width: $field-list-width-627 !important;
    width: $field-list-width-100p;
    min-width: $field-list-width-375 !important;
    /* stylelint-enable */

    .e-format-table {
      width: $field-list-width-100p;

      tr:nth-child(odd) {
        td {
          padding-bottom: $field-list-spacing-4;
        }
      }
    }

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

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

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

        .e-format-input-value-row {
          display: table-row;

          .e-format-input-value-cell {
            display: table-cell;
          }
        }
      }
    }

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

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

    .e-format-value-span {
      display: table-cell;
      padding-right: $field-list-spacing-10;
      vertical-align: bottom;
    }

    .e-format-value1,
    .e-format-value2 {
      display: inline-block;
      margin-right: $field-list-spacing-10;
      margin-bottom: $field-list-spacing-0;
      width: $field-list-width-45p;
    }

    .e-colorpicker-wrapper.e-format-font-color-picker {
      margin-left: $field-list-spacing-0;
      margin-right: $field-list-spacing-16;
    }

    .e-format-inner-div {
      padding-left: $field-list-spacing-14;
      padding-top: $field-list-spacing-14;
      max-width: $field-list-width-579;

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

    .e-format-outer-div {
      background-color: $format-outer-fill-color;
      border: $field-list-border-1 solid $format-outer-border-color;
      border-radius: $format-outer-border-radius;
      margin-bottom: $field-list-spacing-14;
      @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: $field-list-spacing-12;
      padding-top: $field-list-spacing-12;

      @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: $field-list-font-weight-semibold;
        @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: $field-list-border-1 solid $format-preview-border-color;
      border-radius: $field-list-default-border-radius;
      pointer-events: none;
      margin: $field-list-spacing-0;
      @if ($skin-name =='bootstrap4') or ($skin-name =='bootstrap5') or ($skin-name =='bootstrap') or ($skin-name =='FluentUI') or ($skin-name =='tailwind') {
        padding: $field-list-spacing-0;
      }
      /* stylelint-disable */
      width: $field-list-width-80;
      /* stylelint-enable */
      text-align: center;
    }

    .e-format-color-picker {
      .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: $field-list-spacing-0 $field-list-spacing-2;
          width: $field-list-width-14;
          @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: $field-list-spacing-4 $field-list-spacing-5;
      }
    }

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

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

      .e-format-delete-button {
        font-size: $field-list-font-icon-12;
        padding-right: $field-list-spacing-16;
        padding-top: $field-list-spacing-16;
      }

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

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

      .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: $field-list-width-100p;
      }
    }

    &.e-rtl {
      .e-colorpicker-wrapper.e-format-font-color-picker {
        margin-left: $field-list-spacing-16;
        margin-right: $field-list-spacing-0;
      }

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

        .e-add-icon {
          margin-left: $field-list-spacing-auto;
        }
      }

      .e-format-inner-div {
        padding-left: $field-list-spacing-0;
        padding-right: $field-list-spacing-14;
      }

      .e-format-delete-button {
        float: left;
        padding-left: $field-list-spacing-12;
      }

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

      &.e-device {
        .e-format-font-color-picker {
          margin-right: $field-list-spacing-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: $field-list-spacing-6;
      }
      @if ($skin-name == 'Material3') {
        padding: $field-list-spacing-0;
      }
    }
  }

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

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

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

      .e-pivot-calc-custom-format-div {
        margin-top: $field-list-spacing-15;
      }
    }

    .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: $field-list-spacing-4;
      margin-top: $field-list-spacing-12;
      overflow: hidden;
      padding: $pivot-calculated-header-padding $field-list-spacing-0;
      padding-bottom: $field-list-spacing-0;
      text-overflow: ellipsis;
      white-space: nowrap;
      @if ($skin-name == 'bootstrap5') {
        padding-bottom: $field-list-spacing-4;
      }
      @if ($skin-name == 'tailwind') {
        padding: $field-list-spacing-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: $field-list-spacing-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: $field-list-spacing-0 $field-list-spacing-12 $field-list-spacing-0 $field-list-spacing-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: $field-list-height-auto;
        padding-left: $field-list-spacing-0;
        padding-right: $field-list-spacing-0;
        vertical-align: middle;
      }
    }

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

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

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

    .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: $field-list-spacing-4;
        pointer-events: auto;
        width: $field-list-width-20;

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

    .e-dlg-header {
      font-size: $field-list-font-size-18;
      font-weight: $field-list-font-weight-medium;
      opacity: $pivot-calculated-header-opacity;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: $field-list-width-74p;
    }

    .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: $field-list-font-icon-14;
      height: $field-list-height-48;
      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 $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0;
      }

      .e-treeview ul {
        margin-right: $field-list-spacing-0;

        li {
          margin-left: $field-list-spacing-0;

          .e-text-content {
            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: $field-list-font-weight-semibold !important;
    }
    /* stylelint-enable */

    .e-pivot-formula {
      background-color: $pivot-formula-background;
      border: $field-list-border-1 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: $field-list-height-70;
      // opacity: .38;
      padding: $pivot-calculated-formula-font-padding;
      resize: none;
      width: $field-list-width-100p;

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

    .e-list-parent .e-list-text {
      min-width: $field-list-width-100;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: $field-list-width-100p;
    }

    .e-pivot-treeview-outer {
      background-color: $pivot-formula-background;
      border: $field-list-border-1 solid $pivot-formula-border;
      border-radius: $field-list-default-border-radius;
      height: $field-list-height-120;
      overflow: auto;

      @if ($skin-name == 'fluent2' or $skin-name =='tailwind3') {
        .e-pivot-treeview-outer-div{
          .e-pivot-treeview{
            border: $field-list-border-none;
          }
        }
      }
    }

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

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

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

          .e-pivot-treeview-outer {
            height: $field-list-height-100p;
            margin-top: $field-list-spacing-0;
            overflow: hidden;

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

            .e-treeview {
              display: inline-table;
              height: $field-list-height-100p;
              width: $field-list-width-100p;
              min-width: $field-list-width-265;

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

              ul {
                .e-list-text {
                  margin-bottom: $field-list-spacing-0; 
                  overflow: unset;
                  width: $field-list-width-100p;
                }

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

                .e-list-item .e-text-content {
                  margin: $field-list-spacing-0;
                  padding: $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-24;
                }

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

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

                  &.e-edit,
                  &.e-edited {
                    cursor: pointer;
                    padding: $field-list-spacing-7 !important;
                  }
                }

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

                li {
                  &.e-draggable{
                    .e-fullrow {
                      cursor: move;
                    }
                  }

                  margin-left: $field-list-spacing-0;
                  margin-right: $field-list-spacing-0;
                }
              }

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

                  .e-list-item .e-text-content {
                    padding: $field-list-spacing-0 $field-list-spacing-24 $field-list-spacing-0 $field-list-spacing-0;
                  }

                  li {
                    margin-left: $field-list-spacing-0;
                    margin-right: $field-list-spacing-0;
                  }
                }
              }
            }

            .e-treeview ul:first-child {
              padding-left: $field-list-spacing-10;
              padding-right: $field-list-spacing-10;
            }

            .e-pivot-all-field-title {
              color: $field-list-default-header-font-color;
              flex: auto;
              margin-top: $field-list-spacing-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: $field-list-spacing-7 !important;

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

        .e-pivot-calculated-div {
          flex: auto;
          margin-left: $field-list-spacing-18;

          .e-pivot-formula {
            height: $field-list-height-100;
          }

          .e-pivot-calc-custom-format-div {
            margin-top: $field-list-spacing-15;
          }

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

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

      &.e-dialog {
        max-height: $field-list-height-700 !important;

        .e-calc-clear-btn {
          float: left;
          margin: $field-list-spacing-0;
        }
      }

      &.e-rtl {
        .e-pivot-calc-outer-div {
           .e-pivot-calculated-div {
            margin-left: $field-list-spacing-0;
            margin-right: $field-list-spacing-18;
          }
        }

        &.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: $field-list-width-400 !important;
      min-width: $field-list-width-320 !important;
      &.e-node-limit {
        max-height: $field-list-height-450 !important;
      }
      /* stylelint-enable */

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

      .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: $field-list-spacing-5 $field-list-editor-search-padding-size $field-list-spacing-10;
          }
        }
      }

      .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: $field-list-border-none;
          }
        }
      }

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

      .e-member-editor-container {
        display: inline-table;
        width: $field-list-width-100p;

        @if ($skin-name == 'fluent2' or $skin-name =='tailwind3'){
          border: $field-list-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: $field-list-spacing-13;
            }
            @if ($skin-name == 'tailwind') {
              padding-left: $field-list-spacing-5;
            }
          }

          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;
        /* stylelint-enable */

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

          .e-list-icon {
            margin: $field-list-spacing-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: $field-list-spacing-7;
              }
              @if ($skin-name == 'FluentUI') {
                padding-right: $field-list-spacing-13;
              }
              @if ($skin-name == 'tailwind') {
                padding-right: $field-list-spacing-5;
              }
            }

            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-right: $field-list-member-filter-list-padding-size;
            margin-left: $field-list-spacing-0;
          }
        }
      }

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

          .e-treeview ul:first-child {
            padding-left: $field-list-spacing-10;
            padding-right: $field-list-spacing-10;
          }

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

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

        &.e-rtl {
          .e-member-editor-outer-container {
            ul {
              margin-right: $field-list-spacing-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: $field-list-spacing-0 !important;
        /* stylelint-enable */
        @if ($skin-name == 'FluentUI') {
          margin-left: $field-list-spacing-0;
          margin-right: $field-list-spacing-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: $field-list-height-40;
        justify-content: center;
        opacity: $field-list-editor-label-excel-opacity;
        @if ($skin-name == 'Material3') {
          border-top: $field-list-separator-border;
        }

        &.e-label-container-visible {
          display: block;
        }

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

        .e-editor-label {
          color: $field-list-editor-label-color;
          font: $field-list-editor-label-font;
          margin-bottom: $field-list-spacing-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: $field-list-border-1 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: $field-list-font-icon-16;
          }

          &: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: $field-list-spacing-0;
          }
        }
      }

      .e-filter-tab-container {
        border: $field-list-border-0;

        .e-tab-header {
          .e-toolbar-item .e-icon-left + .e-tab-text {
            margin: $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-6;
          }

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

              &::before {
                font-size: $field-list-font-icon-14;
                /* stylelint-disable */
                top: 0 !important;
                /* stylelint-enable */
              }
            }
          }
        }

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

      .e-excelfilter {
        padding-top: $field-list-spacing-20;

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

        @if ($skin-name == 'tailwind3') {
          padding-top: $field-list-spacing-16;
        }
        /* 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: $field-list-spacing-20;
        padding-bottom: $field-list-spacing-0;

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

        .e-filter-option-container-1,
        .e-filter-option-container-2,
        .e-separator-div {
          padding-top: $field-list-spacing-20;
        }

        .e-between-text-div {
          padding: $field-list-spacing-8 $field-list-spacing-0;
        }

        .e-disable {
          display: none;
        }

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

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

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

              .e-member-sort {
                &:first-of-type {
                  @if ($skin-name == 'Material3') {
                    border-top-left-radius: $field-list-radius-0;
                    border-bottom-left-radius: $field-list-radius-0;
                  }
                }
                &:last-of-type {
                  @if ($skin-name == 'Material3') {
                    border-top-right-radius: $field-list-radius-0;
                    border-bottom-right-radius: $field-list-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: $field-list-spacing-0;
          }

          .e-editor-search-container {
            .e-level-drop {
              margin: $field-list-spacing-0 $field-list-spacing-5;

              .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: $field-list-spacing-0;
                margin-right: $field-list-sort-wrapper-padding-size;
              }
            }
          }
        }
      }

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

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

    .e-adaptive-field-list-dialog {
      ul:first-child {
        min-height: $field-list-height-170;
        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: $field-list-spacing-10;
          }
        }
      }

      &.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: $field-list-spacing-0;
                margin-right: $field-list-spacing-10;
              }
            }
          }
        }
      }
    }

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

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

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

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

            .e-field-name-title,
            .e-field-name-content {
              font-size: $field-list-font-size-14;
              font-weight: $field-list-font-weight-medium;
            }

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

            .e-field-name-content {
              flex: auto;
              width: $field-list-width-100p;
            }
          }

          .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: $field-list-font-weight-medium;
              width: $field-list-width-100p;

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

            .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: $field-list-border-0;
        font-weight: $field-list-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: $field-list-radius-0;
        border-top-right-radius: $field-list-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: $field-list-border-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: $field-list-spacing-0 !important;
        @if ($skin-name == 'Material3') {
          border-radius: $field-list-radius-0;
        }

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

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

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

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

        .e-empty-field:-ms-input-placeholder {
          color: $error-font-color !important;
          font-weight: $field-list-font-weight-semibold !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: $field-list-width-100;
    padding: $field-list-spacing-5 $field-list-spacing-10;
    @if ($field-list-skin == 'bootstrap4') {
      border: $field-list-spacing-0;
      padding: $field-list-spacing-6 $field-list-spacing-10;
    }
    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
      line-height: $field-list-line-height-normal;
      padding: $field-list-spacing-0 $field-list-spacing-10;
    }

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

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

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

    &.e-rtl {
      .e-text-content {
        padding-right: $field-list-spacing-0;
      }
    }

    &.e-drag-restrict {
      .e-text-content {
        padding-left: $field-list-spacing-24;

        .e-list-text {
          padding: $field-list-spacing-0;
        }
      }

      /* stylelint-disable */
      .e-no-drop {
        display: inline-block !important;
        line-height: $field-list-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: $field-list-spacing-5 $field-list-spacing-0;
        }
      }
      /* stylelint-enable */

      &.e-rtl {
        .e-text-content {
          padding-left: $field-list-spacing-0;
          padding-right: $field-list-spacing-24;

          .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: $field-list-width-100;
    overflow: hidden;
    padding: $field-list-spacing-5 $field-list-spacing-10;
    text-align: center;
    width: $field-list-width-auto;
    z-index: 100000;
    @if ($field-list-skin == 'bootstrap4') {
      border: $field-list-border-0;
      padding: $field-list-spacing-6 $field-list-spacing-10;
    }
    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
      line-height: $field-list-line-height-normal;
      padding: $field-list-spacing-0 $field-list-spacing-10;
    }

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

  .e-pivot-error-dialog {
    max-width: $field-list-width-400 !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: $field-list-border-1 $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: $field-list-radius-4;
        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: $field-list-spacing-8 $field-list-spacing-5;
    }
  }

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

    &.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: $field-list-spacing-0;
          }

          li {

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

            &.e-rtl {
              ul:first-child {
                padding-left: $field-list-spacing-0;
                padding-right: $field-list-spacing-10;
              }
            }
          }
        }

        li {
          .e-drag {
            padding: revert !important;
            margin: revert !important;
            width: $field-list-width-auto !important;
            height: $field-list-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: $field-list-width-100p;
            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: $field-list-spacing-10 $field-list-spacing-2 $field-list-spacing-2;

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

        .e-defer-apply-button {
          margin-right: $field-list-spacing-10;
        }

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

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

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

      .e-checkbox-layout {
        max-width: $field-list-width-45p;
        overflow: visible;
      }
    }

    .e-checkbox-layout {
      float: left;
      margin-top: $field-list-spacing-6;

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

    &.e-rtl {
      .e-layout-footer {
        .e-defer-apply-button {
          margin-left: $field-list-spacing-10;
        }
      }

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

    &.e-dialog {
      max-height: $field-list-height-550 !important;

      .e-layout-footer {
        padding: $field-list-spacing-0;
      }

      .e-checkbox-layout {
        margin-left: $field-list-spacing-10;
      }

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

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

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

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

    .e-dlg-header-content {
      @if ($skin-name =='bootstrap5') {
        border-bottom: $field-list-border-1 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: $field-list-border-1 solid $field-list-border;
      }
    }

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

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

    .e-title-header {
      display: flex;
      padding: $field-list-spacing-2;
      width: $field-list-width-100p;

      @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: $field-list-height-342;
      padding: $field-list-spacing-1;
      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: $field-list-width-30p;

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

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

        .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: $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0 $field-list-sort-icon-to-icon-padding;

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

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

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

        .e-field-list {
          display: inline-table;
          height: $field-list-height-100p;
          padding-left: $field-list-spacing-2;
          width: $field-list-width-100p;

          @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: $field-list-spacing-10;
                }

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

              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: $field-list-height-20;
                margin-bottom: $field-list-treeview-drag-margin;
                margin-right: $field-list-spacing-6;
                pointer-events: all;
                text-align: center;
                vertical-align: bottom;
                width: $field-list-width-20;

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

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

                @if ($skin-name =='tailwind3') {
                  margin-right: $field-list-spacing-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: $field-list-spacing-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: $field-list-spacing-10;
              }

              /* 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: $field-list-height-auto;
                width: $field-list-width-auto;

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

            &.e-treeview ul:first-child {
              padding-left: $field-list-spacing-10;
              padding-right: $field-list-spacing-10;
            }

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

        &.e-olap-field-table {
          width: $field-list-width-40p;
        }
      }

      .e-axis-table {
        display: flex;
        overflow: hidden;
        width: $field-list-width-70p;

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

        .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: $field-list-font-weight-normal;
          min-height: $field-list-height-165;
          position: relative;
          width: $field-list-width-100p;

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

          .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: $field-list-spacing-0 $field-list-header-padding $field-list-spacing-0;

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

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

              .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: $field-list-spacing-0 $field-list-spacing-8;
            text-overflow: ellipsis;
            text-transform: $field-list-text-transform;
            white-space: nowrap;
            width: $field-list-width-100p;

            @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: $field-list-width-100p;

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

            .e-pvt-btn-div {

              .e-drop-indicator-last,
              .e-drop-indicator {
                display: block;
                pointer-events: none;
                width: $field-list-width-100p;

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

                  @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') {
                    border-top: $field-list-border-2 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: $field-list-border-0;
                border-radius: $field-list-border-0;
                border-right: $field-list-border-0;
                border-top: $field-list-border-0;
                box-shadow: none;
                cursor: default;
                display: flex;
                font-weight: $field-list-font-weight-normal;
                height: $field-list-button-height;
                line-height: $field-list-line-height-100p;
                padding: $field-list-button-padding;
                text-transform: none;
                width: $field-list-width-100p;

                @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: $field-list-border-1 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: $field-list-height-16;
                  overflow: hidden;
                  padding: $field-list-spacing-0 $field-list-spacing-8;
                  text-align: left;
                  text-overflow: ellipsis;
                  width: $field-list-width-70p;

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

                .e-draggable {
                  height: $field-list-height-20;
                  width: $field-list-width-20;
                }

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

                  @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: $field-list-height-20;
                  padding-left: $field-list-icon-to-icon-padding;
                  width: $field-list-width-20;

                  &: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: $field-list-spacing-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: $field-list-height-25;
            pointer-events: none;
            position: absolute;
            text-align: center;
            width: $field-list-width-100p;

            &.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: $field-list-width-60p;
        }
      }
    }

    &.e-search-mode {
      &.e-static {
        max-height: $field-list-height-750;

        .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: $field-list-height-369;

          @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: $field-list-height-392;

            .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: $field-list-width-100p;

        &.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: $field-list-border-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;
      min-width: $field-list-width-145;

      @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: $field-list-spacing-0;
          padding-right: $field-list-spacing-2;

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

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

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

              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: $field-list-spacing-6 !important;
              margin-right: $field-list-spacing-0 !important;

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

            .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: $field-list-spacing-0;
              margin-right: $field-list-spacing-10;
            }

            /* stylelint-enable */
          }
        }

        .e-field-header {
          padding-left: $field-list-spacing-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: $field-list-spacing-0;

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

      .e-axis-table {

        .e-left-axis-fields,
        .e-right-axis-fields {
          padding-left: $field-list-spacing-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: $field-list-height-700;
      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: $field-list-height-100p;
        width: $field-list-width-100p;

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

          .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: $field-list-height-25;
          margin-top: $field-list-spacing-5;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
        }

        .e-axis-table {
          width: $field-list-width-100p;

          .e-left-axis-fields {
            padding: $field-list-spacing-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: $field-list-spacing-0;
          }
        }
      }

      .e-layout-footer {
        .e-checkbox-layout {
          align-items: center;
          display: flex;
          margin-top: $field-list-spacing-0;
          overflow: hidden;
          width: $field-list-width-100p;

          .e-checkbox-wrapper {
            width: $field-list-width-100p;

            label {
              width: $field-list-width-100p;

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

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

    &.e-device {
      height: $field-list-height-100p;
      /* stylelint-disable */
      max-height: $field-list-height-100p !important;
      max-width: $field-list-width-100p !important;
      /* stylelint-enable */
      min-height: $field-list-height-500;
      width: $field-list-width-100p;

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

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

      .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: $field-list-height-210;
          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: $field-list-font-icon-16;
        height: auto;
        margin-left: $field-list-spacing-0;
        margin-right: $field-list-spacing-12;
        text-align: center;
        width: $field-list-width-24;
      }

      .e-disable {
        display: none;
      }

      .e-adaptive-container {
        height: $field-list-height-100p;
        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: $field-list-height-100p;
            min-height: $field-list-height-250;
            padding-top: $field-list-adaptive-content-padding-size;
            position: relative;
            width: $field-list-width-100p;

            .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: $field-list-border-0;
                border-radius: $field-list-radius-0;
                border-right: $field-list-border-0;
                border-top: $field-list-border-0;
                border-width: $field-list-border-1 $field-list-border-0;
                box-shadow: none;
                display: flex;
                font-size: $field-list-bigger-button-font-size;
                font-weight: $field-list-font-weight-normal;
                height: $field-list-adaptive-pivot-button-height;
                line-height: $field-list-line-height-normal;
                padding: $field-list-adaptive-pivot-button-padding;
                text-transform: none;
                width: $field-list-width-100p;

                @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: $field-list-width-70p;
                }

                .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: $field-list-spacing-10;
                  width: $field-list-width-24;
                  font-size: $field-list-font-icon-14 !important;

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

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

                  &: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: $field-list-spacing-0;
                    padding-right: $field-list-spacing-10;

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

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

            .e-axis-content {
              height: $field-list-height-100p;
              width: $field-list-width-100p;
            }

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

              @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: $field-list-border-1 solid $pivot-formula-border;
              border-radius: $field-list-default-border-radius;
              color: $field-list-default-formula-font-color;
              height: $field-list-height-200;
              margin-left: $field-list-spacing-20;
              margin-right: $field-list-spacing-20;
              margin-top: $field-list-spacing-25;
              padding: $field-list-spacing-2 $field-list-spacing-3;
              resize: none;
              width: $field-list-width-90p;
            }

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

            /* stylelint-enable */
            .e-accordion {
              margin-top: $field-list-spacing-20;
              overflow: auto;

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

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

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

                    &.e-remove-report.e-icons {
                      padding-left: $field-list-spacing-10;
                    }
                  }
                }
              }

              .e-icons.e-frame {
                margin-right: $field-list-spacing-12;
              }

              .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: $field-list-spacing-12 !important;
                  margin-right: $field-list-spacing-0 !important;
                }
                /* stylelint-enable */
              }
            }

            .e-radio-wrapper {
              margin-bottom: $field-list-spacing-24;
              margin-right: $field-list-spacing-20;

              .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($field-list-spacing-10p - $field-list-width-20);
              margin-top: $field-list-spacing-32;
            }

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

            .e-pivot-accord {
              max-height: $field-list-height-290;
              overflow: auto;

              ul {

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

                .e-calcfieldmember .e-list-text {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: $field-list-width-53p;
                }

                .e-list-header-icon {
                  display: table;
                  height: $field-list-height-30;
                  min-height: $field-list-height-30;
                  min-width: $field-list-width-24;
                  padding: $field-list-spacing-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: $field-list-spacing-5;
                    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: $field-list-height-575;
              overflow: hidden;
              overflow-y: auto;
            }
          }
        }

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

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

            .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: $field-list-width-100p;

        .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: $field-list-width-20p;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .e-checkbox-layout {
          max-width: $field-list-width-45p;
        }
      }

      &.e-static {
        border: $field-list-border-0;
        padding: $field-list-spacing-0;

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

      &.e-rtl {
        .e-field-list-back-icon {
          margin-left: $field-list-spacing-12;
          margin-right: $field-list-spacing-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: $field-list-spacing-20;
          }
        }
        /* stylelint-enable */
      }
    }
  }
}

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

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

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

    .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: '\e35c';
    }

    .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: '\e35f';
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .e-pv-filtered::before {
      color: $field-list-active-color;
      content: '\ebb2';
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@include export-module('field-list-bigger') {

  .e-bigger.e-pivot-formatting-dialog,
  .e-bigger .e-pivot-formatting-dialog {

    .e-format-label,
    .e-format-value-label {
      font-size: $format-label-bigger-font-size;
    }

    .e-colorpicker-wrapper.e-format-font-color-picker {
      margin-right: $field-list-spacing-20;
      margin-left: $field-list-spacing-0;
    }

    .e-split-preview {
      @if ($skin-name =='tailwind3') {
        width: 120%;
      }

      @if ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
        /* stylelint-disable */
        left: -6px !important;
        /* stylelint-enable */
      }
    }

    .e-format-value-preview {
      margin: $field-list-spacing-0;
      @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') or ($skin-name =='fabric') or ($skin-name =='bootstrap4') {
        padding: $field-list-spacing-0;
      }

      @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') {
        min-height: 39px;
      }
    }

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

    &.e-device {
      /* stylelint-disable */
      width: 100% !important;
      /* stylelint-enable */

      .e-format-value-preview {
        min-height: $format-bigger-preview-height;
      }
    }

    &.e-rtl {
      .e-colorpicker-wrapper.e-format-font-color-picker {
        margin-left: $field-list-spacing-20;
        margin-right: $field-list-spacing-0;
      }
    }
  }

  .e-bigger.e-pivot-calc-dialog-div,
  .e-bigger .e-pivot-calc-dialog-div {
    /* stylelint-disable */
    max-height: $field-list-height-660 !important;
    min-width: $field-list-width-401 !important;
    /* stylelint-enable */

    .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 {
      font-size: $field-list-bigger-header-font-size;
      padding: $pivot-calculated-bigger-header-padding 0;
      padding-bottom: $field-list-spacing-0;

      @if ($skin-name =='FluentUI') {
        font-weight: $field-list-font-weight-semibold;
        margin-top: $field-list-spacing-16;
      }

      @if ($skin-name =='bootstrap5') or ($skin-name =='tailwind') {
        padding-bottom: $field-list-spacing-4;
        padding-top: $field-list-spacing-16;
      }
    }

    .e-treeview ul {
      li {
        padding: $field-list-spacing-2 $field-list-spacing-0;
      }
    }

    .e-treeview {
      .e-list-item {
        div.e-icons {
          font-size: $field-list-bigger-icon-size;

          @if ($skin-name =='FluentUI') {
            padding-top: $field-list-spacing-12;
          }
        }

        .e-remove-report,
        .e-edit,
        .e-edited {
          /* stylelint-disable */
          margin: $field-list-spacing-0 $field-list-spacing-12 $field-list-spacing-0 $field-list-spacing-0 !important;

          @if ($skin-name =='FluentUI') or ($skin-name =='bootstrap5') {
            font-size: $field-list-bigger-header-icon-size !important;
          }

          /* stylelint-enable */
        }

        span.e-icons {
          font-size: $field-list-bigger-icon-size;

          @if ($skin-name =='FluentUI') or ($skin-name =='bootstrap5') {
            position: relative;
            top: 3px;
          }

          @if ($skin-name =='fluent2') {
            font-size: $field-list-font-icon-20;
          }

          @if ($skin-name =='tailwind') {
            position: relative;
            top: 1px;
          }
        }
      }

      ul {
        li .e-list-icon {

          &.e-edit,
          &.e-edited,
          &.e-remove-report {

            @if ($skin-name =='FluentUI') {
              padding-top: $field-list-spacing-0;
            }

            @if ($skin-name =='bootstrap5') {
              padding-top: $field-list-spacing-3;
            }

            @if ($skin-name =='tailwind') {
              padding-top: $field-list-spacing-4;
            }
          }
        }
      }
    }

    .e-pivot-formula {
      font-size: $field-list-calc-bigger-formula-font-size;
    }

    .e-footer-content {
      @if ($skin-name !='tailwind3') {
        padding-top: $pivot-dialog-footer-padding;
      }
    }

    &.e-olap-calc-dialog-div {
      /* stylelint-disable */
      max-height: $field-list-height-750 !important;
      min-width: $field-list-width-580 !important;
      /* stylelint-enable */

      .e-pivot-calc-outer-div {
        .e-olap-field-tree-div {
          height: $olap-bigger-tree-wrapper-height;
          width: $olap-bigger-tree-width;

          .e-pivot-treeview-outer {
            .e-pivot-treeview-outer-div {
              height: $olap-bigger-tree-outer-div-height;
              width: $olap-bigger-tree-outer-div-width;
            }

            .e-pivot-all-field-title {
              padding-bottom: $pivot-calculated-bigger-header-padding;
            }

            .e-pivot-all-field-title-container {
              font-size: $field-list-bigger-header-font-size;

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

            .e-treeview ul {
              .e-list-icon {
                font-size: $field-list-bigger-icon-size;
              }
            }
          }
        }

        .e-pivot-calculated-div {
          margin-left: $field-list-spacing-24;
        }
      }

      &.e-rtl {
        .e-pivot-calc-outer-div {
          .e-pivot-calculated-div {
            margin-left: $field-list-spacing-0;
            margin-right: $field-list-spacing-24;
          }
        }
      }
    }
  }

  .e-bigger .e-field-list-tree.e-drag-item.e-treeview,
  .e-bigger .e-pivot-calc.e-drag-item.e-treeview,
  .e-bigger.e-field-list-tree.e-drag-item.e-treeview,
  .e-bigger.e-pivot-calc.e-drag-item.e-treeview {
    height: $field-list-bigger-button-height;
    padding: $field-list-spacing-6 $field-list-spacing-12;

    @if ($field-list-skin =='bootstrap4') {
      padding: $field-list-spacing-9 $field-list-spacing-10;
    }

    &.e-drag-restrict {
      .e-no-drop {
        &::before {
          padding: $field-list-spacing-4;
        }
      }
    }
  }

  .e-bigger .e-button-drag-clone,
  .e-bigger.e-button-drag-clone {
    height: $field-list-bigger-button-height;
    line-height: $field-list-line-height-24;
    padding: $field-list-spacing-6 $field-list-spacing-12;

    @if ($field-list-skin =='bootstrap4') {
      border: $field-list-border-0;
      padding: $field-list-spacing-7 $field-list-spacing-12;
    }

    @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
      line-height: normal;
      padding: $field-list-spacing-0 $field-list-spacing-12;
    }
  }

  .e-bigger .e-pivotfieldlist-container,
  .e-bigger.e-pivotfieldlist-container {

    /* stylelint-disable */
    .e-member-editor-dialog {
      .e-editor-search-container {

        .e-sort-ascend-icon,
        .e-sort-descend-icon {
          font-size: $field-list-font-icon-18;
        }

        .e-level-drop {
          .e-caret {
            font-size: $field-list-bigger-icon-size !important;
          }
        }
      }

      .e-member-editor-outer-container ul {
        @if ($field-list-skin =='bootstrap4') {
          margin-left: -30px;
        }

        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: $field-list-spacing-10;
          }
        }
      }

      &.e-rtl {
        .e-member-editor-outer-container ul {
          @if ($field-list-skin =='bootstrap4') {
            margin-right: -30px;
          }

          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: $field-list-spacing-10;
            }
          }
        }
      }

      .e-dlg-content .e-member-editor-outer-container:not(.e-excelfilter) .e-member-editor-container-outer-div {
        height: $field-list-member-filter-list-bigger-height;
      }
    }

    /* stylelint-enable */

    .e-member-editor-dialog {
      .e-filter-tab-container {
        .e-tab-header {
          .e-toolbar-item .e-icon-left + .e-tab-text {
            margin: $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-6;
          }
        }

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

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

      .e-excelfilter {
        @if ($skin-name =='tailwind') {
          padding-top: $field-list-spacing-16;
        }

        .e-member-editor-container-outer-div {
          height: $field-list-excel-member-filter-bigger-height !important;
        }
      }

      .e-label-filter,
      .e-value-filter {
        height: $field-list-excel-filter-bigger-height;

        .e-filter-text-div {
          font-size: $field-list-font-size-14;
        }

        .e-filter-option-container-1,
        .e-filter-option-container-2,
        .e-separator-div {
          padding-top: $field-list-spacing-24;
        }

        .e-between-text-div {
          padding: $field-list-spacing-10 $field-list-spacing-0;
        }
      }

      &.e-excel-filter {
        min-width: $field-list-bigger-excel-dialog-min-width !important;
        min-height: $field-list-member-editor-bigger-height !important;

        &.e-node-limit {
          min-height: $field-list-member-editor-node-limit-bigger-height !important;
        }
      }

      @if ($skin-name =='Material3') {
        .e-filter-tab-container {
          max-width: $field-list-width-350;
        }
      }
    }

    .e-adaptive-field-list-dialog,
    .e-member-editor-dialog,
    .e-value-field-settings {
      .e-dlg-header-content {
        .e-clear-filter-button.e-small {
          font-size: $field-list-font-icon-14;
          top: 0;
        }
      }
    }

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

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

        .e-field-name-title,
        .e-field-name-content {
          font-size: $field-list-font-size-14;
        }
      }

      .e-caption-input-container,
      .e-type-option-container,
      .e-base-field-option-container,
      .e-base-item-option-container {
        padding-top: $field-list-spacing-24;

        .e-base-field-option-text,
        .e-base-item-option-text,
        .e-type-option-text,
        .e-caption-input-text {
          font-size: $field-list-font-size-14;
        }
      }
    }
  }

  .e-bigger .e-pivotfieldlist,
  .e-bigger.e-pivotfieldlist {
    .e-select-table {
      font-size: $field-list-toggle-icon-bigger-size;
      height: $field-list-toggle-bigger-size;
      max-height: $field-list-toggle-bigger-size;
      max-width: $field-list-toggle-bigger-size;
      min-height: $field-list-toggle-bigger-size;
      min-width: $field-list-toggle-bigger-size;
    }

    .e-member-editor-dialog,
    .e-olap-editor-dialog {
      max-height: $field-list-height-440 !important;
      min-width: $field-list-width-370 !important;

      .e-member-editor-container-outer-div .e-list-parent .e-ul {
        height: $field-list-height-auto;
      }
    }
  }

  .e-bigger .e-pivotfieldlist-container,
  .e-bigger.e-pivotfieldlist-container {
    .e-field-table {

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

      .e-field-header {
        background: $field-list-header-background-color;
        color: $field-list-default-header-font-color;
        font-size: $field-list-bigger-header-font-size;
        font-weight: $field-list-font-weight-normal;
        overflow: hidden;

        @if ($field-list-skin =='bootstrap4') {
          padding-left: $field-list-spacing-16;
        }
      }

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

        .e-sort-none,
        .e-sort-ascend,
        .e-sort-descend {
          font-size: $field-list-bigger-header-icon-size;
          padding: $field-list-spacing-0 $field-list-spacing-0 $field-list-spacing-0 $field-list-bigger-sort-icon-to-icon-padding;
        }
      }

      .e-field-list {
        padding-left: $field-list-spacing-5;

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

            li.e-pivot-parent {
              @if ($skin-name =='bootstrap5') {
                padding-left: $field-list-spacing-7;
              }

              @if ($skin-name =='FluentUI') {
                padding-left: $field-list-spacing-8;
              }
            }

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

        ul {
          li {
            padding: $field-list-spacing-0;
          }
        }

        .e-drag {
          font-size: $field-list-bigger-icon-size !important;
          height: $field-list-height-24 !important;
          margin-bottom: $field-list-treeview-drag-bigger-padding !important;
          margin-right: $field-list-spacing-4 !important;
          width: $field-list-width-24 !important;

          @if ($skin-name =='fluent2') {
            font-size: $field-list-font-icon-20 !important;
            margin-bottom: $field-list-spacing-5 !important;
            margin-right: $field-list-spacing-0 !important;
          }

          @if ($skin-name =='tailwind3') {
            margin-right: $field-list-spacing-0 !important;
          }
        }

        .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: $field-list-spacing-10;
        }

        &.e-olap-field-list-tree {
          ul {
            .e-list-icon {
              font-size: $field-list-bigger-icon-size;
            }
          }
        }
      }

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

    .e-axis-table {

      .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-container {
          height: $field-list-bigger-header-height;
          padding: $field-list-spacing-0 $field-list-bigger-header-padding $field-list-spacing-0;

          .e-axis-icon-container {
            height: $field-list-bigger-header-icon-size;
            width: $field-list-width-24;

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

          .e-axis-header {
            font-size: $field-list-bigger-header-font-size;
            padding: $field-list-spacing-0 $field-list-spacing-12;
          }
        }

        .e-axis-content {
          height: $field-list-popup-axis-content-bigger-height;

          .e-pvt-btn-div {
            .e-pivot-button {
              /* stylelint-disable */
              font-size: $field-list-bigger-button-font-size;
              height: $field-list-bigger-button-height !important;
              padding: $field-list-bigger-button-padding !important;

              /* stylelint-enable */
              .e-pvt-btn-content {
                font-size: $field-list-bigger-button-font-size;
                line-height: $field-list-bigger-button-line-height;
                padding: $field-list-spacing-0 $field-list-spacing-10;
              }

              .e-draggable {
                height: $field-list-width-24;
                width: $field-list-width-24;
              }

              .e-sort,
              .e-pv-filter,
              .e-pv-filtered,
              .e-dropdown-icon,
              .e-edit {
                cursor: pointer;
                display: inline-block;
                font-size: $field-list-bigger-icon-size;
                height: $field-list-width-24;
                width: $field-list-width-24;
              }

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

              .e-drag {
                font-size: $field-list-bigger-icon-size;
                width: $field-list-width-24;

                @if ($skin-name =='fluent2') {
                  font-size: $field-list-font-icon-20;
                }
              }
            }
          }
        }

        .e-draggable-prompt {
          @if ($field-list-skin =='bootstrap4') {
            font-size: $field-list-font-icon-16;
          }
        }
      }
    }

    .e-calculated-field {
      font-size: $field-list-bigger-button-font-size;
    }

    &.e-static {
      max-height: $field-list-height-735;

      .e-field-list-container {
        .e-center-title {
          color: $field-list-default-header-font-color;
          font-size: $field-list-bigger-header-font-size;
        }

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

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

      &.e-rtl {
        .e-axis-table {
          .e-left-axis-fields {
            padding-left: $field-list-default-bigger-padding-size;
          }

          /* stylelint-disable */
          .e-right-axis-fields {
            padding: $field-list-spacing-0 !important;
          }
        }
      }

      .e-layout-footer .e-checkbox-layout .e-checkbox-wrapper label .e-label {
        width: calc($field-list-width-100p - $field-list-width-30);
      }
    }

    &.e-rtl {
      .e-field-table {
        .e-field-list {
          padding-left: $field-list-spacing-0;
          padding-right: $field-list-spacing-5;

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

              li.e-pivot-parent {
                @if ($skin-name =='bootstrap5') {
                  padding-right: $field-list-spacing-7;
                }

                @if ($skin-name =='FluentUI') {
                  padding-right: $field-list-spacing-8;
                }
              }

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

          .e-drag {
            margin-left: $field-list-spacing-4 !important;
            margin-right: $field-list-spacing-0 !important;
          }

          .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: $field-list-spacing-0;
            margin-right: $field-list-spacing-10;
          }

          /* stylelint-enable */
        }

        .e-field-header {
          padding-right: $field-list-bigger-header-padding;
        }

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

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

      .e-axis-table {

        .e-left-axis-fields,
        .e-right-axis-fields {
          padding-left: $field-list-spacing-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-pivot-button {

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

    &.e-search-mode {
      &.e-static {
        max-height: $field-list-height-750;

        .e-field-list-container {
          max-height: $field-list-height-800;

          .e-field-table {
            height: $field-list-height-270;
          }
        }
      }

      /* stylelint-disable */
      &.e-popup:not(.e-device) {
        max-height: $field-list-height-600 !important;
        min-height: $field-list-search-popup-container-bigger-height !important;

        .e-field-list-container {
          height: $field-list-height-387;

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

          .e-field-table {
            height: $field-list-search-popup-table-bigger-height !important;

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

          .e-axis-table {
            height: $field-list-search-popup-axis-table-bigger-height;

            .e-axis-content {
              height: $field-list-search-popup-axis-content-bigger-height !important;
            }
          }
        }
      }
    }

    .e-adaptive-field-list-dialog {
      .e-dlg-content .e-field-list-tree-outer-div {
        max-height: $field-list-adaptive-outerdiv-height;
      }
    }
  }

  /* stylelint-enable */
}

$pivotgrid-active-color: $brand-primary !default;
$pivotgrid-primary-color: $brand-primary !default;
$pivotgrid-default-font-color: $grey-f8 !default;
$pivotgrid-cell-border-color: rgba($grey-light-font, .12) !default;
$pivotgrid-prompt-default-font-color: $pivotgrid-default-font-color !default;
$pivotgrid-default-border-color: $grey-44 !default;
$pivotgrid-border-type: $border-type !default;
$pivotgrid-border-size: $border-size !default;
$pivotgrid-table-background-color: transparent !default;
$pivotgrid-content-font-size: 13px !default;
$pivotgrid-bigger-content-font-size: 13px !default;
$field-list-font-family: $font-family !default;
$pivotgrid-cell-hover-color: rgba(0, 0, 0, 0) !default;
$pivotgrid-grp-bg-color: $grey-darker !default;
$pivotgrid-grp-bg-hover-color: $grey-darker !default;
$pivotgrid-drag-clone-color: $grey-white !default;
$pivotgrid-drop-hover-color: $grey-e6 !default;
$pivotview-grid-content-opacity: 1 !default;
$pivotview-grid-header-font-size: 13px !default;
$pivotview-bigger-grid-header-font-size: 13px !default;
$pivotview-grid-header-font-weight: 600 !default;
$pivotview-grid-header-font-color: $grey-dark-font !default;
$pivotgrid-horizontal-button-padding: 8px !default;
$pivotgrid-vertical-button-padding: 3px !default;
$pivotgrid-summary-font-weight: bold !default;
$pivotgrid-grouping-min-height: 28px !default;
$pivotgrid-prompt-line-height: 22px !default;
$field-list-toggle-size: 40px !default;
$pivotgrid-button-border-color: $grey-44 !default;
$pivotgrid-toolbar-menu-bg-color: $grey-44 !default;
$pivotgrid-drag-clone-text-color: rgba(255, 0, 0, 1) !default;
$pivotgrid-drag-clone-font-size: 12px !default;
$pivotgrid-default-border-radius: 4px !default;
$pivotgrid-button-icon-size: 10px !default;
$pivotgrid-bigger-button-icon-size: 14px !default;
$pivotgrid-button-border-radius: 4px !default;
$pivotgrid-button-background-color: $grey-44 !default;
$pivotgrid-button-hover-color: $grey-dark !default;
$pivotgrid-editor-dialog-footer-padding: 15px !default;
$pivotgrid-button-drag-color: $grey-light !default;
$pivotgrid-expand-icon-fontsize: 10px !default;
$pivotgrid-drill-margintop: 6px !default;
$pivotgrid-bigger-drill-margintop: $pivotgrid-drill-margintop !default;
$pivotgrid-rtl-expand-icon-font-size: 10px !default;
$pivotgrid-collapse-icon-fonsize: 10px !default;
$pivotgrid-expcoldiv-fontsize: 12px !default;
$pivotgrid-vsort-column-margin: -28px 0 !default;
$pivotgrid-vsort-column-parent-margin: -11px 0 !default;
$pivotgrid-vsort-row-margin: -20px 0 !default;
$pivotgrid-vsort-row-parent-margin: -12px 0 !default;
$pivotgrid-tooltip-padding: 3px 2px !default;
$pivotgrid-tooltip-fontcolor: $grey-base !default;
$pivotgrid-tooltip-fontsize: 14px !default;
$pivotgrid-tooltip-fontfamily: Helvetica !default;
$pivotgrid-member-filter-list-bigger-height: 121px !default;
$pivotgrid-member-filter-list-height: 150px !default;
$pivotgrid-button-font-color: $grey-dark-font !default;
$pivotgrid-button-acitve-font-color: $pivotgrid-button-font-color !default;
$pivotgrid-hover-color: $grey !default;
$pivotgrid-focus-color: $grey-dark !default;
$pivotgrid-button-icon-color: $grey-dark-font !default;
$pivotgrid-button-active-icon-color: $pivotgrid-button-icon-color !default;
$pivotgrid-icon-hover-color: $grey-dark-font !default;
$pivotgrid-icon-focus-color: $pivotgrid-icon-hover-color !default;
$pivotgrid-button-inner-padding: 4px !default;
$pivotgrid-bigger-button-inner-padding: 7px !default;
$pivotgrid-excel-member-filter-height: 143px !default;
$pivotgrid-excel-member-filter-node-limit-height: 140px !default;
$pivotgrid-excel-filter-height: 234px !default;
$pivotgrid-excel-member-filter-bigger-height: 103px !default;
$pivotgrid-excel-filter-bigger-height: 213px !default;
$pivotgrid-editor-label-padding-size: 16px 10px 16px 20px !default;
$pivotgrid-editor-label-font: 500 13px Helvetica !default;
$pivotgrid-editor-label-opacity: 1 !default;
$pivotgrid-editor-label-color: $grey-light-font !default;
$pivotgrid-editor-label-fill: $grey-f8 !default;
$pivotgrid-editor-label-excel-width: 312px !default;
$pivotgrid-editor-label-excel-padding-size: 18px 10px 12px 20px !default;
$pivotgrid-editor-label-excel-opacity: 100%;
$pivotgrid-drillthrough-header-font-weight: 700 !default;
$pivotgrid-drillthrough-value-opacity: 1 !default;
$pivotgrid-header-selection-bg-color: $grey-88 !default;
$pivotgrid-header-selection-color: $active-font-color !default;
$pivotgrid-menubar-height: 40px !default;
$pivotgrid-bigger-menubar-height: 45px !default;
$pivotgrid-sort-wrapper-padding-size: 10px !default;
$pivotgrid-sort-select-background-color: $grey-dark !default;
$pivotgrid-sort-select-border-color: $grey-8c !default;
$pivotgrid-sort-select-color: $grey-light-font !default;
$pivotgrid-group-chart-values-dropdown-margin: 5px !default;
$pivotgrid-group-chart-values-dropdown-margin-bigger: 5px !default;
$pivotgrid-header-background-color: $grey-darker !default;
$pivotgrid-gtot-background-color: $grey-darker !default;
$pivotgrid-gtot-font-color: $grey-dark-font 87% !default;
$pivotgrid-report-label-margin-top: 7px !default;
$pivotgrid-bigger-report-label-margin-top: 8px !default;
$pivotview-value-sort-rtl-padding: .8em !default;
$pivotview-filter-toolbar-items-margin-left: 20px !default;
$pivotview-filter-toolbar-items-margin-right: 0 !default;
$pivotgrid-header-text-margin-top: 4px !default;
$pivotgrid-border: $pivotgrid-cell-border-color !default;
$pivotgrid-bg-color: #5a6268;
$pivotgrid-border-color: #545b62;
$pivotgrid-active-border-color: #4e555b;
$pivotgrid-box-shadow-color: rgba(108, 117, 125, .5);
$pivot-toolbar-icon-hover-color: $pivotgrid-icon-hover-color !default;
$pivotgrid-value-sort-icon-padding: 3px 4px 4px 4px !default;
$pivotgrid-value-sort-icon-font-size: 10px !default;
$pivotgrid-drillthrough-header-font-color: $grey-light-font !default;
$pivotgrid-drillthrough-header-value-font-color: $pivotview-grid-header-font-color !default;
$pivotgrid-group-button-icon-margin-top: 2px !default;
$pivotgrid-bigger-group-button-icon-margin-top: 1px !default;
$pivotgrid-expand-collapse-margin-top: 5px !default;
$pivotgrid-expand-collapse-margin-bottom: 0 !default;
$pivotgrid-group-bigger-pivot-button-padding: 0 12px !default;
$pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
$pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
$pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
$pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
$pivotgrid-cell-value-margin: 0 !default;
$pivotgrid-grouping-height: 36px !default;
$pivotgrid-editor-search-padding-size: 12px !default;
$pivotgrid-member-editor-search-padding: 0 $pivotgrid-editor-search-padding-size 10px !default;
$pivotview-grid-indent-padding: 8px !default;
$pivotview-grid-bigger-indent-padding: 16px !default;
$pivotview-axis-indent-padding: $pivotview-grid-indent-padding !default;
$pivotview-axis-bigger-indent-padding: $pivotview-grid-bigger-indent-padding !default;
$pivotview-indent-space-size: 24px !default;
$pivotgrid-button-font-size: 13px !default;
$pivotgrid-bigger-button-font-size: 13px !default;
$pivotgrid-bigger-button-line-height: .9em !default;
$pivotgrid-bigger-excel-dialog-min-width: 350px !default;
$pivotgrid-member-editor-bigger-height: 400px !default;
$pivotgrid-expand-bigger-icon-fontsize: 10px !default;
$pivotgrid-collapse-bigger-icon-fontsize: 10px !default;
$pivotgrid-grouping-padding-bottom: 10px !default;
$pivotgrid-grouping-padding-top: 0 !default;
$pivotgrid-grouping-bigger-padding-top: 0 !default;
$pivotgrid-button-icon-wrapper-size: 18px !default;
$pivotgrid-bigger-button-icon-wrapper-size: 20px !default;
$pivotgrid-bigger-button-icon-touch-margin-size: 0 !default;
$pivotpager-padding: 4px 12px !default;
$pivotpage-touch-padding: 3px 12px 4px 16px !default;
$pivotpager-separator-border: 1px solid $grey-ad !default;
$pivotpager-title-font-size: 12px !default;
$pivotpager-single-title-font-size: 14px !default;
$pivotpager-touch-single-title-font-size: 16px !default;
$pivotpager-single-title-line-height: 2.7em !default;
$pivotpager-touch-single-title-line-height: 2.8em !default;
$pivotpager-axis-title-font-color: $grey-ad !default;
$pivotpager-size-title-font-color: $grey-88 !default;
$pivotpager-string-font-touch-size: 14px !default;
$pivotpager-pager-number-font-weight: 400 !default;
$pivotpager-v-separator-margin: 8px 12px !default;
$pivotpager-touch-v-separator-margin: 8px 16px !default;
$pivotpager-v-separator-margin-top: 5px !default;
$pivotpager-h-separator-margin: 8px 12px !default;
$pivotpager-page-icon-size: $pivotpager-title-font-size !default;
$pivotpager-touch-page-icon-size: $pivotpager-string-font-touch-size !default;
$pivotpager-page-icon-padding: 10px !default;
$pivotpager-touch-page-icon-padding: 10px !default;
$pivotpager-page-container-marging-top: 4px !default;
$pivotpager-touch-page-container-marging-top: 7px !default;
$pivotpager-adaptive-page-container-marging-top: 11px !default;
$pivotpager-numeric-box-margin: 0 8px 0 12px !default;
$pivotpager-adaptive-numeric-box-margin: 0 12px 0 8px !default;
$pivotpager-touch-numeric-boc-margin: 0 12px 0 16px !default;
$pivotpager-single-size-title-padding: 8px !default;
$pivotview-header-text-padding: 8px !default;
$pivotview-touch-header-text-padding: 8px !default;
$pivotview-olap-editor-text-content: 25px !default;
$pivotview-dialog-text-font-size: 14px !default;
$pivotgrid-tooltip-line-height-20: 21px !default;
$pivotgrid-member-filter-list-padding-size: -35px !default;

$pivotview-font-icon-12: 12px !default;
$pivotview-font-icon-13: 13px !default;
$pivotview-font-icon-14: 14px !default;
$pivotview-font-icon-16: 16px !default;
$pivotview-font-icon-18: 18px !default;
$pivotview-font-icon-20: 20px !default;

$pivotview-font-size-12: 12px !default;
$pivotview-font-size-14: 14px !default;
$pivotview-font-size-16: 16px !default;

$pivotview-font-weight-normal: 400 !default;
$pivotview-font-weight-medium: 500 !default;
$pivotview-font-weight-semibold: 600 !default;

$pivotgrid-margin-auto: auto !default;
$pivotgrid-margin-0: 0 !default;
$pivotgrid-margin-1: 1px !default;
$pivotgrid-margin-4: 4px !default;
$pivotgrid-margin-5: 5px !default;
$pivotgrid-margin-6: 6px !default;
$pivotgrid-margin-7: 7px !default;
$pivotgrid-margin-8: 8px !default;
$pivotgrid-margin-10: 10px !default;
$pivotgrid-margin-12: 12px !default;
$pivotgrid-margin-18: 18px !default;
$pivotgrid-margin-20: 20px !default;
$pivotgrid-margin--20: -20px !default;
$pivotgrid-margin--25: -25px !default;

$pivotgrid-padding-0: 0 !default;
$pivotgrid-padding-1: 1px !default;
$pivotgrid-padding-2: 2px !default;
$pivotgrid-padding-3: 3px !default;
$pivotgrid-padding-4: 4px !default;
$pivotgrid-padding-5: 5px !default;
$pivotgrid-padding-7: 7px !default;
$pivotgrid-padding-8: 8px !default;
$pivotgrid-padding-10: 10px !default;
$pivotgrid-padding-12: 12px !default;
$pivotgrid-padding-15: 15px !default;
$pivotgrid-padding-16: 16px !default;
$pivotgrid-padding-20: 20px !default;
$pivotgrid-padding-24: 24px !default;
$pivotgrid-padding-30: 30px !default;
$pivotgrid-padding-unset: unset !default;

$pivotgrid-border-none: none !default;
$pivotgrid-border-unset: unset !default;
$pivotgrid-border-0: 0 !default;
$pivotgrid-border-1: 1px !default;

$pivotgrid-radius-0: 0 !default;

$pivotgrid-line-height-xs: 16px !default;
$pivotgrid-line-height-xl: 28px !default;
$pivotgrid-line-height-4xl: 40px !default;
$pivotgrid-line-height-5xl: 48px !default;
$pivotgrid-line-height-normal: normal !default;
$pivotgrid-line-height-initial: initial !default;
$pivotgrid-line-height-1em: 1em !default;

$pivotgrid-height-1: 1px !default;
$pivotgrid-height-18: 18px !default;
$pivotgrid-height-24: 24px !default;
$pivotgrid-height-25: 25px !default;
$pivotgrid-height-28: 28px !default;
$pivotgrid-height-30: 30px !default;
$pivotgrid-height-36: 36px !default;
$pivotgrid-height-40: 40px !default;
$pivotgrid-height-200: 200px !default;
$pivotgrid-height-350: 350px !default;
$pivotgrid-height-420: 420px !default;
$pivotgrid-height-450: 450px !default;
$pivotgrid-height-520: 520px !default;
$pivotgrid-height-570: 570px !default;
$pivotgrid-height-100p: 100% !default;
$pivotgrid-height-auto: auto !default;
$pivotgrid-height-initial: initial !default;
$pivotgrid-height-inherit: inherit !default;

$pivotgrid-width-0: 0 !default;
$pivotgrid-width-2: 2px !default;
$pivotgrid-width-10: 10px !default;
$pivotgrid-width-12: 12px !default;
$pivotgrid-width-18: 18px !default;
$pivotgrid-width-24: 24px !default;
$pivotgrid-width-40: 40px !default;
$pivotgrid-width-50: 50px !default;
$pivotgrid-width-64: 64px !default;
$pivotgrid-width-80: 80px !default;
$pivotgrid-width-100: 100px !default;
$pivotgrid-width-130: 130px !default;
$pivotgrid-width-150: 150px !default;
$pivotgrid-width-180: 180px !default;
$pivotgrid-width-230: 230px !default;
$pivotgrid-width-250: 250px !default;
$pivotgrid-width-300: 300px !default;
$pivotgrid-width-310: 310px !default;
$pivotgrid-width-320: 320px !default;
$pivotgrid-width-350: 350px !default;
$pivotgrid-width-400: 400px !default;
$pivotgrid-width-500: 500px !default;
$pivotgrid-width-40p: 40% !default;
$pivotgrid-width-49p: 49% !default;
$pivotgrid-width-50p: 50% !default;
$pivotgrid-width-60p: 60% !default;
$pivotgrid-width-100p: 100% !default;
$pivotgrid-width-none: none !default;
$pivotgrid-width-unset: unset !default;
$pivotgrid-width-auto: auto !default;

$pivotgrid-spacing-10p: 10% !default;
$pivotgrid-width-inherit: inherit !default;

@mixin wrap-styles {
  /* stylelint-disable */
  background-color: $gray-600 !important;
  border-color: $gray-600 !important;
  color: $white !important;
  /* stylelint-enable */
}

@mixin active-wrap-styles {
  background: $pivotgrid-sort-select-background-color;
  border-color: $pivotgrid-sort-select-border-color;
  color: $pivotgrid-sort-select-color;
  outline: none;
}

@include export-module('pivotview-layout') {
  .e-pivotview {
    &.sf-pivotview {
      height: $pivotgrid-width-100p;

      &.e-pivot-gbar {
        min-width: $pivotgrid-width-400;
      }

      &:not(.e-pivot-gbar) {
        min-width: $pivotgrid-width-310;
      }
    }

    &.e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
      @if ($skin-name =='Material3') {
        padding: $pivotgrid-padding-0;
      }
    }

    .e-pivot-view-port {
      height: $pivotgrid-height-inherit;
      display: flex;
      flex-direction: column;

      .e-pivot-table-view.e-table-chart-view {
        order: 2;
      }

      .e-pivot-table-view:not(.e-table-chart-view) {
        order: 1;
      }

      .e-pivot-chart-view {
        height: $pivotgrid-height-inherit;

        .e-multi-axis-scroll-div {
          overflow: auto;
        }

        &.e-chart-table-view {
          order: 2;
        }

        &:not(.e-chart-table-view) {
          order: 1;
        }

        .e-pivotchart.e-pivot-accumulation-chart {
          overflow: visible;
        }

        .e-pivotchart.e-pivot-normal-chart {
          overflow: auto;
          overflow-x: hidden;
        }
      }
    }

    /* stylelint-disable */
    .e-value-field-settings,
    .e-member-editor-dialog,
    .e-group-field-settings,
    .e-pivot-format-dialog {
      max-height: $pivotgrid-height-450 !important;
      border-radius: $pivotgrid-default-border-radius;
      max-width: $pivotgrid-width-400 !important;
    }

    /* stylelint-enable */
    .e-value-field-settings {
      .e-field-name-text-container {
        display: flex;
      }

      .e-field-name-title {
        flex: none;
        font-size: $pivotview-dialog-text-font-size;
        font-weight: $pivotview-font-weight-medium;
      }

      .e-field-name-content {
        flex: auto;
        font-size: $pivotview-dialog-text-font-size;
        font-weight: $pivotview-font-weight-medium;
        width: $pivotgrid-width-100p;
      }

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

      .e-base-field-option-text,
      .e-base-item-option-text,
      .e-type-option-text {
        font-size: $pivotview-dialog-text-font-size;
        font-weight: $pivotview-font-weight-medium;
        width: $pivotgrid-width-100p;

        @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
          padding-bottom: $pivotgrid-padding-4;
        }
      }

      .e-caption-input-text {
        font-size: $pivotview-dialog-text-font-size;
      }
    }

    .e-group-field-settings {
      /* stylelint-disable */
      width: $pivotgrid-width-auto !important;
      /* stylelint-enable */

      .e-caption-option-text,
      .e-input-option-text,
      .e-group-inerval-option-text,
      .e-checkbox-wrapper {
        padding-bottom: $pivotgrid-grouping-padding-bottom;
      }

      .e-group-start-option-container .e-checkbox-wrapper {
        padding-top: $pivotgrid-grouping-padding-top;
      }

      .e-caption-option-text,
      .e-input-option-text,
      .e-group-inerval-option-text,
      .e-checkbox-wrapper .e-label {
        font-size: $pivotview-dialog-text-font-size;
        font-weight: $pivotview-font-weight-medium;
        width: $pivotgrid-width-100p;
      }

      .e-group-input-container,
      .e-group-end-option-container,
      .e-group-interval-option-container {
        padding-top: $pivotgrid-editor-search-padding-size;
      }

      .e-group-field-div-content {
        margin-bottom: $pivotgrid-margin-10;
      }
    }

    .e-member-editor-dialog {
      min-width: $pivotgrid-width-320;

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

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

      @if ($skin-name =='bootstrap4') or ($skin-name =='bootstrap5') or ($skin-name =='tailwind') {
        &:not(.e-excel-filter) {
          .e-editor-search-container {
            padding: $pivotgrid-padding-5 $pivotgrid-editor-search-padding-size $pivotgrid-padding-10;
          }
        }
      }

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

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

          @if ($skin-name =='Material3') {
            border: $pivotgrid-border-1 solid $pivotgrid-border;
            border-radius: $pivotgrid-member-sort-border-radius;
            min-width: $pivotgrid-width-40;
          }

          &:hover {
            @if ($skin-name =='bootstrap4') {
              @include wrap-styles;
            }
          }

          &.e-active {
            @if ($skin-name =='bootstrap4') {
              @include active-wrap-styles;
            }
          }

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

          &:focus {
            @if ($skin-name =='bootstrap4') {
              @include wrap-styles;
            }

            &.e-active {
              @if ($skin-name =='bootstrap4') {
                @include active-wrap-styles;
              }
            }
          }
        }
      }

      .e-member-prompt {
        padding: $pivotgrid-padding-15 $pivotgrid-editor-search-padding-size;
        text-align: center;
        width: $pivotgrid-width-100p;
      }

      .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: $pivotgrid-border-none;
          }
        }
      }

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

      .e-member-editor-container {
        display: inline-table;
        width: $pivotgrid-width-100p;

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

        &.e-olap-field-list-tree {
          overflow-x: auto;
        }
      }

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

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

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

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

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

      .e-excelfilter {
        padding-top: $pivotgrid-padding-20;

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

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

        .e-member-editor-container-outer-div {
          height: $pivotgrid-excel-member-filter-height;
        }
      }

      &.e-node-limit .e-excelfilter .e-member-editor-container-outer-div {
        height: $pivotgrid-excel-member-filter-node-limit-height;
      }

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

        .e-filter-text-div {
          /* stylelint-disable */
          color: $pivotview-grid-header-font-color !important;
          /* stylelint-enable */
          font-size: $pivotview-dialog-text-font-size;
          font-weight: $pivotview-font-weight-medium;
        }

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

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

        .e-disable {
          display: none;
        }

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

      .e-filter-tab-container {
        border: $pivotgrid-border-none;

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

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

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

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

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

      .e-clear-filter-button {
        float: left;
        margin: $pivotgrid-margin-0 !important;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;

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

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

      .e-editor-label-container {
        align-items: center;
        background: $pivotgrid-editor-label-fill;
        display: flex !important;
        /* stylelint-enable */
        height: $pivotgrid-height-40;
        justify-content: center;
        opacity: $pivotgrid-editor-label-excel-opacity;

        @if ($skin-name =='Material3') {
          border-top: $pivotpager-separator-border;
        }

        &.e-label-container-visible {
          display: block;
        }

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

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

      &.e-rtl {
        .e-member-editor-outer-container {
          .e-editor-search-container {
            .e-filter-sort {
              margin-left: $pivotgrid-margin-0;
              margin-right: $pivotgrid-sort-wrapper-padding-size;
            }
          }

          ul {
            margin-left: $pivotgrid-margin-0;
            margin-right: $pivotgrid-member-filter-list-padding-size;
          }
        }

        .e-footer-content {
          .e-clear-filter-button {
            float: right;
            margin: $pivotgrid-margin-0;
          }
        }
      }

      &.e-olap-editor-dialog {
        .e-member-editor-outer-container {

          .e-select-all-container ul,
          .e-member-editor-container ul {
            margin-left: $pivotgrid-margin-0;
          }

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

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

              .e-caret {
                font-size: $pivotgrid-button-icon-size;
              }

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

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

      /* stylelint-disable */
      .e-member-editor-outer-container:not(.e-excelfilter) {
        .e-editor-search-container {
          @if ($skin-name !='tailwind3') {
            padding-top: $pivotgrid-padding-4 !important;
          }       
        }

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

    .e-value-field-settings,
    .e-member-editor-dialog,
    .e-pivot-format-dialog,
    .e-group-field-settings {

      .e-dlg-header-content {
        border: $pivotgrid-border-0;
        border-radius: $pivotgrid-default-border-radius;
        font-weight: $pivotview-font-weight-normal;
      }

      .e-footer-content {
        border-top-left-radius: $pivotgrid-radius-0;
        border-top-right-radius: $pivotgrid-radius-0;

        @if ($skin-name !='FluentUI') and ($skin-name !='tailwind3') {
          padding-top: $pivotgrid-editor-dialog-footer-padding;
          padding-bottom: $pivotgrid-editor-dialog-footer-padding;
        }
      }

      @if ($skin-name =='Material3') {
        &:not(.e-group-field-settings) {
          white-space: nowrap;
        }
      }

      .e-dlg-content {
        overflow: hidden;

        @if ($skin-name =='Material3') {
          border-radius: $pivotgrid-radius-0;
        }

        .e-empty-field::-webkit-input-placeholder,
        .e-empty-field:-moz-placeholder,
        .e-empty-field::-moz-placeholder,
        .e-empty-field:-ms-input-placeholder {
          color: $error-font-color !important;
          font-weight: $pivotview-font-weight-semibold !important;
        }
      }
    }

    .e-member-editor-dialog,
    .e-pivot-format-dialog {
      .e-dlg-content {
        @if ($skin-name !='FluentUI') {
          padding: $pivotgrid-padding-0;
        }

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

    /* stylelint-enable */
    .e-value-field-settings,
    .e-member-editor-dialog {
      .e-footer-content {
        border-top: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;

        @if ($skin-name =='FluentUI') {
          border-top: $pivotgrid-border-0;
        }
      }
    }

    .e-value-field-settings,
    .e-pivot-format-dialog {
      min-width: $pivotgrid-width-300;

      .e-dlg-content {
        overflow: auto;

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

    .e-pivotchart-type-dialog {
      /* stylelint-disable */
      max-width: $pivotgrid-width-350 !important;
      max-height: $pivotgrid-height-420 !important;
      /* stylelint-enable */

      .e-chart-type-option-container,
      .e-chart-type-option-text {
        padding-bottom: $pivotgrid-padding-20;

        .e-chart-type-option-text {
          padding-bottom: $pivotgrid-padding-5;
        }
      }

      .e-multiple-axes-mode-container {
        padding-top: $pivotgrid-padding-20;

        .e-multiple-axes-mode-text {
          padding-bottom: $pivotgrid-padding-5;
        }
      }

      .e-dialog-multiple-axis,
      .e-dialog-show-legend {
        width: $pivotgrid-width-49p;
      }
    }

    .e-pivot-format-dialog {
      /* stylelint-disable */
      max-height: $pivotgrid-height-570 !important;
      max-width: $pivotgrid-width-350 !important;
      /* stylelint-enable */

      .e-pivot-format-dialog-outer {
        padding: $pivotgrid-padding-0 $pivotgrid-editor-search-padding-size;

        .e-pivot-format-value-lable,
        .e-pivot-format-lable,
        .e-pivot-format-custom-lable,
        .e-pivot-format-grouping-lable,
        .e-pivot-format-decimal-lable {
          font-weight: $pivotview-font-weight-medium;

          @if ($skin-name =='tailwind') or ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
            padding-bottom: $pivotgrid-padding-4;
          }
        }

        .e-pivot-format-value-drop,
        .e-pivot-format-drop,
        .e-pivot-format-custom-text,
        .e-pivot-format-grouping-drop,
        .e-pivot-format-decimal-drop {
          margin-bottom: $pivotgrid-margin-20;

          @if ($skin-name =='tailwind') {
            margin-bottom: $pivotgrid-margin-12;
          }
        }
      }
    }

    .e-pivot-toolbar {
      /* stylelint-disable */
      box-sizing: border-box !important;
      /* stylelint-enable */
      background: $pivotgrid-grp-bg-color;
      border-bottom: $pivotgrid-border-0;
      border-style: solid;

      @if ($skin-name =='tailwind3') {
        border-radius: $pivotgrid-radius-0;
      }

      @if ($skin-name =='FluentUI') {
        box-shadow: none;
      }

      @if ($skin-name =='fluent2') {
        border-top: $pivotgrid-border-1 solid $pivotgrid-border-color;
        border-left: $pivotgrid-border-1 solid $pivotgrid-border-color;
        border-right: $pivotgrid-border-1 solid $pivotgrid-border-color;
      }

      @if ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') or ($skin-name =='tailwind') or ($skin-name =='tailwind3') or ($skin-name =='FluentUI') or ($skin-name =='Material3') {
        border-top: $pivotgrid-border-1 solid $pivotgrid-border;
        border-left: $pivotgrid-border-1 solid $pivotgrid-border;
        border-right: $pivotgrid-border-1 solid $pivotgrid-border;
      }

      .e-toolbar-items {
        background: $pivotgrid-grp-bg-color;
      }

      .e-toolbar-item {
        .e-tbar-btn.e-btn {
          .e-icons.e-btn-icon {
            @if ($skin-name !='bootstrap5') and ($skin-name !='tailwind') and ($skin-name !='FluentUI') and ($skin-name !='Material3') {
              font-size: $pivotview-font-icon-16;
            }
          }
        }
        &.e-disabled {
          pointer-events: none;
        }
      }

      .e-pivot-toolbar-menu {
        background-color: $pivotgrid-table-background-color;
        border: $pivotgrid-border-none;

        @if ($skin-name =='fluent2' or $skin-name =='tailwind3') {
          margin-bottom: $pivotgrid-margin-4;
        }

        ul .e-menu-item {
          @if ($skin-name !='tailwind') {
            /* stylelint-disable */
            height: $pivotgrid-menubar-height !important;
            /* stylelint-enable */
          }
          overflow: hidden;
          padding-left: $pivotgrid-padding-10;

          .e-menu-icon {
            margin-left: $pivotgrid-margin-0;
            margin-right: $pivotgrid-margin-0;

            @if ($skin-name !='bootstrap5') and ($skin-name !='tailwind') and ($skin-name !='fluent2'){
              font-size: $pivotview-font-icon-16;
            }

            @if ($skin-name =='bootstrap4') {
              color: $gray-700;
            }

            @if ($skin-name =='FluentUI') {
              color: $pivotgrid-active-color;
            }

            @if ($skin-name =='bootstrap5') {
              line-height: $pivotgrid-menubar-height;
            }

            @if ($skin-name =='FluentUI') {
              line-height: $pivotgrid-line-height-xl;
            }

            @if ($skin-name =='tailwind') {
              line-height: $pivotgrid-line-height-4xl;
            }
          }

          .e-caret {
            @if ($skin-name =='bootstrap4') {
              color: $gray-700;
            }

            @if ($skin-name =='FluentUI') {
              color: $pivotgrid-active-color;
            }

            @if ($skin-name =='bootstrap5') or ($skin-name =='FluentUI') {
              line-height: $pivotgrid-menubar-height;
            }

            @if ($skin-name =='tailwind') {
              line-height: $pivotgrid-line-height-4xl;
            }
          }
        }

        ul .e-menu-item.e-focused {
          @if ($skin-name =='bootstrap4') {
            background-color: $gray-600;
            border-radius: $pivotgrid-default-border-radius;
          }

          @if ($skin-name =='bootstrap5.3') {
            background-color: $pivotgrid-toolbar-menu-bg-color;
          }

          .e-menu-icon,
          .e-icons {
            @if ($skin-name =='bootstrap4') {
              color: $white;
            }

            @if ($skin-name =='FluentUI') {
              color: $pivotgrid-active-color;
            }
          }
        }

        /* stylelint-disable */
        ul.e-menu {
          @if ($skin-name =='fabric') or ($skin-name =='fabric-dark') or ($skin-name =='highcontrast') or ($skin-name =='highcontrast-light') {
            padding-left: $pivotgrid-padding-0 !important;
            padding-right: $pivotgrid-padding-0 !important;
          }
        }

        &.e-menu-wrapper ul.e-menu {
          background-color: $pivotgrid-table-background-color;
        }
      }

      .e-tab .e-tab-header .e-toolbar-item.e-active {
        margin-left: $pivotgrid-margin-18 !important;
      }

      .e-toolbar-item.e-template .e-toolbar-template-container {
        display: flex;
      }

      .e-toolbar-item.e-template,
      .e-toolbar-item:not(.e-separator):not(.e-spacer)
      {
        @if ($skin-name != 'Material3') {
          padding: $pivotgrid-padding-0 !important;
        }
        /* stylelint-enable */
      }

      .e-reportlist-label {
        float: left;
        font-weight: $pivotview-font-weight-medium;
      }

      .e-reportlist-drop {
        float: right;
        margin: $pivotgrid-margin-0 $pivotgrid-margin-8;
        /* stylelint-disable */
        width: $pivotgrid-width-150 !important;
        /* stylelint-enable */

        @if ($skin-name =='Material3') {
          background: $pivotgrid-grp-bg-color;
        }
      }

      &.e-rtl {
        .e-reportlist-label {
          float: right;
        }

        .e-reportlist-drop {
          float: left;
        }

        .e-pivot-toolbar-menu {
          ul .e-menu-item {
            padding-left: $pivotgrid-padding-30;
            padding-right: $pivotgrid-padding-10;
          }
        }
      }
    }

    .e-frozenscrollbar {
      background: $pivotgrid-grp-bg-color;
    }

    /* stylelint-disable */
    & .e-headercontent {
      & .e-columnheader {
        & .e-headercell.e-leftfreeze {
          -webkit-transform: translate3d(0, 0, 0);
        }
      }
    }

    /* stylelint-enable */
  }

  .e-pivotview-disable-icon {
    visibility: hidden;
  }

  .e-pivotview-report-inner {
    padding-top: $pivotgrid-padding-10;
  }

  .e-pivotview-report-dialog {
    /* stylelint-disable */
    max-width: $pivotgrid-width-350 !important;
  }

  .e-mdx-query-content {
    background-color: $pivotgrid-table-background-color;
    color: $pivotgrid-default-font-color;
    font-size: $pivotview-font-size-14;
    font-weight: $pivotview-font-weight-medium;
    height: $pivotgrid-height-200;
    margin-top: $pivotgrid-margin-5;
    padding: $pivotgrid-padding-5 $pivotgrid-padding-10;
    resize: none;
    width: $pivotgrid-width-100p;
  }

  .e-pivotview-mdx-dialog {
    max-width: $pivotgrid-width-500 !important;
  }

  /* stylelint-enable */
  .e-report-outer {
    display: inline-block;
    width: $pivotgrid-width-100p;

    @if ($skin-name =='FluentUI') {
      padding-top: $pivotgrid-padding-1;
    }
  }

  .e-pivotview-report-label {
    float: left;
    margin-top: $pivotgrid-report-label-margin-top;
    width: $pivotgrid-width-40p;

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

  /* stylelint-disable */
  .e-pivotview-report-input {
    float: right;
    width: $pivotgrid-width-60p !important;
  }

  #{if(&, "&", "*")}.e-rtl {
    .e-pivotview-report-input {
      float: left;
    }

    .e-pivotview-report-label {
      float: right;
    }
  }

  .e-pivotview-pdf-export,
  .e-pivotview-excel-export,
  .e-pivotview-csv-export,
  .e-pivotview-png-export,
  .e-pivotview-jpeg-export,
  .e-pivotview-svg-export {
    font-size: $pivotview-font-icon-18 !important;
  }

  /* stylelint-enable */
  .e-contextmenu-container.e-menu-popup.e-menu-container.e-pivot-chart-menu ul {

    .e-dialog-multiple-axis .e-label,
    .e-dialog-multiple-axis .e-label {
      white-space: nowrap;
    }
  }

  .e-drillthrough-dialog {
    .e-drillthrough-body-header-container {
      margin-bottom: $pivotgrid-margin-20;

      @if ($skin-name =='bootstrap5') {
        margin-bottom: $pivotgrid-margin-18;
      }
    }

    .e-drillthrough-body-header {
      color: $pivotgrid-drillthrough-header-font-color;
      font-weight: $pivotgrid-drillthrough-header-font-weight;
    }

    .e-drillthrough-body-header-value {
      color: $pivotgrid-drillthrough-header-value-font-color;
      margin-right: $pivotgrid-margin-20;
    }

    /* stylelint-disable */
    .e-drillthrough-body-header-common {
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      display: inline-block;
      flex-wrap: wrap;
    }

    /* stylelint-enable */
  }
}

@mixin wrap-styles {
  background-color: $pivotgrid-focus-color;
  color: $pivotgrid-button-acitve-font-color;

  @if ($skin-name =='bootstrap4') {
    background-color: $pivotgrid-border-color;
    border-color: $pivotgrid-active-border-color;
    box-shadow: 0 0 0 .2rem $pivotgrid-box-shadow-color;
  }

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

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

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

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

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

  .e-pivotview {
    .e-pivotcell-container {
      width: 100%;
      align-items: center;
      display: flex;
      max-height: $pivotgrid-height-inherit;

      .e-stackedheadertext,
      .e-headertext {
        &.e-cellvalue {
          align-self: stretch;
          overflow: hidden;
          text-overflow: ellipsis;
          width: $pivotgrid-width-100p;

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

      .e-sortfilterdiv.e-value-sort-icon {
        align-items: center;
        display: flex;
      }
    }

    .e-gridclip .e-pivotcell-container {
      .e-stackedheadertext,
      .e-headertext {
        &.e-cellvalue {
          text-overflow: clip;
        }
      }
    }

    .e-nextspan {
      display: inline-block;
      width: $pivotview-indent-space-size;
    }

    .e-lastspan {
      display: inline-block;
      padding-top: $pivotgrid-padding-10;
      width: $pivotgrid-width-12;
    }

    .e-grid.e-gridhover tr[role = 'row']:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
      background-color: $pivotgrid-cell-hover-color;
    }

    .e-rowsheader .e-cellvalue {
      margin-left: $pivotgrid-margin-10;
    }

    .e-valuescontent {
      opacity: $pivotview-grid-content-opacity;
      padding-right: $pivotgrid-padding-8;
      text-align: right;

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

    .e-grid .e-rowcell {
      /* stylelint-disable */
      font-size: $pivotgrid-content-font-size !important;
      padding-left: $pivotgrid-padding-8;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

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

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

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

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

    .e-gtot,
    .e-gtot.e-rowsheader,
    .e-gtot.e-columnsheader,
    .e-grid .e-content,
    .e-grid .e-gridheader {
      background: $pivotgrid-gtot-background-color;
    }

    .e-headercell {
      &.no-right-border {
        border-right: 0 !important;
      }
      &.no-left-border {
        border-left: 0 !important;
      }
      &.no-borders {
        border-right: 0 !important;
        border-left: 0 !important;
      }
    }

    .e-headercell:not(.e-columnsheader) {
      background: $pivotgrid-gtot-background-color !important;
    }

    .e-grid .e-gridheader {
      border-bottom-width: $pivotgrid-border-1;
      @if($skin-name == 'bootstrap5') {
        border-bottom-color: $border-light;
      }

      table th[rowspan = '1'],
      table th:not([rowspan]) {
        padding-bottom: $pivotgrid-padding-0 !important;
        padding-top: $pivotgrid-padding-0 !important;
        vertical-align: middle;
      }
    }

    .e-gtot {
      font-weight: $pivotgrid-summary-font-weight;
    }

    .e-gtot
    .e-cellvalue {
      color: $pivotgrid-gtot-font-color;
    }

    .e-rowsheader,
    .e-columnsheader {
      background: $pivotgrid-header-background-color;
    }

    .e-rowsheader {
      .e-cellvalue {
        margin-left: $pivotgrid-rowsheader-cellvalue-margin-left;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;

        @if ($skin-name == 'tailwind') or ($skin-name == 'tailwind3') or ($skin-name == 'Material3') {
          vertical-align: middle;
        }
      }
    }

    .e-pivot-conditional-empty-format {
      margin: $pivotgrid-margin-10;
    }

    .e-member-editor-dialog,
    .e-olap-editor-dialog {
      // sass-lint:disable-all
      min-height: $pivotgrid-height-350 !important;
      min-width: $pivotgrid-width-320 !important;
      visibility: hidden;
      &.e-node-limit {
        max-height: $pivotgrid-height-450 !important;
      }
      // sass-lint:enable-all
    }

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

    .e-member-editor-dialog .e-rtl.e-toolbar .e-toolbar-items {
      margin-left: $pivotgrid-margin-0;
      margin-right: $pivotview-filter-toolbar-items-margin-right;
    }

    .e-pivot-format-dialog {
      .e-pivot-format-table {
        width: $pivotgrid-width-100p;
      }
    }

    .e-toolbar .e-tbar-btn {
      background-color: transparent;

      @if ($skin-name =='fluent2') {
        margin-top: $pivotgrid-margin-4;
      }

      &:hover {
        @if ($skin-name == 'tailwind') {
          background-color: $pivot-toolbar-icon-hover-color;
        }
      }
    }

    .e-grid .e-rowsheader.e-active,
    .e-grid .e-rowsheader.e-cellselectionbackground,
    .e-grid .e-columnsheader.e-active,
    .e-grid .e-columnsheader.e-cellselectionbackground,
    .e-grid .e-rowsheader.e-active,
    .e-grid .e-rowsheader.e-selectionbackground,
    .e-grid .e-columnsheader.e-active,
    .e-grid .e-columnsheader.e-selectionbackground {
      background: $pivotgrid-header-selection-bg-color !important;
      color: $pivotgrid-header-selection-color !important;

      .e-stackedheadercelldiv,.e-cellvalue,
      .e-icons,
      .e-headertext {
        color: $pivotgrid-header-selection-color !important;
      }
    }

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

    div {
      div span.e-value-sort-icon {
        @if ($skin-name == 'Material3') {
          padding: $pivotgrid-padding-0 !important;
        }

        &.e-value-sort-icon-left {
          float: left;
        }
      }
    }

    .e-sortfilterdiv {
      &.e-value-sort-icon {
        float: right;
        font-size: $pivotgrid-value-sort-icon-font-size !important;
      }

      &:not(.e-value-sort-icon) {
        display: none;
      }
    }

    .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
      margin: $pivotgrid-vsort-column-margin !important;
    }

    .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
      margin: $pivotgrid-vsort-column-parent-margin !important;
    }

    .e-stackedheadercelldiv, .e-headercelldiv {
      .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
        margin: $pivotgrid-cell-value-margin !important;
        margin-left: $pivotgrid-margin-auto !important;
        padding-bottom: $pivotgrid-cell-value-margin !important;
        padding-top: $pivotgrid-cell-value-margin !important;
      }
    }

    .e-rowsheader .e-sortfilterdiv {
      line-height: $pivotgrid-line-height-initial !important;
      margin: $pivotgrid-margin-0 !important;
      padding: $pivotgrid-padding-0 !important;
    }

    .e-pivotchart > svg, .e-pivotchart-inner > svg {
      border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
    }

    .e-grid .e-icons {
      color: $pivotgrid-button-icon-color !important;
      @if ($skin-name == 'bootstrap4') {
        color: $gray-700 !important;
      }

      @if ($skin-name =='bootstrap5') or ($skin-name =='bootstrap5.3') {
        color: $pivotview-grid-header-font-color !important;
      }

      &:hover {
        color: $pivotgrid-icon-hover-color !important;
        @if ($skin-name == 'bootstrap4') {
          color: $gray-700 !important;
        }

        @if ($skin-name == 'bootstrap5') or ($skin-name == 'bootstrap5.3') {
          color: $pivotview-grid-header-font-color !important;
        }

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

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

    .e-grid .e-rowsheader {
      line-height: $pivotgrid-line-height-initial !important;
      padding-left: $pivotgrid-padding-8;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;

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

      .e-rowcell span{
        flex-shrink: 0;
      }

      .e-pivotrow-container {
        display: flex;
        width: $pivotgrid-width-100p;
        align-items: center;
      }

      &.e-active {
        .e-icons {
          color: $pivotgrid-button-active-icon-color !important;
          @if ($skin-name == 'bootstrap4') {
            color: $gray-700 !important;
          }

          @if ($skin-name == 'bootstrap5') {
            color: $pivotview-grid-header-font-color !important;
          }
        }
      }
    }

    .e-grid {

      th.e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
        box-shadow: none !important;
      }

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

      .e-pivot-content-loader {
        position: absolute;
        z-index: 10;
        color: $pivotgrid-primary-color;
        font-size: $pivotview-font-icon-20;
        text-align: center;
        padding: $pivotgrid-spacing-10p;
        pointer-events: none;

        &.e-hide-loader {
          display: none;
        }
      }
      .e-virtual-pivot-content {
        visibility: hidden;
      }

      th.e-leftfreeze:has(.e-rhandler:hover) {
        border-right: $pivotgrid-border-1 dashed $pivotgrid-default-border-color !important;
      }
      &.e-rtl {
        th.e-leftfreeze:has(.e-rhandler:hover) {
          border-left: $pivotgrid-border-1 dashed $pivotgrid-default-border-color !important;
          border-right: $pivotgrid-border-unset !important;
        }
      }
    }

    &.sf-pivotview {

      &:has(.e-pivot-grouping-bar) .e-headercontent .e-columnheader .e-group-row .e-headercelldiv {
        display: none;
      }

      .e-headercell.no-borders.e-leftfreeze,
      .e-headercell.no-left-border.e-leftfreeze,
      .e-headercell.no-right-border.e-leftfreeze {
        .e-rhandler.e-rcursor {
          border-right: 0 !important;
        }
      }

      .e-spinner-pane.e-pivot-outer-spinner {
        z-index: 1 !important;
      }

      .e-spinner-pane.e-pivot-outer-spinner .e-spinner-inner {
        visibility: hidden !important;
        /* stylelint-enable */
      }

      &.e-device .e-pivotcell-container .e-stackedheadertext.e-cellvalue {
        align-self: center;
      }

      th.e-columnsheader .e-rhandler.e-rcursor {
        /* stylelint-disable */
        height: $pivotgrid-height-100p !important;
        /* stylelint-enable */
      }
    }

    .e-grid .e-columnsheader {
      /* stylelint-disable */
      padding-left: $pivotgrid-padding-8 !important;
      padding-right: $pivotgrid-padding-8 !important;

      @if($skin-name == 'tailwind') or ($skin-name == 'tailwind-dark') {
        text-transform: none;
      }
    }

    .sf-grid .e-spinner-pane {
    z-index: 1 !important;
    }

    .e-grid .e-headercelldiv,
    .e-grid .e-stackedheadercelldiv {
      line-height: $pivotgrid-line-height-normal;
    }

    .e-frozenheader>.e-table,
    .e-frozencontent>.e-table {
      border-left-color: $pivotgrid-default-border-color !important;
      border-right-color: $pivotgrid-default-border-color !important;
      border-left: $pivotgrid-border-0;
      border-right-width: $pivotgrid-border-1;
    }

    .e-leftfreeze.e-freezeleftborder {
      border-left-color: $pivotgrid-default-border-color !important;
      border-right-color: $pivotgrid-default-border-color !important;
      border-right-width: $pivotgrid-border-1 !important;

      &:not(.e-gtot) {
        background: $pivotgrid-header-background-color;
      }
    }

    .e-stackedheadercelldiv {
      display: block;
      padding: $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-1 !important;
    }

    .e-stackedheadertext.e-cellvalue,
    .e-stackedheadercelldiv.e-cellvalue {
      display: inline-block;
      padding-left: $pivotview-header-text-padding !important;
    }

    .e-headercelldiv.e-cellvalue {
      @if($skin-name == 'bootstrap4') or ($skin-name == 'bootstrap') or ($skin-name == 'bootstrap-dark') or ($skin-name == 'material-dark') or ($skin-name == 'material') {
        margin-left: $pivotgrid-margin-0;
      }
    }

    .e-stackedheadercelldiv,
    .e-stackedheadertext,
    .e-headertext,
    .e-rowsheader .e-cellvalue {
      color: $pivotview-grid-header-font-color;
      font-size: $pivotview-grid-header-font-size;
      font-weight: $pivotview-grid-header-font-weight;
    }

    &:not(e-rtl) {
      .e-rowcell.e-leftfreeze.e-firstcolumn {
        left: 0px;
      }
    }

    .e-valuescontent .e-cellvalue {
      .e-hyperlinkcell {
        cursor: pointer;
      }
    }
    /* stylelint-enable */

    .e-rowcell {
      opacity: 1;

      /* stylelint-disable */
      .e-cellvalue {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      /* stylelint-enable */
    }

    .e-grouping-bar {
      min-width: $pivotgrid-width-400;
      .e-right-axis-fields {
        flex: auto;
      }

      .e-left-axis-fields,
      .e-right-axis-fields {
        height: $pivotgrid-height-auto;
      }

      .e-axis-row,
      .e-axis-column,
      .e-axis-value,
      .e-axis-filter,
      .e-group-all-fields {
        background: $pivotgrid-grp-bg-color;
        display: flex;
      }

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

      .e-left-axis-fields-container {
        display: flex;
      }

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

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

      /* stylelint-disable */
      .e-all-fields-axis {
        background: $pivotgrid-grp-bg-color;
        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
        border-bottom-width: $pivotgrid-border-0;
        height: $pivotgrid-grouping-height !important;
        min-height: $pivotgrid-grouping-height !important;

        @if($skin-name == 'FluentUI') or ($skin-name == 'fluent2'){
          box-shadow: none;
        }

        .e-hscroll .e-scroll-nav {
          background: $pivotgrid-grp-bg-color;
          min-height: $pivotgrid-grouping-height !important;

          &:hover {
            background-color: $pivotgrid-hover-color;
            @if ($skin-name == 'bootstrap4') {
              background-color: $pivotgrid-bg-color;
            }

            .e-nav-arrow {
              color: $pivotgrid-icon-hover-color !important;
            }
          }
        }

        .e-toolbar-items {
          background: $pivotgrid-grp-bg-color;
          min-height: $pivotgrid-grouping-height !important;

          .e-toolbar-item {
            margin: $pivotgrid-margin-0 !important;
            min-height: $pivotgrid-grouping-height !important;
            padding: $pivotgrid-padding-0 !important;
          }
        }
      }
      /* stylelint-enable */

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

        .e-axis-filter {
          border-bottom: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;
        }
      }
    }

    .e-group-values.e-values,
    .e-group-rows.e-rows {
      /* stylelint-disable */
      display: block !important;
      /* stylelint-enable */
    }

    .e-group-values,
    .e-group-columns,
    .e-group-filters,
    .e-group-rows,
    .e-group-all-fields {
      background: $pivotgrid-grp-bg-color;
      display: inline-table;
      flex: auto;
      height: $pivotgrid-grouping-height;
      min-height: $pivotgrid-grouping-height;
      overflow: hidden;
      padding-left: $pivotview-axis-indent-padding;
      scroll-behavior: smooth;
      vertical-align: top;

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

      .e-draggable-prompt {
        color: $pivotgrid-prompt-default-font-color;
        display: inline-block;
        line-height: $pivotgrid-prompt-line-height;
        margin-top: $pivotgrid-margin-4;
        padding-left: $pivotgrid-horizontal-button-padding;
        pointer-events: none;
        position: relative;
        text-align: center;
        vertical-align: middle;
        font-size: $pivotgrid-content-font-size;
        font-weight: $pivotview-font-weight-normal;
        @if ($skin-name == 'bootstrap4') {
          font-size: $pivotview-font-size-12;
        }
      }
    }

    .e-grouping-bar,
    .e-group-rows {

      .e-pvt-btn-div {
        display: inline-flex;
        height: $pivotgrid-height-24;
        padding: $pivotgrid-vertical-button-padding;
        padding-bottom: $pivotgrid-padding-0;
        padding-left: $pivotgrid-padding-0;
        padding-right: $pivotgrid-horizontal-button-padding;

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

        .e-drop-indicator {
          pointer-events: none;
          width: $pivotgrid-width-2;

          &.e-drop-hover {
            border-left: $pivotgrid-border-1 dashed $pivotgrid-drop-hover-color;
            @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
              border-left: $pivotgrid-border-1 solid $pivotgrid-drop-hover-color;
            }
          }
        }
      }

      .e-pivot-button {
        align-items: center;
        background: $pivotgrid-button-background-color;
        border: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-button-border-color;
        border-radius: $pivotgrid-button-border-radius;
        box-shadow: none;
        /* stylelint-disable */
        color: $pivotgrid-button-font-color !important;
        /* stylelint-enable */
        cursor: default;
        display: flex;
        font-weight: $pivotview-font-weight-normal;
        height: $pivotgrid-height-24;
        padding: $pivotgrid-padding-0 $pivotgrid-padding-8;
        text-transform: none;
        vertical-align: bottom;
        z-index: 1;

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

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

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

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

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

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

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

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

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

        .e-pvt-btn-content {
          background: transparent;
          cursor: move;
          flex: auto;
          font-size: $pivotgrid-button-font-size;
          margin-right: $pivotgrid-margin-4;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
          @if ($skin-name == 'bootstrap4') {
            margin-right: $pivotgrid-margin-4;
          }

          @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
            color: $pivotgrid-button-icon-color;
          }

          &.e-disable-drag {
            cursor: auto;
          }
        }

        /* stylelint-disable */
        .e-drag {
          display: none;
        }

        .e-sort,
        .e-dropdown-icon,
        .e-pv-filter,
        .e-pv-filtered,
        .e-remove,
        .e-edit {
          color: $pivotgrid-button-icon-color;
          cursor: pointer;
          display: inline-block;
          font-size: $pivotgrid-button-icon-size;
          margin-left: $pivotgrid-margin-4;
          width: $pivotgrid-button-icon-wrapper-size;

          &:hover {
            color: $pivotgrid-icon-hover-color;
          }

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

        .e-sort {
          height: $pivotgrid-button-icon-size;
          transform: rotateX(0deg);
          transition: transform 200ms ease-in-out;

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

        .e-dropdown-icon {
          margin-top: $pivotgrid-margin-1;
        }
      }
    }

    .e-group-values {
      .e-pvt-btn-div {
        .e-pivot-button {
          max-width: $pivotgrid-width-230;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .e-group-filters,
    .e-group-columns {
      width: $pivotgrid-width-100p;
    }

    th.e-group-row .e-axis-row {
      display: inline-block;
      height: $pivotgrid-height-auto;
      vertical-align: top;
      width: $pivotgrid-width-100p;
    }

    &.sf-pivotview {
      th.e-headercell.e-group-row.e-leftfreeze {
        /* stylelint-disable */
        box-shadow: none !important;
        /* stylelint-enable */
      }
    }

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

      .e-group-rows {
        display: table;
        flex: none;
        width: $pivotgrid-width-100p;

        &.e-tabular-group-rows {
          padding-top: $pivotgrid-padding-3 !important;
        }

        &.e-static-server-rendering {
          display: grid;
        }

        .e-pvt-btn-div {
          max-width: $pivotgrid-width-unset;
          width: $pivotgrid-width-100p;
          &.e-tabular-pvt-btn {
            margin: $pivotgrid-margin-0 !important;
          }
          .e-pivot-button {
            width: $pivotgrid-width-100p !important;
            max-width: $pivotgrid-width-180 !important;
            min-width: $pivotgrid-width-80;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.e-tabular-row-btn {
              width: $pivotgrid-width-100p !important;
              max-width: $pivotgrid-width-180 !important;
              min-width: $pivotgrid-width-80;
            }
            @if ($skin-name == 'bootstrap4') {
              font-weight: $pivotview-font-weight-normal;
            }

            &:hover {
              background-color: $pivotgrid-hover-color;
              @if ($skin-name == 'bootstrap4') {
                background-color: $pivotgrid-bg-color;
                border-color: $pivotgrid-border-color;
              }

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

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

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

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

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

            .e-sort,
            .e-dropdown-icon,
            .e-pv-filter,
            .e-pv-filtered,
            .e-remove,
            .e-edit {
              color: $pivotgrid-button-icon-color !important;
              font-size: $pivotgrid-button-icon-size;
              margin-left: $pivotgrid-margin-4 !important;
              width: $pivotgrid-button-icon-wrapper-size;

              &:hover {
                color: $pivotgrid-icon-hover-color !important;
              }

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

            .e-sort {
              height: $pivotgrid-button-icon-size;
              width: $pivotgrid-width-18;

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

            .e-dropdown-icon {
              margin-top: $pivotgrid-margin-1;
            }
          }

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

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

      .e-group-values {
        height: $pivotgrid-height-100p;
        padding-bottom: $pivotgrid-padding-0;
      }

      .e-group-chart-values {
        align-items: center;
        display: flex;
        height: $pivotgrid-height-28;
      }

      .e-group-chart-values-drodown {
        font-size: $pivotview-font-icon-13;
        height: $pivotgrid-height-25;
      }
    }

    .e-axis-column .e-group-chart-columns-dropdown {
      font-size: $pivotview-font-icon-13;
      height: $pivotgrid-height-25;
      margin: $pivotgrid-group-chart-values-dropdown-margin;

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

      input.e-input {
        padding-bottom: $pivotgrid-padding-7;
      }
    }

    /* stylelint-disable */
    .e-chart-grouping-bar .e-axis-value {
      height: $pivotgrid-height-auto !important;
      border-bottom: $pivotgrid-border-size $pivotgrid-border-type $pivotgrid-default-border-color;

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

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

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

    .e-icons:not(.e-frame):not(.e-btn-icon):not(.e-sort):not(.e-dropdown-icon):not(.e-pv-filter):not(.e-pv-filtered):not(.e-remove):not(.e-edit):not(.e-drag):not(.e-selected-option-icon):not(.e-nav-arrow) {
      height: $pivotgrid-height-auto;
      width: $pivotgrid-width-auto;
    }

    .e-expand::before,
    .e-expand {
      font-size: $pivotgrid-expand-icon-fontsize !important;
    }

    .e-collapse::before,
    .e-collapse {
      font-size: $pivotgrid-collapse-icon-fonsize !important;
    }
    /* stylelint-enable */

    .e-expand,
    .e-collapse {
      cursor: pointer;
      display: inline-block;
      height: $pivotgrid-height-18;
      text-align: center;
      width: $pivotgrid-width-18;
      @if ($skin-name == 'bootstrap5') or ($skin-name == 'bootstrap5.3') or ($skin-name == 'FluentUI') or ($skin-name == 'Material3') or ($skin-name == 'tailwind') or ($skin-name == 'tailwind3') or ($skin-name == 'fluent2') {
        vertical-align: middle;
      }
    }

    /* stylelint-disable */
    th .e-expand,
    th .e-collapse {
      font-size: $pivotgrid-expcoldiv-fontsize !important;
      margin-left:  $pivotgrid-margin-0;
      @if ($skin-name == 'bootstrap4') {
        display: flex;
      }
    }
    /* stylelint-enable */

    .e-pivot-pager {
      padding: $pivotpager-padding;

      &.sf-pager {
        .e-pivot-pager-info-container{
          &.e-pagercontainer {
            font-size: unset;
          }
        }
      }

      &.e-pivot-pager-bottom {
        border-top: $pivotgrid-border-0;
      }

      &.e-pivot-pager-top {
        border-bottom: $pivotgrid-border-0;
      }

      .e-pivotview-vseparator {
        height: $pivotgrid-height-auto;
        border-left: $pivotpager-separator-border;
        margin: $pivotpager-v-separator-margin;
      }

      .e-pivot-pager-maindiv {
        display: flex;
        flex-direction: row;

        .e-pivot-pager-row-maindiv,
        .e-pivot-pager-column-maindiv {
          display: flex;
          flex-direction: column;
          width: $pivotgrid-width-50p;

          .e-icon-first,
          .e-icon-prev,
          .e-icon-next,
          .e-icon-last {
            font-size: $pivotpager-page-icon-size;
            padding: $pivotpager-page-icon-padding;

            /* stylelint-disable */
            @if ($skin-name =='material-dark') or ($skin-name =='material') {
              margin: $pivotgrid-margin-0 !important;
            }

            @if ($skin-name == 'Material3') {
              border: $pivotgrid-sort-select-border-color;
            }
          }

        /* stylelint-enable */
          .e-pivotview-text-div {
            display: flex;
            flex-direction: row;
          }

          .e-pivotview-row-pagerString,
          .e-pivotview-column-pagerString {
            color: $pivotpager-axis-title-font-color;
            font-size: $pivotpager-title-font-size;
            overflow: hidden;
            text-align: initial;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: $pivotgrid-width-50p;
          }

          .e-pivotview-row-size,
          .e-pivotview-column-size {
            color: $pivotpager-size-title-font-color;
            font-size: $pivotpager-title-font-size;
            overflow: hidden;
            text-align: end;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: $pivotgrid-width-50p;
          }

          .e-pivotview-text-div-1 {
            flex: none;

            .e-pagercontainer {
              margin-top: $pivotpager-page-container-marging-top;
              @if ($skin-name == 'material-dark') or ($skin-name == 'material') {
                margin: $pivotpager-page-container-marging-top $pivotgrid-margin-0 $pivotgrid-margin-0 $pivotgrid-margin-0;
              }

              @if ($skin-name == 'Material3') {
                border: $pivotgrid-sort-select-border-color;
              }

              &.e-pivot-pager-info-container,
              &.e-pager-dropdown {
                border-style: none;
                vertical-align: top;
              }
              &.e-pager-dropdown .e-input-group .e-input-group-icon {
                @if ($skin-name == 'Material3') {
                  margin-top: $pivotgrid-margin-0;
                  margin-bottom: $pivotgrid-margin-0;
                }
              }
              &.e-pager-dropdown .e-input-group {
                /* stylelint-disable */
                width: $pivotgrid-width-64 !important;
                /* stylelint-enable */
              }
            }

            .e-pager-dropdown {
              float: right;
            }
          }

          .e-pivot-row-of-string-maindiv,
          .e-pivot-column-of-string-maindiv {
            line-height: $pivotpager-single-title-line-height;
            @if ($skin-name == 'Material3') {
              /* stylelint-disable */
              color: $pivotpager-string-maindiv-font-color !important;
              /* stylelint-enable */
            }

            .e-pivotview-row-pagerNumber,
            .e-pivotview-column-pagerNumber {
              font-weight: $pivotpager-pager-number-font-weight;
            }
          }

          .e-pivot-row-pager-settings,
          .e-pivot-column-pager-settings {
            flex: none;

            &.e-pivot-pager-axis-container {
              display: inline-table;
            }

            .e-numeric {
              @if ($skin-name != 'fluent2') {
                vertical-align: top;
              }
              margin: $pivotpager-numeric-box-margin;

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

                &.wide-width {
                  width: $pivotgrid-width-64;
                }
                &.narrow-width {
                  width: $pivotgrid-width-50;
                }
              }
            }
          }

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

        &.e-pivot-pager-single-maindiv {
          .e-pivot-pager-row-maindiv,
          .e-pivot-pager-column-maindiv {
            flex-direction: row;
            width: $pivotgrid-width-100p;

            .e-pagercontainer {
              margin-top: $pivotgrid-margin-0;

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

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

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

            .e-pivot-pager-nav-container {
              @if ($skin-name == 'Material3') {
                border: $pivotgrid-sort-select-border-color;
              }
            }

            .e-pivotview-row-pagerString,
            .e-pivotview-column-pagerString {
              flex: auto;
              font-size: $pivotpager-single-title-font-size;
              line-height: $pivotpager-single-title-line-height;
              text-align: center;
            }

            .e-pivotview-text-div-1 {
              .e-pivotview-row-size,
              .e-pivotview-column-size {
                font-size: $pivotpager-single-title-font-size;
                line-height: $pivotpager-single-title-line-height;
                padding: $pivotgrid-padding-0 $pivotpager-single-size-title-padding $pivotgrid-padding-0 $pivotgrid-padding-0;
                width: $pivotgrid-width-inherit;
              }
            }
          }
        }
      }

      &.e-compact-view {
        .e-pivotview-vseparator {
          margin-top: $pivotpager-v-separator-margin-top;
        }

        .e-pivot-pager-maindiv {
          .e-pivot-pager-row-maindiv,
          .e-pivot-pager-column-maindiv {
            align-items: center;
            flex-direction: row;

            .e-pivotview-text-div,
            .e-pivotview-text-div-1 {
              align-items: center;
              display: flex;
              flex-direction: row;
              width: $pivotgrid-width-50p;

              .e-pagercontainer {
                margin-top: $pivotgrid-margin-0;

                @if ($skin-name =='material-dark') or ($skin-name =='material') {
                  margin-top: $pivotpager-touch-page-container-marging-top;
                }

                @if ($skin-name == 'Material3') {
                  border: $pivotgrid-sort-select-border-color;
                }
              }

              .e-pivotview-row-size,
              .e-pivotview-column-size {
                flex: auto;
                font-size: $pivotpager-single-title-font-size;
                line-height: $pivotpager-single-title-line-height;
                padding: $pivotgrid-padding-0 $pivotpager-single-size-title-padding $pivotgrid-padding-0 $pivotgrid-padding-0;
                text-align: end;
                width: $pivotgrid-width-inherit;
              }

              .e-pivotview-row-pagerString,
              .e-pivotview-column-pagerString {
                font-size: $pivotpager-single-title-font-size;
                line-height: $pivotpager-single-title-line-height;
                min-width: $pivotgrid-width-50;
                text-align: initial;
                width: $pivotgrid-width-inherit;
              }

              .e-pivot-row-pager-settings,
              .e-pivot-column-pager-settings {
                align-items: center;
                display: flex;
              }
            }

            .e-pivotview-text-div-1 .e-pagercontainer{
              margin-bottom: $pivotgrid-margin-0;
            }
          }

          &:not(.e-pivot-pager-single-maindiv) {
            .e-pivot-pager-row-maindiv,
            .e-pivot-pager-column-maindiv {
              &.e-page-size-disable {
                .e-pivotview-text-div {
                  width: $pivotgrid-width-50p;
                }
              }
            }
          }
        }

        &.e-rtl {
          .e-pivot-pager-maindiv {
            .e-pivot-pager-row-maindiv,
            .e-pivot-pager-column-maindiv {
              .e-pivotview-text-div,
              .e-pivotview-text-div-1 {
                .e-pivot-row-pager-settings,
                .e-pivot-column-pager-settings {
                  padding: $pivotgrid-padding-0 $pivotpager-single-size-title-padding $pivotgrid-padding-0 $pivotgrid-padding-0;
                }

                .e-pivotview-row-size,
                .e-pivotview-column-size {
                  padding: $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotpager-single-size-title-padding;
                }
              }
            }
          }
        }
      }

      &.e-device {
        .e-pivotview-hseparator {
          border-top: $pivotpager-separator-border;
          margin: $pivotpager-h-separator-margin;
          width: $pivotgrid-width-auto;
        }

        .e-pivot-pager-maindiv {
          flex-direction: column;

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

          .e-pivot-pager-row-maindiv,
          .e-pivot-pager-column-maindiv {
            width: $pivotgrid-width-100p;
          }

          &:not(.e-pivot-pager-single-maindiv) {
            .e-pagercontainer {
              margin-top: $pivotpager-adaptive-page-container-marging-top;

              @if ($skin-name == 'fabric') or ($skin-name == 'fabric-dark') or ($skin-name == 'highcontrast-light') or ($skin-name == 'highcontrast')  {
                margin-left: $pivotgrid-margin-0;
              }
            }
          }
        }

        /* stylelint-disable */
        @media (max-width: 400px) {
          .e-pivotview-row-size,
          .e-pivotview-column-size,
          .e-pivotview-row-pagerString,
          .e-pivotview-column-pagerString {
            min-width: $pivotgrid-width-10 !important;
          }
        }
        /* stylelint-enable */
      }

      &.e-rtl {
        .e-pivot-pager-maindiv {
          .e-pivot-pager-row-maindiv,
          .e-pivot-pager-column-maindiv {
            .e-pivot-row-pager-settings,
            .e-pivot-column-pager-settings {
              .e-numeric {
                margin: $pivotpager-adaptive-numeric-box-margin;
              }
            }

            .e-pager-dropdown {
              float: left;
            }
          }

          &.e-pivot-pager-single-maindiv {
            .e-pivot-pager-row-maindiv,
            .e-pivot-pager-column-maindiv {
              .e-pivotview-text-div-1 {
                .e-pivotview-row-size,
                .e-pivotview-column-size {
                  padding: $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotgrid-padding-0 $pivotpager-single-size-title-padding;
                }
              }
            }
          }
        }
      }

      .wide-width {
        width: $pivotgrid-width-64;
      }
      .narrow-width {
        width: $pivotgrid-width-50;
      }

      @media (max-width: 769px) {
        .e-pivot-pager-maindiv {
          .e-pagercontainer {
            display: inline-block;
          }
        }
      }
    }

    &.e-rtl {

      .e-expand::before,
      .e-collapse::before {
        margin-left: $pivotgrid-margin-0;
      }

      /* stylelint-disable */
      .e-grid .e-rowsheader,
      .e-grid .e-columnsheader {
        padding-right: $pivotgrid-padding-8 !important;
      }

      .e-rowcell.e-leftfreeze.e-firstcolumn {
        right: 0px;
      }

      .e-frozenheader>.e-table,
      .e-frozencontent>.e-table,
      .e-leftfreeze.e-freezeleftborder {
        border-left-width: $pivotgrid-border-1 !important;
        border-right: $pivotgrid-border-0;
      }

      /* stylelint-enable */
      .e-rowsheader .e-cellvalue {
        margin-left: $pivotgrid-margin-0;
        margin-right: $pivotgrid-margin-7;
      }

      .e-valuescontent {
        text-align: left;
      }

      .e-group-values,
      .e-group-columns,
      .e-group-filters,
      .e-group-all-fields {
        padding-left: $pivotgrid-padding-0;
        padding-right: $pivotview-axis-indent-padding;
      }

      .e-group-rows,
      .e-grouping-bar {

        .e-pvt-btn-div {
          padding-left: $pivotgrid-horizontal-button-padding;
          padding-right: $pivotgrid-padding-0;

          .e-pivot-button {
            .e-pvt-btn-content {
              margin-left: $pivotgrid-margin-4;
              text-align: right;
            }

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

      .e-grouping-bar {
        .e-left-axis-fields {
          border-left-width: $pivotgrid-border-0;
          border-right-width: $pivotgrid-border-size;
        }

        .e-right-axis-fields {
          border-left-width: $pivotgrid-border-size;
        }
      }

      .e-group-row {
        .e-group-rows {
          padding-left: $pivotgrid-padding-0;
          padding-right: $pivotview-axis-indent-padding;

          .e-pvt-btn-div {
            /* stylelint-disable */
            padding-left: $pivotgrid-horizontal-button-padding;
            padding-right: $pivotgrid-padding-0;

            .e-pivot-button {
              .e-pvt-btn-content {
                margin-left: $pivotgrid-margin-4;
                margin-right: $pivotgrid-margin-0;
                text-align: right;
              }

              .e-sort,
              .e-dropdown-icon,
              .e-pv-filter,
              .e-pv-filtered,
              .e-remove,
              .e-edit {
                padding-left: $pivotgrid-padding-0;
                padding-right: $pivotgrid-padding-7;
              }
            }
            /* stylelint-enable */
          }
        }
      }

      /* stylelint-disable */
      .e-stackedheadertext.e-cellvalue,
      .e-stackedheadercelldiv.e-cellvalue {
        padding-right: $pivotview-header-text-padding !important;
      }

      .e-sortfilterdiv {
        float: left;
      }

      th.e-headercell:first-child:not(.e-firstcell):not(.e-headercell.e-frozen-left-border) {
        border-left-width: $pivotgrid-border-1;
      }
      /* stylelint-enable */
    }

    &.e-device {
      /* stylelint-disable */
      .e-grid {
        min-width: $pivotgrid-width-300 !important;
      }

      .e-grouping-bar {
        min-width: $pivotgrid-width-300 !important;

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

        .e-group-chart-rows,
        .e-group-all-fields,
        .e-group-filters,
        .e-group-values,
        .e-group-columns {
          .e-pvt-btn-div {
            max-width: $pivotgrid-width-unset;
            width: $pivotgrid-width-100p;
            .e-pivot-button {
              width: $pivotgrid-width-100p !important;
              max-width: $pivotgrid-width-130 !important;
              min-width: $pivotgrid-width-80;
            }
          }
        }
      }
      .e-drillthrough-dialog {
        width: $pivotgrid-width-100p !important;
      }

      .e-group-row {
        .e-group-rows {
          .e-pvt-btn-div {
            .e-indent-div {
              width: $pivotgrid-width-0 !important;
            }

            .e-pivot-button {
              max-width: $pivotgrid-width-130;
            }
          }
        }
      }

      &.sf-pivotview {
        .e-group-row .e-group-rows .e-pvt-btn-div .e-pivot-button {
          max-width: $pivotgrid-width-130 !important;
        }
      }

      .e-scrollbar .e-movablescrollbar {
        min-height: $pivotgrid-height-1 !important;
        visibility: hidden;
      }
    }

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

    .e-pivotchart.e-chart {
      overflow: visible !important;
    }
    /* stylelint-enable */
  }

  .e-pivottooltipwrap,
  .e-pivottooltip-container {
    opacity: 1;
  }

  .e-drillthrough-dialog {
    visibility: hidden;
  }

  .e-pivottooltip {
    border-radius: $pivotgrid-default-border-radius;
    padding: $pivotgrid-tooltip-padding;
    text-align: initial;
  }

  .e-pivottooltip p {
    color: $pivotgrid-tooltip-fontcolor;
    display: inline-block;
    font-family: $pivotgrid-tooltip-fontfamily;
    font-size: $pivotgrid-tooltip-fontsize;
    line-height: $pivotgrid-tooltip-line-height-20;
    margin: $pivotgrid-margin-0;
  }

  .e-pivottooltip p.e-tooltipcontent {
    margin-left: $pivotgrid-margin-5;
  }

  .e-pivottooltiptemplate.e-tooltip-wrap {
    border: medium $pivotgrid-border-none transparent;
    max-width: $pivotgrid-width-none;
    min-width: $pivotgrid-width-0;
    opacity: 1;
  }

  .e-pivottooltiptemplate .e-tip-content {
    overflow-x: visible;
    padding: $pivotgrid-padding-unset;
    word-break: normal;
  }

  .e-rtl .e-pivottooltip p.e-tooltipcontent {
    margin-left: $pivotgrid-margin-0;
    margin-right: $pivotgrid-margin-5;
  }

  .e-content-placeholder.e-pivotview.e-placeholder-pivotview {
    background-size: 100% 200px;
  }
}

@include export-module('pivotview-bootstrap-icons') {
  .e-pivotview {
    .e-expand::before {
      content: '\e207';
    }

    .e-collapse::before {
      content: '\e95d';
    }

    &.e-rtl {
      .e-expand::before {
        content: '\e990';
      }
    }

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

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

    .e-pv-filtered::before {
      color: $pivotgrid-active-color;
      content: '\ebb2';
    }

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

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

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

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

    .e-export::before {
      content: '\e702';
    }

    .e-new-report::before {
      content: '\e709';
    }

    .e-save-report::before {
      content: '\e701';
    }

    .e-saveas-report::before {
      content: '\e703';
    }

    .e-rename-report::before {
      content: '\e704';
    }

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

    .e-sub-total::before {
      content: '\e710';
    }

    .e-grand-total::before {
      content: '\e708';
    }

    .e-toolbar-fieldlist::before {
      content: '\e434';
    }

    .e-toolbar-grid::before {
      content: '\e705';
    }

    .e-toolbar-chart::before {
      content: '\e70d';
    }

    .e-toolbar-formatting::before {
      content: '\e725';
    }

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

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

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

  .e-pivotview-pdf-export::before {
    content: '\e707';
  }

  .e-pivotview-excel-export::before {
    content: '\e70b';
  }

  .e-pivotview-csv-export::before {
    content: '\e712';
  }

  .e-pivotview-png-export::before {
    content: '\e715';
  }

  .e-pivotview-jpeg-export::before {
    content: '\e713';
  }

  .e-pivotview-svg-export::before {
    content: '\e716';
  }

  .e-mdx::before {
    content: '\e724';
  }

  .e-pivotview-select-icon::before {
    content: '\e614';
  }

  .e-pivotview-grid::before {
    content: '\e70f';
  }

  .e-pivotview-export::before {
    content: '\e702';
  }

  .e-pivotview-expand::before {
    content: '\e558';
  }

  .e-pivotview-collapse::before {
    content: '\e557';
  }

  .e-pivot-format-menu::before {
    content: '\e728';
  }

  .e-pivot-number-format-menu::before {
    content: '\e711';
  }

  .e-pivot-conditional-format-menu::before {
    content: '\e725';
  }

  .e-pivot-format-toolbar::before {
    content: '\e711';
  }

  .e-pivotview-group::before {
    content: '\e740';
  }

  .e-pivotview-ungroup::before {
    content: '\e741';
  }

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

@mixin button-wrap-styles {
  /* stylelint-disable */
  font-size: $pivotgrid-bigger-button-icon-size !important;
  height: $pivotgrid-bigger-button-icon-size !important;
  /* stylelint-enable */
  width: $pivotgrid-bigger-button-icon-wrapper-size;

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

@include export-module('pivotview-bigger') {
  .e-bigger .e-pivotview,
  .e-bigger.e-pivotview {
    .e-pivot-toolbar .e-pivot-toolbar-menu ul .e-menu-item {
      @if ($skin-name !='tailwind') and ($skin-name !='bootstrap5') {
        /* stylelint-disable */
        height: $pivotgrid-bigger-menubar-height !important;
        /* stylelint-enable */
      }

      .e-menu-icon {
        @if ($skin-name =='tailwind') {
          line-height: $pivotgrid-line-height-5xl;
        }
      }

      .e-caret {
        @if ($skin-name =='tailwind') {
          line-height: $pivotgrid-line-height-5xl;
        }
      }
    }

    /* stylelint-disable */

    .e-member-editor-dialog {
      .e-editor-search-container {

        @if ($skin-name =='tailwind3') {
          padding: $pivotgrid-padding-0 $pivotgrid-padding-24 $pivotgrid-padding-16;
        }

        .e-filter-sort {
          .e-member-sort {

            .e-sort-ascend-icon,
            .e-sort-descend-icon {
              font-size: $pivotview-font-icon-18;
            }
          }
        }

        .e-level-drop {
          .e-caret {
            font-size: $pivotgrid-bigger-button-icon-size !important;
          }
        }
      }

      .e-member-editor-outer-container ul {
        @if ($skin-name =='bootstrap4') {
          margin-left: -30px !important;
        }
      }

      &.e-olap-editor-dialog .e-member-editor-outer-container .e-treeview ul li .e-text-content {
        @if ($skin-name =='Material3') {
          padding-left: $pivotgrid-padding-30 !important;
        }
        @if ($skin-name =='tailwind3') {
          padding-left: $pivotview-olap-editor-text-content !important;
        }
        .e-icon-expandable, .e-icon-collapsible {
          @if ($skin-name =='Material3') {
            margin-left: -30px !important;
          }
          @if ($skin-name =='tailwind3') {
            margin-left: $pivotgrid-margin--25 !important;
          }
        }
      }

      &.e-rtl {
        .e-member-editor-outer-container ul {
          @if ($skin-name =='bootstrap4') {
            margin-right: -30px !important;
          }
        }
      }

      .e-dlg-content .e-member-editor-outer-container .e-member-editor-container-outer-div {
        height: $pivotgrid-member-filter-list-bigger-height;
      }
    }

    .e-member-editor-dialog {
      .e-filter-tab-container {
        .e-tab-header {
          .e-toolbar-item .e-icon-left+.e-tab-text {
            margin: $pivotgrid-margin-0 $pivotgrid-margin-0 $pivotgrid-margin-0 $pivotgrid-margin-6;
          }
        }

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

      &.e-node-limit.e-excel-filter .e-excelfilter .e-member-editor-container-outer-div {
        height: $pivotgrid-excelfilter-member-editor-node-limit-height !important;
      }

      .e-excelfilter {
        .e-member-editor-container-outer-div {
          height: $pivotgrid-excel-member-filter-bigger-height !important;
        }

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

      .e-label-filter,
      .e-value-filter {
        height: $pivotgrid-excel-filter-bigger-height;

        .e-filter-text-div {
          font-size: $pivotview-font-size-14;
        }

        .e-filter-option-container-1,
        .e-filter-option-container-2,
        .e-separator-div {
          padding-top: $pivotgrid-padding-24;
        }

        .e-between-text-div {
          padding: $pivotgrid-padding-10 $pivotgrid-padding-0;
        }
      }

      &.e-excel-filter {
        min-width: $pivotgrid-bigger-excel-dialog-min-width !important;
        min-height: $pivotgrid-member-editor-bigger-height !important;

        &.e-node-limit {
          min-height: $pivotgrid-member-editor-node-limit-bigger-height !important;
        }
      }
    }

    .e-pivot-format-dialog {
      .e-pivot-format-dialog-outer {
        @if ($skin-name == 'tailwind3') {
          padding: $pivotgrid-padding-0 $pivotgrid-padding-24;
        }
      }
    }

    .e-member-editor-dialog,
    .e-value-field-settings,
    .e-pivot-format-dialog {
      .e-dlg-header-content {
        .e-clear-filter-button.e-small {
          font-size: $pivotview-font-icon-14;
          top: 0;
        }
      }
    }

    .e-value-field-settings {
      max-height: $pivotgrid-height-520 !important;

      .e-dlg-content {
        padding: $pivotgrid-padding-0;
      }

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

      /* stylelint-enable */
      .e-pivot-format-dialog {
        .e-pivot-format-dialog-outer {
          padding: $pivotgrid-padding-0 $pivotgrid-padding-20 $pivotgrid-padding-10;
        }
      }

      .e-group-field-settings {

        .e-caption-input-text,
        .e-input-option-text,
        .e-checkbox-wrapper .e-label,
        .e-group-inerval-option-text,
        .e-base-field-option-text,
        .e-base-item-option-text,
        .e-type-option-text {
          font-size: $pivotview-font-size-14;
        }

        .e-group-input-container,
        .e-group-end-option-container,
        .e-group-interval-option-container {
          padding-top: $pivotgrid-padding-24;
        }

        .e-group-start-option-container .e-checkbox-wrapper {
          padding-top: $pivotgrid-grouping-bigger-padding-top;
        }
      }

      .e-field-name-title,
      .e-field-name-content {
        font-size: $pivotview-font-size-14;
        font-weight: $pivotview-font-weight-medium;
      }

      .e-caption-input-container,
      .e-type-option-container,
      .e-base-field-option-container,
      .e-base-item-option-container {
        padding-top: $pivotgrid-padding-24;
      }
    }

    /* stylelint-disable */
    .e-value-field-settings,
    .e-group-field-settings {

      .e-value-field-div-content,
      .e-group-field-div-content {
        padding: $pivotgrid-padding-0 $pivotgrid-editor-search-padding-size $pivotgrid-padding-10;
      }
    }
    /* stylelint-enable */
  }

  .e-bigger .e-pivotview-report-dialog,
  .e-bigger.e-pivotview-report-dialog {
    .e-pivotview-report-label {
      margin-top: $pivotgrid-bigger-report-label-margin-top;
    }
  }

  .e-bigger .e-pivotview,
  .e-bigger.e-pivotview {

    .e-chart-grouping-bar .e-axis-value {
      .e-group-chart-values-drodown {
        margin: $pivotgrid-group-chart-values-dropdown-margin-bigger;

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

    .e-chart-grouping-bar .e-axis-column {
      .e-group-chart-columns-dropdown {
        margin: $pivotgrid-group-chart-values-dropdown-margin-bigger;

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

        input.e-input {
          padding-bottom: $pivotgrid-padding-10;
          padding-top: $pivotgrid-padding-0;
        }
      }
    }

    /* stylelint-disable */
    .e-grid .e-rowsheader {
      line-height: $pivotgrid-line-height-initial !important;
      padding-left: $pivotgrid-padding-8 !important;
      @if ($skin-name == 'tailwind') {
        padding-left: $pivotgrid-padding-16 !important;
        padding-right: $pivotgrid-padding-12 !important;
      }
    }

    .e-grid .e-columnsheader {
      padding-left: $pivotgrid-padding-8 !important;
    }

    .e-grid .e-gridheader .e-headercell .e-rhandler {
      height: $pivotgrid-height-100p !important;
    }

    &.e-device {
      .e-grid.e-grid-min-height {
        .e-rowcell,
        .e-rowcell:first-child,
        .e-rowcell:last-child {
          padding-top: $pivotgrid-padding-0 !important;
          padding-bottom: $pivotgrid-padding-0 !important;
        }
      }
    }

    .e-stackedheadercelldiv,
    .e-stackedheadertext,
    .e-headertext,
    .e-rowsheader .e-cellvalue {
      font-size: $pivotview-bigger-grid-header-font-size !important;
      @if ($skin-name == 'bootstrap4') {
        font-size: $pivotview-bigger-grid-header-font-size !important;
      }
    }
    .e-bigger .e-stackedheadercelldiv {
      padding-left: $pivotgrid-padding-16 !important;
    }

    .e-grouping-bar {
      min-width: $pivotgrid-width-400;

      .e-all-fields-axis {
        height: $pivotgrid-height-36 !important;
        min-height: $pivotgrid-height-36 !important;

        .e-hscroll .e-scroll-nav, 
        .e-toolbar-items,
        .e-toolbar-item {
          min-height: $pivotgrid-height-36 !important;
        }
      }
      /* stylelint-enable */

      .e-pvt-btn-div {
        height: $pivotgrid-height-30;

        .e-pivot-button {
          height: $pivotgrid-height-30;
          padding: $pivotgrid-padding-0 $pivotgrid-padding-12;

          .e-pvt-btn-content {
            font-size: $pivotgrid-bigger-button-font-size;
            margin-right: $pivotgrid-margin-8;
            @if ($skin-name == 'bootstrap4') {
              margin-right: $pivotgrid-margin-0;
            }
          }

          .e-sort,
          .e-dropdown-icon,
          .e-pv-filter,
          .e-pv-filtered,
          .e-remove,
          .e-edit {
            @include button-wrap-styles;
          }

          .e-sort {
            height: $pivotgrid-bigger-button-icon-size;
          }

          .e-dropdown-icon {
            margin-top: $pivotgrid-margin-1;
          }
        }
      }

      .e-group-filters,
      .e-group-values,
      .e-group-columns,
      .e-group-rows,
      .e-group-all-fields {
        height: $pivotgrid-height-36;
        min-height: $pivotgrid-height-36;
        padding-left: $pivotview-axis-bigger-indent-padding;

        .e-draggable-prompt {
          @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
            font-size: $pivotgrid-bigger-content-font-size;
          }

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

      .e-group-values {
        height: $pivotgrid-height-100p;
      }

      .e-left-axis-fields,
      .e-right-axis-fields {
        .e-axis-nav-div {

          .e-left-nav-container,
          .e-right-nav-container {
            width: $pivotgrid-width-24;
          }
        }
      }
    }

    .e-group-rows {
      padding-left: $pivotview-axis-bigger-indent-padding;

      .e-pvt-btn-div {
        height: $pivotgrid-height-30;

        .e-pivot-button {
          height: $pivotgrid-height-30;
          line-height: $pivotgrid-bigger-button-line-height;
          padding: $pivotgrid-group-bigger-pivot-button-padding;

          .e-pvt-btn-content {
            font-size: $pivotgrid-bigger-button-font-size;
            margin-right: $pivotgrid-margin-8;
            @if ($skin-name == 'bootstrap4') {
              margin-right: $pivotgrid-margin-0;
            }
          }

          .e-sort,
          .e-dropdown-icon,
          .e-pv-filter,
          .e-pv-filtered,
          .e-remove,
          .e-edit {
            @include button-wrap-styles;
          }

          .e-sort {
            height: $pivotgrid-bigger-button-icon-size;
          }

          .e-dropdown-icon {
            margin-top: $pivotgrid-margin-1;
          }
        }
      }
    }

    /* stylelint-disable */
    .e-sortfilterdiv {
      @if ($skin-name == 'bootstrap4') or ($skin-name == 'bootstrap5') {
        font-size: $pivotview-font-icon-12 !important;
      }
      @if ($skin-name == 'tailwind') {
        font-size: $pivotview-font-icon-16 !important;
      }
      @if ($skin-name == 'Material3') {
        font-size: $pivotview-font-icon-14 !important;
      }
    }

    .e-stackedheadercelldiv,
    .e-stackedheadertext,
    .e-headertext,
    .e-rowsheader .e-cellvalue {
      color: $pivotview-grid-header-font-color !important;
      font-size: $pivotview-bigger-grid-header-font-size;
      font-weight: $pivotview-grid-header-font-weight !important;
    }

    .e-stackedheadertext.e-cellvalue,
    .e-stackedheadercelldiv.e-cellvalue {
      padding-left: $pivotview-touch-header-text-padding !important;
    }

    .e-grid .e-columnsheader {
      padding-right: $pivotgrid-padding-16 !important;
    }

    .e-rowcell {
      font-size: $pivotgrid-bigger-content-font-size !important;
      @if($skin-name == 'tailwind') {
        padding: $pivotgrid-padding-0 $pivotgrid-padding-12;
      }
    }

    &.e-rtl {
      .e-grid .e-rowsheader {
        padding-right: $pivotgrid-padding-10 !important;
      }

      .e-grid .e-columnsheader {
        padding-right: $pivotgrid-padding-16 !important;
      }

      .e-grid .e-columnsheader {
        padding-right: $pivotgrid-padding-8 !important;
      }

      .e-grouping-bar {

        .e-group-rows,
        .e-group-columns,
        .e-group-values,
        .e-group-filters,
        .e-group-all-fields {
          padding-left: $pivotgrid-padding-0;
          padding-right: $pivotview-axis-bigger-indent-padding;
        }
      }

      .e-group-row {
        .e-group-rows {
          padding-left: $pivotgrid-padding-0;
          padding-right: $pivotview-axis-bigger-indent-padding;
        }
      }

      .e-stackedheadertext.e-cellvalue,
      .e-stackedheadercelldiv.e-cellvalue {
        padding-right: $pivotgrid-padding-16 !important;
      }
    }

    @if ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') or ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind3'){
      .e-expand::before {
        font-size: $pivotgrid-expand-bigger-icon-fontsize !important;
      }

      .e-collapse::before {
        font-size: $pivotgrid-collapse-bigger-icon-fontsize !important;
      }
    }
    /* stylelint-enable */

    .e-pivot-pager,
    #{&}.e-pivot-pager.e-bigger {
      padding: $pivotpage-touch-padding;

      .e-pivotview-vseparator {
        margin: $pivotpager-touch-v-separator-margin;
      }

      .e-pivot-pager-maindiv {
        .e-pivot-pager-row-maindiv,
        .e-pivot-pager-column-maindiv {

          .e-icon-first,
          .e-icon-prev,
          .e-icon-next,
          .e-icon-last {
            font-size: $pivotpager-touch-page-icon-size;
            padding: $pivotpager-touch-page-icon-padding;
          }

          .e-pivot-row-of-string-maindiv,
          .e-pivot-column-of-string-maindiv {
            line-height: $pivotpager-touch-single-title-line-height;
          }

          .e-pivotview-row-pagerString,
          .e-pivotview-column-pagerString,
          .e-pivotview-row-size,
          .e-pivotview-column-size {
            font-size: $pivotpager-string-font-touch-size;
          }

          .e-pivotview-text-div-1 {
            .e-pagercontainer {
              margin-top: $pivotpager-touch-page-container-marging-top;
            }
          }

          .e-pivot-row-pager-settings,
          .e-pivot-column-pager-settings {
            .e-numeric {
              margin: $pivotpager-touch-numeric-boc-margin;
            }
          }
        }

        &.e-pivot-pager-single-maindiv {
          .e-pivot-pager-row-maindiv,
          .e-pivot-pager-column-maindiv {
            .e-pagercontainer {
              margin-top: $pivotgrid-margin-0;
            }

            .e-pivotview-row-pagerString,
            .e-pivotview-column-pagerString,
            .e-pivotview-row-size,
            .e-pivotview-column-size {
              font-size: $pivotpager-touch-single-title-font-size;
            }
          }
        }
      }

      &.e-compact-view {
        .e-pivot-pager-maindiv {
          .e-pivot-pager-row-maindiv,
          .e-pivot-pager-column-maindiv {
            .e-pagercontainer {
              margin-top: $pivotgrid-margin-0;

              @if ($skin-name =='material-dark') or ($skin-name =='material') {
                margin-top: $pivotpager-touch-page-container-marging-top;
              }
            }

            .e-pivotview-row-pagerString,
            .e-pivotview-column-pagerString,
            .e-pivotview-row-size,
            .e-pivotview-column-size {
              font-size: $pivotpager-touch-single-title-font-size;
            }
          }
        }
      }

      &.e-rtl {
        .e-pivot-pager-maindiv {
          .e-pivot-pager-row-maindiv,
          .e-pivot-pager-column-maindiv {
            .e-pivot-row-pager-settings,
            .e-pivot-column-pager-settings {
              .e-numeric {
                margin: $pivotpager-touch-numeric-boc-margin;
              }
            }
          }
        }
      }
    }
  }
}

$qrybldr-width: auto !default;
$qrybldr-height: auto !default;
$qrybldr-brdr: 1px solid !default;
$qrybldr-btngrp-brdr: none !default;
$grpcon-padding: 12px !default;
$qrybldr-device-diaplay: inline-block !default;
$group-action-margin: 12px !default;
$group-action-mrgntop: 5px !default;
$groupbody-paddingleft: 20px !default;
$rulecon-height: auto !default;
$rulecon-padding: 12px 0 12px 12px !default;
$hrmode-ruledlt-mrgn: 12px !default;
$vrmode-ruledlt-mrgnpos: absolute !default;
$qrybldr-rulelist-grcon-float: right !default;
$qrybldr-rulelist-grcon-width: 100% !default;
$qrybldr-button-hide: none !default;
$qrybldr-field: left !default;
$ruledelete-margin: 12px !default;
$radio-wrapper-margin: 15px !default;
$qrybldr-group-container-margin-top: 12px !default;
$qrybldr-group-container-margin-left: 0 !default;
$qrybldr-posn-relative: relative !default;
$rule-boxshadow:  none !default;
$before-border-height: calc(50% + 14px) !default;
$after-border-height: calc(50% + 8px) !default;
$qrybldr-add-icon: '\e95c   ' !default;
$qrybldr-delete-icon: '\e96c' !default;
$qrybldr-rule-list-first-left: -12px !default;
$qrybldr-rule-list-first-right: -12px !default;
$qrybldr-rule-list-before-top: -10px !default;
$qrybldr-rule-list-after-border: 0 0 0 2px !default;
$qrybldr-rule-list-before-border: 0 0 2px 2px !default;
$qrybldr-rule-list-rtl-after-border: 0 2px 0 0 !default;
$qrybldr-rule-list-rtl-before-border: 0 2px 2px 0 !default;
$qrybldr-rule-list-border-style: dotted !default;
$bigger-group-action-margin: 15px !default;
$bigger-groupbody-paddingleft: 24px !default;
$bigger-hrmode-ruledlt-mrgn: 15px !default;
$bigger-rulecon-padding: 15px 0 15px 15px !default;
$device-rule-padding: 15px 0 0 15px !default;
$device-rule-padding-right: 15px !default;
$bigger-ruledelete-marginleft: 7.5px !default;
$qrybldr-bg-color: $grey-base !default;
$qrybldr-color: $grey-dark-font !default;
$qrybldr-brdr-color: $grey-88 !default;
$qrybldr-btngroup-active-bgcolor: $brand-primary !default;
$qrybldr-btngroup-active-color: $brand-primary-font !default;
$groupborder-color: $grey-88 !default;
$qrybldr-rule-list-border-color: $grey-dd !default;
$groupfill-color: $grey-darker !default;
$groupfill-bgcolor: $groupfill-color !default;
$qrybldr-rule-border: 1px solid !default;
$qrybldr-rule-list-after-height: calc(100% - 17px) !default;
$qrybldr-rule-list-height: 25px !default;
$qrybldr-rule-list-top: 17px !default;
$qrybldr-nav-width: 10px !default;
$qrybldr-rule-container-after-height: calc(50% + 6px) !default;
$qrybldr-rule-container-after-top: calc(50% - 3px) !default;
$qrybldr-grpcon-brder-left: -11px !default;
$bigger-rule-list-first-top: -14px !default;
$qrybldr-rulecont-margin: -1px !default;
$ruledelete-shadow: none !default;
$device-rulecon-padding: 15px !default;
$qrybldr-rulelist: 12px 0 12px 0 !default;
$qrybldr-bigger-rulelist: 15px 0 15px 0 !default;
$qrybldr-add-mrgn-btm: 2px !default;
$device-rulecon-right-padding: 10px !default;
$qrybldr-summary-padding: 12px !default;
$qrybldr-summary-btn-padding: 12px !default;
$qrybldr-bigger-summary-padding: 15px !default;
$qrybldr-bigger-summary-btn-padding: 15px !default;
$qrybldr-summary-text-width: 100% !default;
$qrybldr-clspe-rule-pos: absolute !default;
$qrybldr-btngrp-shadow: none !default;
$qrybldr-multi-width: 190px !default;
$qrybldr-device-value-width: 100% !default;
$qrybldr-btngroup-display: inline-block !default;
$qrybldr-grpcon-aftrbrder-left: -11px !default;
$after-ruleborder-height: calc(50% + 10px) !default;
$qrybldr-val-error-bg-color: #fcdbe4 !default;
$qrybldr-val-error-color: #f44336 !default;
$qrybldr-val-error-border: 8px solid !default;
$biggerafter-ruleborder-height: calc(50% + 12px) !default;
$qrybldr-bigger-rule-list-before-top: -12px !default;
$qrybldr-rule-list-first-top: -11px !default;
$qrybldr-collapse-rule-padding: 0 14px !default;
$qrybldr-multi-maxwidth: 200px !default;
$qrybldr-device-multi-maxwidth: 100% !default;
$qrybldr-btn-left: 10px !default;
$qrybldr-touch-btn-left: 14px !default;
$qrybldr-collapse-font-size: 20px !default;
$qrybldr-collapse-padding: 5px !default;
$qrybldr-collapse-box-shadow: -1px 1px 4px 0 rgba($shadow, .12) !default;
$qrybldr-collapse-brdr-color: $grey-cc !default;
$qrybldr-collapse-txtarea-margin: 8px !default;
$qrybldr-brdr-radius: 6px !default;
$qrybldr-summary-line-height: 1.5em !default;
$qrybldr-smrytxt-font-size: 14px !default;
$qrybldr-bigger-smrytxt-font-size: 16px !default;
$qrybldr-spinner-right: 5px !default;
$qrybldr-spinner-left: auto !default;
$qrybldr-rtl-spinner-right: auto !default;
$qrybldr-rtl-spinner-left: 5px !default;
$qrybldr-btngrp-brdr-radius: 4px !default;
$qrybldr-drag-icon-font-size: 14px !default;
$qrybldr-drag-icon-bigger-font-size: 16px !default;
$qrybldr-drag-bg-color: $groupfill-bgcolor !default;
$qrybldr-drag-grp-icon-pad: 10px 10px 10px 2px !default;
$qrybldr-drag-grp-list-heg: 29px !default;
$qrybldr-drag-grp-big-list-heg: 35px !default;
$qrybldr-drag-grp-big-icon-pad: 10px 10px 10px 5px !default;
$qryblr-drag-icon-color: $grey-dark-font !default;

$qryblr-zero-padding-margin: 0 !default;
$qrybldr-bigger-drag-clone-padding: 24px 5px !default;
$qrybldr-bigger-drag-clone-margin: 15px !default;
$qrybldr-dragclone-value-margin-top: 10px !default;
$qrybldr-dragclone-drag-rule-padding: 18px 5px !default;
$qrybldr-dragclone-rule-padding: 10px !default;
$qrybldr-dragclone-qb-rule-padding: 15px 3px 15px 11px !default;
$qrybldr-dragclone-qb-rule-margin: 1px !default;
$qrybldr-drag-rule-bottom-line-border: 2px solid $qrybldr-btngroup-active-bgcolor !default;
$qrybldr-zero-border-radius: 0 !default;
$qrybldr-group-body-rule-margin: 12px !default;
$qrybldr-group-container-not-padding: 12px !default;
$qrybldr-group-container-not-border-radius: 4px !default;
$qrybldr-group-container-not-border: 1px solid !default;
$qrybldr-summary-line-height: 1.5em !default;
$qry-multi-list-margin-top: 10px !default;
$qry-multi-list-margin-bottom: 10px !default;
$qry-multi-list-margin-left: 3px !default;
$qry-multi-list-margin-right: 10px !default;
$qry-toggle-btn-margin-right: 6px !default;
$qry-multi-init-group-height: 40px !default;
$qrybldr-vertical-width: auto !default;
$qrybldr-rule-value-width: 200px !default;
$qrybldr-btn-group-width: 8px !default;
$qrybldr-group-container-height: calc(50% - 8px) !default;
$qrybldr-group-container-after-height: calc(50% + 17px) !default;
$qrybldr-group-container-after-top: calc(50% - 17px) !default;
$qry-btn-group-before-left: -12px !default;
$qry-btn-rule-group-before-left: -12px !default;
$qry-btn-rule-list-before-left: -11.2px !default;
$qryblder-border: 1px !default;

@mixin fluent2-small-round-btn {
  @if $theme-name == 'fluent2' {
    height: $qrybldr-small-round-btn-height;
    width: $qrybldr-small-round-btn-width;
    border-radius: $qrybldr-small-round-btn-border-radius;
    border-color: transparent;
    line-height: $qrybldr-small-round-btn-line-height;
  }
}

@mixin fluent2-bigger-small-round-btn {
  @if $theme-name == 'fluent2' {
    height: $qrybldr-bigger-small-round-btn-height;
    width: $qrybldr-bigger-small-round-btn-width;
    border-radius: $qrybldr-bigger-small-round-btn-border-radius;
    border-color: transparent;
    line-height: $qrybldr-bigger-small-round-btn-line-height;
  }
}
@include export-module('querybuilder-layout') {
  .e-query-builder {
    border: $qrybldr-brdr;
    border-radius: $qrybldr-brdr-radius;
    height: $qrybldr-height;
    width: $qrybldr-width;

    & .e-rule-field {
      user-select: none;
    }

    & .e-multiselect .e-qb-spinner .e-spinner-inner {
      left: $qrybldr-spinner-left;
      right: $qrybldr-spinner-right;
    }

    & .e-cloneproperties.e-group-body {
      padding: $qryblr-zero-padding-margin !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-dragclone.e-cloneproperties {
      & .e-group-container,
      & .e-rule-container {
        @if $skin-name == 'fluent2' {
          box-shadow: $shadow-md;
        }
        background: $qrybldr-drag-bg-color;
      }

      & .e-rule-value-delete {
        margin-top: $qrybldr-dragclone-value-margin-top;
      }

      & .e-drag-qb-rule {
        padding: $qrybldr-dragclone-drag-rule-padding;
        @if $skin-name == 'fluent2' {
          color: $icon-color;
        }
      }
    }

    & .e-dragclone,
    & .e-drag-qb-rule {
      cursor: move;
    }

    & .e-dragclone .e-rule-field {
      display: flex;
      padding: $qrybldr-dragclone-rule-padding;
    }

    & .e-dragclone.e-notallowedcur,
    & .e-dragclone.e-notallowedcur .e-drag-qb-rule {
      cursor: not-allowed !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-group-body .e-drag-qb-rule,
    & .e-dragclone .e-drag-qb-rule {
      padding: $qrybldr-dragclone-qb-rule-padding;
      vertical-align: middle;
      font-size: $qrybldr-drag-icon-font-size;
      color: $qryblr-drag-icon-color;
    }

    & .e-group-header .e-drag-qb-rule {
      margin: $qrybldr-dragclone-qb-rule-margin;
      padding: $qrybldr-drag-grp-icon-pad !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-drag-rule-bottom-line {
      border-bottom: $qrybldr-drag-rule-bottom-line-border !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-drag-rule-top-line {
      border-top: $qrybldr-drag-rule-bottom-line-border !important; /* stylelint-disable-line declaration-no-important */
    }

    &.e-rtl {
      & .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small {
        &.e-not {
          @if $skin-name == 'Material3' {
            border: $qryblder-border solid $secondary-outline-border;
          }
          @else {
            border-bottom-right-radius: $qrybldr-zero-border-radius;
            border-top-right-radius: $qrybldr-zero-border-radius;
          }
        }

        &.e-readonly-and {
          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
        }
      }

      & .e-btn-group.e-rtl .e-btn.e-btngroup-or-lbl.e-small {
        &.e-readonly-or-not {
          border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
          border-top-right-radius: $qrybldr-btngrp-brdr-radius;
        }

        &.e-readonly-or {
          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
        }
      }

      & .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
        @if $skin-name == 'Material3' {
          border: $qryblder-border solid $secondary-outline-border;
          border-bottom-right-radius: $qrybldr-btn-rtl-right-radius;
          border-bottom-left-radius: $qrybldr-btn-rtl-left-radius;
          border-top-left-radius: $qrybldr-btn-rtl-left-radius;
          border-top-right-radius: $qrybldr-btn-rtl-right-radius;
        }
        @else {
          border-bottom-left-radius: $qrybldr-zero-border-radius;
          border-top-left-radius: $qrybldr-zero-border-radius;
          border-top-right-radius: $qrybldr-zero-border-radius;
        }

        &.e-not-readonly {
          border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
        }
      }

      & .e-multiselect .e-qb-spinner .e-spinner-inner {
        left: $qrybldr-rtl-spinner-left;
        right: $qrybldr-rtl-spinner-right;
      }

      &.e-device .e-group-body .e-rule-container .e-rule-value-delete,
      & .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
        text-align: $qrybldr-field;
      }

      &.e-device .e-group-body .e-rule-container .e-rule-delete,
      & .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete {
        padding-left: $qrybldr-btn-left;
      }

      &.e-device .e-rule-field .e-drag-qb-rule:not(.e-hidden) {
        display: block;
      }

      & .e-group-header {
        & .e-group-action .e-btn {
          margin-left: $qrybldr-group-container-margin-left;
          margin-right: $group-action-margin;
          @if $skin-name == 'tailwind' {
            font-size: 20px;
          }
        }
      }

      & .e-horizontal-mode .e-rule-delete {
        margin-left: $qrybldr-group-container-margin-left;
        margin-right: $ruledelete-margin;
      }

      & .e-group-body {
        padding-left: $qrybldr-group-container-margin-left;
        padding-right: $groupbody-paddingleft;
      }

      & .e-rule-list > ::before {
        border-width: $qrybldr-rule-list-rtl-before-border;
      }

      & .e-rule-list > .e-group-container:first-child {
        margin-top: $qryblr-zero-padding-margin;
      }

      & .e-rule-list > ::after,
      & .e-rule-list > ::before {
        right: $qrybldr-rule-list-first-right;
      }

      & .e-rule-list > ::after {
        border-width: $qrybldr-rule-list-rtl-after-border;
      }

      & .e-rule-list .e-group-container::before {
        right: $qrybldr-grpcon-brder-left;
      }

      & .e-rule-list > .e-group-container {
        padding-right: $qrybldr-group-container-margin-left;
      }
    }

    & .e-group-container,
    & .e-rule-container {
      position: $qrybldr-posn-relative;
    }

    & .e-rule-list > :first-child::before {
      top: $qrybldr-rule-list-first-top;
    }

    & .e-rule-list > :last-child::after {
      display: $qrybldr-button-hide;
    }

    & .e-rule-list > ::before {
      border-width: $qrybldr-rule-list-before-border;
      height: $qrybldr-rule-list-height;
      top: $qrybldr-rule-list-before-top;
    }

    & .e-rule-list > ::after,
    & .e-rule-list > ::before {
      @if $theme-name == 'fluent2' {
        border-style: dotted;
      }
      @else {
        border-style: $qrybldr-rule-list-border-style;
      }
      content: '';
      left: $qrybldr-rule-list-first-left;
      position: $vrmode-ruledlt-mrgnpos;
      width: $qrybldr-nav-width;
    }

    & .e-rule-list > ::after {
      border-width: $qrybldr-rule-list-after-border;
      height: $qrybldr-rule-list-after-height;
      top: $qrybldr-rule-list-top;
    }

    & .e-rule-list > .e-rule-container::before {
      height: $after-border-height;
    }

    & .e-rule-list > .e-rule-container:not(:first-child)::before {
      height: $after-ruleborder-height;
    }

    & .e-rule-list > .e-rule-container::after {
      height: $qrybldr-rule-container-after-height;
      top: $qrybldr-rule-container-after-top;
    }

    & .e-rule-list > .e-group-container:first-child {
      margin-top: $qryblr-zero-padding-margin;
    }

    & .e-rule-list .e-group-container::before {
      left: $qrybldr-grpcon-brder-left;
    }

    & .e-rule-list .e-group-container::after {
      left: $qrybldr-grpcon-aftrbrder-left;
    }

    & .e-group-header {
      & .e-group-action .e-btn {
        margin-left: $group-action-margin;
      }

      & .e-qb-toggle.e-btn.e-small {
        @if $skin-name == 'Material3' {
          border: $qryblder-border solid $secondary-outline-border;
          border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
          border-bottom-left-radius: $qrybldr-toggle-btn-left-radius;
          border-top-left-radius: $qrybldr-toggle-btn-left-radius;
          border-top-right-radius: $qrybldr-btngrp-brdr-radius;
        }
        @else {
          border-bottom-right-radius: $qrybldr-zero-border-radius;
          border-radius: $qrybldr-btngrp-brdr-radius;
          border-top-right-radius: $qrybldr-zero-border-radius;
        }

        &.e-not-readonly {
          @if $skin-name == 'Material3' {
            border: $qryblder-border solid $secondary-outline-border;
            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
          }
          @else {
            border-bottom-right-radius: $qrybldr-zero-border-radius;
            border-top-right-radius: $qrybldr-zero-border-radius;
          }
          pointer-events: none;
        }

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

      & .e-btn-group {
        border: $qrybldr-btngrp-brdr;
        box-shadow: $qrybldr-btngrp-shadow;
        display: $qrybldr-btngroup-display;

        & .e-btn.e-small {
          @if $theme-name == 'fluent2' {
            font-size: $qry-bldr-btn-small-font-size;
            line-height: $qry-bldr-btn-small-line-height;
            padding: $qry-bldr-btn-small-padding;
          }
        }
      }

      & .e-btn.e-btngroup-and-lbl.e-small {
        @if $skin-name == 'Material3' {
          border: 1px solid $secondary-outline-border;
        }
      }

      & .e-btn.e-btngroup-and-lbl.e-small {
        &.e-not {
          @if $skin-name == 'Material3' {
            border: $qryblder-border solid $secondary-outline-border;
            border-bottom-right-radius: $qrybldr-btn-rtl-left-radius;
            border-top-right-radius: $qrybldr-btn-rtl-left-radius;
          }
          border-bottom-left-radius: $qrybldr-zero-border-radius;
          border-top-left-radius: $qrybldr-zero-border-radius;
        }

        &.e-readonly-and {
          border-bottom-right-radius: $qrybldr-btngrp-brdr-radius;
          border-top-right-radius: $qrybldr-btngrp-brdr-radius;
        }

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

      & .e-btn.e-btngroup-or-lbl.e-small {
        @if $skin-name == 'Material3' {
          border: $qryblder-border solid $secondary-outline-border;
        }
        @else {
          border-bottom-left-radius: $qrybldr-zero-border-radius;
          border-top-left-radius: $qrybldr-zero-border-radius;
        }

        &.e-readonly-or-not {
          border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
          border-top-left-radius: $qrybldr-btngrp-brdr-radius;
        }

        &.e-readonly-or {
          @if $skin-name == 'Material3' {
            border: $qryblder-border solid $secondary-outline-border;
            border-bottom-left-radius: $qrybldr-btngrp-brdr-radius;
            border-top-left-radius: $qrybldr-btngrp-brdr-radius;
          }
          @else {
            border-bottom-left-radius: $qrybldr-zero-border-radius;
            border-top-left-radius: $qrybldr-zero-border-radius;
          }
        }

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

      & .e-group-action {
        display: $qrybldr-device-diaplay;
        margin-top: $group-action-mrgntop;
      }

      & .e-dropdown-btn.e-add-btn,
      .e-deletegroup,
      .e-clone-grp-btn,
      .e-lock-grp-btn {
        margin-bottom: $qrybldr-add-mrgn-btm;
        @if $skin-name == 'Material3' {
          box-shadow: none;
        }

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

      & button.e-button-hide {
        display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
      }

      &.e-btn.e-small.e-round {
        box-shadow: $ruledelete-shadow;
      }

      & .e-btn.e-small.e-round {
        @include fluent2-small-round-btn;
      }

      & .e-group-action .e-readonly {
        display: inline-block;
        visibility: hidden;
      }
    }

    & .e-rule-list .e-group-container {
      margin-left: $qrybldr-group-container-margin-left;
      margin-top: $qrybldr-group-container-margin-top;
      width: $qrybldr-rulelist-grcon-width;
    }

    & .e-rule-list {
      padding: $qrybldr-rulelist;
      padding-bottom: $qryblr-zero-padding-margin;
    }

    & .e-group-container {
      padding: $grpcon-padding;
    }

    & .e-rule-container {
      border: $qrybldr-rule-border;
      border-radius: $qrybldr-brdr-radius;
    }

    & .e-rule-list > .e-group-container {
      padding: $qryblr-zero-padding-margin;
      padding-bottom: $grpcon-padding;
    }

    & .e-group-container .e-rule-list > .e-group-container {
      padding-bottom: $qryblr-zero-padding-margin;
    }

    & .e-group-body {
      padding-left: $groupbody-paddingleft;

      & .e-rule-container {
        box-shadow: $rule-boxshadow;
        height: $rulecon-height;
        margin-top: $qrybldr-rulecont-margin;
        padding-right: $hrmode-ruledlt-mrgn;

        &.e-prev-joined-rule {
          border-bottom: $qryblr-zero-padding-margin;
          border-bottom-left-radius: $qrybldr-zero-border-radius;
          border-bottom-right-radius: $qrybldr-zero-border-radius;
        }

        &.e-joined-rule {
          border-top-left-radius: $qrybldr-zero-border-radius;
          border-top-right-radius: $qrybldr-zero-border-radius;
          @if $skin-name == 'Material3' {
            border-top-style: $qrybldr-joined-rule-border-style;
          }
          @else {
            border-top-style: $qrybldr-rule-list-border-style;
          }
          border-top-width: $qryblder-border;
          margin-top: $qryblr-zero-padding-margin;
        }

        &.e-separate-rule {
          margin-top: $grpcon-padding;
        }

        & .e-rule-filter,
        & .e-rule-sub-filter {
          padding: $rulecon-padding;
          width: $qrybldr-width;
        }

        & .e-rule-value .e-control-wrapper.e-numeric:not(:first-child),
        & .e-rule-value .e-control-wrapper.e-date-wrapper:not(:first-child),
        & .e-rule-value .e-control-wrapper.e-input-group:not(:first-child) {
          float: $qrybldr-rulelist-grcon-float;
          margin-top: $group-action-margin;
        }

        & .e-rule-value .e-multi-select-wrapper {
          min-width: $qrybldr-multi-width;
        }

        & .e-rule-value .e-multiselect,
        & .e-rule-value .e-multi-select-wrapper {
          max-width: $qrybldr-multi-maxwidth;
        }

        & .e-rule-value.e-custom-value {
          width: $qrybldr-rule-value-width;
        }

        & .e-operator,
        & .e-value {
          padding: $rulecon-padding;

          & .e-radio-wrapper {
            margin-right: $radio-wrapper-margin;
          }
        }
      }

      & .e-horizontal-mode .e-rule-delete,
      & .e-horizontal-mode .e-lock-rule,
      & .e-horizontal-mode .e-clone-rule {
        display: $qrybldr-device-diaplay;
        margin-left: $ruledelete-margin;
      }

      & .e-rule-container button.e-button-hide {
        display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-horizontal-mode .e-rule-filter,
      & .e-horizontal-mode .e-rule-sub-filter,
      & .e-horizontal-mode .e-rule-operator,
      & .e-horizontal-mode .e-rule-value,
      & .e-horizontal-mode .e-rule-value-delete {
        display: $qrybldr-device-diaplay;
      }

      & .e-rule-value {
        &.e-hide {
          display: none;
        }
      }

      & .e-rule-value {
        &.e-show {
          display: inline-block;
        }
      }

      & .e-rule-container.e-vertical-mode .e-rule-delete {
        margin-bottom: $grpcon-padding;
        @if $skin-name != 'Material3' {
          padding-right: $device-rulecon-right-padding;
        }
        right: $qryblr-zero-padding-margin;
      }

      & .e-rule-field,
      & .e-rule-delete,
      & .e-lock-rule,
      & .e-clone-rule {
        &.e-btn.e-small.e-round {
          box-shadow: $ruledelete-shadow;
        }

        & .e-btn.e-small.e-round {
          @include fluent2-small-round-btn;
        }
      }

      & .e-vertical-mode .e-removerule.e-rule-delete {
        box-shadow: $ruledelete-shadow;
        right: $qryblr-zero-padding-margin;

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

    & .e-dropdown-btn {
      box-shadow: $rule-boxshadow;
    }

    &.e-device .e-group-body .e-rule-container .e-rule-filter,
    &.e-device .e-group-body .e-rule-container .e-rule-sub-filter {
      padding: $device-rulecon-padding;
    }

    &.e-device .e-removerule.e-rule-delete {
      box-shadow: $ruledelete-shadow;

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

    &.e-device .e-group-body .e-rule-container .e-rule-value .e-multiselect,
    &.e-device .e-group-body .e-rule-container .e-rule-value .e-multi-select-wrapper,
    & .e-group-body .e-rule-container.e-vertical-mode .e-rule-value .e-multi-select-wrapper,
    & .e-group-body .e-rule-container.e-vertical-mode .e-rule-value .e-multiselect {
      max-width: $qrybldr-device-multi-maxwidth;
    }

    &.e-device .e-group-body .e-rule-container .e-rule-value-delete,
    & .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
      text-align: $qrybldr-rulelist-grcon-float;
    }

    & .e-group-body .e-rule-container.e-vertical-mode .e-lock-rule,
    & .e-group-body .e-rule-container.e-vertical-mode .e-clone-rule,
    &.e-device .e-group-body .e-rule-container .e-lock-rule,
    &.e-device .e-group-body .e-rule-container .e-clone-rule {
      margin-bottom: $qrybldr-group-body-rule-margin;
    }

    & .e-group-body .e-rule-delete,
    & .e-group-body .e-lock-rule,
    & .e-group-body .e-clone-rule {
      margin-left: $qrybldr-group-body-rule-margin;
    }

    & .e-delete-icon::before {
      content: $qrybldr-delete-icon;
    }

    & .e-edit-rule.e-btn.e-small {
      box-shadow: $ruledelete-shadow;
    }

    & .e-edit-rule {
      right: $qryblr-zero-padding-margin;
    }

    & .e-collapse-rule {
      @if $skin-name == 'Material3' {
        border: $qrybldr-collapse-brdr;
      }
      @else {
        border: $qrybldr-brdr;
      }
      border-right: 0;
      border-top: 0;
      box-shadow: $qrybldr-collapse-box-shadow;
      font-size: $qrybldr-collapse-font-size;
      padding: $qrybldr-collapse-padding;
      position: $qrybldr-clspe-rule-pos;
      right: $qryblr-zero-padding-margin;
      top: $qryblr-zero-padding-margin;
      @if $skin-name == 'tailwind3' {
        border: none;
        right: $qry-bldr-collapse-rule-right;
        border-radius: $qry-bldr-collapse-rule-border-radius;
      }
    }

    & .e-summary-text {
      border-style: none;
      font-family: $font-family;
      font-size: $qrybldr-smrytxt-font-size;
      line-height: $qrybldr-summary-line-height;
      padding: $qrybldr-summary-padding;
      resize: none;
      width: $qrybldr-summary-text-width;
    }

    & .e-summary-btndiv {
      padding: $qrybldr-summary-btn-padding;
      text-align: $qrybldr-rulelist-grcon-float;
    }

    & .e-rule-list .e-rule-container.e-vertical-mode,
    &.e-device .e-rule-list .e-rule-container {
      padding-right: $device-rule-padding-right;

      & .e-rule-filter,
      & .e-rule-sub-filter,
      & .e-operator,
      & .e-value,
      & .e-rule-value-delete  {
        padding: $device-rule-padding;
      }
    }

    &.e-multi-connector {
      & .e-rule-list > .e-btn-group {
        margin-top: $qry-multi-list-margin-top;
        margin-bottom: $qry-multi-list-margin-bottom;
      }

      & .e-qb-toggle {
        margin-left: $qry-multi-list-margin-left;
        margin-right: $qry-multi-list-margin-right;
      }

      & .e-group-container:not(:first-child) {
        padding: $qrybldr-group-container-not-padding !important; /* stylelint-disable-line declaration-no-important */
        border: $qrybldr-group-container-not-border;
        margin-top: $qryblr-zero-padding-margin;
        border-radius: $qrybldr-group-container-not-border-radius;
      }

      & .e-rule-list > .e-group-container:first-child {
        padding: $qrybldr-group-container-not-padding !important; /* stylelint-disable-line declaration-no-important */
        border: $qrybldr-group-container-not-border;
        border-radius: $qrybldr-group-container-not-border-radius;
      }

      & .e-group-container:not(:first-child)::before,
      & .e-rule-list > .e-group-container:first-child::before{
        height: $qrybldr-group-container-height;
      }

      & .e-group-container::after {
        height: $qrybldr-group-container-after-height;
        top: $qrybldr-group-container-after-top;
      }

      & .e-btn-group + .e-group-container {
        margin-top: $qryblr-zero-padding-margin;
      }

      & .e-group-action .e-btn:first-child {
        margin-left: $qryblr-zero-padding-margin;
      }

      & .e-qb-toggle-btn {
        margin-right: $qry-toggle-btn-margin-right !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-btn-group {
        & .e-btn.e-small {
          @if $theme-name == 'fluent2' {
            font-size: $qry-bldr-btn-grp-font-size;
            line-height: $qry-bldr-btn-grp-line-height;
            padding: $qry-bldr-btn-grp-padding;
          }
        }
      }

      & .e-multi-connector-init-group {
        height: $qry-multi-init-group-height;
      }

      & .e-btn-group::after,
      & .e-btn-group::before {
        left: $qry-btn-group-before-left;
        width: $qrybldr-btn-group-width;
      }

      & .e-rule-list .e-group-container::before,
      & .e-rule-list .e-group-container::after {
        left: $qry-btn-rule-group-before-left !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-rule-list .e-btn-group::before,
      & .e-rule-list .e-btn-group::after {
        left: $qry-btn-rule-list-before-left !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-qb-toggle-btn {
        box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-btn-group + .e-rule-container {
        margin-top: $qryblr-zero-padding-margin !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-top,
  .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-top {
    border-bottom: $qrybldr-val-error-border;
  }

  .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-bottom,
  .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-bottom {
    border-top: $qrybldr-val-error-border;
  }

  .e-qb-ddt.e-ddt .e-prevent .e-fullrow {
    cursor: default !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-dropdown-popup {

    & .e-addgroup {
      float: $qrybldr-rulelist-grcon-float;
    }

    & ul .e-item.e-button-hide {
      display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-addrule.e-add-icon::before,
  .e-addgroup.e-add-icon::before,
  .e-query-builder .e-add-icon::before {
    content: $qrybldr-add-icon;
  }

  #{if(&, '&', '*')}.e-device .e-rule-value {
    width: $qrybldr-device-value-width;
  }

  .e-query-builder.e-device .e-rule-field .e-drag-qb-rule:not(.e-hidden),
  .e-query-builder.e-device .e-dragclone.e-cloneproperties .e-rule-field {
    display: block;
  }

  .e-query-builder.e-draggable .e-rule-list .e-group-container::before {
    height: $qrybldr-drag-grp-list-heg;
  }

  @if $skin-name == 'tailwind3' {
    .e-query-builder .e-group-container .e-radio-wrapper label .e-label {
      font-weight: $font-weight-normal;
    }
  }
}

@include export-module('querybuilder-theme') {
  .e-query-builder {
    background: $qrybldr-bg-color;
    border-color: $qrybldr-brdr-color;

    & .e-group-header .e-btn-group {
      border-color: $qrybldr-brdr-color;
    }

    & .e-disable .e-drag-qb-rule,
    & .e-disable.e-drag-qb-rule {
      color: $qrybldr-brdr-color;
    }

    & .e-group-header .e-dropdown-btn.e-add-btn,
    .e-deletegroup,
    & .e-group-header .e-clone-grp-btn,
    & .e-group-header .e-lock-grp-btn {
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        background: $qrybldr-btngroup-bgcolor;
        box-shadow: none;
        color: $qrybldr-icon-color;
      }
      @else if $skin-name == 'FluentUI' {
        background: $qrybldr-btngroup-bgcolor;
        border: 0 solid $qrybldr-btngroup-bgcolor;
      }
    }

    &.e-rtl .e-btn-group.e-rtl {
      & .e-qb-toggle.e-btn.e-small {
        @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' or $skin-name == 'fabric-dark' {
          border-right: 1px solid $qrybldr-brdr-color;
        }

        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap-dark' {
          border-left: 1px solid $qrybldr-brdr-color;
          border-right: 1px solid $qrybldr-brdr-color;
        }
      }

      & .e-qb-toggle.e-btn.e-small.e-active-toggle {
        @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' or $skin-name == 'fabric-dark' {
          border-right: 1px solid $qrybldr-btngroup-active-bgcolor;
        }

        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap-dark' {
          border-left: 1px solid $qrybldr-btngroup-active-bgcolor;
          border-right: 1px solid $qrybldr-btngroup-active-bgcolor;
        }
      }

      & .e-btn.e-btngroup-and-lbl.e-not {
        @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' {
          border-right: transparent;
        }
      }
    }

    & .e-group-container {
      border-color: $groupborder-color;
    }

    & .e-rule-container {
      background: $groupfill-bgcolor;
      border-color: $groupborder-color;
    }

    & .e-rule-container.e-joined-rule {
      border-top-color: $qrybldr-rule-list-border-color;
    }

    & .e-rule-list .e-group-container {
      background: $qrybldr-bg-color;
    }

    & .e-rule-list > ::after,
    & .e-rule-list > ::before {
      border-color: $qrybldr-rule-list-border-color;
    }

    & .e-btn-group input:checked + label.e-btn,
    & .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
      background: $qrybldr-btngroup-active-bgcolor;
      border-color: $qrybldr-btngroup-active-bgcolor;
      color: $qrybldr-btngroup-active-color;
    }

    & .e-btn-group:not(.e-rtl) .e-qb-toggle.e-btn.e-small {
      @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' {
        border-right: transparent;
      }
    }

    & .e-btn-group:not(.e-rtl) .e-btn.e-btngroup-and-lbl.e-not {
      @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-dark' {
        border-left: transparent;
      }
    }

    & .e-btn-group input + label.e-btn,
    & .e-group-action .e-btn,
    & .e-qb-toggle,
    & .e-removerule.e-btn.e-round,
    & .e-removerule.e-btn.e-round:hover {
      @if $skin-name == 'bootstrap4' {
        background: $qrybldr-btngroup-bgcolor;
        border-color: $qrybldr-brdr-color;
        color: $qrybldr-btngroup-color;
      }
    }

    & .e-group-header .e-btn-group:not(.e-rtl) .e-qb-toggle:last-of-type {
      @if $skin-name == 'highcontrast' {
        border-left: 1px solid;
      }
      @else if $skin-name == 'FluentUI' {
        background: $qrybldr-btngroup-bgcolor;
        border: 0 solid $qrybldr-btngroup-bgcolor;
      }
    }

    & .e-group-header .e-btn-group .e-qb-toggle.e-active-toggle:last-of-type {
      @if $skin-name == 'highcontrast' {
        border-left-color: $qrybldr-btngroup-active-bgcolor;
      }
    }

    & .e-removerule.e-btn.e-round,
    & .e-lock-rule.e-btn.e-round,
    & .e-clone-rule.e-btn.e-round {
      background: $groupfill-color;
      @if $skin-name == 'bootstrap4' {
        background: $qrybldr-btngroup-bgcolor;
      }
      @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
        background: $qrybldr-btngroup-bgcolor;
        color: $qrybldr-icon-color;
      }
      @else if $skin-name == 'FluentUI' {
        background: $qrybldr-btngroup-bgcolor;
        border: 0 solid $qrybldr-btngroup-bgcolor;
      }

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

    & .e-summary-content textarea {
      background: $qrybldr-bg-color;
      color: $qrybldr-color;
    }

    & .e-collapse-rule {
      background: $qrybldr-bg-color;
      border-color: $qrybldr-collapse-brdr-color;
      color: $qrybldr-color;
      @if $skin-name == 'tailwind3' {
        color: $icon-color;
      }

      &:focus,
      &:active,
      &:hover {
        background: $qrybldr-brdr-color;
      }

      @if $skin-name == 'tailwind3' {
        &:focus,
        &:hover {
          background: $content-bg-color-hover;
          color: $icon-color-hover;
        }
        &:active {
          background: $content-bg-color-pressed;
          color: $icon-color-pressed;
        }
      }
    }

    &.e-multi-connector {
      & .e-group-container:not(:first-child),
      & .e-rule-list > .e-group-container:first-child {
        border-color: $qrybldr-brdr-color;
      }
    }
  }
}

.e-tooltip-wrap.e-querybuilder-error,
.e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
  background: $qrybldr-val-error-bg-color;
  border-color: $qrybldr-val-error-bg-color;
}

.e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-top,
.e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-top {
  border-bottom-color: $qrybldr-val-error-bg-color;
  color: $qrybldr-val-error-bg-color;
}

.e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-bottom,
.e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-bottom {
  border-top-color: $qrybldr-val-error-bg-color;
  color: $qrybldr-val-error-bg-color;
}

.e-tooltip-wrap.e-querybuilder-error .e-tip-content,
.e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
  color: $qrybldr-val-error-color;
}

.e-query-builder .e-btn.e-round.e-small {
  @if $theme-name == 'fluent2' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' {
    &:hover {
      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
    }

    &:focus {
      background: $content-bg-color-hover !important; /* stylelint-disable-line declaration-no-important */
    }

    &:active {
      background: $content-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
    }

    &:disabled {
      background: $content-bg-color-alt1 !important; /* stylelint-disable-line declaration-no-important */
    }
  }
  @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
    &:focus-visible {
      background-color: $content-bg-color !important; /* stylelint-disable-line declaration-no-important */
      color: $icon-color !important; /* stylelint-disable-line declaration-no-important */
      box-shadow: $keyboard-focus-shadow !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

@include export-module('query-builder-material-icons') {
  .e-query-builder {
    & .e-collapse-rule::before {
      content: '\e908';
    }

    & .e-drag-qb-rule::before {
      content: '\e330';
    }
  }
}

@include export-module('querybuilder-bigger') {
  .e-query-builder.e-device,
  .e-bigger.e-query-builder,
  .e-bigger .e-query-builder {
    &.e-multi-connector {
      & .e-rule-list .e-group-container {
        margin-top: $qryblr-zero-padding-margin !important; /* stylelint-disable-line declaration-no-important */
      }
    }
    & .e-group-container  {
      padding: $device-rulecon-padding;
    }

    & .e-rule-list > .e-group-container {
      padding: $qryblr-zero-padding-margin;
    }

    & .e-rule-list > .e-rule-container:not(:first-child)::before {
      height: $biggerafter-ruleborder-height;
    }

    & .e-rule-list > .e-group-container:first-child {
      margin-top: $qryblr-zero-padding-margin;
    }

    & .e-rule-list > ::before {
      top: $qrybldr-bigger-rule-list-before-top;
    }

    & .e-group-action .e-btn {
      margin-left: $bigger-group-action-margin;
      @if $skin-name == 'tailwind' {
        font-size: 28px;
      }
    }

    & .e-rule-list > :first-child::before {
      top: $bigger-rule-list-first-top;
    }

    & .e-rule-list {
      padding: $qrybldr-bigger-rulelist;
      padding-bottom: $qryblr-zero-padding-margin;
    }

    & .e-rule-list .e-group-container {
      margin-top: $device-rulecon-padding;
    }

    & .e-rule-container button.e-button-hide {
      display: $qrybldr-button-hide !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-collapse-rule {
      @if $theme-name == 'fluent2' {
        font-size: $qrybldr-collapse-rule-font-size;
        padding: $qrybldr-collapse-flu2-padding;
      }
      @if $skin-name == 'tailwind3' {
        font-size: $qrybldr-collapse-rule-font-size;
      }
    }

    & .e-btn.e-small.e-round .e-btn-icon {
      @if $theme-name == 'fluent2' {
        font-size: $qrybldr-btn-small-round-font-size;
      }
    }

    & .e-drag-qb-rule {
      font-size: $qrybldr-drag-icon-bigger-font-size;
    }

    & .e-group-header .e-btn-group .e-small.e-btn {
      @if $theme-name == 'fluent2' {
        font-size: $qrybldr-btn-small-round-font-size;
        line-height: $qrybldr-group-btn-line-height;
        padding: $qrybldr-group-btn-padding;
      }
    }

    & .e-group-header .e-group-action .e-btn.e-small.e-round {
      @include fluent2-bigger-small-round-btn;
    }

    & .e-group-body {
      padding-left: $bigger-groupbody-paddingleft;

      & .e-rule-container {
        margin-top: $qrybldr-rulecont-margin;
        padding-right: $bigger-hrmode-ruledlt-mrgn;
      }

      & .e-rule-container.e-vertical-mode {
        width: $qrybldr-vertical-width;
      }

      & .e-rule-container.e-separate-rule {
        margin-top: $bigger-group-action-margin;
      }

      & .e-rule-delete,
      & .e-rule-container.e-vertical-mode .e-rule-delete {
        margin-bottom: $device-rulecon-padding;
        @if $skin-name != 'Material3' {
          padding-right: $device-rulecon-right-padding;
        }
        right: $qryblr-zero-padding-margin;
      }

      & .e-rule-container.e-horizontal-mode .e-rule-delete {
        margin-bottom: $qryblr-zero-padding-margin;
      }

      & .e-horizontal-mode .e-rule-delete,
      & .e-horizontal-mode .e-lock-rule,
      & .e-horizontal-mode .e-clone-rule {
        display: $qrybldr-device-diaplay;
        margin-left: $bigger-ruledelete-marginleft;
      }

      & .e-horizontal-mode .e-rule-filter,
      & .e-horizontal-mode .e-rule-sub-filter,
      & .e-horizontal-mode .e-rule-operator,
      & .e-horizontal-mode .e-rule-value,
      & .e-horizontal-mode .e-rule-value-delete {
        display: $qrybldr-device-diaplay;
      }

      & .e-rule-value.e-custom-value {
        width: $qrybldr-rule-value-width;
      }

      & .e-rule-value {
        &.e-hide {
          display: none;
        }
      }

      & .e-rule-value {
        &.e-show {
          display: inline-block;
        }
      }

      & .e-rule-field,
      & .e-rule-delete {
        &.e-btn.e-small.e-round {
          box-shadow: $ruledelete-shadow;
        }

        & .e-btn.e-small.e-round {
          @include fluent2-bigger-small-round-btn;
        }
      }
    }

    & .e-summary-text {
      font-size: $qrybldr-bigger-smrytxt-font-size;
      line-height: $qrybldr-summary-line-height;
      padding: $qrybldr-bigger-summary-padding;
    }

    & .e-summary-btndiv {
      padding: $qrybldr-bigger-summary-btn-padding;
      text-align: $qrybldr-rulelist-grcon-float;
    }

    & .e-dropdown-btn.e-round.e-small .e-add-icon {
      @if $skin-name == 'tailwind' {
        line-height: 2 !important; /* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'FluentUI' {
        line-height: $qrybldr-btn-small-line-height !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  #{if(&, '&', '*')}.e-bigger .e-group-body .e-rule-container {
    & .e-rule-filter,
    & .e-rule-sub-filter,
    & .e-operator,
    & .e-value {
      padding: $bigger-rulecon-padding;
    }
  }

  .e-query-builder.e-rtl.e-bigger {
    &.e-device .e-group-body .e-rule-container .e-rule-delete,
    & .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete {
      padding-left: $qrybldr-touch-btn-left;
    }
  }

  .e-bigger .e-query-builder .e-dragclone.e-cloneproperties {
    & .e-drag-qb-rule {
      padding: $qrybldr-bigger-drag-clone-padding;
    }
    & .e-rule-value-delete {
      margin: $qrybldr-bigger-drag-clone-margin;
    }
  }

  .e-bigger .e-query-builder.e-draggable .e-rule-list .e-group-container::before {
    height: $qrybldr-drag-grp-big-list-heg;
  }

  .e-bigger .e-query-builder .e-group-header .e-drag-qb-rule {
    padding: $qrybldr-drag-grp-big-icon-pad !important; /* stylelint-disable-line declaration-no-important */
  }
}

$recurrence-label-bottom: 7px !default;
$recurrence-month-label-bottom: 9px !default;
$recurrence-month-label-bottom-bgr: 9px !default;
$recurrence-label-font-weight: bold !default;
$recurrence-label-font-nrml-size: 12px !default;
$recurrence-label-font-bgr-size: 12px !default;
$recurrence-left-padding: 0 8px 10px 0 !default;
$recurrence-week-position-min-width: 98px !default;
$recurrence-week-position-bgr-min-width: 130px !default;
$recurrence-day-position-bgr-min-width: 190px !default;
$recurrence-day-position-bgr-padding-left: 54px !default;
$recurrence-end-bgr-padding-right: 8px !default;
$recurrence-end-on-date-margin-top: 24px !default;
$recurrence-repeat-on-week-selector-margin-bottom: 23px !default;

$recurrence-font-weight-normal: normal !default;
$recurrence-radius-50: 50% !default;

$recurrence-height-35: 35px !default;
$recurrence-height-40: 40px !default;

$recurrence-spacing-0: 0 !default;
$recurrence-spacing-1: 1px !default;
$recurrence-spacing-3: 3px !default;
$recurrence-spacing-5: 5px !default;
$recurrence-spacing-6: 6px !default;
$recurrence-spacing-8: 8px !default;
$recurrence-spacing-10: 10px !default;
$recurrence-spacing-11: 11px !default;
$recurrence-spacing-12: 12px !default;
$recurrence-spacing-14: 14px !default;
$recurrence-spacing-16: 16px !default;
$recurrence-spacing-18: 18px !default;
$recurrence-spacing-20: 20px !default;
$recurrence-spacing-50: 50px !default;
$recurrence-spacing-59: 59px !default;
$recurrence-spacing-64: 64px !default;

$recurrence-spacing-2-5: 2.5% !default;

@include export-module('recurrence-editor-layout') {
  .e-recurrenceeditor {
    .e-editor {
      display: flex;
      flex-flow: row wrap;
      margin: $recurrence-spacing-0 auto;
      max-width: 1240px;
    }

    .e-recurrence-table {
      table-layout: fixed;
      width: 100%;

      &.e-repeat-content-wrapper td:last-child {
        width: 27%;
      }

      &.e-month-expand-wrapper td:first-child {
        width: 24%;
      }

      .e-repeat-content {
        display: inline-block;
        font-weight: $recurrence-font-weight-normal;
        padding: $recurrence-spacing-18 $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-8;
      }

      .e-input-wrapper {
        float: none;
        width: 100%;
      }

      .e-week-position {
        min-width: $recurrence-week-position-min-width;
        position: relative;
        right: 20px;
      }

      .e-day-position {
        min-width: 120px;
      }

      .e-monthday-element {
        padding-left: $recurrence-spacing-10;
      }
    }

    .e-input-wrapper-side.e-form-left {
      padding: $recurrence-left-padding;
    }

    .e-form-left {
      padding: $recurrence-spacing-0 $recurrence-spacing-8 $recurrence-spacing-16 $recurrence-spacing-0;
    }

    .e-form-right,
    .e-input-wrapper-side.e-form-right {
      padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-10;
    }

    .e-input-wrapper {
      float: left;
      width: 50%;

      div {
        margin-bottom: $recurrence-spacing-2-5;
      }
    }

    .e-input-wrapper.e-end-on-date,
    .e-input-wrapper.e-end-on-count {
      padding-right: $recurrence-spacing-0;
      margin-top: $recurrence-end-on-date-margin-top;
    }

    &.e-rtl {
      .e-end-on > div,
      .e-month-expander > div > div {
        float: right;
      }

      .e-form-left,
      .e-input-wrapper-side.e-form-left {
        padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-10 $recurrence-spacing-8;
      }

      .e-form-right,
      .e-input-wrapper-side.e-form-right {
        padding: $recurrence-spacing-0 $recurrence-spacing-8 $recurrence-spacing-10 $recurrence-spacing-0;
      }

      .e-recurrence-table .e-monthday-element {
        position: relative;
        right: 10px;
      }

      .e-week-position {
        left: 20px;
        right: 0;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-label,
      .e-input-wrapper-side.e-non-week > .e-month-expander-label {
        padding-right: $recurrence-spacing-0;
      }

      .e-end-on-label {
        margin-bottom: $recurrence-spacing-5;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-left {
        padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-8;
      }

      .e-input-wrapper.e-end-on-date,
      .e-input-wrapper.e-end-on-count {
        padding: $recurrence-spacing-0 $recurrence-spacing-8 $recurrence-spacing-0 $recurrence-spacing-0;
      }

      .e-recurrence-table .e-day-position {
        margin-right: $recurrence-spacing-20;
      }

      .e-recurrenceeditor {
        .e-recurrence-table {
          &.e-month-expand-wrapper td:first-child {
            width: 30px;
          }
        }
      }
    }

    .e-days {
      .e-week-expander-label {
        font-size: $recurrence-label-font-nrml-size;
        font-weight: $recurrence-label-font-weight;
        margin-bottom: $recurrence-spacing-8;
      }

      button {
        border-radius: $recurrence-radius-50;
        flex-flow: row wrap;
        height: $recurrence-height-35;
        margin: $recurrence-spacing-0 $recurrence-spacing-8 $recurrence-spacing-10;
        width: 35px;
      }
    }

    .e-hide-recurrence-element {
      display: none;
    }

    .e-half-space {
      width: 20%;
    }

    .e-year-expander {
      margin-bottom: $recurrence-spacing-11;
    }

    .e-month-expander tr:first-child .e-input-wrapper {
      padding-bottom: $recurrence-spacing-11;
    }

    .e-month-expander-checkbox-wrapper.e-input-wrapper {
      padding-top: $recurrence-spacing-3;

      .e-month-type .e-label {
        display: none;
      }
    }

    .e-input-wrapper.e-month-expander-checkbox-wrapper.e-repeat-on-week-selector {
      min-width: 30px;
      margin-bottom: $recurrence-repeat-on-week-selector-margin-bottom;
    }

    .e-input-wrapper-side {
      float: left;
      padding: $recurrence-spacing-16 $recurrence-spacing-20 $recurrence-spacing-0;
      width: 50%;

      &.e-end-on {
        .e-end-on-left {
          padding-right: $recurrence-spacing-16;
        }
      }

      &.e-non-week > .e-input-wrapper {
        margin: $recurrence-spacing-0;
      }

      &.e-non-week > .e-month-expander-label {
        font-size: $recurrence-label-font-nrml-size;
        font-weight: $recurrence-label-font-weight;
        margin-bottom: $recurrence-month-label-bottom;
        padding-right: $recurrence-spacing-16;
      }
    }

    .e-input-wrapper-side .e-days .e-form-left {
      padding-bottom: $recurrence-spacing-6;
    }

    .e-input-wrapper-side .e-non-week .e-form-left {
      padding-bottom: $recurrence-spacing-12;
    }

    .e-input-wrapper-side.e-form-right {
      margin-bottom: $recurrence-spacing-11;
    }
  }

  .e-device {
    .e-recurrenceeditor {
      .e-recurrence-table {
        &.e-repeat-content-wrapper td:last-child {
          width: 25%;
        }

        &.e-month-expand-wrapper td:first-child {
          width: 20%;
        }
      }

      .e-week-expander-label {
        margin-bottom: $recurrence-spacing-6;
      }

      .e-month-expander-label {
        font-size: $recurrence-label-font-nrml-size;
        margin-bottom: $recurrence-spacing-5;
      }

      .e-footer-content {
        padding: $recurrence-spacing-12;
      }

      .e-form-left,
      .e-input-wrapper-side.e-form-left {
        padding: $recurrence-spacing-0 $recurrence-spacing-3 $recurrence-spacing-10 $recurrence-spacing-0;
      }

      .e-form-right,
      .e-input-wrapper-side.e-form-right {
        padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-10 $recurrence-spacing-3;
      }

      .e-input-wrapper.e-end-on-date,
      .e-input-wrapper.e-end-on-count {
        padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-10;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-left {
        padding-right: $recurrence-spacing-10;
      }

      &.e-end-on {
        padding-right: $recurrence-spacing-0;

        .e-end-on-label {
          float: none;
          font-size: $recurrence-label-font-nrml-size;
          font-weight: $recurrence-label-font-weight;
          margin-bottom: $recurrence-label-bottom;
        }

        .e-end-on-left {
          padding-right: $recurrence-spacing-0;
        }
      }

      .e-recurrence-table .e-monthday-element,
      .e-recurrence-table .e-day-position {
        padding-left: $recurrence-spacing-20;
      }

      .e-recurrence-table .e-monthday-element {
        margin-left: $recurrence-spacing-20;
      }

      .e-week-position {
        right: 0;
        padding-right: $recurrence-spacing-10;
      }

      &.e-rtl {
        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding-right: $recurrence-spacing-0;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: $recurrence-spacing-0 $recurrence-spacing-10 $recurrence-spacing-0 $recurrence-spacing-0;
        }

        .e-recurrence-table .e-monthday-element {
          padding: $recurrence-spacing-0 $recurrence-spacing-20 $recurrence-spacing-0 $recurrence-spacing-0;
        }

        .e-recurrence-table .e-day-position {
          padding: $recurrence-spacing-0 $recurrence-spacing-50 $recurrence-spacing-0 $recurrence-spacing-0;
        }

        .e-week-position {
          left: 0;
        }
      }
    }

    &.e-recurrence-dialog {
      .e-dlg-header-content {
        background: none;
        box-shadow: none;
        padding-bottom: $recurrence-spacing-10;
      }

      .e-editor {
        .e-input-wrapper-side.e-end-on .e-end-on-label {
          margin-bottom: $recurrence-label-bottom;
        }
      }

      .e-footer-content {
        padding: $recurrence-spacing-16 $recurrence-spacing-8;
      }
    }
  }

  @media (max-width: 1024px) {
    .e-recurrenceeditor {

      .e-editor {

        .e-input-wrapper-side.e-end-on {
          width: 100%;
        }

        .e-input-wrapper-side.e-non-week {
          width: 65%;
        }
      }
    }
  }

  @media (max-width: 580px) {
    .e-recurrenceeditor {
      margin-left: auto;
      margin-right: auto;
      width: 100%;

      .e-editor {
        flex-direction: column;

        >.e-input-wrapper.e-form-left {
          margin-top: $recurrence-spacing-0;
        }

        .e-input-wrapper-side.e-non-week > .e-month-expander-label,
        .e-input-wrapper-side.e-end-on .e-end-on-label {
          margin-bottom: $recurrence-month-label-bottom;
        }

        > div {
          margin-top: $recurrence-spacing-20;
        }

        > .e-input-wrapper {
          width: 100%;
        }

        .e-input-wrapper-side.e-end-on {
          width: 100%;

          .e-input-wrapper {
            width: 50%;
          }
        }

        .e-form-left,
        .e-input-wrapper-side.e-form-left {
          padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-10;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-10;
        }

        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding-right: $recurrence-spacing-10;
        }

        .e-form-right,
        .e-input-wrapper-side.e-form-right {
          padding-left: $recurrence-spacing-0;
        }

        .e-input-wrapper-side.e-days {
          width: 100%;
        }

        .e-input-wrapper-side.e-non-week {
          width: 65%;
        }

        .e-recurrence-table .e-day-position {
          padding-left: $recurrence-spacing-59;
        }
      }

      &.e-rtl {
        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding-right: $recurrence-spacing-0;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: $recurrence-spacing-0 $recurrence-spacing-10 $recurrence-spacing-0 $recurrence-spacing-0;
        }
      }
    }
  }
}

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

/*! Recurrence-Editor component theme */

@include export-module('recurrence-editor-bigger') {
  .e-bigger {
    .e-recurrenceeditor {
      padding: $recurrence-spacing-0;

      .e-input-wrapper-side.e-form-left {
        padding: $recurrence-spacing-0 $recurrence-spacing-12 $recurrence-spacing-11 $recurrence-spacing-0;
      }

      .e-form-left {
        padding: $recurrence-spacing-0 $recurrence-spacing-12 $recurrence-spacing-14 $recurrence-spacing-0;
      }

      .e-recurrence-table .e-monthday-element {
        padding-left: $recurrence-spacing-50;
      }

      .e-week-position {
        min-width: $recurrence-week-position-bgr-min-width;
        right: 0;
      }

      .e-day-position {
        min-width: $recurrence-day-position-bgr-min-width;
        padding-left: $recurrence-day-position-bgr-padding-left;
      }

      .e-input-wrapper-side.e-non-week > .e-month-expander-label {
        font-size: $recurrence-label-font-bgr-size;
        margin-bottom: $recurrence-month-label-bottom-bgr;
        font-weight: $recurrence-label-font-weight;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-left {
        padding-right: $recurrence-end-bgr-padding-right;
      }

      .e-end-on-label {
        margin-bottom: $recurrence-spacing-0;
      }

      .e-days .e-week-expander-label {
        font-size: $recurrence-label-font-bgr-size;
        margin-bottom: $recurrence-spacing-8;
      }

      .e-input-wrapper-side.e-end-on .e-end-on-label {
        font-size: $recurrence-label-font-bgr-size;
        margin-bottom: $recurrence-spacing-1;
      }

      .e-month-expander tr:first-child .e-input-wrapper,
      .e-year-expander {
        margin-bottom: $recurrence-spacing-11;
      }

      .e-recurrence-table {
        &.e-month-expand-wrapper td:first-child {
          width: 30px;
        }
      }

      @if $skin-name == 'fluent2' {
        .e-recurrence-table {
          &.e-month-expand-wrapper .e-radio + label {
            margin: $recurrence-spacing-0;
          }
        }
      }

      .e-days {
        button {
          height: $recurrence-height-40;
          width: 40px;
        }
      }

      &.e-rtl {

        .e-form-left,
        .e-input-wrapper-side.e-form-left {
          padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-10 $recurrence-spacing-12;
        }

        .e-form-right,
        .e-input-wrapper-side.e-form-right {
          padding: $recurrence-spacing-0 $recurrence-spacing-12 $recurrence-spacing-10 $recurrence-spacing-0;
        }

        .e-recurrence-table .e-monthday-element,
        .e-recurrence-table .e-day-position {
          padding: $recurrence-spacing-0 $recurrence-spacing-64 $recurrence-spacing-0 $recurrence-spacing-0;
        }

        .e-input-wrapper-side.e-end-on .e-end-on-label,
        .e-input-wrapper-side.e-non-week > .e-month-expander-label {
          padding-right: $recurrence-spacing-0;
        }

        .e-end-on-label {
          margin-bottom: $recurrence-spacing-5;
        }

        .e-input-wrapper-side.e-end-on .e-end-on-left {
          padding: $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-0 $recurrence-spacing-12;
        }

        .e-input-wrapper.e-end-on-date,
        .e-input-wrapper.e-end-on-count {
          padding: $recurrence-spacing-0 $recurrence-spacing-12 $recurrence-spacing-0 $recurrence-spacing-0;
        }

        .e-recurrence-table .e-week-position {
          left: 0;
        }
      }
    }

    .e-device {
      .e-recurrence-table .e-monthday-element {
        padding-left: $recurrence-spacing-20;
      }

      .e-recurrenceeditor {
        &.e-rtl {
          .e-recurrence-table .e-monthday-element {
            padding: $recurrence-spacing-0 $recurrence-spacing-20 $recurrence-spacing-0 $recurrence-spacing-0;
          }
        }
      }
    }
  }
}

$schedule-skin: $skin-name !default;
$schedule-header-bg-color: $grey-base !default;
$schedule-header-border-color: $grey-99 !default;
$schedule-header-font-color: $grey-dark-font !default;
$schedule-header-hover-color: $grey-light !default;
$schedule-content-bg-color: $grey-f8 !default;
$schedule-content-border-color: $grey-99 !default;
$schedule-primary-content-font-color: $grey-dark-font !default;
$schedule-secondary-content-font-color: $grey-f5 !default;
$schedule-select-font-color: $grey-dark-font !default;
$schedule-select-bg-color: $grey-88 !default;
$schedule-work-cells-bg-color: $grey-dark !default;
$schedule-current-date-bg-color: $brand-primary !default;
$schedule-disable-dates-color: rgba($shadow, .08) !default;
$schedule-disable-font-color: rgba($default-font-color, .26) !default;
$schedule-workhour-bg-color: $grey-base !default;
$schedule-hover-bg-color: $grey-light !default;
$schedule-resource-focus-bg-color: $schedule-hover-bg-color !default;
$schedule-hover-font-color: $header-font-color !default;
$schedule-active-color: $brand-primary-font !default;
$schedule-active-border-color: $brand-primary !default;
$schedule-active-font-color: color.adjust($brand-primary, $lightness: 15%) !default;
$schedule-current-day-active-color: $schedule-active-color !default;
$schedule-calendar-background: none !default;
$schedule-calendar-shadow: none !default;
$schedule-time-cells-font-color: $schedule-secondary-content-font-color !default;
$schedule-time-cells-bg-color: $schedule-header-bg-color !default;
$schedule-timezone-enable-nrml-height: 60px !default;
$schedule-timezone-enable-bgr-height: 70px !default;
$schedule-alternate-cell-border: dotted !default;
$schedule-header-cells-height: 60px !default;
$schedule-header-cells-padding: 5px !default;
$schedule-header-cells-width: 36px !default;
$schedule-month-header-cells-nrml-height: 30px !default;
$schedule-month-work-cells-height: 70px !default;
$schedule-month-header-cells-bgr-height: 35px !default;
$schedule-month-header-cells-padding: 3px !default;
$schedule-allday-cells-height: 0 !default;
$schedule-work-cells-height: 36px !default;
$schedule-work-cells-width: 36px !default;
$schedule-date-navigation-font-size: 14px !default;
$schedule-header-nrml-font-size: 16px !default;
$schedule-header-bgr-font-size: 18px !default;
$schedule-header-device-font-size: 18px !default;
$schedule-content-nrml-font-size: 14px !default;
$schedule-content-bgr-font-size: 15px !default;
$schedule-content-device-font-size: 15px !default;
$schedule-date-month-header-wrap-bgr-font-size: 14px !default;
$schedule-date-header-wrap-nrml-font-size: 13px !default;
$schedule-date-header-wrap-bgr-font-size: 14px !default;
$schedule-date-header-wrap-device-font-size: 14px !default;
$schedule-month-date-header-cell-font-size: none !default;
$schedule-month-date-header-cell-text-align: left !default;
$schedule-month-date-header-cell-text-transform: none !default;
$schedule-appointment-bg-color: $brand-primary !default;
$schedule-appointment-details-padding: 0 4px !default;
$schedule-appointment-font-color: $brand-primary-font !default;
$schedule-appointment-border-color: $grey-base !default;
$schedule-appointment-border-radius: 4px !default;
$schedule-appointment-selected-border: 1px solid #fff !default;
$schedule-appointment-active-border-color: $brand-primary-font !default;
$schedule-month-agenda-app-indicator-color: $grey-light-font !default;
$schedule-month-appointment-height: 22px !default;
$schedule-recurrence-icon-line-height: $schedule-month-appointment-height !default;
$schedule-agenda-recurrence-icon-line-height: 21px !default;
$schedule-month-appointment-text-line-height: 19px !default;
$schedule-month-event-clone-line-height-subject: 1.4 !default;
$schedule-appointment-text-line-height: 20px !default;
$schedule-month-appointment-time-padding: 2.5px !default;
$schedule-month-appointment-subject-padding: 2.5px 2px !default;
$schedule-timescale-appointment-height: 54px !default;
$schedule-drag-appointment-opacity: .4;
$schedule-header-day-nrml-font-size: 13px !default;
$schedule-header-day-bgr-font-size: 14px !default;
$schedule-header-day-device-font-size: 14px !default;
$schedule-header-day-line-height: unset !default;
$schedule-header-day-padding-bottom: 0 !default;
$schedule-header-date-device-font-size: 20px !default;
$schedule-header-date-nrml-font-size: 18px !default;
$schedule-header-date-bgr-font-size: 20px !default;
$schedule-time-scale-nrml-font-size: 12px !default;
$schedule-time-scale-bgr-font-size: 13px !default;
$schedule-time-scale-device-font-size: 11px !default;
$schedule-current-time-nrml-font-size: 11px !default;
$schedule-current-time-bgr-font-size: 12px !default;
$schedule-current-time-bgr-device-font-size: 9px !default;
$schedule-popup-header-icon-font-size: 11px !default;
$schedule-time-scale-width: 85px !default;
$schedule-device-time-scale-width: 60px !default;
$schedule-header-date-line-height: unset !default;
$schedule-header-padding-top: 0 !default;
$schedule-vertical-work-cells-border: 0 0 1px 1px !default;
$schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
$schedule-month-work-cells-border: 0 0 1px 1px !default;
$schedule-rtl-month-work-cells-border: 0 1px 1px 0 !default;
$schedule-month-agenda-header-cells-border: 0 0 1px 0 !default;
$schedule-month-agenda-work-cells-border: 0 !default;
$schedule-rtl-month-agenda-work-cells-border: 0 !default;
$schedule-month-agenda-border: 1px solid $schedule-content-border-color !default;
$schedule-agenda-color: $grey-base !default;
$schedule-agenda-date-header-padding: 10px 32px 0 16px !default;
$schedule-recurrence-font-size: 11px !default;
$schedule-agenda-item-padding: 10px 0 !default;
$schedule-agenda-appointment-padding: 0 8px !default;
$schedule-agenda-big-appointment-padding: $schedule-agenda-appointment-padding !default;
$schedule-month-agenda-appointment-padding: 0 8px !default;
$schedule-month-agenda-item-padding: 10px 0 !default;
$schedule-popup-content-padding: 38px 18px 12px !default;
$schedule-popup-footer-padding: 8px 18px 8px 22px !default;
$schedule-date-header-line-height: 20px !default;
$schedule-date-header-margin: 3px 3px 2px !default;
$schedule-date-header-margin-rtl: $schedule-date-header-margin !default;
$schedule-tbar-bgr-min-height: 56px !default;
$schedule-tbar-border-bottom-size: 1px solid $grey-99 !default;
$schedule-tbar-box-shadow: none !default;
$schedule-tbar-box-shadow-bottom-margin: 0 !default;
$schedule-tbar-min-height: 43px !default;
$schedule-tbar-height: $schedule-tbar-min-height !default;
$schedule-tbar-down-arrow-font-size: 12px !default;
$schedule-tbar-down-arrow-margin-top: 0 !default;
$schedule-tbar-default-icon-color: $grey-light-font !default;
$schedule-tbar-separator-size: $border-size !default;
$schedule-tbar-default-bg: $grey-darker !default;
$schedule-tbar-separator-border: $grey-99 !default;
$schedule-tbar-border-nav: $grey-f8 !default;
$schedule-tbar-border-nav-type: solid !default;
$schedule-tbar-hover-bg: $grey-light !default;
$schedule-tbar-hover-font: $brand-primary !default;
$schedule-tbar-nav-bgr-width: 32px !default;
$schedule-tbar-bgr-item-size: 34px !default;
$schedule-tbar-bgr-size: $schedule-tbar-bgr-min-height !default;
$schedule-tbar-bgr-items-size: $schedule-tbar-bgr-min-height !default;
$schedule-tbar-separator-bgr-height: calc(100% - 15px) !default;
$schedule-tbar-separator-bgr-mrgn: 7.5px 3px !default;
$schedule-tbar-separator-bgr-minheight: 27px !default;
$schedule-tbar-btn-icon-bgr-width: 24px !default;
$schedule-tbar-btn-bgr-mrgn: 4px 0 !default;
$schedule-tbar-btn-bgr-line-height: 25px !default;
$schedule-tbar-btn-bgr-minheight: 34px !default;
$schedule-tbar-btn-bgr-minwidth: 34px !default;
$schedule-tbar-btn-bgr-padding: 0 !default;
$schedule-tbar-btn-icn-bgr-padding: 0 !default;
$schedule-tbar-btn-icn-right-bgr-padding: 0 !default;
$schedule-tbar-right-items-btn-border: none !default;
$schedule-tbar-right-items-btn-border-radius: 0 !default;
$schedule-tbar-right-active-items-btn-border: none !default;
$schedule-device-tbar-right-items-btn-border-radius: 0 !default;
$schedule-device-tbar-right-items-btn-border: none !default;
$schedule-device-font-size: 8px !default;
$schedule-content-nrml-font-text-transform: initial !default;
$schedule-header-hover-border-radius: 4px !default;
$schedule-more-popup-wrapper-border-radius: 2px !default;
$schedule-box-shadow: 0 1px 0 rgba($shadow, .15) !default;
$schedule-popup-box-shadow-1: 0 24px 38px 3px rgba($shadow, .14) !default;
$schedule-popup-box-shadow-2: 0 9px 46px 8px rgba($shadow, .12) !default;
$schedule-popup-box-shadow-3: 0 11px 15px -7px rgba($shadow, .2) !default;
$schedule-popup-border-color: $grey-99 !default;
$schedule-popup-bg-color: $grey-base !default;
$schedule-popup-header-icon-color: $grey-dark-font !default;
$schedule-popup-header-icon-hover-color: $grey-dark-font !default;
$schedule-popup-header-icon-hover-bg-color: $schedule-select-bg-color !default;
$schedule-popup-icon-color: $grey-dark-font !default;
$schedule-popup-icon-hover-color: $grey-light-font !default;
$schedule-popup-icon-hover-bg-color: $schedule-select-bg-color !default;
$schedule-popup-content-icon-color: $grey-dark-font !default;
$schedule-event-popup-content-padding: 0 18px 16px 26px !default;
$schedule-event-popup-fields-padding: 12px !default;
$schedule-popup-title-color: $grey-light !default;
$schedule-popup-btn-border: none !default;
$schedule-alert-dialog-border: none !default;
$schedule-btn-txt-bgr-padding: 5px 12px !default;
$schedule-icon-color: $grey-light-font !default;
$schedule-popup-header-icon-focus-bg-color: $schedule-popup-icon-hover-bg-color !default;
$schedule-popup-header-icon-focus-color: $schedule-popup-icon-hover-color !default;
$schedule-popup-icon-font-size: 18px !default;
$schedule-popup-icon-padding: 0 13px 0 0 !default;
$schedule-popup-footer-text-transform: capitalize !default;
$schedule-cell-popup-header-icon-padding: 0 !default;
$schedule-cell-popup-span-margin: 0 0 4px !default;
$schedule-cell-popup-subject-height: 40px !default;
$schedule-bgr-cell-popup-content-padding: $schedule-popup-content-padding !default;
$schedule-bgr-cell-popup-footer-padding: $schedule-popup-footer-padding !default;
$schedule-bgr-event-popup-header-icon-size: 2em !default;
$schedule-bgr-rtl-event-popup-date-time-icon-padding-right: 13px !default;
$schedule-device-event-popup-subject-padding: 12px 24px !default;
$schedule-event-popup-subject-color: $schedule-primary-content-font-color !default;
$schedule-event-popup-subject-bg-color: $schedule-popup-title-color !default;
$schedule-event-popup-subject-border-left: 6px solid $schedule-appointment-bg-color !default;
$schedule-event-popup-subject-padding: 8px 0 8px 10px !default;
$schedule-event-popup-subject-border-radius: $schedule-more-popup-wrapper-border-radius !default;
$schedule-event-popup-footer-display: block !default;
$schedule-event-popup-header-bg-color: $schedule-popup-bg-color !default;
$schedule-event-popup-header-icon-display: none !default;
$schedule-event-popup-header-close-icon-position: relative !default;
$schedule-event-popup-header-close-icon-right: 2px !default;
$schedule-multiple-event-popup-icon-bg-color: transparent !default;
$schedule-multiple-event-popup-icon-color: $schedule-primary-content-font-color !default;
$schedule-multiple-event-popup-subject-padding: 2px 5px !default;
$schedule-multiple-event-popup-icon-height: 35px !default;
$schedule-multiple-event-popup-icon-font-size: 14px !default;
$schedule-bgr-multiple-event-popup-subject-padding: 2px 5px !default;
$schedule-bgr-multiple-event-popup-icon-height: 35px !default;
$schedule-event-box-shadow-1: 0 6px 10px 0 rgba($shadow, .14) !default;
$schedule-event-box-shadow-2: 0 1px 18px 0 rgba($shadow, .12) !default;
$schedule-event-box-shadow-3: 0 3px 5px -1px rgba($shadow, .2) !default;
$schedule-more-indicator-shadow-color: $shadow-color !default;
$schedule-more-indicator-shadow-color-res-tree-popup: 0 3px 4px .2px $schedule-more-indicator-shadow-color !default;
$schedule-more-indicator-shadow-color-more-popup: 0 10px 10px 0 $schedule-more-indicator-shadow-color !default;
$schedule-more-indicator-nrml-font-size: 11px !default;
$schedule-more-popup-close-margin-top: 3px !default;
$schedule-more-popup-padding: 8px 0 !default;
$schedule-more-appointment-margin-bottom: 2px !default;
$schedule-event-popup-header-icon-padding: 5px 5px 2px !default;
$schedule-event-popup-subject-wrap-padding: 0 18px 8px !default;
$schedule-timeline-header-cells-height: 36px !default;
$schedule-timeline-work-cells-height: 60px !default;
$schedule-timeline-work-cells-width: 50px !default;
$schedule-timeline-month-cells-width: 70px !default;
$schedule-timeline-work-cells-border: 0 0 1px 1px !default;
$schedule-rtl-timeline-work-cells-border: 0 1px 1px 0 !default;
$schedule-timeline-resources-width: 200px !default;
$schedule-timeline-appointment-height: 38px !default;
$schedule-timeline-recurrence-icon-line-height: $schedule-timeline-appointment-height !default;
$schedule-timescale-recurrence-icon-line-height: $schedule-timescale-appointment-height !default;
$schedule-timeline-year-work-cells-height: 75px !default;
$schedule-timeline-year-work-cells-width: 100px !default;
$schedule-timeline-year-resource-text-padding: 4px 15px !default;
$schedule-timeline-year-resource-cells-padding-left: 15px !default;
$schedule-timeline-year-left-indent-padding: 0 !default;
$schedule-timeline-date-header-wrap-padding: 5px !default;
$schedule-rtl-timeline-date-header-wrap-padding: 5px !default;
$schedule-dialog-row-container-padding-bottom: 12px !default;
$schedule-dialog-all-day-row-padding-top: 8px !default;
$schedule-dialog-all-day-row-padding-bottom: 14px !default;
$schedule-bigger-dialog-row-container-padding-bottom: 12px !default;
$schedule-bigger-dialog-all-day-row-padding-top: 10px !default;
$schedule-device-dialog-all-day-row-padding-top: 20px !default;
$schedule-all-day-section-hover-color: $schedule-tbar-default-icon-color !default;
$schedule-tree-bg-color: $content-bg-color !default;
$schedule-tree-font-color: $schedule-primary-content-font-color !default;
$schedule-popup-overlay-bg-color: #333 !default;
$schedule-val-error-color: #f43 !default;
$schedule-val-error-bg-color: #fde !default;
$schedule-block-appointment-bg-color: rgba(255, 255, 255, .08) !default;
$schedule-block-appointment-font-color: #999 !default;
$schedule-resource-color-margin-top: 6px !default;
$schedule-bigger-resource-color-margin-top: 10px !default;
$schedule-resource-color-size: 14px !default;
$schedule-bigger-resource-color-size: 16px !default;
$schedule-resource-tree-text-content-padding: 0 0 0 12px !default;
$schedule-tip-content-padding: 3px 6px !default;
$schedule-time-cells-border-bottom-color: $schedule-content-border-color !default;
$schedule-current-day-font-weight: normal !default;
$schedule-selected-cell-hover-font-color: $schedule-hover-font-color !default;
$schedule-work-cell-hover-color: $schedule-hover-font-color !default;
$schedule-current-date-header-font-color: $schedule-active-color !default;
$schedule-selected-date-header-cell-font-color: none !default;
$schedule-appointment-detail-line-height: unset !default;
$schedule-timeline-header-time-slots-bg: $schedule-header-bg-color !default;
$schedule-agenda-subject-wrap-margin-bottom: 0 !default;
$schedule-bigger-tbar-btn-font-size: $schedule-date-navigation-font-size !default;
$schedule-more-event-close-icon-font-size: 9px !default;
$schedule-tbar-btn-icn-right-bgr-padding-top: 0 !default;
$schedule-following-events-dlg-padding: 15px !default;
$schedule-header-icon-wrapper-bg-color: $schedule-content-bg-color !default;
$schedule-bgr-date-time-icon-padding-right: 13px !default;
$schedule-bgr-more-event-close-icon-padding: unset !default;
$schedule-bgr-tbar-btn-text-font-size: $schedule-header-nrml-font-size !default;
$schedule-calendar-width: 300px !default;
$schedule-bgr-calendar-width: 345px !default;
$schedule-agenda-date-line-height: unset !default;

$schedule-font-icon-size-8: 8px !default;
$schedule-font-icon-size-10: 10px !default;
$schedule-font-icon-size-12: 12px !default;
$schedule-font-icon-size-14: 14px !default;

$schedule-border-0: 0 !default;
$schedule-border-1: 1px !default;
$schedule-border-3: 3px !default;
$schedule-border-8: 8px !default;

$schedule-border-radius-5: 5px !default;
$schedule-border-radius-50: 50% !default;
$schedule-border-radius-full: 100% !default;

$schedule-font-weight-normal: 400 !default;
$schedule-font-weight-medium: 500 !default;

$schedule-line-height-1: 1 !default;
$schedule-line-height-1-2: 1.2 !default;
$schedule-line-height-1-4: 1.4 !default;
$schedule-line-height-1-5: 1.5 !default;
$schedule-line-height-2-25: 2.25 !default;
$schedule-line-height-11: 11px !default;
$schedule-line-height-15: 15px !default;
$schedule-line-height-18: 18px !default;
$schedule-line-height-20: 20px !default;
$schedule-line-height-23: 23px !default;
$schedule-line-height-24-5: 24.5px !default;
$schedule-line-height-25: 25px !default;
$schedule-line-height-26: 26px !default;
$schedule-line-height-52: 52px !default;
$schedule-line-height-normal: normal !default;
$schedule-line-height-inherit: inherit !default;

$schedule-font-size-9: 9px !default;
$schedule-font-size-11: 11px !default;
$schedule-font-size-12: 12px !default;
$schedule-font-size-13: 13px !default;
$schedule-font-size-14: 14px !default;
$schedule-font-size-15: 15px !default;
$schedule-font-size-16: 16px !default;
$schedule-font-size-18: 18px !default;
$schedule-font-size-20: 20px !default;
$schedule-font-size-22: 22px !default;
$schedule-font-size-24: 24px !default;

$schedule-height-0: 0 !default;
$schedule-height-1: 1px !default;
$schedule-height-5: 5px !default;
$schedule-height-6: 6px !default;
$schedule-height-10: 10px !default;
$schedule-height-20: 20px !default;
$schedule-height-24: 24px !default;
$schedule-height-25: 25px !default;
$schedule-height-35: 35px !default;
$schedule-height-38: 38px !default;
$schedule-height-40: 40px !default;
$schedule-height-42: 42px !default;
$schedule-height-50: 50px !default;
$schedule-height-60: 60px !default;
$schedule-height-100: 100px !default;

$schedule-height-p20: 20% !default;
$schedule-height-p100: 100% !default;
$schedule-height-2-5: 2.5em !default;
$schedule-height-inherit: inherit !default;
$schedule-height-auto: auto !default;

$schedule-spacing-0: 0 !default;
$schedule-spacing-1: 1px !default;
$schedule-spacing-1-5: 1.5px !default;
$schedule-spacing-2: 2px !default;
$schedule-spacing-3: 3px !default;
$schedule-spacing-4: 4px !default;
$schedule-spacing-5: 5px !default;
$schedule-spacing-6: 6px !default;
$schedule-spacing-7: 7px !default;
$schedule-spacing-8: 8px !default;
$schedule-spacing-10: 10px !default;
$schedule-spacing-11: 11px !default;
$schedule-spacing-12: 12px !default;
$schedule-spacing-14: 14px !default;
$schedule-spacing-15: 15px !default;
$schedule-spacing-16: 16px !default;
$schedule-spacing-18: 18px !default;
$schedule-spacing-20: 20px !default;
$schedule-spacing-24: 24px !default;
$schedule-spacing-35: 35px !default;

$schedule-spacing-percentage-5: 5% !default;
$schedule-spacing-percentage-45: 45% !default;

$schedule-negative-spacing-3: -3px !default;
$schedule-negative-spacing-6: -6px !default;
$schedule-negative-spacing-8: -8px !default;
$schedule-negative-spacing-20: -20px !default;

@mixin tbar-btn-animation {
  content: '';
}
@mixin tbar-btn-animation-after {
  content: '';
}

$schedule-tree-content-color: #fff !default;

@mixin schedule-appointments-styles {
  background: $schedule-appointment-bg-color;
  border: $schedule-border-1 solid $schedule-appointment-border-color;
  border-radius: $schedule-appointment-border-radius;
  color: $schedule-appointment-font-color;
  display: flex;
  overflow: hidden;
  position: absolute;
}

@mixin schedule-appointments-subject-styles {
  font-size: $schedule-font-size-13;
  font-weight: $schedule-font-weight-medium;
  line-height: $schedule-line-height-1-2;
  margin-left: auto;
  min-height: 18px;
  overflow: hidden;
}

@mixin schedule-inline-appointment-styles {
  background: transparent;
  border: $schedule-border-0;
  color: $schedule-appointment-font-color;
  font-size: $schedule-font-size-13;
  font-weight: $schedule-font-weight-medium;
  line-height: $schedule-line-height-1-2;
  padding-top: $schedule-spacing-4;
  width: 100%;
}

@mixin schedule-more-appointment-styles {
  color: $schedule-secondary-content-font-color;
  cursor: pointer;
  font-size: $schedule-more-indicator-nrml-font-size;
  line-height: $schedule-line-height-11;
  overflow: hidden;
  padding: $schedule-spacing-2 $schedule-spacing-4;
  position: absolute;
  text-overflow: ellipsis;
}

@mixin schedule-resource-column-styles {
  border-bottom: $border-size $border-type $schedule-content-border-color;
  vertical-align: top;
  width: 75px;
}

@mixin schedule-agenda-interaction-color($color) {
  @if $skin-name == 'fluent2' {
    .e-subject,
    .e-date-time,
    .e-recurrence-icon {
      color: $color;
    }
  }
}

@mixin schedule-agenda-focus-color($color) {
  @if $skin-name == 'fluent2' {
    &:focus {
      @include schedule-agenda-interaction-color($color);
    }
  }
}

@include export-module('schedule-layout') {
  .e-schedule {
    display: block;
    outline: medium none;
    overflow: hidden;
    position: relative;
    user-select: none;

    .e-schedule-toolbar {
      border: $schedule-border-0;
      border-bottom: $schedule-tbar-border-bottom-size;
      box-shadow: $schedule-tbar-box-shadow;
      margin-bottom: $schedule-tbar-box-shadow-bottom-margin;
      min-height: $schedule-tbar-min-height;

      .e-active-view {
        .e-tbar-btn-text,
        .e-icons {
          color: $schedule-active-font-color;
        }
      }

      .e-tbar-btn {
        .e-tbar-btn-text {
          cursor: pointer;
          font-size: $schedule-content-nrml-font-size;
          text-transform: $schedule-content-nrml-font-text-transform;
        }
      }

      .e-toolbar-items {
        height: $schedule-tbar-height;

        &.e-tbar-pos {
          height: $schedule-tbar-height;
          min-height: $schedule-tbar-min-height;

          .e-toolbar-right .e-toolbar-item .e-tbar-btn {
            border: $schedule-tbar-right-items-btn-border;
            border-radius: $schedule-tbar-right-items-btn-border-radius;
          }
          .e-toolbar-right .e-toolbar-item.e-active-view .e-tbar-btn {
            border: $schedule-tbar-right-active-items-btn-border;
            @if ($skin-name == 'Material3') {
              background: $schedule-tbar-active-btn-bg;

              &:hover {
                background: $schedule-tbar-active-btn-hover-bg;
              }

              &:hover,
              &:focus {
                .e-tbar-btn-text,
                .e-icons {
                  color: $schedule-active-font-color;
                }
              }
            }
          }
        }

        &.e-tbar-pos > div {
          height: $schedule-height-inherit;
        }

        .e-tbar-btn.e-btn {
          &.e-tbtn-txt {
            .e-icons.e-icon-right.e-btn-icon.e-icon-down-arrow {
              font-size: $schedule-tbar-down-arrow-font-size;
              margin-top: $schedule-tbar-down-arrow-margin-top;
            }
          }
        }

        .e-toolbar-left {
          .e-tbar-btn.e-icon-btn {
            &:focus,
            &:hover {
              border-radius: $schedule-header-hover-border-radius;
            }
          }
        }

        .e-toolbar-item {
          &.e-day .e-icon-day,
          &.e-week .e-icon-week,
          &.e-work-week .e-icon-workweek,
          &.e-month .e-icon-month,
          &.e-year .e-icon-year,
          &.e-agenda .e-icon-agenda,
          &.e-month-agenda .e-icon-month-agenda,
          &.e-timeline-day .e-icon-timeline-day,
          &.e-timeline-week .e-icon-timeline-week,
          &.e-timeline-work-week .e-icon-timeline-workweek,
          &.e-timeline-month .e-icon-timeline-month,
          &.e-timeline-year .e-icon-timeline-year-vertical,
          &.e-timeline-year .e-icon-timeline-year-horizontal,
          &.e-add .e-tbar-btn-text,
          &.e-today .e-icon-day,
          &.e-today .e-icon-today {
            display: none;
          }

          &.e-hidden {
            display: none;
          }

          &.e-prev .e-icon-prev,
          &.e-next .e-icon-next {
            font-size: $schedule-date-navigation-font-size;
          }

          &.e-separator {
            border-right: $schedule-tbar-separator-size $border-type $schedule-tbar-separator-border;
          }

          &.e-date-range .e-tbar-btn {
            &.e-schedule-date-range-tbtn {
              width: auto;
            }
            .e-tbar-btn-text {
              font-size: $schedule-header-nrml-font-size;
              text-transform: initial;
            }
          }
        }
      }

      &.e-rtl .e-hor-nav {
        border-left: $schedule-border-0;
        border-right: $border-size $schedule-tbar-border-nav-type $schedule-tbar-border-nav;

        &:not(.e-nav-active):hover {
          background: $schedule-tbar-hover-bg;
          color: $schedule-tbar-hover-font;
        }
      }

      .e-hor-nav  {
        border-left: $border-size $schedule-tbar-border-nav-type $schedule-tbar-border-nav;

        &::after {
          @include tbar-btn-animation;
        }

        &:active {
          color: $schedule-tbar-hover-font;

          &::after {
            @include tbar-btn-animation-after;
          }
        }

        &:hover {
          background: $schedule-tbar-hover-bg;
          color: $schedule-tbar-hover-font;
        }

        &:focus {
          background: $schedule-tbar-hover-bg;
          color: $schedule-tbar-hover-font;
        }
      }
    }

    &.e-adaptive {
      .e-schedule-toolbar {
        .e-toolbar-items {
          .e-toolbar-item {
            &.e-today .e-icon-today {
              display: block;
            }

            &.e-today .e-icon-today + .e-tbar-btn-text {
              display: none;
            }
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-device {
      .e-schedule-toolbar {
        height: $schedule-tbar-bgr-size;
        min-height: $schedule-tbar-bgr-size;

        .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn {
          &:hover,
          &:focus {
            height: calc($schedule-height-p100 - $schedule-height-20);
          }
        }

        .e-toolbar-items {
          height: $schedule-tbar-bgr-size;

          .e-toolbar-item {
            &.e-today .e-icon-today + .e-tbar-btn-text {
              display: none;
            }
            &.e-today .e-icon-today {
              display: block;
            }
          }

          &.e-tbar-pos {
            height: $schedule-tbar-bgr-size;
            min-height: $schedule-tbar-bgr-size;

            .e-toolbar-right .e-toolbar-item .e-tbar-btn {
              border: $schedule-device-tbar-right-items-btn-border;
              border-radius: $schedule-device-tbar-right-items-btn-border-radius;
            }
          }

          &.e-tbar-pos > div {
            height: $schedule-height-inherit;
          }

          .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
            padding: $schedule-tbar-btn-icn-bgr-padding;
          }
        }

        .e-tbar-btn .e-tbar-btn-text {
          font-size: $schedule-content-bgr-font-size;
        }

        .e-date-range .e-tbar-btn .e-tbar-btn-text {
          font-size: $schedule-header-device-font-size;
        }

        .e-toolbar-pop {
          overflow: auto;
        }
      }

      .e-content-wrap.e-scroll-hidden {
        overflow: hidden;
      }
    }

    @media screen and (max-width: 320px) {
      .e-schedule-toolbar {
        .e-toolbar-pop {
          width: 100%;

          .e-toolbar-item .e-tbar-btn.e-btn {
            padding-left: $schedule-spacing-7;
          }

          &.e-rtl {
            .e-toolbar-item .e-tbar-btn.e-btn {
              padding-right: $schedule-spacing-7;
            }
          }
        }

        .e-tbar-btn .e-tbar-btn-text {
          font-size: $schedule-device-font-size;
        }
      }
    }

    .e-schedule-resource-toolbar {
      background: $schedule-tbar-default-bg;
      border-bottom: $schedule-tbar-border-bottom-size;
      box-shadow: $schedule-tbar-box-shadow;
      display: flex;
      margin-bottom: $schedule-tbar-box-shadow-bottom-margin;
      min-height: $schedule-tbar-min-height;
      padding: $schedule-spacing-10;

      .e-resource-menu {
        .e-icon-menu {
          color: $schedule-icon-color;
          font-size: $schedule-font-icon-size-14;
          padding: $schedule-spacing-7;
          padding-left: $schedule-spacing-4;
        }

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

      .e-resource-level-title {
        display: flex;

        .e-resource-name {
          font-size: $schedule-font-size-14;
          padding: $schedule-spacing-5;
          color: $schedule-tree-content-color;

          &:not(:last-child) {
            opacity: .6;
          }
        }

        .e-icon-next {
          color: $schedule-icon-color;
          font-size: $schedule-font-icon-size-10;
          line-height: $schedule-line-height-18;
          opacity: .4;
          padding: $schedule-spacing-5;
        }
      }

      &.e-popup-close {
        display: none;
      }

      &.e-popup-open {
        display: block;
      }
    }

    .e-text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .e-text-center {
      text-align: center;
    }

    .e-table-container {
      display: inline-flex;
      position: relative;
      vertical-align: top;

      &.e-translate {
        transition: transform .1s ease 0s;
      }
    }

    .e-resource-tree-popup {
      background: $schedule-tree-bg-color;
      box-shadow: $schedule-more-indicator-shadow-color-res-tree-popup;
      height: $schedule-height-p100;
      position: absolute;
      width: 250px;
      color: $schedule-tree-font-color;

      .e-resource-tree {
        height: $schedule-height-p100;
        overflow-y: auto;
      }

      .e-resource-tree.e-treeview .e-text-content {
        padding: $schedule-resource-tree-text-content-padding;
      }
    }

    .e-resource-tree-popup-overlay {
      &.e-enable {
        background: $schedule-popup-overlay-bg-color;
        height: $schedule-height-p100;
        left: 0;
        opacity: .5;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }

    .e-new-event {
      background: $schedule-appointment-bg-color;
      border: $schedule-border-1 solid $schedule-appointment-font-color;
      border-radius: $schedule-border-radius-5;
      height: $schedule-height-p100;
      opacity: .9;
      position: relative;
      width: 100%;
      z-index: 1;

      .e-title {
        color: $schedule-appointment-font-color;
        font-size: $schedule-font-size-12;
        line-height: $schedule-line-height-1-2;
        margin: $schedule-spacing-0;
        overflow-wrap: break-word;
        padding: $schedule-spacing-3;
        position: absolute;
        text-align: left;
        white-space: normal;
        word-wrap: break-word;
      }
    }

    .e-schedule-table {
      border: $schedule-border-0 none;
      border-collapse: separate;
      border-spacing: 0;
      margin: $schedule-spacing-0;
      table-layout: fixed;
      width: 100%;
    }

    .e-schedule-table > tbody > tr > th,
    .e-schedule-table > tbody > tr > td {
      box-sizing: border-box;
      font-weight: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .e-outer-table > tbody > tr > td {
      padding: $schedule-spacing-0;
      vertical-align: top;
    }

    .e-content-wrap {
      position: relative;

      .e-day-wrapper {
        width: 100%;
      }
    }

    .e-content-placeholder {
      height: $schedule-height-p100;
      position: relative;
      width: 100%;
      z-index: 99999;
    }

    .e-content-wrap,
    .e-scroll-container {
      -webkit-overflow-scrolling: touch; /* stylelint-disable-line property-no-vendor-prefix */
      overflow: auto;
    }

    .e-hide-childs > * {
      display: none;
    }

    .e-recurrence-icon,
    .e-recurrence-edit-icon {
      font-size: $schedule-recurrence-font-size;
    }

    .e-left-icon,
    .e-right-icon {
      font-size: $schedule-font-icon-size-8;
    }

    .e-m-date {
      cursor: pointer;
      font-size: $schedule-font-size-20;

      &:hover {
        text-decoration: underline;
      }
    }

    .e-m-day {
      font-size: $schedule-font-size-12;
    }

    #{if(&, '&', '*')}.e-device {
      .e-m-date {
        &:hover {
          text-decoration: none;
        }
      }
    }

    .e-block-appointment {
      background: $schedule-block-appointment-bg-color;
      color: $schedule-block-appointment-font-color;
      cursor: default;
      overflow: hidden;
      position: absolute;

      &.e-hidden-event {
        display: none;
      }

      .e-subject {
        overflow: hidden;
        overflow-wrap: break-word;
        padding: $schedule-spacing-4;
        white-space: normal;
        word-wrap: break-word;
      }
    }

    .e-block-indicator {
      color: $schedule-block-appointment-font-color;
      float: right;
      padding: $schedule-spacing-0 $schedule-spacing-5;
      z-index: 1;

      &.e-hidden-event {
        display: none;
      }
    }

    #{if(&, '&', '*')}.e-rtl .e-block-indicator {
      float: left;
    }

    .e-timeline-view .e-block-indicator,
    .e-timeline-month-view .e-block-indicator {
      position: absolute;
      top: 3px;
    }

    .e-appointment {
      opacity: 1;
      transition: opacity 100ms linear;

      &.e-hidden-event {
        display: none;
      }

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

      .e-inline-appointment {
        z-index: 1;
      }

      .e-inline-subject {
        @include schedule-inline-appointment-styles;
      }

      &.e-event-action {
        opacity: $schedule-drag-appointment-opacity;
      }

      &.e-allow-select {
        pointer-events: none;
      }
    }

    .e-read-only {
      opacity: .8;
    }

    #{if(&, '&', '*')}.e-event-action .e-appointment:not(.e-schedule-event-clone),
    #{if(&, '&', '*')}.e-event-action .e-block-appointment {
      pointer-events: none;
    }

    #{if(&, '&', '*')}.e-event-action .e-drag-clone,
    #{if(&, '&', '*')}.e-event-action .e-timeline-view .e-drag-clone {
      cursor: move;

      .e-top-handler,
      .e-bottom-handler {
        pointer-events: none;
      }
    }

    #{if(&, '&', '*')}.e-event-action .e-vertical-view .e-appointment-wrapper .e-resize-clone {
      cursor: ns-resize;
    }

    #{if(&, '&', '*')}.e-event-action .e-timeline-view .e-resize-clone,
    #{if(&, '&', '*')}.e-event-action .e-timeline-month-view .e-resize-clone,
    #{if(&, '&', '*')}.e-event-action .e-all-day-appointment-wrapper .e-resize-clone {
      cursor: ew-resize;
    }

    #{if(&, '&', '*')}.e-device {
      .e-appointment {
        overflow: hidden;
      }

      .e-appointment.e-appointment-border {
        .e-top-bottom-resize {
          height: $schedule-height-10;
          left: 50%;
          position: absolute;
          transform: translateX(-50%);
          width: 100%;
        }

        .e-left-right-resize {
          border-radius: $schedule-border-radius-50;
          height: $schedule-height-p100;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 10px;
        }

        .e-top-handler .e-top-bottom-resize {
          margin-top: $schedule-negative-spacing-8;
        }

        .e-bottom-handler .e-top-bottom-resize {
          margin-top: $schedule-spacing-8;
        }

        .e-left-handler .e-left-right-resize {
          margin-left: $schedule-negative-spacing-8;
        }

        .e-right-handler .e-left-right-resize {
          margin-left: $schedule-spacing-8;
        }
      }
    }

    .e-timeline-year-view {
      .e-event-resize {

        &.e-left-handler,
        &.e-right-handler {
          height: $schedule-height-p100;
          width: 5px;
        }

        &.e-top-handler,
        &.e-bottom-handler {
          height: $schedule-height-5;
          width: 100%;
        }
      }
    }

    .e-event-resize {
      position: absolute;

      &.e-left-handler,
      &.e-right-handler {
        height: $schedule-height-p100;
        min-width: 1px;
        max-width: 10px;
        width: 20%;
      }

      &.e-left-handler {
        cursor: ew-resize;
        float: left;
        left: 0;
      }

      &.e-right-handler {
        cursor: e-resize;
        float: right;
        right: 0;
      }

      &.e-top-handler,
      &.e-bottom-handler {
        min-height: 1px;
        max-height: 10px;
        height: $schedule-height-p20;
        width: 100%;
      }

      &.e-top-handler {
        cursor: ns-resize;
        top: 0;
      }

      &.e-bottom-handler {
        bottom: 0;
        cursor: ns-resize;
      }
    }

    .e-vertical-view {
      .e-month-event-table {
        position: absolute;
        top: 0;
      }

      &.e-timescale-disable {
        .e-content-table,
        .e-content-wrap {
          height: $schedule-height-p100;
        }

        .e-all-day-row,
        .e-all-day-cells {
          height: $schedule-height-0 !important; /* stylelint-disable-line declaration-no-important */
        }

        .e-appointment {
          @include schedule-appointments-styles;
          height: $schedule-timescale-appointment-height;
          margin-bottom: $schedule-spacing-2;

          &.e-hidden-event {
            display: none;
          }

          .e-appointment-details {
            display: flex;
            flex: auto;
            padding: $schedule-spacing-2 $schedule-spacing-4 $schedule-spacing-0 $schedule-spacing-2;
            text-align: left;
          }

          .e-inner-wrap {
            flex: auto;
            overflow: hidden;
          }

          .e-subject {
            @include schedule-appointments-subject-styles;
            overflow-wrap: break-word;
            padding-top: $schedule-spacing-1;
            white-space: normal;
            word-wrap: break-word;
          }

          .e-time,
          .e-location {
            font-size: $schedule-font-size-11;
            overflow: hidden;
            padding-top: $schedule-spacing-1;
            text-overflow: ellipsis;
          }

          .e-disable {
            display: none;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon {
            line-height: $schedule-timescale-recurrence-icon-line-height;
            padding: $schedule-spacing-0 $schedule-spacing-5;
          }

          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-timescale-recurrence-icon-line-height;
            padding: $schedule-spacing-0 $schedule-spacing-2;
          }

          &.e-appointment-border,
          &:focus {
            border: $schedule-border-0;
            box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
          }

          &.e-allow-select {
            pointer-events: none;
          }
        }

        .e-appointment-wrapper {
          position: absolute;
          width: 0;
        }

        .e-work-cells {
          height: $schedule-height-auto;
          vertical-align: top;
        }

        .e-more-indicator {
          @include schedule-more-appointment-styles;

          &.e-hidden-event {
            display: none;
          }

          &:focus {
            text-decoration: underline;
          }
        }
      }

      .e-left-indent {
        width: $schedule-time-scale-width;

        .e-all-day-cells {
          position: relative;
        }
      }

      .e-date-header-wrap table col,
      .e-content-wrap table col {
        width: $schedule-header-cells-width;
      }

      .e-resource-cells {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-header-day-nrml-font-size;
        height: $schedule-height-40;
        padding: $schedule-spacing-8;
        padding-left: $schedule-spacing-15;
      }

      .e-header-cells {
        font-size: $schedule-font-size-12;
        height: $schedule-header-cells-height;
        padding: $schedule-header-cells-padding;

        .e-header-day {
          display: table;
          font-size: $schedule-header-day-nrml-font-size;
          line-height: $schedule-header-day-line-height;
          padding-bottom: $schedule-header-day-padding-bottom;
        }

        .e-header-date {
          cursor: pointer;
          display: table;
          font-size: $schedule-header-date-nrml-font-size;
          line-height: $schedule-header-date-line-height;
          padding-top: $schedule-header-padding-top;

          &:hover {
            text-decoration: underline;
          }
        }

        &.e-disable-dates {
          .e-header-day {
            cursor: default;
            opacity: .35;
          }

          .e-header-date {
            cursor: default;
            opacity: .35;

            &:hover {
              text-decoration: none;
            }
          }
        }
      }

      .e-row-count-wrapper {
        display: block;
        height: $schedule-height-p100;
        pointer-events: none;
        position: relative;

        .e-more-indicator {
          bottom: 0;
          color: $schedule-secondary-content-font-color;
          cursor: pointer;
          overflow: hidden;
          overflow-wrap: normal;
          padding: $schedule-spacing-2 $schedule-spacing-4;
          pointer-events: visible;
          position: absolute;
          text-overflow: ellipsis;
          width: 100%;

          &.e-hidden-event {
            display: none;
          }

          &:focus {
            text-decoration: underline;
          }
        }

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

      .e-all-day-appointment-section {
        bottom: 4px;
        color: $schedule-tbar-default-icon-color;
        cursor: pointer;
        display: block;
        font-size: $schedule-font-size-11;
        height: $schedule-height-25;
        left: 0;
        line-height: $schedule-line-height-25;
        margin: $schedule-spacing-0 auto;
        position: absolute;
        right: 0;
        transform: rotate(0deg);
        transition: transform 300ms ease-in-out;
        width: 25px;

        &.e-disable {
          display: none;
        }

        &.e-appointment-expand {
          transform: rotate(0deg);
        }

        &.e-appointment-collapse {
          transform: rotate(180deg);
        }

        &:hover,
        &:focus {
          background: $schedule-header-hover-color;
          border-radius: $schedule-border-radius-full;
          color: $schedule-all-day-section-hover-color;
        }
      }

      .e-appointment-hide {
        opacity: 0;
      }

      .e-all-day-cells {
        height: $schedule-allday-cells-height;
        padding: $schedule-spacing-0;
        text-align: center;
        vertical-align: top;
      }

      .e-all-day-cells:first-child {
        &.e-animate {
          transition: 250ms ease-out;
        }
      }

      .e-time-cells-wrap table td,
      .e-work-cells {
        font-size: $schedule-time-scale-nrml-font-size;
        height: $schedule-work-cells-height;
        text-align: center;
      }

      .e-work-cells {
        width: $schedule-work-cells-width;

        &.e-disable-dates {
          background: $schedule-disable-dates-color;

          &:hover {
            background: $schedule-disable-dates-color;
          }
        }
      }

      &.e-virtual-mask .e-work-cells {
        background: $schedule-disable-dates-color;
        box-shadow: inset 0 0 0 8px $schedule-work-cells-bg-color;

        &:hover {
          background: $schedule-disable-dates-color;
        }
      }

      .e-current-time {
        font-size: $schedule-current-time-nrml-font-size;
      }

      .e-clone-time-indicator,
      .e-current-time,
      .e-previous-timeline,
      .e-current-timeline {
        left: 0;
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: 100%;
      }

      .e-previous-timeline,
      .e-current-timeline {
        z-index: 1;
      }

      .e-date-header-wrap {
        max-height: 300px;
        overflow: hidden;

        &.e-all-day-scroll {
          border-bottom: $schedule-border-1 solid $schedule-appointment-border-color;
          overflow-y: auto;

          .e-header-row .e-resource-cells {
            position: sticky;
          }

          .e-header-row .e-header-cells {
            position: sticky;
            top: 0;
          }
        }

        &.e-all-day-auto {
          max-height: unset;
        }
      }

      .e-time-cells-wrap {
        overflow: hidden;
      }

      .e-content-wrap,
      .e-time-cells-wrap {
        position: relative;
      }

      .e-timeline-wrapper,
      .e-day-wrapper,
      .e-all-day-appointment-wrapper {
        height: $schedule-height-0;
        margin: $schedule-spacing-0;
        padding: $schedule-spacing-0;
        position: relative;
      }

      .e-appointment-wrapper-hidden {
        visibility: hidden;
      }

      .e-all-day-appointment-wrapper .e-appointment:not(.e-schedule-event-clone) {
        cursor: default;
      }

      .e-all-day-appointment-wrapper .e-appointment {
        @include schedule-appointments-styles;
        height: $schedule-month-appointment-height;

        &.e-hidden-event {
          display: none;
        }

        .e-appointment-details {
          display: flex;
          flex: auto;
          line-height: $schedule-month-appointment-text-line-height;
          overflow: hidden;
          padding: $schedule-spacing-1 $schedule-spacing-0 $schedule-spacing-1 $schedule-spacing-4;

          .e-subject {
            flex: auto;
            font-size: $schedule-font-size-13;
            font-weight: $schedule-font-weight-medium;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .e-time {
            display: block;
            font-size: $schedule-font-size-11;
            padding: $schedule-spacing-1 $schedule-spacing-4 $schedule-spacing-2 $schedule-spacing-0;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon,
          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-appointment-text-line-height;
            padding: $schedule-spacing-0 $schedule-spacing-2;
          }
        }

        .e-disable {
          display: none;
        }

        &.e-appointment-border,
        &:focus {
          border: $schedule-border-0;
          box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
        }
      }

      .e-day-wrapper .e-appointment:not(.e-schedule-event-clone) {
        cursor: default;
      }

      .e-day-wrapper .e-appointment {
        background: $schedule-appointment-bg-color;
        border: $schedule-border-1 solid $schedule-appointment-border-color;
        border-radius: $schedule-appointment-border-radius;
        color: $schedule-appointment-font-color;
        overflow: hidden;
        position: absolute;

        .e-appointment-details {
          flex: auto;
          padding: $schedule-appointment-details-padding;
          text-align: left;
          line-height: $schedule-appointment-detail-line-height;
        }

        .e-subject {
          @include schedule-appointments-subject-styles;
          overflow-wrap: break-word;
          padding-top: $schedule-spacing-4;
          white-space: normal;
          word-wrap: break-word;
        }

        .e-time,
        .e-location {
          font-size: $schedule-font-size-11;
          overflow: hidden;
          padding-top: $schedule-spacing-1;
          text-overflow: ellipsis;
        }

        .e-time {
          display: block;
        }

        .e-disable {
          display: none;
        }

        .e-recurrence-icon,
        .e-recurrence-edit-icon {
          bottom: 5px;
          display: block;
          float: right;
          height: $schedule-height-auto;
          left: auto;
          position: absolute;
          right: 5px;
          width: auto;
        }

        .e-indicator {
          display: block;
          margin: $schedule-spacing-0 $schedule-spacing-percentage-45;
        }

        .e-up-icon,
        .e-down-icon {
          font-size: $schedule-font-icon-size-8;
        }

        .e-up-icon {
          margin-top: $schedule-spacing-3;
          top: 0;
        }

        .e-down-icon {
          bottom: 6px;
          position: absolute;
        }

        &.e-appointment-border,
        &:focus {
          border: $schedule-border-0;
          box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
        }
      }

      &.e-day-view .e-header-date {
        cursor: default;

        &:hover {
          text-decoration: none;
        }
      }
    }

    #{if(&, '&', '*')}.e-device {
      .e-vertical-view {
        .e-header-cells {
          .e-header-day {
            font-size: $schedule-header-day-device-font-size;
          }

          .e-header-date {
            font-size: $schedule-header-date-device-font-size;

            &:hover {
              text-decoration: none;
            }
          }
        }

        .e-left-indent {
          width: $schedule-device-time-scale-width;
        }

        .e-clone-time-indicator,
        .e-current-time {
          font-size: $schedule-font-size-9;
        }

        .e-time-cells-wrap {
          float: left;
          width: $schedule-device-time-scale-width;

          table td {
            font-size: $schedule-time-scale-device-font-size;
          }
        }

        .e-day-wrapper .e-appointment .e-subject {
          font-weight: $schedule-font-weight-medium;
          min-height: auto;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      text-align: right;

      .e-vertical-view {
        &.e-timescale-disable .e-appointment-details {
          text-align: right;
        }

        .e-all-day-appointment-wrapper .e-appointment .e-appointment-details {
          padding: $schedule-spacing-1 $schedule-spacing-4 $schedule-spacing-1 $schedule-spacing-0;
        }

        .e-day-wrapper .e-appointment {
          .e-appointment-details {
            line-height: $schedule-line-height-15;
            text-align: right;
          }

          .e-subject {
            font-weight: $schedule-font-weight-medium;
            margin-right: auto;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon {
            float: left;
            left: 5px;
            right: auto;
          }
        }
      }

      &.e-device {
        .e-vertical-view .e-time-cells-wrap {
          float: right;
        }
      }
    }

    @media screen and (max-width: 480px) {
      .e-vertical-view {
        .e-left-indent {
          width: $schedule-device-time-scale-width;
        }
      }
    }

    .e-month-view,
    .e-month-agenda-view {
      .e-left-indent {
        border-right: $border-size $border-type $schedule-content-border-color;
        width: 36px;
      }

      .e-week-number-wrapper {
        overflow: hidden;
        position: relative;

        .e-schedule-table {
          height: $schedule-height-p100;
        }

        .e-week-number {
          color: $schedule-secondary-content-font-color;
          padding-top: $schedule-spacing-4;
          text-align: center;
          vertical-align: top;
          width: 36px;
        }
      }
    }

    .e-clipboard {
      cursor: default;
      height: $schedule-height-1;
      left: -1000px;
      position: fixed;
      resize: none;
      top: -1000px;
      width: 1px;
      overflow: hidden;
      opacity: 0;
    }

    .e-month-view {
      .e-month-event-table {
        position: absolute;
        top: 0;
      }

      .e-content-wrap table tr:last-child td {
        border-bottom-width: $schedule-border-0;
      }

      .e-date-header-wrap {
        font-size: $schedule-date-header-wrap-nrml-font-size;
        overflow: hidden;
      }

      .e-week-number {
        border-bottom: $border-size $border-type $schedule-content-border-color;
        border-right: $border-size $border-type $schedule-content-border-color;
        height: $schedule-month-work-cells-height;
      }

      .e-content-wrap {
        font-size: $schedule-date-header-wrap-nrml-font-size;
      }

      .e-date-header-wrap table col {
        width: $schedule-header-cells-width;
      }

      .e-resource-cells {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-date-header-wrap-nrml-font-size;
        height: $schedule-height-40;
        padding: $schedule-spacing-8;
        padding-left: $schedule-spacing-15;
      }

      .e-header-cells {
        cursor: default;
        font-weight: normal;
        height: $schedule-month-header-cells-nrml-height;
        padding: $schedule-month-header-cells-padding;
      }

      .e-content-table {
        height: $schedule-height-p100;
      }

      .e-work-cells {
        height: $schedule-month-work-cells-height;
        vertical-align: top;
        width: $schedule-work-cells-width;

        &.e-disable-date {
          .e-date-header {
            visibility: hidden;
          }
        }

        &.e-disable-dates {
          background: $schedule-disable-dates-color;

          .e-date-header {
            cursor: default;
            opacity: .35;

            &:hover {
              text-decoration: none;
            }
          }

          &:hover {
            background: $schedule-disable-dates-color;
          }
        }
      }

      &.e-virtual-mask .e-work-cells {
        background: $schedule-disable-dates-color;
        box-shadow: inset 0 0 0 8px $schedule-work-cells-bg-color;

        &:hover {
          background: $schedule-disable-dates-color;
        }
      }

      .e-date-header {
        cursor: pointer;
        display: table;
        height: $schedule-height-20;
        line-height: $schedule-date-header-line-height;
        margin: $schedule-date-header-margin;
        text-align: center;

        &:hover {
          text-decoration: underline;
        }
      }

      .e-appointment-wrapper {
        position: absolute;
      }

      .e-new-event {
        height: calc($schedule-height-p100 - $schedule-height-25);
      }

      .e-block-indicator {
        margin-top: $schedule-negative-spacing-20;
      }

      .e-inline-appointment {
        z-index: 1;
      }

      .e-appointment {
        @include schedule-appointments-styles;
        cursor: default;
        height: $schedule-month-appointment-height;

        .e-disable {
          display: none;
        }

        &.e-hidden-event {
          display: none;
        }

        .e-appointment-details {
          display: flex;
          flex: auto;
          line-height: $schedule-month-appointment-text-line-height;
          overflow: hidden;

          .e-subject {
            flex: auto;
            font-size: $schedule-font-size-13;
            font-weight: $schedule-font-weight-medium;
            overflow: hidden;
            padding: $schedule-month-appointment-subject-padding;
            text-overflow: ellipsis;
          }

          .e-inline-subject {
            padding: $schedule-spacing-4;
            text-align: center;
          }

          .e-time {
            font-size: $schedule-font-size-11;
            padding: $schedule-month-appointment-time-padding;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon,
          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-recurrence-icon-line-height;
            padding: $schedule-spacing-0 $schedule-spacing-2;
          }
        }

        &.e-appointment-border,
        &:focus {
          border: $schedule-border-0;
          box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
        }

        &.e-allow-select {
          pointer-events: none;
        }

        .e-subject {
          padding: $schedule-spacing-2;
          width: 100%;
        }
      }

      .e-more-indicator {
        @include schedule-more-appointment-styles;

        &.e-hidden-event {
          display: none;
        }

        &:focus {
          text-decoration: underline;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-month-view {
        .e-date-header {
          margin: $schedule-date-header-margin-rtl;
        }

        .e-left-indent,
        .e-week-number {
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right-width: $schedule-border-0;
        }
      }
    }

    .e-year-view {
      .e-calendar-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .e-month-calendar.e-calendar {
          border: $schedule-border-0;
          flex: 0 25%;
          max-width: 100%;
          min-width: $schedule-calendar-width;
          padding: $schedule-spacing-10;
          @if ($theme-name == 'fluent2') {
            box-shadow: none;
          }

          .e-header .e-title {
            cursor: default;
          }

          .e-content span.e-day {
            display: block;
            margin: $schedule-spacing-0 auto;
          }

          .e-other-month {
            color: $schedule-secondary-content-font-color;
            pointer-events: visible;
            touch-action: auto;

            &.e-today {
              opacity: .5;
            }
          }

          .e-appointment,
          .e-appointment-indicator {
            background: $schedule-appointment-bg-color;
            border-radius: $schedule-border-radius-50;
            height: $schedule-height-5;
            margin: $schedule-negative-spacing-6 auto $schedule-spacing-0;
            position: relative;
            width: 5px;
          }
        }

        .e-work-cells {
          &.e-disable-dates {
            background: $schedule-disable-dates-color;
            cursor: default;

            .e-day {
              cursor: default;
            }

            &:hover {
              background: $schedule-disable-dates-color;
            }
          }
        }
      }

      .e-date-header-wrap {
        font-size: $schedule-date-header-wrap-nrml-font-size;
        overflow: hidden;

        table {
          col {
            width: $schedule-header-cells-width;
          }

          td {
            background: $schedule-header-bg-color;
            border-color: $schedule-header-border-color;
            border-style: $border-type;
            border-width: $schedule-month-work-cells-border;
            color: $schedule-header-font-color;
            text-align: left;

            &:first-child {
              border-left-width: $schedule-border-0;
            }
          }
        }
      }

      .e-resource-cells {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-date-header-wrap-nrml-font-size;
        height: $schedule-height-40;
        padding: $schedule-spacing-8;
        padding-left: $schedule-spacing-15;
      }

      .e-content-wrap table td:first-child {
        border-left-width: $schedule-border-0;
      }

      .e-resource .e-month-calendar {
        max-width: 100%;
        min-width: 100%;
      }
    }

    .e-timeline-year-view {
      .e-date-header-wrap,
      .e-month-header-wrapper {
        overflow: hidden;
        position: relative;
      }

      .e-month-header-wrapper {
        .e-schedule-table {
          height: $schedule-height-p100;

          &.e-auto-height {
            height: $schedule-height-auto;
          }
        }
      }

      .e-date-header-wrap table col,
      .e-content-wrap table col {
        width: 100px;
      }

      .e-resource-left-td,
      .e-date-header-wrap table td {
        background: $schedule-header-bg-color;
        border-color: $schedule-header-border-color;
        border-style: $border-type;
        border-width: $schedule-border-0 $border-size $border-size $schedule-border-0;
        color: $schedule-header-font-color;
        text-align: center;

        &.e-current-day {
          color: $schedule-active-font-color;
        }
      }

      .e-resource-text {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-font-size-13;
        overflow: hidden;
        padding: $schedule-timeline-year-resource-text-padding;
        text-overflow: ellipsis;
      }

      .e-resource-left-td {
        vertical-align: middle;
        width: $schedule-timeline-resources-width;
      }

      .e-left-indent-wrap .e-resource-cells,
      .e-date-header-wrap .e-resource-cells {
        height: $schedule-height-40;
      }

      .e-resource-column-wrap {
        overflow: hidden;
        position: relative;

        .e-resource-cells {
          background: $schedule-work-cells-bg-color;
          border-color: $schedule-content-border-color;
          border-style: $border-type;
          border-width: $schedule-border-0 $schedule-border-1 $schedule-border-1 $schedule-border-0;
          color: $schedule-primary-content-font-color;
          height: $schedule-timeline-year-work-cells-height;
          padding-left: $schedule-timeline-year-resource-cells-padding-left;
          padding-right: $schedule-spacing-0;
          vertical-align: middle;

          &.e-child-node {
            background: $schedule-workhour-bg-color;
          }

          &:focus {
            background: $schedule-resource-focus-bg-color;
          }
        }
      }

      .e-resource-column-table {
        height: $schedule-height-p100;

        &.e-auto-height {
          height: $schedule-height-auto;
        }
      }

      .e-resource-tree-icon {
        color: $schedule-icon-color;
        cursor: pointer;
        float: left;
        font-family: 'e-icons';
        font-size: $schedule-font-icon-size-12;
        padding: $schedule-spacing-4 $schedule-spacing-7;
      }

      .e-resource-collapse {
        transform: rotate(90deg);
      }

      .e-content-table {
        height: $schedule-height-p100;

        &.e-auto-height {
          height: $schedule-height-auto;
        }
      }

      .e-left-indent td {
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: $schedule-border-0 $border-size $schedule-border-0 $schedule-border-0;
        vertical-align: middle;
      }

      .e-left-indent tr:last-child td {
        border-width: $schedule-border-0 $border-size $border-size $schedule-border-0;
      }

      &.e-horizontal .e-left-indent {
        padding: $schedule-spacing-0;
        width: 100px;
      }

      &.e-vertical .e-left-indent,
      &.e-vertical .e-left-indent .e-header-cells {
        width: 100px;
      }

      .e-month-header {
        border-bottom: $border-size $border-type $schedule-content-border-color;
        border-right: $border-size $border-type $schedule-content-border-color;
        text-align: center;
        color: $schedule-header-font-color;

        &.e-current-day {
          color: $schedule-active-font-color;
        }
      }

      .e-left-indent,
      .e-header-cells {
        cursor: default;
        font-weight: normal;
        height: $schedule-month-header-cells-nrml-height;
        padding: $schedule-timeline-year-left-indent-padding;
        text-align: center;
      }

      .e-month-header,
      .e-work-cells {
        height: $schedule-timeline-year-work-cells-height;
      }

      .e-header-cells,
      .e-work-cells {
        width: $schedule-timeline-year-work-cells-width;
      }

      .e-work-cells {
        vertical-align: top;

        .e-date-header {
          cursor: pointer;
          display: table;
          height: $schedule-height-20;
          line-height: $schedule-date-header-line-height;
          margin: $schedule-date-header-margin;
          text-align: center;
          width: 10px;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .e-event-table {
        position: absolute;
        top: 0;

        .e-appointment-container.e-event-container {
          height: $schedule-timeline-year-work-cells-height;
          position: relative;
        }

        .e-appointment-wrapper {
          position: absolute;
        }

        .e-inline-appointment {
          z-index: 1;
        }

        .e-appointment {
          @include schedule-appointments-styles;
          cursor: default;
          height: $schedule-month-appointment-height;

          &.e-hidden {
            display: none;
          }

          &.e-hidden-event {
            display: none;
          }

          .e-appointment-details {
            display: flex;
            flex: auto;
            line-height: $schedule-line-height-20;
            overflow: hidden;
          }

          .e-subject {
            flex: auto;
            font-size: $schedule-font-size-13;
            font-weight: $schedule-font-weight-medium;
            overflow: hidden;
            padding: $schedule-spacing-1 $schedule-spacing-2;
            text-overflow: ellipsis;
          }

          .e-time,
          .e-location {
            font-size: $schedule-font-size-11;
            overflow: hidden;
            padding: $schedule-spacing-1-5;
            text-overflow: ellipsis;
          }

          .e-disable {
            display: none;
          }

          .e-recurrence-icon,
          .e-recurrence-edit-icon {
            line-height: $schedule-recurrence-icon-line-height;
            padding: $schedule-spacing-0 $schedule-spacing-5;
          }

          .e-left-icon,
          .e-right-icon {
            line-height: $schedule-recurrence-icon-line-height;
            padding: $schedule-spacing-0 $schedule-spacing-2;
          }

          &.e-appointment-border,
          &:focus {
            border: $schedule-border-0;
            box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
          }

          &.e-allow-select {
            pointer-events: none;
          }
        }

        .e-more-indicator {
          @include schedule-more-appointment-styles;

          &.e-hidden-event {
            display: none;
          }

          &.e-hidden {
            display: none;
          }

          &:focus {
            text-decoration: underline;
          }
        }
      }
    }

    #{if(&, '&', '*')}.e-device {
      .e-year-view {
        .e-calendar-wrapper .e-month-calendar.e-calendar {
          max-width: 100%;
          min-width: 100%;
        }
      }
    }

    .e-timeline-view,
    .e-timeline-month-view {
      .e-content-wrap,
      .e-content-table {
        height: $schedule-height-p100;
      }

      .e-date-header-wrap {
        font-size: $schedule-date-header-wrap-nrml-font-size;
        overflow: hidden;
        position: relative;
      }

      .e-event-table {
        position: absolute;
        top: 0;
      }

      .e-appointment-container.e-event-container {
        height: $schedule-timeline-work-cells-height;
        position: relative;
      }

      .e-date-header-wrap table col,
      .e-content-wrap table col {
        width: $schedule-timeline-work-cells-width;
      }

      .e-date-header-wrap table tbody td {
        height: $schedule-timeline-header-cells-height;
        overflow: hidden;
        padding: $schedule-timeline-date-header-wrap-padding;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-date-header-wrap table tbody td.e-time-slots {
        background: $schedule-timeline-header-time-slots-bg;
        overflow: inherit;
      }

      .e-date-header-wrap table tbody td > span {
        position: relative;
      }

      .e-navigate {
        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }

        &:focus {
          text-decoration: underline;
        }
      }

      .e-work-cells {
        height: $schedule-timeline-work-cells-height;

        &.e-disable-dates {
          background: $schedule-disable-dates-color;

          &:hover {
            background: $schedule-disable-dates-color;
          }
        }
      }

      .e-resource-text {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-font-size-13;
        overflow: hidden;
        padding: $schedule-timeline-year-resource-text-padding;
        text-overflow: ellipsis;
      }

      .e-resource-left-td {
        background: $schedule-header-bg-color;
        border-color: $schedule-header-border-color;
        border-style: $border-type;
        border-width: $schedule-border-0 $schedule-border-1 $schedule-border-1 $schedule-border-0;
        color: $schedule-header-font-color;
        vertical-align: middle;
        width: $schedule-timeline-resources-width;
      }

      .e-resource-cells {
        background: $schedule-work-cells-bg-color;
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: $schedule-border-0 $schedule-border-1 $schedule-border-1 $schedule-border-0;
        color: $schedule-primary-content-font-color;
        height: $schedule-timeline-work-cells-height;
        padding-left: $schedule-timeline-year-resource-cells-padding-left;
        padding-right: $schedule-spacing-0;
        vertical-align: middle;

        &:focus {
          background: $schedule-resource-focus-bg-color;
        }
      }

      .e-resource-column-wrap {
        overflow: hidden;
        position: relative;
      }

      .e-resource-column-table {
        height: $schedule-height-p100;
      }

      .e-auto-height {
        height: $schedule-height-auto;
      }

      &.e-ignore-whitespace .e-work-cells,
      &.e-ignore-whitespace .e-resource-cells,
      &.e-ignore-whitespace .e-event-container {
        height: $schedule-height-42;
      }

      &.e-virtual-mask .e-work-cells {
        background: $schedule-disable-dates-color;
        box-shadow: inset 0 0 0 8px $schedule-work-cells-bg-color;
      }

      .e-resource-tree-icon {
        color: $schedule-icon-color;
        cursor: pointer;
        float: left;
        font-family: 'e-icons';
        font-size: $schedule-font-icon-size-12;
        padding: $schedule-spacing-4 $schedule-spacing-7;
      }

      .e-resource-collapse {
        transform: rotate(90deg);
      }

      .e-child-node {
        background: $schedule-workhour-bg-color;
      }

      .e-appointment-wrapper {
        position: absolute;
      }

      .e-inline-appointment {
        z-index: 1;
      }

      .e-appointment {
        @include schedule-appointments-styles;
        cursor: default;
        height: $schedule-timeline-appointment-height;

        &.e-hidden-event {
          display: none;
        }

        .e-appointment-details {
          display: flex;
          flex: auto;
          overflow: hidden;
          padding: $schedule-spacing-0 $schedule-spacing-4;

          .e-inner-wrap {
            flex: auto;
            overflow: hidden;
          }
        }

        .e-subject {
          @include schedule-appointments-subject-styles;
          padding-top: $schedule-spacing-4;
          text-overflow: ellipsis;
        }

        .e-time,
        .e-location {
          font-size: $schedule-font-size-11;
          overflow: hidden;
          padding-top: $schedule-spacing-1;
          text-overflow: ellipsis;
        }

        .e-time {
          display: block;
          line-height: $schedule-line-height-1-4;
        }

        .e-disable {
          display: none;
        }

        .e-recurrence-icon,
        .e-recurrence-edit-icon {
          line-height: $schedule-timeline-recurrence-icon-line-height;
          padding: $schedule-spacing-0 $schedule-spacing-5;
        }

        .e-indicator {
          display: block;
        }

        .e-left-icon,
        .e-right-icon {
          font-size: $schedule-font-icon-size-10;
          line-height: $schedule-timeline-recurrence-icon-line-height;
          padding-right: $schedule-spacing-7;
        }

        .e-right-icon {
          padding-right: $schedule-spacing-5;
        }

        &.e-appointment-border,
        &:focus {
          border: $schedule-border-0;
          box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
        }

        &.e-allow-select {
          pointer-events: none;
        }
      }

      .e-more-indicator {
        @include schedule-more-appointment-styles;

        &.e-hidden-event {
          display: none;
        }

        &:focus {
          text-decoration: underline;
        }
      }
    }

    .e-timeline-view {
      .e-navigate {
        font-size: $schedule-date-header-wrap-nrml-font-size;
      }

      .e-clone-time-indicator,
      .e-current-time {
        bottom: 0;
        position: absolute;
      }

      .e-current-timeline {
        position: absolute;
        top: 0;
      }
    }

    .e-timeline-month-view {
      .e-date-header-wrap table col,
      .e-content-wrap table col {
        width: $schedule-timeline-month-cells-width;
      }
    }

    .e-virtual-scroll {
      .e-content-wrap.e-transition,
      .e-resource-column-wrap.e-transition {
        overscroll-behavior: none;
      }

      &.e-vertical-view,
      &.e-month-view {
        .e-content-table {
          transform: translateX(0);
        }
      }

      &.e-timeline-view,
      &.e-timeline-month-view,
      &.e-timeline-year-view.e-vertical {
        .e-content-table {
          transform: translateY(0);
        }
      }

      .e-content-table {
        position: absolute;

        &.e-virtual-relative {
          position: relative;
        }
      }

      .e-content-wrap,
      .e-resource-column-wrap {
        &.e-transition {
          transition: all 1000ms linear; // sass-lint:disable-line no-transition-all
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-timeline-view,
      .e-timeline-month-view {
        .e-appointment {
          .e-left-icon,
          .e-right-icon {
            padding: $schedule-spacing-0 $schedule-spacing-0 $schedule-spacing-0 $schedule-spacing-5;
          }
        }

        .e-inline-appointment {
          z-index: 1;
        }

        .e-resource-left-td {
          border-width: $schedule-border-0 $schedule-border-0 $schedule-border-1 $schedule-border-1;
        }

        .e-resource-cells {
          border-width: $schedule-border-0 $schedule-border-0 $schedule-border-1 $schedule-border-1;
          padding-right: $schedule-spacing-15;
        }

        .e-resource-tree-icon {
          float: right;
        }

        .e-appointment.e-schedule-event-clone .e-appointment-details .e-inner-wrap {
          text-align: right;
        }

        .e-date-header-wrap table tbody td {
          padding: $schedule-rtl-timeline-date-header-wrap-padding;
        }
      }
    }

    #{if(&, '&', '*')}.e-device {
      .e-month-view,
      .e-timeline-view,
      .e-timeline-month-view {
        .e-date-header-wrap {
          font-size: $schedule-date-header-wrap-device-font-size;
        }

        .e-date-header-wrap td {
          border-left-width: $schedule-border-0;
          border-right-width: $schedule-border-0;
        }

        .e-content-wrap {
          font-size: $schedule-content-device-font-size;
        }

        .e-date-header {
          &:hover {
            text-decoration: none;
          }
        }

        .e-more-indicator {
          font-size: $schedule-font-size-12;
        }

        .e-navigate {
          &:hover {
            text-decoration: none;
          }
        }
      }
    }

    .e-month-agenda-view {
      .e-schedule-resource-toolbar {
        .e-resource-menu {
          margin-top: $schedule-spacing-6;

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

        .e-resource-level-title .e-icon-next {
          margin-top: $schedule-spacing-4;
        }
      }

      .e-week-number-wrapper .e-week-number {
        border-right: $border-size $border-type $schedule-content-border-color;
        height: $schedule-height-40;
        padding-top: $schedule-spacing-8;
      }

      .e-wrapper-container {
        position: relative;
      }

      .e-week-number-wrapper .e-schedule-table,
      .e-content-table {
        border-bottom: $schedule-month-agenda-border;
        box-shadow: $schedule-box-shadow;
        height: $schedule-height-p100;
      }

      .e-resource-column {
        @include schedule-resource-column-styles;
        border-right: $border-size $border-type $schedule-content-border-color;
      }

      .e-resource-name {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-date-header-wrap-device-font-size;
        line-height: $schedule-line-height-26;
        overflow: hidden;
        padding: $schedule-spacing-8;
        text-overflow: ellipsis;
      }

      .e-day-padding {
        padding-left: $schedule-spacing-8;
      }

      .e-day-border {
        border-bottom: $border-size $border-type $schedule-content-border-color;
      }

      .e-date-header-wrap {
        font-size: $schedule-date-header-wrap-device-font-size;
        overflow: hidden;
      }

      .e-content-wrap {
        font-size: $schedule-date-header-wrap-nrml-font-size;
      }

      .e-header-cells {
        cursor: default;
        font-weight: normal;
        height: $schedule-month-header-cells-nrml-height;
        padding: $schedule-spacing-5;
        text-align: center;
      }

      .e-work-cells {
        height: $schedule-height-40;
        position: relative;
        vertical-align: top;

        &.e-disable-dates {
          background: $schedule-disable-dates-color;

          &:hover {
            background: $schedule-disable-dates-color;
          }
        }
      }

      .e-date-header {
        height: $schedule-height-24;
        line-height: $schedule-line-height-24-5;
        margin: $schedule-spacing-4 auto $schedule-spacing-0;
        text-align: center;
        width: 24px;
      }

      .e-appointment-container {
        min-height: 40px;
      }

      .e-appointment-wrap {
        background: $schedule-agenda-color;
        overflow: auto;
        padding: $schedule-spacing-0 $schedule-spacing-8;
      }

      .e-appointment {
        border-left: $schedule-border-3 solid $schedule-appointment-bg-color;
        border-right: $schedule-border-0;
        cursor: default;
        padding: $schedule-month-agenda-appointment-padding;

        &:hover {
          background: $schedule-hover-bg-color;
          @include schedule-agenda-interaction-color($schedule-hover-font-color);
        }

        &.e-appointment-border,
        &:focus {
          background: $schedule-select-bg-color;
        }

        @include schedule-agenda-focus-color($schedule-select-font-color);
        &.e-template {
          display: inline-flex;
          flex-direction: row-reverse;
        }
      }

      .e-subject-wrap {
        display: flex;
      }

      .e-subject,
      .e-inline-subject {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-font-size-14;
        line-height: $schedule-line-height-26;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-inline-subject {
        font-weight: normal;
        padding-top: $schedule-spacing-0;
      }

      .e-recurrence-icon,
      .e-recurrence-edit-icon {
        color: $schedule-secondary-content-font-color;
        line-height: $schedule-line-height-26;
        padding: $schedule-spacing-0 $schedule-spacing-10;
      }

      .e-date-time {
        color: $schedule-secondary-content-font-color;
        font-size: $schedule-font-size-12;
        line-height: $schedule-line-height-26;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-location {
        color: $schedule-secondary-content-font-color;
        font-size: $schedule-font-size-12;
        line-height: $schedule-line-height-26;
        overflow: hidden;
        padding-left: $schedule-spacing-8;
        text-overflow: ellipsis;
      }

      .e-no-event {
        color: $schedule-secondary-content-font-color;
        cursor: default;
        font-size: $schedule-font-size-14;
        height: $schedule-height-p100;
        padding: $schedule-spacing-8 $schedule-spacing-4;
      }

      .e-agenda-item.e-month-agenda-view {
        padding: $schedule-month-agenda-item-padding;
      }

      .e-agenda-parent.e-month-agenda-view {
        margin: $schedule-spacing-0;
        padding: $schedule-spacing-0;
      }

      .e-work-cells .e-appointment-indicator {
        background: $schedule-appointment-bg-color;
        border-radius: $schedule-border-radius-50;
        height: $schedule-height-6;
        left: 0;
        margin: $schedule-spacing-1 auto;
        width: 6px;
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-month-agenda-view {
        .e-left-indent,
        .e-week-number {
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right-width: $schedule-border-0;
        }

        .e-appointment {
          border-left: $schedule-border-0;
          border-right: $schedule-border-3 solid $schedule-appointment-bg-color;
        }

        .e-resource-column {
          border-bottom: $border-size $border-type $schedule-content-border-color;
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right: $schedule-border-0;
          vertical-align: top;
          width: 75px;

          .e-resource-name {
            white-space: normal;
          }
        }

        .e-day-padding {
          padding-right: $schedule-spacing-8;
        }
      }
    }

    #{if(&, '&', '*')}.e-device {
      .e-month-agenda-view {
        .e-date-header-wrap {
          font-size: $schedule-date-header-wrap-device-font-size;
        }

        .e-content-wrap {
          font-size: $schedule-content-device-font-size;
        }
      }
    }

    .e-agenda-view {
      background: $schedule-agenda-color;

      .e-agenda-load-more {
        font-size: $schedule-font-size-14;
      }

      .e-content-wrap table td:first-child,
      .e-date-column {
        vertical-align: top;
        width: 75px;
      }

      .e-resource-column {
        @include schedule-resource-column-styles;
        color: $schedule-header-font-color;
        border-right: $border-size $border-type $schedule-content-border-color;
      }

      .e-month-header {
        background: $schedule-appointment-bg-color;
        height: $schedule-height-100;
        padding-top: $schedule-spacing-12;
        vertical-align: top;

        .e-date-header {
          color: $schedule-appointment-font-color;
          font-size: $schedule-font-size-18;
        }
      }

      .e-day-date-header {
        color: $schedule-header-font-color;
        cursor: default;
        padding: $schedule-agenda-date-header-padding;

        .e-m-date {
          font-size: $schedule-header-date-nrml-font-size;
          line-height: $schedule-agenda-date-line-height;
        }

        .e-m-day {
          font-size: $schedule-header-day-nrml-font-size;
        }

        &.e-current-day {
          color: $schedule-active-font-color;
        }
      }

      .e-day-border {
        border-bottom: $border-size $border-type $schedule-content-border-color;
      }

      .e-date-border {
        border-bottom: $border-size $border-type $schedule-content-border-color;
        border-right: $border-size $border-type $schedule-content-border-color;
      }

      .e-day-padding {
        padding-left: $schedule-spacing-8;
      }

      .e-date-header {
        font-size: $schedule-font-size-20;
      }

      .e-day-header {
        font-size: $schedule-font-size-12;
      }

      .e-subject-wrap {
        display: flex;
        margin-bottom: $schedule-agenda-subject-wrap-margin-bottom;
      }

      .e-active-appointment-agenda {
        .e-subject {
          color: $schedule-select-font-color;
        }

        .e-date-time {
          color: $schedule-select-font-color;
        }

        .e-resource-name {
          color: $schedule-select-font-color;
        }

        .e-recurrence-icon,
        .e-recurrence-edit-icon {
          color: $schedule-select-font-color;
        }

        .e-location {
          color: $schedule-select-font-color;
        }
      }

      .e-subject,
      .e-inline-subject {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-font-size-14;
        line-height: $schedule-line-height-23;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-inline-subject {
        font-weight: normal;
        padding-top: $schedule-spacing-0;
      }

      .e-resource-name {
        color: $schedule-primary-content-font-color;
        font-size: $schedule-header-day-nrml-font-size;
        line-height: $schedule-line-height-26;
        overflow: hidden;
        padding: $schedule-spacing-8;
        text-overflow: ellipsis;
      }

      .e-recurrence-icon,
      .e-recurrence-edit-icon {
        color: $schedule-primary-content-font-color;
        line-height: $schedule-agenda-recurrence-icon-line-height;
        padding: $schedule-spacing-0 $schedule-spacing-10;
      }

      .e-date-time {
        color: $schedule-secondary-content-font-color;
        font-size: $schedule-font-size-12;
        line-height: $schedule-agenda-recurrence-icon-line-height;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .e-location {
        color: $schedule-secondary-content-font-color;
        font-size: $schedule-font-size-12;
        line-height: $schedule-line-height-23;
        overflow: hidden;
        padding-left: $schedule-spacing-8;
        text-overflow: ellipsis;
      }

      .e-agenda-item {
        padding: $schedule-agenda-item-padding;
      }

      .e-agenda-parent {
        margin: $schedule-spacing-0;
        padding: $schedule-spacing-0;
      }

      .e-appointment {
        border-left: $schedule-border-3 solid $schedule-appointment-bg-color;
        border-right: $schedule-border-0;
        cursor: default;
        padding: $schedule-agenda-appointment-padding;

        &:hover {
          background: $schedule-hover-bg-color;
          @include schedule-agenda-interaction-color($schedule-hover-font-color);
        }

        &.e-appointment-border,
        &:focus {
          background: $schedule-select-bg-color;
        }

        @include schedule-agenda-focus-color($schedule-select-font-color);
        &.e-template {
          display: inline-flex;
          flex-direction: row-reverse;
        }
      }

      .e-no-event {
        color: $schedule-secondary-content-font-color;
        cursor: default;
        font-size: $schedule-font-size-14;
        line-height: $schedule-line-height-52;
        padding: $schedule-spacing-0 $schedule-spacing-11;
      }

      .e-empty-event {
        color: $schedule-secondary-content-font-color;
        cursor: default;
        font-size: $schedule-font-size-14;
        line-height: $schedule-line-height-52;
        padding: $schedule-spacing-0 $schedule-spacing-11;
      }
    }

    #{if(&, '&', '*')}.e-device {
      .e-agenda-view,
      .e-month-agenda-view {
        .e-m-date {
          font-size: $schedule-header-date-device-font-size;
        }

        .e-resource-name,
        .e-m-day {
          color: $schedule-primary-content-font-color;
          font-size: $schedule-header-day-device-font-size;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-agenda-view {
        .e-appointment {
          border-left: $schedule-border-0;
          border-right: $schedule-border-3 solid $schedule-appointment-bg-color;
        }

        .e-resource-column {
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right: $schedule-border-0;
          @include schedule-resource-column-styles;

          .e-resource-name {
            white-space: normal;
          }
        }

        .e-day-padding {
          padding-right: $schedule-spacing-8;
        }

        .e-date-border {
          border-bottom: $border-size $border-type $schedule-content-border-color;
          border-left: $border-size $border-type $schedule-content-border-color;
          border-right: $schedule-border-0;
        }
      }
    }
  }

  .e-schedule.e-read-only .e-toolbar-item.e-add.e-overflow-show {
    display: none;
  }

  .e-schedule.e-multi-drag {
    .e-vertical-view {
      .e-all-day-appointment-wrapper .e-appointment {
        &.e-appointment-border,
        &:focus {
          border: $schedule-appointment-selected-border;
        }
      }

      &.e-timescale-disable {
        .e-appointment {
          &.e-appointment-border,
          &:focus {
            border: $schedule-appointment-selected-border;
          }
        }
      }

      .e-day-wrapper .e-appointment {
        &.e-appointment-border,
        &:focus {
          border: $schedule-appointment-selected-border;
        }
      }
    }

    .e-month-view {
      .e-appointment {
        &.e-appointment-border,
        &:focus {
          border: $schedule-appointment-selected-border;
        }
      }
    }

    .e-timeline-year-view {
      .e-event-table {
        .e-appointment {
          &.e-appointment-border,
          &:focus {
            border: $schedule-appointment-selected-border;
          }
        }
      }
    }

    .e-timeline-view,
    .e-timeline-month-view {
      .e-appointment {
        &.e-appointment-border,
        &:focus {
          border: $schedule-appointment-selected-border;
        }
      }
    }
  }

  .e-more-popup-wrapper.e-multi-drag {
    .e-appointment {
      &.e-appointment-border,
      &:focus {
        border: $schedule-appointment-selected-border;
      }
    }
  }

  /*! schedule event tooltip */
  .e-schedule-event-tooltip .e-subject {
    font-size: $schedule-font-size-12;
  }

  .e-tooltip-hidden {
    visibility: hidden;
  }

  .e-field-error-message {
    display: block;
  }

  .e-dialog.e-quick-dialog.e-following-events-dialog {
    width: 440px;

    .e-footer-content {
      padding: $schedule-following-events-dlg-padding;

      button {
        margin-bottom: $schedule-spacing-6;
      }
    }
    @media screen and (max-width: 767px) {
      width: 289px;

      .e-footer-content {
        padding: $schedule-spacing-percentage-5;

        button {
          margin-bottom: $schedule-spacing-percentage-5;
        }
      }
    }
  }

  .e-dialog.e-quick-dialog {
    user-select: none;
    width: 320px;

    .e-disable {
      display: none;
    }

    .e-dlg-header-content {
      border-bottom: $schedule-alert-dialog-border;
    }

    .e-footer-content {
      border-top: $schedule-alert-dialog-border;

      button {
        margin-bottom: $schedule-spacing-6;
      }
    }

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

  /*! schedule event window */

  .e-schedule-dialog {
    .e-disable {
      display: none;
    }

    .e-icon-disable {
      opacity: .5;
    }

    .e-dlg-header-content {
      padding-bottom: $schedule-spacing-8;
    }

    .e-dlg-content {
      padding-bottom: $schedule-spacing-12;
      position: relative;
    }

    .e-event-delete {
      float: left;
    }

    .e-subject-container,
    .e-start-container,
    .e-description-label {
      padding-right: $schedule-spacing-8;
    }

    .e-start-time-zone-container {
      padding-left: $schedule-spacing-4;
      padding-right: $schedule-spacing-8;
    }

    .e-location-container,
    .e-end-container {
      padding-left: $schedule-spacing-8;
    }

    .e-end-time-zone-container {
      padding-left: $schedule-spacing-8;
      padding-right: $schedule-spacing-4;
    }

    .e-all-day-container {
      padding-right: $schedule-spacing-16;
    }

    .e-time-zone-row {
      display: flex;
      height: $schedule-height-0;
      margin-bottom: $schedule-spacing-0;
      overflow: hidden;
      padding-bottom: $schedule-spacing-0;
      transition: .3s ease-in-out;
      width: 100%;

      .e-start-time-zone-container,
      .e-end-time-zone-container {
        display: none;
        transform: translateY(-100%);
      }

      &.e-enable {
        height: $schedule-timezone-enable-nrml-height;
        margin-bottom: $schedule-spacing-12;

        .e-start-time-zone-container,
        .e-end-time-zone-container {
          display: block;
          transform: translateY(0);
        }
      }
    }

    .e-title-location-row,
    .e-start-end-row,
    .e-start-input-container,
    .e-end-input-container {
      display: flex;
      padding-bottom: $schedule-dialog-row-container-padding-bottom;
      width: 100%;
    }

    .e-resources {
      padding-bottom: $schedule-spacing-12;
      width: 100%;
    }

    .e-all-day-time-zone-row {
      display: flex;
      padding-bottom: $schedule-dialog-all-day-row-padding-bottom;
      padding-top: $schedule-dialog-all-day-row-padding-top;
      width: 100%;
    }

    .e-subject-container,
    .e-location-container,
    .e-start-container,
    .e-end-container,
    .e-start-time-zone-container,
    .e-end-time-zone-container {
      width: 50%;
    }

    .e-description,
    .e-float-input .e-description {
      height: $schedule-height-50;
      resize: vertical;
    }

    .e-repeat-container,
    .e-input-group .e-input-group-icon.e-icon-disable,
    .e-b-form-container .e-datetime-wrapper.disable-time .e-input-group-icon.e-time-icon {
      display: none;
    }

    .e-footer-content {
      margin-top: $schedule-spacing-4;
    }

    &.e-rtl {
      text-align: right;

      .e-all-day-container {
        margin-left: $schedule-spacing-16;
        margin-right: $schedule-spacing-0;
      }

      .e-subject-container,
      .e-start-container,
      .e-description-label {
        padding-left: $schedule-spacing-8;
        padding-right: $schedule-spacing-0;
      }

      .e-start-time-zone-container {
        padding-left: $schedule-spacing-8;
        padding-right: $schedule-spacing-4;
      }

      .e-location-container,
      .e-end-container {
        padding-left: $schedule-spacing-0;
        padding-right: $schedule-spacing-8;
      }

      .e-end-time-zone-container {
        padding-left: $schedule-spacing-4;
        padding-right: $schedule-spacing-8;
      }

      .e-event-delete {
        float: right;
      }
    }
  }

  .e-editor-content-item-template {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /*! schedule event window for smaller viewports*/
  @media screen and (max-width: 320px) {
    .e-schedule-dialog.e-popup.e-popup-open {
      max-height: 350px;
      min-width: 100%;
    }

    .e-schedule-dialog {
      .e-all-day-container {
        padding-bottom: $schedule-spacing-10;
      }

      .e-all-day-time-zone-row {
        display: block;
      }
    }
  }
  .e-ddl.e-popup {
    .e-resource-template {
      display: flex;
      padding: $schedule-spacing-0 $schedule-spacing-10;
      text-indent: 10px;

      .e-resource-color {
        height: $schedule-resource-color-size;
        margin-top: $schedule-resource-color-margin-top;
        width: $schedule-resource-color-size;
      }
    }
  }

  .e-schedule-dialog.e-device {
    .e-dlg-header,
    .e-dlg-header * {
      width: 100%;
    }

    .e-dlg-header-content {
      background: $schedule-content-bg-color;
      box-shadow: $schedule-tbar-box-shadow;
      @if ($theme-name == 'fluent2') {
        box-shadow: none;
      }
      margin-bottom: $schedule-tbar-box-shadow-bottom-margin;
    }

    .e-title-location-row,
    .e-start-end-row,
    .e-time-zone-row,
    .e-start-input-container,
    .e-end-input-container {
      display: inline;
    }

    .e-time-zone-row {
      &.e-enable {
        display: inline;
      }
    }

    .e-subject-container,
    .e-location-container,
    .e-start-container,
    .e-end-container,
    .e-start-time-zone-container,
    .e-end-time-zone-container {
      padding-left: $schedule-spacing-0;
      width: 100%;
    }

    .e-subject-container,
    .e-start-container,
    .e-start-time-zone-container,
    .e-description-label {
      padding-right: $schedule-spacing-0;
    }

    .e-location-container,
    .e-end-container,
    .e-end-time-zone-container,
    .e-start-container,
    .e-start-time-zone-container,
    .e-subject-container,
    .e-description-row,
    .e-repeat-container {
      padding-top: $schedule-spacing-20;
    }

    .e-all-day-time-zone-row {
      padding-top: $schedule-device-dialog-all-day-row-padding-top;
    }

    .e-resources {
      padding-bottom: $schedule-spacing-0;
      padding-top: $schedule-spacing-20;
    }

    .e-description,
    .e-float-input .e-description {
      height: $schedule-height-60;
      resize: vertical;
    }

    .e-all-day-time-zone-row {
      margin-top: $schedule-spacing-0;
      padding-bottom: $schedule-spacing-0;
    }

    .e-repeat-parent-row {
      padding-top: $schedule-spacing-8;
    }

    .e-all-day-container {
      margin-right: $schedule-spacing-20;
    }

    .e-title-header {
      display: flex;
      width: 100%;
    }

    .e-save-icon,
    .e-back-icon,
    .e-forward-icon {
      cursor: pointer;
      line-height: $schedule-line-height-normal;
    }

    .e-title-text {
      text-align: center;
    }

    .e-save-icon,
    .e-back-icon,
    .e-delete-icon {
      width: 2.5em;
    }

    .e-save-icon,
    .e-delete-icon {
      text-align: right;
    }

    .e-time-zone-row,
    .e-input-group .e-input-group-icon.e-icon-disable {
      display: none;
    }

    .e-repeat-container {
      display: block;
      padding-right: $schedule-spacing-35;
      padding-left: $schedule-spacing-0;
    }

    .e-icon-down-arrow {
      font-size: $schedule-tbar-down-arrow-font-size;
    }

    &.e-rtl {
      .e-save-icon {
        text-align: left;
      }

      .e-all-day-container {
        margin-left: $schedule-spacing-20;
        margin-right: $schedule-spacing-0;
      }

      .e-subject-container,
      .e-start-container,
      .e-start-time-zone-container,
      .e-description-label {
        padding-left: $schedule-spacing-0;
      }

      .e-location-container,
      .e-end-container,
      .e-end-time-zone-container,
      .e-all-day-container {
        padding-right: $schedule-spacing-0;
      }

      .e-repeat-container {
        padding-left: $schedule-spacing-35;
        padding-right: $schedule-spacing-0;
      }
    }

    .e-recurrence-container {
      position: relative;

      &.e-hide {
        display: none;
      }

      .e-recurrence-edit-button {
        border: $schedule-border-0;
        box-shadow: none;
        margin: $schedule-negative-spacing-3 $schedule-spacing-5;
        position: absolute;

        .e-recurrence-edit.e-icons {
          font-size: $schedule-font-icon-size-12;
          position: relative;
          top: 1px;
        }
      }
    }
  }

  /*! schedule quick popup */
  .e-quick-popup-wrapper {
    background: $schedule-popup-bg-color;
    border-radius: $schedule-more-popup-wrapper-border-radius;
    box-shadow: $schedule-popup-box-shadow-1, $schedule-popup-box-shadow-2, $schedule-popup-box-shadow-3;
    color: $schedule-primary-content-font-color;
    max-width: 365px;
    min-width: 320px;
    opacity: 1;
    user-select: none;
    width: 100%;
    border: $schedule-border-1 solid $schedule-popup-border-color;

    .e-hidden {
      display: none;
    }

    .e-cell-popup {
      .e-popup-header .e-header-icon-wrapper {
        position: absolute;
        right: 6px;
        top: 4px;
        padding: $schedule-cell-popup-header-icon-padding;

        .e-edit,
        .e-delete,
        .e-close {
          color: $schedule-popup-icon-color;

          &:focus,
          &:hover {
            background: $schedule-popup-header-icon-focus-bg-color;
            color: $schedule-popup-header-icon-focus-color;
          }

          .e-close-icon {
            font-size: $schedule-popup-header-icon-font-size;
          }
        }
      }

      .e-popup-content {
        padding: $schedule-popup-content-padding;

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

          .e-schedule-form > span {
            margin: $schedule-cell-popup-span-margin;
          }

          .e-subject {
            font-size: $schedule-font-size-22;
            height: $schedule-cell-popup-subject-height;
          }
        }
      }
    }

    .e-event-popup {
      .e-popup-header {
        background: $schedule-event-popup-header-bg-color;

        .e-header-icon-wrapper {
          padding: $schedule-event-popup-header-icon-padding;

          .e-edit,
          .e-delete {
            display: $schedule-event-popup-header-icon-display;
          }

          .e-close {
            position: $schedule-event-popup-header-close-icon-position;
            right: $schedule-event-popup-header-close-icon-right;
          }

          .e-edit,
          .e-delete,
          .e-close {
            color: $schedule-popup-header-icon-color;

            &:focus,
            &:hover {
              background: $schedule-popup-header-icon-hover-bg-color;
              color: $schedule-popup-header-icon-hover-color;
            }
          }

          .e-edit-icon,
          .e-delete-icon,
          .e-close-icon {
            font-size: $schedule-popup-header-icon-font-size;
          }

          .e-edit:disabled,
          .e-delete:disabled {
            &:hover {
              background: none;
            }

            > .e-edit-icon,
            > .e-delete-icon {
              opacity: .5;
            }
          }
        }

        .e-subject-wrap {
          padding: $schedule-event-popup-subject-wrap-padding;

          .e-subject {
            background: $schedule-event-popup-subject-bg-color;
            border-left: $schedule-event-popup-subject-border-left;
            border-radius: $schedule-event-popup-subject-border-radius;
            color: $schedule-event-popup-subject-color;
            cursor: default;
            font-size: $schedule-font-size-20;
            font-weight: $schedule-font-weight-medium;
            line-height: $schedule-line-height-1-5;
            max-height: 87px;
            padding: $schedule-event-popup-subject-padding;
          }
        }
      }

      .e-popup-content {
        padding: $schedule-event-popup-content-padding;
      }
    }

    .e-cell-popup,
    .e-event-popup {
      .e-popup-header .e-popup-header-title-text {
        display: none;
      }
      .e-header-icon-wrapper {
        display: flex;
        justify-content: flex-end;

        .e-edit,
        .e-delete,
        .e-close {
          background: transparent;
          border: $schedule-border-0;
        }
      }

      .e-date-time,
      .e-location,
      .e-time-zone,
      .e-description,
      .e-resource {
        color: $schedule-primary-content-font-color;
        display: flex;
        padding-top: $schedule-event-popup-fields-padding;
      }

      .e-date-time-icon,
      .e-location-icon,
      .e-time-zone-icon,
      .e-description-icon,
      .e-resource-icon {
        color: $schedule-popup-content-icon-color;
        font-size: $schedule-popup-icon-font-size;
        padding: $schedule-popup-icon-padding;
      }

      .e-date-time-details,
      .e-location-details,
      .e-time-zone-details,
      .e-description-details,
      .e-resource-details {
        color: $schedule-primary-content-font-color;
        cursor: default;
        font-size: $schedule-font-size-14;
      }
    }

    .e-popup-table td:last-child {
      padding-top: $schedule-spacing-0;
    }

    .e-popup-footer {
      display: block;
      padding: $schedule-popup-footer-padding;
      text-align: right;

      .e-event-edit {
        margin-right: $schedule-spacing-8;
      }

      .e-event-edit,
      .e-event-delete {
        right: auto;

        &:disabled {
          color: $schedule-disable-font-color;
        }
      }

      .e-event-details {
        border: $schedule-popup-btn-border;
        margin-right: $schedule-spacing-8;
        right: auto;
        text-transform: $schedule-popup-footer-text-transform;
      }
    }

    .e-event-popup .e-popup-footer {
      display: $schedule-event-popup-footer-display;
    }

    &.e-rtl {
      text-align: right;

      .e-cell-popup {
        .e-header-icon-wrapper {
          left: 6px;
          right: auto;
        }
      }

      .e-event-details,
      .e-event-edit {
        margin-left: $schedule-spacing-8;
      }

      .e-popup-footer {
        padding: $schedule-spacing-8 $schedule-spacing-8 $schedule-spacing-8 $schedule-spacing-18;
        text-align: left;
      }

      .e-date-time-icon,
      .e-location-icon,
      .e-time-zone-icon,
      .e-description-icon,
      .e-resource-icon {
        padding: $schedule-spacing-0 $schedule-spacing-0 $schedule-spacing-0 $schedule-spacing-10;
      }
    }

    &.e-device {
      bottom: 0;
      height: $schedule-height-p100;
      left: 0;
      margin: $schedule-spacing-0;
      max-width: 100%;
      overflow: hidden;
      padding: $schedule-spacing-0;
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      z-index: 1004;

      .e-event-popup .e-popup-header {
        .e-header-icon-wrapper {
          background: $schedule-header-icon-wrapper-bg-color;
        }

        .e-header-icon-wrapper .e-edit,
        .e-header-icon-wrapper .e-delete,
        .e-header-icon-wrapper .e-close {
          &:focus,
          &:hover {
            background: none;
          }
        }

        .e-edit.e-btn.e-small.e-round,
        .e-delete.e-btn.e-small.e-round,
        .e-close.e-btn.e-small.e-round {
          height: $schedule-height-2-5;
          width: 2.5em;
        }

        .e-edit,
        .e-delete {
          display: block;
        }

        .e-close {
          margin-left: $schedule-spacing-0;
          margin-right: auto;
          order: -1;
        }

        .e-subject-wrap {
          padding: $schedule-device-event-popup-subject-padding;
        }
      }

      .e-event-popup .e-popup-content {
        padding: $schedule-spacing-12 $schedule-spacing-24;
      }

      .e-multiple-event-popup .e-popup-header {
        display: flex;
        padding: $schedule-spacing-15;

        .e-close,
        .e-edit,
        .e-delete {
          background: $schedule-multiple-event-popup-icon-bg-color;
          border: $schedule-border-0;
          color: $schedule-multiple-event-popup-icon-color;
          height: $schedule-height-35;
          width: 35px;
          &:focus,
          &:hover {
            background: none;
          }
        }

        .e-subject {
          font-size: $schedule-font-size-15;
          font-weight: $schedule-font-weight-medium;
          height: $schedule-height-35;
          line-height: $schedule-line-height-2-25;
          padding: $schedule-multiple-event-popup-subject-padding;
          width: calc(100% - 105px);
        }

        .e-close-icon,
        .e-edit-icon,
        .e-delete-icon {
          font-size: $schedule-multiple-event-popup-icon-font-size;
        }
      }

      &.e-rtl {
        .e-event-popup .e-popup-header {
          .e-close {
            margin-left: auto;
            margin-right: $schedule-spacing-0;
          }
        }
      }
    }
  }

  /*! schedule quick popup for smaller viewports */
  @media screen and (max-width: 320px) {
    .e-quick-popup-wrapper {
      min-width: 100%;

      .e-popup-footer {
        padding-left: $schedule-spacing-5;
      }

      &.e-rtl {
        .e-popup-footer {
          padding-right: $schedule-spacing-5;
        }
      }
    }
  }

  .e-appointment.e-schedule-event-clone {
    background: $schedule-appointment-bg-color;
    border-radius: $schedule-appointment-border-radius;
    box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
    color: $schedule-appointment-font-color;
    height: $schedule-height-38;
    width: 100px;
    z-index: 9;

    &.e-drag-clone {
      cursor: move;
    }

    .e-recurrence-icon,
    .e-recurrence-edit-icon,
    .e-indicator.e-left-icon,
    .e-indicator.e-right-icon,
    .e-event-resize.e-left-handler,
    .e-event-resize.e-right-handler {
      display: none;
    }

    .e-appointment-details {
      flex: auto;
      overflow: hidden;
      padding: $schedule-spacing-0 $schedule-spacing-4;
      text-align: left;

      .e-inner-wrap {
        flex: auto;
        overflow: hidden;
      }

      .e-subject {
        @include schedule-appointments-subject-styles;
        padding-top: $schedule-spacing-4;
        text-overflow: ellipsis;
      }

      .e-time {
        font-size: $schedule-font-size-11;
        overflow: hidden;
        padding-top: $schedule-spacing-1;
        text-overflow: ellipsis;
      }

      .e-location {
        display: none;
      }
    }

    &.e-month-event {
      .e-appointment-details {
        .e-subject {
          padding: $schedule-spacing-0;
        }
      }
    }
  }

  .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-schedule-event-clone {
    .e-appointment-details {
      .e-subject {
        padding: $schedule-spacing-3 $schedule-spacing-0 $schedule-spacing-1 $schedule-spacing-4;
      }

      .e-time {
        display: none;
      }
    }
  }

  .e-month-view .e-appointment.e-schedule-event-clone {
    .e-appointment-details {
      .e-subject {
        line-height: $schedule-month-event-clone-line-height-subject;
      }
    }
  }
}

@media print {
  .e-schedule {
    .e-table-container {
      display: block;
    }

    .e-vertical-view .e-content-table thead {
      break-inside: auto;
    }
  }
}

.e-more-popup-wrapper {
  background: $schedule-popup-bg-color;
  border: $schedule-border-1 solid $schedule-popup-border-color;
  border-radius: $schedule-more-popup-wrapper-border-radius;
  box-shadow: $schedule-more-indicator-shadow-color-more-popup;
  opacity: 1;
  padding: $schedule-more-popup-padding;
  width: 225px;

  .e-more-appointment-wrapper {
    margin: $schedule-spacing-0 $schedule-spacing-4;
  }

  .e-more-event-popup {
    height: $schedule-height-p100;
    position: relative;
    width: 100%;
  }

  .e-more-event-header {
    height: $schedule-height-35;
    margin: $schedule-spacing-0 $schedule-spacing-8 $schedule-spacing-4 $schedule-spacing-14;
  }

  .e-more-event-content {
    color: $schedule-primary-content-font-color;
    height: calc($schedule-height-p100 - $schedule-height-35);
    max-height: 150px;
    overflow-y: auto;
    padding: $schedule-spacing-10 $schedule-spacing-10 $schedule-spacing-0;

    .e-appointment-border {
      border: $schedule-border-0;
      box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
    }
  }

  .e-more-event-date-header {
    height: $schedule-height-p100;
    width: calc(100% - 25px);

    .e-current-date {
      color: $schedule-active-font-color;
    }
  }

  .e-header-day {
    color: $schedule-primary-content-font-color;
    font-size: $schedule-date-header-wrap-nrml-font-size;
    line-height: $schedule-line-height-1;
    padding-bottom: $schedule-more-appointment-margin-bottom;
  }

  .e-header-date {
    color: $schedule-primary-content-font-color;
    font-size: $schedule-header-date-nrml-font-size;
    line-height: $schedule-line-height-1;
    max-width: 15%;

    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }

    &:focus {
      text-decoration: underline;
    }
  }

  .e-more-event-close {
    background: transparent;
    border: $schedule-border-0;
    box-shadow: none;
    color: $schedule-popup-icon-color;
    cursor: pointer;
    height: $schedule-height-25;
    padding: $schedule-bgr-more-event-close-icon-padding;
    position: absolute;
    right: 6px;
    width: 25px;

    .e-close-icon {
      font-size: $schedule-more-event-close-icon-font-size;
    }

    .e-btn-icon {
      margin-top: $schedule-more-popup-close-margin-top;
    }

    &:focus,
    &:hover {
      background: $schedule-popup-header-icon-focus-bg-color;
      border-radius: $schedule-border-radius-50;
      color: $schedule-popup-header-icon-focus-color;
      @if $skin-name == 'fluent2'{
        .e-close-icon {
          color: $schedule-hover-font-color;
        }
      }
    }
  }

  .e-appointment {
    background: $schedule-appointment-bg-color;
    border-radius: $schedule-appointment-border-radius;
    color: $schedule-appointment-font-color;
    display: flex;
    height: $schedule-month-appointment-height;
    line-height: $schedule-appointment-text-line-height;
    margin-bottom: $schedule-more-appointment-margin-bottom;
    padding: $schedule-spacing-2 $schedule-spacing-0;
    width: 100%;

    .e-subject {
      color: $schedule-appointment-font-color;
      flex: auto;
      font-size: $schedule-font-size-13;
      font-weight: $schedule-font-weight-medium;
      overflow: hidden;
      padding: $schedule-spacing-0 $schedule-spacing-2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

    .e-inline-subject {
      @include schedule-inline-appointment-styles;
    }

    .e-recurrence-icon,
    .e-recurrence-edit-icon {
      line-height: $schedule-recurrence-icon-line-height;
      padding: $schedule-spacing-0 $schedule-spacing-2;
    }

    &.e-appointment-border,
    &:focus {
      border: $schedule-border-0;
      box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
    }
  }

  &.e-device {
    bottom: 0;
    height: $schedule-height-p100;
    left: 0;
    margin: $schedule-spacing-0;
    max-width: 100%;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1002;

    .e-more-event-content {
      max-height: unset;
    }
  }

  &.e-rtl {
    .e-header-date {
      padding-right: $schedule-spacing-10;
    }

    .e-header-day {
      padding-right: $schedule-spacing-10;
    }

    .e-more-event-close {
      left: 6px;
      right: auto;
    }
  }
}

@mixin schedule-select-cell-focus-styles {
  @if $skin-name == 'fluent2' {
    &:focus {
      background: $content-bg-color-focus;
    }

    &:focus-visible {
      background: $schedule-select-focus-bg-color;
      box-shadow: $schedule-select-focus-box-shadow;
    }
  }

  @if $skin-name == 'bootstrap5.3' {
    &:focus {
      background: $schedule-select-focus-bg-color;
    }

    &:focus-visible {
      background: $schedule-workhour-bg-color;
      box-shadow: $schedule-select-focus-box-shadow;
    }
  }
}

@mixin more-indicator-hover-styles {
  @if $skin-name =='fluent2' {
    .e-more-indicator {
      color: $schedule-hover-font-color;
    }
  }
}

@include export-module('schedule-theme') {
  .e-schedule {
    background: $schedule-header-bg-color;
    border: $border-size $border-type $schedule-content-border-color;

    .e-date-header-wrap {
      border-color: $schedule-header-border-color;
      border-style: $border-type;
      border-width: $schedule-border-0;
      position: relative;
    }

    .e-header-calendar {
      @if ($skin-name == 'Material3') {
        background: $schedule-calendar-background;
      }
      @else {
        background-color: $schedule-calendar-background;
      }
      box-shadow: $schedule-calendar-shadow;
    }

    .e-vertical-view {
      .e-date-header-wrap table tbody td:first-child,
      .e-content-wrap table td:first-child {
        border-left-width: $schedule-border-0;
      }

      .e-date-header-wrap {
        .e-all-day-cells {
          background: $schedule-header-bg-color;

          &:hover {
            background: $schedule-hover-bg-color;
            @include more-indicator-hover-styles;
          }
        }
      }

      .e-left-indent-wrap table tbody td {
        background: $schedule-header-bg-color;
        border-color: $schedule-header-border-color;
        border-style: $border-type;
        border-width: $schedule-border-0 $schedule-border-1 $schedule-border-1 $schedule-border-0;
        color: $schedule-header-font-color;

        &.e-header-cells {
          border-bottom-width: $schedule-border-0;

          &.e-week-number {
            color: $schedule-secondary-content-font-color;
            font-size: $schedule-date-header-wrap-nrml-font-size;
            padding-top: $schedule-spacing-10;
            text-align: center;
            vertical-align: top;
          }
        }

        &.e-resource-cells {
          border-bottom-color: transparent;
        }
      }

      .e-date-header-wrap table tbody td {
        background: $schedule-header-bg-color;
        border-color: $schedule-header-border-color;
        border-style: $border-type;
        border-width: $schedule-vertical-work-cells-border;
        color: $schedule-header-font-color;
        text-align: left;

        &.e-header-cells {
          border-bottom-width: $schedule-border-0;
        }
      }

      .e-time-cells-wrap table td {
        background: $schedule-time-cells-bg-color;
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: $schedule-border-0 $schedule-border-1 $schedule-border-1 $schedule-border-0;
        color: $schedule-time-cells-font-color;
      }

      .e-time-cells-wrap table td {
        border-bottom-color: transparent;
      }

      .e-time-cells-wrap .e-time-cells {
        border-bottom-color: $schedule-time-cells-border-bottom-color;
      }

      .e-header-cells {
        background: $schedule-header-bg-color;

        &.e-current-day {
          color: $schedule-active-font-color;
          font-weight: $schedule-current-day-font-weight;
        }
      }

      .e-work-cells {
        background: $schedule-work-cells-bg-color;
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: $schedule-vertical-work-cells-border;
        padding: $schedule-spacing-0;

        &:hover {
          background: $schedule-hover-bg-color;
          color: $schedule-hover-font-color;
        }
      }

      .e-alternate-cells {
        border-bottom-style: $schedule-alternate-cell-border;
      }

      .e-work-hours {
        background: $schedule-workhour-bg-color;
      }

      .e-all-day-cells {
        background: $schedule-header-bg-color;

        &.e-current-day {
          color: $schedule-active-font-color;
        }

        &.e-selected-cell {
          background: $schedule-select-bg-color;
          color: $schedule-hover-font-color;
          @include more-indicator-hover-styles;

          &:hover {
            background: $schedule-select-bg-color;
            color: $schedule-selected-cell-hover-font-color;
          }
          @include schedule-select-cell-focus-styles;
        }
      }

      .e-selected-cell {
        background: $schedule-select-bg-color;
        color: $schedule-hover-font-color;

        &:hover {
          background: $schedule-select-bg-color;
          color: $schedule-selected-cell-hover-font-color;
        }
        @include schedule-select-cell-focus-styles;
      }

      .e-clone-time-indicator,
      .e-current-time {
        color: $schedule-active-font-color;
      }

      .e-current-timeline {
        border-top: $schedule-border-1 $border-type $schedule-active-border-color;
      }

      .e-previous-timeline {
        border-top: $schedule-border-1 $schedule-alternate-cell-border $schedule-active-border-color;
      }

      &.e-by-date {
        .e-date-header-wrap table tbody td {
          &.e-header-cells {
            border-bottom-width: $schedule-border-1;
          }
        }
      }
    }

    .e-month-view {
      .e-date-header-wrap table td:first-child,
      .e-content-wrap table td:first-child {
        border-left-width: $schedule-border-0;
      }
    }

    .e-month-view,
    .e-month-agenda-view {
      .e-date-header-wrap table td {
        background: $schedule-header-bg-color;
        border-color: $schedule-header-border-color;
        border-style: $border-type;
        border-width: $schedule-month-work-cells-border;
        color: $schedule-header-font-color;
        font-size: $schedule-month-date-header-cell-font-size;
        text-align: $schedule-month-date-header-cell-text-align;
        text-transform: $schedule-month-date-header-cell-text-transform;

        &.e-current-day {
          color: $schedule-active-font-color;
          font-weight: $schedule-current-day-font-weight;
        }
      }

      .e-work-cells {
        background: $schedule-work-cells-bg-color;
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: $schedule-month-work-cells-border;
        color: $schedule-primary-content-font-color;
        padding: $schedule-spacing-0;

        &:hover {
          background: $schedule-hover-bg-color;
          color: $schedule-work-cell-hover-color;
          @include more-indicator-hover-styles;
        }
      }

      .e-work-days {
        background: $schedule-workhour-bg-color;
      }

      .e-other-month {
        color: $schedule-secondary-content-font-color;
      }

      .e-current-date .e-date-header {
        background: $schedule-current-date-bg-color;
        border-radius: $schedule-border-radius-50;
        color: $schedule-current-date-header-font-color;
        min-width: 20px;
        padding: $schedule-spacing-0 $schedule-spacing-4;
        width: fit-content;
      }

      .e-selected-cell {
        background: $schedule-select-bg-color;
        color: $schedule-select-font-color;

        .e-date-header {
          color: $schedule-selected-date-header-cell-font-color;
        }

        .e-more-indicator {
          color: $schedule-select-font-color;
        }

        &:hover {
          background: $schedule-select-bg-color;
        }
        @include schedule-select-cell-focus-styles;
      }
    }

    .e-month-agenda-view {
      .e-content-wrap .e-table-container {
        overflow: auto;
      }

      .e-date-header-wrap table td {
        border-width: $schedule-month-agenda-header-cells-border;
        text-align: center;
      }

      .e-work-cells {
        border-width: $schedule-month-agenda-work-cells-border;
      }

      .e-current-date .e-date-header {
        min-width: 24px;
      }
    }

    .e-timeline-view,
    .e-timeline-month-view {
      .e-date-header-wrap table td:first-child,
      .e-content-wrap table td:first-child {
        border-left-width: $schedule-border-0;
      }

      .e-date-header-wrap table td {
        background: $schedule-header-bg-color;
        border-color: $schedule-header-border-color;
        border-style: $border-type;
        border-width: $schedule-timeline-work-cells-border;
        color: $schedule-header-font-color;

        &.e-current-day {
          color: $schedule-active-font-color;
          font-weight: $schedule-current-day-font-weight;
        }
      }

      .e-work-cells {
        background: $schedule-work-cells-bg-color;
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: $schedule-timeline-work-cells-border;
        color: $schedule-primary-content-font-color;
        padding: $schedule-spacing-0;

        &:hover:not(.e-resource-group-cells) {
          background: $schedule-hover-bg-color;
          color: $schedule-hover-font-color;
        }
      }

      &.e-virtual-mask .e-work-cells:hover {
        background: $schedule-disable-dates-color;
      }

      .e-work-days {
        background: $schedule-workhour-bg-color;
      }

      .e-resource-group-cells {
        background: $schedule-work-cells-bg-color;
      }

      .e-selected-cell {
        background: $schedule-select-bg-color;
        color: $schedule-select-font-color;

        &:hover:not(.e-resource-group-cells)  {
          background: $schedule-select-bg-color;
        }
      }
    }

    .e-timeline-view {
      .e-work-hours {
        background: $schedule-workhour-bg-color;
      }

      .e-resource-group-cells {
        background: $schedule-work-cells-bg-color;
      }

      .e-selected-cell {
        background: $schedule-select-bg-color;
        color: $schedule-hover-font-color;

        &:hover {
          background: $schedule-select-bg-color;
        }
        @include schedule-select-cell-focus-styles;
      }

      .e-alternate-cells {
        border-left-style: $schedule-alternate-cell-border;
      }

      .e-header-row .e-time-cells {
        border-left-width: $schedule-border-0;
      }

      .e-clone-time-indicator,
      .e-current-time {
        color: $schedule-active-font-color;
        font-size: $schedule-current-time-nrml-font-size;
      }

      .e-current-timeline {
        border-left: $schedule-border-1 $border-type $schedule-active-border-color;
      }
    }

    .e-timeline-year-view {
      .e-work-cells {
        background: $schedule-work-cells-bg-color;
        border-color: $schedule-content-border-color;
        border-style: $border-type;
        border-width: $schedule-border-0 $border-size $border-size $schedule-border-0;
        color: $schedule-primary-content-font-color;
        padding: $schedule-spacing-0;

        &:hover:not(.e-other-month) {
          background: $schedule-hover-bg-color;
          color: $schedule-hover-font-color;
        }

        &.e-work-days {
          background: $schedule-workhour-bg-color;
        }

        &.e-other-month {
          color: $schedule-secondary-content-font-color;
        }

        &.e-current-day .e-date-header {
          background: $schedule-current-date-bg-color;
          border-radius: $schedule-border-radius-50;
          color: $schedule-current-day-active-color;
          margin: $schedule-spacing-2;
          width: 20px;
        }

        &.e-selected-cell {
          background: $schedule-select-bg-color;
          color: $schedule-select-font-color;

          .e-date-header {
            color: $schedule-select-font-color;
          }

          .e-more-indicator {
            color: $schedule-select-font-color;
          }

          &:hover {
            background: $schedule-select-bg-color;
          }
          @include schedule-select-cell-focus-styles;
        }

        &.e-disable-dates {
          background: $schedule-disable-dates-color;

          .e-date-header {
            cursor: default;
            opacity: .35;

            &:hover {
              text-decoration: none;
            }
          }

          &:hover {
            background: $schedule-disable-dates-color;
          }
        }
      }

      &.e-virtual-mask .e-work-cells {
        background: $schedule-disable-dates-color;
        box-shadow: inset 0 0 0 8px $schedule-work-cells-bg-color;

        &:hover {
          background: $schedule-disable-dates-color;
        }
      }
    }

    #{if(&, '&', '*')}.e-rtl {
      .e-vertical-view {
        .e-date-header-wrap table tbody td:first-child,
        .e-content-wrap table td:first-child {
          border-right-width: $schedule-border-0;
        }

        .e-date-header-wrap table tbody td {
          text-align: right;
        }

        .e-date-header-wrap table tbody td,
        .e-work-cells {
          border-width: $schedule-rtl-vertical-work-cells-border;
        }

        .e-left-indent-wrap .e-header-cells,
        .e-date-header-wrap .e-header-cells {
          border-bottom-width: $schedule-border-0;
        }

        .e-left-indent-wrap table tbody td,
        .e-time-cells-wrap table tbody td {
          border-width: $schedule-border-0 $schedule-border-0 $schedule-border-1 $schedule-border-1;
        }
      }

      .e-month-view {
        .e-date-header-wrap table td:first-child,
        .e-content-wrap table td:first-child {
          border-right-width: $schedule-border-0;
        }

        .e-date-header-wrap table td {
          text-align: right;
          border-width: $schedule-rtl-month-work-cells-border;
        }
      }

      .e-month-view,
      .e-month-agenda-view {
        .e-work-cells {
          border-width: $schedule-rtl-month-work-cells-border;
        }
      }

      .e-month-agenda-view {
        .e-work-cells {
          border-width: $schedule-rtl-month-agenda-work-cells-border;
        }
      }

      .e-timeline-view,
      .e-timeline-month-view {
        .e-date-header-wrap table td:first-child,
        .e-content-wrap table td:first-child {
          border-right-width: $schedule-border-0;
        }

        .e-date-header-wrap table td:last-child,
        .e-content-wrap table td:last-child {
          border-left-width: $schedule-border-0;
        }

        .e-date-header-wrap table td,
        .e-content-wrap table td {
          border-width: $schedule-rtl-timeline-work-cells-border;
        }
      }

      .e-timeline-view {
        .e-alternate-cells {
          border-right-style: $schedule-alternate-cell-border;
        }

        .e-header-row .e-time-cells {
          border-right-width: $schedule-border-0;
        }
      }
    }
  }

  .e-tooltip-wrap.e-schedule-error {
    background: $schedule-val-error-bg-color;
    border-color: $schedule-val-error-bg-color;
    z-index: 1000;

    .e-arrow-tip.e-tip-top {
      left: 44%;
    }

    .e-arrow-tip-inner.e-tip-top,
    .e-arrow-tip-outer.e-tip-top {
      border-bottom: $schedule-border-8 solid $schedule-val-error-bg-color;
      color: $schedule-val-error-bg-color;
    }

    .e-arrow-tip-outer.e-tip-bottom,
    .e-arrow-tip-inner.e-tip-bottom {
      border-top: $schedule-border-8 solid $schedule-val-error-bg-color;
      color: $schedule-val-error-bg-color;
    }

    .e-tip-content {
      padding: $schedule-tip-content-padding;
    }

    .e-tip-content,
    .e-tip-content label {
      color: $schedule-val-error-color;
    }
  }
}

@include export-module('schedule-bootstrap-icons') {
  .e-schedule {
    .e-schedule-toolbar {
      & .e-icon-prev::before {
        content: '\e990';
      }

      & .e-icon-next::before {
        content: '\e207';
      }

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

      & .e-icon-today::before {
        content: '\e312';
      }

      & .e-icon-down-arrow::before {
        content: '\e968';
      }

      & .e-icon-day::before {
        content: '\e318';
      }

      & .e-icon-week::before {
        content: '\e320';
      }

      & .e-icon-workweek::before {
        content: '\e319';
      }

      & .e-icon-month-agenda::before {
        content: '\e31c';
      }

      & .e-icon-agenda::before {
        content: '\e31a';
      }

      & .e-icon-month::before,
      & .e-icon-year::before,
      & .e-icon-timeline-year-vertical::before,
      & .e-icon-timeline-year-horizontal::before {
        content: '\e960';
      }

      & .e-icon-timeline-day::before {
        content: '\ea87';
      }

      & .e-icon-timeline-week::before {
        content: '\ea8a';
      }

      & .e-icon-timeline-workweek::before {
        content: '\ea8d';
      }

      & .e-icon-timeline-month::before {
        content: '\ea8f';
      }

      &.e-toolbar {
        .e-popup-down-icon::before,
        .e-popup-up-icon::before {
          content: '\e936';
        }
      }

      &.e-rtl {
        & .e-icon-prev::before {
          content: '\e207';
        }

        & .e-icon-next::before {
          content: '\e990';
        }
      }
    }

    .e-schedule-resource-toolbar {
      & .e-icon-menu::before {
        content: '\e941';
      }

      & .e-icon-next::before {
        content: '\e207';
      }
    }

    .e-close-icon::before {
      content: '\e96c';
    }

    .e-block-indicator::before {
      content: '\e22a';
    }

    .e-appointment {
      .e-recurrence-icon::before {
        content: '\e308';
      }

      .e-recurrence-edit-icon::before {
        content: '\e30a';
      }

      .e-up-icon::before {
        content: '\e306';
      }

      .e-down-icon::before {
        content: '\e304';
      }

      .e-left-icon::before {
        content: '\e302';
      }

      .e-right-icon::before {
        content: '\e300';
      }
    }

    .e-vertical-view .e-all-day-cells {
      .e-all-day-appointment-section::before {
        content: '\e95d';
      }
    }

    &.e-rtl {
      .e-appointment {
        & .e-left-icon::before {
          content: '\e300';
        }

        & .e-right-icon::before {
          content: '\e302';
        }
      }
    }

    .e-resource-tree-icon::before {
      content: '\e230';
    }
  }

  .e-schedule-dialog.e-device {
    .e-back-icon::before {
      content: '\e828';
    }

    .e-save-icon::before {
      content: '\e964';
    }

    .e-delete-icon::before {
      content: '\e94a';
    }

    .e-recurrence-container {
      .e-recurrence-edit-button {
        .e-recurrence-edit.e-icons::before {
          content: '\e944';
        }
      }
    }
  }

  .e-schedule-dialog.e-device.e-rtl {
    .e-back-icon::before {
      content: '\e84d';
    }
  }

  .e-quick-popup-wrapper {
    .e-edit-icon::before {
      content: '\e944';
    }

    .e-delete-icon::before {
      content: '\e94a';
    }

    .e-close-icon::before {
      content: '\e96c';
    }

    .e-time-icon::before {
      content: '\e93e';
    }

    .e-location-icon::before {
      content: '\e30c';
    }

    .e-time-zone-icon::before {
      content: '\e30e';
    }

    .e-description-icon::before {
      content: '\e30d';
    }

    .e-resource-icon::before {
      content: '\e426';
    }

    .e-date-time-icon::before {
      content: '\e423';
    }
  }

  .e-more-popup-wrapper.e-device {
    .e-close-icon::before {
      content: '\e96c';
    }
  }
}

@mixin schedule-inline-appointment-styles {
  background: transparent;
  border: $schedule-border-0;
  color: $schedule-appointment-font-color;
  font-size: $schedule-font-size-13;
  font-weight: $schedule-font-weight-medium;
  line-height: $schedule-line-height-1-2;
  padding-top: $schedule-spacing-4;
  width: 100%;
}

@include export-module('schedule-bigger') {
  .e-bigger .e-schedule,
  .e-bigger.e-schedule {
    .e-schedule-toolbar {
      height: $schedule-tbar-bgr-size;
      min-height: $schedule-tbar-bgr-size;

      .e-tbar-btn .e-tbar-btn-text {
        font-size: $schedule-content-bgr-font-size;
      }

      .e-toolbar-item.e-date-range .e-tbar-btn-text {
        font-size: $schedule-header-bgr-font-size;
      }

      .e-icon-down-arrow {
        font-size: $schedule-tbar-down-arrow-font-size;
      }

      .e-schedule .e-toolbar .e-hor-nav {
        min-height: $schedule-tbar-bgr-items-size;
        min-width: $schedule-tbar-nav-bgr-width;
        z-index: 0;
      }

      .e-toolbar-item {

        .e-btn.e-tbar-btn .e-icons.e-btn-icon {
          font-size: $schedule-bigger-tbar-btn-font-size;
        }

        .e-tbar-btn-text {
          line-height: $schedule-line-height-inherit;
        }
      }

      .e-toolbar-items {
        min-height: $schedule-tbar-bgr-items-size;

        .e-toolbar-item {
          min-height: $schedule-tbar-bgr-items-size;

          &:not(.e-separator):not(.e-spacer) {
            min-width: $schedule-tbar-bgr-item-size;
          }

          &.e-separator {
            height: $schedule-tbar-separator-bgr-height;
            margin: $schedule-tbar-separator-bgr-mrgn;
            min-height: $schedule-tbar-separator-bgr-minheight;
          }

          .e-icons {
            min-width: $schedule-tbar-btn-icon-bgr-width;
          }

          button.e-btn,
          .e-tbar-btn.e-btn.e-control {
            height: $schedule-height-auto;
            line-height: $schedule-tbar-btn-bgr-line-height;
            margin: $schedule-tbar-btn-bgr-mrgn;
            min-width: $schedule-tbar-btn-bgr-minwidth;
            padding: $schedule-tbar-btn-bgr-padding;

            &.e-tbtn-txt {
              .e-icons.e-icon-right {
                padding: $schedule-tbar-btn-icn-right-bgr-padding;
                font-size: $schedule-bigger-tbar-btn-font-size;
              }
            }

            .e-btn-icon {
              padding-top: $schedule-tbar-btn-icn-right-bgr-padding-top;
            }
          }

          .e-tbar-btn .e-tbar-btn-text {
            font-size: $schedule-bgr-tbar-btn-text-font-size;
          }
        }
      }
    }

    .e-more-popup-wrapper {
      .e-header-day {
        font-size: $schedule-header-day-bgr-font-size;
      }
    }

    .e-vertical-view {
      .e-header-cells {
        .e-header-day {
          font-size: $schedule-header-day-bgr-font-size;
        }

        .e-header-date {
          font-size: $schedule-header-date-bgr-font-size;
        }
      }

      .e-resource-cells {
        font-size: $schedule-header-day-bgr-font-size;
      }

      .e-time-cells-wrap table td {
        font-size: $schedule-time-scale-bgr-font-size;
      }

      .e-clone-time-indicator,
      .e-current-time {
        font-size: $schedule-current-time-bgr-font-size;
      }
    }

    &.e-device {
      .e-vertical-view {
        .e-time-cells-wrap table td {
          font-size: $schedule-time-scale-device-font-size;
        }

        .e-clone-time-indicator,
        .e-current-time {
          font-size: $schedule-current-time-bgr-device-font-size;
        }
      }
    }

    .e-month-view {
      .e-header-cells {
        height: $schedule-month-header-cells-bgr-height;
      }

      .e-resource-cells,
      .e-date-header-wrap table td {
        font-size: $schedule-date-month-header-wrap-bgr-font-size;
      }

      .e-content-wrap {
        font-size: $schedule-date-month-header-wrap-bgr-font-size;
      }

      .e-m-date {
        font-size: $schedule-header-date-bgr-font-size;
      }

      .e-resource-name,
      .e-m-day {
        font-size: $schedule-header-day-bgr-font-size;
      }
    }

    .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar {
      min-width: $schedule-bgr-calendar-width;
    }
  }

  /*! schedule event tooltip */

  .e-bigger .e-schedule-event-tooltip,
  .e-schedule-event-tooltip.e-bigger {
    .e-subject {
      font-size: $schedule-font-size-14;
      font-weight: $schedule-font-weight-medium;
    }
  }

  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
    width: 520px;
  }

  .e-bigger .e-dialog.e-quick-dialog {
    min-width: 370px;
  }

  .e-bigger {
    .e-ddl.e-popup .e-resource-template {
      padding: $schedule-spacing-0 $schedule-spacing-15;

      .e-resource-color {
        height: $schedule-bigger-resource-color-size;
        margin-top: $schedule-bigger-resource-color-margin-top;
        width: $schedule-bigger-resource-color-size;
      }
    }

    .e-schedule-dialog {
      .e-disable {
        display: none;
      }

      .e-dlg-header-content {
        padding-bottom: $schedule-spacing-8;
      }

      .e-dlg-content {
        padding-bottom: $schedule-spacing-12;
        position: relative;
      }

      .e-subject-container,
      .e-start-container,
      .e-start-time-zone-container,
      .e-description-label {
        padding-right: $schedule-spacing-12;
      }

      .e-location-container,
      .e-end-container,
      .e-end-time-zone-container {
        padding-left: $schedule-spacing-12;
      }

      .e-all-day-container {
        padding-right: $schedule-spacing-16;
      }

      .e-time-zone-row {
        display: none;

        &.e-enable {
          display: flex;
          height: $schedule-timezone-enable-bgr-height;
        }
      }

      .e-title-location-row,
      .e-start-end-row,
      .e-start-input-container,
      .e-end-input-container,
      .e-time-zone-row {
        display: flex;
        padding-bottom: $schedule-bigger-dialog-row-container-padding-bottom;
        width: 100%;
      }

      .e-resources {
        padding-bottom: $schedule-spacing-12;
        width: 100%;
      }

      .e-all-day-time-zone-row {
        display: flex;
        padding-bottom: $schedule-spacing-20;
        padding-top: $schedule-spacing-0;
        width: 100%;
      }

      .e-subject-container,
      .e-location-container,
      .e-start-container,
      .e-end-container,
      .e-start-time-zone-container,
      .e-end-time-zone-container {
        width: 50%;
      }

      .e-location-container,
      .e-end-container,
      .e-end-time-zone-container,
      .e-start-container,
      .e-start-time-zone-container,
      .e-subject-container,
      .e-description-row,
      .e-repeat-container {
        padding-top: $schedule-spacing-0;
      }

      .e-all-day-time-zone-row {
        padding-bottom: $schedule-spacing-16;
        padding-top: $schedule-bigger-dialog-all-day-row-padding-top;
      }

      .e-description,
      .e-float-input .e-description {
        height: $schedule-height-50;
        resize: vertical;
      }

      .e-time-zone-row,
      .e-repeat-container,
      .e-input-group .e-input-group-icon.e-icon-disable {
        display: none;
      }

      &.e-rtl {
        .e-all-day-container {
          margin-left: $schedule-spacing-20;
          margin-right: $schedule-spacing-0;
        }

        .e-subject-container,
        .e-start-container,
        .e-start-time-zone-container,
        .e-description-label {
          padding-left: $schedule-spacing-12;
          padding-right: $schedule-spacing-0;
        }

        .e-location-container,
        .e-end-container,
        .e-end-time-zone-container {
          padding-left: $schedule-spacing-0;
          padding-right: $schedule-spacing-12;
        }
      }
    }
  }

  /*! schedule quick popup */

  .e-bigger .e-quick-popup-wrapper {
    .e-cell-popup .e-popup-content .e-popup-table .e-subject {
      font-size: $schedule-font-size-24;
    }

    .e-cell-popup .e-popup-content {
      padding: $schedule-bgr-cell-popup-content-padding;
    }

    .e-popup-footer {
      padding: $schedule-bgr-cell-popup-footer-padding;
    }

    .e-cell-popup .e-date-time-icon,
    .e-event-popup .e-date-time-icon {
      padding-right: $schedule-bgr-date-time-icon-padding-right;
    }

    .e-cell-popup .e-popup-header .e-header-icon-wrapper .e-close .e-close-icon {
      font-size: $schedule-font-size-16;
    }

    &.e-rtl {
      .e-cell-popup .e-date-time-icon {
        padding-right: $schedule-spacing-0;
      }

      .e-event-popup {
        .e-date-time-icon,
        .e-location-icon,
        .e-time-zone-icon,
        .e-description-icon,
        .e-resource-icon {
          padding-right: $schedule-bgr-rtl-event-popup-date-time-icon-padding-right;
        }
      }
    }

    .e-cell-popup .e-close.e-btn.e-small.e-round {
      height: $schedule-bgr-event-popup-header-icon-size;
      width: $schedule-bgr-event-popup-header-icon-size;
    }

    .e-event-popup {
      .e-edit.e-btn.e-small.e-round,
      .e-delete.e-btn.e-small.e-round,
      .e-close.e-btn.e-small.e-round {
        height: $schedule-bgr-event-popup-header-icon-size;
        width: $schedule-bgr-event-popup-header-icon-size;
      }
    }

    .e-event-popup .e-popup-header .e-header-icon-wrapper {
      .e-close-icon,
      .e-edit-icon,
      .e-delete-icon {
        font-size: $schedule-bigger-tbar-btn-font-size;
      }
    }

    &.e-device {
      .e-event-popup .e-popup-header .e-header-icon-wrapper {
        .e-close-icon,
        .e-edit-icon,
        .e-delete-icon {
          font-size: $schedule-font-icon-size-14;
        }
      }

      .e-multiple-event-popup .e-popup-header {
        .e-edit.e-btn.e-small.e-round,
        .e-delete.e-btn.e-small.e-round,
        .e-close.e-btn.e-small.e-round {
          height: $schedule-bgr-multiple-event-popup-icon-height;
        }

        .e-subject {
          padding: $schedule-bgr-multiple-event-popup-subject-padding;
        }
      }
    }
  }

  .e-bigger .e-agenda-view {
    .e-appointment {
      padding: $schedule-agenda-big-appointment-padding;
    }
    .e-subject,
    .e-inline-subject  {
      font-size: $schedule-font-size-16;
    }

    .e-date-time {
      font-size: $schedule-font-size-14;
    }

    .e-day-date-header {
      .e-m-date {
        font-size: $schedule-font-size-20;
      }

      .e-m-day {
        font-size: $schedule-font-size-14;
      }
    }
  }

  .e-bigger .e-timeline-view {
    .e-resource-text {
      font-size: $schedule-font-size-14;
      padding-left: $schedule-spacing-12;
    }

    .e-navigate {
      font-size: $schedule-date-header-wrap-bgr-font-size;
      padding: $schedule-spacing-8 $schedule-spacing-0 $schedule-spacing-8 $schedule-spacing-8;
    }

    .e-date-header-wrap table tbody td > span {
      font-size: $schedule-date-header-wrap-bgr-font-size;
      padding: $schedule-spacing-8 $schedule-spacing-0 $schedule-spacing-8 $schedule-spacing-8;
    }
  }

  .e-bigger .e-schedule .e-month-view .e-current-date .e-date-header {
    width: 26px;
  }
}

.e-bigger .e-schedule-dialog.e-device {
  .e-dlg-header,
  .e-dlg-header * {
    width: 100%;
  }

  .e-dlg-header-content {
    background: $schedule-content-bg-color;
    box-shadow: $schedule-tbar-box-shadow;
    @if ($theme-name == 'fluent2') {
      box-shadow: none;
    }
    margin-bottom: $schedule-tbar-box-shadow-bottom-margin;
  }

  .e-title-location-row,
  .e-start-end-row,
  .e-time-zone-row,
  .e-start-input-container,
  .e-end-input-container {
    display: inline;
  }

  .e-time-zone-row {
    &.e-enable {
      display: inline;
    }
  }

  .e-subject-container,
  .e-location-container,
  .e-start-container,
  .e-end-container,
  .e-start-time-zone-container,
  .e-end-time-zone-container {
    padding-left: $schedule-spacing-0;
    width: 100%;
  }

  .e-subject-container,
  .e-start-container,
  .e-start-time-zone-container,
  .e-description-label {
    padding-right: $schedule-spacing-0;
  }

  .e-location-container,
  .e-end-container,
  .e-end-time-zone-container,
  .e-start-container,
  .e-start-time-zone-container,
  .e-subject-container,
  .e-description-row,
  .e-repeat-container {
    padding-top: $schedule-spacing-20;
  }

  .e-all-day-time-zone-row {
    padding-top: $schedule-device-dialog-all-day-row-padding-top;
  }

  .e-resources {
    padding-bottom: $schedule-spacing-0;
    padding-top: $schedule-spacing-20;
  }

  .e-description,
  .e-float-input .e-description {
    height: $schedule-height-60;
    resize: vertical;
  }

  .e-all-day-time-zone-row {
    margin-top: $schedule-spacing-0;
    padding-bottom: $schedule-spacing-0;
  }

  .e-repeat-parent-row {
    padding-top: $schedule-spacing-8;
  }

  .e-all-day-container {
    margin-right: $schedule-spacing-20;
  }

  .e-title-header {
    display: flex;
    width: 100%;
  }

  .e-save-icon,
  .e-back-icon,
  .e-forward-icon {
    cursor: pointer;
    line-height: $schedule-line-height-normal;
  }

  .e-title-text {
    text-align: center;
  }

  .e-save-icon,
  .e-back-icon,
  .e-delete-icon {
    width: 2.5em;
  }

  .e-save-icon,
  .e-delete-icon {
    text-align: right;
  }

  .e-time-zone-row,
  .e-input-group .e-input-group-icon.e-icon-disable {
    display: none;
  }

  .e-repeat-container {
    display: block;
    padding-right: $schedule-spacing-35;
    padding-left: $schedule-spacing-0;
  }

  .e-icon-down-arrow {
    font-size: $schedule-tbar-down-arrow-font-size;
  }

  &.e-rtl {
    .e-save-icon {
      text-align: left;
    }

    .e-all-day-container {
      margin-left: $schedule-spacing-20;
      margin-right: $schedule-spacing-0;
    }

    .e-subject-container,
    .e-start-container,
    .e-start-time-zone-container,
    .e-description-label {
      padding-left: $schedule-spacing-0;
    }

    .e-location-container,
    .e-end-container,
    .e-end-time-zone-container,
    .e-all-day-container {
      padding-right: $schedule-spacing-0;
    }

    .e-repeat-container {
      padding-left: $schedule-spacing-35;
      padding-right: $schedule-spacing-0;
    }
  }

  .e-recurrence-container {
    position: relative;

    &.e-hide {
      display: none;
    }

    .e-recurrence-edit-button {
      border: $schedule-border-0;
      box-shadow: none;
      margin: $schedule-negative-spacing-3 $schedule-spacing-5;
      position: absolute;

      .e-recurrence-edit.e-icons {
        font-size: $schedule-font-size-12;
        position: relative;
        top: 1px;
      }
    }
  }
}

.e-bigger .e-more-popup-wrapper {
  background: $schedule-popup-bg-color;
  border: $schedule-border-1 solid $schedule-popup-border-color;
  border-radius: $schedule-more-popup-wrapper-border-radius;
  box-shadow: $schedule-more-indicator-shadow-color-more-popup;
  opacity: 1;
  padding: $schedule-more-popup-padding;
  width: 225px;

  .e-more-appointment-wrapper {
    margin: $schedule-spacing-0 $schedule-spacing-4;
  }

  .e-more-event-popup {
    height: $schedule-height-p100;
    position: relative;
    width: 100%;
  }

  .e-more-event-header {
    height: $schedule-height-35;
    margin: $schedule-spacing-0 $schedule-spacing-8 $schedule-spacing-4 $schedule-spacing-14;
  }

  .e-more-event-content {
    color: $schedule-primary-content-font-color;
    height: calc($schedule-height-p100 - $schedule-height-35);
    max-height: 150px;
    overflow-y: auto;
    padding: $schedule-spacing-10 $schedule-spacing-10 $schedule-spacing-0;

    .e-appointment-border {
      border: $schedule-border-0;
      box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
    }
  }

  .e-more-event-date-header {
    height: $schedule-height-p100;
    width: calc(100% - 25px);

    .e-current-date {
      color: $schedule-active-font-color;
    }
  }

  .e-header-day {
    color: $schedule-primary-content-font-color;
    font-size: $schedule-date-header-wrap-nrml-font-size;
    line-height: $schedule-line-height-1;
    padding-bottom: $schedule-more-appointment-margin-bottom;
  }

  .e-header-date {
    color: $schedule-primary-content-font-color;
    font-size: $schedule-header-date-nrml-font-size;
    line-height: $schedule-line-height-1;
    max-width: 15%;

    &:hover {
      cursor: pointer;
      text-decoration: underline;
    }

    &:focus {
      text-decoration: underline;
    }
  }

  .e-more-event-close {
    background: transparent;
    border: $schedule-border-0;
    box-shadow: none;
    color: $schedule-popup-icon-color;
    cursor: pointer;
    height: $schedule-height-25;
    padding: $schedule-bgr-more-event-close-icon-padding;
    position: absolute;
    right: 6px;
    width: 25px;

    .e-close-icon {
      font-size: $schedule-more-event-close-icon-font-size;
    }

    .e-btn-icon {
      margin-top: $schedule-more-popup-close-margin-top;
    }

    &:focus,
    &:hover {
      background: $schedule-popup-header-icon-focus-bg-color;
      border-radius: $schedule-border-radius-50;
      color: $schedule-popup-header-icon-focus-color;
    }
  }

  .e-appointment {
    background: $schedule-appointment-bg-color;
    border-radius: $schedule-appointment-border-radius;
    color: $schedule-appointment-font-color;
    display: flex;
    height: $schedule-month-appointment-height;
    line-height: $schedule-appointment-text-line-height;
    margin-bottom: $schedule-more-appointment-margin-bottom;
    padding: $schedule-spacing-2 $schedule-spacing-0;
    width: 100%;

    .e-subject {
      color: $schedule-appointment-font-color;
      flex: auto;
      font-size: $schedule-font-size-13;
      font-weight: $schedule-font-weight-medium;
      overflow: hidden;
      padding: $schedule-spacing-0 $schedule-spacing-2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

    .e-inline-subject {
      @include schedule-inline-appointment-styles;
    }

    .e-recurrence-icon,
    .e-recurrence-edit-icon {
      line-height: $schedule-recurrence-icon-line-height;
      padding: $schedule-spacing-0 $schedule-spacing-2;
    }

    &.e-appointment-border,
    &:focus {
      border: $schedule-border-0;
      box-shadow: $schedule-event-box-shadow-1, $schedule-event-box-shadow-2, $schedule-event-box-shadow-3;
    }
  }

  &.e-device {
    bottom: 0;
    height: $schedule-height-p100;
    left: 0;
    margin: $schedule-spacing-0;
    max-width: 100%;
    overflow: hidden;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1002;

    .e-more-event-content {
      max-height: unset;
    }
  }

  &.e-rtl {
    .e-header-date {
      padding-right: $schedule-spacing-10;
    }

    .e-header-day {
      padding-right: $schedule-spacing-10;
    }

    .e-more-event-close {
      left: 6px;
      right: auto;
    }
  }
}

$image-editor-background: $grey-e6 !default;
$image-editor-border: 1px solid $grey-cc !default;
$image-editor-toolbar-icon-color: $grey-dark-font !default;
$img-editor-cp-preview-border-bottom-color: $base-font !default;
$image-editor-icon-sel-bg-color: $grey-e6 !default;
$image-editor-ddbtn-margin-top: 2px !default;
$image-editor-tbar-height: 42px !default;
$image-editor-bigger-tbar-height: 52px !default;
$image-editor-tbar-btn-fontsize: 16px !default;
$image-editor-bigger-tbar-btn-fontsize: 18px !default;
$image-editor-contextual-toolbar: $grey-darker !default;
$image-editor-drop-border: 2px dashed $grey-dark-font !default;
$image-editor-dropdown-btn-preview-top: -2px !default;
$image-editor-dropdown-btn-preview-left: 0 !default;
$image-editor-bigger-dropdown-btn-preview-top: -1px !default;
$image-editor-bigger-dropdown-btn-preview-left: 0 !default;
$image-editor-slider-handler: calc(50% - 5px) !default;
$image-editor-bigger-slider-handler: calc(50% - 7px) !default;
$image-editor-device-slider-handler: calc(50% - 7px) !default;
$image-editor-finetune-value-span: 31% !default;
$image-editor-finetune-span: 31% !default;
$image-editor-save-dlg-big-btn-pad: 0 10px !default;
$image-editor-save-dlg-grp-btn-padding: 0 12px !default;
$image-editor-save-dlg-dev-grp-btn-padding: 0 12px !default;
$image-editor-button-label: 14.2px !default;
$image-editor-icon-button: 3px !default;
$image-editor-filter-canvas-focus: $grey-dark-font !default;
$image-editor-button-label-mobile: 12px !default;
$image-editor-button-width-mobile: calc(66% - 30px) !default;
$ie-toolbar-img-font-style-margin-left: 0 !default;
$ie-scroll-device-padding-right: 0 !default;
$ie-quality-option-slider-container-margin-left: 0 !default;
$ie-spin-btn-margin: 0 !default;
$ie-drop-area-border-radius: 10px !default;
$ie-drop-area-margin: 10px !default;
$ie-drop-icon-font-size: 50px !default;
$ie-drop-content-font-size: 14px !default;
$ie-drop-info-font-size: 14px !default;
$ie-min-drop-content-font-size: 14px !default;
$ie-toolbar-item-margin-left: 20px !default;
$ie-file-select-padding: 0 !default;
$ie-font-color-caret-margin-top: -4px !default;
$ie-caret-font-size: 10px !default;
$ie-toolbar-left-line-height: 1 !default;
$ie-toolbar-item-span-font-weight: 500 !default;
$ie-toolbar-item-span-margin: 4px !default;
$ie-dropdown-btn-margin: 0 auto !default;
$ie-toolbar-item-canvas-border: 2px solid transparent !default;
$ie-straighten-font-size: 14px !default;
$ie-straighten-padding-x: 10px !default;
$ie-straighten-slider-padding-right: 2px !default;
$ie-straighten-slider-margin-left: 8px !default;
$ie-quality-slider-icon-margin-left: 20px !default;
$ie-img-size-margin: 10px 10px 0 !default;
$ie-img-size-font-size: 14px !default;
$ie-img-save-name-margin-right: 10px !default;
$ie-img-label-name-margin-bottom: 5px !default;
$ie-quality-info-margin: 0 !default;
$ie-quality-span-margin-left: 5px !default;
$ie-img-size-value-span-margin-top: 4px !default;
$ie-img-icon-btn-margin-left: 10px !default;
$ie-quality-option-icon-margin-left: 0 !default;
$ie-finetune-font-size: 14px !default;
$ie-finetune-line-height: 20px !default;
$ie-finetune-letter-spacing: normal !default;
$ie-finetune-font-weight: 400 !default;
$ie-finetune-slider-container: 0 16px 1px 16px !default;
$ie-default-toolbar-font-size: 12px !default;
$ie-bigger-default-toolbar-font-size: 14px !default;
$ie-tbtn-txt-padding: 0 !default;
$ie-head-wrapper-height: 58px !default;
$ie-dropdownbtn-preview-size: 18px !default;
$ie-bigger-caret-margin-top: -4px !default;
$ie-bigger-dropdown-caret-font-size: 10px !default;
$ie-bigger-toolbar-left-line-height: 1 !default;
$ie-bigger-device-finetune-font-size: 16px !default;
$ie-bigger-device-finetune-line-height: 24px !default;
$ie-bigger-head-wrapper-height: 58px !default;

@include export-module('image-editor-layout') {
  .e-ie-toolbar-upload-div.e-hide,
  .e-ie-toolbar-upload-btn.e-hide,
  .e-ie-img-quality-slider,
  .e-ie-img-quality-name .e-hide {
    display: none;
  }

  .e-device.e-image-editor {
    & .e-img-font-style.e-template {
      margin-left: $ie-toolbar-img-font-style-margin-left !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-hscroll .e-scroll-nav.e-scroll-right-nav,
    & .e-scroll-right-overlay {
      display: none !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-hscroll.e-scroll-device {
      padding-right: $ie-scroll-device-padding-right !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-contextual-toolbar-wrapper {
      border-top: $image-editor-border;
      border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-toolbar-area .e-toolbar {
      @if $skin-name == 'tailwind3' {
        border-radius: $ie-toolbar-area-toolbar-border-radius;
      }
    }

    & .e-bottom-toolbar .e-toolbar {
      @if $skin-name == 'tailwind3' {
        border-radius: $ie-toolbar-area-toolbar-border-radius;
      }
    }

    & .e-toolbar {
      border-bottom: $image-editor-border;
    }

    & .e-contextual-toolbar-wrapper .e-toolbar {
      border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-bottom-toolbar .e-toolbar,
    & .e-bottom-toolbar-area .e-toolbar {
      border-bottom: none;
    }

    & .e-ie-img-save-name {
      width: calc(65% - 13px) !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-ie-img-size-value-span {
      margin-left: calc(100% - 145px) !important;  /* stylelint-disable-line declaration-no-important */
    }

    & .e-ie-quality-option-container .e-slider-container {
      margin-left: $ie-quality-option-slider-container-margin-left !important; /* stylelint-disable-line declaration-no-important */
      height: auto !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-image-editor {
    border: $image-editor-border;
    position: relative;
    display: block;

    /* stylelint-disable property-no-vendor-prefix */
    & .no-spin ::-webkit-inner-spin-button,
    & .no-spin ::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: $ie-spin-btn-margin;
    }

    & .e-quick-access-toolbar-area .e-toolbar {
      @if $skin-name == 'Material3' {
        border-radius: 4px;
      }
    }

    & .e-ie-drop-area {
      height: calc(100% - 18px);
      @if $skin-name == 'tailwind3' {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
      }
      @else {
        width: calc(100% - 20px);
        border: $image-editor-drop-border;
        margin: $ie-drop-area-margin;
        border-radius: $ie-drop-area-border-radius;
      }
      @if $skin-name == 'highcontrast' {
        color: $hover-font;
      }

      & .e-upload {
        display: none;
      }

      & .e-image::before {
        font-size: $ie-drop-icon-font-size;
      }

      & .e-ie-drop-icon {
        top: calc(50% - 60px);
        left: calc(50% - 25px);
        @if $skin-name != 'tailwind3' {
          position: absolute;
        }
      }

      & .e-ie-drop-content {
        top: 50%;
        left: calc(50% - 160px);
        font-size: $ie-drop-content-font-size;
        @if $skin-name == 'tailwind3' {
          font-weight: $ie-drop-content-font-weight;
          line-height: $ie-drop-content-line-height;
          letter-spacing: $ie-drop-content-letter-spacing;
          margin: $ie-drop-content-margin;
        }
        @else {
          position: absolute;
        }
      }

      & .e-ie-drop-content > a {
        @if $skin-name == 'highcontrast' {
          color: $hover-font;
        }
      }

      & .e-ie-drop-browse {
        text-decoration: none;
        @if $skin-name == 'tailwind3' {
          font-weight: $ie-drop-browse-font-weight;
        }
      }

      & .e-ie-drop-info {
        top: calc(50% + 40px);
        left: 50%;
        font-size: $ie-drop-info-font-size;
        @if $skin-name == 'tailwind3' {
          font-weight: $ie-drop-info-font-weight;
          line-height: $ie-drop-info-line-height;
          letter-spacing: $ie-drop-info-letter-spacing;
          margin: $ie-drop-info-margin;
        }
        @else {
          position: absolute;
          transform: translate(-50%, -50%);
        }
      }

      & .e-ie-min-drop-content {
        left: calc(50% - 120px);
        top: 50%;
        font-size: $ie-min-drop-content-font-size;
        @if $skin-name == 'tailwind3' {
          font-weight: $ie-min-drop-content-font-weight;
          line-height: $ie-min-drop-content-line-height;
          letter-spacing: $ie-min-drop-content-letter-spacing;
          margin: $ie-min-drop-content-margin;
        }
        @else {
          position: absolute;
        }
      }
    }

    & .e-toolbar-area .e-toolbar {
      @if $skin-name == 'tailwind3' {
        border-radius: $ie-toolbar-area-toolbar-border-radius;
      }
    }

    & .e-toolbar {
      border: none;
      border-bottom: $image-editor-border;
      @if $skin-name != 'Material3' {
        height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
        min-height: $image-editor-tbar-height !important; /* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'tailwind3' {
        height: auto !important; /* stylelint-disable-line declaration-no-important */
      }
      @if $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
        box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-toolbar-item.e-separator {
        @if $skin-name == 'tailwind3' {
          height: auto !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      & .e-toolbar-items {
        & .e-toolbar-item {
          &.e-ie-resize-height {
            margin-left: $ie-toolbar-item-margin-left;
            min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
            font-size: $ie-default-toolbar-font-size;
          }

          &.e-ie-resize-width {
            min-width: 28px !important; /* stylelint-disable-line declaration-no-important */
            font-size: $ie-default-toolbar-font-size;
          }

          &.e-stroke,
          &.e-frame-stroke,
          &.e-size {
            font-size: $ie-default-toolbar-font-size;
          }

          & .e-tbar-btn.e-btn.e-tbtn-txt {
            .e-icons.e-btn-icon {
              @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'boostrap4' {
                padding: 0;
              }
              font-size: $image-editor-tbar-btn-fontsize;
            }
          }

          & .e-tbar-btn.e-btn {
            .e-icons.e-btn-icon {
              font-size: $image-editor-tbar-btn-fontsize;
              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
                padding-top: 4px;
                padding-bottom: 4px;
              }
            }
          }
          & .e-dropdown-btn {
            &.e-btn.e-icon-btn {
              @if $skin-name == 'fluent2' {
                padding-top: 7.5px;
                padding-bottom: 7.5px;
              }
              @if $skin-name == 'Material3' {
                padding: 8px 16px;
              }
            }
            @if $skin-name == 'tailwind3' {
              box-shadow: none;
            }
          }
        }

        & .e-upload {
          border: none;
        }

        & .e-file-select-wrap {
          padding: $ie-file-select-padding;
        }

        & .e-image-upload {
          & .e-file-select,
          & .e-file-drop,
          & .e-upload-files {
            display: none;
          }
          & .e-image-upload .e-upload {
            border: none;
          }

          & .e-icons.e-upload-icon {
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
              padding-top: 6px;
            }
            @if $skin-name == 'tailwind3' {
              padding: $ie-upload-icon-padding !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }

        & .e-fill.e-template,
        & .e-stroke.e-template,
        & .e-frame-stroke.e-template,
        & .e-pen-stroke-color.e-template,
        & .e-text-font-color.e-template,
        & .e-save.e-template,
        & .e-text-background-color.e-template,
        & .e-stroke-text-font-color.e-template {
          & .e-dropdown-btn {
            & .e-icons.e-caret {
              font-size: $image-editor-tbar-btn-fontsize;
            }
          }
        }

        & .e-text-font-color.e-template {
          & .e-dropdown-btn {
            & .e-icons.e-caret {
              @if $skin-name != 'tailwind3' {
                margin-top: $ie-font-color-caret-margin-top;
              }
            }
          }
        }

        & .e-btn-icon.e-dropdownbtn-preview {
          height: $ie-dropdownbtn-preview-size;
          width: $ie-dropdownbtn-preview-size;
          @if $skin-name != 'tailwind3' {
            margin-top: $image-editor-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
            margin-left: $image-editor-dropdown-btn-preview-left;
          }
        }

        & .e-dropdown-btn.e-image-popup {
          & .e-select,
          & .e-annotation,
          & .e-transform {
            font-size: $image-editor-tbar-btn-fontsize;

            & .e-icons.e-caret {
              font-size: $ie-caret-font-size !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }

        & .e-dropdown-btn {
          & .e-save {
            font-size: $image-editor-tbar-btn-fontsize;

            & .e-icons.e-caret {
              font-size: $ie-caret-font-size !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }

        &.e-tbar-pos {
          .e-toolbar-left {
            line-height: $ie-toolbar-left-line-height;
          }
        }
      }
    }

    & .e-toolbar-area + .e-canvas-wrapper {
      & .e-textarea {
        line-height: initial !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    & .e-bottom-toolbar,
    & .e-bottom-toolbar-area {
      border-top: $image-editor-border;
    }

    & .e-contextual-toolbar-wrapper {
      border-bottom: $image-editor-border;
      width: 100%;
      z-index: 1;

      & .e-ie-head-wrapper {
        align-content: center;
        text-align: center;
        height: auto;
        min-height: $ie-head-wrapper-height;
      }

      & .e-toolbar {
        border-bottom: none !important; /* stylelint-disable-line declaration-no-important */
        @if $skin-name == 'Material3' {
          height: 140px !important; /* stylelint-disable-line declaration-no-important */
        }
        @else {
          height: 130px !important; /* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'tailwind3' {
          height: auto !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      & .e-frame-wrapper {
        & .e-toolbar {
          height: inherit !important; /* stylelint-disable-line declaration-no-important */
        }

        & .e-toolbar-item {
          display: inline-grid;
        }

        & .e-toolbar-item > span{
          font-weight: $ie-toolbar-item-span-font-weight;
          margin: $ie-toolbar-item-span-margin;
          text-align: center;
        }

        & .e-dropdown-btn {
          margin: $ie-dropdown-btn-margin;
          width: max-content;
        }
      }

      &.e-frame-wrapper {
        & .e-toolbar {
          height: inherit !important; /* stylelint-disable-line declaration-no-important */
        }

        & .e-toolbar-item:not(.e-hidden) {
          display: inline-grid;
        }

        & .e-toolbar-item > span{
          font-weight: $ie-toolbar-item-span-font-weight;
          margin: $ie-toolbar-item-span-margin;
          text-align: center;
        }

        & .e-dropdown-btn {
          margin: $ie-dropdown-btn-margin;
          width: max-content;
        }
      }

      &.e-hide {
        display: none;
      }

      & .e-toolbar-item {
        height: auto !important; /* stylelint-disable-line declaration-no-important */

        & .filter-wrapper {
          box-sizing: content-box;
          font-size: $ie-default-toolbar-font-size;
          & div {
            text-align: center;
          }
        }

        & .filterwrapper canvas,
        & .filter-wrapper canvas {
          border: $ie-toolbar-item-canvas-border;
          height: 100px;
        }
      }

      // & .e-toolbar-item:hover .filterwrapper,
      // & .e-toolbar-item:hover .filter-wrapper,
      // & .e-toolbar-item.e-selected .filterwrapper,
      // & .e-toolbar-item.e-selected .filter-wrapper {
      //   border-top: 2px solid;
      // }

      & .e-slider-container {
        margin: $ie-finetune-slider-container;
        height: auto;

        & .e-slider {
          & .e-handle {
            @if $skin-name == 'Material3' {
              height: 16px !important; /* stylelint-disable-line declaration-no-important */
              top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
              width: 16px !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }
      }
    }
    & .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
    & .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
      @if $skin-name == 'Material3' {
        height: 16px !important; /* stylelint-disable-line declaration-no-important */
        top: calc(50% - 10px) !important; /* stylelint-disable-line declaration-no-important */
        width: 16px !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    & .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn,
    & .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn {
      @if $skin-name == 'Material3' {
        padding: 8px 13px;
      }
      @if $skin-name == 'highcontrast' {
        padding: 2px 15px;
      }
    }

    @if $skin-name == 'fluent2' {
      & .e-dropdown-btn.e-ie-ddb-popup {
        padding-left: 14px;
      }
      & .e-dropdown-btn,
      & .e-dropdown-btn span {
        font-weight: normal;
      }
    }

    & .e-ie-finetune-slider-wrap {
      height: auto !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-ie-finetune-slider-label,
    & .e-ie-finetune-value-span,
    & .e-ie-redact-value-span  {
      font-size: $ie-finetune-font-size;
      line-height: $ie-finetune-line-height;
      letter-spacing: $ie-finetune-letter-spacing;
      font-weight: $ie-finetune-font-weight;
    }
  }

  .e-ie-img-save-dlg .e-btn {
    @if $skin-name == 'Material3' {
      background: transparent;
      box-shadow: none;
      border: none;
      border-bottom: 1px solid;
      border-radius: $ie-img-save-dlg-btn-radius;
      border-color: rgba(var(--color-sf-outline));
    }
  }

  .e-ie-straighten-value-span,
  .e-ie-straighten-span,
  .e-ie-toolbar-straighten {
    font-size: $ie-straighten-font-size !important; /* stylelint-disable-line declaration-no-important */
    padding-left: $ie-straighten-padding-x !important; /* stylelint-disable-line declaration-no-important */
    padding-right: $ie-straighten-padding-x !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-device.e-image-editor .e-ie-straighten-value-span,
  .e-device.e-image-editor .e-ie-straighten-span,
  .e-device.e-image-editor .e-ie-toolbar-straighten {
    font-size: $ie-straighten-font-size !important; /* stylelint-disable-line declaration-no-important */
    padding-left: 0 !important; /* stylelint-disable-line declaration-no-important */
    padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
    height: auto;
    padding-right: $ie-straighten-slider-padding-right;
    margin-left: $ie-straighten-slider-margin-left;
  }

  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
    top: calc(50% - 20px) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider-track,
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-range {
    top: calc(50% - 2px) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
    top: $image-editor-slider-handler !important; /* stylelint-disable-line declaration-no-important */
    @if $skin-name == 'Material3' {
      height: 16px !important; /* stylelint-disable-line declaration-no-important */
      width: 16px !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-device.e-image-editor .e-ie-finetune-value-span {
    @if $skin-name == 'fluent2' {
      top: 29% !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-ie-finetune-slider-wrap {
    @if $skin-name == 'Material3' {
      top: calc(50% - 11px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @else if $skin-name == 'tailwind' or $skin-name == 'tailwind3' {
      top: calc(50% - 12px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @else {
      top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-device.e-image-editor .e-ie-finetune-slider-wrap {
    @if $skin-name == 'Material3' {
      top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-transparency-slider-wrap {
    top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-ie-slider-wrap {
    height: auto !important; /* stylelint-disable-line declaration-no-important */
    top: auto !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-dropdown-popup.e-ie-crop-ddb-popup ul {
    max-height: 250px;
    overflow-y: auto;
  }

  .e-dropdown-popup.e-ie-ddb-popup {
    background: none !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-device.e-image-editor {
    .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
      @if $skin-name == 'Material' {
        top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal,
  .e-ie-quality-option-container .e-slider-container.e-horizontal{
    height: 28px;
  }

  .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
    top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-ie-quality-slider.e-slider-container + .e-ie-img-icon-button,
  .e-ie-quality-option-container .e-slider-container.e-horizontal + .e-ie-img-icon-button {
    margin-left: $ie-quality-slider-icon-margin-left !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-ie-img-size {
    margin: $ie-img-size-margin;
  }

  .e-ie-dlg-img-content {
    width: 40%;
    height: 100%;
    margin-right: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .e-ie-img-input {
    width: 90% !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-ie-img-dlg-canvas {
    width: auto;
    height: auto;
  }

  .e-ie-img-size {
    font-size: $ie-img-size-font-size;
    @if $skin-name == 'tailwind3' {
      line-height: $ie-img-size-line-height;
    }
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
  }

  .e-ie-dlg-right-content {
    width: 60%;
  }

  .e-ie-img-save-name {
    display: inline-block;
    width: calc(69% - 13px);
    margin-right: $ie-img-save-name-margin-right;
    @if $skin-name == 'FluentUI' {
      width: calc(69% - 15px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'highcontrast' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
      margin-right: 8px !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-ie-img-save-dlg {
    display: inline-block;
    width: auto;
    min-width: 92px;
  }

  .e-ie-img-save-dlg .e-btn {
    width: 100%;
    @if $skin-name == 'tailwind3' {
      font-weight: $ie-img-save-dlg-btn-font-weight;
    }
  }

  .e-ie-img-label-name {
    display: block;
    margin-bottom: $ie-img-label-name-margin-bottom;
    @if $skin-name == 'tailwind3' {
      font-weight: $ie-img-label-name-font-weight;
    }
  }

  .e-ie-img-quality-name {
    position: relative;
    width: 100% !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-ie-quality-info {
    margin-bottom: $ie-quality-info-margin;
    margin-top: $ie-quality-info-margin;
  }

  .e-ie-quality-span {
    margin-left: $ie-quality-span-margin-left;
    display: inline-flex;
  }

  .e-ie-img-quality-label {
    margin-bottom: 3%;
    margin-top: 5%;
    display: inline-flex;
    @if $skin-name == 'tailwind3' {
      font-weight: $ie-img-quality-label-font-weight;
    }
  }

  .e-ie-img-quality-size {
    margin-top: 5%;
    display: block;
  }

  .e-ie-img-size-value-span {
    width: 8%;
    text-transform: capitalize;
    margin-left: calc(100% - 194px);
    margin-top: $ie-img-size-value-span-margin-top;
    @if $skin-name == 'highcontrast' {
      margin-left: calc(100% - 175px);
    }
    @if $skin-name == 'FluentUI' or $skin-name == 'material' {
      margin-left: calc(100% - 185px);
    }
    @if $skin-name == 'fabric' {
      margin-left: calc(100% - 180px);
    }
    @if $skin-name == 'fluent2' {
      margin-left: calc(100% - 188px);
    }
    @if $skin-name == 'Material3' {
      margin-left: calc(100% - 190px);
    }
  }

  .e-device.e-ie-save-dialog .e-ie-img-size-value-span {
    margin-left: calc(100% - 145px) !important; /* stylelint-disable-line declaration-no-important */
    @if $skin-name == 'highcontrast' {
      margin-left: calc(100% - 135px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'FluentUI' {
      margin-left: calc(100% - 155px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'fabric' or $skin-name == 'bootstrap' {
      margin-left: calc(100% - 136px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'material' {
      margin-left: calc(100% - 130px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'tailwind' {
      margin-left: calc(100% - 163px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
      margin-left: calc(100% - 156px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'Material3' {
      margin-left: calc(100% - 140px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-device.e-ie-save-dialog .e-ie-img-save-name {
    width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
    @if $skin-name == 'highcontrast' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' {
      width: calc(71% - 33px) !important; /* stylelint-disable-line declaration-no-important */
    }

    @if $skin-name == 'tailwind' {
      width: calc(71% - 31px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-ie-img-icon-button {
    width: max-content;
    @if $skin-name != 'tailwind3' {
      margin-bottom: $image-editor-icon-button;
    }
    @if $skin-name == 'tailwind' {
      padding-top: 4px;
      padding-bottom: 4px;
    }
    margin-left: $ie-img-icon-btn-margin-left;
  }

  .e-ie-quality-option-container .e-btn-group .e-btn {
    padding-left: $image-editor-button-label;
    padding-right: $image-editor-button-label;
  }

  .e-blr-ie-save-dialog {
    & .e-ie-img-save-name {
      width: calc(67% - 13px);
    }

    & .e-ie-quality-custom {
      width: calc(65% - 13px);
    }

    & .e-ie-quality-option-container .e-ie-img-icon-button {
      @if $skin-name == 'FluentUI' {
        margin-left: 25px;
      }
      @else {
        margin-left: 20px;
      }
    }

    & .e-ie-quality-option-container .e-slider-container.e-horizontal {
      @if $skin-name == 'Material3' {
        margin-top: 5px;
      }
    }

    & .e-ie-img-size-value-span {
      vertical-align: middle;
      @if $skin-name == 'Material3' {
        margin-left: calc(50% - 52px);
      }
      @else {
        margin-left: calc(50% - 55px);
      }
    }

    & .e-btn-group .e-btn {
      padding: $image-editor-save-dlg-grp-btn-padding;
    }

    &.e-device {
      & .e-ie-img-save-name {
        @if $skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast'  {
          width: calc(63% - 15px) !important; /* stylelint-disable-line declaration-no-important */
        }
        @else {
          width: calc(64% - 15px) !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      & .e-ie-quality-custom {
        width: 75% !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-ie-quality-option-container .e-ie-img-icon-button {
        margin-left: $ie-quality-option-icon-margin-left;
      }

      & .e-ie-img-size-value-span {
        @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' {
          margin-left: calc(75% - 100px) !important; /* stylelint-disable-line declaration-no-important */
        }
        @else if $skin-name == 'Material3' or $skin-name == 'bootstrap' {
          margin-left: calc(73% - 100px) !important; /* stylelint-disable-line declaration-no-important */
        }
        @else if $skin-name == 'tailwind' {
          margin-left: calc(67% - 100px) !important; /* stylelint-disable-line declaration-no-important */
        }
        @else {
          margin-left: calc(70% - 100px) !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      & .e-btn-group .e-btn {
        padding: $image-editor-save-dlg-dev-grp-btn-padding;
      }

      & .e-ie-quality-option-container .e-ie-img-icon-button {
        @if $skin-name == 'fluent2' {
          padding: 8.5px;
        }
      }
    }
  }

  .e-ie-save-dialog .e-ie-quality-slider.e-slider-container + .e-ie-img-icon-button,
  .e-ie-save-dialog .e-ie-quality-option-container .e-slider-container.e-horizontal + .e-ie-img-icon-button {
    @if $skin-name == 'Material3' {
      margin-left: 30px !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-blr-ie-save-dialog .e-dialog {
    @if $skin-name == 'fluent2' {
      border: none;
    }
  }

  @media only screen and (max-width: 390px) {
    .e-device.e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-ie-img-quality-name .e-btn-group .e-btn {
      padding-left: $image-editor-button-label-mobile;
      padding-right: $image-editor-button-label-mobile;
    }

    .e-device.e-image-editor .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-ie-img-save-name {
      width: $image-editor-button-width-mobile !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-slider-label,
  .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-finetune-value-span,
  .e-device.e-image-editor .e-contextual-toolbar-wrapper .e-ie-redact-value-span {
    font-size: $ie-bigger-device-finetune-font-size;
    line-height: $ie-bigger-device-finetune-line-height;
    letter-spacing: $ie-finetune-letter-spacing;
    font-weight: $ie-finetune-letter-spacing;
  }

  .e-device.e-image-editor .e-ie-drop-area .e-ie-drop-info {
    top: calc(50% + 60px);
  }

  .e-image-editor.e-control.e-readonly {
    opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-device.e-image-editor .e-ie-quality-slider.e-control-wrapper.e-slider-container.e-horizontal .e-slider {
    @if $skin-name == 'fluent2' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI'  {
      top: calc(50% - 18px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @else {
      top: calc(50% - 16px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-device.e-image-editor {
    .e-ie-save-dialog .e-slider-container .e-slider .e-handle,
    .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
      @if $skin-name == 'Material3' {
        top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
}

@include export-module('image-editor-theme') {
  .e-image-editor {
    background: $image-editor-background;

    & .e-contextual-toolbar-wrapper {
      background: $image-editor-contextual-toolbar;

      & .e-toolbar-item:hover .filterwrapper canvas,
      & .e-toolbar-item.e-selected .filterwrapper canvas,
      & .e-toolbar-item:hover .filter-wrapper canvas,
      & .e-toolbar-item.e-selected .filter-wrapper canvas {
        border-color: $btn-active-bgcolor !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-toolbar-item.e-selected .filterwrapper:focus canvas,
      & .e-toolbar-item.e-selected .filter-wrapper:focus canvas {
        border-color: $btn-active-bgcolor !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    & .e-toolbar {
      & .e-toolbar-items {
        & .e-toolbar-item {
          &.e-ie-resize-height,
          &.e-ie-resize-width,
          &.e-stroke,
          &.e-frame-stroke,
          &.e-size,
          &.e-ie-straighten-span,
          &.e-ie-straighten-value-span {
            @if $skin-name == 'tailwind3' {
              color: $ie-content-text-color;
            }
          }
        }
        & .e-tbar-btn.e-btn {
          & .e-icons {
            @if $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark' and $skin-name != 'fluent2' {
              color: $image-editor-toolbar-icon-color;
            }
          }

          &.e-selected-btn {
            background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
            & .e-icons {
              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
                color: $secondary-text-color-focus;
              }
            }
          }
        }

        & .e-dropdown-btn {
          background: inherit;
          border: none;
          margin-top: $image-editor-ddbtn-margin-top;
          @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
            background: $tbar-default-bg;
            color: $tbar-default-icon-color;
          }
          @if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
            border: 2px solid #000;
          }
          @if $skin-name == 'Material3' {
            box-shadow: none;
          }

          & .e-caret-hide {
            display: none !important; /* stylelint-disable-line declaration-no-important */
          }

          &:hover {
            background: $tbar-hover-bg;
            box-shadow: none;
            @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
              color: $secondary-text-color;
            }
            @else {
              color: $tbar-hover-font;
            }
          }

          &:focus {
            background: $btn-focus-bgcolor;
            box-shadow: none;
            color: $btn-focus-color;
            @if $skin-name == 'FluentUI' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
              box-shadow: inset 0 0 0 1px !important; /* stylelint-disable-line declaration-no-important */
            }
            @else if $skin-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
            }
            @else if $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
              outline: none !important; /* stylelint-disable-line declaration-no-important */
              border: 2px solid #fff !important; /* stylelint-disable-line declaration-no-important */
            }
            @else if $skin-name == 'bootstrap4' {
              $color-rgba: rgba(color.mix(color.adjust($btn-focus-bgcolor, $lightness: 50%), $btn-focus-border-color, 15%), .5);
              box-shadow: 0 0 0 .25em $color-rgba !important; /* stylelint-disable-line declaration-no-important */
            }
            @else if $skin-name == 'bootstrap5' {
              box-shadow: $secondary-shadow-focus !important; /* stylelint-disable-line declaration-no-important */
            }
            @else if $skin-name == 'Material3' {
              box-shadow: $shadow-focus-ring1 !important; /* stylelint-disable-line declaration-no-important */
            }
            @else if $skin-name == 'tailwind' {
              box-shadow: 0 0 0 1px #4f46e5 !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:focus-visible {
            @if $skin-name == 'fluent2' {
              box-shadow: $keyboard-focus !important; /* stylelint-disable-line declaration-no-important */
            }
          }

          &:active {
            background: $btn-active-bgcolor;
            box-shadow: none;
            color: $btn-active-color;
          }
        }

        & .e-colorpicker-wrapper {
          &.e-shape-fill-color,
          &.e-shape-stroke-color,
          &.e-text-stroke-color,
          &.e-pen-stroke-color {
            & .e-split-btn-wrapper .e-split-btn {
              & .e-selected-color {
                background: none;
                border-bottom-style: solid;
                border-bottom-width: 3px;
                width: 14px;
                margin: 0 2px;
                border-bottom-color: $img-editor-cp-preview-border-bottom-color;

                & .e-split-preview {
                  display: none;
                }
              }
            }
          }
        }

        & .e-nocolor-item {
          background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCIgdmlld0JveD0iMCAwIDYgNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTAgKDU0OTgzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cCA5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiPgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExIiBmaWxsPSIjRTBFMEUwIiB4PSIwIiB5PSIwIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weS0yIiBmaWxsPSIjRkZGRkZGIiB4PSIwIiB5PSIzIiB3aWR0aD0iMyIgaGVpZ2h0PSIzIj48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMTEtQ29weSIgZmlsbD0iI0ZGRkZGRiIgeD0iMyIgeT0iMCIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTExLUNvcHktMyIgZmlsbD0iI0UwRTBFMCIgeD0iMyIgeT0iMyIgd2lkdGg9IjMiIGhlaWdodD0iMyI+PC9yZWN0PgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') !important; /* stylelint-disable-line declaration-no-important */
          background-size: 8px !important; /* stylelint-disable-line declaration-no-important */
        }

        & .e-toolbar-item.e-overlay .e-btn {
          box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
          @if $skin-name == 'fluent2' {
            background: $content-bg-color-alt1 !important; /* stylelint-disable-line declaration-no-important */

            &:focus .e-icons {
              color: $icon-color-disabled !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }
      }
    }

    & .e-ie-drop-area {
      & .e-ie-drop-content,
      & .e-ie-min-drop-content {
        @if $skin-name == 'tailwind3' {
          color: $ie-content-text-color;
        }
      }
      .e-ie-drop-browse {
        @if $skin-name == 'tailwind3' {
          color: $ie-browse-text-color;
        }
      }
      .e-ie-drop-info {
        @if $skin-name == 'tailwind3' {
          color: $ie-drop-info-text-color;
        }
      }
    }

    & .e-ie-finetune-slider-label,
    & .e-ie-finetune-value-span {
      @if $skin-name == 'tailwind3' {
        color: $ie-content-text-color;
      }
    }

    & .filter-wrapper {
      @if $skin-name == 'tailwind3' {
        color: $ie-content-text-color-alt1;
      }
    }
  }
}

.e-dropdown-popup {
  & .e-selected-btn {
    @if $skin-name != 'highcontrast' and $theme-name != 'bootstrap5.3' and $theme-name != 'bootstrap5.3-dark' {
      background: $image-editor-icon-sel-bg-color !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5-dark' {
      color: $secondary-text-color-focus !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'bootstrap4' {
      color: $drop-down-btn-selected-color !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  & .e-item.e-selected-btn {
    @if $skin-name == 'fluent2' {
      color: $flyout-text-color-selected;
    }
    @if $theme-name == 'bootstrap5.3' or $theme-name == 'bootstrap5.3-dark' {
      background-color: $content-bg-color-selected !important; /* stylelint-disable-line declaration-no-important */
      color: $content-text-color-selected !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

.e-ie-filter-canvas:focus,
.filter-wrapper:focus .e-ie-filter-canvas,
.filter-wrapper:focus canvas,
.filter-wrapper canvas:focus {
  border-color: $image-editor-filter-canvas-focus !important; /* stylelint-disable-line declaration-no-important */
}

@if $skin-name == 'fluent2' {
  .e-image-editor .e-toolbar .e-toolbar-items .e-dropdown-btn.e-active {
    background-color: $secondary-bg-color-pressed !important; /* stylelint-disable-line declaration-no-important */
  }
}

@include export-module('image-editor-bootstrap-dark-icons') {
  .e-image-editor {
    & .e-upload-icon {
      &::before {
        content: '\ec2b';
      }
    }

    & .e-zoom-in {
      &::before {
        content: '\e22c';
      }
    }

    & .e-zoom-out {
      &::before {
        content: '\e22b';
      }
    }

    & .e-pan {
      &::before {
        content: '\ebcb';
      }
    }

    & .e-select {
      &::before {
        content: '\e949';
      }
    }

    & .e-transform {
      &::before {
        content: '\e97c';
      }
    }

    & .e-annotation {
      &::before {
        content: '\ebd8';
      }
    }

    & .e-shapes {
      &::before {
        content: '\ebd5';
      }
    }

    & .e-mouse {
      &::before {
        content: '\ebce';
      }
    }

    & .e-btn-reset {
      &::before {
        content: '\e953';
      }
    }

    & .e-btn-save {
      &::before {
        content: '\e701';
      }
    }

    & .e-close {
      &::before {
        content: '\ebc0';
      }
    }

    & .e-check {
      &::before {
        content: '\e97d';
      }
    }

    & .e-text-font-color.e-template {
      & .e-caret::before {
        content: '\e35f';
      }
    }

    & .e-stroke.e-template,
    & .e-frame-stroke.e-template,
    & .e-pen-stroke-color.e-template {
      & .e-caret::before {
        content: '\ebc6';
      }
    }

    & .e-fill.e-template,
    & .e-text-background-color.e-template {
      & .e-caret {
        &::before {
          content: '\e35c';
        }
      }
    }

    & .e-stroke-text-font-color.e-template {
      & .e-caret {
        &::before {
          content: '\e15c';
        }
      }
    }
  }
}

.e-image-editor,
.e-dropdown-popup.e-image-popup {
  & .e-custom {
    &::before {
      content: '\e974';
    }
  }

  & .e-circle {
    &::before {
      content: '\e671';
    }
  }

  & .e-square{
    &::before {
      content: '\e976';
    }
  }

  & .e-custom-a {
    &::before {
      content: '\e977';
    }
  }

  & .e-custom-b {
    &::before {
      content: '\e978';
    }
  }

  & .e-custom-c {
    &::before {
      content: '\e979';
    }
  }

  & .e-custom-d {
    &::before {
      content: '\e97a';
    }
  }

  & .e-custom-e {
    &::before {
      content: '\e97b';
    }
  }

  & .e-custom-f {
    &::before {
      content: '\e118';
    }
  }

  & .e-custom-g {
    &::before {
      content: '\e119';
    }
  }

  & .e-custom-h {
    &::before {
      content: '\e11a';
    }
  }

  & .e-custom-i {
    &::before {
      content: '\e11b';
    }
  }

  & .e-custom-j {
    &::before {
      content: '\e11c';
    }
  }

  & .e-rectangle {
    &::before {
      content: '\e670';
    }
  }

  & .e-triangle {
    &::before {
      content: '\e954';
    }
  }

  & .e-line {
    &::before {
      content: '\e668';
    }
  }

  & .e-add-text {
    &::before {
      content: '\e35b';
    }
  }

  & .e-free-pen {
    &::before {
      content: '\e767';
    }
  }

  & .e-horizontal-flip {
    &::before {
      content: '\e95b';
    }
  }

  & .e-vertical-flip {
    &::before {
      content: '\e96f';
    }
  }

  & .e-clock-wise {
    &::before {
      content: '\e971';
    }
  }

  & .e-anti-clock-wise {
    &::before {
      content: '\e970';
    }
  }

  & .e-arrow {
    &::before {
      content: '\e669';
    }
  }

  & .e-path {
    &::before {
      content: '\e931';
    }
  }
}

@include export-module('image-editor-bigger') {
  .e-bigger .e-image-editor,
  .e-image-editor.e-bigger {
    & .e-contextual-toolbar-wrapper {
      & .e-slider-container {
        & .e-slider {
          & .e-handle {
            top: $image-editor-device-slider-handler !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }

      & .e-ie-head-wrapper {
        align-content: center;
        text-align: center;
        height: auto;
        min-height: $ie-bigger-head-wrapper-height;
      }

      & .e-toolbar {
        @if $skin-name == 'Material3' {
          height: 140px !important; /* stylelint-disable-line declaration-no-important */
        }
        @else {
          height: 130px !important; /* stylelint-disable-line declaration-no-important */
        }
        @if $skin-name == 'tailwind3' {
          height: auto !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      & .e-frame-wrapper .e-toolbar,
      &.e-frame-wrapper .e-toolbar {
        height: inherit !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    & .e-toolbar-area .e-toolbar {
      @if $skin-name == 'tailwind3' {
        border-radius: $ie-bigger-toolbar-border-radius;
      }
    }

    & .e-toolbar {
      height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
      min-height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
      @if $skin-name == 'tailwind3' {
        height: auto !important; /* stylelint-disable-line declaration-no-important */
      }

      & .e-toolbar-items {
        @if $skin-name == 'material' {
          height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
          min-height: $image-editor-bigger-tbar-height !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      & .e-toolbar-items {
        & .e-toolbar-item {
          &.e-ie-resize-height span,
          &.e-ie-resize-width span,
          & .filter-wrapper,
          &.e-stroke,
          &.e-frame-stroke,
          &.e-size {
            font-size: $ie-bigger-default-toolbar-font-size;
          }
        }
      }
      & .e-toolbar-items {
        & .e-toolbar-item {
          & .e-tbar-btn.e-btn.e-tbtn-txt {
            .e-icons.e-btn-icon {
              @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark' or $skin-name == 'boostrap4' {
                padding: 0;
              }
              font-size: $image-editor-bigger-tbar-btn-fontsize;
            }
          }

          & .e-tbar-btn.e-btn {
            .e-icons.e-btn-icon {
              font-size: $image-editor-bigger-tbar-btn-fontsize;
              @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5-dark' {
                padding-top: 4px;
                padding-bottom: 4px;
              }
            }
          }
        }

        & .e-fill.e-template,
        & .e-stroke.e-template,
        & .e-frame-stroke.e-template,
        & .e-pen-stroke-color.e-template,
        & .e-text-font-color.e-template,
        & .e-save.e-template {
          & .e-dropdown-btn {
            & .e-icons.e-caret {
              font-size: $image-editor-bigger-tbar-btn-fontsize;
            }
          }
        }

        & .e-text-font-color.e-template {
          & .e-dropdown-btn {
            & .e-icons.e-caret {
              @if $skin-name != 'tailwind3' {
                margin-top: $ie-bigger-caret-margin-top;
              }
            }
          }
        }

        & .e-btn-icon.e-dropdownbtn-preview {
          @if $skin-name != 'tailwind3' {
            margin-top: $image-editor-bigger-dropdown-btn-preview-top !important; /* stylelint-disable-line declaration-no-important */
            margin-left: $image-editor-bigger-dropdown-btn-preview-left;
          }
        }

        & .e-dropdown-btn.e-icon-btn {
          @if $skin-name == 'Material3' {
            padding: 7px 15px;
          }
        }

        & .e-dropdown-btn.e-image-popup {
          & .e-select,
          & .e-annotation,
          & .e-transform {
            font-size: $image-editor-bigger-tbar-btn-fontsize;

            & .e-icons.e-caret {
              font-size: $ie-bigger-dropdown-caret-font-size;
            }
          }
        }

        & .e-dropdown-btn {
          & .e-save {
            font-size: $image-editor-bigger-tbar-btn-fontsize;

            & .e-icons.e-caret {
              font-size: $ie-bigger-dropdown-caret-font-size;
            }
          }
        }

        &.e-tbar-pos {
          .e-toolbar-left {
            line-height: $ie-bigger-toolbar-left-line-height;
          }
        }
      }
    }

    & .e-ie-save-dialog .e-ie-img-save-dlg .e-btn {
      @if $skin-name == 'Material3' {
        margin-top: 5px !important; /* stylelint-disable-line declaration-no-important */
      }
    }

    & .e-ie-save-dialog .e-ie-img-size {
      @if $skin-name == 'tailwind3' {
        font-size: $ie-bigger-img-size-font-size;
        line-height: $ie-bigger-img-size-line-height;
        margin: $ie-bigger-img-size-margin-top;
      }
    }

    & .e-quick-access-toolbar-area .e-toolbar {
      @if $skin-name == 'tailwind3' {
        border-radius: $ie-bigger-qat-toolbar-border-radius;
      }
    }

    & .e-ie-finetune-slider-label,
    & .e-ie-finetune-value-span,
    & .e-ie-redact-value-span {
      font-size: $ie-bigger-device-finetune-font-size;
      line-height: $ie-bigger-device-finetune-line-height;
      letter-spacing: $ie-finetune-letter-spacing;
      font-weight: $ie-finetune-letter-spacing;
    }

    & .e-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn,
    & .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn {
      @if $skin-name == 'Material3' {
        padding: 10px;
      }
      @if $skin-name == 'highcontrast' {
        padding: 3px 10px;
      }
      @if $skin-name == 'FluentUI' {
        padding: 7px 14px;
      }
    }

    & .e-blr-ie-save-dialog .e-dialog .e-dlg-content .e-ie-dlg-right-content .e-dropdown-btn {
      @if $skin-name == 'fluent2' {
        padding: 8.2px 14px;
      }
    }

    @if $skin-name == 'fluent2' {
      & .e-dropdown-btn.e-ie-ddb-popup {
        padding-left: 16px;
      }
    }
  }

  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
    @if $skin-name == 'Material3' {
      height: 22px !important; /* stylelint-disable-line declaration-no-important */
      width: 22px !important; /* stylelint-disable-line declaration-no-important */
    }
    top: $image-editor-bigger-slider-handler !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
    width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-bigger .e-image-editor .e-dlg-container .e-dialog,
  .e-bigger.e-image-editor .e-dlg-container .e-dialog {
    width: 656px;
  }

  .e-bigger .e-ie-img-save-dlg {
    width: 100px;
  }

  .e-bigger .e-image-editor .e-control-wrapper.e-slider-container.e-horizontal,
  .e-bigger.e-image-editor .e-control-wrapper.e-slider-container.e-horizontal {
    width: 217px;
  }

  .e-bigger .e-dialog.e-blr-ie-save-dialog:not(.e-device) {
    @if $skin-name == 'FluentUI' {
      width: 656px !important; /* stylelint-disable-line declaration-no-important */
    }
    @else if $skin-name == 'highcontrast' or $skin-name == 'tailwind' {
      width: 625px !important; /* stylelint-disable-line declaration-no-important */
    }
    @else if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
      width: 635px !important; /* stylelint-disable-line declaration-no-important */
    }
    @else {
      width: 620px !important; /* stylelint-disable-line declaration-no-important */
    }

    & .e-ie-img-icon-button {
      padding: $image-editor-save-dlg-big-btn-pad;
    }

    & .e-btn-group .e-btn {
      @if $skin-name == 'material' or $skin-name == 'material-dark' {
        padding: 4px 10px 2px;
      }
    }
  }

  .e-bigger .e-blr-ie-save-dialog .e-slider-container .e-slider .e-handle {
    @if $skin-name == 'Material3' {
      top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }

  .e-bigger .e-ie-save-dialog .e-ie-img-save-name {
    width: calc(71% - 30px) !important; /* stylelint-disable-line declaration-no-important */
    @if $skin-name == 'tailwind' or $skin-name == 'material' or $skin-name == 'bootstrap4' {
      width: calc(65% - 13px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'highcontrast' {
      width: calc(62% - 13px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'FluentUI' {
      width: calc(68% - 30px) !important; /* stylelint-disable-line declaration-no-important */
    }
    @if $skin-name == 'fabric' or $skin-name == 'bootstrap' {
      width: calc(64% - 13px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

.e-bigger .e-device.e-image-editor {
  .e-ie-img-save-dlg {
    @if $skin-name == 'Material3' {
      width: 106px;
    }
    @else if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
      width: 120px;
    }
    @else if $skin-name == 'FluentUI' {
      width: 107px;
    }
    @else if $skin-name == 'material' {
      width: 102px;
    }
    @else if $skin-name == 'tailwind' {
      width: 106px;
    }
  }
  .e-ie-img-save-name {
    @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
      width: calc(64% - 27px) !important; /* stylelint-disable-line declaration-no-important */
    }
  }
}

.e-bigger .e-device.e-image-editor .e-blr-ie-save-dialog .e-ie-img-save-dlg {
  @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
    width: 115px;
  }
}

.e-blr-ie-save-dialog.e-device .e-ie-img-save-name {
  @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' {
    width: calc(64% - 35px) !important; /* stylelint-disable-line declaration-no-important */
  }
}

$appbar-bg-color-primary: $brand-primary !default;
$appbar-color-primary: $brand-primary-font !default;
$appbar-border-color-primary: $brand-primary !default;
$appbar-font-size: 14px !default;
$appbar-bigger-font-size: 16px !default;
$appbar-border: none !default;
$appbar-bigger-height: 56px !default;
$appbar-bigger-dense-height: 48px !default;
$appbar-bigger-prominent-height: 112px !default;
$appbar-nrml-height: 48px !default;
$appbar-nrml-padding: 8px !default;
$appbar-border-radius: 4px !default;
$appbar-content-height: 100% !default;
$appbar-nrml-prominent-height: 94px !default;
$appbar-nrml-dense-height: 40px !default;
$appbar-separator-height: 24px !default;
$appbar-border-width: 1px !default;
$appbar-input-group-icon-border: none !default;

@include export-module('appbar-layout') {
  .e-appbar {
    display: flex;
    width: 100%;
    height: $appbar-nrml-height;
    flex-shrink: 0;
    flex-direction: row;
    position: relative;
    align-items: center;
    padding: $appbar-nrml-padding;
    overflow: hidden;
    font-size: $appbar-font-size;
    @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
      border-radius: $appbar-border-radius;
    }

    > div:first-child {
      display: flex;
      align-items: center;
      width: 100%;
      height: $appbar-content-height;
    }

    &.e-sticky {
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    &.e-prominent {
      height: $appbar-nrml-prominent-height;
      align-items: flex-start;

      > div:first-child {
        align-items: flex-start;
      }
    }

    &.e-dense {
      height: $appbar-nrml-dense-height;
    }

    &.e-horizontal-bottom {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;

      &.e-sticky {
        position: fixed;
        top: auto;
        max-width: inherit;
        left: auto;
        right: auto;
      }
    }

    .e-appbar-separator {
      height: $appbar-separator-height;
    }

    .e-appbar-spacer {
      flex-grow: 1;
    }

    .e-btn,
    .e-css.e-btn {
      border-image: unset;
    }
  }

  .e-inherit.e-menu-wrapper.e-scrollable .e-menu,
  .e-inherit.e-menu-container.e-scrollable .e-menu {
    overflow: hidden;
  }
}

@include export-module('appbar-theme') {
  .e-appbar {
    box-shadow: $appbar-bottom-shadow;

    &.e-light {
      background: $appbar-bg-color-alt1;
      color: $appbar-color-alt1;
      border: $appbar-border;
      @if ($skin-name == 'Material3') {
        border-image: $appbar-border-color-alt1;
      }
      @else {
        border-color: $appbar-border-color-alt1;
      }

      .e-appbar-separator {
        border-left: $appbar-border-width solid $appbar-color-alt1;
      }

      .e-btn,
      .e-css.e-btn,
      .e-dropdown-btn,
      .e-dropdown-btn.e-btn {
        &.e-inherit {
          &:hover,
          &:focus,
          &:active,
          &.e-active {
            background: $appbar-hover-bg-color-alt1;
          }
        }
      }

      .e-menu-wrapper,
      .e-menu-container {
        &.e-inherit {
          background: $appbar-bg-color-alt1;
          color: $appbar-color-alt1;
          box-shadow: none;
          @if ($skin-name == 'Material3') {
            border-image: $appbar-border-color-alt1;
          }
          @else {
            border-color: $appbar-border-color-alt1;
          }

          & .e-menu .e-menu-item.e-selected,
          & .e-menu .e-menu-item.e-focused {
            background: $appbar-hover-bg-color-alt1;
          }
        }
      }
    }

    &.e-dark {
      background: $appbar-bg-color-alt2;
      color: $appbar-color-alt2;
      border-color: $appbar-border-color-alt2;

      .e-appbar-separator {
        border-left: $appbar-border-width solid $appbar-color-alt2;
      }

      .e-btn,
      .e-css.e-btn,
      .e-dropdown-btn,
      .e-dropdown-btn.e-btn {
        &.e-inherit {
          &:hover,
          &:focus,
          &:active,
          &.e-active {
            background: $appbar-hover-bg-color-alt2;
          }
        }
      }

      .e-menu-wrapper,
      .e-menu-container {
        &.e-inherit {
          background: $appbar-bg-color-alt2;
          color: $appbar-color-alt2;
          border-color: $appbar-border-color-alt2;
          box-shadow: none;

          & .e-menu .e-menu-item.e-selected,
          & .e-menu .e-menu-item.e-focused {
            background: $appbar-hover-bg-color-alt2;
          }
        }
      }
    }

    &.e-primary {
      background: $appbar-bg-color-primary;
      color: $appbar-color-primary;
      border-color: $appbar-border-color-primary;

      .e-appbar-separator {
        border-left: $appbar-border-width solid $appbar-color-primary;
      }

      .e-menu-wrapper,
      .e-menu-container {
        &.e-inherit {
          background: $appbar-bg-color-primary;
          color: $appbar-color-primary;
          border-color: $appbar-border-color-primary;
          box-shadow: none;
        }
      }
    }

    &.e-inherit {
      background: inherit;
      color: inherit;
      border-color: inherit;
      border: $appbar-border-width solid;

      .e-appbar-separator {
        border-left: $appbar-border-width solid;
      }

      .e-menu-wrapper,
      .e-menu-container {
        &.e-inherit {
          background: inherit;
          color: inherit;
          border-color: inherit;
          box-shadow: none;
        }
      }
    }

    &.e-horizontal-bottom {
      box-shadow: $appbar-top-shadow;
    }
  }

  .e-light {
    &.e-inherit.e-input-group,
    &.e-inherit.e-input-group.e-control-wrapper,
    &.e-inherit.e-float-input,
    &.e-inherit.e-float-input.e-input-group,
    &.e-inherit.e-float-input.e-control-wrapper,
    &.e-inherit.e-float-input.e-input-group.e-control-wrapper,
    &.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
    &.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
      background: $appbar-bg-color-alt1;
      color: $appbar-color-alt1;
    }
  }

  .e-dark {
    &.e-inherit.e-input-group,
    &.e-inherit.e-input-group.e-control-wrapper,
    &.e-inherit.e-float-input,
    &.e-inherit.e-float-input.e-input-group,
    &.e-inherit.e-float-input.e-control-wrapper,
    &.e-inherit.e-float-input.e-input-group.e-control-wrapper,
    &.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
    &.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
      background: $appbar-bg-color-alt2;
      color: $appbar-color-alt2;
    }
  }

  .e-primary {
    &.e-inherit.e-input-group,
    &.e-inherit.e-input-group.e-control-wrapper,
    &.e-inherit.e-float-input,
    &.e-inherit.e-float-input.e-input-group,
    &.e-inherit.e-float-input.e-control-wrapper,
    &.e-inherit.e-float-input.e-input-group.e-control-wrapper,
    &.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
    &.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
      background: $appbar-bg-color-primary;
      color: $appbar-color-primary;
    }
  }

  .e-inherit.e-input-group,
  .e-inherit.e-input-group.e-control-wrapper,
  .e-inherit.e-float-input,
  .e-inherit.e-float-input.e-input-group,
  .e-inherit.e-float-input.e-control-wrapper,
  .e-inherit.e-float-input.e-input-group.e-control-wrapper,
  .e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
  .e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
    color: inherit;
    background: rgba(transparent, .056);
  }

  .e-inherit.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-inherit.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
  .e-inherit.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
  .e-inherit.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    box-shadow: none;
  }

  .e-inherit.e-input-group.e-control-wrapper .e-searchinput::placeholder {
    color: inherit;
    opacity: .8;
  }

  .e-inherit.e-input-group .e-input-group-icon,
  .e-inherit.e-input-group.e-control-wrapper .e-input-group-icon {
    border: $appbar-input-group-icon-border;
    color: inherit;
  }

  .e-inherit.e-input-group .e-clear-icon,
  .e-inherit.e-input-group.e-control-wrapper .e-clear-icon {
    color: inherit;
  }
}

@include export-module('appbar-bigger') {
  .e-bigger .e-appbar,
  .e-appbar.e-bigger {
    height: $appbar-bigger-height;
    font-size: $appbar-bigger-font-size;

    &.e-dense {
      height: $appbar-bigger-dense-height;
    }

    &.e-prominent {
      height: $appbar-bigger-prominent-height;
    }
  }
}

// Dimension variables
$msg-font-family: $font-family !default;
$msg-font-weight: 400 !default;
$msg-font-style: normal !default;
$msg-padding: 9px 7px !default;
$msg-border-radius: 4px !default;
$msg-icon-size: 16px !default;
$msg-icon-margin: 3px 4px !default;
$msg-close-icon-margin: 0 0 0 auto !default;
$msg-close-icon-size: 14px !default;
$msg-close-icon-padding: 3px 4px !default;
$msg-close-icon-height: 22px !default;
$msg-content-font-size: 14px !default;
$msg-content-line-height: 22px !default;
$msg-content-padding: 0 4px !default;

$msg-rtl-close-icon-margin: 0 auto 0 0 !default;

$msg-bigger-padding: 13px 9px !default;
$msg-bigger-icon-size: 18px !default;
$msg-bigger-icon-margin: 3px 6px !default;
$msg-bigger-close-icon-margin: 0 2px 0 auto !default;
$msg-bigger-close-icon-size: 16px !default;
$msg-bigger-close-icon-padding: 3px 4px !default;
$msg-bigger-close-icon-height: 24px !default;
$msg-bigger-content-font-size: 16px !default;
$msg-bigger-content-line-height: 24px !default;
$msg-bigger-content-padding: 0 6px !default;

$msg-bigger-rtl-close-icon-margin: 0 auto 0 2px !default;

// Color variables
// Text
$msg-color: $msg-color !default;
$msg-bg-color: $msg-bg-color !default;
$msg-border-color: $msg-border-color !default;
$msg-success-color: $msg-success-color !default;
$msg-success-bg-color: $msg-success-bg-color !default;
$msg-success-border-color: $msg-success-border-color !default;
$msg-warning-color: $msg-warning-color !default;
$msg-warning-bg-color: $msg-warning-bg-color !default;
$msg-warning-border-color: $msg-success-border-color !default;
$msg-info-color: $msg-info-color !default;
$msg-info-bg-color: $msg-info-bg-color !default;
$msg-info-border-color: $msg-info-border-color !default;
$msg-error-color: $msg-danger-color !default;
$msg-error-bg-color: $msg-danger-bg-color !default;
$msg-error-border-color: $msg-danger-border-color !default;

$msg-icon-color: $msg-icon-color !default;
$msg-success-icon-color: $msg-success-icon-color !default;
$msg-warning-icon-color: $msg-warning-icon-color !default;
$msg-info-icon-color: $msg-info-icon-color !default;
$msg-error-icon-color: $msg-danger-icon-color !default;

$msg-close-icon-color: $msg-close-icon-color !default;
$msg-close-icon-hover-bg-color: rgba($msg-close-icon-color, .12) !default;
$msg-success-close-icon-color: $msg-success-close-icon-color !default;
$msg-success-close-icon-hover-bg-color: rgba($msg-success-close-icon-color, .12) !default;
$msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
$msg-warning-close-icon-hover-bg-color: rgba($msg-warning-close-icon-color, .12) !default;
$msg-info-close-icon-color: $msg-info-close-icon-color !default;
$msg-info-close-icon-hover-bg-color: rgba($msg-info-close-icon-color, .12) !default;
$msg-error-close-icon-color: $msg-danger-close-icon-color !default;
$msg-error-close-icon-hover-bg-color: rgba($msg-error-close-icon-color, .12) !default;

// Outlined
$msg-outline-color: $msg-color-alt1 !default;
$msg-outline-bg-color: $msg-bg-color-alt1 !default;
$msg-outline-border-color: $msg-border-color-alt1 !default;
$msg-outline-success-color: $msg-success-color-alt1 !default;
$msg-outline-success-border-color: $msg-success-border-color-alt1 !default;
$msg-outline-warning-color: $msg-warning-color-alt1 !default;
$msg-outline-warning-border-color: $msg-warning-border-color-alt1 !default;
$msg-outline-info-color: $msg-info-color-alt1 !default;
$msg-outline-info-border-color: $msg-info-border-color-alt1 !default;
$msg-outline-error-color: $msg-danger-color-alt1 !default;
$msg-outline-error-border-color: $msg-danger-border-color-alt1 !default;

$msg-outline-icon-color: $msg-icon-color-alt1 !default;
$msg-outline-success-icon-color: $msg-success-icon-color-alt1 !default;
$msg-outline-warning-icon-color: $msg-warning-icon-color-alt1 !default;
$msg-outline-info-icon-color: $msg-info-icon-color-alt1 !default;
$msg-outline-error-icon-color: $msg-danger-icon-color-alt1 !default;

$msg-outline-close-icon-color: $msg-close-icon-color-alt1 !default;
$msg-outline-close-icon-hover-bg-color: rgba($msg-outline-close-icon-color, .12) !default;
$msg-outline-success-close-icon-color: $msg-success-close-icon-color-alt1 !default;
$msg-outline-success-close-icon-hover-bg-color: rgba($msg-outline-success-close-icon-color, .12) !default;
$msg-outline-warning-close-icon-color: $msg-warning-close-icon-color-alt1 !default;
$msg-outline-warning-close-icon-hover-bg-color: rgba($msg-outline-warning-close-icon-color, .12) !default;
$msg-outline-info-close-icon-color: $msg-info-close-icon-color-alt1 !default;
$msg-outline-info-close-icon-hover-bg-color: rgba($msg-outline-info-close-icon-color, .12) !default;
$msg-outline-error-close-icon-color: $msg-danger-close-icon-color-alt1 !default;
$msg-outline-error-close-icon-hover-bg-color: rgba($msg-outline-error-close-icon-color, .12) !default;

// Filled
$msg-filled-color: $msg-color-alt2 !default;
$msg-filled-bg-color: $msg-bg-color-alt2 !default;
$msg-filled-border-color: $msg-border-color-alt2 !default;
$msg-filled-success-color: $msg-success-color-alt2 !default;
$msg-filled-success-bg-color: $msg-success-bg-color-alt2 !default;
$msg-filled-success-border-color: $msg-success-border-color-alt2 !default;
$msg-filled-warning-color: $msg-warning-color-alt2 !default;
$msg-filled-warning-bg-color:$msg-warning-bg-color-alt2 !default;
$msg-filled-warning-border-color: $msg-warning-border-color-alt2 !default;
$msg-filled-info-color: $msg-info-color-alt2 !default;
$msg-filled-info-bg-color: $msg-info-bg-color-alt2 !default;
$msg-filled-info-border-color: $msg-info-border-color-alt2 !default;
$msg-filled-error-color: $msg-danger-color-alt2 !default;
$msg-filled-error-bg-color: $msg-danger-bg-color-alt2 !default;
$msg-filled-error-border-color: $msg-danger-border-color-alt2 !default;

$msg-filled-icon-color: $msg-icon-color-alt2 !default;
$msg-filled-success-icon-color: $msg-success-icon-color-alt2 !default;
$msg-filled-warning-icon-color: $msg-warning-icon-color-alt2 !default;
$msg-filled-info-icon-color: $msg-info-icon-color-alt2 !default;
$msg-filled-error-icon-color: $msg-danger-icon-color-alt2 !default;

$msg-filled-close-icon-color: $msg-close-icon-color-alt2 !default;
$msg-filled-close-icon-hover-bg-color: rgba($msg-filled-close-icon-color, .12) !default;
$msg-filled-success-close-icon-color: $msg-success-close-icon-color-alt2 !default;
$msg-filled-success-close-icon-hover-bg-color: rgba($msg-filled-success-close-icon-color, .12) !default;
$msg-filled-warning-close-icon-color: $msg-warning-close-icon-color-alt2 !default;
$msg-filled-warning-close-icon-hover-bg-color: rgba($msg-filled-warning-close-icon-color, .12) !default;
$msg-filled-info-close-icon-color: $msg-info-close-icon-color-alt2 !default;
$msg-filled-info-close-icon-hover-bg-color: rgba($msg-filled-info-close-icon-color, .12) !default;
$msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
$msg-filled-error-close-icon-hover-bg-color: rgba($msg-filled-error-close-icon-color, .12) !default;
$message-border: 1px !default;
$message-zero-border: 0 !default;
$message-full-radius: 50% !default;

@include export-module('message-layout') {

  .e-message {
    border: $message-border solid;
    border-radius: $msg-border-radius;
    box-sizing: border-box;
    font-family: $msg-font-family;
    font-weight: $msg-font-weight;
    font-style: $msg-font-style;
    padding: $msg-padding;
    display: flex;

    &.e-hidden {
      display: none;
    }

    .e-msg-icon,
    .e-msg-close-icon {
      box-sizing: border-box;
      display: flex;
      line-height: $msg-icon-size;
    }

    .e-msg-icon {
      font-size: $msg-icon-size;
      height: $msg-icon-size;
      margin: $msg-icon-margin;
      @if $skin-name == 'fluent2' {
        padding: $message-msg-icon-padding;
      }
    }

    .e-msg-close-icon {
      border-width: $message-zero-border;
      cursor: pointer;
      font-size: $msg-close-icon-size;
      margin: $msg-close-icon-margin;
      padding: $msg-close-icon-padding;
      height: $msg-close-icon-height;
      @if $skin-name == 'fluent2' {
        line-height: $message-nrml-close-icon-line-height;
      }
    }

    .e-msg-content {
      box-sizing: border-box;
      font-size: $msg-content-font-size;
      line-height: $msg-content-line-height;
      padding: $msg-content-padding;
      vertical-align: top;
    }

    &.e-content-right {
      justify-content: flex-end;
    }

    &.e-content-center .e-msg-content-wrap {
      display: flex;
      flex: 1;
      justify-content: center;
    }

    &.e-content-right .e-msg-close-icon,
    &.e-content-center .e-msg-close-icon {
      margin: $msg-icon-margin;
    }

    &.e-rtl {
      .e-msg-close-icon {
        margin: $msg-rtl-close-icon-margin;
      }
    }
  }
}

@include export-module('message-theme') {
  .e-message {
    background: $msg-bg-color;
    @if ($skin-name == 'Material3') {
      border-image: $msg-border-color;
    }
    @else {
      border-color: $msg-border-color;
    }
    color: $msg-color;

    .e-msg-icon {
      color: $msg-icon-color;
    }

    .e-msg-close-icon {
      background: transparent;
      color: $msg-close-icon-color;
      @if $skin-name == 'bootstrap5.3' {
        &:hover {
          color: $msg-close-icon-hover-color;
        }
        &:focus {
          color: $msg-close-icon-focus-color;
          box-shadow: $msg-close-icon-focus-shadow;
        }
      }
      @else {
        &:hover,
        &:focus {
          background-color: $msg-close-icon-hover-bg-color;
          box-shadow: 0 0 0 2px $msg-close-icon-hover-bg-color;
          border-radius: $message-full-radius;
        }
      }
    }

    &.e-success {
      background-color: $msg-success-bg-color;
      border-color: $msg-success-border-color;
      color: $msg-success-color;

      .e-msg-icon {
        color: $msg-success-icon-color;
      }

      .e-msg-close-icon {
        color: $msg-success-close-icon-color;
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            background-color: $msg-success-close-icon-hover-bg-color;
            box-shadow: 0 0 0 2px $msg-success-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-warning {
      background-color: $msg-warning-bg-color;
      border-color: $msg-warning-border-color;
      color: $msg-warning-color;

      .e-msg-icon {
        color: $msg-warning-icon-color;
      }

      .e-msg-close-icon {
        color: $msg-warning-close-icon-color;
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            background-color: $msg-warning-close-icon-hover-bg-color;
            box-shadow: 0 0 0 2px $msg-warning-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-info {
      background-color: $msg-info-bg-color;
      border-color: $msg-info-border-color;
      color: $msg-info-color;

      .e-msg-icon {
        color: $msg-info-icon-color;
      }

      .e-msg-close-icon {
        color: $msg-info-close-icon-color;
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            background-color: $msg-info-close-icon-hover-bg-color;
            box-shadow: 0 0 0 2px $msg-info-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-error {
      background-color: $msg-error-bg-color;
      border-color: $msg-error-border-color;
      color: $msg-error-color;

      .e-msg-icon {
        color: $msg-error-icon-color !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-msg-close-icon {
        color: $msg-error-close-icon-color;
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            background-color: $msg-error-close-icon-hover-bg-color;
            box-shadow: 0 0 0 2px $msg-error-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-outlined {
      background: $msg-outline-bg-color;
      @if ($skin-name == 'Material3') {
        border-image: none;
      }
      border-color: $msg-outline-border-color;
      color: $msg-outline-color;

      .e-msg-icon {
        color: $msg-outline-icon-color;
      }

      .e-msg-close-icon {
        color: $msg-outline-close-icon-color;
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            background-color: $msg-outline-close-icon-hover-bg-color;
            box-shadow: 0 0 0 2px $msg-outline-close-icon-hover-bg-color;
          }
        }
      }

      &.e-success {
        border-color: $msg-outline-success-border-color;
        color: $msg-outline-success-color;

        .e-msg-icon {
          color: $msg-outline-success-icon-color;
        }

        .e-msg-close-icon {
          color: $msg-outline-success-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-outline-success-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-outline-success-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-warning {
        border-color: $msg-outline-warning-border-color;
        color: $msg-outline-warning-color;

        .e-msg-icon {
          color: $msg-outline-warning-icon-color;
        }

        .e-msg-close-icon {
          color: $msg-outline-warning-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-outline-warning-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-outline-warning-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-info {
        border-color: $msg-outline-info-border-color;
        color: $msg-outline-info-color;

        .e-msg-icon {
          color: $msg-outline-info-icon-color;
        }

        .e-msg-close-icon {
          color: $msg-outline-info-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-outline-info-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-outline-info-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-error {
        border-color: $msg-outline-error-border-color;
        color: $msg-outline-error-color;

        .e-msg-icon {
          color: $msg-outline-error-icon-color;
        }

        .e-msg-close-icon {
          color: $msg-outline-error-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-outline-error-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-outline-error-close-icon-hover-bg-color;
            }
          }
        }
      }
    }

    &.e-filled {
      background: $msg-filled-bg-color;
      @if ($skin-name == 'Material3') {
        border-image: none;
      }
      border-color: $msg-filled-border-color;
      color: $msg-filled-color;

      .e-msg-icon {
        color: $msg-filled-icon-color;
      }

      .e-msg-close-icon {
        color: $msg-filled-close-icon-color;
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            background-color: $msg-filled-close-icon-hover-bg-color;
            box-shadow: 0 0 0 2px $msg-filled-close-icon-hover-bg-color;
          }
        }
      }

      &.e-success {
        background-color: $msg-filled-success-bg-color;
        border-color: $msg-filled-success-border-color;
        color: $msg-filled-success-color;

        .e-msg-icon {
          color: $msg-filled-success-icon-color;
        }

        .e-msg-close-icon {
          color: $msg-filled-success-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-filled-success-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-filled-success-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-warning {
        background-color: $msg-filled-warning-bg-color;
        border-color: $msg-filled-warning-border-color;
        color: $msg-filled-warning-color;

        .e-msg-icon {
          color: $msg-filled-warning-icon-color;
        }

        .e-msg-close-icon {
          color: $msg-filled-warning-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-filled-warning-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-filled-warning-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-info {
        background-color: $msg-filled-info-bg-color;
        border-color: $msg-filled-info-border-color;
        color: $msg-filled-info-color;

        .e-msg-icon {
          color: $msg-filled-info-icon-color;
        }

        .e-msg-close-icon {
          color: $msg-filled-info-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-filled-info-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-filled-info-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-error {
        background-color: $msg-filled-error-bg-color;
        border-color: $msg-filled-error-border-color;
        color: $msg-filled-error-color;

        .e-msg-icon {
          color: $msg-filled-error-icon-color !important; /* stylelint-disable-line declaration-no-important */
        }

        .e-msg-close-icon {
          color: $msg-filled-error-close-icon-color;
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              background-color: $msg-filled-error-close-icon-hover-bg-color;
              box-shadow: 0 0 0 2px $msg-filled-error-close-icon-hover-bg-color;
            }
          }
        }
      }
    }
  }
}

@include export-module('message-bootstrap-dark-icons') {
  .e-message {
    .e-msg-icon::before,
    .e-msg-close-icon::before {
      font-family: 'e-icons';
    }

    .e-msg-icon::before,
    &.e-info .e-msg-icon::before {
      content: '\e607';
    }

    .e-msg-close-icon::before {
      content: '\e7fc';
    }

    &.e-success .e-msg-icon::before {
      content: '\ea84';
    }

    &.e-error .e-msg-icon::before {
      content: '\e7e9';
    }

    &.e-warning .e-msg-icon::before {
      content: '\e92f';
    }
  }
}

@include export-module('message-bigger') {
  .e-bigger .e-message,
  .e-message.e-bigger {
    padding: $msg-bigger-padding;

    .e-msg-icon,
    .e-msg-close-icon {
      line-height: $msg-bigger-icon-size;
    }

    .e-msg-icon {
      font-size: $msg-bigger-icon-size;
      height: $msg-bigger-icon-size;
      margin: $msg-bigger-icon-margin;
      @if $skin-name == 'fluent2' {
        padding: $message-bigger-msg-icon-padding;
      }
    }

    .e-msg-close-icon {
      font-size: $msg-bigger-close-icon-size;
      margin: $msg-bigger-close-icon-margin;
      padding: $msg-bigger-close-icon-padding;
      height: $msg-bigger-close-icon-height;
      @if $skin-name == 'fluent2' {
        line-height: $message-close-icon-line-height;
      }
    }

    .e-msg-content {
      line-height: $msg-bigger-content-line-height;
      font-size: $msg-bigger-content-font-size;
      padding: $msg-bigger-content-padding;
    }

    &.e-content-right .e-msg-close-icon,
    &.e-content-center .e-msg-close-icon {
      margin: $msg-bigger-icon-margin;
    }

    &.e-rtl {
      .e-msg-close-icon {
        margin: $msg-bigger-rtl-close-icon-margin;
      }
    }
  }

  .e-bigger .e-message,
  .e-message.e-bigger {
    .e-msg-close-icon {
      @if $skin-name == 'bootstrap5.3' {
        &:hover {
          color: $msg-close-icon-hover-color;
        }
        &:focus {
          color: $msg-close-icon-focus-color;
          box-shadow: $msg-close-icon-focus-shadow;
        }
      }
      @else {
        &:hover,
        &:focus {
          box-shadow: 0 0 0 4px $msg-close-icon-hover-bg-color;
        }
      }
    }

    &.e-success {
      .e-msg-close-icon {
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            color: $msg-close-icon-focus-color;
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            box-shadow: 0 0 0 4px $msg-success-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-warning {
      .e-msg-close-icon {
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            color: $msg-close-icon-focus-color;
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            box-shadow: 0 0 0 4px $msg-warning-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-info {
      .e-msg-close-icon {
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            color: $msg-close-icon-focus-color;
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            box-shadow: 0 0 0 4px $msg-info-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-error {
      .e-msg-close-icon {
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            color: $msg-close-icon-focus-color;
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            box-shadow: 0 0 0 4px $msg-error-close-icon-hover-bg-color;
          }
        }
      }
    }

    &.e-outlined {
      .e-msg-close-icon {
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            color: $msg-close-icon-focus-color;
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            box-shadow: 0 0 0 4px $msg-outline-close-icon-hover-bg-color;
          }
        }
      }

      &.e-success {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-outline-success-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-warning {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-outline-warning-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-info {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-outline-info-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-error {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-outline-error-close-icon-hover-bg-color;
            }
          }
        }
      }
    }

    &.e-filled {
      .e-msg-close-icon {
        @if $skin-name == 'bootstrap5.3' {
          &:hover {
            color: $msg-close-icon-hover-color;
          }
          &:focus {
            color: $msg-close-icon-focus-color;
            box-shadow: $msg-close-icon-focus-shadow;
          }
        }
        @else {
          &:hover,
          &:focus {
            box-shadow: 0 0 0 4px $msg-filled-close-icon-hover-bg-color;
          }
        }
      }

      &.e-success {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-filled-success-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-warning {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-filled-warning-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-info {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-filled-info-close-icon-hover-bg-color;
            }
          }
        }
      }

      &.e-error {
        .e-msg-close-icon {
          @if $skin-name == 'bootstrap5.3' {
            &:hover {
              color: $msg-close-icon-hover-color;
            }
            &:focus {
              color: $msg-close-icon-focus-color;
              box-shadow: $msg-close-icon-focus-shadow;
            }
          }
          @else {
            &:hover,
            &:focus {
              box-shadow: 0 0 0 4px $msg-filled-error-close-icon-hover-bg-color;
            }
          }
        }
      }
    }
  }
}

$skeleton-background-color: $gray-dark !default;
$shimmer-wave-color: $gray-darker !default;
$shimmer-background-color: transparent !default;
$shimmer-wave-color-opacity: 50% !default;
$shimmer-wave-length: 100px !default;
$shimmer-wave-pos: 50% !default;
$shimmer-wave-angle: 90deg !default;
$skeleton-border-radius: 4px !default;
$shimmer-wave-angle-rtl: 45deg !default;
$shimmer-effect-duration: 2s !default;
$shimmer-effect-timing-function: ease-in-out !default;
$skeleton-boder: none;
$skeleton-circle-border-radius: 50% !default;
$skeleton-value-zero: 0 !default;
$skeleton-wave-after-width: calc(200% + 200px);

@mixin shimmer-animation($animation-name) {
  animation: $animation-name $shimmer-effect-duration infinite;
  animation-timing-function: $shimmer-effect-timing-function;
}

@include export-module('skeleton-layout') {
  .e-skeleton {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: $skeleton-boder;

    @at-root {
      &.e-skeleton-text,
      &.e-skeleton-square,
      &.e-skeleton-rectangle {
        border-radius: $skeleton-border-radius;
      }

      @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
        &.e-skeleton-text {
          border-width: $skeleton-text-boder-width;
        }
      }

      &.e-skeleton-circle {
        border-radius: $skeleton-circle-border-radius;
      }

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

      &.e-shimmer-wave::after {
        @include shimmer-animation(e-shimmer-wave);
        content: '';
        position: absolute;
        top: $skeleton-value-zero;
        bottom: $skeleton-value-zero;
        right: $skeleton-value-zero;
        width: $skeleton-wave-after-width;
      }

      &.e-shimmer-fade {
        @include shimmer-animation(e-shimmer-fade);
      }

      &.e-shimmer-pulse {
        @include shimmer-animation(e-shimmer-pulse);
      }
    }
  }

  .e-rtl .e-shimmer-wave::after,
  .e-rtl.e-shimmer-wave::after {
    animation: e-shimmer-wave-rtl $shimmer-effect-duration infinite;
  }

  @keyframes e-shimmer-wave {
    to {
      transform: translateX(calc(50% + 100px));
    }
  }

  @keyframes e-shimmer-wave-rtl {
    from {
      transform: translateX(calc(50% + 100px));
    }
  }

  @keyframes e-shimmer-fade {
    0% {
      opacity: 1;
    }
    50% {
      opacity: .4;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes e-shimmer-pulse {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1);
    }
    50% {
      transform: scale(.975);
    }
    100% {
      transform: scale(1);
    }
  }
}

.e-skeleton {
  @at-root {
    &.e-shimmer-wave::after {
      @if ($skin-name =='Material3') {
        // Added direct color value to resolve the compile issue
        background-image: linear-gradient($shimmer-wave-angle, $shimmer-background-color calc($shimmer-wave-pos - $shimmer-wave-length), $shimmer-wave-color $shimmer-wave-pos, $shimmer-background-color calc($shimmer-wave-pos + $shimmer-wave-length));
      }
      @else if ($skin-name == 'fluent2') {
        background-image: linear-gradient($shimmer-wave-angle, #fafafa calc($shimmer-wave-pos - $shimmer-wave-length), #e6e6e6 $shimmer-wave-pos, #fafafa calc($shimmer-wave-pos + $shimmer-wave-length));
      }
      @else {
        background-image: linear-gradient($shimmer-wave-angle, $shimmer-background-color calc($shimmer-wave-pos - $shimmer-wave-length), #e6e1e5 $shimmer-wave-pos, $shimmer-background-color calc($shimmer-wave-pos + $shimmer-wave-length));
      }
    }

    &.e-skeleton-text,
    &.e-skeleton-square,
    &.e-skeleton-rectangle,
    &.e-skeleton-circle {
      @if ($skin-name =='Material3') {
        background: $skeleton-background-color;
      }
      @else {
        background-color: $skeleton-background-color;
      }
    }
  }
}

$rating-li-font-size: 20px !default;
$rating-li-padding: 4px !default;
$rating-li-line-height: 9px !default;
$rating-li-min-width-height: 28px !default;
$rating-focus-border-radius: 2px !default;
$rating-label-right-margin: 4px !default;
$rating-label-bottom-margin: 8px !default;
$rating-label-left-margin: 4px !default;
$rating-label-top-margin: 8px !default;
$rating-label-font-size: 12px !default;
$rating-label-line-height: 18px !default;
$rating-reset-font-size : 16px !default;
$rating-tooltip-tip-bottom-height: -8px !default;
$rating-border-width: 1px !default;

$rating-small-li-font-size: 16px !default;
$rating-small-li-line-height: 4px !default;
$rating-small-li-min-width-height: 24px !default;
$rating-small-label-font-size: 10px !default;
$rating-small-label-line-height: 16px !default;
$rating-small-reset-font-size : 12px !default;

$rating-bigger-li-font-size: 32px !default;
$rating-bigger-li-line-height: 16px !default;
$rating-bigger-li-min-width-height: 40px !default;
$rating-bigger-label-font-size: 14px !default;
$rating-bigger-label-line-height: 22px !default;
$rating-bigger-reset-font-size : 28px !default;

$rating-bigger-small-li-font-size: 26px !default;
$rating-bigger-small-li-line-height: 9px !default;
$rating-bigger-small-li-min-width-height: 34px !default;
$rating-bigger-small-label-font-size: 12px !default;
$rating-bigger-small-label-line-height: 18px !default;
$rating-bigger-small-reset-font-size : 22px !default;

$rating-selected-bg-color: $grey-cc !default;
$rating-unrated-bg-color: $grey-ad !default;
$rating-unrated-icon-bg-color: none !default;
$rating-hover-bg-color: $brand-primary-lighten-20 !default;
$rating-pressed-bg-color: $brand-primary-lighten-20 !default;
$rating-selected-disabled-bg-color: $grey-99 !default;
$rating-unrated-disabled-bg-color: $grey-99 !default;
$rating-li-focus: $grey-ad !default;
$rating-reset-icon-color: $grey-cc !default;
$rating-reset-hover-icon-color: $grey-ad !default;
$rating-reset-disabled-icon-color: $grey-99 !default;

$rating-item-list-padding: 0 !default;
$rating-item-list-margin: 4px !default;
$rating-reset-padding: 2px !default;
$rating-reset-margin: auto 2px 6px !default;
$rating-label-left-width: 50px !default;
$rating-label-bottom-width: 0 !default;
$rating-arrow-tip-bottom-top: -6px !default;
$rating-auto-width: auto;
$rating-half-width: 50% !default;
$rating-full-width: 100% !default;

@mixin rating-container-properties($svg-font-size, $svg-line-height, $label-font-size, $label-line-height, $reset-icon-font-size) {
  .e-rating-item-container {
    &:has(svg) {
      line-height: $svg-line-height;
    }
    font-size: $svg-font-size;
  }

  .e-rating-label {
    font-size: $label-font-size;
    line-height: $label-line-height;
  }

  .e-reset {
    font-size: $reset-icon-font-size;
  }
}

@include export-module('rating-layout') {
  .e-rating-container {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-width: max-content;

    .e-rating {
      display: none;
    }

    .e-rating-item-list {
      display: inline-flex;
      padding: $rating-item-list-padding;
      margin: $rating-item-list-margin;

      &:focus-visible:not(:hover) .e-rating-focus {
        &:not(:has(svg)),
        .e-rating-item:has(svg) {
          outline: 1px solid;
        }
      }

      &:focus-visible {
        outline: none;
      }
    }

    &.e-rating-readonly {
      cursor: default;
      pointer-events: none;
    }

    .e-rating-item-container {
      &:has(svg) {
        line-height: $rating-li-line-height;
      }
      cursor: pointer;
      font-size: $rating-li-font-size;
      padding: $rating-li-padding;
      display: block;
      min-width: calc(1em + (2 * $rating-li-padding)); //calc(font-size + (2 * padding));
      min-height: calc(1em + (2 * $rating-li-padding)); //calc(font-size + (2 * padding));
      //For Blazor Tooltip
      position: relative;

      .e-rating-item {
        display: block;
      }
    }

    &.e-rating-animation.e-touch-select:not(.e-disabled) .e-rating-item-container.e-rating-focus .e-rating-item,
    &.e-rating-animation:not(.e-disabled, .e-rating-touch) .e-rating-item-container:hover .e-rating-item {
      transition: transform 150ms cubic-bezier(.4, 0, .2, 1) 0ms;
      transform: scale(1.4);
      pointer-events: none;
    }

    &.e-disabled {
      cursor: default;
      pointer-events: none;
    }

    &.e-rating-hidden {
      display: none;
    }

    .e-reset {
      cursor: pointer;
      font-size: $rating-reset-font-size;
      padding: $rating-reset-padding;
      margin: $rating-reset-margin;

      &.e-disabled {
        cursor: default;
      }

      &:focus-visible {
        outline: 1px solid;
        border-radius: $rating-focus-border-radius;
      }
    }

    .e-rating-label {
      font-size: $rating-label-font-size;
      line-height: $rating-label-line-height;

      &.e-label-right,
      &.e-label-left {
        min-width: $rating-label-left-width;
      }

      &.e-label-bottom,
      &.e-label-top {
        flex-basis: 100%;
        width: $rating-label-bottom-width;
        text-align: center;
      }

      &.e-label-right {
        text-align: left;
        margin: $rating-auto-width $rating-label-right-margin;
      }

      &.e-label-left {
        text-align: right;
        margin: $rating-auto-width $rating-label-left-margin;
      }

      &.e-label-top {
        margin: $rating-label-top-margin $rating-item-list-padding;
      }

      &.e-label-bottom {
        margin: $rating-label-bottom-margin $rating-item-list-padding;
      }
    }

    &.e-rtl {
      .e-rating-label {
        &.e-label-right {
          text-align: right;
        }

        &.e-label-left {
          text-align: left;
        }
      }
    }
    //Blazor Rating Tooltip
    .e-tooltip-wrap.e-rating-tooltip {
      display: none;
      justify-content: center;
      left: $rating-half-width;
      top: $rating-tooltip-tip-bottom-height;
      transform: translate(-50%, -100%);

      &.e-show-tooltip {
        display: inline-flex;
      }

      .e-tip-content {
        width: max-content;
      }

      .e-arrow-tip.e-tip-bottom {
        left: $rating-half-width;
        top: $rating-full-width;
        transform: translate(-50%, 0);
      }

      .e-arrow-tip-inner.e-tip-bottom {
        top: $rating-arrow-tip-bottom-top;
      }
    }
  }

  .e-rating-tooltip .e-tip-content {
    text-align: center;
  }

  .e-small.e-rating-container,
  .e-small .e-rating-container {
    @include rating-container-properties($rating-small-li-font-size, $rating-small-li-line-height, $rating-small-label-font-size, $rating-small-label-line-height, $rating-small-reset-font-size);
  }
}

@include export-module('rating-theme') {
  .e-rating-container {
    .e-rating-item-list {
      &:focus-visible:not(:hover) .e-rating-focus {
        &:not(:has(svg)),
        .e-rating-item:has(svg) {
          outline-color: $rating-li-focus;
          border-radius: $rating-focus-border-radius;
        }
      }
    }

    .e-reset {
      color: $rating-reset-icon-color;

      &:hover {
        color: $rating-reset-hover-icon-color;
      }

      &.e-disabled {
        color: $rating-reset-disabled-icon-color;
        opacity: 1;
      }
    }

    .e-rating-item-container {
      .e-rating-icon {
        -webkit-text-fill-color: transparent;
        @if ($skin-name == 'Material3') {
          -webkit-text-stroke: $rating-border-width transparent;
        }
        @else {
          -webkit-text-stroke: $rating-border-width $rating-unrated-bg-color;
        }
        background: $rating-unrated-icon-bg-color;
        @if ($skin-name == 'Material3' or $skin-name =='tailwind') {
          background-clip: text;
          /* stylelint-disable property-no-vendor-prefix */
          -webkit-background-clip: text;
          /* stylelint-enable property-no-vendor-prefix */
        }
      }

      &.e-rating-selected .e-rating-icon,
      &.e-rating-intermediate .e-rating-icon {
        background: linear-gradient(to right, $rating-selected-bg-color var(--rating-value), transparent var(--rating-value));
        background-clip: text;
        /* stylelint-disable property-no-vendor-prefix */
        -webkit-background-clip: text;
        /* stylelint-enable property-no-vendor-prefix */
        -webkit-text-stroke: $rating-border-width $rating-selected-bg-color;
      }

      &.e-selected-value .e-rating-icon {
        -webkit-text-stroke: $rating-border-width $rating-hover-bg-color;
        @if ($skin-name =='bootstrap5') {
          -webkit-text-stroke: $rating-border-width $rating-selected-bg-color;
        }
      }
    }

    .e-rating-item-list {
      &:hover .e-rating-item-container {
        &.e-rating-selected .e-rating-icon,
        &.e-rating-intermediate .e-rating-icon {
          background: linear-gradient(to right, $rating-hover-bg-color var(--rating-value), transparent var(--rating-value));
          background-clip: text;
          /* stylelint-disable property-no-vendor-prefix */
          -webkit-background-clip: text;
          /* stylelint-enable property-no-vendor-prefix */
          @if ($skin-name == 'Material3') {
            -webkit-text-stroke: $rating-border-width $rating-selected-bg-color;
          }
          @else {
            -webkit-text-stroke: $rating-border-width $rating-hover-bg-color;
          }
        }
      }

      .e-rating-item-container {
        &.e-rating-selected:active .e-rating-icon,
        &.e-rating-intermediate:active .e-rating-icon {
          background: linear-gradient(to right, $rating-pressed-bg-color var(--rating-value), transparent var(--rating-value));
          background-clip: text;
          /* stylelint-disable property-no-vendor-prefix */
          -webkit-background-clip: text;
          /* stylelint-enable property-no-vendor-prefix */
          @if ($skin-name == 'bootstrap4') {
            -webkit-text-stroke: $rating-border-width $rating-hover-bg-color;
          }
          @else if ($skin-name == 'Material3') {
            -webkit-text-stroke: $rating-border-width $rating-selected-bg-color;
          }
          @else {
            -webkit-text-stroke: $rating-border-width $rating-pressed-bg-color;
          }
        }
      }
    }

    &.e-rtl {
      .e-rating-item-container {
        &.e-rating-selected .e-rating-icon,
        &.e-rating-intermediate .e-rating-icon {
          background: linear-gradient(to left, $rating-selected-bg-color var(--rating-value), transparent var(--rating-value));
          background-clip: text;
          /* stylelint-disable property-no-vendor-prefix */
          -webkit-background-clip: text;
          /* stylelint-enable property-no-vendor-prefix */
        }
      }

      .e-rating-item-list {
        &:hover .e-rating-item-container {
          &.e-rating-selected .e-rating-icon,
          &.e-rating-intermediate .e-rating-icon {
            background: linear-gradient(to left, $rating-hover-bg-color var(--rating-value), transparent var(--rating-value));
            background-clip: text;
            /* stylelint-disable property-no-vendor-prefix */
            -webkit-background-clip: text;
            /* stylelint-enable property-no-vendor-prefix */
          }
        }

        .e-rating-item-container {
          &.e-rating-selected:active .e-rating-icon,
          &.e-rating-intermediate:active .e-rating-icon {
            background: linear-gradient(to left, $rating-pressed-bg-color var(--rating-value), transparent var(--rating-value));
            background-clip: text;
            /* stylelint-disable property-no-vendor-prefix */
            -webkit-background-clip: text;
            /* stylelint-enable property-no-vendor-prefix */
          }
        }
      }
    }

    &.e-disabled {
      opacity: 1;
      .e-rating-item-container {
        .e-rating-icon {
          @if ($skin-name == 'Material3') {
            -webkit-text-stroke: $rating-border-width transparent;
            background: $rating-unrated-disabled-bg-color;
            background-clip: text;
            /* stylelint-disable property-no-vendor-prefix */
            -webkit-background-clip: text;
            /* stylelint-enable property-no-vendor-prefix */
          }
          @else{
            -webkit-text-stroke: $rating-border-width $rating-unrated-disabled-bg-color;
          }
        }

        &.e-rating-selected .e-rating-icon,
        &.e-rating-intermediate .e-rating-icon {
          background: linear-gradient(to right, $rating-selected-disabled-bg-color var(--rating-value), transparent var(--rating-value));
          background-clip: text;
          /* stylelint-disable property-no-vendor-prefix */
          -webkit-background-clip: text;
          /* stylelint-enable property-no-vendor-prefix */
          @if ($skin-name == 'Material3') {
            -webkit-text-stroke: $rating-border-width transparent;
          }
          @else{
            -webkit-text-stroke: $rating-border-width $rating-selected-disabled-bg-color;
          }
        }
      }

      &.e-rtl {
        .e-rating-item-container {
          .e-rating-icon {
            @if ($skin-name == 'Material3') {
              background: $rating-unrated-disabled-bg-color;
            }
            @else{
              background: linear-gradient(to left, $rating-unrated-disabled-bg-color var(--rating-value), transparent var(--rating-value));
            }
            background-clip: text;
            /* stylelint-disable property-no-vendor-prefix */
            -webkit-background-clip: text;
            /* stylelint-enable property-no-vendor-prefix */
          }

          &.e-rating-selected .e-rating-icon,
          &.e-rating-intermediate .e-rating-icon {
            background: linear-gradient(to left, $rating-selected-disabled-bg-color var(--rating-value), transparent var(--rating-value));
            background-clip: text;
            /* stylelint-disable property-no-vendor-prefix */
            -webkit-background-clip: text;
            /* stylelint-enable property-no-vendor-prefix */
          }
        }
      }
    }
  }
}

@include export-module('rating-bigger') {

  .e-bigger.e-rating-container,
  .e-bigger .e-rating-container {
    @include rating-container-properties($rating-bigger-li-font-size, $rating-bigger-li-line-height, $rating-bigger-label-font-size, $rating-bigger-label-line-height, $rating-bigger-reset-font-size);
  }

  .e-bigger.e-small.e-rating-container,
  .e-bigger.e-small .e-rating-container,
  .e-bigger .e-small.e-rating-container,
  .e-small .e-bigger.e-rating-container {
    @include rating-container-properties($rating-bigger-small-li-font-size, $rating-bigger-small-li-line-height, $rating-bigger-small-label-font-size, $rating-bigger-small-label-line-height, $rating-bigger-small-reset-font-size);
  }
}

$otp-input-width: 34px !default;
$otp-input-height: 34px !default;
$otp-input-gap: 12px !default;
$otp-separator-input-gap: 6px !default;
$otp-input-padding: 0 !default;
$otp-input-font-size: 14px !default;
$otp-input-font-weight: 400 !default;
$otp-input-password-font-size: 18px !default;
$otp-input-line-height: 22px !default;
$otp-input-border-radius-outlined: 2px !default;
$otp-input-border-radius-underlined: 2px 2px 0 0 !default;
$otp-input-border-radius-filled: 2px 2px 0 0 !default;
$otp-separator-font-size: 14px !default;
$otp-separator-font-weight: 400 !default;
$otp-separator-line-height: 22px !default;

$otp-small-input-width: 28px !default;
$otp-small-input-height: 28px !default;
$otp-small-input-gap: 8px !default;
$otp-small-separator-input-gap: 4px !default;
$otp-small-input-font-size: 12px !default;
$otp-small-input-password-font-size: 18px !default;
$otp-small-input-line-height: 18px !default;
$otp-small-separator-font-size: 12px !default;
$otp-small-separator-line-height: 18px !default;

$otp-bigger-small-input-width: 36px !default;
$otp-bigger-small-input-height: 36px !default;
$otp-bigger-small-input-gap: 14px !default;
$otp-bigger-small-separator-input-gap: 6px !default;
$otp-bigger-small-input-font-size: 16px !default;
$otp-bigger-small-input-password-font-size: 20px !default;
$otp-bigger-small-input-line-height: 24px !default;
$otp-bigger-small-separator-font-size: 16px !default;
$otp-bigger-small-separator-line-height: 24px !default;

$otp-bigger-input-width: 40px !default;
$otp-bigger-input-height: 40px !default;
$otp-bigger-input-gap: 16px !default;
$otp-bigger-separator-input-gap: 8px !default;
$otp-bigger-input-font-size: 16px !default;
$otp-bigger-input-password-font-size: 20px !default;
$otp-bigger-input-line-height: 24px !default;
$otp-bigger-separator-font-size: 16px !default;
$otp-bigger-separator-line-height: 24px !default;

$otp-input-text-color: $grey-light-font !default;
$otp-background-color: transparent !default;
$otp-input-border-color: $grey-lighter !default;
$otp-input-border-bottom-color: $grey-lighter !default;
$otp-input-filled-bg-color: $gray-dark !default;
$otp-input-error-color: $brand-danger !default;
$otp-input-success-color: $brand-success !default;
$otp-input-warning-color: $brand-warning !default;
$otp-input-separator-color: $grey-lighter !default;
$otp-input-underlined-bg-color: transparent !default;
$otp-input-disabled-color: $grey-f5 !default;
$otp-input-disabled-border-color: $grey-ad !default;
$otp-input-disabled-bg-color: $otp-background-color !default;
$otp-input-zero-padding-margin: 0 !default;

@include export-module('otp-input-layout') {
  .e-otpinput {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $otp-input-gap;
    flex-direction: row;
    &:has(.e-otp-separator):not(:empty) {
      gap: $otp-separator-input-gap;
    }
    .e-otp-input-field {
      min-width: $otp-input-width;
      min-height: $otp-input-height;
      text-align: center;
      padding: $otp-input-padding;
      font-size: $otp-input-font-size;
      font-weight: $otp-input-font-weight;
      line-height: $otp-input-line-height;
      border: none;
      &input[type = 'password'],
      &[type = 'password'] {
        font-size: $otp-input-password-font-size;
      }
      &.e-input.e-otp-input-focus:focus {
        padding-bottom: $otp-input-zero-padding-margin;
      }
    }
    &.e-outline {
      .e-otp-input-field {
        border-radius: $otp-input-border-radius-outlined;
      }
    }
    &.e-underlined {
      .e-otp-input-field {
        border-radius: $otp-input-border-radius-underlined;
      }
    }
    &.e-filled {
      .e-otp-input-field {
        border-radius: $otp-input-border-radius-filled;
        padding: $otp-input-zero-padding-margin;
      }
    }
    .e-otp-separator {
      font-size: $otp-separator-font-size;
      font-weight: $otp-separator-font-weight;
      line-height: $otp-separator-line-height;
    }
    input[type = 'number']::-webkit-inner-spin-button,
    [type = 'number']::-webkit-outer-spin-button {
      /* stylelint-disable property-no-vendor-prefix */
      -webkit-appearance: none;
      /* stylelint-enable property-no-vendor-prefix */
      margin: $otp-input-zero-padding-margin;
    }
    // Remove spin buttons in Firefox
    input[type = 'number'] {
      /* stylelint-disable property-no-vendor-prefix */
      -moz-appearance: textfield;
      /* stylelint-enable property-no-vendor-prefix */
    }
  }

  .e-small.e-otpinput,
  .e-small .e-otpinput {
    gap: $otp-small-input-gap;
    &:has(.e-otp-separator):not(:empty) {
      gap: $otp-small-separator-input-gap;
    }
    .e-otp-input-field {
      min-width: $otp-small-input-width;
      min-height: $otp-small-input-height;
      font-size: $otp-small-input-font-size;
      line-height: $otp-small-input-line-height;
      padding: $otp-input-padding;
      &input[type = 'password'],
      &[type = 'password'] {
        font-size: $otp-small-input-password-font-size;
      }
      &.e-input.e-otp-input-focus:focus {
        padding-bottom: $otp-input-zero-padding-margin;
      }
    }
    .e-otp-separator {
      font-size: $otp-small-separator-font-size;
      line-height: $otp-small-separator-line-height;
    }
    &.e-filled {
      .e-otp-input-field {
        padding: $otp-input-zero-padding-margin;
      }
    }
  }
}

@include export-module('otp-input-theme') {
  .e-otpinput {
    .e-otp-input-field {
      color: $otp-input-text-color;
      background: $otp-background-color;
    }
    .e-otp-separator {
      color: $otp-input-separator-color;
    }
    &.e-outline {
      .e-otp-input-field {
        border: 1px solid $otp-input-border-color;
      }
    }
    &.e-outline,
    &.e-underlined,
    &.e-filled {
      .e-otp-input-field {
        @if ($skin-name == 'bootstrap5.3') {
          border-bottom: 1px solid $otp-input-border-bottom-color;
        }
        @else if $skin-name == 'tailwind3' {
          border-bottom: $border-2 solid $otp-input-border-bottom-color;
        }
        @else {
          border-bottom: 2px solid $otp-input-border-bottom-color;
        }
      }
      .e-otp-input-field:disabled {
        border-color: $otp-input-disabled-border-color;
        color: $otp-input-disabled-color;
        background: $otp-input-disabled-bg-color;
      }
    }
    &.e-filled {
      .e-otp-input-field {
        background: $otp-input-filled-bg-color;
      }
    }
    &.e-underlined {
      .e-otp-input-field {
        background: $otp-input-underlined-bg-color;
      }
    }
    &.e-error {
      &.e-outline,
      &.e-underlined,
      &.e-filled  {
        .e-otp-input-field,
        .e-otp-input-field.e-otp-input-focus {
          border-color: $otp-input-error-color;
        }
      }
    }
    &.e-success {
      &.e-outline,
      &.e-underlined,
      &.e-filled {
        .e-otp-input-field,
        .e-otp-input-field.e-otp-input-focus {
          border-color: $otp-input-success-color;
        }
      }
    }
    &.e-warning {
      &.e-outline,
      &.e-underlined,
      &.e-filled {
        .e-otp-input-field,
        .e-otp-input-field.e-otp-input-focus {
          border-color: $otp-input-warning-color;
        }
      }
    }
  }
}

@include export-module('otp-input-bigger') {
  .e-bigger.e-otpinput,
  .e-bigger .e-otpinput {
    gap: $otp-bigger-input-gap;
    &:has(.e-otp-separator):not(:empty) {
      gap: $otp-bigger-separator-input-gap;
    }
    .e-otp-input-field {
      min-width: $otp-bigger-input-width;
      min-height: $otp-bigger-input-height;
      font-size: $otp-bigger-input-font-size;
      line-height: $otp-bigger-input-line-height;
      padding: $otp-input-padding;
      &input[type = 'password'],
      &[type = 'password'] {
        font-size: $otp-bigger-input-password-font-size;
      }
      &.e-input.e-otp-input-focus:focus {
        padding-bottom: $otp-input-zero-padding-margin;
      }
    }
    .e-otp-separator {
      font-size: $otp-bigger-separator-font-size;
      line-height: $otp-bigger-separator-line-height;
    }
    &.e-filled {
      .e-otp-input-field {
        padding: $otp-input-zero-padding-margin;
      }
    }
  }

  .e-bigger.e-small.e-otpinput,
  .e-bigger.e-small .e-otpinput,
  .e-bigger .e-small.e-otpinput,
  .e-small .e-bigger.e-otpinput {
    gap: $otp-bigger-small-input-gap;
    &:has(.e-otp-separator):not(:empty) {
      gap: $otp-bigger-small-separator-input-gap;
    }
    .e-otp-input-field {
      min-width: $otp-bigger-small-input-width;
      min-height: $otp-bigger-small-input-height;
      font-size: $otp-bigger-small-input-font-size;
      line-height: $otp-bigger-small-input-line-height;
      padding: $otp-input-padding;
      &input[type = 'password'],
      &[type = 'password'] {
        font-size: $otp-bigger-small-input-password-font-size;
      }
      &.e-input.e-otp-input-focus:focus {
        padding-bottom: $otp-input-zero-padding-margin;
      }
    }
    .e-otp-separator {
      font-size: $otp-bigger-small-separator-font-size;
      line-height: $otp-bigger-small-separator-line-height;
    }
    &.e-filled {
      .e-otp-input-field {
        padding: $otp-input-zero-padding-margin;
      }
    }
  }
}

$sta-background-color: $gray-base !default;
$sta-color: $grey-dark-font !default;
$sta-box-shadow: rgba(0, 0, 0, .5) !default;

@include export-module('smart-textarea-layout') {
  .smart-textarea-suggestion-overlay {
    display: none;
    position: absolute;
    padding: .25rem .75rem;
    border-radius: .3rem;
    cursor: pointer;
    user-select: none;
    margin-right: .5rem;
  }

  .smart-textarea-suggestion-overlay.smart-textarea-suggestion-overlay-visible {
    display: block;
  }

  .smart-textarea-caret {
    position: absolute;
    width: .8px;
    display: none;
    animation: caret-blink 1.025s step-end infinite;
  }

  @keyframes caret-blink {

    from,
    to {
      opacity: 1;
    }

    50% {
      opacity: 0;
    }
  }
}

@include export-module('smart-textarea-theme') {
  .smart-textarea-suggestion-overlay {
    background-color: $sta-background-color;
    color: $sta-color;
    box-shadow: 0 1.25px 4px 0 $sta-box-shadow;
  }

  [data-suggestion-visible]::selection {
    color: #{#999} !important; /* stylelint-disable-line declaration-no-important */
    background: none !important; /* stylelint-disable-line declaration-no-important */
  }

  .smart-textarea-caret {
    background: #{#ff0000};
  }
}

$ribbon-border: none !default;
$ribbon-border-radius: unset !default;
$ribbon-disabled-opacity: .35 !default;
$ribbon-file-menu-border: none !default;
$ribbon-file-menu-border-width: unset !default;
$ribbon-file-menu-weight: 400 !default;
$ribbon-file-menu-size: 14px !default;
$ribbon-file-menu-padding: 12px 15px 14px !default;
$ribbon-file-menu-height: 22px !default;
$ribbon-file-menu-border-radius: unset !default;
$ribbon-file-menu-min-width-height: 14px !default;
$ribbon-help-template-padding: 16px !default;
$ribbon-help-template-height: 48px !default;
$ribbon-help-template-border: none !default;
$ribbon-toolbar-items-height: 48px !default;
$ribbon-horizontal-nav-height: 48px !default;
$ribbon-group-header-padding: 8px 11px 3px 11px !default;
$ribbon-group-header-height: 15px !default;
$ribbon-group-header-font-size: 10px !default;
$ribbon-group-overflow-padding: 2px 8px !default;
$ribbon-group-content-padding: 0 8px !default;
$ribbon-group-content-height: 108px !default;
$ribbon-group-overflow-height: 108px !default;
$ribbon-group-header-margin: 16px !default;
$ribbon-group-padding: 6px !default;
$ribbon-group-height: 140px !default;
$ribbon-simplified-group-padding: 2px !default;
$ribbon-simplified-group-content-padding: 0 4px !default;
$ribbon-simplified-group-content-height: 40px !default;
$ribbon-collapse-btn-padding: 2px !default;
$ribbon-collapse-btn-height: 12px !default;
$ribbon-collapse-btn-font-weight: 400 !default;
$ribbon-collapsible-content-width: 20px !default;
$ribbon-overflow-btn-content-width: 40px !default;
$ribbon-overflow-btn-icon-padding: 8px !default;
$ribbon-overflow-btn-padding: 0 !default;
$ribbon-overflow-btn-margin: 0 !default;
$ribbon-overflow-collapse-btn-right: 25px !default;
$ribbon-overflow-item-padding: 0 !default;
$ribbon-overflow-wrapper-item-margin: 2px 8px !default;
$ribbon-overflow-item-btn-height: 16px !default;
$ribbon-overflow-btn-height: 32px !default;
$ribbon-overflow-btn-border-radius: 2px !default;
$ribbon-overflow-header-height: 24px !default;
$ribbon-overflow-header-line-height: 18px !default;
$ribbon-overflow-header-font-size: 14px !default;
$ribbon-overflow-header-padding: 5px 0 5px 12px !default;
$ribbon-rtl-overflow-header-padding: 5px 12px 5px 0 !default;
$ribbon-overflow-header-weight: 400 !default;
$ribbon-overflow-dropdown-btn-padding: 0 13px !default;
$ribbon-overall-overflow-btn-position: 4px !default;
$ribbon-dropdown-btn-padding: 0 13px !default;
$ribbon-dropdown-caret-btn-size: 16px !default;
$ribbon-dropdown-caret-btn-height: 16px !default;
$ribbon-dropdown-caret-btn-padding: 2px 4px !default;
$ribbon-colorpicker-caret-btn-padding: $ribbon-dropdown-caret-btn-padding !default;
$ribbon-items-padding: 2px !default;
$ribbon-large-items-btn-padding: 0 3px !default;
$ribbon-large-items-btn-height: 18px !default;
$ribbon-large-items-icon-size: 32px !default;
$ribbon-large-items-max-width: 10ch !default;
$ribbon-large-items-icon-padding: 8px 6px 6px !default;
$ribbon-large-items-btn-gap: 5px !default;
$ribbon-large-items-min-width-height: 32px !default;
$ribbon-items-border: none !default;
$ribbon-items-border-radius: 2px !default;
$ribbon-items-font-weight: 400 !default;
$ribbon-items-btn-size: 12px !default;
$ribbon-items-label-size: 12px !default;
$ribbon-items-btn-icon-size: 16px !default;
$ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
$ribbon-items-caret-icon-size: 12px !default;
$ribbon-items-margin: 8px !default;
$ribbon-checkbox-margin: 7px 0 7px 12px !default;
$ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
$ribbon-items-height: 18px !default;
$ribbon-items-btn-padding: 0 4px 0 0 !default;
$ribbon-items-btn-rtl-padding: 0 0 0 4px !default;
$ribbon-items-min-width-height: 16px !default;
$ribbon-items-checkbox-size: 12px !default;
$ribbon-items-checkbox-padding: 0 8px !default;
$ribbon-input-group-height: 32px !default;
$ribbon-input-padding: 5px 0 5px 8px !default;
$ribbon-input-size: 14px !default;
$ribbon-input-height: 22px !default;
$ribbon-input-weight: 400 !default;
$ribbon-input-icon-size: 16px !default;
$ribbon-input-icon-height: 16px !default;
$ribbon-input-icon-padding: 8px 4px 8px 2px !default;
$ribbon-input-icon-weight: 400 !default;
$ribbon-input-group-border-radius: 2px !default;
$ribbon-input-group-margin: 0 0 4px !default;
$ribbon-tab-border: none !default;
$ribbon-tab-border-radius: unset !default;
$ribbon-tab-text-size: 14px !default;
$ribbon-tab-text-padding: 12px 15px 14px !default;
$ribbon-tab-text-height: 22px !default;
$ribbon-tab-text-weight: 400 !default;
$ribbon-active-tab-text-weight: $ribbon-tab-text-weight !default;
$ribbon-nav-arrow-size: 16px !default;
$ribbon-nav-arrow-height: 16px !default;
$ribbon-hscroll-padding: 0 !default;
$ribbon-hscroll-nav-arrow-padding: 0 4px !default;
$ribbon-hscroll-nav-arrow-weight: 400 !default;
$ribbon-hscroll-nav-border-width: 1px !default;
$ribbon-hscroll-nav-border-radius: 2px !default;
$ribbon-menu-border: 1px solid !default;
$ribbon-menu-border-radius: 4px !default;
$ribbon-menu-blank-icon-padding: 37px !default;
$ribbon-launcher-icon-margin: 0 8px 3px 0 !default;
$ribbon-rtl-launcher-icon-margin: 0 0 3px 8px !default;
$ribbon-ddb-popup-font-size: 14px;
$ribbon-ddb-popup-height: 26px;
$ribbon-backstage-menu-hover-border: 2px !default;
$ribbon-backstage-menu-active-border: 0 !default;
$ribbon-backstage-menu-item-height: 48px !default;
$ribbon-backstage-menu-icon-font-size: 16px !default;
$ribbon-backstage-menu-icon-line-height: 16px !default;
$ribbon-backstage-menu-icon-padding: 16px 16px 20px !default;
$ribbon-backstage-menu-blank-icon-padding: 48px !default;
$ribbon-backstage-btn-focus-border: 2px !default;
$ribbon-backstage-btn-height: 48px !default;
$ribbon-backstage-btn-line-height: 48px !default;
$ribbon-backstage-btn-icon-font-size: 16px !default;
$ribbon-backstage-btn-icon-line-height: 16px !default;
$ribbon-backstage-btn-icon-padding: 16px !default;
$ribbon-backstage-btn-hover-border: 0 !default;
$ribbon-group-button-icon-margin: $ribbon-items-margin !default;
$ribbon-group-button-ddb-padding: 4px 8px !default;
$ribbon-group-button-icon-padding: 0 2px 0 0 !default;
$ribbon-group-button-ddb-border-radius: 2px !default;
$ribbon-group-button-padding: 0 8px 0 0 !default;
$ribbon-group-button-ddb-border: 1px solid !default;
$ribbon-groupbutton-header-padding: 2px !default;
$ribbon-items-label: 36px !default;
$ribbon-combobox-height: 30px !default;
$ribbon-medium-item-height: 30px !default;
$ribbon-button-icon-padding: 7px 8px 7px 12px !default;
$ribbon-rtl-button-icon-padding: 7px 12px 7px 8px !default;
$ribbon-caret-icon-padding: 0 12px !default;
$ribbon-rtl-caret-icon-padding: 0 12px !default;
$ribbon-gallery-popup-items-padding: 0 !default;
$ribbon-gallery-header-padding: 8px 0 4px !default;
$ribbon-gallery-header-font-weight: 500 !default;
$ribbon-gallery-header-line-height: 22px !default;
$ribbon-gallery-header-fontsize: 14px !default;
$ribbon-gallery-text-size: 14px !default;
$ribbon-gallery-text-weight: 400 !default;
$ribbon-gallery-text-line-height: 22px !default;
$ribbon-gallery-simplified-items-padding: 5px 0 !default;
$ribbon-gallery-popup-padding: 8px 12px 12px !default;
$ribbon-gallery-icons-size: 20px !default;
$ribbon-gallery-icons-weight: $ribbon-gallery-text-weight !default;
$ribbon-gallery-icons-height: 20px !default;
$ribbon-gallery-items-width: 95px !default;
$ribbon-gallery-simplified-items-width: 78px !default;
$ribbon-gallery-popup-items-width: 73px !default;
$ribbon-keytip-border-radius: unset !default;
$ribbon-keytip-font-size: 14px !default;
$ribbon-keytip-line-height: 18px !default;
$ribbon-keytip-height: 20px !default;
$ribbon-keytip-min-width: 20px !default;
$ribbon-gallery-wrapper-height: 108px !default;
$ribbon-gallery-simplified-wrapper-height: 36px !default;
$ribbon-gallery-simplified-items-wrapper-height: 28px !default;
$ribbon-gallery-button-icon-padding: 0 4px !default;
$ribbon-gallery-button-icon-font-weight: 400 !default;
$ribbon-gallery-button-icon-line-height: 8px !default;
$ribbon-gallery-button-icon-font-size: 8px !default;
$ribbon-wrapper-margin: 9px 6px !default;
$ribbon-wrapper-item-margin: 0 2px !default;
$ribbon-wrapper-border-radius: 2px !default;
$ribbon-wrapper-item-border-radius: 8px !default;
$ribbon-simplified-wrapper-margin: 4px 6px !default;
$ribbon-simplified-wrapper-item-margin: 0 2px !default;
$ribbon-simplified-wrapper-item-border-radius: 4px !default;
$ribbon-gallery-items-wrapper-height: 90px !default;

$ribbon-bigger-content-height: 132px !default;
$ribbon-bigger-large-items-max-width: $ribbon-large-items-max-width !default;
$ribbon-bigger-group-overflow-content-height: 132px !default;
$ribbon-bigger-group-height: 164px !default;
$ribbon-bigger-file-menu-height: 24px !default;
$ribbon-bigger-file-menu-padding: 13px 20px !default;
$ribbon-bigger-file-menu-size: 16px !default;
$ribbon-bigger-file-menu-min-width-height: 16px !default;
$ribbon-bigger-help-template-padding: 16px !default;
$ribbon-bigger-help-template-height: 50px !default;
$ribbon-bigger-toolbar-items-height: 50px !default;
$ribbon-bigger-horizontal-nav-height: 50px !default;
$ribbon-bigger-collapse-btn-padding: 4px !default;
$ribbon-bigger-collapse-btn-height: 16px !default;
$ribbon-bigger-collapse-btn-font-size: 16px !default;
$ribbon-bigger-collapsible-content-width: 24px !default;
$ribbon-bigger-overflow-btn-content-width: 40px !default;
$ribbon-bigger-overflow-btn-font-size: 20px !default;
$ribbon-bigger-overflow-btn-height: 20px !default;
$ribbon-bigger-overflow-btn-icon-padding: 10px !default;
$ribbon-bigger-overflow-collapse-btn-right: 28px !default;
$ribbon-bigger-overall-overflow-btn-height: 40px !default;
$ribbon-bigger-overall-overflow-btn-position: 6px !default;
$ribbon-bigger-overflow-wrapper-item-margin: 2px 10px !default;
$ribbon-bigger-group-header-padding: 0 11px 8px !default;
$ribbon-bigger-group-header-height: 18px !default;
$ribbon-bigger-group-header-font-size: 12px !default;
$ribbon-bigger-simplified-group-content-height: 52px !default;
$ribbon-bigger-tab-text-size: 16px !default;
$ribbon-bigger-tab-text-padding: 13px 20px !default;
$ribbon-bigger-tab-text-height: 24px !default;
$ribbon-bigger-large-items-icon-padding: 12px 9px 4px !default;
$ribbon-bigger-large-items-icon-size: 40px !default;
$ribbon-bigger-large-items-btn-padding: 0 6px !default;
$ribbon-bigger-large-items-btn-size: 14px !default;
$ribbon-bigger-large-items-btn-height: 22px !default;
$ribbon-bigger-large-items-min-width-height: 40px !default;
$ribbon-bigger-items-min-width-height: 20px;
$ribbon-bigger-large-items-btn-gap: 8px !default;
$ribbon-bigger-items-padding: 2px !default;
$ribbon-bigger-items-btn-size: 14px !default;
$ribbon-bigger-items-label-size: 14px !default;
$ribbon-bigger-items-height: 22px !default;
$ribbon-bigger-items-icon-height: 20px !default;
$ribbon-bigger-items-icon-size: 20px !default;
$ribbon-bigger-items-btn-icon-size: 18px !default;
$ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
$ribbon-bigger-items-margin: 10px !default;
$ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
$ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
$ribbon-bigger-items-checkbox-size: 14px !default;
$ribbon-bigger-items-checkbox-padding: 0 10px !default;
$ribbon-bigger-input-group-height: 40px !default;
$ribbon-bigger-input-items-size: 14px !default;
$ribbon-bigger-input-items-height: 22px !default;
$ribbon-bigger-input-items-btn-size: 16px !default;
$ribbon-bigger-input-items-btn-height: 16px !default;
$ribbon-bigger-input-padding: 9px 0 9px 8px !default;
$ribbon-bigger-input-icon-padding: 12px 4px 12px 2px !default;
$ribbon-bigger-input-group-margin: 0 0 4px !default;
$ribbon-bigger-dropdown-btn-padding: 0 17px !default;
$ribbon-bigger-menu-blank-icon-padding: 41px !default;
$ribbon-bigger-dropdown-btn-size: 16px !default;
$ribbon-bigger-dropdown-btn-line-height: 16px !default;
$ribbon-bigger-dropdown-caret-btn-padding: 3px 5px !default;
$ribbon-bigger-colorpicker-caret-btn-padding: $ribbon-bigger-dropdown-caret-btn-padding !default;
$ribbon-bigger-dropdown-caret-btn-size: 16px !default;
$ribbon-bigger-dropdown-caret-icon-size: 14px !default;
$ribbon-bigger-dropdown-caret-btn-height: 16px !default;
$ribbon-bigger-caret-dropdown-btn-padding: 0 17px !default;
$ribbon-bigger-color-picker-height: 20px !default;
$ribbon-bigger-color-picker-width: 20px !default;
$ribbon-bigger-launcher-icon-margin: 0 8px 12px 0 !default;
$ribbon-bigger-rtl-launcher-icon-margin: 0 0 12px 8px !default;
$ribbon-bigger-ddb-popup-font-size: 14px;
$ribbon-bigger-ddb-popup-height: 32px;
$ribbon-bigger-backstage-menu-item-height: 52px !default;
$ribbon-bigger-backstage-menu-icon-font-size: 20px !default;
$ribbon-bigger-backstage-menu-icon-line-height: 20px !default;
$ribbon-bigger-backstage-menu-icon-padding: 18px 16px 22px !default;
$ribbon-bigger-backstage-menu-blank-icon-padding: 52px !default;
$ribbon-bigger-backstage-btn-height: 52px !default;
$ribbon-bigger-backstage-btn-line-height: 52px !default;
$ribbon-bigger-backstage-btn-icon-font-size: 20px !default;
$ribbon-bigger-backstage-btn-icon-line-height: 20px !default;
$ribbon-bigger-backstage-btn-icon-padding: 18px 16px !default;
$ribbon-bigger-group-button-icon-padding: 0 !default;
$ribbon-bigger-group-button-icon-margin: $ribbon-bigger-items-margin !default;
$ribbon-bigger-group-button-padding: 0 10px 0 0 !default;
$ribbon-bigger-items-label: 44px !default;
$ribbon-bigger-gallery-popup-padding: 12px 16px 16px !default;
$ribbon-bigger-gallery-header-fontsize: 16px !default;
$ribbon-bigger-gallery-header-line-height: 24px !default;
$ribbon-bigger-gallery-header-padding: 12px 0 8px !default;
$ribbon-bigger-overflow-header-line-height: 22px !default;
$ribbon-bigger-overflow-header-height: 28px !default;
$ribbon-bigger-combobox-height: 38px !default;
$ribbon-bigger-medium-item-height: 40px !default;
$ribbon-bigger-overflow-header-font-size: 16px !default;
$ribbon-bigger-overflow-header-padding: 5px 0 5px 16px !default;
$ribbon-bigger-rtl-overflow-header-padding: 5px 16px 5px 0 !default;
$ribbon-bigger-button-icon-padding: 11px 10px 11px 16px !default;
$ribbon-bigger-rtl-button-icon-padding: 11px 16px 11px 10px !default;
$ribbon-bigger-caret-icon-padding: 0 12px !default;
$ribbon-bigger-rtl-caret-icon-padding: 0 12px !default;
$ribbon-bigger-gallery-wrapper-height: 132px !default;
$ribbon-bigger-gallery-simplified-wrapper-height: 44px !default;
$ribbon-bigger-gallery-items-wrapper-height: 114px !default;
$ribbon-bigger-gallery-simplified-items-wrapper-height: 36px !default;
$ribbon-bigger-gallery-items-wrapper-width: 114px !default;
$ribbon-bigger-keytip-font-size: 14px !default;
$ribbon-bigger-keytip-line-height: 18px !default;
$ribbon-bigger-keytip-height: 20px !default;
$ribbon-bigger-keytip-min-width: 20px !default;
$ribbon-text-font-weight: 400 !default;
$filemenu-popup-padding: 0 !default;
$filemenu-popup-bigger-padding: 0 !default;

$ribbon-grp-overflow-border-color: $grey-44 !default;
$ribbon-grp-overflow-popup-box-shadow: unset !default;
$ribbon-header-bg-color: $gray-darker !default;
$ribbon-tab-background-color: $ribbon-header-bg-color !default;
$ribbon-border-color: unset !default;
$ribbon-group-border-color: $grey-99 !default;
$ribbon-input-group-border-color: $grey-99 !default;
$ribbon-input-group-background-color: $gray-base !default;
$ribbon-items-icon-color: $grey-dark-font !default;
$ribbon-items-background-color: $gray-darker !default;
$ribbon-items-hover-background-color: $gray !default;
$ribbon-items-focus-background-color: $gray !default;
$ribbon-items-hover-color: $grey-dark-font !default;
$ribbon-items-text-hover-color: $ribbon-items-hover-color !default;
$ribbon-items-active-color: $grey-dark-font !default;
$ribbon-items-text-active-color: $ribbon-items-active-color !default;
$ribbon-items-focus-color: $grey-dark-font !default;
$ribbon-items-icon-focus-color: $ribbon-items-focus-color !default;
$ribbon-items-text-focus-color: $ribbon-items-focus-color !default;
$ribbon-items-active-background-color: $gray !default;
$ribbon-items-pressed-background-color: $ribbon-items-active-background-color !default;
$ribbon-items-hover-border-color: unset !default;
$ribbon-items-focus-border-color: unset !default;
$ribbon-items-disabled-color: rgba($grey-dark-font, .3) !default;
$ribbon-collapse-btn-background: $gray-darker !default;
$ribbon-text-color: $grey-dark-font !default;
$ribbon-tab-text-color: $ribbon-text-color !default;
$ribbon-tab-text-focus-color: $grey-dark-font !default;
$ribbon-tab-text-hover-color: color.adjust($brand-primary, $lightness: 10%) !default;
$ribbon-active-tab-color: $brand-primary-lighten-10 !default;
$ribbon-active-tab-indicator-color: $brand-primary-lighten-10 !default;
$ribbon-active-file-menu-color: $brand-primary-font !default;
$ribbon-active-file-menu-background: $brand-primary-lighten-10 !default;
$ribbon-menu-border-color: $grey-44 !default;
$ribbon-menu-hover-background-color: $grey-f5 !default;
$ribbon-menu-items-color: $grey-light-font !default;
$ribbon-menu-items-icon-color: $grey-dark-font !default;
$ribbon-menu-background-color: $gray-dark !default;
$ribbon-menu-items-background-color: $gray-dark !default;
$ribbon-hscroll-border-color: $grey-99 !default;
$ribbon-hscroll-color: $grey-dark-font !default;
$ribbon-hscroll-background-color: $gray-darker !default;
$ribbon-hscroll-hover-border-color: $grey-99 !default;
$ribbon-hscroll-hover-background-color: $gray !default;
$ribbon-hscroll-hover-color: $grey-dark-font !default;
$ribbon-hscroll-active-border-color: $grey-99 !default;
$ribbon-hscroll-active-background-color: $gray !default;
$ribbon-hscroll-active-color: $grey-dark-font !default;
$ribbon-hscroll-focus-border-color: $grey-99 !default;
$ribbon-hscroll-focus-background-color: $gray !default;
$ribbon-hscroll-focus-color: $grey-dark-font !default;
$ribbon-tooltip-background-color: $grey-dark-font !default;
$ribbon-tooltip-text-color: $gray-base !default;
$ribbon-overflow-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
$ribbon-backstage-menu-bg-color: $brand-primary-lighten-10 !default;
$ribbon-backstage-menu-items-bg-color: $brand-primary-lighten-10 !default;
$ribbon-backstage-items-color: $grey-dark-font !default;
$ribbon-backstage-menu-icon-color: $grey-dark-font !default;
$ribbon-backstage-menu-hover-bg-color: $brand-primary-lighten-10 !default;
$ribbon-backstage-menu-hover-border-color: $brand-primary-darken-35 !default;
$ribbon-backstage-menu-items-hover-color: $grey-dark-font !default;
$ribbon-backstage-menu-icon-hover-color: $grey-dark-font !default;
$ribbon-backstage-menu-active-bg-color: $brand-primary-darken-15 !default;
$ribbon-backstage-menu-active-border-color: unset !default;
$ribbon-backstage-menu-items-active-color: $grey-dark-font !default;
$ribbon-backstage-menu-icon-active-color: $grey-dark-font !default;
$ribbon-backstage-separator-color: $grey-dark-font !default;
$ribbon-backstage-btn-bg-color: $brand-primary-lighten-10 !default;
$ribbon-backstage-btn-color: $grey-dark-font !default;
$ribbon-backstage-btn-focus-bg-color: $brand-primary-lighten-10 !default;
$ribbon-backstage-btn-focus-color: $grey-dark-font !default;
$ribbon-backstage-btn-focus-border-color: $brand-primary-darken-35 !default;
$ribbon-backstage-btn-hover-bg-color: $brand-primary-darken-15 !default;
$ribbon-backstage-btn-hover-color: $grey-dark-font !default;
$ribbon-backstage-btn-hover-border-color: unset !default;
$ribbon-backstage-close-btn-font-weight: 400 !default;
$ribbon-group-button-dropdown-popup-background: $gray-dark !default;
$ribbon-group-button-icon-hover-color: $grey-dark-font !default;
$ribbon-group-button-icon-active-color: $ribbon-items-active-color !default;
$ribbon-group-button-hover-background: $grey-44 !default;
$ribbon-group-button-text-hover-color: $grey-dark-font !default;
$ribbon-group-button-active-background: $grey-44 !default;
$ribbon-group-button-text-active-color: $grey-dark-font !default;
$ribbon-group-button-selected-background: $grey-44 !default;
$ribbon-group-button-pressed-background: $ribbon-group-button-selected-background !default;
$ribbon-group-button-border-color: $grey-dark-font !default;
$ribbon-popup-common-bg-color: $grey-dark !default;
$ribbon-popup-common-border-radius: unset !default;
$ribbon-popup-common-border-color: $grey-cc !default;
$ribbon-popup-common-box-shadow: unset !default;
$ribbon-filemenu-popup-border-radius: 4px !default;
$ribbon-contextual-tab-color: $ribbon-active-tab-indicator-color !default;
$ribbon-contextual-tab-background: $ribbon-header-bg-color !default;
$ribbon-keytip-background-color: $grey-light-font !default;
$ribbon-keytip-color: $base-font !default;
$ribbon-gallery-popup-background-color: $gray !default;
$ribbon-gallery-popup-item-background-color: transparent !default;
$ribbon-gallery-wrapper-background-color: $gray-base !default;
$ribbon-gallery-wrapper-item-background-color: transparent !default;
$ribbon-gallery-hover-background-color: $grey-88 !default;
$ribbon-gallery-item-selected-color: $brand-primary !default;
$ribbon-gallery-button-icon-color: $grey-light-font !default;
$ribbon-gallery-button-selected-icon-color: $grey-light-font !default;
$ribbon-gallery-button-selected-color: $gray !default;
$ribbon-gallery-item-disabled-color: transparent !default;
$ribbon-gallery-item-focus-border-color: $grey-88 !default;
$ribbon-gallery-item-border-color: $grey-44 !default;
$ribbon-gallery-header-color: $ribbon-text-color !default;
$ribbon-gallery-item-text-color: $ribbon-text-color !default;
$ribbon-gallery-item-disabled-text-color: $grey-lighter !default;
$ribbon-gallery-icons-color: $ribbon-items-icon-color !default;
$ribbon-gallery-item-disabled-icons-color: $grey-lighter !default;
$ribbon-gallery-item-selected-text-color: $brand-primary-font !default;
$ribbon-gallery-item-selected-icons-color: $brand-primary-font !default;
$ribbon-gallery-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
$ribbon-group-button-item-border: 1px solid $ribbon-group-button-border-color !default;
$ribbon-items-focus-box-shadow: none !default;
$ribbon-skeleton-wave-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $grey-88 50%, rgba(255, 255, 255, 0) 70%) !default;
$ribbon-skeleton-bg-color: $gray-dark !default;

$ribbon-skeleton-border-radius: 4px !default;
$ribbon-overlay-gap: 30px !default;
$ribbon-overlay-padding: 10px !default;
$ribbon-tbar-child-margin: 0 !default;
$ribbon-tbar-item-margin: 0 !default;
$ribbon-tbar-item-border: none !default;
$ribbon-tbar-active-border: none !default;
$ribbon-tab-wrap-padding: 0 !default;
$ribbon-tab-wrap-border: none !default;
$ribbon-tab-text-margin: 0 !default;
$ribbon-nav-arrow-letter-spacing: unset !default;
$ribbon-overflow-items-margin: auto !default;
$ribbon-overflow-btn-icon-size: 16px !default;
$ribbon-overflow-btn-icon-line-height: 16px !default;
$ribbon-gallery-text-font-size: 12px !default;
$input-group-margin-bottom: 0 !default;
$ribbon-group-container-padding: 0 !default;
$ribbon-simplified-mode-group-content-padding: 0 !default;
$ribbon-simplified-overlay-gap: 16px !default;
$ribbon-group-border-right: 1px !default;
$ribbon-scroll-device-padding-right: 30px !default;
$ribbon-rtl-scroll-device-padding-left: 30px !default;
$ribbon-backstage-btn-border: none !default;
$ribbon-backstage-btn-border-radius: unset !default;
$ribbon-backstage-btn-padding: unset !default;
$ribbon-backstage-btn-icon-margin: 0 !default;
$ribbon-backstage-menu-border: unset !default;
$ribbon-backstage-menu-border-radius: unset !default;
$ribbon-backstage-menu-item-margin: 4px 20px !default;
$ribbon-backstage-menu-item-padding: 0 !default;
$ribbon-backstage-menu-icon-margin-right: unset !default;
$ribbon-backstage-menu-blank-icon-padding-left: 0 !default;
$ribbon-input-icon-margin: 0 !default;
$ribbon-input-icon-border: none !default;
$ribbon-input-icon-border-radius: unset !default;
$ribbon-clear-icon-border-radius: unset !default;
$ribbon-item-padding: 1px !default;
$ribbon-gallery-btn-icon-border-width: 0 0 0 1px !default;
$ribbon-gallery-btn-icon-border-radius: 0 4px 4px 0 !default;
$ribbon-gallery-container-padding: 0 !default;
$ribbon-gallery-container-border-width: 1px !default;
$ribbon-items-checkbox-margin: auto 0 !default;
$ribbon-items-colorpicker-border: 1px !default;
$ribbon-split-btn-padding: 0 !default;
$ribbon-split-btn-wrapper-border: 1px !default;
$ribbon-split-btn-border-radius: 0 !default;
$ribbon-dropdown-btn-margin: auto !default;
$ribbon-small-medium-item-padding: 0 !default;
$ribbon-colorpicker-split-btn-wrapper-border: none !default;
$ribbon-split-preview-border-radius: unset !default;
$ribbon-dropdown-caret-btn-margin: 0 !default;
$ribbon-split-btn-wrapper-margin: 0 !default;
$ribbon-items-dropdown-btn-padding: 0 !default;
$ribbon-items-icons-padding: 0 2px 0 0 !default;
$ribbon-rtl-items-icons-padding: 0 0 0 2px !default;
$ribbon-gallery-button-border-width: 0 1px 0 0 !default;
$ribbon-gallery-button-border-radius: 4px 0 0 4px !default;
$ribbon-overflow-target-border: 0 !default;
$ribbon-item-input-group-margin: 5px 0 !default;
$ribbon-gallery-dropdown-btn-padding: 0 !default;
$ribbon-gallery-dropdown-btn-margin: 0 !default;
$ribbon-checkbox-wrapper-padding: 0 !default;
$ribbon-checkbox-wrapper-frame-margin: unset !default;
$ribbon-btn-icon-left-margin: 0 !default;
$ribbon-caret-icon-margin: 0 0 0 auto !default;
$ribbon-rtl-caret-icon-margin: 0 auto 0 0 !default;
$ribbon-group-btn-first-border-top-right-radius: 4px !default;
$ribbon-group-btn-first-border-top-left-radius: 4px !default;
$ribbon-group-btn-first-border-bottom-right-radius: 0 !default;
$ribbon-group-btn-first-border-bottom-left-radius: 0 !default;
$ribbon-group-btn-last-border-top-right-radius: 0 !default;
$ribbon-group-btn-last-border-top-left-radius: 0 !default;
$ribbon-group-btn-last-border-bottom-right-radius: 4px !default;
$ribbon-group-btn-last-border-bottom-left-radius: 4px !default;
$ribbon-group-button-item-padding: 0 !default;
$ribbon-gallery-header-padding-top: 0 !default;
$ribbon-gallery-popup-border-radius: 4px !default;
$ribbon-group-button-icon-font-size: 16px !default;
$ribbon-group-button-icon-line-height: 16px !default;
$ribbon-gallery-item-margin: 2px !default;
$ribbon-overflow-gallery-container-padding: 0 !default;
$ribbon-overflow-gallery-container-margin: 0 !default;
$ribbon-gallery-popup-items-border-width: 2px !default;
$ribbon-gallery-popup-items-border-radius: 4px !default;
$ribbon-gallery-icons-padding: 3px !default;
$ribbon-gallery-selected-border-radius: 4px !default;
$ribbon-menu-item-border-radius: unset !default;
$ribbon-menu-icon-font-size: 16px !default;
$ribbon-menu-icon-line-height: 16px !default;
$ribbon-tooltip-padding: 4px !default;
$ribbon-tooltip-title-font-size: 12px !default;
$ribbon-tooltip-title-line-height: 18px !default;
$ribbon-tooltip-title-padding: 4px 4px 0 !default;
$ribbon-text-container-padding: 4px !default;
$ribbon-tooltip-content-font-size: 10px !default;
$ribbon-tooltip-content-line-height: 15px !default;
$ribbon-tooltip-icon-font-size: 32px !default;
$ribbon-tooltip-icon-line-height: 32px !default;
$ribbon-tooltip-icon-padding-right: 8px !default;
$ribbon-tab-header-border-width: 0 !default;
$ribbon-medium-item-font-size: 16px !default;
$ribbon-medium-item-line-height: 16px !default;

$ribbon-bigger-tab-header-tbar-margin-right: 0 !default;
$ribbon-bigger-gallery-container-padding: 0 !default;
$ribbon-bigger-simplified-group-margin-bottom: 0 !default;
$ribbon-bigger-colorpicker-split-btn-padding: 0 !default;
$ribbon-bigger-colorpicker-split-btn-border: none !default;
$ribbon-bigger-dropdown-caret-btn-margin: 0 !default;
$ribbon-bigger-overflow-items-icon-left-margin: 0 !default;
$ribbon-bigger-checkbox-padding: 0 !default;
$ribbon-bigger-menu-icon-font-size: 20px !default;
$ribbon-bigger-menu-icon-line-height: 20px !default;
$dropdown-popup-border: 1px !default;

$ribbon-skeleton-height: 20px !default;
$ribbon-overlay-height: 100% !default;
$ribbon-tab-wrap-height: auto !default;
$ribbon-text-wrap-height: auto !default;
$ribbon-hscroll-nav-arrow-height: auto !default;
$ribbon-simplified-group-height: auto !default;
$ribbon-backstage-items-wrapper-height: 100% !default;
$icon-top-height: 50% !default;
$split-btn-wrapper-height: 50% !default;
$split-btn-wrapper-icon-top-height: unset !default;
$ribbon-items-checkbox-height: fit-content !default;
$split-btn-wrapper-vertical-height: 100% !default;
$ribbon-split-btn-icon-height: 16px !default;
$ribbon-gallery-popup-items-height: 54px !default;
$ribbon-group-after-height: calc(100% - 16px) !default;

$ribbon-text-wrap-bigger-height: auto !default;
$ribbon-simplified-group-bigger-height: auto !default;
$ribbon-input-bigger-height: auto !default;
$ribbon-separator-height: auto !default;
$ribbon-split-btn-icon-width: 16px !default;
$ribbon-tab-header-left: var(--fileMenuWidth) !default;

@mixin ribbon-backstage-border($width) {
  border-style: solid;
  border-width: $width;
}

@mixin ribbon-tab-text-height($height) {
  .e-toolbar-item .e-tab-wrap:focus .e-text-wrap {
    height: $height;
  }
}

@mixin ribbon-item-padding($btn-padding, $icon-padding) {
  &.e-ribbon-small-item,
  &.e-ribbon-medium-item {
    .e-btn {
      &:not(.e-icon-btn, .e-dropdown-btn) {
        padding: $btn-padding;
      }
    }
    @if ($skin-name == 'fluent2') {
      .e-dropdown-btn.e-btn {
        padding: $dropdown-btn-padding;
      }
      .e-split-btn-wrapper .e-dropdown-btn.e-btn {
        padding: $split-btn-wrapper-padding;
      }
    }
  }

  &.e-ribbon-medium-item {
    .e-btn .e-btn-icon.e-icon-left {
      padding: $icon-padding;
    }
  }
}

@mixin ribbon-font-styles($font-size, $font-weight, $line-height) {
  font-size: $font-size;
  font-weight: $font-weight;
  line-height: $line-height;
}

@mixin ribbon-items-icon-images($items-size) {
  min-height: $items-size;
  min-width: $items-size;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@mixin ribbon-font-props($font-size, $line-height) {
  font-size: $font-size;
  line-height: $line-height;
}

@mixin ribbon-items-height($height, $min-height) {
  height: $height;
  min-height: $min-height;
}

@mixin ribbon-display($rb-display, $rb-flex-direction) {
  display: $rb-display;
  flex-direction: $rb-flex-direction;
}

@include export-module('ribbon-layout') {
  .e-ribbon.e-rbn {
    display: block;
    border-radius: $ribbon-border-radius;

    &.e-ribbon-container {

      .e-ribbon-skeleton-container {
        min-width: 52px;

        &.e-ribbon-skeleton-hidden {
          display: none;
        }

        &.e-simplified {
          min-width: 120px;

          .e-ribbon-skeleton {
            height: $ribbon-skeleton-height;
          }
        }
      }

      .e-ribbon-skeleton {
        border-radius: $ribbon-skeleton-border-radius;

        @if ($skin-name == 'highcontrast-light' or $skin-name == 'highcontrast') {
          border-radius: $ribbon-skeleton-border-radius;
          border: $ribbon-skeleton-border solid;
        }
      }

      .e-ribbon-overlay {
        display: flex;
        align-items: center;
        position: absolute;
        gap: $ribbon-overlay-gap;
        width: 100%;
        height: $ribbon-overlay-height;
        z-index: 4;
        padding: $ribbon-overlay-padding;
        overflow: hidden;
      }
    }

    .e-ribbon-tab {
      // For blazor ribbon overflow case
      &.e-tab .e-content > .e-item.e-active {
        overflow: hidden;
      }
      .e-toolbar {
        min-height: auto;
        display: inline-block;
      }

      .e-hscroll-content > .e-item:not(.e-active) {
        display: none;
      }

      .e-ribbon-file-menu,
      .e-ribbon-backstage {
        @include ribbon-font-styles($ribbon-file-menu-size, $ribbon-file-menu-weight, $ribbon-file-menu-height);
        position: absolute;
        padding: $ribbon-file-menu-padding;
        border: $ribbon-file-menu-border;
        border-width: $ribbon-file-menu-border-width;
        box-shadow: none;
        text-transform: none;

        &.e-active {
          border-radius: $ribbon-file-menu-border-radius;
        }

        &.e-active,
        &:focus {
          box-shadow: none;
          outline: none;
        }
      }

      .e-ribbon-help-template {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        height: $ribbon-help-template-height;
        padding-right: $ribbon-help-template-padding;
        border-bottom: $ribbon-help-template-border;
        z-index: 1;
      }

      .e-tab-header {
        border-bottom: $ribbon-tab-border;

        .e-hor-nav {
          @include ribbon-items-height($ribbon-horizontal-nav-height, $ribbon-horizontal-nav-height);
        }

        &::before {
          border-width: $ribbon-tab-header-border-width;
        }

        @if ($skin-name == 'fluent2') {
          .e-indicator {
            display: none;
            z-index: 1;
          }
        }
        @else {
          .e-indicator {
            display: block;
            z-index: 1;
          }
        }
        .e-toolbar-items {
          @include ribbon-items-height($ribbon-toolbar-items-height, auto);

          &:not(.e-tbar-pos) {
            .e-toolbar-item:first-child,
            .e-toolbar-item:last-child {
              margin: $ribbon-tbar-child-margin;
            }
          }
        }

        .e-toolbar-item {
          vertical-align: unset;
          margin: $ribbon-tbar-item-margin;
          border: $ribbon-tbar-item-border;
          border-radius: $ribbon-tab-border-radius;

          &:not(.e-separator) {
            @include ribbon-items-height(auto, auto);
          }

          &.e-active {
            border: $ribbon-tbar-active-border;

            @if ($skin-name == 'fluent2') {
              &::before {
                display: block;
              }
            }
            @else {
              &::before {
                display: none;
              }
            }
          }

          .e-tab-wrap {
            padding: $ribbon-tab-wrap-padding;
            height: $ribbon-tab-wrap-height;
            border: $ribbon-tab-wrap-border;
          }

          .e-tab-text {
            @include ribbon-font-styles($ribbon-tab-text-size, $ribbon-tab-text-weight, $ribbon-tab-text-height);
            padding: $ribbon-tab-text-padding;
            text-transform: none;
            margin: $ribbon-tab-text-margin;
          }

          .e-text-wrap {
            height: $ribbon-text-wrap-height;
          }

          &.e-active .e-text-wrap {
            &::before {
              display: none;
            }
            .e-tab-text {
              font-weight: $ribbon-active-tab-text-weight;
            }
          }
        }
      }

      .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
        box-shadow: none;
      }

      .e-hscroll {
        padding: $ribbon-hscroll-padding;

        .e-scroll-nav {
          @include ribbon-items-height(auto, auto);
          min-width: auto;
          width: auto;
          border-style: solid;
          transform: none;
          border-width: $ribbon-hscroll-nav-border-width;
          border-radius: $ribbon-hscroll-nav-border-radius;
          z-index: 3;

          &.e-overlay {
            display: none;
          }

          .e-nav-arrow {
            @include ribbon-font-styles($ribbon-nav-arrow-size, $ribbon-hscroll-nav-arrow-weight, $ribbon-nav-arrow-height);
            height: $ribbon-hscroll-nav-arrow-height;
            transform: none;
            padding: $ribbon-hscroll-nav-arrow-padding;
            width: auto;
            letter-spacing: $ribbon-nav-arrow-letter-spacing;
          }

          .e-nav-arrow::before {
            @include ribbon-font-props($ribbon-nav-arrow-size, $ribbon-nav-arrow-height);
          }
        }
      }

      &.e-focused .e-tab-header {
        @include ribbon-tab-text-height($ribbon-toolbar-items-height);
      }

      .e-tab-header {
        @include ribbon-tab-text-height(auto);
      }
    }

    .e-content {
      width: 100%;
    }

    &.e-ribbon-collapsible {
      .e-content {
        width: calc(100% - $ribbon-collapsible-content-width);
      }
    }

    .e-ribbon-collapse-btn {
      bottom: 0;
      cursor: pointer;
      position: absolute;
      line-height: $ribbon-collapse-btn-height;
      padding: $ribbon-collapse-btn-padding;
      border: $ribbon-items-border;
    }

    .e-ribbon-collapse-btn:not(.e-ribbon-expand-btn) {
      transform: rotate(180deg);
    }

    &.e-ribbon-overflow {
      .e-content {
        width: calc(100% - $ribbon-collapsible-content-width - $ribbon-overflow-btn-content-width);
      }

      .e-ribbon-group-of-btn,
      .e-ribbon-overall-of-btn {
        cursor: pointer;
        border-radius: $ribbon-overflow-btn-border-radius;
        padding: $ribbon-overflow-btn-padding;
        border: $ribbon-items-border;
        height: $ribbon-overflow-btn-height;
        margin: $ribbon-overflow-items-margin;
        box-shadow: none;

        .e-btn-icon {
          font-size: $ribbon-overflow-btn-icon-size;
          line-height: $ribbon-overflow-btn-icon-line-height;
          padding: $ribbon-overflow-btn-icon-padding;
          margin: $ribbon-overflow-btn-margin;
          width: auto;
        }

        &:focus {
          outline: none;
        }

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

      .e-ribbon-overall-of-btn {
        bottom: $ribbon-overall-overflow-btn-position;
        position: absolute;

        &.e-ribbon-hide {
          display: none;
        }
      }

      .e-ribbon-group-container {
        display: inline-flex;
      }
    }

    &.e-ribbon-minimize .e-ribbon-tab .e-content,
    &.e-ribbon-minimize .e-ribbon-collapse-btn,
    &.e-ribbon-minimize .e-ribbon-overall-of-btn {
      display: none;
    }

    &.e-ribbon-simplified-mode {
      .e-ribbon-item:not(:has(.e-ribbon-template)) {
        &:has(.e-ribbon-gallery-container:not(.e-hidden)) {
          height: $ribbon-gallery-simplified-wrapper-height;
        }
      }
      .e-ribbon-item .e-ribbon-gallery-wrapper {
        margin: $ribbon-simplified-wrapper-margin;

        .e-ribbon-gallery-container {
          .e-ribbon-gallery-item {
            width: $ribbon-gallery-simplified-items-width;
            margin: $ribbon-simplified-wrapper-item-margin;
            border-radius: $ribbon-simplified-wrapper-item-border-radius;
            max-height: $ribbon-gallery-simplified-items-wrapper-height;
            &.e-disabled {
              pointer-events: none;
            }

            .e-ribbon-gallery-text {
              font-size: $ribbon-gallery-text-font-size;
            }
          }
        }
      }

      .e-ribbon-tab .e-hscroll-bar {
        overflow-y: hidden;
      }

      .e-input-group {
        margin-bottom: $input-group-margin-bottom;
      }

      .e-ribbon-group {
        padding-top: $ribbon-simplified-group-padding;
        height: $ribbon-simplified-group-height;

        &.e-ribbon-emptyCollection::after {
          display: none;
        }

        &.e-ribbon-emptyCollection {
          .e-ribbon-group-container {
            padding: $ribbon-group-container-padding;
          }
        }
      }

      .e-ribbon-launcher-icon,
      // For blazor ribbon overflow case
      .e-ribbon-overall-overflow-popup,
      .e-ribbon-group-container .e-ribbon-group-overflow-popup {
        display: none;
      }

      .e-ribbon-group-container {
        padding: $ribbon-simplified-group-content-padding;
      }

      .e-ribbon-group-content {
        padding: $ribbon-simplified-mode-group-content-padding;
        height: $ribbon-simplified-group-content-height;
        align-items: center;
      }

      .e-ribbon-overlay {
        gap: $ribbon-simplified-overlay-gap;
      }
    }

    .e-ribbon-tab-item {
      display: inline-flex;

      &.e-disabled {
        pointer-events: none;
      }
    }

    .e-ribbon-group {
      position: relative;
      padding-top: $ribbon-group-padding;
      height: $ribbon-group-height;

      &.e-hidden,
      &.e-hide-group {
        display: none;
      }

      &.e-disabled {
        pointer-events: none;
      }
    }

    .e-ribbon-group::after {
      border-right: $ribbon-group-border-right solid;
      content: '';
      height: $ribbon-group-after-height;
      position: absolute;
      top: 8px;
    }

    &:not(.e-rtl) {

      .e-ribbon-collapse-btn,
      .e-ribbon-help-template,
      .e-ribbon-group::after {
        right: 0;
      }

      .e-ribbon-overall-of-btn {
        right: 0;
      }

      &.e-ribbon-collapsible .e-ribbon-overall-of-btn {
        right: $ribbon-overflow-collapse-btn-right;
      }

      .e-tab-header {
        left: $ribbon-tab-header-left;
      }

      .e-ribbon-tab .e-hscroll.e-scroll-device {
        padding-right: $ribbon-scroll-device-padding-right;
      }
    }

    &.e-rtl {

      .e-ribbon-collapse-btn,
      .e-ribbon-help-template,
      .e-ribbon-group::after {
        left: 0;
      }

      .e-ribbon-overall-of-btn {
        left: 0;
      }

      &.e-ribbon-collapsible .e-ribbon-overall-of-btn {
        left: $ribbon-overflow-collapse-btn-right;
      }

      .e-tab-header {
        right: var(--fileMenuWidth);
      }

      .e-ribbon-tab .e-hscroll.e-scroll-device {
        padding-left: $ribbon-rtl-scroll-device-padding-left;
      }
    }
    .e-ribbon-content-height {
      .e-ribbon-collection {
        max-height: $ribbon-group-content-height;
      }
    }
  }

  .e-ribbon-backstage-popup {
    &.e-ribbon-backstage-open {
      display: flex;
    }

    .e-ribbon-backstage-wrapper {
      @include ribbon-display(flex, column);

      .e-ribbon-backstage-items-wrapper {
        @include ribbon-display(flex, column);
        justify-content: space-between;
        height: $ribbon-backstage-items-wrapper-height;
      }

      .e-btn {
        border: $ribbon-backstage-btn-border;
        border-radius: $ribbon-backstage-btn-border-radius;
        box-shadow: none;
        padding: $ribbon-backstage-btn-padding;
        text-align: start;
        width: 100%;
        height: $ribbon-backstage-btn-height;
        line-height: $ribbon-backstage-btn-line-height;

        .e-btn-icon {
          @include ribbon-font-props($ribbon-backstage-btn-icon-font-size, $ribbon-backstage-btn-icon-line-height);
          width: auto;
          margin: $ribbon-backstage-btn-icon-margin;
          padding: $ribbon-backstage-btn-icon-padding;
        }

        &:focus {
          @include ribbon-backstage-border($ribbon-backstage-btn-focus-border);
        }

        &:hover {
          @include ribbon-backstage-border($ribbon-backstage-btn-hover-border);
        }

        &:focus:hover {
          @include ribbon-backstage-border($ribbon-backstage-btn-focus-border);
        }
        @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
          @include ribbon-backstage-border($ribbon-backstage-wrapper-btn-icon-border);
        }
        &:focus,
        &:hover,
        &:focus:hover {
          @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
            @include ribbon-backstage-border($ribbon-backstage-wrapper-btn-icon-focus-border);
          }
        }
      }

      .e-ribbon-backstage-menu {
        border: $ribbon-backstage-menu-border;
        border-radius: $ribbon-backstage-menu-border-radius;

        &.e-menu-wrapper ul.e-vertical,
        &.e-menu-wrapper ul.e-ul {
          min-width: 135px;

          &.e-menu .e-menu-item.e-separator {
            margin: $ribbon-backstage-menu-item-margin;
          }

          .e-menu-item:not(.e-separator) {
            height: $ribbon-backstage-menu-item-height;
            line-height: $ribbon-backstage-menu-item-height;
            padding: $ribbon-backstage-menu-item-padding;

            &:focus {
              @include ribbon-backstage-border($ribbon-backstage-menu-hover-border);
            }

            &.e-selected,
            &:hover {
              @include ribbon-backstage-border($ribbon-backstage-menu-active-border);
            }

            &.e-selected:focus {
              @include ribbon-backstage-border($ribbon-backstage-menu-hover-border);
            }
            @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
              @include ribbon-backstage-border($ribbon-backstage-menu-item-border);
            }
            &:focus,
            &.e-selected,
            &:hover,
            &.e-selected:focus {
              @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
                @include ribbon-backstage-border($ribbon-backstage-menu-selected-focus-border);
              }
            }
            .e-menu-icon {
              @include ribbon-font-props($ribbon-backstage-menu-icon-font-size, $ribbon-backstage-menu-icon-line-height);
              @include ribbon-items-icon-images($ribbon-backstage-menu-icon-font-size);
              width: auto;
              margin-right: $ribbon-backstage-menu-icon-margin-right;
              margin: $ribbon-backstage-menu-icon-padding;
            }

            &.e-blankicon {
              padding-left: $ribbon-backstage-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
            }
          }
        }

        &.e-rtl {
          ul.e-vertical .e-menu-item:not(.e-separator).e-blankicon,
          ul.e-ul .e-menu-item:not(.e-separator).e-blankicon {
            padding-left: $ribbon-backstage-menu-blank-icon-padding-left !important; /* stylelint-disable-line declaration-no-important */
            padding-right: $ribbon-backstage-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }
    }

    .e-ribbon-backstage-content {
      overflow: auto;
    }
  }

  .e-ribbon.e-rbn,
  .e-ribbon-group-overflow-ddb {
    border: $ribbon-border;

    .e-disabled {
      opacity: $ribbon-disabled-opacity;
      pointer-events: none;
    }

    .e-input-group {
      height: $ribbon-input-group-height;
      border-radius: $ribbon-input-group-border-radius;
      margin: $ribbon-input-group-margin;

      input.e-input {
        @include ribbon-font-styles($ribbon-input-size, $ribbon-input-weight, $ribbon-input-height);
        @include ribbon-items-height(auto, auto);
      }

      &.e-control-wrapper {
        .e-input-group-icon {
          @include ribbon-font-styles($ribbon-input-icon-size, $ribbon-input-icon-weight, $ribbon-input-icon-height);
          @include ribbon-items-height(auto, auto);
          padding: $ribbon-input-icon-padding;
          margin: $ribbon-input-icon-margin;
          border: $ribbon-input-icon-border;
          min-width: auto;
          border-radius: $ribbon-input-icon-border-radius;

          &.e-ddl-icon {
            font-size: $ribbon-input-icon-size;
          }
        }

        .e-clear-icon {
          min-width: auto;
          min-height: auto;
          border-radius: $ribbon-clear-icon-border-radius;
        }
      }

      .e-clear-icon {
        min-width: auto;
      }
    }

    .e-ribbon-group-content {
      padding: $ribbon-group-content-padding;
    }

    .e-ribbon-content-height {
      height: $ribbon-group-content-height;
    }

    .e-ribbon-group-header {
      @include ribbon-font-props($ribbon-group-header-font-size, $ribbon-group-header-height);
      align-items: center;
      display: flex;
      justify-content: center;
      white-space: nowrap;
      padding: $ribbon-group-header-padding;
    }

    .e-ribbon-launcher-icon {
      position: absolute;
      bottom: 0;
      margin: $ribbon-launcher-icon-margin;
      cursor: pointer;
      border: $ribbon-items-border;
    }

    &:not(.e-rtl) .e-ribbon-launcher {
      .e-ribbon-group-header {
        margin-right: $ribbon-group-header-margin;
      }

      .e-ribbon-launcher-icon {
        right: 0;
      }
    }

    &.e-rtl .e-ribbon-launcher {
      .e-ribbon-group-header {
        margin-left: $ribbon-group-header-margin;
      }

      .e-ribbon-launcher-icon {
        left: 0;
        margin: $ribbon-rtl-launcher-icon-margin;
      }
    }

    .e-ribbon-column {
      @include ribbon-display(inline-flex, row);
    }

    .e-ribbon-row {
      overflow: hidden;
      @include ribbon-display(inline-flex, column);
    }

    .e-ribbon-group-overflow,
    .e-ribbon-item {
      display: flex;
      padding: $ribbon-item-padding;
      vertical-align: middle;

      .e-ribbon-gallery-wrapper {
        display: flex;
        margin: $ribbon-wrapper-margin;

        .e-ribbon-gallery-container .e-ribbon-gallery-item {
          max-height: $ribbon-gallery-items-wrapper-height;
          margin: $ribbon-wrapper-item-margin;
          border-radius: $ribbon-wrapper-item-border-radius;
        }
      }

      .e-ribbon-gallery-button {
        padding: $ribbon-gallery-button-icon-padding;
        border-width: $ribbon-gallery-btn-icon-border-width;
        border-radius: $ribbon-gallery-btn-icon-border-radius;
        line-height: $ribbon-gallery-button-icon-line-height;
        font-weight: $ribbon-gallery-button-icon-font-weight;
        font-size: $ribbon-gallery-button-icon-font-size;
      }

      &.e-hidden {
        display: none;
      }
      &:not(:has(.e-ribbon-template)) {
        .e-btn {
          border: $ribbon-items-border;
          border-radius: $ribbon-items-border-radius;
          font-weight: $ribbon-items-font-weight;
          font-size: $ribbon-items-btn-size;
          text-transform: none;
          box-shadow: none;

          &:focus {
            outline: none;
          }
        }
      }

      .e-btn-group .e-btn.e-ribbon-group-button,
      .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type) {
        border: $ribbon-items-border;
      }

      &.e-ribbon-large-item:not(:has(.e-ribbon-template)) {
        .e-btn {
          @include ribbon-items-height(100%, inherit);
          @include ribbon-display(flex, column);
          max-width: $ribbon-large-items-max-width;
          min-width: fit-content;
          white-space: normal;
          padding: $ribbon-large-items-btn-padding;
          line-height: $ribbon-large-items-btn-height;
          justify-content: flex-start;
          align-items: center;

          &.e-ribbon-group-overflow-ddb {
            max-width: 100%;
          }

          .e-btn-icon:not(.e-caret) {
            @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
            font-size: $ribbon-large-items-icon-size;
            font-weight: $ribbon-items-font-weight;
            padding: $ribbon-large-items-icon-padding;
          }

          .e-icon-top {
            height: $icon-top-height;
          }

          &.e-top-icon-btn {
            gap: $ribbon-large-items-btn-gap;
          }
        }

        & > .e-split-btn-wrapper.e-vertical .e-btn {
          justify-content: space-evenly;
          height: $split-btn-wrapper-height;

          .e-icon-top {
            height: $split-btn-wrapper-icon-top-height;
          }
        }

        .e-dropdown-btn .e-caret {
          @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
          padding: $ribbon-overflow-dropdown-btn-padding;
        }
      }
    }

    .e-ribbon-group-overflow {
      height: $ribbon-group-overflow-height;
      padding: $ribbon-group-overflow-padding;
    }

    .e-ribbon-item:not(:has(.e-ribbon-template)) {
      min-height: 33%;
      padding: $ribbon-items-padding;

      &:has(.e-ribbon-gallery-container) {
        padding: $ribbon-gallery-container-padding;
        border-style: solid;
        border-width: $ribbon-gallery-container-border-width;
      }
      &:has(.e-ribbon-gallery-container:not(.e-hidden)) {
        height: $ribbon-gallery-wrapper-height;
        border-radius: $ribbon-wrapper-border-radius;
      }

      .e-btn-group {
        box-shadow: none;
      }

      .e-checkbox-wrapper {
        height: $ribbon-items-checkbox-height;
        margin: $ribbon-items-checkbox-margin;
        width: max-content;
        padding: $ribbon-items-checkbox-padding;

        .e-label {
          font-size: $ribbon-items-checkbox-size;
          font-weight: $ribbon-text-font-weight;
        }
      }

      .e-btn {
        box-shadow: none;

        &:disabled {
          pointer-events: none;
        }
      }

      .e-colorpicker-wrapper,
      .e-colorpicker-container {
        border: $ribbon-items-colorpicker-border solid transparent;
        border-radius: $ribbon-items-border-radius;

        .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
          padding: $ribbon-split-btn-padding;
        }
        .e-colorpicker-popup.e-ribbon-control
        {
          z-index: unset !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      .e-split-btn-wrapper {
        border: $ribbon-split-btn-wrapper-border solid transparent;
        border-radius: $ribbon-items-border-radius;
        box-shadow: none;

        .e-btn {
          border-radius: $ribbon-split-btn-border-radius;
        }

        .e-dropdown-btn .e-caret {
          font-size: $ribbon-dropdown-caret-btn-size;
          padding: $ribbon-dropdown-btn-padding;
        }
      }

      &.e-ribbon-large-item {
        min-height: 100%;

        .e-split-btn-wrapper.e-vertical {
          height: $split-btn-wrapper-vertical-height;

          .e-dropdown-btn {
            margin: $ribbon-dropdown-btn-margin;
          }
        }
      }

      &.e-ribbon-small-item,
      &.e-ribbon-medium-item {
        .e-btn {
          white-space: nowrap;
          padding: $ribbon-small-medium-item-padding;
          line-height: $ribbon-items-height;

          .e-btn-icon {
            @include ribbon-font-props($ribbon-medium-item-font-size, $ribbon-medium-item-line-height);
            margin: $ribbon-items-margin;
            &:not(.e-caret) {
              @include ribbon-items-icon-images($ribbon-items-min-width-height);
            }
          }
        }

        .e-colorpicker-wrapper .e-split-btn-wrapper {
          border: $ribbon-colorpicker-split-btn-wrapper-border;
        }

        .e-split-colorpicker.e-split-btn {
          .e-btn-icon {
            height: $ribbon-split-btn-icon-height;
            width: $ribbon-split-btn-icon-width;
          }

          .e-split-preview {
            border-radius: $ribbon-split-preview-border-radius;
          }
        }

        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
          padding: $ribbon-colorpicker-caret-btn-padding;
        }

        .e-dropdown-btn .e-caret {
          @include ribbon-font-props($ribbon-dropdown-caret-btn-size, $ribbon-dropdown-caret-btn-height);
          padding: $ribbon-dropdown-caret-btn-padding;
          margin: $ribbon-dropdown-caret-btn-margin;
          width: auto;
        }

        .e-split-btn-wrapper .e-btn {
          margin: $ribbon-split-btn-wrapper-margin;
        }
      }

      // For blazor ribbon small item to override dropdown width
      &.e-ribbon-small-item .e-dropdown-btn .e-icon-left {
        width: 1em;
      }

      &.e-ribbon-medium-item {
        .e-btn {
          align-items: center;
          display: flex;

          .e-btn-icon.e-icon-left {
            width: auto;
          }

          &.e-dropdown-btn:not(.e-icon-btn) .e-caret {
            margin: $ribbon-items-margin;
            padding: $ribbon-items-dropdown-btn-padding;
          }
        }
      }
    }

    &:not(.e-rtl) .e-ribbon-item:not(:has(.e-ribbon-template)) {
      @include ribbon-item-padding($ribbon-items-btn-padding, $ribbon-items-icons-padding);
    }

    &.e-rtl .e-ribbon-item:not(:has(.e-ribbon-template)) {
      @include ribbon-item-padding($ribbon-items-btn-rtl-padding, $ribbon-rtl-items-icons-padding);

      .e-ribbon-gallery-button {
        border-width: $ribbon-gallery-button-border-width;
        border-radius: $ribbon-gallery-button-border-radius;
      }
    }
  }

  .e-ribbon-group-overflow-ddb {
    &.e-dropdown-popup:has(.e-ribbon-overflow-target) {
      min-width: 190px;
      @if ($skin-name == 'fluent2') {
        padding: $ribbon-group-overflow-ddb-padding;
      }
    }
    .e-ribbon-of-tab:not(.e-ribbon-active) {
      display: none;
    }

    .e-ribbon-overflow-target {
      .e-ribbon-item:has(.e-ribbon-gallery-container) {
        border: $ribbon-overflow-target-border;
      }
      @if ($skin-name == 'fluent2') {
        .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-ribbon-template)) .e-dropdown-btn.e-btn {
          padding: $ribbon-overflow-target-padding;
        }
      }

      .e-ribbon-item:has(.e-input-group) {
        margin: $ribbon-item-input-group-margin;
      }

      .e-ribbon-gallery-dropdown.e-btn {
        padding: $ribbon-gallery-dropdown-btn-padding;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        .e-btn-icon {
          margin: $ribbon-gallery-dropdown-btn-margin;
        }
      }
      .e-ribbon-gallery-wrapper.e-hidden,
      .e-ribbon-gallery-container.e-hidden,
      .e-ribbon-gallery-button.e-hidden,
      .e-ribbon-of-tab .e-ribbon-of-group-container.e-hidden,
      .e-ribbon-of-tab .e-ribbon-of-group-container.e-hide-group,
      &.e-hidden,
      &.e-hide-group {
        display: none;
      }

      &.e-disabled,
      .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {
        pointer-events: none;
      }

      .e-ribbon-item {
        .e-dropdown-btn .e-caret {
          font-size: $ribbon-items-caret-icon-size;
        }
        .e-input-group {
          height: $ribbon-combobox-height;
        }
        .e-ribbon-combobox-label,
        .e-ribbon-colorpicker-label {
          white-space: nowrap;
          display: flex;
          align-items: center;
          font-weight: $ribbon-items-font-weight;
          font-size: $ribbon-items-label-size;
        }

        &:has(.e-colorpicker-wrapper) {
          align-items: center;
        }

        & > .e-input-group,
        .e-ribbon-template {
          margin: $ribbon-overflow-wrapper-item-margin;
        }
        &:not(:has(.e-ribbon-template)) .e-btn .e-btn-icon {
          font-size: $ribbon-items-btn-icon-size;
        }
      }

      .e-ribbon-item > .e-checkbox-wrapper {
        margin: $ribbon-checkbox-margin;
        padding: $ribbon-checkbox-wrapper-padding;
        .e-frame {
          margin: $ribbon-checkbox-wrapper-frame-margin;
        }
      }

      .e-ribbon-item.e-ribbon-medium-item {
        padding: $ribbon-overflow-item-padding;
        width: 100%;
        height: $ribbon-medium-item-height;
        &:not(:has(.e-ribbon-template)) {
          .e-btn .e-btn-icon {
            &:not(.e-caret) {
              min-width: $ribbon-overflow-items-min-width-height;
              min-height: $ribbon-overflow-items-min-width-height;
            }
          }

          .e-btn .e-btn-icon.e-icon-left {
            margin: $ribbon-btn-icon-left-margin;
          }

          > .e-split-btn-wrapper .e-btn,
          > .e-btn {
            line-height: $ribbon-overflow-item-btn-height;
            overflow: hidden;
          }

          >.e-split-btn-wrapper {
            width: inherit;
          }

          >.e-split-btn-wrapper .e-split-btn,
          >.e-btn {
            width: 100%;
            justify-content: flex-start;
          }
        }
      }

      .e-ribbon-overflow-header {
        @include ribbon-font-styles($ribbon-overflow-header-font-size, $ribbon-overflow-header-weight, $ribbon-overflow-header-line-height);
        padding: $ribbon-overflow-header-padding;
        height: $ribbon-overflow-header-height;
      }
    }
  }

  .e-ribbon-group-overflow-ddb:not(.e-rtl) {
    .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-template)) {
      @if ($skin-name == 'fluent2') {
        &.e-ribbon-medium-item .e-btn {
          &:not(.e-icon-btn, .e-dropdown-btn) {
            padding: $ribbon-medium-item-padding;
          }
        }
      }

      .e-ribbon-combobox-label,
      .e-ribbon-colorpicker-label {
        margin-left: $ribbon-items-label;
      }

      &.e-ribbon-medium-item {
        .e-btn .e-btn-icon.e-icon-left {
          margin: $ribbon-button-icon-padding;
        }

        &:not(:has(.e-colorpicker-wrapper)) .e-btn {
          &:not(:has(.e-btn-icon)) {
            padding-left: $ribbon-items-label;
          }
        }
      }

      &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
      &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container,
      &:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
        margin-left: $ribbon-items-label;
      }

      >.e-split-btn-wrapper,
      >.e-dropdown-btn {
        .e-icons.e-caret {
          transform: rotate(-90deg);
          padding: $ribbon-caret-icon-padding;
          margin: $ribbon-caret-icon-margin;
        }
      }
    }
  }

  .e-rtl.e-ribbon-group-overflow-ddb {
    .e-ribbon-overflow-target {
      .e-ribbon-overflow-header {
        padding: $ribbon-rtl-overflow-header-padding;
      }
      .e-ribbon-item:not(:has(.e-ribbon-template)) {
        @if ($skin-name == 'fluent2') {
          &.e-ribbon-medium-item .e-btn {
            &:not(.e-icon-btn, .e-dropdown-btn) {
              padding: $ribbon-rtl-medium-item-padding;
            }
          }
        }
        .e-ribbon-combobox-label,
        .e-ribbon-colorpicker-label {
          margin-right: $ribbon-items-label;
        }

        &.e-ribbon-medium-item {
          .e-btn .e-btn-icon.e-icon-left {
            margin: $ribbon-rtl-button-icon-padding;
          }

          &:not(:has(.e-colorpicker-wrapper)) .e-btn {
            &:not(:has(.e-btn-icon)) {
              padding-right: $ribbon-items-label;
            }
          }
        }

        &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
        &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container,
        &:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
          margin-right: $ribbon-items-label;
        }

        >.e-split-btn-wrapper,
        >.e-dropdown-btn {
          .e-icons.e-caret {
            transform: rotate(90deg);
            padding: $ribbon-rtl-caret-icon-padding;
            margin: $ribbon-rtl-caret-icon-margin;
          }
        }
      }
      .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
        margin: $ribbon-rtl-checkbox-margin;
      }
    }
  }

  .e-dropdown-popup.e-ribbon-dropdown-group-button {
    border-radius: $ribbon-group-button-ddb-border-radius;
    border: $ribbon-group-button-ddb-border;
    padding: $ribbon-group-button-ddb-padding;

    .e-ribbon-groupbutton-header {
      padding-bottom: $ribbon-groupbutton-header-padding;
      font-weight: $ribbon-overflow-header-weight;
      line-height: $ribbon-overflow-header-line-height;
      white-space: nowrap;
    }

    &.e-ribbon-group-button-overflow-popup {
      .e-btn-group {
        .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
        &:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button {
          &:first-of-type {
            border-top-right-radius: $ribbon-group-btn-first-border-top-right-radius;
            border-top-left-radius: $ribbon-group-btn-first-border-top-left-radius;
            border-bottom-right-radius: $ribbon-group-btn-first-border-bottom-right-radius;
            border-bottom-left-radius: $ribbon-group-btn-first-border-bottom-left-radius;
          }
          &:last-of-type {
            border-top-right-radius: $ribbon-group-btn-last-border-top-right-radius;
            border-top-left-radius: $ribbon-group-btn-last-border-top-left-radius;
            border-bottom-right-radius: $ribbon-group-btn-last-border-bottom-right-radius;
            border-bottom-left-radius: $ribbon-group-btn-last-border-bottom-left-radius;
          }
        }
        &:not(.e-icon-btn) {
          flex-direction: column;
        }
      }
    }

    .e-btn-group {
      box-shadow: none;
      border-radius: $ribbon-group-button-ddb-border-radius;

      .e-btn-icon {
        @include ribbon-font-styles($ribbon-group-button-icon-font-size, $ribbon-items-font-weight, $ribbon-group-button-icon-line-height);
        @include ribbon-items-icon-images(16px);
        margin: $ribbon-group-button-icon-margin;
        width: auto;

        &.e-icon-left {
          padding: $ribbon-group-button-icon-padding;
        }
      }
      .e-btn.e-ribbon-group-button {
        padding: $ribbon-group-button-item-padding;
        font-weight: $ribbon-items-font-weight;
        font-size: $ribbon-items-btn-size;
        border: $ribbon-group-button-item-border;
        text-transform: none;

        &:not(.e-icon-btn) {
          padding: $ribbon-group-button-padding;
        }

        &:focus,
        &:focus-visible {
          outline: none;
          box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
        }
      }
    }
  }

  .e-ribbon-gallery-popup.e-popup,
  .e-ribbon-gallery-dropdown.e-popup {
    .e-ribbon-popup-container .e-ribbon-gallery-header:first-child {
      padding-top: $ribbon-gallery-header-padding-top;
    }
  }
  .e-ribbon-gallery-popup.e-popup,
  .e-ribbon-gallery-dropdown.e-popup {
    border-radius: $ribbon-gallery-popup-border-radius;
    padding: $ribbon-gallery-popup-padding;
    overflow: auto;

    .e-ribbon-gallery-header {
      @include ribbon-font-styles($ribbon-gallery-header-fontsize, $ribbon-gallery-header-font-weight, $ribbon-gallery-header-line-height);
      padding: $ribbon-gallery-header-padding;
    }
    .e-ribbon-gallery-container .e-ribbon-gallery-item {
      margin: $ribbon-gallery-item-margin;
      height: $ribbon-gallery-popup-items-height;
      width: $ribbon-gallery-popup-items-width;
    }
  }

  .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
    width: $ribbon-gallery-items-width;
  }

  .e-ribbon-gallery-popup.e-popup,
  .e-ribbon-gallery-dropdown.e-popup,
  .e-ribbon-group-overflow,
  .e-ribbon-item {
    .e-ribbon-gallery-container {
      padding: $ribbon-overflow-gallery-container-padding;
      margin: $ribbon-overflow-gallery-container-margin;
      display: flex;
      align-content: space-around;

      .e-ribbon-gallery-item {
        @include ribbon-display(inherit, column);
        align-items: center;
        justify-content: center;
        text-align: center;
        list-style-type: none;
        padding: $ribbon-gallery-popup-items-padding;
        cursor: pointer;
        border-width: $ribbon-gallery-popup-items-border-width;
        border-style: solid;
        border-radius: $ribbon-gallery-popup-items-border-radius;

        &.e-disabled {
          pointer-events: none;
        }

        &.e-hidden {
          display: none;
        }

        .e-ribbon-gallery-icons {
          @include ribbon-font-styles($ribbon-gallery-icons-size, $ribbon-gallery-icons-weight, $ribbon-gallery-icons-height);
          padding: $ribbon-gallery-icons-padding;
          background-size: cover;
          min-width: $ribbon-gallery-icons-size;
          min-height: $ribbon-gallery-icons-size;
          background-position: center;
          background-repeat: no-repeat;
        }
        &:hover,
        &.e-ribbon-gallery-selected {
          border-radius: $ribbon-gallery-selected-border-radius;
        }
      }
    }
  }

  .e-ribbon-gallery-text {
    @include ribbon-font-styles($ribbon-gallery-text-size, $ribbon-gallery-text-weight, $ribbon-gallery-text-line-height);
    width: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .e-ribbon-keytip {
    @include ribbon-font-props($ribbon-keytip-font-size, $ribbon-keytip-line-height);
    min-width: $ribbon-keytip-min-width;
    height: $ribbon-keytip-height;
    border-radius: $ribbon-keytip-border-radius;

    &.e-popup-open {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .e-ribbon-menu {
    display: block;

    &.e-menu-wrapper,
    &.e-menu-container {
      ul.e-vertical,
      ul.e-ul {
        &.e-menu {
          padding: $filemenu-popup-padding;
          border: $ribbon-menu-border;
          border-radius: $ribbon-menu-border-radius;
        }

        .e-menu-item {
          border-radius: $ribbon-menu-item-border-radius;
          font-weight: $ribbon-text-font-weight;
          .e-menu-icon {
            @include ribbon-items-icon-images($ribbon-file-menu-min-width-height);
            width: auto;
          }

          &.e-blankicon {
            padding-left: $ribbon-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }
    }
  }

  .e-ribbon-control.e-dropdown-popup ul .e-item {
    font-size: $ribbon-ddb-popup-font-size;
    height: $ribbon-ddb-popup-height;
    align-items: center;

    &.e-separator {
      height: auto;
    }

    .e-menu-icon {
      @include ribbon-font-props($ribbon-menu-icon-font-size, $ribbon-menu-icon-line-height);
      @include ribbon-items-icon-images(16px);
    }
  }

  .e-ribbon-tooltip {
    .e-tip-content {
      padding: $ribbon-tooltip-padding;

      .e-ribbon-tooltip-title {
        @include ribbon-font-props($ribbon-tooltip-title-font-size, $ribbon-tooltip-title-line-height);
        padding: $ribbon-tooltip-title-padding;
      }

      .e-ribbon-text-container {
        padding: $ribbon-text-container-padding;
        display: flex;

        .e-ribbon-tooltip-content {
          @include ribbon-font-props($ribbon-tooltip-content-font-size, $ribbon-tooltip-content-line-height);
        }

        .e-ribbon-tooltip-icon {
          @include ribbon-font-props($ribbon-tooltip-icon-font-size, $ribbon-tooltip-icon-line-height);
          padding-right: $ribbon-tooltip-icon-padding-right;
        }
      }
    }
  }

  .e-ribbon-vertical-center,
  .e-ribbon-group-overflow-ddb {
    &.e-dropdown-popup {
      border-radius: $ribbon-popup-common-border-radius;
    }
    &.e-ribbon-filemenu.e-dropdown-popup {
      border-radius: $ribbon-filemenu-popup-border-radius;
    }
  }
}

@mixin ribbon-colors($bg-color, $color, $border-color) {
  background: $bg-color;
  color: $color;
  border-color: $border-color;
}

@mixin ribbon-hscroll-interactions($rb-bg-color, $rb-border-color, $rb-color) {
  border-color: $rb-border-color;
  background: $rb-bg-color;

  .e-nav-arrow {
    color: $rb-color;
  }
}

@mixin ribbon-button-icon-color($rb-btn-color) {
  .e-btn-icon {
    color: $rb-btn-color;
  }
}

@mixin ribbon-gallery-text-icon-colors($rb-gallery-text-color, $rb-gallery-icon-color) {
  .e-ribbon-gallery-text {
    color: $rb-gallery-text-color;
  }
  .e-ribbon-gallery-icons {
    color: $rb-gallery-icon-color;
  }
}

@include export-module('ribbon-theme') {
  .e-ribbon.e-rbn {
    &.e-ribbon-container {
      .e-ribbon-overlay {
        background: $ribbon-tab-background-color;

        .e-ribbon-skeleton {
          &.e-skeleton.e-skeleton-text {
            background-color: $ribbon-skeleton-bg-color;

            @if ($skin-name == 'highcontrast-light' or $skin-name == 'highcontrast') {
              border-color: $bg-base-100;
            }
          }

          &.e-skeleton.e-shimmer-wave::after {
            background-image: $ribbon-skeleton-wave-color;

            @if ($theme-name == 'fluent2-highcontrast') {
              background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, $content-bg-color-alt6 50%, rgba(255, 255, 255, 0) 70%);
            }
          }
        }
      }
    }

    .e-ribbon-tab {
      .e-tab-header {
        border-color: $ribbon-border-color;
        background: $ribbon-tab-background-color;

        .e-toolbar-item {
          &.e-ribbon-contextual-tab {
            background: $ribbon-contextual-tab-background;
            .e-tab-wrap {
              .e-tab-text {
                color: $ribbon-contextual-tab-color;
              }
            }
          }

          .e-tab-wrap {
            .e-tab-text {
              color: $ribbon-tab-text-color;
            }

            &:hover .e-tab-text {
              color: $ribbon-tab-text-hover-color;
            }
          }

          @if ($skin-name == 'fluent2') {
            &.e-active::before {
              background: $ribbon-active-tab-indicator-color;
            }
          }

          &.e-active .e-tab-wrap .e-tab-text {
            color: $ribbon-active-tab-color;
          }
        }

        .e-indicator {
          background: $ribbon-active-tab-indicator-color;
        }
      }

      .e-hscroll .e-scroll-nav {
        @include ribbon-hscroll-interactions($ribbon-hscroll-background-color, $ribbon-hscroll-border-color, $ribbon-hscroll-color);

        &:hover {
          @include ribbon-hscroll-interactions($ribbon-hscroll-hover-background-color, $ribbon-hscroll-hover-border-color, $ribbon-hscroll-hover-color);
        }

        &:active {
          @include ribbon-hscroll-interactions($ribbon-hscroll-active-background-color, $ribbon-hscroll-active-border-color, $ribbon-hscroll-active-color);
        }

        &:focus {
          @include ribbon-hscroll-interactions($ribbon-hscroll-focus-background-color, $ribbon-hscroll-focus-border-color, $ribbon-hscroll-focus-color);
        }
      }

      .e-ribbon-file-menu,
      .e-ribbon-backstage {
        @include ribbon-colors($ribbon-tab-background-color, $ribbon-tab-text-color, $ribbon-border-color);

        &.e-active {
          color: $ribbon-active-file-menu-color;
          background: $ribbon-active-file-menu-background;
        }

        &:hover:not(.e-active) {
          color: $ribbon-tab-text-hover-color;
        }

        &:focus-visible {
          color: $ribbon-tab-text-focus-color;
        }
      }

      .e-ribbon-help-template {
        border-color: $ribbon-border-color;
        background: $ribbon-tab-background-color;
      }

      .e-ribbon-template {
        &:focus-visible {
          @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-focus-color, $ribbon-items-focus-border-color);
        }
      }
    }

    .e-ribbon-tab.e-focused .e-tab-header {
      .e-tab-wrap:focus {
        .e-tab-text {
          color: $ribbon-tab-text-focus-color;
        }
      }
    }

    .e-ribbon-collapse-btn {
      @include ribbon-colors($ribbon-collapse-btn-background, $ribbon-items-icon-color, transparent);

      &:hover,
      &:focus-visible {
        @include ribbon-colors($ribbon-items-focus-background-color,$ribbon-items-icon-focus-color, $ribbon-items-focus-border-color);
      }
    }
  }

  .e-ribbon-backstage-popup {
    box-shadow: $ribbon-overflow-box-shadow;

    .e-ribbon-backstage-wrapper {
      background: $ribbon-backstage-menu-bg-color;
    }

    .e-btn {
      background: $ribbon-backstage-btn-bg-color;
      color: $ribbon-backstage-btn-color;
      font-weight: $ribbon-backstage-close-btn-font-weight;
      @if ($skin-name == 'material') {
        text-transform: none;
      }

      &:focus {
        @include ribbon-colors($ribbon-backstage-btn-focus-bg-color, $ribbon-backstage-btn-focus-color, $ribbon-backstage-btn-focus-border-color);
      }

      &:hover {
        @include ribbon-colors($ribbon-backstage-btn-hover-bg-color, $ribbon-backstage-btn-hover-color, $ribbon-backstage-btn-hover-border-color);
      }

      &:hover:focus {
        @include ribbon-colors($ribbon-backstage-btn-focus-bg-color, $ribbon-backstage-btn-focus-color, $ribbon-backstage-btn-focus-border-color);
      }
    }

    .e-ribbon-backstage-menu {
      &.e-menu-wrapper,
      &.e-menu-container {
        &:not(.e-menu-popup) {
          background: $ribbon-backstage-menu-bg-color;
        }
      }

      &.e-menu-wrapper ul.e-vertical,
      &.e-menu-wrapper ul.e-ul {
        &.e-menu {
          background: $ribbon-backstage-menu-items-bg-color;
        }

        .e-menu-item {
          color: $ribbon-backstage-items-color;

          .e-menu-icon {
            color: $ribbon-backstage-menu-icon-color;
          }

          &.e-separator {
            background: $ribbon-backstage-separator-color;
          }

          &:focus {
            @include ribbon-colors($ribbon-backstage-menu-hover-bg-color, $ribbon-backstage-menu-items-hover-color, $ribbon-backstage-menu-hover-border-color);

            .e-menu-icon {
              color: $ribbon-backstage-menu-icon-hover-color;
            }
          }

          &.e-selected,
          &.e-focused {
            @include ribbon-colors($ribbon-backstage-menu-active-bg-color, $ribbon-backstage-menu-items-active-color, $ribbon-backstage-menu-active-border-color);

            .e-menu-icon {
              color: $ribbon-backstage-menu-icon-active-color;
            }
          }
          &.e-selected:focus {
            @include ribbon-colors($ribbon-backstage-menu-hover-bg-color, $ribbon-backstage-menu-items-hover-color, $ribbon-backstage-menu-hover-border-color);

            .e-menu-icon {
              color: $ribbon-backstage-menu-icon-hover-color;
            }
          }
        }
      }
    }

    .e-ribbon-backstage-template,
    .e-ribbon-backstage-content {
      background: $ribbon-header-bg-color;
    }
  }

  .e-ribbon.e-rbn,
  .e-ribbon-group-overflow-ddb {
    background: $ribbon-header-bg-color;
    border-color: $ribbon-border-color;

    .e-ribbon-item:not(.e-disabled) {
      .e-checkbox-wrapper {
        .e-label {
          color: $ribbon-text-color;
        }

        &.e-checkbox-disabled .e-label {
          color: $ribbon-items-disabled-color;
        }
      }

      .e-colorpicker-wrapper,
      .e-split-btn-wrapper {
        &.e-ribbon-hover,
        &:not(.e-ribbon-hover):hover,
        &.e-ribbon-open {
          border-color: $ribbon-items-hover-background-color;
        }
      }

      .e-split-btn-wrapper.e-vertical:hover .e-split-btn:not(:hover) {
        border-color: transparent;
      }
    }

    .e-ribbon-item {
      .e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
        border-color: transparent;
      }

      &:has(.e-ribbon-gallery-container) {
        border-color: $ribbon-gallery-item-border-color;
        background: $ribbon-gallery-wrapper-background-color;
      }
    }

    .e-ribbon-item:not(:has(.e-ribbon-template)),
    .e-ribbon-group-overflow,
    &.e-ribbon-overflow {
      .e-btn:not(.e-ribbon-file-menu),
      .e-btn-group .e-btn.e-ribbon-group-button,
      .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
      .e-ribbon-group-of-btn {
        @include ribbon-colors($ribbon-items-background-color, $ribbon-text-color, transparent);
        @include ribbon-button-icon-color($ribbon-items-icon-color);

        &:hover {
          @include ribbon-colors($ribbon-items-hover-background-color, $ribbon-items-text-hover-color, $ribbon-items-hover-border-color);
          @include ribbon-button-icon-color($ribbon-items-hover-color);
        }

        &.e-active {
          background: $ribbon-items-active-background-color;
          color: $ribbon-items-text-active-color;
          @include ribbon-button-icon-color($ribbon-items-active-color);
        }

        &:active {
          background: $ribbon-items-pressed-background-color;
          color: $ribbon-items-text-active-color;
          @include ribbon-button-icon-color($ribbon-items-active-color);
        }

        &:focus-visible {
          @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-text-focus-color, $ribbon-items-focus-border-color);
          @include ribbon-button-icon-color($ribbon-items-focus-color);
          & {
            box-shadow: $ribbon-items-focus-box-shadow;
          }
        }
      }
    }

    .e-ribbon-item,
    .e-ribbon-group-overflow,
    &.e-ribbon-overflow {
      .e-btn:not(.e-ribbon-file-menu),
      .e-btn-group .e-btn.e-ribbon-group-button,
      .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
      .e-ribbon-group-of-btn {
        &:disabled {
          @include ribbon-button-icon-color($ribbon-items-disabled-color);
          & {
            color: $ribbon-items-disabled-color;
          }
        }
      }
    }

    .e-ribbon-group-header {
      color: $ribbon-text-color;
    }

    .e-ribbon-launcher-icon {
      border-color: transparent;

      &:hover,
      &:focus-visible {
        @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-icon-focus-color, $ribbon-items-focus-border-color);
      }
    }

    .e-input-group {
      border-color: $ribbon-input-group-border-color;
      background: $ribbon-input-group-background-color;

      input.e-input {
        color: $ribbon-text-color;
      }

      &.e-control-wrapper {
        .e-input-group-icon {
          color: $ribbon-items-icon-color;

          &:hover {
            background: $ribbon-items-hover-background-color;
            color: $ribbon-items-text-hover-color;
          }
        }
      }

      &.e-disabled,
      &:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled {
        border-color: $ribbon-items-disabled-color;
      }
    }

    .e-ribbon-group::after {
      border-color: $ribbon-group-border-color;
    }
  }

  .e-ribbon-group-overflow-ddb {
    .e-ribbon-item {
      .e-ribbon-combobox-label,
      .e-ribbon-colorpicker-label {
        color: $ribbon-text-color;
      }

      .e-ribbon-template {
        &:focus-visible {
          @include ribbon-colors($ribbon-items-focus-background-color, $ribbon-items-focus-color, $ribbon-items-focus-border-color);
        }
      }
    }
  }

  .e-ribbon-file-menu,
  .e-ribbon-vertical-center,
  .e-ribbon-group-overflow-ddb,
  .e-ribbon-dropdown-group-button {
    &.e-dropdown-popup {
      background: $ribbon-popup-common-bg-color;
      box-shadow: $ribbon-popup-common-box-shadow;
      border-color: $ribbon-popup-common-border-color;

      .e-ribbon-item:not(:has(.e-ribbon-template)) .e-btn:not(.e-ribbon-file-menu),
      .e-btn-group .e-btn.e-ribbon-group-button,
      .e-ribbon-group-of-btn {
        &:not(:hover, :active, :focus-visible, :disabled, .e-active) {
          background: transparent;
        }
      }
    }
  }

  .e-ribbon-gallery-button {
    border-color: $ribbon-gallery-item-border-color;
    background: transparent;
    color: $ribbon-gallery-button-icon-color;
    &.e-gallery-button-active {
      background: $ribbon-gallery-button-selected-color;
      color: $ribbon-gallery-button-selected-icon-color;
    }
  }

  .e-ribbon-gallery-item {
    background: $ribbon-gallery-popup-item-background-color;
    border-color: transparent;
    @include ribbon-gallery-text-icon-colors($ribbon-gallery-item-text-color, $ribbon-gallery-icons-color);
  }

  .e-ribbon-gallery-popup.e-popup,
  .e-dropdown-popup.e-ribbon-gallery-dropdown {
    background: $ribbon-gallery-popup-background-color;
    box-shadow: $ribbon-gallery-popup-box-shadow;

    .e-ribbon-gallery-header {
      color: $ribbon-gallery-header-color;
    }
  }

  .e-ribbon-gallery-wrapper,
  .e-ribbon-gallery-popup.e-popup,
  .e-dropdown-popup.e-ribbon-gallery-dropdown {
    .e-ribbon-gallery-item {
      &:hover {
        background: $ribbon-gallery-hover-background-color;
        @if ($skin-name == 'fluent2') {
          @include ribbon-gallery-text-icon-colors($content-text-color-hover, $content-text-color-hover);
        }
      }
      &.e-ribbon-gallery-selected {
        background: $ribbon-gallery-item-selected-color;
        @include ribbon-gallery-text-icon-colors($ribbon-gallery-item-selected-text-color, $ribbon-gallery-item-selected-icons-color);
      }
      &.e-disabled {
        background: $ribbon-gallery-item-disabled-color;
        @include ribbon-gallery-text-icon-colors($ribbon-gallery-item-disabled-text-color, $ribbon-gallery-item-disabled-icons-color);
      }
      &:focus,
      &:focus-visible {
        border-color: $ribbon-gallery-item-focus-border-color;
      }
    }
  }

  .e-dropdown-popup.e-ribbon-dropdown-group-button {
    @include ribbon-button-icon-color($ribbon-items-icon-color);
    .e-btn.e-ribbon-group-button {
      color: $ribbon-text-color;
      background: $ribbon-group-button-dropdown-popup-background;

      &.e-icon-btn:hover,
      &.e-icon-btn:focus {
        @include ribbon-button-icon-color($ribbon-group-button-icon-hover-color);
        background: $ribbon-group-button-hover-background;
      }
      &:hover,
      &:focus {
        @include ribbon-button-icon-color($ribbon-group-button-icon-hover-color);
        background: $ribbon-group-button-hover-background;
        color: $ribbon-group-button-text-hover-color;
      }
      &.e-icon-btn.e-active {
        @include ribbon-button-icon-color($ribbon-group-button-icon-active-color);
        background: $ribbon-group-button-active-background;
      }
      &.e-active {
        @include ribbon-button-icon-color($ribbon-group-button-icon-active-color);
        background: $ribbon-group-button-selected-background;
        color: $ribbon-group-button-text-active-color;
      }
      &.e-icon-btn:active,
      &:active {
        @include ribbon-button-icon-color($ribbon-group-button-icon-active-color);
        & {
          background: $ribbon-group-button-pressed-background;
        }
      }
    }
  }

  .e-ribbon-tooltip.e-tooltip-wrap {
    &.e-popup {
      background: $ribbon-tooltip-background-color;
    }

    .e-tip-content {
      color: $ribbon-tooltip-text-color;
    }

    .e-arrow-tip .e-arrow-tip-inner.e-tip-top {
      color: $ribbon-tooltip-background-color;
    }
  }

  .e-ribbon-keytip {
    background-color: $ribbon-keytip-background-color;
    color: $ribbon-keytip-color;
  }

  .e-ribbon-group-overflow-ddb.e-dropdown-popup {
    box-shadow: $ribbon-grp-overflow-popup-box-shadow;
    border: $dropdown-popup-border solid $ribbon-grp-overflow-border-color;
  }
  .e-ribbon-menu {
    &.e-menu-wrapper,
    &.e-menu-container {
      &:not(.e-menu-popup) {
        background: $ribbon-menu-background-color;
      }
    }

    &.e-menu-wrapper,
    &.e-menu-container {
      ul.e-vertical,
      ul.e-ul {
        &.e-menu {
          border-color: $ribbon-menu-border-color;
          background: $ribbon-menu-items-background-color;
        }

        .e-menu-item {
          color: $ribbon-text-color;

          .e-menu-icon,
          .e-caret {
            color: $ribbon-menu-items-icon-color;
          }

          &.e-focused {
            background: $ribbon-menu-hover-background-color;
            color: $ribbon-menu-items-color;
            @if ($skin-name == 'fluent2') {
              .e-menu-icon {
                color: $ribbon-menu-items-color;
              }
            }
          }
        }
      }
    }
  }
  .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper {
    .e-btn {
      @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
        @include ribbon-colors($ribbon-backstage-btn-bg-color, $ribbon-backstage-btn-color, transparent);
      }
      &:hover {
        @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
          @include ribbon-colors($ribbon-backstage-btn-hover-bg-color, $ribbon-backstage-btn-hover-color, transparent);
        }
      }
    }
    .e-ribbon-backstage-menu {
      &.e-menu-wrapper ul.e-vertical,
      &.e-menu-wrapper ul.e-ul {
        .e-menu-item {
          @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
            @include ribbon-colors($ribbon-backstage-btn-bg-color, $ribbon-backstage-btn-color, transparent);
          }
          &.e-focused {
            @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
              @include ribbon-colors($ribbon-backstage-menu-active-bg-color, $ribbon-backstage-menu-items-active-color, transparent);
            }
          }
          &.e-separator {
            @if ($skin-name == 'tailwind3' or $theme-name == 'tailwind3-dark' or $skin-name == 'tailwind' or $theme-name == 'tailwind-dark') {
              background: $ribbon-backstage-separator-color;
            }
          }
        }
      }
    }
  }
}

@include export-module('ribbon-bootstrap-icons') {
  .e-ribbon {
    & .e-drop-icon {
      &::before {
        content: '\e95d';
      }
    }
  }
}

@mixin ribbon-font-props($font-size, $line-height) {
  font-size: $font-size;
  line-height: $line-height;
}

@mixin ribbon-items-height($height, $min-height) {
  height: $height;
  min-height: $min-height;
}

@mixin ribbon-items-icon-images($items-size) {
  min-height: $items-size;
  min-width: $items-size;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

@include export-module('ribbon-bigger') {
  .e-bigger.e-ribbon.e-rbn,
  .e-bigger .e-ribbon.e-rbn {
    .e-ribbon-group {
      height: $ribbon-bigger-group-height;
    }

    .e-ribbon-tab {
      .e-ribbon-file-menu,
      .e-ribbon-backstage {
        @include ribbon-font-props($ribbon-bigger-file-menu-size, $ribbon-bigger-file-menu-height);
        padding: $ribbon-bigger-file-menu-padding;
      }

      .e-ribbon-help-template {
        padding-right: $ribbon-bigger-help-template-padding;
        height: $ribbon-bigger-help-template-height;
      }

      .e-hscroll {
        min-height: auto;
      }

      .e-tab-header {
        .e-hor-nav {
          @include ribbon-items-height($ribbon-bigger-horizontal-nav-height, $ribbon-bigger-horizontal-nav-height);
        }

        .e-toolbar-items {
          height: $ribbon-bigger-toolbar-items-height;
        }

        .e-toolbar-item {
          margin-right: $ribbon-bigger-tab-header-tbar-margin-right;

          .e-tab-text {
            @include ribbon-font-props($ribbon-bigger-tab-text-size, $ribbon-bigger-tab-text-height);
            padding: $ribbon-bigger-tab-text-padding;
          }
        }
      }

      &.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap {
        &:focus,
        &:focus .e-text-wrap {
          height: $ribbon-bigger-toolbar-items-height;
        }
      }

      &.e-tab {
        &.e-focused .e-tab-header .e-toolbar-item .e-tab-wrap:focus,
        .e-tab-header .e-toolbar-item .e-text-wrap {
          height: $ribbon-text-wrap-bigger-height;
        }
      }
    }

    &.e-ribbon-collapsible {
      .e-content {
        width: calc(100% - $ribbon-bigger-collapsible-content-width);
      }

      .e-ribbon-collapse-btn {
        @include ribbon-font-props($ribbon-bigger-collapse-btn-font-size, $ribbon-bigger-collapse-btn-height);
        padding: $ribbon-bigger-collapse-btn-padding;
      }

      &.e-ribbon-overflow {
        .e-content {
          width: calc(100% - $ribbon-bigger-collapsible-content-width - $ribbon-bigger-overflow-btn-content-width);
        }

        .e-ribbon-group-of-btn,
        .e-ribbon-overall-of-btn {
          height: $ribbon-bigger-overall-overflow-btn-height;

          .e-btn-icon {
            @include ribbon-font-props($ribbon-bigger-overflow-btn-font-size, $ribbon-bigger-overflow-btn-height);
            padding: $ribbon-bigger-overflow-btn-icon-padding;
          }
        }

        .e-ribbon-overall-of-btn {
          bottom: $ribbon-bigger-overall-overflow-btn-position;
        }

        &:not(.e-rtl) .e-ribbon-overall-of-btn {
          right: $ribbon-bigger-overflow-collapse-btn-right;
        }

        &.e-rtl .e-ribbon-overall-of-btn {
          left: $ribbon-bigger-overflow-collapse-btn-right;
        }
      }
    }
    .e-ribbon-item {
      &:has(.e-ribbon-gallery-container:not(.e-hidden)) {
        height: $ribbon-bigger-gallery-wrapper-height;
      }
      &:has(.e-ribbon-gallery-container) {
        padding: $ribbon-bigger-gallery-container-padding;
      }

      .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
        max-height: $ribbon-bigger-gallery-items-wrapper-height;
        width: $ribbon-bigger-gallery-items-wrapper-width;
      }
    }

    &.e-ribbon-simplified-mode {
      .e-ribbon-item {
        &:has(.e-ribbon-gallery-container:not(.e-hidden)) {
          height: $ribbon-bigger-gallery-simplified-wrapper-height;
        }

        .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
          max-height: $ribbon-bigger-gallery-simplified-items-wrapper-height;
        }
      }
    }
    .e-ribbon-content-height {
      .e-ribbon-collection {
        max-height: $ribbon-bigger-content-height;
      }
    }
  }

  .e-bigger.e-ribbon.e-rbn,
  .e-bigger .e-ribbon.e-rbn,
  .e-bigger .e-ribbon-group-overflow-ddb,
  .e-bigger.e-ribbon-group-overflow-ddb {
    .e-ribbon-group-header {
      @include ribbon-font-props($ribbon-bigger-group-header-font-size, $ribbon-bigger-group-header-height);
      padding: $ribbon-bigger-group-header-padding;
    }

    @if ($skin-name == 'fluent2') {
      &:not(.e-rtl) .e-ribbon-medium-item,
      &:not(.e-rtl) .e-ribbon-small-item {
        &:not(:has(.e-ribbon-template)) {
          .e-btn {
            &:not(.e-icon-btn, .e-dropdown-btn) {
              padding: $ribbon-bigger-group-overflow-ddb-btn-padding;
            }
          }
          .e-dropdown-btn.e-btn {
            padding: $ribbon-bigger-group-overflow-dropdown-btn-padding;
          }
        }
      }
      &.e-rtl .e-ribbon-medium-item,
      &.e-rtl .e-ribbon-small-item {
        &:not(:has(.e-ribbon-template)) {
          .e-btn {
            &:not(.e-icon-btn, .e-dropdown-btn) {
              padding: $ribbon-bigger-rtl-ddb-btn-padding;
            }
          }
          .e-dropdown-btn.e-btn {
            padding: $ribbon-bigger-rtl-dropdown-btn-padding;
          }
        }
      }
    }

    .e-ribbon-launcher-icon {
      margin: $ribbon-bigger-launcher-icon-margin;
    }

    &.e-rtl .e-ribbon-launcher-icon {
      margin: $ribbon-bigger-rtl-launcher-icon-margin;
    }

    &.e-ribbon-simplified-mode {
      .e-ribbon-group {
        height: $ribbon-simplified-group-bigger-height;
      }

      .e-input-group {
        margin-bottom: $ribbon-bigger-simplified-group-margin-bottom;
      }

      .e-ribbon-group-content {
        height: $ribbon-bigger-simplified-group-content-height;
      }
    }

    .e-ribbon-content-height {
      height: $ribbon-bigger-content-height;
    }

    .e-ribbon-group-overflow {
      height: $ribbon-bigger-group-overflow-content-height;
    }

    .e-input-group {
      height: $ribbon-bigger-input-group-height;
      margin: $ribbon-bigger-input-group-margin;

      &:not(.e-float-input) .e-input {
        min-height: auto;
      }

      input.e-input {
        @include ribbon-font-props($ribbon-bigger-input-items-size, $ribbon-bigger-input-items-height);
        height: $ribbon-input-bigger-height;
      }

      &.e-control-wrapper {
        .e-input-group-icon {
          @include ribbon-font-props($ribbon-bigger-input-items-btn-size, $ribbon-bigger-input-items-btn-height);
          padding: $ribbon-bigger-input-icon-padding;

          &.e-ddl-icon {
            font-size: $ribbon-bigger-input-items-btn-size;
          }
        }
      }
    }

    .e-ribbon-item {
      padding: $ribbon-bigger-items-padding;

      .e-checkbox-wrapper {
        padding: $ribbon-bigger-items-checkbox-padding;

        .e-label {
          font-size: $ribbon-bigger-items-checkbox-size;
        }
      }
    }

    .e-ribbon-group-overflow,
    .e-ribbon-item:not(:has(.e-ribbon-template)) {
      &.e-ribbon-large-item {
        .e-btn {
          @include ribbon-font-props($ribbon-bigger-large-items-btn-size, $ribbon-bigger-large-items-btn-height);
          padding: $ribbon-bigger-large-items-btn-padding;
          max-width: $ribbon-bigger-large-items-max-width;

          .e-btn-icon:not(.e-caret) {
            @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
            font-size: $ribbon-bigger-large-items-icon-size;
            padding: $ribbon-bigger-large-items-icon-padding;
          }

          &.e-top-icon-btn {
            gap: $ribbon-bigger-large-items-btn-gap;
          }
        }

        .e-dropdown-btn .e-caret {
          @include ribbon-font-props($ribbon-bigger-dropdown-btn-size, $ribbon-bigger-dropdown-btn-line-height);
          padding: $ribbon-bigger-caret-dropdown-btn-padding;
        }
      }

      .e-split-btn-wrapper {
        .e-dropdown-btn .e-caret {
          @include ribbon-font-props($ribbon-bigger-dropdown-btn-size, $ribbon-bigger-dropdown-btn-line-height);
          padding: $ribbon-bigger-dropdown-btn-padding;
        }
      }

      &.e-ribbon-medium-item,
      &.e-ribbon-small-item {
        .e-btn {
          @include ribbon-font-props($ribbon-bigger-items-btn-size, $ribbon-bigger-items-height);

          .e-btn-icon {
            @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
            margin: $ribbon-bigger-items-margin;
            &:not(.e-caret) {
              min-width: $ribbon-bigger-items-min-width-height;
              min-height: $ribbon-bigger-items-min-width-height;
            }
          }
        }

        .e-split-colorpicker.e-split-btn {
          padding: $ribbon-bigger-colorpicker-split-btn-padding;
          border: $ribbon-bigger-colorpicker-split-btn-border;

          .e-btn-icon {
            height: $ribbon-bigger-color-picker-height;
            width: $ribbon-bigger-color-picker-width;
          }
        }

        .e-split-btn-wrapper:has(.e-icon-btn) .e-dropdown-btn .e-caret {
          padding: $ribbon-bigger-colorpicker-caret-btn-padding;
        }

        .e-dropdown-btn .e-caret {
          @include ribbon-font-props($ribbon-bigger-dropdown-caret-btn-size, $ribbon-bigger-dropdown-caret-btn-height);
          padding: $ribbon-bigger-dropdown-caret-btn-padding;
          margin: $ribbon-bigger-dropdown-caret-btn-margin;
        }
      }
    }
  }

  .e-bigger .e-ribbon-group-overflow-ddb,
  .e-bigger.e-ribbon-group-overflow-ddb {
    &.e-dropdown-popup:has(.e-ribbon-overflow-target) {
      @if ($skin-name == 'fluent2') {
        padding: $ribbon-bigger-overflow-target-padding;
      }
    }
    .e-ribbon-overflow-target {
      .e-ribbon-overflow-header {
        @include ribbon-font-props($ribbon-bigger-overflow-header-font-size, $ribbon-bigger-overflow-header-line-height);
        height: $ribbon-bigger-overflow-header-height;
      }

      .e-ribbon-item {
        &.e-ribbon-medium-item {
          height: $ribbon-bigger-medium-item-height;
        }
        &:not(:has(.e-ribbon-template)) {
          .e-dropdown-btn .e-caret {
            font-size: $ribbon-bigger-dropdown-caret-icon-size;
          }
          .e-input-group {
            height: $ribbon-bigger-combobox-height;
          }
          .e-btn .e-btn-icon {
            font-size: $ribbon-bigger-items-btn-icon-size;
            &:not(.e-caret) {
              min-width: $ribbon-bigger-overflow-items-min-width-height;
              min-height: $ribbon-bigger-overflow-items-min-width-height;
            }
            &.e-icon-left {
              margin: $ribbon-bigger-overflow-items-icon-left-margin;
            }
          }
          &:has(.e-colorpicker-wrapper) {
            align-items: center;
          }
          .e-ribbon-combobox-label,
          .e-ribbon-colorpicker-label {
            font-size: $ribbon-bigger-items-label-size;
          }

          & > .e-input-group,
          .e-ribbon-template {
            margin: $ribbon-bigger-overflow-wrapper-item-margin;
          }
        }
      }
      .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
        margin: $ribbon-bigger-checkbox-margin;
        padding: $ribbon-bigger-checkbox-padding;
      }
    }

    &:not(.e-rtl) .e-ribbon-overflow-target {
      .e-ribbon-overflow-header {
        padding: $ribbon-bigger-overflow-header-padding;
      }
      .e-ribbon-item:not(:has(.e-ribbon-template)) {
        .e-ribbon-combobox-label,
        .e-ribbon-colorpicker-label {
          margin-left: $ribbon-bigger-items-label;
        }

        &.e-ribbon-medium-item {
          .e-btn .e-btn-icon.e-icon-left {
            margin: $ribbon-bigger-button-icon-padding;
          }

          &:not(:has(.e-colorpicker-wrapper)) .e-btn {
            &:not(:has(.e-btn-icon)) {
              padding-left: $ribbon-bigger-items-label;
            }
          }
        }

        &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
        &:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
          margin-left: $ribbon-bigger-items-label;
        }

        >.e-split-btn-wrapper,
        >.e-dropdown-btn {
          .e-icons.e-caret {
            padding: $ribbon-bigger-caret-icon-padding;
          }
        }
      }
    }

    &.e-rtl .e-ribbon-overflow-target {
      .e-ribbon-overflow-header {
        padding: $ribbon-bigger-rtl-overflow-header-padding;
      }
      .e-ribbon-item:not(:has(.e-ribbon-template)) {
        .e-ribbon-combobox-label,
        .e-ribbon-colorpicker-label {
          margin-right: $ribbon-bigger-items-label;
        }

        &.e-ribbon-medium-item {
          .e-btn .e-btn-icon.e-icon-left {
            margin: $ribbon-bigger-rtl-button-icon-padding;
          }

          &:not(:has(.e-colorpicker-wrapper)) .e-btn {
            &:not(:has(.e-btn-icon)) {
              padding-right: $ribbon-bigger-items-label;
            }
          }
        }

        &:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
        &:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
          margin-right: $ribbon-bigger-items-label;
        }

        >.e-split-btn-wrapper,
        >.e-dropdown-btn {
          .e-icons.e-caret {
            padding: $ribbon-bigger-rtl-caret-icon-padding;
          }
        }
      }
      .e-ribbon-item:not(:has(.e-ribbon-template)) > .e-checkbox-wrapper {
        margin: $ribbon-bigger-rtl-checkbox-margin;
      }
    }
  }

  .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
    font-size: $ribbon-bigger-ddb-popup-font-size;
    height: $ribbon-bigger-ddb-popup-height;

    &.e-separator {
      height: $ribbon-separator-height;
    }

    .e-menu-icon {
      @include ribbon-font-props($ribbon-bigger-menu-icon-font-size, $ribbon-bigger-menu-icon-line-height);
      min-height: 20px;
      min-width: 20px;
    }
  }

  .e-bigger .e-ribbon-menu,
  .e-bigger.e-ribbon-menu {
    &.e-menu-wrapper,
    &.e-menu-container {
      ul.e-vertical,
      ul.e-ul {
        &.e-menu {
          padding: $filemenu-popup-bigger-padding;
        }
        .e-menu-item {
          &.e-blankicon {
            padding-left: $ribbon-bigger-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
          }
          .e-menu-icon {
            min-width: $ribbon-bigger-file-menu-min-width-height;
            min-height: $ribbon-bigger-file-menu-min-width-height;
          }
        }
      }
    }
  }

  .e-bigger .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-btn {
    height: $ribbon-bigger-backstage-btn-height;
    line-height: $ribbon-bigger-backstage-btn-line-height;

    .e-btn-icon {
      @include ribbon-font-props($ribbon-bigger-backstage-btn-icon-font-size, $ribbon-bigger-backstage-btn-icon-line-height);
      padding: $ribbon-bigger-backstage-btn-icon-padding;
    }
  }

  .e-bigger .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
  .e-bigger.e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical,
  .e-bigger .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul,
  .e-bigger.e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul {
    .e-menu-item:not(.e-separator) {
      height: $ribbon-bigger-backstage-menu-item-height;

      .e-menu-icon {
        @include ribbon-font-props($ribbon-bigger-backstage-menu-icon-font-size, $ribbon-bigger-backstage-menu-icon-line-height);
        margin: $ribbon-bigger-backstage-menu-icon-padding;
        min-width: $ribbon-bigger-backstage-menu-icon-font-size;
        min-height: $ribbon-bigger-backstage-menu-icon-font-size;
      }

      &.e-blankicon {
        padding-left: $ribbon-bigger-backstage-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  .e-bigger .e-dropdown-popup.e-ribbon-dropdown-group-button,
  .e-bigger.e-dropdown-popup.e-ribbon-dropdown-group-button {
    padding: $ribbon-group-button-ddb-padding;
    .e-btn-group {
      .e-btn-icon {
        @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
        margin: $ribbon-bigger-group-button-icon-margin;
        min-height: $ribbon-bigger-items-icon-size;
        min-width: $ribbon-bigger-items-icon-size;
        &.e-icon-left {
          padding: $ribbon-bigger-group-button-icon-padding;
        }
      }
      .e-btn.e-ribbon-group-button {
        font-size: $ribbon-bigger-items-btn-size;
        &:not(.e-icon-btn) {
          padding: $ribbon-bigger-group-button-padding;
        }
      }
    }
  }

  .e-bigger.e-ribbon-gallery-popup.e-popup,
  .e-bigger .e-ribbon-gallery-popup.e-popup,
  .e-bigger.e-ribbon-gallery-dropdown.e-popup,
  .e-bigger .e-ribbon-gallery-dropdown.e-popup {
    padding: $ribbon-bigger-gallery-popup-padding;
    .e-ribbon-gallery-header {
      @include ribbon-font-props($ribbon-bigger-gallery-header-fontsize, $ribbon-bigger-gallery-header-line-height);
      padding: $ribbon-bigger-gallery-header-padding;
    }
  }

  .e-bigger.e-ribbon-keytip,
  .e-bigger .e-ribbon-keytip {
    @include ribbon-font-props($ribbon-bigger-keytip-font-size, $ribbon-bigger-keytip-line-height);
    min-width: $ribbon-bigger-keytip-min-width;
    height: $ribbon-bigger-keytip-height;
  }
}

$timeline-dot-size: 16px !default;
$timeline-content-font-size: 14px !default;
$timeline-dot-font-size: 16px !default;
$timeline-opposite-content-font-size: 12px !default;
$timeline-dot-icon-size: 32px !default;

$timeline-bigger-dot-size: 20px !default;
$timeline-bigger-content-font-size: 16px !default;
$timeline-bigger-opposite-content-font-size: 14px !default;
$timeline-bigger-dot-font-size: 18px !default;
$timeline-bigger-dot-icon-size: 40px !default;
$timeline-content-font-weight: 500 !default;

$timeline-dot-color: $grey-dark-font !default;
$timeline-dot-background-color: $gray-light !default;
$timeline-dot-border-color: $grey-ad !default;
$timeline-content-font-color: $grey-dark-font !default;
$timeline-opposite-content-font-color: $grey-dark-font !default;
$timeline-item-disabled-color: $grey-lighter !default;

$timeline-dot-border: 1px !default;
$timeline-dot-radius: 50% !default;
$timeline-list-padding: 0 !default;
$timeline-inherit-height: inherit !default;
$timeline-auto-height: auto !default;
$timeline-height-none: 0 !default;

@include export-module('timeline-layout') {
  .e-timeline {
    --dot-size: #{$timeline-dot-size};
    --dot-outer-space: 0;
    --dot-border: #{$timeline-dot-border};
    --connector-size: 1px;
    --dot-radius: #{$timeline-dot-radius};
    height: $timeline-inherit-height;
    width: 100%;

    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before,
    .e-dot-item,
    .e-dot {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
      min-width: $timeline-dot-icon-size;
      min-height: $timeline-dot-icon-size;
      border-radius: var(--dot-radius);
    }

    .e-timeline-items {
      display: inline-flex;
      flex-direction: column;
      list-style: none;
      flex-wrap: nowrap;
      padding: $timeline-list-padding;
      width: inherit;
      height: $timeline-inherit-height;
    }

    .e-timeline-item {
      display: flex;
      flex-direction: row;
      position: relative;
      align-items: flex-start;
      width: $timeline-inherit-height;
      height: $timeline-inherit-height;
    }

    .e-timeline-item.e-connector::after {
      top: 0;
      bottom: 0;
      left: calc(50% - var(--connector-size));
      right: auto;
      content: '';
      position: absolute;
      z-index: 999;
      border-width: var(--connector-size);
      border-style: solid;
    }

    .e-timeline-item.e-connector.e-item-template::after {
      content: unset;
    }

    .e-dot-item {
      position: relative;
      flex: 0 1 calc(var(--dot-size) * 3);
      z-index: 1000;
    }

    .e-dot {
      min-width: var(--dot-size);
      min-height: var(--dot-size);
      border-radius: var(--dot-radius);
      outline: var(--dot-outer-space) solid;
      border: var(--dot-border) solid;
      font-size: $timeline-dot-font-size;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .e-opposite-content,
    .e-content {
      flex: 1 1 50%;
    }

    .e-opposite-content {
      font-size: $timeline-opposite-content-font-size;
    }

    .e-content {
      text-align: left;
      font-size: $timeline-content-font-size;
      @if ($skin-name == 'fluent2' or $skin-name == 'bootstrap5.3') {
        font-weight: $timeline-content-font-weight;
      }
      @else {
        font-weight: $timeline-content-font-weight;
      }
    }

    .e-timeline-item:first-child::after {
      top: 0;
    }

    .e-timeline-item:last-child::after {
      bottom: calc(var(--dot-size) * 2);
    }

    &.e-vertical {
      &.e-align-before .e-timeline-item,
      &.e-align-alternate .e-timeline-item:nth-of-type(even),
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
        flex-direction: row-reverse;
      }

      &.e-timeline-reverse .e-timeline-items {
        flex-direction: column-reverse;
      }

      &.e-align-before .e-timeline-items .e-opposite-content,
      &.e-align-after .e-timeline-items .e-content {
        text-align: left;
      }

      .e-timeline-item.e-connector:last-child::after {
        content: unset;
      }

      &.e-align-before.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-rtl.e-opposite-content-only .e-connector::after,
      &.e-align-before.e-rtl.e-content-only .e-connector::after,
      &.e-align-after.e-content-only .e-connector::after {
        left: calc((var(--dot-size) * 3) / 2 - var(--connector-size));
        right: auto;
      }

      &.e-align-before.e-content-only .e-connector::after,
      &.e-align-before.e-rtl.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-rtl.e-content-only .e-connector::after {
        right: calc((var(--dot-size) * 3) / 2 - var(--connector-size));
        left: auto;
      }

      &.e-align-after,
      &.e-align-before {
        &.e-opposite-content-only .e-content,
        &.e-content-only .e-opposite-content {
          flex: 0;
        }
      }

      &.e-timeline-reverse {
        .e-timeline-item.e-connector:first-child::after {
          content: unset;
        }

        .e-timeline-item.e-connector:last-child::after {
          content: '';
          bottom: 0;
        }
      }

      &.e-align-after .e-opposite-content,
      &.e-align-before .e-content,
      &.e-rtl.e-align-after .e-content,
      &.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content,
      &.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content,
      &.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content,
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content,
      &.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content,
      &.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content,
      &.e-rtl.e-align-before .e-opposite-content,
      &.e-align-alternate .e-opposite-content,
      &.e-align-alternatereverse .e-opposite-content {
        text-align: right;
      }

      &.e-align-before .e-opposite-content,
      &.e-align-after .e-content,
      &.e-rtl.e-align-after .e-opposite-content,
      &.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content,
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content,
      &.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content,
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content,
      &.e-rtl.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content,
      &.e-rtl.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content,
      &.e-rtl.e-align-before .e-content,
      &.e-rtl.e-align-alternate .e-opposite-content,
      &.e-rtl.e-align-alternatereverse .e-opposite-content {
        text-align: left;
      }

      .e-dot-item {
        width: calc(var(--dot-size) * 2);
      }
    }

    &.e-horizontal {
      .e-timeline-items {
        display: inline-flex;
        flex-direction: row;
      }

      .e-timeline-item {
        height: $timeline-auto-height;
        flex-direction: column;
        align-items: center;
      }

      &.e-timeline-reverse.e-rtl .e-timeline-item.e-connector::after {
        left: calc(50% - var(--connector-size));
        right: auto;
      }

      &.e-rtl .e-timeline-item.e-connector::after,
      &.e-timeline-reverse .e-timeline-item.e-connector::after {
        right: calc(50% - var(--connector-size));
        left: auto;
      }

      .e-dot-item {
        margin: var(--dot-size);
      }

      .e-opposite-content,
      .e-content {
        display: flex;
      }

      &.e-align-alternate .e-timeline-item:nth-of-type(even) .e-content,
      &.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-opposite-content,
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-content,
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-opposite-content,
      &.e-align-before .e-content {
        align-items: flex-end;
      }

      &.e-align-alternate .e-timeline-item:nth-of-type(odd) .e-content,
      &.e-align-alternate .e-timeline-item:nth-of-type(even) .e-opposite-content,
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(even) .e-content,
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) .e-opposite-content,
      &.e-align-before .e-opposite-content {
        align-items: flex-start;
      }

      &.e-align-before .e-timeline-item,
      &.e-align-alternate .e-timeline-item:nth-of-type(even),
      &.e-align-alternatereverse .e-timeline-item:nth-of-type(odd) {
        flex-direction: column-reverse;
      }

      &.e-timeline-reverse .e-timeline-items {
        flex-direction: row-reverse;
      }

      .e-timeline-item::after {
        width: 100%;
        height: $timeline-height-none;
        top: calc(50% - var(--connector-size));
      }

      .e-opposite-content {
        display: flex;
        align-items: flex-end;
        text-align: left;
        padding: $timeline-list-padding;
      }

      .e-content {
        padding: $timeline-list-padding;
      }

      .e-timeline-item:last-child::after {
        width: auto;
      }
    }
  }
}

@include export-module('timeline-theme') {
  .e-timeline {
    .e-dot {
      @if ($skin-name == 'fluent2') {
        background-color: $content-bg-color;
      }
      @else {
        background-color: $timeline-dot-border-color;
      }
      border-color: $timeline-dot-border-color;
      color: $timeline-dot-color;
      outline-color: $timeline-dot-background-color;
    }

    &.e-outline .e-dot {
      background-color: $timeline-dot-background-color;
    }

    .e-timeline-item.e-connector::after {
      border-color: $timeline-dot-border-color;
    }

    .e-content {
      color: $timeline-content-font-color;
    }

    .e-opposite-content {
      color: $timeline-opposite-content-font-color;
    }

    .e-item-disabled .e-content,
    .e-item-disabled .e-opposite-content {
      color: $timeline-item-disabled-color;
    }

    @if ($skin-name == 'fluent2') {
      .e-disabled .e-content,
      .e-disabled .e-opposite-content {
        color: $timeline-item-disabled-color;
      }
    }
  }
}

@include export-module('timeline-bigger') {
  .e-bigger.e-timeline,
  .e-bigger .e-timeline {
    .e-dot:not([class *= ' e-dot']):not([class = 'e-dot'])::before {
      min-width: $timeline-bigger-dot-icon-size;
      min-height: $timeline-bigger-dot-icon-size;
      font-size: $timeline-bigger-dot-font-size;
    }

    .e-dot-item {
      flex: 0 1 calc(var(--dot-size) * 4);
    }

    &.e-vertical {
      &.e-align-before.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-rtl.e-opposite-content-only .e-connector::after,
      &.e-align-before.e-rtl.e-content-only .e-connector::after,
      &.e-align-after.e-content-only .e-connector::after {
        left: calc((var(--dot-size) * 4) / 2 - var(--connector-size));
      }
      &.e-align-before.e-content-only .e-connector::after,
      &.e-align-before.e-rtl.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-opposite-content-only .e-connector::after,
      &.e-align-after.e-rtl.e-content-only .e-connector::after {
        right: calc((var(--dot-size) * 4) / 2 - var(--connector-size));
      }
    }

    .e-dot {
      min-width: $timeline-bigger-dot-size;
      min-height: $timeline-bigger-dot-size;
    }

    .e-opposite-content {
      font-size: $timeline-bigger-opposite-content-font-size;
    }

    .e-content {
      font-size: $timeline-bigger-content-font-size;
      @if ($skin-name == 'fluent2' or $skin-name == 'bootstrap5.3') {
        font-weight: $timeline-content-font-weight;
      }
      @else {
        font-weight: $timeline-content-font-weight;
      }
    }
  }
}

$header-font-weight: 500 !default;
$multicolumn-grid-height: 36px !default;
$multicolumn-margin-top-value: unset !default;
$footer-border-width: 0 1px 0 1px !default;
$grid-border-width: 1px !default;
$multicolumn-popup-border-radius: 4px !default;

$multicolumn-grid-small-height: 32px !default;
$multicolumn-margin-top-small-value: unset !default;

$multicolumn-grid-bigger-height: 40px !default;
$multicolumn-margin-top-bigger-value: unset !default;

$multicolumn-grid-bigger-small-height: 40px !default;
$multicolumn-margin-top-bigger-small-value: unset !default;

$footer-border-color: $grey-88 !default;
$popup-text-color: $brand-primary !default;
$grid-content-color: $grey-light-font !default;
$grid-content-hover-bg-color: $grey-44 !default;
$grid-content-active-bg-color: $brand-primary !default;
$grid-content-active-color: $brand-primary-font !default;
$grid-footer-bg-color: $gray-dark !default;
$grid-footer-color: $brand-primary !default;
$grid-group-content-header-color: $brand-primary !default;
$grid-group-content-header-bg-color: $gray-dark !default;
$grid-header-content-bg-color: transparent !default;
$grid-header-content-color: $brand-primary !default;
$altrow-bg-color: $gray-light !default;
$popup-box-shadow: 0 3px 4px -1px rgba($shadow, .05), 0 2px 11px 0 rgba($shadow, .1) !default;
$nodata-bg-color: $gray-dark !default;
$nodata-border-color: $grey-88 !default;

$padding-zero: 0;
$multicolumn-nodata-padding: 14px 16px;
$multicolumn-bigger-spin-pane-height: 26px !default;
$multicolumn-bgr-small-font-size: 14px !default;
$multicolumn-spin-pane-height: 20px !default;
$multicolumn-grid-cation-font-weight: 600 !default;
$multicolumn-font-size: 14px !default;
$multicolumn-zero-height: 0 !default;
$multicolumn-zero-border-radius: 0 !default;
$multicolumn-small-grid-footer-font-size: 12px !default;
$multicolumn-bigger-spinner-width: 26px !default;
$multicolumn-spinner-width: 20px !default;
$multicolumn-zero-width: 0 !default;
$multicolumn-bigger-popup-footer-font-size: 16px !default;

@mixin multicolumn-combobox-styles($margin-top-value) {
  &.e-multicolumn-list {
    margin-top: $margin-top-value;
  }
}

@include export-module('multicolumn-combobox-layout') {
  .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
    /* stylelint-disable declaration-no-important */
    height: $multicolumn-spin-pane-height !important;
    width: $multicolumn-spinner-width !important;
    transform-origin: 10px 10px 10px !important;
    /* stylelint-enable declaration-no-important */
  }
  .e-multicolumn-grid tr.e-groupcaptionrow {
    position: sticky;
    top: $padding-zero;
    .e-groupcaption {
      font-weight: 600;
    }
  }
  .e-multicolumn-grid th.e-grouptopleftcell.e-lastgrouptopleftcell,
  .e-multicolumn-grid th.e-grouptopleftcell.e-lastgroupleftcell,
  .e-multicolumn-grid td.e-recordplusexpand,
  .e-multicolumn-grid td.e-indentcell,
  .e-multicolumn-grid col.e-group-intent,
  .e-multicolumn-list .e-no-records + .e-grid {
    display: none;
  }
  .e-multicolumn-grid td.e-rowcell{
    cursor: default;
  }

  .e-multicolumn-grid.e-rtl .e-gridheader {
    @if ($skin-name == 'highcontrast') {
      .e-headercelldiv {
        margin: $padding-zero;
      }
    }
  }

  .e-multicolumn-grid .e-gridheader .e-headercelldiv {
    overflow: hidden;
  }
  .e-multicolumn-list .e-popup-footer {
    vertical-align: middle;
    border-style: solid;
    border-width: $footer-border-width;
    font-size: $multicolumn-font-size;
    height: $multicolumn-grid-height;
    display: flex;
    align-items: center;
    border-radius: $multicolumn-zero-border-radius $multicolumn-zero-border-radius $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
  }
  .e-multicolumn-list .e-multicolumn-list-hidden {
    border: 0;
    height: $multicolumn-zero-height;
    padding: $padding-zero;
    visibility: hidden;
    width: $multicolumn-zero-width;
  }
  .e-multicolumn-grid.e-grid {
    border-width: $grid-border-width;
    border-radius: $multicolumn-popup-border-radius;
    .e-gridcontent {
      border-radius: $multicolumn-zero-border-radius $multicolumn-zero-border-radius $multicolumn-popup-border-radius $multicolumn-popup-border-radius;
    }
  }
  .e-input-group.e-multicolumn-list {
    input[readonly].e-input {
      pointer-events: none;
    }
  }
  .e-multicolumn-list {
    &:has(.e-popup-footer) {
      .e-multicolumn-grid.e-grid {
        border-radius: $multicolumn-popup-border-radius $multicolumn-popup-border-radius $multicolumn-zero-border-radius $multicolumn-zero-border-radius;
        .e-gridcontent {
          border-radius: $multicolumn-zero-border-radius;
        }
      }
    }
    &.e-icon-anim .e-multicolumn-list-icon::before {
      transform: rotate(180deg);
    }
    &:not(.e-icon-anim) .e-multicolumn-list-icon::before {
      transform: rotate(0deg);
    }
    .e-multicolumn-list-icon::before {
      transition: transform 300ms ease;
    }
  }
  .e-multicolumn-grid .e-grid {
    overflow: auto;
  }
  .e-multicolumn-grid .e-row,
  .e-multicolumn-grid .e-emptyrow {
    height: $multicolumn-grid-height;
  }
  .e-multicolumn-group .e-sortnumber {
    display: none;
  }
  .e-popup.e-multicolumn-list {
    position: absolute;
    border-radius: $multicolumn-popup-border-radius;
    margin-top: $multicolumn-margin-top-value;
    .e-nodata {
      cursor: default;
      font-family: inherit;
      font-size: $multicolumn-font-size;
      padding: $multicolumn-nodata-padding;
      text-align: center;
      border-radius: inherit;
    }
    .e-headertext {
      font-weight: $header-font-weight;
    }
    .e-gridheader {
      position: sticky;
      top: $padding-zero;
      z-index: 1;
      border-radius: $multicolumn-popup-border-radius $multicolumn-popup-border-radius 0 0;
    }
  }

  .e-multicolumn-grid .e-headercontent {
    border-right-color: transparent; /* stylelint-disable-line declaration-no-important */
  }

  .e-multicolumn-grid.e-rtl .e-headercontent {
    border-left-color: transparent; /* stylelint-disable-line declaration-no-important */
  }

  .e-multicolumn-grid .e-content {
    overflow: auto !important; /* stylelint-disable-line declaration-no-important */
  }

  .e-multicolumn-container .e-input-group-icon.e-multicolumn-list-icon.e-ddl-disable-icon,
  .e-multicolumn-list.e-input-group .e-input-group-icon {
    position: relative;
  }

  .e-small.e-popup,
  .e-small .e-popup {
    .e-multicolumn-grid .e-headercelldiv,
    .e-multicolumn-grid .e-rowcell,
    &.e-multicolumn-list .e-popup-footer {
      font-size: $multicolumn-small-grid-footer-font-size;
    }
    &.e-multicolumn-list .e-popup-footer,
    .e-multicolumn-grid .e-row,
    .e-multicolumn-grid .e-emptyrow {
      height: $multicolumn-grid-small-height;
    }
    @include multicolumn-combobox-styles($multicolumn-margin-top-small-value);
  }
}

@include export-module('multicolumn-combobox-theme') {
  .e-multicolumn-list .e-popup-footer {
    background: $grid-footer-bg-color;
    color: $grid-footer-color;
    border-color: $footer-border-color;
  }
  .e-input-group.e-multicolumn-list:focus-visible {
    outline: transparent;
  }
  .e-popup.e-multicolumn-list {
    background: transparent;
    box-shadow: $popup-box-shadow;
    .e-nodata {
      color: $popup-text-color;
      border: 1px solid $nodata-border-color;
      background: $nodata-bg-color;
    }
    .e-multicolumn-grid .e-rowcell {
      color: $grid-content-color;
    }
    .e-multicolumn-grid .e-focused {
      box-shadow: none;
    }
    .e-gridhover .e-row:hover .e-rowcell:not(.e-active),
    .e-gridcontent .e-row-focus {
      background: $grid-content-hover-bg-color !important; /* stylelint-disable-line declaration-no-important */
    }
    .e-multicolumn-grid td.e-active {
      background: $grid-content-active-bg-color;
      color: $grid-content-active-color;
    }
    .e-groupcaption {
      color: $grid-group-content-header-color;
      background: $grid-group-content-header-bg-color;
    }
    .e-gridheader,
    .e-gridheader colgroup {
      background: $grid-header-content-bg-color;
    }
    .e-altrow {
      background: $altrow-bg-color;
    }
    .e-grid .e-headercell {
      background-color: unset;
    }
    .e-headertext,
    .e-grid th.e-headercell[aria-sort = 'ascending'] .e-headertext,
    .e-grid th.e-headercell[aria-sort = 'descending'] .e-headertext {
      color: $grid-header-content-color;
    }
  }
}

@include export-module('multicolumncombobox-bootstrap-icons') {
  .e-input-group.e-control-wrapper .e-multicolumn-list-icon::before {
    content: '\e969';
    font-family: 'e-icons';
  }
}

@mixin multicolumn-combobox-styles($margin-top-value) {
  &.e-multicolumn-list {
    margin-top: $margin-top-value;
  }
}

@include export-module('multicolumn-combobox-bigger') {
  .e-bigger.e-popup,
  .e-bigger .e-popup {
    &.e-multicolumn-list .e-popup-footer {
      font-size: $multicolumn-bigger-popup-footer-font-size;
    }
    &.e-multicolumn-list .e-popup-footer,
    .e-multicolumn-grid .e-row,
    .e-multicolumn-grid .e-emptyrow {
      height: $multicolumn-grid-bigger-height;
    }
    @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-value);
  }

  .e-bigger.e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg,
  .e-bigger .e-multicolumn-list .e-multicolumn-list-icon .e-spinner-pane .e-spinner-inner svg {
    /* stylelint-disable declaration-no-important */
    height: $multicolumn-bigger-spin-pane-height !important;
    width: $multicolumn-bigger-spinner-width !important;
    transform-origin: 13px 13px 13px !important;
    /* stylelint-enable declaration-no-important */
  }

  .e-bigger.e-small.e-popup,
  .e-bigger.e-small .e-popup,
  .e-bigger .e-small.e-popup,
  .e-small .e-bigger.e-popup {
    .e-multicolumn-grid .e-headercelldiv,
    .e-multicolumn-grid .e-rowcell,
    &.e-multicolumn-list .e-popup-footer {
      font-size: $multicolumn-bgr-small-font-size;
    }
    &.e-multicolumn-list .e-popup-footer,
    .e-multicolumn-grid .e-row,
    .e-multicolumn-grid .e-emptyrow {
      height: $multicolumn-grid-bigger-small-height;
    }
    @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-small-value);
  }
}

$ai-assist-scrollbar-width: 6px !default;
$suggesstions-list-border-radius: 2px !default;
$suggesstions-font-weight: 400 !default;
$suggesstions-list-padding: 9px 12px !default;
$suggesstions-list-margin: 0 0 12px 12px !default;
$suggesstions-list-margin-rtl: 0 12px 12px 0 !default;
$suggesstions-header-font-weight: 500 !default;
$prompt-text-padding: 6px 12px !default;
$prompt-text-min-height: 34px !default;
$response-stopper-font-weight: 500 !default;
$response-stopper-font-size: 14px !default;
$response-stopper-line-height: 18px !default;
$response-stopper-height: 28px !default;
$aiassist-header-height: 46px !default;
$aiassist-icon-height: 30px !default;
$aiassist-icon-width: 30px !default;
$send-icon-size: 14px !default;
$clear-icon-size: 12px !default;
$aiassist-bigger-header-height: 50px !default;
$aiassist-bigger-icon-height: 40px !default;
$aiassist-bigger-icon-width: 40px !default;
$send-icon-size-bigger: 16px !default;
$clear-icon-size-bigger: 14px !default;
$response-stopper-bigger-height: 32px !default;
$response-stopper-bigger-line-height: 24px !default;
$response-stopper-bigger-font-weight: 500 !default;
$response-stopper-bigger-font-size: 16px !default;
$prompt-text-bigger-padding: 8px 14px !default;
$suggesstions-header-bigger-font-weight: 500 !default;
$suggesstions-bigger-list-padding: 12px 12px !default;
$suggesstions-bigger-list-margin: 0 0 16px 16px !default;
$suggesstions-bigger-list-margin-rtl: 0 16px 16px 0 !default;
$suggesstions-bigger-font-weight: 400 !default;
$prompt-text-border-radius: 2px !default;
$assist-footer-icons-gap: 8px !default;
$assist-footer-icons-padding: 3px 8px 3px 0 !default;
$assist-footer-icons-rtl-padding: 6px 0 6px 12px !default;
$assist-textarea-min-height: 34px !default;
$assist-textarea-line-height: 22px !default;
$assist-textarea-padding: 6px 12px !default;
$assist-footer-border-radius: 2px !default;
$assist-footer-icons-gap-bigger: 8px !default;
$assist-footer-icons-padding-bigger: 4px 8px 4px 0 !default;
$assist-footer-icons-rtl-padding-bigger: 4px 0 4px 8px !default;
$assist-textarea-min-height-bigger: 40px !default;
$assist-textarea-line-height-bigger: 24px !default;
$assist-textarea-padding-bigger: 8px 14px !default;
$assist-focused-border-width: 1px !default;

$assist-footer-border-color: $grey-lighter !default;
$assist-footer-border-btm-color: $grey-lighter !default;
$assist-footer-wave-color: unset !default;
$assist-placeholder-color: $grey-f5 !default;
$assist-footer-focus-bdr-color: $brand-primary !default;
$assist-footer-border-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($brand-primary, 10%) !default;
$header-text-color: $grey-dark-font !default;
$header-active-text-color: $grey-light-font !default;
$response-text-color: $grey-light-font !default;
$scrollbar-color: $grey-ad !default;
$suggested-content-bg-color: $gray-light !default;
$suggested-content-text-color: $grey-light-font !default;
$suggesstions-header-color: $grey-light-font !default;
$icon-border-color: $gray-base !default;
$user-logo-color: $grey-light-font !default;
$user-logo-bg-color: $grey-99 !default;
$assist-header-border-bottom-color: $brand-primary !default;
$assist-view-bg-color: $gray-base !default;
$assist-view-border-color: $grey-88 !default;
$response-stopper-border-color: rgba(117, 172, 219, 1) !default;
$response-stopper-item-color: $brand-primary !default;
$response-stopper-bg-color: rgba(117, 172, 219, 1) !default;
$suggestion-li-border-color: $gray-dark !default;
$response-stopper-box-shadow: 0 2px 11px 0 rgba(0, 0, 0, .1), 0 1px 21px -3px rgba(0, 0, 0, .1) !default;
$suggestion-li-box-shadow: unset !default;
$rating-selected-bg-color: $grey-cc !default;
$send-icon-color: $grey-light-font !default;
$send-icon-disabled-color: $grey-f5 !default;
$prompt-text-border-color: $gray-base !default;
$tbar-header-btn-focus-box-shadow: none !default;
$tbar-header-hover-bg-color: $grey-dark !default;

// Attachment support related styles
$assist-attachment-icon-font-size: $send-icon-size !default;
$assist-attachment-icon-font-size-bigger: $send-icon-size-bigger !default;
$assist-file-document-icon-font-size: 24px !default;
$assist-file-document-icon-color: $grey-f5 !default;

$file-progress-bar-success-color: $brand-primary !default;
$file-progress-bar-failure-color: $brand-danger !default;
$file-progress-bar-bg-color: $grey-99 !default;

$file-failure-font-color: $msg-danger-color !default;
$file-failure-bg-color: $msg-danger-bg-color !default;
$file-failure-border: 1px solid $msg-danger-border-color !default;
$file-failure-padding: 10px 12px !default;
$file-failure-border-radius: 4px !default;
$file-failure-msg-font-size: 14px !default;
$file-failure-msg-line-height: 22px !default;
$file-failure-close-icon-font-size: 14px !default;
$file-failure-close-icon-line-height: 100% !default;
$file-failure-circle-close-icon-color: $msg-danger-color !default;
$file-failure-circle-close-icon-font-size: 16px !default;
$file-failure-circle-close-icon-margin: 8px !default;

$prompt-uploded-file-padding: 6px 12px !default;
$prompt-uploded-file-border-radius: 2px !default;
$prompt-uploded-file-bg-color: $grey-light !default;
$attached-file-border-color: $grey-88 !default;
$attached-file-bg-color: $grey-base !default;
$attached-file-details-padding: 3px 0 2px 2px !default;
$attached-file-text-font-size: 10px !default;
$attached-file-text-line-height: 15px !default;
$attached-file-size-color: $grey-f5 !default;
$attached-file-text-font-weight: 400 !default;
$attached-file-clear-icon-padding: 10px 8px 10px 4px !default;
$prompt-files-container-margin: 3px 8px !default;
$prompt-files-margin: 3px 4px !default;

$bigger-prompt-uploded-file-border-radius: 2px !default;
$bigger-prompt-uploded-file-padding: 8px 14px !default;
$bigger-prompt-files-container-margin: 6px 8px !default;
$bigger-prompt-files-margin: 0 4px 4px !default;
$bigger-attached-file-details-padding: 3px 0 2px 2px !default;
$bigger-attached-file-clear-icon-padding: 10px 8px 10px 4px !default;
$bigger-file-failure-padding: 14px 16px !default;
$bigger-file-failure-border-radius: 4px !default;
$bigger-file-failure-close-icon-font-size: 16px !default;
$bigger-file-failure-close-icon-line-height: 100% !default;
$bigger-file-failure-msg-font-size: 16px !default;
$bigger-file-failure-msg-line-height: 24px !default;
$bigger-file-failure-circle-close-icon-font-size: 18px !default;
$bigger-file-failure-circle-close-icon-margin: 12px !default;

$ai-assist-border: 1px !default;
$view-header-border-bottom: 1px !default;
$toolbar-item-border-radius: 4px !default;
$custom-view-header-padding: 0 !default;
$tbar-btn-padding: 0 !default;
$assist-btn-icon-padding: 4px 4px 4px 2px !default;
$upload-failure-alert-bottom: 8px !default;
$prompt-toolbar-margin-left: 0 !default;
$custom-view-header-margin-left: 12px !default;
$custom-view-header-margin-right: 12px !default;
$assist-view-header-margin-left: 0 !default;
$toolbar-rtl-margin-left: 8px !default;
$toolbar-rtl-margin-right: 0 !default;
$toolbar-items-last-child-margin-left: 8px !default;
$tbar-btn-text-padding: 6px 2px !default;
$output-container-margin: 5px 0 !default;
$prompt-icon-margin: 0 0 0 8px !default;
$output-icon-margin: 0 4px 0 8px !default;
$loading-footer-padding: 2px 0 0 6px !default;
$content-container-margin-top: 16px !default;
$content-container-font-size: 14px !default;
$prompt-text-line-height: 20px !default;
$prompt-container-gap: 2px !default;
$prompt-container-margin-bottom: 5px !default;
$suggestion-header-font-size: 14px !default;
$suggestion-header-margin: 0 2px 8px 8px !default;
$suggestion-item-template-padding: 0 !default;
$suggestion-item-ul-padding: 0 !default;
$suggestion-item-ul-margin: 0 !default;
$suggestion-li-line-height: 20px !default;
$content-body-line-height: 25px !default;
$content-body-border-radius: 4px !default;
$content-body-font-weight: 600 !default;
$h4-h5-line-height: 28px !default;
$h1-font-size: 32px !default;
$h1-line-height: 40px !default;
$h2-font-size: 28px !default;
$h2-line-height: 36px !default;
$h3-font-size: 24px !default;
$h3-line-height: 32px !default;
$h4-font-size: 22px !default;
$h5-font-size: 20px !default;
$h6-font-size: 16px !default;
$h6-line-height: 20px !default;
$content-body-li-line-height: 24.5px !default;
$content-body-pre-padding: 12px 0 12px 12px !default;
$content-body-tr-padding: 6px !default;
$content-body-blockquote-padding-left: 7px !default;
$content-body-svg-img-padding: 12px !default;
$content-body-svg-img-border-radius: 4px !default;
$content-body-code-border-radius: 4px !default;
$content-body-code-padding: 0 4px !default;
$webkit-scrollbar-border-radius: 10px !default;
$footer-margin: 0 auto 24px !default;
$assist-textarea-border-radius: 10px !default;
$assist-textarea-font-size: 14px !default;
$banner-view-margin-left: 10px !default;
$stop-response-border-radius: 100px !default;
$stop-response-border: 1px solid !default;
$stop-response-margin-bottom: 16px !default;
$custom-view-header-btn-icon-padding: 4px 2px 4px 4px !default;
$rtl-suggestion-header-margin: 0 8px 8px 2px !default;
$content-body-padding-left: unset !default;
$content-body-border-left: unset !default;
$content-body-padding-right: 7px !default;
$rtl-loading-footer-padding: 2px 6px 0 0 !default;
$rtl-prompt-icon-margin: 0 8px 0 0 !default;
$rtl-output-icon-margin: 0 8px 0 4px !default;
$rtl-footer-icons-wrapper-padding: unset !default;
$uploaded-file-item-bottom: 4px !default;
$uploaded-file-item-border-radius: 4px !default;
$file-details-padding-right: 12px !default;
$file-format-icon-padding: 3px !default;
$assist-clear-icon-border-radius: 6px !default;
$assist-progress-bar-border-radius: 4px !default;
$prompt-content-padding-right: 8px !default;
$rtl-prompt-content-padding: 0 0 0 8px !default;
$view-container-margin: 0 auto 10px auto !default;
$prompt-output-icon-border-radius: 50% !default;

$bigger-view-header-padding: 0 !default;
$bigger-tbar-btn-padding: 0 !default;
$bigger-btn-icon-padding: 4px 4px 4px 2px !default;
$bigger-loading-footer-padding: 6px 0 0 6px !default;
$bigger-prompt-text-line-height: 22px !default;
$bigger-content-container-font-size: 16px !default;
$bigger-suggestion-header-font-size: 16px !default;
$bigger-suggestion-header-margin-bottom: 15px !default;
$bigger-suggestion-item-padding: 0 !default;
$bigger-suggestion-li-line-height: 22px !default;
$bigger-assist-textarea-font-size: 16px !default;
$bigger-stop-response-margin-bottom: 20px !default;
$bigger-rtl-btn-icon-padding: 4px 2px 4px 4px !default;
$bigger-rtl-loading-footer-padding: 6px 6px 0 0 !default;
$bigger-footer-icons-wrapper-right: unset !default;
$bigger-assist-file-details-right: 15px !default;

$suggestion-li-border: 1px !default;
$prompt-text-border: 1px !default;
$assist-view-border: 1px !default;
$assist-blockquote-border: 4px !default;
$assist-footer-border: 1px !default;
$suggested-content-border: 4px !default;
$attached-file-border: 1px !default;
$assist-view-toolbar-border: unset !default;
$prompt-output-icon-border: 1px !default;

$toolbar-item-height: 3px !default;
$prompt-text-height: fit-content !default;
$content-body-svg-img-height: inherit !default;
$assistview-content-section-height: 100% !default;
$assist-textarea-height: 100% !default;
$assist-progress-fill-height: 3px !default;
$toolbar-left-height: calc($aiassist-header-height - 1px) !default;
$view-content-height: calc(100% - $aiassist-header-height) !default;
$toolbar-left-bigger-height: calc($aiassist-bigger-header-height - 1px) !default;
$view-content-bigger-height: calc(100% - $aiassist-bigger-header-height) !default;
$ai-assist-scrollbar-height: 6px !default;
$bigger-suggestion-li-height: 40px !default;
$suggestion-li-height: 36px !default;
$prompt-uploaded-files-gap: 6px 12px !default;
$assist-drop-area-gap: 6px !default;
$assist-multirow-footer-icons-padding: 3px 8px !default;
$assist-multirow-footer-icons-padding-bigger: 4px 8px !default;
$prompt-uploaded-files-gap-bigger: 8px 14px !default;
$response-stopper-width: 28px !default;
$response-stopper-bigger-width: 32px !default;
$assist-stop-padding: 8px !default;
$assist-stop-padding-bigger: 9px !default;
$assist-footer-tbar-min-height: 28px !default;
$assist-footer-tbar-min-height-bigger: 32px !default;

@include export-module('aiassistview-layout') {
  .e-aiassistview {
    border: $ai-assist-border solid;
    position: relative;
    &.e-assist-tab-header-disabled .e-view-header {
      display: none;
    }
    .e-view-header {
      height: $aiassist-header-height;
      border-bottom: $view-header-border-bottom solid;
      .e-toolbar-item {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          height: $toolbar-item-height;
          width: 100%;
          border-radius: $toolbar-item-border-radius;
        }
        &.e-assist-view-header,
        &.e-custom-view-header {
          @if ($skin-name == 'highcontrast') {
            // To apply box-shadow styling during keyboard navigation
            padding: $custom-view-header-padding;
          }
          @else {
            padding: $custom-view-header-padding;
          }
          .e-tbar-btn {
            padding: $tbar-btn-padding;
            .e-btn-icon {
              padding: $assist-btn-icon-padding;
            }
          }
        }
        &.e-active .e-btn {
          cursor: pointer;
        }
      }
      .e-toolbar .e-toolbar-items .e-toolbar-left {
        height: $toolbar-left-height;
      }
    }
    .e-view-container,
    .e-footer,
    .e-upload-failure-alert {
      width: max(80%, 425px);
    }
    .e-view-container {
      margin: $view-container-margin;
      display: flex;
      flex-direction: column;
    }
    .e-prompt-content {
      display: flex;
      align-items: center;
      max-width: 100%;
    }
    .e-prompt-toolbar {
      width: 100%;
    }
    .e-view-content {
      height: $view-content-height;
      display: flex;
      flex-direction: column;
      .e-upload-failure-alert {
        transition: opacity .5s ease-in-out;
        opacity: 0;
        padding: $file-failure-padding;
        border-radius: $file-failure-border-radius;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: space-between;
        margin-bottom: $upload-failure-alert-bottom;
        .e-assist-clear-icon {
          font-size: $file-failure-close-icon-font-size;
          line-height: $file-failure-close-icon-line-height;
          cursor: pointer;
        }
        .e-failure-message {
          font-size: $file-failure-msg-font-size;
          line-height: $file-failure-msg-line-height;
          margin-right: auto;
        }
        .e-assist-circle-close {
          font-size: $file-failure-circle-close-icon-font-size;
          margin-right: $file-failure-circle-close-icon-margin;
        }
      }
      .e-upload-failure-alert.e-show {
        opacity: 1;
      }
    }
    .e-output {
      width: inherit;
    }
    .e-prompt-toolbar {
      .e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
        margin-left: $prompt-toolbar-margin-left;
      }
    }
    .e-view-header {
      .e-toolbar .e-toolbar-items .e-toolbar-item.e-assist-view-header,
      .e-toolbar .e-toolbar-items .e-toolbar-item.e-custom-view-header {
        margin-left: $custom-view-header-margin-left;
      }
      .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item.e-assist-view-header,
      .e-toolbar.e-rtl .e-toolbar-items .e-toolbar-item.e-custom-view-header {
        margin-right: $custom-view-header-margin-right;
        margin-left: $assist-view-header-margin-left;
      }
      .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-right .e-toolbar-item:last-child {
        margin-left: $toolbar-rtl-margin-left;
        margin-right: $toolbar-rtl-margin-right;
      }
      .e-toolbar.e-rtl .e-toolbar-items:first-child > .e-toolbar-item:last-child:last-child {
        margin-left: $toolbar-items-last-child-margin-left;
      }
      .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
      .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
        padding: $tbar-btn-text-padding;
      }
    }
    .e-toolbar {
      height: 32px;
      min-height: 32px;
      .e-toolbar-item:not(.e-separator):not(.e-spacer) {
        padding: unset;
      }
      .e-toolbar-item {
        .e-tbar-btn {
          @if ($theme-name == 'FluentUI' or $skin-name == 'fabric' or $skin-name == 'material') {
            min-height: 32px;
            min-width: 32px;
          }
        }
      }
    }
    .e-prompt-container,
    .e-output-container {
      .e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
        @if ($skin-name == 'Material3' or $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind') {
          padding: 4px;
        }
      }
    }
    .e-output-container {
      width: 100%;
      display: flex;
      align-self: flex-start;
      margin: $output-container-margin;
    }
    .e-prompt-icon {
      margin: $prompt-icon-margin;
      min-height: $aiassist-icon-height;
    }
    .e-output-icon {
      height: $aiassist-icon-height;
      margin: $output-icon-margin;
    }
    .e-prompt-icon,
    .e-output-icon {
      border-radius: $prompt-output-icon-border-radius;
      min-width: $aiassist-icon-width;
    }
    .e-loading-body,
    .e-content-body,
    .e-loading-footer {
      padding: $loading-footer-padding;
    }
    .e-content-container {
      margin-top: $content-container-margin-top;
      position: relative;
      font-size: $content-container-font-size;
      justify-content: space-between;
      flex: 1 1 auto;
    }
    .e-scroll-down-btn {
      position: sticky;
      top: 0;
      align-self: flex-end;
    }
    .e-prompt-text {
      white-space: pre-wrap;
      height: $prompt-text-height;
      border-radius: $prompt-text-border-radius;
      padding: $prompt-text-padding;
      line-height: $prompt-text-line-height;
      min-height: $prompt-text-min-height;
      box-sizing: border-box;
    }
    .e-content-footer,
    .e-prompt-toolbar {
      opacity: 0;
    }
    .e-prompt-container {
      gap: $prompt-container-gap;
      align-self: flex-end;
      max-width: 70%;
      flex-direction: column;
      &:hover .e-assist-edit-icon {
        opacity: 1;
        cursor: pointer;
      }
    }
    .e-suggestion-header {
      font-size: $suggestion-header-font-size;
      font-weight: $suggesstions-header-font-weight;
      margin: $suggestion-header-margin;
      text-align: right;
    }
    .e-suggestions {
      width: 100%;
      &.e-suggestion-item-template li {
        padding: $suggestion-item-template-padding;
      }
      ul {
        list-style-type: none;
        padding: $suggestion-item-ul-padding;
        margin: $suggestion-item-ul-margin;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      li {
        line-height: $suggestion-li-line-height;
        font-weight: $suggesstions-font-weight;
        padding: $suggesstions-list-padding;
        margin: $suggesstions-list-margin;
        border-radius: $suggesstions-list-border-radius;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: $suggestion-li-height;
        box-sizing: border-box;
      }
    }
    .e-views {
      display: flex;
      justify-content: space-around;
      scroll-behavior: smooth;
      .e-content-body {
        line-height: $content-body-line-height;
        border-radius: $content-body-border-radius;
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-weight: $content-body-font-weight;
        }
        h4,
        h5 {
          line-height: $h4-h5-line-height;
        }
        h1 {
          font-size: $h1-font-size;
          line-height: $h1-line-height;
        }
        h2 {
          font-size: $h2-font-size;
          line-height: $h2-line-height;
        }
        h3 {
          font-size: $h3-font-size;
          line-height: $h3-line-height;
        }
        h4 {
          font-size: $h4-font-size;
        }
        h5 {
          font-size: $h5-font-size;
        }
        h6 {
          font-size: $h6-font-size;
          line-height: $h6-line-height;
        }
        li {
          line-height: $content-body-li-line-height;
        }
        pre {
          padding: $content-body-pre-padding;
          white-space: pre-wrap;
          position: relative;
          span.e-code-copy {
            position: absolute;
            right: 10px;
            cursor: pointer;
          }
        }
        tbody,
        td,
        tfoot,
        th,
        thead,
        tr {
          padding: $content-body-tr-padding;
        }
        thead,
        td {
          text-align: center;
        }
        blockquote {
          font-style: italic;
          padding-left: $content-body-blockquote-padding-left;
        }
        img,
        svg {
          height: $content-body-svg-img-height;
          width: 100%;
          padding: $content-body-svg-img-padding;
          border-radius: $content-body-svg-img-border-radius;
        }
        table {
          border-collapse: collapse;
          border-spacing: 0;
        }
      }
      .e-content-body code:not(pre code) {
        border-radius: $content-body-code-border-radius;
        padding: $content-body-code-padding;
      }
      .e-content-body > *:first-child {
        margin-block-start: 0;
        margin-block-end: .5em;
      }
      .e-content-body > *:last-child,
      .e-content-body > *:only-child {
        margin-block-start: 0;
        margin-block-end: 0;
      }
    }
    .e-view-container .e-fab-hidden {
      display: none;
    }
    .e-views,
    .e-custom-view,
    .e-assistview-content-section {
      height: $assistview-content-section-height;
      overflow: scroll;
      &::-webkit-scrollbar {
        width: $ai-assist-scrollbar-width;
        height: $ai-assist-scrollbar-height;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: $webkit-scrollbar-border-radius;
      }
      &::-webkit-scrollbar-corner {
        background-color: transparent;
      }
    }

    /* ======== Asssit Footer Styles ======== */
    .e-footer {
      position: relative;
      margin: $footer-margin;
      .e-assist-textarea::-webkit-scrollbar-thumb {
        border-radius: $assist-textarea-border-radius;
      }
      .e-assist-textarea::-webkit-scrollbar {
        width: 4px;
      }
      .hide-scrollbar .e-assist-textarea {
        scrollbar-width: none;
      }

      &.e-footer-expanded.e-toolbar-inline {
        .e-footer-icons-wrapper {
          .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
            position: absolute;
          }
        }
      }

      &:not(.e-footer-expanded).e-toolbar-inline {
        .e-footer-icons-wrapper {
          width: fit-content;
          .e-toolbar-items.e-tbar-pos {
            .e-toolbar-right {
              position: unset;
            }
            .e-toolbar-center {
              position: absolute;
            }
          }

          .e-toolbar[style *= 'width:'][style *= 'px'] {
            & .e-toolbar[style *= 'px'] {
              .e-toolbar-items.e-tbar-pos {
                .e-toolbar-right {
                  position: absolute;
                }
                .e-toolbar-center {
                  position: unset;
                }
              }
            }
          }
        }
      }
      .e-footer-icons-wrapper {
        display: flex;
        align-items: center;
        gap: $assist-footer-icons-gap;
        padding: $assist-footer-icons-padding;
        .e-toolbar {
          width: 100%;
          min-height: $assist-footer-tbar-min-height;
          .e-tbar-btn {
            min-height: $assist-footer-tbar-min-height;
            min-width: $assist-footer-tbar-min-height;
            cursor: default;
            &:focus {
              padding: 0;
            }
          }
          .e-tbar-btn:has(.e-assist-stop) {
            max-width: $assist-footer-tbar-min-height;
            .e-btn-icon {
              min-width: $assist-footer-tbar-min-height;
            }
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $assist-footer-tbar-min-height;
            .e-tbar-btn:focus-visible .e-icons:not(.disabled) {
              outline: 1px solid;
              padding: 4px;
            }
          }
        }
        .e-assist-attachment-icon {
          font-size: $assist-attachment-icon-font-size;
        }
        .e-icons {
          cursor: pointer;
        }
      }
      .e-assist-textarea {
        height: $assist-textarea-height;
        width: 100%;
        min-height: $assist-textarea-min-height;
        outline: none;
        overflow-y: auto;
        max-height: 280px;
        line-height: $assist-textarea-line-height;
        padding: $assist-textarea-padding;
        font-size: $assist-textarea-font-size;
      }
      .e-assist-textarea[placeholder]:empty::before {
        content: attr(placeholder);
        cursor: text;
      }
      &.e-footer-focus-wave-effect {
        @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
          &::before,
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            height: $focus-wave-effect-height;
            width: 0;
            transition: width .2s ease-out;
          }
          &::before {
            left: 50%;
          }
          &::after {
            right: 50%;
          }
          &.e-footer-focused::before {
            width: 50%;
          }
          &.e-footer-focused::after {
            width: 50%;
          }
        }
      }

      &:not(.e-footer-template) {
        display: flex;
        flex-direction: column;
        border-radius: $assist-footer-border-radius;
        @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
          border-top-right-radius: $footer-border-top-right-radius;
          border-top-left-radius: $footer-border-top-left-radius;
        }
        &.e-footer-expanded .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $assist-multirow-footer-icons-padding;
            justify-content: end;
          }
          .e-assist-textarea {
            width: 100%;
          }
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $assist-multirow-footer-icons-padding;
            .e-toolbar{
              width: 100%;
              .e-toolbar-left .e-toolbar-item:first-child {
                margin-left: unset;
              }
            }
          }
        }
        .e-assist-send {
          font-size: $send-icon-size;
        }
        .e-assist-clear-icon {
          font-size: $clear-icon-size;
        }
        .e-assist-send.disabled {
          pointer-events: none;
          opacity: .5;
          cursor: not-allowed;
        }
        .e-assist-send.enabled {
          pointer-events: auto;
          opacity: 1;
          cursor: pointer;
        }
        .e-textarea-icons-wrapper {
          display: flex;
          flex-direction: row;
        }
      }
      .e-hidden-textarea {
        display: none;
      }
    }
    .e-banner-view {
      margin-left: $banner-view-margin-left;
    }
    .e-header-icon,
    .e-prompt-icon,
    .e-output-icon {
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .content-header,
    .e-content-container,
    .e-output,
    .e-content {
      display: flex;
      flex-direction: column;
    }
    .e-footer .e-assist-stop {
      height: $response-stopper-height;
      width: $response-stopper-width;
      padding: 6px;
      line-height: $response-stopper-line-height;
      font-weight: $response-stopper-font-weight;
      font-size: $response-stopper-font-size;
      opacity: 1;
      pointer-events: auto;
      cursor: pointer;
      justify-content: center;
      border-radius: $stop-response-border-radius;
      border: $stop-response-border;
    }
    .e-prompt-icon,
    .e-output-icon,
    .e-assist-edit-icon {
      justify-content: center;
    }
    .e-prompt-icon,
    .e-output-icon,
    .e-assist-edit-icon,
    .e-prompt-container,
    .e-assist-stop {
      display: flex;
      align-items: center;
    }
    .e-content-footer.e-assist-toolbar-active,
    .e-output-container:hover .e-content-footer,
    .e-output-container:has(:focus-visible) .e-content-footer,
    .e-prompt-container:hover .e-prompt-toolbar,
    .e-prompt-container:has(:focus-visible) .e-prompt-toolbar {
      opacity: 1;
      transition: opacity .3s;
    }
    .e-views .e-content-body:focus-visible,
    .e-views .e-content-container .e-prompt-text:focus-visible,
    .e-views .e-suggestions li:focus-visible,
    .e-footer:not(.e-footer-template) .e-assist-send:not(.disabled):focus-visible,
    .e-assist-stop:focus-visible {
      outline: 1px solid;
    }
    &.e-rtl {
      .e-view-header .e-toolbar-item {
        &.e-assist-view-header,
        &.e-custom-view-header {
          .e-tbar-btn .e-btn-icon {
            padding: $custom-view-header-btn-icon-padding;
          }
        }
      }
      .e-suggestion-header {
        text-align: left;
        margin: $rtl-suggestion-header-margin;
      }
      .e-suggestions {
        li {
          margin: $suggesstions-list-margin-rtl;
        }
      }
      .e-views {
        .e-content-body {
          blockquote {
            padding-left: $content-body-padding-left;
            border-left: $content-body-border-left;
            padding-right: $content-body-padding-right;
          }
          pre {
            span.e-code-copy {
              right: unset;
              left: 10px;
            }
          }
        }
      }
      .e-loading-body,
      .e-content-body,
      .e-loading-footer {
        padding: $rtl-loading-footer-padding;
      }
      .e-prompt-icon {
        margin: $rtl-prompt-icon-margin;
      }
      .e-output-icon {
        margin: $rtl-output-icon-margin;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $assist-footer-icons-rtl-padding;
          padding-right: $rtl-footer-icons-wrapper-padding;
        }
      }
    }
    .e-footer-icons-wrapper .e-upload {
      display: none;
    }

    .e-prompt-content .e-prompt-uploaded-files:has(.e-assist-uploaded-file-item) {
      align-self: flex-end;
      border-radius: $prompt-uploded-file-border-radius;
      padding: $prompt-uploded-file-padding;
      margin-bottom: $uploaded-file-item-bottom;
      justify-content: flex-end;
      gap: $prompt-uploaded-files-gap;
    }

    .e-footer .e-assist-drop-area::-webkit-scrollbar,
    .e-prompt-content .e-prompt-uploaded-files::-webkit-scrollbar {
      display: none;
    }

    .e-footer .e-assist-drop-area:has(.e-assist-uploaded-file-item) {
      margin: $prompt-files-container-margin;
    }

    .e-footer .e-assist-drop-area {
      overflow-y: auto;
      overflow-x: hidden;
      white-space: normal;
      max-width: inherit;
      max-height: 225px;
      scrollbar-width: thin;
      row-gap: $assist-drop-area-gap;

      .e-assist-uploaded-file-item {
        margin: $prompt-files-margin;
      }
    }

    .e-footer .e-assist-drop-area,
    .e-prompt-content .e-prompt-uploaded-files {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .e-assist-uploaded-file-item {
        display: flex;
        flex-direction: row;
        border-radius: $uploaded-file-item-border-radius;
        position: relative;
        align-items: center;
        width: 144px;
        max-width: 144px;
        min-width: 144px;
        &:not(:has(.e-assist-clear-icon)) .e-assist-file-details {
          padding-right: $file-details-padding-right;
        }
      }

      .e-assist-file-format-icon {
        padding: $file-format-icon-padding;
        font-size: $assist-file-document-icon-font-size;
      }
      .e-assist-file-details {
        display: flex;
        flex-direction: column;
        padding: $attached-file-details-padding;
        min-width: 0;
        flex: 1 1 auto;
      }

      .e-assist-file-name {
        font-weight: $attached-file-text-font-weight;
      }

      .e-assist-file-name,
      .e-assist-file-size {
        font-size: $attached-file-text-font-size;
        line-height: $attached-file-text-line-height;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-assist-clear-icon {
        cursor: pointer;
        font-weight: bold;
        padding: $attached-file-clear-icon-padding;
        border-radius: $assist-clear-icon-border-radius;
      }

      .e-assist-progress-bar {
        width: 100%;
        border-radius: $assist-progress-bar-border-radius;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .e-assist-progress-fill {
        height: $assist-progress-fill-height;
        width: 0;
        transition: width .3s;
      }
    }
    .e-prompt-details:has(.e-prompt-uploaded-files) {
      display: flex;
      flex-direction: column;
      .e-prompt-text {
        align-self: flex-end;
      }
    }
    .e-prompt-content:has(.e-prompt-uploaded-files):not(:has(.e-prompt-text)) {
      +.e-prompt-toolbar {
        display: none;
      }
    }

    .e-toolbar-item .e-assistview-speech-to-text {
      border: none;
      box-shadow: none;
    }

    .e-toolbar-item .e-assistview-speech-to-text:hover,
    .e-toolbar-item .e-assistview-speech-to-text:focus,
    .e-toolbar-item .e-assistview-speech-to-text:active {
      background: none;
      box-shadow: none;
    }
  }

  @media (max-width: 760px) {
    .e-aiassistview {
      .e-view-container {
        width: 100%;
      }
      .e-footer,
      .e-upload-failure-alert {
        width: calc(100% - 10px); //for margin space
      }
      .e-view-container .e-suggestions,
      .e-prompt-content {
        padding-right: $prompt-content-padding-right;
      }
      &.e-rtl {
        .e-view-container .e-suggestions,
        .e-prompt-content {
          padding: $rtl-prompt-content-padding;
        }
      }
    }
  }
}

@include export-module('e-aiassistview-theme') {
  .e-aiassistview {
    border-color: $assist-view-border-color;
    background-color: $assist-view-bg-color;
    .e-view-content {
      color: $response-text-color;
    }
    .e-view-header {
      border-bottom-color: $assist-view-border-color;
      .e-toolbar-item::after {
        background-color: transparent;
      }
      .e-toolbar,
      .e-toolbar-items,
      .e-tbar-btn {
        background: $assist-view-bg-color;
      }
      .e-toolbar-item:not(.e-custom-view-header),
      .e-toolbar-item:not(.e-assist-view-header) {
        .e-tbar-btn {
          &:focus {
            @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
              box-shadow: none;
            }
            &:not(:focus-visible) {
              .e-icons {
                @if ($skin-name == 'fluent2') {
                  color: $toolbar-icon-color;
                }
                @if ($skin-name == 'tailwind3') {
                  color: $secondary-text-color-hover;
                }
              }
            }
          }
          &:focus-visible {
            @if ($skin-name == 'fluent2' or $skin-name == 'tailwind3') {
              background: $content-bg-color-alt1;
            }
            @if ($skin-name == 'fluent2') {
              box-shadow: $keyboard-focus;
            }
            @if ($skin-name == 'tailwind3') {
              box-shadow: $shadow-focus-ring2;
            }
          }
        }
      }
      .e-toolbar-item.e-active::after {
        background-color: $assist-header-border-bottom-color;
      }
      .e-toolbar-item.e-custom-view-header,
      .e-toolbar-item.e-assist-view-header {
        .e-btn:active,
        .e-btn:hover,
        .e-btn:focus {
          background: transparent;
          border-color: transparent;
        }
        .e-tbar-btn {
          background: transparent;
          &:focus {
            box-shadow: none;
          }
          &:focus-visible {
            box-shadow: $tbar-header-btn-focus-box-shadow;
            @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
              background: $tbar-header-hover-bg-color;
            }
          }
        }
      }
    }
    .e-suggestion-header {
      color: $suggesstions-header-color;
    }
    .e-suggestions {
      li {
        color: $suggested-content-text-color;
        box-shadow: $suggestion-li-box-shadow;
        @if ($skin-name == 'bootstrap5.3') {
          border: $suggestion-li-border;
        }
        @else {
          border: $suggestion-li-border solid $suggestion-li-border-color;
        }
      }
    }
    .e-prompt-icon,
    .e-output-icon {
      border: $prompt-output-icon-border solid $icon-border-color;
      color: $user-logo-color;
      @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
        background: $user-logo-bg-color;
      }
      @else {
        background-color: $user-logo-bg-color;
      }
    }
    .e-prompt-text {
      background: $suggested-content-bg-color;
      color: $suggested-content-text-color;
      @if ($skin-name == 'bootstrap5.3') {
        border: $prompt-text-border;
      }
      @else {
        border: $prompt-text-border solid $prompt-text-border-color;
      }
    }
    .e-views {
      .e-content-body {
        color: $response-text-color;
        a {
          @if $theme-name == 'tailwind' or $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'fluent2' or $theme-name == 'FluentUI' or $theme-name == 'fabric' or $theme-name == 'bootstrap5' or $theme-name == 'bootstrap4' or $theme-name == 'bootstrap' or $theme-name == 'bootstrap5.3' {
            color: rgba(10, 83, 172, 1);
          }
          @if $theme-name == 'tailwind-dark' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fabric-dark' or $theme-name == 'bootstrap-dark' or $theme-name == 'highcontrast' or $theme-name == 'bootstrap5.3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' {
            color: rgba(124, 180, 249, 1);
          }
        }
        pre {
          background: $suggested-content-bg-color;
          code {
            color: $response-text-color;
            background: transparent;
          }
          span.e-code-copy {
            color: $response-text-color;
          }
        }
        tbody,
        td,
        tfoot,
        th,
        thead,
        tr {
          border: $assist-view-border solid $assist-view-border-color;
        }
        blockquote {
          border-left: $assist-blockquote-border solid $suggested-content-bg-color;
        }
        img,
        svg {
          background-color: $suggested-content-bg-color;
        }
      }
      .e-content-body code:not(pre code) {
        @if $theme-name == 'tailwind' or $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'fluent2' or $theme-name == 'FluentUI' or $theme-name == 'fabric' or $theme-name == 'bootstrap5' or $theme-name == 'bootstrap4' or $theme-name == 'bootstrap' or $theme-name == 'bootstrap5.3' {
          background: rgba(255, 241, 241, 1);
          color: rgba(134, 18, 18, 1);
        }
        @if $theme-name == 'tailwind-dark' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' or $theme-name == 'fluentui-dark' or $theme-name == 'fabric-dark' or $theme-name == 'bootstrap-dark' or $theme-name == 'highcontrast' or $theme-name == 'bootstrap5.3-dark' or $theme-name == 'fluent2-dark' or $theme-name == 'fluent2-highcontrast' {
          background: rgba(74, 44, 44, 1);
          color: rgba(255, 212, 212, 1);
        }
      }
    }
    .e-footer {
      .e-assist-stop.e-icons {
        border-color: $response-stopper-border-color;
        color: $response-stopper-item-color;
        background-color: $response-stopper-bg-color;
        @if ($theme-name == 'fluent2-highcontrast') {
          color: rgba(27, 26, 25, 1);
        }
      }
    }
    .e-views,
    .e-custom-view,
    .e-assistview-content-section {
      &::-webkit-scrollbar-thumb {
        background: $scrollbar-color;
      }
    }
    .e-footer {
      .e-assist-textarea::-webkit-scrollbar-thumb {
        background: $scrollbar-color;
      }
      @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
        &.e-footer-focus-wave-effect::before,
        &.e-footer-focus-wave-effect::after {
          background-color: $assist-footer-wave-color;
        }
      }
      .e-assist-textarea[placeholder]:empty::before {
        color: $assist-placeholder-color;
      }
      &:not(.e-footer-template) {
        border: $assist-footer-border solid $assist-footer-border-color;
        border-bottom-color: $assist-footer-border-btm-color;
        &.e-footer-focused {
          border: $assist-focused-border-width solid $assist-footer-focus-bdr-color;
          @if ($skin-name == 'fluent2') {
            border-bottom-color: $assist-footer-border-btm-color;
          }
          box-shadow: $assist-footer-border-shadow;
        }
        .e-assist-send,
        .e-assist-clear-icon:not(.e-assist-clear-icon-hide) {
          color: $send-icon-color;
          &.disabled {
            color: $send-icon-disabled-color;
          }
        }
      }
      .e-footer-icons-wrapper {
        .e-toolbar-item::after {
          background-color: transparent;
        }
        .e-toolbar,
        .e-toolbar-items,
        .e-tbar-btn {
          background: transparent;
          border: none;
          box-shadow: none;
        }
        .e-toolbar .e-toolbar-item {
          .e-tbar-btn {
            &:focus {
              box-shadow: none;
            }
            &:hover:not(:focus-visible),
            &:active {
              background: transparent;
              box-shadow: none;
              .e-icons {
                color: $send-icon-color;
              }
              .e-icons.disabled {
                color: $send-icon-disabled-color;
              }
              .e-assist-stop {
                color: $response-stopper-item-color;
                @if ($theme-name == 'fluent2-highcontrast') {
                  color: rgba(27, 26, 25, 1);
                }
              }
            }
            &:focus:not(:focus-visible) {
              outline: none;
              box-shadow: none;
              background: transparent;
            }
          }
        }
      }
    }
    .e-view-header {
      .e-toolbar {
        .e-assist-view-header,
        .e-custom-view-header {
          &.e-toolbar-item .e-tbar-btn:hover:active .e-icons,
          &.e-toolbar-item .e-tbar-btn:hover .e-icons,
          &.e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text,
          &.e-toolbar-item .e-tbar-btn:hover:active .e-tbar-btn-text {
            color: $header-text-color;
          }
        }
      }
    }
    .e-view-header {
      .e-toolbar .e-toolbar-item.e-active .e-tbar-btn:hover:active .e-icons,
      .e-toolbar .e-toolbar-item.e-active .e-tbar-btn:hover .e-icons,
      .e-toolbar .e-toolbar-item.e-active .e-tbar-btn:hover .e-tbar-btn-text,
      .e-toolbar .e-toolbar-item.e-active .e-tbar-btn:hover:active .e-tbar-btn-text,
      .e-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-icons,
      .e-toolbar .e-toolbar-item.e-active .e-tbar-btn .e-tbar-btn-text {
        color: $header-active-text-color;
      }
    }
    &.e-rtl {
      .e-views {
        .e-content-body {
          blockquote {
            border-right: $suggested-content-border solid $suggested-content-bg-color;
          }
        }
      }
    }

    .e-view-content {
      .e-upload-failure-alert {
        background-color: $file-failure-bg-color;
        border: $file-failure-border;
        .e-failure-message {
          color: $file-failure-font-color;
        }
        .e-assist-circle-close {
          color: $file-failure-circle-close-icon-color;
        }
      }
    }

    .e-prompt-content .e-prompt-uploaded-files:has(.e-assist-uploaded-file-item) {
      background-color: $prompt-uploded-file-bg-color;
    }

    .e-footer .e-assist-drop-area,
    .e-prompt-content .e-prompt-uploaded-files {
      .e-assist-uploaded-file-item {
        border: $attached-file-border solid $attached-file-border-color;
        background-color: $attached-file-bg-color;
      }

      .e-assist-file-format-icon {
        color: $assist-file-document-icon-color;
      }

      .e-assist-file-size {
        color: $attached-file-size-color;
      }
    }

    .e-footer .e-assist-drop-area {
      .e-assist-progress-bar {
        background-color: $file-progress-bar-bg-color;
      }
      .e-assist-progress-fill {
        background-color: $file-progress-bar-success-color;
      }
      .e-assist-progress-fill.e-assist-upload-failed {
        background-color: $file-progress-bar-failure-color;
      }
    }
  }
  .e-prompt-toolbar,
  .e-content-footer {
    .e-toolbar,
    .e-toolbar .e-toolbar-items,
    .e-tbar-btn:not(:hover),
    .e-tbar-btn:not(:active),
    .e-tbar-btn:not(:focus) {
      background: $assist-view-bg-color;
    }
    .e-toolbar {
      box-shadow: unset;
      border: $assist-view-toolbar-border;
    }
  }
  .e-aiassist-view-toolbar-item .e-tbar-btn:not(:hover),
  .e-aiassist-view-toolbar-item .e-tbar-btn:not(:active),
  .e-aiassist-view-toolbar-item .e-tbar-btn:not(:focus) {
    background: transparent;
  }
}

@include export-module('aiassist-bootstrap-icons') {
  .e-assist-send::before {
    content: '\e816';
  }
  .e-assistview-icon::before {
    content: '\e157';
  }
  .e-assist-user::before {
    content: '\e15d';
  }
  .e-assist-like::before {
    content: '\e159';
  }
  .e-assist-dislike::before {
    content: '\e15a';
  }
  .e-assist-copy::before {
    content: '\e33d';
  }
  .e-assist-edit::before {
    content: '\e338';
  }
  .e-assist-check::before {
    content: '\e97d';
  }
  .e-assist-stop::before {
    content: '\e16e';
  }
  .e-assist-like-filled::before {
    content: '\e16c';
  }
  .e-assist-dislike-filled::before {
    content: '\e16d';
  }
  .e-assist-clear-icon::before {
    content: '\e96c';
  }
  .e-assist-attachment-icon::before {
    content: '\e1a0';
  }
  .e-assist-file-format-icon::before {
    content: '\e1a1';
  }
  .e-assist-circle-close::before {
    content: '\e7e9';
  }
  .e-assist-scroll-down::before {
    content: '\e304';
  }
}

@include export-module('aiassistview-bigger') {
  .e-bigger.e-aiassistview,
  .e-bigger .e-aiassistview {
    .e-view-header {
      height: $aiassist-bigger-header-height;
      .e-toolbar {
        .e-toolbar-items {
          .e-toolbar-left {
            height: $toolbar-left-bigger-height;
          }
          .e-toolbar-item {
            &.e-assist-view-header,
            &.e-custom-view-header {
              @if ($skin-name == 'highcontrast') {
                // To apply box-shadow styling during keyboard navigation
                padding: $bigger-view-header-padding;
              }
              @else {
                padding: $bigger-view-header-padding;
              }
              .e-tbar-btn {
                padding: $bigger-tbar-btn-padding;
                .e-btn-icon {
                  padding: $bigger-btn-icon-padding;
                }
              }
            }
          }
        }
      }
    }

    .e-view-content {
      height: $view-content-bigger-height;
    }
    .e-prompt-icon {
      min-height: $aiassist-bigger-icon-height;
    }
    .e-output-icon {
      height: $aiassist-bigger-icon-height;
    }
    .e-prompt-icon,
    .e-output-icon {
      min-width: $aiassist-bigger-icon-width;
    }
    .e-loading-body,
    .e-content-body,
    .e-loading-footer {
      padding: $bigger-loading-footer-padding;
    }
    .e-prompt-text {
      padding: $prompt-text-bigger-padding;
      line-height: $bigger-prompt-text-line-height;
      min-height: 40px;
      box-sizing: border-box;
    }
    .e-content-container {
      font-size: $bigger-content-container-font-size;
    }
    .e-suggestion-header {
      font-size: $bigger-suggestion-header-font-size;
      font-weight: $suggesstions-header-bigger-font-weight;
      margin-bottom: $bigger-suggestion-header-margin-bottom;
    }
    .e-suggestions {
      &.e-suggestion-item-template ul li {
        padding: $bigger-suggestion-item-padding;
      }
      li {
        line-height: $bigger-suggestion-li-line-height;
        font-weight: $suggesstions-bigger-font-weight;
        padding: $suggesstions-bigger-list-padding;
        margin: $suggesstions-bigger-list-margin;
        height: $bigger-suggestion-li-height;
        box-sizing: border-box;
      }
    }
    .e-footer {
      .e-assist-stop {
        height: $response-stopper-bigger-height;
        width: $response-stopper-bigger-width;
        min-height: $response-stopper-bigger-height;
        padding: $assist-stop-padding-bigger;
        box-sizing: border-box;
        line-height: $response-stopper-bigger-line-height;
        font-weight: $response-stopper-bigger-font-weight;
        font-size: $response-stopper-bigger-font-size;
      }
      &:not(.e-footer-template) {
        .e-assist-send {
          font-size: $send-icon-size-bigger;
        }
        .e-assist-clear-icon:not(.e-assist-clear-icon-hide) {
          font-size: $clear-icon-size-bigger;
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          .e-footer-icons-wrapper {
            padding: $assist-multirow-footer-icons-padding-bigger;
          }
        }
      }
      .e-footer-icons-wrapper {
        gap: $assist-footer-icons-gap-bigger;
        padding: $assist-footer-icons-padding-bigger;
        .e-toolbar {
          height: $assist-footer-tbar-min-height-bigger;
          min-height: $assist-footer-tbar-min-height-bigger;
          .e-tbar-btn {
            min-height: $assist-footer-tbar-min-height-bigger;
            min-width: $assist-footer-tbar-min-height-bigger;
            max-width: $assist-footer-tbar-min-height-bigger;
          }
          .e-tbar-btn:has(.e-assist-stop) {
            max-width: $assist-footer-tbar-min-height-bigger;
            .e-btn-icon {
              min-width: $assist-footer-tbar-min-height-bigger;
            }
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $assist-footer-tbar-min-height-bigger;
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
        }
        .e-assist-attachment-icon {
          font-size: $assist-attachment-icon-font-size-bigger;
        }
      }
      .e-assist-textarea {
        min-height: $assist-textarea-min-height-bigger;
        line-height: $assist-textarea-line-height-bigger;
        padding: $assist-textarea-padding-bigger;
        font-size: $bigger-assist-textarea-font-size;
      }
    }

    &.e-rtl {
      .e-view-header .e-toolbar-item {
        &.e-assist-view-header,
        &.e-custom-view-header {
          .e-tbar-btn .e-btn-icon {
            padding: $bigger-rtl-btn-icon-padding;
          }
        }
      }
      .e-suggestions {
        li {
          margin: $suggesstions-bigger-list-margin-rtl;
        }
      }
      .e-loading-body,
      .e-content-body,
      .e-loading-footer {
        padding: $bigger-rtl-loading-footer-padding;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $assist-footer-icons-rtl-padding-bigger;
          padding-right: $bigger-footer-icons-wrapper-right;
        }
      }
    }

    // Attachment support related styles
    .e-prompt-content .e-prompt-uploaded-files:has(.e-assist-uploaded-file-item) {
      border-radius: $bigger-prompt-uploded-file-border-radius;
      padding: $bigger-prompt-uploded-file-padding;
      gap: $prompt-uploaded-files-gap-bigger;
    }

    .e-footer .e-assist-drop-area:has(.e-assist-uploaded-file-item) {
      margin: $bigger-prompt-files-container-margin;
    }

    .e-footer .e-assist-drop-area {
      .e-assist-uploaded-file-item {
        margin: $bigger-prompt-files-margin;
      }
    }

    .e-footer .e-assist-drop-area,
    .e-prompt-content .e-prompt-uploaded-files {
      .e-assist-uploaded-file-item {
        &:not(:has(.e-assist-clear-icon)) .e-assist-file-details {
          padding-right: $bigger-assist-file-details-right;
        }
      }

      .e-assist-file-details {
        padding: $bigger-attached-file-details-padding;
      }

      .e-assist-clear-icon {
        padding: $bigger-attached-file-clear-icon-padding;
      }
    }

    .e-view-content {
      .e-upload-failure-alert {
        padding: $bigger-file-failure-padding;
        border-radius: $bigger-file-failure-border-radius;
        .e-assist-clear-icon {
          font-size: $bigger-file-failure-close-icon-font-size;
          line-height: $bigger-file-failure-close-icon-line-height;
        }
        .e-failure-message {
          font-size: $bigger-file-failure-msg-font-size;
          line-height: $bigger-file-failure-msg-line-height;
        }
        .e-assist-circle-close {
          font-size: $bigger-file-failure-circle-close-icon-font-size;
          margin-right: $bigger-file-failure-circle-close-icon-margin;
        }
      }
    }
  }
}

$user-icon-gap: 8px !default;
$chat-scrollbar-width: 6px !default;
$chat-send-icon-size: 14px !default;
$chat-header-height: 48px !default;
$suggesstions-font-weight: 400 !default;
$message-header-size: 12px !default;
$message-time-size: 10px !default;
$message-header-font-weight: 500 !default;
$chat-status-icon-size: 16px !default;
$chat-text-font-size: 14px !default;
$text-border-radius: 8px !default;
$chat-text-padding: 6px 8px !default;
$text-margin-top: 4px !default;
$message-item-bottom: 12px !default;
$timebreak-font-size: 12px !default;
$timebreak-padding: 6px 8px !default;
$timebreak-font-weight: 400 !default;
$timebreak-border-radius: 4px !default;
$typing-user-font-size: 10px !default;
$suggestion-border-radius: 4px !default;
$chat-suggesstion-line-height: 18px !default;
$chat-suggesstions-list-padding: 6px 8px !default;
$user-status-icon-font-size: 12px !default;
$user-status-icon-border-radius: 10px !default;
$user-status-icon-border-color: $brand-primary-font !default;
$user-status-icon-away-background-color: $brand-warning !default;
$user-status-icon-online-background-color: $brand-success !default;
$user-status-icon-busy-background-color: $brand-danger !default;
$user-status-icon-offline-background-color: $brand-primary-font !default;
$user-status-icon-color: $brand-primary-font !default;
$chat-footer-icons-gap: 8px !default;
$chat-footer-icons-padding: 6px 12px 6px 0 !default;
$chat-footer-icons-rtl-padding: 6px 0 6px 12px !default;
$chat-textarea-min-height: 34px !default;
$chat-textarea-line-height: 22px !default;
$chat-textarea-padding: 6px 12px !default;
$chat-footer-border-radius: 2px !default;
$chat-focused-border-width: 1px !default;

$chat-footer-icons-gap-bigger: 8px !default;
$chat-footer-icons-padding-bigger: 8px 14px 8px 0 !default;
$chat-footer-icons-rtl-padding-bigger: 8px 0 8px 14px !default;
$chat-textarea-min-height-bigger: 40px !default;
$chat-textarea-line-height-bigger: 24px !default;
$chat-textarea-padding-bigger: 8px 14px !default;
$chat-suggesstion-bigger-line-height: 22px !default;
$chat-suggesstions-li-padding-bigger: 6px 12px !default;
$typing-user-font-size-bigger: 12px !default;
$chat-text-font-size-bigger: 16px !default;
$chat-text-padding-bigger: 8px 12px !default;
$timebreak-font-size-bigger: 14px !default;
$timebreak-padding-bigger: 6px 12px !default;
$chat-status-icon-bigger-size: 18px !default;
$chat-send-icon-size-bigger: 16px !default;
$chat-bigger-header-height: 58px !default;
$message-header-bigger-size: 14px !default;
$message-time-bigger-size: 12px !default;
$user-icon-bigger-gap: 12px !default;
$user-status-icon-bigger-font-size: 14px !default;

$chat-footer-border-color: $grey-lighter !default;
$chat-footer-border-btm-color: $grey-lighter !default;
$chat-footer-wave-color: unset !default;
$chat-placeholder-color: $grey-f5 !default;
$chat-footer-focus-bdr-color: $brand-primary !default;
$chat-footer-border-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($brand-primary, 10%) !default;
$chat-bg-color: $gray-base !default;
$chat-left-text-color: $grey-light-font !default;
$chat-left-bg-color: $msg-bg-color !default;
$chat-left-text-color-hover: $grey-light-font !default;
$chat-left-bg-color-hover: $gray-light !default;
$chat-left-text-color-active: $grey-light-font !default;
$chat-left-bg-color-active: $gray-dark !default;
$chat-scrollbar-color: $grey-ad !default;
$chat-send-icon-color: $grey-light-font !default;
$chat-send-icon-disabled-color: $grey-f5 !default;
$chat-border-color: $grey-88 !default;
$chat-text-color: $grey-light-font !default;
$chat-right-text-color: $grey-light-font !default;
$chat-right-bg-color: $brand-primary-darken-25 !default;
$sender-icon-bg-color: $grey-ad !default;
$sender-icon-color: $grey-light-font !default;
$chat-suggestion-li-color: $brand-primary !default;
$chat-suggestion-li-border-color: $brand-primary !default;
$chat-header-bg-color: $brand-primary !default;
$chat-header-color: $grey-dark-font !default;
$message-header-color: $brand-primary !default;
$message-time-color: $grey-light-font !default;
$timebreak-bg-color: $grey-lighter !default;
$timebreak-color: $grey-light-font !default;
$timebreak-border-color: $grey-88 !default;
$chat-seen-color: $brand-primary !default;
$chat-error-color: $msg-danger-color-alt1 !default;
$typing-user-color: $grey-light-font !default;
$timestamp-border-color: $grey-lighter !default;
$chat-message-forward-color: unset !default;
$chat-message-forward-icon-color: unset !default;
$pinned-background-color: unset !default;
$reply-wrapper-bg-color: unset !default;
$reply-wrapper-border-bg-color: rgba(156, 163, 175, 1) !default;
$message-toolbar-border-color: $grey-88 !default;

//Mention support related variables
$mentioned-user-color: $brand-primary !default;
$mentioned-left-user-color: $brand-danger-font !default;
$mention-popup-border-color: $grey-44 !default;
$mentioned-user-font-weight: 400 !default;
$mentioned-left-user-font-weight: 500 !default;

//Attachment support related variables
$attachment-icon-color: $grey-light-font !default;
$image-preview-overlay-bg: $grey-lighter !default;
$image-preview-header-bg-color: $gray-light !default;
$image-preview-header-text-color: $grey-light-font !default;
$video-play-icon-color: $grey-light-font !default;
$video-play-background-color: $brand-primary-darken-15 !default;
$file-wrapper-bg: $gray-light !default;
$file-size-text-color: $grey-f5 !default;
$file-name-text-color: $grey-light-font !default;
$file-download-icon-color: $grey-light-font !default;
$file-wrapper-border: $grey-88 !default;
$stop-icon-color: $base-font !default;
$retry-icon-color: $base-font !default;

$file-failure-font-color: $msg-danger-color !default;
$file-failure-bg-color: $msg-danger-bg-color !default;
$file-failure-border: 1px solid $msg-danger-border-color !default;
$file-failure-border-radius: 4px !default;
$file-failure-padding: 10px 12px !default;
$file-failure-border-radius-bigger: 4px !default;
$file-failure-padding-bigger: 14px 16px !default;
$file-failure-circle-margin: 8px !default;
$file-failure-close-margin: 12px !default;
$file-failure-circle-margin-bigger: 12px !default;
$file-failure-close-margin-bigger: 16px !default;
$file-failure-circle-close-icon-color: $msg-danger-color !default;
$file-failure-close-icon-color: $grey-dark-font !default;
$file-failure-circle-icon-size: 16px !default;
$file-failure-circle-icon-height: 100% !default;
$file-failure-circle-icon-weight: 400 !default;
$file-failure-close-icon-size: 14px !default;
$file-failure-close-icon-height: 100% !default;
$file-failure-close-icon-weight: 400 !default;
$file-failure-message-size: 14px !default;
$file-failure-message-height: 22px !default;
$file-failure-message-spacing: 0 !default;
$file-failure-message-weight: 400 !default;
$file-failure-circle-icon-size-bigger: 18px !default;
$file-failure-circle-icon-height-bigger: 100% !default;
$file-failure-circle-icon-weight-bigger: 400 !default;
$file-failure-close-icon-size-bigger: 16px !default;
$file-failure-close-icon-height-bigger: 100% !default;
$file-failure-close-icon-weight-bigger: 400 !default;
$file-failure-message-size-bigger: 16px !default;
$file-failure-message-bigger-height: 24px !default;
$file-failure-message-spacing-bigger: 0 !default;
$file-failure-message-weight-bigger: 400 !default;

$preview-header-text-color: $grey-light-font !default;
$preview-file-bg-color: $gray !default;
$preview-file-border-color: $grey-99 !default;
$preview-file-text-color: $grey-light-font !default;
$preview-file-details-color: $grey-light-font !default;

$no-preview-text-size: 20px !default;
$no-preview-line-height: 30px !default;
$no-preview-letter-sapcing: 0 !default;
$no-preview-font-weight: 500 !default;
$preview-file-size-text: 16px !default;
$preview-file-size-height: 24px !default;
$preview-file-size-spacing: 0 !default;
$preview-file-size-weight: 400 !default;
$after-preview-file-size: 14px !default;
$after-preview-file-line-height: 22px !default;
$after-preview-file-letter-spacing: 0 !default;
$after-preview-file-weight: 500 !default;

$no-preview-text-size-bigger: 20px !default;
$no-preview-line-height-bigger: 30px !default;
$no-preview-letter-sapcing-bigger: 0 !default;
$no-preview-font-weight-bigger: 500 !default;
$preview-file-size-text-bigger: 16px !default;
$preview-file-size-height-bigger: 24px !default;
$preview-file-size-spacing-bigger: 0 !default;
$preview-file-size-weight-bigger: 400 !default;
$after-preview-file-size-bigger: 16px !default;
$after-preview-file-line-height-bigger: 24px !default;
$after-preview-file-letter-spacing-bigger: 0 !default;
$after-preview-file-weight-bigger: 500 !default;

$progress-video-icon-size: 20px !default;
$progress-video-icon-height: 20px !default;
$progress-video-icon-weight: 400 !default;
$pin-file-icon-size: 16px !default;
$pin-file-icon-height: 16px !default;
$pin-file-icon-weight: 400 !default;
$reply-file-icon-size: 16px !default;
$reply-file-icon-height: 16px !default;
$reply-file-icon-weight: 400 !default;
$after-preview-download-size: 14px !default;
$after-preview-download-height: 100% !default;
$after-preview-download-weight: 400 !default;
$after-preview-close-size: 18px !default;
$after-preview-close-height: 18px !default;
$after-preview-close-weight: 400 !default;

$progress-video-icon-size-bigger: 20px !default;
$progress-video-icon-height-bigger: 20px !default;
$pin-file-icon-size-bigger: 18px !default;
$pin-file-icon-height-bigger: 18px !default;
$reply-file-icon-size-bigger: 18px !default;
$reply-file-icon-height-bigger: 16px !default;
$after-preview-download-size-bigger: 16px !default;
$after-preview-download-height-bigger: 100% !default;
$after-preview-close-size-bigger: 18px !default;
$after-preview-close-height-bigger: 18px !default;

$file-progress-bar-success-color: $brand-primary !default;
$file-progress-bar-failure-color: $brand-danger !default;
$file-progress-bar-bg-color: $grey-99 !default;
$files-container-margin: 4px !default;

$chat-ui-border: 1px !default;
$chat-content-gap: 4px !default;
$chat-content-padding-bottom: 10px !default;
$chat-header-border-bottom: 1px !default;
$chat-header-margin-left: 16px !default;
$chat-header-font-size: 16px !default;
$chat-header-gap: 12px !default;
$message-wrapper-gap: 8px !default;
$message-wrapper-padding-top: 10px !default;
$scrollbar-thumb-border-radius: 10px !default;
$message-group-margin: 4px !default;
$chat-message-toolbar-radius: 4px !default;
$toolbar-item-padding: 2px 4px !default;
$toolbar-first-child-margin-left: 2px !default;
$toolbar-last-child-margin-right: 2px !default;
$tbar-btn-padding: 2px !default;
$forwarded-indicator-font-size: 12px !default;
$forwarded-indicator-gap: 5px !default;
$forwarded-indicator-margin-bottom: 4px !default;
$forward-arrow-font-size: 14px !default;
$forward-arrow-padding: 1px 4px !default;
$message-header-container-gap: 4px !default;
$message-header-margin: 0 !default;
$chat-footer-margin: 0 auto !default;
$chat-textarea-border-radius: 10px !default;
$chat-textarea-font-size: 14px !default;
$message-icon-font-size: 14px !default;
$status-item-gap: 2px !default;
$status-text-margin-right: 18px !default;
$timebreak-margin: 1px 8px !default;
$timebreak-before-margin-right: 12px !default;
$timebreak-after-margin-left: 12px !default;
$timestamp-border: 1px !default;
$typing-indicator-gap: .25rem !default;
$typing-indicator-margin-left: 5px !default;
$user-icon-margin-right: -16px !default;
$user-icon-font-size: 10px !default;
$user-text-margin-left: 20px !default;
$indicator-wrapper-gap: 2px !default;
$indicator-border-radius: 9999px !default;
$typing-suggestions-gap: 2px !default;
$suggestion-item-template-padding: 0 !default;
$suggestions-ul-padding: 0 !default;
$suggestions-ul-margin: 0 !default;
$suggestions-ul-margin-right: 1px !default;
$suggestions-li-margin: 8px 4px 0 !default;
$suggestions-li-border: 1px !default;
$rtl-left-padding-left: unset !default;
$rtl-typing-indicator-margin-right: 5px !default;
$rtl-user-text-margin-right: 20px !default;
$rtl-user-icon-margin-left: -16px !default;
$rtl-user-icon-margin-right: unset !default;
$rtl-header-margin-left: unset !default;
$rtl-header-margin-right: 16px !default;
$rtl-suggestions-ul-margin-right: unset !default;
$rtl-suggestions-ul-margin-left: 1px !default;
$rtl-status-text-margin-right: unset !default;
$rtl-status-text-margin-left: 18px !default;
$footer-icons-wrapper-padding-right: unset !default;
$empty-chat-template-margin: auto !default;
$user-status-icon-border: 1px !default;
$reply-wrapper-padding: 10px 8px 8px !default;
$reply-wrapper-margin: 5px !default;
$reply-wrapper-border-radius: 5px !default;
$reply-content-padding-left: 8px !default;
$reply-message-details-gap: 5px !default;
$reply-message-details-padding-bottom: 4px !default;
$reply-chat-close-margin-left: auto !default;
$reply-chat-close-font-size: 14px !default;
$reply-message-user-font-size: 12px !default;
$reply-message-user-font-weight: 500 !default;
$reply-message-text-font-size: 14px !default;
$reply-message-time-font-size: 10px !default;
$pinned-message-wrapper-padding: 10px !default;
$pinned-message-gap: 10px !default;
$pinned-message-font-size: 14px !default;
$pinned-dropdown-popup-border: none !default;
$pinned-dropdown-popup-margin-left: auto !default;
$attached-file-padding: 2px 0 !default;
$image-video-border-radius: 6px !default;
$play-icon-wrapper-border-radius: 50% !default;
$file-wrapper-border-radius: 4px !default;
$pinned-message-text-gap: 8px !default;
$pinned-img-thumb-border-radius: 6px !default;
$pinned-file-name-font-size: 14px !default;
$reply-media-preview-gap: 5px !default;
$reply-media-preview-margin-right: 5px !default;
$reply-media-thumb-border-radius: 3px !default;
$preview-header-padding: 8px 12px !default;
$preview-header-close-margin-left: 12px !default;
$preview-file-name-padding-right: 12px !default;
$image-video-preview-margin: auto !default;
$preview-file-border-radius: 6px !default;
$preview-file-border: 1px !default;
$file-document-font-size: 80px !default;
$chat-mention-padding: 8px 12px !default;
$mention-user-name-size: 14px !default;
$mention-user-name-line-height: 22px !default;
$mention-user-name-margin: 9px 8px !default;
$mention-user-icon-size: 14px !default;
$chat-mention-border-radius: 4px !default;
$preview-file-text-top: 24px !default;
$preview-file-text-bottom: 12px !default;

$bigger-message-icon-size: 16px !default;
$bigger-user-icon-font-size: 14px !default;
$bigger-user-text-margin-left: 22px !default;
$bigger-user-icon-margin-right: -18px !default;
$bigger-chat-textarea-size: 16px !default;
$bigger-rtl-left-padding-left: unset !default;
$bigger-rtl-user-text-margin-right: 22px !default;
$bigger-rtl-user-text-margin-left: unset !default;
$bigger-rtl-user-icon-margin-left: -18px !default;
$bigger-rtl-user-icon-margin-right: unset !default;
$bigger-rtl-icons-wrapper-padding-right: unset !default;
$bigger-user-status-icon-border: 1px !default;
$bigger-tbar-first-item-margin-left: 2px !default;
$bigger-tbar-last-item-margin-right: 2px !default;
$bigger-tbar-btn-padding: 4px 2px !default;
$bigger-reply-file-name-size: 14px !default;
$bigger-mention-user-name-size: 16px !default;
$bigger-mention-user-name-height: 24px !default;
$bigger-mention-user-name-margin: 10px 8px !default;
$bigger-mention-user-icon-size: 16px !default;

$footer-template-border: 1px !default;
$reply-content-border-left: 2px !default;
$message-toolbar-border: 1px !default;
$file-wrapper-border-width: 1px !default;
$chat-mention-user-icon-radius: 50% !default;
$mention-popup-border-radius: 4px !default;
$mention-popup-border: 1px !default;

$header-height: 100% !default;
$message-wrapper-height: 100% !default;
$chat-message-toolbar-height: 32px !default;
$chat-textarea-height: 100% !default;
$message-icon-height: 32px !default;
$status-icon-height: 16px !default;
$timebreak-height: 1px !default;
$user-icon-height: 24px !default;
$indicator-wrapper-height: 12px !default;
$indicator-height: .3rem !default;
$header-icon-height: 32px !default;
$spinner-pane-height: 35px !default;
$image-video-height: auto !default;
$pinned-img-thumb-height: 30px !default;
$reply-media-thumb-height: 20px !default;
$preview-overlay-height: 100% !default;
$preview-header-height: 40px !default;
$media-wrapper-height: 100% !default;
$preview-file-height: 70% !default;
$mention-user-icon-height: 40px !default;
$chat-mention-list-item-height: 56px !default;
$play-icon-wrapper-height: 40px !default;

$bigger-message-icon-height: 40px !default;
$bigger-user-icon-font-height: 32px !default;
$chat-status-icon-bigger-height: 18px !default;
$chat-message-toolbar-bigger-height: 40px !default;
$pinned-img-thumb-bigger-height: 32px !default;
$reply-media-thumb-bigger-height: 30px !default;
$preview-header-bigger-height: 48px !default;
$bigger-mention-user-icon-height: 44px !default;
$chat-mention-list-item-bigger-height: 62px !default;
$chat-content-height: calc(100% - $chat-header-height) !default;
$chat-content-bigger-height: calc(100% - $chat-bigger-header-height) !default;
$chat-left-message-item-padding-left: calc(32px + $user-icon-gap) !default;
$chat-left-message-item-padding-right: calc(32px + $user-icon-gap) !default;
$chat-left-message-item-bigger-padding-left: calc(40px + $user-icon-bigger-gap) !default;
$chat-left-message-item-bigger-padding-right: calc(40px + $user-icon-bigger-gap) !default;
$message-icon-width: 32px !default;
$status-icon-width: 16px !default;
$user-icon-width: 24px !default;
$indicator-width: .3rem !default;
$header-icon-width: 32px !default;
$user-status-icon-height: 12px !default;
$user-status-icon-width: 12px !default;
$mention-user-icon-width: 40px !default;
$pinned-img-thumb-width: 30px !default;
$reply-media-thumb-width: 20px !default;
$bigger-message-icon-width: 40px !default;
$bigger-user-icon-font-width: 32px !default;
$chat-status-icon-bigger-width: 18px !default;
$pinned-img-thumb-bigger-width: 32px !default;
$reply-media-thumb-bigger-width: 30px !default;
$bigger-mention-user-icon-width: 44px !default;
$chat-video-wrapper-bigger-height: 44px !default;
$file-item-margin: 2px !default;
$chat-file-details-padding-right: 12px !default;
$chat-file-format-icon-padding: 3px !default;
$chat-file-document-icon-font-size: 24px !default;
$chat-attached-file-details-padding: 3px 0 2px 2px !default;
$chat-attached-file-text-font-weight: 400 !default;
$chat-attached-file-text-font-size: 10px !default;
$chat-attached-file-text-line-height: 15px !default;
$chat-attached-file-clear-icon-padding: 4px !default;
$chat-clear-icon-border-radius: 4px !default;
$chat-progress-bar-border-radius: 4px !default;
$chat-progress-fill-height: 3px !default;
$file-wrapper-margin: 0 !default;
$file-hover-bg: $gray-light !default;
$file-pressed-bg: $grey-44 !default;
$file-close-icon-hover-bg: $grey-88 !default;
$file-close-icon-pressed-bg: $grey-8c !default;
$file-close-icon-hover-color: $grey-light-font !default;
$file-close-icon-pressed-color: $grey-light-font !default;
$chat-attached-file-clear-icon-margin: 6px 4px 6px 0 !default;

@mixin chat-display-alignment($chat-display, $chat-align-items) {
  display: $chat-display;
  align-items: $chat-align-items;
}
@mixin chat-text-ellipses($chat-overflow, $chat-white-space, $chat-text-overflow) {
  overflow: $chat-overflow;
  white-space: $chat-white-space;
  text-overflow: $chat-text-overflow;
}
@mixin chat-progress-bar-display($chat-radius, $chat-cx, $chat-cy, ){
  cx: $chat-cx;
  cy: $chat-cy;
  r: $chat-radius;
}
@mixin chat-wrapper-icon-alignment($width, $height){
  position: absolute;
  width: $width;
  height: $height;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@mixin chat-center-icon($size){
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: $size;
  cursor: pointer;
  z-index: 1;
}
@include export-module('chatui-layout') {
  .e-chat-ui {
    border: $chat-ui-border solid;
    .e-chat-content {
      position: relative;
      height: $chat-content-height;
      justify-content: space-between;
      gap: $chat-content-gap;
      padding-bottom: $chat-content-padding-bottom;
    }
    .e-chat-header {
      height: $chat-header-height;
      border-bottom: $chat-header-border-bottom solid;
      .e-chat-toolbar {
        flex-grow: 1;
        &.e-toolbar {
          border: none;
        }
      }
    }
    .e-header {
      height: $header-height;
      margin-left: $chat-header-margin-left;
      font-size: $chat-header-font-size;
      font-weight: $message-header-font-weight;
      display: flex;
      gap: $chat-header-gap;
      align-items: center;
    }
    .e-message-wrapper {
      gap: $message-wrapper-gap;
      width: 100%;
      height: $message-wrapper-height;
      overflow-y: scroll;
      padding-top: $message-wrapper-padding-top;
      &.e-scroll-smooth {
        scroll-behavior: smooth;
      }
      &::-webkit-scrollbar {
        width: $chat-scrollbar-width;
        height: $chat-scrollbar-width;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: $scrollbar-thumb-border-radius;
      }
    }
    .e-message-group {
      max-width: 75%;
      margin: $message-group-margin;
    }
    .e-message-item {
      display: flex;
      flex-direction: column;
      position: relative;
      margin-bottom: $message-item-bottom;
      .e-chat-message-toolbar {
        border-radius: $chat-message-toolbar-radius;
        display: none;
        position: absolute;
        height: $chat-message-toolbar-height !important; /* stylelint-disable-line declaration-no-important */
        min-height: 32px;
        z-index: 10;
        overflow-x: scroll;
        scrollbar-width: none;
        &.e-show,
        &:hover {
          display: block;
        }
        .e-toolbar-items .e-toolbar-item {
          padding: $toolbar-item-padding;
          min-height: 28px;
          &:first-child {
            margin-left: $toolbar-first-child-margin-left;
          }
          &:last-child {
            margin-right: $toolbar-last-child-margin-right;
          }
          .e-tbar-btn {
            min-height: 28px;
            padding: $tbar-btn-padding;
          }
        }
      }
      .e-forwarded-indicator {
        font-size: $forwarded-indicator-font-size;
        display: flex;
        align-items: center;
        gap: $forwarded-indicator-gap;
        margin-bottom: $forwarded-indicator-margin-bottom;
        .e-forward-arrow {
          font-weight: normal;
          font-size: $forward-arrow-font-size;
          padding: $forward-arrow-padding;
        }
      }
    }
    .e-message-header-container {
      display: flex;
      align-items: baseline;
      gap: $message-header-container-gap;
    }
    .e-message-header {
      margin: $message-header-margin;
      font-size: $message-header-size;
      font-weight: $message-header-font-weight;
    }
    .e-time {
      font-size: $message-time-size;
      white-space: nowrap;
    }
    .e-message-content {
      white-space: pre-wrap;
      padding: $chat-text-padding;
      border-radius: $text-border-radius;
      margin-top: $text-margin-top;
      font-size: $chat-text-font-size;
      width: fit-content;
      text-align: left;
    }
    .e-right,
    .e-right .e-message-content,
    .e-right .e-time {
      align-self: flex-end;
    }
    .e-left {
      align-self: flex-start;
      position: relative;
      &:not(.e-message-item-template) {
        padding-left: $chat-left-message-item-padding-left;
      }
    }
    .e-message-icon {
      position: absolute;
      top: 20px;
      left: 0;
    }

    /* ======== Asssit Footer Styles ======== */
    .e-footer {
      position: relative;
      margin: $chat-footer-margin;
      align-self: flex-end;
      width: calc(100% - 10px); //for margin space
      .e-chat-textarea::-webkit-scrollbar-thumb {
        border-radius: $chat-textarea-border-radius;
      }
      .e-chat-textarea::-webkit-scrollbar {
        width: 4px;
      }
      .hide-scrollbar .e-chat-textarea {
        scrollbar-width: none;
      }
      .e-footer-icons-wrapper {
        display: flex;
        align-items: center;
        gap: $chat-footer-icons-gap;
        padding: $chat-footer-icons-padding;
        .e-icons {
          cursor: pointer;
        }
        .e-upload {
          display: none;
        }
      }
      .e-chat-textarea {
        height: $chat-textarea-height;
        width: 100%;
        min-height: $chat-textarea-min-height;
        outline: none;
        overflow-y: auto;
        max-height: 280px;
        line-height: $chat-textarea-line-height;
        padding: $chat-textarea-padding;
        font-size: $chat-textarea-font-size;
        border: none;
      }
      .e-chat-textarea[placeholder]:empty::before {
        content: attr(placeholder);
        cursor: text;
      }
      &.e-footer-focus-wave-effect {
        @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
          &::before,
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            height: $focus-wave-effect-height;
            width: 0;
            transition: width .2s ease-out;
          }
          &::before {
            left: 50%;
          }
          &::after {
            right: 50%;
          }
          &.e-footer-focused::before {
            width: 50%;
          }
          &.e-footer-focused::after {
            width: 50%;
          }
        }
      }

      &:not(.e-footer-template) {
        display: flex;
        flex-direction: column;
        border-radius: $chat-footer-border-radius;
        @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
          border-top-right-radius: $footer-border-top-right-radius;
          border-top-left-radius: $footer-border-top-left-radius;
        }
        &.e-footer-expanded .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            justify-content: end;
          }
          .e-chat-textarea {
            width: 100%;
          }
        }
        .e-chat-send {
          font-size: $chat-send-icon-size;
        }
        .e-chat-attachment-icon {
          font-size: $chat-send-icon-size;
        }
        .e-chat-send.disabled {
          pointer-events: none;
          opacity: .5;
          cursor: not-allowed;
        }
        .e-chat-send.enabled {
          pointer-events: auto;
          opacity: 1;
          cursor: pointer;
        }
        .e-textarea-icons-wrapper {
          display: flex;
          flex-direction: row;
        }
      }
      .e-hidden-textarea {
        display: none;
      }
      &[hidden]{
        display: none;
      }
    }
    .e-footer:not(.e-footer-template) .e-chat-send:not(.disabled):focus-visible,
    .e-footer:not(.e-footer-template) .e-chat-attachment-icon:focus-visible {
      outline: 1px solid;
    }
    .e-chat-content,
    .e-message-wrapper {
      display: flex;
      flex-direction: column;
    }
    .e-message-icon,
    .e-message-icon img {
      height: $message-icon-height;
      width: $message-icon-width;
      font-size: $message-icon-font-size;
    }
    .e-message-icon,
    .e-header-icon,
    .e-user-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .e-status-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .e-status-item {
      display: flex;
      gap: $status-item-gap;
    }
    .e-right .e-time,
    .e-status-text {
      margin-right: $status-text-margin-right;
    }
    .e-status-text {
      font-size: $typing-user-font-size;
    }
    .e-status-icon {
      align-self: flex-end;
      height: $status-icon-height;
      width: $status-icon-width;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: $chat-status-icon-size;
    }
    .e-timebreak {
      display: flex;
      align-items: center;
      margin: $timebreak-margin;
      position: relative;
      &::before,
      &::after {
        content: '';
        flex-grow: 1;
        height: $timebreak-height;
      }
      &::before {
        margin-right: $timebreak-before-margin-right;
      }
      &::after {
        margin-left: $timebreak-after-margin-left;
      }
    }
    .e-timestamp {
      font-size: $timebreak-font-size;
      padding: $timebreak-padding;
      border-radius: $timebreak-border-radius;
      font-weight: $timebreak-font-weight;
      border: $timestamp-border solid;
      display: inline-block;
    }
    .e-typing-indicator {
      align-self: baseline;
      display: flex;
      gap: $typing-indicator-gap;
      margin-left: $typing-indicator-margin-left;
      width: fit-content;
      align-items: center;
      justify-content: center;
    }
    .e-user-icon {
      margin-right: $user-icon-margin-right;
      height: $user-icon-height;
      width: $user-icon-width;
      font-size: $user-icon-font-size;
    }
    .e-user-text {
      margin-left: $user-text-margin-left;
      font-size: $typing-user-font-size;
    }
    .e-indicator-wrapper {
      display: flex;
      gap: $indicator-wrapper-gap;
      height: $indicator-wrapper-height;
      align-items: flex-end;
    }
    .e-indicator {
      border-radius: $indicator-border-radius;
      height: $indicator-height;
      width: $indicator-width;
    }
    .e-indicator:nth-child(1) {
      animation-delay: .3333s;
    }
    .e-indicator:nth-child(2) {
      animation-delay: .6666s;
    }
    .e-indicator:nth-child(3) {
      animation-delay: .9999s;
    }
    .e-header-icon {
      position: relative;
      display: inline-block;
      width: $header-icon-width;
      height: $header-icon-height;
    }
    .e-typing-suggestions {
      display: flex;
      gap: $typing-suggestions-gap;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      position: relative;
      flex-wrap: wrap-reverse;
    }
    .e-suggestions {
      flex: 1;
      width: 100%;
      &.e-suggestion-item-template li {
        padding: $suggestion-item-template-padding;
      }
      ul {
        list-style-type: none;
        padding: $suggestions-ul-padding;
        margin: $suggestions-ul-margin;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-right: $suggestions-ul-margin-right;
      }
      li {
        font-size: $timebreak-font-size;
        line-height: $chat-suggesstion-line-height;
        font-weight: $suggesstions-font-weight;
        padding: $chat-suggesstions-list-padding;
        margin: $suggestions-li-margin;
        border: $suggestions-li-border solid;
        border-radius: $suggestion-border-radius;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .e-spinner-pane.e-spin-show {
      height: $spinner-pane-height;
    }
    &.e-rtl {
      .e-message-content {
        text-align: right;
      }
      .e-left {
        &:not(.e-message-item-template) {
          padding-right: $chat-left-message-item-padding-right;
          padding-left: $rtl-left-padding-left;
        }
      }
      .e-message-icon {
        left: unset;
        right: 0;
      }
      .e-typing-indicator {
        margin-right: $rtl-typing-indicator-margin-right;
      }
      .e-user-text {
        margin-right: $rtl-user-text-margin-right;
      }
      .e-user-icon {
        margin-left: $rtl-user-icon-margin-left;
        margin-right: $rtl-user-icon-margin-right;
      }
      .e-typing-indicator,
      .e-user-text,
      .e-header {
        margin-left: $rtl-header-margin-left;
      }
      .e-header {
        margin-right: $rtl-header-margin-right;
      }
      .e-suggestions ul {
        margin-right: $rtl-suggestions-ul-margin-right;
        margin-left: $rtl-suggestions-ul-margin-left;
      }
      .e-right .e-time,
      .e-status-text {
        margin-right: $rtl-status-text-margin-right;
        margin-left: $rtl-status-text-margin-left;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $chat-footer-icons-rtl-padding;
          padding-right: $footer-icons-wrapper-padding-right;
        }
      }
    }
    @if ($skin-name == 'highcontrast') {
      .e-chat-header .e-toolbar .e-toolbar-item .e-tbar-btn {
        border: none;
      }
    }
    .e-fab.e-btn.e-fab-bottom {
      bottom: 8px;
    }
    .e-arrowdown-hide,
    .e-hide-suggestions {
      display: none;
    }
    .e-arrowdown-show {
      display: flex;
    }
    .e-show-suggestions {
      display: block;
    }
    .e-suggestions li:focus-visible {
      outline: 1px solid;
    }
    .e-chat-header {
      .e-toolbar-item {
        &.e-overlay {
          opacity: .5;
        }
      }
    }
    .e-empty-chat-template {
      margin: $empty-chat-template-margin;
    }
    .e-user-status-icon {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      bottom: 0;
      right: 0;
      height: $user-status-icon-height;
      width: $user-status-icon-width;
      border: $user-status-icon-border solid;
      border-color: $user-status-icon-border-color;
      border-radius: $user-status-icon-border-radius;
      font-size: $user-status-icon-font-size;

      &:not(.e-user-offline)
      {
        color: $user-status-icon-color;
      }
    }
    .e-reply-wrapper {
      display: flex;
      align-items: center;
      padding: $reply-wrapper-padding;
      margin: $reply-wrapper-margin;
      border-radius: $reply-wrapper-border-radius;
      position: relative;
      width: fit-content;
      white-space: normal;
      cursor: pointer;
      .e-reply-content {
        padding-left: $reply-content-padding-left;
      }
      .e-reply-message-details {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: $reply-message-details-gap;
        padding-bottom: $reply-message-details-padding-bottom;
        .e-chat-close {
          margin-left: $reply-chat-close-margin-left;
          font-size: $reply-chat-close-font-size;
          cursor: pointer;
        }
      }
      .e-reply-message-user {
        font-size: $reply-message-user-font-size;
        font-weight: $reply-message-user-font-weight;
      }
      .e-reply-message-text {
        font-size: $reply-message-text-font-size;
        vertical-align: middle;
      }
      .e-reply-message-time {
        font-size: $reply-message-time-font-size;
      }
    }
    .e-pinned-message-wrapper {
      display: none;
      align-items: center;
      padding: $pinned-message-wrapper-padding;
      .e-pinned-message {
        display: flex;
        align-items: center;
        gap: $pinned-message-gap;
        font-size: $pinned-message-font-size;
      }
      .e-pinned-dropdown-popup {
        border: $pinned-dropdown-popup-border;
        background: none;
        box-shadow: none;
        margin-left: $pinned-dropdown-popup-margin-left;
      }
    }

    /* ======== Attachment Styles ======== */
    .e-message-content {
      .e-attached-file{
        display: flex;
        padding: $attached-file-padding;
        cursor: pointer;
        .e-image-wrapper,
        .e-video-wrapper {
          position: relative;
          display: flex;
          .e-image,
          .e-video {
            max-width: 250px;
            max-height: 350px;
            min-width: 200px;
            width: 100%;
            height: $image-video-height;
            object-fit: cover;
            border-radius: $image-video-border-radius;
            display: block;
          }
          .e-play-icon-wrapper {
            @include chat-wrapper-icon-alignment(40px, $play-icon-wrapper-height);
            border-radius: $play-icon-wrapper-border-radius;
            .e-chat-video-play {
              @include chat-center-icon($progress-video-icon-size);
              line-height: $progress-video-icon-height;
              font-weight: $progress-video-icon-weight;
              transform: translate(-42%, -52%);
            }
          }
        }
      }
    }
    .e-pinned-message {
      min-width: 0;
      .e-pinned-message-text{
        @include chat-display-alignment(flex, center);
        gap: $pinned-message-text-gap;
        min-width: 0;
        .e-pinned-img-thumb {
          height: $pinned-img-thumb-height;
          width: $pinned-img-thumb-width;
          border-radius: $pinned-img-thumb-border-radius;
          object-fit: inherit;
        }
        .e-pinned-file-name {
          @include chat-text-ellipses(hidden, nowrap, ellipsis);
          min-width: 0;
          display: inline-block;
          font-size: $pinned-file-name-font-size;
        }
        .e-chat-file-icon {
          font-size: $pin-file-icon-size;
          line-height: $pin-file-icon-height;
          font-weight: $pin-file-icon-weight;
        }
      }
    }
    .e-reply-wrapper {
      .e-reply-media-preview {
        @include chat-display-alignment(inline-flex, center);
        gap: $reply-media-preview-gap;
        margin-right: $reply-media-preview-margin-right;
        width: fit-content;
        vertical-align: middle;
        .e-reply-media-thumb {
          height: $reply-media-thumb-height;
          width: $reply-media-thumb-width;
          border-radius: $reply-media-thumb-border-radius;
          object-fit: inherit;
        }
        .e-reply-file-name {
          flex-grow: 1;
          max-width: 120px;
          @include chat-text-ellipses(hidden, nowrap, ellipsis);
        }
        .e-chat-file-icon {
          font-size: $reply-file-icon-size;
          line-height: $reply-file-icon-height;
          font-weight: $reply-file-icon-weight;
        }
      }
    }
    .e-preview-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: $preview-overlay-height;
      z-index: 999;
      @include chat-display-alignment(flex, center);
      flex-direction: column;
      justify-content: flex-start;
      .e-preview-header {
        @include chat-display-alignment(flex, center);
        width: 100%;
        padding: $preview-header-padding;
        justify-content: space-between;
        height: $preview-header-height;
        .e-icons {
          text-decoration: none;
          cursor: pointer;
        }
        .e-chat-back-icon {
          margin-right: $preview-header-close-margin-left;
          font-size: $after-preview-close-size;
          line-height: $after-preview-close-height;
          font-weight: $after-preview-close-weight;
        }
        .e-chat-download {
          font-size: $after-preview-download-size;
          line-height: $after-preview-download-height;
          font-weight: $after-preview-download-weight;
        }
        .e-preview-file-name {
          padding-right: $preview-file-name-padding-right;
          font-size: $after-preview-file-size;
          line-height: $after-preview-file-line-height;
          font-weight: $after-preview-file-weight;
          letter-spacing: $after-preview-file-letter-spacing;
          @include chat-text-ellipses(hidden, nowrap, ellipsis);
          flex-grow: 1;
        }
      }
      .e-media-wrapper {
        display: flex;
        height: $media-wrapper-height;
      }

      .e-image-preview,
      .e-video-preview {
        max-width: 95%;
        max-height: 80%;
        margin: $image-video-preview-margin;
        object-fit: contain;
      }

      .e-file-preview {
        height: $preview-file-height;
        width: 80%;
        margin: auto;
        border-radius: $preview-file-border-radius;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: $preview-file-border solid;
        overflow-y: auto;
        scrollbar-width: thin;
        .e-file-document {
          font-size: $file-document-font-size;
        }
        .e-preview-file-text {
          font-size: $no-preview-text-size;
          font-weight: $no-preview-font-weight;
          line-height: $no-preview-line-height;
          letter-spacing: $no-preview-letter-sapcing;
          margin-top: $preview-file-text-top;
          margin-bottom: $preview-file-text-bottom;
          text-align: center;
          word-break: break-word;
          hyphens: auto;
        }
        .e-file-details {
          font-size: $preview-file-size-text;
          line-height: $preview-file-size-height;
          letter-spacing: $preview-file-size-spacing;
          font-weight: $preview-file-size-weight;
          word-break: break-word;
          hyphens: auto;
        }
      }
    }

    .e-upload-failure-alert {
      transition: opacity .5s ease-in-out;
      opacity: 0;
      padding: $file-failure-padding;
      border-radius: $file-failure-border-radius;
      display: flex;
      align-items: center;
      align-self: center;
      justify-content: space-between;
      width: calc(100% - 10px);
      .e-chat-circle-close {
        font-size: $file-failure-circle-icon-size;
        line-height: $file-failure-circle-icon-height;
        margin-right: $file-failure-circle-margin;
        font-weight: $file-failure-circle-icon-weight;
      }
      .e-failure-message {
        font-size: $file-failure-message-size;
        line-height: $file-failure-message-height;
        letter-spacing: $file-failure-message-spacing;
        font-weight: $file-failure-message-weight;
        margin-right: auto;
      }
      .e-chat-close {
        font-size: $file-failure-close-icon-size;
        line-height: $file-failure-close-icon-height;
        margin-left: $file-failure-close-margin;
        font-weight: $file-failure-close-icon-weight;
        cursor: pointer;
      }
    }
    .e-upload-failure-alert.e-show {
      opacity: 1;
    }

    .e-footer:has(.e-chat-drop-area .e-chat-uploaded-file-item) {
      .e-chat-textarea {
        max-height: 90px;
      }
    }

    .e-footer .e-chat-drop-area:has(.e-chat-uploaded-file-item) {
      margin: $files-container-margin;
    }

    .e-footer .e-chat-drop-area {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      overflow-y: auto;
      overflow-x: hidden;
      white-space: normal;
      max-width: inherit;
      max-height: 225px;
      scrollbar-width: thin;
      &::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: $chat-textarea-border-radius;
      }
    }

    .e-footer .e-chat-drop-area,
    .e-attached-file {
      .e-chat-uploaded-file-item,
      .e-file-wrapper {
        display: flex;
        flex-direction: row;
        border-radius: $file-wrapper-border-radius;
        position: relative;
        align-items: center;
        width: 160px;
        max-width: 160px;
        min-width: 160px;
        margin: $file-item-margin;
        cursor: pointer;
        &:not(:has(.e-chat-close)) .e-chat-file-details {
          padding-right: $chat-file-details-padding-right;
        }
      }

      .e-chat-file-icon {
        padding: $chat-file-format-icon-padding;
        font-size: $chat-file-document-icon-font-size;
      }
      .e-chat-file-details {
        display: flex;
        flex-direction: column;
        padding: $chat-attached-file-details-padding;
        min-width: 0;
        flex: 1 1 auto;
      }

      .e-chat-file-name {
        font-weight: $chat-attached-file-text-font-weight;
      }

      .e-chat-file-name,
      .e-chat-file-size {
        font-size: $chat-attached-file-text-font-size;
        line-height: $chat-attached-file-text-line-height;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .e-chat-close {
        cursor: pointer;
        font-weight: bold;
        padding: $chat-attached-file-clear-icon-padding;
        border-radius: $chat-clear-icon-border-radius;
        margin: $chat-attached-file-clear-icon-margin;
      }
    }

    .e-footer {
      .e-chat-drop-area,
      .e-attachment-template {
        .e-chat-progress-bar {
          width: 100%;
          border-radius: $chat-progress-bar-border-radius;
          overflow: hidden;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .e-chat-progress-fill {
          height: $chat-progress-fill-height;
          width: 0;
          transition: width .3s;
        }
      }
    }
    .e-attached-file {
      .e-file-wrapper {
        margin: $file-wrapper-margin;
        width: fit-content;
      }
    }
    .e-right .e-text .e-chat-mention-user-chip {
      font-weight: $mentioned-user-font-weight;
    }

    .e-left .e-text .e-chat-mention-user-chip {
      font-weight: $mentioned-left-user-font-weight;
    }
  }

  // Mention popup related styles for @mention support in chat ui
  .e-chat-mention .e-chat-mention-item-template {
    display: flex;
    flex-direction: row;
    padding: $chat-mention-padding;
  }

  .e-chat-mention .e-chat-mention-user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .e-chat-mention .e-chat-mention-user-name {
    font-size: $mention-user-name-size;
    line-height: $mention-user-name-line-height;
    margin: $mention-user-name-margin;
  }

  .e-chat-mention.e-rtl .e-chat-mention-user-icon {
    left: unset;
    right: 0;
  }

  .e-chat-mention .e-chat-mention-user-icon,
  .e-chat-mention .e-chat-mention-user-icon img {
    height: $mention-user-icon-height;
    width: $mention-user-icon-width;
    font-size: $mention-user-icon-size;
  }

  .e-chat-mention > div {
    border-radius: $chat-mention-border-radius;
  }

  .e-chat-mention .e-list-item {
    text-indent: 0;
    height: $chat-mention-list-item-height;
  }
}

@include export-module('chatui-theme') {
  .e-chat-ui {
    border-color: $chat-border-color;
    background: $chat-bg-color;
    .e-chat-content {
      color: $chat-text-color;
    }
    .e-pinned-dropdown-popup.e-active {
      @if ($skin-name == 'highcontrast') {
        color: $content-font;
      }
      @if ($skin-name == 'highcontrast-light') {
        color: $content-font;
      }
      @if ($skin-name == 'bootstrap4') {
        color: $black;
      }
    }
    .e-pinned-dropdown-popup {
      @if ($skin-name == 'bootstrap4') {
        color: $black;
      }
      &:hover {
        @if ($theme-name == 'fluent2-highcontrast') {
          color: unset;
        }
      }
    }
    .e-right .e-message-content {
      background: $chat-right-bg-color;
      color: $chat-right-text-color;
    }
    .e-left .e-message-content {
      color: $chat-left-text-color;
      background: $chat-left-bg-color;
      &:active,
      &:focus {
        color: $chat-left-text-color-active;
        background: $chat-left-bg-color-active;
      }
      &:hover {
        color: $chat-left-text-color-hover;
        background: $chat-left-bg-color-hover;
      }
    }
    .e-message-wrapper {
      &::-webkit-scrollbar-thumb {
        background: $chat-scrollbar-color;
      }
      .e-message-header {
        color: $message-header-color;
      }
      .e-time {
        color: $message-time-color;
      }
    }
    .e-chat-header {
      border-bottom-color: $chat-border-color;
      background: $chat-header-bg-color;
      border-color: $chat-header-bg-color;
      color: $chat-header-color;
      .e-toolbar,
      .e-toolbar-items,
      .e-tbar-btn {
        background: $chat-header-bg-color;
        .e-tbar-btn-text,
        .e-btn-icon {
          color: $chat-header-color;
        }
      }
    }
    .e-timebreak {
      &::before,
      &::after {
        background: $timebreak-border-color;
      }
    }
    .e-timestamp {
      background: $timebreak-bg-color;
      color: $timebreak-color;
      border-color: $timestamp-border-color;
    }
    .e-chat-error {
      color: $chat-error-color;
    }
    .e-chat-seen {
      color: $chat-seen-color;
    }
    .e-footer {
      .e-chat-textarea::-webkit-scrollbar-thumb {
        background: $chat-scrollbar-color;
      }
      @if ($skin-name == 'Material3' or $skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark') {
        &.e-footer-focus-wave-effect::before,
        &.e-footer-focus-wave-effect::after {
          background-color: $chat-footer-wave-color;
        }
      }
      .e-chat-textarea[placeholder]:empty::before {
        color: $chat-placeholder-color;
      }
      &:not(.e-footer-template) {
        border: $footer-template-border solid $chat-footer-border-color;
        border-bottom-color: $chat-footer-border-btm-color;
        &.e-footer-focused,
        &.e-upload-drag-hover {
          border: $chat-focused-border-width solid $chat-footer-focus-bdr-color;
          @if ($skin-name == 'fluent2') {
            border-bottom-color: $chat-footer-border-btm-color;
          }
          box-shadow: $chat-footer-border-shadow;
        }
        .e-chat-send {
          color: $chat-send-icon-color;
          &.disabled {
            color: $chat-send-icon-disabled-color;
          }
        }
        .e-chat-attachment-icon {
          color: $attachment-icon-color;
        }
      }
    }
    .e-suggestions {
      li {
        color: $chat-suggestion-li-color;
        border-color: $chat-suggestion-li-border-color;
      }
    }
    .e-header-icon,
    .e-message-icon,
    .e-message-icon img,
    .e-user-icon {
      border-radius: 50%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
    }
    .e-user-online {
      background-color: $user-status-icon-online-background-color;
    }
    .e-user-away {
      background-color: $user-status-icon-away-background-color;
    }
    .e-user-busy {
      background-color: $user-status-icon-busy-background-color;
    }
    .e-user-offline {
      background-color: $user-status-icon-offline-background-color;
    }
    .e-message-icon,
    .e-user-icon {
      color: $sender-icon-color;
      @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
        background: $sender-icon-bg-color;
      }
      @else {
        background-color: $sender-icon-bg-color;
      }
    }
    .e-indicator {
      background: $chat-left-bg-color;
      animation: e-chat-indicator-blink 1s infinite;
    }
    .e-user-text {
      color: $typing-user-color;
    }

    @keyframes e-chat-indicator-blink {
      50% {
        background: $message-header-color;
        height: .2rem;
      }
    }
    @if ($skin-name == 'highcontrast') {
      .e-message-group.e-left .e-message-content {
        &:not(:focus),
        &:not(:active),
        &:not(:hover) {
          border: $message-content-border solid rgba(150, 150, 150, 1);
        }
      }
    }
    .e-chat-header {
      .e-toolbar-item {
        &.e-overlay {
          background: unset;
        }
        .e-tbar-btn {
          &:focus,
          &:active,
          &:hover {
            @if ($skin-name == 'highcontrast') {
              background: rgba(104, 87, 8, 1);
            }
          }
          &:hover {
            @if ($theme-name == 'Material3-dark') {
              background: rgba(0, 0, 0, .056);
            }
          }
          &:focus {
            @if ($skin-name == 'Material3') {
              box-shadow: 0 0 0 1px rgba(255, 255, 255, 1);
            }
            @if ($theme-name == 'Material3-dark') {
              box-shadow: 0 0 0 1px rgba(0, 0, 0, 1);
            }
          }
          .e-tbar-btn-text,
          .e-btn-icon {
            &:focus,
            &:active,
            &:hover {
              @if ($skin-name == 'highcontrast') {
                color: rgba(255, 255, 255, 1);
              }
            }
            @if ($skin-name == 'bootstrap5' or $theme-name == 'bootstrap5-dark') {
              color: rgba(255, 255, 255, 1);
            }
            &:not(:active) {
              @if ($skin-name == 'Material3') {
                color: rgba(255, 255, 255, 1);
              }
              @if ($theme-name == 'Material3-dark') {
                color: rgba(0, 0, 0, 1);
              }
            }
          }
        }
        .e-dropdown-btn,
        .e-dropdown-btn.e-btn {
          @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
            box-shadow: none;
          }
          &:focus,
          &:active,
          &:hover {
            @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
              box-shadow: none;
            }
          }
        }
      }
    }

    .e-reply-wrapper {
      background: $reply-wrapper-bg-color;
      @if $theme-name == 'fluent2-highcontrast' {
        background-color: rgba(0, 0, 0, 1);
        border: 1px solid rgba(255, 255, 255, 1);
      }
      .e-reply-content {
        border-left: $reply-content-border-left solid $reply-wrapper-border-bg-color;
        @if $theme-name == 'fluent2-highcontrast' {
          border-color: rgba(255, 255, 255, 1);
        }
      }
    }

    .e-chat-message-toolbar:has(.e-toolbar-item) {
      border: $message-toolbar-border solid $message-toolbar-border-color;
    }

    .e-forwarded-indicator {
      color: $chat-message-forward-color;
      .e-forward-arrow {
        color: $chat-message-forward-icon-color;
      }
    }
    .e-pinned-message-wrapper {
      background-color: $pinned-background-color;
    }

    .e-right .e-text .e-chat-mention-user-chip {
      @if ($theme-name == 'fluent2-highcontrast') {
        // Used this value of $theme-dark from fluent 2 highcontrast definition for minimal code usage
        color: rgb(0, 90, 158);
      }
      @else
      {
        color: $mentioned-user-color;
      }
    }

    .e-left .e-text .e-chat-mention-user-chip {
      color: $mentioned-left-user-color;
    }

    .e-footer .e-chat-textarea.e-mention .e-mention-chip {
      background: unset;
    }
    .e-status-wrapper {
      .e-upload-failed {
        color: $chat-error-color;
      }
    }
    .e-preview-overlay {
      background: $image-preview-overlay-bg;
      .e-preview-header {
        background: $image-preview-header-bg-color;
        color: $image-preview-header-text-color;
        .e-icons {
          color: $file-download-icon-color;
        }
      }
      .e-file-preview {
        background: $preview-file-bg-color;
        border-color: $preview-file-border-color;
        .e-preview-file-text {
          color: $preview-file-text-color;
        }
        .e-file-details {
          color: $preview-file-details-color;
        }
        .e-file-document {
          color: $preview-header-text-color;
        }
      }
    }
    .e-attached-file {
      .e-video-wrapper {
        .e-play-icon-wrapper {
          background-color: $video-play-background-color;
        }
        .e-chat-video-play {
          color: $video-play-icon-color;
        }
      }
    }

    .e-upload-failure-alert {
      background-color: $file-failure-bg-color;
      border: $file-failure-border;
      .e-chat-circle-close {
        color: $file-failure-circle-close-icon-color;
      }
      .e-failure-message {
        color: $file-failure-font-color;
      }
      .e-chat-close {
        color: $file-failure-close-icon-color;
      }
    }

    .e-footer .e-chat-drop-area,
    .e-attached-file {
      .e-chat-uploaded-file-item,
      .e-file-wrapper {
        border: $file-wrapper-border-width solid $file-wrapper-border;
        background-color: $file-wrapper-bg;
      }

      .e-chat-file-icon {
        color: $file-download-icon-color;
      }

      .e-chat-file-size {
        color: $file-size-text-color;
      }

      .e-chat-file-name {
        color: $file-name-text-color;
      }
    }

    .e-footer .e-chat-uploaded-file-item {
      &:hover {
        background-color: $file-hover-bg;
      }
      &:active {
        background-color: $file-pressed-bg;
      }
      .e-chat-close {
        &:hover {
          background: $file-close-icon-hover-bg;
          color: $file-close-icon-hover-color;
        }
        &:active {
          background-color: $file-close-icon-pressed-bg;
          color: $file-close-icon-pressed-color;
        }
      }
    }

    .e-footer .e-chat-drop-area,
    .e-footer .e-attachment-template {
      .e-chat-progress-bar {
        background-color: $file-progress-bar-bg-color;
      }
      .e-chat-progress-fill {
        background-color: $file-progress-bar-success-color;
      }
      .e-chat-progress-fill.e-chat-upload-failed {
        background-color: $file-progress-bar-failure-color;
      }
    }
  }

  // Mention popup related styles for @mention support in chat ui
  .e-chat-mention .e-chat-mention-user-icon,
  .e-chat-mention .e-chat-mention-user-icon img {
    border-radius: $chat-mention-user-icon-radius;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  .e-chat-mention.e-mention.e-popup {
    box-shadow: unset;
    border-radius: $mention-popup-border-radius;
    @if ($skin-name == 'Material3' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'FluentUI') {
      border: unset;
    }
    @else {
      border: $mention-popup-border solid $mention-popup-border-color;
    }
    @if ($skin-name == 'Material3') {
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
    }
    @if ($skin-name == 'FluentUI') {
      box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, .12), 0 .6px 1.8px 0 rgba(0, 0, 0, .12);
    }
  }

  @if ($skin-name == 'material-dark') {
    .e-chat-mention .e-dropdownbase .e-list-item.e-active {
      background-color: rgba(117, 117, 117, 1);
    }
  }

  .e-chat-mention .e-chat-mention-user-icon {
    color: $sender-icon-color;
    @if ($skin-name == 'Material3' or $theme-name == 'Material3-dark') {
      background: $sender-icon-bg-color;
    }
    @else {
      background-color: $sender-icon-bg-color;
    }
  }
}

@include export-module('chatui-bootstrap-dark-icons') {
  .e-chat-send::before {
    content: '\e816';
  }
  .e-chat-check::before {
    content: '\e97d';
  }
  .e-chat-copy::before {
    content: '\e33d';
  }
  .e-chat-close::before {
    content: '\e7fc';
  }
  .e-chat-pin::before {
    content: '\e178';
  }
  .e-chat-view::before {
    content: '\e345';
  }
  .e-chat-unpin::before {
    content: '\e179';
  }
  .e-chat-forward::before {
    content: '\e177';
  }
  .e-chat-reply::before {
    content: '\e176';
  }
  .e-chat-trash::before {
    content: '\e201';
  }
  .e-chat-error::before {
    content: '\e7e9';
  }
  .e-chat-seen::before {
    content: '\e16f';
  }
  .e-chat-scroll-down::before {
    content: '\e304';
  }
  .e-user-online::before {
    content: '\ea84';
  }
  .e-user-away::before {
    content: '\e93e';
  }
  .e-user-offline::before {
    content: '\e7e9';
  }
  .e-chat-attachment-icon::before {
    content: '\e1a0';
  }
  .e-chat-file-icon::before {
    content: '\e1a1';
  }
  .e-chat-upload::before {
    content: '\eba4';
  }
  .e-chat-video-play::before {
    content: '\e328';
  }
  .e-chat-download::before {
    content: '\ec32';
  }
  .e-chat-circle-close::before {
    content: '\e7e9';
  }
  .e-chat-back-icon::before {
    content: '\e828';
  }
}

@include export-module('chatui-bigger') {
  .e-bigger.e-chat-ui,
  .e-bigger .e-chat-ui {
    .e-chat-content {
      height: $chat-content-bigger-height;
    }
    .e-chat-header {
      height: $chat-bigger-header-height;
    }
    .e-message-header {
      font-size: $message-header-bigger-size;
    }
    .e-message-icon,
    .e-message-icon img {
      font-size: $bigger-message-icon-size;
      height: $bigger-message-icon-height;
      width: $bigger-message-icon-width;
    }
    .e-user-icon {
      height: $bigger-user-icon-font-height;
      width: $bigger-user-icon-font-width;
      font-size: $bigger-user-icon-font-size;
    }
    .e-left {
      &:not(.e-message-item-template) {
        padding-left: $chat-left-message-item-bigger-padding-left;
      }
    }
    .e-message-icon {
      top: 25px;
    }
    .e-user-text {
      margin-left: $bigger-user-text-margin-left;
      font-size: $typing-user-font-size-bigger;
    }
    .e-user-icon {
      margin-right: $bigger-user-icon-margin-right;
    }
    .e-text {
      font-size: $chat-text-font-size-bigger;
      padding: $chat-text-padding-bigger;
    }
    .e-time {
      font-size: $message-time-bigger-size;
    }
    .e-status-text {
      font-size: $typing-user-font-size-bigger;
    }
    .e-status-icon {
      height: $chat-status-icon-bigger-height;
      width: $chat-status-icon-bigger-width;
      font-size: $chat-status-icon-bigger-size;
    }
    .e-footer {
      &:not(.e-footer-template){
        .e-chat-send {
          font-size: $chat-send-icon-size-bigger;
        }
        .e-chat-attachment-icon {
          font-size: $chat-send-icon-size-bigger;
        }
      }
      .e-footer-icons-wrapper {
        gap: $chat-footer-icons-gap-bigger;
        padding: $chat-footer-icons-padding-bigger;
      }
      .e-chat-textarea {
        min-height: $chat-textarea-min-height-bigger;
        line-height: $chat-textarea-line-height-bigger;
        padding: $chat-textarea-padding-bigger;
        font-size: $bigger-chat-textarea-size;
      }
    }
    .e-timestamp {
      font-size: $timebreak-font-size-bigger;
      padding: $timebreak-padding-bigger;
    }
    .e-suggestions {
      li {
        font-size: $timebreak-font-size-bigger;
        padding: $chat-suggesstions-li-padding-bigger;
        line-height: $chat-suggesstion-bigger-line-height;
      }
    }
    &.e-rtl {
      .e-left {
        &:not(.e-message-item-template) {
          padding-right: $chat-left-message-item-bigger-padding-right;
          padding-left: $bigger-rtl-left-padding-left;
        }
      }
      .e-user-text {
        margin-right: $bigger-rtl-user-text-margin-right;
        margin-left: $bigger-rtl-user-text-margin-left;
      }
      .e-user-icon {
        margin-left: $bigger-rtl-user-icon-margin-left;
        margin-right: $bigger-rtl-user-icon-margin-right;
      }
      .e-footer {
        .e-footer-icons-wrapper {
          padding: $chat-footer-icons-rtl-padding-bigger;
          padding-right: $bigger-rtl-icons-wrapper-padding-right;
        }
      }
    }
    .e-user-status-icon{
      height: $user-status-icon-bigger-font-size;
      width: $user-status-icon-bigger-font-size;
      font-size: $user-status-icon-bigger-font-size;
      border-radius: $user-status-icon-border-radius;
      border: $bigger-user-status-icon-border solid;
      border-color: $user-status-icon-border-color;
    }

    .e-message-item .e-chat-message-toolbar {
      height: $chat-message-toolbar-bigger-height !important; /* stylelint-disable-line declaration-no-important */
      min-height: 40px;
      .e-toolbar-items .e-toolbar-item {
        &:first-child {
          margin-left: $bigger-tbar-first-item-margin-left;
        }
        &:last-child {
          margin-right: $bigger-tbar-last-item-margin-right;
        }
        min-height: 32px;
        .e-tbar-btn {
          min-height: 32px;
          padding: $bigger-tbar-btn-padding;
        }
      }
    }

    /* ======== Attachment Styles ======== */
    .e-message-content {
      .e-attached-file{
        .e-image-wrapper,
        .e-video-wrapper {
          .e-play-icon-wrapper {
            @include chat-wrapper-icon-alignment(44px, $chat-video-wrapper-bigger-height);
            .e-chat-video-play {
              font-size: $progress-video-icon-size-bigger;
              line-height: $progress-video-icon-height-bigger;
            }
          }
        }
      }
    }
    .e-pinned-message {
      .e-pinned-message-text{
        .e-pinned-img-thumb {
          height: $pinned-img-thumb-bigger-height;
          width: $pinned-img-thumb-bigger-width;
        }
        .e-chat-file-icon {
          font-size: $pin-file-icon-size-bigger;
          line-height: $pin-file-icon-height-bigger;
        }
      }
    }
    .e-reply-wrapper {
      .e-reply-media-preview {
        .e-reply-media-thumb {
          height: $reply-media-thumb-bigger-height;
          width: $reply-media-thumb-bigger-width;
        }
        .e-reply-file-name {
          font-size: $bigger-reply-file-name-size;
        }
        .e-chat-file-icon {
          font-size: $reply-file-icon-size-bigger;
          line-height: $reply-file-icon-height-bigger;
        }
      }
    }
    .e-preview-overlay {
      .e-preview-header {
        height: $preview-header-bigger-height;
        .e-chat-back-icon {
          font-size: $after-preview-close-size-bigger;
          line-height: $after-preview-close-height-bigger;
        }
        .e-chat-download {
          font-size: $after-preview-download-size-bigger;
          line-height: $after-preview-download-height-bigger;
        }
        .e-preview-file-name {
          font-size: $after-preview-file-size-bigger;
          line-height: $after-preview-file-line-height-bigger;
          font-weight: $after-preview-file-weight-bigger;
          letter-spacing: $after-preview-file-letter-spacing-bigger;
        }
      }
      .e-file-preview {
        .e-preview-file-text {
          font-size: $no-preview-text-size-bigger;
          font-weight: $no-preview-font-weight-bigger;
          line-height: $no-preview-line-height-bigger;
          letter-spacing: $no-preview-letter-sapcing-bigger;
        }
        .e-file-details {
          font-size: $preview-file-size-text-bigger;
          line-height: $preview-file-size-height-bigger;
          letter-spacing: $preview-file-size-spacing-bigger;
          font-weight: $preview-file-size-weight-bigger;
        }
      }
    }

    .e-upload-failure-alert {
      padding: $file-failure-padding-bigger;
      border-radius: $file-failure-border-radius-bigger;
      .e-chat-circle-close {
        font-size: $file-failure-circle-icon-size-bigger;
        line-height: $file-failure-circle-icon-height-bigger;
        margin-right: $file-failure-circle-margin-bigger;
        font-weight: $file-failure-circle-icon-weight-bigger;
      }
      .e-failure-message {
        font-size: $file-failure-message-size-bigger;
        line-height: $file-failure-message-bigger-height;
        letter-spacing: $file-failure-message-spacing-bigger;
        font-weight: $file-failure-message-weight-bigger;
      }
      .e-chat-close {
        font-size: $file-failure-close-icon-size-bigger;
        line-height: $file-failure-close-icon-height-bigger;
        margin-left: $file-failure-close-margin-bigger;
        font-weight: $file-failure-close-icon-weight-bigger;
      }
    }
    .e-footer .e-chat-drop-area:has(.e-chat-uploaded-file-item) {
      margin: 4px 8px;
    }

    .e-footer .e-chat-drop-area,
    .e-attached-file {
      .e-chat-uploaded-file-item {
        margin: 0 4px 4px;
        &:not(:has(.e-chat-close)) .e-chat-file-details {
          padding-right: 15px;
        }
      }

      .e-chat-file-details {
        padding: 3px 0 2px 2px;
      }
    }
  }

  // Mention popup related styles for @mention support in chat ui
  .e-bigger.e-chat-mention .e-chat-mention-user-name,
  .e-bigger .e-chat-mention .e-chat-mention-user-name {
    font-size: $bigger-mention-user-name-size;
    line-height: $bigger-mention-user-name-height;
    margin: $bigger-mention-user-name-margin;
  }

  .e-bigger.e-chat-mention .e-chat-mention-user-icon,
  .e-bigger.e-chat-mention .e-chat-mention-user-icon img,
  .e-bigger .e-chat-mention .e-chat-mention-user-icon,
  .e-bigger .e-chat-mention .e-chat-mention-user-icon img {
    height: $bigger-mention-user-icon-height;
    width: $bigger-mention-user-icon-width;
    font-size: $bigger-mention-user-icon-size;
  }

  .e-bigger.e-chat-mention .e-list-item,
  .e-bigger .e-chat-mention .e-list-item {
    text-indent: 0;
    height: $chat-mention-list-item-bigger-height;
  }
}

$inline-ai-assist-bg: $gray-base !default;
$inline-ai-assist-popup-border-radius: 4px !default;
$inline-ai-assist-content-padding: 12px 12px 16px 12px !default;
$inline-ai-assist-content-border-radius: 4px 4px 0 0 !default;
$inline-ai-assist-response-line-height: 22px !default;
$inline-ai-assist-response-font-size: 14px !default;
$inline-ai-assist-tbar-btn-padding: 0 8px !default;
$inline-ai-assist-footer-padding: 5px 0 5px 5px !default;
$inline-ai-assist-stop-line-height: 14px !default;
$inline-ai-assist-stop-font-size: 14px !default;
$inline-ai-assist-footer-icons-wrapper-padding: 12px 12px 12px 0 !default;
$inline-ai-assist-footer-tbar-min-height: 34px !default;
$inline-ai-assist-footer-tbar-btn-padding: 4px !default;
$inline-ai-assist-textarea-min-height: 42px !default;
$inline-ai-assist-textarea-line-height: 22px !default;
$inline-ai-assist-textarea-padding: 10px 12px !default;
$inline-ai-assist-textarea-font-size: 14px !default;
$inline-ai-assist-footer-border-radius: 4px !default;
$inline-ai-assist-expanded-footer-icons-wrapper-padding: 6px 12px !default;
$inline-ai-assist-toolbar-bottom-footer-icons-wrapper-padding: 6px 12px !default;
$inline-ai-assist-send-font-size: 16px !default;

$inline-ai-assist-popup-border: 1px solid $grey-99 !default;
$inline-ai-assist-response-text-color: $grey-light-font !default;
$inline-ai-assist-textarea-placeholder-color: $grey-f5 !default;
$inline-ai-assist-footer-focused-border-color: rgba(97, 97, 97, 1) !default;
$inline-ai-assist-send-color: $grey-light-font !default;
$inline-ai-assist-send-disabled-color: $grey-light-font !default;
$inline-ai-assist-content-bg: $gray-base !default;
$inline-ai-assist-popup-box-shadow: 0 1px 21px -3px rgba(0, 0, 0, .01) !default;
$inline-ai-assist-footer-bg: $gray-base !default;
$inline-ai-assist-content-border-bottom: 1px solid $grey-99 !default;
$inline-ai-assist-response-stopper-bg-color: rgba(117, 172, 219, 1) !default;
$inline-ai-assist-response-stopper-item-color: $brand-primary !default;
$inline-ai-assist-text-selection-bg: rgba(117, 172, 219, 1) !default;
$inline-ai-assist-text-selection-color: $brand-primary-font !default;

$inline-ai-assist-bigger-send-size: 20px !default;
$inline-ai-assist-bigger-bottom-icons-wrapper-padding: 6px 14px !default;
$inline-ai-assist-bigger-footer-icons-wrapper-padding: 6px 14px 6px 0 !default;
$inline-ai-assist-bigger-footer-tbar-min-height: 40px !default;
$inline-ai-assist-bigger-assist-textarea-min-height: 52px !default;
$inline-ai-assist-bigger-assist-textarea-line-height: 24px !default;
$inline-ai-assist-bigger-assist-textarea-padding: 14px !default;
$inline-ai-assist-bigger-assist-textarea-size: 16px !default;
$inline-ai-assist-response-stopper-height: 32px !default;
$inline-ai-assist-response-stopper-width: 32px !default;
$inline-ai-assist-stop-response-border-radius: 100px !default;
$inline-ai-assist-response-stopper-bigger-height: 40px !default;
$inline-ai-assist-response-stopper-bigger-width: 40px !default;
$inline-ai-assist-response-stopper-bigger-line-height: 20px !default;
$inline-ai-assist-response-stopper-bigger-font-size: 16px !default;
$inline-ai-assist-stop-padding-bigger: 11px !default;
$inline-ai-assist-indicator-wrapper-gap: 2px !default;
$inline-ai-assist-indicator-border-radius: 9999px !default;
$inline-ai-assist-indicator-bg: $gray-dark !default;
$inline-ai-assist-indicator-blink-bg: $brand-primary !default;

@include export-module('inlineaiassist-layout') {
  .e-inlineaiassist {
    display: flex;
    flex-direction: column;
    width: 100%;

    &.e-popup {
      justify-content: center;
      border-radius: $inline-ai-assist-popup-border-radius;
    }

    .e-inline-assist-popup {
      border-radius: $inline-ai-assist-popup-border-radius;
      display: flex;
      flex-direction: column;
    }

    .e-inline-assist-content {
      display: flex;
      flex-direction: column;
    }

    .e-content:has(.e-output-container) {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 0 auto;
      padding: $inline-ai-assist-content-padding;
      border-radius: $inline-ai-assist-content-border-radius;
    }

    .e-response-text {
      line-height: $inline-ai-assist-response-line-height;
      font-size: $inline-ai-assist-response-font-size;
      word-wrap: break-word;
    }

    .e-toolbar .e-toolbar-items .e-tbar-btn {
      cursor: pointer;
      &:hover,
      &:focus,
      &:active {
        padding: $inline-ai-assist-tbar-btn-padding;
      }
    }

    .e-footer {
      position: relative;
      width: 100%;
      .e-assist-textarea::-webkit-scrollbar-thumb {
        border-radius: 10px;
      }
      .e-assist-textarea::-webkit-scrollbar {
        width: 4px;
      }
      .hide-scrollbar .e-assist-textarea {
        scrollbar-width: none;
      }

      .e-inline-stop {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: $inline-ai-assist-stop-line-height;
        font-size: $inline-ai-assist-stop-font-size;
        height: $inline-ai-assist-response-stopper-height;
        width: $inline-ai-assist-response-stopper-width;
        padding: 6px;
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
        border-radius: $inline-ai-assist-stop-response-border-radius;
        &:focus-visible {
          outline: 1px solid;
        }
      }

      &.e-footer-expanded.e-toolbar-inline {
        .e-footer-icons-wrapper {
          .e-toolbar .e-toolbar-items.e-tbar-pos .e-toolbar-right {
            position: absolute;
          }
        }
      }

      &:not(.e-footer-expanded).e-toolbar-inline {
        .e-footer-icons-wrapper {
          width: fit-content;
          .e-toolbar-items.e-tbar-pos {
            .e-toolbar-right {
              position: unset;
            }
            .e-toolbar-center {
              position: absolute;
            }
          }
        }
      }
      .e-footer-icons-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: $inline-ai-assist-footer-icons-wrapper-padding;
        .e-toolbar {
          width: 100%;
          min-height: $inline-ai-assist-footer-tbar-min-height;
          .e-toolbar-item:not(.e-separator):not(.e-spacer) {
            padding: unset;
          }
          .e-tbar-btn {
            min-height: $inline-ai-assist-footer-tbar-min-height;
            min-width: $inline-ai-assist-footer-tbar-min-height;
            max-width: $inline-ai-assist-footer-tbar-min-height;
            cursor: default;
            &:focus {
              padding: 0;
            }
          }
          .e-tbar-btn:has(.e-inline-stop) {
            max-width: $inline-ai-assist-footer-tbar-min-height;
            .e-btn-icon {
              min-width: $inline-ai-assist-footer-tbar-min-height;
            }
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $inline-ai-assist-footer-tbar-min-height;
            .e-tbar-btn:focus-visible .e-icons:not(.disabled) {
              outline: 1px solid;
              padding: $inline-ai-assist-footer-tbar-btn-padding;
            }
          }
        }
        .e-icons {
          cursor: pointer;
        }
      }
      .e-assist-textarea {
        height: 100%;
        width: 100%;
        min-height: $inline-ai-assist-textarea-min-height;
        outline: none;
        overflow-y: auto;
        max-height: 280px;
        line-height: $inline-ai-assist-textarea-line-height;
        padding: $inline-ai-assist-textarea-padding;
        font-size: $inline-ai-assist-textarea-font-size;
      }
      .e-assist-textarea[placeholder]:empty::before {
        content: attr(placeholder);
        cursor: text;
      }

      .e-assist-textarea.e-response-indicator-active {
        cursor: default;
        display: flex;
        align-items: center;
      }

      .e-response-indicator {
        display: flex;
        align-items: baseline;
        gap: $inline-ai-assist-indicator-wrapper-gap;
        .e-indicator {
          border-radius: $inline-ai-assist-indicator-border-radius;
          height: .3rem;
          width: .3rem;
        }
        .e-indicator:nth-child(1) {
          animation-delay: .3333s;
        }
        .e-indicator:nth-child(2) {
          animation-delay: .6666s;
        }
        .e-indicator:nth-child(3) {
          animation-delay: .9999s;
        }

        .e-indicator-text {
          font-size: $inline-ai-assist-textarea-font-size;
        }
      }

      &:not(.e-footer-template) {
        display: flex;
        flex-direction: column;
        border-radius: $inline-ai-assist-footer-border-radius;
        &.e-footer-expanded .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $inline-ai-assist-expanded-footer-icons-wrapper-padding;
            justify-content: end;
          }
          .e-assist-textarea {
            width: 100%;
          }
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          display: block;
          .e-footer-icons-wrapper {
            padding: $inline-ai-assist-toolbar-bottom-footer-icons-wrapper-padding;
            .e-toolbar{
              width: 100%;
              .e-toolbar-left .e-toolbar-item:first-child {
                margin-left: unset;
              }
            }
          }
        }
        .e-inline-send {
          font-size: $inline-ai-assist-send-font-size;
        }
        .e-inline-send.disabled {
          pointer-events: none;
          opacity: .5;
          cursor: not-allowed;
        }
        .e-inline-send.enabled {
          pointer-events: auto;
          opacity: 1;
          cursor: pointer;
        }
        .e-textarea-icons-wrapper {
          display: flex;
          flex-direction: row;
        }
      }
      .e-hidden-textarea {
        display: none;
      }
    }
  }

  .e-mention-container {
    &.e-popup {
      border-radius: 4px;
    }
    .e-dropdownbase .e-list-item {
      margin-bottom: 0;
    }
  }
}

@include export-module('e-inlineaiassist-theme') {
  .e-inlineaiassist {
    background: $inline-ai-assist-bg;
    box-shadow: $inline-ai-assist-popup-box-shadow;
    &.e-popup {
      border: $inline-ai-assist-popup-border;
    }
    .e-response-text {
      color: $inline-ai-assist-response-text-color;
    }

    .e-toolbar-item::after {
      background-color: transparent;
    }
    .e-toolbar,
    .e-toolbar-items,
    .e-toolbar .e-toolbar-items .e-tbar-btn {
      background: transparent;
      border: none;
      box-shadow: none;
    }

    .e-footer {
      background: $inline-ai-assist-footer-bg;
      .e-assist-textarea::-webkit-scrollbar-thumb {
        background: rgba(153, 153, 153, 1);
      }
      .e-assist-textarea[placeholder]:empty::before {
        color: $inline-ai-assist-textarea-placeholder-color;
      }
      &:not(.e-footer-template) {
        &.e-footer-focused {
          border-bottom-color: $inline-ai-assist-footer-focused-border-color;
        }
        .e-inline-send {
          color: $inline-ai-assist-send-color;
          &.disabled {
            color: $inline-ai-assist-send-disabled-color;
          }
        }
      }
      .e-footer-icons-wrapper {
        .e-toolbar .e-toolbar-item {
          .e-tbar-btn {
            &:focus {
              box-shadow: none;
            }
            &:hover:not(:focus-visible),
            &:active {
              background: transparent;
              box-shadow: none;
              .e-icons {
                color: $inline-ai-assist-send-color;
              }
              .e-icons.disabled {
                color: $inline-ai-assist-send-disabled-color;
              }
              .e-inline-stop {
                color: $inline-ai-assist-response-stopper-item-color;
                @if ($theme-name == 'fluent2-highcontrast') {
                  color: rgba(27, 26, 25, 1);
                }
              }
            }
            &:focus:not(:focus-visible) {
              outline: none;
              box-shadow: none;
              background: transparent;
            }
          }
        }
      }
      .e-inline-stop.e-icons {
        color: $inline-ai-assist-response-stopper-item-color;
        background-color: $inline-ai-assist-response-stopper-bg-color;
        @if ($theme-name == 'fluent2-highcontrast') {
          color: rgba(27, 26, 25, 1);
        }
      }
    }

    .e-content:has(.e-output-container) {
      background: $inline-ai-assist-content-bg;
      border-bottom: $inline-ai-assist-content-border-bottom;
    }

    .e-indicator {
      background: $inline-ai-assist-indicator-bg;
      animation: e-inline-indicator-blink 1s infinite;
    }
    .e-indicator-text {
      color: $inline-ai-assist-textarea-placeholder-color;
    }

    @keyframes e-inline-indicator-blink {
      50% {
        background: $inline-ai-assist-indicator-blink-bg;
        height: .2rem;
      }
    }
  }
  .e-inlineaiassist-selected-text {
    background: $inline-ai-assist-text-selection-bg;
    color: $inline-ai-assist-text-selection-color;
  }
}

@include export-module('inlineaiassist-bootstrap-dark-icons') {
  .e-inline-send::before {
    content: '\e816';
  }
  .e-inline-accept::before {
    content: '\e97d';
  }
  .e-inline-discard::before {
    content: '\e7fc';
  }
  .e-inline-stop::before {
    content: '\e16e';
  }
}

@include export-module('inlineaiassist-bigger') {
  .e-bigger.e-inlineaiassist,
  .e-bigger .e-inlineaiassist {
    .e-footer {
      .e-inline-stop {
        height: $inline-ai-assist-response-stopper-bigger-height;
        width: $inline-ai-assist-response-stopper-bigger-width;
        min-height: $inline-ai-assist-response-stopper-bigger-height;
        padding: $inline-ai-assist-stop-padding-bigger;
        box-sizing: border-box;
        line-height: $inline-ai-assist-response-stopper-bigger-line-height;
        font-size: $inline-ai-assist-response-stopper-bigger-font-size;
      }
      &:not(.e-footer-template) {
        .e-inline-send {
          font-size: $inline-ai-assist-bigger-send-size;
        }
        &.e-toolbar-bottom .e-textarea-icons-wrapper {
          .e-footer-icons-wrapper {
            padding: $inline-ai-assist-bigger-bottom-icons-wrapper-padding;
          }
        }
      }
      .e-footer-icons-wrapper {
        padding: $inline-ai-assist-bigger-footer-icons-wrapper-padding;
        padding-left: 0;
        .e-toolbar {
          min-height: $inline-ai-assist-bigger-footer-tbar-min-height;
          .e-tbar-btn {
            min-height: $inline-ai-assist-bigger-footer-tbar-min-height;
            min-width: $inline-ai-assist-bigger-footer-tbar-min-height;
            max-width: $inline-ai-assist-bigger-footer-tbar-min-height;
          }
          .e-tbar-btn:has(.e-inline-stop) {
            max-width: $inline-ai-assist-bigger-footer-tbar-min-height;
            .e-btn-icon {
              min-width: $inline-ai-assist-bigger-footer-tbar-min-height;
            }
          }
          .e-toolbar-item {
            min-height: unset;
            min-width: unset;
            max-height: $inline-ai-assist-bigger-footer-tbar-min-height;
          }
          .e-toolbar-right .e-toolbar-item:last-child {
            margin-right: 0;
          }
        }
      }
      .e-assist-textarea {
        min-height: $inline-ai-assist-bigger-assist-textarea-min-height;
        line-height: $inline-ai-assist-bigger-assist-textarea-line-height;
        padding: $inline-ai-assist-bigger-assist-textarea-padding;
        font-size: $inline-ai-assist-bigger-assist-textarea-size;
      }
    }
  }
}

// Speechtotext component styles
$stt-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
$stt-border-radius: 9999px !default;
$stt-font-weight: 500 !default;
$stt-font-size: 12px !default;
$stt-line-height: 18px !default;
$stt-round-width: 40px !default;
$stt-round-height: 40px !default;
$stt-btn-font-size: 14px !default;
$stt-min-height: 40px !default;
$stt-min-width: 40px !default;
$stt-padding: 0 16px !default;
$stt-margin-top: -1px !default;
$stt-round-padding: 0 !default;
$stt-bigger-border-radius: $stt-border-radius !default;
$stt-bigger-font-weight: 500 !default;
$stt-bigger-font-size: 16px !default;
$stt-bigger-line-height: 24px !default;
$stt-bigger-round-width: 52px !default;
$stt-bigger-round-height: 52px !default;
$stt-bigger-btn-font-size: 20px !default;
$stt-bigger-min-height: 52px !default;
$stt-bigger-min-width: 52px !default;
$stt-bigger-padding: 0 20px !default;
$stt-bigger-margin-top: 0 !default;
$stt-bigger-round-padding: 0 !default;
@include export-module('speechtotext-layout') {
  .e-speech-to-text.e-btn {
    align-items: center;
    border-radius: $stt-border-radius;
    display: inline-flex;
    font-size: $stt-font-size;
    min-width: $stt-min-width;
    min-height: $stt-min-height;
    padding: $stt-padding;
    @if ($skin-name == 'fluent2') {
      line-height: $stt-btn-line-height;
    }
    &.e-round {
      width: $stt-round-width;
      height: $stt-round-height;
      padding: $stt-round-padding;
    }
    .e-btn-icon {
      font-size: $stt-font-size;
      margin-top: $stt-margin-top;
      @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
        line-height: $stt-btn-icon-line-height;
        width: 2em;
      }
    }
    &:disabled {
      pointer-events: none;
    }
    &.e-listening-state {
      animation: listening 1.2s infinite;
    }
  }

  .e-speech-to-text.e-round {
    .e-btn-icon {
      font-size: $stt-btn-font-size;
      @if ($skin-name == 'FluentUI') {
        margin-top: $stt-round-btn-margin-top;
      }
      @if ($skin-name == 'fluent2' or $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric-dark') {
        margin-top: $stt-round-btn-margin-top;
      }
    }
  }

  @keyframes listening {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 1;
    }
    50% {
      opacity: .5;
    }
  }
}

@include export-module('speechtotext-theme') {
  // Speechtotext component styles
  .e-speech-to-text {
    box-shadow: $stt-box-shadow;

    &:hover:not(:focus),
    &:active,
    &.e-active,
    &:disabled {
      box-shadow: $stt-box-shadow;
    }

    &:focus {
      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'tailwind3' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5.3' and $skin-name != 'bootstrap5-dark') {
        box-shadow: $stt-box-shadow;
      }
      @if $skin-name == 'tailwind' {
        box-shadow: $stt-focus-box-shadow;
      }
    }
    @if $skin-name == 'tailwind3' {
      &:focus-visible {
        box-shadow: $stt-focus-box-shadow !important; /* stylelint-disable-line declaration-no-important */
      }
    }
    &.e-flat {
      box-shadow: none;
    }
  }
}

@include export-module('speechtotext-bootstrap-dark-icons') {
  .e-listen-icon::before {
    content: '\e171';
  }
  .e-listen-stop::before {
    content: '\e16e';
  }
}

@include export-module('speechtotext-bigger') {
  // Speechtotext component styles

  .e-bigger .e-speech-to-text.e-btn,
  .e-bigger.e-speech-to-text.e-btn {
    align-items: center;
    border-radius: $stt-bigger-border-radius;
    display: inline-flex;
    font-size: $stt-bigger-font-size;
    min-width: $stt-bigger-min-width;
    min-height: $stt-bigger-min-height;
    padding: $stt-bigger-padding;
    @if ($skin-name == 'FluentUI') {
      line-height: $stt-bigger-btn-line-height;
      display: inline;
    }
    &.e-round {
      width: $stt-bigger-round-width;
      height: $stt-bigger-round-height;
      padding: $stt-bigger-round-padding;
    }
    .e-btn-icon {
      font-size: $stt-bigger-font-size;
      @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3') {
        line-height: $stt-bigger-btn-icon-line-height;
        width: 2em;
      }
      @if ($skin-name != 'bootstrap4' or $skin-name != 'bootstrap' or $skin-name != 'bootstrap-dark') {
        margin-top: $stt-bigger-margin-top;
      }
    }
  }

  .e-bigger .e-speech-to-text.e-round,
  .e-bigger.e-speech-to-text.e-round {
    .e-btn-icon {
      font-size: $stt-bigger-btn-font-size;
      @if ($skin-name == 'FluentUI') {
        margin-top: $stt-bigger-round-btn-margin-top;
      }
      @if ($skin-name == 'fluent2'or $skin-name == 'Material3') {
        margin-top: $stt-bigger-round-btn-margin-top;
      }
      @if ($skin-name == 'material' or $skin-name == 'fabric-dark') {
        margin-top: $stt-bigger-round-btn-margin-top;
      }
    }
  }
}

/* ======== BlockEditor Styles ======== */
$be-font-family: $font-family !default;
$be-font-size: 14px !default;
$be-font-weight: 400 !default;
$be-line-height: 22px !default;
$be-font-size-bigger: 16px !default;
$be-font-weight-bigger: 400 !default;
$be-line-height-bigger: 24px !default;
$be-bg-color: $gray-base !default;
$be-color: $grey-light-font !default;

/* ======== Drag and Drop Styles ======== */
$be-drop-indicator-height: 2px !default;
$be-drop-indicator-before-height: 8px !default;
$be-drop-indicator-before-width: 8px !default;
$be-drag-clone-block-padding: 4px 8px !default;
$be-drag-clone-border-radius: 4px !default;
$be-drop-indicator-bg-color: $brand-primary !default;
$be-dragging-clone-bg-color: rgba(189, 220, 255, .8) !default;

/* ======== Floating Icons Styles ======== */
$be-floating-icon-width: 20px !default;
$be-floating-icon-height: 20px !default;
$be-floating-icon-line-height: 14px !default;
$be-floating-icon-font-size: 14px !default;
$be-floating-icon-font-weight: 400 !default;
$be-floating-icon-border-radius: 4px !default;
$be-floating-icon-border-width: 1px !default;
$be-floating-icon-width-bigger: 24px !default;
$be-floating-icon-height-bigger: 24px !default;
$be-floating-icon-line-height-bigger: 16px !default;
$be-floating-icon-font-size-bigger: 16px !default;
$be-floating-icon-font-weight-bigger: 400 !default;
$be-floating-icon-border-color: transparent !default;
$be-floating-icon-color: $grey-f5 !default;
$be-floating-icon-color-hover: $grey-light-font !default;
$be-floating-icon-hover-bg-color: $grey-lighter !default;
$be-drag-icon-selected-color: $grey-f5 !default;
$be-drag-icon-selected-bg-color: $grey-lighter !default;

/* ======== Inline toolbar Styles ======== */
$be-inline-toolbar-border-radius: 4px !default;
$be-inline-toolbar-border-width: 1px !default;
$be-inline-toolbar-popup-bg-color: $gray-darker !default;
$be-inline-toolbar-popup-border-color: $grey-88 !default;
$be-inline-toolbar-popup-shadow: 0 2px 11px 0 rgba(0, 0, 0, .1), 0 3px 4px -1px rgba(0, 0, 0, .05) !default;
$be-inline-toolbar-item-active-bg-color: rgba($grey-base, .12) !default;
$be-inline-toolbar-item-active-color: $grey-dark-font !default;
$be-inline-toolbar-items-margin: 4px 1px !default;
$be-inline-toolbar-item-padding: 0 4px !default;

$be-colorpicker-custom-palette-padding: 0 !default;
$be-color-picker-margin-top: 3px !default;
$be-color-picker-width: 100%;
$be-color-picker-height: auto;

$be-split-btn-focus-bg: $grey-dark !default;
$be-split-btn-hover-bg: none !default;
$be-button-focus-box-shadow: none !default;
$be-icon-color: $grey-dark-font !default;
$be-hover-icons-color: $grey-dark-font !default;

$be-quick-tb-btn-hover: rgba($grey-base, .12) !default;
$be-quick-pop-item-focus-bg: rgba($grey-base, .12) !default;
$be-quick-item-active-bg: rgba($grey-base, .12) !default;
$be-split-btn-border-radius: 4px !default;
$be-default-btn-bg: $grey-darker !default;
$be-quick-popup-bg-color: $gray !default;
$be-split-btn-border: 1px solid transparent !default;
$be-hover-split-btn-border: 1px solid $grey-white !default;
$be-active-btn-icons-color: $grey-dark-font !default;
$be-split-btn-span-hover-bg: $grey !default;
$be-default-icon-color: $grey-dark-font !default;
$be-drop-btn-active-bg: $grey-8c !default;
$be-btn-active-bg: $grey-dark !default;

/* ======== Block level syles ======== */
$be-block-placeholder-color: $grey-light-font !default;

/* ======== Numbered And Bullet List ======== */
$be-numberlist-font-weight: 400 !default;
$be-numberlist-font-size: 14px !default;
$be-numberlist-font-weight-bigger: 400 !default;
$be-numberlist-font-size-bigger: 16px !default;

/* ======== Quote and Callout Block ======== */
$be-blockquote-left-width: 3px !default;
$be-blockquote-text-padding: 8px !default;
$be-blockquote-margin: 0 !default;
$be-blockquote-left-width-bigger: 3px !default;
$be-blockquote-text-padding-bigger: 8px !default;
$be-blockquote-border-color: $grey-lighter !default;
$be-callout-border-radius: 4px !default;
$be-callout-icon-height: 16px !default;
$be-callout-icon-width: 16px !default;
$be-callout-padding: 12px !default;
$be-callout-padding-bigger: 16px !default;
$be-callout-icon-height-bigger: 18px !default;
$be-callout-icon-width-bigger: 18px !default;
$be-callout-bg-color: $grey-lighter !default;

/* ======== Toggle Block Styles ======== */
$be-toggle-icon-height: 14px !default;
$be-toggle-icon-width: 14px !default;
$be-toggle-icon-margin: 8px !default;
$be-toggle-icon-height-bigger: 16px !default;
$be-toggle-icon-width-bigger: 16px !default;
$be-toggle-icon-margin-bigger: 12px !default;

/* ======== Selection Overlay ======== */
$be-selection-overlay-border-width: 1px !default;
$be-selection-overlay-border-radius: 4px !default;
$be-selection-overlay-border-color: $brand-primary !default;
$be-selection-overlay-bg-color: rgba(117, 172, 219, 1) !default;

/* ======== Image Placeholder Styles ======== */
$be-image-placeholder-ele-height: 48px !default;
$be-image-placeholder-ele-height-bigger: 56px !default;
$be-image-placeholder-ele-border-radius: 12px !default;
$be-image-placeholder-ele-padding: 13px 16px !default;
$be-image-placeholder-ele-padding-bigger: 16px !default;
$be-image-placeholder-text-icon-gap: 14px !default;
$be-image-placeholder-text-icon-gap-bigger: 19px !default;
$be-image-placeholder-icon-font-weight: 400 !default;
$be-image-placeholder-icon-font-weight-bigger: 400 !default;
$be-image-placeholder-icon-font-size: 16px !default;
$be-image-placeholder-icon-font-size-bigger: 18px !default;
$be-image-placeholder-text-font-size: 14px !default;
$be-image-placeholder-text-font-size-bigger: 16px !default;
$be-image-placeholder-text-font-weight: 400 !default;
$be-image-placeholder-text-font-weight-bigger: 400 !default;
$be-image-placeholder-text-line-height: 22px !default;
$be-image-placeholder-text-line-height-bigger: 24px !default;
$be-image-placeholder-border-width: 1px !default;
$be-image-placeholder-border-color: $gray-darker !default;
$be-image-placeholder-bg-color: $gray-light !default;
$be-image-placeholder-icon-color: $grey-light-font !default;
$be-image-placeholder-text-color: $grey-light-font !default;

/* ======== Image Uploader popup ======== */
$be-image-upload-popup-radius: 6px !default;
$be-image-upload-popup-tab-content-padding: 12px 16px !default;
$be-image-upload-popup-tab-content-padding-bigger: 16px !default;
$be-embed-btn-padding-top: 20px !default;
$be-embed-btn-padding-top-bigger: 24px !default;
$be-image-upload-popup-boder-width: 1px !default;
$be-image-upload-popup-boder-color: $grey-lighter !default;
$be-image-upload-popup-bg-color: $gray-dark !default;
$be-image-upload-popup-box-shadow: 0 1px 21px -3px rgba(0, 0, 0, .1), 0 2px 11px 0 rgba(0, 0, 0, .1), 0 3px 4px -1px rgba(0, 0, 0, .05) !default;
$be-upload-popup-tab-content-border-top-color: $grey-lighter !default;
$be-upload-popup-drag-boder-color: $brand-primary !default;
$be-upload-popup-drag-hover-color: rgba(189, 220, 255, 1) !default;
$be-image-block-badge-top: 12px !default;
$be-image-block-badge-right: 12px !default;
$be-image-block-badge-top-bigger: 16px !default;
$be-image-block-badge-right-bigger: 16px !default;

/* ======== Divider Block ======== */
$be-divider-selected-bg-color: rgba(138, 193, 255, 1) !default;
$be-divider-border-color: $grey-lighter !default;

/* ======== Link syles ======== */
$be-link-anchor-color: $brand-primary !default;

/* ======== Inline content syles ======== */
$be-inline-code-font-size: 12px !default;
$be-inline-code-font-weight: 400 !default;
$be-inline-code-line-height: 18px !default;
$be-inline-code-padding: 2px 4px !default;
$be-inline-code-border-radius: 2px !default;
$be-inline-code-font-size-bigger: 14px !default;
$be-inline-code-line-height-bigger: 22px !default;
$be-inline-code-padding-bigger: 1px 4px !default;
$be-inline-code-bg-color: rgba(157, 157, 157, .15) !default;
$be-inline-code-text-color: rgb(237, 72, 76) !default;

/* ======== Slash Command styles ======== */
$be-mention-popup-border-width: 1px !default;
$be-mention-popup-border-radius: 4px !default;
$be-mention-popup-padding: 4px !default;
$be-mention-popup-header-padding: 8px !default;
$be-mention-popup-item-padding-left: 8px !default;
$be-mention-popup-padding-bigger: 6px !default;
$be-mention-popup-item-padding-left-bigger: 6px !default;
$be-mention-popup-header-padding-bigger: 8px !default;
$be-mention-popup-border-color: $gray-dark !default;
$be-mention-popup-bg-color: $gray-dark !default;
$be-mention-popup-shadow: 0 2px 11px 0 rgba(0, 0, 0, .1), 0 3px 4px -1px rgba(0, 0, 0, .05) !default;

/* ======== Context menu syles ======== */
$be-ctmenu-content-gap: 8px !default;
$be-ctmenu-icon-font-size: 16px !default;
$be-ctmenu-icon-line-height: 16px !default;
$be-ctmenu-text-font-size: 14px !default;
$be-ctmenu-text-line-height: 22px !default;
$be-ctmenu-shortcut-font-size: 12px !default;
$be-ctmenu-shortcut-line-height: 16px !default;
$be-ctmenu-icon-font-size-bigger: 18px !default;
$be-ctmenu-icon-line-height-bigger: 18px !default;
$be-ctmenu-text-font-size-bigger: 16px !default;
$be-ctmenu-text-line-height-bigger: 24px !default;
$be-ctmenu-shortcut-font-size-bigger: 14px !default;
$be-ctpupmenu-shortcut-font-size-bigger: 12px !default;
$be-ctmenu-shortcut-line-height-bigger: 22px !default;
$be-ctmenu-icon-color: $grey-f5 !default;
$be-ctmenu-text-color: $grey-light-font !default;
$be-ctmenu-shortcut-color: $grey-light-font !default;
$be-ctmenu-shortcut-color-disabled: $grey-f5 !default;

/* ======== Check Box syles ======== */
$be-checkbox-width: 18px !default;
$be-checkbox-height: 18px !default;
$be-checkmark-font-size: 12px !default;
$be-checkmark-line-height: 12px !default;
$be-checkbox-border-radius: 2px !default;
$be-checkbox-border: 1px !default;
$be-checkbox-width-bigger: 18px !default;
$be-checkbox-height-bigger: 18px !default;
$be-checkmark-font-size-bigger: 14px !default;
$be-checkmark-line-height-bigger: 14px !default;
$be-checkbox-border-bigger: 1px !default;
$be-checklist-marker-border-color: $grey-lighter !default;
$be-checklist-marker-checked-bg-color: $gray-base !default;
$be-checklist-marker-checked-border-color: $gray-base !default;
$be-checklist-marker-checked-color: $grey-light-font !default;
$be-checked-block-strikethrough-color: $grey-light-font !default;

/* ======== User and Label Mention Chip Syles ======== */
$be-user-mention-chip-height: 30px !default;
$be-user-mention-avatar-height: 20px !default;
$be-user-mention-avatar-width: 20px !default;
$be-user-mention-chip-padding: 5px 4px !default;
$be-user-mention-chip-font-size: 14px !default;
$be-user-mention-chip-font-weight: 400 !default;
$be-user-mention-chip-line-height: 22px !default;
$be-user-mention-chip-border-radius: 2px !default;
$be-label-mention-chip-height: 30px !default;
$be-label-mention-chip-padding: 4px !default;
$be-label-mention-chip-font-size: 14px !default;
$be-label-mention-chip-line-height: 22px !default;
$be-label-mention-chip-border-radius: 4px !default;
$be-user-mention-chip-height-bigger: 30px !default;
$be-user-mention-avatar-height-bigger: 20px !default;
$be-user-mention-avatar-width-bigger: 20px !default;
$be-user-mention-chip-padding-bigger: 5px 4px !default;
$be-user-mention-chip-font-size-bigger: 16px !default;
$be-user-mention-chip-line-height-bigger: 24px !default;
$be-label-mention-chip-height-bigger: 40px !default;
$be-label-mention-chip-padding-bigger: 8px !default;
$be-label-mention-chip-font-size-bigger: 16px !default;
$be-label-mention-chip-line-height-bigger: 24px !default;

/* ======== User and Label Mention Syles ======== */
$be-user-mention-item-padding: 6px 3px !default;
$be-label-mention-item-padding: 8px 4px !default;
$be-mention-avatar-width: 30px !default;
$be-mention-avatar-height: 30px !default;
$be-label-avatar-width: 20px !default;
$be-label-avatar-height: 20px !default;
$be-user-mention-item-padding-bigger: 6px 3px !default;
$be-label-mention-item-padding-bigger: 10px 6px !default;
$be-mention-avatar-width-bigger: 34px !default;
$be-mention-avatar-height-bigger: 34px !default;
$be-label-avatar-width-bigger: 20px !default;
$be-label-avatar-height-bigger: 20px !default;
$be-mention-menu-avatar-text-color: $brand-primary-font !default;

/* ======== Code Block Styles ======== */
$be-code-block-border-radius: 6px !default;
$be-code-block-container-border-width: 1px !default;
$be-code-block-toolbar-padding: 12px !default;
$be-code-block-lang-padding: 6px 12px !default;
$be-code-block-lang-border-radius: 4px !default;
$be-code-block-lang-border-width: 1px !default;
$be-code-copy-btn-padding: 9px !default;
$be-code-copy-btn-border-radius: 4px !default;
$be-code-toolbar-height: 34px !default;
$be-code-lang-height: 34px !default;
$be-code-copy-btn-height: 34px !default;
$be-code-copy-btn-width: 34px !default;
$be-code-copy-btn-font-size: 14px !default;
$be-code-block-toolbar-padding-bigger: 16px !default;
$be-code-block-lang-padding-bigger: 8px 13px !default;
$be-code-copy-btn-padding-bigger: 10px !default;
$be-code-toolbar-height-bigger: 40px !default;
$be-code-lang-height-bigger: 40px !default;
$be-code-copy-btn-height-bigger: 40px !default;
$be-code-copy-btn-width-bigger: 40px !default;
$be-code-copy-btn-font-size-bigger: 16px !default;
$be-code-copy-btn-bg-color: $gray-light !default;
$be-code-copy-btn-color: $grey-f5 !default;
$be-code-copy-btn-bg-color-hover: $grey-lighter !default;
$be-code-copy-btn-color-hover: $grey-light-font !default;
$be-code-block-lang-border-color: $grey-lighter !default;
$be-code-block-lang-bg-color: $gray-light !default;
$be-code-block-container-border-color: $grey-lighter !default;
$be-code-block-container-bg-color: $gray-light !default;

/* ======== Table syles ======== */
$be-table-heading-height: 36px !default;
$be-table-heading-padding: 7px !default;
$be-table-heading-font-weight: 700 !default;
$be-table-heading-font-size: 14px !default;
$be-table-heading-line-height: 22px !default;
$be-table-col-height: 36px !default;
$be-table-col-padding: 7px !default;
$be-table-col-font-weight: 400 !default;
$be-table-col-font-size: 14px !default;
$be-table-col-line-height: 22px !default;
$be-table-heading-height-bigger: 44px !default;
$be-table-heading-padding-bigger: 11px !default;
$be-table-heading-font-size-bigger: 16px !default;
$be-table-heading-line-height-bigger: 22px !default;
$be-table-col-height-bigger: 44px !default;
$be-table-col-padding-bigger: 11px !default;
$be-table-col-font-size-bigger: 14px !default;
$be-table-col-line-height-bigger: 22px !default;
$be-table-border-color: $grey-44 !default;
$be-table-header-row-bg-color: $grey-lighter !default;
$be-table-header-color: $grey-light-font !default;
$be-table-body-row-bg-color: $gray-base !default;
$be-table-body-color: $grey-light-font !default;
$be-table-cell-focus-color: $brand-primary !default;
$be-table-cell-focus-shadow: unset !default;
$be-table-add-indicator-bg-color: $brand-primary !default;
$be-table-add-indicator-color: $brand-primary-font !default;
$be-table-hover-line-bg-color: $brand-primary !default;
$be-table-row-hover-bg-color: $gray-light !default;
$be-table-row-hover-color: $grey-light-font !default;
$be-table-row-focus-bg-color: $grey-44 !default;
$be-table-row-focus-color: $grey-light-font !default;
$be-table-cell-hover-border: $brand-primary !default;
$be-table-dot-bg-color: $grey-ad !default;
$be-table-gripper-border-radius: 4px !default;
$be-table-gripper-hover-bg: rgba($brand-primary, .3) !default;
$be-table-gripper-hover-color: $grey-f5 !default;
$be-table-row-selected-bg: $grey-44 !default;
$be-table-row-gripper-pressed-bg: $brand-primary !default;
$be-table-row-gripper-pressed-color: $brand-primary-font !default;
$be-table-col-selected-bg: $grey-44 !default;
$be-table-col-gripper-pressed-bg: $brand-primary !default;
$be-table-col-gripper-pressed-color: $brand-primary-font !default;
$be-table-row-col-selected-border: $brand-primary !default;
$be-table-insert-handle-border: $brand-primary !default;
$be-table-insert-handle-color: $brand-primary !default;
$be-table-row-col-hover-line: $brand-primary !default;
$be-table-row-col-insert-handle-size: 10px !default;
$be-table-row-col-insert-handle-line-height: 10px !default;
$be-table-row-col-action-handle-size-bigger: 14px !default;
$be-table-action-handle-line-height-bigger: 100% !default;
$be-table-icons-border-radius: 50% !default;
$be-table-gripper-action-popup-border-radius: 5px !default;
$be-table-gripper-action-popup-padding: 3px !default;

/* ======== scrollbar syles ======== */
$be-scrollbar-width: 6px !default;
$be-scrollbar-color: $grey-ad !default;

/* ======== Selection syles ======== */
$be-text-selection-bg-color: rgba(189, 220, 255, 1) !default;

$be-heading-margin: 0 !default;
$be-heading-padding: 0 !default;
$be-h1-font-size: 2.857em !default;
$be-h1-font-weight: 600 !default;
$be-h1-line-height: 1.2 !default;
$be-h2-font-size: 2.285em !default;
$be-h2-font-weight: 600 !default;
$be-h2-line-height: 1.2 !default;
$be-h3-font-size: 2em !default;
$be-h3-font-weight: 600 !default;
$be-h3-line-height: 1.2 !default;
$be-h4-font-size: 1.714em !default;
$be-h4-font-weight: 600 !default;
$be-h4-line-height: 1.2 !default;
$be-h5-font-size: 1.428em !default;
$be-h5-font-weight: 600 !default;
$be-h5-line-height: 1.2 !default;
$be-h6-font-size: 1.142em !default;
$be-h6-font-weight: 600 !default;
$be-h6-line-height: 1.5 !default;
$be-editable-element-padding: 20px !default;
$be-editable-element-border: unset !default;
$be-hr-margin: 6px 0 !default;
$be-block-padding: 4px 8px !default;
$be-block-border: 1px !default;
$be-block-border-radius: 4px !default;
$be-block-table-padding: 16px 8px 4px !default;
$be-list-block-margin-left: 15px !default;
$be-list-ul-li-padding-left: 8px !default;
$be-list-ol-li-padding-left: 4px !default;
$be-block-Checklist-margin-left: 0 !default;
$be-callout-icon-margin-top: 8px !default;
$be-callout-icon-margin-left: 10px !default;
$be-toggle-header-margin-bottom: 5px !default;
$be-user-chip-gap: 4px !default;
$be-em-avatar-border-radius: 50% !default;
$be-em-img-border-radius: 50% !default;
$be-drop-indicator-margin: 4px 0 !default;
$be-drop-indicator-border-radius: 50% !default;
$be-divider-drop-indicator-top: 30px !default;
$be-block-container-margin-top: 4px !default;
$be-code-block-languages-margin-left: auto !default;
$be-code-block-copy-btn-margin-left: 8px !default;
$be-code-block-margin: 0 !default;
$be-code-block-padding: 10px 24px !default;
$be-code-block-border: 0 !default;
$be-code-block-radius: 0 !default;
$be-row-col-indicator-border-radius: 50% !default;
$be-row-col-indicator-font-size: 14px !default;
$be-image-container-margin: 6px 2px !default;
$be-rtl-callout-block-padding-left: 0 !default;
$be-rtl-toggle-block-padding-left: 0 !default;
$be-rtl-list-block-margin-right: 23px !default;
$be-rtl-list-block-margin-left: 0 !default;
$be-rtl-ul-li-padding-right: 8px !default;
$be-rtl-ul-li-padding-left: 0 !default;
$be-rtl-ol-li-padding-right: 4px !default;
$be-rtl-ol-li-padding-left: 0 !default;
$be-rtl-block-Checklist-margin-right: 8px !default;
$be-rtl-block-Checklist-margin-left: unset !default;
$be-floating-icons-gap: 4px !default;
$be-rtl-list-item-padding-right: 15px !default;
$be-rtl-list-item-padding-left: 0 !default;
$be-blockaction-menu-line-height: 32px !default;
$be-blockaction-menu-padding: 0 !default;
$be-blockaction-item-padding-right: 4px !default;
$be-mention-margin-top: 5px !default;
$be-fixed-head-padding-left: 0 !default;
$be-dropdownbase-list-padding-left: unset !default;
$be-inline-bgColor-icon-size: 14px !default;
$be-toolbar-bgcolor-dropdown-size: 12px !default;
$be-toolbar-btn-icon-line-height: unset !default;
$be-toolbar-icon-left-margin-left: unset !default;
$be-toolbar-icon-left-margin-right: unset !default;
$be-toolbar-first-child-margin-left: 8px !default;
$be-rtl-toolbar-first-child-margin-left: 0 !default;
$be-rtl-toolbar-first-child-margin-right: 8px !default;
$be-link-content-gap: 15px !default;
$be-link-footer-gap: 8px !default;
$be-link-footer-btn-margin-left: 0 !default;
$be-link-footer-btn-margin-right: 0 !default;
$be-label-mention-item-gap: 8px !default;
$be-popup-em-avatar-border-radius: 50% !default;
$be-popup-em-img-border-radius: 50% !default;
$be-popup-em-content-gap: 8px !default;
$be-color-picker-margin-top: 5px !default;

$be-code-block-copy-btn-bigger-margin: 12px !default;
$be-code-block-bigger-margin: 0 !default;
$be-code-block-bigger-padding-left: 24px !default;
$be-menu-item-bigger-line-height: 40px !default;
$be-menu-item-bigger-padding: 0 !default;
$be-fixed-head-bigger-padding-left: 0 !default;
$be-inline-bgColor-icon-bigger-size: 16px !default;
$be-inline-btn-icon-bigger-size: 14px !default;
$be-toolbar-child-bigger-margin-left: 10px !default;
$be-rtl-toolbar-child-bigger-margin-left: 0 !default;
$be-rtl-toolbar-child-bigger-margin-right: 10px !default;
$be-label-mention-item-bigger-gap: 8px !default;
$be-em-content-bigger-gap: 8px !default;

$be-hr-border: 2px !default;
$be-table-block-border: 1px !default;
$be-cell-focus-outline: 1px !default;
$be-image-focus-outline: 2px !default;
$be-audio-block-outline: 2px !default;
$be-video-block-outline: 2px !default;

//height variables
$be-hr-wrapper-height: 100% !default;
$be-callout-block-svg-height: inherit !default;
$be-toggle-block-svg-height: inherit !default;
$be-em-img-height: 100% !default;
$be-code-block-container-ddl-height: auto !default;
$be-code-block-toolbar-height: auto !default;
$be-col-add-indicator-height: 20px !default;
$be-row-hover-line-height: 2px !default;
$be-image-block-height: auto !default;
$be-menu-item-height: 32px !default;
$be-ctmenu-item-template-height: 100% !default;
$be-popup-em-img-height: 100% !default;
$be-menu-item-bigger-height: 40px !default;

$be-col-add-indicator-width: 20px !default;
$be-block-padding-left: calc(50px + var(--block-indent) * 1px) !default;
$be-block-table-padding-left: calc(50px + var(--block-indent) * 1px) !default;
$be-callout-block-padding-left: calc(45px + var(--block-indent) * 1px) !default;
$be-toggle-block-padding-left: calc(21px + var(--block-indent) * 1px) !default;
$be-dragging-clone-block-padding-left: calc(4px + var(--block-indent) * 1px) !default;
$be-dragging-clone-callout-block-padding-left: calc(45px + var(--block-indent) * 1px) !default;
$be-dragging-clone-toggle-block-padding-left: calc(21px + var(--block-indent) * 1px) !default;
$be-rtl-callout-block-padding-right: calc(45px + var(--block-indent) * 1px) !default;
$be-rtl-toggle-block-padding-right: calc(21px + var(--block-indent) * 1px) !default;
$be-rtl-list-block-padding-left: calc(50px - var(--block-indent) * 1px) !default;
$be-rtl-list-block-padding-right: calc(var(--block-indent) * 1px) !default;
$be-drop-indicator-width: calc(100% - 58px) !default;
$be-row-col-dot-width: 6.4px !default;
$be-table-insert-handle-bg: $gray-base !default;
$be-table-popup-icon-color: $grey-light-font !default;
$be-table-col-gripper-height: 20px !default;
$be-table-row-gripper-width: 36px !default;
$be-table-col-gripper-height-bigger: 28px !default;
$be-table-row-gripper-width-bigger: 44px !default;
$be-table-col-gripper-top: -4px !default;
$be-table-row-gripper-left: 14px !default;
$be-table-col-gripper-top-bigger: -12px !default;
$be-table-row-gripper-left-bigger: 6px !default;
$be-table-popup-icon-hover-bg: $gray-dark !default;
$be-table-popup-icon-hover-color: $grey-light-font !default;
$be-table-popup-icon-pressed-bg: $gray !default;
$be-table-popup-icon-pressed-color: $grey-light-font !default;
$be-table-popup-icon-size: 16px !default;
$be-table-popup-icon-size-bigger: 18px !default;
$be-table-popup-icon-padding: 8px !default;
$be-table-popup-icon-padding-bigger: 11px !default;

@include export-module('blockeditor-layout') {

  /* ======== Main Editor ======== */
  .e-blockeditor {
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    display: block;

    &:has([data-resizing = 'true']) {
      cursor: col-resize;
    }
    .e-block-container {
      font-family: $be-font-family;
      font-size: $be-font-size;
      font-weight: $be-font-weight;
      line-height: $be-line-height;
      .em-content {
        font-family: $be-font-family;
        font-size: $be-font-size;
        line-height: $be-line-height;
      }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: $be-heading-margin;
      padding: $be-heading-padding;
    }
    h1 {
      font-size: $be-h1-font-size;
      font-weight: $be-h1-font-weight;
      line-height: $be-h1-line-height;
    }

    h2 {
      font-size: $be-h2-font-size;
      font-weight: $be-h2-font-weight;
      line-height: $be-h2-line-height;
    }

    h3 {
      font-size: $be-h3-font-size;
      font-weight: $be-h3-font-weight;
      line-height: $be-h3-line-height;
    }

    h4 {
      font-size: $be-h4-font-size;
      font-weight: $be-h4-font-weight;
      line-height: $be-h4-line-height;
    }

    h5 {
      font-size: $be-h5-font-size;
      font-weight: $be-h5-font-weight;
      line-height: $be-h5-line-height;
    }

    h6 {
      font-size: $be-h6-font-size;
      line-height: $be-h6-font-weight;
      line-height: $be-h6-line-height;
    }

    /* Remove default styles */
    ul,
    ol {
      margin-block: initial;
      margin-inline: initial;
      padding-block: initial;
      padding-inline: initial;
    }
    ol {
      list-style: none;
    }
    a {
      text-decoration: none;
      user-select: auto;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }

    /* ======== Block Container ======== */
    .e-block-container {
      &.e-mention.e-editable-element {
        width: 100%;
        padding: $be-editable-element-padding;
        border: $be-editable-element-border;
      }
    }

    /* ======== Horizontal Scrollable Block styles ======== */
    .e-scrollable-block {
      overflow-x: auto;
      scroll-behavior: smooth;
      position: relative;
    }

    /* ======== Divider Blocks Level styles ======== */
    .e-divider-block {
      display: flex;
      align-items: center;
      justify-content: center;
      .e-be-hr-wrapper {
        width: 100%;
        height: $be-hr-wrapper-height;
      }
      .e-be-hr {
        margin: $be-hr-margin;
      }
    }

    /* ======== Blocks Level styles ======== */
    .e-block {
      position: relative;
      flex-grow: 1;
      min-height: 30px;
      padding: $be-block-padding;
      border: $be-block-border solid transparent;
      border-radius: $be-block-border-radius;
      padding-left: $be-block-padding-left; /* padding for the floating icons position */

      [contenteditable = 'true']:empty::before {
        content: attr(placeholder);
      }

      &[data-block-type = 'Table'] {
        user-select: none;
        padding: $be-block-table-padding;
        padding-left: $be-block-table-padding-left;
      }

      /* List Block Styles */
      &.e-list-block {
        margin-left: $be-list-block-margin-left;

        ol li {
          padding-left: $be-list-ol-li-padding-left;
          position: relative;
          left: 4px;
        }

        li::marker {
          font-size: $be-numberlist-font-size;
        }

        /* Checklist Block */
        &[data-block-type = 'Checklist'] {
          align-items: center;
          display: flex;
          margin-left: $be-block-Checklist-margin-left;
          ul {
            word-break: break-word;
            list-style: none;
          }

          ul li {
            padding-left: $be-list-ul-li-padding-left;
          }

          .e-checkmark-container {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            vertical-align: text-bottom;
            user-select: none;
            cursor: pointer;
            height: $be-checkbox-height;
            width: $be-checkbox-width;
            svg{
              height: inherit;
              width: inherit;
            }
          }

          &:has(.e-checked) {
            li.e-checked:not(:empty) {
              text-decoration: line-through;
            }
          }
        }
        &[data-block-type = 'BulletList'] {
          margin-left: 20px;
        }
      }

      /* Quote Block */
      &.e-quote-block blockquote {
        border-left-width: $be-blockquote-left-width;
        border-left-style: solid;
        padding: unset;
        font-size: unset;
        padding-left: $be-blockquote-text-padding;
        margin: $be-blockquote-margin;
        &.e-quote-content .e-block {
          padding-left: 0;
        }
      }

      /* Callout Block */
      &.e-callout-block {
        .e-block {
          padding-left: $be-callout-block-padding-left;
        }

        .e-callout-wrapper {
          display: flex;
          align-items: flex-start;
          padding: $be-callout-padding;
          border-radius: $be-callout-border-radius;
        }

        .e-callout-icon {
          position: absolute;
          height: $be-callout-icon-height;
          width: $be-callout-icon-width;
          margin-top: $be-callout-icon-margin-top;
          margin-left: $be-callout-icon-margin-left;
          user-select: none;
          z-index: 1;
          pointer-events: none;
          svg {
            height: $be-callout-block-svg-height;
            width: inherit;
          }
        }

        .e-callout-content {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
      }

      /* Toggle Block */
      &.e-toggle-block {
        .e-block {
          padding-left: $be-toggle-block-padding-left;
        }

        .e-toggle-header {
          display: flex;
          align-items: center;
          margin-bottom: $be-toggle-header-margin-bottom;
        }

        .e-toggle-icon {
          display: flex;
          align-items: center;
          transition: transform .25s ease;
          transform-origin: center center;
          height: $be-toggle-icon-height;
          width: $be-toggle-icon-width;
          margin-right: $be-toggle-icon-margin;
          user-select: none;
          cursor: pointer;
          svg {
            height: $be-toggle-block-svg-height;
            width: inherit;
          }
        }

        &[data-collapsed = 'false'] {
          .e-toggle-icon {
            transform: rotate(90deg);
          }
        }
      }

      /* User and label mention Chip styles */
      .e-user-chip {
        display: inline-flex;
        cursor: default;
        gap: $be-user-chip-gap;
        height: 24px;
        padding: 2px;
        border-radius: $be-user-mention-chip-border-radius;
        align-items: baseline;
        .em-avatar {
          height: $be-user-mention-avatar-height;
          width: $be-user-mention-avatar-width;
          font-size: $be-user-mention-chip-font-size;
          line-height: $be-user-mention-chip-line-height;
          border-radius: $be-em-avatar-border-radius;
          display: inline-block;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          pointer-events: none;
          .em-img {
            width: 100%;
            height: $be-em-img-height;
            object-fit: cover;
            border-radius: $be-em-img-border-radius;
          }
        }
        .em-text {
          font-size: $be-user-mention-chip-font-size;
          line-height: $be-user-mention-chip-line-height;
          font-weight: $be-user-mention-chip-font-weight;
        }
      }

      .e-label-chip {
        height: 26px;
        padding: 2px 4px;
        font-size: $be-label-mention-chip-font-size;
        line-height: $be-label-mention-chip-line-height;
        border-radius: $be-label-mention-chip-border-radius;
        display: inline-block;
      }

      .e-block-content {
        white-space: break-spaces;

        /* Inline code */
        .e-be-inline-code {
          font-size: $be-inline-code-font-size;
          font-weight: $be-inline-code-font-weight;
          line-height: $be-inline-code-line-height;
          padding: $be-inline-code-padding;
          border-radius: $be-inline-code-border-radius;
          white-space: pre-wrap;
        }
        .e-mention-chip {
          white-space: nowrap;
        }
      }
    }

    /* ======== Drag and Drop Styles ======== */
    .e-be-drop-indicator {
      position: absolute;
      width: $be-drop-indicator-width; /* calc of padding of e-block */
      height: $be-drop-indicator-height;
      margin: $be-drop-indicator-margin;
      left: 46px; /* calc of padding left of e-block with indicator width */
      &::before {
        position: absolute;
        border-radius: $be-drop-indicator-border-radius;
        content: '';
        height: $be-drop-indicator-before-height;
        width: $be-drop-indicator-before-width;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .e-divider-block .e-be-drop-indicator {
      margin-top: $be-divider-drop-indicator-top;
    }
    .e-be-dragging-clone {
      border-radius: $be-drag-clone-border-radius;
      .e-block {
        padding: $be-drag-clone-block-padding;
        padding-left: $be-dragging-clone-block-padding-left;

        &.e-callout-block {
          .e-block {
            padding-left: $be-dragging-clone-callout-block-padding-left;
          }
        }

        &.e-toggle-block {
          .e-block {
            padding-left: $be-dragging-clone-toggle-block-padding-left;
          }
        }
      }
    }
    &:has(.e-be-dragging-clone) .e-floating-icons {
      display: none;
    }
    .e-block-container {
      .e-block:first-child .e-be-drop-indicator:first-child {
        top: -5px;
        margin-top: $be-block-container-margin-top;
      }
    }

    /* ======== Code Block Styles ======== */
    .e-code-block-container {
      border-radius: $be-code-block-border-radius;
      overflow: hidden;

      .e-ddl {
        height: $be-code-block-container-ddl-height;
        width: auto !important; /* stylelint-disable-line declaration-no-important */
        flex-shrink: 1;
        align-self: flex-start;
      }
      .e-ddl,
      .e-code-block-dropdown-btn {
        flex-basis: auto;
        order: 3;
      }

      /* Blazor specific styles for ddb */
      .e-code-block-dropdown-btn {
        min-width: 200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .e-code-block-toolbar {
      display: flex;
      align-items: center;
      padding: $be-code-block-toolbar-padding;
      min-height: $be-code-toolbar-height;
      flex-flow: row-reverse;
      width: 100%;
      height: $be-code-block-toolbar-height;
      box-sizing: border-box;

      /* Blazor specific styles for dropdown button */
      .e-code-block-dropdown-btn {
        font-weight: $be-font-weight;
      }
    }

    .e-code-block-languages {
      margin-left: $be-code-block-languages-margin-left;
      padding: $be-code-block-lang-padding;
      border-radius: $be-code-block-lang-border-radius;
      outline: none;
      width: 248px;
      height: $be-code-lang-height;
    }

    .e-code-block-copy-button {
      border: none;
      cursor: pointer;
      padding: $be-code-copy-btn-padding;
      margin-left: $be-code-block-copy-btn-margin-left;
      border-radius: $be-code-copy-btn-border-radius;
      display: flex;
      align-items: center;
      justify-content: center;
      width: $be-code-copy-btn-width;
      height: $be-code-copy-btn-height;
      .e-icons {
        font-size: $be-code-copy-btn-font-size;
      }
    }

    .e-code-block {
      min-height: 100px;
      max-height: 200px;
      margin: $be-code-block-margin;
      padding: $be-code-block-padding;
      border: $be-code-block-border;
      border-radius: $be-code-block-radius;
      overflow-x: auto;
      font-size: $be-font-size;
      line-height: $be-line-height;
      white-space: break-spaces;
      word-break: inherit;
      word-wrap: break-word;
    }

    /* ======== Table Block Styles ======== */
    .e-table-block {
      .e-table-container {
        padding-bottom: 10px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }
      th,
      td {
        min-width: 60px;
        box-sizing: border-box;
      }
      th {
        height: $be-table-heading-height;
        padding: $be-table-heading-padding;
        font-weight: $be-table-heading-font-weight;
        font-size: $be-table-heading-font-size;
        line-height: $be-table-heading-line-height;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        &:focus,
        &:focus-within,
        &.e-cell-focus {
          text-overflow: clip;
        }
      }
      td {
        height: $be-table-col-height;
        padding: $be-table-col-padding;
        font-weight: $be-table-col-font-weight;
        font-size: $be-table-col-font-size;
        line-height: $be-table-col-line-height;

        &:has(.e-block) {
          padding-top: 0;
          padding-bottom: 0;
        }
      }
      .e-cell-focus {
        outline-offset: -2px;
      }
      &.e-readonly {
        pointer-events: none;
      }

      .e-block {
        padding-left: calc(0px + var(--block-indent) * 1px);
        .e-block-content {
          overflow-wrap: anywhere;
        }
      }
    }

    .e-block {
      .e-row-dot,
      .e-col-dot {
        position: absolute;
        width: $be-row-col-dot-width;
        height: $be-row-col-dot-width;
        border-radius: $be-table-icons-border-radius;
        z-index: 7;
        cursor: pointer;
      }
      .e-row-hover-line,
      .e-col-hover-line {
        position: absolute;
        z-index: 4;
      }
      .e-row-insert-handle,
      .e-col-insert-handle {
        position: absolute;
        z-index: 9;
        display: none;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: $be-table-icons-border-radius;
        font-size: $be-table-row-col-insert-handle-size;
        line-height: $be-table-row-col-insert-handle-line-height;
        text-align: center;
        cursor: pointer;
      }
      .e-row-action-handle,
      .e-col-action-handle {
        position: absolute;
        z-index: 6;
        display: none;
        align-items: center;
        justify-content: center;
        border-top-left-radius: $be-table-gripper-border-radius;
        cursor: pointer;
      }
      .e-row-action-handle {
        border-bottom-left-radius: $be-table-gripper-border-radius;
        width: $be-table-row-gripper-width;
        left: $be-table-row-gripper-left;
      }
      .e-col-action-handle {
        border-top-right-radius: $be-table-gripper-border-radius;
        height: $be-table-col-gripper-height;
        top: $be-table-col-gripper-top;
      }
      .e-row-dot-hit,
      .e-col-dot-hit {
        position: absolute;
        z-index: 7;
      }
      .e-col-resize-handle {
        position: absolute;
        width: 5px;
        cursor: col-resize;
        z-index: 20;
        display: none;
      }
      .e-row-dot-hit {
        width: 22px;
        height: 26px;
      }
      .e-col-dot-hit {
        width: 26px;
        height: 22px;
      }
    }

    .e-table-element {
      width: inherit;
      .e-row-number {
        text-align: center;
      }
      thead th.e-row-number {
        user-select: none;
      }
    }

    .e-row-hover-line {
      height: $be-row-hover-line-height;
    }
    .e-col-hover-line {
      width: 2px;
    }

    /* ======== Image Block Styles ======== */
    .e-image-container {
      margin: $be-image-container-margin;
      max-width: 100%;
      .e-image-rsz-handle.e-resize-nw {
        top: -4px;
        left: -4px;
        cursor: nwse-resize;
      }

      .e-image-rsz-handle.e-resize-ne {
        top: -4px;
        right: -4px;
        cursor: nesw-resize;
      }

      .e-image-rsz-handle.e-resize-se {
        bottom: -4px;
        right: -4px;
        cursor: nwse-resize;
      }

      .e-image-rsz-handle.e-resize-sw {
        bottom: -4px;
        left: -4px;
        cursor: nesw-resize;
      }
      .e-image-block {
        display: block;
        height: $be-image-block-height;
        max-width: 100%;
      }
      &.e-readonly {
        pointer-events: none;
      }
      &.e-readonly .e-image-rsz-handle {
        display: none;
      }
      .e-badge {
        position: absolute;
        top: $be-image-block-badge-top;
        right: $be-image-block-badge-right;
      }
    }

    /* ======== Image placeholder Styles ======== */
    .e-image-placeholder {
      user-select: none;
      display: flex;
      align-items: center;
      height: $be-image-placeholder-ele-height;
      border-radius: $be-image-placeholder-ele-border-radius;
      padding: $be-image-placeholder-ele-padding;
      gap: $be-image-placeholder-text-icon-gap;

      .e-placeholder-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-end;

        .e-icons {
          font-weight: $be-image-placeholder-icon-font-weight;
          font-size: $be-image-placeholder-icon-font-size;
        }
      }

      .e-placeholder-text {
        font-weight: $be-image-placeholder-text-font-weight;
        font-size: $be-image-placeholder-text-font-size;
        line-height: $be-image-placeholder-text-line-height;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    /* ======== Selection Overlay ======== */
    .e-be-selection-overlay {
      position: absolute;
      pointer-events: none;
      box-sizing: border-box;
      opacity: .5;
      z-index: 1000;
      border-radius: $be-selection-overlay-border-radius;
    }

    /* ======== RTL Styles ======== */
    &.e-rtl {

      /* Block Styles */
      .e-block {

        /* Callout Block Styles */
        &.e-callout-block {
          .e-block {
            padding-right: $be-rtl-callout-block-padding-right;
            padding-left: $be-rtl-callout-block-padding-left;
          }
        }

        /* Toggle Block */
        &.e-toggle-block {
          .e-block {
            padding-right: $be-rtl-toggle-block-padding-right;
            padding-left: $be-rtl-toggle-block-padding-left;
          }
        }

        /* List Block Styles */
        &.e-list-block {
          margin-right: $be-rtl-list-block-margin-right;
          margin-left: $be-rtl-list-block-margin-left;

          ul li {
            padding-right: $be-rtl-ul-li-padding-right;
            padding-left: $be-rtl-ul-li-padding-left;
          }

          ol li {
            padding-right: $be-rtl-ol-li-padding-right;
            padding-left: $be-rtl-ol-li-padding-left;
            right: 4px;
            left: 0;
          }

          /* Checklist Block */
          &[data-block-type = 'Checklist'] {
            margin-right: $be-rtl-block-Checklist-margin-right;
            margin-left: $be-rtl-block-Checklist-margin-left;
          }

          /* Padding adjustment for Bullet and Numbered list Block */
          &[data-block-type = 'BulletList'],
          &[data-block-type = 'NumberedList'],
          &[data-block-type = 'Checklist'] {
            padding-left: $be-rtl-list-block-padding-left;
            padding-right: $be-rtl-list-block-padding-right;
          }
        }
      }
    }
  }

  .e-table-gripper-action-popup {
    display: flex;
    padding: $be-table-gripper-action-popup-padding;
    border-radius: $be-table-gripper-action-popup-border-radius;
    justify-content: center;
    align-items: center;
    .e-icons {
      cursor: pointer;
      font-size: $be-table-popup-icon-size;
      line-height: 100%;
      padding: $be-table-popup-icon-padding;
      border-radius: 4px;
    }
  }

  /* floating icons tooltip styles */
  .e-be-floating-icon-tooltip {
    .e-tip-content {
      text-align: center;
    }
  }

  /* ======== Floating Icons styles ======== */
  .e-floating-icon {
    box-sizing: border-box;
    width: $be-floating-icon-width;
    height: $be-floating-icon-height;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $be-floating-icon-font-size;
    line-height: $be-floating-icon-line-height;
    font-weight: $be-floating-icon-font-weight;
    border-radius: $be-floating-icon-border-radius;
    cursor: pointer;
  }

  .e-floating-icons {
    gap: $be-floating-icons-gap;
  }

  /* Blazor specific styles for label */
  .e-blockeditor-mention-menu.e-popup-open{
    .e-dropdownbase.e-dd-group .e-list-item {
      padding-left: 0;
    }
  }

  .e-blockeditor-mention-menu.e-popup-open{
    .e-dropdownbase.e-dd-group {
      .em-content{
        .e-settings{
          border-left: 0;
          padding: 0;
          box-sizing: unset;
        }
      }
    }
  }

  /* Common for all mention menu */
  .e-blockeditor-mention-menu.e-popup {
    .e-dropdownbase {
      padding: $be-mention-popup-padding;
    }

    /* To override the textindent style of e-list-item */
    ul.e-list-parent.e-ul * {
      text-indent: 0;
    }

    &.e-rtl {
      .e-dropdownbase .e-list-item {
        padding-right: $be-rtl-list-item-padding-right;
        padding-left: $be-rtl-list-item-padding-left;
      }
    }
  }

  /* ======== common styles for mention and popup menu ======== */
  .e-blockeditor-mention-menu.e-popup,
  .e-blockeditor-blockaction-popup,
  .e-blockeditor-contextmenu ul {
    border-radius: $be-mention-popup-border-radius;
  }

  /* Table gripper action popup styles */
  .e-blockeditor .e-be-gripper-action-popup-hide {
    display: flex;
    visibility: hidden;
  }

  /* ======== Block Action styles ======== */
  .e-blockeditor-blockaction-popup {
    &.e-be-action-popup-hide {
      display: flex;
      visibility: hidden;
    }
    .e-menu-wrapper,
    .e-menu-container {
      width: 100%;
      padding: $be-mention-popup-padding;
      ul .e-menu-item {
        height: $be-menu-item-height;
        line-height: $be-blockaction-menu-line-height;
        padding: $be-blockaction-menu-padding;
        .e-blockaction-item-template {
          display: flex;
          min-height: 32px;
          align-items: center;
          gap: $be-ctmenu-content-gap;
          padding-left: $be-mention-popup-item-padding-left;
          padding-right: $be-blockaction-item-padding-right;
          .e-action-icon-info {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .e-action-item-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-grow: 1;
          }
          .e-action-icon {
            font-size: $be-ctmenu-icon-font-size;
            line-height: $be-ctmenu-icon-line-height;
          }
          .e-action-item-label {
            font-size: $be-ctmenu-text-font-size;
            line-height: $be-ctmenu-text-line-height;
          }
          .e-action-item-shortcut {
            font-size: $be-ctmenu-shortcut-font-size;
            line-height: $be-ctmenu-shortcut-line-height;
          }
        }
      }
    }

    /* ======== Blazor specific BlockAction menu popup styles ======== */
    .e-menu-container ul {
      width: 100%;
    }
  }

  /* ======== Slash Command styles ======== */
  .e-blockeditor-command-menu.e-popup {
    &.e-mention {
      margin-top: $be-mention-margin-top;
    }
    .e-command-mention-item-template {
      display: flex;
      min-height: 32px;
      align-items: center;
      gap: $be-ctmenu-content-gap;
      padding-left: $be-mention-popup-item-padding-left;
      .e-command-icon-info {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .e-command-icon {
        font-size: $be-ctmenu-icon-font-size;
        line-height: $be-ctmenu-icon-line-height;
      }
      .e-command-title {
        font-size: $be-ctmenu-text-font-size;
        line-height: $be-ctmenu-text-line-height;
      }
      .e-command-shortcut {
        font-size: $be-ctmenu-shortcut-font-size;
        line-height: $be-ctmenu-shortcut-line-height;
      }
    }

    .e-command-item-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-grow: 1;
    }

    .e-dropdownbase .e-list-group-item,
    .e-fixed-head {
      padding-left: $be-mention-popup-header-padding;
    }

    &.e-rtl {
      .e-dropdownbase .e-list-group-item,
      .e-fixed-head {
        padding-right: $be-mention-popup-header-padding;
        padding-left: $be-fixed-head-padding-left;
      }
    }

    /* ======== Blazor specific command menu popup styles ======== */
    .e-dropdownbase.e-dd-group .e-list-item {
      padding-left: $be-dropdownbase-list-padding-left;
    }

    /* ======== Inline toolbar Transform item popup styles ======== */
    .e-transform-item-template {
      display: flex;
      align-items: center;
      gap: 5px;
      .e-transform-icon-info {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .e-transform-item-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-grow: 1;
    }
  }

  /* Context menu styles */
  .e-blockeditor-contextmenu ul {
    width: 200px;
    &.e-contextmenu {
      padding: $be-mention-popup-padding;
    }
    .e-ctmenu-item-template {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $be-ctmenu-item-template-height;
    }

    .e-ctmenu-content {
      display: flex;
      align-items: center;
      gap: $be-ctmenu-content-gap;
    }
    .e-ctmenu-icon {
      font-size: $be-ctmenu-icon-font-size;
      line-height: $be-ctmenu-icon-line-height;
    }
    .e-ctmenu-text {
      font-size: $be-ctmenu-text-font-size;
      line-height: $be-ctmenu-text-line-height;
    }
    .e-ctmenu-shortcut {
      font-size: $be-ctmenu-shortcut-font-size;
      line-height: $be-ctmenu-shortcut-line-height;
    }
  }

  /* ======== Inline Toolbar styles ======== */
  .e-blockeditor-inline-toolbar-popup {
    &.e-be-inline-tlbr-hide {
      display: block;
      visibility: hidden;
      width: auto;
    }
    max-width: 75%;
    border-radius: $be-inline-toolbar-border-radius;
    .e-toolbar-item {
      .e-inline-color-icon,
      .e-inline-bgColor-icon {
        font-family: 'e-icons';
        font-size: $be-inline-bgColor-icon-size;
      }

      .e-toolbar-color-dropdown .e-icons.e-btn-icon,
      .e-toolbar-bgcolor-dropdown .e-icons.e-btn-icon {
        font-size: $be-toolbar-bgcolor-dropdown-size;
      }

      /* ======== Blazor specific Toolbar styles ======== */
      .e-toolbar-color-dropdown,
      .e-toolbar-bgcolor-dropdown {
        &.e-btn.e-icon-btn .e-btn-icon {
          line-height: $be-toolbar-btn-icon-line-height;
        }

        &.e-btn .e-btn-icon.e-icon-left {
          margin-left: $be-toolbar-icon-left-margin-left;
          margin-right: $be-toolbar-icon-left-margin-right;
          width: unset;
        }
      }
    }

    /* ======== Blazor specific Toolbar styles ======== */
    .e-toolbar {
      .e-item-first-child {
        margin-left: $be-toolbar-first-child-margin-left;
      }
      &.e-rtl .e-item-first-child {
        margin-left: $be-rtl-toolbar-first-child-margin-left;
        margin-right: $be-rtl-toolbar-first-child-margin-right;
      }
    }

    .e-blockeditor-inline-toolbar.e-toolbar {
      min-height: auto;
      .e-toolbar-items {
        min-width: auto;
        margin: $be-inline-toolbar-items-margin;
        .e-toolbar-item {
          margin: 0;
          min-height: auto;
          padding: $be-inline-toolbar-item-padding;
        }
      }
      .e-toolbar-transform-dropdown {
        gap: 4px;
      }
    }
    .e-colorpicker-wrapper .e-split-btn-wrapper {
      .e-dropdown-btn{
        @if $theme-name == 'tailwind' {
          padding-left: 2px;
          padding-right: 2px;
        }
      }
      .e-split-colorpicker {
        .e-selected-color {
          background: none;
          display: block;
          margin-top: $be-color-picker-margin-top;
          width: $be-color-picker-width;
          height: $be-color-picker-height;
          .e-split-preview {
            height: 3px;
            bottom: 0;
            top: unset;
          }
        }
        &::before {
          font-family: 'e-icons';
        }
      }
    }
  }

  /* Link Popup styles */
  .e-blockeditor-link-dialog {
    .e-be-link-content {
      display: flex;
      flex-direction: column;
      gap: $be-link-content-gap;
    }

    .e-footer-content .e-be-link-footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: $be-link-footer-gap;
      .e-btn {
        margin-left: $be-link-footer-btn-margin-left;
        margin-right: $be-link-footer-btn-margin-right;
      }
    }
  }

  /* User and label mention styles */
  .e-blockeditor-mention-menu.e-popup {
    .e-user-mention-item-template,
    .e-label-mention-item-template {
      display: flex;
      align-items: center;
      gap: $be-label-mention-item-gap;
    }
    .e-user-mention-item-template {
      padding: $be-user-mention-item-padding;
    }
    .e-label-mention-item-template {
      padding: $be-label-mention-item-padding;
    }
    .em-avatar {
      width: $be-mention-avatar-width;
      height: $be-mention-avatar-height;
      font-size: $be-ctmenu-text-font-size;
      line-height: $be-ctmenu-text-line-height;
      border-radius: $be-popup-em-avatar-border-radius;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .em-img {
        width: 100%;
        height: $be-popup-em-img-height;
        object-fit: cover;
        border-radius: $be-popup-em-img-border-radius;
      }
    }

    &.e-blockeditor-label-menu {
      .em-avatar {
        width: $be-label-avatar-width;
        height: $be-label-avatar-height;
      }
    }

    .em-initial {
      user-select: none;
    }

    .em-content {
      display: flex;
      align-items: center;
      gap: $be-popup-em-content-gap;
      .em-text {
        font-size: $be-ctmenu-text-font-size;
        line-height: $be-ctmenu-text-line-height;
      }
      .em-icon {
        font-size: $be-ctmenu-icon-font-size;
        line-height: $be-ctmenu-icon-line-height;
      }
    }
  }

  /* Image upload popup styles */
  .e-image-upload-popup {
    border-radius: $be-image-upload-popup-radius;
    &.e-image-popup-hide {
      display: block;
      visibility: hidden;
    }
    .e-tab .e-content {
      padding: $be-image-upload-popup-tab-content-padding;
    }
    .e-embed-actions {
      padding-top: $be-embed-btn-padding-top;
      display: flex;
      justify-content: center;
    }
  }

  /* shortcut direction */
  .e-ctmenu-shortcut,
  .e-action-item-shortcut,
  .e-command-shortcut {
    direction: ltr;
  }

  /* ======== Color Picker Popup Styles ======== */
  .e-dropdown-popup:has(.e-be-color-picker) {
    margin-top: $be-color-picker-margin-top;
  }

  /* Blazor specific styles for ddb popup */
  .e-blockeditor-codeblock-dropdown.e-dropdown-popup ul {
    max-height: 300px;
    overflow: auto;
  }
}

@include export-module('blockeditor-theme') {

  /* ======== Main Editor ======== */
  .e-blockeditor {
    background: $be-bg-color;
    color: $be-color;
    a {
      color: $be-link-anchor-color;
    }

    /* ======== Drag and Drop Styles ======== */
    .e-be-drop-indicator {
      background: $be-drop-indicator-bg-color;
      &::before {
        background: $be-drop-indicator-bg-color;
      }
    }
    .e-be-dragging-clone {
      background: $be-dragging-clone-bg-color;
    }

    /* DividerBlock */
    .e-divider-block {
      &.e-divider-selected {
        .e-be-hr-wrapper {
          background: $be-divider-selected-bg-color;
        }
      }
      .e-be-hr {
        border: $be-hr-border solid $be-divider-border-color;
      }
    }

    /* ======== Blocks Level styles ======== */
    .e-block {

      [contenteditable = 'true']:empty::before {
        color: $be-block-placeholder-color;
      }

      /* List Block Styles */
      &.e-list-block {

        /* Checklist Block */
        &[data-block-type = 'Checklist'] {
          .e-checkmark-border {
            stroke: $be-checklist-marker-border-color;
          }

          .e-checkmark-bg {
            fill: $be-checklist-marker-checked-bg-color;
            stroke: $be-checklist-marker-checked-border-color;
          }

          .e-checkmark-color {
            fill: $be-checklist-marker-checked-color;
          }

          &:has(.e-checked) {
            .e-checkmark-border {
              stroke: $be-checklist-marker-checked-border-color;
            }

            li.e-checked:not(:empty) {
              color: $be-checked-block-strikethrough-color;
            }
          }
        }
      }

      /* Quote Block */
      &.e-quote-block blockquote {
        border-left-color: $be-blockquote-border-color;
      }

      /* Callout Block */
      &.e-callout-block {
        .e-callout-wrapper {
          background: $be-callout-bg-color;
        }
      }
    }

    /* ======== Blocks Content Level styles ======== */
    .e-block-content {
      &::selection {
        background: $be-text-selection-bg-color;
      }

      /* Inline code */
      .e-be-inline-code {
        background: $be-inline-code-bg-color;
        color: $be-inline-code-text-color;
      }
    }

    /* ======== Code Block Styles ======== */
    .e-code-block-container {
      background: $be-code-block-container-bg-color;
      border: $be-code-block-container-border-width solid $be-code-block-container-border-color;
    }
    .e-code-block {
      background-color: $be-code-block-container-bg-color;
      color: $be-color;
      .e-block-content {
        background: transparent;
      }
    }
    .e-code-block-toolbar {
      background: $be-code-block-container-bg-color;
    }

    .e-code-block-languages {
      border: $be-code-block-lang-border-width solid $be-code-block-lang-border-color;
      background: $be-code-block-lang-bg-color;
      box-shadow: unset;
    }

    .e-code-block-copy-button {
      background: $be-code-copy-btn-bg-color;
      @if ($skin-name == 'Material3' or $skin-name == 'tailwind3' or $skin-name == 'material' or $skin-name == 'material-dark') {
        box-shadow: none;
      }
      .e-icons {
        color: $be-code-copy-btn-color;
      }
    }

    .e-code-block-copy-button:hover,
    .e-code-block-copy-button:active {
      background: $be-code-copy-btn-bg-color-hover;
      .e-icons {
        color: $be-code-copy-btn-color-hover;
      }
    }

    /* ======== Table Block Styles ======== */
    .e-table-block {
      th,
      td {
        border: $be-table-block-border solid $be-table-border-color;
      }
      thead tr {
        background: $be-table-header-row-bg-color;
        color: $be-table-header-color;
      }
      tbody tr {
        background: $be-table-body-row-bg-color;
        color: $be-table-body-color;
      }
      :not(:has([data-resizing = 'true'])) tr:hover {
        background: $be-table-row-hover-bg-color;
        color: $be-table-row-hover-color;
        .e-cell-focus {
          @if $theme-name == 'fluent2-highcontrast'{
            border-color: rgba(255, 255, 255, 1);
          }
        }
      }
      tr:has(.e-cell-focus) {
        color: $be-table-row-focus-color;
        @if $theme-name == 'fluent2-highcontrast'{
          color: rgba(255, 255, 255, 1);
        }
      }
      .e-cell-focus {
        border: $be-cell-focus-outline double $be-table-cell-focus-color;
      }
      .e-col-action-handle:not(.e-action-bar-active):hover,
      .e-row-action-handle:not(.e-action-bar-active):hover {
        background-color: $be-table-gripper-hover-bg;
        color: $be-table-gripper-hover-color;
      }
      .e-action-bar-active {
        background-color: $be-table-row-gripper-pressed-bg;
        color: $be-table-row-gripper-pressed-color;
        border: 1px double $be-table-row-col-selected-border;
      }
      .e-col-selected {
        background-color: $be-table-col-selected-bg;
      }
      .e-row-selected {
        background-color: $be-table-row-selected-bg;
      }

      tr.e-row-selected td,
      .e-col-selected {
        border: 1px double $be-table-row-col-selected-border;
        @if $theme-name == 'fluent2-highcontrast'{
          border-color: rgba(255, 255, 255, 1);
        }
        box-shadow: unset;
      }
    }
    .e-row-add-indicator,
    .e-col-add-indicator {
      background: $be-table-add-indicator-bg-color;
      color: $be-table-add-indicator-color;
    }
    .e-row-hover-line,
    .e-col-hover-line {
      background: $be-table-hover-line-bg-color;
    }

    .e-table-hover-icon {
      background-color: rgba(224, 224, 224, 1);
    }

    .e-block {
      .e-row-dot,
      .e-col-dot {
        border: 1px solid $be-table-row-gripper-pressed-bg;
        background: $be-bg-color;
      }
      .e-row-insert-handle,
      .e-col-insert-handle {
        color: $be-table-insert-handle-color;
        border: 1px solid $be-table-insert-handle-border;
        background-color: $be-table-insert-handle-bg;
      }
      .e-row-hover-line,
      .e-col-hover-line {
        background: $be-table-row-col-hover-line;
      }
    }

    /* ======== Image Block Styles ======== */
    .e-image-block {
      &.e-image-focus,
      &:hover {
        outline: $be-image-focus-outline solid $be-table-cell-focus-color;
      }
    }

    /* ======== Image placeholder Styles ======== */
    .e-image-placeholder {
      border: $be-image-placeholder-border-width solid $be-image-placeholder-border-color;
      background-color: $be-image-placeholder-bg-color;

      .e-placeholder-icon-container {
        .e-icons {
          color: $be-image-placeholder-icon-color;
        }
      }

      .e-placeholder-text {
        color: $be-image-placeholder-text-color;
      }
    }

    /* ======== Audio Block Styles ======== */
    .e-audio-block {
      &:hover {
        outline: $be-audio-block-outline solid $be-table-cell-focus-color;
      }
    }

    /* ======== Video Block Styles ======== */
    .e-video-block {
      &.e-video-focus,
      &:hover {
        outline: $be-video-block-outline solid $be-table-cell-focus-color;
      }
    }

    /* ======== Selection Overlay ======== */
    .e-be-selection-overlay {
      border: $be-selection-overlay-border-width solid $be-selection-overlay-border-color;
      background: $be-selection-overlay-bg-color;
    }
  }

  .e-table-gripper-action-popup {
    background: $be-inline-toolbar-popup-bg-color;
    border: $be-inline-toolbar-border-width solid $be-inline-toolbar-popup-border-color;
    box-shadow: $be-inline-toolbar-popup-shadow;
    .e-icons {
      color: $be-table-popup-icon-color;
      &:hover {
        background: $be-table-popup-icon-hover-bg;
        border-color: $be-table-popup-icon-hover-bg;
        color: $be-table-popup-icon-hover-color;
      }
      &:active {
        background: $be-table-popup-icon-pressed-bg;
        border-color: $be-table-popup-icon-pressed-bg;
        color: $be-table-popup-icon-pressed-color;
      }
    }
  }

  /* ======== Floating Icons Styles ======== */
  .e-floating-icon {
    border: $be-floating-icon-border-width solid $be-floating-icon-border-color;
    color: $be-floating-icon-color;
    background: transparent;
    &:hover {
      background: $be-floating-icon-hover-bg-color;
      color: $be-floating-icon-color-hover;
    }
    &.e-drag-icon-selected {
      background: $be-drag-icon-selected-bg-color;
      color: $be-drag-icon-selected-color;
    }
  }

  /* ======== Inline Toolbar styles ======== */
  .e-blockeditor-inline-toolbar-popup {
    border: $be-inline-toolbar-border-width solid $be-inline-toolbar-popup-border-color;
    background: $be-inline-toolbar-popup-bg-color;
    box-shadow: $be-inline-toolbar-popup-shadow;
    @if $theme-name == 'fluent2-highcontrast'{
      border: 1px solid #ffff;
    }
    @else if $theme-name == 'Material3'{
      border: none;
      box-shadow: none;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
    }
    .e-toolbar-item {
      &.e-active {
        .e-btn {
          background: $be-inline-toolbar-item-active-bg-color;
        }
        .e-tbar-btn .e-icons,
        .e-tbar-btn:focus .e-icons {
          color: $be-inline-toolbar-item-active-color;
        }
      }
      .e-tbar-btn.e-toolbar-color-dropdown,
      .e-tbar-btn.e-toolbar-bgcolor-dropdown {
        &:hover .e-be-color-icon-wrapper {
          @if ($skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap5') {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
    .e-blockeditor-inline-toolbar .e-toolbar-items .e-toolbar-item {
      .e-split-btn-wrapper {
        .e-dropdown {
          &:hover{
            background: $be-quick-tb-btn-hover;
            color: var(--color-sf-toolbar-icon-color);
          }
          &:focus {
            background: $be-quick-pop-item-focus-bg;
            color: var(--color-sf-toolbar-icon-color);
          }
          &:active {
            background: $be-quick-item-active-bg;
            color: var(--color-sf-toolbar-icon-color);
          }
        }
      }
    }
    .e-blockeditor-inline-toolbar .e-toolbar-items .e-toolbar-item {
      .e-split-btn-wrapper {
        border-radius: $be-split-btn-border-radius;
        .e-dropdown {
          @if $theme-name == 'bootstrap5' {
            background: $content-bg-color;
          }
          @else if $theme-name == 'bootstrap5-dark' {
            background: $content-bg-color-alt2;
          }
          @else {
            background: $be-quick-popup-bg-color;
          }
          border: $be-split-btn-border;
        }
      }
    }

    .e-blockeditor-inline-toolbar .e-toolbar-items .e-toolbar-item {
      .e-split-btn-wrapper {
        &:hover {
          background: $be-split-btn-hover-bg;
          .e-dropdown {
            border: $be-hover-split-btn-border;
            @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
              border-image: none;
            }
          }
          .e-split-btn:hover,
          .e-dropdown-btn:hover {
            @if $theme-name != 'fluent2-highcontrast' {
              background: $be-split-btn-span-hover-bg;
            }
            @if $theme-name == 'fluent2-highcontrast' {
              background: $be-split-btn-hover-bg;
            }
          }
          .e-split-btn,
          .e-dropdown-btn {
            &:not(:hover) {
              background: transparent;
            }
          }
          .e-icons {
            @if $theme-name != 'bootstrap5.3' {
              color: $be-hover-icons-color;
            }
            @if $theme-name == 'bootstrap5.3' {
              color: $be-hover-icons-color;
            }
          }
        }
        &:active {
          .e-dropdown {
            border: $be-hover-split-btn-border;
            &:active {
              @if $theme-name == 'Material3' or $theme-name == 'Material3-dark' {
                border-image: none;
              }
            }
          }
          .e-icons {
            color: $be-active-btn-icons-color;
          }
        }
        &:focus {
          background: $be-split-btn-span-hover-bg;
          .e-dropdown {
            border: $be-hover-split-btn-border;
            &:focus {
              @if $theme-name == 'Material3' or $theme-name== 'Material3-dark' {
                border-image: none;
              }
            }
          }
          .e-split-btn:focus,
          .e-dropdown-btn:focus {
            background: $be-split-btn-span-hover-bg;
          }
          .e-split-btn,
          .e-dropdown-btn {
            &:not(:focus) {
              background: transparent;
            }
          }
          .e-icons {
            color: $be-icon-color;
            @if ($theme-name == 'fluent2' or $theme-name == 'tailwind3') {
              color: $be-default-icon-color;
            }
          }
        }
      }
      .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) {
        .e-split-btn,
        .e-dropdown-btn {
          @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
            border: $be-hover-split-btn-border;
          }
          @if $theme-name != 'bootstrap5.3' {
            color: $be-hover-icons-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $be-hover-icons-color;
          }
        }
      }
      .e-split-btn-wrapper .e-split-btn + .e-dropdown-btn.e-active {
        background: $be-drop-btn-active-bg;
      }
      .e-split-btn-wrapper:has(.e-dropdown-btn.e-active) .e-split-btn {
        background: $be-split-btn-hover-bg;
      }
      .e-colorpicker-wrapper:focus-visible,
      .e-split-btn-wrapper:focus-visible {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $be-hover-split-btn-border;
        }
        @if $theme-name != 'fluent2-highcontrast' {
          background: $be-split-btn-focus-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $be-split-btn-hover-bg;
        }
        box-shadow: $be-button-focus-box-shadow;
        .e-split-btn,
        .e-dropdown-btn {
          &:not(:focus-visible) {
            background: transparent;
            @if $theme-name != 'bootstrap5.3' {
              color: $be-icon-color;
            }
            @if $theme-name == 'bootstrap5.3' {
              color: $be-hover-icons-color;
            }
          }
        }
      }
      .e-split-btn-wrapper:not(:focus-visible):has(.e-dropdown-btn:focus-visible),
      .e-split-btn-wrapper:not(:focus-visible):has(.e-split-btn:focus-visible) {
        @if $theme-name == 'bootstrap-dark' or $theme-name == 'tailwind' or $theme-name == 'tailwind-dark' {
          border: $be-hover-split-btn-border;
        }
        @if $theme-name != 'fluent2-highcontrast' {
          background: $be-split-btn-focus-bg;
        }
        @if $theme-name == 'fluent2-highcontrast' {
          background: $be-split-btn-hover-bg;
        }
        box-shadow: $be-button-focus-box-shadow;
        .e-split-btn,
        .e-dropdown-btn {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $be-icon-color;
          }
          @if $theme-name == 'bootstrap5.3' {
            color: $be-hover-icons-color;
          }
        }
      }
      .e-split-btn-wrapper {
        .e-split-btn,
        .e-dropdown-btn {
          background: transparent;
          @if $theme-name != 'bootstrap5.3' {
            color: $be-icon-color;
          }
        }
      }
    }
  }

  /* User and label mention styles */
  .e-mention.e-blockeditor-mention-menu.e-popup {
    .e-list-item:not(.e-active) {
      .em-avatar {
        color: $be-mention-menu-avatar-text-color;
      }
      .em-content {
        .em-text {
          color: $be-ctmenu-text-color;
        }
        .e-icons {
          color: $be-ctmenu-icon-color;
        }
      }
    }
  }

  /* ======== Block Action styles ======== */
  .e-blockeditor-blockaction-popup {
    .e-menu-item:not(.e-disabled) {
      .e-blockaction-item-template {
        .e-action-icon {
          color: $be-ctmenu-icon-color;
        }
        .e-action-item-label {
          color: $be-ctmenu-text-color;
        }
        .e-action-item-shortcut {
          color: $be-ctmenu-shortcut-color;
        }
      }
    }
  }

  /* ======== Slash Command styles ======== */
  .e-blockeditor-command-menu.e-popup {
    .e-list-item:not(.e-disabled):not(.e-active):not(.e-hover) {
      .e-command-mention-item-template {
        .e-command-icon {
          color: $be-ctmenu-icon-color;
        }
        .e-command-title {
          color: $be-ctmenu-text-color;
        }
        .e-command-shortcut {
          color: $be-ctmenu-shortcut-color;
        }
      }
    }
  }

  /* Context menu styles */
  .e-blockeditor-contextmenu ul {
    .e-menu-item:not(.e-disabled) {
      .e-ctmenu-icon {
        color: $be-ctmenu-icon-color;
      }
      .e-ctmenu-text {
        color: $be-ctmenu-text-color;
      }
      .e-ctmenu-shortcut {
        color: $be-ctmenu-shortcut-color;
      }
    }
  }

  /* ======== common styles for mention and popup menu ======== */
  .e-blockeditor-mention-menu.e-popup,
  .e-blockeditor-blockaction-popup,
  .e-blockeditor-contextmenu ul {
    border: $be-mention-popup-border-width solid $be-mention-popup-border-color;
    background: $be-mention-popup-bg-color;
    box-shadow: $be-mention-popup-shadow;
  }

  /* Image upload popup styles */
  .e-image-upload-popup {
    border: $be-image-upload-popup-boder-width solid $be-image-upload-popup-boder-color;
    background-color: $be-image-upload-popup-bg-color;
    box-shadow: $be-image-upload-popup-box-shadow;

    .e-tab .e-content {
      border-top: 1px solid $be-upload-popup-tab-content-border-top-color;
    }

    .e-uploader-container.e-upload-drag-hover .e-upload{
      border-color: $be-upload-popup-drag-boder-color;
      background-color: $be-upload-popup-drag-hover-color;
    }
  }
}

@include export-module('blockeditor-bootstrap-icons') {

  .e-block-add-icon::before {
    content: '\eb0c';
  }
  .e-block-drag-icon::before {
    content: '\e330';
  }
  .e-checkmark-checked::after {
    content: '\e7ff';
  }
  .e-block-image-icon::before {
    content: '\e335';
  }

  .e-be-check::before {
    content: '\e97d';
  }
  .e-be-close::before {
    content: '\e7fc';
  }

  /* ======== Inline Toolbar styles ======== */
  .e-blockeditor-inline-toolbar-popup {
    .e-inline-color-icon::before {
      content: '\e34c'; /* A-style icon */
    }

    .e-inline-bgColor-icon::before {
      content: '\e35c'; /* Paint bucket icon */
    }

    .e-colorpicker-wrapper .e-split-btn-wrapper {
      .e-split-colorpicker.e-split-btn.e-be-fontcolor-dropdown::before {
        content: '\e34c';
      }
      .e-split-colorpicker.e-split-btn.e-be-bgcolor-dropdown::before {
        content: '\e35c';
      }
    }
  }

  /* ======== Slash Command styles ======== */
  .e-blockeditor-command-menu.e-popup,
  .e-blockeditor-command-menu {
    .e-be-paragraph::before {
      content: '\e35b';
    }

    .e-be-divider::before {
      content: '\e175';
    }

    .e-be-callout::before {
      content: '\e1a4';
    }

    .e-be-h1::before {
      content: '\e1a5';
    }

    .e-be-h2::before {
      content: '\e1a6';
    }

    .e-be-h3::before {
      content: '\e1a7';
    }

    .e-be-h4::before {
      content: '\e1a8';
    }

    .e-be-toggle-h1::before {
      content: '\e1a9';
    }

    .e-be-toggle-h2::before {
      content: '\e1aa';
    }

    .e-be-toggle-h3::before {
      content: '\e1ab';
    }

    .e-be-toggle-h4::before {
      content: '\e1ac';
    }

    .e-be-toggle-paragraph::before {
      content: '\e353';
    }

    .e-be-table::before {
      content: '\e294';
    }
  }
}

@include export-module('blockeditor-bigger') {
  .e-bigger.e-blockeditor,
  .e-bigger .e-blockeditor {
    .e-block-container-wrapper {
      font-size: $be-font-size-bigger;
      font-weight: $be-font-weight-bigger;
      line-height: $be-line-height-bigger;
    }

    /* ======== Blocks Level styles ======== */
    .e-block {

      /* List Block Styles */
      &.e-list-block {

        li::marker {
          font-size: $be-numberlist-font-size-bigger;
        }

        /* Checklist Block */
        &[data-block-type = 'Checklist'] {
          .e-checkmark-container {
            height: $be-checkbox-height-bigger;
            width: $be-checkbox-width-bigger;
          }
        }
      }

      /* Quote Block */
      &.e-quote-block blockquote {
        border-left-width: $be-blockquote-left-width-bigger;
        padding-left: $be-blockquote-text-padding-bigger;
      }

      /* Callout Block */
      &.e-callout-block {
        .e-callout-wrapper {
          padding: $be-callout-padding-bigger;
        }

        .e-callout-icon {
          height: $be-callout-icon-height-bigger;
          width: $be-callout-icon-width-bigger;
        }
      }

      /* Toggle Block */
      &.e-toggle-block {

        .e-toggle-icon {
          height: $be-toggle-icon-height-bigger;
          width: $be-toggle-icon-width-bigger;
          margin-right: $be-toggle-icon-margin-bigger;
        }
      }

      /* User and label mention Chip styles */
      .e-user-chip {
        height: $be-user-mention-chip-height-bigger;
        padding: 2px;
        align-items: baseline;
        .em-avatar {
          height: $be-user-mention-avatar-height-bigger;
          width: $be-user-mention-avatar-width-bigger;
          font-size: $be-user-mention-chip-font-size-bigger;
          line-height: $be-user-mention-chip-line-height-bigger;
          display: inline-block;
        }
        .em-text {
          font-size: $be-user-mention-chip-font-size-bigger;
          line-height: $be-user-mention-chip-line-height-bigger;
        }
      }

      .e-label-chip {
        height: 26px;
        padding: 2px 4px;
        font-size: $be-label-mention-chip-font-size-bigger;
        line-height: $be-label-mention-chip-line-height-bigger;
      }

      /* Inline content type styles */
      .e-block-content {

        /* Inline code */
        .e-be-inline-code {
          font-size: $be-inline-code-font-size-bigger;
          line-height: $be-inline-code-line-height-bigger;
          padding: $be-inline-code-padding-bigger;
        }
      }
    }

    /* ======== Code Block Styles ======== */
    .e-code-block-toolbar {
      padding: $be-code-block-toolbar-padding-bigger;
      min-height: $be-code-toolbar-height-bigger;
    }

    .e-code-block-languages {
      padding: $be-code-block-lang-padding-bigger;
      width: 248px;
      height: $be-code-lang-height-bigger;
    }

    .e-code-block-copy-button {
      padding: $be-code-copy-btn-padding-bigger;
      margin-left: $be-code-block-copy-btn-bigger-margin;
      width: $be-code-copy-btn-width-bigger;
      height: $be-code-copy-btn-height-bigger;
      .e-icons {
        font-size: $be-code-copy-btn-font-size-bigger;
      }
    }

    .e-code-block {
      margin: $be-code-block-bigger-margin;
      padding-left: $be-code-block-bigger-padding-left;
      overflow-x: auto;
      font-size: $be-font-size-bigger;
      line-height: $be-line-height-bigger;
    }

    /* ======== Table Block Styles ======== */
    .e-table-block {
      th {
        height: $be-table-heading-height-bigger;
        padding: $be-table-heading-padding-bigger;
        font-size: $be-table-heading-font-size-bigger;
        line-height: $be-table-heading-line-height-bigger;
      }
      td {
        height: $be-table-col-height-bigger;
        padding: $be-table-col-padding-bigger;
        font-size: $be-table-col-font-size-bigger;
        line-height: $be-table-col-line-height-bigger;
        &:has(.e-block) {
          padding-top: 0;
          padding-bottom: 0;
        }
      }
    }

    /* ======== Image placeholder Styles ======== */
    .e-image-placeholder {
      height: $be-image-placeholder-ele-height-bigger;
      padding: $be-image-placeholder-ele-padding-bigger;
      gap: $be-image-placeholder-text-icon-gap-bigger;

      .e-placeholder-icon-container {
        .e-icons {
          font-weight: $be-image-placeholder-icon-font-weight-bigger;
          font-size: $be-image-placeholder-icon-font-size-bigger;
        }
      }

      .e-placeholder-text {
        font-weight: $be-image-placeholder-text-font-weight-bigger;
        font-size: $be-image-placeholder-text-font-size-bigger;
        line-height: $be-image-placeholder-text-line-height-bigger;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .e-block {
      .e-row-action-handle,
      .e-col-action-handle {
        font-size: $be-table-row-col-action-handle-size-bigger;
        line-height: $be-table-action-handle-line-height-bigger;
      }
      .e-row-action-handle {
        width: $be-table-row-gripper-width-bigger;
        left: $be-table-row-gripper-left-bigger;
      }
      .e-col-action-handle {
        height: $be-table-col-gripper-height-bigger;
        top: $be-table-col-gripper-top-bigger;
      }
    }

    /* Image upload popup styles */
    .e-image-upload-popup {
      .e-tab .e-content {
        padding: $be-image-upload-popup-tab-content-padding-bigger;
      }
      .e-embed-actions {
        padding-top: $be-embed-btn-padding-top-bigger;
      }
    }

    .e-image-container .e-badge {
      position: absolute;
      top: $be-image-block-badge-top-bigger;
      right: $be-image-block-badge-right-bigger;
    }
  }

  .e-bigger .e-table-gripper-action-popup {
    .e-icons {
      font-size: $be-table-popup-icon-size-bigger;
      padding: $be-table-popup-icon-padding-bigger;
    }
  }

  /* ======== Floating Icons styles ======== */
  .e-bigger .e-floating-icon {
    width: $be-floating-icon-width-bigger;
    height: $be-floating-icon-height-bigger;
    font-size: $be-floating-icon-font-size-bigger;
    line-height: $be-floating-icon-line-height-bigger;
    font-weight: $be-floating-icon-font-weight-bigger;
  }

  /* Common for all mention menu */
  .e-bigger .e-blockeditor-mention-menu.e-popup,
  .e-bigger.e-blockeditor-mention-menu.e-popup {
    .e-dropdownbase {
      padding: $be-mention-popup-padding-bigger;
    }
  }

  /* ======== Block Action styles ======== */
  .e-bigger .e-blockeditor-blockaction-popup,
  .e-bigger.e-blockeditor-blockaction-popup {
    .e-menu-wrapper,
    .e-menu-container {
      padding: $be-mention-popup-padding-bigger;
      ul .e-menu-item {
        height: $be-menu-item-bigger-height;
        line-height: $be-menu-item-bigger-line-height;
        padding: $be-menu-item-bigger-padding;
        .e-blockaction-item-template {
          min-height: 40px;
          padding-left: $be-mention-popup-item-padding-left-bigger;
          .e-action-icon {
            font-size: $be-ctmenu-icon-font-size-bigger;
            line-height: $be-ctmenu-icon-line-height-bigger;
          }
          .e-action-item-label {
            font-size: $be-ctmenu-text-font-size-bigger;
            line-height: $be-ctmenu-text-line-height-bigger;
          }
          .e-action-item-shortcut {
            font-size: $be-ctpupmenu-shortcut-font-size-bigger;
            line-height: $be-ctmenu-shortcut-line-height-bigger;
          }
        }
      }
    }
  }

  /* ======== Slash Command styles ======== */
  .e-bigger .e-blockeditor-command-menu.e-popup,
  .e-bigger.e-blockeditor-command-menu.e-popup {
    .e-command-mention-item-template {
      min-height: 40px;
      padding-left: $be-mention-popup-item-padding-left-bigger;

      .e-command-icon {
        font-size: $be-ctmenu-icon-font-size-bigger;
        line-height: $be-ctmenu-icon-line-height-bigger;
      }
      .e-command-title {
        font-size: $be-ctmenu-text-font-size-bigger;
        line-height: $be-ctmenu-text-line-height-bigger;
      }
      .e-command-shortcut {
        font-size: $be-ctmenu-shortcut-font-size-bigger;
        line-height: $be-ctmenu-shortcut-line-height-bigger;
      }
    }
    .e-dropdownbase .e-list-group-item,
    .e-fixed-head {
      padding-left: $be-mention-popup-header-padding-bigger;
    }

    &.e-rtl {
      .e-dropdownbase .e-list-group-item,
      .e-fixed-head {
        padding-right: $be-mention-popup-header-padding-bigger;
        padding-left: $be-fixed-head-bigger-padding-left;
      }
    }
  }

  /* Context menu styles */
  .e-bigger .e-blockeditor-contextmenu ul,
  .e-bigger.e-blockeditor-contextmenu ul {
    width: 220px;
    &.e-contextmenu {
      padding: $be-mention-popup-padding-bigger;
    }
    .e-ctmenu-icon {
      font-size: $be-ctmenu-icon-font-size-bigger;
      line-height: $be-ctmenu-icon-line-height-bigger;
    }
    .e-ctmenu-text {
      font-size: $be-ctmenu-text-font-size-bigger;
      line-height: $be-ctmenu-text-line-height-bigger;
    }
    .e-ctmenu-shortcut {
      font-size: $be-ctmenu-shortcut-font-size-bigger;
      line-height: $be-ctmenu-shortcut-line-height-bigger;
    }
  }

  /* ======== Inline Toolbar styles ======== */
  .e-bigger .e-blockeditor-inline-toolbar-popup,
  .e-bigger.e-blockeditor-inline-toolbar-popup {
    .e-toolbar-item {
      .e-inline-color-icon,
      .e-inline-bgColor-icon {
        font-size: $be-inline-bgColor-icon-bigger-size;
      }

      .e-toolbar-color-dropdown .e-icons.e-btn-icon,
      .e-toolbar-bgcolor-dropdown .e-icons.e-btn-icon {
        font-size: $be-inline-btn-icon-bigger-size;
      }
    }
    .e-colorpicker-wrapper .e-split-btn-wrapper {
      .e-split-colorpicker {
        .e-selected-color {
          width: $be-color-picker-width;
          height: $be-color-picker-height;
        }
      }
    }

    /* ======== Blazor specific Toolbar styles ======== */
    .e-toolbar {
      .e-item-first-child {
        margin-left: $be-toolbar-child-bigger-margin-left;
      }
      &.e-rtl .e-item-first-child {
        margin-left: $be-rtl-toolbar-child-bigger-margin-left;
        margin-right: $be-rtl-toolbar-child-bigger-margin-right;
      }
    }
  }

  /* User and label mention styles */
  .e-bigger .e-blockeditor-mention-menu.e-popup,
  .e-bigger.e-blockeditor-mention-menu.e-popup {
    .e-user-mention-item-template,
    .e-label-mention-item-template {
      gap: $be-label-mention-item-bigger-gap;
    }
    .e-user-mention-item-template {
      padding: $be-user-mention-item-padding-bigger;
    }
    .e-label-mention-item-template {
      padding: $be-label-mention-item-padding-bigger;
    }
    .em-avatar {
      width: $be-mention-avatar-width-bigger;
      height: $be-mention-avatar-height-bigger;
      font-size: $be-ctmenu-text-font-size-bigger;
      line-height: $be-ctmenu-text-line-height-bigger;
    }

    &.e-blockeditor-label-menu {
      .em-avatar {
        width: $be-label-avatar-width-bigger;
        height: $be-label-avatar-height-bigger;
      }
    }

    .em-content {
      gap: $be-em-content-bigger-gap;
      .em-text {
        font-size: $be-ctmenu-text-font-size-bigger;
        line-height: $be-ctmenu-text-line-height-bigger;
      }
      .e-icons {
        font-size: $be-ctmenu-icon-font-size-bigger;
        line-height: $be-ctmenu-icon-line-height-bigger;
      }
    }
  }
}

$grid-chart-border-color: $grey-88 !default;
$grid-chart-list-hover-bg-color: $grey-44 !default;
$grid-chart-list-hover-content-font-color: $grey-dark-font !default;
$grid-chart-list-hover-icon-color: $grey-dark-font !default;
$grid-chart-list-selected-bg-color: $grey-44 !default;
$grid-chart-list-selected-content-font-color: $brand-primary !default;
$grid-chart-list-selected-icon-color: $brand-primary !default;

@include export-module('grid-chart-layout') {

  #{&}.e-grid-context-menu-dialog {

    .e-dlg-content {
      @if $grid-skin == 'fluent' {
        padding-bottom: 16px;
      }
    }

    &.e-dialog .e-grid-chart-min-max-btn.e-btn {
      @if $grid-skin =='bootstrap5.3' or $grid-skin == 'bootstrap5' {
        margin: 0 8px;
      }
    }

    &.e-dialog .e-btn .e-btn-icon {
      &.e-grid-chart-min-icon,
      &.e-grid-chart-max-icon {
        @if $grid-skin =='tailwind3' or $grid-skin =='bootstrap5.3' or $grid-skin == 'bootstrap5' {
          font-size: 12px;
        }

        @if $grid-skin =='tailwind3' {
          margin-left: -10px;
          margin-top: -21.5px;
        }

        @if $grid-skin =='bootstrap5.3' {
          margin-top: -6.5px;
        }

        @if $grid-skin =='bootstrap5' {
          margin-top: -15.5px;
        }
      }
    }

    .e-grid-dialogchart-container {
      border-radius: 4px;
    }

    .e-grid-dialog-chart-export-container {
      padding: 11px;
    }

    .e-tab {
      display: flex;
      flex-direction: column;

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

    .e-accordion {
      .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
        margin-bottom: 10px;
      }

      .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        text-transform: uppercase;
      }
    }

    .e-grid-dialogchart-bottom-spacer {
      margin-bottom: 12px;
    }

    .e-grid-dialogchart-intermediate-spacer {
      margin-left: 12px;
    }

    .e-grid-dialogchart-display-flex {
      display: flex;
    }

    .e-grid-dialogchart-display-flex-50 {
      width: 50%;
    }

    .e-grid-chart-props-header {
      margin-bottom: 14px;
      font-size: 13px;
      font-weight: 500;
      text-transform: uppercase;
    }

    .e-grid-dialog-data-tab-container .e-grid-chart-props-header {
      font-size: 14px;
      font-weight: 600;
    }

    .e-grid-chart-props-normal-header {
      margin-bottom: 4px;
      font-size: 13px;
      font-weight: normal;
    }

    @if $grid-skin =='material3' {
      .e-grid-dialog-format-tab-container .e-accordion .e-acrdn-item .e-acrdn-header {
        margin: 5px;
        padding: 8px 7px;
      }
    }

    .e-grid-dialog-format-tab-container .e-accordion .e-acrdn-item .e-acrdn-panel {
      .e-acrdn-content {
        padding: 0;
      }

      .e-acrdn-content > div:first-child {
        padding: 12px;
      }
    }

    .e-grid-dialog-data-tab-container {
      padding: 8px 7px;
    }

    .e-grid-chart-list {
      display: flex;
      align-items: center;
      margin: 4px 0;
      padding: 6px;
      border-radius: 4px;
      cursor: pointer;

      .e-icons {
        padding: 3px;
      }

      .e-grid-chart-text {
        margin-left: 2px;
      }
    }

    &.e-rtl {
      &.e-dialog .e-btn .e-btn-icon {
        &.e-grid-chart-min-icon,
        &.e-grid-chart-max-icon {
          @if $grid-skin =='tailwind3' {
            margin-left: 0;
            margin-right: -10px;
          }
        }
      }

      .e-grid-dialogchart-intermediate-spacer {
        margin-left: 0;
        margin-right: 12px;
      }

      .e-grid-chart-list .e-grid-chart-text {
        margin-left: 0;
        margin-right: 2px;
      }
    }
  }
}

@include export-module('grid-chart-theme') {

  #{&}.e-grid-context-menu-dialog {

    .e-grid-dialogchart-container {
      border: 1px solid $grid-chart-border-color;
    }

    .e-grid-dialog-tab-container {
      border-left: 1px solid $grid-chart-border-color;
      .e-tab.e-focused {
        box-shadow: none;
      }
    }

    .e-tab {
      .e-tab-header {
        border-top: 0;
        border-bottom: 1px solid $grid-chart-border-color;
      }

      .e-accordion {
        border: 0;
      }
    }

    @if $grid-skin =='fluent2' {
      .e-accordion .e-acrdn-item.e-select {
        border-bottom: 1px solid $grid-chart-border-color;
      }
    }

    .e-grid-chart-props-header {
      border-bottom: 1.75px solid $grid-chart-border-color;
    }

    .e-grid-chart-list:hover {
      background-color: $grid-chart-list-hover-bg-color;
      color: $grid-chart-list-hover-content-font-color;

      .e-icons {
        color: $grid-chart-list-hover-icon-color;
      }
    }

    .e-grid-chart-list.e-grid-chart-list-selected {
      background-color: $grid-chart-list-selected-bg-color;
      color: $grid-chart-list-selected-content-font-color;

      .e-icons {
        color: $grid-chart-list-selected-icon-color;
      }
    }

    &.e-rtl {
      .e-grid-dialog-tab-container {
        border-left: 0;
        border-right: 1px solid $grid-chart-border-color;
      }
    }
  }
}

@include export-module('grid-chart-bootstrap-dark-icons') {

  .e-grid-chart-export-icon::before {
    content: '\e702';
  }

  .e-grid-chart-print::before {
    content: '\e34b';
  }

  .e-grid-chart-jpeg::before {
    content: '\e1ad';
  }

  .e-grid-chart-png::before {
    content: '\e715';
  }

  .e-grid-chart-svg::before {
    content: '\e716';
  }

  .e-grid-chart-pdf::before {
    content: '\e240';
  }

  .e-grid-chart-xlsx::before {
    content: '\e726';
  }

  .e-grid-chart-csv::before {
    content: '\e241';
  }

  #{&}.e-grid-context-menu-dialog {

    .e-grid-chart-icon::before {
      content: '\e70d';
    }

    .e-grid-bar-chart-icon::before {
      content: '\e855';
    }

    .e-grid-bar-icon::before {
      content: '\e855';
    }

    .e-grid-stacking-bar-icon::before {
      content: '\e889';
    }

    .e-grid-stacking-bar-100-icon::before {
      content: '\e863';
    }

    .e-grid-pie-icon::before {
      content: '\e141';
    }

    .e-grid-column-chart-icon::before {
      content: '\e847';
    }

    .e-grid-column-icon::before {
      content: '\e847';
    }

    .e-grid-stacking-column-icon::before {
      content: '\e888';
    }

    .e-grid-stacking-column-100-icon::before {
      content: '\e868';
    }

    .e-grid-line-chart-icon::before {
      content: '\e867';
    }

    .e-grid-line-icon::before {
      content: '\e867';
    }

    .e-grid-stacking-line-icon::before {
      content: '\e841';
    }

    .e-grid-stacking-line-100-icon::before {
      content: '\e871';
    }

    .e-grid-area-chart-icon::before {
      content: '\e883';
    }

    .e-grid-area-icon::before {
      content: '\e883';
    }

    .e-grid-stacking-area-icon::before {
      content: '\e875';
    }

    .e-grid-stacking-area-100-icon::before {
      content: '\e900';
    }

    .e-grid-scatter-icon::before {
      content: '\e1ae';
    }

    .e-grid-chart-max-icon::before {
      content: '\e342';
    }

    .e-grid-chart-min-icon::before {
      content: '\e337';
    }
  }
}

@include export-module('grid-chart-bigger') {

  /*! Grid Chart bigger */
  .e-bigger #{&}.e-grid-context-menu-dialog,
  #{&}.e-grid-context-menu-dialog.e-bigger {
    &.e-dialog .e-btn .e-btn-icon {
      &.e-grid-chart-min-icon,
      &.e-grid-chart-max-icon {
        @if $grid-skin =='bootstrap5.3' or $grid-skin == 'bootstrap5' or $grid-skin =='tailwind3' {
          font-size: 15px;
        }

        @if $grid-skin =='bootstrap5' {
          margin-top: -1.5px;
        }

        @if $grid-skin =='tailwind3' {
          margin-top: -24.5px;
        }
      }
    }

    .e-grid-dialog-chart-export-container {
      padding: 15px;
    }

    .e-grid-dialogchart-bottom-spacer {
      margin-bottom: 16px;
    }

    .e-grid-chart-props-header {
      font-size: 15px;
    }

    .e-grid-chart-props-normal-header {
      font-size: 15px;
    }

    @if $grid-skin =='material3' {
      .e-grid-dialog-format-tab-container .e-accordion .e-acrdn-item .e-acrdn-header {
        margin: 5px;
        padding: 7px;
      }
    }

    .e-grid-dialog-format-tab-container .e-accordion .e-acrdn-item .e-acrdn-panel {
      .e-acrdn-content {
        padding: 0;
      }

      .e-acrdn-content > div:first-child {
        padding: 16px;
      }
    }

    .e-grid-dialog-data-tab-container {
      padding: 12px 11px;
    }

    .e-grid-chart-list {
      padding: 8px 12px;
    }
  }
}

$chart-wizard-border-color: $grey-88 !default;
$chart-wizard-list-hover-bg-color: $grey-44 !default;
$chart-wizard-list-hover-content-font-color: $grey-dark-font !default;
$chart-wizard-list-hover-icon-color: $grey-dark-font !default;
$chart-wizard-list-selected-bg-color: $grey-44 !default;
$chart-wizard-list-selected-content-font-color: $brand-primary !default;
$chart-wizard-list-selected-icon-color: unset !default;
$chart-wizard-chart-bg-color: $grey-base !default;

@include export-module('chart-wizard-layout') {

  #{&}.e-chart-wizard-context-menu {

    .e-chart-wizard-container {
      border-radius: 4px;
    }

    .e-chart-wizard-chart-export-container {
      padding: 11px;
    }

    .e-tab {
      display: flex;
      flex-direction: column;

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

    .e-accordion {
      .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
        margin-bottom: 10px;
      }

      .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
        font-size: 16px;
        font-weight: 600;
      }
    }

    .e-chart-wizard-bottom-spacer {
      margin-bottom: 12px;
    }

    .e-chart-wizard-intermediate-spacer {
      margin-left: 12px;
    }

    .e-chart-wizard-display-flex {
      display: flex;
    }

    .e-chart-wizard-data-tab-container {
      padding: 8px 7px;
    }

    .e-chart-wizard-list {
      display: flex;
      align-items: center;
      margin: 4px 0;
      padding: 6px;
      border-radius: 4px;
      gap: 12px;
      cursor: pointer;

      .e-icons {
        padding: 0;
      }
    }

    .e-chart-wizard-hidden-tab {
      display: none;
    }

    .e-chart-wizard-toggle-tab {
      position: absolute;
      top: 0;
      right: 0;
      align-items: center;
      padding: 0 8px;
    }

    .e-chart-wizard-sidebar {
      .e-sidebar {
        visibility: hidden;
      }
      .e-open {
        visibility: visible;
      }
    }

    .e-chart-wizard-tabs {
      width: 100%;
      height: 100% !important; /* stylelint-disable-line declaration-no-important */
      position: absolute;

      .e-tab-header {
        width: calc(97% - 15%) !important; /* stylelint-disable-line declaration-no-important */
      }

      .e-content{
        border-top: 1px solid $chart-wizard-border-color;
      }
    }

    .e-chart-wizard-btn-grp-container {
      width: 100%;
    }

    .e-chart-wizard-btn-grp-title {
      width: 100%;
      font-weight: 600;
    }

    .e-chart-wizard-property-name {
      width: fit-content;
      margin-bottom: 4px;
    }

    .e-chart-wizard-property-header {
      width: fit-content;
      margin-bottom: 4px;
      font-weight: 600;
    }

    .e-chart-wizard-axis-header {
      margin-bottom: 12px;
      font-weight: 600;
      width: fit-content;
      line-height: 20px;
    }

    .e-chart-wizard-data-settings-header {
      width: fit-content;
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
      margin-bottom: 6px;
    }

    .e-chart-wizard-tab-container {

      .e-tab {
        .e-tab-header {
          .e-toolbar-items {
            width: 100%;
            justify-content: space-around;
          }
        }
      }

      .e-chart-wizard-outline-container {
        .e-chip-list {
          width: 100%;
          justify-content: space-around;
        }
      }

      .e-chip-list.e-multi-selection {
        .e-chip::before {
          content: none;
        }
      }

      .e-input-value {
        padding: 4px 12px;
      }

      .e-btn-series-list {
        margin-bottom: 8px;
      }

      .e-chart-wizard-outline-container {
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-sf-content-bg-color-selected);
        flex-wrap: wrap;
        box-sizing: border-box;
        min-height: 40px;
        width: 100%;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 10px;
      }

      .e-chart-wizard-outline-container {

        &.chipbar {
          display: flex;
          align-items: center;
          gap: .5rem;
          flex-wrap: nowrap;
          overflow: hidden;
          border-bottom: 1px solid var(--color-sf-content-bg-color-selected);
          min-height: 40px;
          width: 100%;

          .e-chip-list {
            flex: 1 1 auto;
            width: auto;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: .375rem;
          }

          .chip-acc-icon {
            flex: 0 0 auto;
            align-self: flex-start;
            cursor: pointer;
            padding: 6px;
            transition: transform .15s ease;

            &.hidden {
              display: none;
            }

            &.expanded {
              transform: rotate(180deg);
            }
          }

          .chip-item.hidden {
            display: none;
          }

          .e-chip {
            flex: 0 0 auto;
          }

          &.expanded {
            align-items: flex-start;
            flex-wrap: nowrap;

            .e-chip-list {
              flex: 1 1 auto;
              width: auto;
              flex-wrap: wrap;
            }
          }
        }
      }

      .dock-menu {
        .e-menu-item {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 37px;
        }
      }

      .dock-menu {
        ul {
          .e-menu-item {
            .e-menu-icon {
              margin: 0;
            }
          }

          &.e-vertical {
            min-width: 37px;
          }
        }
      }
    }

    .e-chart-wizard-toggle-tab-rtl {
      position: absolute;
      top: 0;
      left: 0;
      align-items: center;
      padding: 0 8px;
    }

    .e-sidebar.e-right.e-open {
      border: none;
    }

    &.e-rtl {
      .e-chart-wizard-intermediate-spacer {
        margin-left: 0;
        margin-right: 12px;
      }
    }
  }
}

@include export-module('chart-wizard-theme') {

  #{&}.e-chart-wizard-context-menu {
    background-color: $chart-wizard-chart-bg-color;

    .e-chart-wizard-container {
      border: 1px solid $chart-wizard-border-color;
    }

    .e-chart-wizard-tab-container {
      border-left: 1px solid $chart-wizard-border-color;
      .e-tab.e-focused {
        box-shadow: none;
      }
    }

    .e-tab {
      .e-tab-header {
        border-bottom: 0;
      }

      .e-accordion {
        border: 0;
      }
    }

    @if $grid-skin =='fluent2' {
      .e-accordion .e-acrdn-item.e-select {
        border-bottom: 1px solid $chart-wizard-border-color;
      }
    }

    .e-chart-wizard-list:hover {
      background-color: $chart-wizard-list-hover-bg-color;
      color: $chart-wizard-list-hover-content-font-color;

      .e-icons {
        color: $chart-wizard-list-hover-icon-color;
      }
    }

    .e-chart-wizard-list.e-chart-wizard-list-selected {
      background-color: $chart-wizard-list-selected-bg-color;
      color: $chart-wizard-list-selected-content-font-color;

      .e-icons {
        color: $chart-wizard-list-selected-icon-color;
      }
    }

    &.e-rtl {
      .e-chart-wizard-tab-container {
        border: 0;
      }
    }
  }
}

@include export-module('chart-wizard-bootstrap-dark-icons') {

  .e-chart-wizard-export-icon::before {
    content: '\e702';
  }

  .e-chart-wizard-print::before {
    content: '\e34b';
  }

  .e-chart-wizard-jpeg::before {
    content: '\e1ad';
  }

  .e-chart-wizard-png::before {
    content: '\e715';
  }

  .e-chart-wizard-svg::before {
    content: '\e716';
  }

  .e-chart-wizard-pdf::before {
    content: '\e240';
  }

  .e-chart-wizard-xlsx::before {
    content: '\e726';
  }

  .e-chart-wizard-csv::before {
    content: '\e241';
  }

  #{&}.e-chart-wizard-context-menu {

    .e-chart-wizard-bar-chart-icon::before {
      content: '\e855';
    }

    .e-chart-wizard-bar-icon::before {
      content: '\e855';
    }

    .e-chart-wizard-stacking-bar-icon::before {
      content: '\e889';
    }

    .e-chart-wizard-stacking-bar-100-icon::before {
      content: '\e863';
    }

    .e-chart-wizard-pie-icon::before {
      content: '\e141';
    }

    .e-chart-wizard-column-chart-icon::before {
      content: '\e847';
    }

    .e-chart-wizard-column-icon::before {
      content: '\e847';
    }

    .e-chart-wizard-stacking-column-icon::before {
      content: '\e888';
    }

    .e-chart-wizard-stacking-column-100-icon::before {
      content: '\e868';
    }

    .e-chart-wizard-line-chart-icon::before {
      content: '\e867';
    }

    .e-chart-wizard-line-icon::before {
      content: '\e867';
    }

    .e-chart-wizard-stacking-line-icon::before {
      content: '\e841';
    }

    .e-chart-wizard-stacking-line-100-icon::before {
      content: '\e871';
    }

    .e-chart-wizard-area-chart-icon::before {
      content: '\e883';
    }

    .e-chart-wizard-area-icon::before {
      content: '\e883';
    }

    .e-chart-wizard-stacking-area-icon::before {
      content: '\e875';
    }

    .e-chart-wizard-stacking-area-100-icon::before {
      content: '\e900';
    }

    .e-chart-wizard-scatter-icon::before {
      content: '\e1ae';
    }
  }
}

@include export-module('chart-wizard-bigger') {

  /*! Chart  bigger */
  .e-bigger #{&}.e-chart-wizard-context-menu,
  #{&}.e-chart-wizard-context-menu.e-bigger {

    .e-chart-wizard-chart-export-container {
      padding: 15px;
    }

    .e-chart-wizard-bottom-spacer {
      margin-bottom: 16px;
    }

    .e-chart-wizard-data-tab-container {
      padding: 12px 11px;
    }

    .e-chart-wizard-list {
      padding: 8px 12px;
    }
  }
}